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