@assure-one/design-system 1.31.0 → 1.33.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 (42) hide show
  1. package/README.md +61 -6
  2. package/codemods/0.2.0-radix-migration.mjs +315 -0
  3. package/codemods/README.md +365 -0
  4. package/codemods/lib/css-selectors.mjs +33 -0
  5. package/codemods/lib/css-values.mjs +223 -0
  6. package/codemods/lib/ds-stylesheet.mjs +168 -0
  7. package/codemods/lib/environment.mjs +72 -0
  8. package/codemods/lib/files.mjs +100 -0
  9. package/codemods/lib/forms.mjs +253 -0
  10. package/codemods/lib/jsx.mjs +0 -0
  11. package/codemods/lib/ledger.mjs +84 -0
  12. package/codemods/lib/registry.mjs +32 -0
  13. package/codemods/lib/report.mjs +119 -0
  14. package/codemods/lib/runner.mjs +164 -0
  15. package/codemods/run.mjs +161 -0
  16. package/codemods/transforms/cm-14-hidden-mirrors.mjs +275 -0
  17. package/codemods/transforms/cm-15-dom-selectors.mjs +573 -0
  18. package/codemods/transforms/cm-16-globals-css.mjs +487 -0
  19. package/codemods/transforms/cm-20-select-sentinels.mjs +442 -0
  20. package/dist/css/base.css +60 -0
  21. package/dist/css/components.css +7 -0
  22. package/dist/css/legacy-aliases.css +665 -0
  23. package/dist/css/shadcn.css +155 -0
  24. package/dist/css/tailwind.css +296 -0
  25. package/dist/css/tokens.css +630 -0
  26. package/dist/index.d.ts +807 -27
  27. package/dist/index.js +2038 -683
  28. package/dist/index.js.map +1 -1
  29. package/dist/styles.css +1 -1
  30. package/dist/system-BDU18fVg.d.ts +559 -0
  31. package/dist/testing/index.cjs +458 -0
  32. package/dist/testing/index.d.cts +253 -0
  33. package/dist/testing/index.d.ts +253 -0
  34. package/dist/testing/index.js +452 -0
  35. package/dist/testing/setup.cjs +123 -0
  36. package/dist/testing/setup.js +121 -0
  37. package/dist/testing/style-stub.cjs +7 -0
  38. package/dist/testing/style-stub.js +5 -0
  39. package/dist/tokens/index.d.ts +50 -439
  40. package/dist/tokens/index.js +557 -50
  41. package/dist/tokens/index.js.map +1 -1
  42. package/package.json +74 -5
package/dist/css/legacy-aliases.css ADDED
@@ -0,0 +1,665 @@
1
+ /* GENERATED FILE — do not edit.
2
+ * Read-aliases from today's token names to the namespaced ones (ADR-004 rule 9).
3
+ * Import this for as long as the app's own CSS or inline styles read DS token
4
+ * names by their un-namespaced spelling. Writing one still needs the compat
5
+ * bridge of ADR-004 rule 7.
6
+ * Source: tokens/src (DTCG, ADR-003). Generator: tokens/build/generate-ds-css.mjs.
7
+ * Change the token files and run `pnpm tokens:build`; `pnpm tokens:check` fails
8
+ * when this file is out of date. */
9
+
10
+ @layer theme, base, ds, components, utilities;
11
+
12
+ :root {
13
+ --color-bg: var(--ds-color-canvas);
14
+ --color-bg-2: var(--ds-color-canvas-sunken);
15
+ --color-bg-3: var(--ds-color-canvas-sunken-strong);
16
+ --color-surface: var(--ds-color-surface);
17
+ --color-surface-2: var(--ds-color-surface-sunken);
18
+ --color-surface-3: var(--ds-color-surface-sunken-strong);
19
+ --color-fg: var(--ds-color-content);
20
+ --color-fg-2: var(--ds-color-content-secondary);
21
+ --color-fg-3: var(--ds-color-content-muted);
22
+ --color-fg-4: var(--ds-color-content-subtle);
23
+ --color-fg-5: var(--ds-color-content-faint);
24
+ --color-rule: var(--ds-color-border);
25
+ --color-rule-soft: var(--ds-color-border-subtle);
26
+ --color-rule-strong: var(--ds-color-border-strong);
27
+ --color-accent: var(--ds-color-action-accent-bg);
28
+ --color-accent-2: var(--ds-color-action-accent-bg-strong);
29
+ --color-accent-tint: var(--ds-color-action-accent-subtle-bg);
30
+ --color-accent-hover: var(--ds-color-action-accent-bg-hover);
31
+ --color-accent-active: var(--ds-color-action-accent-bg-active);
32
+ --color-accent-ring: var(--ds-color-action-accent-ring);
33
+ --color-suite-action: var(--ds-color-action-suite-bg);
34
+ --color-suite-action-hover: var(--ds-color-action-suite-bg-hover);
35
+ --color-suite-action-active: var(--ds-color-action-suite-bg-active);
36
+ --color-fg-on-suite-action: var(--ds-color-action-suite-fg);
37
+ --color-pro-bg: var(--ds-ref-brand-pro-bg);
38
+ --color-pro-bg-hover: var(--ds-ref-brand-pro-bg-hover);
39
+ --color-pro-bg-active: var(--ds-ref-brand-pro-bg-active);
40
+ --color-pro-fg: var(--ds-ref-brand-pro-fg);
41
+ --color-pro-hover: var(--ds-ref-brand-pro-fg-hover);
42
+ --color-pro-active: var(--ds-ref-brand-pro-fg-active);
43
+ --color-pro-disabled: var(--ds-ref-brand-pro-fg-disabled);
44
+ --color-pro-line: var(--ds-ref-brand-pro-border);
45
+ --color-pro-ring: var(--ds-ref-brand-pro-ring);
46
+ --color-brand: var(--ds-color-action-brand-bg);
47
+ --color-brand-hover: var(--ds-color-action-brand-bg-hover);
48
+ --color-brand-active: var(--ds-color-action-brand-bg-active);
49
+ --color-brand-disabled: var(--ds-color-action-brand-bg-disabled);
50
+ --color-brand-bg: var(--ds-color-action-brand-subtle-bg);
51
+ --color-brand-bg-hover: var(--ds-color-action-brand-subtle-bg-hover);
52
+ --color-brand-bg-active: var(--ds-color-action-brand-subtle-bg-active);
53
+ --color-brand-line: var(--ds-color-action-brand-border);
54
+ --color-brand-ring: var(--ds-color-action-brand-ring);
55
+ --color-fg-on-brand: var(--ds-color-action-brand-fg);
56
+ --color-brand-pro: var(--ds-ref-brand-pro-seed);
57
+ --color-brand-audit: var(--ds-ref-brand-audit-seed);
58
+ --color-brand-books: var(--ds-ref-brand-books-seed);
59
+ --color-brand-tax: var(--ds-ref-brand-tax-seed);
60
+ --color-audit-fg: var(--ds-ref-brand-audit-fg);
61
+ --color-audit-hover: var(--ds-ref-brand-audit-fg-hover);
62
+ --color-audit-active: var(--ds-ref-brand-audit-fg-active);
63
+ --color-audit-disabled: var(--ds-ref-brand-audit-fg-disabled);
64
+ --color-audit-bg: var(--ds-ref-brand-audit-bg);
65
+ --color-audit-bg-hover: var(--ds-ref-brand-audit-bg-hover);
66
+ --color-audit-bg-active: var(--ds-ref-brand-audit-bg-active);
67
+ --color-audit-line: var(--ds-ref-brand-audit-border);
68
+ --color-audit-ring: var(--ds-ref-brand-audit-ring);
69
+ --color-fg-on-audit: var(--ds-ref-brand-audit-on-fg);
70
+ --color-books-fg: var(--ds-ref-brand-books-fg);
71
+ --color-books-hover: var(--ds-ref-brand-books-fg-hover);
72
+ --color-books-active: var(--ds-ref-brand-books-fg-active);
73
+ --color-books-disabled: var(--ds-ref-brand-books-fg-disabled);
74
+ --color-books-bg: var(--ds-ref-brand-books-bg);
75
+ --color-books-bg-hover: var(--ds-ref-brand-books-bg-hover);
76
+ --color-books-bg-active: var(--ds-ref-brand-books-bg-active);
77
+ --color-books-line: var(--ds-ref-brand-books-border);
78
+ --color-books-ring: var(--ds-ref-brand-books-ring);
79
+ --color-fg-on-books: var(--ds-ref-brand-books-on-fg);
80
+ --color-tax-fg: var(--ds-ref-brand-tax-fg);
81
+ --color-tax-hover: var(--ds-ref-brand-tax-fg-hover);
82
+ --color-tax-active: var(--ds-ref-brand-tax-fg-active);
83
+ --color-tax-disabled: var(--ds-ref-brand-tax-fg-disabled);
84
+ --color-tax-bg: var(--ds-ref-brand-tax-bg);
85
+ --color-tax-bg-hover: var(--ds-ref-brand-tax-bg-hover);
86
+ --color-tax-bg-active: var(--ds-ref-brand-tax-bg-active);
87
+ --color-tax-line: var(--ds-ref-brand-tax-border);
88
+ --color-tax-ring: var(--ds-ref-brand-tax-ring);
89
+ --color-fg-on-tax: var(--ds-ref-brand-tax-on-fg);
90
+ --gradient-brand: var(--ds-gradient-brand);
91
+ --gradient-pro: var(--ds-ref-gradient-brand-pro);
92
+ --gradient-audit: var(--ds-ref-gradient-brand-audit);
93
+ --gradient-books: var(--ds-ref-gradient-brand-books);
94
+ --gradient-tax: var(--ds-ref-gradient-brand-tax);
95
+ --gradient-ai: var(--ds-gradient-ai);
96
+ --color-fg-on-accent: var(--ds-color-action-accent-fg);
97
+ --color-fg-on-pro: var(--ds-ref-brand-pro-on-fg);
98
+ --color-fg-on-danger: var(--ds-color-feedback-danger-solid-fg);
99
+ --color-fg-on-success: var(--ds-color-feedback-success-solid-fg);
100
+ --color-fg-on-selection: var(--ds-selection-fg);
101
+ --color-fg-disabled: var(--ds-color-content-disabled);
102
+ --color-bg-disabled: var(--ds-color-state-disabled-bg);
103
+ --color-overlay-hover: var(--ds-color-state-hover);
104
+ --color-overlay-active: var(--ds-color-state-active);
105
+ --color-control-bg: var(--ds-control-bg);
106
+ --color-control-fg: var(--ds-control-fg);
107
+ --color-control-muted-fg: var(--ds-control-muted-fg);
108
+ --color-control-hover-bg: var(--ds-control-hover-bg);
109
+ --color-control-hover-fg: var(--ds-control-hover-fg);
110
+ --color-control-active-bg: var(--ds-control-active-bg);
111
+ --color-control-border: var(--ds-control-border);
112
+ --color-control-border-strong: var(--ds-control-border-strong);
113
+ --color-control-border-hover: var(--ds-control-border-hover);
114
+ --color-control-secondary-bg: var(--ds-control-neutral-bg);
115
+ --color-control-destructive-fg: var(--ds-control-danger-fg);
116
+ --color-control-destructive-hover-bg: var(--ds-control-danger-hover-bg);
117
+ --color-menu-bg: var(--ds-menu-bg);
118
+ --color-menu-fg: var(--ds-menu-fg);
119
+ --color-menu-border: var(--ds-menu-border);
120
+ --color-menu-label-fg: var(--ds-menu-label-fg);
121
+ --color-menu-item-fg: var(--ds-menu-item-fg);
122
+ --color-menu-item-hover-bg: var(--ds-menu-item-hover-bg);
123
+ --color-menu-item-hover-fg: var(--ds-menu-item-hover-fg);
124
+ --color-menu-item-destructive-fg: var(--ds-menu-item-danger-fg);
125
+ --color-menu-item-destructive-hover-bg: var(--ds-menu-item-danger-hover-bg);
126
+ --color-menu-item-destructive-hover-fg: var(--ds-menu-item-danger-hover-fg);
127
+ --color-menu-shortcut-fg: var(--ds-menu-shortcut-fg);
128
+ --color-selection-floating-bg: var(--ds-selection-floating-bg);
129
+ --color-selection-floating-fg: var(--ds-selection-floating-fg);
130
+ --color-selection-floating-muted-fg: var(--ds-selection-floating-muted-fg);
131
+ --color-selection-floating-hover-bg: var(--ds-selection-floating-hover-bg);
132
+ --color-selection-floating-active-bg: var(--ds-selection-floating-active-bg);
133
+ --color-selection-floating-rule: var(--ds-selection-floating-border);
134
+ --color-success-fg: var(--ds-color-feedback-success-fg);
135
+ --color-success-fg-hover: var(--ds-color-feedback-success-fg-hover);
136
+ --color-success-fg-active: var(--ds-color-feedback-success-fg-active);
137
+ --color-success-bg: var(--ds-color-feedback-success-bg);
138
+ --color-success-line: var(--ds-color-feedback-success-border);
139
+ --color-warning-fg: var(--ds-color-feedback-warning-fg);
140
+ --color-warning-bg: var(--ds-color-feedback-warning-bg);
141
+ --color-warning-line: var(--ds-color-feedback-warning-border);
142
+ --color-danger-fg: var(--ds-color-feedback-danger-fg);
143
+ --color-danger-fg-hover: var(--ds-color-feedback-danger-fg-hover);
144
+ --color-danger-fg-active: var(--ds-color-feedback-danger-fg-active);
145
+ --color-danger-bg: var(--ds-color-feedback-danger-bg);
146
+ --color-danger-line: var(--ds-color-feedback-danger-border);
147
+ --color-priority-low: var(--ds-color-priority-low);
148
+ --color-priority-medium: var(--ds-color-priority-medium);
149
+ --color-priority-high: var(--ds-color-priority-high);
150
+ --color-priority-urgent: var(--ds-color-priority-urgent);
151
+ --focus-ring-color: var(--ds-focus-ring-color);
152
+ --focus-ring-border: var(--ds-focus-ring-border);
153
+ --color-chart-1: var(--ds-color-chart-1);
154
+ --color-chart-2: var(--ds-color-chart-2);
155
+ --color-chart-3: var(--ds-color-chart-3);
156
+ --color-chart-4: var(--ds-color-chart-4);
157
+ --color-chart-line: var(--ds-color-chart-line);
158
+ --color-chart-area-from: var(--ds-color-chart-area-from);
159
+ --color-chart-area-to: var(--ds-color-chart-area-to);
160
+ --color-service-tax: var(--ds-color-service-tax);
161
+ --color-service-tax-bg: var(--ds-color-service-tax-bg);
162
+ --color-service-audit: var(--ds-color-service-audit);
163
+ --color-service-audit-bg: var(--ds-color-service-audit-bg);
164
+ --color-service-accounting: var(--ds-color-service-accounting);
165
+ --color-service-accounting-bg: var(--ds-color-service-accounting-bg);
166
+ --shadow-focus-ring: var(--ds-shadow-focus-ring);
167
+ --shadow-quiet: var(--ds-shadow-quiet);
168
+ --shadow-card: var(--ds-shadow-card);
169
+ --shadow-pop: var(--ds-shadow-pop);
170
+ --shadow-xs: var(--ds-ref-shadow-xs);
171
+ --shadow-sm: var(--ds-ref-shadow-sm);
172
+ --shadow-md: var(--ds-ref-shadow-md);
173
+ --shadow-lg: var(--ds-ref-shadow-lg);
174
+ --shadow-xl: var(--ds-ref-shadow-xl);
175
+ --shadow-2xl: var(--ds-ref-shadow-2xl);
176
+ --font-display: var(--ds-font-display);
177
+ --font-body: var(--ds-font-body);
178
+ --font-mono: var(--ds-font-mono);
179
+ --font-sans: var(--ds-font-sans);
180
+ --font-weight-regular: var(--ds-ref-font-weight-regular);
181
+ --font-weight-medium: var(--ds-ref-font-weight-medium);
182
+ --font-weight-semibold: var(--ds-ref-font-weight-semibold);
183
+ --font-weight-bold: var(--ds-ref-font-weight-bold);
184
+ --radius-btn: var(--ds-radius-control);
185
+ --radius-input: var(--ds-radius-control);
186
+ --radius-pill: var(--ds-radius-chip);
187
+ --radius-card: var(--ds-radius-surface);
188
+ --radius-icon: var(--ds-radius-badge);
189
+ --radius-full: var(--ds-radius-full);
190
+ --ease-out-quart: var(--ds-ref-ease-enter);
191
+ --ease-out: var(--ds-ref-ease-emphasized);
192
+ --ease-in: var(--ds-ref-ease-exit);
193
+ --ease-in-out: var(--ds-ref-ease-standard);
194
+ --duration-instant: var(--ds-ref-duration-instant);
195
+ --duration-fast: var(--ds-ref-duration-fast);
196
+ --duration-overlay: var(--ds-ref-duration-moderate);
197
+ --duration-normal: var(--ds-ref-duration-slow);
198
+ --duration-slow: var(--ds-ref-duration-slower);
199
+ --motion-duration-press: var(--ds-motion-duration-press);
200
+ --motion-duration-feedback: var(--ds-motion-duration-feedback);
201
+ --motion-duration-overlay: var(--ds-motion-duration-overlay);
202
+ --motion-duration-spatial: var(--ds-motion-duration-spatial);
203
+ --motion-duration-deliberate: var(--ds-motion-duration-deliberate);
204
+ --motion-ease-enter: var(--ds-motion-ease-enter);
205
+ --motion-ease-exit: var(--ds-motion-ease-exit);
206
+ --motion-ease-move: var(--ds-motion-ease-move);
207
+ --shell-sidebar-w: var(--ds-layout-shell-sidebar-width);
208
+ --shell-sidebar-w-rail: var(--ds-layout-shell-sidebar-rail-width);
209
+ --shell-header-h: var(--ds-layout-shell-header-height);
210
+ --content-pad: var(--ds-layout-content-padding);
211
+ --animate-accordion-down: var(--ds-animate-accordion-down);
212
+ --animate-accordion-up: var(--ds-animate-accordion-up);
213
+ --animate-collapsible-down: var(--ds-animate-collapsible-down);
214
+ --animate-collapsible-up: var(--ds-animate-collapsible-up);
215
+ --z-base: var(--ds-z-base);
216
+ --z-sticky: var(--ds-z-sticky);
217
+ --z-overlay: var(--ds-z-overlay);
218
+ --z-modal: var(--ds-z-modal);
219
+ --z-dropdown: var(--ds-z-popover);
220
+ --z-toast: var(--ds-z-toast);
221
+ --z-tooltip: var(--ds-z-tooltip);
222
+ --color-background: var(--ds-color-canvas);
223
+ --color-foreground: var(--ds-color-content);
224
+ --color-card: var(--ds-color-surface);
225
+ --color-card-foreground: var(--ds-color-content);
226
+ --color-popover: var(--ds-color-surface);
227
+ --color-popover-foreground: var(--ds-color-content);
228
+ --color-primary: var(--ds-color-action-brand-bg);
229
+ --color-primary-foreground: var(--ds-color-action-brand-fg);
230
+ --color-secondary: var(--ds-color-canvas-sunken);
231
+ --color-secondary-foreground: var(--ds-color-content-secondary);
232
+ --color-muted: var(--ds-color-canvas-sunken);
233
+ --color-muted-foreground: var(--ds-color-content-muted);
234
+ --color-accent-foreground: var(--ds-color-action-accent-fg);
235
+ --color-destructive: var(--ds-color-feedback-danger-fg);
236
+ --color-destructive-foreground: var(--ds-compat-color-destructive-foreground);
237
+ --color-success: var(--ds-color-feedback-success-fg);
238
+ --color-success-foreground: var(--ds-compat-color-success-foreground);
239
+ --color-warning: var(--ds-color-feedback-warning-fg);
240
+ --color-info: var(--ds-color-feedback-info-fg);
241
+ --color-brand-foreground: var(--ds-color-action-brand-fg);
242
+ --color-brand-soft: var(--ds-compat-color-brand-soft);
243
+ --color-brand-soft-foreground: var(--ds-compat-color-brand-soft-foreground);
244
+ --color-border: var(--ds-color-border);
245
+ --color-input: var(--ds-color-border-strong);
246
+ --color-input-background: var(--ds-color-surface);
247
+ --color-ring: var(--ds-color-border-focus);
248
+ --color-switch-background: var(--ds-color-canvas-sunken-strong);
249
+ --color-menu: var(--ds-color-surface);
250
+ --color-overlay: var(--ds-color-scrim);
251
+ --color-canvas: var(--ds-color-canvas);
252
+ --color-green-action: var(--ds-color-feedback-success-fg);
253
+ --color-green-dark: var(--ds-compat-color-green-dark);
254
+ --color-green-badge-bg: var(--ds-color-feedback-success-bg);
255
+ --color-green-light-border: var(--ds-color-feedback-success-border);
256
+ --color-green-lighter-bg: var(--ds-color-feedback-success-bg);
257
+ --color-blue-link: var(--ds-color-content-link);
258
+ --color-red-action: var(--ds-color-feedback-danger-fg);
259
+ --color-amber-dark: var(--ds-color-feedback-warning-fg);
260
+ --color-app-gray-400: var(--ds-color-content-subtle);
261
+ --color-app-gray-track: var(--ds-color-canvas-sunken-strong);
262
+ --radius-md: var(--ds-compat-radius-md);
263
+ --radius-lg: var(--ds-compat-radius-lg);
264
+ --radius-xl: var(--ds-compat-radius-xl);
265
+ --radius-cards: var(--ds-radius-surface);
266
+ --radius-badges: var(--ds-radius-full);
267
+ --radius-inputs: var(--ds-radius-control);
268
+ --radius-buttons: var(--ds-radius-control);
269
+ --radius-general: var(--ds-radius-chip);
270
+ --shadow-subtle: var(--ds-shadow-quiet);
271
+ --shadow-focus: var(--ds-shadow-focus-ring);
272
+ --text-display: var(--ds-text-display);
273
+ --text-display--line-height: var(--ds-text-display--line-height);
274
+ --text-display--letter-spacing: var(--ds-text-display--letter-spacing);
275
+ --text-display--font-weight: var(--ds-text-display--font-weight);
276
+ --text-title-page: var(--ds-text-title-page);
277
+ --text-title-page--line-height: var(--ds-text-title-page--line-height);
278
+ --text-title-page--letter-spacing: var(--ds-text-title-page--letter-spacing);
279
+ --text-title-page--font-weight: var(--ds-text-title-page--font-weight);
280
+ --text-title-section: var(--ds-text-title-section);
281
+ --text-title-section--line-height: var(--ds-text-title-section--line-height);
282
+ --text-title-section--letter-spacing: var(--ds-text-title-section--letter-spacing);
283
+ --text-title-section--font-weight: var(--ds-text-title-section--font-weight);
284
+ --text-title-sub: var(--ds-text-title-sub);
285
+ --text-title-sub--line-height: var(--ds-text-title-sub--line-height);
286
+ --text-title-sub--letter-spacing: var(--ds-text-title-sub--letter-spacing);
287
+ --text-title-sub--font-weight: var(--ds-text-title-sub--font-weight);
288
+ --text-body: var(--ds-text-body);
289
+ --text-body--line-height: var(--ds-text-body--line-height);
290
+ --text-body--letter-spacing: var(--ds-text-body--letter-spacing);
291
+ --text-body--font-weight: var(--ds-text-body--font-weight);
292
+ --text-body-sm: var(--ds-text-body-sm);
293
+ --text-body-sm--line-height: var(--ds-text-body-sm--line-height);
294
+ --text-body-sm--letter-spacing: var(--ds-text-body-sm--letter-spacing);
295
+ --text-body-sm--font-weight: var(--ds-text-body-sm--font-weight);
296
+ --text-label: var(--ds-text-label);
297
+ --text-label--line-height: var(--ds-text-label--line-height);
298
+ --text-label--letter-spacing: var(--ds-text-label--letter-spacing);
299
+ --text-label--font-weight: var(--ds-text-label--font-weight);
300
+ --text-helper: var(--ds-text-helper);
301
+ --text-helper--line-height: var(--ds-text-helper--line-height);
302
+ --text-helper--letter-spacing: var(--ds-text-helper--letter-spacing);
303
+ --text-helper--font-weight: var(--ds-text-helper--font-weight);
304
+ --text-caption: var(--ds-text-caption);
305
+ --text-caption--line-height: var(--ds-text-caption--line-height);
306
+ --text-caption--letter-spacing: var(--ds-text-caption--letter-spacing);
307
+ --text-caption--font-weight: var(--ds-text-caption--font-weight);
308
+ --text-micro: var(--ds-text-micro);
309
+ --text-micro--line-height: var(--ds-text-micro--line-height);
310
+ --text-micro--letter-spacing: var(--ds-text-micro--letter-spacing);
311
+ --text-micro--font-weight: var(--ds-text-micro--font-weight);
312
+ --text-overline: var(--ds-text-overline);
313
+ --text-overline--line-height: var(--ds-text-overline--line-height);
314
+ --text-overline--letter-spacing: var(--ds-text-overline--letter-spacing);
315
+ --text-overline--font-weight: var(--ds-text-overline--font-weight);
316
+ --text-code: var(--ds-text-code);
317
+ --text-code--line-height: var(--ds-text-code--line-height);
318
+ --text-code--letter-spacing: var(--ds-text-code--letter-spacing);
319
+ --text-code--font-weight: var(--ds-text-code--font-weight);
320
+ --ds-space-0: var(--ds-ref-space-0);
321
+ --ds-space-0-5: var(--ds-ref-space-0-5);
322
+ --ds-space-1: var(--ds-ref-space-1);
323
+ --ds-space-1-5: var(--ds-ref-space-1-5);
324
+ --ds-space-2: var(--ds-ref-space-2);
325
+ --ds-space-2-5: var(--ds-ref-space-2-5);
326
+ --ds-space-3: var(--ds-ref-space-3);
327
+ --ds-space-4: var(--ds-ref-space-4);
328
+ --ds-space-5: var(--ds-ref-space-5);
329
+ --ds-space-6: var(--ds-ref-space-6);
330
+ --ds-space-8: var(--ds-ref-space-8);
331
+ --ds-space-10: var(--ds-ref-space-10);
332
+ --ds-space-12: var(--ds-ref-space-12);
333
+ --ds-space-16: var(--ds-ref-space-16);
334
+ --ds-space-20: var(--ds-ref-space-20);
335
+ --ds-space-24: var(--ds-ref-space-24);
336
+ --surface-pad-sm: var(--ds-surface-padding-sm);
337
+ --surface-pad-md: var(--ds-surface-padding-md);
338
+ --surface-pad-lg: var(--ds-surface-padding-lg);
339
+ --stack-gap-xs: var(--ds-stack-gap-xs);
340
+ --stack-gap-sm: var(--ds-stack-gap-sm);
341
+ --stack-gap-md: var(--ds-stack-gap-md);
342
+ --stack-gap-lg: var(--ds-stack-gap-lg);
343
+ --stack-gap-xl: var(--ds-stack-gap-xl);
344
+ --layout-section-gap: var(--ds-layout-section-gap);
345
+ --layout-page-gap: var(--ds-layout-page-gap);
346
+ --icon-size-xs: var(--ds-icon-size-xs);
347
+ --icon-size-sm: var(--ds-icon-size-sm);
348
+ --icon-size-md: var(--ds-icon-size-md);
349
+ --icon-size-lg: var(--ds-icon-size-lg);
350
+ --breakpoint-sm: var(--ds-ref-breakpoint-sm);
351
+ --breakpoint-md: var(--ds-ref-breakpoint-md);
352
+ --breakpoint-lg: var(--ds-ref-breakpoint-lg);
353
+ --breakpoint-xl: var(--ds-ref-breakpoint-xl);
354
+ --breakpoint-2xl: var(--ds-ref-breakpoint-2xl);
355
+ --radius-ref-xs: var(--ds-ref-radius-xs);
356
+ --radius-ref-sm: var(--ds-ref-radius-sm);
357
+ --radius-ref-md: var(--ds-ref-radius-md);
358
+ --radius-ref-lg: var(--ds-ref-radius-lg);
359
+ --radius-ref-xl: var(--ds-ref-radius-xl);
360
+ --radius-control: var(--ds-radius-control);
361
+ --radius-surface: var(--ds-radius-surface);
362
+ --radius-surface-sm: var(--ds-radius-surface-sm);
363
+ --radius-badge: var(--ds-radius-badge);
364
+ --shadow-flat: var(--ds-elevation-flat);
365
+ --shadow-raised: var(--ds-elevation-raised);
366
+ --shadow-floating: var(--ds-elevation-floating);
367
+ --shadow-overlay: var(--ds-elevation-overlay);
368
+ --motion-duration-overlay-exit: var(--ds-motion-duration-overlay-exit);
369
+ --motion-presence-name: var(--ds-motion-presence-name);
370
+ --control-height-xs: var(--ds-control-height-xs);
371
+ --control-height-sm: var(--ds-control-height-sm);
372
+ --control-height-md: var(--ds-control-height-md);
373
+ --control-height-lg: var(--ds-control-height-lg);
374
+ --control-height-xl: var(--ds-control-height-xl);
375
+ --control-padding-x-xs: var(--ds-control-padding-x-xs);
376
+ --control-padding-x-sm: var(--ds-control-padding-x-sm);
377
+ --control-padding-x-md: var(--ds-control-padding-x-md);
378
+ --control-padding-x-lg: var(--ds-control-padding-x-lg);
379
+ --control-padding-x-xl: var(--ds-control-padding-x-xl);
380
+ --control-gap-xs: var(--ds-control-gap-xs);
381
+ --control-gap-sm: var(--ds-control-gap-sm);
382
+ --control-gap-md: var(--ds-control-gap-md);
383
+ --control-gap-lg: var(--ds-control-gap-lg);
384
+ --control-gap-xl: var(--ds-control-gap-xl);
385
+ --control-font-size-xs: var(--ds-control-font-size-xs);
386
+ --control-font-size-sm: var(--ds-control-font-size-sm);
387
+ --control-font-size-md: var(--ds-control-font-size-md);
388
+ --control-font-size-lg: var(--ds-control-font-size-lg);
389
+ --control-font-size-xl: var(--ds-control-font-size-xl);
390
+ --control-icon-xs: var(--ds-control-icon-xs);
391
+ --control-icon-sm: var(--ds-control-icon-sm);
392
+ --control-icon-md: var(--ds-control-icon-md);
393
+ --control-icon-lg: var(--ds-control-icon-lg);
394
+ --control-icon-xl: var(--ds-control-icon-xl);
395
+ --button-height-sm: var(--ds-button-height-sm);
396
+ --button-height-md: var(--ds-button-height-md);
397
+ --button-height-lg: var(--ds-button-height-lg);
398
+ --button-height-icon-xs: var(--ds-button-height-icon-xs);
399
+ --button-height-icon-sm: var(--ds-button-height-icon-sm);
400
+ --button-height-icon: var(--ds-button-height-icon);
401
+ --input-height-sm: var(--ds-input-height-sm);
402
+ --input-height-md: var(--ds-input-height-md);
403
+ --input-height-lg: var(--ds-input-height-lg);
404
+ --search-input-height-sm: var(--ds-search-input-height-sm);
405
+ --search-input-height-md: var(--ds-search-input-height-md);
406
+ --search-input-height-lg: var(--ds-search-input-height-lg);
407
+ --textarea-min-height-sm: var(--ds-textarea-min-height-sm);
408
+ --textarea-min-height-md: var(--ds-textarea-min-height-md);
409
+ --textarea-min-height-lg: var(--ds-textarea-min-height-lg);
410
+ --multi-filter-pill-height-sm: var(--ds-multi-filter-pill-height-sm);
411
+ --multi-filter-pill-height-md: var(--ds-multi-filter-pill-height-md);
412
+ --multi-filter-pill-height-lg: var(--ds-multi-filter-pill-height-lg);
413
+ --filter-chip-height-sm: var(--ds-filter-chip-height-sm);
414
+ --filter-chip-height-md: var(--ds-filter-chip-height-md);
415
+ --filter-chip-height-lg: var(--ds-filter-chip-height-lg);
416
+ --select-height: var(--ds-select-height);
417
+ --search-select-height: var(--ds-search-select-height);
418
+ --date-picker-height: var(--ds-date-picker-height);
419
+ --date-range-picker-height: var(--ds-date-range-picker-height);
420
+ --phone-country-input-height: var(--ds-phone-country-input-height);
421
+ --pagination-height: var(--ds-pagination-height);
422
+ --color-fg-on-warning: var(--ds-color-feedback-warning-solid-fg);
423
+ --color-fg-on-info: var(--ds-color-feedback-info-solid-fg);
424
+ --shadow-focus-ring-field: var(--ds-shadow-focus-ring-field);
425
+ }
426
+
427
+ [data-ds-scheme="dark"],
428
+ .dark {
429
+ --color-bg: var(--ds-color-canvas);
430
+ --color-bg-2: var(--ds-color-canvas-sunken);
431
+ --color-bg-3: var(--ds-color-canvas-sunken-strong);
432
+ --color-surface: var(--ds-color-surface);
433
+ --color-surface-2: var(--ds-color-surface-sunken);
434
+ --color-surface-3: var(--ds-color-surface-sunken-strong);
435
+ --color-fg: var(--ds-color-content);
436
+ --color-fg-2: var(--ds-color-content-secondary);
437
+ --color-fg-3: var(--ds-color-content-muted);
438
+ --color-fg-4: var(--ds-color-content-subtle);
439
+ --color-fg-5: var(--ds-color-content-faint);
440
+ --color-rule: var(--ds-color-border);
441
+ --color-rule-soft: var(--ds-color-border-subtle);
442
+ --color-rule-strong: var(--ds-color-border-strong);
443
+ --color-accent: var(--ds-color-action-accent-bg);
444
+ --color-accent-2: var(--ds-color-action-accent-bg-strong);
445
+ --color-accent-tint: var(--ds-color-action-accent-subtle-bg);
446
+ --color-accent-hover: var(--ds-color-action-accent-bg-hover);
447
+ --color-accent-active: var(--ds-color-action-accent-bg-active);
448
+ --color-suite-action: var(--ds-color-action-suite-bg);
449
+ --color-suite-action-hover: var(--ds-color-action-suite-bg-hover);
450
+ --color-suite-action-active: var(--ds-color-action-suite-bg-active);
451
+ --color-fg-on-suite-action: var(--ds-color-action-suite-fg);
452
+ --color-brand: var(--ds-color-action-brand-bg);
453
+ --color-brand-soft: var(--ds-compat-color-brand-soft);
454
+ --color-brand-soft-foreground: var(--ds-compat-color-brand-soft-foreground);
455
+ --color-pro-bg: var(--ds-ref-brand-pro-bg);
456
+ --color-pro-bg-hover: var(--ds-ref-brand-pro-bg-hover);
457
+ --color-pro-bg-active: var(--ds-ref-brand-pro-bg-active);
458
+ --color-pro-fg: var(--ds-ref-brand-pro-fg);
459
+ --color-pro-hover: var(--ds-ref-brand-pro-fg-hover);
460
+ --color-pro-active: var(--ds-ref-brand-pro-fg-active);
461
+ --color-pro-line: var(--ds-ref-brand-pro-border);
462
+ --color-brand-pro: var(--ds-ref-brand-pro-seed);
463
+ --color-brand-audit: var(--ds-ref-brand-audit-seed);
464
+ --color-brand-books: var(--ds-ref-brand-books-seed);
465
+ --color-brand-tax: var(--ds-ref-brand-tax-seed);
466
+ --color-audit-fg: var(--ds-ref-brand-audit-fg);
467
+ --color-audit-hover: var(--ds-ref-brand-audit-fg-hover);
468
+ --color-audit-active: var(--ds-ref-brand-audit-fg-active);
469
+ --color-audit-disabled: var(--ds-ref-brand-audit-fg-disabled);
470
+ --color-audit-bg: var(--ds-ref-brand-audit-bg);
471
+ --color-audit-bg-hover: var(--ds-ref-brand-audit-bg-hover);
472
+ --color-audit-bg-active: var(--ds-ref-brand-audit-bg-active);
473
+ --color-audit-line: var(--ds-ref-brand-audit-border);
474
+ --color-audit-ring: var(--ds-ref-brand-audit-ring);
475
+ --color-fg-on-audit: var(--ds-ref-brand-audit-on-fg);
476
+ --color-books-fg: var(--ds-ref-brand-books-fg);
477
+ --color-books-hover: var(--ds-ref-brand-books-fg-hover);
478
+ --color-books-active: var(--ds-ref-brand-books-fg-active);
479
+ --color-books-disabled: var(--ds-ref-brand-books-fg-disabled);
480
+ --color-books-bg: var(--ds-ref-brand-books-bg);
481
+ --color-books-bg-hover: var(--ds-ref-brand-books-bg-hover);
482
+ --color-books-bg-active: var(--ds-ref-brand-books-bg-active);
483
+ --color-books-line: var(--ds-ref-brand-books-border);
484
+ --color-books-ring: var(--ds-ref-brand-books-ring);
485
+ --color-fg-on-books: var(--ds-ref-brand-books-on-fg);
486
+ --color-tax-fg: var(--ds-ref-brand-tax-fg);
487
+ --color-tax-hover: var(--ds-ref-brand-tax-fg-hover);
488
+ --color-tax-active: var(--ds-ref-brand-tax-fg-active);
489
+ --color-tax-disabled: var(--ds-ref-brand-tax-fg-disabled);
490
+ --color-tax-bg: var(--ds-ref-brand-tax-bg);
491
+ --color-tax-bg-hover: var(--ds-ref-brand-tax-bg-hover);
492
+ --color-tax-bg-active: var(--ds-ref-brand-tax-bg-active);
493
+ --color-tax-line: var(--ds-ref-brand-tax-border);
494
+ --color-tax-ring: var(--ds-ref-brand-tax-ring);
495
+ --color-fg-on-tax: var(--ds-ref-brand-tax-on-fg);
496
+ --color-fg-disabled: var(--ds-color-content-disabled);
497
+ --color-bg-disabled: var(--ds-color-state-disabled-bg);
498
+ --color-overlay-hover: var(--ds-color-state-hover);
499
+ --color-overlay-active: var(--ds-color-state-active);
500
+ --color-fg-on-accent: var(--ds-color-action-accent-fg);
501
+ --color-fg-on-pro: var(--ds-ref-brand-pro-on-fg);
502
+ --color-fg-on-danger: var(--ds-color-feedback-danger-solid-fg);
503
+ --color-fg-on-success: var(--ds-color-feedback-success-solid-fg);
504
+ --color-success-fg: var(--ds-color-feedback-success-fg);
505
+ --color-success-fg-hover: var(--ds-color-feedback-success-fg-hover);
506
+ --color-success-fg-active: var(--ds-color-feedback-success-fg-active);
507
+ --color-success-bg: var(--ds-color-feedback-success-bg);
508
+ --color-success-line: var(--ds-color-feedback-success-border);
509
+ --color-warning-fg: var(--ds-color-feedback-warning-fg);
510
+ --color-warning-bg: var(--ds-color-feedback-warning-bg);
511
+ --color-warning-line: var(--ds-color-feedback-warning-border);
512
+ --color-danger-fg: var(--ds-color-feedback-danger-fg);
513
+ --color-danger-fg-hover: var(--ds-color-feedback-danger-fg-hover);
514
+ --color-danger-fg-active: var(--ds-color-feedback-danger-fg-active);
515
+ --color-danger-bg: var(--ds-color-feedback-danger-bg);
516
+ --color-danger-line: var(--ds-color-feedback-danger-border);
517
+ --color-priority-low: var(--ds-color-priority-low);
518
+ --color-priority-medium: var(--ds-color-priority-medium);
519
+ --color-priority-high: var(--ds-color-priority-high);
520
+ --color-chart-1: var(--ds-color-chart-1);
521
+ --color-chart-2: var(--ds-color-chart-2);
522
+ --color-chart-3: var(--ds-color-chart-3);
523
+ --color-chart-4: var(--ds-color-chart-4);
524
+ --color-chart-line: var(--ds-color-chart-line);
525
+ --color-chart-area-from: var(--ds-color-chart-area-from);
526
+ --color-chart-area-to: var(--ds-color-chart-area-to);
527
+ --color-service-tax: var(--ds-color-service-tax);
528
+ --color-service-tax-bg: var(--ds-color-service-tax-bg);
529
+ --color-service-audit: var(--ds-color-service-audit);
530
+ --color-service-audit-bg: var(--ds-color-service-audit-bg);
531
+ --color-service-accounting: var(--ds-color-service-accounting);
532
+ --color-service-accounting-bg: var(--ds-color-service-accounting-bg);
533
+ --shadow-quiet: var(--ds-shadow-quiet);
534
+ --shadow-card: var(--ds-shadow-card);
535
+ --shadow-pop: var(--ds-shadow-pop);
536
+ --shadow-xs: var(--ds-ref-shadow-xs);
537
+ --shadow-sm: var(--ds-ref-shadow-sm);
538
+ --shadow-md: var(--ds-ref-shadow-md);
539
+ --shadow-lg: var(--ds-ref-shadow-lg);
540
+ --shadow-xl: var(--ds-ref-shadow-xl);
541
+ --shadow-2xl: var(--ds-ref-shadow-2xl);
542
+ --focus-ring-color: var(--ds-focus-ring-color);
543
+ --color-fg-on-warning: var(--ds-color-feedback-warning-solid-fg);
544
+ --color-fg-on-info: var(--ds-color-feedback-info-solid-fg);
545
+ --shadow-overlay: var(--ds-elevation-overlay);
546
+ }
547
+
548
+ [data-ds-brand="pro"],
549
+ [data-brand="pro"] {
550
+ --color-brand: var(--ds-color-action-brand-bg);
551
+ --color-brand-hover: var(--ds-color-action-brand-bg-hover);
552
+ --color-brand-active: var(--ds-color-action-brand-bg-active);
553
+ --color-brand-disabled: var(--ds-color-action-brand-bg-disabled);
554
+ --color-brand-bg: var(--ds-color-action-brand-subtle-bg);
555
+ --color-brand-bg-hover: var(--ds-color-action-brand-subtle-bg-hover);
556
+ --color-brand-bg-active: var(--ds-color-action-brand-subtle-bg-active);
557
+ --color-brand-line: var(--ds-color-action-brand-border);
558
+ --color-brand-ring: var(--ds-color-action-brand-ring);
559
+ --color-fg-on-brand: var(--ds-color-action-brand-fg);
560
+ --color-accent: var(--ds-color-action-accent-bg);
561
+ --color-accent-2: var(--ds-color-action-accent-bg-strong);
562
+ --color-accent-hover: var(--ds-color-action-accent-bg-hover);
563
+ --color-accent-active: var(--ds-color-action-accent-bg-active);
564
+ --color-accent-tint: var(--ds-color-action-accent-subtle-bg);
565
+ --color-accent-ring: var(--ds-color-action-accent-ring);
566
+ --color-fg-on-accent: var(--ds-color-action-accent-fg);
567
+ --focus-ring-border: var(--ds-focus-ring-border);
568
+ --color-primary: var(--ds-color-action-brand-bg);
569
+ --color-primary-foreground: var(--ds-color-action-brand-fg);
570
+ }
571
+
572
+ [data-ds-brand="audit"],
573
+ [data-brand="audit"] {
574
+ --color-brand: var(--ds-color-action-brand-bg);
575
+ --color-brand-hover: var(--ds-color-action-brand-bg-hover);
576
+ --color-brand-active: var(--ds-color-action-brand-bg-active);
577
+ --color-brand-disabled: var(--ds-color-action-brand-bg-disabled);
578
+ --color-brand-bg: var(--ds-color-action-brand-subtle-bg);
579
+ --color-brand-bg-hover: var(--ds-color-action-brand-subtle-bg-hover);
580
+ --color-brand-bg-active: var(--ds-color-action-brand-subtle-bg-active);
581
+ --color-brand-line: var(--ds-color-action-brand-border);
582
+ --color-brand-ring: var(--ds-color-action-brand-ring);
583
+ --color-fg-on-brand: var(--ds-color-action-brand-fg);
584
+ --color-accent: var(--ds-color-action-accent-bg);
585
+ --color-accent-2: var(--ds-color-action-accent-bg-strong);
586
+ --color-accent-hover: var(--ds-color-action-accent-bg-hover);
587
+ --color-accent-active: var(--ds-color-action-accent-bg-active);
588
+ --color-accent-tint: var(--ds-color-action-accent-subtle-bg);
589
+ --color-accent-ring: var(--ds-color-action-accent-ring);
590
+ --color-fg-on-accent: var(--ds-color-action-accent-fg);
591
+ --focus-ring-border: var(--ds-focus-ring-border);
592
+ --color-primary: var(--ds-color-action-brand-bg);
593
+ --color-primary-foreground: var(--ds-color-action-brand-fg);
594
+ }
595
+
596
+ [data-ds-brand="books"],
597
+ [data-brand="books"] {
598
+ --color-brand: var(--ds-color-action-brand-bg);
599
+ --color-brand-hover: var(--ds-color-action-brand-bg-hover);
600
+ --color-brand-active: var(--ds-color-action-brand-bg-active);
601
+ --color-brand-disabled: var(--ds-color-action-brand-bg-disabled);
602
+ --color-brand-bg: var(--ds-color-action-brand-subtle-bg);
603
+ --color-brand-bg-hover: var(--ds-color-action-brand-subtle-bg-hover);
604
+ --color-brand-bg-active: var(--ds-color-action-brand-subtle-bg-active);
605
+ --color-brand-line: var(--ds-color-action-brand-border);
606
+ --color-brand-ring: var(--ds-color-action-brand-ring);
607
+ --color-fg-on-brand: var(--ds-color-action-brand-fg);
608
+ --color-accent: var(--ds-color-action-accent-bg);
609
+ --color-accent-2: var(--ds-color-action-accent-bg-strong);
610
+ --color-accent-hover: var(--ds-color-action-accent-bg-hover);
611
+ --color-accent-active: var(--ds-color-action-accent-bg-active);
612
+ --color-accent-tint: var(--ds-color-action-accent-subtle-bg);
613
+ --color-accent-ring: var(--ds-color-action-accent-ring);
614
+ --color-fg-on-accent: var(--ds-color-action-accent-fg);
615
+ --focus-ring-border: var(--ds-focus-ring-border);
616
+ --color-primary: var(--ds-color-action-brand-bg);
617
+ --color-primary-foreground: var(--ds-color-action-brand-fg);
618
+ }
619
+
620
+ [data-ds-brand="tax"],
621
+ [data-brand="tax"] {
622
+ --color-brand: var(--ds-color-action-brand-bg);
623
+ --color-brand-hover: var(--ds-color-action-brand-bg-hover);
624
+ --color-brand-active: var(--ds-color-action-brand-bg-active);
625
+ --color-brand-disabled: var(--ds-color-action-brand-bg-disabled);
626
+ --color-brand-bg: var(--ds-color-action-brand-subtle-bg);
627
+ --color-brand-bg-hover: var(--ds-color-action-brand-subtle-bg-hover);
628
+ --color-brand-bg-active: var(--ds-color-action-brand-subtle-bg-active);
629
+ --color-brand-line: var(--ds-color-action-brand-border);
630
+ --color-brand-ring: var(--ds-color-action-brand-ring);
631
+ --color-fg-on-brand: var(--ds-color-action-brand-fg);
632
+ --color-accent: var(--ds-color-action-accent-bg);
633
+ --color-accent-2: var(--ds-color-action-accent-bg-strong);
634
+ --color-accent-hover: var(--ds-color-action-accent-bg-hover);
635
+ --color-accent-active: var(--ds-color-action-accent-bg-active);
636
+ --color-accent-tint: var(--ds-color-action-accent-subtle-bg);
637
+ --color-accent-ring: var(--ds-color-action-accent-ring);
638
+ --color-fg-on-accent: var(--ds-color-action-accent-fg);
639
+ --focus-ring-border: var(--ds-focus-ring-border);
640
+ --color-primary: var(--ds-color-action-brand-bg);
641
+ --color-primary-foreground: var(--ds-color-action-brand-fg);
642
+ }
643
+
644
+ [data-ds-density="compact"] {
645
+ --control-height-sm: var(--ds-control-height-sm);
646
+ --control-height-md: var(--ds-control-height-md);
647
+ --control-height-lg: var(--ds-control-height-lg);
648
+ --control-height-xl: var(--ds-control-height-xl);
649
+ --control-padding-x-sm: var(--ds-control-padding-x-sm);
650
+ --control-padding-x-md: var(--ds-control-padding-x-md);
651
+ --control-padding-x-lg: var(--ds-control-padding-x-lg);
652
+ --control-padding-x-xl: var(--ds-control-padding-x-xl);
653
+ --control-gap-sm: var(--ds-control-gap-sm);
654
+ --control-gap-md: var(--ds-control-gap-md);
655
+ --control-gap-lg: var(--ds-control-gap-lg);
656
+ --control-gap-xl: var(--ds-control-gap-xl);
657
+ --control-font-size-sm: var(--ds-control-font-size-sm);
658
+ --control-font-size-md: var(--ds-control-font-size-md);
659
+ --control-font-size-lg: var(--ds-control-font-size-lg);
660
+ --control-font-size-xl: var(--ds-control-font-size-xl);
661
+ --control-icon-sm: var(--ds-control-icon-sm);
662
+ --control-icon-md: var(--ds-control-icon-md);
663
+ --control-icon-lg: var(--ds-control-icon-lg);
664
+ --control-icon-xl: var(--ds-control-icon-xl);
665
+ }