@fluixi-ui/tokens 0.4.0-alpha.1 → 0.4.0-alpha.11

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 (61) hide show
  1. package/dist/css/accordion.css +81 -3
  2. package/dist/css/alert.css +52 -23
  3. package/dist/css/avatar.css +19 -0
  4. package/dist/css/badge.css +129 -5
  5. package/dist/css/base.css +3 -1
  6. package/dist/css/bottom-sheet.css +4 -4
  7. package/dist/css/breadcrumb.css +1 -1
  8. package/dist/css/bulk-editor.css +2 -17
  9. package/dist/css/button.css +76 -16
  10. package/dist/css/calendar.css +9 -7
  11. package/dist/css/card.css +5 -1
  12. package/dist/css/carousel.css +80 -0
  13. package/dist/css/checkbox-radio.css +55 -1
  14. package/dist/css/chip.css +175 -0
  15. package/dist/css/date-field.css +1 -1
  16. package/dist/css/date-picker.css +2 -2
  17. package/dist/css/descriptions.css +29 -0
  18. package/dist/css/drawer.css +4 -4
  19. package/dist/css/empty.css +40 -0
  20. package/dist/css/fab.css +48 -0
  21. package/dist/css/field-variants.css +139 -0
  22. package/dist/css/file-upload.css +40 -0
  23. package/dist/css/glow.css +127 -0
  24. package/dist/css/icon-button.css +42 -0
  25. package/dist/css/image.css +67 -0
  26. package/dist/css/input.css +15 -0
  27. package/dist/css/layout.css +10 -0
  28. package/dist/css/navigation-menu.css +8 -7
  29. package/dist/css/number-field.css +3 -3
  30. package/dist/css/page.css +138 -0
  31. package/dist/css/pagination.css +3 -3
  32. package/dist/css/parts/listbox.css +9 -4
  33. package/dist/css/pin-input.css +40 -0
  34. package/dist/css/progress.css +56 -0
  35. package/dist/css/rating.css +59 -0
  36. package/dist/css/scroll-area.css +44 -0
  37. package/dist/css/select-combobox.css +19 -4
  38. package/dist/css/sidenav.css +180 -10
  39. package/dist/css/slider.css +4 -4
  40. package/dist/css/speed-dial.css +85 -0
  41. package/dist/css/splitter.css +81 -0
  42. package/dist/css/statistic.css +34 -0
  43. package/dist/css/stepper.css +3 -3
  44. package/dist/css/surface.css +71 -0
  45. package/dist/css/switch.css +12 -0
  46. package/dist/css/table.css +11 -0
  47. package/dist/css/tabs.css +10 -1
  48. package/dist/css/tags-input.css +91 -0
  49. package/dist/css/text.css +124 -0
  50. package/dist/css/timeline.css +59 -0
  51. package/dist/css/toggle.css +6 -0
  52. package/dist/css/tree-view.css +70 -0
  53. package/dist/lib/css/index.d.ts +10 -12
  54. package/dist/lib/css/index.d.ts.map +1 -1
  55. package/dist/lib/css/index.js +21 -7
  56. package/dist/lib/reference/colors.d.ts.map +1 -1
  57. package/dist/lib/reference/colors.js +15 -1
  58. package/dist/preset.css +23 -1
  59. package/dist/tokens.css +52 -4
  60. package/dist/tsconfig.lib.tsbuildinfo +1 -1
  61. package/package.json +2 -2
package/dist/preset.css CHANGED
@@ -7,10 +7,18 @@
7
7
  * non-bundler consumers get every component's CSS in one import.
8
8
  */
9
9
 
10
- @layer flx.tokens, flx.components, flx.skin;
10
+ @layer flx.reset, flx.base, flx.tokens, flx.components, flx.skin, flx.fx;
11
11
 
12
12
  @import './css/base.css';
13
+ @import './css/layout.css';
14
+ @import './css/text.css';
15
+ @import './css/scroll-area.css';
16
+ @import './css/page.css';
17
+ @import './css/splitter.css';
13
18
  @import './css/button.css';
19
+ @import './css/icon-button.css';
20
+ @import './css/fab.css';
21
+ @import './css/speed-dial.css';
14
22
  @import './css/badge.css';
15
23
  @import './css/toggle.css';
16
24
  @import './css/toolbar.css';
@@ -18,13 +26,21 @@
18
26
  @import './css/field.css';
19
27
  @import './css/input.css';
20
28
  @import './css/number-field.css';
29
+ @import './css/pin-input.css';
30
+ @import './css/tags-input.css';
31
+ @import './css/image.css';
32
+ @import './css/file-upload.css';
21
33
  @import './css/slider.css';
22
34
  @import './css/hover-card.css';
23
35
  @import './css/alert.css';
24
36
  @import './css/skeleton.css';
25
37
  @import './css/kbd.css';
38
+ @import './css/empty.css';
39
+ @import './css/statistic.css';
40
+ @import './css/descriptions.css';
26
41
  @import './css/switch.css';
27
42
  @import './css/checkbox-radio.css';
43
+ @import './css/rating.css';
28
44
  @import './css/tabs.css';
29
45
  @import './css/accordion.css';
30
46
  @import './css/progress.css';
@@ -32,10 +48,15 @@
32
48
  @import './css/separator.css';
33
49
  @import './css/breadcrumb.css';
34
50
  @import './css/pagination.css';
51
+ @import './css/timeline.css';
52
+ @import './css/surface.css';
35
53
  @import './css/card.css';
54
+ @import './css/glow.css';
36
55
  @import './css/aspect-ratio.css';
56
+ @import './css/carousel.css';
37
57
  @import './css/stepper.css';
38
58
  @import './css/select-combobox.css';
59
+ @import './css/field-variants.css';
39
60
  @import './css/parts/listbox.css';
40
61
  @import './css/parts/overlays.css';
41
62
  @import './css/drawer.css';
@@ -44,6 +65,7 @@
44
65
  @import './css/menubar.css';
45
66
  @import './css/navigation-menu.css';
46
67
  @import './css/sidenav.css';
68
+ @import './css/tree-view.css';
47
69
  @import './css/toast.css';
48
70
  @import './css/command.css';
49
71
  @import './css/tooltip.css';
package/dist/tokens.css CHANGED
@@ -1,4 +1,4 @@
1
- @layer flx.tokens, flx.components, flx.skin;
1
+ @layer flx.reset, flx.base, flx.tokens, flx.components, flx.skin, flx.fx;
2
2
 
3
3
  @layer flx.tokens {
4
4
  :root, [data-theme='light'] {
@@ -117,34 +117,41 @@
117
117
  --flx-ui-danger-solid: #e5484d;
118
118
  --flx-ui-danger-subtle: #feebec;
119
119
  --flx-ui-danger-fg: #ffffff;
120
+ --flx-ui-danger-text: #cd2b31;
120
121
  --flx-ui-success-solid: #30a46c;
121
122
  --flx-ui-success-subtle: #e6f6ec;
122
123
  --flx-ui-success-fg: #ffffff;
124
+ --flx-ui-success-text: #18794e;
123
125
  --flx-ui-warning-solid: #ffb224;
124
126
  --flx-ui-warning-subtle: #fff4d5;
125
127
  --flx-ui-warning-fg: #1c2024;
128
+ --flx-ui-warning-text: #ad5700;
126
129
  --flx-ui-color-bg: var(--flx-ui-gray-1);
127
130
  --flx-ui-color-bg-subtle: var(--flx-ui-gray-2);
128
131
  --flx-ui-color-bg-muted: var(--flx-ui-gray-3);
129
132
  --flx-ui-color-fg: var(--flx-ui-gray-12);
130
133
  --flx-ui-color-fg-muted: var(--flx-ui-gray-11);
131
134
  --flx-ui-color-border: var(--flx-ui-gray-6);
132
- --flx-ui-color-border-strong: var(--flx-ui-gray-8);
135
+ --flx-ui-color-border-strong: var(--flx-ui-gray-7);
133
136
  --flx-ui-color-focus-ring: var(--flx-ui-accent-8);
134
137
  --flx-ui-color-primary: var(--flx-ui-accent-9);
135
138
  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
136
139
  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
137
140
  --flx-ui-color-primary-fg: #ffffff;
138
141
  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
142
+ --flx-ui-color-primary-text: var(--flx-ui-accent-11);
139
143
  --flx-ui-color-danger: var(--flx-ui-danger-solid);
140
144
  --flx-ui-color-danger-fg: var(--flx-ui-danger-fg);
141
145
  --flx-ui-color-danger-subtle: var(--flx-ui-danger-subtle);
146
+ --flx-ui-color-danger-text: var(--flx-ui-danger-text);
142
147
  --flx-ui-color-success: var(--flx-ui-success-solid);
143
148
  --flx-ui-color-success-fg: var(--flx-ui-success-fg);
144
149
  --flx-ui-color-success-subtle: var(--flx-ui-success-subtle);
150
+ --flx-ui-color-success-text: var(--flx-ui-success-text);
145
151
  --flx-ui-color-warning: var(--flx-ui-warning-solid);
146
152
  --flx-ui-color-warning-fg: var(--flx-ui-warning-fg);
147
153
  --flx-ui-color-warning-subtle: var(--flx-ui-warning-subtle);
154
+ --flx-ui-color-warning-text: var(--flx-ui-warning-text);
148
155
  --flx-ui-color-overlay: rgba(0, 0, 0, 0.4);
149
156
  }
150
157
 
@@ -176,35 +183,46 @@
176
183
  --flx-ui-danger-solid: #ff6369;
177
184
  --flx-ui-danger-subtle: #3b1219;
178
185
  --flx-ui-danger-fg: #ffffff;
186
+ --flx-ui-danger-text: #ff9592;
179
187
  --flx-ui-success-solid: #3dd68c;
180
188
  --flx-ui-success-subtle: #0f291e;
181
189
  --flx-ui-success-fg: #ffffff;
190
+ --flx-ui-success-text: #4cc38a;
182
191
  --flx-ui-warning-solid: #ffca16;
183
192
  --flx-ui-warning-subtle: #3a2e00;
184
193
  --flx-ui-warning-fg: #1c2024;
194
+ --flx-ui-warning-text: #ffca16;
185
195
  --flx-ui-color-bg: var(--flx-ui-gray-1);
186
196
  --flx-ui-color-bg-subtle: var(--flx-ui-gray-2);
187
197
  --flx-ui-color-bg-muted: var(--flx-ui-gray-3);
188
198
  --flx-ui-color-fg: var(--flx-ui-gray-12);
189
199
  --flx-ui-color-fg-muted: var(--flx-ui-gray-11);
190
200
  --flx-ui-color-border: var(--flx-ui-gray-6);
191
- --flx-ui-color-border-strong: var(--flx-ui-gray-8);
201
+ --flx-ui-color-border-strong: var(--flx-ui-gray-7);
192
202
  --flx-ui-color-focus-ring: var(--flx-ui-accent-8);
193
203
  --flx-ui-color-primary: var(--flx-ui-accent-9);
194
204
  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
195
205
  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
196
206
  --flx-ui-color-primary-fg: #ffffff;
197
207
  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
208
+ --flx-ui-color-primary-text: var(--flx-ui-accent-11);
198
209
  --flx-ui-color-danger: var(--flx-ui-danger-solid);
199
210
  --flx-ui-color-danger-fg: var(--flx-ui-danger-fg);
200
211
  --flx-ui-color-danger-subtle: var(--flx-ui-danger-subtle);
212
+ --flx-ui-color-danger-text: var(--flx-ui-danger-text);
201
213
  --flx-ui-color-success: var(--flx-ui-success-solid);
202
214
  --flx-ui-color-success-fg: var(--flx-ui-success-fg);
203
215
  --flx-ui-color-success-subtle: var(--flx-ui-success-subtle);
216
+ --flx-ui-color-success-text: var(--flx-ui-success-text);
204
217
  --flx-ui-color-warning: var(--flx-ui-warning-solid);
205
218
  --flx-ui-color-warning-fg: var(--flx-ui-warning-fg);
206
219
  --flx-ui-color-warning-subtle: var(--flx-ui-warning-subtle);
220
+ --flx-ui-color-warning-text: var(--flx-ui-warning-text);
207
221
  --flx-ui-color-overlay: rgba(0, 0, 0, 0.6);
222
+ --flx-ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
223
+ --flx-ui-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.44), 0 1px 2px rgba(0, 0, 0, 0.3);
224
+ --flx-ui-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.36);
225
+ --flx-ui-shadow-xl: 0 16px 36px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.42);
208
226
  }
209
227
 
210
228
  [data-theme='high-contrast'] {
@@ -235,12 +253,15 @@
235
253
  --flx-ui-danger-solid: #e5484d;
236
254
  --flx-ui-danger-subtle: #feebec;
237
255
  --flx-ui-danger-fg: #ffffff;
256
+ --flx-ui-danger-text: #cd2b31;
238
257
  --flx-ui-success-solid: #30a46c;
239
258
  --flx-ui-success-subtle: #e6f6ec;
240
259
  --flx-ui-success-fg: #ffffff;
260
+ --flx-ui-success-text: #18794e;
241
261
  --flx-ui-warning-solid: #ffb224;
242
262
  --flx-ui-warning-subtle: #fff4d5;
243
263
  --flx-ui-warning-fg: #1c2024;
264
+ --flx-ui-warning-text: #ad5700;
244
265
  --flx-ui-color-bg: var(--flx-ui-gray-1);
245
266
  --flx-ui-color-bg-subtle: var(--flx-ui-gray-2);
246
267
  --flx-ui-color-bg-muted: var(--flx-ui-gray-3);
@@ -254,15 +275,19 @@
254
275
  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
255
276
  --flx-ui-color-primary-fg: #ffffff;
256
277
  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
278
+ --flx-ui-color-primary-text: var(--flx-ui-accent-11);
257
279
  --flx-ui-color-danger: var(--flx-ui-danger-solid);
258
280
  --flx-ui-color-danger-fg: var(--flx-ui-danger-fg);
259
281
  --flx-ui-color-danger-subtle: var(--flx-ui-danger-subtle);
282
+ --flx-ui-color-danger-text: var(--flx-ui-danger-text);
260
283
  --flx-ui-color-success: var(--flx-ui-success-solid);
261
284
  --flx-ui-color-success-fg: var(--flx-ui-success-fg);
262
285
  --flx-ui-color-success-subtle: var(--flx-ui-success-subtle);
286
+ --flx-ui-color-success-text: var(--flx-ui-success-text);
263
287
  --flx-ui-color-warning: var(--flx-ui-warning-solid);
264
288
  --flx-ui-color-warning-fg: var(--flx-ui-warning-fg);
265
289
  --flx-ui-color-warning-subtle: var(--flx-ui-warning-subtle);
290
+ --flx-ui-color-warning-text: var(--flx-ui-warning-text);
266
291
  --flx-ui-color-overlay: rgba(0, 0, 0, 0.4);
267
292
  }
268
293
 
@@ -295,35 +320,46 @@
295
320
  --flx-ui-danger-solid: #ff6369;
296
321
  --flx-ui-danger-subtle: #3b1219;
297
322
  --flx-ui-danger-fg: #ffffff;
323
+ --flx-ui-danger-text: #ff9592;
298
324
  --flx-ui-success-solid: #3dd68c;
299
325
  --flx-ui-success-subtle: #0f291e;
300
326
  --flx-ui-success-fg: #ffffff;
327
+ --flx-ui-success-text: #4cc38a;
301
328
  --flx-ui-warning-solid: #ffca16;
302
329
  --flx-ui-warning-subtle: #3a2e00;
303
330
  --flx-ui-warning-fg: #1c2024;
331
+ --flx-ui-warning-text: #ffca16;
304
332
  --flx-ui-color-bg: var(--flx-ui-gray-1);
305
333
  --flx-ui-color-bg-subtle: var(--flx-ui-gray-2);
306
334
  --flx-ui-color-bg-muted: var(--flx-ui-gray-3);
307
335
  --flx-ui-color-fg: var(--flx-ui-gray-12);
308
336
  --flx-ui-color-fg-muted: var(--flx-ui-gray-11);
309
337
  --flx-ui-color-border: var(--flx-ui-gray-6);
310
- --flx-ui-color-border-strong: var(--flx-ui-gray-8);
338
+ --flx-ui-color-border-strong: var(--flx-ui-gray-7);
311
339
  --flx-ui-color-focus-ring: var(--flx-ui-accent-8);
312
340
  --flx-ui-color-primary: var(--flx-ui-accent-9);
313
341
  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
314
342
  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
315
343
  --flx-ui-color-primary-fg: #ffffff;
316
344
  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
345
+ --flx-ui-color-primary-text: var(--flx-ui-accent-11);
317
346
  --flx-ui-color-danger: var(--flx-ui-danger-solid);
318
347
  --flx-ui-color-danger-fg: var(--flx-ui-danger-fg);
319
348
  --flx-ui-color-danger-subtle: var(--flx-ui-danger-subtle);
349
+ --flx-ui-color-danger-text: var(--flx-ui-danger-text);
320
350
  --flx-ui-color-success: var(--flx-ui-success-solid);
321
351
  --flx-ui-color-success-fg: var(--flx-ui-success-fg);
322
352
  --flx-ui-color-success-subtle: var(--flx-ui-success-subtle);
353
+ --flx-ui-color-success-text: var(--flx-ui-success-text);
323
354
  --flx-ui-color-warning: var(--flx-ui-warning-solid);
324
355
  --flx-ui-color-warning-fg: var(--flx-ui-warning-fg);
325
356
  --flx-ui-color-warning-subtle: var(--flx-ui-warning-subtle);
357
+ --flx-ui-color-warning-text: var(--flx-ui-warning-text);
326
358
  --flx-ui-color-overlay: rgba(0, 0, 0, 0.6);
359
+ --flx-ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
360
+ --flx-ui-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.44), 0 1px 2px rgba(0, 0, 0, 0.3);
361
+ --flx-ui-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.36);
362
+ --flx-ui-shadow-xl: 0 16px 36px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.42);
327
363
  }
328
364
  }
329
365
 
@@ -345,6 +381,7 @@
345
381
  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
346
382
  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
347
383
  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
384
+ --flx-ui-color-primary-text: var(--flx-ui-accent-11);
348
385
  }
349
386
 
350
387
  [data-theme='dark'][data-accent='violet'] {
@@ -365,6 +402,7 @@
365
402
  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
366
403
  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
367
404
  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
405
+ --flx-ui-color-primary-text: var(--flx-ui-accent-11);
368
406
  }
369
407
 
370
408
  [data-theme='high-contrast'][data-accent='violet'] {
@@ -385,6 +423,7 @@
385
423
  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
386
424
  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
387
425
  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
426
+ --flx-ui-color-primary-text: var(--flx-ui-accent-11);
388
427
  }
389
428
 
390
429
  @media (prefers-color-scheme: dark) {
@@ -406,6 +445,7 @@
406
445
  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
407
446
  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
408
447
  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
448
+ --flx-ui-color-primary-text: var(--flx-ui-accent-11);
409
449
  }
410
450
  }
411
451
 
@@ -427,6 +467,7 @@
427
467
  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
428
468
  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
429
469
  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
470
+ --flx-ui-color-primary-text: var(--flx-ui-accent-11);
430
471
  }
431
472
 
432
473
  [data-theme='dark'][data-accent='rose'] {
@@ -447,6 +488,7 @@
447
488
  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
448
489
  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
449
490
  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
491
+ --flx-ui-color-primary-text: var(--flx-ui-accent-11);
450
492
  }
451
493
 
452
494
  [data-theme='high-contrast'][data-accent='rose'] {
@@ -467,6 +509,7 @@
467
509
  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
468
510
  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
469
511
  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
512
+ --flx-ui-color-primary-text: var(--flx-ui-accent-11);
470
513
  }
471
514
 
472
515
  @media (prefers-color-scheme: dark) {
@@ -488,6 +531,7 @@
488
531
  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
489
532
  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
490
533
  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
534
+ --flx-ui-color-primary-text: var(--flx-ui-accent-11);
491
535
  }
492
536
  }
493
537
 
@@ -510,6 +554,7 @@
510
554
  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
511
555
  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
512
556
  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
557
+ --flx-ui-color-primary-text: var(--flx-ui-accent-11);
513
558
  }
514
559
 
515
560
  [data-theme='dark'][data-accent='green'] {
@@ -531,6 +576,7 @@
531
576
  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
532
577
  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
533
578
  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
579
+ --flx-ui-color-primary-text: var(--flx-ui-accent-11);
534
580
  }
535
581
 
536
582
  [data-theme='high-contrast'][data-accent='green'] {
@@ -552,6 +598,7 @@
552
598
  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
553
599
  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
554
600
  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
601
+ --flx-ui-color-primary-text: var(--flx-ui-accent-11);
555
602
  }
556
603
 
557
604
  @media (prefers-color-scheme: dark) {
@@ -574,6 +621,7 @@
574
621
  --flx-ui-color-primary-hover: var(--flx-ui-accent-10);
575
622
  --flx-ui-color-primary-active: var(--flx-ui-accent-11);
576
623
  --flx-ui-color-primary-subtle: var(--flx-ui-accent-3);
624
+ --flx-ui-color-primary-text: var(--flx-ui-accent-11);
577
625
  }
578
626
  }
579
627
  }