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

package/css/palette/alpha-next.css

@@ -0,0 +1,19 @@
+.salt-theme.salt-theme-next[data-mode="light"] {
+  --salt-palette-alpha: var(--salt-color-black-30a);
+  --salt-palette-alpha-strong: var(--salt-color-black-45a);
+  --salt-palette-alpha-weak: var(--salt-color-black-15a);
+  --salt-palette-alpha-weaker: var(--salt-color-black-10a);
+
+  --salt-palette-alpha-backdrop: var(--salt-color-white-70a);
+  --salt-palette-alpha-none: transparent;
+}
+
+.salt-theme.salt-theme-next[data-mode="dark"] {
+  --salt-palette-alpha: var(--salt-color-white-30a);
+  --salt-palette-alpha-strong: var(--salt-color-white-45a);
+  --salt-palette-alpha-weak: var(--salt-color-white-15a);
+  --salt-palette-alpha-weaker: var(--salt-color-white-10a);
+
+  --salt-palette-alpha-backdrop: var(--salt-color-black-70a);
+  --salt-palette-alpha-none: transparent;
+}

package/css/palette/background-next.css

@@ -0,0 +1,16 @@
+.salt-theme.salt-theme-next[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[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/palette/categorical.css

@@ -0,0 +1,163 @@
+.salt-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[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/palette/corner-next.css

@@ -0,0 +1,12 @@
+.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-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-strongest: var(--salt-curve-999);
+}

package/css/palette/error.css

@@ -0,0 +1,17 @@
+.salt-theme[data-mode="light"] {
+  --salt-palette-error-background: var(--salt-color-red-10);
+  --salt-palette-error-bold-background: var(--salt-color-red-500);
+  --salt-palette-error-background-selected: var(--salt-color-red-20);
+  --salt-palette-error-border: var(--salt-color-red-500);
+  --salt-palette-error-foreground-decorative: var(--salt-color-red-500);
+  --salt-palette-error-foreground-informative: var(--salt-color-red-600);
+}
+
+.salt-theme[data-mode="dark"] {
+  --salt-palette-error-background: var(--salt-color-red-900);
+  --salt-palette-error-bold-background: var(--salt-color-red-500);
+  --salt-palette-error-background-selected: var(--salt-color-red-900);
+  --salt-palette-error-border: var(--salt-color-red-400);
+  --salt-palette-error-foreground-decorative: var(--salt-color-red-400);
+  --salt-palette-error-foreground-informative: var(--salt-color-red-200);
+}

package/css/palette/foreground-next.css

@@ -0,0 +1,22 @@
+.salt-theme.salt-theme-next[data-mode="light"] {
+  --salt-palette-foreground-active: var(--salt-color-blue-700);
+  --salt-palette-foreground-hover: var(--salt-color-blue-600);
+  --salt-palette-foreground-primary: var(--salt-color-black);
+  --salt-palette-foreground-primary-disabled: var(--salt-color-black-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-600);
+  --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-600-40a);
+  --salt-palette-foreground-visited: var(--salt-color-purple-800);
+}
+.salt-theme.salt-theme-next[data-mode="dark"] {
+  --salt-palette-foreground-active: var(--salt-color-blue-300);
+  --salt-palette-foreground-hover: var(--salt-color-blue-400);
+  --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-400);
+  --salt-palette-foreground-secondary-disabled: var(--salt-color-gray-400-40a);
+  --salt-palette-foreground-visited: var(--salt-color-purple-200);
+}

package/css/palette/info-next.css

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

package/css/palette/info.css

@@ -0,0 +1,15 @@
+.salt-theme[data-mode="light"] {
+  --salt-palette-info-background: var(--salt-color-blue-10);
+  --salt-palette-info-bold-background: var(--salt-color-blue-500);
+  --salt-palette-info-border: var(--salt-color-blue-500);
+  --salt-palette-info-foreground-decorative: var(--salt-color-blue-500);
+  --salt-palette-info-foreground-informative: var(--salt-color-blue-600);
+}
+
+.salt-theme[data-mode="dark"] {
+  --salt-palette-info-background: var(--salt-color-blue-900);
+  --salt-palette-info-bold-background: var(--salt-color-blue-500);
+  --salt-palette-info-border: var(--salt-color-blue-400);
+  --salt-palette-info-foreground-decorative: var(--salt-color-blue-400);
+  --salt-palette-info-foreground-informative: var(--salt-color-blue-200);
+}

package/css/palette/interact.css

@@ -0,0 +1,91 @@
+.salt-theme[data-mode="light"] {
+  --salt-palette-interact-background: transparent;
+  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
+  --salt-palette-interact-background-hover: var(--salt-color-blue-10);
+  --salt-palette-interact-background-active: var(--salt-color-blue-30);
+  --salt-palette-interact-background-disabled: transparent;
+  --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-30-fade-background);
+  --salt-palette-interact-border: var(--salt-color-gray-200);
+  --salt-palette-interact-border-active: var(--salt-color-blue-600);
+  --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-600-fade-fill);
+  --salt-palette-interact-border-disabled: var(--salt-color-gray-200-fade-border);
+  --salt-palette-interact-border-hover: var(--salt-color-blue-500);
+  --salt-palette-interact-border-readonly: var(--salt-color-gray-200-fade-border-readonly);
+  --salt-palette-interact-foreground: var(--salt-color-gray-200);
+  --salt-palette-interact-foreground-active: var(--salt-color-blue-600);
+  --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-600-fade-foreground);
+  --salt-palette-interact-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
+  --salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
+  --salt-palette-interact-outline: var(--salt-color-blue-600);
+
+  --salt-palette-interact-cta-background: var(--salt-color-blue-600);
+  --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
+  --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-fade-background);
+  --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500);
+  --salt-palette-interact-cta-foreground: var(--salt-color-white);
+  --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
+  --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
+  --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
+  --salt-palette-interact-primary-background: var(--salt-color-gray-60);
+  --salt-palette-interact-primary-background-active: var(--salt-color-gray-200);
+  --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-fade-background);
+  --salt-palette-interact-primary-background-hover: var(--salt-color-gray-40);
+  --salt-palette-interact-primary-foreground: var(--salt-color-gray-900);
+  --salt-palette-interact-primary-foreground-active: var(--salt-color-white);
+  --salt-palette-interact-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
+  --salt-palette-interact-primary-foreground-hover: var(--salt-color-gray-900);
+  --salt-palette-interact-secondary-background: transparent;
+  --salt-palette-interact-secondary-background-active: var(--salt-color-gray-200);
+  --salt-palette-interact-secondary-background-disabled: transparent;
+  --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-40);
+  --salt-palette-interact-secondary-foreground: var(--salt-color-gray-900);
+  --salt-palette-interact-secondary-foreground-active: var(--salt-color-white);
+  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
+  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900);
+}
+
+.salt-theme[data-mode="dark"] {
+  --salt-palette-interact-background: transparent;
+  --salt-palette-interact-background-active: var(--salt-color-blue-700);
+  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
+  --salt-palette-interact-background-hover: var(--salt-color-blue-800);
+  --salt-palette-interact-background-disabled: transparent;
+  --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-700-fade-background);
+  --salt-palette-interact-border: var(--salt-color-gray-90);
+  --salt-palette-interact-border-active: var(--salt-color-blue-100);
+  --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-100-fade-fill);
+  --salt-palette-interact-border-disabled: var(--salt-color-gray-90-fade-border);
+  --salt-palette-interact-border-hover: var(--salt-color-blue-500);
+  --salt-palette-interact-border-readonly: var(--salt-color-gray-90-fade-border-readonly);
+  --salt-palette-interact-foreground: var(--salt-color-gray-90);
+  --salt-palette-interact-foreground-active: var(--salt-color-blue-100);
+  --salt-palette-interact-foreground-activeDisabled: var(--salt-color-blue-100-fade-foreground);
+  --salt-palette-interact-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
+  --salt-palette-interact-foreground-hover: var(--salt-color-blue-500);
+  --salt-palette-interact-outline: var(--salt-color-blue-100);
+
+  --salt-palette-interact-cta-background: var(--salt-color-blue-600);
+  --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
+  --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-fade-background);
+  --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500);
+  --salt-palette-interact-cta-foreground: var(--salt-color-white);
+  --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
+  --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
+  --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
+  --salt-palette-interact-primary-background: var(--salt-color-gray-300);
+  --salt-palette-interact-primary-background-active: var(--salt-color-gray-70);
+  --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-fade-background);
+  --salt-palette-interact-primary-background-hover: var(--salt-color-gray-200);
+  --salt-palette-interact-primary-foreground: var(--salt-color-white);
+  --salt-palette-interact-primary-foreground-active: var(--salt-color-gray-900);
+  --salt-palette-interact-primary-foreground-disabled: var(--salt-color-white-fade-foreground);
+  --salt-palette-interact-primary-foreground-hover: var(--salt-color-white);
+  --salt-palette-interact-secondary-background: transparent;
+  --salt-palette-interact-secondary-background-active: var(--salt-color-gray-70);
+  --salt-palette-interact-secondary-background-disabled: transparent;
+  --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-200);
+  --salt-palette-interact-secondary-foreground: var(--salt-color-white);
+  --salt-palette-interact-secondary-foreground-active: var(--salt-color-gray-900);
+  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground);
+  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
+}

package/css/palette/navigate.css

@@ -0,0 +1,17 @@
+.salt-theme[data-mode="light"] {
+  --salt-palette-navigate-background-hover: var(--salt-color-black-fade-background-hover);
+  --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600);
+  --salt-palette-navigate-foreground-active: var(--salt-color-blue-700);
+  --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);
+  --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
+  --salt-palette-navigate-indicator-active: var(--salt-color-orange-600);
+}
+
+.salt-theme[data-mode="dark"] {
+  --salt-palette-navigate-background-hover: var(--salt-color-white-fade-background-hover);
+  --salt-palette-navigate-foreground-hover: var(--salt-color-blue-200);
+  --salt-palette-navigate-foreground-active: var(--salt-color-blue-300);
+  --salt-palette-navigate-foreground-visited: var(--salt-color-purple-100);
+  --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
+  --salt-palette-navigate-indicator-active: var(--salt-color-orange-400);
+}

package/css/palette/negative-next.css

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

package/css/palette/negative.css

@@ -0,0 +1,7 @@
+.salt-theme[data-mode="light"] {
+  --salt-palette-negative-foreground: var(--salt-color-red-700);
+}
+
+.salt-theme[data-mode="dark"] {
+  --salt-palette-negative-foreground: var(--salt-color-red-300);
+}

package/css/palette/neutral-next.css

@@ -0,0 +1,34 @@
+.salt-theme.salt-theme-next[data-mode="light"] {
+  --salt-palette-neutral: var(--salt-color-gray-500);
+  --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-600);
+  --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-weak-disabled: var(--salt-color-gray-400-40a);
+  --salt-palette-neutral-weaker: var(--salt-color-gray-300);
+  --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-weakest: var(--salt-color-gray-200);
+  --salt-palette-neutral-action-hover: var(--salt-color-gray-600);
+  --salt-palette-neutral-action-active: var(--salt-color-gray-800);
+}
+.salt-theme.salt-theme-next[data-mode="dark"] {
+  --salt-palette-neutral: var(--salt-color-gray-500);
+  --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-300);
+  --salt-palette-neutral-strongest: var(--salt-color-gray-200);
+  --salt-palette-neutral-weak: var(--salt-color-gray-600);
+  --salt-palette-neutral-weak-disabled: var(--salt-color-gray-600-40a);
+  --salt-palette-neutral-weaker: var(--salt-color-gray-700);
+  --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-weakest: var(--salt-color-gray-800);
+  --salt-palette-neutral-action-hover: var(--salt-color-gray-600);
+  --salt-palette-neutral-action-active: var(--salt-color-gray-800);
+}

package/css/palette/neutral.css

@@ -0,0 +1,51 @@
+.salt-theme[data-mode="light"] {
+  --salt-palette-neutral-primary-background: var(--salt-color-white);
+  --salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background);
+  --salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);
+  --salt-palette-neutral-primary-foreground: var(--salt-color-gray-900);
+  --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
+  --salt-palette-neutral-primary-separator: var(--salt-color-black-fade-separatorOpacity-primary);
+  --salt-palette-neutral-primary-border: var(--salt-color-gray-50);
+  --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-50-fade-border);
+  --salt-palette-neutral-secondary-background: var(--salt-color-gray-20);
+  --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-20-fade-background);
+  --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-20-fade-background-readonly);
+  --salt-palette-neutral-secondary-border: var(--salt-color-gray-50);
+  --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-50-fade-border);
+  --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
+  --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
+  --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
+  --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
+  --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
+  --salt-palette-neutral-selection: var(--salt-color-black-fade-background-selection);
+  --salt-palette-neutral-tertiary-background: var(--salt-color-gray-30);
+  --salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-30-fade-background);
+  --salt-palette-neutral-tertiary-border: var(--salt-color-gray-50);
+  --salt-palette-neutral-tertiary-border-disabled: var(--salt-color-gray-50-fade-background);
+}
+
+.salt-theme[data-mode="dark"] {
+  --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
+  --salt-palette-neutral-primary-background-disabled: var(--salt-color-gray-800-fade-background);
+  --salt-palette-neutral-primary-background-readonly: var(--salt-color-gray-800-fade-background-readonly);
+  --salt-palette-neutral-primary-border: var(--salt-color-gray-300);
+  --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-300-fade-border);
+  --salt-palette-neutral-primary-foreground: var(--salt-color-white);
+  --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-white-fade-foreground);
+  --salt-palette-neutral-primary-separator: var(--salt-color-white-fade-separatorOpacity-primary);
+  --salt-palette-neutral-secondary-background: var(--salt-color-gray-600);
+  --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-600-fade-background);
+  --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-600-fade-background-readonly);
+  --salt-palette-neutral-secondary-border: var(--salt-color-gray-300);
+  --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-300-fade-border);
+  --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-70);
+  --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-70-fade-foreground);
+  --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
+  --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
+  --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
+  --salt-palette-neutral-selection: var(--salt-color-white-fade-background-selection);
+  --salt-palette-neutral-tertiary-background: var(--salt-color-gray-500);
+  --salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-500-fade-background);
+  --salt-palette-neutral-tertiary-border: var(--salt-color-gray-300);
+  --salt-palette-neutral-tertiary-border-disabled: var(--salt-color-gray-300-fade-background);
+}

package/css/palette/opacity.css

@@ -0,0 +1,9 @@
+.salt-theme {
+  --salt-palette-opacity-backdrop: var(--salt-opacity-70);
+  --salt-palette-opacity-disabled: var(--salt-opacity-40);
+  --salt-palette-opacity-background-readonly: var(--salt-opacity-0);
+  --salt-palette-opacity-border-readonly: var(--salt-opacity-15);
+  --salt-palette-opacity-primary-border: var(--salt-opacity-45);
+  --salt-palette-opacity-secondary-border: var(--salt-opacity-25);
+  --salt-palette-opacity-tertiary-border: var(--salt-opacity-15);
+}

package/css/palette/positive-next.css

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

package/css/palette/positive.css

@@ -0,0 +1,7 @@
+.salt-theme[data-mode="light"] {
+  --salt-palette-positive-foreground: var(--salt-color-green-700);
+}
+
+.salt-theme[data-mode="dark"] {
+  --salt-palette-positive-foreground: var(--salt-color-green-300);
+}

package/css/palette/success.css

@@ -0,0 +1,17 @@
+.salt-theme[data-mode="light"] {
+  --salt-palette-success-background: var(--salt-color-green-10);
+  --salt-palette-success-bold-background: var(--salt-color-green-500);
+  --salt-palette-success-background-selected: var(--salt-color-green-20);
+  --salt-palette-success-border: var(--salt-color-green-500);
+  --salt-palette-success-foreground-decorative: var(--salt-color-green-500);
+  --salt-palette-success-foreground-informative: var(--salt-color-green-600);
+}
+
+.salt-theme[data-mode="dark"] {
+  --salt-palette-success-background: var(--salt-color-green-900);
+  --salt-palette-success-bold-background: var(--salt-color-green-500);
+  --salt-palette-success-background-selected: var(--salt-color-green-900);
+  --salt-palette-success-border: var(--salt-color-green-400);
+  --salt-palette-success-foreground-decorative: var(--salt-color-green-400);
+  --salt-palette-success-foreground-informative: var(--salt-color-green-200);
+}

package/css/palette/text-next.css

@@ -0,0 +1,50 @@
+.salt-theme-next.salt-theme[data-heading-font="Open Sans"] {
+  --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
+
+  --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-heading-font="Amplitude"] {
+  --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-amplitude);
+
+  --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-medium);
+  --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
+  --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
+
+  --salt-palette-text-heading-fontWeight: var(--salt-typography-fontWeight-medium);
+  --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="Open Sans"] {
+  --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-openSans);
+
+  --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
+}
+.salt-theme-next.salt-theme[data-action-font="Amplitude"] {
+  --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-amplitude);
+
+  --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-medium);
+}

package/css/palette/text.css

@@ -0,0 +1,24 @@
+.salt-theme {
+  --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
+  --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
+  --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
+  --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-openSans);
+
+  --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
+
+  --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);
+}

package/css/palette/warning-next.css

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