@owodesign/owoui 0.1.3 → 0.1.4

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 (36) hide show
  1. package/README.md +6 -0
  2. package/dist/index.min.js +1 -1
  3. package/dist/storybook/index.min.js +9 -9
  4. package/dist/storybook-static/app.css +1715 -1637
  5. package/dist/storybook-static/assets/main.css +1 -1
  6. package/dist/storybook-static/assets/main.js +16 -16
  7. package/dist/tokens.d.ts +12 -8
  8. package/dist/tokens.min.js +1 -1
  9. package/package.json +1 -1
  10. package/src/preset-default.css +22 -22
  11. package/src/preset-elevated.css +22 -22
  12. package/src/preset-flat.css +22 -22
  13. package/src/preset-glass.css +22 -22
  14. package/src/styles/tokens.css +221 -203
  15. package/src/styles/ui/avatar.css +6 -6
  16. package/src/styles/ui/badge.css +25 -25
  17. package/src/styles/ui/button.css +26 -26
  18. package/src/styles/ui/collapsible.css +3 -3
  19. package/src/styles/ui/dialog.css +10 -10
  20. package/src/styles/ui/drawer.css +5 -5
  21. package/src/styles/ui/dropdown-menu.css +43 -43
  22. package/src/styles/ui/field.css +5 -5
  23. package/src/styles/ui/icon-button.css +14 -14
  24. package/src/styles/ui/input.css +9 -9
  25. package/src/styles/ui/panel.css +11 -11
  26. package/src/styles/ui/segmented-control.css +12 -12
  27. package/src/styles/ui/select.css +24 -24
  28. package/src/styles/ui/skeleton.css +15 -15
  29. package/src/styles/ui/status-notice.css +9 -9
  30. package/src/styles/ui/switch.css +10 -10
  31. package/src/styles/ui/tabs.css +14 -14
  32. package/src/styles/ui/textarea.css +2 -2
  33. package/src/styles/ui/toast.css +8 -8
  34. package/src/styles/ui/tooltip.css +5 -5
  35. package/src/theme-dark.css +75 -75
  36. package/src/theme-light.css +77 -76
package/src/styles/tokens.css CHANGED
@@ -2,168 +2,187 @@
2
2
  /* tokens.css — Tailwind v4 theme registration + shared mapping */
3
3
  /* */
4
4
  /* This file has TWO responsibilities: */
5
- /* 1. @theme: Register CSS variables for Tailwind (initial values */
6
- /* are light-mode defaults — a Tailwind v4 technical requirement) */
7
- /* 2. :root: Shared mapping chains that are the SAME across all */
8
- /* themes (preset → ui, app-specific derived variables) */
5
+ /* 1. @theme: Register raw/ref CSS variables for Tailwind */
6
+ /* 2. :root: Shared ref -> sys -> cmp mapping chains */
9
7
  /* */
10
- /* All color VALUES live in theme-light.css / theme-dark.css. */
8
+ /* Theme-specific values live in theme-light.css / theme-dark.css. */
11
9
  /* Do NOT add theme-specific colors here. */
12
10
  /* ================================================================== */
13
11
 
14
12
  @theme {
15
13
  /* Neutral scale — initial values (light); overridden per-theme */
16
- --color-n900: #1a1a1a;
17
- --color-n800: #2d2d2d;
18
- --color-n700: #4a4a4a;
19
- --color-n600: #71717a;
20
- --color-n500: #a1a1aa;
21
- --color-n400: #d4d4d8;
22
- --color-n300: #e4e4e7;
14
+ --owo-ref-color-neutral-900: #1a1a1a;
15
+ --owo-ref-color-neutral-800: #2d2d2d;
16
+ --owo-ref-color-neutral-700: #4a4a4a;
17
+ --owo-ref-color-neutral-600: #71717a;
18
+ --owo-ref-color-neutral-500: #a1a1aa;
19
+ --owo-ref-color-neutral-400: #d4d4d8;
20
+ --owo-ref-color-neutral-300: #e4e4e7;
23
21
 
24
22
  /* Brand — initial values (light); overridden per-theme */
25
- --color-brand-primary: #1a1a1a;
26
- --color-brand-primary-hover: #000000;
27
- --color-brand-accent: #4a4a4a;
23
+ --owo-ref-color-brand-primary: #1a1a1a;
24
+ --owo-ref-color-brand-primary-hover: #000000;
25
+ --owo-ref-color-brand-accent: #4a4a4a;
28
26
 
29
27
  /* Surface — initial values (light); overridden per-theme */
30
- --color-surface-canvas: #ffffff;
31
- --color-surface-base: #ffffff;
32
- --color-surface-subtle: #fafaf9;
33
- --color-surface-raised: #ffffff;
34
- --color-surface-inset: #f5f5f4;
35
- --color-surface-border: #e5e7eb;
36
- --color-surface-ring: #d6d3d1;
37
- --color-surface-overlay: rgba(0, 0, 0, 0.4);
38
- --color-overlay-soft: rgba(244, 238, 230, 0.56);
39
- --color-overlay-strong: rgba(15, 23, 42, 0.18);
40
- --color-highlight-soft: rgba(255, 255, 255, 0.56);
41
- --color-highlight-sheen: rgba(255, 255, 255, 0.34);
42
- --color-text-on-brand: #ffffff;
43
- --color-code-block-bg: #f4f4f5;
44
- --color-code-block-border: #e4e4e7;
45
- --color-code-block-divider: #ececed;
46
- --color-code-inline-bg: #f4f4f5;
47
- --shadow-raised: 0 10px 20px rgba(15, 23, 42, 0.08);
48
- --shadow-popover: 0 18px 40px rgba(15, 23, 42, 0.10);
28
+ --owo-ref-color-surface-canvas: #ffffff;
29
+ --owo-ref-color-surface-base: #ffffff;
30
+ --owo-ref-color-surface-subtle: #fafaf9;
31
+ --owo-ref-color-surface-raised: #ffffff;
32
+ --owo-ref-color-surface-inset: #f5f5f4;
33
+ --owo-ref-color-surface-border: #e5e7eb;
34
+ --owo-ref-color-surface-ring: #d6d3d1;
35
+ --owo-ref-color-surface-overlay: rgba(0, 0, 0, 0.4);
36
+ --owo-ref-color-overlay-soft: rgba(244, 238, 230, 0.56);
37
+ --owo-ref-color-overlay-strong: rgba(15, 23, 42, 0.18);
38
+ --owo-ref-color-highlight-soft: rgba(255, 255, 255, 0.56);
39
+ --owo-ref-color-highlight-sheen: rgba(255, 255, 255, 0.34);
40
+ --owo-ref-color-text-on-brand: #ffffff;
41
+ --owo-ref-color-code-block-bg: #f4f4f5;
42
+ --owo-ref-color-code-block-border: #e4e4e7;
43
+ --owo-ref-color-code-block-divider: #ececed;
44
+ --owo-ref-color-code-inline-bg: #f4f4f5;
45
+ --owo-ref-shadow-raised: 0 10px 20px rgba(15, 23, 42, 0.08);
46
+ --owo-ref-shadow-popover: 0 18px 40px rgba(15, 23, 42, 0.10);
49
47
 
50
48
  /* Status — initial values (light); overridden per-theme */
51
- --color-admin-success-bg: rgba(16, 185, 129, 0.10);
52
- --color-admin-success-border: rgba(16, 185, 129, 0.20);
53
- --color-admin-success-text: #047857;
54
- --color-admin-warning-bg: rgba(245, 158, 11, 0.10);
55
- --color-admin-warning-border: rgba(245, 158, 11, 0.20);
56
- --color-admin-warning-text: #b45309;
57
- --color-admin-danger-bg: rgba(239, 68, 68, 0.10);
58
- --color-admin-danger-border: rgba(239, 68, 68, 0.20);
59
- --color-admin-danger-text: #b91c1c;
60
- --color-admin-info-bg: rgba(14, 165, 233, 0.10);
61
- --color-admin-info-border: rgba(14, 165, 233, 0.20);
62
- --color-admin-info-text: #0369a1;
49
+ --owo-ref-color-status-success-bg: rgba(16, 185, 129, 0.10);
50
+ --owo-ref-color-status-success-border: rgba(16, 185, 129, 0.20);
51
+ --owo-ref-color-status-success-text: #047857;
52
+ --owo-ref-color-status-warning-bg: rgba(245, 158, 11, 0.10);
53
+ --owo-ref-color-status-warning-border: rgba(245, 158, 11, 0.20);
54
+ --owo-ref-color-status-warning-text: #b45309;
55
+ --owo-ref-color-status-danger-bg: rgba(239, 68, 68, 0.10);
56
+ --owo-ref-color-status-danger-border: rgba(239, 68, 68, 0.20);
57
+ --owo-ref-color-status-danger-text: #b91c1c;
58
+ --owo-ref-color-status-info-bg: rgba(14, 165, 233, 0.10);
59
+ --owo-ref-color-status-info-border: rgba(14, 165, 233, 0.20);
60
+ --owo-ref-color-status-info-text: #0369a1;
63
61
 
64
62
  /* Typography — shared across all themes */
65
- --font-sans: var(--font-inter), var(--font-noto-sans-sc), system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
66
- --font-heading: var(--font-source-serif-pro), var(--font-noto-serif-sc), "Source Serif 4", Georgia, "Times New Roman", serif;
67
- --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
63
+ --owo-ref-font-sans: var(--font-inter), var(--font-noto-sans-sc), system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
64
+ --owo-ref-font-heading: var(--font-source-serif-pro), var(--font-noto-serif-sc), "Source Serif 4", Georgia, "Times New Roman", serif;
65
+ --owo-ref-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
66
+
67
+ /* Radius — shared across all themes */
68
+ --owo-ref-radius-0: 0px;
69
+ --owo-ref-radius-xs: 0.375rem;
70
+ --owo-ref-radius-sm: 0.5rem;
71
+ --owo-ref-radius-md: 0.75rem;
72
+ --owo-ref-radius-lg: 1rem;
73
+ --owo-ref-radius-xl: 1.5rem;
74
+ --owo-ref-radius-2xl: 2rem;
75
+ --owo-ref-radius-full: 9999px;
68
76
 
69
77
  /* Motion — shared across all themes */
70
- --ease-standard: cubic-bezier(0.2, 0, 0, 1);
71
- --ease-exit: cubic-bezier(0.4, 0, 1, 1);
78
+ --owo-ref-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
79
+ --owo-ref-motion-ease-decelerate: cubic-bezier(0, 0, 0, 1);
80
+ --owo-ref-motion-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
81
+ --owo-ref-motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
72
82
  }
73
83
 
74
84
  /* ================================================================== */
75
- /* Shared mapping chains: preset → ui */
76
- /* These mappings are identical across all themes. */
77
- /* Theme files set --theme-*, presets set --preset-*, this layer */
78
- /* wires them to the final --ui-* that components consume. */
85
+ /* Shared mapping chains: ref -> sys -> cmp */
86
+ /* Theme files set --owo-sys-theme-*, presets set --owo-sys-preset-* */
87
+ /* and this layer exposes the final --owo-cmp-* component contracts. */
79
88
  /* ================================================================== */
80
89
 
81
90
  :root {
82
- /* Preset defaults — theme → preset (overridden by preset-*.css) */
83
- --preset-surface-bg: var(--theme-surface-base);
84
- --preset-surface-bg-subtle: var(--theme-surface-subtle);
85
- --preset-surface-bg-raised: var(--theme-surface-raised);
86
- --preset-surface-bg-inset: var(--theme-surface-inset);
87
- --preset-surface-border: var(--theme-surface-border);
88
- --preset-surface-border-muted: var(--theme-surface-border-muted);
89
- --preset-surface-border-strong: var(--theme-surface-border-strong);
90
- --preset-surface-shadow: var(--shadow-raised);
91
- --preset-surface-shadow-strong: var(--shadow-popover);
92
- --preset-surface-blur: 0px;
93
- --preset-canvas-bg: var(--theme-surface-canvas);
94
- --preset-canvas-bg-subtle: var(--theme-canvas-bg-subtle);
95
- --preset-surface-container: var(--theme-surface-container);
96
- --preset-surface-container-high: var(--theme-surface-container-high);
97
- --preset-surface-container-highest: var(--theme-surface-container-highest);
98
- --preset-control-radius-sm: 0.5rem;
99
- --preset-control-radius-md: 0.75rem;
100
- --preset-control-radius-lg: 1rem;
101
- --preset-control-radius-xl: 1.5rem;
102
- --preset-control-radius-2xl: 2rem;
103
- --preset-control-border-width: 1px;
104
-
105
- /* Final UI layer — preset → ui (consumed by components) */
106
- --ui-surface-bg: var(--preset-surface-bg);
107
- --ui-surface-bg-subtle: var(--preset-surface-bg-subtle);
108
- --ui-surface-bg-raised: var(--preset-surface-bg-raised);
109
- --ui-surface-bg-inset: var(--preset-surface-bg-inset);
110
- --ui-surface-border: var(--preset-surface-border);
111
- --ui-surface-border-muted: var(--preset-surface-border-muted);
112
- --ui-surface-border-strong: var(--preset-surface-border-strong);
113
- --ui-surface-shadow: var(--preset-surface-shadow);
114
- --ui-surface-shadow-strong: var(--preset-surface-shadow-strong);
115
- --ui-surface-blur: var(--preset-surface-blur);
116
-
117
- --ui-canvas-bg: var(--preset-canvas-bg);
118
- --ui-canvas-bg-subtle: var(--preset-canvas-bg-subtle);
119
-
120
- --ui-surface-container: var(--preset-surface-container);
121
- --ui-surface-container-high: var(--preset-surface-container-high);
122
- --ui-surface-container-highest: var(--preset-surface-container-highest);
123
-
124
- --ui-text-primary: var(--theme-text-primary);
125
- --ui-text-secondary: var(--theme-text-secondary);
126
- --ui-text-muted: var(--theme-text-muted);
127
- --ui-text-on-accent: var(--theme-text-on-accent);
128
-
129
- --ui-accent-bg: var(--theme-accent-bg);
130
- --ui-accent-bg-hover: var(--theme-accent-bg-hover);
131
- --ui-accent-bg-muted: var(--theme-accent-bg-muted);
132
- --ui-accent-text: var(--theme-text-on-accent);
133
- --ui-accent-border: var(--theme-accent-border);
134
-
135
- --ui-success-bg: var(--theme-success-bg);
136
- --ui-success-border: var(--theme-success-border);
137
- --ui-success-text: var(--theme-success-text);
138
- --ui-warning-bg: var(--theme-warning-bg);
139
- --ui-warning-border: var(--theme-warning-border);
140
- --ui-warning-text: var(--theme-warning-text);
141
- --ui-danger-bg: var(--theme-danger-bg);
142
- --ui-danger-bg-emphasis: var(--theme-danger-bg-emphasis);
143
- --ui-danger-border: var(--theme-danger-border);
144
- --ui-danger-text: var(--theme-danger-text);
145
- --ui-info-bg: var(--theme-info-bg);
146
- --ui-info-border: var(--theme-info-border);
147
- --ui-info-text: var(--theme-info-text);
148
-
149
- --ui-control-radius-sm: var(--preset-control-radius-sm);
150
- --ui-control-radius-md: var(--preset-control-radius-md);
151
- --ui-control-radius-lg: var(--preset-control-radius-lg);
152
- --ui-control-radius-xl: var(--preset-control-radius-xl);
153
- --ui-control-radius-2xl: var(--preset-control-radius-2xl);
154
- --ui-control-border-width: var(--preset-control-border-width);
155
- --ui-control-focus-ring: var(--theme-control-focus-ring);
156
- --ui-control-focus-ring-offset: var(--theme-control-focus-ring-offset);
157
-
158
- --ui-font-heading: var(--font-heading);
159
-
160
- /* Motion & density — shared */
161
- --ui-motion-duration-fast: 0.15s;
162
- --ui-motion-duration-default: 0.2s;
163
- --ui-motion-ease-standard: var(--ease-standard);
164
- --ui-density-compact: 0.875;
165
- --ui-density-default: 1;
166
- --ui-density-comfortable: 1.125;
91
+ /* Preset defaults — theme -> preset (overridden by preset-*.css) */
92
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
93
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
94
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
95
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
96
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
97
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
98
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
99
+ --owo-sys-preset-surface-shadow: var(--owo-ref-shadow-raised);
100
+ --owo-sys-preset-surface-shadow-strong: var(--owo-ref-shadow-popover);
101
+ --owo-sys-preset-surface-blur: 0px;
102
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
103
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
104
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
105
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
106
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
107
+ --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-sm);
108
+ --owo-sys-preset-control-radius-md: var(--owo-ref-radius-md);
109
+ --owo-sys-preset-control-radius-lg: var(--owo-ref-radius-lg);
110
+ --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
111
+ --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
112
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
113
+ --owo-sys-preset-control-border-width: 1px;
114
+
115
+ /* Final component contract layer — preset/theme -> cmp */
116
+ --owo-cmp-surface-bg: var(--owo-sys-preset-surface-bg);
117
+ --owo-cmp-surface-bg-subtle: var(--owo-sys-preset-surface-bg-subtle);
118
+ --owo-cmp-surface-bg-raised: var(--owo-sys-preset-surface-bg-raised);
119
+ --owo-cmp-surface-bg-inset: var(--owo-sys-preset-surface-bg-inset);
120
+ --owo-cmp-surface-border: var(--owo-sys-preset-surface-border);
121
+ --owo-cmp-surface-border-muted: var(--owo-sys-preset-surface-border-muted);
122
+ --owo-cmp-surface-border-strong: var(--owo-sys-preset-surface-border-strong);
123
+ --owo-cmp-surface-shadow: var(--owo-sys-preset-surface-shadow);
124
+ --owo-cmp-surface-shadow-strong: var(--owo-sys-preset-surface-shadow-strong);
125
+ --owo-cmp-surface-blur: var(--owo-sys-preset-surface-blur);
126
+
127
+ --owo-cmp-canvas-bg: var(--owo-sys-preset-canvas-bg);
128
+ --owo-cmp-canvas-bg-subtle: var(--owo-sys-preset-canvas-bg-subtle);
129
+
130
+ --owo-cmp-surface-container: var(--owo-sys-preset-surface-container);
131
+ --owo-cmp-surface-container-high: var(--owo-sys-preset-surface-container-high);
132
+ --owo-cmp-surface-container-highest: var(--owo-sys-preset-surface-container-highest);
133
+
134
+ --owo-cmp-text-primary: var(--owo-sys-theme-text-primary);
135
+ --owo-cmp-text-secondary: var(--owo-sys-theme-text-secondary);
136
+ --owo-cmp-text-muted: var(--owo-sys-theme-text-muted);
137
+ --owo-cmp-text-on-accent: var(--owo-sys-theme-text-on-accent);
138
+
139
+ --owo-cmp-accent-bg: var(--owo-sys-theme-accent-bg);
140
+ --owo-cmp-accent-bg-hover: var(--owo-sys-theme-accent-bg-hover);
141
+ --owo-cmp-accent-bg-muted: var(--owo-sys-theme-accent-bg-muted);
142
+ --owo-cmp-accent-text: var(--owo-sys-theme-text-on-accent);
143
+ --owo-cmp-accent-border: var(--owo-sys-theme-accent-border);
144
+
145
+ --owo-cmp-success-bg: var(--owo-sys-theme-success-bg);
146
+ --owo-cmp-success-border: var(--owo-sys-theme-success-border);
147
+ --owo-cmp-success-text: var(--owo-sys-theme-success-text);
148
+ --owo-cmp-warning-bg: var(--owo-sys-theme-warning-bg);
149
+ --owo-cmp-warning-border: var(--owo-sys-theme-warning-border);
150
+ --owo-cmp-warning-text: var(--owo-sys-theme-warning-text);
151
+ --owo-cmp-danger-bg: var(--owo-sys-theme-danger-bg);
152
+ --owo-cmp-danger-bg-emphasis: var(--owo-sys-theme-danger-bg-emphasis);
153
+ --owo-cmp-danger-border: var(--owo-sys-theme-danger-border);
154
+ --owo-cmp-danger-text: var(--owo-sys-theme-danger-text);
155
+ --owo-cmp-info-bg: var(--owo-sys-theme-info-bg);
156
+ --owo-cmp-info-border: var(--owo-sys-theme-info-border);
157
+ --owo-cmp-info-text: var(--owo-sys-theme-info-text);
158
+
159
+ --owo-cmp-control-radius-sm: var(--owo-sys-preset-control-radius-sm);
160
+ --owo-cmp-control-radius-md: var(--owo-sys-preset-control-radius-md);
161
+ --owo-cmp-control-radius-lg: var(--owo-sys-preset-control-radius-lg);
162
+ --owo-cmp-control-radius-xl: var(--owo-sys-preset-control-radius-xl);
163
+ --owo-cmp-control-radius-2xl: var(--owo-sys-preset-control-radius-2xl);
164
+ --owo-cmp-control-radius-full: var(--owo-sys-preset-control-radius-full);
165
+ --owo-cmp-control-border-width: var(--owo-sys-preset-control-border-width);
166
+ --owo-cmp-control-focus-ring: var(--owo-sys-theme-control-focus-ring);
167
+ --owo-cmp-control-focus-ring-offset: var(--owo-sys-theme-control-focus-ring-offset);
168
+
169
+ --owo-cmp-font-heading: var(--owo-ref-font-heading);
170
+
171
+ /* Motion & density */
172
+ --owo-cmp-motion-duration-fast: 0.15s;
173
+ --owo-cmp-motion-duration-default: 0.2s;
174
+ --owo-cmp-motion-ease-standard: var(--owo-ref-motion-ease-standard);
175
+ --owo-cmp-motion-ease-decelerate: var(--owo-ref-motion-ease-decelerate);
176
+ --owo-cmp-motion-ease-accelerate: var(--owo-ref-motion-ease-accelerate);
177
+ --owo-cmp-density-compact: 0.875;
178
+ --owo-cmp-density-default: 1;
179
+ --owo-cmp-density-comfortable: 1.125;
180
+
181
+ /* Overlay & layering */
182
+ --owo-cmp-overlay-bg: var(--owo-sys-theme-overlay-bg);
183
+ --owo-cmp-z-dropdown: 1000;
184
+ --owo-cmp-z-modal: 1100;
185
+ --owo-cmp-z-toast: 1200;
167
186
 
168
187
  /* Content layout — shared */
169
188
  --content-min-width: 320px;
@@ -173,81 +192,80 @@
173
192
  --content-padding: 24px;
174
193
  --header-top-margin: 64px;
175
194
 
176
- /* App-specific derived variables — shared (reference --ui-* only) */
177
- --publish-trigger-bg: var(--ui-surface-bg-subtle);
178
- --publish-trigger-border: var(--ui-surface-border);
179
- --publish-trigger-text: var(--ui-text-primary);
180
- --publish-trigger-active-bg: var(--ui-accent-bg-muted);
181
- --publish-popover-bg: var(--ui-surface-bg);
182
- --publish-popover-border: var(--ui-surface-border);
183
- --publish-popover-shadow: var(--ui-surface-shadow-strong);
184
- --publish-section-bg: var(--ui-surface-bg-subtle);
185
- --publish-section-border: var(--ui-surface-border);
186
- --publish-fact-title: var(--ui-text-secondary);
187
- --publish-fact-value: var(--color-n900);
188
- --publish-muted-text: var(--ui-text-secondary);
189
- --publish-warning-bg: var(--ui-warning-bg);
190
- --publish-warning-border: var(--ui-warning-border);
191
- --publish-warning-text: var(--ui-warning-text);
192
- --publish-danger-bg: var(--ui-danger-bg);
193
- --publish-danger-border: var(--ui-danger-border);
194
- --publish-danger-text: var(--ui-danger-text);
195
- --publish-success-bg: var(--ui-success-bg);
196
- --publish-success-border: var(--ui-success-border);
197
- --publish-success-text: var(--ui-success-text);
198
- --publish-progress-track: var(--ui-surface-bg-inset);
199
- --publish-progress-fill: var(--ui-accent-bg);
200
-
201
- --feedback-neutral-bg: var(--ui-surface-bg-raised);
202
- --feedback-neutral-border: var(--ui-surface-border);
203
- --feedback-neutral-text: var(--ui-text-primary);
204
- --feedback-neutral-icon: var(--ui-text-secondary);
205
- --feedback-info-bg: var(--ui-info-bg);
206
- --feedback-info-border: var(--ui-info-border);
207
- --feedback-info-text: var(--ui-info-text);
208
- --feedback-info-icon: var(--ui-info-text);
209
- --feedback-success-bg: var(--ui-success-bg);
210
- --feedback-success-border: var(--ui-success-border);
211
- --feedback-success-text: var(--ui-success-text);
212
- --feedback-success-icon: var(--ui-success-text);
213
- --feedback-warning-bg: var(--ui-warning-bg);
214
- --feedback-warning-border: var(--ui-warning-border);
215
- --feedback-warning-text: var(--ui-warning-text);
216
- --feedback-warning-icon: var(--ui-warning-text);
217
- --feedback-danger-bg: var(--ui-danger-bg);
218
- --feedback-danger-border: var(--ui-danger-border);
219
- --feedback-danger-text: var(--ui-danger-text);
220
- --feedback-danger-icon: var(--ui-danger-text);
221
-
222
- --toast-shadow: var(--ui-surface-shadow-strong);
195
+ /* App-specific derived variables — shared (reference --owo-cmp-* only) */
196
+ --publish-trigger-bg: var(--owo-cmp-surface-bg-subtle);
197
+ --publish-trigger-border: var(--owo-cmp-surface-border);
198
+ --publish-trigger-text: var(--owo-cmp-text-primary);
199
+ --publish-trigger-active-bg: var(--owo-cmp-accent-bg-muted);
200
+ --publish-popover-bg: var(--owo-cmp-surface-bg);
201
+ --publish-popover-border: var(--owo-cmp-surface-border);
202
+ --publish-popover-shadow: var(--owo-cmp-surface-shadow-strong);
203
+ --publish-section-bg: var(--owo-cmp-surface-bg-subtle);
204
+ --publish-section-border: var(--owo-cmp-surface-border);
205
+ --publish-fact-title: var(--owo-cmp-text-secondary);
206
+ --publish-fact-value: var(--owo-ref-color-neutral-900);
207
+ --publish-muted-text: var(--owo-cmp-text-secondary);
208
+ --publish-warning-bg: var(--owo-cmp-warning-bg);
209
+ --publish-warning-border: var(--owo-cmp-warning-border);
210
+ --publish-warning-text: var(--owo-cmp-warning-text);
211
+ --publish-danger-bg: var(--owo-cmp-danger-bg);
212
+ --publish-danger-border: var(--owo-cmp-danger-border);
213
+ --publish-danger-text: var(--owo-cmp-danger-text);
214
+ --publish-success-bg: var(--owo-cmp-success-bg);
215
+ --publish-success-border: var(--owo-cmp-success-border);
216
+ --publish-success-text: var(--owo-cmp-success-text);
217
+ --publish-progress-track: var(--owo-cmp-surface-bg-inset);
218
+ --publish-progress-fill: var(--owo-cmp-accent-bg);
219
+
220
+ --feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
221
+ --feedback-neutral-border: var(--owo-cmp-surface-border);
222
+ --feedback-neutral-text: var(--owo-cmp-text-primary);
223
+ --feedback-neutral-icon: var(--owo-cmp-text-secondary);
224
+ --feedback-info-bg: var(--owo-cmp-info-bg);
225
+ --feedback-info-border: var(--owo-cmp-info-border);
226
+ --feedback-info-text: var(--owo-cmp-info-text);
227
+ --feedback-info-icon: var(--owo-cmp-info-text);
228
+ --feedback-success-bg: var(--owo-cmp-success-bg);
229
+ --feedback-success-border: var(--owo-cmp-success-border);
230
+ --feedback-success-text: var(--owo-cmp-success-text);
231
+ --feedback-success-icon: var(--owo-cmp-success-text);
232
+ --feedback-warning-bg: var(--owo-cmp-warning-bg);
233
+ --feedback-warning-border: var(--owo-cmp-warning-border);
234
+ --feedback-warning-text: var(--owo-cmp-warning-text);
235
+ --feedback-warning-icon: var(--owo-cmp-warning-text);
236
+ --feedback-danger-bg: var(--owo-cmp-danger-bg);
237
+ --feedback-danger-border: var(--owo-cmp-danger-border);
238
+ --feedback-danger-text: var(--owo-cmp-danger-text);
239
+ --feedback-danger-icon: var(--owo-cmp-danger-text);
240
+
241
+ --toast-shadow: var(--owo-cmp-surface-shadow-strong);
223
242
 
224
243
  --skeleton-bg: linear-gradient(
225
244
  180deg,
226
- color-mix(in srgb, var(--ui-surface-bg-inset) 94%, white) 0%,
227
- color-mix(in srgb, var(--ui-surface-bg-inset) 100%, var(--ui-surface-border)) 100%
245
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 94%, white) 0%,
246
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 100%, var(--owo-cmp-surface-border)) 100%
228
247
  );
229
248
  --skeleton-bg-emphasis: linear-gradient(
230
249
  180deg,
231
- color-mix(in srgb, var(--ui-surface-bg-subtle) 78%, var(--color-highlight-soft)) 0%,
232
- color-mix(in srgb, var(--ui-surface-bg-inset) 86%, var(--ui-surface-border)) 100%
250
+ color-mix(in srgb, var(--owo-cmp-surface-bg-subtle) 78%, var(--owo-ref-color-highlight-soft)) 0%,
251
+ color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 86%, var(--owo-cmp-surface-border)) 100%
233
252
  );
234
253
  --skeleton-sheen: linear-gradient(
235
254
  100deg,
236
255
  transparent 0%,
237
- color-mix(in srgb, var(--color-highlight-sheen) 10%, transparent) 28%,
238
- color-mix(in srgb, var(--color-highlight-sheen) 35%, transparent) 40%,
239
- var(--color-highlight-sheen) 50%,
240
- color-mix(in srgb, var(--color-highlight-sheen) 35%, transparent) 60%,
241
- color-mix(in srgb, var(--color-highlight-sheen) 10%, transparent) 72%,
256
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 28%,
257
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 40%,
258
+ var(--owo-ref-color-highlight-sheen) 50%,
259
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 60%,
260
+ color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 72%,
242
261
  transparent 100%
243
262
  );
244
- --skeleton-top-highlight: var(--color-highlight-soft);
263
+ --skeleton-top-highlight: var(--owo-ref-color-highlight-soft);
245
264
 
246
- --workspace-transition-veil-bg: var(--color-overlay-soft);
247
- --workspace-transition-stale-bg: color-mix(in srgb, var(--color-overlay-soft) 72%, transparent);
265
+ --workspace-transition-veil-bg: var(--owo-ref-color-overlay-soft);
266
+ --workspace-transition-stale-bg: color-mix(in srgb, var(--owo-ref-color-overlay-soft) 72%, transparent);
248
267
 
249
- --tooltip-shadow: var(--ui-surface-shadow-strong);
250
- --select-dropdown-shadow: var(--ui-surface-shadow-strong);
251
- --theme-picker-shadow: var(--ui-surface-shadow-strong);
252
- --drawer-panel-shadow: var(--ui-surface-shadow-strong);
268
+ --tooltip-shadow: var(--owo-cmp-surface-shadow-strong);
269
+ --select-dropdown-shadow: var(--owo-cmp-surface-shadow-strong);
270
+ --drawer-panel-shadow: var(--owo-cmp-surface-shadow-strong);
253
271
  }
package/src/styles/ui/avatar.css CHANGED
@@ -1,13 +1,13 @@
1
- .ui-avatar {
2
- --avatar-bg: var(--ui-surface-bg-inset);
3
- --avatar-text: var(--ui-text-secondary);
1
+ .owo-avatar {
2
+ --avatar-bg: var(--owo-cmp-surface-bg-inset);
3
+ --avatar-text: var(--owo-cmp-text-secondary);
4
4
  --avatar-border: transparent;
5
5
  background: var(--avatar-bg);
6
6
  color: var(--avatar-text);
7
7
  border: 1px solid var(--avatar-border);
8
8
  }
9
9
 
10
- .ui-avatar[data-tone="subtle"] {
11
- --avatar-bg: var(--ui-surface-bg-subtle);
12
- --avatar-text: var(--ui-text-muted);
10
+ .owo-avatar[data-tone="subtle"] {
11
+ --avatar-bg: var(--owo-cmp-surface-bg-subtle);
12
+ --avatar-text: var(--owo-cmp-text-muted);
13
13
  }
package/src/styles/ui/badge.css CHANGED
@@ -1,52 +1,52 @@
1
- .ui-badge {
2
- --badge-bg: var(--ui-surface-bg-inset);
3
- --badge-text: var(--ui-text-secondary);
1
+ .owo-badge {
2
+ --badge-bg: var(--owo-cmp-surface-bg-inset);
3
+ --badge-text: var(--owo-cmp-text-secondary);
4
4
  --badge-border: transparent;
5
5
  background: var(--badge-bg);
6
6
  border-color: var(--badge-border);
7
7
  }
8
8
 
9
- .ui-badge[data-variant="outline"] {
9
+ .owo-badge[data-variant="outline"] {
10
10
  --badge-bg: transparent;
11
- --badge-border: var(--ui-surface-border);
11
+ --badge-border: var(--owo-cmp-surface-border);
12
12
  }
13
13
 
14
- .ui-badge[data-tone="info"] {
15
- --badge-bg: var(--ui-info-bg);
16
- --badge-text: var(--ui-info-text);
17
- --badge-border: var(--ui-info-border);
14
+ .owo-badge[data-tone="info"] {
15
+ --badge-bg: var(--owo-cmp-info-bg);
16
+ --badge-text: var(--owo-cmp-info-text);
17
+ --badge-border: var(--owo-cmp-info-border);
18
18
  }
19
19
 
20
- .ui-badge[data-tone="info"][data-variant="outline"] {
20
+ .owo-badge[data-tone="info"][data-variant="outline"] {
21
21
  --badge-bg: transparent;
22
22
  }
23
23
 
24
- .ui-badge[data-tone="success"] {
25
- --badge-bg: var(--ui-success-bg);
26
- --badge-text: var(--ui-success-text);
27
- --badge-border: var(--ui-success-border);
24
+ .owo-badge[data-tone="success"] {
25
+ --badge-bg: var(--owo-cmp-success-bg);
26
+ --badge-text: var(--owo-cmp-success-text);
27
+ --badge-border: var(--owo-cmp-success-border);
28
28
  }
29
29
 
30
- .ui-badge[data-tone="success"][data-variant="outline"] {
30
+ .owo-badge[data-tone="success"][data-variant="outline"] {
31
31
  --badge-bg: transparent;
32
32
  }
33
33
 
34
- .ui-badge[data-tone="warning"] {
35
- --badge-bg: var(--ui-warning-bg);
36
- --badge-text: var(--ui-warning-text);
37
- --badge-border: var(--ui-warning-border);
34
+ .owo-badge[data-tone="warning"] {
35
+ --badge-bg: var(--owo-cmp-warning-bg);
36
+ --badge-text: var(--owo-cmp-warning-text);
37
+ --badge-border: var(--owo-cmp-warning-border);
38
38
  }
39
39
 
40
- .ui-badge[data-tone="warning"][data-variant="outline"] {
40
+ .owo-badge[data-tone="warning"][data-variant="outline"] {
41
41
  --badge-bg: transparent;
42
42
  }
43
43
 
44
- .ui-badge[data-tone="danger"] {
45
- --badge-bg: var(--ui-danger-bg);
46
- --badge-text: var(--ui-danger-text);
47
- --badge-border: var(--ui-danger-border);
44
+ .owo-badge[data-tone="danger"] {
45
+ --badge-bg: var(--owo-cmp-danger-bg);
46
+ --badge-text: var(--owo-cmp-danger-text);
47
+ --badge-border: var(--owo-cmp-danger-border);
48
48
  }
49
49
 
50
- .ui-badge[data-tone="danger"][data-variant="outline"] {
50
+ .owo-badge[data-tone="danger"][data-variant="outline"] {
51
51
  --badge-bg: transparent;
52
52
  }