@aurea-uds/core 0.45.0 → 0.47.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/aurea.css +784 -67
- package/package.json +1 -1
package/dist/aurea.css
CHANGED
|
@@ -343,7 +343,7 @@
|
|
|
343
343
|
--control-thumb:#ffffff;
|
|
344
344
|
--warning-500:#d07612;
|
|
345
345
|
}
|
|
346
|
-
[data-brand="
|
|
346
|
+
[data-brand="ember"][data-theme="dark"],[data-brand="ember"] [data-theme="dark"]{
|
|
347
347
|
--background:oklch(0.16 0.018 250);
|
|
348
348
|
--foreground:oklch(0.96 0.006 250);
|
|
349
349
|
--foreground-strong:oklch(1 0 0);
|
|
@@ -382,8 +382,8 @@
|
|
|
382
382
|
--focus-strong:oklch(0.85 0.14 60);
|
|
383
383
|
--selection:oklch(0.32 0.08 50);
|
|
384
384
|
--control-selected:oklch(0.72 0.19 48);
|
|
385
|
-
--control-selected-foreground:oklch(0
|
|
386
|
-
--control-selected-dot:oklch(0
|
|
385
|
+
--control-selected-foreground:oklch(1 0 0);
|
|
386
|
+
--control-selected-dot:oklch(1 0 0);
|
|
387
387
|
--primary-mark:oklch(0.16 0.02 250);
|
|
388
388
|
--overlay:oklch(0 0 0 / 0.6);
|
|
389
389
|
--chart-1:oklch(0.74 0.18 50);
|
|
@@ -409,9 +409,9 @@
|
|
|
409
409
|
--info-bg:oklch(0.32 0.06 235);
|
|
410
410
|
--brand-yellow-ink:#242424;
|
|
411
411
|
--warning-foreground:#242424;
|
|
412
|
-
--control-thumb:
|
|
412
|
+
--control-thumb:oklch(1 0 0);
|
|
413
413
|
}
|
|
414
|
-
[data-brand="
|
|
414
|
+
[data-brand="ember"][data-theme="light"],[data-brand="ember"] [data-theme="light"]{
|
|
415
415
|
--background:oklch(0.984 0.004 70);
|
|
416
416
|
--foreground:oklch(0.24 0.022 250);
|
|
417
417
|
--foreground-strong:oklch(0.16 0.02 250);
|
|
@@ -481,6 +481,572 @@
|
|
|
481
481
|
--control-thumb:var(--primary-mark);
|
|
482
482
|
--warning-500:oklch(0.727 0.149 60);
|
|
483
483
|
}
|
|
484
|
+
[data-brand="sun"][data-theme="dark"],[data-brand="sun"] [data-theme="dark"]{
|
|
485
|
+
--primary:#facc15;
|
|
486
|
+
--primary-foreground:#18181b;
|
|
487
|
+
--primary-hover:#fbd34e;
|
|
488
|
+
--primary-active:#eabe13;
|
|
489
|
+
--primary-emphasis:#facc15;
|
|
490
|
+
--primary-outline:rgba(250,204,21,0.349);
|
|
491
|
+
--link:#facc15;
|
|
492
|
+
--link-hover:#facc15;
|
|
493
|
+
--link-mark:rgba(0,0,0,0);
|
|
494
|
+
--link-underline:#facc15;
|
|
495
|
+
--focus:#facc15;
|
|
496
|
+
--ring:#facc15;
|
|
497
|
+
--control-selected:#facc15;
|
|
498
|
+
--control-selected-foreground:#ffffff;
|
|
499
|
+
--control-selected-dot:#ffffff;
|
|
500
|
+
--primary-mark:#18181b;
|
|
501
|
+
--selection:rgba(250,204,21,0.2196);
|
|
502
|
+
--accent:#38311a;
|
|
503
|
+
--accent-foreground:#facc15;
|
|
504
|
+
--sidebar-primary:var(--primary-emphasis);
|
|
505
|
+
--sidebar-primary-foreground:#18181b;
|
|
506
|
+
--sidebar-ring:#facc15;
|
|
507
|
+
--sidebar-current-line:rgba(250,204,21,0.75);
|
|
508
|
+
}
|
|
509
|
+
[data-brand="sun"][data-theme="light"],[data-brand="sun"] [data-theme="light"]{
|
|
510
|
+
--primary:#facc15;
|
|
511
|
+
--primary-foreground:#18181b;
|
|
512
|
+
--primary-hover:#fbd34e;
|
|
513
|
+
--primary-active:#eabe13;
|
|
514
|
+
--primary-emphasis:var(--foreground);
|
|
515
|
+
--primary-outline:rgba(250,204,21,0.349);
|
|
516
|
+
--link:var(--foreground);
|
|
517
|
+
--link-hover:var(--foreground);
|
|
518
|
+
--link-mark:rgba(250,204,21,0.451);
|
|
519
|
+
--link-underline:#facc15;
|
|
520
|
+
--focus:#b27600;
|
|
521
|
+
--ring:#b27600;
|
|
522
|
+
--control-selected:#facc15;
|
|
523
|
+
--control-selected-foreground:#ffffff;
|
|
524
|
+
--control-selected-dot:#ffffff;
|
|
525
|
+
--primary-mark:#18181b;
|
|
526
|
+
--selection:rgba(250,204,21,0.1804);
|
|
527
|
+
--accent:#fef8de;
|
|
528
|
+
--accent-foreground:var(--foreground);
|
|
529
|
+
--sidebar-primary:var(--primary-emphasis);
|
|
530
|
+
--sidebar-primary-foreground:#18181b;
|
|
531
|
+
--sidebar-ring:#b27600;
|
|
532
|
+
--sidebar-current-line:rgba(250,204,21,0.75);
|
|
533
|
+
}
|
|
534
|
+
[data-brand="honey"][data-theme="dark"],[data-brand="honey"] [data-theme="dark"]{
|
|
535
|
+
--primary:#f5a524;
|
|
536
|
+
--primary-foreground:#18181b;
|
|
537
|
+
--primary-hover:#f7b04e;
|
|
538
|
+
--primary-active:#e59a21;
|
|
539
|
+
--primary-emphasis:#f5a524;
|
|
540
|
+
--primary-outline:rgba(245,165,36,0.349);
|
|
541
|
+
--link:#f5a524;
|
|
542
|
+
--link-hover:#f5a524;
|
|
543
|
+
--link-mark:rgba(0,0,0,0);
|
|
544
|
+
--link-underline:#f5a524;
|
|
545
|
+
--focus:#f5a524;
|
|
546
|
+
--ring:#f5a524;
|
|
547
|
+
--control-selected:#f5a524;
|
|
548
|
+
--control-selected-foreground:#ffffff;
|
|
549
|
+
--control-selected-dot:#ffffff;
|
|
550
|
+
--primary-mark:#18181b;
|
|
551
|
+
--selection:rgba(245,165,36,0.2196);
|
|
552
|
+
--accent:#372c1c;
|
|
553
|
+
--accent-foreground:#f5a524;
|
|
554
|
+
--sidebar-primary:var(--primary-emphasis);
|
|
555
|
+
--sidebar-primary-foreground:#18181b;
|
|
556
|
+
--sidebar-ring:#f5a524;
|
|
557
|
+
--sidebar-current-line:rgba(245,165,36,0.75);
|
|
558
|
+
}
|
|
559
|
+
[data-brand="honey"][data-theme="light"],[data-brand="honey"] [data-theme="light"]{
|
|
560
|
+
--primary:#f5a524;
|
|
561
|
+
--primary-foreground:#18181b;
|
|
562
|
+
--primary-hover:#f7b04e;
|
|
563
|
+
--primary-active:#e59a21;
|
|
564
|
+
--primary-emphasis:var(--foreground);
|
|
565
|
+
--primary-outline:rgba(245,165,36,0.349);
|
|
566
|
+
--link:var(--foreground);
|
|
567
|
+
--link-hover:var(--foreground);
|
|
568
|
+
--link-mark:rgba(245,165,36,0.451);
|
|
569
|
+
--link-underline:#f5a524;
|
|
570
|
+
--focus:#cc6700;
|
|
571
|
+
--ring:#cc6700;
|
|
572
|
+
--control-selected:#f5a524;
|
|
573
|
+
--control-selected-foreground:#ffffff;
|
|
574
|
+
--control-selected-dot:#ffffff;
|
|
575
|
+
--primary-mark:#18181b;
|
|
576
|
+
--selection:rgba(245,165,36,0.1804);
|
|
577
|
+
--accent:#fef2e0;
|
|
578
|
+
--accent-foreground:var(--foreground);
|
|
579
|
+
--sidebar-primary:var(--primary-emphasis);
|
|
580
|
+
--sidebar-primary-foreground:#18181b;
|
|
581
|
+
--sidebar-ring:#cc6700;
|
|
582
|
+
--sidebar-current-line:rgba(245,165,36,0.75);
|
|
583
|
+
}
|
|
584
|
+
[data-brand="orange"][data-theme="dark"],[data-brand="orange"] [data-theme="dark"]{
|
|
585
|
+
--primary:#ff7a1a;
|
|
586
|
+
--primary-foreground:#18181b;
|
|
587
|
+
--primary-hover:#ff8c46;
|
|
588
|
+
--primary-active:#ee7218;
|
|
589
|
+
--primary-emphasis:#ff904f;
|
|
590
|
+
--primary-outline:rgba(255,122,26,0.349);
|
|
591
|
+
--link:#ff904f;
|
|
592
|
+
--link-hover:#ff904f;
|
|
593
|
+
--link-mark:rgba(0,0,0,0);
|
|
594
|
+
--link-underline:#ff7a1a;
|
|
595
|
+
--focus:#ff7a1a;
|
|
596
|
+
--ring:#ff7a1a;
|
|
597
|
+
--control-selected:#ff7a1a;
|
|
598
|
+
--control-selected-foreground:#ffffff;
|
|
599
|
+
--control-selected-dot:#ffffff;
|
|
600
|
+
--primary-mark:#18181b;
|
|
601
|
+
--selection:rgba(255,122,26,0.2196);
|
|
602
|
+
--accent:#38261b;
|
|
603
|
+
--accent-foreground:#ff904f;
|
|
604
|
+
--sidebar-primary:var(--primary-emphasis);
|
|
605
|
+
--sidebar-primary-foreground:#18181b;
|
|
606
|
+
--sidebar-ring:#ff7a1a;
|
|
607
|
+
--sidebar-current-line:rgba(255,122,26,0.75);
|
|
608
|
+
--warning:#f5a524;
|
|
609
|
+
--warning-hover:#f7b04e;
|
|
610
|
+
--warning-400:#f5a524;
|
|
611
|
+
--warning-bg:#4a320b;
|
|
612
|
+
}
|
|
613
|
+
[data-brand="orange"][data-theme="light"],[data-brand="orange"] [data-theme="light"]{
|
|
614
|
+
--primary:#ff7a1a;
|
|
615
|
+
--primary-foreground:#18181b;
|
|
616
|
+
--primary-hover:#ff8c46;
|
|
617
|
+
--primary-active:#ee7218;
|
|
618
|
+
--primary-emphasis:#a44900;
|
|
619
|
+
--primary-outline:rgba(255,122,26,0.349);
|
|
620
|
+
--link:var(--foreground);
|
|
621
|
+
--link-hover:var(--foreground);
|
|
622
|
+
--link-mark:rgba(255,122,26,0.451);
|
|
623
|
+
--link-underline:#ff7a1a;
|
|
624
|
+
--focus:#d46100;
|
|
625
|
+
--ring:#d46100;
|
|
626
|
+
--control-selected:#ff7a1a;
|
|
627
|
+
--control-selected-foreground:#ffffff;
|
|
628
|
+
--control-selected-dot:#ffffff;
|
|
629
|
+
--primary-mark:#18181b;
|
|
630
|
+
--selection:rgba(255,122,26,0.1804);
|
|
631
|
+
--accent:#ffecdf;
|
|
632
|
+
--accent-foreground:#a44900;
|
|
633
|
+
--sidebar-primary:var(--primary-emphasis);
|
|
634
|
+
--sidebar-primary-foreground:#18181b;
|
|
635
|
+
--sidebar-ring:#d46100;
|
|
636
|
+
--sidebar-current-line:rgba(255,122,26,0.75);
|
|
637
|
+
--warning:#f5a524;
|
|
638
|
+
--warning-hover:#f7b04e;
|
|
639
|
+
--warning-400:#8c5b00;
|
|
640
|
+
--warning-bg:#fffbf6;
|
|
641
|
+
}
|
|
642
|
+
[data-brand="magenta"][data-theme="dark"],[data-brand="magenta"] [data-theme="dark"]{
|
|
643
|
+
--primary:#e0196e;
|
|
644
|
+
--primary-foreground:#ffffff;
|
|
645
|
+
--primary-hover:#bd135c;
|
|
646
|
+
--primary-active:#bd135c;
|
|
647
|
+
--primary-emphasis:#ff88a8;
|
|
648
|
+
--primary-outline:rgba(224,25,110,0.349);
|
|
649
|
+
--link:#ff88a8;
|
|
650
|
+
--link-hover:#ff88a8;
|
|
651
|
+
--link-mark:rgba(0,0,0,0);
|
|
652
|
+
--link-underline:#e0196e;
|
|
653
|
+
--focus:#ff4688;
|
|
654
|
+
--ring:#ff4688;
|
|
655
|
+
--control-selected:#e0196e;
|
|
656
|
+
--control-selected-foreground:#ffffff;
|
|
657
|
+
--control-selected-dot:#ffffff;
|
|
658
|
+
--primary-mark:#ffffff;
|
|
659
|
+
--selection:rgba(224,25,110,0.2196);
|
|
660
|
+
--accent:#341827;
|
|
661
|
+
--accent-foreground:#ff88a8;
|
|
662
|
+
--sidebar-primary:var(--primary-emphasis);
|
|
663
|
+
--sidebar-primary-foreground:#ffffff;
|
|
664
|
+
--sidebar-ring:#ff4688;
|
|
665
|
+
--sidebar-current-line:rgba(224,25,110,0.75);
|
|
666
|
+
--primary-gradient-end:oklch(0.4137 0.1594 3.94);
|
|
667
|
+
}
|
|
668
|
+
[data-brand="magenta"][data-theme="light"],[data-brand="magenta"] [data-theme="light"]{
|
|
669
|
+
--primary:#e0196e;
|
|
670
|
+
--primary-foreground:#ffffff;
|
|
671
|
+
--primary-hover:#bd135c;
|
|
672
|
+
--primary-active:#bd135c;
|
|
673
|
+
--primary-emphasis:#bb0059;
|
|
674
|
+
--primary-outline:rgba(224,25,110,0.349);
|
|
675
|
+
--link:var(--foreground);
|
|
676
|
+
--link-hover:var(--foreground);
|
|
677
|
+
--link-mark:rgba(224,25,110,0.451);
|
|
678
|
+
--link-underline:#e0196e;
|
|
679
|
+
--focus:#e0196e;
|
|
680
|
+
--ring:#e0196e;
|
|
681
|
+
--control-selected:#e0196e;
|
|
682
|
+
--control-selected-foreground:#ffffff;
|
|
683
|
+
--control-selected-dot:#ffffff;
|
|
684
|
+
--primary-mark:#ffffff;
|
|
685
|
+
--selection:rgba(224,25,110,0.1804);
|
|
686
|
+
--accent:#fbdfeb;
|
|
687
|
+
--accent-foreground:#bb0059;
|
|
688
|
+
--sidebar-primary:var(--primary-emphasis);
|
|
689
|
+
--sidebar-primary-foreground:#ffffff;
|
|
690
|
+
--sidebar-ring:#e0196e;
|
|
691
|
+
--sidebar-current-line:rgba(224,25,110,0.75);
|
|
692
|
+
--primary-gradient-end:oklch(0.4137 0.1594 3.94);
|
|
693
|
+
}
|
|
694
|
+
[data-brand="violet"][data-theme="dark"],[data-brand="violet"] [data-theme="dark"]{
|
|
695
|
+
--primary:#7c3aed;
|
|
696
|
+
--primary-foreground:#ffffff;
|
|
697
|
+
--primary-hover:#682fc8;
|
|
698
|
+
--primary-active:#682fc8;
|
|
699
|
+
--primary-emphasis:#b49eff;
|
|
700
|
+
--primary-outline:rgba(124,58,237,0.349);
|
|
701
|
+
--link:#b49eff;
|
|
702
|
+
--link-hover:#b49eff;
|
|
703
|
+
--link-mark:rgba(0,0,0,0);
|
|
704
|
+
--link-underline:#7c3aed;
|
|
705
|
+
--focus:#9c76ff;
|
|
706
|
+
--ring:#9c76ff;
|
|
707
|
+
--control-selected:#7c3aed;
|
|
708
|
+
--control-selected-foreground:#ffffff;
|
|
709
|
+
--control-selected-dot:#ffffff;
|
|
710
|
+
--primary-mark:#ffffff;
|
|
711
|
+
--selection:rgba(124,58,237,0.2196);
|
|
712
|
+
--accent:#261d38;
|
|
713
|
+
--accent-foreground:#b49eff;
|
|
714
|
+
--sidebar-primary:var(--primary-emphasis);
|
|
715
|
+
--sidebar-primary-foreground:#ffffff;
|
|
716
|
+
--sidebar-ring:#9c76ff;
|
|
717
|
+
--sidebar-current-line:rgba(124,58,237,0.75);
|
|
718
|
+
--primary-gradient-end:oklch(0.3789 0.1726 293.01);
|
|
719
|
+
}
|
|
720
|
+
[data-brand="violet"][data-theme="light"],[data-brand="violet"] [data-theme="light"]{
|
|
721
|
+
--primary:#7c3aed;
|
|
722
|
+
--primary-foreground:#ffffff;
|
|
723
|
+
--primary-hover:#682fc8;
|
|
724
|
+
--primary-active:#682fc8;
|
|
725
|
+
--primary-emphasis:#7530e4;
|
|
726
|
+
--primary-outline:rgba(124,58,237,0.349);
|
|
727
|
+
--link:var(--foreground);
|
|
728
|
+
--link-hover:var(--foreground);
|
|
729
|
+
--link-mark:rgba(124,58,237,0.451);
|
|
730
|
+
--link-underline:#7c3aed;
|
|
731
|
+
--focus:#7c3aed;
|
|
732
|
+
--ring:#7c3aed;
|
|
733
|
+
--control-selected:#7c3aed;
|
|
734
|
+
--control-selected-foreground:#ffffff;
|
|
735
|
+
--control-selected-dot:#ffffff;
|
|
736
|
+
--primary-mark:#ffffff;
|
|
737
|
+
--selection:rgba(124,58,237,0.1804);
|
|
738
|
+
--accent:#ede3fc;
|
|
739
|
+
--accent-foreground:#7530e4;
|
|
740
|
+
--sidebar-primary:var(--primary-emphasis);
|
|
741
|
+
--sidebar-primary-foreground:#ffffff;
|
|
742
|
+
--sidebar-ring:#7c3aed;
|
|
743
|
+
--sidebar-current-line:rgba(124,58,237,0.75);
|
|
744
|
+
--primary-gradient-end:oklch(0.3789 0.1726 293.01);
|
|
745
|
+
}
|
|
746
|
+
[data-brand="indigo"][data-theme="dark"],[data-brand="indigo"] [data-theme="dark"]{
|
|
747
|
+
--primary:#4f46e5;
|
|
748
|
+
--primary-foreground:#ffffff;
|
|
749
|
+
--primary-hover:#413ac1;
|
|
750
|
+
--primary-active:#413ac1;
|
|
751
|
+
--primary-emphasis:#9aa6ff;
|
|
752
|
+
--primary-outline:rgba(79,70,229,0.349);
|
|
753
|
+
--link:#9aa6ff;
|
|
754
|
+
--link-hover:#9aa6ff;
|
|
755
|
+
--link-mark:rgba(0,0,0,0);
|
|
756
|
+
--link-underline:#4f46e5;
|
|
757
|
+
--focus:#7982ff;
|
|
758
|
+
--ring:#7982ff;
|
|
759
|
+
--control-selected:#4f46e5;
|
|
760
|
+
--control-selected-foreground:#ffffff;
|
|
761
|
+
--control-selected-dot:#ffffff;
|
|
762
|
+
--primary-mark:#ffffff;
|
|
763
|
+
--selection:rgba(79,70,229,0.2196);
|
|
764
|
+
--accent:#201e37;
|
|
765
|
+
--accent-foreground:#9aa6ff;
|
|
766
|
+
--sidebar-primary:var(--primary-emphasis);
|
|
767
|
+
--sidebar-primary-foreground:#ffffff;
|
|
768
|
+
--sidebar-ring:#7982ff;
|
|
769
|
+
--sidebar-current-line:rgba(79,70,229,0.75);
|
|
770
|
+
--primary-gradient-end:oklch(0.3574 0.161 276.97);
|
|
771
|
+
}
|
|
772
|
+
[data-brand="indigo"][data-theme="light"],[data-brand="indigo"] [data-theme="light"]{
|
|
773
|
+
--primary:#4f46e5;
|
|
774
|
+
--primary-foreground:#ffffff;
|
|
775
|
+
--primary-hover:#413ac1;
|
|
776
|
+
--primary-active:#413ac1;
|
|
777
|
+
--primary-emphasis:#4e45e4;
|
|
778
|
+
--primary-outline:rgba(79,70,229,0.349);
|
|
779
|
+
--link:var(--foreground);
|
|
780
|
+
--link-hover:var(--foreground);
|
|
781
|
+
--link-mark:rgba(79,70,229,0.451);
|
|
782
|
+
--link-underline:#4f46e5;
|
|
783
|
+
--focus:#4f46e5;
|
|
784
|
+
--ring:#4f46e5;
|
|
785
|
+
--control-selected:#4f46e5;
|
|
786
|
+
--control-selected-foreground:#ffffff;
|
|
787
|
+
--control-selected-dot:#ffffff;
|
|
788
|
+
--primary-mark:#ffffff;
|
|
789
|
+
--selection:rgba(79,70,229,0.1804);
|
|
790
|
+
--accent:#e6e5fb;
|
|
791
|
+
--accent-foreground:#4e45e4;
|
|
792
|
+
--sidebar-primary:var(--primary-emphasis);
|
|
793
|
+
--sidebar-primary-foreground:#ffffff;
|
|
794
|
+
--sidebar-ring:#4f46e5;
|
|
795
|
+
--sidebar-current-line:rgba(79,70,229,0.75);
|
|
796
|
+
--primary-gradient-end:oklch(0.3574 0.161 276.97);
|
|
797
|
+
}
|
|
798
|
+
[data-brand="cobalt"][data-theme="dark"],[data-brand="cobalt"] [data-theme="dark"]{
|
|
799
|
+
--primary:#0246f1;
|
|
800
|
+
--primary-foreground:#ffffff;
|
|
801
|
+
--primary-hover:#013acb;
|
|
802
|
+
--primary-active:#013acb;
|
|
803
|
+
--primary-emphasis:#82acff;
|
|
804
|
+
--primary-outline:rgba(2,70,241,0.349);
|
|
805
|
+
--link:#82acff;
|
|
806
|
+
--link-hover:#82acff;
|
|
807
|
+
--link-mark:rgba(0,0,0,0);
|
|
808
|
+
--link-underline:#0246f1;
|
|
809
|
+
--focus:#548aff;
|
|
810
|
+
--ring:#548aff;
|
|
811
|
+
--control-selected:#0246f1;
|
|
812
|
+
--control-selected-foreground:#ffffff;
|
|
813
|
+
--control-selected-dot:#ffffff;
|
|
814
|
+
--primary-mark:#ffffff;
|
|
815
|
+
--selection:rgba(2,70,241,0.2196);
|
|
816
|
+
--accent:#151e39;
|
|
817
|
+
--accent-foreground:#82acff;
|
|
818
|
+
--sidebar-primary:var(--primary-emphasis);
|
|
819
|
+
--sidebar-primary-foreground:#ffffff;
|
|
820
|
+
--sidebar-ring:#548aff;
|
|
821
|
+
--sidebar-current-line:rgba(2,70,241,0.75);
|
|
822
|
+
--primary-gradient-end:oklch(0.3466 0.1812 263.46);
|
|
823
|
+
}
|
|
824
|
+
[data-brand="cobalt"][data-theme="light"],[data-brand="cobalt"] [data-theme="light"]{
|
|
825
|
+
--primary:#0246f1;
|
|
826
|
+
--primary-foreground:#ffffff;
|
|
827
|
+
--primary-hover:#013acb;
|
|
828
|
+
--primary-active:#013acb;
|
|
829
|
+
--primary-emphasis:#0246f1;
|
|
830
|
+
--primary-outline:rgba(2,70,241,0.349);
|
|
831
|
+
--link:var(--foreground);
|
|
832
|
+
--link-hover:var(--foreground);
|
|
833
|
+
--link-mark:rgba(2,70,241,0.451);
|
|
834
|
+
--link-underline:#0246f1;
|
|
835
|
+
--focus:#0246f1;
|
|
836
|
+
--ring:#0246f1;
|
|
837
|
+
--control-selected:#0246f1;
|
|
838
|
+
--control-selected-foreground:#ffffff;
|
|
839
|
+
--control-selected-dot:#ffffff;
|
|
840
|
+
--primary-mark:#ffffff;
|
|
841
|
+
--selection:rgba(2,70,241,0.1804);
|
|
842
|
+
--accent:#dce5fd;
|
|
843
|
+
--accent-foreground:#0246f1;
|
|
844
|
+
--sidebar-primary:var(--primary-emphasis);
|
|
845
|
+
--sidebar-primary-foreground:#ffffff;
|
|
846
|
+
--sidebar-ring:#0246f1;
|
|
847
|
+
--sidebar-current-line:rgba(2,70,241,0.75);
|
|
848
|
+
--primary-gradient-end:oklch(0.3466 0.1812 263.46);
|
|
849
|
+
}
|
|
850
|
+
[data-brand="cyan"][data-theme="dark"],[data-brand="cyan"] [data-theme="dark"]{
|
|
851
|
+
--primary:#06b6d4;
|
|
852
|
+
--primary-foreground:#18181b;
|
|
853
|
+
--primary-hover:#48bfd9;
|
|
854
|
+
--primary-active:#05aac6;
|
|
855
|
+
--primary-emphasis:#1cbcdb;
|
|
856
|
+
--primary-outline:rgba(6,182,212,0.349);
|
|
857
|
+
--link:#1cbcdb;
|
|
858
|
+
--link-hover:#1cbcdb;
|
|
859
|
+
--link-mark:rgba(0,0,0,0);
|
|
860
|
+
--link-underline:#06b6d4;
|
|
861
|
+
--focus:#06b6d4;
|
|
862
|
+
--ring:#06b6d4;
|
|
863
|
+
--control-selected:#06b6d4;
|
|
864
|
+
--control-selected-foreground:#ffffff;
|
|
865
|
+
--control-selected-dot:#ffffff;
|
|
866
|
+
--primary-mark:#18181b;
|
|
867
|
+
--selection:rgba(6,182,212,0.2196);
|
|
868
|
+
--accent:#152e35;
|
|
869
|
+
--accent-foreground:#1cbcdb;
|
|
870
|
+
--sidebar-primary:var(--primary-emphasis);
|
|
871
|
+
--sidebar-primary-foreground:#18181b;
|
|
872
|
+
--sidebar-ring:#06b6d4;
|
|
873
|
+
--sidebar-current-line:rgba(6,182,212,0.75);
|
|
874
|
+
}
|
|
875
|
+
[data-brand="cyan"][data-theme="light"],[data-brand="cyan"] [data-theme="light"]{
|
|
876
|
+
--primary:#06b6d4;
|
|
877
|
+
--primary-foreground:#18181b;
|
|
878
|
+
--primary-hover:#48bfd9;
|
|
879
|
+
--primary-active:#05aac6;
|
|
880
|
+
--primary-emphasis:#006d80;
|
|
881
|
+
--primary-outline:rgba(6,182,212,0.349);
|
|
882
|
+
--link:var(--foreground);
|
|
883
|
+
--link-hover:var(--foreground);
|
|
884
|
+
--link-mark:rgba(6,182,212,0.451);
|
|
885
|
+
--link-underline:#06b6d4;
|
|
886
|
+
--focus:#008fa8;
|
|
887
|
+
--ring:#008fa8;
|
|
888
|
+
--control-selected:#06b6d4;
|
|
889
|
+
--control-selected-foreground:#ffffff;
|
|
890
|
+
--control-selected-dot:#ffffff;
|
|
891
|
+
--primary-mark:#18181b;
|
|
892
|
+
--selection:rgba(6,182,212,0.1804);
|
|
893
|
+
--accent:#dcf5f9;
|
|
894
|
+
--accent-foreground:#006d80;
|
|
895
|
+
--sidebar-primary:var(--primary-emphasis);
|
|
896
|
+
--sidebar-primary-foreground:#18181b;
|
|
897
|
+
--sidebar-ring:#008fa8;
|
|
898
|
+
--sidebar-current-line:rgba(6,182,212,0.75);
|
|
899
|
+
}
|
|
900
|
+
[data-brand="turquoise"][data-theme="dark"],[data-brand="turquoise"] [data-theme="dark"]{
|
|
901
|
+
--primary:#14c8a8;
|
|
902
|
+
--primary-foreground:#18181b;
|
|
903
|
+
--primary-hover:#4ecfb2;
|
|
904
|
+
--primary-active:#12bb9d;
|
|
905
|
+
--primary-emphasis:#14c8a8;
|
|
906
|
+
--primary-outline:rgba(20,200,168,0.349);
|
|
907
|
+
--link:#14c8a8;
|
|
908
|
+
--link-hover:#14c8a8;
|
|
909
|
+
--link-mark:rgba(0,0,0,0);
|
|
910
|
+
--link-underline:#14c8a8;
|
|
911
|
+
--focus:#14c8a8;
|
|
912
|
+
--ring:#14c8a8;
|
|
913
|
+
--control-selected:#14c8a8;
|
|
914
|
+
--control-selected-foreground:#ffffff;
|
|
915
|
+
--control-selected-dot:#ffffff;
|
|
916
|
+
--primary-mark:#18181b;
|
|
917
|
+
--selection:rgba(20,200,168,0.2196);
|
|
918
|
+
--accent:#17312f;
|
|
919
|
+
--accent-foreground:#14c8a8;
|
|
920
|
+
--sidebar-primary:var(--primary-emphasis);
|
|
921
|
+
--sidebar-primary-foreground:#18181b;
|
|
922
|
+
--sidebar-ring:#14c8a8;
|
|
923
|
+
--sidebar-current-line:rgba(20,200,168,0.75);
|
|
924
|
+
}
|
|
925
|
+
[data-brand="turquoise"][data-theme="light"],[data-brand="turquoise"] [data-theme="light"]{
|
|
926
|
+
--primary:#14c8a8;
|
|
927
|
+
--primary-foreground:#18181b;
|
|
928
|
+
--primary-hover:#4ecfb2;
|
|
929
|
+
--primary-active:#12bb9d;
|
|
930
|
+
--primary-emphasis:#00715e;
|
|
931
|
+
--primary-outline:rgba(20,200,168,0.349);
|
|
932
|
+
--link:var(--foreground);
|
|
933
|
+
--link-hover:var(--foreground);
|
|
934
|
+
--link-mark:rgba(20,200,168,0.451);
|
|
935
|
+
--link-underline:#14c8a8;
|
|
936
|
+
--focus:#00937b;
|
|
937
|
+
--ring:#00937b;
|
|
938
|
+
--control-selected:#14c8a8;
|
|
939
|
+
--control-selected-foreground:#ffffff;
|
|
940
|
+
--control-selected-dot:#ffffff;
|
|
941
|
+
--primary-mark:#18181b;
|
|
942
|
+
--selection:rgba(20,200,168,0.1804);
|
|
943
|
+
--accent:#def7f3;
|
|
944
|
+
--accent-foreground:#00715e;
|
|
945
|
+
--sidebar-primary:var(--primary-emphasis);
|
|
946
|
+
--sidebar-primary-foreground:#18181b;
|
|
947
|
+
--sidebar-ring:#00937b;
|
|
948
|
+
--sidebar-current-line:rgba(20,200,168,0.75);
|
|
949
|
+
}
|
|
950
|
+
[data-brand="emerald"][data-theme="dark"],[data-brand="emerald"] [data-theme="dark"]{
|
|
951
|
+
--primary:#17c964;
|
|
952
|
+
--primary-foreground:#18181b;
|
|
953
|
+
--primary-hover:#4dd078;
|
|
954
|
+
--primary-active:#15bc5d;
|
|
955
|
+
--primary-emphasis:#17c964;
|
|
956
|
+
--primary-outline:rgba(23,201,100,0.349);
|
|
957
|
+
--link:#17c964;
|
|
958
|
+
--link-hover:#17c964;
|
|
959
|
+
--link-mark:rgba(0,0,0,0);
|
|
960
|
+
--link-underline:#17c964;
|
|
961
|
+
--focus:#17c964;
|
|
962
|
+
--ring:#17c964;
|
|
963
|
+
--control-selected:#17c964;
|
|
964
|
+
--control-selected-foreground:#ffffff;
|
|
965
|
+
--control-selected-dot:#ffffff;
|
|
966
|
+
--primary-mark:#18181b;
|
|
967
|
+
--selection:rgba(23,201,100,0.2196);
|
|
968
|
+
--accent:#183125;
|
|
969
|
+
--accent-foreground:#17c964;
|
|
970
|
+
--sidebar-primary:var(--primary-emphasis);
|
|
971
|
+
--sidebar-primary-foreground:#18181b;
|
|
972
|
+
--sidebar-ring:#17c964;
|
|
973
|
+
--sidebar-current-line:rgba(23,201,100,0.75);
|
|
974
|
+
}
|
|
975
|
+
[data-brand="emerald"][data-theme="light"],[data-brand="emerald"] [data-theme="light"]{
|
|
976
|
+
--primary:#17c964;
|
|
977
|
+
--primary-foreground:#18181b;
|
|
978
|
+
--primary-hover:#4dd078;
|
|
979
|
+
--primary-active:#15bc5d;
|
|
980
|
+
--primary-emphasis:#007435;
|
|
981
|
+
--primary-outline:rgba(23,201,100,0.349);
|
|
982
|
+
--link:var(--foreground);
|
|
983
|
+
--link-hover:var(--foreground);
|
|
984
|
+
--link-mark:rgba(23,201,100,0.451);
|
|
985
|
+
--link-underline:#17c964;
|
|
986
|
+
--focus:#009647;
|
|
987
|
+
--ring:#009647;
|
|
988
|
+
--control-selected:#17c964;
|
|
989
|
+
--control-selected-foreground:#ffffff;
|
|
990
|
+
--control-selected-dot:#ffffff;
|
|
991
|
+
--primary-mark:#18181b;
|
|
992
|
+
--selection:rgba(23,201,100,0.1804);
|
|
993
|
+
--accent:#dff7e9;
|
|
994
|
+
--accent-foreground:#007435;
|
|
995
|
+
--sidebar-primary:var(--primary-emphasis);
|
|
996
|
+
--sidebar-primary-foreground:#18181b;
|
|
997
|
+
--sidebar-ring:#009647;
|
|
998
|
+
--sidebar-current-line:rgba(23,201,100,0.75);
|
|
999
|
+
}
|
|
1000
|
+
[data-brand="lime"][data-theme="dark"],[data-brand="lime"] [data-theme="dark"]{
|
|
1001
|
+
--primary:#a3e635;
|
|
1002
|
+
--primary-foreground:#18181b;
|
|
1003
|
+
--primary-hover:#aeea5b;
|
|
1004
|
+
--primary-active:#98d731;
|
|
1005
|
+
--primary-emphasis:#a3e635;
|
|
1006
|
+
--primary-outline:rgba(163,230,53,0.349);
|
|
1007
|
+
--link:#a3e635;
|
|
1008
|
+
--link-hover:#a3e635;
|
|
1009
|
+
--link-mark:rgba(0,0,0,0);
|
|
1010
|
+
--link-underline:#a3e635;
|
|
1011
|
+
--focus:#a3e635;
|
|
1012
|
+
--ring:#a3e635;
|
|
1013
|
+
--control-selected:#a3e635;
|
|
1014
|
+
--control-selected-foreground:#ffffff;
|
|
1015
|
+
--control-selected-dot:#ffffff;
|
|
1016
|
+
--primary-mark:#18181b;
|
|
1017
|
+
--selection:rgba(163,230,53,0.2196);
|
|
1018
|
+
--accent:#2b351f;
|
|
1019
|
+
--accent-foreground:#a3e635;
|
|
1020
|
+
--sidebar-primary:var(--primary-emphasis);
|
|
1021
|
+
--sidebar-primary-foreground:#18181b;
|
|
1022
|
+
--sidebar-ring:#a3e635;
|
|
1023
|
+
--sidebar-current-line:rgba(163,230,53,0.75);
|
|
1024
|
+
}
|
|
1025
|
+
[data-brand="lime"][data-theme="light"],[data-brand="lime"] [data-theme="light"]{
|
|
1026
|
+
--primary:#a3e635;
|
|
1027
|
+
--primary-foreground:#18181b;
|
|
1028
|
+
--primary-hover:#aeea5b;
|
|
1029
|
+
--primary-active:#98d731;
|
|
1030
|
+
--primary-emphasis:#4c7200;
|
|
1031
|
+
--primary-outline:rgba(163,230,53,0.349);
|
|
1032
|
+
--link:var(--foreground);
|
|
1033
|
+
--link-hover:var(--foreground);
|
|
1034
|
+
--link-mark:rgba(163,230,53,0.451);
|
|
1035
|
+
--link-underline:#a3e635;
|
|
1036
|
+
--focus:#619000;
|
|
1037
|
+
--ring:#619000;
|
|
1038
|
+
--control-selected:#a3e635;
|
|
1039
|
+
--control-selected-foreground:#ffffff;
|
|
1040
|
+
--control-selected-dot:#ffffff;
|
|
1041
|
+
--primary-mark:#18181b;
|
|
1042
|
+
--selection:rgba(163,230,53,0.1804);
|
|
1043
|
+
--accent:#f2fce3;
|
|
1044
|
+
--accent-foreground:#4c7200;
|
|
1045
|
+
--sidebar-primary:var(--primary-emphasis);
|
|
1046
|
+
--sidebar-primary-foreground:#18181b;
|
|
1047
|
+
--sidebar-ring:#619000;
|
|
1048
|
+
--sidebar-current-line:rgba(163,230,53,0.75);
|
|
1049
|
+
}
|
|
484
1050
|
[data-density="compact"]{
|
|
485
1051
|
--control-h-xs:1.5rem;
|
|
486
1052
|
--control-h-sm:1.75rem;
|
|
@@ -910,7 +1476,7 @@ img,svg { display:block; }
|
|
|
910
1476
|
o painel do `Tabs`, o `KPI`). É a coluna "On this page" de uma documentação, como a da referência: os
|
|
911
1477
|
itens soltos na página. Tira só a PINTURA — fundo, cor da borda, sombra — e guarda a geometria da
|
|
912
1478
|
flutuante (margens, altura, a mesma borda de 1, agora invisível), então trocar de variante não mexe em
|
|
913
|
-
nada de lugar. O texto continua na escala da lateral: medido nos quatro (Aurea e `
|
|
1479
|
+
nada de lugar. O texto continua na escala da lateral: medido nos quatro (Aurea e `ember`, claro e
|
|
914
1480
|
escuro), o `--sidebar-foreground` é o mesmo `--foreground` da página. */
|
|
915
1481
|
.sidebar-plain { border-color:transparent; background:transparent; box-shadow:none; }
|
|
916
1482
|
/* A COLUNA DA DIREITA do `AppShell` (`aside`): a terceira trilha, da largura da lateral, de 1280 para
|
|
@@ -1155,7 +1721,7 @@ img,svg { display:block; }
|
|
|
1155
1721
|
/* A LATERAL SE PINTA COM OS TOKENS DELA, e isto é conserto de 20/08/2026 — o Victor viu.
|
|
1156
1722
|
Estas duas regras usavam `--secondary` e `--foreground`, que são tokens da PÁGINA. Na Aurea
|
|
1157
1723
|
isso nunca apareceu porque o painel e a página têm a mesma claridade nos dois temas; sob a
|
|
1158
|
-
marca `
|
|
1724
|
+
marca `ember`, onde a lateral é escura mesmo no tema claro (decisão de produto da marca), o
|
|
1159
1725
|
item atual virava uma pílula QUASE BRANCA com texto escuro em cima de um painel escuro. Ele
|
|
1160
1726
|
chamou de "cores invertidas", e é exatamente o que era.
|
|
1161
1727
|
`--sidebar-accent` e `--sidebar-accent-foreground` já eram PUBLICADOS e não tinham um único
|
|
@@ -1164,9 +1730,9 @@ img,svg { display:block; }
|
|
|
1164
1730
|
/* O ITEM ESMAECIDO, como o da referência (ADR-0067, decisão do Victor de 13/10/2026, vendo os dois rodando:
|
|
1165
1731
|
"B, igual ao dela"): o item que não é o atual fica cinza, e o título de grupo e o item atual ficam fortes;
|
|
1166
1732
|
passando o mouse, o item acende. O cinza sai da ESCALA DA LATERAL (o texto dela, esmaecido), e não do
|
|
1167
|
-
`--muted-foreground` da página — sob a marca `
|
|
1733
|
+
`--muted-foreground` da página — sob a marca `ember` a lateral é escura e a página não (a lição de
|
|
1168
1734
|
20/08/2026, logo abaixo). Medido contra o fundo da lateral (13/10/2026): 7,6:1 no escuro e 5,4:1 no
|
|
1169
|
-
claro; na marca `
|
|
1735
|
+
claro; na marca `ember`, 7,8:1 e 5,6:1 — o branco de antes era 14,5:1. */
|
|
1170
1736
|
.sidebar-item:not([aria-current]) { color:color-mix(in oklab, var(--sidebar-foreground) 68%, transparent); }
|
|
1171
1737
|
@media (hover:hover) and (pointer:fine) { .sidebar-item:hover { background:var(--sidebar-accent); } .sidebar-item:not([aria-current]):hover { color:var(--sidebar-foreground); } }
|
|
1172
1738
|
/* A-05 (24/09/2026), decisão do Victor: o item atual da lateral passa a usar a MARCA DA CASA para
|
|
@@ -1174,7 +1740,7 @@ img,svg { display:block; }
|
|
|
1174
1740
|
`SegmentedControl`, o `Button variant="nav"` e a navegação do catálogo (`.doc-nav`) já usavam.
|
|
1175
1741
|
Era o único de fora: pílula cinza com texto branco, e um app copiou a regra da casa à mão.
|
|
1176
1742
|
As cores saem da escala DA LATERAL (`--sidebar-accent`, `--sidebar-primary`), exatamente como o
|
|
1177
|
-
`.doc-nav a.active` — não da página. Foi a lição de 20/08/2026 sob a marca `
|
|
1743
|
+
`.doc-nav a.active` — não da página. Foi a lição de 20/08/2026 sob a marca `ember`: com
|
|
1178
1744
|
`--secondary`/`--primary` da página, a lateral escura desenhava as cores invertidas.
|
|
1179
1745
|
O FIO não mora aqui: a lateral entrou na lista da regra da casa (`.is-selected::after`, mais
|
|
1180
1746
|
abaixo), com o do `.doc-nav`. Copiar a regra faria duas cópias do mesmo fio divergirem. */
|
|
@@ -1374,7 +1940,7 @@ img,svg { display:block; }
|
|
|
1374
1940
|
sistema faziam a pilula crescer para baixo e a barriga dela ficava atras dos botoes. A borda de
|
|
1375
1941
|
baixo agora fica `--space-4` acima da area do sistema, em qualquer aparelho.
|
|
1376
1942
|
A variante `edge` reverte isto mais abaixo, e la o recheio e' o certo. */
|
|
1377
|
-
.bottom-nav { --bottomnav-ring:
|
|
1943
|
+
.bottom-nav { --bottomnav-ring:calc(var(--icon-lg) + var(--space-1)); --bottomnav-surface:var(--card); position:sticky; bottom:0; z-index:var(--z-sticky); display:flex; gap:var(--space-1); margin:var(--space-4); margin-bottom:calc(var(--space-4) + env(safe-area-inset-bottom)); padding:var(--space-1); border:1px solid transparent; border-radius:var(--radius-control); background:var(--card); color:var(--card-foreground); box-shadow:var(--shadow-md); }
|
|
1378
1944
|
/* `--control-h-lg` e não `--control-h-md`: alvo de toque. O md dá 36px em comfortable e
|
|
1379
1945
|
o alvo confortável de dedo é maior — com o recuo, o item renderiza acima de 44px. */
|
|
1380
1946
|
.bottom-nav-item { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-05); min-height:var(--control-h-lg); padding:var(--space-1); border:0; border-radius:var(--radius-control); background:transparent; color:var(--muted-foreground); font:inherit; font-size:var(--text-xs); text-align:center; text-decoration:none; cursor:pointer; }
|
|
@@ -1410,7 +1976,7 @@ img,svg { display:block; }
|
|
|
1410
1976
|
O ALVO DE TOQUE não é este número e continua sendo o `min-height` do item: `--control-h-lg`
|
|
1411
1977
|
entrega 42px em comfortable e 48 em spacious, contra os 44pt mínimos das diretrizes do iOS e
|
|
1412
1978
|
os 48dp da mesma referência. A moldura é a caixa do DESENHO; o alvo é o item inteiro. */
|
|
1413
|
-
.bottom-nav-mark { position:relative; flex:none; display:inline-flex; align-items:center; justify-content:center; width:var(--
|
|
1979
|
+
.bottom-nav-mark { position:relative; flex:none; display:inline-flex; align-items:center; justify-content:center; width:var(--space-8); height:var(--bottomnav-ring); border-radius:var(--radius-control); }
|
|
1414
1980
|
/* A BARRA MAIS BAIXA — pedido do Victor, 30/09/2026, aprovado pela imagem: *"ele é muito largo, e
|
|
1415
1981
|
é assim por conta da distância entre o ícone em cima e o texto embaixo"*. A moldura de 32 só
|
|
1416
1982
|
serve aos quatro indicadores REDONDOS, em que ela vira o círculo. Nos outros três ela era folga
|
|
@@ -1421,7 +1987,14 @@ img,svg { display:block; }
|
|
|
1421
1987
|
nativo (`navigation.tsx`). ~~A folga de 4dp da referência entre o indicador e o rótulo~~ vale só para
|
|
1422
1988
|
os redondos agora. */
|
|
1423
1989
|
.bottom-nav-mark { height:var(--icon-lg); }
|
|
1424
|
-
|
|
1990
|
+
/* A BARRA NA MESMA ALTURA EM TODOS OS FORMATOS — pedido do Victor, 27/10/2026 (*"todos esses tem a altura maior que o
|
|
1991
|
+
restante ... quero todos da mesma altura do none, subtle, pill, expand"*), e a forma escolhida na bancada, entre duas
|
|
1992
|
+
rodando: *"B: o círculo e a cápsula com 28"* (ADR-0084). O círculo e a cápsula tinham 32 em volta do ícone de 24, e a
|
|
1993
|
+
barra media 62 (o `circle-bold`, 58) contra 54 nos outros. Agora são 28 (`--bottomnav-ring`), e passam 2 por fora da
|
|
1994
|
+
caixa em cima e embaixo (a margem negativa): o item fica com a altura do ícone, como nos outros. A largura das molduras
|
|
1995
|
+
que não são redondas continua 32 (`--space-8`): é ela que dá o canto ao contador. Igual no `navigation.tsx`. */
|
|
1996
|
+
.bottom-nav-ind-circle .bottom-nav-mark, .bottom-nav-ind-circle-raised .bottom-nav-mark, .bottom-nav-ind-circle-outline .bottom-nav-mark {
|
|
1997
|
+
width:var(--bottomnav-ring); height:var(--bottomnav-ring); margin-block:calc((var(--icon-lg) - var(--bottomnav-ring)) / 2); }
|
|
1425
1998
|
/* `inline-flex` no envoltório: como `<span>` solto ele é caixa de LINHA, e mede a entrelinha do
|
|
1426
1999
|
item (18px) em vez do contador que carrega (16px). A diferença não aparece na tela — aparece
|
|
1427
2000
|
na medição, e medição errada é o que faz a razão parecer 0,75 quando é 0,67. */
|
|
@@ -1436,7 +2009,11 @@ img,svg { display:block; }
|
|
|
1436
2009
|
decoração do item atual, é alerta.
|
|
1437
2010
|
⚠ Ponto não tem nome acessível — não há o que ler. Quem usa ponto põe o sentido no RÓTULO do
|
|
1438
2011
|
item (`label: <>Updates <span className="sr-only">(new)</span></>`). Está na ficha. */
|
|
1439
|
-
|
|
2012
|
+
/* O CONTADOR E O PONTO SÃO VERMELHOS, como no nativo (o Victor, 28/10/2026: "Vermelho, igual"; "Vermelho sempre"; "Vermelho,
|
|
2013
|
+
como no nativo"). O ponto é o `--destructive`, o fundo do selo cheio de perigo — o que o `BottomNav` do nativo desenha. No
|
|
2014
|
+
item atual, a peça só inverte o selo da cor da MARCA (`.badge-primary`), que sumiria na cápsula da marca; o vermelho fica
|
|
2015
|
+
vermelho. Na barra inteira da marca (`bar-*`), o ponto continua na tinta: o vermelho no amarelo não chega a 3:1. */
|
|
2016
|
+
.bottom-nav-badge:empty { width:var(--space-2); height:var(--space-2); border-radius:var(--radius-full); background:var(--destructive); }
|
|
1440
2017
|
/* SEM REALCE DE PASSAR O MOUSE, e isso é decisão do Victor em 20/08/2026: *"essa bola cinza
|
|
1441
2018
|
que aparece quando mouse passar em cima pode retirar, é um recurso irrelevante no celular"*.
|
|
1442
2019
|
Ele tem razão pelo escopo do componente: esta barra é o chrome de aplicativo de TELEFONE, e o
|
|
@@ -1545,7 +2122,9 @@ img,svg { display:block; }
|
|
|
1545
2122
|
em todos os itens, e o recheio passa do item para ele: o item mede o mesmo escolhido ou não, e a
|
|
1546
2123
|
altura da barra não muda. O mesmo no `navigation.tsx`. */
|
|
1547
2124
|
.bottom-nav.bottom-nav-ind-circle-bold .bottom-nav-item { padding:0; }
|
|
1548
|
-
|
|
2125
|
+
/* O disco perdeu a altura mínima e o recheio de cima e de baixo caiu para `--space-05` (27/10/2026, a barra na mesma
|
|
2126
|
+
altura — acima): 56 × 44, e a barra fica em 54 como as outras. Era 56 × 48. */
|
|
2127
|
+
.bottom-nav-disc { display:flex; flex-direction:column; align-items:center; justify-content:center; inline-size:var(--bottomnav-bold,3.5rem); max-inline-size:100%; padding:var(--space-05) var(--space-1); border-radius:var(--radius-full); }
|
|
1549
2128
|
.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] { color:var(--primary-mark); }
|
|
1550
2129
|
.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .bottom-nav-disc { background:var(--primary); }
|
|
1551
2130
|
.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .icon { opacity:1; }
|
|
@@ -1554,7 +2133,7 @@ img,svg { display:block; }
|
|
|
1554
2133
|
do Victor mostram. O gate de contraste reprovou no tema CLARO: sobre o amarelo sólido, nem o
|
|
1555
2134
|
fundo do contador nem o anel branco chegam a 3:1. No escuro passava, e é assim que este defeito
|
|
1556
2135
|
se esconde. Fio fino não substitui contraste quando as duas cores são claras. */
|
|
1557
|
-
.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .badge { background:var(--primary-mark); color:var(--primary); border-color:transparent; }
|
|
2136
|
+
.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .badge-primary { background:var(--primary-mark); color:var(--primary); border-color:transparent; }
|
|
1558
2137
|
.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .bottom-nav-badge { color:var(--primary-mark); }
|
|
1559
2138
|
/* ── CÁPSULA (`capsule`) — a "A" da bancada do Victor, 03/10/2026: o modelo de uma das referências ─
|
|
1560
2139
|
A moldura do ícone vira a cápsula de 56 × 32 do indicador ativo dessa referência
|
|
@@ -1564,11 +2143,12 @@ img,svg { display:block; }
|
|
|
1564
2143
|
O contador fica no canto do ÍCONE, e não da cápsula: sem a cápsula pintada ele ficaria solto,
|
|
1565
2144
|
longe do sino. São os (56 − 32) / 2 a mais para dentro. E ele INVERTE sobre o amarelo, pela
|
|
1566
2145
|
mesma razão medida do `circle-bold`, logo acima. */
|
|
1567
|
-
|
|
2146
|
+
/* 56 × 28 desde 27/10/2026 (a barra na mesma altura, acima): como o círculo, ela passa 2 por fora da caixa. */
|
|
2147
|
+
.bottom-nav-ind-capsule .bottom-nav-mark { width:var(--bottomnav-bold,3.5rem); height:var(--bottomnav-ring); margin-block:calc((var(--icon-lg) - var(--bottomnav-ring)) / 2); border-radius:var(--radius-full); }
|
|
1568
2148
|
.bottom-nav-ind-capsule .bottom-nav-badge { inset-inline-end:calc((var(--bottomnav-bold,3.5rem) - var(--bottomnav-ring)) / 2 - var(--space-05)); }
|
|
1569
2149
|
.bottom-nav-ind-capsule .bottom-nav-item[aria-current] .bottom-nav-mark { background:var(--primary); color:var(--primary-mark); }
|
|
1570
2150
|
.bottom-nav-ind-capsule .bottom-nav-item[aria-current] .icon { opacity:1; }
|
|
1571
|
-
.bottom-nav-ind-capsule .bottom-nav-item[aria-current] .badge { background:var(--primary-mark); color:var(--primary); border-color:transparent; }
|
|
2151
|
+
.bottom-nav-ind-capsule .bottom-nav-item[aria-current] .badge-primary { background:var(--primary-mark); color:var(--primary); border-color:transparent; }
|
|
1572
2152
|
/* No `content`, o recheio de sempre (`--space-1`) e não o `--space-3`: com ele cada item teria 80. */
|
|
1573
2153
|
.bottom-nav-content:not(.bottom-nav-edge).bottom-nav-ind-capsule .bottom-nav-item { padding-inline:var(--space-1); }
|
|
1574
2154
|
/* ── EXPANDE (`expand`) — a "C" da bancada do Victor, 03/10/2026 ───────────────────────────────
|
|
@@ -1584,7 +2164,7 @@ img,svg { display:block; }
|
|
|
1584
2164
|
.bottom-nav-ind-expand .bottom-nav-label { font-size:var(--text-sm); }
|
|
1585
2165
|
.bottom-nav-ind-expand .bottom-nav-item[aria-current] { flex:none; inline-size:calc(var(--icon-lg) + var(--space-2) + var(--space-20) + 2 * var(--space-3)); padding-inline:var(--space-3); background:var(--primary); color:var(--primary-mark); }
|
|
1586
2166
|
.bottom-nav-ind-expand .bottom-nav-item[aria-current] .icon { opacity:1; }
|
|
1587
|
-
.bottom-nav-ind-expand .bottom-nav-item[aria-current] .badge { background:var(--primary-mark); color:var(--primary); border-color:transparent; }
|
|
2167
|
+
.bottom-nav-ind-expand .bottom-nav-item[aria-current] .badge-primary { background:var(--primary-mark); color:var(--primary); border-color:transparent; }
|
|
1588
2168
|
.bottom-nav-content:not(.bottom-nav-edge).bottom-nav-ind-expand .bottom-nav-item:not([aria-current]) { flex:none; inline-size:var(--target-min); padding-inline:0; }
|
|
1589
2169
|
|
|
1590
2170
|
/* ── A LINHA DE LISTA TOCÁVEL (§4.3 do CONSUMIDOR-1) ──────────────────────────
|
|
@@ -1677,9 +2257,9 @@ img,svg { display:block; }
|
|
|
1677
2257
|
quatro níveis alternados (escuro > claro > escuro > claro) não são cobertos. Quem cobra:
|
|
1678
2258
|
`tests/visual/tema-na-secao.spec.ts`, e o `tema-na-secao.test.tsx` reprova regra nova sem a
|
|
1679
2259
|
guarda. */
|
|
1680
|
-
/* A mistura de 45% ficou SÓ na `
|
|
2260
|
+
/* A mistura de 45% ficou SÓ na `ember` (ADR-0083, 26/10/2026): na Aurea, a letra de destaque do claro é o grafite —
|
|
1681
2261
|
a regra fica na seção "A paleta da 1.0", no fim da folha. */
|
|
1682
|
-
[data-theme="light"] .eyebrow:where([data-brand="
|
|
2262
|
+
[data-theme="light"] .eyebrow:where([data-brand="ember"],[data-brand="ember"] *):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { color:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
|
|
1683
2263
|
.demo { min-width:0; padding:var(--card-pad); border:1px solid transparent; border-radius:var(--radius-card); background:var(--card); color:var(--card-foreground); box-shadow:none; }
|
|
1684
2264
|
|
|
1685
2265
|
/* ========================================================================== */
|
|
@@ -1779,9 +2359,9 @@ img,svg { display:block; }
|
|
|
1779
2359
|
.btn-danger-ghost:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:color-mix(in oklab, var(--destructive) 14%, transparent); }
|
|
1780
2360
|
[data-theme="light"] .btn-danger-outline:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-danger-ghost:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-link-danger:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:var(--danger-400); }
|
|
1781
2361
|
/* A LETRA DA MARCA nos botões sem caixa é a de DESTAQUE (ADR-0081, 24/10/2026 — a ADR-0076 aplicada a eles): o azul no
|
|
1782
|
-
claro, o amarelo no escuro, e na `
|
|
2362
|
+
claro, o amarelo no escuro, e na `ember` o laranja escuro dela. De 21/08 até aqui, o claro levava a mistura marrom
|
|
1783
2363
|
(a marca a 45% no texto): passava sobre a página e caía para 4,22 dentro da barra de ferramentas; o azul dá 4,69. O
|
|
1784
|
-
`--primary-outline` não serve de letra: na `
|
|
2364
|
+
`--primary-outline` não serve de letra: na `ember` ele é translúcido (é do contorno). */
|
|
1785
2365
|
/* LINK: aparência de texto, sem cápsula e sem altura de controle — o sublinhado é o que diz
|
|
1786
2366
|
que é clicável, então ele existe desde o repouso (revelar no hover esconde a affordance).
|
|
1787
2367
|
Três tons: neutro, marca e destrutivo. No claro a marca aprofunda, senão não passa o AA. */
|
|
@@ -1963,8 +2543,11 @@ img,svg { display:block; }
|
|
|
1963
2543
|
.btn-group-detached,.toggle-group-detached { flex-wrap:wrap; gap:var(--space-1); }
|
|
1964
2544
|
.btn-group-full,.toggle-group-full { display:flex; inline-size:100%; }
|
|
1965
2545
|
:is(.btn-group-full,.toggle-group-full) > .btn { flex:1 1 0%; min-inline-size:0; }
|
|
1966
|
-
/* Toolbar: contêiner de controles; o roving tabindex vem do Base UI.
|
|
1967
|
-
|
|
2546
|
+
/* Toolbar: contêiner de controles; o roving tabindex vem do Base UI.
|
|
2547
|
+
AS MEDIDAS DA REFERÊNCIA (o Victor, 28/10/2026, olhando as duas lado a lado: "Medidas da referência"): a barra "colada"
|
|
2548
|
+
dela tem 4 por dentro e 8 entre os botões. Eram 7 (6 de recheio + 1 da borda transparente) e 6, escritos à mão. O
|
|
2549
|
+
recheio desconta a borda, que o "sem linha" deixa transparente mas que ainda ocupa espaço: 4 − 1 = 3. */
|
|
2550
|
+
.toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); padding:calc(var(--space-1) - var(--border-width)); border:var(--border-width) solid transparent; border-radius:var(--radius-control); background:var(--secondary); }
|
|
1968
2551
|
/* Vertical sai da pílula: --radius-control (999px) clampa em 50% da menor
|
|
1969
2552
|
dimensão e vira um oval num container alto. */
|
|
1970
2553
|
.toolbar[data-orientation="vertical"] { flex-direction:column; align-items:stretch; border-radius:var(--radius-lg); }
|
|
@@ -2495,8 +3078,8 @@ img,svg { display:block; }
|
|
|
2495
3078
|
grita mais que o próprio rótulo. No tema CLARO o amarelo puro como texto dá 1.6:1, longe
|
|
2496
3079
|
dos 4.5:1 do AA, então o rótulo aprofunda com --foreground e segue âmbar. */
|
|
2497
3080
|
/* O BOTÃO LIGADO saiu desta linguagem na Aurea (ADR-0083, 26/10/2026): amarelo cheio, a letra do botão primário e
|
|
2498
|
-
sem fio — a regra fica na seção "A paleta da 1.0", no fim da folha. Aqui ele continua só na `
|
|
2499
|
-
.is-selected,.btn-nav[aria-current]:not([aria-current="false"]),.btn[aria-pressed="true"]:where([data-brand="
|
|
3081
|
+
sem fio — a regra fica na seção "A paleta da 1.0", no fim da folha. Aqui ele continua só na `ember`. */
|
|
3082
|
+
.is-selected,.btn-nav[aria-current]:not([aria-current="false"]),.btn[aria-pressed="true"]:where([data-brand="ember"],[data-brand="ember"] *),
|
|
2500
3083
|
.segmented :is(button,a).active { --btn-bg:var(--secondary); --btn-fg:var(--primary); position:relative; background:var(--secondary); color:var(--primary); }
|
|
2501
3084
|
/* A CÁPSULA ELEVADA que a regra acima promete, e que no trilho não se via (ADR-0059, 08/10/2026):
|
|
2502
3085
|
o segmento aceso e a aba escolhida vivem sobre --muted, e --secondary dava 1:1 contra ele no
|
|
@@ -2509,10 +3092,10 @@ img,svg { display:block; }
|
|
|
2509
3092
|
da marca; o da Aurea é o "clarinho" (o amarelo a 10%, a receita do `.badge-primary` que o Victor
|
|
2510
3093
|
escolheu para a página atual da paginação), aqui sobre o cinza, para o grupo colado continuar uma
|
|
2511
3094
|
cápsula só. A letra da marca e o fio continuam os do "selecionado". */
|
|
2512
|
-
.btn.toggle[data-pressed]:where([data-brand="
|
|
2513
|
-
.btn.toggle[data-pressed]:hover:not(:disabled):not([aria-disabled="true"]):where([data-brand="
|
|
3095
|
+
.btn.toggle[data-pressed]:where([data-brand="ember"],[data-brand="ember"] *) { --btn-bg:color-mix(in oklab, var(--primary) 10%, var(--secondary)); background:var(--btn-bg); }
|
|
3096
|
+
.btn.toggle[data-pressed]:hover:not(:disabled):not([aria-disabled="true"]):where([data-brand="ember"],[data-brand="ember"] *) { --btn-bg:color-mix(in oklab, var(--primary) 10%, var(--secondary-hover)); }
|
|
2514
3097
|
/* O ATIVO DA NAV DA LATERAL sai da escala DELA, e não da página (20/08/2026, o Victor viu sob a
|
|
2515
|
-
marca `
|
|
3098
|
+
marca `ember`). Ele dividia esta regra com o `.segmented`, que vive no conteúdo — e `--secondary`
|
|
2516
3099
|
é quase branco no tema claro. Numa lateral escura isso desenhava uma pílula branca com texto
|
|
2517
3100
|
escuro: as cores invertidas que ele apontou.
|
|
2518
3101
|
`--sidebar-accent` e `--sidebar-primary` já eram publicados e não tinham uso no core. O segundo
|
|
@@ -2523,7 +3106,7 @@ img,svg { display:block; }
|
|
|
2523
3106
|
Os links da lateral do catálogo não têm atributo `class`, então `[data-theme="light"]
|
|
2524
3107
|
a:not([class])` — a regra que existe para LINK DE PROSA — casa com eles. Ela pesa (0,2,1) e a
|
|
2525
3108
|
`.doc-nav a` pesa (0,1,1): a regra de prosa ganhava e pintava o item com
|
|
2526
|
-
`color-mix(--primary, --foreground)`. Sob a marca `
|
|
3109
|
+
`color-mix(--primary, --foreground)`. Sob a marca `ember` isso deu MARROM ESCURO
|
|
2527
3110
|
(`oklab(0.44 0.059 0.051)`) sobre um painel escuro — ilegível, e foi o que ele viu.
|
|
2528
3111
|
Mesmo peso, e depois na folha: quem manda no que está DENTRO da lateral é a lateral.
|
|
2529
3112
|
`:not(.active)` NÃO é enfeite — a primeira versão desta linha não tinha, pesava igual à regra do
|
|
@@ -2531,7 +3114,7 @@ img,svg { display:block; }
|
|
|
2531
3114
|
saíram com a mesma cor. Com o `:not` ela pesa (0,3,1) e só alcança quem está em repouso. */
|
|
2532
3115
|
[data-theme="light"] .doc-nav a:not(.active):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { color:color-mix(in oklab, var(--sidebar-foreground) 72%, transparent); }
|
|
2533
3116
|
.is-selected::after,.btn-nav[aria-current]:not([aria-current="false"])::after,
|
|
2534
|
-
.btn[aria-pressed="true"]:not(.btn-icon):where([data-brand="
|
|
3117
|
+
.btn[aria-pressed="true"]:not(.btn-icon):where([data-brand="ember"],[data-brand="ember"] *)::after,.segmented :is(button,a).active::after,.tabs-secondary .tab[data-active]::after,
|
|
2535
3118
|
.doc-nav a.active::after,.sidebar-item[aria-current]::after { content:""; position:absolute; inset-inline:15px; bottom:0; height:2px; border-radius:var(--radius-full); background:color-mix(in oklab, var(--primary) 75%, transparent); }
|
|
2536
3119
|
/* e o fio do ativo da lateral segue a marca DELA, pelo mesmo motivo da regra de cor acima. */
|
|
2537
3120
|
.doc-nav a.active::after,.sidebar-item[aria-current]::after { background:var(--sidebar-current-line, color-mix(in oklab, var(--sidebar-primary) 75%, transparent)); }
|
|
@@ -2539,18 +3122,18 @@ img,svg { display:block; }
|
|
|
2539
3122
|
/* ADR-0076 (20/10/2026), o Victor olhando a bancada: "não quero ele azul, não pode ser na cor do botão?". No claro da Aurea
|
|
2540
3123
|
padrão, o item atual da lateral é o botão primário: o fundo amarelo e a letra cinza-escura dele (8,13:1). O fundo já
|
|
2541
3124
|
marca o estado, e o fio de baixo some (`--sidebar-current-line` transparente: regra no `::after` não aceitaria a guarda
|
|
2542
|
-
de tema no fim). Só sem `data-brand` (a `
|
|
3125
|
+
de tema no fim). Só sem `data-brand` (a `ember` tem a lateral dela) e só no claro (no escuro, a letra amarela continua).
|
|
2543
3126
|
Sobre o amarelo, a letra de destaque de DENTRO do item (o selo primário de contagem, um ícone de destaque) é a tinta do
|
|
2544
3127
|
botão: o azul sobre o amarelo mede 3,49:1 — o axe da varredura achou, no "12" do exemplo da `Sidebar`. */
|
|
2545
3128
|
[data-theme="light"] :is(.sidebar-item[aria-current],.doc-nav a.active):not(:where([data-brand],[data-brand] *,.sidebar[class*="sidebar-indicator-"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --sidebar-current-line:transparent; --primary-emphasis:var(--primary-foreground); --sidebar-primary:var(--primary-foreground); background:var(--primary); color:var(--primary-foreground); }
|
|
2546
|
-
/* A mistura de 45% (o "marrom") ficou SÓ na `
|
|
3129
|
+
/* A mistura de 45% (o "marrom") ficou SÓ na `ember` (ADR-0083, 26/10/2026). Na Aurea, o escolhido do claro tem a letra
|
|
2547
3130
|
grafite, e o botão ligado é amarelo — as duas regras ficam na seção "A paleta da 1.0", no fim da folha. */
|
|
2548
|
-
[data-theme="light"] .is-selected:where([data-brand="
|
|
2549
|
-
[data-theme="light"] .btn[aria-pressed="true"]:where([data-brand="
|
|
3131
|
+
[data-theme="light"] .is-selected:where([data-brand="ember"],[data-brand="ember"] *):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-nav[aria-current]:not([aria-current="false"]):where([data-brand="ember"],[data-brand="ember"] *):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
|
|
3132
|
+
[data-theme="light"] .btn[aria-pressed="true"]:where([data-brand="ember"],[data-brand="ember"] *):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .segmented :is(button,a).active:where([data-brand="ember"],[data-brand="ember"] *):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *)
|
|
2550
3133
|
{ --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); color:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
|
|
2551
3134
|
/* A NAV DA LATERAL SAIU DESTA LISTA em 20/08/2026. O ajuste existe porque o amarelo puro não se lê
|
|
2552
3135
|
sobre o claro — mas ele mistura o `--foreground` da PÁGINA, e o item da lateral não está sobre a
|
|
2553
|
-
página: está sobre `--sidebar-accent`. Sob a marca `
|
|
3136
|
+
página: está sobre `--sidebar-accent`. Sob a marca `ember`, onde esse fundo é escuro no tema
|
|
2554
3137
|
claro, a mistura escurecia o texto contra um fundo escuro. Quem manda ali é `--sidebar-primary`,
|
|
2555
3138
|
que cada marca já publica com a claridade certa para o painel dela. */
|
|
2556
3139
|
|
|
@@ -2578,8 +3161,11 @@ img,svg { display:block; }
|
|
|
2578
3161
|
.badge-primary { --badge-accent:var(--primary-emphasis); --badge-on:var(--primary-foreground); color:var(--primary-emphasis); border-color:transparent; background:color-mix(in srgb,var(--primary) 10%,transparent); }
|
|
2579
3162
|
/* ADR-0076 (20/10/2026): na Aurea padrão a letra de destaque do claro é o AZUL, e o cheio continua o AMARELO — o fundo do
|
|
2580
3163
|
selo cheio é o primário, e não o acento (com o acento, sairia a letra cinza no azul, 1,99:1). Só sem `data-brand`, como o
|
|
2581
|
-
contorno lá embaixo: na `
|
|
2582
|
-
|
|
3164
|
+
contorno lá embaixo: na `ember` do claro o primário com a letra dela mede 3,08:1, e o acento dela já é o fundo certo. */
|
|
3165
|
+
/* Passo C (28/10/2026): "sem `data-brand`" queria dizer "fora da `ember`" — ela era a única marca. Com as 11 marcas novas, o
|
|
3166
|
+
selo cheio delas saía no acento (a letra escura no grafite, 1,12:1 na Aurea Sun do claro; a branca no azul claro, 2,25:1
|
|
3167
|
+
na Cobalt do escuro). O selo cheio é o botão cheio em toda marca; só a Ember fica como era. */
|
|
3168
|
+
.badge-primary:not(:where([data-brand="ember"],[data-brand="ember"] *)) { --badge-fill:var(--primary); }
|
|
2583
3169
|
/* TAMANHOS. O md é a base (24px), que não muda — é o que as 103 fichas já usam. */
|
|
2584
3170
|
.badge-xs { min-height:var(--space-4); padding:0 var(--space-1); border-width:0; }
|
|
2585
3171
|
.badge-sm { min-height:var(--space-5); padding:0 calc(var(--space-1) + var(--space-05) - var(--border-width)); }
|
|
@@ -3204,11 +3790,11 @@ button.tag-main { cursor:pointer; }
|
|
|
3204
3790
|
alinham por construção em vez de por número copiado. Saem junto os 24px de recuo e os 7px
|
|
3205
3791
|
do trilho — dois px crus a menos na catraca do check 12. */
|
|
3206
3792
|
.timeline { position:relative; display:flex; flex-direction:column; gap:var(--space-5); margin:0; padding:0; list-style:none; }
|
|
3207
|
-
/* O TRILHO POR BAIXO DOS PONTOS (ADR-0083, 27/10/2026, em todas as marcas — o Victor: o defeito "não tinha só na
|
|
3793
|
+
/* O TRILHO POR BAIXO DOS PONTOS (ADR-0083, 27/10/2026, em todas as marcas — o Victor: o defeito "não tinha só na ember, no
|
|
3208
3794
|
tema padrão da Aurea também"). Era um `::before` da lista inteira, posicionado, e o ponto não: o navegador pinta o
|
|
3209
3795
|
posicionado por cima, e a linha passava por CIMA da bolinha; e ia até o fim da lista, sobrando depois do último ponto.
|
|
3210
3796
|
Agora cada item desenha o trecho até o ponto seguinte, centrado no ponto, e o ponto fica por cima. A cor é a da linha
|
|
3211
|
-
(`--border`); a paleta da 1.0 a troca por `--input`, mais adiante, fora da
|
|
3797
|
+
(`--border`); a paleta da 1.0 a troca por `--input`, mais adiante, fora da ember. */
|
|
3212
3798
|
.timeline > li { position:relative; display:flex; align-items:flex-start; gap:var(--space-3); }
|
|
3213
3799
|
.timeline > li:not(:last-child)::before { content:""; position:absolute; inset-inline-start:calc(var(--space-3) / 2 - var(--border-width) / 2);
|
|
3214
3800
|
inset-block-start:calc(var(--space-1) + var(--space-3)); inset-block-end:calc(-1 * (var(--space-5) + var(--space-1)));
|
|
@@ -4926,9 +5512,9 @@ button.graph-node-body { cursor:pointer; }
|
|
|
4926
5512
|
/* Menos o primário da Aurea (ADR-0073, decisão do Victor de 18/10/2026, "A"): a letra é o próprio acento (o amarelo no
|
|
4927
5513
|
escuro; o azul no claro, desde a ADR-0076), a mesma do selo suave e do botão de contorno da marca — misturado ao texto,
|
|
4928
5514
|
o amarelo virava mostarda (2,36:1) só nesta peça. A
|
|
4929
|
-
referência principal usa a mesma letra no suave e no contorno. Só sem `data-brand`: na `
|
|
5515
|
+
referência principal usa a mesma letra no suave e no contorno. Só sem `data-brand`: na `ember` do claro, sem a
|
|
4930
5516
|
mistura, a letra cairia de 5,56 para 4,42:1. */
|
|
4931
|
-
.badge-primary.badge-outline:not(:where([data-brand],[data-brand] *)) { color:var(--badge-accent); }
|
|
5517
|
+
.badge-primary.badge-outline:not(:where([data-brand="ember"],[data-brand="ember"] *)) { color:var(--badge-accent); }
|
|
4932
5518
|
/* O registro ganhou o fundo dos campos; o nível `info` (o azul) caía a 4,08:1 sobre ele no claro. A mesma letra 20% para o texto. */
|
|
4933
5519
|
.log-stream .log-level.info { color:color-mix(in oklab,var(--info-400) 80%,var(--foreground)); }
|
|
4934
5520
|
.step:not(.step-done,.step-active,.step-error,.done,.active) .step-dot { background-color:var(--fill-3-solid); }
|
|
@@ -4945,25 +5531,34 @@ button.graph-node-body { cursor:pointer; }
|
|
|
4945
5531
|
GRAFITE no claro (o amarelo vira fundo, traço ou indicador, nunca letra), o link com marca-texto, os campos brancos,
|
|
4946
5532
|
as marcas brancas dentro dos controles, o botão ligado amarelo e a linha do tempo consertada. Os TOKENS mudaram na
|
|
4947
5533
|
fonte (`aurea.tokens.json`); aqui ficam as REGRAS que mudam junto.
|
|
4948
|
-
A `
|
|
4949
|
-
regra desta seção leva `:where(:not([data-brand="
|
|
4950
|
-
ela sai igual: `tests/visual/
|
|
5534
|
+
A `ember` fica 100% como é hoje (decisão do Victor, 26/10/2026): os tokens dela foram congelados na fonte, e toda
|
|
5535
|
+
regra desta seção leva `:where(:not([data-brand="ember"],[data-brand="ember"] *))`, de força zero. Quem prova que
|
|
5536
|
+
ela sai igual: `tests/visual/ember-congelada.spec.ts`. */
|
|
4951
5537
|
|
|
4952
5538
|
/* O ESCOLHIDO do claro tem a letra grafite (era a mistura de 45%, que dava marrom): a aba, o segmento aceso, o item de
|
|
4953
5539
|
navegação atual e o rótulo `.eyebrow`. O fio amarelo de baixo continua. No escuro, a letra continua o amarelo. */
|
|
4954
|
-
[data-theme="light"] .is-selected:where(:not([data-brand="
|
|
4955
|
-
[data-theme="light"] .eyebrow:where(:not([data-brand="
|
|
4956
|
-
[data-theme="light"] .btn-nav[aria-current]:not([aria-current="false"]):where(:not([data-brand="
|
|
4957
|
-
[data-theme="light"] .segmented :is(button,a).active:where(:not([data-brand="
|
|
5540
|
+
[data-theme="light"] .is-selected:where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
|
|
5541
|
+
[data-theme="light"] .eyebrow:where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
|
|
5542
|
+
[data-theme="light"] .btn-nav[aria-current]:not([aria-current="false"]):where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
|
|
5543
|
+
[data-theme="light"] .segmented :is(button,a).active:where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *)
|
|
4958
5544
|
{ --btn-fg:var(--foreground); color:var(--foreground); }
|
|
5545
|
+
/* NO ESCURO, a letra do escolhido é o `--primary-emphasis`, a versão do primário feita para ser letra (a regra 2.1b da
|
|
5546
|
+
proposta; passo C, 28/10/2026). Na Aurea Gold ele é o próprio amarelo, e nada muda. Nas marcas escuras, o primário puro
|
|
5547
|
+
como letra media 1,56:1 (cobalt) a 4,3:1 (cyan) — o axe achou no banco das marcas, e também no `.eyebrow`, que a proposta
|
|
5548
|
+
não listava (2,98 a 4,29:1). Quem cobra: `tests/visual/marcas-passo-c.spec.ts`. */
|
|
5549
|
+
[data-theme="dark"] .is-selected:where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="light"] *),[data-theme="light"] [data-theme="dark"] *),
|
|
5550
|
+
[data-theme="dark"] .eyebrow:where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="light"] *),[data-theme="light"] [data-theme="dark"] *),
|
|
5551
|
+
[data-theme="dark"] .btn-nav[aria-current]:not([aria-current="false"]):where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="light"] *),[data-theme="light"] [data-theme="dark"] *),
|
|
5552
|
+
[data-theme="dark"] .segmented :is(button,a).active:where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="light"] *),[data-theme="light"] [data-theme="dark"] *)
|
|
5553
|
+
{ --btn-fg:var(--primary-emphasis); color:var(--primary-emphasis); }
|
|
4959
5554
|
|
|
4960
5555
|
/* O BOTÃO LIGADO (Toggle, ToggleGroup, ToolbarButton): amarelo cheio com a letra do botão primário, nos dois temas, sem
|
|
4961
5556
|
o fio de baixo e sem o fundo "clarinho". As cores passam por `--pressed-*` no próprio botão, para uma faixa com outro
|
|
4962
5557
|
`data-theme` acertar e para os outros estilos aprovados (o cinza e o grafite) só trocarem as três variáveis. */
|
|
4963
|
-
:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):where(:not([data-brand="
|
|
5558
|
+
:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):where(:not([data-brand="ember"],[data-brand="ember"] *)) {
|
|
4964
5559
|
--pressed-bg:var(--primary); --pressed-bg-hover:var(--primary-hover); --pressed-fg:var(--primary-foreground);
|
|
4965
5560
|
--btn-bg:var(--pressed-bg); --btn-fg:var(--pressed-fg); background:var(--pressed-bg); color:var(--pressed-fg); }
|
|
4966
|
-
:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):hover:not(:disabled):not([aria-disabled="true"]):where(:not([data-brand="
|
|
5561
|
+
:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):hover:not(:disabled):not([aria-disabled="true"]):where(:not([data-brand="ember"],[data-brand="ember"] *)) {
|
|
4967
5562
|
--btn-bg:var(--pressed-bg-hover); background:var(--pressed-bg-hover); }
|
|
4968
5563
|
|
|
4969
5564
|
/* O LINK separa-se do texto por mais que a cor (WCAG 1.4.1): no claro a letra é o grafite e no escuro o amarelo — a
|
|
@@ -4972,7 +5567,7 @@ button.graph-node-body { cursor:pointer; }
|
|
|
4972
5567
|
o marca-texto é para o link no meio do texto (medido no site em 27/10/2026: dos 596 links sem classe, 588 eram a
|
|
4973
5568
|
chave Web | Native e 6 a trilha; só 2 estavam na prosa).
|
|
4974
5569
|
A base, nos dois temas (e a VARIAÇÃO do claro): o sublinhado amarelo de 2 com 3 de afastamento. */
|
|
4975
|
-
:is(a:not([class]),.link,.typography-tone-link):not(.breadcrumb a,nav a,.segmented a):where(:not([data-brand="
|
|
5570
|
+
:is(a:not([class]),.link,.typography-tone-link):not(.breadcrumb a,nav a,.segmented a):where(:not([data-brand="ember"],[data-brand="ember"] *)) {
|
|
4976
5571
|
color:var(--link); text-decoration-line:underline; text-decoration-color:var(--link-underline);
|
|
4977
5572
|
text-decoration-thickness:calc(2 * var(--border-width)); text-underline-offset:calc(3 * var(--border-width)); }
|
|
4978
5573
|
/* O PADRÃO do claro: o MARCA-TEXTO — a faixa amarela a 45% atrás da metade de baixo das letras (o texto sobre ela mede
|
|
@@ -4981,32 +5576,32 @@ button.graph-node-body { cursor:pointer; }
|
|
|
4981
5576
|
As medidas são PROPORÇÕES DA LETRA (em), medidas na bancada de 26/10/2026, e crescem com ela; provadas nos três
|
|
4982
5577
|
navegadores em 27/10/2026. A variação (o sublinhado) se pede com `data-link="underline"` no próprio link, num
|
|
4983
5578
|
contêiner ou no `<html>` — um atributo, e não uma classe: o core só tem classe que um componente produz. */
|
|
4984
|
-
[data-theme="light"] :is(a:not([class]),.link,.typography-tone-link):not(.breadcrumb a,nav a,.segmented a):not([data-link="underline"],[data-link="underline"] *):where(:not([data-brand="
|
|
5579
|
+
[data-theme="light"] :is(a:not([class]),.link,.typography-tone-link):not(.breadcrumb a,nav a,.segmented a):not([data-link="underline"],[data-link="underline"] *):where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
|
|
4985
5580
|
text-decoration-color:var(--link-mark); text-decoration-thickness:.5em; text-underline-offset:-.32em; text-decoration-skip-ink:none;
|
|
4986
5581
|
transition:text-decoration-thickness var(--duration-fast) var(--ease-standard),text-underline-offset var(--duration-fast) var(--ease-standard); }
|
|
4987
|
-
[data-theme="light"] :is(a:not([class]),.link,.typography-tone-link):not(.breadcrumb a,nav a,.segmented a):not([data-link="underline"],[data-link="underline"] *):hover:where(:not([data-brand="
|
|
5582
|
+
[data-theme="light"] :is(a:not([class]),.link,.typography-tone-link):not(.breadcrumb a,nav a,.segmented a):not([data-link="underline"],[data-link="underline"] *):hover:where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
|
|
4988
5583
|
text-decoration-thickness:1.25em; text-underline-offset:-1.02em; }
|
|
4989
5584
|
@media (prefers-reduced-motion:reduce) {
|
|
4990
|
-
[data-theme="light"] :is(a:not([class]),.link,.typography-tone-link):where(:not([data-brand="
|
|
5585
|
+
[data-theme="light"] :is(a:not([class]),.link,.typography-tone-link):where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { transition:none; }
|
|
4991
5586
|
}
|
|
4992
5587
|
|
|
4993
5588
|
/* As TINTAS que saíam do destaque ficariam cinza com o destaque grafite: no claro, elas saem do próprio amarelo — o selo
|
|
4994
5589
|
primário de contorno (16%) e a marca do item atual da barra de baixo de aro (15%). */
|
|
4995
|
-
[data-theme="light"] .badge-primary.badge-outline:where(:not([data-brand="
|
|
5590
|
+
[data-theme="light"] .badge-primary.badge-outline:where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
|
|
4996
5591
|
background-color:color-mix(in oklab, var(--primary) 16%, transparent); }
|
|
4997
|
-
[data-theme="light"] .bottom-nav-ind-circle-outline .bottom-nav-item[aria-current] .bottom-nav-mark:where(:not([data-brand="
|
|
5592
|
+
[data-theme="light"] .bottom-nav-ind-circle-outline .bottom-nav-item[aria-current] .bottom-nav-mark:where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
|
|
4998
5593
|
background:color-mix(in srgb, var(--primary) 15%, transparent); }
|
|
4999
5594
|
|
|
5000
5595
|
/* O CAMPO no claro é BRANCO com a sombra fina em todo lugar, também DENTRO das superfícies brancas (era o cinza
|
|
5001
5596
|
`--fill-2` ali — ADR-0078, item 2, revertido pela ADR-0083): dentro de um cartão branco, quem separa o campo é a
|
|
5002
5597
|
sombra. A lista é a das superfícies da regra de campo, acima. No escuro, nada muda. */
|
|
5003
|
-
[data-theme="light"] :is(.card:not(.card-outline):not(.card-inset),.content:not(.content-plain),.section-card,.demo,.dialog,.drawer,.popover,.menu,.command-palette,.alert,.banner-consent,.toast,.accordion-surface,.datagrid-detail,:is(.table,.table-wrap) tbody :is(td,th),.topbar-floating,.topbar-pill,.sortable-item,.app-shell-docs > .sidebar[popover]:popover-open):where(:not([data-brand="
|
|
5598
|
+
[data-theme="light"] :is(.card:not(.card-outline):not(.card-inset),.content:not(.content-plain),.section-card,.demo,.dialog,.drawer,.popover,.menu,.command-palette,.alert,.banner-consent,.toast,.accordion-surface,.datagrid-detail,:is(.table,.table-wrap) tbody :is(td,th),.topbar-floating,.topbar-pill,.sortable-item,.app-shell-docs > .sidebar[popover]:popover-open):where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
|
|
5004
5599
|
--field-fill:var(--card); --field-lift:var(--field-lift-page); }
|
|
5005
5600
|
|
|
5006
5601
|
/* O FOCO DOS CAMPOS no claro é o amarelo, uma linha só, como no escuro (decisão do Victor, 26/10/2026; a medida — 1,75:1
|
|
5007
5602
|
na página, 1,91:1 no cartão, abaixo dos 3:1 — vai à bancada do passo A). Os botões e o resto continuam com o grafite. */
|
|
5008
|
-
[data-theme="light"] :is(.input,.textarea,.select):focus-visible:where(:not([data-brand="
|
|
5009
|
-
[data-theme="light"] :is(.input-group,.combobox-multi):focus-within:where(:not([data-brand="
|
|
5603
|
+
[data-theme="light"] :is(.input,.textarea,.select):focus-visible:where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
|
|
5604
|
+
[data-theme="light"] :is(.input-group,.combobox-multi):focus-within:where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
|
|
5010
5605
|
outline-color:var(--primary); }
|
|
5011
5606
|
|
|
5012
5607
|
/* "AUMENTAR CONTRASTE" do sistema (`prefers-contrast: more`: o "Aumentar contraste" do macOS, do iOS e do Android, o
|
|
@@ -5015,18 +5610,140 @@ button.graph-node-body { cursor:pointer; }
|
|
|
5015
5610
|
linha que esta preferência acende, exceção nomeada à ADR-0072 pela ADR-0083), as quatro marcas dos controles na
|
|
5016
5611
|
tinta, e o foco dos campos de volta ao grafite. Fora dela, nada disto existe. */
|
|
5017
5612
|
@media (prefers-contrast:more) {
|
|
5018
|
-
:is(.input,.textarea,.select,.input-group,.combobox-multi,.input-secondary,.textarea-secondary):where(:not([data-brand="
|
|
5019
|
-
.input-group > :is(.input,.select,.textarea):where(:not([data-brand="
|
|
5020
|
-
:root:where(:not([data-brand="
|
|
5613
|
+
:is(.input,.textarea,.select,.input-group,.combobox-multi,.input-secondary,.textarea-secondary):where(:not([data-brand="ember"],[data-brand="ember"] *)) { border-color:var(--input-strong); }
|
|
5614
|
+
.input-group > :is(.input,.select,.textarea):where(:not([data-brand="ember"],[data-brand="ember"] *)) { border:0; }
|
|
5615
|
+
:root:where(:not([data-brand="ember"])),[data-theme]:where(:not([data-brand="ember"],[data-brand="ember"] *)) {
|
|
5021
5616
|
--control-thumb:var(--brand-yellow-ink); --control-selected-foreground:var(--brand-yellow-ink); --control-selected-dot:var(--brand-yellow-ink); }
|
|
5022
|
-
[data-theme="light"] :is(.input,.textarea,.select):focus-visible:where(:not([data-brand="
|
|
5023
|
-
[data-theme="light"] :is(.input-group,.combobox-multi):focus-within:where(:not([data-brand="
|
|
5617
|
+
[data-theme="light"] :is(.input,.textarea,.select):focus-visible:where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
|
|
5618
|
+
[data-theme="light"] :is(.input-group,.combobox-multi):focus-within:where(:not([data-brand="ember"],[data-brand="ember"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
|
|
5024
5619
|
outline-color:var(--focus-strong); }
|
|
5025
5620
|
}
|
|
5026
5621
|
|
|
5027
5622
|
/* A LINHA DO TEMPO: o trilho por baixo dos pontos é conserto de todas as marcas (na regra da linha do tempo, acima). Aqui
|
|
5028
5623
|
só a cor: de `--border` para `--input` — na página do Zinco profundo, o `--border` quase não aparecia. */
|
|
5029
|
-
.timeline > li:not(:last-child):where(:not([data-brand="
|
|
5624
|
+
.timeline > li:not(:last-child):where(:not([data-brand="ember"],[data-brand="ember"] *))::before { background:var(--input); }
|
|
5625
|
+
|
|
5626
|
+
/* ═══ AS CORES, passo B — os estilos novos (ADR-0084, 27/10/2026) ═════════════════════════════════════════════════
|
|
5627
|
+
Os estilos que o Victor aprovou em 26/10/2026, todos para construir, cada um uma VARIAÇÃO (o padrão de cada peça não
|
|
5628
|
+
muda): o botão ligado em três (`data-pressed-style`), o segmento aceso em seis (`data-segment-style`), a linha do tempo
|
|
5629
|
+
em cinco (`data-timeline-style`) e o item atual da barra de baixo em treze (`data-current-style`), na barra flutuante e
|
|
5630
|
+
na fixa. O atributo vai na própria peça (é o que o React escreve) ou num contêiner — até o `<html>`, para o app todo. A
|
|
5631
|
+
peça com o seu atributo ganha do contêiner (`:not([data-…])` no caminho do contêiner); contêiner dentro de contêiner
|
|
5632
|
+
vale o que vem depois aqui.
|
|
5633
|
+
As cores ficam NA PEÇA, e não num token herdado da raiz: assim uma faixa com outro `data-theme` acerta.
|
|
5634
|
+
~~A `ember` fica de fora, como no passo A (a marca congelada): toda regra leva o `:where(:not(…ember…))` de força zero.~~
|
|
5635
|
+
→ A Aurea Ember RECEBE os estilos, como as outras marcas (o Victor, 28/10/2026, vendo que na Ember as
|
|
5636
|
+
variações saíam todas iguais: "Sim, como as outras"). O padrão dela, sem estilo escolhido, continua congelado — as
|
|
5637
|
+
regras do passo A continuam sem alcançá-la. Por isso o botão ligado dela, com um estilo escolhido, ganha aqui a
|
|
5638
|
+
pintura que o passo A dá às outras marcas (logo abaixo do 2.8).
|
|
5639
|
+
As duas exceções desta seção, registradas na ADR-0084: o DEGRADÊ do `brand-gradient` (a segunda exceção à ADR-0007,
|
|
5640
|
+
depois da escolha de cor da ADR-0069) e os AROS dos estilos de aro (o desenho que dá nome ao estilo — exceção nomeada à
|
|
5641
|
+
ADR-0072, só quando o app escolhe o estilo). */
|
|
5642
|
+
|
|
5643
|
+
/* 2.8 · O BOTÃO LIGADO (Toggle, ToggleGroup, ToolbarButton): o C, amarelo, é o padrão desde a 0.45.0 (a regra do passo A
|
|
5644
|
+
já escreve as três variáveis). Aqui o A (`neutral`, o cinza) e o B (`contrast`, o grafite, invertido) trocam só as três. */
|
|
5645
|
+
:is([data-pressed-style="neutral"] :is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):not([data-pressed-style]),:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed])[data-pressed-style="neutral"]) {
|
|
5646
|
+
--pressed-bg:var(--input); --pressed-bg-hover:color-mix(in oklab, var(--foreground) 9%, var(--input)); --pressed-fg:var(--foreground); }
|
|
5647
|
+
:is([data-pressed-style="contrast"] :is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):not([data-pressed-style]),:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed])[data-pressed-style="contrast"]) {
|
|
5648
|
+
--pressed-bg:var(--foreground); --pressed-bg-hover:color-mix(in oklab, var(--foreground) 84%, var(--background)); --pressed-fg:var(--background); }
|
|
5649
|
+
:is([data-pressed-style="brand"] :is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):not([data-pressed-style]),:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed])[data-pressed-style="brand"]) {
|
|
5650
|
+
--pressed-bg:var(--primary); --pressed-bg-hover:var(--primary-hover); --pressed-fg:var(--primary-foreground); }
|
|
5651
|
+
/* A Ember com um estilo escolhido: a pintura do botão ligado (a do passo A, que não a alcança) e sem o fio de baixo do
|
|
5652
|
+
ligado dela de sempre. Sem estilo escolhido, o ligado da Ember continua o de antes. */
|
|
5653
|
+
:is([data-pressed-style] :is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):not([data-pressed-style]),:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed])[data-pressed-style]):where([data-brand="ember"],[data-brand="ember"] *) {
|
|
5654
|
+
--btn-bg:var(--pressed-bg); --btn-fg:var(--pressed-fg); background:var(--pressed-bg); color:var(--pressed-fg); }
|
|
5655
|
+
:is([data-pressed-style] :is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):not([data-pressed-style]),:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed])[data-pressed-style]):hover:not(:disabled):not([aria-disabled="true"]):where([data-brand="ember"],[data-brand="ember"] *) {
|
|
5656
|
+
--btn-bg:var(--pressed-bg-hover); background:var(--pressed-bg-hover); }
|
|
5657
|
+
:is([data-pressed-style] :is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):not([data-pressed-style]),:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed])[data-pressed-style]):where([data-brand="ember"],[data-brand="ember"] *)::after { content:none; }
|
|
5658
|
+
/* O cinza é o mais discreto — o ligado fica perto do desligado. Quem pede mais contraste ganha o contorno de 3:1 (a mesma
|
|
5659
|
+
exceção dos campos, ADR-0083: a linha que só o "aumentar contraste" acende). */
|
|
5660
|
+
@media (prefers-contrast:more) {
|
|
5661
|
+
:is([data-pressed-style="neutral"] :is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):not([data-pressed-style]),:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed])[data-pressed-style="neutral"]) {
|
|
5662
|
+
box-shadow:inset 0 0 0 var(--border-width) var(--input-strong); }
|
|
5663
|
+
}
|
|
5664
|
+
|
|
5665
|
+
/* 2.9 · O SEGMENTO ACESO em seis: `current` (a cápsula elevada com o fio amarelo — o de sempre, o padrão), `neutral` (a
|
|
5666
|
+
mesma cápsula, sem fio), `contrast` (o grafite), `brand` (o amarelo), `ring` (a cápsula neutra com o aro amarelo) e
|
|
5667
|
+
`dot` (a cápsula neutra com um ponto amarelo antes do texto). Do `neutral` ao `dot`, o fio de baixo sai. */
|
|
5668
|
+
:is([data-segment-style="neutral"] .segmented:not([data-segment-style]),.segmented[data-segment-style="neutral"]) :is(button,a).active { --seg-bg:var(--segment); --seg-fg:var(--foreground); --seg-shadow:var(--shadow-sm); }
|
|
5669
|
+
:is([data-segment-style="contrast"] .segmented:not([data-segment-style]),.segmented[data-segment-style="contrast"]) :is(button,a).active { --seg-bg:var(--foreground); --seg-fg:var(--background); --seg-shadow:none; }
|
|
5670
|
+
:is([data-segment-style="brand"] .segmented:not([data-segment-style]),.segmented[data-segment-style="brand"]) :is(button,a).active { --seg-bg:var(--primary); --seg-fg:var(--primary-foreground); --seg-shadow:none; }
|
|
5671
|
+
:is([data-segment-style="ring"] .segmented:not([data-segment-style]),.segmented[data-segment-style="ring"]) :is(button,a).active { --seg-bg:var(--segment); --seg-fg:var(--foreground); --seg-shadow:inset 0 0 0 calc(1.5 * var(--border-width)) var(--primary), var(--shadow-sm); }
|
|
5672
|
+
:is([data-segment-style="dot"] .segmented:not([data-segment-style]),.segmented[data-segment-style="dot"]) :is(button,a).active { --seg-bg:var(--segment); --seg-fg:var(--foreground); --seg-shadow:var(--shadow-sm); }
|
|
5673
|
+
:is([data-segment-style]:not([data-segment-style="current"]) .segmented:not([data-segment-style]),.segmented[data-segment-style]:not([data-segment-style="current"])) :is(button,a).active {
|
|
5674
|
+
--btn-bg:var(--seg-bg); --btn-fg:var(--seg-fg); background:var(--seg-bg); color:var(--seg-fg); box-shadow:var(--seg-shadow); }
|
|
5675
|
+
:is([data-segment-style]:not([data-segment-style="current"]) .segmented:not([data-segment-style]),.segmented[data-segment-style]:not([data-segment-style="current"])) :is(button,a).active::after { content:none; }
|
|
5676
|
+
/* O ponto do `dot` tem o lugar reservado em TODOS os segmentos, para a largura não pular quando a escolha muda. 6 de
|
|
5677
|
+
diâmetro (a proposta) e 8 até o texto (a proposta dizia 7; o 8 é o `--space-2`, o vão de ícone e texto da escala). */
|
|
5678
|
+
:is([data-segment-style="dot"] .segmented:not([data-segment-style]),.segmented[data-segment-style="dot"]) :is(button,a)::before {
|
|
5679
|
+
content:""; display:inline-block; inline-size:calc(var(--space-1) + var(--space-05)); block-size:calc(var(--space-1) + var(--space-05));
|
|
5680
|
+
margin-inline-end:var(--space-2); border-radius:var(--radius-full); vertical-align:.1em; background:transparent; }
|
|
5681
|
+
:is([data-segment-style="dot"] .segmented:not([data-segment-style]),.segmented[data-segment-style="dot"]) :is(button,a).active::before { background:var(--primary); }
|
|
5682
|
+
|
|
5683
|
+
/* 2.12 · A LINHA DO TEMPO em cinco, todos sobre o conserto da ADR-0083: `default` (o ponto amarelo cheio — o padrão),
|
|
5684
|
+
`ring` (o ponto vazado com o aro amarelo de 2), `latest` (os pontos na cor fraca e só o último no amarelo, com halo de
|
|
5685
|
+
4), `time` (a hora numa coluna à esquerda, alinhada à direita) e `contrast` (os pontos na cor do texto). O `time` muda
|
|
5686
|
+
o arranjo pela grade e `display:contents` no `<div>` de dentro — a marcação do componente não muda. */
|
|
5687
|
+
:is([data-timeline-style="ring"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="ring"]) .timeline-dot { background:transparent; box-shadow:inset 0 0 0 calc(2 * var(--border-width)) var(--primary); }
|
|
5688
|
+
:is([data-timeline-style="latest"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="latest"]) .timeline-dot { background:var(--muted-foreground); }
|
|
5689
|
+
:is([data-timeline-style="latest"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="latest"]) > li:last-child .timeline-dot { background:var(--primary); box-shadow:0 0 0 var(--space-1) color-mix(in oklab, var(--primary) 28%, transparent); }
|
|
5690
|
+
:is([data-timeline-style="contrast"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="contrast"]) .timeline-dot { background:var(--foreground); }
|
|
5691
|
+
/* A coluna da hora tem 52 (a proposta, medida com "10:02" e "Ontem"): `--space-12` + `--space-1`. */
|
|
5692
|
+
:is([data-timeline-style="time"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="time"]) > li {
|
|
5693
|
+
display:grid; grid-template-columns:calc(var(--space-12) + var(--space-1)) var(--space-3) minmax(0,1fr); column-gap:var(--space-3); row-gap:var(--space-05); align-items:start; }
|
|
5694
|
+
:is([data-timeline-style="time"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="time"]) > li > div { display:contents; }
|
|
5695
|
+
:is([data-timeline-style="time"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="time"]) > li > div > small {
|
|
5696
|
+
grid-column:1; grid-row:1; text-align:end; font-variant-numeric:tabular-nums; line-height:calc(var(--text-sm) * var(--leading-normal)); }
|
|
5697
|
+
:is([data-timeline-style="time"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="time"]) .timeline-dot { grid-column:2; grid-row:1; }
|
|
5698
|
+
:is([data-timeline-style="time"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="time"]) > li > div > strong { grid-column:3; grid-row:1; }
|
|
5699
|
+
:is([data-timeline-style="time"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="time"]) > li > div > p { grid-column:3; grid-row:2; }
|
|
5700
|
+
:is([data-timeline-style="time"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="time"]) > li:not(:last-child)::before {
|
|
5701
|
+
inset-inline-start:calc(var(--space-12) + var(--space-1) + var(--space-3) + var(--space-3) / 2 - var(--border-width) / 2); }
|
|
5702
|
+
|
|
5703
|
+
/* 2.11 · O ITEM ATUAL DA BARRA DE BAIXO: o `indicator` escolhe a forma, o `currentStyle` a cor. O "fundo" é o do formato
|
|
5704
|
+
— o item inteiro no `pill`, no `subtle` e no `expand`; a marca do ícone no `circle`, no `circle-outline`, no
|
|
5705
|
+
`circle-raised` e no `capsule` (o nome fica embaixo, na cor do texto); o disco no `circle-bold`. O `none` não tem fundo:
|
|
5706
|
+
só a cor da letra muda. Vale igual na barra flutuante e na fixa (`edge`).
|
|
5707
|
+
neutral (A) o cinza · contrast (B) o grafite · brand (C) o amarelo cheio · ring (D) o aro amarelo, sem fundo ·
|
|
5708
|
+
plain (E) só o ícone cheio e o nome em semibold.
|
|
5709
|
+
2.11b · com amarelo e branco: brand-white (F) o amarelo com o branco — REPROVA a WCAG (1,91:1; aprovado pelo Victor
|
|
5710
|
+
sabendo disso) · white-ring (G) o branco com o aro amarelo, a tinta por dentro · brand-gradient (H) o degradê do
|
|
5711
|
+
amarelo até a ponta clara (a ponta é `--primary-gradient-end`, quando a marca define; sem ela, o amarelo com branco).
|
|
5712
|
+
2.13 · a barra inteira AMARELA, com todos os ícones e nomes na tinta (sem transparência: a tinta clareada sobre o
|
|
5713
|
+
amarelo vira marrom): bar-ink (I) a cápsula de tinta com o ícone amarelo · bar-ring (J) o aro de tinta · bar-plain (K)
|
|
5714
|
+
só o ícone cheio e o nome em semibold · bar-light (L) a cápsula amarelo-clara com a tinta. */
|
|
5715
|
+
:is([data-current-style="neutral"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="neutral"]) .bottom-nav-item[aria-current] { --bn-bg:var(--secondary); --bn-fg:var(--foreground); --bn-ring:none; }
|
|
5716
|
+
:is([data-current-style="contrast"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="contrast"]) .bottom-nav-item[aria-current] { --bn-bg:var(--foreground); --bn-fg:var(--background); --bn-ring:none; }
|
|
5717
|
+
:is([data-current-style="brand"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="brand"]) .bottom-nav-item[aria-current] { --bn-bg:var(--primary); --bn-fg:var(--primary-foreground); --bn-ring:none; }
|
|
5718
|
+
:is([data-current-style="ring"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="ring"]) .bottom-nav-item[aria-current] { --bn-bg:transparent; --bn-fg:var(--foreground); --bn-ring:inset 0 0 0 calc(1.5 * var(--border-width)) var(--primary); }
|
|
5719
|
+
:is([data-current-style="plain"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="plain"]) .bottom-nav-item[aria-current] { --bn-bg:transparent; --bn-fg:var(--foreground); --bn-ring:none; }
|
|
5720
|
+
:is([data-current-style="brand-white"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="brand-white"]) .bottom-nav-item[aria-current] { --bn-bg:var(--primary); --bn-fg:var(--white); --bn-ring:none; }
|
|
5721
|
+
:is([data-current-style="white-ring"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="white-ring"]) .bottom-nav-item[aria-current] { --bn-bg:var(--white); --bn-fg:var(--brand-yellow-ink); --bn-ring:inset 0 0 0 calc(1.5 * var(--border-width)) var(--primary); }
|
|
5722
|
+
:is([data-current-style="brand-gradient"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="brand-gradient"]) .bottom-nav-item[aria-current] { --bn-bg:linear-gradient(135deg, var(--primary) 20%, var(--primary-gradient-end, color-mix(in oklab, var(--primary) 30%, var(--white)))); --bn-fg:var(--primary-foreground); --bn-ring:none; }
|
|
5723
|
+
:is([data-current-style="bar-ink"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="bar-ink"]) .bottom-nav-item[aria-current] { --bn-bg:var(--primary-foreground); --bn-fg:var(--primary); --bn-ring:none; }
|
|
5724
|
+
:is([data-current-style="bar-ring"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="bar-ring"]) .bottom-nav-item[aria-current] { --bn-bg:transparent; --bn-fg:var(--primary-foreground); --bn-ring:inset 0 0 0 calc(1.5 * var(--border-width)) var(--primary-foreground); }
|
|
5725
|
+
:is([data-current-style="bar-plain"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="bar-plain"]) .bottom-nav-item[aria-current] { --bn-bg:transparent; --bn-fg:var(--primary-foreground); --bn-ring:none; }
|
|
5726
|
+
:is([data-current-style="bar-light"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="bar-light"]) .bottom-nav-item[aria-current] { --bn-bg:color-mix(in oklab, var(--primary) 45%, var(--white)); --bn-fg:var(--brand-yellow-ink); --bn-ring:none; }
|
|
5727
|
+
/* Onde vai a cor, por formato. O `:is()` com os dois caminhos (o atributo num contêiner, ou na barra) é o mesmo de cima. */
|
|
5728
|
+
:is([data-current-style]:not([data-current-style="current"]) .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style]:not([data-current-style="current"])):is(.bottom-nav-ind-pill,.bottom-nav-ind-subtle,.bottom-nav-ind-expand) .bottom-nav-item[aria-current] {
|
|
5729
|
+
background:var(--bn-bg); color:var(--bn-fg); box-shadow:var(--bn-ring); }
|
|
5730
|
+
:is([data-current-style]:not([data-current-style="current"]) .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style]:not([data-current-style="current"])):is(.bottom-nav-ind-circle,.bottom-nav-ind-circle-outline,.bottom-nav-ind-circle-raised,.bottom-nav-ind-capsule) .bottom-nav-item[aria-current] {
|
|
5731
|
+
color:var(--foreground); }
|
|
5732
|
+
:is([data-current-style]:not([data-current-style="current"]) .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style]:not([data-current-style="current"])):is(.bottom-nav-ind-circle,.bottom-nav-ind-circle-outline,.bottom-nav-ind-circle-raised,.bottom-nav-ind-capsule) .bottom-nav-item[aria-current] .bottom-nav-mark {
|
|
5733
|
+
background:var(--bn-bg); color:var(--bn-fg); box-shadow:var(--bn-ring); border-color:transparent; }
|
|
5734
|
+
:is([data-current-style]:not([data-current-style="current"]) .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style]:not([data-current-style="current"])).bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] { color:var(--bn-fg); }
|
|
5735
|
+
:is([data-current-style]:not([data-current-style="current"]) .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style]:not([data-current-style="current"])).bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .bottom-nav-disc { background:var(--bn-bg); box-shadow:var(--bn-ring); }
|
|
5736
|
+
:is([data-current-style="plain"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="plain"],[data-current-style="bar-plain"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="bar-plain"]) .bottom-nav-item[aria-current] .bottom-nav-label { font-weight:var(--weight-semibold); }
|
|
5737
|
+
/* A barra amarela (2.13): a barra inteira na marca, todos os itens na tinta e o ícone sem transparência. Na fixa (`edge`)
|
|
5738
|
+
o core pinta `--background`; esta passa por cima. O ponto de selo vazio, que é amarelo, vai para a tinta. */
|
|
5739
|
+
:is([data-current-style^="bar-"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style^="bar-"]) {
|
|
5740
|
+
--bottomnav-surface:var(--primary); background:var(--primary); color:var(--primary-foreground); border-color:transparent; }
|
|
5741
|
+
:is([data-current-style^="bar-"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style^="bar-"]) .bottom-nav-item { color:var(--primary-foreground); }
|
|
5742
|
+
:is([data-current-style^="bar-"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style^="bar-"]) .bottom-nav-item .icon { opacity:1; }
|
|
5743
|
+
:is([data-current-style^="bar-"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style^="bar-"]) .bottom-nav-badge:empty { background:var(--primary-foreground); }
|
|
5744
|
+
/* A classe DOBRADA é força, de propósito: a regra do nome na cor do texto (o 2.11, acima) também casa com a barra amarela,
|
|
5745
|
+
e no escuro pintaria o nome de branco sobre o amarelo. */
|
|
5746
|
+
:is([data-current-style^="bar-"] .bottom-nav.bottom-nav:not([data-current-style]),.bottom-nav.bottom-nav[data-current-style^="bar-"]):is(.bottom-nav-ind-circle,.bottom-nav-ind-circle-outline,.bottom-nav-ind-circle-raised,.bottom-nav-ind-capsule) .bottom-nav-item.bottom-nav-item[aria-current] { color:var(--primary-foreground); }
|
|
5030
5747
|
|
|
5031
5748
|
/* >>> camada responsiva — GERADA por scripts/build-responsive-layer.mjs <<< */
|
|
5032
5749
|
/* As variáveis de passo NÃO HERDAM. Ver o comentário de VARIAVEIS no gerador: um ícone dentro
|