@weichenlin/swell-ui 0.1.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.
Files changed (6) hide show
  1. package/README.md +187 -17
  2. package/dist/index.d.ts +106 -6
  3. package/dist/index.js +486 -170
  4. package/dist/theme.css +215 -237
  5. package/dist/typography.css +12 -0
  6. package/package.json +2 -1
package/dist/theme.css CHANGED
@@ -1,267 +1,253 @@
1
1
  /*
2
- * swell-ui design tokens, dark theme 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
+ *
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.
5
17
  */
6
18
 
7
- /* Tokens. Light values live on bare :root (and @theme). */
8
19
  @theme {
9
- --color-bg: #f5f4ed; /* Parchment */
10
- --color-surface: #faf9f5; /* Ivory */
11
- --color-surface-raised: #ffffff; /* Pure White */
12
- --color-surface-muted: #e8e6dc; /* Warm Sand */
13
- --color-fg: #141413; /* Near Black */
14
- --color-fg-strong: #4d4c48; /* Charcoal Warm */
15
- --color-fg-muted: #5e5d59; /* Olive Gray */
16
- --color-fg-subtle: #686761; /* Warm gray: >=4.5:1 even on surface-muted */
17
- --color-border: #f0eee6; /* Border Cream */
18
- --color-border-strong: #e8e6dc; /* Border Warm */
19
- --color-ring: #d1cfc5; /* Ring Warm */
20
- --color-ring-deep: #c2c0b6; /* Ring Deep */
21
- --color-primary: #8b5e3c; /* Warm Brown */
22
- --color-primary-fg: #faf9f5;
23
- --color-accent: #c49a6c; /* Warm Tan */
24
- --color-inverse: #30302e; /* Dark Surface */
25
- --color-inverse-fg: #faf9f5;
26
- --color-danger: #b53333; /* Error Crimson */
27
- --color-danger-fg: #faf9f5;
28
- --color-focus: #3898ec; /* Focus Blue */
20
+ /* ---- Base colors ---- */
21
+
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. */
31
+ --color-danger: light-dark(#b53333, #ee8a80);
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));
81
+
29
82
  /*
30
- * Text fields: a slightly sunk solid fill.
31
- * Borders are fg mixed over bg in oklab, kept >=3:1 against both the page and the fill (WCAG 1.4.11).
32
- * Focus is neutral, not blue: border steps up to near-fg plus a soft halo.
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.
33
87
  */
34
- /* Fill = fg 4% over bg in oklab, baked to hex: a color-mix token gets a wrong static fallback per theme */
35
- --color-input-bg: #ebeae3;
36
- --color-input-border: #7f7e7b;
37
- --color-input-placeholder: #6a6964;
38
- /* Hover stacks cues (stronger border, lifted fill, faint drop shadow): a border step alone is too subtle */
39
- --color-input-border-hover: #4d4c48;
40
- --color-input-bg-hover: #f3f2ec;
41
- --color-input-focus: #8b5e3c; /* Warm Brown (primary) */
42
- --color-input-highlight: rgb(0 0 0 / 0.03);
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);
99
+ --color-input-focus: var(--color-primary);
100
+ --color-input-highlight: light-dark(rgb(0 0 0 / 0.03), rgb(255 255 255 / 0.04));
43
101
  --shadow-input: inset 0 1px 0 var(--color-input-highlight);
44
- --shadow-input-lift: 0 1px 2px rgb(0 0 0 / 0.06);
102
+ /* A drop shadow doesn't read on near-black, so it fades out on dark */
103
+ --shadow-input-lift: 0 1px 2px light-dark(rgb(0 0 0 / 0.06), transparent);
45
104
  /* Focus/error halos: decorative 3px rings outside the border */
46
105
  --color-input-halo: color-mix(in oklab, var(--color-input-focus) 14%, transparent);
47
106
  --color-input-halo-invalid: color-mix(in oklab, var(--color-danger) 12%, transparent);
48
107
  --color-input-halo-invalid-focus: color-mix(in oklab, var(--color-danger) 22%, transparent);
108
+
49
109
  /*
50
- * Selection controls (Switch, Checkbox): the checked fill and the mark drawn on it (thumb, check, dash).
110
+ * Selection controls (Switch, Checkbox): the checked fill, and the check/dash drawn on it.
51
111
  * The off track/box reuses the input border, which is already >=3:1 on the page and the fill.
52
112
  */
53
- --color-control-checked: #8b5e3c; /* Warm Brown (primary) */
54
- --color-control-checked-fg: #ffffff; /* 5.58:1 on the fill */
55
- /* Thumb: a hairline plus a soft drop straight down. Geist's sideways offset made the small thumb
56
- * look shifted, so the shadow stays horizontally symmetric. */
113
+ --color-control-checked: var(--color-primary);
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
+ );
125
+ /* Thumb: a hairline plus a soft drop straight down (a sideways offset makes the small thumb look shifted) */
57
126
  --shadow-switch-thumb: 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.2);
127
+
58
128
  /*
59
- * Popovers (the Select picker): raised above the page with a warm hairline and a soft shadow.
60
- * Highlight is the hovered/keyboard-active row; same fill for both so they never disagree.
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.
131
+ * Dark shadows are darker and denser: the surface itself already separates from near-black.
61
132
  */
62
- --color-popover-bg: #ffffff; /* Pure White */
63
- --color-popover-border: #e0ded4; /* between Border Warm and Ring Warm: Border Warm vanishes on white */
64
- --color-popover-highlight: #efede5;
65
- --shadow-popover: 0 8px 24px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.06);
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
+ );
142
+ --shadow-popover:
143
+ 0 8px 24px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.4)),
144
+ 0 1px 3px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.3));
66
145
  /*
67
- * Dialogs: same surface and hairline as popovers, one elevation step higher (a wider, softer
68
- * drop) since they sit over a dimmed page. Backdrop is warm near-black, never blurred.
146
+ * Dialogs: same surface and hairline as popovers, one elevation step higher. The backdrop is
147
+ * never blurred; it is darker on dark because a 40% dim barely reads over a near-black page.
69
148
  */
70
- --shadow-dialog: 0 16px 48px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.06);
71
- --color-dialog-backdrop: rgb(20 20 19 / 0.4);
149
+ --shadow-dialog:
150
+ 0 16px 48px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.5)),
151
+ 0 2px 6px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.3));
152
+ --color-dialog-backdrop: light-dark(
153
+ color-mix(in oklab, var(--color-fg) 40%, transparent),
154
+ rgb(0 0 0 / 0.6)
155
+ );
156
+
72
157
  /*
73
- * Status tones (Badge, later Dialog/Toast/table state). Per tone: main = solid fill / standalone icon,
158
+ * Status tones (Badge, Toast, ...). Per tone: main = solid fill / standalone icon,
74
159
  * -fg = text on a solid fill, -subtle-bg/-subtle-fg = tinted badge, -border = its hairline.
75
- * subtle-bg is main mixed over bg in oklab (14% light / 16% dark), baked to hex; subtle-fg is main
76
- * pushed along lightness until >=5:1 on it and >=4.5:1 on the translucent equivalent over any surface.
77
- * Meaning is carried by text + icon; hue/lightness are spaced so success vs danger also survives red-green CVD.
78
- * danger main/-fg already exist above; only its subtle-* are new.
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.
79
163
  */
80
- /* success: olive, hue 125; deepest tone so it separates from danger by lightness for red-green CVD */
81
- --color-success: #394d00;
82
- --color-success-fg: #faf9f5;
83
- --color-success-subtle-bg: #d8dbcc;
84
- --color-success-subtle-fg: #3a4c0e;
85
- --color-success-border: #aeb79b;
86
- /* warning: ochre/amber, hue 78; lighter than danger; dark solid-fg because ivory on amber fails 4.5:1 */
87
- --color-warning: #a5761d;
88
- --color-warning-fg: #141413;
89
- --color-warning-subtle-bg: #eae2d1;
90
- --color-warning-subtle-fg: #7e5600;
91
- --color-warning-border: #d9c7a9;
92
- /* danger: existing Error Crimson (unchanged) */
93
- --color-danger-subtle-bg: #f0dad2;
94
- --color-danger-subtle-fg: #a2302f;
95
- --color-danger-border: #e5b3aa;
96
- /* info: dusty teal-blue, hue 230, chroma 0.065 (muted; the only cool-leaning tone besides Focus Blue) */
97
- --color-info: #3e7087;
98
- --color-info-fg: #faf9f5;
99
- --color-info-subtle-bg: #dbe1de;
100
- --color-info-subtle-fg: #356075;
101
- --color-info-border: #b4c4c9;
102
- /* neutral: warm gray (Olive Gray family) */
103
- --color-neutral: #66635c;
104
- --color-neutral-fg: #faf9f5;
105
- --color-neutral-subtle-bg: #e0ded7;
106
- --color-neutral-subtle-fg: #5e5b55;
107
- --color-neutral-border: #c0bfb8;
108
-
109
- --font-sans: "Anthropic Sans", system-ui, Inter, Arial, sans-serif;
110
- --font-serif: "Anthropic Serif", Georgia, serif;
111
- --font-mono: "Anthropic Mono", ui-monospace, Menlo, monospace;
112
-
113
- /* Radius scale */
114
- --radius-sharp: 4px;
115
- --radius-sm: 6px;
116
- --radius-md: 8px;
117
- --radius-lg: 12px;
118
- --radius-xl: 16px;
119
- --radius-2xl: 24px;
120
- --radius-3xl: 32px;
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
+ );
121
234
 
235
+ /* Fonts and radii are Tailwind's defaults; see the README to change them */
122
236
  --shadow-whisper: rgba(0, 0, 0, 0.05) 0 4px 24px;
123
237
  --container-page: 1200px;
124
238
  }
125
239
 
240
+ /* Follow the system unless data-theme forces one; light-dark() above reads this */
126
241
  :root {
127
- color-scheme: light;
242
+ color-scheme: light dark;
128
243
  }
129
244
 
130
- /* Dark values */
131
- :root:not([data-theme="light"]) {
132
- @media (prefers-color-scheme: dark) {
133
- color-scheme: dark;
134
- --color-bg: #141413;
135
- --color-surface: #30302e;
136
- --color-surface-raised: #30302e;
137
- --color-surface-muted: #262625; /* sunk below Dark Surface: header rows, hover fills */
138
- --color-fg: #faf9f5;
139
- --color-fg-strong: #b0aea5;
140
- --color-fg-muted: #b0aea5;
141
- --color-fg-subtle: #a8a79e; /* >=4.5:1 on raised and highlighted surfaces */
142
- --color-border: #383836; /* between Dark Surface and Dark Warm: row dividers */
143
- --color-border-strong: #3d3d3a; /* Dark Warm */
144
- --color-ring: #3d3d3a; /* Dark Warm */
145
- --color-ring-deep: #4d4c48; /* Charcoal Warm */
146
- --color-inverse: #141413;
147
- --color-inverse-fg: #b0aea5;
148
- --color-danger: #ee8a80;
149
- --color-danger-fg: #141413;
150
- --color-input-bg: #1f1f1e; /* white 6% over bg in oklab */
151
- --color-input-border: #81817e;
152
- --color-input-placeholder: #9a998f;
153
- --color-input-border-hover: #b0aea5;
154
- --color-input-bg-hover: #262625;
155
- --color-input-focus: #c49a6c; /* Warm Tan: primary is too dark on dark surfaces */
156
- --color-control-checked: #c49a6c; /* Warm Tan, as the focus color */
157
- --color-control-checked-fg: #141413; /* white on tan is only ~2.6:1; near-black is 7.2:1 */
158
- --color-input-highlight: rgb(255 255 255 / 0.04);
159
- --shadow-input-lift: 0 0 #0000; /* a drop shadow doesn't read on near-black */
160
- --color-popover-bg: #30302e; /* Dark Surface */
161
- --color-popover-border: #3d3d3a; /* Dark Warm */
162
- --color-popover-highlight: #3d3d3a;
163
- /* Darker and denser than light: the surface itself already separates from near-black */
164
- --shadow-popover: 0 8px 24px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.3);
165
- --shadow-dialog: 0 16px 48px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.3);
166
- /* Darker than light: a 40% dim barely reads over a near-black page */
167
- --color-dialog-backdrop: rgb(0 0 0 / 0.6);
168
- /* Status tones: lightened for dark surfaces, solid-fg flips to near-black */
169
- /* success: olive, lightened for dark; kept darker than danger for CVD */
170
- --color-success: #758e48;
171
- --color-success-fg: #141413;
172
- --color-success-subtle-bg: #22251c;
173
- --color-success-subtle-fg: #98b070;
174
- --color-success-border: #384128;
175
- /* warning: amber */
176
- --color-warning: #e6b463;
177
- --color-warning-fg: #141413;
178
- --color-warning-subtle-bg: #302a20;
179
- --color-warning-subtle-fg: #e2b56e;
180
- --color-warning-border: #5f4e33;
181
- /* danger: existing (unchanged) */
182
- --color-danger-subtle-bg: #322522;
183
- --color-danger-subtle-fg: #f0958c;
184
- --color-danger-border: #63403b;
185
- /* info: dusty teal-blue */
186
- --color-info: #74a6bf;
187
- --color-info-fg: #141413;
188
- --color-info-subtle-bg: #22282a;
189
- --color-info-subtle-fg: #87b4cb;
190
- --color-info-border: #384951;
191
- /* neutral: Warm Silver */
192
- --color-neutral: #b0aea5;
193
- --color-neutral-fg: #141413;
194
- --color-neutral-subtle-bg: #292927;
195
- --color-neutral-subtle-fg: #b4b2aa;
196
- --color-neutral-border: #4c4c48;
197
- }
245
+ :root[data-theme="light"] {
246
+ color-scheme: light;
198
247
  }
199
248
 
200
249
  :root[data-theme="dark"] {
201
250
  color-scheme: dark;
202
- --color-bg: #141413;
203
- --color-surface: #30302e;
204
- --color-surface-raised: #30302e;
205
- --color-surface-muted: #262625; /* sunk below Dark Surface: header rows, hover fills */
206
- --color-fg: #faf9f5;
207
- --color-fg-strong: #b0aea5;
208
- --color-fg-muted: #b0aea5;
209
- --color-fg-subtle: #a8a79e; /* >=4.5:1 on raised and highlighted surfaces */
210
- --color-border: #383836; /* between Dark Surface and Dark Warm: row dividers */
211
- --color-border-strong: #3d3d3a; /* Dark Warm */
212
- --color-ring: #3d3d3a; /* Dark Warm */
213
- --color-ring-deep: #4d4c48; /* Charcoal Warm */
214
- --color-inverse: #141413;
215
- --color-inverse-fg: #b0aea5;
216
- /* Light red + dark text: a single danger token can't pass 4.5:1 both as fill and as text on dark */
217
- --color-danger: #ee8a80;
218
- --color-danger-fg: #141413;
219
- --color-input-bg: #1f1f1e; /* white 6% over bg in oklab */
220
- --color-input-border: #81817e;
221
- --color-input-placeholder: #9a998f;
222
- --color-input-border-hover: #b0aea5;
223
- --color-input-bg-hover: #262625;
224
- --color-input-focus: #c49a6c; /* Warm Tan: primary is too dark on dark surfaces */
225
- --color-control-checked: #c49a6c; /* Warm Tan, as the focus color */
226
- --color-control-checked-fg: #141413; /* white on tan is only ~2.6:1; near-black is 7.2:1 */
227
- --color-input-highlight: rgb(255 255 255 / 0.04);
228
- --shadow-input-lift: 0 0 #0000; /* a drop shadow doesn't read on near-black */
229
- --color-popover-bg: #30302e; /* Dark Surface */
230
- --color-popover-border: #3d3d3a; /* Dark Warm */
231
- --color-popover-highlight: #3d3d3a;
232
- /* Darker and denser than light: the surface itself already separates from near-black */
233
- --shadow-popover: 0 8px 24px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.3);
234
- --shadow-dialog: 0 16px 48px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.3);
235
- --color-dialog-backdrop: rgb(0 0 0 / 0.6);
236
- /* Status tones: lightened for dark surfaces, solid-fg flips to near-black */
237
- /* success: olive, lightened for dark; kept darker than danger for CVD */
238
- --color-success: #758e48;
239
- --color-success-fg: #141413;
240
- --color-success-subtle-bg: #22251c;
241
- --color-success-subtle-fg: #98b070;
242
- --color-success-border: #384128;
243
- /* warning: amber */
244
- --color-warning: #e6b463;
245
- --color-warning-fg: #141413;
246
- --color-warning-subtle-bg: #302a20;
247
- --color-warning-subtle-fg: #e2b56e;
248
- --color-warning-border: #5f4e33;
249
- /* danger: existing (unchanged) */
250
- --color-danger-subtle-bg: #322522;
251
- --color-danger-subtle-fg: #f0958c;
252
- --color-danger-border: #63403b;
253
- /* info: dusty teal-blue */
254
- --color-info: #74a6bf;
255
- --color-info-fg: #141413;
256
- --color-info-subtle-bg: #22282a;
257
- --color-info-subtle-fg: #87b4cb;
258
- --color-info-border: #384951;
259
- /* neutral: Warm Silver */
260
- --color-neutral: #b0aea5;
261
- --color-neutral-fg: #141413;
262
- --color-neutral-subtle-bg: #292927;
263
- --color-neutral-subtle-fg: #b4b2aa;
264
- --color-neutral-border: #4c4c48;
265
251
  }
266
252
 
267
253
  /* `dark:` follows the tokens: data-theme="dark" on the root, or the system when not forced light */
@@ -305,7 +291,7 @@
305
291
  }
306
292
  }
307
293
 
308
- /* Layered so the app's own utilities (e.g. a body background, `font-sans` on a title) win */
294
+ /* Layered so the app's own utilities (e.g. a body background) win */
309
295
  @layer base {
310
296
  body {
311
297
  margin: 0;
@@ -314,14 +300,6 @@
314
300
  font-family: var(--font-sans);
315
301
  line-height: 1.6;
316
302
  }
317
-
318
- /* Dialog and Drawer titles rely on this */
319
- h1,
320
- h2,
321
- h3 {
322
- font-family: var(--font-serif);
323
- font-weight: 500;
324
- }
325
303
  }
326
304
 
327
305
  /* Unlayered: beats Tailwind's layered utilities (e.g. `transition-*`) on cascade order alone */
package/dist/typography.css ADDED
@@ -0,0 +1,12 @@
1
+ /*
2
+ * Opt-in editorial headings: h1-h3 in the serif stack at weight 500.
3
+ * Import after swell-ui's styles.css (or theme.css). Layered, so utilities on a heading still win.
4
+ */
5
+ @layer base {
6
+ h1,
7
+ h2,
8
+ h3 {
9
+ font-family: var(--font-serif);
10
+ font-weight: 500;
11
+ }
12
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@weichenlin/swell-ui",
3
- "version": "0.1.0",
3
+ "version": "0.3.0",
4
4
  "description": "Hand-built React components styled with Tailwind CSS v4.",
5
5
  "files": [
6
6
  "dist"
@@ -16,6 +16,7 @@
16
16
  },
17
17
  "./theme.css": "./dist/theme.css",
18
18
  "./styles.css": "./dist/styles.css",
19
+ "./typography.css": "./dist/typography.css",
19
20
  "./package.json": "./package.json"
20
21
  },
21
22
  "publishConfig": {