@halogen-ui/tokens 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +102 -0
- package/README.md +43 -0
- package/dist/CONTRAST-REPORT.md +511 -0
- package/dist/figma.json +1932 -0
- package/dist/fonts/Geist-Variable.woff2 +0 -0
- package/dist/fonts/GeistMono-Variable.woff2 +0 -0
- package/dist/fonts/LICENSE-Geist-OFL-1.1.txt +92 -0
- package/dist/fonts.css +24 -0
- package/dist/halogen.tokens.json +2061 -0
- package/dist/theme.css +859 -0
- package/dist/token-review.html +902 -0
- package/dist/tokens.css +782 -0
- package/dist/tokens.d.ts +535 -0
- package/dist/tokens.js +532 -0
- package/dist/tokens.ts +540 -0
- package/dist/tw-classgroups.json +351 -0
- package/fonts/Geist-Variable.woff2 +0 -0
- package/fonts/GeistMono-Variable.woff2 +0 -0
- package/fonts/LICENSE-Geist-OFL-1.1.txt +92 -0
- package/package.json +66 -0
- package/src/color/oklch.ts +306 -0
- package/src/contrast-pairs.ts +473 -0
- package/src/namespaces.ts +59 -0
- package/src/primitives/color.ts +404 -0
- package/src/primitives/elevation.ts +38 -0
- package/src/primitives/motion.ts +129 -0
- package/src/primitives/scale.ts +163 -0
- package/src/primitives/typography.ts +184 -0
- package/src/semantic/index.ts +415 -0
|
@@ -0,0 +1,511 @@
|
|
|
1
|
+
# Halogen — Contrast Report
|
|
2
|
+
|
|
3
|
+
Generated by `pnpm --filter @halogen-ui/tokens build`. Do not edit.
|
|
4
|
+
|
|
5
|
+
Every figure below is measured on the **quantised 8-bit value that ships**, not
|
|
6
|
+
on a float in the solver. Ratios are WCAG 2.x.
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## Summary
|
|
11
|
+
|
|
12
|
+
| | |
|
|
13
|
+
| --- | --- |
|
|
14
|
+
| Pairings asserted | **276** (138 pairs × themes) |
|
|
15
|
+
| Failing | **0** |
|
|
16
|
+
| Text pairings meeting AA (4.5:1) | 136 / 136 |
|
|
17
|
+
| Text pairings also meeting AAA (7:1) | 77 / 136 (56.6%) |
|
|
18
|
+
| Tokens explicitly exempt | 23 |
|
|
19
|
+
| Pairings under a declared waiver | **21** |
|
|
20
|
+
| Themes | dark (default) + light, identical token surface |
|
|
21
|
+
|
|
22
|
+
**No pairing in either theme falls below its required ratio.**
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
## Knowingly below requirement — declared waivers
|
|
27
|
+
|
|
28
|
+
These pairings do not meet their success criterion. They are listed here, and
|
|
29
|
+
must be listed in any accessibility statement, because a design system that
|
|
30
|
+
quietly dropped an assertion is not the same thing as one that made a decision
|
|
31
|
+
and wrote it down.
|
|
32
|
+
|
|
33
|
+
**`line-control`** — dark, light themes
|
|
34
|
+
|
|
35
|
+
The control border is set to sit almost on the fill in both themes — neutral-800 on dark, neutral-100 (matching surface-subtle) on light — giving a near-borderless field. It reads about 1.29:1 on dark and 1.21:1 on light against the field, where WCAG 1.4.11 requires 3:1. Nothing else identifies the control: a filled input is only 1.28:1 (dark) / 1.12:1 (light) from the page. A field is therefore found by its label and placeholder rather than by its edge. This is the larger of the two waivers by a wide margin.
|
|
36
|
+
|
|
37
|
+
*Product owner, 2026-08-26 (dark) and 2026-08-27 (light), with the measured shortfall stated.*
|
|
38
|
+
|
|
39
|
+
**`line-focus`** — light theme
|
|
40
|
+
|
|
41
|
+
The focus ring uses the brand orange in both themes so the accent does not shift between them. On a white page that reads 2.96:1 where WCAG 1.4.11 requires 3:1 — a shortfall of roughly 1%, not the 60% of the border waiver, and visually indistinguishable from a compliant ring. Recorded separately so the two are never mistaken for equivalent risks. Restoring compliance costs only a slightly deeper orange (orange.mark-light, solved for exactly 3:1) if that trade is ever preferred.
|
|
42
|
+
|
|
43
|
+
*Product owner, 2026-08-27, with the measured shortfall stated.*
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
| Theme | Foreground | Background | Measured | Required | Shortfall |
|
|
47
|
+
| --- | --- | --- | ---: | ---: | ---: |
|
|
48
|
+
| dark | `line-control` | `surface-ground` | **1.65** | 3 | −1.35 |
|
|
49
|
+
| dark | `line-control` | `surface-raised` | **1.48** | 3 | −1.52 |
|
|
50
|
+
| dark | `line-control` | `surface-overlay` | **1.29** | 3 | −1.71 |
|
|
51
|
+
| dark | `line-control` | `surface-floating` | **1.29** | 3 | −1.71 |
|
|
52
|
+
| dark | `line-control` | `surface-modal` | **1.29** | 3 | −1.71 |
|
|
53
|
+
| dark | `line-control` | `surface-subtle` | **1.29** | 3 | −1.71 |
|
|
54
|
+
| dark | `line-control` | `surface-field` | **1.29** | 3 | −1.71 |
|
|
55
|
+
| light | `line-control` | `surface-ground` | **1.29** | 3 | −1.71 |
|
|
56
|
+
| light | `line-focus` | `surface-ground` | **2.96** | 3 | −0.04 |
|
|
57
|
+
| light | `line-control` | `surface-raised` | **1.21** | 3 | −1.79 |
|
|
58
|
+
| light | `line-focus` | `surface-raised` | **2.77** | 3 | −0.23 |
|
|
59
|
+
| light | `line-control` | `surface-overlay` | **1.29** | 3 | −1.71 |
|
|
60
|
+
| light | `line-focus` | `surface-overlay` | **2.96** | 3 | −0.04 |
|
|
61
|
+
| light | `line-control` | `surface-floating` | **1.29** | 3 | −1.71 |
|
|
62
|
+
| light | `line-focus` | `surface-floating` | **2.96** | 3 | −0.04 |
|
|
63
|
+
| light | `line-control` | `surface-modal` | **1.29** | 3 | −1.71 |
|
|
64
|
+
| light | `line-focus` | `surface-modal` | **2.96** | 3 | −0.04 |
|
|
65
|
+
| light | `line-control` | `surface-subtle` | **1.00** | 3 | −2.00 |
|
|
66
|
+
| light | `line-focus` | `surface-subtle` | **2.29** | 3 | −0.71 |
|
|
67
|
+
| light | `line-control` | `surface-field` | **1.21** | 3 | −1.79 |
|
|
68
|
+
| light | `line-focus` | `surface-field` | **2.77** | 3 | −0.23 |
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
72
|
+
## Closest to failing
|
|
73
|
+
|
|
74
|
+
The twelve tightest pairings in the system. These are where a careless change
|
|
75
|
+
becomes a violation, and where any future adjustment should be re-measured.
|
|
76
|
+
|
|
77
|
+
| Theme | Foreground | Background | Ratio | Required | Margin |
|
|
78
|
+
| --- | --- | --- | ---: | ---: | ---: |
|
|
79
|
+
| dark | `line-accent` <br>#a36047 | `surface-overlay` <br>#292725 | **3.06** | 3 | +0.06 |
|
|
80
|
+
| dark | `status-error-line` <br>#b05752 | `surface-overlay` <br>#292725 | **3.07** | 3 | +0.07 |
|
|
81
|
+
| dark | `status-warning-line` <br>#816f53 | `surface-overlay` <br>#292725 | **3.07** | 3 | +0.07 |
|
|
82
|
+
| light | `ink-on-accent-subtle` <br>#bc4100 | `surface-accent-subtle` <br>#f6eae6 | **4.58** | 4.5 | +0.08 |
|
|
83
|
+
| light | `ink-on-accent-subtle` <br>#bc4100 | `surface-accent-subtle` <br>#f6eae6 | **4.58** | 4.5 | +0.08 |
|
|
84
|
+
| dark | `status-info-line` <br>#4d7a73 | `surface-overlay` <br>#292725 | **3.08** | 3 | +0.08 |
|
|
85
|
+
| dark | `status-success-line` <br>#577b50 | `surface-overlay` <br>#292725 | **3.09** | 3 | +0.09 |
|
|
86
|
+
| light | `status-info-ink` <br>#13786e | `status-info-surface` <br>#d2f6ef | **4.61** | 4.5 | +0.11 |
|
|
87
|
+
| dark | `status-info-line` <br>#4d7a73 | `status-info-surface` <br>#1a2926 | **3.13** | 3 | +0.13 |
|
|
88
|
+
| dark | `status-success-line` <br>#577b50 | `status-success-surface` <br>#1d291b | **3.14** | 3 | +0.14 |
|
|
89
|
+
| dark | `status-warning-line` <br>#816f53 | `status-warning-surface` <br>#2a241b | **3.17** | 3 | +0.17 |
|
|
90
|
+
| dark | `line-accent` <br>#a36047 | `surface-accent-subtle` <br>#351f17 | **3.18** | 3 | +0.18 |
|
|
91
|
+
|
|
92
|
+
---
|
|
93
|
+
|
|
94
|
+
## Derived values, and what they were solved for
|
|
95
|
+
|
|
96
|
+
Values that are answers rather than choices. Each was solved against the
|
|
97
|
+
**worst surface it can legally appear on**, not a convenient one.
|
|
98
|
+
|
|
99
|
+
### Brand accents
|
|
100
|
+
|
|
101
|
+
| Accent | Brand anchor | On near-black | On white | Light-theme text step | Solved against |
|
|
102
|
+
| --- | --- | ---: | ---: | --- | --- |
|
|
103
|
+
| orange | `#FF641F` | 6.41:1 | 2.96:1 | `#BF4200` | neutral-50 @ 4.5:1 |
|
|
104
|
+
| coral | `#FF493F` | 5.67:1 | 3.35:1 | `#DA0010` | neutral-50 @ 4.5:1 |
|
|
105
|
+
| amber | `#FF9F00` | 9.23:1 | 2.06:1 | `#9B5E00` | neutral-50 @ 4.5:1 |
|
|
106
|
+
| yellow | `#FFD21A` | 13.10:1 | 1.45:1 | `#826900` | neutral-50 @ 4.5:1 |
|
|
107
|
+
| peach | `#FFB46B` | 10.84:1 | 1.75:1 | `#9F5C00` | neutral-50 @ 4.5:1 |
|
|
108
|
+
| pink | `#E8A6D8` | 9.83:1 | 1.93:1 | `#A54A94` | neutral-50 @ 4.5:1 |
|
|
109
|
+
| teal | `#22B8A8` | 7.67:1 | 2.47:1 | `#13796F` | neutral-50 @ 4.5:1 |
|
|
110
|
+
|
|
111
|
+
**Every brand accent fails as text on white.** That is the finding the light
|
|
112
|
+
theme is built around: at full saturation these are fill-only colors, and the
|
|
113
|
+
light theme uses solved darker steps for anything that carries text or a mark.
|
|
114
|
+
|
|
115
|
+
### Status
|
|
116
|
+
|
|
117
|
+
| Status | Solid | Label on solid | Contrast | Dark text | Light text |
|
|
118
|
+
| --- | --- | --- | ---: | --- | --- |
|
|
119
|
+
| success | `#62C84A` | `#12100E` | 8.93:1 | `#62C94A` | `#28591C` |
|
|
120
|
+
| warning | `#D6A453` | `#12100E` | 8.40:1 | `#DEAA56` | `#634A22` |
|
|
121
|
+
| error | `#CD1F2C` | `#FFFFFF` | 5.49:1 | `#FA9891` | `#9B151F` |
|
|
122
|
+
| info | `#22B8A8` | `#12100E` | 7.67:1 | `#22B8A8` | `#13786E` |
|
|
123
|
+
|
|
124
|
+
`status-error` is the only fill in Halogen that carries a **white** label.
|
|
125
|
+
Every warm brand fill carries near-black. That difference is a recognition
|
|
126
|
+
mechanism, not only a contrast one: a destructive action and an expressive coral
|
|
127
|
+
surface are structurally different objects, which is what hue separation alone
|
|
128
|
+
could not achieve — no red is both legible on near-black and perceptually
|
|
129
|
+
distant from brand coral.
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
133
|
+
## Ordered ramps
|
|
134
|
+
|
|
135
|
+
Sequential and diverging scales are held to step separation and monotonicity
|
|
136
|
+
rather than to 3:1 against the page, because a scale with no low end is not a
|
|
137
|
+
scale.
|
|
138
|
+
|
|
139
|
+
**sequential-heat · dark** — `#4d2f29` → `#7b513c` → `#aa7647` → `#d8a147` → `#fdd345`
|
|
140
|
+
|
|
141
|
+
ΔL between steps: 0.136 · 0.133 · 0.135 · 0.135 (minimum required 0.06) · monotonic
|
|
142
|
+
|
|
143
|
+
**sequential-heat · light** — `#eee1df` → `#e1b49f` → `#c98c55` → `#99712f` → `#6a560b`
|
|
144
|
+
|
|
145
|
+
ΔL between steps: 0.115 · 0.116 · 0.113 · 0.116 (minimum required 0.06) · monotonic
|
|
146
|
+
|
|
147
|
+
**diverging · dark** — `#00a99a` → `#3ecab9` → `#8c8a88` → `#ff875b` → `#ee5500`
|
|
148
|
+
|
|
149
|
+
ΔL between steps: 0.101 · 0.127 · 0.114 · 0.100 (minimum required 0.05) · diverging, monotonicity not required
|
|
150
|
+
|
|
151
|
+
**diverging · light** — `#13796f` → `#1a988b` → `#bbb9b6` → `#ef5500` → `#bf4200`
|
|
152
|
+
|
|
153
|
+
ΔL between steps: 0.093 · 0.173 · 0.136 · 0.101 (minimum required 0.05) · diverging, monotonicity not required
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
---
|
|
157
|
+
|
|
158
|
+
## Deltas from the brand brief's anchor hexes
|
|
159
|
+
|
|
160
|
+
The brief states its hexes are "aesthetic references, not final production
|
|
161
|
+
tokens". Three moved; each moved for a stated reason, and the rest are exact.
|
|
162
|
+
|
|
163
|
+
| Brief name | Brief hex | Token | Derived | ΔL | Why |
|
|
164
|
+
| --- | --- | --- | --- | ---: | --- |
|
|
165
|
+
| White | `#FFFFFF` | `neutral-0` | `#FFFFFF` | 0 | L preserved; warmed to the ramp hue. |
|
|
166
|
+
| Soft White | `#F3F3F1` | `neutral-50` | `#F0EFED` | -0.011 | Lightened→deepened by 0.012 L. At the brief value the light-mode page ground sat only 0.036 L from a white card — below the 0.04 surface-separation rule, so cards would go mushy on cheap panels. |
|
|
167
|
+
| Muted Gray | `#8A8A8A` | `neutral-500` | `#8C8A88` | +0.001 | L preserved exactly. |
|
|
168
|
+
| Surface Dark | `#252525` | `neutral-900` | `#292725` | +0.010 | Lifted 0.009 L. At the brief value it sat 0.038 L from Deep Charcoal — below the 0.04 surface-separation rule. |
|
|
169
|
+
| Deep Charcoal | `#1C1C1C` | `neutral-950` | `#1E1C1A` | +0.002 | L preserved exactly. |
|
|
170
|
+
| Near Black | `#101010` | `neutral-1000` | `#12100E` | +0.002 | L preserved exactly. |
|
|
171
|
+
|
|
172
|
+
The neutral ramp is warmed to hue 67° at
|
|
173
|
+
chroma 0.002–0.005 — imperceptible as color, perceptible as warmth. This is
|
|
174
|
+
what keeps a near-black UI from reading as blue-gray.
|
|
175
|
+
|
|
176
|
+
---
|
|
177
|
+
|
|
178
|
+
## Exemptions
|
|
179
|
+
|
|
180
|
+
Tokens deliberately not held to a contrast minimum. Listed so that "untested"
|
|
181
|
+
and "does not need testing" remain different states, and so each can be
|
|
182
|
+
challenged individually.
|
|
183
|
+
|
|
184
|
+
| Token | Reason |
|
|
185
|
+
| --- | --- |
|
|
186
|
+
| `line-divider` | Structural separation between regions of one surface — a footer bar, a toolbar edge. WCAG 1.4.11 covers boundaries required to identify a component; a rule between two parts of the same panel is not one. Sized to be clearly visible regardless. |
|
|
187
|
+
| `line-subtle` | Decorative dividers and card hairlines. WCAG 1.4.11 applies to boundaries required to identify a component; a divider is not one. Barred from interactive controls by lint. |
|
|
188
|
+
| `line-disabled` | Disabled controls are explicitly exempt from 1.4.3 and 1.4.11. |
|
|
189
|
+
| `ink-disabled` | Disabled text is explicitly exempt from 1.4.3. Still chosen to remain perceivable. |
|
|
190
|
+
| `line-edge-highlight` | Purely an elevation cue standing in for a shadow in dark mode. Carries no information; the surface change beneath it does. |
|
|
191
|
+
| `viz-grid` | Chart gridlines are decorative scaffolding; the axis labels carry the information. |
|
|
192
|
+
| `viz-sequential-0` | The low end of a sequential ramp is meant to sit near the surface — that is what makes a heatmap readable as a scale. Held instead to the even-spacing and monotonicity rules in RAMP_SEQUENCES. |
|
|
193
|
+
| `viz-sequential-1` | Second step of the sequential ramp, same reasoning as step 0. Held to adjacent-step separation. |
|
|
194
|
+
| `viz-sequential-2` | The midpoint of the scale. In the light theme a mid-tone cannot clear 3:1 against a white page however it is chosen — it sits halfway between page and ink by construction. Held to even spacing and monotonicity instead. |
|
|
195
|
+
| `viz-diverging-0` | The neutral midpoint of a diverging scale represents "no deviation" and is meant to recede. Held to adjacent-step separation. |
|
|
196
|
+
| `ink-on-scrim-secondary` | Text over a flat scrim. Same reasoning as ink-on-scrim: the background is a blend, not a token, and the scrim opacity is chosen so this step clears AA over the worst of them. |
|
|
197
|
+
| `ink-on-scrim` | Text over a flat scrim. The scrim is translucent and sits over an arbitrary gradient, so there is no single background to assert against — the scrimmed result is what matters, and the scrim opacity is chosen so this token clears AA over every blend. |
|
|
198
|
+
| `surface-selection` | A translucent selection wash. The selected text keeps its own color, which is asserted against the surface beneath; the wash only tints what is behind it. |
|
|
199
|
+
| `surface-knob` | The switch thumb. Its job is positional, not informational — the state it conveys is where it sits, and it carries a shadow so its edge reads on any track. |
|
|
200
|
+
| `surface-state-hover` | A translucent interaction wash. It carries no information of its own — it lightens or darkens whatever surface is beneath it, and the content on top is asserted against that surface. |
|
|
201
|
+
| `surface-state-active` | A translucent interaction wash, as above. Pressed rather than hovered. |
|
|
202
|
+
| `line-focus-glow` | A soft halo behind the focus ring, at low alpha. The ring itself is the indicator and is contrast-asserted; the glow only emphasizes it. |
|
|
203
|
+
| `surface-subtle-hover` | A hover fill carries no information of its own; the label on it is text-primary, which IS asserted against it. |
|
|
204
|
+
| `surface-subtle-active` | A pressed fill carries no information of its own; the label on it is text-primary, which IS asserted against it. |
|
|
205
|
+
| `surface-scrim` | A scrim has no foreground of its own; contrast is asserted on what sits above it. |
|
|
206
|
+
| `surface-disabled` | Disabled surfaces are exempt; their text is text-disabled, also exempt. |
|
|
207
|
+
| `gradient-glow` | A background atmosphere field with no text directly on it. |
|
|
208
|
+
| `gradient-ground` | A near-invisible page-ground gradient between two adjacent neutral steps. |
|
|
209
|
+
|
|
210
|
+
---
|
|
211
|
+
|
|
212
|
+
## Full results
|
|
213
|
+
|
|
214
|
+
<details>
|
|
215
|
+
<summary>All 276 asserted pairings</summary>
|
|
216
|
+
|
|
217
|
+
| Theme | Foreground | Background | Ratio | Req. | SC | Context |
|
|
218
|
+
| --- | --- | --- | ---: | ---: | --- | --- |
|
|
219
|
+
| dark | `ink-primary` | `surface-ground` | 16.52 | 4.5 | 1.4.3 | ink-primary on surface-ground |
|
|
220
|
+
| dark | `ink-secondary` | `surface-ground` | 9.70 | 4.5 | 1.4.3 | ink-secondary on surface-ground |
|
|
221
|
+
| dark | `ink-tertiary` | `surface-ground` | 6.28 | 4.5 | 1.4.3 | ink-tertiary on surface-ground |
|
|
222
|
+
| dark | `ink-primary` | `surface-raised` | 14.78 | 4.5 | 1.4.3 | ink-primary on surface-raised |
|
|
223
|
+
| dark | `ink-secondary` | `surface-raised` | 8.68 | 4.5 | 1.4.3 | ink-secondary on surface-raised |
|
|
224
|
+
| dark | `ink-tertiary` | `surface-raised` | 5.62 | 4.5 | 1.4.3 | ink-tertiary on surface-raised |
|
|
225
|
+
| dark | `ink-primary` | `surface-overlay` | 12.95 | 4.5 | 1.4.3 | ink-primary on surface-overlay |
|
|
226
|
+
| dark | `ink-secondary` | `surface-overlay` | 7.60 | 4.5 | 1.4.3 | ink-secondary on surface-overlay |
|
|
227
|
+
| dark | `ink-tertiary` | `surface-overlay` | 4.92 | 4.5 | 1.4.3 | ink-tertiary on surface-overlay |
|
|
228
|
+
| dark | `ink-primary` | `surface-floating` | 12.95 | 4.5 | 1.4.3 | ink-primary on surface-floating |
|
|
229
|
+
| dark | `ink-secondary` | `surface-floating` | 7.60 | 4.5 | 1.4.3 | ink-secondary on surface-floating |
|
|
230
|
+
| dark | `ink-tertiary` | `surface-floating` | 4.92 | 4.5 | 1.4.3 | ink-tertiary on surface-floating |
|
|
231
|
+
| dark | `ink-primary` | `surface-modal` | 12.95 | 4.5 | 1.4.3 | ink-primary on surface-modal |
|
|
232
|
+
| dark | `ink-secondary` | `surface-modal` | 7.60 | 4.5 | 1.4.3 | ink-secondary on surface-modal |
|
|
233
|
+
| dark | `ink-tertiary` | `surface-modal` | 4.92 | 4.5 | 1.4.3 | ink-tertiary on surface-modal |
|
|
234
|
+
| dark | `ink-primary` | `surface-ground` | 16.52 | 7 | 1.4.6 | primary body text on surface-ground |
|
|
235
|
+
| dark | `ink-primary` | `surface-raised` | 14.78 | 7 | 1.4.6 | primary body text on surface-raised |
|
|
236
|
+
| dark | `ink-primary` | `surface-subtle` | 12.95 | 4.5 | 1.4.3 | control label on surface-subtle |
|
|
237
|
+
| dark | `ink-primary` | `surface-subtle-hover` | 11.94 | 4.5 | 1.4.3 | control label on surface-subtle-hover |
|
|
238
|
+
| dark | `ink-primary` | `surface-subtle-active` | 10.02 | 4.5 | 1.4.3 | control label on surface-subtle-active |
|
|
239
|
+
| dark | `ink-primary` | `surface-field` | 12.95 | 4.5 | 1.4.3 | control label on surface-field |
|
|
240
|
+
| dark | `ink-placeholder` | `surface-field` | 4.92 | 4.5 | 1.4.3 | placeholder in an input on surface-field |
|
|
241
|
+
| dark | `ink-placeholder` | `surface-raised` | 5.62 | 4.5 | 1.4.3 | placeholder in an input on surface-raised |
|
|
242
|
+
| dark | `ink-accent` | `surface-ground` | 6.41 | 4.5 | 1.4.3 | ink-accent on surface-ground |
|
|
243
|
+
| dark | `ink-link` | `surface-ground` | 6.41 | 4.5 | 1.4.3 | ink-link on surface-ground |
|
|
244
|
+
| dark | `ink-link-hover` | `surface-ground` | 8.02 | 4.5 | 1.4.3 | ink-link-hover on surface-ground |
|
|
245
|
+
| dark | `ink-accent` | `surface-raised` | 5.74 | 4.5 | 1.4.3 | ink-accent on surface-raised |
|
|
246
|
+
| dark | `ink-link` | `surface-raised` | 5.74 | 4.5 | 1.4.3 | ink-link on surface-raised |
|
|
247
|
+
| dark | `ink-link-hover` | `surface-raised` | 7.17 | 4.5 | 1.4.3 | ink-link-hover on surface-raised |
|
|
248
|
+
| dark | `ink-accent` | `surface-overlay` | 5.03 | 4.5 | 1.4.3 | ink-accent on surface-overlay |
|
|
249
|
+
| dark | `ink-link` | `surface-overlay` | 5.03 | 4.5 | 1.4.3 | ink-link on surface-overlay |
|
|
250
|
+
| dark | `ink-link-hover` | `surface-overlay` | 6.28 | 4.5 | 1.4.3 | ink-link-hover on surface-overlay |
|
|
251
|
+
| dark | `ink-accent` | `surface-floating` | 5.03 | 4.5 | 1.4.3 | ink-accent on surface-floating |
|
|
252
|
+
| dark | `ink-link` | `surface-floating` | 5.03 | 4.5 | 1.4.3 | ink-link on surface-floating |
|
|
253
|
+
| dark | `ink-link-hover` | `surface-floating` | 6.28 | 4.5 | 1.4.3 | ink-link-hover on surface-floating |
|
|
254
|
+
| dark | `ink-accent` | `surface-modal` | 5.03 | 4.5 | 1.4.3 | ink-accent on surface-modal |
|
|
255
|
+
| dark | `ink-link` | `surface-modal` | 5.03 | 4.5 | 1.4.3 | ink-link on surface-modal |
|
|
256
|
+
| dark | `ink-link-hover` | `surface-modal` | 6.28 | 4.5 | 1.4.3 | ink-link-hover on surface-modal |
|
|
257
|
+
| dark | `ink-on-accent` | `surface-accent` | 6.41 | 4.5 | 1.4.3 | button label on surface-accent |
|
|
258
|
+
| dark | `ink-on-accent` | `surface-accent-hover` | 8.02 | 4.5 | 1.4.3 | button label on surface-accent-hover |
|
|
259
|
+
| dark | `ink-on-accent` | `surface-accent-active` | 5.37 | 4.5 | 1.4.3 | button label on surface-accent-active |
|
|
260
|
+
| dark | `ink-primary` | `surface-accent-subtle` | 13.44 | 4.5 | 1.4.3 | ink-primary on surface-accent-subtle |
|
|
261
|
+
| dark | `ink-secondary` | `surface-accent-subtle` | 7.89 | 4.5 | 1.4.3 | ink-secondary on surface-accent-subtle |
|
|
262
|
+
| dark | `ink-primary` | `surface-accent-subtle-hover` | 11.02 | 4.5 | 1.4.3 | ink-primary on surface-accent-subtle-hover |
|
|
263
|
+
| dark | `ink-secondary` | `surface-accent-subtle-hover` | 6.47 | 4.5 | 1.4.3 | ink-secondary on surface-accent-subtle-hover |
|
|
264
|
+
| dark | `ink-on-accent-subtle` | `surface-accent-subtle` | 5.22 | 4.5 | 1.4.3 | accent text on the quiet accent surface |
|
|
265
|
+
| dark | `ink-on-accent-subtle` | `surface-accent-subtle` | 5.22 | 4.5 | 1.4.3 | accent badge label on its own chip |
|
|
266
|
+
| dark | `line-accent` | `surface-accent-subtle` | 3.18 | 3 | 1.4.11 | accent badge boundary on its own chip |
|
|
267
|
+
| dark | `ink-inverse` | `surface-inverse` | 16.52 | 4.5 | 1.4.3 | text on an intentionally inverted card |
|
|
268
|
+
| dark | `status-success-ink` | `status-success-surface` | 7.20 | 4.5 | 1.4.3 | success text on its own chip |
|
|
269
|
+
| dark | `status-success-ink` | `surface-ground` | 9.02 | 4.5 | 1.4.3 | inline success message on surface-ground |
|
|
270
|
+
| dark | `status-success-ink` | `surface-raised` | 8.07 | 4.5 | 1.4.3 | inline success message on surface-raised |
|
|
271
|
+
| dark | `status-success-ink` | `surface-overlay` | 7.07 | 4.5 | 1.4.3 | inline success message on surface-overlay |
|
|
272
|
+
| dark | `status-success-on-solid` | `status-success-solid` | 8.93 | 4.5 | 1.4.3 | label on the success solid fill |
|
|
273
|
+
| dark | `status-success-line` | `status-success-surface` | 3.14 | 3 | 1.4.11 | success chip boundary |
|
|
274
|
+
| dark | `status-success-line` | `surface-ground` | 3.94 | 3 | 1.4.11 | success boundary on surface-ground |
|
|
275
|
+
| dark | `status-success-line` | `surface-raised` | 3.52 | 3 | 1.4.11 | success boundary on surface-raised |
|
|
276
|
+
| dark | `status-success-line` | `surface-overlay` | 3.09 | 3 | 1.4.11 | success boundary on surface-overlay |
|
|
277
|
+
| dark | `status-warning-ink` | `status-warning-surface` | 7.31 | 4.5 | 1.4.3 | warning text on its own chip |
|
|
278
|
+
| dark | `status-warning-ink` | `surface-ground` | 9.03 | 4.5 | 1.4.3 | inline warning message on surface-ground |
|
|
279
|
+
| dark | `status-warning-ink` | `surface-raised` | 8.08 | 4.5 | 1.4.3 | inline warning message on surface-raised |
|
|
280
|
+
| dark | `status-warning-ink` | `surface-overlay` | 7.08 | 4.5 | 1.4.3 | inline warning message on surface-overlay |
|
|
281
|
+
| dark | `status-warning-on-solid` | `status-warning-solid` | 8.40 | 4.5 | 1.4.3 | label on the warning solid fill |
|
|
282
|
+
| dark | `status-warning-line` | `status-warning-surface` | 3.17 | 3 | 1.4.11 | warning chip boundary |
|
|
283
|
+
| dark | `status-warning-line` | `surface-ground` | 3.92 | 3 | 1.4.11 | warning boundary on surface-ground |
|
|
284
|
+
| dark | `status-warning-line` | `surface-raised` | 3.50 | 3 | 1.4.11 | warning boundary on surface-raised |
|
|
285
|
+
| dark | `status-warning-line` | `surface-overlay` | 3.07 | 3 | 1.4.11 | warning boundary on surface-overlay |
|
|
286
|
+
| dark | `status-error-ink` | `status-error-surface` | 7.39 | 4.5 | 1.4.3 | error text on its own chip |
|
|
287
|
+
| dark | `status-error-ink` | `surface-ground` | 9.01 | 4.5 | 1.4.3 | inline error message on surface-ground |
|
|
288
|
+
| dark | `status-error-ink` | `surface-raised` | 8.06 | 4.5 | 1.4.3 | inline error message on surface-raised |
|
|
289
|
+
| dark | `status-error-ink` | `surface-overlay` | 7.06 | 4.5 | 1.4.3 | inline error message on surface-overlay |
|
|
290
|
+
| dark | `status-error-on-solid` | `status-error-solid` | 5.49 | 4.5 | 1.4.3 | label on the error solid fill |
|
|
291
|
+
| dark | `status-error-line` | `status-error-surface` | 3.21 | 3 | 1.4.11 | error chip boundary |
|
|
292
|
+
| dark | `status-error-line` | `surface-ground` | 3.92 | 3 | 1.4.11 | error boundary on surface-ground |
|
|
293
|
+
| dark | `status-error-line` | `surface-raised` | 3.50 | 3 | 1.4.11 | error boundary on surface-raised |
|
|
294
|
+
| dark | `status-error-line` | `surface-overlay` | 3.07 | 3 | 1.4.11 | error boundary on surface-overlay |
|
|
295
|
+
| dark | `status-info-ink` | `status-info-surface` | 6.11 | 4.5 | 1.4.3 | info text on its own chip |
|
|
296
|
+
| dark | `status-info-ink` | `surface-ground` | 7.67 | 4.5 | 1.4.3 | inline info message on surface-ground |
|
|
297
|
+
| dark | `status-info-ink` | `surface-raised` | 6.87 | 4.5 | 1.4.3 | inline info message on surface-raised |
|
|
298
|
+
| dark | `status-info-ink` | `surface-overlay` | 6.02 | 4.5 | 1.4.3 | inline info message on surface-overlay |
|
|
299
|
+
| dark | `status-info-on-solid` | `status-info-solid` | 7.67 | 4.5 | 1.4.3 | label on the info solid fill |
|
|
300
|
+
| dark | `status-info-line` | `status-info-surface` | 3.13 | 3 | 1.4.11 | info chip boundary |
|
|
301
|
+
| dark | `status-info-line` | `surface-ground` | 3.93 | 3 | 1.4.11 | info boundary on surface-ground |
|
|
302
|
+
| dark | `status-info-line` | `surface-raised` | 3.52 | 3 | 1.4.11 | info boundary on surface-raised |
|
|
303
|
+
| dark | `status-info-line` | `surface-overlay` | 3.08 | 3 | 1.4.11 | info boundary on surface-overlay |
|
|
304
|
+
| dark | `line-control` | `surface-ground` | 1.65 | 3 | 1.4.11 | line-control on surface-ground |
|
|
305
|
+
| dark | `line-strong` | `surface-ground` | 6.28 | 3 | 1.4.11 | line-strong on surface-ground |
|
|
306
|
+
| dark | `line-focus` | `surface-ground` | 6.41 | 3 | 1.4.11 | line-focus on surface-ground |
|
|
307
|
+
| dark | `line-control` | `surface-raised` | 1.48 | 3 | 1.4.11 | line-control on surface-raised |
|
|
308
|
+
| dark | `line-strong` | `surface-raised` | 5.62 | 3 | 1.4.11 | line-strong on surface-raised |
|
|
309
|
+
| dark | `line-focus` | `surface-raised` | 5.74 | 3 | 1.4.11 | line-focus on surface-raised |
|
|
310
|
+
| dark | `line-control` | `surface-overlay` | 1.29 | 3 | 1.4.11 | line-control on surface-overlay |
|
|
311
|
+
| dark | `line-strong` | `surface-overlay` | 4.92 | 3 | 1.4.11 | line-strong on surface-overlay |
|
|
312
|
+
| dark | `line-focus` | `surface-overlay` | 5.03 | 3 | 1.4.11 | line-focus on surface-overlay |
|
|
313
|
+
| dark | `line-control` | `surface-floating` | 1.29 | 3 | 1.4.11 | line-control on surface-floating |
|
|
314
|
+
| dark | `line-strong` | `surface-floating` | 4.92 | 3 | 1.4.11 | line-strong on surface-floating |
|
|
315
|
+
| dark | `line-focus` | `surface-floating` | 5.03 | 3 | 1.4.11 | line-focus on surface-floating |
|
|
316
|
+
| dark | `line-control` | `surface-modal` | 1.29 | 3 | 1.4.11 | line-control on surface-modal |
|
|
317
|
+
| dark | `line-strong` | `surface-modal` | 4.92 | 3 | 1.4.11 | line-strong on surface-modal |
|
|
318
|
+
| dark | `line-focus` | `surface-modal` | 5.03 | 3 | 1.4.11 | line-focus on surface-modal |
|
|
319
|
+
| dark | `line-control` | `surface-subtle` | 1.29 | 3 | 1.4.11 | line-control on surface-subtle |
|
|
320
|
+
| dark | `line-strong` | `surface-subtle` | 4.92 | 3 | 1.4.11 | line-strong on surface-subtle |
|
|
321
|
+
| dark | `line-focus` | `surface-subtle` | 5.03 | 3 | 1.4.11 | line-focus on surface-subtle |
|
|
322
|
+
| dark | `line-control` | `surface-field` | 1.29 | 3 | 1.4.11 | line-control on surface-field |
|
|
323
|
+
| dark | `line-strong` | `surface-field` | 4.92 | 3 | 1.4.11 | line-strong on surface-field |
|
|
324
|
+
| dark | `line-focus` | `surface-field` | 5.03 | 3 | 1.4.11 | line-focus on surface-field |
|
|
325
|
+
| dark | `line-accent` | `surface-ground` | 3.91 | 3 | 1.4.11 | accent boundary on surface-ground |
|
|
326
|
+
| dark | `line-accent` | `surface-raised` | 3.50 | 3 | 1.4.11 | accent boundary on surface-raised |
|
|
327
|
+
| dark | `line-accent` | `surface-overlay` | 3.06 | 3 | 1.4.11 | accent boundary on surface-overlay |
|
|
328
|
+
| dark | `ink-on-accent` | `surface-accent` | 6.41 | 3 | 2.4.11 | focus ring on a primary button flips to near-black |
|
|
329
|
+
| dark | `viz-1` | `surface-ground` | 6.41 | 3 | 1.4.11 | chart series 1 on surface-ground |
|
|
330
|
+
| dark | `viz-2` | `surface-ground` | 7.67 | 3 | 1.4.11 | chart series 2 on surface-ground |
|
|
331
|
+
| dark | `viz-3` | `surface-ground` | 13.10 | 3 | 1.4.11 | chart series 3 on surface-ground |
|
|
332
|
+
| dark | `viz-4` | `surface-ground` | 9.83 | 3 | 1.4.11 | chart series 4 on surface-ground |
|
|
333
|
+
| dark | `viz-5` | `surface-ground` | 5.67 | 3 | 1.4.11 | chart series 5 on surface-ground |
|
|
334
|
+
| dark | `viz-6` | `surface-ground` | 10.84 | 3 | 1.4.11 | chart series 6 on surface-ground |
|
|
335
|
+
| dark | `viz-7` | `surface-ground` | 9.70 | 3 | 1.4.11 | chart series 7 on surface-ground |
|
|
336
|
+
| dark | `viz-axis` | `surface-ground` | 6.28 | 4.5 | 1.4.3 | axis label on surface-ground |
|
|
337
|
+
| dark | `viz-sequential-3` | `surface-ground` | 8.23 | 3 | 1.4.11 | sequential step 3 on surface-ground |
|
|
338
|
+
| dark | `viz-sequential-4` | `surface-ground` | 13.18 | 3 | 1.4.11 | sequential step 4 on surface-ground |
|
|
339
|
+
| dark | `viz-diverging-neg-2` | `surface-ground` | 6.46 | 3 | 1.4.11 | diverging neg-2 on surface-ground |
|
|
340
|
+
| dark | `viz-diverging-neg-1` | `surface-ground` | 9.36 | 3 | 1.4.11 | diverging neg-1 on surface-ground |
|
|
341
|
+
| dark | `viz-diverging-pos-1` | `surface-ground` | 8.02 | 3 | 1.4.11 | diverging pos-1 on surface-ground |
|
|
342
|
+
| dark | `viz-diverging-pos-2` | `surface-ground` | 5.37 | 3 | 1.4.11 | diverging pos-2 on surface-ground |
|
|
343
|
+
| dark | `viz-1` | `surface-raised` | 5.74 | 3 | 1.4.11 | chart series 1 on surface-raised |
|
|
344
|
+
| dark | `viz-2` | `surface-raised` | 6.87 | 3 | 1.4.11 | chart series 2 on surface-raised |
|
|
345
|
+
| dark | `viz-3` | `surface-raised` | 11.72 | 3 | 1.4.11 | chart series 3 on surface-raised |
|
|
346
|
+
| dark | `viz-4` | `surface-raised` | 8.80 | 3 | 1.4.11 | chart series 4 on surface-raised |
|
|
347
|
+
| dark | `viz-5` | `surface-raised` | 5.08 | 3 | 1.4.11 | chart series 5 on surface-raised |
|
|
348
|
+
| dark | `viz-6` | `surface-raised` | 9.70 | 3 | 1.4.11 | chart series 6 on surface-raised |
|
|
349
|
+
| dark | `viz-7` | `surface-raised` | 8.68 | 3 | 1.4.11 | chart series 7 on surface-raised |
|
|
350
|
+
| dark | `viz-axis` | `surface-raised` | 5.62 | 4.5 | 1.4.3 | axis label on surface-raised |
|
|
351
|
+
| dark | `viz-sequential-3` | `surface-raised` | 7.37 | 3 | 1.4.11 | sequential step 3 on surface-raised |
|
|
352
|
+
| dark | `viz-sequential-4` | `surface-raised` | 11.79 | 3 | 1.4.11 | sequential step 4 on surface-raised |
|
|
353
|
+
| dark | `viz-diverging-neg-2` | `surface-raised` | 5.78 | 3 | 1.4.11 | diverging neg-2 on surface-raised |
|
|
354
|
+
| dark | `viz-diverging-neg-1` | `surface-raised` | 8.38 | 3 | 1.4.11 | diverging neg-1 on surface-raised |
|
|
355
|
+
| dark | `viz-diverging-pos-1` | `surface-raised` | 7.17 | 3 | 1.4.11 | diverging pos-1 on surface-raised |
|
|
356
|
+
| dark | `viz-diverging-pos-2` | `surface-raised` | 4.80 | 3 | 1.4.11 | diverging pos-2 on surface-raised |
|
|
357
|
+
| light | `ink-primary` | `surface-ground` | 18.98 | 4.5 | 1.4.3 | ink-primary on surface-ground |
|
|
358
|
+
| light | `ink-secondary` | `surface-ground` | 7.79 | 4.5 | 1.4.3 | ink-secondary on surface-ground |
|
|
359
|
+
| light | `ink-tertiary` | `surface-ground` | 5.23 | 4.5 | 1.4.3 | ink-tertiary on surface-ground |
|
|
360
|
+
| light | `ink-primary` | `surface-raised` | 17.74 | 4.5 | 1.4.3 | ink-primary on surface-raised |
|
|
361
|
+
| light | `ink-secondary` | `surface-raised` | 7.28 | 4.5 | 1.4.3 | ink-secondary on surface-raised |
|
|
362
|
+
| light | `ink-tertiary` | `surface-raised` | 4.89 | 4.5 | 1.4.3 | ink-tertiary on surface-raised |
|
|
363
|
+
| light | `ink-primary` | `surface-overlay` | 18.98 | 4.5 | 1.4.3 | ink-primary on surface-overlay |
|
|
364
|
+
| light | `ink-secondary` | `surface-overlay` | 7.79 | 4.5 | 1.4.3 | ink-secondary on surface-overlay |
|
|
365
|
+
| light | `ink-tertiary` | `surface-overlay` | 5.23 | 4.5 | 1.4.3 | ink-tertiary on surface-overlay |
|
|
366
|
+
| light | `ink-primary` | `surface-floating` | 18.98 | 4.5 | 1.4.3 | ink-primary on surface-floating |
|
|
367
|
+
| light | `ink-secondary` | `surface-floating` | 7.79 | 4.5 | 1.4.3 | ink-secondary on surface-floating |
|
|
368
|
+
| light | `ink-tertiary` | `surface-floating` | 5.23 | 4.5 | 1.4.3 | ink-tertiary on surface-floating |
|
|
369
|
+
| light | `ink-primary` | `surface-modal` | 18.98 | 4.5 | 1.4.3 | ink-primary on surface-modal |
|
|
370
|
+
| light | `ink-secondary` | `surface-modal` | 7.79 | 4.5 | 1.4.3 | ink-secondary on surface-modal |
|
|
371
|
+
| light | `ink-tertiary` | `surface-modal` | 5.23 | 4.5 | 1.4.3 | ink-tertiary on surface-modal |
|
|
372
|
+
| light | `ink-primary` | `surface-ground` | 18.98 | 7 | 1.4.6 | primary body text on surface-ground |
|
|
373
|
+
| light | `ink-primary` | `surface-raised` | 17.74 | 7 | 1.4.6 | primary body text on surface-raised |
|
|
374
|
+
| light | `ink-primary` | `surface-subtle` | 14.69 | 4.5 | 1.4.3 | control label on surface-subtle |
|
|
375
|
+
| light | `ink-primary` | `surface-subtle-hover` | 12.47 | 4.5 | 1.4.3 | control label on surface-subtle-hover |
|
|
376
|
+
| light | `ink-primary` | `surface-subtle-active` | 9.70 | 4.5 | 1.4.3 | control label on surface-subtle-active |
|
|
377
|
+
| light | `ink-primary` | `surface-field` | 17.74 | 4.5 | 1.4.3 | control label on surface-field |
|
|
378
|
+
| light | `ink-placeholder` | `surface-field` | 7.28 | 4.5 | 1.4.3 | placeholder in an input on surface-field |
|
|
379
|
+
| light | `ink-placeholder` | `surface-raised` | 7.28 | 4.5 | 1.4.3 | placeholder in an input on surface-raised |
|
|
380
|
+
| light | `ink-accent` | `surface-ground` | 5.26 | 4.5 | 1.4.3 | ink-accent on surface-ground |
|
|
381
|
+
| light | `ink-link` | `surface-ground` | 5.26 | 4.5 | 1.4.3 | ink-link on surface-ground |
|
|
382
|
+
| light | `ink-link-hover` | `surface-ground` | 8.16 | 4.5 | 1.4.3 | ink-link-hover on surface-ground |
|
|
383
|
+
| light | `ink-accent` | `surface-raised` | 4.91 | 4.5 | 1.4.3 | ink-accent on surface-raised |
|
|
384
|
+
| light | `ink-link` | `surface-raised` | 4.91 | 4.5 | 1.4.3 | ink-link on surface-raised |
|
|
385
|
+
| light | `ink-link-hover` | `surface-raised` | 7.63 | 4.5 | 1.4.3 | ink-link-hover on surface-raised |
|
|
386
|
+
| light | `ink-accent` | `surface-overlay` | 5.26 | 4.5 | 1.4.3 | ink-accent on surface-overlay |
|
|
387
|
+
| light | `ink-link` | `surface-overlay` | 5.26 | 4.5 | 1.4.3 | ink-link on surface-overlay |
|
|
388
|
+
| light | `ink-link-hover` | `surface-overlay` | 8.16 | 4.5 | 1.4.3 | ink-link-hover on surface-overlay |
|
|
389
|
+
| light | `ink-accent` | `surface-floating` | 5.26 | 4.5 | 1.4.3 | ink-accent on surface-floating |
|
|
390
|
+
| light | `ink-link` | `surface-floating` | 5.26 | 4.5 | 1.4.3 | ink-link on surface-floating |
|
|
391
|
+
| light | `ink-link-hover` | `surface-floating` | 8.16 | 4.5 | 1.4.3 | ink-link-hover on surface-floating |
|
|
392
|
+
| light | `ink-accent` | `surface-modal` | 5.26 | 4.5 | 1.4.3 | ink-accent on surface-modal |
|
|
393
|
+
| light | `ink-link` | `surface-modal` | 5.26 | 4.5 | 1.4.3 | ink-link on surface-modal |
|
|
394
|
+
| light | `ink-link-hover` | `surface-modal` | 8.16 | 4.5 | 1.4.3 | ink-link-hover on surface-modal |
|
|
395
|
+
| light | `ink-on-accent` | `surface-accent` | 6.41 | 4.5 | 1.4.3 | button label on surface-accent |
|
|
396
|
+
| light | `ink-on-accent` | `surface-accent-hover` | 8.02 | 4.5 | 1.4.3 | button label on surface-accent-hover |
|
|
397
|
+
| light | `ink-on-accent` | `surface-accent-active` | 5.37 | 4.5 | 1.4.3 | button label on surface-accent-active |
|
|
398
|
+
| light | `ink-primary` | `surface-accent-subtle` | 16.12 | 4.5 | 1.4.3 | ink-primary on surface-accent-subtle |
|
|
399
|
+
| light | `ink-secondary` | `surface-accent-subtle` | 6.61 | 4.5 | 1.4.3 | ink-secondary on surface-accent-subtle |
|
|
400
|
+
| light | `ink-primary` | `surface-accent-subtle-hover` | 14.17 | 4.5 | 1.4.3 | ink-primary on surface-accent-subtle-hover |
|
|
401
|
+
| light | `ink-secondary` | `surface-accent-subtle-hover` | 5.81 | 4.5 | 1.4.3 | ink-secondary on surface-accent-subtle-hover |
|
|
402
|
+
| light | `ink-on-accent-subtle` | `surface-accent-subtle` | 4.58 | 4.5 | 1.4.3 | accent text on the quiet accent surface |
|
|
403
|
+
| light | `ink-on-accent-subtle` | `surface-accent-subtle` | 4.58 | 4.5 | 1.4.3 | accent badge label on its own chip |
|
|
404
|
+
| light | `line-accent` | `surface-accent-subtle` | 3.36 | 3 | 1.4.11 | accent badge boundary on its own chip |
|
|
405
|
+
| light | `ink-inverse` | `surface-inverse` | 18.98 | 4.5 | 1.4.3 | text on an intentionally inverted card |
|
|
406
|
+
| light | `status-success-ink` | `status-success-surface` | 7.13 | 4.5 | 1.4.3 | success text on its own chip |
|
|
407
|
+
| light | `status-success-ink` | `surface-ground` | 8.28 | 4.5 | 1.4.3 | inline success message on surface-ground |
|
|
408
|
+
| light | `status-success-ink` | `surface-raised` | 7.74 | 4.5 | 1.4.3 | inline success message on surface-raised |
|
|
409
|
+
| light | `status-success-ink` | `surface-overlay` | 8.28 | 4.5 | 1.4.3 | inline success message on surface-overlay |
|
|
410
|
+
| light | `status-success-on-solid` | `status-success-solid` | 8.93 | 4.5 | 1.4.3 | label on the success solid fill |
|
|
411
|
+
| light | `status-success-line` | `status-success-surface` | 3.44 | 3 | 1.4.11 | success chip boundary |
|
|
412
|
+
| light | `status-success-line` | `surface-ground` | 3.99 | 3 | 1.4.11 | success boundary on surface-ground |
|
|
413
|
+
| light | `status-success-line` | `surface-raised` | 3.73 | 3 | 1.4.11 | success boundary on surface-raised |
|
|
414
|
+
| light | `status-success-line` | `surface-overlay` | 3.99 | 3 | 1.4.11 | success boundary on surface-overlay |
|
|
415
|
+
| light | `status-warning-ink` | `status-warning-surface` | 7.06 | 4.5 | 1.4.3 | warning text on its own chip |
|
|
416
|
+
| light | `status-warning-ink` | `surface-ground` | 8.29 | 4.5 | 1.4.3 | inline warning message on surface-ground |
|
|
417
|
+
| light | `status-warning-ink` | `surface-raised` | 7.75 | 4.5 | 1.4.3 | inline warning message on surface-raised |
|
|
418
|
+
| light | `status-warning-ink` | `surface-overlay` | 8.29 | 4.5 | 1.4.3 | inline warning message on surface-overlay |
|
|
419
|
+
| light | `status-warning-on-solid` | `status-warning-solid` | 8.40 | 4.5 | 1.4.3 | label on the warning solid fill |
|
|
420
|
+
| light | `status-warning-line` | `status-warning-surface` | 3.38 | 3 | 1.4.11 | warning chip boundary |
|
|
421
|
+
| light | `status-warning-line` | `surface-ground` | 3.97 | 3 | 1.4.11 | warning boundary on surface-ground |
|
|
422
|
+
| light | `status-warning-line` | `surface-raised` | 3.71 | 3 | 1.4.11 | warning boundary on surface-raised |
|
|
423
|
+
| light | `status-warning-line` | `surface-overlay` | 3.97 | 3 | 1.4.11 | warning boundary on surface-overlay |
|
|
424
|
+
| light | `status-error-ink` | `status-error-surface` | 7.07 | 4.5 | 1.4.3 | error text on its own chip |
|
|
425
|
+
| light | `status-error-ink` | `surface-ground` | 8.33 | 4.5 | 1.4.3 | inline error message on surface-ground |
|
|
426
|
+
| light | `status-error-ink` | `surface-raised` | 7.79 | 4.5 | 1.4.3 | inline error message on surface-raised |
|
|
427
|
+
| light | `status-error-ink` | `surface-overlay` | 8.33 | 4.5 | 1.4.3 | inline error message on surface-overlay |
|
|
428
|
+
| light | `status-error-on-solid` | `status-error-solid` | 5.49 | 4.5 | 1.4.3 | label on the error solid fill |
|
|
429
|
+
| light | `status-error-line` | `status-error-surface` | 3.36 | 3 | 1.4.11 | error chip boundary |
|
|
430
|
+
| light | `status-error-line` | `surface-ground` | 3.96 | 3 | 1.4.11 | error boundary on surface-ground |
|
|
431
|
+
| light | `status-error-line` | `surface-raised` | 3.70 | 3 | 1.4.11 | error boundary on surface-raised |
|
|
432
|
+
| light | `status-error-line` | `surface-overlay` | 3.96 | 3 | 1.4.11 | error boundary on surface-overlay |
|
|
433
|
+
| light | `status-info-ink` | `status-info-surface` | 4.61 | 4.5 | 1.4.3 | info text on its own chip |
|
|
434
|
+
| light | `status-info-ink` | `surface-ground` | 5.33 | 4.5 | 1.4.3 | inline info message on surface-ground |
|
|
435
|
+
| light | `status-info-ink` | `surface-raised` | 4.98 | 4.5 | 1.4.3 | inline info message on surface-raised |
|
|
436
|
+
| light | `status-info-ink` | `surface-overlay` | 5.33 | 4.5 | 1.4.3 | inline info message on surface-overlay |
|
|
437
|
+
| light | `status-info-on-solid` | `status-info-solid` | 7.67 | 4.5 | 1.4.3 | label on the info solid fill |
|
|
438
|
+
| light | `status-info-line` | `status-info-surface` | 3.45 | 3 | 1.4.11 | info chip boundary |
|
|
439
|
+
| light | `status-info-line` | `surface-ground` | 3.98 | 3 | 1.4.11 | info boundary on surface-ground |
|
|
440
|
+
| light | `status-info-line` | `surface-raised` | 3.72 | 3 | 1.4.11 | info boundary on surface-raised |
|
|
441
|
+
| light | `status-info-line` | `surface-overlay` | 3.98 | 3 | 1.4.11 | info boundary on surface-overlay |
|
|
442
|
+
| light | `line-control` | `surface-ground` | 1.29 | 3 | 1.4.11 | line-control on surface-ground |
|
|
443
|
+
| light | `line-strong` | `surface-ground` | 7.79 | 3 | 1.4.11 | line-strong on surface-ground |
|
|
444
|
+
| light | `line-focus` | `surface-ground` | 2.96 | 3 | 1.4.11 | line-focus on surface-ground |
|
|
445
|
+
| light | `line-control` | `surface-raised` | 1.21 | 3 | 1.4.11 | line-control on surface-raised |
|
|
446
|
+
| light | `line-strong` | `surface-raised` | 7.28 | 3 | 1.4.11 | line-strong on surface-raised |
|
|
447
|
+
| light | `line-focus` | `surface-raised` | 2.77 | 3 | 1.4.11 | line-focus on surface-raised |
|
|
448
|
+
| light | `line-control` | `surface-overlay` | 1.29 | 3 | 1.4.11 | line-control on surface-overlay |
|
|
449
|
+
| light | `line-strong` | `surface-overlay` | 7.79 | 3 | 1.4.11 | line-strong on surface-overlay |
|
|
450
|
+
| light | `line-focus` | `surface-overlay` | 2.96 | 3 | 1.4.11 | line-focus on surface-overlay |
|
|
451
|
+
| light | `line-control` | `surface-floating` | 1.29 | 3 | 1.4.11 | line-control on surface-floating |
|
|
452
|
+
| light | `line-strong` | `surface-floating` | 7.79 | 3 | 1.4.11 | line-strong on surface-floating |
|
|
453
|
+
| light | `line-focus` | `surface-floating` | 2.96 | 3 | 1.4.11 | line-focus on surface-floating |
|
|
454
|
+
| light | `line-control` | `surface-modal` | 1.29 | 3 | 1.4.11 | line-control on surface-modal |
|
|
455
|
+
| light | `line-strong` | `surface-modal` | 7.79 | 3 | 1.4.11 | line-strong on surface-modal |
|
|
456
|
+
| light | `line-focus` | `surface-modal` | 2.96 | 3 | 1.4.11 | line-focus on surface-modal |
|
|
457
|
+
| light | `line-control` | `surface-subtle` | 1.00 | 3 | 1.4.11 | line-control on surface-subtle |
|
|
458
|
+
| light | `line-strong` | `surface-subtle` | 6.03 | 3 | 1.4.11 | line-strong on surface-subtle |
|
|
459
|
+
| light | `line-focus` | `surface-subtle` | 2.29 | 3 | 1.4.11 | line-focus on surface-subtle |
|
|
460
|
+
| light | `line-control` | `surface-field` | 1.21 | 3 | 1.4.11 | line-control on surface-field |
|
|
461
|
+
| light | `line-strong` | `surface-field` | 7.28 | 3 | 1.4.11 | line-strong on surface-field |
|
|
462
|
+
| light | `line-focus` | `surface-field` | 2.77 | 3 | 1.4.11 | line-focus on surface-field |
|
|
463
|
+
| light | `line-accent` | `surface-ground` | 3.95 | 3 | 1.4.11 | accent boundary on surface-ground |
|
|
464
|
+
| light | `line-accent` | `surface-raised` | 3.70 | 3 | 1.4.11 | accent boundary on surface-raised |
|
|
465
|
+
| light | `line-accent` | `surface-overlay` | 3.95 | 3 | 1.4.11 | accent boundary on surface-overlay |
|
|
466
|
+
| light | `ink-on-accent` | `surface-accent` | 6.41 | 3 | 2.4.11 | focus ring on a primary button flips to near-black |
|
|
467
|
+
| light | `viz-1` | `surface-ground` | 3.52 | 3 | 1.4.11 | chart series 1 on surface-ground |
|
|
468
|
+
| light | `viz-2` | `surface-ground` | 3.55 | 3 | 1.4.11 | chart series 2 on surface-ground |
|
|
469
|
+
| light | `viz-3` | `surface-ground` | 3.54 | 3 | 1.4.11 | chart series 3 on surface-ground |
|
|
470
|
+
| light | `viz-4` | `surface-ground` | 3.52 | 3 | 1.4.11 | chart series 4 on surface-ground |
|
|
471
|
+
| light | `viz-5` | `surface-ground` | 3.52 | 3 | 1.4.11 | chart series 5 on surface-ground |
|
|
472
|
+
| light | `viz-6` | `surface-ground` | 3.53 | 3 | 1.4.11 | chart series 6 on surface-ground |
|
|
473
|
+
| light | `viz-7` | `surface-ground` | 5.23 | 3 | 1.4.11 | chart series 7 on surface-ground |
|
|
474
|
+
| light | `viz-axis` | `surface-ground` | 5.23 | 4.5 | 1.4.3 | axis label on surface-ground |
|
|
475
|
+
| light | `viz-sequential-3` | `surface-ground` | 4.41 | 3 | 1.4.11 | sequential step 3 on surface-ground |
|
|
476
|
+
| light | `viz-sequential-4` | `surface-ground` | 7.12 | 3 | 1.4.11 | sequential step 4 on surface-ground |
|
|
477
|
+
| light | `viz-diverging-neg-2` | `surface-ground` | 5.26 | 3 | 1.4.11 | diverging neg-2 on surface-ground |
|
|
478
|
+
| light | `viz-diverging-neg-1` | `surface-ground` | 3.55 | 3 | 1.4.11 | diverging neg-1 on surface-ground |
|
|
479
|
+
| light | `viz-diverging-pos-1` | `surface-ground` | 3.52 | 3 | 1.4.11 | diverging pos-1 on surface-ground |
|
|
480
|
+
| light | `viz-diverging-pos-2` | `surface-ground` | 5.26 | 3 | 1.4.11 | diverging pos-2 on surface-ground |
|
|
481
|
+
| light | `viz-1` | `surface-raised` | 3.29 | 3 | 1.4.11 | chart series 1 on surface-raised |
|
|
482
|
+
| light | `viz-2` | `surface-raised` | 3.32 | 3 | 1.4.11 | chart series 2 on surface-raised |
|
|
483
|
+
| light | `viz-3` | `surface-raised` | 3.31 | 3 | 1.4.11 | chart series 3 on surface-raised |
|
|
484
|
+
| light | `viz-4` | `surface-raised` | 3.29 | 3 | 1.4.11 | chart series 4 on surface-raised |
|
|
485
|
+
| light | `viz-5` | `surface-raised` | 3.29 | 3 | 1.4.11 | chart series 5 on surface-raised |
|
|
486
|
+
| light | `viz-6` | `surface-raised` | 3.30 | 3 | 1.4.11 | chart series 6 on surface-raised |
|
|
487
|
+
| light | `viz-7` | `surface-raised` | 4.89 | 3 | 1.4.11 | chart series 7 on surface-raised |
|
|
488
|
+
| light | `viz-axis` | `surface-raised` | 4.89 | 4.5 | 1.4.3 | axis label on surface-raised |
|
|
489
|
+
| light | `viz-sequential-3` | `surface-raised` | 4.13 | 3 | 1.4.11 | sequential step 3 on surface-raised |
|
|
490
|
+
| light | `viz-sequential-4` | `surface-raised` | 6.66 | 3 | 1.4.11 | sequential step 4 on surface-raised |
|
|
491
|
+
| light | `viz-diverging-neg-2` | `surface-raised` | 4.92 | 3 | 1.4.11 | diverging neg-2 on surface-raised |
|
|
492
|
+
| light | `viz-diverging-neg-1` | `surface-raised` | 3.32 | 3 | 1.4.11 | diverging neg-1 on surface-raised |
|
|
493
|
+
| light | `viz-diverging-pos-1` | `surface-raised` | 3.29 | 3 | 1.4.11 | diverging pos-1 on surface-raised |
|
|
494
|
+
| light | `viz-diverging-pos-2` | `surface-raised` | 4.91 | 3 | 1.4.11 | diverging pos-2 on surface-raised |
|
|
495
|
+
|
|
496
|
+
</details>
|
|
497
|
+
|
|
498
|
+
---
|
|
499
|
+
|
|
500
|
+
## What this report does not cover
|
|
501
|
+
|
|
502
|
+
Honest scope. These are Phase 6 work, not Phase 1:
|
|
503
|
+
|
|
504
|
+
- **Rendered contrast in a real browser.** These figures are computed from token
|
|
505
|
+
values. Sub-pixel antialiasing, font smoothing, and stacked translucency can
|
|
506
|
+
all change what a person actually sees.
|
|
507
|
+
- **Non-text UI at composed opacity.** Hairline borders and scrims are alpha
|
|
508
|
+
values; their effective contrast depends on what is beneath them at runtime.
|
|
509
|
+
- **Anything about component markup** — focus order, roles, names, keyboard
|
|
510
|
+
operation. No token file can speak to those.
|
|
511
|
+
- **Screen-reader behavior.** Not tested here, and not claimed anywhere.
|