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 color reference page

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2020-11-09 13:33:32 +03:00
parent 26b225486a
commit c4cfc6455c
1 changed files with 130 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
docs/extensions/capabilities/color-reference.md Normal file
View File

@ -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.