@salt-ds/lab 1.0.0-alpha.102 → 1.0.0-alpha.104

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,12 +92,144 @@
   flex-shrink: 0;
 }
 
+/* src/avatar-group/AvatarGroup.css */
+.saltAvatarGroup {
+  --avatarGroup-overlap: var(--saltAvatarGroup-overlap, calc(var(--salt-size-base) * 0.25));
+  --avatarGroup-gap: var(--saltAvatarGroup-gap, var(--salt-size-fixed-100));
+  --avatarGroup-gap-feather: var(--saltAvatarGroup-gap-feather, 0.1px);
+  --avatarGroup-size-multiplier: var(--saltAvatarGroup-size-multiplier, 1);
+  --avatarGroup-item-size: var(--saltAvatar-size, calc(var(--salt-size-base) * var(--avatarGroup-size-multiplier)));
+  display: flex;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  position: relative;
+  border-radius: var(--salt-palette-corner-strongest, 50%);
+}
+.saltAvatarGroup .saltAvatar {
+  --avatar-size-multiplier: var(--avatarGroup-size-multiplier);
+}
+.saltAvatarGroup > :is(.saltAvatar, .saltAvatarGroupCount):not(:first-child) {
+  margin-left: calc(-1 * var(--avatarGroup-overlap));
+}
+.saltAvatarGroup:focus-visible {
+  outline-offset: var(--salt-spacing-fixed-200);
+}
+.saltAvatarGroup::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background-color: transparent;
+}
+button.saltAvatarGroup,
+a.saltAvatarGroup {
+  cursor: var(--salt-cursor-hover);
+}
+button.saltAvatarGroup:disabled {
+  cursor: var(--salt-cursor-disabled);
+}
+.saltAvatarGroup > :is(.saltAvatar, .saltAvatarGroupCount):not(:first-child)::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border-radius: inherit;
+  border: var(--avatarGroup-gap) var(--salt-borderStyle-solid) var(--salt-container-primary-background);
+  pointer-events: none;
+}
+@supports selector(:has(*)) {
+  .saltAvatarGroup > :is(.saltAvatar, .saltAvatarGroupCount):not(:first-child)::after {
+    border: none;
+  }
+  .saltAvatarGroup > :is(.saltAvatar, .saltAvatarGroupCount):has(+ :is(.saltAvatar, .saltAvatarGroupCount):not(.saltAvatar-entity, .saltAvatarGroupCount-entity)) {
+    --avatarGroup-mask-radius: calc(var(--avatarGroup-item-size) / 2 + var(--avatarGroup-gap));
+    --avatarGroup-mask-x: calc(var(--avatarGroup-item-size) * 1.5 - var(--avatarGroup-overlap));
+    -webkit-mask:
+      radial-gradient(
+        circle var(--avatarGroup-mask-radius) at var(--avatarGroup-mask-x) 50%,
+        transparent calc(var(--avatarGroup-mask-radius) - var(--avatarGroup-gap-feather)),
+        black calc(var(--avatarGroup-mask-radius) + var(--avatarGroup-gap-feather)));
+    mask:
+      radial-gradient(
+        circle var(--avatarGroup-mask-radius) at var(--avatarGroup-mask-x) 50%,
+        transparent calc(var(--avatarGroup-mask-radius) - var(--avatarGroup-gap-feather)),
+        black calc(var(--avatarGroup-mask-radius) + var(--avatarGroup-gap-feather)));
+  }
+  .saltAvatarGroup > :is(.saltAvatar, .saltAvatarGroupCount):has(+ :is(.saltAvatar-entity, .saltAvatarGroupCount-entity)) {
+    --avatarGroup-notch-corner: var(--saltAvatar-entity-borderRadius, var(--salt-palette-corner-weak, 0));
+    --avatarGroup-notch-radius: calc(var(--avatarGroup-notch-corner) + var(--avatarGroup-gap));
+    --avatarGroup-notch-x: calc(var(--avatarGroup-item-size) - var(--avatarGroup-overlap) - var(--avatarGroup-gap));
+    -webkit-mask:
+      linear-gradient(
+        to right,
+        black var(--avatarGroup-notch-x),
+        transparent var(--avatarGroup-notch-x)) 0 0 / 100% 100% no-repeat,
+      radial-gradient(
+        circle var(--avatarGroup-notch-radius) at 100% 100%,
+        transparent calc(100% - var(--avatarGroup-gap-feather)),
+        black 100%) var(--avatarGroup-notch-x) calc(-1 * var(--avatarGroup-gap)) / var(--avatarGroup-notch-radius) var(--avatarGroup-notch-radius) no-repeat,
+      radial-gradient(
+        circle var(--avatarGroup-notch-radius) at 100% 0%,
+        transparent calc(100% - var(--avatarGroup-gap-feather)),
+        black 100%) var(--avatarGroup-notch-x) calc(var(--avatarGroup-item-size) - var(--avatarGroup-notch-corner)) / var(--avatarGroup-notch-radius) var(--avatarGroup-notch-radius) no-repeat;
+    mask:
+      linear-gradient(
+        to right,
+        black var(--avatarGroup-notch-x),
+        transparent var(--avatarGroup-notch-x)) 0 0 / 100% 100% no-repeat,
+      radial-gradient(
+        circle var(--avatarGroup-notch-radius) at 100% 100%,
+        transparent calc(100% - var(--avatarGroup-gap-feather)),
+        black 100%) var(--avatarGroup-notch-x) calc(-1 * var(--avatarGroup-gap)) / var(--avatarGroup-notch-radius) var(--avatarGroup-notch-radius) no-repeat,
+      radial-gradient(
+        circle var(--avatarGroup-notch-radius) at 100% 0%,
+        transparent calc(100% - var(--avatarGroup-gap-feather)),
+        black 100%) var(--avatarGroup-notch-x) calc(var(--avatarGroup-item-size) - var(--avatarGroup-notch-corner)) / var(--avatarGroup-notch-radius) var(--avatarGroup-notch-radius) no-repeat;
+  }
+}
+@media (hover: hover) {
+  button.saltAvatarGroup:hover::after,
+  a.saltAvatarGroup:hover::after {
+    background-color: var(--salt-overlayable-background-hover);
+  }
+  button.saltAvatarGroup:disabled:hover::after {
+    background-color: transparent;
+  }
+}
+
+/* src/avatar-group/AvatarGroupCount.css */
+.saltAvatarGroupCount {
+  --avatarGroupCount-size: var(--avatarGroup-item-size, var(--salt-size-base));
+  color: var(--salt-content-bold-foreground);
+  background: var(--salt-sentiment-neutral-background);
+  font-family: var(--salt-text-notation-fontFamily);
+  font-size: calc(var(--salt-text-notation-fontSize) * var(--avatarGroup-size-multiplier, 1));
+  font-weight: var(--salt-text-notation-fontWeight);
+  line-height: var(--salt-text-notation-lineHeight);
+  width: var(--avatarGroupCount-size);
+  min-width: var(--avatarGroupCount-size);
+  height: var(--avatarGroupCount-size);
+  min-height: var(--avatarGroupCount-size);
+  border-radius: var(--salt-palette-corner-strongest, 50%);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  user-select: none;
+}
+.saltAvatarGroupCount-entity {
+  border-radius: var(--salt-palette-corner-weak, 0);
+}
+
 /* 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;
@@ -124,8 +256,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 {
@@ -136,7 +268,7 @@
   margin-left: 8px;
 }
 .saltCascadingMenuItem-menuItemStartAdornmentContainer {
-  margin-right: var(--salt-size-unit);
+  margin-right: var(--salt-spacing-100);
   width: 12px;
 }
 .saltCascadingMenuItem-menuItemAdornmentHidden {
@@ -166,15 +298,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(
@@ -197,14 +329,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);
@@ -228,7 +360,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 {
@@ -241,14 +373,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 {
@@ -259,22 +391,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;
@@ -284,7 +416,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);
 }
@@ -299,7 +431,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;
@@ -309,15 +441,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;
@@ -336,7 +468,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;
@@ -365,10 +497,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);
@@ -413,7 +545,7 @@
 }
 .saltColorChooserSwatch-active {
   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-cta-foreground-active) !important;
+  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);
@@ -446,11 +578,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;
@@ -458,7 +590,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 */
@@ -510,14 +642,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;
@@ -571,26 +703,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;
@@ -602,7 +734,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;
@@ -611,30 +743,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;
@@ -644,13 +776,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 {
@@ -694,13 +826,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);
@@ -710,7 +842,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 */
@@ -768,16 +900,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%;
@@ -945,10 +1077,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 {
@@ -978,17 +1110,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(
@@ -1132,8 +1264,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));
 }
 
@@ -1240,19 +1372,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 {
@@ -1269,7 +1401,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;
@@ -1313,19 +1445,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;
@@ -1343,7 +1475,7 @@
 
 /* src/input-legacy/StaticInputAdornment.css */
 .saltStaticInputAdornment {
-  --inputLegacy-staticAdornment-padding: var(--salt-size-unit);
+  --inputLegacy-staticAdornment-padding: var(--salt-spacing-100);
 }
 .saltStaticInputAdornment {
   display: flex;
@@ -1360,8 +1492,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);
@@ -1458,7 +1590,7 @@
   --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);
@@ -1560,7 +1692,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;
@@ -1574,7 +1706,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);
@@ -1656,13 +1788,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);
@@ -1734,7 +1866,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;
@@ -1807,7 +1939,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);
 }
 
@@ -1815,14 +1947,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 {
@@ -1832,7 +1964,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 */
@@ -1868,7 +2000,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 {
@@ -1907,7 +2039,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;
@@ -1932,6 +2064,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;
@@ -1939,19 +2147,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;
@@ -1971,7 +2179,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;
@@ -1987,7 +2195,7 @@
 }
 .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);
@@ -2003,7 +2211,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);
@@ -2019,7 +2227,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);
@@ -2120,7 +2328,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 {
@@ -2163,13 +2371,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;
@@ -2222,7 +2430,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);
@@ -2235,7 +2443,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);
@@ -2249,7 +2457,7 @@
   --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 */
@@ -2283,7 +2491,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;
@@ -2327,17 +2535,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%;
@@ -2359,9 +2567,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);
@@ -2372,7 +2580,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);
@@ -2403,16 +2611,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 */
@@ -2451,27 +2659,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 {
@@ -2497,14 +2705,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,
@@ -2559,11 +2767,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 */
@@ -2608,17 +2816,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 {
@@ -2747,7 +2955,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;
@@ -2780,11 +2988,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;
@@ -2796,7 +3004,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;
@@ -2832,17 +3040,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;
@@ -2885,12 +3093,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: "";
@@ -2993,9 +3201,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 */
@@ -3011,13 +3219,13 @@
   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;
@@ -3030,7 +3238,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/1a50dc21-2a90-4cb7-8467-768f032f57ae.css */
+/* src/365b7942-9a94-47d3-8859-a0898395c7d6.css */