Colors
Forced colors
The framework respects the system palette when forced colors (such as Windows High Contrast) are enabled. Shared styles keep keyboard focus, control boundaries, selected and disabled states, and monochrome icons visible when browser color adjustments remove shadows or replace backgrounds.
No additional class is needed. Custom components should use semantic HTML, visible focus indicators and borders or outlines for essential boundaries. Buttons use outlines to preserve their dimensions, with an outer outline for keyboard focus and a double outline for selected label buttons. Component-specific rendering may still need a targeted correction; test it with forced colors enabled.
The shared corrections take priority over ordinary application theme rules. Theme declarations using !important can still override them, depending on specificity and cascade order.
Windows High Contrast and contrast themes are covered by these rules. A separate prefers-contrast: more preference, such as increased contrast on macOS, does not necessarily enable forced colors. Supporting that preference requires stronger contrast within the application theme; the framework does not currently apply a separate theme for it.
Static color tokens
| white #fff | |||||
| grey-98 #f9fafb | |||||
| blue-95 #ebf8ff | turquoise-95 #e8fafa | yellow-95 #fffbea | grey-95 #f3f5f6 | red-95 #fbebed | green-95 #e6f2ed |
| blue-93 #e0f4ff | turquoise-93 #ddf8f7 | yellow-93 #fff9e0 | grey-93 #eff0f1 | red-93 #f9e0e4 | green-93 #d9ece5 |
| grey-90 #eaebed | |||||
| blue-85 #c0e8ff | turquoise-85 #b9f0ee | yellow-85 #fff3be | grey-85 #dbe0e4 | red-85 #f2c0c8 | green-85 #b0d8c8 |
| blue-68 #7cd0ff | turquoise-68 #6ee0db | yellow-68 #ffe479 | grey-68 #b8c1c7 | red-68 #e57c8c | green-68 #5cae8f |
| blue-50 #33b4ff | turquoise-50 #1ccfc9 | yellow-50 #ffd72e | grey-50 #96a1aa | red-50 #d6334c | green-50 #00804f |
| blue-45 #14a0f4 | turquoise-45 #19bab5 | yellow-45 #e6c229 | grey-45 #849099 | red-45 #c12e44 | green-45 #007347 |
| blue-40 #0e8fdc | turquoise-40 #16a6a1 | yellow-40 #ccac25 | grey-40 #717f88 | red-40 #ab293d | green-40 #00663f |
| blue-37 #0f88cc | turquoise-37 #159b97 | yellow-37 #bfa123 | grey-37 #677781 | red-37 #a12639 | green-37 #00603b |
| blue-30 #0c6ba5 | turquoise-30 #117c79 | yellow-30 #99811c | grey-30 #4f5d68 | red-30 #801f2e | green-30 #004d2f |
| blue-25 #0a5888 | grey-25 #45535f | ||||
| blue-23 #09517c | turquoise-23 #0d5d5a | yellow-23 #736115 | grey-23 #374652 | red-23 #601722 | green-23 #003a24 |
| grey-19 #34424e | |||||
| blue-17 #07405f | turquoise-17 #0a4846 | yellow-17 #594b10 | grey-17 #2b353e | red-17 #4b121b | green-17 #002d1c |
| blue-14 #08324a | turquoise-14 #083a39 | yellow-14 #483d0d | grey-14 #242c34 | red-14 #3d0f16 | green-14 #002517 |
| blue-10 #07212f | turquoise-10 #062928 | yellow-10 #332b09 | grey-10 #1a2027 | red-10 #2b0a0f | green-10 #001a10 |
| black #05090e |
Dynamic color variables
The values of these depend on the theme (dark or light). Each color has a corresponding foreground color (prefixed by --on-) to ensure good contrast.
Surface-related tokens are generated in perceptual color spaces, so changing --surface shifts the whole surface ladder with it. --surface-container gets its default tone from --surface, while the other --surface-container-* values are generated from --surface-container itself so a custom override of that anchor color also shifts the full ladder. --on-surface stays tied to --surface for base-surface contrast. --on-surface-variant is the lower-emphasis foreground role for the surface family, while --on-surface-container and --on-surface-container-variant are generated from the container anchor for components whose ordinary text color is container-specific. The two variant roles are softened from their corresponding foreground color toward --surface-container; --outline* follows the base surface foreground.
The primary, secondary, tertiary, negative, and positive container backgrounds are also generated from their base colors, using relative oklch(...) transforms to shift lightness and chroma while keeping the family hue. Overriding any of those semantic base colors therefore still shifts the corresponding *-container tone automatically, but with a result that stays closer to the original swatches than a plain white/black mix.
The table below shows the default light and dark rendered outputs.
| CSS variable name | Light mode value | Dark mode value |
|---|---|---|
| --on-primary --primary | #ebf8ff #09517c | #07212f #7cd0ff |
| --on-primary-container --primary-container | #09517c #daedfd | #e0f4ff #1c3f52 |
| --on-primary-bright-fixed --primary-bright-fixed | #05090e #33b4ff | #05090e #33b4ff |
| --on-secondary --secondary | #ffffff #117c79 | #05090e #6ee0db |
| --on-secondary-container --secondary-container | #0a4846 #baf2ee | #e8fafa #095c59 |
| --on-secondary-bright-fixed --secondary-bright-fixed | #05090e #1ccfc9 | #05090e #1ccfc9 |
| --on-tertiary --tertiary | #05090e #99811c | #332b09 #ffe479 |
| --on-tertiary-container --tertiary-container | #332b09 #fff2bd | #fffbea #5a4c12 |
| --on-tertiary-bright-fixed --tertiary-bright-fixed | #05090e #ffd72e | #05090e #ffd72e |
| --on-negative --negative | #fbebed #801f2e | #05090e #e57c8c |
| --on-negative-container --negative-container | #05090e #e57b82 | #fbebed #5e1627 |
| --on-negative-bright-fixed --negative-bright-fixed | #ffffff #d6334c | #ffffff #d6334c |
| --on-positive --positive | #e6f2ed #004d2f | #05090e #5cae8f |
| --on-positive-container --positive-container | #002d1c #c0e1cd | #e6f2ed #11382b |
| --on-positive-bright-fixed --positive-bright-fixed | #ffffff #00804f | #ffffff #00804f |
| --on-surface --on-surface-variant --surface | #262b30 #44494e #f3f5f6 | #fafbfb #ecedee #2b353e |
| --on-surface-container --on-surface-container-variant --surface-container | #2f3439 #4c5055 #f3f1f1 | #fafafb #ededed #273039 |
| --on-surface-container --surface-container-lowest | #2f3439 #fafcfd | #fafafb #2f3942 |
| --on-surface-container --surface-container-low | #2f3439 #f5f7f8 | #fafafb #2b363f |
| --on-surface-container --surface-container-high | #2f3439 #e8eaeb | #fafafb #222c35 |
| --on-surface-container --surface-container-highest | #2f3439 #dadcdd | #fafafb #18222a |
| --on-surface-dark-fixed --surface-dark-fixed | #f9fafb #1a2027 | #f9fafb #1a2027 |
| --on-surface-black-fixed --surface-black-fixed | #f9fafb #05090e | #f9fafb #05090e |
| --outline --outline-variant | #000000ad #00000057 | #000000ad #00000057 |
| --hover-shadow --focus-shadow --active-shadow |