@justeattakeaway/pie-css 0.20.0 → 0.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.css +353 -199
  2. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -1,13 +1,17 @@
1
1
  :root {
2
2
  /* Global tokens - Color */
3
- --dt-color-aubergine-10: #e7d6e7;
3
+ --dt-color-aubergine-10: #e3cfe3;
4
+ --dt-color-aubergine-20: #d0b2d0;
4
5
  --dt-color-aubergine-30: #b993b8;
5
6
  --dt-color-aubergine-5: #f3e7f3;
7
+ --dt-color-aubergine-70: #5b3d5b;
6
8
  --dt-color-aubergine-75: #493949;
7
9
  --dt-color-aubergine-80: #3c313c;
8
- --dt-color-berry-10: #fadbdf;
10
+ --dt-color-berry-10: #fbdfe3;
9
11
  --dt-color-berry-20: #f9d2d7;
12
+ --dt-color-berry-40: #f2a6b0;
10
13
  --dt-color-berry-70: #98696f;
14
+ --dt-color-berry-80: #795358;
11
15
  --dt-color-berry-90: #4c3437;
12
16
  --dt-color-black: #000;
13
17
  --dt-color-blue: #3147ad;
@@ -30,10 +34,12 @@
30
34
  --dt-color-charcoal-75: #303d3f;
31
35
  --dt-color-charcoal-80: #242e30;
32
36
  --dt-color-cupcake-10: #e0ecee;
37
+ --dt-color-cupcake-20: #d0e3e6;
38
+ --dt-color-cupcake-30: #c1dade;
33
39
  --dt-color-cupcake-40: #b1cace;
34
40
  --dt-color-cupcake-70: #6a787a;
35
41
  --dt-color-cupcake-80: #4c5657;
36
- --dt-color-cupcake-90: #254043;
42
+ --dt-color-cupcake-90: #2f3637;
37
43
  --dt-color-green: #2b7836;
38
44
  --dt-color-green-10: #b4e4bb;
39
45
  --dt-color-green-30: #68ca77;
@@ -42,9 +48,12 @@
42
48
  --dt-color-green-90: #023d1c;
43
49
  --dt-color-green-dark-hc: #196634;
44
50
  --dt-color-green-light-hc: #26d46e;
45
- --dt-color-latte-10: #f1e3c9;
51
+ --dt-color-latte-10: #f2e6ce;
52
+ --dt-color-latte-20: #eddbba;
46
53
  --dt-color-latte-30: #e7cda2;
47
54
  --dt-color-latte-70: #81735b;
55
+ --dt-color-latte-80: #5a503f;
56
+ --dt-color-latte-90: #3c352a;
48
57
  --dt-color-mozzarella-10: #f5f3f1;
49
58
  --dt-color-mozzarella-100: #1a1a19;
50
59
  --dt-color-mozzarella-20: #efedea;
@@ -64,7 +73,7 @@
64
73
  --dt-color-orange-25: #ff9933;
65
74
  --dt-color-orange-30: #ff8000;
66
75
  --dt-color-orange-70: #b45512;
67
- --dt-color-orange-75: #a04c00;
76
+ --dt-color-orange-75: #944600;
68
77
  --dt-color-orange-90: #613105;
69
78
  --dt-color-orange-dark-hc: #a33100;
70
79
  --dt-color-purple: #5b3d5b;
@@ -113,10 +122,13 @@
113
122
  --dt-color-truffle-85: #353431;
114
123
  --dt-color-truffle-90: #2b2a28;
115
124
  --dt-color-turmeric-10: #fceac0;
125
+ --dt-color-turmeric-20: #fae0a1;
126
+ --dt-color-turmeric-40: #f6c243;
116
127
  --dt-color-turmeric-5: #fdf2d8;
117
128
  --dt-color-turmeric-60: #b48c32;
118
129
  --dt-color-turmeric-70: #917228;
119
130
  --dt-color-turmeric-80: #644f1c;
131
+ --dt-color-turmeric-90: #443613;
120
132
  --dt-color-white: #fff;
121
133
  --dt-color-yellow: #ffd600;
122
134
  --dt-color-yellow-10: #fff8d6;
@@ -177,38 +189,44 @@
177
189
  --dt-color-support-error-inverse: var(--dt-color-red-30);
178
190
  --dt-color-support-warning-inverse: var(--dt-color-yellow-40);
179
191
  --dt-color-support-brand-01: var(--dt-color-orange-30);
180
- --dt-color-support-brand-02: var(--dt-color-orange-10);
181
- --dt-color-support-brand-03: var(--dt-color-blue-25);
182
- --dt-color-support-brand-03-subtle: var(--dt-color-cupcake-10);
183
- --dt-color-support-brand-04: var(--dt-color-red-25);
184
- --dt-color-support-brand-04-subtle: var(--dt-color-berry-10);
185
- --dt-color-support-brand-05: var(--dt-color-yellow);
186
- --dt-color-support-brand-05-subtle: var(--dt-color-turmeric-10);
187
- --dt-color-support-brand-06: var(--dt-color-purple);
188
- --dt-color-support-brand-06-subtle: var(--dt-color-aubergine-10);
192
+ --dt-color-support-brand-02: var(--dt-color-orange-20);
193
+ --dt-color-support-brand-tonal: var(--dt-color-orange-10);
194
+ --dt-color-support-brand-03: var(--dt-color-cupcake-30);
195
+ --dt-color-support-brand-03-subtle: var(--dt-color-cupcake-20);
196
+ --dt-color-support-brand-03-tonal: var(--dt-color-cupcake-10);
197
+ --dt-color-support-brand-04: var(--dt-color-berry-40);
198
+ --dt-color-support-brand-04-subtle: var(--dt-color-berry-20);
199
+ --dt-color-support-brand-04-tonal: var(--dt-color-berry-10);
200
+ --dt-color-support-brand-05: var(--dt-color-turmeric-40);
201
+ --dt-color-support-brand-05-subtle: var(--dt-color-turmeric-20);
202
+ --dt-color-support-brand-05-tonal: var(--dt-color-turmeric-10);
203
+ --dt-color-support-brand-06: var(--dt-color-aubergine-70);
204
+ --dt-color-support-brand-06-subtle: var(--dt-color-aubergine-20);
205
+ --dt-color-support-brand-06-tonal: var(--dt-color-aubergine-10);
189
206
  --dt-color-support-brand-07: var(--dt-color-tomato-50);
190
207
  --dt-color-support-brand-07-subtle: var(--dt-color-tomato-5);
191
208
  --dt-color-support-brand-08: var(--dt-color-latte-30);
192
- --dt-color-support-brand-08-subtle: var(--dt-color-latte-10);
209
+ --dt-color-support-brand-08-subtle: var(--dt-color-latte-20);
210
+ --dt-color-support-brand-08-tonal: var(--dt-color-latte-10);
193
211
  --dt-color-braze-container-01: var(--dt-color-orange-10);
194
212
  --dt-color-braze-container-03: var(--dt-color-cupcake-10);
195
213
  --dt-color-braze-container-04: var(--dt-color-berry-10);
196
214
  --dt-color-braze-container-05: var(--dt-color-turmeric-10);
197
215
  --dt-color-braze-container-08: var(--dt-color-latte-10);
198
- --dt-color-content-default: var(--dt-color-charcoal-80);
199
- --dt-color-content-subdued: var(--dt-color-charcoal-70);
216
+ --dt-color-content-default: rgb(0,0,0,0.76);
217
+ --dt-color-content-subdued: rgb(0,0,0,0.64);
200
218
  --dt-color-content-interactive-brand: var(--dt-color-orange);
201
- --dt-color-content-interactive-light: var(--dt-color-white);
202
- --dt-color-content-interactive-primary: var(--dt-color-white);
203
- --dt-color-content-interactive-secondary: var(--dt-color-charcoal-80);
219
+ --dt-color-content-interactive-light: rgb(255,255,255,0.9);
220
+ --dt-color-content-interactive-primary: rgb(255,255,255,0.9);
221
+ --dt-color-content-interactive-secondary: rgb(0,0,0,0.76);
204
222
  --dt-color-content-interactive-tertiary: var(--dt-color-charcoal-75);
205
- --dt-color-content-interactive-subdued: var(--dt-color-charcoal-60);
206
- --dt-color-content-interactive-inverse: var(--dt-color-charcoal-80);
207
- --dt-color-content-interactive-dark: var(--dt-color-charcoal-80);
223
+ --dt-color-content-interactive-subdued: rgb(0,0,0,0.58);
224
+ --dt-color-content-interactive-inverse: rgb(0,0,0,0.76);
225
+ --dt-color-content-interactive-dark: rgb(0,0,0,0.76);
208
226
  --dt-color-content-interactive-error: var(--dt-color-red);
209
- --dt-color-content-light: var(--dt-color-white);
210
- --dt-color-content-dark: var(--dt-color-charcoal-80);
211
- --dt-color-content-inverse: var(--dt-color-white);
227
+ --dt-color-content-light: rgb(255,255,255,0.9);
228
+ --dt-color-content-dark: rgb(0,0,0,0.76);
229
+ --dt-color-content-inverse: rgb(255,255,255,0.9);
212
230
  --dt-color-content-link: var(--dt-color-charcoal-80);
213
231
  --dt-color-content-link-distinct: var(--dt-color-blue);
214
232
  --dt-color-content-link-light: var(--dt-color-white);
@@ -216,10 +234,27 @@
216
234
  --dt-color-content-link-visited: var(--dt-color-system-purple);
217
235
  --dt-color-content-link-visited-inverse: var(--dt-color-system-purple-10);
218
236
  --dt-color-content-error: var(--dt-color-red);
219
- --dt-color-content-placeholder: var(--dt-color-charcoal-57);
237
+ --dt-color-content-placeholder: rgb(0,0,0,0.55);
220
238
  --dt-color-content-positive: var(--dt-color-green);
221
- --dt-color-content-disabled: var(--dt-color-charcoal-50);
239
+ --dt-color-content-disabled: rgb(0,0,0,0.30);
222
240
  --dt-color-content-brand: var(--dt-color-orange);
241
+ --dt-color-content-default-solid: var(--dt-color-charcoal-80);
242
+ --dt-color-content-subdued-solid: var(--dt-color-charcoal-70);
243
+ --dt-color-content-light-solid: var(--dt-color-white);
244
+ --dt-color-content-inverse-solid: var(--dt-color-white);
245
+ --dt-color-content-dark-solid: var(--dt-color-charcoal-80);
246
+ --dt-color-content-disabled-solid: var(--dt-color-charcoal-50);
247
+ --dt-color-content-placeholder-solid: var(--dt-color-charcoal-57);
248
+ --dt-color-content-brand-solid: var(--dt-color-orange);
249
+ --dt-color-content-error-solid: var(--dt-color-red);
250
+ --dt-color-content-positive-solid: var(--dt-color-green);
251
+ --dt-color-content-interactive-light-solid: var(--dt-color-white);
252
+ --dt-color-content-interactive-primary-solid: var(--dt-color-white);
253
+ --dt-color-content-interactive-secondary-solid: var(--dt-color-charcoal-80);
254
+ --dt-color-content-interactive-inverse-solid: var(--dt-color-charcoal-80);
255
+ --dt-color-content-interactive-dark-solid: var(--dt-color-charcoal-80);
256
+ --dt-color-content-interactive-brand-solid: var(--dt-color-orange);
257
+ --dt-color-content-interactive-error-solid: var(--dt-color-red);
223
258
  --dt-color-hover-01-bg: #000;
224
259
  --dt-color-hover-01: 4%;
225
260
  --dt-color-hover-01-dark-bg: #000;
@@ -791,37 +826,43 @@ html[data-highcontrast-enabled] {
791
826
  --dt-color-support-warning-inverse: var(--dt-color-yellow-75);
792
827
  --dt-color-support-brand-01: var(--dt-color-orange-30);
793
828
  --dt-color-support-brand-02: var(--dt-color-orange-75);
794
- --dt-color-support-brand-03: var(--dt-color-blue-25);
795
- --dt-color-support-brand-03-subtle: var(--dt-color-cupcake-70);
796
- --dt-color-support-brand-04: var(--dt-color-red-25);
797
- --dt-color-support-brand-04-subtle: var(--dt-color-berry-70);
798
- --dt-color-support-brand-05: var(--dt-color-yellow);
799
- --dt-color-support-brand-05-subtle: var(--dt-color-turmeric-70);
800
- --dt-color-support-brand-06: var(--dt-color-purple);
829
+ --dt-color-support-brand-tonal: var(--dt-color-orange-90);
830
+ --dt-color-support-brand-03: var(--dt-color-cupcake-30);
831
+ --dt-color-support-brand-03-subtle: var(--dt-color-cupcake-80);
832
+ --dt-color-support-brand-03-tonal: var(--dt-color-cupcake-90);
833
+ --dt-color-support-brand-04: var(--dt-color-berry-40);
834
+ --dt-color-support-brand-04-subtle: var(--dt-color-berry-80);
835
+ --dt-color-support-brand-04-tonal: var(--dt-color-berry-90);
836
+ --dt-color-support-brand-05: var(--dt-color-turmeric-40);
837
+ --dt-color-support-brand-05-subtle: var(--dt-color-turmeric-80);
838
+ --dt-color-support-brand-05-tonal: var(--dt-color-turmeric-90);
839
+ --dt-color-support-brand-06: var(--dt-color-aubergine-70);
801
840
  --dt-color-support-brand-06-subtle: var(--dt-color-aubergine-75);
841
+ --dt-color-support-brand-06-tonal: var(--dt-color-aubergine-80);
802
842
  --dt-color-support-brand-07: var(--dt-color-tomato-50);
803
843
  --dt-color-support-brand-07-subtle: var(--dt-color-tomato-90);
804
844
  --dt-color-support-brand-08: var(--dt-color-latte-30);
805
- --dt-color-support-brand-08-subtle: var(--dt-color-latte-70);
845
+ --dt-color-support-brand-08-subtle: var(--dt-color-latte-80);
846
+ --dt-color-support-brand-08-tonal: var(--dt-color-latte-90);
806
847
  --dt-color-braze-container-01: var(--dt-color-orange-75);
807
848
  --dt-color-braze-container-03: var(--dt-color-cupcake-70);
808
849
  --dt-color-braze-container-04: var(--dt-color-berry-70);
809
850
  --dt-color-braze-container-05: var(--dt-color-turmeric-70);
810
851
  --dt-color-braze-container-08: var(--dt-color-latte-70);
811
- --dt-color-content-default: var(--dt-color-white);
812
- --dt-color-content-subdued: var(--dt-color-charcoal-30);
852
+ --dt-color-content-default: rgb(255,255,255,0.9);
853
+ --dt-color-content-subdued: rgb(255,255,255,0.86);
813
854
  --dt-color-content-interactive-brand: var(--dt-color-orange-30);
814
- --dt-color-content-interactive-light: var(--dt-color-white);
815
- --dt-color-content-interactive-primary: var(--dt-color-charcoal-80);
816
- --dt-color-content-interactive-secondary: var(--dt-color-white);
855
+ --dt-color-content-interactive-light: rgb(255,255,255,0.9);
856
+ --dt-color-content-interactive-primary: rgb(0,0,0,0.76);
857
+ --dt-color-content-interactive-secondary: rgb(255,255,255,0.9);
817
858
  --dt-color-content-interactive-tertiary: var(--dt-color-white);
818
- --dt-color-content-interactive-subdued: var(--dt-color-charcoal-40);
819
- --dt-color-content-interactive-inverse: var(--dt-color-white);
820
- --dt-color-content-interactive-dark: var(--dt-color-charcoal-80);
859
+ --dt-color-content-interactive-subdued: rgb(255,255,255,0.8);
860
+ --dt-color-content-interactive-inverse: rgb(255,255,255,0.9);
861
+ --dt-color-content-interactive-dark: rgb(0,0,0,0.76);
821
862
  --dt-color-content-interactive-error: var(--dt-color-red-10);
822
- --dt-color-content-light: var(--dt-color-white);
823
- --dt-color-content-dark: var(--dt-color-charcoal-80);
824
- --dt-color-content-inverse: var(--dt-color-charcoal-80);
863
+ --dt-color-content-light: rgb(255,255,255,0.9);
864
+ --dt-color-content-dark: rgb(0,0,0,0.76);
865
+ --dt-color-content-inverse: rgb(0,0,0,0.76);
825
866
  --dt-color-content-link: var(--dt-color-white);
826
867
  --dt-color-content-link-distinct: var(--dt-color-blue-10);
827
868
  --dt-color-content-link-light: var(--dt-color-white);
@@ -829,10 +870,27 @@ html[data-highcontrast-enabled] {
829
870
  --dt-color-content-link-visited: var(--dt-color-system-purple-10);
830
871
  --dt-color-content-link-visited-inverse: var(--dt-color-system-purple);
831
872
  --dt-color-content-error: var(--dt-color-red-10);
832
- --dt-color-content-placeholder: var(--dt-color-charcoal-50);
873
+ --dt-color-content-placeholder: rgb(255,255,255,0.55);
833
874
  --dt-color-content-positive: var(--dt-color-green-10);
834
- --dt-color-content-disabled: var(--dt-color-charcoal-50);
875
+ --dt-color-content-disabled: rgb(255,255,255,0.30);
835
876
  --dt-color-content-brand: var(--dt-color-orange-30);
877
+ --dt-color-content-default-solid: var(--dt-color-white);
878
+ --dt-color-content-subdued-solid: var(--dt-color-charcoal-30);
879
+ --dt-color-content-light-solid: var(--dt-color-white);
880
+ --dt-color-content-inverse-solid: var(--dt-color-charcoal-70);
881
+ --dt-color-content-dark-solid: var(--dt-color-charcoal-80);
882
+ --dt-color-content-disabled-solid: var(--dt-color-charcoal-50);
883
+ --dt-color-content-placeholder-solid: var(--dt-color-charcoal-50);
884
+ --dt-color-content-brand-solid: var(--dt-color-orange-30);
885
+ --dt-color-content-error-solid: var(--dt-color-red-10);
886
+ --dt-color-content-positive-solid: var(--dt-color-green-10);
887
+ --dt-color-content-interactive-light-solid: var(--dt-color-white);
888
+ --dt-color-content-interactive-primary-solid: var(--dt-color-charcoal-80);
889
+ --dt-color-content-interactive-secondary-solid: var(--dt-color-white);
890
+ --dt-color-content-interactive-inverse-solid: var(--dt-color-white);
891
+ --dt-color-content-interactive-dark-solid: var(--dt-color-charcoal-80);
892
+ --dt-color-content-interactive-brand-solid: var(--dt-color-orange-30);
893
+ --dt-color-content-interactive-error-solid: var(--dt-color-red-10);
836
894
  --dt-color-hover-01-bg: #fff;
837
895
  --dt-color-hover-01: 8%;
838
896
  --dt-color-hover-01-dark-bg: #000;
@@ -937,7 +995,7 @@ html[data-highcontrast-enabled] {
937
995
  --dt-color-support-positive-inverse: var(--dt-color-green-dark-hc);
938
996
  --dt-color-support-neutral-persistent: var(--dt-color-black);
939
997
  --dt-color-support-error-inverse: var(--dt-color-red-dark-hc);
940
- --dt-color-support-warning-inverse: var(--dt-color-turmeric-60);
998
+ --dt-color-support-warning-inverse: var(--dt-color-yellow-75);
941
999
  --dt-color-support-brand-01: var(--dt-color-orange-30);
942
1000
  --dt-color-support-brand-02: var(--dt-color-black);
943
1001
  --dt-color-support-brand-03: var(--dt-color-black);
@@ -1036,35 +1094,47 @@ html[data-highcontrast-enabled] {
1036
1094
  --dt-gradient-jetplus-brand-03: linear-gradient(140deg, var(--dt-color-orange-75) 0%, var(--dt-color-orange-90) 40%, var(--dt-color-tomato-100) 100%);
1037
1095
  --dt-gradient-jetplus-support-01: linear-gradient(180deg, var(--dt-color-truffle-70) 0%, var(--dt-color-truffle-100) 40%, var(--dt-color-truffle-100) 100%);
1038
1096
  --dt-gradient-jetplus-support-02: linear-gradient(180deg, var(--dt-color-orange-75) 0%, var(--dt-color-transparent) 40%, var(--dt-color-transparent) 100%);
1039
- --dt-gradient-ai-container-default: linear-gradient(140deg, var(--dt-color-cupcake-80) 40%, var(--dt-color-purple) 100%);
1097
+ --dt-gradient-ai-container-default: linear-gradient(140deg, var(--dt-color-cupcake-80) 40%, var(--dt-color-aubergine-70) 100%);
1040
1098
  --dt-gradient-ai-border-default: linear-gradient(140deg, var(--dt-color-cupcake-40) 40%, var(--dt-color-aubergine-30) 100%);
1041
1099
  }
1042
1100
  }
1043
1101
  :root {
1044
1102
  --dt-color-aubergine-10-h: 300;
1045
- --dt-color-aubergine-10-s: 26.2%;
1046
- --dt-color-aubergine-10-l: 87.3%;
1103
+ --dt-color-aubergine-10-s: 26.3%;
1104
+ --dt-color-aubergine-10-l: 85.1%;
1105
+ --dt-color-aubergine-20-h: 300;
1106
+ --dt-color-aubergine-20-s: 24.2%;
1107
+ --dt-color-aubergine-20-l: 75.7%;
1047
1108
  --dt-color-aubergine-30-h: 302;
1048
1109
  --dt-color-aubergine-30-s: 21.3%;
1049
1110
  --dt-color-aubergine-30-l: 65.1%;
1050
1111
  --dt-color-aubergine-5-h: 300;
1051
1112
  --dt-color-aubergine-5-s: 33.3%;
1052
1113
  --dt-color-aubergine-5-l: 92.9%;
1114
+ --dt-color-aubergine-70-h: 300;
1115
+ --dt-color-aubergine-70-s: 19.7%;
1116
+ --dt-color-aubergine-70-l: 29.8%;
1053
1117
  --dt-color-aubergine-75-h: 300;
1054
1118
  --dt-color-aubergine-75-s: 12.3%;
1055
1119
  --dt-color-aubergine-75-l: 25.5%;
1056
1120
  --dt-color-aubergine-80-h: 300;
1057
1121
  --dt-color-aubergine-80-s: 10.1%;
1058
1122
  --dt-color-aubergine-80-l: 21.4%;
1059
- --dt-color-berry-10-h: 352;
1060
- --dt-color-berry-10-s: 75.6%;
1061
- --dt-color-berry-10-l: 92%;
1123
+ --dt-color-berry-10-h: 351;
1124
+ --dt-color-berry-10-s: 77.8%;
1125
+ --dt-color-berry-10-l: 92.9%;
1062
1126
  --dt-color-berry-20-h: 352;
1063
1127
  --dt-color-berry-20-s: 76.5%;
1064
1128
  --dt-color-berry-20-l: 90%;
1129
+ --dt-color-berry-40-h: 352;
1130
+ --dt-color-berry-40-s: 74.5%;
1131
+ --dt-color-berry-40-l: 80%;
1065
1132
  --dt-color-berry-70-h: 352;
1066
1133
  --dt-color-berry-70-s: 18.6%;
1067
1134
  --dt-color-berry-70-l: 50.4%;
1135
+ --dt-color-berry-80-h: 352;
1136
+ --dt-color-berry-80-s: 18.6%;
1137
+ --dt-color-berry-80-l: 40%;
1068
1138
  --dt-color-berry-90-h: 352;
1069
1139
  --dt-color-berry-90-s: 18.8%;
1070
1140
  --dt-color-berry-90-l: 25.1%;
@@ -1131,6 +1201,12 @@ html[data-highcontrast-enabled] {
1131
1201
  --dt-color-cupcake-10-h: 189;
1132
1202
  --dt-color-cupcake-10-s: 29.2%;
1133
1203
  --dt-color-cupcake-10-l: 90.6%;
1204
+ --dt-color-cupcake-20-h: 188;
1205
+ --dt-color-cupcake-20-s: 30.6%;
1206
+ --dt-color-cupcake-20-l: 85.9%;
1207
+ --dt-color-cupcake-30-h: 188;
1208
+ --dt-color-cupcake-30-s: 30.5%;
1209
+ --dt-color-cupcake-30-l: 81.4%;
1134
1210
  --dt-color-cupcake-40-h: 188;
1135
1211
  --dt-color-cupcake-40-s: 22.8%;
1136
1212
  --dt-color-cupcake-40-l: 75.1%;
@@ -1140,9 +1216,9 @@ html[data-highcontrast-enabled] {
1140
1216
  --dt-color-cupcake-80-h: 185;
1141
1217
  --dt-color-cupcake-80-s: 6.7%;
1142
1218
  --dt-color-cupcake-80-l: 32%;
1143
- --dt-color-cupcake-90-h: 186;
1144
- --dt-color-cupcake-90-s: 28.8%;
1145
- --dt-color-cupcake-90-l: 20.4%;
1219
+ --dt-color-cupcake-90-h: 188;
1220
+ --dt-color-cupcake-90-s: 7.8%;
1221
+ --dt-color-cupcake-90-l: 20%;
1146
1222
  --dt-color-green-h: 129;
1147
1223
  --dt-color-green-s: 47.2%;
1148
1224
  --dt-color-green-l: 32%;
@@ -1167,15 +1243,24 @@ html[data-highcontrast-enabled] {
1167
1243
  --dt-color-green-light-hc-h: 145;
1168
1244
  --dt-color-green-light-hc-s: 69.6%;
1169
1245
  --dt-color-green-light-hc-l: 49%;
1170
- --dt-color-latte-10-h: 39;
1171
- --dt-color-latte-10-s: 58.8%;
1172
- --dt-color-latte-10-l: 86.7%;
1246
+ --dt-color-latte-10-h: 40;
1247
+ --dt-color-latte-10-s: 58.1%;
1248
+ --dt-color-latte-10-l: 87.8%;
1249
+ --dt-color-latte-20-h: 39;
1250
+ --dt-color-latte-20-s: 58.6%;
1251
+ --dt-color-latte-20-l: 82.9%;
1173
1252
  --dt-color-latte-30-h: 37;
1174
1253
  --dt-color-latte-30-s: 59%;
1175
1254
  --dt-color-latte-30-l: 77.1%;
1176
1255
  --dt-color-latte-70-h: 38;
1177
1256
  --dt-color-latte-70-s: 17.3%;
1178
1257
  --dt-color-latte-70-l: 43.1%;
1258
+ --dt-color-latte-80-h: 38;
1259
+ --dt-color-latte-80-s: 17.6%;
1260
+ --dt-color-latte-80-l: 30%;
1261
+ --dt-color-latte-90-h: 37;
1262
+ --dt-color-latte-90-s: 17.6%;
1263
+ --dt-color-latte-90-l: 20%;
1179
1264
  --dt-color-mozzarella-10-h: 30;
1180
1265
  --dt-color-mozzarella-10-s: 16.7%;
1181
1266
  --dt-color-mozzarella-10-l: 95.3%;
@@ -1233,9 +1318,9 @@ html[data-highcontrast-enabled] {
1233
1318
  --dt-color-orange-70-h: 25;
1234
1319
  --dt-color-orange-70-s: 81.8%;
1235
1320
  --dt-color-orange-70-l: 38.8%;
1236
- --dt-color-orange-75-h: 29;
1321
+ --dt-color-orange-75-h: 28;
1237
1322
  --dt-color-orange-75-s: 100%;
1238
- --dt-color-orange-75-l: 31.4%;
1323
+ --dt-color-orange-75-l: 29%;
1239
1324
  --dt-color-orange-90-h: 29;
1240
1325
  --dt-color-orange-90-s: 90.2%;
1241
1326
  --dt-color-orange-90-l: 20%;
@@ -1380,6 +1465,12 @@ html[data-highcontrast-enabled] {
1380
1465
  --dt-color-turmeric-10-h: 42;
1381
1466
  --dt-color-turmeric-10-s: 90.9%;
1382
1467
  --dt-color-turmeric-10-l: 87.1%;
1468
+ --dt-color-turmeric-20-h: 42;
1469
+ --dt-color-turmeric-20-s: 89.9%;
1470
+ --dt-color-turmeric-20-l: 80.6%;
1471
+ --dt-color-turmeric-40-h: 43;
1472
+ --dt-color-turmeric-40-s: 90.9%;
1473
+ --dt-color-turmeric-40-l: 61.4%;
1383
1474
  --dt-color-turmeric-5-h: 42;
1384
1475
  --dt-color-turmeric-5-s: 90.2%;
1385
1476
  --dt-color-turmeric-5-l: 92%;
@@ -1392,6 +1483,9 @@ html[data-highcontrast-enabled] {
1392
1483
  --dt-color-turmeric-80-h: 43;
1393
1484
  --dt-color-turmeric-80-s: 56.3%;
1394
1485
  --dt-color-turmeric-80-l: 25.1%;
1486
+ --dt-color-turmeric-90-h: 43;
1487
+ --dt-color-turmeric-90-s: 56.3%;
1488
+ --dt-color-turmeric-90-l: 17.1%;
1395
1489
  --dt-color-white-h: 0;
1396
1490
  --dt-color-white-s: 0%;
1397
1491
  --dt-color-white-l: 100%;
@@ -1554,33 +1648,48 @@ html[data-highcontrast-enabled] {
1554
1648
  --dt-color-support-brand-01-h: var(--dt-color-orange-30-h);
1555
1649
  --dt-color-support-brand-01-s: var(--dt-color-orange-30-s);
1556
1650
  --dt-color-support-brand-01-l: var(--dt-color-orange-30-l);
1557
- --dt-color-support-brand-02-h: var(--dt-color-orange-10-h);
1558
- --dt-color-support-brand-02-s: var(--dt-color-orange-10-s);
1559
- --dt-color-support-brand-02-l: var(--dt-color-orange-10-l);
1560
- --dt-color-support-brand-03-h: var(--dt-color-blue-25-h);
1561
- --dt-color-support-brand-03-s: var(--dt-color-blue-25-s);
1562
- --dt-color-support-brand-03-l: var(--dt-color-blue-25-l);
1563
- --dt-color-support-brand-03-subtle-h: var(--dt-color-cupcake-10-h);
1564
- --dt-color-support-brand-03-subtle-s: var(--dt-color-cupcake-10-s);
1565
- --dt-color-support-brand-03-subtle-l: var(--dt-color-cupcake-10-l);
1566
- --dt-color-support-brand-04-h: var(--dt-color-red-25-h);
1567
- --dt-color-support-brand-04-s: var(--dt-color-red-25-s);
1568
- --dt-color-support-brand-04-l: var(--dt-color-red-25-l);
1569
- --dt-color-support-brand-04-subtle-h: var(--dt-color-berry-10-h);
1570
- --dt-color-support-brand-04-subtle-s: var(--dt-color-berry-10-s);
1571
- --dt-color-support-brand-04-subtle-l: var(--dt-color-berry-10-l);
1572
- --dt-color-support-brand-05-h: var(--dt-color-yellow-h);
1573
- --dt-color-support-brand-05-s: var(--dt-color-yellow-s);
1574
- --dt-color-support-brand-05-l: var(--dt-color-yellow-l);
1575
- --dt-color-support-brand-05-subtle-h: var(--dt-color-turmeric-10-h);
1576
- --dt-color-support-brand-05-subtle-s: var(--dt-color-turmeric-10-s);
1577
- --dt-color-support-brand-05-subtle-l: var(--dt-color-turmeric-10-l);
1578
- --dt-color-support-brand-06-h: var(--dt-color-purple-h);
1579
- --dt-color-support-brand-06-s: var(--dt-color-purple-s);
1580
- --dt-color-support-brand-06-l: var(--dt-color-purple-l);
1581
- --dt-color-support-brand-06-subtle-h: var(--dt-color-aubergine-10-h);
1582
- --dt-color-support-brand-06-subtle-s: var(--dt-color-aubergine-10-s);
1583
- --dt-color-support-brand-06-subtle-l: var(--dt-color-aubergine-10-l);
1651
+ --dt-color-support-brand-02-h: var(--dt-color-orange-20-h);
1652
+ --dt-color-support-brand-02-s: var(--dt-color-orange-20-s);
1653
+ --dt-color-support-brand-02-l: var(--dt-color-orange-20-l);
1654
+ --dt-color-support-brand-tonal-h: var(--dt-color-orange-10-h);
1655
+ --dt-color-support-brand-tonal-s: var(--dt-color-orange-10-s);
1656
+ --dt-color-support-brand-tonal-l: var(--dt-color-orange-10-l);
1657
+ --dt-color-support-brand-03-h: var(--dt-color-cupcake-30-h);
1658
+ --dt-color-support-brand-03-s: var(--dt-color-cupcake-30-s);
1659
+ --dt-color-support-brand-03-l: var(--dt-color-cupcake-30-l);
1660
+ --dt-color-support-brand-03-subtle-h: var(--dt-color-cupcake-20-h);
1661
+ --dt-color-support-brand-03-subtle-s: var(--dt-color-cupcake-20-s);
1662
+ --dt-color-support-brand-03-subtle-l: var(--dt-color-cupcake-20-l);
1663
+ --dt-color-support-brand-03-tonal-h: var(--dt-color-cupcake-10-h);
1664
+ --dt-color-support-brand-03-tonal-s: var(--dt-color-cupcake-10-s);
1665
+ --dt-color-support-brand-03-tonal-l: var(--dt-color-cupcake-10-l);
1666
+ --dt-color-support-brand-04-h: var(--dt-color-berry-40-h);
1667
+ --dt-color-support-brand-04-s: var(--dt-color-berry-40-s);
1668
+ --dt-color-support-brand-04-l: var(--dt-color-berry-40-l);
1669
+ --dt-color-support-brand-04-subtle-h: var(--dt-color-berry-20-h);
1670
+ --dt-color-support-brand-04-subtle-s: var(--dt-color-berry-20-s);
1671
+ --dt-color-support-brand-04-subtle-l: var(--dt-color-berry-20-l);
1672
+ --dt-color-support-brand-04-tonal-h: var(--dt-color-berry-10-h);
1673
+ --dt-color-support-brand-04-tonal-s: var(--dt-color-berry-10-s);
1674
+ --dt-color-support-brand-04-tonal-l: var(--dt-color-berry-10-l);
1675
+ --dt-color-support-brand-05-h: var(--dt-color-turmeric-40-h);
1676
+ --dt-color-support-brand-05-s: var(--dt-color-turmeric-40-s);
1677
+ --dt-color-support-brand-05-l: var(--dt-color-turmeric-40-l);
1678
+ --dt-color-support-brand-05-subtle-h: var(--dt-color-turmeric-20-h);
1679
+ --dt-color-support-brand-05-subtle-s: var(--dt-color-turmeric-20-s);
1680
+ --dt-color-support-brand-05-subtle-l: var(--dt-color-turmeric-20-l);
1681
+ --dt-color-support-brand-05-tonal-h: var(--dt-color-turmeric-10-h);
1682
+ --dt-color-support-brand-05-tonal-s: var(--dt-color-turmeric-10-s);
1683
+ --dt-color-support-brand-05-tonal-l: var(--dt-color-turmeric-10-l);
1684
+ --dt-color-support-brand-06-h: var(--dt-color-aubergine-70-h);
1685
+ --dt-color-support-brand-06-s: var(--dt-color-aubergine-70-s);
1686
+ --dt-color-support-brand-06-l: var(--dt-color-aubergine-70-l);
1687
+ --dt-color-support-brand-06-subtle-h: var(--dt-color-aubergine-20-h);
1688
+ --dt-color-support-brand-06-subtle-s: var(--dt-color-aubergine-20-s);
1689
+ --dt-color-support-brand-06-subtle-l: var(--dt-color-aubergine-20-l);
1690
+ --dt-color-support-brand-06-tonal-h: var(--dt-color-aubergine-10-h);
1691
+ --dt-color-support-brand-06-tonal-s: var(--dt-color-aubergine-10-s);
1692
+ --dt-color-support-brand-06-tonal-l: var(--dt-color-aubergine-10-l);
1584
1693
  --dt-color-support-brand-07-h: var(--dt-color-tomato-50-h);
1585
1694
  --dt-color-support-brand-07-s: var(--dt-color-tomato-50-s);
1586
1695
  --dt-color-support-brand-07-l: var(--dt-color-tomato-50-l);
@@ -1590,9 +1699,12 @@ html[data-highcontrast-enabled] {
1590
1699
  --dt-color-support-brand-08-h: var(--dt-color-latte-30-h);
1591
1700
  --dt-color-support-brand-08-s: var(--dt-color-latte-30-s);
1592
1701
  --dt-color-support-brand-08-l: var(--dt-color-latte-30-l);
1593
- --dt-color-support-brand-08-subtle-h: var(--dt-color-latte-10-h);
1594
- --dt-color-support-brand-08-subtle-s: var(--dt-color-latte-10-s);
1595
- --dt-color-support-brand-08-subtle-l: var(--dt-color-latte-10-l);
1702
+ --dt-color-support-brand-08-subtle-h: var(--dt-color-latte-20-h);
1703
+ --dt-color-support-brand-08-subtle-s: var(--dt-color-latte-20-s);
1704
+ --dt-color-support-brand-08-subtle-l: var(--dt-color-latte-20-l);
1705
+ --dt-color-support-brand-08-tonal-h: var(--dt-color-latte-10-h);
1706
+ --dt-color-support-brand-08-tonal-s: var(--dt-color-latte-10-s);
1707
+ --dt-color-support-brand-08-tonal-l: var(--dt-color-latte-10-l);
1596
1708
  --dt-color-braze-container-01-h: var(--dt-color-orange-10-h);
1597
1709
  --dt-color-braze-container-01-s: var(--dt-color-orange-10-s);
1598
1710
  --dt-color-braze-container-01-l: var(--dt-color-orange-10-l);
@@ -1608,48 +1720,15 @@ html[data-highcontrast-enabled] {
1608
1720
  --dt-color-braze-container-08-h: var(--dt-color-latte-10-h);
1609
1721
  --dt-color-braze-container-08-s: var(--dt-color-latte-10-s);
1610
1722
  --dt-color-braze-container-08-l: var(--dt-color-latte-10-l);
1611
- --dt-color-content-default-h: var(--dt-color-charcoal-80-h);
1612
- --dt-color-content-default-s: var(--dt-color-charcoal-80-s);
1613
- --dt-color-content-default-l: var(--dt-color-charcoal-80-l);
1614
- --dt-color-content-subdued-h: var(--dt-color-charcoal-70-h);
1615
- --dt-color-content-subdued-s: var(--dt-color-charcoal-70-s);
1616
- --dt-color-content-subdued-l: var(--dt-color-charcoal-70-l);
1617
1723
  --dt-color-content-interactive-brand-h: var(--dt-color-orange-h);
1618
1724
  --dt-color-content-interactive-brand-s: var(--dt-color-orange-s);
1619
1725
  --dt-color-content-interactive-brand-l: var(--dt-color-orange-l);
1620
- --dt-color-content-interactive-light-h: var(--dt-color-white-h);
1621
- --dt-color-content-interactive-light-s: var(--dt-color-white-s);
1622
- --dt-color-content-interactive-light-l: var(--dt-color-white-l);
1623
- --dt-color-content-interactive-primary-h: var(--dt-color-white-h);
1624
- --dt-color-content-interactive-primary-s: var(--dt-color-white-s);
1625
- --dt-color-content-interactive-primary-l: var(--dt-color-white-l);
1626
- --dt-color-content-interactive-secondary-h: var(--dt-color-charcoal-80-h);
1627
- --dt-color-content-interactive-secondary-s: var(--dt-color-charcoal-80-s);
1628
- --dt-color-content-interactive-secondary-l: var(--dt-color-charcoal-80-l);
1629
1726
  --dt-color-content-interactive-tertiary-h: var(--dt-color-charcoal-75-h);
1630
1727
  --dt-color-content-interactive-tertiary-s: var(--dt-color-charcoal-75-s);
1631
1728
  --dt-color-content-interactive-tertiary-l: var(--dt-color-charcoal-75-l);
1632
- --dt-color-content-interactive-subdued-h: var(--dt-color-charcoal-60-h);
1633
- --dt-color-content-interactive-subdued-s: var(--dt-color-charcoal-60-s);
1634
- --dt-color-content-interactive-subdued-l: var(--dt-color-charcoal-60-l);
1635
- --dt-color-content-interactive-inverse-h: var(--dt-color-charcoal-80-h);
1636
- --dt-color-content-interactive-inverse-s: var(--dt-color-charcoal-80-s);
1637
- --dt-color-content-interactive-inverse-l: var(--dt-color-charcoal-80-l);
1638
- --dt-color-content-interactive-dark-h: var(--dt-color-charcoal-80-h);
1639
- --dt-color-content-interactive-dark-s: var(--dt-color-charcoal-80-s);
1640
- --dt-color-content-interactive-dark-l: var(--dt-color-charcoal-80-l);
1641
1729
  --dt-color-content-interactive-error-h: var(--dt-color-red-h);
1642
1730
  --dt-color-content-interactive-error-s: var(--dt-color-red-s);
1643
1731
  --dt-color-content-interactive-error-l: var(--dt-color-red-l);
1644
- --dt-color-content-light-h: var(--dt-color-white-h);
1645
- --dt-color-content-light-s: var(--dt-color-white-s);
1646
- --dt-color-content-light-l: var(--dt-color-white-l);
1647
- --dt-color-content-dark-h: var(--dt-color-charcoal-80-h);
1648
- --dt-color-content-dark-s: var(--dt-color-charcoal-80-s);
1649
- --dt-color-content-dark-l: var(--dt-color-charcoal-80-l);
1650
- --dt-color-content-inverse-h: var(--dt-color-white-h);
1651
- --dt-color-content-inverse-s: var(--dt-color-white-s);
1652
- --dt-color-content-inverse-l: var(--dt-color-white-l);
1653
1732
  --dt-color-content-link-h: var(--dt-color-charcoal-80-h);
1654
1733
  --dt-color-content-link-s: var(--dt-color-charcoal-80-s);
1655
1734
  --dt-color-content-link-l: var(--dt-color-charcoal-80-l);
@@ -1671,18 +1750,63 @@ html[data-highcontrast-enabled] {
1671
1750
  --dt-color-content-error-h: var(--dt-color-red-h);
1672
1751
  --dt-color-content-error-s: var(--dt-color-red-s);
1673
1752
  --dt-color-content-error-l: var(--dt-color-red-l);
1674
- --dt-color-content-placeholder-h: var(--dt-color-charcoal-57-h);
1675
- --dt-color-content-placeholder-s: var(--dt-color-charcoal-57-s);
1676
- --dt-color-content-placeholder-l: var(--dt-color-charcoal-57-l);
1677
1753
  --dt-color-content-positive-h: var(--dt-color-green-h);
1678
1754
  --dt-color-content-positive-s: var(--dt-color-green-s);
1679
1755
  --dt-color-content-positive-l: var(--dt-color-green-l);
1680
- --dt-color-content-disabled-h: var(--dt-color-charcoal-50-h);
1681
- --dt-color-content-disabled-s: var(--dt-color-charcoal-50-s);
1682
- --dt-color-content-disabled-l: var(--dt-color-charcoal-50-l);
1683
1756
  --dt-color-content-brand-h: var(--dt-color-orange-h);
1684
1757
  --dt-color-content-brand-s: var(--dt-color-orange-s);
1685
1758
  --dt-color-content-brand-l: var(--dt-color-orange-l);
1759
+ --dt-color-content-default-solid-h: var(--dt-color-charcoal-80-h);
1760
+ --dt-color-content-default-solid-s: var(--dt-color-charcoal-80-s);
1761
+ --dt-color-content-default-solid-l: var(--dt-color-charcoal-80-l);
1762
+ --dt-color-content-subdued-solid-h: var(--dt-color-charcoal-70-h);
1763
+ --dt-color-content-subdued-solid-s: var(--dt-color-charcoal-70-s);
1764
+ --dt-color-content-subdued-solid-l: var(--dt-color-charcoal-70-l);
1765
+ --dt-color-content-light-solid-h: var(--dt-color-white-h);
1766
+ --dt-color-content-light-solid-s: var(--dt-color-white-s);
1767
+ --dt-color-content-light-solid-l: var(--dt-color-white-l);
1768
+ --dt-color-content-inverse-solid-h: var(--dt-color-white-h);
1769
+ --dt-color-content-inverse-solid-s: var(--dt-color-white-s);
1770
+ --dt-color-content-inverse-solid-l: var(--dt-color-white-l);
1771
+ --dt-color-content-dark-solid-h: var(--dt-color-charcoal-80-h);
1772
+ --dt-color-content-dark-solid-s: var(--dt-color-charcoal-80-s);
1773
+ --dt-color-content-dark-solid-l: var(--dt-color-charcoal-80-l);
1774
+ --dt-color-content-disabled-solid-h: var(--dt-color-charcoal-50-h);
1775
+ --dt-color-content-disabled-solid-s: var(--dt-color-charcoal-50-s);
1776
+ --dt-color-content-disabled-solid-l: var(--dt-color-charcoal-50-l);
1777
+ --dt-color-content-placeholder-solid-h: var(--dt-color-charcoal-57-h);
1778
+ --dt-color-content-placeholder-solid-s: var(--dt-color-charcoal-57-s);
1779
+ --dt-color-content-placeholder-solid-l: var(--dt-color-charcoal-57-l);
1780
+ --dt-color-content-brand-solid-h: var(--dt-color-orange-h);
1781
+ --dt-color-content-brand-solid-s: var(--dt-color-orange-s);
1782
+ --dt-color-content-brand-solid-l: var(--dt-color-orange-l);
1783
+ --dt-color-content-error-solid-h: var(--dt-color-red-h);
1784
+ --dt-color-content-error-solid-s: var(--dt-color-red-s);
1785
+ --dt-color-content-error-solid-l: var(--dt-color-red-l);
1786
+ --dt-color-content-positive-solid-h: var(--dt-color-green-h);
1787
+ --dt-color-content-positive-solid-s: var(--dt-color-green-s);
1788
+ --dt-color-content-positive-solid-l: var(--dt-color-green-l);
1789
+ --dt-color-content-interactive-light-solid-h: var(--dt-color-white-h);
1790
+ --dt-color-content-interactive-light-solid-s: var(--dt-color-white-s);
1791
+ --dt-color-content-interactive-light-solid-l: var(--dt-color-white-l);
1792
+ --dt-color-content-interactive-primary-solid-h: var(--dt-color-white-h);
1793
+ --dt-color-content-interactive-primary-solid-s: var(--dt-color-white-s);
1794
+ --dt-color-content-interactive-primary-solid-l: var(--dt-color-white-l);
1795
+ --dt-color-content-interactive-secondary-solid-h: var(--dt-color-charcoal-80-h);
1796
+ --dt-color-content-interactive-secondary-solid-s: var(--dt-color-charcoal-80-s);
1797
+ --dt-color-content-interactive-secondary-solid-l: var(--dt-color-charcoal-80-l);
1798
+ --dt-color-content-interactive-inverse-solid-h: var(--dt-color-charcoal-80-h);
1799
+ --dt-color-content-interactive-inverse-solid-s: var(--dt-color-charcoal-80-s);
1800
+ --dt-color-content-interactive-inverse-solid-l: var(--dt-color-charcoal-80-l);
1801
+ --dt-color-content-interactive-dark-solid-h: var(--dt-color-charcoal-80-h);
1802
+ --dt-color-content-interactive-dark-solid-s: var(--dt-color-charcoal-80-s);
1803
+ --dt-color-content-interactive-dark-solid-l: var(--dt-color-charcoal-80-l);
1804
+ --dt-color-content-interactive-brand-solid-h: var(--dt-color-orange-h);
1805
+ --dt-color-content-interactive-brand-solid-s: var(--dt-color-orange-s);
1806
+ --dt-color-content-interactive-brand-solid-l: var(--dt-color-orange-l);
1807
+ --dt-color-content-interactive-error-solid-h: var(--dt-color-red-h);
1808
+ --dt-color-content-interactive-error-solid-s: var(--dt-color-red-s);
1809
+ --dt-color-content-interactive-error-solid-l: var(--dt-color-red-l);
1686
1810
  --dt-color-focus-inner-h: var(--dt-color-white-h);
1687
1811
  --dt-color-focus-inner-s: var(--dt-color-white-s);
1688
1812
  --dt-color-focus-inner-l: var(--dt-color-white-l);
@@ -2222,30 +2346,45 @@ html[data-highcontrast-enabled] {
2222
2346
  --dt-color-support-brand-02-h: var(--dt-color-orange-75-h);
2223
2347
  --dt-color-support-brand-02-s: var(--dt-color-orange-75-s);
2224
2348
  --dt-color-support-brand-02-l: var(--dt-color-orange-75-l);
2225
- --dt-color-support-brand-03-h: var(--dt-color-blue-25-h);
2226
- --dt-color-support-brand-03-s: var(--dt-color-blue-25-s);
2227
- --dt-color-support-brand-03-l: var(--dt-color-blue-25-l);
2228
- --dt-color-support-brand-03-subtle-h: var(--dt-color-cupcake-70-h);
2229
- --dt-color-support-brand-03-subtle-s: var(--dt-color-cupcake-70-s);
2230
- --dt-color-support-brand-03-subtle-l: var(--dt-color-cupcake-70-l);
2231
- --dt-color-support-brand-04-h: var(--dt-color-red-25-h);
2232
- --dt-color-support-brand-04-s: var(--dt-color-red-25-s);
2233
- --dt-color-support-brand-04-l: var(--dt-color-red-25-l);
2234
- --dt-color-support-brand-04-subtle-h: var(--dt-color-berry-70-h);
2235
- --dt-color-support-brand-04-subtle-s: var(--dt-color-berry-70-s);
2236
- --dt-color-support-brand-04-subtle-l: var(--dt-color-berry-70-l);
2237
- --dt-color-support-brand-05-h: var(--dt-color-yellow-h);
2238
- --dt-color-support-brand-05-s: var(--dt-color-yellow-s);
2239
- --dt-color-support-brand-05-l: var(--dt-color-yellow-l);
2240
- --dt-color-support-brand-05-subtle-h: var(--dt-color-turmeric-70-h);
2241
- --dt-color-support-brand-05-subtle-s: var(--dt-color-turmeric-70-s);
2242
- --dt-color-support-brand-05-subtle-l: var(--dt-color-turmeric-70-l);
2243
- --dt-color-support-brand-06-h: var(--dt-color-purple-h);
2244
- --dt-color-support-brand-06-s: var(--dt-color-purple-s);
2245
- --dt-color-support-brand-06-l: var(--dt-color-purple-l);
2349
+ --dt-color-support-brand-tonal-h: var(--dt-color-orange-90-h);
2350
+ --dt-color-support-brand-tonal-s: var(--dt-color-orange-90-s);
2351
+ --dt-color-support-brand-tonal-l: var(--dt-color-orange-90-l);
2352
+ --dt-color-support-brand-03-h: var(--dt-color-cupcake-30-h);
2353
+ --dt-color-support-brand-03-s: var(--dt-color-cupcake-30-s);
2354
+ --dt-color-support-brand-03-l: var(--dt-color-cupcake-30-l);
2355
+ --dt-color-support-brand-03-subtle-h: var(--dt-color-cupcake-80-h);
2356
+ --dt-color-support-brand-03-subtle-s: var(--dt-color-cupcake-80-s);
2357
+ --dt-color-support-brand-03-subtle-l: var(--dt-color-cupcake-80-l);
2358
+ --dt-color-support-brand-03-tonal-h: var(--dt-color-cupcake-90-h);
2359
+ --dt-color-support-brand-03-tonal-s: var(--dt-color-cupcake-90-s);
2360
+ --dt-color-support-brand-03-tonal-l: var(--dt-color-cupcake-90-l);
2361
+ --dt-color-support-brand-04-h: var(--dt-color-berry-40-h);
2362
+ --dt-color-support-brand-04-s: var(--dt-color-berry-40-s);
2363
+ --dt-color-support-brand-04-l: var(--dt-color-berry-40-l);
2364
+ --dt-color-support-brand-04-subtle-h: var(--dt-color-berry-80-h);
2365
+ --dt-color-support-brand-04-subtle-s: var(--dt-color-berry-80-s);
2366
+ --dt-color-support-brand-04-subtle-l: var(--dt-color-berry-80-l);
2367
+ --dt-color-support-brand-04-tonal-h: var(--dt-color-berry-90-h);
2368
+ --dt-color-support-brand-04-tonal-s: var(--dt-color-berry-90-s);
2369
+ --dt-color-support-brand-04-tonal-l: var(--dt-color-berry-90-l);
2370
+ --dt-color-support-brand-05-h: var(--dt-color-turmeric-40-h);
2371
+ --dt-color-support-brand-05-s: var(--dt-color-turmeric-40-s);
2372
+ --dt-color-support-brand-05-l: var(--dt-color-turmeric-40-l);
2373
+ --dt-color-support-brand-05-subtle-h: var(--dt-color-turmeric-80-h);
2374
+ --dt-color-support-brand-05-subtle-s: var(--dt-color-turmeric-80-s);
2375
+ --dt-color-support-brand-05-subtle-l: var(--dt-color-turmeric-80-l);
2376
+ --dt-color-support-brand-05-tonal-h: var(--dt-color-turmeric-90-h);
2377
+ --dt-color-support-brand-05-tonal-s: var(--dt-color-turmeric-90-s);
2378
+ --dt-color-support-brand-05-tonal-l: var(--dt-color-turmeric-90-l);
2379
+ --dt-color-support-brand-06-h: var(--dt-color-aubergine-70-h);
2380
+ --dt-color-support-brand-06-s: var(--dt-color-aubergine-70-s);
2381
+ --dt-color-support-brand-06-l: var(--dt-color-aubergine-70-l);
2246
2382
  --dt-color-support-brand-06-subtle-h: var(--dt-color-aubergine-75-h);
2247
2383
  --dt-color-support-brand-06-subtle-s: var(--dt-color-aubergine-75-s);
2248
2384
  --dt-color-support-brand-06-subtle-l: var(--dt-color-aubergine-75-l);
2385
+ --dt-color-support-brand-06-tonal-h: var(--dt-color-aubergine-80-h);
2386
+ --dt-color-support-brand-06-tonal-s: var(--dt-color-aubergine-80-s);
2387
+ --dt-color-support-brand-06-tonal-l: var(--dt-color-aubergine-80-l);
2249
2388
  --dt-color-support-brand-07-h: var(--dt-color-tomato-50-h);
2250
2389
  --dt-color-support-brand-07-s: var(--dt-color-tomato-50-s);
2251
2390
  --dt-color-support-brand-07-l: var(--dt-color-tomato-50-l);
@@ -2255,9 +2394,12 @@ html[data-highcontrast-enabled] {
2255
2394
  --dt-color-support-brand-08-h: var(--dt-color-latte-30-h);
2256
2395
  --dt-color-support-brand-08-s: var(--dt-color-latte-30-s);
2257
2396
  --dt-color-support-brand-08-l: var(--dt-color-latte-30-l);
2258
- --dt-color-support-brand-08-subtle-h: var(--dt-color-latte-70-h);
2259
- --dt-color-support-brand-08-subtle-s: var(--dt-color-latte-70-s);
2260
- --dt-color-support-brand-08-subtle-l: var(--dt-color-latte-70-l);
2397
+ --dt-color-support-brand-08-subtle-h: var(--dt-color-latte-80-h);
2398
+ --dt-color-support-brand-08-subtle-s: var(--dt-color-latte-80-s);
2399
+ --dt-color-support-brand-08-subtle-l: var(--dt-color-latte-80-l);
2400
+ --dt-color-support-brand-08-tonal-h: var(--dt-color-latte-90-h);
2401
+ --dt-color-support-brand-08-tonal-s: var(--dt-color-latte-90-s);
2402
+ --dt-color-support-brand-08-tonal-l: var(--dt-color-latte-90-l);
2261
2403
  --dt-color-braze-container-01-h: var(--dt-color-orange-75-h);
2262
2404
  --dt-color-braze-container-01-s: var(--dt-color-orange-75-s);
2263
2405
  --dt-color-braze-container-01-l: var(--dt-color-orange-75-l);
@@ -2273,48 +2415,15 @@ html[data-highcontrast-enabled] {
2273
2415
  --dt-color-braze-container-08-h: var(--dt-color-latte-70-h);
2274
2416
  --dt-color-braze-container-08-s: var(--dt-color-latte-70-s);
2275
2417
  --dt-color-braze-container-08-l: var(--dt-color-latte-70-l);
2276
- --dt-color-content-default-h: var(--dt-color-white-h);
2277
- --dt-color-content-default-s: var(--dt-color-white-s);
2278
- --dt-color-content-default-l: var(--dt-color-white-l);
2279
- --dt-color-content-subdued-h: var(--dt-color-charcoal-30-h);
2280
- --dt-color-content-subdued-s: var(--dt-color-charcoal-30-s);
2281
- --dt-color-content-subdued-l: var(--dt-color-charcoal-30-l);
2282
2418
  --dt-color-content-interactive-brand-h: var(--dt-color-orange-30-h);
2283
2419
  --dt-color-content-interactive-brand-s: var(--dt-color-orange-30-s);
2284
2420
  --dt-color-content-interactive-brand-l: var(--dt-color-orange-30-l);
2285
- --dt-color-content-interactive-light-h: var(--dt-color-white-h);
2286
- --dt-color-content-interactive-light-s: var(--dt-color-white-s);
2287
- --dt-color-content-interactive-light-l: var(--dt-color-white-l);
2288
- --dt-color-content-interactive-primary-h: var(--dt-color-charcoal-80-h);
2289
- --dt-color-content-interactive-primary-s: var(--dt-color-charcoal-80-s);
2290
- --dt-color-content-interactive-primary-l: var(--dt-color-charcoal-80-l);
2291
- --dt-color-content-interactive-secondary-h: var(--dt-color-white-h);
2292
- --dt-color-content-interactive-secondary-s: var(--dt-color-white-s);
2293
- --dt-color-content-interactive-secondary-l: var(--dt-color-white-l);
2294
2421
  --dt-color-content-interactive-tertiary-h: var(--dt-color-white-h);
2295
2422
  --dt-color-content-interactive-tertiary-s: var(--dt-color-white-s);
2296
2423
  --dt-color-content-interactive-tertiary-l: var(--dt-color-white-l);
2297
- --dt-color-content-interactive-subdued-h: var(--dt-color-charcoal-40-h);
2298
- --dt-color-content-interactive-subdued-s: var(--dt-color-charcoal-40-s);
2299
- --dt-color-content-interactive-subdued-l: var(--dt-color-charcoal-40-l);
2300
- --dt-color-content-interactive-inverse-h: var(--dt-color-white-h);
2301
- --dt-color-content-interactive-inverse-s: var(--dt-color-white-s);
2302
- --dt-color-content-interactive-inverse-l: var(--dt-color-white-l);
2303
- --dt-color-content-interactive-dark-h: var(--dt-color-charcoal-80-h);
2304
- --dt-color-content-interactive-dark-s: var(--dt-color-charcoal-80-s);
2305
- --dt-color-content-interactive-dark-l: var(--dt-color-charcoal-80-l);
2306
2424
  --dt-color-content-interactive-error-h: var(--dt-color-red-10-h);
2307
2425
  --dt-color-content-interactive-error-s: var(--dt-color-red-10-s);
2308
2426
  --dt-color-content-interactive-error-l: var(--dt-color-red-10-l);
2309
- --dt-color-content-light-h: var(--dt-color-white-h);
2310
- --dt-color-content-light-s: var(--dt-color-white-s);
2311
- --dt-color-content-light-l: var(--dt-color-white-l);
2312
- --dt-color-content-dark-h: var(--dt-color-charcoal-80-h);
2313
- --dt-color-content-dark-s: var(--dt-color-charcoal-80-s);
2314
- --dt-color-content-dark-l: var(--dt-color-charcoal-80-l);
2315
- --dt-color-content-inverse-h: var(--dt-color-charcoal-80-h);
2316
- --dt-color-content-inverse-s: var(--dt-color-charcoal-80-s);
2317
- --dt-color-content-inverse-l: var(--dt-color-charcoal-80-l);
2318
2427
  --dt-color-content-link-h: var(--dt-color-white-h);
2319
2428
  --dt-color-content-link-s: var(--dt-color-white-s);
2320
2429
  --dt-color-content-link-l: var(--dt-color-white-l);
@@ -2336,18 +2445,63 @@ html[data-highcontrast-enabled] {
2336
2445
  --dt-color-content-error-h: var(--dt-color-red-10-h);
2337
2446
  --dt-color-content-error-s: var(--dt-color-red-10-s);
2338
2447
  --dt-color-content-error-l: var(--dt-color-red-10-l);
2339
- --dt-color-content-placeholder-h: var(--dt-color-charcoal-50-h);
2340
- --dt-color-content-placeholder-s: var(--dt-color-charcoal-50-s);
2341
- --dt-color-content-placeholder-l: var(--dt-color-charcoal-50-l);
2342
2448
  --dt-color-content-positive-h: var(--dt-color-green-10-h);
2343
2449
  --dt-color-content-positive-s: var(--dt-color-green-10-s);
2344
2450
  --dt-color-content-positive-l: var(--dt-color-green-10-l);
2345
- --dt-color-content-disabled-h: var(--dt-color-charcoal-50-h);
2346
- --dt-color-content-disabled-s: var(--dt-color-charcoal-50-s);
2347
- --dt-color-content-disabled-l: var(--dt-color-charcoal-50-l);
2348
2451
  --dt-color-content-brand-h: var(--dt-color-orange-30-h);
2349
2452
  --dt-color-content-brand-s: var(--dt-color-orange-30-s);
2350
2453
  --dt-color-content-brand-l: var(--dt-color-orange-30-l);
2454
+ --dt-color-content-default-solid-h: var(--dt-color-white-h);
2455
+ --dt-color-content-default-solid-s: var(--dt-color-white-s);
2456
+ --dt-color-content-default-solid-l: var(--dt-color-white-l);
2457
+ --dt-color-content-subdued-solid-h: var(--dt-color-charcoal-30-h);
2458
+ --dt-color-content-subdued-solid-s: var(--dt-color-charcoal-30-s);
2459
+ --dt-color-content-subdued-solid-l: var(--dt-color-charcoal-30-l);
2460
+ --dt-color-content-light-solid-h: var(--dt-color-white-h);
2461
+ --dt-color-content-light-solid-s: var(--dt-color-white-s);
2462
+ --dt-color-content-light-solid-l: var(--dt-color-white-l);
2463
+ --dt-color-content-inverse-solid-h: var(--dt-color-charcoal-70-h);
2464
+ --dt-color-content-inverse-solid-s: var(--dt-color-charcoal-70-s);
2465
+ --dt-color-content-inverse-solid-l: var(--dt-color-charcoal-70-l);
2466
+ --dt-color-content-dark-solid-h: var(--dt-color-charcoal-80-h);
2467
+ --dt-color-content-dark-solid-s: var(--dt-color-charcoal-80-s);
2468
+ --dt-color-content-dark-solid-l: var(--dt-color-charcoal-80-l);
2469
+ --dt-color-content-disabled-solid-h: var(--dt-color-charcoal-50-h);
2470
+ --dt-color-content-disabled-solid-s: var(--dt-color-charcoal-50-s);
2471
+ --dt-color-content-disabled-solid-l: var(--dt-color-charcoal-50-l);
2472
+ --dt-color-content-placeholder-solid-h: var(--dt-color-charcoal-50-h);
2473
+ --dt-color-content-placeholder-solid-s: var(--dt-color-charcoal-50-s);
2474
+ --dt-color-content-placeholder-solid-l: var(--dt-color-charcoal-50-l);
2475
+ --dt-color-content-brand-solid-h: var(--dt-color-orange-30-h);
2476
+ --dt-color-content-brand-solid-s: var(--dt-color-orange-30-s);
2477
+ --dt-color-content-brand-solid-l: var(--dt-color-orange-30-l);
2478
+ --dt-color-content-error-solid-h: var(--dt-color-red-10-h);
2479
+ --dt-color-content-error-solid-s: var(--dt-color-red-10-s);
2480
+ --dt-color-content-error-solid-l: var(--dt-color-red-10-l);
2481
+ --dt-color-content-positive-solid-h: var(--dt-color-green-10-h);
2482
+ --dt-color-content-positive-solid-s: var(--dt-color-green-10-s);
2483
+ --dt-color-content-positive-solid-l: var(--dt-color-green-10-l);
2484
+ --dt-color-content-interactive-light-solid-h: var(--dt-color-white-h);
2485
+ --dt-color-content-interactive-light-solid-s: var(--dt-color-white-s);
2486
+ --dt-color-content-interactive-light-solid-l: var(--dt-color-white-l);
2487
+ --dt-color-content-interactive-primary-solid-h: var(--dt-color-charcoal-80-h);
2488
+ --dt-color-content-interactive-primary-solid-s: var(--dt-color-charcoal-80-s);
2489
+ --dt-color-content-interactive-primary-solid-l: var(--dt-color-charcoal-80-l);
2490
+ --dt-color-content-interactive-secondary-solid-h: var(--dt-color-white-h);
2491
+ --dt-color-content-interactive-secondary-solid-s: var(--dt-color-white-s);
2492
+ --dt-color-content-interactive-secondary-solid-l: var(--dt-color-white-l);
2493
+ --dt-color-content-interactive-inverse-solid-h: var(--dt-color-white-h);
2494
+ --dt-color-content-interactive-inverse-solid-s: var(--dt-color-white-s);
2495
+ --dt-color-content-interactive-inverse-solid-l: var(--dt-color-white-l);
2496
+ --dt-color-content-interactive-dark-solid-h: var(--dt-color-charcoal-80-h);
2497
+ --dt-color-content-interactive-dark-solid-s: var(--dt-color-charcoal-80-s);
2498
+ --dt-color-content-interactive-dark-solid-l: var(--dt-color-charcoal-80-l);
2499
+ --dt-color-content-interactive-brand-solid-h: var(--dt-color-orange-30-h);
2500
+ --dt-color-content-interactive-brand-solid-s: var(--dt-color-orange-30-s);
2501
+ --dt-color-content-interactive-brand-solid-l: var(--dt-color-orange-30-l);
2502
+ --dt-color-content-interactive-error-solid-h: var(--dt-color-red-10-h);
2503
+ --dt-color-content-interactive-error-solid-s: var(--dt-color-red-10-s);
2504
+ --dt-color-content-interactive-error-solid-l: var(--dt-color-red-10-l);
2351
2505
  --dt-color-focus-inner-h: var(--dt-color-black-h);
2352
2506
  --dt-color-focus-inner-s: var(--dt-color-black-s);
2353
2507
  --dt-color-focus-inner-l: var(--dt-color-black-l);
@@ -2583,9 +2737,9 @@ html[data-highcontrast-enabled] {
2583
2737
  --dt-color-support-error-inverse-h: var(--dt-color-red-dark-hc-h);
2584
2738
  --dt-color-support-error-inverse-s: var(--dt-color-red-dark-hc-s);
2585
2739
  --dt-color-support-error-inverse-l: var(--dt-color-red-dark-hc-l);
2586
- --dt-color-support-warning-inverse-h: var(--dt-color-turmeric-60-h);
2587
- --dt-color-support-warning-inverse-s: var(--dt-color-turmeric-60-s);
2588
- --dt-color-support-warning-inverse-l: var(--dt-color-turmeric-60-l);
2740
+ --dt-color-support-warning-inverse-h: var(--dt-color-yellow-75-h);
2741
+ --dt-color-support-warning-inverse-s: var(--dt-color-yellow-75-s);
2742
+ --dt-color-support-warning-inverse-l: var(--dt-color-yellow-75-l);
2589
2743
  --dt-color-support-brand-01-h: var(--dt-color-orange-30-h);
2590
2744
  --dt-color-support-brand-01-s: var(--dt-color-orange-30-s);
2591
2745
  --dt-color-support-brand-01-l: var(--dt-color-orange-30-l);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-css",
3
- "version": "0.20.0",
3
+ "version": "0.22.0",
4
4
  "description": "A styling library that provides both a shared collection of ready to use CSS styles to be used across JET web front-ends, and SCSS-based style helpers for our PIE Web Component library.",
5
5
  "repository": {
6
6
  "type": "git",