Add mobile density tokens

Author: joshwooding

.storybook/preview.tsx

@@ -83,7 +83,7 @@ const preview: Preview = {
         // Storybook built in icons here - https://www.chromatic.com/component?appId=5a375b97f4b14f0020b0cda3&name=Basics%2FIcon&buildNumber=20654
         icon: "graphbar",
         // array of plain string values or MenuItem shape (see below)
-        items: ["touch", "low", "medium", "high"],
+        items: ["mobile", "touch", "low", "medium", "high"],
       },
     },
     responsive: {

cypress/support/commands.tsx

@@ -15,7 +15,7 @@ import { type PerformanceResult, PerformanceTester } from "./PerformanceTester";
 
 const SupportedThemeModeValues = ["light", "dark"] as const;
 type SupportedThemeMode = (typeof SupportedThemeModeValues)[number];
-const SupportedDensityValues = ["touch", "low", "medium", "high"];
+const SupportedDensityValues = ["mobile", "touch", "low", "medium", "high"];
 type SupportedDensity = (typeof SupportedDensityValues)[number];
 
 // Must be declared global to be detected by typescript (allows import/export)
@@ -132,7 +132,7 @@ Cypress.Commands.add(
       cy.state("announcement", announcement);
     };
 
-    const density: "touch" | "low" | "medium" | "high" | undefined =
+    const density: "mobile" | "touch" | "low" | "medium" | "high" | undefined =
       Cypress.env("density");
     const mode: "light" | "dark" | undefined = Cypress.env("mode");
     const dateAdapter: SaltDateAdapter<DateFrameworkType> | undefined =

packages/ag-grid-theme/src/dependencies/useAgGridHelpers.ts

@@ -51,6 +51,8 @@ export function useAgGridHelpers({
         return [49, 48]; // 36 + 12 + [1 (border)]
       case "touch":
         return [61, 60]; // 44 + 16 + [1 (border)]
+      case "mobile":
+        return [61, 60]; // 44 + 16 + [1 (border)]
       default:
         return [25, 24];
     }

packages/core/src/salt-provider/SaltProvider.tsx

@@ -179,7 +179,7 @@ interface SaltProviderBaseProps {
    */
   applyClassesTo?: TargetElement;
   /**
-   * Either "high", "medium", "low" or "touch".
+   * Either "high", "medium", "low", "touch" or "mobile".
    * Determines the amount of content that can fit on a screen based on the size and spacing of components.
    * Refer to [density](https://www.saltdesignsystem.com/salt/foundations/density) doc for more detail.
    *

packages/core/src/spinner/svgSpinners/SpinnerSVG.tsx

@@ -18,18 +18,21 @@ const sizeAndStrokeWidthMapping = {
     medium: { width: 12, strokeWidth: 2 },
     low: { width: 14, strokeWidth: 2 },
     touch: { width: 16, strokeWidth: 2 },
+    mobile: { width: 16, strokeWidth: 2 },
   },
   medium: {
     high: { width: 20, strokeWidth: 2 },
     medium: { width: 28, strokeWidth: 4 },
     low: { width: 36, strokeWidth: 6 },
     touch: { width: 44, strokeWidth: 8 },
+    mobile: { width: 44, strokeWidth: 8 },
   },
   large: {
     high: { width: 40, strokeWidth: 2 },
     medium: { width: 56, strokeWidth: 4 },
     low: { width: 72, strokeWidth: 6 },
     touch: { width: 88, strokeWidth: 8 },
+    mobile: { width: 88, strokeWidth: 8 },
   },
 };
 
@@ -64,8 +67,8 @@ export const SpinnerSVG = ({
         </linearGradient>
       </defs>
       <g fill="none">
-        {/* 
-          This first path draws the top half of the circle without a gradient. 
+        {/*
+          This first path draws the top half of the circle without a gradient.
           It starts from the right end, moves in a circular arc, and ends at the left end.
         */}
         <path
@@ -76,8 +79,8 @@ export const SpinnerSVG = ({
           strokeWidth="var(--spinner-strokeWidth)"
           fill="none"
         />
-        {/* 
-          This second path draws the left half of the circle with a gradient that transitions 
+        {/*
+          This second path draws the left half of the circle with a gradient that transitions
           from opaque on the left to transparent on the right.
           It starts from the top-center, moves in a circular arc, and ends at the bottom-center.
         */}

packages/core/src/theme/Density.ts

@@ -1,3 +1,9 @@
-export const DensityValues = ["high", "medium", "low", "touch"] as const;
+export const DensityValues = [
+  "high",
+  "medium",
+  "low",
+  "touch",
+  "mobile",
+] as const;
 
 export type Density = (typeof DensityValues)[number];

packages/embla-carousel/src/CarouselAutoplayIndicator.tsx

@@ -39,6 +39,7 @@ const sizeAndStrokeWidthMapping = {
   medium: { size: 12, strokeWidth: 2 },
   low: { size: 14, strokeWidth: 2 },
   touch: { size: 16, strokeWidth: 2 },
+  mobile: { size: 16, strokeWidth: 2 },
 };
 
 export const CarouselAutoplayIndicator = forwardRef<

packages/lab/src/tokenized-input/useTokenizedInput.tsx

@@ -50,6 +50,7 @@ const BLUR_TIMEOUT = 200;
  */
 const SINGLE_LINE_HEIGHT_MAP = {
   touch: 45,
+  mobile: 45,
   low: 36,
   medium: 28,
   high: 23,

packages/lab/stories/list/list.stories.tsx

@@ -458,6 +458,7 @@ export const VariableHeight: StoryFn<ListProps> = () => {
       medium: 32,
       low: 36,
       touch: 36,
+      mobile: 36,
     }),
     [],
   );

packages/theme/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;