Reverting action interactive name change

Shopify · Feb 21, 2020 · aa23d0b · aa23d0b
1 parent 2554022
commit aa23d0b
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 28 deletions.
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -411,11 +411,11 @@ $stacking-order: (
   // stylelint-disable selector-max-class
   &.newDesignLanguage {
     // redeclaring these styles here for specificity
-    @include recolor-icon(var(--p-action-interactive));
+    @include recolor-icon(var(--p-interactive));
     background: transparent;
     border: 0;
     box-shadow: none;
-    color: var(--p-action-interactive);
+    color: var(--p-interactive);
 
     &::after {
       content: none;
@@ -435,20 +435,20 @@ $stacking-order: (
     }
 
     &:hover {
-      @include recolor-icon(var(--p-action-interactive-hovered));
-      color: var(--p-action-interactive-hovered);
+      @include recolor-icon(var(--p-interactive-hovered));
+      color: var(--p-interactive-hovered);
       text-decoration: underline;
     }
 
     &:focus {
-      @include recolor-icon(var(--p-action-interactive));
-      color: var(--p-action-interactive);
+      @include recolor-icon(var(--p-interactive));
+      color: var(--p-interactive);
       @include no-focus-ring;
     }
 
     &:active {
-      @include recolor-icon(var(--p-action-interactive-pressed));
-      color: var(--p-action-interactive-pressed);
+      @include recolor-icon(var(--p-interactive-pressed));
+      color: var(--p-interactive-pressed);
     }
 
     &:focus:not(:active) {
@@ -467,17 +467,17 @@ $stacking-order: (
     }
 
     &.destructive {
-      @include recolor-icon(var(--p-action-critical));
-      color: var(--p-action-critical);
+      @include recolor-icon(var(--p-interactive-critical));
+      color: var(--p-interactive-critical);
       &:hover {
-        color: var(--p-action-critical-hovered);
+        color: var(--p-interactive-critical-hovered);
       }
       &:active {
-        color: var(--p-action-critical-pressed);
+        color: var(--p-interactive-critical-pressed);
       }
 
       &.disabled {
-        color: var(--p-action-critical-disabled);
+        color: var(--p-interactive-critical-disabled);
       }
     }
 
@@ -487,22 +487,22 @@ $stacking-order: (
     }
 
     &.iconOnly {
-      @include recolor-icon(var(--p-action-interactive));
+      @include recolor-icon(var(--p-interactive));
 
       &:hover {
-        @include recolor-icon(var(--p-action-interactive-hovered));
+        @include recolor-icon(var(--p-interactive-hovered));
       }
 
       &:focus {
-        @include recolor-icon(var(--p-action-interactive));
+        @include recolor-icon(var(--p-interactive));
       }
 
       &:active {
-        @include recolor-icon(var(--p-action-interactive-pressed));
+        @include recolor-icon(var(--p-interactive-pressed));
       }
 
       &.disabled {
-        @include recolor-icon(var(--p-action-interactive-disabled));
+        @include recolor-icon(var(--p-interactive-disabled));
       }
     }
 
@@ -534,6 +534,12 @@ $stacking-order: (
 .sizeSlim {
   min-height: $slim-min-height;
   padding: $slim-vertical-padding spacing(base-tight);
+
+  &.newDesignLanguage {
+    // Local override for slim button height.
+    $slim-min-height: rem(28px);
+    min-height: $slim-min-height;
+  }
 }
 
 .sizeLarge {

diff --git a/src/styles/foundation/_colors.scss b/src/styles/foundation/_colors.scss
@@ -58,6 +58,7 @@ $color-palette-data: map-extend(
 Color `#{$hue}, #{$value}` not found. Make sure arguments are strings.
 GOOD: color('yellow')
 BAD: color(yellow)
+
 Available options: #{available-names($color-palette-data)}
 ";
     // stylelint-enable
@@ -129,6 +130,7 @@ $ms-high-contrast-color-data: (
 Color `#{$color}` not found. Make sure argument is a string.
 GOOD: ms-high-contrast-color('selected-text')
 BAD: ms-high-contrast-color(selected-text).
+
 Available options: #{available-names($ms-high-contrast-color-data)}
 ";
     // stylelint-enable

diff --git a/src/styles/foundation/_focus-ring.scss b/src/styles/foundation/_focus-ring.scss
@@ -1,17 +1,18 @@
 /// Sets the focus ring for an interactive element
 /// @param {String} $size - The size of the border radius on the focus ring.
 /// @param {String} $style - Focus ring state.
-/// @param {Number} $border-width - The border width of your element in px.
+/// @param {Number} $border-width - The border width of your element in rems.
 ///
 
-@mixin focus-ring($size: 'base', $border-width: '0px', $style: 'base') {
+@mixin focus-ring($size: 'base', $border-width: rem(0), $style: 'base') {
   $stroke: rem(2px);
-  $offset: calc(-1 * calc(#{$border-width} + #{rem(1px)}));
+  $offset: calc(#{$border-width} + #{rem(1px)});
   $border-radius: if(
     $size == 'wide',
     var(--p-border-radius-wide),
     var(--p-border-radius-base)
   );
+  $negative-offset: calc(-1 * #{$offset});
 
   @if $style == 'base' {
     position: relative;
@@ -20,13 +21,13 @@
       content: var(--p-non-null-content, none);
       position: absolute;
       z-index: 1;
-      top: $offset;
-      right: $offset;
-      bottom: $offset;
-      left: $offset;
+      top: $negative-offset;
+      right: $negative-offset;
+      bottom: $negative-offset;
+      left: $negative-offset;
       display: block;
       pointer-events: none;
-      box-shadow: 0 0 0 $offset var(--p-focused);
+      box-shadow: 0 0 0 $negative-offset var(--p-focused);
       transition: box-shadow duration(fast) var(--p-ease);
       border-radius: calc(#{$border-radius} + #{rem(1px)});
     }

diff --git a/src/styles/shared/_buttons.scss b/src/styles/shared/_buttons.scss
@@ -32,8 +32,8 @@
   user-select: none;
   text-decoration: none;
   transition-property: background, border, box-shadow;
-  transition-duration: duration();
-  transition-timing-function: easing();
+  transition-duration: var(--p-override-none, duration());
+  transition-timing-function: var(--p-override-none, easing());
   -webkit-tap-highlight-color: transparent;
 
   &:hover {