@owodesign/owoui 0.1.3 → 0.1.5

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 (46) hide show
  1. package/README.md +22 -6
  2. package/dist/index.min.js +1 -1
  3. package/dist/preset-default.css +143 -0
  4. package/dist/preset-elevated.css +164 -0
  5. package/dist/preset-flat.css +144 -0
  6. package/dist/preset-glass.css +173 -0
  7. package/dist/storybook/index.min.js +9 -9
  8. package/dist/storybook-static/app.css +1832 -1974
  9. package/dist/storybook-static/assets/main.css +2 -2
  10. package/dist/storybook-static/assets/main.js +16 -16
  11. package/dist/style.css +2988 -0
  12. package/dist/theme-dark.css +230 -0
  13. package/dist/theme-light.css +231 -0
  14. package/dist/tokens.css +118 -0
  15. package/dist/tokens.d.ts +16 -9
  16. package/dist/tokens.min.js +1 -1
  17. package/package.json +25 -30
  18. package/src/preset-default.css +0 -27
  19. package/src/preset-elevated.css +0 -27
  20. package/src/preset-flat.css +0 -27
  21. package/src/preset-glass.css +0 -27
  22. package/src/style.css +0 -22
  23. package/src/styles/tokens.css +0 -253
  24. package/src/styles/ui/avatar.css +0 -13
  25. package/src/styles/ui/badge.css +0 -52
  26. package/src/styles/ui/button.css +0 -49
  27. package/src/styles/ui/collapsible.css +0 -13
  28. package/src/styles/ui/dialog.css +0 -37
  29. package/src/styles/ui/drawer.css +0 -15
  30. package/src/styles/ui/dropdown-menu.css +0 -132
  31. package/src/styles/ui/field.css +0 -12
  32. package/src/styles/ui/icon-button.css +0 -29
  33. package/src/styles/ui/input.css +0 -16
  34. package/src/styles/ui/panel.css +0 -23
  35. package/src/styles/ui/segmented-control.css +0 -28
  36. package/src/styles/ui/select.css +0 -52
  37. package/src/styles/ui/skeleton.css +0 -99
  38. package/src/styles/ui/status-notice.css +0 -49
  39. package/src/styles/ui/switch.css +0 -17
  40. package/src/styles/ui/tabs.css +0 -33
  41. package/src/styles/ui/textarea.css +0 -8
  42. package/src/styles/ui/toast.css +0 -57
  43. package/src/styles/ui/tooltip.css +0 -31
  44. package/src/theme-dark.css +0 -87
  45. package/src/theme-light.css +0 -102
  46. package/src/tokens.css +0 -1
package/dist/theme-dark.css ADDED
@@ -0,0 +1,230 @@
1
+ /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
+ :root, :host {
3
+ --owo-ref-color-neutral-900: #1a1a1a;
4
+ --owo-ref-color-neutral-700: #4a4a4a;
5
+ --owo-ref-color-neutral-600: #71717a;
6
+ --owo-ref-color-brand-primary: #1a1a1a;
7
+ --owo-ref-color-brand-primary-hover: #000000;
8
+ --owo-ref-color-surface-canvas: #ffffff;
9
+ --owo-ref-color-surface-base: #ffffff;
10
+ --owo-ref-color-surface-subtle: #fafaf9;
11
+ --owo-ref-color-surface-raised: #ffffff;
12
+ --owo-ref-color-surface-inset: #f5f5f4;
13
+ --owo-ref-color-surface-border: #e5e7eb;
14
+ --owo-ref-color-surface-ring: #d6d3d1;
15
+ --owo-ref-color-overlay-strong: rgba(15, 23, 42, 0.18);
16
+ --owo-ref-color-text-on-brand: #ffffff;
17
+ --owo-ref-shadow-raised: 0 10px 20px rgba(15, 23, 42, 0.08);
18
+ --owo-ref-shadow-popover: 0 18px 40px rgba(15, 23, 42, 0.10);
19
+ --owo-ref-color-status-success-bg: rgba(16, 185, 129, 0.10);
20
+ --owo-ref-color-status-success-border: rgba(16, 185, 129, 0.20);
21
+ --owo-ref-color-status-success-text: #047857;
22
+ --owo-ref-color-status-warning-bg: rgba(245, 158, 11, 0.10);
23
+ --owo-ref-color-status-warning-border: rgba(245, 158, 11, 0.20);
24
+ --owo-ref-color-status-warning-text: #b45309;
25
+ --owo-ref-color-status-danger-bg: rgba(239, 68, 68, 0.10);
26
+ --owo-ref-color-status-danger-border: rgba(239, 68, 68, 0.20);
27
+ --owo-ref-color-status-danger-text: #b91c1c;
28
+ --owo-ref-color-status-info-bg: rgba(14, 165, 233, 0.10);
29
+ --owo-ref-color-status-info-border: rgba(14, 165, 233, 0.20);
30
+ --owo-ref-color-status-info-text: #0369a1;
31
+ --owo-ref-font-heading: var(--font-source-serif-pro), var(--font-noto-serif-sc), "Source Serif 4", Georgia, "Times New Roman", serif;
32
+ --owo-ref-radius-sm: 0.5rem;
33
+ --owo-ref-radius-md: 0.75rem;
34
+ --owo-ref-radius-lg: 1rem;
35
+ --owo-ref-radius-xl: 1.5rem;
36
+ --owo-ref-radius-2xl: 2rem;
37
+ --owo-ref-radius-full: 9999px;
38
+ --owo-ref-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
39
+ --owo-ref-motion-ease-decelerate: cubic-bezier(0, 0, 0, 1);
40
+ --owo-ref-motion-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
41
+ }
42
+ :root {
43
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
44
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
45
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
46
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
47
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
48
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
49
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
50
+ --owo-sys-preset-surface-shadow: var(--owo-ref-shadow-raised);
51
+ --owo-sys-preset-surface-shadow-strong: var(--owo-ref-shadow-popover);
52
+ --owo-sys-preset-surface-blur: 0px;
53
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
54
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
55
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
56
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
57
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
58
+ --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-sm);
59
+ --owo-sys-preset-control-radius-md: var(--owo-ref-radius-md);
60
+ --owo-sys-preset-control-radius-lg: var(--owo-ref-radius-lg);
61
+ --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
62
+ --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
63
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
64
+ --owo-sys-preset-control-border-width: 1px;
65
+ --owo-cmp-surface-bg: var(--owo-sys-preset-surface-bg);
66
+ --owo-cmp-surface-bg-subtle: var(--owo-sys-preset-surface-bg-subtle);
67
+ --owo-cmp-surface-bg-raised: var(--owo-sys-preset-surface-bg-raised);
68
+ --owo-cmp-surface-bg-inset: var(--owo-sys-preset-surface-bg-inset);
69
+ --owo-cmp-surface-border: var(--owo-sys-preset-surface-border);
70
+ --owo-cmp-surface-border-muted: var(--owo-sys-preset-surface-border-muted);
71
+ --owo-cmp-surface-border-strong: var(--owo-sys-preset-surface-border-strong);
72
+ --owo-cmp-surface-shadow: var(--owo-sys-preset-surface-shadow);
73
+ --owo-cmp-surface-shadow-strong: var(--owo-sys-preset-surface-shadow-strong);
74
+ --owo-cmp-surface-blur: var(--owo-sys-preset-surface-blur);
75
+ --owo-cmp-canvas-bg: var(--owo-sys-preset-canvas-bg);
76
+ --owo-cmp-canvas-bg-subtle: var(--owo-sys-preset-canvas-bg-subtle);
77
+ --owo-cmp-surface-container: var(--owo-sys-preset-surface-container);
78
+ --owo-cmp-surface-container-high: var(--owo-sys-preset-surface-container-high);
79
+ --owo-cmp-surface-container-highest: var(--owo-sys-preset-surface-container-highest);
80
+ --owo-cmp-text-primary: var(--owo-sys-theme-text-primary);
81
+ --owo-cmp-text-secondary: var(--owo-sys-theme-text-secondary);
82
+ --owo-cmp-text-muted: var(--owo-sys-theme-text-muted);
83
+ --owo-cmp-text-on-accent: var(--owo-sys-theme-text-on-accent);
84
+ --owo-cmp-accent-bg: var(--owo-sys-theme-accent-bg);
85
+ --owo-cmp-accent-bg-hover: var(--owo-sys-theme-accent-bg-hover);
86
+ --owo-cmp-accent-bg-muted: var(--owo-sys-theme-accent-bg-muted);
87
+ --owo-cmp-accent-text: var(--owo-sys-theme-text-on-accent);
88
+ --owo-cmp-accent-border: var(--owo-sys-theme-accent-border);
89
+ --owo-cmp-success-bg: var(--owo-sys-theme-success-bg);
90
+ --owo-cmp-success-border: var(--owo-sys-theme-success-border);
91
+ --owo-cmp-success-text: var(--owo-sys-theme-success-text);
92
+ --owo-cmp-warning-bg: var(--owo-sys-theme-warning-bg);
93
+ --owo-cmp-warning-border: var(--owo-sys-theme-warning-border);
94
+ --owo-cmp-warning-text: var(--owo-sys-theme-warning-text);
95
+ --owo-cmp-danger-bg: var(--owo-sys-theme-danger-bg);
96
+ --owo-cmp-danger-bg-emphasis: var(--owo-sys-theme-danger-bg-emphasis);
97
+ --owo-cmp-danger-border: var(--owo-sys-theme-danger-border);
98
+ --owo-cmp-danger-text: var(--owo-sys-theme-danger-text);
99
+ --owo-cmp-info-bg: var(--owo-sys-theme-info-bg);
100
+ --owo-cmp-info-border: var(--owo-sys-theme-info-border);
101
+ --owo-cmp-info-text: var(--owo-sys-theme-info-text);
102
+ --owo-cmp-control-radius-sm: var(--owo-sys-preset-control-radius-sm);
103
+ --owo-cmp-control-radius-md: var(--owo-sys-preset-control-radius-md);
104
+ --owo-cmp-control-radius-lg: var(--owo-sys-preset-control-radius-lg);
105
+ --owo-cmp-control-radius-xl: var(--owo-sys-preset-control-radius-xl);
106
+ --owo-cmp-control-radius-2xl: var(--owo-sys-preset-control-radius-2xl);
107
+ --owo-cmp-control-radius-full: var(--owo-sys-preset-control-radius-full);
108
+ --owo-cmp-control-border-width: var(--owo-sys-preset-control-border-width);
109
+ --owo-cmp-control-focus-ring: var(--owo-sys-theme-control-focus-ring);
110
+ --owo-cmp-control-focus-ring-offset: var(--owo-sys-theme-control-focus-ring-offset);
111
+ --owo-cmp-font-heading: var(--owo-ref-font-heading);
112
+ --owo-cmp-motion-duration-fast: 0.15s;
113
+ --owo-cmp-motion-duration-default: 0.2s;
114
+ --owo-cmp-motion-ease-standard: var(--owo-ref-motion-ease-standard);
115
+ --owo-cmp-motion-ease-decelerate: var(--owo-ref-motion-ease-decelerate);
116
+ --owo-cmp-motion-ease-accelerate: var(--owo-ref-motion-ease-accelerate);
117
+ --owo-cmp-density-compact: 0.875;
118
+ --owo-cmp-density-default: 1;
119
+ --owo-cmp-density-comfortable: 1.125;
120
+ --owo-cmp-overlay-bg: var(--owo-sys-theme-overlay-bg);
121
+ --owo-cmp-z-dropdown: 1000;
122
+ --owo-cmp-z-modal: 1100;
123
+ --owo-cmp-z-toast: 1200;
124
+ --owo-feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
125
+ --owo-feedback-neutral-border: var(--owo-cmp-surface-border);
126
+ --owo-feedback-neutral-text: var(--owo-cmp-text-primary);
127
+ --owo-feedback-neutral-icon: var(--owo-cmp-text-secondary);
128
+ --owo-feedback-info-bg: var(--owo-cmp-info-bg);
129
+ --owo-feedback-info-border: var(--owo-cmp-info-border);
130
+ --owo-feedback-info-text: var(--owo-cmp-info-text);
131
+ --owo-feedback-info-icon: var(--owo-cmp-info-text);
132
+ --owo-feedback-success-bg: var(--owo-cmp-success-bg);
133
+ --owo-feedback-success-border: var(--owo-cmp-success-border);
134
+ --owo-feedback-success-text: var(--owo-cmp-success-text);
135
+ --owo-feedback-success-icon: var(--owo-cmp-success-text);
136
+ --owo-feedback-warning-bg: var(--owo-cmp-warning-bg);
137
+ --owo-feedback-warning-border: var(--owo-cmp-warning-border);
138
+ --owo-feedback-warning-text: var(--owo-cmp-warning-text);
139
+ --owo-feedback-warning-icon: var(--owo-cmp-warning-text);
140
+ --owo-feedback-danger-bg: var(--owo-cmp-danger-bg);
141
+ --owo-feedback-danger-border: var(--owo-cmp-danger-border);
142
+ --owo-feedback-danger-text: var(--owo-cmp-danger-text);
143
+ --owo-feedback-danger-icon: var(--owo-cmp-danger-text);
144
+ }
145
+ :root[data-theme="dark"],
146
+ .owoui-theme-dark {
147
+ --owo-ref-color-neutral-900: #fafafa;
148
+ --owo-ref-color-neutral-800: #e4e4e7;
149
+ --owo-ref-color-neutral-700: #d4d4d8;
150
+ --owo-ref-color-neutral-600: #a1a1aa;
151
+ --owo-ref-color-neutral-500: #71717a;
152
+ --owo-ref-color-neutral-400: #3f3f46;
153
+ --owo-ref-color-neutral-300: #27272a;
154
+ --owo-ref-color-neutral-200: #1f1f22;
155
+ --owo-ref-color-neutral-100: #18181a;
156
+ --owo-ref-color-brand-primary: #c6c6c7;
157
+ --owo-ref-color-brand-primary-hover: #d4d4d8;
158
+ --owo-ref-color-brand-accent: #a1a1aa;
159
+ --owo-ref-color-surface-canvas: #0e0e0e;
160
+ --owo-ref-color-surface-base: #18181b;
161
+ --owo-ref-color-surface-subtle: #1c1c1f;
162
+ --owo-ref-color-surface-raised: #27272a;
163
+ --owo-ref-color-surface-inset: #111113;
164
+ --owo-ref-color-surface-border: rgba(255, 255, 255, 0.12);
165
+ --owo-ref-color-surface-ring: rgba(255, 255, 255, 0.24);
166
+ --owo-ref-color-surface-overlay: rgba(0, 0, 0, 0.6);
167
+ --owo-ref-color-overlay-soft: rgba(0, 0, 0, 0.32);
168
+ --owo-ref-color-overlay-strong: rgba(0, 0, 0, 0.56);
169
+ --owo-ref-color-highlight-soft: rgba(255, 255, 255, 0.06);
170
+ --owo-ref-color-highlight-sheen: rgba(255, 255, 255, 0.08);
171
+ --owo-ref-color-text-on-brand: #1a1a1a;
172
+ --owo-ref-color-code-block-bg: #1e1e22;
173
+ --owo-ref-color-code-block-border: #2d2d32;
174
+ --owo-ref-color-code-block-divider: #27272c;
175
+ --owo-ref-color-code-inline-bg: #27272a;
176
+ --owo-ref-color-status-success-bg: rgba(16, 185, 129, 0.15);
177
+ --owo-ref-color-status-success-border: rgba(16, 185, 129, 0.3);
178
+ --owo-ref-color-status-success-text: #6ee7b7;
179
+ --owo-ref-color-status-warning-bg: rgba(245, 158, 11, 0.15);
180
+ --owo-ref-color-status-warning-border: rgba(245, 158, 11, 0.3);
181
+ --owo-ref-color-status-warning-text: #fbbf24;
182
+ --owo-ref-color-status-danger-bg: rgba(239, 68, 68, 0.15);
183
+ --owo-ref-color-status-danger-border: rgba(239, 68, 68, 0.3);
184
+ --owo-ref-color-status-danger-text: #fca5a5;
185
+ --owo-ref-color-status-info-bg: rgba(14, 165, 233, 0.15);
186
+ --owo-ref-color-status-info-border: rgba(14, 165, 233, 0.3);
187
+ --owo-ref-color-status-info-text: #7dd3fc;
188
+ --owo-sys-theme-surface-canvas: var(--owo-ref-color-surface-canvas);
189
+ --owo-sys-theme-surface-base: var(--owo-ref-color-surface-base);
190
+ --owo-sys-theme-surface-subtle: var(--owo-ref-color-surface-subtle);
191
+ --owo-sys-theme-surface-raised: var(--owo-ref-color-surface-raised);
192
+ --owo-sys-theme-surface-inset: var(--owo-ref-color-surface-inset);
193
+ --owo-sys-theme-surface-border: var(--owo-ref-color-surface-border);
194
+ --owo-sys-theme-surface-border-muted: rgba(255, 255, 255, 0.06);
195
+ --owo-sys-theme-surface-border-strong: var(--owo-ref-color-surface-ring);
196
+ --owo-sys-theme-canvas-bg-subtle: #0f0f11;
197
+ --owo-sys-theme-surface-container: #1e1e22;
198
+ --owo-sys-theme-surface-container-high: #252529;
199
+ --owo-sys-theme-surface-container-highest: #2d2d32;
200
+ --owo-sys-theme-text-primary: var(--owo-ref-color-neutral-900);
201
+ --owo-sys-theme-text-secondary: var(--owo-ref-color-neutral-700);
202
+ --owo-sys-theme-text-muted: var(--owo-ref-color-neutral-600);
203
+ --owo-sys-theme-text-on-accent: var(--owo-ref-color-text-on-brand);
204
+ --owo-sys-theme-accent-bg: var(--owo-ref-color-brand-primary);
205
+ --owo-sys-theme-accent-bg-hover: var(--owo-ref-color-brand-primary-hover);
206
+ --owo-sys-theme-accent-bg-muted: color-mix(in srgb, #1a1a1a 14%, #ffffff);
207
+ @supports (color: color-mix(in lab, red, red)) {
208
+ --owo-sys-theme-accent-bg-muted: color-mix(in srgb, var(--owo-ref-color-brand-primary) 14%, var(--owo-ref-color-surface-base));
209
+ }
210
+ --owo-sys-theme-accent-border: color-mix(in srgb, #1a1a1a 50%, transparent);
211
+ @supports (color: color-mix(in lab, red, red)) {
212
+ --owo-sys-theme-accent-border: color-mix(in srgb, var(--owo-ref-color-brand-primary) 50%, transparent);
213
+ }
214
+ --owo-sys-theme-success-bg: var(--owo-ref-color-status-success-bg);
215
+ --owo-sys-theme-success-border: var(--owo-ref-color-status-success-border);
216
+ --owo-sys-theme-success-text: var(--owo-ref-color-status-success-text);
217
+ --owo-sys-theme-warning-bg: var(--owo-ref-color-status-warning-bg);
218
+ --owo-sys-theme-warning-border: var(--owo-ref-color-status-warning-border);
219
+ --owo-sys-theme-warning-text: var(--owo-ref-color-status-warning-text);
220
+ --owo-sys-theme-danger-bg: var(--owo-ref-color-status-danger-bg);
221
+ --owo-sys-theme-danger-bg-emphasis: rgba(239, 68, 68, 0.24);
222
+ --owo-sys-theme-danger-border: var(--owo-ref-color-status-danger-border);
223
+ --owo-sys-theme-danger-text: var(--owo-ref-color-status-danger-text);
224
+ --owo-sys-theme-info-bg: var(--owo-ref-color-status-info-bg);
225
+ --owo-sys-theme-info-border: var(--owo-ref-color-status-info-border);
226
+ --owo-sys-theme-info-text: var(--owo-ref-color-status-info-text);
227
+ --owo-sys-theme-control-focus-ring: var(--owo-ref-color-surface-ring);
228
+ --owo-sys-theme-control-focus-ring-offset: var(--owo-ref-color-surface-base);
229
+ --owo-sys-theme-overlay-bg: var(--owo-ref-color-overlay-strong);
230
+ }
package/dist/theme-light.css ADDED
@@ -0,0 +1,231 @@
1
+ /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
+ :root, :host {
3
+ --owo-ref-color-neutral-900: #1a1a1a;
4
+ --owo-ref-color-neutral-700: #4a4a4a;
5
+ --owo-ref-color-neutral-600: #71717a;
6
+ --owo-ref-color-brand-primary: #1a1a1a;
7
+ --owo-ref-color-brand-primary-hover: #000000;
8
+ --owo-ref-color-surface-canvas: #ffffff;
9
+ --owo-ref-color-surface-base: #ffffff;
10
+ --owo-ref-color-surface-subtle: #fafaf9;
11
+ --owo-ref-color-surface-raised: #ffffff;
12
+ --owo-ref-color-surface-inset: #f5f5f4;
13
+ --owo-ref-color-surface-border: #e5e7eb;
14
+ --owo-ref-color-surface-ring: #d6d3d1;
15
+ --owo-ref-color-overlay-strong: rgba(15, 23, 42, 0.18);
16
+ --owo-ref-color-text-on-brand: #ffffff;
17
+ --owo-ref-shadow-raised: 0 10px 20px rgba(15, 23, 42, 0.08);
18
+ --owo-ref-shadow-popover: 0 18px 40px rgba(15, 23, 42, 0.10);
19
+ --owo-ref-color-status-success-bg: rgba(16, 185, 129, 0.10);
20
+ --owo-ref-color-status-success-border: rgba(16, 185, 129, 0.20);
21
+ --owo-ref-color-status-success-text: #047857;
22
+ --owo-ref-color-status-warning-bg: rgba(245, 158, 11, 0.10);
23
+ --owo-ref-color-status-warning-border: rgba(245, 158, 11, 0.20);
24
+ --owo-ref-color-status-warning-text: #b45309;
25
+ --owo-ref-color-status-danger-bg: rgba(239, 68, 68, 0.10);
26
+ --owo-ref-color-status-danger-border: rgba(239, 68, 68, 0.20);
27
+ --owo-ref-color-status-danger-text: #b91c1c;
28
+ --owo-ref-color-status-info-bg: rgba(14, 165, 233, 0.10);
29
+ --owo-ref-color-status-info-border: rgba(14, 165, 233, 0.20);
30
+ --owo-ref-color-status-info-text: #0369a1;
31
+ --owo-ref-font-heading: var(--font-source-serif-pro), var(--font-noto-serif-sc), "Source Serif 4", Georgia, "Times New Roman", serif;
32
+ --owo-ref-radius-sm: 0.5rem;
33
+ --owo-ref-radius-md: 0.75rem;
34
+ --owo-ref-radius-lg: 1rem;
35
+ --owo-ref-radius-xl: 1.5rem;
36
+ --owo-ref-radius-2xl: 2rem;
37
+ --owo-ref-radius-full: 9999px;
38
+ --owo-ref-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
39
+ --owo-ref-motion-ease-decelerate: cubic-bezier(0, 0, 0, 1);
40
+ --owo-ref-motion-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
41
+ }
42
+ :root {
43
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
44
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
45
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
46
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
47
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
48
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
49
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
50
+ --owo-sys-preset-surface-shadow: var(--owo-ref-shadow-raised);
51
+ --owo-sys-preset-surface-shadow-strong: var(--owo-ref-shadow-popover);
52
+ --owo-sys-preset-surface-blur: 0px;
53
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
54
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
55
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
56
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
57
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
58
+ --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-sm);
59
+ --owo-sys-preset-control-radius-md: var(--owo-ref-radius-md);
60
+ --owo-sys-preset-control-radius-lg: var(--owo-ref-radius-lg);
61
+ --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
62
+ --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
63
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
64
+ --owo-sys-preset-control-border-width: 1px;
65
+ --owo-cmp-surface-bg: var(--owo-sys-preset-surface-bg);
66
+ --owo-cmp-surface-bg-subtle: var(--owo-sys-preset-surface-bg-subtle);
67
+ --owo-cmp-surface-bg-raised: var(--owo-sys-preset-surface-bg-raised);
68
+ --owo-cmp-surface-bg-inset: var(--owo-sys-preset-surface-bg-inset);
69
+ --owo-cmp-surface-border: var(--owo-sys-preset-surface-border);
70
+ --owo-cmp-surface-border-muted: var(--owo-sys-preset-surface-border-muted);
71
+ --owo-cmp-surface-border-strong: var(--owo-sys-preset-surface-border-strong);
72
+ --owo-cmp-surface-shadow: var(--owo-sys-preset-surface-shadow);
73
+ --owo-cmp-surface-shadow-strong: var(--owo-sys-preset-surface-shadow-strong);
74
+ --owo-cmp-surface-blur: var(--owo-sys-preset-surface-blur);
75
+ --owo-cmp-canvas-bg: var(--owo-sys-preset-canvas-bg);
76
+ --owo-cmp-canvas-bg-subtle: var(--owo-sys-preset-canvas-bg-subtle);
77
+ --owo-cmp-surface-container: var(--owo-sys-preset-surface-container);
78
+ --owo-cmp-surface-container-high: var(--owo-sys-preset-surface-container-high);
79
+ --owo-cmp-surface-container-highest: var(--owo-sys-preset-surface-container-highest);
80
+ --owo-cmp-text-primary: var(--owo-sys-theme-text-primary);
81
+ --owo-cmp-text-secondary: var(--owo-sys-theme-text-secondary);
82
+ --owo-cmp-text-muted: var(--owo-sys-theme-text-muted);
83
+ --owo-cmp-text-on-accent: var(--owo-sys-theme-text-on-accent);
84
+ --owo-cmp-accent-bg: var(--owo-sys-theme-accent-bg);
85
+ --owo-cmp-accent-bg-hover: var(--owo-sys-theme-accent-bg-hover);
86
+ --owo-cmp-accent-bg-muted: var(--owo-sys-theme-accent-bg-muted);
87
+ --owo-cmp-accent-text: var(--owo-sys-theme-text-on-accent);
88
+ --owo-cmp-accent-border: var(--owo-sys-theme-accent-border);
89
+ --owo-cmp-success-bg: var(--owo-sys-theme-success-bg);
90
+ --owo-cmp-success-border: var(--owo-sys-theme-success-border);
91
+ --owo-cmp-success-text: var(--owo-sys-theme-success-text);
92
+ --owo-cmp-warning-bg: var(--owo-sys-theme-warning-bg);
93
+ --owo-cmp-warning-border: var(--owo-sys-theme-warning-border);
94
+ --owo-cmp-warning-text: var(--owo-sys-theme-warning-text);
95
+ --owo-cmp-danger-bg: var(--owo-sys-theme-danger-bg);
96
+ --owo-cmp-danger-bg-emphasis: var(--owo-sys-theme-danger-bg-emphasis);
97
+ --owo-cmp-danger-border: var(--owo-sys-theme-danger-border);
98
+ --owo-cmp-danger-text: var(--owo-sys-theme-danger-text);
99
+ --owo-cmp-info-bg: var(--owo-sys-theme-info-bg);
100
+ --owo-cmp-info-border: var(--owo-sys-theme-info-border);
101
+ --owo-cmp-info-text: var(--owo-sys-theme-info-text);
102
+ --owo-cmp-control-radius-sm: var(--owo-sys-preset-control-radius-sm);
103
+ --owo-cmp-control-radius-md: var(--owo-sys-preset-control-radius-md);
104
+ --owo-cmp-control-radius-lg: var(--owo-sys-preset-control-radius-lg);
105
+ --owo-cmp-control-radius-xl: var(--owo-sys-preset-control-radius-xl);
106
+ --owo-cmp-control-radius-2xl: var(--owo-sys-preset-control-radius-2xl);
107
+ --owo-cmp-control-radius-full: var(--owo-sys-preset-control-radius-full);
108
+ --owo-cmp-control-border-width: var(--owo-sys-preset-control-border-width);
109
+ --owo-cmp-control-focus-ring: var(--owo-sys-theme-control-focus-ring);
110
+ --owo-cmp-control-focus-ring-offset: var(--owo-sys-theme-control-focus-ring-offset);
111
+ --owo-cmp-font-heading: var(--owo-ref-font-heading);
112
+ --owo-cmp-motion-duration-fast: 0.15s;
113
+ --owo-cmp-motion-duration-default: 0.2s;
114
+ --owo-cmp-motion-ease-standard: var(--owo-ref-motion-ease-standard);
115
+ --owo-cmp-motion-ease-decelerate: var(--owo-ref-motion-ease-decelerate);
116
+ --owo-cmp-motion-ease-accelerate: var(--owo-ref-motion-ease-accelerate);
117
+ --owo-cmp-density-compact: 0.875;
118
+ --owo-cmp-density-default: 1;
119
+ --owo-cmp-density-comfortable: 1.125;
120
+ --owo-cmp-overlay-bg: var(--owo-sys-theme-overlay-bg);
121
+ --owo-cmp-z-dropdown: 1000;
122
+ --owo-cmp-z-modal: 1100;
123
+ --owo-cmp-z-toast: 1200;
124
+ --owo-feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
125
+ --owo-feedback-neutral-border: var(--owo-cmp-surface-border);
126
+ --owo-feedback-neutral-text: var(--owo-cmp-text-primary);
127
+ --owo-feedback-neutral-icon: var(--owo-cmp-text-secondary);
128
+ --owo-feedback-info-bg: var(--owo-cmp-info-bg);
129
+ --owo-feedback-info-border: var(--owo-cmp-info-border);
130
+ --owo-feedback-info-text: var(--owo-cmp-info-text);
131
+ --owo-feedback-info-icon: var(--owo-cmp-info-text);
132
+ --owo-feedback-success-bg: var(--owo-cmp-success-bg);
133
+ --owo-feedback-success-border: var(--owo-cmp-success-border);
134
+ --owo-feedback-success-text: var(--owo-cmp-success-text);
135
+ --owo-feedback-success-icon: var(--owo-cmp-success-text);
136
+ --owo-feedback-warning-bg: var(--owo-cmp-warning-bg);
137
+ --owo-feedback-warning-border: var(--owo-cmp-warning-border);
138
+ --owo-feedback-warning-text: var(--owo-cmp-warning-text);
139
+ --owo-feedback-warning-icon: var(--owo-cmp-warning-text);
140
+ --owo-feedback-danger-bg: var(--owo-cmp-danger-bg);
141
+ --owo-feedback-danger-border: var(--owo-cmp-danger-border);
142
+ --owo-feedback-danger-text: var(--owo-cmp-danger-text);
143
+ --owo-feedback-danger-icon: var(--owo-cmp-danger-text);
144
+ }
145
+ :root,
146
+ :root[data-theme="light"],
147
+ .owoui-theme-light {
148
+ --owo-ref-color-neutral-900: #1a1a1a;
149
+ --owo-ref-color-neutral-800: #2d2d2d;
150
+ --owo-ref-color-neutral-700: #4a4a4a;
151
+ --owo-ref-color-neutral-600: #71717a;
152
+ --owo-ref-color-neutral-500: #a1a1aa;
153
+ --owo-ref-color-neutral-400: #d4d4d8;
154
+ --owo-ref-color-neutral-300: #e4e4e7;
155
+ --owo-ref-color-neutral-200: #f0f0f2;
156
+ --owo-ref-color-neutral-100: #f8f8f9;
157
+ --owo-ref-color-brand-primary: #1a1a1a;
158
+ --owo-ref-color-brand-primary-hover: #000000;
159
+ --owo-ref-color-brand-accent: #4a4a4a;
160
+ --owo-ref-color-surface-canvas: #ffffff;
161
+ --owo-ref-color-surface-base: #ffffff;
162
+ --owo-ref-color-surface-subtle: #fafaf9;
163
+ --owo-ref-color-surface-raised: #ffffff;
164
+ --owo-ref-color-surface-inset: #f5f5f4;
165
+ --owo-ref-color-surface-border: #e5e7eb;
166
+ --owo-ref-color-surface-ring: #d6d3d1;
167
+ --owo-ref-color-surface-overlay: rgba(0, 0, 0, 0.4);
168
+ --owo-ref-color-overlay-soft: rgba(244, 238, 230, 0.56);
169
+ --owo-ref-color-overlay-strong: rgba(15, 23, 42, 0.18);
170
+ --owo-ref-color-highlight-soft: rgba(255, 255, 255, 0.56);
171
+ --owo-ref-color-highlight-sheen: rgba(255, 255, 255, 0.34);
172
+ --owo-ref-color-text-on-brand: #ffffff;
173
+ --owo-ref-color-code-block-bg: #f4f4f5;
174
+ --owo-ref-color-code-block-border: #e4e4e7;
175
+ --owo-ref-color-code-block-divider: #ececed;
176
+ --owo-ref-color-code-inline-bg: #f4f4f5;
177
+ --owo-ref-color-status-success-bg: rgba(16, 185, 129, 0.10);
178
+ --owo-ref-color-status-success-border: rgba(16, 185, 129, 0.20);
179
+ --owo-ref-color-status-success-text: #047857;
180
+ --owo-ref-color-status-warning-bg: rgba(245, 158, 11, 0.10);
181
+ --owo-ref-color-status-warning-border: rgba(245, 158, 11, 0.20);
182
+ --owo-ref-color-status-warning-text: #b45309;
183
+ --owo-ref-color-status-danger-bg: rgba(239, 68, 68, 0.10);
184
+ --owo-ref-color-status-danger-border: rgba(239, 68, 68, 0.20);
185
+ --owo-ref-color-status-danger-text: #b91c1c;
186
+ --owo-ref-color-status-info-bg: rgba(14, 165, 233, 0.10);
187
+ --owo-ref-color-status-info-border: rgba(14, 165, 233, 0.20);
188
+ --owo-ref-color-status-info-text: #0369a1;
189
+ --owo-sys-theme-surface-canvas: var(--owo-ref-color-surface-canvas);
190
+ --owo-sys-theme-surface-base: var(--owo-ref-color-surface-base);
191
+ --owo-sys-theme-surface-subtle: var(--owo-ref-color-surface-subtle);
192
+ --owo-sys-theme-surface-raised: var(--owo-ref-color-surface-raised);
193
+ --owo-sys-theme-surface-inset: var(--owo-ref-color-surface-inset);
194
+ --owo-sys-theme-surface-border: var(--owo-ref-color-surface-border);
195
+ --owo-sys-theme-surface-border-muted: rgba(0, 0, 0, 0.06);
196
+ --owo-sys-theme-surface-border-strong: var(--owo-ref-color-surface-ring);
197
+ --owo-sys-theme-canvas-bg-subtle: #f5f5f4;
198
+ --owo-sys-theme-surface-container: #f4f4f5;
199
+ --owo-sys-theme-surface-container-high: #ececed;
200
+ --owo-sys-theme-surface-container-highest: #e4e4e7;
201
+ --owo-sys-theme-text-primary: var(--owo-ref-color-neutral-900);
202
+ --owo-sys-theme-text-secondary: var(--owo-ref-color-neutral-700);
203
+ --owo-sys-theme-text-muted: var(--owo-ref-color-neutral-600);
204
+ --owo-sys-theme-text-on-accent: var(--owo-ref-color-text-on-brand);
205
+ --owo-sys-theme-accent-bg: var(--owo-ref-color-brand-primary);
206
+ --owo-sys-theme-accent-bg-hover: var(--owo-ref-color-brand-primary-hover);
207
+ --owo-sys-theme-accent-bg-muted: color-mix(in srgb, #1a1a1a 10%, #ffffff);
208
+ @supports (color: color-mix(in lab, red, red)) {
209
+ --owo-sys-theme-accent-bg-muted: color-mix(in srgb, var(--owo-ref-color-brand-primary) 10%, var(--owo-ref-color-surface-base));
210
+ }
211
+ --owo-sys-theme-accent-border: color-mix(in srgb, #1a1a1a 40%, transparent);
212
+ @supports (color: color-mix(in lab, red, red)) {
213
+ --owo-sys-theme-accent-border: color-mix(in srgb, var(--owo-ref-color-brand-primary) 40%, transparent);
214
+ }
215
+ --owo-sys-theme-success-bg: var(--owo-ref-color-status-success-bg);
216
+ --owo-sys-theme-success-border: var(--owo-ref-color-status-success-border);
217
+ --owo-sys-theme-success-text: var(--owo-ref-color-status-success-text);
218
+ --owo-sys-theme-warning-bg: var(--owo-ref-color-status-warning-bg);
219
+ --owo-sys-theme-warning-border: var(--owo-ref-color-status-warning-border);
220
+ --owo-sys-theme-warning-text: var(--owo-ref-color-status-warning-text);
221
+ --owo-sys-theme-danger-bg: var(--owo-ref-color-status-danger-bg);
222
+ --owo-sys-theme-danger-bg-emphasis: rgba(239, 68, 68, 0.18);
223
+ --owo-sys-theme-danger-border: var(--owo-ref-color-status-danger-border);
224
+ --owo-sys-theme-danger-text: var(--owo-ref-color-status-danger-text);
225
+ --owo-sys-theme-info-bg: var(--owo-ref-color-status-info-bg);
226
+ --owo-sys-theme-info-border: var(--owo-ref-color-status-info-border);
227
+ --owo-sys-theme-info-text: var(--owo-ref-color-status-info-text);
228
+ --owo-sys-theme-control-focus-ring: var(--owo-ref-color-surface-ring);
229
+ --owo-sys-theme-control-focus-ring-offset: var(--owo-ref-color-surface-base);
230
+ --owo-sys-theme-overlay-bg: var(--owo-ref-color-overlay-strong);
231
+ }
package/dist/tokens.css ADDED
@@ -0,0 +1,118 @@
1
+ /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
+ :root, :host {
3
+ --owo-ref-shadow-raised: 0 10px 20px rgba(15, 23, 42, 0.08);
4
+ --owo-ref-shadow-popover: 0 18px 40px rgba(15, 23, 42, 0.10);
5
+ --owo-ref-font-heading: var(--font-source-serif-pro), var(--font-noto-serif-sc), "Source Serif 4", Georgia, "Times New Roman", serif;
6
+ --owo-ref-radius-sm: 0.5rem;
7
+ --owo-ref-radius-md: 0.75rem;
8
+ --owo-ref-radius-lg: 1rem;
9
+ --owo-ref-radius-xl: 1.5rem;
10
+ --owo-ref-radius-2xl: 2rem;
11
+ --owo-ref-radius-full: 9999px;
12
+ --owo-ref-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
13
+ --owo-ref-motion-ease-decelerate: cubic-bezier(0, 0, 0, 1);
14
+ --owo-ref-motion-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
15
+ }
16
+ :root {
17
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
18
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
19
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
20
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
21
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
22
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
23
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
24
+ --owo-sys-preset-surface-shadow: var(--owo-ref-shadow-raised);
25
+ --owo-sys-preset-surface-shadow-strong: var(--owo-ref-shadow-popover);
26
+ --owo-sys-preset-surface-blur: 0px;
27
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
28
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
29
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
30
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
31
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
32
+ --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-sm);
33
+ --owo-sys-preset-control-radius-md: var(--owo-ref-radius-md);
34
+ --owo-sys-preset-control-radius-lg: var(--owo-ref-radius-lg);
35
+ --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
36
+ --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
37
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
38
+ --owo-sys-preset-control-border-width: 1px;
39
+ --owo-cmp-surface-bg: var(--owo-sys-preset-surface-bg);
40
+ --owo-cmp-surface-bg-subtle: var(--owo-sys-preset-surface-bg-subtle);
41
+ --owo-cmp-surface-bg-raised: var(--owo-sys-preset-surface-bg-raised);
42
+ --owo-cmp-surface-bg-inset: var(--owo-sys-preset-surface-bg-inset);
43
+ --owo-cmp-surface-border: var(--owo-sys-preset-surface-border);
44
+ --owo-cmp-surface-border-muted: var(--owo-sys-preset-surface-border-muted);
45
+ --owo-cmp-surface-border-strong: var(--owo-sys-preset-surface-border-strong);
46
+ --owo-cmp-surface-shadow: var(--owo-sys-preset-surface-shadow);
47
+ --owo-cmp-surface-shadow-strong: var(--owo-sys-preset-surface-shadow-strong);
48
+ --owo-cmp-surface-blur: var(--owo-sys-preset-surface-blur);
49
+ --owo-cmp-canvas-bg: var(--owo-sys-preset-canvas-bg);
50
+ --owo-cmp-canvas-bg-subtle: var(--owo-sys-preset-canvas-bg-subtle);
51
+ --owo-cmp-surface-container: var(--owo-sys-preset-surface-container);
52
+ --owo-cmp-surface-container-high: var(--owo-sys-preset-surface-container-high);
53
+ --owo-cmp-surface-container-highest: var(--owo-sys-preset-surface-container-highest);
54
+ --owo-cmp-text-primary: var(--owo-sys-theme-text-primary);
55
+ --owo-cmp-text-secondary: var(--owo-sys-theme-text-secondary);
56
+ --owo-cmp-text-muted: var(--owo-sys-theme-text-muted);
57
+ --owo-cmp-text-on-accent: var(--owo-sys-theme-text-on-accent);
58
+ --owo-cmp-accent-bg: var(--owo-sys-theme-accent-bg);
59
+ --owo-cmp-accent-bg-hover: var(--owo-sys-theme-accent-bg-hover);
60
+ --owo-cmp-accent-bg-muted: var(--owo-sys-theme-accent-bg-muted);
61
+ --owo-cmp-accent-text: var(--owo-sys-theme-text-on-accent);
62
+ --owo-cmp-accent-border: var(--owo-sys-theme-accent-border);
63
+ --owo-cmp-success-bg: var(--owo-sys-theme-success-bg);
64
+ --owo-cmp-success-border: var(--owo-sys-theme-success-border);
65
+ --owo-cmp-success-text: var(--owo-sys-theme-success-text);
66
+ --owo-cmp-warning-bg: var(--owo-sys-theme-warning-bg);
67
+ --owo-cmp-warning-border: var(--owo-sys-theme-warning-border);
68
+ --owo-cmp-warning-text: var(--owo-sys-theme-warning-text);
69
+ --owo-cmp-danger-bg: var(--owo-sys-theme-danger-bg);
70
+ --owo-cmp-danger-bg-emphasis: var(--owo-sys-theme-danger-bg-emphasis);
71
+ --owo-cmp-danger-border: var(--owo-sys-theme-danger-border);
72
+ --owo-cmp-danger-text: var(--owo-sys-theme-danger-text);
73
+ --owo-cmp-info-bg: var(--owo-sys-theme-info-bg);
74
+ --owo-cmp-info-border: var(--owo-sys-theme-info-border);
75
+ --owo-cmp-info-text: var(--owo-sys-theme-info-text);
76
+ --owo-cmp-control-radius-sm: var(--owo-sys-preset-control-radius-sm);
77
+ --owo-cmp-control-radius-md: var(--owo-sys-preset-control-radius-md);
78
+ --owo-cmp-control-radius-lg: var(--owo-sys-preset-control-radius-lg);
79
+ --owo-cmp-control-radius-xl: var(--owo-sys-preset-control-radius-xl);
80
+ --owo-cmp-control-radius-2xl: var(--owo-sys-preset-control-radius-2xl);
81
+ --owo-cmp-control-radius-full: var(--owo-sys-preset-control-radius-full);
82
+ --owo-cmp-control-border-width: var(--owo-sys-preset-control-border-width);
83
+ --owo-cmp-control-focus-ring: var(--owo-sys-theme-control-focus-ring);
84
+ --owo-cmp-control-focus-ring-offset: var(--owo-sys-theme-control-focus-ring-offset);
85
+ --owo-cmp-font-heading: var(--owo-ref-font-heading);
86
+ --owo-cmp-motion-duration-fast: 0.15s;
87
+ --owo-cmp-motion-duration-default: 0.2s;
88
+ --owo-cmp-motion-ease-standard: var(--owo-ref-motion-ease-standard);
89
+ --owo-cmp-motion-ease-decelerate: var(--owo-ref-motion-ease-decelerate);
90
+ --owo-cmp-motion-ease-accelerate: var(--owo-ref-motion-ease-accelerate);
91
+ --owo-cmp-density-compact: 0.875;
92
+ --owo-cmp-density-default: 1;
93
+ --owo-cmp-density-comfortable: 1.125;
94
+ --owo-cmp-overlay-bg: var(--owo-sys-theme-overlay-bg);
95
+ --owo-cmp-z-dropdown: 1000;
96
+ --owo-cmp-z-modal: 1100;
97
+ --owo-cmp-z-toast: 1200;
98
+ --owo-feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
99
+ --owo-feedback-neutral-border: var(--owo-cmp-surface-border);
100
+ --owo-feedback-neutral-text: var(--owo-cmp-text-primary);
101
+ --owo-feedback-neutral-icon: var(--owo-cmp-text-secondary);
102
+ --owo-feedback-info-bg: var(--owo-cmp-info-bg);
103
+ --owo-feedback-info-border: var(--owo-cmp-info-border);
104
+ --owo-feedback-info-text: var(--owo-cmp-info-text);
105
+ --owo-feedback-info-icon: var(--owo-cmp-info-text);
106
+ --owo-feedback-success-bg: var(--owo-cmp-success-bg);
107
+ --owo-feedback-success-border: var(--owo-cmp-success-border);
108
+ --owo-feedback-success-text: var(--owo-cmp-success-text);
109
+ --owo-feedback-success-icon: var(--owo-cmp-success-text);
110
+ --owo-feedback-warning-bg: var(--owo-cmp-warning-bg);
111
+ --owo-feedback-warning-border: var(--owo-cmp-warning-border);
112
+ --owo-feedback-warning-text: var(--owo-cmp-warning-text);
113
+ --owo-feedback-warning-icon: var(--owo-cmp-warning-text);
114
+ --owo-feedback-danger-bg: var(--owo-cmp-danger-bg);
115
+ --owo-feedback-danger-border: var(--owo-cmp-danger-border);
116
+ --owo-feedback-danger-text: var(--owo-cmp-danger-text);
117
+ --owo-feedback-danger-icon: var(--owo-cmp-danger-text);
118
+ }
package/dist/tokens.d.ts CHANGED
@@ -1,38 +1,45 @@
1
- declare const semanticTokenKeys: readonly ["--ui-surface-bg", "--ui-surface-bg-subtle", "--ui-surface-bg-raised", "--ui-surface-bg-inset", "--ui-surface-border", "--ui-surface-border-muted", "--ui-surface-border-strong", "--ui-surface-shadow", "--ui-surface-shadow-strong", "--ui-surface-blur", "--ui-canvas-bg", "--ui-canvas-bg-subtle", "--ui-surface-container", "--ui-surface-container-high", "--ui-surface-container-highest", "--ui-text-primary", "--ui-text-secondary", "--ui-text-muted", "--ui-text-on-accent", "--ui-accent-bg", "--ui-accent-bg-hover", "--ui-accent-bg-muted", "--ui-accent-text", "--ui-accent-border", "--ui-success-bg", "--ui-success-border", "--ui-success-text", "--ui-warning-bg", "--ui-warning-border", "--ui-warning-text", "--ui-danger-bg", "--ui-danger-bg-emphasis", "--ui-danger-border", "--ui-danger-text", "--ui-info-bg", "--ui-info-border", "--ui-info-text", "--ui-control-radius-sm", "--ui-control-radius-md", "--ui-control-radius-lg", "--ui-control-radius-xl", "--ui-control-radius-2xl", "--ui-control-border-width", "--ui-control-focus-ring", "--ui-control-focus-ring-offset", "--ui-font-heading", "--ui-motion-duration-fast", "--ui-motion-duration-default", "--ui-motion-ease-standard", "--ui-density-compact", "--ui-density-default", "--ui-density-comfortable"];
1
+ /** Raw foundational neutral scale — palette primitives, not component semantics. */
2
+ declare const foundationNeutralKeys: readonly ["--owo-ref-color-neutral-900", "--owo-ref-color-neutral-800", "--owo-ref-color-neutral-700", "--owo-ref-color-neutral-600", "--owo-ref-color-neutral-500", "--owo-ref-color-neutral-400", "--owo-ref-color-neutral-300", "--owo-ref-color-neutral-200", "--owo-ref-color-neutral-100"];
3
+ type FoundationNeutralKey = (typeof foundationNeutralKeys)[number];
4
+ declare const semanticTokenKeys: readonly ["--owo-cmp-surface-bg", "--owo-cmp-surface-bg-subtle", "--owo-cmp-surface-bg-raised", "--owo-cmp-surface-bg-inset", "--owo-cmp-surface-border", "--owo-cmp-surface-border-muted", "--owo-cmp-surface-border-strong", "--owo-cmp-surface-shadow", "--owo-cmp-surface-shadow-strong", "--owo-cmp-surface-blur", "--owo-cmp-canvas-bg", "--owo-cmp-canvas-bg-subtle", "--owo-cmp-surface-container", "--owo-cmp-surface-container-high", "--owo-cmp-surface-container-highest", "--owo-cmp-overlay-bg", "--owo-cmp-text-primary", "--owo-cmp-text-secondary", "--owo-cmp-text-muted", "--owo-cmp-text-on-accent", "--owo-cmp-accent-bg", "--owo-cmp-accent-bg-hover", "--owo-cmp-accent-bg-muted", "--owo-cmp-accent-text", "--owo-cmp-accent-border", "--owo-cmp-success-bg", "--owo-cmp-success-border", "--owo-cmp-success-text", "--owo-cmp-warning-bg", "--owo-cmp-warning-border", "--owo-cmp-warning-text", "--owo-cmp-danger-bg", "--owo-cmp-danger-bg-emphasis", "--owo-cmp-danger-border", "--owo-cmp-danger-text", "--owo-cmp-info-bg", "--owo-cmp-info-border", "--owo-cmp-info-text", "--owo-cmp-control-radius-sm", "--owo-cmp-control-radius-md", "--owo-cmp-control-radius-lg", "--owo-cmp-control-radius-xl", "--owo-cmp-control-radius-2xl", "--owo-cmp-control-radius-full", "--owo-cmp-control-border-width", "--owo-cmp-control-focus-ring", "--owo-cmp-control-focus-ring-offset", "--owo-cmp-font-heading", "--owo-cmp-motion-duration-fast", "--owo-cmp-motion-duration-default", "--owo-cmp-motion-ease-standard", "--owo-cmp-motion-ease-decelerate", "--owo-cmp-motion-ease-accelerate", "--owo-cmp-density-compact", "--owo-cmp-density-default", "--owo-cmp-density-comfortable", "--owo-cmp-z-dropdown", "--owo-cmp-z-modal", "--owo-cmp-z-toast"];
2
5
  type SemanticTokenKey = (typeof semanticTokenKeys)[number];
3
6
  declare const themeNames: readonly ["light", "dark"];
4
7
  type OwoUiThemeName = (typeof themeNames)[number];
5
8
  declare const tokenGroups: readonly [{
6
9
  readonly id: "surface";
7
10
  readonly label: "Surface";
8
- readonly tokens: readonly ["--ui-surface-bg", "--ui-surface-bg-subtle", "--ui-surface-bg-raised", "--ui-surface-bg-inset", "--ui-surface-border", "--ui-surface-border-muted", "--ui-surface-border-strong", "--ui-surface-shadow", "--ui-surface-shadow-strong", "--ui-surface-blur", "--ui-canvas-bg", "--ui-canvas-bg-subtle", "--ui-surface-container", "--ui-surface-container-high", "--ui-surface-container-highest"];
11
+ readonly tokens: readonly ["--owo-cmp-surface-bg", "--owo-cmp-surface-bg-subtle", "--owo-cmp-surface-bg-raised", "--owo-cmp-surface-bg-inset", "--owo-cmp-surface-border", "--owo-cmp-surface-border-muted", "--owo-cmp-surface-border-strong", "--owo-cmp-surface-shadow", "--owo-cmp-surface-shadow-strong", "--owo-cmp-surface-blur", "--owo-cmp-canvas-bg", "--owo-cmp-canvas-bg-subtle", "--owo-cmp-surface-container", "--owo-cmp-surface-container-high", "--owo-cmp-surface-container-highest", "--owo-cmp-overlay-bg"];
9
12
  }, {
10
13
  readonly id: "text";
11
14
  readonly label: "Text";
12
- readonly tokens: readonly ["--ui-text-primary", "--ui-text-secondary", "--ui-text-muted", "--ui-text-on-accent"];
15
+ readonly tokens: readonly ["--owo-cmp-text-primary", "--owo-cmp-text-secondary", "--owo-cmp-text-muted", "--owo-cmp-text-on-accent"];
13
16
  }, {
14
17
  readonly id: "accent";
15
18
  readonly label: "Accent";
16
- readonly tokens: readonly ["--ui-accent-bg", "--ui-accent-bg-hover", "--ui-accent-bg-muted", "--ui-accent-text", "--ui-accent-border"];
19
+ readonly tokens: readonly ["--owo-cmp-accent-bg", "--owo-cmp-accent-bg-hover", "--owo-cmp-accent-bg-muted", "--owo-cmp-accent-text", "--owo-cmp-accent-border"];
17
20
  }, {
18
21
  readonly id: "feedback";
19
22
  readonly label: "Feedback";
20
- readonly tokens: readonly ["--ui-success-bg", "--ui-success-border", "--ui-success-text", "--ui-warning-bg", "--ui-warning-border", "--ui-warning-text", "--ui-danger-bg", "--ui-danger-bg-emphasis", "--ui-danger-border", "--ui-danger-text", "--ui-info-bg", "--ui-info-border", "--ui-info-text"];
23
+ readonly tokens: readonly ["--owo-cmp-success-bg", "--owo-cmp-success-border", "--owo-cmp-success-text", "--owo-cmp-warning-bg", "--owo-cmp-warning-border", "--owo-cmp-warning-text", "--owo-cmp-danger-bg", "--owo-cmp-danger-bg-emphasis", "--owo-cmp-danger-border", "--owo-cmp-danger-text", "--owo-cmp-info-bg", "--owo-cmp-info-border", "--owo-cmp-info-text"];
21
24
  }, {
22
25
  readonly id: "control";
23
26
  readonly label: "Control";
24
- readonly tokens: readonly ["--ui-control-radius-sm", "--ui-control-radius-md", "--ui-control-radius-lg", "--ui-control-radius-xl", "--ui-control-radius-2xl", "--ui-control-border-width", "--ui-control-focus-ring", "--ui-control-focus-ring-offset"];
27
+ readonly tokens: readonly ["--owo-cmp-control-radius-sm", "--owo-cmp-control-radius-md", "--owo-cmp-control-radius-lg", "--owo-cmp-control-radius-xl", "--owo-cmp-control-radius-2xl", "--owo-cmp-control-radius-full", "--owo-cmp-control-border-width", "--owo-cmp-control-focus-ring", "--owo-cmp-control-focus-ring-offset"];
25
28
  }, {
26
29
  readonly id: "typography";
27
30
  readonly label: "Typography";
28
- readonly tokens: readonly ["--ui-font-heading"];
31
+ readonly tokens: readonly ["--owo-cmp-font-heading"];
29
32
  }, {
30
33
  readonly id: "motion-density";
31
34
  readonly label: "Motion & Density";
32
- readonly tokens: readonly ["--ui-motion-duration-fast", "--ui-motion-duration-default", "--ui-motion-ease-standard", "--ui-density-compact", "--ui-density-default", "--ui-density-comfortable"];
35
+ readonly tokens: readonly ["--owo-cmp-motion-duration-fast", "--owo-cmp-motion-duration-default", "--owo-cmp-motion-ease-standard", "--owo-cmp-motion-ease-decelerate", "--owo-cmp-motion-ease-accelerate", "--owo-cmp-density-compact", "--owo-cmp-density-default", "--owo-cmp-density-comfortable"];
36
+ }, {
37
+ readonly id: "layering";
38
+ readonly label: "Layering";
39
+ readonly tokens: readonly ["--owo-cmp-z-dropdown", "--owo-cmp-z-modal", "--owo-cmp-z-toast"];
33
40
  }];
34
41
  declare const presetNames: readonly ["default", "flat", "elevated", "glass"];
35
42
  type OwoUiPresetName = (typeof presetNames)[number];
36
43
  declare const tokenDescriptions: Record<SemanticTokenKey, string>;
37
44
 
38
- export { type OwoUiPresetName, type OwoUiThemeName, type SemanticTokenKey, presetNames, semanticTokenKeys, themeNames, tokenDescriptions, tokenGroups };
45
+ export { type FoundationNeutralKey, type OwoUiPresetName, type OwoUiThemeName, type SemanticTokenKey, foundationNeutralKeys, presetNames, semanticTokenKeys, themeNames, tokenDescriptions, tokenGroups };