@infonomic/uikit 6.5.0 → 6.6.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 (130) hide show
  1. package/README.md +76 -4
  2. package/dist/components/accordion/accordion.module.css +1 -2
  3. package/dist/components/avatar/avatar.module.css +2 -19
  4. package/dist/components/avatar/avatar_module.css +2 -10
  5. package/dist/components/button/button-group.d.ts.map +1 -1
  6. package/dist/components/button/button-group.js +1 -1
  7. package/dist/components/button/button.module.css +56 -37
  8. package/dist/components/button/button_module.css +12 -12
  9. package/dist/components/button/combo-button.d.ts.map +1 -1
  10. package/dist/components/button/combo-button.module.css +3 -3
  11. package/dist/components/button/copy-button.d.ts.map +1 -1
  12. package/dist/components/button/copy-button.js +14 -7
  13. package/dist/components/card/card.module.css +1 -9
  14. package/dist/components/card/card_module.css +1 -5
  15. package/dist/components/chips/chip.module.css +32 -21
  16. package/dist/components/chips/chip_module.css +2 -2
  17. package/dist/components/dropdown/dropdown.d.ts.map +1 -1
  18. package/dist/components/hamburger/hamburger.module.css +6 -7
  19. package/dist/components/inputs/autocomplete.d.ts.map +1 -1
  20. package/dist/components/inputs/autocomplete.module.css +9 -10
  21. package/dist/components/inputs/autocomplete_module.css +2 -2
  22. package/dist/components/inputs/checkbox-group.module.css +6 -7
  23. package/dist/components/inputs/checkbox.module.css +16 -18
  24. package/dist/components/inputs/checkbox_module.css +2 -2
  25. package/dist/components/inputs/error-text.module.css +1 -1
  26. package/dist/components/inputs/error-text_module.css +1 -1
  27. package/dist/components/inputs/input.module.css +10 -11
  28. package/dist/components/inputs/input_module.css +2 -2
  29. package/dist/components/inputs/label.module.css +1 -1
  30. package/dist/components/inputs/label_module.css +1 -1
  31. package/dist/components/inputs/radio-group.module.css +6 -7
  32. package/dist/components/inputs/select.d.ts.map +1 -1
  33. package/dist/components/inputs/select.module.css +6 -7
  34. package/dist/components/inputs/text-area.module.css +10 -9
  35. package/dist/components/notifications/@types/alert.js +1 -0
  36. package/dist/components/notifications/@types/toast.js +1 -0
  37. package/dist/components/notifications/toast.module.css +9 -19
  38. package/dist/components/notifications/toast_module.css +3 -6
  39. package/dist/components/pager/first-button.d.ts.map +1 -1
  40. package/dist/components/pager/hooks/types/usePagination.js +1 -0
  41. package/dist/components/pager/last-button.d.ts.map +1 -1
  42. package/dist/components/pager/next-button.d.ts.map +1 -1
  43. package/dist/components/pager/number-button.d.ts.map +1 -1
  44. package/dist/components/pager/pagination.module.css +1 -6
  45. package/dist/components/pager/pagination_module.css +1 -1
  46. package/dist/components/pager/previous-button.d.ts.map +1 -1
  47. package/dist/components/scroll-area/scroll-area.d.ts.map +1 -1
  48. package/dist/components/scroll-to-top/scroll-to-top.module.css +3 -3
  49. package/dist/components/scroll-to-top/scroll-to-top_module.css +6 -6
  50. package/dist/components/tabs/tabs.module.css +6 -7
  51. package/dist/components/tooltip/tooltip.d.ts.map +1 -1
  52. package/dist/components/tooltip/tooltip.module.css +10 -11
  53. package/dist/icons/types/icon.js +1 -0
  54. package/dist/lib/ripple.js +3 -3
  55. package/dist/loaders/@types/index.js +1 -0
  56. package/dist/loaders/ellipses.d.ts.map +1 -1
  57. package/dist/loaders/ring.d.ts.map +1 -1
  58. package/dist/loaders/spinner.d.ts.map +1 -1
  59. package/dist/styles/components-vanilla.css +1 -1
  60. package/dist/styles/styles.css +1 -1
  61. package/dist/utils/polymorphic.js +1 -0
  62. package/dist/widgets/datepicker/datepicker.d.ts.map +1 -1
  63. package/dist/widgets/datepicker/datepicker.module.css +1 -2
  64. package/dist/widgets/drawer/drawer.module.css +1 -2
  65. package/dist/widgets/modal/modal.d.ts.map +1 -1
  66. package/dist/widgets/modal/modal.module.css +1 -4
  67. package/package.json +22 -18
  68. package/src/components/accordion/accordion.module.css +1 -2
  69. package/src/components/avatar/avatar.module.css +2 -19
  70. package/src/components/button/button-group.tsx +3 -9
  71. package/src/components/button/button.module.css +56 -37
  72. package/src/components/button/combo-button.module.css +3 -3
  73. package/src/components/button/combo-button.tsx +1 -7
  74. package/src/components/button/copy-button.tsx +23 -9
  75. package/src/components/card/card.module.css +1 -9
  76. package/src/components/chips/chip.module.css +32 -21
  77. package/src/components/chips/chip.stories.tsx +2 -2
  78. package/src/components/chips/chip.tsx +2 -2
  79. package/src/components/dropdown/dropdown.tsx +4 -19
  80. package/src/components/hamburger/hamburger.module.css +6 -7
  81. package/src/components/hamburger/hamburger.stories.tsx +0 -1
  82. package/src/components/inputs/autocomplete.module.css +9 -10
  83. package/src/components/inputs/autocomplete.tsx +10 -4
  84. package/src/components/inputs/calendar.stories.tsx +18 -18
  85. package/src/components/inputs/checkbox-group.module.css +6 -7
  86. package/src/components/inputs/checkbox-group.stories.tsx +4 -7
  87. package/src/components/inputs/checkbox.module.css +16 -18
  88. package/src/components/inputs/error-text.module.css +1 -1
  89. package/src/components/inputs/input.module.css +10 -11
  90. package/src/components/inputs/label.module.css +1 -1
  91. package/src/components/inputs/radio-group.module.css +6 -7
  92. package/src/components/inputs/select.module.css +6 -7
  93. package/src/components/inputs/select.stories.tsx +21 -4
  94. package/src/components/inputs/select.tsx +9 -7
  95. package/src/components/inputs/text-area.module.css +10 -9
  96. package/src/components/notifications/toast.module.css +9 -19
  97. package/src/components/notifications/toast.tsx +2 -11
  98. package/src/components/pager/first-button.tsx +5 -1
  99. package/src/components/pager/last-button.tsx +5 -1
  100. package/src/components/pager/next-button.tsx +5 -1
  101. package/src/components/pager/number-button.tsx +6 -3
  102. package/src/components/pager/pagination.module.css +1 -6
  103. package/src/components/pager/previous-button.tsx +5 -1
  104. package/src/components/scroll-area/scroll-area.tsx +1 -1
  105. package/src/components/scroll-to-top/scroll-to-top.module.css +3 -3
  106. package/src/components/tabs/tabs.module.css +6 -7
  107. package/src/components/tooltip/tooltip.module.css +10 -11
  108. package/src/components/tooltip/tooltip.tsx +12 -12
  109. package/src/lib/ripple.ts +3 -3
  110. package/src/loaders/ellipses.tsx +1 -1
  111. package/src/loaders/loaders.stories.tsx +44 -10
  112. package/src/loaders/ring.tsx +1 -1
  113. package/src/loaders/spinner.tsx +2 -2
  114. package/src/styles/components/hamburger.css +6 -6
  115. package/src/styles/components/loaders.css +1 -1
  116. package/src/styles/functional/README.md +67 -0
  117. package/src/styles/functional/borders.css +19 -0
  118. package/src/styles/functional/colors.css +237 -69
  119. package/src/styles/functional/functional.css +1 -0
  120. package/src/styles/functional/shadcn-compat.css +120 -0
  121. package/src/styles/functional/surfaces.css +17 -0
  122. package/src/styles/functional/typography.css +14 -6
  123. package/src/styles/local-fonts.css +1 -1
  124. package/src/styles/theme/theme.css +1 -1
  125. package/src/styles/utils/utility-classes.css +12 -22
  126. package/src/widgets/datepicker/datepicker.module.css +1 -2
  127. package/src/widgets/datepicker/datepicker.tsx +10 -8
  128. package/src/widgets/drawer/drawer.module.css +1 -2
  129. package/src/widgets/modal/modal.module.css +1 -4
  130. package/src/widgets/modal/modal.tsx +2 -6
package/src/styles/functional/colors.css CHANGED
@@ -18,12 +18,10 @@
18
18
  */
19
19
 
20
20
  @layer infonomic-functional {
21
-
22
21
  /* ===================================================================
23
22
  LIGHT MODE (default)
24
23
  =================================================================== */
25
24
  :root {
26
-
27
25
  /* Base functional colors */
28
26
  --primary: var(--primary-500);
29
27
  --secondary: var(--secondary-500);
@@ -34,11 +32,12 @@
34
32
  --warning: var(--yellow-500);
35
33
  --danger: var(--red-500);
36
34
 
35
+ /* Generic focus ring, used by components that are not tied to an intent */
36
+ --focus-ring: var(--ring-primary);
37
+
37
38
  /* PRIMARY INTENT TOKENS
38
39
  ----------------------------------------------------------------- */
39
40
 
40
-
41
-
42
41
  /* Fill tokens - for filled variant */
43
42
  --fill-primary-strong: var(--primary-500);
44
43
  --fill-primary-strong-hover: oklch(from var(--primary-500) calc(l * 0.9) c h);
@@ -50,7 +49,10 @@
50
49
 
51
50
  --fill-primary-outlined: transparent;
52
51
  --fill-primary-outlined-hover: oklch(from var(--primary-500) calc(l * 2) calc(c * 0.2) h / 0.7);
53
- --fill-primary-outlined-disabled: oklch(from var(--primary-500) calc(l * 2) calc(c * 0.2) h / 0.7);
52
+ --fill-primary-outlined-disabled: oklch(
53
+ from var(--primary-500) calc(l * 2) calc(c * 0.2) h /
54
+ 0.7
55
+ );
54
56
 
55
57
  --fill-primary-text: transparent;
56
58
  --fill-primary-text-hover: oklch(from var(--primary-500) calc(l * 2) calc(c * 0.2) h / 0.7);
@@ -67,7 +69,9 @@
67
69
 
68
70
  --text-on-primary-outlined: oklch(from var(--primary-500) calc(l * 0.7) c h);
69
71
  --text-on-primary-outlined-hover: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
70
- --text-on-primary-outlined-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
72
+ --text-on-primary-outlined-disabled: oklch(
73
+ from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h
74
+ );
71
75
 
72
76
  --text-primary: var(--primary-500);
73
77
  --text-primary-weak: oklch(from var(--primary-500) calc(l * 0.7) c h);
@@ -89,24 +93,41 @@
89
93
  --gradient-primary-disabled: oklch(from var(--primary-700) calc(l * 1.2) calc(c * 0.85) h);
90
94
 
91
95
  /* SECONDARY INTENT TOKENS
92
- ----------------------------------------------------------------- *
96
+ ----------------------------------------------------------------- */
93
97
 
94
98
  /* Fill tokens - for filled variant */
95
99
  --fill-secondary-strong: var(--secondary-500);
96
100
  --fill-secondary-strong-hover: oklch(from var(--secondary-500) calc(l * 0.95) c h);
97
- --fill-secondary-strong-disabled: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * 0.85) h);
101
+ --fill-secondary-strong-disabled: oklch(
102
+ from var(--secondary-500) calc(l * 1.1) calc(c * 0.85) h
103
+ );
98
104
 
99
105
  --fill-secondary-weak: oklch(from var(--secondary-500) calc(l * 1.6) calc(c * 0.4) h / 0.5);
100
- --fill-secondary-weak-hover: oklch(from var(--secondary-500) calc(l * 1.2) calc(c * 0.4) h / 0.5);
101
- --fill-secondary-weak-disabled: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h / 0.5);
106
+ --fill-secondary-weak-hover: oklch(
107
+ from var(--secondary-500) calc(l * 1.2) calc(c * 0.4) h /
108
+ 0.5
109
+ );
110
+ --fill-secondary-weak-disabled: oklch(
111
+ from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h /
112
+ 0.5
113
+ );
102
114
 
103
- --fill-secondary-outlined: var(--fill-secondary-outlined);
104
- --fill-secondary-outlined-hover: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) h / 0.7);
105
- --fill-secondary-outlined-disabled: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h / 0.7);
115
+ --fill-secondary-outlined: transparent;
116
+ --fill-secondary-outlined-hover: oklch(
117
+ from var(--secondary-500) calc(l * 2) calc(c * 0.4) h /
118
+ 0.7
119
+ );
120
+ --fill-secondary-outlined-disabled: oklch(
121
+ from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h /
122
+ 0.7
123
+ );
106
124
 
107
125
  --fill-secondary-text: transparent;
108
126
  --fill-secondary-text-hover: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) h / 0.7);
109
- --fill-secondary-text-disabled: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h / 0.7);
127
+ --fill-secondary-text-disabled: oklch(
128
+ from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h /
129
+ 0.7
130
+ );
110
131
 
111
132
  /* Text tokens - for text/icons on top of fills */
112
133
  --text-on-secondary-strong: black;
@@ -115,11 +136,17 @@
115
136
 
116
137
  --text-on-secondary-weak: var(--secondary-900);
117
138
  --text-on-secondary-weak-hover: oklch(from var(--secondary-900) calc(l * 1.5) calc(c * 0.5) h);
118
- --text-on-secondary-weak-disabled: oklch(from var(--secondary-900) calc(l * 1.5) calc(c * 0.5) h);
139
+ --text-on-secondary-weak-disabled: oklch(
140
+ from var(--secondary-900) calc(l * 1.5) calc(c * 0.5) h
141
+ );
119
142
 
120
143
  --text-on-secondary-outlined: var(--secondary-800);
121
- --text-on-secondary-outlined-hover: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
122
- --text-on-secondary-outlined-disabled: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
144
+ --text-on-secondary-outlined-hover: oklch(
145
+ from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h
146
+ );
147
+ --text-on-secondary-outlined-disabled: oklch(
148
+ from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h
149
+ );
123
150
 
124
151
  --text-secondary: var(--secondary-800);
125
152
  --text-secondary-weak: oklch(from var(--secondary-500) calc(l * 0.7) c h);
@@ -201,15 +228,27 @@
201
228
 
202
229
  --fill-success-weak: oklch(from var(--green-100) calc(l * 1.09) calc(c * 0.85) h / 0.5);
203
230
  --fill-success-weak-hover: oklch(from var(--green-100) calc(l * 0.975) calc(c * 0.85) h / 0.5);
204
- --fill-success-weak-disabled: oklch(from var(--green-100) calc(l * 1.07) calc(c * 0.85) h / 0.5);
231
+ --fill-success-weak-disabled: oklch(
232
+ from var(--green-100) calc(l * 1.07) calc(c * 0.85) h /
233
+ 0.5
234
+ );
205
235
 
206
236
  --fill-success-outlined: transparent;
207
- --fill-success-outlined-hover: oklch(from var(--green-100) calc(l * 0.975) calc(c * 0.85) h / 0.4);
208
- --fill-success-outlined-disabled: oklch(from var(--green-100) calc(l * 1.07) calc(c * 0.85) h / 0.4);
237
+ --fill-success-outlined-hover: oklch(
238
+ from var(--green-100) calc(l * 0.975) calc(c * 0.85) h /
239
+ 0.4
240
+ );
241
+ --fill-success-outlined-disabled: oklch(
242
+ from var(--green-100) calc(l * 1.07) calc(c * 0.85) h /
243
+ 0.4
244
+ );
209
245
 
210
246
  --fill-success-text: transparent;
211
247
  --fill-success-text-hover: oklch(from var(--green-100) calc(l * 0.975) calc(c * 0.85) h / 0.4);
212
- --fill-success-text-disabled: oklch(from var(--green-100) calc(l * 1.07) calc(c * 0.85) h / 0.4);
248
+ --fill-success-text-disabled: oklch(
249
+ from var(--green-100) calc(l * 1.07) calc(c * 0.85) h /
250
+ 0.4
251
+ );
213
252
 
214
253
  /* Text tokens - for text/icons on top of fills */
215
254
  --text-on-success-strong: white;
@@ -302,8 +341,14 @@
302
341
  --fill-warning-weak-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * 0.5) h / 0.7);
303
342
 
304
343
  --fill-warning-outlined: transparent;
305
- --fill-warning-outlined-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * 0.5) h / 0.7);
306
- --fill-warning-outlined-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * 0.5) h / 0.7);
344
+ --fill-warning-outlined-hover: oklch(
345
+ from var(--yellow-300) calc(l * 1.15) calc(c * 0.5) h /
346
+ 0.7
347
+ );
348
+ --fill-warning-outlined-disabled: oklch(
349
+ from var(--yellow-300) calc(l * 1.8) calc(c * 0.5) h /
350
+ 0.7
351
+ );
307
352
 
308
353
  --fill-warning-text: transparent;
309
354
  --fill-warning-text-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * 0.5) h / 0.7);
@@ -320,7 +365,9 @@
320
365
 
321
366
  --text-on-warning-outlined: var(--yellow-800);
322
367
  --text-on-warning-outlined-hover: oklch(from var(--yellow-800) calc(l * 0.9) calc(c * 0.85) h);
323
- --text-on-warning-outlined-disabled: oklch(from var(--yellow-800) calc(l * 0.9) calc(c * 0.85) h);
368
+ --text-on-warning-outlined-disabled: oklch(
369
+ from var(--yellow-800) calc(l * 0.9) calc(c * 0.85) h
370
+ );
324
371
 
325
372
  --text-warning: var(--yellow-700);
326
373
  --text-warning-weak: oklch(from var(--yellow-700) calc(l * 0.6) c h);
@@ -352,7 +399,10 @@
352
399
 
353
400
  --fill-danger-outlined: transparent;
354
401
  --fill-danger-outlined-hover: oklch(from var(--red-300) calc(l * 1.65) calc(c * 0.5) h / 0.7);
355
- --fill-danger-outlined-disabled: oklch(from var(--red-300) calc(l * 1.65) calc(c * 0.5) h / 0.7);
402
+ --fill-danger-outlined-disabled: oklch(
403
+ from var(--red-300) calc(l * 1.65) calc(c * 0.5) h /
404
+ 0.7
405
+ );
356
406
 
357
407
  --fill-danger-text: transparent;
358
408
  --fill-danger-text-hover: oklch(from var(--red-300) calc(l * 1.65) calc(c * 0.5) h / 0.7);
@@ -398,7 +448,6 @@
398
448
  .dark,
399
449
  [data-theme="dark"],
400
450
  [data-theme="dark"]::backdrop {
401
-
402
451
  /* Base functional colors */
403
452
  --primary: var(--primary-500);
404
453
  --secondary: var(--secondary-500);
@@ -409,6 +458,9 @@
409
458
  --warning: var(--yellow-500);
410
459
  --danger: var(--red-500);
411
460
 
461
+ /* Generic focus ring, used by components that are not tied to an intent */
462
+ --focus-ring: var(--ring-primary);
463
+
412
464
  /* PRIMARY INTENT TOKENS (Dark Mode)
413
465
  ----------------------------------------------------------------- */
414
466
 
@@ -422,12 +474,21 @@
422
474
  --fill-primary-weak-disabled: oklch(from var(--primary-500) l calc(c * 0.9) h / 0.5);
423
475
 
424
476
  --fill-primary-outlined: transparent;
425
- --fill-primary-outlined-hover: oklch(from var(--primary-500) calc(l * 0.9) calc(c * 0.9) h / 0.3);
426
- --fill-primary-outlined-disabled: oklch(from var(--primary-500) calc(l * 0.9) calc(c * 0.9) h / 0.3);
477
+ --fill-primary-outlined-hover: oklch(
478
+ from var(--primary-500) calc(l * 0.9) calc(c * 0.9) h /
479
+ 0.3
480
+ );
481
+ --fill-primary-outlined-disabled: oklch(
482
+ from var(--primary-500) calc(l * 0.9) calc(c * 0.9) h /
483
+ 0.3
484
+ );
427
485
 
428
486
  --fill-primary-text: transparent;
429
487
  --fill-primary-text-hover: oklch(from var(--primary-500) calc(l * 0.9) calc(c * 0.9) h / 0.3);
430
- --fill-primary-text-disabled: oklch(from var(--primary-500) calc(l * 0.9) calc(c * 0.9) h / 0.3);
488
+ --fill-primary-text-disabled: oklch(
489
+ from var(--primary-500) calc(l * 0.9) calc(c * 0.9) h /
490
+ 0.3
491
+ );
431
492
 
432
493
  /* Text tokens - for text/icons on top of fills */
433
494
  --text-on-primary-strong: white;
@@ -467,19 +528,33 @@
467
528
  /* Fill tokens - for filled variant */
468
529
  --fill-secondary-strong: var(--secondary-500);
469
530
  --fill-secondary-strong-hover: oklch(from var(--secondary-500) calc(l * 0.95) c h);
470
- --fill-secondary-strong-disabled: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * 0.85) h);
531
+ --fill-secondary-strong-disabled: oklch(
532
+ from var(--secondary-500) calc(l * 1.1) calc(c * 0.85) h
533
+ );
471
534
 
472
535
  --fill-secondary-weak: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * 0.8) h / 0.2);
473
536
  --fill-secondary-weak-hover: oklch(from var(--secondary-500) l calc(c * 0.8) h / 0.2);
474
537
  --fill-secondary-weak-disabled: oklch(from var(--secondary-500) l calc(c * 0.8) c h / 0.2);
475
538
 
476
539
  --fill-secondary-outlined: transparent;
477
- --fill-secondary-outlined-hover: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * 0.8) h / 0.1);
478
- --fill-secondary-outlined-disabled: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * 0.8) h / 0.1);
540
+ --fill-secondary-outlined-hover: oklch(
541
+ from var(--secondary-500) calc(l * 1.1) calc(c * 0.8) h /
542
+ 0.1
543
+ );
544
+ --fill-secondary-outlined-disabled: oklch(
545
+ from var(--secondary-500) calc(l * 1.1) calc(c * 0.8) h /
546
+ 0.1
547
+ );
479
548
 
480
549
  --fill-secondary-text: transparent;
481
- --fill-secondary-text-hover: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * 0.8) h / 0.1);
482
- --fill-secondary-text-disabled: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * 0.8) h / 0.1);
550
+ --fill-secondary-text-hover: oklch(
551
+ from var(--secondary-500) calc(l * 1.1) calc(c * 0.8) h /
552
+ 0.1
553
+ );
554
+ --fill-secondary-text-disabled: oklch(
555
+ from var(--secondary-500) calc(l * 1.1) calc(c * 0.8) h /
556
+ 0.1
557
+ );
483
558
 
484
559
  /* Text tokens - for text/icons on top of fills */
485
560
  --text-on-secondary-strong: black;
@@ -488,11 +563,17 @@
488
563
 
489
564
  --text-on-secondary-weak: oklch(from var(--secondary-500) calc(l * 0.7) c h);
490
565
  --text-on-secondary-weak-hover: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
491
- --text-on-secondary-weak-disabled: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
566
+ --text-on-secondary-weak-disabled: oklch(
567
+ from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h
568
+ );
492
569
 
493
570
  --text-on-secondary-outlined: oklch(from var(--secondary-500) calc(l * 0.7) c h);
494
- --text-on-secondary-outlined-hover: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
495
- --text-on-secondary-outlined-disabled: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
571
+ --text-on-secondary-outlined-hover: oklch(
572
+ from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h
573
+ );
574
+ --text-on-secondary-outlined-disabled: oklch(
575
+ from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h
576
+ );
496
577
 
497
578
  --text-secondary: var(--secondary-500);
498
579
  --text-secondary-weak: oklch(from var(--secondary-500) calc(l * 0.7) c h);
@@ -543,6 +624,10 @@
543
624
  --text-on-noeffect-outlined-hover: oklch(from var(--gray-200) calc(l * 1.5) calc(c * 0.5) h);
544
625
  --text-on-noeffect-outlined-disabled: oklch(from var(--gray-200) calc(l * 1.5) calc(c * 0.5) h);
545
626
 
627
+ --text-on-noeffect-text: var(--gray-200);
628
+ --text-on-noeffect-text-hover: oklch(from var(--gray-200) calc(l * 1.5) calc(c * 0.5) h);
629
+ --text-on-noeffect-text-disabled: oklch(from var(--gray-200) calc(l * 1.5) calc(c * 0.5) h);
630
+
546
631
  --text-noeffect: var(--gray-200);
547
632
  --text-noeffect-weak: oklch(from var(--gray-200) calc(l * 0.7) c h);
548
633
  --text-noeffect-hover: oklch(from var(--gray-200) calc(l * 0.7) c h);
@@ -569,15 +654,27 @@
569
654
 
570
655
  --fill-success-weak: oklch(from var(--green-100) calc(l * 1.09) calc(c * 0.85) h / 0.2);
571
656
  --fill-success-weak-hover: oklch(from var(--green-100) calc(l * 0.975) calc(c * 0.85) h / 0.2);
572
- --fill-success-weak-disabled: oklch(from var(--green-100) calc(l * 1.07) calc(c * 0.85) h / 0.2);
657
+ --fill-success-weak-disabled: oklch(
658
+ from var(--green-100) calc(l * 1.07) calc(c * 0.85) h /
659
+ 0.2
660
+ );
573
661
 
574
662
  --fill-success-outlined: transparent;
575
- --fill-success-outlined-hover: oklch(from var(--green-300) calc(l * 0.975) calc(c * 0.85) h / 0.2);
576
- --fill-success-outlined-disabled: oklch(from var(--green-300) calc(l * 1.07) calc(c * 0.85) h / 0.2);
663
+ --fill-success-outlined-hover: oklch(
664
+ from var(--green-300) calc(l * 0.975) calc(c * 0.85) h /
665
+ 0.2
666
+ );
667
+ --fill-success-outlined-disabled: oklch(
668
+ from var(--green-300) calc(l * 1.07) calc(c * 0.85) h /
669
+ 0.2
670
+ );
577
671
 
578
672
  --fill-success-text: transparent;
579
673
  --fill-success-text-hover: oklch(from var(--green-300) calc(l * 0.975) calc(c * 0.85) h / 0.1);
580
- --fill-success-text-disabled: oklch(from var(--green-300) calc(l * 1.07) calc(c * 0.85) h / 0.1);
674
+ --fill-success-text-disabled: oklch(
675
+ from var(--green-300) calc(l * 1.07) calc(c * 0.85) h /
676
+ 0.1
677
+ );
581
678
 
582
679
  /* Text tokens - for text/icons on top of fills */
583
680
  --text-on-success-strong: white;
@@ -597,6 +694,10 @@
597
694
  --text-success-hover: oklch(from var(--green-300) calc(l * 0.7) c h);
598
695
  --text-success-disabled: oklch(from var(--green-300) calc(l * 1.5) calc(c * 0.5) h);
599
696
 
697
+ --stroke-success: var(--green-400);
698
+ --stroke-success-hover: oklch(from var(--green-400) calc(l * 1.1) c h);
699
+ --stroke-success-disabled: oklch(from var(--green-400) calc(l * 0.8) calc(c * 0.8) h);
700
+
600
701
  --ring-success: var(--green-400);
601
702
 
602
703
  --gradient-success-start: var(--green-500);
@@ -664,8 +765,14 @@
664
765
  --fill-warning-weak-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * 0.8) h / 0.2);
665
766
 
666
767
  --fill-warning-outlined: transparent;
667
- --fill-warning-outlined-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * 0.8) h / 0.1);
668
- --fill-warning-outlined-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * 0.8) h / 0.1);
768
+ --fill-warning-outlined-hover: oklch(
769
+ from var(--yellow-300) calc(l * 1.15) calc(c * 0.8) h /
770
+ 0.1
771
+ );
772
+ --fill-warning-outlined-disabled: oklch(
773
+ from var(--yellow-300) calc(l * 1.8) calc(c * 0.8) h /
774
+ 0.1
775
+ );
669
776
 
670
777
  --fill-warning-text: transparent;
671
778
  --fill-warning-text-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * 0.8) h / 0.1);
@@ -682,7 +789,9 @@
682
789
 
683
790
  --text-on-warning-outlined: var(--yellow-400);
684
791
  --text-on-warning-outlined-hover: oklch(from var(--yellow-400) calc(l * 0.9) calc(c * 0.85) h);
685
- --text-on-warning-outlined-disabled: oklch(from var(--yellow-400) calc(l * 0.9) calc(c * 0.85) h);
792
+ --text-on-warning-outlined-disabled: oklch(
793
+ from var(--yellow-400) calc(l * 0.9) calc(c * 0.85) h
794
+ );
686
795
 
687
796
  --text-warning: var(--yellow-400);
688
797
  --text-warning-weak: oklch(from var(--yellow-300) calc(l * 0.6) c h);
@@ -735,8 +844,13 @@
735
844
 
736
845
  --text-danger: var(--red-400);
737
846
  --text-danger-weak: oklch(from var(--red-400) calc(l * 0.7) c h);
847
+ --text-danger-hover: oklch(from var(--red-400) calc(l * 0.7) c h);
738
848
  --text-danger-disabled: oklch(from var(--red-500) calc(l * 1.5) calc(c * 0.5) h);
739
849
 
850
+ --stroke-danger: var(--red-400);
851
+ --stroke-danger-hover: oklch(from var(--red-400) calc(l * 1.1) c h);
852
+ --stroke-danger-disabled: oklch(from var(--red-400) calc(l * 0.8) calc(c * 0.8) h);
853
+
740
854
  --ring-danger: var(--red-400);
741
855
 
742
856
  --gradient-danger-start: var(--red-500);
@@ -753,7 +867,6 @@
753
867
  * Alternative approaches (revert-layer, :not() patterns) would be more fragile.
754
868
  */
755
869
  .not-dark {
756
-
757
870
  /* Base functional colors */
758
871
  --primary: var(--primary-500);
759
872
  --secondary: var(--secondary-500);
@@ -764,6 +877,9 @@
764
877
  --warning: var(--yellow-500);
765
878
  --danger: var(--red-500);
766
879
 
880
+ /* Generic focus ring, used by components that are not tied to an intent */
881
+ --focus-ring: var(--ring-primary);
882
+
767
883
  /* PRIMARY INTENT TOKENS
768
884
  ----------------------------------------------------------------- */
769
885
 
@@ -778,7 +894,10 @@
778
894
 
779
895
  --fill-primary-outlined: transparent;
780
896
  --fill-primary-outlined-hover: oklch(from var(--primary-500) calc(l * 2) calc(c * 0.2) h / 0.7);
781
- --fill-primary-outlined-disabled: oklch(from var(--primary-500) calc(l * 2) calc(c * 0.2) h / 0.7);
897
+ --fill-primary-outlined-disabled: oklch(
898
+ from var(--primary-500) calc(l * 2) calc(c * 0.2) h /
899
+ 0.7
900
+ );
782
901
 
783
902
  --fill-primary-text: transparent;
784
903
  --fill-primary-text-hover: oklch(from var(--primary-500) calc(l * 2) calc(c * 0.2) h / 0.7);
@@ -795,7 +914,9 @@
795
914
 
796
915
  --text-on-primary-outlined: oklch(from var(--primary-500) calc(l * 0.7) c h);
797
916
  --text-on-primary-outlined-hover: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
798
- --text-on-primary-outlined-disabled: oklch(from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h);
917
+ --text-on-primary-outlined-disabled: oklch(
918
+ from var(--primary-600) calc(l * 1.5) calc(c * 0.5) h
919
+ );
799
920
 
800
921
  --text-primary: var(--primary-500);
801
922
  --text-primary-weak: oklch(from var(--primary-500) calc(l * 0.7) c h);
@@ -822,19 +943,33 @@
822
943
  /* Fill tokens - for filled variant */
823
944
  --fill-secondary-strong: var(--secondary-500);
824
945
  --fill-secondary-strong-hover: oklch(from var(--secondary-500) calc(l * 0.95) c h);
825
- --fill-secondary-strong-disabled: oklch(from var(--secondary-500) calc(l * 1.1) calc(c * 0.85) h);
946
+ --fill-secondary-strong-disabled: oklch(
947
+ from var(--secondary-500) calc(l * 1.1) calc(c * 0.85) h
948
+ );
826
949
 
827
950
  --fill-secondary-weak: oklch(from var(--secondary-500) calc(l * 1.6) calc(c * 0.4) h / 0.5);
828
951
  --fill-secondary-weak-hover: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) h / 0.5);
829
- --fill-secondary-weak-disabled: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h / 0.5);
952
+ --fill-secondary-weak-disabled: oklch(
953
+ from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h /
954
+ 0.5
955
+ );
830
956
 
831
957
  --fill-secondary-outlined: transparent;
832
- --fill-secondary-outlined-hover: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) h / 0.7);
833
- --fill-secondary-outlined-disabled: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h / 0.7);
958
+ --fill-secondary-outlined-hover: oklch(
959
+ from var(--secondary-500) calc(l * 2) calc(c * 0.4) h /
960
+ 0.7
961
+ );
962
+ --fill-secondary-outlined-disabled: oklch(
963
+ from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h /
964
+ 0.7
965
+ );
834
966
 
835
967
  --fill-secondary-text: transparent;
836
968
  --fill-secondary-text-hover: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) h / 0.7);
837
- --fill-secondary-text-disabled: oklch(from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h / 0.7);
969
+ --fill-secondary-text-disabled: oklch(
970
+ from var(--secondary-500) calc(l * 2) calc(c * 0.4) c h /
971
+ 0.7
972
+ );
838
973
 
839
974
  /* Text tokens - for text/icons on top of fills */
840
975
  --text-on-secondary-strong: black;
@@ -843,11 +978,17 @@
843
978
 
844
979
  --text-on-secondary-weak: oklch(from var(--secondary-500) calc(l * 0.7) c h);
845
980
  --text-on-secondary-weak-hover: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
846
- --text-on-secondary-weak-disabled: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
981
+ --text-on-secondary-weak-disabled: oklch(
982
+ from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h
983
+ );
847
984
 
848
985
  --text-on-secondary-outlined: oklch(from var(--secondary-500) calc(l * 0.7) c h);
849
- --text-on-secondary-outlined-hover: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
850
- --text-on-secondary-outlined-disabled: oklch(from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h);
986
+ --text-on-secondary-outlined-hover: oklch(
987
+ from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h
988
+ );
989
+ --text-on-secondary-outlined-disabled: oklch(
990
+ from var(--secondary-950) calc(l * 1.5) calc(c * 0.5) h
991
+ );
851
992
 
852
993
  --text-secondary: var(--secondary-500);
853
994
  --text-secondary-weak: oklch(from var(--secondary-500) calc(l * 0.7) c h);
@@ -880,6 +1021,10 @@
880
1021
  --fill-noeffect-outlined-hover: oklch(from var(--gray-100) calc(l * 1.05) c h / 0.7);
881
1022
  --fill-noeffect-outlined-disabled: oklch(from var(--gray-100) calc(l * 1.07) c h / 0.7);
882
1023
 
1024
+ --fill-noeffect-text: transparent;
1025
+ --fill-noeffect-text-hover: oklch(from var(--gray-100) calc(l * 1.05) c h / 0.5);
1026
+ --fill-noeffect-text-disabled: oklch(from var(--gray-100) calc(l * 1.07) c h / 0.5);
1027
+
883
1028
  /* Text tokens - for text/icons on top of fills */
884
1029
  --text-on-noeffect-strong: black;
885
1030
  --text-on-noeffect-strong-hover: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
@@ -923,15 +1068,27 @@
923
1068
 
924
1069
  --fill-success-weak: oklch(from var(--green-100) calc(l * 1.09) calc(c * 0.85) h / 0.7);
925
1070
  --fill-success-weak-hover: oklch(from var(--green-100) calc(l * 0.975) calc(c * 0.85) h / 0.7);
926
- --fill-success-weak-disabled: oklch(from var(--green-100) calc(l * 1.07) calc(c * 0.85) h / 0.7);
1071
+ --fill-success-weak-disabled: oklch(
1072
+ from var(--green-100) calc(l * 1.07) calc(c * 0.85) h /
1073
+ 0.7
1074
+ );
927
1075
 
928
1076
  --fill-success-outlined: transparent;
929
- --fill-success-outlined-hover: oklch(from var(--green-100) calc(l * 0.975) calc(c * 0.85) h / 0.7);
930
- --fill-success-outlined-disabled: oklch(from var(--green-100) calc(l * 1.07) calc(c * 0.85) h / 0.7);
1077
+ --fill-success-outlined-hover: oklch(
1078
+ from var(--green-100) calc(l * 0.975) calc(c * 0.85) h /
1079
+ 0.7
1080
+ );
1081
+ --fill-success-outlined-disabled: oklch(
1082
+ from var(--green-100) calc(l * 1.07) calc(c * 0.85) h /
1083
+ 0.7
1084
+ );
931
1085
 
932
1086
  --fill-success-text: transparent;
933
1087
  --fill-success-text-hover: oklch(from var(--green-100) calc(l * 0.975) calc(c * 0.85) h / 0.7);
934
- --fill-success-text-disabled: oklch(from var(--green-100) calc(l * 1.07) calc(c * 0.85) h / 0.7);
1088
+ --fill-success-text-disabled: oklch(
1089
+ from var(--green-100) calc(l * 1.07) calc(c * 0.85) h /
1090
+ 0.7
1091
+ );
935
1092
 
936
1093
  /* Text tokens - for text/icons on top of fills */
937
1094
  --text-on-success-strong: white;
@@ -1023,8 +1180,14 @@
1023
1180
  --fill-warning-weak-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * 0.5) h / 0.7);
1024
1181
 
1025
1182
  --fill-warning-outlined: transparent;
1026
- --fill-warning-outlined-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * 0.5) h / 0.7);
1027
- --fill-warning-outlined-disabled: oklch(from var(--yellow-300) calc(l * 1.8) calc(c * 0.5) h / 0.7);
1183
+ --fill-warning-outlined-hover: oklch(
1184
+ from var(--yellow-300) calc(l * 1.15) calc(c * 0.5) h /
1185
+ 0.7
1186
+ );
1187
+ --fill-warning-outlined-disabled: oklch(
1188
+ from var(--yellow-300) calc(l * 1.8) calc(c * 0.5) h /
1189
+ 0.7
1190
+ );
1028
1191
 
1029
1192
  --fill-warning-text: transparent;
1030
1193
  --fill-warning-text-hover: oklch(from var(--yellow-300) calc(l * 1.15) calc(c * 0.5) h / 0.7);
@@ -1035,13 +1198,15 @@
1035
1198
  --text-on-warning-strong-hover: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
1036
1199
  --text-on-warning-strong-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
1037
1200
 
1038
- --text-on-warning-weak: black;
1039
- --text-on-warning-weak-hover: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
1040
- --text-on-warning-weak-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
1201
+ --text-on-warning-weak: var(--yellow-700);
1202
+ --text-on-warning-weak-hover: oklch(from var(--yellow-700) calc(l * 0.9) calc(c * 0.85) h);
1203
+ --text-on-warning-weak-disabled: oklch(from var(--yellow-700) calc(l * 0.9) calc(c * 0.85) h);
1041
1204
 
1042
- --text-on-warning-outlined: black;
1043
- --text-on-warning-outlined-hover: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
1044
- --text-on-warning-outlined-disabled: oklch(from black calc(l * 0.9) calc(c * 0.85) h);
1205
+ --text-on-warning-outlined: var(--yellow-800);
1206
+ --text-on-warning-outlined-hover: oklch(from var(--yellow-800) calc(l * 0.9) calc(c * 0.85) h);
1207
+ --text-on-warning-outlined-disabled: oklch(
1208
+ from var(--yellow-800) calc(l * 0.9) calc(c * 0.85) h
1209
+ );
1045
1210
 
1046
1211
  --text-warning: var(--yellow-700);
1047
1212
  --text-warning-weak: oklch(from var(--yellow-300) calc(l * 0.6) c h);
@@ -1073,7 +1238,10 @@
1073
1238
 
1074
1239
  --fill-danger-outlined: transparent;
1075
1240
  --fill-danger-outlined-hover: oklch(from var(--red-300) calc(l * 1.65) calc(c * 0.5) h / 0.7);
1076
- --fill-danger-outlined-disabled: oklch(from var(--red-300) calc(l * 1.65) calc(c * 0.5) h / 0.7);
1241
+ --fill-danger-outlined-disabled: oklch(
1242
+ from var(--red-300) calc(l * 1.65) calc(c * 0.5) h /
1243
+ 0.7
1244
+ );
1077
1245
 
1078
1246
  --fill-danger-text: transparent;
1079
1247
  --fill-danger-text-hover: oklch(from var(--red-300) calc(l * 1.65) calc(c * 0.5) h / 0.7);
@@ -1108,4 +1276,4 @@
1108
1276
  --gradient-danger-foreground: white;
1109
1277
  --gradient-danger-disabled: oklch(from var(--red-700) calc(l * 1.2) calc(c * 0.85) h);
1110
1278
  }
1111
- }
1279
+ }
package/src/styles/functional/functional.css CHANGED
@@ -3,3 +3,4 @@
3
3
  @import "./typography.css";
4
4
  @import "./borders.css";
5
5
  @import "./grid-flex.css";
6
+ @import "./shadcn-compat.css";