hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Adding lists for color reference

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2020-11-09 13:49:07 +03:00
parent 4b4808e0ef
commit 839b012af7
1 changed files with 100 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

200
docs/extensions/capabilities/color-reference.md
View File

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