odt-ui-rails 2.2.7 → 2.2.9

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 (10) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +11 -1
  3. data/app/assets/stylesheets/odt_ui/styles.css +2872 -1949
  4. data/app/assets/stylesheets/odt_ui/tokens.css +26 -27
  5. data/app/assets/stylesheets/odt_ui.css +2709 -1787
  6. data/lib/generators/odt/templates/odt_ui.rbs +14 -0
  7. data/lib/odt_ui/helper.rb +55 -0
  8. data/lib/odt_ui/version.rb +1 -1
  9. data/sig/odt_ui.rbs +14 -0
  10. metadata +1 -1
data/app/assets/stylesheets/odt_ui.css CHANGED
@@ -289,32 +289,32 @@
289
289
  /* ==========================================================================
290
290
  * Primary Brand Colors (Dark Scale)
291
291
  * ========================================================================== */
292
- --color-primary-0: hsl(240 78% 10%);
293
- --color-primary-50: hsla(225.1, 58.6%, 58.4%, 0.18);
294
- --color-primary-100: hsla(225.1, 58.6%, 58.4%, 0.28);
295
- --color-primary-200: hsl(240 78% 34%);
296
- --color-primary-300: hsl(234.2 73.9% 37.4%);
297
- --color-primary-400: hsl(229.7 65% 43%);
298
- --color-primary-500: hsl(226.9 53.8% 50.1%);
299
- --color-primary-600: hsl(225.1 58.6% 58.4%);
300
- --color-primary-700: hsl(224 63.5% 67.6%);
301
- --color-primary-800: hsl(223.3 68.7% 76.7%);
302
- --color-primary-900: hsl(222.5 100% 96.2%);
292
+ --color-primary-0: hsla(225.1, 58.6%, 58.4%, 0.05);
293
+ --color-primary-50: hsla(225.1, 58.6%, 58.4%, 0.12);
294
+ --color-primary-100: hsla(225.1, 58.6%, 58.4%, 0.20);
295
+ --color-primary-200: hsla(225.1, 58.6%, 58.4%, 0.32);
296
+ --color-primary-300: hsla(225.1, 58.6%, 58.4%, 0.48);
297
+ --color-primary-400: hsl(224 63.5% 67.6%);
298
+ --color-primary-500: hsl(225.1 58.6% 58.4%);
299
+ --color-primary-600: hsl(226.9 53.8% 50.1%);
300
+ --color-primary-700: hsl(229.7 65% 43%);
301
+ --color-primary-800: hsl(234.2 73.9% 37.4%);
302
+ --color-primary-900: hsl(240 78% 34%);
303
303
 
304
304
  /* ==========================================================================
305
305
  * Secondary Brand Colors (Dark Scale)
306
306
  * ========================================================================== */
307
- --color-secondary-0: hsl(47 100% 10%);
308
- --color-secondary-50: hsla(47, 100%, 68.6%, 0.16);
309
- --color-secondary-100: hsla(47, 100%, 68.6%, 0.25);
310
- --color-secondary-200: hsl(47 100% 50%);
311
- --color-secondary-300: hsl(47 100% 52.9%);
312
- --color-secondary-400: hsl(47 100% 57.3%);
313
- --color-secondary-500: hsl(47 100% 62.6%);
314
- --color-secondary-600: hsl(47 100% 68.6%);
315
- --color-secondary-700: hsl(47 100% 75.2%);
316
- --color-secondary-800: hsl(47 100% 81.6%);
317
- --color-secondary-900: hsl(47 100% 95.6%);
307
+ --color-secondary-0: hsla(47, 100%, 68.6%, 0.05);
308
+ --color-secondary-50: hsla(47, 100%, 68.6%, 0.12);
309
+ --color-secondary-100: hsla(47, 100%, 68.6%, 0.20);
310
+ --color-secondary-200: hsla(47, 100%, 68.6%, 0.32);
311
+ --color-secondary-300: hsla(47, 100%, 68.6%, 0.48);
312
+ --color-secondary-400: hsl(47 100% 75.2%);
313
+ --color-secondary-500: hsl(47 100% 68.6%);
314
+ --color-secondary-600: hsl(47 100% 62.6%);
315
+ --color-secondary-700: hsl(47 100% 57.3%);
316
+ --color-secondary-800: hsl(47 100% 52.9%);
317
+ --color-secondary-900: hsl(47 100% 50%);
318
318
 
319
319
  /* ==========================================================================
320
320
  * Neutral Palette (Dark Scale)
@@ -374,8 +374,8 @@
374
374
  --color-fg-inverse-disabled: var(--color-neutral-400);
375
375
 
376
376
  /* Brand Foreground */
377
- --color-fg-primary: var(--color-primary-600);
378
- --color-fg-secondary: var(--color-secondary-600);
377
+ --color-fg-primary: var(--color-primary-500);
378
+ --color-fg-secondary: var(--color-secondary-500);
379
379
 
380
380
  /* Semantic Foreground */
381
381
  --color-fg-success: var(--color-success);
@@ -411,7 +411,7 @@
411
411
  /* ==========================================================================
412
412
  * Gradients
413
413
  * ========================================================================== */
414
- --gradient-subtle: linear-gradient(to top right, var(--color-primary-50), var(--color-primary-0) 60%, var(--color-secondary-50));
414
+ --gradient-subtle: linear-gradient(to top right, var(--color-primary-50), var(--color-neutral-0) 60%, var(--color-secondary-50));
415
415
  --gradient-hero-primary: var(--gradient-subtle);
416
416
 
417
417
  /* Vibrant accent gradient */
@@ -419,7 +419,7 @@
419
419
  --gradient-hero-vibrant: var(--gradient-vibrant);
420
420
 
421
421
  /* Card surface gradients */
422
- --gradient-card: linear-gradient(to bottom, hsla(225.1, 58.6%, 58.4%, 0.25), var(--color-neutral-50));
422
+ --gradient-card: linear-gradient(to bottom, var(--color-primary-50), var(--color-neutral-50));
423
423
  --gradient-primary-to-white: linear-gradient(to bottom, var(--color-primary-50), var(--color-surface));
424
424
  --gradient-secondary-to-white: linear-gradient(to bottom, var(--color-secondary-50), var(--color-surface));
425
425
  --gradient-primary-h: linear-gradient(to right, var(--color-primary-50), var(--color-surface));
@@ -449,1980 +449,2902 @@
449
449
  }
450
450
 
451
451
 
452
-
453
452
  /* Component Styles */
454
453
  /* ==========================================================================
455
454
  * ODT Lightweight UI - Standalone Component Styles (Rails)
456
455
  * ========================================================================== */
457
456
 
458
- /* ==========================================================================
457
+ @layer components {
458
+
459
+ /* ==========================================================================
459
460
  * 1. Utility Tokens & Base Resets
460
461
  * ========================================================================== */
461
- .odt-radius-none { border-radius: var(--radius-none, 0px) !important; }
462
- .odt-radius-xs { border-radius: var(--radius-xs, 0.125rem) !important; }
463
- .odt-radius-sm { border-radius: var(--radius-sm, 0.25rem) !important; }
464
- .odt-radius-md { border-radius: var(--radius-md, 0.375rem) !important; }
465
- .odt-radius-lg { border-radius: var(--radius-lg, 0.5rem) !important; }
466
- .odt-radius-xl { border-radius: var(--radius-xl, 0.75rem) !important; }
467
- .odt-radius-2xl { border-radius: var(--radius-2xl, 1rem) !important; }
468
- .odt-radius-3xl { border-radius: var(--radius-3xl, 1.5rem) !important; }
469
- .odt-radius-4xl { border-radius: var(--radius-4xl, 2rem) !important; }
470
- .odt-radius-full { border-radius: var(--radius-full, 9999px) !important; }
471
-
472
- .odt-shadow-none { box-shadow: none !important; }
473
- .odt-shadow-card { box-shadow: var(--shadow-card) !important; }
474
- .odt-shadow-dropdown { box-shadow: var(--shadow-dropdown) !important; }
475
- .odt-shadow-modal { box-shadow: var(--shadow-modal) !important; }
476
- .odt-shadow-popover { box-shadow: var(--shadow-popover) !important; }
477
-
478
- .odt-spinner {
479
- display: inline-block;
480
- width: 1em;
481
- height: 1em;
482
- border: 2px solid currentColor;
483
- border-right-color: transparent;
484
- border-radius: 50%;
485
- animation: odt-spin 0.75s linear infinite;
486
- }
462
+ .odt-radius-none {
463
+ border-radius: var(--radius-none, 0px) !important;
464
+ }
487
465
 
488
- @keyframes odt-spin {
489
- from { transform: rotate(0deg); }
490
- to { transform: rotate(360deg); }
491
- }
466
+ .odt-radius-xs {
467
+ border-radius: var(--radius-xs, 0.125rem) !important;
468
+ }
492
469
 
493
- @keyframes odt-pop {
494
- 0% { opacity: 0; transform: scale(0.5); }
495
- 100% { opacity: 1; transform: scale(1); }
496
- }
470
+ .odt-radius-sm {
471
+ border-radius: var(--radius-sm, 0.25rem) !important;
472
+ }
497
473
 
498
- /* ==========================================================================
499
- * 2. Button Component (.odt-btn)
500
- * ========================================================================== */
501
- .odt-btn {
502
- display: inline-flex;
503
- align-items: center;
504
- justify-content: center;
505
- gap: var(--spacing-2, 0.5rem);
506
- font-family: inherit;
507
- font-weight: var(--font-weight-medium, 500);
508
- line-height: var(--line-height-tight, 1.25);
509
- border: 1px solid transparent;
510
- border-radius: var(--radius-xl, 0.75rem);
511
- cursor: pointer;
512
- text-decoration: none;
513
- white-space: nowrap;
514
- user-select: none;
515
- transition: all 0.15s ease-in-out;
516
- outline: none;
517
- position: relative;
518
- box-sizing: border-box;
519
- }
474
+ .odt-radius-md {
475
+ border-radius: var(--radius-md, 0.375rem) !important;
476
+ }
520
477
 
521
- .odt-btn:focus-visible {
522
- box-shadow: 0 0 0 3px var(--color-ring), var(--shadow-card);
523
- }
478
+ .odt-radius-lg {
479
+ border-radius: var(--radius-lg, 0.5rem) !important;
480
+ }
524
481
 
525
- /* Button Sizes */
526
- .odt-btn--xs {
527
- padding: 0.25rem 0.625rem;
528
- font-size: var(--font-size-xs, 0.75rem);
529
- border-radius: var(--radius-md, 0.375rem);
530
- gap: 0.25rem;
531
- }
482
+ .odt-radius-xl {
483
+ border-radius: var(--radius-xl, 0.75rem) !important;
484
+ }
532
485
 
533
- .odt-btn--sm {
534
- padding: 0.375rem 0.875rem;
535
- font-size: var(--font-size-xs, 0.75rem);
536
- border-radius: var(--radius-lg, 0.5rem);
537
- gap: 0.375rem;
538
- }
486
+ .odt-radius-2xl {
487
+ border-radius: var(--radius-2xl, 1rem) !important;
488
+ }
539
489
 
540
- .odt-btn--md {
541
- padding: 0.625rem 1.25rem;
542
- font-size: var(--font-size-sm, 0.875rem);
543
- border-radius: var(--radius-xl, 0.75rem);
544
- gap: 0.5rem;
545
- }
490
+ .odt-radius-3xl {
491
+ border-radius: var(--radius-3xl, 1.5rem) !important;
492
+ }
546
493
 
547
- .odt-btn--lg {
548
- padding: 0.75rem 1.75rem;
549
- font-size: var(--font-size-base, 1rem);
550
- border-radius: var(--radius-2xl, 1rem);
551
- gap: 0.625rem;
552
- }
494
+ .odt-radius-4xl {
495
+ border-radius: var(--radius-4xl, 2rem) !important;
496
+ }
553
497
 
554
- .odt-btn--xl {
555
- padding: 0.875rem 2rem;
556
- font-size: var(--font-size-lg, 1.125rem);
557
- border-radius: var(--radius-2xl, 1rem);
558
- gap: 0.75rem;
559
- }
498
+ .odt-radius-full {
499
+ border-radius: var(--radius-full, 9999px) !important;
500
+ }
560
501
 
561
- /* Button Modifiers */
562
- .odt-btn--full-width {
563
- width: 100%;
564
- }
502
+ .odt-shadow-none {
503
+ box-shadow: none !important;
504
+ }
565
505
 
566
- .odt-btn--loading {
567
- cursor: wait;
568
- pointer-events: none;
569
- }
506
+ .odt-shadow-card {
507
+ box-shadow: var(--shadow-card) !important;
508
+ }
570
509
 
571
- .odt-btn:disabled,
572
- .odt-btn--disabled {
573
- opacity: 0.6;
574
- cursor: not-allowed;
575
- pointer-events: none;
576
- box-shadow: none;
577
- }
510
+ .odt-shadow-dropdown {
511
+ box-shadow: var(--shadow-dropdown) !important;
512
+ }
578
513
 
579
- .odt-btn--icon-only {
580
- padding: 0 !important;
581
- flex-shrink: 0;
582
- }
583
- .odt-btn--icon-only.odt-btn--xs { width: 1.75rem; height: 1.75rem; }
584
- .odt-btn--icon-only.odt-btn--sm { width: 2rem; height: 2rem; }
585
- .odt-btn--icon-only.odt-btn--md { width: 2.5rem; height: 2.5rem; }
586
- .odt-btn--icon-only.odt-btn--lg { width: 3rem; height: 3rem; }
587
- .odt-btn--icon-only.odt-btn--xl { width: 3.5rem; height: 3.5rem; }
588
-
589
- /* Button - Filled Variant (Default) */
590
- .odt-btn--filled {
591
- box-shadow: var(--shadow-card);
592
- }
593
- .odt-btn--filled-primary,
594
- .odt-btn--capsule-primary {
595
- background-color: var(--color-primary-500);
596
- color: var(--color-btn-primary-fg, #ffffff);
597
- }
598
- .odt-btn--filled-primary:hover:not(:disabled),
599
- .odt-btn--capsule-primary:hover:not(:disabled) {
600
- background-color: var(--color-primary-600);
601
- }
602
- .odt-btn--filled-primary:active:not(:disabled),
603
- .odt-btn--capsule-primary:active:not(:disabled) {
604
- background-color: var(--color-primary-700);
605
- }
514
+ .odt-shadow-modal {
515
+ box-shadow: var(--shadow-modal) !important;
516
+ }
606
517
 
607
- .odt-btn--filled-secondary,
608
- .odt-btn--capsule-secondary {
609
- background-color: var(--color-secondary-500);
610
- color: var(--color-btn-secondary-fg, hsl(224 25% 6%));
611
- }
612
- .odt-btn--filled-secondary:hover:not(:disabled),
613
- .odt-btn--capsule-secondary:hover:not(:disabled) {
614
- background-color: var(--color-secondary-400);
615
- }
616
- .odt-btn--filled-secondary:active:not(:disabled),
617
- .odt-btn--capsule-secondary:active:not(:disabled) {
618
- background-color: var(--color-secondary-600);
619
- }
518
+ .odt-shadow-popover {
519
+ box-shadow: var(--shadow-popover) !important;
520
+ }
620
521
 
621
- .odt-btn--filled-surface,
622
- .odt-btn--capsule-surface {
623
- background-color: var(--color-surface);
624
- color: var(--color-btn-surface-fg, var(--color-fg-strong));
625
- }
626
- .odt-btn--filled-surface:hover:not(:disabled),
627
- .odt-btn--capsule-surface:hover:not(:disabled) {
628
- background-color: var(--color-surface-muted);
629
- }
630
- .odt-btn--filled-surface:active:not(:disabled),
631
- .odt-btn--capsule-surface:active:not(:disabled) {
632
- background-color: var(--color-surface-subtle);
633
- }
522
+ .odt-spinner {
523
+ display: inline-block;
524
+ width: 1em;
525
+ height: 1em;
526
+ border: 2px solid currentColor;
527
+ border-right-color: transparent;
528
+ border-radius: 50%;
529
+ animation: odt-spin 0.75s linear infinite;
530
+ }
634
531
 
635
- .odt-btn--filled-muted,
636
- .odt-btn--capsule-muted {
637
- background-color: var(--color-surface-muted);
638
- color: var(--color-btn-muted-fg, var(--color-fg));
639
- }
640
- .odt-btn--filled-muted:hover:not(:disabled),
641
- .odt-btn--capsule-muted:hover:not(:disabled) {
642
- background-color: var(--color-surface-subtle);
643
- color: var(--color-fg-strong);
644
- }
645
- .odt-btn--filled-muted:active:not(:disabled),
646
- .odt-btn--capsule-muted:active:not(:disabled) {
647
- background-color: var(--color-surface);
648
- }
532
+ @keyframes odt-spin {
533
+ from {
534
+ transform: rotate(0deg);
535
+ }
649
536
 
650
- .odt-btn--filled-inverse,
651
- .odt-btn--capsule-inverse {
652
- background-color: var(--color-fg-strong);
653
- color: var(--color-btn-inverse-fg, var(--color-surface));
654
- }
655
- .odt-btn--filled-inverse:hover:not(:disabled),
656
- .odt-btn--capsule-inverse:hover:not(:disabled) { opacity: 0.9; }
657
- .odt-btn--filled-inverse:active:not(:disabled),
658
- .odt-btn--capsule-inverse:active:not(:disabled) { opacity: 0.8; }
659
-
660
- .odt-btn--filled-success,
661
- .odt-btn--capsule-success {
662
- background-color: var(--color-success);
663
- color: var(--color-btn-success-fg, #ffffff);
664
- }
665
- .odt-btn--filled-success:hover:not(:disabled),
666
- .odt-btn--capsule-success:hover:not(:disabled) { opacity: 0.9; }
667
- .odt-btn--filled-success:active:not(:disabled),
668
- .odt-btn--capsule-success:active:not(:disabled) { opacity: 0.8; }
669
-
670
- .odt-btn--filled-warning,
671
- .odt-btn--capsule-warning {
672
- background-color: var(--color-warning);
673
- color: var(--color-btn-warning-fg, var(--color-fg-strong));
674
- }
675
- .odt-btn--filled-warning:hover:not(:disabled),
676
- .odt-btn--capsule-warning:hover:not(:disabled) { opacity: 0.9; }
677
- .odt-btn--filled-warning:active:not(:disabled),
678
- .odt-btn--capsule-warning:active:not(:disabled) { opacity: 0.8; }
679
-
680
- .odt-btn--filled-danger,
681
- .odt-btn--capsule-danger {
682
- background-color: var(--color-danger);
683
- color: var(--color-btn-danger-fg, #ffffff);
684
- }
685
- .odt-btn--filled-danger:hover:not(:disabled),
686
- .odt-btn--capsule-danger:hover:not(:disabled) { opacity: 0.9; }
687
- .odt-btn--filled-danger:active:not(:disabled),
688
- .odt-btn--capsule-danger:active:not(:disabled) { opacity: 0.8; }
689
-
690
- .odt-btn--filled-info,
691
- .odt-btn--capsule-info {
692
- background-color: var(--color-info);
693
- color: var(--color-btn-info-fg, #ffffff);
694
- }
695
- .odt-btn--filled-info:hover:not(:disabled),
696
- .odt-btn--capsule-info:hover:not(:disabled) { opacity: 0.9; }
697
- .odt-btn--filled-info:active:not(:disabled),
698
- .odt-btn--capsule-info:active:not(:disabled) { opacity: 0.8; }
699
-
700
- .odt-btn--filled-neutral,
701
- .odt-btn--capsule-neutral {
702
- background-color: var(--color-neutral-800);
703
- color: #ffffff;
704
- }
705
- .odt-btn--filled-neutral:hover:not(:disabled),
706
- .odt-btn--capsule-neutral:hover:not(:disabled) {
707
- background-color: var(--color-neutral-900);
708
- }
537
+ to {
538
+ transform: rotate(360deg);
539
+ }
540
+ }
709
541
 
710
- /* Button - Capsule Variant */
711
- .odt-btn--capsule {
712
- border-radius: var(--radius-full, 9999px) !important;
713
- box-shadow: var(--shadow-card);
714
- }
715
- .odt-btn--capsule.odt-btn--sm { padding: 0.375rem 1.125rem; }
716
- .odt-btn--capsule.odt-btn--md { padding: 0.625rem 1.5rem; }
717
- .odt-btn--capsule.odt-btn--lg { padding: 0.75rem 2rem; }
718
-
719
- /* Button - Frosted Variant */
720
- .odt-btn--frosted {
721
- backdrop-filter: blur(var(--frosted-blur, 16px));
722
- -webkit-backdrop-filter: blur(var(--frosted-blur, 16px));
723
- box-shadow: var(--shadow-card);
724
- }
725
- .odt-btn--frosted-primary {
726
- background-color: hsl(from var(--color-primary-500) h s l / 0.85);
727
- color: var(--color-btn-primary-fg, #ffffff);
728
- }
729
- .odt-btn--frosted-primary:hover:not(:disabled) {
730
- background-color: hsl(from var(--color-primary-500) h s l / 0.95);
731
- }
732
- .odt-btn--frosted-secondary {
733
- background-color: hsl(from var(--color-secondary-500) h s l / 0.85);
734
- color: var(--color-btn-secondary-fg, hsl(224 25% 6%));
735
- }
736
- .odt-btn--frosted-secondary:hover:not(:disabled) {
737
- background-color: hsl(from var(--color-secondary-500) h s l / 0.95);
738
- }
739
- .odt-btn--frosted-surface {
740
- background-color: var(--frosted-surface-bg);
741
- color: var(--color-btn-surface-fg, var(--color-fg-strong));
742
- }
743
- .odt-btn--frosted-surface:hover:not(:disabled) {
744
- background-color: var(--frosted-muted-bg);
745
- }
746
- .odt-btn--frosted-muted {
747
- background-color: var(--frosted-muted-bg);
748
- color: var(--color-btn-muted-fg, var(--color-fg));
749
- }
750
- .odt-btn--frosted-muted:hover:not(:disabled) {
751
- background-color: var(--frosted-subtle-bg);
752
- }
753
- .odt-btn--frosted-inverse {
754
- background-color: hsl(from var(--color-fg-strong) h s l / 0.85);
755
- color: var(--color-btn-inverse-fg, var(--color-surface));
756
- }
757
- .odt-btn--frosted-inverse:hover:not(:disabled) {
758
- background-color: hsl(from var(--color-fg-strong) h s l / 0.95);
759
- }
760
- .odt-btn--frosted-success {
761
- background-color: hsl(from var(--color-success) h s l / 0.85);
762
- color: var(--color-btn-success-fg, #ffffff);
763
- }
764
- .odt-btn--frosted-warning {
765
- background-color: hsl(from var(--color-warning) h s l / 0.85);
766
- color: var(--color-btn-warning-fg, var(--color-fg-strong));
767
- }
768
- .odt-btn--frosted-danger {
769
- background-color: hsl(from var(--color-danger) h s l / 0.85);
770
- color: var(--color-btn-danger-fg, #ffffff);
771
- }
772
- .odt-btn--frosted-info {
773
- background-color: hsl(from var(--color-info) h s l / 0.85);
774
- color: var(--color-btn-info-fg, #ffffff);
775
- }
542
+ @keyframes odt-pop {
543
+ 0% {
544
+ opacity: 0;
545
+ transform: scale(0.5);
546
+ }
776
547
 
777
- /* Button - Ghost Variant */
778
- .odt-btn--ghost {
779
- background-color: transparent;
780
- box-shadow: none;
781
- }
782
- .odt-btn--ghost-primary { color: var(--color-fg-primary); }
783
- .odt-btn--ghost-primary:hover:not(:disabled) { background-color: var(--color-primary-50); }
784
- .odt-btn--ghost-primary:active:not(:disabled) { background-color: var(--color-primary-100); }
785
-
786
- .odt-btn--ghost-secondary { color: var(--color-fg-secondary); }
787
- .odt-btn--ghost-secondary:hover:not(:disabled) { background-color: var(--color-secondary-50); }
788
- .odt-btn--ghost-secondary:active:not(:disabled) { background-color: var(--color-secondary-100); }
789
-
790
- .odt-btn--ghost-surface,
791
- .odt-btn--ghost-muted,
792
- .odt-btn--ghost-inverse { color: var(--color-fg-strong); }
793
- .odt-btn--ghost-surface:hover:not(:disabled),
794
- .odt-btn--ghost-muted:hover:not(:disabled),
795
- .odt-btn--ghost-inverse:hover:not(:disabled) { background-color: var(--color-surface-muted); }
796
-
797
- .odt-btn--ghost-success { color: var(--color-fg-success); }
798
- .odt-btn--ghost-success:hover:not(:disabled) { background-color: var(--color-surface-success); }
799
-
800
- .odt-btn--ghost-warning { color: var(--color-fg-warning); }
801
- .odt-btn--ghost-warning:hover:not(:disabled) { background-color: var(--color-surface-warning); }
802
-
803
- .odt-btn--ghost-danger { color: var(--color-fg-danger); }
804
- .odt-btn--ghost-danger:hover:not(:disabled) { background-color: var(--color-surface-danger); }
805
-
806
- .odt-btn--ghost-info { color: var(--color-fg-info); }
807
- .odt-btn--ghost-info:hover:not(:disabled) { background-color: var(--color-surface-info); }
808
-
809
- .odt-btn--ghost-neutral { color: var(--color-fg-muted); }
810
- .odt-btn--ghost-neutral:hover:not(:disabled) { color: var(--color-fg); background-color: var(--color-surface-muted); }
811
-
812
- /* Legacy / Secondary Button Variants Compatibility */
813
- .odt-btn--light-primary { background-color: var(--color-primary-50); color: var(--color-primary-700); }
814
- .odt-btn--light-primary:hover:not(:disabled) { background-color: var(--color-primary-100); }
815
- .odt-btn--light-secondary { background-color: var(--color-secondary-50); color: var(--color-secondary-900); }
816
- .odt-btn--light-secondary:hover:not(:disabled) { background-color: var(--color-secondary-100); }
817
- .odt-btn--light-success { background-color: var(--color-surface-success); color: var(--color-fg-success); }
818
- .odt-btn--light-warning { background-color: var(--color-surface-warning); color: var(--color-fg-warning); }
819
- .odt-btn--light-danger { background-color: var(--color-surface-danger); color: var(--color-fg-danger); }
820
- .odt-btn--light-neutral { background-color: var(--color-surface-muted); color: var(--color-fg-muted); }
821
-
822
- .odt-btn--outline-primary, .odt-btn--outlined-primary { border-color: var(--color-primary-300); color: var(--color-primary-600); background-color: transparent; }
823
- .odt-btn--outline-primary:hover:not(:disabled) { background-color: var(--color-primary-50); }
824
- .odt-btn--outline-secondary, .odt-btn--outlined-secondary { border-color: var(--color-secondary-300); color: var(--color-secondary-900); background-color: transparent; }
825
- .odt-btn--outline-secondary:hover:not(:disabled) { background-color: var(--color-secondary-50); }
826
- .odt-btn--outline-danger, .odt-btn--outlined-danger { border-color: var(--color-danger); color: var(--color-danger); background-color: transparent; }
827
- .odt-btn--outline-danger:hover:not(:disabled) { background-color: var(--color-surface-danger); }
828
- .odt-btn--outline-neutral, .odt-btn--outlined-neutral { border-color: var(--color-line); color: var(--color-fg); background-color: transparent; }
829
- .odt-btn--outline-neutral:hover:not(:disabled) { background-color: var(--color-surface-subtle); }
830
-
831
- .odt-btn--subtle-primary { background-color: transparent; color: var(--color-primary-600); }
832
- .odt-btn--subtle-primary:hover:not(:disabled) { background-color: var(--color-primary-50); }
833
- .odt-btn--subtle-secondary { background-color: transparent; color: var(--color-secondary-900); }
834
- .odt-btn--subtle-secondary:hover:not(:disabled) { background-color: var(--color-secondary-50); }
835
- .odt-btn--subtle-neutral { background-color: transparent; color: var(--color-fg); }
836
- .odt-btn--subtle-neutral:hover:not(:disabled) { background-color: var(--color-surface-subtle); }
837
- .odt-btn--subtle-danger { background-color: transparent; color: var(--color-danger); }
838
- .odt-btn--subtle-danger:hover:not(:disabled) { background-color: var(--color-surface-danger); }
548
+ 100% {
549
+ opacity: 1;
550
+ transform: scale(1);
551
+ }
552
+ }
839
553
 
840
- /* ==========================================================================
841
- * 3. Badge Component (.odt-badge)
554
+ /* ==========================================================================
555
+ * 2. Button Component (.odt-btn)
842
556
  * ========================================================================== */
843
- .odt-badge {
844
- display: inline-flex;
845
- align-items: center;
846
- gap: var(--spacing-1-5, 0.375rem);
847
- border-radius: var(--radius-full, 9999px);
848
- font-family: inherit;
849
- font-weight: var(--font-weight-semibold, 600);
850
- line-height: 1;
851
- white-space: nowrap;
852
- box-sizing: border-box;
853
- width: fit-content;
854
- flex-shrink: 0;
855
- }
557
+ .odt-btn {
558
+ display: inline-flex;
559
+ align-items: center;
560
+ justify-content: center;
561
+ gap: var(--spacing-2, 0.5rem);
562
+ font-family: inherit;
563
+ font-weight: var(--font-weight-medium, 500);
564
+ line-height: var(--line-height-tight, 1.25);
565
+ border: 1px solid transparent;
566
+ border-radius: var(--radius-xl, 0.75rem);
567
+ cursor: pointer;
568
+ text-decoration: none;
569
+ white-space: nowrap;
570
+ user-select: none;
571
+ transition: all 0.15s ease-in-out;
572
+ outline: none;
573
+ position: relative;
574
+ box-sizing: border-box;
575
+ }
856
576
 
857
- .odt-badge--sm {
858
- padding: 0.25rem 0.625rem;
859
- font-size: var(--font-size-xs, 0.75rem);
860
- }
577
+ .odt-btn:focus-visible {
578
+ box-shadow: 0 0 0 3px var(--color-ring), var(--shadow-card);
579
+ }
861
580
 
862
- .odt-badge--md {
863
- padding: 0.375rem 0.875rem;
864
- font-size: var(--font-size-sm, 0.875rem);
865
- }
581
+ /* Button Sizes */
582
+ .odt-btn--xs {
583
+ padding: 0.25rem 0.625rem;
584
+ font-size: var(--font-size-xs, 0.75rem);
585
+ border-radius: var(--radius-md, 0.375rem);
586
+ gap: 0.25rem;
587
+ }
866
588
 
867
- .odt-badge__dot {
868
- width: 0.5rem;
869
- height: 0.5rem;
870
- border-radius: 50%;
871
- background-color: currentColor;
872
- display: inline-block;
873
- flex-shrink: 0;
874
- }
589
+ .odt-btn--sm {
590
+ padding: 0.375rem 0.875rem;
591
+ font-size: var(--font-size-xs, 0.75rem);
592
+ border-radius: var(--radius-lg, 0.5rem);
593
+ gap: 0.375rem;
594
+ }
875
595
 
876
- /* Badge - Subtle Variant */
877
- .odt-badge--subtle-primary { background-color: var(--color-primary-50); color: var(--color-primary-600); }
878
- .odt-badge--subtle-secondary { background-color: var(--color-secondary-100); color: var(--color-secondary-900); }
879
- .odt-badge--subtle-success { background-color: var(--color-surface-success); color: var(--color-success); }
880
- .odt-badge--subtle-warning { background-color: var(--color-surface-warning); color: var(--color-warning); }
881
- .odt-badge--subtle-danger { background-color: var(--color-surface-danger); color: var(--color-danger); }
882
- .odt-badge--subtle-info { background-color: var(--color-surface-info); color: var(--color-info); }
883
- .odt-badge--subtle-neutral { background-color: var(--color-surface-muted); color: var(--color-fg-muted); }
884
-
885
- /* Badge - Filled Variant */
886
- .odt-badge--filled-primary { background-color: var(--color-primary-500); color: var(--color-badge-primary-fg, #ffffff); }
887
- .odt-badge--filled-secondary { background-color: var(--color-secondary-500); color: var(--color-badge-secondary-fg, var(--color-fg-strong)); }
888
- .odt-badge--filled-success { background-color: var(--color-success); color: var(--color-badge-success-fg, #ffffff); }
889
- .odt-badge--filled-warning { background-color: var(--color-warning); color: var(--color-badge-warning-fg, var(--color-fg-strong)); }
890
- .odt-badge--filled-danger { background-color: var(--color-danger); color: var(--color-badge-danger-fg, #ffffff); }
891
- .odt-badge--filled-info { background-color: var(--color-info); color: var(--color-badge-info-fg, #ffffff); }
892
- .odt-badge--filled-neutral { background-color: var(--color-neutral-800); color: var(--color-badge-neutral-fg, #ffffff); }
893
-
894
- /* Badge - Outlined Variant */
895
- .odt-badge--outlined, .odt-badge--outline { background-color: transparent; border: 1px solid currentColor; }
896
- .odt-badge--outlined-primary, .odt-badge--outline-primary { color: var(--color-primary-600); border-color: var(--color-primary-300); }
897
- .odt-badge--outlined-secondary, .odt-badge--outline-secondary { color: var(--color-secondary-800); border-color: var(--color-secondary-300); }
898
- .odt-badge--outlined-success, .odt-badge--outline-success { color: var(--color-success); border-color: var(--color-line-success); }
899
- .odt-badge--outlined-warning, .odt-badge--outline-warning { color: var(--color-warning); border-color: var(--color-line-warning); }
900
- .odt-badge--outlined-danger, .odt-badge--outline-danger { color: var(--color-danger); border-color: var(--color-line-danger); }
901
- .odt-badge--outlined-info, .odt-badge--outline-info { color: var(--color-info); border-color: var(--color-info); }
902
- .odt-badge--outlined-neutral, .odt-badge--outline-neutral { color: var(--color-fg-muted); border-color: var(--color-line); }
596
+ .odt-btn--md {
597
+ padding: 0.625rem 1.25rem;
598
+ font-size: var(--font-size-sm, 0.875rem);
599
+ border-radius: var(--radius-xl, 0.75rem);
600
+ gap: 0.5rem;
601
+ }
903
602
 
904
- /* ==========================================================================
905
- * 4. Card Component (.odt-card)
906
- * ========================================================================== */
907
- .odt-card {
908
- box-sizing: border-box;
909
- border-radius: var(--radius-2xl, 1rem);
910
- padding: var(--spacing-6, 1.5rem);
911
- display: flex;
912
- flex-direction: column;
913
- gap: var(--spacing-4, 1rem);
914
- position: relative;
915
- transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
916
- border: 1px solid transparent;
917
- }
603
+ .odt-btn--lg {
604
+ padding: 0.75rem 1.75rem;
605
+ font-size: var(--font-size-base, 1rem);
606
+ border-radius: var(--radius-2xl, 1rem);
607
+ gap: 0.625rem;
608
+ }
918
609
 
919
- .odt-card--elevated {
920
- background-color: var(--color-surface-base);
921
- box-shadow: var(--shadow-card);
922
- }
610
+ .odt-btn--xl {
611
+ padding: 0.875rem 2rem;
612
+ font-size: var(--font-size-lg, 1.125rem);
613
+ border-radius: var(--radius-2xl, 1rem);
614
+ gap: 0.75rem;
615
+ }
923
616
 
924
- .odt-card--outlined {
925
- background-color: var(--color-surface-base);
926
- border: 1px solid var(--color-line);
927
- }
617
+ /* Button Modifiers */
618
+ .odt-btn--full-width {
619
+ width: 100%;
620
+ }
928
621
 
929
- .odt-card--subtle {
930
- background-color: var(--color-surface-subtle);
931
- }
622
+ .odt-btn--loading {
623
+ cursor: wait;
624
+ pointer-events: none;
625
+ }
932
626
 
933
- .odt-card--muted {
934
- background-color: var(--color-surface-muted);
935
- }
627
+ .odt-btn:disabled,
628
+ .odt-btn--disabled {
629
+ opacity: 0.6;
630
+ cursor: not-allowed;
631
+ pointer-events: none;
632
+ box-shadow: none;
633
+ }
936
634
 
937
- .odt-card--ghost {
938
- background-color: transparent;
939
- }
635
+ .odt-btn--icon-only {
636
+ padding: 0 !important;
637
+ flex-shrink: 0;
638
+ }
940
639
 
941
- .odt-card--frosted {
942
- background-color: var(--frosted-surface-bg);
943
- backdrop-filter: blur(var(--frosted-blur, 16px));
944
- -webkit-backdrop-filter: blur(var(--frosted-blur, 16px));
945
- box-shadow: var(--shadow-card);
946
- border: 1px solid var(--frosted-surface-border);
947
- }
640
+ .odt-btn--icon-only.odt-btn--xs {
641
+ width: 1.75rem;
642
+ height: 1.75rem;
643
+ }
948
644
 
949
- /* Card Background Modifiers */
950
- .odt-card--bg-base, .odt-card--bg-surface-base { background-color: var(--color-surface-base); }
951
- .odt-card--bg-surface { background-color: var(--color-surface); }
952
- .odt-card--bg-surface-elevated { background-color: var(--color-surface-elevated); }
953
- .odt-card--bg-surface-muted { background-color: var(--color-surface-muted); }
954
- .odt-card--bg-surface-subtle { background-color: var(--color-surface-subtle); }
955
- .odt-card--bg-gradient-primary { background: var(--gradient-card); }
956
- .odt-card--bg-gradient-secondary { background: var(--gradient-secondary-to-white); }
957
- .odt-card--bg-gradient-vibrant { background: var(--gradient-vibrant); }
958
- .odt-card--bg-gradient-hero { background: var(--gradient-hero-primary); }
959
- .odt-card--bg-transparent { background-color: transparent; }
960
-
961
- .odt-card--bg-frosted,
962
- .odt-card--bg-frosted-muted,
963
- .odt-card--bg-frosted-subtle,
964
- .odt-card--bg-frosted-gradient-primary,
965
- .odt-card--bg-frosted-gradient-secondary {
966
- backdrop-filter: blur(var(--frosted-blur, 16px));
967
- -webkit-backdrop-filter: blur(var(--frosted-blur, 16px));
968
- }
969
- .odt-card--bg-frosted { background-color: var(--frosted-surface-bg); }
970
- .odt-card--bg-frosted-muted { background-color: var(--frosted-muted-bg); }
971
- .odt-card--bg-frosted-subtle { background-color: var(--frosted-subtle-bg); }
972
- .odt-card--bg-frosted-gradient-primary { background: var(--frosted-gradient-primary); }
973
- .odt-card--bg-frosted-gradient-secondary { background: var(--frosted-gradient-secondary); }
974
-
975
- /* Card Border Modifiers */
976
- .odt-card--border-none { border: none; }
977
- .odt-card--border-muted { border: 1px solid var(--color-line-muted); }
978
- .odt-card--border-base { border: 1px solid var(--color-line); }
979
- .odt-card--border-strong { border: 1px solid var(--color-line-strong); }
980
- .odt-card--border-primary { border: 1px solid var(--color-line-primary); }
981
- .odt-card--border-secondary { border: 1px solid var(--color-secondary-500); }
982
- .odt-card--border-danger { border: 1px solid var(--color-line-danger); }
983
- .odt-card--border-success { border: 1px solid var(--color-line-success); }
984
-
985
- /* Card Padding Modifiers */
986
- .odt-card--padding-none { padding: 0; }
987
- .odt-card--padding-xs { padding: var(--spacing-2, 0.5rem); }
988
- .odt-card--padding-sm { padding: var(--spacing-3, 0.75rem); }
989
- .odt-card--padding-md { padding: var(--spacing-4, 1rem); }
990
- .odt-card--padding-lg { padding: var(--spacing-6, 1.5rem); }
991
- .odt-card--padding-xl { padding: var(--spacing-8, 2rem); }
992
- .odt-card--padding-2xl { padding: var(--spacing-10, 2.5rem); }
993
-
994
- .odt-card--hoverable {
995
- cursor: pointer;
996
- }
997
- .odt-card--hoverable:hover {
998
- transform: translateY(-2px);
999
- box-shadow: var(--shadow-dropdown);
1000
- }
645
+ .odt-btn--icon-only.odt-btn--sm {
646
+ width: 2rem;
647
+ height: 2rem;
648
+ }
1001
649
 
1002
- /* Card Sub-components */
1003
- .odt-card__header {
1004
- display: flex;
1005
- flex-direction: column;
1006
- gap: var(--spacing-1, 0.25rem);
1007
- }
650
+ .odt-btn--icon-only.odt-btn--md {
651
+ width: 2.5rem;
652
+ height: 2.5rem;
653
+ }
1008
654
 
1009
- .odt-card__header-with-action {
1010
- display: flex;
1011
- flex-direction: row;
1012
- align-items: flex-start;
1013
- justify-content: space-between;
1014
- gap: var(--spacing-3, 0.75rem);
1015
- width: 100%;
1016
- }
655
+ .odt-btn--icon-only.odt-btn--lg {
656
+ width: 3rem;
657
+ height: 3rem;
658
+ }
1017
659
 
1018
- .odt-card__title {
1019
- font-size: var(--font-size-xl, 1.25rem);
1020
- font-weight: var(--font-weight-bold, 700);
1021
- color: var(--color-fg-strong);
1022
- margin: 0;
1023
- line-height: var(--line-height-tight, 1.25);
1024
- }
660
+ .odt-btn--icon-only.odt-btn--xl {
661
+ width: 3.5rem;
662
+ height: 3.5rem;
663
+ }
1025
664
 
1026
- .odt-card__subtitle,
1027
- .odt-card__description {
1028
- font-size: var(--font-size-sm, 0.875rem);
1029
- color: var(--color-fg-muted);
1030
- margin: 0;
1031
- }
665
+ /* Button - Filled Variant (Default) */
666
+ .odt-btn--filled {
667
+ box-shadow: var(--shadow-card);
668
+ }
1032
669
 
1033
- .odt-card__content {
1034
- color: var(--color-fg);
1035
- font-size: var(--font-size-base, 1rem);
1036
- line-height: var(--line-height-normal, 1.5);
1037
- flex: 1 1 auto;
1038
- }
670
+ .odt-btn--filled-primary,
671
+ .odt-btn--capsule-primary {
672
+ background-color: var(--color-primary-500);
673
+ color: var(--color-btn-primary-fg, #ffffff);
674
+ }
1039
675
 
1040
- .odt-card__footer {
1041
- display: flex;
1042
- align-items: center;
1043
- gap: var(--spacing-3, 0.75rem);
1044
- margin-top: auto;
1045
- }
676
+ .odt-btn--filled-primary:hover:not(:disabled),
677
+ .odt-btn--capsule-primary:hover:not(:disabled) {
678
+ background-color: var(--color-primary-600);
679
+ }
1046
680
 
1047
- /* ==========================================================================
1048
- * 5. Alert Component (.odt-alert)
1049
- * ========================================================================== */
1050
- .odt-alert {
1051
- display: flex;
1052
- align-items: flex-start;
1053
- gap: var(--spacing-3, 0.75rem);
1054
- padding: var(--spacing-4, 1rem);
1055
- border-radius: var(--radius-2xl, 1rem);
1056
- font-size: var(--font-size-sm, 0.875rem);
1057
- box-sizing: border-box;
1058
- border: 1px solid transparent;
1059
- box-shadow: var(--shadow-card);
1060
- }
681
+ .odt-btn--filled-primary:active:not(:disabled),
682
+ .odt-btn--capsule-primary:active:not(:disabled) {
683
+ background-color: var(--color-primary-700);
684
+ }
1061
685
 
1062
- .odt-alert--success {
1063
- background-color: var(--color-surface-success);
1064
- color: var(--color-fg-success);
1065
- border-color: hsl(142 71% 85%);
1066
- }
686
+ .odt-btn--filled-secondary,
687
+ .odt-btn--capsule-secondary {
688
+ background-color: var(--color-secondary-500);
689
+ color: var(--color-btn-secondary-fg, hsl(224 25% 6%));
690
+ }
1067
691
 
1068
- .odt-alert--warning {
1069
- background-color: var(--color-surface-warning);
1070
- color: var(--color-fg-warning);
1071
- border-color: hsl(38 92% 85%);
1072
- }
692
+ .odt-btn--filled-secondary:hover:not(:disabled),
693
+ .odt-btn--capsule-secondary:hover:not(:disabled) {
694
+ background-color: var(--color-secondary-400);
695
+ }
1073
696
 
1074
- .odt-alert--danger {
1075
- background-color: var(--color-surface-danger);
1076
- color: var(--color-fg-danger);
1077
- border-color: hsl(0 84% 90%);
1078
- }
697
+ .odt-btn--filled-secondary:active:not(:disabled),
698
+ .odt-btn--capsule-secondary:active:not(:disabled) {
699
+ background-color: var(--color-secondary-600);
700
+ }
1079
701
 
1080
- .odt-alert--info {
1081
- background-color: var(--color-surface-info);
1082
- color: var(--color-fg-info);
1083
- border-color: hsl(217 91% 90%);
1084
- }
702
+ .odt-btn--filled-surface,
703
+ .odt-btn--capsule-surface {
704
+ background-color: var(--color-surface);
705
+ color: var(--color-btn-surface-fg, var(--color-fg-strong));
706
+ }
1085
707
 
1086
- .odt-alert__icon {
1087
- font-size: 1.125rem;
1088
- flex-shrink: 0;
1089
- margin-top: 0.0625rem;
1090
- }
708
+ .odt-btn--filled-surface:hover:not(:disabled),
709
+ .odt-btn--capsule-surface:hover:not(:disabled) {
710
+ background-color: var(--color-surface-muted);
711
+ }
1091
712
 
1092
- .odt-alert__content {
1093
- flex: 1 1 auto;
1094
- font-weight: var(--font-weight-medium, 500);
1095
- }
713
+ .odt-btn--filled-surface:active:not(:disabled),
714
+ .odt-btn--capsule-surface:active:not(:disabled) {
715
+ background-color: var(--color-surface-subtle);
716
+ }
1096
717
 
1097
- /* ==========================================================================
1098
- * 6. Typography (.odt-heading, .odt-text)
1099
- * ========================================================================== */
1100
- .odt-heading,
1101
- .odt-text {
1102
- margin: 0;
1103
- box-sizing: border-box;
1104
- font-family: inherit;
1105
- }
718
+ .odt-btn--filled-muted,
719
+ .odt-btn--capsule-muted {
720
+ background-color: var(--color-surface-muted);
721
+ color: var(--color-btn-muted-fg, var(--color-fg));
722
+ }
1106
723
 
1107
- .odt-heading--5xl { font-size: var(--font-size-5xl, 3rem); line-height: 1; }
1108
- .odt-heading--4xl { font-size: var(--font-size-4xl, 2.25rem); line-height: 2.5rem; }
1109
- .odt-heading--3xl { font-size: var(--font-size-3xl, 1.875rem); line-height: 2.25rem; }
1110
- .odt-heading--2xl { font-size: var(--font-size-2xl, 1.5rem); line-height: 2rem; }
1111
- .odt-heading--xl { font-size: var(--font-size-xl, 1.25rem); line-height: 1.75rem; }
1112
- .odt-heading--lg { font-size: var(--font-size-lg, 1.125rem); line-height: 1.75rem; }
1113
-
1114
- .odt-text--2xl { font-size: var(--font-size-2xl, 1.5rem); line-height: 2rem; }
1115
- .odt-text--xl { font-size: var(--font-size-xl, 1.25rem); line-height: 1.75rem; }
1116
- .odt-text--lg { font-size: var(--font-size-lg, 1.125rem); line-height: 1.75rem; }
1117
- .odt-text--base{ font-size: var(--font-size-base, 1rem); line-height: 1.5; }
1118
- .odt-text--sm { font-size: var(--font-size-sm, 0.875rem); line-height: 1.25rem; }
1119
- .odt-text--xs { font-size: var(--font-size-xs, 0.75rem); line-height: 1rem; }
1120
-
1121
- .odt-weight-light { font-weight: var(--font-weight-light, 300); }
1122
- .odt-weight-normal { font-weight: var(--font-weight-normal, 400); }
1123
- .odt-weight-medium { font-weight: var(--font-weight-medium, 500); }
1124
- .odt-weight-semibold { font-weight: var(--font-weight-semibold, 600); }
1125
- .odt-weight-bold { font-weight: var(--font-weight-bold, 700); }
1126
- .odt-weight-extrabold { font-weight: var(--font-weight-extrabold, 800); }
1127
-
1128
- .odt-color-strong { color: var(--color-fg-strong); }
1129
- .odt-color-default { color: var(--color-fg); }
1130
- .odt-color-muted { color: var(--color-fg-muted); }
1131
- .odt-color-subtle { color: var(--color-fg-subtle); }
1132
- .odt-color-disabled { color: var(--color-fg-disabled); }
1133
- .odt-color-inverse-strong { color: var(--color-fg-inverse-strong); }
1134
- .odt-color-inverse { color: var(--color-fg-inverse); }
1135
- .odt-color-inverse-muted { color: var(--color-fg-inverse-muted); }
1136
- .odt-color-inverse-subtle { color: var(--color-fg-inverse-subtle); }
1137
- .odt-color-inverse-disabled { color: var(--color-fg-inverse-disabled); }
1138
- .odt-color-primary { color: var(--color-fg-primary); }
1139
- .odt-color-secondary { color: var(--color-fg-secondary); }
1140
- .odt-color-success { color: var(--color-fg-success); }
1141
- .odt-color-warning { color: var(--color-fg-warning); }
1142
- .odt-color-danger { color: var(--color-fg-danger); }
1143
- .odt-color-info { color: var(--color-fg-info); }
1144
-
1145
- .odt-truncate {
1146
- overflow: hidden;
1147
- text-overflow: ellipsis;
1148
- white-space: nowrap;
1149
- }
724
+ .odt-btn--filled-muted:hover:not(:disabled),
725
+ .odt-btn--capsule-muted:hover:not(:disabled) {
726
+ background-color: var(--color-surface-subtle);
727
+ color: var(--color-fg-strong);
728
+ }
1150
729
 
1151
- /* ==========================================================================
1152
- * 7. Avatar Component (.odt-avatar)
1153
- * ========================================================================== */
1154
- .odt-avatar {
1155
- display: inline-flex;
1156
- align-items: center;
1157
- justify-content: center;
1158
- border-radius: var(--radius-full, 9999px);
1159
- overflow: hidden;
1160
- position: relative;
1161
- user-select: none;
1162
- font-weight: var(--font-weight-bold, 700);
1163
- box-sizing: border-box;
1164
- flex-shrink: 0;
1165
- box-shadow: var(--shadow-card);
1166
- }
730
+ .odt-btn--filled-muted:active:not(:disabled),
731
+ .odt-btn--capsule-muted:active:not(:disabled) {
732
+ background-color: var(--color-surface);
733
+ }
1167
734
 
1168
- .odt-avatar--xs { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }
1169
- .odt-avatar--sm { width: 2rem; height: 2rem; font-size: var(--font-size-xs, 0.75rem); }
1170
- .odt-avatar--md { width: 2.5rem; height: 2.5rem; font-size: var(--font-size-sm, 0.875rem); }
1171
- .odt-avatar--lg { width: 3rem; height: 3rem; font-size: var(--font-size-base, 1rem); }
1172
- .odt-avatar--xl { width: 4rem; height: 4rem; font-size: var(--font-size-xl, 1.25rem); }
1173
- .odt-avatar--2xl { width: 4.5rem; height: 4.5rem; font-size: var(--font-size-2xl, 1.5rem); }
1174
-
1175
- .odt-avatar--secondary { background-color: var(--color-secondary-100); color: var(--color-secondary-900); }
1176
- .odt-avatar--primary { background-color: var(--color-primary-100); color: var(--color-primary-600); }
1177
- .odt-avatar--neutral { background-color: var(--color-surface-muted); color: var(--color-fg); }
1178
-
1179
- .odt-avatar__image {
1180
- width: 100%;
1181
- height: 100%;
1182
- object-fit: cover;
1183
- }
735
+ .odt-btn--filled-inverse,
736
+ .odt-btn--capsule-inverse {
737
+ background-color: var(--color-fg-strong);
738
+ color: var(--color-btn-inverse-fg, var(--color-surface));
739
+ }
1184
740
 
1185
- .odt-avatar__fallback {
1186
- width: 100%;
1187
- height: 100%;
1188
- display: flex;
1189
- align-items: center;
1190
- justify-content: center;
1191
- text-transform: uppercase;
1192
- }
741
+ .odt-btn--filled-inverse:hover:not(:disabled),
742
+ .odt-btn--capsule-inverse:hover:not(:disabled) {
743
+ opacity: 0.9;
744
+ }
1193
745
 
1194
- /* ==========================================================================
1195
- * 8. Form Controls (Input, Textarea, Select, Form Group)
1196
- * ========================================================================== */
1197
- .odt-input-container,
1198
- .odt-form-group {
1199
- display: inline-flex;
1200
- flex-direction: column;
1201
- gap: var(--spacing-1-5, 0.375rem);
1202
- box-sizing: border-box;
1203
- width: 100%;
1204
- font-family: inherit;
1205
- }
746
+ .odt-btn--filled-inverse:active:not(:disabled),
747
+ .odt-btn--capsule-inverse:active:not(:disabled) {
748
+ opacity: 0.8;
749
+ }
1206
750
 
1207
- .odt-label {
1208
- font-size: var(--font-size-sm, 0.875rem);
1209
- font-weight: 500;
1210
- color: var(--color-fg-strong);
1211
- line-height: 1.25rem;
1212
- }
751
+ .odt-btn--filled-success,
752
+ .odt-btn--capsule-success {
753
+ background-color: var(--color-success);
754
+ color: var(--color-btn-success-fg, #ffffff);
755
+ }
1213
756
 
1214
- .odt-label--required::after {
1215
- content: " *";
1216
- color: var(--color-danger);
1217
- }
757
+ .odt-btn--filled-success:hover:not(:disabled),
758
+ .odt-btn--capsule-success:hover:not(:disabled) {
759
+ opacity: 0.9;
760
+ }
1218
761
 
1219
- .odt-input-wrapper {
1220
- position: relative;
1221
- display: flex;
1222
- align-items: center;
1223
- width: 100%;
1224
- box-sizing: border-box;
1225
- }
762
+ .odt-btn--filled-success:active:not(:disabled),
763
+ .odt-btn--capsule-success:active:not(:disabled) {
764
+ opacity: 0.8;
765
+ }
1226
766
 
1227
- .odt-input,
1228
- .odt-textarea,
1229
- .odt-select {
1230
- width: 100%;
1231
- box-sizing: border-box;
1232
- background-color: var(--color-surface, #ffffff);
1233
- color: var(--color-fg);
1234
- font-family: inherit;
1235
- outline: none;
1236
- border: 1px solid transparent;
1237
- transition: border-color 140ms ease, box-shadow 140ms ease;
1238
- line-height: 1.25;
1239
- }
767
+ .odt-btn--filled-warning,
768
+ .odt-btn--capsule-warning {
769
+ background-color: var(--color-warning);
770
+ color: var(--color-btn-warning-fg, var(--color-fg-strong));
771
+ }
1240
772
 
1241
- .odt-input::placeholder,
1242
- .odt-textarea::placeholder {
1243
- color: var(--color-fg-subtle);
1244
- }
773
+ .odt-btn--filled-warning:hover:not(:disabled),
774
+ .odt-btn--capsule-warning:hover:not(:disabled) {
775
+ opacity: 0.9;
776
+ }
1245
777
 
1246
- /* Form Variants */
1247
- .odt-input--outlined,
1248
- .odt-textarea--outlined,
1249
- .odt-select--outlined {
1250
- background-color: var(--color-surface, #ffffff);
1251
- border: 1px solid var(--color-line, #e4e4e9);
1252
- }
1253
- .odt-input--outlined:hover:not(:disabled):not(:focus),
1254
- .odt-textarea--outlined:hover:not(:disabled):not(:focus),
1255
- .odt-select--outlined:hover:not(:disabled):not(:focus) {
1256
- border-color: var(--color-line-strong, #d4d4db);
1257
- }
1258
- .odt-input--outlined:focus,
1259
- .odt-textarea--outlined:focus,
1260
- .odt-select--outlined:focus {
1261
- border-color: var(--color-ring);
1262
- }
778
+ .odt-btn--filled-warning:active:not(:disabled),
779
+ .odt-btn--capsule-warning:active:not(:disabled) {
780
+ opacity: 0.8;
781
+ }
1263
782
 
1264
- .odt-input--filled,
1265
- .odt-textarea--filled,
1266
- .odt-select--filled {
1267
- background-color: var(--color-surface, #ffffff);
1268
- border: 1px solid transparent;
1269
- }
1270
- .odt-input--filled:focus,
1271
- .odt-textarea--filled:focus,
1272
- .odt-select--filled:focus {
1273
- border-color: var(--color-ring);
1274
- }
783
+ .odt-btn--filled-danger,
784
+ .odt-btn--capsule-danger {
785
+ background-color: var(--color-danger);
786
+ color: var(--color-btn-danger-fg, #ffffff);
787
+ }
1275
788
 
1276
- .odt-input--frosted,
1277
- .odt-textarea--frosted,
1278
- .odt-select--frosted {
1279
- background-color: hsl(from var(--color-surface) h s l / 0.85);
1280
- backdrop-filter: blur(16px);
1281
- -webkit-backdrop-filter: blur(16px);
1282
- border: 1px solid transparent;
1283
- box-shadow: var(--shadow-card);
1284
- }
1285
- .odt-input--frosted:focus,
1286
- .odt-textarea--frosted:focus,
1287
- .odt-select--frosted:focus {
1288
- border-color: var(--color-ring);
1289
- }
789
+ .odt-btn--filled-danger:hover:not(:disabled),
790
+ .odt-btn--capsule-danger:hover:not(:disabled) {
791
+ opacity: 0.9;
792
+ }
1290
793
 
1291
- .odt-input--unstyled,
1292
- .odt-textarea--unstyled {
1293
- background: transparent;
1294
- border: none;
1295
- padding: 0;
1296
- box-shadow: none;
1297
- }
794
+ .odt-btn--filled-danger:active:not(:disabled),
795
+ .odt-btn--capsule-danger:active:not(:disabled) {
796
+ opacity: 0.8;
797
+ }
1298
798
 
1299
- /* Form Sizes */
1300
- .odt-input--sm, .odt-select--sm {
1301
- height: 2rem;
1302
- padding: 0 var(--spacing-3, 0.75rem);
1303
- font-size: var(--font-size-xs, 0.75rem);
1304
- border-radius: var(--radius-lg, 0.5rem);
1305
- }
1306
- .odt-input--md, .odt-select--md {
1307
- height: 2.625rem;
1308
- padding: 0 var(--spacing-4, 1rem);
1309
- font-size: var(--font-size-sm, 0.875rem);
1310
- border-radius: var(--radius-xl, 0.75rem);
1311
- }
1312
- .odt-input--lg, .odt-select--lg {
1313
- height: 3.125rem;
1314
- padding: 0 var(--spacing-5, 1.25rem);
1315
- font-size: var(--font-size-base, 1rem);
1316
- border-radius: var(--radius-2xl, 1rem);
1317
- }
799
+ .odt-btn--filled-info,
800
+ .odt-btn--capsule-info {
801
+ background-color: var(--color-info);
802
+ color: var(--color-btn-info-fg, #ffffff);
803
+ }
1318
804
 
1319
- .odt-textarea {
1320
- line-height: 1.5;
1321
- height: auto;
1322
- min-height: 5rem;
1323
- }
1324
- .odt-textarea--sm {
1325
- padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
1326
- font-size: var(--font-size-xs, 0.75rem);
1327
- min-height: 4rem;
1328
- border-radius: var(--radius-lg, 0.5rem);
1329
- }
1330
- .odt-textarea--md {
1331
- padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
1332
- font-size: var(--font-size-sm, 0.875rem);
1333
- min-height: 5rem;
1334
- border-radius: var(--radius-xl, 0.75rem);
1335
- }
1336
- .odt-textarea--lg {
1337
- padding: var(--spacing-4, 1rem) var(--spacing-5, 1.25rem);
1338
- font-size: var(--font-size-base, 1rem);
1339
- min-height: 6.5rem;
1340
- border-radius: var(--radius-2xl, 1rem);
1341
- }
805
+ .odt-btn--filled-info:hover:not(:disabled),
806
+ .odt-btn--capsule-info:hover:not(:disabled) {
807
+ opacity: 0.9;
808
+ }
1342
809
 
1343
- .odt-textarea--resize-none { resize: none; }
1344
- .odt-textarea--resize-vertical { resize: vertical; }
1345
- .odt-textarea--resize-horizontal { resize: horizontal; }
1346
- .odt-textarea--resize-both { resize: both; }
1347
-
1348
- /* Select Dropdown */
1349
- .odt-select {
1350
- appearance: none;
1351
- -webkit-appearance: none;
1352
- padding-right: 2.5rem;
1353
- cursor: pointer;
1354
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
1355
- background-repeat: no-repeat;
1356
- background-position: right 0.75rem center;
1357
- }
810
+ .odt-btn--filled-info:active:not(:disabled),
811
+ .odt-btn--capsule-info:active:not(:disabled) {
812
+ opacity: 0.8;
813
+ }
1358
814
 
1359
- /* Icons & Addons */
1360
- .odt-input__left-icon {
1361
- position: absolute;
1362
- left: var(--spacing-3, 0.75rem);
1363
- display: flex;
1364
- align-items: center;
1365
- justify-content: center;
1366
- color: var(--color-fg-muted);
1367
- pointer-events: none;
1368
- z-index: 1;
1369
- }
815
+ .odt-btn--filled-neutral,
816
+ .odt-btn--capsule-neutral {
817
+ background-color: var(--color-neutral-800);
818
+ color: #ffffff;
819
+ }
1370
820
 
1371
- .odt-input__right-icon {
1372
- position: absolute;
1373
- right: var(--spacing-3, 0.75rem);
1374
- display: flex;
1375
- align-items: center;
1376
- justify-content: center;
1377
- color: var(--color-fg-muted);
1378
- z-index: 2;
1379
- }
821
+ .odt-btn--filled-neutral:hover:not(:disabled),
822
+ .odt-btn--capsule-neutral:hover:not(:disabled) {
823
+ background-color: var(--color-neutral-900);
824
+ }
1380
825
 
1381
- .odt-input--has-left-icon.odt-input--sm { padding-left: 2rem; }
1382
- .odt-input--has-left-icon.odt-input--md { padding-left: 2.5rem; }
1383
- .odt-input--has-left-icon.odt-input--lg { padding-left: 3rem; }
826
+ /* Button - Capsule Variant */
827
+ .odt-btn--capsule {
828
+ border-radius: var(--radius-full, 9999px) !important;
829
+ box-shadow: var(--shadow-card);
830
+ }
1384
831
 
1385
- .odt-input--has-right-icon.odt-input--sm { padding-right: 2rem; }
1386
- .odt-input--has-right-icon.odt-input--md { padding-right: 2.5rem; }
1387
- .odt-input--has-right-icon.odt-input--lg { padding-right: 3rem; }
832
+ .odt-btn--capsule.odt-btn--sm {
833
+ padding: 0.375rem 1.125rem;
834
+ }
1388
835
 
1389
- /* Addon Groups */
1390
- .odt-input__addon-group {
1391
- display: flex;
1392
- align-items: stretch;
1393
- width: 100%;
1394
- }
1395
- .odt-input__addon-before,
1396
- .odt-input__addon-after {
1397
- display: inline-flex;
1398
- align-items: center;
1399
- justify-content: center;
1400
- padding: 0 var(--spacing-3, 0.75rem);
1401
- background-color: var(--color-surface, #ffffff);
1402
- color: var(--color-fg-muted);
1403
- font-size: var(--font-size-sm, 0.875rem);
1404
- font-weight: 500;
1405
- white-space: nowrap;
1406
- user-select: none;
1407
- border: 1px solid var(--color-line, #e4e4e9);
1408
- }
1409
- .odt-input__addon-before {
1410
- border-right: none;
1411
- border-top-left-radius: var(--radius-xl, 0.75rem);
1412
- border-bottom-left-radius: var(--radius-xl, 0.75rem);
1413
- }
1414
- .odt-input__addon-after {
1415
- border-left: none;
1416
- border-top-right-radius: var(--radius-xl, 0.75rem);
1417
- border-bottom-right-radius: var(--radius-xl, 0.75rem);
1418
- }
1419
- .odt-input--has-addon-before {
1420
- border-top-left-radius: 0 !important;
1421
- border-bottom-left-radius: 0 !important;
1422
- }
1423
- .odt-input--has-addon-after {
1424
- border-top-right-radius: 0 !important;
1425
- border-bottom-right-radius: 0 !important;
1426
- }
836
+ .odt-btn--capsule.odt-btn--md {
837
+ padding: 0.625rem 1.5rem;
838
+ }
1427
839
 
1428
- /* States */
1429
- .odt-input--error,
1430
- .odt-textarea--error,
1431
- .odt-select--error,
1432
- .odt-input--error:focus,
1433
- .odt-textarea--error:focus,
1434
- .odt-select--error:focus {
1435
- border-color: var(--color-danger) !important;
1436
- }
840
+ .odt-btn--capsule.odt-btn--lg {
841
+ padding: 0.75rem 2rem;
842
+ }
1437
843
 
1438
- .odt-input--success,
1439
- .odt-textarea--success,
1440
- .odt-select--success,
1441
- .odt-input--success:focus,
1442
- .odt-textarea--success:focus,
1443
- .odt-select--success:focus {
1444
- border-color: var(--color-success) !important;
1445
- }
844
+ /* Button - Frosted Variant */
845
+ .odt-btn--frosted {
846
+ backdrop-filter: blur(var(--frosted-blur, 16px));
847
+ -webkit-backdrop-filter: blur(var(--frosted-blur, 16px));
848
+ box-shadow: var(--shadow-card);
849
+ }
1446
850
 
1447
- .odt-input:disabled,
1448
- .odt-textarea:disabled,
1449
- .odt-select:disabled {
1450
- background-color: var(--color-surface-subtle);
1451
- color: var(--color-fg-disabled);
1452
- cursor: not-allowed;
1453
- border-color: var(--color-line-muted, rgba(0, 0, 0, 0.05));
1454
- opacity: 0.7;
1455
- }
851
+ .odt-btn--frosted-primary {
852
+ background-color: hsl(from var(--color-primary-500) h s l / 0.85);
853
+ color: var(--color-btn-primary-fg, #ffffff);
854
+ }
1456
855
 
1457
- /* Help & Error Messages */
1458
- .odt-helper-text {
1459
- font-size: var(--font-size-xs, 0.75rem);
1460
- color: var(--color-fg-muted);
1461
- margin: 0;
1462
- line-height: 1rem;
1463
- }
856
+ .odt-btn--frosted-primary:hover:not(:disabled) {
857
+ background-color: hsl(from var(--color-primary-500) h s l / 0.95);
858
+ }
1464
859
 
1465
- .odt-error-text {
1466
- font-size: var(--font-size-xs, 0.75rem);
1467
- color: var(--color-danger);
1468
- font-weight: 500;
1469
- margin: 0;
1470
- line-height: 1rem;
1471
- }
860
+ .odt-btn--frosted-secondary {
861
+ background-color: hsl(from var(--color-secondary-500) h s l / 0.85);
862
+ color: var(--color-btn-secondary-fg, hsl(224 25% 6%));
863
+ }
1472
864
 
1473
- .odt-success-text {
1474
- font-size: var(--font-size-xs, 0.75rem);
1475
- color: var(--color-success);
1476
- font-weight: 500;
1477
- margin: 0;
1478
- line-height: 1rem;
1479
- }
865
+ .odt-btn--frosted-secondary:hover:not(:disabled) {
866
+ background-color: hsl(from var(--color-secondary-500) h s l / 0.95);
867
+ }
1480
868
 
1481
- /* ==========================================================================
1482
- * 9. Checkbox & Radio (.odt-checkbox, .odt-radio)
1483
- * ========================================================================== */
1484
- .odt-checkbox-wrapper,
1485
- .odt-radio-wrapper {
1486
- display: inline-flex;
1487
- flex-direction: column;
1488
- gap: 0.25rem;
1489
- }
869
+ .odt-btn--frosted-surface {
870
+ background-color: var(--frosted-surface-bg);
871
+ color: var(--color-btn-surface-fg, var(--color-fg-strong));
872
+ }
1490
873
 
1491
- .odt-checkbox-container,
1492
- .odt-radio-container {
1493
- display: inline-flex;
1494
- align-items: flex-start;
1495
- gap: var(--spacing-2-5, 0.625rem);
1496
- cursor: pointer;
1497
- user-select: none;
1498
- }
874
+ .odt-btn--frosted-surface:hover:not(:disabled) {
875
+ background-color: var(--frosted-muted-bg);
876
+ }
1499
877
 
1500
- .odt-checkbox,
1501
- .odt-radio {
1502
- appearance: none;
1503
- -webkit-appearance: none;
1504
- position: relative;
1505
- display: inline-flex;
1506
- align-items: center;
1507
- justify-content: center;
1508
- flex-shrink: 0;
1509
- background-color: var(--color-surface-subtle, #e4e4e9);
1510
- border: none;
1511
- color: #ffffff;
1512
- cursor: pointer;
1513
- padding: 0;
1514
- outline: none;
1515
- box-sizing: border-box;
1516
- transition: background-color 140ms ease, box-shadow 140ms ease, transform 100ms ease;
1517
- margin-top: 0.125rem;
1518
- }
878
+ .odt-btn--frosted-muted {
879
+ background-color: var(--frosted-muted-bg);
880
+ color: var(--color-btn-muted-fg, var(--color-fg));
881
+ }
1519
882
 
1520
- .odt-checkbox {
1521
- width: 1.125rem;
1522
- height: 1.125rem;
1523
- border-radius: var(--radius-md, 0.375rem);
1524
- }
883
+ .odt-btn--frosted-muted:hover:not(:disabled) {
884
+ background-color: var(--frosted-subtle-bg);
885
+ }
1525
886
 
1526
- .odt-radio {
1527
- width: 1.125rem;
1528
- height: 1.125rem;
1529
- border-radius: var(--radius-full, 9999px);
1530
- }
887
+ .odt-btn--frosted-inverse {
888
+ background-color: hsl(from var(--color-fg-strong) h s l / 0.85);
889
+ color: var(--color-btn-inverse-fg, var(--color-surface));
890
+ }
1531
891
 
1532
- .odt-checkbox:active:not(:disabled),
1533
- .odt-radio:active:not(:disabled) {
1534
- transform: scale(0.94);
1535
- }
892
+ .odt-btn--frosted-inverse:hover:not(:disabled) {
893
+ background-color: hsl(from var(--color-fg-strong) h s l / 0.95);
894
+ }
1536
895
 
1537
- /* Checkbox & Radio Sizes */
1538
- .odt-checkbox--sm, .odt-radio--sm {
1539
- width: 0.9375rem;
1540
- height: 0.9375rem;
1541
- margin-top: 0.1875rem;
1542
- }
896
+ .odt-btn--frosted-success {
897
+ background-color: hsl(from var(--color-success) h s l / 0.85);
898
+ color: var(--color-btn-success-fg, #ffffff);
899
+ }
1543
900
 
1544
- .odt-checkbox--md, .odt-radio--md {
1545
- width: 1.125rem;
1546
- height: 1.125rem;
1547
- margin-top: 0.125rem;
1548
- }
901
+ .odt-btn--frosted-warning {
902
+ background-color: hsl(from var(--color-warning) h s l / 0.85);
903
+ color: var(--color-btn-warning-fg, var(--color-fg-strong));
904
+ }
1549
905
 
1550
- .odt-checkbox--lg, .odt-radio--lg {
1551
- width: 1.375rem;
1552
- height: 1.375rem;
1553
- margin-top: 0.0625rem;
1554
- }
906
+ .odt-btn--frosted-danger {
907
+ background-color: hsl(from var(--color-danger) h s l / 0.85);
908
+ color: var(--color-btn-danger-fg, #ffffff);
909
+ }
1555
910
 
1556
- /* Checkmark indicator */
1557
- .odt-checkbox:checked::after {
1558
- content: "";
1559
- display: block;
1560
- width: 4px;
1561
- height: 8px;
1562
- border: solid currentColor;
1563
- border-width: 0 2px 2px 0;
1564
- transform: rotate(45deg);
1565
- margin-bottom: 2px;
1566
- animation: odt-pop 140ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
1567
- }
911
+ .odt-btn--frosted-info {
912
+ background-color: hsl(from var(--color-info) h s l / 0.85);
913
+ color: var(--color-btn-info-fg, #ffffff);
914
+ }
1568
915
 
1569
- .odt-checkbox--sm:checked::after {
1570
- width: 3px;
1571
- height: 6px;
1572
- border-width: 0 1.5px 1.5px 0;
1573
- margin-bottom: 1px;
1574
- }
916
+ /* Button - Ghost Variant */
917
+ .odt-btn--ghost {
918
+ background-color: transparent;
919
+ box-shadow: none;
920
+ }
1575
921
 
1576
- .odt-checkbox--lg:checked::after {
1577
- width: 5px;
1578
- height: 10px;
1579
- border-width: 0 2.5px 2.5px 0;
1580
- margin-bottom: 2px;
1581
- }
922
+ .odt-btn--ghost-primary {
923
+ color: var(--color-fg-primary);
924
+ }
925
+
926
+ .odt-btn--ghost-primary:hover:not(:disabled) {
927
+ background-color: var(--color-primary-50);
928
+ }
929
+
930
+ .odt-btn--ghost-primary:active:not(:disabled) {
931
+ background-color: var(--color-primary-100);
932
+ }
933
+
934
+ .odt-btn--ghost-secondary {
935
+ color: var(--color-fg-secondary);
936
+ }
937
+
938
+ .odt-btn--ghost-secondary:hover:not(:disabled) {
939
+ background-color: var(--color-secondary-50);
940
+ }
941
+
942
+ .odt-btn--ghost-secondary:active:not(:disabled) {
943
+ background-color: var(--color-secondary-100);
944
+ }
945
+
946
+ .odt-btn--ghost-surface,
947
+ .odt-btn--ghost-muted,
948
+ .odt-btn--ghost-inverse {
949
+ color: var(--color-fg-strong);
950
+ }
951
+
952
+ .odt-btn--ghost-surface:hover:not(:disabled),
953
+ .odt-btn--ghost-muted:hover:not(:disabled),
954
+ .odt-btn--ghost-inverse:hover:not(:disabled) {
955
+ background-color: var(--color-surface-muted);
956
+ }
957
+
958
+ .odt-btn--ghost-success {
959
+ color: var(--color-fg-success);
960
+ }
961
+
962
+ .odt-btn--ghost-success:hover:not(:disabled) {
963
+ background-color: var(--color-surface-success);
964
+ }
965
+
966
+ .odt-btn--ghost-warning {
967
+ color: var(--color-fg-warning);
968
+ }
969
+
970
+ .odt-btn--ghost-warning:hover:not(:disabled) {
971
+ background-color: var(--color-surface-warning);
972
+ }
973
+
974
+ .odt-btn--ghost-danger {
975
+ color: var(--color-fg-danger);
976
+ }
977
+
978
+ .odt-btn--ghost-danger:hover:not(:disabled) {
979
+ background-color: var(--color-surface-danger);
980
+ }
981
+
982
+ .odt-btn--ghost-info {
983
+ color: var(--color-fg-info);
984
+ }
985
+
986
+ .odt-btn--ghost-info:hover:not(:disabled) {
987
+ background-color: var(--color-surface-info);
988
+ }
989
+
990
+ .odt-btn--ghost-neutral {
991
+ color: var(--color-fg-muted);
992
+ }
993
+
994
+ .odt-btn--ghost-neutral:hover:not(:disabled) {
995
+ color: var(--color-fg);
996
+ background-color: var(--color-surface-muted);
997
+ }
998
+
999
+ /* Legacy / Secondary Button Variants Compatibility */
1000
+ .odt-btn--light-primary {
1001
+ background-color: var(--color-primary-50);
1002
+ color: var(--color-primary-700);
1003
+ }
1004
+
1005
+ .odt-btn--light-primary:hover:not(:disabled) {
1006
+ background-color: var(--color-primary-100);
1007
+ }
1008
+
1009
+ .odt-btn--light-secondary {
1010
+ background-color: var(--color-secondary-50);
1011
+ color: var(--color-secondary-900);
1012
+ }
1013
+
1014
+ .odt-btn--light-secondary:hover:not(:disabled) {
1015
+ background-color: var(--color-secondary-100);
1016
+ }
1017
+
1018
+ .odt-btn--light-success {
1019
+ background-color: var(--color-surface-success);
1020
+ color: var(--color-fg-success);
1021
+ }
1022
+
1023
+ .odt-btn--light-warning {
1024
+ background-color: var(--color-surface-warning);
1025
+ color: var(--color-fg-warning);
1026
+ }
1027
+
1028
+ .odt-btn--light-danger {
1029
+ background-color: var(--color-surface-danger);
1030
+ color: var(--color-fg-danger);
1031
+ }
1032
+
1033
+ .odt-btn--light-neutral {
1034
+ background-color: var(--color-surface-muted);
1035
+ color: var(--color-fg-muted);
1036
+ }
1037
+
1038
+ .odt-btn--outline-primary,
1039
+ .odt-btn--outlined-primary {
1040
+ border-color: var(--color-primary-300);
1041
+ color: var(--color-primary-600);
1042
+ background-color: transparent;
1043
+ }
1044
+
1045
+ .odt-btn--outline-primary:hover:not(:disabled) {
1046
+ background-color: var(--color-primary-50);
1047
+ }
1048
+
1049
+ .odt-btn--outline-secondary,
1050
+ .odt-btn--outlined-secondary {
1051
+ border-color: var(--color-secondary-300);
1052
+ color: var(--color-secondary-900);
1053
+ background-color: transparent;
1054
+ }
1055
+
1056
+ .odt-btn--outline-secondary:hover:not(:disabled) {
1057
+ background-color: var(--color-secondary-50);
1058
+ }
1059
+
1060
+ .odt-btn--outline-danger,
1061
+ .odt-btn--outlined-danger {
1062
+ border-color: var(--color-danger);
1063
+ color: var(--color-danger);
1064
+ background-color: transparent;
1065
+ }
1066
+
1067
+ .odt-btn--outline-danger:hover:not(:disabled) {
1068
+ background-color: var(--color-surface-danger);
1069
+ }
1070
+
1071
+ .odt-btn--outline-neutral,
1072
+ .odt-btn--outlined-neutral {
1073
+ border-color: var(--color-line);
1074
+ color: var(--color-fg);
1075
+ background-color: transparent;
1076
+ }
1077
+
1078
+ .odt-btn--outline-neutral:hover:not(:disabled) {
1079
+ background-color: var(--color-surface-subtle);
1080
+ }
1081
+
1082
+ .odt-btn--subtle-primary {
1083
+ background-color: transparent;
1084
+ color: var(--color-primary-600);
1085
+ }
1086
+
1087
+ .odt-btn--subtle-primary:hover:not(:disabled) {
1088
+ background-color: var(--color-primary-50);
1089
+ }
1090
+
1091
+ .odt-btn--subtle-secondary {
1092
+ background-color: transparent;
1093
+ color: var(--color-secondary-900);
1094
+ }
1095
+
1096
+ .odt-btn--subtle-secondary:hover:not(:disabled) {
1097
+ background-color: var(--color-secondary-50);
1098
+ }
1099
+
1100
+ .odt-btn--subtle-neutral {
1101
+ background-color: transparent;
1102
+ color: var(--color-fg);
1103
+ }
1104
+
1105
+ .odt-btn--subtle-neutral:hover:not(:disabled) {
1106
+ background-color: var(--color-surface-subtle);
1107
+ }
1108
+
1109
+ .odt-btn--subtle-danger {
1110
+ background-color: transparent;
1111
+ color: var(--color-danger);
1112
+ }
1113
+
1114
+ .odt-btn--subtle-danger:hover:not(:disabled) {
1115
+ background-color: var(--color-surface-danger);
1116
+ }
1117
+
1118
+ /* ==========================================================================
1119
+ * 3. Badge Component (.odt-badge)
1120
+ * ========================================================================== */
1121
+ .odt-badge {
1122
+ display: inline-flex;
1123
+ align-items: center;
1124
+ gap: var(--spacing-1-5, 0.375rem);
1125
+ border-radius: var(--radius-full, 9999px);
1126
+ font-family: inherit;
1127
+ font-weight: var(--font-weight-semibold, 600);
1128
+ line-height: 1;
1129
+ white-space: nowrap;
1130
+ box-sizing: border-box;
1131
+ width: fit-content;
1132
+ flex-shrink: 0;
1133
+ }
1134
+
1135
+ .odt-badge--sm {
1136
+ padding: 0.25rem 0.625rem;
1137
+ font-size: var(--font-size-xs, 0.75rem);
1138
+ }
1139
+
1140
+ .odt-badge--md {
1141
+ padding: 0.375rem 0.875rem;
1142
+ font-size: var(--font-size-sm, 0.875rem);
1143
+ }
1144
+
1145
+ .odt-badge__dot {
1146
+ width: 0.5rem;
1147
+ height: 0.5rem;
1148
+ border-radius: 50%;
1149
+ background-color: currentColor;
1150
+ display: inline-block;
1151
+ flex-shrink: 0;
1152
+ }
1153
+
1154
+ /* Badge - Subtle Variant */
1155
+ .odt-badge--subtle-primary {
1156
+ background-color: var(--color-primary-50);
1157
+ color: var(--color-primary-600);
1158
+ }
1159
+
1160
+ .odt-badge--subtle-secondary {
1161
+ background-color: var(--color-secondary-100);
1162
+ color: var(--color-secondary-900);
1163
+ }
1164
+
1165
+ .odt-badge--subtle-success {
1166
+ background-color: var(--color-surface-success);
1167
+ color: var(--color-success);
1168
+ }
1169
+
1170
+ .odt-badge--subtle-warning {
1171
+ background-color: var(--color-surface-warning);
1172
+ color: var(--color-warning);
1173
+ }
1174
+
1175
+ .odt-badge--subtle-danger {
1176
+ background-color: var(--color-surface-danger);
1177
+ color: var(--color-danger);
1178
+ }
1179
+
1180
+ .odt-badge--subtle-info {
1181
+ background-color: var(--color-surface-info);
1182
+ color: var(--color-info);
1183
+ }
1184
+
1185
+ .odt-badge--subtle-neutral {
1186
+ background-color: var(--color-surface-muted);
1187
+ color: var(--color-fg-muted);
1188
+ }
1189
+
1190
+ /* Badge - Filled Variant */
1191
+ .odt-badge--filled-primary {
1192
+ background-color: var(--color-primary-500);
1193
+ color: var(--color-badge-primary-fg, #ffffff);
1194
+ }
1195
+
1196
+ .odt-badge--filled-secondary {
1197
+ background-color: var(--color-secondary-500);
1198
+ color: var(--color-badge-secondary-fg, var(--color-fg-strong));
1199
+ }
1200
+
1201
+ .odt-badge--filled-success {
1202
+ background-color: var(--color-success);
1203
+ color: var(--color-badge-success-fg, #ffffff);
1204
+ }
1205
+
1206
+ .odt-badge--filled-warning {
1207
+ background-color: var(--color-warning);
1208
+ color: var(--color-badge-warning-fg, var(--color-fg-strong));
1209
+ }
1210
+
1211
+ .odt-badge--filled-danger {
1212
+ background-color: var(--color-danger);
1213
+ color: var(--color-badge-danger-fg, #ffffff);
1214
+ }
1215
+
1216
+ .odt-badge--filled-info {
1217
+ background-color: var(--color-info);
1218
+ color: var(--color-badge-info-fg, #ffffff);
1219
+ }
1220
+
1221
+ .odt-badge--filled-neutral {
1222
+ background-color: var(--color-neutral-800);
1223
+ color: var(--color-badge-neutral-fg, #ffffff);
1224
+ }
1225
+
1226
+ /* Badge - Outlined Variant */
1227
+ .odt-badge--outlined,
1228
+ .odt-badge--outline {
1229
+ background-color: transparent;
1230
+ border: 1px solid currentColor;
1231
+ }
1232
+
1233
+ .odt-badge--outlined-primary,
1234
+ .odt-badge--outline-primary {
1235
+ color: var(--color-primary-600);
1236
+ border-color: var(--color-primary-300);
1237
+ }
1238
+
1239
+ .odt-badge--outlined-secondary,
1240
+ .odt-badge--outline-secondary {
1241
+ color: var(--color-secondary-800);
1242
+ border-color: var(--color-secondary-300);
1243
+ }
1244
+
1245
+ .odt-badge--outlined-success,
1246
+ .odt-badge--outline-success {
1247
+ color: var(--color-success);
1248
+ border-color: var(--color-line-success);
1249
+ }
1250
+
1251
+ .odt-badge--outlined-warning,
1252
+ .odt-badge--outline-warning {
1253
+ color: var(--color-warning);
1254
+ border-color: var(--color-line-warning);
1255
+ }
1256
+
1257
+ .odt-badge--outlined-danger,
1258
+ .odt-badge--outline-danger {
1259
+ color: var(--color-danger);
1260
+ border-color: var(--color-line-danger);
1261
+ }
1262
+
1263
+ .odt-badge--outlined-info,
1264
+ .odt-badge--outline-info {
1265
+ color: var(--color-info);
1266
+ border-color: var(--color-info);
1267
+ }
1268
+
1269
+ .odt-badge--outlined-neutral,
1270
+ .odt-badge--outline-neutral {
1271
+ color: var(--color-fg-muted);
1272
+ border-color: var(--color-line);
1273
+ }
1274
+
1275
+ /* ==========================================================================
1276
+ * 4. Card Component (.odt-card)
1277
+ * ========================================================================== */
1278
+ .odt-card {
1279
+ box-sizing: border-box;
1280
+ border-radius: var(--radius-2xl, 1rem);
1281
+ padding: var(--spacing-6, 1.5rem);
1282
+ display: flex;
1283
+ flex-direction: column;
1284
+ gap: var(--spacing-4, 1rem);
1285
+ position: relative;
1286
+ transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
1287
+ border: 1px solid transparent;
1288
+ }
1289
+
1290
+ .odt-card--elevated {
1291
+ background-color: var(--color-surface-base);
1292
+ box-shadow: var(--shadow-card);
1293
+ }
1294
+
1295
+ .odt-card--outlined {
1296
+ background-color: var(--color-surface-base);
1297
+ border: 1px solid var(--color-line);
1298
+ }
1299
+
1300
+ .odt-card--subtle {
1301
+ background-color: var(--color-surface-subtle);
1302
+ }
1303
+
1304
+ .odt-card--muted {
1305
+ background-color: var(--color-surface-muted);
1306
+ }
1307
+
1308
+ .odt-card--ghost {
1309
+ background-color: transparent;
1310
+ }
1311
+
1312
+ .odt-card--frosted {
1313
+ background-color: var(--frosted-surface-bg);
1314
+ backdrop-filter: blur(var(--frosted-blur, 16px));
1315
+ -webkit-backdrop-filter: blur(var(--frosted-blur, 16px));
1316
+ box-shadow: var(--shadow-card);
1317
+ border: 1px solid var(--frosted-surface-border);
1318
+ }
1319
+
1320
+ /* Card Background Modifiers */
1321
+ .odt-card--bg-base,
1322
+ .odt-card--bg-surface-base {
1323
+ background-color: var(--color-surface-base);
1324
+ }
1325
+
1326
+ .odt-card--bg-surface {
1327
+ background-color: var(--color-surface);
1328
+ }
1329
+
1330
+ .odt-card--bg-surface-elevated {
1331
+ background-color: var(--color-surface-elevated);
1332
+ }
1333
+
1334
+ .odt-card--bg-surface-muted {
1335
+ background-color: var(--color-surface-muted);
1336
+ }
1337
+
1338
+ .odt-card--bg-surface-subtle {
1339
+ background-color: var(--color-surface-subtle);
1340
+ }
1341
+
1342
+ .odt-card--bg-gradient-primary {
1343
+ background: var(--gradient-card);
1344
+ }
1345
+
1346
+ .odt-card--bg-gradient-secondary {
1347
+ background: var(--gradient-secondary-to-white);
1348
+ }
1349
+
1350
+ .odt-card--bg-gradient-vibrant {
1351
+ background: var(--gradient-vibrant);
1352
+ }
1353
+
1354
+ .odt-card--bg-gradient-hero {
1355
+ background: var(--gradient-hero-primary);
1356
+ }
1357
+
1358
+ .odt-card--bg-transparent {
1359
+ background-color: transparent;
1360
+ }
1361
+
1362
+ .odt-card--bg-frosted,
1363
+ .odt-card--bg-frosted-muted,
1364
+ .odt-card--bg-frosted-subtle,
1365
+ .odt-card--bg-frosted-gradient-primary,
1366
+ .odt-card--bg-frosted-gradient-secondary {
1367
+ backdrop-filter: blur(var(--frosted-blur, 16px));
1368
+ -webkit-backdrop-filter: blur(var(--frosted-blur, 16px));
1369
+ }
1370
+
1371
+ .odt-card--bg-frosted {
1372
+ background-color: var(--frosted-surface-bg);
1373
+ }
1374
+
1375
+ .odt-card--bg-frosted-muted {
1376
+ background-color: var(--frosted-muted-bg);
1377
+ }
1378
+
1379
+ .odt-card--bg-frosted-subtle {
1380
+ background-color: var(--frosted-subtle-bg);
1381
+ }
1382
+
1383
+ .odt-card--bg-frosted-gradient-primary {
1384
+ background: var(--frosted-gradient-primary);
1385
+ }
1386
+
1387
+ .odt-card--bg-frosted-gradient-secondary {
1388
+ background: var(--frosted-gradient-secondary);
1389
+ }
1390
+
1391
+ /* Card Border Modifiers */
1392
+ .odt-card--border-none {
1393
+ border: none;
1394
+ }
1395
+
1396
+ .odt-card--border-muted {
1397
+ border: 1px solid var(--color-line-muted);
1398
+ }
1399
+
1400
+ .odt-card--border-base {
1401
+ border: 1px solid var(--color-line);
1402
+ }
1403
+
1404
+ .odt-card--border-strong {
1405
+ border: 1px solid var(--color-line-strong);
1406
+ }
1407
+
1408
+ .odt-card--border-primary {
1409
+ border: 1px solid var(--color-line-primary);
1410
+ }
1411
+
1412
+ .odt-card--border-secondary {
1413
+ border: 1px solid var(--color-secondary-500);
1414
+ }
1415
+
1416
+ .odt-card--border-danger {
1417
+ border: 1px solid var(--color-line-danger);
1418
+ }
1419
+
1420
+ .odt-card--border-success {
1421
+ border: 1px solid var(--color-line-success);
1422
+ }
1423
+
1424
+ /* Card Padding Modifiers */
1425
+ .odt-card--padding-none {
1426
+ padding: 0;
1427
+ }
1428
+
1429
+ .odt-card--padding-xs {
1430
+ padding: var(--spacing-2, 0.5rem);
1431
+ }
1432
+
1433
+ .odt-card--padding-sm {
1434
+ padding: var(--spacing-3, 0.75rem);
1435
+ }
1436
+
1437
+ .odt-card--padding-md {
1438
+ padding: var(--spacing-4, 1rem);
1439
+ }
1440
+
1441
+ .odt-card--padding-lg {
1442
+ padding: var(--spacing-6, 1.5rem);
1443
+ }
1444
+
1445
+ .odt-card--padding-xl {
1446
+ padding: var(--spacing-8, 2rem);
1447
+ }
1448
+
1449
+ .odt-card--padding-2xl {
1450
+ padding: var(--spacing-10, 2.5rem);
1451
+ }
1452
+
1453
+ .odt-card--hoverable {
1454
+ cursor: pointer;
1455
+ }
1456
+
1457
+ .odt-card--hoverable:hover {
1458
+ transform: translateY(-2px);
1459
+ box-shadow: var(--shadow-dropdown);
1460
+ }
1461
+
1462
+ /* Card Sub-components */
1463
+ .odt-card__header {
1464
+ display: flex;
1465
+ flex-direction: column;
1466
+ gap: var(--spacing-1, 0.25rem);
1467
+ }
1468
+
1469
+ .odt-card__header-with-action {
1470
+ display: flex;
1471
+ flex-direction: row;
1472
+ align-items: flex-start;
1473
+ justify-content: space-between;
1474
+ gap: var(--spacing-3, 0.75rem);
1475
+ width: 100%;
1476
+ }
1477
+
1478
+ .odt-card__title {
1479
+ font-size: var(--font-size-xl, 1.25rem);
1480
+ font-weight: var(--font-weight-bold, 700);
1481
+ color: var(--color-fg-strong);
1482
+ margin: 0;
1483
+ line-height: var(--line-height-tight, 1.25);
1484
+ }
1485
+
1486
+ .odt-card__subtitle,
1487
+ .odt-card__description {
1488
+ font-size: var(--font-size-sm, 0.875rem);
1489
+ color: var(--color-fg-muted);
1490
+ margin: 0;
1491
+ }
1492
+
1493
+ .odt-card__content {
1494
+ color: var(--color-fg);
1495
+ font-size: var(--font-size-base, 1rem);
1496
+ line-height: var(--line-height-normal, 1.5);
1497
+ flex: 1 1 auto;
1498
+ }
1499
+
1500
+ .odt-card__footer {
1501
+ display: flex;
1502
+ align-items: center;
1503
+ gap: var(--spacing-3, 0.75rem);
1504
+ margin-top: auto;
1505
+ }
1506
+
1507
+ /* ==========================================================================
1508
+ * 5. Alert Component (.odt-alert)
1509
+ * ========================================================================== */
1510
+ .odt-alert {
1511
+ display: flex;
1512
+ align-items: flex-start;
1513
+ gap: var(--spacing-3, 0.75rem);
1514
+ padding: var(--spacing-4, 1rem);
1515
+ border-radius: var(--radius-2xl, 1rem);
1516
+ font-size: var(--font-size-sm, 0.875rem);
1517
+ box-sizing: border-box;
1518
+ border: 1px solid transparent;
1519
+ box-shadow: var(--shadow-card);
1520
+ }
1521
+
1522
+ .odt-alert--success {
1523
+ background-color: var(--color-surface-success);
1524
+ color: var(--color-fg-success);
1525
+ border-color: hsl(142 71% 85%);
1526
+ }
1527
+
1528
+ .odt-alert--warning {
1529
+ background-color: var(--color-surface-warning);
1530
+ color: var(--color-fg-warning);
1531
+ border-color: hsl(38 92% 85%);
1532
+ }
1533
+
1534
+ .odt-alert--danger {
1535
+ background-color: var(--color-surface-danger);
1536
+ color: var(--color-fg-danger);
1537
+ border-color: hsl(0 84% 90%);
1538
+ }
1539
+
1540
+ .odt-alert--info {
1541
+ background-color: var(--color-surface-info);
1542
+ color: var(--color-fg-info);
1543
+ border-color: hsl(217 91% 90%);
1544
+ }
1545
+
1546
+ .odt-alert__icon {
1547
+ font-size: 1.125rem;
1548
+ flex-shrink: 0;
1549
+ margin-top: 0.0625rem;
1550
+ }
1551
+
1552
+ .odt-alert__content {
1553
+ flex: 1 1 auto;
1554
+ font-weight: var(--font-weight-medium, 500);
1555
+ }
1556
+
1557
+ /* ==========================================================================
1558
+ * 6. Typography (.odt-heading, .odt-text)
1559
+ * ========================================================================== */
1560
+ .odt-heading,
1561
+ .odt-text {
1562
+ margin: 0;
1563
+ box-sizing: border-box;
1564
+ font-family: inherit;
1565
+ }
1566
+
1567
+ .odt-heading--5xl {
1568
+ font-size: var(--font-size-5xl, 3rem);
1569
+ line-height: 1;
1570
+ }
1571
+
1572
+ .odt-heading--4xl {
1573
+ font-size: var(--font-size-4xl, 2.25rem);
1574
+ line-height: 2.5rem;
1575
+ }
1576
+
1577
+ .odt-heading--3xl {
1578
+ font-size: var(--font-size-3xl, 1.875rem);
1579
+ line-height: 2.25rem;
1580
+ }
1581
+
1582
+ .odt-heading--2xl {
1583
+ font-size: var(--font-size-2xl, 1.5rem);
1584
+ line-height: 2rem;
1585
+ }
1586
+
1587
+ .odt-heading--xl {
1588
+ font-size: var(--font-size-xl, 1.25rem);
1589
+ line-height: 1.75rem;
1590
+ }
1591
+
1592
+ .odt-heading--lg {
1593
+ font-size: var(--font-size-lg, 1.125rem);
1594
+ line-height: 1.75rem;
1595
+ }
1596
+
1597
+ .odt-text--2xl {
1598
+ font-size: var(--font-size-2xl, 1.5rem);
1599
+ line-height: 2rem;
1600
+ }
1601
+
1602
+ .odt-text--xl {
1603
+ font-size: var(--font-size-xl, 1.25rem);
1604
+ line-height: 1.75rem;
1605
+ }
1606
+
1607
+ .odt-text--lg {
1608
+ font-size: var(--font-size-lg, 1.125rem);
1609
+ line-height: 1.75rem;
1610
+ }
1611
+
1612
+ .odt-text--base {
1613
+ font-size: var(--font-size-base, 1rem);
1614
+ line-height: 1.5;
1615
+ }
1616
+
1617
+ .odt-text--sm {
1618
+ font-size: var(--font-size-sm, 0.875rem);
1619
+ line-height: 1.25rem;
1620
+ }
1621
+
1622
+ .odt-text--xs {
1623
+ font-size: var(--font-size-xs, 0.75rem);
1624
+ line-height: 1rem;
1625
+ }
1626
+
1627
+ .odt-weight-light {
1628
+ font-weight: var(--font-weight-light, 300);
1629
+ }
1630
+
1631
+ .odt-weight-normal {
1632
+ font-weight: var(--font-weight-normal, 400);
1633
+ }
1634
+
1635
+ .odt-weight-medium {
1636
+ font-weight: var(--font-weight-medium, 500);
1637
+ }
1638
+
1639
+ .odt-weight-semibold {
1640
+ font-weight: var(--font-weight-semibold, 600);
1641
+ }
1642
+
1643
+ .odt-weight-bold {
1644
+ font-weight: var(--font-weight-bold, 700);
1645
+ }
1646
+
1647
+ .odt-weight-extrabold {
1648
+ font-weight: var(--font-weight-extrabold, 800);
1649
+ }
1650
+
1651
+ .odt-color-strong {
1652
+ color: var(--color-fg-strong);
1653
+ }
1654
+
1655
+ .odt-color-default {
1656
+ color: var(--color-fg);
1657
+ }
1658
+
1659
+ .odt-color-muted {
1660
+ color: var(--color-fg-muted);
1661
+ }
1662
+
1663
+ .odt-color-subtle {
1664
+ color: var(--color-fg-subtle);
1665
+ }
1666
+
1667
+ .odt-color-disabled {
1668
+ color: var(--color-fg-disabled);
1669
+ }
1670
+
1671
+ .odt-color-inverse-strong {
1672
+ color: var(--color-fg-inverse-strong);
1673
+ }
1674
+
1675
+ .odt-color-inverse {
1676
+ color: var(--color-fg-inverse);
1677
+ }
1678
+
1679
+ .odt-color-inverse-muted {
1680
+ color: var(--color-fg-inverse-muted);
1681
+ }
1682
+
1683
+ .odt-color-inverse-subtle {
1684
+ color: var(--color-fg-inverse-subtle);
1685
+ }
1686
+
1687
+ .odt-color-inverse-disabled {
1688
+ color: var(--color-fg-inverse-disabled);
1689
+ }
1690
+
1691
+ .odt-color-primary {
1692
+ color: var(--color-fg-primary);
1693
+ }
1694
+
1695
+ .odt-color-secondary {
1696
+ color: var(--color-fg-secondary);
1697
+ }
1698
+
1699
+ .odt-color-success {
1700
+ color: var(--color-fg-success);
1701
+ }
1702
+
1703
+ .odt-color-warning {
1704
+ color: var(--color-fg-warning);
1705
+ }
1706
+
1707
+ .odt-color-danger {
1708
+ color: var(--color-fg-danger);
1709
+ }
1710
+
1711
+ .odt-color-info {
1712
+ color: var(--color-fg-info);
1713
+ }
1714
+
1715
+ .odt-truncate {
1716
+ overflow: hidden;
1717
+ text-overflow: ellipsis;
1718
+ white-space: nowrap;
1719
+ }
1720
+
1721
+ /* ==========================================================================
1722
+ * 7. Avatar Component (.odt-avatar)
1723
+ * ========================================================================== */
1724
+ .odt-avatar {
1725
+ display: inline-flex;
1726
+ align-items: center;
1727
+ justify-content: center;
1728
+ border-radius: var(--radius-full, 9999px);
1729
+ overflow: hidden;
1730
+ position: relative;
1731
+ user-select: none;
1732
+ font-weight: var(--font-weight-bold, 700);
1733
+ box-sizing: border-box;
1734
+ flex-shrink: 0;
1735
+ box-shadow: var(--shadow-card);
1736
+ }
1737
+
1738
+ .odt-avatar--xs {
1739
+ width: 1.5rem;
1740
+ height: 1.5rem;
1741
+ font-size: 0.625rem;
1742
+ }
1743
+
1744
+ .odt-avatar--sm {
1745
+ width: 2rem;
1746
+ height: 2rem;
1747
+ font-size: var(--font-size-xs, 0.75rem);
1748
+ }
1749
+
1750
+ .odt-avatar--md {
1751
+ width: 2.5rem;
1752
+ height: 2.5rem;
1753
+ font-size: var(--font-size-sm, 0.875rem);
1754
+ }
1755
+
1756
+ .odt-avatar--lg {
1757
+ width: 3rem;
1758
+ height: 3rem;
1759
+ font-size: var(--font-size-base, 1rem);
1760
+ }
1761
+
1762
+ .odt-avatar--xl {
1763
+ width: 4rem;
1764
+ height: 4rem;
1765
+ font-size: var(--font-size-xl, 1.25rem);
1766
+ }
1767
+
1768
+ .odt-avatar--2xl {
1769
+ width: 4.5rem;
1770
+ height: 4.5rem;
1771
+ font-size: var(--font-size-2xl, 1.5rem);
1772
+ }
1773
+
1774
+ .odt-avatar--secondary {
1775
+ background-color: var(--color-secondary-100);
1776
+ color: var(--color-secondary-900);
1777
+ }
1778
+
1779
+ .odt-avatar--primary {
1780
+ background-color: var(--color-primary-100);
1781
+ color: var(--color-primary-600);
1782
+ }
1783
+
1784
+ .odt-avatar--neutral {
1785
+ background-color: var(--color-surface-muted);
1786
+ color: var(--color-fg);
1787
+ }
1788
+
1789
+ .odt-avatar__image {
1790
+ width: 100%;
1791
+ height: 100%;
1792
+ object-fit: cover;
1793
+ }
1794
+
1795
+ .odt-avatar__fallback {
1796
+ width: 100%;
1797
+ height: 100%;
1798
+ display: flex;
1799
+ align-items: center;
1800
+ justify-content: center;
1801
+ text-transform: uppercase;
1802
+ }
1803
+
1804
+ /* ==========================================================================
1805
+ * 8. Form Controls (Input, Textarea, Select, Form Group)
1806
+ * ========================================================================== */
1807
+ .odt-input-container,
1808
+ .odt-form-group {
1809
+ display: inline-flex;
1810
+ flex-direction: column;
1811
+ gap: var(--spacing-1-5, 0.375rem);
1812
+ box-sizing: border-box;
1813
+ width: 100%;
1814
+ font-family: inherit;
1815
+ }
1816
+
1817
+ .odt-label {
1818
+ font-size: var(--font-size-sm, 0.875rem);
1819
+ font-weight: 500;
1820
+ color: var(--color-fg-strong);
1821
+ line-height: 1.25rem;
1822
+ }
1823
+
1824
+ .odt-label--required::after {
1825
+ content: " *";
1826
+ color: var(--color-danger);
1827
+ }
1828
+
1829
+ .odt-input-wrapper {
1830
+ position: relative;
1831
+ display: flex;
1832
+ align-items: center;
1833
+ width: 100%;
1834
+ box-sizing: border-box;
1835
+ }
1836
+
1837
+ .odt-input,
1838
+ .odt-textarea,
1839
+ .odt-select {
1840
+ width: 100%;
1841
+ box-sizing: border-box;
1842
+ background-color: var(--color-surface, #ffffff);
1843
+ color: var(--color-fg);
1844
+ font-family: inherit;
1845
+ outline: none;
1846
+ border: 1px solid transparent;
1847
+ transition: border-color 140ms ease, box-shadow 140ms ease;
1848
+ line-height: 1.25;
1849
+ }
1850
+
1851
+ .odt-input::placeholder,
1852
+ .odt-textarea::placeholder {
1853
+ color: var(--color-fg-subtle);
1854
+ }
1855
+
1856
+ /* Form Variants */
1857
+ .odt-input--outlined,
1858
+ .odt-textarea--outlined,
1859
+ .odt-select--outlined {
1860
+ background-color: var(--color-surface, #ffffff);
1861
+ border: 1px solid var(--color-line, #e4e4e9);
1862
+ }
1863
+
1864
+ .odt-input--outlined:hover:not(:disabled):not(:focus),
1865
+ .odt-textarea--outlined:hover:not(:disabled):not(:focus),
1866
+ .odt-select--outlined:hover:not(:disabled):not(:focus) {
1867
+ border-color: var(--color-line-strong, #d4d4db);
1868
+ }
1869
+
1870
+ .odt-input--outlined:focus,
1871
+ .odt-textarea--outlined:focus,
1872
+ .odt-select--outlined:focus {
1873
+ border-color: var(--color-ring);
1874
+ }
1875
+
1876
+ .odt-input--filled,
1877
+ .odt-textarea--filled,
1878
+ .odt-select--filled {
1879
+ background-color: var(--color-surface, #ffffff);
1880
+ border: 1px solid transparent;
1881
+ }
1882
+
1883
+ .odt-input--filled:focus,
1884
+ .odt-textarea--filled:focus,
1885
+ .odt-select--filled:focus {
1886
+ border-color: var(--color-ring);
1887
+ }
1888
+
1889
+ .odt-input--frosted,
1890
+ .odt-textarea--frosted,
1891
+ .odt-select--frosted {
1892
+ background-color: hsl(from var(--color-surface) h s l / 0.85);
1893
+ backdrop-filter: blur(16px);
1894
+ -webkit-backdrop-filter: blur(16px);
1895
+ border: 1px solid transparent;
1896
+ box-shadow: var(--shadow-card);
1897
+ }
1898
+
1899
+ .odt-input--frosted:focus,
1900
+ .odt-textarea--frosted:focus,
1901
+ .odt-select--frosted:focus {
1902
+ border-color: var(--color-ring);
1903
+ }
1904
+
1905
+ .odt-input--unstyled,
1906
+ .odt-textarea--unstyled {
1907
+ background: transparent;
1908
+ border: none;
1909
+ padding: 0;
1910
+ box-shadow: none;
1911
+ }
1912
+
1913
+ /* Form Sizes */
1914
+ .odt-input--sm,
1915
+ .odt-select--sm {
1916
+ height: 2rem;
1917
+ padding: 0 var(--spacing-3, 0.75rem);
1918
+ font-size: var(--font-size-xs, 0.75rem);
1919
+ border-radius: var(--radius-lg, 0.5rem);
1920
+ }
1921
+
1922
+ .odt-input--md,
1923
+ .odt-select--md {
1924
+ height: 2.625rem;
1925
+ padding: 0 var(--spacing-4, 1rem);
1926
+ font-size: var(--font-size-base, 1rem);
1927
+ border-radius: var(--radius-xl, 0.75rem);
1928
+ }
1929
+
1930
+ .odt-input--lg,
1931
+ .odt-select--lg {
1932
+ height: 3.125rem;
1933
+ padding: 0 var(--spacing-5, 1.25rem);
1934
+ font-size: var(--font-size-lg, 1.125rem);
1935
+ border-radius: var(--radius-2xl, 1rem);
1936
+ }
1937
+
1938
+ .odt-textarea {
1939
+ line-height: 1.5;
1940
+ height: auto;
1941
+ min-height: 5rem;
1942
+ }
1943
+
1944
+ .odt-textarea--sm {
1945
+ padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
1946
+ font-size: var(--font-size-xs, 0.75rem);
1947
+ min-height: 4rem;
1948
+ border-radius: var(--radius-lg, 0.5rem);
1949
+ }
1950
+
1951
+ .odt-textarea--md {
1952
+ padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
1953
+ font-size: var(--font-size-base, 1rem);
1954
+ min-height: 5rem;
1955
+ border-radius: var(--radius-xl, 0.75rem);
1956
+ }
1957
+
1958
+ .odt-textarea--lg {
1959
+ padding: var(--spacing-4, 1rem) var(--spacing-5, 1.25rem);
1960
+ font-size: var(--font-size-lg, 1.125rem);
1961
+ min-height: 6.5rem;
1962
+ border-radius: var(--radius-2xl, 1rem);
1963
+ }
1964
+
1965
+ .odt-textarea--resize-none {
1966
+ resize: none;
1967
+ }
1968
+
1969
+ .odt-textarea--resize-vertical {
1970
+ resize: vertical;
1971
+ }
1972
+
1973
+ .odt-textarea--resize-horizontal {
1974
+ resize: horizontal;
1975
+ }
1976
+
1977
+ .odt-textarea--resize-both {
1978
+ resize: both;
1979
+ }
1980
+
1981
+ /* Select Dropdown */
1982
+ .odt-select {
1983
+ appearance: none;
1984
+ -webkit-appearance: none;
1985
+ padding-right: 2.5rem;
1986
+ cursor: pointer;
1987
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
1988
+ background-repeat: no-repeat;
1989
+ background-position: right 0.75rem center;
1990
+ }
1991
+
1992
+ /* Icons & Addons */
1993
+ .odt-input__left-icon {
1994
+ position: absolute;
1995
+ left: var(--spacing-3, 0.75rem);
1996
+ display: flex;
1997
+ align-items: center;
1998
+ justify-content: center;
1999
+ color: var(--color-fg-muted);
2000
+ pointer-events: none;
2001
+ z-index: 1;
2002
+ }
2003
+
2004
+ .odt-input__right-icon {
2005
+ position: absolute;
2006
+ right: var(--spacing-3, 0.75rem);
2007
+ display: flex;
2008
+ align-items: center;
2009
+ justify-content: center;
2010
+ color: var(--color-fg-muted);
2011
+ z-index: 2;
2012
+ }
2013
+
2014
+ .odt-input--has-left-icon.odt-input--sm {
2015
+ padding-left: 2rem;
2016
+ }
2017
+
2018
+ .odt-input--has-left-icon.odt-input--md {
2019
+ padding-left: 2.5rem;
2020
+ }
2021
+
2022
+ .odt-input--has-left-icon.odt-input--lg {
2023
+ padding-left: 3rem;
2024
+ }
2025
+
2026
+ .odt-input--has-right-icon.odt-input--sm {
2027
+ padding-right: 2rem;
2028
+ }
2029
+
2030
+ .odt-input--has-right-icon.odt-input--md {
2031
+ padding-right: 2.5rem;
2032
+ }
2033
+
2034
+ .odt-input--has-right-icon.odt-input--lg {
2035
+ padding-right: 3rem;
2036
+ }
2037
+
2038
+ /* Addon Groups */
2039
+ .odt-input__addon-group {
2040
+ display: flex;
2041
+ align-items: stretch;
2042
+ width: 100%;
2043
+ }
2044
+
2045
+ .odt-input__addon-before,
2046
+ .odt-input__addon-after {
2047
+ display: inline-flex;
2048
+ align-items: center;
2049
+ justify-content: center;
2050
+ padding: 0 var(--spacing-3, 0.75rem);
2051
+ background-color: var(--color-surface, #ffffff);
2052
+ color: var(--color-fg-muted);
2053
+ font-size: var(--font-size-sm, 0.875rem);
2054
+ font-weight: 500;
2055
+ white-space: nowrap;
2056
+ user-select: none;
2057
+ border: 1px solid var(--color-line, #e4e4e9);
2058
+ }
2059
+
2060
+ .odt-input__addon-before {
2061
+ border-right: none;
2062
+ border-top-left-radius: var(--radius-xl, 0.75rem);
2063
+ border-bottom-left-radius: var(--radius-xl, 0.75rem);
2064
+ }
2065
+
2066
+ .odt-input__addon-after {
2067
+ border-left: none;
2068
+ border-top-right-radius: var(--radius-xl, 0.75rem);
2069
+ border-bottom-right-radius: var(--radius-xl, 0.75rem);
2070
+ }
2071
+
2072
+ .odt-input--has-addon-before {
2073
+ border-top-left-radius: 0 !important;
2074
+ border-bottom-left-radius: 0 !important;
2075
+ }
2076
+
2077
+ .odt-input--has-addon-after {
2078
+ border-top-right-radius: 0 !important;
2079
+ border-bottom-right-radius: 0 !important;
2080
+ }
2081
+
2082
+ /* States */
2083
+ .odt-input--error,
2084
+ .odt-textarea--error,
2085
+ .odt-select--error,
2086
+ .odt-input--error:focus,
2087
+ .odt-textarea--error:focus,
2088
+ .odt-select--error:focus {
2089
+ border-color: var(--color-danger) !important;
2090
+ }
2091
+
2092
+ .odt-input--success,
2093
+ .odt-textarea--success,
2094
+ .odt-select--success,
2095
+ .odt-input--success:focus,
2096
+ .odt-textarea--success:focus,
2097
+ .odt-select--success:focus {
2098
+ border-color: var(--color-success) !important;
2099
+ }
2100
+
2101
+ .odt-input:disabled,
2102
+ .odt-textarea:disabled,
2103
+ .odt-select:disabled {
2104
+ background-color: var(--color-surface-subtle);
2105
+ color: var(--color-fg-disabled);
2106
+ cursor: not-allowed;
2107
+ border-color: var(--color-line-muted, rgba(0, 0, 0, 0.05));
2108
+ opacity: 0.7;
2109
+ }
2110
+
2111
+ /* Help & Error Messages */
2112
+ .odt-helper-text {
2113
+ font-size: var(--font-size-xs, 0.75rem);
2114
+ color: var(--color-fg-muted);
2115
+ margin: 0;
2116
+ line-height: 1rem;
2117
+ }
2118
+
2119
+ .odt-error-text {
2120
+ font-size: var(--font-size-xs, 0.75rem);
2121
+ color: var(--color-danger);
2122
+ font-weight: 500;
2123
+ margin: 0;
2124
+ line-height: 1rem;
2125
+ }
2126
+
2127
+ .odt-success-text {
2128
+ font-size: var(--font-size-xs, 0.75rem);
2129
+ color: var(--color-success);
2130
+ font-weight: 500;
2131
+ margin: 0;
2132
+ line-height: 1rem;
2133
+ }
2134
+
2135
+ /* ==========================================================================
2136
+ * 9. Checkbox & Radio (.odt-checkbox, .odt-radio)
2137
+ * ========================================================================== */
2138
+ .odt-checkbox-wrapper,
2139
+ .odt-radio-wrapper {
2140
+ display: inline-flex;
2141
+ flex-direction: column;
2142
+ gap: 0.25rem;
2143
+ }
2144
+
2145
+ .odt-checkbox-container,
2146
+ .odt-radio-container {
2147
+ display: inline-flex;
2148
+ align-items: flex-start;
2149
+ gap: var(--spacing-2-5, 0.625rem);
2150
+ cursor: pointer;
2151
+ user-select: none;
2152
+ }
2153
+
2154
+ .odt-checkbox,
2155
+ .odt-radio {
2156
+ appearance: none;
2157
+ -webkit-appearance: none;
2158
+ position: relative;
2159
+ display: inline-flex;
2160
+ align-items: center;
2161
+ justify-content: center;
2162
+ flex-shrink: 0;
2163
+ background-color: var(--color-surface-subtle, #e4e4e9);
2164
+ border: none;
2165
+ color: #ffffff;
2166
+ cursor: pointer;
2167
+ padding: 0;
2168
+ outline: none;
2169
+ box-sizing: border-box;
2170
+ transition: background-color 140ms ease, box-shadow 140ms ease, transform 100ms ease;
2171
+ margin-top: 0.125rem;
2172
+ }
2173
+
2174
+ .odt-checkbox {
2175
+ width: 1.125rem;
2176
+ height: 1.125rem;
2177
+ border-radius: var(--radius-md, 0.375rem);
2178
+ }
2179
+
2180
+ .odt-radio {
2181
+ width: 1.125rem;
2182
+ height: 1.125rem;
2183
+ border-radius: var(--radius-full, 9999px);
2184
+ }
2185
+
2186
+ .odt-checkbox:active:not(:disabled),
2187
+ .odt-radio:active:not(:disabled) {
2188
+ transform: scale(0.94);
2189
+ }
2190
+
2191
+ /* Checkbox & Radio Sizes */
2192
+ .odt-checkbox--sm,
2193
+ .odt-radio--sm {
2194
+ width: 0.9375rem;
2195
+ height: 0.9375rem;
2196
+ margin-top: 0.1875rem;
2197
+ }
2198
+
2199
+ .odt-checkbox--md,
2200
+ .odt-radio--md {
2201
+ width: 1.125rem;
2202
+ height: 1.125rem;
2203
+ margin-top: 0.125rem;
2204
+ }
2205
+
2206
+ .odt-checkbox--lg,
2207
+ .odt-radio--lg {
2208
+ width: 1.375rem;
2209
+ height: 1.375rem;
2210
+ margin-top: 0.0625rem;
2211
+ }
2212
+
2213
+ /* Checkmark indicator */
2214
+ .odt-checkbox:checked::after {
2215
+ content: "";
2216
+ display: block;
2217
+ width: 4px;
2218
+ height: 8px;
2219
+ border: solid currentColor;
2220
+ border-width: 0 2px 2px 0;
2221
+ transform: rotate(45deg);
2222
+ margin-bottom: 2px;
2223
+ animation: odt-pop 140ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
2224
+ }
2225
+
2226
+ .odt-checkbox--sm:checked::after {
2227
+ width: 3px;
2228
+ height: 6px;
2229
+ border-width: 0 1.5px 1.5px 0;
2230
+ margin-bottom: 1px;
2231
+ }
2232
+
2233
+ .odt-checkbox--lg:checked::after {
2234
+ width: 5px;
2235
+ height: 10px;
2236
+ border-width: 0 2.5px 2.5px 0;
2237
+ margin-bottom: 2px;
2238
+ }
2239
+
2240
+ /* Radio Dot indicator */
2241
+ .odt-radio:checked::after {
2242
+ content: "";
2243
+ display: block;
2244
+ width: 0.5rem;
2245
+ height: 0.5rem;
2246
+ border-radius: var(--radius-full, 9999px);
2247
+ background-color: currentColor;
2248
+ animation: odt-pop 140ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
2249
+ }
2250
+
2251
+ .odt-radio--sm:checked::after {
2252
+ width: 0.375rem;
2253
+ height: 0.375rem;
2254
+ }
2255
+
2256
+ .odt-radio--lg:checked::after {
2257
+ width: 0.625rem;
2258
+ height: 0.625rem;
2259
+ }
2260
+
2261
+ /* Checkbox & Radio Color Themes */
2262
+ .odt-checkbox--primary:checked,
2263
+ .odt-radio--primary:checked {
2264
+ background-color: var(--color-primary-500);
2265
+ color: #ffffff;
2266
+ }
2267
+
2268
+ .odt-checkbox--primary:focus-visible,
2269
+ .odt-radio--primary:focus-visible {
2270
+ box-shadow: 0 0 0 3px hsl(from var(--color-primary-500) h s l / 0.35);
2271
+ }
2272
+
2273
+ .odt-checkbox--secondary:checked,
2274
+ .odt-radio--secondary:checked {
2275
+ background-color: var(--color-secondary-500);
2276
+ color: var(--color-fg-strong);
2277
+ }
2278
+
2279
+ .odt-checkbox--secondary:focus-visible,
2280
+ .odt-radio--secondary:focus-visible {
2281
+ box-shadow: 0 0 0 3px hsl(from var(--color-secondary-500) h s l / 0.35);
2282
+ }
2283
+
2284
+ .odt-checkbox--success:checked,
2285
+ .odt-radio--success:checked {
2286
+ background-color: var(--color-success);
2287
+ color: #ffffff;
2288
+ }
2289
+
2290
+ .odt-checkbox--success:focus-visible,
2291
+ .odt-radio--success:focus-visible {
2292
+ box-shadow: 0 0 0 3px hsl(from var(--color-success) h s l / 0.35);
2293
+ }
2294
+
2295
+ .odt-checkbox--warning:checked,
2296
+ .odt-radio--warning:checked {
2297
+ background-color: var(--color-warning);
2298
+ color: var(--color-fg-strong);
2299
+ }
2300
+
2301
+ .odt-checkbox--warning:focus-visible,
2302
+ .odt-radio--warning:focus-visible {
2303
+ box-shadow: 0 0 0 3px hsl(from var(--color-warning) h s l / 0.35);
2304
+ }
2305
+
2306
+ .odt-checkbox--danger:checked,
2307
+ .odt-radio--danger:checked {
2308
+ background-color: var(--color-danger);
2309
+ color: #ffffff;
2310
+ }
2311
+
2312
+ .odt-checkbox--danger:focus-visible,
2313
+ .odt-radio--danger:focus-visible {
2314
+ box-shadow: 0 0 0 3px hsl(from var(--color-danger) h s l / 0.35);
2315
+ }
2316
+
2317
+ .odt-checkbox--dark:checked,
2318
+ .odt-radio--dark:checked,
2319
+ .odt-checkbox--neutral:checked,
2320
+ .odt-radio--neutral:checked {
2321
+ background-color: var(--color-neutral-900);
2322
+ color: #ffffff;
2323
+ }
2324
+
2325
+ .odt-checkbox:disabled,
2326
+ .odt-radio:disabled {
2327
+ opacity: 0.45;
2328
+ cursor: not-allowed;
2329
+ pointer-events: none;
2330
+ }
2331
+
2332
+ .odt-checkbox__label-content,
2333
+ .odt-radio__label-content {
2334
+ display: flex;
2335
+ flex-direction: column;
2336
+ gap: 0.125rem;
2337
+ }
2338
+
2339
+ .odt-checkbox__label,
2340
+ .odt-radio__label {
2341
+ font-size: var(--font-size-sm, 0.875rem);
2342
+ color: var(--color-fg);
2343
+ font-weight: 500;
2344
+ line-height: 1.25rem;
2345
+ }
2346
+
2347
+ .odt-checkbox__description,
2348
+ .odt-radio__description {
2349
+ font-size: var(--font-size-xs, 0.75rem);
2350
+ color: var(--color-fg-muted);
2351
+ line-height: 1rem;
2352
+ }
2353
+
2354
+ /* ==========================================================================
2355
+ * Switch Component (.odt-switch)
2356
+ * ========================================================================== */
2357
+ .odt-switch-wrapper {
2358
+ display: inline-flex;
2359
+ flex-direction: column;
2360
+ gap: 0.25rem;
2361
+ }
2362
+
2363
+ .odt-switch-container {
2364
+ display: inline-flex;
2365
+ align-items: center;
2366
+ gap: var(--spacing-3, 0.75rem);
2367
+ cursor: pointer;
2368
+ user-select: none;
2369
+ }
2370
+
2371
+ .odt-switch {
2372
+ appearance: none;
2373
+ -webkit-appearance: none;
2374
+ position: relative;
2375
+ display: inline-flex;
2376
+ align-items: center;
2377
+ flex-shrink: 0;
2378
+ width: 2.75rem;
2379
+ height: 1.5rem;
2380
+ border-radius: var(--radius-full, 9999px);
2381
+ background-color: var(--color-neutral-300);
2382
+ border: none;
2383
+ cursor: pointer;
2384
+ padding: 0;
2385
+ margin: 0;
2386
+ outline: none;
2387
+ box-sizing: border-box;
2388
+ transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
2389
+ }
2390
+
2391
+ .odt-switch::after {
2392
+ content: "";
2393
+ pointer-events: none;
2394
+ display: block;
2395
+ width: 1rem;
2396
+ height: 1rem;
2397
+ border-radius: var(--radius-full, 9999px);
2398
+ background-color: var(--color-switch-thumb, #ffffff);
2399
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2400
+ transform: translateX(0.25rem);
2401
+ transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
2402
+ }
2403
+
2404
+ .odt-switch:checked::after {
2405
+ transform: translateX(1.5rem);
2406
+ }
2407
+
2408
+ /* Switch Sizes */
2409
+ .odt-switch--sm {
2410
+ width: 2rem;
2411
+ height: 1.125rem;
2412
+ }
2413
+
2414
+ .odt-switch--sm::after {
2415
+ width: 0.75rem;
2416
+ height: 0.75rem;
2417
+ transform: translateX(0.1875rem);
2418
+ }
2419
+
2420
+ .odt-switch--sm:checked::after {
2421
+ transform: translateX(1.0625rem);
2422
+ }
2423
+
2424
+ .odt-switch--md {
2425
+ width: 2.75rem;
2426
+ height: 1.5rem;
2427
+ }
2428
+
2429
+ .odt-switch--md::after {
2430
+ width: 1rem;
2431
+ height: 1rem;
2432
+ transform: translateX(0.25rem);
2433
+ }
2434
+
2435
+ .odt-switch--md:checked::after {
2436
+ transform: translateX(1.5rem);
2437
+ }
2438
+
2439
+ .odt-switch--lg {
2440
+ width: 3.5rem;
2441
+ height: 2rem;
2442
+ }
2443
+
2444
+ .odt-switch--lg::after {
2445
+ width: 1.5rem;
2446
+ height: 1.5rem;
2447
+ transform: translateX(0.25rem);
2448
+ }
2449
+
2450
+ .odt-switch--lg:checked::after {
2451
+ transform: translateX(1.75rem);
2452
+ }
2453
+
2454
+ /* Switch Colors */
2455
+ .odt-switch--primary:checked {
2456
+ background-color: var(--color-primary-500);
2457
+ }
2458
+
2459
+ .odt-switch--primary:focus-visible {
2460
+ box-shadow: 0 0 0 3px hsl(from var(--color-primary-500) h s l / 0.35);
2461
+ }
2462
+
2463
+ .odt-switch--secondary:checked {
2464
+ background-color: var(--color-secondary-500);
2465
+ }
2466
+
2467
+ .odt-switch--secondary:focus-visible {
2468
+ box-shadow: 0 0 0 3px hsl(from var(--color-secondary-500) h s l / 0.35);
2469
+ }
2470
+
2471
+ .odt-switch--success:checked {
2472
+ background-color: var(--color-success);
2473
+ }
1582
2474
 
1583
- /* Radio Dot indicator */
1584
- .odt-radio:checked::after {
1585
- content: "";
1586
- display: block;
1587
- width: 0.5rem;
1588
- height: 0.5rem;
1589
- border-radius: var(--radius-full, 9999px);
1590
- background-color: currentColor;
1591
- animation: odt-pop 140ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
1592
- }
1593
- .odt-radio--sm:checked::after { width: 0.375rem; height: 0.375rem; }
1594
- .odt-radio--lg:checked::after { width: 0.625rem; height: 0.625rem; }
2475
+ .odt-switch--success:focus-visible {
2476
+ box-shadow: 0 0 0 3px hsl(from var(--color-success) h s l / 0.35);
2477
+ }
1595
2478
 
1596
- /* Checkbox & Radio Color Themes */
1597
- .odt-checkbox--primary:checked, .odt-radio--primary:checked {
1598
- background-color: var(--color-primary-500);
1599
- color: #ffffff;
1600
- }
1601
- .odt-checkbox--primary:focus-visible, .odt-radio--primary:focus-visible {
1602
- box-shadow: 0 0 0 3px hsl(from var(--color-primary-500) h s l / 0.35);
1603
- }
2479
+ .odt-switch--warning:checked {
2480
+ background-color: var(--color-warning);
2481
+ }
1604
2482
 
1605
- .odt-checkbox--secondary:checked, .odt-radio--secondary:checked {
1606
- background-color: var(--color-secondary-500);
1607
- color: var(--color-fg-strong);
1608
- }
1609
- .odt-checkbox--secondary:focus-visible, .odt-radio--secondary:focus-visible {
1610
- box-shadow: 0 0 0 3px hsl(from var(--color-secondary-500) h s l / 0.35);
1611
- }
2483
+ .odt-switch--warning:focus-visible {
2484
+ box-shadow: 0 0 0 3px hsl(from var(--color-warning) h s l / 0.35);
2485
+ }
1612
2486
 
1613
- .odt-checkbox--success:checked, .odt-radio--success:checked {
1614
- background-color: var(--color-success);
1615
- color: #ffffff;
1616
- }
1617
- .odt-checkbox--success:focus-visible, .odt-radio--success:focus-visible {
1618
- box-shadow: 0 0 0 3px hsl(from var(--color-success) h s l / 0.35);
1619
- }
2487
+ .odt-switch--danger:checked {
2488
+ background-color: var(--color-danger);
2489
+ }
1620
2490
 
1621
- .odt-checkbox--warning:checked, .odt-radio--warning:checked {
1622
- background-color: var(--color-warning);
1623
- color: var(--color-fg-strong);
1624
- }
1625
- .odt-checkbox--warning:focus-visible, .odt-radio--warning:focus-visible {
1626
- box-shadow: 0 0 0 3px hsl(from var(--color-warning) h s l / 0.35);
1627
- }
2491
+ .odt-switch--danger:focus-visible {
2492
+ box-shadow: 0 0 0 3px hsl(from var(--color-danger) h s l / 0.35);
2493
+ }
1628
2494
 
1629
- .odt-checkbox--danger:checked, .odt-radio--danger:checked {
1630
- background-color: var(--color-danger);
1631
- color: #ffffff;
1632
- }
1633
- .odt-checkbox--danger:focus-visible, .odt-radio--danger:focus-visible {
1634
- box-shadow: 0 0 0 3px hsl(from var(--color-danger) h s l / 0.35);
1635
- }
2495
+ .odt-switch--info:checked {
2496
+ background-color: var(--color-info);
2497
+ }
1636
2498
 
1637
- .odt-checkbox--dark:checked, .odt-radio--dark:checked,
1638
- .odt-checkbox--neutral:checked, .odt-radio--neutral:checked {
1639
- background-color: var(--color-neutral-900);
1640
- color: #ffffff;
1641
- }
2499
+ .odt-switch--info:focus-visible {
2500
+ box-shadow: 0 0 0 3px hsl(from var(--color-info) h s l / 0.35);
2501
+ }
1642
2502
 
1643
- .odt-checkbox:disabled,
1644
- .odt-radio:disabled {
1645
- opacity: 0.45;
1646
- cursor: not-allowed;
1647
- pointer-events: none;
1648
- }
2503
+ .odt-switch--dark:checked,
2504
+ .odt-switch--neutral:checked {
2505
+ background-color: var(--color-neutral-900);
2506
+ }
1649
2507
 
1650
- .odt-checkbox__label-content,
1651
- .odt-radio__label-content {
1652
- display: flex;
1653
- flex-direction: column;
1654
- gap: 0.125rem;
1655
- }
2508
+ .odt-switch--dark:focus-visible,
2509
+ .odt-switch--neutral:focus-visible {
2510
+ box-shadow: 0 0 0 3px hsl(from var(--color-neutral-900) h s l / 0.35);
2511
+ }
1656
2512
 
1657
- .odt-checkbox__label,
1658
- .odt-radio__label {
1659
- font-size: var(--font-size-sm, 0.875rem);
1660
- color: var(--color-fg);
1661
- font-weight: 500;
1662
- line-height: 1.25rem;
1663
- }
2513
+ /* Switch States */
2514
+ .odt-switch:disabled,
2515
+ .odt-switch-container--disabled {
2516
+ opacity: 0.45;
2517
+ cursor: not-allowed;
2518
+ pointer-events: none;
2519
+ }
1664
2520
 
1665
- .odt-checkbox__description,
1666
- .odt-radio__description {
1667
- font-size: var(--font-size-xs, 0.75rem);
1668
- color: var(--color-fg-muted);
1669
- line-height: 1rem;
1670
- }
2521
+ .odt-switch--error:not(:checked) {
2522
+ box-shadow: 0 0 0 2px var(--color-danger);
2523
+ }
1671
2524
 
1672
- /* ==========================================================================
2525
+ .odt-switch__label-content {
2526
+ display: flex;
2527
+ flex-direction: column;
2528
+ gap: 0.125rem;
2529
+ }
2530
+
2531
+ .odt-switch__label {
2532
+ font-size: var(--font-size-sm, 0.875rem);
2533
+ color: var(--color-fg);
2534
+ font-weight: 500;
2535
+ line-height: 1.25rem;
2536
+ }
2537
+
2538
+ .odt-switch__description {
2539
+ font-size: var(--font-size-xs, 0.75rem);
2540
+ color: var(--color-fg-muted);
2541
+ line-height: 1rem;
2542
+ }
2543
+
2544
+ /* ==========================================================================
1673
2545
  * 10. Toast & Toaster Component (.odt-toaster, .odt-toast)
1674
2546
  * ========================================================================== */
1675
- .odt-toaster {
1676
- position: fixed;
1677
- z-index: 9999;
1678
- box-sizing: border-box;
1679
- font-family: inherit;
1680
- width: 100%;
1681
- max-width: 24rem; /* 384px */
1682
- padding: var(--spacing-4, 1rem);
1683
- pointer-events: none;
1684
- display: flex;
1685
- flex-direction: column;
1686
- gap: var(--spacing-2-5, 0.625rem);
1687
- }
2547
+ .odt-toaster {
2548
+ position: fixed;
2549
+ z-index: 9999;
2550
+ box-sizing: border-box;
2551
+ font-family: inherit;
2552
+ width: 100%;
2553
+ max-width: 24rem;
2554
+ /* 384px */
2555
+ padding: var(--spacing-4, 1rem);
2556
+ pointer-events: none;
2557
+ display: flex;
2558
+ flex-direction: column;
2559
+ gap: var(--spacing-2-5, 0.625rem);
2560
+ }
1688
2561
 
1689
- /* Positions */
1690
- .odt-toaster--top-right {
1691
- top: 0;
1692
- right: 0;
1693
- }
2562
+ /* Positions */
2563
+ .odt-toaster--top-right {
2564
+ top: 0;
2565
+ right: 0;
2566
+ }
1694
2567
 
1695
- .odt-toaster--top-center {
1696
- top: 0;
1697
- left: 50%;
1698
- transform: translateX(-50%);
1699
- }
2568
+ .odt-toaster--top-center {
2569
+ top: 0;
2570
+ left: 50%;
2571
+ transform: translateX(-50%);
2572
+ }
1700
2573
 
1701
- .odt-toaster--top-left {
1702
- top: 0;
1703
- left: 0;
1704
- }
2574
+ .odt-toaster--top-left {
2575
+ top: 0;
2576
+ left: 0;
2577
+ }
1705
2578
 
1706
- .odt-toaster {
1707
- position: fixed;
1708
- z-index: 9999;
1709
- box-sizing: border-box;
1710
- font-family: inherit;
1711
- width: 100%;
1712
- max-width: 24rem; /* 384px */
1713
- padding: var(--spacing-4, 1rem);
1714
- pointer-events: none;
1715
- min-height: 5rem;
1716
- }
2579
+ .odt-toaster {
2580
+ position: fixed;
2581
+ z-index: 9999;
2582
+ box-sizing: border-box;
2583
+ font-family: inherit;
2584
+ width: 100%;
2585
+ max-width: 24rem;
2586
+ /* 384px */
2587
+ padding: var(--spacing-4, 1rem);
2588
+ pointer-events: none;
2589
+ min-height: 5rem;
2590
+ }
1717
2591
 
1718
- /* Positions */
1719
- .odt-toaster--top-right {
1720
- top: 0;
1721
- right: 0;
1722
- }
2592
+ /* Positions */
2593
+ .odt-toaster--top-right {
2594
+ top: 0;
2595
+ right: 0;
2596
+ }
1723
2597
 
1724
- .odt-toaster--top-center {
1725
- top: 0;
1726
- left: 50%;
1727
- transform: translateX(-50%);
1728
- }
2598
+ .odt-toaster--top-center {
2599
+ top: 0;
2600
+ left: 50%;
2601
+ transform: translateX(-50%);
2602
+ }
1729
2603
 
1730
- .odt-toaster--top-left {
1731
- top: 0;
1732
- left: 0;
1733
- }
2604
+ .odt-toaster--top-left {
2605
+ top: 0;
2606
+ left: 0;
2607
+ }
1734
2608
 
1735
- .odt-toaster--bottom-right {
1736
- bottom: 0;
1737
- right: 0;
1738
- }
2609
+ .odt-toaster--bottom-right {
2610
+ bottom: 0;
2611
+ right: 0;
2612
+ }
1739
2613
 
1740
- .odt-toaster--bottom-center {
1741
- bottom: 0;
1742
- left: 50%;
1743
- transform: translateX(-50%);
1744
- }
2614
+ .odt-toaster--bottom-center {
2615
+ bottom: 0;
2616
+ left: 50%;
2617
+ transform: translateX(-50%);
2618
+ }
1745
2619
 
1746
- .odt-toaster--bottom-left {
1747
- bottom: 0;
1748
- left: 0;
1749
- }
2620
+ .odt-toaster--bottom-left {
2621
+ bottom: 0;
2622
+ left: 0;
2623
+ }
1750
2624
 
1751
- /* Toast Item Card (Absolute within Toaster for 3D stacking) */
1752
- .odt-toast {
1753
- position: absolute;
1754
- left: var(--spacing-4, 1rem);
1755
- right: var(--spacing-4, 1rem);
1756
- box-sizing: border-box;
1757
- display: flex;
1758
- align-items: flex-start;
1759
- gap: var(--spacing-3, 0.75rem);
1760
- padding: var(--spacing-4, 1rem) var(--spacing-4-5, 1.125rem);
1761
- background-color: var(--color-surface-elevated, #ffffff);
1762
- color: var(--color-fg);
1763
- border-radius: var(--radius-2xl, 1rem);
1764
- box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
1765
- pointer-events: auto;
1766
- user-select: none;
1767
- font-family: inherit;
1768
- overflow: hidden;
1769
- transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
1770
- opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
1771
- box-shadow 0.25s ease;
1772
- will-change: transform, opacity;
1773
- }
2625
+ /* Toast Item Card (Absolute within Toaster for 3D stacking) */
2626
+ .odt-toast {
2627
+ position: absolute;
2628
+ left: var(--spacing-4, 1rem);
2629
+ right: var(--spacing-4, 1rem);
2630
+ box-sizing: border-box;
2631
+ display: flex;
2632
+ align-items: flex-start;
2633
+ gap: var(--spacing-3, 0.75rem);
2634
+ padding: var(--spacing-4, 1rem) var(--spacing-4-5, 1.125rem);
2635
+ background-color: var(--color-surface-elevated, #ffffff);
2636
+ color: var(--color-fg);
2637
+ border-radius: var(--radius-2xl, 1rem);
2638
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
2639
+ pointer-events: auto;
2640
+ user-select: none;
2641
+ font-family: inherit;
2642
+ overflow: hidden;
2643
+ transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
2644
+ opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
2645
+ box-shadow 0.25s ease;
2646
+ will-change: transform, opacity;
2647
+ }
1774
2648
 
1775
- .odt-toaster--top-right .odt-toast,
1776
- .odt-toaster--top-center .odt-toast,
1777
- .odt-toaster--top-left .odt-toast {
1778
- top: var(--spacing-4, 1rem);
1779
- bottom: auto;
1780
- transform-origin: top center;
1781
- }
2649
+ .odt-toaster--top-right .odt-toast,
2650
+ .odt-toaster--top-center .odt-toast,
2651
+ .odt-toaster--top-left .odt-toast {
2652
+ top: var(--spacing-4, 1rem);
2653
+ bottom: auto;
2654
+ transform-origin: top center;
2655
+ }
1782
2656
 
1783
- .odt-toaster--bottom-right .odt-toast,
1784
- .odt-toaster--bottom-center .odt-toast,
1785
- .odt-toaster--bottom-left .odt-toast {
1786
- bottom: var(--spacing-4, 1rem);
1787
- top: auto;
1788
- transform-origin: bottom center;
1789
- }
2657
+ .odt-toaster--bottom-right .odt-toast,
2658
+ .odt-toaster--bottom-center .odt-toast,
2659
+ .odt-toaster--bottom-left .odt-toast {
2660
+ bottom: var(--spacing-4, 1rem);
2661
+ top: auto;
2662
+ transform-origin: bottom center;
2663
+ }
1790
2664
 
1791
- .odt-toast--exiting {
1792
- opacity: 0 !important;
1793
- transform: scale(0.92) translateY(-12px) !important;
1794
- pointer-events: none !important;
1795
- transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease !important;
1796
- }
2665
+ .odt-toast--exiting {
2666
+ opacity: 0 !important;
2667
+ transform: scale(0.92) translateY(-12px) !important;
2668
+ pointer-events: none !important;
2669
+ transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease !important;
2670
+ }
1797
2671
 
1798
- .odt-toaster--bottom-right .odt-toast--exiting,
1799
- .odt-toaster--bottom-center .odt-toast--exiting,
1800
- .odt-toaster--bottom-left .odt-toast--exiting {
1801
- transform: scale(0.92) translateY(12px) !important;
1802
- }
2672
+ .odt-toaster--bottom-right .odt-toast--exiting,
2673
+ .odt-toaster--bottom-center .odt-toast--exiting,
2674
+ .odt-toaster--bottom-left .odt-toast--exiting {
2675
+ transform: scale(0.92) translateY(12px) !important;
2676
+ }
1803
2677
 
1804
- /* Surface Variants */
1805
- .odt-toast--variant-frosted {
1806
- background-color: var(--frosted-surface-bg, rgba(255, 255, 255, 0.70));
1807
- backdrop-filter: blur(16px);
1808
- -webkit-backdrop-filter: blur(16px);
1809
- }
2678
+ /* Surface Variants */
2679
+ .odt-toast--variant-frosted {
2680
+ background-color: var(--frosted-surface-bg, rgba(255, 255, 255, 0.70));
2681
+ backdrop-filter: blur(16px);
2682
+ -webkit-backdrop-filter: blur(16px);
2683
+ }
1810
2684
 
1811
- .odt-toast--variant-subtle {
1812
- background-color: var(--color-surface-subtle);
1813
- }
2685
+ .odt-toast--variant-subtle {
2686
+ background-color: var(--color-surface-subtle);
2687
+ }
1814
2688
 
1815
- .odt-toast--variant-outlined {
1816
- background-color: var(--color-surface);
1817
- }
2689
+ .odt-toast--variant-outlined {
2690
+ background-color: var(--color-surface);
2691
+ }
1818
2692
 
1819
- /* Rich Color Tints (Optional) */
1820
- .odt-toast--rich-success {
1821
- background-color: var(--color-surface-success, hsl(142 71% 96%));
1822
- }
2693
+ /* Rich Color Tints (Optional) */
2694
+ .odt-toast--rich-success {
2695
+ background-color: var(--color-surface-success, hsl(142 71% 96%));
2696
+ }
1823
2697
 
1824
- .odt-toast--rich-warning {
1825
- background-color: var(--color-surface-warning, hsl(38 92% 96%));
1826
- }
2698
+ .odt-toast--rich-warning {
2699
+ background-color: var(--color-surface-warning, hsl(38 92% 96%));
2700
+ }
1827
2701
 
1828
- .odt-toast--rich-danger,
1829
- .odt-toast--rich-error {
1830
- background-color: var(--color-surface-danger, hsl(0 84% 97%));
1831
- }
2702
+ .odt-toast--rich-danger,
2703
+ .odt-toast--rich-error {
2704
+ background-color: var(--color-surface-danger, hsl(0 84% 97%));
2705
+ }
1832
2706
 
1833
- .odt-toast--rich-info {
1834
- background-color: var(--color-surface-info, hsl(217 91% 97%));
1835
- }
2707
+ .odt-toast--rich-info {
2708
+ background-color: var(--color-surface-info, hsl(217 91% 97%));
2709
+ }
1836
2710
 
1837
- /* Toast Sub-elements */
1838
- .odt-toast__icon {
1839
- display: flex;
1840
- align-items: center;
1841
- justify-content: center;
1842
- width: 1.375rem;
1843
- height: 1.375rem;
1844
- flex-shrink: 0;
1845
- margin-top: 0.0625rem;
1846
- }
2711
+ /* Toast Sub-elements */
2712
+ .odt-toast__icon {
2713
+ display: flex;
2714
+ align-items: center;
2715
+ justify-content: center;
2716
+ width: 1.375rem;
2717
+ height: 1.375rem;
2718
+ flex-shrink: 0;
2719
+ margin-top: 0.0625rem;
2720
+ }
1847
2721
 
1848
- .odt-toast__icon svg {
1849
- display: block;
1850
- }
2722
+ .odt-toast__icon svg {
2723
+ display: block;
2724
+ }
1851
2725
 
1852
- .odt-toast__icon--success { color: var(--color-success, #16a34a); }
1853
- .odt-toast__icon--warning { color: var(--color-warning, #d97706); }
1854
- .odt-toast__icon--danger,
1855
- .odt-toast__icon--error { color: var(--color-danger, #dc2626); }
1856
- .odt-toast__icon--info { color: var(--color-info, #2563eb); }
1857
- .odt-toast__icon--loading {
1858
- color: var(--color-primary-500, #3b82f6);
1859
- animation: odt-spin 0.8s linear infinite;
1860
- }
2726
+ .odt-toast__icon--success {
2727
+ color: var(--color-success, #16a34a);
2728
+ }
1861
2729
 
1862
- .odt-toast__content {
1863
- display: flex;
1864
- flex-direction: column;
1865
- gap: var(--spacing-0-5, 0.125rem);
1866
- flex: 1;
1867
- min-width: 0;
1868
- }
2730
+ .odt-toast__icon--warning {
2731
+ color: var(--color-warning, #d97706);
2732
+ }
1869
2733
 
1870
- .odt-toast__title {
1871
- font-size: var(--font-size-base, 0.9375rem);
1872
- font-weight: var(--font-weight-semibold, 600);
1873
- color: var(--color-fg-strong);
1874
- line-height: 1.35;
1875
- margin: 0;
1876
- }
2734
+ .odt-toast__icon--danger,
2735
+ .odt-toast__icon--error {
2736
+ color: var(--color-danger, #dc2626);
2737
+ }
1877
2738
 
1878
- .odt-toast__description,
1879
- .odt-toast__message {
1880
- font-size: var(--font-size-sm, 0.8125rem);
1881
- color: var(--color-fg-muted);
1882
- line-height: 1.45;
1883
- margin: 0;
1884
- }
2739
+ .odt-toast__icon--info {
2740
+ color: var(--color-info, #2563eb);
2741
+ }
1885
2742
 
1886
- .odt-toast__close {
1887
- display: inline-flex;
1888
- align-items: center;
1889
- justify-content: center;
1890
- width: 1.5rem;
1891
- height: 1.5rem;
1892
- padding: 0;
1893
- border-radius: var(--radius-md, 0.375rem);
1894
- border: none;
1895
- background: transparent;
1896
- color: var(--color-fg-muted);
1897
- cursor: pointer;
1898
- flex-shrink: 0;
1899
- margin-left: auto;
1900
- margin-top: -0.125rem;
1901
- transition: background-color 0.15s ease, color 0.15s ease;
1902
- }
2743
+ .odt-toast__icon--loading {
2744
+ color: var(--color-primary-500, #3b82f6);
2745
+ animation: odt-spin 0.8s linear infinite;
2746
+ }
1903
2747
 
1904
- .odt-toast__close:hover {
1905
- background-color: var(--color-surface-subtle);
1906
- color: var(--color-fg-strong);
1907
- }
2748
+ .odt-toast__content {
2749
+ display: flex;
2750
+ flex-direction: column;
2751
+ gap: var(--spacing-0-5, 0.125rem);
2752
+ flex: 1;
2753
+ min-width: 0;
2754
+ }
1908
2755
 
1909
- .odt-toast__close svg {
1910
- display: block;
1911
- }
2756
+ .odt-toast__title {
2757
+ font-size: var(--font-size-base, 0.9375rem);
2758
+ font-weight: var(--font-weight-semibold, 600);
2759
+ color: var(--color-fg-strong);
2760
+ line-height: 1.35;
2761
+ margin: 0;
2762
+ }
1912
2763
 
1913
- /* ==========================================================================
2764
+ .odt-toast__description,
2765
+ .odt-toast__message {
2766
+ font-size: var(--font-size-sm, 0.8125rem);
2767
+ color: var(--color-fg-muted);
2768
+ line-height: 1.45;
2769
+ margin: 0;
2770
+ }
2771
+
2772
+ .odt-toast__close {
2773
+ display: inline-flex;
2774
+ align-items: center;
2775
+ justify-content: center;
2776
+ width: 1.5rem;
2777
+ height: 1.5rem;
2778
+ padding: 0;
2779
+ border-radius: var(--radius-md, 0.375rem);
2780
+ border: none;
2781
+ background: transparent;
2782
+ color: var(--color-fg-muted);
2783
+ cursor: pointer;
2784
+ flex-shrink: 0;
2785
+ margin-left: auto;
2786
+ margin-top: -0.125rem;
2787
+ transition: background-color 0.15s ease, color 0.15s ease;
2788
+ }
2789
+
2790
+ .odt-toast__close:hover {
2791
+ background-color: var(--color-surface-subtle);
2792
+ color: var(--color-fg-strong);
2793
+ }
2794
+
2795
+ .odt-toast__close svg {
2796
+ display: block;
2797
+ }
2798
+
2799
+ /* ==========================================================================
1914
2800
  * 11. Modal Component (.odt-modal-overlay, .odt-modal)
1915
2801
  * ========================================================================== */
1916
- @keyframes odt-overlay-fade-in {
1917
- from { opacity: 0; }
1918
- to { opacity: 1; }
1919
- }
2802
+ @keyframes odt-overlay-fade-in {
2803
+ from {
2804
+ opacity: 0;
2805
+ }
2806
+
2807
+ to {
2808
+ opacity: 1;
2809
+ }
2810
+ }
1920
2811
 
1921
- @keyframes odt-overlay-fade-out {
1922
- from { opacity: 1; }
1923
- to { opacity: 0; }
1924
- }
2812
+ @keyframes odt-overlay-fade-out {
2813
+ from {
2814
+ opacity: 1;
2815
+ }
1925
2816
 
1926
- @keyframes odt-modal-scale-in {
1927
- from {
1928
- opacity: 0;
1929
- transform: scale(0.95) translateY(10px);
1930
- }
1931
- to {
1932
- opacity: 1;
1933
- transform: scale(1) translateY(0);
2817
+ to {
2818
+ opacity: 0;
2819
+ }
1934
2820
  }
1935
- }
1936
2821
 
1937
- @keyframes odt-modal-scale-out {
1938
- from {
1939
- opacity: 1;
1940
- transform: scale(1) translateY(0);
2822
+ @keyframes odt-modal-scale-in {
2823
+ from {
2824
+ opacity: 0;
2825
+ transform: scale(0.95) translateY(10px);
2826
+ }
2827
+
2828
+ to {
2829
+ opacity: 1;
2830
+ transform: scale(1) translateY(0);
2831
+ }
1941
2832
  }
1942
- to {
1943
- opacity: 0;
1944
- transform: scale(0.96) translateY(8px);
2833
+
2834
+ @keyframes odt-modal-scale-out {
2835
+ from {
2836
+ opacity: 1;
2837
+ transform: scale(1) translateY(0);
2838
+ }
2839
+
2840
+ to {
2841
+ opacity: 0;
2842
+ transform: scale(0.96) translateY(8px);
2843
+ }
1945
2844
  }
1946
- }
1947
2845
 
1948
- .odt-modal-overlay {
1949
- position: fixed;
1950
- inset: 0;
1951
- z-index: 1000;
1952
- display: flex;
1953
- justify-content: center;
1954
- align-items: center;
1955
- padding: var(--spacing-4, 1rem);
1956
- background-color: var(--color-overlay-backdrop, rgba(0, 0, 0, 0.6));
1957
- overflow-y: auto;
1958
- box-sizing: border-box;
1959
- font-family: inherit;
1960
- animation: odt-overlay-fade-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
1961
- }
2846
+ .odt-modal-overlay {
2847
+ position: fixed;
2848
+ inset: 0;
2849
+ z-index: 1000;
2850
+ display: flex;
2851
+ justify-content: center;
2852
+ align-items: center;
2853
+ padding: var(--spacing-4, 1rem);
2854
+ background-color: var(--color-overlay-backdrop, rgba(0, 0, 0, 0.6));
2855
+ overflow-y: auto;
2856
+ box-sizing: border-box;
2857
+ font-family: inherit;
2858
+ animation: odt-overlay-fade-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
2859
+ }
1962
2860
 
1963
- .odt-modal-overlay.hidden {
1964
- display: none !important;
1965
- }
2861
+ .odt-modal-overlay.hidden {
2862
+ display: none !important;
2863
+ }
1966
2864
 
1967
- .odt-modal-overlay--exiting {
1968
- animation: odt-overlay-fade-out 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;
1969
- pointer-events: none;
1970
- }
2865
+ .odt-modal-overlay--exiting {
2866
+ animation: odt-overlay-fade-out 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;
2867
+ pointer-events: none;
2868
+ }
1971
2869
 
1972
- /* Modal Content Box */
1973
- .odt-modal {
1974
- position: relative;
1975
- width: 100%;
1976
- box-sizing: border-box;
1977
- font-family: inherit;
1978
- background-color: var(--color-surface-elevated, #ffffff);
1979
- color: var(--color-fg);
1980
- border-radius: var(--radius-2xl, 1rem);
1981
- box-shadow: var(--shadow-modal);
1982
- border: 1px solid var(--color-line-muted, rgba(226, 232, 240, 0.8));
1983
- display: flex;
1984
- flex-direction: column;
1985
- outline: none;
1986
- animation: odt-modal-scale-in 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
1987
- margin: auto 0;
1988
- }
2870
+ /* Modal Content Box */
2871
+ .odt-modal {
2872
+ position: relative;
2873
+ width: 100%;
2874
+ box-sizing: border-box;
2875
+ font-family: inherit;
2876
+ background-color: var(--color-surface-elevated, #ffffff);
2877
+ color: var(--color-fg);
2878
+ border-radius: var(--radius-2xl, 1rem);
2879
+ box-shadow: var(--shadow-modal);
2880
+ border: 1px solid var(--color-line-muted, rgba(226, 232, 240, 0.8));
2881
+ display: flex;
2882
+ flex-direction: column;
2883
+ outline: none;
2884
+ animation: odt-modal-scale-in 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
2885
+ margin: auto 0;
2886
+ }
1989
2887
 
1990
- .odt-modal--exiting {
1991
- animation: odt-modal-scale-out 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;
1992
- }
2888
+ .odt-modal--exiting {
2889
+ animation: odt-modal-scale-out 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;
2890
+ }
1993
2891
 
1994
- /* Modal Sizes */
1995
- .odt-modal--sm {
1996
- max-width: 24rem; /* 384px */
1997
- }
2892
+ /* Modal Sizes */
2893
+ .odt-modal--sm {
2894
+ max-width: 24rem;
2895
+ /* 384px */
2896
+ }
1998
2897
 
1999
- .odt-modal--md {
2000
- max-width: 32rem; /* 512px */
2001
- }
2898
+ .odt-modal--md {
2899
+ max-width: 32rem;
2900
+ /* 512px */
2901
+ }
2002
2902
 
2003
- .odt-modal--lg {
2004
- max-width: 42rem; /* 672px */
2005
- }
2903
+ .odt-modal--lg {
2904
+ max-width: 42rem;
2905
+ /* 672px */
2906
+ }
2006
2907
 
2007
- .odt-modal--xl {
2008
- max-width: 56rem; /* 896px */
2009
- }
2908
+ .odt-modal--xl {
2909
+ max-width: 56rem;
2910
+ /* 896px */
2911
+ }
2010
2912
 
2011
- .odt-modal--full {
2012
- max-width: calc(100vw - 2rem);
2013
- min-height: calc(100vh - 3rem);
2014
- }
2913
+ .odt-modal--full {
2914
+ max-width: calc(100vw - 2rem);
2915
+ min-height: calc(100vh - 3rem);
2916
+ }
2015
2917
 
2016
- /* Modal Sub-components */
2017
- .odt-modal__header {
2018
- display: flex;
2019
- align-items: flex-start;
2020
- justify-content: space-between;
2021
- padding: var(--spacing-6, 1.5rem) var(--spacing-6, 1.5rem) var(--spacing-2, 0.5rem);
2022
- gap: var(--spacing-3, 0.75rem);
2023
- }
2918
+ /* Modal Sub-components */
2919
+ .odt-modal__header {
2920
+ display: flex;
2921
+ align-items: flex-start;
2922
+ justify-content: space-between;
2923
+ padding: var(--spacing-6, 1.5rem) var(--spacing-6, 1.5rem) var(--spacing-2, 0.5rem);
2924
+ gap: var(--spacing-3, 0.75rem);
2925
+ }
2024
2926
 
2025
- .odt-modal__header-content {
2026
- display: flex;
2027
- flex-direction: column;
2028
- gap: var(--spacing-1, 0.25rem);
2029
- flex: 1;
2030
- }
2927
+ .odt-modal__header-content {
2928
+ display: flex;
2929
+ flex-direction: column;
2930
+ gap: var(--spacing-1, 0.25rem);
2931
+ flex: 1;
2932
+ }
2031
2933
 
2032
- .odt-modal__title {
2033
- font-family: inherit;
2034
- font-size: var(--font-size-xl, 1.25rem);
2035
- font-weight: var(--font-weight-bold, 700);
2036
- color: var(--color-fg-strong);
2037
- margin: 0;
2038
- line-height: var(--line-height-tight, 1.25);
2039
- }
2934
+ .odt-modal__title {
2935
+ font-family: inherit;
2936
+ font-size: var(--font-size-xl, 1.25rem);
2937
+ font-weight: var(--font-weight-bold, 700);
2938
+ color: var(--color-fg-strong);
2939
+ margin: 0;
2940
+ line-height: var(--line-height-tight, 1.25);
2941
+ }
2040
2942
 
2041
- .odt-modal__subtitle {
2042
- font-family: inherit;
2043
- font-size: var(--font-size-sm, 0.875rem);
2044
- color: var(--color-fg-muted);
2045
- margin: 0;
2046
- }
2943
+ .odt-modal__subtitle {
2944
+ font-family: inherit;
2945
+ font-size: var(--font-size-sm, 0.875rem);
2946
+ color: var(--color-fg-muted);
2947
+ margin: 0;
2948
+ }
2047
2949
 
2048
- .odt-modal__body {
2049
- font-family: inherit;
2050
- padding: var(--spacing-2, 0.5rem) var(--spacing-6, 1.5rem) var(--spacing-6, 1.5rem);
2051
- font-size: var(--font-size-base, 1rem);
2052
- line-height: var(--line-height-normal, 1.5);
2053
- color: var(--color-fg);
2054
- overflow-y: auto;
2055
- max-height: 70vh;
2056
- }
2950
+ .odt-modal__body {
2951
+ font-family: inherit;
2952
+ padding: var(--spacing-2, 0.5rem) var(--spacing-6, 1.5rem) var(--spacing-6, 1.5rem);
2953
+ font-size: var(--font-size-base, 1rem);
2954
+ line-height: var(--line-height-normal, 1.5);
2955
+ color: var(--color-fg);
2956
+ overflow-y: auto;
2957
+ max-height: 70vh;
2958
+ }
2057
2959
 
2058
- .odt-modal__footer {
2059
- font-family: inherit;
2060
- display: flex;
2061
- align-items: center;
2062
- justify-content: flex-end;
2063
- gap: var(--spacing-3, 0.75rem);
2064
- padding: var(--spacing-2, 0.5rem) var(--spacing-6, 1.5rem) var(--spacing-6, 1.5rem);
2065
- border-bottom-left-radius: inherit;
2066
- border-bottom-right-radius: inherit;
2067
- }
2960
+ .odt-modal__footer {
2961
+ font-family: inherit;
2962
+ display: flex;
2963
+ align-items: center;
2964
+ justify-content: flex-end;
2965
+ gap: var(--spacing-3, 0.75rem);
2966
+ padding: var(--spacing-2, 0.5rem) var(--spacing-6, 1.5rem) var(--spacing-6, 1.5rem);
2967
+ border-bottom-left-radius: inherit;
2968
+ border-bottom-right-radius: inherit;
2969
+ }
2068
2970
 
2069
- .odt-modal__close {
2070
- display: inline-flex;
2071
- align-items: center;
2072
- justify-content: center;
2073
- width: 2rem;
2074
- height: 2rem;
2075
- padding: 0;
2076
- border-radius: var(--radius-lg, 0.5rem);
2077
- border: none;
2078
- background: transparent;
2079
- color: var(--color-fg-muted);
2080
- cursor: pointer;
2081
- transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
2082
- flex-shrink: 0;
2083
- margin-left: auto;
2084
- font-size: 1.25rem;
2085
- line-height: 1;
2086
- }
2971
+ .odt-modal__close {
2972
+ display: inline-flex;
2973
+ align-items: center;
2974
+ justify-content: center;
2975
+ width: 2rem;
2976
+ height: 2rem;
2977
+ padding: 0;
2978
+ border-radius: var(--radius-lg, 0.5rem);
2979
+ border: none;
2980
+ background: transparent;
2981
+ color: var(--color-fg-muted);
2982
+ cursor: pointer;
2983
+ transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
2984
+ flex-shrink: 0;
2985
+ margin-left: auto;
2986
+ font-size: 1.25rem;
2987
+ line-height: 1;
2988
+ }
2087
2989
 
2088
- .odt-modal__close:hover {
2089
- background-color: var(--color-surface-subtle);
2090
- color: var(--color-fg-strong);
2091
- }
2990
+ .odt-modal__close:hover {
2991
+ background-color: var(--color-surface-subtle);
2992
+ color: var(--color-fg-strong);
2993
+ }
2092
2994
 
2093
- .odt-modal__close:active {
2094
- transform: scale(0.94);
2095
- }
2995
+ .odt-modal__close:active {
2996
+ transform: scale(0.94);
2997
+ }
2096
2998
 
2097
- /* ==========================================================================
2999
+ /* ==========================================================================
2098
3000
  * 12. DropdownMenu Component (.odt-dropdown)
2099
3001
  * ========================================================================== */
2100
- .odt-dropdown {
2101
- position: relative;
2102
- display: inline-block;
2103
- }
3002
+ .odt-dropdown {
3003
+ position: relative;
3004
+ display: inline-block;
3005
+ }
2104
3006
 
2105
- .odt-dropdown--full-width {
2106
- width: 100%;
2107
- }
3007
+ .odt-dropdown--full-width {
3008
+ width: 100%;
3009
+ }
2108
3010
 
2109
- .odt-dropdown__container {
2110
- display: inline-flex;
2111
- flex-direction: column;
2112
- gap: var(--spacing-1-5, 0.375rem);
2113
- box-sizing: border-box;
2114
- font-family: inherit;
2115
- }
3011
+ .odt-dropdown__container {
3012
+ display: inline-flex;
3013
+ flex-direction: column;
3014
+ gap: var(--spacing-1-5, 0.375rem);
3015
+ box-sizing: border-box;
3016
+ font-family: inherit;
3017
+ }
2116
3018
 
2117
- .odt-dropdown__container--full-width {
2118
- width: 100%;
2119
- }
3019
+ .odt-dropdown__container--full-width {
3020
+ width: 100%;
3021
+ }
2120
3022
 
2121
- .odt-dropdown__label {
2122
- font-size: var(--font-size-sm, 0.875rem);
2123
- font-weight: 500;
2124
- color: var(--color-fg-strong);
2125
- line-height: 1.25rem;
2126
- user-select: none;
2127
- cursor: default;
2128
- }
3023
+ .odt-dropdown__label {
3024
+ font-size: var(--font-size-sm, 0.875rem);
3025
+ font-weight: 500;
3026
+ color: var(--color-fg-strong);
3027
+ line-height: 1.25rem;
3028
+ user-select: none;
3029
+ cursor: default;
3030
+ }
2129
3031
 
2130
- .odt-dropdown__trigger {
2131
- display: inline-flex;
2132
- align-items: center;
2133
- justify-content: space-between;
2134
- box-sizing: border-box;
2135
- background-color: var(--color-surface, #ffffff);
2136
- color: var(--color-fg);
2137
- font-family: inherit;
2138
- font-weight: 500;
2139
- outline: none;
2140
- border: 1px solid transparent;
2141
- cursor: pointer;
2142
- user-select: none;
2143
- gap: 0.5rem;
2144
- transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
2145
- }
3032
+ .odt-dropdown__trigger {
3033
+ display: inline-flex;
3034
+ align-items: center;
3035
+ justify-content: space-between;
3036
+ box-sizing: border-box;
3037
+ background-color: var(--color-surface, #ffffff);
3038
+ color: var(--color-fg);
3039
+ font-family: inherit;
3040
+ font-weight: 500;
3041
+ outline: none;
3042
+ border: 1px solid transparent;
3043
+ cursor: pointer;
3044
+ user-select: none;
3045
+ gap: 0.5rem;
3046
+ transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
3047
+ }
2146
3048
 
2147
- .odt-dropdown__trigger--outlined {
2148
- background-color: var(--color-surface, #ffffff);
2149
- border: 1px solid var(--color-line, #e4e4e9);
2150
- }
2151
- .odt-dropdown__trigger--outlined:hover:not(:disabled):not(:focus):not(.odt-dropdown__trigger--open) {
2152
- border-color: var(--color-line-strong, #d4d4db);
2153
- }
2154
- .odt-dropdown__trigger--outlined:focus,
2155
- .odt-dropdown__trigger--outlined.odt-dropdown__trigger--open {
2156
- border-color: var(--color-ring);
2157
- }
3049
+ .odt-dropdown__trigger--outlined {
3050
+ background-color: var(--color-surface, #ffffff);
3051
+ border: 1px solid var(--color-line, #e4e4e9);
3052
+ }
2158
3053
 
2159
- .odt-dropdown__trigger--filled {
2160
- background-color: var(--color-surface, #ffffff);
2161
- border: 1px solid transparent;
2162
- }
2163
- .odt-dropdown__trigger--filled:focus,
2164
- .odt-dropdown__trigger--filled.odt-dropdown__trigger--open {
2165
- border-color: var(--color-ring);
2166
- }
3054
+ .odt-dropdown__trigger--outlined:hover:not(:disabled):not(:focus):not(.odt-dropdown__trigger--open) {
3055
+ border-color: var(--color-line-strong, #d4d4db);
3056
+ }
2167
3057
 
2168
- .odt-dropdown__trigger--frosted {
2169
- background-color: hsl(from var(--color-surface) h s l / 0.85);
2170
- backdrop-filter: blur(16px);
2171
- -webkit-backdrop-filter: blur(16px);
2172
- border: 1px solid transparent;
2173
- box-shadow: var(--shadow-card);
2174
- }
2175
- .odt-dropdown__trigger--frosted:focus,
2176
- .odt-dropdown__trigger--frosted.odt-dropdown__trigger--open {
2177
- border-color: var(--color-ring);
2178
- }
3058
+ .odt-dropdown__trigger--outlined:focus,
3059
+ .odt-dropdown__trigger--outlined.odt-dropdown__trigger--open {
3060
+ border-color: var(--color-ring);
3061
+ }
2179
3062
 
2180
- .odt-dropdown__trigger--sm {
2181
- height: 2rem;
2182
- padding: 0 var(--spacing-3, 0.75rem);
2183
- font-size: var(--font-size-xs, 0.75rem);
2184
- }
2185
- .odt-dropdown__trigger--md {
2186
- height: 2.625rem;
2187
- padding: 0 var(--spacing-4, 1rem);
2188
- font-size: var(--font-size-sm, 0.875rem);
2189
- }
2190
- .odt-dropdown__trigger--lg {
2191
- height: 3.125rem;
2192
- padding: 0 var(--spacing-5, 1.25rem);
2193
- font-size: var(--font-size-base, 1rem);
2194
- }
3063
+ .odt-dropdown__trigger--filled {
3064
+ background-color: var(--color-surface, #ffffff);
3065
+ border: 1px solid transparent;
3066
+ }
2195
3067
 
2196
- .odt-dropdown__trigger-text {
2197
- flex: 1 1 auto;
2198
- text-align: left;
2199
- overflow: hidden;
2200
- text-overflow: ellipsis;
2201
- white-space: nowrap;
2202
- }
3068
+ .odt-dropdown__trigger--filled:focus,
3069
+ .odt-dropdown__trigger--filled.odt-dropdown__trigger--open {
3070
+ border-color: var(--color-ring);
3071
+ }
2203
3072
 
2204
- .odt-dropdown__placeholder {
2205
- color: var(--color-fg-subtle);
2206
- font-weight: 400;
2207
- }
3073
+ .odt-dropdown__trigger--frosted {
3074
+ background-color: hsl(from var(--color-surface) h s l / 0.85);
3075
+ backdrop-filter: blur(16px);
3076
+ -webkit-backdrop-filter: blur(16px);
3077
+ border: 1px solid transparent;
3078
+ box-shadow: var(--shadow-card);
3079
+ }
2208
3080
 
2209
- .odt-dropdown__chevron {
2210
- display: inline-flex;
2211
- align-items: center;
2212
- justify-content: center;
2213
- color: var(--color-fg-muted);
2214
- flex-shrink: 0;
2215
- transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), color 140ms ease;
2216
- }
3081
+ .odt-dropdown__trigger--frosted:focus,
3082
+ .odt-dropdown__trigger--frosted.odt-dropdown__trigger--open {
3083
+ border-color: var(--color-ring);
3084
+ }
2217
3085
 
2218
- .odt-dropdown__chevron--open {
2219
- transform: rotate(180deg);
2220
- color: var(--color-fg-strong);
2221
- }
3086
+ .odt-dropdown__trigger--sm {
3087
+ height: 2rem;
3088
+ padding: 0 var(--spacing-3, 0.75rem);
3089
+ font-size: var(--font-size-xs, 0.75rem);
3090
+ }
2222
3091
 
2223
- .odt-dropdown__trigger--error {
2224
- border-color: var(--color-danger) !important;
2225
- }
3092
+ .odt-dropdown__trigger--md {
3093
+ height: 2.625rem;
3094
+ padding: 0 var(--spacing-4, 1rem);
3095
+ font-size: var(--font-size-base, 1rem);
3096
+ }
2226
3097
 
2227
- .odt-dropdown__trigger:disabled {
2228
- background-color: var(--color-surface-subtle);
2229
- color: var(--color-fg-disabled);
2230
- cursor: not-allowed;
2231
- opacity: 0.7;
2232
- }
3098
+ .odt-dropdown__trigger--lg {
3099
+ height: 3.125rem;
3100
+ padding: 0 var(--spacing-5, 1.25rem);
3101
+ font-size: var(--font-size-lg, 1.125rem);
3102
+ }
2233
3103
 
2234
- .odt-dropdown__content {
2235
- position: absolute;
2236
- z-index: 1000;
2237
- display: flex;
2238
- flex-direction: column;
2239
- box-sizing: border-box;
2240
- padding: 0.3125rem;
2241
- background-color: var(--color-surface, #ffffff);
2242
- border: 1px solid var(--color-line-muted, rgba(226, 232, 240, 0.8));
2243
- border-radius: var(--radius-xl, 0.75rem);
2244
- color: var(--color-neutral-900);
2245
- outline: none;
2246
- min-width: 12rem;
2247
- box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.08), 0 4px 10px -2px rgba(0, 0, 0, 0.03);
2248
- transform-origin: top center;
2249
- animation: odt-dropdown-enter 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
2250
- }
3104
+ .odt-dropdown__trigger-text {
3105
+ flex: 1 1 auto;
3106
+ text-align: left;
3107
+ overflow: hidden;
3108
+ text-overflow: ellipsis;
3109
+ white-space: nowrap;
3110
+ }
2251
3111
 
2252
- .odt-dropdown__content.hidden {
2253
- display: none !important;
2254
- }
3112
+ .odt-dropdown__placeholder {
3113
+ color: var(--color-fg-subtle);
3114
+ font-weight: 400;
3115
+ }
2255
3116
 
2256
- .odt-dropdown__content--align-start { left: 0; }
2257
- .odt-dropdown__content--align-end { right: 0; }
2258
- .odt-dropdown__content--align-center { left: 50%; transform: translateX(-50%); }
3117
+ .odt-dropdown__chevron {
3118
+ display: inline-flex;
3119
+ align-items: center;
3120
+ justify-content: center;
3121
+ color: var(--color-fg-muted);
3122
+ flex-shrink: 0;
3123
+ transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), color 140ms ease;
3124
+ }
2259
3125
 
2260
- .odt-dropdown__content--side-bottom { top: calc(100% + 6px); }
2261
- .odt-dropdown__content--side-top { bottom: calc(100% + 6px); }
3126
+ .odt-dropdown__chevron--open {
3127
+ transform: rotate(180deg);
3128
+ color: var(--color-fg-strong);
3129
+ }
2262
3130
 
2263
- .odt-dropdown__content--exiting {
2264
- animation: odt-dropdown-exit 110ms cubic-bezier(0.4, 0, 1, 1) forwards;
2265
- pointer-events: none;
2266
- }
3131
+ .odt-dropdown__trigger--error {
3132
+ border-color: var(--color-danger) !important;
3133
+ }
2267
3134
 
2268
- @keyframes odt-dropdown-enter {
2269
- from {
2270
- opacity: 0;
2271
- transform: scale(0.97) translateY(-4px);
3135
+ .odt-dropdown__trigger:disabled {
3136
+ background-color: var(--color-surface-subtle);
3137
+ color: var(--color-fg-disabled);
3138
+ cursor: not-allowed;
3139
+ opacity: 0.7;
2272
3140
  }
2273
- to {
2274
- opacity: 1;
2275
- transform: scale(1) translateY(0);
3141
+
3142
+ .odt-dropdown__content {
3143
+ position: absolute;
3144
+ z-index: 1000;
3145
+ display: flex;
3146
+ flex-direction: column;
3147
+ box-sizing: border-box;
3148
+ padding: 0.3125rem;
3149
+ background-color: var(--color-surface, #ffffff);
3150
+ border: 1px solid var(--color-line-muted, rgba(226, 232, 240, 0.8));
3151
+ border-radius: var(--radius-xl, 0.75rem);
3152
+ color: var(--color-neutral-900);
3153
+ outline: none;
3154
+ min-width: 12rem;
3155
+ box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.08), 0 4px 10px -2px rgba(0, 0, 0, 0.03);
3156
+ transform-origin: top center;
3157
+ animation: odt-dropdown-enter 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
2276
3158
  }
2277
- }
2278
3159
 
2279
- @keyframes odt-dropdown-exit {
2280
- from {
2281
- opacity: 1;
2282
- transform: scale(1) translateY(0);
3160
+ .odt-dropdown__content.hidden {
3161
+ display: none !important;
2283
3162
  }
2284
- to {
2285
- opacity: 0;
2286
- transform: scale(0.97) translateY(-4px);
3163
+
3164
+ .odt-dropdown__content--align-start {
3165
+ left: 0;
2287
3166
  }
2288
- }
2289
3167
 
2290
- .odt-dropdown__item {
2291
- position: relative;
2292
- display: flex;
2293
- align-items: center;
2294
- width: 100%;
2295
- box-sizing: border-box;
2296
- padding: 0.4375rem 0.625rem;
2297
- border-radius: var(--radius-lg, 0.5rem);
2298
- font-size: 0.8125rem;
2299
- font-weight: 500;
2300
- line-height: 1.25rem;
2301
- letter-spacing: -0.01em;
2302
- color: var(--color-neutral-700);
2303
- background: transparent;
2304
- border: none;
2305
- cursor: pointer;
2306
- user-select: none;
2307
- text-decoration: none;
2308
- transition: background-color 120ms ease, color 120ms ease, transform 100ms ease;
2309
- outline: none;
2310
- gap: 0.5rem;
2311
- }
3168
+ .odt-dropdown__content--align-end {
3169
+ right: 0;
3170
+ }
2312
3171
 
2313
- .odt-dropdown__item:hover,
2314
- .odt-dropdown__item:focus-visible,
2315
- .odt-dropdown__item[data-highlighted="true"] {
2316
- background-color: var(--color-surface-subtle);
2317
- color: var(--color-neutral-950);
2318
- }
3172
+ .odt-dropdown__content--align-center {
3173
+ left: 50%;
3174
+ transform: translateX(-50%);
3175
+ }
2319
3176
 
2320
- .odt-dropdown__item:active {
2321
- background-color: var(--color-neutral-200);
2322
- transform: scale(0.99);
2323
- }
3177
+ .odt-dropdown__content--side-bottom {
3178
+ top: calc(100% + 6px);
3179
+ }
2324
3180
 
2325
- .odt-dropdown__item--inset {
2326
- padding-left: 2.125rem;
2327
- }
3181
+ .odt-dropdown__content--side-top {
3182
+ bottom: calc(100% + 6px);
3183
+ }
2328
3184
 
2329
- .odt-dropdown__item:disabled,
2330
- .odt-dropdown__item--disabled {
2331
- opacity: 0.4;
2332
- cursor: not-allowed;
2333
- pointer-events: none;
2334
- }
3185
+ .odt-dropdown__content--exiting {
3186
+ animation: odt-dropdown-exit 110ms cubic-bezier(0.4, 0, 1, 1) forwards;
3187
+ pointer-events: none;
3188
+ }
2335
3189
 
2336
- .odt-dropdown__item--destructive {
2337
- color: var(--color-danger);
2338
- }
3190
+ @keyframes odt-dropdown-enter {
3191
+ from {
3192
+ opacity: 0;
3193
+ transform: scale(0.97) translateY(-4px);
3194
+ }
2339
3195
 
2340
- .odt-dropdown__item--destructive:hover,
2341
- .odt-dropdown__item--destructive:focus-visible,
2342
- .odt-dropdown__item--destructive[data-highlighted="true"] {
2343
- background-color: var(--color-surface-danger);
2344
- color: var(--color-danger);
2345
- }
3196
+ to {
3197
+ opacity: 1;
3198
+ transform: scale(1) translateY(0);
3199
+ }
3200
+ }
2346
3201
 
2347
- .odt-dropdown__item-content {
2348
- flex: 1 1 auto;
2349
- display: flex;
2350
- align-items: center;
2351
- overflow: hidden;
2352
- text-overflow: ellipsis;
2353
- white-space: nowrap;
2354
- }
3202
+ @keyframes odt-dropdown-exit {
3203
+ from {
3204
+ opacity: 1;
3205
+ transform: scale(1) translateY(0);
3206
+ }
2355
3207
 
2356
- .odt-dropdown__item-icon {
2357
- display: inline-flex;
2358
- align-items: center;
2359
- justify-content: center;
2360
- flex-shrink: 0;
2361
- width: 1rem;
2362
- height: 1rem;
2363
- color: var(--color-neutral-400);
2364
- transition: color 120ms ease;
2365
- }
3208
+ to {
3209
+ opacity: 0;
3210
+ transform: scale(0.97) translateY(-4px);
3211
+ }
3212
+ }
2366
3213
 
2367
- .odt-dropdown__item:hover .odt-dropdown__item-icon,
2368
- .odt-dropdown__item:focus-visible .odt-dropdown__item-icon {
2369
- color: var(--color-neutral-800);
2370
- }
3214
+ .odt-dropdown__item {
3215
+ position: relative;
3216
+ display: flex;
3217
+ align-items: center;
3218
+ width: 100%;
3219
+ box-sizing: border-box;
3220
+ padding: 0.4375rem 0.625rem;
3221
+ border-radius: var(--radius-lg, 0.5rem);
3222
+ font-size: 0.8125rem;
3223
+ font-weight: 500;
3224
+ line-height: 1.25rem;
3225
+ letter-spacing: -0.01em;
3226
+ color: var(--color-neutral-700);
3227
+ background: transparent;
3228
+ border: none;
3229
+ cursor: pointer;
3230
+ user-select: none;
3231
+ text-decoration: none;
3232
+ transition: background-color 120ms ease, color 120ms ease, transform 100ms ease;
3233
+ outline: none;
3234
+ gap: 0.5rem;
3235
+ }
2371
3236
 
2372
- .odt-dropdown__item--destructive .odt-dropdown__item-icon {
2373
- color: var(--color-danger);
2374
- }
3237
+ .odt-dropdown__item:hover,
3238
+ .odt-dropdown__item:focus-visible,
3239
+ .odt-dropdown__item[data-highlighted="true"] {
3240
+ background-color: var(--color-surface-subtle);
3241
+ color: var(--color-neutral-950);
3242
+ }
2375
3243
 
2376
- .odt-dropdown__item-right-icon {
2377
- display: inline-flex;
2378
- align-items: center;
2379
- justify-content: center;
2380
- flex-shrink: 0;
2381
- margin-left: auto;
2382
- color: var(--color-neutral-400);
2383
- }
3244
+ .odt-dropdown__item:active {
3245
+ background-color: var(--color-neutral-200);
3246
+ transform: scale(0.99);
3247
+ }
2384
3248
 
2385
- .odt-dropdown__shortcut {
2386
- margin-left: auto;
2387
- font-size: 0.6875rem;
2388
- font-weight: 500;
2389
- letter-spacing: 0.04em;
2390
- font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
2391
- color: var(--color-neutral-400);
2392
- background: none;
2393
- border: none;
2394
- padding: 0;
2395
- line-height: 1rem;
2396
- display: inline-flex;
2397
- align-items: center;
2398
- }
3249
+ .odt-dropdown__item--inset {
3250
+ padding-left: 2.125rem;
3251
+ }
2399
3252
 
2400
- .odt-dropdown__label-heading {
2401
- padding: 0.375rem 0.625rem 0.25rem;
2402
- font-size: 0.6875rem;
2403
- font-weight: 600;
2404
- text-transform: uppercase;
2405
- letter-spacing: 0.05em;
2406
- color: var(--color-neutral-400);
2407
- user-select: none;
2408
- }
3253
+ .odt-dropdown__item:disabled,
3254
+ .odt-dropdown__item--disabled {
3255
+ opacity: 0.4;
3256
+ cursor: not-allowed;
3257
+ pointer-events: none;
3258
+ }
2409
3259
 
2410
- .odt-dropdown__label-heading--inset {
2411
- padding-left: 2.125rem;
2412
- }
3260
+ .odt-dropdown__item--destructive {
3261
+ color: var(--color-danger);
3262
+ }
2413
3263
 
2414
- .odt-dropdown__separator {
2415
- height: 1px;
2416
- margin: 0.25rem 0.25rem;
2417
- background-color: var(--color-line-muted, rgba(226, 232, 240, 0.8));
2418
- border: none;
2419
- }
3264
+ .odt-dropdown__item--destructive:hover,
3265
+ .odt-dropdown__item--destructive:focus-visible,
3266
+ .odt-dropdown__item--destructive[data-highlighted="true"] {
3267
+ background-color: var(--color-surface-danger);
3268
+ color: var(--color-danger);
3269
+ }
2420
3270
 
2421
- .odt-dropdown__group {
2422
- display: flex;
2423
- flex-direction: column;
2424
- width: 100%;
2425
- }
3271
+ .odt-dropdown__item-content {
3272
+ flex: 1 1 auto;
3273
+ display: flex;
3274
+ align-items: center;
3275
+ overflow: hidden;
3276
+ text-overflow: ellipsis;
3277
+ white-space: nowrap;
3278
+ }
3279
+
3280
+ .odt-dropdown__item-icon {
3281
+ display: inline-flex;
3282
+ align-items: center;
3283
+ justify-content: center;
3284
+ flex-shrink: 0;
3285
+ width: 1rem;
3286
+ height: 1rem;
3287
+ color: var(--color-neutral-400);
3288
+ transition: color 120ms ease;
3289
+ }
3290
+
3291
+ .odt-dropdown__item:hover .odt-dropdown__item-icon,
3292
+ .odt-dropdown__item:focus-visible .odt-dropdown__item-icon {
3293
+ color: var(--color-neutral-800);
3294
+ }
3295
+
3296
+ .odt-dropdown__item--destructive .odt-dropdown__item-icon {
3297
+ color: var(--color-danger);
3298
+ }
3299
+
3300
+ .odt-dropdown__item-right-icon {
3301
+ display: inline-flex;
3302
+ align-items: center;
3303
+ justify-content: center;
3304
+ flex-shrink: 0;
3305
+ margin-left: auto;
3306
+ color: var(--color-neutral-400);
3307
+ }
3308
+
3309
+ .odt-dropdown__shortcut {
3310
+ margin-left: auto;
3311
+ font-size: 0.6875rem;
3312
+ font-weight: 500;
3313
+ letter-spacing: 0.04em;
3314
+ font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
3315
+ color: var(--color-neutral-400);
3316
+ background: none;
3317
+ border: none;
3318
+ padding: 0;
3319
+ line-height: 1rem;
3320
+ display: inline-flex;
3321
+ align-items: center;
3322
+ }
3323
+
3324
+ .odt-dropdown__label-heading {
3325
+ padding: 0.375rem 0.625rem 0.25rem;
3326
+ font-size: 0.6875rem;
3327
+ font-weight: 600;
3328
+ text-transform: uppercase;
3329
+ letter-spacing: 0.05em;
3330
+ color: var(--color-neutral-400);
3331
+ user-select: none;
3332
+ }
2426
3333
 
3334
+ .odt-dropdown__label-heading--inset {
3335
+ padding-left: 2.125rem;
3336
+ }
2427
3337
 
3338
+ .odt-dropdown__separator {
3339
+ height: 1px;
3340
+ margin: 0.25rem 0.25rem;
3341
+ background-color: var(--color-line-muted, rgba(226, 232, 240, 0.8));
3342
+ border: none;
3343
+ }
2428
3344
 
3345
+ .odt-dropdown__group {
3346
+ display: flex;
3347
+ flex-direction: column;
3348
+ width: 100%;
3349
+ }
3350
+ }