@owodesign/owoui 0.1.5 → 0.1.7-beta

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 (20) hide show
  1. package/README.md +4 -0
  2. package/dist/index.css +4 -0
  3. package/dist/index.d.ts +40 -20
  4. package/dist/index.min.js +1 -1
  5. package/dist/preset-default.css +5 -118
  6. package/dist/preset-elevated.css +12 -146
  7. package/dist/preset-flat.css +5 -119
  8. package/dist/preset-glass.css +15 -158
  9. package/dist/storybook/index.css +4 -0
  10. package/dist/storybook/index.min.js +87 -14
  11. package/dist/storybook-static/app.css +381 -3813
  12. package/dist/storybook-static/assets/main.css +1 -2
  13. package/dist/storybook-static/assets/main.js +93 -21
  14. package/dist/style.css +152 -2785
  15. package/dist/theme-dark.css +9 -152
  16. package/dist/theme-light.css +23 -152
  17. package/dist/tokens.css +105 -5
  18. package/dist/tokens.d.ts +2 -2
  19. package/dist/tokens.min.js +1 -1
  20. package/package.json +17 -7
package/dist/theme-dark.css CHANGED
@@ -1,147 +1,3 @@
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
1
  :root[data-theme="dark"],
146
2
  .owoui-theme-dark {
147
3
  --owo-ref-color-neutral-900: #fafafa;
@@ -153,9 +9,11 @@
153
9
  --owo-ref-color-neutral-300: #27272a;
154
10
  --owo-ref-color-neutral-200: #1f1f22;
155
11
  --owo-ref-color-neutral-100: #18181a;
12
+
156
13
  --owo-ref-color-brand-primary: #c6c6c7;
157
14
  --owo-ref-color-brand-primary-hover: #d4d4d8;
158
15
  --owo-ref-color-brand-accent: #a1a1aa;
16
+
159
17
  --owo-ref-color-surface-canvas: #0e0e0e;
160
18
  --owo-ref-color-surface-base: #18181b;
161
19
  --owo-ref-color-surface-subtle: #1c1c1f;
@@ -164,15 +22,19 @@
164
22
  --owo-ref-color-surface-border: rgba(255, 255, 255, 0.12);
165
23
  --owo-ref-color-surface-ring: rgba(255, 255, 255, 0.24);
166
24
  --owo-ref-color-surface-overlay: rgba(0, 0, 0, 0.6);
25
+
167
26
  --owo-ref-color-overlay-soft: rgba(0, 0, 0, 0.32);
168
27
  --owo-ref-color-overlay-strong: rgba(0, 0, 0, 0.56);
169
28
  --owo-ref-color-highlight-soft: rgba(255, 255, 255, 0.06);
170
29
  --owo-ref-color-highlight-sheen: rgba(255, 255, 255, 0.08);
30
+
171
31
  --owo-ref-color-text-on-brand: #1a1a1a;
32
+
172
33
  --owo-ref-color-code-block-bg: #1e1e22;
173
34
  --owo-ref-color-code-block-border: #2d2d32;
174
35
  --owo-ref-color-code-block-divider: #27272c;
175
36
  --owo-ref-color-code-inline-bg: #27272a;
37
+
176
38
  --owo-ref-color-status-success-bg: rgba(16, 185, 129, 0.15);
177
39
  --owo-ref-color-status-success-border: rgba(16, 185, 129, 0.3);
178
40
  --owo-ref-color-status-success-text: #6ee7b7;
@@ -185,6 +47,7 @@
185
47
  --owo-ref-color-status-info-bg: rgba(14, 165, 233, 0.15);
186
48
  --owo-ref-color-status-info-border: rgba(14, 165, 233, 0.3);
187
49
  --owo-ref-color-status-info-text: #7dd3fc;
50
+
188
51
  --owo-sys-theme-surface-canvas: var(--owo-ref-color-surface-canvas);
189
52
  --owo-sys-theme-surface-base: var(--owo-ref-color-surface-base);
190
53
  --owo-sys-theme-surface-subtle: var(--owo-ref-color-surface-subtle);
@@ -203,14 +66,8 @@
203
66
  --owo-sys-theme-text-on-accent: var(--owo-ref-color-text-on-brand);
204
67
  --owo-sys-theme-accent-bg: var(--owo-ref-color-brand-primary);
205
68
  --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
- }
69
+ --owo-sys-theme-accent-bg-muted: color-mix(in srgb, var(--owo-ref-color-brand-primary) 14%, var(--owo-ref-color-surface-base));
70
+ --owo-sys-theme-accent-border: color-mix(in srgb, var(--owo-ref-color-brand-primary) 50%, transparent);
214
71
  --owo-sys-theme-success-bg: var(--owo-ref-color-status-success-bg);
215
72
  --owo-sys-theme-success-border: var(--owo-ref-color-status-success-border);
216
73
  --owo-sys-theme-success-text: var(--owo-ref-color-status-success-text);
package/dist/theme-light.css CHANGED
@@ -1,150 +1,13 @@
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
- }
1
+ /* ================================================================== */
2
+ /* Light theme — all --owo-ref-* primitives + --owo-sys-theme-* maps */
3
+ /* */
4
+ /* :root (bare) is included so light acts as the default when no */
5
+ /* explicit data-theme is set. */
6
+ /* ================================================================== */
145
7
  :root,
146
8
  :root[data-theme="light"],
147
9
  .owoui-theme-light {
10
+ /* Neutral scale */
148
11
  --owo-ref-color-neutral-900: #1a1a1a;
149
12
  --owo-ref-color-neutral-800: #2d2d2d;
150
13
  --owo-ref-color-neutral-700: #4a4a4a;
@@ -154,9 +17,13 @@
154
17
  --owo-ref-color-neutral-300: #e4e4e7;
155
18
  --owo-ref-color-neutral-200: #f0f0f2;
156
19
  --owo-ref-color-neutral-100: #f8f8f9;
20
+
21
+ /* Brand */
157
22
  --owo-ref-color-brand-primary: #1a1a1a;
158
23
  --owo-ref-color-brand-primary-hover: #000000;
159
24
  --owo-ref-color-brand-accent: #4a4a4a;
25
+
26
+ /* Surfaces */
160
27
  --owo-ref-color-surface-canvas: #ffffff;
161
28
  --owo-ref-color-surface-base: #ffffff;
162
29
  --owo-ref-color-surface-subtle: #fafaf9;
@@ -165,15 +32,23 @@
165
32
  --owo-ref-color-surface-border: #e5e7eb;
166
33
  --owo-ref-color-surface-ring: #d6d3d1;
167
34
  --owo-ref-color-surface-overlay: rgba(0, 0, 0, 0.4);
35
+
36
+ /* Overlays & highlights */
168
37
  --owo-ref-color-overlay-soft: rgba(244, 238, 230, 0.56);
169
38
  --owo-ref-color-overlay-strong: rgba(15, 23, 42, 0.18);
170
39
  --owo-ref-color-highlight-soft: rgba(255, 255, 255, 0.56);
171
40
  --owo-ref-color-highlight-sheen: rgba(255, 255, 255, 0.34);
41
+
42
+ /* Text on brand */
172
43
  --owo-ref-color-text-on-brand: #ffffff;
44
+
45
+ /* Code blocks */
173
46
  --owo-ref-color-code-block-bg: #f4f4f5;
174
47
  --owo-ref-color-code-block-border: #e4e4e7;
175
48
  --owo-ref-color-code-block-divider: #ececed;
176
49
  --owo-ref-color-code-inline-bg: #f4f4f5;
50
+
51
+ /* Status */
177
52
  --owo-ref-color-status-success-bg: rgba(16, 185, 129, 0.10);
178
53
  --owo-ref-color-status-success-border: rgba(16, 185, 129, 0.20);
179
54
  --owo-ref-color-status-success-text: #047857;
@@ -186,6 +61,8 @@
186
61
  --owo-ref-color-status-info-bg: rgba(14, 165, 233, 0.10);
187
62
  --owo-ref-color-status-info-border: rgba(14, 165, 233, 0.20);
188
63
  --owo-ref-color-status-info-text: #0369a1;
64
+
65
+ /* ---- Theme semantic mappings (--owo-ref-* -> --owo-sys-theme-*) ---- */
189
66
  --owo-sys-theme-surface-canvas: var(--owo-ref-color-surface-canvas);
190
67
  --owo-sys-theme-surface-base: var(--owo-ref-color-surface-base);
191
68
  --owo-sys-theme-surface-subtle: var(--owo-ref-color-surface-subtle);
@@ -204,14 +81,8 @@
204
81
  --owo-sys-theme-text-on-accent: var(--owo-ref-color-text-on-brand);
205
82
  --owo-sys-theme-accent-bg: var(--owo-ref-color-brand-primary);
206
83
  --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
- }
84
+ --owo-sys-theme-accent-bg-muted: color-mix(in srgb, var(--owo-ref-color-brand-primary) 10%, var(--owo-ref-color-surface-base));
85
+ --owo-sys-theme-accent-border: color-mix(in srgb, var(--owo-ref-color-brand-primary) 40%, transparent);
215
86
  --owo-sys-theme-success-bg: var(--owo-ref-color-status-success-bg);
216
87
  --owo-sys-theme-success-border: var(--owo-ref-color-status-success-border);
217
88
  --owo-sys-theme-success-text: var(--owo-ref-color-status-success-text);
package/dist/tokens.css CHANGED
@@ -1,19 +1,94 @@
1
- /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
- :root, :host {
1
+ /* ================================================================== */
2
+ /* tokens.css — Standard CSS Variables (ref -> sys -> cmp) */
3
+ /* */
4
+ /* This file has TWO responsibilities: */
5
+ /* 1. :root: Raw/ref CSS variables as foundational primitives */
6
+ /* 2. :root: Shared ref -> sys -> cmp mapping chains */
7
+ /* */
8
+ /* Theme-specific values live in theme-light.css / theme-dark.css. */
9
+ /* Do NOT add theme-specific colors here. */
10
+ /* ================================================================== */
11
+ :root {
12
+ /* Neutral scale — initial values (light); overridden per-theme */
13
+ --owo-ref-color-neutral-900: #1a1a1a;
14
+ --owo-ref-color-neutral-800: #2d2d2d;
15
+ --owo-ref-color-neutral-700: #4a4a4a;
16
+ --owo-ref-color-neutral-600: #71717a;
17
+ --owo-ref-color-neutral-500: #a1a1aa;
18
+ --owo-ref-color-neutral-400: #d4d4d8;
19
+ --owo-ref-color-neutral-300: #e4e4e7;
20
+ --owo-ref-color-neutral-200: #f0f0f2;
21
+ --owo-ref-color-neutral-100: #f8f8f9;
22
+
23
+ /* Brand — initial values (light); overridden per-theme */
24
+ --owo-ref-color-brand-primary: #1a1a1a;
25
+ --owo-ref-color-brand-primary-hover: #000000;
26
+ --owo-ref-color-brand-accent: #4a4a4a;
27
+
28
+ /* Surface — initial values (light); overridden per-theme */
29
+ --owo-ref-color-surface-canvas: #ffffff;
30
+ --owo-ref-color-surface-base: #ffffff;
31
+ --owo-ref-color-surface-subtle: #fafaf9;
32
+ --owo-ref-color-surface-raised: #ffffff;
33
+ --owo-ref-color-surface-inset: #f5f5f4;
34
+ --owo-ref-color-surface-border: #e5e7eb;
35
+ --owo-ref-color-surface-ring: #d6d3d1;
36
+ --owo-ref-color-surface-overlay: rgba(0, 0, 0, 0.4);
37
+ --owo-ref-color-overlay-soft: rgba(244, 238, 230, 0.56);
38
+ --owo-ref-color-overlay-strong: rgba(15, 23, 42, 0.18);
39
+ --owo-ref-color-highlight-soft: rgba(255, 255, 255, 0.56);
40
+ --owo-ref-color-highlight-sheen: rgba(255, 255, 255, 0.34);
41
+ --owo-ref-color-text-on-brand: #ffffff;
42
+ --owo-ref-color-code-block-bg: #f4f4f5;
43
+ --owo-ref-color-code-block-border: #e4e4e7;
44
+ --owo-ref-color-code-block-divider: #ececed;
45
+ --owo-ref-color-code-inline-bg: #f4f4f5;
3
46
  --owo-ref-shadow-raised: 0 10px 20px rgba(15, 23, 42, 0.08);
4
47
  --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;
48
+
49
+ /* Status — initial values (light); overridden per-theme */
50
+ --owo-ref-color-status-success-bg: rgba(16, 185, 129, 0.10);
51
+ --owo-ref-color-status-success-border: rgba(16, 185, 129, 0.20);
52
+ --owo-ref-color-status-success-text: #047857;
53
+ --owo-ref-color-status-warning-bg: rgba(245, 158, 11, 0.10);
54
+ --owo-ref-color-status-warning-border: rgba(245, 158, 11, 0.20);
55
+ --owo-ref-color-status-warning-text: #b45309;
56
+ --owo-ref-color-status-danger-bg: rgba(239, 68, 68, 0.10);
57
+ --owo-ref-color-status-danger-border: rgba(239, 68, 68, 0.20);
58
+ --owo-ref-color-status-danger-text: #b91c1c;
59
+ --owo-ref-color-status-info-bg: rgba(14, 165, 233, 0.10);
60
+ --owo-ref-color-status-info-border: rgba(14, 165, 233, 0.20);
61
+ --owo-ref-color-status-info-text: #0369a1;
62
+
63
+ /* Typography — shared across all themes */
64
+ --owo-ref-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
65
+ --owo-ref-font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
66
+ --owo-ref-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
67
+
68
+ /* Radius — shared across all themes */
69
+ --owo-ref-radius-0: 0px;
70
+ --owo-ref-radius-xs: 0.375rem;
6
71
  --owo-ref-radius-sm: 0.5rem;
7
72
  --owo-ref-radius-md: 0.75rem;
8
73
  --owo-ref-radius-lg: 1rem;
9
74
  --owo-ref-radius-xl: 1.5rem;
10
75
  --owo-ref-radius-2xl: 2rem;
11
76
  --owo-ref-radius-full: 9999px;
77
+
78
+ /* Motion — shared across all themes */
12
79
  --owo-ref-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
13
80
  --owo-ref-motion-ease-decelerate: cubic-bezier(0, 0, 0, 1);
14
81
  --owo-ref-motion-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
15
- }
16
- :root {
82
+ --owo-ref-motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
83
+
84
+ /* ================================================================ */
85
+ /* Shared mapping chains: ref -> sys -> cmp */
86
+ /* Theme files set --owo-sys-theme-*, presets set */
87
+ /* --owo-sys-preset-* and this layer exposes the final */
88
+ /* --owo-cmp-* component contracts. */
89
+ /* ================================================================ */
90
+
91
+ /* Preset defaults — theme -> preset (overridden by preset-*.css) */
17
92
  --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
18
93
  --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
19
94
  --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
@@ -35,7 +110,14 @@
35
110
  --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
36
111
  --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
37
112
  --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
113
+ --owo-sys-preset-control-height-xs: 1.75rem;
114
+ --owo-sys-preset-control-height-sm: 2rem;
115
+ --owo-sys-preset-control-height-md: 2.25rem;
116
+ --owo-sys-preset-control-height-lg: 2.5rem;
117
+ --owo-sys-preset-control-height-xl: 3rem;
38
118
  --owo-sys-preset-control-border-width: 1px;
119
+
120
+ /* Final component contract layer — preset/theme -> cmp */
39
121
  --owo-cmp-surface-bg: var(--owo-sys-preset-surface-bg);
40
122
  --owo-cmp-surface-bg-subtle: var(--owo-sys-preset-surface-bg-subtle);
41
123
  --owo-cmp-surface-bg-raised: var(--owo-sys-preset-surface-bg-raised);
@@ -46,20 +128,25 @@
46
128
  --owo-cmp-surface-shadow: var(--owo-sys-preset-surface-shadow);
47
129
  --owo-cmp-surface-shadow-strong: var(--owo-sys-preset-surface-shadow-strong);
48
130
  --owo-cmp-surface-blur: var(--owo-sys-preset-surface-blur);
131
+
49
132
  --owo-cmp-canvas-bg: var(--owo-sys-preset-canvas-bg);
50
133
  --owo-cmp-canvas-bg-subtle: var(--owo-sys-preset-canvas-bg-subtle);
134
+
51
135
  --owo-cmp-surface-container: var(--owo-sys-preset-surface-container);
52
136
  --owo-cmp-surface-container-high: var(--owo-sys-preset-surface-container-high);
53
137
  --owo-cmp-surface-container-highest: var(--owo-sys-preset-surface-container-highest);
138
+
54
139
  --owo-cmp-text-primary: var(--owo-sys-theme-text-primary);
55
140
  --owo-cmp-text-secondary: var(--owo-sys-theme-text-secondary);
56
141
  --owo-cmp-text-muted: var(--owo-sys-theme-text-muted);
57
142
  --owo-cmp-text-on-accent: var(--owo-sys-theme-text-on-accent);
143
+
58
144
  --owo-cmp-accent-bg: var(--owo-sys-theme-accent-bg);
59
145
  --owo-cmp-accent-bg-hover: var(--owo-sys-theme-accent-bg-hover);
60
146
  --owo-cmp-accent-bg-muted: var(--owo-sys-theme-accent-bg-muted);
61
147
  --owo-cmp-accent-text: var(--owo-sys-theme-text-on-accent);
62
148
  --owo-cmp-accent-border: var(--owo-sys-theme-accent-border);
149
+
63
150
  --owo-cmp-success-bg: var(--owo-sys-theme-success-bg);
64
151
  --owo-cmp-success-border: var(--owo-sys-theme-success-border);
65
152
  --owo-cmp-success-text: var(--owo-sys-theme-success-text);
@@ -73,16 +160,25 @@
73
160
  --owo-cmp-info-bg: var(--owo-sys-theme-info-bg);
74
161
  --owo-cmp-info-border: var(--owo-sys-theme-info-border);
75
162
  --owo-cmp-info-text: var(--owo-sys-theme-info-text);
163
+
76
164
  --owo-cmp-control-radius-sm: var(--owo-sys-preset-control-radius-sm);
77
165
  --owo-cmp-control-radius-md: var(--owo-sys-preset-control-radius-md);
78
166
  --owo-cmp-control-radius-lg: var(--owo-sys-preset-control-radius-lg);
79
167
  --owo-cmp-control-radius-xl: var(--owo-sys-preset-control-radius-xl);
80
168
  --owo-cmp-control-radius-2xl: var(--owo-sys-preset-control-radius-2xl);
81
169
  --owo-cmp-control-radius-full: var(--owo-sys-preset-control-radius-full);
170
+ --owo-cmp-control-height-xs: var(--owo-sys-preset-control-height-xs);
171
+ --owo-cmp-control-height-sm: var(--owo-sys-preset-control-height-sm);
172
+ --owo-cmp-control-height-md: var(--owo-sys-preset-control-height-md);
173
+ --owo-cmp-control-height-lg: var(--owo-sys-preset-control-height-lg);
174
+ --owo-cmp-control-height-xl: var(--owo-sys-preset-control-height-xl);
82
175
  --owo-cmp-control-border-width: var(--owo-sys-preset-control-border-width);
83
176
  --owo-cmp-control-focus-ring: var(--owo-sys-theme-control-focus-ring);
84
177
  --owo-cmp-control-focus-ring-offset: var(--owo-sys-theme-control-focus-ring-offset);
178
+
85
179
  --owo-cmp-font-heading: var(--owo-ref-font-heading);
180
+
181
+ /* Motion & density */
86
182
  --owo-cmp-motion-duration-fast: 0.15s;
87
183
  --owo-cmp-motion-duration-default: 0.2s;
88
184
  --owo-cmp-motion-ease-standard: var(--owo-ref-motion-ease-standard);
@@ -91,10 +187,14 @@
91
187
  --owo-cmp-density-compact: 0.875;
92
188
  --owo-cmp-density-default: 1;
93
189
  --owo-cmp-density-comfortable: 1.125;
190
+
191
+ /* Overlay & layering */
94
192
  --owo-cmp-overlay-bg: var(--owo-sys-theme-overlay-bg);
95
193
  --owo-cmp-z-dropdown: 1000;
96
194
  --owo-cmp-z-modal: 1100;
97
195
  --owo-cmp-z-toast: 1200;
196
+
197
+ /* Feedback pattern — documented public contract (shared by Toast, StatusNotice) */
98
198
  --owo-feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
99
199
  --owo-feedback-neutral-border: var(--owo-cmp-surface-border);
100
200
  --owo-feedback-neutral-text: var(--owo-cmp-text-primary);
package/dist/tokens.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /** Raw foundational neutral scale — palette primitives, not component semantics. */
2
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
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"];
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-height-xs", "--owo-cmp-control-height-sm", "--owo-cmp-control-height-md", "--owo-cmp-control-height-lg", "--owo-cmp-control-height-xl", "--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"];
5
5
  type SemanticTokenKey = (typeof semanticTokenKeys)[number];
6
6
  declare const themeNames: readonly ["light", "dark"];
7
7
  type OwoUiThemeName = (typeof themeNames)[number];
@@ -24,7 +24,7 @@ declare const tokenGroups: readonly [{
24
24
  }, {
25
25
  readonly id: "control";
26
26
  readonly label: "Control";
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"];
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-height-xs", "--owo-cmp-control-height-sm", "--owo-cmp-control-height-md", "--owo-cmp-control-height-lg", "--owo-cmp-control-height-xl", "--owo-cmp-control-border-width", "--owo-cmp-control-focus-ring", "--owo-cmp-control-focus-ring-offset"];
28
28
  }, {
29
29
  readonly id: "typography";
30
30
  readonly label: "Typography";