@justeattakeaway/pie-css 0.21.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 +162 -104
  2. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -213,20 +213,20 @@
213
213
  --dt-color-braze-container-04: var(--dt-color-berry-10);
214
214
  --dt-color-braze-container-05: var(--dt-color-turmeric-10);
215
215
  --dt-color-braze-container-08: var(--dt-color-latte-10);
216
- --dt-color-content-default: var(--dt-color-charcoal-80);
217
- --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);
218
218
  --dt-color-content-interactive-brand: var(--dt-color-orange);
219
- --dt-color-content-interactive-light: var(--dt-color-white);
220
- --dt-color-content-interactive-primary: var(--dt-color-white);
221
- --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);
222
222
  --dt-color-content-interactive-tertiary: var(--dt-color-charcoal-75);
223
- --dt-color-content-interactive-subdued: var(--dt-color-charcoal-60);
224
- --dt-color-content-interactive-inverse: var(--dt-color-charcoal-80);
225
- --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);
226
226
  --dt-color-content-interactive-error: var(--dt-color-red);
227
- --dt-color-content-light: var(--dt-color-white);
228
- --dt-color-content-dark: var(--dt-color-charcoal-80);
229
- --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);
230
230
  --dt-color-content-link: var(--dt-color-charcoal-80);
231
231
  --dt-color-content-link-distinct: var(--dt-color-blue);
232
232
  --dt-color-content-link-light: var(--dt-color-white);
@@ -234,10 +234,27 @@
234
234
  --dt-color-content-link-visited: var(--dt-color-system-purple);
235
235
  --dt-color-content-link-visited-inverse: var(--dt-color-system-purple-10);
236
236
  --dt-color-content-error: var(--dt-color-red);
237
- --dt-color-content-placeholder: var(--dt-color-charcoal-57);
237
+ --dt-color-content-placeholder: rgb(0,0,0,0.55);
238
238
  --dt-color-content-positive: var(--dt-color-green);
239
- --dt-color-content-disabled: var(--dt-color-charcoal-50);
239
+ --dt-color-content-disabled: rgb(0,0,0,0.30);
240
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);
241
258
  --dt-color-hover-01-bg: #000;
242
259
  --dt-color-hover-01: 4%;
243
260
  --dt-color-hover-01-dark-bg: #000;
@@ -832,20 +849,20 @@ html[data-highcontrast-enabled] {
832
849
  --dt-color-braze-container-04: var(--dt-color-berry-70);
833
850
  --dt-color-braze-container-05: var(--dt-color-turmeric-70);
834
851
  --dt-color-braze-container-08: var(--dt-color-latte-70);
835
- --dt-color-content-default: var(--dt-color-white);
836
- --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);
837
854
  --dt-color-content-interactive-brand: var(--dt-color-orange-30);
838
- --dt-color-content-interactive-light: var(--dt-color-white);
839
- --dt-color-content-interactive-primary: var(--dt-color-charcoal-80);
840
- --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);
841
858
  --dt-color-content-interactive-tertiary: var(--dt-color-white);
842
- --dt-color-content-interactive-subdued: var(--dt-color-charcoal-40);
843
- --dt-color-content-interactive-inverse: var(--dt-color-white);
844
- --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);
845
862
  --dt-color-content-interactive-error: var(--dt-color-red-10);
846
- --dt-color-content-light: var(--dt-color-white);
847
- --dt-color-content-dark: var(--dt-color-charcoal-80);
848
- --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);
849
866
  --dt-color-content-link: var(--dt-color-white);
850
867
  --dt-color-content-link-distinct: var(--dt-color-blue-10);
851
868
  --dt-color-content-link-light: var(--dt-color-white);
@@ -853,10 +870,27 @@ html[data-highcontrast-enabled] {
853
870
  --dt-color-content-link-visited: var(--dt-color-system-purple-10);
854
871
  --dt-color-content-link-visited-inverse: var(--dt-color-system-purple);
855
872
  --dt-color-content-error: var(--dt-color-red-10);
856
- --dt-color-content-placeholder: var(--dt-color-charcoal-50);
873
+ --dt-color-content-placeholder: rgb(255,255,255,0.55);
857
874
  --dt-color-content-positive: var(--dt-color-green-10);
858
- --dt-color-content-disabled: var(--dt-color-charcoal-50);
875
+ --dt-color-content-disabled: rgb(255,255,255,0.30);
859
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);
860
894
  --dt-color-hover-01-bg: #fff;
861
895
  --dt-color-hover-01: 8%;
862
896
  --dt-color-hover-01-dark-bg: #000;
@@ -1686,48 +1720,15 @@ html[data-highcontrast-enabled] {
1686
1720
  --dt-color-braze-container-08-h: var(--dt-color-latte-10-h);
1687
1721
  --dt-color-braze-container-08-s: var(--dt-color-latte-10-s);
1688
1722
  --dt-color-braze-container-08-l: var(--dt-color-latte-10-l);
1689
- --dt-color-content-default-h: var(--dt-color-charcoal-80-h);
1690
- --dt-color-content-default-s: var(--dt-color-charcoal-80-s);
1691
- --dt-color-content-default-l: var(--dt-color-charcoal-80-l);
1692
- --dt-color-content-subdued-h: var(--dt-color-charcoal-70-h);
1693
- --dt-color-content-subdued-s: var(--dt-color-charcoal-70-s);
1694
- --dt-color-content-subdued-l: var(--dt-color-charcoal-70-l);
1695
1723
  --dt-color-content-interactive-brand-h: var(--dt-color-orange-h);
1696
1724
  --dt-color-content-interactive-brand-s: var(--dt-color-orange-s);
1697
1725
  --dt-color-content-interactive-brand-l: var(--dt-color-orange-l);
1698
- --dt-color-content-interactive-light-h: var(--dt-color-white-h);
1699
- --dt-color-content-interactive-light-s: var(--dt-color-white-s);
1700
- --dt-color-content-interactive-light-l: var(--dt-color-white-l);
1701
- --dt-color-content-interactive-primary-h: var(--dt-color-white-h);
1702
- --dt-color-content-interactive-primary-s: var(--dt-color-white-s);
1703
- --dt-color-content-interactive-primary-l: var(--dt-color-white-l);
1704
- --dt-color-content-interactive-secondary-h: var(--dt-color-charcoal-80-h);
1705
- --dt-color-content-interactive-secondary-s: var(--dt-color-charcoal-80-s);
1706
- --dt-color-content-interactive-secondary-l: var(--dt-color-charcoal-80-l);
1707
1726
  --dt-color-content-interactive-tertiary-h: var(--dt-color-charcoal-75-h);
1708
1727
  --dt-color-content-interactive-tertiary-s: var(--dt-color-charcoal-75-s);
1709
1728
  --dt-color-content-interactive-tertiary-l: var(--dt-color-charcoal-75-l);
1710
- --dt-color-content-interactive-subdued-h: var(--dt-color-charcoal-60-h);
1711
- --dt-color-content-interactive-subdued-s: var(--dt-color-charcoal-60-s);
1712
- --dt-color-content-interactive-subdued-l: var(--dt-color-charcoal-60-l);
1713
- --dt-color-content-interactive-inverse-h: var(--dt-color-charcoal-80-h);
1714
- --dt-color-content-interactive-inverse-s: var(--dt-color-charcoal-80-s);
1715
- --dt-color-content-interactive-inverse-l: var(--dt-color-charcoal-80-l);
1716
- --dt-color-content-interactive-dark-h: var(--dt-color-charcoal-80-h);
1717
- --dt-color-content-interactive-dark-s: var(--dt-color-charcoal-80-s);
1718
- --dt-color-content-interactive-dark-l: var(--dt-color-charcoal-80-l);
1719
1729
  --dt-color-content-interactive-error-h: var(--dt-color-red-h);
1720
1730
  --dt-color-content-interactive-error-s: var(--dt-color-red-s);
1721
1731
  --dt-color-content-interactive-error-l: var(--dt-color-red-l);
1722
- --dt-color-content-light-h: var(--dt-color-white-h);
1723
- --dt-color-content-light-s: var(--dt-color-white-s);
1724
- --dt-color-content-light-l: var(--dt-color-white-l);
1725
- --dt-color-content-dark-h: var(--dt-color-charcoal-80-h);
1726
- --dt-color-content-dark-s: var(--dt-color-charcoal-80-s);
1727
- --dt-color-content-dark-l: var(--dt-color-charcoal-80-l);
1728
- --dt-color-content-inverse-h: var(--dt-color-white-h);
1729
- --dt-color-content-inverse-s: var(--dt-color-white-s);
1730
- --dt-color-content-inverse-l: var(--dt-color-white-l);
1731
1732
  --dt-color-content-link-h: var(--dt-color-charcoal-80-h);
1732
1733
  --dt-color-content-link-s: var(--dt-color-charcoal-80-s);
1733
1734
  --dt-color-content-link-l: var(--dt-color-charcoal-80-l);
@@ -1749,18 +1750,63 @@ html[data-highcontrast-enabled] {
1749
1750
  --dt-color-content-error-h: var(--dt-color-red-h);
1750
1751
  --dt-color-content-error-s: var(--dt-color-red-s);
1751
1752
  --dt-color-content-error-l: var(--dt-color-red-l);
1752
- --dt-color-content-placeholder-h: var(--dt-color-charcoal-57-h);
1753
- --dt-color-content-placeholder-s: var(--dt-color-charcoal-57-s);
1754
- --dt-color-content-placeholder-l: var(--dt-color-charcoal-57-l);
1755
1753
  --dt-color-content-positive-h: var(--dt-color-green-h);
1756
1754
  --dt-color-content-positive-s: var(--dt-color-green-s);
1757
1755
  --dt-color-content-positive-l: var(--dt-color-green-l);
1758
- --dt-color-content-disabled-h: var(--dt-color-charcoal-50-h);
1759
- --dt-color-content-disabled-s: var(--dt-color-charcoal-50-s);
1760
- --dt-color-content-disabled-l: var(--dt-color-charcoal-50-l);
1761
1756
  --dt-color-content-brand-h: var(--dt-color-orange-h);
1762
1757
  --dt-color-content-brand-s: var(--dt-color-orange-s);
1763
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);
1764
1810
  --dt-color-focus-inner-h: var(--dt-color-white-h);
1765
1811
  --dt-color-focus-inner-s: var(--dt-color-white-s);
1766
1812
  --dt-color-focus-inner-l: var(--dt-color-white-l);
@@ -2369,48 +2415,15 @@ html[data-highcontrast-enabled] {
2369
2415
  --dt-color-braze-container-08-h: var(--dt-color-latte-70-h);
2370
2416
  --dt-color-braze-container-08-s: var(--dt-color-latte-70-s);
2371
2417
  --dt-color-braze-container-08-l: var(--dt-color-latte-70-l);
2372
- --dt-color-content-default-h: var(--dt-color-white-h);
2373
- --dt-color-content-default-s: var(--dt-color-white-s);
2374
- --dt-color-content-default-l: var(--dt-color-white-l);
2375
- --dt-color-content-subdued-h: var(--dt-color-charcoal-30-h);
2376
- --dt-color-content-subdued-s: var(--dt-color-charcoal-30-s);
2377
- --dt-color-content-subdued-l: var(--dt-color-charcoal-30-l);
2378
2418
  --dt-color-content-interactive-brand-h: var(--dt-color-orange-30-h);
2379
2419
  --dt-color-content-interactive-brand-s: var(--dt-color-orange-30-s);
2380
2420
  --dt-color-content-interactive-brand-l: var(--dt-color-orange-30-l);
2381
- --dt-color-content-interactive-light-h: var(--dt-color-white-h);
2382
- --dt-color-content-interactive-light-s: var(--dt-color-white-s);
2383
- --dt-color-content-interactive-light-l: var(--dt-color-white-l);
2384
- --dt-color-content-interactive-primary-h: var(--dt-color-charcoal-80-h);
2385
- --dt-color-content-interactive-primary-s: var(--dt-color-charcoal-80-s);
2386
- --dt-color-content-interactive-primary-l: var(--dt-color-charcoal-80-l);
2387
- --dt-color-content-interactive-secondary-h: var(--dt-color-white-h);
2388
- --dt-color-content-interactive-secondary-s: var(--dt-color-white-s);
2389
- --dt-color-content-interactive-secondary-l: var(--dt-color-white-l);
2390
2421
  --dt-color-content-interactive-tertiary-h: var(--dt-color-white-h);
2391
2422
  --dt-color-content-interactive-tertiary-s: var(--dt-color-white-s);
2392
2423
  --dt-color-content-interactive-tertiary-l: var(--dt-color-white-l);
2393
- --dt-color-content-interactive-subdued-h: var(--dt-color-charcoal-40-h);
2394
- --dt-color-content-interactive-subdued-s: var(--dt-color-charcoal-40-s);
2395
- --dt-color-content-interactive-subdued-l: var(--dt-color-charcoal-40-l);
2396
- --dt-color-content-interactive-inverse-h: var(--dt-color-white-h);
2397
- --dt-color-content-interactive-inverse-s: var(--dt-color-white-s);
2398
- --dt-color-content-interactive-inverse-l: var(--dt-color-white-l);
2399
- --dt-color-content-interactive-dark-h: var(--dt-color-charcoal-80-h);
2400
- --dt-color-content-interactive-dark-s: var(--dt-color-charcoal-80-s);
2401
- --dt-color-content-interactive-dark-l: var(--dt-color-charcoal-80-l);
2402
2424
  --dt-color-content-interactive-error-h: var(--dt-color-red-10-h);
2403
2425
  --dt-color-content-interactive-error-s: var(--dt-color-red-10-s);
2404
2426
  --dt-color-content-interactive-error-l: var(--dt-color-red-10-l);
2405
- --dt-color-content-light-h: var(--dt-color-white-h);
2406
- --dt-color-content-light-s: var(--dt-color-white-s);
2407
- --dt-color-content-light-l: var(--dt-color-white-l);
2408
- --dt-color-content-dark-h: var(--dt-color-charcoal-80-h);
2409
- --dt-color-content-dark-s: var(--dt-color-charcoal-80-s);
2410
- --dt-color-content-dark-l: var(--dt-color-charcoal-80-l);
2411
- --dt-color-content-inverse-h: var(--dt-color-charcoal-80-h);
2412
- --dt-color-content-inverse-s: var(--dt-color-charcoal-80-s);
2413
- --dt-color-content-inverse-l: var(--dt-color-charcoal-80-l);
2414
2427
  --dt-color-content-link-h: var(--dt-color-white-h);
2415
2428
  --dt-color-content-link-s: var(--dt-color-white-s);
2416
2429
  --dt-color-content-link-l: var(--dt-color-white-l);
@@ -2432,18 +2445,63 @@ html[data-highcontrast-enabled] {
2432
2445
  --dt-color-content-error-h: var(--dt-color-red-10-h);
2433
2446
  --dt-color-content-error-s: var(--dt-color-red-10-s);
2434
2447
  --dt-color-content-error-l: var(--dt-color-red-10-l);
2435
- --dt-color-content-placeholder-h: var(--dt-color-charcoal-50-h);
2436
- --dt-color-content-placeholder-s: var(--dt-color-charcoal-50-s);
2437
- --dt-color-content-placeholder-l: var(--dt-color-charcoal-50-l);
2438
2448
  --dt-color-content-positive-h: var(--dt-color-green-10-h);
2439
2449
  --dt-color-content-positive-s: var(--dt-color-green-10-s);
2440
2450
  --dt-color-content-positive-l: var(--dt-color-green-10-l);
2441
- --dt-color-content-disabled-h: var(--dt-color-charcoal-50-h);
2442
- --dt-color-content-disabled-s: var(--dt-color-charcoal-50-s);
2443
- --dt-color-content-disabled-l: var(--dt-color-charcoal-50-l);
2444
2451
  --dt-color-content-brand-h: var(--dt-color-orange-30-h);
2445
2452
  --dt-color-content-brand-s: var(--dt-color-orange-30-s);
2446
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);
2447
2505
  --dt-color-focus-inner-h: var(--dt-color-black-h);
2448
2506
  --dt-color-focus-inner-s: var(--dt-color-black-s);
2449
2507
  --dt-color-focus-inner-l: var(--dt-color-black-l);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-css",
3
- "version": "0.21.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",