@owodesign/owoui 0.1.5 → 0.1.7-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/README.md +4 -0
  2. package/dist/index.css +4 -0
  3. package/dist/index.d.ts +40 -20
  4. package/dist/index.min.js +1 -1
  5. package/dist/preset-default.css +5 -118
  6. package/dist/preset-elevated.css +12 -146
  7. package/dist/preset-flat.css +5 -119
  8. package/dist/preset-glass.css +15 -158
  9. package/dist/storybook/index.css +4 -0
  10. package/dist/storybook/index.min.js +87 -14
  11. package/dist/storybook-static/app.css +381 -3813
  12. package/dist/storybook-static/assets/main.css +1 -2
  13. package/dist/storybook-static/assets/main.js +93 -21
  14. package/dist/style.css +152 -2785
  15. package/dist/theme-dark.css +9 -152
  16. package/dist/theme-light.css +23 -152
  17. package/dist/tokens.css +105 -5
  18. package/dist/tokens.d.ts +2 -2
  19. package/dist/tokens.min.js +1 -1
  20. package/package.json +17 -7
package/dist/preset-default.css CHANGED
@@ -1,121 +1,3 @@
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
1
  :root[data-preset="default"],
120
2
  .owoui-preset-default {
121
3
  --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
@@ -139,5 +21,10 @@
139
21
  --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
140
22
  --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
141
23
  --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
24
+ --owo-sys-preset-control-height-xs: 1.75rem;
25
+ --owo-sys-preset-control-height-sm: 2rem;
26
+ --owo-sys-preset-control-height-md: 2.25rem;
27
+ --owo-sys-preset-control-height-lg: 2.5rem;
28
+ --owo-sys-preset-control-height-xl: 3rem;
142
29
  --owo-sys-preset-control-border-width: 1px;
143
30
  }
package/dist/preset-elevated.css CHANGED
@@ -1,140 +1,10 @@
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
1
  :root[data-preset="elevated"],
120
2
  .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
- }
3
+ --owo-sys-preset-surface-bg: color-mix(in srgb, var(--owo-sys-theme-surface-base) 96%, var(--owo-sys-theme-surface-border-strong));
4
+ --owo-sys-preset-surface-bg-subtle: color-mix(in srgb, var(--owo-sys-theme-surface-subtle) 96%, var(--owo-sys-theme-surface-border-strong));
5
+ --owo-sys-preset-surface-bg-raised: color-mix(in srgb, var(--owo-sys-theme-surface-raised) 94%, var(--owo-sys-theme-surface-border-strong));
133
6
  --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
- }
7
+ --owo-sys-preset-surface-border: color-mix(in srgb, var(--owo-sys-theme-surface-border) 88%, var(--owo-sys-theme-surface-border-strong));
138
8
  --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
139
9
  --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
140
10
  --owo-sys-preset-surface-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
@@ -142,23 +12,19 @@
142
12
  --owo-sys-preset-surface-blur: 0px;
143
13
  --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
144
14
  --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
- }
15
+ --owo-sys-preset-surface-container: color-mix(in srgb, var(--owo-sys-theme-surface-container) 94%, var(--owo-sys-theme-surface-border-strong));
16
+ --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));
17
+ --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));
157
18
  --owo-sys-preset-control-radius-sm: calc(var(--owo-ref-radius-sm) + 0.125rem);
158
19
  --owo-sys-preset-control-radius-md: calc(var(--owo-ref-radius-md) + 0.125rem);
159
20
  --owo-sys-preset-control-radius-lg: calc(var(--owo-ref-radius-lg) + 0.125rem);
160
21
  --owo-sys-preset-control-radius-xl: calc(var(--owo-ref-radius-xl) + 0.125rem);
161
22
  --owo-sys-preset-control-radius-2xl: calc(var(--owo-ref-radius-2xl) + 0.125rem);
162
23
  --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
24
+ --owo-sys-preset-control-height-xs: 1.75rem;
25
+ --owo-sys-preset-control-height-sm: 2rem;
26
+ --owo-sys-preset-control-height-md: 2.25rem;
27
+ --owo-sys-preset-control-height-lg: 2.5rem;
28
+ --owo-sys-preset-control-height-xl: 3rem;
163
29
  --owo-sys-preset-control-border-width: 1px;
164
30
  }
package/dist/preset-flat.css CHANGED
@@ -1,122 +1,3 @@
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
1
  :root[data-preset="flat"],
121
2
  .owoui-preset-flat {
122
3
  --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
@@ -140,5 +21,10 @@
140
21
  --owo-sys-preset-control-radius-xl: calc(var(--owo-ref-radius-lg) + 0.25rem);
141
22
  --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-xl);
142
23
  --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
24
+ --owo-sys-preset-control-height-xs: 1.75rem;
25
+ --owo-sys-preset-control-height-sm: 2rem;
26
+ --owo-sys-preset-control-height-md: 2.25rem;
27
+ --owo-sys-preset-control-height-lg: 2.5rem;
28
+ --owo-sys-preset-control-height-xl: 3rem;
143
29
  --owo-sys-preset-control-border-width: 1px;
144
30
  }
package/dist/preset-glass.css CHANGED
@@ -1,173 +1,30 @@
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
1
  :root[data-preset="glass"],
120
2
  .owoui-preset-glass {
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) 62%, transparent);
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) 48%, transparent);
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) 72%, transparent);
132
- }
133
- --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
134
- @supports (color: color-mix(in lab, red, red)) {
135
- --owo-sys-preset-surface-bg-inset: color-mix(in srgb, var(--owo-sys-theme-surface-inset) 82%, transparent);
136
- }
137
- --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border-strong);
138
- @supports (color: color-mix(in lab, red, red)) {
139
- --owo-sys-preset-surface-border: color-mix(in srgb, var(--owo-sys-theme-surface-border-strong) 55%, transparent);
140
- }
141
- --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
142
- @supports (color: color-mix(in lab, red, red)) {
143
- --owo-sys-preset-surface-border-muted: color-mix(in srgb, var(--owo-sys-theme-surface-border-muted) 60%, transparent);
144
- }
145
- --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
146
- @supports (color: color-mix(in lab, red, red)) {
147
- --owo-sys-preset-surface-border-strong: color-mix(in srgb, var(--owo-sys-theme-surface-border-strong) 78%, transparent);
148
- }
3
+ --owo-sys-preset-surface-bg: color-mix(in srgb, var(--owo-sys-theme-surface-base) 62%, transparent);
4
+ --owo-sys-preset-surface-bg-subtle: color-mix(in srgb, var(--owo-sys-theme-surface-subtle) 48%, transparent);
5
+ --owo-sys-preset-surface-bg-raised: color-mix(in srgb, var(--owo-sys-theme-surface-raised) 72%, transparent);
6
+ --owo-sys-preset-surface-bg-inset: color-mix(in srgb, var(--owo-sys-theme-surface-inset) 82%, transparent);
7
+ --owo-sys-preset-surface-border: color-mix(in srgb, var(--owo-sys-theme-surface-border-strong) 55%, transparent);
8
+ --owo-sys-preset-surface-border-muted: color-mix(in srgb, var(--owo-sys-theme-surface-border-muted) 60%, transparent);
9
+ --owo-sys-preset-surface-border-strong: color-mix(in srgb, var(--owo-sys-theme-surface-border-strong) 78%, transparent);
149
10
  --owo-sys-preset-surface-shadow: 0 16px 44px rgba(15, 23, 42, 0.1);
150
11
  --owo-sys-preset-surface-shadow-strong: 0 24px 64px rgba(15, 23, 42, 0.14);
151
12
  --owo-sys-preset-surface-blur: 18px;
152
13
  --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
153
14
  --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
154
- --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
155
- @supports (color: color-mix(in lab, red, red)) {
156
- --owo-sys-preset-surface-container: color-mix(in srgb, var(--owo-sys-theme-surface-container) 70%, transparent);
157
- }
158
- --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
159
- @supports (color: color-mix(in lab, red, red)) {
160
- --owo-sys-preset-surface-container-high: color-mix(in srgb, var(--owo-sys-theme-surface-container-high) 74%, transparent);
161
- }
162
- --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
163
- @supports (color: color-mix(in lab, red, red)) {
164
- --owo-sys-preset-surface-container-highest: color-mix(in srgb, var(--owo-sys-theme-surface-container-highest) 78%, transparent);
165
- }
15
+ --owo-sys-preset-surface-container: color-mix(in srgb, var(--owo-sys-theme-surface-container) 70%, transparent);
16
+ --owo-sys-preset-surface-container-high: color-mix(in srgb, var(--owo-sys-theme-surface-container-high) 74%, transparent);
17
+ --owo-sys-preset-surface-container-highest: color-mix(in srgb, var(--owo-sys-theme-surface-container-highest) 78%, transparent);
166
18
  --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-md);
167
19
  --owo-sys-preset-control-radius-md: var(--owo-ref-radius-lg);
168
20
  --owo-sys-preset-control-radius-lg: calc(var(--owo-ref-radius-lg) + 0.25rem);
169
21
  --owo-sys-preset-control-radius-xl: calc(var(--owo-ref-radius-xl) + 0.25rem);
170
22
  --owo-sys-preset-control-radius-2xl: calc(var(--owo-ref-radius-2xl) + 0.25rem);
171
23
  --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
24
+ --owo-sys-preset-control-height-xs: 1.75rem;
25
+ --owo-sys-preset-control-height-sm: 2rem;
26
+ --owo-sys-preset-control-height-md: 2.25rem;
27
+ --owo-sys-preset-control-height-lg: 2.5rem;
28
+ --owo-sys-preset-control-height-xl: 3rem;
172
29
  --owo-sys-preset-control-border-width: 1px;
173
30
  }