@assure-one/design-system 1.30.0 → 1.32.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 (37) hide show
  1. package/README.md +28 -1
  2. package/codemods/0.2.0-radix-migration.mjs +315 -0
  3. package/codemods/README.md +305 -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/jsx.mjs +0 -0
  10. package/codemods/lib/ledger.mjs +84 -0
  11. package/codemods/lib/registry.mjs +30 -0
  12. package/codemods/lib/report.mjs +119 -0
  13. package/codemods/lib/runner.mjs +164 -0
  14. package/codemods/run.mjs +161 -0
  15. package/codemods/transforms/cm-15-dom-selectors.mjs +573 -0
  16. package/codemods/transforms/cm-16-globals-css.mjs +487 -0
  17. package/dist/css/base.css +60 -0
  18. package/dist/css/legacy-aliases.css +489 -0
  19. package/dist/css/shadcn.css +155 -0
  20. package/dist/css/tailwind.css +233 -0
  21. package/dist/css/tokens.css +439 -0
  22. package/dist/index.d.ts +327 -33
  23. package/dist/index.js +1843 -706
  24. package/dist/index.js.map +1 -1
  25. package/dist/styles.css +1 -1
  26. package/dist/testing/index.cjs +458 -0
  27. package/dist/testing/index.d.cts +253 -0
  28. package/dist/testing/index.d.ts +253 -0
  29. package/dist/testing/index.js +452 -0
  30. package/dist/testing/setup.cjs +123 -0
  31. package/dist/testing/setup.js +121 -0
  32. package/dist/testing/style-stub.cjs +7 -0
  33. package/dist/testing/style-stub.js +5 -0
  34. package/dist/tokens/index.d.ts +114 -96
  35. package/dist/tokens/index.js +67 -48
  36. package/dist/tokens/index.js.map +1 -1
  37. package/package.json +84 -14
package/dist/css/tailwind.css ADDED
@@ -0,0 +1,233 @@
1
+ /* GENERATED FILE — do not edit.
2
+ * The Tailwind theme bridge: DS tokens as theme keys in the consumer's own
3
+ * Tailwind build, so `bg-surface/40`, `hover:text-fg-3`, `bg-brand-audit/10`,
4
+ * `rounded-control` and `text-content-muted` generate CSS in app scope instead
5
+ * of silently producing nothing (W1-13, consumer usage audit §12.1).
6
+ * Import it after css/tokens.css. It declares no custom property of its own and
7
+ * claims no app-vocabulary key — see css/shadcn.css for those.
8
+ * Source: tokens/src (DTCG, ADR-003). Generator: tokens/build/generate-tailwind-bridge.mjs.
9
+ * Change the token files and run `pnpm tokens:build`; `pnpm tokens:check` fails
10
+ * when this file is out of date. */
11
+
12
+ @layer theme, base, ds, components, utilities;
13
+
14
+ @theme inline {
15
+ /* Today's utility names, so every class a consumer already writes compiles. */
16
+ --color-bg: var(--ds-color-canvas);
17
+ --color-bg-2: var(--ds-color-canvas-sunken);
18
+ --color-bg-3: var(--ds-color-canvas-sunken-strong);
19
+ --color-surface: var(--ds-color-surface);
20
+ --color-fg: var(--ds-color-content);
21
+ --color-fg-2: var(--ds-color-content-secondary);
22
+ --color-fg-3: var(--ds-color-content-muted);
23
+ --color-fg-4: var(--ds-color-content-subtle);
24
+ --color-fg-5: var(--ds-color-content-faint);
25
+ --color-rule: var(--ds-color-border);
26
+ --color-rule-soft: var(--ds-color-border-subtle);
27
+ --color-rule-strong: var(--ds-color-border-strong);
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-active: var(--ds-color-action-brand-bg-active);
47
+ --color-brand-disabled: var(--ds-color-action-brand-bg-disabled);
48
+ --color-brand-bg: var(--ds-color-action-brand-subtle-bg);
49
+ --color-brand-bg-hover: var(--ds-color-action-brand-subtle-bg-hover);
50
+ --color-brand-bg-active: var(--ds-color-action-brand-subtle-bg-active);
51
+ --color-brand-line: var(--ds-color-action-brand-border);
52
+ --color-fg-on-brand: var(--ds-color-action-brand-fg);
53
+ --color-brand-pro: var(--ds-ref-brand-pro-seed);
54
+ --color-brand-audit: var(--ds-ref-brand-audit-seed);
55
+ --color-brand-books: var(--ds-ref-brand-books-seed);
56
+ --color-brand-tax: var(--ds-ref-brand-tax-seed);
57
+ --color-audit-fg: var(--ds-ref-brand-audit-fg);
58
+ --color-audit-hover: var(--ds-ref-brand-audit-fg-hover);
59
+ --color-audit-active: var(--ds-ref-brand-audit-fg-active);
60
+ --color-audit-disabled: var(--ds-ref-brand-audit-fg-disabled);
61
+ --color-audit-bg: var(--ds-ref-brand-audit-bg);
62
+ --color-audit-bg-hover: var(--ds-ref-brand-audit-bg-hover);
63
+ --color-audit-bg-active: var(--ds-ref-brand-audit-bg-active);
64
+ --color-audit-line: var(--ds-ref-brand-audit-border);
65
+ --color-audit-ring: var(--ds-ref-brand-audit-ring);
66
+ --color-fg-on-audit: var(--ds-ref-brand-audit-on-fg);
67
+ --color-books-fg: var(--ds-ref-brand-books-fg);
68
+ --color-books-hover: var(--ds-ref-brand-books-fg-hover);
69
+ --color-books-active: var(--ds-ref-brand-books-fg-active);
70
+ --color-books-disabled: var(--ds-ref-brand-books-fg-disabled);
71
+ --color-books-bg: var(--ds-ref-brand-books-bg);
72
+ --color-books-bg-hover: var(--ds-ref-brand-books-bg-hover);
73
+ --color-books-bg-active: var(--ds-ref-brand-books-bg-active);
74
+ --color-books-line: var(--ds-ref-brand-books-border);
75
+ --color-books-ring: var(--ds-ref-brand-books-ring);
76
+ --color-fg-on-books: var(--ds-ref-brand-books-on-fg);
77
+ --color-tax-fg: var(--ds-ref-brand-tax-fg);
78
+ --color-tax-hover: var(--ds-ref-brand-tax-fg-hover);
79
+ --color-tax-active: var(--ds-ref-brand-tax-fg-active);
80
+ --color-tax-disabled: var(--ds-ref-brand-tax-fg-disabled);
81
+ --color-tax-bg: var(--ds-ref-brand-tax-bg);
82
+ --color-tax-bg-hover: var(--ds-ref-brand-tax-bg-hover);
83
+ --color-tax-bg-active: var(--ds-ref-brand-tax-bg-active);
84
+ --color-tax-line: var(--ds-ref-brand-tax-border);
85
+ --color-tax-ring: var(--ds-ref-brand-tax-ring);
86
+ --color-fg-on-tax: var(--ds-ref-brand-tax-on-fg);
87
+ --color-fg-on-accent: var(--ds-color-action-accent-fg);
88
+ --color-fg-on-pro: var(--ds-ref-brand-pro-on-fg);
89
+ --color-fg-on-danger: var(--ds-color-feedback-danger-solid-fg);
90
+ --color-fg-on-success: var(--ds-color-feedback-success-solid-fg);
91
+ --color-fg-on-selection: var(--ds-selection-fg);
92
+ --color-fg-disabled: var(--ds-color-content-disabled);
93
+ --color-bg-disabled: var(--ds-color-state-disabled-bg);
94
+ --color-overlay-hover: var(--ds-color-state-hover);
95
+ --color-overlay-active: var(--ds-color-state-active);
96
+ --color-control-bg: var(--ds-control-bg);
97
+ --color-control-fg: var(--ds-control-fg);
98
+ --color-control-muted-fg: var(--ds-control-muted-fg);
99
+ --color-control-hover-bg: var(--ds-control-hover-bg);
100
+ --color-control-hover-fg: var(--ds-control-hover-fg);
101
+ --color-control-active-bg: var(--ds-control-active-bg);
102
+ --color-control-border: var(--ds-control-border);
103
+ --color-control-border-strong: var(--ds-control-border-strong);
104
+ --color-control-border-hover: var(--ds-control-border-hover);
105
+ --color-control-secondary-bg: var(--ds-control-neutral-bg);
106
+ --color-control-destructive-fg: var(--ds-control-danger-fg);
107
+ --color-control-destructive-hover-bg: var(--ds-control-danger-hover-bg);
108
+ --color-menu-bg: var(--ds-menu-bg);
109
+ --color-menu-fg: var(--ds-menu-fg);
110
+ --color-menu-border: var(--ds-menu-border);
111
+ --color-menu-label-fg: var(--ds-menu-label-fg);
112
+ --color-menu-item-fg: var(--ds-menu-item-fg);
113
+ --color-menu-item-hover-bg: var(--ds-menu-item-hover-bg);
114
+ --color-menu-item-hover-fg: var(--ds-menu-item-hover-fg);
115
+ --color-menu-item-destructive-fg: var(--ds-menu-item-danger-fg);
116
+ --color-menu-item-destructive-hover-bg: var(--ds-menu-item-danger-hover-bg);
117
+ --color-menu-item-destructive-hover-fg: var(--ds-menu-item-danger-hover-fg);
118
+ --color-menu-shortcut-fg: var(--ds-menu-shortcut-fg);
119
+ --color-selection-floating-bg: var(--ds-selection-floating-bg);
120
+ --color-selection-floating-fg: var(--ds-selection-floating-fg);
121
+ --color-selection-floating-muted-fg: var(--ds-selection-floating-muted-fg);
122
+ --color-selection-floating-hover-bg: var(--ds-selection-floating-hover-bg);
123
+ --color-selection-floating-active-bg: var(--ds-selection-floating-active-bg);
124
+ --color-selection-floating-rule: var(--ds-selection-floating-border);
125
+ --color-success-fg: var(--ds-color-feedback-success-fg);
126
+ --color-success-fg-hover: var(--ds-color-feedback-success-fg-hover);
127
+ --color-success-fg-active: var(--ds-color-feedback-success-fg-active);
128
+ --color-success-bg: var(--ds-color-feedback-success-bg);
129
+ --color-success-line: var(--ds-color-feedback-success-border);
130
+ --color-warning-fg: var(--ds-color-feedback-warning-fg);
131
+ --color-warning-bg: var(--ds-color-feedback-warning-bg);
132
+ --color-warning-line: var(--ds-color-feedback-warning-border);
133
+ --color-danger-fg: var(--ds-color-feedback-danger-fg);
134
+ --color-danger-fg-hover: var(--ds-color-feedback-danger-fg-hover);
135
+ --color-danger-fg-active: var(--ds-color-feedback-danger-fg-active);
136
+ --color-danger-bg: var(--ds-color-feedback-danger-bg);
137
+ --color-danger-line: var(--ds-color-feedback-danger-border);
138
+ --color-priority-low: var(--ds-color-priority-low);
139
+ --color-priority-medium: var(--ds-color-priority-medium);
140
+ --color-priority-high: var(--ds-color-priority-high);
141
+ --color-priority-urgent: var(--ds-color-priority-urgent);
142
+ --color-chart-line: var(--ds-color-chart-line);
143
+ --color-chart-area-from: var(--ds-color-chart-area-from);
144
+ --color-chart-area-to: var(--ds-color-chart-area-to);
145
+ --color-service-tax: var(--ds-color-service-tax);
146
+ --color-service-tax-bg: var(--ds-color-service-tax-bg);
147
+ --color-service-audit: var(--ds-color-service-audit);
148
+ --color-service-audit-bg: var(--ds-color-service-audit-bg);
149
+ --color-service-accounting: var(--ds-color-service-accounting);
150
+ --color-service-accounting-bg: var(--ds-color-service-accounting-bg);
151
+ --shadow-focus-ring: var(--ds-shadow-focus-ring);
152
+ --shadow-quiet: var(--ds-shadow-quiet);
153
+ --shadow-card: var(--ds-shadow-card);
154
+ --shadow-pop: var(--ds-shadow-pop);
155
+ --shadow-xs: var(--ds-ref-shadow-xs);
156
+ --shadow-sm: var(--ds-ref-shadow-sm);
157
+ --shadow-md: var(--ds-ref-shadow-md);
158
+ --shadow-lg: var(--ds-ref-shadow-lg);
159
+ --shadow-xl: var(--ds-ref-shadow-xl);
160
+ --shadow-2xl: var(--ds-ref-shadow-2xl);
161
+ --radius-btn: var(--ds-radius-control);
162
+ --radius-input: var(--ds-radius-control);
163
+ --radius-pill: var(--ds-radius-chip);
164
+ --radius-card: var(--ds-radius-surface);
165
+ --radius-icon: var(--ds-radius-badge);
166
+ --radius-full: var(--ds-radius-full);
167
+ --ease-out-quart: var(--ds-ref-ease-enter);
168
+ --ease-out: var(--ds-ref-ease-emphasized);
169
+ --ease-in: var(--ds-ref-ease-exit);
170
+ --ease-in-out: var(--ds-ref-ease-standard);
171
+ --animate-accordion-down: var(--ds-animate-accordion-down);
172
+ --animate-accordion-up: var(--ds-animate-accordion-up);
173
+ --animate-collapsible-down: var(--ds-animate-collapsible-down);
174
+ --animate-collapsible-up: var(--ds-animate-collapsible-up);
175
+
176
+ /* The namespaced role names of target architecture §9. */
177
+ --color-canvas: var(--ds-color-canvas);
178
+ --color-canvas-sunken: var(--ds-color-canvas-sunken);
179
+ --color-canvas-sunken-strong: var(--ds-color-canvas-sunken-strong);
180
+ --color-surface-sunken: var(--ds-color-surface-sunken);
181
+ --color-surface-sunken-strong: var(--ds-color-surface-sunken-strong);
182
+ --color-content: var(--ds-color-content);
183
+ --color-content-secondary: var(--ds-color-content-secondary);
184
+ --color-content-muted: var(--ds-color-content-muted);
185
+ --color-content-subtle: var(--ds-color-content-subtle);
186
+ --color-content-faint: var(--ds-color-content-faint);
187
+ --color-border-subtle: var(--ds-color-border-subtle);
188
+ --color-border-strong: var(--ds-color-border-strong);
189
+ --color-action-accent-bg: var(--ds-color-action-accent-bg);
190
+ --color-action-accent-bg-strong: var(--ds-color-action-accent-bg-strong);
191
+ --color-action-accent-subtle-bg: var(--ds-color-action-accent-subtle-bg);
192
+ --color-action-accent-bg-hover: var(--ds-color-action-accent-bg-hover);
193
+ --color-action-accent-bg-active: var(--ds-color-action-accent-bg-active);
194
+ --color-action-accent-ring: var(--ds-color-action-accent-ring);
195
+ --color-action-suite-bg: var(--ds-color-action-suite-bg);
196
+ --color-action-suite-bg-hover: var(--ds-color-action-suite-bg-hover);
197
+ --color-action-suite-bg-active: var(--ds-color-action-suite-bg-active);
198
+ --color-action-suite-fg: var(--ds-color-action-suite-fg);
199
+ --color-action-brand-bg: var(--ds-color-action-brand-bg);
200
+ --color-action-brand-bg-hover: var(--ds-color-action-brand-bg-hover);
201
+ --color-action-brand-bg-active: var(--ds-color-action-brand-bg-active);
202
+ --color-action-brand-bg-disabled: var(--ds-color-action-brand-bg-disabled);
203
+ --color-action-brand-subtle-bg: var(--ds-color-action-brand-subtle-bg);
204
+ --color-action-brand-subtle-bg-hover: var(--ds-color-action-brand-subtle-bg-hover);
205
+ --color-action-brand-subtle-bg-active: var(--ds-color-action-brand-subtle-bg-active);
206
+ --color-action-brand-border: var(--ds-color-action-brand-border);
207
+ --color-action-brand-ring: var(--ds-color-action-brand-ring);
208
+ --color-action-brand-fg: var(--ds-color-action-brand-fg);
209
+ --color-action-accent-fg: var(--ds-color-action-accent-fg);
210
+ --color-feedback-danger-solid-fg: var(--ds-color-feedback-danger-solid-fg);
211
+ --color-feedback-success-solid-fg: var(--ds-color-feedback-success-solid-fg);
212
+ --color-content-disabled: var(--ds-color-content-disabled);
213
+ --color-state-disabled-bg: var(--ds-color-state-disabled-bg);
214
+ --color-state-hover: var(--ds-color-state-hover);
215
+ --color-state-active: var(--ds-color-state-active);
216
+ --color-feedback-success-fg: var(--ds-color-feedback-success-fg);
217
+ --color-feedback-success-fg-hover: var(--ds-color-feedback-success-fg-hover);
218
+ --color-feedback-success-fg-active: var(--ds-color-feedback-success-fg-active);
219
+ --color-feedback-success-bg: var(--ds-color-feedback-success-bg);
220
+ --color-feedback-success-border: var(--ds-color-feedback-success-border);
221
+ --color-feedback-warning-fg: var(--ds-color-feedback-warning-fg);
222
+ --color-feedback-warning-bg: var(--ds-color-feedback-warning-bg);
223
+ --color-feedback-warning-border: var(--ds-color-feedback-warning-border);
224
+ --color-feedback-danger-fg: var(--ds-color-feedback-danger-fg);
225
+ --color-feedback-danger-fg-hover: var(--ds-color-feedback-danger-fg-hover);
226
+ --color-feedback-danger-fg-active: var(--ds-color-feedback-danger-fg-active);
227
+ --color-feedback-danger-bg: var(--ds-color-feedback-danger-bg);
228
+ --color-feedback-danger-border: var(--ds-color-feedback-danger-border);
229
+ --radius-control: var(--ds-radius-control);
230
+ --radius-chip: var(--ds-radius-chip);
231
+ --radius-surface: var(--ds-radius-surface);
232
+ --radius-badge: var(--ds-radius-badge);
233
+ }
package/dist/css/tokens.css ADDED
@@ -0,0 +1,439 @@
1
+ /* GENERATED FILE — do not edit.
2
+ * The namespaced design tokens (target architecture §9) — the runtime contract.
3
+ * Source: tokens/src (DTCG, ADR-003). Generator: tokens/build/generate-ds-css.mjs.
4
+ * Change the token files and run `pnpm tokens:build`; `pnpm tokens:check` fails
5
+ * when this file is out of date. */
6
+
7
+ @layer theme, base, ds, components, utilities;
8
+
9
+ :root {
10
+ --ds-color-canvas: #ffffff;
11
+ --ds-color-canvas-sunken: #f1f3f8;
12
+ --ds-color-canvas-sunken-strong: #e7eaf1;
13
+ --ds-color-surface: #ffffff;
14
+ --ds-color-surface-sunken: #f7f8fc;
15
+ --ds-color-surface-sunken-strong: #ececf1;
16
+ --ds-color-content: #0a0a0a;
17
+ --ds-color-content-secondary: #38383b;
18
+ --ds-color-content-muted: #5f5f64;
19
+ --ds-color-content-subtle: #6b6b70;
20
+ --ds-color-content-faint: #9a9aa0;
21
+ --ds-color-border: #e4e7ef;
22
+ --ds-color-border-subtle: #eef0f5;
23
+ --ds-color-border-strong: #d3d8e3;
24
+ --ds-color-action-accent-bg: #6c42f8;
25
+ --ds-color-action-accent-bg-strong: #5127e8;
26
+ --ds-color-action-accent-subtle-bg: #efeaff;
27
+ --ds-color-action-accent-bg-hover: #5e35f2;
28
+ --ds-color-action-accent-bg-active: #5127e8;
29
+ --ds-color-action-accent-ring: rgba(108, 66, 248, 0.18);
30
+ --ds-color-action-suite-bg: #087f9c;
31
+ --ds-color-action-suite-bg-hover: #076f89;
32
+ --ds-color-action-suite-bg-active: #065f75;
33
+ --ds-color-action-suite-fg: #ffffff;
34
+ --ds-ref-brand-pro-bg: #f4f1ff;
35
+ --ds-ref-brand-pro-bg-hover: #eee9ff;
36
+ --ds-ref-brand-pro-bg-active: #e4ddff;
37
+ --ds-ref-brand-pro-fg: #6c42f8;
38
+ --ds-ref-brand-pro-fg-hover: #5e35f2;
39
+ --ds-ref-brand-pro-fg-active: #5127e8;
40
+ --ds-ref-brand-pro-fg-disabled: #b7a7f3;
41
+ --ds-ref-brand-pro-border: #7b5bd8;
42
+ --ds-ref-brand-pro-ring: rgba(108, 66, 248, 0.18);
43
+ --ds-color-action-brand-bg: var(--ds-ref-brand-pro-fg);
44
+ --ds-color-action-brand-bg-hover: var(--ds-ref-brand-pro-fg-hover);
45
+ --ds-color-action-brand-bg-active: var(--ds-ref-brand-pro-fg-active);
46
+ --ds-color-action-brand-bg-disabled: var(--ds-ref-brand-pro-fg-disabled);
47
+ --ds-color-action-brand-subtle-bg: var(--ds-ref-brand-pro-bg);
48
+ --ds-color-action-brand-subtle-bg-hover: var(--ds-ref-brand-pro-bg-hover);
49
+ --ds-color-action-brand-subtle-bg-active: var(--ds-ref-brand-pro-bg-active);
50
+ --ds-color-action-brand-border: var(--ds-ref-brand-pro-border);
51
+ --ds-color-action-brand-ring: var(--ds-ref-brand-pro-ring);
52
+ --ds-color-action-brand-fg: var(--ds-ref-brand-pro-on-fg);
53
+ --ds-ref-brand-pro-seed: #6c42f8;
54
+ --ds-ref-brand-audit-seed: #0d9488;
55
+ --ds-ref-brand-books-seed: #2da85a;
56
+ --ds-ref-brand-tax-seed: #0066ff;
57
+ --ds-ref-brand-audit-fg: #0f766e;
58
+ --ds-ref-brand-audit-fg-hover: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 88%, var(--ds-color-content));
59
+ --ds-ref-brand-audit-fg-active: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 74%, var(--ds-color-content));
60
+ --ds-ref-brand-audit-fg-disabled: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 42%, #ffffff);
61
+ --ds-ref-brand-audit-bg: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 8%, #ffffff);
62
+ --ds-ref-brand-audit-bg-hover: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 13%, #ffffff);
63
+ --ds-ref-brand-audit-bg-active: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 20%, #ffffff);
64
+ --ds-ref-brand-audit-border: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 45%, #ffffff);
65
+ --ds-ref-brand-audit-ring: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 20%, transparent);
66
+ --ds-ref-brand-audit-on-fg: #ffffff;
67
+ --ds-ref-brand-books-fg: #0f7a4d;
68
+ --ds-ref-brand-books-fg-hover: color-mix(in srgb, var(--ds-ref-brand-books-fg) 88%, var(--ds-color-content));
69
+ --ds-ref-brand-books-fg-active: color-mix(in srgb, var(--ds-ref-brand-books-fg) 74%, var(--ds-color-content));
70
+ --ds-ref-brand-books-fg-disabled: color-mix(in srgb, var(--ds-ref-brand-books-fg) 42%, #ffffff);
71
+ --ds-ref-brand-books-bg: color-mix(in srgb, var(--ds-ref-brand-books-fg) 8%, #ffffff);
72
+ --ds-ref-brand-books-bg-hover: color-mix(in srgb, var(--ds-ref-brand-books-fg) 13%, #ffffff);
73
+ --ds-ref-brand-books-bg-active: color-mix(in srgb, var(--ds-ref-brand-books-fg) 20%, #ffffff);
74
+ --ds-ref-brand-books-border: color-mix(in srgb, var(--ds-ref-brand-books-fg) 45%, #ffffff);
75
+ --ds-ref-brand-books-ring: color-mix(in srgb, var(--ds-ref-brand-books-fg) 20%, transparent);
76
+ --ds-ref-brand-books-on-fg: #ffffff;
77
+ --ds-ref-brand-tax-fg: #2258d8;
78
+ --ds-ref-brand-tax-fg-hover: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 88%, var(--ds-color-content));
79
+ --ds-ref-brand-tax-fg-active: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 74%, var(--ds-color-content));
80
+ --ds-ref-brand-tax-fg-disabled: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 42%, #ffffff);
81
+ --ds-ref-brand-tax-bg: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 8%, #ffffff);
82
+ --ds-ref-brand-tax-bg-hover: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 13%, #ffffff);
83
+ --ds-ref-brand-tax-bg-active: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 20%, #ffffff);
84
+ --ds-ref-brand-tax-border: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 45%, #ffffff);
85
+ --ds-ref-brand-tax-ring: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 20%, transparent);
86
+ --ds-ref-brand-tax-on-fg: #ffffff;
87
+ --ds-gradient-brand: linear-gradient(135deg, var(--ds-ref-brand-pro-seed), var(--ds-color-action-accent-bg));
88
+ --ds-ref-gradient-brand-pro: linear-gradient(135deg, var(--ds-ref-brand-pro-fg), var(--ds-ref-brand-pro-fg-active));
89
+ --ds-ref-gradient-brand-audit: linear-gradient(135deg, var(--ds-ref-brand-audit-fg), var(--ds-ref-brand-audit-fg-hover));
90
+ --ds-ref-gradient-brand-books: linear-gradient(135deg, var(--ds-ref-brand-books-fg), var(--ds-ref-brand-books-fg-hover));
91
+ --ds-ref-gradient-brand-tax: linear-gradient(135deg, var(--ds-ref-brand-tax-fg), var(--ds-ref-brand-tax-fg-hover));
92
+ --ds-gradient-ai: linear-gradient(135deg, #9e32ff, #1bb6ff);
93
+ --ds-color-action-accent-fg: #ffffff;
94
+ --ds-ref-brand-pro-on-fg: #ffffff;
95
+ --ds-color-feedback-danger-solid-fg: #ffffff;
96
+ --ds-color-feedback-success-solid-fg: #ffffff;
97
+ --ds-selection-fg: var(--ds-color-action-accent-fg);
98
+ --ds-color-content-disabled: #a7a7ac;
99
+ --ds-color-state-disabled-bg: #f3f3f1;
100
+ --ds-color-state-hover: rgba(10, 10, 10, 0.03);
101
+ --ds-color-state-active: rgba(10, 10, 10, 0.05);
102
+ --ds-control-bg: transparent;
103
+ --ds-control-fg: var(--ds-color-content-secondary);
104
+ --ds-control-muted-fg: var(--ds-color-content-muted);
105
+ --ds-control-hover-bg: var(--ds-color-canvas-sunken);
106
+ --ds-control-hover-fg: var(--ds-color-content);
107
+ --ds-control-active-bg: var(--ds-color-canvas-sunken-strong);
108
+ --ds-control-border: var(--ds-color-border);
109
+ --ds-control-border-strong: var(--ds-color-border-strong);
110
+ --ds-control-border-hover: var(--ds-color-content-subtle);
111
+ --ds-control-neutral-bg: var(--ds-color-canvas-sunken);
112
+ --ds-control-danger-fg: var(--ds-color-feedback-danger-fg);
113
+ --ds-control-danger-hover-bg: var(--ds-color-feedback-danger-bg);
114
+ --ds-menu-bg: var(--ds-color-surface);
115
+ --ds-menu-fg: var(--ds-color-content);
116
+ --ds-menu-border: var(--ds-color-border);
117
+ --ds-menu-label-fg: var(--ds-color-content-muted);
118
+ --ds-menu-item-fg: var(--ds-color-content-secondary);
119
+ --ds-menu-item-hover-bg: var(--ds-color-canvas-sunken);
120
+ --ds-menu-item-hover-fg: var(--ds-color-content);
121
+ --ds-menu-item-danger-fg: var(--ds-color-feedback-danger-fg);
122
+ --ds-menu-item-danger-hover-bg: var(--ds-color-feedback-danger-bg);
123
+ --ds-menu-item-danger-hover-fg: var(--ds-color-feedback-danger-fg);
124
+ --ds-menu-shortcut-fg: var(--ds-color-content-subtle);
125
+ --ds-selection-floating-bg: var(--ds-color-content);
126
+ --ds-selection-floating-fg: var(--ds-color-canvas);
127
+ --ds-selection-floating-muted-fg: color-mix(in oklab, var(--ds-color-canvas) 72%, transparent);
128
+ --ds-selection-floating-hover-bg: color-mix(in oklab, var(--ds-color-canvas) 10%, transparent);
129
+ --ds-selection-floating-active-bg: color-mix(in oklab, var(--ds-color-canvas) 16%, transparent);
130
+ --ds-selection-floating-border: color-mix(in oklab, var(--ds-color-canvas) 20%, transparent);
131
+ --ds-color-feedback-success-fg: #1f7a3d;
132
+ --ds-color-feedback-success-fg-hover: #1b6d36;
133
+ --ds-color-feedback-success-fg-active: #155a2c;
134
+ --ds-color-feedback-success-bg: #eaf6ee;
135
+ --ds-color-feedback-success-border: #c5e5cf;
136
+ --ds-color-feedback-warning-fg: #8a4606;
137
+ --ds-color-feedback-warning-bg: #fff3e5;
138
+ --ds-color-feedback-warning-border: #f5d5a8;
139
+ --ds-color-feedback-danger-fg: #c43838;
140
+ --ds-color-feedback-danger-fg-hover: #b13232;
141
+ --ds-color-feedback-danger-fg-active: #9f2d2d;
142
+ --ds-color-feedback-danger-bg: #fbeaea;
143
+ --ds-color-feedback-danger-border: #ecc5c5;
144
+ --ds-color-priority-low: #3366d6;
145
+ --ds-color-priority-medium: #7642d6;
146
+ --ds-color-priority-high: #d9820a;
147
+ --ds-color-priority-urgent: var(--ds-color-feedback-danger-fg);
148
+ --ds-focus-ring-color: var(--ds-ref-brand-pro-ring);
149
+ --ds-focus-ring-border: var(--ds-ref-brand-pro-fg);
150
+ --ds-color-chart-1: #4f37c2;
151
+ --ds-color-chart-2: #6549e5;
152
+ --ds-color-chart-3: #8268f0;
153
+ --ds-color-chart-4: #a18cf0;
154
+ --ds-color-chart-line: #6549e5;
155
+ --ds-color-chart-area-from: rgba(101, 73, 229, 0.22);
156
+ --ds-color-chart-area-to: rgba(101, 73, 229, 0);
157
+ --ds-color-service-tax: var(--ds-ref-brand-tax-fg);
158
+ --ds-color-service-tax-bg: var(--ds-ref-brand-tax-bg);
159
+ --ds-color-service-audit: var(--ds-ref-brand-audit-fg);
160
+ --ds-color-service-audit-bg: var(--ds-ref-brand-audit-bg);
161
+ --ds-color-service-accounting: var(--ds-ref-brand-books-fg);
162
+ --ds-color-service-accounting-bg: var(--ds-ref-brand-books-bg);
163
+ --ds-shadow-focus-ring: 0 0 0 2px var(--ds-focus-ring-color);
164
+ --ds-shadow-quiet: 0 1px 2px rgba(10, 10, 10, 0.03);
165
+ --ds-shadow-card: 0 12px 28px -16px rgba(10, 10, 10, 0.18), 0 1px 2px rgba(10, 10, 10, 0.04);
166
+ --ds-shadow-pop: 0 30px 80px -30px rgba(10, 10, 10, 0.18), 0 8px 24px -8px rgba(10, 10, 10, 0.06);
167
+ --ds-ref-shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.04);
168
+ --ds-ref-shadow-sm: 0 1px 3px rgba(10, 10, 10, 0.06), 0 1px 2px rgba(10, 10, 10, 0.04);
169
+ --ds-ref-shadow-md: 0 4px 8px -2px rgba(10, 10, 10, 0.08), 0 2px 4px -2px rgba(10, 10, 10, 0.05);
170
+ --ds-ref-shadow-lg: 0 12px 24px -8px rgba(10, 10, 10, 0.12), 0 4px 8px -4px rgba(10, 10, 10, 0.06);
171
+ --ds-ref-shadow-xl: 0 20px 40px -12px rgba(10, 10, 10, 0.16), 0 8px 16px -8px rgba(10, 10, 10, 0.08);
172
+ --ds-ref-shadow-2xl: 0 32px 64px -16px rgba(10, 10, 10, 0.2), 0 12px 24px -12px rgba(10, 10, 10, 0.1);
173
+ --ds-font-display: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
174
+ --ds-font-body: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
175
+ --ds-font-mono: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
176
+ --ds-font-sans: var(--ds-font-body);
177
+ --ds-ref-font-weight-regular: 400;
178
+ --ds-ref-font-weight-medium: 500;
179
+ --ds-ref-font-weight-semibold: 600;
180
+ --ds-ref-font-weight-bold: 700;
181
+ --ds-radius-control: 7px;
182
+ --ds-radius-chip: 5px;
183
+ --ds-radius-surface: 12px;
184
+ --ds-radius-badge: 4px;
185
+ --ds-radius-full: 9999px;
186
+ --ds-ref-ease-enter: cubic-bezier(0.2, 0.8, 0.2, 1);
187
+ --ds-ref-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
188
+ --ds-ref-ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
189
+ --ds-ref-ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
190
+ --ds-ref-duration-instant: 100ms;
191
+ --ds-ref-duration-fast: 150ms;
192
+ --ds-ref-duration-moderate: 200ms;
193
+ --ds-ref-duration-slow: 250ms;
194
+ --ds-ref-duration-slower: 400ms;
195
+ --ds-motion-duration-press: var(--ds-ref-duration-instant);
196
+ --ds-motion-duration-feedback: var(--ds-ref-duration-fast);
197
+ --ds-motion-duration-overlay: var(--ds-ref-duration-moderate);
198
+ --ds-motion-duration-spatial: var(--ds-ref-duration-slow);
199
+ --ds-motion-duration-deliberate: var(--ds-ref-duration-slower);
200
+ --ds-motion-ease-enter: var(--ds-ref-ease-enter);
201
+ --ds-motion-ease-exit: var(--ds-ref-ease-exit);
202
+ --ds-motion-ease-move: var(--ds-ref-ease-standard);
203
+ --ds-layout-shell-sidebar-width: 200px;
204
+ --ds-layout-shell-sidebar-rail-width: 56px;
205
+ --ds-layout-shell-header-height: 56px;
206
+ --ds-layout-content-padding: 32px;
207
+ --ds-animate-accordion-down: accordion-down 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
208
+ --ds-animate-accordion-up: accordion-up 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
209
+ --ds-animate-collapsible-down: collapsible-down 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
210
+ --ds-animate-collapsible-up: collapsible-up 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
211
+ --ds-z-base: 0;
212
+ --ds-z-sticky: 100;
213
+ --ds-z-overlay: 200;
214
+ --ds-z-modal: 300;
215
+ --ds-z-popover: 400;
216
+ --ds-z-toast: 500;
217
+ --ds-z-tooltip: 600;
218
+ --ds-compat-color-destructive-foreground: #ffffff;
219
+ --ds-compat-color-success-foreground: #ffffff;
220
+ --ds-color-feedback-info-fg: var(--ds-color-action-accent-bg-strong);
221
+ --ds-compat-color-brand-soft: #f4f0fe;
222
+ --ds-compat-color-brand-soft-foreground: #4925c9;
223
+ --ds-color-border-focus: var(--ds-color-action-accent-bg);
224
+ --ds-color-scrim: rgba(10, 10, 10, 0.4);
225
+ --ds-compat-color-green-dark: #196832;
226
+ --ds-color-content-link: var(--ds-color-action-accent-bg);
227
+ --ds-compat-radius-md: 5px;
228
+ --ds-compat-radius-lg: 8px;
229
+ --ds-compat-radius-xl: 12px;
230
+ }
231
+
232
+ [data-ds-scheme="dark"],
233
+ .dark {
234
+ --ds-color-canvas: #0a0a0b;
235
+ --ds-color-canvas-sunken: #141416;
236
+ --ds-color-canvas-sunken-strong: #1e1e22;
237
+ --ds-color-surface: #16161a;
238
+ --ds-color-surface-sunken: #1a1a1f;
239
+ --ds-color-surface-sunken-strong: #22222a;
240
+ --ds-color-content: #f4f4f5;
241
+ --ds-color-content-secondary: #c4c4c8;
242
+ --ds-color-content-muted: #a7a7ac;
243
+ --ds-color-content-subtle: #9a9aa0;
244
+ --ds-color-content-faint: #83838a;
245
+ --ds-color-border: rgba(255, 255, 255, 0.08);
246
+ --ds-color-border-subtle: rgba(255, 255, 255, 0.05);
247
+ --ds-color-border-strong: rgba(255, 255, 255, 0.14);
248
+ --ds-color-action-accent-bg: #a78bff;
249
+ --ds-color-action-accent-bg-strong: #8b6cf5;
250
+ --ds-color-action-accent-subtle-bg: rgba(108, 66, 248, 0.16);
251
+ --ds-color-action-accent-bg-hover: #b9a2ff;
252
+ --ds-color-action-accent-bg-active: #8b6cf5;
253
+ --ds-color-action-suite-bg: #55d6ed;
254
+ --ds-color-action-suite-bg-hover: #71deef;
255
+ --ds-color-action-suite-bg-active: #3bc8e1;
256
+ --ds-color-action-suite-fg: #0a0a0b;
257
+ --ds-color-action-brand-bg: var(--ds-ref-brand-pro-fg);
258
+ --ds-compat-color-brand-soft: #2a1f47;
259
+ --ds-compat-color-brand-soft-foreground: #c8b6fe;
260
+ --ds-ref-brand-pro-bg: rgba(108, 66, 248, 0.15);
261
+ --ds-ref-brand-pro-bg-hover: rgba(108, 66, 248, 0.22);
262
+ --ds-ref-brand-pro-bg-active: rgba(108, 66, 248, 0.3);
263
+ --ds-ref-brand-pro-fg: #a78bff;
264
+ --ds-ref-brand-pro-fg-hover: #b9a2ff;
265
+ --ds-ref-brand-pro-fg-active: #c9b6ff;
266
+ --ds-ref-brand-pro-border: #7b5bd8;
267
+ --ds-ref-brand-pro-seed: #a78bff;
268
+ --ds-ref-brand-audit-seed: #2dd4bf;
269
+ --ds-ref-brand-books-seed: #5dc77e;
270
+ --ds-ref-brand-tax-seed: #4d8dff;
271
+ --ds-ref-brand-audit-fg: #2dd4bf;
272
+ --ds-ref-brand-audit-fg-hover: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 82%, #ffffff);
273
+ --ds-ref-brand-audit-fg-active: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 66%, #ffffff);
274
+ --ds-ref-brand-audit-fg-disabled: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 45%, var(--ds-color-canvas));
275
+ --ds-ref-brand-audit-bg: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 15%, transparent);
276
+ --ds-ref-brand-audit-bg-hover: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 22%, transparent);
277
+ --ds-ref-brand-audit-bg-active: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 30%, transparent);
278
+ --ds-ref-brand-audit-border: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 40%, transparent);
279
+ --ds-ref-brand-audit-ring: color-mix(in srgb, var(--ds-ref-brand-audit-fg) 35%, transparent);
280
+ --ds-ref-brand-audit-on-fg: #0a0a0b;
281
+ --ds-ref-brand-books-fg: #4cc47e;
282
+ --ds-ref-brand-books-fg-hover: color-mix(in srgb, var(--ds-ref-brand-books-fg) 82%, #ffffff);
283
+ --ds-ref-brand-books-fg-active: color-mix(in srgb, var(--ds-ref-brand-books-fg) 66%, #ffffff);
284
+ --ds-ref-brand-books-fg-disabled: color-mix(in srgb, var(--ds-ref-brand-books-fg) 45%, var(--ds-color-canvas));
285
+ --ds-ref-brand-books-bg: color-mix(in srgb, var(--ds-ref-brand-books-fg) 15%, transparent);
286
+ --ds-ref-brand-books-bg-hover: color-mix(in srgb, var(--ds-ref-brand-books-fg) 22%, transparent);
287
+ --ds-ref-brand-books-bg-active: color-mix(in srgb, var(--ds-ref-brand-books-fg) 30%, transparent);
288
+ --ds-ref-brand-books-border: color-mix(in srgb, var(--ds-ref-brand-books-fg) 40%, transparent);
289
+ --ds-ref-brand-books-ring: color-mix(in srgb, var(--ds-ref-brand-books-fg) 35%, transparent);
290
+ --ds-ref-brand-books-on-fg: #0a0a0b;
291
+ --ds-ref-brand-tax-fg: #6ba1ff;
292
+ --ds-ref-brand-tax-fg-hover: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 82%, #ffffff);
293
+ --ds-ref-brand-tax-fg-active: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 66%, #ffffff);
294
+ --ds-ref-brand-tax-fg-disabled: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 45%, var(--ds-color-canvas));
295
+ --ds-ref-brand-tax-bg: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 15%, transparent);
296
+ --ds-ref-brand-tax-bg-hover: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 22%, transparent);
297
+ --ds-ref-brand-tax-bg-active: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 30%, transparent);
298
+ --ds-ref-brand-tax-border: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 40%, transparent);
299
+ --ds-ref-brand-tax-ring: color-mix(in srgb, var(--ds-ref-brand-tax-fg) 35%, transparent);
300
+ --ds-ref-brand-tax-on-fg: #0a0a0b;
301
+ --ds-color-content-disabled: #6b6b72;
302
+ --ds-color-state-disabled-bg: #1f1f23;
303
+ --ds-color-state-hover: rgba(255, 255, 255, 0.04);
304
+ --ds-color-state-active: rgba(255, 255, 255, 0.08);
305
+ --ds-color-action-accent-fg: #0a0a0b;
306
+ --ds-ref-brand-pro-on-fg: #0a0a0b;
307
+ --ds-color-feedback-danger-solid-fg: #0a0a0b;
308
+ --ds-color-feedback-success-solid-fg: #0a0a0b;
309
+ --ds-color-feedback-success-fg: #5dc77e;
310
+ --ds-color-feedback-success-fg-hover: #4fb870;
311
+ --ds-color-feedback-success-fg-active: #43a663;
312
+ --ds-color-feedback-success-bg: rgba(31, 122, 61, 0.18);
313
+ --ds-color-feedback-success-border: rgba(31, 122, 61, 0.4);
314
+ --ds-color-feedback-warning-fg: #e89b3c;
315
+ --ds-color-feedback-warning-bg: rgba(180, 95, 10, 0.18);
316
+ --ds-color-feedback-warning-border: rgba(180, 95, 10, 0.4);
317
+ --ds-color-feedback-danger-fg: #f36868;
318
+ --ds-color-feedback-danger-fg-hover: #e25656;
319
+ --ds-color-feedback-danger-fg-active: #d64a4a;
320
+ --ds-color-feedback-danger-bg: rgba(196, 56, 56, 0.18);
321
+ --ds-color-feedback-danger-border: rgba(196, 56, 56, 0.4);
322
+ --ds-color-priority-low: #6e9bf0;
323
+ --ds-color-priority-medium: #a78bfa;
324
+ --ds-color-priority-high: #e8a04a;
325
+ --ds-color-chart-1: #8268f0;
326
+ --ds-color-chart-2: #a18cf0;
327
+ --ds-color-chart-3: #b6a6f5;
328
+ --ds-color-chart-4: #ccc0f9;
329
+ --ds-color-chart-line: #a18cf0;
330
+ --ds-color-chart-area-from: rgba(161, 140, 240, 0.28);
331
+ --ds-color-chart-area-to: rgba(161, 140, 240, 0);
332
+ --ds-color-service-tax: var(--ds-ref-brand-tax-fg);
333
+ --ds-color-service-tax-bg: var(--ds-ref-brand-tax-bg);
334
+ --ds-color-service-audit: var(--ds-ref-brand-audit-fg);
335
+ --ds-color-service-audit-bg: var(--ds-ref-brand-audit-bg);
336
+ --ds-color-service-accounting: var(--ds-ref-brand-books-fg);
337
+ --ds-color-service-accounting-bg: var(--ds-ref-brand-books-bg);
338
+ --ds-shadow-quiet: 0 1px 2px rgba(0, 0, 0, 0.4);
339
+ --ds-shadow-card: 0 12px 28px -16px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.5);
340
+ --ds-shadow-pop: 0 30px 80px -30px rgba(0, 0, 0, 0.7), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
341
+ --ds-ref-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
342
+ --ds-ref-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
343
+ --ds-ref-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.45);
344
+ --ds-ref-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.5);
345
+ --ds-ref-shadow-xl: 0 20px 40px -12px rgba(0, 0, 0, 0.65), 0 8px 16px -8px rgba(0, 0, 0, 0.5);
346
+ --ds-ref-shadow-2xl: 0 32px 64px -16px rgba(0, 0, 0, 0.7), 0 12px 24px -12px rgba(0, 0, 0, 0.55);
347
+ }
348
+
349
+ [data-ds-brand="pro"],
350
+ [data-brand="pro"] {
351
+ --ds-color-action-brand-bg: var(--ds-ref-brand-pro-fg);
352
+ --ds-color-action-brand-bg-hover: var(--ds-ref-brand-pro-fg-hover);
353
+ --ds-color-action-brand-bg-active: var(--ds-ref-brand-pro-fg-active);
354
+ --ds-color-action-brand-bg-disabled: var(--ds-ref-brand-pro-fg-disabled);
355
+ --ds-color-action-brand-subtle-bg: var(--ds-ref-brand-pro-bg);
356
+ --ds-color-action-brand-subtle-bg-hover: var(--ds-ref-brand-pro-bg-hover);
357
+ --ds-color-action-brand-subtle-bg-active: var(--ds-ref-brand-pro-bg-active);
358
+ --ds-color-action-brand-border: var(--ds-ref-brand-pro-border);
359
+ --ds-color-action-brand-ring: var(--ds-ref-brand-pro-ring);
360
+ --ds-color-action-brand-fg: var(--ds-ref-brand-pro-on-fg);
361
+ --ds-color-action-accent-bg: var(--ds-ref-brand-pro-fg);
362
+ --ds-color-action-accent-bg-strong: var(--ds-ref-brand-pro-fg-active);
363
+ --ds-color-action-accent-bg-hover: var(--ds-ref-brand-pro-fg-hover);
364
+ --ds-color-action-accent-bg-active: var(--ds-ref-brand-pro-fg-active);
365
+ --ds-color-action-accent-subtle-bg: var(--ds-ref-brand-pro-bg);
366
+ --ds-color-action-accent-ring: var(--ds-ref-brand-pro-ring);
367
+ --ds-color-action-accent-fg: var(--ds-ref-brand-pro-on-fg);
368
+ --ds-focus-ring-color: var(--ds-ref-brand-pro-ring);
369
+ --ds-focus-ring-border: var(--ds-ref-brand-pro-fg);
370
+ }
371
+
372
+ [data-ds-brand="audit"],
373
+ [data-brand="audit"] {
374
+ --ds-color-action-brand-bg: var(--ds-ref-brand-audit-fg);
375
+ --ds-color-action-brand-bg-hover: var(--ds-ref-brand-audit-fg-hover);
376
+ --ds-color-action-brand-bg-active: var(--ds-ref-brand-audit-fg-active);
377
+ --ds-color-action-brand-bg-disabled: var(--ds-ref-brand-audit-fg-disabled);
378
+ --ds-color-action-brand-subtle-bg: var(--ds-ref-brand-audit-bg);
379
+ --ds-color-action-brand-subtle-bg-hover: var(--ds-ref-brand-audit-bg-hover);
380
+ --ds-color-action-brand-subtle-bg-active: var(--ds-ref-brand-audit-bg-active);
381
+ --ds-color-action-brand-border: var(--ds-ref-brand-audit-border);
382
+ --ds-color-action-brand-ring: var(--ds-ref-brand-audit-ring);
383
+ --ds-color-action-brand-fg: var(--ds-ref-brand-audit-on-fg);
384
+ --ds-color-action-accent-bg: var(--ds-ref-brand-audit-fg);
385
+ --ds-color-action-accent-bg-strong: var(--ds-ref-brand-audit-fg-active);
386
+ --ds-color-action-accent-bg-hover: var(--ds-ref-brand-audit-fg-hover);
387
+ --ds-color-action-accent-bg-active: var(--ds-ref-brand-audit-fg-active);
388
+ --ds-color-action-accent-subtle-bg: var(--ds-ref-brand-audit-bg);
389
+ --ds-color-action-accent-ring: var(--ds-ref-brand-audit-ring);
390
+ --ds-color-action-accent-fg: var(--ds-ref-brand-audit-on-fg);
391
+ --ds-focus-ring-color: var(--ds-ref-brand-audit-ring);
392
+ --ds-focus-ring-border: var(--ds-ref-brand-audit-fg);
393
+ }
394
+
395
+ [data-ds-brand="books"],
396
+ [data-brand="books"] {
397
+ --ds-color-action-brand-bg: var(--ds-ref-brand-books-fg);
398
+ --ds-color-action-brand-bg-hover: var(--ds-ref-brand-books-fg-hover);
399
+ --ds-color-action-brand-bg-active: var(--ds-ref-brand-books-fg-active);
400
+ --ds-color-action-brand-bg-disabled: var(--ds-ref-brand-books-fg-disabled);
401
+ --ds-color-action-brand-subtle-bg: var(--ds-ref-brand-books-bg);
402
+ --ds-color-action-brand-subtle-bg-hover: var(--ds-ref-brand-books-bg-hover);
403
+ --ds-color-action-brand-subtle-bg-active: var(--ds-ref-brand-books-bg-active);
404
+ --ds-color-action-brand-border: var(--ds-ref-brand-books-border);
405
+ --ds-color-action-brand-ring: var(--ds-ref-brand-books-ring);
406
+ --ds-color-action-brand-fg: var(--ds-ref-brand-books-on-fg);
407
+ --ds-color-action-accent-bg: var(--ds-ref-brand-books-fg);
408
+ --ds-color-action-accent-bg-strong: var(--ds-ref-brand-books-fg-active);
409
+ --ds-color-action-accent-bg-hover: var(--ds-ref-brand-books-fg-hover);
410
+ --ds-color-action-accent-bg-active: var(--ds-ref-brand-books-fg-active);
411
+ --ds-color-action-accent-subtle-bg: var(--ds-ref-brand-books-bg);
412
+ --ds-color-action-accent-ring: var(--ds-ref-brand-books-ring);
413
+ --ds-color-action-accent-fg: var(--ds-ref-brand-books-on-fg);
414
+ --ds-focus-ring-color: var(--ds-ref-brand-books-ring);
415
+ --ds-focus-ring-border: var(--ds-ref-brand-books-fg);
416
+ }
417
+
418
+ [data-ds-brand="tax"],
419
+ [data-brand="tax"] {
420
+ --ds-color-action-brand-bg: var(--ds-ref-brand-tax-fg);
421
+ --ds-color-action-brand-bg-hover: var(--ds-ref-brand-tax-fg-hover);
422
+ --ds-color-action-brand-bg-active: var(--ds-ref-brand-tax-fg-active);
423
+ --ds-color-action-brand-bg-disabled: var(--ds-ref-brand-tax-fg-disabled);
424
+ --ds-color-action-brand-subtle-bg: var(--ds-ref-brand-tax-bg);
425
+ --ds-color-action-brand-subtle-bg-hover: var(--ds-ref-brand-tax-bg-hover);
426
+ --ds-color-action-brand-subtle-bg-active: var(--ds-ref-brand-tax-bg-active);
427
+ --ds-color-action-brand-border: var(--ds-ref-brand-tax-border);
428
+ --ds-color-action-brand-ring: var(--ds-ref-brand-tax-ring);
429
+ --ds-color-action-brand-fg: var(--ds-ref-brand-tax-on-fg);
430
+ --ds-color-action-accent-bg: var(--ds-ref-brand-tax-fg);
431
+ --ds-color-action-accent-bg-strong: var(--ds-ref-brand-tax-fg-active);
432
+ --ds-color-action-accent-bg-hover: var(--ds-ref-brand-tax-fg-hover);
433
+ --ds-color-action-accent-bg-active: var(--ds-ref-brand-tax-fg-active);
434
+ --ds-color-action-accent-subtle-bg: var(--ds-ref-brand-tax-bg);
435
+ --ds-color-action-accent-ring: var(--ds-ref-brand-tax-ring);
436
+ --ds-color-action-accent-fg: var(--ds-ref-brand-tax-on-fg);
437
+ --ds-focus-ring-color: var(--ds-ref-brand-tax-ring);
438
+ --ds-focus-ring-border: var(--ds-ref-brand-tax-fg);
439
+ }