@hashicorp/design-system-components 4.15.0 → 4.16.0

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

@@ -7,6 +7,10 @@
  * Do not edit directly, this file was auto-generated.
  */
 :root {
+  --token-border-radius-x-small: 3px;
+  --token-border-radius-small: 5px;
+  --token-border-radius-medium: 6px;
+  --token-border-radius-large: 8px;
   --token-color-palette-blue-500: #1c345f;
   --token-color-palette-blue-400: #0046d1;
   --token-color-palette-blue-300: #0c56e9;
@@ -809,7 +813,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--type-card.hds-accordion-item--does-not-contain-interactive:not(.hds-accordion-item--is-static) {
   box-shadow: var(--token-surface-mid-box-shadow);
@@ -903,7 +907,7 @@
   font-family: var(--token-typography-font-stack-text);
   text-decoration: none;
   border: 1px solid transparent;
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   outline-style: solid;
   outline-color: transparent;
   isolation: isolate;
@@ -923,7 +927,7 @@
   left: -4px;
   z-index: -1;
   border: 3px solid transparent;
-  border-radius: 8px;
+  border-radius: calc(var(--token-border-radius-small) + 3px);
   content: "";
 }
 .hds-accordion-item__button--parent-contains-interactive:hover, .hds-accordion-item__button--parent-contains-interactive.mock-hover {
@@ -975,6 +979,320 @@
   border-bottom: none;
 }
 
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+.hds-advanced-table {
+  display: grid;
+  align-items: center;
+  width: 100%;
+  border-radius: var(--token-border-radius-medium);
+  border-spacing: 0;
+}
+
+.hds-advanced-table,
+.hds-advanced-table__th,
+.hds-advanced-table__td {
+  border: calc(1px / 2) solid var(--token-color-border-primary);
+}
+
+.hds-advanced-table__thead {
+  display: grid;
+  grid-column: 1/-1;
+  grid-template-columns: subgrid;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr {
+  display: contents;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th {
+  align-content: center;
+  height: 100%;
+  padding: 14px 16px 13px 16px;
+  color: var(--token-color-foreground-strong);
+  text-align: left;
+  background-color: var(--token-color-surface-strong);
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th:focus, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th.mock-hover {
+  position: relative;
+  outline-style: solid;
+  outline-color: transparent;
+  isolation: isolate;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th:focus::before, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th.mock-hover::before {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  z-index: -1;
+  border-radius: 5px;
+  content: "";
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th:focus:focus::before, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th:focus.mock-focus::before, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th.mock-hover:focus::before, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th.mock-hover.mock-focus::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th:focus:focus:not(:focus-visible)::before, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th.mock-hover:focus:not(:focus-visible)::before {
+  box-shadow: none;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th:focus:focus-visible::before, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th.mock-hover:focus-visible::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th:focus:focus:active::before, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th:focus.mock-focus.mock-active::before, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th.mock-hover:focus:active::before, .hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th.mock-hover.mock-focus.mock-active::before {
+  box-shadow: none;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th--align-center,
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__td--align-center {
+  text-align: center;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th--align-center .hds-advanced-table__th-content,
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__td--align-center .hds-advanced-table__th-content {
+  justify-content: center;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th--align-right,
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__td--align-right {
+  text-align: right;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__th--align-right .hds-advanced-table__th-content,
+.hds-advanced-table__thead .hds-advanced-table__tr .hds-advanced-table__td--align-right .hds-advanced-table__th-content {
+  justify-content: flex-end;
+}
+.hds-advanced-table__thead .hds-advanced-table__tr:first-of-type .hds-advanced-table__th:first-child {
+  border-top-left-radius: calc(var(--token-border-radius-medium) - 1px);
+}
+.hds-advanced-table__thead .hds-advanced-table__tr:first-of-type .hds-advanced-table__th:last-child {
+  border-top-right-radius: calc(var(--token-border-radius-medium) - 1px);
+}
+.hds-advanced-table__thead.hds-advanced-table__thead--sticky {
+  position: sticky;
+  top: -1px;
+  background-color: var(--token-color-surface-strong);
+  border-bottom: calc(3px - 1px / 2) solid var(--token-color-border-primary);
+}
+.hds-advanced-table__thead.hds-advanced-table__thead--sticky.hds-advanced-table__thead--is-pinned {
+  border-top: calc(1px / 2 + 1px) solid var(--token-color-border-primary);
+  border-bottom: 3px solid var(--token-color-border-primary);
+}
+.hds-advanced-table__thead.hds-advanced-table__thead--sticky.hds-advanced-table__thead--is-pinned .hds-advanced-table__tr:first-of-type .hds-advanced-table__th:first-child {
+  border-top-left-radius: 0;
+}
+.hds-advanced-table__thead.hds-advanced-table__thead--sticky.hds-advanced-table__thead--is-pinned .hds-advanced-table__tr:first-of-type .hds-advanced-table__th:last-child {
+  border-top-right-radius: 0;
+}
+
+.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;
+  padding: 0;
+  color: var(--token-color-foreground-faint);
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  position: relative;
+  outline-style: solid;
+  outline-color: transparent;
+  isolation: isolate;
+}
+.hds-advanced-table__th-button:hover, .hds-advanced-table__th-button.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;
+}
+.hds-advanced-table__th-button::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  border-radius: inherit;
+  content: "";
+}
+.hds-advanced-table__th-button:focus::before, .hds-advanced-table__th-button.mock-focus::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-advanced-table__th-button:focus:not(:focus-visible)::before {
+  box-shadow: none;
+}
+.hds-advanced-table__th-button:focus-visible::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-advanced-table__th-button:focus:active::before, .hds-advanced-table__th-button.mock-focus.mock-active::before {
+  box-shadow: none;
+}
+.hds-advanced-table__th-button:active, .hds-advanced-table__th-button.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);
+}
+.hds-advanced-table__th-button--is-sorted:hover, .hds-advanced-table__th-button--is-sorted.mock-hover {
+  color: var(--token-color-foreground-action-hover);
+}
+.hds-advanced-table__th-button--is-sorted:active, .hds-advanced-table__th-button--is-sorted.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;
+}
+
+.hds-advanced-table__tbody {
+  display: grid;
+  grid-column: 1/-1;
+  grid-template-columns: subgrid;
+  align-items: center;
+}
+.hds-advanced-table__tbody .hds-advanced-table__tr {
+  display: contents;
+  color: var(--token-color-foreground-primary);
+}
+.hds-advanced-table--striped .hds-advanced-table__tbody .hds-advanced-table__tr:nth-child(even) .hds-advanced-table__th,
+.hds-advanced-table--striped .hds-advanced-table__tbody .hds-advanced-table__tr:nth-child(even) .hds-advanced-table__td {
+  background-color: var(--token-color-surface-faint);
+}
+.hds-advanced-table__tbody .hds-advanced-table__tr:last-of-type .hds-advanced-table__th:first-child,
+.hds-advanced-table__tbody .hds-advanced-table__tr:last-of-type .hds-advanced-table__td:first-child {
+  border-bottom-left-radius: calc(var(--token-border-radius-medium) - 1px);
+}
+.hds-advanced-table__tbody .hds-advanced-table__tr:last-of-type .hds-advanced-table__td:last-child {
+  border-bottom-right-radius: calc(var(--token-border-radius-medium) - 1px);
+}
+.hds-advanced-table__tbody .hds-advanced-table__th,
+.hds-advanced-table__tbody .hds-advanced-table__td {
+  display: flex;
+  gap: 8px;
+  align-content: center;
+  align-items: flex-start;
+  justify-content: flex-start;
+  height: 100%;
+  text-align: left;
+  background-color: var(--token-color-surface-primary);
+}
+.hds-advanced-table__tbody .hds-advanced-table__th:focus,
+.hds-advanced-table__tbody .hds-advanced-table__td:focus {
+  position: relative;
+  outline-style: solid;
+  outline-color: transparent;
+  isolation: isolate;
+}
+.hds-advanced-table__tbody .hds-advanced-table__th:focus::before,
+.hds-advanced-table__tbody .hds-advanced-table__td:focus::before {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  z-index: -1;
+  border-radius: 5px;
+  content: "";
+}
+.hds-advanced-table__tbody .hds-advanced-table__th:focus:focus::before, .hds-advanced-table__tbody .hds-advanced-table__th:focus.mock-focus::before,
+.hds-advanced-table__tbody .hds-advanced-table__td:focus:focus::before,
+.hds-advanced-table__tbody .hds-advanced-table__td:focus.mock-focus::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-advanced-table__tbody .hds-advanced-table__th:focus:focus:not(:focus-visible)::before,
+.hds-advanced-table__tbody .hds-advanced-table__td:focus:focus:not(:focus-visible)::before {
+  box-shadow: none;
+}
+.hds-advanced-table__tbody .hds-advanced-table__th:focus:focus-visible::before,
+.hds-advanced-table__tbody .hds-advanced-table__td:focus:focus-visible::before {
+  box-shadow: var(--token-focus-ring-action-box-shadow);
+}
+.hds-advanced-table__tbody .hds-advanced-table__th:focus:focus:active::before, .hds-advanced-table__tbody .hds-advanced-table__th:focus.mock-focus.mock-active::before,
+.hds-advanced-table__tbody .hds-advanced-table__td:focus:focus:active::before,
+.hds-advanced-table__tbody .hds-advanced-table__td:focus.mock-focus.mock-active::before {
+  box-shadow: none;
+}
+.hds-advanced-table--density-short .hds-advanced-table__tbody .hds-advanced-table__th,
+.hds-advanced-table--density-short .hds-advanced-table__tbody .hds-advanced-table__td {
+  padding: 6px 16px 5px 16px;
+}
+.hds-advanced-table--density-medium .hds-advanced-table__tbody .hds-advanced-table__th,
+.hds-advanced-table--density-medium .hds-advanced-table__tbody .hds-advanced-table__td {
+  padding: 14px 16px 13px 16px;
+}
+.hds-advanced-table--density-tall .hds-advanced-table__tbody .hds-advanced-table__th,
+.hds-advanced-table--density-tall .hds-advanced-table__tbody .hds-advanced-table__td {
+  padding: 22px 16px 21px 16px;
+}
+.hds-advanced-table__tbody .hds-advanced-table__th--align-center,
+.hds-advanced-table__tbody .hds-advanced-table__td--align-center {
+  text-align: center;
+}
+.hds-advanced-table__tbody .hds-advanced-table__th--align-center .hds-advanced-table__th-content,
+.hds-advanced-table__tbody .hds-advanced-table__td--align-center .hds-advanced-table__th-content {
+  justify-content: center;
+}
+.hds-advanced-table__tbody .hds-advanced-table__th--align-right,
+.hds-advanced-table__tbody .hds-advanced-table__td--align-right {
+  text-align: right;
+}
+.hds-advanced-table__tbody .hds-advanced-table__th--align-right .hds-advanced-table__th-content,
+.hds-advanced-table__tbody .hds-advanced-table__td--align-right .hds-advanced-table__th-content {
+  justify-content: flex-end;
+}
+.hds-advanced-table--valign-top .hds-advanced-table__tbody .hds-advanced-table__th,
+.hds-advanced-table--valign-top .hds-advanced-table__tbody .hds-advanced-table__td {
+  align-items: flex-start;
+}
+.hds-advanced-table--valign-middle .hds-advanced-table__tbody .hds-advanced-table__th,
+.hds-advanced-table--valign-middle .hds-advanced-table__tbody .hds-advanced-table__td {
+  align-items: center;
+}
+.hds-advanced-table--valign-baseline .hds-advanced-table__tbody .hds-advanced-table__th,
+.hds-advanced-table--valign-baseline .hds-advanced-table__tbody .hds-advanced-table__td {
+  /**
+    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;
+}
+.hds-advanced-table__tbody .hds-advanced-table__tr--parent-row .hds-advanced-table__th:not(:first-child),
+.hds-advanced-table__tbody .hds-advanced-table__tr--parent-row .hds-advanced-table__td:not(:first-child) {
+  border-left: 0;
+}
+.hds-advanced-table__tbody .hds-advanced-table__tr--parent-row .hds-advanced-table__th:not(:last-child),
+.hds-advanced-table__tbody .hds-advanced-table__tr--parent-row .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--nested .hds-advanced-table__tr .hds-advanced-table__td {
+  background-color: var(--token-color-surface-faint);
+}
+.hds-advanced-table--nested .hds-advanced-table__tr.hds-advanced-table__tr--parent-row .hds-advanced-table__th, .hds-advanced-table--nested .hds-advanced-table__tr.hds-advanced-table__tr--parent-row .hds-advanced-table__td {
+  background-color: var(--token-color-surface-primary);
+}
+
+.hds-advanced-table__checkbox {
+  display: block;
+  margin: 2px 0;
+}
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
@@ -1021,7 +1339,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);
 }
 .hds-alert__description a:not([class*=hds-]) {
   color: var(--token-color-foreground-strong);
@@ -1063,7 +1381,7 @@
   padding: 16px;
   border-style: solid;
   border-width: 1px;
-  border-radius: 6px;
+  border-radius: var(--token-border-radius-medium);
 }
 
 .hds-alert--type-compact .hds-alert__icon {
@@ -1421,7 +1739,7 @@
   max-width: 100%;
   vertical-align: middle;
   border: 1px solid transparent;
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
 }
 
 .hds-badge__icon {
@@ -1678,7 +1996,7 @@
   margin: 0 -4px;
   padding: 0 4px;
   color: var(--token-color-foreground-faint);
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   text-decoration-color: transparent;
   outline-style: solid;
   outline-color: transparent;
@@ -1752,7 +2070,7 @@
   color: var(--token-color-foreground-faint);
   background-color: transparent;
   border: 1px solid transparent;
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   outline: none;
   cursor: pointer;
   outline-style: solid;
@@ -1791,7 +2109,7 @@
   max-width: 200px;
   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);
 }
 :where(.hds-breadcrumb__truncation-content[popover]) {
@@ -1825,7 +2143,7 @@
   font-family: var(--token-typography-font-stack-text);
   text-decoration: none;
   border: 1px solid transparent;
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   outline-style: solid;
   outline-color: transparent;
   isolation: isolate;
@@ -1865,7 +2183,7 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
   left: -4px;
   z-index: -1;
   border: 3px solid transparent;
-  border-radius: 8px;
+  border-radius: calc(var(--token-border-radius-small) + 3px);
   content: "";
 }
 
@@ -1902,7 +2220,7 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
   bottom: -6px;
   left: -6px;
   border-color: var(--token-color-focus-action-external);
-  border-radius: 10px;
+  border-radius: calc(var(--token-border-radius-small) + 3px + 2px);
 }
 .hds-button--color-primary:active, .hds-button--color-primary.mock-active {
   color: var(--token-color-foreground-high-contrast);
@@ -2099,7 +2417,7 @@ button.hds-button[href]::after {
 .hds-card__container {
   position: relative;
   background-color: #fff;
-  border-radius: 6px;
+  border-radius: var(--token-border-radius-medium);
 }
 
 .hds-card__container--level-surface-base {
@@ -2441,7 +2759,7 @@ button.hds-button[href]::after {
 }
 
 .hds-code-block--is-standalone {
-  border-radius: 6px;
+  border-radius: var(--token-border-radius-medium);
 }
 
 .hds-code-block--has-line-wrapping .hds-code-block__code,
@@ -2613,6 +2931,109 @@ button.hds-button[href]::after {
   font-style: italic;
 }
 
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+.hds-code-editor--theme-dark {
+  --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;
+}
+
+.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.hds-code-editor--is-standalone {
+  border-radius: var(--token-border-radius-medium);
+}
+.hds-code-editor.hds-code-editor--is-full-screen {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  border: none;
+  border-radius: 0;
+}
+.hds-code-editor.hds-code-editor--is-full-screen .hds-code-editor__editor {
+  max-height: unset;
+}
+.hds-code-editor .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 .hds-code-editor__header-content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+.hds-code-editor .hds-code-editor__title {
+  color: var(--hds-code-editor-color-foreground-primary);
+}
+.hds-code-editor .hds-code-editor__title + .hds-code-editor__description {
+  margin-top: 4px;
+}
+.hds-code-editor .hds-code-editor__description {
+  color: var(--hds-code-editor-color-foreground-faint);
+}
+.hds-code-editor .hds-code-editor__title + .hds-code-editor__header-generic,
+.hds-code-editor .hds-code-editor__description + .hds-code-editor__header-generic {
+  margin-top: 12px;
+}
+.hds-code-editor .hds-code-editor__header-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.hds-code-editor .hds-code-editor__header-actions .hds-button {
+  outline-offset: 0;
+}
+.hds-code-editor .hds-code-editor__editor {
+  flex-grow: 1;
+  overflow: auto;
+}
+.hds-code-editor .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-code-editor .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);
+}
+.hds-code-editor .hds-button:focus, .hds-code-editor .hds-button:hover {
+  background-color: var(--hds-code-editor-color-surface-primary);
+}
+.hds-code-editor .hds-button:focus .hds-button__icon, .hds-code-editor .hds-button:hover .hds-button__icon {
+  color: var(--hds-code-editor-color-foreground-primary);
+}
+.hds-code-editor .hds-button:active {
+  background-color: var(--hds-code-editor-color-surface-interactive-active);
+}
+.hds-code-editor .hds-button .hds-button__icon {
+  color: var(--hds-code-editor-color-foreground-primary);
+}
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
@@ -2656,7 +3077,7 @@ button.hds-button[href]::after {
   padding: 6px 4px;
   text-align: left;
   border: 1px solid transparent;
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   cursor: pointer;
 }
 .hds-copy-snippet::before {
@@ -2963,9 +3384,10 @@ button.hds-button[href]::after {
   color: var(--token-color-foreground-primary);
   background-color: var(--token-color-surface-faint);
   border: 1px solid var(--token-color-border-strong);
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   outline-style: solid;
   outline-color: transparent;
+  isolation: isolate;
 }
 .hds-dropdown-toggle-icon:hover, .hds-dropdown-toggle-icon.mock-hover {
   background-color: var(--token-color-surface-interactive);
@@ -2983,7 +3405,7 @@ button.hds-button[href]::after {
   left: -4px;
   z-index: -1;
   border: 3px solid transparent;
-  border-radius: 8px;
+  border-radius: calc(var(--token-border-radius-small) + 3px);
   content: "";
 }
 .hds-dropdown-toggle-icon:focus::before, .hds-dropdown-toggle-icon.mock-focus::before {
@@ -3011,7 +3433,7 @@ button.hds-button[href]::after {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 3px;
+  border-radius: calc(var(--token-border-radius-small) - 2px);
 }
 .hds-dropdown-toggle-icon__wrapper img {
   width: 100%;
@@ -3045,7 +3467,7 @@ button.hds-button[href]::after {
   font-family: var(--token-typography-font-stack-text);
   text-decoration: none;
   border: 1px solid transparent;
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   outline-style: solid;
   outline-color: transparent;
   isolation: isolate;
@@ -3061,7 +3483,7 @@ button.hds-button[href]::after {
   left: -4px;
   z-index: -1;
   border: 3px solid transparent;
-  border-radius: 8px;
+  border-radius: calc(var(--token-border-radius-small) + 3px);
   content: "";
 }
 .hds-dropdown-toggle-button:disabled, .hds-dropdown-toggle-button.mock-disabled, .hds-dropdown-toggle-button:disabled:focus, .hds-dropdown-toggle-button.mock-disabled:focus, .hds-dropdown-toggle-button:disabled:hover, .hds-dropdown-toggle-button.mock-disabled:hover {
@@ -3174,7 +3596,7 @@ button.hds-button[href]::after {
   bottom: -6px;
   left: -6px;
   border-color: var(--token-color-focus-action-external);
-  border-radius: 10px;
+  border-radius: calc(var(--token-border-radius-small) + 3px + 2px);
 }
 .hds-dropdown-toggle-button--color-primary:active, .hds-dropdown-toggle-button--color-primary.mock-active {
   color: var(--token-color-foreground-high-contrast);
@@ -3256,7 +3678,7 @@ button.hds-button[href]::after {
   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);
 }
 :where(.hds-dropdown__content[popover]) {
@@ -3399,7 +3821,7 @@ button.hds-button[href]::after {
   bottom: 0;
   left: 10px;
   z-index: -1;
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   content: "";
 }
 .hds-dropdown-list-item--variant-interactive a:hover, .hds-dropdown-list-item--variant-interactive a.mock-hover,
@@ -3824,7 +4246,7 @@ button.hds-button[href]::after {
   background-position: 15px 50%;
   background-size: var(--token-form-text-input-background-image-size);
   border: 1px solid var(--token-color-border-strong);
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   box-shadow: var(--token-elevation-low-box-shadow);
   cursor: pointer;
 }
@@ -4274,7 +4696,7 @@ button.hds-button[href]::after {
 }
 .hds-form-select[multiple] option, .hds-form-select[size] option {
   margin: 2px auto;
-  border-radius: 3px;
+  border-radius: var(--token-border-radius-x-small);
 }
 .hds-form-select[multiple] option:hover, .hds-form-select[size] option:hover {
   color: var(--token-color-foreground-action);
@@ -4987,7 +5409,7 @@ button.hds-button[href]::after {
   position: relative;
   display: flex;
   border: 1px solid transparent;
-  border-radius: 4px;
+  border-radius: var(--token-border-radius-medium);
 }
 
 .hds-icon-tile__icon,
@@ -5291,7 +5713,7 @@ button.hds-button[href]::after {
   bottom: 0;
   left: -5px;
   z-index: -1;
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   content: "";
 }
 .hds-link-standalone:focus::before, .hds-link-standalone.mock-focus::before {
@@ -5333,7 +5755,7 @@ button.hds-button[href]::after {
   max-height: 95vh;
   inset: 0;
   margin: auto;
-  border-radius: 8px;
+  border-radius: var(--token-border-radius-large);
   box-shadow: var(--token-surface-overlay-box-shadow);
 }
 .hds-modal:not([open]) {
@@ -5790,7 +6212,7 @@ button.hds-button[href]::after {
   max-height: none;
   padding: 16px;
   background: var(--token-color-surface-primary);
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   box-shadow: var(--token-surface-higher-box-shadow);
   opacity: 0;
   transition: opacity 0.3s;
@@ -6209,7 +6631,7 @@ button.hds-button[href]::after {
   border-color: var(--token-color-palette-neutral-500);
   color: var(--token-color-foreground-high-contrast);
   background-color: var(--token-color-palette-neutral-700);
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
 }
 .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover, .hds-side-nav__dropdown .hds-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *).mock-hover,
 .hds-side-nav__dropdown .hds-dropdown-toggle-button:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *):hover,
@@ -6528,7 +6950,7 @@ button.hds-button[href]::after {
   border-color: var(--token-color-palette-neutral-500);
   color: var(--token-color-foreground-high-contrast);
   background-color: var(--token-color-palette-neutral-700);
-  border-radius: 5px;
+  border-radius: var(--token-border-radius-small);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -6844,7 +7266,7 @@ button.hds-button[href]::after {
   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;
 }
@@ -7061,8 +7483,7 @@ button.hds-button[href]::after {
  */
 .hds-table {
   width: 100%;
-  border: 1px solid var(--token-color-border-primary);
-  border-radius: 6px;
+  border-radius: var(--token-border-radius-medium);
   border-spacing: 0;
 }
 
@@ -7070,28 +7491,19 @@ button.hds-button[href]::after {
   table-layout: fixed;
 }
 
+.hds-table,
+.hds-table__th,
+.hds-table__td {
+  border: calc(1px / 2) solid var(--token-color-border-primary);
+}
+
 .hds-table__thead .hds-table__tr {
   color: var(--token-color-foreground-strong);
   background-color: var(--token-color-surface-strong);
 }
 .hds-table__thead .hds-table__tr .hds-table__th {
-  position: relative;
   padding: 14px 16px 13px 16px;
   text-align: left;
-  border-top: none;
-  border-right: none;
-  border-bottom: 1px solid var(--token-color-border-primary);
-  border-left: none;
-}
-.hds-table__thead .hds-table__tr .hds-table__th + .hds-table__th::before {
-  position: absolute;
-  top: 6px;
-  bottom: 6px;
-  left: -1px;
-  width: 1px;
-  background-color: var(--token-color-border-primary);
-  content: "";
-  pointer-events: none;
 }
 .hds-table__thead .hds-table__tr .hds-table__th--align-center,
 .hds-table__thead .hds-table__tr .hds-table__td--align-center {
@@ -7110,10 +7522,10 @@ button.hds-button[href]::after {
   justify-content: flex-end;
 }
 .hds-table__thead .hds-table__tr:first-of-type .hds-table__th:first-child {
-  border-top-left-radius: 5px;
+  border-top-left-radius: calc(var(--token-border-radius-medium) - 1px);
 }
 .hds-table__thead .hds-table__tr:first-of-type .hds-table__th:last-child {
-  border-top-right-radius: 5px;
+  border-top-right-radius: calc(var(--token-border-radius-medium) - 1px);
 }
 
 .hds-table__th--is-selectable {
@@ -7139,7 +7551,7 @@ button.hds-button[href]::after {
   color: var(--token-color-foreground-faint);
   background-color: transparent;
   border: 1px solid transparent;
-  border-radius: 3px;
+  border-radius: var(--token-border-radius-x-small);
   position: relative;
   outline-style: solid;
   outline-color: transparent;
@@ -7202,24 +7614,16 @@ button.hds-button[href]::after {
 .hds-table--striped .hds-table__tbody .hds-table__tr:nth-child(even) {
   background-color: var(--token-color-surface-faint);
 }
-.hds-table__tbody .hds-table__tr:last-of-type .hds-table__th,
-.hds-table__tbody .hds-table__tr:last-of-type .hds-table__td {
-  border-bottom: none;
-}
 .hds-table__tbody .hds-table__tr:last-of-type .hds-table__th:first-child,
 .hds-table__tbody .hds-table__tr:last-of-type .hds-table__td:first-child {
-  border-bottom-left-radius: 5px;
+  border-bottom-left-radius: calc(var(--token-border-radius-medium) - 1px);
 }
 .hds-table__tbody .hds-table__tr:last-of-type .hds-table__td:last-child {
-  border-bottom-right-radius: 5px;
+  border-bottom-right-radius: calc(var(--token-border-radius-medium) - 1px);
 }
 .hds-table__tbody .hds-table__th,
 .hds-table__tbody .hds-table__td {
   text-align: left;
-  border-top: none;
-  border-right: none;
-  border-bottom: 1px solid var(--token-color-border-primary);
-  border-left: none;
 }
 .hds-table--density-short .hds-table__tbody .hds-table__th,
 .hds-table--density-short .hds-table__tbody .hds-table__td {