@justeattakeaway/pie-css 0.1.0 → 0.3.0

package/dist/index.css

@@ -1,5 +1,9 @@
 :root, ::backdrop {
     /* Global tokens - Color */
+    --dt-color-aubergine-10: #e7d6e7;
+    --dt-color-aubergine-80: #452844;
+    --dt-color-berry-10: #ffe7eb;
+    --dt-color-berry-90: #622d35;
     --dt-color-black: #000;
     --dt-color-blue: #125fca;
     --dt-color-blue-10: #ebf6fa;
@@ -16,6 +20,8 @@
     --dt-color-charcoal-70: #3c4c4f;
     --dt-color-charcoal-75: #303d3f;
     --dt-color-charcoal-80: #242e30;
+    --dt-color-cupcake-10: #e7f4f6;
+    --dt-color-cupcake-90: #254043;
     --dt-color-green: #017a39;
     --dt-color-green-10: #e5faef;
     --dt-color-green-30: #22bf65;
@@ -50,6 +56,10 @@
     --dt-color-red-light-hc: #ff7a80;
     --dt-color-system-purple: #800080;
     --dt-color-system-purple-10: #c58af9;
+    --dt-color-tomato-5: #ffd3bf;
+    --dt-color-tomato-90: #622b18;
+    --dt-color-turmeric-5: #fff9de;
+    --dt-color-turmeric-80: #745300;
     --dt-color-white: #fff;
     --dt-color-yellow: #f6c243;
     --dt-color-yellow-10: #fff9df;
@@ -92,10 +102,15 @@
     --dt-color-support-brand-01: var(--dt-color-orange-30);
     --dt-color-support-brand-02: var(--dt-color-orange-10);
     --dt-color-support-brand-03: var(--dt-color-blue-25);
+    --dt-color-support-brand-03-subtle: var(--dt-color-cupcake-10);
     --dt-color-support-brand-04: var(--dt-color-red-25);
+    --dt-color-support-brand-04-subtle: var(--dt-color-berry-10);
     --dt-color-support-brand-05: var(--dt-color-yellow);
+    --dt-color-support-brand-05-subtle: var(--dt-color-turmeric-5);
     --dt-color-support-brand-06: var(--dt-color-purple);
+    --dt-color-support-brand-06-subtle: var(--dt-color-aubergine-10);
     --dt-color-support-brand-07: var(--dt-color-orange-55);
+    --dt-color-support-brand-07-subtle: var(--dt-color-tomato-5);
     --dt-color-content-default: var(--dt-color-charcoal-80);
     --dt-color-content-subdued: var(--dt-color-charcoal-70);
     --dt-color-content-interactive-brand: var(--dt-color-orange);
@@ -170,10 +185,15 @@
     --dt-color-highcontrast-support-brand-01: var(--dt-color-orange-30);
     --dt-color-highcontrast-support-brand-02: var(--dt-color-white);
     --dt-color-highcontrast-support-brand-03: var(--dt-color-white);
+    --dt-color-highcontrast-support-brand-03-subtle: var(--dt-color-cupcake-10);
     --dt-color-highcontrast-support-brand-04: var(--dt-color-white);
+    --dt-color-highcontrast-support-brand-04-subtle: var(--dt-color-berry-10);
     --dt-color-highcontrast-support-brand-05: var(--dt-color-white);
+    --dt-color-highcontrast-support-brand-05-subtle: var(--dt-color-yellow-10);
     --dt-color-highcontrast-support-brand-06: var(--dt-color-white);
+    --dt-color-highcontrast-support-brand-06-subtle: var(--dt-color-aubergine-10);
     --dt-color-highcontrast-support-brand-07: var(--dt-color-white);
+    --dt-color-highcontrast-support-brand-07-subtle: var(--dt-color-tomato-5);
     --dt-color-highcontrast-content-default: var(--dt-color-black);
     --dt-color-highcontrast-content-subdued: var(--dt-color-black);
     --dt-color-highcontrast-content-interactive-brand: var(--dt-color-orange-dark-hc);
@@ -248,10 +268,15 @@
     --dt-color-dark-support-brand-01: var(--dt-color-orange-30);
     --dt-color-dark-support-brand-02: var(--dt-color-orange-90);
     --dt-color-dark-support-brand-03: var(--dt-color-blue-25);
+    --dt-color-dark-support-brand-03-subtle: var(--dt-color-cupcake-90);
     --dt-color-dark-support-brand-04: var(--dt-color-red-25);
+    --dt-color-dark-support-brand-04-subtle: var(--dt-color-berry-90);
     --dt-color-dark-support-brand-05: var(--dt-color-yellow);
+    --dt-color-dark-support-brand-05-subtle: var(--dt-color-turmeric-80);
     --dt-color-dark-support-brand-06: var(--dt-color-purple);
+    --dt-color-dark-support-brand-06-subtle: var(--dt-color-aubergine-80);
     --dt-color-dark-support-brand-07: var(--dt-color-orange-55);
+    --dt-color-dark-support-brand-07-subtle: var(--dt-color-tomato-90);
     --dt-color-dark-content-default: var(--dt-color-white);
     --dt-color-dark-content-subdued: var(--dt-color-charcoal-30);
     --dt-color-dark-content-interactive-brand: var(--dt-color-orange-30);
@@ -326,10 +351,15 @@
     --dt-color-highcontrast-dark-support-brand-01: var(--dt-color-orange-30);
     --dt-color-highcontrast-dark-support-brand-02: var(--dt-color-black);
     --dt-color-highcontrast-dark-support-brand-03: var(--dt-color-black);
+    --dt-color-highcontrast-dark-support-brand-03-subtle: var(--dt-color-cupcake-90);
     --dt-color-highcontrast-dark-support-brand-04: var(--dt-color-black);
+    --dt-color-highcontrast-dark-support-brand-04-subtle: var(--dt-color-berry-90);
     --dt-color-highcontrast-dark-support-brand-05: var(--dt-color-black);
+    --dt-color-highcontrast-dark-support-brand-05-subtle: var(--dt-color-turmeric-80);
     --dt-color-highcontrast-dark-support-brand-06: var(--dt-color-black);
+    --dt-color-highcontrast-dark-support-brand-06-subtle: var(--dt-color-aubergine-80);
     --dt-color-highcontrast-dark-support-brand-07: var(--dt-color-black);
+    --dt-color-highcontrast-dark-support-brand-07-subtle: var(--dt-color-tomato-90);
     --dt-color-highcontrast-dark-content-default: var(--dt-color-white);
     --dt-color-highcontrast-dark-content-subdued: var(--dt-color-white);
     --dt-color-highcontrast-dark-content-interactive-brand: var(--dt-color-orange-30);
@@ -626,6 +656,18 @@
     --dt-elevation-dark-inverse-05: var(--dt-elevation-box-shadow-05);
 }
 :root, ::backdrop {
+    --dt-color-aubergine-10-h: 300;
+    --dt-color-aubergine-10-s: 26.2%;
+    --dt-color-aubergine-10-l: 87.3%;
+    --dt-color-aubergine-80-h: 302;
+    --dt-color-aubergine-80-s: 26.6%;
+    --dt-color-aubergine-80-l: 21.4%;
+    --dt-color-berry-10-h: 350;
+    --dt-color-berry-10-s: 100%;
+    --dt-color-berry-10-l: 95.3%;
+    --dt-color-berry-90-h: 351;
+    --dt-color-berry-90-s: 37.1%;
+    --dt-color-berry-90-l: 28%;
     --dt-color-black-h: 0;
     --dt-color-black-s: 0%;
     --dt-color-black-l: 0%;
@@ -674,6 +716,12 @@
     --dt-color-charcoal-80-h: 190;
     --dt-color-charcoal-80-s: 14.3%;
     --dt-color-charcoal-80-l: 16.5%;
+    --dt-color-cupcake-10-h: 188;
+    --dt-color-cupcake-10-s: 45.5%;
+    --dt-color-cupcake-10-l: 93.5%;
+    --dt-color-cupcake-90-h: 186;
+    --dt-color-cupcake-90-s: 28.8%;
+    --dt-color-cupcake-90-l: 20.4%;
     --dt-color-green-h: 148;
     --dt-color-green-s: 98.4%;
     --dt-color-green-l: 24.1%;
@@ -776,6 +824,18 @@
     --dt-color-system-purple-10-h: 272;
     --dt-color-system-purple-10-s: 90.2%;
     --dt-color-system-purple-10-l: 75.9%;
+    --dt-color-tomato-5-h: 19;
+    --dt-color-tomato-5-s: 100%;
+    --dt-color-tomato-5-l: 87.5%;
+    --dt-color-tomato-90-h: 15;
+    --dt-color-tomato-90-s: 60.7%;
+    --dt-color-tomato-90-l: 23.9%;
+    --dt-color-turmeric-5-h: 49;
+    --dt-color-turmeric-5-s: 100%;
+    --dt-color-turmeric-5-l: 93.5%;
+    --dt-color-turmeric-80-h: 43;
+    --dt-color-turmeric-80-s: 100%;
+    --dt-color-turmeric-80-l: 22.7%;
     --dt-color-white-h: 0;
     --dt-color-white-s: 0%;
     --dt-color-white-l: 100%;
@@ -887,18 +947,33 @@
     --dt-color-support-brand-03-h: var(--dt-color-blue-25-h);
     --dt-color-support-brand-03-s: var(--dt-color-blue-25-s);
     --dt-color-support-brand-03-l: var(--dt-color-blue-25-l);
+    --dt-color-support-brand-03-subtle-h: var(--dt-color-cupcake-10-h);
+    --dt-color-support-brand-03-subtle-s: var(--dt-color-cupcake-10-s);
+    --dt-color-support-brand-03-subtle-l: var(--dt-color-cupcake-10-l);
     --dt-color-support-brand-04-h: var(--dt-color-red-25-h);
     --dt-color-support-brand-04-s: var(--dt-color-red-25-s);
     --dt-color-support-brand-04-l: var(--dt-color-red-25-l);
+    --dt-color-support-brand-04-subtle-h: var(--dt-color-berry-10-h);
+    --dt-color-support-brand-04-subtle-s: var(--dt-color-berry-10-s);
+    --dt-color-support-brand-04-subtle-l: var(--dt-color-berry-10-l);
     --dt-color-support-brand-05-h: var(--dt-color-yellow-h);
     --dt-color-support-brand-05-s: var(--dt-color-yellow-s);
     --dt-color-support-brand-05-l: var(--dt-color-yellow-l);
+    --dt-color-support-brand-05-subtle-h: var(--dt-color-turmeric-5-h);
+    --dt-color-support-brand-05-subtle-s: var(--dt-color-turmeric-5-s);
+    --dt-color-support-brand-05-subtle-l: var(--dt-color-turmeric-5-l);
     --dt-color-support-brand-06-h: var(--dt-color-purple-h);
     --dt-color-support-brand-06-s: var(--dt-color-purple-s);
     --dt-color-support-brand-06-l: var(--dt-color-purple-l);
+    --dt-color-support-brand-06-subtle-h: var(--dt-color-aubergine-10-h);
+    --dt-color-support-brand-06-subtle-s: var(--dt-color-aubergine-10-s);
+    --dt-color-support-brand-06-subtle-l: var(--dt-color-aubergine-10-l);
     --dt-color-support-brand-07-h: var(--dt-color-orange-55-h);
     --dt-color-support-brand-07-s: var(--dt-color-orange-55-s);
     --dt-color-support-brand-07-l: var(--dt-color-orange-55-l);
+    --dt-color-support-brand-07-subtle-h: var(--dt-color-tomato-5-h);
+    --dt-color-support-brand-07-subtle-s: var(--dt-color-tomato-5-s);
+    --dt-color-support-brand-07-subtle-l: var(--dt-color-tomato-5-l);
     --dt-color-content-default-h: var(--dt-color-charcoal-80-h);
     --dt-color-content-default-s: var(--dt-color-charcoal-80-s);
     --dt-color-content-default-l: var(--dt-color-charcoal-80-l);
@@ -992,9 +1067,18 @@
 }
 html {
     box-sizing: border-box;
+
+    /*  These rules with smooth fonts. It makes fonts look crisp and clean on devices
+        that support it. */
     text-rendering: optimizelegibility;
     -webkit-font-smoothing: antialiased;
     -moz-font-smoothing: antialiased;
+
+    /*  These are added to prevent text size adjustments in various browsers.
+        In some browsers, such as iOS Safari, will try to increase the font-size
+        when you rotate the screen. This can be jarring and break layouts.  */
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
 }
 *,
 *:before,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-css",
-  "version": "0.1.0",
+  "version": "0.3.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.",
   "author": "JustEatTakeaway - Design System Web Team",
   "files": [
@@ -14,7 +14,9 @@
     "lint:style": "run -T stylelint ./**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "prepublishOnly": "yarn lint:style && yarn lint:scripts && yarn build && yarn test",
-    "test": "run -T vitest run"
+    "test": "run -T vitest run",
+    "test:ci": "yarn test",
+    "test:watch": "run -T vitest"
   },
   "keywords": [
     "PIE",

package/scss/functions/_fontSize.scss

@@ -0,0 +1,20 @@
+// ----------------------------------------------
+// Function for calculating the font size.
+// The `font-size` function allows you to compute the font size using a CSS variable.
+// The resulting value will be multiplied by 1px.
+// -
+// @param {String} $token - The CSS variable name (including the `--` prefix) to be used for the font size calculation.
+// -
+// @example
+// .my-class {
+//   font-size: font-size(--font-size-variable);
+// }
+// -
+// Outputs:
+// .my-class {
+//   font-size: calc(var(--font-size-variable) * 1px);
+// }
+// ----------------------------------------------
+@function font-size($token) {
+    @return calc(var(#{$token}) * 1px);
+}

package/scss/functions/index.scss

@@ -0,0 +1 @@
+@forward './fontSize';

package/scss/index.scss

@@ -1 +1,2 @@
 @forward './mixins/';
+@forward './functions/';

package/scss/mixins/{_font-size.scss → _fontSize.scss}

@@ -1,4 +1,4 @@
-// -
+// ----------------------------------------------
 // Mixin for setting the font size.
 // The `font-size` mixin allows you to set the font size using a CSS variable.
 // The resulting value will be multiplied by 1px.
@@ -11,8 +11,11 @@
 //   @include font-size(--font-size-small);
 // }
 // -
-// Outputs: .text { font-size: calc(var(--font-size-small) * 1px); }
-// -
+// Outputs:
+// .text {
+//   font-size: calc(var(--font-size-small) * 1px);
+// }
+// ----------------------------------------------
 @mixin font-size($token) {
     font-size: calc(var($token) * 1px);
 }

package/scss/mixins/index.scss

@@ -1 +1 @@
-@forward './font-size';
+@forward './fontSize';