rui/defaultTheme.rui

theme {
	colors = _{
		ruiTextColor = #FF000000,
		ruiDisabledTextColor = #FF202020,
		ruiBackgroundColor = #FFFFFFFF,
		ruiButtonColor = #FFE0E0E0,
		ruiButtonActiveColor = #FFC0C0C0,
		ruiButtonTextColor = #FF000000,
		ruiButtonDisabledColor = #FFE0E0E0,
		ruiButtonDisabledTextColor = #FF202020,
		ruiHighlightColor = #FF1A74E8,
		ruiHighlightTextColor = #FFFFFFFF,
		ruiSelectedColor = #FFE0E0E0,
		ruiSelectedTextColor = #FF000000,
		ruiPopupBackgroundColor = #FFFFFFFF,
		ruiPopupTextColor = #FF000000,
		ruiPopupTitleColor = #FF0000FF,
		ruiPopupTitleTextColor = #FFFFFFFF,

		ruiTabBarBackgroundColor = #FFEEEEEE,
		ruiTabColor = #FFD0D0D0,
		ruiTabTextColor = #FF202020,
		ruiCurrentTabColor = #FFFFFFFF,
		ruiCurrentTabTextColor = #FF000000,
	},
	colors:dark = _{
		ruiTextColor = #FFE0E0E0,
		ruiDisabledTextColor = #FFA0A0A0,
		ruiBackgroundColor = #FF080808,
		ruiButtonColor = #FF404040,
		ruiButtonTextColor = #FFE0E0E0,
		ruiButtonDisabledColor = #FF404040,
		ruiButtonDisabledTextColor = #FFA0A0A0,
		ruiHighlightColor = #FF1A74E8,
		ruiHighlightTextColor = #FFFFFFFF,

		ruiTabBarBackgroundColor = #FF303030,
		ruiTabColor = #FF606060,
		ruiTabTextColor = #FFE0E0E0,
		ruiCurrentTabColor = #FF000000,
		ruiCurrentTabTextColor = #FFFFFFFF,
	},
	constants = _{
		ruiButtonHorizontalPadding = 16px,
		ruiButtonVerticalPadding = 8px,
		ruiButtonMargin = 4px,
		ruiButtonRadius = 4px,
		ruiButtonHighlightDilation = 1.5px, 
		ruiButtonHighlightBlur = 2px,
		ruiCheckboxGap = 12px,
		ruiListItemHorizontalPadding = 12px,
		ruiListItemVerticalPadding = 4px,
		ruiPopupTitleHeight = 32px,
		ruiPopupTitlePadding = 8px,
		ruiPopupButtonGap = 4px,
		ruiTabMargin = 1px,
		ruiTabHeight = 32px,
		ruiTabBarPadding = 2px,
		ruiTabRadius = 2px,
	},
	constants:touch = _{
		ruiButtonHorizontalPadding = 20px,
		ruiButtonVerticalPadding = 16px
	},
	styles = [
		ruiApp {
			font-name = "Arial, Helvetica, sans-serif",
			text-size = 12pt,
			text-color = @ruiTextColor,
			background-color = @ruiBackgroundColor,
		},
		ruiButton {
			align = center,
			padding = "@ruiButtonVerticalPadding, @ruiButtonHorizontalPadding, @ruiButtonVerticalPadding, @ruiButtonHorizontalPadding",
			margin = @ruiButtonMargin,
			radius = @ruiButtonRadius,
			background-color = @ruiButtonColor,
			text-color = @ruiButtonTextColor,
			border = _{width = 1px, style = solid, color = @ruiButtonTextColor}
		},
		ruiDisabledButton {
			align = center,
			padding = "@ruiButtonVerticalPadding, @ruiButtonHorizontalPadding, @ruiButtonVerticalPadding, @ruiButtonHorizontalPadding",
			margin = @ruiButtonMargin,
			radius = @ruiButtonRadius,
			background-color = @ruiButtonDisabledColor,
			text-color = @ruiButtonDisabledTextColor,
			border = _{width = 1px, style = solid, color = @ruiButtonDisabledTextColor}
		},
		ruiButton:hover {
			text-color = @ruiTextColor,
			background-color = @ruiBackgroundColor,
		},
		ruiButton:focus {
			shadow = _{spread-radius = @ruiButtonHighlightDilation, blur = @ruiButtonHighlightBlur, color = @ruiHighlightColor },
		},
		ruiButton:active {
			background-color = @ruiButtonActiveColor
		},
		ruiCheckbox {
			radius = 2px,
			padding = 1px,
			margin = 2px,
		},
		ruiCheckbox:focus {
			margin = 0,
			border = _{style = solid, color = @ruiHighlightColor, width = 2px },
		},
		ruiListItem {
			radius = 4px,
			padding = "@ruiListItemVerticalPadding, @ruiListItemHorizontalPadding, @ruiListItemVerticalPadding, @ruiListItemHorizontalPadding",
		},
		ruiListItemSelected {
			background-color=@ruiSelectedColor,
			text-color=@ruiSelectedTextColor,
		},
		ruiListItemFocused {
			background-color=@ruiHighlightColor,
			text-color=@ruiHighlightTextColor,
		},
		ruiTabBar {
			background-color = @ruiTabBarBackgroundColor,
		}
		ruiCurrentTab {
			min-height = @ruiTabHeight,
			background-color = @ruiCurrentTabColor,
			text-color = @ruiCurrentTabTextColor,
			padding-left = 4px,
			padding-top = 2px,
			padding-right = 4px,
			padding-bottom = 2px,
			margin = @ruiTabMargin,
			radius = @ruiTabRadius,
		},
		ruiCurrentTab:focus {
			padding-left = 2px,
			padding-top = 0px,
			padding-right = 2px,
			padding-bottom = 0px,
			border = _{style = solid, color = @ruiHighlightColor, width = 2px },
		},
		ruiTab {
			min-height = @ruiTabHeight,
			background-color = @ruiTabColor,
			text-color = @ruiTabTextColor,
			padding-left = 4px,
			padding-top = 2px,
			padding-right = 4px,
			padding-bottom = 2px,
			margin = @ruiTabMargin,
			radius = @ruiTabRadius,
		},
		ruiTab:focus {
			padding-left = 2px,
			padding-top = 0px,
			padding-right = 2px,
			padding-bottom = 0px,
			border = _{style = solid, color = @ruiHighlightColor, width = 2px },
		},
		ruiCurrentVerticalTab {
			min-width = @ruiTabHeight,
			background-color = @ruiCurrentTabColor,
			text-color = @ruiCurrentTabTextColor,
			padding-left = 2px,
			padding-top = 4px,
			padding-right = 2px,
			padding-bottom = 4px,
			margin = @ruiTabMargin,
			radius = @ruiTabRadius,
		},
		ruiCurrentVerticalTab:focus {
			padding-left = 0px,
			padding-top = 2px,
			padding-right = 0px,
			padding-bottom = 2px,
			border = _{style = solid, color = @ruiHighlightColor, width = 2px },
		},
		ruiVerticalTab {
			min-width = @ruiTabHeight,
			background-color = @ruiTabColor,
			text-color = @ruiTabTextColor,
			padding-left = 2px,
			padding-top = 4px,
			padding-right = 2px,
			padding-bottom = 4px,
			margin = @ruiTabMargin,
			radius = @ruiTabRadius,
		},
		ruiVerticalTab:focus {
			padding-left = 0px,
			padding-top = 2px,
			padding-right = 0px,
			padding-bottom = 2px,
			border = _{style = solid, color = @ruiHighlightColor, width = 2px },
		},
		ruiTabCloseButton {
			width = 16px,
			height = 16px,
			cell-vertical-align = center,
			cell-horizontal-align = center,
			font = Helvetica,
			text-size = 16px,
		},
		ruiTabCloseButton:hover {
			background-color = @ruiTabBarBackgroundColor,
			radius = 3px,
		},
		ruiTabCloseButton:focus {
			outline = _{style = solid, color = @ruiHighlightColor, width = 2px },
		},
		ruiPopup {
			background-color = @ruiPopupBackgroundColor,
			text-color = @ruiPopupTextColor,
			radius = 4px,
			shadow = _{spread-radius=4px, blur=16px, color=#80808080},
		},
		ruiPopupTitle {
			background-color = @ruiPopupTitleColor,
			text-color = @ruiPopupTitleTextColor,
			min-height = 24px,
		},
		ruiMessageText {
			padding-left = 64px,
			padding-right = 64px,
			padding-top = 32px,
			padding-bottom = 32px,
		},
		ruiPopupMenuItem {
			padding-top = 4px,
			padding-bottom = 4px,
			padding-left = 8px,
			padding-right = 8px,
		},
		ruiCurrentTableCell {
			background-color=@ruiSelectedColor,
			text-color=@ruiSelectedTextColor,
		},
		ruiCurrentTableCellFocused {
			background-color=@ruiHighlightColor,
			text-color=@ruiHighlightTextColor,
		},
	],
}