chrome-devtools-frontend
Version:
Chrome DevTools UI
360 lines (291 loc) • 36.1 kB
Markdown
# Styles
[TOC]
## Design tokens
Design tokens are the building blocks for our design system, and they define
values like colors, fonts, and sizes. Use these tokens instead of hard coded
values. You can find the tokens in
[design\_system\_tokens.css](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/design_system_tokens.css).
*Note*: In rare cases we allow for one-off tokens that are used in the code,
e.g. if requested explicitly by our UX team. They are defined in
[application\_tokens.css](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/application_tokens.css).
## Colors
We define three sets of color token types, **reference/palette tokens**,
**system tokens**, and **application tokens**.
[**Reference or palette
tokens**](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/design_system_tokens.css)
(e.g. `--ref-palette-X`) are a set of base colors that get updated on [Chrome
color theme change](###) and should not be directly used.
[**System
tokens**](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/design_system_tokens.css)
(e.g. `--sys-color-X`) are a set of semantic tokens (use is often clear from
name e.g. `--sys-color-error-container`). They reference palette tokens and
incorporate light / dark mode switches and should be used in the code directly.
You can view all system tokens in their light and dark variant when running the
component server with `npm run components-server` under *Theme Colors*.
[**Application
tokens**](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/application_tokens.css)
(e.g. `--app-color-X`) reference palette tokens, and add more semantic meaning
and handle exception cases, where system tokens are not enough. Should be
defined for both light and dark modes. An example CL that adds application
tokens can be found
[here](https://crrev.com/c/5471945/10/front_end/ui/legacy/themeColors.css).
Each token follows a naming structure that describes its role. Important
keywords that are used for color roles are defined in the following table:
| Role | Description |
| ---------------------------- | -------------------------------------------------------------------------------------------------- |
| Surface | Universal background colors |
| Primary, Secondary, Tertiary | Colors that are used to emphasize or de-emphasize elements |
| Containers | Background colors for components |
| On | For text on top a surface/container that is used |
| Variant | Color that is used in combination with the "non-variant" counterpart, that should be de-emphasized |
### Custom Color Theming
DevTools adapts its own theme depending on [Chrome's custom theming
feature](https://blog.google/products/chrome/new-ways-to-customize-chrome-on-your-desktop/).
On theme changes, the *reference tokens* are automatically updated to align with
Chrome's theme change. Since all *system tokens*) make use of *reference
tokens*, they are updated, too.
Chrome's theming differentiates between two *default* color schemes (a blue
**default** and a **grey default**), and a number of **accent** color schemes
(blue, purple, yellow, and so on). In DevTools, the default schemes are defined
as `baseline-grayscale` and `baseline-default` css classes in
[themeColors.css](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/design_system_tokens.css).
The accent color schemes don't require extra color definitions and will adapt
with the reference colors.
If DevTools doesn't receive any theming information from Chrome, it defaults to
use the blue default scheme.
### Usage
#### Defaults
Below, we present harmonious color combinations suitable for various scenarios,
covering default choices for backgrounds, text, and icons.
##### Default colors
* background: `--sys-color-cdt-base-container`
* text default: `--sys-color-on-surface`
* text fainter (use rarely): `--sys-color-on-surface-subtle`
* icon: `--sys-color-on-surface-subtle`
* divider lines: `--sys-color-divider`
##### Selected colors
(when DevTools is focused window)
* background: `--sys-color-tonal-container`
* text: `--sys-color-on-tonal-container`
(when DevTools is unfocused)
* background: `--sys-color-neutral-container`
* text: `--sys-color-on-surface`
##### Disabled colors
* background: `--sys-color-state-disabled-container`
* text: `--sys-color-state-disabled`
* icons: `--sys-color-state-disabled`
##### Warning colors
* background: `--sys-color-surface-yellow`
* text: `--sys-color-on-surface-yellow`
* icons: `--sys-color-orange-bright`
##### Error colors
* background: `--sys-color-surface-error`
* text: `--sys-color-error`
* icons: `--sys-color-error-bright`
##### State layer colors
* hovered: `--sys-color-state-hover-on-subtle`
* keyboard focus outline: `--sys-color-state-focus-ring`
* active: `--sys-color-state-ripple-primary`,
`--sys-color-state-ripple-neutral-on-subtle` or
`--sys-color-state-ripple-on-prominent` (see explanation below)
Ripple colors are for the transparent state layer of the pressed state
(`active`). They have different intensity and are used for different base
colors:
* `--sys-color-state-ripple-primary` is used when elements with the primary
color are pressed. Primary buttons use this ripple color for example.
-on-prominent is a bit stronger than it's counter parts, making it more
visible on primary.
* `--sys-color-state-ripple-neutral-on-subtle` is used on light surfaces,
grays or transparent backgrounds. This should be the default "pressed" color
for everything else.
* `--sys-color-state-ripple-on-prominent` is used for inverted components
(that are using `--sys-color-inverse-surface` and
`--sys-color-inverse-on-surface` colors).
#### Usage of colors by category
In the following we present general guidelines and examples on color choices by
category (background, text, icon, and syntax highlighting).
##### Background colors
All backgrounds should be either a surface or a container.
* default toolbar color: `--sys-color-cdt-base-container`
* secondary toolbar color (e.g. Sources sidebar section headers like 'Watch'
or 'Breakpoints'): `--sys-color-surface2`
* default data grid row color: `--sys-color-cdt-base-container`
* alternating grid row color: `--sys-color-surface1`
* warning message: `--sys-color-surface-yellow`
* error message: `--sys-color-surface-error`
* info message: `--sys-color-cdt-base-container`
* info bar background: `--sys-color-neutral-container`
##### Text colors
Text should generally use on-surface, on-container.
* regular: `--sys-color-on-surface`
* fainter: `--sys-color-on-surface-subtle`
* disabled: `--sys-color-state-disabled`
##### Icon colors
Regular (dark grey) icons should also use on-something colors:
* default: `--sys-color-on-surface-subtle`
* on hover: `--sys-color-on-surface`
* disabled: `--sys-color-state-disabled`
For colored icons, please use icon application color tokens: `--app-`. In case
you need to add a new icon application color token, reference
`--sys-color-something-bright`
##### Syntax highlighting
Syntax highlighting should use `--sys-color-token-X` colors.
#### Dos and Don'ts
##### Dos
* Use system colors (`--sys-color-X`)
* Use application colors (`--app-color-X`) for *rare* deviations
##### Don'ts
* Don't use reference palette colors (`--ref-palette-X`)
* Don't use syntax tokens for anything other than highlighting code
### Token reference
*Note: You can view all system tokens in their light and dark variant when
running the component server with `npm run components-server` under Theme
Colors.*
| Sys color token | CSS | Figma | Usage |
| ----------------------------------- | ------------------------------------------------- | --------------------------------------- | ----------------------------------------------------------------------------------------- |
| base | `--sys-color-base` | sys/base | |
| base-container | `--sys-color-base-container` | sys/base-container | |
| base-container-elevated | `--sys-color-base-container-elevated` | sys/base-container-elevated | |
| blue | `--sys-color-blue` | sys/blue | |
| blue-bright | `--sys-color-blue-bright` | sys/blue-bright | Bright blue for icons |
| cdt-base | `--sys-color-cdt-base` | sys/cdt-base | Default DevTools surface background |
| cdt-base-container | `--sys-color-cdt-base-container` | sys/cdt-base-container | Default DevTools container background |
| cyan | `--sys-color-cyan` | sys/cyan | |
| cyan-bright | `--sys-color-cyan-bright` | sys/cyan-bright | Bright cyan for icons |
| divider | `--sys-color-divider` | sys/divider | Color for dividers |
| divider-on-tonal-container | `--sys-color-divider-on-tonal-container` | sys/divider-on-tonal-container | Color for dividers on top of a container with tonal colors |
| divider-prominent | `--sys-color-divider-prominent` | sys/divider-prominent | |
| error | `--sys-color-error` | sys/error | |
| error-bright | `--sys-color-error-bright` | sys/error-bright | Bright red for icons |
| error-container | `--sys-color-error-container` | sys/error-container | |
| error-outline | `--sys-color-error-outline` | sys/error-outline | |
| gradient-primary | `--sys-color-gradient-primary` | sys/gradient-primary | |
| gradient-tertiary | `--sys-color-gradient-tertiary` | sys/gradient-tertiary | |
| green | `--sys-color-green` | sys/green | |
| green-bright | `--sys-color-green-bright` | sys/green-bright | |
| inverse-on-surface | `--sys-color-inverse-on-surface` | sys/inverse-on-surface | |
| inverse-primary | `--sys-color-inverse-primary` | sys/inverse-primary | |
| inverse-surface | `--sys-color-inverse-surface` | sys/inverse-surface | |
| neutral-bright | `--sys-color-neutral-bright` | sys/neutral-bright | |
| neutral-container | `--sys-color-neutral-container` | sys/neutral-container | |
| neutral-outline | `--sys-color-neutral-outline` | sys/neutral-outline | |
| omnibox-container | `--sys-color-omnibox-container` | sys/omnibox-container | |
| on-base | `--sys-color-on-base` | sys/on-base | |
| on-base-divider | `--sys-color-on-base-divider` | sys/on-base-divider | |
| on-blue | `--sys-color-on-blue` | sys/on-blue | |
| on-cyan | `--sys-color-on-cyan` | sys/on-cyan | |
| on-error | `--sys-color-on-error` | sys/on-error | |
| on-error-container | `--sys-color-on-error-container` | sys/on-error-container | |
| on-green | `--sys-color-on-green` | sys/on-green | |
| on-orange | `--sys-color-on-orange` | sys/on-orange | |
| on-pink | `--sys-color-on-pink` | sys/on-pink | |
| on-primary | `--sys-color-on-primary` | sys/on-primary | |
| on-purple | `--sys-color-on-purple` | sys/on-purple | |
| on-secondary | `--sys-color-on-secondary` | sys/on-secondary | |
| on-surface | `--sys-color-on-surface` | sys/on-surface | |
| on-surface-error | `--sys-color-on-surface-error` | sys/on-surface-error | |
| on-surface-green | `--sys-color-on-surface-green` | sys/on-surface-green | |
| on-surface-primary | `--sys-color-on-surface-primary` | sys/on-surface-primary | |
| on-surface-secondary | `--sys-color-on-surface-secondary` | sys/on-surface-secondary | |
| on-surface-subtle | `--sys-color-on-surface-subtle` | sys/on-surface-subtle | |
| on-surface-yellow | `--sys-color-on-surface-yellow` | sys/on-surface-yellow | |
| on-tertiary | `--sys-color-on-tertiary` | sys/on-tertiary | |
| on-tertiary-container | `--sys-color-on-tertiary-container` | sys/on-tertiary-container | |
| on-tonal-container | `--sys-color-on-tonal-container` | sys/on-tonal-container | |
| on-yellow | `--sys-color-on-yellow` | sys/on-yellow | |
| on-yellow-container | `--sys-color-on-yellow-container` | sys/on-yellow-container | |
| orange | `--sys-color-orange` | sys/orange | |
| orange-bright | `--sys-color-orange-bright` | sys/orange-bright | |
| outline | `--sys-color-outline` | sys/outline | |
| pink | `--sys-color-pink` | sys/pink | |
| pink-bright | `--sys-color-pink-bright` | sys/pink-bright | |
| primary | `--sys-color-primary` | sys/primary | |
| primary-bright | `--sys-color-primary-bright` | sys/primary-bright | |
| purple | `--sys-color-purple` | sys/purple | |
| purple-bright | `--sys-color-purple-bright` | sys/purple-bright | |
| secondary | `--sys-color-secondary` | sys/secondary | |
| state-disabled | `--sys-color-state-disabled` | sys/state-disabled | |
| state-disabled-container | `--sys-color-state-disabled-container` | sys/state-disabled-container | |
| state-focus-highlight | `--sys-color-state-focus-highlight` | sys/state-focus-highlight | |
| state-focus-ring | `--sys-color-state-focus-ring` | sys/state-focus-ring | |
| state-focus-select | `--sys-color-state-focus-select` | sys/state-focus-select | |
| state-header-hover | `--sys-color-state-header-hover` | sys/state-header-hover | |
| state-hover-bright-blend-protection | `--sys-color-state-hover-bright-blend-protection` | sys/state-hover-bright-blend-protection | |
| state-hover-dim-blend-protection | `--sys-color-state-hover-dim-blend-protection` | sys/state-hover-dim-blend-protection | |
| state-hover-on-prominent | `--sys-color-state-hover-on-prominent` | sys/state-hover-on-prominent | |
| state-hover-on-subtle | `--sys-color-state-hover-on-subtle` | sys/state-hover-on-subtle | |
| state-on-header-hover | `--sys-color-state-on-header-hover` | sys/state-on-header-hover | |
| state-ripple-neutral-on-prominent | `--sys-color-state-ripple-neutral-on-prominent` | sys/state-ripple-neutral-on-prominent | |
| state-ripple-neutral-on-subtle | `--sys-color-state-ripple-neutral-on-subtle` | sys/state-ripple-neutral-on-subtle | |
| state-ripple-primary | `--sys-color-state-ripple-primary` | sys/state-ripple-primary | |
| surface | `--sys-color-surface` | sys/surface | Universal surface color |
| surface1 | `--sys-color-surface1` | sys/surface1 | Universal surface color |
| surface2 | `--sys-color-surface2` | sys/surface2 | Universal surface color |
| surface3 | `--sys-color-surface3` | sys/surface3 | Universal surface color |
| surface4 | `--sys-color-surface4` | sys/surface4 | Universal surface color |
| surface5 | `--sys-color-surface5` | sys/surface5 | Universal surface color |
| surface-error | `--sys-color-surface-error` | sys/surface-error | Surface for error backgrounds |
| surface-green | `--sys-color-surface-green` | sys/surface-green | |
| surface-variant | `--sys-color-surface-variant` | sys/surface-variant | |
| surface-yellow | `--sys-color-surface-yellow` | sys/surface-yellow | Yellow surface colors used e.g. for warnings |
| surface-yellow-high | `--sys-color-surface-yellow-high` | sys/surface-yellow-high | |
| tertiary | `--sys-color-tertiary` | sys/tertiary | |
| tertiary-container | `--sys-color-tertiary-container` | sys/tertiary-container | Background color for de-emphasizing a container next to a primary and secondary container |
| token-atom | `--sys-color-token-atom` | sys/token-atom | Syntax highlighting |
| token-attribute | `--sys-color-token-attribute` | sys/token-attribute | Syntax highlighting |
| token-attribute-value | `--sys-color-token-attribute-value` | sys/token-attribute-value | Syntax highlighting |
| token-builtin | `--sys-color-token-builtin` | sys/token-builtin | Syntax highlighting |
| token-comment | `--sys-color-token-comment` | sys/token-comment | Syntax highlighting for comments |
| token-definition | `--sys-color-token-definition` | sys/token-definition | Syntax highlighting |
| token-deleted | `--sys-color-token-deleted` | sys/token-deleted | Syntax highlighting |
| token-inserted | `--sys-color-token-inserted` | sys/token-inserted | Syntax highlighting |
| token-keyword | `--sys-color-token-keyword` | sys/token-keyword | Syntax highlighting for keywords |
| token-meta | `--sys-color-token-meta` | sys/token-meta | Syntax highlighting |
| token-number | `--sys-color-token-number` | sys/token-number | Syntax highlighting for numbers |
| token-property | `--sys-color-token-property` | sys/token-property | Syntax highlighting for properties |
| token-property-special | `--sys-color-token-property-special` | sys/token-property-special | Syntax highlighting |
| token-pseudo-element | `--sys-color-token-pseudo-element` | sys/token-pseudo-element | Syntax highlighting for pseudo elements |
| token-string | `--sys-color-token-string` | sys/token-string | Syntax highlighting for strings |
| token-string-special | `--sys-color-token-string-special` | sys/token-string-special | Syntax highlighting |
| token-subtle | `--sys-color-token-subtle` | sys/token-subtle | Syntax highlighting |
| token-tag | `--sys-color-token-tag` | sys/token-tag | Syntax highlighting |
| token-type | `--sys-color-token-type` | sys/token-type | Syntax highlighting |
| token-variable | `--sys-color-token-variable` | sys/token-variable | Syntax highlighting for variables |
| token-variable-special | `--sys-color-token-variable-special` | sys/token-variable-special | |
| tonal-container | `--sys-color-tonal-container` | sys/tonal-container | Background color for selected containers |
| tonal-outline | `--sys-color-tonal-outline` | sys/tonal-outline | Outline color for selected containers with `--sys-color-tonal-container` |
| yellow | `--sys-color-yellow` | sys/yellow | |
| yellow-bright | `--sys-color-yellow-bright` | sys/yellow-bright | Yellow color for icons |
| yellow-container | `--sys-color-yellow-container` | sys/yellow-container | |
| yellow-outline | `--sys-color-yellow-outline` | sys/yellow-outline | Yellow outline for containers using `--sys-color-yellow-container` |
### Edge cases
In rare edge cases, you might want to define new tokens. If you do so, don't
define `--sys-color-X` tokens, since these are reserved for Material's design
system, but instead create an application token `--app-color-X`. Be aware that
you need to define light, dark and dynamic theme colors for this new token. An
example CL that adds application tokens can be found
[here](https://crrev.com/c/5471945/10/front_end/ui/legacy/themeColors.css).
### Resources
* [Reference color
tokens](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/design_system_tokens.css)
* [System color
tokens](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/design_system_tokens.css)
* [Application color
tokens](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/application_tokens_.css)
* [Color definitions in the CDT
Figma](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=337-5217&m=dev)
## Sizes
[**System
tokens**](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/design_system_tokens.css)
include a set of tokens to be used for sizes, ranging from `--sys-size-1` (which
corresponds to a single pixel) to `--sys-size-41` (which corresponds to the HD
resolution width).
### Usage
#### Negative sizes
Sometimes you might need to negate a size, for example to make up for some
padding or margins. Use the pattern
```css
calc(-1 * var(--sys-size-X));
```
and try to avoid other patterns (like `calc(0px - var(...))`) that have a
similar effect.