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

package/css/foundations/duration.css

@@ -0,0 +1,7 @@
+.salt-theme.vuu-theme,
+.salt-theme.vuu-theme {
+  --salt-duration-instant: 0ms;
+  --salt-duration-perceptible: 300ms;
+  --salt-duration-notable: 1000ms;
+  --salt-duration-cutoff: 10000ms;
+}

package/css/foundations/index.css

@@ -0,0 +1,11 @@
+@import url(./alpha.css);
+@import url(./animation.css);
+@import url(./borderStyle.css);
+@import url(./color.css);
+@import url(./cursor.css);
+@import url(./curve.css);
+@import url(./duration.css);
+@import url(./size.css);
+@import url(./spacing.css);
+@import url(./typography.css);
+@import url(./zindex.css);

package/css/foundations/size.css

@@ -0,0 +1,54 @@
+.salt-density-high {
+  --salt-size-adornment: 6px;
+  --salt-size-bar: 2px;
+  --salt-size-base: 20px;
+  --salt-size-icon: 10px;
+  --salt-size-indicator: 2px;
+  --salt-size-selectable: 12px;
+  --salt-size-bar-strong: 4px;
+}
+
+.salt-density-medium {
+  --salt-size-adornment: 8px;
+  --salt-size-bar: 4px;
+  --salt-size-base: 28px;
+  --salt-size-icon: 12px;
+  --salt-size-indicator: 3px;
+  --salt-size-selectable: 14px;
+  --salt-size-bar-strong: 8px;
+}
+
+.salt-density-low {
+  --salt-size-adornment: 10px;
+  --salt-size-bar: 6px;
+  --salt-size-base: 36px;
+  --salt-size-icon: 14px;
+  --salt-size-indicator: 4px;
+  --salt-size-selectable: 16px;
+  --salt-size-bar-strong: 12px;
+}
+
+.salt-density-touch {
+  --salt-size-adornment: 12px;
+  --salt-size-bar: 8px;
+  --salt-size-base: 44px;
+  --salt-size-icon: 16px;
+  --salt-size-indicator: 5px;
+  --salt-size-selectable: 18px;
+  --salt-size-bar-strong: 16px;
+}
+
+.salt-density-touch,
+.salt-density-low,
+.salt-density-medium,
+.salt-density-high {
+  --salt-size-fixed-100: 1px;
+  --salt-size-fixed-200: 2px;
+  --salt-size-fixed-300: 3px;
+  --salt-size-fixed-400: 4px;
+  --salt-size-fixed-500: 5px;
+  --salt-size-fixed-600: 6px;
+  --salt-size-fixed-700: 7px;
+  --salt-size-fixed-800: 8px;
+  --salt-size-fixed-900: 9px;
+}

package/css/foundations/spacing.css

@@ -0,0 +1,52 @@
+.salt-density-touch {
+  --salt-spacing-100: 16px;
+}
+
+.salt-density-low {
+  --salt-spacing-100: 12px;
+}
+
+.salt-density-medium {
+  --salt-spacing-100: 8px;
+}
+
+.salt-density-high {
+  --salt-spacing-100: 4px;
+}
+
+.salt-density-touch,
+.salt-density-low,
+.salt-density-medium,
+.salt-density-high {
+  --salt-spacing-25: calc(0.25 * var(--salt-spacing-100));
+  --salt-spacing-50: calc(0.5 * var(--salt-spacing-100));
+  --salt-spacing-75: calc(0.75 * var(--salt-spacing-100));
+
+  --salt-spacing-150: calc(1.5 * var(--salt-spacing-100));
+  --salt-spacing-200: calc(2 * var(--salt-spacing-100));
+  --salt-spacing-250: calc(2.5 * var(--salt-spacing-100));
+  --salt-spacing-300: calc(3 * var(--salt-spacing-100));
+  --salt-spacing-350: calc(3.5 * var(--salt-spacing-100));
+  --salt-spacing-400: calc(4 * var(--salt-spacing-100));
+  --salt-spacing-450: calc(4.5 * var(--salt-spacing-100));
+  --salt-spacing-500: calc(5 * var(--salt-spacing-100));
+  --salt-spacing-550: calc(5.5 * var(--salt-spacing-100));
+  --salt-spacing-600: calc(6 * var(--salt-spacing-100));
+  --salt-spacing-650: calc(6.5 * var(--salt-spacing-100));
+  --salt-spacing-700: calc(7 * var(--salt-spacing-100));
+  --salt-spacing-750: calc(7.5 * var(--salt-spacing-100));
+  --salt-spacing-800: calc(8 * var(--salt-spacing-100));
+  --salt-spacing-850: calc(8.5 * var(--salt-spacing-100));
+  --salt-spacing-900: calc(9 * var(--salt-spacing-100));
+  --salt-spacing-950: calc(9.5 * var(--salt-spacing-100));
+
+  --salt-spacing-fixed-100: 1px;
+  --salt-spacing-fixed-200: 2px;
+  --salt-spacing-fixed-300: 3px;
+  --salt-spacing-fixed-400: 4px;
+  --salt-spacing-fixed-500: 5px;
+  --salt-spacing-fixed-600: 6px;
+  --salt-spacing-fixed-700: 7px;
+  --salt-spacing-fixed-800: 8px;
+  --salt-spacing-fixed-900: 9px;
+}

package/css/foundations/typography.css

@@ -0,0 +1,15 @@
+.salt-theme.vuu-theme,
+.salt-theme.vuu-theme {
+  --salt-typography-fontFamily-nunito: "Nunito Sans";
+
+  --salt-typography-fontWeight-light: 300;
+  --salt-typography-fontWeight-regular: 400;
+  --salt-typography-fontWeight-medium: 500;
+  --salt-typography-fontWeight-semiBold: 600;
+  --salt-typography-fontWeight-bold: 700;
+  --salt-typography-fontWeight-extraBold: 800;
+
+  --salt-typography-textDecoration-none: none;
+  --salt-typography-textDecoration-underline: underline;
+  --salt-typography-textDecoration-italic: italic;
+}

package/css/foundations/zindex.css

@@ -0,0 +1,14 @@
+.salt-density-touch,
+.salt-density-low,
+.salt-density-medium,
+.salt-density-high {
+  --salt-zIndex-default: 1;
+  --salt-zIndex-popout: 1000;
+  --salt-zIndex-appHeader: 1100;
+  --salt-zIndex-drawer: 1200;
+  --salt-zIndex-modal: 1300;
+  --salt-zIndex-notification: 1400;
+  --salt-zIndex-dragObject: 1420;
+  --salt-zIndex-contextMenu: 1450;
+  --salt-zIndex-flyover: 1500;
+}

package/css/global.css

@@ -0,0 +1,51 @@
+/**
+ * Have some global styles to simulate more realistic app. Currently only for Storybook.
+ */
+
+.salt-theme.vuu-theme,
+.salt-theme.vuu-theme {
+  color: var(--salt-content-primary-foreground);
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  letter-spacing: var(--salt-text-letterSpacing);
+  line-height: var(--salt-text-lineHeight);
+}
+
+.salt-theme.vuu-theme[data-mode="light"],
+.salt-theme.vuu-theme[data-mode="light"] {
+  color-scheme: light;
+}
+
+.salt-theme.vuu-theme[data-mode="dark"],
+.salt-theme.vuu-theme[data-mode="dark"] {
+  color-scheme: dark;
+}
+
+/* This uses the :where selector so it doesn't add any specificity */
+:where(.salt-theme) :focus-visible {
+  outline: var(--salt-focused-outline);
+}
+
+.salt-visuallyHidden {
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.saltFocusVisible:after,
+.focused:focus:after,
+.focused:focus-visible:after {
+  content: "";
+  inset: var(--salt-focused-outlineInset);
+  outline-color: var(--salt-focused-outlineColor);
+  outline-offset: var(--salt-focused-outlineOffset);
+  outline-style: var(--salt-focused-outlineStyle);
+  outline-width: var(--salt-focused-outlineWidth);
+  position: absolute;
+}

package/css/next/characteristics/accent.css

@@ -0,0 +1,6 @@
+.salt-theme.salt-theme-next.vuu-theme {
+  --salt-accent-background: var(--salt-palette-accent);
+  --salt-accent-background-disabled: var(--salt-palette-accent-disabled);
+  --salt-accent-borderColor: var(--salt-palette-accent);
+  --salt-accent-borderColor-disabled: var(--salt-palette-accent-disabled);
+}

package/css/next/characteristics/actionable.css

@@ -0,0 +1,186 @@
+.salt-theme.salt-theme-next.vuu-theme {
+  /* accented solid- previous CTA */
+  --salt-actionable-accented-bold-background-active: var(--salt-palette-accent);
+  --salt-actionable-accented-bold-background-hover: var(--vuu-color-coral);
+  --salt-actionable-accented-bold-background: var(--salt-palette-accent);
+  --salt-actionable-accented-bold-borderColor-active: var(--salt-palette-accent);
+  --salt-actionable-accented-bold-borderColor-hover: var(--vuu-color-coral);
+  --salt-actionable-accented-bold-borderColor: var(--salt-palette-accent);
+  --salt-actionable-accented-bold-foreground-active: var(--salt-color-white);
+  --salt-actionable-accented-bold-foreground-hover: var(--salt-palette-foreground-primary-alt);
+  --salt-actionable-accented-bold-foreground: var(--salt-color-white);
+
+  /* accented bordered */
+  --salt-actionable-accented-background-active: var(--salt-palette-accent-weaker);
+  --salt-actionable-accented-background-hover: var(--salt-palette-accent-weakest);
+  --salt-actionable-accented-background: var(--salt-palette-alpha-none);
+  --salt-actionable-accented-borderColor-active: var(--salt-palette-accent);
+  --salt-actionable-accented-borderColor-hover: var(--salt-palette-accent);
+  --salt-actionable-accented-borderColor: var(--salt-palette-accent);
+  --salt-actionable-accented-foreground-active: var(--salt-palette-foreground-primary);
+  --salt-actionable-accented-foreground-hover: var(--salt-palette-accent-stronger);
+  --salt-actionable-accented-foreground: var(--salt-palette-accent-strong);
+
+  --salt-actionable-accented-background-selected: var(--salt-palette-accent);
+  --salt-actionable-accented-borderColor-selected: var(--salt-palette-accent);
+  --salt-actionable-accented-foreground-selected: var(--salt-palette-foreground-primary-alt);
+
+  /* accented transparent  */
+  --salt-actionable-accented-subtle-background-active: var(--salt-palette-alpha-contrast-low);
+  --salt-actionable-accented-subtle-background-hover: var(--salt-palette-alpha-contrast-lower);
+  --salt-actionable-accented-subtle-background: var(--salt-palette-alpha-none);
+  --salt-actionable-accented-subtle-borderColor-active: var(--salt-palette-alpha-none);
+  --salt-actionable-accented-subtle-borderColor-hover: var(--salt-palette-alpha-none);
+  --salt-actionable-accented-subtle-borderColor: var(--salt-palette-alpha-none);
+  --salt-actionable-accented-subtle-foreground-active: var(--salt-palette-foreground-primary);
+  --salt-actionable-accented-subtle-foreground-hover: var(--salt-palette-accent-stronger);
+  --salt-actionable-accented-subtle-foreground: var(--salt-palette-foreground-primary);
+
+  /* neutral solid previous Primary */
+  --salt-actionable-bold-background-active: var(--salt-color-gray-900);
+  --salt-actionable-bold-background-hover: var(--vuu-color-coral);
+  --salt-actionable-bold-background: var(--salt-palette-neutral);
+  --salt-actionable-bold-borderColor-active: var(--vuu-color-gray-50);
+  --salt-actionable-bold-borderColor-hover: var(var(--vuu-color-coral));
+  --salt-actionable-bold-borderColor: var(--salt-palette-neutral);
+  --salt-actionable-bold-foreground-active: var(--salt-color-white);
+  --salt-actionable-bold-foreground-hover: var(--salt-palette-foreground-primary);
+  --salt-actionable-bold-foreground: var(--salt-palette-foreground-primary);
+
+  /* neutral bordered */
+  --salt-actionable-background-active: var(--salt-palette-neutral-weaker);
+  --salt-actionable-background-hover: var(--salt-palette-neutral-weakest);
+  --salt-actionable-background: var(--salt-palette-alpha-none);
+  --salt-actionable-borderColor-active: var(--salt-palette-neutral);
+  --salt-actionable-borderColor-hover: var(--salt-palette-neutral);
+  --salt-actionable-borderColor: var(--salt-palette-neutral);
+  --salt-actionable-foreground-active: var(--salt-palette-foreground-primary);
+  --salt-actionable-foreground-hover: var(--salt-palette-foreground-primary);
+  --salt-actionable-foreground: var(--salt-palette-foreground-primary);
+
+  --salt-actionable-background-selected: var(--salt-color-gray-900);
+  --salt-actionable-borderColor-selected: var(--salt-palette-neutral);
+  --salt-actionable-foreground-selected: var(--salt-palette-foreground-primary-alt);
+
+  /* neutral transparent - previous Secondary */
+  --salt-actionable-subtle-background-active: var(--salt-palette-alpha-contrast-low);
+  --salt-actionable-subtle-background-hover: var(--vuu-color-coral);
+  --salt-actionable-subtle-background: var(--salt-palette-alpha-none);
+  --salt-actionable-subtle-borderColor-active: var(--salt-palette-alpha-none);
+  --salt-actionable-subtle-borderColor-hover: var(--vuu-color-coral);
+  --salt-actionable-subtle-borderColor: var(--salt-palette-alpha-none);
+  --salt-actionable-subtle-foreground-active: var(--salt-palette-foreground-primary);
+  --salt-actionable-subtle-foreground-hover: var(--salt-palette-foreground-primary);
+  --salt-actionable-subtle-foreground: var(--salt-palette-foreground-primary);
+
+  /* negative solid */
+  --salt-actionable-negative-bold-background-active: var(--salt-palette-negative-weaker);
+  --salt-actionable-negative-bold-background-hover: linear-gradient(var(--salt-palette-alpha-dark-low), var(--salt-palette-alpha-dark-low)) var(--salt-palette-negative);
+  --salt-actionable-negative-bold-background: var(--salt-palette-negative);
+  --salt-actionable-negative-bold-borderColor-active: var(--salt-palette-negative);
+  --salt-actionable-negative-bold-borderColor-hover: var(--salt-palette-alpha-contrast-medium);
+  --salt-actionable-negative-bold-borderColor: var(--salt-palette-negative);
+  --salt-actionable-negative-bold-foreground-active: var(--salt-palette-foreground-primary);
+  --salt-actionable-negative-bold-foreground-hover: var(--salt-palette-foreground-primary-alt);
+  --salt-actionable-negative-bold-foreground: var(--salt-palette-foreground-primary-alt);
+
+  /* negative bordered */
+  --salt-actionable-negative-background-active: var(--salt-palette-negative-weaker);
+  --salt-actionable-negative-background-hover: var(--salt-palette-negative-weakest);
+  --salt-actionable-negative-background: var(--salt-palette-alpha-none);
+  --salt-actionable-negative-borderColor-active: var(--salt-palette-negative);
+  --salt-actionable-negative-borderColor-hover: var(--salt-palette-negative);
+  --salt-actionable-negative-borderColor: var(--salt-palette-negative);
+  --salt-actionable-negative-foreground-active: var(--salt-palette-foreground-primary);
+  --salt-actionable-negative-foreground-hover: var(--salt-palette-negative-stronger);
+  --salt-actionable-negative-foreground: var(--salt-palette-negative-strong);
+
+  --salt-actionable-negative-background-selected: var(--salt-palette-negative);
+  --salt-actionable-negative-borderColor-selected: var(--salt-palette-negative);
+  --salt-actionable-negative-foreground-selected: var(--salt-palette-foreground-primary-alt);
+
+  /* negative transparent */
+  --salt-actionable-negative-subtle-background-active: var(--salt-palette-alpha-contrast-low);
+  --salt-actionable-negative-subtle-background-hover: var(--salt-palette-alpha-contrast-lower);
+  --salt-actionable-negative-subtle-background: var(--salt-palette-alpha-none);
+  --salt-actionable-negative-subtle-borderColor-active: var(--salt-palette-alpha-none);
+  --salt-actionable-negative-subtle-borderColor-hover: var(--salt-palette-alpha-none);
+  --salt-actionable-negative-subtle-borderColor: var(--salt-palette-alpha-none);
+  --salt-actionable-negative-subtle-foreground-active: var(--salt-palette-foreground-primary);
+  --salt-actionable-negative-subtle-foreground-hover: var(--salt-palette-negative-stronger);
+  --salt-actionable-negative-subtle-foreground: var(--salt-palette-negative-strong);
+
+  /* positive solid */
+  --salt-actionable-positive-bold-background-active: var(--salt-palette-positive-weaker);
+  --salt-actionable-positive-bold-background-hover: linear-gradient(var(--salt-palette-alpha-dark-low), var(--salt-palette-alpha-dark-low)) var(--salt-palette-positive);
+  --salt-actionable-positive-bold-background: var(--salt-palette-positive);
+  --salt-actionable-positive-bold-borderColor-active: var(--salt-palette-positive);
+  --salt-actionable-positive-bold-borderColor-hover: var(--salt-palette-alpha-contrast-medium);
+  --salt-actionable-positive-bold-borderColor: var(--salt-palette-positive);
+  --salt-actionable-positive-bold-foreground-active: var(--salt-palette-foreground-primary);
+  --salt-actionable-positive-bold-foreground-hover: var(--salt-palette-foreground-primary-alt);
+  --salt-actionable-positive-bold-foreground: var(--salt-palette-foreground-primary-alt);
+
+  /* positive bordered */
+  --salt-actionable-positive-background-active: var(--salt-palette-positive-weaker);
+  --salt-actionable-positive-background-hover: var(--salt-palette-positive-weakest);
+  --salt-actionable-positive-background: var(--salt-palette-alpha-none);
+  --salt-actionable-positive-borderColor-active: var(--salt-palette-positive);
+  --salt-actionable-positive-borderColor-hover: var(--salt-palette-positive);
+  --salt-actionable-positive-borderColor: var(--salt-palette-positive);
+  --salt-actionable-positive-foreground-active: var(--salt-palette-foreground-primary);
+  --salt-actionable-positive-foreground-hover: var(--salt-palette-positive-stronger);
+  --salt-actionable-positive-foreground: var(--salt-palette-positive-strong);
+
+  --salt-actionable-positive-background-selected: var(--salt-palette-positive);
+  --salt-actionable-positive-borderColor-selected: var(--salt-palette-positive);
+  --salt-actionable-positive-foreground-selected: var(--salt-palette-foreground-primary-alt);
+
+  /* positive transparent */
+  --salt-actionable-positive-subtle-background-active: var(--salt-palette-alpha-contrast-low);
+  --salt-actionable-positive-subtle-background-hover: var(--salt-palette-alpha-contrast-lower);
+  --salt-actionable-positive-subtle-background: var(--salt-palette-alpha-none);
+  --salt-actionable-positive-subtle-borderColor-active: var(--salt-palette-alpha-none);
+  --salt-actionable-positive-subtle-borderColor-hover: var(--salt-palette-alpha-none);
+  --salt-actionable-positive-subtle-borderColor: var(--salt-palette-alpha-none);
+  --salt-actionable-positive-subtle-foreground-active: var(--salt-palette-foreground-primary);
+  --salt-actionable-positive-subtle-foreground-hover: var(--salt-palette-positive-stronger);
+  --salt-actionable-positive-subtle-foreground: var(--salt-palette-positive-strong);
+
+  /* caution solid */
+  --salt-actionable-caution-bold-background-active: var(--salt-palette-warning-weaker);
+  --salt-actionable-caution-bold-background-hover: linear-gradient(var(--salt-palette-alpha-dark-low), var(--salt-palette-alpha-dark-low)) var(--salt-palette-warning);
+  --salt-actionable-caution-bold-background: var(--salt-palette-warning);
+  --salt-actionable-caution-bold-borderColor-active: var(--salt-palette-warning);
+  --salt-actionable-caution-bold-borderColor-hover: var(--salt-palette-alpha-contrast-medium);
+  --salt-actionable-caution-bold-borderColor: var(--salt-palette-warning);
+  --salt-actionable-caution-bold-foreground-active: var(--salt-palette-foreground-primary);
+  --salt-actionable-caution-bold-foreground-hover: var(--salt-palette-foreground-primary-alt);
+  --salt-actionable-caution-bold-foreground: var(--salt-palette-foreground-primary-alt);
+
+  /* caution bordered */
+  --salt-actionable-caution-background-active: var(--salt-palette-warning-weaker);
+  --salt-actionable-caution-background-hover: var(--salt-palette-warning-weakest);
+  --salt-actionable-caution-background: var(--salt-palette-alpha-none);
+  --salt-actionable-caution-borderColor-active: var(--salt-palette-warning);
+  --salt-actionable-caution-borderColor-hover: var(--salt-palette-warning);
+  --salt-actionable-caution-borderColor: var(--salt-palette-warning);
+  --salt-actionable-caution-foreground-active: var(--salt-palette-foreground-primary);
+  --salt-actionable-caution-foreground-hover: var(--salt-palette-warning-stronger);
+  --salt-actionable-caution-foreground: var(--salt-palette-warning-strong);
+
+  --salt-actionable-caution-background-selected: var(--salt-palette-warning);
+  --salt-actionable-caution-borderColor-selected: var(--salt-palette-warning);
+  --salt-actionable-caution-foreground-selected: var(--salt-palette-foreground-primary-alt);
+
+  /* caution transparent */
+  --salt-actionable-caution-subtle-background-active: var(--salt-palette-alpha-contrast-low);
+  --salt-actionable-caution-subtle-background-hover: var(--salt-palette-alpha-contrast-lower);
+  --salt-actionable-caution-subtle-background: var(--salt-palette-alpha-none);
+  --salt-actionable-caution-subtle-borderColor-active: var(--salt-palette-alpha-none);
+  --salt-actionable-caution-subtle-borderColor-hover: var(--salt-palette-alpha-none);
+  --salt-actionable-caution-subtle-borderColor: var(--salt-palette-alpha-none);
+  --salt-actionable-caution-subtle-foreground-active: var(--salt-palette-foreground-primary);
+  --salt-actionable-caution-subtle-foreground-hover: var(--salt-palette-warning-stronger);
+  --salt-actionable-caution-subtle-foreground: var(--salt-palette-warning-strong);
+}

package/css/next/characteristics/category.css

@@ -0,0 +1,121 @@
+.salt-theme.salt-theme-next.vuu-theme {
+  --salt-category-1-subtle-foreground: var(--salt-palette-categorical-1-strong);
+  --salt-category-1-subtle-background: var(--salt-palette-categorical-1-weakest);
+  --salt-category-1-subtle-borderColor: var(--salt-palette-categorical-1);
+
+  --salt-category-1-bold-background: var(--salt-palette-categorical-1);
+
+  --salt-category-2-subtle-foreground: var(--salt-palette-categorical-2-strong);
+  --salt-category-2-subtle-background: var(--salt-palette-categorical-2-weakest);
+  --salt-category-2-subtle-borderColor: var(--salt-palette-categorical-2);
+
+  --salt-category-2-bold-background: var(--salt-palette-categorical-2);
+
+  --salt-category-3-subtle-foreground: var(--salt-palette-categorical-3-strong);
+  --salt-category-3-subtle-background: var(--salt-palette-categorical-3-weakest);
+  --salt-category-3-subtle-borderColor: var(--salt-palette-categorical-3);
+
+  --salt-category-3-bold-background: var(--salt-palette-categorical-3);
+
+  --salt-category-4-subtle-foreground: var(--salt-palette-categorical-4-strong);
+  --salt-category-4-subtle-background: var(--salt-palette-categorical-4-weakest);
+  --salt-category-4-subtle-borderColor: var(--salt-palette-categorical-4);
+
+  --salt-category-4-bold-background: var(--salt-palette-categorical-4);
+
+  --salt-category-5-subtle-foreground: var(--salt-palette-categorical-5-strong);
+  --salt-category-5-subtle-background: var(--salt-palette-categorical-5-weakest);
+  --salt-category-5-subtle-borderColor: var(--salt-palette-categorical-5);
+
+  --salt-category-5-bold-background: var(--salt-palette-categorical-5);
+
+  --salt-category-6-subtle-foreground: var(--salt-palette-categorical-6-strong);
+  --salt-category-6-subtle-background: var(--salt-palette-categorical-6-weakest);
+  --salt-category-6-subtle-borderColor: var(--salt-palette-categorical-6);
+
+  --salt-category-6-bold-background: var(--salt-palette-categorical-6);
+
+  --salt-category-7-subtle-foreground: var(--salt-palette-categorical-7-strong);
+  --salt-category-7-subtle-background: var(--salt-palette-categorical-7-weakest);
+  --salt-category-7-subtle-borderColor: var(--salt-palette-categorical-7);
+
+  --salt-category-7-bold-background: var(--salt-palette-categorical-7);
+
+  --salt-category-8-subtle-foreground: var(--salt-palette-categorical-8-strong);
+  --salt-category-8-subtle-background: var(--salt-palette-categorical-8-weakest);
+  --salt-category-8-subtle-borderColor: var(--salt-palette-categorical-8);
+
+  --salt-category-8-bold-background: var(--salt-palette-categorical-8);
+
+  --salt-category-9-subtle-foreground: var(--salt-palette-categorical-9-strong);
+  --salt-category-9-subtle-background: var(--salt-palette-categorical-9-weakest);
+  --salt-category-9-subtle-borderColor: var(--salt-palette-categorical-9);
+
+  --salt-category-9-bold-background: var(--salt-palette-categorical-9);
+
+  --salt-category-10-subtle-foreground: var(--salt-palette-categorical-10-strong);
+  --salt-category-10-subtle-background: var(--salt-palette-categorical-10-weakest);
+  --salt-category-10-subtle-borderColor: var(--salt-palette-categorical-10);
+
+  --salt-category-10-bold-background: var(--salt-palette-categorical-10);
+
+  --salt-category-11-subtle-foreground: var(--salt-palette-categorical-11-strong);
+  --salt-category-11-subtle-background: var(--salt-palette-categorical-11-weakest);
+  --salt-category-11-subtle-borderColor: var(--salt-palette-categorical-11);
+
+  --salt-category-11-bold-background: var(--salt-palette-categorical-11);
+
+  --salt-category-12-subtle-foreground: var(--salt-palette-categorical-12-strong);
+  --salt-category-12-subtle-background: var(--salt-palette-categorical-12-weakest);
+  --salt-category-12-subtle-borderColor: var(--salt-palette-categorical-12);
+
+  --salt-category-12-bold-background: var(--salt-palette-categorical-12);
+
+  --salt-category-13-subtle-foreground: var(--salt-palette-categorical-13-strong);
+  --salt-category-13-subtle-background: var(--salt-palette-categorical-13-weakest);
+  --salt-category-13-subtle-borderColor: var(--salt-palette-categorical-13);
+
+  --salt-category-13-bold-background: var(--salt-palette-categorical-13);
+
+  --salt-category-14-subtle-foreground: var(--salt-palette-categorical-14-strong);
+  --salt-category-14-subtle-background: var(--salt-palette-categorical-14-weakest);
+  --salt-category-14-subtle-borderColor: var(--salt-palette-categorical-14);
+
+  --salt-category-14-bold-background: var(--salt-palette-categorical-14);
+
+  --salt-category-15-subtle-foreground: var(--salt-palette-categorical-15-strong);
+  --salt-category-15-subtle-background: var(--salt-palette-categorical-15-weakest);
+  --salt-category-15-subtle-borderColor: var(--salt-palette-categorical-15);
+
+  --salt-category-15-bold-background: var(--salt-palette-categorical-15);
+
+  --salt-category-16-subtle-foreground: var(--salt-palette-categorical-16-strong);
+  --salt-category-16-subtle-background: var(--salt-palette-categorical-16-weakest);
+  --salt-category-16-subtle-borderColor: var(--salt-palette-categorical-16);
+
+  --salt-category-16-bold-background: var(--salt-palette-categorical-16);
+
+  --salt-category-17-subtle-foreground: var(--salt-palette-categorical-17-strong);
+  --salt-category-17-subtle-background: var(--salt-palette-categorical-17-weakest);
+  --salt-category-17-subtle-borderColor: var(--salt-palette-categorical-17);
+
+  --salt-category-17-bold-background: var(--salt-palette-categorical-17);
+
+  --salt-category-18-subtle-foreground: var(--salt-palette-categorical-18-strong);
+  --salt-category-18-subtle-background: var(--salt-palette-categorical-18-weakest);
+  --salt-category-18-subtle-borderColor: var(--salt-palette-categorical-18);
+
+  --salt-category-18-bold-background: var(--salt-palette-categorical-18);
+
+  --salt-category-19-subtle-foreground: var(--salt-palette-categorical-19-strong);
+  --salt-category-19-subtle-background: var(--salt-palette-categorical-19-weakest);
+  --salt-category-19-subtle-borderColor: var(--salt-palette-categorical-19);
+
+  --salt-category-19-bold-background: var(--salt-palette-categorical-19);
+
+  --salt-category-20-subtle-foreground: var(--salt-palette-categorical-20-strong);
+  --salt-category-20-subtle-background: var(--salt-palette-categorical-20-weakest);
+  --salt-category-20-subtle-borderColor: var(--salt-palette-categorical-20);
+
+  --salt-category-20-bold-background: var(--salt-palette-categorical-20);
+}

package/css/next/characteristics/container.css

@@ -0,0 +1,19 @@
+.salt-theme.salt-theme-next.vuu-theme {
+  --salt-container-primary-background: var(--salt-palette-background-primary);
+  --salt-container-primary-background-disabled: var(--salt-palette-background-primary-disabled);
+  --salt-container-primary-borderColor: var(--salt-palette-alpha-contrast-medium);
+  --salt-container-primary-borderColor-disabled: var(--salt-palette-alpha-contrast-lower);
+
+  --salt-container-secondary-background: var(--salt-palette-background-secondary);
+  --salt-container-secondary-background-disabled: var(--salt-palette-background-secondary-disabled);
+  --salt-container-secondary-borderColor: var(--salt-palette-alpha-contrast-medium);
+  --salt-container-secondary-borderColor-disabled: var(--salt-palette-alpha-contrast-lower);
+
+  --salt-container-tertiary-background: var(--salt-palette-background-tertiary);
+  --salt-container-tertiary-background-disabled: var(--salt-palette-background-tertiary-disabled);
+  --salt-container-tertiary-borderColor: var(--salt-palette-alpha-contrast-medium);
+  --salt-container-tertiary-borderColor-disabled: var(--salt-palette-alpha-contrast-lower);
+
+  --salt-container-ghost-background: var(--salt-palette-alpha-medium);
+  --salt-container-ghost-borderColor: var(--salt-palette-alpha-contrast-medium);
+}

package/css/next/characteristics/content.css

@@ -0,0 +1,13 @@
+.salt-theme.salt-theme-next.vuu-theme {
+  --salt-content-primary-foreground: var(--salt-palette-foreground-primary);
+  --salt-content-primary-foreground-disabled: var(--salt-palette-foreground-primary-disabled);
+  --salt-content-secondary-foreground: var(--salt-palette-foreground-secondary);
+  --salt-content-secondary-foreground-disabled: var(--salt-palette-foreground-secondary-disabled);
+  --salt-content-accent-foreground: var(--salt-palette-accent-strong);
+  --salt-content-attention-foreground: var(--salt-palette-negative-strong);
+
+  --salt-content-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-content-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
+
+  --salt-content-foreground-visited: var(--salt-palette-foreground-visited);
+}

package/css/next/characteristics/editable.css

@@ -0,0 +1,19 @@
+.salt-theme.salt-theme-next.vuu-theme {
+  --salt-editable-borderColor: var(--salt-palette-neutral-strong);
+  --salt-editable-borderColor-active: var(--salt-palette-accent-stronger);
+  --salt-editable-borderColor-disabled: var(--salt-palette-neutral-disabled);
+  --salt-editable-borderColor-hover: var(--salt-palette-accent);
+  --salt-editable-borderColor-readonly: var(--salt-palette-neutral-readonly);
+
+  --salt-editable-primary-background: var(--salt-palette-background-primary);
+  --salt-editable-primary-background-active: var(--salt-palette-background-primary);
+  --salt-editable-primary-background-disabled: var(--salt-palette-background-primary-disabled);
+  --salt-editable-primary-background-hover: var(--salt-palette-background-primary);
+  --salt-editable-primary-background-readonly: var(--salt-palette-alpha-none);
+
+  --salt-editable-secondary-background: var(--salt-palette-background-secondary);
+  --salt-editable-secondary-background-active: var(--salt-palette-background-secondary);
+  --salt-editable-secondary-background-disabled: var(--salt-palette-background-secondary-disabled);
+  --salt-editable-secondary-background-hover: var(--salt-palette-background-secondary);
+  --salt-editable-secondary-background-readonly: var(--salt-palette-alpha-none);
+}

package/css/next/characteristics/focused.css

@@ -0,0 +1,9 @@
+.salt-theme.salt-theme-next.vuu-theme {
+  --salt-focused-outlineColor: var(--salt-palette-accent-stronger);
+  --salt-focused-outlineStyle: var(--salt-borderStyle-dotted);
+  --salt-focused-outlineWidth: var(--salt-size-fixed-200);
+  --salt-focused-outlineInset: 0;
+  --salt-focused-outlineOffset: 0;
+
+  --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor); /* CSS shortcut token: not in Figma */
+}

package/css/next/characteristics/navigable.css

@@ -0,0 +1,7 @@
+.salt-theme.salt-theme-next.vuu-theme {
+  --salt-navigable-indicator-hover: var(--salt-palette-neutral);
+  --salt-navigable-accent-indicator-active: var(--salt-palette-accent);
+
+  --salt-navigable-accent-background-active: var(--salt-palette-accent-weakest);
+  --salt-navigable-accent-borderColor-active: var(--salt-palette-accent);
+}

package/css/next/characteristics/overlayable.css

@@ -0,0 +1,14 @@
+.salt-theme.salt-theme-next.vuu-theme {
+  --salt-overlayable-shadow-scroll: var(--salt-shadow-lowest);
+  --salt-overlayable-shadow-region: var(--salt-shadow-lower);
+  --salt-overlayable-shadow: var(--salt-shadow-lower);
+  --salt-overlayable-shadow-hover: var(--salt-shadow-low);
+  --salt-overlayable-shadow-popout: var(--salt-shadow-mediumLow);
+  --salt-overlayable-shadow-drag: var(--salt-shadow-mediumLow);
+  --salt-overlayable-shadow-modal: var(--salt-shadow-medium);
+
+  --salt-overlayable-background: var(--salt-palette-alpha-higher);
+  --salt-overlayable-background-hover: var(--salt-palette-alpha-contrast-lowest);
+  --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-medium);
+  --salt-overlayable-background-rangeSelection: var(--salt-palette-alpha-contrast-mediumLow);
+}

package/css/next/characteristics/selectable.css

@@ -0,0 +1,19 @@
+.salt-theme.salt-theme-next.vuu-theme {
+  --salt-selectable-borderColor: var(--salt-palette-neutral);
+  --salt-selectable-borderColor-hover: var(--salt-palette-accent-weak);
+  --salt-selectable-borderColor-selected: var(--salt-palette-accent);
+  --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-accent-disabled);
+  --salt-selectable-borderColor-disabled: var(--salt-palette-neutral-disabled);
+  --salt-selectable-borderColor-readonly: var(--salt-palette-neutral);
+
+  --salt-selectable-foreground: var(--salt-palette-neutral-strong);
+  --salt-selectable-foreground-disabled: var(--salt-palette-neutral-strong-disabled);
+  --salt-selectable-foreground-hover: var(--salt-palette-accent-weak);
+  --salt-selectable-foreground-selected: var(--salt-palette-accent);
+  --salt-selectable-foreground-selectedDisabled: var(--salt-palette-accent-disabled);
+  --salt-selectable-background: var(--salt-palette-alpha-none);
+  --salt-selectable-background-hover: var(--salt-palette-accent-weakest);
+  --salt-selectable-background-selected: var(--salt-palette-accent-weaker);
+  --salt-selectable-background-disabled: var(--salt-palette-alpha-none);
+  --salt-selectable-background-selectedDisabled: var(--salt-palette-accent-weaker-disabled);
+}

package/css/next/characteristics/sentiment.css

@@ -0,0 +1,10 @@
+.salt-theme-next.salt-theme.vuu-theme {
+  --salt-sentiment-negative-foreground-informative: var(--salt-palette-negative-strong);
+  --salt-sentiment-positive-foreground-informative: var(--salt-palette-positive-strong);
+
+  --salt-sentiment-negative-foreground-decorative: var(--salt-palette-negative);
+  --salt-sentiment-positive-foreground-decorative: var(--salt-palette-positive);
+
+  --salt-sentiment-neutral-track: var(--salt-palette-alpha-contrast-high);
+  --salt-sentiment-neutral-track-disabled: var(--salt-palette-alpha-contrast-lower);
+}