@common-origin/design-system 2.17.0 → 2.19.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.
Files changed (28) hide show
  1. package/dist/client.esm.js +967 -606
  2. package/dist/client.esm.js.map +1 -1
  3. package/dist/client.js +967 -606
  4. package/dist/client.js.map +1 -1
  5. package/dist/components/atoms/Badge/Badge.d.ts +7 -2
  6. package/dist/components/atoms/Chip/shared/types.d.ts +3 -1
  7. package/dist/components/atoms/Chip/shared/utils.d.ts +2 -3
  8. package/dist/components/atoms/ProgressBar/ProgressBar.d.ts +1 -1
  9. package/dist/components/atoms/Tag/Tag.d.ts +4 -1
  10. package/dist/data.esm.js +271 -16
  11. package/dist/data.esm.js.map +1 -1
  12. package/dist/data.js +271 -16
  13. package/dist/data.js.map +1 -1
  14. package/dist/lib/cssTokens.d.ts +14 -0
  15. package/dist/lib/cssVariables.d.ts +15 -0
  16. package/dist/lib/styleUtils.d.ts +23 -0
  17. package/dist/lib/tokenAliases.d.ts +13 -0
  18. package/dist/styles/tokens.d.ts +3174 -0
  19. package/dist/styles/tokens.json +267 -14
  20. package/dist/tokens/index.esm.js +271 -16
  21. package/dist/tokens/index.esm.js.map +1 -1
  22. package/dist/tokens/index.js +271 -16
  23. package/dist/tokens/index.js.map +1 -1
  24. package/dist/tokens/styles/tokens.d.ts +3174 -0
  25. package/dist/tokens/types/tokens.d.ts +3 -1196
  26. package/dist/tokens.css +720 -432
  27. package/dist/types/tokens.d.ts +3 -1196
  28. package/package.json +4 -2
package/dist/tokens.css CHANGED
@@ -53,40 +53,40 @@
53
53
  --co-base-opacity-90: 0.9;
54
54
  --co-base-opacity-95: 0.95;
55
55
  --co-base-opacity-100: 1;
56
- --co-base-size-0: 0;
57
- --co-base-size-1: 0.25rem;
58
- --co-base-size-2: 0.5rem;
59
- --co-base-size-3: 0.75rem;
60
- --co-base-size-4: 1rem;
61
- --co-base-size-5: 1.25rem;
62
- --co-base-size-6: 1.5rem;
63
- --co-base-size-7: 1.75rem;
64
- --co-base-size-8: 2rem;
65
- --co-base-size-9: 2.25rem;
66
- --co-base-size-10: 2.5rem;
67
- --co-base-size-11: 2.75rem;
68
- --co-base-size-12: 3rem;
69
- --co-base-size-14: 3.5rem;
70
- --co-base-size-15: 3.75rem;
71
- --co-base-size-16: 4rem;
72
- --co-base-size-18: 4.5rem;
73
- --co-base-size-20: 5rem;
74
- --co-base-size-24: 6rem;
75
- --co-base-size-28: 7rem;
76
- --co-base-size-30: 7.5rem;
77
- --co-base-size-32: 8rem;
78
- --co-base-size-40: 10rem;
79
- --co-base-size-45: 11.25rem;
80
- --co-base-size-48: 12rem;
81
- --co-base-size-50: 12.5rem;
82
- --co-base-size-56: 14rem;
83
- --co-base-size-64: 16rem;
84
- --co-base-size-75: 18.75rem;
85
- --co-base-size-90: 22.5rem;
86
- --co-base-size-100: 25rem;
87
- --co-base-size-140: 35rem;
88
- --co-base-size-180: 45rem;
89
- --co-base-size-192: 48rem;
56
+ --co-base-dimension-0: 0;
57
+ --co-base-dimension-1: 0.25rem;
58
+ --co-base-dimension-2: 0.5rem;
59
+ --co-base-dimension-3: 0.75rem;
60
+ --co-base-dimension-4: 1rem;
61
+ --co-base-dimension-5: 1.25rem;
62
+ --co-base-dimension-6: 1.5rem;
63
+ --co-base-dimension-7: 1.75rem;
64
+ --co-base-dimension-8: 2rem;
65
+ --co-base-dimension-9: 2.25rem;
66
+ --co-base-dimension-10: 2.5rem;
67
+ --co-base-dimension-11: 2.75rem;
68
+ --co-base-dimension-12: 3rem;
69
+ --co-base-dimension-14: 3.5rem;
70
+ --co-base-dimension-15: 3.75rem;
71
+ --co-base-dimension-16: 4rem;
72
+ --co-base-dimension-18: 4.5rem;
73
+ --co-base-dimension-20: 5rem;
74
+ --co-base-dimension-24: 6rem;
75
+ --co-base-dimension-28: 7rem;
76
+ --co-base-dimension-30: 7.5rem;
77
+ --co-base-dimension-32: 8rem;
78
+ --co-base-dimension-40: 10rem;
79
+ --co-base-dimension-45: 11.25rem;
80
+ --co-base-dimension-48: 12rem;
81
+ --co-base-dimension-50: 12.5rem;
82
+ --co-base-dimension-56: 14rem;
83
+ --co-base-dimension-64: 16rem;
84
+ --co-base-dimension-75: 18.75rem;
85
+ --co-base-dimension-90: 22.5rem;
86
+ --co-base-dimension-100: 25rem;
87
+ --co-base-dimension-140: 35rem;
88
+ --co-base-dimension-180: 45rem;
89
+ --co-base-dimension-192: 48rem;
90
90
  --co-base-size-auto: auto;
91
91
  --co-base-size-full: 100%;
92
92
  --co-base-size-screen: 100vh;
@@ -94,6 +94,30 @@
94
94
  --co-base-size-max: max-content;
95
95
  --co-base-size-fit: fit-content;
96
96
  --co-base-color-transparent: transparent; /** Fully transparent. For colour values that must not show, such as a border that keeps its width (semantic.color.border.none). */
97
+ --co-base-color-gray-100: #fcfcfc; /** Page background. oklch(0.991 0 0), 1.03:1 on white. */
98
+ --co-base-color-gray-200: #f9f9f9; /** Subtle background. oklch(0.982 0 0), 1.05:1 on white. */
99
+ --co-base-color-gray-300: #f2f2f2; /** Component fill at rest. oklch(0.961 0 0), 1.12:1 on white. */
100
+ --co-base-color-gray-400: #ebebeb; /** Component fill on hover. oklch(0.940 0 0), 1.19:1 on white. */
101
+ --co-base-color-gray-500: #e4e4e4; /** Component fill pressed or selected. oklch(0.918 0 0), 1.27:1 on white. */
102
+ --co-base-color-gray-600: #dcdcdc; /** Subtle border. oklch(0.895 0 0), 1.37:1 on white. */
103
+ --co-base-color-gray-700: #d1d1d1; /** Default border, for dividers and decorative outlines. oklch(0.860 0 0), 1.53:1 on white. */
104
+ --co-base-color-gray-800: #909090; /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). oklch(0.655 0 0), 3.19:1 on white. */
105
+ --co-base-color-gray-900: #848484; /** Solid fill. oklch(0.615 0 0), 3.74:1 on white. */
106
+ --co-base-color-gray-1000: #797979; /** Solid fill on hover. oklch(0.575 0 0), 4.35:1 on white. */
107
+ --co-base-color-gray-1100: #636363; /** Secondary text: at least 4.5:1 on 100 to 500 and white. oklch(0.500 0 0), 6.01:1 on white. */
108
+ --co-base-color-gray-1200: #222222; /** Primary text, and the darkest step. oklch(0.250 0 0), 15.91:1 on white. */
109
+ --co-base-color-gray-alpha-100: rgba(34, 34, 34, 0.014); /** Page background. Composites to gray.100 over white. */
110
+ --co-base-color-gray-alpha-200: rgba(34, 34, 34, 0.027); /** Subtle background. Composites to gray.200 over white. */
111
+ --co-base-color-gray-alpha-300: rgba(34, 34, 34, 0.059); /** Component fill at rest. Composites to gray.300 over white. */
112
+ --co-base-color-gray-alpha-400: rgba(34, 34, 34, 0.09); /** Component fill on hover. Composites to gray.400 over white. */
113
+ --co-base-color-gray-alpha-500: rgba(34, 34, 34, 0.122); /** Component fill pressed or selected. Composites to gray.500 over white. */
114
+ --co-base-color-gray-alpha-600: rgba(34, 34, 34, 0.158); /** Subtle border. Composites to gray.600 over white. */
115
+ --co-base-color-gray-alpha-700: rgba(34, 34, 34, 0.208); /** Default border, for dividers and decorative outlines. Composites to gray.700 over white. */
116
+ --co-base-color-gray-alpha-800: rgba(34, 34, 34, 0.502); /** Strong border: a control edge, at least 3:1 on 100, 200 and white (decision 0025). Composites to gray.800 over white. */
117
+ --co-base-color-gray-alpha-900: rgba(34, 34, 34, 0.557); /** Solid fill. Composites to gray.900 over white. */
118
+ --co-base-color-gray-alpha-1000: rgba(34, 34, 34, 0.606); /** Solid fill on hover. Composites to gray.1000 over white. */
119
+ --co-base-color-gray-alpha-1100: rgba(34, 34, 34, 0.706); /** Secondary text: at least 4.5:1 on 100 to 500 and white. Composites to gray.1100 over white. */
120
+ --co-base-color-gray-alpha-1200: rgba(34, 34, 34, 1); /** Primary text, and the darkest step. Composites to gray.1200 over white. */
97
121
  --co-base-color-neutral-100: #f8f9fa;
98
122
  --co-base-color-neutral-200: #e9ecef;
99
123
  --co-base-color-neutral-300: #dee2e6;
@@ -196,28 +220,6 @@
196
220
  --co-base-color-yellow-1100: #694600;
197
221
  --co-base-color-yellow-1200: #523600;
198
222
  --co-base-color-yellow-1300: #3D2800;
199
- --co-base-spacing-0: 0;
200
- --co-base-spacing-1: 0.25rem;
201
- --co-base-spacing-2: 0.5rem;
202
- --co-base-spacing-3: 0.75rem;
203
- --co-base-spacing-4: 1rem;
204
- --co-base-spacing-5: 1.25rem;
205
- --co-base-spacing-6: 1.5rem;
206
- --co-base-spacing-7: 1.75rem;
207
- --co-base-spacing-8: 2rem;
208
- --co-base-spacing-9: 2.25rem;
209
- --co-base-spacing-10: 2.5rem;
210
- --co-base-spacing-12: 3rem;
211
- --co-base-spacing-14: 3.5rem;
212
- --co-base-spacing-16: 4rem;
213
- --co-base-spacing-20: 5rem;
214
- --co-base-spacing-24: 6rem;
215
- --co-base-spacing-28: 7rem;
216
- --co-base-spacing-32: 8rem;
217
- --co-base-spacing-40: 10rem;
218
- --co-base-spacing-48: 12rem;
219
- --co-base-spacing-56: 14rem;
220
- --co-base-spacing-64: 16rem;
221
223
  --co-base-spacing-auto: auto;
222
224
  --co-base-font-family-heading: 'Inter', sans-serif;
223
225
  --co-base-font-family-body: 'Inter', sans-serif;
@@ -280,411 +282,607 @@
280
282
  --co-base-easing-ease-in-back: cubic-bezier(0.36, 0, 0.66, -0.56);
281
283
  --co-base-easing-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
282
284
  --co-base-easing-ease-in-out-back: cubic-bezier(0.68, -0.6, 0.32, 1.6);
283
- --co-component-button-focus-outline-offset: 2px; /** Deprecated (decision 0022): use semantic.border.focusOffset. Removed in 3.0. */
284
- --co-component-chip-focus-outline-offset: 2px; /** Deprecated (decision 0022): use semantic.border.focusOffset. Removed in 3.0. */
285
- --co-component-icon-button-primary-min-width: 40px; /** Same as sizes.medium.minWidth, and not read by IconButton. Raw px until control sizes are decided in #129. */
286
- --co-component-icon-button-primary-min-height: 40px; /** Same as sizes.medium.minHeight, and not read by IconButton. Raw px until control sizes are decided in #129. */
287
- --co-component-icon-button-primary-display: flex; /** Deprecated: layout mechanics stay in component code (decision 0014, rule 5); IconButton sets display: flex itself. Removed in 3.0. */
288
- --co-component-icon-button-primary-align-items: center; /** Deprecated: layout mechanics stay in component code (decision 0014, rule 5); IconButton sets align-items: center itself. Removed in 3.0. */
289
- --co-component-icon-button-primary-justify-content: center; /** Deprecated: layout mechanics stay in component code (decision 0014, rule 5); IconButton sets justify-content: center itself. Removed in 3.0. */
290
- --co-component-icon-button-focus-outline-offset: 2px; /** Deprecated (decision 0022): use semantic.border.focusOffset. Removed in 3.0. */
291
- --co-component-icon-button-sizes-small-min-width: 32px; /** Minimum width of the small IconButton. Raw px until control sizes are decided in #129. */
292
- --co-component-icon-button-sizes-small-min-height: 32px; /** Minimum height of the small IconButton. Raw px until control sizes are decided in #129. */
293
- --co-component-icon-button-sizes-medium-min-width: 40px; /** Minimum width of the medium IconButton. Raw px until control sizes are decided in #129. */
294
- --co-component-icon-button-sizes-medium-min-height: 40px; /** Minimum height of the medium IconButton. Raw px until control sizes are decided in #129. */
295
- --co-component-icon-button-sizes-large-min-width: 48px; /** Minimum width of the large IconButton. Raw px until control sizes are decided in #129. */
296
- --co-component-icon-button-sizes-large-min-height: 48px; /** Minimum height of the large IconButton. Raw px until control sizes are decided in #129. */
297
- --co-component-input-default-padding-y: 11px; /** Deprecated (decision 0022): no component spacing tokens. The 11px is off-grid and has no semantic step, so inputs keep reading this until #129 decides how controls get their heights. Removed in 3.0. */
298
- --co-component-input-focus-outline-offset: 2px; /** Deprecated (decision 0022): use semantic.border.focusOffset. Removed in 3.0. */
299
- --co-component-input-error-focus-outline-offset: 2px; /** Deprecated (decision 0022): use semantic.border.focusOffset. Removed in 3.0. */
300
- --co-component-input-disabled-cursor: not-allowed; /** Deprecated: behaviour, not a design decision, stays in component code (decision 0014, rule 5); inputs set cursor: not-allowed themselves. Removed in 3.0. */
285
+ --co-component-button-focus-outline-offset: 2px; /** Deprecated: Use semantic.border.focusOffset (decision 0022). Removed in 3.0. */
286
+ --co-component-chip-focus-outline-offset: 2px; /** Deprecated: Use semantic.border.focusOffset (decision 0022). Removed in 3.0. */
287
+ --co-component-icon-button-primary-min-width: 40px; /** Deprecated: No IconButton reads it: sizes take their minimum width from semantic.size.control (decision 0034). Removed in 3.0. */
288
+ --co-component-icon-button-primary-min-height: 40px; /** Deprecated: No IconButton reads it: sizes take their minimum height from semantic.size.control (decision 0034). Removed in 3.0. */
289
+ --co-component-icon-button-primary-display: flex; /** Deprecated: Layout mechanics stay in component code (decision 0014, rule 5); IconButton sets display: flex itself. Removed in 3.0. */
290
+ --co-component-icon-button-primary-align-items: center; /** Deprecated: Layout mechanics stay in component code (decision 0014, rule 5); IconButton sets align-items: center itself. Removed in 3.0. */
291
+ --co-component-icon-button-primary-justify-content: center; /** Deprecated: Layout mechanics stay in component code (decision 0014, rule 5); IconButton sets justify-content: center itself. Removed in 3.0. */
292
+ --co-component-icon-button-focus-outline-offset: 2px; /** Deprecated: Use semantic.border.focusOffset (decision 0022). Removed in 3.0. */
293
+ --co-component-icon-button-sizes-small-min-width: 32px; /** Deprecated: IconButton takes its minimum width from semantic.size.control.sm (decision 0034). Removed in 3.0. */
294
+ --co-component-icon-button-sizes-small-min-height: 32px; /** Deprecated: IconButton takes its minimum height from semantic.size.control.sm (decision 0034). Removed in 3.0. */
295
+ --co-component-icon-button-sizes-medium-min-width: 40px; /** Deprecated: IconButton takes its minimum width from semantic.size.control.md (decision 0034). Removed in 3.0. */
296
+ --co-component-icon-button-sizes-medium-min-height: 40px; /** Deprecated: IconButton takes its minimum height from semantic.size.control.md (decision 0034). Removed in 3.0. */
297
+ --co-component-icon-button-sizes-large-min-width: 48px; /** Deprecated: IconButton takes its minimum width from semantic.size.control.lg (decision 0034). Removed in 3.0. */
298
+ --co-component-icon-button-sizes-large-min-height: 48px; /** Deprecated: IconButton takes its minimum height from semantic.size.control.lg (decision 0034). Removed in 3.0. */
299
+ --co-component-input-default-padding-y: 11px; /** Deprecated: Single-line fields take their min-height from semantic.size.control.lg with no vertical padding (decisions 0022 and 0034). Removed in 3.0. */
300
+ --co-component-input-focus-outline-offset: 2px; /** Deprecated: Use semantic.border.focusOffset (decision 0022). Removed in 3.0. */
301
+ --co-component-input-error-focus-outline-offset: 2px; /** Deprecated: Use semantic.border.focusOffset (decision 0022). Removed in 3.0. */
302
+ --co-component-input-disabled-cursor: not-allowed; /** Deprecated: Behaviour, not a design decision, stays in component code (decision 0014, rule 5); inputs set cursor: not-allowed themselves. Removed in 3.0. */
301
303
  --co-semantic-elevation-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); /** Sunken/pressed states, input fields, wells */
302
- --co-semantic-border-radius-none: 0; /** No rounding - tables, dividers, inline code blocks, sharp-edged containers */
303
- --co-semantic-color-background-overlay: rgba(33, 37, 41, 0.5); /** Semi-transparent scrim for modal, sheet, drawer, and action-sheet backdrops. Uses brand near-black (#212529) at 50% opacity. Sits below the overlay surface and above page content. */
304
- --co-semantic-color-background-hover-overlay: rgba(33, 37, 41, 0.1); /** Subtle transparent dark overlay for hover states on components that sit over variable-colour backgrounds (e.g. chip close-button hover). Uses brand near-black (#212529) — never pure #000000 per VDL. */
305
- --co-semantic-color-background-active-overlay: rgba(33, 37, 41, 0.15); /** Slightly stronger transparent dark overlay for active/pressed states on components over variable-colour backgrounds (e.g. chip close-button active). Uses brand near-black (#212529). Pair with hover-overlay for consistent press depth. */
306
- --co-semantic-color-background-inverse-overlay: rgba(255, 255, 255, 0.2); /** Subtle transparent light overlay for elements that sit on a strong or dark background (e.g. the count badge on an active pills tab in TabBar). The light counterpart of hover-overlay; pair with text.inverse. */
304
+ --co-semantic-border-radius-none: 0; /** Deprecated: Renamed to semantic.radius.none by the semantic grammar (decision 0031). Removed in 3.0. */
305
+ --co-semantic-color-background-overlay: rgba(33, 37, 41, 0.5); /** Deprecated: Renamed to semantic.surface.scrim by the semantic grammar (decision 0031). Removed in 3.0. */
306
+ --co-semantic-color-background-hover-overlay: rgba(33, 37, 41, 0.1); /** Deprecated: Renamed to semantic.color.fill.none-hover by the semantic grammar (decision 0031). Removed in 3.0. */
307
+ --co-semantic-color-background-active-overlay: rgba(33, 37, 41, 0.15); /** Deprecated: Renamed to semantic.color.fill.none-pressed by the semantic grammar (decision 0031). Removed in 3.0. */
308
+ --co-semantic-color-background-inverse-overlay: rgba(255, 255, 255, 0.2); /** Deprecated: Renamed to semantic.color.fill.inverse-none-hover by the semantic grammar (decision 0031). Removed in 3.0. */
309
+ --co-semantic-color-fill-none-hover: rgba(33, 37, 41, 0.1); /** Hover tint for a fill-less control over any background, such as a chip close button. */
310
+ --co-semantic-color-fill-none-pressed: rgba(33, 37, 41, 0.15); /** Pressed tint for a fill-less control over any background, such as a chip close button. */
311
+ --co-semantic-color-fill-inverse-none-hover: rgba(255, 255, 255, 0.2); /** Hover tint for a fill-less element on a dark background, such as a count on a dark tab. */
312
+ --co-semantic-surface-scrim: rgba(33, 37, 41, 0.5); /** Backdrop behind a modal surface: Modal, Sheet, ActionSheet. */
313
+ --co-base-size-0: var(--co-base-dimension-0); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
314
+ --co-base-size-1: var(--co-base-dimension-1); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
315
+ --co-base-size-2: var(--co-base-dimension-2); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
316
+ --co-base-size-3: var(--co-base-dimension-3); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
317
+ --co-base-size-4: var(--co-base-dimension-4); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
318
+ --co-base-size-5: var(--co-base-dimension-5); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
319
+ --co-base-size-6: var(--co-base-dimension-6); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
320
+ --co-base-size-7: var(--co-base-dimension-7); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
321
+ --co-base-size-8: var(--co-base-dimension-8); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
322
+ --co-base-size-9: var(--co-base-dimension-9); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
323
+ --co-base-size-10: var(--co-base-dimension-10); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
324
+ --co-base-size-11: var(--co-base-dimension-11); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
325
+ --co-base-size-12: var(--co-base-dimension-12); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
326
+ --co-base-size-14: var(--co-base-dimension-14); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
327
+ --co-base-size-15: var(--co-base-dimension-15); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
328
+ --co-base-size-16: var(--co-base-dimension-16); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
329
+ --co-base-size-18: var(--co-base-dimension-18); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
330
+ --co-base-size-20: var(--co-base-dimension-20); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
331
+ --co-base-size-24: var(--co-base-dimension-24); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
332
+ --co-base-size-28: var(--co-base-dimension-28); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
333
+ --co-base-size-30: var(--co-base-dimension-30); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
334
+ --co-base-size-32: var(--co-base-dimension-32); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
335
+ --co-base-size-40: var(--co-base-dimension-40); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
336
+ --co-base-size-45: var(--co-base-dimension-45); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
337
+ --co-base-size-48: var(--co-base-dimension-48); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
338
+ --co-base-size-50: var(--co-base-dimension-50); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
339
+ --co-base-size-56: var(--co-base-dimension-56); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
340
+ --co-base-size-64: var(--co-base-dimension-64); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
341
+ --co-base-size-75: var(--co-base-dimension-75); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
342
+ --co-base-size-90: var(--co-base-dimension-90); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
343
+ --co-base-size-100: var(--co-base-dimension-100); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
344
+ --co-base-size-140: var(--co-base-dimension-140); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
345
+ --co-base-size-180: var(--co-base-dimension-180); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
346
+ --co-base-size-192: var(--co-base-dimension-192); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
347
+ --co-base-spacing-0: var(--co-base-dimension-0); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
348
+ --co-base-spacing-1: var(--co-base-dimension-1); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
349
+ --co-base-spacing-2: var(--co-base-dimension-2); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
350
+ --co-base-spacing-3: var(--co-base-dimension-3); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
351
+ --co-base-spacing-4: var(--co-base-dimension-4); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
352
+ --co-base-spacing-5: var(--co-base-dimension-5); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
353
+ --co-base-spacing-6: var(--co-base-dimension-6); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
354
+ --co-base-spacing-7: var(--co-base-dimension-7); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
355
+ --co-base-spacing-8: var(--co-base-dimension-8); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
356
+ --co-base-spacing-9: var(--co-base-dimension-9); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
357
+ --co-base-spacing-10: var(--co-base-dimension-10); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
358
+ --co-base-spacing-12: var(--co-base-dimension-12); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
359
+ --co-base-spacing-14: var(--co-base-dimension-14); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
360
+ --co-base-spacing-16: var(--co-base-dimension-16); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
361
+ --co-base-spacing-20: var(--co-base-dimension-20); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
362
+ --co-base-spacing-24: var(--co-base-dimension-24); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
363
+ --co-base-spacing-28: var(--co-base-dimension-28); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
364
+ --co-base-spacing-32: var(--co-base-dimension-32); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
365
+ --co-base-spacing-40: var(--co-base-dimension-40); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
366
+ --co-base-spacing-48: var(--co-base-dimension-48); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
367
+ --co-base-spacing-56: var(--co-base-dimension-56); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
368
+ --co-base-spacing-64: var(--co-base-dimension-64); /** Deprecated: base.size and base.spacing were two copies of one 4px scale, merged into base.dimension (#188). Removed in 3.0. */
369
+ --co-component-slider-thumb-background: var(--co-base-color-neutral-000); /** Fill of Slider's thumb: white, so it reads on both the track and the fill. */
370
+ --co-component-status-pending-text: var(--co-base-color-yellow-1000); /** Text and icon of a pending StatusLabel, on its pending background. */
371
+ --co-component-status-pending-background: var(--co-base-color-yellow-100); /** Fill of a pending StatusLabel, behind its pending text. */
372
+ --co-component-status-processing-text: var(--co-base-color-blue-900); /** Text and icon of a processing StatusLabel, on its processing background. */
373
+ --co-component-status-processing-background: var(--co-base-color-blue-100); /** Fill of a processing StatusLabel, behind its processing text. */
374
+ --co-component-status-scheduled-text: var(--co-base-color-purple-900); /** Text and icon of a scheduled StatusLabel, on its scheduled background. */
375
+ --co-component-status-scheduled-background: var(--co-base-color-purple-100); /** Fill of a scheduled StatusLabel, behind its scheduled text. */
376
+ --co-component-transaction-credit: var(--co-base-color-green-700); /** Positive amounts and credits in MoneyDisplay and TransactionListItem. */
377
+ --co-component-transaction-credit-hover: var(--co-base-color-green-800); /** A credit amount on a hovered interactive row. */
378
+ --co-component-transaction-debit: var(--co-base-color-red-900); /** Negative amounts and debits in MoneyDisplay and TransactionListItem. */
379
+ --co-component-transaction-debit-hover: var(--co-base-color-red-1000); /** A debit amount on a hovered interactive row. */
380
+ --co-component-transaction-pending: var(--co-base-color-orange-600); /** Amounts of pending or processing transactions. */
381
+ --co-component-transaction-neutral: var(--co-base-color-neutral-600); /** Informational amounts that are neither credit nor debit. */
382
+ --co-component-track-background: var(--co-base-color-neutral-300); /** Unfilled track of ProgressBar and Slider; the fill and thumb show the value (decision 0026). */
307
383
  --co-semantic-elevation-none: var(--co-base-shadow-none); /** No elevation - flat surfaces, default state */
308
384
  --co-semantic-elevation-raised: var(--co-base-shadow-2); /** Subtle lift - cards, buttons with depth */
309
385
  --co-semantic-elevation-floating: var(--co-base-shadow-4); /** Moderate lift - tooltips, popovers, dropdowns */
310
386
  --co-semantic-elevation-overlay: var(--co-base-shadow-5); /** High lift - modals, dialogs, action sheets */
311
387
  --co-semantic-elevation-sticky: var(--co-base-shadow-3); /** Fixed headers, sticky navigation, bottom bars */
312
- --co-semantic-breakpoint-xs: var(--co-base-breakpoint-xs); /** 0px: smallest viewport. */
313
- --co-semantic-breakpoint-sm: var(--co-base-breakpoint-sm); /** 640px: large phones. */
314
- --co-semantic-breakpoint-md: var(--co-base-breakpoint-md); /** 768px: tablets; below this, mobile layouts (e.g. fullscreen Modal). */
315
- --co-semantic-breakpoint-lg: var(--co-base-breakpoint-lg); /** 1024px: small desktops. */
316
- --co-semantic-breakpoint-xl: var(--co-base-breakpoint-xl); /** 1280px: desktops. */
317
- --co-semantic-breakpoint-2xl: var(--co-base-breakpoint-2xl); /** 1536px: wide desktops. */
388
+ --co-semantic-breakpoint-xs: var(--co-base-breakpoint-xs); /** The smallest viewport, where mobile-first styles start. */
389
+ --co-semantic-breakpoint-sm: var(--co-base-breakpoint-sm); /** Breakpoint for large phones in landscape and small tablets. */
390
+ --co-semantic-breakpoint-md: var(--co-base-breakpoint-md); /** Breakpoint for tablets; below it, mobile layouts apply, such as a fullscreen Modal. */
391
+ --co-semantic-breakpoint-lg: var(--co-base-breakpoint-lg); /** Breakpoint for small desktops and landscape tablets. */
392
+ --co-semantic-breakpoint-xl: var(--co-base-breakpoint-xl); /** Breakpoint for standard desktops. */
393
+ --co-semantic-breakpoint-2xl: var(--co-base-breakpoint-2xl); /** Breakpoint for wide desktops; layouts can add columns from here. */
318
394
  --co-semantic-opacity-disabled: var(--co-base-opacity-50); /** 0.5: disabled controls and items. */
319
395
  --co-semantic-opacity-full: var(--co-base-opacity-100); /** 1: fully opaque (the enabled counterpart of disabled). */
396
+ --co-semantic-opacity-hover: var(--co-base-opacity-80); /** Content that fades to answer hover, such as a clickable card's image. */
397
+ --co-semantic-opacity-pressed: var(--co-base-opacity-70); /** Content that fades while pressed, one step further than hover. */
320
398
  --co-semantic-font-family-body: var(--co-base-font-family-body); /** UI text (Inter). Use a typography style where one fits; this is for components that set the family on its own. */
321
399
  --co-semantic-font-family-monospace: var(--co-base-font-family-monospace); /** Code and other fixed-width text (CodeBlock). */
322
- --co-semantic-font-size-xs: var(--co-base-font-size-1); /** 0.75rem. */
323
- --co-semantic-font-size-sm: var(--co-base-font-size-2); /** 0.875rem. */
324
- --co-semantic-font-size-md: var(--co-base-font-size-3); /** 1rem. */
325
- --co-semantic-font-size-lg: var(--co-base-font-size-4); /** 1.125rem. */
326
- --co-semantic-font-size-xl: var(--co-base-font-size-5); /** 1.25rem. */
400
+ --co-semantic-font-size-xs: var(--co-base-font-size-1); /** Smallest text size: captions, metadata and small labels. */
401
+ --co-semantic-font-size-sm: var(--co-base-font-size-2); /** Secondary text size: labels, compact controls and supporting copy. */
402
+ --co-semantic-font-size-md: var(--co-base-font-size-3); /** Body text size: paragraphs, input values and most controls. */
403
+ --co-semantic-font-size-lg: var(--co-base-font-size-4); /** One step larger than body text on the type scale. */
404
+ --co-semantic-font-size-xl: var(--co-base-font-size-5); /** Two steps larger than body text on the type scale. */
327
405
  --co-semantic-line-height-none: var(--co-base-line-height-none); /** 1 (unitless): line box equals the font size. For single-line glyphs such as avatar initials and count indicators. */
328
- --co-semantic-line-height-tight: var(--co-base-line-height-3); /** 1.25rem: compact multi-line text (Alert, CodeBlock). */
329
- --co-semantic-line-height-normal: var(--co-base-line-height-4); /** 1.5rem: body-text line height (TextArea). */
330
- --co-semantic-letter-spacing-tighter: var(--co-base-letter-spacing-0); /** -0.125rem: tracking for the largest headings (display, h1). */
331
- --co-semantic-letter-spacing-tight: var(--co-base-letter-spacing-1); /** -0.0625rem: tracking for h2 to h4. */
406
+ --co-semantic-line-height-tight: var(--co-base-line-height-3); /** Line height for compact multi-line text, such as Alert and CodeBlock. */
407
+ --co-semantic-line-height-normal: var(--co-base-line-height-4); /** Line height for body text and multi-line entry, such as TextArea. */
408
+ --co-semantic-letter-spacing-tighter: var(--co-base-letter-spacing-0); /** Tightest tracking, for the largest headings: display and h1. */
409
+ --co-semantic-letter-spacing-tight: var(--co-base-letter-spacing-1); /** Slightly tighter tracking for mid-size headings, h2 to h4. */
332
410
  --co-semantic-letter-spacing-normal: var(--co-base-letter-spacing-2); /** 0: default tracking (h5, h6 and text). */
333
- --co-semantic-letter-spacing-wide: var(--co-base-letter-spacing-4); /** 0.125rem: tracking for small uppercase labels (SearchField section headers). */
411
+ --co-semantic-letter-spacing-wide: var(--co-base-letter-spacing-4); /** Wide tracking for small uppercase labels, such as SearchField section headers. */
334
412
  --co-semantic-font-weight-regular: var(--co-base-font-weight-2); /** 400. Body text, captions, most UI text. */
335
413
  --co-semantic-font-weight-medium: var(--co-base-font-weight-3); /** 500. Subheadings (h5, h6, subtitle), buttons, emphasis within UI text. */
336
414
  --co-semantic-font-weight-semibold: var(--co-base-font-weight-4); /** 600. Labels and short titles that need more weight than medium (label, Alert title). */
337
415
  --co-semantic-font-weight-bold: var(--co-base-font-weight-5); /** 700. Headings (display to h4), overline, strong indicators such as the required-field asterisk. */
338
- --co-semantic-z-index-sticky: var(--co-base-z-index-1); /** Sticky and fixed chrome that stays visible while scrolling: sticky headers, section headers, navigation bars. Pair with elevation.sticky. Sits below dropdowns, overlays and modals. */
339
- --co-semantic-z-index-dropdown: var(--co-base-z-index-6); /** Floating menus anchored to a control: dropdown menus, select and autocomplete lists (Dropdown, SearchField). Pair with elevation.floating. Sits above sticky, below overlays. */
340
- --co-semantic-z-index-overlay: var(--co-base-z-index-7); /** Panels that slide over the page and their backdrop: sheets, drawers (Sheet). The backdrop uses the same value and comes before the panel in the DOM. Pair with elevation.overlay. Sits below modals. */
341
- --co-semantic-z-index-modal: var(--co-base-z-index-8); /** Blocking dialogs and their backdrop: modals, action sheets (Modal, ActionSheet). The backdrop uses the same value and comes before the dialog in the DOM. Pair with elevation.overlay. Topmost layer in the system. */
416
+ --co-semantic-z-index-sticky: var(--co-base-z-index-1); /** Deprecated: Renamed to semantic.layer.sticky by the semantic grammar (decision 0031). Removed in 3.0. */
417
+ --co-semantic-z-index-dropdown: var(--co-base-z-index-6); /** Deprecated: Renamed to semantic.layer.dropdown by the semantic grammar (decision 0031). Removed in 3.0. */
418
+ --co-semantic-z-index-overlay: var(--co-base-z-index-7); /** Deprecated: Renamed to semantic.layer.overlay by the semantic grammar (decision 0031). Removed in 3.0. */
419
+ --co-semantic-z-index-modal: var(--co-base-z-index-8); /** Deprecated: Renamed to semantic.layer.modal by the semantic grammar (decision 0031). Removed in 3.0. */
342
420
  --co-semantic-border-default: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-default); /** Hairline in the default border colour: dividers that separate content, such as Breadcrumbs. 1.19:1 on white, so never a control's edge (decision 0025). */
343
- --co-semantic-border-subtle: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-subtle); /** Hairline in the subtle border colour: dividers and decorative outlines, such as CodeBlock and Separator. 1.30:1 on white, so never a control's edge (decision 0025). */
344
- --co-semantic-border-strong: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-strong); /** Hairline in near-black: a firm outline that must read as a boundary, such as a hovered or focused text input. 11.51:1 on white. */
345
- --co-semantic-border-focus: var(--co-base-border-width-2) var(--co-base-border-style-solid) var(--co-semantic-color-border-strong); /** The standard focus ring: 2px solid near-black, used with border.focusOffset for visible keyboard focus (P2). Some components draw a blue ring instead, from border.width.thick and color.border.interactive (Box, ListItem, Slider, TransactionListItem). */
346
- --co-semantic-border-tooltip: var(--co-base-border-width-2) var(--co-base-border-style-dotted) var(--co-semantic-color-border-subtle); /** 2px dotted underline marking text that has a tooltip. */
347
- --co-semantic-border-width-thin: var(--co-base-border-width-1); /** 0.0625rem: default hairline borders and rings. */
348
- --co-semantic-border-width-thick: var(--co-base-border-width-2); /** 0.125rem: emphasised borders, focus outlines and selected states. */
349
- --co-semantic-border-focus-offset: var(--co-base-border-width-2); /** 0.125rem: magnitude of the gap between an element and its focus outline. Use it as outline-offset directly to draw the outline outside the element, or negated (calc(-1 * …)) to inset it, as TransactionListItem does. */
350
- --co-semantic-border-radius-xs: var(--co-base-border-radius-1); /** Minimal rounding - small badges, compact tags, inline buttons, checkboxes */
351
- --co-semantic-border-radius-sm: var(--co-base-border-radius-2); /** Subtle rounding - buttons, inputs, chips, form controls, list items */
352
- --co-semantic-border-radius-md: var(--co-base-border-radius-3); /** Standard rounding - cards, containers, dropdowns, popovers, menus */
353
- --co-semantic-border-radius-lg: var(--co-base-border-radius-4); /** Generous rounding - modals, action sheets, dialogs, feature cards, panels */
354
- --co-semantic-border-radius-xl: var(--co-base-border-radius-5); /** Large rounding - pills, pill buttons, prominent CTAs, search bars */
355
- --co-semantic-border-radius-2xl: var(--co-base-border-radius-6); /** Extra large rounding - hero elements, decorative containers, large pills */
356
- --co-semantic-border-radius-3xl: var(--co-base-border-radius-7); /** Maximum rounding - decorative elements, marketing components, large decorative cards */
357
- --co-semantic-border-radius-circle: var(--co-base-border-radius-circle); /** Fully circular - avatars, round icon buttons, status indicators, FABs */
358
- --co-semantic-size-touch-target: var(--co-base-size-11); /** 2.75rem (44px): minimum height of a tappable row or control. */
359
- --co-semantic-size-overlay-sm: var(--co-base-size-100); /** 25rem (400px): small overlay panel dimension: Modal small width, and the default Sheet width (left and right sheets) and height (top and bottom sheets). */
360
- --co-semantic-size-overlay-md: var(--co-base-size-140); /** 35rem (560px): medium overlay panel width (Modal medium). */
361
- --co-semantic-size-overlay-lg: var(--co-base-size-180); /** 45rem (720px): large overlay panel width (Modal large). */
362
- --co-semantic-size-label-small: var(--co-base-size-5); /** 20px label height: StatusLabel small and Tag small. Decision 0018 size scale. */
363
- --co-semantic-size-label-medium: var(--co-base-size-6); /** 24px label height: StatusLabel, Tag and CategoryLabel medium. Decision 0018 size scale. */
364
- --co-semantic-size-label-large: var(--co-base-size-8); /** 32px label height: CategoryLabel large. Decision 0018 size scale. */
365
- --co-semantic-size-menu-max-height: var(--co-base-size-75); /** 18.75rem (300px): maximum height of a floating menu before it scrolls (Dropdown, SearchField). */
366
- --co-semantic-size-dimension-1: var(--co-base-size-1); /** 0.25rem (4px): TabBar scrollbar height; small ProgressBar height (via component tokens). */
367
- --co-semantic-size-dimension-2: var(--co-base-size-2); /** 0.5rem (8px): medium ProgressBar height; Badge dot (via component tokens). Approved under decision 0022. */
368
- --co-semantic-size-dimension-4: var(--co-base-size-4); /** 1rem (16px): large ProgressBar height; Badge count minimum width and height (via component tokens). Approved under decision 0022. */
369
- --co-semantic-size-dimension-5: var(--co-base-size-5); /** 1.25rem (20px): checkbox box; TabBar count badge; extra-large ProgressBar height (via component tokens); small label height (via size.label.small). */
370
- --co-semantic-size-dimension-6: var(--co-base-size-6); /** 1.5rem (24px): medium label height (via size.label.medium). */
371
- --co-semantic-size-dimension-8: var(--co-base-size-8); /** 2rem (32px): checkbox row minimum height (via component tokens); large label height (via size.label.large). */
372
- --co-semantic-size-dimension-12: var(--co-base-size-12); /** 3rem (48px): AccountCard header minimum height; compact ListItem expanded indent (via component tokens). */
373
- --co-semantic-size-dimension-15: var(--co-base-size-15); /** 3.75rem (60px): comfortable ListItem expanded indent (via component tokens). */
374
- --co-semantic-size-dimension-18: var(--co-base-size-18); /** 4.5rem (72px): TransactionListItem minimum height (via component tokens). */
375
- --co-semantic-size-dimension-20: var(--co-base-size-20); /** 5rem (80px): small EmptyState illustration (via component tokens). */
376
- --co-semantic-size-dimension-30: var(--co-base-size-30); /** 7.5rem (120px): medium EmptyState illustration; TextArea minimum height (via component tokens). */
377
- --co-semantic-size-dimension-45: var(--co-base-size-45); /** 11.25rem (180px): Breadcrumbs label truncation width (via component tokens). */
378
- --co-semantic-size-dimension-50: var(--co-base-size-50); /** 12.5rem (200px): large EmptyState illustration (via component tokens). */
379
- --co-semantic-size-dimension-75: var(--co-base-size-75); /** 18.75rem (300px): AccountCard minimum width; EmptyState actions maximum width (via component tokens). */
380
- --co-semantic-size-dimension-90: var(--co-base-size-90); /** 22.5rem (360px): EmptyState text maximum width (via component tokens). */
381
- --co-semantic-size-dimension-100: var(--co-base-size-100); /** 25rem (400px): EmptyState maximum width (via component tokens). */
382
- --co-semantic-size-dimension-192: var(--co-base-size-192); /** 48rem (768px): CardLarge maximum width (via component tokens). */
383
- --co-semantic-size-icon-xs: var(--co-base-size-3); /** 0.75rem (12px): the smallest icon, for dense inline indicators. */
384
- --co-semantic-size-icon-sm: var(--co-base-size-4); /** 1rem (16px): small icons in compact controls, such as the dismiss icon in Alert and small icon buttons. */
385
- --co-semantic-size-icon-md: var(--co-base-size-5); /** 1.25rem (20px): icons beside body text, such as Alert's severity icon. */
386
- --co-semantic-size-icon-lg: var(--co-base-size-6); /** 1.5rem (24px): the Icon component's default size; also list item icons. */
387
- --co-semantic-size-icon-xl: var(--co-base-size-8); /** 2rem (32px): extra-large standalone icons. */
388
- --co-semantic-size-icon-2xl: var(--co-base-size-10); /** 2.5rem (40px): the largest icon size, for prominent standalone icons. */
389
- --co-semantic-size-avatar-xs: var(--co-base-size-6); /** 1.5rem (24px): extra-small avatar, inline with text. */
390
- --co-semantic-size-avatar-sm: var(--co-base-size-8); /** 2rem (32px): small avatar, in dense lists. */
391
- --co-semantic-size-avatar-md: var(--co-base-size-10); /** 2.5rem (40px): the default avatar size. */
392
- --co-semantic-size-avatar-lg: var(--co-base-size-12); /** 3rem (48px): large avatar, in headers and cards. */
393
- --co-semantic-size-avatar-xl: var(--co-base-size-16); /** 4rem (64px): extra-large avatar, on profile pages. */
394
- --co-semantic-spacing-separator-sm: var(--co-base-spacing-4); /** 1rem: space around a small Divider, above and below when horizontal, either side when vertical. */
395
- --co-semantic-spacing-separator-md: var(--co-base-spacing-6); /** 1.5rem: space around a medium or minimal Divider, above and below when horizontal, either side when vertical. */
396
- --co-semantic-spacing-separator-lg: var(--co-base-spacing-8); /** 2rem: space around a large (the default) Divider, above and below when horizontal, either side when vertical. */
397
- --co-semantic-spacing-separator-xl: var(--co-base-spacing-12); /** 3rem: space around an extra-large Divider, above and below when horizontal, either side when vertical. */
398
- --co-semantic-spacing-component-xs: var(--co-base-spacing-1); /** Extra-small component internal spacing (0.25rem / 4px). Use for tight gaps within compound elements, icon-to-label spacing in small chips. */
399
- --co-semantic-spacing-component-sm: var(--co-base-spacing-2); /** Small component internal spacing (0.5rem / 8px). Use for standard icon-to-label gaps, chip padding, compact button inner spacing. */
400
- --co-semantic-spacing-component-md: var(--co-base-spacing-3); /** Medium component internal spacing (0.75rem / 12px). Use for standard button vertical padding, form field inner padding. */
401
- --co-semantic-spacing-component-lg: var(--co-base-spacing-4); /** Large component internal spacing (1rem / 16px). Use for button horizontal padding, input horizontal padding, card inner spacing. */
402
- --co-semantic-spacing-component-xl: var(--co-base-spacing-5); /** Extra-large component internal spacing (1.25rem / 20px). Use for generous button padding, prominent CTAs. */
403
- --co-semantic-spacing-component-2xl: var(--co-base-spacing-6); /** 2x extra-large component internal spacing (1.5rem / 24px). Use for large card inner padding, spacious form sections. */
404
- --co-semantic-spacing-layout-none: var(--co-base-spacing-0); /** 0: no space, for explicit resets. */
405
- --co-semantic-spacing-layout-xs: var(--co-base-spacing-1); /** 0.25rem: the tightest gap, such as between a label and its required indicator. */
406
- --co-semantic-spacing-layout-sm: var(--co-base-spacing-2); /** 0.5rem: a small gap, such as between a field's label, control and helper text. */
407
- --co-semantic-spacing-layout-md: var(--co-base-spacing-3); /** 0.75rem: the default gap between related elements. */
408
- --co-semantic-spacing-layout-lg: var(--co-base-spacing-4); /** 1rem: space between groups of elements, and padding inside containers. */
409
- --co-semantic-spacing-layout-xl: var(--co-base-spacing-5); /** 1.25rem: generous padding inside larger containers. */
410
- --co-semantic-spacing-layout-2xl: var(--co-base-spacing-6); /** 1.5rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs. */
411
- --co-semantic-spacing-layout-3xl: var(--co-base-spacing-7); /** 1.75rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs. */
412
- --co-semantic-spacing-layout-4xl: var(--co-base-spacing-8); /** 2rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs. */
413
- --co-semantic-spacing-layout-5xl: var(--co-base-spacing-9); /** 2.25rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs. */
414
- --co-semantic-spacing-layout-6xl: var(--co-base-spacing-10); /** 2.5rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs. */
415
- --co-semantic-spacing-layout-7xl: var(--co-base-spacing-12); /** 3rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs. */
416
- --co-semantic-spacing-layout-8xl: var(--co-base-spacing-14); /** 3.5rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs. */
417
- --co-semantic-spacing-layout-9xl: var(--co-base-spacing-16); /** 4rem: a larger step on the layout spacing scale, for space between blocks and sections. Pick the step the layout needs. */
418
- --co-semantic-spacing-layout-10xl: var(--co-base-spacing-20); /** 5rem: a larger step on the layout spacing scale, for space between blocks and sections. Second-largest, after 11xl. */
419
- --co-semantic-spacing-layout-11xl: var(--co-base-spacing-24); /** 6rem: the largest layout gap (FeatureBlock at wide breakpoints). */
421
+ --co-semantic-border-subtle: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-subtle); /** Deprecated: Renamed to semantic.border.emphasis by the semantic grammar (decision 0031). Removed in 3.0. */
422
+ --co-semantic-border-strong: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-strong); /** Deprecated: Renamed to semantic.border.input-hover by the semantic grammar (decision 0031). Removed in 3.0. */
423
+ --co-semantic-border-focus: var(--co-base-border-width-2) var(--co-base-border-style-solid) var(--co-semantic-color-border-focus); /** The focus ring every component draws, with border.focusOffset; never blue (decision 0029). */
424
+ --co-semantic-border-tooltip: var(--co-base-border-width-2) var(--co-base-border-style-dotted) var(--co-semantic-color-border-emphasis); /** Deprecated: Moved to the component tier as component.tooltip.border (decision 0031 §6). Removed in 3.0. */
425
+ --co-semantic-border-width-thin: var(--co-base-border-width-1); /** Hairline border: dividers, control edges and rings. */
426
+ --co-semantic-border-width-thick: var(--co-base-border-width-2); /** Thick border: focus rings, emphasised outlines and selected states. */
427
+ --co-semantic-border-focus-offset: var(--co-base-border-width-2); /** Gap between an element and its focus ring; negate it to inset the ring inside the element. */
428
+ --co-semantic-border-radius-xs: var(--co-base-border-radius-1); /** Deprecated: Renamed to semantic.radius.xs by the semantic grammar (decision 0031). Removed in 3.0. */
429
+ --co-semantic-border-radius-sm: var(--co-base-border-radius-2); /** Deprecated: Renamed to semantic.radius.sm by the semantic grammar (decision 0031). Removed in 3.0. */
430
+ --co-semantic-border-radius-md: var(--co-base-border-radius-3); /** Deprecated: Renamed to semantic.radius.md by the semantic grammar (decision 0031). Removed in 3.0. */
431
+ --co-semantic-border-radius-lg: var(--co-base-border-radius-4); /** Deprecated: Renamed to semantic.radius.lg by the semantic grammar (decision 0031). Removed in 3.0. */
432
+ --co-semantic-border-radius-xl: var(--co-base-border-radius-5); /** Deprecated: Renamed to semantic.radius.xl by the semantic grammar (decision 0031). Removed in 3.0. */
433
+ --co-semantic-border-radius-2xl: var(--co-base-border-radius-6); /** Deprecated: Renamed to semantic.radius.2xl by the semantic grammar (decision 0031). Removed in 3.0. */
434
+ --co-semantic-border-radius-3xl: var(--co-base-border-radius-7); /** Deprecated: Renamed to semantic.radius.3xl by the semantic grammar (decision 0031). Removed in 3.0. */
435
+ --co-semantic-border-radius-circle: var(--co-base-border-radius-circle); /** Deprecated: Renamed to semantic.radius.full by the semantic grammar (decision 0031). Removed in 3.0. */
436
+ --co-semantic-border-emphasis: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-emphasis); /** Hairline for dividers and decorative outlines, such as CodeBlock and Divider; never a control edge. */
437
+ --co-semantic-border-input-hover: var(--co-base-border-width-1) var(--co-base-border-style-solid) var(--co-semantic-color-border-input-hover); /** Firm hairline that must read as a boundary, such as a hovered text input. */
438
+ --co-semantic-size-100: var(--co-base-dimension-1); /** Size step for thin bars: the TabBar scrollbar, the small ProgressBar. */
439
+ --co-semantic-size-200: var(--co-base-dimension-2); /** Size step for small marks: the Badge dot, the medium ProgressBar. */
440
+ --co-semantic-size-400: var(--co-base-dimension-4); /** Size step for compact indicators: the Badge count, the large ProgressBar. */
441
+ --co-semantic-size-500: var(--co-base-dimension-5); /** Size step for small boxes: the Checkbox box, TabBar count badges, small labels. */
442
+ --co-semantic-size-600: var(--co-base-dimension-6); /** Size step for the medium label height, used by chips and StatusLabel. */
443
+ --co-semantic-size-800: var(--co-base-dimension-8); /** Size step for compact rows and large labels, such as the Checkbox row. */
444
+ --co-semantic-size-1200: var(--co-base-dimension-12); /** Size step for headers and indents, such as the AccountCard header. */
445
+ --co-semantic-size-1500: var(--co-base-dimension-15); /** Size step for the comfortable ListItem expanded indent. */
446
+ --co-semantic-size-1800: var(--co-base-dimension-18); /** Size step for tall rows, such as the TransactionListItem minimum height. */
447
+ --co-semantic-size-2000: var(--co-base-dimension-20); /** Size step for small illustrations, such as the small EmptyState image. */
448
+ --co-semantic-size-3000: var(--co-base-dimension-30); /** Size step for medium illustrations and multi-line inputs: EmptyState, TextArea. */
449
+ --co-semantic-size-4500: var(--co-base-dimension-45); /** Size step for truncation widths, such as a Breadcrumbs label. */
450
+ --co-semantic-size-5000: var(--co-base-dimension-50); /** Size step for large illustrations, such as the large EmptyState image. */
451
+ --co-semantic-size-7500: var(--co-base-dimension-75); /** Size step for narrow column widths: AccountCard, EmptyState actions. */
452
+ --co-semantic-size-9000: var(--co-base-dimension-90); /** Size step for readable text widths, such as EmptyState copy. */
453
+ --co-semantic-size-10000: var(--co-base-dimension-100); /** Size step for compact panel widths, such as the EmptyState block. */
454
+ --co-semantic-size-19200: var(--co-base-dimension-192); /** Size step for wide content columns, such as CardLarge. */
455
+ --co-semantic-size-pointer-target: var(--co-base-dimension-6); /** Minimum pointer target for a control that's smaller to look at: its invisible hit area (WCAG 2.5.8, decision 0039). On touch screens, use touchTarget. */
456
+ --co-semantic-size-touch-target: var(--co-base-dimension-11); /** Minimum height of a tappable row or control on touch screens. */
457
+ --co-semantic-size-control-sm: var(--co-base-dimension-8); /** Minimum height of small controls: small Buttons and IconButtons, buttons inside fields (decision 0034). */
458
+ --co-semantic-size-control-md: var(--co-base-dimension-10); /** Minimum height of medium controls: the default IconButton, medium Buttons (decision 0034). */
459
+ --co-semantic-size-control-lg: var(--co-base-dimension-12); /** Minimum height of large controls: text fields, Dropdown, SearchField, the default Button (decision 0034). */
460
+ --co-semantic-size-overlay-sm: var(--co-base-dimension-100); /** Width of a small Modal, and the default width or height of a Sheet. */
461
+ --co-semantic-size-overlay-md: var(--co-base-dimension-140); /** Width of a medium overlay panel, such as a medium Modal. */
462
+ --co-semantic-size-overlay-lg: var(--co-base-dimension-180); /** Width of a large overlay panel, such as a large Modal. */
463
+ --co-semantic-size-label-small: var(--co-base-dimension-5); /** Height of a small label: StatusLabel small and Tag small (decision 0018). */
464
+ --co-semantic-size-label-medium: var(--co-base-dimension-6); /** Height of a medium label and every chip: StatusLabel, Tag, CategoryLabel (0018, 0035). */
465
+ --co-semantic-size-label-large: var(--co-base-dimension-8); /** Height of a large label: CategoryLabel large (decision 0018). */
466
+ --co-semantic-size-menu-max-height: var(--co-base-dimension-75); /** Tallest a floating menu grows before it scrolls: Dropdown, SearchField. */
467
+ --co-semantic-size-dimension-1: var(--co-base-dimension-1); /** Deprecated: Renamed to semantic.size.100 by the semantic grammar (decision 0031). Removed in 3.0. */
468
+ --co-semantic-size-dimension-2: var(--co-base-dimension-2); /** Deprecated: Renamed to semantic.size.200 by the semantic grammar (decision 0031). Removed in 3.0. */
469
+ --co-semantic-size-dimension-4: var(--co-base-dimension-4); /** Deprecated: Renamed to semantic.size.400 by the semantic grammar (decision 0031). Removed in 3.0. */
470
+ --co-semantic-size-dimension-5: var(--co-base-dimension-5); /** Deprecated: Renamed to semantic.size.500 by the semantic grammar (decision 0031). Removed in 3.0. */
471
+ --co-semantic-size-dimension-6: var(--co-base-dimension-6); /** Deprecated: Renamed to semantic.size.600 by the semantic grammar (decision 0031). Removed in 3.0. */
472
+ --co-semantic-size-dimension-8: var(--co-base-dimension-8); /** Deprecated: Renamed to semantic.size.800 by the semantic grammar (decision 0031). Removed in 3.0. */
473
+ --co-semantic-size-dimension-12: var(--co-base-dimension-12); /** Deprecated: Renamed to semantic.size.1200 by the semantic grammar (decision 0031). Removed in 3.0. */
474
+ --co-semantic-size-dimension-15: var(--co-base-dimension-15); /** Deprecated: Renamed to semantic.size.1500 by the semantic grammar (decision 0031). Removed in 3.0. */
475
+ --co-semantic-size-dimension-18: var(--co-base-dimension-18); /** Deprecated: Renamed to semantic.size.1800 by the semantic grammar (decision 0031). Removed in 3.0. */
476
+ --co-semantic-size-dimension-20: var(--co-base-dimension-20); /** Deprecated: Renamed to semantic.size.2000 by the semantic grammar (decision 0031). Removed in 3.0. */
477
+ --co-semantic-size-dimension-30: var(--co-base-dimension-30); /** Deprecated: Renamed to semantic.size.3000 by the semantic grammar (decision 0031). Removed in 3.0. */
478
+ --co-semantic-size-dimension-45: var(--co-base-dimension-45); /** Deprecated: Renamed to semantic.size.4500 by the semantic grammar (decision 0031). Removed in 3.0. */
479
+ --co-semantic-size-dimension-50: var(--co-base-dimension-50); /** Deprecated: Renamed to semantic.size.5000 by the semantic grammar (decision 0031). Removed in 3.0. */
480
+ --co-semantic-size-dimension-75: var(--co-base-dimension-75); /** Deprecated: Renamed to semantic.size.7500 by the semantic grammar (decision 0031). Removed in 3.0. */
481
+ --co-semantic-size-dimension-90: var(--co-base-dimension-90); /** Deprecated: Renamed to semantic.size.9000 by the semantic grammar (decision 0031). Removed in 3.0. */
482
+ --co-semantic-size-dimension-100: var(--co-base-dimension-100); /** Deprecated: Renamed to semantic.size.10000 by the semantic grammar (decision 0031). Removed in 3.0. */
483
+ --co-semantic-size-dimension-192: var(--co-base-dimension-192); /** Deprecated: Renamed to semantic.size.19200 by the semantic grammar (decision 0031). Removed in 3.0. */
484
+ --co-semantic-size-icon-xs: var(--co-base-dimension-3); /** The smallest icon size, for dense inline indicators. */
485
+ --co-semantic-size-icon-sm: var(--co-base-dimension-4); /** Icons in compact controls, such as Alert's dismiss icon and small icon buttons. */
486
+ --co-semantic-size-icon-md: var(--co-base-dimension-5); /** Icons beside body text, such as Alert's severity icon. */
487
+ --co-semantic-size-icon-lg: var(--co-base-dimension-6); /** The Icon component's default size; also list item icons. */
488
+ --co-semantic-size-icon-xl: var(--co-base-dimension-8); /** Extra-large standalone icons, such as feature illustrations. */
489
+ --co-semantic-size-icon-2xl: var(--co-base-dimension-10); /** The largest icon size, for prominent standalone icons. */
490
+ --co-semantic-size-avatar-xs: var(--co-base-dimension-6); /** Extra-small avatar, inline with text. */
491
+ --co-semantic-size-avatar-sm: var(--co-base-dimension-8); /** Small avatar, in dense lists and tables. */
492
+ --co-semantic-size-avatar-md: var(--co-base-dimension-10); /** Medium avatar, the default size. */
493
+ --co-semantic-size-avatar-lg: var(--co-base-dimension-12); /** Large avatar, in headers and cards. */
494
+ --co-semantic-size-avatar-xl: var(--co-base-dimension-16); /** Extra-large avatar, on profile pages. */
495
+ --co-semantic-spacing-separator-sm: var(--co-base-dimension-4); /** Deprecated: Renamed to semantic.space.400 by the semantic grammar (decision 0031). Removed in 3.0. */
496
+ --co-semantic-spacing-separator-md: var(--co-base-dimension-6); /** Deprecated: Renamed to semantic.space.600 by the semantic grammar (decision 0031). Removed in 3.0. */
497
+ --co-semantic-spacing-separator-lg: var(--co-base-dimension-8); /** Deprecated: Renamed to semantic.space.800 by the semantic grammar (decision 0031). Removed in 3.0. */
498
+ --co-semantic-spacing-separator-xl: var(--co-base-dimension-12); /** Deprecated: Renamed to semantic.space.1200 by the semantic grammar (decision 0031). Removed in 3.0. */
499
+ --co-semantic-spacing-component-xs: var(--co-base-dimension-1); /** Deprecated: Renamed to semantic.space.inset.xs by the semantic grammar (decision 0031). Removed in 3.0. */
500
+ --co-semantic-spacing-component-sm: var(--co-base-dimension-2); /** Deprecated: Renamed to semantic.space.inset.sm by the semantic grammar (decision 0031). Removed in 3.0. */
501
+ --co-semantic-spacing-component-md: var(--co-base-dimension-3); /** Deprecated: Renamed to semantic.space.inset.md by the semantic grammar (decision 0031). Removed in 3.0. */
502
+ --co-semantic-spacing-component-lg: var(--co-base-dimension-4); /** Deprecated: Renamed to semantic.space.inset.lg by the semantic grammar (decision 0031). Removed in 3.0. */
503
+ --co-semantic-spacing-component-xl: var(--co-base-dimension-5); /** Deprecated: Renamed to semantic.space.inset.xl by the semantic grammar (decision 0031). Removed in 3.0. */
504
+ --co-semantic-spacing-component-2xl: var(--co-base-dimension-6); /** Deprecated: Renamed to semantic.space.inset.2xl by the semantic grammar (decision 0031). Removed in 3.0. */
505
+ --co-semantic-spacing-layout-none: var(--co-base-dimension-0); /** Deprecated: Renamed to semantic.space.0 by the semantic grammar (decision 0031). Removed in 3.0. */
506
+ --co-semantic-spacing-layout-xs: var(--co-base-dimension-1); /** Deprecated: Renamed to semantic.space.100 by the semantic grammar (decision 0031). Removed in 3.0. */
507
+ --co-semantic-spacing-layout-sm: var(--co-base-dimension-2); /** Deprecated: Renamed to semantic.space.200 by the semantic grammar (decision 0031). Removed in 3.0. */
508
+ --co-semantic-spacing-layout-md: var(--co-base-dimension-3); /** Deprecated: Renamed to semantic.space.300 by the semantic grammar (decision 0031). Removed in 3.0. */
509
+ --co-semantic-spacing-layout-lg: var(--co-base-dimension-4); /** Deprecated: Renamed to semantic.space.400 by the semantic grammar (decision 0031). Removed in 3.0. */
510
+ --co-semantic-spacing-layout-xl: var(--co-base-dimension-5); /** Deprecated: Renamed to semantic.space.500 by the semantic grammar (decision 0031). Removed in 3.0. */
511
+ --co-semantic-spacing-layout-2xl: var(--co-base-dimension-6); /** Deprecated: Renamed to semantic.space.600 by the semantic grammar (decision 0031). Removed in 3.0. */
512
+ --co-semantic-spacing-layout-3xl: var(--co-base-dimension-7); /** Deprecated: Renamed to semantic.space.700 by the semantic grammar (decision 0031). Removed in 3.0. */
513
+ --co-semantic-spacing-layout-4xl: var(--co-base-dimension-8); /** Deprecated: Renamed to semantic.space.800 by the semantic grammar (decision 0031). Removed in 3.0. */
514
+ --co-semantic-spacing-layout-5xl: var(--co-base-dimension-9); /** Deprecated: Renamed to semantic.space.900 by the semantic grammar (decision 0031). Removed in 3.0. */
515
+ --co-semantic-spacing-layout-6xl: var(--co-base-dimension-10); /** Deprecated: Renamed to semantic.space.1000 by the semantic grammar (decision 0031). Removed in 3.0. */
516
+ --co-semantic-spacing-layout-7xl: var(--co-base-dimension-12); /** Deprecated: Renamed to semantic.space.1200 by the semantic grammar (decision 0031). Removed in 3.0. */
517
+ --co-semantic-spacing-layout-8xl: var(--co-base-dimension-14); /** Deprecated: Renamed to semantic.space.1400 by the semantic grammar (decision 0031). Removed in 3.0. */
518
+ --co-semantic-spacing-layout-9xl: var(--co-base-dimension-16); /** Deprecated: Renamed to semantic.space.1600 by the semantic grammar (decision 0031). Removed in 3.0. */
519
+ --co-semantic-spacing-layout-10xl: var(--co-base-dimension-20); /** Deprecated: Renamed to semantic.space.2000 by the semantic grammar (decision 0031). Removed in 3.0. */
520
+ --co-semantic-spacing-layout-11xl: var(--co-base-dimension-24); /** Deprecated: Renamed to semantic.space.2400 by the semantic grammar (decision 0031). Removed in 3.0. */
420
521
  --co-semantic-spacing-layout-auto: var(--co-base-spacing-auto); /** auto: lets the browser compute the space, such as margin: auto to centre or push an element. */
421
522
  --co-semantic-color-text-default: var(--co-base-color-neutral-900); /** Primary text: body copy, labels and headings. 15.43:1 on white, 14.63:1 on the page. */
422
- --co-semantic-color-text-emphasis: var(--co-base-color-neutral-800); /** Slightly softer near-black text for emphasis without full weight. 11.51:1 on white. */
423
- --co-semantic-color-text-subdued: var(--co-base-color-neutral-700); /** Secondary text: helper text, metadata and supporting copy. 8.18:1 on white, 7.76:1 on the page. */
523
+ --co-semantic-color-text-emphasis: var(--co-base-color-neutral-1000); /** Emphasised text: one step darker than text.default, so it reads stronger (decision 0029). 17.65:1 on white. */
524
+ --co-semantic-color-text-subdued: var(--co-base-color-neutral-700); /** Deprecated: Renamed to semantic.color.text.muted by the semantic grammar (decision 0031). Removed in 3.0. */
424
525
  --co-semantic-color-text-inverse: var(--co-base-color-neutral-000); /** Text on dark or coloured fills, such as the primary, accent and danger Buttons. 15.43:1 on background.emphasis, 5.39:1 on background.interactive. */
425
526
  --co-semantic-color-text-disabled: var(--co-base-color-neutral-500); /** Text of disabled controls. 2.07:1 on white: disabled text is exempt from the contrast minimum (WCAG 1.4.3), so never use it for text people need to read, including placeholders. */
426
- --co-semantic-color-text-interactive: var(--co-base-color-blue-900); /** Blue text for links and selected items (decision 0003). 5.39:1 on white, 5.11:1 on the page. */
427
- --co-semantic-color-text-interactive-hover: var(--co-base-color-blue-1000); /** Blue text on a hovered selected item (interactive-subtle-hover fill, 5.60:1). Decision 0016. */
428
- --co-semantic-color-text-interactive-active: var(--co-base-color-blue-1100); /** Blue text on a pressed selected item (interactive-subtle-active fill, 6.65:1). Decision 0016. */
429
- --co-semantic-color-text-error: var(--co-base-color-red-900); /** Error text, such as field error messages and InlineAlert errors. 5.41:1 on white, 5.13:1 on the page. */
527
+ --co-semantic-color-text-interactive: var(--co-base-color-blue-900); /** Deprecated: Renamed to semantic.color.text.accent by the semantic grammar (decision 0031). Removed in 3.0. */
528
+ --co-semantic-color-text-interactive-hover: var(--co-base-color-blue-1000); /** Deprecated: Renamed to semantic.color.text.accent-hover by the semantic grammar (decision 0031). Removed in 3.0. */
529
+ --co-semantic-color-text-interactive-active: var(--co-base-color-blue-1100); /** Deprecated: Renamed to semantic.color.text.accent-pressed by the semantic grammar (decision 0031). Removed in 3.0. */
530
+ --co-semantic-color-text-error: var(--co-base-color-red-900); /** Deprecated: Renamed to semantic.color.text.danger by the semantic grammar (decision 0031). Removed in 3.0. */
430
531
  --co-semantic-color-text-success: var(--co-base-color-green-900); /** Success text, such as InlineAlert success messages. 5.40:1 on white, 5.12:1 on the page. */
431
532
  --co-semantic-color-text-warning: var(--co-base-color-orange-900); /** Warning text, such as InlineAlert warnings. 5.38:1 on white, 5.10:1 on the page. */
432
- --co-semantic-color-background-default: var(--co-base-color-neutral-100); /** Page background: a cool off-white (#f8f9fa), never pure white (decision 0006). */
433
- --co-semantic-color-background-subtle: var(--co-base-color-neutral-000); /** White: inputs, sheets and other surfaces that sit on the page background. */
434
- --co-semantic-color-background-emphasis: var(--co-base-color-neutral-900); /** Near-black fill for emphasis controls: the primary Button, IconButton and the emphasis Chip. */
435
- --co-semantic-color-background-emphasis-hover: var(--co-base-color-neutral-800); /** Fill of a hovered emphasis control: the primary Button and IconButton, and the emphasis Chip. Approved under decision 0022. */
436
- --co-semantic-color-background-emphasis-active: var(--co-base-color-neutral-1000); /** Fill of a pressed emphasis control. Approved under decision 0022. */
437
- --co-semantic-color-background-surface: var(--co-base-color-neutral-200); /** Light grey fill for quiet surfaces and grouped content, such as the default Chip. */
438
- --co-semantic-color-background-inverse: var(--co-base-color-neutral-800); /** Dark grey fill for inverse surfaces, such as a checked Checkbox box. */
439
- --co-semantic-color-background-interactive: var(--co-base-color-blue-900); /** Blue fill for the accent Button and other deliberate highlights (decision 0003). Pair with text.inverse (5.39:1). */
440
- --co-semantic-color-background-interactive-subtle: var(--co-base-color-blue-100); /** Light blue fill for selected items, such as a selected filter chip or tab (decision 0016). Pair with text.interactive. */
441
- --co-semantic-color-background-interactive-subtle-hover: var(--co-base-color-blue-200); /** Fill of a hovered selected item, such as a selected filter chip. Pair with text.interactive-hover. Decision 0016. */
442
- --co-semantic-color-background-interactive-subtle-active: var(--co-base-color-blue-300); /** Fill of a pressed selected item. Pair with text.interactive-active. Decision 0016. */
443
- --co-semantic-color-background-interactive-hover: var(--co-base-color-blue-1000); /** Blue fill on hover, for controls that use background.interactive. */
444
- --co-semantic-color-background-interactive-active: var(--co-base-color-blue-1100); /** Blue fill while pressed, for controls that use background.interactive. */
445
- --co-semantic-color-background-error: var(--co-base-color-red-900); /** Strong red fill for destructive actions, such as the danger Button. Pair with text.inverse (5.41:1). */
446
- --co-semantic-color-background-error-hover: var(--co-base-color-red-1000); /** Fill of a hovered error control, such as the danger Button. Approved under decision 0022. */
447
- --co-semantic-color-background-error-active: var(--co-base-color-red-1100); /** Fill of a pressed error control. Approved under decision 0022. */
448
- --co-semantic-color-background-error-subtle: var(--co-base-color-red-100); /** Light red tint behind error messages, such as an error Alert. */
449
- --co-semantic-color-background-success: var(--co-base-color-green-900); /** Strong green fill for success states. */
450
- --co-semantic-color-background-success-subtle: var(--co-base-color-green-100); /** Light green tint behind success messages, such as a success Alert. */
451
- --co-semantic-color-background-warning: var(--co-base-color-orange-900); /** Strong orange fill for warning states. */
452
- --co-semantic-color-background-warning-subtle: var(--co-base-color-orange-100); /** Light orange tint behind warning messages, such as a warning Alert. */
453
- --co-semantic-color-background-disabled: var(--co-base-color-neutral-300); /** Fill of disabled controls. */
454
- --co-semantic-color-background-neutral: var(--co-base-color-neutral-300); /** Fill of a neutral control at rest, such as the secondary Button. Not the disabled fill, though the value matches today. Approved under decision 0022. */
455
- --co-semantic-color-background-neutral-hover: var(--co-base-color-neutral-400); /** Fill of a hovered neutral control. Approved under decision 0022. */
456
- --co-semantic-color-background-neutral-active: var(--co-base-color-neutral-500); /** Fill of a pressed neutral control. Approved under decision 0022. */
457
- --co-semantic-color-background-transparent: var(--co-base-color-transparent); /** No fill, for controls without a background at rest, such as the naked Button and IconButton. Approved under decision 0022. */
458
- --co-semantic-color-background-progress-track: var(--co-base-color-neutral-300); /** Unfilled track of ProgressBar and Slider. 1.30:1 on white: the filled part and the thumb show the value, so the track doesn't need 3:1 (decision 0026). */
459
- --co-semantic-color-background-page: var(--co-base-color-neutral-100); /** The same cool off-white as background.default (#f8f9fa). Decision 0006 makes background.default the page background token, so use that. */
533
+ --co-semantic-color-text-muted: var(--co-base-color-neutral-700); /** Secondary text: helper text, metadata, timestamps. */
534
+ --co-semantic-color-text-accent: var(--co-base-color-blue-900); /** Blue text for links and selected items; never decoration, see 0003. */
535
+ --co-semantic-color-text-accent-hover: var(--co-base-color-blue-1000); /** Text of a hovered selected item, on the accent-muted-hover fill. */
536
+ --co-semantic-color-text-accent-pressed: var(--co-base-color-blue-1100); /** Text of a pressed selected item, on the accent-muted-pressed fill. */
537
+ --co-semantic-color-text-danger: var(--co-base-color-red-900); /** Error text: field error messages, InlineAlert errors. */
538
+ --co-semantic-color-background-default: var(--co-base-color-neutral-100); /** Deprecated: Renamed to semantic.surface.base by the semantic grammar (decision 0031). Removed in 3.0. */
539
+ --co-semantic-color-background-subtle: var(--co-base-color-neutral-000); /** Deprecated: Split by use (decision 0031): semantic.surface.raised for surfaces such as cards, inputs and sheets; component.slider.thumb.background for Slider's thumb. Removed in 3.0. */
540
+ --co-semantic-color-background-emphasis: var(--co-base-color-neutral-900); /** Deprecated: Renamed to semantic.color.fill.emphasis by the semantic grammar (decision 0031). Removed in 3.0. */
541
+ --co-semantic-color-background-emphasis-hover: var(--co-base-color-neutral-800); /** Deprecated: Renamed to semantic.color.fill.emphasis-hover by the semantic grammar (decision 0031). Removed in 3.0. */
542
+ --co-semantic-color-background-emphasis-active: var(--co-base-color-neutral-1000); /** Deprecated: Renamed to semantic.color.fill.emphasis-pressed by the semantic grammar (decision 0031). Removed in 3.0. */
543
+ --co-semantic-color-background-surface: var(--co-base-color-neutral-200); /** Deprecated: Renamed to semantic.color.fill.muted by the semantic grammar (decision 0031). Removed in 3.0. */
544
+ --co-semantic-color-background-inverse: var(--co-base-color-neutral-800); /** Deprecated: Renamed to semantic.color.fill.inverse by the semantic grammar (decision 0031). Removed in 3.0. */
545
+ --co-semantic-color-background-interactive: var(--co-base-color-blue-900); /** Deprecated: Renamed to semantic.color.fill.accent by the semantic grammar (decision 0031). Removed in 3.0. */
546
+ --co-semantic-color-background-interactive-subtle: var(--co-base-color-blue-100); /** Deprecated: Renamed to semantic.color.fill.accent-muted by the semantic grammar (decision 0031). Removed in 3.0. */
547
+ --co-semantic-color-background-interactive-subtle-hover: var(--co-base-color-blue-200); /** Deprecated: Renamed to semantic.color.fill.accent-muted-hover by the semantic grammar (decision 0031). Removed in 3.0. */
548
+ --co-semantic-color-background-interactive-subtle-active: var(--co-base-color-blue-300); /** Deprecated: Renamed to semantic.color.fill.accent-muted-pressed by the semantic grammar (decision 0031). Removed in 3.0. */
549
+ --co-semantic-color-background-interactive-hover: var(--co-base-color-blue-1000); /** Deprecated: Renamed to semantic.color.fill.accent-hover by the semantic grammar (decision 0031). Removed in 3.0. */
550
+ --co-semantic-color-background-interactive-active: var(--co-base-color-blue-1100); /** Deprecated: Renamed to semantic.color.fill.accent-pressed by the semantic grammar (decision 0031). Removed in 3.0. */
551
+ --co-semantic-color-background-error: var(--co-base-color-red-900); /** Deprecated: Renamed to semantic.color.fill.danger by the semantic grammar (decision 0031). Removed in 3.0. */
552
+ --co-semantic-color-background-error-hover: var(--co-base-color-red-1000); /** Deprecated: Renamed to semantic.color.fill.danger-hover by the semantic grammar (decision 0031). Removed in 3.0. */
553
+ --co-semantic-color-background-error-active: var(--co-base-color-red-1100); /** Deprecated: Renamed to semantic.color.fill.danger-pressed by the semantic grammar (decision 0031). Removed in 3.0. */
554
+ --co-semantic-color-background-error-subtle: var(--co-base-color-red-100); /** Deprecated: Renamed to semantic.color.fill.danger-muted by the semantic grammar (decision 0031). Removed in 3.0. */
555
+ --co-semantic-color-background-success: var(--co-base-color-green-900); /** Deprecated: Renamed to semantic.color.fill.success by the semantic grammar (decision 0031). Removed in 3.0. */
556
+ --co-semantic-color-background-success-subtle: var(--co-base-color-green-100); /** Deprecated: Renamed to semantic.color.fill.success-muted by the semantic grammar (decision 0031). Removed in 3.0. */
557
+ --co-semantic-color-background-warning: var(--co-base-color-orange-900); /** Deprecated: Renamed to semantic.color.fill.warning by the semantic grammar (decision 0031). Removed in 3.0. */
558
+ --co-semantic-color-background-warning-subtle: var(--co-base-color-orange-100); /** Deprecated: Renamed to semantic.color.fill.warning-muted by the semantic grammar (decision 0031). Removed in 3.0. */
559
+ --co-semantic-color-background-disabled: var(--co-base-color-neutral-300); /** Deprecated: Renamed to semantic.color.fill.disabled by the semantic grammar (decision 0031). Removed in 3.0. */
560
+ --co-semantic-color-background-neutral: var(--co-base-color-neutral-300); /** Deprecated: Renamed to semantic.color.fill.default by the semantic grammar (decision 0031). Removed in 3.0. */
561
+ --co-semantic-color-background-neutral-hover: var(--co-base-color-neutral-400); /** Deprecated: Renamed to semantic.color.fill.default-hover by the semantic grammar (decision 0031). Removed in 3.0. */
562
+ --co-semantic-color-background-neutral-active: var(--co-base-color-neutral-500); /** Deprecated: Renamed to semantic.color.fill.default-pressed by the semantic grammar (decision 0031). Removed in 3.0. */
563
+ --co-semantic-color-background-transparent: var(--co-base-color-transparent); /** Deprecated: Renamed to semantic.color.fill.none by the semantic grammar (decision 0031). Removed in 3.0. */
564
+ --co-semantic-color-background-progress-track: var(--co-base-color-neutral-300); /** Deprecated: Moved to the component tier as component.track.background (decision 0031 §6). Removed in 3.0. */
565
+ --co-semantic-color-background-page: var(--co-base-color-neutral-100); /** Deprecated: Renamed to semantic.surface.base by the semantic grammar (decision 0031). Removed in 3.0. */
460
566
  --co-semantic-color-border-default: var(--co-base-color-neutral-200); /** Default border colour for dividers and decorative outlines only. 1.19:1 on white, below the 3:1 a control's edge needs (WCAG 1.4.11); use color.border.control for that (decision 0025). */
461
- --co-semantic-color-border-subtle: var(--co-base-color-neutral-300); /** Subtle border colour for dividers and decorative outlines, and for the borders of disabled controls, which WCAG 1.4.11 exempts. 1.30:1 on white, below the 3:1 a control's edge needs; use color.border.control for that (decision 0025). */
462
- --co-semantic-color-border-control: var(--co-base-color-neutral-600); /** Resting border of a control whose edge shows where it is, such as a text input, Dropdown or the Checkbox box. 4.69:1 on white, 4.45:1 on the page, above the 3:1 WCAG 1.4.11 asks for (decision 0025). */
463
- --co-semantic-color-border-strong: var(--co-base-color-neutral-800); /** Near-black border colour for firm boundaries, such as a hovered or focused input. 11.51:1 on white. */
464
- --co-semantic-color-border-interactive: var(--co-base-color-blue-900); /** Blue border for selected and interactive states (decision 0003). 5.39:1 on white. */
465
- --co-semantic-color-border-error: var(--co-base-color-red-900); /** Red border for invalid fields and error outlines. 5.41:1 on white. */
567
+ --co-semantic-color-border-subtle: var(--co-base-color-neutral-300); /** Deprecated: Renamed to semantic.color.border.emphasis by the semantic grammar (decision 0031). Removed in 3.0. */
568
+ --co-semantic-color-border-control: var(--co-base-color-neutral-600); /** Deprecated: Renamed to semantic.color.border.input by the semantic grammar (decision 0031). Removed in 3.0. */
569
+ --co-semantic-color-border-strong: var(--co-base-color-neutral-800); /** Deprecated: Split by use (decision 0031): semantic.color.border.input-hover for a hovered control, semantic.color.border.focus for the focus ring and CardSmall's ring, semantic.color.fill.inverse for drag handles. Removed in 3.0. */
570
+ --co-semantic-color-border-interactive: var(--co-base-color-blue-900); /** Deprecated: Renamed to semantic.color.border.accent by the semantic grammar (decision 0031). Removed in 3.0. */
571
+ --co-semantic-color-border-error: var(--co-base-color-red-900); /** Deprecated: Renamed to semantic.color.border.danger by the semantic grammar (decision 0031). Removed in 3.0. */
466
572
  --co-semantic-color-border-success: var(--co-base-color-green-900); /** Green border for success outlines, such as an outlined success Alert. */
467
573
  --co-semantic-color-border-warning: var(--co-base-color-orange-900); /** Orange border for warning outlines, such as an outlined warning Alert. */
468
574
  --co-semantic-color-border-none: var(--co-base-color-transparent); /** An invisible border that keeps its width, so a borderless state takes the same space as a bordered one (for example Alert's borderless appearance, decision 0019). */
575
+ --co-semantic-color-border-emphasis: var(--co-base-color-neutral-300); /** Border for dividers, decorative outlines and disabled controls; never a resting control edge. */
576
+ --co-semantic-color-border-input: var(--co-base-color-neutral-600); /** Resting edge of a control that must show where it is: text inputs, Dropdown, Checkbox. */
577
+ --co-semantic-color-border-input-hover: var(--co-base-color-neutral-800); /** Edge of a hovered control, such as a hovered text input or Dropdown. */
578
+ --co-semantic-color-border-focus: var(--co-base-color-neutral-800); /** The focus ring, and rings that mark the current item, such as on CardSmall (0029). */
579
+ --co-semantic-color-border-accent: var(--co-base-color-blue-900); /** Blue border for selected items; never decoration, see 0003. */
580
+ --co-semantic-color-border-danger: var(--co-base-color-red-900); /** Border of an invalid field and other error outlines. */
469
581
  --co-semantic-color-icon-default: var(--co-base-color-neutral-900); /** Default icon colour, matching text.default. 15.43:1 on white. */
470
- --co-semantic-color-icon-emphasis: var(--co-base-color-neutral-800); /** Slightly softer near-black icon colour, matching text.emphasis. */
471
- --co-semantic-color-icon-subdued: var(--co-base-color-neutral-600); /** Secondary icons, such as list item and empty-state icons. 4.69:1 on white, 4.45:1 on the page (icons need 3:1). */
582
+ --co-semantic-color-icon-emphasis: var(--co-base-color-neutral-1000); /** Emphasised icons, matching text.emphasis: one step darker than icon.default (decision 0029). */
583
+ --co-semantic-color-icon-subdued: var(--co-base-color-neutral-600); /** Deprecated: Renamed to semantic.color.icon.muted by the semantic grammar (decision 0031). Removed in 3.0. */
472
584
  --co-semantic-color-icon-disabled: var(--co-base-color-neutral-500); /** Icons and other foreground marks in disabled controls, such as a disabled Slider's fill and thumb ring. Exempt from the contrast minimum, like text.disabled. */
473
585
  --co-semantic-color-icon-inverse: var(--co-base-color-neutral-000); /** Icons on dark or coloured fills, matching text.inverse. */
474
- --co-semantic-color-icon-interactive: var(--co-base-color-blue-900); /** Blue icons in links and selected items, matching text.interactive. 5.39:1 on white. */
475
- --co-semantic-color-icon-interactive-hover: var(--co-base-color-blue-1000); /** Blue icon on hover, matching text.interactive-hover. */
476
- --co-semantic-color-icon-interactive-active: var(--co-base-color-blue-1100); /** Blue icon while pressed, matching text.interactive-active. */
477
- --co-semantic-color-icon-error: var(--co-base-color-red-900); /** Error icons, such as in Alert and EmptyState. 5.41:1 on white. (InlineAlert's icon takes the text colour instead.) */
586
+ --co-semantic-color-icon-interactive: var(--co-base-color-blue-900); /** Deprecated: Renamed to semantic.color.icon.accent by the semantic grammar (decision 0031). Removed in 3.0. */
587
+ --co-semantic-color-icon-interactive-hover: var(--co-base-color-blue-1000); /** Deprecated: Renamed to semantic.color.icon.accent-hover by the semantic grammar (decision 0031). Removed in 3.0. */
588
+ --co-semantic-color-icon-interactive-active: var(--co-base-color-blue-1100); /** Deprecated: Renamed to semantic.color.icon.accent-pressed by the semantic grammar (decision 0031). Removed in 3.0. */
589
+ --co-semantic-color-icon-error: var(--co-base-color-red-900); /** Deprecated: Renamed to semantic.color.icon.danger by the semantic grammar (decision 0031). Removed in 3.0. */
478
590
  --co-semantic-color-icon-success: var(--co-base-color-green-900); /** Success icons, such as in Alert and EmptyState. 5.40:1 on white. (InlineAlert's icon takes the text colour instead.) */
479
591
  --co-semantic-color-icon-warning: var(--co-base-color-orange-900); /** Warning icons, such as in Alert. 5.38:1 on white. (InlineAlert's icon takes the text colour instead.) */
480
- --co-semantic-color-financial-credit: var(--co-base-color-green-700); /** Color for positive monetary values, credits, income */
481
- --co-semantic-color-financial-credit-hover: var(--co-base-color-green-800); /** Hover state for credit-colored interactive elements */
482
- --co-semantic-color-financial-debit: var(--co-base-color-red-900); /** Color for negative monetary values, debits, expenses */
483
- --co-semantic-color-financial-debit-hover: var(--co-base-color-red-1000); /** Hover state for debit-colored interactive elements */
484
- --co-semantic-color-financial-pending: var(--co-base-color-orange-600); /** Color for pending or processing financial transactions */
485
- --co-semantic-color-financial-neutral: var(--co-base-color-neutral-600); /** Neutral color for informational monetary amounts */
592
+ --co-semantic-color-icon-muted: var(--co-base-color-neutral-600); /** Secondary icons, such as list item and empty-state icons. */
593
+ --co-semantic-color-icon-accent: var(--co-base-color-blue-900); /** Blue icons in links and selected items, matching color.text.accent. */
594
+ --co-semantic-color-icon-accent-hover: var(--co-base-color-blue-1000); /** Icon of a hovered selected item, matching color.text.accent-hover. */
595
+ --co-semantic-color-icon-accent-pressed: var(--co-base-color-blue-1100); /** Icon of a pressed selected item, matching color.text.accent-pressed. */
596
+ --co-semantic-color-icon-danger: var(--co-base-color-red-900); /** Error icons, such as in Alert and EmptyState. */
597
+ --co-semantic-color-financial-credit: var(--co-base-color-green-700); /** Deprecated: Moved to the component tier as component.transaction.credit (decision 0031 §6). Removed in 3.0. */
598
+ --co-semantic-color-financial-credit-hover: var(--co-base-color-green-800); /** Deprecated: Moved to the component tier as component.transaction.credit-hover (decision 0031 §6). Removed in 3.0. */
599
+ --co-semantic-color-financial-debit: var(--co-base-color-red-900); /** Deprecated: Moved to the component tier as component.transaction.debit (decision 0031 §6). Removed in 3.0. */
600
+ --co-semantic-color-financial-debit-hover: var(--co-base-color-red-1000); /** Deprecated: Moved to the component tier as component.transaction.debit-hover (decision 0031 §6). Removed in 3.0. */
601
+ --co-semantic-color-financial-pending: var(--co-base-color-orange-600); /** Deprecated: Moved to the component tier as component.transaction.pending (decision 0031 §6). Removed in 3.0. */
602
+ --co-semantic-color-financial-neutral: var(--co-base-color-neutral-600); /** Deprecated: Moved to the component tier as component.transaction.neutral (decision 0031 §6). Removed in 3.0. */
486
603
  --co-semantic-color-category-blue: var(--co-base-color-blue-700); /** Blue category color for general/miscellaneous */
487
- --co-semantic-color-category-blue-emphasis: var(--co-base-color-blue-900); /** Emphasized blue for filled variants */
488
- --co-semantic-color-category-blue-subtle: var(--co-base-color-blue-100); /** Subtle blue background */
604
+ --co-semantic-color-category-blue-strong: var(--co-base-color-blue-900); /** Strong step of the blue category: the fill of a filled CategoryLabel, with white text (decision 0029). */
605
+ --co-semantic-color-category-blue-subtle: var(--co-base-color-blue-100); /** Deprecated: Renamed to semantic.color.category.blue-muted by the semantic grammar (decision 0031). Removed in 3.0. */
489
606
  --co-semantic-color-category-purple: var(--co-base-color-purple-700); /** Purple category color for entertainment */
490
- --co-semantic-color-category-purple-emphasis: var(--co-base-color-purple-900); /** Emphasized purple for filled variants */
491
- --co-semantic-color-category-purple-subtle: var(--co-base-color-purple-100); /** Subtle purple background */
607
+ --co-semantic-color-category-purple-strong: var(--co-base-color-purple-900); /** Strong step of the purple category: the fill of a filled CategoryLabel, with white text (decision 0029). */
608
+ --co-semantic-color-category-purple-subtle: var(--co-base-color-purple-100); /** Deprecated: Renamed to semantic.color.category.purple-muted by the semantic grammar (decision 0031). Removed in 3.0. */
492
609
  --co-semantic-color-category-pink: var(--co-base-color-pink-700); /** Pink category color for health/wellness */
493
- --co-semantic-color-category-pink-emphasis: var(--co-base-color-pink-900); /** Emphasized pink for filled variants */
494
- --co-semantic-color-category-pink-subtle: var(--co-base-color-pink-100); /** Subtle pink background */
610
+ --co-semantic-color-category-pink-strong: var(--co-base-color-pink-900); /** Strong step of the pink category: the fill of a filled CategoryLabel, with white text (decision 0029). */
611
+ --co-semantic-color-category-pink-subtle: var(--co-base-color-pink-100); /** Deprecated: Renamed to semantic.color.category.pink-muted by the semantic grammar (decision 0031). Removed in 3.0. */
495
612
  --co-semantic-color-category-yellow: var(--co-base-color-yellow-700); /** Yellow category color for utilities */
496
- --co-semantic-color-category-yellow-emphasis: var(--co-base-color-yellow-900); /** Emphasized yellow for filled variants */
497
- --co-semantic-color-category-yellow-subtle: var(--co-base-color-yellow-100); /** Subtle yellow background */
613
+ --co-semantic-color-category-yellow-strong: var(--co-base-color-yellow-900); /** Strong step of the yellow category: the fill of a filled CategoryLabel, with white text (decision 0029). */
614
+ --co-semantic-color-category-yellow-subtle: var(--co-base-color-yellow-100); /** Deprecated: Renamed to semantic.color.category.yellow-muted by the semantic grammar (decision 0031). Removed in 3.0. */
498
615
  --co-semantic-color-category-green: var(--co-base-color-green-700); /** Green category color for income */
499
- --co-semantic-color-category-green-emphasis: var(--co-base-color-green-900); /** Emphasized green for filled variants */
500
- --co-semantic-color-category-green-subtle: var(--co-base-color-green-100); /** Subtle green background */
616
+ --co-semantic-color-category-green-strong: var(--co-base-color-green-900); /** Strong step of the green category: the fill of a filled CategoryLabel, with white text (decision 0029). */
617
+ --co-semantic-color-category-green-subtle: var(--co-base-color-green-100); /** Deprecated: Renamed to semantic.color.category.green-muted by the semantic grammar (decision 0031). Removed in 3.0. */
501
618
  --co-semantic-color-category-red: var(--co-base-color-red-700); /** Red category color for expenses */
502
- --co-semantic-color-category-red-emphasis: var(--co-base-color-red-900); /** Emphasized red for filled variants */
503
- --co-semantic-color-category-red-subtle: var(--co-base-color-red-100); /** Subtle red background */
619
+ --co-semantic-color-category-red-strong: var(--co-base-color-red-900); /** Strong step of the red category: the fill of a filled CategoryLabel, with white text (decision 0029). */
620
+ --co-semantic-color-category-red-subtle: var(--co-base-color-red-100); /** Deprecated: Renamed to semantic.color.category.red-muted by the semantic grammar (decision 0031). Removed in 3.0. */
504
621
  --co-semantic-color-category-orange: var(--co-base-color-orange-700); /** Orange category color for food & dining */
505
- --co-semantic-color-category-orange-emphasis: var(--co-base-color-orange-900); /** Emphasized orange for filled variants */
506
- --co-semantic-color-category-orange-subtle: var(--co-base-color-orange-100); /** Subtle orange background */
622
+ --co-semantic-color-category-orange-strong: var(--co-base-color-orange-900); /** Strong step of the orange category: the fill of a filled CategoryLabel, with white text (decision 0029). */
623
+ --co-semantic-color-category-orange-subtle: var(--co-base-color-orange-100); /** Deprecated: Renamed to semantic.color.category.orange-muted by the semantic grammar (decision 0031). Removed in 3.0. */
507
624
  --co-semantic-color-category-gray: var(--co-base-color-neutral-700); /** Gray category color for uncategorized */
508
- --co-semantic-color-category-gray-emphasis: var(--co-base-color-neutral-900); /** Emphasized gray for filled variants */
509
- --co-semantic-color-category-gray-subtle: var(--co-base-color-neutral-200); /** Subtle gray background */
510
- --co-semantic-color-category-blue-text: var(--co-base-color-blue-900); /** Blue category text and icon on white or blue-subtle (outlined and minimal labels), at least 4.5:1. Decision on #115. */
511
- --co-semantic-color-category-purple-text: var(--co-base-color-purple-900); /** Purple category text and icon on white or purple-subtle (outlined and minimal labels), at least 4.5:1. Decision on #115. */
512
- --co-semantic-color-category-pink-text: var(--co-base-color-pink-1000); /** Pink category text and icon on white or pink-subtle (outlined and minimal labels), at least 4.5:1. One step darker than pink-emphasis, which is 4.38:1 on pink-subtle. Decision on #115. */
513
- --co-semantic-color-category-yellow-text: var(--co-base-color-yellow-1000); /** Yellow category text and icon on white or yellow-subtle (outlined and minimal labels), at least 4.5:1. One step darker than yellow-emphasis, which is 4.16:1 on yellow-subtle. Decision on #115. */
514
- --co-semantic-color-category-green-text: var(--co-base-color-green-900); /** Green category text and icon on white or green-subtle (outlined and minimal labels), at least 4.5:1. Decision on #115. */
515
- --co-semantic-color-category-red-text: var(--co-base-color-red-900); /** Red category text and icon on white or red-subtle (outlined and minimal labels), at least 4.5:1. Decision on #115. */
516
- --co-semantic-color-category-orange-text: var(--co-base-color-orange-900); /** Orange category text and icon on white or orange-subtle (outlined and minimal labels), at least 4.5:1. Decision on #115. */
517
- --co-semantic-color-category-gray-text: var(--co-base-color-neutral-900); /** Gray category text and icon on white or gray-subtle (outlined and minimal labels), at least 4.5:1. Decision on #115. */
518
- --co-semantic-color-status-pending: var(--co-base-color-yellow-1000); /** Pending status text and icon on pending-bg (5.69:1, WCAG AA). Decision on #115. */
519
- --co-semantic-color-status-pending-bg: var(--co-base-color-yellow-100); /** Background for pending status */
520
- --co-semantic-color-status-completed: var(--co-base-color-green-900); /** Green color for completed status */
521
- --co-semantic-color-status-completed-bg: var(--co-base-color-green-100); /** Background for completed status */
522
- --co-semantic-color-status-failed: var(--co-base-color-red-900); /** Red color for failed/error status */
523
- --co-semantic-color-status-failed-bg: var(--co-base-color-red-100); /** Background for failed status */
524
- --co-semantic-color-status-cancelled: var(--co-base-color-neutral-700); /** Gray color for cancelled status */
525
- --co-semantic-color-status-cancelled-bg: var(--co-base-color-neutral-200); /** Background for cancelled status */
526
- --co-semantic-color-status-processing: var(--co-base-color-blue-900); /** Blue color for processing status */
527
- --co-semantic-color-status-processing-bg: var(--co-base-color-blue-100); /** Background for processing status */
528
- --co-semantic-color-status-scheduled: var(--co-base-color-purple-900); /** Purple color for scheduled status */
529
- --co-semantic-color-status-scheduled-bg: var(--co-base-color-purple-100); /** Background for scheduled status */
530
- --co-semantic-motion-duration-normal: var(--co-base-duration-normal); /** 200ms: standard duration for property-specific transitions. */
531
- --co-semantic-motion-duration-fast: var(--co-base-duration-fast); /** 150ms: quick responses to input such as hover, press and small indicators. */
532
- --co-semantic-motion-duration-slow: var(--co-base-duration-moderate); /** 300ms: the maximum; larger movements such as sheets sliding in and long expand/collapse. */
533
- --co-semantic-motion-easing-ease-in-out: var(--co-base-easing-ease-in-out); /** ease-in-out: standard easing for property-specific transitions. */
534
- --co-semantic-motion-easing-ease-out: var(--co-base-easing-ease-out); /** ease-out: for elements responding to input or entering the page. */
535
- --co-semantic-motion-transition-fast: all var(--co-base-duration-fast) var(--co-base-easing-ease-out); /** All properties over duration.fast (150ms), easing out: quick feedback, such as the Slider thumb. */
536
- --co-semantic-motion-transition-normal: all var(--co-base-duration-normal) var(--co-base-easing-ease-in-out); /** All properties over duration.normal (200ms), easing in and out: the default state transition. */
537
- --co-semantic-motion-transition-slow: all var(--co-base-duration-moderate) var(--co-base-easing-ease-in-out); /** All properties over duration.slow (300ms), the motion maximum (P6), easing in and out: larger changes. */
538
- --co-semantic-motion-hover: background-color var(--co-base-duration-fast) var(--co-base-easing-ease-out), color var(--co-base-duration-fast) var(--co-base-easing-ease-out); /** Background and text colour over 150ms: the hover and press response of buttons, chips and tabs. */
539
- --co-semantic-motion-focus: outline var(--co-base-duration-fast) var(--co-base-easing-ease-out), outline-offset var(--co-base-duration-fast) var(--co-base-easing-ease-out); /** Outline and outline offset over 150ms: how the focus ring appears. */
540
- --co-semantic-motion-interactive: transform var(--co-base-duration-fast) var(--co-base-easing-ease-out), opacity var(--co-base-duration-fast) var(--co-base-easing-ease-out); /** Transform and opacity over 150ms: small movement or fade in response to input. */
541
- --co-component-button-primary-background-color: var(--co-semantic-color-background-emphasis); /** Primary Button fill at rest. */
625
+ --co-semantic-color-category-gray-strong: var(--co-base-color-neutral-900); /** Strong step of the gray category: the fill of a filled CategoryLabel, with white text (decision 0029). */
626
+ --co-semantic-color-category-gray-subtle: var(--co-base-color-neutral-200); /** Deprecated: Renamed to semantic.color.category.gray-muted by the semantic grammar (decision 0031). Removed in 3.0. */
627
+ --co-semantic-color-category-blue-text: var(--co-base-color-blue-900); /** Text and icons of an outlined or minimal blue CategoryLabel, on white or blue-muted. */
628
+ --co-semantic-color-category-purple-text: var(--co-base-color-purple-900); /** Text and icons of an outlined or minimal purple CategoryLabel, on white or purple-muted. */
629
+ --co-semantic-color-category-pink-text: var(--co-base-color-pink-1000); /** Text and icons of an outlined or minimal pink CategoryLabel, on white or pink-muted. */
630
+ --co-semantic-color-category-yellow-text: var(--co-base-color-yellow-1000); /** Text and icons of an outlined or minimal yellow CategoryLabel, on white or yellow-muted. */
631
+ --co-semantic-color-category-green-text: var(--co-base-color-green-900); /** Text and icons of an outlined or minimal green CategoryLabel, on white or green-muted. */
632
+ --co-semantic-color-category-red-text: var(--co-base-color-red-900); /** Text and icons of an outlined or minimal red CategoryLabel, on white or red-muted. */
633
+ --co-semantic-color-category-orange-text: var(--co-base-color-orange-900); /** Text and icons of an outlined or minimal orange CategoryLabel, on white or orange-muted. */
634
+ --co-semantic-color-category-gray-text: var(--co-base-color-neutral-900); /** Text and icons of an outlined or minimal gray CategoryLabel, on white or gray-muted. */
635
+ --co-semantic-color-category-blue-muted: var(--co-base-color-blue-100); /** Light blue fill of a blue CategoryLabel, behind the blue-text colour. */
636
+ --co-semantic-color-category-purple-muted: var(--co-base-color-purple-100); /** Light purple fill of a purple CategoryLabel, behind the purple-text colour. */
637
+ --co-semantic-color-category-pink-muted: var(--co-base-color-pink-100); /** Light pink fill of a pink CategoryLabel, behind the pink-text colour. */
638
+ --co-semantic-color-category-yellow-muted: var(--co-base-color-yellow-100); /** Light yellow fill of a yellow CategoryLabel, behind the yellow-text colour. */
639
+ --co-semantic-color-category-green-muted: var(--co-base-color-green-100); /** Light green fill of a green CategoryLabel, behind the green-text colour. */
640
+ --co-semantic-color-category-red-muted: var(--co-base-color-red-100); /** Light red fill of a red CategoryLabel, behind the red-text colour. */
641
+ --co-semantic-color-category-orange-muted: var(--co-base-color-orange-100); /** Light orange fill of a orange CategoryLabel, behind the orange-text colour. */
642
+ --co-semantic-color-category-gray-muted: var(--co-base-color-neutral-200); /** Light gray fill of a gray CategoryLabel, behind the gray-text colour. */
643
+ --co-semantic-color-status-pending: var(--co-base-color-yellow-1000); /** Deprecated: Moved to the component tier as component.status.pending.text (decision 0031 §6). Removed in 3.0. */
644
+ --co-semantic-color-status-pending-bg: var(--co-base-color-yellow-100); /** Deprecated: Moved to the component tier as component.status.pending.background (decision 0031 §6). Removed in 3.0. */
645
+ --co-semantic-color-status-completed: var(--co-base-color-green-900); /** Deprecated: Moved to the component tier as component.status.completed.text (decision 0031 §6). Removed in 3.0. */
646
+ --co-semantic-color-status-completed-bg: var(--co-base-color-green-100); /** Deprecated: Moved to the component tier as component.status.completed.background (decision 0031 §6). Removed in 3.0. */
647
+ --co-semantic-color-status-failed: var(--co-base-color-red-900); /** Deprecated: Moved to the component tier as component.status.failed.text (decision 0031 §6). Removed in 3.0. */
648
+ --co-semantic-color-status-failed-bg: var(--co-base-color-red-100); /** Deprecated: Moved to the component tier as component.status.failed.background (decision 0031 §6). Removed in 3.0. */
649
+ --co-semantic-color-status-cancelled: var(--co-base-color-neutral-700); /** Deprecated: Moved to the component tier as component.status.cancelled.text (decision 0031 §6). Removed in 3.0. */
650
+ --co-semantic-color-status-cancelled-bg: var(--co-base-color-neutral-200); /** Deprecated: Moved to the component tier as component.status.cancelled.background (decision 0031 §6). Removed in 3.0. */
651
+ --co-semantic-color-status-processing: var(--co-base-color-blue-900); /** Deprecated: Moved to the component tier as component.status.processing.text (decision 0031 §6). Removed in 3.0. */
652
+ --co-semantic-color-status-processing-bg: var(--co-base-color-blue-100); /** Deprecated: Moved to the component tier as component.status.processing.background (decision 0031 §6). Removed in 3.0. */
653
+ --co-semantic-color-status-scheduled: var(--co-base-color-purple-900); /** Deprecated: Moved to the component tier as component.status.scheduled.text (decision 0031 §6). Removed in 3.0. */
654
+ --co-semantic-color-status-scheduled-bg: var(--co-base-color-purple-100); /** Deprecated: Moved to the component tier as component.status.scheduled.background (decision 0031 §6). Removed in 3.0. */
655
+ --co-semantic-color-fill-emphasis: var(--co-base-color-neutral-900); /** Near-black fill for emphasis controls, such as the primary Button and IconButton. */
656
+ --co-semantic-color-fill-emphasis-hover: var(--co-base-color-neutral-800); /** Fill of a hovered emphasis control, such as the primary Button. */
657
+ --co-semantic-color-fill-emphasis-pressed: var(--co-base-color-neutral-1000); /** Fill of a pressed emphasis control, such as the primary Button. */
658
+ --co-semantic-color-fill-muted: var(--co-base-color-neutral-200); /** Light grey fill for quiet grouped content, such as the default Chip. */
659
+ --co-semantic-color-fill-inverse: var(--co-base-color-neutral-800); /** Dark fill for inverse elements: a checked Checkbox, Modal and Sheet drag handles. */
660
+ --co-semantic-color-fill-accent: var(--co-base-color-blue-900); /** Blue fill for the accent Button and other deliberate highlights; see 0003. */
661
+ --co-semantic-color-fill-accent-muted: var(--co-base-color-blue-100); /** Light blue fill for selected items: a selected chip, tab or row; see 0016. */
662
+ --co-semantic-color-fill-accent-muted-hover: var(--co-base-color-blue-200); /** Fill of a hovered selected item, such as a selected filter chip. */
663
+ --co-semantic-color-fill-accent-muted-pressed: var(--co-base-color-blue-300); /** Fill of a pressed selected item, such as a selected filter chip. */
664
+ --co-semantic-color-fill-accent-hover: var(--co-base-color-blue-1000); /** Blue fill of a hovered accent control, such as the accent Button. */
665
+ --co-semantic-color-fill-accent-pressed: var(--co-base-color-blue-1100); /** Blue fill of a pressed accent control, such as the accent Button. */
666
+ --co-semantic-color-fill-danger: var(--co-base-color-red-900); /** Strong red fill for destructive actions, such as the danger Button. */
667
+ --co-semantic-color-fill-danger-hover: var(--co-base-color-red-1000); /** Fill of a hovered destructive control, such as the danger Button. */
668
+ --co-semantic-color-fill-danger-pressed: var(--co-base-color-red-1100); /** Fill of a pressed destructive control, such as the danger Button. */
669
+ --co-semantic-color-fill-danger-muted: var(--co-base-color-red-100); /** Light red tint behind error messages, such as an error Alert. */
670
+ --co-semantic-color-fill-success: var(--co-base-color-green-900); /** Strong green fill for success states, such as a success indicator. */
671
+ --co-semantic-color-fill-success-muted: var(--co-base-color-green-100); /** Light green tint behind success messages, such as a success Alert. */
672
+ --co-semantic-color-fill-warning: var(--co-base-color-orange-900); /** Strong orange fill for warning states, such as a warning indicator. */
673
+ --co-semantic-color-fill-warning-muted: var(--co-base-color-orange-100); /** Light orange tint behind warning messages, such as a warning Alert. */
674
+ --co-semantic-color-fill-disabled: var(--co-base-color-neutral-300); /** Fill of a disabled control, such as a disabled Button or Switch. */
675
+ --co-semantic-color-fill-default: var(--co-base-color-neutral-300); /** Fill of a neutral control at rest, such as the secondary Button. */
676
+ --co-semantic-color-fill-default-hover: var(--co-base-color-neutral-400); /** Fill of a hovered neutral control, such as the secondary Button. */
677
+ --co-semantic-color-fill-default-pressed: var(--co-base-color-neutral-500); /** Fill of a pressed neutral control, such as the secondary Button. */
678
+ --co-semantic-color-fill-none: var(--co-base-color-transparent); /** No fill, for controls without a background at rest: the naked Button and IconButton. */
679
+ --co-semantic-motion-duration-normal: var(--co-base-duration-normal); /** Deprecated: Renamed to semantic.motion.duration.moderate by the semantic grammar (decision 0031, settled in 0037). Removed in 3.0. */
680
+ --co-semantic-motion-duration-fast: var(--co-base-duration-fast); /** Quick responses to input: hover, press, focus and small indicators. */
681
+ --co-semantic-motion-duration-slow: var(--co-base-duration-moderate); /** The longest duration (P6): larger movements, such as a Sheet sliding in. */
682
+ --co-semantic-motion-duration-instant: var(--co-base-duration-instant); /** No duration: changes that should happen at once, such as movement under reduced motion. */
683
+ --co-semantic-motion-duration-moderate: var(--co-base-duration-normal); /** The default duration for state changes and short movements, such as a menu opening. */
684
+ --co-semantic-motion-easing-ease-in-out: var(--co-base-easing-ease-in-out); /** Deprecated: Renamed to semantic.motion.easing.standard by the semantic grammar (decision 0031, settled in 0037). Removed in 3.0. */
685
+ --co-semantic-motion-easing-ease-out: var(--co-base-easing-ease-out); /** Deprecated: Renamed to semantic.motion.easing.decelerate by the semantic grammar (decision 0031, settled in 0037). Removed in 3.0. */
686
+ --co-semantic-motion-easing-standard: var(--co-base-easing-ease-in-out); /** Easing for change on screen: something moving or resizing in place. */
687
+ --co-semantic-motion-easing-decelerate: var(--co-base-easing-ease-out); /** Easing for things arriving or responding: entrances, hover and press. */
688
+ --co-semantic-motion-easing-accelerate: var(--co-base-easing-ease-in); /** Easing for things leaving: exits and dismissals speed up as they go (decision 0037). */
689
+ --co-semantic-motion-transition-fast: all var(--co-base-duration-fast) var(--co-base-easing-ease-out); /** Deprecated: It animates every property (`transition: all`). List the properties instead, with motion.duration and motion.easing, or use a motion.transition composite (decision 0037). Removed in 3.0. */
690
+ --co-semantic-motion-transition-normal: all var(--co-base-duration-normal) var(--co-base-easing-ease-in-out); /** Deprecated: It animates every property (`transition: all`). List the properties instead, with motion.duration and motion.easing, or use a motion.transition composite (decision 0037). Removed in 3.0. */
691
+ --co-semantic-motion-transition-slow: all var(--co-base-duration-moderate) var(--co-base-easing-ease-in-out); /** Deprecated: It animates every property (`transition: all`). List the properties instead, with motion.duration and motion.easing, or use a motion.transition composite (decision 0037). Removed in 3.0. */
692
+ --co-semantic-motion-transition-feedback: background-color var(--co-base-duration-fast) var(--co-base-easing-ease-out), color var(--co-base-duration-fast) var(--co-base-easing-ease-out); /** Fill and text colour responding to hover and press: buttons, chips, tabs and rows. */
693
+ --co-semantic-motion-transition-focus: outline var(--co-base-duration-fast) var(--co-base-easing-ease-out), outline-offset var(--co-base-duration-fast) var(--co-base-easing-ease-out); /** How the focus ring appears: outline and outline offset. */
694
+ --co-semantic-motion-transition-press: transform var(--co-base-duration-fast) var(--co-base-easing-ease-out), opacity var(--co-base-duration-fast) var(--co-base-easing-ease-out); /** Small movement or fade in response to input, such as a pressed control shifting. */
695
+ --co-semantic-motion-hover: background-color var(--co-base-duration-fast) var(--co-base-easing-ease-out), color var(--co-base-duration-fast) var(--co-base-easing-ease-out); /** Deprecated: Renamed to semantic.motion.transition.feedback by the semantic grammar (decision 0031, settled in 0037). Removed in 3.0. */
696
+ --co-semantic-motion-focus: outline var(--co-base-duration-fast) var(--co-base-easing-ease-out), outline-offset var(--co-base-duration-fast) var(--co-base-easing-ease-out); /** Deprecated: Renamed to semantic.motion.transition.focus by the semantic grammar (decision 0031, settled in 0037). Removed in 3.0. */
697
+ --co-semantic-motion-interactive: transform var(--co-base-duration-fast) var(--co-base-easing-ease-out), opacity var(--co-base-duration-fast) var(--co-base-easing-ease-out); /** Deprecated: Renamed to semantic.motion.transition.press by the semantic grammar (decision 0031, settled in 0037). Removed in 3.0. */
698
+ --co-semantic-motion-distance-sm: var(--co-base-dimension-2); /** How far a small element travels as it enters, such as a Dropdown menu dropping in. */
699
+ --co-semantic-layer-sticky: var(--co-base-z-index-1); /** Stacking layer for chrome that stays visible while scrolling: sticky headers, navigation bars. */
700
+ --co-semantic-layer-dropdown: var(--co-base-z-index-6); /** Stacking layer for menus anchored to a control: Dropdown and SearchField lists. */
701
+ --co-semantic-layer-overlay: var(--co-base-z-index-7); /** Stacking layer for panels that slide over the page and their backdrop, such as Sheet. */
702
+ --co-semantic-layer-modal: var(--co-base-z-index-8); /** Stacking layer for blocking dialogs and their backdrop: Modal, ActionSheet. */
703
+ --co-semantic-radius-none: var(--co-base-dimension-0); /** No rounding: tables, dividers and sharp-edged containers. */
704
+ --co-semantic-radius-xs: var(--co-base-border-radius-1); /** Minimal rounding: small badges, checkboxes, compact tags. */
705
+ --co-semantic-radius-sm: var(--co-base-border-radius-2); /** Subtle rounding: buttons, inputs and other form controls. */
706
+ --co-semantic-radius-md: var(--co-base-border-radius-3); /** Standard rounding: cards, dropdown menus, popovers. */
707
+ --co-semantic-radius-lg: var(--co-base-border-radius-4); /** Generous rounding: modals, action sheets and feature cards. */
708
+ --co-semantic-radius-xl: var(--co-base-border-radius-5); /** Large rounding: pill buttons and prominent search bars. */
709
+ --co-semantic-radius-2xl: var(--co-base-border-radius-6); /** Extra-large rounding: hero elements and decorative containers. */
710
+ --co-semantic-radius-3xl: var(--co-base-border-radius-7); /** Maximum rounding short of a circle: decorative cards and marketing elements. */
711
+ --co-semantic-radius-full: var(--co-base-border-radius-circle); /** Fully round: avatars, round icon buttons, status dots and chips. */
712
+ --co-semantic-space-0: var(--co-base-dimension-0); /** No space, for explicit resets of padding, margin or gap. */
713
+ --co-semantic-space-100: var(--co-base-dimension-1); /** The tightest gap, such as between a label and its required indicator. */
714
+ --co-semantic-space-200: var(--co-base-dimension-2); /** A small gap, such as between a field's label, control and helper text. */
715
+ --co-semantic-space-300: var(--co-base-dimension-3); /** The default gap between related elements in a group. */
716
+ --co-semantic-space-400: var(--co-base-dimension-4); /** Space between groups of elements, around a small Divider, and inside containers. */
717
+ --co-semantic-space-500: var(--co-base-dimension-5); /** Generous padding inside larger containers and cards. */
718
+ --co-semantic-space-600: var(--co-base-dimension-6); /** Space between blocks, and around a medium or minimal Divider. */
719
+ --co-semantic-space-700: var(--co-base-dimension-7); /** A larger step between blocks and sections; pick the step the layout needs. */
720
+ --co-semantic-space-800: var(--co-base-dimension-8); /** Space between sections, and around the default Divider. */
721
+ --co-semantic-space-900: var(--co-base-dimension-9); /** A larger step between blocks and sections; pick the step the layout needs. */
722
+ --co-semantic-space-1000: var(--co-base-dimension-10); /** A larger step between blocks and sections; pick the step the layout needs. */
723
+ --co-semantic-space-1200: var(--co-base-dimension-12); /** Space between major sections, and around an extra-large Divider. */
724
+ --co-semantic-space-1400: var(--co-base-dimension-14); /** A large step between page sections; pick the step the layout needs. */
725
+ --co-semantic-space-1600: var(--co-base-dimension-16); /** A large step between page sections; pick the step the layout needs. */
726
+ --co-semantic-space-2000: var(--co-base-dimension-20); /** A very large step between page sections, second only to the largest. */
727
+ --co-semantic-space-2400: var(--co-base-dimension-24); /** The largest gap between page sections, such as FeatureBlock at wide breakpoints. */
728
+ --co-semantic-space-inset-xs: var(--co-base-dimension-1); /** Tightest padding inside a component, such as around an icon in a small control. */
729
+ --co-semantic-space-inset-sm: var(--co-base-dimension-2); /** Small padding inside a component: chip sides, icon-to-label gaps, compact buttons. */
730
+ --co-semantic-space-inset-md: var(--co-base-dimension-3); /** Medium padding inside a component: form field insides, medium IconButtons. */
731
+ --co-semantic-space-inset-lg: var(--co-base-dimension-4); /** Large padding inside a component: button and input sides, card insides. */
732
+ --co-semantic-space-inset-xl: var(--co-base-dimension-5); /** Generous padding inside a component, such as a prominent call to action. */
733
+ --co-semantic-space-inset-2xl: var(--co-base-dimension-6); /** Largest padding inside a component: large cards, spacious form sections. */
734
+ --co-semantic-surface-base: var(--co-base-color-neutral-100); /** The page: the off-white background everything else sits on (decision 0006). */
735
+ --co-semantic-surface-raised: var(--co-base-color-neutral-000); /** Content raised off the page: cards, inputs, sheets, dialogs, code blocks. */
736
+ --co-component-button-primary-background-color: var(--co-semantic-color-fill-emphasis); /** Primary Button fill at rest. */
542
737
  --co-component-button-primary-text-color: var(--co-semantic-color-text-inverse); /** Text and icon colour on the primary Button. */
543
- --co-component-button-primary-border-radius: var(--co-semantic-border-radius-sm); /** Corner radius of every Button (visual language: Button uses sm). */
544
- --co-component-button-primary-padding: var(--co-semantic-spacing-component-md) var(--co-semantic-spacing-component-lg); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.component.md and .lg. Removed in 3.0. */
545
- --co-component-button-hover-background-color: var(--co-semantic-color-background-emphasis-hover); /** Primary Button fill on hover. */
546
- --co-component-button-active-background-color: var(--co-semantic-color-background-emphasis-active); /** Primary Button fill while pressed. */
738
+ --co-component-button-primary-border-radius: var(--co-semantic-radius-sm); /** Corner radius of every Button (visual language: Button uses sm). */
739
+ --co-component-button-primary-padding: var(--co-semantic-space-inset-md) var(--co-semantic-space-inset-lg); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.md and .lg. Removed in 3.0. */
740
+ --co-component-button-hover-background-color: var(--co-semantic-color-fill-emphasis-hover); /** Primary Button fill on hover. */
741
+ --co-component-button-active-background-color: var(--co-semantic-color-fill-emphasis-pressed); /** Primary Button fill while pressed. */
547
742
  --co-component-button-focus-outline: var(--co-semantic-border-focus); /** Focus ring on every Button. */
548
- --co-component-button-disabled-background-color: var(--co-semantic-color-background-disabled); /** Disabled primary Button fill. */
743
+ --co-component-button-disabled-background-color: var(--co-semantic-color-fill-disabled); /** Disabled primary Button fill. */
549
744
  --co-component-button-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled primary Button text and icon colour. */
550
- --co-component-button-variants-secondary-background-color: var(--co-semantic-color-background-neutral); /** Secondary Button fill at rest. */
745
+ --co-component-button-variants-secondary-background-color: var(--co-semantic-color-fill-default); /** Secondary Button fill at rest. */
551
746
  --co-component-button-variants-secondary-text-color: var(--co-semantic-color-text-default); /** Text and icon colour on the secondary Button. */
552
- --co-component-button-variants-secondary-hover-background-color: var(--co-semantic-color-background-neutral-hover); /** Secondary Button fill on hover. */
553
- --co-component-button-variants-secondary-active-background-color: var(--co-semantic-color-background-neutral-active); /** Secondary Button fill while pressed. */
554
- --co-component-button-variants-secondary-disabled-background-color: var(--co-semantic-color-background-disabled); /** Disabled secondary Button fill. */
747
+ --co-component-button-variants-secondary-hover-background-color: var(--co-semantic-color-fill-default-hover); /** Secondary Button fill on hover. */
748
+ --co-component-button-variants-secondary-active-background-color: var(--co-semantic-color-fill-default-pressed); /** Secondary Button fill while pressed. */
749
+ --co-component-button-variants-secondary-disabled-background-color: var(--co-semantic-color-fill-disabled); /** Disabled secondary Button fill. */
555
750
  --co-component-button-variants-secondary-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled secondary Button text and icon colour. */
556
- --co-component-button-variants-naked-background-color: var(--co-semantic-color-background-transparent); /** Naked Button has no fill at rest. */
751
+ --co-component-button-variants-naked-background-color: var(--co-semantic-color-fill-none); /** Naked Button has no fill at rest. */
557
752
  --co-component-button-variants-naked-text-color: var(--co-semantic-color-text-default); /** Text and icon colour on the naked Button. */
558
- --co-component-button-variants-naked-hover-background-color: var(--co-semantic-color-background-surface); /** Naked Button fill on hover. */
559
- --co-component-button-variants-naked-active-background-color: var(--co-semantic-color-background-neutral); /** Naked Button fill while pressed. */
560
- --co-component-button-variants-naked-disabled-background-color: var(--co-semantic-color-background-transparent); /** Disabled naked Button has no fill. */
753
+ --co-component-button-variants-naked-hover-background-color: var(--co-semantic-color-fill-muted); /** Naked Button fill on hover. */
754
+ --co-component-button-variants-naked-active-background-color: var(--co-semantic-color-fill-default); /** Naked Button fill while pressed. */
755
+ --co-component-button-variants-naked-disabled-background-color: var(--co-semantic-color-fill-none); /** Disabled naked Button has no fill. */
561
756
  --co-component-button-variants-naked-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled naked Button text and icon colour. */
562
- --co-component-button-variants-accent-background-color: var(--co-semantic-color-background-interactive); /** Fill of the accent Button: the blue call to action above primary, at most one per view (decision 0016). */
757
+ --co-component-button-variants-accent-background-color: var(--co-semantic-color-fill-accent); /** Fill of the accent Button: the blue call to action above primary, at most one per view (decision 0016). */
563
758
  --co-component-button-variants-accent-text-color: var(--co-semantic-color-text-inverse); /** Text and icon colour on the accent Button. */
564
- --co-component-button-variants-accent-hover-background-color: var(--co-semantic-color-background-interactive-hover); /** Accent Button fill on hover. */
565
- --co-component-button-variants-accent-active-background-color: var(--co-semantic-color-background-interactive-active); /** Accent Button fill while pressed. */
566
- --co-component-button-variants-accent-disabled-background-color: var(--co-semantic-color-background-disabled); /** Disabled accent Button fill. */
759
+ --co-component-button-variants-accent-hover-background-color: var(--co-semantic-color-fill-accent-hover); /** Accent Button fill on hover. */
760
+ --co-component-button-variants-accent-active-background-color: var(--co-semantic-color-fill-accent-pressed); /** Accent Button fill while pressed. */
761
+ --co-component-button-variants-accent-disabled-background-color: var(--co-semantic-color-fill-disabled); /** Disabled accent Button fill. */
567
762
  --co-component-button-variants-accent-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled accent Button text and icon colour. */
568
- --co-component-button-variants-danger-background-color: var(--co-semantic-color-background-error); /** Danger Button fill at rest, for destructive actions. */
763
+ --co-component-button-variants-danger-background-color: var(--co-semantic-color-fill-danger); /** Danger Button fill at rest, for destructive actions. */
569
764
  --co-component-button-variants-danger-text-color: var(--co-semantic-color-text-inverse); /** Text and icon colour on the danger Button. */
570
- --co-component-button-variants-danger-hover-background-color: var(--co-semantic-color-background-error-hover); /** Danger Button fill on hover. */
571
- --co-component-button-variants-danger-active-background-color: var(--co-semantic-color-background-error-active); /** Danger Button fill while pressed. */
572
- --co-component-button-variants-danger-disabled-background-color: var(--co-semantic-color-background-disabled); /** Disabled danger Button fill. */
765
+ --co-component-button-variants-danger-hover-background-color: var(--co-semantic-color-fill-danger-hover); /** Danger Button fill on hover. */
766
+ --co-component-button-variants-danger-active-background-color: var(--co-semantic-color-fill-danger-pressed); /** Danger Button fill while pressed. */
767
+ --co-component-button-variants-danger-disabled-background-color: var(--co-semantic-color-fill-disabled); /** Disabled danger Button fill. */
573
768
  --co-component-button-variants-danger-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled danger Button text and icon colour. */
574
- --co-component-button-sizes-small-padding: var(--co-semantic-spacing-component-sm) var(--co-semantic-spacing-component-md); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.component.sm and .md. Removed in 3.0. */
575
- --co-component-button-sizes-medium-padding: var(--co-semantic-spacing-component-sm) var(--co-semantic-spacing-component-lg); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.component.sm and .lg. Removed in 3.0. */
576
- --co-component-button-sizes-large-padding: var(--co-semantic-spacing-component-md) var(--co-semantic-spacing-component-lg); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.component.md and .lg. Removed in 3.0. */
577
- --co-component-chip-close-button-size: var(--co-semantic-size-dimension-5); /** FilterChip close button width and height (20px): the 16px close icon plus 2px on each side, so the button fits inside a 24px chip. */
578
- --co-component-chip-default-background-color: var(--co-semantic-color-background-surface); /** Default chip fill at rest. */
769
+ --co-component-button-sizes-small-padding: var(--co-semantic-space-inset-sm) var(--co-semantic-space-inset-md); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.sm and .md. Removed in 3.0. */
770
+ --co-component-button-sizes-small-font: var(--co-semantic-font-weight-medium) var(--co-semantic-font-size-xs)/var(--co-base-line-height-1) var(--co-semantic-font-family-body); /** Small Button label typography. */
771
+ --co-component-button-sizes-medium-padding: var(--co-semantic-space-inset-sm) var(--co-semantic-space-inset-lg); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.sm and .lg. Removed in 3.0. */
772
+ --co-component-button-sizes-medium-font: var(--co-semantic-font-weight-medium) var(--co-semantic-font-size-sm)/var(--co-semantic-line-height-normal) var(--co-semantic-font-family-body); /** Medium Button label typography. */
773
+ --co-component-button-sizes-large-padding: var(--co-semantic-space-inset-md) var(--co-semantic-space-inset-lg); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.md and .lg. Removed in 3.0. */
774
+ --co-component-button-sizes-large-font: var(--co-semantic-font-weight-medium) var(--co-semantic-font-size-md)/var(--co-semantic-line-height-normal) var(--co-semantic-font-family-body); /** Large Button label typography. */
775
+ --co-component-chip-close-button-size: var(--co-semantic-size-500); /** Width and height of a chip's close button, which fits inside the chip with room around it. */
776
+ --co-component-chip-default-background-color: var(--co-semantic-color-fill-muted); /** Default chip fill at rest. */
579
777
  --co-component-chip-default-text-color: var(--co-semantic-color-text-default); /** Default chip text and icon colour. */
580
- --co-component-chip-default-border-radius: var(--co-semantic-border-radius-lg); /** Corner radius of every chip: rounder than Button, to signal a different job (decision 0016). */
581
- --co-component-chip-default-padding: 2px var(--co-semantic-spacing-component-sm); /** Deprecated (decision 0022): no component spacing tokens. No chip reads it; chips take padding per size. Removed in 3.0. */
582
- --co-component-chip-hover-background-color: var(--co-semantic-color-background-neutral); /** Default chip fill on hover, when it's clickable. */
583
- --co-component-chip-active-background-color: var(--co-semantic-color-background-neutral-hover); /** Default chip fill while pressed, when it's clickable. */
778
+ --co-component-chip-default-border-radius: var(--co-semantic-radius-lg); /** Corner radius of every chip: rounder than Button, to signal a different job (decision 0016). */
779
+ --co-component-chip-default-padding: 2px var(--co-semantic-space-inset-sm); /** Deprecated: No component spacing tokens (decision 0022). No chip reads it; chips take padding per size. Removed in 3.0. */
780
+ --co-component-chip-hover-background-color: var(--co-semantic-color-fill-default); /** Default chip fill on hover, when it's clickable. */
781
+ --co-component-chip-active-background-color: var(--co-semantic-color-fill-default-hover); /** Default chip fill while pressed, when it's clickable. */
584
782
  --co-component-chip-focus-outline: var(--co-semantic-border-focus); /** Focus ring on every chip and its close button. */
585
- --co-component-chip-disabled-background-color: var(--co-semantic-color-background-surface); /** Disabled default chip fill. */
783
+ --co-component-chip-disabled-background-color: var(--co-semantic-color-fill-muted); /** Disabled default chip fill. */
586
784
  --co-component-chip-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled default chip text and icon colour. */
587
- --co-component-chip-variants-emphasis-background-color: var(--co-semantic-color-background-emphasis); /** Emphasis chip fill at rest. */
785
+ --co-component-chip-variants-emphasis-background-color: var(--co-semantic-color-fill-emphasis); /** Emphasis chip fill at rest. */
588
786
  --co-component-chip-variants-emphasis-text-color: var(--co-semantic-color-text-inverse); /** Emphasis chip text and icon colour. */
589
- --co-component-chip-variants-emphasis-hover-background-color: var(--co-semantic-color-background-emphasis-hover); /** Emphasis chip fill on hover, when it's clickable. */
590
- --co-component-chip-variants-emphasis-active-background-color: var(--co-semantic-color-background-emphasis-active); /** Emphasis chip fill while pressed, when it's clickable. */
591
- --co-component-chip-variants-emphasis-disabled-background-color: var(--co-semantic-color-background-disabled); /** Disabled emphasis chip fill. */
787
+ --co-component-chip-variants-emphasis-hover-background-color: var(--co-semantic-color-fill-emphasis-hover); /** Emphasis chip fill on hover, when it's clickable. */
788
+ --co-component-chip-variants-emphasis-active-background-color: var(--co-semantic-color-fill-emphasis-pressed); /** Emphasis chip fill while pressed, when it's clickable. */
789
+ --co-component-chip-variants-emphasis-disabled-background-color: var(--co-semantic-color-fill-disabled); /** Disabled emphasis chip fill. */
592
790
  --co-component-chip-variants-emphasis-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled emphasis chip text and icon colour. */
593
- --co-component-chip-variants-subtle-background-color: var(--co-semantic-color-background-subtle); /** Subtle chip fill at rest. */
791
+ --co-component-chip-variants-subtle-background-color: var(--co-semantic-surface-raised); /** Subtle chip fill at rest. */
594
792
  --co-component-chip-variants-subtle-text-color: var(--co-semantic-color-text-default); /** Subtle chip text and icon colour. */
595
- --co-component-chip-variants-subtle-hover-background-color: var(--co-semantic-color-background-page); /** Subtle chip fill on hover, when it's clickable. */
596
- --co-component-chip-variants-subtle-active-background-color: var(--co-semantic-color-background-surface); /** Subtle chip fill while pressed, when it's clickable. */
597
- --co-component-chip-variants-subtle-disabled-background-color: var(--co-semantic-color-background-subtle); /** Disabled subtle chip fill. */
793
+ --co-component-chip-variants-subtle-hover-background-color: var(--co-semantic-surface-base); /** Subtle chip fill on hover, when it's clickable. */
794
+ --co-component-chip-variants-subtle-active-background-color: var(--co-semantic-color-fill-muted); /** Subtle chip fill while pressed, when it's clickable. */
795
+ --co-component-chip-variants-subtle-disabled-background-color: var(--co-semantic-surface-raised); /** Disabled subtle chip fill. */
598
796
  --co-component-chip-variants-subtle-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled subtle chip text and icon colour. */
599
- --co-component-chip-variants-interactive-background-color: var(--co-semantic-color-background-interactive); /** Interactive chip fill at rest. */
797
+ --co-component-chip-variants-interactive-background-color: var(--co-semantic-color-fill-accent); /** Interactive chip fill at rest. */
600
798
  --co-component-chip-variants-interactive-text-color: var(--co-semantic-color-text-inverse); /** Interactive chip text and icon colour. */
601
- --co-component-chip-variants-interactive-hover-background-color: var(--co-semantic-color-background-interactive-hover); /** Interactive chip fill on hover, when it's clickable. */
602
- --co-component-chip-variants-interactive-active-background-color: var(--co-semantic-color-background-interactive-active); /** Interactive chip fill while pressed, when it's clickable. */
603
- --co-component-chip-variants-interactive-disabled-background-color: var(--co-semantic-color-background-disabled); /** Disabled interactive chip fill. */
799
+ --co-component-chip-variants-interactive-hover-background-color: var(--co-semantic-color-fill-accent-hover); /** Interactive chip fill on hover, when it's clickable. */
800
+ --co-component-chip-variants-interactive-active-background-color: var(--co-semantic-color-fill-accent-pressed); /** Interactive chip fill while pressed, when it's clickable. */
801
+ --co-component-chip-variants-interactive-disabled-background-color: var(--co-semantic-color-fill-disabled); /** Disabled interactive chip fill. */
604
802
  --co-component-chip-variants-interactive-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled interactive chip text and icon colour. */
605
- --co-component-chip-sizes-small-padding: 2px var(--co-semantic-spacing-component-sm); /** Deprecated (decision 0022): no component spacing tokens. The 2px is off-grid and has no semantic step, so Chip keeps reading this until #129 decides how controls get their heights. Removed in 3.0. */
606
- --co-component-chip-sizes-medium-padding: 2px var(--co-semantic-spacing-component-sm); /** Deprecated (decision 0022): no component spacing tokens. The 2px is off-grid and has no semantic step, so Chip keeps reading this until #129 decides how controls get their heights. Removed in 3.0. */
607
- --co-component-chip-sizes-large-padding: var(--co-semantic-spacing-component-sm) var(--co-semantic-spacing-component-md); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.component.sm and .md. Removed in 3.0. */
608
- --co-component-icon-button-primary-background-color: var(--co-semantic-color-background-emphasis); /** Deprecated (decision 0027): IconButton reads component.button.primary.backgroundColor, so its colours match Button's. Removed in 3.0. */
609
- --co-component-icon-button-primary-border-radius: var(--co-semantic-border-radius-sm); /** Corner radius of every IconButton, matching Button. */
610
- --co-component-icon-button-hover-background-color: var(--co-semantic-color-background-emphasis-hover); /** Deprecated (decision 0027): IconButton reads component.button.hover.backgroundColor, so its colours match Button's. Removed in 3.0. */
611
- --co-component-icon-button-active-background-color: var(--co-semantic-color-background-emphasis-active); /** Deprecated (decision 0027): IconButton reads component.button.active.backgroundColor, so its colours match Button's. Removed in 3.0. */
803
+ --co-component-chip-sizes-small-padding: 2px var(--co-semantic-space-inset-sm); /** Deprecated: Chips take their min-height from semantic.size.label.medium with no vertical padding, and semantic.spacing.component.sm horizontally (decisions 0022, 0034 and 0035). Removed in 3.0. */
804
+ --co-component-chip-sizes-medium-padding: 2px var(--co-semantic-space-inset-sm); /** Deprecated: Chips take their min-height from semantic.size.label.medium with no vertical padding, and semantic.spacing.component.sm horizontally (decisions 0022, 0034 and 0035). Removed in 3.0. */
805
+ --co-component-chip-sizes-large-padding: var(--co-semantic-space-inset-sm) var(--co-semantic-space-inset-md); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.sm and .md. Removed in 3.0. */
806
+ --co-component-icon-button-primary-background-color: var(--co-semantic-color-fill-emphasis); /** Deprecated: IconButton reads component.button.primary.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0. */
807
+ --co-component-icon-button-primary-border-radius: var(--co-semantic-radius-sm); /** Corner radius of every IconButton, matching Button. */
808
+ --co-component-icon-button-hover-background-color: var(--co-semantic-color-fill-emphasis-hover); /** Deprecated: IconButton reads component.button.hover.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0. */
809
+ --co-component-icon-button-active-background-color: var(--co-semantic-color-fill-emphasis-pressed); /** Deprecated: IconButton reads component.button.active.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0. */
612
810
  --co-component-icon-button-focus-outline: var(--co-semantic-border-focus); /** Focus ring on every IconButton. */
613
- --co-component-icon-button-disabled-background-color: var(--co-semantic-color-background-disabled); /** Deprecated (decision 0027): IconButton reads component.button.disabled.backgroundColor, so its colours match Button's. Removed in 3.0. */
614
- --co-component-icon-button-variants-secondary-background-color: var(--co-semantic-color-background-surface); /** Deprecated (decision 0027): IconButton reads component.button.variants.secondary.backgroundColor, so its colours match Button's. Removed in 3.0. */
615
- --co-component-icon-button-variants-secondary-hover-background-color: var(--co-semantic-color-background-neutral); /** Deprecated (decision 0027): IconButton reads component.button.variants.secondary.hover.backgroundColor, so its colours match Button's. Removed in 3.0. */
616
- --co-component-icon-button-variants-secondary-active-background-color: var(--co-semantic-color-background-page); /** Deprecated (decision 0027): IconButton reads component.button.variants.secondary.active.backgroundColor, so its colours match Button's. Removed in 3.0. */
617
- --co-component-icon-button-variants-secondary-disabled-background-color: var(--co-semantic-color-background-disabled); /** Deprecated (decision 0027): IconButton reads component.button.variants.secondary.disabled.backgroundColor, so its colours match Button's. Removed in 3.0. */
618
- --co-component-icon-button-variants-naked-background-color: var(--co-semantic-color-background-transparent); /** Deprecated (decision 0027): IconButton reads component.button.variants.naked.backgroundColor, so its colours match Button's. Removed in 3.0. */
619
- --co-component-icon-button-variants-naked-hover-background-color: var(--co-semantic-color-background-surface); /** Deprecated (decision 0027): IconButton reads component.button.variants.naked.hover.backgroundColor, so its colours match Button's. Removed in 3.0. */
620
- --co-component-icon-button-variants-naked-active-background-color: var(--co-semantic-color-background-neutral); /** Deprecated (decision 0027): IconButton reads component.button.variants.naked.active.backgroundColor, so its colours match Button's. Removed in 3.0. */
621
- --co-component-icon-button-variants-naked-disabled-background-color: var(--co-semantic-color-background-transparent); /** Deprecated (decision 0027): IconButton reads component.button.variants.naked.disabled.backgroundColor, so its colours match Button's. Removed in 3.0. */
622
- --co-component-icon-button-sizes-small-padding: var(--co-semantic-spacing-component-xs); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.component.xs. Removed in 3.0. */
623
- --co-component-icon-button-sizes-medium-padding: var(--co-semantic-spacing-component-sm); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.component.sm. Removed in 3.0. */
624
- --co-component-icon-button-sizes-large-padding: var(--co-semantic-spacing-component-md); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.component.md. Removed in 3.0. */
625
- --co-component-separator-border: var(--co-semantic-border-subtle); /** Divider line, the same as variants.default.border. */
626
- --co-component-separator-margin: var(--co-semantic-spacing-separator-lg) 0; /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.separator.lg (vertical margin). Removed in 3.0. */
627
- --co-component-separator-variants-default-border: var(--co-semantic-border-subtle); /** Default Divider line. */
628
- --co-component-separator-variants-default-margin: var(--co-semantic-spacing-separator-lg) 0; /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.separator.lg (vertical margin). Removed in 3.0. */
629
- --co-component-separator-variants-strong-border: var(--co-semantic-border-strong); /** Strong Divider line, for a firmer break. */
630
- --co-component-separator-variants-strong-margin: var(--co-semantic-spacing-separator-lg) 0; /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.separator.lg (vertical margin). Removed in 3.0. */
631
- --co-component-separator-variants-minimal-border: var(--co-semantic-border-subtle); /** Minimal Divider line. */
632
- --co-component-separator-variants-minimal-margin: var(--co-semantic-spacing-separator-md) 0; /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.separator.md (vertical margin). Removed in 3.0. */
633
- --co-component-separator-sizes-small-margin: var(--co-semantic-spacing-separator-sm) 0; /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.separator.sm (vertical margin). Removed in 3.0. */
634
- --co-component-separator-sizes-medium-margin: var(--co-semantic-spacing-separator-md) 0; /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.separator.md (vertical margin). Removed in 3.0. */
635
- --co-component-separator-sizes-large-margin: var(--co-semantic-spacing-separator-lg) 0; /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.separator.lg (vertical margin). Removed in 3.0. */
636
- --co-component-separator-sizes-xlarge-margin: var(--co-semantic-spacing-separator-xl) 0; /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.separator.xl (vertical margin). Removed in 3.0. */
811
+ --co-component-icon-button-disabled-background-color: var(--co-semantic-color-fill-disabled); /** Deprecated: IconButton reads component.button.disabled.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0. */
812
+ --co-component-icon-button-variants-secondary-background-color: var(--co-semantic-color-fill-muted); /** Deprecated: IconButton reads component.button.variants.secondary.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0. */
813
+ --co-component-icon-button-variants-secondary-hover-background-color: var(--co-semantic-color-fill-default); /** Deprecated: IconButton reads component.button.variants.secondary.hover.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0. */
814
+ --co-component-icon-button-variants-secondary-active-background-color: var(--co-semantic-surface-base); /** Deprecated: IconButton reads component.button.variants.secondary.active.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0. */
815
+ --co-component-icon-button-variants-secondary-disabled-background-color: var(--co-semantic-color-fill-disabled); /** Deprecated: IconButton reads component.button.variants.secondary.disabled.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0. */
816
+ --co-component-icon-button-variants-naked-background-color: var(--co-semantic-color-fill-none); /** Deprecated: IconButton reads component.button.variants.naked.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0. */
817
+ --co-component-icon-button-variants-naked-hover-background-color: var(--co-semantic-color-fill-muted); /** Deprecated: IconButton reads component.button.variants.naked.hover.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0. */
818
+ --co-component-icon-button-variants-naked-active-background-color: var(--co-semantic-color-fill-default); /** Deprecated: IconButton reads component.button.variants.naked.active.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0. */
819
+ --co-component-icon-button-variants-naked-disabled-background-color: var(--co-semantic-color-fill-none); /** Deprecated: IconButton reads component.button.variants.naked.disabled.backgroundColor, so its colours match Button's (decision 0027). Removed in 3.0. */
820
+ --co-component-icon-button-sizes-small-padding: var(--co-semantic-space-inset-xs); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.inset.xs. Removed in 3.0. */
821
+ --co-component-icon-button-sizes-medium-padding: var(--co-semantic-space-inset-sm); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.inset.sm. Removed in 3.0. */
822
+ --co-component-icon-button-sizes-large-padding: var(--co-semantic-space-inset-md); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.inset.md. Removed in 3.0. */
823
+ --co-component-separator-border: var(--co-semantic-border-emphasis); /** Divider line, the same as variants.default.border. */
824
+ --co-component-separator-margin: var(--co-semantic-space-800) 0; /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.800 (vertical margin). Removed in 3.0. */
825
+ --co-component-separator-variants-default-border: var(--co-semantic-border-emphasis); /** Default Divider line. */
826
+ --co-component-separator-variants-default-margin: var(--co-semantic-space-800) 0; /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.800 (vertical margin). Removed in 3.0. */
827
+ --co-component-separator-variants-strong-border: var(--co-semantic-border-input-hover); /** Strong Divider line, for a firmer break. */
828
+ --co-component-separator-variants-strong-margin: var(--co-semantic-space-800) 0; /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.800 (vertical margin). Removed in 3.0. */
829
+ --co-component-separator-variants-minimal-border: var(--co-semantic-border-emphasis); /** Minimal Divider line. */
830
+ --co-component-separator-variants-minimal-margin: var(--co-semantic-space-600) 0; /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.600 (vertical margin). Removed in 3.0. */
831
+ --co-component-separator-sizes-small-margin: var(--co-semantic-space-400) 0; /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.400 (vertical margin). Removed in 3.0. */
832
+ --co-component-separator-sizes-medium-margin: var(--co-semantic-space-600) 0; /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.600 (vertical margin). Removed in 3.0. */
833
+ --co-component-separator-sizes-large-margin: var(--co-semantic-space-800) 0; /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.800 (vertical margin). Removed in 3.0. */
834
+ --co-component-separator-sizes-xlarge-margin: var(--co-semantic-space-1200) 0; /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.1200 (vertical margin). Removed in 3.0. */
637
835
  --co-component-progress-bar-background-color: var(--co-semantic-color-background-progress-track); /** ProgressBar track, behind the filled part. */
638
- --co-component-progress-bar-border-radius: var(--co-semantic-border-radius-sm); /** Not read: ProgressBar renders its track and fill with semantic.border.radius.xs (2px). Kept so published values don't change. */
639
- --co-component-progress-bar-sizes-sm-height: var(--co-semantic-size-dimension-1); /** Thickness of the small ProgressBar (4px). */
640
- --co-component-progress-bar-sizes-md-height: var(--co-semantic-size-dimension-2); /** Thickness of the medium ProgressBar (8px), the default. */
641
- --co-component-progress-bar-sizes-lg-height: var(--co-semantic-size-dimension-4); /** Thickness of the large ProgressBar (16px). */
642
- --co-component-progress-bar-sizes-xl-height: var(--co-semantic-size-dimension-5); /** Thickness of the extra-large ProgressBar (20px). */
643
- --co-component-input-default-background-color: var(--co-semantic-color-background-subtle); /** Text input fill: TextField, PasswordField, NumberInput, Dropdown, SearchField, and the Checkbox box. */
836
+ --co-component-progress-bar-border-radius: var(--co-semantic-radius-sm); /** Deprecated: ProgressBar never read it; its track and fill use semantic.radius.xs. Removed in 3.0. */
837
+ --co-component-progress-bar-sizes-sm-height: var(--co-semantic-size-100); /** Thickness of the small ProgressBar, the thinnest size. */
838
+ --co-component-progress-bar-sizes-md-height: var(--co-semantic-size-200); /** Thickness of the medium ProgressBar, the default. */
839
+ --co-component-progress-bar-sizes-lg-height: var(--co-semantic-size-400); /** Thickness of the large ProgressBar, for prominent progress. */
840
+ --co-component-progress-bar-sizes-xl-height: var(--co-semantic-size-500); /** Thickness of the extra-large ProgressBar, the thickest size. */
841
+ --co-component-input-default-background-color: var(--co-semantic-surface-raised); /** Text input fill: TextField, PasswordField, NumberInput, Dropdown, SearchField, and the Checkbox box. */
644
842
  --co-component-input-default-text-color: var(--co-semantic-color-text-default); /** Text input value colour. */
645
- --co-component-input-default-border-color: var(--co-semantic-color-border-control); /** Text input, Dropdown and Checkbox border at rest. At least 3:1 on white (decision 0025). */
646
- --co-component-input-default-border-radius: var(--co-semantic-border-radius-sm); /** Corner radius of text inputs and the Checkbox box. */
843
+ --co-component-input-default-border-color: var(--co-semantic-color-border-input); /** Text input, Dropdown and Checkbox border at rest. At least 3:1 on white (decision 0025). */
844
+ --co-component-input-default-border-radius: var(--co-semantic-radius-sm); /** Corner radius of text inputs and the Checkbox box. */
647
845
  --co-component-input-default-border-width: var(--co-semantic-border-width-thin); /** Border width of text inputs and the Checkbox box. */
648
- --co-component-input-default-padding-x: var(--co-semantic-spacing-component-lg); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.component.lg. Removed in 3.0. */
649
- --co-component-input-placeholder-text-color: var(--co-semantic-color-text-subdued); /** Placeholder text in every text input (TextField, PasswordField, NumberInput, SearchField, AgentInput). 8.18:1 on the white input fill: placeholders aren't exempt from the contrast minimum (WCAG 1.4.3), unlike disabled text. */
650
- --co-component-input-hover-border-color: var(--co-semantic-color-border-strong); /** Text input border on hover. */
651
- --co-component-input-focus-border-color: var(--co-semantic-color-border-strong); /** Text input border while focused. */
846
+ --co-component-input-default-padding-x: var(--co-semantic-space-inset-lg); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.inset.lg. Removed in 3.0. */
847
+ --co-component-input-placeholder-text-color: var(--co-semantic-color-text-muted); /** Placeholder text in every text input (TextField, PasswordField, NumberInput, SearchField, AgentInput). 8.18:1 on the white input fill: placeholders aren't exempt from the contrast minimum (WCAG 1.4.3), unlike disabled text. */
848
+ --co-component-input-hover-border-color: var(--co-semantic-color-border-input-hover); /** Text input border on hover. */
849
+ --co-component-input-focus-border-color: var(--co-semantic-color-border-focus); /** Text input border while focused. */
652
850
  --co-component-input-focus-outline: var(--co-semantic-border-focus); /** Focus ring on text inputs and the Checkbox box. */
653
- --co-component-input-error-border-color: var(--co-semantic-color-border-error); /** Text input border when invalid. */
654
- --co-component-input-error-focus-border-color: var(--co-semantic-color-border-error); /** Invalid text input border while focused. */
851
+ --co-component-input-error-border-color: var(--co-semantic-color-border-danger); /** Text input border when invalid. */
852
+ --co-component-input-error-focus-border-color: var(--co-semantic-color-border-danger); /** Invalid text input border while focused. */
655
853
  --co-component-input-error-focus-outline: var(--co-semantic-border-focus); /** Focus ring on an invalid text input. */
656
- --co-component-input-error-hover-border-color: var(--co-semantic-color-border-error); /** Invalid text input border on hover. */
657
- --co-component-input-disabled-background-color: var(--co-semantic-color-background-disabled); /** Disabled text input fill. */
854
+ --co-component-input-error-hover-border-color: var(--co-semantic-color-border-danger); /** Invalid text input border on hover. */
855
+ --co-component-input-disabled-background-color: var(--co-semantic-color-fill-disabled); /** Disabled text input fill. */
658
856
  --co-component-input-disabled-text-color: var(--co-semantic-color-text-disabled); /** Disabled text input value colour. */
659
- --co-component-input-disabled-border-color: var(--co-semantic-color-border-subtle); /** Disabled text input, Dropdown and Checkbox border. Stays light: WCAG 1.4.11 exempts inactive controls (decision 0025). */
660
- --co-component-input-textarea-min-height: var(--co-semantic-size-dimension-30); /** Minimum height of a multi-line text input (120px). */
661
- --co-component-badge-dot-size: var(--co-semantic-size-dimension-2); /** Width and height of the dot badge indicator (8px). */
662
- --co-component-badge-count-min-width: var(--co-semantic-size-dimension-4); /** Minimum width of the count badge indicator (16px). */
663
- --co-component-badge-count-height: var(--co-semantic-size-dimension-4); /** Height of the count badge indicator (16px). */
664
- --co-component-badge-count-padding-x: var(--co-semantic-spacing-component-xs); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.component.xs. Removed in 3.0. */
857
+ --co-component-input-disabled-border-color: var(--co-semantic-color-border-emphasis); /** Disabled text input, Dropdown and Checkbox border. Stays light: WCAG 1.4.11 exempts inactive controls (decision 0025). */
858
+ --co-component-input-textarea-min-height: var(--co-semantic-size-3000); /** Minimum height of TextArea, tall enough for a few lines of entry (decision 0034). */
859
+ --co-component-badge-dot-size: var(--co-semantic-size-200); /** Width and height of the dot Badge indicator on a button, tab or icon. */
860
+ --co-component-badge-count-min-width: var(--co-semantic-size-400); /** Minimum width of the count Badge, so a single digit sits in a circle. */
861
+ --co-component-badge-count-height: var(--co-semantic-size-400); /** Height of the count Badge indicator on a button, tab or icon. */
862
+ --co-component-badge-count-padding-x: var(--co-semantic-space-inset-xs); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.inset.xs. Removed in 3.0. */
665
863
  --co-component-badge-count-line-height: var(--co-semantic-line-height-none); /** Line height of the count text, so the digits centre in the indicator. */
666
- --co-component-badge-ring-width: var(--co-semantic-border-width-thick); /** Width of the ring that separates the badge indicator from its host element (2px). */
667
- --co-component-badge-border-radius: var(--co-semantic-border-radius-circle); /** Badge indicators are always fully circular. */
864
+ --co-component-badge-ring-width: var(--co-semantic-border-width-thick); /** Ring that separates a Badge indicator from the element it sits on. */
865
+ --co-component-badge-border-radius: var(--co-semantic-radius-full); /** Badge indicators are always fully circular. */
668
866
  --co-component-badge-label-font-weight: var(--co-semantic-font-weight-medium); /** Text weight for the badge-like label family: StatusBadge, CategoryBadge and Tag (decision 0014). Declare it after the typography shorthand, which would otherwise reset it. */
669
- --co-component-field-gap: var(--co-semantic-spacing-layout-sm); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.layout.sm. Removed in 3.0. Was the vertical gap between a field's label, control and helper text. */
867
+ --co-component-field-gap: var(--co-semantic-space-200); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.200. Removed in 3.0. */
670
868
  --co-component-field-label-color: var(--co-semantic-color-text-default); /** Field label colour. */
671
869
  --co-component-field-label-color-disabled: var(--co-semantic-color-text-disabled); /** Field label colour when the field is disabled. */
672
- --co-component-field-label-gap: var(--co-semantic-spacing-layout-xs); /** Deprecated (decision 0022): no component spacing tokens. Use semantic.spacing.layout.xs. Removed in 3.0. Was the gap between the label text and the required indicator. */
673
- --co-component-field-required-indicator-color: var(--co-semantic-color-text-error); /** Colour of the required-field asterisk. */
870
+ --co-component-field-label-gap: var(--co-semantic-space-100); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.100. Removed in 3.0. */
871
+ --co-component-field-required-indicator-color: var(--co-semantic-color-text-danger); /** Colour of the required-field asterisk. */
674
872
  --co-component-field-required-indicator-font-weight: var(--co-semantic-font-weight-bold); /** Weight of the required-field asterisk. */
675
- --co-component-field-helper-text-color: var(--co-semantic-color-text-subdued); /** Helper text colour. */
676
- --co-component-field-helper-text-color-error: var(--co-semantic-color-text-error); /** Helper text colour when it describes an error. */
677
- --co-component-alert-severity-error-background: var(--co-semantic-color-background-error-subtle); /** Error alert background, in both appearances. */
678
- --co-component-alert-severity-error-text: var(--co-semantic-color-text-error); /** Error alert text colour. */
679
- --co-component-alert-severity-warning-background: var(--co-semantic-color-background-warning-subtle); /** Warning alert background, in both appearances. */
873
+ --co-component-field-helper-text-color: var(--co-semantic-color-text-muted); /** Helper text colour. */
874
+ --co-component-field-helper-text-color-error: var(--co-semantic-color-text-danger); /** Helper text colour when it describes an error. */
875
+ --co-component-alert-severity-error-background: var(--co-semantic-color-fill-danger-muted); /** Error alert background, in both appearances. */
876
+ --co-component-alert-severity-error-text: var(--co-semantic-color-text-danger); /** Error alert text colour. */
877
+ --co-component-alert-severity-warning-background: var(--co-semantic-color-fill-warning-muted); /** Warning alert background, in both appearances. */
680
878
  --co-component-alert-severity-warning-text: var(--co-semantic-color-text-warning); /** Warning alert text colour. */
681
- --co-component-alert-severity-info-background: var(--co-semantic-color-background-interactive-subtle); /** Info alert background, in both appearances. */
682
- --co-component-alert-severity-info-text: var(--co-semantic-color-text-interactive); /** Info alert text colour. */
683
- --co-component-alert-severity-success-background: var(--co-semantic-color-background-success-subtle); /** Success alert background, in both appearances. */
879
+ --co-component-alert-severity-info-background: var(--co-semantic-color-fill-accent-muted); /** Info alert background, in both appearances. */
880
+ --co-component-alert-severity-info-text: var(--co-semantic-color-text-accent); /** Info alert text colour. */
881
+ --co-component-alert-severity-success-background: var(--co-semantic-color-fill-success-muted); /** Success alert background, in both appearances. */
684
882
  --co-component-alert-severity-success-text: var(--co-semantic-color-text-success); /** Success alert text colour. */
685
- --co-component-alert-appearance-outlined-border-color-error: var(--co-semantic-color-border-error); /** Outlined error alert border: alerts at the top of a page or content area, and error summaries (decision 0019). */
883
+ --co-component-alert-appearance-outlined-border-color-error: var(--co-semantic-color-border-danger); /** Outlined error alert border: alerts at the top of a page or content area, and error summaries (decision 0019). */
686
884
  --co-component-alert-appearance-outlined-border-color-warning: var(--co-semantic-color-border-warning); /** Outlined warning alert border: alerts at the top of a page or content area, and error summaries (decision 0019). */
687
- --co-component-alert-appearance-outlined-border-color-info: var(--co-semantic-color-border-interactive); /** Outlined info alert border: alerts at the top of a page or content area, and error summaries (decision 0019). */
885
+ --co-component-alert-appearance-outlined-border-color-info: var(--co-semantic-color-border-accent); /** Outlined info alert border: alerts at the top of a page or content area, and error summaries (decision 0019). */
688
886
  --co-component-alert-appearance-outlined-border-color-success: var(--co-semantic-color-border-success); /** Outlined success alert border: alerts at the top of a page or content area, and error summaries (decision 0019). */
689
887
  --co-component-alert-appearance-borderless-border-color-error: var(--co-semantic-color-border-none); /** Borderless error alert: no visible border, keeping its width so both appearances take the same space (decision 0019). */
690
888
  --co-component-alert-appearance-borderless-border-color-warning: var(--co-semantic-color-border-none); /** Borderless warning alert: no visible border, keeping its width so both appearances take the same space (decision 0019). */
@@ -694,8 +892,8 @@
694
892
  --co-component-alert-title-line-height: var(--co-semantic-line-height-tight); /** Alert titles use a tighter line height than h6. */
695
893
  --co-component-alert-message-line-height: var(--co-semantic-line-height-tight); /** Alert messages use a tighter line height than body. */
696
894
  --co-component-tab-bar-badge-font-weight: var(--co-semantic-font-weight-bold); /** Tab count badges are bold, heavier than caption. */
697
- --co-component-tab-bar-badge-size: var(--co-semantic-size-dimension-5); /** Tab count badge height and minimum width (20px). */
698
- --co-component-tab-bar-scrollbar-height: var(--co-semantic-size-dimension-1); /** Height of the horizontal scrollbar when tabs overflow (4px). */
895
+ --co-component-tab-bar-badge-size: var(--co-semantic-size-500); /** Height and minimum width of a tab's count badge in TabBar. */
896
+ --co-component-tab-bar-scrollbar-height: var(--co-semantic-size-100); /** Height of the horizontal scrollbar TabBar shows when its tabs overflow. */
699
897
  --co-component-search-field-section-header-letter-spacing: var(--co-semantic-letter-spacing-wide); /** Tracking for the uppercase section header. */
700
898
  --co-component-avatar-initials-font-family: var(--co-semantic-font-family-body); /** Initials font. */
701
899
  --co-component-avatar-initials-font-weight: var(--co-semantic-font-weight-medium); /** Initials weight. */
@@ -711,52 +909,65 @@
711
909
  --co-component-slider-thumb-shadow-default: var(--co-semantic-elevation-raised); /** Slider thumb at rest. */
712
910
  --co-component-slider-thumb-shadow-hover: var(--co-semantic-elevation-sticky); /** Slider thumb on hover: one step deeper. */
713
911
  --co-component-slider-thumb-shadow-active: var(--co-semantic-elevation-floating); /** Slider thumb while dragging: deepest. */
714
- --co-component-account-card-header-min-height: var(--co-semantic-size-dimension-12); /** Minimum height of the card header row (48px). */
715
- --co-component-account-card-min-width: var(--co-semantic-size-dimension-75); /** Minimum card width (300px). */
716
- --co-component-breadcrumbs-item-max-width: var(--co-semantic-size-dimension-45); /** Width at which a breadcrumb label truncates (180px). */
717
- --co-component-card-large-max-width: var(--co-semantic-size-dimension-192); /** Maximum card width (768px). */
718
- --co-component-checkbox-box-size: var(--co-semantic-size-dimension-5); /** Width and height of the checkbox square (20px). */
719
- --co-component-checkbox-row-min-height: var(--co-semantic-size-dimension-8); /** Minimum height of a checkbox or radio row (32px). */
720
- --co-component-empty-state-illustration-small: var(--co-semantic-size-dimension-20); /** Small illustration size (80px). */
721
- --co-component-empty-state-illustration-medium: var(--co-semantic-size-dimension-30); /** Medium illustration size (120px). */
722
- --co-component-empty-state-illustration-large: var(--co-semantic-size-dimension-50); /** Large illustration size (200px). */
723
- --co-component-empty-state-max-width: var(--co-semantic-size-dimension-100); /** Maximum width of the empty state (400px). */
724
- --co-component-empty-state-text-max-width: var(--co-semantic-size-dimension-90); /** Maximum width of the title and description (360px). */
725
- --co-component-empty-state-actions-max-width: var(--co-semantic-size-dimension-75); /** Maximum width of the actions area (300px). */
726
- --co-component-list-item-expanded-indent-compact: var(--co-semantic-size-dimension-12); /** Left indent of expanded content in compact rows, aligning it with the label (48px). */
727
- --co-component-list-item-expanded-indent-comfortable: var(--co-semantic-size-dimension-15); /** Left indent of expanded content in comfortable rows (60px). */
728
- --co-component-transaction-list-item-min-height: var(--co-semantic-size-dimension-18); /** Minimum row height (72px). */
729
- --co-semantic-typography-display: var(--co-semantic-font-weight-bold) var(--co-base-font-size-10)/var(--co-base-line-height-10) var(--co-base-font-family-heading); /** Display text: 5rem, weight 700. The largest heading, for hero titles. */
730
- --co-semantic-typography-h1: var(--co-semantic-font-weight-bold) var(--co-base-font-size-9)/var(--co-base-line-height-9) var(--co-base-font-family-heading); /** Heading 1: 3rem, weight 700. The page title. */
731
- --co-semantic-typography-h2: var(--co-semantic-font-weight-bold) var(--co-base-font-size-8)/var(--co-base-line-height-8) var(--co-base-font-family-heading); /** Heading 2: 2rem, weight 700. Major sections. */
732
- --co-semantic-typography-h3: var(--co-semantic-font-weight-bold) var(--co-base-font-size-7)/var(--co-base-line-height-7) var(--co-base-font-family-heading); /** Heading 3: 1.75rem, weight 700. */
733
- --co-semantic-typography-h4: var(--co-semantic-font-weight-bold) var(--co-base-font-size-6)/var(--co-base-line-height-6) var(--co-base-font-family-heading); /** Heading 4: 1.5rem, weight 700. */
734
- --co-semantic-typography-h5: var(--co-semantic-font-weight-medium) var(--co-base-font-size-5)/var(--co-base-line-height-5) var(--co-base-font-family-heading); /** Heading 5: 1.25rem, weight 500. */
735
- --co-semantic-typography-h6: var(--co-semantic-font-weight-medium) var(--co-base-font-size-4)/var(--co-base-line-height-4) var(--co-base-font-family-heading); /** Heading 6: 1.125rem, weight 500. The smallest heading; Alert's title builds on it. */
736
- --co-semantic-typography-subtitle: var(--co-semantic-font-weight-medium) var(--co-base-font-size-3)/var(--co-base-line-height-4) var(--co-base-font-family-body); /** Subtitle: 1rem, weight 500. A short line under a heading. */
737
- --co-semantic-typography-body: var(--co-semantic-font-weight-regular) var(--co-base-font-size-3)/var(--co-base-line-height-4) var(--co-base-font-family-body); /** Body text: 1rem, weight 400, 1.5rem line height. The default for paragraphs and input values. */
738
- --co-semantic-typography-small: var(--co-semantic-font-weight-regular) var(--co-base-font-size-2)/var(--co-base-line-height-3) var(--co-base-font-family-body); /** Small text: 0.875rem, weight 400. Secondary copy and compact controls. */
739
- --co-semantic-typography-overline: var(--co-semantic-font-weight-bold) var(--co-base-font-size-1)/var(--co-base-line-height-1) var(--co-base-font-family-body); /** Overline: 0.75rem, weight 700. A short label above a heading. */
740
- --co-semantic-typography-caption: var(--co-semantic-font-weight-regular) var(--co-base-font-size-1)/var(--co-base-line-height-1) var(--co-base-font-family-body); /** Caption: 0.75rem, weight 400. Helper text, metadata and image captions. */
741
- --co-semantic-typography-button1: var(--co-semantic-font-weight-medium) var(--co-base-font-size-3)/var(--co-base-line-height-4) var(--co-base-font-family-body); /** Large Button label: 1rem, weight 500. */
742
- --co-semantic-typography-button2: var(--co-semantic-font-weight-medium) var(--co-base-font-size-2)/var(--co-base-line-height-4) var(--co-base-font-family-body); /** Medium Button label: 0.875rem, weight 500. Also tab labels. */
743
- --co-semantic-typography-button3: var(--co-semantic-font-weight-medium) var(--co-base-font-size-1)/var(--co-base-line-height-1) var(--co-base-font-family-body); /** Small Button label: 0.75rem, weight 500. */
744
- --co-semantic-typography-label: var(--co-semantic-font-weight-semibold) var(--co-base-font-size-2)/var(--co-base-line-height-3) var(--co-base-font-family-body); /** Form label: 0.875rem, weight 600. Field labels, such as TextField and Slider. */
745
- --co-semantic-typography-breadcrumb: var(--co-semantic-font-weight-regular) var(--co-base-font-size-1)/var(--co-base-line-height-2) var(--co-base-font-family-body); /** Breadcrumb-sized text: 0.75rem, weight 400. Not used today: Breadcrumbs renders its links with typography.caption. */
912
+ --co-component-account-card-header-min-height: var(--co-semantic-size-1200); /** Minimum height of AccountCard's header row, so cards in a grid line up. */
913
+ --co-component-account-card-min-width: var(--co-semantic-size-7500); /** Narrowest an AccountCard may get before its content wraps badly. */
914
+ --co-component-breadcrumbs-item-max-width: var(--co-semantic-size-4500); /** Width at which a long Breadcrumbs label truncates with an ellipsis. */
915
+ --co-component-breadcrumbs-font: var(--co-semantic-font-weight-regular) var(--co-semantic-font-size-xs)/var(--co-base-line-height-2) var(--co-semantic-font-family-body); /** Breadcrumb-sized text; Breadcrumbs uses typography.caption for its links today. */
916
+ --co-component-card-large-max-width: var(--co-semantic-size-19200); /** Widest a CardLarge grows, so its text keeps a readable measure. */
917
+ --co-component-checkbox-box-size: var(--co-semantic-size-500); /** Width and height of the Checkbox and Radio box. */
918
+ --co-component-checkbox-row-min-height: var(--co-semantic-size-800); /** Minimum height of a Checkbox or Radio row, so the whole row is easy to hit. */
919
+ --co-component-empty-state-illustration-small: var(--co-semantic-size-2000); /** Size of the small EmptyState illustration, for empty panels and cards. */
920
+ --co-component-empty-state-illustration-medium: var(--co-semantic-size-3000); /** Size of the medium EmptyState illustration, the default. */
921
+ --co-component-empty-state-illustration-large: var(--co-semantic-size-5000); /** Size of the large EmptyState illustration, for full-page empty states. */
922
+ --co-component-empty-state-max-width: var(--co-semantic-size-10000); /** Widest an EmptyState block grows inside a wide container. */
923
+ --co-component-empty-state-text-max-width: var(--co-semantic-size-9000); /** Widest EmptyState's title and description run, for a readable measure. */
924
+ --co-component-empty-state-actions-max-width: var(--co-semantic-size-7500); /** Widest EmptyState's actions area grows, so buttons don't stretch. */
925
+ --co-component-list-item-expanded-indent-compact: var(--co-semantic-size-1200); /** Indent of a compact ListItem's expanded content, aligning it with the label. */
926
+ --co-component-list-item-expanded-indent-comfortable: var(--co-semantic-size-1500); /** Left indent of a comfortable ListItem's expanded content. */
927
+ --co-component-transaction-list-item-min-height: var(--co-semantic-size-1800); /** Minimum height of a TransactionListItem row, so rows line up in a list. */
928
+ --co-component-status-completed-text: var(--co-semantic-color-text-success); /** Text and icon of a completed StatusLabel, on its completed background. */
929
+ --co-component-status-completed-background: var(--co-semantic-color-fill-success-muted); /** Fill of a completed StatusLabel, behind its completed text. */
930
+ --co-component-status-failed-text: var(--co-semantic-color-text-danger); /** Text and icon of a failed StatusLabel, on its failed background. */
931
+ --co-component-status-failed-background: var(--co-semantic-color-fill-danger-muted); /** Fill of a failed StatusLabel, behind its failed text. */
932
+ --co-component-status-cancelled-text: var(--co-semantic-color-text-muted); /** Text and icon of a cancelled StatusLabel, on its cancelled background. */
933
+ --co-component-status-cancelled-background: var(--co-semantic-color-fill-muted); /** Fill of a cancelled StatusLabel, behind its cancelled text. */
934
+ --co-component-tooltip-border: var(--co-semantic-border-width-thick) var(--co-base-border-style-dotted) var(--co-semantic-color-border-emphasis); /** Dotted underline marking text that has a tooltip. */
935
+ --co-semantic-color-category-blue-emphasis: var(--co-semantic-color-category-blue-strong); /** Deprecated: "emphasis" means near-black, so use semantic.color.category.blue-strong (decision 0029). Removed in 3.0. */
936
+ --co-semantic-color-category-purple-emphasis: var(--co-semantic-color-category-purple-strong); /** Deprecated: "emphasis" means near-black, so use semantic.color.category.purple-strong (decision 0029). Removed in 3.0. */
937
+ --co-semantic-color-category-pink-emphasis: var(--co-semantic-color-category-pink-strong); /** Deprecated: "emphasis" means near-black, so use semantic.color.category.pink-strong (decision 0029). Removed in 3.0. */
938
+ --co-semantic-color-category-yellow-emphasis: var(--co-semantic-color-category-yellow-strong); /** Deprecated: "emphasis" means near-black, so use semantic.color.category.yellow-strong (decision 0029). Removed in 3.0. */
939
+ --co-semantic-color-category-green-emphasis: var(--co-semantic-color-category-green-strong); /** Deprecated: "emphasis" means near-black, so use semantic.color.category.green-strong (decision 0029). Removed in 3.0. */
940
+ --co-semantic-color-category-red-emphasis: var(--co-semantic-color-category-red-strong); /** Deprecated: "emphasis" means near-black, so use semantic.color.category.red-strong (decision 0029). Removed in 3.0. */
941
+ --co-semantic-color-category-orange-emphasis: var(--co-semantic-color-category-orange-strong); /** Deprecated: "emphasis" means near-black, so use semantic.color.category.orange-strong (decision 0029). Removed in 3.0. */
942
+ --co-semantic-color-category-gray-emphasis: var(--co-semantic-color-category-gray-strong); /** Deprecated: "emphasis" means near-black, so use semantic.color.category.gray-strong (decision 0029). Removed in 3.0. */
943
+ --co-semantic-typography-display: var(--co-semantic-font-weight-bold) var(--co-base-font-size-10)/var(--co-base-line-height-10) var(--co-base-font-family-heading); /** The largest heading, for hero titles. */
944
+ --co-semantic-typography-h1: var(--co-semantic-font-weight-bold) var(--co-base-font-size-9)/var(--co-base-line-height-9) var(--co-base-font-family-heading); /** Heading 1: the page title, one per page. */
945
+ --co-semantic-typography-h2: var(--co-semantic-font-weight-bold) var(--co-base-font-size-8)/var(--co-base-line-height-8) var(--co-base-font-family-heading); /** Heading 2: major sections of a page. */
946
+ --co-semantic-typography-h3: var(--co-semantic-font-weight-bold) var(--co-base-font-size-7)/var(--co-base-line-height-7) var(--co-base-font-family-heading); /** Heading 3: the third heading level in a page outline. */
947
+ --co-semantic-typography-h4: var(--co-semantic-font-weight-bold) var(--co-base-font-size-6)/var(--co-base-line-height-6) var(--co-base-font-family-heading); /** Heading 4: the fourth heading level in a page outline. */
948
+ --co-semantic-typography-h5: var(--co-semantic-font-weight-medium) var(--co-base-font-size-5)/var(--co-base-line-height-5) var(--co-base-font-family-heading); /** Heading 5: the fifth heading level in a page outline. */
949
+ --co-semantic-typography-h6: var(--co-semantic-font-weight-medium) var(--co-base-font-size-4)/var(--co-base-line-height-4) var(--co-base-font-family-heading); /** The smallest heading; Alert's title builds on it. */
950
+ --co-semantic-typography-subtitle: var(--co-semantic-font-weight-medium) var(--co-base-font-size-3)/var(--co-base-line-height-4) var(--co-base-font-family-body); /** Subtitle: a short line under a heading. */
951
+ --co-semantic-typography-body: var(--co-semantic-font-weight-regular) var(--co-base-font-size-3)/var(--co-base-line-height-4) var(--co-base-font-family-body); /** Body text: paragraphs and input values. The default text style. */
952
+ --co-semantic-typography-small: var(--co-semantic-font-weight-regular) var(--co-base-font-size-2)/var(--co-base-line-height-3) var(--co-base-font-family-body); /** Small text: secondary copy and compact controls. */
953
+ --co-semantic-typography-overline: var(--co-semantic-font-weight-bold) var(--co-base-font-size-1)/var(--co-base-line-height-1) var(--co-base-font-family-body); /** A short uppercase label above a heading. */
954
+ --co-semantic-typography-caption: var(--co-semantic-font-weight-regular) var(--co-base-font-size-1)/var(--co-base-line-height-1) var(--co-base-font-family-body); /** Captions: helper text, metadata and image captions. */
955
+ --co-semantic-typography-button1: var(--co-semantic-font-weight-medium) var(--co-base-font-size-3)/var(--co-base-line-height-4) var(--co-base-font-family-body); /** Deprecated: Moved to the component tier as component.button.sizes.large.font (decision 0031 §6). Removed in 3.0. */
956
+ --co-semantic-typography-button2: var(--co-semantic-font-weight-medium) var(--co-base-font-size-2)/var(--co-base-line-height-4) var(--co-base-font-family-body); /** Deprecated: Moved to the component tier as component.button.sizes.medium.font (decision 0031 §6). Removed in 3.0. */
957
+ --co-semantic-typography-button3: var(--co-semantic-font-weight-medium) var(--co-base-font-size-1)/var(--co-base-line-height-1) var(--co-base-font-family-body); /** Deprecated: Moved to the component tier as component.button.sizes.small.font (decision 0031 §6). Removed in 3.0. */
958
+ --co-semantic-typography-label: var(--co-semantic-font-weight-semibold) var(--co-base-font-size-2)/var(--co-base-line-height-3) var(--co-base-font-family-body); /** Form labels for fields such as TextField and Slider. */
959
+ --co-semantic-typography-breadcrumb: var(--co-semantic-font-weight-regular) var(--co-base-font-size-1)/var(--co-base-line-height-2) var(--co-base-font-family-body); /** Deprecated: Moved to the component tier as component.breadcrumbs.font (decision 0031 §6). Removed in 3.0. */
746
960
  --co-component-button-primary-font: var(--co-semantic-typography-button1); /** Button label typography, the same as sizes.large.font. */
747
- --co-component-button-variants-emphasis-background-color: var(--co-component-button-variants-accent-background-color); /** Deprecated: use component.button.variants.accent.backgroundColor. Alias kept until 3.0 (decision 0016). */
748
- --co-component-button-variants-emphasis-text-color: var(--co-component-button-variants-accent-text-color); /** Deprecated: use component.button.variants.accent.textColor. Alias kept until 3.0 (decision 0016). */
749
- --co-component-button-variants-emphasis-hover-background-color: var(--co-component-button-variants-accent-hover-background-color); /** Deprecated: use component.button.variants.accent.hover.backgroundColor. Alias kept until 3.0 (decision 0016). */
750
- --co-component-button-variants-emphasis-active-background-color: var(--co-component-button-variants-accent-active-background-color); /** Deprecated: use component.button.variants.accent.active.backgroundColor. Alias kept until 3.0 (decision 0016). */
751
- --co-component-button-variants-emphasis-disabled-background-color: var(--co-component-button-variants-accent-disabled-background-color); /** Deprecated: use component.button.variants.accent.disabled.backgroundColor. Alias kept until 3.0 (decision 0016). */
752
- --co-component-button-variants-emphasis-disabled-text-color: var(--co-component-button-variants-accent-disabled-text-color); /** Deprecated: use component.button.variants.accent.disabled.textColor. Alias kept until 3.0 (decision 0016). */
753
- --co-component-button-sizes-small-font: var(--co-semantic-typography-button3); /** Small Button label typography. */
754
- --co-component-button-sizes-medium-font: var(--co-semantic-typography-button2); /** Medium Button label typography. */
755
- --co-component-button-sizes-large-font: var(--co-semantic-typography-button1); /** Large Button label typography. */
961
+ --co-component-button-variants-emphasis-background-color: var(--co-component-button-variants-accent-background-color); /** Deprecated: Use component.button.variants.accent.backgroundColor. Alias kept until 3.0 (decision 0016). */
962
+ --co-component-button-variants-emphasis-text-color: var(--co-component-button-variants-accent-text-color); /** Deprecated: Use component.button.variants.accent.textColor. Alias kept until 3.0 (decision 0016). */
963
+ --co-component-button-variants-emphasis-hover-background-color: var(--co-component-button-variants-accent-hover-background-color); /** Deprecated: Use component.button.variants.accent.hover.backgroundColor. Alias kept until 3.0 (decision 0016). */
964
+ --co-component-button-variants-emphasis-active-background-color: var(--co-component-button-variants-accent-active-background-color); /** Deprecated: Use component.button.variants.accent.active.backgroundColor. Alias kept until 3.0 (decision 0016). */
965
+ --co-component-button-variants-emphasis-disabled-background-color: var(--co-component-button-variants-accent-disabled-background-color); /** Deprecated: Use component.button.variants.accent.disabled.backgroundColor. Alias kept until 3.0 (decision 0016). */
966
+ --co-component-button-variants-emphasis-disabled-text-color: var(--co-component-button-variants-accent-disabled-text-color); /** Deprecated: Use component.button.variants.accent.disabled.textColor. Alias kept until 3.0 (decision 0016). */
756
967
  --co-component-chip-default-font: var(--co-semantic-typography-body); /** Chip label typography, the same as sizes.large.font. */
757
- --co-component-chip-sizes-small-font: var(--co-semantic-typography-caption); /** Small chip label typography. */
758
- --co-component-chip-sizes-medium-font: var(--co-semantic-typography-small); /** Medium chip label typography. */
759
- --co-component-chip-sizes-large-font: var(--co-semantic-typography-body); /** Large chip label typography. No chip uses the large size today. */
968
+ --co-component-chip-sizes-small-font: var(--co-semantic-typography-caption); /** Deprecated: Chips have one size (decision 0035). Use component.chip.sizes.medium.font. Removed in 3.0. */
969
+ --co-component-chip-sizes-medium-font: var(--co-semantic-typography-small); /** Chip label typography. Every chip uses it: chips have one size (decision 0035). */
970
+ --co-component-chip-sizes-large-font: var(--co-semantic-typography-body); /** Deprecated: Chips have one size (decision 0035). Use component.chip.sizes.medium.font. Removed in 3.0. */
760
971
  --co-component-input-default-font: var(--co-semantic-typography-body); /** Text input value typography. */
761
972
  --co-component-badge-label-typography-small: var(--co-semantic-typography-caption); /** Typography for small labels in the badge-like family (StatusBadge, CategoryBadge small; Tag). Combine with label.fontWeight. */
762
973
  --co-component-badge-label-typography-medium: var(--co-semantic-typography-small); /** Typography for medium labels in the badge-like family (StatusBadge, CategoryBadge medium). Combine with label.fontWeight. */
@@ -767,3 +978,80 @@
767
978
  --co-component-tab-bar-badge-typography: var(--co-semantic-typography-caption); /** Tab count badge text. */
768
979
  --co-component-search-field-section-header-typography: var(--co-semantic-typography-caption); /** Suggestion-list section header text (shown uppercase). */
769
980
  }
981
+
982
+ /* Mode: density (decision 0032). Control heights and control insets for a region, set with data-co-density on any element (decisions 0032 and 0034, #191). Rows and layout spacing don't change. */
983
+
984
+ [data-co-density="default"] {
985
+ --co-semantic-size-control-sm: var(--co-base-dimension-8); /** Minimum height of small controls: small Buttons and IconButtons, buttons inside fields (decision 0034). */
986
+ --co-semantic-size-control-md: var(--co-base-dimension-10); /** Minimum height of medium controls: the default IconButton, medium Buttons (decision 0034). */
987
+ --co-semantic-size-control-lg: var(--co-base-dimension-12); /** Minimum height of large controls: text fields, Dropdown, SearchField, the default Button (decision 0034). */
988
+ --co-semantic-space-inset-xs: var(--co-base-dimension-1); /** Tightest padding inside a component, such as around an icon in a small control. */
989
+ --co-semantic-space-inset-sm: var(--co-base-dimension-2); /** Small padding inside a component: chip sides, icon-to-label gaps, compact buttons. */
990
+ --co-semantic-space-inset-md: var(--co-base-dimension-3); /** Medium padding inside a component: form field insides, medium IconButtons. */
991
+ --co-semantic-space-inset-lg: var(--co-base-dimension-4); /** Large padding inside a component: button and input sides, card insides. */
992
+ --co-semantic-space-inset-xl: var(--co-base-dimension-5); /** Generous padding inside a component, such as a prominent call to action. */
993
+ --co-semantic-space-inset-2xl: var(--co-base-dimension-6); /** Largest padding inside a component: large cards, spacious form sections. */
994
+ --co-component-button-primary-padding: var(--co-semantic-space-inset-md) var(--co-semantic-space-inset-lg); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.md and .lg. Removed in 3.0. */
995
+ --co-component-button-sizes-small-padding: var(--co-semantic-space-inset-sm) var(--co-semantic-space-inset-md); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.sm and .md. Removed in 3.0. */
996
+ --co-component-button-sizes-medium-padding: var(--co-semantic-space-inset-sm) var(--co-semantic-space-inset-lg); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.sm and .lg. Removed in 3.0. */
997
+ --co-component-button-sizes-large-padding: var(--co-semantic-space-inset-md) var(--co-semantic-space-inset-lg); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.md and .lg. Removed in 3.0. */
998
+ --co-component-chip-default-padding: 2px var(--co-semantic-space-inset-sm); /** Deprecated: No component spacing tokens (decision 0022). No chip reads it; chips take padding per size. Removed in 3.0. */
999
+ --co-component-chip-sizes-small-padding: 2px var(--co-semantic-space-inset-sm); /** Deprecated: Chips take their min-height from semantic.size.label.medium with no vertical padding, and semantic.spacing.component.sm horizontally (decisions 0022, 0034 and 0035). Removed in 3.0. */
1000
+ --co-component-chip-sizes-medium-padding: 2px var(--co-semantic-space-inset-sm); /** Deprecated: Chips take their min-height from semantic.size.label.medium with no vertical padding, and semantic.spacing.component.sm horizontally (decisions 0022, 0034 and 0035). Removed in 3.0. */
1001
+ --co-component-chip-sizes-large-padding: var(--co-semantic-space-inset-sm) var(--co-semantic-space-inset-md); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.sm and .md. Removed in 3.0. */
1002
+ --co-component-icon-button-sizes-small-padding: var(--co-semantic-space-inset-xs); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.inset.xs. Removed in 3.0. */
1003
+ --co-component-icon-button-sizes-medium-padding: var(--co-semantic-space-inset-sm); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.inset.sm. Removed in 3.0. */
1004
+ --co-component-icon-button-sizes-large-padding: var(--co-semantic-space-inset-md); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.inset.md. Removed in 3.0. */
1005
+ --co-component-input-default-padding-x: var(--co-semantic-space-inset-lg); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.inset.lg. Removed in 3.0. */
1006
+ --co-component-badge-count-padding-x: var(--co-semantic-space-inset-xs); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.inset.xs. Removed in 3.0. */
1007
+ }
1008
+
1009
+ [data-co-density="compact"] {
1010
+ --co-semantic-size-control-sm: var(--co-base-dimension-6); /** Minimum height of small controls: small Buttons and IconButtons, buttons inside fields (decision 0034). */
1011
+ --co-semantic-size-control-md: var(--co-base-dimension-8); /** Minimum height of medium controls: the default IconButton, medium Buttons (decision 0034). */
1012
+ --co-semantic-size-control-lg: var(--co-base-dimension-10); /** Minimum height of large controls: text fields, Dropdown, SearchField, the default Button (decision 0034). */
1013
+ --co-semantic-space-inset-xs: var(--co-base-dimension-1); /** Tightest padding inside a component, such as around an icon in a small control. */
1014
+ --co-semantic-space-inset-sm: var(--co-base-dimension-1); /** Small padding inside a component: chip sides, icon-to-label gaps, compact buttons. */
1015
+ --co-semantic-space-inset-md: var(--co-base-dimension-2); /** Medium padding inside a component: form field insides, medium IconButtons. */
1016
+ --co-semantic-space-inset-lg: var(--co-base-dimension-3); /** Large padding inside a component: button and input sides, card insides. */
1017
+ --co-semantic-space-inset-xl: var(--co-base-dimension-4); /** Generous padding inside a component, such as a prominent call to action. */
1018
+ --co-semantic-space-inset-2xl: var(--co-base-dimension-5); /** Largest padding inside a component: large cards, spacious form sections. */
1019
+ --co-component-button-primary-padding: var(--co-semantic-space-inset-md) var(--co-semantic-space-inset-lg); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.md and .lg. Removed in 3.0. */
1020
+ --co-component-button-sizes-small-padding: var(--co-semantic-space-inset-sm) var(--co-semantic-space-inset-md); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.sm and .md. Removed in 3.0. */
1021
+ --co-component-button-sizes-medium-padding: var(--co-semantic-space-inset-sm) var(--co-semantic-space-inset-lg); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.sm and .lg. Removed in 3.0. */
1022
+ --co-component-button-sizes-large-padding: var(--co-semantic-space-inset-md) var(--co-semantic-space-inset-lg); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.md and .lg. Removed in 3.0. */
1023
+ --co-component-chip-default-padding: 2px var(--co-semantic-space-inset-sm); /** Deprecated: No component spacing tokens (decision 0022). No chip reads it; chips take padding per size. Removed in 3.0. */
1024
+ --co-component-chip-sizes-small-padding: 2px var(--co-semantic-space-inset-sm); /** Deprecated: Chips take their min-height from semantic.size.label.medium with no vertical padding, and semantic.spacing.component.sm horizontally (decisions 0022, 0034 and 0035). Removed in 3.0. */
1025
+ --co-component-chip-sizes-medium-padding: 2px var(--co-semantic-space-inset-sm); /** Deprecated: Chips take their min-height from semantic.size.label.medium with no vertical padding, and semantic.spacing.component.sm horizontally (decisions 0022, 0034 and 0035). Removed in 3.0. */
1026
+ --co-component-chip-sizes-large-padding: var(--co-semantic-space-inset-sm) var(--co-semantic-space-inset-md); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.sm and .md. Removed in 3.0. */
1027
+ --co-component-icon-button-sizes-small-padding: var(--co-semantic-space-inset-xs); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.inset.xs. Removed in 3.0. */
1028
+ --co-component-icon-button-sizes-medium-padding: var(--co-semantic-space-inset-sm); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.inset.sm. Removed in 3.0. */
1029
+ --co-component-icon-button-sizes-large-padding: var(--co-semantic-space-inset-md); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.inset.md. Removed in 3.0. */
1030
+ --co-component-input-default-padding-x: var(--co-semantic-space-inset-lg); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.inset.lg. Removed in 3.0. */
1031
+ --co-component-badge-count-padding-x: var(--co-semantic-space-inset-xs); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.inset.xs. Removed in 3.0. */
1032
+ }
1033
+
1034
+ [data-co-density="comfortable"] {
1035
+ --co-semantic-size-control-sm: var(--co-base-dimension-10); /** Minimum height of small controls: small Buttons and IconButtons, buttons inside fields (decision 0034). */
1036
+ --co-semantic-size-control-md: var(--co-base-dimension-12); /** Minimum height of medium controls: the default IconButton, medium Buttons (decision 0034). */
1037
+ --co-semantic-size-control-lg: var(--co-base-dimension-14); /** Minimum height of large controls: text fields, Dropdown, SearchField, the default Button (decision 0034). */
1038
+ --co-semantic-space-inset-xs: var(--co-base-dimension-2); /** Tightest padding inside a component, such as around an icon in a small control. */
1039
+ --co-semantic-space-inset-sm: var(--co-base-dimension-3); /** Small padding inside a component: chip sides, icon-to-label gaps, compact buttons. */
1040
+ --co-semantic-space-inset-md: var(--co-base-dimension-4); /** Medium padding inside a component: form field insides, medium IconButtons. */
1041
+ --co-semantic-space-inset-lg: var(--co-base-dimension-5); /** Large padding inside a component: button and input sides, card insides. */
1042
+ --co-semantic-space-inset-xl: var(--co-base-dimension-6); /** Generous padding inside a component, such as a prominent call to action. */
1043
+ --co-semantic-space-inset-2xl: var(--co-base-dimension-7); /** Largest padding inside a component: large cards, spacious form sections. */
1044
+ --co-component-button-primary-padding: var(--co-semantic-space-inset-md) var(--co-semantic-space-inset-lg); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.md and .lg. Removed in 3.0. */
1045
+ --co-component-button-sizes-small-padding: var(--co-semantic-space-inset-sm) var(--co-semantic-space-inset-md); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.sm and .md. Removed in 3.0. */
1046
+ --co-component-button-sizes-medium-padding: var(--co-semantic-space-inset-sm) var(--co-semantic-space-inset-lg); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.sm and .lg. Removed in 3.0. */
1047
+ --co-component-button-sizes-large-padding: var(--co-semantic-space-inset-md) var(--co-semantic-space-inset-lg); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.md and .lg. Removed in 3.0. */
1048
+ --co-component-chip-default-padding: 2px var(--co-semantic-space-inset-sm); /** Deprecated: No component spacing tokens (decision 0022). No chip reads it; chips take padding per size. Removed in 3.0. */
1049
+ --co-component-chip-sizes-small-padding: 2px var(--co-semantic-space-inset-sm); /** Deprecated: Chips take their min-height from semantic.size.label.medium with no vertical padding, and semantic.spacing.component.sm horizontally (decisions 0022, 0034 and 0035). Removed in 3.0. */
1050
+ --co-component-chip-sizes-medium-padding: 2px var(--co-semantic-space-inset-sm); /** Deprecated: Chips take their min-height from semantic.size.label.medium with no vertical padding, and semantic.spacing.component.sm horizontally (decisions 0022, 0034 and 0035). Removed in 3.0. */
1051
+ --co-component-chip-sizes-large-padding: var(--co-semantic-space-inset-sm) var(--co-semantic-space-inset-md); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.spacing.component.sm and .md. Removed in 3.0. */
1052
+ --co-component-icon-button-sizes-small-padding: var(--co-semantic-space-inset-xs); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.inset.xs. Removed in 3.0. */
1053
+ --co-component-icon-button-sizes-medium-padding: var(--co-semantic-space-inset-sm); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.inset.sm. Removed in 3.0. */
1054
+ --co-component-icon-button-sizes-large-padding: var(--co-semantic-space-inset-md); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.inset.md. Removed in 3.0. */
1055
+ --co-component-input-default-padding-x: var(--co-semantic-space-inset-lg); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.inset.lg. Removed in 3.0. */
1056
+ --co-component-badge-count-padding-x: var(--co-semantic-space-inset-xs); /** Deprecated: No component spacing tokens (decision 0022). Use semantic.space.inset.xs. Removed in 3.0. */
1057
+ }