@owodesign/owoui 0.1.4 → 0.1.6
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.
- package/README.md +23 -9
- package/dist/index.css +4 -0
- package/dist/index.d.ts +40 -20
- package/dist/index.min.js +1 -1
- package/{src → dist}/preset-default.css +5 -2
- package/{src → dist}/preset-elevated.css +5 -2
- package/{src → dist}/preset-flat.css +5 -2
- package/{src → dist}/preset-glass.css +5 -2
- package/dist/storybook/index.css +4 -0
- package/dist/storybook/index.min.js +87 -14
- package/dist/storybook-static/app.css +402 -4054
- package/dist/storybook-static/assets/main.css +1 -2
- package/dist/storybook-static/assets/main.js +93 -21
- package/dist/style.css +355 -0
- package/{src → dist}/theme-dark.css +5 -5
- package/{src → dist}/theme-light.css +5 -6
- package/{src/styles → dist}/tokens.css +44 -97
- package/dist/tokens.d.ts +6 -3
- package/dist/tokens.min.js +1 -1
- package/package.json +39 -34
- package/src/style.css +0 -22
- package/src/styles/ui/avatar.css +0 -13
- package/src/styles/ui/badge.css +0 -52
- package/src/styles/ui/button.css +0 -49
- package/src/styles/ui/collapsible.css +0 -13
- package/src/styles/ui/dialog.css +0 -37
- package/src/styles/ui/drawer.css +0 -15
- package/src/styles/ui/dropdown-menu.css +0 -132
- package/src/styles/ui/field.css +0 -12
- package/src/styles/ui/icon-button.css +0 -29
- package/src/styles/ui/input.css +0 -16
- package/src/styles/ui/panel.css +0 -23
- package/src/styles/ui/segmented-control.css +0 -28
- package/src/styles/ui/select.css +0 -52
- package/src/styles/ui/skeleton.css +0 -99
- package/src/styles/ui/status-notice.css +0 -49
- package/src/styles/ui/switch.css +0 -17
- package/src/styles/ui/tabs.css +0 -33
- package/src/styles/ui/textarea.css +0 -8
- package/src/styles/ui/toast.css +0 -57
- package/src/styles/ui/tooltip.css +0 -31
- package/src/tokens.css +0 -1
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
/* ================================================================== */
|
|
2
|
-
/* tokens.css —
|
|
2
|
+
/* tokens.css — Standard CSS Variables (ref -> sys -> cmp) */
|
|
3
3
|
/* */
|
|
4
4
|
/* This file has TWO responsibilities: */
|
|
5
|
-
/* 1.
|
|
5
|
+
/* 1. :root: Raw/ref CSS variables as foundational primitives */
|
|
6
6
|
/* 2. :root: Shared ref -> sys -> cmp mapping chains */
|
|
7
7
|
/* */
|
|
8
8
|
/* Theme-specific values live in theme-light.css / theme-dark.css. */
|
|
9
9
|
/* Do NOT add theme-specific colors here. */
|
|
10
10
|
/* ================================================================== */
|
|
11
|
-
|
|
12
|
-
@theme {
|
|
11
|
+
:root {
|
|
13
12
|
/* Neutral scale — initial values (light); overridden per-theme */
|
|
14
13
|
--owo-ref-color-neutral-900: #1a1a1a;
|
|
15
14
|
--owo-ref-color-neutral-800: #2d2d2d;
|
|
@@ -18,6 +17,8 @@
|
|
|
18
17
|
--owo-ref-color-neutral-500: #a1a1aa;
|
|
19
18
|
--owo-ref-color-neutral-400: #d4d4d8;
|
|
20
19
|
--owo-ref-color-neutral-300: #e4e4e7;
|
|
20
|
+
--owo-ref-color-neutral-200: #f0f0f2;
|
|
21
|
+
--owo-ref-color-neutral-100: #f8f8f9;
|
|
21
22
|
|
|
22
23
|
/* Brand — initial values (light); overridden per-theme */
|
|
23
24
|
--owo-ref-color-brand-primary: #1a1a1a;
|
|
@@ -60,8 +61,8 @@
|
|
|
60
61
|
--owo-ref-color-status-info-text: #0369a1;
|
|
61
62
|
|
|
62
63
|
/* Typography — shared across all themes */
|
|
63
|
-
--owo-ref-font-sans:
|
|
64
|
-
--owo-ref-font-heading:
|
|
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;
|
|
65
66
|
--owo-ref-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
66
67
|
|
|
67
68
|
/* Radius — shared across all themes */
|
|
@@ -79,15 +80,14 @@
|
|
|
79
80
|
--owo-ref-motion-ease-decelerate: cubic-bezier(0, 0, 0, 1);
|
|
80
81
|
--owo-ref-motion-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
|
|
81
82
|
--owo-ref-motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
|
|
82
|
-
}
|
|
83
83
|
|
|
84
|
-
/*
|
|
85
|
-
/* Shared mapping chains: ref -> sys -> cmp
|
|
86
|
-
/* Theme files set --owo-sys-theme-*, presets set
|
|
87
|
-
/* and this layer exposes the final
|
|
88
|
-
/*
|
|
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
|
+
/* ================================================================ */
|
|
89
90
|
|
|
90
|
-
:root {
|
|
91
91
|
/* Preset defaults — theme -> preset (overridden by preset-*.css) */
|
|
92
92
|
--owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
|
|
93
93
|
--owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
|
|
@@ -110,6 +110,11 @@
|
|
|
110
110
|
--owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
|
|
111
111
|
--owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
|
|
112
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;
|
|
113
118
|
--owo-sys-preset-control-border-width: 1px;
|
|
114
119
|
|
|
115
120
|
/* Final component contract layer — preset/theme -> cmp */
|
|
@@ -162,6 +167,11 @@
|
|
|
162
167
|
--owo-cmp-control-radius-xl: var(--owo-sys-preset-control-radius-xl);
|
|
163
168
|
--owo-cmp-control-radius-2xl: var(--owo-sys-preset-control-radius-2xl);
|
|
164
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);
|
|
165
175
|
--owo-cmp-control-border-width: var(--owo-sys-preset-control-border-width);
|
|
166
176
|
--owo-cmp-control-focus-ring: var(--owo-sys-theme-control-focus-ring);
|
|
167
177
|
--owo-cmp-control-focus-ring-offset: var(--owo-sys-theme-control-focus-ring-offset);
|
|
@@ -184,88 +194,25 @@
|
|
|
184
194
|
--owo-cmp-z-modal: 1100;
|
|
185
195
|
--owo-cmp-z-toast: 1200;
|
|
186
196
|
|
|
187
|
-
/*
|
|
188
|
-
--
|
|
189
|
-
--
|
|
190
|
-
--
|
|
191
|
-
--
|
|
192
|
-
--
|
|
193
|
-
--
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
--
|
|
197
|
-
--
|
|
198
|
-
--
|
|
199
|
-
--
|
|
200
|
-
--
|
|
201
|
-
--
|
|
202
|
-
--
|
|
203
|
-
--
|
|
204
|
-
--
|
|
205
|
-
--
|
|
206
|
-
--
|
|
207
|
-
--
|
|
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);
|
|
242
|
-
|
|
243
|
-
--skeleton-bg: linear-gradient(
|
|
244
|
-
180deg,
|
|
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%
|
|
247
|
-
);
|
|
248
|
-
--skeleton-bg-emphasis: linear-gradient(
|
|
249
|
-
180deg,
|
|
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%
|
|
252
|
-
);
|
|
253
|
-
--skeleton-sheen: linear-gradient(
|
|
254
|
-
100deg,
|
|
255
|
-
transparent 0%,
|
|
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%,
|
|
261
|
-
transparent 100%
|
|
262
|
-
);
|
|
263
|
-
--skeleton-top-highlight: var(--owo-ref-color-highlight-soft);
|
|
264
|
-
|
|
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);
|
|
267
|
-
|
|
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);
|
|
197
|
+
/* Feedback pattern — documented public contract (shared by Toast, StatusNotice) */
|
|
198
|
+
--owo-feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
|
|
199
|
+
--owo-feedback-neutral-border: var(--owo-cmp-surface-border);
|
|
200
|
+
--owo-feedback-neutral-text: var(--owo-cmp-text-primary);
|
|
201
|
+
--owo-feedback-neutral-icon: var(--owo-cmp-text-secondary);
|
|
202
|
+
--owo-feedback-info-bg: var(--owo-cmp-info-bg);
|
|
203
|
+
--owo-feedback-info-border: var(--owo-cmp-info-border);
|
|
204
|
+
--owo-feedback-info-text: var(--owo-cmp-info-text);
|
|
205
|
+
--owo-feedback-info-icon: var(--owo-cmp-info-text);
|
|
206
|
+
--owo-feedback-success-bg: var(--owo-cmp-success-bg);
|
|
207
|
+
--owo-feedback-success-border: var(--owo-cmp-success-border);
|
|
208
|
+
--owo-feedback-success-text: var(--owo-cmp-success-text);
|
|
209
|
+
--owo-feedback-success-icon: var(--owo-cmp-success-text);
|
|
210
|
+
--owo-feedback-warning-bg: var(--owo-cmp-warning-bg);
|
|
211
|
+
--owo-feedback-warning-border: var(--owo-cmp-warning-border);
|
|
212
|
+
--owo-feedback-warning-text: var(--owo-cmp-warning-text);
|
|
213
|
+
--owo-feedback-warning-icon: var(--owo-cmp-warning-text);
|
|
214
|
+
--owo-feedback-danger-bg: var(--owo-cmp-danger-bg);
|
|
215
|
+
--owo-feedback-danger-border: var(--owo-cmp-danger-border);
|
|
216
|
+
--owo-feedback-danger-text: var(--owo-cmp-danger-text);
|
|
217
|
+
--owo-feedback-danger-icon: var(--owo-cmp-danger-text);
|
|
271
218
|
}
|
package/dist/tokens.d.ts
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
/** Raw foundational neutral scale — palette primitives, not component semantics. */
|
|
2
|
+
declare const foundationNeutralKeys: readonly ["--owo-ref-color-neutral-900", "--owo-ref-color-neutral-800", "--owo-ref-color-neutral-700", "--owo-ref-color-neutral-600", "--owo-ref-color-neutral-500", "--owo-ref-color-neutral-400", "--owo-ref-color-neutral-300", "--owo-ref-color-neutral-200", "--owo-ref-color-neutral-100"];
|
|
3
|
+
type FoundationNeutralKey = (typeof foundationNeutralKeys)[number];
|
|
4
|
+
declare const semanticTokenKeys: readonly ["--owo-cmp-surface-bg", "--owo-cmp-surface-bg-subtle", "--owo-cmp-surface-bg-raised", "--owo-cmp-surface-bg-inset", "--owo-cmp-surface-border", "--owo-cmp-surface-border-muted", "--owo-cmp-surface-border-strong", "--owo-cmp-surface-shadow", "--owo-cmp-surface-shadow-strong", "--owo-cmp-surface-blur", "--owo-cmp-canvas-bg", "--owo-cmp-canvas-bg-subtle", "--owo-cmp-surface-container", "--owo-cmp-surface-container-high", "--owo-cmp-surface-container-highest", "--owo-cmp-overlay-bg", "--owo-cmp-text-primary", "--owo-cmp-text-secondary", "--owo-cmp-text-muted", "--owo-cmp-text-on-accent", "--owo-cmp-accent-bg", "--owo-cmp-accent-bg-hover", "--owo-cmp-accent-bg-muted", "--owo-cmp-accent-text", "--owo-cmp-accent-border", "--owo-cmp-success-bg", "--owo-cmp-success-border", "--owo-cmp-success-text", "--owo-cmp-warning-bg", "--owo-cmp-warning-border", "--owo-cmp-warning-text", "--owo-cmp-danger-bg", "--owo-cmp-danger-bg-emphasis", "--owo-cmp-danger-border", "--owo-cmp-danger-text", "--owo-cmp-info-bg", "--owo-cmp-info-border", "--owo-cmp-info-text", "--owo-cmp-control-radius-sm", "--owo-cmp-control-radius-md", "--owo-cmp-control-radius-lg", "--owo-cmp-control-radius-xl", "--owo-cmp-control-radius-2xl", "--owo-cmp-control-radius-full", "--owo-cmp-control-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"];
|
|
2
5
|
type SemanticTokenKey = (typeof semanticTokenKeys)[number];
|
|
3
6
|
declare const themeNames: readonly ["light", "dark"];
|
|
4
7
|
type OwoUiThemeName = (typeof themeNames)[number];
|
|
@@ -21,7 +24,7 @@ declare const tokenGroups: readonly [{
|
|
|
21
24
|
}, {
|
|
22
25
|
readonly id: "control";
|
|
23
26
|
readonly label: "Control";
|
|
24
|
-
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"];
|
|
25
28
|
}, {
|
|
26
29
|
readonly id: "typography";
|
|
27
30
|
readonly label: "Typography";
|
|
@@ -39,4 +42,4 @@ declare const presetNames: readonly ["default", "flat", "elevated", "glass"];
|
|
|
39
42
|
type OwoUiPresetName = (typeof presetNames)[number];
|
|
40
43
|
declare const tokenDescriptions: Record<SemanticTokenKey, string>;
|
|
41
44
|
|
|
42
|
-
export { type OwoUiPresetName, type OwoUiThemeName, type SemanticTokenKey, presetNames, semanticTokenKeys, themeNames, tokenDescriptions, tokenGroups };
|
|
45
|
+
export { type FoundationNeutralKey, type OwoUiPresetName, type OwoUiThemeName, type SemanticTokenKey, foundationNeutralKeys, presetNames, semanticTokenKeys, themeNames, tokenDescriptions, tokenGroups };
|
package/dist/tokens.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var o=["--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"],
|
|
1
|
+
var o=["--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"],e=["--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"],r=["light","dark"],c=[{id:"surface",label:"Surface",tokens:["--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"]},{id:"text",label:"Text",tokens:["--owo-cmp-text-primary","--owo-cmp-text-secondary","--owo-cmp-text-muted","--owo-cmp-text-on-accent"]},{id:"accent",label:"Accent",tokens:["--owo-cmp-accent-bg","--owo-cmp-accent-bg-hover","--owo-cmp-accent-bg-muted","--owo-cmp-accent-text","--owo-cmp-accent-border"]},{id:"feedback",label:"Feedback",tokens:["--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"]},{id:"control",label:"Control",tokens:["--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"]},{id:"typography",label:"Typography",tokens:["--owo-cmp-font-heading"]},{id:"motion-density",label:"Motion & Density",tokens:["--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"]},{id:"layering",label:"Layering",tokens:["--owo-cmp-z-dropdown","--owo-cmp-z-modal","--owo-cmp-z-toast"]}],t=["default","flat","elevated","glass"],a={"--owo-cmp-surface-bg":"Default component surface background.","--owo-cmp-surface-bg-subtle":"Lower-emphasis surface background.","--owo-cmp-surface-bg-raised":"Raised surface background for floating or elevated panels.","--owo-cmp-surface-bg-inset":"Inset surface background for inputs and compact controls.","--owo-cmp-surface-border":"Default component border color.","--owo-cmp-surface-border-muted":"Lowest-emphasis border for subtle separators and dividers.","--owo-cmp-surface-border-strong":"Higher-emphasis border or focus-adjacent border color.","--owo-cmp-surface-shadow":"Default surface shadow for raised UI.","--owo-cmp-surface-shadow-strong":"Higher-emphasis shadow for popovers and overlays.","--owo-cmp-surface-blur":"Backdrop blur amount for translucent surface styles.","--owo-cmp-canvas-bg":"Page-level canvas background, distinct from component surfaces.","--owo-cmp-canvas-bg-subtle":"Subtle canvas background for secondary page regions.","--owo-cmp-surface-container":"Container background for sidebars, panels, and layout regions.","--owo-cmp-surface-container-high":"Higher-emphasis container background for nested panels.","--owo-cmp-surface-container-highest":"Highest-emphasis container background for deeply nested panels.","--owo-cmp-overlay-bg":"Shared overlay or backdrop background treatment.","--owo-cmp-text-primary":"Primary readable foreground text color.","--owo-cmp-text-secondary":"Secondary readable foreground text color.","--owo-cmp-text-muted":"Muted or tertiary text color.","--owo-cmp-text-on-accent":"Readable text color when placed on accent surfaces.","--owo-cmp-accent-bg":"Primary accent background color.","--owo-cmp-accent-bg-hover":"Primary accent hover color.","--owo-cmp-accent-bg-muted":"Muted accent background for hover, selected, and highlighted states.","--owo-cmp-accent-text":"Readable text color used on accent backgrounds.","--owo-cmp-accent-border":"Accent-tinted border for active indicators and emphasis separators.","--owo-cmp-success-bg":"Success background treatment.","--owo-cmp-success-border":"Success border treatment.","--owo-cmp-success-text":"Success foreground text color.","--owo-cmp-warning-bg":"Warning background treatment.","--owo-cmp-warning-border":"Warning border treatment.","--owo-cmp-warning-text":"Warning foreground text color.","--owo-cmp-danger-bg":"Danger background treatment.","--owo-cmp-danger-bg-emphasis":"Stronger danger background for hover, active, or destructive emphasis.","--owo-cmp-danger-border":"Danger border treatment.","--owo-cmp-danger-text":"Danger foreground text color.","--owo-cmp-info-bg":"Info background treatment.","--owo-cmp-info-border":"Info border treatment.","--owo-cmp-info-text":"Info foreground text color.","--owo-cmp-control-radius-sm":"Small control radius.","--owo-cmp-control-radius-md":"Default control radius.","--owo-cmp-control-radius-lg":"Large control radius.","--owo-cmp-control-radius-xl":"Extra-large radius for drawers, dialogs, and large containers.","--owo-cmp-control-radius-2xl":"Double extra-large radius for sheets and full-page overlays.","--owo-cmp-control-radius-full":"Fully rounded radius for pills, badges, avatars, and circular controls.","--owo-cmp-control-height-xs":"Extra-small control height.","--owo-cmp-control-height-sm":"Small control height.","--owo-cmp-control-height-md":"Default control height.","--owo-cmp-control-height-lg":"Large control height.","--owo-cmp-control-height-xl":"Extra-large control height.","--owo-cmp-control-border-width":"Default border width for controls.","--owo-cmp-control-focus-ring":"Focus ring color.","--owo-cmp-control-focus-ring-offset":"Focus ring offset base color.","--owo-cmp-font-heading":"Heading font family stack.","--owo-cmp-motion-duration-fast":"Fast motion duration.","--owo-cmp-motion-duration-default":"Default motion duration.","--owo-cmp-motion-ease-standard":"Default motion easing curve.","--owo-cmp-motion-ease-decelerate":"Entrance-friendly motion easing curve.","--owo-cmp-motion-ease-accelerate":"Exit-friendly motion easing curve.","--owo-cmp-density-compact":"Compact density scale.","--owo-cmp-density-default":"Default density scale.","--owo-cmp-density-comfortable":"Comfortable density scale.","--owo-cmp-z-dropdown":"Dropdown and popover layering index.","--owo-cmp-z-modal":"Modal and drawer layering index.","--owo-cmp-z-toast":"Toast and high-priority overlay layering index."};export{o as foundationNeutralKeys,t as presetNames,e as semanticTokenKeys,r as themeNames,a as tokenDescriptions,c as tokenGroups};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@owodesign/owoui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.6",
|
|
4
4
|
"description": "Reusable React UI foundation components and theme presets.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.min.js",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"types": "./dist/tokens.d.ts",
|
|
28
28
|
"import": "./dist/tokens.min.js"
|
|
29
29
|
},
|
|
30
|
-
"./tokens.css": "./
|
|
30
|
+
"./tokens.css": "./dist/tokens.css",
|
|
31
31
|
"./storybook": {
|
|
32
32
|
"types": "./dist/storybook/index.d.ts",
|
|
33
33
|
"import": "./dist/storybook/index.min.js"
|
|
@@ -37,52 +37,52 @@
|
|
|
37
37
|
"import": "./dist/storybook/catalog.js"
|
|
38
38
|
},
|
|
39
39
|
"./storybook/catalog.json": "./dist/storybook/catalog.json",
|
|
40
|
-
"./style.css": "./
|
|
41
|
-
"./theme-light.css": "./
|
|
42
|
-
"./theme-dark.css": "./
|
|
43
|
-
"./preset-default.css": "./
|
|
44
|
-
"./preset-flat.css": "./
|
|
45
|
-
"./preset-elevated.css": "./
|
|
46
|
-
"./preset-glass.css": "./
|
|
40
|
+
"./style.css": "./dist/style.css",
|
|
41
|
+
"./theme-light.css": "./dist/theme-light.css",
|
|
42
|
+
"./theme-dark.css": "./dist/theme-dark.css",
|
|
43
|
+
"./preset-default.css": "./dist/preset-default.css",
|
|
44
|
+
"./preset-flat.css": "./dist/preset-flat.css",
|
|
45
|
+
"./preset-elevated.css": "./dist/preset-elevated.css",
|
|
46
|
+
"./preset-glass.css": "./dist/preset-glass.css"
|
|
47
47
|
},
|
|
48
48
|
"files": [
|
|
49
|
-
"dist"
|
|
50
|
-
"src/style.css",
|
|
51
|
-
"src/tokens.css",
|
|
52
|
-
"src/theme-light.css",
|
|
53
|
-
"src/theme-dark.css",
|
|
54
|
-
"src/preset-default.css",
|
|
55
|
-
"src/preset-flat.css",
|
|
56
|
-
"src/preset-elevated.css",
|
|
57
|
-
"src/preset-glass.css",
|
|
58
|
-
"src/styles"
|
|
49
|
+
"dist"
|
|
59
50
|
],
|
|
60
51
|
"sideEffects": [
|
|
61
|
-
"./
|
|
62
|
-
"./
|
|
63
|
-
"./
|
|
64
|
-
"./
|
|
65
|
-
"./
|
|
66
|
-
"./
|
|
67
|
-
"./
|
|
68
|
-
"./
|
|
69
|
-
"./src/styles/**/*.css",
|
|
52
|
+
"./dist/style.css",
|
|
53
|
+
"./dist/tokens.css",
|
|
54
|
+
"./dist/theme-light.css",
|
|
55
|
+
"./dist/theme-dark.css",
|
|
56
|
+
"./dist/preset-default.css",
|
|
57
|
+
"./dist/preset-flat.css",
|
|
58
|
+
"./dist/preset-elevated.css",
|
|
59
|
+
"./dist/preset-glass.css",
|
|
70
60
|
"./src/storybook/**/*.ts",
|
|
71
61
|
"./src/storybook/**/*.tsx"
|
|
72
62
|
],
|
|
73
63
|
"scripts": {
|
|
74
|
-
"build": "npm run build:lib && npm run build:storybook && npm run build:storybook:catalog && npm run build:storybook:static",
|
|
64
|
+
"build": "npm run build:lib && npm run build:storybook && npm run build:css && npm run build:storybook:catalog && npm run build:storybook:static",
|
|
65
|
+
"build:css": "node scripts/build-css.mjs",
|
|
75
66
|
"build:lib": "tsup",
|
|
76
67
|
"build:storybook": "tsup --config tsup.storybook.config.ts",
|
|
77
68
|
"build:storybook:catalog": "node scripts/build-storybook-catalog.mjs",
|
|
78
69
|
"build:storybook:static:bundle": "tsup --config tsup.storybook.static.config.ts",
|
|
79
70
|
"build:storybook:static": "npm run build:storybook:static:bundle && node scripts/build-storybook-static.mjs",
|
|
71
|
+
"check:css-modules": "node scripts/check-css-module-refs.mjs",
|
|
72
|
+
"check:css-modules:unused": "node scripts/report-unused-css-module-classes.mjs",
|
|
80
73
|
"dev:storybook": "vite --config vite.config.ts",
|
|
81
74
|
"preview:storybook": "vite preview --config vite.config.ts",
|
|
82
|
-
"typecheck": "tsc --noEmit -p tsconfig.json",
|
|
75
|
+
"typecheck": "npm run check:css-modules && tsc --noEmit -p tsconfig.json",
|
|
83
76
|
"consumer:smoke": "node examples/consumer-smoke.mjs",
|
|
77
|
+
"consumer:tarball": "node scripts/verify-tarball-consumer.mjs",
|
|
78
|
+
"clean": "rm -rf dist",
|
|
84
79
|
"pack:inspect": "npm_config_cache=/tmp/owoui-npm-cache npm pack --dry-run --json .",
|
|
85
|
-
"
|
|
80
|
+
"test": "vitest run",
|
|
81
|
+
"test:watch": "vitest",
|
|
82
|
+
"test:e2e": "npx playwright test",
|
|
83
|
+
"test:e2e:update": "npx playwright test --update-snapshots",
|
|
84
|
+
"release:check": "npm run build && npm run typecheck && npm run consumer:smoke && npm run consumer:tarball && npm run pack:inspect",
|
|
85
|
+
"release:publish": "npm run release:check && npm publish --access public"
|
|
86
86
|
},
|
|
87
87
|
"publishConfig": {
|
|
88
88
|
"access": "public"
|
|
@@ -97,15 +97,20 @@
|
|
|
97
97
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
98
98
|
},
|
|
99
99
|
"devDependencies": {
|
|
100
|
-
"@
|
|
100
|
+
"@playwright/test": "^1.59.0",
|
|
101
|
+
"@testing-library/jest-dom": "^6.9.1",
|
|
102
|
+
"@testing-library/react": "^16.3.2",
|
|
101
103
|
"@types/react": "^19.0.0",
|
|
102
104
|
"@types/react-dom": "^19.0.0",
|
|
103
105
|
"@vitejs/plugin-react": "^6.0.1",
|
|
106
|
+
"jsdom": "^29.0.1",
|
|
104
107
|
"postcss": "^8.5.6",
|
|
108
|
+
"postcss-import": "^16.1.1",
|
|
105
109
|
"react": "^19.2.4",
|
|
106
110
|
"react-dom": "^19.2.4",
|
|
107
|
-
"tailwindcss": "^4.2.1",
|
|
108
111
|
"tsup": "^8.5.1",
|
|
109
|
-
"
|
|
112
|
+
"typescript": "^5.9.3",
|
|
113
|
+
"vite": "^8.0.3",
|
|
114
|
+
"vitest": "^4.1.2"
|
|
110
115
|
}
|
|
111
116
|
}
|
package/src/style.css
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
@import "tailwindcss";
|
|
2
|
-
@import "./styles/tokens.css";
|
|
3
|
-
@import "./styles/ui/avatar.css";
|
|
4
|
-
@import "./styles/ui/badge.css";
|
|
5
|
-
@import "./styles/ui/button.css";
|
|
6
|
-
@import "./styles/ui/collapsible.css";
|
|
7
|
-
@import "./styles/ui/dialog.css";
|
|
8
|
-
@import "./styles/ui/dropdown-menu.css";
|
|
9
|
-
@import "./styles/ui/drawer.css";
|
|
10
|
-
@import "./styles/ui/field.css";
|
|
11
|
-
@import "./styles/ui/icon-button.css";
|
|
12
|
-
@import "./styles/ui/input.css";
|
|
13
|
-
@import "./styles/ui/panel.css";
|
|
14
|
-
@import "./styles/ui/segmented-control.css";
|
|
15
|
-
@import "./styles/ui/select.css";
|
|
16
|
-
@import "./styles/ui/skeleton.css";
|
|
17
|
-
@import "./styles/ui/status-notice.css";
|
|
18
|
-
@import "./styles/ui/switch.css";
|
|
19
|
-
@import "./styles/ui/tabs.css";
|
|
20
|
-
@import "./styles/ui/textarea.css";
|
|
21
|
-
@import "./styles/ui/toast.css";
|
|
22
|
-
@import "./styles/ui/tooltip.css";
|
package/src/styles/ui/avatar.css
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
.owo-avatar {
|
|
2
|
-
--avatar-bg: var(--owo-cmp-surface-bg-inset);
|
|
3
|
-
--avatar-text: var(--owo-cmp-text-secondary);
|
|
4
|
-
--avatar-border: transparent;
|
|
5
|
-
background: var(--avatar-bg);
|
|
6
|
-
color: var(--avatar-text);
|
|
7
|
-
border: 1px solid var(--avatar-border);
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.owo-avatar[data-tone="subtle"] {
|
|
11
|
-
--avatar-bg: var(--owo-cmp-surface-bg-subtle);
|
|
12
|
-
--avatar-text: var(--owo-cmp-text-muted);
|
|
13
|
-
}
|
package/src/styles/ui/badge.css
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
.owo-badge {
|
|
2
|
-
--badge-bg: var(--owo-cmp-surface-bg-inset);
|
|
3
|
-
--badge-text: var(--owo-cmp-text-secondary);
|
|
4
|
-
--badge-border: transparent;
|
|
5
|
-
background: var(--badge-bg);
|
|
6
|
-
border-color: var(--badge-border);
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.owo-badge[data-variant="outline"] {
|
|
10
|
-
--badge-bg: transparent;
|
|
11
|
-
--badge-border: var(--owo-cmp-surface-border);
|
|
12
|
-
}
|
|
13
|
-
|
|
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
|
-
}
|
|
19
|
-
|
|
20
|
-
.owo-badge[data-tone="info"][data-variant="outline"] {
|
|
21
|
-
--badge-bg: transparent;
|
|
22
|
-
}
|
|
23
|
-
|
|
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
|
-
}
|
|
29
|
-
|
|
30
|
-
.owo-badge[data-tone="success"][data-variant="outline"] {
|
|
31
|
-
--badge-bg: transparent;
|
|
32
|
-
}
|
|
33
|
-
|
|
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
|
-
}
|
|
39
|
-
|
|
40
|
-
.owo-badge[data-tone="warning"][data-variant="outline"] {
|
|
41
|
-
--badge-bg: transparent;
|
|
42
|
-
}
|
|
43
|
-
|
|
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
|
-
}
|
|
49
|
-
|
|
50
|
-
.owo-badge[data-tone="danger"][data-variant="outline"] {
|
|
51
|
-
--badge-bg: transparent;
|
|
52
|
-
}
|
package/src/styles/ui/button.css
DELETED
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
.owo-button {
|
|
2
|
-
--button-bg: var(--owo-cmp-surface-bg);
|
|
3
|
-
--button-bg-hover: var(--owo-cmp-surface-bg-inset);
|
|
4
|
-
--button-bg-active: var(--owo-cmp-surface-bg-subtle);
|
|
5
|
-
--button-text: var(--owo-cmp-text-primary);
|
|
6
|
-
--button-border: var(--owo-cmp-surface-border);
|
|
7
|
-
--button-ring: var(--owo-cmp-control-focus-ring);
|
|
8
|
-
--button-disabled-opacity: 0.5;
|
|
9
|
-
background: var(--button-bg);
|
|
10
|
-
color: var(--button-text);
|
|
11
|
-
border-color: var(--button-border);
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.owo-button:hover {
|
|
15
|
-
background: var(--button-bg-hover);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.owo-button:active {
|
|
19
|
-
background: var(--button-bg-active);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.owo-button:focus-visible {
|
|
23
|
-
--tw-ring-color: var(--button-ring);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.owo-button[data-variant="primary"] {
|
|
27
|
-
--button-bg: var(--owo-cmp-accent-bg);
|
|
28
|
-
--button-bg-hover: var(--owo-cmp-accent-bg-hover);
|
|
29
|
-
--button-bg-active: color-mix(in srgb, var(--owo-cmp-accent-bg-hover) 88%, black);
|
|
30
|
-
--button-text: var(--owo-cmp-accent-text);
|
|
31
|
-
--button-border: transparent;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.owo-button[data-variant="ghost"] {
|
|
35
|
-
--button-bg: transparent;
|
|
36
|
-
--button-bg-hover: var(--owo-cmp-surface-bg-inset);
|
|
37
|
-
--button-bg-active: var(--owo-cmp-surface-bg-subtle);
|
|
38
|
-
--button-text: var(--owo-cmp-text-secondary);
|
|
39
|
-
--button-border: transparent;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.owo-button[data-variant="danger"] {
|
|
43
|
-
--button-bg: var(--owo-cmp-danger-bg);
|
|
44
|
-
--button-bg-hover: color-mix(in srgb, var(--owo-cmp-danger-bg) 92%, var(--owo-cmp-danger-border));
|
|
45
|
-
--button-bg-active: color-mix(in srgb, var(--owo-cmp-danger-bg) 84%, var(--owo-cmp-danger-border));
|
|
46
|
-
--button-text: var(--owo-cmp-danger-text);
|
|
47
|
-
--button-border: var(--owo-cmp-danger-border);
|
|
48
|
-
--button-ring: var(--owo-cmp-danger-border);
|
|
49
|
-
}
|
package/src/styles/ui/dialog.css
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
.owo-dialog-backdrop {
|
|
2
|
-
animation: dialog-backdrop-in 0.2s var(--owo-cmp-motion-ease-standard);
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
.owo-dialog {
|
|
6
|
-
background: var(--owo-cmp-surface-bg-raised);
|
|
7
|
-
border: 1px solid var(--owo-cmp-surface-border);
|
|
8
|
-
color: var(--owo-cmp-text-primary);
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.owo-dialog__header {
|
|
12
|
-
color: var(--owo-cmp-text-primary);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.owo-dialog__body {
|
|
16
|
-
color: var(--owo-cmp-text-secondary);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
@keyframes dialog-in {
|
|
20
|
-
from {
|
|
21
|
-
opacity: 0;
|
|
22
|
-
transform: scale(0.95) translateY(4px);
|
|
23
|
-
}
|
|
24
|
-
to {
|
|
25
|
-
opacity: 1;
|
|
26
|
-
transform: scale(1) translateY(0);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
@keyframes dialog-backdrop-in {
|
|
31
|
-
from {
|
|
32
|
-
opacity: 0;
|
|
33
|
-
}
|
|
34
|
-
to {
|
|
35
|
-
opacity: 1;
|
|
36
|
-
}
|
|
37
|
-
}
|
package/src/styles/ui/drawer.css
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
.owo-drawer {
|
|
2
|
-
--drawer-surface: var(--owo-cmp-surface-bg-raised);
|
|
3
|
-
--drawer-border: var(--owo-cmp-surface-border);
|
|
4
|
-
--drawer-shadow: var(--drawer-panel-shadow);
|
|
5
|
-
will-change: transform;
|
|
6
|
-
background: var(--drawer-surface);
|
|
7
|
-
border-color: var(--drawer-border);
|
|
8
|
-
box-shadow: var(--drawer-shadow);
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.owo-drawer-backdrop {
|
|
12
|
-
--drawer-backdrop: var(--owo-cmp-overlay-bg);
|
|
13
|
-
border: 0;
|
|
14
|
-
background: var(--drawer-backdrop);
|
|
15
|
-
}
|