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
|
@@ -0,0 +1,367 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
Barua UI — Specialized
|
|
3
|
+
Calendar, Date Picker panel, Emoji/Mention/User Picker, Search Results,
|
|
4
|
+
Filter Bar, Filter Chip, Sort Control, Bulk Actions, Multi-Select,
|
|
5
|
+
File Browser, Folder Tree, Activity/Audit Log.
|
|
6
|
+
(Command Palette lives in nav.css as .b-cmdk; Color Picker in forms.css.)
|
|
7
|
+
========================================================================== */
|
|
8
|
+
|
|
9
|
+
@layer components {
|
|
10
|
+
/* ---- Calendar ------------------------------------------------------------- */
|
|
11
|
+
.b-calendar {
|
|
12
|
+
display: inline-flex;
|
|
13
|
+
flex-direction: column;
|
|
14
|
+
gap: var(--b-space-2);
|
|
15
|
+
padding: var(--b-space-4);
|
|
16
|
+
background: var(--b-surface);
|
|
17
|
+
border: 1px solid var(--b-separator);
|
|
18
|
+
border-radius: var(--b-radius-xl);
|
|
19
|
+
user-select: none;
|
|
20
|
+
}
|
|
21
|
+
.b-calendar__header {
|
|
22
|
+
display: flex;
|
|
23
|
+
align-items: center;
|
|
24
|
+
justify-content: space-between;
|
|
25
|
+
gap: var(--b-space-2);
|
|
26
|
+
}
|
|
27
|
+
.b-calendar__month { font-weight: var(--b-weight-semibold); font-size: var(--b-text-subheadline); }
|
|
28
|
+
.b-calendar__grid {
|
|
29
|
+
display: grid;
|
|
30
|
+
grid-template-columns: repeat(7, 2.25rem);
|
|
31
|
+
gap: 2px;
|
|
32
|
+
}
|
|
33
|
+
.b-calendar__weekday {
|
|
34
|
+
display: grid;
|
|
35
|
+
place-items: center;
|
|
36
|
+
height: 1.75rem;
|
|
37
|
+
font-size: var(--b-text-caption2);
|
|
38
|
+
font-weight: var(--b-weight-semibold);
|
|
39
|
+
text-transform: uppercase;
|
|
40
|
+
color: var(--b-text-tertiary);
|
|
41
|
+
}
|
|
42
|
+
.b-calendar__day {
|
|
43
|
+
display: grid;
|
|
44
|
+
place-items: center;
|
|
45
|
+
height: 2.25rem;
|
|
46
|
+
font-size: var(--b-text-footnote);
|
|
47
|
+
font-variant-numeric: tabular-nums;
|
|
48
|
+
color: var(--b-text);
|
|
49
|
+
background: none;
|
|
50
|
+
border: none;
|
|
51
|
+
border-radius: 50%;
|
|
52
|
+
cursor: pointer;
|
|
53
|
+
transition: background var(--b-duration-fast);
|
|
54
|
+
}
|
|
55
|
+
.b-calendar__day:hover { background: var(--b-fill-tertiary); }
|
|
56
|
+
.b-calendar__day.is-muted { color: var(--b-text-quaternary); }
|
|
57
|
+
.b-calendar__day.is-today {
|
|
58
|
+
color: var(--b-color-accent-text);
|
|
59
|
+
font-weight: var(--b-weight-bold);
|
|
60
|
+
}
|
|
61
|
+
.b-calendar__day.is-selected {
|
|
62
|
+
color: var(--b-color-on-accent);
|
|
63
|
+
background: var(--b-color-accent);
|
|
64
|
+
font-weight: var(--b-weight-semibold);
|
|
65
|
+
}
|
|
66
|
+
.b-calendar__day.is-in-range { background: var(--b-color-accent-soft); border-radius: 0; }
|
|
67
|
+
.b-calendar__day.is-range-start { border-radius: 50% 0 0 50%; }
|
|
68
|
+
.b-calendar__day.is-range-end { border-radius: 0 50% 50% 0; }
|
|
69
|
+
.b-calendar__day:disabled { color: var(--b-text-quaternary); cursor: not-allowed; text-decoration: line-through; }
|
|
70
|
+
.b-calendar__day .b-dot-marker {
|
|
71
|
+
position: absolute;
|
|
72
|
+
translate: 0 0.7rem;
|
|
73
|
+
width: 0.25rem; height: 0.25rem;
|
|
74
|
+
border-radius: 50%;
|
|
75
|
+
background: var(--b-color-accent);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Date picker = input + calendar in popover */
|
|
79
|
+
.b-datepicker { position: relative; display: inline-block; }
|
|
80
|
+
.b-datepicker > .b-calendar {
|
|
81
|
+
position: absolute;
|
|
82
|
+
top: calc(100% + var(--b-space-1));
|
|
83
|
+
inset-inline-start: 0;
|
|
84
|
+
z-index: var(--b-z-popover);
|
|
85
|
+
box-shadow: var(--b-elevation-4);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
/* ---- Emoji Picker ----------------------------------------------------------- */
|
|
89
|
+
.b-emoji-picker {
|
|
90
|
+
width: 18rem;
|
|
91
|
+
padding: var(--b-space-3);
|
|
92
|
+
background: var(--b-elevated);
|
|
93
|
+
border: 1px solid var(--b-hairline);
|
|
94
|
+
border-radius: var(--b-radius-lg);
|
|
95
|
+
box-shadow: var(--b-elevation-4);
|
|
96
|
+
}
|
|
97
|
+
.b-emoji-picker__grid {
|
|
98
|
+
display: grid;
|
|
99
|
+
grid-template-columns: repeat(8, 1fr);
|
|
100
|
+
gap: 2px;
|
|
101
|
+
max-height: 12rem;
|
|
102
|
+
overflow-y: auto;
|
|
103
|
+
margin-block-start: var(--b-space-2);
|
|
104
|
+
}
|
|
105
|
+
.b-emoji-picker__grid button {
|
|
106
|
+
display: grid;
|
|
107
|
+
place-items: center;
|
|
108
|
+
aspect-ratio: 1;
|
|
109
|
+
font-size: 1.15rem;
|
|
110
|
+
background: none;
|
|
111
|
+
border: none;
|
|
112
|
+
border-radius: var(--b-radius-sm);
|
|
113
|
+
cursor: pointer;
|
|
114
|
+
}
|
|
115
|
+
.b-emoji-picker__grid button:hover { background: var(--b-fill-tertiary); scale: 1.15; }
|
|
116
|
+
|
|
117
|
+
/* ---- Mention / User Picker ---------------------------------------------------- */
|
|
118
|
+
.b-mention-list {
|
|
119
|
+
min-width: 16rem;
|
|
120
|
+
max-height: 15rem;
|
|
121
|
+
overflow-y: auto;
|
|
122
|
+
padding: var(--b-space-1);
|
|
123
|
+
margin: 0;
|
|
124
|
+
list-style: none;
|
|
125
|
+
background: var(--b-elevated);
|
|
126
|
+
border: 1px solid var(--b-hairline);
|
|
127
|
+
border-radius: var(--b-radius-lg);
|
|
128
|
+
box-shadow: var(--b-elevation-4);
|
|
129
|
+
}
|
|
130
|
+
.b-mention-list__item {
|
|
131
|
+
display: flex;
|
|
132
|
+
align-items: center;
|
|
133
|
+
gap: var(--b-space-2);
|
|
134
|
+
width: 100%;
|
|
135
|
+
padding: var(--b-space-2);
|
|
136
|
+
background: none;
|
|
137
|
+
border: none;
|
|
138
|
+
border-radius: var(--b-radius-sm);
|
|
139
|
+
cursor: pointer;
|
|
140
|
+
text-align: start;
|
|
141
|
+
}
|
|
142
|
+
.b-mention-list__item:hover { background: var(--b-fill-quaternary); }
|
|
143
|
+
.b-mention-list__item.is-active { background: var(--b-color-accent-soft); }
|
|
144
|
+
.b-mention-list__item .b-avatar { --b-avatar-size: 1.75rem; }
|
|
145
|
+
.b-mention-list__name { font-size: var(--b-text-footnote); font-weight: var(--b-weight-medium); }
|
|
146
|
+
.b-mention-list__handle { font-size: var(--b-text-caption); color: var(--b-text-tertiary); }
|
|
147
|
+
.b-mention {
|
|
148
|
+
display: inline;
|
|
149
|
+
padding: 0.05em 0.3em;
|
|
150
|
+
color: var(--b-color-accent-text);
|
|
151
|
+
background: var(--b-color-accent-soft);
|
|
152
|
+
border-radius: var(--b-radius-xs);
|
|
153
|
+
font-weight: var(--b-weight-medium);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
/* ---- Search Results ------------------------------------------------------------- */
|
|
157
|
+
.b-search-results {
|
|
158
|
+
display: flex;
|
|
159
|
+
flex-direction: column;
|
|
160
|
+
gap: var(--b-space-1);
|
|
161
|
+
}
|
|
162
|
+
.b-search-result {
|
|
163
|
+
display: flex;
|
|
164
|
+
flex-direction: column;
|
|
165
|
+
gap: 2px;
|
|
166
|
+
padding: var(--b-space-3);
|
|
167
|
+
border-radius: var(--b-radius-md);
|
|
168
|
+
cursor: pointer;
|
|
169
|
+
}
|
|
170
|
+
.b-search-result:hover { background: var(--b-fill-quaternary); text-decoration: none; }
|
|
171
|
+
.b-search-result__title { font-weight: var(--b-weight-semibold); font-size: var(--b-text-subheadline); color: var(--b-text); }
|
|
172
|
+
.b-search-result__snippet { font-size: var(--b-text-footnote); color: var(--b-text-secondary); }
|
|
173
|
+
.b-search-result__snippet mark, .b-highlight {
|
|
174
|
+
color: inherit;
|
|
175
|
+
background: color-mix(in srgb, var(--b-color-yellow) 45%, transparent);
|
|
176
|
+
border-radius: 2px;
|
|
177
|
+
padding-inline: 0.1em;
|
|
178
|
+
}
|
|
179
|
+
.b-search-result__path { font-size: var(--b-text-caption); color: var(--b-text-tertiary); }
|
|
180
|
+
|
|
181
|
+
/* ---- Filter Bar / Filter Chip / Sort Control ------------------------------------- */
|
|
182
|
+
.b-filter-bar {
|
|
183
|
+
display: flex;
|
|
184
|
+
align-items: center;
|
|
185
|
+
flex-wrap: wrap;
|
|
186
|
+
gap: var(--b-space-2);
|
|
187
|
+
padding: var(--b-space-2) 0;
|
|
188
|
+
}
|
|
189
|
+
.b-filter-chip {
|
|
190
|
+
display: inline-flex;
|
|
191
|
+
align-items: center;
|
|
192
|
+
gap: var(--b-space-1);
|
|
193
|
+
height: var(--b-control-h-sm);
|
|
194
|
+
padding-inline: var(--b-space-3);
|
|
195
|
+
font-size: var(--b-text-footnote);
|
|
196
|
+
font-weight: var(--b-weight-medium);
|
|
197
|
+
color: var(--b-text-secondary);
|
|
198
|
+
background: none;
|
|
199
|
+
border: 1px dashed var(--b-border-strong);
|
|
200
|
+
border-radius: var(--b-radius-full);
|
|
201
|
+
cursor: pointer;
|
|
202
|
+
transition: all var(--b-duration-fast) var(--b-ease-standard);
|
|
203
|
+
}
|
|
204
|
+
.b-filter-chip:hover { border-color: var(--b-color-accent); color: var(--b-color-accent-text); }
|
|
205
|
+
.b-filter-chip.is-active {
|
|
206
|
+
color: var(--b-color-accent-text);
|
|
207
|
+
background: var(--b-color-accent-soft);
|
|
208
|
+
border: 1px solid transparent;
|
|
209
|
+
}
|
|
210
|
+
.b-filter-chip__value { font-weight: var(--b-weight-semibold); }
|
|
211
|
+
.b-sort-control {
|
|
212
|
+
display: inline-flex;
|
|
213
|
+
align-items: center;
|
|
214
|
+
gap: var(--b-space-1);
|
|
215
|
+
font-size: var(--b-text-footnote);
|
|
216
|
+
font-weight: var(--b-weight-medium);
|
|
217
|
+
color: var(--b-text-secondary);
|
|
218
|
+
background: none;
|
|
219
|
+
border: none;
|
|
220
|
+
cursor: pointer;
|
|
221
|
+
padding: var(--b-space-1) var(--b-space-2);
|
|
222
|
+
border-radius: var(--b-radius-sm);
|
|
223
|
+
}
|
|
224
|
+
.b-sort-control:hover { background: var(--b-fill-tertiary); color: var(--b-text); }
|
|
225
|
+
.b-sort-control.is-asc::after { content: "↑"; color: var(--b-color-accent-text); }
|
|
226
|
+
.b-sort-control.is-desc::after { content: "↓"; color: var(--b-color-accent-text); }
|
|
227
|
+
|
|
228
|
+
/* ---- Bulk Actions ------------------------------------------------------------------ */
|
|
229
|
+
.b-bulk-actions {
|
|
230
|
+
position: fixed;
|
|
231
|
+
inset-inline: 0;
|
|
232
|
+
inset-block-end: var(--b-space-6);
|
|
233
|
+
z-index: var(--b-z-sticky);
|
|
234
|
+
display: flex;
|
|
235
|
+
justify-content: center;
|
|
236
|
+
pointer-events: none;
|
|
237
|
+
}
|
|
238
|
+
.b-bulk-actions__bar {
|
|
239
|
+
display: flex;
|
|
240
|
+
align-items: center;
|
|
241
|
+
gap: var(--b-space-3);
|
|
242
|
+
padding: var(--b-space-2) var(--b-space-3);
|
|
243
|
+
background: color-mix(in srgb, var(--b-elevated) 88%, transparent);
|
|
244
|
+
-webkit-backdrop-filter: var(--b-glass);
|
|
245
|
+
backdrop-filter: var(--b-glass);
|
|
246
|
+
border: 1px solid var(--b-hairline);
|
|
247
|
+
border-radius: var(--b-radius-full);
|
|
248
|
+
box-shadow: var(--b-glass-edge), var(--b-elevation-4);
|
|
249
|
+
pointer-events: auto;
|
|
250
|
+
animation: b-toast-in var(--b-duration-slow) var(--b-ease-spring);
|
|
251
|
+
}
|
|
252
|
+
.b-bulk-actions__count {
|
|
253
|
+
font-size: var(--b-text-footnote);
|
|
254
|
+
font-weight: var(--b-weight-semibold);
|
|
255
|
+
padding-inline-start: var(--b-space-2);
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
/* ---- Multi-Select (token input) ------------------------------------------------------ */
|
|
259
|
+
.b-multiselect {
|
|
260
|
+
display: flex;
|
|
261
|
+
flex-wrap: wrap;
|
|
262
|
+
align-items: center;
|
|
263
|
+
gap: var(--b-space-1);
|
|
264
|
+
min-height: var(--b-control-h-md);
|
|
265
|
+
padding: var(--b-space-1) var(--b-space-2);
|
|
266
|
+
background: var(--b-surface);
|
|
267
|
+
border: 1px solid var(--b-border);
|
|
268
|
+
border-radius: var(--b-radius-md);
|
|
269
|
+
cursor: text;
|
|
270
|
+
}
|
|
271
|
+
.b-multiselect:focus-within {
|
|
272
|
+
border-color: var(--b-color-accent);
|
|
273
|
+
box-shadow: var(--b-focus-ring);
|
|
274
|
+
}
|
|
275
|
+
.b-multiselect input {
|
|
276
|
+
flex: 1;
|
|
277
|
+
min-width: 6rem;
|
|
278
|
+
border: none;
|
|
279
|
+
background: none;
|
|
280
|
+
outline: none;
|
|
281
|
+
font-size: var(--b-text-subheadline);
|
|
282
|
+
padding: var(--b-space-1);
|
|
283
|
+
}
|
|
284
|
+
.b-multiselect input:focus-visible { box-shadow: none; }
|
|
285
|
+
.b-multiselect .b-chip { height: 1.5rem; font-size: var(--b-text-caption); }
|
|
286
|
+
|
|
287
|
+
/* ---- File Browser / Folder Tree ------------------------------------------------------- */
|
|
288
|
+
.b-file-browser {
|
|
289
|
+
display: grid;
|
|
290
|
+
grid-template-columns: minmax(11rem, 0.35fr) 1fr;
|
|
291
|
+
min-height: 18rem;
|
|
292
|
+
background: var(--b-surface);
|
|
293
|
+
border: 1px solid var(--b-separator);
|
|
294
|
+
border-radius: var(--b-radius-xl);
|
|
295
|
+
overflow: hidden;
|
|
296
|
+
}
|
|
297
|
+
.b-file-browser__side {
|
|
298
|
+
padding: var(--b-space-2);
|
|
299
|
+
border-inline-end: 1px solid var(--b-separator);
|
|
300
|
+
background: var(--b-fill-quaternary);
|
|
301
|
+
overflow-y: auto;
|
|
302
|
+
}
|
|
303
|
+
.b-file-browser__main { padding: var(--b-space-3); overflow-y: auto; }
|
|
304
|
+
.b-file-grid {
|
|
305
|
+
display: grid;
|
|
306
|
+
grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
|
|
307
|
+
gap: var(--b-space-2);
|
|
308
|
+
}
|
|
309
|
+
.b-file-tile {
|
|
310
|
+
display: flex;
|
|
311
|
+
flex-direction: column;
|
|
312
|
+
align-items: center;
|
|
313
|
+
gap: var(--b-space-1);
|
|
314
|
+
padding: var(--b-space-2);
|
|
315
|
+
font-size: var(--b-text-caption);
|
|
316
|
+
text-align: center;
|
|
317
|
+
color: var(--b-text);
|
|
318
|
+
background: none;
|
|
319
|
+
border: none;
|
|
320
|
+
border-radius: var(--b-radius-md);
|
|
321
|
+
cursor: default;
|
|
322
|
+
word-break: break-word;
|
|
323
|
+
}
|
|
324
|
+
.b-file-tile:hover { background: var(--b-fill-quaternary); }
|
|
325
|
+
.b-file-tile.is-selected { background: var(--b-color-accent-soft); }
|
|
326
|
+
.b-file-tile.is-selected .b-file-tile__name {
|
|
327
|
+
background: var(--b-color-accent);
|
|
328
|
+
color: var(--b-color-on-accent);
|
|
329
|
+
border-radius: var(--b-radius-xs);
|
|
330
|
+
padding-inline: 0.25rem;
|
|
331
|
+
}
|
|
332
|
+
.b-file-tile__icon {
|
|
333
|
+
display: grid;
|
|
334
|
+
place-items: center;
|
|
335
|
+
width: 3rem; height: 3rem;
|
|
336
|
+
font-size: 1.75rem;
|
|
337
|
+
}
|
|
338
|
+
.b-file-tile__icon svg { width: 2.25rem; height: 2.25rem; color: var(--b-color-accent); }
|
|
339
|
+
|
|
340
|
+
/* ---- Activity / Audit Log -------------------------------------------------------------- */
|
|
341
|
+
.b-log { display: flex; flex-direction: column; }
|
|
342
|
+
.b-log__entry {
|
|
343
|
+
display: grid;
|
|
344
|
+
grid-template-columns: max-content 1fr max-content;
|
|
345
|
+
align-items: baseline;
|
|
346
|
+
gap: var(--b-space-3);
|
|
347
|
+
padding: var(--b-space-2) var(--b-space-3);
|
|
348
|
+
font-size: var(--b-text-footnote);
|
|
349
|
+
border-radius: var(--b-radius-sm);
|
|
350
|
+
}
|
|
351
|
+
.b-log__entry:hover { background: var(--b-fill-quaternary); }
|
|
352
|
+
.b-log__entry + .b-log__entry { border-top: 1px solid var(--b-separator); }
|
|
353
|
+
.b-log__actor { font-weight: var(--b-weight-semibold); }
|
|
354
|
+
.b-log__action { color: var(--b-text-secondary); }
|
|
355
|
+
.b-log__action code {
|
|
356
|
+
font-size: var(--b-text-caption);
|
|
357
|
+
color: var(--b-text);
|
|
358
|
+
}
|
|
359
|
+
.b-log__time {
|
|
360
|
+
font-size: var(--b-text-caption);
|
|
361
|
+
color: var(--b-text-tertiary);
|
|
362
|
+
font-variant-numeric: tabular-nums;
|
|
363
|
+
white-space: nowrap;
|
|
364
|
+
}
|
|
365
|
+
.b-log--audit .b-log__entry { grid-template-columns: 7.5rem max-content 1fr max-content; }
|
|
366
|
+
.b-log__ip { font-family: var(--b-font-mono); font-size: var(--b-text-caption); color: var(--b-text-tertiary); }
|
|
367
|
+
}
|
package/css/liquid.css
ADDED
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
Barua UI — Liquid Glass mode
|
|
3
|
+
Opt-in whole-system re-skin: <html data-glass="liquid">.
|
|
4
|
+
Every major surface becomes translucent Apple-style liquid glass —
|
|
5
|
+
backdrop blur, specular edges, glossy cores — while text stays solid
|
|
6
|
+
for legibility. Toggle at runtime with Barua.glass.toggle().
|
|
7
|
+
========================================================================== */
|
|
8
|
+
|
|
9
|
+
@layer components {
|
|
10
|
+
[data-glass="liquid"] {
|
|
11
|
+
/* Liquid-mode surface language */
|
|
12
|
+
--b-lg-pane: light-dark(rgba(255, 255, 255, 0.42), rgba(38, 40, 48, 0.42));
|
|
13
|
+
--b-lg-pane-strong: light-dark(rgba(255, 255, 255, 0.58), rgba(38, 40, 48, 0.58));
|
|
14
|
+
--b-lg-inset: light-dark(rgba(255, 255, 255, 0.30), rgba(30, 32, 40, 0.35));
|
|
15
|
+
--b-lg-border: light-dark(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.10));
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* ---- Panes: cards, lists, tables, panels, accordions… -------------------- */
|
|
19
|
+
[data-glass="liquid"] :is(.b-card, .b-list, .b-table-wrap, .b-accordion,
|
|
20
|
+
.b-panel, .b-form-section, .b-calendar, .b-file-browser, .b-master-detail,
|
|
21
|
+
.b-calview, .b-gantt, .b-audio, .b-emoji-picker, .b-mention-list,
|
|
22
|
+
.b-passkey, .b-menubar, .b-toolbar, .b-stepper-input, .b-upload-item) {
|
|
23
|
+
background: var(--b-lg-pane);
|
|
24
|
+
-webkit-backdrop-filter: var(--b-glass);
|
|
25
|
+
backdrop-filter: var(--b-glass);
|
|
26
|
+
border-color: var(--b-lg-border);
|
|
27
|
+
box-shadow: var(--b-glass-edge), var(--b-shadow-sm);
|
|
28
|
+
}
|
|
29
|
+
[data-glass="liquid"] :is(.b-card__footer, .b-table th, .b-calview__head,
|
|
30
|
+
.b-file-browser__side) {
|
|
31
|
+
background: light-dark(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.03));
|
|
32
|
+
}
|
|
33
|
+
[data-glass="liquid"] .b-elevated,
|
|
34
|
+
[data-glass="liquid"] :is(.b-menu, .b-cmdk, .b-popover, .b-toast,
|
|
35
|
+
.b-notification, .b-hover-card, .b-modal, .b-sheet, .b-combobox__list) {
|
|
36
|
+
background: color-mix(in srgb, var(--b-elevated) 55%, transparent);
|
|
37
|
+
-webkit-backdrop-filter: var(--b-glass-heavy);
|
|
38
|
+
backdrop-filter: var(--b-glass-heavy);
|
|
39
|
+
border-color: var(--b-lg-border);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* ---- Chrome: bars, sidebars, rails, status ------------------------------- */
|
|
43
|
+
[data-glass="liquid"] :is(.b-topnav, .b-bottomnav, .b-mobile-header,
|
|
44
|
+
.b-mobile-toolbar, .b-statusbar) {
|
|
45
|
+
background: light-dark(rgba(250, 251, 254, 0.45), rgba(20, 20, 26, 0.45));
|
|
46
|
+
-webkit-backdrop-filter: var(--b-glass-heavy);
|
|
47
|
+
backdrop-filter: var(--b-glass-heavy);
|
|
48
|
+
}
|
|
49
|
+
[data-glass="liquid"] :is(.b-sidebar--surface, .b-rail, .b-inspector) {
|
|
50
|
+
background: light-dark(rgba(250, 251, 254, 0.35), rgba(24, 25, 32, 0.35));
|
|
51
|
+
-webkit-backdrop-filter: var(--b-glass);
|
|
52
|
+
backdrop-filter: var(--b-glass);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* ---- Actions --------------------------------------------------------------- */
|
|
56
|
+
[data-glass="liquid"] .b-btn {
|
|
57
|
+
background: var(--b-lg-pane);
|
|
58
|
+
-webkit-backdrop-filter: var(--b-glass-light);
|
|
59
|
+
backdrop-filter: var(--b-glass-light);
|
|
60
|
+
box-shadow: var(--b-glass-edge), var(--b-shadow-xs);
|
|
61
|
+
}
|
|
62
|
+
/* Generic glass hover must not repaint colored/stateful variants —
|
|
63
|
+
in light mode it would wash them to white with invisible labels. */
|
|
64
|
+
[data-glass="liquid"] .b-btn:not(.b-btn--primary, .b-btn--tinted,
|
|
65
|
+
.b-btn--danger, .b-btn--danger-tinted, .b-btn--success, .b-fab,
|
|
66
|
+
.is-active, [aria-pressed="true"]):hover {
|
|
67
|
+
background: var(--b-lg-pane-strong);
|
|
68
|
+
}
|
|
69
|
+
[data-glass="liquid"] .b-btn--primary,
|
|
70
|
+
[data-glass="liquid"] .b-fab {
|
|
71
|
+
background:
|
|
72
|
+
radial-gradient(120% 140% at 30% 12%, rgba(255, 255, 255, 0.38), transparent 42%),
|
|
73
|
+
var(--b-color-accent);
|
|
74
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
|
|
75
|
+
inset 0 0 0 1px color-mix(in srgb, var(--b-color-accent) 55%, transparent),
|
|
76
|
+
var(--b-shadow-accent);
|
|
77
|
+
}
|
|
78
|
+
[data-glass="liquid"] .b-btn--primary:hover,
|
|
79
|
+
[data-glass="liquid"] .b-fab:hover { background:
|
|
80
|
+
radial-gradient(120% 140% at 30% 12%, rgba(255, 255, 255, 0.45), transparent 44%),
|
|
81
|
+
var(--b-color-accent-hover); }
|
|
82
|
+
[data-glass="liquid"] .b-btn--danger {
|
|
83
|
+
background:
|
|
84
|
+
radial-gradient(120% 140% at 30% 12%, rgba(255, 255, 255, 0.35), transparent 42%),
|
|
85
|
+
var(--b-color-danger);
|
|
86
|
+
}
|
|
87
|
+
[data-glass="liquid"] .b-btn--danger:hover {
|
|
88
|
+
background:
|
|
89
|
+
radial-gradient(120% 140% at 30% 12%, rgba(255, 255, 255, 0.42), transparent 44%),
|
|
90
|
+
color-mix(in srgb, var(--b-color-danger) 85%, black);
|
|
91
|
+
}
|
|
92
|
+
[data-glass="liquid"] .b-btn--tinted { background: var(--b-color-accent-soft); }
|
|
93
|
+
[data-glass="liquid"] .b-btn--tinted:hover {
|
|
94
|
+
background: color-mix(in srgb, var(--b-color-accent) 24%, transparent);
|
|
95
|
+
}
|
|
96
|
+
[data-glass="liquid"] .b-btn--danger-tinted { background: var(--b-color-danger-soft); }
|
|
97
|
+
[data-glass="liquid"] :is(.b-btn--ghost, .b-btn--outline, .b-link) {
|
|
98
|
+
background: transparent;
|
|
99
|
+
-webkit-backdrop-filter: none;
|
|
100
|
+
backdrop-filter: none;
|
|
101
|
+
box-shadow: none;
|
|
102
|
+
}
|
|
103
|
+
[data-glass="liquid"] .b-btn--outline { box-shadow: inset 0 0 0 1px var(--b-lg-border); }
|
|
104
|
+
[data-glass="liquid"] .b-btn--ghost:hover { background: var(--b-lg-inset); }
|
|
105
|
+
|
|
106
|
+
/* ---- Forms ------------------------------------------------------------------ */
|
|
107
|
+
[data-glass="liquid"] :is(.b-input, .b-textarea, .b-select, .b-multiselect,
|
|
108
|
+
.b-otp input) {
|
|
109
|
+
background: var(--b-lg-inset);
|
|
110
|
+
-webkit-backdrop-filter: var(--b-glass-light);
|
|
111
|
+
backdrop-filter: var(--b-glass-light);
|
|
112
|
+
border-color: var(--b-lg-border);
|
|
113
|
+
box-shadow: inset 0 1px 2px light-dark(rgba(20, 24, 38, 0.05), rgba(0, 0, 0, 0.2));
|
|
114
|
+
}
|
|
115
|
+
[data-glass="liquid"] :is(.b-input, .b-textarea, .b-select):focus-visible {
|
|
116
|
+
border-color: var(--b-color-accent);
|
|
117
|
+
background: var(--b-lg-pane-strong);
|
|
118
|
+
}
|
|
119
|
+
[data-glass="liquid"] .b-switch input {
|
|
120
|
+
background: var(--b-lg-inset);
|
|
121
|
+
box-shadow: inset 0 0 0 1px var(--b-lg-border),
|
|
122
|
+
inset 0 2px 4px light-dark(rgba(20, 24, 38, 0.08), rgba(0, 0, 0, 0.3));
|
|
123
|
+
}
|
|
124
|
+
[data-glass="liquid"] .b-switch input:checked {
|
|
125
|
+
background:
|
|
126
|
+
radial-gradient(130% 160% at 30% 10%, rgba(255, 255, 255, 0.4), transparent 45%),
|
|
127
|
+
var(--b-color-green);
|
|
128
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
|
|
129
|
+
0 2px 10px color-mix(in srgb, var(--b-color-green) 45%, transparent);
|
|
130
|
+
}
|
|
131
|
+
[data-glass="liquid"] .b-checkbox input:not(:checked):not(:indeterminate),
|
|
132
|
+
[data-glass="liquid"] .b-radio input:not(:checked) {
|
|
133
|
+
background: var(--b-lg-inset);
|
|
134
|
+
border-color: var(--b-lg-border);
|
|
135
|
+
}
|
|
136
|
+
[data-glass="liquid"] .b-upload {
|
|
137
|
+
background: var(--b-lg-inset);
|
|
138
|
+
-webkit-backdrop-filter: var(--b-glass-light);
|
|
139
|
+
backdrop-filter: var(--b-glass-light);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* ---- Navigation ------------------------------------------------------------- */
|
|
143
|
+
[data-glass="liquid"] .b-segmented {
|
|
144
|
+
background: var(--b-lg-inset);
|
|
145
|
+
-webkit-backdrop-filter: var(--b-glass-light);
|
|
146
|
+
backdrop-filter: var(--b-glass-light);
|
|
147
|
+
box-shadow: inset 0 1px 2px light-dark(rgba(20, 24, 38, 0.06), rgba(0, 0, 0, 0.22));
|
|
148
|
+
}
|
|
149
|
+
[data-glass="liquid"] .b-segmented__item.is-active,
|
|
150
|
+
[data-glass="liquid"] .b-segmented__item[aria-selected="true"] {
|
|
151
|
+
background:
|
|
152
|
+
radial-gradient(120% 150% at 30% 10%, rgba(255, 255, 255, 0.65), transparent 55%),
|
|
153
|
+
light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.16));
|
|
154
|
+
box-shadow: var(--b-glass-edge), var(--b-shadow-xs);
|
|
155
|
+
}
|
|
156
|
+
[data-glass="liquid"] :is(.b-sidebar__item, .b-tab, .b-topnav__link):hover {
|
|
157
|
+
background: var(--b-lg-inset);
|
|
158
|
+
}
|
|
159
|
+
[data-glass="liquid"] .b-breadcrumbs {
|
|
160
|
+
display: inline-flex;
|
|
161
|
+
padding: var(--b-space-1) var(--b-space-3);
|
|
162
|
+
background: var(--b-lg-pane);
|
|
163
|
+
-webkit-backdrop-filter: var(--b-glass-light);
|
|
164
|
+
backdrop-filter: var(--b-glass-light);
|
|
165
|
+
border: 1px solid var(--b-lg-border);
|
|
166
|
+
border-radius: var(--b-radius-full);
|
|
167
|
+
box-shadow: var(--b-glass-edge);
|
|
168
|
+
}
|
|
169
|
+
[data-glass="liquid"] .b-pagination__item:not(.is-active):hover {
|
|
170
|
+
background: var(--b-lg-inset);
|
|
171
|
+
}
|
|
172
|
+
[data-glass="liquid"] .b-pagination__item.is-active,
|
|
173
|
+
[data-glass="liquid"] .b-pagination__item[aria-current="page"] {
|
|
174
|
+
background:
|
|
175
|
+
radial-gradient(120% 150% at 30% 10%, rgba(255, 255, 255, 0.4), transparent 45%),
|
|
176
|
+
var(--b-color-accent);
|
|
177
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
/* ---- Content bits ------------------------------------------------------------ */
|
|
181
|
+
[data-glass="liquid"] :is(.b-badge, .b-tag, .b-chip:not(.is-selected)) {
|
|
182
|
+
-webkit-backdrop-filter: var(--b-glass-light);
|
|
183
|
+
backdrop-filter: var(--b-glass-light);
|
|
184
|
+
}
|
|
185
|
+
[data-glass="liquid"] .b-chip:not(.is-selected) {
|
|
186
|
+
background: var(--b-lg-pane);
|
|
187
|
+
box-shadow: var(--b-glass-edge);
|
|
188
|
+
}
|
|
189
|
+
[data-glass="liquid"] .b-disclosure > summary:hover { background: var(--b-lg-inset); }
|
|
190
|
+
[data-glass="liquid"] .b-progress {
|
|
191
|
+
background: var(--b-lg-inset);
|
|
192
|
+
box-shadow: inset 0 1px 2px light-dark(rgba(20, 24, 38, 0.06), rgba(0, 0, 0, 0.25));
|
|
193
|
+
}
|
|
194
|
+
[data-glass="liquid"] .b-progress__fill {
|
|
195
|
+
background:
|
|
196
|
+
linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 55%),
|
|
197
|
+
var(--b-color-accent);
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* ---- Feedback ------------------------------------------------------------------ */
|
|
201
|
+
[data-glass="liquid"] .b-alert {
|
|
202
|
+
-webkit-backdrop-filter: var(--b-glass-light);
|
|
203
|
+
backdrop-filter: var(--b-glass-light);
|
|
204
|
+
box-shadow: var(--b-glass-edge);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
/* Docs chrome plays along */
|
|
208
|
+
[data-glass="liquid"] .docs-demo:not(.docs-demo--canvas):not(.docs-demo--dark) {
|
|
209
|
+
background: light-dark(rgba(255, 255, 255, 0.35), rgba(30, 31, 38, 0.35));
|
|
210
|
+
-webkit-backdrop-filter: var(--b-glass-light);
|
|
211
|
+
backdrop-filter: var(--b-glass-light);
|
|
212
|
+
}
|
|
213
|
+
}
|