@salt-ds/lab 1.0.0-alpha.101 → 1.0.0-alpha.103

package/css/salt-lab.css

@@ -2,16 +2,16 @@
 .salt-density-medium,
 .salt-density-low,
 .salt-density-touch {
-  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 2));
+  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-spacing-100) * 2));
 }
 .salt-density-high {
-  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 3));
+  --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-spacing-100) * 3));
 }
 .saltAppHeader {
   --appHeader-background: var(--salt-container-primary-background);
   --appHeader-separable-bar: var(--salt-separable-secondary-borderColor);
   --appHeader-shadow: var(--saltAppHeader-shadow, var(--salt-overlayable-shadow-region));
-  --appHeader-padding: var(--salt-size-container-spacing);
+  --appHeader-padding: var(--salt-spacing-300);
   --appHeader-paddingLeft: 8px;
   --appHeader-paddingRight: var(--appHeader-padding);
   --saltToolbar-width: auto;
@@ -92,243 +92,12 @@
   flex-shrink: 0;
 }
 
-/* src/breadcrumbs/Breadcrumb.css */
-.saltBreadcrumb {
-  --breadcrumbs-crumb-color: var(--saltBreadcrumbs-crumb-color, var(--salt-actionable-primary-foreground));
-  --breadcrumbs-crumb-color-hover: var(--saltBreadcrumbs-crumb-color-hover, var(--salt-actionable-primary-foreground-hover));
-  --breadcrumbs-crumb-color-active: var(--saltBreadcrumbs-crumb-color-active, var(--salt-actionable-primary-foreground-active));
-  --breadcrumbs-crumb-icon-color: var(--saltBreadcrumbs-crumb-icon-color, var(--breadcrumbs-crumb-color));
-  --breadcrumbs-crumb-marginLeft: 0px;
-}
-.saltBreadcrumb {
-  padding: 0px;
-}
-.saltBreadcrumb-regular {
-  display: flex;
-  gap: calc(var(--salt-size-unit) / 2);
-  align-items: center;
-  color: var(--breadcrumbs-crumb-color);
-}
-.saltBreadcrumb-regular:visited {
-  color: currentColor;
-}
-.saltBreadcrumb-regular:visited .saltBreadcrumb-icon {
-  color: currentColor;
-}
-.saltBreadcrumb-regular:hover {
-  color: var(--breadcrumbs-crumb-color-hover);
-}
-.saltBreadcrumb-regular:hover .saltBreadcrumb-icon {
-  color: var(--breadcrumbs-crumb-color-hover);
-}
-.saltBreadcrumb-regular:active {
-  color: var(--breadcrumbs-crumb-color-active);
-}
-.saltBreadcrumb-regular:active .saltBreadcrumb-icon {
-  color: var(--breadcrumbs-crumb-color-active);
-}
-.saltBreadcrumb-currentLevel {
-  color: var(--breadcrumbs-crumb-color);
-}
-.saltBreadcrumb-icon {
-  color: var(--breadcrumbs-crumb-icon-color);
-  margin-left: var(--saltBreadcrumbs-crumb-marginLeft, var(--breadcrumbs-crumb-marginLeft));
-}
-.saltBreadcrumb-justifyContentCenter {
-  justify-content: center;
-}
-.saltBreadcrumb-text {
-  text-decoration: underline;
-}
-
-/* src/breadcrumbs/Breadcrumbs.css */
-.saltBreadcrumbs-ol {
-  --breadcrumbs-ol-gap: var(--salt-size-unit);
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 0;
-  margin: 0;
-  gap: var(--breadcrumbs-ol-gap);
-}
-.saltBreadcrumbs-li {
-  --breadcrumbs-li-marginRight: 0px;
-  --breadcrumbs-li-padding: 0px;
-  flex: 0 1 auto;
-  list-style: none;
-  margin-right: var(--breadcrumbs-li-marginRight);
-  padding: var(--breadcrumbs-li-padding);
-}
-.saltBreadcrumbs-separator {
-  --breadcrumbs-separator-marginRight: 0px;
-  display: flex;
-  margin-right: var(--breadcrumbs-separator-marginRight);
-  user-select: none;
-}
-.saltBreadcrumbs-ol-wrap {
-  flex-wrap: wrap;
-}
-.saltBreadcrumbs-ol-wrap .saltBreadcrumbs-li,
-.saltBreadcrumbs-ol-wrap .saltBreadcrumbs-separator {
-  --breadcrumbs-ol-wrap-li-marginBottom: 0px;
-  margin-bottom: var(--breadcrumbs-ol-wrap-li-marginBottom);
-}
-
-/* src/breadcrumbs-next/BreadcrumbNext.css */
-.saltBreadcrumbNext {
-  align-items: center;
-  display: inline-flex;
-  flex: 0 1 auto;
-  gap: var(--salt-spacing-100);
-  list-style: none;
-  min-width: 0;
-}
-.saltBreadcrumbNext-current,
-.saltBreadcrumbNext-label,
-.saltBreadcrumbNext-link,
-.saltBreadcrumbNext-trigger {
-  min-width: 0;
-}
-.saltBreadcrumbNext-trigger {
-  align-items: center;
-  color: var(--salt-content-primary-foreground);
-  display: inline-flex;
-  font-family: var(--salt-text-label-fontFamily);
-  font-size: var(--salt-text-label-fontSize);
-  font-weight: var(--salt-text-fontWeight);
-  gap: var(--salt-spacing-50);
-  letter-spacing: var(--salt-text-letterSpacing);
-  line-height: var(--salt-text-label-lineHeight);
-  max-width: 100%;
-  text-decoration: var(--salt-typography-textDecoration-none);
-}
-.saltBreadcrumbNext-link:not(.saltBreadcrumbNext-current) {
-  text-decoration: var(--salt-typography-textDecoration-underline);
-}
-.saltBreadcrumbNext-link:not(.saltBreadcrumbNext-current):hover {
-  text-decoration: var(--salt-typography-textDecoration-none);
-}
-.saltBreadcrumbNext-link:not(.saltBreadcrumbNext-current):active {
-  text-decoration: var(--salt-typography-textDecoration-underline);
-}
-.saltBreadcrumbNext-trigger:focus {
-  outline: var(--salt-focused-outline);
-  text-decoration: var(--salt-typography-textDecoration-none);
-}
-.saltBreadcrumbNext-current {
-  cursor: var(--salt-cursor-text);
-}
-.saltBreadcrumbNext-separator {
-  --saltIcon-color: var(--salt-content-secondary-foreground);
-  --saltIcon-size: var(--salt-size-icon);
-  flex: 0 0 auto;
-}
-
-/* src/breadcrumbs-next/BreadcrumbsNext.css */
-.saltBreadcrumbsNext {
-  display: block;
-  margin-block: var(--salt-spacing-25);
-}
-.saltBreadcrumbsNext-ol {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  gap: var(--salt-spacing-100);
-  justify-content: flex-start;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.saltBreadcrumbsNext-ol-wrap {
-  flex-wrap: wrap;
-}
-.saltBreadcrumbsNext-collapseItem {
-  align-items: center;
-  display: inline-flex;
-  flex: 0 1 auto;
-  gap: var(--salt-spacing-100);
-  list-style: none;
-  min-width: 0;
-}
-.saltBreadcrumbsNext-collapseButton[aria-expanded=true] {
-  --saltButton-background: var(--salt-actionable-subtle-background-active);
-  --saltButton-background-hover: var(--salt-actionable-subtle-background-active);
-  --saltButton-text-color: var(--salt-actionable-subtle-foreground-active);
-  --saltButton-text-color-hover: var(--salt-actionable-subtle-foreground-active);
-  --saltButton-borderColor: var(--salt-actionable-subtle-borderColor-active);
-  --saltButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-active);
-  cursor: var(--salt-cursor-active);
-}
-.saltBreadcrumbsNext-disclosure {
-  background: var(--salt-container-primary-background);
-  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
-  overflow: hidden;
-  overflow-y: auto;
-  min-width: 10em;
-  position: relative;
-  z-index: var(--salt-zIndex-flyover);
-  box-shadow: var(--salt-overlayable-shadow-popout);
-  box-sizing: border-box;
-  border-radius: var(--salt-palette-corner, 0);
-}
-.saltBreadcrumbsNext-disclosureList {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.saltBreadcrumbsNext-disclosureListItem {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.saltBreadcrumbsNext-disclosureItem {
-  color: var(--salt-content-primary-foreground);
-  background: var(--salt-selectable-background);
-  font-size: var(--salt-text-fontSize);
-  font-weight: var(--salt-text-fontWeight);
-  font-family: var(--salt-text-fontFamily);
-  line-height: var(--salt-text-lineHeight);
-  letter-spacing: var(--salt-text-letterSpacing);
-  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
-  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);
-  display: flex;
-  gap: var(--salt-spacing-100);
-  position: relative;
-  cursor: var(--salt-cursor-hover);
-  box-sizing: border-box;
-  flex-shrink: 0;
-  text-decoration: none;
-  width: 100%;
-}
-.saltBreadcrumbsNext-disclosureItem:focus-visible {
-  outline: var(--salt-focused-outline);
-  outline-offset: calc(var(--salt-size-fixed-100) * -2);
-}
-.saltBreadcrumbsNext-disclosureItem:hover {
-  outline: none;
-}
-.saltBreadcrumbsNext-disclosureItem:hover,
-.saltBreadcrumbsNext-disclosureItem:focus-visible {
-  background: var(--salt-selectable-background-hover);
-}
-.saltBreadcrumbsNext-disclosureItem:active {
-  background: var(--salt-selectable-background-selected);
-  box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);
-}
-.saltBreadcrumbsNext-disclosureItem[aria-disabled=true],
-.saltBreadcrumbsNext-disclosureItem[aria-disabled=true]:active {
-  background: var(--salt-selectable-background-disabled);
-  color: var(--salt-content-primary-foreground-disabled);
-  cursor: var(--salt-cursor-disabled);
-  box-shadow: none;
-}
-
 /* src/button-bar/ButtonBar.css */
 .saltButtonBar {
   width: 100%;
   display: flex;
   justify-content: flex-end;
-  gap: var(--salt-size-unit);
+  gap: var(--salt-spacing-100);
 }
 .saltButtonBar-alignLeft {
   justify-content: flex-start;
@@ -355,8 +124,8 @@
   user-select: none;
   white-space: nowrap;
   text-overflow: ellipsis;
-  border-top: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle-selected) transparent;
-  border-bottom: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle-selected) transparent;
+  border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
   box-sizing: border-box;
 }
 .saltCascadingMenuItem-menuItemText {
@@ -367,7 +136,7 @@
   margin-left: 8px;
 }
 .saltCascadingMenuItem-menuItemStartAdornmentContainer {
-  margin-right: var(--salt-size-unit);
+  margin-right: var(--salt-spacing-100);
   width: 12px;
 }
 .saltCascadingMenuItem-menuItemAdornmentHidden {
@@ -397,15 +166,15 @@
 /* src/color-chooser/ColorChooser.css */
 .saltColorChooser-overlayButtonSwatch {
   margin-right: 10px;
-  height: calc(2 * var(--salt-size-unit));
-  width: calc(2 * var(--salt-size-unit));
+  height: calc(2 * var(--salt-spacing-100));
+  width: calc(2 * var(--salt-spacing-100));
 }
 .saltColorChooser-overlayButtonSwatchWithBorder {
   border: 0.2px solid var(--salt-editable-borderColor);
 }
 .saltColorChooser-overlayButtonSwatchTransparent {
-  height: calc(var(--salt-size-container-spacing) - 2px) !important;
-  width: calc(var(--salt-size-container-spacing) - 2px) !important;
+  height: calc(var(--salt-spacing-300) - 2px) !important;
+  width: calc(var(--salt-spacing-300) - 2px) !important;
   border: 1px solid var(--salt-sentiment-negative-foreground-decorative);
   background:
     linear-gradient(
@@ -428,14 +197,14 @@
   justify-content: flex-start;
 }
 .saltColorChooser-overlayButtonHiddenLabel {
-  width: var(--salt-size-container-spacing);
+  width: var(--salt-spacing-300);
   display: contents;
 }
 .saltColorChooser-defaultButton {
   float: right;
   background: transparent;
   padding: 6px 2px 6px 2px;
-  height: var(--salt-size-stackable);
+  height: calc(var(--salt-size-base) + var(--salt-spacing-100));
 }
 .saltColorChooser-defaultButton {
   border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);
@@ -459,7 +228,7 @@
   border-left: 1px solid var(--salt-separable-secondary-borderColor);
 }
 .saltColorChooserPicker-applyButtonDiv {
-  padding: var(--salt-size-unit) calc(2 * var(--salt-size-unit)) 0px calc(1.5 * var(--salt-size-unit));
+  padding: var(--salt-spacing-100) calc(2 * var(--salt-spacing-100)) 0px calc(1.5 * var(--salt-spacing-100));
   align-self: center;
 }
 .saltColorChooserPicker-textDivOverrides {
@@ -472,14 +241,14 @@
   display: flex;
   flex-direction: column;
   align-content: stretch;
-  padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit);
+  padding: var(--salt-spacing-100) 0px 0px var(--salt-spacing-100);
 }
 .saltColorChooserPicker-root,
 .saltColorChooserPicker-rootDisabledAlpha {
   box-shadow: none !important;
   padding: 8px 8px 0px 0px !important;
   background: transparent !important;
-  width: calc(9 * var(--salt-size-stackable)) !important;
+  width: calc(9 * calc(var(--salt-size-base) + var(--salt-spacing-100))) !important;
 }
 .saltColorChooserPicker-root .flexbox-fix,
 .saltColorChooserPicker-rootDisabledAlpha .flexbox-fix {
@@ -490,22 +259,22 @@
   display: none !important;
 }
 .saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {
-  height: calc(var(--salt-size-stackable) / 2) !important;
+  height: calc(calc(var(--salt-size-base) + var(--salt-spacing-100)) / 2) !important;
 }
 .saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div {
-  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;
+  height: calc(calc(var(--salt-size-base) + var(--salt-spacing-100)) / 2 - 2px) !important;
 }
 .saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div > div {
-  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;
+  height: calc(calc(var(--salt-size-base) + var(--salt-spacing-100)) / 2 - 2px) !important;
 }
 .saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div {
-  width: calc(var(--salt-size-stackable) / 2) !important;
+  width: calc(calc(var(--salt-size-base) + var(--salt-spacing-100)) / 2) !important;
 }
 .saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div {
-  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;
+  height: calc(calc(var(--salt-size-base) + var(--salt-spacing-100)) / 2 - 2px) !important;
 }
 .saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div > div {
-  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;
+  height: calc(calc(var(--salt-size-base) + var(--salt-spacing-100)) / 2 - 2px) !important;
 }
 .saltColorChooserPicker-swatchPickerStyles .saturation-white > div > div {
   width: calc(var(--salt-size-base) / 4) !important;
@@ -515,7 +284,7 @@
   position: relative;
   margin-top: 0px !important;
   width: 4px !important;
-  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;
+  height: calc(calc(var(--salt-size-base) + var(--salt-spacing-100)) / 2 - 2px) !important;
   background: var(--salt-container-primary-background) !important;
   border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);
 }
@@ -530,7 +299,7 @@
 .saltColorChooserHexInput {
   display: flex;
   flex-direction: row;
-  padding: 0px 0px var(--salt-size-container-spacing) 0px;
+  padding: 0px 0px var(--salt-spacing-300) 0px;
 }
 .saltColorChooserHexInput-hashSign {
   margin-top: 5px;
@@ -540,15 +309,15 @@
   padding-left: 6px;
 }
 .saltColorChooserHexInput-input {
-  width: var(--salt-size-unit);
+  width: var(--salt-spacing-100);
   border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);
 }
 
 /* src/color-chooser/RGBAInput.css */
 .saltColorChooser-rgbaInput {
-  width: var(--salt-size-unit);
+  width: var(--salt-spacing-100);
   border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-editable-borderColor);
-  padding-top: var(--salt-size-unit);
+  padding-top: var(--salt-spacing-100);
 }
 .saltColorChooser-opacityInput {
   min-width: 40px !important;
@@ -567,7 +336,7 @@
 .saltColorChooser-rgbaInputDiv {
   display: flex;
   flex-direction: row;
-  padding: 0px 0px var(--salt-size-unit) 0px;
+  padding: 0px 0px var(--salt-spacing-100) 0px;
 }
 .saltColorChooser-overrideInput {
   min-width: 0em;
@@ -596,10 +365,10 @@
 .salt-density-low,
 .salt-density-medium,
 .salt-density-high {
-  --colorChooser-swatch-density-high-size: calc(5 * var(--salt-size-unit));
-  --colorChooser-swatch-density-medium-size: calc(3 * var(--salt-size-unit));
-  --colorChooser-swatch-density-low-size: calc(3 * var(--salt-size-unit));
-  --colorChooser-swatch-density-touch-size: calc(2 * var(--salt-size-unit));
+  --colorChooser-swatch-density-high-size: calc(5 * var(--salt-spacing-100));
+  --colorChooser-swatch-density-medium-size: calc(3 * var(--salt-spacing-100));
+  --colorChooser-swatch-density-low-size: calc(3 * var(--salt-spacing-100));
+  --colorChooser-swatch-density-touch-size: calc(2 * var(--salt-spacing-100));
 }
 .salt-density-touch {
   --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-touch-size);
@@ -624,7 +393,7 @@
   cursor: var(--salt-cursor-hover);
 }
 .salt-theme[data-mode=light] .saltColorChooserSwatch-whiteSwatch {
-  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);
 }
 .salt-theme[data-mode=light] .saltColorChooserSwatch-whiteSwatch,
 .salt-theme[data-mode=dark] .saltColorChooserSwatch-graySwatch {
@@ -640,11 +409,11 @@
   height: calc(var(--colorChooser-swatch-size-unit) - 2);
 }
 .salt-theme[data-mode=dark] .saltColorChooserSwatch-graySwatch {
-  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);
 }
 .saltColorChooserSwatch-active {
-  outline: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
-  border: var(--salt-focused-outlineWidth) var(--salt-borderStyle-solid) var(--salt-actionable-cta-foreground-active) !important;
+  outline: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);
+  border: var(--salt-focused-outlineWidth) var(--salt-borderStyle-solid) var(--salt-actionable-accented-bold-foreground-active) !important;
   margin-bottom: 1px;
   margin-left: 1px;
   cursor: var(--salt-cursor-active);
@@ -677,11 +446,11 @@
 }
 .saltColorChooserSwatches-colorTextDiv {
   font-size: var(--salt-text-fontSize);
-  margin-right: var(--salt-size-unit);
+  margin-right: var(--salt-spacing-100);
 }
 .saltColorChooserSwatches-alphaTextDiv {
   font-size: var(--salt-text-fontSize);
-  margin-right: var(--salt-size-unit);
+  margin-right: var(--salt-spacing-100);
 }
 .saltColorChooserSwatches-textDiv {
   display: flex;
@@ -689,7 +458,7 @@
   padding: 8px 8px 0px 8px;
 }
 .saltColorChooserSwatches-pickerDiv {
-  padding-top: calc(2 * var(--salt-size-unit));
+  padding-top: calc(2 * var(--salt-spacing-100));
 }
 
 /* src/combo-box-deprecated/ComboBox.css */
@@ -741,14 +510,14 @@
   --contactDetails-favoriteToggle-fill: var(--contactDetails-deselected-icon-color);
   --contactDetails-favoriteToggle-marginRight: 0px;
   --contactDetails-favoriteToggle-marginTop: 0px;
-  --contactDetails-mini-secondaryInfo-marginLeft: var(--salt-size-unit);
-  --contactDetails-mini-stacked-secondaryInfo-marginLeft: calc(var(--salt-size-unit) * 2);
-  --contactDetails-compact-tertiaryInfo-marginLeft: var(--salt-size-unit);
+  --contactDetails-mini-secondaryInfo-marginLeft: var(--salt-spacing-100);
+  --contactDetails-mini-stacked-secondaryInfo-marginLeft: calc(var(--salt-spacing-100) * 2);
+  --contactDetails-compact-tertiaryInfo-marginLeft: var(--salt-spacing-100);
   --contactDetails-separator-color: var(--salt-separable-secondary-borderColor);
 }
 .saltContactDetails {
   display: grid;
-  padding: var(--salt-size-unit);
+  padding: var(--salt-spacing-100);
 }
 .saltContactDetails.saltContactDetails-noAvatar {
   padding-left: 0;
@@ -802,26 +571,26 @@
   grid-area: noAvatar;
   width: var(--contactDetails-noAvatar-indicator-width);
   background: var(--contactDetails-noAvatar-color);
-  margin-right: var(--salt-size-unit);
+  margin-right: var(--salt-spacing-100);
 }
 .saltContactAvatar {
   grid-area: avatar;
-  margin-right: var(--salt-size-unit);
+  margin-right: var(--salt-spacing-100);
 }
 .saltContactAvatar-stacked {
-  margin-bottom: var(--salt-size-unit);
+  margin-bottom: var(--salt-spacing-100);
 }
 .saltContactActions {
   grid-area: actions;
   display: flex;
-  margin-top: var(--salt-size-unit);
-  margin-left: calc(var(--salt-size-unit) * -1);
+  margin-top: var(--salt-spacing-100);
+  margin-left: calc(var(--salt-spacing-100) * -1);
 }
 .saltContactPrimaryInfo {
   grid-area: primary;
 }
 .saltContactDetails-default .saltContactPrimaryInfo {
-  margin-bottom: calc(var(--salt-size-unit) * 0.5);
+  margin-bottom: calc(var(--salt-spacing-100) * 0.5);
 }
 .saltContactSecondaryInfo {
   grid-area: secondary;
@@ -833,7 +602,7 @@
   margin-left: var(--contactDetails-mini-stacked-secondaryInfo-marginLeft);
 }
 .saltContactSecondaryInfo-icon {
-  margin-right: calc(var(--salt-size-unit) * 0.5);
+  margin-right: calc(var(--salt-spacing-100) * 0.5);
 }
 .saltContactTertiaryInfo {
   grid-area: tertiary;
@@ -842,30 +611,30 @@
   margin-left: var(--contactDetails-compact-tertiaryInfo-marginLeft);
 }
 .saltContactTertiaryInfo-icon {
-  margin-right: calc(var(--salt-size-unit) * 0.5);
+  margin-right: calc(var(--salt-spacing-100) * 0.5);
 }
 .saltContactMetadata {
   grid-area: metadata;
   display: flex;
   flex-direction: column;
-  padding-top: var(--salt-size-unit);
-  padding-bottom: var(--salt-size-unit);
+  padding-top: var(--salt-spacing-100);
+  padding-bottom: var(--salt-spacing-100);
 }
 .saltContactMetadata-expander {
   grid-area: metadataExpander;
-  margin-top: var(--salt-size-unit);
+  margin-top: var(--salt-spacing-100);
 }
 .saltContactMetadata-separator {
   width: 100%;
   height: 1px;
   background: var(--contactDetails-separator-color);
-  margin-bottom: var(--salt-size-unit);
+  margin-bottom: var(--salt-spacing-100);
 }
 .saltContactMetadataItem {
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-bottom: calc(var(--salt-size-unit) * 0.5);
+  margin-bottom: calc(var(--salt-spacing-100) * 0.5);
 }
 .saltContactMetadataItem:last-child {
   margin-bottom: unset;
@@ -875,13 +644,13 @@
   align-items: flex-start;
 }
 .saltContactMetadataItem-icon {
-  margin-right: calc(var(--salt-size-unit) * 2);
+  margin-right: calc(var(--salt-spacing-100) * 2);
   padding-left: 1px;
 }
 .saltContactMetadataItem-label {
   flex-shrink: 0;
   color: var(--contactDetails-label-color);
-  margin-right: calc(var(--salt-size-unit) * 2);
+  margin-right: calc(var(--salt-spacing-100) * 2);
   width: var(--contactDetails-label-width);
 }
 .saltContactFavoriteToggle {
@@ -925,13 +694,13 @@
   justify-content: center;
   align-items: center;
   text-align: var(--salt-text-textAlign-embedded);
-  gap: var(--salt-size-unit);
+  gap: var(--salt-spacing-100);
 }
 .saltContentStatus-content {
   color: var(--saltContentStatus-content-color, var(--salt-content-primary-foreground));
   display: flex;
   flex-direction: column;
-  gap: var(--salt-size-unit);
+  gap: var(--salt-spacing-100);
   font-size: var(--salt-text-fontSize);
   line-height: var(--salt-text-lineHeight);
   font-family: var(--salt-text-fontFamily);
@@ -941,7 +710,7 @@
   font-weight: var(--salt-text-display1-fontWeight);
 }
 .saltContentStatus-actions {
-  margin-top: var(--saltContentStatus-actions-marginTop, var(--salt-size-unit));
+  margin-top: var(--saltContentStatus-actions-marginTop, var(--salt-spacing-100));
 }
 
 /* src/deck-item/DeckItem.css */
@@ -999,16 +768,16 @@
 
 /* src/dropdown/DropdownButton.css */
 .saltDropdownButton {
-  --saltButton-background-hover: var(--salt-actionable-secondary-background);
-  --saltButton-background-active: var(--salt-actionable-secondary-background);
+  --saltButton-background-hover: var(--salt-actionable-subtle-background);
+  --saltButton-background-active: var(--salt-actionable-subtle-background);
   --saltButton-fontWeight: var(--salt-text-fontWeight-strong);
   --saltButton-textAlign: left;
   --saltButton-textTransform: none;
   --saltButton-width: 100%;
 }
 .saltDropdownButton:active {
-  --saltIcon-color: var(--salt-actionable-secondary-foreground);
-  --saltButton-text-color-active: var(--salt-actionable-secondary-foreground);
+  --saltIcon-color: var(--salt-actionable-subtle-foreground);
+  --saltButton-text-color-active: var(--salt-actionable-subtle-foreground);
 }
 .saltDropdownButton-fullwidth {
   width: 100%;
@@ -1176,10 +945,10 @@
 }
 .saltFormFieldLegacy-disabled {
   --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled);
-  --formFieldLegacy-activationIndicator-opacity: var(--salt-palette-opacity-disabled);
+  --formFieldLegacy-activationIndicator-opacity: 0.4;
   --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);
   --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);
-  --formFieldLegacy-helperText-opacity: var(--salt-palette-opacity-disabled);
+  --formFieldLegacy-helperText-opacity: 0.4;
   --saltInputLegacy-cursor: var(--salt-cursor-disabled);
 }
 .saltFormFieldLegacy.saltFormFieldLegacy-disabled:hover {
@@ -1209,17 +978,17 @@
   --formFieldLegacy-background: var(--salt-status-warning-background);
 }
 .saltFormFieldLegacy-labelLeft {
-  --formFieldLegacy-label-marginTop: var(--salt-size-unit);
+  --formFieldLegacy-label-marginTop: var(--salt-spacing-100);
   --formFieldLegacy-label-paddingLeft: 0px;
-  --formFieldLegacy-label-paddingRight: calc(0.75 * var(--salt-size-unit));
+  --formFieldLegacy-label-paddingRight: calc(0.75 * var(--salt-spacing-100));
   align-self: start;
   grid-template-columns: auto 1fr;
 }
 .saltFormFieldLegacy-labelTop {
   --formFieldLegacy-label-marginBottom: var(--formFieldLegacy-label-top-marginBottom);
   --formFieldLegacy-label-marginTop: 0;
-  --formFieldLegacy-label-paddingLeft: var(--salt-size-unit);
-  --formFieldLegacy-label-paddingRight: var(--salt-size-unit);
+  --formFieldLegacy-label-paddingLeft: var(--salt-spacing-100);
+  --formFieldLegacy-label-paddingRight: var(--salt-spacing-100);
   --formFieldLegacy-background-offset-height: calc(var(--formFieldLegacy-helperText-marginTop, 0px) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)));
   background:
     linear-gradient(
@@ -1363,8 +1132,8 @@
   margin-bottom: var(--saltFormFieldLegacy-helperText-marginBottom, 0);
   margin-top: var(--saltFormFieldLegacy-helperText-marginTop, var(--formFieldLegacy-helperText-marginTop));
   opacity: var(--saltFormFieldLegacy-helperText-opacity, var(--formFieldLegacy-helperText-opacity));
-  padding-left: var(--saltFormFieldLegacy-helperText-paddingLeft, var(--salt-size-unit));
-  padding-right: var(--saltFormFieldLegacy-helperText-paddingRight, var(--salt-size-unit));
+  padding-left: var(--saltFormFieldLegacy-helperText-paddingLeft, var(--salt-spacing-100));
+  padding-right: var(--saltFormFieldLegacy-helperText-paddingRight, var(--salt-spacing-100));
   transform: var(--saltFormFieldLegacy-helperText-transform, var(--formFieldLegacy-helperText-transform, none));
 }
 
@@ -1471,19 +1240,19 @@
 
 /* src/input-legacy/InputLegacy.css */
 .salt-density-touch {
-  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 0.5);
+  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 0.5);
   --inputLegacy-button-inset: 4px;
 }
 .salt-density-low {
-  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 2 / 3);
+  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2 / 3);
   --inputLegacy-button-inset: 4px;
 }
 .salt-density-medium {
-  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 0.5);
+  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 0.5);
   --inputLegacy-button-inset: 2px;
 }
 .salt-density-high {
-  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit));
+  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
   --inputLegacy-button-inset: 2px;
 }
 .saltInputLegacy {
@@ -1500,7 +1269,7 @@
   line-height: var(--salt-text-lineHeight);
   min-height: var(--saltInputLegacy-minHeight, var(--salt-size-base));
   min-width: var(--saltInputLegacy-minWidth, 8em);
-  padding: var(--saltInputLegacy-padding, 0 var(--salt-size-unit));
+  padding: var(--saltInputLegacy-padding, 0 var(--salt-spacing-100));
   position: var(--saltInputLegacy-position, relative);
   width: 100%;
   box-sizing: border-box;
@@ -1544,19 +1313,19 @@
   padding-left: var(--saltInputLegacy-adornedStart-padding, 0);
 }
 .saltInputLegacy-inputAdornedStart .saltInputLegacy-input {
-  padding-left: var(--saltInputLegacy-adornedStart-input-padding, var(--salt-size-unit));
+  padding-left: var(--saltInputLegacy-adornedStart-input-padding, var(--salt-spacing-100));
 }
 .saltInputLegacy-inputAdornedEnd {
   padding-right: var(--saltInputLegacy-adornedEnd-padding, 0);
 }
 .saltInputLegacy-inputAdornedEnd .saltInputLegacy-input {
-  padding-right: var(--saltInputLegacy-adornedEnd-input-padding, var(--salt-size-unit));
+  padding-right: var(--saltInputLegacy-adornedEnd-input-padding, var(--salt-spacing-100));
 }
 .saltInputLegacy .saltInputLegacy-suffixContainer > .saltButton,
 .saltInputLegacy .saltInputLegacy-prefixContainer > .saltButton {
   height: calc(var(--saltButton-height, var(--salt-size-base)) - (var(--inputLegacy-button-inset) * 2));
   margin: var(--inputLegacy-button-inset);
-  padding: 0 calc(var(--salt-size-unit) - var(--inputLegacy-button-inset));
+  padding: 0 calc(var(--salt-spacing-100) - var(--inputLegacy-button-inset));
 }
 .saltInputLegacy-leftTextAlign .saltInputLegacy-input {
   text-align: left;
@@ -1574,7 +1343,7 @@
 
 /* src/input-legacy/StaticInputAdornment.css */
 .saltStaticInputAdornment {
-  --inputLegacy-staticAdornment-padding: var(--salt-size-unit);
+  --inputLegacy-staticAdornment-padding: var(--salt-spacing-100);
 }
 .saltStaticInputAdornment {
   display: flex;
@@ -1591,8 +1360,8 @@
 .saltLayerLayout {
   --layerLayout-boxShadow: var(--saltLayerLayout-boxShadow, var(--salt-overlayable-shadow-modal));
   --layerLayout-background: var(--saltLayerLayout-background, var(--salt-container-primary-background));
-  --layerLayout-padding: var(--saltLayerLayout-padding, var(--salt-size-container-spacing));
-  --layerLayout-margin: var(--saltLayerLayout-margin, var(--salt-size-container-spacing));
+  --layerLayout-padding: var(--saltLayerLayout-padding, var(--salt-spacing-300));
+  --layerLayout-margin: var(--saltLayerLayout-margin, var(--salt-spacing-300));
 }
 .saltLayerLayout {
   background: var(--layerLayout-background);
@@ -1678,6 +1447,111 @@
   animation: var(--salt-animation-slide-out-top);
 }
 
+/* src/link-button/LinkButton.css */
+.saltLinkButton {
+  --linkButton-borderWidth: var(--salt-size-fixed-100);
+  align-items: var(--saltLinkButton-alignItems, center);
+  appearance: none;
+  background: var(--saltLinkButton-background, var(--linkButton-background));
+  border-color: var(--saltLinkButton-borderColor, var(--linkButton-borderColor, transparent));
+  border-style: var(--saltLinkButton-borderStyle, solid);
+  border-width: var(--saltLinkButton-borderWidth, var(--linkButton-borderWidth));
+  border-radius: var(--saltLinkButton-borderRadius, var(--salt-palette-corner-weak, 0));
+  color: var(--saltLinkButton-text-color, var(--linkButton-text-color));
+  display: inline-flex;
+  gap: var(--salt-spacing-50);
+  justify-content: var(--saltLinkButton-justifyContent, center);
+  font-size: var(--saltLinkButton-fontSize, var(--salt-text-fontSize));
+  font-family: var(--saltLinkButton-fontFamily, var(--salt-text-action-fontFamily));
+  line-height: var(--saltLinkButton-lineHeight, var(--salt-text-lineHeight));
+  letter-spacing: var(--saltLinkButton-letterSpacing, var(--salt-text-action-letterSpacing));
+  text-transform: var(--saltLinkButton-textTransform, var(--salt-text-action-textTransform));
+  padding: 0 var(--saltLinkButton-padding, calc(var(--salt-spacing-100) - var(--saltLinkButton-borderWidth, var(--linkButton-borderWidth))));
+  margin: var(--saltLinkButton-margin, 0);
+  height: var(--saltLinkButton-height, var(--salt-size-base));
+  min-width: var(--saltLinkButton-minWidth, unset);
+  position: relative;
+  text-align: var(--saltLinkButton-textAlign, var(--salt-text-action-textAlign));
+  text-decoration: var(--linkButton-textDecoration, var(--salt-text-link-textDecoration));
+  text-underline-offset: var(--salt-spacing-fixed-200);
+  transition: none;
+  width: var(--saltLinkButton-width, auto);
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  font-weight: var(--saltLinkButton-fontWeight, var(--salt-text-action-fontWeight));
+}
+.saltLinkButton-underlineDefault {
+  --linkButton-textDecoration: var(--salt-text-link-textDecoration);
+  --linkButton-textDecoration-hover: var(--salt-typography-textDecoration-none);
+  --linkButton-textDecoration-focus: var(--linkButton-textDecoration-hover);
+}
+.saltLinkButton-underlineNever {
+  --linkButton-textDecoration: var(--salt-typography-textDecoration-none);
+  --linkButton-textDecoration-hover: var(--salt-typography-textDecoration-none);
+  --linkButton-textDecoration-focus: var(--salt-typography-textDecoration-none);
+}
+.saltLinkButton-externalLinkADA {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+  user-select: none;
+  -webkit-user-select: none;
+}
+@media (hover: hover) {
+  .saltLinkButton:hover {
+    background: var(--saltLinkButton-background-hover, var(--linkButton-background-hover));
+    color: var(--saltLinkButton-text-color-hover, var(--linkButton-text-color-hover));
+    border-color: var(--saltLinkButton-borderColor-hover, var(--linkButton-borderColor-hover));
+    cursor: var(--salt-cursor-hover);
+    text-decoration: var(--linkButton-textDecoration-hover, var(--salt-typography-textDecoration-none));
+  }
+}
+.saltLinkButton:focus-visible {
+  outline: var(--salt-focused-outline);
+  background: var(--saltLinkButton-background-hover, var(--linkButton-background-hover));
+  color: var(--saltLinkButton-text-color-hover, var(--linkButton-text-color-hover));
+  border-color: var(--saltLinkButton-borderColor-hover, var(--linkButton-borderColor-hover));
+  text-decoration: var(--linkButton-textDecoration-focus, var(--salt-typography-textDecoration-none));
+}
+.saltLinkButton.saltLinkButton-active:focus-visible,
+.saltLinkButton:focus-visible:active,
+.saltLinkButton:active,
+.saltLinkButton.saltLinkButton-active {
+  background: var(--saltLinkButton-background-active, var(--linkButton-background-active));
+  color: var(--saltLinkButton-text-color-active, var(--linkButton-text-color-active));
+  border-color: var(--saltLinkButton-borderColor-active, var(--linkButton-borderColor-active));
+  cursor: var(--salt-cursor-active);
+}
+.saltLinkButton-neutral {
+  --linkButton-text-color: var(--salt-actionable-subtle-foreground);
+  --linkButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);
+  --linkButton-text-color-active: var(--salt-actionable-subtle-foreground-active);
+  --linkButton-background: var(--salt-actionable-subtle-background);
+  --linkButton-background-hover: var(--salt-actionable-subtle-background-hover);
+  --linkButton-background-active: var(--salt-actionable-subtle-background-active);
+  --linkButton-borderColor: var(--salt-actionable-subtle-borderColor);
+  --linkButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);
+  --linkButton-borderColor-active: var(--salt-actionable-subtle-borderColor-active);
+}
+.saltLinkButton-accented {
+  --linkButton-text-color: var(--salt-actionable-accented-subtle-foreground);
+  --linkButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);
+  --linkButton-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);
+  --linkButton-background: var(--salt-actionable-accented-subtle-background);
+  --linkButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);
+  --linkButton-background-active: var(--salt-actionable-accented-subtle-background-active);
+  --linkButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);
+  --linkButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);
+  --linkButton-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);
+}
+
 /* src/list/Highlighter.css */
 .saltHighlighter-highlight {
   font-weight: var(--salt-text-fontWeight-strong);
@@ -1689,11 +1563,11 @@
   --list-borderStyle: var(--salt-borderStyle-solid);
   --list-borderWidth: var(--salt-size-fixed-100);
   --list-height: auto;
-  --list-item-height: var(--salt-size-stackable);
+  --list-item-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
   --list-item-gap: 0px;
   --list-maxHeight: 100%;
   background: var(--list-background);
-  border-color: var(--salt-container-primary-borderColor);
+  border-color: var(--salt-container-bold-borderColor);
   border-style: var(--list-borderStyle);
   border-width: var(--list-borderWidth);
   height: var(--saltList-height, var(--list-height));
@@ -1791,7 +1665,7 @@
   line-height: var(--salt-text-lineHeight);
   height: var(--saltList-item-height, var(--list-item-height, auto));
   margin-bottom: var(--list-item-gap);
-  padding: 0 var(--salt-size-unit);
+  padding: 0 var(--salt-spacing-100);
   left: 0;
   right: 0;
   display: flex;
@@ -1805,7 +1679,7 @@
 .saltListItem-checkbox {
   --list-item-background-active: var(--salt-selectable-background);
   --list-item-text-color-active: var(--salt-content-primary-foreground);
-  --list-item-text-padding: 0 0 0 var(--salt-size-unit);
+  --list-item-text-padding: 0 0 0 var(--salt-spacing-100);
 }
 .saltListItem[aria-selected=true]:not(.saltListItem-checkbox) {
   --list-item-background: var(--list-item-background-active);
@@ -1842,7 +1716,7 @@
 /* src/list-deprecated/List.css */
 .saltListDeprecated-wrapper {
   --list-background: var(--salt-container-primary-background);
-  --list-borderColor: var(--salt-container-primary-borderColor);
+  --list-borderColor: var(--salt-container-bold-borderColor);
   --list-borderStyle: var(--salt-borderStyle-solid);
   --list-borderWidth: var(--salt-size-fixed-100);
   --list-borderRadius: 0;
@@ -1887,13 +1761,13 @@
   --list-item-textAlign: var(--salt-text-textAlign);
   --list-item-fontSize: var(--salt-text-fontSize);
   --list-item-lineHeight: var(--salt-text-lineHeight);
-  --list-item-padding: 0 var(--salt-size-unit);
+  --list-item-padding: 0 var(--salt-spacing-100);
   --list-item-gap: 0px;
   --list-item-alignItems: center;
   --list-item-selectable-cursor: pointer;
   --list-item-cursor: default;
   --list-item-disabled-cursor: var(--salt-cursor-disabled);
-  --list-item-disabled-regular-opacity: var(--salt-palette-opacity-disabled);
+  --list-item-disabled-regular-opacity: 0.4;
 }
 .saltListItemDeprecated {
   color: var(--list-item-text-color);
@@ -1965,7 +1839,7 @@
   padding-left: var(--salt-spacing-100);
   padding-right: var(--salt-spacing-100);
   display: flex;
-  gap: var(--salt-size-unit);
+  gap: var(--salt-spacing-100);
   position: relative;
   align-items: center;
   white-space: nowrap;
@@ -2001,7 +1875,7 @@
 .saltListNext {
   margin: 0;
   background: var(--salt-container-primary-background);
-  border-color: var(--salt-container-primary-borderColor);
+  border-color: var(--salt-container-bold-borderColor);
   border-style: var(--salt-borderStyle-solid);
   border-width: var(--salt-size-fixed-100);
   height: 100%;
@@ -2038,7 +1912,7 @@
 
 /* src/logo/LogoSeparator.css */
 .saltLogoSeparator {
-  height: var(--salt-size-separator-height);
+  height: var(--salt-size-base);
   border-right: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-primary-borderColor);
 }
 
@@ -2046,14 +1920,14 @@
 
 /* src/menu-button/MenuButtonTrigger.css */
 .saltMenuButtonTrigger {
-  --menuButton-trigger-open-color: var(--saltMenuButton-trigger-open-color, var(--salt-actionable-primary-foreground-active));
+  --menuButton-trigger-open-color: var(--saltMenuButton-trigger-open-color, var(--salt-actionable-bold-foreground-active));
 }
 .saltMenuButtonTrigger {
   display: inline-flex;
   line-height: 1;
 }
 .saltMenuButtonTrigger-buttonOpen {
-  background: var(--saltMenuButton-trigger-open-background, var(--salt-actionable-primary-background-active));
+  background: var(--saltMenuButton-trigger-open-background, var(--salt-actionable-bold-background-active));
   color: var(--menuButton-trigger-open-color);
 }
 .saltMenuButtonTrigger-buttonOpen:not(:hover) .saltMenuButtonTrigger-caretIcon {
@@ -2063,7 +1937,7 @@
   color: var(--menuButton-trigger-open-color);
 }
 .saltMenuButtonTrigger-caretIcon {
-  --saltIcon-margin: 0 0 0 var(--salt-size-unit);
+  --saltIcon-margin: 0 0 0 var(--salt-spacing-100);
 }
 
 /* src/metric/Metric.css */
@@ -2099,7 +1973,7 @@
   align-items: baseline;
   display: flex;
   flex-direction: row;
-  gap: calc(var(--salt-size-unit) / 2);
+  gap: calc(var(--salt-spacing-100) / 2);
   margin-top: var(--metric-content-valueContainer-marginTop, 0px);
 }
 .saltMetric-direction-up .saltMetricContent-indicator {
@@ -2138,7 +2012,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: calc(var(--salt-size-unit) * 0.25);
+  gap: calc(var(--salt-spacing-100) * 0.25);
 }
 .saltMetric-orientation-horizontal.saltMetric-size-small .saltMetricHeader {
   padding-top: 4px;
@@ -2163,6 +2037,82 @@
   align-items: flex-end;
 }
 
+/* src/on-solid-button/OnSolidButton.css */
+.saltOnSolidButton {
+  --onSolidButton-borderWidth: var(--salt-size-fixed-100);
+  align-items: center;
+  appearance: none;
+  -webkit-appearance: none;
+  background: var(--salt-actionable-onSolid-subtle-background);
+  border-color: var(--salt-actionable-onSolid-subtle-borderColor);
+  border-radius: var(--salt-palette-corner-weak, 0);
+  border-style: solid;
+  border-width: var(--onSolidButton-borderWidth);
+  color: var(--salt-actionable-onSolid-subtle-foreground);
+  display: inline-flex;
+  font-family: var(--salt-text-action-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-action-fontWeight);
+  gap: var(--salt-spacing-50);
+  height: var(--salt-size-base);
+  justify-content: center;
+  letter-spacing: var(--salt-text-action-letterSpacing);
+  line-height: var(--salt-text-lineHeight);
+  margin: 0;
+  padding: 0 calc(var(--salt-spacing-100) - var(--onSolidButton-borderWidth));
+  position: relative;
+  -webkit-tap-highlight-color: transparent;
+  text-align: var(--salt-text-action-textAlign);
+  text-decoration: none;
+  text-transform: var(--salt-text-action-textTransform);
+  transition: none;
+}
+.saltOnSolidButton:focus-visible {
+  background: var(--salt-actionable-onSolid-subtle-background-hover);
+  border-color: var(--salt-actionable-onSolid-subtle-borderColor-hover);
+  color: var(--salt-actionable-onSolid-subtle-foreground-hover);
+  outline-color: var(--salt-focused-onSolid-outlineColor);
+  outline-offset: var(--salt-focused-outlineOffset);
+  outline-style: var(--salt-focused-outlineStyle);
+  outline-width: var(--salt-focused-outlineWidth);
+}
+@media (hover: hover) {
+  .saltOnSolidButton:hover {
+    background: var(--salt-actionable-onSolid-subtle-background-hover);
+    border-color: var(--salt-actionable-onSolid-subtle-borderColor-hover);
+    color: var(--salt-actionable-onSolid-subtle-foreground-hover);
+    cursor: var(--salt-cursor-hover);
+  }
+}
+.saltOnSolidButton.saltOnSolidButton-active:focus-visible,
+.saltOnSolidButton:focus-visible:active,
+.saltOnSolidButton:active,
+.saltOnSolidButton.saltOnSolidButton-active {
+  background: var(--salt-actionable-onSolid-subtle-background-active);
+  border-color: var(--salt-actionable-onSolid-subtle-borderColor-active);
+  color: var(--salt-actionable-onSolid-subtle-foreground-active);
+  cursor: var(--salt-cursor-active);
+}
+.saltOnSolidButton:disabled,
+.saltOnSolidButton.saltOnSolidButton-disabled,
+.saltOnSolidButton.saltOnSolidButton-disabled:active,
+.saltOnSolidButton.saltOnSolidButton-disabled:focus-visible,
+.saltOnSolidButton.saltOnSolidButton-disabled:focus-visible:active,
+.saltOnSolidButton.saltOnSolidButton-disabled:hover {
+  background: var(--salt-actionable-onSolid-subtle-background);
+  border-color: var(--salt-actionable-onSolid-subtle-borderColor);
+  color: var(--salt-actionable-onSolid-subtle-foreground);
+  cursor: var(--salt-cursor-disabled);
+  opacity: 0.4;
+}
+.saltOnSolidButton strong {
+  font-weight: var(--salt-text-action-fontWeight-strong);
+}
+.saltOnSolidButton small {
+  font-size: inherit;
+  font-weight: var(--salt-text-action-fontWeight-small);
+}
+
 /* src/query-input/QueryInput.css */
 .saltQueryInputBody {
   display: flex;
@@ -2170,19 +2120,19 @@
   align-items: center;
 }
 .saltQueryInputBody > .saltIcon {
-  padding: var(--salt-size-unit);
+  padding: var(--salt-spacing-100);
   align-self: start;
 }
 .saltQueryInputBody-separator {
   width: 1px;
   background: var(--salt-separable-secondary-borderColor);
-  margin: 0 var(--salt-size-unit);
+  margin: 0 var(--salt-spacing-100);
   align-self: stretch;
 }
 .saltQueryInputBody-buttonGroup {
   flex-shrink: 0;
   align-self: start;
-  margin-bottom: var(--salt-size-unit);
+  margin-bottom: var(--salt-spacing-100);
 }
 .saltQueryInputBody-input {
   flex-grow: 1;
@@ -2202,7 +2152,7 @@
 }
 .saltCategoryListItem-text {
   flex-shrink: 0;
-  margin-right: calc(var(--salt-size-unit) * 1.5);
+  margin-right: calc(var(--salt-spacing-100) * 1.5);
 }
 .saltCategoryListItem-valuesContainer {
   font-style: italic;
@@ -2218,13 +2168,13 @@
 }
 .saltCategoryListItem-chevron {
   flex-shrink: 0;
-  margin-left: var(--salt-size-unit);
+  margin-left: var(--salt-spacing-100);
 }
 .saltListItem-selected .saltIcon {
   fill: var(--list-item-text-color-active);
 }
 .saltQueryInputValueList {
-  border: solid 1px var(--salt-container-primary-borderColor);
+  border: solid 1px var(--salt-container-bold-borderColor);
 }
 .saltQueryInputValueList-back {
   display: flex;
@@ -2234,7 +2184,7 @@
   cursor: var(--salt-cursor-hover);
 }
 .saltQueryInputValueList-back .saltIcon {
-  margin-right: var(--salt-size-unit);
+  margin-right: var(--salt-spacing-100);
 }
 .saltQueryInputValueList-category {
   font-size: var(--salt-text-fontSize);
@@ -2250,7 +2200,7 @@
   font-weight: var(--salt-text-fontWeight-strong);
   display: flex;
   align-items: center;
-  padding: 0 var(--salt-size-unit);
+  padding: 0 var(--salt-spacing-100);
   position: sticky;
   top: 0;
   z-index: var(--salt-zIndex-default);
@@ -2351,7 +2301,7 @@
   --saltInputLegacy-minWidth: 4em;
   --tabs-tab-background: transparent;
   --tabs-tab-cursor: pointer;
-  --tabs-tab-spacing: var(--salt-size-unit);
+  --tabs-tab-spacing: var(--salt-spacing-100);
   --tabs-tab-position: relative;
 }
 .saltTab {
@@ -2394,13 +2344,13 @@
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
-  height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));
+  height: var(--saltTabs-tabstrip-height, calc(var(--salt-size-base) + var(--salt-spacing-100)));
   outline: none;
   padding: 0 var(--tabs-tab-spacing);
   position: relative;
 }
 .saltTab-closeable .saltTab-main {
-  border-right: solid transparent var(--salt-size-unit);
+  border-right: solid transparent var(--salt-spacing-100);
 }
 .saltTab .saltTab-closeButton {
   display: flex;
@@ -2453,7 +2403,7 @@
   width: 2px;
 }
 .saltTab.saltFocusVisible {
-  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-background-hover));
+  background: var(--saltTabs-tab-hover-background, var(--salt-overlayable-background-hover));
 }
 .saltTab:before {
   content: var(--tabs-tab-before-content, none);
@@ -2466,7 +2416,7 @@
 }
 .saltTabstrip-draggingTab .saltTab[aria-selected=true]:before {
   --tabs-tab-before-content: "";
-  --tabs-tab-before-background: var(--salt-navigable-indicator-color-active);
+  --tabs-tab-before-background: var(--salt-navigable-accent-indicator-active);
   --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);
   --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);
   --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);
@@ -2480,12 +2430,12 @@
   --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);
 }
 .saltTab:hover:not(.saltTab-closeHover) {
-  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-background-hover));
+  background: var(--saltTabs-tab-hover-background, var(--salt-overlayable-background-hover));
 }
 
 /* src/tabs/TabActivationIndicator.css */
 .saltTabActivationIndicator {
-  background: var(--saltTabs-activationIndicator-background, var(--salt-container-primary-borderColor));
+  background: var(--saltTabs-activationIndicator-background, var(--salt-container-bold-borderColor));
   height: var(--saltTabs-activationIndicator-height, auto);
   inset: var(--tabs-activationIndicator-inset);
   position: absolute;
@@ -2514,7 +2464,7 @@
 
 /* src/tabs/Tabstrip.css */
 .saltTabstrip {
-  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));
+  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, calc(var(--salt-size-base) + var(--salt-spacing-100)));
   --tabs-tabstrip-dragging-display: none;
   --tabs-tabstrip-display: inline-flex;
   --tabs-tabstrip-background: transparent;
@@ -2558,17 +2508,17 @@
 }
 .saltTabstrip-addButton,
 .saltDropdownBase.saltTabstrip-overflowMenu {
-  margin-left: var(--salt-size-unit);
+  margin-left: var(--salt-spacing-100);
 }
 .saltTabstrip-overflowMenu.saltDropdownBase {
   --saltIcon-margin: 2px 0 0 0px;
 }
 .saltTabstrip-overflowMenu-open {
-  --saltButton-background: var(--salt-actionable-secondary-background-active);
-  --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);
+  --saltButton-background: var(--salt-actionable-subtle-background-active);
+  --saltButton-text-color: var(--salt-actionable-subtle-foreground-active);
 }
 .saltTabstrip-overflowMenu-open .saltButton {
-  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);
+  --saltIcon-color: var(--salt-actionable-subtle-foreground-active);
 }
 .saltTabstrip-inner {
   width: 100%;
@@ -2590,9 +2540,9 @@
 }
 .saltDraggable[class*=tabstrip] {
   --tabs-tabstrip-display: flex;
-  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));
+  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, calc(var(--salt-size-base) + var(--salt-spacing-100)));
   --tabs-tabstrip-dragging-display: block;
-  --tabs-tab-background: var(--salt-navigable-background-hover);
+  --tabs-tab-background: var(--salt-overlayable-background-hover);
   --tabs-tab-before-content: "";
   --tabs-tab-before-background: var(--salt-navigable-indicator-hover);
   --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);
@@ -2603,7 +2553,7 @@
   font-size: 12px;
 }
 .saltDraggable-tabstrip-horizontal {
-  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));
+  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, calc(var(--salt-size-base) + var(--salt-spacing-100)));
   --tabs-activationIndicator-thumb-height: 2px;
   --tabs-activationIndicator-inset: auto 0px 0px 0px;
   line-height: var(--tabs-tabstrip-height);
@@ -2634,16 +2584,16 @@
 
 /* src/tabs/ThemeTabstrip.css */
 .salt-density-touch {
-  --toolbar-depth: calc(var(--salt-size-basis-unit) * 13);
+  --toolbar-depth: calc(4px * 13);
 }
 .salt-density-low {
-  --toolbar-depth: calc(var(--salt-size-basis-unit) * 11);
+  --toolbar-depth: calc(4px * 11);
 }
 .salt-density-medium {
-  --toolbar-depth: calc(var(--salt-size-basis-unit) * 9);
+  --toolbar-depth: calc(4px * 9);
 }
 .salt-density-high {
-  --toolbar-depth: calc(var(--salt-size-basis-unit) * 7);
+  --toolbar-depth: calc(4px * 7);
 }
 
 /* src/toast-group/ToastGroup.css */
@@ -2682,27 +2632,27 @@
 
 /* src/tokenized-input/TokenizedInput.css */
 .salt-density-medium {
-  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);
-  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2);
-  --tokenizedInput-last-pill-margin: var(--salt-size-unit);
+  --tokenizedInput-gutter-size: 4px;
+  --tokenizedInput-pill-group-y-padding: calc(var(--salt-spacing-100) / 2);
+  --tokenizedInput-last-pill-margin: var(--salt-spacing-100);
 }
 .salt-density-touch {
-  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);
-  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 2px);
-  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);
+  --tokenizedInput-gutter-size: 4px;
+  --tokenizedInput-pill-group-y-padding: calc(var(--salt-spacing-100) / 2 + 2px);
+  --tokenizedInput-last-pill-margin: calc(var(--salt-spacing-100) / 2);
 }
 .salt-density-low {
-  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);
-  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);
-  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);
+  --tokenizedInput-gutter-size: 4px;
+  --tokenizedInput-pill-group-y-padding: calc(var(--salt-spacing-100) / 2 + 1px);
+  --tokenizedInput-last-pill-margin: calc(var(--salt-spacing-100) / 2);
 }
 .salt-density-high {
-  --tokenizedInput-gutter-size: calc(var(--salt-size-basis-unit) - 1px);
-  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);
-  --tokenizedInput-last-pill-margin: var(--salt-size-unit);
+  --tokenizedInput-gutter-size: calc(4px - 1px);
+  --tokenizedInput-pill-group-y-padding: calc(var(--salt-spacing-100) / 2 + 1px);
+  --tokenizedInput-last-pill-margin: var(--salt-spacing-100);
 }
 .saltTokenizedInput {
-  --tokenizedInput-spacing: var(--salt-size-unit);
+  --tokenizedInput-spacing: var(--salt-spacing-100);
   --tokenizedInput-height: var(--salt-size-base);
 }
 .saltTokenizedInput {
@@ -2728,14 +2678,14 @@
 }
 .saltTokenizedInput-disabled {
   cursor: var(--salt-cursor-disabled);
-  opacity: var(--saltTokenizedInput-disabled-opacity, var(--salt-palette-opacity-disabled));
+  opacity: var(--saltTokenizedInput-disabled-opacity, 0.4);
 }
 .saltTokenizedInput-focused {
   outline: var(--saltTokenizedInput-focused-outline, var(--salt-focused-outline));
 }
 .saltTokenizedInput-expanded {
   height: auto;
-  --saltPill-maxWidth: calc(100px - var(--salt-size-unit));
+  --saltPill-maxWidth: calc(100px - var(--salt-spacing-100));
 }
 .saltTokenizedInput-hidden,
 .saltTokenizedInput-input.saltTokenizedInput-hidden,
@@ -2790,11 +2740,11 @@
   background: var(--saltTokenizedInput-pill-background-active, var(--salt-selectable-background-hover));
 }
 .saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteIcon {
-  color: var(--saltTokenizedInput-pill-delete-icon-color, var(--salt-actionable-cta-foreground-hover));
+  color: var(--saltTokenizedInput-pill-delete-icon-color, var(--salt-actionable-accented-bold-foreground-hover));
 }
 .saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteButton {
-  color: var(--saltTokenizedInput-pill-delete-button-color-active, var(--salt-actionable-cta-foreground-hover));
-  background: var(--saltTokenizedInput-pill-delete-button-background-active, var(--salt-actionable-cta-background-hover));
+  color: var(--saltTokenizedInput-pill-delete-button-color-active, var(--salt-actionable-accented-bold-foreground-hover));
+  background: var(--saltTokenizedInput-pill-delete-button-background-active, var(--salt-actionable-accented-bold-background-hover));
 }
 
 /* src/tokenized-input-next/TokenizedInputNext.css */
@@ -2839,17 +2789,17 @@
 }
 .saltTokenizedInputNext-primary {
   --tokenizedInput-background: var(--salt-editable-primary-background);
-  --tokenizedInput-background-active: var(--salt-editable-primary-background-active);
-  --tokenizedInput-background-hover: var(--salt-editable-primary-background-hover);
+  --tokenizedInput-background-active: var(--salt-editable-primary-background);
+  --tokenizedInput-background-hover: var(--salt-editable-primary-background);
   --tokenizedInput-background-disabled: var(--salt-editable-primary-background-disabled);
-  --tokenizedInput-background-readonly: var(--salt-editable-primary-background-readonly);
+  --tokenizedInput-background-readonly: var(--salt-editable-background-readonly);
 }
 .saltTokenizedInputNext-secondary {
   --tokenizedInput-background: var(--salt-editable-secondary-background);
-  --tokenizedInput-background-active: var(--salt-editable-secondary-background-active);
-  --tokenizedInput-background-hover: var(--salt-editable-secondary-background-active);
+  --tokenizedInput-background-active: var(--salt-editable-secondary-background);
+  --tokenizedInput-background-hover: var(--salt-editable-secondary-background);
   --tokenizedInput-background-disabled: var(--salt-editable-secondary-background-disabled);
-  --tokenizedInput-background-readonly: var(--salt-editable-secondary-background-readonly);
+  --tokenizedInput-background-readonly: var(--salt-editable-background-readonly);
 }
 .saltTokenizedInputNext-error,
 .saltTokenizedInputNext-error:hover {
@@ -2978,7 +2928,7 @@
   --toolbar-fontSize: var(--salt-text-fontSize);
 }
 .saltToolbar {
-  --toolbar-size: calc(var(--salt-size-base) + var(--salt-size-unit) * 2);
+  --toolbar-size: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);
   background: var(--saltToolbar-background, var(--toolbar-background));
   font-size: var(--toolbar-fontSize);
   justify-content: flex-start;
@@ -3011,11 +2961,11 @@
   width: 100%;
 }
 .saltToolbar[aria-orientation=horizontal] > .Responsive-inner > :not(.saltTooltray) {
-  margin-right: var(--salt-size-unit);
+  margin-right: var(--salt-spacing-100);
   align-self: center;
 }
 .saltToolbar[aria-orientation=horizontal] > .Responsive-inner > .saltTooltray > .Responsive-inner > * {
-  margin-top: var(--salt-size-unit);
+  margin-top: var(--salt-spacing-100);
 }
 .saltToolbar[aria-orientation=horizontal] > .Responsive-inner > .saltTooltray {
   margin-top: 0;
@@ -3027,7 +2977,7 @@
   margin-bottom: auto;
 }
 .saltToolbar[aria-orientation=horizontal] > .Responsive-inner > *:first-child {
-  margin-left: var(--salt-size-unit);
+  margin-left: var(--salt-spacing-100);
 }
 .saltToolbar[aria-orientation=vertical] {
   display: inline-flex;
@@ -3063,17 +3013,17 @@
   flex-grow: 0;
 }
 .saltToolbarField.saltFormFieldLegacy-labelLeft > .saltFormLabel {
-  padding-left: var(--salt-size-unit);
+  padding-left: var(--salt-spacing-100);
 }
 .saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltToolbarButton {
   background: var(--toolbar-background);
 }
 .saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltToolbarButton:hover {
-  background: var(--salt-actionable-secondary-background-hover);
+  background: var(--salt-actionable-subtle-background-hover);
 }
 .saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltButton-active,
 .saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltToolbarButton:active {
-  background: var(--salt-actionable-secondary-background-active) !important;
+  background: var(--salt-actionable-subtle-background-active) !important;
 }
 [data-overflowed] {
   order: 99;
@@ -3116,12 +3066,12 @@
   justify-content: inherit;
 }
 .saltTooltray-horizontal > .Responsive-inner > * {
-  margin-top: var(--salt-size-unit);
-  margin-right: var(--salt-size-unit);
+  margin-top: var(--salt-spacing-100);
+  margin-right: var(--salt-spacing-100);
 }
 .saltTooltray-horizontal:not(:first-child) {
-  margin-left: var(--salt-size-unit);
-  padding-left: calc(var(--salt-size-unit) * 2);
+  margin-left: var(--salt-spacing-100);
+  padding-left: calc(var(--salt-spacing-100) * 2);
 }
 .saltTooltray-horizontal:not(:first-child):before {
   content: "";
@@ -3224,9 +3174,9 @@
   --saltPill-background: var(--salt-selectable-background-hover);
 }
 .saltInputPill.saltInputPill:active {
-  background: var(--salt-actionable-primary-background-active);
-  --saltPill-color: var(--salt-actionable-primary-foreground-active);
-  --saltIcon-color: var(--salt-actionable-primary-foreground-active);
+  background: var(--salt-actionable-bold-background-active);
+  --saltPill-color: var(--salt-actionable-bold-foreground-active);
+  --saltIcon-color: var(--salt-actionable-bold-foreground-active);
 }
 
 /* src/toolbar/overflow-panel/OverflowPanel.css */
@@ -3239,16 +3189,16 @@
   --saltButton-justifyContent: flex-start;
   align-items: stretch;
   color: var(--salt-content-primary-foreground);
-  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);
   display: flex;
   flex-direction: column;
-  padding: calc(var(--salt-size-unit) * 1.5) 0;
+  padding: calc(var(--salt-spacing-100) * 1.5) 0;
   outline: none;
 }
 .saltOverflowPanel [aria-expanded=true] {
-  --saltButton-background: var(--salt-actionable-secondary-background-active);
-  --saltButton-background-hover: var(--salt-actionable-secondary-background-active);
-  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);
+  --saltButton-background: var(--salt-actionable-subtle-background-active);
+  --saltButton-background-hover: var(--salt-actionable-subtle-background-active);
+  --saltIcon-color: var(--salt-actionable-subtle-foreground-active);
 }
 .saltOverflowPanel.saltDropdownBase {
   --saltIcon-margin: 2px 0 0 0px;
@@ -3261,7 +3211,7 @@
 .saltOverflowSeparator {
   background: var(--salt-separable-tertiary-borderColor);
   height: var(--salt-size-fixed-100);
-  margin: calc(var(--salt-size-unit) / 2) 0;
+  margin: calc(var(--salt-spacing-100) / 2) 0;
 }
 
-/* src/91d946a2-b6ab-42c3-8426-e7a367fde92e.css */
+/* src/0a27e0e7-a1ce-4688-bb7b-41bcc81b1e44.css */