@byline/ui 1.10.3 → 1.11.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.
Files changed (9) hide show
  1. package/dist/components/button/button_module.css +4 -8
  2. package/dist/components/chips/chip_module.css +3 -6
  3. package/dist/components/notifications/toast_module.css +1 -2
  4. package/package.json +4 -4
  5. package/src/components/button/button.module.css +36 -112
  6. package/src/components/chips/chip.module.css +26 -81
  7. package/src/components/inputs/checkbox.module.css +3 -7
  8. package/src/components/notifications/toast.module.css +6 -19
  9. package/src/components/shimmer/shimmer.module.css +2 -12
package/dist/components/button/button_module.css CHANGED
@@ -96,8 +96,7 @@
96
96
 
97
97
  :is(.filled-CwGsrO:disabled, .filled-CwGsrO[disabled], .byline-button-filled:disabled, .byline-button-filled[disabled]) {
98
98
  background-color: var(--button-variant-filled-disabled, oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * .85) h));
99
- color: var(--button-variant-filled-foreground-disabled, oklch(from var(--button-variant-filled-foreground) calc(l * .9)
100
- calc(c * .85) h));
99
+ color: var(--button-variant-filled-foreground-disabled, oklch(from var(--button-variant-filled-foreground) calc(l * .9) calc(c * .85) h));
101
100
  }
102
101
 
103
102
  :is(.filled-weak-QLU8bA, .byline-button-filled-weak) {
@@ -115,8 +114,7 @@
115
114
 
116
115
  :is(.filled-weak-QLU8bA:disabled, .filled-weak-QLU8bA[disabled], .byline-button-filled-weak:disabled, .byline-button-filled-weak[disabled]) {
117
116
  background-color: var(--button-variant-filled-weak-disabled, oklch(from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * .85) h));
118
- color: var(--button-variant-filled-weak-foreground-disabled, oklch(from var(--button-variant-filled-weak-foreground) calc(l * .9)
119
- calc(c * .85) h));
117
+ color: var(--button-variant-filled-weak-foreground-disabled, oklch(from var(--button-variant-filled-weak-foreground) calc(l * .9) calc(c * .85) h));
120
118
  }
121
119
 
122
120
  :is(.outlined-nZGbxu, .byline-button-outlined) {
@@ -127,8 +125,7 @@
127
125
 
128
126
  :is(.outlined-nZGbxu:disabled, .outlined-nZGbxu[disabled], .byline-button-outlined:disabled, .byline-button-outlined[disabled]) {
129
127
  border-color: var(--button-variant-outlined-border-disabled, oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * .8) h));
130
- color: var(--button-variant-outlined-foreground-disabled, oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1)
131
- calc(c * .7) h));
128
+ color: var(--button-variant-outlined-foreground-disabled, oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * .7) h));
132
129
  }
133
130
 
134
131
  :is(.outlined-nZGbxu:hover, .byline-button-outlined:hover) {
@@ -149,8 +146,7 @@
149
146
  :is(.gradient-ySC3O3:disabled, .gradient-ySC3O3[disabled], .byline-button-gradient:disabled, .byline-button-gradient[disabled]) {
150
147
  background: unset;
151
148
  background-color: var(--button-variant-gradient-disabled, oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * .85) h));
152
- color: var(--button-variant-gradient-foreground-disabled, oklch(from var(--button-variant-gradient-foreground) calc(l * .9)
153
- calc(c * .85) h));
149
+ color: var(--button-variant-gradient-foreground-disabled, oklch(from var(--button-variant-gradient-foreground) calc(l * .9) calc(c * .85) h));
154
150
  }
155
151
 
156
152
  :is(.gradient-ySC3O3:hover, .byline-button-gradient:hover) {
package/dist/components/chips/chip_module.css CHANGED
@@ -115,8 +115,7 @@
115
115
 
116
116
  :is(.filled-IPrtjU:disabled, .filled-IPrtjU[disabled], .byline-chip-filled:disabled, .byline-chip-filled[disabled]) {
117
117
  background-color: var(--chip-variant-filled-disabled, oklch(from var(--chip-variant-filled) calc(l * 1.1) calc(c * .85) h));
118
- color: var(--chip-variant-filled-foreground-disabled, oklch(from var(--chip-variant-filled-foreground) calc(l * .9) calc(c * .85)
119
- h));
118
+ color: var(--chip-variant-filled-foreground-disabled, oklch(from var(--chip-variant-filled-foreground) calc(l * .9) calc(c * .85) h));
120
119
  }
121
120
 
122
121
  :is(.filled-weak-R_EHbg, .byline-chip-filled-weak) {
@@ -134,8 +133,7 @@
134
133
 
135
134
  :is(.filled-weak-R_EHbg:disabled, .filled-weak-R_EHbg[disabled], .byline-chip-filled-weak:disabled, .byline-chip-filled-weak[disabled]) {
136
135
  background-color: var(--chip-variant-filled-weak-disabled, oklch(from var(--chip-variant-filled-weak) calc(l * 1.1) calc(c * .85) h));
137
- color: var(--chip-variant-filled-weak-foreground-disabled, oklch(from var(--chip-variant-filled-weak-foreground) calc(l * .9)
138
- calc(c * .85) h));
136
+ color: var(--chip-variant-filled-weak-foreground-disabled, oklch(from var(--chip-variant-filled-weak-foreground) calc(l * .9) calc(c * .85) h));
139
137
  }
140
138
 
141
139
  :is(.outlined-ND2TjQ, .byline-chip-outlined) {
@@ -146,8 +144,7 @@
146
144
 
147
145
  :is(.outlined-ND2TjQ:disabled, .outlined-ND2TjQ[disabled], .byline-chip-outlined:disabled, .byline-chip-outlined[disabled]) {
148
146
  border-color: var(--chip-variant-outlined-border-disabled, oklch(from var(--chip-variant-outlined-border) calc(l * 1.5) calc(c * .8) h));
149
- color: var(--chip-variant-outlined-foreground-disabled, oklch(from var(--chip-variant-outlined-foreground) calc(l * 1.1) calc(c * .7)
150
- h));
147
+ color: var(--chip-variant-outlined-foreground-disabled, oklch(from var(--chip-variant-outlined-foreground) calc(l * 1.1) calc(c * .7) h));
151
148
  }
152
149
 
153
150
  :is(.outlined-ND2TjQ:hover, .byline-chip-outlined:hover) {
package/dist/components/notifications/toast_module.css CHANGED
@@ -97,8 +97,7 @@
97
97
  transform: translateX(calc(100% + var(--viewport-padding)));
98
98
  }
99
99
 
100
- .byline-toast-viewport.bottom-right
101
- .byline-toast-root[data-starting-style] {
100
+ .byline-toast-viewport.bottom-right .byline-toast-root[data-starting-style] {
102
101
  opacity: 0;
103
102
  transform: translateX(calc(100% + var(--viewport-padding)));
104
103
  }
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "private": false,
4
4
  "type": "module",
5
5
  "license": "MPL-2.0",
6
- "version": "1.10.3",
6
+ "version": "1.11.1",
7
7
  "engines": {
8
8
  "node": ">=20.9.0"
9
9
  },
@@ -65,9 +65,9 @@
65
65
  "react-diff-viewer-continued": "^4.2.2",
66
66
  "zod": "^4.4.3",
67
67
  "zod-form-data": "^3.0.1",
68
- "@byline/admin": "1.10.3",
69
- "@byline/client": "1.10.3",
70
- "@byline/core": "1.10.3"
68
+ "@byline/client": "1.11.1",
69
+ "@byline/admin": "1.11.1",
70
+ "@byline/core": "1.11.1"
71
71
  },
72
72
  "peerDependencies": {
73
73
  "react": "^19.0.0",
package/src/components/button/button.module.css CHANGED
@@ -123,10 +123,7 @@
123
123
  );
124
124
  color: var(
125
125
  --button-variant-filled-foreground-disabled,
126
- oklch(
127
- from var(--button-variant-filled-foreground) calc(l * 0.9)
128
- calc(c * 0.85) h
129
- )
126
+ oklch(from var(--button-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h)
130
127
  );
131
128
  }
132
129
 
@@ -157,16 +154,11 @@
157
154
  :global(.byline-button-filled-weak)[disabled] {
158
155
  background-color: var(
159
156
  --button-variant-filled-weak-disabled,
160
- oklch(
161
- from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h
162
- )
157
+ oklch(from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h)
163
158
  );
164
159
  color: var(
165
160
  --button-variant-filled-weak-foreground-disabled,
166
- oklch(
167
- from var(--button-variant-filled-weak-foreground) calc(l * 0.9)
168
- calc(c * 0.85) h
169
- )
161
+ oklch(from var(--button-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h)
170
162
  );
171
163
  }
172
164
 
@@ -183,16 +175,11 @@
183
175
  :global(.byline-button-outlined)[disabled] {
184
176
  border-color: var(
185
177
  --button-variant-outlined-border-disabled,
186
- oklch(
187
- from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h
188
- )
178
+ oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h)
189
179
  );
190
180
  color: var(
191
181
  --button-variant-outlined-foreground-disabled,
192
- oklch(
193
- from var(--button-variant-outlined-foreground) calc(l * 1.1)
194
- calc(c * 0.7) h
195
- )
182
+ oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h)
196
183
  );
197
184
  }
198
185
 
@@ -225,16 +212,11 @@
225
212
  background: unset;
226
213
  background-color: var(
227
214
  --button-variant-gradient-disabled,
228
- oklch(
229
- from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * 0.85) h
230
- )
215
+ oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * 0.85) h)
231
216
  );
232
217
  color: var(
233
218
  --button-variant-gradient-foreground-disabled,
234
- oklch(
235
- from var(--button-variant-gradient-foreground) calc(l * 0.9)
236
- calc(c * 0.85) h
237
- )
219
+ oklch(from var(--button-variant-gradient-foreground) calc(l * 0.9) calc(c * 0.85) h)
238
220
  );
239
221
  }
240
222
 
@@ -265,9 +247,7 @@
265
247
  .text[disabled],
266
248
  :global(.byline-button-text):disabled,
267
249
  :global(.byline-button-text)[disabled] {
268
- color: oklch(
269
- from var(--button-variant-text-foreground) calc(l * 1.5) calc(c * 0.5) h
270
- );
250
+ color: oklch(from var(--button-variant-text-foreground) calc(l * 1.5) calc(c * 0.5) h);
271
251
  }
272
252
 
273
253
  .text:hover,
@@ -292,18 +272,14 @@
292
272
  --button-variant-filled-hover: var(--fill-primary-strong-hover);
293
273
  --button-variant-filled-disabled: var(--fill-primary-strong-disabled);
294
274
  --button-variant-filled-foreground: var(--text-on-primary-strong);
295
- --button-variant-filled-foreground-disabled: var(
296
- --text-on-primary-strong-disabled
297
- );
275
+ --button-variant-filled-foreground-disabled: var(--text-on-primary-strong-disabled);
298
276
 
299
277
  /* Filled Weak */
300
278
  --button-variant-filled-weak: var(--fill-primary-weak);
301
279
  --button-variant-filled-weak-hover: var(--fill-primary-weak-hover);
302
280
  --button-variant-filled-weak-disabled: var(--fill-primary-weak-disabled);
303
281
  --button-variant-filled-weak-foreground: var(--text-on-primary-weak);
304
- --button-variant-filled-weak-foreground-disabled: var(
305
- --text-on-primary-weak-disabled
306
- );
282
+ --button-variant-filled-weak-foreground-disabled: var(--text-on-primary-weak-disabled);
307
283
 
308
284
  /* Outlined */
309
285
  --button-variant-outlined: var(--fill-primary-outlined);
@@ -311,9 +287,7 @@
311
287
  --button-variant-outlined-border: var(--stroke-primary);
312
288
  --button-variant-outlined-border-disabled: var(--stroke-primary-disabled);
313
289
  --button-variant-outlined-foreground: var(--text-on-primary-outlined);
314
- --button-variant-outlined-foreground-disabled: var(
315
- --text-on-primary-outlined-disabled
316
- );
290
+ --button-variant-outlined-foreground-disabled: var(--text-on-primary-outlined-disabled);
317
291
 
318
292
  /* Text */
319
293
  --button-variant-text: var(--fill-primary-text);
@@ -325,9 +299,7 @@
325
299
  --button-variant-gradient-end: var(--gradient-primary-end);
326
300
  --button-variant-gradient-foreground: var(--gradient-primary-foreground);
327
301
  --button-variant-gradient-disabled: var(--gradient-primary-disabled);
328
- --button-variant-gradient-foreground-disabled: var(
329
- --text-on-primary-strong-disabled
330
- );
302
+ --button-variant-gradient-foreground-disabled: var(--text-on-primary-strong-disabled);
331
303
  }
332
304
 
333
305
  .secondary,
@@ -339,18 +311,14 @@
339
311
  --button-variant-filled-hover: var(--fill-secondary-strong-hover);
340
312
  --button-variant-filled-disabled: var(--fill-secondary-strong-disabled);
341
313
  --button-variant-filled-foreground: var(--text-on-secondary-strong);
342
- --button-variant-filled-foreground-disabled: var(
343
- --text-on-secondary-strong-disabled
344
- );
314
+ --button-variant-filled-foreground-disabled: var(--text-on-secondary-strong-disabled);
345
315
 
346
316
  /* Filled Weak */
347
317
  --button-variant-filled-weak: var(--fill-secondary-weak);
348
318
  --button-variant-filled-weak-hover: var(--fill-secondary-weak-hover);
349
319
  --button-variant-filled-weak-disabled: var(--fill-secondary-weak-disabled);
350
320
  --button-variant-filled-weak-foreground: var(--text-on-secondary-weak);
351
- --button-variant-filled-weak-foreground-disabled: var(
352
- --text-on-secondary-weak-disabled
353
- );
321
+ --button-variant-filled-weak-foreground-disabled: var(--text-on-secondary-weak-disabled);
354
322
 
355
323
  /* Outlined */
356
324
  --button-variant-outlined: var(--fill-secondary-outlined);
@@ -358,9 +326,7 @@
358
326
  --button-variant-outlined-border-disabled: var(--stroke-secondary-disabled);
359
327
  --button-variant-outlined-hover: var(--fill-secondary-outlined-hover);
360
328
  --button-variant-outlined-foreground: var(--text-on-secondary-outlined);
361
- --button-variant-outlined-foreground-disabled: var(
362
- --text-on-secondary-outlined-disabled
363
- );
329
+ --button-variant-outlined-foreground-disabled: var(--text-on-secondary-outlined-disabled);
364
330
 
365
331
  /* Text */
366
332
  --button-variant-text: var(--fill-secondary-text);
@@ -372,9 +338,7 @@
372
338
  --button-variant-gradient-end: var(--gradient-secondary-end);
373
339
  --button-variant-gradient-foreground: var(--gradient-secondary-foreground);
374
340
  --button-variant-gradient-disabled: var(--gradient-secondary-disabled);
375
- --button-variant-gradient-foreground-disabled: var(
376
- --text-on-secondary-strong-disabled
377
- );
341
+ --button-variant-gradient-foreground-disabled: var(--text-on-secondary-strong-disabled);
378
342
  }
379
343
 
380
344
  .noeffect,
@@ -386,18 +350,14 @@
386
350
  --button-variant-filled-hover: var(--fill-noeffect-strong-hover);
387
351
  --button-variant-filled-disabled: var(--fill-noeffect-strong-disabled);
388
352
  --button-variant-filled-foreground: var(--text-on-noeffect-strong);
389
- --button-variant-filled-foreground-disabled: var(
390
- --text-on-noeffect-strong-disabled
391
- );
353
+ --button-variant-filled-foreground-disabled: var(--text-on-noeffect-strong-disabled);
392
354
 
393
355
  /* Filled Weak */
394
356
  --button-variant-filled-weak: var(--fill-noeffect-weak);
395
357
  --button-variant-filled-weak-hover: var(--fill-noeffect-weak-hover);
396
358
  --button-variant-filled-weak-disabled: var(--fill-noeffect-weak-disabled);
397
359
  --button-variant-filled-weak-foreground: var(--text-on-noeffect-weak);
398
- --button-variant-filled-weak-foreground-disabled: var(
399
- --text-on-noeffect-weak-disabled
400
- );
360
+ --button-variant-filled-weak-foreground-disabled: var(--text-on-noeffect-weak-disabled);
401
361
 
402
362
  /* Outlined */
403
363
  --button-variant-outlined: var(--fill-noeffect-outlined);
@@ -406,9 +366,7 @@
406
366
  --button-variant-outlined-border: var(--stroke-noeffect);
407
367
  --button-variant-outlined-border-disabled: var(--stroke-noeffect-disabled);
408
368
  --button-variant-outlined-foreground: var(--text-on-noeffect-outlined);
409
- --button-variant-outlined-foreground-disabled: var(
410
- --text-on-noeffect-outlined-disabled
411
- );
369
+ --button-variant-outlined-foreground-disabled: var(--text-on-noeffect-outlined-disabled);
412
370
 
413
371
  /* Text */
414
372
  --button-variant-text: var(--fill-noeffect-text);
@@ -420,9 +378,7 @@
420
378
  --button-variant-gradient-end: var(--gradient-noeffect-end);
421
379
  --button-variant-gradient-foreground: var(--gradient-noeffect-foreground);
422
380
  --button-variant-gradient-disabled: var(--gradient-noeffect-disabled);
423
- --button-variant-gradient-foreground-disabled: var(
424
- --text-on-noeffect-strong-disabled
425
- );
381
+ --button-variant-gradient-foreground-disabled: var(--text-on-noeffect-strong-disabled);
426
382
  }
427
383
 
428
384
  .success,
@@ -434,18 +390,14 @@
434
390
  --button-variant-filled-hover: var(--fill-success-strong-hover);
435
391
  --button-variant-filled-disabled: var(--fill-success-strong-disabled);
436
392
  --button-variant-filled-foreground: var(--text-on-success-strong);
437
- --button-variant-filled-foreground-disabled: var(
438
- --text-on-success-strong-disabled
439
- );
393
+ --button-variant-filled-foreground-disabled: var(--text-on-success-strong-disabled);
440
394
 
441
395
  /* Filled Weak */
442
396
  --button-variant-filled-weak: var(--fill-success-weak);
443
397
  --button-variant-filled-weak-hover: var(--fill-success-weak-hover);
444
398
  --button-variant-filled-weak-disabled: var(--fill-success-weak-disabled);
445
399
  --button-variant-filled-weak-foreground: var(--text-on-success-weak);
446
- --button-variant-filled-weak-foreground-disabled: var(
447
- --text-on-success-weak-disabled
448
- );
400
+ --button-variant-filled-weak-foreground-disabled: var(--text-on-success-weak-disabled);
449
401
 
450
402
  /* Outlined */
451
403
  --button-variant-outlined: var(--fill-success-outlined);
@@ -453,9 +405,7 @@
453
405
  --button-variant-outlined-border: var(--stroke-success);
454
406
  --button-variant-outlined-border-disabled: var(--stroke-success-disabled);
455
407
  --button-variant-outlined-foreground: var(--text-on-success-outlined);
456
- --button-variant-outlined-foreground-disabled: var(
457
- --text-on-success-outlined-disabled
458
- );
408
+ --button-variant-outlined-foreground-disabled: var(--text-on-success-outlined-disabled);
459
409
 
460
410
  /* Text */
461
411
  --button-variant-text: transparent;
@@ -467,9 +417,7 @@
467
417
  --button-variant-gradient-end: var(--gradient-success-end);
468
418
  --button-variant-gradient-foreground: var(--gradient-success-foreground);
469
419
  --button-variant-gradient-disabled: var(--gradient-success-disabled);
470
- --button-variant-gradient-foreground-disabled: var(
471
- --text-on-success-strong-disabled
472
- );
420
+ --button-variant-gradient-foreground-disabled: var(--text-on-success-strong-disabled);
473
421
  }
474
422
 
475
423
  .info,
@@ -481,18 +429,14 @@
481
429
  --button-variant-filled-hover: var(--fill-info-strong-hover);
482
430
  --button-variant-filled-disabled: var(--fill-info-strong-disabled);
483
431
  --button-variant-filled-foreground: var(--text-on-info-strong);
484
- --button-variant-filled-foreground-disabled: var(
485
- --text-on-info-strong-disabled
486
- );
432
+ --button-variant-filled-foreground-disabled: var(--text-on-info-strong-disabled);
487
433
 
488
434
  /* Filled Weak */
489
435
  --button-variant-filled-weak: var(--fill-info-weak);
490
436
  --button-variant-filled-weak-hover: var(--fill-info-weak-hover);
491
437
  --button-variant-filled-weak-disabled: var(--fill-info-weak-disabled);
492
438
  --button-variant-filled-weak-foreground: var(--text-on-info-weak);
493
- --button-variant-filled-weak-foreground-disabled: var(
494
- --text-on-info-weak-disabled
495
- );
439
+ --button-variant-filled-weak-foreground-disabled: var(--text-on-info-weak-disabled);
496
440
 
497
441
  /* Outlined */
498
442
  --button-variant-outlined: transparent;
@@ -500,9 +444,7 @@
500
444
  --button-variant-outlined-border: var(--stroke-info);
501
445
  --button-variant-outlined-border-disabled: var(--stroke-info-disabled);
502
446
  --button-variant-outlined-foreground: var(--text-on-info-outlined);
503
- --button-variant-outlined-foreground-disabled: var(
504
- --text-on-info-outlined-disabled
505
- );
447
+ --button-variant-outlined-foreground-disabled: var(--text-on-info-outlined-disabled);
506
448
 
507
449
  /* Text */
508
450
  --button-variant-text: transparent;
@@ -514,9 +456,7 @@
514
456
  --button-variant-gradient-end: var(--gradient-info-end);
515
457
  --button-variant-gradient-foreground: var(--gradient-info-foreground);
516
458
  --button-variant-gradient-disabled: var(--gradient-info-disabled);
517
- --button-variant-gradient-foreground-disabled: var(
518
- --text-on-info-strong-disabled
519
- );
459
+ --button-variant-gradient-foreground-disabled: var(--text-on-info-strong-disabled);
520
460
  }
521
461
 
522
462
  .warning,
@@ -528,18 +468,14 @@
528
468
  --button-variant-filled-hover: var(--fill-warning-strong-hover);
529
469
  --button-variant-filled-disabled: var(--fill-warning-strong-disabled);
530
470
  --button-variant-filled-foreground: var(--text-on-warning-strong);
531
- --button-variant-filled-foreground-disabled: var(
532
- --text-on-warning-strong-disabled
533
- );
471
+ --button-variant-filled-foreground-disabled: var(--text-on-warning-strong-disabled);
534
472
 
535
473
  /* Filled Weak */
536
474
  --button-variant-filled-weak: var(--fill-warning-weak);
537
475
  --button-variant-filled-weak-hover: var(--fill-warning-weak-hover);
538
476
  --button-variant-filled-weak-disabled: var(--fill-warning-weak-disabled);
539
477
  --button-variant-filled-weak-foreground: var(--text-on-warning-weak);
540
- --button-variant-filled-weak-foreground-disabled: var(
541
- --text-on-warning-weak-disabled
542
- );
478
+ --button-variant-filled-weak-foreground-disabled: var(--text-on-warning-weak-disabled);
543
479
 
544
480
  /* Outlined */
545
481
  --button-variant-outlined: var(--fill-warning-outlined);
@@ -547,9 +483,7 @@
547
483
  --button-variant-outlined-border: var(--stroke-warning);
548
484
  --button-variant-outlined-border-disabled: var(--stroke-warning-disabled);
549
485
  --button-variant-outlined-foreground: var(--text-on-warning-outlined);
550
- --button-variant-outlined-foreground-disabled: var(
551
- --text-on-warning-outlined-disabled
552
- );
486
+ --button-variant-outlined-foreground-disabled: var(--text-on-warning-outlined-disabled);
553
487
 
554
488
  /* Text */
555
489
  --button-variant-text: transparent;
@@ -561,9 +495,7 @@
561
495
  --button-variant-gradient-end: var(--gradient-warning-end);
562
496
  --button-variant-gradient-foreground: var(--gradient-warning-foreground);
563
497
  --button-variant-gradient-disabled: var(--gradient-warning-disabled);
564
- --button-variant-gradient-foreground-disabled: var(
565
- --text-on-warning-strong-disabled
566
- );
498
+ --button-variant-gradient-foreground-disabled: var(--text-on-warning-strong-disabled);
567
499
  }
568
500
 
569
501
  .danger,
@@ -575,18 +507,14 @@
575
507
  --button-variant-filled-hover: var(--fill-danger-strong-hover);
576
508
  --button-variant-filled-disabled: var(--fill-danger-strong-disabled);
577
509
  --button-variant-filled-foreground: var(--text-on-danger-strong);
578
- --button-variant-filled-foreground-disabled: var(
579
- --text-on-danger-strong-disabled
580
- );
510
+ --button-variant-filled-foreground-disabled: var(--text-on-danger-strong-disabled);
581
511
 
582
512
  /* Filled Weak */
583
513
  --button-variant-filled-weak: var(--fill-danger-weak);
584
514
  --button-variant-filled-weak-hover: var(--fill-danger-weak-hover);
585
515
  --button-variant-filled-weak-disabled: var(--fill-danger-weak-disabled);
586
516
  --button-variant-filled-weak-foreground: var(--text-on-danger-weak);
587
- --button-variant-filled-weak-foreground-disabled: var(
588
- --text-on-danger-weak-disabled
589
- );
517
+ --button-variant-filled-weak-foreground-disabled: var(--text-on-danger-weak-disabled);
590
518
 
591
519
  /* Outlined */
592
520
  --button-variant-outlined: transparent;
@@ -594,9 +522,7 @@
594
522
  --button-variant-outlined-border: var(--stroke-danger);
595
523
  --button-variant-outlined-border-disabled: var(--stroke-danger-disabled);
596
524
  --button-variant-outlined-foreground: var(--text-on-danger-outlined);
597
- --button-variant-outlined-foreground-disabled: var(
598
- --text-on-danger-outlined-disabled
599
- );
525
+ --button-variant-outlined-foreground-disabled: var(--text-on-danger-outlined-disabled);
600
526
 
601
527
  /* Text */
602
528
  --button-variant-text: transparent;
@@ -608,9 +534,7 @@
608
534
  --button-variant-gradient-end: var(--gradient-danger-end);
609
535
  --button-variant-gradient-foreground: var(--gradient-danger-foreground);
610
536
  --button-variant-gradient-disabled: var(--gradient-danger-disabled);
611
- --button-variant-gradient-foreground-disabled: var(
612
- --text-on-danger-strong-disabled
613
- );
537
+ --button-variant-gradient-foreground-disabled: var(--text-on-danger-strong-disabled);
614
538
  }
615
539
 
616
540
  /* Full width */
package/src/components/chips/chip.module.css CHANGED
@@ -157,10 +157,7 @@
157
157
  );
158
158
  color: var(
159
159
  --chip-variant-filled-foreground-disabled,
160
- oklch(
161
- from var(--chip-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85)
162
- h
163
- )
160
+ oklch(from var(--chip-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h)
164
161
  );
165
162
  }
166
163
 
@@ -195,10 +192,7 @@
195
192
  );
196
193
  color: var(
197
194
  --chip-variant-filled-weak-foreground-disabled,
198
- oklch(
199
- from var(--chip-variant-filled-weak-foreground) calc(l * 0.9)
200
- calc(c * 0.85) h
201
- )
195
+ oklch(from var(--chip-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h)
202
196
  );
203
197
  }
204
198
 
@@ -218,16 +212,11 @@
218
212
  :global(.byline-chip-outlined)[disabled] {
219
213
  border-color: var(
220
214
  --chip-variant-outlined-border-disabled,
221
- oklch(
222
- from var(--chip-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h
223
- )
215
+ oklch(from var(--chip-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h)
224
216
  );
225
217
  color: var(
226
218
  --chip-variant-outlined-foreground-disabled,
227
- oklch(
228
- from var(--chip-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7)
229
- h
230
- )
219
+ oklch(from var(--chip-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h)
231
220
  );
232
221
  }
233
222
 
@@ -253,9 +242,7 @@
253
242
  .text[disabled],
254
243
  :global(.byline-chip-text):disabled,
255
244
  :global(.byline-chip-text)[disabled] {
256
- color: oklch(
257
- from var(--chip-variant-text-foreground) calc(l * 1.5) calc(c * 0.5) h
258
- );
245
+ color: oklch(from var(--chip-variant-text-foreground) calc(l * 1.5) calc(c * 0.5) h);
259
246
  }
260
247
 
261
248
  .text:hover,
@@ -280,18 +267,14 @@
280
267
  --chip-variant-filled-hover: var(--fill-primary-strong-hover);
281
268
  --chip-variant-filled-disabled: var(--fill-primary-strong-disabled);
282
269
  --chip-variant-filled-foreground: var(--text-on-primary-strong);
283
- --chip-variant-filled-foreground-disabled: var(
284
- --text-on-primary-strong-disabled
285
- );
270
+ --chip-variant-filled-foreground-disabled: var(--text-on-primary-strong-disabled);
286
271
 
287
272
  /* Filled Weak */
288
273
  --chip-variant-filled-weak: var(--fill-primary-weak);
289
274
  --chip-variant-filled-weak-hover: var(--fill-primary-weak-hover);
290
275
  --chip-variant-filled-weak-disabled: var(--fill-primary-weak-disabled);
291
276
  --chip-variant-filled-weak-foreground: var(--text-on-primary-weak);
292
- --chip-variant-filled-weak-foreground-disabled: var(
293
- --text-on-primary-weak-disabled
294
- );
277
+ --chip-variant-filled-weak-foreground-disabled: var(--text-on-primary-weak-disabled);
295
278
 
296
279
  /* Outlined */
297
280
  --chip-variant-outlined: var(--fill-primary-outlined);
@@ -299,9 +282,7 @@
299
282
  --chip-variant-outlined-border: var(--stroke-primary);
300
283
  --chip-variant-outlined-border-disabled: var(--stroke-primary-disabled);
301
284
  --chip-variant-outlined-foreground: var(--text-on-primary-outlined);
302
- --chip-variant-outlined-foreground-disabled: var(
303
- --text-on-primary-outlined-disabled
304
- );
285
+ --chip-variant-outlined-foreground-disabled: var(--text-on-primary-outlined-disabled);
305
286
  }
306
287
 
307
288
  .secondary,
@@ -313,18 +294,14 @@
313
294
  --chip-variant-filled-hover: var(--fill-secondary-strong-hover);
314
295
  --chip-variant-filled-disabled: var(--fill-secondary-strong-disabled);
315
296
  --chip-variant-filled-foreground: var(--text-on-secondary-strong);
316
- --chip-variant-filled-foreground-disabled: var(
317
- --text-on-secondary-strong-disabled
318
- );
297
+ --chip-variant-filled-foreground-disabled: var(--text-on-secondary-strong-disabled);
319
298
 
320
299
  /* Filled Weak */
321
300
  --chip-variant-filled-weak: var(--fill-secondary-weak);
322
301
  --chip-variant-filled-weak-foreground: var(--text-on-secondary-weak);
323
302
  --chip-variant-filled-weak-hover: var(--fill-secondary-weak-hover);
324
303
  --chip-variant-filled-weak-disabled: var(--fill-secondary-weak-disabled);
325
- --chip-variant-filled-weak-foreground-disabled: var(
326
- --text-on-secondary-weak-disabled
327
- );
304
+ --chip-variant-filled-weak-foreground-disabled: var(--text-on-secondary-weak-disabled);
328
305
 
329
306
  /* Outlined */
330
307
  --chip-variant-outlined: var(--fill-secondary-outlined);
@@ -332,9 +309,7 @@
332
309
  --chip-variant-outlined-border: var(--stroke-secondary);
333
310
  --chip-variant-outlined-border-disabled: var(--stroke-secondary-disabled);
334
311
  --chip-variant-outlined-foreground: var(--text-on-secondary-outlined);
335
- --chip-variant-outlined-foreground-disabled: var(
336
- --text-on-secondary-outlined-disabled
337
- );
312
+ --chip-variant-outlined-foreground-disabled: var(--text-on-secondary-outlined-disabled);
338
313
  }
339
314
 
340
315
  .noeffect,
@@ -346,18 +321,14 @@
346
321
  --chip-variant-filled-hover: var(--fill-noeffect-strong-hover);
347
322
  --chip-variant-filled-disabled: var(--fill-noeffect-strong-disabled);
348
323
  --chip-variant-filled-foreground: var(--text-on-noeffect-strong);
349
- --chip-variant-filled-foreground-disabled: var(
350
- --text-on-noeffect-strong-disabled
351
- );
324
+ --chip-variant-filled-foreground-disabled: var(--text-on-noeffect-strong-disabled);
352
325
 
353
326
  /* Filled Weak */
354
327
  --chip-variant-filled-weak: var(--fill-noeffect-weak);
355
328
  --chip-variant-filled-weak-hover: var(--fill-noeffect-weak-hover);
356
329
  --chip-variant-filled-weak-disabled: var(--fill-noeffect-weak-disabled);
357
330
  --chip-variant-filled-weak-foreground: var(--text-on-noeffect-weak);
358
- --chip-variant-filled-weak-foreground-disabled: var(
359
- --text-on-noeffect-weak-disabled
360
- );
331
+ --chip-variant-filled-weak-foreground-disabled: var(--text-on-noeffect-weak-disabled);
361
332
 
362
333
  /* Outlined */
363
334
  --chip-variant-outlined: var(--fill-noeffect-outlined);
@@ -365,9 +336,7 @@
365
336
  --chip-variant-outlined-border: var(--stroke-noeffect);
366
337
  --chip-variant-outlined-border-disabled: var(--stroke-noeffect-disabled);
367
338
  --chip-variant-outlined-foreground: var(--text-on-noeffect-outlined);
368
- --chip-variant-outlined-foreground-disabled: var(
369
- --text-on-noeffect-outlined-disabled
370
- );
339
+ --chip-variant-outlined-foreground-disabled: var(--text-on-noeffect-outlined-disabled);
371
340
  }
372
341
 
373
342
  .success,
@@ -379,18 +348,14 @@
379
348
  --chip-variant-filled-hover: var(--fill-success-strong-hover);
380
349
  --chip-variant-filled-disabled: var(--fill-success-strong-disabled);
381
350
  --chip-variant-filled-foreground: var(--text-on-success-strong);
382
- --chip-variant-filled-foreground-disabled: var(
383
- --text-on-success-strong-disabled
384
- );
351
+ --chip-variant-filled-foreground-disabled: var(--text-on-success-strong-disabled);
385
352
 
386
353
  /* Filled Weak */
387
354
  --chip-variant-filled-weak: var(--fill-success-weak);
388
355
  --chip-variant-filled-weak-hover: var(--fill-success-weak-hover);
389
356
  --chip-variant-filled-weak-disabled: var(--fill-success-weak-disabled);
390
357
  --chip-variant-filled-weak-foreground: var(--text-on-success-weak);
391
- --chip-variant-filled-weak-foreground-disabled: var(
392
- --text-on-success-weak-disabled
393
- );
358
+ --chip-variant-filled-weak-foreground-disabled: var(--text-on-success-weak-disabled);
394
359
 
395
360
  /* Outlined */
396
361
  --chip-variant-outlined: var(--fill-success-outlined);
@@ -398,9 +363,7 @@
398
363
  --chip-variant-outlined-border: var(--stroke-success);
399
364
  --chip-variant-outlined-border-disabled: var(--stroke-success-disabled);
400
365
  --chip-variant-outlined-foreground: var(--text-on-success-outlined);
401
- --chip-variant-outlined-foreground-disabled: var(
402
- --text-on-success-outlined-disabled
403
- );
366
+ --chip-variant-outlined-foreground-disabled: var(--text-on-success-outlined-disabled);
404
367
  }
405
368
 
406
369
  .info,
@@ -412,18 +375,14 @@
412
375
  --chip-variant-filled-hover: var(--fill-info-strong-hover);
413
376
  --chip-variant-filled-disabled: var(--fill-info-strong-disabled);
414
377
  --chip-variant-filled-foreground: var(--text-on-info-strong);
415
- --chip-variant-filled-foreground-disabled: var(
416
- --text-on-info-strong-disabled
417
- );
378
+ --chip-variant-filled-foreground-disabled: var(--text-on-info-strong-disabled);
418
379
 
419
380
  /* Filled Weak */
420
381
  --chip-variant-filled-weak: var(--fill-info-weak);
421
382
  --chip-variant-filled-weak-hover: var(--fill-info-weak-hover);
422
383
  --chip-variant-filled-weak-disabled: var(--fill-info-weak-disabled);
423
384
  --chip-variant-filled-weak-foreground: var(--text-on-info-weak);
424
- --chip-variant-filled-weak-foreground-disabled: var(
425
- --text-on-info-weak-disabled
426
- );
385
+ --chip-variant-filled-weak-foreground-disabled: var(--text-on-info-weak-disabled);
427
386
 
428
387
  /* Outlined */
429
388
  --chip-variant-outlined: var(--fill-info-outlined);
@@ -431,9 +390,7 @@
431
390
  --chip-variant-outlined-border: var(--stroke-info);
432
391
  --chip-variant-outlined-border-disabled: var(--stroke-info-disabled);
433
392
  --chip-variant-outlined-foreground: var(--text-on-info-outlined);
434
- --chip-variant-outlined-foreground-disabled: var(
435
- --text-on-info-outlined-disabled
436
- );
393
+ --chip-variant-outlined-foreground-disabled: var(--text-on-info-outlined-disabled);
437
394
  }
438
395
 
439
396
  .warning,
@@ -445,18 +402,14 @@
445
402
  --chip-variant-filled-hover: var(--fill-warning-strong-hover);
446
403
  --chip-variant-filled-disabled: var(--fill-warning-strong-disabled);
447
404
  --chip-variant-filled-foreground: var(--text-on-warning-strong);
448
- --chip-variant-filled-foreground-disabled: var(
449
- --text-on-warning-strong-disabled
450
- );
405
+ --chip-variant-filled-foreground-disabled: var(--text-on-warning-strong-disabled);
451
406
 
452
407
  /* Filled Weak */
453
408
  --chip-variant-filled-weak: var(--fill-warning-weak);
454
409
  --chip-variant-filled-weak-hover: var(--fill-warning-weak-hover);
455
410
  --chip-variant-filled-weak-disabled: var(--fill-warning-weak-disabled);
456
411
  --chip-variant-filled-weak-foreground: var(--text-on-warning-weak);
457
- --chip-variant-filled-weak-foreground-disabled: var(
458
- --text-on-warning-weak-disabled
459
- );
412
+ --chip-variant-filled-weak-foreground-disabled: var(--text-on-warning-weak-disabled);
460
413
 
461
414
  /* Outlined */
462
415
  --chip-variant-outlined: var(--fill-warning-outlined);
@@ -464,9 +417,7 @@
464
417
  --chip-variant-outlined-border: var(--stroke-warning);
465
418
  --chip-variant-outlined-border-disabled: var(--stroke-warning-disabled);
466
419
  --chip-variant-outlined-foreground: var(--text-on-warning-outlined);
467
- --chip-variant-outlined-foreground-disabled: var(
468
- --text-on-warning-outlined-disabled
469
- );
420
+ --chip-variant-outlined-foreground-disabled: var(--text-on-warning-outlined-disabled);
470
421
  }
471
422
 
472
423
  .danger,
@@ -478,18 +429,14 @@
478
429
  --chip-variant-filled-hover: var(--fill-danger-strong-hover);
479
430
  --chip-variant-filled-disabled: var(--fill-danger-strong-disabled);
480
431
  --chip-variant-filled-foreground: var(--text-on-danger-strong);
481
- --chip-variant-filled-foreground-disabled: var(
482
- --text-on-danger-strong-disabled
483
- );
432
+ --chip-variant-filled-foreground-disabled: var(--text-on-danger-strong-disabled);
484
433
 
485
434
  /* Filled Weak */
486
435
  --chip-variant-filled-weak: var(--fill-danger-weak);
487
436
  --chip-variant-filled-weak-hover: var(--fill-danger-weak-hover);
488
437
  --chip-variant-filled-weak-disabled: var(--fill-danger-weak-disabled);
489
438
  --chip-variant-filled-weak-foreground: var(--text-on-danger-weak);
490
- --chip-variant-filled-weak-foreground-disabled: var(
491
- --text-on-danger-weak-disabled
492
- );
439
+ --chip-variant-filled-weak-foreground-disabled: var(--text-on-danger-weak-disabled);
493
440
 
494
441
  /* Outlined */
495
442
  --chip-variant-outlined: transparent;
@@ -497,8 +444,6 @@
497
444
  --chip-variant-outlined-border: var(--stroke-danger);
498
445
  --chip-variant-outlined-border-disabled: var(--stroke-danger-disabled);
499
446
  --chip-variant-outlined-foreground: var(--text-on-danger-outlined);
500
- --chip-variant-outlined-foreground-disabled: var(
501
- --text-on-danger-outlined-disabled
502
- );
447
+ --chip-variant-outlined-foreground-disabled: var(--text-on-danger-outlined-disabled);
503
448
  }
504
449
  }
package/src/components/inputs/checkbox.module.css CHANGED
@@ -75,8 +75,7 @@
75
75
 
76
76
  /* Style for the "checked" state — animation overrides the transition for bouncy entry */
77
77
  .indicator[data-checked] .icon,
78
- :global(.byline-checkbox-indicator)[data-checked]
79
- :global(.byline-checkbox-icon) {
78
+ :global(.byline-checkbox-indicator)[data-checked] :global(.byline-checkbox-icon) {
80
79
  animation: checkBoxIn 0.3s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
81
80
  opacity: 1;
82
81
  transform: scale(1);
@@ -84,8 +83,7 @@
84
83
 
85
84
  /* Style for the "unchecked" state — no animation, let the CSS transition handle the exit */
86
85
  .indicator[data-unchecked] .icon,
87
- :global(.byline-checkbox-indicator)[data-unchecked]
88
- :global(.byline-checkbox-icon) {
86
+ :global(.byline-checkbox-indicator)[data-unchecked] :global(.byline-checkbox-icon) {
89
87
  opacity: 0;
90
88
  transform: scale(0.8);
91
89
  }
@@ -201,9 +199,7 @@
201
199
  :global(.byline-checkbox-secondary) {
202
200
  --checkbox-variant-outlined-border: var(--fill-secondary-strong);
203
201
  --checkbox-variant-outlined: var(--fill-secondary-strong);
204
- --checkbox-variant-outlined-hover-border: var(
205
- --fill-secondary-strong-hover
206
- );
202
+ --checkbox-variant-outlined-hover-border: var(--fill-secondary-strong-hover);
207
203
  --checkbox-variant-outline-ring-color: var(--ring-secondary);
208
204
  --checkbox-variant-filled: var(--fill-secondary-strong);
209
205
  --checkbox-icon-color: black;
package/src/components/notifications/toast.module.css CHANGED
@@ -130,25 +130,16 @@
130
130
  @media (min-width: 48rem) {
131
131
  .viewport.top-right .root[data-starting-style],
132
132
  .viewport.bottom-right .root[data-starting-style],
133
- :global(
134
- .byline-toast-viewport.top-right .byline-toast-root[data-starting-style]
135
- ),
136
- :global(
137
- .byline-toast-viewport.bottom-right
138
- .byline-toast-root[data-starting-style]
139
- ) {
133
+ :global(.byline-toast-viewport.top-right .byline-toast-root[data-starting-style]),
134
+ :global(.byline-toast-viewport.bottom-right .byline-toast-root[data-starting-style]) {
140
135
  opacity: 0;
141
136
  transform: translateX(calc(100% + var(--viewport-padding)));
142
137
  }
143
138
 
144
139
  .viewport.top-left .root[data-starting-style],
145
140
  .viewport.bottom-left .root[data-starting-style],
146
- :global(
147
- .byline-toast-viewport.top-left .byline-toast-root[data-starting-style]
148
- ),
149
- :global(
150
- .byline-toast-viewport.bottom-left .byline-toast-root[data-starting-style]
151
- ) {
141
+ :global(.byline-toast-viewport.top-left .byline-toast-root[data-starting-style]),
142
+ :global(.byline-toast-viewport.bottom-left .byline-toast-root[data-starting-style]) {
152
143
  opacity: 0;
153
144
  transform: translateX(calc(-100% - var(--viewport-padding)));
154
145
  }
@@ -162,16 +153,12 @@
162
153
 
163
154
  .root[data-ending-style][data-swipe-direction="right"],
164
155
  :global(.byline-toast-root[data-ending-style][data-swipe-direction="right"]) {
165
- transform: translateX(
166
- calc(var(--toast-swipe-movement-x, 0) + 100% + var(--viewport-padding))
167
- );
156
+ transform: translateX(calc(var(--toast-swipe-movement-x, 0) + 100% + var(--viewport-padding)));
168
157
  }
169
158
 
170
159
  .root[data-ending-style][data-swipe-direction="left"],
171
160
  :global(.byline-toast-root[data-ending-style][data-swipe-direction="left"]) {
172
- transform: translateX(
173
- calc(var(--toast-swipe-movement-x, 0) - 100% - var(--viewport-padding))
174
- );
161
+ transform: translateX(calc(var(--toast-swipe-movement-x, 0) - 100% - var(--viewport-padding)));
175
162
  }
176
163
 
177
164
  .root[data-ending-style][data-swipe-direction="down"],
package/src/components/shimmer/shimmer.module.css CHANGED
@@ -16,12 +16,7 @@
16
16
  position: relative;
17
17
  overflow: hidden;
18
18
  background-color: #f0f0f0;
19
- background-image: linear-gradient(
20
- 90deg,
21
- transparent,
22
- rgba(255, 255, 255, 0.6),
23
- transparent
24
- );
19
+ background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
25
20
  background-size: 200% 100%;
26
21
  animation: shimmer 1.5s infinite;
27
22
  }
@@ -31,12 +26,7 @@
31
26
  .shimmer,
32
27
  :global(.byline-shimmer) {
33
28
  background-color: #141414;
34
- background-image: linear-gradient(
35
- 90deg,
36
- transparent,
37
- rgba(255, 255, 255, 0.01),
38
- transparent
39
- );
29
+ background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.01), transparent);
40
30
  }
41
31
  }
42
32