@vuu-ui/vuu-theme 3.0.0-beta.3 → 3.1.0-beta.1

package/css/components/tabstrip.css

@@ -0,0 +1,77 @@
+.salt-theme.vuu-theme[data-mode="light"] {
+  .vuuTabstrip-primary {
+    --vuu-tab-background: var(--vuu-color-gray-10);
+    .vuuTab-selected {
+      --vuu-tab-background: var(--vuu-color-white);
+    }
+  }
+}
+
+.salt-theme.vuu-theme[data-mode="dark"] {
+  --vuu-tab-background: var(--salt-color-gray-600);
+}
+
+.salt-theme.vuu-theme {
+  .vuuTab {
+    --vuuTab-padding: 0 var(--salt-spacing-400);
+  }
+
+  .vuuTabstrip-primary {
+    --vuuOverflowContainer-borderColor: var(
+      --salt-separable-primary-borderColor
+    );
+    --vuuTab-background: var(--vuu-tab-background);
+    --vuuTab-borderRadius: 6px 6px 0 0;
+    --vuuTab-borderColor: var(--salt-separable-primary-borderColor);
+    --vuuTab-borderStyle: solid;
+    --vuuTab-borderWidth: 1px;
+
+    &.vuuOrientation-horizontal {
+      --vuuOverflowContainer-borderStyle: none;
+      --vuuOverflowContainer-contentHeight: calc(
+        var(--salt-size-base) + var(--salt-spacing-100)
+      );
+      --vuuOverflowContainer-height: calc(
+        var(--vuuOverflowContainer-contentHeight) + 7px
+      );
+      padding-bottom: 7px;
+    }
+
+    .vuuTab {
+      height: calc(var(--tab-height) + 1px);
+    }
+
+    .vuuTab-selected {
+      --vuuTab-background: var(--vuuWorkspace-background);
+      border-bottom-color: white;
+      z-index: 1;
+    }
+
+    .vuuTab:before {
+      height: calc(100% + 1px);
+      left: -1px;
+      top: -1px;
+      border-radius: 5px 0 0 0;
+      width: 6px;
+    }
+
+    .vuuTab:not(.vuuTab-selected):hover:before {
+      background-color: var(--salt-navigable-indicator-hover);
+    }
+
+    &.vuuTabstrip:before {
+      background-color: transparent;
+      border-radius: 0 6px 0 0;
+      border-left: solid 1px var(--salt-separable-primary-borderColor);
+      border-right: solid 1px var(--salt-separable-primary-borderColor);
+      border-top: solid 1px var(--salt-separable-primary-borderColor);
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 8px;
+      z-index: 1;
+    }
+  }
+}

package/css/components/toast.css

@@ -0,0 +1,12 @@
+.salt-theme.vuu-theme {
+    .vuuToastNotification {
+        --vuuToast-error-background: var(--salt-status-error-bold-background);
+        --vuuToast-error-foreground: white;
+        --vuuToast-success-background: var(--salt-status-success-bold-background);
+        --vuuToast-success-foreground: white;
+        --vuuToast-warning-background: var(--salt-status-warning-bold-background);
+        --vuuToast-warning-foreground: white;
+        --vuuToast-info-background: var(--salt-status-info-bold-background);
+        --vuuToast-info-foreground: white;
+    }
+}

package/css/components/toggle-button.css

@@ -0,0 +1,68 @@
+.salt-theme.vuu-theme {
+    .saltToggleButtonGroup {
+      padding: 0;
+
+        &[data-borderless="true"]{
+            border: none;
+        }
+
+    }
+
+    .saltToggleButtonGroup-horizontal {
+        .saltToggleButton {
+            gap: var(--salt-spacing-150);
+            height: calc(var(--salt-size-base) + var(--salt-size-fixed-400) - var(--salt-spacing-100));
+            padding: 0 var(--salt-spacing-400);
+            &[aria-checked="true"]{
+                --vuu-icon-color: var(--toggleButton-text-color-selected);
+            }
+        }
+    }
+}
+
+.salt-theme.vuu-theme {
+    .saltToggleButtonGroup {
+        padding: 0;
+        .saltToggleButton {
+            border-radius: var(--salt-palette-corner-weak);
+        }
+        &[data-borderless="true"]{
+            border: none;
+        }
+    }
+
+    .saltToggleButtonGroup-horizontal  {
+
+        .saltToggleButton {
+            --vuu-icon-color: var(--toggleButton-text-color);
+            gap: var(--salt-spacing-150);
+            height: calc(var(--salt-size-base) + var(--salt-size-fixed-400) - var(--salt-spacing-100));
+            padding: 0 var(--salt-spacing-400);
+            &[aria-checked="true"],
+            &[aria-pressed="true"]{
+                --vuu-icon-color: var(--toggleButton-text-color-selected);
+            }
+
+            &.saltToggleButton-neutral.saltToggleButton-solid[aria-checked="true"] {
+                background: var(--salt-color-gray-900);
+            }
+
+        }
+    }
+
+    .vuuStateButtonGroup {
+        column-gap: 1px;
+        .saltToggleButton {
+            border: none;
+            border-radius: 0;
+        }
+
+        .saltToggleButton:first-child {
+            border-radius: 4px 0 0 4px;
+        }
+        .saltToggleButton:last-child {
+            border-radius: 0 4px 4px 0;
+        }
+    }
+
+}

package/css/deprecated/characteristics.css

@@ -0,0 +1,132 @@
+.salt-theme.vuu-theme {
+  /* Container */
+  --salt-container-borderStyle: solid;
+
+  /* Editable */
+  --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-cursor-hover: text;
+  --salt-editable-cursor-active: text;
+  --salt-editable-cursor-disabled: not-allowed;
+  --salt-editable-cursor-readonly: text;
+  --salt-editable-borderWidth-active: 2px;
+  --salt-editable-help-fontStyle: italic;
+
+  /* Measured */
+  --salt-measured-borderStyle: solid;
+  --salt-measured-borderStyle-active: solid;
+  --salt-measured-borderStyle-complete: solid;
+  --salt-measured-borderStyle-incomplete: dotted;
+  --salt-measured-borderWidth: 2px;
+  --salt-measured-borderWidth-active: 2px;
+  --salt-measured-borderWidth-complete: 2px;
+  --salt-measured-borderWidth-incomplete: 2px;
+
+  --salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
+  --salt-measured-textAlign: center;
+
+  /* Selectable */
+  --salt-selectable-borderStyle: solid;
+  --salt-selectable-borderStyle-hover: solid;
+  --salt-selectable-borderStyle-selected: solid;
+  --salt-selectable-borderStyle-blurSelected: solid;
+
+  --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;
+
+  /* Separable */
+  --salt-separable-borderStyle: solid;
+
+  /* Draggable */
+  --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;
+
+  /* Actionable */
+  --salt-actionable-cursor-hover: pointer;
+  --salt-actionable-cursor-active: pointer;
+  --salt-actionable-cursor-disabled: not-allowed;
+  --salt-actionable-letterSpacing: 0.6px;
+  --salt-actionable-textTransform: uppercase;
+  --salt-actionable-textAlign: center;
+  --salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold);
+  --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
+  --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
+
+  /* Target */
+  --salt-target-cursor-disabled: not-allowed;
+  --salt-target-borderStyle: dashed;
+  --salt-target-borderStyle-hover: solid;
+  --salt-target-borderStyle-disabled: dashed;
+
+  --salt-text-link-textDecoration: underline;
+  --salt-text-link-textDecoration-hover: none;
+  --salt-text-link-textDecoration-selected: underline;
+  --salt-text-textDecoration: var(--salt-typography-textDecoration-none);
+  --salt-text-textTransform: none;
+
+  /* Navigable */
+  --salt-navigable-cursor-active: pointer;
+  --salt-navigable-cursor-hover: pointer;
+  --salt-navigable-cursor-disabled: not-allowed;
+  --salt-navigable-cursor-edit: text;
+  --salt-navigable-textDecoration: var(--salt-typography-textDecoration-underline);
+  --salt-navigable-textDecoration-hover: var(--salt-typography-textDecoration-none);
+  --salt-navigable-textDecoration-selected: var(--salt-typography-textDecoration-underline);
+
+  --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);
+
+  /* Accent */
+  --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold); /* Use --salt-text-notation-fontWeight */
+
+  /* Track */
+  --salt-track-borderStyle: solid;
+  --salt-track-borderStyle-active: solid;
+  --salt-track-borderStyle-complete: solid;
+  --salt-track-borderStyle-incomplete: dotted;
+  --salt-track-borderWidth: 2px; /* Use --salt-size-border-strong */
+  --salt-track-borderWidth-active: 2px; /* Use --salt-size-border-strong */
+  --salt-track-borderWidth-complete: 2px; /* Use --salt-size-border-strong */
+  --salt-track-borderWidth-incomplete: 2px; /* Use --salt-size-border-strong */
+  --salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
+  --salt-track-textAlign: center;
+
+  /* Taggable */
+  --salt-taggable-cursor-hover: pointer;
+  --salt-taggable-cursor-active: pointer;
+  --salt-taggable-cursor-disabled: not-allowed;
+
+  /* Overlayable */
+  --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
+  --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
+}
+
+/* Accent */
+.salt-density-high {
+  --salt-accent-fontSize: 8px; /* Use --salt-text-notation-fontSize */
+  --salt-accent-lineHeight: 11px; /* Use --salt-text-notation-lineHeight */
+}
+.salt-density-medium {
+  --salt-accent-fontSize: 10px; /* Use --salt-text-notation-fontSize */
+  --salt-accent-lineHeight: 13px; /* Use --salt-text-notation-lineHeight */
+}
+.salt-density-low {
+  --salt-accent-fontSize: 12px; /* Use --salt-text-notation-fontSize */
+  --salt-accent-lineHeight: 16px; /* Use --salt-text-notation-lineHeight */
+}
+.salt-density-touch {
+  --salt-accent-fontSize: 14px; /* Use --salt-text-notation-fontSize */
+  --salt-accent-lineHeight: 18px; /* Use --salt-text-notation-lineHeight */
+}

package/css/deprecated/foundations.css

@@ -0,0 +1,145 @@
+/*
+* **Deprecated:** Use duration instead
+*/
+.salt-theme.vuu-theme {
+  /* Delay */
+  --salt-delay-instant: 100ms;
+  --salt-delay-perceptible: 300ms;
+  --salt-delay-notable: 1000ms;
+  --salt-delay-cutoff: 10000ms;
+
+  /* Icon */
+  --salt-size-icon-base: var(--salt-icon-size-base);
+
+  /* Opacity */
+  --salt-opacity-1: 0.15;
+  --salt-opacity-2: 0.25;
+  --salt-opacity-3: 0.4;
+  --salt-opacity-4: 0.7;
+  --salt-opacity-8: 0.08;
+  --salt-opacity-0: 0;
+  --salt-opacity-15: 0.15;
+  --salt-opacity-25: 0.25;
+  --salt-opacity-40: 0.4;
+  --salt-opacity-45: 0.45;
+  --salt-opacity-70: 0.7;
+
+  /* Shadow */
+  --salt-shadow-0: none;
+  --salt-shadow-1: 0 1px 3px 0 var(--salt-shadow-1-color); /* Use --salt-shadow-100 */
+  --salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color); /* Use --salt-shadow-200 */
+  --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color); /* Use --salt-shadow-300 */
+  --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color); /* Use --salt-shadow-400 */
+  --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color); /* Use --salt-shadow-500 */
+  --salt-shadow-100: 0 1px 3px 0 var(--salt-shadow-100-color);
+  --salt-shadow-200: 0 2px 4px 0 var(--salt-shadow-200-color);
+  --salt-shadow-300: 0 4px 8px 0 var(--salt-shadow-300-color);
+  --salt-shadow-400: 0 6px 10px 0 var(--salt-shadow-400-color);
+  --salt-shadow-500: 0 12px 40px 0 var(--salt-shadow-500-color);
+
+  /* Typography */
+  --salt-typography-fontFamily: var(--salt-typography-fontFamily-nunito);
+  --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
+
+  /* Alpha */
+  --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
+  --salt-color-black-45a: rgba(var(--salt-color-black-rgb), 0.45);
+  --salt-color-black-60a: rgba(var(--salt-color-black-rgb), 0.6);
+  --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
+  --salt-color-black-90a: rgba(var(--salt-color-black-rgb), 0.9);
+  --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
+  --salt-color-white-45a: rgba(var(--salt-color-white-rgb), 0.45);
+  --salt-color-white-60a: rgba(var(--salt-color-white-rgb), 0.6);
+  --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
+  --salt-color-white-90a: rgba(var(--salt-color-white-rgb), 0.9);
+}
+
+.salt-theme.vuu-theme[data-mode="light"] {
+  --salt-shadow-1-color: rgba(0, 0, 0, 0.1); /* Use --salt-shadow-100-color */
+  --salt-shadow-2-color: rgba(0, 0, 0, 0.1); /* Use --salt-shadow-200-color */
+  --salt-shadow-3-color: rgba(0, 0, 0, 0.15); /* Use --salt-shadow-300-color */
+  --salt-shadow-4-color: rgba(0, 0, 0, 0.2); /* Use --salt-shadow-400-color */
+  --salt-shadow-5-color: rgba(0, 0, 0, 0.3); /* Use --salt-shadow-500-color */
+  --salt-shadow-100-color: rgba(0, 0, 0, 0.1);
+  --salt-shadow-200-color: rgba(0, 0, 0, 0.1);
+  --salt-shadow-300-color: rgba(0, 0, 0, 0.15);
+  --salt-shadow-400-color: rgba(0, 0, 0, 0.2);
+  --salt-shadow-500-color: rgba(0, 0, 0, 0.3);
+}
+
+.salt-theme.vuu-theme[data-mode="dark"] {
+  --salt-shadow-1-color: rgba(0, 0, 0, 0.5); /* Use --salt-shadow-100-color */
+  --salt-shadow-2-color: rgba(0, 0, 0, 0.5); /* Use --salt-shadow-200-color */
+  --salt-shadow-3-color: rgba(0, 0, 0, 0.55); /* Use --salt-shadow-300-color */
+  --salt-shadow-4-color: rgba(0, 0, 0, 0.55); /* Use --salt-shadow-400-color */
+  --salt-shadow-5-color: rgba(0, 0, 0, 0.65); /* Use --salt-shadow-500-color */
+  --salt-shadow-100-color: rgba(0, 0, 0, 0.5);
+  --salt-shadow-200-color: rgba(0, 0, 0, 0.5);
+  --salt-shadow-300-color: rgba(0, 0, 0, 0.55);
+  --salt-shadow-400-color: rgba(0, 0, 0, 0.55);
+  --salt-shadow-500-color: rgba(0, 0, 0, 0.65);
+}
+
+.salt-density-touch,
+.salt-density-low,
+.salt-density-medium,
+.salt-density-high {
+  /* Size */
+  --salt-size-selection: var(--salt-size-selectable);
+  --salt-size-brandBar: 4px; /* Use --salt-size-accent */
+  --salt-size-graphic-small: 12px;
+  --salt-size-graphic-medium: 24px;
+  --salt-size-graphic-large: 48px;
+  --salt-size-divider-height: var(--salt-size-separator-height);
+  --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
+
+  --salt-size-detail: var(--salt-size-compact);
+  --salt-size-basis-unit: 4px;
+
+  --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
+  --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
+  --salt-size-separator-strokeWidth: 1px;
+  --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
+  --salt-size-sharktooth-height: 5px;
+  --salt-size-sharktooth-width: 10px;
+  --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
+
+  --salt-size-border: 1px;
+  --salt-size-bar-small: 2px;
+  --salt-size-border-strong: 2px;
+
+  /* Z Index */
+  --salt-zIndex-docked: 1050;
+}
+
+.salt-density-high {
+  --salt-size-unit: calc(var(--salt-size-basis-unit) * 1); /* Use --salt-spacing-100 */
+  --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
+  --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5); /* Use --salt-size-bar */
+  --salt-icon-size-base: 10px; /* Use --salt-size-icon */
+  --salt-icon-size-status-adornment: 6px; /* Use --salt-size-adornment */
+}
+
+.salt-density-medium {
+  --salt-size-unit: calc(var(--salt-size-basis-unit) * 2); /* Use --salt-spacing-100 */
+  --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
+  --salt-size-accent: calc(var(--salt-size-basis-unit) * 1); /* Use --salt-size-bar */
+  --salt-icon-size-base: 12px; /* Use --salt-size-icon */
+  --salt-icon-size-status-adornment: 8px; /* Use --salt-size-adornment */
+}
+
+.salt-density-low {
+  --salt-size-unit: calc(var(--salt-size-basis-unit) * 3); /* Use --salt-spacing-100 */
+  --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
+  --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5); /* Use --salt-size-bar */
+  --salt-icon-size-base: 14px; /* Use --salt-size-icon */
+  --salt-icon-size-status-adornment: 10px; /* Use --salt-size-adornment */
+}
+
+.salt-density-touch {
+  --salt-size-unit: calc(var(--salt-size-basis-unit) * 4); /* Use --salt-spacing-100 */
+  --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
+  --salt-size-accent: calc(var(--salt-size-basis-unit) * 2); /* Use --salt-size-bar */
+  --salt-icon-size-base: 16px; /* Use --salt-size-icon */
+  --salt-icon-size-status-adornment: 12px; /* Use --salt-size-adornment */
+}

package/css/foundations/alpha.css

@@ -0,0 +1,21 @@
+.salt-theme.vuu-theme,
+.salt-theme.vuu-theme {
+  --salt-color-white-5a: rgba(var(--salt-color-white-rgb), 0.05);
+  --salt-color-white-10a: rgba(var(--salt-color-white-rgb), 0.1);
+  --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
+  --salt-color-white-20a: rgba(var(--salt-color-white-rgb), 0.2);
+  --salt-color-white-30a: rgba(var(--salt-color-white-rgb), 0.3);
+  --salt-color-white-40a: rgba(var(--salt-color-white-rgb), 0.4);
+  --salt-color-white-50a: rgba(var(--salt-color-white-rgb), 0.5);
+  --salt-color-white-65a: rgba(var(--salt-color-white-rgb), 0.65);
+  --salt-color-white-80a: rgba(var(--salt-color-white-rgb), 0.8);
+  --salt-color-black-5a: rgba(var(--salt-color-black-rgb), 0.05);
+  --salt-color-black-10a: rgba(var(--salt-color-black-rgb), 0.1);
+  --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
+  --salt-color-black-20a: rgba(var(--salt-color-black-rgb), 0.2);
+  --salt-color-black-30a: rgba(var(--salt-color-black-rgb), 0.3);
+  --salt-color-black-40a: rgba(var(--salt-color-black-rgb), 0.4);
+  --salt-color-black-50a: rgba(var(--salt-color-black-rgb), 0.5);
+  --salt-color-black-65a: rgba(var(--salt-color-black-rgb), 0.65);
+  --salt-color-black-80a: rgba(var(--salt-color-black-rgb), 0.8);
+}

package/css/foundations/animation.css

@@ -0,0 +1,155 @@
+.salt-density-touch,
+.salt-density-low,
+.salt-density-medium,
+.salt-density-high {
+  --salt-animation-opacity-start: 0;
+  --salt-animation-opacity-end: 1;
+  --salt-animation-scale-start: 0;
+  --salt-animation-scale-end: 1;
+  --salt-animation-transform-start: 100%;
+  --salt-animation-transform-end: 0;
+  --salt-animation-duration: var(--salt-duration-perceptible);
+  --salt-animation-timing-function: ease-in-out;
+
+  /* Slide Animations */
+  --salt-animation-slide-in-top: slide-in-top var(--salt-animation-duration) var(--salt-animation-timing-function);
+  --salt-animation-slide-in-left: slide-in-left var(--salt-animation-duration) var(--salt-animation-timing-function);
+  --salt-animation-slide-in-right: slide-in-right var(--salt-animation-duration) var(--salt-animation-timing-function);
+  --salt-animation-slide-in-bottom: slide-in-bottom var(--salt-animation-duration) var(--salt-animation-timing-function);
+
+  --salt-animation-slide-out-top: slide-out-top var(--salt-animation-duration) var(--salt-animation-timing-function) both;
+  --salt-animation-slide-out-left: slide-out-left var(--salt-animation-duration) var(--salt-animation-timing-function) both;
+  --salt-animation-slide-out-right: slide-out-right var(--salt-animation-duration) var(--salt-animation-timing-function) both;
+  --salt-animation-slide-out-bottom: slide-out-bottom var(--salt-animation-duration) var(--salt-animation-timing-function) both;
+
+  /* Fade Animations */
+  --salt-animation-fade-in-back: fade-in-back var(--salt-animation-duration) var(--salt-animation-timing-function);
+  --salt-animation-fade-in-forward: fade-in-forward var(--salt-animation-duration) var(--salt-animation-timing-function);
+  --salt-animation-fade-in-center: fade-in-center var(--salt-animation-duration) var(--salt-animation-timing-function);
+  --salt-animation-fade-out-back: fade-out-back var(--salt-animation-duration) ease-in-out both;
+}
+
+/*Slide keyframes */
+@keyframes slide-in-top {
+  0% {
+    opacity: var(--salt-animation-opacity-start);
+    transform: translateY(var(--salt-animation-transform-start));
+  }
+  100% {
+    opacity: var(--salt-animation-opacity-end);
+    transform: translateY(var(--salt-animation-transform-end));
+  }
+}
+@keyframes slide-out-top {
+  0% {
+    opacity: var(--salt-animation-opacity-end);
+    transform: translateY(var(--salt-animation-transform-end));
+  }
+  100% {
+    opacity: var(--salt-animation-opacity-start);
+    transform: translateY(var(--salt-animation-transform-start));
+  }
+}
+@keyframes slide-in-left {
+  0% {
+    opacity: var(--salt-animation-opacity-start);
+    transform: translateX(calc(-1 * var(--salt-animation-transform-start)));
+  }
+  100% {
+    opacity: var(--salt-animation-opacity-end);
+    transform: translateX(var(--salt-animation-transform-end));
+  }
+}
+@keyframes slide-out-left {
+  0% {
+    opacity: var(--salt-animation-opacity-end);
+    transform: translateX(var(--salt-animation-transform-end));
+  }
+  100% {
+    opacity: var(--salt-animation-opacity-start);
+    transform: translateX(calc(-1 * var(--salt-animation-transform-start)));
+  }
+}
+@keyframes slide-in-right {
+  0% {
+    opacity: var(--salt-animation-opacity-start);
+    transform: translateX(var(--salt-animation-transform-start));
+  }
+  100% {
+    opacity: var(--salt-animation-opacity-end);
+    transform: translateX(var(--salt-animation-transform-end));
+  }
+}
+@keyframes slide-out-right {
+  0% {
+    opacity: var(--salt-animation-opacity-end);
+    transform: translateX(var(--salt-animation-transform-end));
+  }
+  100% {
+    opacity: var(--salt-animation-opacity-start);
+    transform: translateX(var(--salt-animation-transform-start));
+  }
+}
+@keyframes slide-in-bottom {
+  0% {
+    opacity: var(--salt-animation-opacity-start);
+    transform: translateY(calc(-1 * var(--salt-animation-transform-start)));
+  }
+  100% {
+    opacity: var(--salt-animation-opacity-end);
+    transform: translateY(var(--salt-animation-transform-end));
+  }
+}
+@keyframes slide-out-bottom {
+  0% {
+    opacity: var(--salt-animation-opacity-end);
+    transform: translateY(var(--salt-animation-transform-end));
+  }
+  100% {
+    opacity: var(--salt-animation-opacity-start);
+    transform: translateY(calc(-1 * var(--salt-animation-transform-start)));
+  }
+}
+/* Fade keyframes */
+@keyframes fade-in-back {
+  0% {
+    --salt-animation-scale-start: 1.4;
+    opacity: var(--salt-animation-opacity-start);
+    transform: scale(var(--salt-animation-scale-start));
+  }
+
+  100% {
+    opacity: var(--salt-animation-opacity-end);
+    transform: scale(var(--salt-animation-scale-end));
+  }
+}
+@keyframes fade-in-forward {
+  0% {
+    --salt-animation-scale-start: 0.6;
+    opacity: var(--salt-animation-opacity-start);
+    transform: scale(var(--salt-animation-scale-start));
+  }
+
+  100% {
+    opacity: var(--salt-animation-opacity-end);
+    transform: scale(var(--salt-animation-scale-end));
+  }
+}
+@keyframes fade-in-center {
+  0% {
+    opacity: var(--salt-animation-opacity-start);
+  }
+
+  100% {
+    opacity: var(--salt-animation-opacity-end);
+  }
+}
+
+@keyframes fade-out-back {
+  0% {
+    opacity: var(--salt-animation-opacity-end);
+  }
+  100% {
+    opacity: var(--salt-animation-opacity-start);
+  }
+}

package/css/foundations/borderStyle.css

@@ -0,0 +1,6 @@
+.salt-theme.vuu-theme,
+.salt-theme.vuu-theme {
+  --salt-borderStyle-solid: solid;
+  --salt-borderStyle-dashed: dashed;
+  --salt-borderStyle-dotted: dotted;
+}

package/css/foundations/color.css

@@ -0,0 +1,15 @@
+.salt-theme.vuu-theme {
+  --salt-color-black-rgb: 0, 0, 0;
+  --salt-color-white-rgb: 255, 255, 255;
+
+  --salt-color-black: rgb(var(--salt-color-black-rgb));
+  --salt-color-white: rgb(var(--salt-color-white-rgb));
+}
+
+.salt-theme.vuu-theme {
+  --salt-color-black-rgb: 0, 0, 0;
+  --salt-color-white-rgb: 255, 255, 255;
+
+  --salt-color-black: rgb(var(--salt-color-black-rgb));
+  --salt-color-white: rgb(var(--salt-color-white-rgb));
+}

package/css/foundations/cursor.css

@@ -0,0 +1,13 @@
+.salt-theme.vuu-theme,
+.salt-theme.vuu-theme {
+  --salt-cursor-active: pointer;
+  --salt-cursor-disabled: not-allowed;
+  --salt-cursor-drag-ew: ew-resize;
+  --salt-cursor-drag-ns: ns-resize;
+  --salt-cursor-grab: grab;
+  --salt-cursor-grab-active: grabbing;
+  --salt-cursor-hover: pointer;
+  --salt-cursor-pending: progress;
+  --salt-cursor-readonly: text;
+  --salt-cursor-text: text;
+}

package/css/foundations/curve.css

@@ -0,0 +1,41 @@
+.salt-density-high {
+  --vuu2-curve-40: 4px;
+  --vuu2-curve-60: 6px;
+  --salt-curve-0: 0;
+  --salt-curve-50: 2px;
+  --salt-curve-100: 6px;
+  --salt-curve-150: 3px;
+  --salt-curve-200: 4px;
+  --salt-curve-250: 5px;
+  --salt-curve-999: 999px;
+}
+
+.salt-density-medium {
+  --salt-curve-0: 0;
+  --salt-curve-50: 2px;
+  --salt-curve-100: 4px;
+  --salt-curve-150: 6px;
+  --salt-curve-200: 8px;
+  --salt-curve-250: 10px;
+  --salt-curve-999: 999px;
+}
+
+.salt-density-low {
+  --salt-curve-0: 0;
+  --salt-curve-50: 3px;
+  --salt-curve-100: 6px;
+  --salt-curve-150: 9px;
+  --salt-curve-200: 12px;
+  --salt-curve-250: 15px;
+  --salt-curve-999: 999px;
+}
+
+.salt-density-touch {
+  --salt-curve-0: 0;
+  --salt-curve-50: 4px;
+  --salt-curve-100: 8px;
+  --salt-curve-150: 12px;
+  --salt-curve-200: 16px;
+  --salt-curve-250: 20px;
+  --salt-curve-999: 999px;
+}