@studiolxd/brand 49.6.0 → 49.8.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 (25) hide show
  1. package/CHANGELOG.md +72 -0
  2. package/dist/_shared/tokens.js +4 -0
  3. package/dist/_types/molecules/Banner/Banner.d.ts +9 -4
  4. package/dist/_types/sections/AppShell/AppShell.d.ts +12 -1
  5. package/dist/alert.js +40 -35
  6. package/dist/app-shell.css +1 -1
  7. package/dist/app-shell.js +63 -44
  8. package/dist/banner.css +1 -1
  9. package/dist/banner.js +25 -21
  10. package/dist/brand.css +966 -252
  11. package/dist/fieldset.css +1 -1
  12. package/dist/sidebar.css +1 -1
  13. package/dist/tokens.css +702 -1
  14. package/package.json +1 -1
  15. package/src/tokens/components/fieldset.css +7 -0
  16. package/src/tokens/components/fieldset.ts +4 -0
  17. package/src/tokens/index.css +6 -0
  18. package/src/tokens/molecules/banner.css +3 -0
  19. package/src/tokens/molecules/banner.ts +1 -1
  20. package/src/tokens/scss/_index.legacy.scss +1 -0
  21. package/src/tokens/scss/_index.scss +1 -0
  22. package/src/tokens/scss/components/_fieldset.scss +4 -0
  23. package/src/tokens/scss/molecules/_banner.scss +3 -0
  24. package/src/tokens/surface-light.css +685 -0
  25. package/src/tokens/tokens.json +4 -0
package/src/tokens/surface-light.css ADDED
@@ -0,0 +1,685 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ *
4
+ * Superficie siempre clara: `.surface-light` devuelve a su valor claro todo
5
+ * token que el modo oscuro haya volteado. Sobre página clara no hace falta
6
+ * bloque: los tokens ya están en claro.
7
+ */
8
+
9
+ .surface-dark .surface-light,
10
+ .surface-invert .surface-light,
11
+ [data-theme="dark"] .surface-light,
12
+ html.dark .surface-light {
13
+ --accordion-border-color: var(--color-primary);
14
+ --accordion-index-color: var(--color-text-muted-on-light);
15
+ --accordion-focus-ring-color: var(--color-primary);
16
+ --alert-bg: var(--color-primary);
17
+ --alert-border-color: var(--color-text-on-dark);
18
+ --alert-title-color: var(--color-text-on-dark);
19
+ --alert-description-color: var(--color-text-on-dark);
20
+ --app-header-bg: var(--color-background-light);
21
+ --app-header-border-color: var(--color-primary);
22
+ --app-launcher-trigger-color: var(--color-text-on-light);
23
+ --app-launcher-focus-ring-color: var(--color-primary);
24
+ --app-launcher-trigger-label-color: var(--sidebar-nav-item-color);
25
+ --app-launcher-content-bg: var(--floating-panel-bg);
26
+ --app-launcher-content-border-color: var(--floating-panel-border-color);
27
+ --app-launcher-tile-name-color: var(--color-text-on-light);
28
+ --app-launcher-trigger-hover-bg: var(--menu-item-highlighted-bg);
29
+ --app-launcher-trigger-hover-color: var(--menu-item-highlighted-color);
30
+ --app-launcher-tile-highlighted-bg: var(--menu-item-highlighted-bg);
31
+ --app-launcher-tile-highlighted-color: var(--menu-item-highlighted-color);
32
+ --app-launcher-tile-badge-hover-bg: var(--menu-item-highlighted-color);
33
+ --app-launcher-tile-badge-hover-color: var(--menu-item-highlighted-bg);
34
+ --async-multi-select-bg: var(--multi-select-bg);
35
+ --async-multi-select-border-color: var(--multi-select-border-color);
36
+ --async-multi-select-color: var(--multi-select-color);
37
+ --async-multi-select-content-bg: var(--multi-select-content-bg);
38
+ --async-multi-select-content-border-color: var(--multi-select-content-border-color);
39
+ --async-multi-select-error-border-color: var(--multi-select-error-border-color);
40
+ --async-multi-select-focus-ring-color: var(--multi-select-focus-ring-color);
41
+ --async-multi-select-item-highlighted-bg: var(--multi-select-item-highlighted-bg);
42
+ --async-multi-select-item-highlighted-color: var(--multi-select-item-highlighted-color);
43
+ --async-multi-select-placeholder-color: var(--multi-select-placeholder-color);
44
+ --async-multi-select-pill-bg: var(--multi-select-pill-bg);
45
+ --async-multi-select-pill-color: var(--multi-select-pill-color);
46
+ --async-multi-select-empty-color: var(--color-text-muted-on-light);
47
+ --async-select-bg: var(--select-bg);
48
+ --async-select-border-color: var(--select-border-color);
49
+ --async-select-color: var(--select-color);
50
+ --async-select-content-bg: var(--select-content-bg);
51
+ --async-select-content-border-color: var(--select-content-border-color);
52
+ --async-select-error-border-color: var(--select-error-border-color);
53
+ --async-select-focus-ring-color: var(--select-focus-ring-color);
54
+ --async-select-item-highlighted-bg: var(--select-item-highlighted-bg);
55
+ --async-select-item-highlighted-color: var(--select-item-highlighted-color);
56
+ --async-select-placeholder-color: var(--multi-select-placeholder-color);
57
+ --async-select-empty-color: var(--color-text-muted-on-light);
58
+ --avatar-initials-bg: var(--color-primary);
59
+ --avatar-initials-color: var(--color-text-on-dark);
60
+ --breadcrumb-separator-color: var(--color-text-on-light);
61
+ --breadcrumb-link-color: var(--color-text-on-light);
62
+ --breadcrumb-link-color-hover: var(--color-primary);
63
+ --breadcrumb-current-color: var(--color-text-on-light);
64
+ --breadcrumb-focus-ring-color: var(--color-primary);
65
+ --button-primary-focus-ring-color: var(--color-primary);
66
+ --button-destructive-focus-ring-color: var(--color-destructive-text-on-light);
67
+ --button-destructive-color: var(--color-destructive-text-on-light);
68
+ --button-destructive-border: var(--color-destructive-text-on-light);
69
+ --button-destructive-hover-bg: var(--color-destructive-fill);
70
+ --button-destructive-hover-color: var(--color-destructive-fill-text);
71
+ --button-destructive-hover-border: var(--color-destructive-fill);
72
+ --button-destructive-active-bg: var(--color-destructive-fill);
73
+ --button-destructive-active-color: var(--color-destructive-fill-text);
74
+ --button-destructive-active-border: var(--color-destructive-fill);
75
+ --button-outline-focus-ring-color: var(--color-text-on-light);
76
+ --button-outline-color: var(--color-text-on-light);
77
+ --button-outline-border: var(--color-text-on-light);
78
+ --button-outline-hover-bg: var(--color-text-on-light);
79
+ --button-outline-hover-color: var(--color-text-on-dark);
80
+ --button-outline-hover-border: var(--color-text-on-light);
81
+ --button-outline-active-bg: var(--color-text-on-light);
82
+ --button-outline-active-color: var(--color-text-on-dark);
83
+ --button-outline-active-border: var(--color-text-on-light);
84
+ --button-text-underline-width: var(--link-underline-width);
85
+ --button-text-hover-underline-width: var(--link-hover-underline-width);
86
+ --button-text-ink-color: var(--link-ink-color);
87
+ --button-text-disabled-color: var(--button-disabled-color);
88
+ --button-text-focus-ring-color: var(--link-focus-ring-color);
89
+ --button-text-color: var(--link-color);
90
+ --button-text-hover-color: var(--link-hover-color);
91
+ --button-text-active-color: var(--link-hover-color);
92
+ --button-ghost-disabled-color: var(--button-disabled-color);
93
+ --button-ghost-focus-ring-color: var(--color-primary);
94
+ --button-ghost-color: var(--color-text-on-light);
95
+ --button-ghost-hover-bg: var(--color-primary);
96
+ --button-ghost-hover-color: var(--color-text-on-dark);
97
+ --button-ghost-active-bg: var(--color-primary);
98
+ --button-ghost-active-color: var(--color-text-on-dark);
99
+ --card-outline-bg: var(--color-background-light);
100
+ --card-outline-color: var(--color-text-on-light);
101
+ --card-outline-border-color: var(--color-primary);
102
+ --card-selectable-focus-ring-color: var(--button-primary-focus-ring-color);
103
+ --checkbox-border-color: var(--color-primary);
104
+ --checkbox-bg-checked: var(--color-primary);
105
+ --checkbox-check-color: var(--color-white);
106
+ --checkbox-focus-ring-color: var(--color-primary);
107
+ --checkbox-error-border-color: var(--color-error-text-on-light);
108
+ --checkbox-disabled-border-color: var(--color-disabled-border-on-light);
109
+ --checkbox-disabled-bg-checked: var(--color-disabled-border-on-light);
110
+ --close-button-color: var(--color-text-on-light);
111
+ --close-button-focus-ring-color: var(--color-text-on-light);
112
+ --code-block-border-color: var(--card-outline-border-color);
113
+ --code-block-color: var(--color-text-on-light);
114
+ --code-block-bg: var(--color-surface-secondary-on-light);
115
+ --code-block-focus-ring-color: var(--color-primary);
116
+ --code-block-token-keyword-color: var(--color-chart-sequential-700);
117
+ --code-block-token-tag-color: var(--code-block-token-keyword-color);
118
+ --code-block-token-constant-color: var(--code-block-token-keyword-color);
119
+ --code-block-token-string-color: var(--color-green);
120
+ --code-block-token-regexp-color: var(--code-block-token-string-color);
121
+ --code-block-token-attribute-color: var(--code-block-token-string-color);
122
+ --code-block-token-number-color: var(--color-chart-diverging-warm-3);
123
+ --code-block-token-function-color: var(--code-block-token-number-color);
124
+ --code-block-token-comment-color: var(--color-text-muted-on-light);
125
+ --code-block-token-punctuation-color: var(--code-block-token-comment-color);
126
+ --code-block-token-operator-color: var(--code-block-token-comment-color);
127
+ --code-block-token-variable-color: var(--code-block-color);
128
+ --code-block-token-property-color: var(--code-block-token-variable-color);
129
+ --code-bg: var(--code-block-bg);
130
+ --code-color: var(--code-block-color);
131
+ --collapsible-trigger-color: var(--color-text-on-light);
132
+ --collapsible-focus-ring-color: var(--color-primary);
133
+ --description-list-border-color: var(--color-primary);
134
+ --description-list-term-color: var(--color-text-on-light);
135
+ --description-list-value-color: var(--color-text-on-light);
136
+ --empty-state-icon-color: var(--color-icon-secondary-on-light);
137
+ --empty-state-title-color: var(--color-text-muted-on-light);
138
+ --empty-state-description-color: var(--color-text-muted-on-light);
139
+ --figure-media-bg: var(--color-surface-secondary-on-light);
140
+ --figure-caption-color: var(--color-text-muted-on-light);
141
+ --file-upload-border-color: var(--color-primary);
142
+ --file-upload-bg: var(--color-surface-secondary-on-light);
143
+ --file-upload-text-color: var(--color-text-on-light);
144
+ --file-upload-subtext-color: var(--color-text-muted-on-light);
145
+ --file-upload-icon-color: var(--color-text-on-light);
146
+ --file-upload-drag-border-color: var(--color-primary);
147
+ --file-upload-drag-bg: var(--color-white);
148
+ --file-upload-error-border-color: var(--color-error-text-on-light);
149
+ --file-upload-error-bg: var(--color-surface-secondary-on-light);
150
+ --file-upload-item-bg: var(--color-white);
151
+ --file-upload-item-border-color: var(--color-primary);
152
+ --file-upload-item-name-color: var(--color-text-on-light);
153
+ --file-upload-item-size-color: var(--color-text-muted-on-light);
154
+ --file-upload-item-error-color: var(--color-error-text-on-light);
155
+ --file-upload-item-error-border-color: var(--color-error-text-on-light);
156
+ --file-upload-item-error-bg: var(--color-white);
157
+ --file-upload-thumb-bg: var(--color-surface-secondary-on-light);
158
+ --file-upload-thumb-icon-color: var(--color-icon-secondary-on-light);
159
+ --file-upload-remove-color: var(--color-text-muted-on-light);
160
+ --file-upload-remove-color-hover: var(--color-error-text-on-light);
161
+ --floating-dock-panel-bg: var(--floating-panel-bg);
162
+ --floating-dock-panel-border-color: var(--floating-panel-border-color);
163
+ --floating-dock-title-color: var(--modal-title-color);
164
+ --floating-dock-description-color: var(--modal-description-color);
165
+ --floating-dock-close-color: var(--modal-close-color);
166
+ --floating-dock-close-focus-ring-color: var(--modal-close-focus-ring-color);
167
+ --floating-dock-focus-ring-color: var(--color-primary);
168
+ --floating-panel-bg: var(--color-background-light);
169
+ --floating-panel-border-color: var(--color-primary);
170
+ --form-error-color: var(--color-error-text-on-light);
171
+ --form-helper-color: var(--color-text-on-light);
172
+ --form-success-color: var(--color-text-on-light);
173
+ --input-phone-country-border-color: var(--color-primary);
174
+ --input-phone-country-item-highlighted-bg: var(--select-item-highlighted-bg);
175
+ --input-phone-country-item-highlighted-color: var(--select-item-highlighted-color);
176
+ --input-bg: var(--color-white);
177
+ --input-color: var(--color-text-on-light);
178
+ --input-border-color: var(--color-primary);
179
+ --input-placeholder-color: var(--color-text-placeholder-on-light);
180
+ --input-focus-border-color: var(--color-primary);
181
+ --input-focus-ring-color: var(--color-primary);
182
+ --input-disabled-bg: var(--color-disabled-bg-on-light);
183
+ --input-disabled-color: var(--color-disabled-text-on-light);
184
+ --input-disabled-border-color: var(--color-disabled-border-on-light);
185
+ --input-error-bg: var(--color-white);
186
+ --input-error-color: var(--color-text-on-light);
187
+ --input-error-border-color: var(--color-error-text-on-light);
188
+ --input-error-placeholder-color: var(--color-text-placeholder-on-light);
189
+ --input-error-focus-border-color: var(--color-error-text-on-light);
190
+ --input-error-focus-ring-color: var(--color-error-text-on-light);
191
+ --kbd-border-color: var(--color-primary);
192
+ --kbd-bg: var(--color-surface-secondary-on-light);
193
+ --kbd-color: var(--color-text-on-light);
194
+ --label-color: var(--color-text-on-light);
195
+ --link-color: var(--color-text-on-light);
196
+ --link-hover-color: var(--color-text-on-light);
197
+ --link-underline-width: var(--border-width-default);
198
+ --link-hover-underline-width: 0px;
199
+ --link-focus-ring-color: var(--color-primary);
200
+ --link-ink-color: var(--color-text-on-light);
201
+ --logo-color: var(--color-text-on-light);
202
+ --logomark-color: var(--color-text-on-light);
203
+ --menu-button-color: var(--color-text-on-light);
204
+ --menu-button-focus-ring-color: var(--color-primary);
205
+ --menu-bg: var(--floating-panel-bg);
206
+ --menu-border-color: var(--floating-panel-border-color);
207
+ --menu-item-color: var(--color-text-on-light);
208
+ --menu-item-highlighted-bg: var(--color-primary);
209
+ --menu-item-highlighted-color: var(--color-text-on-dark);
210
+ --menu-item-destructive-color: var(--color-destructive-text-on-light);
211
+ --menu-item-destructive-highlighted-bg: var(--color-destructive-fill);
212
+ --menu-item-destructive-highlighted-color: var(--color-destructive-fill-text);
213
+ --menu-label-color: var(--color-text-muted-on-light);
214
+ --menu-separator-color: var(--separator-color);
215
+ --message-bubble-color: var(--color-text-on-light);
216
+ --message-bubble-border-color: var(--color-text-on-light);
217
+ --message-bubble-tail-fill: var(--color-background-light);
218
+ --modal-bg: var(--color-background-light);
219
+ --modal-border-color: rgba(0, 0, 0, 0);
220
+ --modal-title-color: var(--color-text-on-light);
221
+ --modal-description-color: var(--color-text-muted-on-light);
222
+ --modal-close-color: var(--color-primary);
223
+ --modal-close-focus-ring-color: var(--color-primary);
224
+ --multi-select-border-color: var(--select-border-color);
225
+ --multi-select-error-border-color: var(--color-error-text-on-light);
226
+ --multi-select-color: var(--select-color);
227
+ --multi-select-placeholder-color: var(--color-text-placeholder-on-light);
228
+ --multi-select-bg: var(--select-bg);
229
+ --multi-select-focus-ring-color: var(--select-focus-ring-color);
230
+ --multi-select-content-bg: var(--select-content-bg);
231
+ --multi-select-content-border-color: var(--select-content-border-color);
232
+ --multi-select-pill-bg: var(--color-primary);
233
+ --multi-select-pill-color: var(--color-white);
234
+ --multi-select-item-highlighted-bg: var(--select-item-highlighted-bg);
235
+ --multi-select-item-highlighted-color: var(--select-item-highlighted-color);
236
+ --number-badge-primary-bg: var(--color-primary);
237
+ --number-badge-primary-color: var(--color-text-on-dark);
238
+ --number-badge-neutral-bg: var(--color-surface-inverse-on-light);
239
+ --number-badge-neutral-color: var(--color-text-on-dark);
240
+ --number-input-border-color: var(--input-border-color);
241
+ --number-input-bg: var(--input-bg);
242
+ --number-input-color: var(--input-color);
243
+ --number-input-btn-color: var(--color-primary);
244
+ --number-input-btn-hover-line-color: var(--color-primary);
245
+ --number-input-btn-separator-color: var(--input-border-color);
246
+ --number-input-focus-ring-color: var(--input-focus-ring-color);
247
+ --number-input-focus-border-color: var(--input-focus-border-color);
248
+ --number-input-disabled-bg: var(--input-disabled-bg);
249
+ --number-input-disabled-color: var(--input-disabled-color);
250
+ --number-input-disabled-border-color: var(--input-disabled-border-color);
251
+ --number-input-disabled-btn-color: var(--input-disabled-color);
252
+ --number-input-error-border-color: var(--input-error-border-color);
253
+ --number-input-error-bg: var(--input-error-bg);
254
+ --number-input-error-color: var(--input-error-color);
255
+ --number-input-error-focus-border-color: var(--input-error-focus-border-color);
256
+ --number-input-error-focus-ring-color: var(--input-error-focus-ring-color);
257
+ --org-switcher-focus-ring-color: var(--color-primary);
258
+ --org-switcher-name-color: var(--color-text-on-light);
259
+ --org-switcher-content-bg: var(--floating-panel-bg);
260
+ --org-switcher-content-border-color: var(--floating-panel-border-color);
261
+ --org-switcher-item-color: var(--color-text-on-light);
262
+ --org-switcher-item-highlighted-bg: var(--menu-item-highlighted-bg);
263
+ --org-switcher-item-highlighted-color: var(--menu-item-highlighted-color);
264
+ --org-switcher-item-destructive-color: var(--menu-item-destructive-color);
265
+ --org-switcher-item-destructive-highlighted-bg: var(--menu-item-destructive-highlighted-bg);
266
+ --org-switcher-item-destructive-highlighted-color: var(--menu-item-destructive-highlighted-color);
267
+ --org-switcher-separator-color: var(--separator-color);
268
+ --pagination-summary-color: var(--color-text-on-light);
269
+ --pagination-btn-color: var(--color-primary);
270
+ --pagination-btn-border-color: var(--color-primary);
271
+ --pagination-btn-hover-bg: var(--color-primary);
272
+ --pagination-btn-hover-color: var(--color-text-on-dark);
273
+ --pagination-btn-hover-border-color: var(--color-primary);
274
+ --pagination-btn-current-bg: var(--color-primary);
275
+ --pagination-btn-current-color: var(--color-text-on-dark);
276
+ --pagination-btn-current-border-color: var(--color-primary);
277
+ --pagination-btn-disabled-color: var(--color-disabled-border-on-light);
278
+ --pagination-btn-disabled-border-color: var(--color-disabled-border-on-light);
279
+ --pagination-ellipsis-color: var(--color-text-muted-on-light);
280
+ --pagination-focus-ring-color: var(--color-primary);
281
+ --password-field-toggle-color: var(--color-primary);
282
+ --password-field-toggle-color-hover: var(--color-primary);
283
+ --password-field-toggle-focus-ring-color: var(--color-primary);
284
+ --popover-bg: var(--floating-panel-bg);
285
+ --popover-border-color: var(--floating-panel-border-color);
286
+ --popover-focus-ring-color: var(--color-primary);
287
+ --progress-bar-track-bg: var(--color-surface-secondary-on-light);
288
+ --progress-bar-fill-border-color: var(--color-text-on-light);
289
+ --progress-bar-track-border-color: var(--color-text-on-light);
290
+ --progress-bar-primary-fill: var(--color-primary);
291
+ --progress-bar-primary-label-inside-color: var(--color-text-on-dark);
292
+ --progress-bar-label-outside-color: var(--color-text-on-light);
293
+ --radio-border-color: var(--color-primary);
294
+ --radio-error-border-color: var(--color-error-text-on-light);
295
+ --radio-dot-color: var(--color-primary);
296
+ --radio-focus-ring-color: var(--color-primary);
297
+ --scroll-area-thumb-bg: var(--color-border-default-on-light);
298
+ --scroll-area-thumb-hover-bg: var(--color-icon-secondary-on-light);
299
+ --scroll-area-focus-ring-color: var(--color-primary);
300
+ --select-border-color: var(--color-primary);
301
+ --select-error-border-color: var(--color-error-text-on-light);
302
+ --select-color: var(--color-text-on-light);
303
+ --select-bg: var(--color-white);
304
+ --select-focus-ring-color: var(--color-primary);
305
+ --select-content-bg: var(--color-white);
306
+ --select-content-border-color: var(--color-primary);
307
+ --select-separator-color: var(--separator-color);
308
+ --select-item-highlighted-bg: var(--color-primary);
309
+ --select-item-highlighted-color: var(--color-text-on-dark);
310
+ --separator-color: var(--color-primary);
311
+ --sidebar-nav-group-label-color: var(--color-primary);
312
+ --sidebar-nav-item-color: var(--color-text-on-light);
313
+ --sidebar-nav-item-active-color: var(--color-primary);
314
+ --sidebar-nav-focus-ring-color: var(--color-primary);
315
+ --sidebar-nav-item-empty-color: var(--color-text-muted-on-light);
316
+ --sidebar-nav-item-empty-mark-color: var(--color-text-muted-on-light);
317
+ --sidebar-nav-item-hover-line-color: var(--color-primary);
318
+ --sidebar-bg: var(--color-background-light);
319
+ --sidebar-border-color: var(--color-primary);
320
+ --sidebar-resizer-hover-color: var(--color-primary);
321
+ --sidebar-separator-color: var(--separator-color);
322
+ --site-footer-legal-separator-color: var(--separator-color);
323
+ --site-header-bg: var(--color-background-light);
324
+ --site-header-panel-bg: var(--color-background-light);
325
+ --skeleton-bg: var(--color-surface-secondary-on-light);
326
+ --skeleton-highlight: var(--color-white);
327
+ --skip-link-bg: var(--color-primary);
328
+ --skip-link-color: var(--color-text-on-dark);
329
+ --skip-link-focus-ring-color: var(--color-primary);
330
+ --slider-track-bg: var(--color-border-default-on-light);
331
+ --slider-indicator-bg: var(--color-primary);
332
+ --slider-thumb-bg: var(--color-primary);
333
+ --slider-thumb-border-color: var(--color-primary);
334
+ --slider-value-color: var(--color-text-on-light);
335
+ --slider-focus-ring-color: var(--color-primary);
336
+ --sparkline-color: var(--chart-muted-color);
337
+ --sparkline-accent-color: var(--chart-series-1);
338
+ --sparkline-baseline-color: var(--chart-axis-color);
339
+ --star-rating-track-color: var(--color-icon-secondary-on-light);
340
+ --star-rating-count-color: var(--color-text-muted-on-light);
341
+ --star-rating-empty-color: var(--color-text-muted-on-light);
342
+ --star-rating-fill-color: var(--color-primary);
343
+ --star-rating-focus-ring-color: var(--color-primary);
344
+ --step-pending-bg: var(--color-background-light);
345
+ --step-pending-border-color: var(--color-border-default-on-light);
346
+ --step-pending-color: var(--color-text-muted-on-light);
347
+ --step-tone-primary-bg: var(--color-primary);
348
+ --step-tone-primary-color: var(--color-text-on-dark);
349
+ --step-tone-neutral-bg: var(--color-surface-inverse-on-light);
350
+ --step-tone-neutral-color: var(--color-text-on-dark);
351
+ --step-connector-color: var(--color-border-default-on-light);
352
+ --step-connector-done-color: var(--color-primary);
353
+ --step-description-color: var(--color-text-muted-on-light);
354
+ --switcher-track-bg: var(--color-border-default-on-light);
355
+ --switcher-track-bg-checked: var(--color-primary);
356
+ --switcher-thumb-bg: var(--color-white);
357
+ --switcher-focus-ring-color: var(--color-primary);
358
+ --switcher-error-ring-color: var(--color-error-text-on-light);
359
+ --table-color: var(--color-text-on-light);
360
+ --table-header-border-color: var(--color-text-on-light);
361
+ --table-sort-icon-color: var(--color-text-muted-on-light);
362
+ --table-sort-icon-active-color: var(--color-primary);
363
+ --table-row-border-color: var(--color-primary);
364
+ --table-row-selected-color: var(--color-primary);
365
+ --table-row-hover-marker-color: var(--color-primary);
366
+ --table-sticky-bg: var(--color-background-light);
367
+ --table-footer-bg: var(--color-surface-secondary-on-light);
368
+ --table-footer-border-color: var(--color-text-on-light);
369
+ --table-focus-ring-color: var(--color-primary);
370
+ --tabs-list-border-color: var(--color-primary);
371
+ --tabs-trigger-color: var(--color-text-muted-on-light);
372
+ --tabs-trigger-hover-color: var(--color-text-on-light);
373
+ --tabs-trigger-active-color: var(--color-text-on-light);
374
+ --tabs-trigger-indicator-color: var(--color-primary);
375
+ --tabs-trigger-pill-bg-active: var(--color-primary);
376
+ --tabs-trigger-pill-color-active: var(--color-white);
377
+ --tabs-focus-ring-color: var(--color-primary);
378
+ --tag-primary-bg: var(--color-primary);
379
+ --tag-primary-color: var(--color-text-on-dark);
380
+ --tag-info-bg: var(--color-primary);
381
+ --tag-info-color: var(--color-text-on-dark);
382
+ --text-inline-muted-color: var(--color-text-muted-on-light);
383
+ --text-inline-destructive-color: var(--color-destructive-text-on-light);
384
+ --text-inline-success-color: var(--color-success-text-on-light);
385
+ --text-color: var(--color-text-on-light);
386
+ --text-background: var(--color-background-light);
387
+ --text-h1-color: var(--text-heading-color);
388
+ --text-h2-color: var(--text-heading-color);
389
+ --text-h3-color: var(--text-heading-color);
390
+ --text-h4-color: var(--text-heading-color);
391
+ --text-h5-color: var(--text-heading-color);
392
+ --text-h6-color: var(--text-heading-color);
393
+ --text-list-color: var(--text-color);
394
+ --textarea-bg: var(--color-white);
395
+ --textarea-color: var(--color-text-on-light);
396
+ --textarea-border-color: var(--color-primary);
397
+ --textarea-placeholder-color: var(--color-text-placeholder-on-light);
398
+ --textarea-focus-border-color: var(--color-primary);
399
+ --textarea-focus-ring-color: var(--color-primary);
400
+ --textarea-disabled-bg: var(--color-disabled-bg-on-light);
401
+ --textarea-disabled-color: var(--color-disabled-text-on-light);
402
+ --textarea-disabled-border-color: var(--color-disabled-border-on-light);
403
+ --textarea-error-bg: var(--color-white);
404
+ --textarea-error-color: var(--color-text-on-light);
405
+ --textarea-error-border-color: var(--color-error-text-on-light);
406
+ --textarea-error-placeholder-color: var(--color-text-placeholder-on-light);
407
+ --textarea-error-focus-border-color: var(--color-error-text-on-light);
408
+ --textarea-error-focus-ring-color: var(--color-error-text-on-light);
409
+ --time-select-sep-color: var(--color-text-on-light);
410
+ --toggle-border-color: var(--color-icon-secondary-on-light);
411
+ --toggle-color: var(--color-text-on-light);
412
+ --toggle-hover-border-color: var(--color-primary);
413
+ --toggle-pressed-bg: var(--color-primary);
414
+ --toggle-pressed-color: var(--color-text-on-dark);
415
+ --toggle-pressed-border-color: var(--color-primary);
416
+ --toggle-focus-ring-color: var(--color-primary);
417
+ --tooltip-bg: var(--color-background-dark);
418
+ --tooltip-color: var(--color-text-on-dark);
419
+ --typing-indicator-dot-color: var(--color-text-on-light);
420
+ --user-menu-focus-ring-color: var(--color-primary);
421
+ --user-menu-name-color: var(--color-text-on-light);
422
+ --user-menu-content-bg: var(--floating-panel-bg);
423
+ --user-menu-content-border-color: var(--floating-panel-border-color);
424
+ --user-menu-header-name-color: var(--color-text-on-light);
425
+ --user-menu-header-email-color: var(--color-text-muted-on-light);
426
+ --user-menu-item-color: var(--color-text-on-light);
427
+ --user-menu-item-highlighted-bg: var(--menu-item-highlighted-bg);
428
+ --user-menu-item-highlighted-color: var(--menu-item-highlighted-color);
429
+ --user-menu-item-destructive-color: var(--color-destructive-text-on-light);
430
+ --user-menu-item-destructive-highlighted-bg: var(--menu-item-destructive-highlighted-bg);
431
+ --user-menu-item-destructive-highlighted-color: var(--menu-item-destructive-highlighted-color);
432
+ --user-menu-separator-color: var(--separator-color);
433
+ --assistant-message-model-color: var(--color-text-on-light);
434
+ --assistant-message-timestamp-color: var(--color-text-muted-on-light);
435
+ --async-multi-select-field-error-color: var(--form-error-color);
436
+ --async-multi-select-field-helper-color: var(--form-helper-color);
437
+ --async-select-field-error-color: var(--form-error-color);
438
+ --async-select-field-helper-color: var(--form-helper-color);
439
+ --avatar-upload-ring-color: var(--color-primary);
440
+ --avatar-upload-hint-color: var(--form-helper-color);
441
+ --avatar-upload-error-color: var(--form-error-color);
442
+ --calendar-planner-nav-color: var(--calendar-nav-color);
443
+ --calendar-planner-nav-focus-ring-color: var(--calendar-nav-focus-ring-color);
444
+ --calendar-planner-title-color: var(--calendar-title-color);
445
+ --calendar-planner-weekday-color: var(--calendar-weekday-color);
446
+ --calendar-planner-grid-border-color: var(--color-primary);
447
+ --calendar-planner-cell-today-number-bg: var(--color-primary);
448
+ --calendar-planner-cell-today-number-color: var(--color-text-on-dark);
449
+ --calendar-planner-cell-outside-bg: var(--color-surface-secondary-on-light);
450
+ --calendar-planner-cell-focus-ring-color: var(--calendar-day-focus-ring-color);
451
+ --calendar-planner-day-number-color: var(--calendar-day-color);
452
+ --calendar-planner-day-number-outside-color: var(--calendar-outside-color);
453
+ --calendar-planner-more-color: var(--color-text-muted-on-light);
454
+ --calendar-planner-more-hover-color: var(--color-text-on-light);
455
+ --calendar-planner-more-focus-ring-color: var(--color-primary);
456
+ --calendar-planner-hover-line-color: var(--calendar-hover-line-color);
457
+ --calendar-roster-border-color: var(--color-primary);
458
+ --calendar-roster-th-name-color: var(--color-text-muted-on-light);
459
+ --calendar-roster-th-name-bg: var(--color-background-light);
460
+ --calendar-roster-th-day-color: var(--color-text-on-light);
461
+ --calendar-roster-th-day-bg: var(--color-background-light);
462
+ --calendar-roster-th-day-today-color: var(--color-background-light);
463
+ --calendar-roster-th-day-today-bg: var(--color-primary);
464
+ --calendar-roster-td-name-color: var(--color-text-on-light);
465
+ --calendar-roster-td-name-bg: var(--color-background-light);
466
+ --calendar-roster-cell-bg: var(--color-background-light);
467
+ --calendar-roster-cell-weekend-bg: var(--color-surface-secondary-on-light);
468
+ --calendar-roster-cell-holiday-bg: var(--color-surface-secondary-on-light);
469
+ --calendar-roster-cell-non-working-bg: var(--color-surface-secondary-on-light);
470
+ --calendar-roster-schedule-color: var(--color-text-on-light);
471
+ --calendar-roster-legend-color: var(--color-text-muted-on-light);
472
+ --calendar-nav-color: var(--color-text-on-light);
473
+ --calendar-nav-disabled-color: var(--color-icon-secondary-on-light);
474
+ --calendar-nav-focus-ring-color: var(--color-primary);
475
+ --calendar-title-color: var(--color-text-on-light);
476
+ --calendar-weekday-color: var(--color-text-muted-on-light);
477
+ --calendar-day-color: var(--color-text-on-light);
478
+ --calendar-day-focus-ring-color: var(--color-primary);
479
+ --calendar-today-color: var(--color-primary);
480
+ --calendar-today-marker-color: var(--color-primary);
481
+ --calendar-selected-bg: var(--color-primary);
482
+ --calendar-selected-color: var(--color-text-on-dark);
483
+ --calendar-outside-color: var(--color-text-muted-on-light);
484
+ --calendar-disabled-color: var(--color-icon-secondary-on-light);
485
+ --calendar-year-color: var(--calendar-day-color);
486
+ --calendar-year-current-color: var(--calendar-today-color);
487
+ --calendar-year-selected-bg: var(--calendar-selected-bg);
488
+ --calendar-year-selected-color: var(--calendar-selected-color);
489
+ --calendar-year-disabled-color: var(--calendar-disabled-color);
490
+ --calendar-hover-line-color: var(--color-primary);
491
+ --carousel-indicator-color: var(--color-text-muted-on-light);
492
+ --carousel-indicator-current-color: var(--color-text-on-light);
493
+ --carousel-focus-ring-color: var(--color-primary);
494
+ --checkbox-field-label-color: var(--text-color);
495
+ --checkbox-field-error-color: var(--form-error-color);
496
+ --checkbox-field-helper-color: var(--form-helper-color);
497
+ --command-palette-input-border-color: var(--floating-panel-border-color);
498
+ --command-palette-input-placeholder-color: var(--color-text-placeholder-on-light);
499
+ --command-palette-input-focus-ring-color: var(--color-primary);
500
+ --command-palette-input-focus-border-color: var(--color-primary);
501
+ --command-palette-empty-color: var(--color-text-muted-on-light);
502
+ --command-palette-heading-color: var(--color-text-muted-on-light);
503
+ --command-palette-item-color: var(--menu-item-color);
504
+ --command-palette-item-highlighted-bg: var(--menu-item-highlighted-bg);
505
+ --command-palette-item-highlighted-color: var(--menu-item-highlighted-color);
506
+ --consent-banner-bg: var(--color-background-light);
507
+ --consent-banner-color: var(--color-text-on-light);
508
+ --consent-banner-border-color: var(--color-primary);
509
+ --conversation-list-item-color: var(--color-text-muted-on-light);
510
+ --conversation-list-item-hover-color: var(--color-text-on-light);
511
+ --conversation-list-item-active-color: var(--color-text-on-light);
512
+ --conversation-list-delete-color: var(--color-icon-secondary-on-light);
513
+ --conversation-list-delete-hover-color: var(--color-destructive-text-on-light);
514
+ --conversation-list-focus-ring-color: var(--color-primary);
515
+ --date-picker-field-error-color: var(--form-error-color);
516
+ --date-picker-field-helper-color: var(--form-helper-color);
517
+ --date-picker-button-color: var(--color-primary);
518
+ --date-picker-button-hover-color: var(--color-primary);
519
+ --date-picker-button-disabled-color: var(--input-disabled-color);
520
+ --date-picker-button-focus-ring-color: var(--input-focus-border-color);
521
+ --date-picker-message-color: var(--form-error-color);
522
+ --date-time-field-error-color: var(--form-error-color);
523
+ --date-time-field-helper-color: var(--form-helper-color);
524
+ --docs-search-result-color: var(--color-text-on-light);
525
+ --docs-search-result-excerpt-color: var(--color-text-muted-on-light);
526
+ --docs-search-result-product-color: var(--color-text-muted-on-light);
527
+ --docs-search-result-highlighted-bg: var(--menu-item-highlighted-bg);
528
+ --docs-search-result-highlighted-color: var(--menu-item-highlighted-color);
529
+ --docs-search-status-color: var(--color-text-muted-on-light);
530
+ --dropdown-field-color: var(--select-color);
531
+ --dropdown-field-bg: var(--select-bg);
532
+ --dropdown-field-border-color: var(--select-border-color);
533
+ --dropdown-field-focus-ring-color: var(--select-focus-ring-color);
534
+ --dropdown-field-error-border-color: var(--select-error-border-color);
535
+ --dropdown-field-error-color: var(--form-error-color);
536
+ --dropdown-field-helper-color: var(--form-helper-color);
537
+ --field-row-empty-color: var(--color-text-muted-on-light);
538
+ --file-upload-field-error-color: var(--form-error-color);
539
+ --file-upload-field-helper-color: var(--form-helper-color);
540
+ --image-crop-dialog-area-bg: var(--color-surface-secondary-on-light);
541
+ --input-field-search-icon-color: var(--color-primary);
542
+ --input-field-search-clear-color: var(--color-primary);
543
+ --input-field-search-clear-hover-color: var(--color-primary);
544
+ --input-field-search-clear-focus-ring-color: var(--color-primary);
545
+ --input-field-error-color: var(--form-error-color);
546
+ --input-field-helper-color: var(--form-helper-color);
547
+ --input-phone-field-error-color: var(--form-error-color);
548
+ --input-phone-field-helper-color: var(--form-helper-color);
549
+ --language-switcher-focus-ring-color: var(--color-primary);
550
+ --message-composer-border-color: var(--textarea-border-color);
551
+ --message-composer-bg: var(--textarea-bg);
552
+ --message-composer-focus-border-color: var(--textarea-focus-border-color);
553
+ --message-composer-focus-ring-color: var(--textarea-focus-ring-color);
554
+ --message-composer-disabled-bg: var(--textarea-disabled-bg);
555
+ --message-composer-disabled-border-color: var(--textarea-disabled-border-color);
556
+ --message-composer-helper-color: var(--color-text-muted-on-light);
557
+ --multi-select-field-error-color: var(--form-error-color);
558
+ --multi-select-field-helper-color: var(--form-helper-color);
559
+ --notification-list-time-color: var(--color-text-muted-on-light);
560
+ --notification-panel-focus-ring-color: var(--color-primary);
561
+ --number-input-field-error-color: var(--form-error-color);
562
+ --number-input-field-helper-color: var(--form-helper-color);
563
+ --otp-field-error-color: var(--form-error-color);
564
+ --otp-field-helper-color: var(--form-helper-color);
565
+ --prev-next-nav-eyebrow-color: var(--color-text-muted-on-light);
566
+ --prev-next-nav-title-color: var(--color-text-on-light);
567
+ --prev-next-nav-title-hover-color: var(--color-primary);
568
+ --prev-next-nav-label-color: var(--color-text-on-light);
569
+ --prev-next-nav-btn-color: var(--color-text-on-light);
570
+ --prev-next-nav-btn-hover-color: var(--color-primary);
571
+ --prev-next-nav-btn-disabled-color: var(--color-icon-secondary-on-light);
572
+ --prev-next-nav-focus-ring-color: var(--color-primary);
573
+ --project-card-focus-ring-color: var(--color-primary);
574
+ --prose-color: var(--text-color);
575
+ --prose-quote-border-color: var(--separator-color);
576
+ --prose-quote-color: var(--color-text-muted-on-light);
577
+ --prose-code-bg: var(--code-bg);
578
+ --prose-code-color: var(--code-color);
579
+ --prose-pre-bg: var(--code-block-bg);
580
+ --prose-pre-color: var(--code-block-color);
581
+ --prose-pre-border-color: var(--code-block-border-color);
582
+ --prose-table-border-color: var(--table-row-border-color);
583
+ --prose-table-header-border-color: var(--table-header-border-color);
584
+ --prose-rule-color: var(--separator-color);
585
+ --prose-caption-color: var(--color-text-muted-on-light);
586
+ --radio-field-label-color: var(--text-color);
587
+ --radio-field-error-color: var(--form-error-color);
588
+ --radio-field-helper-color: var(--form-helper-color);
589
+ --recovery-codes-color: var(--color-text-on-light);
590
+ --recovery-codes-index-color: var(--color-text-muted-on-light);
591
+ --search-form-submit-color: var(--color-primary);
592
+ --search-form-submit-hover-color: var(--color-primary);
593
+ --search-form-submit-disabled-color: var(--input-disabled-color);
594
+ --search-form-submit-focus-ring-color: var(--input-focus-border-color);
595
+ --select-field-error-color: var(--form-error-color);
596
+ --select-field-helper-color: var(--form-helper-color);
597
+ --sheet-bg: var(--modal-bg);
598
+ --sheet-title-color: var(--modal-title-color);
599
+ --sheet-description-color: var(--modal-description-color);
600
+ --sheet-close-color: var(--modal-close-color);
601
+ --sheet-close-focus-ring-color: var(--modal-close-focus-ring-color);
602
+ --site-nav-item-color: var(--color-text-on-light);
603
+ --site-nav-item-hover-color: var(--color-text-on-light);
604
+ --site-nav-item-hover-line-width: var(--link-underline-width);
605
+ --site-nav-focus-ring-color: var(--color-primary);
606
+ --stat-tile-border-color: var(--card-outline-border-color);
607
+ --stat-tile-label-color: var(--color-text-muted-on-light);
608
+ --stat-tile-icon-color: var(--color-text-muted-on-light);
609
+ --stat-tile-value-color: var(--color-text-on-light);
610
+ --stat-tile-description-color: var(--color-text-muted-on-light);
611
+ --stepper-label-color: var(--color-text-on-light);
612
+ --stepper-pending-color: var(--color-text-muted-on-light);
613
+ --stepper-description-color: var(--color-text-muted-on-light);
614
+ --stepper-compact-color: var(--color-text-on-light);
615
+ --stepper-compact-label-color: var(--color-text-muted-on-light);
616
+ --stepper-focus-ring-color: var(--color-primary);
617
+ --switcher-field-label-color: var(--text-color);
618
+ --switcher-field-error-color: var(--form-error-color);
619
+ --switcher-field-helper-color: var(--form-helper-color);
620
+ --table-of-contents-title-color: var(--color-text-muted-on-light);
621
+ --table-of-contents-item-color: var(--color-text-on-light);
622
+ --table-of-contents-item-hover-line-color: var(--color-primary);
623
+ --table-of-contents-item-active-color: var(--color-primary);
624
+ --table-of-contents-item-active-marker-color: var(--color-primary);
625
+ --table-of-contents-focus-ring-color: var(--color-primary);
626
+ --textarea-field-error-color: var(--form-error-color);
627
+ --textarea-field-helper-color: var(--form-helper-color);
628
+ --theme-switcher-focus-ring-color: var(--color-primary);
629
+ --time-field-error-color: var(--form-error-color);
630
+ --time-field-helper-color: var(--form-helper-color);
631
+ --tree-view-color: var(--sidebar-nav-item-color);
632
+ --tree-view-selected-color: var(--sidebar-nav-item-color);
633
+ --tree-view-chevron-color: var(--color-text-muted-on-light);
634
+ --tree-view-focus-ring-color: var(--sidebar-nav-focus-ring-color);
635
+ --uptime-bars-bar-border-color: var(--color-primary);
636
+ --uptime-bars-empty-bg: var(--color-surface-secondary-on-light);
637
+ --uptime-bars-empty-pattern-color: var(--color-disabled-border-on-light);
638
+ --uptime-bars-focus-ring-color: var(--color-primary);
639
+ --uptime-bars-edge-color: var(--color-text-on-light);
640
+ --uptime-bars-summary-color: var(--color-text-on-light);
641
+ --user-message-author-color: var(--color-text-muted-on-light);
642
+ --user-message-timestamp-color: var(--color-text-muted-on-light);
643
+ --annotation-thread-border-color: var(--color-border-default-on-light);
644
+ --annotation-thread-reply-guide-color: var(--color-border-default-on-light);
645
+ --annotation-thread-author-color: var(--color-text-on-light);
646
+ --annotation-thread-meta-color: var(--color-text-muted-on-light);
647
+ --annotation-thread-body-color: var(--color-text-on-light);
648
+ --annotation-thread-replies-label-color: var(--color-text-muted-on-light);
649
+ --chart-series-1: var(--color-chart-series-1);
650
+ --chart-series-2: var(--color-chart-series-2);
651
+ --chart-series-3: var(--color-chart-series-3);
652
+ --chart-series-4: var(--color-chart-series-4);
653
+ --chart-series-5: var(--color-chart-series-5);
654
+ --chart-series-6: var(--color-chart-series-6);
655
+ --chart-series-7: var(--color-chart-series-7);
656
+ --chart-series-8: var(--color-chart-series-8);
657
+ --chart-sequential-100: var(--color-chart-sequential-100);
658
+ --chart-sequential-200: var(--color-chart-sequential-200);
659
+ --chart-sequential-300: var(--color-chart-sequential-300);
660
+ --chart-sequential-400: var(--color-chart-sequential-400);
661
+ --chart-sequential-500: var(--color-chart-sequential-500);
662
+ --chart-sequential-600: var(--color-chart-sequential-600);
663
+ --chart-sequential-700: var(--color-chart-sequential-700);
664
+ --chart-diverging-warm-1: var(--color-chart-diverging-warm-1);
665
+ --chart-diverging-warm-2: var(--color-chart-diverging-warm-2);
666
+ --chart-diverging-warm-3: var(--color-chart-diverging-warm-3);
667
+ --chart-diverging-neutral: var(--color-surface-secondary-on-light);
668
+ --chart-diverging-cool-1: var(--color-chart-diverging-cool-1);
669
+ --chart-diverging-cool-2: var(--color-chart-diverging-cool-2);
670
+ --chart-diverging-cool-3: var(--color-chart-diverging-cool-3);
671
+ --chart-surface: var(--color-background-light);
672
+ --chart-grid-color: var(--color-border-default-on-light);
673
+ --chart-axis-color: var(--color-icon-secondary-on-light);
674
+ --chart-label-color: var(--color-text-muted-on-light);
675
+ --chart-muted-color: var(--color-icon-secondary-on-light);
676
+ --chart-radial-track-color: var(--color-icon-secondary-on-light);
677
+ --chart-tile-label-color-5: var(--color-text-on-dark);
678
+ --chart-tile-label-color-7: var(--color-text-on-dark);
679
+ --chart-tile-label-color-muted: var(--color-text-on-dark);
680
+ --chart-tooltip-bg: var(--tooltip-bg);
681
+ --chart-tooltip-color: var(--tooltip-color);
682
+ --chart-crosshair-color: var(--color-icon-secondary-on-light);
683
+ --chat-shell-bg: var(--color-background-light);
684
+ --connector-auth-untrusted-focus-ring-color: var(--link-focus-ring-color);
685
+ }