@triptease/stylesheet 1.4.8 → 1.4.10

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 (7) hide show
  1. package/dist/base.css +240 -370
  2. package/dist/blocks.css +1 -1
  3. package/dist/compositions.css +1 -1
  4. package/dist/exceptions.css +1 -1
  5. package/dist/triptease.css +239 -369
  6. package/dist/utilities.css +1 -1
  7. package/package.json +1 -1
package/dist/base.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.8
2
+ * @triptease/stylesheet v1.4.10
3
3
  */
4
4
  @import url('https://fonts.googleapis.com/css?family=Roboto:400,500') layer(base);
5
5
  @import url('https://fonts.googleapis.com/css?family=Inter:300,500,600,700') layer(base);
@@ -283,326 +283,258 @@ button {
283
283
  /* noinspection CssInvalidAtRule */
284
284
  @layer base{
285
285
 
286
- @property --button-height {
287
- syntax: '*';
288
- inherits: true;
289
- initial-value: max-content;
290
- }
291
-
292
- @property --button-vertical-spacing {
293
- syntax: '<length>';
294
- inherits: true;
295
- initial-value: 0.5rem;
296
- }
297
-
298
- @property --button-horizontal-spacing {
299
- syntax: '<length>';
300
- inherits: true;
301
- initial-value: 0.75rem;
302
- }
303
-
304
- @property --button-border {
305
- syntax: '*';
306
- inherits: true;
307
- initial-value: none;
308
- }
309
-
310
- @property --button-background-color {
311
- syntax: '<color>';
312
- inherits: true;
313
- initial-value: transparent;
314
- }
315
-
316
- @property --button-color {
317
- syntax: '<color>';
318
- inherits: true;
319
- initial-value: #0D0C0D;
320
- }
321
-
322
- @property --button-hover-background-color {
323
- syntax: '<color>';
324
- inherits: true;
325
- initial-value: transparent;
326
- }
327
-
328
- @property --button-hover-color {
329
- syntax: '<color>';
330
- inherits: true;
331
- initial-value: inherit;
332
- }
333
-
334
- @property --button-focus-outline-color {
335
- syntax: '<color>';
336
- inherits: true;
337
- initial-value: rgba(1, 150, 237, 0.24);
338
- }
339
-
340
- @property --spinner-color {
341
- syntax: '<color>';
342
- inherits: true;
343
- initial-value: #5E43C2;
344
- }
345
-
346
- @property --color-border {
347
- syntax: '<color>';
348
- inherits: true;
349
- initial-value: #C5C8CE;
350
- }
351
-
352
286
  button,
353
287
  .button {
354
- -webkit-appearance: none;
355
- -moz-appearance: none;
356
- appearance: none;
357
- cursor: pointer;
358
- position: relative;
359
- height: var(--button-height, -moz-max-content);
360
- height: var(--button-height, max-content);
361
- font-size: var(--font-size-200);
362
- font-weight: var(--font-weight-semibold);
363
- line-height: var(--space-scale-3);
364
- padding: var(--button-vertical-spacing, var(--space-scale-1)) var(--button-horizontal-spacing, var(--space-scale-1-5));
365
- border-radius: var(--border-radius-100);
366
- border: var(--button-border, none);
367
- outline: none;
368
- transition:
369
- background-color 0.3s ease,
370
- box-shadow 0.3s ease;
371
- background-color: var(--button-background-color, transparent);
372
- color: var(--button-color, var(--color-text-500));
373
- width: -moz-fit-content;
374
- width: fit-content;
375
- display: flex;
376
- flex-direction: row;
377
- align-items: center;
378
- justify-content: center;
379
- gap: var(--space-scale-1);
380
-
381
- &:is([disabled], [aria-disabled='true']) {
382
- cursor: not-allowed;
383
- }
384
-
385
- &:hover:not(:disabled):not([aria-disabled='true']) {
386
- background-color: var(--button-hover-background-color, var(--button-background-color));
387
- color: var(--button-hover-color, var(--button-color));
388
- }
389
-
390
- &:focus {
288
+ -webkit-appearance: none;
289
+ -moz-appearance: none;
290
+ appearance: none;
291
+ cursor: pointer;
292
+ position: relative;
293
+ height: -moz-max-content;
294
+ height: max-content;
295
+ font-size: var(--font-size-200);
296
+ font-weight: var(--font-weight-semibold);
297
+ line-height: var(--space-scale-3);
298
+ padding: var(--space-scale-1) var(--space-scale-1-5);
299
+ border-radius: var(--border-radius-100);
300
+ border: none;
391
301
  outline: none;
392
- }
393
-
394
- &:focus-visible {
395
- outline: 4px solid var(--button-focus-outline-color, rgba(1, 150, 237, 0.24));
396
- outline-offset: 0;
397
- }
398
-
399
- &[data-theme='primary'] {
400
- --color-border: var(--color-primary-500);
401
- --button-background-color: var(--color-primary-400);
402
- --button-color: var(--color-text-100);
403
- --button-hover-background-color: var(--color-primary-500);
404
- --button-border: 1px solid var(--color-border);
405
- box-shadow:
406
- inset 0 -2px 2px 0 var(--color-primary-400),
407
- inset 0 0 0 1px rgba(255, 255, 255, 0.16),
408
- 0 1px 2px rgba(94, 66, 194, 0.2);
409
-
410
- &:disabled {
411
- --button-background-color: var(--color-primary-300);
412
- box-shadow: none;
413
- --color-border: var(--color-primary-300);
302
+ transition: background-color 0.3s ease,
303
+ box-shadow 0.3s ease;
304
+ background-color: transparent;
305
+ color: var(--color-text-500);
306
+ width: -moz-fit-content;
307
+ width: fit-content;
308
+ display: flex;
309
+ flex-direction: row;
310
+ align-items: center;
311
+ justify-content: center;
312
+ gap: var(--space-scale-1);
313
+
314
+ &:is([disabled], [aria-disabled='true']) {
315
+ cursor: not-allowed;
414
316
  }
415
317
 
416
- &[data-loading='true'] {
417
- --button-background-color: var(--color-primary-300);
418
- box-shadow: none;
419
- --color-border: var(--color-primary-200);
318
+ &:focus {
319
+ outline: none;
420
320
  }
421
- }
422
321
 
423
- &[data-theme='secondary'] {
424
- --color-border: var(--color-primary-400);
425
- --button-background-color: var(--color-surface-200);
426
- --button-color: var(--color-primary-400);
427
- --button-border: 1px solid var(--color-border);
428
- --button-hover-color: var(--color-primary-500);
429
- box-shadow:
430
- inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
431
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
432
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
433
-
434
- &:hover:not(:disabled):not([aria-disabled='true']) {
435
- --button-border: 1px solid var(--color-primary-500);
322
+ &:focus-visible {
323
+ outline: 4px solid rgba(1, 150, 237, 0.24);
324
+ outline-offset: 0;
436
325
  }
437
326
 
438
- &:disabled {
439
- box-shadow: none;
440
- --color-border: var(--color-primary-300);
441
- --button-color: var(--color-primary-300);
327
+ &[data-theme='primary'] {
328
+ background-color: var(--color-primary-400);
329
+ color: var(--color-text-100);
330
+ border: 1px solid var(--color-primary-500);
331
+ box-shadow: inset 0 -2px 2px 0 var(--color-primary-400),
332
+ inset 0 0 0 1px rgba(255, 255, 255, 0.16),
333
+ 0 1px 2px rgba(94, 66, 194, 0.2);
334
+
335
+ &:hover:not(:disabled):not([aria-disabled='true']) {
336
+ background-color: var(--color-primary-500);
337
+ }
338
+
339
+ &:disabled {
340
+ background-color: var(--color-primary-300);
341
+ box-shadow: none;
342
+ border-color: var(--color-primary-300);
343
+ }
344
+
345
+ &[data-loading='true'] {
346
+ background-color: var(--color-primary-300);
347
+ box-shadow: none;
348
+ border-color: var(--color-primary-200);
349
+ }
442
350
  }
443
351
 
444
- &[data-loading='true'] {
445
- --color-border: var(--color-primary-300);
446
- box-shadow: none;
352
+ &[data-theme='secondary'] {
353
+ background-color: var(--color-surface-200);
354
+ color: var(--color-primary-400);
355
+ border: 1px solid var(--color-primary-400);
356
+ box-shadow: inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
357
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
358
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
359
+
360
+ &:hover:not(:disabled):not([aria-disabled='true']) {
361
+ color: var(--color-primary-500);
362
+ border: 1px solid var(--color-primary-500);
363
+ }
364
+
365
+ &:disabled {
366
+ box-shadow: none;
367
+ border-color: var(--color-primary-300);
368
+ color: var(--color-primary-300);
369
+ }
370
+
371
+ &[data-loading='true'] {
372
+ border-color: var(--color-primary-300);
373
+ box-shadow: none;
374
+ }
447
375
  }
448
- }
449
376
 
450
- &[data-theme='suggestion'] {
451
- --button-horizontal-spacing: var(--space-scale-2);
452
- --button-background-color: var(--color-surface-200);
453
- --button-color: var(--color-primary-400);
454
- --button-border: 1px solid var(--color-primary-400);
455
- line-height: var(--space-scale-2);
456
- font-weight: var(--font-weight-normal);
457
- font-size: var(--font-size-100);
458
- border-radius: var(--border-radius-200);
459
- box-shadow:
460
- inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
461
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
462
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
463
-
464
- &:hover:not(:disabled):not([aria-disabled='true']) {
465
- --button-background-color: var(--color-surface-300);
377
+ &[data-theme='suggestion'] {
378
+ padding: var(--space-scale-1) var(--space-scale-2);
379
+ background-color: var(--color-surface-200);
380
+ color: var(--color-primary-400);
381
+ border: 1px solid var(--color-primary-400);
382
+ line-height: var(--space-scale-2);
383
+ font-weight: var(--font-weight-normal);
384
+ font-size: var(--font-size-100);
385
+ border-radius: var(--border-radius-200);
386
+ box-shadow: inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
387
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
388
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
389
+
390
+ &:hover:not(:disabled):not([aria-disabled='true']) {
391
+ background-color: var(--color-surface-300);
392
+ }
466
393
  }
467
- }
468
394
 
469
- &[data-theme='tertiary'] {
470
- --button-color: var(--color-primary-400);
471
- --button-hover-color: var(--color-primary-500);
395
+ &[data-theme='tertiary'] {
396
+ color: var(--color-primary-400);
472
397
 
473
- &:disabled {
474
- box-shadow: none;
475
- --button-color: var(--color-primary-300);
476
- }
398
+ &:disabled {
399
+ box-shadow: none;
400
+ color: var(--color-primary-300);
401
+ }
477
402
 
478
- &:hover:not(:disabled):not([aria-disabled='true']) {
479
- --button-background-color: var(--color-primary-100);
480
- }
403
+ &:hover:not(:disabled):not([aria-disabled='true']) {
404
+ background-color: var(--color-primary-100);
405
+ color: var(--color-primary-500);
406
+ }
481
407
 
482
- &[data-loading='true'] {
483
- box-shadow: none;
408
+ &[data-loading='true'] {
409
+ box-shadow: none;
410
+ }
484
411
  }
485
- }
486
412
 
487
- &[data-theme='destructive-primary'] {
488
- --color-border: var(--color-alert-500);
489
- --button-background-color: var(--color-alert-400);
490
- --button-color: var(--color-text-100);
491
- --button-hover-background-color: var(--color-alert-500);
492
- --button-border: 1px solid var(--color-border);
493
- box-shadow:
494
- inset 0 -2px 2px 0 rgba(168, 5, 5, 0.56),
495
- inset 0 0 0 1px rgba(255, 255, 255, 0.24),
496
- 0 1px 2px rgba(60, 66, 87, 0.08);
497
-
498
- &:disabled {
499
- --button-background-color: var(--color-alert-200);
500
- box-shadow: none;
501
- --color-border: var(--color-alert-200);
413
+ &[data-theme='destructive-primary'] {
414
+ --color-disabled: #890000;
415
+
416
+ background-color: var(--color-alert-strong);
417
+ color: var(--color-text-100);
418
+ border: 1px solid var(--color-alert-strong);
419
+ box-shadow: inset 0 -2px 2px 0 rgba(168, 5, 5, 0.56),
420
+ inset 0 0 0 1px rgba(255, 255, 255, 0.24),
421
+ 0 1px 2px rgba(60, 66, 87, 0.08);
422
+
423
+ &:hover:not(:disabled):not([aria-disabled='true']) {
424
+ background-color: --color-disabled;
425
+ }
426
+
427
+ &:disabled {
428
+ background-color: var(--color-alert-subtle);
429
+ box-shadow: none;
430
+ border-color: var(--color-alert-subtle);
431
+ }
432
+
433
+ &[data-loading='true'] {
434
+ background-color: var(--color-alert-subtle);
435
+ box-shadow: none;
436
+ border-color: var(--color-alert-subtle);
437
+
438
+ &::after {
439
+ background-color: var(--color-surface-100);
440
+ }
441
+ }
502
442
  }
503
443
 
504
- &[data-loading='true'] {
505
- --button-background-color: var(--color-alert-200);
506
- box-shadow: none;
507
- --color-border: var(--color-alert-100);
508
- --spinner-color: var(--color-surface-100);
444
+ &[data-theme='destructive-secondary'] {
445
+ background-color: var(--color-surface-200);
446
+ color: var(--color-alert-strong);
447
+ border: 1px solid var(--color-alert-strong);
448
+ box-shadow: inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
449
+ inset 0 0 0 2px rgba(255, 255, 255, 0.4),
450
+ 0 1px 2px 0 rgba(60, 66, 87, 0.08);
451
+
452
+ &:hover:not(:disabled):not([aria-disabled='true']) {
453
+ border-color: --color-disabled;
454
+ color: --color-disabled;
455
+ }
456
+
457
+ &:disabled {
458
+ box-shadow: none;
459
+ border-color: var(--color-alert-subtle);
460
+ color: var(--color-alert-subtle);
461
+ }
462
+
463
+ &[data-loading='true'] {
464
+ box-shadow: none;
465
+
466
+ &::after {
467
+ background-color: var(--color-alert-strong);
468
+ }
469
+ }
509
470
  }
510
- }
511
471
 
512
- &[data-theme='destructive-secondary'] {
513
- --button-background-color: var(--color-surface-200);
514
- --button-color: var(--color-alert-400);
515
- --color-border: var(--color-alert-400);
516
- --button-border: 1px solid var(--color-border);
517
- box-shadow:
518
- inset 0 -2px 2px 0 rgba(224, 225, 229, 0.56),
519
- inset 0 0 0 2px rgba(255, 255, 255, 0.4),
520
- 0 1px 2px 0 rgba(60, 66, 87, 0.08);
521
-
522
- &:hover:not(:disabled):not([aria-disabled='true']) {
523
- --color-border: var(--color-alert-500);
524
- --button-color: var(--color-alert-500);
525
- }
472
+ &[data-theme='destructive-tertiary'] {
473
+ color: var(--color-alert-strong);
526
474
 
527
- &:disabled {
528
- box-shadow: none;
529
- --color-border: var(--color-alert-200);
530
- --button-color: var(--color-alert-200);
531
- }
475
+ &:disabled {
476
+ box-shadow: none;
477
+ color: var(--color-alert-subtle);
478
+ }
532
479
 
533
- &[data-loading='true'] {
534
- box-shadow: none;
535
- --spinner-color: var(--color-alert-400);
536
- }
537
- }
480
+ &:hover:not(:disabled):not([aria-disabled='true']) {
481
+ background-color: --color-disabled;
482
+ color: --color-disabled;
483
+ }
538
484
 
539
- &[data-theme='destructive-tertiary'] {
540
- --button-color: var(--color-alert-400);
541
- --button-hover-color: var(--color-alert-500);
485
+ &[data-loading='true'] {
486
+ box-shadow: none;
542
487
 
543
- &:disabled {
544
- box-shadow: none;
545
- --color-border: var(--color-border-100);
546
- --button-color: var(--color-alert-200);
488
+ &::after {
489
+ background-color: var(--color-alert-strong);
490
+ }
491
+ }
547
492
  }
548
493
 
549
- &:hover:not(:disabled):not([aria-disabled='true']) {
550
- --button-background-color: var(--color-alert-100);
494
+ &.small {
495
+ padding: var(--space-scale-0-5) var(--space-scale-1);
551
496
  }
552
497
 
553
- &[data-loading='true'] {
554
- box-shadow: none;
555
- --spinner-color: var(--color-alert-400);
498
+ &.large {
499
+ padding: var(--space-scale-1-5) var(--space-scale-2);
556
500
  }
557
- }
558
-
559
- &.small {
560
- --button-horizontal-spacing: var(--space-scale-1);
561
- --button-vertical-spacing: var(--space-scale-0-5);
562
- }
563
-
564
- &.large {
565
- --button-horizontal-spacing: var(--space-scale-2);
566
- --button-vertical-spacing: var(--space-scale-1-5);
567
- }
568
-
569
- &[data-loading='true'] {
570
- position: relative;
571
- color: transparent !important;
572
- pointer-events: none;
573
- cursor: not-allowed;
574
- -webkit-user-select: none;
575
- -moz-user-select: none;
576
- user-select: none;
577
- --spinner-color: var(--color-primary-400);
578
- }
579
501
 
580
- /*Spinner magic*/
502
+ &[data-loading='true'] {
503
+ position: relative;
504
+ color: transparent !important;
505
+ pointer-events: none;
506
+ cursor: not-allowed;
507
+ -webkit-user-select: none;
508
+ -moz-user-select: none;
509
+ user-select: none;
510
+ }
581
511
 
582
- &[data-loading='true']::after {
583
- content: '';
584
- position: absolute;
585
- top: calc(50% - 10px);
586
- left: calc(50% - 10px);
587
- width: 20px;
588
- height: 20px;
589
- transform: translate(-50%, -50%);
590
- mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' fill-rule='evenodd' stroke='white' stroke-linecap='round' stroke-width='2' d='M9 1a8 8 0 1 0 0 16 8 8 0 0 0 8-8'/%3E%3C/svg%3E");
591
- -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' fill-rule='evenodd' stroke='white' stroke-linecap='round' stroke-width='2' d='M9 1a8 8 0 1 0 0 16 8 8 0 0 0 8-8'/%3E%3C/svg%3E");
592
- mask-size: contain;
593
- -webkit-mask-size: contain;
594
- background-color: var(--spinner-color);
595
- animation: spin-animation 1s infinite linear;
596
- }
512
+ /*Spinner magic*/
513
+
514
+ &[data-loading='true']::after {
515
+ content: '';
516
+ position: absolute;
517
+ top: calc(50% - 10px);
518
+ left: calc(50% - 10px);
519
+ width: 20px;
520
+ height: 20px;
521
+ transform: translate(-50%, -50%);
522
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' fill-rule='evenodd' stroke='white' stroke-linecap='round' stroke-width='2' d='M9 1a8 8 0 1 0 0 16 8 8 0 0 0 8-8'/%3E%3C/svg%3E");
523
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' fill-rule='evenodd' stroke='white' stroke-linecap='round' stroke-width='2' d='M9 1a8 8 0 1 0 0 16 8 8 0 0 0 8-8'/%3E%3C/svg%3E");
524
+ mask-size: contain;
525
+ -webkit-mask-size: contain;
526
+ background-color: var(--color-primary-400);
527
+ animation: spin-animation 1s infinite linear;
528
+ }
597
529
  }
598
530
 
599
531
  @keyframes spin-animation {
600
- from {
601
- transform: rotate(0turn);
602
- }
603
- to {
604
- transform: rotate(1turn);
605
- }
532
+ from {
533
+ transform: rotate(0turn);
534
+ }
535
+ to {
536
+ transform: rotate(1turn);
537
+ }
606
538
  }
607
539
  }
608
540
  @layer base{
@@ -678,69 +610,9 @@ button,
678
610
  }
679
611
  @layer base{
680
612
 
681
- @property --checkbox-size {
682
- syntax: '<length>';
683
- inherits: true;
684
- initial-value: 1rem;
685
- }
686
-
687
- @property --toggle-width {
688
- syntax: '<length>';
689
- inherits: true;
690
- initial-value: 3.5rem;
691
- }
692
-
693
- @property --toggle-height {
694
- syntax: '<length>';
695
- inherits: true;
696
- initial-value: 1.75rem;
697
- }
698
-
699
- @property --toggle-background-color {
700
- syntax: '<color>';
701
- inherits: true;
702
- initial-value: #75767E;
703
- }
704
-
705
- @property --toggle-color {
706
- syntax: '<color>';
707
- inherits: true;
708
- initial-value: #B5B0B5;
709
- }
710
-
711
- @property --toggle-transition-speed {
712
- syntax: '<time>';
713
- inherits: true;
714
- initial-value: 0.25s;
715
- }
716
-
717
- @property --toggle-border-color {
718
- syntax: '<color>';
719
- inherits: true;
720
- initial-value: transparent;
721
- }
722
-
723
- @property --toggle-border-width {
724
- syntax: '<length>';
725
- inherits: true;
726
- initial-value: 0px;
727
- }
728
-
729
- @property --toggle-hover-color {
730
- syntax: '<color>';
731
- inherits: true;
732
- initial-value: #575157;
733
- }
734
-
735
- @property --toggle-hover-background-color {
736
- syntax: '<color>';
737
- inherits: true;
738
- initial-value: #1C1B27;
739
- }
740
-
741
613
  input[type='checkbox'] {
742
614
  accent-color: var(--color-primary-400);
743
- width: var(--checkbox-size, var(--space-scale-2));
615
+ width: var(--space-scale-2);
744
616
  aspect-ratio: 1;
745
617
 
746
618
  &[aria-invalid]:not([aria-invalid='false']),
@@ -754,34 +626,28 @@ input[type='checkbox'] {
754
626
 
755
627
  input[type='checkbox'][data-theme='toggle'],
756
628
  [role='switch'] {
757
- --toggle-width: var(--space-scale-5);
758
- --toggle-height: 1.75rem;
759
- --toggle-background-color: var(--color-surface-700);
760
-
761
629
  -webkit-appearance: none;
762
-
763
630
  -moz-appearance: none;
764
-
765
631
  appearance: none;
766
- width: var(--toggle-width);
767
- height: var(--toggle-height);
632
+ width: var(--space-scale-5);
633
+ height: 1.75rem;
768
634
  border-radius: 18px;
769
- color: var(--toggle-color, var(--color-text-200));
770
- background-color: var(--toggle-background-color);
635
+ color: var(--color-text-200);
636
+ background-color: var(--color-surface-700);
771
637
  transition:
772
- color var(--toggle-transition-speed, 0.25s),
773
- background-color var(--toggle-transition-speed, 0.25s);
638
+ color 0.25s,
639
+ background-color 0.25s;
774
640
  cursor: pointer;
775
641
  display: block;
776
- border-color: var(--toggle-border-color, transparent);
777
- border-width: var(--toggle-border-width, 0px);
642
+ border-color: transparent;
643
+ border-width: 0px;
778
644
  padding: 2px;
779
645
  position: relative;
780
- min-width: var(--toggle-width);
646
+ min-width: var(--space-scale-5);
781
647
 
782
648
  &:hover {
783
- color: var(--toggle-hover-color, var(--color-text-300));
784
- background-color: var(--toggle-hover-background-color, var(--color-surface-800));
649
+ color: var(--color-text-300);
650
+ background-color: var(--color-surface-800);
785
651
  }
786
652
 
787
653
  &[disabled],
@@ -793,22 +659,25 @@ input[type='checkbox'][data-theme='toggle'],
793
659
 
794
660
  &:checked,
795
661
  &[aria-checked='true'] {
796
- --toggle-color: var(--color-success-300);
797
- --toggle-background-color: var(--color-success-300);
798
- --toggle-hover-color: var(--color-success-500);
799
- --toggle-hover-background-color: var(--color-success-500);
662
+ color: var(--color-success-strong);
663
+ background-color: var(--color-success-strong);
664
+
665
+ &:hover {
666
+ color: #004200;
667
+ background-color: oklch(from var(--color-success-strong) calc(l - 0.2) c h);
668
+ }
800
669
  }
801
670
 
802
671
  &::before {
803
672
  content: '';
804
673
  position: absolute;
805
674
  top: 2px;
806
- right: calc(100% - var(--toggle-height) + 2px);
675
+ right: calc(100% - 1.75rem + 2px);
807
676
  height: calc(100% - 4px);
808
677
  aspect-ratio: 1;
809
678
  border-radius: inherit;
810
679
  background-color: var(--color-surface-100);
811
- transition: right var(--toggle-transition-speed, 0.25s) ease;
680
+ transition: right 0.25s ease;
812
681
  z-index: 1;
813
682
  padding: 4px;
814
683
  box-sizing: border-box;
@@ -826,12 +695,12 @@ input[type='checkbox'][data-theme='toggle'],
826
695
  mask-repeat: no-repeat;
827
696
  position: absolute;
828
697
  top: 2px;
829
- right: calc(100% - var(--toggle-height) + 2px);
698
+ right: calc(100% - 1.75rem + 2px);
830
699
  height: calc(100% - 4px);
831
700
  aspect-ratio: 1;
832
701
  border-radius: inherit;
833
- background-color: var(--toggle-background-color);
834
- transition: right var(--toggle-transition-speed, 0.25s) ease;
702
+ background-color: var(--color-surface-700);
703
+ transition: right 0.25s ease;
835
704
  z-index: 2;
836
705
  padding: 4px;
837
706
  box-sizing: border-box;
@@ -852,6 +721,7 @@ input[type='checkbox'][data-theme='toggle'],
852
721
  background-position: center center;
853
722
  -webkit-mask-position: center calc(50% + 1px);
854
723
  mask-position: center calc(50% + 1px);
724
+ background-color: var(--color-success-strong);
855
725
  }
856
726
  }
857
727