mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Adding dashes -- before variable names
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev
parent
dd925a87de
commit
f90f032d94
@ -1,130 +1,130 @@
|
||||
# Theme color reference
|
||||
You can use CSS variables generated from theme `.json` files to style an extension with respect of active theme.
|
||||
You can use theme-based CSS Variables to style an extension according to the 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.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user