@owodesign/owoui 0.1.4 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/README.md +19 -9
  2. package/dist/preset-default.css +143 -0
  3. package/dist/preset-elevated.css +164 -0
  4. package/dist/preset-flat.css +144 -0
  5. package/dist/preset-glass.css +173 -0
  6. package/dist/storybook-static/app.css +609 -829
  7. package/dist/storybook-static/assets/main.css +2 -2
  8. package/dist/storybook-static/assets/main.js +12 -12
  9. package/dist/style.css +2988 -0
  10. package/dist/theme-dark.css +230 -0
  11. package/{src/styles/tokens.css → dist/theme-light.css} +109 -149
  12. package/dist/tokens.css +118 -0
  13. package/dist/tokens.d.ts +4 -1
  14. package/dist/tokens.min.js +1 -1
  15. package/package.json +25 -30
  16. package/src/preset-default.css +0 -27
  17. package/src/preset-elevated.css +0 -27
  18. package/src/preset-flat.css +0 -27
  19. package/src/preset-glass.css +0 -27
  20. package/src/style.css +0 -22
  21. package/src/styles/ui/avatar.css +0 -13
  22. package/src/styles/ui/badge.css +0 -52
  23. package/src/styles/ui/button.css +0 -49
  24. package/src/styles/ui/collapsible.css +0 -13
  25. package/src/styles/ui/dialog.css +0 -37
  26. package/src/styles/ui/drawer.css +0 -15
  27. package/src/styles/ui/dropdown-menu.css +0 -132
  28. package/src/styles/ui/field.css +0 -12
  29. package/src/styles/ui/icon-button.css +0 -29
  30. package/src/styles/ui/input.css +0 -16
  31. package/src/styles/ui/panel.css +0 -23
  32. package/src/styles/ui/segmented-control.css +0 -28
  33. package/src/styles/ui/select.css +0 -52
  34. package/src/styles/ui/skeleton.css +0 -99
  35. package/src/styles/ui/status-notice.css +0 -49
  36. package/src/styles/ui/switch.css +0 -17
  37. package/src/styles/ui/tabs.css +0 -33
  38. package/src/styles/ui/textarea.css +0 -8
  39. package/src/styles/ui/toast.css +0 -57
  40. package/src/styles/ui/tooltip.css +0 -31
  41. package/src/theme-dark.css +0 -87
  42. package/src/theme-light.css +0 -103
  43. package/src/tokens.css +0 -1
package/README.md CHANGED
@@ -9,7 +9,7 @@ import '@owodesign/owoui/style.css';
9
9
  import { Button, Dialog, Select } from '@owodesign/owoui';
10
10
  ```
11
11
 
12
- `style.css` ships the component bundle and defaults to the same token values as `theme-light + preset-default`.
12
+ `style.css` is a compiled, publish-ready CSS asset. Consumers do not need Tailwind or a Tailwind PostCSS plugin to resolve it. It ships the component bundle together with `theme-light + preset-default`, so the full `ref -> sys -> cmp` token chain is present even when consumers only import one file.
13
13
 
14
14
  To opt into another combination:
15
15
 
@@ -19,6 +19,12 @@ import '@owodesign/owoui/theme-dark.css';
19
19
  import '@owodesign/owoui/preset-glass.css';
20
20
  ```
21
21
 
22
+ Override order is intentional:
23
+
24
+ - `style.css` establishes the default baseline (`theme-light + preset-default`)
25
+ - later theme imports replace the theme layer
26
+ - later preset imports replace the preset layer
27
+
22
28
  This package ships:
23
29
 
24
30
  - reusable React UI primitives
@@ -49,6 +55,8 @@ import { tokenGroups, semanticTokenKeys, themeNames, presetNames } from '@owodes
49
55
  - `@owodesign/owoui/theme-light.css`
50
56
  - `@owodesign/owoui/theme-dark.css`
51
57
 
58
+ If you import `theme-light.css` after `style.css`, it is effectively a no-op because `style.css` already includes the same theme baseline.
59
+
52
60
  ## Presets
53
61
 
54
62
  - `@owodesign/owoui/preset-default.css`: Signature Look based on qblog's current default preset qualities
@@ -56,6 +64,8 @@ import { tokenGroups, semanticTokenKeys, themeNames, presetNames } from '@owodes
56
64
  - `@owodesign/owoui/preset-elevated.css`: stronger depth and larger radii
57
65
  - `@owodesign/owoui/preset-glass.css`: translucent surfaces with blur
58
66
 
67
+ If you import `preset-default.css` after `style.css`, it is effectively a no-op because `style.css` already includes the default preset baseline.
68
+
59
69
  There is no backward-compat alias layer for the previous `dark.css` / `flat.css` / `elevated.css` / `glass.css` entrypoints.
60
70
 
61
71
  ## Storybook Artifact
@@ -79,25 +89,25 @@ It also builds a standalone static storybook site into `dist/storybook-static/`,
79
89
  For package-local development with HMR, run:
80
90
 
81
91
  ```bash
82
- npm -w packages/owoui run dev:storybook
92
+ npm run dev:storybook
83
93
  ```
84
94
 
85
- The dev host lives inside `packages/owoui` itself (`vite.config.ts`, `postcss.config.mjs`, `index.html`) so the package can move into its own repo later without depending on qblog's app shell.
95
+ The dev host lives inside this package itself (`vite.config.ts`, `postcss.config.mjs`, `index.html`) and does not depend on qblog's app shell.
86
96
 
87
97
  ## Specs
88
98
 
89
- - [form-control-boundaries.md](/home/qq/proj/qblog/packages/owoui/docs/spec/form-control-boundaries.md): design and architecture boundaries for `Field`, `Input`, `Textarea`, and `Select`
90
- - [token-layering-and-naming.md](/home/qq/proj/qblog/packages/owoui/docs/spec/token-layering-and-naming.md): raw / alias / semantic token layering and naming rules
91
- - [token-naming-upgrade-plan.md](/home/qq/proj/qblog/packages/owoui/docs/spec/token-naming-upgrade-plan.md): `--owo-ref-*` / `--owo-sys-*` / `--owo-cmp-*` naming migration plan
99
+ - [form-control-boundaries.md](./docs/spec/form-control-boundaries.md): design and architecture boundaries for `Field`, `Input`, `Textarea`, and `Select`
100
+ - [token-layering-and-naming.md](./docs/spec/token-layering-and-naming.md): raw / alias / semantic token layering and naming rules
101
+ - [token-naming-upgrade-plan.md](./docs/spec/token-naming-upgrade-plan.md): `--owo-ref-*` / `--owo-sys-*` / `--owo-cmp-*` naming migration plan
92
102
 
93
103
  ## Release Checks
94
104
 
95
- From the repo root:
105
+ From the package root:
96
106
 
97
107
  ```bash
98
- npm run release:owoui:check
108
+ npm run release:check
99
109
  ```
100
110
 
101
111
  Publishing notes live in:
102
112
 
103
- - [PUBLISHING.md](/home/qq/proj/qblog/packages/owoui/PUBLISHING.md)
113
+ - [PUBLISHING.md](./PUBLISHING.md)
package/dist/preset-default.css ADDED
@@ -0,0 +1,143 @@
1
+ /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
+ :root, :host {
3
+ --owo-ref-shadow-raised: 0 10px 20px rgba(15, 23, 42, 0.08);
4
+ --owo-ref-shadow-popover: 0 18px 40px rgba(15, 23, 42, 0.10);
5
+ --owo-ref-font-heading: var(--font-source-serif-pro), var(--font-noto-serif-sc), "Source Serif 4", Georgia, "Times New Roman", serif;
6
+ --owo-ref-radius-sm: 0.5rem;
7
+ --owo-ref-radius-md: 0.75rem;
8
+ --owo-ref-radius-lg: 1rem;
9
+ --owo-ref-radius-xl: 1.5rem;
10
+ --owo-ref-radius-2xl: 2rem;
11
+ --owo-ref-radius-full: 9999px;
12
+ --owo-ref-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
13
+ --owo-ref-motion-ease-decelerate: cubic-bezier(0, 0, 0, 1);
14
+ --owo-ref-motion-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
15
+ }
16
+ :root {
17
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
18
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
19
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
20
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
21
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
22
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
23
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
24
+ --owo-sys-preset-surface-shadow: var(--owo-ref-shadow-raised);
25
+ --owo-sys-preset-surface-shadow-strong: var(--owo-ref-shadow-popover);
26
+ --owo-sys-preset-surface-blur: 0px;
27
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
28
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
29
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
30
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
31
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
32
+ --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-sm);
33
+ --owo-sys-preset-control-radius-md: var(--owo-ref-radius-md);
34
+ --owo-sys-preset-control-radius-lg: var(--owo-ref-radius-lg);
35
+ --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
36
+ --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
37
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
38
+ --owo-sys-preset-control-border-width: 1px;
39
+ --owo-cmp-surface-bg: var(--owo-sys-preset-surface-bg);
40
+ --owo-cmp-surface-bg-subtle: var(--owo-sys-preset-surface-bg-subtle);
41
+ --owo-cmp-surface-bg-raised: var(--owo-sys-preset-surface-bg-raised);
42
+ --owo-cmp-surface-bg-inset: var(--owo-sys-preset-surface-bg-inset);
43
+ --owo-cmp-surface-border: var(--owo-sys-preset-surface-border);
44
+ --owo-cmp-surface-border-muted: var(--owo-sys-preset-surface-border-muted);
45
+ --owo-cmp-surface-border-strong: var(--owo-sys-preset-surface-border-strong);
46
+ --owo-cmp-surface-shadow: var(--owo-sys-preset-surface-shadow);
47
+ --owo-cmp-surface-shadow-strong: var(--owo-sys-preset-surface-shadow-strong);
48
+ --owo-cmp-surface-blur: var(--owo-sys-preset-surface-blur);
49
+ --owo-cmp-canvas-bg: var(--owo-sys-preset-canvas-bg);
50
+ --owo-cmp-canvas-bg-subtle: var(--owo-sys-preset-canvas-bg-subtle);
51
+ --owo-cmp-surface-container: var(--owo-sys-preset-surface-container);
52
+ --owo-cmp-surface-container-high: var(--owo-sys-preset-surface-container-high);
53
+ --owo-cmp-surface-container-highest: var(--owo-sys-preset-surface-container-highest);
54
+ --owo-cmp-text-primary: var(--owo-sys-theme-text-primary);
55
+ --owo-cmp-text-secondary: var(--owo-sys-theme-text-secondary);
56
+ --owo-cmp-text-muted: var(--owo-sys-theme-text-muted);
57
+ --owo-cmp-text-on-accent: var(--owo-sys-theme-text-on-accent);
58
+ --owo-cmp-accent-bg: var(--owo-sys-theme-accent-bg);
59
+ --owo-cmp-accent-bg-hover: var(--owo-sys-theme-accent-bg-hover);
60
+ --owo-cmp-accent-bg-muted: var(--owo-sys-theme-accent-bg-muted);
61
+ --owo-cmp-accent-text: var(--owo-sys-theme-text-on-accent);
62
+ --owo-cmp-accent-border: var(--owo-sys-theme-accent-border);
63
+ --owo-cmp-success-bg: var(--owo-sys-theme-success-bg);
64
+ --owo-cmp-success-border: var(--owo-sys-theme-success-border);
65
+ --owo-cmp-success-text: var(--owo-sys-theme-success-text);
66
+ --owo-cmp-warning-bg: var(--owo-sys-theme-warning-bg);
67
+ --owo-cmp-warning-border: var(--owo-sys-theme-warning-border);
68
+ --owo-cmp-warning-text: var(--owo-sys-theme-warning-text);
69
+ --owo-cmp-danger-bg: var(--owo-sys-theme-danger-bg);
70
+ --owo-cmp-danger-bg-emphasis: var(--owo-sys-theme-danger-bg-emphasis);
71
+ --owo-cmp-danger-border: var(--owo-sys-theme-danger-border);
72
+ --owo-cmp-danger-text: var(--owo-sys-theme-danger-text);
73
+ --owo-cmp-info-bg: var(--owo-sys-theme-info-bg);
74
+ --owo-cmp-info-border: var(--owo-sys-theme-info-border);
75
+ --owo-cmp-info-text: var(--owo-sys-theme-info-text);
76
+ --owo-cmp-control-radius-sm: var(--owo-sys-preset-control-radius-sm);
77
+ --owo-cmp-control-radius-md: var(--owo-sys-preset-control-radius-md);
78
+ --owo-cmp-control-radius-lg: var(--owo-sys-preset-control-radius-lg);
79
+ --owo-cmp-control-radius-xl: var(--owo-sys-preset-control-radius-xl);
80
+ --owo-cmp-control-radius-2xl: var(--owo-sys-preset-control-radius-2xl);
81
+ --owo-cmp-control-radius-full: var(--owo-sys-preset-control-radius-full);
82
+ --owo-cmp-control-border-width: var(--owo-sys-preset-control-border-width);
83
+ --owo-cmp-control-focus-ring: var(--owo-sys-theme-control-focus-ring);
84
+ --owo-cmp-control-focus-ring-offset: var(--owo-sys-theme-control-focus-ring-offset);
85
+ --owo-cmp-font-heading: var(--owo-ref-font-heading);
86
+ --owo-cmp-motion-duration-fast: 0.15s;
87
+ --owo-cmp-motion-duration-default: 0.2s;
88
+ --owo-cmp-motion-ease-standard: var(--owo-ref-motion-ease-standard);
89
+ --owo-cmp-motion-ease-decelerate: var(--owo-ref-motion-ease-decelerate);
90
+ --owo-cmp-motion-ease-accelerate: var(--owo-ref-motion-ease-accelerate);
91
+ --owo-cmp-density-compact: 0.875;
92
+ --owo-cmp-density-default: 1;
93
+ --owo-cmp-density-comfortable: 1.125;
94
+ --owo-cmp-overlay-bg: var(--owo-sys-theme-overlay-bg);
95
+ --owo-cmp-z-dropdown: 1000;
96
+ --owo-cmp-z-modal: 1100;
97
+ --owo-cmp-z-toast: 1200;
98
+ --owo-feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
99
+ --owo-feedback-neutral-border: var(--owo-cmp-surface-border);
100
+ --owo-feedback-neutral-text: var(--owo-cmp-text-primary);
101
+ --owo-feedback-neutral-icon: var(--owo-cmp-text-secondary);
102
+ --owo-feedback-info-bg: var(--owo-cmp-info-bg);
103
+ --owo-feedback-info-border: var(--owo-cmp-info-border);
104
+ --owo-feedback-info-text: var(--owo-cmp-info-text);
105
+ --owo-feedback-info-icon: var(--owo-cmp-info-text);
106
+ --owo-feedback-success-bg: var(--owo-cmp-success-bg);
107
+ --owo-feedback-success-border: var(--owo-cmp-success-border);
108
+ --owo-feedback-success-text: var(--owo-cmp-success-text);
109
+ --owo-feedback-success-icon: var(--owo-cmp-success-text);
110
+ --owo-feedback-warning-bg: var(--owo-cmp-warning-bg);
111
+ --owo-feedback-warning-border: var(--owo-cmp-warning-border);
112
+ --owo-feedback-warning-text: var(--owo-cmp-warning-text);
113
+ --owo-feedback-warning-icon: var(--owo-cmp-warning-text);
114
+ --owo-feedback-danger-bg: var(--owo-cmp-danger-bg);
115
+ --owo-feedback-danger-border: var(--owo-cmp-danger-border);
116
+ --owo-feedback-danger-text: var(--owo-cmp-danger-text);
117
+ --owo-feedback-danger-icon: var(--owo-cmp-danger-text);
118
+ }
119
+ :root[data-preset="default"],
120
+ .owoui-preset-default {
121
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
122
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
123
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
124
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
125
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
126
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
127
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
128
+ --owo-sys-preset-surface-shadow: var(--owo-ref-shadow-raised);
129
+ --owo-sys-preset-surface-shadow-strong: var(--owo-ref-shadow-popover);
130
+ --owo-sys-preset-surface-blur: 0px;
131
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
132
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
133
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
134
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
135
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
136
+ --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-sm);
137
+ --owo-sys-preset-control-radius-md: var(--owo-ref-radius-md);
138
+ --owo-sys-preset-control-radius-lg: var(--owo-ref-radius-lg);
139
+ --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
140
+ --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
141
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
142
+ --owo-sys-preset-control-border-width: 1px;
143
+ }
package/dist/preset-elevated.css ADDED
@@ -0,0 +1,164 @@
1
+ /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
+ :root, :host {
3
+ --owo-ref-shadow-raised: 0 10px 20px rgba(15, 23, 42, 0.08);
4
+ --owo-ref-shadow-popover: 0 18px 40px rgba(15, 23, 42, 0.10);
5
+ --owo-ref-font-heading: var(--font-source-serif-pro), var(--font-noto-serif-sc), "Source Serif 4", Georgia, "Times New Roman", serif;
6
+ --owo-ref-radius-sm: 0.5rem;
7
+ --owo-ref-radius-md: 0.75rem;
8
+ --owo-ref-radius-lg: 1rem;
9
+ --owo-ref-radius-xl: 1.5rem;
10
+ --owo-ref-radius-2xl: 2rem;
11
+ --owo-ref-radius-full: 9999px;
12
+ --owo-ref-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
13
+ --owo-ref-motion-ease-decelerate: cubic-bezier(0, 0, 0, 1);
14
+ --owo-ref-motion-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
15
+ }
16
+ :root {
17
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
18
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
19
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
20
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
21
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
22
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
23
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
24
+ --owo-sys-preset-surface-shadow: var(--owo-ref-shadow-raised);
25
+ --owo-sys-preset-surface-shadow-strong: var(--owo-ref-shadow-popover);
26
+ --owo-sys-preset-surface-blur: 0px;
27
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
28
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
29
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
30
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
31
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
32
+ --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-sm);
33
+ --owo-sys-preset-control-radius-md: var(--owo-ref-radius-md);
34
+ --owo-sys-preset-control-radius-lg: var(--owo-ref-radius-lg);
35
+ --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
36
+ --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
37
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
38
+ --owo-sys-preset-control-border-width: 1px;
39
+ --owo-cmp-surface-bg: var(--owo-sys-preset-surface-bg);
40
+ --owo-cmp-surface-bg-subtle: var(--owo-sys-preset-surface-bg-subtle);
41
+ --owo-cmp-surface-bg-raised: var(--owo-sys-preset-surface-bg-raised);
42
+ --owo-cmp-surface-bg-inset: var(--owo-sys-preset-surface-bg-inset);
43
+ --owo-cmp-surface-border: var(--owo-sys-preset-surface-border);
44
+ --owo-cmp-surface-border-muted: var(--owo-sys-preset-surface-border-muted);
45
+ --owo-cmp-surface-border-strong: var(--owo-sys-preset-surface-border-strong);
46
+ --owo-cmp-surface-shadow: var(--owo-sys-preset-surface-shadow);
47
+ --owo-cmp-surface-shadow-strong: var(--owo-sys-preset-surface-shadow-strong);
48
+ --owo-cmp-surface-blur: var(--owo-sys-preset-surface-blur);
49
+ --owo-cmp-canvas-bg: var(--owo-sys-preset-canvas-bg);
50
+ --owo-cmp-canvas-bg-subtle: var(--owo-sys-preset-canvas-bg-subtle);
51
+ --owo-cmp-surface-container: var(--owo-sys-preset-surface-container);
52
+ --owo-cmp-surface-container-high: var(--owo-sys-preset-surface-container-high);
53
+ --owo-cmp-surface-container-highest: var(--owo-sys-preset-surface-container-highest);
54
+ --owo-cmp-text-primary: var(--owo-sys-theme-text-primary);
55
+ --owo-cmp-text-secondary: var(--owo-sys-theme-text-secondary);
56
+ --owo-cmp-text-muted: var(--owo-sys-theme-text-muted);
57
+ --owo-cmp-text-on-accent: var(--owo-sys-theme-text-on-accent);
58
+ --owo-cmp-accent-bg: var(--owo-sys-theme-accent-bg);
59
+ --owo-cmp-accent-bg-hover: var(--owo-sys-theme-accent-bg-hover);
60
+ --owo-cmp-accent-bg-muted: var(--owo-sys-theme-accent-bg-muted);
61
+ --owo-cmp-accent-text: var(--owo-sys-theme-text-on-accent);
62
+ --owo-cmp-accent-border: var(--owo-sys-theme-accent-border);
63
+ --owo-cmp-success-bg: var(--owo-sys-theme-success-bg);
64
+ --owo-cmp-success-border: var(--owo-sys-theme-success-border);
65
+ --owo-cmp-success-text: var(--owo-sys-theme-success-text);
66
+ --owo-cmp-warning-bg: var(--owo-sys-theme-warning-bg);
67
+ --owo-cmp-warning-border: var(--owo-sys-theme-warning-border);
68
+ --owo-cmp-warning-text: var(--owo-sys-theme-warning-text);
69
+ --owo-cmp-danger-bg: var(--owo-sys-theme-danger-bg);
70
+ --owo-cmp-danger-bg-emphasis: var(--owo-sys-theme-danger-bg-emphasis);
71
+ --owo-cmp-danger-border: var(--owo-sys-theme-danger-border);
72
+ --owo-cmp-danger-text: var(--owo-sys-theme-danger-text);
73
+ --owo-cmp-info-bg: var(--owo-sys-theme-info-bg);
74
+ --owo-cmp-info-border: var(--owo-sys-theme-info-border);
75
+ --owo-cmp-info-text: var(--owo-sys-theme-info-text);
76
+ --owo-cmp-control-radius-sm: var(--owo-sys-preset-control-radius-sm);
77
+ --owo-cmp-control-radius-md: var(--owo-sys-preset-control-radius-md);
78
+ --owo-cmp-control-radius-lg: var(--owo-sys-preset-control-radius-lg);
79
+ --owo-cmp-control-radius-xl: var(--owo-sys-preset-control-radius-xl);
80
+ --owo-cmp-control-radius-2xl: var(--owo-sys-preset-control-radius-2xl);
81
+ --owo-cmp-control-radius-full: var(--owo-sys-preset-control-radius-full);
82
+ --owo-cmp-control-border-width: var(--owo-sys-preset-control-border-width);
83
+ --owo-cmp-control-focus-ring: var(--owo-sys-theme-control-focus-ring);
84
+ --owo-cmp-control-focus-ring-offset: var(--owo-sys-theme-control-focus-ring-offset);
85
+ --owo-cmp-font-heading: var(--owo-ref-font-heading);
86
+ --owo-cmp-motion-duration-fast: 0.15s;
87
+ --owo-cmp-motion-duration-default: 0.2s;
88
+ --owo-cmp-motion-ease-standard: var(--owo-ref-motion-ease-standard);
89
+ --owo-cmp-motion-ease-decelerate: var(--owo-ref-motion-ease-decelerate);
90
+ --owo-cmp-motion-ease-accelerate: var(--owo-ref-motion-ease-accelerate);
91
+ --owo-cmp-density-compact: 0.875;
92
+ --owo-cmp-density-default: 1;
93
+ --owo-cmp-density-comfortable: 1.125;
94
+ --owo-cmp-overlay-bg: var(--owo-sys-theme-overlay-bg);
95
+ --owo-cmp-z-dropdown: 1000;
96
+ --owo-cmp-z-modal: 1100;
97
+ --owo-cmp-z-toast: 1200;
98
+ --owo-feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
99
+ --owo-feedback-neutral-border: var(--owo-cmp-surface-border);
100
+ --owo-feedback-neutral-text: var(--owo-cmp-text-primary);
101
+ --owo-feedback-neutral-icon: var(--owo-cmp-text-secondary);
102
+ --owo-feedback-info-bg: var(--owo-cmp-info-bg);
103
+ --owo-feedback-info-border: var(--owo-cmp-info-border);
104
+ --owo-feedback-info-text: var(--owo-cmp-info-text);
105
+ --owo-feedback-info-icon: var(--owo-cmp-info-text);
106
+ --owo-feedback-success-bg: var(--owo-cmp-success-bg);
107
+ --owo-feedback-success-border: var(--owo-cmp-success-border);
108
+ --owo-feedback-success-text: var(--owo-cmp-success-text);
109
+ --owo-feedback-success-icon: var(--owo-cmp-success-text);
110
+ --owo-feedback-warning-bg: var(--owo-cmp-warning-bg);
111
+ --owo-feedback-warning-border: var(--owo-cmp-warning-border);
112
+ --owo-feedback-warning-text: var(--owo-cmp-warning-text);
113
+ --owo-feedback-warning-icon: var(--owo-cmp-warning-text);
114
+ --owo-feedback-danger-bg: var(--owo-cmp-danger-bg);
115
+ --owo-feedback-danger-border: var(--owo-cmp-danger-border);
116
+ --owo-feedback-danger-text: var(--owo-cmp-danger-text);
117
+ --owo-feedback-danger-icon: var(--owo-cmp-danger-text);
118
+ }
119
+ :root[data-preset="elevated"],
120
+ .owoui-preset-elevated {
121
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
122
+ @supports (color: color-mix(in lab, red, red)) {
123
+ --owo-sys-preset-surface-bg: color-mix(in srgb, var(--owo-sys-theme-surface-base) 96%, var(--owo-sys-theme-surface-border-strong));
124
+ }
125
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
126
+ @supports (color: color-mix(in lab, red, red)) {
127
+ --owo-sys-preset-surface-bg-subtle: color-mix(in srgb, var(--owo-sys-theme-surface-subtle) 96%, var(--owo-sys-theme-surface-border-strong));
128
+ }
129
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
130
+ @supports (color: color-mix(in lab, red, red)) {
131
+ --owo-sys-preset-surface-bg-raised: color-mix(in srgb, var(--owo-sys-theme-surface-raised) 94%, var(--owo-sys-theme-surface-border-strong));
132
+ }
133
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
134
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
135
+ @supports (color: color-mix(in lab, red, red)) {
136
+ --owo-sys-preset-surface-border: color-mix(in srgb, var(--owo-sys-theme-surface-border) 88%, var(--owo-sys-theme-surface-border-strong));
137
+ }
138
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
139
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
140
+ --owo-sys-preset-surface-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
141
+ --owo-sys-preset-surface-shadow-strong: 0 28px 60px rgba(15, 23, 42, 0.18);
142
+ --owo-sys-preset-surface-blur: 0px;
143
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
144
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
145
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
146
+ @supports (color: color-mix(in lab, red, red)) {
147
+ --owo-sys-preset-surface-container: color-mix(in srgb, var(--owo-sys-theme-surface-container) 94%, var(--owo-sys-theme-surface-border-strong));
148
+ }
149
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
150
+ @supports (color: color-mix(in lab, red, red)) {
151
+ --owo-sys-preset-surface-container-high: color-mix(in srgb, var(--owo-sys-theme-surface-container-high) 94%, var(--owo-sys-theme-surface-border-strong));
152
+ }
153
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
154
+ @supports (color: color-mix(in lab, red, red)) {
155
+ --owo-sys-preset-surface-container-highest: color-mix(in srgb, var(--owo-sys-theme-surface-container-highest) 92%, var(--owo-sys-theme-surface-border-strong));
156
+ }
157
+ --owo-sys-preset-control-radius-sm: calc(var(--owo-ref-radius-sm) + 0.125rem);
158
+ --owo-sys-preset-control-radius-md: calc(var(--owo-ref-radius-md) + 0.125rem);
159
+ --owo-sys-preset-control-radius-lg: calc(var(--owo-ref-radius-lg) + 0.125rem);
160
+ --owo-sys-preset-control-radius-xl: calc(var(--owo-ref-radius-xl) + 0.125rem);
161
+ --owo-sys-preset-control-radius-2xl: calc(var(--owo-ref-radius-2xl) + 0.125rem);
162
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
163
+ --owo-sys-preset-control-border-width: 1px;
164
+ }
package/dist/preset-flat.css ADDED
@@ -0,0 +1,144 @@
1
+ /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
+ :root, :host {
3
+ --owo-ref-shadow-raised: 0 10px 20px rgba(15, 23, 42, 0.08);
4
+ --owo-ref-shadow-popover: 0 18px 40px rgba(15, 23, 42, 0.10);
5
+ --owo-ref-font-heading: var(--font-source-serif-pro), var(--font-noto-serif-sc), "Source Serif 4", Georgia, "Times New Roman", serif;
6
+ --owo-ref-radius-xs: 0.375rem;
7
+ --owo-ref-radius-sm: 0.5rem;
8
+ --owo-ref-radius-md: 0.75rem;
9
+ --owo-ref-radius-lg: 1rem;
10
+ --owo-ref-radius-xl: 1.5rem;
11
+ --owo-ref-radius-2xl: 2rem;
12
+ --owo-ref-radius-full: 9999px;
13
+ --owo-ref-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
14
+ --owo-ref-motion-ease-decelerate: cubic-bezier(0, 0, 0, 1);
15
+ --owo-ref-motion-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
16
+ }
17
+ :root {
18
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
19
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
20
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
21
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
22
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
23
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
24
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
25
+ --owo-sys-preset-surface-shadow: var(--owo-ref-shadow-raised);
26
+ --owo-sys-preset-surface-shadow-strong: var(--owo-ref-shadow-popover);
27
+ --owo-sys-preset-surface-blur: 0px;
28
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
29
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
30
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
31
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
32
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
33
+ --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-sm);
34
+ --owo-sys-preset-control-radius-md: var(--owo-ref-radius-md);
35
+ --owo-sys-preset-control-radius-lg: var(--owo-ref-radius-lg);
36
+ --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
37
+ --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
38
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
39
+ --owo-sys-preset-control-border-width: 1px;
40
+ --owo-cmp-surface-bg: var(--owo-sys-preset-surface-bg);
41
+ --owo-cmp-surface-bg-subtle: var(--owo-sys-preset-surface-bg-subtle);
42
+ --owo-cmp-surface-bg-raised: var(--owo-sys-preset-surface-bg-raised);
43
+ --owo-cmp-surface-bg-inset: var(--owo-sys-preset-surface-bg-inset);
44
+ --owo-cmp-surface-border: var(--owo-sys-preset-surface-border);
45
+ --owo-cmp-surface-border-muted: var(--owo-sys-preset-surface-border-muted);
46
+ --owo-cmp-surface-border-strong: var(--owo-sys-preset-surface-border-strong);
47
+ --owo-cmp-surface-shadow: var(--owo-sys-preset-surface-shadow);
48
+ --owo-cmp-surface-shadow-strong: var(--owo-sys-preset-surface-shadow-strong);
49
+ --owo-cmp-surface-blur: var(--owo-sys-preset-surface-blur);
50
+ --owo-cmp-canvas-bg: var(--owo-sys-preset-canvas-bg);
51
+ --owo-cmp-canvas-bg-subtle: var(--owo-sys-preset-canvas-bg-subtle);
52
+ --owo-cmp-surface-container: var(--owo-sys-preset-surface-container);
53
+ --owo-cmp-surface-container-high: var(--owo-sys-preset-surface-container-high);
54
+ --owo-cmp-surface-container-highest: var(--owo-sys-preset-surface-container-highest);
55
+ --owo-cmp-text-primary: var(--owo-sys-theme-text-primary);
56
+ --owo-cmp-text-secondary: var(--owo-sys-theme-text-secondary);
57
+ --owo-cmp-text-muted: var(--owo-sys-theme-text-muted);
58
+ --owo-cmp-text-on-accent: var(--owo-sys-theme-text-on-accent);
59
+ --owo-cmp-accent-bg: var(--owo-sys-theme-accent-bg);
60
+ --owo-cmp-accent-bg-hover: var(--owo-sys-theme-accent-bg-hover);
61
+ --owo-cmp-accent-bg-muted: var(--owo-sys-theme-accent-bg-muted);
62
+ --owo-cmp-accent-text: var(--owo-sys-theme-text-on-accent);
63
+ --owo-cmp-accent-border: var(--owo-sys-theme-accent-border);
64
+ --owo-cmp-success-bg: var(--owo-sys-theme-success-bg);
65
+ --owo-cmp-success-border: var(--owo-sys-theme-success-border);
66
+ --owo-cmp-success-text: var(--owo-sys-theme-success-text);
67
+ --owo-cmp-warning-bg: var(--owo-sys-theme-warning-bg);
68
+ --owo-cmp-warning-border: var(--owo-sys-theme-warning-border);
69
+ --owo-cmp-warning-text: var(--owo-sys-theme-warning-text);
70
+ --owo-cmp-danger-bg: var(--owo-sys-theme-danger-bg);
71
+ --owo-cmp-danger-bg-emphasis: var(--owo-sys-theme-danger-bg-emphasis);
72
+ --owo-cmp-danger-border: var(--owo-sys-theme-danger-border);
73
+ --owo-cmp-danger-text: var(--owo-sys-theme-danger-text);
74
+ --owo-cmp-info-bg: var(--owo-sys-theme-info-bg);
75
+ --owo-cmp-info-border: var(--owo-sys-theme-info-border);
76
+ --owo-cmp-info-text: var(--owo-sys-theme-info-text);
77
+ --owo-cmp-control-radius-sm: var(--owo-sys-preset-control-radius-sm);
78
+ --owo-cmp-control-radius-md: var(--owo-sys-preset-control-radius-md);
79
+ --owo-cmp-control-radius-lg: var(--owo-sys-preset-control-radius-lg);
80
+ --owo-cmp-control-radius-xl: var(--owo-sys-preset-control-radius-xl);
81
+ --owo-cmp-control-radius-2xl: var(--owo-sys-preset-control-radius-2xl);
82
+ --owo-cmp-control-radius-full: var(--owo-sys-preset-control-radius-full);
83
+ --owo-cmp-control-border-width: var(--owo-sys-preset-control-border-width);
84
+ --owo-cmp-control-focus-ring: var(--owo-sys-theme-control-focus-ring);
85
+ --owo-cmp-control-focus-ring-offset: var(--owo-sys-theme-control-focus-ring-offset);
86
+ --owo-cmp-font-heading: var(--owo-ref-font-heading);
87
+ --owo-cmp-motion-duration-fast: 0.15s;
88
+ --owo-cmp-motion-duration-default: 0.2s;
89
+ --owo-cmp-motion-ease-standard: var(--owo-ref-motion-ease-standard);
90
+ --owo-cmp-motion-ease-decelerate: var(--owo-ref-motion-ease-decelerate);
91
+ --owo-cmp-motion-ease-accelerate: var(--owo-ref-motion-ease-accelerate);
92
+ --owo-cmp-density-compact: 0.875;
93
+ --owo-cmp-density-default: 1;
94
+ --owo-cmp-density-comfortable: 1.125;
95
+ --owo-cmp-overlay-bg: var(--owo-sys-theme-overlay-bg);
96
+ --owo-cmp-z-dropdown: 1000;
97
+ --owo-cmp-z-modal: 1100;
98
+ --owo-cmp-z-toast: 1200;
99
+ --owo-feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
100
+ --owo-feedback-neutral-border: var(--owo-cmp-surface-border);
101
+ --owo-feedback-neutral-text: var(--owo-cmp-text-primary);
102
+ --owo-feedback-neutral-icon: var(--owo-cmp-text-secondary);
103
+ --owo-feedback-info-bg: var(--owo-cmp-info-bg);
104
+ --owo-feedback-info-border: var(--owo-cmp-info-border);
105
+ --owo-feedback-info-text: var(--owo-cmp-info-text);
106
+ --owo-feedback-info-icon: var(--owo-cmp-info-text);
107
+ --owo-feedback-success-bg: var(--owo-cmp-success-bg);
108
+ --owo-feedback-success-border: var(--owo-cmp-success-border);
109
+ --owo-feedback-success-text: var(--owo-cmp-success-text);
110
+ --owo-feedback-success-icon: var(--owo-cmp-success-text);
111
+ --owo-feedback-warning-bg: var(--owo-cmp-warning-bg);
112
+ --owo-feedback-warning-border: var(--owo-cmp-warning-border);
113
+ --owo-feedback-warning-text: var(--owo-cmp-warning-text);
114
+ --owo-feedback-warning-icon: var(--owo-cmp-warning-text);
115
+ --owo-feedback-danger-bg: var(--owo-cmp-danger-bg);
116
+ --owo-feedback-danger-border: var(--owo-cmp-danger-border);
117
+ --owo-feedback-danger-text: var(--owo-cmp-danger-text);
118
+ --owo-feedback-danger-icon: var(--owo-cmp-danger-text);
119
+ }
120
+ :root[data-preset="flat"],
121
+ .owoui-preset-flat {
122
+ --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
123
+ --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
124
+ --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-base);
125
+ --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
126
+ --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
127
+ --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
128
+ --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
129
+ --owo-sys-preset-surface-shadow: none;
130
+ --owo-sys-preset-surface-shadow-strong: none;
131
+ --owo-sys-preset-surface-blur: 0px;
132
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
133
+ --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
134
+ --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
135
+ --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container);
136
+ --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-high);
137
+ --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-xs);
138
+ --owo-sys-preset-control-radius-md: calc(var(--owo-ref-radius-sm) + 0.125rem);
139
+ --owo-sys-preset-control-radius-lg: calc(var(--owo-ref-radius-md) + 0.125rem);
140
+ --owo-sys-preset-control-radius-xl: calc(var(--owo-ref-radius-lg) + 0.25rem);
141
+ --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-xl);
142
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
143
+ --owo-sys-preset-control-border-width: 1px;
144
+ }