diff --git a/docs/extensions/capabilities/color-reference.md b/docs/extensions/capabilities/color-reference.md index 665bab0e6c..d9fe0c70ec 100644 --- a/docs/extensions/capabilities/color-reference.md +++ b/docs/extensions/capabilities/color-reference.md @@ -2,129 +2,129 @@ 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. +- `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. +- `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. +- `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. +- `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. +- `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. +- `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. +- `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. +- `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. +- `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. +- `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. +- `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. +- `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. +- `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