bank20baht-ui 0.1.9 → 0.2.1
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 +4 -3
- package/dist/tokens.css +261 -81
- package/dist/web-types.json +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -211,9 +211,10 @@ el.registry = {
|
|
|
211
211
|
|
|
212
212
|
## Design system — 20baht
|
|
213
213
|
|
|
214
|
-
Ships themed as the **20baht design system**:
|
|
215
|
-
|
|
216
|
-
"paper" easing
|
|
214
|
+
Ships themed as the **20baht design system**: olive intaglio (`#5C7A33`), rose
|
|
215
|
+
underprint (`#A9645A`), foil gold on note paper (`#FBFAF3`), Bricolage Grotesque /
|
|
216
|
+
Geist / Geist Mono, borders-over-shadows, "paper" easing — plus a dark theme
|
|
217
|
+
(`<html data-baht-theme="dark">`, OS-following by default). 35+ components:
|
|
217
218
|
|
|
218
219
|
```html
|
|
219
220
|
<baht-button variant="secondary" size="sm">Cancel</baht-button>
|
package/dist/tokens.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* ============================================================
|
|
2
2
|
bahtui design tokens — 20baht design system
|
|
3
|
-
|
|
3
|
+
Olive intaglio · rose underprint · foil gold on note paper.
|
|
4
4
|
|
|
5
5
|
Every value below is a CSS custom property. Override any of
|
|
6
6
|
them on :root (or any ancestor) to retheme — at build time,
|
|
@@ -11,82 +11,147 @@
|
|
|
11
11
|
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");
|
|
12
12
|
|
|
13
13
|
:root {
|
|
14
|
-
/* ---------- Raw scales (reference — prefer the semantic tokens below) ----------
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
--baht-green-
|
|
21
|
-
--baht-green-
|
|
22
|
-
--baht-green-
|
|
23
|
-
--baht-green-
|
|
24
|
-
--baht-green-
|
|
25
|
-
--baht-green-
|
|
26
|
-
--baht-green-
|
|
27
|
-
--baht-green-
|
|
28
|
-
|
|
29
|
-
/*
|
|
30
|
-
--baht-
|
|
31
|
-
--baht-
|
|
32
|
-
|
|
33
|
-
--baht-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
--baht-
|
|
38
|
-
--baht-
|
|
39
|
-
--baht-
|
|
40
|
-
--baht-
|
|
41
|
-
--baht-
|
|
42
|
-
--baht-
|
|
43
|
-
--baht-
|
|
44
|
-
--baht-
|
|
45
|
-
--baht-
|
|
46
|
-
--baht-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
--baht-
|
|
50
|
-
--baht-
|
|
51
|
-
--baht-
|
|
14
|
+
/* ---------- Raw scales (reference — prefer the semantic tokens below) ----------
|
|
15
|
+
Sampled from the ฿20 note: olive-green intaglio, rose underprint, foil gold.
|
|
16
|
+
--baht-green-* keeps its name: it is the documented override point that
|
|
17
|
+
banknote themes swap wholesale, and every semantic token derives from it. */
|
|
18
|
+
|
|
19
|
+
/* Primary — olive intaglio */
|
|
20
|
+
--baht-green-50: #EDF2E1;
|
|
21
|
+
--baht-green-100: #DCE7C9;
|
|
22
|
+
--baht-green-200: #C4D6A9;
|
|
23
|
+
--baht-green-300: #A9C598; /* dark-mode success / soft olive text */
|
|
24
|
+
--baht-green-400: #8FA85A; /* dark-mode primary */
|
|
25
|
+
--baht-green-500: #6E8C3F;
|
|
26
|
+
--baht-green-600: #5C7A33; /* primary */
|
|
27
|
+
--baht-green-700: #4A6229;
|
|
28
|
+
--baht-green-750: #3F5622; /* success ink on the light tint */
|
|
29
|
+
--baht-green-800: #3A4A24; /* neutral — table header, ink blocks */
|
|
30
|
+
--baht-green-900: #2F4020; /* dark-mode neutral */
|
|
31
|
+
--baht-green-950: #1B2A14; /* content on green-400 */
|
|
32
|
+
|
|
33
|
+
/* aliases — --baht-green-* stays the override point (banknote themes
|
|
34
|
+
swap the whole scale); --baht-olive-* names the same ramp by its hue. */
|
|
35
|
+
--baht-olive-50: var(--baht-green-50);
|
|
36
|
+
--baht-olive-100: var(--baht-green-100);
|
|
37
|
+
--baht-olive-200: var(--baht-green-200);
|
|
38
|
+
--baht-olive-300: var(--baht-green-300);
|
|
39
|
+
--baht-olive-400: var(--baht-green-400);
|
|
40
|
+
--baht-olive-500: var(--baht-green-500);
|
|
41
|
+
--baht-olive-600: var(--baht-green-600);
|
|
42
|
+
--baht-olive-700: var(--baht-green-700);
|
|
43
|
+
--baht-olive-750: var(--baht-green-750);
|
|
44
|
+
--baht-olive-800: var(--baht-green-800);
|
|
45
|
+
--baht-olive-900: var(--baht-green-900);
|
|
46
|
+
--baht-olive-950: var(--baht-green-950);
|
|
47
|
+
/* Note paper — warm neutrals for pages and rails */
|
|
48
|
+
--baht-cream-50: #FEFDF8;
|
|
49
|
+
--baht-cream-100: #FBFAF3; /* page background (base-200) */
|
|
50
|
+
--baht-cream-200: #F2F0E2; /* sunken wells, rails */
|
|
51
|
+
--baht-cream-300: #E3E0CC; /* warm border */
|
|
52
|
+
--baht-cream-400: #C9C6B0;
|
|
53
|
+
|
|
54
|
+
/* Ink neutrals — warm, olive-tinted (never blue-gray on note paper) */
|
|
55
|
+
--baht-gray-50: #F7F6EE;
|
|
56
|
+
--baht-gray-100: #EFEDE0; /* row divider */
|
|
57
|
+
--baht-gray-200: #E3E0CC; /* border */
|
|
58
|
+
--baht-gray-300: #C9C6B0; /* strong border */
|
|
59
|
+
--baht-gray-400: #9A9C90;
|
|
60
|
+
--baht-gray-500: #6B7359; /* tertiary text */
|
|
61
|
+
--baht-gray-600: #4E5A44; /* secondary text */
|
|
62
|
+
--baht-gray-700: #3F4A34;
|
|
63
|
+
--baht-gray-800: #2F3A26;
|
|
64
|
+
--baht-gray-900: #22331A; /* ink (body) */
|
|
65
|
+
|
|
66
|
+
/* Secondary — rose underprint */
|
|
67
|
+
--baht-rose-50: #F8E7E3;
|
|
68
|
+
--baht-rose-100: #F0D2CB;
|
|
69
|
+
--baht-rose-200: #E4B6AC;
|
|
70
|
+
--baht-rose-300: #D9A398; /* dark-mode secondary */
|
|
71
|
+
--baht-rose-400: #C58274;
|
|
72
|
+
--baht-rose-500: #A9645A; /* secondary */
|
|
73
|
+
--baht-rose-600: #8E4F46;
|
|
74
|
+
--baht-rose-700: #75403A;
|
|
75
|
+
--baht-rose-800: #5A312C;
|
|
76
|
+
--baht-rose-900: #3A1E17; /* content on rose-300 */
|
|
77
|
+
|
|
78
|
+
/* Accent — foil gold */
|
|
79
|
+
--baht-gold-50: #FAF1DA;
|
|
80
|
+
--baht-gold-300: #E4D9A6; /* dark-mode warning ink */
|
|
81
|
+
--baht-gold-400: #D9B97A; /* dark-mode accent */
|
|
82
|
+
--baht-gold-500: #C9A55C; /* foil gold */
|
|
52
83
|
--baht-gold-600: #A78640;
|
|
53
|
-
--baht-gold-700: #
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
--baht-
|
|
58
|
-
--baht-
|
|
59
|
-
|
|
84
|
+
--baht-gold-700: #7A5A12; /* warning ink on the light tint */
|
|
85
|
+
--baht-gold-900: #2E2306; /* content on gold-400 */
|
|
86
|
+
|
|
87
|
+
/* Warning — olive-yellow (reads as caution next to olive, unlike gold) */
|
|
88
|
+
--baht-lime-400: #CFCF7A; /* dark-mode warning */
|
|
89
|
+
--baht-lime-500: #B8B85E; /* warning */
|
|
90
|
+
--baht-lime-900: #2E2E0C; /* content on lime */
|
|
91
|
+
|
|
92
|
+
/* Error — burnt terracotta */
|
|
93
|
+
--baht-red-50: #F8E7E3;
|
|
94
|
+
--baht-red-300: #E08878; /* dark-mode error */
|
|
95
|
+
--baht-red-400: #C9503E;
|
|
96
|
+
--baht-red-500: #B03A2B; /* error */
|
|
97
|
+
--baht-red-600: #8E3020; /* error ink on the light tint */
|
|
98
|
+
--baht-red-700: #6E2517;
|
|
99
|
+
--baht-red-900: #2A0C08; /* content on red-300 */
|
|
100
|
+
|
|
101
|
+
/* Info — steel blue */
|
|
60
102
|
--baht-slate-50: #E6ECF0;
|
|
103
|
+
--baht-slate-300: #8FB0C4; /* dark-mode info */
|
|
61
104
|
--baht-slate-500: #3B5A6E; /* info */
|
|
105
|
+
--baht-slate-900: #0F2028; /* content on slate-300 */
|
|
62
106
|
|
|
63
107
|
/* ---------- Theme tier (daisyUI-style knobs — THE flexible theming API) ----------
|
|
64
108
|
Override any of these on :root (or a wrapper, or inline style) and every
|
|
65
109
|
semantic token below derives from them. Hover/active/tint shades are
|
|
66
|
-
computed with color-mix, so one --baht-primary swap rethemes everything.
|
|
67
|
-
|
|
110
|
+
computed with color-mix, so one --baht-primary swap rethemes everything.
|
|
111
|
+
|
|
112
|
+
Distribution rule (the point of the retone): olive is a strong hue and may
|
|
113
|
+
not carry large surfaces. Data sits on base-100 (white), the page behind it
|
|
114
|
+
is base-200 (note paper), and olive appears in three places only — table
|
|
115
|
+
header, primary button, active nav. */
|
|
116
|
+
--baht-base-100: #FFFFFF; /* surfaces: cards, tables, inputs, modals */
|
|
68
117
|
--baht-base-200: var(--baht-cream-100); /* page background */
|
|
69
|
-
--baht-base-300: var(--baht-cream-200); /* sunken wells, code chips */
|
|
118
|
+
--baht-base-300: var(--baht-cream-200); /* sunken wells, rails, code chips */
|
|
70
119
|
--baht-base-content: var(--baht-gray-900);
|
|
120
|
+
--baht-row-alt: var(--baht-cream-100); /* zebra rows: a 2% step off the surface, not 10% */
|
|
71
121
|
|
|
72
122
|
--baht-primary: var(--baht-green-600);
|
|
73
123
|
--baht-primary-content: #FFFFFF;
|
|
74
|
-
--baht-secondary: var(--baht-
|
|
124
|
+
--baht-secondary: var(--baht-rose-500);
|
|
75
125
|
--baht-secondary-content: #FFFFFF;
|
|
76
126
|
--baht-accent: var(--baht-gold-500);
|
|
77
|
-
--baht-accent-content:
|
|
78
|
-
--baht-neutral: var(--baht-
|
|
79
|
-
--baht-neutral-content:
|
|
127
|
+
--baht-accent-content: #33280A;
|
|
128
|
+
--baht-neutral: var(--baht-green-800); /* deep olive: table header, inverse blocks */
|
|
129
|
+
--baht-neutral-content: #F2F0DC;
|
|
80
130
|
|
|
81
131
|
--baht-info: var(--baht-slate-500);
|
|
82
132
|
--baht-info-content: #FFFFFF;
|
|
83
133
|
--baht-success: var(--baht-green-600);
|
|
84
134
|
--baht-success-content: #FFFFFF;
|
|
85
|
-
--baht-warning: var(--baht-
|
|
86
|
-
--baht-warning-content: var(--baht-
|
|
135
|
+
--baht-warning: var(--baht-lime-500);
|
|
136
|
+
--baht-warning-content: var(--baht-lime-900);
|
|
87
137
|
--baht-error: var(--baht-red-500);
|
|
88
138
|
--baht-error-content: #FFFFFF;
|
|
89
139
|
|
|
140
|
+
/* Status tints — the pill pairs used for scanning a table column.
|
|
141
|
+
~12% tint with its own dark ink; the dot carries the saturated hue. */
|
|
142
|
+
--baht-success-tint: var(--baht-green-50);
|
|
143
|
+
--baht-success-ink: var(--baht-green-750);
|
|
144
|
+
--baht-success-dot: var(--baht-green-600);
|
|
145
|
+
--baht-warning-tint: var(--baht-gold-50);
|
|
146
|
+
--baht-warning-ink: var(--baht-gold-700);
|
|
147
|
+
--baht-warning-dot: var(--baht-gold-500);
|
|
148
|
+
--baht-error-tint: var(--baht-red-50);
|
|
149
|
+
--baht-error-ink: var(--baht-red-600);
|
|
150
|
+
--baht-error-dot: var(--baht-rose-500);
|
|
151
|
+
--baht-info-tint: var(--baht-slate-50);
|
|
152
|
+
--baht-info-ink: var(--baht-slate-500);
|
|
153
|
+
--baht-info-dot: var(--baht-slate-500);
|
|
154
|
+
|
|
90
155
|
/* ---------- Semantic colors (stable names components consume) ---------- */
|
|
91
156
|
--baht-color-bg: var(--baht-base-200);
|
|
92
157
|
--baht-color-bg-elev: var(--baht-base-100);
|
|
@@ -94,7 +159,8 @@
|
|
|
94
159
|
--baht-color-bg-inverse: var(--baht-neutral);
|
|
95
160
|
|
|
96
161
|
--baht-color-surface: var(--baht-base-100);
|
|
97
|
-
--baht-color-surface-alt: var(--baht-
|
|
162
|
+
--baht-color-surface-alt: var(--baht-base-200);
|
|
163
|
+
--baht-color-row-alt: var(--baht-row-alt);
|
|
98
164
|
|
|
99
165
|
--baht-color-text: var(--baht-base-content);
|
|
100
166
|
--baht-color-text-muted: var(--baht-gray-600);
|
|
@@ -104,6 +170,7 @@
|
|
|
104
170
|
--baht-color-border: var(--baht-cream-300);
|
|
105
171
|
--baht-color-border-cool: var(--baht-gray-200);
|
|
106
172
|
--baht-color-border-strong: var(--baht-gray-300);
|
|
173
|
+
--baht-color-divider: var(--baht-gray-100);
|
|
107
174
|
|
|
108
175
|
--baht-color-primary: var(--baht-primary);
|
|
109
176
|
--baht-color-primary-hover: color-mix(in oklab, var(--baht-primary) 84%, black);
|
|
@@ -115,6 +182,11 @@
|
|
|
115
182
|
--baht-color-primary-wash-active: color-mix(in oklab, var(--baht-primary) 10%, transparent);
|
|
116
183
|
--baht-color-primary-contrast: var(--baht-primary-content);
|
|
117
184
|
|
|
185
|
+
--baht-color-secondary: var(--baht-secondary);
|
|
186
|
+
--baht-color-secondary-contrast: var(--baht-secondary-content);
|
|
187
|
+
--baht-color-accent: var(--baht-accent);
|
|
188
|
+
--baht-color-accent-contrast: var(--baht-accent-content);
|
|
189
|
+
|
|
118
190
|
--baht-color-success: var(--baht-success);
|
|
119
191
|
--baht-color-warning: var(--baht-warning);
|
|
120
192
|
--baht-color-danger: var(--baht-error);
|
|
@@ -125,6 +197,8 @@
|
|
|
125
197
|
--baht-color-link: color-mix(in oklab, var(--baht-primary) 90%, black);
|
|
126
198
|
--baht-color-focus: var(--baht-primary);
|
|
127
199
|
|
|
200
|
+
/* ink used by shadows and scrims — follows the theme, not a fixed black */
|
|
201
|
+
--baht-color-shadow-ink: 34, 51, 26;
|
|
128
202
|
/* ---------- Typography ---------- */
|
|
129
203
|
--baht-font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
|
|
130
204
|
--baht-font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
|
|
@@ -179,8 +253,8 @@
|
|
|
179
253
|
--baht-noise: 0; /* reserved: paper-grain overlay opacity */
|
|
180
254
|
|
|
181
255
|
/* ---------- Shadows (two elevations only, never inner) ---------- */
|
|
182
|
-
--baht-shadow-lift: 0 1px 2px rgba(
|
|
183
|
-
--baht-shadow-float: 0 4px 16px rgba(
|
|
256
|
+
--baht-shadow-lift: 0 1px 2px rgba(var(--baht-color-shadow-ink), 0.06), 0 4px 12px -2px rgba(var(--baht-color-shadow-ink), 0.08);
|
|
257
|
+
--baht-shadow-float: 0 4px 16px rgba(var(--baht-color-shadow-ink), 0.08), 0 24px 48px -8px rgba(var(--baht-color-shadow-ink), 0.12);
|
|
184
258
|
|
|
185
259
|
/* ---------- Motion ("paper" ease — quick start, gentle settle) ---------- */
|
|
186
260
|
--baht-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
|
|
@@ -196,6 +270,112 @@
|
|
|
196
270
|
--baht-field-gap: var(--baht-space-4);
|
|
197
271
|
}
|
|
198
272
|
|
|
273
|
+
/* ============================================================
|
|
274
|
+
Dark theme — "20baht-dark". Opt in with [data-baht-theme="dark"] (or the
|
|
275
|
+
.baht-dark class) on <html> or any wrapper. Default (no attribute) is
|
|
276
|
+
light — dark never activates from OS preference alone.
|
|
277
|
+
============================================================ */
|
|
278
|
+
|
|
279
|
+
[data-baht-theme='dark'],
|
|
280
|
+
.baht-dark {
|
|
281
|
+
/* The ramps re-anchor for a near-black canvas; every semantic token above
|
|
282
|
+
derives from them, so only the values that genuinely invert are listed. */
|
|
283
|
+
--baht-green-50: #1F2A16; /* success tint */
|
|
284
|
+
--baht-green-100: #24301A;
|
|
285
|
+
--baht-green-200: #2F4020;
|
|
286
|
+
--baht-green-300: #A9C598; /* success */
|
|
287
|
+
--baht-green-400: #9DB56A;
|
|
288
|
+
--baht-green-500: #94AE60;
|
|
289
|
+
--baht-green-600: #8FA85A; /* primary — brightens so the button still leads */
|
|
290
|
+
--baht-green-700: #A9C598;
|
|
291
|
+
--baht-green-750: #B7D096; /* success ink on the dark tint */
|
|
292
|
+
--baht-green-800: #2F4020; /* neutral */
|
|
293
|
+
--baht-green-900: #24301A;
|
|
294
|
+
--baht-green-950: #1B2A14;
|
|
295
|
+
|
|
296
|
+
--baht-cream-50: #E8E7D6; /* inverse ink */
|
|
297
|
+
--baht-cream-100: #121310;
|
|
298
|
+
--baht-cream-200: #1A1B16;
|
|
299
|
+
--baht-cream-300: #2A2C24;
|
|
300
|
+
--baht-cream-400: #3A3D33;
|
|
301
|
+
|
|
302
|
+
--baht-gray-50: #121310;
|
|
303
|
+
--baht-gray-100: #1A1B16;
|
|
304
|
+
--baht-gray-200: #2A2C24;
|
|
305
|
+
--baht-gray-300: #3A3D33;
|
|
306
|
+
--baht-gray-400: #6E7165;
|
|
307
|
+
--baht-gray-500: #8E9083;
|
|
308
|
+
--baht-gray-600: #C6C7BA;
|
|
309
|
+
--baht-gray-700: #D7D8CB;
|
|
310
|
+
--baht-gray-800: #E8E7D6;
|
|
311
|
+
--baht-gray-900: #F2F0DC;
|
|
312
|
+
|
|
313
|
+
--baht-rose-50: #33201B;
|
|
314
|
+
--baht-rose-100: #3A2620;
|
|
315
|
+
--baht-rose-200: #4A322B;
|
|
316
|
+
--baht-rose-300: #D9A398;
|
|
317
|
+
--baht-rose-400: #E4B6AC;
|
|
318
|
+
--baht-rose-500: #D9A398; /* secondary */
|
|
319
|
+
--baht-rose-600: #E4B6AC;
|
|
320
|
+
--baht-rose-700: #C58274;
|
|
321
|
+
--baht-rose-800: #75403A;
|
|
322
|
+
|
|
323
|
+
--baht-gold-50: #2C2717; /* warning tint */
|
|
324
|
+
--baht-gold-400: #E4D9A6;
|
|
325
|
+
--baht-gold-500: #D9B97A; /* accent */
|
|
326
|
+
--baht-gold-600: #C9A55C;
|
|
327
|
+
--baht-gold-700: #E4D9A6; /* warning ink on the dark tint */
|
|
328
|
+
|
|
329
|
+
--baht-lime-500: #CFCF7A; /* warning */
|
|
330
|
+
|
|
331
|
+
--baht-red-50: #33201B; /* error tint */
|
|
332
|
+
--baht-red-400: #F0B9AE;
|
|
333
|
+
--baht-red-500: #E08878; /* error */
|
|
334
|
+
--baht-red-600: #F0B9AE; /* error ink on the dark tint */
|
|
335
|
+
--baht-red-700: #C9705F;
|
|
336
|
+
|
|
337
|
+
--baht-slate-50: #1B262C; /* info tint */
|
|
338
|
+
--baht-slate-500: #8FB0C4; /* info */
|
|
339
|
+
|
|
340
|
+
/* Dark inverts one distribution rule: the card is *lighter* than the page
|
|
341
|
+
(surface base-100 over the base-200 app background). */
|
|
342
|
+
--baht-base-100: #1A1B16; /* surfaces: panels, tables, inputs, modals */
|
|
343
|
+
--baht-base-300: var(--baht-cream-300);
|
|
344
|
+
--baht-row-alt: #171813;
|
|
345
|
+
|
|
346
|
+
/* on a dark canvas every "content" colour flips from white to deep ink */
|
|
347
|
+
--baht-primary-content: var(--baht-green-950);
|
|
348
|
+
--baht-secondary-content: var(--baht-rose-900);
|
|
349
|
+
--baht-accent-content: var(--baht-gold-900);
|
|
350
|
+
--baht-neutral-content: #E8E7D6;
|
|
351
|
+
--baht-info-content: var(--baht-slate-900);
|
|
352
|
+
--baht-success: var(--baht-green-300);
|
|
353
|
+
--baht-success-content: var(--baht-green-950);
|
|
354
|
+
--baht-error-content: var(--baht-red-900);
|
|
355
|
+
--baht-error-dot: var(--baht-red-500);
|
|
356
|
+
|
|
357
|
+
--baht-color-surface-alt: #1F211A;
|
|
358
|
+
--baht-color-divider: #24261E;
|
|
359
|
+
|
|
360
|
+
/* the light-mode mixes lighten toward white and darken toward black; on a
|
|
361
|
+
dark canvas both directions flip, so re-derive them against the surface. */
|
|
362
|
+
--baht-color-primary-hover: color-mix(in oklab, var(--baht-primary) 88%, white);
|
|
363
|
+
--baht-color-primary-active: color-mix(in oklab, var(--baht-primary) 76%, white);
|
|
364
|
+
--baht-color-primary-tint: color-mix(in oklab, var(--baht-primary) 16%, var(--baht-base-100));
|
|
365
|
+
--baht-color-primary-wash: color-mix(in oklab, var(--baht-primary) 10%, transparent);
|
|
366
|
+
--baht-color-primary-wash-active: color-mix(in oklab, var(--baht-primary) 16%, transparent);
|
|
367
|
+
--baht-color-danger-hover: color-mix(in oklab, var(--baht-error) 88%, white);
|
|
368
|
+
--baht-color-link: var(--baht-green-300);
|
|
369
|
+
|
|
370
|
+
--baht-color-shadow-ink: 0, 0, 0;
|
|
371
|
+
--baht-shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -2px rgba(0, 0, 0, 0.5);
|
|
372
|
+
--baht-shadow-float: 0 4px 16px rgba(0, 0, 0, 0.5), 0 24px 48px -8px rgba(0, 0, 0, 0.6);
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
/* the surrounding page follows the theme too, when the host opts in */
|
|
376
|
+
[data-baht-theme] { color-scheme: light; }
|
|
377
|
+
[data-baht-theme='dark'], .baht-dark { color-scheme: dark; }
|
|
378
|
+
|
|
199
379
|
/* ============================================================
|
|
200
380
|
Structural styles (light DOM — override freely per app)
|
|
201
381
|
============================================================ */
|
|
@@ -437,18 +617,18 @@
|
|
|
437
617
|
}
|
|
438
618
|
.baht-badge-dot { width: 6px; height: 6px; border-radius: var(--baht-radius-pill); background: var(--baht-gray-500); }
|
|
439
619
|
|
|
440
|
-
.baht-badge--success { background: var(--baht-
|
|
441
|
-
.baht-badge--success .baht-badge-dot { background: var(--baht-
|
|
442
|
-
.baht-badge--danger { background: var(--baht-
|
|
443
|
-
.baht-badge--danger .baht-badge-dot { background: var(--baht-
|
|
444
|
-
.baht-badge--warning { background: var(--baht-
|
|
445
|
-
.baht-badge--warning .baht-badge-dot { background: var(--baht-
|
|
446
|
-
.baht-badge--info { background: var(--baht-
|
|
447
|
-
.baht-badge--info .baht-badge-dot { background: var(--baht-
|
|
620
|
+
.baht-badge--success { background: var(--baht-success-tint); color: var(--baht-success-ink); font-weight: 600; }
|
|
621
|
+
.baht-badge--success .baht-badge-dot { background: var(--baht-success-dot); }
|
|
622
|
+
.baht-badge--danger { background: var(--baht-error-tint); color: var(--baht-error-ink); font-weight: 600; }
|
|
623
|
+
.baht-badge--danger .baht-badge-dot { background: var(--baht-error-dot); }
|
|
624
|
+
.baht-badge--warning { background: var(--baht-warning-tint); color: var(--baht-warning-ink); font-weight: 600; }
|
|
625
|
+
.baht-badge--warning .baht-badge-dot { background: var(--baht-warning-dot); }
|
|
626
|
+
.baht-badge--info { background: var(--baht-info-tint); color: var(--baht-info-ink); font-weight: 600; }
|
|
627
|
+
.baht-badge--info .baht-badge-dot { background: var(--baht-info-dot); }
|
|
448
628
|
|
|
449
629
|
.baht-badge--outline { background: var(--baht-color-surface); border: 1px solid var(--baht-color-border-cool); color: var(--baht-color-text); padding: 4px 10px; }
|
|
450
630
|
.baht-badge--solid { background: var(--baht-color-primary); color: var(--baht-color-primary-contrast); padding: 4px 10px; }
|
|
451
|
-
.baht-badge--gold { background: var(--baht-
|
|
631
|
+
.baht-badge--gold { background: var(--baht-color-accent); color: var(--baht-color-accent-contrast); padding: 4px 10px; } /* white on gold = 2.3:1 */
|
|
452
632
|
.baht-badge--inverse { background: var(--baht-color-bg-inverse); color: var(--baht-color-text-inverse); padding: 4px 10px; }
|
|
453
633
|
.baht-badge--mono { font-family: var(--baht-font-mono); font-size: 0.6875rem; padding: 4px 8px; background: var(--baht-color-bg-sunken); color: var(--baht-gray-700); }
|
|
454
634
|
|
|
@@ -469,7 +649,7 @@ code.baht-code {
|
|
|
469
649
|
.baht-code--block {
|
|
470
650
|
display: block;
|
|
471
651
|
background: var(--baht-color-bg-inverse);
|
|
472
|
-
color: var(--baht-
|
|
652
|
+
color: var(--baht-color-text-inverse);
|
|
473
653
|
padding: var(--baht-space-4);
|
|
474
654
|
border-radius: var(--baht-radius-md);
|
|
475
655
|
font-size: var(--baht-text-xs);
|
|
@@ -530,7 +710,7 @@ code.baht-code {
|
|
|
530
710
|
color: var(--baht-red-600);
|
|
531
711
|
border-color: var(--baht-red-500);
|
|
532
712
|
}
|
|
533
|
-
.baht-button--reject:hover { background: var(--baht-
|
|
713
|
+
.baht-button--reject:hover { background: var(--baht-error-tint); }
|
|
534
714
|
|
|
535
715
|
/* ============================================================
|
|
536
716
|
Data — table & list (server-side paging: host fetches per page)
|
|
@@ -556,9 +736,9 @@ code.baht-code {
|
|
|
556
736
|
white-space: nowrap;
|
|
557
737
|
}
|
|
558
738
|
.baht-table th.baht-table-index { width: 56px; text-align: center; }
|
|
559
|
-
.baht-table td { padding: 12px var(--baht-space-4); border-top: 1px solid var(--baht-color-
|
|
739
|
+
.baht-table td { padding: 12px var(--baht-space-4); border-top: 1px solid var(--baht-color-divider); }
|
|
560
740
|
.baht-table td.baht-table-index { text-align: center; color: var(--baht-color-text-subtle); }
|
|
561
|
-
.baht-table tbody tr:nth-child(even) { background: var(--baht-
|
|
741
|
+
.baht-table tbody tr:nth-child(even) { background: var(--baht-color-row-alt); }
|
|
562
742
|
.baht-table tbody tr[tabindex]:hover { background: var(--baht-color-primary-tint); cursor: pointer; }
|
|
563
743
|
.baht-table tbody tr[tabindex]:focus-visible { outline: 2px solid var(--baht-color-focus); outline-offset: -2px; }
|
|
564
744
|
.baht-table-state { padding: var(--baht-space-8); text-align: center; color: var(--baht-color-text-muted); }
|
|
@@ -577,13 +757,13 @@ code.baht-code {
|
|
|
577
757
|
font-family: var(--baht-font-family); font-size: var(--baht-text-sm);
|
|
578
758
|
cursor: pointer;
|
|
579
759
|
}
|
|
580
|
-
.baht-table-picker-toggle:hover { background: var(--baht-
|
|
760
|
+
.baht-table-picker-toggle:hover { background: var(--baht-color-primary-wash); }
|
|
581
761
|
.baht-table-picker-toggle[aria-expanded='true'] { border-color: var(--baht-color-primary); }
|
|
582
762
|
|
|
583
763
|
/* Dual-list "Personalize List Columns" modal (Available/Selected + move buttons). */
|
|
584
764
|
.baht-table-picker-scrim {
|
|
585
765
|
position: fixed; inset: 0; z-index: 1000;
|
|
586
|
-
background: rgba(
|
|
766
|
+
background: rgba(var(--baht-color-shadow-ink), 0.4);
|
|
587
767
|
display: flex; align-items: center; justify-content: center;
|
|
588
768
|
padding: var(--baht-space-6);
|
|
589
769
|
animation: baht-fade-in var(--baht-dur-base) var(--baht-ease);
|
|
@@ -633,7 +813,7 @@ code.baht-code {
|
|
|
633
813
|
font-family: var(--baht-font-family); font-size: var(--baht-text-sm);
|
|
634
814
|
cursor: pointer;
|
|
635
815
|
}
|
|
636
|
-
.baht-table-picker-btns button:hover:not(:disabled) { background: var(--baht-
|
|
816
|
+
.baht-table-picker-btns button:hover:not(:disabled) { background: var(--baht-color-primary-wash); }
|
|
637
817
|
.baht-table-picker-btns button:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
638
818
|
.baht-table-picker-modal-foot {
|
|
639
819
|
display: flex; align-items: center; gap: var(--baht-space-2);
|
|
@@ -648,7 +828,7 @@ code.baht-code {
|
|
|
648
828
|
font-family: var(--baht-font-family); font-size: var(--baht-text-sm);
|
|
649
829
|
cursor: pointer;
|
|
650
830
|
}
|
|
651
|
-
.baht-table-picker-modal-foot button:hover { background: var(--baht-
|
|
831
|
+
.baht-table-picker-modal-foot button:hover { background: var(--baht-color-primary-wash); }
|
|
652
832
|
.baht-table-picker-ok {
|
|
653
833
|
background: var(--baht-color-primary) !important; color: var(--baht-color-text-inverse) !important;
|
|
654
834
|
border-color: var(--baht-color-primary) !important;
|
|
@@ -672,7 +852,7 @@ code.baht-code {
|
|
|
672
852
|
|
|
673
853
|
.baht-skeleton {
|
|
674
854
|
display: block;
|
|
675
|
-
background: var(--baht-
|
|
855
|
+
background: var(--baht-color-bg-sunken);
|
|
676
856
|
border-radius: var(--baht-radius-sm);
|
|
677
857
|
animation: baht-pulse 1.4s var(--baht-ease) infinite;
|
|
678
858
|
}
|
|
@@ -719,7 +899,7 @@ code.baht-code {
|
|
|
719
899
|
|
|
720
900
|
.baht-modal-scrim {
|
|
721
901
|
position: fixed; inset: 0; z-index: 1000;
|
|
722
|
-
background: rgba(
|
|
902
|
+
background: rgba(var(--baht-color-shadow-ink), 0.4);
|
|
723
903
|
display: flex; align-items: center; justify-content: center;
|
|
724
904
|
padding: var(--baht-space-6);
|
|
725
905
|
animation: baht-fade-in var(--baht-dur-base) var(--baht-ease);
|
|
@@ -847,7 +1027,7 @@ code.baht-code {
|
|
|
847
1027
|
|
|
848
1028
|
.baht-progress {
|
|
849
1029
|
display: block; width: 100%; height: 8px;
|
|
850
|
-
background: var(--baht-
|
|
1030
|
+
background: var(--baht-color-bg-sunken); border-radius: var(--baht-radius-pill);
|
|
851
1031
|
overflow: hidden;
|
|
852
1032
|
}
|
|
853
1033
|
.baht-progress-bar {
|
|
@@ -1056,7 +1236,7 @@ code.baht-code {
|
|
|
1056
1236
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
1057
1237
|
text-align: right; font-size: var(--baht-text-sm); color: var(--baht-color-text-muted);
|
|
1058
1238
|
}
|
|
1059
|
-
.baht-bar-chart-track { height: 20px; flex: 1; overflow: hidden; border-radius: var(--baht-radius-sm); background: var(--baht-
|
|
1239
|
+
.baht-bar-chart-track { height: 20px; flex: 1; overflow: hidden; border-radius: var(--baht-radius-sm); background: var(--baht-color-bg-sunken); }
|
|
1060
1240
|
.baht-bar-chart-bar { height: 100%; border-radius: var(--baht-radius-sm); }
|
|
1061
1241
|
.baht-bar-chart-count { width: 2.5rem; font-size: var(--baht-text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
|
|
1062
1242
|
|
|
@@ -1126,7 +1306,7 @@ code.baht-code {
|
|
|
1126
1306
|
border: none; background: none; border-radius: var(--baht-radius-sm);
|
|
1127
1307
|
color: var(--baht-color-text-subtle); cursor: pointer;
|
|
1128
1308
|
}
|
|
1129
|
-
.baht-refpicker-clear:hover { color: var(--baht-color-text); background: var(--baht-
|
|
1309
|
+
.baht-refpicker-clear:hover { color: var(--baht-color-text); background: var(--baht-color-primary-wash); }
|
|
1130
1310
|
.baht-refpicker-lookup,
|
|
1131
1311
|
.baht-refpicker-open {
|
|
1132
1312
|
display: inline-flex; align-items: center; justify-content: center;
|
|
@@ -1136,7 +1316,7 @@ code.baht-code {
|
|
|
1136
1316
|
color: var(--baht-color-text-muted);
|
|
1137
1317
|
cursor: pointer;
|
|
1138
1318
|
}
|
|
1139
|
-
.baht-refpicker-lookup:hover, .baht-refpicker-open:hover { background: var(--baht-
|
|
1319
|
+
.baht-refpicker-lookup:hover, .baht-refpicker-open:hover { background: var(--baht-color-primary-wash); color: var(--baht-color-text); }
|
|
1140
1320
|
.baht-refpicker-lookup:disabled { cursor: not-allowed; opacity: 0.5; }
|
|
1141
1321
|
.baht-refpicker > :last-child:not(.baht-refpicker-list):not(.baht-refpicker-field) {
|
|
1142
1322
|
border-top-right-radius: var(--baht-radius-field); border-bottom-right-radius: var(--baht-radius-field);
|
package/dist/web-types.json
CHANGED