@hashicorp/design-system-components 1.0.4 → 1.2.0

package/app/styles/components/badge.scss

@@ -5,20 +5,19 @@
 //
 //
 
- $hds-badge-types: ( 'flat','inverted','outlined' );
- $hds-badge-colors-accents: ( 'highlight', 'success', 'warning', 'critical' );
- $hds-badge-sizes: ( 'small', 'medium', 'large' );
-
- $hds-badge-border-width: 1px;
+$hds-badge-types: ( "flat","inverted","outlined" );
+$hds-badge-colors-accents: ( "highlight", "success", "warning", "critical" );
+$hds-badge-sizes: ( "small", "medium", "large" );
+$hds-badge-border-width: 1px;
 
 
 .hds-badge {
-  align-items: center;
-  border-radius: 5px;
-  border: $hds-badge-border-width solid transparent;
   display: inline-flex;
+  align-items: center;
   max-width: 100%;
   vertical-align: middle;
+  border: $hds-badge-border-width solid transparent;
+  border-radius: 5px;
 }
 
 .hds-badge__icon {
@@ -28,8 +27,8 @@
 
 .hds-badge__text {
   flex: 1 0 0;
-  font-family: var(--token-typography-font-stack-text);
   font-weight: var(--token-typography-font-weight-medium);
+  font-family: var(--token-typography-font-stack-text);
 }
 
 
@@ -42,7 +41,7 @@ $size-props: (
     "gap": 0.25rem,
     "height": 1.25rem,
     "icon-size": 0.75rem,
-    "line-height": 1.23077, // 16px
+    "line-height": 1.2308, // 16px
     "padding-vertical": 0.125rem,
     "padding-horizontal": 0.375rem,
   ),
@@ -51,7 +50,7 @@ $size-props: (
     "gap": 0.25rem,
     "height": 1.5rem,
     "icon-size": 1rem,
-    "line-height": 1.23077, // 16px
+    "line-height": 1.2308, // 16px
     "padding-vertical": 0.25rem,
     "padding-horizontal": 0.5rem,
   ),
@@ -72,8 +71,8 @@ $size-props: (
     padding: calc(#{map-get($size-props, $size, "padding-vertical")} - #{$hds-badge-border-width}) calc(#{map-get($size-props, $size, "padding-horizontal")} - #{$hds-badge-border-width});
 
     .hds-badge__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-badge__text {
@@ -92,56 +91,56 @@ $size-props: (
 
 .hds-badge--color-neutral {
   &.hds-badge--type-filled {
-    background-color: var(--token-color-surface-strong);
     color: var(--token-color-foreground-primary);
+    background-color: var(--token-color-surface-strong);
   }
 
   &.hds-badge--type-inverted {
-    background-color: var(--token-color-foreground-faint);
     color: var(--token-color-foreground-high-contrast);
+    background-color: var(--token-color-foreground-faint);
   }
 
   &.hds-badge--type-outlined {
+    color: var(--token-color-foreground-primary);
     background-color: transparent;
     border-color: var(--token-color-foreground-faint);
-    color: var(--token-color-foreground-primary);
   }
 }
 
 .hds-badge--color-neutral-dark-mode {
   &.hds-badge--type-filled {
-    background-color: var(--token-color-foreground-faint);
     color: var(--token-color-foreground-high-contrast);
+    background-color: var(--token-color-foreground-faint);
   }
 
   &.hds-badge--type-inverted {
-    background-color: var(--token-color-surface-faint);
     color: var(--token-color-foreground-primary);
+    background-color: var(--token-color-surface-faint);
   }
 
   &.hds-badge--type-outlined {
+    color: var(--token-color-foreground-high-contrast);
     background-color: transparent;
     border-color: var(--token-color-palette-neutral-100);
-    color: var(--token-color-foreground-high-contrast);
   }
 }
 
 @each $color in $hds-badge-colors-accents {
   .hds-badge--color-#{$color} {
     &.hds-badge--type-filled {
-      background-color: var(--token-color-surface-#{$color});
       color: var(--token-color-foreground-#{$color}-on-surface);
+      background-color: var(--token-color-surface-#{$color});
     }
 
     &.hds-badge--type-inverted {
-      background-color: var(--token-color-foreground-#{$color});
       color: var(--token-color-foreground-high-contrast);
+      background-color: var(--token-color-foreground-#{$color});
     }
 
     &.hds-badge--type-outlined {
+      color: var(--token-color-foreground-#{$color});
       background-color: transparent;
       border-color: currentColor;
-      color: var(--token-color-foreground-#{$color});
     }
   }
-}
+}

package/app/styles/components/breadcrumb.scss

@@ -14,179 +14,179 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
 
 // MAIN CONTAINER (NAV)
 .hds-breadcrumb {
-    position: relative;
+  position: relative;
 }
 
 // LIST (OL)
 
 .hds-breadcrumb__list {
-    display: flex;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    .hds-breadcrumb--items-can-wrap & {
-        flex-wrap: wrap;
-    }
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  .hds-breadcrumb--items-can-wrap & {
+    flex-wrap: wrap;
+  }
 }
 
 .hds-breadcrumb__sublist {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
 // ITEM (LI)
 
 .hds-breadcrumb__item {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    min-width: 0;
-    position: relative;
-
-    .hds-breadcrumb__list > & {
-        &:not(:last-child)::after {
-            color: var(--token-color-palette-neutral-300);
-            content: "/";
-            padding: 0 8px;
-        }
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-width: 0;
+
+  .hds-breadcrumb__list > & {
+    &:not(:last-child)::after {
+      padding: 0 8px;
+      color: var(--token-color-palette-neutral-300);
+      content: "/";
     }
+  }
 
-    .hds-breadcrumb__sublist > & + & {
-        margin-top: 4px;
-    }
+  .hds-breadcrumb__sublist > & + & {
+    margin-top: 4px;
+  }
 }
 
 .hds-breadcrumb__item--is-truncation {
-    flex: none; // needed to avoid that the "flex" parent collapses the truncation element (it happens with very long strings and no-wrapping)
+  flex: none; // needed to avoid that the "flex" parent collapses the truncation element (it happens with very long strings and no-wrapping)
 }
 
 // LINK (A)
 
 .hds-breadcrumb__link {
-    align-items: center;
-    border-radius: $hds-breadcrumb-item-border-radius;
-    color: var(--token-color-foreground-faint);
-    display: flex;
-    flex-direction: row;
-    margin: 0 (-$hds-breadcrumb-item-visual-horizontal-padding); // we use a negative horizontal margin to counter-balance the horizonal padding (used to shift the focus from the content)
-    min-width: 0;
-    padding: 0 $hds-breadcrumb-item-visual-horizontal-padding;
-    // 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;
-
-    &:hover,
-    &.mock-hover {
-        color: var(--token-color-palette-neutral-600);
-
-        > .hds-breadcrumb__text {
-            text-decoration-color: currentColor;
-        }
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-width: 0;
+  margin: 0 (-$hds-breadcrumb-item-visual-horizontal-padding); // we use a negative horizontal margin to counter-balance the horizonal padding (used to shift the focus from the content)
+  padding: 0 $hds-breadcrumb-item-visual-horizontal-padding;
+  color: var(--token-color-foreground-faint);
+  border-radius: $hds-breadcrumb-item-border-radius;
+  // 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;
+
+  &:hover,
+  &.mock-hover {
+    color: var(--token-color-palette-neutral-600);
+
+    > .hds-breadcrumb__text {
+      text-decoration-color: currentColor;
     }
+  }
 
-    // we apply the focus directly to the element, without using a pseudo-element
-    @include hds-focus-ring-basic();
+  // we apply the focus directly to the element, without using a pseudo-element
+  @include hds-focus-ring-basic();
 
-    &:active,
-    &.mock-active {
-        color: var(--token-color-foreground-secondary);
+  &:active,
+  &.mock-active {
+    color: var(--token-color-foreground-secondary);
 
-        > .hds-breadcrumb__text {
-            text-decoration-color: currentColor;
-        }
+    > .hds-breadcrumb__text {
+      text-decoration-color: currentColor;
     }
+  }
 }
 
 // CURRENT
 
 .hds-breadcrumb__current {
-    align-items: center;
-    color: var(--token-color-foreground-strong);
-    display: flex;
-    flex-direction: row;
-    margin: 0 (-$hds-breadcrumb-item-visual-horizontal-padding); // we use a negative horizontal margin to counter-balance the horizonal padding (used to shift the focus from the content)
-    min-width: 0;
-    padding: 0 $hds-breadcrumb-item-visual-horizontal-padding;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-width: 0;
+  margin: 0 (-$hds-breadcrumb-item-visual-horizontal-padding); // we use a negative horizontal margin to counter-balance the horizonal padding (used to shift the focus from the content)
+  padding: 0 $hds-breadcrumb-item-visual-horizontal-padding;
+  color: var(--token-color-foreground-strong);
 }
 
 // SUB-ELEMENTS
 
 .hds-breadcrumb__icon {
-    flex: none;
-    margin-right: 6px;
-    height: 13px;
-    width: 13px;
+  flex: none;
+  width: 13px;
+  height: 13px;
+  margin-right: 6px;
 }
 
 .hds-breadcrumb__text {
-    font-family: var(--token-typography-font-stack-text);
-    font-size: 0.8125rem; // 13px
-    line-height: 1rem; // 16px
-    overflow: hidden;
-    // we use the extra vertical padding to force the height of the parent item to be exactly $hds-breadcrumb-item-height
-    padding: calc((#{$hds-breadcrumb-item-height} - 1rem) / 2) 0;
-    text-decoration: underline;
-    text-decoration-color: transparent;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    .hds-breadcrumb__sublist & {
-        white-space: normal;
-    }
+  // we use the extra vertical padding to force the height of the parent item to be exactly $hds-breadcrumb-item-height
+  padding: calc((#{$hds-breadcrumb-item-height} - 1rem) / 2) 0;
+  overflow: hidden;
+  font-size: 0.8125rem; // 13px
+  font-family: var(--token-typography-font-stack-text);
+  line-height: 1rem; // 16px
+  white-space: nowrap;
+  text-decoration: underline;
+  text-overflow: ellipsis;
+  text-decoration-color: transparent;
+
+  .hds-breadcrumb__sublist & {
+    white-space: normal;
+  }
 }
 
 // TRUNCATION
 
 .hds-breadcrumb__truncation-toggle {
-    align-items: center;
-    background-color: transparent;
-    border: 1px solid transparent; // We need this to be transparent for a11y
-    border-radius: $hds-breadcrumb-item-border-radius;
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: $hds-breadcrumb-item-height;
+  height: $hds-breadcrumb-item-height;
+  margin: 0 (-$hds-breadcrumb-item-visual-horizontal-padding); // the horizontal negative margin applied here is for visual balance of the spacing between items
+  padding: 0;
+  color: var(--token-color-foreground-faint);
+  background-color: transparent;
+  border: 1px solid transparent; // We need this to be transparent for a11y
+  border-radius: $hds-breadcrumb-item-border-radius;
+  outline: none; // TODO check with @melanie
+  cursor: pointer;
+
+  &:hover,
+  &.mock-hover {
     color: var(--token-color-foreground-faint);
-    cursor: pointer;
-    display: flex;
-    flex: none;
-    height: $hds-breadcrumb-item-height;
-    justify-content: center;
-    margin: 0 (-$hds-breadcrumb-item-visual-horizontal-padding); // the horizontal negative margin applied here is for visual balance of the spacing between items
-    outline: none; // TODO check with @melanie
-    padding: 0;
-    width: $hds-breadcrumb-item-height;
-
-    &:hover,
-    &.mock-hover {
-        border-color: var(--token-color-border-strong);
-        color: var(--token-color-foreground-faint);
-    }
-
-    // we apply the focus directly to the element, without using a pseudo-element
-    @include hds-focus-ring-basic();
+    border-color: var(--token-color-border-strong);
+  }
 
-    &:focus,
-    &.mock-focus {
-        background-color: transparent;
-        border: none; // important: we need to completely remove the border, of the inner box-shadow of the focus ring will be drawn inside the border
-    }
+  // we apply the focus directly to the element, without using a pseudo-element
+  @include hds-focus-ring-basic();
 
-    &:active,
-    &.mock-active {
-        background-color: var(--token-color-surface-interactive-active);
-        border-color: var(--token-color-border-strong);
-        color: var(--token-color-foreground-primary);
-    }
+  &:focus,
+  &.mock-focus {
+    background-color: transparent;
+    border: none; // important: we need to completely remove the border, of the inner box-shadow of the focus ring will be drawn inside the border
+  }
+
+  &:active,
+  &.mock-active {
+    color: var(--token-color-foreground-primary);
+    background-color: var(--token-color-surface-interactive-active);
+    border-color: var(--token-color-border-strong);
+  }
 }
 
 .hds-breadcrumb__truncation-content {
-    background-color: var(--token-color-surface-primary);
-    border-radius: 6px;
-    box-shadow: var(--token-surface-high-box-shadow);
-    left: -$hds-breadcrumb-item-visual-horizontal-padding;
-    margin-top: 4px;
-    max-width: 200px; // by design
-    padding: 6px 12px;
-    position: absolute;
-    top: 100%;
-    width: max-content;
-    z-index: 300; // this is the z-index used in Structure for this kind of things, I am reusing the same value
+  position: absolute;
+  top: 100%;
+  left: -$hds-breadcrumb-item-visual-horizontal-padding;
+  z-index: 300; // this is the z-index used in Structure for this kind of things, I am reusing the same value
+  width: max-content;
+  max-width: 200px; // by design
+  margin-top: 4px;
+  padding: 6px 12px;
+  background-color: var(--token-color-surface-primary);
+  border-radius: 6px;
+  box-shadow: var(--token-surface-high-box-shadow);
 }

package/app/styles/components/button-set.scss

@@ -5,9 +5,9 @@
 //
 
 .hds-button-set {
-    display: flex;
+  display: flex;
 
-    > * + * {
-        margin-left: 16px;
-    }
-}
+  > * + * {
+    margin-left: 16px;
+  }
+}