@salt-ds/theme 1.38.0 → 1.39.0

package/css/theme-next.css

@@ -24,7 +24,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;
@@ -228,6 +229,7 @@
   --salt-curve-250: 15px;
   --salt-curve-999: 999px;
 }
+.salt-density-mobile,
 .salt-density-touch {
   --salt-curve-0: 0;
   --salt-curve-50: 4px;
@@ -274,6 +276,7 @@
   --salt-size-selectable: 16px;
   --salt-size-bar-strong: 12px;
 }
+.salt-density-mobile,
 .salt-density-touch {
   --salt-size-adornment: 12px;
   --salt-size-bar: 8px;
@@ -286,7 +289,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;
@@ -335,6 +339,35 @@
   --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;
@@ -366,7 +399,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;
@@ -1583,6 +1617,19 @@
   --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
 }
 
+/* css/next/characteristics/layout.css */
+.salt-density-low,
+.salt-density-medium,
+.salt-density-high,
+.salt-density-touch {
+  --salt-layout-page-margin: var(--salt-spacing-300);
+  --salt-layout-gap: var(--salt-spacing-300);
+}
+.salt-density-mobile {
+  --salt-layout-page-margin: var(--salt-spacing-100);
+  --salt-layout-gap: var(--salt-spacing-100);
+}
+
 /* css/next/characteristics/navigable.css */
 .salt-theme.salt-theme-next {
   --salt-navigable-indicator-hover: var(--salt-palette-neutral);
@@ -1609,14 +1656,14 @@
 /* css/next/characteristics/selectable.css */
 .salt-theme.salt-theme-next {
   --salt-selectable-borderColor: var(--salt-palette-neutral);
-  --salt-selectable-borderColor-hover: var(--salt-palette-accent-weak);
+  --salt-selectable-borderColor-hover: var(--salt-palette-accent);
   --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);
   --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-hover: var(--salt-palette-accent);
   --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);
@@ -1843,6 +1890,31 @@
   --salt-text-notation-fontSize: 8px;
   --salt-text-notation-lineHeight: 10px;
 }
+.salt-density-mobile {
+  --salt-text-h1-fontSize: 24px;
+  --salt-text-h1-lineHeight: 31px;
+  --salt-text-h2-fontSize: 22px;
+  --salt-text-h2-lineHeight: 29px;
+  --salt-text-h3-fontSize: 20px;
+  --salt-text-h3-lineHeight: 26px;
+  --salt-text-h4-fontSize: 16px;
+  --salt-text-h4-lineHeight: 21px;
+  --salt-text-label-fontSize: 14px;
+  --salt-text-label-lineHeight: 18px;
+  --salt-text-fontSize: 16px;
+  --salt-text-lineHeight: 21px;
+  --salt-text-minHeight: 21px;
+  --salt-text-display1-fontSize: 40px;
+  --salt-text-display1-lineHeight: 52px;
+  --salt-text-display2-fontSize: 36px;
+  --salt-text-display2-lineHeight: 47px;
+  --salt-text-display3-fontSize: 32px;
+  --salt-text-display3-lineHeight: 42px;
+  --salt-text-display4-fontSize: 28px;
+  --salt-text-display4-lineHeight: 36px;
+  --salt-text-notation-fontSize: 12px;
+  --salt-text-notation-lineHeight: 16px;
+}
 
 /* css/deprecated/foundations.css */
 .salt-theme {

package/css/theme.css

@@ -24,7 +24,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;
@@ -228,6 +229,7 @@
   --salt-curve-250: 15px;
   --salt-curve-999: 999px;
 }
+.salt-density-mobile,
 .salt-density-touch {
   --salt-curve-0: 0;
   --salt-curve-50: 4px;
@@ -274,6 +276,7 @@
   --salt-size-selectable: 16px;
   --salt-size-bar-strong: 12px;
 }
+.salt-density-mobile,
 .salt-density-touch {
   --salt-size-adornment: 12px;
   --salt-size-bar: 8px;
@@ -286,7 +289,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;
@@ -335,6 +339,35 @@
   --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;
@@ -366,7 +399,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;
@@ -1903,6 +1937,19 @@
   --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
 }
 
+/* css/legacy/characteristics/layout.css */
+.salt-density-low,
+.salt-density-medium,
+.salt-density-high,
+.salt-density-touch {
+  --salt-layout-page-margin: var(--salt-spacing-300);
+  --salt-layout-gap: var(--salt-spacing-300);
+}
+.salt-density-mobile {
+  --salt-layout-page-margin: var(--salt-spacing-100);
+  --salt-layout-gap: var(--salt-spacing-100);
+}
+
 /* css/legacy/characteristics/navigable.css */
 .salt-theme {
   --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
@@ -2163,6 +2210,31 @@
   --salt-text-notation-fontSize: 8px;
   --salt-text-notation-lineHeight: 10px;
 }
+.salt-density-mobile {
+  --salt-text-h1-fontSize: 24px;
+  --salt-text-h1-lineHeight: 31px;
+  --salt-text-h2-fontSize: 22px;
+  --salt-text-h2-lineHeight: 29px;
+  --salt-text-h3-fontSize: 20px;
+  --salt-text-h3-lineHeight: 26px;
+  --salt-text-h4-fontSize: 16px;
+  --salt-text-h4-lineHeight: 21px;
+  --salt-text-label-fontSize: 14px;
+  --salt-text-label-lineHeight: 18px;
+  --salt-text-fontSize: 16px;
+  --salt-text-lineHeight: 21px;
+  --salt-text-minHeight: 21px;
+  --salt-text-display1-fontSize: 40px;
+  --salt-text-display1-lineHeight: 52px;
+  --salt-text-display2-fontSize: 36px;
+  --salt-text-display2-lineHeight: 47px;
+  --salt-text-display3-fontSize: 32px;
+  --salt-text-display3-lineHeight: 42px;
+  --salt-text-display4-fontSize: 28px;
+  --salt-text-display4-lineHeight: 36px;
+  --salt-text-notation-fontSize: 12px;
+  --salt-text-notation-lineHeight: 16px;
+}
 
 /* css/deprecated/foundations.css */
 .salt-theme {

package/index.css

@@ -64,7 +64,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;
@@ -268,6 +269,7 @@
   --salt-curve-250: 15px;
   --salt-curve-999: 999px;
 }
+.salt-density-mobile,
 .salt-density-touch {
   --salt-curve-0: 0;
   --salt-curve-50: 4px;
@@ -314,6 +316,7 @@
   --salt-size-selectable: 16px;
   --salt-size-bar-strong: 12px;
 }
+.salt-density-mobile,
 .salt-density-touch {
   --salt-size-adornment: 12px;
   --salt-size-bar: 8px;
@@ -326,7 +329,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;
@@ -375,6 +379,35 @@
   --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;
@@ -406,7 +439,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;
@@ -1943,6 +1977,19 @@
   --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
 }
 
+/* css/legacy/characteristics/layout.css */
+.salt-density-low,
+.salt-density-medium,
+.salt-density-high,
+.salt-density-touch {
+  --salt-layout-page-margin: var(--salt-spacing-300);
+  --salt-layout-gap: var(--salt-spacing-300);
+}
+.salt-density-mobile {
+  --salt-layout-page-margin: var(--salt-spacing-100);
+  --salt-layout-gap: var(--salt-spacing-100);
+}
+
 /* css/legacy/characteristics/navigable.css */
 .salt-theme {
   --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
@@ -2203,6 +2250,31 @@
   --salt-text-notation-fontSize: 8px;
   --salt-text-notation-lineHeight: 10px;
 }
+.salt-density-mobile {
+  --salt-text-h1-fontSize: 24px;
+  --salt-text-h1-lineHeight: 31px;
+  --salt-text-h2-fontSize: 22px;
+  --salt-text-h2-lineHeight: 29px;
+  --salt-text-h3-fontSize: 20px;
+  --salt-text-h3-lineHeight: 26px;
+  --salt-text-h4-fontSize: 16px;
+  --salt-text-h4-lineHeight: 21px;
+  --salt-text-label-fontSize: 14px;
+  --salt-text-label-lineHeight: 18px;
+  --salt-text-fontSize: 16px;
+  --salt-text-lineHeight: 21px;
+  --salt-text-minHeight: 21px;
+  --salt-text-display1-fontSize: 40px;
+  --salt-text-display1-lineHeight: 52px;
+  --salt-text-display2-fontSize: 36px;
+  --salt-text-display2-lineHeight: 47px;
+  --salt-text-display3-fontSize: 32px;
+  --salt-text-display3-lineHeight: 42px;
+  --salt-text-display4-fontSize: 28px;
+  --salt-text-display4-lineHeight: 36px;
+  --salt-text-notation-fontSize: 12px;
+  --salt-text-notation-lineHeight: 16px;
+}
 
 /* css/deprecated/foundations.css */
 .salt-theme {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/theme",
-  "version": "1.38.0",
+  "version": "1.39.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",