barua-ui 0.2.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 +107 -0
- package/css/barua.css +28 -0
- package/css/base.css +242 -0
- package/css/components/actions.css +371 -0
- package/css/components/auth.css +237 -0
- package/css/components/charts.css +370 -0
- package/css/components/content.css +802 -0
- package/css/components/control-center.css +370 -0
- package/css/components/feedback.css +364 -0
- package/css/components/forms.css +511 -0
- package/css/components/marketing.css +280 -0
- package/css/components/media.css +321 -0
- package/css/components/mobile.css +177 -0
- package/css/components/nav.css +682 -0
- package/css/components/overlays.css +574 -0
- package/css/components/productivity.css +525 -0
- package/css/components/specialized.css +367 -0
- package/css/liquid.css +213 -0
- package/css/tokens.css +365 -0
- package/css/utilities.css +507 -0
- package/dist/index.cjs +2750 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +1106 -0
- package/dist/index.d.ts +1106 -0
- package/dist/index.js +2462 -0
- package/dist/index.js.map +1 -0
- package/package.json +66 -0
package/css/tokens.css
ADDED
|
@@ -0,0 +1,365 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
Barua UI — Design Tokens
|
|
3
|
+
Apple-derived palette & metrics, Barua blue accent, glass materials.
|
|
4
|
+
Theming: modern `light-dark()` — set data-theme="light|dark" on <html>,
|
|
5
|
+
or leave unset to follow the system.
|
|
6
|
+
========================================================================== */
|
|
7
|
+
|
|
8
|
+
@layer tokens {
|
|
9
|
+
:root {
|
|
10
|
+
color-scheme: light dark;
|
|
11
|
+
|
|
12
|
+
/* ------------------------------------------------------------------ *
|
|
13
|
+
* Color — accent (Barua blue)
|
|
14
|
+
* ------------------------------------------------------------------ */
|
|
15
|
+
--b-blue-50: #eaf2ff;
|
|
16
|
+
--b-blue-100: #d7e6ff;
|
|
17
|
+
--b-blue-200: #adcdff;
|
|
18
|
+
--b-blue-300: #7db0ff;
|
|
19
|
+
--b-blue-400: #4293ff;
|
|
20
|
+
--b-blue-500: #0a7aff; /* base — Barua blue */
|
|
21
|
+
--b-blue-600: #0066e0;
|
|
22
|
+
--b-blue-700: #0052b4;
|
|
23
|
+
--b-blue-800: #003d87;
|
|
24
|
+
--b-blue-900: #002a5c;
|
|
25
|
+
|
|
26
|
+
--b-color-accent: light-dark(#0a7aff, #0a84ff);
|
|
27
|
+
--b-color-accent-hover: light-dark(#0066e0, #3395ff);
|
|
28
|
+
--b-color-accent-active: light-dark(#0052b4, #66afff);
|
|
29
|
+
--b-color-accent-soft: light-dark(rgba(10, 122, 255, 0.12), rgba(10, 132, 255, 0.18));
|
|
30
|
+
--b-color-accent-text: light-dark(#0066e0, #6cb2ff);
|
|
31
|
+
--b-color-on-accent: #ffffff;
|
|
32
|
+
|
|
33
|
+
/* ------------------------------------------------------------------ *
|
|
34
|
+
* Color — Apple system palette
|
|
35
|
+
* ------------------------------------------------------------------ */
|
|
36
|
+
--b-color-red: light-dark(#ff3b30, #ff453a);
|
|
37
|
+
--b-color-orange: light-dark(#ff9500, #ff9f0a);
|
|
38
|
+
--b-color-yellow: light-dark(#ffcc00, #ffd60a);
|
|
39
|
+
--b-color-green: light-dark(#34c759, #30d158);
|
|
40
|
+
--b-color-mint: light-dark(#00c7be, #63e6e2);
|
|
41
|
+
--b-color-teal: light-dark(#30b0c7, #40cbe0);
|
|
42
|
+
--b-color-cyan: light-dark(#32ade6, #64d2ff);
|
|
43
|
+
--b-color-blue: var(--b-color-accent);
|
|
44
|
+
--b-color-indigo: light-dark(#5856d6, #5e5ce6);
|
|
45
|
+
--b-color-purple: light-dark(#af52de, #bf5af2);
|
|
46
|
+
--b-color-pink: light-dark(#ff2d55, #ff375f);
|
|
47
|
+
--b-color-brown: light-dark(#a2845e, #ac8e68);
|
|
48
|
+
|
|
49
|
+
--b-color-red-soft: light-dark(rgba(255, 59, 48, 0.12), rgba(255, 69, 58, 0.18));
|
|
50
|
+
--b-color-orange-soft: light-dark(rgba(255, 149, 0, 0.14), rgba(255, 159, 10, 0.18));
|
|
51
|
+
--b-color-yellow-soft: light-dark(rgba(255, 204, 0, 0.18), rgba(255, 214, 10, 0.18));
|
|
52
|
+
--b-color-green-soft: light-dark(rgba(52, 199, 89, 0.14), rgba(48, 209, 88, 0.18));
|
|
53
|
+
--b-color-indigo-soft: light-dark(rgba(88, 86, 214, 0.12), rgba(94, 92, 230, 0.18));
|
|
54
|
+
--b-color-purple-soft: light-dark(rgba(175, 82, 222, 0.12), rgba(191, 90, 242, 0.18));
|
|
55
|
+
--b-color-pink-soft: light-dark(rgba(255, 45, 85, 0.12), rgba(255, 55, 95, 0.18));
|
|
56
|
+
|
|
57
|
+
/* Semantic aliases */
|
|
58
|
+
--b-color-success: var(--b-color-green);
|
|
59
|
+
--b-color-warning: var(--b-color-orange);
|
|
60
|
+
--b-color-danger: var(--b-color-red);
|
|
61
|
+
--b-color-info: var(--b-color-accent);
|
|
62
|
+
--b-color-success-soft: var(--b-color-green-soft);
|
|
63
|
+
--b-color-warning-soft: var(--b-color-orange-soft);
|
|
64
|
+
--b-color-danger-soft: var(--b-color-red-soft);
|
|
65
|
+
--b-color-info-soft: var(--b-color-accent-soft);
|
|
66
|
+
|
|
67
|
+
/* ------------------------------------------------------------------ *
|
|
68
|
+
* Color — grays (Apple systemGray 1–6)
|
|
69
|
+
* ------------------------------------------------------------------ */
|
|
70
|
+
--b-gray-1: light-dark(#8e8e93, #8e8e93);
|
|
71
|
+
--b-gray-2: light-dark(#aeaeb2, #636366);
|
|
72
|
+
--b-gray-3: light-dark(#c7c7cc, #48484a);
|
|
73
|
+
--b-gray-4: light-dark(#d1d1d6, #3a3a3c);
|
|
74
|
+
--b-gray-5: light-dark(#e5e5ea, #2c2c2e);
|
|
75
|
+
--b-gray-6: light-dark(#f2f2f7, #1c1c1e);
|
|
76
|
+
|
|
77
|
+
/* ------------------------------------------------------------------ *
|
|
78
|
+
* Color — backgrounds & surfaces
|
|
79
|
+
* ------------------------------------------------------------------ */
|
|
80
|
+
--b-bg: light-dark(#f5f5f9, #101014); /* app canvas */
|
|
81
|
+
--b-bg-secondary: light-dark(#ececf2, #1c1c21);
|
|
82
|
+
--b-surface: light-dark(#ffffff, #1c1c21); /* cards, fields */
|
|
83
|
+
--b-surface-2: light-dark(#f6f6fa, #26262c); /* nested surface */
|
|
84
|
+
--b-surface-3: light-dark(#ececf2, #303038);
|
|
85
|
+
--b-elevated: light-dark(#ffffff, #2a2a31); /* overlays, menus */
|
|
86
|
+
--b-scrim: light-dark(rgba(16, 18, 26, 0.4), rgba(0, 0, 0, 0.55));
|
|
87
|
+
|
|
88
|
+
/* ------------------------------------------------------------------ *
|
|
89
|
+
* Color — text (Apple label hierarchy)
|
|
90
|
+
* ------------------------------------------------------------------ */
|
|
91
|
+
--b-text: light-dark(rgba(10, 12, 20, 0.92), rgba(245, 246, 250, 0.96));
|
|
92
|
+
--b-text-secondary: light-dark(rgba(20, 24, 38, 0.62), rgba(235, 235, 245, 0.64));
|
|
93
|
+
--b-text-tertiary: light-dark(rgba(20, 24, 38, 0.40), rgba(235, 235, 245, 0.42));
|
|
94
|
+
--b-text-quaternary: light-dark(rgba(20, 24, 38, 0.22), rgba(235, 235, 245, 0.24));
|
|
95
|
+
|
|
96
|
+
/* ------------------------------------------------------------------ *
|
|
97
|
+
* Color — fills & separators
|
|
98
|
+
* ------------------------------------------------------------------ */
|
|
99
|
+
--b-fill: light-dark(rgba(120, 122, 140, 0.16), rgba(120, 120, 128, 0.30));
|
|
100
|
+
--b-fill-secondary: light-dark(rgba(120, 122, 140, 0.12), rgba(120, 120, 128, 0.24));
|
|
101
|
+
--b-fill-tertiary: light-dark(rgba(120, 122, 140, 0.08), rgba(118, 118, 128, 0.18));
|
|
102
|
+
--b-fill-quaternary: light-dark(rgba(120, 122, 140, 0.05), rgba(118, 118, 128, 0.12));
|
|
103
|
+
--b-border: light-dark(rgba(20, 24, 38, 0.12), rgba(235, 235, 245, 0.14));
|
|
104
|
+
--b-border-strong: light-dark(rgba(20, 24, 38, 0.22), rgba(235, 235, 245, 0.26));
|
|
105
|
+
--b-separator: light-dark(rgba(20, 24, 38, 0.09), rgba(235, 235, 245, 0.10));
|
|
106
|
+
--b-hairline: light-dark(rgba(20, 24, 38, 0.10), rgba(255, 255, 255, 0.09));
|
|
107
|
+
|
|
108
|
+
/* ------------------------------------------------------------------ *
|
|
109
|
+
* Materials — Liquid Glass (Apple-inspired multi-layer material)
|
|
110
|
+
*
|
|
111
|
+
* Each glass level composes:
|
|
112
|
+
* 1. Background tint (the colored glass body)
|
|
113
|
+
* 2. Backdrop filter (blur + saturation)
|
|
114
|
+
* 3. Specular edge (top light catch — inset shadow)
|
|
115
|
+
* 4. Lensing shadow (depth + light concentration)
|
|
116
|
+
* 5. Ambient rim (subtle outer glow from surrounding content)
|
|
117
|
+
* ------------------------------------------------------------------ */
|
|
118
|
+
|
|
119
|
+
/* Background tints — the glass body color */
|
|
120
|
+
--b-material-ultrathin-bg: light-dark(rgba(255, 255, 255, 0.22), rgba(30, 30, 36, 0.25));
|
|
121
|
+
--b-material-thin-bg: light-dark(rgba(255, 255, 255, 0.38), rgba(30, 30, 36, 0.40));
|
|
122
|
+
--b-material-regular-bg: light-dark(rgba(252, 252, 254, 0.55), rgba(30, 30, 36, 0.55));
|
|
123
|
+
--b-material-thick-bg: light-dark(rgba(250, 250, 253, 0.72), rgba(28, 28, 34, 0.74));
|
|
124
|
+
--b-material-chrome-bg: light-dark(rgba(248, 249, 252, 0.62), rgba(22, 22, 27, 0.66));
|
|
125
|
+
--b-material-accent-bg: light-dark(rgba(10, 122, 255, 0.10), rgba(10, 132, 255, 0.14));
|
|
126
|
+
|
|
127
|
+
/* Neutral material — the only one that is not theme-locked. A mid-grey
|
|
128
|
+
veil lightens a dark backdrop and darkens a light one by the same step,
|
|
129
|
+
so a surface built on it reads correctly over any wallpaper, photo or
|
|
130
|
+
artwork instead of assuming the page behind it. */
|
|
131
|
+
--b-material-neutral-bg: rgba(128, 128, 128, 0.26);
|
|
132
|
+
--b-material-neutral-edge: rgba(128, 128, 128, 0.40);
|
|
133
|
+
|
|
134
|
+
/* Blur + saturation filters */
|
|
135
|
+
--b-glass: blur(var(--b-blur-lg)) saturate(1.9);
|
|
136
|
+
--b-glass-light: blur(var(--b-blur-sm)) saturate(1.7);
|
|
137
|
+
--b-glass-heavy: blur(var(--b-blur-xl)) saturate(2.1);
|
|
138
|
+
|
|
139
|
+
/* Specular edge — the bright light catch at the top of a glass pane */
|
|
140
|
+
--b-glass-edge: inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.10)),
|
|
141
|
+
inset 0 0 0 1px light-dark(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04));
|
|
142
|
+
|
|
143
|
+
/* Lensing — deeper shadow that simulates light concentration through glass.
|
|
144
|
+
The gradient creates a subtle "bent light" effect at the bottom edge. */
|
|
145
|
+
--b-glass-lensing: inset 0 -1px 2px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.12)),
|
|
146
|
+
inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.06));
|
|
147
|
+
|
|
148
|
+
/* Ambient rim — soft outer glow suggesting light spill from surrounding content */
|
|
149
|
+
--b-glass-ambient: 0 0 0 1px light-dark(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
|
|
150
|
+
0 1px 3px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.18)),
|
|
151
|
+
0 4px 12px light-dark(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.12));
|
|
152
|
+
|
|
153
|
+
/* Composite shadow — combines lensing + ambient for full Liquid Glass depth */
|
|
154
|
+
--b-glass-shadow: var(--b-glass-lensing), var(--b-glass-ambient);
|
|
155
|
+
|
|
156
|
+
/* Tint — vibrant color overlay for accent/prominent glass elements.
|
|
157
|
+
Mimics Apple's colored glass where content brightness underneath
|
|
158
|
+
influences the tint tone. */
|
|
159
|
+
--b-glass-tint: light-dark(rgba(10, 122, 255, 0.08), rgba(10, 132, 255, 0.12));
|
|
160
|
+
--b-glass-tint-strong: light-dark(rgba(10, 122, 255, 0.14), rgba(10, 132, 255, 0.20));
|
|
161
|
+
|
|
162
|
+
/* Shimmer — the light flash on interactive press (Apple's "energize" effect) */
|
|
163
|
+
--b-glass-shimmer: linear-gradient(
|
|
164
|
+
105deg,
|
|
165
|
+
transparent 40%,
|
|
166
|
+
light-dark(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.10)) 45%,
|
|
167
|
+
light-dark(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.15)) 50%,
|
|
168
|
+
light-dark(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.10)) 55%,
|
|
169
|
+
transparent 60%
|
|
170
|
+
);
|
|
171
|
+
|
|
172
|
+
/* ------------------------------------------------------------------ *
|
|
173
|
+
* Typography — SF-first stack, Apple HIG scale
|
|
174
|
+
* ------------------------------------------------------------------ */
|
|
175
|
+
--b-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
|
|
176
|
+
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
177
|
+
--b-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
|
|
178
|
+
"Liberation Mono", monospace;
|
|
179
|
+
--b-font-rounded: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Rounded",
|
|
180
|
+
"Segoe UI", Roboto, sans-serif;
|
|
181
|
+
|
|
182
|
+
--b-text-caption2: 0.6875rem; /* 11 */
|
|
183
|
+
--b-text-caption: 0.75rem; /* 12 */
|
|
184
|
+
--b-text-footnote: 0.8125rem; /* 13 */
|
|
185
|
+
--b-text-subheadline: 0.9375rem; /* 15 */
|
|
186
|
+
--b-text-callout: 1rem; /* 16 */
|
|
187
|
+
--b-text-body: 1.0625rem; /* 17 */
|
|
188
|
+
--b-text-headline: 1.0625rem; /* 17 / 600 */
|
|
189
|
+
--b-text-title3: 1.25rem; /* 20 */
|
|
190
|
+
--b-text-title2: 1.375rem; /* 22 */
|
|
191
|
+
--b-text-title1: 1.75rem; /* 28 */
|
|
192
|
+
--b-text-large-title: 2.125rem; /* 34 */
|
|
193
|
+
--b-text-display: 3rem; /* 48 */
|
|
194
|
+
|
|
195
|
+
--b-leading-tight: 1.2;
|
|
196
|
+
--b-leading-snug: 1.35;
|
|
197
|
+
--b-leading-body: 1.5;
|
|
198
|
+
--b-leading-loose: 1.65;
|
|
199
|
+
|
|
200
|
+
--b-weight-regular: 400;
|
|
201
|
+
--b-weight-medium: 500;
|
|
202
|
+
--b-weight-semibold: 600;
|
|
203
|
+
--b-weight-bold: 700;
|
|
204
|
+
|
|
205
|
+
--b-tracking-tight: -0.022em; /* large titles */
|
|
206
|
+
--b-tracking-text: -0.011em; /* body */
|
|
207
|
+
--b-tracking-small: 0.006em; /* footnotes, captions — small text opens up */
|
|
208
|
+
--b-tracking-wide: 0.06em; /* overlines, labels */
|
|
209
|
+
|
|
210
|
+
/* ------------------------------------------------------------------ *
|
|
211
|
+
* Spacing — 4px base scale
|
|
212
|
+
* ------------------------------------------------------------------ */
|
|
213
|
+
--b-space-0: 0;
|
|
214
|
+
--b-space-1: 0.25rem; /* 4 */
|
|
215
|
+
--b-space-2: 0.5rem; /* 8 */
|
|
216
|
+
--b-space-3: 0.75rem; /* 12 */
|
|
217
|
+
--b-space-4: 1rem; /* 16 */
|
|
218
|
+
--b-space-5: 1.25rem; /* 20 */
|
|
219
|
+
--b-space-6: 1.5rem; /* 24 */
|
|
220
|
+
--b-space-8: 2rem; /* 32 */
|
|
221
|
+
--b-space-10: 2.5rem; /* 40 */
|
|
222
|
+
--b-space-12: 3rem; /* 48 */
|
|
223
|
+
--b-space-16: 4rem; /* 64 */
|
|
224
|
+
--b-space-20: 5rem; /* 80 */
|
|
225
|
+
--b-space-24: 6rem; /* 96 */
|
|
226
|
+
|
|
227
|
+
/* ------------------------------------------------------------------ *
|
|
228
|
+
* Radius — Apple-style continuous feel
|
|
229
|
+
* ------------------------------------------------------------------ */
|
|
230
|
+
--b-radius-xs: 0.25rem; /* 4 */
|
|
231
|
+
--b-radius-sm: 0.375rem; /* 6 */
|
|
232
|
+
--b-radius-md: 0.625rem; /* 10 */
|
|
233
|
+
--b-radius-lg: 0.875rem; /* 14 */
|
|
234
|
+
--b-radius-xl: 1.25rem; /* 20 */
|
|
235
|
+
--b-radius-2xl: 1.75rem; /* 28 */
|
|
236
|
+
--b-radius-full: 9999px;
|
|
237
|
+
|
|
238
|
+
/* ------------------------------------------------------------------ *
|
|
239
|
+
* Elevation — layered soft shadows (+ hairline ring)
|
|
240
|
+
* ------------------------------------------------------------------ */
|
|
241
|
+
--b-shadow-color: light-dark(rgba(18, 22, 34, 1), rgba(0, 0, 0, 1));
|
|
242
|
+
--b-ring: 0 0 0 1px var(--b-hairline);
|
|
243
|
+
--b-shadow-xs: 0 1px 2px color-mix(in srgb, var(--b-shadow-color) 6%, transparent);
|
|
244
|
+
--b-shadow-sm: 0 1px 2px color-mix(in srgb, var(--b-shadow-color) 5%, transparent),
|
|
245
|
+
0 2px 8px color-mix(in srgb, var(--b-shadow-color) 6%, transparent);
|
|
246
|
+
--b-shadow-md: 0 2px 6px color-mix(in srgb, var(--b-shadow-color) 5%, transparent),
|
|
247
|
+
0 8px 24px color-mix(in srgb, var(--b-shadow-color) 9%, transparent);
|
|
248
|
+
--b-shadow-lg: 0 4px 12px color-mix(in srgb, var(--b-shadow-color) 6%, transparent),
|
|
249
|
+
0 16px 48px color-mix(in srgb, var(--b-shadow-color) 14%, transparent);
|
|
250
|
+
--b-shadow-xl: 0 8px 24px color-mix(in srgb, var(--b-shadow-color) 8%, transparent),
|
|
251
|
+
0 32px 80px color-mix(in srgb, var(--b-shadow-color) 20%, transparent);
|
|
252
|
+
--b-shadow-accent: 0 4px 16px color-mix(in srgb, var(--b-color-accent) 35%, transparent);
|
|
253
|
+
|
|
254
|
+
--b-elevation-0: none;
|
|
255
|
+
--b-elevation-1: var(--b-ring), var(--b-shadow-xs);
|
|
256
|
+
--b-elevation-2: var(--b-ring), var(--b-shadow-sm);
|
|
257
|
+
--b-elevation-3: var(--b-ring), var(--b-shadow-md);
|
|
258
|
+
--b-elevation-4: var(--b-ring), var(--b-shadow-lg);
|
|
259
|
+
--b-elevation-5: var(--b-ring), var(--b-shadow-xl);
|
|
260
|
+
|
|
261
|
+
/* ------------------------------------------------------------------ *
|
|
262
|
+
* Opacity & blur scales
|
|
263
|
+
* ------------------------------------------------------------------ */
|
|
264
|
+
--b-opacity-disabled: 0.4;
|
|
265
|
+
--b-opacity-muted: 0.6;
|
|
266
|
+
--b-opacity-hover: 0.85;
|
|
267
|
+
--b-blur-xs: 4px;
|
|
268
|
+
--b-blur-sm: 8px;
|
|
269
|
+
--b-blur-md: 16px;
|
|
270
|
+
--b-blur-lg: 24px;
|
|
271
|
+
--b-blur-xl: 40px;
|
|
272
|
+
|
|
273
|
+
/* ------------------------------------------------------------------ *
|
|
274
|
+
* Motion — Apple-feel curves
|
|
275
|
+
* ------------------------------------------------------------------ */
|
|
276
|
+
--b-duration-instant: 100ms;
|
|
277
|
+
--b-duration-fast: 150ms;
|
|
278
|
+
--b-duration-normal: 250ms;
|
|
279
|
+
--b-duration-slow: 350ms;
|
|
280
|
+
--b-duration-slower: 500ms;
|
|
281
|
+
--b-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
|
|
282
|
+
--b-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
|
283
|
+
--b-ease-in: cubic-bezier(0.55, 0, 1, 0.45);
|
|
284
|
+
--b-ease-spring: cubic-bezier(0.32, 0.72, 0, 1); /* Apple sheet slide */
|
|
285
|
+
--b-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot */
|
|
286
|
+
|
|
287
|
+
/* ------------------------------------------------------------------ *
|
|
288
|
+
* Layers (z-index)
|
|
289
|
+
* ------------------------------------------------------------------ */
|
|
290
|
+
--b-z-raised: 10;
|
|
291
|
+
--b-z-sticky: 100;
|
|
292
|
+
--b-z-topbar: 200;
|
|
293
|
+
--b-z-drawer: 300;
|
|
294
|
+
--b-z-overlay: 400;
|
|
295
|
+
--b-z-modal: 500;
|
|
296
|
+
--b-z-popover: 600;
|
|
297
|
+
--b-z-toast: 700;
|
|
298
|
+
--b-z-tooltip: 800;
|
|
299
|
+
|
|
300
|
+
/* ------------------------------------------------------------------ *
|
|
301
|
+
* Component metrics
|
|
302
|
+
* ------------------------------------------------------------------ */
|
|
303
|
+
--b-control-h-xs: 1.5rem; /* 24 */
|
|
304
|
+
--b-control-h-sm: 1.875rem; /* 30 */
|
|
305
|
+
--b-control-h-md: 2.25rem; /* 36 */
|
|
306
|
+
--b-control-h-lg: 2.75rem; /* 44 — default touch target */
|
|
307
|
+
--b-control-h-xl: 3.25rem; /* 52 */
|
|
308
|
+
--b-touch-target: 44px;
|
|
309
|
+
--b-focus-ring: 0 0 0 3.5px color-mix(in srgb, var(--b-color-accent) 30%, transparent);
|
|
310
|
+
--b-container-sm: 40rem;
|
|
311
|
+
--b-container-md: 48rem;
|
|
312
|
+
--b-container-lg: 64rem;
|
|
313
|
+
--b-container-xl: 80rem;
|
|
314
|
+
--b-sidebar-w: 16.25rem; /* 260 */
|
|
315
|
+
--b-rail-w: 4.5rem; /* 72 */
|
|
316
|
+
--b-topbar-h: 3.25rem; /* 52 */
|
|
317
|
+
|
|
318
|
+
/* Breakpoints (convention — used in @media by value):
|
|
319
|
+
xs 480px · sm 640px · md 768px · lg 1024px · xl 1280px · 2xl 1536px */
|
|
320
|
+
|
|
321
|
+
/* ------------------------------------------------------------------ *
|
|
322
|
+
* Glass animations
|
|
323
|
+
* ------------------------------------------------------------------ */
|
|
324
|
+
--b-glass-shimmer-duration: 600ms;
|
|
325
|
+
--b-glass-pulse-duration: 2000ms;
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
/* Explicit theme overrides — win over system preference */
|
|
329
|
+
[data-theme="light"] { color-scheme: light; }
|
|
330
|
+
[data-theme="dark"] { color-scheme: dark; }
|
|
331
|
+
|
|
332
|
+
/* Accent re-tinting: <html data-accent="purple"> etc. */
|
|
333
|
+
[data-accent="indigo"] { --b-color-accent: var(--b-color-indigo); --b-color-accent-hover: color-mix(in srgb, var(--b-color-indigo) 85%, black); --b-color-accent-soft: var(--b-color-indigo-soft); --b-color-accent-text: var(--b-color-indigo); }
|
|
334
|
+
[data-accent="purple"] { --b-color-accent: var(--b-color-purple); --b-color-accent-hover: color-mix(in srgb, var(--b-color-purple) 85%, black); --b-color-accent-soft: var(--b-color-purple-soft); --b-color-accent-text: var(--b-color-purple); }
|
|
335
|
+
[data-accent="pink"] { --b-color-accent: var(--b-color-pink); --b-color-accent-hover: color-mix(in srgb, var(--b-color-pink) 85%, black); --b-color-accent-soft: var(--b-color-pink-soft); --b-color-accent-text: var(--b-color-pink); }
|
|
336
|
+
[data-accent="teal"] { --b-color-accent: var(--b-color-teal); --b-color-accent-hover: color-mix(in srgb, var(--b-color-teal) 85%, black); --b-color-accent-soft: rgba(48, 176, 199, 0.14); --b-color-accent-text: var(--b-color-teal); }
|
|
337
|
+
[data-accent="green"] { --b-color-accent: var(--b-color-green); --b-color-accent-hover: color-mix(in srgb, var(--b-color-green) 85%, black); --b-color-accent-soft: var(--b-color-green-soft); --b-color-accent-text: var(--b-color-green); }
|
|
338
|
+
|
|
339
|
+
/* ---- Glass keyframes (Liquid Glass) ----------------------------------- */
|
|
340
|
+
/* Shimmer — light flash sweeping across on press/interaction */
|
|
341
|
+
@keyframes b-glass-shimmer {
|
|
342
|
+
0% { background-position: 200% center; }
|
|
343
|
+
100% { background-position: -200% center; }
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
/* Ambient pulse — subtle breathing glow for prominent glass elements */
|
|
347
|
+
@keyframes b-glass-pulse {
|
|
348
|
+
0%, 100% { opacity: 0.6; }
|
|
349
|
+
50% { opacity: 1; }
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
/* Materialize — glass element appearing with depth */
|
|
353
|
+
@keyframes b-glass-materialize {
|
|
354
|
+
from {
|
|
355
|
+
opacity: 0;
|
|
356
|
+
scale: 0.92;
|
|
357
|
+
filter: blur(8px);
|
|
358
|
+
}
|
|
359
|
+
to {
|
|
360
|
+
opacity: 1;
|
|
361
|
+
scale: 1;
|
|
362
|
+
filter: blur(0px);
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
}
|