@hashicorp/design-system-components 1.0.4 → 1.2.0

package/app/styles/components/icon-tile.scss

@@ -5,20 +5,19 @@
 //
 //
 
- $hds-icon-tile-sizes: ( 'small', 'medium', 'large' );
- $hds-icon-tile-types: ( 'object','resource','logo' );
- $hds-icon-tile-colors-products: ( 'boundary', 'consul', 'hcp', 'nomad', 'packer', 'terraform', 'vagrant', 'vault', 'waypoint' );
-
- $hds-icon-tile-border-width: 1px;
- $hds-icon-tile-box-shadow: 0px 1px 1px rgba(#656A76, 0.05);
+$hds-icon-tile-sizes: ( "small", "medium", "large" );
+$hds-icon-tile-types: ( "object","resource","logo" );
+$hds-icon-tile-colors-products: ( "boundary", "consul", "hcp", "nomad", "packer", "terraform", "vagrant", "vault", "waypoint" );
+$hds-icon-tile-border-width: 1px;
+$hds-icon-tile-box-shadow: 0 1px 1px rgba(#656a76, 0.05);
 
 
 .hds-icon-tile {
-  border-radius: 4px;
+  position: relative;
+  display: flex;
   border: $hds-icon-tile-border-width solid transparent;
+  border-radius: 4px;
   box-shadow: $hds-icon-tile-box-shadow;
-  display: flex;
-  position: relative;
 }
 
 .hds-icon-tile__icon,
@@ -28,14 +27,14 @@
 }
 
 .hds-icon-tile__extra {
+  position: absolute;
+  right: -6px;
+  bottom: -6px;
+  display: flex;
+  box-sizing: content-box; // the border is outside
   background-color: var(--token-color-surface-primary);
   border: 1px solid var(--token-color-border-primary);
-  bottom: -6px;
   box-shadow: $hds-icon-tile-box-shadow;
-  box-sizing: content-box; // the border is outside
-  right: -6px;
-  display: flex;
-  position: absolute;
 }
 
 .hds-icon-tile__extra-icon {
@@ -53,27 +52,27 @@ $size-props: (
     "border-radius": 5px,
     "icon-size": 1rem, // 16px
     "logo-size": 1.125rem, // 18px
-    'extra-size': 1.125rem, // 18px
-    'extra-border-radius': 4px,
-    'extra-icon-size': 0.75rem,
+    "extra-size": 1.125rem, // 18px
+    "extra-border-radius": 4px,
+    "extra-icon-size": 0.75rem,
   ),
   "medium": (
-      "size": 2.5rem, // 40px
-      "border-radius": 6px,
-      "icon-size": 1.5rem, // 24px
-      "logo-size": 1.75rem, // 28px
-      'extra-size': 1.5rem, // 24px
-      'extra-border-radius': 5px,
-      'extra-icon-size': 1rem,
+    "size": 2.5rem, // 40px
+    "border-radius": 6px,
+    "icon-size": 1.5rem, // 24px
+    "logo-size": 1.75rem, // 28px
+    "extra-size": 1.5rem, // 24px
+    "extra-border-radius": 5px,
+    "extra-icon-size": 1rem,
   ),
   "large": (
     "size": 3rem, // 48px
     "border-radius": 6px,
     "icon-size": 1.5rem, // 24px
     "logo-size": 2rem, // 32px
-    'extra-size': 1.5rem, // 24px
-    'extra-border-radius': 5px,
-    'extra-icon-size': 1rem,
+    "extra-size": 1.5rem, // 24px
+    "extra-border-radius": 5px,
+    "extra-icon-size": 1rem,
   )
 );
 
@@ -84,24 +83,24 @@ $size-props: (
     border-radius: map-get($size-props, $size, "border-radius");
 
     .hds-icon-tile__icon {
-      height: map-get($size-props, $size, "icon-size");
       width: map-get($size-props, $size, "icon-size");
+      height: map-get($size-props, $size, "icon-size");
     }
 
     .hds-icon-tile__logo {
-      height: map-get($size-props, $size, "logo-size");
       width: map-get($size-props, $size, "logo-size");
+      height: map-get($size-props, $size, "logo-size");
     }
 
     .hds-icon-tile__extra {
-      border-radius: map-get($size-props, $size, "extra-border-radius");
-      height: map-get($size-props, $size, "extra-size");
       width: map-get($size-props, $size, "extra-size");
+      height: map-get($size-props, $size, "extra-size");
+      border-radius: map-get($size-props, $size, "extra-border-radius");
     }
 
     .hds-icon-tile__extra-icon {
-      height: map-get($size-props, $size, "extra-icon-size");
       width: map-get($size-props, $size, "extra-icon-size");
+      height: map-get($size-props, $size, "extra-icon-size");
     }
   }
 }
@@ -118,26 +117,25 @@ $size-props: (
 // ICON - COLOR
 
 .hds-icon-tile--icon {
-
   &.hds-icon-tile--color-neutral {
+    color: var(--token-color-foreground-faint);
     background-color: var(--token-color-surface-faint);
     border-color: var(--token-color-border-primary);
-    color: var(--token-color-foreground-faint);
   }
 
   @each $product in $hds-icon-tile-colors-products {
-    @if ($product == 'hcp') {
+    @if ($product == "hcp") {
       // exception for HCP (we use neutral colors, we don't have specific product colors for foreground/background)
       &.hds-icon-tile--color-hcp {
+        color: var(--token-color-palette-#{$product}-brand);
         background-color: var(--token-color-surface-faint);
         border-color: var(--token-color-border-primary);
-        color: var(--token-color-palette-#{$product}-brand);
       }
     } @else {
       &.hds-icon-tile--color-#{$product} {
+        color: var(--token-color-#{$product}-foreground);
         background: linear-gradient(135deg, var(--token-color-#{$product}-gradient-faint-start) 0%, var(--token-color-#{$product}-gradient-faint-stop) 100%);
         border-color: var(--token-color-#{$product}-border);
-        color: var(--token-color-#{$product}-foreground);
       }
     }
   }

package/app/styles/components/link/inline.scss

@@ -13,23 +13,23 @@
   &:focus,
   &.mock-focus,
   &:focus-visible {
+    text-decoration: none;
     outline: 2px solid var(--token-color-focus-action-internal);
     outline-offset: 1px;
-    text-decoration: none;
   }
 }
 
 .hds-link-inline__icon {
   display: inline-block;
+  width: 1em;
   height: 1em;
   vertical-align: text-bottom; // don't use "middle" here or it will extend beyond the focus ring
-  width: 1em;
 
   .hds-link-inline--icon-leading > & {
     margin-right: 0.25em;
   }
 
-  .hds-link-inline--icon-trailing > &  {
+  .hds-link-inline--icon-trailing > & {
     margin-left: 0.25em;
   }
 }

package/app/styles/components/link/standalone.scss

@@ -8,22 +8,21 @@
 
 @use "../../mixins/focus-ring" as *;
 
-$hds-link-standalone-sizes: ( 'small', 'medium', 'large' );
-
+$hds-link-standalone-sizes: ( "small", "medium", "large" );
 $hds-link-standalone-focus-border-radius: 5px;
 $hds-link-standalone-border-width: 1px;
 
 .hds-link-standalone {
+  display: flex;
   align-items: center;
+  justify-content: center;
+  width: fit-content;
+  font-weight: var(--token-typography-font-weight-medium);
+  font-family: var(--token-typography-font-stack-text);
   background-color: transparent; // needs to exist for a11y
   border: $hds-link-standalone-border-width solid transparent; // needs to exist AND be transparent for a11y
-  display: flex;
-  font-family: var(--token-typography-font-stack-text);
-  font-weight: var(--token-typography-font-weight-medium);
-  justify-content: center;
   // notice: the text decoration is applied directly to the "text" container because of a bug in Safari (see https://github.com/hashicorp/design-system-components/issues/159)
   text-decoration-color: transparent;
-  width: fit-content;
 }
 
 .hds-link-standalone__text {
@@ -36,7 +35,7 @@ $hds-link-standalone-border-width: 1px;
     margin-left: 0.375rem;
   }
 
-  & +.hds-link-standalone__icon {
+  & + .hds-link-standalone__icon {
     margin-left: 0.375rem;
   }
 }
@@ -64,10 +63,9 @@ $size-props: (
 
 @each $size in $hds-link-standalone-sizes {
   .hds-link-standalone--size-#{$size} {
-
     .hds-link-standalone__icon {
-      height: map-get($size-props, $size, "icon-size");
       width: map-get($size-props, $size, "icon-size");
+      height: map-get($size-props, $size, "icon-size");
     }
 
     .hds-link-standalone__text {
@@ -89,7 +87,7 @@ $size-props: (
     color: var(--token-color-foreground-action-hover);
 
     .hds-link-standalone__text {
-      text-decoration-color: #4E81E8; // custom color by design
+      text-decoration-color: #4e81e8; // custom color by design
     }
   }
 
@@ -98,7 +96,7 @@ $size-props: (
     color: var(--token-color-foreground-action-active);
 
     .hds-link-standalone__text {
-      text-decoration-color: #396ED6; // custom color by design
+      text-decoration-color: #396ed6; // custom color by design
     }
 
     &::before {
@@ -113,7 +111,7 @@ $size-props: (
   &:hover,
   &.mock-hover {
     .hds-link-standalone__text {
-      text-decoration-color: #4D4D4F; // custom color by design
+      text-decoration-color: #4d4d4f; // custom color by design
     }
   }
 
@@ -122,7 +120,7 @@ $size-props: (
     color: var(--token-color-foreground-primary);
 
     .hds-link-standalone__text {
-      text-decoration-color: #6E7075; // custom color by design
+      text-decoration-color: #6e7075; // custom color by design
     }
 
     &::before {
@@ -153,4 +151,4 @@ $hds-link-standalone-focus-shift: 4px;
   &.hds-link-standalone--icon-position-trailing::before {
     left: -$shift-extra;
   }
-}
+}

package/app/styles/components/stepper/index.scss

@@ -1,2 +1,2 @@
-@use './step-indicator.scss';
-@use './task-indicator.scss';
+@use "./step-indicator.scss";
+@use "./task-indicator.scss";

package/app/styles/components/stepper/step-indicator.scss

@@ -9,15 +9,16 @@ $hds-stepper-indicator-step-size: 24px;
 
 // Base stepper indicator styling
 .hds-stepper-indicator-step {
-  height: $hds-stepper-indicator-step-size;
   position: relative;
   width: $hds-stepper-indicator-step-size;
+  height: $hds-stepper-indicator-step-size;
 }
 
 .hds-stepper-indicator-step__svg-hexagon {
-  filter: drop-shadow(0 1px 1px rgba(101, 106, 118, 0.05));
-  height: 100%;
   width: 100%;
+  height: 100%;
+  filter: drop-shadow(0 1px 1px rgba(101, 106, 118, 5%));
+
   path {
     fill: --status-fill-color;
     stroke: --status-stroke-color;
@@ -25,32 +26,32 @@ $hds-stepper-indicator-step-size: 24px;
 }
 
 .hds-stepper-indicator-step__status {
-  align-items: center;
-  display: flex;
-  justify-content: center;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .hds-stepper-indicator-step__icon {
-  color: --status-text-color;
   width: 12px;
   height: 12px;
+  color: --status-text-color;
 }
 
 .hds-stepper-indicator-step__text {
+  width: 20px;
+  overflow: hidden;
   color: --status-text-color;
-  font-family: var(--token-typography-font-stack-text);
   font-weight: var(--token-typography-font-weight-medium);
   font-size: 0.8125rem;
-  overflow: hidden;
+  font-family: var(--token-typography-font-stack-text);
+  white-space: nowrap;
   text-align: center;
   user-select: none;
-  white-space: nowrap;
-  width: 20px;
 }
 
 // STATUS
@@ -86,7 +87,8 @@ $non-interactive-props: (
   .hds-stepper-indicator-step--status-#{$status} {
     .hds-stepper-indicator-step__status {
       color: map-get($non-interactive-props, $status, "text-color");
-    };
+    }
+
     .hds-stepper-indicator-step__svg-hexagon path {
       fill: map-get($non-interactive-props, $status, "fill-color");
       stroke: map-get($non-interactive-props, $status, "stroke-color");
@@ -138,41 +140,44 @@ $status-props: (
 
 .hds-stepper-indicator-step--is-interactive {
   cursor: pointer;
-  
-  @each $status in $hds-stepper-indicator-step-statuses {    
+
+  @each $status in $hds-stepper-indicator-step-statuses {
     // For each status set the text, svg fill, and svg stroke color based on $status-props
     &.hds-stepper-indicator-step--status-#{$status} {
       .hds-stepper-indicator-step__status {
         color: map-get($status-props, $status, "text-color-default");
       }
+
       .hds-stepper-indicator-step__svg-hexagon path {
         fill: map-get($status-props, $status, "fill-color-default");
         stroke: map-get($status-props, $status, "stroke-color-default");
       }
-      
+
       &:hover,
       &.mock-hover {
         .hds-stepper-indicator-step__status {
           color: map-get($status-props, $status, "text-color-hover");
         }
+
         .hds-stepper-indicator-step__svg-hexagon {
           path {
             fill: map-get($status-props, $status, "fill-color-hover");
             stroke: map-get($status-props, $status, "stroke-color-hover");
-          };
+          }
         }
       }
-      
+
       &:active,
       &.mock-active {
         .hds-stepper-indicator-step__status {
           color: map-get($status-props, $status, "text-color-active");
         }
+
         .hds-stepper-indicator-step__svg-hexagon {
           path {
             fill: map-get($status-props, $status, "fill-color-active");
             stroke: map-get($status-props, $status, "stroke-color-active");
-          };
+          }
         }
       }
     }

package/app/styles/components/stepper/task-indicator.scss

@@ -9,62 +9,62 @@ $hds-stepper-indicator-task-size: 16px;
 
 // Determine states and corresponding styles
 $status-props: (
-    "incomplete": (
-        "color-default": var(--token-color-palette-neutral-300),
-        "color-hover": var(--token-color-palette-blue-300),
-        "color-active": var(--token-color-palette-blue-400),
-    ),
-    "progress": (
-        "color-default": var(--token-color-palette-blue-200),
-        "color-hover": var(--token-color-palette-blue-300),
-        "color-active": var(--token-color-palette-blue-400),
-    ),
-    "processing": (
-        "color-default": var(--token-color-palette-blue-200),
-        "color-hover": var(--token-color-palette-blue-300),
-        "color-active": var(--token-color-palette-blue-400),
-    ),
-    "complete": (
-        "color-default": var(--token-color-palette-green-200),
-        "color-hover": var(--token-color-palette-green-300),
-        "color-active": var(--token-color-palette-green-400),
-    )
+  "incomplete": (
+    "color-default": var(--token-color-palette-neutral-300),
+    "color-hover": var(--token-color-palette-blue-300),
+    "color-active": var(--token-color-palette-blue-400),
+  ),
+  "progress": (
+    "color-default": var(--token-color-palette-blue-200),
+    "color-hover": var(--token-color-palette-blue-300),
+    "color-active": var(--token-color-palette-blue-400),
+  ),
+  "processing": (
+    "color-default": var(--token-color-palette-blue-200),
+    "color-hover": var(--token-color-palette-blue-300),
+    "color-active": var(--token-color-palette-blue-400),
+  ),
+  "complete": (
+    "color-default": var(--token-color-palette-green-200),
+    "color-hover": var(--token-color-palette-green-300),
+    "color-active": var(--token-color-palette-green-400),
+  )
 );
 
 // Base styling for indicator::task
 .hds-stepper-indicator-task {
-    align-items: center;
-    color: var(--token-color-foreground-strong);
-    display: flex;
-    height: $hds-stepper-indicator-task-size;
-    justify-content: center;
-    position: relative;
-    width: $hds-stepper-indicator-task-size;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $hds-stepper-indicator-task-size;
+  height: $hds-stepper-indicator-task-size;
+  color: var(--token-color-foreground-strong);
 }
 
 .hds-stepper-indicator-task__icon {
-    height: 12px;
-    width: 12px;
+  width: 12px;
+  height: 12px;
 }
 
 .hds-stepper-indicator-task--is-interactive {
-    cursor: pointer;
+  cursor: pointer;
 
-    @each $status in $hds-stepper-indicator-task-statuses {
-        // For each status set the icon color based on the $status-props
-        &.hds-stepper-indicator-task--status-#{$status} {
-            color: map-get($status-props, $status, "color-default");
-            &:hover, 
-            &.mock-hover { 
-                color: map-get($status-props, $status, "color-hover");
-            };
-            &:active,
-            &.mock-active {
-                color: map-get($status-props, $status, "color-active");
-            };
-        }
-    }
-}
+  @each $status in $hds-stepper-indicator-task-statuses {
+    // For each status set the icon color based on the $status-props
+    &.hds-stepper-indicator-task--status-#{$status} {
+      color: map-get($status-props, $status, "color-default");
 
+      &:hover,
+      &.mock-hover {
+        color: map-get($status-props, $status, "color-hover");
+      }
 
+      &:active,
+      &.mock-active {
+        color: map-get($status-props, $status, "color-active");
+      }
+    }
+  }
+}
 

package/app/styles/components/tag.scss

@@ -11,47 +11,47 @@
 $hds-tag-border-radius: 50px;
 
 .hds-tag {
+  display: inline-flex;
   align-items: stretch;
-  background-color: var(--token-color-surface-interactive);
-  border: 1px solid var(--token-color-border-strong);
-  border-radius: $hds-tag-border-radius;
   color: var(--token-color-foreground-primary);
-  display: inline-flex;
-  font-family: var(--token-typography-font-stack-text);
-  font-size: 0.8125rem; // 13px
   font-weight: var(--token-typography-font-weight-medium);
+  font-size: 0.8125rem; // 13px
+  font-family: var(--token-typography-font-stack-text);
   line-height: 1rem; // 16px
   vertical-align: middle;
+  background-color: var(--token-color-surface-interactive);
+  border: 1px solid var(--token-color-border-strong);
+  border-radius: $hds-tag-border-radius;
 }
 
 .hds-tag__dismiss {
   flex: 0 0 auto;
+  margin: 0; // reset default button margin
+  padding: 6px 2px 6px 8px;
+  border: none; // reset default button border
   border-radius: inherit;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  border: none; // reset default button border
-  margin: 0; // reset default button margin
-  padding: 6px 2px 6px 8px;
 }
 
 .hds-tag__dismiss-icon {
-  color: var(--token-color-foreground-primary);
-  height: 12px;
   width: 12px;
+  height: 12px;
+  color: var(--token-color-foreground-primary);
 }
 
 .hds-tag__text,
 .hds-tag__link {
-  border-radius: inherit;
   flex: 1 0 0;
   padding: 3px 10px 5px 10px;
+  border-radius: inherit;
 }
 
 .hds-tag__dismiss ~ .hds-tag__text,
 .hds-tag__dismiss ~ .hds-tag__link {
+  padding: 3px 8px 5px 6px;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  padding: 3px 8px 5px 6px;
 }
 
 // INTERACTIVE ELEMENTS
@@ -67,7 +67,7 @@ $hds-tag-border-radius: 50px;
   }
 
   &:active,
-  &.mock-active{
+  &.mock-active {
     background-color: var(--token-color-surface-interactive-active);
   }
 
@@ -90,7 +90,7 @@ $hds-tag-border-radius: 50px;
     }
 
     &:active,
-    &.mock-active{
+    &.mock-active {
       color: var(--token-color-foreground-action-active);
     }
   }

package/app/styles/components/toast.scss

@@ -6,11 +6,11 @@
 //
 
 .hds-toast {
-  // we apply an elevation to the "alert/inline" element
-  box-shadow: var(--token-elevation-higher-box-shadow);
+  width: fit-content;
 
   // per design specs
   min-width: min(360px, 80vw);
   max-width: min(500px, 80vw);
-  width: fit-content;
+  // we apply an elevation to the "alert/inline" element
+  box-shadow: var(--token-elevation-higher-box-shadow);
 }

package/app/styles/mixins/_focus-ring.scss

@@ -27,20 +27,20 @@
 }
 
 @mixin hds-focus-ring-with-pseudo-element($top: 0, $right: 0, $bottom: 0, $left: 0, $radius: 5px, $color: action) {
-  isolation: isolate; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container)
+  position: relative;
   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;
-  position: relative;
+  isolation: isolate; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container)
 
   &::before {
-    border-radius: $radius;
-    bottom: $bottom;
-    content: '';
-    left: $left;
     position: absolute;
-    right: $right;
     top: $top;
+    right: $right;
+    bottom: $bottom;
+    left: $left;
     z-index: -1;
+    border-radius: $radius;
+    content: "";
   }
 
   // default focus for browsers that still rely on ":focus"
@@ -69,4 +69,4 @@
       box-shadow: none;
     }
   }
-}
+}