@justeattakeaway/pie-css 0.7.0 → 0.8.0

package/dist/index.css

@@ -125,6 +125,7 @@
     --dt-color-content-interactive-dark: var(--dt-color-charcoal-80);
     --dt-color-content-interactive-error: var(--dt-color-red);
     --dt-color-content-light: var(--dt-color-white);
+    --dt-color-content-dark: var(--dt-color-charcoal-80);
     --dt-color-content-inverse: var(--dt-color-white);
     --dt-color-content-link: var(--dt-color-charcoal-80);
     --dt-color-content-link-distinct: var(--dt-color-blue);
@@ -210,6 +211,7 @@
     --dt-color-highcontrast-content-interactive-dark: var(--dt-color-black);
     --dt-color-highcontrast-content-interactive-error: var(--dt-color-red-dark-hc);
     --dt-color-highcontrast-content-light: var(--dt-color-white);
+    --dt-color-highcontrast-content-dark: var(--dt-color-black);
     --dt-color-highcontrast-content-inverse: var(--dt-color-white);
     --dt-color-highcontrast-content-link: var(--dt-color-black);
     --dt-color-highcontrast-content-link-distinct: var(--dt-color-blue);
@@ -295,6 +297,7 @@
     --dt-color-dark-content-interactive-dark: var(--dt-color-charcoal-80);
     --dt-color-dark-content-interactive-error: var(--dt-color-red-30);
     --dt-color-dark-content-light: var(--dt-color-white);
+    --dt-color-dark-content-dark: var(--dt-color-charcoal-80);
     --dt-color-dark-content-inverse: var(--dt-color-charcoal-80);
     --dt-color-dark-content-link: var(--dt-color-white);
     --dt-color-dark-content-link-distinct: var(--dt-color-blue-30);
@@ -380,6 +383,7 @@
     --dt-color-highcontrast-dark-content-interactive-dark: var(--dt-color-black);
     --dt-color-highcontrast-dark-content-interactive-error: var(--dt-color-red-light-hc);
     --dt-color-highcontrast-dark-content-light: var(--dt-color-white);
+    --dt-color-highcontrast-dark-content-dark: var(--dt-color-black);
     --dt-color-highcontrast-dark-content-inverse: var(--dt-color-black);
     --dt-color-highcontrast-dark-content-link: var(--dt-color-white);
     --dt-color-highcontrast-dark-content-link-distinct: var(--dt-color-blue-light-hc);
@@ -1030,6 +1034,9 @@
     --dt-color-content-light-h: var(--dt-color-white-h);
     --dt-color-content-light-s: var(--dt-color-white-s);
     --dt-color-content-light-l: var(--dt-color-white-l);
+    --dt-color-content-dark-h: var(--dt-color-charcoal-80-h);
+    --dt-color-content-dark-s: var(--dt-color-charcoal-80-s);
+    --dt-color-content-dark-l: var(--dt-color-charcoal-80-l);
     --dt-color-content-inverse-h: var(--dt-color-white-h);
     --dt-color-content-inverse-s: var(--dt-color-white-s);
     --dt-color-content-inverse-l: var(--dt-color-white-l);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-css",
-  "version": "0.7.0",
+  "version": "0.8.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": "Just Eat Takeaway.com - Design System Team",
   "files": [

package/scss/mixins/_buttonInteractiveStates.scss

@@ -1,14 +1,19 @@
 // ----------------------------------------------
 // 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
-// 'transparent': uses hsla syntax to make the color semi-opaque (used for ghost and outline button variants)
+//        '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));
         }
@@ -26,6 +31,8 @@
     &[isLoading]: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));
         }