@justeattakeaway/pie-css 0.14.1 → 0.15.1

package/dist/index.css

@@ -98,6 +98,7 @@
     --dt-color-interactive-form: var(--dt-color-mozzarella-60);
     --dt-color-interactive-error: var(--dt-color-red);
     --dt-color-overlay: rgb(0,0,0,0.55);
+    --dt-color-transparent: rgb(255,255,255,0);
     --dt-color-support-error: var(--dt-color-red);
     --dt-color-support-warning: var(--dt-color-yellow);
     --dt-color-support-positive: var(--dt-color-green);
@@ -149,14 +150,23 @@
     --dt-color-content-positive: var(--dt-color-green);
     --dt-color-content-disabled: var(--dt-color-charcoal-50);
     --dt-color-content-brand: var(--dt-color-orange);
+    --dt-color-hover-01-bg: #000;
     --dt-color-hover-01: 4%;
+    --dt-color-hover-01-dark-bg: #000;
     --dt-color-hover-01-dark: 4%;
+    --dt-color-hover-02-bg: #fff;
     --dt-color-hover-02: 8%;
+    --dt-color-hover-02-light-bg: #fff;
     --dt-color-hover-02-light: 8%;
+    --dt-color-active-01-bg: #000;
     --dt-color-active-01: 12%;
+    --dt-color-active-01-dark-bg: #000;
     --dt-color-active-01-dark: 12%;
+    --dt-color-active-02-bg: #fff;
     --dt-color-active-02: 20%;
+    --dt-color-active-02-light-bg: #fff;
     --dt-color-active-02-light: 20%;
+    --dt-color-resting-bg: #fff;
     --dt-color-resting: 0%;
     --dt-color-focus-inner: var(--dt-color-white);
     --dt-color-focus-outer: var(--dt-color-blue-70);
@@ -465,6 +475,7 @@ html[data-highcontrast-enabled] {
     --dt-color-interactive-form: var(--dt-color-black);
     --dt-color-interactive-error: var(--dt-color-red);
     --dt-color-overlay: rgb(0,0,0,0.55);
+    --dt-color-transparent: rgb(255,255,255,0);
     --dt-color-support-error: var(--dt-color-red-dark-hc);
     --dt-color-support-warning: var(--dt-color-yellow-dark-hc);
     --dt-color-support-positive: var(--dt-color-green-dark-hc);
@@ -516,14 +527,23 @@ html[data-highcontrast-enabled] {
     --dt-color-content-positive: var(--dt-color-green-dark-hc);
     --dt-color-content-disabled: var(--dt-color-charcoal-50);
     --dt-color-content-brand: var(--dt-color-orange-dark-hc);
+    --dt-color-hover-01-bg: #000;
     --dt-color-hover-01: 4%;
+    --dt-color-hover-01-dark-bg: #000;
     --dt-color-hover-01-dark: 4%;
+    --dt-color-hover-02-bg: #fff;
     --dt-color-hover-02: 8%;
+    --dt-color-hover-02-light-bg: #fff;
     --dt-color-hover-02-light: 8%;
+    --dt-color-active-01-bg: #000;
     --dt-color-active-01: 12%;
+    --dt-color-active-01-dark-bg: #000;
     --dt-color-active-01-dark: 12%;
+    --dt-color-active-02-bg: #fff;
     --dt-color-active-02: 20%;
+    --dt-color-active-02-light-bg: #fff;
     --dt-color-active-02-light: 20%;
+    --dt-color-resting-bg: #fff;
     --dt-color-resting: 0%;
     --dt-color-focus-inner: var(--dt-color-white);
     --dt-color-focus-outer: var(--dt-color-blue-70);
@@ -566,6 +586,7 @@ html[data-highcontrast-enabled] {
         --dt-color-interactive-form: var(--dt-color-mozzarella-50);
         --dt-color-interactive-error: var(--dt-color-red-40);
         --dt-color-overlay: rgb(0,0,0,0.55);
+        --dt-color-transparent: rgb(255,255,255,0);
         --dt-color-support-error: var(--dt-color-red-40);
         --dt-color-support-warning: var(--dt-color-yellow);
         --dt-color-support-positive: var(--dt-color-green-30);
@@ -617,14 +638,23 @@ html[data-highcontrast-enabled] {
         --dt-color-content-positive: var(--dt-color-green-30);
         --dt-color-content-disabled: var(--dt-color-charcoal-50);
         --dt-color-content-brand: var(--dt-color-orange-30);
+        --dt-color-hover-01-bg: #fff;
         --dt-color-hover-01: 8%;
+        --dt-color-hover-01-dark-bg: #000;
         --dt-color-hover-01-dark: 4%;
+        --dt-color-hover-02-bg: #000;
         --dt-color-hover-02: 4%;
+        --dt-color-hover-02-light-bg: #fff;
         --dt-color-hover-02-light: 8%;
+        --dt-color-active-01-bg: #fff;
         --dt-color-active-01: 20%;
+        --dt-color-active-01-dark-bg: #000;
         --dt-color-active-01-dark: 12%;
+        --dt-color-active-02-bg: #000;
         --dt-color-active-02: 12%;
+        --dt-color-active-02-light-bg: #fff;
         --dt-color-active-02-light: 20%;
+        --dt-color-resting-bg: #000;
         --dt-color-resting: 0%;
         --dt-color-focus-inner: var(--dt-color-black);
         --dt-color-focus-outer: var(--dt-color-blue-30);
@@ -668,6 +698,7 @@ html[data-highcontrast-enabled] {
         --dt-color-interactive-form: var(--dt-color-white);
         --dt-color-interactive-error: var(--dt-color-red-40);
         --dt-color-overlay: rgb(0,0,0,0.55);
+        --dt-color-transparent: rgb(255,255,255,0);
         --dt-color-support-error: var(--dt-color-red-light-hc);
         --dt-color-support-warning: var(--dt-color-yellow);
         --dt-color-support-positive: var(--dt-color-green-light-hc);
@@ -719,14 +750,23 @@ html[data-highcontrast-enabled] {
         --dt-color-content-positive: var(--dt-color-green-light-hc);
         --dt-color-content-disabled: var(--dt-color-charcoal-50);
         --dt-color-content-brand: var(--dt-color-orange-30);
+        --dt-color-hover-01-bg: #fff;
         --dt-color-hover-01: 8%;
+        --dt-color-hover-01-dark-bg: #000;
         --dt-color-hover-01-dark: 4%;
+        --dt-color-hover-02-bg: #000;
         --dt-color-hover-02: 4%;
+        --dt-color-hover-02-light-bg: #fff;
         --dt-color-hover-02-light: 8%;
+        --dt-color-active-01-bg: #fff;
         --dt-color-active-01: 20%;
+        --dt-color-active-01-dark-bg: #000;
         --dt-color-active-01-dark: 12%;
+        --dt-color-active-02-bg: #000;
         --dt-color-active-02: 12%;
+        --dt-color-active-02-light-bg: #fff;
         --dt-color-active-02-light: 20%;
+        --dt-color-resting-bg: #000;
         --dt-color-resting: 0%;
         --dt-color-focus-inner: var(--dt-color-black);
         --dt-color-focus-outer: var(--dt-color-blue-30);

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@justeattakeaway/pie-css",
-  "version": "0.14.1",
+  "version": "0.15.1",
   "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",
+    "url": "https://github.com/justeattakeaway/pie",
+    "directory": "packages/tools/pie-css"
+  },
   "author": "Just Eat Takeaway.com - Design System Team",
   "files": [
     "scss"
@@ -24,7 +29,6 @@
     "SCSS",
     "SASS"
   ],
-  "repository": "https://github.com/justeattakeaway/pie.git",
   "license": "Apache-2.0",
   "devDependencies": {
     "@types/postcss-import": "14.0.3",

package/scss/mixins/_interactiveStates.scss

@@ -0,0 +1,70 @@
+// ----------------------------------------------
+// Mixin to define hover, active and loading styles for interactive elements.
+// The mixin expects the '--int-states-mixin-bg-color' css var to be used in component styles.
+// ---
+// $bg-color: design token name to be used for the states
+// $mode: 'default': apply the default lighten/darken to the color via hsl
+//        'alt': applies a larger percentage change to the color (darken)
+//        'inverse': inverts the modifier, so that it lightens the color rather than darken it
+//        'transparent': uses hsla syntax to make the color semi-opaque with base as black
+//        'transparent-inverse': uses hsla syntax to make the color semi-opaque with base as white
+// $level: the level of hover/active to be used. Follows hover/active token names (01, 02, 01-dark, 02-light)
+// ----------------------------------------------
+@mixin interactive-states($bg-color, $mode: default, $level: '01') {
+    // Needed for webviews and safari <16.2
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix#browser_compatibility
+    &:hover:not(:disabled, .is-disabled, .is-dismissible) {
+        @if $mode == 'alt' {
+            --hover-modifier: calc(-1 * var(--dt-color-hover-02));
+        } @else if $mode == 'inverse' {
+            --hover-modifier: var(--dt-color-hover-02);
+        } @else {
+            --hover-modifier: calc(-1 * var(--dt-color-hover-01));
+        }
+
+        // for mode=transparent, use the hsla syntax to make the button background opaque by a set percentage
+        @if $mode == 'transparent' {
+            --hover-modifier: var(--dt-color-hover-01);
+            --int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));
+        }
+        @if $mode == 'transparent-inverse' {
+            --hover-modifier: var(--dt-color-hover-02);
+            --int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier));
+        } @else {
+            --int-states-mixin-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--hover-modifier)));
+        }
+    }
+
+    &:active:not(:disabled, .is-disabled, .is-dismissible),
+    &.is-loading:not(:disabled, .is-disabled) {
+        @if $mode == 'alt' {
+            --active-modifier: calc(-1 * var(--dt-color-active-02));
+        } @else if $mode == 'inverse' {
+            --active-modifier: var(--dt-color-active-02);
+        } @else {
+            --active-modifier: calc(-1 * var(--dt-color-active-01));
+        }
+
+        @if $mode == 'transparent' {
+            --active-modifier: var(--dt-color-active-01);
+            --int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));
+        }
+        @if $mode == 'transparent-inverse' {
+            --active-modifier: var(--dt-color-active-02);
+            --int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier));
+        } @else {
+            --int-states-mixin-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--active-modifier)));
+        }
+    }
+
+    @supports (background-color: color-mix(in srgb, black, white)) {
+        &:hover:not(:disabled, .is-disabled, .is-dismissible) {
+           --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-#{$level}-bg) var(--dt-color-hover-#{$level}),  var(#{$bg-color}));
+        }
+
+        &:active:not(:disabled, .is-disabled, .is-dismissible),
+        &.is-loading:not(:disabled, .is-disabled) {
+            --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-#{$level}-bg) var(--dt-color-active-#{$level}), var(#{$bg-color}));
+        }
+    }
+}

package/scss/mixins/index.scss

@@ -1,4 +1,4 @@
-@forward './buttonInteractiveStates';
+@forward './interactiveStates';
 @forward './unitModifiers';
 @forward './focus';
 @forward './visuallyHidden';

package/scss/mixins/_buttonInteractiveStates.scss

@@ -1,47 +0,0 @@
-// ----------------------------------------------
-// Mixin to define button states for hover, active and loading.
-// ---
-// $bg-color: design token name to be used for the states
-// $mode: 'default': apply the default lighten/darken to the color via hsl
-//        'alt': applies a larger percentage change to the color (darken)
-//        'inverse': inverts the modifier, so that it lightens the color rather than darken it
-//        'transparent': uses hsla syntax to make the color semi-opaque (used for ghost and outline button variants)
-// }
-// ----------------------------------------------
-@mixin button-interactive-states($bg-color, $mode: 'default') {
-    &:hover:not(:disabled) {
-        @if $mode == 'alt' {
-            --hover-modifier: calc(-1 * var(--dt-color-hover-02));
-        } @else if $mode == 'inverse' {
-            --hover-modifier: var(--dt-color-hover-02);
-        } @else {
-            --hover-modifier: calc(-1 * var(--dt-color-hover-01));
-        }
-
-        // for mode=transparent, use the hsla syntax to make the button background opaque by a set percentage
-        @if $mode == 'transparent' {
-            --hover-modifier: var(--dt-color-hover-01);
-            --btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), var(#{$bg-color}-l), var(--hover-modifier));
-        } @else {
-            --btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--hover-modifier)));
-        }
-    }
-
-    &:active:not(:disabled),
-    &.is-loading:not(:disabled) {
-        @if $mode == 'alt' {
-            --active-modifier: calc(-1 * var(--dt-color-active-02));
-        } @else if $mode == 'inverse' {
-            --active-modifier: var(--dt-color-active-02);
-        } @else {
-            --active-modifier: calc(-1 * var(--dt-color-active-01));
-        }
-
-        @if $mode == 'transparent' {
-            --active-modifier: var(--dt-color-active-01);
-            --btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), var(#{$bg-color}-l), var(--active-modifier));
-        } @else {
-            --btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--active-modifier)));
-        }
-    }
-}