@salt-ds/theme 1.38.1 → 1.40.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/css/theme-next.css +210 -92
  2. package/css/theme.css +144 -75
  3. package/index.css +144 -75
  4. package/package.json +1 -1
package/css/theme-next.css CHANGED
@@ -24,7 +24,8 @@
24
24
  .salt-density-touch,
25
25
  .salt-density-low,
26
26
  .salt-density-medium,
27
- .salt-density-high {
27
+ .salt-density-high,
28
+ .salt-density-mobile {
28
29
  --salt-animation-opacity-start: 0;
29
30
  --salt-animation-opacity-end: 1;
30
31
  --salt-animation-scale-start: 0;
@@ -228,6 +229,7 @@
228
229
  --salt-curve-250: 15px;
229
230
  --salt-curve-999: 999px;
230
231
  }
232
+ .salt-density-mobile,
231
233
  .salt-density-touch {
232
234
  --salt-curve-0: 0;
233
235
  --salt-curve-50: 4px;
@@ -274,6 +276,7 @@
274
276
  --salt-size-selectable: 16px;
275
277
  --salt-size-bar-strong: 12px;
276
278
  }
279
+ .salt-density-mobile,
277
280
  .salt-density-touch {
278
281
  --salt-size-adornment: 12px;
279
282
  --salt-size-bar: 8px;
@@ -286,7 +289,8 @@
286
289
  .salt-density-touch,
287
290
  .salt-density-low,
288
291
  .salt-density-medium,
289
- .salt-density-high {
292
+ .salt-density-high,
293
+ .salt-density-mobile {
290
294
  --salt-size-fixed-100: 1px;
291
295
  --salt-size-fixed-200: 2px;
292
296
  --salt-size-fixed-300: 3px;
@@ -335,6 +339,35 @@
335
339
  --salt-spacing-850: calc(8.5 * var(--salt-spacing-100));
336
340
  --salt-spacing-900: calc(9 * var(--salt-spacing-100));
337
341
  --salt-spacing-950: calc(9.5 * var(--salt-spacing-100));
342
+ }
343
+ .salt-density-mobile {
344
+ --salt-spacing-25: 4px;
345
+ --salt-spacing-50: 8px;
346
+ --salt-spacing-75: 12px;
347
+ --salt-spacing-100: 16px;
348
+ --salt-spacing-150: 18px;
349
+ --salt-spacing-200: 20px;
350
+ --salt-spacing-250: 22px;
351
+ --salt-spacing-300: 24px;
352
+ --salt-spacing-350: 26px;
353
+ --salt-spacing-400: 28px;
354
+ --salt-spacing-450: 30px;
355
+ --salt-spacing-500: 32px;
356
+ --salt-spacing-550: 34px;
357
+ --salt-spacing-600: 36px;
358
+ --salt-spacing-650: 38px;
359
+ --salt-spacing-700: 40px;
360
+ --salt-spacing-750: 42px;
361
+ --salt-spacing-800: 44px;
362
+ --salt-spacing-850: 46px;
363
+ --salt-spacing-900: 48px;
364
+ --salt-spacing-950: 50px;
365
+ }
366
+ .salt-density-touch,
367
+ .salt-density-low,
368
+ .salt-density-medium,
369
+ .salt-density-high,
370
+ .salt-density-mobile {
338
371
  --salt-spacing-fixed-100: 1px;
339
372
  --salt-spacing-fixed-200: 2px;
340
373
  --salt-spacing-fixed-300: 3px;
@@ -366,7 +399,8 @@
366
399
  .salt-density-touch,
367
400
  .salt-density-low,
368
401
  .salt-density-medium,
369
- .salt-density-high {
402
+ .salt-density-high,
403
+ .salt-density-mobile {
370
404
  --salt-zIndex-default: 1;
371
405
  --salt-zIndex-popout: 1000;
372
406
  --salt-zIndex-appHeader: 1100;
@@ -1201,46 +1235,6 @@
1201
1235
  --salt-shadow-medium: 0 12px 40px 0 rgba(0, 0, 0, 0.65);
1202
1236
  }
1203
1237
 
1204
- /* css/next/palette/text.css */
1205
- .salt-theme-next.salt-theme[data-heading-font="Open Sans"] {
1206
- --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
1207
- --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
1208
- --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
1209
- --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1210
- --salt-palette-text-heading-fontWeight: var(--salt-typography-fontWeight-semiBold);
1211
- --salt-palette-text-heading-fontWeight-small: var(--salt-typography-fontWeight-regular);
1212
- --salt-palette-text-heading-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1213
- --salt-palette-text-body-fontWeight: var(--salt-typography-fontWeight-regular);
1214
- --salt-palette-text-body-fontWeight-small: var(--salt-typography-fontWeight-light);
1215
- --salt-palette-text-body-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1216
- --salt-palette-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
1217
- --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
1218
- --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1219
- }
1220
- .salt-theme-next.salt-theme[data-heading-font=Amplitude] {
1221
- --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-amplitude);
1222
- --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-medium);
1223
- --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1224
- --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
1225
- --salt-palette-text-heading-fontWeight: var(--salt-typography-fontWeight-medium);
1226
- --salt-palette-text-heading-fontWeight-small: var(--salt-typography-fontWeight-regular);
1227
- --salt-palette-text-heading-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1228
- --salt-palette-text-body-fontWeight: var(--salt-typography-fontWeight-regular);
1229
- --salt-palette-text-body-fontWeight-small: var(--salt-typography-fontWeight-light);
1230
- --salt-palette-text-body-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1231
- --salt-palette-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
1232
- --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
1233
- --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1234
- }
1235
- .salt-theme-next.salt-theme[data-action-font="Open Sans"] {
1236
- --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-openSans);
1237
- --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
1238
- }
1239
- .salt-theme-next.salt-theme[data-action-font=Amplitude] {
1240
- --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-amplitude);
1241
- --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-medium);
1242
- }
1243
-
1244
1238
  /* css/next/palette/warning.css */
1245
1239
  .salt-theme.salt-theme-next[data-mode=light] {
1246
1240
  --salt-palette-warning-stronger: var(--salt-color-orange-700);
@@ -1583,6 +1577,19 @@
1583
1577
  --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
1584
1578
  }
1585
1579
 
1580
+ /* css/next/characteristics/layout.css */
1581
+ .salt-density-low,
1582
+ .salt-density-medium,
1583
+ .salt-density-high,
1584
+ .salt-density-touch {
1585
+ --salt-layout-page-margin: var(--salt-spacing-300);
1586
+ --salt-layout-gap: var(--salt-spacing-300);
1587
+ }
1588
+ .salt-density-mobile {
1589
+ --salt-layout-page-margin: var(--salt-spacing-100);
1590
+ --salt-layout-gap: var(--salt-spacing-100);
1591
+ }
1592
+
1586
1593
  /* css/next/characteristics/navigable.css */
1587
1594
  .salt-theme.salt-theme-next {
1588
1595
  --salt-navigable-indicator-hover: var(--salt-palette-neutral);
@@ -1638,6 +1645,7 @@
1638
1645
  --salt-sentiment-negative-dataviz: var(--salt-palette-negative);
1639
1646
  --salt-sentiment-positive-dataviz: var(--salt-palette-positive);
1640
1647
  --salt-sentiment-neutral-dataviz: var(--salt-palette-neutral);
1648
+ --salt-sentiment-accent-dataviz: var(--salt-palette-accent);
1641
1649
  }
1642
1650
 
1643
1651
  /* css/next/characteristics/separable.css */
@@ -1690,58 +1698,105 @@
1690
1698
  --salt-text-letterSpacing: 0;
1691
1699
  --salt-text-textAlign: left;
1692
1700
  --salt-text-textAlign-embedded: center;
1693
- --salt-text-action-fontFamily: var(--salt-palette-text-fontFamily-action);
1701
+ --salt-text-fontFamily: var(--salt-typography-fontFamily-openSans);
1702
+ --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
1703
+ --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
1704
+ --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1705
+ --salt-text-notation-fontFamily: var(--salt-typography-fontFamily-openSans);
1706
+ --salt-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
1707
+ --salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
1708
+ --salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1709
+ --salt-text-label-fontFamily: var(--salt-typography-fontFamily-openSans);
1710
+ --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
1711
+ --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
1712
+ --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1713
+ --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
1714
+ }
1715
+ .salt-theme-next.salt-theme[data-action-font="Open Sans"] {
1694
1716
  --salt-text-action-letterSpacing: 0.6px;
1695
1717
  --salt-text-action-textTransform: uppercase;
1696
1718
  --salt-text-action-textAlign: center;
1697
- --salt-text-action-fontWeight: var(--salt-palette-text-action-fontWeight);
1698
- --salt-text-action-fontWeight-small: var(--salt-palette-text-action-fontWeight-small);
1699
- --salt-text-action-fontWeight-strong: var(--salt-palette-text-action-fontWeight-strong);
1700
- --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
1701
- --salt-text-fontWeight: var(--salt-palette-text-body-fontWeight);
1702
- --salt-text-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
1703
- --salt-text-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
1704
- --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
1705
- --salt-text-notation-fontWeight: var(--salt-palette-text-notation-fontWeight);
1706
- --salt-text-notation-fontWeight-small: var(--salt-palette-text-notation-fontWeight-small);
1707
- --salt-text-notation-fontWeight-strong: var(--salt-palette-text-notation-fontWeight-strong);
1708
- --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
1709
- --salt-text-h1-fontWeight: var(--salt-palette-text-heading-fontWeight);
1710
- --salt-text-h1-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1711
- --salt-text-h1-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1712
- --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
1713
- --salt-text-h2-fontWeight: var(--salt-palette-text-heading-fontWeight);
1714
- --salt-text-h2-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1715
- --salt-text-h2-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1716
- --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
1717
- --salt-text-h3-fontWeight: var(--salt-palette-text-heading-fontWeight);
1718
- --salt-text-h3-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1719
- --salt-text-h3-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1720
- --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
1721
- --salt-text-h4-fontWeight: var(--salt-palette-text-heading-fontWeight);
1722
- --salt-text-h4-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
1723
- --salt-text-h4-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
1724
- --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
1725
- --salt-text-label-fontWeight: var(--salt-palette-text-body-fontWeight);
1726
- --salt-text-label-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
1727
- --salt-text-label-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
1728
- --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
1729
- --salt-text-display1-fontWeight: var(--salt-palette-text-display-fontWeight);
1730
- --salt-text-display1-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
1731
- --salt-text-display1-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
1732
- --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
1733
- --salt-text-display2-fontWeight: var(--salt-palette-text-display-fontWeight);
1734
- --salt-text-display2-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
1735
- --salt-text-display2-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
1736
- --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
1737
- --salt-text-display3-fontWeight: var(--salt-palette-text-display-fontWeight);
1738
- --salt-text-display3-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
1739
- --salt-text-display3-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
1740
- --salt-text-display4-fontFamily: var(--salt-palette-text-fontFamily-heading);
1741
- --salt-text-display4-fontWeight: var(--salt-palette-text-display-fontWeight);
1742
- --salt-text-display4-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
1743
- --salt-text-display4-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
1744
- --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
1719
+ --salt-text-action-fontFamily: var(--salt-typography-fontFamily-openSans);
1720
+ --salt-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
1721
+ --salt-text-action-fontWeight-small: var(--salt-typography-fontWeight-regular);
1722
+ --salt-text-action-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1723
+ }
1724
+ .salt-theme-next.salt-theme[data-action-font=Amplitude] {
1725
+ --salt-text-action-letterSpacing: 0.6px;
1726
+ --salt-text-action-textTransform: uppercase;
1727
+ --salt-text-action-textAlign: center;
1728
+ --salt-text-action-fontFamily: var(--salt-typography-fontFamily-amplitude);
1729
+ --salt-text-action-fontWeight: var(--salt-typography-fontWeight-medium);
1730
+ --salt-text-action-fontWeight-small: var(--salt-typography-fontWeight-regular);
1731
+ --salt-text-action-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1732
+ }
1733
+ .salt-theme-next.salt-theme[data-heading-font="Open Sans"] {
1734
+ --salt-text-h1-fontFamily: var(--salt-typography-fontFamily-openSans);
1735
+ --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-semiBold);
1736
+ --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-regular);
1737
+ --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1738
+ --salt-text-h2-fontFamily: var(--salt-typography-fontFamily-openSans);
1739
+ --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
1740
+ --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1741
+ --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1742
+ --salt-text-h3-fontFamily: var(--salt-typography-fontFamily-openSans);
1743
+ --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1744
+ --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
1745
+ --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1746
+ --salt-text-h4-fontFamily: var(--salt-typography-fontFamily-openSans);
1747
+ --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
1748
+ --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
1749
+ --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1750
+ --salt-text-display1-fontFamily: var(--salt-typography-fontFamily-openSans);
1751
+ --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
1752
+ --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1753
+ --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
1754
+ --salt-text-display2-fontFamily: var(--salt-typography-fontFamily-openSans);
1755
+ --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
1756
+ --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1757
+ --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1758
+ --salt-text-display3-fontFamily: var(--salt-typography-fontFamily-openSans);
1759
+ --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1760
+ --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1761
+ --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
1762
+ --salt-text-display4-fontFamily: var(--salt-typography-fontFamily-openSans);
1763
+ --salt-text-display4-fontWeight: var(--salt-typography-fontWeight-semiBold);
1764
+ --salt-text-display4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1765
+ --salt-text-display4-fontWeight-small: var(--salt-typography-fontWeight-regular);
1766
+ }
1767
+ .salt-theme-next.salt-theme[data-heading-font=Amplitude] {
1768
+ --salt-text-h1-fontFamily: var(--salt-typography-fontFamily-amplitude);
1769
+ --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-medium);
1770
+ --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-regular);
1771
+ --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1772
+ --salt-text-h2-fontFamily: var(--salt-typography-fontFamily-amplitude);
1773
+ --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-medium);
1774
+ --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1775
+ --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1776
+ --salt-text-h3-fontFamily: var(--salt-typography-fontFamily-amplitude);
1777
+ --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-medium);
1778
+ --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
1779
+ --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1780
+ --salt-text-h4-fontFamily: var(--salt-typography-fontFamily-amplitude);
1781
+ --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-medium);
1782
+ --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
1783
+ --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1784
+ --salt-text-display1-fontFamily: var(--salt-typography-fontFamily-amplitude);
1785
+ --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-medium);
1786
+ --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1787
+ --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
1788
+ --salt-text-display2-fontFamily: var(--salt-typography-fontFamily-amplitude);
1789
+ --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-medium);
1790
+ --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1791
+ --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
1792
+ --salt-text-display3-fontFamily: var(--salt-typography-fontFamily-amplitude);
1793
+ --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-medium);
1794
+ --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1795
+ --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
1796
+ --salt-text-display4-fontFamily: var(--salt-typography-fontFamily-amplitude);
1797
+ --salt-text-display4-fontWeight: var(--salt-typography-fontWeight-medium);
1798
+ --salt-text-display4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1799
+ --salt-text-display4-fontWeight-small: var(--salt-typography-fontWeight-regular);
1745
1800
  }
1746
1801
  .salt-theme-next.salt-density-touch {
1747
1802
  --salt-text-h1-fontSize: 42px;
@@ -1843,6 +1898,31 @@
1843
1898
  --salt-text-notation-fontSize: 8px;
1844
1899
  --salt-text-notation-lineHeight: 10px;
1845
1900
  }
1901
+ .salt-density-mobile {
1902
+ --salt-text-h1-fontSize: 24px;
1903
+ --salt-text-h1-lineHeight: 31px;
1904
+ --salt-text-h2-fontSize: 22px;
1905
+ --salt-text-h2-lineHeight: 29px;
1906
+ --salt-text-h3-fontSize: 20px;
1907
+ --salt-text-h3-lineHeight: 26px;
1908
+ --salt-text-h4-fontSize: 16px;
1909
+ --salt-text-h4-lineHeight: 21px;
1910
+ --salt-text-label-fontSize: 14px;
1911
+ --salt-text-label-lineHeight: 18px;
1912
+ --salt-text-fontSize: 16px;
1913
+ --salt-text-lineHeight: 21px;
1914
+ --salt-text-minHeight: 21px;
1915
+ --salt-text-display1-fontSize: 40px;
1916
+ --salt-text-display1-lineHeight: 52px;
1917
+ --salt-text-display2-fontSize: 36px;
1918
+ --salt-text-display2-lineHeight: 47px;
1919
+ --salt-text-display3-fontSize: 32px;
1920
+ --salt-text-display3-lineHeight: 42px;
1921
+ --salt-text-display4-fontSize: 28px;
1922
+ --salt-text-display4-lineHeight: 36px;
1923
+ --salt-text-notation-fontSize: 12px;
1924
+ --salt-text-notation-lineHeight: 16px;
1925
+ }
1846
1926
 
1847
1927
  /* css/deprecated/foundations.css */
1848
1928
  .salt-theme {
@@ -2290,5 +2370,43 @@
2290
2370
  --salt-palette-accent-strong-disabled: var(--salt-color-teal-400-40a);
2291
2371
  --salt-palette-accent-stronger-disabled: var(--salt-color-teal-300-40a);
2292
2372
  }
2373
+ .salt-theme-next.salt-theme[data-heading-font="Open Sans"] {
2374
+ --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
2375
+ --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
2376
+ --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
2377
+ --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2378
+ --salt-palette-text-heading-fontWeight: var(--salt-typography-fontWeight-semiBold);
2379
+ --salt-palette-text-heading-fontWeight-small: var(--salt-typography-fontWeight-regular);
2380
+ --salt-palette-text-heading-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2381
+ --salt-palette-text-body-fontWeight: var(--salt-typography-fontWeight-regular);
2382
+ --salt-palette-text-body-fontWeight-small: var(--salt-typography-fontWeight-light);
2383
+ --salt-palette-text-body-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
2384
+ --salt-palette-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
2385
+ --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
2386
+ --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2387
+ }
2388
+ .salt-theme-next.salt-theme[data-heading-font=Amplitude] {
2389
+ --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-amplitude);
2390
+ --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-medium);
2391
+ --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2392
+ --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
2393
+ --salt-palette-text-heading-fontWeight: var(--salt-typography-fontWeight-medium);
2394
+ --salt-palette-text-heading-fontWeight-small: var(--salt-typography-fontWeight-regular);
2395
+ --salt-palette-text-heading-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2396
+ --salt-palette-text-body-fontWeight: var(--salt-typography-fontWeight-regular);
2397
+ --salt-palette-text-body-fontWeight-small: var(--salt-typography-fontWeight-light);
2398
+ --salt-palette-text-body-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
2399
+ --salt-palette-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
2400
+ --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
2401
+ --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2402
+ }
2403
+ .salt-theme-next.salt-theme[data-action-font="Open Sans"] {
2404
+ --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-openSans);
2405
+ --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
2406
+ }
2407
+ .salt-theme-next.salt-theme[data-action-font=Amplitude] {
2408
+ --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-amplitude);
2409
+ --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-medium);
2410
+ }
2293
2411
 
2294
2412
  /* css/theme-next.css */
package/css/theme.css CHANGED
@@ -24,7 +24,8 @@
24
24
  .salt-density-touch,
25
25
  .salt-density-low,
26
26
  .salt-density-medium,
27
- .salt-density-high {
27
+ .salt-density-high,
28
+ .salt-density-mobile {
28
29
  --salt-animation-opacity-start: 0;
29
30
  --salt-animation-opacity-end: 1;
30
31
  --salt-animation-scale-start: 0;
@@ -228,6 +229,7 @@
228
229
  --salt-curve-250: 15px;
229
230
  --salt-curve-999: 999px;
230
231
  }
232
+ .salt-density-mobile,
231
233
  .salt-density-touch {
232
234
  --salt-curve-0: 0;
233
235
  --salt-curve-50: 4px;
@@ -274,6 +276,7 @@
274
276
  --salt-size-selectable: 16px;
275
277
  --salt-size-bar-strong: 12px;
276
278
  }
279
+ .salt-density-mobile,
277
280
  .salt-density-touch {
278
281
  --salt-size-adornment: 12px;
279
282
  --salt-size-bar: 8px;
@@ -286,7 +289,8 @@
286
289
  .salt-density-touch,
287
290
  .salt-density-low,
288
291
  .salt-density-medium,
289
- .salt-density-high {
292
+ .salt-density-high,
293
+ .salt-density-mobile {
290
294
  --salt-size-fixed-100: 1px;
291
295
  --salt-size-fixed-200: 2px;
292
296
  --salt-size-fixed-300: 3px;
@@ -335,6 +339,35 @@
335
339
  --salt-spacing-850: calc(8.5 * var(--salt-spacing-100));
336
340
  --salt-spacing-900: calc(9 * var(--salt-spacing-100));
337
341
  --salt-spacing-950: calc(9.5 * var(--salt-spacing-100));
342
+ }
343
+ .salt-density-mobile {
344
+ --salt-spacing-25: 4px;
345
+ --salt-spacing-50: 8px;
346
+ --salt-spacing-75: 12px;
347
+ --salt-spacing-100: 16px;
348
+ --salt-spacing-150: 18px;
349
+ --salt-spacing-200: 20px;
350
+ --salt-spacing-250: 22px;
351
+ --salt-spacing-300: 24px;
352
+ --salt-spacing-350: 26px;
353
+ --salt-spacing-400: 28px;
354
+ --salt-spacing-450: 30px;
355
+ --salt-spacing-500: 32px;
356
+ --salt-spacing-550: 34px;
357
+ --salt-spacing-600: 36px;
358
+ --salt-spacing-650: 38px;
359
+ --salt-spacing-700: 40px;
360
+ --salt-spacing-750: 42px;
361
+ --salt-spacing-800: 44px;
362
+ --salt-spacing-850: 46px;
363
+ --salt-spacing-900: 48px;
364
+ --salt-spacing-950: 50px;
365
+ }
366
+ .salt-density-touch,
367
+ .salt-density-low,
368
+ .salt-density-medium,
369
+ .salt-density-high,
370
+ .salt-density-mobile {
338
371
  --salt-spacing-fixed-100: 1px;
339
372
  --salt-spacing-fixed-200: 2px;
340
373
  --salt-spacing-fixed-300: 3px;
@@ -366,7 +399,8 @@
366
399
  .salt-density-touch,
367
400
  .salt-density-low,
368
401
  .salt-density-medium,
369
- .salt-density-high {
402
+ .salt-density-high,
403
+ .salt-density-mobile {
370
404
  --salt-zIndex-default: 1;
371
405
  --salt-zIndex-popout: 1000;
372
406
  --salt-zIndex-appHeader: 1100;
@@ -1528,29 +1562,6 @@
1528
1562
  --salt-palette-success-foreground-informative: var(--salt-color-green-200);
1529
1563
  }
1530
1564
 
1531
- /* css/legacy/palette/text.css */
1532
- .salt-theme {
1533
- --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
1534
- --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
1535
- --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
1536
- --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-openSans);
1537
- --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
1538
- --salt-palette-text-action-fontWeight-small: var(--salt-typography-fontWeight-regular);
1539
- --salt-palette-text-action-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1540
- --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
1541
- --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
1542
- --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1543
- --salt-palette-text-heading-fontWeight: var(--salt-typography-fontWeight-semiBold);
1544
- --salt-palette-text-heading-fontWeight-small: var(--salt-typography-fontWeight-regular);
1545
- --salt-palette-text-heading-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1546
- --salt-palette-text-body-fontWeight: var(--salt-typography-fontWeight-regular);
1547
- --salt-palette-text-body-fontWeight-small: var(--salt-typography-fontWeight-light);
1548
- --salt-palette-text-body-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1549
- --salt-palette-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
1550
- --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
1551
- --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1552
- }
1553
-
1554
1565
  /* css/legacy/palette/warning.css */
1555
1566
  .salt-theme[data-mode=light] {
1556
1567
  --salt-palette-warning-background: var(--salt-color-orange-10);
@@ -1903,6 +1914,19 @@
1903
1914
  --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
1904
1915
  }
1905
1916
 
1917
+ /* css/legacy/characteristics/layout.css */
1918
+ .salt-density-low,
1919
+ .salt-density-medium,
1920
+ .salt-density-high,
1921
+ .salt-density-touch {
1922
+ --salt-layout-page-margin: var(--salt-spacing-300);
1923
+ --salt-layout-gap: var(--salt-spacing-300);
1924
+ }
1925
+ .salt-density-mobile {
1926
+ --salt-layout-page-margin: var(--salt-spacing-100);
1927
+ --salt-layout-gap: var(--salt-spacing-100);
1928
+ }
1929
+
1906
1930
  /* css/legacy/characteristics/navigable.css */
1907
1931
  .salt-theme {
1908
1932
  --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
@@ -1958,6 +1982,7 @@
1958
1982
  --salt-sentiment-negative-dataviz: var(--salt-palette-error-foreground-decorative);
1959
1983
  --salt-sentiment-positive-dataviz: var(--salt-palette-success-foreground-decorative);
1960
1984
  --salt-sentiment-neutral-dataviz: var(--salt-palette-neutral-secondary-foreground);
1985
+ --salt-sentiment-accent-dataviz: var(--salt-palette-accent-foreground-informative);
1961
1986
  }
1962
1987
 
1963
1988
  /* css/legacy/characteristics/separable.css */
@@ -2010,58 +2035,58 @@
2010
2035
  --salt-text-letterSpacing: 0;
2011
2036
  --salt-text-textAlign: left;
2012
2037
  --salt-text-textAlign-embedded: center;
2013
- --salt-text-action-fontFamily: var(--salt-palette-text-fontFamily-action);
2038
+ --salt-text-action-fontFamily: var(--salt-typography-fontFamily-openSans);
2014
2039
  --salt-text-action-letterSpacing: 0.6px;
2015
2040
  --salt-text-action-textTransform: uppercase;
2016
2041
  --salt-text-action-textAlign: center;
2017
- --salt-text-action-fontWeight: var(--salt-palette-text-action-fontWeight);
2018
- --salt-text-action-fontWeight-small: var(--salt-palette-text-action-fontWeight-small);
2019
- --salt-text-action-fontWeight-strong: var(--salt-palette-text-action-fontWeight-strong);
2020
- --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
2021
- --salt-text-fontWeight: var(--salt-palette-text-body-fontWeight);
2022
- --salt-text-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
2023
- --salt-text-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
2024
- --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
2025
- --salt-text-notation-fontWeight: var(--salt-palette-text-notation-fontWeight);
2026
- --salt-text-notation-fontWeight-small: var(--salt-palette-text-notation-fontWeight-small);
2027
- --salt-text-notation-fontWeight-strong: var(--salt-palette-text-notation-fontWeight-strong);
2028
- --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
2029
- --salt-text-h1-fontWeight: var(--salt-palette-text-heading-fontWeight);
2030
- --salt-text-h1-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
2031
- --salt-text-h1-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
2032
- --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
2033
- --salt-text-h2-fontWeight: var(--salt-palette-text-heading-fontWeight);
2034
- --salt-text-h2-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
2035
- --salt-text-h2-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
2036
- --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
2037
- --salt-text-h3-fontWeight: var(--salt-palette-text-heading-fontWeight);
2038
- --salt-text-h3-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
2039
- --salt-text-h3-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
2040
- --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
2041
- --salt-text-h4-fontWeight: var(--salt-palette-text-heading-fontWeight);
2042
- --salt-text-h4-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
2043
- --salt-text-h4-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
2044
- --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
2045
- --salt-text-label-fontWeight: var(--salt-palette-text-body-fontWeight);
2046
- --salt-text-label-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
2047
- --salt-text-label-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
2048
- --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
2049
- --salt-text-display1-fontWeight: var(--salt-palette-text-display-fontWeight);
2050
- --salt-text-display1-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
2051
- --salt-text-display1-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
2052
- --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
2053
- --salt-text-display2-fontWeight: var(--salt-palette-text-display-fontWeight);
2054
- --salt-text-display2-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
2055
- --salt-text-display2-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
2056
- --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
2057
- --salt-text-display3-fontWeight: var(--salt-palette-text-display-fontWeight);
2058
- --salt-text-display3-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
2059
- --salt-text-display3-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
2060
- --salt-text-display4-fontFamily: var(--salt-palette-text-fontFamily-heading);
2061
- --salt-text-display4-fontWeight: var(--salt-palette-text-display-fontWeight);
2062
- --salt-text-display4-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
2063
- --salt-text-display4-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
2064
- --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
2042
+ --salt-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
2043
+ --salt-text-action-fontWeight-small: var(--salt-typography-fontWeight-regular);
2044
+ --salt-text-action-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2045
+ --salt-text-fontFamily: var(--salt-typography-fontFamily-openSans);
2046
+ --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
2047
+ --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
2048
+ --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
2049
+ --salt-text-notation-fontFamily: var(--salt-typography-fontFamily-openSans);
2050
+ --salt-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
2051
+ --salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
2052
+ --salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2053
+ --salt-text-h1-fontFamily: var(--salt-typography-fontFamily-openSans);
2054
+ --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-semiBold);
2055
+ --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-regular);
2056
+ --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2057
+ --salt-text-h2-fontFamily: var(--salt-typography-fontFamily-openSans);
2058
+ --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
2059
+ --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
2060
+ --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2061
+ --salt-text-h3-fontFamily: var(--salt-typography-fontFamily-openSans);
2062
+ --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
2063
+ --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
2064
+ --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2065
+ --salt-text-h4-fontFamily: var(--salt-typography-fontFamily-openSans);
2066
+ --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
2067
+ --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
2068
+ --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2069
+ --salt-text-label-fontFamily: var(--salt-typography-fontFamily-openSans);
2070
+ --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
2071
+ --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
2072
+ --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
2073
+ --salt-text-display1-fontFamily: var(--salt-typography-fontFamily-openSans);
2074
+ --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
2075
+ --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2076
+ --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
2077
+ --salt-text-display2-fontFamily: var(--salt-typography-fontFamily-openSans);
2078
+ --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
2079
+ --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2080
+ --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
2081
+ --salt-text-display3-fontFamily: var(--salt-typography-fontFamily-openSans);
2082
+ --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
2083
+ --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2084
+ --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
2085
+ --salt-text-display4-fontFamily: var(--salt-typography-fontFamily-openSans);
2086
+ --salt-text-display4-fontWeight: var(--salt-typography-fontWeight-semiBold);
2087
+ --salt-text-display4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2088
+ --salt-text-display4-fontWeight-small: var(--salt-typography-fontWeight-regular);
2089
+ --salt-text-code-fontFamily: var(--salt-typography-fontFamily-ptMono);
2065
2090
  }
2066
2091
  .salt-density-touch {
2067
2092
  --salt-text-h1-fontSize: 42px;
@@ -2163,6 +2188,31 @@
2163
2188
  --salt-text-notation-fontSize: 8px;
2164
2189
  --salt-text-notation-lineHeight: 10px;
2165
2190
  }
2191
+ .salt-density-mobile {
2192
+ --salt-text-h1-fontSize: 24px;
2193
+ --salt-text-h1-lineHeight: 31px;
2194
+ --salt-text-h2-fontSize: 22px;
2195
+ --salt-text-h2-lineHeight: 29px;
2196
+ --salt-text-h3-fontSize: 20px;
2197
+ --salt-text-h3-lineHeight: 26px;
2198
+ --salt-text-h4-fontSize: 16px;
2199
+ --salt-text-h4-lineHeight: 21px;
2200
+ --salt-text-label-fontSize: 14px;
2201
+ --salt-text-label-lineHeight: 18px;
2202
+ --salt-text-fontSize: 16px;
2203
+ --salt-text-lineHeight: 21px;
2204
+ --salt-text-minHeight: 21px;
2205
+ --salt-text-display1-fontSize: 40px;
2206
+ --salt-text-display1-lineHeight: 52px;
2207
+ --salt-text-display2-fontSize: 36px;
2208
+ --salt-text-display2-lineHeight: 47px;
2209
+ --salt-text-display3-fontSize: 32px;
2210
+ --salt-text-display3-lineHeight: 42px;
2211
+ --salt-text-display4-fontSize: 28px;
2212
+ --salt-text-display4-lineHeight: 36px;
2213
+ --salt-text-notation-fontSize: 12px;
2214
+ --salt-text-notation-lineHeight: 16px;
2215
+ }
2166
2216
 
2167
2217
  /* css/deprecated/foundations.css */
2168
2218
  .salt-theme {
@@ -2772,6 +2822,25 @@
2772
2822
  --salt-palette-alpha-weak: var(--salt-palette-alpha-contrast-mediumLow);
2773
2823
  --salt-palette-alpha-weaker: var(--salt-palette-alpha-contrast-lower);
2774
2824
  --salt-palette-alpha-backdrop: var(--salt-palette-alpha-higher);
2825
+ --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
2826
+ --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
2827
+ --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
2828
+ --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-openSans);
2829
+ --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
2830
+ --salt-palette-text-action-fontWeight-small: var(--salt-typography-fontWeight-regular);
2831
+ --salt-palette-text-action-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2832
+ --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
2833
+ --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
2834
+ --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2835
+ --salt-palette-text-heading-fontWeight: var(--salt-typography-fontWeight-semiBold);
2836
+ --salt-palette-text-heading-fontWeight-small: var(--salt-typography-fontWeight-regular);
2837
+ --salt-palette-text-heading-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2838
+ --salt-palette-text-body-fontWeight: var(--salt-typography-fontWeight-regular);
2839
+ --salt-palette-text-body-fontWeight-small: var(--salt-typography-fontWeight-light);
2840
+ --salt-palette-text-body-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
2841
+ --salt-palette-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
2842
+ --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
2843
+ --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2775
2844
  }
2776
2845
  .salt-theme[data-mode=light] {
2777
2846
  --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
package/index.css CHANGED
@@ -64,7 +64,8 @@
64
64
  .salt-density-touch,
65
65
  .salt-density-low,
66
66
  .salt-density-medium,
67
- .salt-density-high {
67
+ .salt-density-high,
68
+ .salt-density-mobile {
68
69
  --salt-animation-opacity-start: 0;
69
70
  --salt-animation-opacity-end: 1;
70
71
  --salt-animation-scale-start: 0;
@@ -268,6 +269,7 @@
268
269
  --salt-curve-250: 15px;
269
270
  --salt-curve-999: 999px;
270
271
  }
272
+ .salt-density-mobile,
271
273
  .salt-density-touch {
272
274
  --salt-curve-0: 0;
273
275
  --salt-curve-50: 4px;
@@ -314,6 +316,7 @@
314
316
  --salt-size-selectable: 16px;
315
317
  --salt-size-bar-strong: 12px;
316
318
  }
319
+ .salt-density-mobile,
317
320
  .salt-density-touch {
318
321
  --salt-size-adornment: 12px;
319
322
  --salt-size-bar: 8px;
@@ -326,7 +329,8 @@
326
329
  .salt-density-touch,
327
330
  .salt-density-low,
328
331
  .salt-density-medium,
329
- .salt-density-high {
332
+ .salt-density-high,
333
+ .salt-density-mobile {
330
334
  --salt-size-fixed-100: 1px;
331
335
  --salt-size-fixed-200: 2px;
332
336
  --salt-size-fixed-300: 3px;
@@ -375,6 +379,35 @@
375
379
  --salt-spacing-850: calc(8.5 * var(--salt-spacing-100));
376
380
  --salt-spacing-900: calc(9 * var(--salt-spacing-100));
377
381
  --salt-spacing-950: calc(9.5 * var(--salt-spacing-100));
382
+ }
383
+ .salt-density-mobile {
384
+ --salt-spacing-25: 4px;
385
+ --salt-spacing-50: 8px;
386
+ --salt-spacing-75: 12px;
387
+ --salt-spacing-100: 16px;
388
+ --salt-spacing-150: 18px;
389
+ --salt-spacing-200: 20px;
390
+ --salt-spacing-250: 22px;
391
+ --salt-spacing-300: 24px;
392
+ --salt-spacing-350: 26px;
393
+ --salt-spacing-400: 28px;
394
+ --salt-spacing-450: 30px;
395
+ --salt-spacing-500: 32px;
396
+ --salt-spacing-550: 34px;
397
+ --salt-spacing-600: 36px;
398
+ --salt-spacing-650: 38px;
399
+ --salt-spacing-700: 40px;
400
+ --salt-spacing-750: 42px;
401
+ --salt-spacing-800: 44px;
402
+ --salt-spacing-850: 46px;
403
+ --salt-spacing-900: 48px;
404
+ --salt-spacing-950: 50px;
405
+ }
406
+ .salt-density-touch,
407
+ .salt-density-low,
408
+ .salt-density-medium,
409
+ .salt-density-high,
410
+ .salt-density-mobile {
378
411
  --salt-spacing-fixed-100: 1px;
379
412
  --salt-spacing-fixed-200: 2px;
380
413
  --salt-spacing-fixed-300: 3px;
@@ -406,7 +439,8 @@
406
439
  .salt-density-touch,
407
440
  .salt-density-low,
408
441
  .salt-density-medium,
409
- .salt-density-high {
442
+ .salt-density-high,
443
+ .salt-density-mobile {
410
444
  --salt-zIndex-default: 1;
411
445
  --salt-zIndex-popout: 1000;
412
446
  --salt-zIndex-appHeader: 1100;
@@ -1568,29 +1602,6 @@
1568
1602
  --salt-palette-success-foreground-informative: var(--salt-color-green-200);
1569
1603
  }
1570
1604
 
1571
- /* css/legacy/palette/text.css */
1572
- .salt-theme {
1573
- --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
1574
- --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
1575
- --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
1576
- --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-openSans);
1577
- --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
1578
- --salt-palette-text-action-fontWeight-small: var(--salt-typography-fontWeight-regular);
1579
- --salt-palette-text-action-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1580
- --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
1581
- --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
1582
- --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1583
- --salt-palette-text-heading-fontWeight: var(--salt-typography-fontWeight-semiBold);
1584
- --salt-palette-text-heading-fontWeight-small: var(--salt-typography-fontWeight-regular);
1585
- --salt-palette-text-heading-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1586
- --salt-palette-text-body-fontWeight: var(--salt-typography-fontWeight-regular);
1587
- --salt-palette-text-body-fontWeight-small: var(--salt-typography-fontWeight-light);
1588
- --salt-palette-text-body-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
1589
- --salt-palette-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
1590
- --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
1591
- --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1592
- }
1593
-
1594
1605
  /* css/legacy/palette/warning.css */
1595
1606
  .salt-theme[data-mode=light] {
1596
1607
  --salt-palette-warning-background: var(--salt-color-orange-10);
@@ -1943,6 +1954,19 @@
1943
1954
  --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
1944
1955
  }
1945
1956
 
1957
+ /* css/legacy/characteristics/layout.css */
1958
+ .salt-density-low,
1959
+ .salt-density-medium,
1960
+ .salt-density-high,
1961
+ .salt-density-touch {
1962
+ --salt-layout-page-margin: var(--salt-spacing-300);
1963
+ --salt-layout-gap: var(--salt-spacing-300);
1964
+ }
1965
+ .salt-density-mobile {
1966
+ --salt-layout-page-margin: var(--salt-spacing-100);
1967
+ --salt-layout-gap: var(--salt-spacing-100);
1968
+ }
1969
+
1946
1970
  /* css/legacy/characteristics/navigable.css */
1947
1971
  .salt-theme {
1948
1972
  --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
@@ -1998,6 +2022,7 @@
1998
2022
  --salt-sentiment-negative-dataviz: var(--salt-palette-error-foreground-decorative);
1999
2023
  --salt-sentiment-positive-dataviz: var(--salt-palette-success-foreground-decorative);
2000
2024
  --salt-sentiment-neutral-dataviz: var(--salt-palette-neutral-secondary-foreground);
2025
+ --salt-sentiment-accent-dataviz: var(--salt-palette-accent-foreground-informative);
2001
2026
  }
2002
2027
 
2003
2028
  /* css/legacy/characteristics/separable.css */
@@ -2050,58 +2075,58 @@
2050
2075
  --salt-text-letterSpacing: 0;
2051
2076
  --salt-text-textAlign: left;
2052
2077
  --salt-text-textAlign-embedded: center;
2053
- --salt-text-action-fontFamily: var(--salt-palette-text-fontFamily-action);
2078
+ --salt-text-action-fontFamily: var(--salt-typography-fontFamily-openSans);
2054
2079
  --salt-text-action-letterSpacing: 0.6px;
2055
2080
  --salt-text-action-textTransform: uppercase;
2056
2081
  --salt-text-action-textAlign: center;
2057
- --salt-text-action-fontWeight: var(--salt-palette-text-action-fontWeight);
2058
- --salt-text-action-fontWeight-small: var(--salt-palette-text-action-fontWeight-small);
2059
- --salt-text-action-fontWeight-strong: var(--salt-palette-text-action-fontWeight-strong);
2060
- --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
2061
- --salt-text-fontWeight: var(--salt-palette-text-body-fontWeight);
2062
- --salt-text-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
2063
- --salt-text-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
2064
- --salt-text-notation-fontFamily: var(--salt-palette-text-fontFamily);
2065
- --salt-text-notation-fontWeight: var(--salt-palette-text-notation-fontWeight);
2066
- --salt-text-notation-fontWeight-small: var(--salt-palette-text-notation-fontWeight-small);
2067
- --salt-text-notation-fontWeight-strong: var(--salt-palette-text-notation-fontWeight-strong);
2068
- --salt-text-h1-fontFamily: var(--salt-palette-text-fontFamily-heading);
2069
- --salt-text-h1-fontWeight: var(--salt-palette-text-heading-fontWeight);
2070
- --salt-text-h1-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
2071
- --salt-text-h1-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
2072
- --salt-text-h2-fontFamily: var(--salt-palette-text-fontFamily-heading);
2073
- --salt-text-h2-fontWeight: var(--salt-palette-text-heading-fontWeight);
2074
- --salt-text-h2-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
2075
- --salt-text-h2-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
2076
- --salt-text-h3-fontFamily: var(--salt-palette-text-fontFamily-heading);
2077
- --salt-text-h3-fontWeight: var(--salt-palette-text-heading-fontWeight);
2078
- --salt-text-h3-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
2079
- --salt-text-h3-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
2080
- --salt-text-h4-fontFamily: var(--salt-palette-text-fontFamily-heading);
2081
- --salt-text-h4-fontWeight: var(--salt-palette-text-heading-fontWeight);
2082
- --salt-text-h4-fontWeight-small: var(--salt-palette-text-heading-fontWeight-small);
2083
- --salt-text-h4-fontWeight-strong: var(--salt-palette-text-heading-fontWeight-strong);
2084
- --salt-text-label-fontFamily: var(--salt-palette-text-fontFamily);
2085
- --salt-text-label-fontWeight: var(--salt-palette-text-body-fontWeight);
2086
- --salt-text-label-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
2087
- --salt-text-label-fontWeight-strong: var(--salt-palette-text-body-fontWeight-strong);
2088
- --salt-text-display1-fontFamily: var(--salt-palette-text-fontFamily-heading);
2089
- --salt-text-display1-fontWeight: var(--salt-palette-text-display-fontWeight);
2090
- --salt-text-display1-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
2091
- --salt-text-display1-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
2092
- --salt-text-display2-fontFamily: var(--salt-palette-text-fontFamily-heading);
2093
- --salt-text-display2-fontWeight: var(--salt-palette-text-display-fontWeight);
2094
- --salt-text-display2-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
2095
- --salt-text-display2-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
2096
- --salt-text-display3-fontFamily: var(--salt-palette-text-fontFamily-heading);
2097
- --salt-text-display3-fontWeight: var(--salt-palette-text-display-fontWeight);
2098
- --salt-text-display3-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
2099
- --salt-text-display3-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
2100
- --salt-text-display4-fontFamily: var(--salt-palette-text-fontFamily-heading);
2101
- --salt-text-display4-fontWeight: var(--salt-palette-text-display-fontWeight);
2102
- --salt-text-display4-fontWeight-strong: var(--salt-palette-text-display-fontWeight-strong);
2103
- --salt-text-display4-fontWeight-small: var(--salt-palette-text-display-fontWeight-small);
2104
- --salt-text-code-fontFamily: var(--salt-palette-text-fontFamily-code);
2082
+ --salt-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
2083
+ --salt-text-action-fontWeight-small: var(--salt-typography-fontWeight-regular);
2084
+ --salt-text-action-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2085
+ --salt-text-fontFamily: var(--salt-typography-fontFamily-openSans);
2086
+ --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
2087
+ --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
2088
+ --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
2089
+ --salt-text-notation-fontFamily: var(--salt-typography-fontFamily-openSans);
2090
+ --salt-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
2091
+ --salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
2092
+ --salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2093
+ --salt-text-h1-fontFamily: var(--salt-typography-fontFamily-openSans);
2094
+ --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-semiBold);
2095
+ --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-regular);
2096
+ --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2097
+ --salt-text-h2-fontFamily: var(--salt-typography-fontFamily-openSans);
2098
+ --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
2099
+ --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
2100
+ --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2101
+ --salt-text-h3-fontFamily: var(--salt-typography-fontFamily-openSans);
2102
+ --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
2103
+ --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
2104
+ --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2105
+ --salt-text-h4-fontFamily: var(--salt-typography-fontFamily-openSans);
2106
+ --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
2107
+ --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
2108
+ --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2109
+ --salt-text-label-fontFamily: var(--salt-typography-fontFamily-openSans);
2110
+ --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
2111
+ --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
2112
+ --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
2113
+ --salt-text-display1-fontFamily: var(--salt-typography-fontFamily-openSans);
2114
+ --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
2115
+ --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2116
+ --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
2117
+ --salt-text-display2-fontFamily: var(--salt-typography-fontFamily-openSans);
2118
+ --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
2119
+ --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2120
+ --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
2121
+ --salt-text-display3-fontFamily: var(--salt-typography-fontFamily-openSans);
2122
+ --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
2123
+ --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2124
+ --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
2125
+ --salt-text-display4-fontFamily: var(--salt-typography-fontFamily-openSans);
2126
+ --salt-text-display4-fontWeight: var(--salt-typography-fontWeight-semiBold);
2127
+ --salt-text-display4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2128
+ --salt-text-display4-fontWeight-small: var(--salt-typography-fontWeight-regular);
2129
+ --salt-text-code-fontFamily: var(--salt-typography-fontFamily-ptMono);
2105
2130
  }
2106
2131
  .salt-density-touch {
2107
2132
  --salt-text-h1-fontSize: 42px;
@@ -2203,6 +2228,31 @@
2203
2228
  --salt-text-notation-fontSize: 8px;
2204
2229
  --salt-text-notation-lineHeight: 10px;
2205
2230
  }
2231
+ .salt-density-mobile {
2232
+ --salt-text-h1-fontSize: 24px;
2233
+ --salt-text-h1-lineHeight: 31px;
2234
+ --salt-text-h2-fontSize: 22px;
2235
+ --salt-text-h2-lineHeight: 29px;
2236
+ --salt-text-h3-fontSize: 20px;
2237
+ --salt-text-h3-lineHeight: 26px;
2238
+ --salt-text-h4-fontSize: 16px;
2239
+ --salt-text-h4-lineHeight: 21px;
2240
+ --salt-text-label-fontSize: 14px;
2241
+ --salt-text-label-lineHeight: 18px;
2242
+ --salt-text-fontSize: 16px;
2243
+ --salt-text-lineHeight: 21px;
2244
+ --salt-text-minHeight: 21px;
2245
+ --salt-text-display1-fontSize: 40px;
2246
+ --salt-text-display1-lineHeight: 52px;
2247
+ --salt-text-display2-fontSize: 36px;
2248
+ --salt-text-display2-lineHeight: 47px;
2249
+ --salt-text-display3-fontSize: 32px;
2250
+ --salt-text-display3-lineHeight: 42px;
2251
+ --salt-text-display4-fontSize: 28px;
2252
+ --salt-text-display4-lineHeight: 36px;
2253
+ --salt-text-notation-fontSize: 12px;
2254
+ --salt-text-notation-lineHeight: 16px;
2255
+ }
2206
2256
 
2207
2257
  /* css/deprecated/foundations.css */
2208
2258
  .salt-theme {
@@ -2812,6 +2862,25 @@
2812
2862
  --salt-palette-alpha-weak: var(--salt-palette-alpha-contrast-mediumLow);
2813
2863
  --salt-palette-alpha-weaker: var(--salt-palette-alpha-contrast-lower);
2814
2864
  --salt-palette-alpha-backdrop: var(--salt-palette-alpha-higher);
2865
+ --salt-palette-text-fontFamily: var(--salt-typography-fontFamily-openSans);
2866
+ --salt-palette-text-fontFamily-heading: var(--salt-typography-fontFamily-openSans);
2867
+ --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
2868
+ --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-openSans);
2869
+ --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
2870
+ --salt-palette-text-action-fontWeight-small: var(--salt-typography-fontWeight-regular);
2871
+ --salt-palette-text-action-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2872
+ --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
2873
+ --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
2874
+ --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2875
+ --salt-palette-text-heading-fontWeight: var(--salt-typography-fontWeight-semiBold);
2876
+ --salt-palette-text-heading-fontWeight-small: var(--salt-typography-fontWeight-regular);
2877
+ --salt-palette-text-heading-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2878
+ --salt-palette-text-body-fontWeight: var(--salt-typography-fontWeight-regular);
2879
+ --salt-palette-text-body-fontWeight-small: var(--salt-typography-fontWeight-light);
2880
+ --salt-palette-text-body-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
2881
+ --salt-palette-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
2882
+ --salt-palette-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
2883
+ --salt-palette-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
2815
2884
  }
2816
2885
  .salt-theme[data-mode=light] {
2817
2886
  --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/theme",
3
- "version": "1.38.1",
3
+ "version": "1.40.0",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",