untitledui 0.1.2 → 0.1.3

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 (56) hide show
  1. package/dist/index.mjs +19 -0
  2. package/package.json +10 -8
  3. package/templates/default/package.json +20 -21
  4. package/templates/default/src/app/home-screen.tsx +2 -3
  5. package/templates/default/src/app/layout.tsx +5 -13
  6. package/templates/default/src/components/marketing/header-navigation/dropdown-header-navigation.tsx +1 -1
  7. package/templates/default/src/components/shared/buttons/button.tsx +2 -1
  8. package/templates/default/src/components/shared/dropdown/dropdown.tsx +27 -18
  9. package/templates/default/src/components/shared/form/hook-form.tsx +75 -0
  10. package/templates/default/src/components/shared/{inputs/input → input}/index.tsx +3 -3
  11. package/templates/default/src/components/shared/{inputs/input → input}/input-payment.tsx +4 -4
  12. package/templates/default/src/components/shared/{inputs/input → input}/input-with-button.tsx +4 -4
  13. package/templates/default/src/components/shared/{inputs/input → input}/input-with-dropdown.tsx +4 -4
  14. package/templates/default/src/components/shared/{inputs/input → input}/input-with-prefix.tsx +4 -4
  15. package/templates/default/src/components/shared/progress-indicators/progress-indicators.tsx +2 -2
  16. package/templates/default/src/components/shared/{input-dropdown → select}/combobox.tsx +9 -9
  17. package/templates/default/src/components/shared/{input-dropdown → select}/multi-select.tsx +166 -166
  18. package/templates/default/src/components/shared/{input-dropdown → select}/popover.tsx +2 -2
  19. package/templates/default/src/components/shared/select/select-item.tsx +70 -0
  20. package/templates/default/src/components/shared/{input-dropdown/select.tsx → select/select-native.tsx} +2 -2
  21. package/templates/default/src/components/shared/select/select.tsx +143 -0
  22. package/templates/default/src/components/shared/slider/slider.tsx +2 -2
  23. package/templates/default/src/components/shared/{inputs/textarea → textarea}/textarea.tsx +2 -2
  24. package/templates/default/src/providers/theme.tsx +1 -1
  25. package/templates/default/src/styles/globals.css +3 -1
  26. package/templates/default/src/styles/theme.css +392 -380
  27. package/templates/default/src/styles/typography.css +20 -20
  28. package/dist/commands/add.js +0 -339
  29. package/dist/commands/init.js +0 -436
  30. package/dist/helper/download-tar-api.js +0 -129
  31. package/dist/helper/download-tar.js +0 -81
  32. package/dist/helper/find-css-file.js +0 -19
  33. package/dist/helper/formatText.js +0 -37
  34. package/dist/helper/get-components-api.js +0 -47
  35. package/dist/helper/get-components-list.js +0 -62
  36. package/dist/helper/get-components.js +0 -19
  37. package/dist/helper/get-config.js +0 -163
  38. package/dist/helper/get-package-info.js +0 -99
  39. package/dist/helper/get-pkg-manager.js +0 -16
  40. package/dist/helper/get-project.js +0 -176
  41. package/dist/helper/install-template.js +0 -29
  42. package/dist/helper/match-color-css.js +0 -82
  43. package/dist/helper/update-color-css.js +0 -134
  44. package/dist/index.js +0 -25
  45. package/dist/package.json +0 -50
  46. package/dist/res/components.json +0 -520
  47. package/dist/res/config.json +0 -3
  48. package/templates/default/src/components/shared/input-dropdown/dropdown-item.tsx +0 -98
  49. package/templates/default/src/components/shared/input-dropdown/input-dropdown.tsx +0 -172
  50. package/templates/default/src/fonts/GeistMonoVF.woff +0 -0
  51. package/templates/default/src/fonts/GeistVF.woff +0 -0
  52. package/templates/default/src/styles/colors.css +0 -805
  53. /package/templates/default/src/components/shared/{inputs → file-upload-trigger}/file-upload-trigger.tsx +0 -0
  54. /package/templates/default/src/components/shared/{inputs/form → form}/form.tsx +0 -0
  55. /package/templates/default/src/components/shared/{inputs → input}/hint-text.tsx +0 -0
  56. /package/templates/default/src/components/shared/{inputs → input}/label.tsx +0 -0
package/templates/default/src/styles/theme.css CHANGED
@@ -496,146 +496,12 @@
496
496
  --color-yellow-900: rgb(113 59 18);
497
497
  --color-yellow-950: rgb(84 44 13);
498
498
 
499
- /* LIGHT MODE */
499
+ /* LIGHT MODE VARIABLES */
500
500
 
501
501
  --color-alpha-white: rgb(255 255 255);
502
502
  --color-alpha-black: rgb(0 0 0);
503
503
 
504
- --color-text-primary: var(--color-gray-light-mode-900);
505
- --color-text-tertiary: var(--color-gray-light-mode-600);
506
- --color-text-error-primary: var(--color-error-600);
507
- --color-text-warning-primary: var(--color-warning-600);
508
- --color-text-success-primary: var(--color-success-600);
509
- --color-text-white: var(--color-white);
510
- --color-text-secondary: var(--color-gray-light-mode-700);
511
- --color-text-disabled: var(--color-gray-light-mode-500);
512
- --color-text-secondary_hover: var(--color-gray-light-mode-800);
513
- --color-text-tertiary_hover: var(--color-gray-light-mode-700);
514
- --color-text-brand-secondary: var(--color-brand-700);
515
- --color-text-placeholder: var(--color-gray-light-mode-500);
516
- --color-text-placeholder_subtle: var(--color-gray-light-mode-300);
517
- --color-text-brand-tertiary: var(--color-brand-600);
518
- --color-text-editor-icon-fg: var(--color-gray-light-mode-400);
519
- --color-text-editor-icon-fg_active: var(--color-gray-light-mode-500);
520
- --color-text-quaternary: var(--color-gray-light-mode-500);
521
- --color-text-brand-primary: var(--color-brand-900);
522
- --color-text-primary_on-brand: var(--color-white);
523
- --color-text-secondary_on-brand: var(--color-brand-200);
524
- --color-text-tertiary_on-brand: var(--color-brand-200);
525
- --color-text-quaternary_on-brand: var(--color-brand-300);
526
- --color-text-brand-tertiary_alt: var(--color-brand-600);
527
- --color-text-brand-secondary_hover: var(--color-brand-800);
528
- --color-text-error-primary_hover: var(--color-error-700);
529
- --color-border-secondary: var(--color-gray-light-mode-200);
530
- --color-border-error_subtle: var(--color-error-300);
531
- --color-border-primary: var(--color-gray-light-mode-300);
532
- --color-border-brand: var(--color-brand-500);
533
- --color-border-disabled: var(--color-gray-light-mode-300);
534
- --color-border-error: var(--color-error-500);
535
- --color-border-disabled_subtle: var(--color-gray-light-mode-200);
536
- --color-border-tertiary: var(--color-gray-light-mode-100);
537
- --color-border-brand_alt: var(--color-brand-600);
538
- --color-border-secondary_alt: rgb(0 0 0 / 0.08);
539
- --color-fg-secondary: var(--color-gray-light-mode-700);
540
- --color-fg-warning-primary: var(--color-warning-600);
541
- --color-fg-success-primary: var(--color-success-600);
542
- --color-fg-white: var(--color-white);
543
- --color-fg-success-secondary: var(--color-success-500);
544
- --color-fg-secondary_hover: var(--color-gray-light-mode-800);
545
- --color-fg-primary: var(--color-gray-light-mode-900);
546
- --color-fg-disabled: var(--color-gray-light-mode-400);
547
- --color-fg-brand-secondary: var(--color-brand-500);
548
- --color-fg-brand-primary: var(--color-brand-600);
549
- --color-fg-quaternary: var(--color-gray-light-mode-400);
550
- --color-fg-quaternary_hover: var(--color-gray-light-mode-500);
551
- --color-fg-error-primary: var(--color-error-600);
552
- --color-fg-disabled_subtle: var(--color-gray-light-mode-300);
553
- --color-fg-warning-secondary: var(--color-warning-500);
554
- --color-fg-error-secondary: var(--color-error-500);
555
- --color-fg-tertiary: var(--color-gray-light-mode-600);
556
- --color-fg-tertiary_hover: var(--color-gray-light-mode-700);
557
- --color-fg-brand-primary_alt: var(--color-fg-brand-primary);
558
- --color-fg-brand-secondary_alt: var(--color-fg-brand-secondary);
559
- --color-fg-brand-secondary_hover: var(--color-brand-600);
560
- --color-bg-primary: var(--color-white);
561
- --color-bg-tertiary: var(--color-gray-light-mode-100);
562
- --color-bg-brand-primary: var(--color-brand-50);
563
- --color-bg-error-secondary: var(--color-error-100);
564
- --color-bg-warning-primary: var(--color-warning-50);
565
- --color-bg-warning-secondary: var(--color-warning-100);
566
- --color-bg-success-primary: var(--color-success-50);
567
- --color-bg-success-secondary: var(--color-success-100);
568
- --color-bg-brand-solid: var(--color-brand-600);
569
- --color-bg-secondary-solid: var(--color-gray-light-mode-600);
570
- --color-bg-error-solid: var(--color-error-600);
571
- --color-bg-warning-solid: var(--color-warning-600);
572
- --color-bg-success-solid: var(--color-success-600);
573
- --color-bg-secondary_hover: var(--color-gray-light-mode-100);
574
- --color-bg-primary_hover: var(--color-gray-light-mode-50);
575
- --color-bg-disabled: var(--color-gray-light-mode-100);
576
- --color-bg-active: var(--color-gray-light-mode-50);
577
- --color-bg-brand-solid_hover: var(--color-brand-700);
578
- --color-bg-error-primary: var(--color-error-50);
579
- --color-bg-brand-secondary: var(--color-brand-100);
580
- --color-bg-secondary: var(--color-gray-light-mode-50);
581
- --color-bg-disabled_subtle: var(--color-gray-light-mode-50);
582
- --color-bg-quaternary: var(--color-gray-light-mode-200);
583
- --color-bg-primary_alt: var(--color-white);
584
- --color-bg-brand-primary_alt: var(--color-brand-50);
585
- --color-bg-secondary_alt: var(--color-gray-light-mode-50);
586
- --color-bg-overlay: var(--color-gray-light-mode-950);
587
- --color-bg-secondary_subtle: var(--color-gray-light-mode-25);
588
- --color-bg-brand-section: var(--color-brand-800);
589
- --color-bg-brand-section_subtle: var(--color-brand-700);
590
- --color-bg-primary-solid: var(--color-gray-light-mode-950);
591
- --color-app-store-badge-border: rgb(166 166 166);
592
- --color-avatar-bg: var(--color-gray-light-mode-100);
593
- --color-avatar-contrast-border: rgb(0 0 0 / 0.08);
594
- --color-avatar-profile-photo-border: var(--color-white);
595
- --color-avatar-styles-bg-neutral: rgb(224 224 224);
596
- --color-button-destructive-primary-icon: var(--color-error-300);
597
- --color-button-destructive-primary-icon_hover: var(--color-error-200);
598
- --color-button-primary-icon: var(--color-brand-300);
599
- --color-button-primary-icon_hover: var(--color-brand-200);
600
- --color-featured-icon-light-fg-brand: var(--color-brand-600);
601
- --color-featured-icon-light-fg-error: var(--color-error-600);
602
- --color-featured-icon-light-fg-gray: var(--color-gray-light-mode-500);
603
- --color-featured-icon-light-fg-success: var(--color-success-600);
604
- --color-featured-icon-light-fg-warning: var(--color-warning-600);
605
- --color-focus-ring-error: var(--color-error-500);
606
- --color-focus-ring: var(--color-brand-500);
607
- --color-footer-button-fg: var(--color-brand-200);
608
- --color-footer-button-fg_hover: var(--color-white);
609
- --color-header-abstract-100-bg: var(--color-brand-100);
610
- --color-header-abstract-200-bg: var(--color-brand-200);
611
- --color-header-abstract-300-bg: var(--color-brand-300);
612
- --color-header-abstract-50-bg: var(--color-brand-50);
613
- --color-icon-fg-brand: var(--color-brand-600);
614
- --color-icon-fg-brand_on-brand: var(--color-brand-200);
615
- /* THESE NEED TO BE REMOED */
616
- --color-nav-item-button-icon-fg: var(--color-gray-light-mode-500);
617
- --color-nav-item-button-icon-fg_active: var(--color-gray-light-mode-700);
618
- --color-nav-item-icon-fg: var(--color-gray-light-mode-500);
619
- --color-nav-item-icon-fg_active: var(--color-gray-light-mode-500);
620
- /* END OF THESE NEED TO BE REMOED */
621
- --color-screen-mockup-border: var(--color-gray-light-mode-900);
622
-
623
- --color-slider-handle-bg: var(--color-white);
624
- --color-slider-handle-border: var(--color-brand-600);
625
- --color-social-icon-fg-angellist: var(--color-black);
626
- --color-social-icon-fg-apple: var(--color-black);
627
- --color-social-icon-fg-github: var(--color-black);
628
- --color-social-icon-fg-instagram: rgb(0 1 0 1);
629
- --color-social-icon-fg-tumblr: rgb(0 25 53 1);
630
- --color-social-icon-fg-x: rgb(36 46 54 1);
631
- --color-toggle-border: var(--color-gray-light-mode-300);
632
- --color-toggle-button-fg_disabled: var(--color-gray-light-mode-50);
633
- --color-toggle-slim-border_pressed-hover: var(--color-bg-brand-solid_hover);
634
- --color-toggle-slim-border_pressed: var(--color-bg-brand-solid);
635
- --color-tooltip-supporting-text: var(--color-gray-light-mode-300);
636
- --color-text-editor-icon-fg: var(--color-gray-light-mode-400);
637
- --color-text-editor-icon-fg_active: var(--color-gray-light-mode-500);
638
-
504
+ /* UTILITY COLORS */
639
505
  --color-utility-blue-50: var(--color-blue-50);
640
506
  --color-utility-blue-100: var(--color-blue-100);
641
507
  --color-utility-blue-200: var(--color-blue-200);
@@ -803,255 +669,253 @@
803
669
  --color-utility-yellow-600: var(--color-yellow-600);
804
670
  --color-utility-yellow-700: var(--color-yellow-700);
805
671
 
806
- --background-color-quaternary: var(--color-bg-quaternary);
807
- --background-color-brand-solid: var(--color-bg-brand-solid);
808
- --background-color-disabled: var(--color-bg-disabled);
809
- --background-color-primary: var(--color-bg-primary);
810
- --background-color-primary-solid: var(--color-bg-primary-solid);
811
- --background-color-primary_alt: var(--color-bg-primary_alt);
812
- --background-color-primary_hover: var(--color-bg-primary_hover);
813
- --background-color-secondary: var(--color-bg-secondary);
814
- --background-color-secondary-solid: var(--color-bg-secondary-solid);
815
- --background-color-secondary_alt: var(--color-bg-secondary_alt);
816
- --background-color-secondary_hover: var(--color-bg-secondary_hover);
817
- --background-color-secondary_subtle: var(--color-bg-secondary_subtle);
818
- --background-color-tertiary: var(--color-bg-tertiary);
819
- --background-color-active: var(--color-bg-active);
820
- --background-color-disabled_subtle: var(--color-bg-disabled_subtle);
821
- --background-color-overlay: var(--color-bg-overlay);
822
- --background-color-brand-primary: var(--color-bg-brand-primary);
823
- --background-color-brand-primary_alt: var(--color-bg-brand-primary_alt);
824
- --background-color-brand-secondary: var(--color-bg-brand-secondary);
825
- --background-color-brand-solid: var(--color-bg-brand-solid);
826
- --background-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
827
- --background-color-brand-section: var(--color-bg-brand-section);
828
- --background-color-brand-section_subtle: var(--color-bg-brand-section_subtle);
829
- --background-color-error-primary: var(--color-bg-error-primary);
830
- --background-color-error-secondary: var(--color-bg-error-secondary);
831
- --background-color-error-solid: var(--color-bg-error-solid);
832
- --background-color-warning-primary: var(--color-bg-warning-primary);
833
- --background-color-warning-secondary: var(--color-bg-warning-secondary);
834
- --background-color-warning-solid: var(--color-bg-warning-solid);
835
- --background-color-success-primary: var(--color-bg-success-primary);
836
- --background-color-success-secondary: var(--color-bg-success-secondary);
837
- --background-color-success-solid: var(--color-bg-success-solid);
838
- --background-color-border-brand: var(--color-border-brand);
839
- --background-color-border-tertiary: var(--color-border-tertiary);
840
- --background-color-border-brand_alt: var(--color-border-brand_alt);
841
-
842
- --text-color-primary: var(--color-text-primary);
843
- --text-color-primary_on-brand: var(--color-text-primary_on-brand);
844
- --text-color-secondary: var(--color-text-secondary);
845
- --text-color-secondary_hover: var(--color-text-secondary_hover);
846
- --text-color-secondary_on-brand: var(--color-text-secondary_on-brand);
847
- --text-color-tertiary: var(--color-text-tertiary);
848
- --text-color-tertiary_hover: var(--color-text-tertiary_hover);
849
- --text-color-tertiary_on-brand: var(--color-text-tertiary_on-brand);
850
- --text-color-quaternary: var(--color-text-quaternary);
851
- --text-color-quaternary_on-brand: var(--color-text-quaternary_on-brand);
852
- --text-color-disabled: var(--color-text-disabled);
853
- --text-color-placeholder: var(--color-text-placeholder);
854
- --text-color-placeholder_subtle: var(--color-text-placeholder_subtle);
855
- --text-color-brand-primary: var(--color-text-brand-primary);
856
- --text-color-brand-secondary: var(--color-text-brand-secondary);
857
- --text-color-brand-secondary_hover: var(--color-text-brand-secondary_hover);
858
- --text-color-brand-tertiary: var(--color-text-brand-tertiary);
859
- --text-color-brand-tertiary_alt: var(--color-text-brand-tertiary_alt);
860
- --text-color-error-primary: var(--color-text-error-primary);
861
- --text-color-error-primary_hover: var(--color-text-error-primary_hover);
862
- --text-color-warning-primary: var(--color-text-warning-primary);
863
- --text-color-success-primary: var(--color-text-success-primary);
864
- --text-color-tooltip-supporting-text: var(--color-tooltip-supporting-text);
865
-
866
- --border-color-primary: var(--color-border-primary);
867
- --border-color-secondary: var(--color-border-secondary);
868
- --border-color-secondary_alt: var(--color-border-secondary_alt);
869
- --border-color-tertiary: var(--color-border-tertiary);
870
- --border-color-disabled: var(--color-border-disabled);
871
- --border-color-brand: var(--color-border-brand);
872
- --border-color-brand-solid: var(--color-bg-brand-solid);
873
- --border-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
874
- --border-color-error: var(--color-border-error);
875
- --border-color-disabled_subtle: var(--color-border-disabled_subtle);
876
- --border-color-brand_alt: var(--color-border-brand_alt);
877
- --border-color-error_subtle: var(--color-border-error_subtle);
878
-
879
- --ring-color-bg-brand-solid: var(--color-bg-brand-solid);
880
- --ring-color-border-primary: var(--color-border-primary);
881
- --ring-color-border-secondary: var(--color-border-secondary);
882
- --ring-color-border-tertiary: var(--color-border-tertiary);
883
- --ring-color-border-disabled: var(--color-border-disabled);
884
- --ring-color-border-brand: var(--color-border-brand);
885
- --ring-color-border-error: var(--color-border-error);
886
- --ring-color-border-disabled_subtle: var(--color-border-disabled_subtle);
887
- --ring-color-border-brand_alt: var(--color-border-brand_alt);
888
- --ring-color-border-error_subtle: var(--color-border-error_subtle);
672
+ /* TEXT COLORS */
673
+ --color-text-primary: var(--color-gray-light-mode-900);
674
+ --color-text-tertiary: var(--color-gray-light-mode-600);
675
+ --color-text-error-primary: var(--color-error-600);
676
+ --color-text-warning-primary: var(--color-warning-600);
677
+ --color-text-success-primary: var(--color-success-600);
678
+ --color-text-white: var(--color-white);
679
+ --color-text-secondary: var(--color-gray-light-mode-700);
680
+ --color-text-disabled: var(--color-gray-light-mode-500);
681
+ --color-text-secondary_hover: var(--color-gray-light-mode-800);
682
+ --color-text-tertiary_hover: var(--color-gray-light-mode-700);
683
+ --color-text-brand-secondary: var(--color-brand-700);
684
+ --color-text-placeholder: var(--color-gray-light-mode-500);
685
+ --color-text-placeholder_subtle: var(--color-gray-light-mode-300);
686
+ --color-text-brand-tertiary: var(--color-brand-600);
687
+ --color-text-editor-icon-fg: var(--color-gray-light-mode-400);
688
+ --color-text-editor-icon-fg_active: var(--color-gray-light-mode-500);
689
+ --color-text-quaternary: var(--color-gray-light-mode-500);
690
+ --color-text-brand-primary: var(--color-brand-900);
691
+ --color-text-primary_on-brand: var(--color-white);
692
+ --color-text-secondary_on-brand: var(--color-brand-200);
693
+ --color-text-tertiary_on-brand: var(--color-brand-200);
694
+ --color-text-quaternary_on-brand: var(--color-brand-300);
695
+ --color-text-brand-tertiary_alt: var(--color-brand-600);
696
+ --color-text-brand-secondary_hover: var(--color-brand-800);
697
+ --color-text-error-primary_hover: var(--color-error-700);
889
698
 
890
- --outline-color-brand: var(--color-border-brand);
891
- --outline-color-primary: var(--color-border-primary);
892
- --outline-color-secondary: var(--color-border-secondary);
893
- --outline-color-secondary_alt: var(--color-border-secondary_alt);
894
- --outline-color-error: var(--color-border-error);
895
- }
699
+ /* BORDER COLORS */
700
+ --color-border-secondary: var(--color-gray-light-mode-200);
701
+ --color-border-error_subtle: var(--color-error-300);
702
+ --color-border-primary: var(--color-gray-light-mode-300);
703
+ --color-border-brand: var(--color-brand-500);
704
+ --color-border-disabled: var(--color-gray-light-mode-300);
705
+ --color-border-error: var(--color-error-500);
706
+ --color-border-disabled_subtle: var(--color-gray-light-mode-200);
707
+ --color-border-tertiary: var(--color-gray-light-mode-100);
708
+ --color-border-brand_alt: var(--color-brand-600);
709
+ --color-border-secondary_alt: rgb(0 0 0 / 0.08);
896
710
 
711
+ /* FOREGROUND COLORS */
712
+ --color-fg-secondary: var(--color-gray-light-mode-700);
713
+ --color-fg-warning-primary: var(--color-warning-600);
714
+ --color-fg-success-primary: var(--color-success-600);
715
+ --color-fg-white: var(--color-white);
716
+ --color-fg-success-secondary: var(--color-success-500);
717
+ --color-fg-secondary_hover: var(--color-gray-light-mode-800);
718
+ --color-fg-primary: var(--color-gray-light-mode-900);
719
+ --color-fg-disabled: var(--color-gray-light-mode-400);
720
+ --color-fg-brand-secondary: var(--color-brand-500);
721
+ --color-fg-brand-primary: var(--color-brand-600);
722
+ --color-fg-quaternary: var(--color-gray-light-mode-400);
723
+ --color-fg-quaternary_hover: var(--color-gray-light-mode-500);
724
+ --color-fg-error-primary: var(--color-error-600);
725
+ --color-fg-disabled_subtle: var(--color-gray-light-mode-300);
726
+ --color-fg-warning-secondary: var(--color-warning-500);
727
+ --color-fg-error-secondary: var(--color-error-500);
728
+ --color-fg-tertiary: var(--color-gray-light-mode-600);
729
+ --color-fg-tertiary_hover: var(--color-gray-light-mode-700);
730
+ --color-fg-brand-primary_alt: var(--color-fg-brand-primary);
731
+ --color-fg-brand-secondary_alt: var(--color-fg-brand-secondary);
732
+ --color-fg-brand-secondary_hover: var(--color-brand-600);
897
733
 
898
- @utility dark-mode {
899
- --color-alpha-white: rgb(12 14 18);
900
- --color-alpha-black: rgb(255 255 255);
734
+ /* BACKGROUND COLORS */
735
+ --color-bg-primary: var(--color-white);
736
+ --color-bg-tertiary: var(--color-gray-light-mode-100);
737
+ --color-bg-brand-primary: var(--color-brand-50);
738
+ --color-bg-error-secondary: var(--color-error-100);
739
+ --color-bg-warning-primary: var(--color-warning-50);
740
+ --color-bg-warning-secondary: var(--color-warning-100);
741
+ --color-bg-success-primary: var(--color-success-50);
742
+ --color-bg-success-secondary: var(--color-success-100);
743
+ --color-bg-brand-solid: var(--color-brand-600);
744
+ --color-bg-secondary-solid: var(--color-gray-light-mode-600);
745
+ --color-bg-error-solid: var(--color-error-600);
746
+ --color-bg-warning-solid: var(--color-warning-600);
747
+ --color-bg-success-solid: var(--color-success-600);
748
+ --color-bg-secondary_hover: var(--color-gray-light-mode-100);
749
+ --color-bg-primary_hover: var(--color-gray-light-mode-50);
750
+ --color-bg-disabled: var(--color-gray-light-mode-100);
751
+ --color-bg-active: var(--color-gray-light-mode-50);
752
+ --color-bg-brand-solid_hover: var(--color-brand-700);
753
+ --color-bg-error-primary: var(--color-error-50);
754
+ --color-bg-brand-secondary: var(--color-brand-100);
755
+ --color-bg-secondary: var(--color-gray-light-mode-50);
756
+ --color-bg-disabled_subtle: var(--color-gray-light-mode-50);
757
+ --color-bg-quaternary: var(--color-gray-light-mode-200);
758
+ --color-bg-primary_alt: var(--color-white);
759
+ --color-bg-brand-primary_alt: var(--color-brand-50);
760
+ --color-bg-secondary_alt: var(--color-gray-light-mode-50);
761
+ --color-bg-overlay: var(--color-gray-light-mode-950);
762
+ --color-bg-secondary_subtle: var(--color-gray-light-mode-25);
763
+ --color-bg-brand-section: var(--color-brand-800);
764
+ --color-bg-brand-section_subtle: var(--color-brand-700);
765
+ --color-bg-primary-solid: var(--color-gray-light-mode-950);
901
766
 
902
- --color-text-primary: var(--color-gray-dark-mode-50);
903
- --color-text-tertiary: var(--color-gray-dark-mode-400);
904
- --color-text-error-primary: var(--color-error-400);
905
- --color-text-warning-primary: var(--color-warning-400);
906
- --color-text-success-primary: var(--color-success-400);
907
- --color-text-white: var(--color-white);
908
- --color-text-secondary: var(--color-gray-dark-mode-300);
909
- --color-text-disabled: var(--color-gray-dark-mode-500);
910
- --color-text-secondary_hover: var(--color-gray-dark-mode-200);
911
- --color-text-tertiary_hover: var(--color-gray-dark-mode-300);
912
- --color-text-brand-secondary: var(--color-gray-dark-mode-300);
913
- --color-text-placeholder: var(--color-gray-dark-mode-500);
914
- --color-text-placeholder_subtle: var(--color-gray-dark-mode-700);
915
- --color-text-brand-tertiary: var(--color-gray-dark-mode-400);
916
- --color-text-editor-icon-fg: var(--color-gray-dark-mode-400);
917
- --color-text-editor-icon-fg_active: var(--color-white);
918
- --color-text-quaternary: var(--color-gray-dark-mode-400);
919
- --color-text-brand-primary: var(--color-gray-dark-mode-50);
920
- --color-text-primary_on-brand: var(--color-gray-dark-mode-50);
921
- --color-text-secondary_on-brand: var(--color-gray-dark-mode-300);
922
- --color-text-tertiary_on-brand: var(--color-gray-dark-mode-400);
923
- --color-text-quaternary_on-brand: var(--color-gray-dark-mode-400);
924
- --color-text-brand-tertiary_alt: var(--color-gray-dark-mode-50);
925
- --color-text-brand-secondary_hover: var(--color-gray-dark-mode-200);
926
- --color-text-error-primary_hover: var(--color-error-300);
927
- --color-border-secondary: var(--color-gray-dark-mode-800);
928
- --color-border-error_subtle: var(--color-error-500);
929
- --color-border-primary: var(--color-gray-dark-mode-700);
930
- --color-border-brand: var(--color-brand-400);
931
- --color-border-disabled: var(--color-gray-dark-mode-700);
932
- --color-border-error: var(--color-error-400);
933
- --color-border-disabled_subtle: var(--color-gray-dark-mode-800);
934
- --color-border-tertiary: var(--color-gray-dark-mode-800);
935
- --color-border-brand_alt: var(--color-gray-dark-mode-700);
936
- --color-border-secondary_alt: var(--color-gray-dark-mode-700);
937
- --color-fg-secondary: var(--color-gray-dark-mode-300);
938
- --color-fg-warning-primary: var(--color-warning-500);
939
- --color-fg-success-primary: var(--color-success-500);
940
- --color-fg-white: var(--color-white);
941
- --color-fg-success-secondary: var(--color-success-400);
942
- --color-fg-secondary_hover: var(--color-gray-dark-mode-200);
943
- --color-fg-primary: var(--color-white);
944
- --color-fg-disabled: var(--color-gray-dark-mode-500);
945
- --color-fg-brand-secondary: var(--color-brand-500);
946
- --color-fg-brand-primary: var(--color-brand-500);
947
- --color-fg-quaternary: var(--color-gray-dark-mode-600);
948
- --color-fg-quaternary_hover: var(--color-gray-dark-mode-500);
949
- --color-fg-error-primary: var(--color-error-500);
950
- --color-fg-disabled_subtle: var(--color-gray-dark-mode-600);
951
- --color-fg-warning-secondary: var(--color-warning-400);
952
- --color-fg-error-secondary: var(--color-error-400);
953
- --color-fg-tertiary: var(--color-gray-dark-mode-400);
954
- --color-fg-tertiary_hover: var(--color-gray-dark-mode-300);
955
- --color-fg-brand-primary_alt: var(--color-gray-dark-mode-300);
956
- --color-fg-brand-secondary_alt: var(--color-gray-dark-mode-600);
957
- --color-fg-brand-secondary_hover: var(--color-gray-dark-mode-500);
958
- --color-bg-primary: var(--color-gray-dark-mode-950);
959
- --color-bg-tertiary: var(--color-gray-dark-mode-800);
960
- --color-bg-brand-primary: var(--color-brand-500);
961
- --color-bg-error-secondary: var(--color-error-600);
962
- --color-bg-warning-primary: var(--color-warning-950);
963
- --color-bg-warning-secondary: var(--color-warning-600);
964
- --color-bg-success-primary: var(--color-success-950);
965
- --color-bg-success-secondary: var(--color-success-600);
966
- --color-bg-brand-solid: var(--color-brand-600);
967
- --color-bg-secondary-solid: var(--color-gray-dark-mode-600);
968
- --color-bg-error-solid: var(--color-error-600);
969
- --color-bg-warning-solid: var(--color-warning-600);
970
- --color-bg-success-solid: var(--color-success-600);
971
- --color-bg-secondary_hover: var(--color-gray-dark-mode-800);
972
- --color-bg-primary_hover: var(--color-gray-dark-mode-800);
973
- --color-bg-disabled: var(--color-gray-dark-mode-800);
974
- --color-bg-active: var(--color-gray-dark-mode-800);
975
- --color-bg-brand-solid_hover: var(--color-brand-500);
976
- --color-bg-error-primary: var(--color-error-950);
977
- --color-bg-brand-secondary: var(--color-brand-600);
978
- --color-bg-secondary: var(--color-gray-dark-mode-900);
979
- --color-bg-disabled_subtle: var(--color-gray-dark-mode-900);
980
- --color-bg-quaternary: var(--color-gray-dark-mode-700);
981
- --color-bg-primary_alt: var(--color-bg-secondary);
982
- --color-bg-brand-primary_alt: var(--color-bg-secondary);
983
- --color-bg-secondary_alt: var(--color-bg-primary);
984
- --color-bg-overlay: var(--color-gray-dark-mode-800);
985
- --color-bg-secondary_subtle: var(--color-gray-dark-mode-900);
986
- --color-bg-brand-section: var(--color-bg-secondary);
987
- --color-bg-brand-section_subtle: var(--color-bg-primary);
988
- --color-bg-primary-solid: var(--color-bg-secondary);
989
- --color-app-store-badge-border: var(--color-white);
990
- --color-avatar-bg: var(--color-gray-dark-mode-800);
991
- --color-avatar-contrast-border: rgb(255 255 255 / 0.12);
992
- --color-avatar-profile-photo-border: var(--color-gray-dark-mode-950);
993
- --color-avatar-styles-bg-neutral: rgb(224 224 224 / 1);
994
- --color-button-destructive-primary-icon: var(--color-error-300);
995
- --color-button-destructive-primary-icon_hover: var(--color-error-200);
996
- --color-button-primary-icon: var(--color-brand-300);
997
- --color-button-primary-icon_hover: var(--color-brand-200);
998
- --color-featured-icon-light-fg-brand: var(--color-brand-200);
999
- --color-featured-icon-light-fg-error: var(--color-error-200);
1000
- --color-featured-icon-light-fg-gray: var(--color-gray-dark-mode-200);
1001
- --color-featured-icon-light-fg-success: var(--color-success-200);
1002
- --color-featured-icon-light-fg-warning: var(--color-warning-200);
1003
- --color-focus-ring-error: var(--color-error-500);
1004
- --color-focus-ring: var(--color-brand-500);
1005
- --color-footer-button-fg: var(--color-gray-dark-mode-300);
1006
- --color-footer-button-fg_hover: var(--color-gray-dark-mode-100);
1007
- --color-header-abstract-100-bg: var(--color-gray-dark-mode-800);
1008
- --color-header-abstract-200-bg: var(--color-gray-dark-mode-700);
1009
- --color-header-abstract-300-bg: var(--color-gray-dark-mode-600);
1010
- --color-header-abstract-50-bg: var(--color-gray-dark-mode-900);
1011
- --color-icon-fg-brand: var(--color-gray-dark-mode-400);
1012
- --color-icon-fg-brand_on-brand: var(--color-gray-dark-mode-400);
1013
- --color-nav-item-button-icon-fg: var(--color-gray-dark-mode-400);
1014
- --color-nav-item-button-icon-fg_active: var(--color-gray-dark-mode-300);
1015
- --color-nav-item-icon-fg: var(--color-gray-dark-mode-400);
1016
- --color-nav-item-icon-fg_active: var(--color-gray-dark-mode-300);
1017
- --color-screen-mockup-border: var(--color-gray-dark-mode-700);
1018
- --color-shadow-2xl_01: var(--color-transparent);
1019
- --color-shadow-2xl_02: var(--color-transparent);
1020
- --color-shadow-3xl_01: var(--color-transparent);
1021
- --color-shadow-3xl_02: var(--color-transparent);
1022
- --color-shadow-grid-md: var(--color-transparent);
1023
- --color-shadow-lg_01: var(--color-transparent);
1024
- --color-shadow-lg_02: var(--color-transparent);
1025
- --color-shadow-lg_03: var(--color-transparent);
1026
- --color-shadow-main-centre-lg: var(--color-transparent);
1027
- --color-shadow-main-centre-md: var(--color-transparent);
1028
- --color-shadow-md_01: var(--color-transparent);
1029
- --color-shadow-md_02: var(--color-transparent);
1030
- --color-shadow-overlay-lg: var(--color-transparent);
1031
- --color-shadow-skeumorphic-inner-border: rgb(12 14 18 / 0.18);
1032
- --color-shadow-skeumorphic-inner: rgb(12 14 18 / 0.05);
1033
- --color-shadow-sm_01: var(--color-transparent);
1034
- --color-shadow-sm_02: var(--color-transparent);
1035
- --color-shadow-xl_01: var(--color-transparent);
1036
- --color-shadow-xl_02: var(--color-transparent);
1037
- --color-shadow-xl_03: var(--color-transparent);
1038
- --color-shadow-xs: var(--color-transparent);
1039
- --color-slider-handle-bg: var(--color-fg-brand-primary);
1040
- --color-slider-handle-border: var(--color-bg-primary);
1041
- --color-social-icon-fg-angellist: var(--color-white);
1042
- --color-social-icon-fg-apple: var(--color-white);
1043
- --color-social-icon-fg-github: var(--color-white);
1044
- --color-social-icon-fg-instagram: var(--color-white);
1045
- --color-social-icon-fg-tumblr: var(--color-white);
1046
- --color-social-icon-fg-x: var(--color-white);
767
+ /* COMPONENT COLORS */
768
+ --color-app-store-badge-border: rgb(166 166 166);
769
+ --color-avatar-bg: var(--color-gray-light-mode-100);
770
+ --color-avatar-contrast-border: rgb(0 0 0 / 0.08);
771
+ --color-avatar-profile-photo-border: var(--color-white);
772
+ --color-avatar-styles-bg-neutral: rgb(224 224 224);
773
+ --color-button-destructive-primary-icon: var(--color-error-300);
774
+ --color-button-destructive-primary-icon_hover: var(--color-error-200);
775
+ --color-button-primary-icon: var(--color-brand-300);
776
+ --color-button-primary-icon_hover: var(--color-brand-200);
777
+ --color-featured-icon-light-fg-brand: var(--color-brand-600);
778
+ --color-featured-icon-light-fg-error: var(--color-error-600);
779
+ --color-featured-icon-light-fg-gray: var(--color-gray-light-mode-500);
780
+ --color-featured-icon-light-fg-success: var(--color-success-600);
781
+ --color-featured-icon-light-fg-warning: var(--color-warning-600);
782
+ --color-focus-ring-error: var(--color-error-500);
783
+ --color-focus-ring: var(--color-brand-500);
784
+ --color-footer-button-fg: var(--color-brand-200);
785
+ --color-footer-button-fg_hover: var(--color-white);
786
+ --color-header-abstract-100-bg: var(--color-brand-100);
787
+ --color-header-abstract-200-bg: var(--color-brand-200);
788
+ --color-header-abstract-300-bg: var(--color-brand-300);
789
+ --color-header-abstract-50-bg: var(--color-brand-50);
790
+ --color-icon-fg-brand: var(--color-brand-600);
791
+ --color-icon-fg-brand_on-brand: var(--color-brand-200);
792
+ /* THESE NEED TO BE REMOED */
793
+ --color-nav-item-button-icon-fg: var(--color-gray-light-mode-500);
794
+ --color-nav-item-button-icon-fg_active: var(--color-gray-light-mode-700);
795
+ --color-nav-item-icon-fg: var(--color-gray-light-mode-500);
796
+ --color-nav-item-icon-fg_active: var(--color-gray-light-mode-500);
797
+ /* END OF THESE NEED TO BE REMOED */
798
+ --color-screen-mockup-border: var(--color-gray-light-mode-900);
799
+ --color-slider-handle-bg: var(--color-white);
800
+ --color-slider-handle-border: var(--color-brand-600);
801
+ --color-social-icon-fg-angellist: var(--color-black);
802
+ --color-social-icon-fg-apple: var(--color-black);
803
+ --color-social-icon-fg-github: var(--color-black);
804
+ --color-social-icon-fg-instagram: rgb(0 1 0 1);
805
+ --color-social-icon-fg-tumblr: rgb(0 25 53 1);
806
+ --color-social-icon-fg-x: rgb(36 46 54 1);
807
+ --color-toggle-border: var(--color-gray-light-mode-300);
808
+ --color-toggle-button-fg_disabled: var(--color-gray-light-mode-50);
809
+ --color-toggle-slim-border_pressed-hover: var(--color-bg-brand-solid_hover);
810
+ --color-toggle-slim-border_pressed: var(--color-bg-brand-solid);
811
+ --color-tooltip-supporting-text: var(--color-gray-light-mode-300);
812
+ --color-text-editor-icon-fg: var(--color-gray-light-mode-400);
813
+ --color-text-editor-icon-fg_active: var(--color-gray-light-mode-500);
1047
814
 
1048
- --color-toggle-border: var(--color-transparent);
1049
- --color-toggle-button-fg_disabled: var(--color-gray-dark-mode-600);
1050
- --color-toggle-slim-border_pressed-hover: var(--color-transparent);
1051
- --color-toggle-slim-border_pressed: var(--color-transparent);
1052
- --color-tooltip-supporting-text: var(--color-gray-dark-mode-300);
1053
- --color-text-editor-icon-fg: var(--color-gray-dark-mode-400);
1054
- --color-text-editor-icon-fg_active: var(--color-white);
815
+ /* BACKGROUND PROPERTY COLORS */
816
+ --background-color-quaternary: var(--color-bg-quaternary);
817
+ --background-color-brand-solid: var(--color-bg-brand-solid);
818
+ --background-color-disabled: var(--color-bg-disabled);
819
+ --background-color-primary: var(--color-bg-primary);
820
+ --background-color-primary-solid: var(--color-bg-primary-solid);
821
+ --background-color-primary_alt: var(--color-bg-primary_alt);
822
+ --background-color-primary_hover: var(--color-bg-primary_hover);
823
+ --background-color-secondary: var(--color-bg-secondary);
824
+ --background-color-secondary-solid: var(--color-bg-secondary-solid);
825
+ --background-color-secondary_alt: var(--color-bg-secondary_alt);
826
+ --background-color-secondary_hover: var(--color-bg-secondary_hover);
827
+ --background-color-secondary_subtle: var(--color-bg-secondary_subtle);
828
+ --background-color-tertiary: var(--color-bg-tertiary);
829
+ --background-color-active: var(--color-bg-active);
830
+ --background-color-disabled_subtle: var(--color-bg-disabled_subtle);
831
+ --background-color-overlay: var(--color-bg-overlay);
832
+ --background-color-brand-primary: var(--color-bg-brand-primary);
833
+ --background-color-brand-primary_alt: var(--color-bg-brand-primary_alt);
834
+ --background-color-brand-secondary: var(--color-bg-brand-secondary);
835
+ --background-color-brand-solid: var(--color-bg-brand-solid);
836
+ --background-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
837
+ --background-color-brand-section: var(--color-bg-brand-section);
838
+ --background-color-brand-section_subtle: var(--color-bg-brand-section_subtle);
839
+ --background-color-error-primary: var(--color-bg-error-primary);
840
+ --background-color-error-secondary: var(--color-bg-error-secondary);
841
+ --background-color-error-solid: var(--color-bg-error-solid);
842
+ --background-color-warning-primary: var(--color-bg-warning-primary);
843
+ --background-color-warning-secondary: var(--color-bg-warning-secondary);
844
+ --background-color-warning-solid: var(--color-bg-warning-solid);
845
+ --background-color-success-primary: var(--color-bg-success-primary);
846
+ --background-color-success-secondary: var(--color-bg-success-secondary);
847
+ --background-color-success-solid: var(--color-bg-success-solid);
848
+ --background-color-border-brand: var(--color-border-brand);
849
+ --background-color-border-tertiary: var(--color-border-tertiary);
850
+ --background-color-border-brand_alt: var(--color-border-brand_alt);
851
+
852
+ /* TEXT PROPERTY COLORS */
853
+ --text-color-primary: var(--color-text-primary);
854
+ --text-color-primary_on-brand: var(--color-text-primary_on-brand);
855
+ --text-color-secondary: var(--color-text-secondary);
856
+ --text-color-secondary_hover: var(--color-text-secondary_hover);
857
+ --text-color-secondary_on-brand: var(--color-text-secondary_on-brand);
858
+ --text-color-tertiary: var(--color-text-tertiary);
859
+ --text-color-tertiary_hover: var(--color-text-tertiary_hover);
860
+ --text-color-tertiary_on-brand: var(--color-text-tertiary_on-brand);
861
+ --text-color-quaternary: var(--color-text-quaternary);
862
+ --text-color-quaternary_on-brand: var(--color-text-quaternary_on-brand);
863
+ --text-color-disabled: var(--color-text-disabled);
864
+ --text-color-placeholder: var(--color-text-placeholder);
865
+ --text-color-placeholder_subtle: var(--color-text-placeholder_subtle);
866
+ --text-color-brand-primary: var(--color-text-brand-primary);
867
+ --text-color-brand-secondary: var(--color-text-brand-secondary);
868
+ --text-color-brand-secondary_hover: var(--color-text-brand-secondary_hover);
869
+ --text-color-brand-tertiary: var(--color-text-brand-tertiary);
870
+ --text-color-brand-tertiary_alt: var(--color-text-brand-tertiary_alt);
871
+ --text-color-error-primary: var(--color-text-error-primary);
872
+ --text-color-error-primary_hover: var(--color-text-error-primary_hover);
873
+ --text-color-warning-primary: var(--color-text-warning-primary);
874
+ --text-color-success-primary: var(--color-text-success-primary);
875
+ --text-color-tooltip-supporting-text: var(--color-tooltip-supporting-text);
876
+
877
+ /* BORDER PROPERTY COLORS */
878
+ --border-color-primary: var(--color-border-primary);
879
+ --border-color-secondary: var(--color-border-secondary);
880
+ --border-color-secondary_alt: var(--color-border-secondary_alt);
881
+ --border-color-tertiary: var(--color-border-tertiary);
882
+ --border-color-disabled: var(--color-border-disabled);
883
+ --border-color-brand: var(--color-border-brand);
884
+ --border-color-brand-solid: var(--color-bg-brand-solid);
885
+ --border-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
886
+ --border-color-error: var(--color-border-error);
887
+ --border-color-disabled_subtle: var(--color-border-disabled_subtle);
888
+ --border-color-brand_alt: var(--color-border-brand_alt);
889
+ --border-color-error_subtle: var(--color-border-error_subtle);
890
+
891
+ /* RING PROPERTY COLORS */
892
+ --ring-color-bg-brand-solid: var(--color-bg-brand-solid);
893
+ --ring-color-border-primary: var(--color-border-primary);
894
+ --ring-color-border-secondary: var(--color-border-secondary);
895
+ --ring-color-border-tertiary: var(--color-border-tertiary);
896
+ --ring-color-border-disabled: var(--color-border-disabled);
897
+ --ring-color-border-brand: var(--color-border-brand);
898
+ --ring-color-border-error: var(--color-border-error);
899
+ --ring-color-border-disabled_subtle: var(--color-border-disabled_subtle);
900
+ --ring-color-border-brand_alt: var(--color-border-brand_alt);
901
+ --ring-color-border-error_subtle: var(--color-border-error_subtle);
902
+
903
+ /* OUTLINE PROPERTY COLORS */
904
+ --outline-color-brand: var(--color-border-brand);
905
+ --outline-color-primary: var(--color-border-primary);
906
+ --outline-color-secondary: var(--color-border-secondary);
907
+ --outline-color-secondary_alt: var(--color-border-secondary_alt);
908
+ --outline-color-error: var(--color-border-error);
909
+ }
910
+
911
+ @layer base {
912
+ /* DARK MODE VARIABLES */
913
+
914
+ .dark-mode {
915
+ --color-alpha-white: rgb(12 14 18);
916
+ --color-alpha-black: rgb(255 255 255);
917
+
918
+ /* UTILITY COLORS */
1055
919
 
1056
920
  --color-utility-blue-50: var(--color-blue-950);
1057
921
  --color-utility-blue-100: var(--color-blue-900);
@@ -1220,8 +1084,151 @@
1220
1084
  --color-utility-yellow-600: var(--color-yellow-400);
1221
1085
  --color-utility-yellow-700: var(--color-yellow-300);
1222
1086
 
1087
+ /* TEXT COLORS */
1088
+
1089
+ --color-text-primary: var(--color-gray-dark-mode-50);
1090
+ --color-text-tertiary: var(--color-gray-dark-mode-400);
1091
+ --color-text-error-primary: var(--color-error-400);
1092
+ --color-text-warning-primary: var(--color-warning-400);
1093
+ --color-text-success-primary: var(--color-success-400);
1094
+ --color-text-white: var(--color-white);
1095
+ --color-text-secondary: var(--color-gray-dark-mode-300);
1096
+ --color-text-disabled: var(--color-gray-dark-mode-500);
1097
+ --color-text-secondary_hover: var(--color-gray-dark-mode-200);
1098
+ --color-text-tertiary_hover: var(--color-gray-dark-mode-300);
1099
+ --color-text-brand-secondary: var(--color-gray-dark-mode-300);
1100
+ --color-text-placeholder: var(--color-gray-dark-mode-500);
1101
+ --color-text-placeholder_subtle: var(--color-gray-dark-mode-700);
1102
+ --color-text-brand-tertiary: var(--color-gray-dark-mode-400);
1103
+ --color-text-editor-icon-fg: var(--color-gray-dark-mode-400);
1104
+ --color-text-editor-icon-fg_active: var(--color-white);
1105
+ --color-text-quaternary: var(--color-gray-dark-mode-400);
1106
+ --color-text-brand-primary: var(--color-gray-dark-mode-50);
1107
+ --color-text-primary_on-brand: var(--color-gray-dark-mode-50);
1108
+ --color-text-secondary_on-brand: var(--color-gray-dark-mode-300);
1109
+ --color-text-tertiary_on-brand: var(--color-gray-dark-mode-400);
1110
+ --color-text-quaternary_on-brand: var(--color-gray-dark-mode-400);
1111
+ --color-text-brand-tertiary_alt: var(--color-gray-dark-mode-50);
1112
+ --color-text-brand-secondary_hover: var(--color-gray-dark-mode-200);
1113
+ --color-text-error-primary_hover: var(--color-error-300);
1114
+
1115
+ /* BORDER COLORS */
1116
+ --color-border-secondary: var(--color-gray-dark-mode-800);
1117
+ --color-border-error_subtle: var(--color-error-500);
1118
+ --color-border-primary: var(--color-gray-dark-mode-700);
1119
+ --color-border-brand: var(--color-brand-400);
1120
+ --color-border-disabled: var(--color-gray-dark-mode-700);
1121
+ --color-border-error: var(--color-error-400);
1122
+ --color-border-disabled_subtle: var(--color-gray-dark-mode-800);
1123
+ --color-border-tertiary: var(--color-gray-dark-mode-800);
1124
+ --color-border-brand_alt: var(--color-gray-dark-mode-700);
1125
+ --color-border-secondary_alt: var(--color-gray-dark-mode-700);
1126
+
1127
+ /* FOREGROUND COLORS */
1128
+ --color-fg-secondary: var(--color-gray-dark-mode-300);
1129
+ --color-fg-warning-primary: var(--color-warning-500);
1130
+ --color-fg-success-primary: var(--color-success-500);
1131
+ --color-fg-white: var(--color-white);
1132
+ --color-fg-success-secondary: var(--color-success-400);
1133
+ --color-fg-secondary_hover: var(--color-gray-dark-mode-200);
1134
+ --color-fg-primary: var(--color-white);
1135
+ --color-fg-disabled: var(--color-gray-dark-mode-500);
1136
+ --color-fg-brand-secondary: var(--color-brand-500);
1137
+ --color-fg-brand-primary: var(--color-brand-500);
1138
+ --color-fg-quaternary: var(--color-gray-dark-mode-600);
1139
+ --color-fg-quaternary_hover: var(--color-gray-dark-mode-500);
1140
+ --color-fg-error-primary: var(--color-error-500);
1141
+ --color-fg-disabled_subtle: var(--color-gray-dark-mode-600);
1142
+ --color-fg-warning-secondary: var(--color-warning-400);
1143
+ --color-fg-error-secondary: var(--color-error-400);
1144
+ --color-fg-tertiary: var(--color-gray-dark-mode-400);
1145
+ --color-fg-tertiary_hover: var(--color-gray-dark-mode-300);
1146
+ --color-fg-brand-primary_alt: var(--color-gray-dark-mode-300);
1147
+ --color-fg-brand-secondary_alt: var(--color-gray-dark-mode-600);
1148
+ --color-fg-brand-secondary_hover: var(--color-gray-dark-mode-500);
1149
+
1150
+ /* BACKGROUND COLORS */
1151
+ --color-bg-primary: var(--color-gray-dark-mode-950);
1152
+ --color-bg-tertiary: var(--color-gray-dark-mode-800);
1153
+ --color-bg-brand-primary: var(--color-brand-500);
1154
+ --color-bg-error-secondary: var(--color-error-600);
1155
+ --color-bg-warning-primary: var(--color-warning-950);
1156
+ --color-bg-warning-secondary: var(--color-warning-600);
1157
+ --color-bg-success-primary: var(--color-success-950);
1158
+ --color-bg-success-secondary: var(--color-success-600);
1159
+ --color-bg-brand-solid: var(--color-brand-600);
1160
+ --color-bg-secondary-solid: var(--color-gray-dark-mode-600);
1161
+ --color-bg-error-solid: var(--color-error-600);
1162
+ --color-bg-warning-solid: var(--color-warning-600);
1163
+ --color-bg-success-solid: var(--color-success-600);
1164
+ --color-bg-secondary_hover: var(--color-gray-dark-mode-800);
1165
+ --color-bg-primary_hover: var(--color-gray-dark-mode-800);
1166
+ --color-bg-disabled: var(--color-gray-dark-mode-800);
1167
+ --color-bg-active: var(--color-gray-dark-mode-800);
1168
+ --color-bg-brand-solid_hover: var(--color-brand-500);
1169
+ --color-bg-error-primary: var(--color-error-950);
1170
+ --color-bg-brand-secondary: var(--color-brand-600);
1171
+ --color-bg-secondary: var(--color-gray-dark-mode-900);
1172
+ --color-bg-disabled_subtle: var(--color-gray-dark-mode-900);
1173
+ --color-bg-quaternary: var(--color-gray-dark-mode-700);
1174
+ --color-bg-primary_alt: var(--color-bg-secondary);
1175
+ --color-bg-brand-primary_alt: var(--color-bg-secondary);
1176
+ --color-bg-secondary_alt: var(--color-bg-primary);
1177
+ --color-bg-overlay: var(--color-gray-dark-mode-800);
1178
+ --color-bg-secondary_subtle: var(--color-gray-dark-mode-900);
1179
+ --color-bg-brand-section: var(--color-bg-secondary);
1180
+ --color-bg-brand-section_subtle: var(--color-bg-primary);
1181
+ --color-bg-primary-solid: var(--color-bg-secondary);
1182
+
1183
+ /* COMPONENT COLORS */
1184
+ --color-app-store-badge-border: var(--color-white);
1185
+ --color-avatar-bg: var(--color-gray-dark-mode-800);
1186
+ --color-avatar-contrast-border: rgb(255 255 255 / 0.12);
1187
+ --color-avatar-profile-photo-border: var(--color-gray-dark-mode-950);
1188
+ --color-avatar-styles-bg-neutral: rgb(224 224 224 / 1);
1189
+ --color-button-destructive-primary-icon: var(--color-error-300);
1190
+ --color-button-destructive-primary-icon_hover: var(--color-error-200);
1191
+ --color-button-primary-icon: var(--color-brand-300);
1192
+ --color-button-primary-icon_hover: var(--color-brand-200);
1193
+ --color-featured-icon-light-fg-brand: var(--color-brand-200);
1194
+ --color-featured-icon-light-fg-error: var(--color-error-200);
1195
+ --color-featured-icon-light-fg-gray: var(--color-gray-dark-mode-200);
1196
+ --color-featured-icon-light-fg-success: var(--color-success-200);
1197
+ --color-featured-icon-light-fg-warning: var(--color-warning-200);
1198
+ --color-focus-ring-error: var(--color-error-500);
1199
+ --color-focus-ring: var(--color-brand-500);
1200
+ --color-footer-button-fg: var(--color-gray-dark-mode-300);
1201
+ --color-footer-button-fg_hover: var(--color-gray-dark-mode-100);
1202
+ --color-header-abstract-100-bg: var(--color-gray-dark-mode-800);
1203
+ --color-header-abstract-200-bg: var(--color-gray-dark-mode-700);
1204
+ --color-header-abstract-300-bg: var(--color-gray-dark-mode-600);
1205
+ --color-header-abstract-50-bg: var(--color-gray-dark-mode-900);
1206
+ --color-icon-fg-brand: var(--color-gray-dark-mode-400);
1207
+ --color-icon-fg-brand_on-brand: var(--color-gray-dark-mode-400);
1208
+ --color-nav-item-button-icon-fg: var(--color-gray-dark-mode-400);
1209
+ --color-nav-item-button-icon-fg_active: var(--color-gray-dark-mode-300);
1210
+ --color-nav-item-icon-fg: var(--color-gray-dark-mode-400);
1211
+ --color-nav-item-icon-fg_active: var(--color-gray-dark-mode-300);
1212
+ --color-screen-mockup-border: var(--color-gray-dark-mode-700);
1213
+ --color-slider-handle-bg: var(--color-fg-brand-primary);
1214
+ --color-slider-handle-border: var(--color-bg-primary);
1215
+ --color-social-icon-fg-angellist: var(--color-white);
1216
+ --color-social-icon-fg-apple: var(--color-white);
1217
+ --color-social-icon-fg-github: var(--color-white);
1218
+ --color-social-icon-fg-instagram: var(--color-white);
1219
+ --color-social-icon-fg-tumblr: var(--color-white);
1220
+ --color-social-icon-fg-x: var(--color-white);
1221
+ --color-toggle-border: var(--color-transparent);
1222
+ --color-toggle-button-fg_disabled: var(--color-gray-dark-mode-600);
1223
+ --color-toggle-slim-border_pressed-hover: var(--color-transparent);
1224
+ --color-toggle-slim-border_pressed: var(--color-transparent);
1225
+ --color-tooltip-supporting-text: var(--color-gray-dark-mode-300);
1226
+ --color-text-editor-icon-fg: var(--color-gray-dark-mode-400);
1227
+ --color-text-editor-icon-fg_active: var(--color-white);
1228
+
1223
1229
  /* THESE SHOULD IDEALLY BE REMOVED */
1224
1230
 
1231
+ /* BACKGROUND PROPERTY COLORS */
1225
1232
  --background-color-quaternary: var(--color-bg-quaternary);
1226
1233
  --background-color-brand-solid: var(--color-bg-brand-solid);
1227
1234
  --background-color-disabled: var(--color-bg-disabled);
@@ -1258,6 +1265,7 @@
1258
1265
  --background-color-border-tertiary: var(--color-border-tertiary);
1259
1266
  --background-color-border-brand_alt: var(--color-border-brand_alt);
1260
1267
 
1268
+ /* TEXT PROPERTY COLORS */
1261
1269
  --text-color-primary: var(--color-text-primary);
1262
1270
  --text-color-primary_on-brand: var(--color-text-primary_on-brand);
1263
1271
  --text-color-secondary: var(--color-text-secondary);
@@ -1280,6 +1288,7 @@
1280
1288
  --text-color-success-primary: var(--color-text-success-primary);
1281
1289
  --text-color-tooltip-supporting-text: var(--color-tooltip-supporting-text);
1282
1290
 
1291
+ /* BORDER PROPERTY COLORS */
1283
1292
  --border-color-primary: var(--color-border-primary);
1284
1293
  --border-color-secondary: var(--color-border-secondary);
1285
1294
  --border-color-tertiary: var(--color-border-tertiary);
@@ -1292,6 +1301,7 @@
1292
1301
  --border-color-brand_alt: var(--color-border-brand_alt);
1293
1302
  --border-color-error_subtle: var(--color-border-error_subtle);
1294
1303
 
1304
+ /* RING PROPERTY COLORS */
1295
1305
  --ring-color-bg-brand-solid: var(--color-bg-brand-solid);
1296
1306
  --ring-color-border-primary: var(--color-border-primary);
1297
1307
  --ring-color-border-secondary: var(--color-border-secondary);
@@ -1303,8 +1313,10 @@
1303
1313
  --ring-color-border-brand_alt: var(--color-border-brand_alt);
1304
1314
  --ring-color-border-error_subtle: var(--color-border-error_subtle);
1305
1315
 
1316
+ /* OUTLINE PROPERTY COLORS */
1306
1317
  --outline-color-brand: var(--color-border-brand);
1307
1318
  --outline-color-primary: var(--color-border-primary);
1308
1319
  --outline-color-secondary: var(--color-border-secondary);
1309
1320
  --outline-color-error: var(--color-border-error);
1321
+ }
1310
1322
  }