[documentation] Add components (button) and color information
Also-by: kprokopenko, petermueller
Bug: 357513556
Change-Id: Ie42336076e57c75737c3477c97fc210705d9cd01
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5737516
Auto-Submit: Kim-Anh Tran <[email protected]>
Reviewed-by: Peter Müller <[email protected]>
Commit-Queue: Peter Müller <[email protected]>
diff --git a/docs/styleguide/ux/README.md b/docs/styleguide/ux/README.md
index 6fc79b8..7355499 100644
--- a/docs/styleguide/ux/README.md
+++ b/docs/styleguide/ux/README.md
@@ -8,8 +8,12 @@
## Table of contents
1. [How to organize UI](organizing.md)
-1. [How to style UI](styling.md)
+1. [How to style UI](styleguide.md)
1. [How to write UI text](writing.md)
1. [Glossary](glossary.md)
+## UI reviews
+If you make changes to DevTools UI, make sure to involve us **early**, i.e. already in the
+UI design stage. See also the [Chrome DevTools Design Review Guidelines](../../contributing/design.md#Review-Guidelines)
+
Back to the [Chromium DevTools Documentation](../../README.md).
diff --git a/docs/styleguide/ux/components.md b/docs/styleguide/ux/components.md
new file mode 100644
index 0000000..a1f8b34
--- /dev/null
+++ b/docs/styleguide/ux/components.md
@@ -0,0 +1,141 @@
+# Components
+
+[TOC]
+
+## Buttons
+
+
+
+### Variations
+
+#### Primary buttons
+
+
+
+Primary buttons are the most prominent type of button available. They are used
+for a single, necessary action a developer must complete, or for a highly
+recommended, promoted action. Use them sparingly and with purpose.
+
+#### Tonal buttons
+
+
+
+Use tonal buttons in dialogs for actions that stand secondary to a primary
+action and are not a cancel or close action.
+
+#### Outlined buttons
+
+
+
+Outlined buttons are the default button style. Use them for regular actions in
+the UI or to cancel dialogs.
+
+#### Text buttons
+
+
+
+Text buttons are the least prominent button choice. Use them in cases outlined
+buttons would create too much visual noise.
+
+#### Micro buttons
+
+Micro buttons are used if we have a small line height.
+
+#### Icon buttons
+
+
+
+Use icon buttons in toolbars of contextual actions that shouldn’t take up much
+space.
+
+### Usage
+
+#### Developer guidelines
+
+##### Dos and Don'ts
+
+###### Do
+
+ * Use
+ [`devtools-button`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/components/buttons/Button.ts)
+ for Primary, Outlined, Text, Micro and Icon buttons
+ * Use
+ [`ToolbarButton`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/Toolbar.ts;drc=2017cd8a8925f180257662f78eaf9eb93e8e394d;bpv=1;bpt=1;l=555?q=toolbar.ts%20devtools&ss=chromium&gsn=ToolbarButton&gs=KYTHE%3A%2F%2Fkythe%3A%2F%2Fchromium.googlesource.com%2Fcodesearch%2Fchromium%2Fsrc%2F%2Fmain%3Flang%3Dtypescript%3Fpath%3Dfront_end%2Fui%2Flegacy%2FToolbar%23ToolbarButton%2523type)
+ for buttons inside
+ [`Toolbars`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/Toolbar.ts).
+ Underneath they make use of `devtools-button`.
+
+###### Don'ts
+
+ * Use `<button>`, as they are not styled correctly
+ * Change the default color of icons (only in exceptions)
+
+##### Developer examples
+
+###### Primary button
+
+Usage within HTML environment:
+
+```html
+<devtools-button
+ class="some-class"
+ .variant=${Buttons.Button.Variant.PRIMARY}
+ .title=${i18nString(UIStrings.someString)}
+ .jslogContext=${'some-context')
+ @click=${handleClick()}
+ )></devtools-button>
+```
+
+Usage within Typescript environment (mostly when working with legacy code):
+
+```ts
+ const button = new Buttons.Button.Button();
+ button.data = {
+ variant: Buttons.Button.Variant.PRIMARY,
+ title: i18nString(UIStrings.someString),
+ jslogContext: 'some-context',
+ };
+ button.classList.add(‘some-class’);
+ button.addEventListener(‘click’, () => handleClick());
+
+```
+
+#### Design guidelines
+
+##### Dos and Don'ts
+
+###### Primary Buttons
+
+
+
+###### Tonal buttons
+
+
+
+#### Outlined buttons
+
+
+
+#### Text buttons
+
+
+
+#### Icon buttons
+
+
+
+### Resources
+
+#### For developers
+
+##### Implementation
+
+ * [`devtools-button`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/components/buttons/Button.ts)
+
+#### For designers
+
+##### Figma
+
+ * [Buttons](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=481-2167&m=dev)
+ * [Icon
+ buttons](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=571-616&m=dev)
diff --git a/docs/styleguide/ux/images/button-confirmation-dialog.png b/docs/styleguide/ux/images/button-confirmation-dialog.png
new file mode 100644
index 0000000..af691f9
--- /dev/null
+++ b/docs/styleguide/ux/images/button-confirmation-dialog.png
Binary files differ
diff --git a/docs/styleguide/ux/images/button-icon-variations.png b/docs/styleguide/ux/images/button-icon-variations.png
new file mode 100644
index 0000000..1b9f0b7
--- /dev/null
+++ b/docs/styleguide/ux/images/button-icon-variations.png
Binary files differ
diff --git a/docs/styleguide/ux/images/button-multiple-primary.png b/docs/styleguide/ux/images/button-multiple-primary.png
new file mode 100644
index 0000000..db6656d
--- /dev/null
+++ b/docs/styleguide/ux/images/button-multiple-primary.png
Binary files differ
diff --git a/docs/styleguide/ux/images/button-required-action.png b/docs/styleguide/ux/images/button-required-action.png
new file mode 100644
index 0000000..c7b1e80
--- /dev/null
+++ b/docs/styleguide/ux/images/button-required-action.png
Binary files differ
diff --git a/docs/styleguide/ux/images/button-screenshot.png b/docs/styleguide/ux/images/button-screenshot.png
new file mode 100644
index 0000000..675846a
--- /dev/null
+++ b/docs/styleguide/ux/images/button-screenshot.png
Binary files differ
diff --git a/docs/styleguide/ux/images/button-text-variations.png b/docs/styleguide/ux/images/button-text-variations.png
new file mode 100644
index 0000000..93e1650
--- /dev/null
+++ b/docs/styleguide/ux/images/button-text-variations.png
Binary files differ
diff --git a/docs/styleguide/ux/images/icon-dodonts.png b/docs/styleguide/ux/images/icon-dodonts.png
new file mode 100644
index 0000000..ce7e5da
--- /dev/null
+++ b/docs/styleguide/ux/images/icon-dodonts.png
Binary files differ
diff --git a/docs/styleguide/ux/images/outlined-buttons.png b/docs/styleguide/ux/images/outlined-buttons.png
new file mode 100644
index 0000000..a8b9c74
--- /dev/null
+++ b/docs/styleguide/ux/images/outlined-buttons.png
Binary files differ
diff --git a/docs/styleguide/ux/images/outlined-dodonts.png b/docs/styleguide/ux/images/outlined-dodonts.png
new file mode 100644
index 0000000..a7ac394
--- /dev/null
+++ b/docs/styleguide/ux/images/outlined-dodonts.png
Binary files differ
diff --git a/docs/styleguide/ux/images/primary-buttons.png b/docs/styleguide/ux/images/primary-buttons.png
new file mode 100644
index 0000000..8121bef
--- /dev/null
+++ b/docs/styleguide/ux/images/primary-buttons.png
Binary files differ
diff --git a/docs/styleguide/ux/images/primary-dodonts.png b/docs/styleguide/ux/images/primary-dodonts.png
new file mode 100644
index 0000000..d60080c
--- /dev/null
+++ b/docs/styleguide/ux/images/primary-dodonts.png
Binary files differ
diff --git a/docs/styleguide/ux/images/text-buttons.png b/docs/styleguide/ux/images/text-buttons.png
new file mode 100644
index 0000000..d2e57d7
--- /dev/null
+++ b/docs/styleguide/ux/images/text-buttons.png
Binary files differ
diff --git a/docs/styleguide/ux/images/text-dodonts.png b/docs/styleguide/ux/images/text-dodonts.png
new file mode 100644
index 0000000..3b2bb81
--- /dev/null
+++ b/docs/styleguide/ux/images/text-dodonts.png
Binary files differ
diff --git a/docs/styleguide/ux/images/tonal-buttons.png b/docs/styleguide/ux/images/tonal-buttons.png
new file mode 100644
index 0000000..a8b9c74
--- /dev/null
+++ b/docs/styleguide/ux/images/tonal-buttons.png
Binary files differ
diff --git a/docs/styleguide/ux/images/tonal-dodonts.png b/docs/styleguide/ux/images/tonal-dodonts.png
new file mode 100644
index 0000000..a7ac394
--- /dev/null
+++ b/docs/styleguide/ux/images/tonal-dodonts.png
Binary files differ
diff --git a/docs/styleguide/ux/styleguide.md b/docs/styleguide/ux/styleguide.md
new file mode 100644
index 0000000..a01f94d
--- /dev/null
+++ b/docs/styleguide/ux/styleguide.md
@@ -0,0 +1,9 @@
+# How to style UI
+
+## Table of contents
+
+* [Styles](styles.md)
+* [Components](components.md)
+
+## Resources
+* [Chrome DevTools Design Kit, Figma](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit)
diff --git a/docs/styleguide/ux/styles.md b/docs/styleguide/ux/styles.md
new file mode 100644
index 0000000..3cc34f8
--- /dev/null
+++ b/docs/styleguide/ux/styles.md
@@ -0,0 +1,326 @@
+# Styles
+
+[TOC]
+
+## Colors
+
+We define three sets of color token types, **reference/palette tokens**,
+**system tokens**, and **application tokens**.
+
+[**Reference or palette
+tokens**](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/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://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/themeColors.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://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/applicationColorTokens.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://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/themeColors.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://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/tokens.css)
+ * [System color
+ tokens](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/themeColors.css)
+ * [Application color
+ tokens](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/applicationColorTokens.css)
+ * [Color definitions in the CDT
+ Figma](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/CDT-design-kit?node-id=337-5217&m=dev)
diff --git a/docs/styleguide/ux/styling.md b/docs/styleguide/ux/styling.md
deleted file mode 100644
index baac902..0000000
--- a/docs/styleguide/ux/styling.md
+++ /dev/null
@@ -1,58 +0,0 @@
-# How to style UI
-
-[TOC]
-
-## 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`
-
-States:
-
-- hovered: `--sys-color-state-hover-on-subtle`
-- selected: `--sys-color-tonal-container`
-- focus-visible: `--sys-color-state-focus-highlight`
-- text selection over focus: `--sys-color-state-focus-select`
-
-*** aside
-**NOTE:** For hover/focus colors for elements which background color is other than `--sys-color-cdt-base-container`
- or in case you need an opaque hover color use [state layer technique](https://carbon.googleplex.com/google-material-3/pages/interaction-states/state-layers).
- See [example CL](http://crrev.com/c/5003859)
-***
-
-## Text colors
-
-Text should generally use on-surface, on-container
-- regular (old text-primary): `--sys-color-on-surface`
-- fainter (old text-secondary): `--sys-color-on-surface-subtle`
-- disabled (old text-disabled): `--sys-color-text-disabled`
-
-For warnings, errors, text on selected/focused UI elements:
-- `--sys-color-on-surface-yellow`
-- `--sys-color-on-surface-error`
-- `--sys-color-on-tonal-container`
-
-## Syntax highlighting
-
-Syntax highlighting should use token-something colors defined [here](http://crsrc.org/c/third_party/devtools-frontend/src/front_end/ui/legacy/themeColors.css;l=355)
-
-## 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
-In case you need to add a new icon application color token, reference `--sys-color-something-bright`
-
-## Other elements
-
-In case you can’t reuse a component and need to add some new UI element, please follow the [spec](https://www.figma.com/file/5xWeeSmVQTd4yW3s6aFJ1f/CDDS-UX%2FEng-Spec-(NO-LONGER-UPDATED)?node-id=35%3A2599&mode=dev)
