@justeattakeaway/pie-css 0.26.1 → 0.27.0

package/dist/index.css

@@ -155,6 +155,7 @@
     --dt-color-container-base: rgb(255,255,255,0.72);
     --dt-color-container-neutral: rgb(240,236,230,0.72);
     --dt-color-container-prominent: rgb(255,255,255,0.4);
+    --dt-color-container-base-dark: rgb(43,42,40,0.62);
     --dt-color-border-default: var(--dt-color-truffle-20);
     --dt-color-border-subtle: var(--dt-color-truffle-10);
     --dt-color-border-strong: var(--dt-color-truffle-30);
@@ -544,6 +545,13 @@
     --dt-font-caption-strong-family: var(--dt-font-family-primary);
     --dt-font-caption-strong-weight: var(--dt-font-weight-bold);
     --dt-font-caption-strong-paragraph: var(--dt-font-paragraph-spacing-03);
+    /* Caption-strong-italic font theme */
+    --dt-font-caption-strong-italic-size: var(--dt-font-size-12);
+    --dt-font-caption-strong-italic-line-height: var(--dt-font-line-height-16);
+    --dt-font-caption-strong-italic-family: var(--dt-font-family-primary);
+    --dt-font-caption-strong-italic-weight: var(--dt-font-weight-extrabold);
+    --dt-font-caption-strong-italic-font-style: var(--dt-font-style-italic);
+    --dt-font-caption-strong-italic-paragraph: var(--dt-font-paragraph-spacing-03);
     /* Caption-strong-link font theme */
     --dt-font-caption-strong-link-size: var(--dt-font-size-12);
     --dt-font-caption-strong-link-line-height: var(--dt-font-line-height-16);
@@ -688,6 +696,7 @@ html[data-color-mode="dark"] {
     --dt-color-container-base: rgb(43,42,40,0.62);
     --dt-color-container-neutral: rgb(89,86,79,0.72);
     --dt-color-container-prominent: rgb(43,42,40,0.42);
+    --dt-color-container-base-dark: rgb(43,42,40,0.62);
     --dt-color-border-default: var(--dt-color-truffle-70);
     --dt-color-border-subtle: var(--dt-color-truffle-75);
     --dt-color-border-strong: var(--dt-color-truffle-65);
@@ -864,6 +873,7 @@ html[data-color-mode="dark"] {
         --dt-color-container-base: rgb(43,42,40,0.62);
         --dt-color-container-neutral: rgb(89,86,79,0.72);
         --dt-color-container-prominent: rgb(43,42,40,0.42);
+        --dt-color-container-base-dark: rgb(43,42,40,0.62);
         --dt-color-border-default: var(--dt-color-truffle-70);
         --dt-color-border-subtle: var(--dt-color-truffle-75);
         --dt-color-border-strong: var(--dt-color-truffle-65);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-css",
-  "version": "0.26.1",
+  "version": "0.27.0",
   "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.",
   "repository": {
     "type": "git",
@@ -20,7 +20,7 @@
     "cdnContentType": "text/css"
   },
   "scripts": {
-    "build": "run -T ts-node ./buildCss.ts && run -T sass scss/_internal/typography.scss dist/helpers/typography.css --no-source-map",
+    "build": "run -T ts-node ./buildCss.ts && run -T sass --load-path=../../../node_modules scss/_internal/typography.scss dist/helpers/typography.css --no-source-map",
     "lint:scripts": "run -T eslint .",
     "lint:scripts:fix": "yarn lint:scripts --fix",
     "lint:style": "run -T stylelint ./**/*.{css,scss}",
@@ -37,6 +37,9 @@
     "SASS"
   ],
   "license": "Apache-2.0",
+  "dependencies": {
+    "@justeat/pie-design-tokens": "7.11.1"
+  },
   "devDependencies": {
     "@types/postcss-import": "14.0.3",
     "include-media": "2.0.0",

package/scss/mixins/_font-theme.scss

@@ -2,9 +2,9 @@
 @use 'sass:list';
 @use 'sass:map';
 
-// N.b. This next @use import is pretty horrible atm (sorry)
-// We could pull in the tokens as a dependency for this package, but that seems worse potentially, so leaving as this for now
-@use '../../../../../node_modules/@justeat/pie-design-tokens/dist/jet.scss' as *;
+// this is imported so that we have access to the SCSS design tokens
+// Used mainly to check if font tokens exist using meta.variable-exists()
+@use '@justeat/pie-design-tokens/dist/jet.scss' as *;
 
 @mixin font-theme($token-name) {
     // Define the wide breakpoint to be used in the responsive media query.