@justeattakeaway/pie-css 0.20.0 → 0.21.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 +191 -95
  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,19 +189,25 @@
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);
@@ -791,18 +809,24 @@ html[data-highcontrast-enabled] {
791
809
  --dt-color-support-warning-inverse: var(--dt-color-yellow-75);
792
810
  --dt-color-support-brand-01: var(--dt-color-orange-30);
793
811
  --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);
812
+ --dt-color-support-brand-tonal: var(--dt-color-orange-90);
813
+ --dt-color-support-brand-03: var(--dt-color-cupcake-30);
814
+ --dt-color-support-brand-03-subtle: var(--dt-color-cupcake-80);
815
+ --dt-color-support-brand-03-tonal: var(--dt-color-cupcake-90);
816
+ --dt-color-support-brand-04: var(--dt-color-berry-40);
817
+ --dt-color-support-brand-04-subtle: var(--dt-color-berry-80);
818
+ --dt-color-support-brand-04-tonal: var(--dt-color-berry-90);
819
+ --dt-color-support-brand-05: var(--dt-color-turmeric-40);
820
+ --dt-color-support-brand-05-subtle: var(--dt-color-turmeric-80);
821
+ --dt-color-support-brand-05-tonal: var(--dt-color-turmeric-90);
822
+ --dt-color-support-brand-06: var(--dt-color-aubergine-70);
801
823
  --dt-color-support-brand-06-subtle: var(--dt-color-aubergine-75);
824
+ --dt-color-support-brand-06-tonal: var(--dt-color-aubergine-80);
802
825
  --dt-color-support-brand-07: var(--dt-color-tomato-50);
803
826
  --dt-color-support-brand-07-subtle: var(--dt-color-tomato-90);
804
827
  --dt-color-support-brand-08: var(--dt-color-latte-30);
805
- --dt-color-support-brand-08-subtle: var(--dt-color-latte-70);
828
+ --dt-color-support-brand-08-subtle: var(--dt-color-latte-80);
829
+ --dt-color-support-brand-08-tonal: var(--dt-color-latte-90);
806
830
  --dt-color-braze-container-01: var(--dt-color-orange-75);
807
831
  --dt-color-braze-container-03: var(--dt-color-cupcake-70);
808
832
  --dt-color-braze-container-04: var(--dt-color-berry-70);
@@ -937,7 +961,7 @@ html[data-highcontrast-enabled] {
937
961
  --dt-color-support-positive-inverse: var(--dt-color-green-dark-hc);
938
962
  --dt-color-support-neutral-persistent: var(--dt-color-black);
939
963
  --dt-color-support-error-inverse: var(--dt-color-red-dark-hc);
940
- --dt-color-support-warning-inverse: var(--dt-color-turmeric-60);
964
+ --dt-color-support-warning-inverse: var(--dt-color-yellow-75);
941
965
  --dt-color-support-brand-01: var(--dt-color-orange-30);
942
966
  --dt-color-support-brand-02: var(--dt-color-black);
943
967
  --dt-color-support-brand-03: var(--dt-color-black);
@@ -1036,35 +1060,47 @@ html[data-highcontrast-enabled] {
1036
1060
  --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
1061
  --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
1062
  --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%);
1063
+ --dt-gradient-ai-container-default: linear-gradient(140deg, var(--dt-color-cupcake-80) 40%, var(--dt-color-aubergine-70) 100%);
1040
1064
  --dt-gradient-ai-border-default: linear-gradient(140deg, var(--dt-color-cupcake-40) 40%, var(--dt-color-aubergine-30) 100%);
1041
1065
  }
1042
1066
  }
1043
1067
  :root {
1044
1068
  --dt-color-aubergine-10-h: 300;
1045
- --dt-color-aubergine-10-s: 26.2%;
1046
- --dt-color-aubergine-10-l: 87.3%;
1069
+ --dt-color-aubergine-10-s: 26.3%;
1070
+ --dt-color-aubergine-10-l: 85.1%;
1071
+ --dt-color-aubergine-20-h: 300;
1072
+ --dt-color-aubergine-20-s: 24.2%;
1073
+ --dt-color-aubergine-20-l: 75.7%;
1047
1074
  --dt-color-aubergine-30-h: 302;
1048
1075
  --dt-color-aubergine-30-s: 21.3%;
1049
1076
  --dt-color-aubergine-30-l: 65.1%;
1050
1077
  --dt-color-aubergine-5-h: 300;
1051
1078
  --dt-color-aubergine-5-s: 33.3%;
1052
1079
  --dt-color-aubergine-5-l: 92.9%;
1080
+ --dt-color-aubergine-70-h: 300;
1081
+ --dt-color-aubergine-70-s: 19.7%;
1082
+ --dt-color-aubergine-70-l: 29.8%;
1053
1083
  --dt-color-aubergine-75-h: 300;
1054
1084
  --dt-color-aubergine-75-s: 12.3%;
1055
1085
  --dt-color-aubergine-75-l: 25.5%;
1056
1086
  --dt-color-aubergine-80-h: 300;
1057
1087
  --dt-color-aubergine-80-s: 10.1%;
1058
1088
  --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%;
1089
+ --dt-color-berry-10-h: 351;
1090
+ --dt-color-berry-10-s: 77.8%;
1091
+ --dt-color-berry-10-l: 92.9%;
1062
1092
  --dt-color-berry-20-h: 352;
1063
1093
  --dt-color-berry-20-s: 76.5%;
1064
1094
  --dt-color-berry-20-l: 90%;
1095
+ --dt-color-berry-40-h: 352;
1096
+ --dt-color-berry-40-s: 74.5%;
1097
+ --dt-color-berry-40-l: 80%;
1065
1098
  --dt-color-berry-70-h: 352;
1066
1099
  --dt-color-berry-70-s: 18.6%;
1067
1100
  --dt-color-berry-70-l: 50.4%;
1101
+ --dt-color-berry-80-h: 352;
1102
+ --dt-color-berry-80-s: 18.6%;
1103
+ --dt-color-berry-80-l: 40%;
1068
1104
  --dt-color-berry-90-h: 352;
1069
1105
  --dt-color-berry-90-s: 18.8%;
1070
1106
  --dt-color-berry-90-l: 25.1%;
@@ -1131,6 +1167,12 @@ html[data-highcontrast-enabled] {
1131
1167
  --dt-color-cupcake-10-h: 189;
1132
1168
  --dt-color-cupcake-10-s: 29.2%;
1133
1169
  --dt-color-cupcake-10-l: 90.6%;
1170
+ --dt-color-cupcake-20-h: 188;
1171
+ --dt-color-cupcake-20-s: 30.6%;
1172
+ --dt-color-cupcake-20-l: 85.9%;
1173
+ --dt-color-cupcake-30-h: 188;
1174
+ --dt-color-cupcake-30-s: 30.5%;
1175
+ --dt-color-cupcake-30-l: 81.4%;
1134
1176
  --dt-color-cupcake-40-h: 188;
1135
1177
  --dt-color-cupcake-40-s: 22.8%;
1136
1178
  --dt-color-cupcake-40-l: 75.1%;
@@ -1140,9 +1182,9 @@ html[data-highcontrast-enabled] {
1140
1182
  --dt-color-cupcake-80-h: 185;
1141
1183
  --dt-color-cupcake-80-s: 6.7%;
1142
1184
  --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%;
1185
+ --dt-color-cupcake-90-h: 188;
1186
+ --dt-color-cupcake-90-s: 7.8%;
1187
+ --dt-color-cupcake-90-l: 20%;
1146
1188
  --dt-color-green-h: 129;
1147
1189
  --dt-color-green-s: 47.2%;
1148
1190
  --dt-color-green-l: 32%;
@@ -1167,15 +1209,24 @@ html[data-highcontrast-enabled] {
1167
1209
  --dt-color-green-light-hc-h: 145;
1168
1210
  --dt-color-green-light-hc-s: 69.6%;
1169
1211
  --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%;
1212
+ --dt-color-latte-10-h: 40;
1213
+ --dt-color-latte-10-s: 58.1%;
1214
+ --dt-color-latte-10-l: 87.8%;
1215
+ --dt-color-latte-20-h: 39;
1216
+ --dt-color-latte-20-s: 58.6%;
1217
+ --dt-color-latte-20-l: 82.9%;
1173
1218
  --dt-color-latte-30-h: 37;
1174
1219
  --dt-color-latte-30-s: 59%;
1175
1220
  --dt-color-latte-30-l: 77.1%;
1176
1221
  --dt-color-latte-70-h: 38;
1177
1222
  --dt-color-latte-70-s: 17.3%;
1178
1223
  --dt-color-latte-70-l: 43.1%;
1224
+ --dt-color-latte-80-h: 38;
1225
+ --dt-color-latte-80-s: 17.6%;
1226
+ --dt-color-latte-80-l: 30%;
1227
+ --dt-color-latte-90-h: 37;
1228
+ --dt-color-latte-90-s: 17.6%;
1229
+ --dt-color-latte-90-l: 20%;
1179
1230
  --dt-color-mozzarella-10-h: 30;
1180
1231
  --dt-color-mozzarella-10-s: 16.7%;
1181
1232
  --dt-color-mozzarella-10-l: 95.3%;
@@ -1233,9 +1284,9 @@ html[data-highcontrast-enabled] {
1233
1284
  --dt-color-orange-70-h: 25;
1234
1285
  --dt-color-orange-70-s: 81.8%;
1235
1286
  --dt-color-orange-70-l: 38.8%;
1236
- --dt-color-orange-75-h: 29;
1287
+ --dt-color-orange-75-h: 28;
1237
1288
  --dt-color-orange-75-s: 100%;
1238
- --dt-color-orange-75-l: 31.4%;
1289
+ --dt-color-orange-75-l: 29%;
1239
1290
  --dt-color-orange-90-h: 29;
1240
1291
  --dt-color-orange-90-s: 90.2%;
1241
1292
  --dt-color-orange-90-l: 20%;
@@ -1380,6 +1431,12 @@ html[data-highcontrast-enabled] {
1380
1431
  --dt-color-turmeric-10-h: 42;
1381
1432
  --dt-color-turmeric-10-s: 90.9%;
1382
1433
  --dt-color-turmeric-10-l: 87.1%;
1434
+ --dt-color-turmeric-20-h: 42;
1435
+ --dt-color-turmeric-20-s: 89.9%;
1436
+ --dt-color-turmeric-20-l: 80.6%;
1437
+ --dt-color-turmeric-40-h: 43;
1438
+ --dt-color-turmeric-40-s: 90.9%;
1439
+ --dt-color-turmeric-40-l: 61.4%;
1383
1440
  --dt-color-turmeric-5-h: 42;
1384
1441
  --dt-color-turmeric-5-s: 90.2%;
1385
1442
  --dt-color-turmeric-5-l: 92%;
@@ -1392,6 +1449,9 @@ html[data-highcontrast-enabled] {
1392
1449
  --dt-color-turmeric-80-h: 43;
1393
1450
  --dt-color-turmeric-80-s: 56.3%;
1394
1451
  --dt-color-turmeric-80-l: 25.1%;
1452
+ --dt-color-turmeric-90-h: 43;
1453
+ --dt-color-turmeric-90-s: 56.3%;
1454
+ --dt-color-turmeric-90-l: 17.1%;
1395
1455
  --dt-color-white-h: 0;
1396
1456
  --dt-color-white-s: 0%;
1397
1457
  --dt-color-white-l: 100%;
@@ -1554,33 +1614,48 @@ html[data-highcontrast-enabled] {
1554
1614
  --dt-color-support-brand-01-h: var(--dt-color-orange-30-h);
1555
1615
  --dt-color-support-brand-01-s: var(--dt-color-orange-30-s);
1556
1616
  --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);
1617
+ --dt-color-support-brand-02-h: var(--dt-color-orange-20-h);
1618
+ --dt-color-support-brand-02-s: var(--dt-color-orange-20-s);
1619
+ --dt-color-support-brand-02-l: var(--dt-color-orange-20-l);
1620
+ --dt-color-support-brand-tonal-h: var(--dt-color-orange-10-h);
1621
+ --dt-color-support-brand-tonal-s: var(--dt-color-orange-10-s);
1622
+ --dt-color-support-brand-tonal-l: var(--dt-color-orange-10-l);
1623
+ --dt-color-support-brand-03-h: var(--dt-color-cupcake-30-h);
1624
+ --dt-color-support-brand-03-s: var(--dt-color-cupcake-30-s);
1625
+ --dt-color-support-brand-03-l: var(--dt-color-cupcake-30-l);
1626
+ --dt-color-support-brand-03-subtle-h: var(--dt-color-cupcake-20-h);
1627
+ --dt-color-support-brand-03-subtle-s: var(--dt-color-cupcake-20-s);
1628
+ --dt-color-support-brand-03-subtle-l: var(--dt-color-cupcake-20-l);
1629
+ --dt-color-support-brand-03-tonal-h: var(--dt-color-cupcake-10-h);
1630
+ --dt-color-support-brand-03-tonal-s: var(--dt-color-cupcake-10-s);
1631
+ --dt-color-support-brand-03-tonal-l: var(--dt-color-cupcake-10-l);
1632
+ --dt-color-support-brand-04-h: var(--dt-color-berry-40-h);
1633
+ --dt-color-support-brand-04-s: var(--dt-color-berry-40-s);
1634
+ --dt-color-support-brand-04-l: var(--dt-color-berry-40-l);
1635
+ --dt-color-support-brand-04-subtle-h: var(--dt-color-berry-20-h);
1636
+ --dt-color-support-brand-04-subtle-s: var(--dt-color-berry-20-s);
1637
+ --dt-color-support-brand-04-subtle-l: var(--dt-color-berry-20-l);
1638
+ --dt-color-support-brand-04-tonal-h: var(--dt-color-berry-10-h);
1639
+ --dt-color-support-brand-04-tonal-s: var(--dt-color-berry-10-s);
1640
+ --dt-color-support-brand-04-tonal-l: var(--dt-color-berry-10-l);
1641
+ --dt-color-support-brand-05-h: var(--dt-color-turmeric-40-h);
1642
+ --dt-color-support-brand-05-s: var(--dt-color-turmeric-40-s);
1643
+ --dt-color-support-brand-05-l: var(--dt-color-turmeric-40-l);
1644
+ --dt-color-support-brand-05-subtle-h: var(--dt-color-turmeric-20-h);
1645
+ --dt-color-support-brand-05-subtle-s: var(--dt-color-turmeric-20-s);
1646
+ --dt-color-support-brand-05-subtle-l: var(--dt-color-turmeric-20-l);
1647
+ --dt-color-support-brand-05-tonal-h: var(--dt-color-turmeric-10-h);
1648
+ --dt-color-support-brand-05-tonal-s: var(--dt-color-turmeric-10-s);
1649
+ --dt-color-support-brand-05-tonal-l: var(--dt-color-turmeric-10-l);
1650
+ --dt-color-support-brand-06-h: var(--dt-color-aubergine-70-h);
1651
+ --dt-color-support-brand-06-s: var(--dt-color-aubergine-70-s);
1652
+ --dt-color-support-brand-06-l: var(--dt-color-aubergine-70-l);
1653
+ --dt-color-support-brand-06-subtle-h: var(--dt-color-aubergine-20-h);
1654
+ --dt-color-support-brand-06-subtle-s: var(--dt-color-aubergine-20-s);
1655
+ --dt-color-support-brand-06-subtle-l: var(--dt-color-aubergine-20-l);
1656
+ --dt-color-support-brand-06-tonal-h: var(--dt-color-aubergine-10-h);
1657
+ --dt-color-support-brand-06-tonal-s: var(--dt-color-aubergine-10-s);
1658
+ --dt-color-support-brand-06-tonal-l: var(--dt-color-aubergine-10-l);
1584
1659
  --dt-color-support-brand-07-h: var(--dt-color-tomato-50-h);
1585
1660
  --dt-color-support-brand-07-s: var(--dt-color-tomato-50-s);
1586
1661
  --dt-color-support-brand-07-l: var(--dt-color-tomato-50-l);
@@ -1590,9 +1665,12 @@ html[data-highcontrast-enabled] {
1590
1665
  --dt-color-support-brand-08-h: var(--dt-color-latte-30-h);
1591
1666
  --dt-color-support-brand-08-s: var(--dt-color-latte-30-s);
1592
1667
  --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);
1668
+ --dt-color-support-brand-08-subtle-h: var(--dt-color-latte-20-h);
1669
+ --dt-color-support-brand-08-subtle-s: var(--dt-color-latte-20-s);
1670
+ --dt-color-support-brand-08-subtle-l: var(--dt-color-latte-20-l);
1671
+ --dt-color-support-brand-08-tonal-h: var(--dt-color-latte-10-h);
1672
+ --dt-color-support-brand-08-tonal-s: var(--dt-color-latte-10-s);
1673
+ --dt-color-support-brand-08-tonal-l: var(--dt-color-latte-10-l);
1596
1674
  --dt-color-braze-container-01-h: var(--dt-color-orange-10-h);
1597
1675
  --dt-color-braze-container-01-s: var(--dt-color-orange-10-s);
1598
1676
  --dt-color-braze-container-01-l: var(--dt-color-orange-10-l);
@@ -2222,30 +2300,45 @@ html[data-highcontrast-enabled] {
2222
2300
  --dt-color-support-brand-02-h: var(--dt-color-orange-75-h);
2223
2301
  --dt-color-support-brand-02-s: var(--dt-color-orange-75-s);
2224
2302
  --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);
2303
+ --dt-color-support-brand-tonal-h: var(--dt-color-orange-90-h);
2304
+ --dt-color-support-brand-tonal-s: var(--dt-color-orange-90-s);
2305
+ --dt-color-support-brand-tonal-l: var(--dt-color-orange-90-l);
2306
+ --dt-color-support-brand-03-h: var(--dt-color-cupcake-30-h);
2307
+ --dt-color-support-brand-03-s: var(--dt-color-cupcake-30-s);
2308
+ --dt-color-support-brand-03-l: var(--dt-color-cupcake-30-l);
2309
+ --dt-color-support-brand-03-subtle-h: var(--dt-color-cupcake-80-h);
2310
+ --dt-color-support-brand-03-subtle-s: var(--dt-color-cupcake-80-s);
2311
+ --dt-color-support-brand-03-subtle-l: var(--dt-color-cupcake-80-l);
2312
+ --dt-color-support-brand-03-tonal-h: var(--dt-color-cupcake-90-h);
2313
+ --dt-color-support-brand-03-tonal-s: var(--dt-color-cupcake-90-s);
2314
+ --dt-color-support-brand-03-tonal-l: var(--dt-color-cupcake-90-l);
2315
+ --dt-color-support-brand-04-h: var(--dt-color-berry-40-h);
2316
+ --dt-color-support-brand-04-s: var(--dt-color-berry-40-s);
2317
+ --dt-color-support-brand-04-l: var(--dt-color-berry-40-l);
2318
+ --dt-color-support-brand-04-subtle-h: var(--dt-color-berry-80-h);
2319
+ --dt-color-support-brand-04-subtle-s: var(--dt-color-berry-80-s);
2320
+ --dt-color-support-brand-04-subtle-l: var(--dt-color-berry-80-l);
2321
+ --dt-color-support-brand-04-tonal-h: var(--dt-color-berry-90-h);
2322
+ --dt-color-support-brand-04-tonal-s: var(--dt-color-berry-90-s);
2323
+ --dt-color-support-brand-04-tonal-l: var(--dt-color-berry-90-l);
2324
+ --dt-color-support-brand-05-h: var(--dt-color-turmeric-40-h);
2325
+ --dt-color-support-brand-05-s: var(--dt-color-turmeric-40-s);
2326
+ --dt-color-support-brand-05-l: var(--dt-color-turmeric-40-l);
2327
+ --dt-color-support-brand-05-subtle-h: var(--dt-color-turmeric-80-h);
2328
+ --dt-color-support-brand-05-subtle-s: var(--dt-color-turmeric-80-s);
2329
+ --dt-color-support-brand-05-subtle-l: var(--dt-color-turmeric-80-l);
2330
+ --dt-color-support-brand-05-tonal-h: var(--dt-color-turmeric-90-h);
2331
+ --dt-color-support-brand-05-tonal-s: var(--dt-color-turmeric-90-s);
2332
+ --dt-color-support-brand-05-tonal-l: var(--dt-color-turmeric-90-l);
2333
+ --dt-color-support-brand-06-h: var(--dt-color-aubergine-70-h);
2334
+ --dt-color-support-brand-06-s: var(--dt-color-aubergine-70-s);
2335
+ --dt-color-support-brand-06-l: var(--dt-color-aubergine-70-l);
2246
2336
  --dt-color-support-brand-06-subtle-h: var(--dt-color-aubergine-75-h);
2247
2337
  --dt-color-support-brand-06-subtle-s: var(--dt-color-aubergine-75-s);
2248
2338
  --dt-color-support-brand-06-subtle-l: var(--dt-color-aubergine-75-l);
2339
+ --dt-color-support-brand-06-tonal-h: var(--dt-color-aubergine-80-h);
2340
+ --dt-color-support-brand-06-tonal-s: var(--dt-color-aubergine-80-s);
2341
+ --dt-color-support-brand-06-tonal-l: var(--dt-color-aubergine-80-l);
2249
2342
  --dt-color-support-brand-07-h: var(--dt-color-tomato-50-h);
2250
2343
  --dt-color-support-brand-07-s: var(--dt-color-tomato-50-s);
2251
2344
  --dt-color-support-brand-07-l: var(--dt-color-tomato-50-l);
@@ -2255,9 +2348,12 @@ html[data-highcontrast-enabled] {
2255
2348
  --dt-color-support-brand-08-h: var(--dt-color-latte-30-h);
2256
2349
  --dt-color-support-brand-08-s: var(--dt-color-latte-30-s);
2257
2350
  --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);
2351
+ --dt-color-support-brand-08-subtle-h: var(--dt-color-latte-80-h);
2352
+ --dt-color-support-brand-08-subtle-s: var(--dt-color-latte-80-s);
2353
+ --dt-color-support-brand-08-subtle-l: var(--dt-color-latte-80-l);
2354
+ --dt-color-support-brand-08-tonal-h: var(--dt-color-latte-90-h);
2355
+ --dt-color-support-brand-08-tonal-s: var(--dt-color-latte-90-s);
2356
+ --dt-color-support-brand-08-tonal-l: var(--dt-color-latte-90-l);
2261
2357
  --dt-color-braze-container-01-h: var(--dt-color-orange-75-h);
2262
2358
  --dt-color-braze-container-01-s: var(--dt-color-orange-75-s);
2263
2359
  --dt-color-braze-container-01-l: var(--dt-color-orange-75-l);
@@ -2583,9 +2679,9 @@ html[data-highcontrast-enabled] {
2583
2679
  --dt-color-support-error-inverse-h: var(--dt-color-red-dark-hc-h);
2584
2680
  --dt-color-support-error-inverse-s: var(--dt-color-red-dark-hc-s);
2585
2681
  --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);
2682
+ --dt-color-support-warning-inverse-h: var(--dt-color-yellow-75-h);
2683
+ --dt-color-support-warning-inverse-s: var(--dt-color-yellow-75-s);
2684
+ --dt-color-support-warning-inverse-l: var(--dt-color-yellow-75-l);
2589
2685
  --dt-color-support-brand-01-h: var(--dt-color-orange-30-h);
2590
2686
  --dt-color-support-brand-01-s: var(--dt-color-orange-30-s);
2591
2687
  --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.21.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",