mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Removing color reference from docs (#2757)
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
parent
f4ff28e51c
commit
1e16e0bdae
@ -1,131 +0,0 @@
|
|||||||
# Theme Color Reference
|
|
||||||
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.
|
|
||||||
|
|
||||||
## 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.
|
|
||||||
- `--buttonLightBackground`: light 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.
|
|
||||||
@ -103,8 +103,6 @@ For example:
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
A complete list of theme colors can be found in the [Color Reference](../color-reference).
|
|
||||||
|
|
||||||
### Theme Switching
|
### Theme Switching
|
||||||
|
|
||||||
When the light theme is active, the `<body>` element gets a "theme-light" class, or: `<body class="theme-light">`.
|
When the light theme is active, the `<body>` element gets a "theme-light" class, or: `<body class="theme-light">`.
|
||||||
|
|||||||
@ -27,7 +27,6 @@ nav:
|
|||||||
- Extension Capabilities:
|
- Extension Capabilities:
|
||||||
- Common Capabilities: extensions/capabilities/common-capabilities.md
|
- Common Capabilities: extensions/capabilities/common-capabilities.md
|
||||||
- Styling: extensions/capabilities/styling.md
|
- Styling: extensions/capabilities/styling.md
|
||||||
- Color Reference: extensions/capabilities/color-reference.md
|
|
||||||
- Extension Guides:
|
- Extension Guides:
|
||||||
- Overview: extensions/guides/README.md
|
- Overview: extensions/guides/README.md
|
||||||
- Generator: extensions/guides/generator.md
|
- Generator: extensions/guides/generator.md
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user