@hashicorp/design-system-components 4.15.0 → 4.17.0

package/dist/styles/@hashicorp/design-system-components.scss

@@ -13,6 +13,7 @@
 // Notice: this list can be automatically edited by the Ember blueprint, please don't remove the start/end comments
 // START COMPONENTS CSS FILES IMPORTS
 @use "../components/accordion";
+@use "../components/advanced-table";
 @use "../components/alert";
 @use "../components/app-footer";
 @use "../components/app-frame";
@@ -26,6 +27,7 @@
 @use "../components/button-set";
 @use "../components/card";
 @use "../components/code-block";
+@use "../components/code-editor";
 @use "../components/copy";
 @use "../components/dialog-primitive";
 @use "../components/disclosure-primitive";

package/dist/styles/@hashicorp/design-system-power-select-overrides.scss

@@ -75,15 +75,15 @@
     &.ember-basic-dropdown-content--in-place {
       margin-top: -3px;
       border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
-      border-bottom-right-radius: 6px;
-      border-bottom-left-radius: 6px;
+      border-bottom-right-radius: var(--token-border-radius-medium);
+      border-bottom-left-radius: var(--token-border-radius-medium);
       box-shadow: var(--token-elevation-high-box-shadow), var(--token-elevation-high-box-shadow);
     }
 
     &.ember-basic-dropdown-content--above {
       margin-top: 3px;
       border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
-      border-radius: 6px 6px 0 0;
+      border-radius: var(--token-border-radius-medium) var(--token-border-radius-medium) 0 0;
       box-shadow: none;
     }
   }

package/dist/styles/components/accordion.scss

@@ -67,7 +67,7 @@
 .hds-accordion-item--type-card {
   --hds-accordion-item-focus-ring-offset: 0;
   background: var(--token-color-surface-primary);
-  border-radius: 6px;
+  border-radius: var(--token-border-radius-medium);
 
   &.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static) {
     box-shadow: var(--token-surface-mid-box-shadow);

package/dist/styles/components/advanced-table.scss

@@ -0,0 +1,353 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// ADVANCED TABLE
+//
+//
+
+@use "../mixins/focus-ring" as *;
+
+$hds-advanced-table-border-radius: var(--token-border-radius-medium);
+$hds-advanced-table-border-width: 1px;
+$hds-advanced-table-inner-border-radius: calc(#{$hds-advanced-table-border-radius} - #{$hds-advanced-table-border-width});
+$hds-advanced-table-border-color: var(--token-color-border-primary);
+$hds-advanced-table-header-height: 48px;
+$hds-advanced-table-cell-padding-medium: 14px 16px 13px 16px; // the 1px difference is to account for the bottom border
+$hds-advanced-table-cell-padding-short: 6px 16px 5px 16px; // the 1px difference is to account for the bottom border
+$hds-advanced-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px difference is to account for the bottom border
+
+// ADVANCED TABLE
+
+.hds-advanced-table {
+  display: grid;
+  align-items: center;
+  width: 100%;
+  border-radius: $hds-advanced-table-border-radius;
+  border-spacing: 0;
+}
+
+// table border
+
+.hds-advanced-table,
+.hds-advanced-table__th,
+.hds-advanced-table__td {
+  border: calc(#{$hds-advanced-table-border-width} / 2) solid
+    $hds-advanced-table-border-color;
+}
+
+// ----------------------------------------------------------------
+
+// TABLE HEADER
+
+.hds-advanced-table__thead {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+
+  .hds-advanced-table__tr {
+    display: contents;
+
+    .hds-advanced-table__th {
+      align-content: center;
+      height: 100%;
+      padding: $hds-advanced-table-cell-padding-medium;
+      color: var(--token-color-foreground-strong);
+      text-align: left;
+      background-color: var(--token-color-surface-strong);
+
+      &:focus,
+      &.mock-hover {
+        @include hds-focus-ring-with-pseudo-element(
+          $top: -1px,
+          $right: -1px,
+          $bottom: -1px,
+          $left: -1px
+        );
+      }
+    }
+
+    // horizontal alignment
+
+    .hds-advanced-table__th--align-center,
+    .hds-advanced-table__td--align-center {
+      text-align: center;
+
+      .hds-advanced-table__th-content {
+        justify-content: center;
+      }
+    }
+
+    .hds-advanced-table__th--align-right,
+    .hds-advanced-table__td--align-right {
+      text-align: right;
+
+      .hds-advanced-table__th-content {
+        justify-content: flex-end;
+      }
+    }
+
+    // border radius: target first and last th elements in the row
+
+    &:first-of-type {
+      .hds-advanced-table__th:first-child {
+        border-top-left-radius: $hds-advanced-table-inner-border-radius;
+      }
+
+      .hds-advanced-table__th:last-child {
+        border-top-right-radius: $hds-advanced-table-inner-border-radius;
+      }
+    }
+  }
+
+  // sticky header
+  &.hds-advanced-table__thead--sticky {
+    position: sticky;
+    top: -1px;
+    background-color: var(--token-color-surface-strong);
+    // need to subtract width of cell top border for default state, otherwise border of header+cell is 3.5px
+    border-bottom: calc(3px - #{$hds-advanced-table-border-width} / 2) solid $hds-advanced-table-border-color;
+  }
+
+  &.hds-advanced-table__thead--sticky.hds-advanced-table__thead--is-pinned {
+    // need to add 1px to offset `top: -1px`
+    border-top: calc(#{$hds-advanced-table-border-width} / 2 + 1px) solid
+      $hds-advanced-table-border-color;
+    border-bottom: 3px solid $hds-advanced-table-border-color;
+
+    .hds-advanced-table__tr {
+      &:first-of-type {
+        .hds-advanced-table__th:first-child {
+          border-top-left-radius: 0;
+        }
+
+        .hds-advanced-table__th:last-child {
+          border-top-right-radius: 0;
+        }
+      }
+    }
+  }
+}
+
+// multi-select (isSelectable=true)
+.hds-advanced-table__th-content {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.hds-advanced-table__th-button {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin: -2px 0; // this is necessary to compensate for the height of the button being 24px while the line height of the text is 20px (the overall height of the cell shoud be 48px and we want to keep the cell's padding as is for consistency with Figma)
+  padding: 0;
+  color: var(--token-color-foreground-faint);
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 3px;
+
+  &:hover,
+  &.mock-hover {
+    color: var(--token-color-foreground-primary);
+    background-color: var(--token-color-surface-interactive);
+    border-color: var(--token-color-border-strong);
+    box-shadow: var(--token-elevation-low-box-shadow);
+    cursor: pointer;
+  }
+
+  @include hds-focus-ring-with-pseudo-element($radius: inherit);
+
+  &: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;
+  }
+}
+
+.hds-advanced-table__th-button--is-sorted {
+  color: var(--token-color-foreground-action);
+
+  &:hover,
+  &.mock-hover {
+    color: var(--token-color-foreground-action-hover);
+  }
+
+  &:active,
+  &.mock-active {
+    color: var(--token-color-foreground-action-active);
+  }
+}
+
+.hds-advanced-table__th-button-aria-label-hidden-segment {
+  display: none;
+}
+
+.hds-advanced-table__th-button--expand {
+  align-self: flex-start;
+}
+
+// ----------------------------------------------------------------
+
+// TABLE BODY
+
+.hds-advanced-table__tbody {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  align-items: center;
+
+  .hds-advanced-table__tr {
+    display: contents;
+    color: var(--token-color-foreground-primary);
+
+    // striped rows
+
+    .hds-advanced-table--striped &:nth-child(even) {
+      .hds-advanced-table__th,
+      .hds-advanced-table__td {
+        background-color: var(--token-color-surface-faint);
+      }
+    }
+
+    // border radius: target first th (scope of row) and td, and last td elements in the last row
+
+      &:last-of-type{
+      .hds-advanced-table__th:first-child,
+      .hds-advanced-table__td:first-child {
+        border-bottom-left-radius: $hds-advanced-table-inner-border-radius;
+      }
+
+      // a <th> will never be last child, only first child
+      .hds-advanced-table__td:last-child {
+        border-bottom-right-radius: $hds-advanced-table-inner-border-radius;
+      }
+    }
+  }
+
+  .hds-advanced-table__th,
+  .hds-advanced-table__td {
+    display: flex;
+    gap: 8px;
+    align-content: center;
+    align-items: flex-start;
+    justify-content: flex-start;
+    height: 100%;
+    font-weight: var(--token-typography-font-weight-regular);
+    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);
+    text-align: left;
+    background-color: var(--token-color-surface-primary);
+
+    &:focus {
+      @include hds-focus-ring-with-pseudo-element(
+        $top: -1px,
+        $right: -1px,
+        $bottom: -1px,
+        $left: -1px
+      );
+    }
+
+    // density
+
+    .hds-advanced-table--density-short & {
+      padding: $hds-advanced-table-cell-padding-short;
+    }
+
+    .hds-advanced-table--density-medium & {
+      padding: $hds-advanced-table-cell-padding-medium;
+    }
+
+    .hds-advanced-table--density-tall & {
+      padding: $hds-advanced-table-cell-padding-tall;
+    }
+  }
+
+  // horizontal alignment
+
+  .hds-advanced-table__th--align-center,
+  .hds-advanced-table__td--align-center {
+    text-align: center;
+
+    .hds-advanced-table__th-content {
+      justify-content: center;
+    }
+  }
+
+  .hds-advanced-table__th--align-right,
+  .hds-advanced-table__td--align-right {
+    text-align: right;
+
+    .hds-advanced-table__th-content {
+      justify-content: flex-end;
+    }
+  }
+
+  // vertical alignment (applied at table level)
+
+  .hds-advanced-table__th,
+  .hds-advanced-table__td {
+    .hds-advanced-table--valign-top & {
+        align-items: flex-start;
+    }
+
+    .hds-advanced-table--valign-middle & {
+        align-items: center;
+    }
+
+    .hds-advanced-table--valign-baseline & {
+      /**
+        setting to center because in FlexBox, when you set align-items: baseline, it also aligns content to the top - unlike display: table-cell which aligns the content to the center
+      
+        we decided as a team to match the Table behavior instead of actually setting align-items to baseline to mitigate the difference.
+      */
+        align-items: center;
+    }
+  }
+
+  // nested rows
+
+  .hds-advanced-table__tr--parent-row {
+    .hds-advanced-table__th:not(:first-child),
+    .hds-advanced-table__td:not(:first-child) {
+      border-left:0
+    }
+
+    .hds-advanced-table__th:not(:last-child),
+    .hds-advanced-table__td:not(:last-child) {
+      border-right:0
+    }
+  }
+}
+
+.hds-advanced-table--nested {
+  .hds-advanced-table__tr {
+    .hds-advanced-table__th, .hds-advanced-table__td {
+      background-color: var(--token-color-surface-faint);  
+    }
+  }
+
+  .hds-advanced-table__tr.hds-advanced-table__tr--parent-row {
+    .hds-advanced-table__th, .hds-advanced-table__td {
+      background-color: var(--token-color-surface-primary);
+    }
+  }
+}
+
+// ----------------------------------------------------------------
+
+// TABLE CONTENT
+
+.hds-advanced-table__checkbox {
+  display: block;
+  margin: 2px 0;
+}

package/dist/styles/components/alert.scss

@@ -59,7 +59,7 @@
     line-height: 1em;
     background-color: var(--token-color-surface-primary);
     border: 1px solid var(--token-color-palette-neutral-200);
-    border-radius: 5px;
+    border-radius: var(--token-border-radius-small);
   }
 
   // Default styling for bare HTML links not using HDS::Link components
@@ -116,7 +116,7 @@
   padding: 16px;
   border-style: solid;
   border-width: 1px;
-  border-radius: 6px;
+  border-radius: var(--token-border-radius-medium);
 }
 
 .hds-alert--type-compact {

package/dist/styles/components/app-header.scss

@@ -36,7 +36,7 @@
     font-family: var(--token-typography-display-200-font-family);
     line-height: var(--token-typography-display-200-line-height);
     background-color: var(--token-color-surface-faint);
-    border-radius: 3px;
+    border-radius: var(--token-border-radius-x-small);
     transform: translateY(-200%);
     transition: 0.6s ease-in-out;
 

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

@@ -67,7 +67,7 @@ $hds-badge-count-size-props: (
 .hds-badge-count--color-neutral {
   &.hds-badge-count--type-filled {
     color: var(--token-color-foreground-primary);
-    background-color: var(--token-color-surface-strong);
+    background-color: var(--token-color-palette-neutral-200);
   }
 
   &.hds-badge-count--type-inverted {

package/dist/styles/components/badge.scss

@@ -34,12 +34,22 @@ $hds-badge-colors-props: (
 
 
 .hds-badge {
+  // Redefine color values to increase contrast
+  --token-color-surface-success: var(--token-color-palette-green-100);
+  --token-color-foreground-success-on-surface: var(--token-color-palette-green-400);
+  --token-color-surface-warning: var(--token-color-palette-amber-100);
+  --token-color-foreground-warning-on-surface: var(--token-color-palette-amber-400);
+  --token-color-surface-critical: var(--token-color-palette-red-100);
+  --token-color-foreground-critical-on-surface: var(--token-color-palette-red-400);
+  --token-color-surface-highlight: var(--token-color-palette-purple-100);
+  --token-color-foreground-highlight-on-surface: var(--token-color-palette-purple-400);
+
   display: inline-flex;
   align-items: center;
   max-width: 100%;
   vertical-align: middle;
   border: $hds-badge-border-width solid transparent;
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
 }
 
 .hds-badge__icon {
@@ -111,7 +121,7 @@ $hds-badge-size-props: (
 .hds-badge--color-neutral {
   &.hds-badge--type-filled {
     color: var(--token-color-foreground-primary);
-    background-color: var(--token-color-surface-strong);
+    background-color: var(--token-color-palette-neutral-200);
   }
 
   &.hds-badge--type-inverted {

package/dist/styles/components/breadcrumb.scss

@@ -12,7 +12,7 @@
 @use "../mixins/focus-ring" as *;
 
 $hds-breadcrumb-item-height: 28px;
-$hds-breadcrumb-item-border-radius: 5px;
+$hds-breadcrumb-item-border-radius: var(--token-border-radius-small);
 $hds-breadcrumb-item-visual-horizontal-padding: 4px;
 
 // MAIN CONTAINER (NAV)
@@ -187,7 +187,7 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
   max-width: 200px; // by design
   padding: 6px 12px;
   background-color: var(--token-color-surface-primary);
-  border-radius: 6px;
+  border-radius: var(--token-border-radius-medium);
   box-shadow: var(--token-surface-high-box-shadow);
 
   // the "popover" attributes comes with pre-defined styling so we need to override it

package/dist/styles/components/card/container.scss

@@ -9,7 +9,7 @@
 
 $hds-card-container-style: ( "surface", "elevation" );
 $hds-card-container-levels: ( "base", "mid", "high" );
-$hds-card-container-border-radius: 6px;
+$hds-card-container-border-radius: var(--token-border-radius-medium);
 
 .hds-card__container {
   position: relative;

package/dist/styles/components/code-block/index.scss

@@ -46,7 +46,7 @@ $hds-code-block-code-padding: 16px;
 
 // isStandalone
 .hds-code-block--is-standalone {
-  border-radius: 6px;
+  border-radius: var(--token-border-radius-medium);
 }
 
 // hasLineWrapping

package/dist/styles/components/code-editor/index.scss

@@ -0,0 +1,113 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+//
+// CODE-EDITOR
+//
+
+@use "theme";
+
+.hds-code-editor {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: var(--hds-code-editor-color-surface-primary);
+  border: 1px solid var(--hds-code-editor-color-border-strong);
+
+  &.hds-code-editor--is-standalone {
+    border-radius: var(--token-border-radius-medium);
+  }
+
+  &.hds-code-editor--is-full-screen {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    border: none;
+    border-radius: 0;
+
+    .hds-code-editor__editor {
+      max-height: unset;
+    }
+  }
+
+  .hds-code-editor__header {
+    display: flex;
+    gap: 12px;
+    align-items: start;
+    padding: 16px;
+    background-color: var(--hds-code-editor-color-surface-faint);
+    border-bottom: 1px solid var(--hds-code-editor-color-border-primary);
+  }
+
+  .hds-code-editor__header-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  .hds-code-editor__title {
+    color: var(--hds-code-editor-color-foreground-primary);
+
+    + .hds-code-editor__description {
+      margin-top: 4px;
+    }
+  }
+
+  .hds-code-editor__description {
+    color: var(--hds-code-editor-color-foreground-faint);
+  }
+
+  .hds-code-editor__title + .hds-code-editor__header-generic,
+  .hds-code-editor__description + .hds-code-editor__header-generic {
+    margin-top: 12px;
+  }
+
+  .hds-code-editor__header-actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    .hds-button {
+      outline-offset: 0;
+    }
+  }
+
+  .hds-code-editor__editor {
+    flex-grow: 1;
+    overflow: auto;
+  }
+
+  .hds-code-editor__loader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 164px;
+    color: var(--hds-code-editor-color-foreground-primary);
+    background-color: var(--hds-code-editor-color-surface-primary);
+  }
+
+  .hds-button {
+    color: var(--hds-code-editor-color-foreground-primary);
+    background-color: var(--hds-code-editor-color-surface-faint);
+    border: 1px solid var(--hds-code-editor-color-border-strong);
+
+    &:focus,
+    &:hover {
+      background-color: var(--hds-code-editor-color-surface-primary);
+      
+      .hds-button__icon {
+        color: var(--hds-code-editor-color-foreground-primary);
+      }
+    }
+
+    &:active {
+      background-color: var(--hds-code-editor-color-surface-interactive-active)
+    }
+
+    .hds-button__icon {
+      color: var(--hds-code-editor-color-foreground-primary);
+    }
+  }
+}

package/dist/styles/components/code-editor/theme.scss

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+// THEMING
+
+.hds-code-editor--theme-dark {
+  // COLORS
+
+  // Base UI colors:
+  --hds-code-editor-color-border-strong: rgba(178, 182, 189, 40%);
+  --hds-code-editor-color-border-primary: rgba(178, 182, 189, 20%);
+  --hds-code-editor-color-foreground-primary: #d5d7db;
+  --hds-code-editor-color-foreground-faint: #878a8f;
+  --hds-code-editor-color-foreground-high-contrast: #fff;
+  --hds-code-editor-color-surface-faint: #15181e;
+  --hds-code-editor-color-surface-primary: #0D0E12;
+  --hds-code-editor-color-surface-interactive-active: #2B303C;
+}

package/dist/styles/components/copy/snippet.scss

@@ -36,7 +36,7 @@
   padding: 6px 4px;
   text-align: left;
   border: 1px solid transparent;
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   cursor: pointer;
 }
 

package/dist/styles/components/dropdown.scss

@@ -42,6 +42,7 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
   border-radius: $hds-dropdown-toggle-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; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container)
 
   &:hover,
   &.mock-hover {
@@ -79,7 +80,7 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 3px; // $hds-dropdown-toggle-border-radius - 1px padding - 1px border
+  border-radius: calc(#{$hds-dropdown-toggle-border-radius} - 2px); // $hds-dropdown-toggle-border-radius - (1px padding + 1px border) (= 3px)
 
   img {
     width: 100%;
@@ -214,7 +215,7 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
   min-width: 200px;
   max-width: 400px;
   background-color: var(--token-color-surface-primary);
-  border-radius: 6px;
+  border-radius: var(--token-border-radius-medium);
   box-shadow: var(--token-surface-high-box-shadow);
 
   // the "popover" attributes comes with pre-defined styling so we need to override it
@@ -369,7 +370,7 @@ $hds-dropdown-toggle-border-radius: $hds-button-border-radius;
       bottom: 0;
       left: 10px;
       z-index: -1;
-      border-radius: 5px;
+      border-radius: var(--token-border-radius-small);
       content: "";
     }
 

package/dist/styles/components/form/select.scss

@@ -80,7 +80,7 @@
 
     option {
       margin: 2px auto;
-      border-radius: 3px;
+      border-radius: var(--token-border-radius-x-small);
 
       &:hover {
         color: var(--token-color-foreground-action);