mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Adding color reference page
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev
parent
26b225486a
commit
c4cfc6455c
130
docs/extensions/capabilities/color-reference.md
Normal file
130
docs/extensions/capabilities/color-reference.md
Normal 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.
|
||||||
Loading…
Reference in New Issue
Block a user