@cladd-ui/react 0.0.19 → 0.0.21

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 (94) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/components/Button.d.ts +2 -4
  3. package/components/Button.d.ts.map +1 -1
  4. package/components/Button.js.map +1 -1
  5. package/components/Checkbox.js +2 -2
  6. package/components/Checkbox.js.map +1 -1
  7. package/components/Chip.d.ts +4 -7
  8. package/components/Chip.d.ts.map +1 -1
  9. package/components/Chip.js.map +1 -1
  10. package/components/Dialog.d.ts +1 -2
  11. package/components/Dialog.d.ts.map +1 -1
  12. package/components/Dialog.js.map +1 -1
  13. package/components/FocusableLayer.js +1 -1
  14. package/components/FocusableLayer.js.map +1 -1
  15. package/components/Input.d.ts +4 -8
  16. package/components/Input.d.ts.map +1 -1
  17. package/components/Input.js +1 -1
  18. package/components/Input.js.map +1 -1
  19. package/components/Link.d.ts +1 -2
  20. package/components/Link.d.ts.map +1 -1
  21. package/components/Link.js.map +1 -1
  22. package/components/ListButton.d.ts +2 -4
  23. package/components/ListButton.d.ts.map +1 -1
  24. package/components/ListButton.js.map +1 -1
  25. package/components/NumberField.d.ts +2 -3
  26. package/components/NumberField.d.ts.map +1 -1
  27. package/components/NumberField.js.map +1 -1
  28. package/components/OTPField.d.ts +2 -4
  29. package/components/OTPField.d.ts.map +1 -1
  30. package/components/OTPField.js.map +1 -1
  31. package/components/Popover.d.ts +6 -12
  32. package/components/Popover.d.ts.map +1 -1
  33. package/components/Popover.js.map +1 -1
  34. package/components/Popup.d.ts +1 -2
  35. package/components/Popup.d.ts.map +1 -1
  36. package/components/Popup.js.map +1 -1
  37. package/components/Radio.d.ts +2 -5
  38. package/components/Radio.d.ts.map +1 -1
  39. package/components/Radio.js +2 -2
  40. package/components/Radio.js.map +1 -1
  41. package/components/SearchField.d.ts +2 -5
  42. package/components/SearchField.d.ts.map +1 -1
  43. package/components/SearchField.js.map +1 -1
  44. package/components/Segmented.js +1 -1
  45. package/components/Segmented.js.map +1 -1
  46. package/components/SegmentedButton.d.ts +2 -4
  47. package/components/SegmentedButton.d.ts.map +1 -1
  48. package/components/SegmentedButton.js.map +1 -1
  49. package/components/Select.d.ts +2 -5
  50. package/components/Select.d.ts.map +1 -1
  51. package/components/Select.js.map +1 -1
  52. package/components/Shortcut.d.ts +2 -6
  53. package/components/Shortcut.d.ts.map +1 -1
  54. package/components/Shortcut.js.map +1 -1
  55. package/components/Slider.d.ts +1 -2
  56. package/components/Slider.d.ts.map +1 -1
  57. package/components/Slider.js +1 -1
  58. package/components/Slider.js.map +1 -1
  59. package/components/Spinner.d.ts.map +1 -1
  60. package/components/Spinner.js +1 -1
  61. package/components/Spinner.js.map +1 -1
  62. package/components/Surface.d.ts +5 -9
  63. package/components/Surface.d.ts.map +1 -1
  64. package/components/Surface.js +1 -1
  65. package/components/Surface.js.map +1 -1
  66. package/components/SurfaceCut.d.ts +2 -3
  67. package/components/SurfaceCut.d.ts.map +1 -1
  68. package/components/SurfaceCut.js +1 -1
  69. package/components/SurfaceCut.js.map +1 -1
  70. package/components/Switch.d.ts +4 -10
  71. package/components/Switch.d.ts.map +1 -1
  72. package/components/Switch.js +1 -1
  73. package/components/Switch.js.map +1 -1
  74. package/components/TextArea.d.ts +1 -4
  75. package/components/TextArea.d.ts.map +1 -1
  76. package/components/TextArea.js +1 -1
  77. package/components/TextArea.js.map +1 -1
  78. package/components/Toast.d.ts +1 -2
  79. package/components/Toast.d.ts.map +1 -1
  80. package/components/Toast.js.map +1 -1
  81. package/components/Toolbar.d.ts +3 -5
  82. package/components/Toolbar.d.ts.map +1 -1
  83. package/components/Toolbar.js.map +1 -1
  84. package/components/Tooltip.d.ts +2 -7
  85. package/components/Tooltip.d.ts.map +1 -1
  86. package/components/Tooltip.js.map +1 -1
  87. package/components/TooltipPrimitive.d.ts +2 -3
  88. package/components/TooltipPrimitive.d.ts.map +1 -1
  89. package/components/TooltipPrimitive.js.map +1 -1
  90. package/components/UIProvider.d.ts +2 -4
  91. package/components/UIProvider.d.ts.map +1 -1
  92. package/components/UIProvider.js.map +1 -1
  93. package/package.json +1 -1
  94. package/styles/colors.css +34 -34
package/styles/colors.css CHANGED
@@ -37,42 +37,42 @@
37
37
  }
38
38
 
39
39
  :root,
40
- [data-color="neutral"] {
40
+ .cladd-color-neutral {
41
41
  --cladd-theme: #fff;
42
42
  }
43
- [data-color="brand"] {
43
+ .cladd-color-brand {
44
44
  --cladd-theme: #d7ff38;
45
45
  }
46
- [data-color="red"] {
46
+ .cladd-color-red {
47
47
  --cladd-theme: #ff0b0b;
48
48
  }
49
- [data-color="pink"] {
49
+ .cladd-color-pink {
50
50
  --cladd-theme: #ff0bac;
51
51
  }
52
- [data-color="purple"] {
52
+ .cladd-color-purple {
53
53
  --cladd-theme: #a20bff;
54
54
  }
55
- [data-color="blue"] {
55
+ .cladd-color-blue {
56
56
  --cladd-theme: #0047ff;
57
57
  }
58
- [data-color="cyan"] {
58
+ .cladd-color-cyan {
59
59
  --cladd-theme: #00f9ff;
60
60
  }
61
- [data-color="lime"] {
61
+ .cladd-color-lime {
62
62
  --cladd-theme: #7dff0b;
63
63
  }
64
- [data-color="green"] {
64
+ .cladd-color-green {
65
65
  --cladd-theme: #0bff23;
66
66
  }
67
- [data-color="yellow"] {
67
+ .cladd-color-yellow {
68
68
  --cladd-theme: #fff800;
69
69
  }
70
- [data-color="orange"] {
70
+ .cladd-color-orange {
71
71
  --cladd-theme: #ff7a00;
72
72
  }
73
73
  /* NEUTRAL */
74
74
  :root,
75
- [data-color="neutral"] {
75
+ .cladd-color-neutral {
76
76
  --cladd-bg: #0f0f0f;
77
77
  --cladd-backdrop: #000;
78
78
  --cladd-primary: oklch(
@@ -129,7 +129,7 @@
129
129
  }
130
130
 
131
131
  /* COLORS */
132
- [data-color]:not([data-color="neutral"]) {
132
+ [class*="cladd-color-"]:not(.cladd-color-neutral) {
133
133
  --cladd-bg: oklch(from var(--cladd-theme) 0.15 0.02 h);
134
134
  --cladd-backdrop: #000;
135
135
  --cladd-primary: oklch(
@@ -193,9 +193,9 @@
193
193
  :root.light,
194
194
  .dark .light,
195
195
  :root .light,
196
- .light[data-color="neutral"],
197
- .light [data-color="neutral"],
198
- [data-color="neutral"] .light {
196
+ .light .cladd-color-neutral,
197
+ .light .cladd-color-neutral,
198
+ .cladd-color-neutral .light {
199
199
  --cladd-bg: #fff;
200
200
  --cladd-backdrop: oklch(0.91 0 0);
201
201
  --cladd-primary: oklch(from var(--cladd-theme) 0.1 0 h);
@@ -236,7 +236,7 @@
236
236
  1px 1px 0px 0px
237
237
  color-mix(in oklab, var(--cladd-surface-white) 30%, transparent) inset;
238
238
  &,
239
- [data-level] {
239
+ [class*="cladd-surface-level-"] {
240
240
  --shadow-cladd-outline:
241
241
  0px 0px 0px 1px var(--color-cladd-outline) inset,
242
242
  1.5px 1.5px 0px 0px
@@ -244,9 +244,9 @@
244
244
  }
245
245
  }
246
246
  /* COLORS LIGHT */
247
- .light [data-color]:not([data-color="neutral"]),
248
- .dark .light [data-color]:not([data-color="neutral"]),
249
- .light[data-color]:not([data-color="neutral"]) {
247
+ .light [class*="cladd-color-"]:not(.cladd-color-neutral),
248
+ .dark .light [class*="cladd-color-"]:not(.cladd-color-neutral),
249
+ .light[class*="cladd-color-"]:not(.cladd-color-neutral) {
250
250
  --cladd-bg: oklch(0.91 0.015 100);
251
251
  --cladd-backdrop: oklch(0.74 0.018 100);
252
252
  --cladd-primary: oklch(
@@ -297,7 +297,7 @@
297
297
  color-mix(in oklab, var(--cladd-surface-white) 30%, transparent) inset;
298
298
 
299
299
  &,
300
- [data-level] {
300
+ [class*="cladd-surface-level-"] {
301
301
  --shadow-cladd-outline:
302
302
  0px 0px 0px 1px var(--color-cladd-outline) inset,
303
303
  1.5px 1.5px 0px 0px
@@ -308,7 +308,7 @@
308
308
  /* COMMON */
309
309
  .light,
310
310
  .dark,
311
- [data-color] {
311
+ [class*="cladd-color-"] {
312
312
  --color-cladd-bg: var(--cladd-bg);
313
313
  --color-cladd-primary: var(--cladd-primary);
314
314
  --color-cladd-on-primary: var(--cladd-on-primary);
@@ -321,8 +321,8 @@
321
321
  }
322
322
 
323
323
  /* LEVELS */
324
- [data-level],
325
- [data-color] {
324
+ [class*="cladd-surface-level-"],
325
+ [class*="cladd-color-"] {
326
326
  --cladd-surface-leveled: color-mix(
327
327
  in oklab,
328
328
  var(--cladd-surface-mix-color)
@@ -415,23 +415,23 @@
415
415
  var(--color-cladd-surface) var(--highlight-original-mix, 100%)
416
416
  );
417
417
  }
418
- [data-level="1"],
419
- [data-level="1"][data-color] {
418
+ .cladd-surface-level-1,
419
+ .cladd-surface-level-1[class*="cladd-color-"] {
420
420
  --cladd-surface-multiplier: 0;
421
421
  }
422
- [data-level="2"],
423
- [data-level="2"][data-color] {
422
+ .cladd-surface-level-2,
423
+ .cladd-surface-level-2[class*="cladd-color-"] {
424
424
  --cladd-surface-multiplier: 1;
425
425
  }
426
- [data-level="3"],
427
- [data-level="3"][data-color] {
426
+ .cladd-surface-level-3,
427
+ .cladd-surface-level-3[class*="cladd-color-"] {
428
428
  --cladd-surface-multiplier: 2;
429
429
  }
430
- [data-level="4"],
431
- [data-level="4"][data-color] {
430
+ .cladd-surface-level-4,
431
+ .cladd-surface-level-4[class*="cladd-color-"] {
432
432
  --cladd-surface-multiplier: 3;
433
433
  }
434
- [data-level="5"],
435
- [data-level="5"][data-color] {
434
+ .cladd-surface-level-5,
435
+ .cladd-surface-level-5[class*="cladd-color-"] {
436
436
  --cladd-surface-multiplier: 4;
437
437
  }