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

package/css/next/foundations/color.css

@@ -0,0 +1,178 @@
+.salt-theme.vuu-theme {
+  
+  --vuu-color-coral: rgb(243, 120, 128);
+  --vuu-color-coral-lightest: rgba(243, 120, 128, .2);
+  --vuu-color-gray-10: rgb(241, 242, 244);
+  --vuu-color-gray-15: rgb(228, 227, 231);
+  --vuu-color-gray-20: rgb(214, 215, 218);
+  --vuu-color-gray-25: rgb(155, 158, 168);
+  --vuu-color-gray-30: rgb(119, 124, 148);
+  --vuu-color-gray-40: rgb(96, 100, 119);
+  --vuu-color-gray-50: rgb(21, 23, 27);
+  --vuu-color-red-error: rgb(226,52,52);
+  --vuu-color-purple: rgb(109, 24, 189);
+  --vuu-color-deep-purple: rgb(42, 1, 95);
+  --vuu-color-white: rgb(255,255,255);
+
+  
+  --salt-color-gray-100-rgb: 230, 233, 235;
+  --salt-color-gray-200-rgb: 211, 213, 216;
+  --salt-color-gray-300-rgb: 177, 181, 185;
+  --salt-color-gray-400-rgb: 145, 149, 154;
+  --salt-color-gray-500-rgb: 114, 119, 125;
+  --salt-color-gray-600-rgb: 95, 100, 106;
+  --salt-color-gray-700-rgb: 76, 81, 87;
+  --salt-color-gray-800-rgb: 58, 63, 68;
+  --salt-color-gray-900-rgb: 41, 46, 51;
+  --salt-color-blue-100-rgb: 234, 246, 255;
+  --salt-color-blue-200-rgb: 199, 222, 255;
+  --salt-color-blue-300-rgb: 154, 189, 245;
+  --salt-color-blue-400-rgb: 102, 156, 232;
+  --salt-color-blue-500-rgb: 0, 120, 207;
+  --salt-color-blue-600-rgb: 0, 94, 166;
+  --salt-color-blue-700-rgb: 0, 69, 126;
+  --salt-color-blue-800-rgb: 0, 45, 89;
+  --salt-color-blue-900-rgb: 0, 23, 54;
+  --salt-color-brown-100-rgb: 243, 238, 232;
+  --salt-color-brown-200-rgb: 237, 229, 216;
+  --salt-color-brown-300-rgb: 215, 186, 157;
+  --salt-color-brown-400-rgb: 184, 138, 103;
+  --salt-color-brown-500-rgb: 153, 108, 72;
+  --salt-color-brown-600-rgb: 125, 83, 47;
+  --salt-color-brown-700-rgb: 103, 63, 27;
+  --salt-color-brown-800-rgb: 66, 36, 7;
+  --salt-color-brown-900-rgb: 46, 25, 5;
+  --salt-color-green-100-rgb: 234, 245, 242;
+  --salt-color-green-200-rgb: 184, 229, 209;
+  --salt-color-green-300-rgb: 137, 204, 173;
+  --salt-color-green-400-rgb: 83, 176, 135;
+  --salt-color-green-500-rgb: 0, 135, 93;
+  --salt-color-green-600-rgb: 0, 107, 72;
+  --salt-color-green-700-rgb: 0, 86, 55;
+  --salt-color-green-800-rgb: 0, 63, 37;
+  --salt-color-green-900-rgb: 0, 41, 21;
+  --salt-color-teal-100-rgb: 219, 245, 247;
+  --salt-color-teal-200-rgb: 175, 224, 237;
+  --salt-color-teal-300-rgb: 131, 192, 214;
+  --salt-color-teal-400-rgb: 76, 161, 194;
+  --salt-color-teal-500-rgb: 27, 127, 158;
+  --salt-color-teal-600-rgb: 18, 100, 126;
+  --salt-color-teal-700-rgb: 9, 74, 96;
+  --salt-color-teal-800-rgb: 3, 49, 66;
+  --salt-color-teal-900-rgb: 0, 37, 56;
+  --salt-color-orange-100-rgb: 255, 236, 217;
+  --salt-color-orange-200-rgb: 255, 198, 161;
+  --salt-color-orange-300-rgb: 247, 160, 106;
+  --salt-color-orange-400-rgb: 235, 123, 57;
+  --salt-color-orange-500-rgb: 199, 83, 0;
+  --salt-color-orange-600-rgb: 158, 66, 0;
+  --salt-color-orange-700-rgb: 129, 54, 0;
+  --salt-color-orange-800-rgb: 97, 41, 0;
+  --salt-color-orange-900-rgb: 66, 32, 0;
+  --salt-color-red-100-rgb: 255, 236, 234;
+  --salt-color-red-200-rgb: 255, 193, 186;
+  --salt-color-red-300-rgb: 255, 147, 138;
+  --salt-color-red-400-rgb: 255, 93, 87;
+  --salt-color-red-500-rgb: 229, 33, 53;
+  --salt-color-red-600-rgb: 186, 23, 41;
+  --salt-color-red-700-rgb: 145, 13, 30;
+  --salt-color-red-800-rgb: 105, 4, 19;
+  --salt-color-red-900-rgb: 69, 0, 2;
+  --salt-color-purple-100-rgb: 246, 240, 250;
+  --salt-color-purple-200-rgb: 240, 214, 245;
+  --salt-color-purple-300-rgb: 218, 175, 224;
+  --salt-color-purple-400-rgb: 195, 136, 204;
+  --salt-color-purple-500-rgb: 162, 91, 173;
+  --salt-color-purple-600-rgb: 133, 67, 143;
+  --salt-color-purple-700-rgb: 104, 45, 113;
+  --salt-color-purple-800-rgb: 73, 21, 82;
+  --salt-color-purple-900-rgb: 51, 0, 59;
+  --salt-color-background-snow-rgb: 255, 255, 255;
+  --salt-color-background-marble-rgb: 245, 247, 248;
+  --salt-color-background-limestone-rgb: 250, 248, 242;
+  --salt-color-background-titanium-rgb: 226, 228, 229;
+  --salt-color-background-jet-rgb: 16, 24, 32;
+  --salt-color-background-granite-rgb: 26, 34, 41;
+  --salt-color-background-leather-rgb: 38, 41, 43;
+  --salt-color-logo-brown-rgb: 58, 34, 6;
+  --salt-color-gray-100: rgb(var(--salt-color-gray-100-rgb));
+  --salt-color-gray-200: rgb(var(--salt-color-gray-200-rgb));
+  --salt-color-gray-300: rgb(var(--salt-color-gray-300-rgb));
+  --salt-color-gray-400: rgb(var(--salt-color-gray-400-rgb));
+  --salt-color-gray-500: rgb(var(--salt-color-gray-500-rgb));
+  --salt-color-gray-600: rgb(var(--salt-color-gray-600-rgb));
+  --salt-color-gray-700: rgb(var(--salt-color-gray-700-rgb));
+  --salt-color-gray-800: rgb(var(--salt-color-gray-800-rgb));
+  --salt-color-gray-900: rgb(var(--salt-color-gray-900-rgb));
+  --salt-color-blue-100: rgb(var(--salt-color-blue-100-rgb));
+  --salt-color-blue-200: rgb(var(--salt-color-blue-200-rgb));
+  --salt-color-blue-300: rgb(var(--salt-color-blue-300-rgb));
+  --salt-color-blue-400: rgb(var(--salt-color-blue-400-rgb));
+  --salt-color-blue-500: rgb(var(--salt-color-blue-500-rgb));
+  --salt-color-blue-600: rgb(var(--salt-color-blue-600-rgb));
+  --salt-color-blue-700: rgb(var(--salt-color-blue-700-rgb));
+  --salt-color-blue-800: rgb(var(--salt-color-blue-800-rgb));
+  --salt-color-blue-900: rgb(var(--salt-color-blue-900-rgb));
+  --salt-color-brown-100: rgb(var(--salt-color-brown-100-rgb));
+  --salt-color-brown-200: rgb(var(--salt-color-brown-200-rgb));
+  --salt-color-brown-300: rgb(var(--salt-color-brown-300-rgb));
+  --salt-color-brown-400: rgb(var(--salt-color-brown-400-rgb));
+  --salt-color-brown-500: rgb(var(--salt-color-brown-500-rgb));
+  --salt-color-brown-600: rgb(var(--salt-color-brown-600-rgb));
+  --salt-color-brown-700: rgb(var(--salt-color-brown-700-rgb));
+  --salt-color-brown-800: rgb(var(--salt-color-brown-800-rgb));
+  --salt-color-brown-900: rgb(var(--salt-color-brown-900-rgb));
+  --salt-color-green-100: rgb(var(--salt-color-green-100-rgb));
+  --salt-color-green-200: rgb(var(--salt-color-green-200-rgb));
+  --salt-color-green-300: rgb(var(--salt-color-green-300-rgb));
+  --salt-color-green-400: rgb(var(--salt-color-green-400-rgb));
+  --salt-color-green-500: rgb(var(--salt-color-green-500-rgb));
+  --salt-color-green-600: rgb(var(--salt-color-green-600-rgb));
+  --salt-color-green-700: rgb(var(--salt-color-green-700-rgb));
+  --salt-color-green-800: rgb(var(--salt-color-green-800-rgb));
+  --salt-color-green-900: rgb(var(--salt-color-green-900-rgb));
+  --salt-color-teal-100: rgb(var(--salt-color-teal-100-rgb));
+  --salt-color-teal-200: rgb(var(--salt-color-teal-200-rgb));
+  --salt-color-teal-300: rgb(var(--salt-color-teal-300-rgb));
+  --salt-color-teal-400: rgb(var(--salt-color-teal-400-rgb));
+  --salt-color-teal-500: rgb(var(--salt-color-teal-500-rgb));
+  --salt-color-teal-600: rgb(var(--salt-color-teal-600-rgb));
+  --salt-color-teal-700: rgb(var(--salt-color-teal-700-rgb));
+  --salt-color-teal-800: rgb(var(--salt-color-teal-800-rgb));
+  --salt-color-teal-900: rgb(var(--salt-color-teal-900-rgb));
+  --salt-color-orange-100: rgb(var(--salt-color-orange-100-rgb));
+  --salt-color-orange-200: rgb(var(--salt-color-orange-200-rgb));
+  --salt-color-orange-300: rgb(var(--salt-color-orange-300-rgb));
+  --salt-color-orange-400: rgb(var(--salt-color-orange-400-rgb));
+  --salt-color-orange-500: rgb(var(--salt-color-orange-500-rgb));
+  --salt-color-orange-600: rgb(var(--salt-color-orange-600-rgb));
+  --salt-color-orange-700: rgb(var(--salt-color-orange-700-rgb));
+  --salt-color-orange-800: rgb(var(--salt-color-orange-800-rgb));
+  --salt-color-orange-900: rgb(var(--salt-color-orange-900-rgb));
+  --salt-color-red-100: rgb(var(--salt-color-red-100-rgb));
+  --salt-color-red-200: rgb(var(--salt-color-red-200-rgb));
+  --salt-color-red-300: rgb(var(--salt-color-red-300-rgb));
+  --salt-color-red-400: rgb(var(--salt-color-red-400-rgb));
+  --salt-color-red-500: rgb(var(--salt-color-red-500-rgb));
+  --salt-color-red-600: rgb(var(--salt-color-red-600-rgb));
+  --salt-color-red-700: rgb(var(--salt-color-red-700-rgb));
+  --salt-color-red-800: rgb(var(--salt-color-red-800-rgb));
+  --salt-color-red-900: rgb(var(--salt-color-red-900-rgb));
+  --salt-color-purple-100: rgb(var(--salt-color-purple-100-rgb));
+  --salt-color-purple-200: rgb(var(--salt-color-purple-200-rgb));
+  --salt-color-purple-300: rgb(var(--salt-color-purple-300-rgb));
+  --salt-color-purple-400: rgb(var(--salt-color-purple-400-rgb));
+  --salt-color-purple-500: rgb(var(--salt-color-purple-500-rgb));
+  --salt-color-purple-600: rgb(var(--salt-color-purple-600-rgb));
+  --salt-color-purple-700: rgb(var(--salt-color-purple-700-rgb));
+  --salt-color-purple-800: rgb(var(--salt-color-purple-800-rgb));
+  --salt-color-purple-900: rgb(var(--salt-color-purple-900-rgb));
+  --salt-color-background-snow: rgb(var(--salt-color-background-snow-rgb));
+  --salt-color-background-marble: rgb(var(--salt-color-background-marble-rgb));
+  --salt-color-background-limestone: rgb(var(--salt-color-background-limestone-rgb));
+  --salt-color-background-titanium: rgb(var(--salt-color-background-titanium-rgb));
+  --salt-color-background-jet: rgb(var(--salt-color-background-jet-rgb));
+  --salt-color-background-granite: rgb(var(--salt-color-background-granite-rgb));
+  --salt-color-background-leather: rgb(var(--salt-color-background-leather-rgb));
+  --salt-color-logo-brown: rgb(var(--salt-color-logo-brown-rgb));
+}

package/css/next/palette/accent.css

@@ -0,0 +1,25 @@
+.salt-theme.salt-theme-next.vuu-theme[data-mode="light"] {
+  --salt-palette-accent: var(--vuu-color-purple);
+  --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
+  --salt-palette-accent-strong: var(--salt-color-blue-600);
+  --salt-palette-accent-stronger: var(--salt-color-blue-700);
+  --salt-palette-accent-strongest: var(--salt-color-blue-800);
+  --salt-palette-accent-weak: var(--salt-color-blue-400);
+  --salt-palette-accent-weaker: var(--salt-color-blue-200);
+  --salt-palette-accent-weaker-disabled: var(--salt-color-blue-200-40a);
+  --salt-palette-accent-weakest: var(--salt-color-blue-100);
+}
+
+
+.salt-theme.salt-theme-next.vuu-theme[data-mode="dark"] {
+  --salt-palette-accent: var(--vuu-color-purple);
+  --salt-palette-accent-disabled: var(--salt-color-teal-500-40a);
+  --salt-palette-accent-strong: var(--salt-color-teal-600);
+  --salt-palette-accent-stronger: var(--salt-color-teal-700);
+  --salt-palette-accent-strongest: var(--salt-color-teal-800);
+  --salt-palette-accent-weak: var(--salt-color-teal-400);
+  --salt-palette-accent-weaker: var(--salt-color-teal-200);
+  --salt-palette-accent-weaker-disabled: var(--salt-color-teal-200-40a);
+  --salt-palette-accent-weakest: var(--salt-color-teal-100);
+}
+

package/css/next/palette/alpha.css

@@ -0,0 +1,67 @@
+.salt-theme-next[data-mode="light"] {
+  --salt-palette-alpha-highest: var(--salt-color-white-80a);
+  --salt-palette-alpha-higher: var(--salt-color-white-65a);
+  --salt-palette-alpha-high: var(--salt-color-white-50a);
+  --salt-palette-alpha-mediumHigh: var(--salt-color-white-40a);
+  --salt-palette-alpha-medium: var(--salt-color-white-30a);
+  --salt-palette-alpha-mediumLow: var(--salt-color-white-20a);
+  --salt-palette-alpha-low: var(--salt-color-white-15a);
+  --salt-palette-alpha-lower: var(--salt-color-white-10a);
+  --salt-palette-alpha-lowest: var(--salt-color-white-5a);
+
+  --salt-palette-alpha-contrast-highest: var(--salt-color-black-80a);
+  --salt-palette-alpha-contrast-higher: var(--salt-color-black-65a);
+  --salt-palette-alpha-contrast-high: var(--salt-color-black-50a);
+  --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-black-40a);
+  --salt-palette-alpha-contrast-medium: var(--salt-color-black-30a);
+  --salt-palette-alpha-contrast-mediumLow: var(--salt-color-black-20a);
+  --salt-palette-alpha-contrast-low: var(--salt-color-black-15a);
+  --salt-palette-alpha-contrast-lower: var(--salt-color-black-10a);
+  --salt-palette-alpha-contrast-lowest: var(--salt-color-black-5a);
+
+  --salt-palette-alpha-dark-highest: var(--salt-color-black-80a);
+  --salt-palette-alpha-dark-higher: var(--salt-color-black-65a);
+  --salt-palette-alpha-dark-high: var(--salt-color-black-50a);
+  --salt-palette-alpha-dark-mediumHigh: var(--salt-color-black-40a);
+  --salt-palette-alpha-dark-medium: var(--salt-color-black-30a);
+  --salt-palette-alpha-dark-mediumLow: var(--salt-color-black-20a);
+  --salt-palette-alpha-dark-low: var(--salt-color-black-15a);
+  --salt-palette-alpha-dark-lower: var(--salt-color-black-10a);
+  --salt-palette-alpha-dark-lowest: var(--salt-color-black-5a);
+
+  --salt-palette-alpha-none: transparent;
+}
+
+.salt-theme-next[data-mode="dark"] {
+  --salt-palette-alpha-highest: var(--salt-color-black-80a);
+  --salt-palette-alpha-higher: var(--salt-color-black-65a);
+  --salt-palette-alpha-high: var(--salt-color-black-50a);
+  --salt-palette-alpha-mediumHigh: var(--salt-color-black-40a);
+  --salt-palette-alpha-medium: var(--salt-color-black-30a);
+  --salt-palette-alpha-mediumLow: var(--salt-color-black-20a);
+  --salt-palette-alpha-low: var(--salt-color-black-15a);
+  --salt-palette-alpha-lower: var(--salt-color-black-10a);
+  --salt-palette-alpha-lowest: var(--salt-color-black-5a);
+
+  --salt-palette-alpha-contrast-highest: var(--salt-color-white-80a);
+  --salt-palette-alpha-contrast-higher: var(--salt-color-white-65a);
+  --salt-palette-alpha-contrast-high: var(--salt-color-white-50a);
+  --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-white-40a);
+  --salt-palette-alpha-contrast-medium: var(--salt-color-white-30a);
+  --salt-palette-alpha-contrast-mediumLow: var(--salt-color-white-20a);
+  --salt-palette-alpha-contrast-low: var(--salt-color-white-15a);
+  --salt-palette-alpha-contrast-lower: var(--salt-color-white-10a);
+  --salt-palette-alpha-contrast-lowest: var(--salt-color-white-5a);
+
+  --salt-palette-alpha-dark-highest: var(--salt-color-black-80a);
+  --salt-palette-alpha-dark-higher: var(--salt-color-black-65a);
+  --salt-palette-alpha-dark-high: var(--salt-color-black-50a);
+  --salt-palette-alpha-dark-mediumHigh: var(--salt-color-black-40a);
+  --salt-palette-alpha-dark-medium: var(--salt-color-black-30a);
+  --salt-palette-alpha-dark-mediumLow: var(--salt-color-black-20a);
+  --salt-palette-alpha-dark-low: var(--salt-color-black-15a);
+  --salt-palette-alpha-dark-lower: var(--salt-color-black-10a);
+  --salt-palette-alpha-dark-lowest: var(--salt-color-black-5a);
+
+  --salt-palette-alpha-none: transparent;
+}

package/css/next/palette/background.css

@@ -0,0 +1,16 @@
+.salt-theme.salt-theme-next.vuu-theme[data-mode="light"] {
+  --salt-palette-background-primary: var(--salt-color-background-snow);
+  --salt-palette-background-primary-disabled: var(--salt-color-background-snow-40a);
+  --salt-palette-background-secondary: var(--salt-color-background-marble);
+  --salt-palette-background-secondary-disabled: var(--salt-color-background-marble-40a);
+  --salt-palette-background-tertiary: var(--salt-color-background-limestone);
+  --salt-palette-background-tertiary-disabled: var(--salt-color-background-limestone-40a);
+}
+.salt-theme.salt-theme-next.vuu-theme[data-mode="dark"] {
+  --salt-palette-background-primary: var(--salt-color-background-jet);
+  --salt-palette-background-primary-disabled: var(--salt-color-background-jet-40a);
+  --salt-palette-background-secondary: var(--salt-color-background-granite);
+  --salt-palette-background-secondary-disabled: var(--salt-color-background-granite-40a);
+  --salt-palette-background-tertiary: var(--salt-color-background-leather);
+  --salt-palette-background-tertiary-disabled: var(--salt-color-background-leather-40a);
+}

package/css/next/palette/categorical.css

@@ -0,0 +1,163 @@
+.salt-theme.salt-theme-next.vuu-theme[data-mode="light"] {
+  --salt-palette-categorical-1: var(--salt-color-cobalt-500);
+  --salt-palette-categorical-1-strong: var(--salt-color-cobalt-600);
+  --salt-palette-categorical-1-weakest: var(--salt-color-cobalt-100);
+
+  --salt-palette-categorical-2: var(--salt-color-cider-500);
+  --salt-palette-categorical-2-strong: var(--salt-color-cider-600);
+  --salt-palette-categorical-2-weakest: var(--salt-color-cider-100);
+
+  --salt-palette-categorical-3: var(--salt-color-plum-500);
+  --salt-palette-categorical-3-strong: var(--salt-color-plum-600);
+  --salt-palette-categorical-3-weakest: var(--salt-color-plum-100);
+
+  --salt-palette-categorical-4: var(--salt-color-aqua-500);
+  --salt-palette-categorical-4-strong: var(--salt-color-aqua-600);
+  --salt-palette-categorical-4-weakest: var(--salt-color-aqua-100);
+
+  --salt-palette-categorical-5: var(--salt-color-slate-500);
+  --salt-palette-categorical-5-strong: var(--salt-color-slate-600);
+  --salt-palette-categorical-5-weakest: var(--salt-color-slate-100);
+
+  --salt-palette-categorical-6: var(--salt-color-rose-500);
+  --salt-palette-categorical-6-strong: var(--salt-color-rose-600);
+  --salt-palette-categorical-6-weakest: var(--salt-color-rose-100);
+
+  --salt-palette-categorical-7: var(--salt-color-olive-500);
+  --salt-palette-categorical-7-strong: var(--salt-color-olive-600);
+  --salt-palette-categorical-7-weakest: var(--salt-color-olive-100);
+
+  --salt-palette-categorical-8: var(--salt-color-salmon-500);
+  --salt-palette-categorical-8-strong: var(--salt-color-salmon-600);
+  --salt-palette-categorical-8-weakest: var(--salt-color-salmon-100);
+
+  --salt-palette-categorical-9: var(--salt-color-indigo-500);
+  --salt-palette-categorical-9-strong: var(--salt-color-indigo-600);
+  --salt-palette-categorical-9-weakest: var(--salt-color-indigo-100);
+
+  --salt-palette-categorical-10: var(--salt-color-jade-500);
+  --salt-palette-categorical-10-strong: var(--salt-color-jade-600);
+  --salt-palette-categorical-10-weakest: var(--salt-color-jade-100);
+
+  --salt-palette-categorical-11: var(--salt-color-citrine-500);
+  --salt-palette-categorical-11-strong: var(--salt-color-citrine-600);
+  --salt-palette-categorical-11-weakest: var(--salt-color-citrine-100);
+
+  --salt-palette-categorical-12: var(--salt-color-autumn-500);
+  --salt-palette-categorical-12-strong: var(--salt-color-autumn-600);
+  --salt-palette-categorical-12-weakest: var(--salt-color-autumn-100);
+
+  --salt-palette-categorical-13: var(--salt-color-lavender-500);
+  --salt-palette-categorical-13-strong: var(--salt-color-lavender-600);
+  --salt-palette-categorical-13-weakest: var(--salt-color-lavender-100);
+
+  --salt-palette-categorical-14: var(--salt-color-ocean-500);
+  --salt-palette-categorical-14-strong: var(--salt-color-ocean-600);
+  --salt-palette-categorical-14-weakest: var(--salt-color-ocean-100);
+
+  --salt-palette-categorical-15: var(--salt-color-smoke-500);
+  --salt-palette-categorical-15-strong: var(--salt-color-smoke-600);
+  --salt-palette-categorical-15-weakest: var(--salt-color-smoke-100);
+
+  --salt-palette-categorical-16: var(--salt-color-fuchsia-500);
+  --salt-palette-categorical-16-strong: var(--salt-color-fuchsia-600);
+  --salt-palette-categorical-16-weakest: var(--salt-color-fuchsia-100);
+
+  --salt-palette-categorical-17: var(--salt-color-lime-500);
+  --salt-palette-categorical-17-strong: var(--salt-color-lime-600);
+  --salt-palette-categorical-17-weakest: var(--salt-color-lime-100);
+
+  --salt-palette-categorical-18: var(--salt-color-fur-500);
+  --salt-palette-categorical-18-strong: var(--salt-color-fur-600);
+  --salt-palette-categorical-18-weakest: var(--salt-color-fur-100);
+
+  --salt-palette-categorical-19: var(--salt-color-violet-500);
+  --salt-palette-categorical-19-strong: var(--salt-color-violet-600);
+  --salt-palette-categorical-19-weakest: var(--salt-color-violet-100);
+
+  --salt-palette-categorical-20: var(--salt-color-forest-500);
+  --salt-palette-categorical-20-strong: var(--salt-color-forest-600);
+  --salt-palette-categorical-20-weakest: var(--salt-color-forest-100);
+}
+
+.salt-theme.salt-theme-next.vuu-theme[data-mode="dark"] {
+  --salt-palette-categorical-1: var(--salt-color-cobalt-500);
+  --salt-palette-categorical-1-strong: var(--salt-color-cobalt-400);
+  --salt-palette-categorical-1-weakest: var(--salt-color-cobalt-900);
+
+  --salt-palette-categorical-2: var(--salt-color-cider-500);
+  --salt-palette-categorical-2-strong: var(--salt-color-cider-400);
+  --salt-palette-categorical-2-weakest: var(--salt-color-cider-900);
+
+  --salt-palette-categorical-3: var(--salt-color-plum-500);
+  --salt-palette-categorical-3-strong: var(--salt-color-plum-400);
+  --salt-palette-categorical-3-weakest: var(--salt-color-plum-900);
+
+  --salt-palette-categorical-4: var(--salt-color-aqua-500);
+  --salt-palette-categorical-4-strong: var(--salt-color-aqua-400);
+  --salt-palette-categorical-4-weakest: var(--salt-color-aqua-900);
+
+  --salt-palette-categorical-5: var(--salt-color-slate-500);
+  --salt-palette-categorical-5-strong: var(--salt-color-slate-400);
+  --salt-palette-categorical-5-weakest: var(--salt-color-slate-900);
+
+  --salt-palette-categorical-6: var(--salt-color-rose-500);
+  --salt-palette-categorical-6-strong: var(--salt-color-rose-400);
+  --salt-palette-categorical-6-weakest: var(--salt-color-rose-900);
+
+  --salt-palette-categorical-7: var(--salt-color-olive-500);
+  --salt-palette-categorical-7-strong: var(--salt-color-olive-400);
+  --salt-palette-categorical-7-weakest: var(--salt-color-olive-900);
+
+  --salt-palette-categorical-8: var(--salt-color-salmon-500);
+  --salt-palette-categorical-8-strong: var(--salt-color-salmon-400);
+  --salt-palette-categorical-8-weakest: var(--salt-color-salmon-900);
+
+  --salt-palette-categorical-9: var(--salt-color-indigo-500);
+  --salt-palette-categorical-9-strong: var(--salt-color-indigo-400);
+  --salt-palette-categorical-9-weakest: var(--salt-color-indigo-900);
+
+  --salt-palette-categorical-10: var(--salt-color-jade-500);
+  --salt-palette-categorical-10-strong: var(--salt-color-jade-400);
+  --salt-palette-categorical-10-weakest: var(--salt-color-jade-900);
+
+  --salt-palette-categorical-11: var(--salt-color-citrine-500);
+  --salt-palette-categorical-11-strong: var(--salt-color-citrine-400);
+  --salt-palette-categorical-11-weakest: var(--salt-color-citrine-900);
+
+  --salt-palette-categorical-12: var(--salt-color-autumn-500);
+  --salt-palette-categorical-12-strong: var(--salt-color-autumn-400);
+  --salt-palette-categorical-12-weakest: var(--salt-color-autumn-900);
+
+  --salt-palette-categorical-13: var(--salt-color-lavender-500);
+  --salt-palette-categorical-13-strong: var(--salt-color-lavender-400);
+  --salt-palette-categorical-13-weakest: var(--salt-color-lavender-900);
+
+  --salt-palette-categorical-14: var(--salt-color-ocean-500);
+  --salt-palette-categorical-14-strong: var(--salt-color-ocean-400);
+  --salt-palette-categorical-14-weakest: var(--salt-color-ocean-900);
+
+  --salt-palette-categorical-15: var(--salt-color-smoke-500);
+  --salt-palette-categorical-15-strong: var(--salt-color-smoke-400);
+  --salt-palette-categorical-15-weakest: var(--salt-color-smoke-900);
+
+  --salt-palette-categorical-16: var(--salt-color-fuchsia-500);
+  --salt-palette-categorical-16-strong: var(--salt-color-fuchsia-400);
+  --salt-palette-categorical-16-weakest: var(--salt-color-fuchsia-900);
+
+  --salt-palette-categorical-17: var(--salt-color-lime-500);
+  --salt-palette-categorical-17-strong: var(--salt-color-lime-400);
+  --salt-palette-categorical-17-weakest: var(--salt-color-lime-900);
+
+  --salt-palette-categorical-18: var(--salt-color-fur-500);
+  --salt-palette-categorical-18-strong: var(--salt-color-fur-400);
+  --salt-palette-categorical-18-weakest: var(--salt-color-fur-900);
+
+  --salt-palette-categorical-19: var(--salt-color-violet-500);
+  --salt-palette-categorical-19-strong: var(--salt-color-violet-400);
+  --salt-palette-categorical-19-weakest: var(--salt-color-violet-900);
+
+  --salt-palette-categorical-20: var(--salt-color-forest-500);
+  --salt-palette-categorical-20-strong: var(--salt-color-forest-400);
+  --salt-palette-categorical-20-weakest: var(--salt-color-forest-900);
+}

package/css/next/palette/corner.css

@@ -0,0 +1,16 @@
+.salt-theme-next[data-corner="rounded"] {
+  --salt-palette-corner-weaker: var(--salt-curve-50);
+  --salt-palette-corner-weak: var(--salt-curve-100);
+  --salt-palette-corner: var(--salt-curve-150);
+  --salt-palette-corner-strong: var(--salt-curve-200);
+  --salt-palette-corner-stronger: var(--salt-curve-250);
+  --salt-palette-corner-strongest: var(--salt-curve-999);
+}
+.salt-theme-next[data-corner="sharp"] {
+  --salt-palette-corner-weaker: var(--salt-curve-0);
+  --salt-palette-corner-weak: var(--salt-curve-0);
+  --salt-palette-corner: var(--salt-curve-0);
+  --salt-palette-corner-strong: var(--salt-curve-0);
+  --salt-palette-corner-stronger: var(--salt-curve-0);
+  --salt-palette-corner-strongest: var(--salt-curve-999);
+}

package/css/next/palette/foreground.css

@@ -0,0 +1,18 @@
+.salt-theme.salt-theme-next.vuu-theme[data-mode="light"] {
+  --salt-palette-foreground-primary: var(--salt-color-black);
+  --salt-palette-foreground-primary-disabled: var(--salt-color-black-40a);
+  --salt-palette-foreground-primary-alt: var(--vuu-color-white);
+  --salt-palette-foreground-primary-alt-disabled: var(--salt-color-white-40a);
+  --salt-palette-foreground-secondary: var(--salt-color-gray-700);
+  --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-700-40a);
+  --salt-palette-foreground-visited: var(--salt-color-purple-800);
+}
+.salt-theme.salt-theme-next.vuu-theme[data-mode="dark"] {
+  --salt-palette-foreground-primary: var(--salt-color-white);
+  --salt-palette-foreground-primary-disabled: var(--salt-color-white-40a);
+  --salt-palette-foreground-primary-alt: var(--salt-color-white);
+  --salt-palette-foreground-primary-alt-disabled: var(--salt-color-white-40a);
+  --salt-palette-foreground-secondary: var(--salt-color-gray-300);
+  --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-300-40a);
+  --salt-palette-foreground-visited: var(--salt-color-purple-200);
+}

package/css/next/palette/info.css

@@ -0,0 +1,10 @@
+.salt-theme.salt-theme-next.vuu-theme[data-mode="light"] {
+  --salt-palette-info: var(--salt-color-blue-500);
+  --salt-palette-info-strong: var(--salt-color-blue-600);
+  --salt-palette-info-weakest: var(--salt-color-blue-100);
+}
+.salt-theme.salt-theme-next.vuu-theme[data-mode="dark"] {
+  --salt-palette-info: var(--salt-color-blue-500);
+  --salt-palette-info-strong: var(--salt-color-blue-400);
+  --salt-palette-info-weakest: var(--salt-color-blue-900);
+}

package/css/next/palette/negative.css

@@ -0,0 +1,15 @@
+.salt-theme.salt-theme-next.vuu-theme[data-mode="light"] {
+  --salt-palette-negative-stronger: var(--salt-color-red-700);
+  --salt-palette-negative-strong: var(--salt-color-red-600);
+  --salt-palette-negative: var(--salt-color-red-500);
+  --salt-palette-negative-weaker: var(--salt-color-red-200);
+  --salt-palette-negative-weakest: var(--salt-color-red-100);
+}
+
+.salt-theme.salt-theme-next.vuu-theme[data-mode="dark"] {
+  --salt-palette-negative-stronger: var(--salt-color-red-300);
+  --salt-palette-negative-strong: var(--salt-color-red-400);
+  --salt-palette-negative: var(--salt-color-red-500);
+  --salt-palette-negative-weaker: var(--salt-color-red-800);
+  --salt-palette-negative-weakest: var(--salt-color-red-900);
+}

package/css/next/palette/neutral.css

@@ -0,0 +1,24 @@
+.salt-theme.salt-theme-next.vuu-theme[data-mode="light"] {
+  --salt-palette-neutral: var(--salt-color-white);
+  --salt-palette-neutral-disabled: var(--salt-color-gray-500-40a);
+  --salt-palette-neutral-readonly: var(--salt-color-gray-500-10a);
+  --salt-palette-neutral-strong: var(--vuu-color-gray-30);
+  --salt-palette-neutral-strong-disabled: var(--salt-color-gray-600-40a);
+  --salt-palette-neutral-stronger: var(--salt-color-gray-700);
+  --salt-palette-neutral-strongest: var(--salt-color-gray-800);
+  --salt-palette-neutral-weak: var(--salt-color-gray-400);
+  --salt-palette-neutral-weaker: var(--salt-color-gray-200);
+  --salt-palette-neutral-weakest: var(--salt-color-gray-100);
+}
+.salt-theme.salt-theme-next.vuu-theme[data-mode="dark"] {
+  --salt-palette-neutral: var(--salt-color-white);
+  --salt-palette-neutral-disabled: var(--salt-color-gray-500-40a);
+  --salt-palette-neutral-readonly: var(--salt-color-gray-500-10a);
+  --salt-palette-neutral-strong: var(--salt-color-gray-400);
+  --salt-palette-neutral-strong-disabled: var(--salt-color-gray-400-40a);
+  --salt-palette-neutral-stronger: var(--salt-color-gray-200);
+  --salt-palette-neutral-strongest: var(--salt-color-gray-100);
+  --salt-palette-neutral-weak: var(--salt-color-gray-600);
+  --salt-palette-neutral-weaker: var(--salt-color-gray-800);
+  --salt-palette-neutral-weakest: var(--salt-color-gray-900);
+}

package/css/next/palette/positive.css

@@ -0,0 +1,15 @@
+.salt-theme.salt-theme-next.vuu-theme[data-mode="light"] {
+  --salt-palette-positive-stronger: var(--salt-color-green-700);
+  --salt-palette-positive-strong: var(--salt-color-green-600);
+  --salt-palette-positive: var(--salt-color-green-500);
+  --salt-palette-positive-weaker: var(--salt-color-green-200);
+  --salt-palette-positive-weakest: var(--salt-color-green-100);
+}
+
+.salt-theme.salt-theme-next.vuu-theme[data-mode="dark"] {
+  --salt-palette-positive-stronger: var(--salt-color-green-300);
+  --salt-palette-positive-strong: var(--salt-color-green-400);
+  --salt-palette-positive: var(--salt-color-green-500);
+  --salt-palette-positive-weaker: var(--salt-color-green-800);
+  --salt-palette-positive-weakest: var(--salt-color-green-900);
+}

package/css/next/palette/shadow.css

@@ -0,0 +1,15 @@
+.salt-theme.salt-theme-next.vuu-theme[data-mode="light"] {
+  --salt-shadow-lowest: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  --salt-shadow-lower: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  --salt-shadow-low: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
+  --salt-shadow-mediumLow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
+  --salt-shadow-medium: 0 12px 40px 0 rgba(0, 0, 0, 0.3);
+}
+
+.salt-theme.salt-theme-next.vuu-theme[data-mode="dark"] {
+  --salt-shadow-lowest: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  --salt-shadow-lower: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
+  --salt-shadow-low: 0 4px 8px 0 rgba(0, 0, 0, 0.55);
+  --salt-shadow-mediumLow: 0 6px 10px 0 rgba(0, 0, 0, 0.55);
+  --salt-shadow-medium: 0 12px 40px 0 rgba(0, 0, 0, 0.65);
+}

package/css/next/palette/text.css

@@ -0,0 +1,29 @@
+.salt-theme-next.vuu-theme {
+  --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-nunito);
+}
+
+.salt-theme-next.salt-theme[data-heading-font="Nunito sans"] {
+  --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-nunito);
+
+  --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
+  --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
+  --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
+
+  --salt-palette-text-heading-fontWeight: var(--salt-typography-fontWeight-semiBold);
+  --salt-palette-text-heading-fontWeight-small: var(--salt-typography-fontWeight-regular);
+  --salt-palette-text-heading-fontWeight-strong: var(--salt-typography-fontWeight-bold);
+
+  --salt-palette-text-body-fontWeight: var(--salt-typography-fontWeight-regular);
+  --salt-palette-text-body-fontWeight-small: var(--salt-typography-fontWeight-light);
+  --salt-palette-text-body-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
+
+  --salt-palette-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
+  --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
+  --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
+}
+
+.salt-theme-next.salt-theme[data-action-font="Nunito sans"] {
+  --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-nunito);
+
+  --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
+}

package/css/next/palette/warning.css

@@ -0,0 +1,15 @@
+.salt-theme.salt-theme-next.vuu-theme[data-mode="light"] {
+  --salt-palette-warning-stronger: var(--salt-color-orange-700);
+  --salt-palette-warning-strong: var(--salt-color-orange-600);
+  --salt-palette-warning: var(--salt-color-orange-500);
+  --salt-palette-warning-weaker: var(--salt-color-orange-200);
+  --salt-palette-warning-weakest: var(--salt-color-orange-100);
+}
+
+.salt-theme.salt-theme-next.vuu-theme[data-mode="dark"] {
+  --salt-palette-warning-stronger: var(--salt-color-orange-300);
+  --salt-palette-warning-strong: var(--salt-color-orange-400);
+  --salt-palette-warning: var(--salt-color-orange-500);
+  --salt-palette-warning-weaker: var(--salt-color-orange-800);
+  --salt-palette-warning-weakest: var(--salt-color-orange-900);
+}