All values come from src/_theme.scss. Click any token to copy it.
| Variable | Description | Sample |
|---|---|---|
--landsoul-bg |
Page background | |
--landsoul-text |
Primary text color | |
--landsoul-inverse-text |
Inverse text color | |
--landsoul-text-on-surface |
Secondary text on surfaces | |
--landsoul-surface-low |
Low emphasis surface | |
--landsoul-surface |
Base surface color | |
--landsoul-surface-high |
High emphasis surface | |
--landsoul-accent |
Brand accent color | |
--landsoul-danger |
Danger and error color | |
--landsoul-border |
Border color | |
--landsoul-0-1 |
Utility alpha overlay 10% | |
--landsoul-0-2 |
Utility alpha overlay 20% | |
--landsoul-0-3 |
Utility alpha overlay 30% |
Port of MDN Web Docs
Note that these keywords are case insensitive, but are listed here with mixed case for readability.
Depending on your settings, the sample colors displayed in the table may change. You can also view this page with different browsers, operating systems, and system settings, to check the differences.
| Keyword | Description | Sample |
|---|---|---|
AccentColor |
Background of accented user interface controls. | |
AccentColorText |
Text of accented user interface controls. | |
ActiveText |
Text of active links. | |
ButtonBorder |
Base border color of controls. | |
ButtonFace |
Background color of controls. | |
ButtonText |
Text color of controls. | |
Canvas |
Background of application content or documents. | |
CanvasText |
Text color in application content or documents. | |
Field |
Background of input fields. | |
FieldText |
Text in input fields. | |
GrayText |
Text color for disabled items (for example, a disabled control). | |
Highlight |
Background of selected items. | |
HighlightText |
Text color of selected items. | |
LinkText |
Text of non-active, non-visited links. | |
Mark |
Background of text that has been specially marked (such as by the HTML
mark element).
|
|
MarkText |
Text that has been specially marked (such as by the HTML mark element). |
|
SelectedItem |
Background of selected items, for example, a selected checkbox. | |
SelectedItemText |
Text of selected items. | |
VisitedText |
Text of visited links. |
The following keywords were defined in earlier versions of the CSS Color Module. They are now deprecated for use on public web pages.
| Keyword | Description | Replacement | Sample |
|---|---|---|---|
ActiveBorder |
Active window border | ButtonBorder |
|
ActiveCaption |
Active window caption. Should be used with CaptionText as foreground color. |
Canvas |
|
AppWorkspace |
Background color of multiple document interface. | Canvas |
|
Background |
Desktop background. | Canvas |
|
ButtonHighlight |
The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border. | ButtonFace |
|
ButtonShadow |
The color of the border away from the light source for 3-D elements that appear 3-D due to that layer of surrounding border. | ButtonFace |
|
CaptionText |
Text in caption, size box, and scrollbar arrow box. Should be used with the
ActiveCaption background color.
|
CanvasText |
|
InactiveBorder |
Inactive window border. | ButtonBorder |
|
InactiveCaption |
Inactive window caption. Should be used with the InactiveCaptionText foreground color. |
Canvas |
|
InactiveCaptionText |
Color of text in an inactive caption. Should be used with the
InactiveCaption background color.
|
GrayText |
|
InfoBackground |
Background color for tooltip controls. Should be used with the
InfoText foreground color.
|
Canvas |
|
InfoText |
Text color for tooltip controls. Should be used with the
InfoBackground background color.
|
CanvasText |
|
Menu |
Menu background. Should be used with the MenuText or -moz-MenuBarText foreground color. |
Canvas |
|
MenuText |
Text in menus. Should be used with the Menu background color. |
CanvasText |
|
Scrollbar |
Background color of scroll bars. | Canvas |
|
ThreeDDarkShadow |
The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. | ButtonBorder |
|
ThreeDFace |
The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Should be used with
the ButtonText foreground color.
|
ButtonFace |
|
ThreeDHighlight |
The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. | ButtonBorder |
|
ThreeDLightShadow |
The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. | ButtonBorder |
|
ThreeDShadow |
The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border. | ButtonBorder |
|
Window |
Window background. Should be used with the WindowText foreground color. |
Canvas |
|
WindowFrame |
Window frame. | ButtonBorder |
|
WindowText |
Text in windows. Should be used with the Window background color. |
CanvasText |