@hashicorp/design-system-components 1.0.4 → 1.1.0

package/app/styles/components/alert.scss

@@ -8,21 +8,21 @@
 @use "../mixins/focus-ring" as *;
 
 .hds-alert {
-  align-items: flex-start;
   display: flex;
+  align-items: flex-start;
 }
 
 // ICON
 
 .hds-alert__icon {
   flex: none;
+  width: 20px;
   height: 20px;
   margin-right: 12px;
-  width: 20px;
 
   .hds-alert--type-compact & {
-    height: 14px;
     width: 14px;
+    height: 14px;
   }
 }
 
@@ -35,17 +35,17 @@
 // TEXT (TITLE & DESCRIPTION)
 
 .hds-alert__text {
-  color: var(--token-color-foreground-warning-on-surface);
   display: flex;
   flex-direction: column;
-  font-family: var(--token-typography-body-200-font-family);
-  font-size: var(--token-typography-body-200-font-size);
   justify-content: center;
+  color: var(--token-color-foreground-warning-on-surface);
+  font-size: var(--token-typography-body-200-font-size);
+  font-family: var(--token-typography-body-200-font-family);
   line-height: var(--token-typography-body-200-line-height);
 
   .hds-alert--type-compact & {
-    font-family: var(--token-typography-body-100-font-family);
     font-size: var(--token-typography-body-100-font-size);
+    font-family: var(--token-typography-body-100-font-family);
     line-height: var(--token-typography-body-100-line-height);
   }
 }
@@ -69,15 +69,16 @@
     font-weight: var(--token-typography-font-weight-semibold);
   }
 
-  code, pre {
-    background-color: var(--token-color-surface-primary);
-    border: 1px solid var(--token-color-palette-neutral-200);
-    border-radius: 5px;
+  code,
+  pre {
     display: inline;
-    font-family: var(--token-typography-code-100-font-family);
+    padding: 1px 5px;
     font-size: 0.9em; // as discussed with designers, we reduce the size for optical/visual balance
+    font-family: var(--token-typography-code-100-font-family);
     line-height: 1em;
-    padding: 1px 5px;
+    background-color: var(--token-color-surface-primary);
+    border: 1px solid var(--token-color-palette-neutral-200);
+    border-radius: 5px;
   }
 
   // Notice: in the future this may become a "Link::Inline" component (for now we declare directly the same styles here)
@@ -86,9 +87,9 @@
 
     &:focus,
     &:focus-visible {
+      text-decoration: none;
       outline: 2px solid var(--token-color-focus-action-internal);
       outline-offset: 1px;
-      text-decoration: none;
     }
 
     &:hover {
@@ -104,8 +105,8 @@
 // ACTIONS
 
 .hds-alert__actions {
-  align-items: center;
   display: flex;
+  align-items: center;
 
   > * {
     margin-top: 16px;
@@ -119,14 +120,14 @@
 // DISMISS
 
 .hds-alert__dismiss {
-  background-color: transparent;
-  border: none;
-  color: var(--token-color-foreground-faint);
-  cursor: pointer;
   flex: none;
-  margin-left: 16px;
   margin-top: 2px; // for alignment with the main icon and text
+  margin-left: 16px;
   padding: 0;
+  color: var(--token-color-foreground-faint);
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
 
   .hds-alert--type-compact & {
     margin-top: 1px;
@@ -143,6 +144,7 @@
 
   &:active {
     color: var(--token-color-foreground-secondary);
+
     &::before {
       background-color: rgba(#dedfe3, 0.4);
       border: 1px solid var(--token-color-border-strong);
@@ -158,21 +160,22 @@
 }
 
 .hds-alert--type-inline {
-  border-radius: 6px;
+  padding: 16px;
   border-style: solid;
   border-width: 1px;
-  padding: 16px;
+  border-radius: 6px;
 }
 
 .hds-alert--type-compact {
   .hds-alert__icon {
-    margin-right: 8px;
     margin-top: 2px; // notice: the icon size for the "compact" type is 14px, not 20px, so this 2px extra are needed to reach the exact same height as the "description" text line-height
+    margin-right: 8px;
   }
 
   // extra safety
   .hds-alert__title {
     display: none;
+
     & + .hds-alert__description {
       margin-top: 0;
     }
@@ -182,10 +185,9 @@
 // COLORS (& TYPES)
 
 .hds-alert--color-neutral {
-
   &.hds-alert--type-page {
     background-color: var(--token-color-surface-faint);
-    box-shadow: 0px 1px 0px 0px var(--token-color-palette-alpha-300);
+    box-shadow: 0 1px 0 0 var(--token-color-palette-alpha-300);
   }
 
   &.hds-alert--type-inline {
@@ -204,10 +206,9 @@
 }
 
 .hds-alert--color-highlight {
-
   &.hds-alert--type-page {
     background-color: var(--token-color-surface-highlight);
-    box-shadow: 0px 1px 0px 0px var(--token-color-border-highlight);
+    box-shadow: 0 1px 0 0 var(--token-color-border-highlight);
   }
 
   &.hds-alert--type-inline {
@@ -215,16 +216,16 @@
     border-color: var(--token-color-border-highlight);
   }
 
-  .hds-alert__icon, .hds-alert__title {
+  .hds-alert__icon,
+  .hds-alert__title {
     color: var(--token-color-foreground-highlight-on-surface);
   }
 }
 
 .hds-alert--color-success {
-
   &.hds-alert--type-page {
     background-color: var(--token-color-surface-success);
-    box-shadow: 0px 1px 0px 0px var(--token-color-border-success);
+    box-shadow: 0 1px 0 0 var(--token-color-border-success);
   }
 
   &.hds-alert--type-inline {
@@ -232,16 +233,16 @@
     border-color: var(--token-color-border-success);
   }
 
-  .hds-alert__icon, .hds-alert__title {
+  .hds-alert__icon,
+  .hds-alert__title {
     color: var(--token-color-foreground-success-on-surface);
   }
 }
 
 .hds-alert--color-warning {
-
   &.hds-alert--type-page {
     background-color: var(--token-color-surface-warning);
-    box-shadow: 0px 1px 0px 0px var(--token-color-border-warning);
+    box-shadow: 0 1px 0 0 var(--token-color-border-warning);
   }
 
   &.hds-alert--type-inline {
@@ -249,16 +250,16 @@
     border-color: var(--token-color-border-warning);
   }
 
-  .hds-alert__icon, .hds-alert__title {
+  .hds-alert__icon,
+  .hds-alert__title {
     color: var(--token-color-foreground-warning-on-surface);
   }
 }
 
 .hds-alert--color-critical {
-
   &.hds-alert--type-page {
     background-color: var(--token-color-surface-critical);
-    box-shadow: 0px 1px 0px 0px var(--token-color-border-critical);
+    box-shadow: 0 1px 0 0 var(--token-color-border-critical);
   }
 
   &.hds-alert--type-inline {
@@ -266,7 +267,8 @@
     border-color: var(--token-color-border-critical);
   }
 
-  .hds-alert__icon, .hds-alert__title {
+  .hds-alert__icon,
+  .hds-alert__title {
     color: var(--token-color-foreground-critical-on-surface);
   }
 }

package/app/styles/components/avatar.scss

@@ -5,20 +5,20 @@
 //
 
 .hds-avatar {
-  align-items: center;
-  box-sizing: border-box;
   display: inline-flex;
-  height: 32px;
+  align-items: center;
   justify-content: center;
+  box-sizing: border-box;
   width: 32px;
+  height: 32px;
 
   img {
-    border-radius: 2px;
-    height: inherit;
     width: inherit;
+    height: inherit;
+    border-radius: 2px;
   }
 
   svg {
     display: inline-block;
   }
-}
+}

package/app/styles/components/badge-count.scss

@@ -4,21 +4,20 @@
 // properties within each class are sorted alphabetically
 //
 
-@use 'sass:math';
-
-$hds-badge-count-types: ( 'flat','inverted','outlined' );
-$hds-badge-count-sizes: ( 'small', 'medium', 'large' );
+@use "sass:math";
 
+$hds-badge-count-types: ( "flat","inverted","outlined" );
+$hds-badge-count-sizes: ( "small", "medium", "large" );
 $hds-badge-count-border-width: 1px;
 
 
 .hds-badge-count {
-  align-items: center;
-  border: $hds-badge-count-border-width solid transparent;
   display: inline-flex;
-  font-family: var(--token-typography-font-stack-text);
-  font-weight: var(--token-typography-font-weight-medium);
+  align-items: center;
   max-width: 100%;
+  font-weight: var(--token-typography-font-weight-medium);
+  font-family: var(--token-typography-font-stack-text);
+  border: $hds-badge-count-border-width solid transparent;
 }
 
 // SIZE
@@ -28,14 +27,14 @@ $size-props: (
   "small": (
     "font-size": 0.8125rem, // 13px
     "height": 1.25rem,
-    "line-height": 1.23077, // 16px
+    "line-height": 1.2308, // 16px
     "padding-vertical": 0.125rem,
     "padding-horizontal": 0.5rem,
   ),
   "medium": (
     "font-size": 0.8125rem, // 13px
     "height": 1.5rem,
-    "line-height": 1.23077, // 16px
+    "line-height": 1.2308, // 16px
     "padding-vertical": 0.25rem,
     "padding-horizontal": 0.75rem,
   ),
@@ -50,11 +49,11 @@ $size-props: (
 
 @each $size in $hds-badge-count-sizes {
   .hds-badge-count--size-#{$size} {
-    border-radius: math.div(map-get($size-props, $size, "height"), 2);
-    font-size: map-get($size-props, $size, "font-size");
-    line-height: map-get($size-props, $size, "line-height");
     min-height: map-get($size-props, $size, "height");
     padding: calc(#{map-get($size-props, $size, "padding-vertical")} - #{$hds-badge-count-border-width}) calc(#{map-get($size-props, $size, "padding-horizontal")} - #{$hds-badge-count-border-width});
+    font-size: map-get($size-props, $size, "font-size");
+    line-height: map-get($size-props, $size, "line-height");
+    border-radius: math.div(map-get($size-props, $size, "height"), 2);
   }
 }
 
@@ -63,36 +62,36 @@ $size-props: (
 
 .hds-badge-count--color-neutral {
   &.hds-badge-count--type-filled {
-    background-color: var(--token-color-surface-strong);
     color: var(--token-color-foreground-primary);
+    background-color: var(--token-color-surface-strong);
   }
 
   &.hds-badge-count--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-count--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-count--color-neutral-dark-mode {
   &.hds-badge-count--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-count--type-inverted {
-    background-color: var(--token-color-surface-faint);
     color: var(--token-color-foreground-primary);
+    background-color: var(--token-color-surface-faint);
   }
 
   &.hds-badge-count--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);
   }
-}
+}

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});
     }
   }
-}
+}