@owodesign/owoui 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +70 -0
- package/dist/index.d.ts +364 -0
- package/dist/index.min.js +1 -0
- package/dist/storybook/catalog.d.ts +22 -0
- package/dist/storybook/catalog.js +221 -0
- package/dist/storybook/catalog.json +220 -0
- package/dist/storybook/index.d.ts +37 -0
- package/dist/storybook/index.min.js +96 -0
- package/dist/tokens.d.ts +32 -0
- package/dist/tokens.min.js +1 -0
- package/package.json +91 -0
- package/src/elevated.css +20 -0
- package/src/flat.css +1 -0
- package/src/glass.css +17 -0
- package/src/style.css +20 -0
- package/src/styles/tokens.css +188 -0
- package/src/styles/ui/avatar.css +13 -0
- package/src/styles/ui/badge.css +52 -0
- package/src/styles/ui/button.css +49 -0
- package/src/styles/ui/dialog.css +37 -0
- package/src/styles/ui/drawer.css +15 -0
- package/src/styles/ui/dropdown-menu.css +132 -0
- package/src/styles/ui/empty-state.css +34 -0
- package/src/styles/ui/field.css +12 -0
- package/src/styles/ui/icon-button.css +29 -0
- package/src/styles/ui/input.css +16 -0
- package/src/styles/ui/panel.css +23 -0
- package/src/styles/ui/segmented-control.css +28 -0
- package/src/styles/ui/select.css +52 -0
- package/src/styles/ui/skeleton.css +99 -0
- package/src/styles/ui/status-notice.css +41 -0
- package/src/styles/ui/switch.css +17 -0
- package/src/styles/ui/toast.css +57 -0
- package/src/styles/ui/tooltip.css +26 -0
- package/src/tokens.css +1 -0
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
@theme {
|
|
2
|
+
--color-n900: #1a1a1a;
|
|
3
|
+
--color-n800: #2d2d2d;
|
|
4
|
+
--color-n700: #4a4a4a;
|
|
5
|
+
--color-n600: #71717a;
|
|
6
|
+
--color-n500: #a1a1aa;
|
|
7
|
+
--color-n400: #d4d4d8;
|
|
8
|
+
--color-n300: #e4e4e7;
|
|
9
|
+
|
|
10
|
+
/* Elegant Accent: Muted Clay / Terracotta */
|
|
11
|
+
--color-brand-primary: #9f1239;
|
|
12
|
+
/* Rose 800 - Elegant and deep */
|
|
13
|
+
--color-brand-primary-hover: #be123c;
|
|
14
|
+
/* Rose 700 */
|
|
15
|
+
--color-brand-accent: #fb7185;
|
|
16
|
+
|
|
17
|
+
--color-surface-canvas: #fafafa;
|
|
18
|
+
--color-surface-base: #ffffff;
|
|
19
|
+
--color-surface-subtle: #fafaf9;
|
|
20
|
+
--color-surface-raised: #ffffff;
|
|
21
|
+
--color-surface-inset: #f5f5f4;
|
|
22
|
+
--color-surface-border: #e5e7eb;
|
|
23
|
+
--color-surface-ring: #d6d3d1;
|
|
24
|
+
--color-surface-overlay: rgba(0, 0, 0, 0.4);
|
|
25
|
+
--color-overlay-soft: rgba(244, 238, 230, 0.56);
|
|
26
|
+
--color-overlay-strong: rgba(15, 23, 42, 0.18);
|
|
27
|
+
--color-highlight-soft: rgba(255, 255, 255, 0.56);
|
|
28
|
+
--color-highlight-sheen: rgba(255, 255, 255, 0.34);
|
|
29
|
+
--color-text-on-brand: #ffffff;
|
|
30
|
+
--color-code-block-bg: #f4f4f5;
|
|
31
|
+
--color-code-inline-bg: #f4f4f5;
|
|
32
|
+
--shadow-raised: 0 10px 20px rgba(15, 23, 42, 0.08);
|
|
33
|
+
--shadow-popover: 0 18px 40px rgba(15, 23, 42, 0.10);
|
|
34
|
+
|
|
35
|
+
--color-admin-success-bg: rgba(16, 185, 129, 0.10);
|
|
36
|
+
--color-admin-success-border: rgba(16, 185, 129, 0.20);
|
|
37
|
+
--color-admin-success-text: #047857;
|
|
38
|
+
--color-admin-warning-bg: rgba(245, 158, 11, 0.10);
|
|
39
|
+
--color-admin-warning-border: rgba(245, 158, 11, 0.20);
|
|
40
|
+
--color-admin-warning-text: #b45309;
|
|
41
|
+
--color-admin-danger-bg: rgba(239, 68, 68, 0.10);
|
|
42
|
+
--color-admin-danger-border: rgba(239, 68, 68, 0.20);
|
|
43
|
+
--color-admin-danger-text: #b91c1c;
|
|
44
|
+
--color-admin-info-bg: rgba(14, 165, 233, 0.10);
|
|
45
|
+
--color-admin-info-border: rgba(14, 165, 233, 0.20);
|
|
46
|
+
--color-admin-info-text: #0369a1;
|
|
47
|
+
|
|
48
|
+
/* Typography — stacks reference next/font CSS variables set on <html> */
|
|
49
|
+
--font-sans: var(--font-inter), var(--font-noto-sans-sc), system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
|
|
50
|
+
--font-heading: var(--font-source-serif-pro), var(--font-noto-serif-sc), "Source Serif 4", Georgia, "Times New Roman", serif;
|
|
51
|
+
--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
52
|
+
|
|
53
|
+
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
54
|
+
--ease-exit: cubic-bezier(0.4, 0, 1, 1);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
:root {
|
|
58
|
+
--ui-surface-bg: var(--color-surface-base);
|
|
59
|
+
--ui-surface-bg-subtle: var(--color-surface-subtle);
|
|
60
|
+
--ui-surface-bg-raised: var(--color-surface-raised);
|
|
61
|
+
--ui-surface-bg-inset: var(--color-surface-inset);
|
|
62
|
+
--ui-surface-border: var(--color-surface-border);
|
|
63
|
+
--ui-surface-border-strong: var(--color-surface-ring);
|
|
64
|
+
--ui-surface-shadow: var(--shadow-raised);
|
|
65
|
+
--ui-surface-shadow-strong: var(--shadow-popover);
|
|
66
|
+
--ui-surface-blur: 0px;
|
|
67
|
+
|
|
68
|
+
--ui-text-primary: var(--color-n800);
|
|
69
|
+
--ui-text-secondary: var(--color-n600);
|
|
70
|
+
--ui-text-muted: var(--color-n500);
|
|
71
|
+
--ui-text-on-accent: var(--color-text-on-brand);
|
|
72
|
+
|
|
73
|
+
--ui-accent-bg: var(--color-brand-primary);
|
|
74
|
+
--ui-accent-bg-hover: var(--color-brand-primary-hover);
|
|
75
|
+
--ui-accent-text: var(--color-text-on-brand);
|
|
76
|
+
|
|
77
|
+
--ui-success-bg: var(--color-admin-success-bg);
|
|
78
|
+
--ui-success-border: var(--color-admin-success-border);
|
|
79
|
+
--ui-success-text: var(--color-admin-success-text);
|
|
80
|
+
--ui-warning-bg: var(--color-admin-warning-bg);
|
|
81
|
+
--ui-warning-border: var(--color-admin-warning-border);
|
|
82
|
+
--ui-warning-text: var(--color-admin-warning-text);
|
|
83
|
+
--ui-danger-bg: var(--color-admin-danger-bg);
|
|
84
|
+
--ui-danger-border: var(--color-admin-danger-border);
|
|
85
|
+
--ui-danger-text: var(--color-admin-danger-text);
|
|
86
|
+
--ui-info-bg: var(--color-admin-info-bg);
|
|
87
|
+
--ui-info-border: var(--color-admin-info-border);
|
|
88
|
+
--ui-info-text: var(--color-admin-info-text);
|
|
89
|
+
|
|
90
|
+
--ui-control-radius-sm: 0.5rem;
|
|
91
|
+
--ui-control-radius-md: 0.75rem;
|
|
92
|
+
--ui-control-radius-lg: 1rem;
|
|
93
|
+
--ui-control-border-width: 1px;
|
|
94
|
+
--ui-control-focus-ring: var(--color-surface-ring);
|
|
95
|
+
--ui-control-focus-ring-offset: var(--color-surface-base);
|
|
96
|
+
|
|
97
|
+
--ui-motion-duration-fast: 0.15s;
|
|
98
|
+
--ui-motion-duration-default: 0.2s;
|
|
99
|
+
--ui-motion-ease-standard: var(--ease-standard);
|
|
100
|
+
--ui-density-compact: 0.875;
|
|
101
|
+
--ui-density-default: 1;
|
|
102
|
+
--ui-density-comfortable: 1.125;
|
|
103
|
+
|
|
104
|
+
--content-min-width: 320px;
|
|
105
|
+
--content-preferred-width: 70vw;
|
|
106
|
+
/* wider for more expansive reading */
|
|
107
|
+
--content-max-width: 960px;
|
|
108
|
+
--content-width: clamp(600px, 70vw, 960px);
|
|
109
|
+
--content-padding: 24px;
|
|
110
|
+
--header-top-margin: 64px;
|
|
111
|
+
|
|
112
|
+
--publish-trigger-bg: var(--color-surface-subtle);
|
|
113
|
+
--publish-trigger-border: var(--color-surface-border);
|
|
114
|
+
--publish-trigger-text: var(--color-n800);
|
|
115
|
+
--publish-trigger-active-bg: color-mix(in srgb, var(--color-brand-primary) 8%, var(--color-surface-base));
|
|
116
|
+
--publish-popover-bg: var(--color-surface-base);
|
|
117
|
+
--publish-popover-border: var(--color-surface-border);
|
|
118
|
+
--publish-popover-shadow: var(--shadow-popover);
|
|
119
|
+
--publish-section-bg: var(--color-surface-subtle);
|
|
120
|
+
--publish-section-border: var(--color-surface-border);
|
|
121
|
+
--publish-fact-title: var(--color-n600);
|
|
122
|
+
--publish-fact-value: var(--color-n900);
|
|
123
|
+
--publish-muted-text: var(--color-n600);
|
|
124
|
+
--publish-warning-bg: var(--color-admin-warning-bg);
|
|
125
|
+
--publish-warning-border: var(--color-admin-warning-border);
|
|
126
|
+
--publish-warning-text: var(--color-admin-warning-text);
|
|
127
|
+
--publish-danger-bg: var(--color-admin-danger-bg);
|
|
128
|
+
--publish-danger-border: var(--color-admin-danger-border);
|
|
129
|
+
--publish-danger-text: var(--color-admin-danger-text);
|
|
130
|
+
--publish-success-bg: var(--color-admin-success-bg);
|
|
131
|
+
--publish-success-border: var(--color-admin-success-border);
|
|
132
|
+
--publish-success-text: var(--color-admin-success-text);
|
|
133
|
+
--publish-progress-track: var(--color-surface-inset);
|
|
134
|
+
--publish-progress-fill: var(--color-brand-primary);
|
|
135
|
+
|
|
136
|
+
--feedback-neutral-bg: var(--ui-surface-bg-raised);
|
|
137
|
+
--feedback-neutral-border: var(--ui-surface-border);
|
|
138
|
+
--feedback-neutral-text: var(--ui-text-primary);
|
|
139
|
+
--feedback-neutral-icon: var(--ui-text-secondary);
|
|
140
|
+
--feedback-info-bg: var(--ui-info-bg);
|
|
141
|
+
--feedback-info-border: var(--ui-info-border);
|
|
142
|
+
--feedback-info-text: var(--ui-info-text);
|
|
143
|
+
--feedback-info-icon: var(--ui-info-text);
|
|
144
|
+
--feedback-success-bg: var(--ui-success-bg);
|
|
145
|
+
--feedback-success-border: var(--ui-success-border);
|
|
146
|
+
--feedback-success-text: var(--ui-success-text);
|
|
147
|
+
--feedback-success-icon: var(--ui-success-text);
|
|
148
|
+
--feedback-warning-bg: var(--ui-warning-bg);
|
|
149
|
+
--feedback-warning-border: var(--ui-warning-border);
|
|
150
|
+
--feedback-warning-text: var(--ui-warning-text);
|
|
151
|
+
--feedback-warning-icon: var(--ui-warning-text);
|
|
152
|
+
--feedback-danger-bg: var(--ui-danger-bg);
|
|
153
|
+
--feedback-danger-border: var(--ui-danger-border);
|
|
154
|
+
--feedback-danger-text: var(--ui-danger-text);
|
|
155
|
+
--feedback-danger-icon: var(--ui-danger-text);
|
|
156
|
+
|
|
157
|
+
--toast-shadow: var(--ui-surface-shadow-strong);
|
|
158
|
+
|
|
159
|
+
--skeleton-bg: linear-gradient(
|
|
160
|
+
180deg,
|
|
161
|
+
color-mix(in srgb, var(--ui-surface-bg-inset) 94%, white) 0%,
|
|
162
|
+
color-mix(in srgb, var(--ui-surface-bg-inset) 100%, var(--ui-surface-border)) 100%
|
|
163
|
+
);
|
|
164
|
+
--skeleton-bg-emphasis: linear-gradient(
|
|
165
|
+
180deg,
|
|
166
|
+
color-mix(in srgb, var(--ui-surface-bg-subtle) 78%, var(--color-highlight-soft)) 0%,
|
|
167
|
+
color-mix(in srgb, var(--ui-surface-bg-inset) 86%, var(--ui-surface-border)) 100%
|
|
168
|
+
);
|
|
169
|
+
--skeleton-sheen: linear-gradient(
|
|
170
|
+
100deg,
|
|
171
|
+
transparent 0%,
|
|
172
|
+
color-mix(in srgb, var(--color-highlight-sheen) 10%, transparent) 28%,
|
|
173
|
+
color-mix(in srgb, var(--color-highlight-sheen) 35%, transparent) 40%,
|
|
174
|
+
var(--color-highlight-sheen) 50%,
|
|
175
|
+
color-mix(in srgb, var(--color-highlight-sheen) 35%, transparent) 60%,
|
|
176
|
+
color-mix(in srgb, var(--color-highlight-sheen) 10%, transparent) 72%,
|
|
177
|
+
transparent 100%
|
|
178
|
+
);
|
|
179
|
+
--skeleton-top-highlight: var(--color-highlight-soft);
|
|
180
|
+
|
|
181
|
+
--workspace-transition-veil-bg: var(--color-overlay-soft);
|
|
182
|
+
--workspace-transition-stale-bg: color-mix(in srgb, var(--color-overlay-soft) 72%, transparent);
|
|
183
|
+
|
|
184
|
+
--tooltip-shadow: var(--ui-surface-shadow);
|
|
185
|
+
--select-dropdown-shadow: var(--ui-surface-shadow-strong);
|
|
186
|
+
--theme-picker-shadow: var(--ui-surface-shadow-strong);
|
|
187
|
+
--drawer-panel-shadow: var(--ui-surface-shadow-strong);
|
|
188
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
.ui-avatar {
|
|
2
|
+
--avatar-bg: var(--ui-surface-bg-inset);
|
|
3
|
+
--avatar-text: var(--ui-text-secondary);
|
|
4
|
+
--avatar-border: transparent;
|
|
5
|
+
background: var(--avatar-bg);
|
|
6
|
+
color: var(--avatar-text);
|
|
7
|
+
border: 1px solid var(--avatar-border);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.ui-avatar[data-tone="subtle"] {
|
|
11
|
+
--avatar-bg: var(--ui-surface-bg-subtle);
|
|
12
|
+
--avatar-text: var(--ui-text-muted);
|
|
13
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
.ui-badge {
|
|
2
|
+
--badge-bg: var(--ui-surface-bg-inset);
|
|
3
|
+
--badge-text: var(--ui-text-secondary);
|
|
4
|
+
--badge-border: transparent;
|
|
5
|
+
background: var(--badge-bg);
|
|
6
|
+
border-color: var(--badge-border);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.ui-badge[data-variant="outline"] {
|
|
10
|
+
--badge-bg: transparent;
|
|
11
|
+
--badge-border: var(--ui-surface-border);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.ui-badge[data-tone="info"] {
|
|
15
|
+
--badge-bg: var(--ui-info-bg);
|
|
16
|
+
--badge-text: var(--ui-info-text);
|
|
17
|
+
--badge-border: var(--ui-info-border);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.ui-badge[data-tone="info"][data-variant="outline"] {
|
|
21
|
+
--badge-bg: transparent;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.ui-badge[data-tone="success"] {
|
|
25
|
+
--badge-bg: var(--ui-success-bg);
|
|
26
|
+
--badge-text: var(--ui-success-text);
|
|
27
|
+
--badge-border: var(--ui-success-border);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.ui-badge[data-tone="success"][data-variant="outline"] {
|
|
31
|
+
--badge-bg: transparent;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.ui-badge[data-tone="warning"] {
|
|
35
|
+
--badge-bg: var(--ui-warning-bg);
|
|
36
|
+
--badge-text: var(--ui-warning-text);
|
|
37
|
+
--badge-border: var(--ui-warning-border);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.ui-badge[data-tone="warning"][data-variant="outline"] {
|
|
41
|
+
--badge-bg: transparent;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.ui-badge[data-tone="danger"] {
|
|
45
|
+
--badge-bg: var(--ui-danger-bg);
|
|
46
|
+
--badge-text: var(--ui-danger-text);
|
|
47
|
+
--badge-border: var(--ui-danger-border);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.ui-badge[data-tone="danger"][data-variant="outline"] {
|
|
51
|
+
--badge-bg: transparent;
|
|
52
|
+
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
.ui-button {
|
|
2
|
+
--button-bg: var(--ui-surface-bg);
|
|
3
|
+
--button-bg-hover: var(--ui-surface-bg-inset);
|
|
4
|
+
--button-bg-active: var(--ui-surface-bg-subtle);
|
|
5
|
+
--button-text: var(--ui-text-primary);
|
|
6
|
+
--button-border: var(--ui-surface-border);
|
|
7
|
+
--button-ring: var(--ui-control-focus-ring);
|
|
8
|
+
--button-disabled-opacity: 0.5;
|
|
9
|
+
background: var(--button-bg);
|
|
10
|
+
color: var(--button-text);
|
|
11
|
+
border-color: var(--button-border);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.ui-button:hover {
|
|
15
|
+
background: var(--button-bg-hover);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.ui-button:active {
|
|
19
|
+
background: var(--button-bg-active);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.ui-button:focus-visible {
|
|
23
|
+
--tw-ring-color: var(--button-ring);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.ui-button[data-variant="primary"] {
|
|
27
|
+
--button-bg: var(--ui-accent-bg);
|
|
28
|
+
--button-bg-hover: var(--ui-accent-bg-hover);
|
|
29
|
+
--button-bg-active: color-mix(in srgb, var(--ui-accent-bg-hover) 88%, black);
|
|
30
|
+
--button-text: var(--ui-accent-text);
|
|
31
|
+
--button-border: transparent;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.ui-button[data-variant="ghost"] {
|
|
35
|
+
--button-bg: transparent;
|
|
36
|
+
--button-bg-hover: var(--ui-surface-bg-inset);
|
|
37
|
+
--button-bg-active: var(--ui-surface-bg-subtle);
|
|
38
|
+
--button-text: var(--ui-text-secondary);
|
|
39
|
+
--button-border: transparent;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.ui-button[data-variant="danger"] {
|
|
43
|
+
--button-bg: var(--ui-danger-bg);
|
|
44
|
+
--button-bg-hover: color-mix(in srgb, var(--ui-danger-bg) 92%, var(--ui-danger-border));
|
|
45
|
+
--button-bg-active: color-mix(in srgb, var(--ui-danger-bg) 84%, var(--ui-danger-border));
|
|
46
|
+
--button-text: var(--ui-danger-text);
|
|
47
|
+
--button-border: var(--ui-danger-border);
|
|
48
|
+
--button-ring: var(--ui-danger-border);
|
|
49
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
.ui-dialog-backdrop {
|
|
2
|
+
animation: dialog-backdrop-in 0.2s var(--ease-standard);
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.ui-dialog {
|
|
6
|
+
background: var(--ui-surface-bg-raised);
|
|
7
|
+
border: 1px solid var(--ui-surface-border);
|
|
8
|
+
color: var(--ui-text-primary);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.ui-dialog__header {
|
|
12
|
+
color: var(--ui-text-primary);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.ui-dialog__body {
|
|
16
|
+
color: var(--ui-text-secondary);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@keyframes dialog-in {
|
|
20
|
+
from {
|
|
21
|
+
opacity: 0;
|
|
22
|
+
transform: scale(0.95) translateY(4px);
|
|
23
|
+
}
|
|
24
|
+
to {
|
|
25
|
+
opacity: 1;
|
|
26
|
+
transform: scale(1) translateY(0);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@keyframes dialog-backdrop-in {
|
|
31
|
+
from {
|
|
32
|
+
opacity: 0;
|
|
33
|
+
}
|
|
34
|
+
to {
|
|
35
|
+
opacity: 1;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
.ui-drawer {
|
|
2
|
+
--drawer-surface: var(--ui-surface-bg-raised);
|
|
3
|
+
--drawer-border: var(--ui-surface-border);
|
|
4
|
+
--drawer-shadow: var(--drawer-panel-shadow);
|
|
5
|
+
will-change: transform;
|
|
6
|
+
background: var(--drawer-surface);
|
|
7
|
+
border-color: var(--drawer-border);
|
|
8
|
+
box-shadow: var(--drawer-shadow);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.ui-drawer-backdrop {
|
|
12
|
+
--drawer-backdrop: var(--color-overlay-strong);
|
|
13
|
+
border: 0;
|
|
14
|
+
background: var(--drawer-backdrop);
|
|
15
|
+
}
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
.ui-dropdown-menu__content {
|
|
2
|
+
min-width: 12rem;
|
|
3
|
+
overflow-y: auto;
|
|
4
|
+
border: 1px solid var(--ui-surface-border);
|
|
5
|
+
border-radius: var(--ui-control-radius-lg);
|
|
6
|
+
background: var(--ui-surface-bg-raised);
|
|
7
|
+
box-shadow: var(--ui-dropdown-menu-shadow, var(--ui-surface-shadow-strong));
|
|
8
|
+
padding: 0.375rem;
|
|
9
|
+
color: var(--ui-text-primary);
|
|
10
|
+
outline: none;
|
|
11
|
+
z-index: 1000;
|
|
12
|
+
animation: ui-dropdown-menu-in var(--ui-motion-duration-fast) var(--ui-motion-ease-standard);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.ui-dropdown-menu__content[data-side="top"] {
|
|
16
|
+
transform-origin: bottom center;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.ui-dropdown-menu__content[data-side="bottom"] {
|
|
20
|
+
transform-origin: top center;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.ui-dropdown-menu__content[data-side="left"] {
|
|
24
|
+
transform-origin: center right;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.ui-dropdown-menu__content[data-side="right"] {
|
|
28
|
+
transform-origin: center left;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.ui-dropdown-menu__group + .ui-dropdown-menu__group {
|
|
32
|
+
margin-top: 0.375rem;
|
|
33
|
+
padding-top: 0.375rem;
|
|
34
|
+
border-top: 1px solid color-mix(in srgb, var(--ui-surface-border) 80%, transparent);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.ui-dropdown-menu__label {
|
|
38
|
+
padding: 0.35rem 0.625rem 0.25rem;
|
|
39
|
+
font-size: 0.675rem;
|
|
40
|
+
font-weight: 700;
|
|
41
|
+
letter-spacing: 0.12em;
|
|
42
|
+
text-transform: uppercase;
|
|
43
|
+
color: var(--ui-text-muted);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.ui-dropdown-menu__separator {
|
|
47
|
+
margin: 0.375rem 0.25rem;
|
|
48
|
+
border-top: 1px solid color-mix(in srgb, var(--ui-surface-border) 82%, transparent);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.ui-dropdown-menu__item {
|
|
52
|
+
display: flex;
|
|
53
|
+
width: 100%;
|
|
54
|
+
align-items: center;
|
|
55
|
+
gap: 0.75rem;
|
|
56
|
+
border: 0;
|
|
57
|
+
border-radius: calc(var(--ui-control-radius-md) - 0.125rem);
|
|
58
|
+
background: transparent;
|
|
59
|
+
padding: 0.625rem 0.75rem;
|
|
60
|
+
text-align: left;
|
|
61
|
+
color: inherit;
|
|
62
|
+
cursor: default;
|
|
63
|
+
transition:
|
|
64
|
+
background-color var(--ui-motion-duration-fast) var(--ui-motion-ease-standard),
|
|
65
|
+
color var(--ui-motion-duration-fast) var(--ui-motion-ease-standard);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.ui-dropdown-menu__item:hover,
|
|
69
|
+
.ui-dropdown-menu__item[data-highlighted] {
|
|
70
|
+
background: var(--ui-surface-bg-inset);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.ui-dropdown-menu__item[data-selected] {
|
|
74
|
+
background: color-mix(in srgb, var(--ui-accent-bg) 10%, var(--ui-surface-bg-raised));
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.ui-dropdown-menu__item[data-selected] .ui-dropdown-menu__item-main {
|
|
78
|
+
color: var(--ui-text-primary);
|
|
79
|
+
font-weight: 600;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.ui-dropdown-menu__item[data-disabled] {
|
|
83
|
+
opacity: 0.5;
|
|
84
|
+
cursor: not-allowed;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.ui-dropdown-menu__item[data-destructive] {
|
|
88
|
+
color: var(--ui-danger-text);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.ui-dropdown-menu__item--inset {
|
|
92
|
+
padding-left: 1rem;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.ui-dropdown-menu__item-main {
|
|
96
|
+
min-width: 0;
|
|
97
|
+
flex: 1 1 auto;
|
|
98
|
+
overflow: hidden;
|
|
99
|
+
text-overflow: ellipsis;
|
|
100
|
+
white-space: nowrap;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.ui-dropdown-menu__shortcut,
|
|
104
|
+
.ui-dropdown-menu__indicator,
|
|
105
|
+
.ui-dropdown-menu__submenu-indicator {
|
|
106
|
+
flex: 0 0 auto;
|
|
107
|
+
color: var(--ui-text-muted);
|
|
108
|
+
font-size: 0.75rem;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.ui-dropdown-menu__indicator {
|
|
112
|
+
min-width: 1rem;
|
|
113
|
+
text-align: center;
|
|
114
|
+
color: var(--ui-accent-bg);
|
|
115
|
+
font-weight: 700;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.ui-dropdown-menu__sub-trigger[data-state="open"] {
|
|
119
|
+
background: var(--ui-surface-bg-inset);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
@keyframes ui-dropdown-menu-in {
|
|
123
|
+
from {
|
|
124
|
+
opacity: 0;
|
|
125
|
+
transform: scale(0.98);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
to {
|
|
129
|
+
opacity: 1;
|
|
130
|
+
transform: scale(1);
|
|
131
|
+
}
|
|
132
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
.ui-empty-state {
|
|
2
|
+
--empty-state-bg: var(--ui-surface-bg-raised);
|
|
3
|
+
--empty-state-border: var(--ui-surface-border);
|
|
4
|
+
--empty-state-title: var(--ui-text-primary);
|
|
5
|
+
--empty-state-text: var(--ui-text-muted);
|
|
6
|
+
--empty-state-icon: var(--ui-text-muted);
|
|
7
|
+
background: var(--empty-state-bg);
|
|
8
|
+
border-color: var(--empty-state-border);
|
|
9
|
+
color: var(--empty-state-text);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.ui-empty-state__icon {
|
|
13
|
+
color: var(--empty-state-icon);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.ui-empty-state__title {
|
|
17
|
+
color: var(--empty-state-title);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.ui-empty-state[data-tone="notice"] {
|
|
21
|
+
--empty-state-bg: var(--ui-info-bg);
|
|
22
|
+
--empty-state-border: var(--ui-info-border);
|
|
23
|
+
--empty-state-title: var(--ui-info-text);
|
|
24
|
+
--empty-state-text: var(--ui-info-text);
|
|
25
|
+
--empty-state-icon: var(--ui-info-text);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.ui-empty-state[data-tone="warning"] {
|
|
29
|
+
--empty-state-bg: var(--ui-warning-bg);
|
|
30
|
+
--empty-state-border: var(--ui-warning-border);
|
|
31
|
+
--empty-state-title: var(--ui-warning-text);
|
|
32
|
+
--empty-state-text: var(--ui-warning-text);
|
|
33
|
+
--empty-state-icon: var(--ui-warning-text);
|
|
34
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
.ui-icon-button {
|
|
2
|
+
--icon-button-bg: transparent;
|
|
3
|
+
--icon-button-bg-hover: var(--ui-surface-bg-inset);
|
|
4
|
+
--icon-button-bg-active: var(--ui-surface-bg-subtle);
|
|
5
|
+
--icon-button-text: var(--ui-text-muted);
|
|
6
|
+
--icon-button-ring: var(--ui-control-focus-ring);
|
|
7
|
+
background: var(--icon-button-bg);
|
|
8
|
+
color: var(--icon-button-text);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.ui-icon-button:hover {
|
|
12
|
+
background: var(--icon-button-bg-hover);
|
|
13
|
+
color: var(--ui-text-primary);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.ui-icon-button:active {
|
|
17
|
+
background: var(--icon-button-bg-active);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.ui-icon-button:focus-visible {
|
|
21
|
+
--tw-ring-color: var(--icon-button-ring);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.ui-icon-button[data-variant="subtle"] {
|
|
25
|
+
--icon-button-bg: var(--ui-surface-bg-inset);
|
|
26
|
+
--icon-button-bg-hover: var(--ui-surface-bg-subtle);
|
|
27
|
+
--icon-button-bg-active: var(--ui-surface-bg-raised);
|
|
28
|
+
--icon-button-text: var(--ui-text-primary);
|
|
29
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
.ui-input {
|
|
2
|
+
--field-bg: var(--ui-surface-bg-inset);
|
|
3
|
+
--field-border: transparent;
|
|
4
|
+
--field-text: var(--ui-text-primary);
|
|
5
|
+
--field-placeholder: var(--ui-text-muted);
|
|
6
|
+
--field-ring: var(--ui-control-focus-ring);
|
|
7
|
+
background: var(--field-bg);
|
|
8
|
+
border: 1px solid var(--field-border);
|
|
9
|
+
color: var(--field-text);
|
|
10
|
+
--tw-ring-color: var(--field-ring);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.ui-input[data-tone="warning"] {
|
|
14
|
+
--field-border: var(--ui-warning-border);
|
|
15
|
+
--field-ring: var(--ui-warning-border);
|
|
16
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
.ui-panel {
|
|
2
|
+
--panel-bg: var(--ui-surface-bg);
|
|
3
|
+
--panel-border: var(--ui-surface-border);
|
|
4
|
+
--panel-section-border: var(--ui-surface-border);
|
|
5
|
+
--panel-shadow: none;
|
|
6
|
+
background: var(--panel-bg);
|
|
7
|
+
border-color: var(--panel-border);
|
|
8
|
+
box-shadow: var(--panel-shadow);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.ui-panel-header,
|
|
12
|
+
.ui-panel-footer {
|
|
13
|
+
border-color: var(--panel-section-border);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.ui-panel[data-variant="subtle"] {
|
|
17
|
+
--panel-bg: var(--ui-surface-bg-subtle);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.ui-panel[data-variant="raised"] {
|
|
21
|
+
--panel-bg: var(--ui-surface-bg-raised);
|
|
22
|
+
--panel-shadow: var(--ui-surface-shadow);
|
|
23
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
.ui-segmented-control {
|
|
2
|
+
--segmented-bg: var(--ui-surface-bg-inset);
|
|
3
|
+
--segmented-border: var(--ui-surface-border);
|
|
4
|
+
--segmented-item-text: var(--ui-text-muted);
|
|
5
|
+
--segmented-item-hover-text: var(--ui-text-secondary);
|
|
6
|
+
--segmented-item-active-bg: var(--ui-surface-bg-raised);
|
|
7
|
+
--segmented-item-active-text: var(--ui-text-primary);
|
|
8
|
+
--segmented-ring: var(--ui-control-focus-ring);
|
|
9
|
+
background: var(--segmented-bg);
|
|
10
|
+
--tw-ring-color: var(--segmented-border);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.ui-segmented-control__item {
|
|
14
|
+
color: var(--segmented-item-text);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.ui-segmented-control__item:hover {
|
|
18
|
+
color: var(--segmented-item-hover-text);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.ui-segmented-control__item[data-active="true"] {
|
|
22
|
+
background: var(--segmented-item-active-bg);
|
|
23
|
+
color: var(--segmented-item-active-text);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.ui-segmented-control__item:focus-visible {
|
|
27
|
+
--tw-ring-color: var(--segmented-ring);
|
|
28
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
.ui-select__trigger {
|
|
2
|
+
--select-bg: var(--ui-surface-bg-inset);
|
|
3
|
+
--select-border: transparent;
|
|
4
|
+
--select-text: var(--ui-text-primary);
|
|
5
|
+
--select-ring: var(--ui-control-focus-ring);
|
|
6
|
+
|
|
7
|
+
background: var(--select-bg);
|
|
8
|
+
border: 1px solid var(--select-border);
|
|
9
|
+
color: var(--select-text);
|
|
10
|
+
--tw-ring-color: var(--select-ring);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.ui-select__trigger:hover:not(:disabled) {
|
|
14
|
+
--select-bg: var(--ui-surface-bg-subtle);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.ui-select__trigger[data-open] {
|
|
18
|
+
--select-border: var(--ui-surface-border-strong);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.ui-select__trigger[data-tone="warning"] {
|
|
22
|
+
--select-border: var(--ui-warning-border);
|
|
23
|
+
--select-ring: var(--ui-warning-border);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.ui-select__trigger:disabled {
|
|
27
|
+
cursor: not-allowed;
|
|
28
|
+
opacity: 0.5;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.ui-select__placeholder {
|
|
32
|
+
color: var(--ui-text-muted);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.ui-select__chevron {
|
|
36
|
+
color: var(--ui-text-muted);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.ui-select__dropdown {
|
|
40
|
+
background: var(--ui-surface-bg-raised);
|
|
41
|
+
--tw-ring-color: var(--ui-surface-border);
|
|
42
|
+
box-shadow: var(--select-dropdown-shadow);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.ui-select__option[data-focused] {
|
|
46
|
+
background: var(--ui-surface-bg-inset);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.ui-select__option[data-selected] {
|
|
50
|
+
color: var(--ui-accent-bg);
|
|
51
|
+
font-weight: 500;
|
|
52
|
+
}
|