@weichenlin/swell-ui 0.2.0 → 0.3.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 +105 -35
- package/dist/index.d.ts +106 -6
- package/dist/index.js +463 -138
- package/dist/theme.css +185 -77
- package/package.json +1 -2
- package/dist/themes/warm.css +0 -63
package/dist/theme.css
CHANGED
|
@@ -1,54 +1,101 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* swell-ui design tokens and base styles.
|
|
2
|
+
* swell-ui design tokens and base styles.
|
|
3
3
|
* Import right after tailwindcss. Contains no utilities and no @source:
|
|
4
4
|
* use styles.css to also have Tailwind scan the components.
|
|
5
5
|
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
6
|
+
* Colors come in two layers:
|
|
7
|
+
* - Base colors (the palette): page, surfaces, text, brand, status. The only literal colors here;
|
|
8
|
+
* these are what an app overrides.
|
|
9
|
+
* - Everything else is computed from them at runtime with var() and color-mix(), so overriding a
|
|
10
|
+
* base color carries through. The mix percentages reproduce the tuned values for the default
|
|
11
|
+
* palette and a warm parchment one, contrast-checked (text >=4.5:1, field borders >=3:1). A palette far from
|
|
12
|
+
* these can still fall short: check contrast after changing bg, surface or fg.
|
|
13
|
+
*
|
|
14
|
+
* Light/dark pairs are written once as light-dark(<light>, <dark>), following `color-scheme` on
|
|
15
|
+
* the root: the system by default, forced by data-theme="light" / "dark". Tailwind's build
|
|
16
|
+
* polyfills light-dark() for browsers that lack it.
|
|
9
17
|
*/
|
|
10
18
|
|
|
11
19
|
@theme {
|
|
12
|
-
/*
|
|
13
|
-
* Brand. The only two tokens to override for a rebrand: input focus, checked controls and
|
|
14
|
-
* their halos derive from these at runtime (plain var() references, no baked copies).
|
|
15
|
-
* Default is neutral: near-black on light, near-white on dark.
|
|
16
|
-
*/
|
|
17
|
-
--color-primary: light-dark(#141414, #f9f9f9);
|
|
18
|
-
--color-primary-fg: light-dark(#f9f9f9, #141414);
|
|
19
|
-
/* Secondary brand color; no component uses it, so it just follows primary unless set */
|
|
20
|
-
--color-accent: var(--color-primary);
|
|
20
|
+
/* ---- Base colors ---- */
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
--color-
|
|
24
|
-
--color-surface: light-dark(#
|
|
25
|
-
--color-
|
|
26
|
-
|
|
27
|
-
--color-
|
|
28
|
-
--color-fg
|
|
29
|
-
--color-
|
|
30
|
-
|
|
31
|
-
--color-border: light-dark(#eeeeee, #383838); /* row dividers */
|
|
32
|
-
--color-border-strong: light-dark(#e6e6e6, #3d3d3d);
|
|
33
|
-
--color-ring: light-dark(#cfcfcf, #3d3d3d);
|
|
34
|
-
--color-ring-deep: light-dark(#c0c0c0, #4c4c4c);
|
|
35
|
-
--color-inverse: light-dark(#303030, #141414);
|
|
36
|
-
--color-inverse-fg: light-dark(#f9f9f9, #aeaeae);
|
|
37
|
-
/* Light red + dark text on dark: one danger token can't pass 4.5:1 both as fill and as text */
|
|
22
|
+
--color-bg: light-dark(#f4f4f4, #141414); /* page */
|
|
23
|
+
--color-surface: light-dark(#f9f9f9, #303030); /* cards, panels, text fields */
|
|
24
|
+
--color-surface-raised: light-dark(#ffffff, #303030); /* popovers, dialogs */
|
|
25
|
+
--color-fg: light-dark(#141414, #f9f9f9); /* text */
|
|
26
|
+
/* Brand: defaults to the text color (neutral). A rebrand sets these two. */
|
|
27
|
+
--color-primary: var(--color-fg);
|
|
28
|
+
--color-primary-fg: light-dark(var(--color-surface), var(--color-bg));
|
|
29
|
+
--color-focus: #3898ec; /* keyboard focus outline */
|
|
30
|
+
/* Status. Light red on dark: one danger can't pass 4.5:1 both as a fill and as text. */
|
|
38
31
|
--color-danger: light-dark(#b53333, #ee8a80);
|
|
39
|
-
--color-
|
|
40
|
-
|
|
32
|
+
--color-success: light-dark(
|
|
33
|
+
#394d00,
|
|
34
|
+
#758e48
|
|
35
|
+
); /* olive; deepest, so it parts from danger by lightness (CVD) */
|
|
36
|
+
--color-warning: light-dark(#a5761d, #e6b463); /* amber */
|
|
37
|
+
--color-info: light-dark(#3e7087, #74a6bf); /* muted teal-blue */
|
|
38
|
+
|
|
39
|
+
/* ---- Computed: fg mixed into bg (in oklab) unless noted ---- */
|
|
40
|
+
|
|
41
|
+
/* Secondary brand color; no component uses it */
|
|
42
|
+
--color-accent: var(--color-primary);
|
|
43
|
+
|
|
44
|
+
--color-surface-muted: light-dark(
|
|
45
|
+
color-mix(in oklab, var(--color-fg) 5%, var(--color-bg)),
|
|
46
|
+
color-mix(in oklab, var(--color-fg) 10%, var(--color-bg))
|
|
47
|
+
); /* hover fills, secondary button; sunk below surface on dark */
|
|
48
|
+
--color-fg-strong: color-mix(in oklab, var(--color-fg) 71%, var(--color-bg));
|
|
49
|
+
--color-fg-muted: light-dark(
|
|
50
|
+
color-mix(in oklab, var(--color-fg) 63%, var(--color-bg)),
|
|
51
|
+
color-mix(in oklab, var(--color-fg) 71%, var(--color-bg))
|
|
52
|
+
);
|
|
53
|
+
/* >=4.5:1 on every surface, including surface-muted and the popover highlight */
|
|
54
|
+
--color-fg-subtle: light-dark(
|
|
55
|
+
color-mix(in oklab, var(--color-fg) 58%, var(--color-bg)),
|
|
56
|
+
color-mix(in oklab, var(--color-fg) 69%, var(--color-bg))
|
|
57
|
+
);
|
|
58
|
+
--color-border: light-dark(
|
|
59
|
+
color-mix(in oklab, var(--color-fg) 2%, var(--color-bg)),
|
|
60
|
+
color-mix(in oklab, var(--color-fg) 19%, var(--color-bg))
|
|
61
|
+
); /* row dividers */
|
|
62
|
+
--color-border-strong: light-dark(
|
|
63
|
+
color-mix(in oklab, var(--color-fg) 5%, var(--color-bg)),
|
|
64
|
+
color-mix(in oklab, var(--color-fg) 22%, var(--color-bg))
|
|
65
|
+
);
|
|
66
|
+
--color-ring: light-dark(
|
|
67
|
+
color-mix(in oklab, var(--color-fg) 14%, var(--color-bg)),
|
|
68
|
+
color-mix(in oklab, var(--color-fg) 22%, var(--color-bg))
|
|
69
|
+
);
|
|
70
|
+
--color-ring-deep: light-dark(
|
|
71
|
+
color-mix(in oklab, var(--color-fg) 20%, var(--color-bg)),
|
|
72
|
+
color-mix(in oklab, var(--color-fg) 29%, var(--color-bg))
|
|
73
|
+
);
|
|
74
|
+
/* Tooltips and the `dark` button: near-fg on light, the page itself on dark */
|
|
75
|
+
--color-inverse: light-dark(
|
|
76
|
+
color-mix(in oklab, var(--color-fg) 85%, var(--color-bg)),
|
|
77
|
+
var(--color-bg)
|
|
78
|
+
);
|
|
79
|
+
--color-inverse-fg: light-dark(var(--color-surface), var(--color-fg-muted));
|
|
80
|
+
--color-danger-fg: light-dark(var(--color-surface), var(--color-bg));
|
|
41
81
|
|
|
42
82
|
/*
|
|
43
|
-
* Text fields
|
|
44
|
-
*
|
|
45
|
-
*
|
|
83
|
+
* Text fields sit on the container color (as Ant Design, Primer and Fluent do): lighter than the
|
|
84
|
+
* page, the same as a card. Read-only drops to the page color, so it reads flatter than editable.
|
|
85
|
+
* Borders are kept >=3:1 against the page, the card and the fill (WCAG 1.4.11).
|
|
86
|
+
* Hover changes the border and adds a faint drop shadow; the fill stays.
|
|
46
87
|
*/
|
|
47
|
-
--color-input-bg:
|
|
48
|
-
--color-input-
|
|
49
|
-
--color-input-
|
|
50
|
-
|
|
51
|
-
|
|
88
|
+
--color-input-bg: var(--color-surface);
|
|
89
|
+
--color-input-bg-hover: var(--color-input-bg);
|
|
90
|
+
--color-input-border: light-dark(
|
|
91
|
+
color-mix(in oklab, var(--color-fg) 48%, var(--color-bg)),
|
|
92
|
+
color-mix(in oklab, var(--color-fg) 52%, var(--color-bg))
|
|
93
|
+
);
|
|
94
|
+
--color-input-placeholder: light-dark(
|
|
95
|
+
color-mix(in oklab, var(--color-fg) 57%, var(--color-bg)),
|
|
96
|
+
color-mix(in oklab, var(--color-fg) 62%, var(--color-bg))
|
|
97
|
+
);
|
|
98
|
+
--color-input-border-hover: var(--color-fg-strong);
|
|
52
99
|
--color-input-focus: var(--color-primary);
|
|
53
100
|
--color-input-highlight: light-dark(rgb(0 0 0 / 0.03), rgb(255 255 255 / 0.04));
|
|
54
101
|
--shadow-input: inset 0 1px 0 var(--color-input-highlight);
|
|
@@ -60,22 +107,38 @@
|
|
|
60
107
|
--color-input-halo-invalid-focus: color-mix(in oklab, var(--color-danger) 22%, transparent);
|
|
61
108
|
|
|
62
109
|
/*
|
|
63
|
-
* Selection controls (Switch, Checkbox): the checked fill and the
|
|
110
|
+
* Selection controls (Switch, Checkbox): the checked fill, and the check/dash drawn on it.
|
|
64
111
|
* The off track/box reuses the input border, which is already >=3:1 on the page and the fill.
|
|
65
112
|
*/
|
|
66
113
|
--color-control-checked: var(--color-primary);
|
|
67
114
|
--color-control-checked-fg: var(--color-primary-fg);
|
|
115
|
+
/*
|
|
116
|
+
* Switch handle (the thumb). Off: the raised surface (white) on light, the text color on dark.
|
|
117
|
+
* On: white, unless the checked track is very light (oklch L > 0.9, e.g. the default brand on
|
|
118
|
+
* dark), then black. That is what CSS contrast-color() does, written with relative color syntax
|
|
119
|
+
* for wider support.
|
|
120
|
+
*/
|
|
121
|
+
--color-switch-handle: light-dark(var(--color-surface-raised), var(--color-fg));
|
|
122
|
+
--color-switch-handle-checked: oklch(
|
|
123
|
+
from var(--color-control-checked) clamp(0, (0.9 - l) * 1000, 1) 0 0
|
|
124
|
+
);
|
|
68
125
|
/* Thumb: a hairline plus a soft drop straight down (a sideways offset makes the small thumb look shifted) */
|
|
69
126
|
--shadow-switch-thumb: 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.2);
|
|
70
127
|
|
|
71
128
|
/*
|
|
72
|
-
* Popovers (the Select picker): raised
|
|
73
|
-
* Highlight is the hovered/keyboard-active row
|
|
129
|
+
* Popovers (the Select picker): the raised surface with a hairline and a soft shadow; fg is mixed
|
|
130
|
+
* into the raised surface here. Highlight is the hovered/keyboard-active row.
|
|
74
131
|
* Dark shadows are darker and denser: the surface itself already separates from near-black.
|
|
75
132
|
*/
|
|
76
|
-
--color-popover-bg:
|
|
77
|
-
--color-popover-border: light-dark(
|
|
78
|
-
|
|
133
|
+
--color-popover-bg: var(--color-surface-raised);
|
|
134
|
+
--color-popover-border: light-dark(
|
|
135
|
+
color-mix(in oklab, var(--color-fg) 12%, var(--color-surface-raised)),
|
|
136
|
+
color-mix(in oklab, var(--color-fg) 8%, var(--color-surface-raised))
|
|
137
|
+
);
|
|
138
|
+
--color-popover-highlight: light-dark(
|
|
139
|
+
color-mix(in oklab, var(--color-fg) 7%, var(--color-surface-raised)),
|
|
140
|
+
color-mix(in oklab, var(--color-fg) 8%, var(--color-surface-raised))
|
|
141
|
+
);
|
|
79
142
|
--shadow-popover:
|
|
80
143
|
0 8px 24px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.4)),
|
|
81
144
|
0 1px 3px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.3));
|
|
@@ -86,43 +149,88 @@
|
|
|
86
149
|
--shadow-dialog:
|
|
87
150
|
0 16px 48px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.5)),
|
|
88
151
|
0 2px 6px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.3));
|
|
89
|
-
--color-dialog-backdrop: light-dark(
|
|
152
|
+
--color-dialog-backdrop: light-dark(
|
|
153
|
+
color-mix(in oklab, var(--color-fg) 40%, transparent),
|
|
154
|
+
rgb(0 0 0 / 0.6)
|
|
155
|
+
);
|
|
90
156
|
|
|
91
157
|
/*
|
|
92
158
|
* Status tones (Badge, Toast, ...). Per tone: main = solid fill / standalone icon,
|
|
93
159
|
* -fg = text on a solid fill, -subtle-bg/-subtle-fg = tinted badge, -border = its hairline.
|
|
94
|
-
* subtle-bg is main mixed
|
|
95
|
-
*
|
|
96
|
-
*
|
|
160
|
+
* subtle-bg is main mixed into bg (14% light / 16% dark), border likewise (35% / 40%);
|
|
161
|
+
* subtle-fg is main pushed toward fg until >=5:1 on subtle-bg (the % differs per tone).
|
|
162
|
+
* Meaning is carried by text + icon, not color alone.
|
|
97
163
|
*/
|
|
98
|
-
|
|
99
|
-
--color-success: light-dark(
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
--color-success-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
--color-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
--color-
|
|
113
|
-
--color-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
--color-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
--color-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
--color-
|
|
164
|
+
--color-success-fg: light-dark(var(--color-surface), var(--color-bg));
|
|
165
|
+
--color-success-subtle-bg: light-dark(
|
|
166
|
+
color-mix(in oklab, var(--color-success) 14%, var(--color-bg)),
|
|
167
|
+
color-mix(in oklab, var(--color-success) 16%, var(--color-bg))
|
|
168
|
+
);
|
|
169
|
+
--color-success-subtle-fg: light-dark(
|
|
170
|
+
color-mix(in oklab, var(--color-fg) 2%, var(--color-success)),
|
|
171
|
+
color-mix(in oklab, var(--color-fg) 14%, var(--color-success))
|
|
172
|
+
);
|
|
173
|
+
--color-success-border: light-dark(
|
|
174
|
+
color-mix(in oklab, var(--color-success) 35%, var(--color-bg)),
|
|
175
|
+
color-mix(in oklab, var(--color-success) 40%, var(--color-bg))
|
|
176
|
+
);
|
|
177
|
+
/* Dark text on amber in both schemes: light text on it fails 4.5:1 */
|
|
178
|
+
--color-warning-fg: light-dark(var(--color-fg), var(--color-bg));
|
|
179
|
+
--color-warning-subtle-bg: light-dark(
|
|
180
|
+
color-mix(in oklab, var(--color-warning) 14%, var(--color-bg)),
|
|
181
|
+
color-mix(in oklab, var(--color-warning) 16%, var(--color-bg))
|
|
182
|
+
);
|
|
183
|
+
--color-warning-subtle-fg: light-dark(
|
|
184
|
+
color-mix(in oklab, var(--color-fg) 30%, var(--color-warning)),
|
|
185
|
+
color-mix(in oklab, var(--color-fg) 2%, var(--color-warning))
|
|
186
|
+
);
|
|
187
|
+
--color-warning-border: light-dark(
|
|
188
|
+
color-mix(in oklab, var(--color-warning) 35%, var(--color-bg)),
|
|
189
|
+
color-mix(in oklab, var(--color-warning) 40%, var(--color-bg))
|
|
190
|
+
);
|
|
191
|
+
--color-danger-subtle-bg: light-dark(
|
|
192
|
+
color-mix(in oklab, var(--color-danger) 14%, var(--color-bg)),
|
|
193
|
+
color-mix(in oklab, var(--color-danger) 16%, var(--color-bg))
|
|
194
|
+
);
|
|
195
|
+
--color-danger-subtle-fg: light-dark(
|
|
196
|
+
color-mix(in oklab, var(--color-fg) 11%, var(--color-danger)),
|
|
197
|
+
color-mix(in oklab, var(--color-fg) 2%, var(--color-danger))
|
|
198
|
+
);
|
|
199
|
+
--color-danger-border: light-dark(
|
|
200
|
+
color-mix(in oklab, var(--color-danger) 35%, var(--color-bg)),
|
|
201
|
+
color-mix(in oklab, var(--color-danger) 40%, var(--color-bg))
|
|
202
|
+
);
|
|
203
|
+
--color-info-fg: light-dark(var(--color-surface), var(--color-bg));
|
|
204
|
+
--color-info-subtle-bg: light-dark(
|
|
205
|
+
color-mix(in oklab, var(--color-info) 14%, var(--color-bg)),
|
|
206
|
+
color-mix(in oklab, var(--color-info) 16%, var(--color-bg))
|
|
207
|
+
);
|
|
208
|
+
--color-info-subtle-fg: light-dark(
|
|
209
|
+
color-mix(in oklab, var(--color-fg) 17%, var(--color-info)),
|
|
210
|
+
color-mix(in oklab, var(--color-fg) 2%, var(--color-info))
|
|
211
|
+
);
|
|
212
|
+
--color-info-border: light-dark(
|
|
213
|
+
color-mix(in oklab, var(--color-info) 35%, var(--color-bg)),
|
|
214
|
+
color-mix(in oklab, var(--color-info) 40%, var(--color-bg))
|
|
215
|
+
);
|
|
216
|
+
/* neutral: a gray between fg and bg */
|
|
217
|
+
--color-neutral: light-dark(
|
|
218
|
+
color-mix(in oklab, var(--color-fg) 60%, var(--color-bg)),
|
|
219
|
+
color-mix(in oklab, var(--color-fg) 71%, var(--color-bg))
|
|
220
|
+
);
|
|
221
|
+
--color-neutral-fg: light-dark(var(--color-surface), var(--color-bg));
|
|
222
|
+
--color-neutral-subtle-bg: light-dark(
|
|
223
|
+
color-mix(in oklab, var(--color-neutral) 14%, var(--color-bg)),
|
|
224
|
+
color-mix(in oklab, var(--color-neutral) 16%, var(--color-bg))
|
|
225
|
+
);
|
|
226
|
+
--color-neutral-subtle-fg: light-dark(
|
|
227
|
+
color-mix(in oklab, var(--color-fg) 11%, var(--color-neutral)),
|
|
228
|
+
color-mix(in oklab, var(--color-fg) 2%, var(--color-neutral))
|
|
229
|
+
);
|
|
230
|
+
--color-neutral-border: light-dark(
|
|
231
|
+
color-mix(in oklab, var(--color-neutral) 35%, var(--color-bg)),
|
|
232
|
+
color-mix(in oklab, var(--color-neutral) 40%, var(--color-bg))
|
|
233
|
+
);
|
|
126
234
|
|
|
127
235
|
/* Fonts and radii are Tailwind's defaults; see the README to change them */
|
|
128
236
|
--shadow-whisper: rgba(0, 0, 0, 0.05) 0 4px 24px;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@weichenlin/swell-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Hand-built React components styled with Tailwind CSS v4.",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -17,7 +17,6 @@
|
|
|
17
17
|
"./theme.css": "./dist/theme.css",
|
|
18
18
|
"./styles.css": "./dist/styles.css",
|
|
19
19
|
"./typography.css": "./dist/typography.css",
|
|
20
|
-
"./themes/warm.css": "./dist/themes/warm.css",
|
|
21
20
|
"./package.json": "./package.json"
|
|
22
21
|
},
|
|
23
22
|
"publishConfig": {
|
package/dist/themes/warm.css
DELETED
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Warm theme: parchment surfaces, warm grays and a brown primary (swell-ui's original look).
|
|
3
|
-
* Import after swell-ui's styles.css (or theme.css); add typography.css for the serif headings.
|
|
4
|
-
* Overrides the color tokens only; input focus and checked controls still derive from primary.
|
|
5
|
-
*/
|
|
6
|
-
@theme {
|
|
7
|
-
/* Warm Brown; Warm Tan on dark, where the brown is too dark against the page */
|
|
8
|
-
--color-primary: light-dark(#8b5e3c, #c49a6c);
|
|
9
|
-
--color-primary-fg: light-dark(#faf9f5, #141413);
|
|
10
|
-
--color-accent: #c49a6c; /* Warm Tan */
|
|
11
|
-
|
|
12
|
-
--color-bg: light-dark(#f5f4ed, #141413); /* Parchment */
|
|
13
|
-
--color-surface: light-dark(#faf9f5, #30302e); /* Ivory / Dark Surface */
|
|
14
|
-
--color-surface-raised: light-dark(#ffffff, #30302e);
|
|
15
|
-
--color-surface-muted: light-dark(#e8e6dc, #262625); /* Warm Sand */
|
|
16
|
-
--color-fg: light-dark(#141413, #faf9f5);
|
|
17
|
-
--color-fg-strong: light-dark(#4d4c48, #b0aea5);
|
|
18
|
-
--color-fg-muted: light-dark(#5e5d59, #b0aea5);
|
|
19
|
-
--color-fg-subtle: light-dark(#686761, #a8a79e);
|
|
20
|
-
--color-border: light-dark(#f0eee6, #383836);
|
|
21
|
-
--color-border-strong: light-dark(#e8e6dc, #3d3d3a);
|
|
22
|
-
--color-ring: light-dark(#d1cfc5, #3d3d3a);
|
|
23
|
-
--color-ring-deep: light-dark(#c2c0b6, #4d4c48);
|
|
24
|
-
--color-inverse: light-dark(#30302e, #141413);
|
|
25
|
-
--color-inverse-fg: light-dark(#faf9f5, #b0aea5);
|
|
26
|
-
--color-danger: light-dark(#b53333, #ee8a80); /* Error Crimson */
|
|
27
|
-
--color-danger-fg: light-dark(#faf9f5, #141413);
|
|
28
|
-
|
|
29
|
-
--color-input-bg: light-dark(#ebeae3, #1f1f1e);
|
|
30
|
-
--color-input-border: light-dark(#7f7e7b, #81817e);
|
|
31
|
-
--color-input-placeholder: light-dark(#6a6964, #9a998f);
|
|
32
|
-
--color-input-border-hover: light-dark(#4d4c48, #b0aea5);
|
|
33
|
-
--color-input-bg-hover: light-dark(#f3f2ec, #262625);
|
|
34
|
-
|
|
35
|
-
--color-popover-bg: light-dark(#ffffff, #30302e);
|
|
36
|
-
--color-popover-border: light-dark(#e0ded4, #3d3d3a);
|
|
37
|
-
--color-popover-highlight: light-dark(#efede5, #3d3d3a);
|
|
38
|
-
--color-dialog-backdrop: light-dark(rgb(20 20 19 / 0.4), rgb(0 0 0 / 0.6));
|
|
39
|
-
|
|
40
|
-
--color-success: light-dark(#394d00, #758e48);
|
|
41
|
-
--color-success-fg: light-dark(#faf9f5, #141413);
|
|
42
|
-
--color-success-subtle-bg: light-dark(#d8dbcc, #22251c);
|
|
43
|
-
--color-success-subtle-fg: light-dark(#3a4c0e, #98b070);
|
|
44
|
-
--color-success-border: light-dark(#aeb79b, #384128);
|
|
45
|
-
--color-warning: light-dark(#a5761d, #e6b463);
|
|
46
|
-
--color-warning-fg: #141413;
|
|
47
|
-
--color-warning-subtle-bg: light-dark(#eae2d1, #302a20);
|
|
48
|
-
--color-warning-subtle-fg: light-dark(#7e5600, #e2b56e);
|
|
49
|
-
--color-warning-border: light-dark(#d9c7a9, #5f4e33);
|
|
50
|
-
--color-danger-subtle-bg: light-dark(#f0dad2, #322522);
|
|
51
|
-
--color-danger-subtle-fg: light-dark(#a2302f, #f0958c);
|
|
52
|
-
--color-danger-border: light-dark(#e5b3aa, #63403b);
|
|
53
|
-
--color-info: light-dark(#3e7087, #74a6bf);
|
|
54
|
-
--color-info-fg: light-dark(#faf9f5, #141413);
|
|
55
|
-
--color-info-subtle-bg: light-dark(#dbe1de, #22282a);
|
|
56
|
-
--color-info-subtle-fg: light-dark(#356075, #87b4cb);
|
|
57
|
-
--color-info-border: light-dark(#b4c4c9, #384951);
|
|
58
|
-
--color-neutral: light-dark(#66635c, #b0aea5);
|
|
59
|
-
--color-neutral-fg: light-dark(#faf9f5, #141413);
|
|
60
|
-
--color-neutral-subtle-bg: light-dark(#e0ded7, #292927);
|
|
61
|
-
--color-neutral-subtle-fg: light-dark(#5e5b55, #b4b2aa);
|
|
62
|
-
--color-neutral-border: light-dark(#c0bfb8, #4c4c48);
|
|
63
|
-
}
|