@justeattakeaway/pie-css 0.2.0 → 0.3.1

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 +18 -2
  2. package/package.json +2 -1
package/dist/index.css CHANGED
@@ -1,4 +1,4 @@
1
- :root, ::backdrop {
1
+ :root {
2
2
  /* Global tokens - Color */
3
3
  --dt-color-aubergine-10: #e7d6e7;
4
4
  --dt-color-aubergine-80: #452844;
@@ -75,6 +75,7 @@
75
75
  --dt-color-container-strong: var(--dt-color-mozzarella-20);
76
76
  --dt-color-container-dark: var(--dt-color-mozzarella-90);
77
77
  --dt-color-container-inverse: var(--dt-color-mozzarella-90);
78
+ --dt-color-container-inverse-alternative: var(--dt-color-mozzarella-90);
78
79
  --dt-color-border-default: var(--dt-color-mozzarella-20);
79
80
  --dt-color-border-subtle: var(--dt-color-mozzarella-10);
80
81
  --dt-color-border-strong: var(--dt-color-mozzarella-30);
@@ -158,6 +159,7 @@
158
159
  --dt-color-highcontrast-container-strong: var(--dt-color-white);
159
160
  --dt-color-highcontrast-container-dark: var(--dt-color-black);
160
161
  --dt-color-highcontrast-container-inverse: var(--dt-color-black);
162
+ --dt-color-highcontrast-container-inverse-alternative: var(--dt-color-black);
161
163
  --dt-color-highcontrast-border-default: var(--dt-color-black);
162
164
  --dt-color-highcontrast-border-subtle: var(--dt-color-black);
163
165
  --dt-color-highcontrast-border-strong: var(--dt-color-black);
@@ -241,6 +243,7 @@
241
243
  --dt-color-dark-container-strong: var(--dt-color-mozzarella-70);
242
244
  --dt-color-dark-container-dark: var(--dt-color-mozzarella-90);
243
245
  --dt-color-dark-container-inverse: var(--dt-color-white);
246
+ --dt-color-dark-container-inverse-alternative: var(--dt-color-mozzarella-70);
244
247
  --dt-color-dark-border-default: var(--dt-color-mozzarella-70);
245
248
  --dt-color-dark-border-subtle: var(--dt-color-mozzarella-75);
246
249
  --dt-color-dark-border-strong: var(--dt-color-mozzarella-60);
@@ -324,6 +327,7 @@
324
327
  --dt-color-highcontrast-dark-container-strong: var(--dt-color-black);
325
328
  --dt-color-highcontrast-dark-container-dark: var(--dt-color-black);
326
329
  --dt-color-highcontrast-dark-container-inverse: var(--dt-color-white);
330
+ --dt-color-highcontrast-dark-container-inverse-alternative: var(--dt-color-black);
327
331
  --dt-color-highcontrast-dark-border-default: var(--dt-color-white);
328
332
  --dt-color-highcontrast-dark-border-subtle: var(--dt-color-white);
329
333
  --dt-color-highcontrast-dark-border-strong: var(--dt-color-white);
@@ -655,7 +659,7 @@
655
659
  --dt-elevation-dark-inverse-04: var(--dt-elevation-box-shadow-04);
656
660
  --dt-elevation-dark-inverse-05: var(--dt-elevation-box-shadow-05);
657
661
  }
658
- :root, ::backdrop {
662
+ :root {
659
663
  --dt-color-aubergine-10-h: 300;
660
664
  --dt-color-aubergine-10-s: 26.2%;
661
665
  --dt-color-aubergine-10-l: 87.3%;
@@ -875,6 +879,9 @@
875
879
  --dt-color-container-inverse-h: var(--dt-color-mozzarella-90-h);
876
880
  --dt-color-container-inverse-s: var(--dt-color-mozzarella-90-s);
877
881
  --dt-color-container-inverse-l: var(--dt-color-mozzarella-90-l);
882
+ --dt-color-container-inverse-alternative-h: var(--dt-color-mozzarella-90-h);
883
+ --dt-color-container-inverse-alternative-s: var(--dt-color-mozzarella-90-s);
884
+ --dt-color-container-inverse-alternative-l: var(--dt-color-mozzarella-90-l);
878
885
  --dt-color-border-default-h: var(--dt-color-mozzarella-20-h);
879
886
  --dt-color-border-default-s: var(--dt-color-mozzarella-20-s);
880
887
  --dt-color-border-default-l: var(--dt-color-mozzarella-20-l);
@@ -1067,9 +1074,18 @@
1067
1074
  }
1068
1075
  html {
1069
1076
  box-sizing: border-box;
1077
+
1078
+ /* These rules with smooth fonts. It makes fonts look crisp and clean on devices
1079
+ that support it. */
1070
1080
  text-rendering: optimizelegibility;
1071
1081
  -webkit-font-smoothing: antialiased;
1072
1082
  -moz-font-smoothing: antialiased;
1083
+
1084
+ /* These are added to prevent text size adjustments in various browsers.
1085
+ In some browsers, such as iOS Safari, will try to increase the font-size
1086
+ when you rotate the screen. This can be jarring and break layouts. */
1087
+ -webkit-text-size-adjust: 100%;
1088
+ text-size-adjust: 100%;
1073
1089
  }
1074
1090
  *,
1075
1091
  *:before,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-css",
3
- "version": "0.2.0",
3
+ "version": "0.3.1",
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
  "author": "JustEatTakeaway - Design System Web Team",
6
6
  "files": [
@@ -28,6 +28,7 @@
28
28
  "license": "Apache-2.0",
29
29
  "devDependencies": {
30
30
  "@types/postcss-import": "14.0.0",
31
+ "postcss": "8.4.29",
31
32
  "postcss-import": "15.1.0",
32
33
  "w3c-css-validator": "1.3.1"
33
34
  }