@payfit/unity-themes 2.28.1 → 2.28.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.
- package/dist/css/unity.css +94 -52
- package/package.json +1 -1
- package/tokens/rebrand/colors.json +121 -52
package/dist/css/unity.css
CHANGED
|
@@ -705,13 +705,13 @@
|
|
|
705
705
|
--uy-color-yellow-l1: oklch(97.915% 0.03037 98.851);
|
|
706
706
|
--uy-color-yellow-l2: oklch(95.518% 0.06994 99.662);
|
|
707
707
|
--uy-color-yellow-l3: oklch(90.451% 0.12113 97.006);
|
|
708
|
-
--uy-color-yellow-l4: oklch(
|
|
709
|
-
--uy-color-yellow-l5: oklch(
|
|
710
|
-
--uy-color-yellow-l6: oklch(
|
|
711
|
-
--uy-color-yellow-l7: oklch(
|
|
712
|
-
--uy-color-yellow-l8: oklch(
|
|
713
|
-
--uy-color-yellow-l9: oklch(
|
|
714
|
-
--uy-color-yellow-l10: oklch(
|
|
708
|
+
--uy-color-yellow-l4: oklch(93.832% 0.09742 100.44);
|
|
709
|
+
--uy-color-yellow-l5: oklch(89.595% 0.13091 97.032);
|
|
710
|
+
--uy-color-yellow-l6: oklch(84.352% 0.16318 90.591);
|
|
711
|
+
--uy-color-yellow-l7: oklch(77.818% 0.15947 85.077);
|
|
712
|
+
--uy-color-yellow-l8: oklch(69.416% 0.14464 76.061);
|
|
713
|
+
--uy-color-yellow-l9: oklch(63.915% 0.13445 73.481);
|
|
714
|
+
--uy-color-yellow-l10: oklch(54.002% 0.11336 74.267);
|
|
715
715
|
--uy-color-yellow-l11: oklch(30.395% 0.06335 78.023);
|
|
716
716
|
--uy-color-yellow-l12: oklch(22.149% 0.0459 79.81);
|
|
717
717
|
--uy-color-cyan-l1: oklch(97.886% 0.00986 267.36);
|
|
@@ -719,15 +719,15 @@
|
|
|
719
719
|
--uy-color-cyan-l3: oklch(88.875% 0.0523 253.72);
|
|
720
720
|
--uy-color-cyan-l4: oklch(84.58% 0.07513 252.94);
|
|
721
721
|
--uy-color-cyan-l5: oklch(77.464% 0.10865 254.47);
|
|
722
|
-
--uy-color-cyan-l6: oklch(61.
|
|
723
|
-
--uy-color-cyan-l7: oklch(
|
|
722
|
+
--uy-color-cyan-l6: oklch(61.837% 0.19835 264.1);
|
|
723
|
+
--uy-color-cyan-l7: oklch(49.463% 0.23537 263.16);
|
|
724
724
|
--uy-color-cyan-l8: oklch(45.699% 0.23019 263.15);
|
|
725
725
|
--uy-color-cyan-l9: oklch(37.762% 0.18821 262.89);
|
|
726
726
|
--uy-color-cyan-l10: oklch(34.112% 0.16828 262.78);
|
|
727
727
|
--uy-color-cyan-l11: oklch(26.594% 0.12371 262.08);
|
|
728
728
|
--uy-color-cyan-l12: oklch(17.635% 0.07085 259.71);
|
|
729
729
|
--uy-color-blue-l1: oklch(97.952% 0.01094 225.98);
|
|
730
|
-
--uy-color-blue-l2: oklch(
|
|
730
|
+
--uy-color-blue-l2: oklch(96.382% 0.02364 223.67);
|
|
731
731
|
--uy-color-blue-l3: oklch(93.309% 0.03781 224.26);
|
|
732
732
|
--uy-color-blue-l4: oklch(86.944% 0.07387 225.17);
|
|
733
733
|
--uy-color-blue-l5: oklch(79.937% 0.09849 228.77);
|
|
@@ -752,11 +752,11 @@
|
|
|
752
752
|
--uy-color-purple-l12: oklch(16.492% 0.08864 298.76);
|
|
753
753
|
--uy-color-plum-l1: oklch(98.074% 0.01687 325.7);
|
|
754
754
|
--uy-color-plum-l2: oklch(95.054% 0.0442 325.92);
|
|
755
|
-
--uy-color-plum-l3: oklch(89.
|
|
756
|
-
--uy-color-plum-l4: oklch(
|
|
757
|
-
--uy-color-plum-l5: oklch(
|
|
755
|
+
--uy-color-plum-l3: oklch(89.634% 0.09612 326.34);
|
|
756
|
+
--uy-color-plum-l4: oklch(84.63% 0.14779 326.78);
|
|
757
|
+
--uy-color-plum-l5: oklch(77.951% 0.22327 327.45);
|
|
758
758
|
--uy-color-plum-l6: oklch(70.055% 0.26778 327.97);
|
|
759
|
-
--uy-color-plum-l7: oklch(
|
|
759
|
+
--uy-color-plum-l7: oklch(66.973% 0.30481 328.34);
|
|
760
760
|
--uy-color-plum-l8: oklch(60.393% 0.27757 328.36);
|
|
761
761
|
--uy-color-plum-l9: oklch(55.799% 0.25645 328.36);
|
|
762
762
|
--uy-color-plum-l10: oklch(41.854% 0.19236 328.36);
|
|
@@ -776,13 +776,13 @@
|
|
|
776
776
|
--uy-color-sunglow-l10: oklch(55.358% 0.10103 84.486);
|
|
777
777
|
--uy-color-sunglow-l11: oklch(41.232% 0.07399 83.781);
|
|
778
778
|
--uy-color-sunglow-l12: oklch(28.544% 0.05865 83.417);
|
|
779
|
-
--uy-color-teal-l1: oklch(98.
|
|
780
|
-
--uy-color-teal-l2: oklch(
|
|
781
|
-
--uy-color-teal-l3: oklch(
|
|
782
|
-
--uy-color-teal-l4: oklch(93.
|
|
783
|
-
--uy-color-teal-l5: oklch(
|
|
784
|
-
--uy-color-teal-l6: oklch(
|
|
785
|
-
--uy-color-teal-l7: oklch(81.
|
|
779
|
+
--uy-color-teal-l1: oklch(98.684% 0.01389 185.97);
|
|
780
|
+
--uy-color-teal-l2: oklch(96.544% 0.02736 188.32);
|
|
781
|
+
--uy-color-teal-l3: oklch(94.626% 0.05078 185.69);
|
|
782
|
+
--uy-color-teal-l4: oklch(93.062% 0.07454 184.48);
|
|
783
|
+
--uy-color-teal-l5: oklch(89.504% 0.09816 184.34);
|
|
784
|
+
--uy-color-teal-l6: oklch(83.729% 0.13003 182.66);
|
|
785
|
+
--uy-color-teal-l7: oklch(81.175% 0.14302 180.05);
|
|
786
786
|
--uy-color-teal-l8: oklch(75.655% 0.13859 178.63);
|
|
787
787
|
--uy-color-teal-l9: oklch(64.039% 0.11735 178.57);
|
|
788
788
|
--uy-color-teal-l10: oklch(53.68% 0.09858 178.28);
|
|
@@ -826,11 +826,11 @@
|
|
|
826
826
|
--uy-color-surface-primary-highest: var(--uy-color-plum-l10);
|
|
827
827
|
--uy-color-surface-primary-high: var(--uy-color-plum-l8);
|
|
828
828
|
--uy-color-surface-primary: var(--uy-color-plum-l6);
|
|
829
|
-
--uy-color-surface-primary-enabled: var(--uy-color-
|
|
830
|
-
--uy-color-surface-primary-hover: var(--uy-color-
|
|
831
|
-
--uy-color-surface-primary-pressed: var(--uy-color-plum-
|
|
832
|
-
--uy-color-surface-primary-focus: var(--uy-color-
|
|
833
|
-
--uy-color-surface-primary-active: var(--uy-color-
|
|
829
|
+
--uy-color-surface-primary-enabled: var(--uy-color-plum-l6);
|
|
830
|
+
--uy-color-surface-primary-hover: var(--uy-color-plum-l7);
|
|
831
|
+
--uy-color-surface-primary-pressed: var(--uy-color-plum-l8);
|
|
832
|
+
--uy-color-surface-primary-focus: var(--uy-color-plum-l6);
|
|
833
|
+
--uy-color-surface-primary-active: var(--uy-color-plum-l6);
|
|
834
834
|
--uy-color-surface-primary-disabled: var(--uy-color-grayscale-l5);
|
|
835
835
|
--uy-color-surface-primary-low: var(--uy-color-plum-l3);
|
|
836
836
|
--uy-color-surface-primary-lowest: var(--uy-color-plum-l1);
|
|
@@ -861,9 +861,17 @@
|
|
|
861
861
|
--uy-color-surface-neutral-lowest-hover: var(--uy-color-grayscale-l5);
|
|
862
862
|
--uy-color-surface-neutral-lowest-pressed: var(--uy-color-grayscale-l6);
|
|
863
863
|
--uy-color-surface-neutral-lowest-focus: var(--uy-color-grayscale-l4);
|
|
864
|
-
--uy-color-surface-neutral-lowest-active: var(--uy-color-grayscale-
|
|
864
|
+
--uy-color-surface-neutral-lowest-active: var(--uy-color-grayscale-l5);
|
|
865
865
|
--uy-color-surface-neutral-lowest-disabled: var(--uy-color-grayscale-l4);
|
|
866
866
|
--uy-color-surface-neutral-lowest-selected: var(--uy-color-grayscale-l6);
|
|
867
|
+
--uy-color-surface-neutral-highest: var(--uy-color-grayscale-l12);
|
|
868
|
+
--uy-color-surface-neutral-highest-enabled: var(--uy-color-grayscale-l12);
|
|
869
|
+
--uy-color-surface-neutral-highest-hover: var(--uy-color-grayscale-l11);
|
|
870
|
+
--uy-color-surface-neutral-highest-pressed: var(--uy-color-plum-l5);
|
|
871
|
+
--uy-color-surface-neutral-highest-active: var(--uy-color-grayscale-l12);
|
|
872
|
+
--uy-color-surface-neutral-highest-focus: var(--uy-color-grayscale-l12);
|
|
873
|
+
--uy-color-surface-neutral-highest-disabled: var(--uy-color-grayscale-l5);
|
|
874
|
+
--uy-color-surface-neutral-highest-selected: var(--uy-color-grayscale-l12);
|
|
867
875
|
--uy-color-surface-danger: var(--uy-color-red-l7);
|
|
868
876
|
--uy-color-surface-danger-enabled: var(--uy-color-red-l7);
|
|
869
877
|
--uy-color-surface-danger-hover: var(--uy-color-red-l8);
|
|
@@ -921,9 +929,9 @@
|
|
|
921
929
|
--uy-color-surface-form-pressed: var(--uy-color-grayscale-l0);
|
|
922
930
|
--uy-color-surface-form-focus: var(--uy-color-grayscale-l0);
|
|
923
931
|
--uy-color-surface-form-active: var(--uy-color-plum-l6);
|
|
924
|
-
--uy-color-surface-form-selected: var(--uy-color-plum-
|
|
932
|
+
--uy-color-surface-form-selected: var(--uy-color-plum-l2);
|
|
925
933
|
--uy-color-surface-form-disabled: var(--uy-color-grayscale-l3);
|
|
926
|
-
--uy-color-surface-form-read-only: var(--uy-color-grayscale-
|
|
934
|
+
--uy-color-surface-form-read-only: var(--uy-color-grayscale-l9);
|
|
927
935
|
--uy-color-surface-form-error: var(--uy-color-red-l2);
|
|
928
936
|
--uy-color-surface-form-high-enabled: var(--uy-color-grayscale-l3);
|
|
929
937
|
--uy-color-surface-form-high-hover: var(--uy-color-grayscale-l4);
|
|
@@ -940,29 +948,35 @@
|
|
|
940
948
|
--uy-color-surface-inverted-pressed: var(--uy-color-grayscale-l11);
|
|
941
949
|
--uy-color-surface-inverted-focus: var(--uy-color-grayscale-l12);
|
|
942
950
|
--uy-color-surface-inverted-active: var(--uy-color-grayscale-l11);
|
|
951
|
+
--uy-color-surface-inverted-low-enabled: var(--uy-color-grayscale-l11);
|
|
952
|
+
--uy-color-surface-inverted-low-hover: var(--uy-color-grayscale-l10);
|
|
953
|
+
--uy-color-surface-inverted-low-pressed: var(--uy-color-grayscale-l11);
|
|
954
|
+
--uy-color-surface-inverted-low-active: var(--uy-color-grayscale-l11);
|
|
955
|
+
--uy-color-surface-inverted-low-focus: var(--uy-color-grayscale-l11);
|
|
956
|
+
--uy-color-surface-inverted-low-disabled: var(--uy-color-grayscale-l10);
|
|
943
957
|
--uy-color-surface-decorative-teal: var(--uy-color-teal-l6);
|
|
944
958
|
--uy-color-surface-decorative-teal-high: var(--uy-color-teal-l9);
|
|
945
|
-
--uy-color-surface-decorative-teal-low: var(--uy-color-teal-
|
|
946
|
-
--uy-color-surface-decorative-teal-lowest: var(--uy-color-teal-
|
|
959
|
+
--uy-color-surface-decorative-teal-low: var(--uy-color-teal-l2);
|
|
960
|
+
--uy-color-surface-decorative-teal-lowest: var(--uy-color-teal-l1);
|
|
947
961
|
--uy-color-surface-decorative-purple-high: var(--uy-color-purple-l9);
|
|
948
962
|
--uy-color-surface-decorative-purple: var(--uy-color-purple-l6);
|
|
949
|
-
--uy-color-surface-decorative-purple-low: var(--uy-color-purple-
|
|
950
|
-
--uy-color-surface-decorative-purple-lowest: var(--uy-color-purple-
|
|
963
|
+
--uy-color-surface-decorative-purple-low: var(--uy-color-purple-l2);
|
|
964
|
+
--uy-color-surface-decorative-purple-lowest: var(--uy-color-purple-l1);
|
|
951
965
|
--uy-color-surface-decorative-plum: var(--uy-color-plum-l6);
|
|
952
966
|
--uy-color-surface-decorative-plum-high: var(--uy-color-plum-l9);
|
|
953
|
-
--uy-color-surface-decorative-plum-low: var(--uy-color-plum-
|
|
954
|
-
--uy-color-surface-decorative-plum-lowest: var(--uy-color-plum-
|
|
967
|
+
--uy-color-surface-decorative-plum-low: var(--uy-color-plum-l2);
|
|
968
|
+
--uy-color-surface-decorative-plum-lowest: var(--uy-color-plum-l1);
|
|
955
969
|
--uy-color-surface-decorative-orange: var(--uy-color-orange-l6);
|
|
956
970
|
--uy-color-surface-decorative-orange-high: var(--uy-color-orange-l9);
|
|
957
|
-
--uy-color-surface-decorative-orange-low: var(--uy-color-orange-
|
|
958
|
-
--uy-color-surface-decorative-orange-lowest: var(--uy-color-orange-
|
|
971
|
+
--uy-color-surface-decorative-orange-low: var(--uy-color-orange-l2);
|
|
972
|
+
--uy-color-surface-decorative-orange-lowest: var(--uy-color-orange-l1);
|
|
959
973
|
--uy-color-content-primary: var(--uy-color-plum-l6);
|
|
960
|
-
--uy-color-content-primary-enabled: var(--uy-color-
|
|
961
|
-
--uy-color-content-primary-hover: var(--uy-color-
|
|
962
|
-
--uy-color-content-primary-pressed: var(--uy-color-
|
|
963
|
-
--uy-color-content-primary-focus: var(--uy-color-
|
|
964
|
-
--uy-color-content-primary-active: var(--uy-color-
|
|
965
|
-
--uy-color-content-primary-disabled: var(--uy-color-grayscale-
|
|
974
|
+
--uy-color-content-primary-enabled: var(--uy-color-plum-l8);
|
|
975
|
+
--uy-color-content-primary-hover: var(--uy-color-plum-l9);
|
|
976
|
+
--uy-color-content-primary-pressed: var(--uy-color-plum-l10);
|
|
977
|
+
--uy-color-content-primary-focus: var(--uy-color-plum-l8);
|
|
978
|
+
--uy-color-content-primary-active: var(--uy-color-plum-l8);
|
|
979
|
+
--uy-color-content-primary-disabled: var(--uy-color-grayscale-l7);
|
|
966
980
|
--uy-color-content-primary-high: var(--uy-color-plum-l10);
|
|
967
981
|
--uy-color-content-neutral: var(--uy-color-grayscale-l12);
|
|
968
982
|
--uy-color-content-neutral-enabled: var(--uy-color-grayscale-l12);
|
|
@@ -1025,7 +1039,7 @@
|
|
|
1025
1039
|
--uy-color-content-inverted: var(--uy-color-grayscale-l0);
|
|
1026
1040
|
--uy-color-content-inverted-enabled: var(--uy-color-grayscale-l0);
|
|
1027
1041
|
--uy-color-content-inverted-hover: var(--uy-color-grayscale-l0);
|
|
1028
|
-
--uy-color-content-inverted-pressed: var(--uy-color-grayscale-
|
|
1042
|
+
--uy-color-content-inverted-pressed: var(--uy-color-grayscale-l0);
|
|
1029
1043
|
--uy-color-content-inverted-focus: var(--uy-color-grayscale-l0);
|
|
1030
1044
|
--uy-color-content-inverted-active: var(--uy-color-grayscale-l0);
|
|
1031
1045
|
--uy-color-content-inverted-disabled: var(--uy-color-grayscale-l7);
|
|
@@ -1037,12 +1051,12 @@
|
|
|
1037
1051
|
--uy-color-content-decorative-plum-high: var(--uy-color-plum-l10);
|
|
1038
1052
|
--uy-color-content-decorative-orange: var(--uy-color-orange-l6);
|
|
1039
1053
|
--uy-color-content-decorative-orange-high: var(--uy-color-orange-l10);
|
|
1040
|
-
--uy-color-border-primary: var(--uy-color-
|
|
1041
|
-
--uy-color-border-primary-enabled: var(--uy-color-
|
|
1042
|
-
--uy-color-border-primary-hover: var(--uy-color-
|
|
1043
|
-
--uy-color-border-primary-pressed: var(--uy-color-
|
|
1044
|
-
--uy-color-border-primary-focus: var(--uy-color-
|
|
1045
|
-
--uy-color-border-primary-active: var(--uy-color-
|
|
1054
|
+
--uy-color-border-primary: var(--uy-color-plum-l7);
|
|
1055
|
+
--uy-color-border-primary-enabled: var(--uy-color-plum-l7);
|
|
1056
|
+
--uy-color-border-primary-hover: var(--uy-color-plum-l8);
|
|
1057
|
+
--uy-color-border-primary-pressed: var(--uy-color-plum-l9);
|
|
1058
|
+
--uy-color-border-primary-focus: var(--uy-color-plum-l7);
|
|
1059
|
+
--uy-color-border-primary-active: var(--uy-color-plum-l7);
|
|
1046
1060
|
--uy-color-border-primary-disabled: var(--uy-color-grayscale-l4);
|
|
1047
1061
|
--uy-color-border-primary-lowest: var(--uy-color-plum-l2);
|
|
1048
1062
|
--uy-color-border-neutral-high: var(--uy-color-grayscale-l7);
|
|
@@ -1055,11 +1069,18 @@
|
|
|
1055
1069
|
--uy-color-border-neutral: var(--uy-color-grayscale-l5);
|
|
1056
1070
|
--uy-color-border-neutral-enabled: var(--uy-color-grayscale-l6);
|
|
1057
1071
|
--uy-color-border-neutral-hover: var(--uy-color-grayscale-l6);
|
|
1058
|
-
--uy-color-border-neutral-active: var(--uy-color-
|
|
1072
|
+
--uy-color-border-neutral-active: var(--uy-color-grayscale-l7);
|
|
1059
1073
|
--uy-color-border-neutral-pressed: var(--uy-color-grayscale-l6);
|
|
1060
1074
|
--uy-color-border-neutral-selected: var(--uy-color-grayscale-l6);
|
|
1061
1075
|
--uy-color-border-neutral-disabled: var(--uy-color-grayscale-l5);
|
|
1062
1076
|
--uy-color-border-neutral-low: var(--uy-color-grayscale-l4);
|
|
1077
|
+
--uy-color-border-neutral-highest: var(--uy-color-grayscale-l12);
|
|
1078
|
+
--uy-color-border-neutral-highest-enabled: var(--uy-color-grayscale-l12);
|
|
1079
|
+
--uy-color-border-neutral-highest-hover: var(--uy-color-grayscale-l11);
|
|
1080
|
+
--uy-color-border-neutral-highest-pressed: var(--uy-color-grayscale-l12);
|
|
1081
|
+
--uy-color-border-neutral-highest-active: var(--uy-color-grayscale-l12);
|
|
1082
|
+
--uy-color-border-neutral-highest-focus: var(--uy-color-grayscale-l12);
|
|
1083
|
+
--uy-color-border-neutral-highest-disabled: var(--uy-color-grayscale-l4);
|
|
1063
1084
|
--uy-color-border-danger: var(--uy-color-red-l4);
|
|
1064
1085
|
--uy-color-border-danger-lowest: var(--uy-color-red-l2);
|
|
1065
1086
|
--uy-color-border-warning: var(--uy-color-yellow-l4);
|
|
@@ -1088,7 +1109,7 @@
|
|
|
1088
1109
|
--uy-color-border-inverted-active: var(--uy-color-grayscale-l1);
|
|
1089
1110
|
--uy-color-border-inverted-disabled: var(--uy-color-grayscale-l7);
|
|
1090
1111
|
--uy-color-border-inverted-high: var(--uy-color-grayscale-l0);
|
|
1091
|
-
--uy-color-utility-focus-ring: var(--uy-color-blue-
|
|
1112
|
+
--uy-color-utility-focus-ring: var(--uy-color-blue-l7);
|
|
1092
1113
|
--uy-color-utility-inverted-focus-ring: var(--uy-color-yellow-l4);
|
|
1093
1114
|
--uy-shadow-100: 0px 1px 4px 1px var(--uy-color-utility-shadow-100);
|
|
1094
1115
|
--uy-shadow-200: 0px 2px 8px 1px var(--uy-color-utility-shadow-200);
|
|
@@ -1407,6 +1428,14 @@
|
|
|
1407
1428
|
--color-surface-neutral-lowest-active: var(--uy-color-surface-neutral-lowest-active);
|
|
1408
1429
|
--color-surface-neutral-lowest-disabled: var(--uy-color-surface-neutral-lowest-disabled);
|
|
1409
1430
|
--color-surface-neutral-lowest-selected: var(--uy-color-surface-neutral-lowest-selected);
|
|
1431
|
+
--color-surface-neutral-highest: var(--uy-color-surface-neutral-highest);
|
|
1432
|
+
--color-surface-neutral-highest-enabled: var(--uy-color-surface-neutral-highest-enabled);
|
|
1433
|
+
--color-surface-neutral-highest-hover: var(--uy-color-surface-neutral-highest-hover);
|
|
1434
|
+
--color-surface-neutral-highest-pressed: var(--uy-color-surface-neutral-highest-pressed);
|
|
1435
|
+
--color-surface-neutral-highest-active: var(--uy-color-surface-neutral-highest-active);
|
|
1436
|
+
--color-surface-neutral-highest-focus: var(--uy-color-surface-neutral-highest-focus);
|
|
1437
|
+
--color-surface-neutral-highest-disabled: var(--uy-color-surface-neutral-highest-disabled);
|
|
1438
|
+
--color-surface-neutral-highest-selected: var(--uy-color-surface-neutral-highest-selected);
|
|
1410
1439
|
--color-surface-danger: var(--uy-color-surface-danger);
|
|
1411
1440
|
--color-surface-danger-enabled: var(--uy-color-surface-danger-enabled);
|
|
1412
1441
|
--color-surface-danger-hover: var(--uy-color-surface-danger-hover);
|
|
@@ -1483,6 +1512,12 @@
|
|
|
1483
1512
|
--color-surface-inverted-pressed: var(--uy-color-surface-inverted-pressed);
|
|
1484
1513
|
--color-surface-inverted-focus: var(--uy-color-surface-inverted-focus);
|
|
1485
1514
|
--color-surface-inverted-active: var(--uy-color-surface-inverted-active);
|
|
1515
|
+
--color-surface-inverted-low-enabled: var(--uy-color-surface-inverted-low-enabled);
|
|
1516
|
+
--color-surface-inverted-low-hover: var(--uy-color-surface-inverted-low-hover);
|
|
1517
|
+
--color-surface-inverted-low-pressed: var(--uy-color-surface-inverted-low-pressed);
|
|
1518
|
+
--color-surface-inverted-low-active: var(--uy-color-surface-inverted-low-active);
|
|
1519
|
+
--color-surface-inverted-low-focus: var(--uy-color-surface-inverted-low-focus);
|
|
1520
|
+
--color-surface-inverted-low-disabled: var(--uy-color-surface-inverted-low-disabled);
|
|
1486
1521
|
--color-surface-decorative-teal: var(--uy-color-surface-decorative-teal);
|
|
1487
1522
|
--color-surface-decorative-teal-high: var(--uy-color-surface-decorative-teal-high);
|
|
1488
1523
|
--color-surface-decorative-teal-low: var(--uy-color-surface-decorative-teal-low);
|
|
@@ -1603,6 +1638,13 @@
|
|
|
1603
1638
|
--color-border-neutral-selected: var(--uy-color-border-neutral-selected);
|
|
1604
1639
|
--color-border-neutral-disabled: var(--uy-color-border-neutral-disabled);
|
|
1605
1640
|
--color-border-neutral-low: var(--uy-color-border-neutral-low);
|
|
1641
|
+
--color-border-neutral-highest: var(--uy-color-border-neutral-highest);
|
|
1642
|
+
--color-border-neutral-highest-enabled: var(--uy-color-border-neutral-highest-enabled);
|
|
1643
|
+
--color-border-neutral-highest-hover: var(--uy-color-border-neutral-highest-hover);
|
|
1644
|
+
--color-border-neutral-highest-pressed: var(--uy-color-border-neutral-highest-pressed);
|
|
1645
|
+
--color-border-neutral-highest-active: var(--uy-color-border-neutral-highest-active);
|
|
1646
|
+
--color-border-neutral-highest-focus: var(--uy-color-border-neutral-highest-focus);
|
|
1647
|
+
--color-border-neutral-highest-disabled: var(--uy-color-border-neutral-highest-disabled);
|
|
1606
1648
|
--color-border-danger: var(--uy-color-border-danger);
|
|
1607
1649
|
--color-border-danger-lowest: var(--uy-color-border-danger-lowest);
|
|
1608
1650
|
--color-border-warning: var(--uy-color-border-warning);
|
package/package.json
CHANGED
|
@@ -129,25 +129,25 @@
|
|
|
129
129
|
"$value": "#F6E07E"
|
|
130
130
|
},
|
|
131
131
|
"L4": {
|
|
132
|
-
"$value": "#
|
|
132
|
+
"$value": "#F9EDA0"
|
|
133
133
|
},
|
|
134
134
|
"L5": {
|
|
135
|
-
"$value": "#
|
|
135
|
+
"$value": "#F5DD71"
|
|
136
136
|
},
|
|
137
137
|
"L6": {
|
|
138
|
-
"$value": "#
|
|
138
|
+
"$value": "#F4C62A"
|
|
139
139
|
},
|
|
140
140
|
"L7": {
|
|
141
|
-
"$value": "#
|
|
141
|
+
"$value": "#E5AD00"
|
|
142
142
|
},
|
|
143
143
|
"L8": {
|
|
144
|
-
"$value": "#
|
|
144
|
+
"$value": "#CF8E06"
|
|
145
145
|
},
|
|
146
146
|
"L9": {
|
|
147
|
-
"$value": "#
|
|
147
|
+
"$value": "#BC7D06"
|
|
148
148
|
},
|
|
149
149
|
"L10": {
|
|
150
|
-
"$value": "#
|
|
150
|
+
"$value": "#956303"
|
|
151
151
|
},
|
|
152
152
|
"L11": {
|
|
153
153
|
"$value": "#402A00"
|
|
@@ -173,10 +173,10 @@
|
|
|
173
173
|
"$value": "#85B9FA"
|
|
174
174
|
},
|
|
175
175
|
"L6": {
|
|
176
|
-
"$value": "#
|
|
176
|
+
"$value": "#467CFB"
|
|
177
177
|
},
|
|
178
178
|
"L7": {
|
|
179
|
-
"$value": "#
|
|
179
|
+
"$value": "#0C4DE4"
|
|
180
180
|
},
|
|
181
181
|
"L8": {
|
|
182
182
|
"$value": "#0241D4"
|
|
@@ -199,7 +199,7 @@
|
|
|
199
199
|
"$value": "#F1FAFE"
|
|
200
200
|
},
|
|
201
201
|
"L2": {
|
|
202
|
-
"$value": "#
|
|
202
|
+
"$value": "#E3F7FF"
|
|
203
203
|
},
|
|
204
204
|
"L3": {
|
|
205
205
|
"$value": "#CFEFFC"
|
|
@@ -278,19 +278,19 @@
|
|
|
278
278
|
"$value": "#FFE5FF"
|
|
279
279
|
},
|
|
280
280
|
"L3": {
|
|
281
|
-
"$value": "#
|
|
281
|
+
"$value": "#FFC7FF"
|
|
282
282
|
},
|
|
283
283
|
"L4": {
|
|
284
|
-
"$value": "#
|
|
284
|
+
"$value": "#FFA9FF"
|
|
285
285
|
},
|
|
286
286
|
"L5": {
|
|
287
|
-
"$value": "#
|
|
287
|
+
"$value": "#FF7AFF"
|
|
288
288
|
},
|
|
289
289
|
"L6": {
|
|
290
290
|
"$value": "#F048F0"
|
|
291
291
|
},
|
|
292
292
|
"L7": {
|
|
293
|
-
"$value": "#
|
|
293
|
+
"$value": "#EF0BEF"
|
|
294
294
|
},
|
|
295
295
|
"L8": {
|
|
296
296
|
"$value": "#D100D1"
|
|
@@ -356,25 +356,25 @@
|
|
|
356
356
|
},
|
|
357
357
|
"teal": {
|
|
358
358
|
"L1": {
|
|
359
|
-
"$value": "#
|
|
359
|
+
"$value": "#F1FEFC"
|
|
360
360
|
},
|
|
361
361
|
"L2": {
|
|
362
|
-
"$value": "#
|
|
362
|
+
"$value": "#E0FAF7"
|
|
363
363
|
},
|
|
364
364
|
"L3": {
|
|
365
|
-
"$value": "#
|
|
365
|
+
"$value": "#C8F9F2"
|
|
366
366
|
},
|
|
367
367
|
"L4": {
|
|
368
|
-
"$value": "#
|
|
368
|
+
"$value": "#AFF9EE"
|
|
369
369
|
},
|
|
370
370
|
"L5": {
|
|
371
|
-
"$value": "#
|
|
371
|
+
"$value": "#8CF2E4"
|
|
372
372
|
},
|
|
373
373
|
"L6": {
|
|
374
|
-
"$value": "#
|
|
374
|
+
"$value": "#4CE5D1"
|
|
375
375
|
},
|
|
376
376
|
"L7": {
|
|
377
|
-
"$value": "#
|
|
377
|
+
"$value": "#20DFC5"
|
|
378
378
|
},
|
|
379
379
|
"L8": {
|
|
380
380
|
"$value": "#00CCB1"
|
|
@@ -450,19 +450,19 @@
|
|
|
450
450
|
"$value": "{color.plum.L6}"
|
|
451
451
|
},
|
|
452
452
|
"enabled": {
|
|
453
|
-
"$value": "{color.
|
|
453
|
+
"$value": "{color.plum.L6}"
|
|
454
454
|
},
|
|
455
455
|
"hover": {
|
|
456
|
-
"$value": "{color.
|
|
456
|
+
"$value": "{color.plum.L7}"
|
|
457
457
|
},
|
|
458
458
|
"pressed": {
|
|
459
|
-
"$value": "{color.plum.
|
|
459
|
+
"$value": "{color.plum.L8}"
|
|
460
460
|
},
|
|
461
461
|
"focus": {
|
|
462
|
-
"$value": "{color.
|
|
462
|
+
"$value": "{color.plum.L6}"
|
|
463
463
|
},
|
|
464
464
|
"active": {
|
|
465
|
-
"$value": "{color.
|
|
465
|
+
"$value": "{color.plum.L6}"
|
|
466
466
|
},
|
|
467
467
|
"disabled": {
|
|
468
468
|
"$value": "{color.grayscale.L5}"
|
|
@@ -565,7 +565,7 @@
|
|
|
565
565
|
"$value": "{color.grayscale.L4}"
|
|
566
566
|
},
|
|
567
567
|
"active": {
|
|
568
|
-
"$value": "{color.grayscale.
|
|
568
|
+
"$value": "{color.grayscale.L5}"
|
|
569
569
|
},
|
|
570
570
|
"disabled": {
|
|
571
571
|
"$value": "{color.grayscale.L4}"
|
|
@@ -573,6 +573,32 @@
|
|
|
573
573
|
"selected": {
|
|
574
574
|
"$value": "{color.grayscale.L6}"
|
|
575
575
|
}
|
|
576
|
+
},
|
|
577
|
+
"highest": {
|
|
578
|
+
"default": {
|
|
579
|
+
"$value": "{color.grayscale.L12}"
|
|
580
|
+
},
|
|
581
|
+
"enabled": {
|
|
582
|
+
"$value": "{color.grayscale.L12}"
|
|
583
|
+
},
|
|
584
|
+
"hover": {
|
|
585
|
+
"$value": "{color.grayscale.L11}"
|
|
586
|
+
},
|
|
587
|
+
"pressed": {
|
|
588
|
+
"$value": "{color.plum.L5}"
|
|
589
|
+
},
|
|
590
|
+
"active": {
|
|
591
|
+
"$value": "{color.grayscale.L12}"
|
|
592
|
+
},
|
|
593
|
+
"focus": {
|
|
594
|
+
"$value": "{color.grayscale.L12}"
|
|
595
|
+
},
|
|
596
|
+
"disabled": {
|
|
597
|
+
"$value": "{color.grayscale.L5}"
|
|
598
|
+
},
|
|
599
|
+
"selected": {
|
|
600
|
+
"$value": "{color.grayscale.L12}"
|
|
601
|
+
}
|
|
576
602
|
}
|
|
577
603
|
},
|
|
578
604
|
"danger": {
|
|
@@ -773,13 +799,13 @@
|
|
|
773
799
|
"$value": "{color.plum.L6}"
|
|
774
800
|
},
|
|
775
801
|
"selected": {
|
|
776
|
-
"$value": "{color.plum.
|
|
802
|
+
"$value": "{color.plum.L2}"
|
|
777
803
|
},
|
|
778
804
|
"disabled": {
|
|
779
805
|
"$value": "{color.grayscale.L3}"
|
|
780
806
|
},
|
|
781
807
|
"read-only": {
|
|
782
|
-
"$value": "{color.grayscale.
|
|
808
|
+
"$value": "{color.grayscale.L9}"
|
|
783
809
|
},
|
|
784
810
|
"error": {
|
|
785
811
|
"$value": "{color.red.L2}"
|
|
@@ -835,6 +861,26 @@
|
|
|
835
861
|
"active": {
|
|
836
862
|
"$value": "{color.grayscale.L11}"
|
|
837
863
|
}
|
|
864
|
+
},
|
|
865
|
+
"low": {
|
|
866
|
+
"enabled": {
|
|
867
|
+
"$value": "{color.grayscale.L11}"
|
|
868
|
+
},
|
|
869
|
+
"hover": {
|
|
870
|
+
"$value": "{color.grayscale.L10}"
|
|
871
|
+
},
|
|
872
|
+
"pressed": {
|
|
873
|
+
"$value": "{color.grayscale.L11}"
|
|
874
|
+
},
|
|
875
|
+
"active": {
|
|
876
|
+
"$value": "{color.grayscale.L11}"
|
|
877
|
+
},
|
|
878
|
+
"focus": {
|
|
879
|
+
"$value": "{color.grayscale.L11}"
|
|
880
|
+
},
|
|
881
|
+
"disabled": {
|
|
882
|
+
"$value": "{color.grayscale.L10}"
|
|
883
|
+
}
|
|
838
884
|
}
|
|
839
885
|
},
|
|
840
886
|
"decorative-teal": {
|
|
@@ -845,10 +891,10 @@
|
|
|
845
891
|
"$value": "{color.teal.L9}"
|
|
846
892
|
},
|
|
847
893
|
"low": {
|
|
848
|
-
"$value": "{color.teal.
|
|
894
|
+
"$value": "{color.teal.L2}"
|
|
849
895
|
},
|
|
850
896
|
"lowest": {
|
|
851
|
-
"$value": "{color.teal.
|
|
897
|
+
"$value": "{color.teal.L1}"
|
|
852
898
|
}
|
|
853
899
|
},
|
|
854
900
|
"decorative-purple": {
|
|
@@ -859,10 +905,10 @@
|
|
|
859
905
|
"$value": "{color.purple.L6}"
|
|
860
906
|
},
|
|
861
907
|
"low": {
|
|
862
|
-
"$value": "{color.purple.
|
|
908
|
+
"$value": "{color.purple.L2}"
|
|
863
909
|
},
|
|
864
910
|
"lowest": {
|
|
865
|
-
"$value": "{color.purple.
|
|
911
|
+
"$value": "{color.purple.L1}"
|
|
866
912
|
}
|
|
867
913
|
},
|
|
868
914
|
"decorative-plum": {
|
|
@@ -873,10 +919,10 @@
|
|
|
873
919
|
"$value": "{color.plum.L9}"
|
|
874
920
|
},
|
|
875
921
|
"low": {
|
|
876
|
-
"$value": "{color.plum.
|
|
922
|
+
"$value": "{color.plum.L2}"
|
|
877
923
|
},
|
|
878
924
|
"lowest": {
|
|
879
|
-
"$value": "{color.plum.
|
|
925
|
+
"$value": "{color.plum.L1}"
|
|
880
926
|
}
|
|
881
927
|
},
|
|
882
928
|
"decorative-orange": {
|
|
@@ -887,10 +933,10 @@
|
|
|
887
933
|
"$value": "{color.orange.L9}"
|
|
888
934
|
},
|
|
889
935
|
"low": {
|
|
890
|
-
"$value": "{color.orange.
|
|
936
|
+
"$value": "{color.orange.L2}"
|
|
891
937
|
},
|
|
892
938
|
"lowest": {
|
|
893
|
-
"$value": "{color.orange.
|
|
939
|
+
"$value": "{color.orange.L1}"
|
|
894
940
|
}
|
|
895
941
|
}
|
|
896
942
|
},
|
|
@@ -902,22 +948,22 @@
|
|
|
902
948
|
"$value": "{color.plum.L6}"
|
|
903
949
|
},
|
|
904
950
|
"enabled": {
|
|
905
|
-
"$value": "{color.
|
|
951
|
+
"$value": "{color.plum.L8}"
|
|
906
952
|
},
|
|
907
953
|
"hover": {
|
|
908
|
-
"$value": "{color.
|
|
954
|
+
"$value": "{color.plum.L9}"
|
|
909
955
|
},
|
|
910
956
|
"pressed": {
|
|
911
|
-
"$value": "{color.
|
|
957
|
+
"$value": "{color.plum.L10}"
|
|
912
958
|
},
|
|
913
959
|
"focus": {
|
|
914
|
-
"$value": "{color.
|
|
960
|
+
"$value": "{color.plum.L8}"
|
|
915
961
|
},
|
|
916
962
|
"active": {
|
|
917
|
-
"$value": "{color.
|
|
963
|
+
"$value": "{color.plum.L8}"
|
|
918
964
|
},
|
|
919
965
|
"disabled": {
|
|
920
|
-
"$value": "{color.grayscale.
|
|
966
|
+
"$value": "{color.grayscale.L7}"
|
|
921
967
|
}
|
|
922
968
|
},
|
|
923
969
|
"high": {
|
|
@@ -1135,7 +1181,7 @@
|
|
|
1135
1181
|
"$value": "{color.grayscale.L0}"
|
|
1136
1182
|
},
|
|
1137
1183
|
"pressed": {
|
|
1138
|
-
"$value": "{color.grayscale.
|
|
1184
|
+
"$value": "{color.grayscale.L0}"
|
|
1139
1185
|
},
|
|
1140
1186
|
"focus": {
|
|
1141
1187
|
"$value": "{color.grayscale.L0}"
|
|
@@ -1185,22 +1231,22 @@
|
|
|
1185
1231
|
"primary": {
|
|
1186
1232
|
"default": {
|
|
1187
1233
|
"default": {
|
|
1188
|
-
"$value": "{color.
|
|
1234
|
+
"$value": "{color.plum.L7}"
|
|
1189
1235
|
},
|
|
1190
1236
|
"enabled": {
|
|
1191
|
-
"$value": "{color.
|
|
1237
|
+
"$value": "{color.plum.L7}"
|
|
1192
1238
|
},
|
|
1193
1239
|
"hover": {
|
|
1194
|
-
"$value": "{color.
|
|
1240
|
+
"$value": "{color.plum.L8}"
|
|
1195
1241
|
},
|
|
1196
1242
|
"pressed": {
|
|
1197
|
-
"$value": "{color.
|
|
1243
|
+
"$value": "{color.plum.L9}"
|
|
1198
1244
|
},
|
|
1199
1245
|
"focus": {
|
|
1200
|
-
"$value": "{color.
|
|
1246
|
+
"$value": "{color.plum.L7}"
|
|
1201
1247
|
},
|
|
1202
1248
|
"active": {
|
|
1203
|
-
"$value": "{color.
|
|
1249
|
+
"$value": "{color.plum.L7}"
|
|
1204
1250
|
},
|
|
1205
1251
|
"disabled": {
|
|
1206
1252
|
"$value": "{color.grayscale.L4}"
|
|
@@ -1245,7 +1291,7 @@
|
|
|
1245
1291
|
"$value": "{color.grayscale.L6}"
|
|
1246
1292
|
},
|
|
1247
1293
|
"active": {
|
|
1248
|
-
"$value": "{color.
|
|
1294
|
+
"$value": "{color.grayscale.L7}"
|
|
1249
1295
|
},
|
|
1250
1296
|
"pressed": {
|
|
1251
1297
|
"$value": "{color.grayscale.L6}"
|
|
@@ -1261,6 +1307,29 @@
|
|
|
1261
1307
|
"default": {
|
|
1262
1308
|
"$value": "{color.grayscale.L4}"
|
|
1263
1309
|
}
|
|
1310
|
+
},
|
|
1311
|
+
"highest": {
|
|
1312
|
+
"default": {
|
|
1313
|
+
"$value": "{color.grayscale.L12}"
|
|
1314
|
+
},
|
|
1315
|
+
"enabled": {
|
|
1316
|
+
"$value": "{color.grayscale.L12}"
|
|
1317
|
+
},
|
|
1318
|
+
"hover": {
|
|
1319
|
+
"$value": "{color.grayscale.L11}"
|
|
1320
|
+
},
|
|
1321
|
+
"pressed": {
|
|
1322
|
+
"$value": "{color.grayscale.L12}"
|
|
1323
|
+
},
|
|
1324
|
+
"active": {
|
|
1325
|
+
"$value": "{color.grayscale.L12}"
|
|
1326
|
+
},
|
|
1327
|
+
"focus": {
|
|
1328
|
+
"$value": "{color.grayscale.L12}"
|
|
1329
|
+
},
|
|
1330
|
+
"disabled": {
|
|
1331
|
+
"$value": "{color.grayscale.L4}"
|
|
1332
|
+
}
|
|
1264
1333
|
}
|
|
1265
1334
|
},
|
|
1266
1335
|
"danger": {
|
|
@@ -1367,7 +1436,7 @@
|
|
|
1367
1436
|
"utility": {
|
|
1368
1437
|
"$description": "Utility color.for specific purposes",
|
|
1369
1438
|
"focus-ring": {
|
|
1370
|
-
"$value": "{color.blue.
|
|
1439
|
+
"$value": "{color.blue.L7}"
|
|
1371
1440
|
},
|
|
1372
1441
|
"inverted-focus-ring": {
|
|
1373
1442
|
"$value": "{color.yellow.L4}"
|