mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-12 17:45:49 +08:00
Kateryna Prokopenko
e40cb532ee
Bug:1456677 Change-Id: I560e2891e91f43507c973a7cf6c695769c143419 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5002241 Reviewed-by: Peter Müller <petermueller@chromium.org> Commit-Queue: Kateryna Prokopenko <kprokopenko@chromium.org> Auto-Submit: Kateryna Prokopenko <kprokopenko@chromium.org> Reviewed-by: Benedikt Meurer <bmeurer@chromium.org>
2.3 KiB
2.3 KiB
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
- For hover/focus colors for elements which background color is other than
--sys-color-cdt-base-containeror in case you need an opaque hover color use state layer technique. See example CL