@owodesign/owoui 0.1.3 → 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 (46) hide show
  1. package/README.md +22 -6
  2. package/dist/index.min.js +1 -1
  3. package/dist/preset-default.css +143 -0
  4. package/dist/preset-elevated.css +164 -0
  5. package/dist/preset-flat.css +144 -0
  6. package/dist/preset-glass.css +173 -0
  7. package/dist/storybook/index.min.js +9 -9
  8. package/dist/storybook-static/app.css +1832 -1974
  9. package/dist/storybook-static/assets/main.css +2 -2
  10. package/dist/storybook-static/assets/main.js +16 -16
  11. package/dist/style.css +2988 -0
  12. package/dist/theme-dark.css +230 -0
  13. package/dist/theme-light.css +231 -0
  14. package/dist/tokens.css +118 -0
  15. package/dist/tokens.d.ts +16 -9
  16. package/dist/tokens.min.js +1 -1
  17. package/package.json +25 -30
  18. package/src/preset-default.css +0 -27
  19. package/src/preset-elevated.css +0 -27
  20. package/src/preset-flat.css +0 -27
  21. package/src/preset-glass.css +0 -27
  22. package/src/style.css +0 -22
  23. package/src/styles/tokens.css +0 -253
  24. package/src/styles/ui/avatar.css +0 -13
  25. package/src/styles/ui/badge.css +0 -52
  26. package/src/styles/ui/button.css +0 -49
  27. package/src/styles/ui/collapsible.css +0 -13
  28. package/src/styles/ui/dialog.css +0 -37
  29. package/src/styles/ui/drawer.css +0 -15
  30. package/src/styles/ui/dropdown-menu.css +0 -132
  31. package/src/styles/ui/field.css +0 -12
  32. package/src/styles/ui/icon-button.css +0 -29
  33. package/src/styles/ui/input.css +0 -16
  34. package/src/styles/ui/panel.css +0 -23
  35. package/src/styles/ui/segmented-control.css +0 -28
  36. package/src/styles/ui/select.css +0 -52
  37. package/src/styles/ui/skeleton.css +0 -99
  38. package/src/styles/ui/status-notice.css +0 -49
  39. package/src/styles/ui/switch.css +0 -17
  40. package/src/styles/ui/tabs.css +0 -33
  41. package/src/styles/ui/textarea.css +0 -8
  42. package/src/styles/ui/toast.css +0 -57
  43. package/src/styles/ui/tooltip.css +0 -31
  44. package/src/theme-dark.css +0 -87
  45. package/src/theme-light.css +0 -102
  46. package/src/tokens.css +0 -1
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
+ }
package/dist/preset-glass.css ADDED
@@ -0,0 +1,173 @@
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="glass"],
120
+ .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
+ }
149
+ --owo-sys-preset-surface-shadow: 0 16px 44px rgba(15, 23, 42, 0.1);
150
+ --owo-sys-preset-surface-shadow-strong: 0 24px 64px rgba(15, 23, 42, 0.14);
151
+ --owo-sys-preset-surface-blur: 18px;
152
+ --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
153
+ --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
+ }
166
+ --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-md);
167
+ --owo-sys-preset-control-radius-md: var(--owo-ref-radius-lg);
168
+ --owo-sys-preset-control-radius-lg: calc(var(--owo-ref-radius-lg) + 0.25rem);
169
+ --owo-sys-preset-control-radius-xl: calc(var(--owo-ref-radius-xl) + 0.25rem);
170
+ --owo-sys-preset-control-radius-2xl: calc(var(--owo-ref-radius-2xl) + 0.25rem);
171
+ --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
172
+ --owo-sys-preset-control-border-width: 1px;
173
+ }