@vuu-ui/vuu-theme 3.0.0 → 3.1.0-beta.2

package/css/next/characteristics/separable.css

@@ -0,0 +1,11 @@
+.salt-theme.salt-theme-next.vuu-theme {
+  --salt-separable-primary-borderColor: var(--salt-palette-alpha-contrast-mediumHigh);
+  --salt-separable-secondary-borderColor: var(--salt-palette-alpha-contrast-medium);
+  --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-contrast-mediumLow);
+
+  --salt-separable-foreground: var(--salt-palette-foreground-primary);
+  --salt-separable-foreground-hover: var(--salt-palette-foreground-primary);
+  --salt-separable-foreground-active: var(--salt-palette-foreground-primary-alt);
+  --salt-separable-background-hover: var(--salt-palette-alpha-weak);
+  --salt-separable-background-active: var(--salt-palette-accent);
+}

package/css/next/characteristics/status.css

@@ -0,0 +1,30 @@
+.salt-theme.salt-theme-next.vuu-theme {
+  --salt-status-info-foreground-decorative: var(--salt-palette-info);
+  --salt-status-success-foreground-decorative: var(--salt-palette-positive);
+  --salt-status-warning-foreground-decorative: var(--salt-palette-warning);
+  --salt-status-error-foreground-decorative: var(--salt-palette-negative);
+
+  --salt-status-info-foreground-informative: var(--salt-palette-info-strong);
+  --salt-status-success-foreground-informative: var(--salt-palette-positive-strong);
+  --salt-status-warning-foreground-informative: var(--salt-palette-warning-strong);
+  --salt-status-error-foreground-informative: var(--salt-palette-negative-strong);
+
+  --salt-status-info-borderColor: var(--salt-palette-info);
+  --salt-status-success-borderColor: var(--salt-palette-positive);
+  --salt-status-warning-borderColor: var(--salt-palette-warning);
+  --salt-status-error-borderColor: var(--salt-palette-negative);
+
+  --salt-status-info-background: var(--salt-palette-info-weakest);
+  --salt-status-success-background: var(--salt-palette-positive-weakest);
+  --salt-status-warning-background: var(--salt-palette-warning-weakest);
+  --salt-status-error-background: var(--salt-palette-negative-weakest);
+
+  --salt-status-info-bold-background: var(--salt-palette-info);
+  --salt-status-error-bold-background: var(--salt-palette-negative);
+  --salt-status-warning-bold-background: var(--salt-palette-warning);
+  --salt-status-success-bold-background: var(--salt-palette-positive);
+
+  --salt-status-success-background-selected: var(--salt-palette-positive-weaker);
+  --salt-status-warning-background-selected: var(--salt-palette-warning-weaker);
+  --salt-status-error-background-selected: var(--salt-palette-negative-weaker);
+}

package/css/next/characteristics/target.css

@@ -0,0 +1,4 @@
+.salt-theme.salt-theme-next.vuu-theme {
+  --salt-target-background-hover: var(--salt-palette-accent-weakest);
+  --salt-target-borderColor-hover: var(--salt-palette-accent);
+}

package/css/next/characteristics/text.css

@@ -0,0 +1,226 @@
+.salt-theme.salt-theme-next.vuu-theme {
+  /* Misc */
+  --salt-text-letterSpacing: 0;
+  --salt-text-textAlign: left;
+  --salt-text-textAlign-embedded: center;
+
+  /* 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);
+  --salt-text-action-fontWeight-small: var(--salt-palette-text-action-fontWeight-small);
+  --salt-text-action-fontWeight-strong: var(--salt-palette-text-action-fontWeight-strong);
+
+  /* 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-palette-text-display-fontWeight);
+  --salt-text-display4-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
+  --salt-text-display4-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
+
+  /* Code */
+  --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
+}
+
+/* Sizes by density */
+.salt-theme-next.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: 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-text-notation-fontSize: 14px;
+  --salt-text-notation-lineHeight: 18px;
+}
+
+.salt-theme-next.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: 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-text-notation-fontSize: 12px;
+  --salt-text-notation-lineHeight: 16px;
+}
+
+.salt-theme-next.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: 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-text-notation-fontSize: 10px;
+  --salt-text-notation-lineHeight: 13px;
+}
+
+.salt-theme-next.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: 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;
+
+  --salt-text-notation-fontSize: 8px;
+  --salt-text-notation-lineHeight: 10px;
+}

package/css/next/deprecated/characteristics.css

@@ -0,0 +1,90 @@
+.salt-theme.salt-theme-next.vuu-theme {
+  --salt-navigable-indicator-active: var(--salt-palette-accent);
+
+  --salt-navigable-background-hover: var(--salt-palette-alpha-contrast-lowest);
+
+  --salt-selectable-background-blurSelected: var(--salt-palette-neutral-weakest);
+
+  --salt-status-static-foreground: var(--salt-palette-foreground-secondary); /* Use --salt-content-secondary-foreground */
+
+  --salt-status-negative-foreground: var(--salt-palette-negative); /* Use ---salt-sentiment-negative-foreground-decorative */
+  --salt-status-positive-foreground: var(--salt-palette-positive); /* Use ---salt-sentiment-positive-foreground-decorative */
+
+  --salt-track-borderColor: var(--salt-palette-alpha-contrast-high); /* Use --salt-sentiment-neutral-track */
+  --salt-track-borderColor-disabled: var(--salt-palette-alpha-contrast-lower); /* Use --salt-sentiment-neutral-track-disabled */
+
+  --salt-actionable-accented-bold-background-disabled: var(--salt-palette-accent-disabled);
+  --salt-actionable-accented-bold-borderColor-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-accented-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
+  --salt-actionable-accented-background-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-accented-borderColor-disabled: var(--salt-palette-accent-disabled);
+  --salt-actionable-accented-foreground-disabled: var(--salt-palette-accent-strong-disabled);
+  --salt-actionable-accented-subtle-background-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-accented-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-accented-subtle-foreground-disabled: var(--salt-palette-accent-strong-disabled);
+  --salt-actionable-bold-background-disabled: var(--salt-palette-neutral-disabled);
+  --salt-actionable-bold-borderColor-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
+  --salt-actionable-background-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-borderColor-disabled: var(--salt-palette-neutral-disabled);
+  --salt-actionable-foreground-disabled: var(--salt-palette-foreground-primary-disabled);
+  --salt-actionable-subtle-background-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-subtle-foreground-disabled: var(--salt-palette-foreground-primary-disabled);
+  --salt-actionable-negative-bold-background-disabled: var(--salt-palette-negative-disabled);
+  --salt-actionable-negative-bold-borderColor-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-negative-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
+  --salt-actionable-negative-background-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-negative-borderColor-disabled: var(--salt-palette-negative-disabled);
+  --salt-actionable-negative-foreground-disabled: var(--salt-palette-negative-strong-disabled);
+  --salt-actionable-negative-subtle-background-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-negative-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-negative-subtle-foreground-disabled: var(--salt-palette-negative-strong-disabled);
+  --salt-actionable-positive-bold-background-disabled: var(--salt-palette-positive-disabled);
+  --salt-actionable-positive-bold-borderColor-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-positive-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
+  --salt-actionable-positive-background-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-positive-borderColor-disabled: var(--salt-palette-positive-disabled);
+  --salt-actionable-positive-foreground-disabled: var(--salt-palette-positive-strong-disabled);
+  --salt-actionable-positive-subtle-background-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-positive-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-positive-subtle-foreground-disabled: var(--salt-palette-positive-strong-disabled);
+  --salt-actionable-caution-bold-background-disabled: var(--salt-palette-warning-disabled);
+  --salt-actionable-caution-bold-borderColor-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-caution-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
+  --salt-actionable-caution-background-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-caution-borderColor-disabled: var(--salt-palette-warning-disabled);
+  --salt-actionable-caution-foreground-disabled: var(--salt-palette-warning-strong-disabled);
+  --salt-actionable-caution-subtle-background-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-caution-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
+  --salt-actionable-caution-subtle-foreground-disabled: var(--salt-palette-warning-strong-disabled);
+
+  --salt-separable-background: var(--salt-palette-alpha-none);
+
+  --salt-category-1-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-2-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-3-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-4-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-5-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-6-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-7-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-8-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-9-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-10-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-11-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-12-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-13-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-14-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-15-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-16-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-17-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-18-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-19-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-20-bold-foreground: var(--salt-palette-foreground-primary-alt);
+
+  --salt-accent-foreground: var(--salt-palette-foreground-primary-alt);
+
+  --salt-content-foreground-highlight: var(--salt-palette-accent-weaker);
+  --salt-content-foreground-active: var(--salt-palette-accent-stronger);
+  --salt-content-foreground-hover: var(--salt-palette-accent-strong);
+}

package/css/next/deprecated/foundations.css

@@ -0,0 +1,4 @@
+.salt-theme.salt-theme-next.vuu-theme {
+  --salt-color-background-gradientlight-rgb: var(--salt-color-background-titanium-rgb);
+  --salt-color-background-gradientlight: var(--salt-color-background-titanium);
+}

package/css/next/deprecated/palette.css

@@ -0,0 +1,89 @@
+.salt-theme.vuu-theme[data-mode="light"] {
+  --salt-palette-foreground-active: var(--salt-color-blue-700);
+  --salt-palette-foreground-hover: var(--salt-color-blue-600);
+
+  --salt-palette-warning-weak: var(--salt-color-orange-100);
+  --salt-palette-positive-weak: var(--salt-color-green-100);
+  --salt-palette-info-weak: var(--salt-color-blue-100);
+  --salt-palette-negative-weak: var(--salt-color-red-100);
+
+  --salt-palette-warning-action-active: var(--salt-color-orange-800);
+  --salt-palette-neutral-action-active: var(--salt-color-gray-800);
+  --salt-palette-positive-action-active: var(--salt-color-green-800);
+  --salt-palette-negative-action-active: var(--salt-color-red-800);
+
+  --salt-palette-warning-action-hover: var(--salt-color-orange-600);
+  --salt-palette-neutral-action-hover: var(--salt-color-gray-600);
+  --salt-palette-positive-action-hover: var(--salt-color-green-600);
+  --salt-palette-negative-action-hover: var(--salt-color-red-600);
+
+  --salt-palette-negative-disabled: var(--salt-color-red-500-40a);
+  --salt-palette-negative-strong-disabled: var(--salt-color-red-600-40a);
+  --salt-palette-positive-disabled: var(--salt-color-green-500-40a);
+  --salt-palette-positive-strong-disabled: var(--salt-color-green-600-40a);
+  --salt-palette-warning-disabled: var(--salt-color-orange-500-40a);
+  --salt-palette-warning-strong-disabled: var(--salt-color-orange-600-40a);
+
+  --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-300-40a);
+  --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-300-10a);
+  --salt-palette-neutral-weak-disabled: var(--salt-color-gray-400-40a);
+}
+
+.salt-theme.vuu-theme[data-mode="dark"] {
+  --salt-palette-foreground-active: var(--salt-color-blue-300);
+  --salt-palette-foreground-hover: var(--salt-color-blue-400);
+
+  --salt-palette-warning-weak: var(--salt-color-orange-900);
+  --salt-palette-positive-weak: var(--salt-color-green-900);
+  --salt-palette-info-weak: var(--salt-color-blue-900);
+  --salt-palette-negative-weak: var(--salt-color-red-900);
+
+  --salt-palette-warning-action-active: var(--salt-color-orange-800);
+  --salt-palette-neutral-action-active: var(--salt-color-gray-800);
+  --salt-palette-positive-action-active: var(--salt-color-green-800);
+  --salt-palette-negative-action-active: var(--salt-color-red-800);
+
+  --salt-palette-warning-action-hover: var(--salt-color-orange-600);
+  --salt-palette-neutral-action-hover: var(--salt-color-gray-600);
+  --salt-palette-positive-action-hover: var(--salt-color-green-600);
+  --salt-palette-negative-action-hover: var(--salt-color-red-600);
+
+  --salt-palette-negative-disabled: var(--salt-color-red-500-40a);
+  --salt-palette-negative-strong-disabled: var(--salt-color-red-400-40a);
+  --salt-palette-positive-disabled: var(--salt-color-green-500-40a);
+  --salt-palette-positive-strong-disabled: var(--salt-color-green-400-40a);
+  --salt-palette-warning-disabled: var(--salt-color-orange-500-40a);
+  --salt-palette-warning-strong-disabled: var(--salt-color-orange-400-40a);
+
+  --salt-palette-neutral-weaker-disabled: var(--salt-color-gray-700-40a);
+  --salt-palette-neutral-weaker-readonly: var(--salt-color-gray-700-10a);
+  --salt-palette-neutral-weak-disabled: var(--salt-color-gray-600-40a);
+}
+
+.salt-theme.salt-theme-next.vuu-theme[data-mode="light"][data-accent="blue"] {
+  --salt-palette-accent-action-active: var(--salt-color-blue-800);
+  --salt-palette-accent-action-hover: var(--salt-color-blue-600);
+  --salt-palette-accent-strong-disabled: var(--salt-color-blue-600-40a);
+  --salt-palette-accent-stronger-disabled: var(--salt-color-blue-700-40a);
+}
+
+.salt-theme.salt-theme-next.vuu-theme[data-mode="dark"][data-accent="blue"] {
+  --salt-palette-accent-action-active: var(--salt-color-blue-800);
+  --salt-palette-accent-action-hover: var(--salt-color-blue-600);
+  --salt-palette-accent-strong-disabled: var(--salt-color-blue-400-40a);
+  --salt-palette-accent-stronger-disabled: var(--salt-color-blue-300-40a);
+}
+
+.salt-theme.salt-theme-next.vuu-theme[data-mode="light"][data-accent="teal"] {
+  --salt-palette-accent-action-active: var(--salt-color-teal-800);
+  --salt-palette-accent-action-hover: var(--salt-color-teal-600);
+  --salt-palette-accent-strong-disabled: var(--salt-color-teal-600-40a);
+  --salt-palette-accent-stronger-disabled: var(--salt-color-teal-700-40a);
+}
+
+.salt-theme.salt-theme-next.vuu-theme[data-mode="dark"][data-accent="teal"] {
+  --salt-palette-accent-action-active: var(--salt-color-teal-800);
+  --salt-palette-accent-action-hover: var(--salt-color-teal-600);
+  --salt-palette-accent-strong-disabled: var(--salt-color-teal-400-40a);
+  --salt-palette-accent-stronger-disabled: var(--salt-color-teal-300-40a);
+}

package/css/next/foundations/alpha.css

@@ -0,0 +1,39 @@
+.salt-theme.salt-theme-next.vuu-theme {
+  --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
+  --salt-color-blue-300-40a: rgba(var(--salt-color-blue-300-rgb), 0.4);
+  --salt-color-blue-400-40a: rgba(var(--salt-color-blue-400-rgb), 0.4);
+  --salt-color-blue-500-40a: rgba(var(--salt-color-blue-500-rgb), 0.4);
+  --salt-color-blue-600-40a: rgba(var(--salt-color-blue-600-rgb), 0.4);
+  --salt-color-blue-700-40a: rgba(var(--salt-color-blue-700-rgb), 0.4);
+  --salt-color-blue-800-40a: rgba(var(--salt-color-blue-800-rgb), 0.4);
+  --salt-color-gray-300-10a: rgba(var(--salt-color-gray-300-rgb), 0.1);
+  --salt-color-gray-300-40a: rgba(var(--salt-color-gray-300-rgb), 0.4);
+  --salt-color-gray-400-40a: rgba(var(--salt-color-gray-400-rgb), 0.4);
+  --salt-color-gray-500-10a: rgba(var(--salt-color-gray-500-rgb), 0.1);
+  --salt-color-gray-500-40a: rgba(var(--salt-color-gray-500-rgb), 0.4);
+  --salt-color-gray-600-40a: rgba(var(--salt-color-gray-600-rgb), 0.4);
+  --salt-color-gray-700-10a: rgba(var(--salt-color-gray-700-rgb), 0.1);
+  --salt-color-gray-700-40a: rgba(var(--salt-color-gray-700-rgb), 0.4);
+  --salt-color-green-400-40a: rgba(var(--salt-color-green-400-rgb), 0.4);
+  --salt-color-green-500-40a: rgba(var(--salt-color-green-500-rgb), 0.4);
+  --salt-color-green-600-40a: rgba(var(--salt-color-green-600-rgb), 0.4);
+  --salt-color-orange-400-40a: rgba(var(--salt-color-orange-400-rgb), 0.4);
+  --salt-color-orange-500-40a: rgba(var(--salt-color-orange-500-rgb), 0.4);
+  --salt-color-orange-600-40a: rgba(var(--salt-color-orange-600-rgb), 0.4);
+  --salt-color-red-400-40a: rgba(var(--salt-color-red-400-rgb), 0.4);
+  --salt-color-red-500-40a: rgba(var(--salt-color-red-500-rgb), 0.4);
+  --salt-color-red-600-40a: rgba(var(--salt-color-red-600-rgb), 0.4);
+  --salt-color-teal-200-40a: rgba(var(--salt-color-teal-200-rgb), 0.4);
+  --salt-color-teal-300-40a: rgba(var(--salt-color-teal-300-rgb), 0.4);
+  --salt-color-teal-400-40a: rgba(var(--salt-color-teal-400-rgb), 0.4);
+  --salt-color-teal-500-40a: rgba(var(--salt-color-teal-500-rgb), 0.4);
+  --salt-color-teal-600-40a: rgba(var(--salt-color-teal-600-rgb), 0.4);
+  --salt-color-teal-700-40a: rgba(var(--salt-color-teal-700-rgb), 0.4);
+  --salt-color-teal-800-40a: rgba(var(--salt-color-teal-800-rgb), 0.4);
+  --salt-color-background-snow-40a: rgba(var(--salt-color-background-snow-rgb), 0.4);
+  --salt-color-background-marble-40a: rgba(var(--salt-color-background-marble-rgb), 0.4);
+  --salt-color-background-limestone-40a: rgba(var(--salt-color-background-limestone-rgb), 0.4);
+  --salt-color-background-granite-40a: rgba(var(--salt-color-background-granite-rgb), 0.4);
+  --salt-color-background-jet-40a: rgba(var(--salt-color-background-jet-rgb), 0.4);
+  --salt-color-background-leather-40a: rgba(var(--salt-color-background-leather-rgb), 0.4);
+}