Material 3 for DevTools

Colors

Backgrounds

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 (see Troubleshooting > 1 for details)
• selected: --sys-color-tonal-container
• focus-visible: --sys-color-state-focus-highlight
• text selection over focus: --sys-color-state-focus-select

Text

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

Icons

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

Troubleshooting

1. 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. See example CL