@vuu-ui/vuu-theme 4.0.0-alpha.2 → 4.0.0-alpha.21

package/css/components/checkbox.css

@@ -6,6 +6,11 @@
     }    
   }
 
+  /* Tree checkboxes aren't inside .saltCheckbox; without this, unchecked ones are invisible. */
+  .saltTreeNode-checkbox.saltCheckboxIcon:not(.saltCheckboxIcon-checked,.saltCheckboxIcon-disabled) {
+    border-color: var(--vuu-color-gray-30);
+  }
+
   .saltCheckbox:hover {
     .saltCheckboxIcon:not(.saltCheckboxIcon-checked,.saltCheckboxIcon-disabled) {
         background: var(--vuu-color-coral-lightest);

package/css/deprecated/characteristics.css

@@ -74,6 +74,42 @@
   --salt-text-textDecoration: var(--salt-typography-textDecoration-none);
   --salt-text-textTransform: none;
 
+  /* Text */
+  --salt-text-h1-fontFamily: var(--salt-text-heading-fontFamily);
+  --salt-text-h1-fontWeight: var(--salt-text-heading-fontWeight);
+  --salt-text-h1-fontWeight-small: var(--salt-text-heading-fontWeight-small);
+  --salt-text-h1-fontWeight-strong: var(--salt-text-heading-fontWeight-strong);
+  --salt-text-h2-fontFamily: var(--salt-text-heading-fontFamily);
+  --salt-text-h2-fontWeight: var(--salt-text-heading-fontWeight);
+  --salt-text-h2-fontWeight-small: var(--salt-text-heading-fontWeight-small);
+  --salt-text-h2-fontWeight-strong: var(--salt-text-heading-fontWeight-strong);
+  --salt-text-h3-fontFamily: var(--salt-text-heading-fontFamily);
+  --salt-text-h3-fontWeight: var(--salt-text-heading-fontWeight);
+  --salt-text-h3-fontWeight-small: var(--salt-text-heading-fontWeight-small);
+  --salt-text-h3-fontWeight-strong: var(--salt-text-heading-fontWeight-strong);
+  --salt-text-h4-fontFamily: var(--salt-text-heading-fontFamily);
+  --salt-text-h4-fontWeight: var(--salt-text-heading-fontWeight);
+  --salt-text-h4-fontWeight-small: var(--salt-text-heading-fontWeight-small);
+  --salt-text-h4-fontWeight-strong: var(--salt-text-heading-fontWeight-strong);
+  --salt-text-display1-fontFamily: var(--salt-text-display-fontFamily);
+  --salt-text-display1-fontWeight: var(--salt-text-display-fontWeight);
+  --salt-text-display1-fontWeight-small: var(--salt-text-display-fontWeight-small);
+  --salt-text-display1-fontWeight-strong: var(--salt-text-display-fontWeight-strong);
+  --salt-text-display2-fontFamily: var(--salt-text-display-fontFamily);
+  --salt-text-display2-fontWeight: var(--salt-text-display-fontWeight);
+  --salt-text-display2-fontWeight-small: var(--salt-text-display-fontWeight-small);
+  --salt-text-display2-fontWeight-strong: var(--salt-text-display-fontWeight-strong);
+  --salt-text-display3-fontFamily: var(--salt-text-display-fontFamily);
+  --salt-text-display3-fontWeight: var(--salt-text-display-fontWeight);
+  --salt-text-display3-fontWeight-small: var(--salt-text-display-fontWeight-small);
+  --salt-text-display3-fontWeight-strong: var(--salt-text-display-fontWeight-strong);
+  --salt-text-display4-fontFamily: var(--salt-text-display-fontFamily);
+  --salt-text-display4-fontWeight: var(--salt-text-display-fontWeight);
+  --salt-text-display4-fontWeight-small: var(--salt-text-display-fontWeight-small);
+  --salt-text-display4-fontWeight-strong: var(--salt-text-display-fontWeight-strong);
+  --salt-text-label-fontFamily: var(--salt-text-fontFamily);
+  --salt-text-notation-fontFamily: var(--salt-text-fontFamily);
+
   /* Navigable */
   --salt-navigable-cursor-active: pointer;
   --salt-navigable-cursor-hover: pointer;
@@ -90,6 +126,9 @@
 
   /* Accent */
   --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold); /* Use --salt-text-notation-fontWeight */
+  --salt-accent-background: var(--salt-palette-accent);
+  --salt-accent-background-disabled: var(--salt-palette-accent-disabled);
+  --salt-accent-borderColor: var(--salt-palette-accent);
 
   /* Track */
   --salt-track-borderStyle: solid;

package/css/deprecated/foundations.css

@@ -40,6 +40,7 @@
   /* Typography */
   --salt-typography-fontFamily: var(--salt-typography-fontFamily-nunito);
   --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
+  --salt-typography-textDecoration-italic: var(--salt-typography-fontStyle-italic);
 
   /* Alpha */
   --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);

package/css/foundations/alpha.css

@@ -1,4 +1,3 @@
-.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);

package/css/foundations/animation.css

@@ -1,7 +1,8 @@
 .salt-density-touch,
 .salt-density-low,
 .salt-density-medium,
-.salt-density-high {
+.salt-density-high,
+.salt-density-mobile {
   --salt-animation-opacity-start: 0;
   --salt-animation-opacity-end: 1;
   --salt-animation-scale-start: 0;

package/css/foundations/borderStyle.css

@@ -1,4 +1,3 @@
-.salt-theme.vuu-theme,
 .salt-theme.vuu-theme {
   --salt-borderStyle-solid: solid;
   --salt-borderStyle-dashed: dashed;

package/css/foundations/color.css

@@ -4,12 +4,5 @@
 
   --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));
+  --salt-color-transparent: transparent;
 }

package/css/foundations/cursor.css

@@ -1,4 +1,3 @@
-.salt-theme.vuu-theme,
 .salt-theme.vuu-theme {
   --salt-cursor-active: pointer;
   --salt-cursor-disabled: not-allowed;

package/css/foundations/curve.css

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

package/css/foundations/duration.css

@@ -1,4 +1,3 @@
-.salt-theme.vuu-theme,
 .salt-theme.vuu-theme {
   --salt-duration-instant: 0ms;
   --salt-duration-perceptible: 300ms;

package/css/foundations/size.css

@@ -28,6 +28,7 @@
   --salt-size-bar-strong: 12px;
 }
 
+.salt-density-mobile,
 .salt-density-touch {
   --salt-size-adornment: 12px;
   --salt-size-bar: 8px;
@@ -41,7 +42,8 @@
 .salt-density-touch,
 .salt-density-low,
 .salt-density-medium,
-.salt-density-high {
+.salt-density-high,
+.salt-density-mobile {
   --salt-size-fixed-100: 1px;
   --salt-size-fixed-200: 2px;
   --salt-size-fixed-300: 3px;

package/css/foundations/spacing.css

@@ -39,7 +39,37 @@
   --salt-spacing-850: calc(8.5 * var(--salt-spacing-100));
   --salt-spacing-900: calc(9 * var(--salt-spacing-100));
   --salt-spacing-950: calc(9.5 * var(--salt-spacing-100));
+}
+
+.salt-density-mobile {
+  --salt-spacing-25: 4px;
+  --salt-spacing-50: 8px;
+  --salt-spacing-75: 12px;
+  --salt-spacing-100: 16px;
+  --salt-spacing-150: 18px;
+  --salt-spacing-200: 20px;
+  --salt-spacing-250: 22px;
+  --salt-spacing-300: 24px;
+  --salt-spacing-350: 26px;
+  --salt-spacing-400: 28px;
+  --salt-spacing-450: 30px;
+  --salt-spacing-500: 32px;
+  --salt-spacing-550: 34px;
+  --salt-spacing-600: 36px;
+  --salt-spacing-650: 38px;
+  --salt-spacing-700: 40px;
+  --salt-spacing-750: 42px;
+  --salt-spacing-800: 44px;
+  --salt-spacing-850: 46px;
+  --salt-spacing-900: 48px;
+  --salt-spacing-950: 50px;
+}
 
+.salt-density-touch,
+.salt-density-low,
+.salt-density-medium,
+.salt-density-high,
+.salt-density-mobile {
   --salt-spacing-fixed-100: 1px;
   --salt-spacing-fixed-200: 2px;
   --salt-spacing-fixed-300: 3px;
@@ -49,4 +79,7 @@
   --salt-spacing-fixed-700: 7px;
   --salt-spacing-fixed-800: 8px;
   --salt-spacing-fixed-900: 9px;
+  --salt-spacing-fixed-1000: 10px;
+  --salt-spacing-fixed-1100: 11px;
+  --salt-spacing-fixed-1200: 12px;
 }

package/css/foundations/typography.css

@@ -1,5 +1,7 @@
-.salt-theme.vuu-theme,
 .salt-theme.vuu-theme {
+  --salt-typography-fontFamily-openSans: "Open Sans";
+  --salt-typography-fontFamily-amplitude: "Amplitude";
+  --salt-typography-fontFamily-ptMono: "PT Mono";
   --salt-typography-fontFamily-nunito: "Nunito Sans";
 
   --salt-typography-fontWeight-light: 300;
@@ -11,5 +13,7 @@
 
   --salt-typography-textDecoration-none: none;
   --salt-typography-textDecoration-underline: underline;
-  --salt-typography-textDecoration-italic: italic;
+
+  --salt-typography-fontStyle-normal: normal;
+  --salt-typography-fontStyle-italic: italic;
 }

package/css/foundations/zindex.css

@@ -1,7 +1,8 @@
 .salt-density-touch,
 .salt-density-low,
 .salt-density-medium,
-.salt-density-high {
+.salt-density-high,
+.salt-density-mobile {
   --salt-zIndex-default: 1;
   --salt-zIndex-popout: 1000;
   --salt-zIndex-appHeader: 1100;

package/css/global.css

@@ -2,7 +2,6 @@
  * Have some global styles to simulate more realistic app. Currently only for Storybook.
  */
 
-.salt-theme.vuu-theme,
 .salt-theme.vuu-theme {
   color: var(--salt-content-primary-foreground);
   font-family: var(--salt-text-fontFamily);
@@ -11,18 +10,16 @@
   line-height: var(--salt-text-lineHeight);
 }
 
-.salt-theme.vuu-theme[data-mode="light"],
 .salt-theme.vuu-theme[data-mode="light"] {
   color-scheme: light;
 }
 
-.salt-theme.vuu-theme[data-mode="dark"],
 .salt-theme.vuu-theme[data-mode="dark"] {
   color-scheme: dark;
 }
 
 /* This uses the :where selector so it doesn't add any specificity */
-:where(.salt-theme) :focus-visible {
+:where(.salt-theme.vuu-theme) :focus-visible {
   outline: var(--salt-focused-outline);
 }
 

package/css/next/characteristics/actionable.css

@@ -13,7 +13,7 @@
   /* accented bordered */
   --salt-actionable-accented-background-active: var(--salt-palette-accent-weaker);
   --salt-actionable-accented-background-hover: var(--salt-palette-accent-weakest);
-  --salt-actionable-accented-background: var(--salt-palette-alpha-none);
+  --salt-actionable-accented-background: var(--salt-color-transparent);
   --salt-actionable-accented-borderColor-active: var(--salt-palette-accent);
   --salt-actionable-accented-borderColor-hover: var(--salt-palette-accent);
   --salt-actionable-accented-borderColor: var(--salt-palette-accent);
@@ -28,10 +28,10 @@
   /* accented transparent  */
   --salt-actionable-accented-subtle-background-active: var(--salt-palette-alpha-contrast-low);
   --salt-actionable-accented-subtle-background-hover: var(--salt-palette-alpha-contrast-lower);
-  --salt-actionable-accented-subtle-background: var(--salt-palette-alpha-none);
-  --salt-actionable-accented-subtle-borderColor-active: var(--salt-palette-alpha-none);
-  --salt-actionable-accented-subtle-borderColor-hover: var(--salt-palette-alpha-none);
-  --salt-actionable-accented-subtle-borderColor: var(--salt-palette-alpha-none);
+  --salt-actionable-accented-subtle-background: var(--salt-color-transparent);
+  --salt-actionable-accented-subtle-borderColor-active: var(--salt-color-transparent);
+  --salt-actionable-accented-subtle-borderColor-hover: var(--salt-color-transparent);
+  --salt-actionable-accented-subtle-borderColor: var(--salt-color-transparent);
   --salt-actionable-accented-subtle-foreground-active: var(--salt-palette-foreground-primary);
   --salt-actionable-accented-subtle-foreground-hover: var(--salt-palette-accent-stronger);
   --salt-actionable-accented-subtle-foreground: var(--salt-palette-foreground-primary);
@@ -41,7 +41,7 @@
   --salt-actionable-bold-background-hover: var(--vuu-color-coral);
   --salt-actionable-bold-background: var(--salt-palette-neutral);
   --salt-actionable-bold-borderColor-active: var(--vuu-color-gray-50);
-  --salt-actionable-bold-borderColor-hover: var(var(--vuu-color-coral));
+  --salt-actionable-bold-borderColor-hover: var(--vuu-color-coral);
   --salt-actionable-bold-borderColor: var(--salt-palette-neutral);
   --salt-actionable-bold-foreground-active: var(--salt-color-white);
   --salt-actionable-bold-foreground-hover: var(--salt-palette-foreground-primary);
@@ -50,7 +50,7 @@
   /* neutral bordered */
   --salt-actionable-background-active: var(--salt-palette-neutral-weaker);
   --salt-actionable-background-hover: var(--salt-palette-neutral-weakest);
-  --salt-actionable-background: var(--salt-palette-alpha-none);
+  --salt-actionable-background: var(--salt-color-transparent);
   --salt-actionable-borderColor-active: var(--salt-palette-neutral);
   --salt-actionable-borderColor-hover: var(--salt-palette-neutral);
   --salt-actionable-borderColor: var(--salt-palette-neutral);
@@ -65,10 +65,10 @@
   /* neutral transparent - previous Secondary */
   --salt-actionable-subtle-background-active: var(--salt-palette-alpha-contrast-low);
   --salt-actionable-subtle-background-hover: var(--vuu-color-coral);
-  --salt-actionable-subtle-background: var(--salt-palette-alpha-none);
-  --salt-actionable-subtle-borderColor-active: var(--salt-palette-alpha-none);
+  --salt-actionable-subtle-background: var(--salt-color-transparent);
+  --salt-actionable-subtle-borderColor-active: var(--salt-color-transparent);
   --salt-actionable-subtle-borderColor-hover: var(--vuu-color-coral);
-  --salt-actionable-subtle-borderColor: var(--salt-palette-alpha-none);
+  --salt-actionable-subtle-borderColor: var(--salt-color-transparent);
   --salt-actionable-subtle-foreground-active: var(--salt-palette-foreground-primary);
   --salt-actionable-subtle-foreground-hover: var(--salt-palette-foreground-primary);
   --salt-actionable-subtle-foreground: var(--salt-palette-foreground-primary);
@@ -87,7 +87,7 @@
   /* negative bordered */
   --salt-actionable-negative-background-active: var(--salt-palette-negative-weaker);
   --salt-actionable-negative-background-hover: var(--salt-palette-negative-weakest);
-  --salt-actionable-negative-background: var(--salt-palette-alpha-none);
+  --salt-actionable-negative-background: var(--salt-color-transparent);
   --salt-actionable-negative-borderColor-active: var(--salt-palette-negative);
   --salt-actionable-negative-borderColor-hover: var(--salt-palette-negative);
   --salt-actionable-negative-borderColor: var(--salt-palette-negative);
@@ -102,10 +102,10 @@
   /* negative transparent */
   --salt-actionable-negative-subtle-background-active: var(--salt-palette-alpha-contrast-low);
   --salt-actionable-negative-subtle-background-hover: var(--salt-palette-alpha-contrast-lower);
-  --salt-actionable-negative-subtle-background: var(--salt-palette-alpha-none);
-  --salt-actionable-negative-subtle-borderColor-active: var(--salt-palette-alpha-none);
-  --salt-actionable-negative-subtle-borderColor-hover: var(--salt-palette-alpha-none);
-  --salt-actionable-negative-subtle-borderColor: var(--salt-palette-alpha-none);
+  --salt-actionable-negative-subtle-background: var(--salt-color-transparent);
+  --salt-actionable-negative-subtle-borderColor-active: var(--salt-color-transparent);
+  --salt-actionable-negative-subtle-borderColor-hover: var(--salt-color-transparent);
+  --salt-actionable-negative-subtle-borderColor: var(--salt-color-transparent);
   --salt-actionable-negative-subtle-foreground-active: var(--salt-palette-foreground-primary);
   --salt-actionable-negative-subtle-foreground-hover: var(--salt-palette-negative-stronger);
   --salt-actionable-negative-subtle-foreground: var(--salt-palette-negative-strong);
@@ -124,7 +124,7 @@
   /* positive bordered */
   --salt-actionable-positive-background-active: var(--salt-palette-positive-weaker);
   --salt-actionable-positive-background-hover: var(--salt-palette-positive-weakest);
-  --salt-actionable-positive-background: var(--salt-palette-alpha-none);
+  --salt-actionable-positive-background: var(--salt-color-transparent);
   --salt-actionable-positive-borderColor-active: var(--salt-palette-positive);
   --salt-actionable-positive-borderColor-hover: var(--salt-palette-positive);
   --salt-actionable-positive-borderColor: var(--salt-palette-positive);
@@ -139,10 +139,10 @@
   /* positive transparent */
   --salt-actionable-positive-subtle-background-active: var(--salt-palette-alpha-contrast-low);
   --salt-actionable-positive-subtle-background-hover: var(--salt-palette-alpha-contrast-lower);
-  --salt-actionable-positive-subtle-background: var(--salt-palette-alpha-none);
-  --salt-actionable-positive-subtle-borderColor-active: var(--salt-palette-alpha-none);
-  --salt-actionable-positive-subtle-borderColor-hover: var(--salt-palette-alpha-none);
-  --salt-actionable-positive-subtle-borderColor: var(--salt-palette-alpha-none);
+  --salt-actionable-positive-subtle-background: var(--salt-color-transparent);
+  --salt-actionable-positive-subtle-borderColor-active: var(--salt-color-transparent);
+  --salt-actionable-positive-subtle-borderColor-hover: var(--salt-color-transparent);
+  --salt-actionable-positive-subtle-borderColor: var(--salt-color-transparent);
   --salt-actionable-positive-subtle-foreground-active: var(--salt-palette-foreground-primary);
   --salt-actionable-positive-subtle-foreground-hover: var(--salt-palette-positive-stronger);
   --salt-actionable-positive-subtle-foreground: var(--salt-palette-positive-strong);
@@ -161,7 +161,7 @@
   /* caution bordered */
   --salt-actionable-caution-background-active: var(--salt-palette-warning-weaker);
   --salt-actionable-caution-background-hover: var(--salt-palette-warning-weakest);
-  --salt-actionable-caution-background: var(--salt-palette-alpha-none);
+  --salt-actionable-caution-background: var(--salt-color-transparent);
   --salt-actionable-caution-borderColor-active: var(--salt-palette-warning);
   --salt-actionable-caution-borderColor-hover: var(--salt-palette-warning);
   --salt-actionable-caution-borderColor: var(--salt-palette-warning);
@@ -176,11 +176,21 @@
   /* caution transparent */
   --salt-actionable-caution-subtle-background-active: var(--salt-palette-alpha-contrast-low);
   --salt-actionable-caution-subtle-background-hover: var(--salt-palette-alpha-contrast-lower);
-  --salt-actionable-caution-subtle-background: var(--salt-palette-alpha-none);
-  --salt-actionable-caution-subtle-borderColor-active: var(--salt-palette-alpha-none);
-  --salt-actionable-caution-subtle-borderColor-hover: var(--salt-palette-alpha-none);
-  --salt-actionable-caution-subtle-borderColor: var(--salt-palette-alpha-none);
+  --salt-actionable-caution-subtle-background: var(--salt-color-transparent);
+  --salt-actionable-caution-subtle-borderColor-active: var(--salt-color-transparent);
+  --salt-actionable-caution-subtle-borderColor-hover: var(--salt-color-transparent);
+  --salt-actionable-caution-subtle-borderColor: var(--salt-color-transparent);
   --salt-actionable-caution-subtle-foreground-active: var(--salt-palette-foreground-primary);
   --salt-actionable-caution-subtle-foreground-hover: var(--salt-palette-warning-stronger);
   --salt-actionable-caution-subtle-foreground: var(--salt-palette-warning-strong);
+
+  --salt-actionable-onSolid-subtle-background: var(--salt-color-transparent);
+  --salt-actionable-onSolid-subtle-background-active: var(--salt-palette-alpha-dark-low);
+  --salt-actionable-onSolid-subtle-background-hover: var(--salt-palette-alpha-dark-lower);
+  --salt-actionable-onSolid-subtle-borderColor: var(--salt-color-transparent);
+  --salt-actionable-onSolid-subtle-borderColor-active: var(--salt-color-transparent);
+  --salt-actionable-onSolid-subtle-borderColor-hover: var(--salt-color-transparent);
+  --salt-actionable-onSolid-subtle-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-actionable-onSolid-subtle-foreground-active: var(--salt-palette-foreground-primary-alt);
+  --salt-actionable-onSolid-subtle-foreground-hover: var(--salt-palette-foreground-primary-alt);
 }