@deepfuture/dui-theme-default 0.0.1

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 (168) hide show
  1. package/base.d.ts +6 -0
  2. package/base.js +13 -0
  3. package/components/accordion-item.d.ts +1 -0
  4. package/components/accordion-item.js +89 -0
  5. package/components/accordion.d.ts +1 -0
  6. package/components/accordion.js +6 -0
  7. package/components/alert-dialog-popup.d.ts +1 -0
  8. package/components/alert-dialog-popup.js +72 -0
  9. package/components/alert-dialog.d.ts +1 -0
  10. package/components/alert-dialog.js +2 -0
  11. package/components/avatar.d.ts +1 -0
  12. package/components/avatar.js +22 -0
  13. package/components/badge.d.ts +1 -0
  14. package/components/badge.js +58 -0
  15. package/components/breadcrumb-ellipsis.d.ts +1 -0
  16. package/components/breadcrumb-ellipsis.js +7 -0
  17. package/components/breadcrumb-item.d.ts +1 -0
  18. package/components/breadcrumb-item.js +6 -0
  19. package/components/breadcrumb-link.d.ts +1 -0
  20. package/components/breadcrumb-link.js +16 -0
  21. package/components/breadcrumb-page.d.ts +1 -0
  22. package/components/breadcrumb-page.js +7 -0
  23. package/components/breadcrumb-separator.d.ts +1 -0
  24. package/components/breadcrumb-separator.js +7 -0
  25. package/components/breadcrumb.d.ts +1 -0
  26. package/components/breadcrumb.js +9 -0
  27. package/components/button.d.ts +1 -0
  28. package/components/button.js +137 -0
  29. package/components/calendar.d.ts +1 -0
  30. package/components/calendar.js +88 -0
  31. package/components/center.d.ts +1 -0
  32. package/components/center.js +2 -0
  33. package/components/checkbox-group.d.ts +1 -0
  34. package/components/checkbox-group.js +10 -0
  35. package/components/checkbox.d.ts +1 -0
  36. package/components/checkbox.js +53 -0
  37. package/components/collapsible.d.ts +1 -0
  38. package/components/collapsible.js +80 -0
  39. package/components/combobox.d.ts +1 -0
  40. package/components/combobox.js +99 -0
  41. package/components/command-empty.d.ts +1 -0
  42. package/components/command-empty.js +8 -0
  43. package/components/command-group.d.ts +1 -0
  44. package/components/command-group.js +13 -0
  45. package/components/command-input.d.ts +1 -0
  46. package/components/command-input.js +24 -0
  47. package/components/command-item.d.ts +1 -0
  48. package/components/command-item.js +24 -0
  49. package/components/command-list.d.ts +1 -0
  50. package/components/command-list.js +11 -0
  51. package/components/command-separator.d.ts +1 -0
  52. package/components/command-separator.js +8 -0
  53. package/components/command-shortcut.d.ts +1 -0
  54. package/components/command-shortcut.js +7 -0
  55. package/components/command.d.ts +1 -0
  56. package/components/command.js +8 -0
  57. package/components/data-table.d.ts +1 -0
  58. package/components/data-table.js +113 -0
  59. package/components/dialog-popup.d.ts +1 -0
  60. package/components/dialog-popup.js +72 -0
  61. package/components/dialog.d.ts +1 -0
  62. package/components/dialog.js +2 -0
  63. package/components/dropzone.d.ts +1 -0
  64. package/components/dropzone.js +32 -0
  65. package/components/hstack.d.ts +1 -0
  66. package/components/hstack.js +2 -0
  67. package/components/input.d.ts +1 -0
  68. package/components/input.js +53 -0
  69. package/components/link.d.ts +1 -0
  70. package/components/link.js +2 -0
  71. package/components/menu-item.d.ts +1 -0
  72. package/components/menu-item.js +36 -0
  73. package/components/menu.d.ts +1 -0
  74. package/components/menu.js +2 -0
  75. package/components/menubar.d.ts +1 -0
  76. package/components/menubar.js +10 -0
  77. package/components/number-field.d.ts +1 -0
  78. package/components/number-field.js +55 -0
  79. package/components/page-inset.d.ts +1 -0
  80. package/components/page-inset.js +2 -0
  81. package/components/popover-popup.d.ts +1 -0
  82. package/components/popover-popup.js +2 -0
  83. package/components/popover.d.ts +1 -0
  84. package/components/popover.js +2 -0
  85. package/components/portal.d.ts +1 -0
  86. package/components/portal.js +2 -0
  87. package/components/preview-card-popup.d.ts +1 -0
  88. package/components/preview-card-popup.js +2 -0
  89. package/components/preview-card.d.ts +1 -0
  90. package/components/preview-card.js +2 -0
  91. package/components/progress.d.ts +1 -0
  92. package/components/progress.js +32 -0
  93. package/components/radio-group.d.ts +1 -0
  94. package/components/radio-group.js +6 -0
  95. package/components/radio.d.ts +1 -0
  96. package/components/radio.js +47 -0
  97. package/components/scroll-area.d.ts +1 -0
  98. package/components/scroll-area.js +45 -0
  99. package/components/select.d.ts +1 -0
  100. package/components/select.js +44 -0
  101. package/components/separator.d.ts +1 -0
  102. package/components/separator.js +17 -0
  103. package/components/sidebar-content.d.ts +1 -0
  104. package/components/sidebar-content.js +2 -0
  105. package/components/sidebar-footer.d.ts +1 -0
  106. package/components/sidebar-footer.js +2 -0
  107. package/components/sidebar-group-label.d.ts +1 -0
  108. package/components/sidebar-group-label.js +19 -0
  109. package/components/sidebar-group.d.ts +1 -0
  110. package/components/sidebar-group.js +6 -0
  111. package/components/sidebar-header.d.ts +1 -0
  112. package/components/sidebar-header.js +6 -0
  113. package/components/sidebar-inset.d.ts +1 -0
  114. package/components/sidebar-inset.js +2 -0
  115. package/components/sidebar-menu-button.d.ts +1 -0
  116. package/components/sidebar-menu-button.js +82 -0
  117. package/components/sidebar-menu-item.d.ts +1 -0
  118. package/components/sidebar-menu-item.js +2 -0
  119. package/components/sidebar-menu.d.ts +1 -0
  120. package/components/sidebar-menu.js +6 -0
  121. package/components/sidebar-provider.d.ts +1 -0
  122. package/components/sidebar-provider.js +28 -0
  123. package/components/sidebar-separator.d.ts +1 -0
  124. package/components/sidebar-separator.js +8 -0
  125. package/components/sidebar-trigger.d.ts +1 -0
  126. package/components/sidebar-trigger.js +8 -0
  127. package/components/sidebar.d.ts +1 -0
  128. package/components/sidebar.js +90 -0
  129. package/components/slider.d.ts +1 -0
  130. package/components/slider.js +57 -0
  131. package/components/spinner.d.ts +1 -0
  132. package/components/spinner.js +24 -0
  133. package/components/switch.d.ts +1 -0
  134. package/components/switch.js +69 -0
  135. package/components/tab.d.ts +1 -0
  136. package/components/tab.js +34 -0
  137. package/components/tabs-indicator.d.ts +1 -0
  138. package/components/tabs-indicator.js +10 -0
  139. package/components/tabs-list.d.ts +1 -0
  140. package/components/tabs-list.js +13 -0
  141. package/components/tabs-panel.d.ts +1 -0
  142. package/components/tabs-panel.js +13 -0
  143. package/components/tabs.d.ts +1 -0
  144. package/components/tabs.js +2 -0
  145. package/components/textarea.d.ts +1 -0
  146. package/components/textarea.js +76 -0
  147. package/components/toggle-group.d.ts +1 -0
  148. package/components/toggle-group.js +9 -0
  149. package/components/toggle.d.ts +1 -0
  150. package/components/toggle.js +34 -0
  151. package/components/toolbar.d.ts +1 -0
  152. package/components/toolbar.js +49 -0
  153. package/components/tooltip-popup.d.ts +1 -0
  154. package/components/tooltip-popup.js +2 -0
  155. package/components/tooltip.d.ts +1 -0
  156. package/components/tooltip.js +2 -0
  157. package/components/trunc.d.ts +1 -0
  158. package/components/trunc.js +9 -0
  159. package/components/vstack.d.ts +1 -0
  160. package/components/vstack.js +2 -0
  161. package/index.d.ts +82 -0
  162. package/index.js +246 -0
  163. package/package.json +360 -0
  164. package/tokens-raw.d.ts +2 -0
  165. package/tokens-raw.js +2 -0
  166. package/tokens.css +338 -0
  167. package/tokens.d.ts +2 -0
  168. package/tokens.js +4 -0
package/tokens.css ADDED
@@ -0,0 +1,338 @@
1
+ /* =================================================================
2
+ * DUI Design Tokens
3
+ * =================================================================
4
+ * Combined token system: spacing, typography, borders, elevation,
5
+ * motion, colors, sizing, and focus.
6
+ *
7
+ * Tokens are declared on :root so they cascade through the entire
8
+ * document, including into shadow DOM via CSS custom property
9
+ * inheritance.
10
+ *
11
+ * Dark mode: apply data-theme="dark" on <html> to switch palettes.
12
+ * ================================================================= */
13
+
14
+ :root {
15
+ /* -----------------------------------------------------------
16
+ * Spacing (Tailwind base-4 system)
17
+ * ----------------------------------------------------------- */
18
+ --space-0: 0;
19
+ --space-px: 1px;
20
+ --space-0_5: 0.125rem; /* 2px */
21
+ --space-1: 0.25rem; /* 4px */
22
+ --space-1_5: 0.375rem; /* 6px */
23
+ --space-2: 0.5rem; /* 8px */
24
+ --space-2_5: 0.625rem; /* 10px */
25
+ --space-3: 0.75rem; /* 12px */
26
+ --space-3_5: 0.875rem; /* 14px */
27
+ --space-4: 1rem; /* 16px */
28
+ --space-4_5: 1.125rem; /* 18px */
29
+ --space-5: 1.25rem; /* 20px */
30
+ --space-6: 1.5rem; /* 24px */
31
+ --space-7: 1.75rem; /* 28px */
32
+ --space-8: 2rem; /* 32px */
33
+ --space-9: 2.25rem; /* 36px */
34
+ --space-10: 2.5rem; /* 40px */
35
+ --space-11: 2.75rem; /* 44px */
36
+ --space-12: 3rem; /* 48px */
37
+ --space-14: 3.5rem; /* 56px */
38
+ --space-16: 4rem; /* 64px */
39
+ --space-20: 5rem; /* 80px */
40
+ --space-24: 6rem; /* 96px */
41
+ --space-28: 7rem; /* 112px */
42
+ --space-32: 8rem; /* 128px */
43
+ --space-36: 9rem; /* 144px */
44
+ --space-40: 10rem; /* 160px */
45
+ --space-44: 11rem; /* 176px */
46
+ --space-48: 12rem; /* 192px */
47
+ --space-52: 13rem; /* 208px */
48
+ --space-56: 14rem; /* 224px */
49
+ --space-60: 15rem; /* 240px */
50
+ --space-64: 16rem; /* 256px */
51
+ --space-72: 18rem; /* 288px */
52
+ --space-80: 20rem; /* 320px */
53
+ --space-96: 24rem; /* 384px */
54
+
55
+ /* -----------------------------------------------------------
56
+ * Typography
57
+ * ----------------------------------------------------------- */
58
+ --font-sans:
59
+ 'Inter', system-ui, -apple-system, sans-serif,
60
+ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
61
+ --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
62
+ --font-mono:
63
+ 'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo,
64
+ Consolas, "Liberation Mono", monospace;
65
+
66
+ --font-size-2xs: 0.65rem;
67
+ --font-size-xs: 0.75rem;
68
+ --font-size-sm: 0.875rem;
69
+ --font-size-base: 0.9375rem;
70
+ --font-size-md: 1rem;
71
+ --font-size-lg: 1.125rem;
72
+ --font-size-xl: 1.25rem;
73
+ --font-size-2xl: 1.5rem;
74
+ --font-size-3xl: 1.875rem;
75
+ --font-size-4xl: 2.25rem;
76
+ --font-size-5xl: 3rem;
77
+ --font-size-6xl: 3.75rem;
78
+ --font-size-7xl: 4.5rem;
79
+
80
+ --letter-spacing-tightest: -0.02em;
81
+ --letter-spacing-tighter: -0.015em;
82
+ --letter-spacing-tight: -0.01em;
83
+ --letter-spacing-normal: 0em;
84
+ --letter-spacing-wide: 0.006em;
85
+ --letter-spacing-wider: 0.012em;
86
+
87
+ --font-size-fluid-sm: clamp(0.813rem, 0.75rem + 0.315vw, 0.875rem);
88
+ --font-size-fluid-md: clamp(0.875rem, 0.813rem + 0.315vw, 1rem);
89
+ --font-size-fluid-lg: clamp(1rem, 0.938rem + 0.315vw, 1.125rem);
90
+ --font-size-fluid-xl: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
91
+ --font-size-fluid-2xl: clamp(1.25rem, 1.125rem + 0.625vw, 1.5rem);
92
+ --font-size-fluid-3xl: clamp(1.5rem, 1.313rem + 0.938vw, 1.875rem);
93
+ --font-size-fluid-4xl: clamp(1.875rem, 1.625rem + 1.25vw, 2.25rem);
94
+ --font-size-fluid-5xl: clamp(2.25rem, 1.875rem + 1.875vw, 3rem);
95
+
96
+ --font-weight-regular: 400;
97
+ --font-weight-medium: 500;
98
+ --font-weight-semibold: 600;
99
+ --font-weight-bold: 700;
100
+
101
+ --line-height-none: 1;
102
+ --line-height-tight: 1.25;
103
+ --line-height-snug: 1.375;
104
+ --line-height-normal: 1.5;
105
+ --line-height-relaxed: 1.625;
106
+
107
+ /* -----------------------------------------------------------
108
+ * Borders
109
+ * ----------------------------------------------------------- */
110
+ --radius-none: 0;
111
+ --radius-xs: 0.125rem;
112
+ --radius-sm: 0.25rem;
113
+ --radius-md: 0.5rem;
114
+ --radius-lg: 1rem;
115
+ --radius-xl: 1.5rem;
116
+ --radius-2xl: 2rem;
117
+ --radius-full: 9999px;
118
+
119
+ --border-width-hairline: 0.5px;
120
+ --border-width-thin: 1px;
121
+ --border-width-medium: 2px;
122
+ --border-width-thick: 4px;
123
+
124
+ /* -----------------------------------------------------------
125
+ * Elevation
126
+ * ----------------------------------------------------------- */
127
+ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
128
+ --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
129
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
130
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
131
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
132
+ --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
133
+ --shadow-none: 0 0 0 0 transparent;
134
+
135
+ --z-base: 0;
136
+ --z-dropdown: 700;
137
+ --z-sticky: 800;
138
+ --z-overlay: 900;
139
+ --z-modal: 1000;
140
+ --z-popover: 1100;
141
+ --z-toast: 1200;
142
+ --z-tooltip: 1300;
143
+
144
+ /* -----------------------------------------------------------
145
+ * Motion
146
+ * ----------------------------------------------------------- */
147
+ --duration-instant: 50ms;
148
+ --duration-faster: 100ms;
149
+ --duration-fast: 150ms;
150
+ --duration-normal: 250ms;
151
+ --duration-slow: 400ms;
152
+ --duration-slower: 700ms;
153
+
154
+ --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
155
+ --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
156
+ --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
157
+ --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
158
+ --ease-5: cubic-bezier(0.25, 0, 0.1, 1);
159
+ --ease-in-1: cubic-bezier(0.25, 0, 1, 1);
160
+ --ease-in-2: cubic-bezier(0.5, 0, 1, 1);
161
+ --ease-in-3: cubic-bezier(0.7, 0, 1, 1);
162
+ --ease-in-4: cubic-bezier(0.9, 0, 1, 1);
163
+ --ease-in-5: cubic-bezier(1, 0, 1, 1);
164
+ --ease-out-1: cubic-bezier(0, 0, 0.75, 1);
165
+ --ease-out-2: cubic-bezier(0, 0, 0.5, 1);
166
+ --ease-out-3: cubic-bezier(0, 0, 0.3, 1);
167
+ --ease-out-4: cubic-bezier(0, 0, 0.1, 1);
168
+ --ease-out-5: cubic-bezier(0, 0, 0, 1);
169
+ --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);
170
+ --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);
171
+ --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);
172
+ --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);
173
+ --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);
174
+
175
+ --ease-sine-in: cubic-bezier(0.47, 0, 0.745, 0.715);
176
+ --ease-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);
177
+ --ease-sine-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);
178
+ --ease-quad-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
179
+ --ease-quad-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
180
+ --ease-quad-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);
181
+ --ease-cubic-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
182
+ --ease-cubic-out: cubic-bezier(0.215, 0.61, 0.355, 1);
183
+ --ease-cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
184
+ --ease-quart-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);
185
+ --ease-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1);
186
+ --ease-quart-in-out: cubic-bezier(0.77, 0, 0.175, 1);
187
+ --ease-quint-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);
188
+ --ease-quint-out: cubic-bezier(0.23, 1, 0.32, 1);
189
+ --ease-quint-in-out: cubic-bezier(0.86, 0, 0.07, 1);
190
+ --ease-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);
191
+ --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);
192
+ --ease-expo-in-out: cubic-bezier(1, 0, 0, 1);
193
+ --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);
194
+ --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);
195
+ --ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
196
+
197
+ /* -----------------------------------------------------------
198
+ * Filters (presets for filter / backdrop-filter tokens)
199
+ * ----------------------------------------------------------- */
200
+ --filter-none: none;
201
+ --filter-blur-sm: blur(4px);
202
+ --filter-blur-md: blur(8px);
203
+ --filter-blur-lg: blur(16px);
204
+ --filter-blur-xl: blur(24px);
205
+ --filter-brightness-dim: brightness(0.8);
206
+ --filter-brightness-bright: brightness(1.15);
207
+ --filter-saturate-muted: saturate(0.5);
208
+ --filter-saturate-vivid: saturate(1.5);
209
+ --filter-grayscale: grayscale(1);
210
+
211
+ /* -----------------------------------------------------------
212
+ * Clip Paths (shape presets)
213
+ * ----------------------------------------------------------- */
214
+ --clip-none: none;
215
+ --clip-circle: circle(50%);
216
+ --clip-squircle: inset(0 round 30%);
217
+ --clip-hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
218
+ --clip-octagon: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);
219
+ --clip-chevron-right: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%);
220
+ --clip-bevel: polygon(8% 0%, 92% 0%, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0% 92%, 0% 8%);
221
+
222
+ /* -----------------------------------------------------------
223
+ * Component Sizing
224
+ * ----------------------------------------------------------- */
225
+ --component-height-xxs: 1.25rem;
226
+ --component-height-xs: 1.5rem;
227
+ --component-height-sm: 1.75rem;
228
+ --component-height-md: 2rem;
229
+ --component-height-lg: 2.25rem;
230
+ --component-height-xl: 2.5rem;
231
+
232
+ /* -----------------------------------------------------------
233
+ * Focus Ring
234
+ * ----------------------------------------------------------- */
235
+ --focus-ring-color: var(--ring);
236
+ --focus-ring-width: 2px;
237
+ --focus-ring-style: solid;
238
+ --focus-ring-offset: 2px;
239
+ --focus-ring-duration: var(--duration-fast);
240
+ --focus-ring-easing: var(--ease-out-3);
241
+
242
+ /* -----------------------------------------------------------
243
+ * Colors: Brand (theme-independent)
244
+ * ----------------------------------------------------------- */
245
+ --brand: oklch(0.728 0.1304 73.28);
246
+ --brand-foreground: oklch(1 0.02 73.28);
247
+ }
248
+
249
+ /* =================================================================
250
+ * LIGHT THEME (default)
251
+ * ================================================================= */
252
+ :root:not([data-theme="dark"]) {
253
+ --background: oklch(0.97 0 0);
254
+ --foreground: oklch(0.145 0.005 286);
255
+ --muted: oklch(0.965 0.002 286);
256
+ --muted-foreground: oklch(0.556 0.016 286);
257
+ --card: oklch(0.99 0 0);
258
+ --card-foreground: oklch(0.145 0.005 286);
259
+ --popover: oklch(1 0 0);
260
+ --popover-foreground: oklch(0.145 0.005 286);
261
+ --primary: oklch(0.205 0.042 265);
262
+ --primary-foreground: oklch(0.985 0.002 248);
263
+ --secondary: oklch(0.93 0.002 286);
264
+ --secondary-foreground: oklch(0.3 0.042 265);
265
+ --accent: oklch(0.93 0.04 62);
266
+ --accent-foreground: oklch(0.32 0.06 55);
267
+ --destructive: oklch(0.6 0.19 25);
268
+ --destructive-foreground: oklch(0.995 0.06 25);
269
+ --success: oklch(0.5 0.15 150);
270
+ --success-foreground: oklch(0.985 0 0);
271
+ --warning: oklch(0.72 0.15 75);
272
+ --warning-foreground: oklch(0.28 0.06 55);
273
+ --info: oklch(0.53 0.16 245);
274
+ --info-foreground: oklch(0.985 0 0);
275
+ --input: oklch(0.922 0.004 286);
276
+ --input-bg: oklch(0.97 0.002 286);
277
+ --border: oklch(0.922 0.004 286);
278
+ --ring: oklch(0.551 0.2 245);
279
+ --meter-track: oklch(0.965 0.002 286);
280
+ --meter-fill: oklch(0.205 0.042 265);
281
+ --scrim: oklch(0 0 0 / 0.5);
282
+ --chart-1: oklch(0.58 0.17 35);
283
+ --chart-2: oklch(0.55 0.13 185);
284
+ --chart-3: oklch(0.52 0.14 265);
285
+ --chart-4: oklch(0.62 0.15 85);
286
+ --chart-5: oklch(0.55 0.16 310);
287
+ }
288
+
289
+ /* =================================================================
290
+ * DARK THEME
291
+ * ================================================================= */
292
+ :root[data-theme="dark"] {
293
+ --background: oklch(0.26 0.019 243);
294
+ --foreground: oklch(0.9353 0.0173 243);
295
+ --muted: oklch(0.27 0.03 243);
296
+ --muted-foreground: oklch(0.9353 0.0173 243 / 0.4);
297
+ --card: oklch(0.29 0.028 243);
298
+ --card-foreground: oklch(0.985 0.002 243);
299
+ --popover: oklch(0.309 0.032 243);
300
+ --popover-foreground: oklch(0.985 0.002 243);
301
+ --primary: oklch(0.985 0.002 243);
302
+ --primary-foreground: oklch(0.205 0.042 243);
303
+ --secondary: oklch(0.826 0.041 243 / 0.2);
304
+ --secondary-foreground: oklch(0.9353 0.0173 243 / 1);
305
+ --accent: oklch(0.7001 0.1329 62.25);
306
+ --accent-foreground: oklch(1 0.1 62.25);
307
+ --destructive: oklch(0.63 0.2 25);
308
+ --destructive-foreground: oklch(0.99 0.1 25);
309
+ --success: oklch(0.65 0.17 145);
310
+ --success-foreground: oklch(1 0.1 145);
311
+ --warning: oklch(0.78 0.15 80);
312
+ --warning-foreground: oklch(1 0.05 80);
313
+ --info: oklch(0.64 0.16 245);
314
+ --info-foreground: oklch(1 0.1 245);
315
+ --input: oklch(0.826 0.041 202 / 0.2);
316
+ --input-bg: oklch(0.826 0.041 202 / 0.08);
317
+ --border: oklch(0.826 0.041 202 / 0.14);
318
+ --ring: oklch(0.55 0.16 245);
319
+ --meter-track: oklch(0.269 0.007 286);
320
+ --meter-fill: oklch(0.985 0.002 248);
321
+ --scrim: oklch(0.18 0.017 244 / 0.6);
322
+ --chart-1: oklch(0.58 0.17 264);
323
+ --chart-2: oklch(0.62 0.15 162);
324
+ --chart-3: oklch(0.7 0.16 80);
325
+ --chart-4: oklch(0.6 0.19 303);
326
+ --chart-5: oklch(0.62 0.18 16);
327
+ }
328
+
329
+ /* =================================================================
330
+ * Base document styles
331
+ * ================================================================= */
332
+ :root {
333
+ color: var(--foreground);
334
+ font-family: var(--font-sans);
335
+ line-height: var(--line-height-normal);
336
+ -webkit-font-smoothing: antialiased;
337
+ -moz-osx-font-smoothing: grayscale;
338
+ }
package/tokens.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const tokenSheet: CSSStyleSheet;
2
+ export { tokenSheet };
package/tokens.js ADDED
@@ -0,0 +1,4 @@
1
+ const tokensCSS = "/* =================================================================\n * DUI Design Tokens\n * =================================================================\n * Combined token system: spacing, typography, borders, elevation,\n * motion, colors, sizing, and focus.\n *\n * Tokens are declared on :root so they cascade through the entire\n * document, including into shadow DOM via CSS custom property\n * inheritance.\n *\n * Dark mode: apply data-theme=\"dark\" on <html> to switch palettes.\n * ================================================================= */\n\n:root {\n /* -----------------------------------------------------------\n * Spacing (Tailwind base-4 system)\n * ----------------------------------------------------------- */\n --space-0: 0;\n --space-px: 1px;\n --space-0_5: 0.125rem; /* 2px */\n --space-1: 0.25rem; /* 4px */\n --space-1_5: 0.375rem; /* 6px */\n --space-2: 0.5rem; /* 8px */\n --space-2_5: 0.625rem; /* 10px */\n --space-3: 0.75rem; /* 12px */\n --space-3_5: 0.875rem; /* 14px */\n --space-4: 1rem; /* 16px */\n --space-4_5: 1.125rem; /* 18px */\n --space-5: 1.25rem; /* 20px */\n --space-6: 1.5rem; /* 24px */\n --space-7: 1.75rem; /* 28px */\n --space-8: 2rem; /* 32px */\n --space-9: 2.25rem; /* 36px */\n --space-10: 2.5rem; /* 40px */\n --space-11: 2.75rem; /* 44px */\n --space-12: 3rem; /* 48px */\n --space-14: 3.5rem; /* 56px */\n --space-16: 4rem; /* 64px */\n --space-20: 5rem; /* 80px */\n --space-24: 6rem; /* 96px */\n --space-28: 7rem; /* 112px */\n --space-32: 8rem; /* 128px */\n --space-36: 9rem; /* 144px */\n --space-40: 10rem; /* 160px */\n --space-44: 11rem; /* 176px */\n --space-48: 12rem; /* 192px */\n --space-52: 13rem; /* 208px */\n --space-56: 14rem; /* 224px */\n --space-60: 15rem; /* 240px */\n --space-64: 16rem; /* 256px */\n --space-72: 18rem; /* 288px */\n --space-80: 20rem; /* 320px */\n --space-96: 24rem; /* 384px */\n\n /* -----------------------------------------------------------\n * Typography\n * ----------------------------------------------------------- */\n --font-sans:\n 'Inter', system-ui, -apple-system, sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n --font-mono:\n 'JetBrains Mono', ui-monospace, SFMono-Regular, \"SF Mono\", Menlo,\n Consolas, \"Liberation Mono\", monospace;\n\n --font-size-2xs: 0.65rem;\n --font-size-xs: 0.75rem;\n --font-size-sm: 0.875rem;\n --font-size-base: 0.9375rem;\n --font-size-md: 1rem;\n --font-size-lg: 1.125rem;\n --font-size-xl: 1.25rem;\n --font-size-2xl: 1.5rem;\n --font-size-3xl: 1.875rem;\n --font-size-4xl: 2.25rem;\n --font-size-5xl: 3rem;\n --font-size-6xl: 3.75rem;\n --font-size-7xl: 4.5rem;\n\n --letter-spacing-tightest: -0.02em;\n --letter-spacing-tighter: -0.015em;\n --letter-spacing-tight: -0.01em;\n --letter-spacing-normal: 0em;\n --letter-spacing-wide: 0.006em;\n --letter-spacing-wider: 0.012em;\n\n --font-size-fluid-sm: clamp(0.813rem, 0.75rem + 0.315vw, 0.875rem);\n --font-size-fluid-md: clamp(0.875rem, 0.813rem + 0.315vw, 1rem);\n --font-size-fluid-lg: clamp(1rem, 0.938rem + 0.315vw, 1.125rem);\n --font-size-fluid-xl: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);\n --font-size-fluid-2xl: clamp(1.25rem, 1.125rem + 0.625vw, 1.5rem);\n --font-size-fluid-3xl: clamp(1.5rem, 1.313rem + 0.938vw, 1.875rem);\n --font-size-fluid-4xl: clamp(1.875rem, 1.625rem + 1.25vw, 2.25rem);\n --font-size-fluid-5xl: clamp(2.25rem, 1.875rem + 1.875vw, 3rem);\n\n --font-weight-regular: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n\n --line-height-none: 1;\n --line-height-tight: 1.25;\n --line-height-snug: 1.375;\n --line-height-normal: 1.5;\n --line-height-relaxed: 1.625;\n\n /* -----------------------------------------------------------\n * Borders\n * ----------------------------------------------------------- */\n --radius-none: 0;\n --radius-xs: 0.125rem;\n --radius-sm: 0.25rem;\n --radius-md: 0.5rem;\n --radius-lg: 1rem;\n --radius-xl: 1.5rem;\n --radius-2xl: 2rem;\n --radius-full: 9999px;\n\n --border-width-hairline: 0.5px;\n --border-width-thin: 1px;\n --border-width-medium: 2px;\n --border-width-thick: 4px;\n\n /* -----------------------------------------------------------\n * Elevation\n * ----------------------------------------------------------- */\n --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --shadow-none: 0 0 0 0 transparent;\n\n --z-base: 0;\n --z-dropdown: 700;\n --z-sticky: 800;\n --z-overlay: 900;\n --z-modal: 1000;\n --z-popover: 1100;\n --z-toast: 1200;\n --z-tooltip: 1300;\n\n /* -----------------------------------------------------------\n * Motion\n * ----------------------------------------------------------- */\n --duration-instant: 50ms;\n --duration-faster: 100ms;\n --duration-fast: 150ms;\n --duration-normal: 250ms;\n --duration-slow: 400ms;\n --duration-slower: 700ms;\n\n --ease-1: cubic-bezier(0.25, 0, 0.5, 1);\n --ease-2: cubic-bezier(0.25, 0, 0.4, 1);\n --ease-3: cubic-bezier(0.25, 0, 0.3, 1);\n --ease-4: cubic-bezier(0.25, 0, 0.2, 1);\n --ease-5: cubic-bezier(0.25, 0, 0.1, 1);\n --ease-in-1: cubic-bezier(0.25, 0, 1, 1);\n --ease-in-2: cubic-bezier(0.5, 0, 1, 1);\n --ease-in-3: cubic-bezier(0.7, 0, 1, 1);\n --ease-in-4: cubic-bezier(0.9, 0, 1, 1);\n --ease-in-5: cubic-bezier(1, 0, 1, 1);\n --ease-out-1: cubic-bezier(0, 0, 0.75, 1);\n --ease-out-2: cubic-bezier(0, 0, 0.5, 1);\n --ease-out-3: cubic-bezier(0, 0, 0.3, 1);\n --ease-out-4: cubic-bezier(0, 0, 0.1, 1);\n --ease-out-5: cubic-bezier(0, 0, 0, 1);\n --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);\n --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);\n --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);\n --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);\n --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);\n\n --ease-sine-in: cubic-bezier(0.47, 0, 0.745, 0.715);\n --ease-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);\n --ease-sine-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);\n --ease-quad-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);\n --ease-quad-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n --ease-quad-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);\n --ease-cubic-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n --ease-cubic-out: cubic-bezier(0.215, 0.61, 0.355, 1);\n --ease-cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);\n --ease-quart-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);\n --ease-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1);\n --ease-quart-in-out: cubic-bezier(0.77, 0, 0.175, 1);\n --ease-quint-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n --ease-quint-out: cubic-bezier(0.23, 1, 0.32, 1);\n --ease-quint-in-out: cubic-bezier(0.86, 0, 0.07, 1);\n --ease-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);\n --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);\n --ease-expo-in-out: cubic-bezier(1, 0, 0, 1);\n --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);\n --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);\n --ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);\n\n /* -----------------------------------------------------------\n * Filters (presets for filter / backdrop-filter tokens)\n * ----------------------------------------------------------- */\n --filter-none: none;\n --filter-blur-sm: blur(4px);\n --filter-blur-md: blur(8px);\n --filter-blur-lg: blur(16px);\n --filter-blur-xl: blur(24px);\n --filter-brightness-dim: brightness(0.8);\n --filter-brightness-bright: brightness(1.15);\n --filter-saturate-muted: saturate(0.5);\n --filter-saturate-vivid: saturate(1.5);\n --filter-grayscale: grayscale(1);\n\n /* -----------------------------------------------------------\n * Clip Paths (shape presets)\n * ----------------------------------------------------------- */\n --clip-none: none;\n --clip-circle: circle(50%);\n --clip-squircle: inset(0 round 30%);\n --clip-hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);\n --clip-octagon: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);\n --clip-chevron-right: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%);\n --clip-bevel: polygon(8% 0%, 92% 0%, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0% 92%, 0% 8%);\n\n /* -----------------------------------------------------------\n * Component Sizing\n * ----------------------------------------------------------- */\n --component-height-xxs: 1.25rem;\n --component-height-xs: 1.5rem;\n --component-height-sm: 1.75rem;\n --component-height-md: 2rem;\n --component-height-lg: 2.25rem;\n --component-height-xl: 2.5rem;\n\n /* -----------------------------------------------------------\n * Focus Ring\n * ----------------------------------------------------------- */\n --focus-ring-color: var(--ring);\n --focus-ring-width: 2px;\n --focus-ring-style: solid;\n --focus-ring-offset: 2px;\n --focus-ring-duration: var(--duration-fast);\n --focus-ring-easing: var(--ease-out-3);\n\n /* -----------------------------------------------------------\n * Colors: Brand (theme-independent)\n * ----------------------------------------------------------- */\n --brand: oklch(0.728 0.1304 73.28);\n --brand-foreground: oklch(1 0.02 73.28);\n}\n\n/* =================================================================\n * LIGHT THEME (default)\n * ================================================================= */\n:root:not([data-theme=\"dark\"]) {\n --background: oklch(0.97 0 0);\n --foreground: oklch(0.145 0.005 286);\n --muted: oklch(0.965 0.002 286);\n --muted-foreground: oklch(0.556 0.016 286);\n --card: oklch(0.99 0 0);\n --card-foreground: oklch(0.145 0.005 286);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.145 0.005 286);\n --primary: oklch(0.205 0.042 265);\n --primary-foreground: oklch(0.985 0.002 248);\n --secondary: oklch(0.93 0.002 286);\n --secondary-foreground: oklch(0.3 0.042 265);\n --accent: oklch(0.93 0.04 62);\n --accent-foreground: oklch(0.32 0.06 55);\n --destructive: oklch(0.6 0.19 25);\n --destructive-foreground: oklch(0.995 0.06 25);\n --success: oklch(0.5 0.15 150);\n --success-foreground: oklch(0.985 0 0);\n --warning: oklch(0.72 0.15 75);\n --warning-foreground: oklch(0.28 0.06 55);\n --info: oklch(0.53 0.16 245);\n --info-foreground: oklch(0.985 0 0);\n --input: oklch(0.922 0.004 286);\n --input-bg: oklch(0.97 0.002 286);\n --border: oklch(0.922 0.004 286);\n --ring: oklch(0.551 0.2 245);\n --meter-track: oklch(0.965 0.002 286);\n --meter-fill: oklch(0.205 0.042 265);\n --scrim: oklch(0 0 0 / 0.5);\n --chart-1: oklch(0.58 0.17 35);\n --chart-2: oklch(0.55 0.13 185);\n --chart-3: oklch(0.52 0.14 265);\n --chart-4: oklch(0.62 0.15 85);\n --chart-5: oklch(0.55 0.16 310);\n}\n\n/* =================================================================\n * DARK THEME\n * ================================================================= */\n:root[data-theme=\"dark\"] {\n --background: oklch(0.26 0.019 243);\n --foreground: oklch(0.9353 0.0173 243);\n --muted: oklch(0.27 0.03 243);\n --muted-foreground: oklch(0.9353 0.0173 243 / 0.4);\n --card: oklch(0.29 0.028 243);\n --card-foreground: oklch(0.985 0.002 243);\n --popover: oklch(0.309 0.032 243);\n --popover-foreground: oklch(0.985 0.002 243);\n --primary: oklch(0.985 0.002 243);\n --primary-foreground: oklch(0.205 0.042 243);\n --secondary: oklch(0.826 0.041 243 / 0.2);\n --secondary-foreground: oklch(0.9353 0.0173 243 / 1);\n --accent: oklch(0.7001 0.1329 62.25);\n --accent-foreground: oklch(1 0.1 62.25);\n --destructive: oklch(0.63 0.2 25);\n --destructive-foreground: oklch(0.99 0.1 25);\n --success: oklch(0.65 0.17 145);\n --success-foreground: oklch(1 0.1 145);\n --warning: oklch(0.78 0.15 80);\n --warning-foreground: oklch(1 0.05 80);\n --info: oklch(0.64 0.16 245);\n --info-foreground: oklch(1 0.1 245);\n --input: oklch(0.826 0.041 202 / 0.2);\n --input-bg: oklch(0.826 0.041 202 / 0.08);\n --border: oklch(0.826 0.041 202 / 0.14);\n --ring: oklch(0.55 0.16 245);\n --meter-track: oklch(0.269 0.007 286);\n --meter-fill: oklch(0.985 0.002 248);\n --scrim: oklch(0.18 0.017 244 / 0.6);\n --chart-1: oklch(0.58 0.17 264);\n --chart-2: oklch(0.62 0.15 162);\n --chart-3: oklch(0.7 0.16 80);\n --chart-4: oklch(0.6 0.19 303);\n --chart-5: oklch(0.62 0.18 16);\n}\n\n/* =================================================================\n * Base document styles\n * ================================================================= */\n:root {\n color: var(--foreground);\n font-family: var(--font-sans);\n line-height: var(--line-height-normal);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n";
2
+ const tokenSheet = new CSSStyleSheet();
3
+ tokenSheet.replaceSync(tokensCSS);
4
+ export { tokenSheet };