cosmetic(pie-css): PEW-109 interactive-states mixin

.changeset/dull-spies-play.md

@@ -0,0 +1,14 @@
+---
+"@justeattakeaway/pie-icon-button": minor
+"@justeattakeaway/pie-text-input": minor
+"@justeattakeaway/pie-checkbox": minor
+"@justeattakeaway/pie-textarea": minor
+"@justeattakeaway/pie-button": minor
+"@justeattakeaway/pie-switch": minor
+"@justeattakeaway/pie-radio": minor
+"@justeattakeaway/pie-card": minor
+"@justeattakeaway/pie-chip": minor
+"@justeattakeaway/pie-tag": minor
+---
+
+[Changed] - active and hover styles to support dark mode

.changeset/loud-rabbits-reflect.md

@@ -0,0 +1,8 @@
+---
+"pie-storybook": minor
+"pie-docs": minor
+"pie-monorepo": minor
+"@justeattakeaway/pie-modal": minor
+---
+
+[Changed] - pie-design-tokens version bump to 6.9.0

.changeset/strange-numbers-listen.md

@@ -0,0 +1,6 @@
+---
+"@justeattakeaway/pie-css": minor
+---
+
+[Added] - interactive-states mixin
+[Removed] - button-interactive-states mixin

apps/pie-docs/package.json

@@ -40,7 +40,7 @@
     "@docsearch/css": "3.5.2",
     "@docsearch/js": "3.5.2",
     "@justeat/fozzie": "11.0.2",
-    "@justeat/pie-design-tokens": "6.8.1",
+    "@justeat/pie-design-tokens": "6.9.0",
     "@justeattakeaway/browserslist-config-pie": "0.2.0",
     "@justeattakeaway/pie-css": "0.14.1",
     "@justeattakeaway/pie-icons": "5.6.0",

apps/pie-storybook/package.json

@@ -16,7 +16,7 @@
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "dependencies": {
-    "@justeat/pie-design-tokens": "6.8.1",
+    "@justeat/pie-design-tokens": "6.9.0",
     "@justeattakeaway/pie-assistive-text": "0.8.3",
     "@justeattakeaway/pie-button": "1.2.0",
     "@justeattakeaway/pie-card": "0.22.0",

bundlewatch.config.json

@@ -154,7 +154,7 @@
     },
     {
       "path": "./packages/components/pie-tag/dist/index.js",
-      "maxSize": "2.7 KB"
+      "maxSize": "2.8 KB"
     },
     {
       "path": "./packages/components/pie-tag/dist/react.js",

package.json

@@ -71,7 +71,7 @@
     "@changesets/cli": "2.27.10",
     "@commitlint/cli": "17.5.1",
     "@commitlint/config-conventional": "17.4.4",
-    "@justeat/pie-design-tokens": "6.8.1",
+    "@justeat/pie-design-tokens": "6.9.0",
     "@justeattakeaway/browserslist-config-pie": "0.2.0",
     "@justeattakeaway/generator-pie-component": "0.29.1",
     "@justeattakeaway/pie-icons": "5.6.0",

packages/components/pie-button/src/button.scss

@@ -23,7 +23,7 @@
 
     // The following values set to default background and color
     // currently this sets the primary button styles
-    --btn-bg-color: var(--dt-color-interactive-brand);
+    --int-states-mixin-bg-color: var(--dt-color-interactive-brand);
     --btn-text-color: var(--dt-color-content-interactive-light);
     --icon-display-override: block;
 
@@ -36,6 +36,9 @@
     --btn-padding-horizontal-medium: var(--dt-spacing-d);
     --btn-padding-horizontal-large: var(--dt-spacing-e);
 
+    // this token is needed for interactive-states mixin
+    --btn-bg-transparent: transparent;
+
     /**
     * Mixin for updating the button styles based on the size passed in.
     * Takes in the name of the size to be used.
@@ -105,7 +108,7 @@
     border: none;
     border-radius: var(--btn-border-radius);
     outline: none;
-    background-color: var(--btn-bg-color);
+    background-color: var(--int-states-mixin-bg-color);
     font-family: var(--btn-font-family);
     font-size: var(--btn-font-size);
     font-weight: var(--btn-font-weight);
@@ -122,93 +125,85 @@
     // Button Variant Modifiers
     // ************************
     &.o-btn--primary {
-        @include p.button-interactive-states('--dt-color-interactive-brand');
+        @include p.interactive-states('--dt-color-interactive-brand');
 
         &.o-btn--xsmall,
         &.o-btn--small-productive {
             /**
             * Where the font-size is smaller,
             * update the button backgrounds so that the text is accessible
             **/
-            --btn-bg-color: var(--dt-color-interactive-primary);
+            --int-states-mixin-bg-color: var(--dt-color-interactive-primary);
             --btn-text-color: var(--dt-color-content-interactive-primary);
 
-            @include p.button-interactive-states('--dt-color-interactive-primary', 'inverse');
+            @include p.interactive-states('--dt-color-interactive-primary', 'inverse', '02');
         }
 
         // This is to handle the background colour change getting overridden above, but then being put in responsive mode
         // can't use :not for this unfortunately, as then the smaller narrow state would lose its background colour too
         &.o-btn--xsmall.o-btn--expressive,
         &.o-btn--small-productive {
             @include responsive-wide {
-                --btn-bg-color: var(--dt-color-interactive-brand);
+                --int-states-mixin-bg-color: var(--dt-color-interactive-brand);
 
-                @include p.button-interactive-states('--dt-color-interactive-brand');
+                @include p.interactive-states('--dt-color-interactive-brand');
             }
         }
     }
 
     &.o-btn--secondary {
-        --btn-bg-color: var(--dt-color-interactive-secondary);
+        --int-states-mixin-bg-color: var(--dt-color-interactive-secondary);
         --btn-text-color: var(--dt-color-content-interactive-secondary);
 
-        @include p.button-interactive-states('--dt-color-interactive-secondary');
+        @include p.interactive-states('--dt-color-interactive-secondary');
     }
 
     &.o-btn--outline {
-        --btn-bg-color: transparent;
+        --int-states-mixin-bg-color: transparent;
         --btn-text-color: var(--dt-color-content-interactive-secondary);
 
         border: 1px solid var(--dt-color-border-strong);
 
-        // use black as the background color for hover and inverse,
-        // as this variant uses a shade of transparent black showing through the container background
-        @include p.button-interactive-states('--dt-color-black', 'transparent');
+        @include p.interactive-states('--btn-bg-transparent', 'transparent', '01');
     }
 
     &.o-btn--ghost {
-        --btn-bg-color: transparent;
+        --int-states-mixin-bg-color: transparent;
         --btn-text-color: var(--dt-color-content-link);
 
-        // use black as the background color for hover and inverse,
-        // as this variant uses a shade of transparent black showing through the container background
-        @include p.button-interactive-states('--dt-color-black', 'transparent');
+        @include p.interactive-states('--btn-bg-transparent', 'transparent', '01');
     }
 
     &.o-btn--inverse {
-        --btn-bg-color: var(--dt-color-interactive-inverse);
+        --int-states-mixin-bg-color: var(--dt-color-interactive-inverse);
         --btn-text-color: var(--dt-color-content-interactive-secondary);
 
-        @include p.button-interactive-states('--dt-color-interactive-inverse');
+        @include p.interactive-states('--dt-color-interactive-inverse');
     }
 
     &.o-btn--ghost-inverse,
     &.o-btn--outline-inverse {
-        --btn-bg-color: transparent;
+        --int-states-mixin-bg-color: transparent;
         --btn-text-color: var(--dt-color-content-interactive-primary);
 
-        // use white as the background color for hover and inverse,
-        // as these variants use a shade of transparent white showing through the container background
-        @include p.button-interactive-states('--dt-color-container-default', 'transparent');
+        @include p.interactive-states('--btn-bg-transparent', 'transparent-inverse', '02');
     }
 
     &.o-btn--outline-inverse {
         border: 1px solid var(--dt-color-border-strong);
     }
 
     &.o-btn--destructive {
-        --btn-bg-color: var(--dt-color-support-error);
+        --int-states-mixin-bg-color: var(--dt-color-support-error);
 
-        @include p.button-interactive-states('--dt-color-support-error');
+        @include p.interactive-states('--dt-color-support-error');
     }
 
     &.o-btn--destructive-ghost {
-        --btn-bg-color: transparent;
+        --int-states-mixin-bg-color: transparent;
         --btn-text-color: var(--dt-color-content-interactive-error);
 
-        // use black as the background color for hover and inverse,
-        // as this variant uses a shade of transparent black showing through the container background
-        @include p.button-interactive-states('--dt-color-black', 'transparent');
+        @include p.interactive-states('--btn-bg-transparent', 'transparent', '01');
     }
 
     // *********************
@@ -327,7 +322,7 @@
 
         // For every variant (except ghost variants) set the disabled background color
         &:not(.o-btn--ghost, .o-btn--ghost-inverse, .o-btn--destructive-ghost) {
-            --btn-bg-color: var(--dt-color-disabled-01) !important;
+            --int-states-mixin-bg-color: var(--dt-color-disabled-01) !important;
         }
 
         // For outline variants, set the border to the disabled color

packages/components/pie-card/src/card.scss

@@ -1,46 +1,24 @@
 @use '@justeattakeaway/pie-css/scss' as p;
 
-@mixin card-interactive-states($bg-color, $mode: 'default') {
-    &:hover:not(.c-card--disabled) {
-        @if $mode == 'inverse' {
-            --hover-modifier: var(--dt-color-hover-01);
-        } @else {
-            --hover-modifier: calc(-1 * var(--dt-color-hover-01));
-        }
-
-        --card-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--hover-modifier)));
-    }
-
-    &:active:not(.c-card--disabled) {
-        @if $mode == 'inverse' {
-            --active-modifier: var(--dt-color-active-01);
-        } @else {
-            --active-modifier: calc(-1 * var(--dt-color-active-01));
-        }
-
-        --card-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--active-modifier)));
-    }
-}
-
 .c-card {
-    --card-bg-color: var(--dt-color-container-default);
+    --int-states-mixin-bg-color: var(--dt-color-container-default);
     --card-color: var(--dt-color-content-default);
     --card-radius: var(--dt-radius-rounded-c);
     --card-border-color: transparent;
 
     display: block;
     position: relative;
     color: var(--card-color);
-    background-color: var(--card-bg-color);
+    background-color: var(--int-states-mixin-bg-color);
     border: 1px solid var(--card-border-color);
     border-radius: var(--card-radius);
     cursor: pointer;
     user-select: none;
     outline: none;
     text-decoration: none;
 
-    &.c-card--disabled {
-        --card-bg-color: var(--dt-color-disabled-01);
+    &.disabled {
+        --int-states-mixin-bg-color: var(--dt-color-disabled-01);
 
         cursor: not-allowed;
 
@@ -56,36 +34,36 @@
     &.c-card--default {
         box-shadow: var(--dt-elevation-card);
 
-        @include card-interactive-states('--dt-color-container-default');
+        @include p.interactive-states('--dt-color-container-default');
     }
 
     &.c-card--outline {
         border-color: var(--dt-color-border-strong);
 
-        @include card-interactive-states('--dt-color-container-default');
+        @include p.interactive-states('--dt-color-container-default');
     }
 
     &.c-card--inverse {
-        --card-bg-color: var(--dt-color-container-inverse);
+        --int-states-mixin-bg-color: var(--dt-color-container-inverse);
         --card-color: var(--dt-color-content-inverse);
 
         box-shadow: var(--dt-elevation-inverse-card);
 
-        @include card-interactive-states('--dt-color-container-inverse', 'inverse');
+        @include p.interactive-states('--dt-color-container-inverse', 'inverse', '02');
     }
 
     &.c-card--outline-inverse {
-        --card-bg-color: var(--dt-color-container-inverse);
+        --int-states-mixin-bg-color: var(--dt-color-container-inverse);
         --card-color: var(--dt-color-content-inverse);
 
         border-color: var(--dt-color-border-inverse);
 
-        @include card-interactive-states('--dt-color-container-inverse', 'inverse');
+        @include p.interactive-states('--dt-color-container-inverse', 'inverse', '02');
     }
 
-    &.c-card--inverse.c-card--disabled,
-    &.c-card--outline-inverse.c-card--disabled {
-        --card-bg-color: var(--dt-color-disabled-01-inverse);
+    &.c-card--inverse.disabled,
+    &.c-card--outline-inverse.disabled {
+        --int-states-mixin-bg-color: var(--dt-color-disabled-01-inverse);
     }
 
     &.c-card--draggable {

packages/components/pie-card/src/index.ts

@@ -195,7 +195,7 @@ export class PieCard extends LitElement implements CardProps {
             'c-card': true,
             [`c-card--${variant}`]: true,
             'c-card--draggable': isDraggable,
-            'c-card--disabled': disabled,
+            disabled,
         };
 
         if (tag === 'a') return this.renderAnchor(classes);