@hashicorp/design-system-components 1.8.1 → 2.0.0

package/app/styles/components/button.scss

@@ -9,25 +9,10 @@
 // notice: pseudo-classes for the states *must* follow the order link > visited > hover > focus > active
 //
 
-$hds-button-sizes: ( "small", "medium", "large" );
-$hds-button-border-radius: 5px;
-$hds-button-border-width: 1px;
-$hds-button-focus-border-width: 3px;
-
+@use "../mixins/button" as *;
 
 .hds-button {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: auto;
-  font-family: var(--token-typography-font-stack-text);
-  text-decoration: none;
-  border: $hds-button-border-width solid transparent; // We need this to be transparent for a11y
-  border-radius: $hds-button-border-radius;
-  outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
-  outline-color: transparent; // We need this to be transparent for a11y
-  isolation: isolate;
+  @include hds-button();
 
   // the <a> element behaves differently than a <button>
   @at-root a#{&} {
@@ -59,15 +44,7 @@ $hds-button-focus-border-width: 3px;
   &:disabled:hover,
   &[disabled]:hover,
   &.mock-disabled:hover {
-    color: var(--token-color-foreground-disabled);
-    background-color: var(--token-color-surface-faint);
-    border-color: var(--token-color-border-primary);
-    box-shadow: none;
-    cursor: not-allowed;
-
-    &::before {
-      border-color: transparent;
-    }
+    @include hds-button-state-disabled();
   }
 
   &.hds-button--width-full {
@@ -81,22 +58,7 @@ $hds-button-focus-border-width: 3px;
 
   &:focus,
   &.mock-focus {
-    box-shadow: none;
-
-    &::before {
-      // the position absolute of an element is computed from the inside of the border of the container
-      // so we have to take in account the border width of the pseudo-element container itself
-      $shift: $hds-button-border-width + $hds-button-focus-border-width;
-      position: absolute;
-      top: -$shift;
-      right: -$shift;
-      bottom: -$shift;
-      left: -$shift;
-      z-index: -1;
-      border: $hds-button-focus-border-width solid transparent;
-      border-radius: $hds-button-border-radius + $hds-button-focus-border-width;
-      content: "";
-    }
+    @include hds-button-state-focus();
   }
 }
 
@@ -114,232 +76,25 @@ $hds-button-focus-border-width: 3px;
 
 
 // SIZE
-
-// these values later may come from the design tokens
-$size-props: (
-  "small": (
-    "font-size": 0.8125rem, // 13px;
-    "line-height": 0.875rem, // 14px - we need to make it even (so we set it slighly larger than the font-size; notice: in Figma is 12px but this would cut some ascendants/descendants)
-    "min-height": 1.75rem,  // 28px
-    "padding": 0.375rem 0.6875rem, // 6px 11px - here we're taking into account the 1px border
-    "icon-size": 0.75rem, // 12px
-  ),
-  "medium": (
-    "font-size": 0.875rem, // 14px
-    "line-height": 1rem,// 16px
-    "min-height": 2.25rem, // 36px
-    "padding": 0.5625rem 0.9375rem, // 9px 15px - here we're taking into account the 1px border
-    "icon-size": 1rem, // 16px
-  ),
-  "large": (
-    "font-size": 1rem, // 16px
-    "line-height": 1.5rem, // 24px
-    "min-height": 3rem, // 48px
-    "padding": 0.6875rem 1.1875rem, // 11px 19px - here we're taking into account the 1px border
-    "icon-size": 1.5rem, // 24px
-  )
-);
-
-@each $size in $hds-button-sizes {
-  .hds-button--size-#{$size} {
-    min-height: map-get($size-props, $size, "min-height");
-    padding: map-get($size-props, $size, "padding");
-
-    .hds-button__icon {
-      width: map-get($size-props, $size, "icon-size");
-      height: map-get($size-props, $size, "icon-size");
-    }
-
-    .hds-button__text {
-      font-size: map-get($size-props, $size, "font-size");
-      line-height: map-get($size-props, $size, "line-height");
-    }
-  }
-}
-
+@include hds-button-size-classes("hds-button");
 
 // COLORS & STATES
 // Note: the order of the pseuo-selectors need to stay the way they are; it doesn't match the Figma file but it's the correct order for browsers to render the styles correctly.
 
 .hds-button--color-primary {
-  color: var(--token-color-foreground-high-contrast);
-  background-color: var(--token-color-palette-blue-200);
-  border-color: var(--token-color-palette-blue-300);
-  box-shadow: var(--token-elevation-low-box-shadow);
-
-  &:hover,
-  &.mock-hover {
-    color: var(--token-color-foreground-high-contrast);
-    background-color: var(--token-color-palette-blue-300);
-    border-color: var(--token-color-palette-blue-400);
-    cursor: pointer;
-  }
-
-  &:focus,
-  &.mock-focus {
-    color: var(--token-color-foreground-high-contrast);
-    background-color: var(--token-color-palette-blue-200);
-    border-color: var(--token-color-focus-action-internal);
-
-    &::before {
-      // the position absolute of an element is computed from the inside of the border of the container
-      // so we have to take in account the border width of the pseudo-element container itself
-      // plus for the primary button we want to have a 2px gap between the button and the focus
-      $shift: $hds-button-border-width + $hds-button-focus-border-width + 2px;
-      top: -$shift;
-      right: -$shift;
-      bottom: -$shift;
-      left: -$shift;
-      border-color: var(--token-color-focus-action-external);
-      border-radius: $hds-button-border-radius + $hds-button-focus-border-width + 2px;
-    }
-  }
-
-  &:active,
-  &.mock-active {
-    color: var(--token-color-foreground-high-contrast);
-    background-color: var(--token-color-palette-blue-400);
-    border-color: var(--token-color-palette-blue-400);
-    box-shadow: none;
-
-    &::before {
-      border-color: transparent;
-    }
-  }
+  @include hds-button-color-primary();
 }
 
 .hds-button--color-secondary {
-  color: var(--token-color-foreground-primary);
-  background-color: var(--token-color-surface-faint);
-  border-color: var(--token-color-border-strong);
-  box-shadow: var(--token-elevation-low-box-shadow);
-
-  &:hover,
-  &.mock-hover {
-    color: var(--token-color-foreground-primary);
-    background-color: var(--token-color-surface-primary);
-    border-color: var(--token-color-border-strong);
-    cursor: pointer;
-  }
-
-  &:focus,
-  &.mock-focus {
-    color: var(--token-color-foreground-primary);
-    background-color: var(--token-color-surface-faint);
-    border-color: var(--token-color-focus-action-internal);
-
-    &::before {
-      border-color: var(--token-color-focus-action-external);
-    }
-  }
-
-  &:active,
-  &.mock-active {
-    color: var(--token-color-foreground-primary);
-    background-color: var(--token-color-surface-interactive-active);
-    border-color: var(--token-color-border-strong);
-    box-shadow: none;
-
-    &::before {
-      border-color: transparent;
-    }
-  }
+  @include hds-button-color-secondary();
 }
 
 .hds-button--color-tertiary {
-  color: var(--token-color-foreground-action);
-  background-color: transparent;
-  border-color: transparent;
-
-  &:hover,
-  &.mock-hover {
-    color: var(--token-color-foreground-action-hover);
-    background-color: var(--token-color-surface-primary);
-    border-color: var(--token-color-border-strong);
-    cursor: pointer;
-  }
-
-  &:focus,
-  &.mock-focus {
-    color: var(--token-color-foreground-action);
-    border-color: var(--token-color-focus-action-internal);
-
-    &::before {
-      border-color: var(--token-color-focus-action-external);
-    }
-  }
-
-  &:active,
-  &.mock-active {
-    color: var(--token-color-foreground-action-active);
-    background-color: var(--token-color-surface-interactive-active);
-    border-color: var(--token-color-border-strong);
-    box-shadow: none;
-
-    &::before {
-      border-color: transparent;
-    }
-  }
-
-  //
-  // IMPORTANT: we need to use also the [disabled] selector because if the "disabled" attribute is applied to a "Button as link",
-  // the ":disabled" pseudo-selector is not applied to the element in the browser (rightly) because a link can't be disabled
-  // but from the product perspective there may be use cases where they need to have a "Button as link" that looks disabled anyway
-  //
-  &:disabled,
-  &[disabled],
-  &.mock-disabled,
-  &:disabled:focus,
-  &[disabled]:focus,
-  &.mock-disabled:focus,
-  &:disabled:hover,
-  &[disabled]:hover,
-  &.mock-disabled:hover {
-    background-color: transparent;
-    border-color: transparent;
-
-    &::before {
-      border-color: transparent;
-    }
-  }
+  @include hds-button-color-tertiary();
 }
 
 .hds-button--color-critical {
-  color: var(--token-color-foreground-critical-on-surface);
-  background-color: var(--token-color-surface-critical);
-  border-color: var(--token-color-foreground-critical-on-surface);
-  box-shadow: var(--token-elevation-low-box-shadow);
-
-  &:hover,
-  &.mock-hover {
-    color: var(--token-color-foreground-high-contrast);
-    background-color: var(--token-color-palette-red-300);
-    border-color: var(--token-color-palette-red-400);
-    cursor: pointer;
-  }
-
-  &:focus,
-  &.mock-focus {
-    color: var(--token-color-foreground-critical-on-surface);
-    background-color: var(--token-color-surface-critical);
-    border-color: var(--token-color-focus-critical-internal);
-
-    &::before {
-      border-color: var(--token-color-focus-critical-external);
-    }
-  }
-
-  &:active,
-  &.mock-active {
-    color: var(--token-color-foreground-high-contrast);
-    background-color: var(--token-color-palette-red-400);
-    border-color: var(--token-color-palette-red-400);
-    box-shadow: none;
-
-    &::before {
-      border-color: transparent;
-    }
-  }
+  @include hds-button-color-critical();
 }