@salt-ds/theme 0.0.0-snapshot-20240726102508 → 0.0.0-snapshot-20240726124318

package/css/characteristics/target.css

@@ -0,0 +1,10 @@
+.salt-theme {
+  --salt-target-background-hover: var(--salt-palette-interact-background-hover);
+
+  --salt-target-borderColor-hover: var(--salt-palette-interact-border-hover);
+  --salt-target-borderStyle: dashed;
+  --salt-target-borderStyle-hover: solid;
+  --salt-target-borderStyle-disabled: dashed;
+
+  --salt-target-cursor-disabled: not-allowed;
+}

package/css/characteristics/text-next.css

@@ -0,0 +1,56 @@
+/* Sizes by density */
+.salt-theme-next.salt-density-touch {
+  --salt-text-display1-fontSize: 102px;
+  --salt-text-display1-lineHeight: 133px;
+
+  --salt-text-display2-fontSize: 84px;
+  --salt-text-display2-lineHeight: 109px;
+
+  --salt-text-display3-fontSize: 68px;
+  --salt-text-display3-lineHeight: 88px;
+
+  --salt-text-display4-fontSize: 54px;
+  --salt-text-display4-lineHeight: 70px;
+}
+
+.salt-theme-next.salt-density-low {
+  --salt-text-display1-fontSize: 84px;
+  --salt-text-display1-lineHeight: 109px;
+
+  --salt-text-display2-fontSize: 68px;
+  --salt-text-display2-lineHeight: 88px;
+
+  --salt-text-display3-fontSize: 54px;
+  --salt-text-display3-lineHeight: 70px;
+
+  --salt-text-display4-fontSize: 42px;
+  --salt-text-display4-lineHeight: 55px;
+}
+
+.salt-theme-next.salt-density-medium {
+  --salt-text-display1-fontSize: 68px;
+  --salt-text-display1-lineHeight: 88px;
+
+  --salt-text-display2-fontSize: 54px;
+  --salt-text-display2-lineHeight: 70px;
+
+  --salt-text-display3-fontSize: 42px;
+  --salt-text-display3-lineHeight: 55px;
+
+  --salt-text-display4-fontSize: 32px;
+  --salt-text-display4-lineHeight: 42px;
+}
+
+.salt-theme-next.salt-density-high {
+  --salt-text-display1-fontSize: 54px;
+  --salt-text-display1-lineHeight: 70px;
+
+  --salt-text-display2-fontSize: 42px;
+  --salt-text-display2-lineHeight: 55px;
+
+  --salt-text-display3-fontSize: 32px;
+  --salt-text-display3-lineHeight: 42px;
+
+  --salt-text-display4-fontSize: 24px;
+  --salt-text-display4-lineHeight: 32px;
+}

package/css/characteristics/text.css

@@ -0,0 +1,226 @@
+.salt-theme {
+  /* Misc */
+  --salt-text-letterSpacing: 0;
+  --salt-text-textAlign: left;
+  --salt-text-textAlign-embedded: center;
+  --salt-text-textDecoration: none;
+  --salt-text-textTransform: none;
+
+  /* Action */
+  --salt-text-action-fontFamily: var(--salt-palette-text-fontFamily-action);
+  --salt-text-action-letterSpacing: 0.6px;
+  --salt-text-action-textTransform: uppercase;
+  --salt-text-action-textAlign: center;
+  --salt-text-action-fontWeight: var(--salt-palette-text-action-fontWeight);
+
+  /* Body text (should be used as default) */
+  --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
+  --salt-text-fontWeight: var(--salt-palette-text-body-fontWeight);
+  --salt-text-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
+  --salt-text-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
+
+  /* Notation */
+  --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
+  --salt-text-notation-fontWeight: var(--salt-palette-text-notation-fontWeight);
+  --salt-text-notation-fontWeight-small: var(--salt-palette-text-notation-fontWeight-small);
+  --salt-text-notation-fontWeight-strong: var(--salt-palette-text-notation-fontWeight-strong);
+
+  /* H1 */
+  --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
+  --salt-text-h1-fontWeight: var(--salt-palette-text-heading-fontWeight);
+  --salt-text-h1-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
+  --salt-text-h1-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
+
+  /* H2 */
+  --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
+  --salt-text-h2-fontWeight: var(--salt-palette-text-heading-fontWeight);
+  --salt-text-h2-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
+  --salt-text-h2-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
+
+  /* H3 */
+  --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
+  --salt-text-h3-fontWeight: var(--salt-palette-text-heading-fontWeight);
+  --salt-text-h3-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
+  --salt-text-h3-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
+
+  /* H4 */
+  --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
+  --salt-text-h4-fontWeight: var(--salt-palette-text-heading-fontWeight);
+  --salt-text-h4-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
+  --salt-text-h4-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
+
+  /* Label */
+  --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
+  --salt-text-label-fontWeight: var(--salt-palette-text-body-fontWeight);
+  --salt-text-label-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
+  --salt-text-label-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
+
+  /* Display text */
+  --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
+  --salt-text-display1-fontWeight: var(--salt-palette-text-display-fontWeight);
+  --salt-text-display1-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
+  --salt-text-display1-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
+
+  --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
+  --salt-text-display2-fontWeight: var(--salt-palette-text-display-fontWeight);
+  --salt-text-display2-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
+  --salt-text-display2-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
+
+  --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
+  --salt-text-display3-fontWeight: var(--salt-palette-text-display-fontWeight);
+  --salt-text-display3-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
+  --salt-text-display3-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
+
+  --salt-text-display4-fontFamily: var(--salt-palette-text-fontFamily-heading);
+  --salt-text-display4-fontWeight: var(--salt-typography-fontWeight-semiBold);
+  --salt-text-display4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
+  --salt-text-display4-fontWeight-small: var(--salt-typography-fontWeight-regular);
+
+  /* Code */
+  --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
+}
+
+/* Sizes by density */
+.salt-density-touch {
+  --salt-text-h1-fontSize: 42px;
+  --salt-text-h1-lineHeight: 54px;
+
+  --salt-text-h2-fontSize: 32px;
+  --salt-text-h2-lineHeight: 42px;
+
+  --salt-text-h3-fontSize: 24px;
+  --salt-text-h3-lineHeight: 32px;
+
+  --salt-text-h4-fontSize: 16px;
+  --salt-text-h4-lineHeight: 20px;
+
+  --salt-text-label-fontSize: 14px;
+  --salt-text-label-lineHeight: 18px;
+
+  --salt-text-fontSize: 16px;
+  --salt-text-lineHeight: 20px;
+  --salt-text-minHeight: 20px;
+
+  --salt-text-display1-fontSize: 84px;
+  --salt-text-display1-lineHeight: 109px;
+
+  --salt-text-display2-fontSize: 58px;
+  --salt-text-display2-lineHeight: 76px;
+
+  --salt-text-display3-fontSize: 42px;
+  --salt-text-display3-lineHeight: 54px;
+
+  --salt-text-display4-fontSize: 42px;
+  --salt-text-display4-lineHeight: 54px;
+
+  --salt-text-notation-fontSize: 14px;
+  --salt-text-notation-lineHeight: 18px;
+}
+
+.salt-density-low {
+  --salt-text-h1-fontSize: 32px;
+  --salt-text-h1-lineHeight: 42px;
+
+  --salt-text-h2-fontSize: 24px;
+  --salt-text-h2-lineHeight: 32px;
+
+  --salt-text-h3-fontSize: 18px;
+  --salt-text-h3-lineHeight: 24px;
+
+  --salt-text-h4-fontSize: 14px;
+  --salt-text-h4-lineHeight: 18px;
+
+  --salt-text-label-fontSize: 12px;
+  --salt-text-label-lineHeight: 16px;
+
+  --salt-text-fontSize: 14px;
+  --salt-text-lineHeight: 18px;
+  --salt-text-minHeight: 18px;
+
+  --salt-text-display1-fontSize: 68px;
+  --salt-text-display1-lineHeight: 88px;
+
+  --salt-text-display2-fontSize: 46px;
+  --salt-text-display2-lineHeight: 60px;
+
+  --salt-text-display3-fontSize: 32px;
+  --salt-text-display3-lineHeight: 42px;
+
+  --salt-text-display4-fontSize: 32px;
+  --salt-text-display4-lineHeight: 42px;
+
+  --salt-text-notation-fontSize: 12px;
+  --salt-text-notation-lineHeight: 16px;
+}
+
+.salt-density-medium {
+  --salt-text-h1-fontSize: 24px;
+  --salt-text-h1-lineHeight: 32px;
+
+  --salt-text-h2-fontSize: 18px;
+  --salt-text-h2-lineHeight: 24px;
+
+  --salt-text-h3-fontSize: 14px;
+  --salt-text-h3-lineHeight: 18px;
+
+  --salt-text-h4-fontSize: 12px;
+  --salt-text-h4-lineHeight: 16px;
+
+  --salt-text-label-fontSize: 11px;
+  --salt-text-label-lineHeight: 14px;
+
+  --salt-text-fontSize: 12px;
+  --salt-text-lineHeight: 16px;
+  --salt-text-minHeight: 16px;
+
+  --salt-text-display1-fontSize: 54px;
+  --salt-text-display1-lineHeight: 70px;
+
+  --salt-text-display2-fontSize: 36px;
+  --salt-text-display2-lineHeight: 47px;
+
+  --salt-text-display3-fontSize: 24px;
+  --salt-text-display3-lineHeight: 32px;
+
+  --salt-text-display4-fontSize: 24px;
+  --salt-text-display4-lineHeight: 32px;
+
+  --salt-text-notation-fontSize: 10px;
+  --salt-text-notation-lineHeight: 13px;
+}
+
+.salt-density-high {
+  --salt-text-h1-fontSize: 18px;
+  --salt-text-h1-lineHeight: 24px;
+
+  --salt-text-h2-fontSize: 14px;
+  --salt-text-h2-lineHeight: 18px;
+
+  --salt-text-h3-fontSize: 12px;
+  --salt-text-h3-lineHeight: 16px;
+
+  --salt-text-h4-fontSize: 11px;
+  --salt-text-h4-lineHeight: 14px;
+
+  --salt-text-label-fontSize: 10px;
+  --salt-text-label-lineHeight: 13px;
+
+  --salt-text-fontSize: 11px;
+  --salt-text-lineHeight: 14px;
+  --salt-text-minHeight: 14px;
+
+  --salt-text-display1-fontSize: 42px;
+  --salt-text-display1-lineHeight: 54px;
+
+  --salt-text-display2-fontSize: 28px;
+  --salt-text-display2-lineHeight: 36px;
+
+  --salt-text-display3-fontSize: 18px;
+  --salt-text-display3-lineHeight: 24px;
+
+  --salt-text-display4-fontSize: 18px;
+  --salt-text-display4-lineHeight: 24px;
+
+  --salt-text-notation-fontSize: 8px;
+  --salt-text-notation-lineHeight: 10px;
+}

package/css/characteristics/track-next.css

@@ -0,0 +1,3 @@
+.salt-theme.salt-theme-next {
+  --salt-track-borderColor: var(--salt-palette-alpha);
+}

package/css/characteristics/track.css

@@ -0,0 +1,8 @@
+.salt-theme {
+  --salt-track-borderStyle: solid;
+  --salt-track-borderStyle-active: solid;
+  --salt-track-borderStyle-complete: solid;
+  --salt-track-borderStyle-incomplete: dotted;
+
+  --salt-track-borderColor: var(--salt-palette-neutral-secondary-border);
+}

package/css/deprecated/characteristics.css

@@ -0,0 +1,186 @@
+.salt-theme {
+  /* Differential */
+  --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
+  --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
+
+  /* Editable */
+  --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
+  --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
+  --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
+  --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
+  --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
+
+  /* Measured */
+  --salt-measured-borderStyle: solid;
+  --salt-measured-borderStyle-active: solid;
+  --salt-measured-borderStyle-complete: solid;
+  --salt-measured-borderStyle-incomplete: dotted;
+  --salt-measured-borderWidth: 2px;
+  --salt-measured-borderWidth-active: 2px;
+  --salt-measured-borderWidth-complete: 2px;
+  --salt-measured-borderWidth-incomplete: 2px;
+
+  --salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
+  --salt-measured-textAlign: center;
+
+  --salt-measured-background: var(--salt-palette-measured-background);
+  --salt-measured-background-disabled: var(--salt-palette-measured-background-disabled);
+  --salt-measured-borderColor: var(--salt-palette-measured-border);
+  --salt-measured-borderColor-disabled: var(--salt-palette-measured-border-disabled);
+  --salt-measured-fill: var(--salt-palette-measured-fill);
+  --salt-measured-fill-disabled: var(--salt-palette-measured-fill-disabled);
+  --salt-measured-foreground: var(--salt-palette-measured-foreground);
+  --salt-measured-foreground-hover: var(--salt-palette-measured-foreground-active);
+  --salt-measured-foreground-active: var(--salt-palette-measured-foreground-active);
+  --salt-measured-foreground-undo: var(--salt-palette-measured-foreground-active);
+  --salt-measured-foreground-activeDisabled: var(--salt-palette-measured-foreground-activeDisabled);
+  --salt-measured-foreground-disabled: var(--salt-palette-measured-foreground-disabled);
+
+  /* Overlayable */
+  --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
+  --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
+
+  /* Selectable */
+  --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
+  --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
+
+  --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
+  --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
+  --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
+  --salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active);
+  --salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled);
+  --salt-selectable-cta-background: var(--salt-palette-interact-background);
+  --salt-selectable-cta-background-disabled: var(--salt-palette-interact-background-disabled);
+  --salt-selectable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
+  --salt-selectable-cta-background-selected: var(--salt-palette-interact-cta-background-active);
+  --salt-selectable-cta-background-selectedDisabled: var(--salt-palette-interact-cta-background-activeDisabled);
+
+  --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground); /* Use --salt-content-primary-foreground */
+  --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled); /* --salt-content-primary-foreground-disabled */
+  --salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
+  --salt-selectable-primary-foreground-selected: var(--salt-palette-interact-primary-foreground-active);
+  --salt-selectable-primary-foreground-selectedDisabled: var(--salt-palette-interact-primary-foreground-activeDisabled);
+  --salt-selectable-primary-background: var(--salt-palette-interact-background);
+  --salt-selectable-primary-background-disabled: var(--salt-palette-interact-background-disabled);
+  --salt-selectable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
+  --salt-selectable-primary-background-selected: var(--salt-palette-interact-primary-background-active);
+  --salt-selectable-primary-background-selectedDisabled: var(--salt-palette-interact-primary-background-activeDisabled);
+
+  --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground); /* Use --salt-content-secondary-foreground */
+  --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled); /* Use --salt-content-secondary-foreground-disabled */
+  --salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
+  --salt-selectable-secondary-foreground-selected: var(--salt-palette-interact-secondary-foreground-active);
+  --salt-selectable-secondary-foreground-selectedDisabled: var(--salt-palette-interact-secondary-foreground-activeDisabled);
+  --salt-selectable-secondary-background: var(--salt-palette-interact-background);
+  --salt-selectable-secondary-background-disabled: var(--salt-palette-interact-background-disabled);
+  --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
+  --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
+  --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
+
+  /* Status */
+  --salt-status-info-background-emphasize: var(--salt-status-info-background);
+  --salt-status-success-background-emphasize: var(--salt-status-success-background);
+  --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
+  --salt-status-error-background-emphasize: var(--salt-status-error-background);
+
+  --salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
+  --salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
+  --salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
+  --salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
+  --salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
+  --salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
+  --salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
+
+  --salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
+  --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
+  --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
+  --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
+
+  --salt-status-info-foreground: var(--salt-palette-info-foreground);
+  --salt-status-error-foreground: var(--salt-palette-error-foreground);
+  --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
+  --salt-status-success-foreground: var(--salt-palette-success-foreground);
+
+  /* Actionable */
+  --salt-actionable-letterSpacing: 0.6px;
+  --salt-actionable-textTransform: uppercase;
+  --salt-actionable-textAlign: center;
+  --salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold);
+  --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
+  --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
+
+  /* Text */
+  --salt-text-background-selected: var(--salt-content-foreground-highlight);
+  --salt-text-link-foreground-hover: var(--salt-palette-navigate-foreground-hover);
+  --salt-text-link-foreground-active: var(--salt-palette-navigate-foreground-active);
+  --salt-text-link-foreground-visited: var(--salt-palette-navigate-foreground-visited);
+  --salt-text-link-textDecoration: underline;
+  --salt-text-link-textDecoration-hover: none;
+  --salt-text-link-textDecoration-selected: underline;
+  --salt-text-primary-foreground: var(--salt-palette-neutral-primary-foreground);
+  --salt-text-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
+  --salt-text-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
+  --salt-text-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
+
+  /* Navigable */
+  --salt-navigable-primary-background: var(--salt-palette-navigate-primary-background);
+  --salt-navigable-primary-background-hover: var(--salt-palette-navigate-primary-background-hover);
+  --salt-navigable-primary-background-active: var(--salt-palette-navigate-primary-background-active);
+  --salt-navigable-secondary-background: var(--salt-palette-navigate-secondary-background);
+  --salt-navigable-secondary-background-hover: var(--salt-palette-navigate-secondary-background-hover);
+  --salt-navigable-secondary-background-active: var(--salt-palette-navigate-secondary-background-active);
+  --salt-navigable-tertiary-background: var(--salt-palette-navigate-tertiary-background);
+  --salt-navigable-tertiary-background-hover: var(--salt-palette-navigate-tertiary-background-hover);
+  --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active);
+  --salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);
+
+  /* Accent */
+  --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold); /* Use --salt-text-notation-fontWeight */
+  --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
+  --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
+  --salt-accent-borderColor-disabled: var(--salt-palette-accent-border-disabled); /* Use --salt-container-primary-borderColor-disabled */
+
+  /* Track */
+  --salt-track-borderWidth: 2px; /* Use --salt-size-border-strong */
+  --salt-track-borderWidth-active: 2px; /* Use --salt-size-border-strong */
+  --salt-track-borderWidth-complete: 2px; /* Use --salt-size-border-strong */
+  --salt-track-borderWidth-incomplete: 2px; /* Use --salt-size-border-strong */
+  --salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
+  --salt-track-textAlign: center;
+  --salt-track-background: var(--salt-palette-track-background);
+  --salt-track-background-disabled: var(--salt-palette-track-background-disabled);
+  --salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled);
+
+  /* Taggable */
+  --salt-taggable-cursor-hover: pointer;
+  --salt-taggable-cursor-active: pointer;
+  --salt-taggable-cursor-disabled: not-allowed;
+
+  --salt-taggable-background: var(--salt-palette-interact-primary-background);
+  --salt-taggable-background-hover: var(--salt-palette-interact-primary-background-hover);
+  --salt-taggable-background-active: var(--salt-palette-interact-primary-background-active);
+  --salt-taggable-background-disabled: var(--salt-palette-interact-primary-background-disabled);
+
+  --salt-taggable-foreground: var(--salt-palette-interact-primary-foreground);
+  --salt-taggable-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
+  --salt-taggable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
+  --salt-taggable-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
+}
+
+/* Accent */
+.salt-density-high {
+  --salt-accent-fontSize: 8px; /* Use --salt-text-notation-fontSize */
+  --salt-accent-lineHeight: 11px; /* Use --salt-text-notation-lineHeight */
+}
+.salt-density-medium {
+  --salt-accent-fontSize: 10px; /* Use --salt-text-notation-fontSize */
+  --salt-accent-lineHeight: 13px; /* Use --salt-text-notation-lineHeight */
+}
+.salt-density-low {
+  --salt-accent-fontSize: 12px; /* Use --salt-text-notation-fontSize */
+  --salt-accent-lineHeight: 16px; /* Use --salt-text-notation-lineHeight */
+}
+.salt-density-touch {
+  --salt-accent-fontSize: 14px; /* Use --salt-text-notation-fontSize */
+  --salt-accent-lineHeight: 18px; /* Use --salt-text-notation-lineHeight */
+}

package/css/deprecated/fade.css

@@ -0,0 +1,8 @@
+.salt-theme {
+  --salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
+  --salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
+  --salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-background));
+  --salt-color-orange-600-fade-background: rgba(224, 101, 25, var(--salt-palette-opacity-background));
+  --salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));
+  --salt-color-blue-500-fade-fill: rgba(38, 112, 169, var(--salt-palette-opacity-fill));
+}

package/css/deprecated/foundations.css

@@ -0,0 +1,107 @@
+/*
+* **Deprecated:** Use duration instead
+*/
+.salt-theme {
+  /* Delay */
+  --salt-delay-instant: 100ms;
+  --salt-delay-perceptible: 300ms;
+  --salt-delay-notable: 1000ms;
+  --salt-delay-cutoff: 10000ms;
+
+  /* Icon */
+  --salt-size-icon-base: var(--salt-icon-size-base);
+
+  /* Opacity */
+  --salt-opacity-1: 0.15;
+  --salt-opacity-2: 0.25;
+  --salt-opacity-3: 0.4;
+  --salt-opacity-4: 0.7;
+
+  /* Shadow */
+  --salt-shadow-0: none;
+  --salt-shadow-1: 0 1px 3px 0 var(--salt-shadow-1-color); /* Use --salt-shadow-100 */
+  --salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color); /* Use --salt-shadow-200 */
+  --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color); /* Use --salt-shadow-300 */
+  --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color); /* Use --salt-shadow-400 */
+  --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color); /* Use --salt-shadow-500 */
+
+  /* Typography */
+  --salt-typography-fontFamily: var(--salt-typography-fontFamily-openSans);
+  --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
+}
+
+.salt-theme[data-mode="light"] {
+  --salt-shadow-1-color: rgba(0, 0, 0, 0.1); /* Use --salt-shadow-100-color */
+  --salt-shadow-2-color: rgba(0, 0, 0, 0.1); /* Use --salt-shadow-200-color */
+  --salt-shadow-3-color: rgba(0, 0, 0, 0.15); /* Use --salt-shadow-300-color */
+  --salt-shadow-4-color: rgba(0, 0, 0, 0.2); /* Use --salt-shadow-400-color */
+  --salt-shadow-5-color: rgba(0, 0, 0, 0.3); /* Use --salt-shadow-500-color */
+}
+
+.salt-theme[data-mode="dark"] {
+  --salt-shadow-1-color: rgba(0, 0, 0, 0.5); /* Use --salt-shadow-100-color */
+  --salt-shadow-2-color: rgba(0, 0, 0, 0.5); /* Use --salt-shadow-200-color */
+  --salt-shadow-3-color: rgba(0, 0, 0, 0.55); /* Use --salt-shadow-300-color */
+  --salt-shadow-4-color: rgba(0, 0, 0, 0.55); /* Use --salt-shadow-400-color */
+  --salt-shadow-5-color: rgba(0, 0, 0, 0.65); /* Use --salt-shadow-500-color */
+}
+
+.salt-density-touch,
+.salt-density-low,
+.salt-density-medium,
+.salt-density-high {
+  /* Size */
+  --salt-size-selection: var(--salt-size-selectable);
+  --salt-size-brandBar: 4px; /* Use --salt-size-accent */
+  --salt-size-graphic-small: 12px;
+  --salt-size-graphic-medium: 24px;
+  --salt-size-graphic-large: 48px;
+  --salt-size-divider-height: var(--salt-size-separator-height);
+  --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
+
+  --salt-size-detail: var(--salt-size-compact);
+  --salt-size-basis-unit: 4px;
+
+  --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
+  --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
+  --salt-size-separator-strokeWidth: 1px;
+  --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
+  --salt-size-sharktooth-height: 5px;
+  --salt-size-sharktooth-width: 10px;
+  --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
+
+  /* Z Index */
+  --salt-zIndex-docked: 1050;
+}
+
+.salt-density-high {
+  --salt-size-unit: calc(var(--salt-size-basis-unit) * 1); /* Use --salt-spacing-100 */
+  --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
+  --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5); /* Use --salt-size-bar */
+  --salt-icon-size-base: 10px; /* Use --salt-size-icon */
+  --salt-icon-size-status-adornment: 6px; /* Use --salt-size-adornment */
+}
+
+.salt-density-medium {
+  --salt-size-unit: calc(var(--salt-size-basis-unit) * 2); /* Use --salt-spacing-100 */
+  --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
+  --salt-size-accent: calc(var(--salt-size-basis-unit) * 1); /* Use --salt-size-bar */
+  --salt-icon-size-base: 12px; /* Use --salt-size-icon */
+  --salt-icon-size-status-adornment: 8px; /* Use --salt-size-adornment */
+}
+
+.salt-density-low {
+  --salt-size-unit: calc(var(--salt-size-basis-unit) * 3); /* Use --salt-spacing-100 */
+  --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
+  --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5); /* Use --salt-size-bar */
+  --salt-icon-size-base: 14px; /* Use --salt-size-icon */
+  --salt-icon-size-status-adornment: 10px; /* Use --salt-size-adornment */
+}
+
+.salt-density-touch {
+  --salt-size-unit: calc(var(--salt-size-basis-unit) * 4); /* Use --salt-spacing-100 */
+  --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
+  --salt-size-accent: calc(var(--salt-size-basis-unit) * 2); /* Use --salt-size-bar */
+  --salt-icon-size-base: 16px; /* Use --salt-size-icon */
+  --salt-icon-size-status-adornment: 12px; /* Use --salt-size-adornment */
+}