@adobe/spectrum-tokens 13.0.0-beta.17 → 13.0.0-beta.18

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 (5) hide show
  1. package/CHANGELOG.md +56 -0
  2. package/dist/json/drover.json +47 -27
  3. package/dist/json/variables.json +811 -191
  4. package/package.json +1 -1
  5. package/src/color-aliases.json +244 -29
package/CHANGELOG.md CHANGED
@@ -1,5 +1,61 @@
1
1
  # @adobe/spectrum-tokens
2
2
 
3
+ ## 13.0.0-beta.18
4
+
5
+ ### Minor Changes
6
+
7
+ - 940bd78: Updated background aliases in dark theme; added new non-semantic colors
8
+
9
+ ## Design Motivation
10
+
11
+ The existing background colors were updated for better consistency across semantic and non-semantic variants of the Badge component. The colors also introduce some general improved contrast in dark theme across other components using these aliases.
12
+ The new non-semantic visual and background colors were added because new hues were introduced. These colors will be used in status light and badge components, respectively.
13
+
14
+ ## Token Diff
15
+
16
+ _Tokens added (10):_
17
+
18
+ - `brown-background-color-default`
19
+ - `brown-visual-color`
20
+ - `cinnamon-background-color-default`
21
+ - `cinnamon-visual-color`
22
+ - `pink-background-color-default`
23
+ - `pink-visual-color`
24
+ - `silver-background-color-default`
25
+ - `silver-visual-color`
26
+ - `turquoise-background-color-default`
27
+ - `turquoise-visual-color`
28
+
29
+ _Token values updated (27):_
30
+
31
+ - `accent-background-color-default`
32
+ - `accent-background-color-down`
33
+ - `accent-background-color-hover`
34
+ - `accent-background-color-key-focus`
35
+ - `celery-background-color-default`
36
+ - `chartreuse-background-color-default`
37
+ - `gray-background-color-default`
38
+ - `informative-background-color-default`
39
+ - `informative-background-color-down`
40
+ - `informative-background-color-hover`
41
+ - `informative-background-color-key-focus`
42
+ - `negative-background-color-default`
43
+ - `negative-background-color-down`
44
+ - `negative-background-color-hover`
45
+ - `negative-background-color-key-focus`
46
+ - `neutral-subdued-background-color-default`
47
+ - `neutral-subdued-background-color-down`
48
+ - `neutral-subdued-background-color-hover`
49
+ - `neutral-subdued-background-color-key-focus`
50
+ - `notice-background-color-default`
51
+ - `orange-background-color-default`
52
+ - `positive-background-color-default`
53
+ - `positive-background-color-down`
54
+ - `positive-background-color-hover`
55
+ - `positive-background-color-key-focus`
56
+ - `table-selected-row-background-color`
57
+ - `yellow-background-color-default`
58
+
3
59
  ## 13.0.0-beta.17
4
60
 
5
61
  ### Minor Changes
package/dist/json/drover.json CHANGED
@@ -79,6 +79,8 @@
79
79
  "brown-700": "rgb(171, 138, 90)",
80
80
  "brown-800": "rgb(154, 123, 77)",
81
81
  "brown-900": "rgb(139, 109, 66)",
82
+ "brown-background-color-default": "rgb(139, 109, 66)",
83
+ "brown-visual-color": "rgb(154, 123, 77)",
82
84
  "card-selection-background-color": "rgb(233, 233, 233)",
83
85
  "celery-100": "rgb(235, 255, 220)",
84
86
  "celery-1000": "rgb(52, 109, 12)",
@@ -132,6 +134,8 @@
132
134
  "cinnamon-700": "rgb(198, 126, 88)",
133
135
  "cinnamon-800": "rgb(184, 109, 70)",
134
136
  "cinnamon-900": "rgb(170, 94, 56)",
137
+ "cinnamon-background-color-default": "rgb(170, 94, 56)",
138
+ "cinnamon-visual-color": "rgb(184, 109, 70)",
135
139
  "coach-mark-pagination-color": "rgb(113, 113, 113)",
136
140
  "code-color": "rgb(41, 41, 41)",
137
141
  "color-area-border-color": "rgb(19, 19, 19)",
@@ -405,6 +409,8 @@
405
409
  "pink-700": "rgb(242, 76, 184)",
406
410
  "pink-800": "rgb(228, 52, 163)",
407
411
  "pink-900": "rgb(206, 42, 146)",
412
+ "pink-background-color-default": "rgb(206, 42, 146)",
413
+ "pink-visual-color": "rgb(228, 52, 163)",
408
414
  "positive-background-color-default": "rgb(5, 131, 78)",
409
415
  "positive-background-color-down": "rgb(3, 110, 69)",
410
416
  "positive-background-color-hover": "rgb(3, 110, 69)",
@@ -496,6 +502,8 @@
496
502
  "silver-700": "rgb(143, 143, 143)",
497
503
  "silver-800": "rgb(128, 128, 128)",
498
504
  "silver-900": "rgb(114, 114, 114)",
505
+ "silver-background-color-default": "rgb(114, 114, 114)",
506
+ "silver-visual-color": "rgb(128, 128, 128)",
499
507
  "static-black-focus-indicator-color": "rgb(0, 0, 0)",
500
508
  "static-white-focus-indicator-color": "rgb(255, 255, 255)",
501
509
  "swatch-border-color": "rgb(19, 19, 19)",
@@ -546,6 +554,8 @@
546
554
  "turquoise-700": "rgb(12, 158, 171)",
547
555
  "turquoise-800": "rgb(10, 141, 153)",
548
556
  "turquoise-900": "rgb(8, 126, 137)",
557
+ "turquoise-background-color-default": "rgb(8, 126, 137)",
558
+ "turquoise-visual-color": "rgb(10, 141, 153)",
549
559
  "white": "rgb(255, 255, 255)",
550
560
  "yellow-100": "rgb(255, 248, 204)",
551
561
  "yellow-1000": "rgb(134, 85, 0)",
@@ -567,10 +577,10 @@
567
577
  "yellow-visual-color": "rgb(210, 149, 0)"
568
578
  },
569
579
  "dark": {
570
- "accent-background-color-default": "rgb(37, 73, 229)",
571
- "accent-background-color-down": "rgb(26, 58, 195)",
572
- "accent-background-color-hover": "rgb(26, 58, 195)",
573
- "accent-background-color-key-focus": "rgb(26, 58, 195)",
580
+ "accent-background-color-default": "rgb(52, 91, 248)",
581
+ "accent-background-color-down": "rgb(37, 73, 229)",
582
+ "accent-background-color-hover": "rgb(37, 73, 229)",
583
+ "accent-background-color-key-focus": "rgb(37, 73, 229)",
574
584
  "accent-color-100": "rgb(14, 23, 63)",
575
585
  "accent-color-1000": "rgb(105, 149, 254)",
576
586
  "accent-color-1100": "rgb(124, 169, 252)",
@@ -634,6 +644,8 @@
634
644
  "brown-700": "rgb(132, 104, 61)",
635
645
  "brown-800": "rgb(148, 118, 73)",
636
646
  "brown-900": "rgb(163, 132, 84)",
647
+ "brown-background-color-default": "rgb(132, 104, 61)",
648
+ "brown-visual-color": "rgb(163, 132, 84)",
637
649
  "card-selection-background-color": "rgb(44, 44, 44)",
638
650
  "celery-100": "rgb(11, 31, 0)",
639
651
  "celery-1000": "rgb(88, 172, 28)",
@@ -651,7 +663,7 @@
651
663
  "celery-700": "rgb(60, 122, 15)",
652
664
  "celery-800": "rgb(69, 138, 19)",
653
665
  "celery-900": "rgb(78, 154, 23)",
654
- "celery-background-color-default": "rgb(69, 138, 19)",
666
+ "celery-background-color-default": "rgb(78, 154, 23)",
655
667
  "celery-visual-color": "rgb(69, 138, 19)",
656
668
  "chartreuse-100": "rgb(23, 28, 0)",
657
669
  "chartreuse-1000": "rgb(136, 164, 0)",
@@ -669,7 +681,7 @@
669
681
  "chartreuse-700": "rgb(97, 116, 0)",
670
682
  "chartreuse-800": "rgb(109, 131, 0)",
671
683
  "chartreuse-900": "rgb(122, 147, 0)",
672
- "chartreuse-background-color-default": "rgb(122, 147, 0)",
684
+ "chartreuse-background-color-default": "rgb(136, 164, 0)",
673
685
  "chartreuse-visual-color": "rgb(122, 147, 0)",
674
686
  "cinnamon-100": "rgb(48, 17, 4)",
675
687
  "cinnamon-1000": "rgb(206, 136, 99)",
@@ -687,6 +699,8 @@
687
699
  "cinnamon-700": "rgb(163, 88, 52)",
688
700
  "cinnamon-800": "rgb(179, 103, 64)",
689
701
  "cinnamon-900": "rgb(192, 119, 80)",
702
+ "cinnamon-background-color-default": "rgb(163, 88, 52)",
703
+ "cinnamon-visual-color": "rgb(192, 119, 80)",
690
704
  "coach-mark-pagination-color": "rgb(138, 138, 138)",
691
705
  "code-color": "rgb(219, 219, 219)",
692
706
  "color-area-border-color": "rgb(242, 242, 242)",
@@ -761,7 +775,7 @@
761
775
  "gray-75": "rgb(34, 34, 34)",
762
776
  "gray-800": "rgb(219, 219, 219)",
763
777
  "gray-900": "rgb(242, 242, 242)",
764
- "gray-background-color-default": "rgb(175, 175, 175)",
778
+ "gray-background-color-default": "rgb(109, 109, 109)",
765
779
  "gray-visual-color": "rgb(138, 138, 138)",
766
780
  "green-100": "rgb(0, 30, 23)",
767
781
  "green-1000": "rgb(14, 175, 98)",
@@ -806,10 +820,10 @@
806
820
  "indigo-900": "rgb(128, 119, 254)",
807
821
  "indigo-background-color-default": "rgb(109, 75, 248)",
808
822
  "indigo-visual-color": "rgb(128, 119, 254)",
809
- "informative-background-color-default": "rgb(37, 73, 229)",
810
- "informative-background-color-down": "rgb(26, 58, 195)",
811
- "informative-background-color-hover": "rgb(26, 58, 195)",
812
- "informative-background-color-key-focus": "rgb(26, 58, 195)",
823
+ "informative-background-color-default": "rgb(52, 91, 248)",
824
+ "informative-background-color-down": "rgb(37, 73, 229)",
825
+ "informative-background-color-hover": "rgb(37, 73, 229)",
826
+ "informative-background-color-key-focus": "rgb(37, 73, 229)",
813
827
  "informative-color-100": "rgb(14, 23, 63)",
814
828
  "informative-color-1000": "rgb(105, 149, 254)",
815
829
  "informative-color-1100": "rgb(124, 169, 252)",
@@ -845,10 +859,10 @@
845
859
  "magenta-900": "rgb(255, 51, 119)",
846
860
  "magenta-background-color-default": "rgb(207, 31, 92)",
847
861
  "magenta-visual-color": "rgb(255, 51, 119)",
848
- "negative-background-color-default": "rgb(177, 38, 23)",
849
- "negative-background-color-down": "rgb(147, 31, 17)",
850
- "negative-background-color-hover": "rgb(147, 31, 17)",
851
- "negative-background-color-key-focus": "rgb(147, 31, 17)",
862
+ "negative-background-color-default": "rgb(205, 46, 29)",
863
+ "negative-background-color-down": "rgb(177, 38, 23)",
864
+ "negative-background-color-hover": "rgb(177, 38, 23)",
865
+ "negative-background-color-key-focus": "rgb(177, 38, 23)",
852
866
  "negative-border-color-default": "rgb(252, 67, 46)",
853
867
  "negative-border-color-down": "rgb(255, 134, 120)",
854
868
  "negative-border-color-focus": "rgb(255, 103, 86)",
@@ -894,17 +908,17 @@
894
908
  "neutral-content-color-focus-hover": "rgb(242, 242, 242)",
895
909
  "neutral-content-color-hover": "rgb(242, 242, 242)",
896
910
  "neutral-content-color-key-focus": "rgb(242, 242, 242)",
897
- "neutral-subdued-background-color-default": "rgb(68, 68, 68)",
898
- "neutral-subdued-background-color-down": "rgb(57, 57, 57)",
899
- "neutral-subdued-background-color-hover": "rgb(57, 57, 57)",
900
- "neutral-subdued-background-color-key-focus": "rgb(57, 57, 57)",
911
+ "neutral-subdued-background-color-default": "rgb(109, 109, 109)",
912
+ "neutral-subdued-background-color-down": "rgb(68, 68, 68)",
913
+ "neutral-subdued-background-color-hover": "rgb(68, 68, 68)",
914
+ "neutral-subdued-background-color-key-focus": "rgb(68, 68, 68)",
901
915
  "neutral-subdued-content-color-default": "rgb(175, 175, 175)",
902
916
  "neutral-subdued-content-color-down": "rgb(219, 219, 219)",
903
917
  "neutral-subdued-content-color-hover": "rgb(219, 219, 219)",
904
918
  "neutral-subdued-content-color-key-focus": "rgb(219, 219, 219)",
905
919
  "neutral-subdued-content-color-selected": "rgb(219, 219, 219)",
906
920
  "neutral-visual-color": "rgb(138, 138, 138)",
907
- "notice-background-color-default": "rgb(205, 86, 0)",
921
+ "notice-background-color-default": "rgb(224, 100, 0)",
908
922
  "notice-color-100": "rgb(49, 16, 0)",
909
923
  "notice-color-1000": "rgb(243, 117, 0)",
910
924
  "notice-color-1100": "rgb(255, 137, 0)",
@@ -940,7 +954,7 @@
940
954
  "orange-700": "rgb(185, 73, 0)",
941
955
  "orange-800": "rgb(205, 86, 0)",
942
956
  "orange-900": "rgb(224, 100, 0)",
943
- "orange-background-color-default": "rgb(205, 86, 0)",
957
+ "orange-background-color-default": "rgb(224, 100, 0)",
944
958
  "orange-visual-color": "rgb(224, 100, 0)",
945
959
  "overlay-color": "rgb(0, 0, 0)",
946
960
  "overlay-opacity": "0.6",
@@ -960,10 +974,12 @@
960
974
  "pink-700": "rgb(196, 39, 138)",
961
975
  "pink-800": "rgb(220, 47, 156)",
962
976
  "pink-900": "rgb(236, 67, 175)",
963
- "positive-background-color-default": "rgb(3, 106, 67)",
964
- "positive-background-color-down": "rgb(2, 87, 58)",
965
- "positive-background-color-hover": "rgb(2, 87, 58)",
966
- "positive-background-color-key-focus": "rgb(2, 87, 58)",
977
+ "pink-background-color-default": "rgb(196, 39, 138)",
978
+ "pink-visual-color": "rgb(236, 67, 175)",
979
+ "positive-background-color-default": "rgb(4, 124, 75)",
980
+ "positive-background-color-down": "rgb(3, 106, 67)",
981
+ "positive-background-color-hover": "rgb(3, 106, 67)",
982
+ "positive-background-color-key-focus": "rgb(3, 106, 67)",
967
983
  "positive-color-100": "rgb(0, 30, 23)",
968
984
  "positive-color-1000": "rgb(14, 175, 98)",
969
985
  "positive-color-1100": "rgb(24, 193, 110)",
@@ -1051,12 +1067,14 @@
1051
1067
  "silver-700": "rgb(108, 108, 108)",
1052
1068
  "silver-800": "rgb(123, 123, 123)",
1053
1069
  "silver-900": "rgb(137, 137, 137)",
1070
+ "silver-background-color-default": "rgb(108, 108, 108)",
1071
+ "silver-visual-color": "rgb(137, 137, 137)",
1054
1072
  "static-black-focus-indicator-color": "rgb(0, 0, 0)",
1055
1073
  "static-white-focus-indicator-color": "rgb(255, 255, 255)",
1056
1074
  "swatch-border-color": "rgb(242, 242, 242)",
1057
1075
  "swatch-disabled-icon-border-color": "rgb(0, 0, 0)",
1058
1076
  "table-row-hover-color": "rgb(242, 242, 242)",
1059
- "table-selected-row-background-color": "rgb(37, 73, 229)",
1077
+ "table-selected-row-background-color": "rgb(52, 91, 248)",
1060
1078
  "table-selected-row-background-color-non-emphasized": "rgb(219, 219, 219)",
1061
1079
  "thumbnail-border-color": "rgb(219, 219, 219)",
1062
1080
  "transparent-black-100": "rgba(0, 0, 0, 0.09)",
@@ -1101,6 +1119,8 @@
1101
1119
  "turquoise-700": "rgb(7, 120, 131)",
1102
1120
  "turquoise-800": "rgb(9, 135, 147)",
1103
1121
  "turquoise-900": "rgb(11, 151, 164)",
1122
+ "turquoise-background-color-default": "rgb(7, 120, 131)",
1123
+ "turquoise-visual-color": "rgb(11, 151, 164)",
1104
1124
  "white": "rgb(255, 255, 255)",
1105
1125
  "yellow-100": "rgb(37, 23, 0)",
1106
1126
  "yellow-1000": "rgb(203, 141, 0)",
@@ -1118,7 +1138,7 @@
1118
1138
  "yellow-700": "rgb(151, 97, 0)",
1119
1139
  "yellow-800": "rgb(169, 110, 0)",
1120
1140
  "yellow-900": "rgb(186, 124, 0)",
1121
- "yellow-background-color-default": "rgb(203, 141, 0)",
1141
+ "yellow-background-color-default": "rgb(218, 159, 0)",
1122
1142
  "yellow-visual-color": "rgb(218, 159, 0)"
1123
1143
  },
1124
1144
  "darkest": {