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

package/README.md

@@ -0,0 +1 @@
+This is a regular package

package/css/characteristics/accent-next.css

@@ -0,0 +1,5 @@
+.salt-theme.salt-theme-next {
+  --salt-accent-background: var(--salt-palette-accent);
+  --salt-accent-borderColor: var(--salt-palette-accent);
+  --salt-accent-foreground: var(--salt-palette-foreground-primary-alt);
+}

package/css/characteristics/accent.css

@@ -0,0 +1,5 @@
+.salt-theme {
+  --salt-accent-background: var(--salt-palette-accent-background);
+  --salt-accent-borderColor: var(--salt-palette-accent-border);
+  --salt-accent-foreground: var(--salt-palette-accent-foreground);
+}

package/css/characteristics/actionable-next.css

@@ -0,0 +1,41 @@
+.salt-theme.salt-theme-next {
+  /* CTA variant */
+  --salt-actionable-cta-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-actionable-cta-foreground-hover: var(--salt-palette-foreground-primary-alt);
+  --salt-actionable-cta-foreground-active: var(--salt-palette-foreground-primary-alt);
+  --salt-actionable-cta-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
+  --salt-actionable-cta-background: var(--salt-palette-accent);
+  --salt-actionable-cta-background-hover: var(--salt-palette-accent-action-hover);
+  --salt-actionable-cta-background-active: var(--salt-palette-accent-action-active);
+  --salt-actionable-cta-background-disabled: var(--salt-palette-accent-disabled);
+  --salt-actionable-cta-borderColor: var(--salt-palette-accent);
+  --salt-actionable-cta-borderColor-hover: transparent; /* TBD when adding bordered button */
+  --salt-actionable-cta-borderColor-active: var(--salt-palette-accent);
+  --salt-actionable-cta-borderColor-disabled: transparent; /* TBD when adding bordered button */
+  /* Primary variant */
+  --salt-actionable-primary-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-actionable-primary-foreground-hover: var(--salt-palette-foreground-primary-alt);
+  --salt-actionable-primary-foreground-active: var(--salt-palette-foreground-primary-alt);
+  --salt-actionable-primary-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
+  --salt-actionable-primary-background: var(--salt-palette-neutral);
+  --salt-actionable-primary-background-hover: var(--salt-palette-neutral-action-hover);
+  --salt-actionable-primary-background-active: var(--salt-palette-neutral-action-active);
+  --salt-actionable-primary-background-disabled: var(--salt-palette-neutral-disabled);
+  --salt-actionable-primary-borderColor: var(--salt-palette-neutral);
+  --salt-actionable-primary-borderColor-hover: transparent; /* TBD when adding bordered button */
+  --salt-actionable-primary-borderColor-active: var(--salt-palette-neutral);
+  --salt-actionable-primary-borderColor-disabled: transparent; /* TBD when adding bordered button */
+  /* Secondary variant */
+  --salt-actionable-secondary-foreground: var(--salt-palette-foreground-primary);
+  --salt-actionable-secondary-foreground-hover: var(--salt-palette-foreground-primary-alt);
+  --salt-actionable-secondary-foreground-active: var(--salt-palette-foreground-primary-alt);
+  --salt-actionable-secondary-foreground-disabled: var(--salt-palette-foreground-primary-disabled);
+  --salt-actionable-secondary-background: transparent;
+  --salt-actionable-secondary-background-hover: var(--salt-palette-neutral-action-hover);
+  --salt-actionable-secondary-background-active: var(--salt-palette-neutral-action-active);
+  --salt-actionable-secondary-background-disabled: transparent;
+  --salt-actionable-secondary-borderColor: transparent;
+  --salt-actionable-secondary-borderColor-hover: transparent; /* TBD when adding bordered button */
+  --salt-actionable-secondary-borderColor-active: var(--salt-palette-neutral);
+  --salt-actionable-secondary-borderColor-disabled: transparent; /* TBD when adding bordered button */
+}

package/css/characteristics/actionable.css

@@ -0,0 +1,47 @@
+.salt-theme {
+  --salt-actionable-cursor-hover: pointer;
+  --salt-actionable-cursor-active: pointer;
+  --salt-actionable-cursor-disabled: not-allowed;
+
+  /* Primary variant */
+  --salt-actionable-primary-foreground: var(--salt-palette-interact-primary-foreground);
+  --salt-actionable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
+  --salt-actionable-primary-foreground-active: var(--salt-palette-interact-primary-foreground-active);
+  --salt-actionable-primary-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
+  --salt-actionable-primary-background: var(--salt-palette-interact-primary-background);
+  --salt-actionable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
+  --salt-actionable-primary-background-active: var(--salt-palette-interact-primary-background-active);
+  --salt-actionable-primary-background-disabled: var(--salt-palette-interact-primary-background-disabled);
+  --salt-actionable-primary-borderColor: transparent; /* TBD when adding bordered button */
+  --salt-actionable-primary-borderColor-hover: transparent; /* TBD when adding bordered button */
+  --salt-actionable-primary-borderColor-active: transparent; /* TBD when adding bordered button */
+  --salt-actionable-primary-borderColor-disabled: transparent; /* TBD when adding bordered button */
+
+  /* CTA variant */
+  --salt-actionable-cta-foreground: var(--salt-palette-interact-cta-foreground);
+  --salt-actionable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
+  --salt-actionable-cta-foreground-active: var(--salt-palette-interact-cta-foreground-active);
+  --salt-actionable-cta-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
+  --salt-actionable-cta-background: var(--salt-palette-interact-cta-background);
+  --salt-actionable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
+  --salt-actionable-cta-background-active: var(--salt-palette-interact-cta-background-active);
+  --salt-actionable-cta-background-disabled: var(--salt-palette-interact-cta-background-disabled);
+  --salt-actionable-cta-borderColor: transparent; /* TBD when adding bordered button */
+  --salt-actionable-cta-borderColor-hover: transparent; /* TBD when adding bordered button */
+  --salt-actionable-cta-borderColor-active: transparent; /* TBD when adding bordered button */
+  --salt-actionable-cta-borderColor-disabled: transparent; /* TBD when adding bordered button */
+
+  /* Secondary variant */
+  --salt-actionable-secondary-foreground: var(--salt-palette-interact-secondary-foreground);
+  --salt-actionable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
+  --salt-actionable-secondary-foreground-active: var(--salt-palette-interact-secondary-foreground-active);
+  --salt-actionable-secondary-foreground-disabled: var(--salt-palette-interact-secondary-foreground-disabled);
+  --salt-actionable-secondary-background: var(--salt-palette-interact-secondary-background);
+  --salt-actionable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
+  --salt-actionable-secondary-background-active: var(--salt-palette-interact-secondary-background-active);
+  --salt-actionable-secondary-background-disabled: var(--salt-palette-interact-secondary-background-disabled);
+  --salt-actionable-secondary-borderColor: transparent; /* TBD when adding bordered button */
+  --salt-actionable-secondary-borderColor-hover: transparent; /* TBD when adding bordered button */
+  --salt-actionable-secondary-borderColor-active: transparent; /* TBD when adding bordered button */
+  --salt-actionable-secondary-borderColor-disabled: transparent; /* TBD when adding bordered button */
+}

package/css/characteristics/category-next.css

@@ -0,0 +1,22 @@
+.salt-theme.salt-theme-next {
+  --salt-category-1-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-2-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-3-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-4-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-5-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-6-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-7-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-8-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-9-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-10-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-11-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-12-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-13-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-14-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-15-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-16-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-17-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-18-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-19-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-category-20-bold-foreground: var(--salt-palette-foreground-primary-alt);
+}

package/css/characteristics/category.css

@@ -0,0 +1,141 @@
+.salt-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-foreground: var(--salt-palette-accent-foreground);
+  --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-foreground: var(--salt-palette-accent-foreground);
+  --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-foreground: var(--salt-palette-accent-foreground);
+  --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-foreground: var(--salt-palette-accent-foreground);
+  --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-foreground: var(--salt-palette-accent-foreground);
+  --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-foreground: var(--salt-palette-accent-foreground);
+  --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-foreground: var(--salt-palette-accent-foreground);
+  --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-foreground: var(--salt-palette-accent-foreground);
+  --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-foreground: var(--salt-palette-accent-foreground);
+  --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-foreground: var(--salt-palette-accent-foreground);
+  --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-foreground: var(--salt-palette-accent-foreground);
+  --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-foreground: var(--salt-palette-accent-foreground);
+  --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-foreground: var(--salt-palette-accent-foreground);
+  --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-foreground: var(--salt-palette-accent-foreground);
+  --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-foreground: var(--salt-palette-accent-foreground);
+  --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-foreground: var(--salt-palette-accent-foreground);
+  --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-foreground: var(--salt-palette-accent-foreground);
+  --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-foreground: var(--salt-palette-accent-foreground);
+  --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-foreground: var(--salt-palette-accent-foreground);
+  --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-foreground: var(--salt-palette-accent-foreground);
+  --salt-category-20-bold-background: var(--salt-palette-categorical-20);
+}

package/css/characteristics/container-next.css

@@ -0,0 +1,16 @@
+.salt-theme.salt-theme-next {
+  --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);
+  --salt-container-primary-borderColor-disabled: var(--salt-palette-alpha-weaker);
+
+  --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);
+  --salt-container-secondary-borderColor-disabled: var(--salt-palette-alpha-weaker);
+
+  --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);
+  --salt-container-tertiary-borderColor-disabled: var(--salt-palette-alpha-weaker);
+}

package/css/characteristics/container.css

@@ -0,0 +1,18 @@
+.salt-theme {
+  --salt-container-borderStyle: solid;
+
+  --salt-container-primary-background: var(--salt-palette-neutral-primary-background);
+  --salt-container-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);
+  --salt-container-primary-borderColor: var(--salt-palette-neutral-primary-border);
+  --salt-container-primary-borderColor-disabled: var(--salt-palette-neutral-primary-border-disabled);
+
+  --salt-container-secondary-background: var(--salt-palette-neutral-secondary-background);
+  --salt-container-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
+  --salt-container-secondary-borderColor: var(--salt-palette-neutral-secondary-border);
+  --salt-container-secondary-borderColor-disabled: var(--salt-palette-neutral-secondary-border-disabled);
+
+  --salt-container-tertiary-background: var(--salt-palette-neutral-tertiary-background);
+  --salt-container-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
+  --salt-container-tertiary-borderColor: var(--salt-palette-neutral-tertiary-border);
+  --salt-container-tertiary-borderColor-disabled: var(--salt-palette-neutral-tertiary-border-disabled);
+}

package/css/characteristics/content-next.css

@@ -0,0 +1,14 @@
+.salt-theme.salt-theme-next {
+  --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-bold-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-content-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
+
+  --salt-content-foreground-hover: var(--salt-palette-foreground-hover);
+  --salt-content-foreground-active: var(--salt-palette-foreground-active);
+  --salt-content-foreground-visited: var(--salt-palette-foreground-visited);
+  --salt-content-foreground-highlight: var(--salt-palette-accent-weaker);
+}

package/css/characteristics/content.css

@@ -0,0 +1,15 @@
+.salt-theme {
+  /* Colors */
+  --salt-content-primary-foreground: var(--salt-palette-neutral-primary-foreground);
+  --salt-content-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
+  --salt-content-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
+  --salt-content-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
+
+  --salt-content-bold-foreground: var(--salt-palette-interact-cta-foreground);
+  --salt-content-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
+
+  --salt-content-foreground-hover: var(--salt-palette-navigate-foreground-hover);
+  --salt-content-foreground-active: var(--salt-palette-navigate-foreground-active);
+  --salt-content-foreground-visited: var(--salt-palette-navigate-foreground-visited);
+  --salt-content-foreground-highlight: var(--salt-palette-interact-background-active);
+}

package/css/characteristics/draggable.css

@@ -0,0 +1,10 @@
+.salt-theme {
+  --salt-draggable-horizontal-cursor-hover: row-resize;
+  --salt-draggable-horizontal-cursor-active: row-resize;
+
+  --salt-draggable-vertical-cursor-hover: col-resize;
+  --salt-draggable-vertical-cursor-active: col-resize;
+
+  --salt-draggable-grab-cursor-hover: grab;
+  --salt-draggable-grab-cursor-active: grabbing;
+}

package/css/characteristics/editable-next.css

@@ -0,0 +1,19 @@
+.salt-theme.salt-theme-next {
+  --salt-editable-borderColor: var(--salt-palette-neutral);
+  --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/characteristics/editable.css

@@ -0,0 +1,33 @@
+.salt-theme {
+  --salt-editable-cursor-hover: text;
+  --salt-editable-cursor-active: text;
+  --salt-editable-cursor-disabled: not-allowed;
+  --salt-editable-cursor-readonly: text;
+
+  --salt-editable-borderStyle: solid;
+  --salt-editable-borderStyle-hover: solid;
+  --salt-editable-borderStyle-active: solid;
+  --salt-editable-borderStyle-disabled: solid;
+  --salt-editable-borderStyle-readonly: solid;
+  --salt-editable-borderWidth-active: 2px;
+
+  --salt-editable-borderColor: var(--salt-palette-interact-border);
+  --salt-editable-borderColor-active: var(--salt-palette-interact-border-active);
+  --salt-editable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
+  --salt-editable-borderColor-hover: var(--salt-palette-interact-border-hover);
+  --salt-editable-borderColor-readonly: var(--salt-palette-interact-border-readonly);
+
+  --salt-editable-primary-background: var(--salt-palette-neutral-primary-background);
+  --salt-editable-primary-background-active: var(--salt-palette-neutral-primary-background);
+  --salt-editable-primary-background-disabled: var(--salt-palette-neutral-primary-background-disabled);
+  --salt-editable-primary-background-hover: var(--salt-palette-neutral-primary-background);
+  --salt-editable-primary-background-readonly: var(--salt-palette-neutral-primary-background-readonly);
+
+  --salt-editable-secondary-background: var(--salt-palette-neutral-secondary-background);
+  --salt-editable-secondary-background-active: var(--salt-palette-neutral-secondary-background);
+  --salt-editable-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
+  --salt-editable-secondary-background-hover: var(--salt-palette-neutral-secondary-background);
+  --salt-editable-secondary-background-readonly: var(--salt-palette-neutral-secondary-background-readonly);
+
+  --salt-editable-help-fontStyle: italic;
+}

package/css/characteristics/focused-next.css

@@ -0,0 +1,3 @@
+.salt-theme.salt-theme-next {
+  --salt-focused-outlineColor: var(--salt-palette-accent-stronger);
+}

package/css/characteristics/focused.css

@@ -0,0 +1,21 @@
+.salt-theme {
+  --salt-focused-outlineColor: var(--salt-palette-interact-outline);
+  --salt-focused-outlineStyle: dotted;
+  --salt-focused-outlineWidth: 2px;
+  --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 */
+}
+
+.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/characteristics/navigable-next.css

@@ -0,0 +1,6 @@
+.salt-theme.salt-theme-next {
+  --salt-navigable-indicator-hover: var(--salt-palette-neutral);
+  --salt-navigable-indicator-active: var(--salt-palette-accent);
+
+  /* --salt-navigable-background-hover: var(--salt-palette-navigate-background-hover); */
+}

package/css/characteristics/navigable.css

@@ -0,0 +1,21 @@
+.salt-theme {
+  --salt-navigable-cursor-active: pointer;
+  --salt-navigable-cursor-hover: pointer;
+  --salt-navigable-cursor-disabled: not-allowed;
+  --salt-navigable-cursor-edit: text;
+
+  --salt-navigable-fontWeight: var(--salt-typography-fontWeight-regular);
+  --salt-navigable-fontWeight-hover: var(--salt-typography-fontWeight-regular);
+  --salt-navigable-fontWeight-active: var(--salt-typography-fontWeight-semiBold);
+  --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
+
+  --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
+  --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
+
+  --salt-navigable-background-hover: var(--salt-palette-navigate-background-hover);
+
+  /* Link */
+  --salt-navigable-textDecoration: underline;
+  --salt-navigable-textDecoration-hover: none;
+  --salt-navigable-textDecoration-selected: underline;
+}

package/css/characteristics/overlayable-next.css

@@ -0,0 +1,4 @@
+.salt-theme.salt-theme-next {
+  --salt-overlayable-background: var(--salt-palette-alpha-backdrop);
+  --salt-overlayable-rangeSelection: var(--salt-palette-alpha-weak);
+}

package/css/characteristics/overlayable.css

@@ -0,0 +1,12 @@
+.salt-theme {
+  --salt-overlayable-shadow-scroll: var(--salt-shadow-100);
+  --salt-overlayable-shadow-region: var(--salt-shadow-200);
+  --salt-overlayable-shadow: var(--salt-shadow-200);
+  --salt-overlayable-shadow-hover: var(--salt-shadow-300);
+  --salt-overlayable-shadow-popout: var(--salt-shadow-400);
+  --salt-overlayable-shadow-drag: var(--salt-shadow-400);
+  --salt-overlayable-shadow-modal: var(--salt-shadow-500);
+
+  --salt-overlayable-background: var(--salt-palette-neutral-backdrop);
+  --salt-overlayable-rangeSelection: var(--salt-palette-neutral-selection);
+}

package/css/characteristics/selectable-next.css

@@ -0,0 +1,20 @@
+.salt-theme.salt-theme-next {
+  --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-readonly);
+
+  --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-blurSelected: var(--salt-palette-neutral-weakest);
+  --salt-selectable-background-disabled: var(--salt-palette-alpha-none);
+  --salt-selectable-background-selectedDisabled: var(--salt-palette-accent-weaker-disabled);
+}

package/css/characteristics/selectable.css

@@ -0,0 +1,31 @@
+.salt-theme {
+  --salt-selectable-cursor-hover: pointer;
+  --salt-selectable-cursor-selected: pointer;
+  --salt-selectable-cursor-blurSelected: pointer;
+  --salt-selectable-cursor-disabled: not-allowed;
+  --salt-selectable-cursor-readonly: not-allowed;
+
+  --salt-selectable-borderStyle: solid;
+  --salt-selectable-borderStyle-hover: solid;
+  --salt-selectable-borderStyle-selected: solid;
+  --salt-selectable-borderStyle-blurSelected: solid;
+
+  --salt-selectable-borderColor: var(--salt-palette-interact-border);
+  --salt-selectable-borderColor-hover: var(--salt-palette-interact-border-hover);
+  --salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
+  --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-interact-border-activeDisabled);
+  --salt-selectable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
+  --salt-selectable-borderColor-readonly: var(--salt-palette-interact-border-readonly);
+
+  --salt-selectable-foreground: var(--salt-palette-interact-foreground);
+  --salt-selectable-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
+  --salt-selectable-foreground-hover: var(--salt-palette-interact-foreground-hover);
+  --salt-selectable-foreground-selected: var(--salt-palette-interact-foreground-active);
+  --salt-selectable-foreground-selectedDisabled: var(--salt-palette-interact-foreground-activeDisabled);
+  --salt-selectable-background: var(--salt-palette-interact-background);
+  --salt-selectable-background-hover: var(--salt-palette-interact-background-hover);
+  --salt-selectable-background-selected: var(--salt-palette-interact-background-active);
+  --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
+  --salt-selectable-background-disabled: var(--salt-palette-interact-background-disabled);
+  --salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);
+}

package/css/characteristics/separable-next.css

@@ -0,0 +1,5 @@
+.salt-theme.salt-theme-next {
+  --salt-separable-primary-borderColor: var(--salt-palette-alpha-strong);
+  --salt-separable-secondary-borderColor: var(--salt-palette-alpha);
+  --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-weak);
+}

package/css/characteristics/separable.css

@@ -0,0 +1,7 @@
+.salt-theme {
+  --salt-separable-borderStyle: solid;
+
+  --salt-separable-primary-borderColor: var(--salt-palette-neutral-primary-separator);
+  --salt-separable-secondary-borderColor: var(--salt-palette-neutral-secondary-separator);
+  --salt-separable-tertiary-borderColor: var(--salt-palette-neutral-tertiary-separator);
+}

package/css/characteristics/status-next.css

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

package/css/characteristics/status.css

@@ -0,0 +1,34 @@
+.salt-theme {
+  --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
+  --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
+  --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
+
+  --salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative);
+  --salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative);
+  --salt-status-warning-foreground-decorative: var(--salt-palette-warning-foreground-decorative);
+  --salt-status-success-foreground-decorative: var(--salt-palette-success-foreground-decorative);
+
+  --salt-status-info-foreground-informative: var(--salt-palette-info-foreground-informative);
+  --salt-status-error-foreground-informative: var(--salt-palette-error-foreground-informative);
+  --salt-status-warning-foreground-informative: var(--salt-palette-warning-foreground-informative);
+  --salt-status-success-foreground-informative: var(--salt-palette-success-foreground-informative);
+
+  --salt-status-info-borderColor: var(--salt-palette-info-border);
+  --salt-status-error-borderColor: var(--salt-palette-error-border);
+  --salt-status-warning-borderColor: var(--salt-palette-warning-border);
+  --salt-status-success-borderColor: var(--salt-palette-success-border);
+
+  --salt-status-info-background: var(--salt-palette-info-background);
+  --salt-status-error-background: var(--salt-palette-error-background);
+  --salt-status-warning-background: var(--salt-palette-warning-background);
+  --salt-status-success-background: var(--salt-palette-success-background);
+
+  --salt-status-info-bold-background: var(--salt-palette-info-bold-background);
+  --salt-status-error-bold-background: var(--salt-palette-error-bold-background);
+  --salt-status-warning-bold-background: var(--salt-palette-warning-bold-background);
+  --salt-status-success-bold-background: var(--salt-palette-success-bold-background);
+
+  --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
+  --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
+  --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
+}

package/css/characteristics/target-next.css

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