@phillips/seldon 1.279.2 → 1.280.0

package/dist/scss/components/Button/_button.scss

@@ -1,315 +1,339 @@
 @use 'sass:color';
 @use '../../allPartials' as *;
-
-$destructive-hover-disabled: color.adjust($warning-default, $alpha: -0.5);
-
-.#{$px}-button {
-  // we need this because we can't be sure that the Text component is being used as a child of the Button component
-  @include text($labelMedium);
-
-  align-items: center;
-  background-color: $pure-black;
-  border: 2px solid transparent;
-  border-radius: $radius-xs;
-  color: $pure-white;
-  cursor: pointer;
-  display: inline-flex;
-  font-variation-settings: 'wght' 600;
-  gap: $margin-xsm;
-  height: 44px; // TODO: this is temporary as we will revisit the button in a new ticket
-  justify-content: center;
-  padding: 0 $padding-sm;
-  position: relative;
-  transition:
-    color 0.25s ease-out,
-    background-color 0.25s ease-out,
-    border-color 0.25s ease-out,
-    box-shadow 0.25s ease-out;
-
-  &--small {
-    height: 32px; // Explicitly defined by design
-    max-width: 160px; // Explicitly defined by design
-    min-width: 72px; // Explicitly defined by design
+@use '../../layers';
+
+@layer seldon.components {
+  $destructive-hover-disabled: color.adjust($warning-default, $alpha: -0.5);
+
+  .#{$px}-button {
+    align-items: center;
+    background-color: $pure-black;
+    border: 2px solid transparent;
+    border-radius: $radius-xs;
+    color: $pure-white;
+    cursor: pointer;
+    display: inline-flex;
+    gap: $margin-xsm;
+    height: 44px; // TODO: this is temporary as we will revisit the button in a new ticket
+    justify-content: center;
     padding: 0 $padding-sm;
+    position: relative;
+    transition:
+      color 0.25s ease-out,
+      background-color 0.25s ease-out,
+      border-color 0.25s ease-out,
+      box-shadow 0.25s ease-out;
+
+    &--small {
+      height: 32px; // Explicitly defined by design
+      max-width: 160px; // Explicitly defined by design
+      min-width: 72px; // Explicitly defined by design
+      padding: 0 $padding-sm;
 
-    svg {
-      height: calc($font-size-label-small * 1.1);
-      width: calc($font-size-label-small * 1.1);
+      svg {
+        height: calc($font-size-label-small * 1.1);
+        width: calc($font-size-label-small * 1.1);
 
-      @include media($breakpoint-md) {
-        height: calc($font-size-label-small * 1.2);
-        width: calc($font-size-label-small * 1.2);
+        @include media($breakpoint-md) {
+          height: calc($font-size-label-small * 1.2);
+          width: calc($font-size-label-small * 1.2);
+        }
       }
     }
-  }
-
-  svg {
-    fill: $pure-white;
-    height: calc($font-size-label-small * 1.3);
-    width: calc($font-size-label-small * 1.3);
-
-    @include media($breakpoint-md) {
-      height: calc($font-size-label-small * 1.4);
-      width: calc($font-size-label-small * 1.4);
-    }
 
-    path {
+    svg {
       fill: $pure-white;
-      transition: fill 0.25s ease-out;
-    }
-  }
+      height: calc($font-size-label-small * 1.3);
+      width: calc($font-size-label-small * 1.3);
 
-  &--primary,
-  &--secondary,
-  &--tertiary,
-  &--destructive {
-    &.#{$px}-link {
-      text-decoration: none;
+      @include media($breakpoint-md) {
+        height: calc($font-size-label-small * 1.4);
+        width: calc($font-size-label-small * 1.4);
+      }
+
+      path {
+        fill: $pure-white;
+        transition: fill 0.25s ease-out;
+      }
     }
-  }
 
-  &--primary.#{$px}-link,
-  &--secondary.#{$px}-link,
-  &--destructive.#{$px}-link {
-    font-variation-settings: 'wght' 600;
+    // Link owns type on Button-as-<a> (`.seldon-link`). `--link` owns type on
+    // the text-button variant. Gating only `.seldon-link` left `--link` at
+    // (0,2,0) so wght 600 beat `--link`'s 400.
+    &:not(.#{$px}-link):not(.#{$px}-button--link) {
+      // we need this because we can't be sure that the Text component is being used as a child of the Button component
+      @include text($labelMedium);
 
-    .#{$px}-text {
       font-variation-settings: 'wght' 600;
     }
-  }
 
-  &:not(.#{$px}-button--link) {
-    &.#{$px}-button--primary {
-      color: $white-100;
+    &--primary,
+    &--secondary,
+    &--tertiary,
+    &--destructive {
+      &.#{$px}-link {
+        text-decoration: none;
+      }
     }
 
-    .#{$px}-text {
-      color: inherit;
-      font-variation-settings: inherit;
-    }
-  }
+    // Button owns type on the bordered variants rendered as <a>. The `:not(.#{$px}-link)` gate
+    // above deliberately skips `.#{$px}-link`, so these need their own (0,2,0) rule to beat Link's
+    // linkMedium wght 400. `--link` is the borderless standalone-link variant and keeps Link's 400.
+    // Skip IconButton: it wraps Button on the same node, so this rule would set wght 600 on an
+    // icon-only <a> (Pagination chevrons). That only changes the font strut — a 1px Chromatic shift.
+    &--primary.#{$px}-link:not(.#{$px}-icon-button),
+    &--secondary.#{$px}-link:not(.#{$px}-icon-button),
+    &--destructive.#{$px}-link:not(.#{$px}-icon-button) {
+      font-variation-settings: 'wght' 600;
 
-  @include hoverOrActive {
-    background-color: $button-hover;
+      .#{$px}-text {
+        font-variation-settings: 'wght' 600;
+      }
+    }
 
-    svg {
-      fill: $pure-white;
+    // Button owns paint on destructive-as-link (not Link)
+    &--destructive.#{$px}-link {
+      color: $warning-default;
     }
-  }
 
-  &:focus-visible {
-    @include focus-ring($border-radius: $radius-xs);
+    &:not(.#{$px}-button--link) {
+      &.#{$px}-button--primary {
+        color: $white-100;
+      }
 
-    svg {
-      fill: $pure-white;
+      .#{$px}-text {
+        color: inherit;
+        font-variation-settings: inherit;
+      }
     }
-  }
 
-  &--link {
-    background-color: transparent;
-    border: 0;
-    color: $pure-black;
-    font-variation-settings: 'wght' 400;
-    height: auto;
-    padding: 0;
-    text-decoration: underline;
+    @include hoverOrActive {
+      background-color: $button-hover;
 
-    .#{$px}-text {
-      font-variation-settings: 'wght' 400;
+      svg {
+        fill: $pure-white;
+      }
     }
 
     &:focus-visible {
       @include focus-ring($border-radius: $radius-xs);
+
+      svg {
+        fill: $pure-white;
+      }
     }
 
-    &:hover {
+    &--link {
+      // Same type as the ungated Button, minus wght 600. `--link` without
+      // href is a <button>, not `.seldon-link`, so it would otherwise inherit
+      // the browser button size.
+      @include text($labelMedium);
+
       background-color: transparent;
+      border: 0;
       color: $pure-black;
+      font-variation-settings: 'wght' 400;
+      height: auto;
+      padding: 0;
+      text-decoration: underline;
 
       .#{$px}-text {
-        cursor: pointer;
+        font-variation-settings: 'wght' 400;
       }
-    }
-  }
 
-  &--secondary {
-    background-color: $pure-white;
-    border: 2px solid $pure-black;
-    color: $pure-black;
-    transition: border 0.3s ease-out;
-    z-index: 0;
-
-    &::before {
-      border-radius: $radius-xs;
-      box-sizing: border-box;
-      content: '';
-      display: inline-block;
-      height: 0;
-      left: 50%;
-      position: absolute;
-      top: 50%;
-      transition: all 0.25s ease;
-      width: 0;
-      z-index: -2;
-    }
+      &:focus-visible {
+        @include focus-ring($border-radius: $radius-xs);
+      }
 
-    &:focus-visible {
-      @include focus-ring($border-radius: $radius-xs);
+      &:hover {
+        background-color: transparent;
+        color: $pure-black;
 
-      background-color: $pure-white;
+        .#{$px}-text {
+          cursor: pointer;
+        }
+      }
     }
 
-    svg {
-      fill: $pure-black;
+    &--secondary {
+      background-color: $pure-white;
+      border: 2px solid $pure-black;
+      color: $pure-black;
+      transition: border 0.3s ease-out;
+      z-index: 0;
 
-      path {
-        fill: $pure-black;
+      &::before {
+        border-radius: $radius-xs;
+        box-sizing: border-box;
+        content: '';
+        display: inline-block;
+        height: 0;
+        left: 50%;
+        position: absolute;
+        top: 50%;
+        transition: all 0.25s ease;
+        width: 0;
+        z-index: -2;
       }
-    }
-  }
 
-  &--secondary {
-    transition: box-shadow 0.25s;
+      &:focus-visible {
+        @include focus-ring($border-radius: $radius-xs);
 
-    @include hoverOrActive {
-      background-color: transparent;
-      box-shadow: 0 0 0 1px rgba($pure-black, 1);
-
-      &:disabled {
-        box-shadow: none;
+        background-color: $pure-white;
       }
-    }
-  }
 
-  &--destructive {
-    background-color: $white-100;
-    border: 2px solid $warning-default;
-    color: $warning-default;
+      svg {
+        fill: $pure-black;
 
-    &:focus-visible {
-      background-color: $white-100;
-      border-radius: $radius-xs;
-      outline: 2px solid $warning-default;
-      outline-offset: 4px;
+        path {
+          fill: $pure-black;
+        }
+      }
     }
 
-    // Spinner inside destructive button uses the same red
-    .#{$px}-loader {
-      border-color: $warning-default;
-      border-bottom-color: transparent;
-    }
+    &--secondary {
+      transition: box-shadow 0.25s;
 
-    svg {
-      fill: $warning-default;
+      @include hoverOrActive {
+        background-color: transparent;
+        box-shadow: 0 0 0 1px rgba($pure-black, 1);
 
-      path {
-        fill: $warning-default;
+        &:disabled {
+          box-shadow: none;
+        }
       }
     }
 
-    @include hoverOrActive {
+    &--destructive {
       background-color: $white-100;
-      border-color: $destructive-hover-disabled;
-      color: $destructive-hover-disabled;
+      border: 2px solid $warning-default;
+      color: $warning-default;
+
+      &:focus-visible {
+        background-color: $white-100;
+        border-radius: $radius-xs;
+        outline: 2px solid $warning-default;
+        outline-offset: 4px;
+      }
+
+      // Spinner inside destructive button uses the same red
+      .#{$px}-loader {
+        border-color: $warning-default;
+        border-bottom-color: transparent;
+      }
 
       svg {
-        fill: $destructive-hover-disabled;
+        fill: $warning-default;
 
         path {
-          fill: $destructive-hover-disabled;
+          fill: $warning-default;
         }
       }
 
-      &:disabled {
-        box-shadow: none;
-      }
-    }
-  }
+      @include hoverOrActive {
+        background-color: $white-100;
+        border-color: $destructive-hover-disabled;
+        color: $destructive-hover-disabled;
 
-  &--tertiary {
-    background-color: transparent;
-    color: $pure-black;
+        svg {
+          fill: $destructive-hover-disabled;
 
-    svg {
-      fill: $pure-black;
+          path {
+            fill: $destructive-hover-disabled;
+          }
+        }
 
-      path {
-        fill: $pure-black;
+        &:disabled {
+          box-shadow: none;
+        }
       }
     }
 
-    @include hoverOrActive {
+    &--tertiary {
       background-color: transparent;
-      color: $button-hover;
+      color: $pure-black;
 
       svg {
-        fill: $button-hover;
+        fill: $pure-black;
 
         path {
-          fill: $button-hover;
+          fill: $pure-black;
         }
       }
-    }
 
-    &:focus-visible {
-      @include focus-ring($border-radius: $radius-xs);
+      @include hoverOrActive {
+        background-color: transparent;
+        color: $button-hover;
 
-      background-color: $pure-white;
-    }
-  }
+        svg {
+          fill: $button-hover;
 
-  &:disabled {
-    background-color: $grey-50;
-    border: 2px solid $grey-50;
-    color: $grey-75;
-    cursor: default;
+          path {
+            fill: $button-hover;
+          }
+        }
+      }
 
-    &:hover {
-      &::before {
-        all: unset;
+      &:focus-visible {
+        @include focus-ring($border-radius: $radius-xs);
+
+        background-color: $pure-white;
       }
     }
 
-    svg {
-      fill: $grey-75;
+    &:disabled {
+      background-color: $grey-50;
+      border: 2px solid $grey-50;
+      color: $grey-75;
+      cursor: default;
 
-      path {
+      &:hover {
+        &::before {
+          all: unset;
+        }
+      }
+
+      svg {
         fill: $grey-75;
+
+        path {
+          fill: $grey-75;
+        }
       }
     }
-  }
-
-  &--tertiary:disabled {
-    background-color: transparent;
-    border-color: transparent;
-  }
 
-  &--destructive:disabled {
-    background-color: $white-100;
-    border-color: $destructive-hover-disabled;
-    color: $destructive-hover-disabled;
+    &--tertiary:disabled {
+      background-color: transparent;
+      border-color: transparent;
+    }
 
-    svg {
-      fill: $destructive-hover-disabled;
+    &--destructive:disabled {
+      background-color: $white-100;
+      border-color: $destructive-hover-disabled;
+      color: $destructive-hover-disabled;
 
-      path {
+      svg {
         fill: $destructive-hover-disabled;
+
+        path {
+          fill: $destructive-hover-disabled;
+        }
       }
     }
-  }
 
-  &--link:disabled {
-    border: 0;
-  }
+    &--link:disabled {
+      border: 0;
+    }
 
-  * {
-    margin: 0;
+    * {
+      margin: 0;
+    }
   }
-}
 
-.#{$px}-button__group {
-  display: flex;
-  gap: 0.25rem;
-  justify-content: center;
-  width: 100%;
+  .#{$px}-button__group {
+    display: flex;
+    gap: 0.25rem;
+    justify-content: center;
+    width: 100%;
+  }
 }