@ecopages/radiant-ui 0.1.0-beta.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 (254) hide show
  1. package/README.md +70 -0
  2. package/dist/components/ui/alert/alert.css +27 -0
  3. package/dist/components/ui/alert/alert.d.ts +4 -0
  4. package/dist/components/ui/alert/alert.script.d.ts +25 -0
  5. package/dist/components/ui/alert/index.d.ts +2 -0
  6. package/dist/components/ui/alert/index.js +2 -0
  7. package/dist/components/ui/alert/index.js.map +7 -0
  8. package/dist/components/ui/breadcrumb/breadcrumb.css +41 -0
  9. package/dist/components/ui/breadcrumb/breadcrumb.d.ts +59 -0
  10. package/dist/components/ui/breadcrumb/breadcrumb.script.d.ts +40 -0
  11. package/dist/components/ui/breadcrumb/index.d.ts +2 -0
  12. package/dist/components/ui/breadcrumb/index.js +2 -0
  13. package/dist/components/ui/breadcrumb/index.js.map +7 -0
  14. package/dist/components/ui/button/button.d.ts +37 -0
  15. package/dist/components/ui/button/index.d.ts +1 -0
  16. package/dist/components/ui/button/index.js +2 -0
  17. package/dist/components/ui/button/index.js.map +7 -0
  18. package/dist/components/ui/carousel/carousel.css +170 -0
  19. package/dist/components/ui/carousel/carousel.d.ts +39 -0
  20. package/dist/components/ui/carousel/carousel.script.d.ts +113 -0
  21. package/dist/components/ui/carousel/index.d.ts +2 -0
  22. package/dist/components/ui/carousel/index.js +2 -0
  23. package/dist/components/ui/carousel/index.js.map +7 -0
  24. package/dist/components/ui/checkbox/checkbox.css +55 -0
  25. package/dist/components/ui/checkbox/checkbox.d.ts +4 -0
  26. package/dist/components/ui/checkbox/checkbox.script.d.ts +58 -0
  27. package/dist/components/ui/checkbox/index.d.ts +2 -0
  28. package/dist/components/ui/checkbox/index.js +2 -0
  29. package/dist/components/ui/checkbox/index.js.map +7 -0
  30. package/dist/components/ui/combobox/combobox.css +65 -0
  31. package/dist/components/ui/combobox/combobox.d.ts +53 -0
  32. package/dist/components/ui/combobox/combobox.script.d.ts +89 -0
  33. package/dist/components/ui/combobox/index.d.ts +2 -0
  34. package/dist/components/ui/combobox/index.js +2 -0
  35. package/dist/components/ui/combobox/index.js.map +7 -0
  36. package/dist/components/ui/dialog/dialog-registry.d.ts +34 -0
  37. package/dist/components/ui/dialog/dialog-registry.test.d.ts +1 -0
  38. package/dist/components/ui/dialog/dialog-types.d.ts +55 -0
  39. package/dist/components/ui/dialog/dialog.css +53 -0
  40. package/dist/components/ui/dialog/dialog.d.ts +36 -0
  41. package/dist/components/ui/dialog/dialog.script.d.ts +61 -0
  42. package/dist/components/ui/dialog/index.d.ts +4 -0
  43. package/dist/components/ui/dialog/index.js +2 -0
  44. package/dist/components/ui/dialog/index.js.map +7 -0
  45. package/dist/components/ui/disclosure/disclosure-group.script.d.ts +31 -0
  46. package/dist/components/ui/disclosure/disclosure.css +105 -0
  47. package/dist/components/ui/disclosure/disclosure.d.ts +35 -0
  48. package/dist/components/ui/disclosure/disclosure.script.d.ts +38 -0
  49. package/dist/components/ui/disclosure/index.d.ts +3 -0
  50. package/dist/components/ui/disclosure/index.js +2 -0
  51. package/dist/components/ui/disclosure/index.js.map +7 -0
  52. package/dist/components/ui/feed/feed.css +14 -0
  53. package/dist/components/ui/feed/feed.d.ts +12 -0
  54. package/dist/components/ui/feed/feed.script.d.ts +22 -0
  55. package/dist/components/ui/feed/index.d.ts +2 -0
  56. package/dist/components/ui/feed/index.js +2 -0
  57. package/dist/components/ui/feed/index.js.map +7 -0
  58. package/dist/components/ui/field/field-context.d.ts +20 -0
  59. package/dist/components/ui/field/field-description.d.ts +8 -0
  60. package/dist/components/ui/field/field-error.d.ts +9 -0
  61. package/dist/components/ui/field/field-ssr-hydration.test.d.ts +1 -0
  62. package/dist/components/ui/field/field.css +26 -0
  63. package/dist/components/ui/field/field.d.ts +4 -0
  64. package/dist/components/ui/field/field.script.d.ts +68 -0
  65. package/dist/components/ui/field/index.d.ts +5 -0
  66. package/dist/components/ui/field/index.js +2 -0
  67. package/dist/components/ui/field/index.js.map +7 -0
  68. package/dist/components/ui/form/control-protocol.d.ts +19 -0
  69. package/dist/components/ui/form/form-context.d.ts +27 -0
  70. package/dist/components/ui/form/form-field.test.d.ts +3 -0
  71. package/dist/components/ui/form/form-store.d.ts +53 -0
  72. package/dist/components/ui/form/form-store.test.d.ts +1 -0
  73. package/dist/components/ui/form/form.css +12 -0
  74. package/dist/components/ui/form/form.d.ts +5 -0
  75. package/dist/components/ui/form/form.script.d.ts +67 -0
  76. package/dist/components/ui/form/index.d.ts +7 -0
  77. package/dist/components/ui/form/index.js +2 -0
  78. package/dist/components/ui/form/index.js.map +7 -0
  79. package/dist/components/ui/form/resolvers.d.ts +3 -0
  80. package/dist/components/ui/form/types.d.ts +72 -0
  81. package/dist/components/ui/grid/grid.css +47 -0
  82. package/dist/components/ui/grid/grid.d.ts +7 -0
  83. package/dist/components/ui/grid/grid.script.d.ts +26 -0
  84. package/dist/components/ui/grid/index.d.ts +2 -0
  85. package/dist/components/ui/grid/index.js +2 -0
  86. package/dist/components/ui/grid/index.js.map +7 -0
  87. package/dist/components/ui/input/index.d.ts +1 -0
  88. package/dist/components/ui/input/index.js +2 -0
  89. package/dist/components/ui/input/index.js.map +7 -0
  90. package/dist/components/ui/input/input.css +32 -0
  91. package/dist/components/ui/input/input.d.ts +23 -0
  92. package/dist/components/ui/label/index.d.ts +1 -0
  93. package/dist/components/ui/label/index.js +2 -0
  94. package/dist/components/ui/label/index.js.map +7 -0
  95. package/dist/components/ui/label/label.css +8 -0
  96. package/dist/components/ui/label/label.d.ts +9 -0
  97. package/dist/components/ui/listbox/index.d.ts +2 -0
  98. package/dist/components/ui/listbox/index.js +2 -0
  99. package/dist/components/ui/listbox/index.js.map +7 -0
  100. package/dist/components/ui/listbox/listbox.css +23 -0
  101. package/dist/components/ui/listbox/listbox.d.ts +12 -0
  102. package/dist/components/ui/listbox/listbox.script.d.ts +40 -0
  103. package/dist/components/ui/menu-button/index.d.ts +2 -0
  104. package/dist/components/ui/menu-button/index.js +2 -0
  105. package/dist/components/ui/menu-button/index.js.map +7 -0
  106. package/dist/components/ui/menu-button/menu-button.css +43 -0
  107. package/dist/components/ui/menu-button/menu-button.d.ts +13 -0
  108. package/dist/components/ui/menu-button/menu-button.script.d.ts +64 -0
  109. package/dist/components/ui/menubar/index.d.ts +2 -0
  110. package/dist/components/ui/menubar/index.js +2 -0
  111. package/dist/components/ui/menubar/index.js.map +7 -0
  112. package/dist/components/ui/menubar/menubar.css +45 -0
  113. package/dist/components/ui/menubar/menubar.d.ts +16 -0
  114. package/dist/components/ui/menubar/menubar.script.d.ts +52 -0
  115. package/dist/components/ui/meter/index.d.ts +2 -0
  116. package/dist/components/ui/meter/index.js +2 -0
  117. package/dist/components/ui/meter/index.js.map +7 -0
  118. package/dist/components/ui/meter/meter.css +17 -0
  119. package/dist/components/ui/meter/meter.d.ts +4 -0
  120. package/dist/components/ui/meter/meter.script.d.ts +33 -0
  121. package/dist/components/ui/navigation-menu/index.d.ts +2 -0
  122. package/dist/components/ui/navigation-menu/index.js +2 -0
  123. package/dist/components/ui/navigation-menu/index.js.map +7 -0
  124. package/dist/components/ui/navigation-menu/navigation-menu.css +90 -0
  125. package/dist/components/ui/navigation-menu/navigation-menu.d.ts +28 -0
  126. package/dist/components/ui/navigation-menu/navigation-menu.script.d.ts +49 -0
  127. package/dist/components/ui/radio-group/index.d.ts +2 -0
  128. package/dist/components/ui/radio-group/index.js +2 -0
  129. package/dist/components/ui/radio-group/index.js.map +7 -0
  130. package/dist/components/ui/radio-group/radio-group.css +44 -0
  131. package/dist/components/ui/radio-group/radio-group.d.ts +12 -0
  132. package/dist/components/ui/radio-group/radio-group.script.d.ts +52 -0
  133. package/dist/components/ui/sidebar/index.d.ts +3 -0
  134. package/dist/components/ui/sidebar/index.js +2 -0
  135. package/dist/components/ui/sidebar/index.js.map +7 -0
  136. package/dist/components/ui/sidebar/sidebar-trigger.script.d.ts +53 -0
  137. package/dist/components/ui/sidebar/sidebar.css +362 -0
  138. package/dist/components/ui/sidebar/sidebar.d.ts +141 -0
  139. package/dist/components/ui/sidebar/sidebar.script.d.ts +140 -0
  140. package/dist/components/ui/sidebar/sidebar.test.d.ts +1 -0
  141. package/dist/components/ui/slider/index.d.ts +2 -0
  142. package/dist/components/ui/slider/index.js +2 -0
  143. package/dist/components/ui/slider/index.js.map +7 -0
  144. package/dist/components/ui/slider/slider.css +51 -0
  145. package/dist/components/ui/slider/slider.d.ts +7 -0
  146. package/dist/components/ui/slider/slider.script.d.ts +102 -0
  147. package/dist/components/ui/spinbutton/index.d.ts +2 -0
  148. package/dist/components/ui/spinbutton/index.js +2 -0
  149. package/dist/components/ui/spinbutton/index.js.map +7 -0
  150. package/dist/components/ui/spinbutton/spinbutton.css +19 -0
  151. package/dist/components/ui/spinbutton/spinbutton.d.ts +4 -0
  152. package/dist/components/ui/spinbutton/spinbutton.script.d.ts +64 -0
  153. package/dist/components/ui/switch/index.d.ts +2 -0
  154. package/dist/components/ui/switch/index.js +2 -0
  155. package/dist/components/ui/switch/index.js.map +7 -0
  156. package/dist/components/ui/switch/switch.css +47 -0
  157. package/dist/components/ui/switch/switch.d.ts +4 -0
  158. package/dist/components/ui/switch/switch.script.d.ts +51 -0
  159. package/dist/components/ui/tabs/index.d.ts +2 -0
  160. package/dist/components/ui/tabs/index.js +2 -0
  161. package/dist/components/ui/tabs/index.js.map +7 -0
  162. package/dist/components/ui/tabs/tabs.css +28 -0
  163. package/dist/components/ui/tabs/tabs.d.ts +12 -0
  164. package/dist/components/ui/tabs/tabs.script.d.ts +54 -0
  165. package/dist/components/ui/textarea/index.d.ts +1 -0
  166. package/dist/components/ui/textarea/index.js +2 -0
  167. package/dist/components/ui/textarea/index.js.map +7 -0
  168. package/dist/components/ui/textarea/textarea.css +33 -0
  169. package/dist/components/ui/textarea/textarea.d.ts +23 -0
  170. package/dist/components/ui/toast/index.d.ts +5 -0
  171. package/dist/components/ui/toast/index.js +2 -0
  172. package/dist/components/ui/toast/index.js.map +7 -0
  173. package/dist/components/ui/toast/toast-api.d.ts +29 -0
  174. package/dist/components/ui/toast/toast-context.d.ts +59 -0
  175. package/dist/components/ui/toast/toast-state.d.ts +25 -0
  176. package/dist/components/ui/toast/toast.css +315 -0
  177. package/dist/components/ui/toast/toast.d.ts +8 -0
  178. package/dist/components/ui/toast/toast.script.d.ts +91 -0
  179. package/dist/components/ui/toast/toast.test.d.ts +2 -0
  180. package/dist/components/ui/toast/toaster.script.d.ts +79 -0
  181. package/dist/components/ui/toolbar/index.d.ts +2 -0
  182. package/dist/components/ui/toolbar/index.js +2 -0
  183. package/dist/components/ui/toolbar/index.js.map +7 -0
  184. package/dist/components/ui/toolbar/toolbar.css +16 -0
  185. package/dist/components/ui/toolbar/toolbar.d.ts +4 -0
  186. package/dist/components/ui/toolbar/toolbar.script.d.ts +30 -0
  187. package/dist/components/ui/tooltip/index.d.ts +2 -0
  188. package/dist/components/ui/tooltip/index.js +2 -0
  189. package/dist/components/ui/tooltip/index.js.map +7 -0
  190. package/dist/components/ui/tooltip/tooltip.css +25 -0
  191. package/dist/components/ui/tooltip/tooltip.d.ts +4 -0
  192. package/dist/components/ui/tooltip/tooltip.script.d.ts +70 -0
  193. package/dist/components/ui/tree/index.d.ts +2 -0
  194. package/dist/components/ui/tree/index.js +2 -0
  195. package/dist/components/ui/tree/index.js.map +7 -0
  196. package/dist/components/ui/tree/tree.css +54 -0
  197. package/dist/components/ui/tree/tree.d.ts +13 -0
  198. package/dist/components/ui/tree/tree.script.d.ts +45 -0
  199. package/dist/components/ui/treegrid/index.d.ts +2 -0
  200. package/dist/components/ui/treegrid/index.js +2 -0
  201. package/dist/components/ui/treegrid/index.js.map +7 -0
  202. package/dist/components/ui/treegrid/treegrid.css +77 -0
  203. package/dist/components/ui/treegrid/treegrid.d.ts +14 -0
  204. package/dist/components/ui/treegrid/treegrid.script.d.ts +49 -0
  205. package/dist/components/ui/window-splitter/index.d.ts +2 -0
  206. package/dist/components/ui/window-splitter/index.js +2 -0
  207. package/dist/components/ui/window-splitter/index.js.map +7 -0
  208. package/dist/components/ui/window-splitter/window-splitter.css +35 -0
  209. package/dist/components/ui/window-splitter/window-splitter.d.ts +8 -0
  210. package/dist/components/ui/window-splitter/window-splitter.script.d.ts +49 -0
  211. package/dist/index.d.ts +36 -0
  212. package/dist/index.js +2 -0
  213. package/dist/index.js.map +7 -0
  214. package/dist/lib/focusable-elements.d.ts +2 -0
  215. package/dist/lib/radiant-view.d.ts +17 -0
  216. package/dist/lib/roving-tabindex.d.ts +27 -0
  217. package/dist/styles/components/button.css +115 -0
  218. package/dist/styles/radiant-ui-core.css +7 -0
  219. package/dist/styles/radiant-ui.css +10 -0
  220. package/dist/styles/styles.css +36 -0
  221. package/dist/styles/tailwind.css +41 -0
  222. package/dist/styles/themes/aurora.css +19 -0
  223. package/dist/styles/themes/default-compact-soft.css +19 -0
  224. package/dist/styles/themes/default.css +2 -0
  225. package/dist/styles/themes/glacier.css +19 -0
  226. package/dist/styles/tokens/colors/aurora.css +73 -0
  227. package/dist/styles/tokens/colors/basalt.css +36 -0
  228. package/dist/styles/tokens/colors/glacier.css +45 -0
  229. package/dist/styles/tokens/colors/palettes.css +3 -0
  230. package/dist/styles/tokens/elevation/default.css +22 -0
  231. package/dist/styles/tokens/elevation/flat.css +22 -0
  232. package/dist/styles/tokens/motion/default.css +19 -0
  233. package/dist/styles/tokens/motion/snappy.css +19 -0
  234. package/dist/styles/tokens/presets/colors/aurora.css +126 -0
  235. package/dist/styles/tokens/presets/colors/basalt.css +126 -0
  236. package/dist/styles/tokens/presets/colors/ember.css +134 -0
  237. package/dist/styles/tokens/presets/colors/glacier.css +130 -0
  238. package/dist/styles/tokens/presets/colors/index.css +4 -0
  239. package/dist/styles/tokens/presets/radius.css +45 -0
  240. package/dist/styles/tokens/presets/spacing.css +57 -0
  241. package/dist/styles/tokens/radius/default.css +34 -0
  242. package/dist/styles/tokens/radius/edgy.css +35 -0
  243. package/dist/styles/tokens/radius/sharp.css +2 -0
  244. package/dist/styles/tokens/radius/soft.css +34 -0
  245. package/dist/styles/tokens/semantic.css +80 -0
  246. package/dist/styles/tokens/spacing/compact.css +23 -0
  247. package/dist/styles/tokens/spacing/default.css +23 -0
  248. package/dist/styles/tokens/spacing/scale-bridge.css +17 -0
  249. package/dist/styles/tokens/spacing/wide.css +23 -0
  250. package/dist/styles/tokens/system.css +36 -0
  251. package/dist/styles/tokens/typography/default.css +37 -0
  252. package/dist/styles/utilities/sheen.css +7 -0
  253. package/dist/types.d.ts +14 -0
  254. package/package.json +371 -0
package/dist/styles/tokens/presets/colors/aurora.css ADDED
@@ -0,0 +1,126 @@
1
+ /* Aurora (vivid) — `data-rui-colors="aurora"` */
2
+ html[data-rui-colors='aurora'] {
3
+ --gray-50: var(--color-pale-sky-50);
4
+ --gray-100: var(--color-pale-sky-100);
5
+ --gray-200: var(--color-pale-sky-200);
6
+ --gray-300: var(--color-pale-sky-300);
7
+ --gray-400: var(--color-pale-sky-400);
8
+ --gray-500: var(--color-pale-sky-500);
9
+ --gray-600: var(--color-pale-sky-600);
10
+ --gray-700: var(--color-pale-sky-700);
11
+ --gray-800: var(--color-pale-sky-800);
12
+ --gray-900: var(--color-pale-sky-900);
13
+ --gray-950: var(--color-pale-sky-950);
14
+
15
+ --primary: var(--color-havelock-blue-800);
16
+ --on-primary: var(--color-white);
17
+ --primary-container: var(--color-havelock-blue-100);
18
+ --on-primary-container: var(--color-havelock-blue-800);
19
+ --primary-light: var(--color-havelock-blue-500);
20
+ --primary-dark: var(--color-havelock-blue-900);
21
+
22
+ --secondary: var(--color-hit-pink-600);
23
+ --on-secondary: var(--color-black);
24
+ --secondary-container: var(--color-hit-pink-100);
25
+ --on-secondary-container: var(--color-hit-pink-800);
26
+ --secondary-light: var(--color-hit-pink-400);
27
+ --secondary-dark: var(--color-hit-pink-800);
28
+
29
+ --tertiary: var(--color-fruit-salad-700);
30
+ --on-tertiary: var(--color-white);
31
+ --tertiary-container: var(--color-fruit-salad-100);
32
+ --on-tertiary-container: var(--color-fruit-salad-800);
33
+
34
+ --error: var(--color-cardinal-600);
35
+ --on-error: var(--color-white);
36
+ --error-container: var(--color-cardinal-100);
37
+ --on-error-container: var(--color-cardinal-800);
38
+ --error-light: var(--color-cardinal-400);
39
+ --error-dark: var(--color-cardinal-800);
40
+
41
+ --success: var(--color-fruit-salad-600);
42
+ --on-success: var(--color-white);
43
+ --success-container: var(--color-fruit-salad-100);
44
+ --on-success-container: var(--color-fruit-salad-800);
45
+ --success-light: var(--color-fruit-salad-400);
46
+ --success-dark: var(--color-fruit-salad-800);
47
+
48
+ --neutral: var(--color-pale-sky-500);
49
+
50
+ --surface: var(--color-pale-sky-50);
51
+ --on-surface: var(--color-black);
52
+ --surface-container-lowest: var(--color-pale-sky-100);
53
+ --on-surface-container-lowest: var(--color-black);
54
+ --surface-container-low: var(--color-pale-sky-200);
55
+ --on-surface-container-low: var(--color-black);
56
+ --surface-container: var(--color-pale-sky-300);
57
+ --on-surface-container: var(--color-black);
58
+ --surface-container-high: var(--color-pale-sky-400);
59
+ --on-surface-container-high: var(--color-black);
60
+ --surface-container-highest: var(--color-pale-sky-500);
61
+ --on-surface-container-highest: var(--color-black);
62
+
63
+ --background: var(--color-white);
64
+ --on-background: var(--color-black);
65
+
66
+ --border: var(--color-pale-sky-400);
67
+ --focus-ring: var(--color-havelock-blue-500);
68
+ --link: var(--color-havelock-blue-700);
69
+ --overlay: oklch(0% 0 0 / 0.4);
70
+
71
+ --background-code: var(--color-pale-sky-900);
72
+ --on-background-code: var(--color-fruit-salad-300);
73
+ }
74
+
75
+ html.dark[data-rui-colors='aurora'] {
76
+ --primary: var(--color-havelock-blue-200);
77
+ --on-primary: var(--color-black);
78
+ --primary-container: var(--color-havelock-blue-800);
79
+ --on-primary-container: var(--color-havelock-blue-50);
80
+ --primary-light: var(--color-havelock-blue-300);
81
+ --primary-dark: var(--color-havelock-blue-900);
82
+
83
+ --secondary: var(--color-hit-pink-200);
84
+ --on-secondary: var(--color-black);
85
+ --secondary-container: var(--color-hit-pink-800);
86
+ --on-secondary-container: var(--color-hit-pink-50);
87
+
88
+ --tertiary: var(--color-fruit-salad-200);
89
+ --on-tertiary: var(--color-black);
90
+ --tertiary-container: var(--color-fruit-salad-800);
91
+ --on-tertiary-container: var(--color-fruit-salad-50);
92
+
93
+ --error: var(--color-cardinal-200);
94
+ --on-error: var(--color-black);
95
+ --error-container: var(--color-cardinal-800);
96
+ --on-error-container: var(--color-cardinal-50);
97
+
98
+ --success: var(--color-fruit-salad-200);
99
+ --on-success: var(--color-black);
100
+ --success-container: var(--color-fruit-salad-800);
101
+ --on-success-container: var(--color-fruit-salad-50);
102
+
103
+ --surface: var(--color-pale-sky-975);
104
+ --on-surface: var(--color-white);
105
+ --surface-container-lowest: var(--color-pale-sky-950);
106
+ --on-surface-container-lowest: var(--color-white);
107
+ --surface-container-low: var(--color-pale-sky-900);
108
+ --on-surface-container-low: var(--color-white);
109
+ --surface-container: var(--color-pale-sky-800);
110
+ --on-surface-container: var(--color-white);
111
+ --surface-container-high: var(--color-pale-sky-700);
112
+ --on-surface-container-high: var(--color-white);
113
+ --surface-container-highest: var(--color-pale-sky-600);
114
+ --on-surface-container-highest: var(--color-white);
115
+
116
+ --background: var(--color-black);
117
+ --on-background: var(--color-white);
118
+
119
+ --border: var(--color-pale-sky-700);
120
+ --focus-ring: var(--color-havelock-blue-400);
121
+ --link: var(--color-havelock-blue-300);
122
+ --overlay: oklch(0% 0 0 / 0.6);
123
+
124
+ --background-code: var(--color-pale-sky-950);
125
+ --on-background-code: var(--color-fruit-salad-200);
126
+ }
package/dist/styles/tokens/presets/colors/basalt.css ADDED
@@ -0,0 +1,126 @@
1
+ /* Basalt (Carbon-inspired) — `data-rui-colors="basalt"` */
2
+ html[data-rui-colors='basalt'] {
3
+ --gray-50: var(--color-basalt-50);
4
+ --gray-100: var(--color-basalt-100);
5
+ --gray-200: var(--color-basalt-200);
6
+ --gray-300: var(--color-basalt-300);
7
+ --gray-400: var(--color-basalt-400);
8
+ --gray-500: var(--color-basalt-500);
9
+ --gray-600: var(--color-basalt-600);
10
+ --gray-700: var(--color-basalt-700);
11
+ --gray-800: var(--color-basalt-800);
12
+ --gray-900: var(--color-basalt-900);
13
+ --gray-950: var(--color-basalt-950);
14
+
15
+ --primary: var(--color-carbon-blue-500);
16
+ --on-primary: var(--color-white);
17
+ --primary-container: var(--color-carbon-blue-100);
18
+ --on-primary-container: var(--color-carbon-blue-800);
19
+ --primary-light: var(--color-carbon-blue-400);
20
+ --primary-dark: var(--color-carbon-blue-700);
21
+
22
+ --secondary: var(--color-carbon-teal-600);
23
+ --on-secondary: var(--color-white);
24
+ --secondary-container: var(--color-basalt-200);
25
+ --on-secondary-container: var(--color-basalt-900);
26
+ --secondary-light: var(--color-carbon-teal-400);
27
+ --secondary-dark: var(--color-basalt-800);
28
+
29
+ --tertiary: var(--color-basalt-700);
30
+ --on-tertiary: var(--color-white);
31
+ --tertiary-container: var(--color-basalt-200);
32
+ --on-tertiary-container: var(--color-basalt-900);
33
+
34
+ --error: var(--color-carbon-red-600);
35
+ --on-error: var(--color-white);
36
+ --error-container: var(--color-carbon-red-100);
37
+ --on-error-container: var(--color-carbon-red-800);
38
+ --error-light: var(--color-carbon-red-500);
39
+ --error-dark: var(--color-carbon-red-800);
40
+
41
+ --success: var(--color-carbon-teal-600);
42
+ --on-success: var(--color-white);
43
+ --success-container: var(--color-basalt-200);
44
+ --on-success-container: var(--color-basalt-900);
45
+ --success-light: var(--color-carbon-teal-400);
46
+ --success-dark: var(--color-basalt-800);
47
+
48
+ --neutral: var(--color-basalt-500);
49
+
50
+ --surface: var(--color-basalt-100);
51
+ --on-surface: var(--color-basalt-900);
52
+ --surface-container-lowest: var(--color-basalt-100);
53
+ --on-surface-container-lowest: var(--color-basalt-900);
54
+ --surface-container-low: var(--color-basalt-200);
55
+ --on-surface-container-low: var(--color-basalt-900);
56
+ --surface-container: var(--color-basalt-300);
57
+ --on-surface-container: var(--color-basalt-900);
58
+ --surface-container-high: var(--color-basalt-400);
59
+ --on-surface-container-high: var(--color-basalt-950);
60
+ --surface-container-highest: var(--color-basalt-500);
61
+ --on-surface-container-highest: var(--color-basalt-950);
62
+
63
+ --background: var(--color-basalt-50);
64
+ --on-background: var(--color-basalt-900);
65
+
66
+ --border: var(--color-basalt-400);
67
+ --focus-ring: var(--color-carbon-blue-500);
68
+ --link: var(--color-carbon-blue-600);
69
+ --overlay: oklch(0% 0 0 / 0.5);
70
+
71
+ --background-code: var(--color-basalt-900);
72
+ --on-background-code: var(--color-carbon-teal-400);
73
+ }
74
+
75
+ html.dark[data-rui-colors='basalt'] {
76
+ --primary: var(--color-carbon-blue-400);
77
+ --on-primary: var(--color-basalt-950);
78
+ --primary-container: var(--color-carbon-blue-800);
79
+ --on-primary-container: var(--color-carbon-blue-100);
80
+ --primary-light: var(--color-carbon-blue-300);
81
+ --primary-dark: var(--color-carbon-blue-700);
82
+
83
+ --secondary: var(--color-carbon-teal-400);
84
+ --on-secondary: var(--color-basalt-950);
85
+ --secondary-container: var(--color-basalt-800);
86
+ --on-secondary-container: var(--color-basalt-100);
87
+
88
+ --tertiary: var(--color-basalt-300);
89
+ --on-tertiary: var(--color-basalt-950);
90
+ --tertiary-container: var(--color-basalt-800);
91
+ --on-tertiary-container: var(--color-basalt-100);
92
+
93
+ --error: var(--color-carbon-red-500);
94
+ --on-error: var(--color-basalt-950);
95
+ --error-container: var(--color-carbon-red-800);
96
+ --on-error-container: var(--color-carbon-red-100);
97
+
98
+ --success: var(--color-carbon-teal-400);
99
+ --on-success: var(--color-basalt-950);
100
+ --success-container: var(--color-basalt-800);
101
+ --on-success-container: var(--color-basalt-100);
102
+
103
+ --surface: var(--color-basalt-975);
104
+ --on-surface: var(--color-basalt-50);
105
+ --surface-container-lowest: var(--color-basalt-950);
106
+ --on-surface-container-lowest: var(--color-basalt-50);
107
+ --surface-container-low: var(--color-basalt-900);
108
+ --on-surface-container-low: var(--color-basalt-50);
109
+ --surface-container: var(--color-basalt-800);
110
+ --on-surface-container: var(--color-basalt-50);
111
+ --surface-container-high: var(--color-basalt-700);
112
+ --on-surface-container-high: var(--color-basalt-50);
113
+ --surface-container-highest: var(--color-basalt-600);
114
+ --on-surface-container-highest: var(--color-basalt-50);
115
+
116
+ --background: var(--color-basalt-950);
117
+ --on-background: var(--color-basalt-50);
118
+
119
+ --border: var(--color-basalt-700);
120
+ --focus-ring: var(--color-carbon-blue-400);
121
+ --link: var(--color-carbon-blue-400);
122
+ --overlay: oklch(0% 0 0 / 0.7);
123
+
124
+ --background-code: var(--color-basalt-975);
125
+ --on-background-code: var(--color-carbon-teal-400);
126
+ }
package/dist/styles/tokens/presets/colors/ember.css ADDED
@@ -0,0 +1,134 @@
1
+ /* Ember (warm accent on glacier neutrals) — `data-rui-colors="ember"` */
2
+ html[data-rui-colors='ember'] {
3
+ --gray-50: var(--color-glacier-white-50);
4
+ --gray-100: var(--color-glacier-white-100);
5
+ --gray-200: var(--color-glacier-white-200);
6
+ --gray-300: var(--color-glacier-white-300);
7
+ --gray-400: var(--color-glacier-white-400);
8
+ --gray-500: var(--color-glacier-white-500);
9
+ --gray-600: var(--color-glacier-white-600);
10
+ --gray-700: var(--color-glacier-white-700);
11
+ --gray-800: var(--color-glacier-white-800);
12
+ --gray-900: var(--color-glacier-white-900);
13
+ --gray-950: var(--color-glacier-white-950);
14
+
15
+ --primary: var(--color-scarlet-600);
16
+ --on-primary: var(--color-glacier-white-50);
17
+ --primary-container: var(--color-scarlet-100);
18
+ --on-primary-container: var(--color-scarlet-900);
19
+ --primary-light: var(--color-scarlet-400);
20
+ --primary-dark: var(--color-scarlet-800);
21
+
22
+ --secondary: var(--color-night-sky-600);
23
+ --on-secondary: var(--color-glacier-white-50);
24
+ --secondary-container: var(--color-night-sky-100);
25
+ --on-secondary-container: var(--color-night-sky-900);
26
+ --secondary-light: var(--color-night-sky-400);
27
+ --secondary-dark: var(--color-night-sky-800);
28
+
29
+ --tertiary: var(--color-laser-lemon-800);
30
+ --on-tertiary: var(--color-glacier-white-50);
31
+ --tertiary-container: var(--color-glacier-white-200);
32
+ --on-tertiary-container: var(--color-glacier-white-900);
33
+
34
+ --error: var(--color-scarlet-700);
35
+ --on-error: var(--color-glacier-white-50);
36
+ --error-container: var(--color-scarlet-100);
37
+ --on-error-container: var(--color-scarlet-900);
38
+ --error-light: var(--color-scarlet-500);
39
+ --error-dark: var(--color-scarlet-900);
40
+
41
+ --success: var(--color-night-sky-600);
42
+ --on-success: var(--color-glacier-white-50);
43
+ --success-container: var(--color-night-sky-100);
44
+ --on-success-container: var(--color-night-sky-900);
45
+ --success-light: var(--color-night-sky-400);
46
+ --success-dark: var(--color-night-sky-800);
47
+
48
+ --neutral: var(--color-glacier-white-500);
49
+
50
+ --surface: var(--color-glacier-white-100);
51
+ --on-surface: var(--color-glacier-white-900);
52
+ --surface-container-lowest: var(--color-glacier-white-100);
53
+ --on-surface-container-lowest: var(--color-glacier-white-900);
54
+ --surface-container-low: var(--color-glacier-white-200);
55
+ --on-surface-container-low: var(--color-glacier-white-900);
56
+ --surface-container: var(--color-glacier-white-300);
57
+ --on-surface-container: var(--color-glacier-white-900);
58
+ --surface-container-high: var(--color-glacier-white-400);
59
+ --on-surface-container-high: var(--color-glacier-white-900);
60
+ --surface-container-highest: var(--color-glacier-white-500);
61
+ --on-surface-container-highest: var(--color-glacier-white-950);
62
+
63
+ --background: var(--color-glacier-white-50);
64
+ --on-background: var(--color-glacier-white-900);
65
+
66
+ --border: color-mix(in oklab, var(--color-glacier-white-900) 12%, transparent);
67
+ --focus-ring: var(--color-scarlet-500);
68
+ --link: var(--color-scarlet-700);
69
+ --overlay: oklch(0% 0 0 / 0.42);
70
+
71
+ --background-code: var(--color-glacier-white-100);
72
+ --on-background-code: var(--color-scarlet-800);
73
+ }
74
+
75
+ html.dark[data-rui-colors='ember'] {
76
+ --primary: var(--color-scarlet-400);
77
+ --on-primary: var(--color-glacier-white-950);
78
+ --primary-container: var(--color-scarlet-800);
79
+ --on-primary-container: var(--color-scarlet-100);
80
+ --primary-light: var(--color-scarlet-300);
81
+ --primary-dark: var(--color-scarlet-800);
82
+
83
+ --secondary: var(--color-night-sky-400);
84
+ --on-secondary: var(--color-glacier-white-950);
85
+ --secondary-container: var(--color-night-sky-800);
86
+ --on-secondary-container: var(--color-night-sky-100);
87
+ --secondary-light: var(--color-night-sky-300);
88
+ --secondary-dark: var(--color-night-sky-700);
89
+
90
+ --tertiary: var(--color-laser-lemon-300);
91
+ --on-tertiary: var(--color-glacier-white-950);
92
+ --tertiary-container: var(--color-glacier-white-800);
93
+ --on-tertiary-container: var(--color-laser-lemon-300);
94
+
95
+ --error: var(--color-scarlet-500);
96
+ --on-error: var(--color-glacier-white-950);
97
+ --error-container: var(--color-scarlet-800);
98
+ --on-error-container: var(--color-scarlet-100);
99
+ --error-light: var(--color-scarlet-400);
100
+ --error-dark: var(--color-scarlet-900);
101
+
102
+ --success: var(--color-night-sky-400);
103
+ --on-success: var(--color-glacier-white-950);
104
+ --success-container: var(--color-night-sky-800);
105
+ --on-success-container: var(--color-night-sky-100);
106
+ --success-light: var(--color-night-sky-300);
107
+ --success-dark: var(--color-night-sky-700);
108
+
109
+ --neutral: var(--color-glacier-white-500);
110
+
111
+ --surface: var(--color-glacier-white-900);
112
+ --on-surface: var(--color-glacier-white-50);
113
+ --surface-container-lowest: var(--color-glacier-white-950);
114
+ --on-surface-container-lowest: var(--color-glacier-white-50);
115
+ --surface-container-low: var(--color-glacier-white-900);
116
+ --on-surface-container-low: var(--color-glacier-white-50);
117
+ --surface-container: var(--color-glacier-white-800);
118
+ --on-surface-container: var(--color-glacier-white-50);
119
+ --surface-container-high: var(--color-glacier-white-700);
120
+ --on-surface-container-high: var(--color-glacier-white-50);
121
+ --surface-container-highest: var(--color-glacier-white-600);
122
+ --on-surface-container-highest: var(--color-glacier-white-50);
123
+
124
+ --background: var(--color-glacier-white-950);
125
+ --on-background: var(--color-glacier-white-50);
126
+
127
+ --border: color-mix(in oklab, var(--color-glacier-white-50) 16%, transparent);
128
+ --focus-ring: var(--color-scarlet-400);
129
+ --link: var(--color-scarlet-400);
130
+ --overlay: oklch(0% 0 0 / 0.62);
131
+
132
+ --background-code: var(--color-glacier-white-900);
133
+ --on-background-code: var(--color-scarlet-300);
134
+ }
package/dist/styles/tokens/presets/colors/glacier.css ADDED
@@ -0,0 +1,130 @@
1
+ /* Glacier (docs) — `data-rui-colors="glacier"` or default */
2
+ html[data-rui-colors='glacier'],
3
+ html:not([data-rui-colors]) {
4
+ --gray-50: var(--color-glacier-white-50);
5
+ --gray-100: var(--color-glacier-white-100);
6
+ --gray-200: var(--color-glacier-white-200);
7
+ --gray-300: var(--color-glacier-white-300);
8
+ --gray-400: var(--color-glacier-white-400);
9
+ --gray-500: var(--color-glacier-white-500);
10
+ --gray-600: var(--color-glacier-white-600);
11
+ --gray-700: var(--color-glacier-white-700);
12
+ --gray-800: var(--color-glacier-white-800);
13
+ --gray-900: var(--color-glacier-white-900);
14
+ --gray-950: var(--color-glacier-white-950);
15
+
16
+ --primary: var(--color-night-sky-500);
17
+ --on-primary: var(--color-glacier-white-50);
18
+ --primary-container: var(--color-night-sky-100);
19
+ --on-primary-container: var(--color-night-sky-900);
20
+ --primary-light: var(--color-night-sky-400);
21
+ --primary-dark: var(--color-night-sky-700);
22
+
23
+ --secondary: var(--color-scarlet-500);
24
+ --on-secondary: var(--color-glacier-white-50);
25
+ --secondary-container: var(--color-scarlet-100);
26
+ --on-secondary-container: var(--color-scarlet-900);
27
+ --secondary-light: var(--color-scarlet-400);
28
+ --secondary-dark: var(--color-scarlet-700);
29
+
30
+ --tertiary: var(--color-navy-blue-700);
31
+ --on-tertiary: var(--color-glacier-white-50);
32
+ --tertiary-container: var(--color-night-sky-100);
33
+ --on-tertiary-container: var(--color-navy-blue-700);
34
+
35
+ --error: var(--color-scarlet-600);
36
+ --on-error: var(--color-glacier-white-50);
37
+ --error-container: var(--color-scarlet-100);
38
+ --on-error-container: var(--color-scarlet-900);
39
+ --error-light: var(--color-scarlet-400);
40
+ --error-dark: var(--color-scarlet-800);
41
+
42
+ --success: var(--color-night-sky-600);
43
+ --on-success: var(--color-glacier-white-50);
44
+ --success-container: var(--color-night-sky-100);
45
+ --on-success-container: var(--color-night-sky-900);
46
+ --success-light: var(--color-night-sky-400);
47
+ --success-dark: var(--color-night-sky-800);
48
+
49
+ --neutral: var(--color-glacier-white-500);
50
+
51
+ --surface: var(--color-glacier-white-100);
52
+ --on-surface: var(--color-glacier-white-900);
53
+ --surface-container-lowest: var(--color-glacier-white-100);
54
+ --on-surface-container-lowest: var(--color-glacier-white-900);
55
+ --surface-container-low: var(--color-glacier-white-200);
56
+ --on-surface-container-low: var(--color-glacier-white-900);
57
+ --surface-container: var(--color-glacier-white-300);
58
+ --on-surface-container: var(--color-glacier-white-900);
59
+ --surface-container-high: var(--color-glacier-white-400);
60
+ --on-surface-container-high: var(--color-glacier-white-900);
61
+ --surface-container-highest: var(--color-glacier-white-500);
62
+ --on-surface-container-highest: var(--color-glacier-white-950);
63
+
64
+ --background: var(--color-glacier-white-50);
65
+ --on-background: var(--color-glacier-white-900);
66
+
67
+ --border: color-mix(in oklab, var(--color-glacier-white-900) 15%, transparent);
68
+ --focus-ring: var(--color-night-sky-500);
69
+ --link: var(--color-navy-blue-700);
70
+ --overlay: oklch(0% 0 0 / 0.45);
71
+
72
+ --background-code: var(--color-glacier-white-100);
73
+ --on-background-code: var(--color-laser-lemon-800);
74
+ }
75
+
76
+ html.dark[data-rui-colors='glacier'],
77
+ html.dark:not([data-rui-colors]) {
78
+ --primary: var(--color-night-sky-400);
79
+ --on-primary: var(--color-glacier-white-950);
80
+ --primary-container: var(--color-night-sky-800);
81
+ --on-primary-container: var(--color-night-sky-50);
82
+ --primary-light: var(--color-night-sky-300);
83
+ --primary-dark: var(--color-night-sky-600);
84
+
85
+ --secondary: var(--color-scarlet-500);
86
+ --on-secondary: var(--color-glacier-white-950);
87
+ --secondary-container: var(--color-scarlet-800);
88
+ --on-secondary-container: var(--color-scarlet-100);
89
+ --secondary-light: var(--color-scarlet-400);
90
+ --secondary-dark: var(--color-scarlet-700);
91
+
92
+ --tertiary: var(--color-navy-blue-400);
93
+ --on-tertiary: var(--color-glacier-white-950);
94
+ --tertiary-container: var(--color-night-sky-800);
95
+ --on-tertiary-container: var(--color-navy-blue-400);
96
+
97
+ --error: var(--color-scarlet-500);
98
+ --on-error: var(--color-glacier-white-950);
99
+ --error-container: var(--color-scarlet-800);
100
+ --on-error-container: var(--color-scarlet-100);
101
+
102
+ --success: var(--color-night-sky-400);
103
+ --on-success: var(--color-glacier-white-950);
104
+ --success-container: var(--color-night-sky-800);
105
+ --on-success-container: var(--color-night-sky-100);
106
+
107
+ --surface: var(--color-glacier-white-900);
108
+ --on-surface: var(--color-glacier-white-50);
109
+ --surface-container-lowest: var(--color-glacier-white-950);
110
+ --on-surface-container-lowest: var(--color-glacier-white-50);
111
+ --surface-container-low: var(--color-glacier-white-900);
112
+ --on-surface-container-low: var(--color-glacier-white-50);
113
+ --surface-container: var(--color-glacier-white-800);
114
+ --on-surface-container: var(--color-glacier-white-50);
115
+ --surface-container-high: var(--color-glacier-white-700);
116
+ --on-surface-container-high: var(--color-glacier-white-50);
117
+ --surface-container-highest: var(--color-glacier-white-600);
118
+ --on-surface-container-highest: var(--color-glacier-white-50);
119
+
120
+ --background: var(--color-glacier-white-950);
121
+ --on-background: var(--color-glacier-white-50);
122
+
123
+ --border: color-mix(in oklab, var(--color-glacier-white-50) 18%, transparent);
124
+ --focus-ring: var(--color-night-sky-400);
125
+ --link: var(--color-navy-blue-400);
126
+ --overlay: oklch(0% 0 0 / 0.65);
127
+
128
+ --background-code: var(--color-glacier-white-900);
129
+ --on-background-code: var(--color-laser-lemon-300);
130
+ }
package/dist/styles/tokens/presets/colors/index.css ADDED
@@ -0,0 +1,4 @@
1
+ @import './glacier.css';
2
+ @import './aurora.css';
3
+ @import './basalt.css';
4
+ @import './ember.css';
package/dist/styles/tokens/presets/radius.css ADDED
@@ -0,0 +1,45 @@
1
+ /**
2
+ * Storybook radius toggles — `data-rui-radius` on `<html>`.
3
+ */
4
+ html[data-rui-radius='default'],
5
+ html:not([data-rui-radius]) {
6
+ --border-radius-xs: 0.125rem;
7
+ --border-radius-sm: 0.25rem;
8
+ --border-radius-md: 0.375rem;
9
+ --border-radius-lg: 0.5rem;
10
+ --border-radius-xl: 0.75rem;
11
+ --border-radius-2xl: 1rem;
12
+ --border-radius-3xl: 1.5rem;
13
+ --border-radius-full: 9999px;
14
+ --radius-control: var(--border-radius-sm);
15
+ --radius-container: var(--border-radius-md);
16
+ --radius-pill: var(--border-radius-full);
17
+ }
18
+
19
+ html[data-rui-radius='soft'] {
20
+ --border-radius-xs: 0.25rem;
21
+ --border-radius-sm: 0.5rem;
22
+ --border-radius-md: 0.75rem;
23
+ --border-radius-lg: 1rem;
24
+ --border-radius-xl: 1.25rem;
25
+ --border-radius-2xl: 1.5rem;
26
+ --border-radius-3xl: 2rem;
27
+ --border-radius-full: 9999px;
28
+ --radius-control: var(--border-radius-md);
29
+ --radius-container: var(--border-radius-lg);
30
+ --radius-pill: var(--border-radius-full);
31
+ }
32
+
33
+ html[data-rui-radius='sharp'] {
34
+ --border-radius-xs: 0;
35
+ --border-radius-sm: 0;
36
+ --border-radius-md: 0;
37
+ --border-radius-lg: 0;
38
+ --border-radius-xl: 0;
39
+ --border-radius-2xl: 0;
40
+ --border-radius-3xl: 0;
41
+ --border-radius-full: 9999px;
42
+ --radius-control: 0;
43
+ --radius-container: 0;
44
+ --radius-pill: var(--border-radius-full);
45
+ }
package/dist/styles/tokens/presets/spacing.css ADDED
@@ -0,0 +1,57 @@
1
+ /**
2
+ * Storybook spacing toggles — `data-rui-spacing` on `<html>`.
3
+ */
4
+ html[data-rui-spacing='default'],
5
+ html:not([data-rui-spacing]) {
6
+ --space-1: 0.25rem;
7
+ --space-2: 0.5rem;
8
+ --space-3: 0.75rem;
9
+ --space-4: 1rem;
10
+ --space-5: 1.25rem;
11
+ --space-6: 1.5rem;
12
+ --space-8: 2rem;
13
+ --space-10: 2.5rem;
14
+ --space-12: 3rem;
15
+ --space-16: 4rem;
16
+ --space-control-x: var(--space-3);
17
+ --space-control-y: var(--space-2);
18
+ --space-inline: var(--space-2);
19
+ --space-stack: var(--space-4);
20
+ --space-inset: var(--space-4);
21
+ }
22
+
23
+ html[data-rui-spacing='compact'] {
24
+ --space-1: 0.125rem;
25
+ --space-2: 0.25rem;
26
+ --space-3: 0.375rem;
27
+ --space-4: 0.5rem;
28
+ --space-5: 0.625rem;
29
+ --space-6: 0.75rem;
30
+ --space-8: 1rem;
31
+ --space-10: 1.25rem;
32
+ --space-12: 1.5rem;
33
+ --space-16: 2rem;
34
+ --space-control-x: var(--space-2);
35
+ --space-control-y: var(--space-1);
36
+ --space-inline: var(--space-1);
37
+ --space-stack: var(--space-3);
38
+ --space-inset: var(--space-3);
39
+ }
40
+
41
+ html[data-rui-spacing='wide'] {
42
+ --space-1: 0.375rem;
43
+ --space-2: 0.625rem;
44
+ --space-3: 0.875rem;
45
+ --space-4: 1.25rem;
46
+ --space-5: 1.5rem;
47
+ --space-6: 1.875rem;
48
+ --space-8: 2.5rem;
49
+ --space-10: 3rem;
50
+ --space-12: 3.75rem;
51
+ --space-16: 5rem;
52
+ --space-control-x: var(--space-4);
53
+ --space-control-y: var(--space-3);
54
+ --space-inline: var(--space-3);
55
+ --space-stack: var(--space-6);
56
+ --space-inset: var(--space-6);
57
+ }
package/dist/styles/tokens/radius/default.css ADDED
@@ -0,0 +1,34 @@
1
+ /**
2
+ * Default radius pack.
3
+ */
4
+ :root {
5
+ --border-radius-none: 0;
6
+ --border-radius-xs: 0.125rem;
7
+ --border-radius-sm: 0.25rem;
8
+ --border-radius-md: 0.375rem;
9
+ --border-radius-lg: 0.5rem;
10
+ --border-radius-xl: 0.75rem;
11
+ --border-radius-2xl: 1rem;
12
+ --border-radius-3xl: 1.5rem;
13
+ --border-radius-full: 9999px;
14
+
15
+ --radius-control: var(--border-radius-sm);
16
+ --radius-container: var(--border-radius-md);
17
+ --radius-pill: var(--border-radius-full);
18
+ }
19
+
20
+ @theme {
21
+ --radius-none: var(--border-radius-none);
22
+ --radius-xs: var(--border-radius-xs);
23
+ --radius-sm: var(--border-radius-sm);
24
+ --radius-md: var(--border-radius-md);
25
+ --radius-lg: var(--border-radius-lg);
26
+ --radius-xl: var(--border-radius-xl);
27
+ --radius-2xl: var(--border-radius-2xl);
28
+ --radius-3xl: var(--border-radius-3xl);
29
+ --radius-full: var(--border-radius-full);
30
+ --radius-control: var(--radius-control);
31
+ --radius-container: var(--radius-container);
32
+ --radius-pill: var(--radius-pill);
33
+ --radius-button: var(--radius-control);
34
+ }
package/dist/styles/tokens/radius/edgy.css ADDED
@@ -0,0 +1,35 @@
1
+ /**
2
+ * Sharp radius pack ? square corners (public name; token file `edgy.css`).
3
+ * Controls and containers use 0 radius; pills stay fully rounded.
4
+ */
5
+ :root {
6
+ --border-radius-none: 0;
7
+ --border-radius-xs: 0;
8
+ --border-radius-sm: 0;
9
+ --border-radius-md: 0;
10
+ --border-radius-lg: 0;
11
+ --border-radius-xl: 0;
12
+ --border-radius-2xl: 0;
13
+ --border-radius-3xl: 0;
14
+ --border-radius-full: 9999px;
15
+
16
+ --radius-control: 0;
17
+ --radius-container: 0;
18
+ --radius-pill: var(--border-radius-full);
19
+ }
20
+
21
+ @theme {
22
+ --radius-none: var(--border-radius-none);
23
+ --radius-xs: var(--border-radius-xs);
24
+ --radius-sm: var(--border-radius-sm);
25
+ --radius-md: var(--border-radius-md);
26
+ --radius-lg: var(--border-radius-lg);
27
+ --radius-xl: var(--border-radius-xl);
28
+ --radius-2xl: var(--border-radius-2xl);
29
+ --radius-3xl: var(--border-radius-3xl);
30
+ --radius-full: var(--border-radius-full);
31
+ --radius-control: var(--radius-control);
32
+ --radius-container: var(--radius-container);
33
+ --radius-pill: var(--radius-pill);
34
+ --radius-button: var(--radius-control);
35
+ }