From c4cfc6455cf74297b162e1367a1611524f49aa3d Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Mon, 9 Nov 2020 13:33:32 +0300 Subject: [PATCH] Adding color reference page Signed-off-by: Alex Andreev --- .../capabilities/color-reference.md | 130 ++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 docs/extensions/capabilities/color-reference.md diff --git a/docs/extensions/capabilities/color-reference.md b/docs/extensions/capabilities/color-reference.md new file mode 100644 index 0000000000..665bab0e6c --- /dev/null +++ b/docs/extensions/capabilities/color-reference.md @@ -0,0 +1,130 @@ +# Theme color reference +You can use CSS variables generated from theme `.json` files to style an extension with respect of active theme. + +## Base colors +`blue`: blue color. +`magenta`: magenta color. +`golden`: gold/yellow color. +`halfGray`: gray with some apacity applied. +`primary`: Lens brand (blue) color. +`colorSuccess`: successfull operations color. +`colorOk`: successfull operations (bright version) color. +`colorInfo`: informational, in-progress color. +`colorError`: critical error color. +`colorSoftError`: error color. +`colorWarning`: warning color. +`colorVague`: soft gray color for notices, hints etc. +`colorTerminated`: terminated, closed, stale color. +`boxShadow`: semi-transparent box-shadow color. + +## Text colors +`textColorPrimary`: foreground text color. +`textColorSecondary`: foreground text color for different paragraps, parts of text. +`textColorAccent`: foreground text color to highlight its parts. + +## Border colors +`borderColor`: border color. +`borderFaintColor`: fainted (lighter or darker, which depends on the theme) border color. + +## Layout colors +`mainBackground`: main background color for the app. +`contentColor`: background color for panels contains some data. +`layoutBackground`: background color for layout parts. +`layoutTabsBackground`: background color for general tabs. +`layoutTabsActiveColor`: foreground color for general tabs. +`layoutTabsLineColor`: background color for lines under general tabs. + +## Sidebar colors +`sidebarLogoBackground`: background color behind logo in sidebar. +`sidebarActiveColor`: foreground color for active menu items in sidebar. +`sidebarSubmenuActiveColor`: foreground color for active submenu items in sidebar. +`sidebarBackground`: background color for sidebar. + +## Button colors +`buttonPrimaryBackground`: button background color for primary actions. +`buttonDefaultBackground`: default button background color. +`buttonAccentBackground`: accent button background color. +`buttonDisabledBackground`: disabled button background color. + +## Table colors +`tableBgcStripe`: background color for odd rows in table. +`tableBgcSelected`: background color for selected row in table. +`tableHeaderBackground`: background color for table header. +`tableHeaderBorderWidth`: border width under table header. +`tableHeaderBorderColor`: border color for line under table header. +`tableHeaderColor`: foreground color for table header. +`tableSelectedRowColor`: foreground color for selected row in table. + +## Dock colors +`dockHeadBackground`: background color for dock's header. +`dockInfoBackground`: background color for dock's info panel. +`dockInfoBorderColor`: border color for dock's info panel. + +## Helm chart colors +`helmLogoBackground`: background color for chart logo. +`helmImgBackground`: background color for chart image. +`helmStableRepo`: background color for stable repo. +`helmIncubatorRepo`: background color for incubator repo. +`helmDescriptionHr`: Helm chart description separator line color. +`helmDescriptionBlockqouteColor`: Helm chart description blockquote color. +`helmDescriptionBlockqouteBorder`: Helm chart description blockquote border color. +`helmDescriptionBlockquoteBackground`: Helm chart description blockquote background color. +`helmDescriptionHeaders`: Helm chart description headers color. +`helmDescriptionH6`: Helm chart description header foreground color. +`helmDescriptionTdBorder`: Helm chart description table cell border color. +`helmDescriptionTrBackground`: Helm chart description table row background color. +`helmDescriptionCodeBackground`: Helm chart description code background color. +`helmDescriptionPreBackground`: Helm chart description pre background color. +`helmDescriptionPreColor`: Helm chart description pre foreground color. + +## Terminal colors +`terminalBackground`: Terminal background color. +`terminalForeground`: Terminal foreground color. +`terminalCursor`: Terminal cursor color. +`terminalCursorAccent`: Terminal cursor accent color. +`terminalSelection`: Terminal selection background color. +`terminalBlack`: Terminal black color. +`terminalRed`: Terminal red color. +`terminalGreen`: Terminal green color. +`terminalYellow`: Terminal yellow color. +`terminalBlue`: Terminal blue color. +`terminalMagenta`: Terminal magenta color. +`terminalCyan`: Terminal cyan color. +`terminalWhite`: Terminal white color. +`terminalBrightBlack`: Terminal bright black color. +`terminalBrightRed`: Terminal bright red color. +`terminalBrightGreen`: Terminal bright green color. +`terminalBrightYellow`: Terminal bright yellow color. +`terminalBrightBlue`: Terminal bright blue color. +`terminalBrightMagenta`: Terminal bright magenta color. +`terminalBrightCyan`: Terminal bright cyan color. +`terminalBrightWhite`: Terminal bright white color. + +## Dialog colors +`dialogHeaderBackground`: background color for dialog header. +`dialogFooterBackground`: background color for dialog footer. + +## Detail panel (Drawer) colors +`drawerTitleText`: drawer title foreground color. +`drawerSubtitleBackground`: drawer subtitle foreground color. +`drawerItemNameColor`: foreground color for item name in drawer. +`drawerItemValueColor`: foreground color for item value in drawer. + +## Misc colors +`logsBackground`: background color for pod logs. +`clusterMenuBackground`: background color for cluster menu. +`clusterMenuBorderColor`: border color for cluster menu. +`clusterSettingsBackground`: background color for cluster settings. +`addClusterIconColor`: add cluster button background color. +`iconActiveColor`: active cluster icon foreground color. +`iconActiveBackground`: active cluster icon background color. +`filterAreaBackground`: page filter area (where selected namespaces are lister) background color. +`chartStripesColor`: bar chart zebra stripes background color. +`chartCapacityColor`: background color for capacity values in bar charts. +`pieChartDefaultColor`: default background color for pie chart values. +`selectOptionHoveredColor`: foregrond color for selected element in dropdown list. +`lineProgressBackground`: background color for progress line. +`radioActiveBackground`: background color for active radio buttons. +`menuActiveBackground`: background color for active menu items. + +In most cases you would only need base, text and some of the layout colors. \ No newline at end of file