@salt-ds/theme 0.0.0-snapshot-20251015105819 → 0.0.0-snapshot-20251109205350

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 +271 -170
  2. package/css/theme.css +179 -92
  3. package/index.css +179 -92
  4. package/package.json +1 -1
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;
@@ -1124,14 +1158,12 @@
1124
1158
  --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
1125
1159
  --salt-palette-accent-foreground: var(--salt-color-white);
1126
1160
  --salt-palette-accent-foreground-informative: var(--salt-color-blue-600);
1127
- --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-600-40a);
1128
1161
  }
1129
1162
  .salt-theme[data-mode=dark] {
1130
1163
  --salt-palette-accent: var(--salt-color-blue-500);
1131
1164
  --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
1132
1165
  --salt-palette-accent-foreground: var(--salt-color-white);
1133
1166
  --salt-palette-accent-foreground-informative: var(--salt-color-blue-200);
1134
- --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-200-40a);
1135
1167
  }
1136
1168
 
1137
1169
  /* css/legacy/palette/alpha.css */
@@ -1367,7 +1399,6 @@
1367
1399
  --salt-palette-interact-outline: var(--salt-color-blue-600);
1368
1400
  --salt-palette-interact-cta-background: var(--salt-color-blue-600);
1369
1401
  --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
1370
- --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-40a);
1371
1402
  --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500);
1372
1403
  --salt-palette-interact-cta-foreground: var(--salt-color-white);
1373
1404
  --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-40a);
@@ -1375,7 +1406,6 @@
1375
1406
  --salt-palette-interact-cta-border-active: var(--salt-color-blue-700);
1376
1407
  --salt-palette-interact-primary-background: var(--salt-color-gray-60);
1377
1408
  --salt-palette-interact-primary-background-active: var(--salt-color-gray-200);
1378
- --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-40a);
1379
1409
  --salt-palette-interact-primary-background-hover: var(--salt-color-gray-40);
1380
1410
  --salt-palette-interact-primary-foreground: var(--salt-color-gray-900);
1381
1411
  --salt-palette-interact-primary-foreground-active: var(--salt-color-white);
@@ -1406,7 +1436,6 @@
1406
1436
  --salt-palette-interact-outline: var(--salt-color-blue-100);
1407
1437
  --salt-palette-interact-cta-background: var(--salt-color-blue-600);
1408
1438
  --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
1409
- --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-40a);
1410
1439
  --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500);
1411
1440
  --salt-palette-interact-cta-foreground: var(--salt-color-white);
1412
1441
  --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-40a);
@@ -1414,7 +1443,6 @@
1414
1443
  --salt-palette-interact-cta-border-active: var(--salt-color-blue-700);
1415
1444
  --salt-palette-interact-primary-background: var(--salt-color-gray-300);
1416
1445
  --salt-palette-interact-primary-background-active: var(--salt-color-gray-70);
1417
- --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-40a);
1418
1446
  --salt-palette-interact-primary-background-hover: var(--salt-color-gray-200);
1419
1447
  --salt-palette-interact-primary-foreground: var(--salt-color-white);
1420
1448
  --salt-palette-interact-primary-foreground-active: var(--salt-color-gray-900);
@@ -1443,23 +1471,17 @@
1443
1471
  /* css/legacy/palette/negative.css */
1444
1472
  .salt-theme[data-mode=light] {
1445
1473
  --salt-palette-negative-foreground: var(--salt-color-red-600);
1446
- --salt-palette-negative-foreground-disabled: var(--salt-color-red-600-40a);
1447
1474
  --salt-palette-negative-background: var(--salt-color-red-600);
1448
1475
  --salt-palette-negative-background-hover: var(--salt-color-red-500);
1449
1476
  --salt-palette-negative-background-active: var(--salt-color-red-700);
1450
- --salt-palette-negative-background-disabled: var(--salt-color-red-600-40a);
1451
1477
  --salt-palette-negative-border: var(--salt-color-red-500);
1452
- --salt-palette-negative-border-disabled: var(--salt-color-red-500-40a);
1453
1478
  }
1454
1479
  .salt-theme[data-mode=dark] {
1455
1480
  --salt-palette-negative-foreground: var(--salt-color-red-200);
1456
- --salt-palette-negative-foreground-disabled: var(--salt-color-red-200-40a);
1457
1481
  --salt-palette-negative-background: var(--salt-color-red-600);
1458
1482
  --salt-palette-negative-background-hover: var(--salt-color-red-500);
1459
1483
  --salt-palette-negative-background-active: var(--salt-color-red-700);
1460
- --salt-palette-negative-background-disabled: var(--salt-color-red-600-40a);
1461
1484
  --salt-palette-negative-border: var(--salt-color-red-500);
1462
- --salt-palette-negative-border-disabled: var(--salt-color-red-500-40a);
1463
1485
  }
1464
1486
 
1465
1487
  /* css/legacy/palette/neutral.css */
@@ -1495,23 +1517,17 @@
1495
1517
  /* css/legacy/palette/positive.css */
1496
1518
  .salt-theme[data-mode=light] {
1497
1519
  --salt-palette-positive-foreground: var(--salt-color-green-600);
1498
- --salt-palette-positive-foreground-disabled: var(--salt-color-green-600-40a);
1499
1520
  --salt-palette-positive-background: var(--salt-color-green-600);
1500
1521
  --salt-palette-positive-background-hover: var(--salt-color-green-500);
1501
1522
  --salt-palette-positive-background-active: var(--salt-color-green-700);
1502
- --salt-palette-positive-background-disabled: var(--salt-color-green-600-40a);
1503
1523
  --salt-palette-positive-border: var(--salt-color-green-500);
1504
- --salt-palette-positive-border-disabled: var(--salt-color-green-500-40a);
1505
1524
  }
1506
1525
  .salt-theme[data-mode=dark] {
1507
1526
  --salt-palette-positive-foreground: var(--salt-color-green-200);
1508
- --salt-palette-positive-foreground-disabled: var(--salt-color-green-200-40a);
1509
1527
  --salt-palette-positive-background: var(--salt-color-green-600);
1510
1528
  --salt-palette-positive-background-hover: var(--salt-color-green-500);
1511
1529
  --salt-palette-positive-background-active: var(--salt-color-green-700);
1512
- --salt-palette-positive-background-disabled: var(--salt-color-green-600-40a);
1513
1530
  --salt-palette-positive-border: var(--salt-color-green-500);
1514
- --salt-palette-positive-border-disabled: var(--salt-color-green-500-40a);
1515
1531
  }
1516
1532
 
1517
1533
  /* css/legacy/palette/shadow.css */
@@ -1577,32 +1593,24 @@
1577
1593
  --salt-palette-warning-bold-background: var(--salt-color-orange-800);
1578
1594
  --salt-palette-warning-background-selected: var(--salt-color-orange-30);
1579
1595
  --salt-palette-warning-border: var(--salt-color-orange-700);
1580
- --salt-palette-warning-border-disabled: var(--salt-color-orange-700-40a);
1581
1596
  --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700);
1582
1597
  --salt-palette-warning-foreground-informative: var(--salt-color-orange-850);
1583
- --salt-palette-warning-foreground-informative-disabled: var(--salt-color-orange-850-40a);
1584
1598
  --salt-palette-warning-action: var(--salt-color-orange-600);
1585
1599
  --salt-palette-warning-action-hover: var(--salt-color-orange-500);
1586
1600
  --salt-palette-warning-action-active: var(--salt-color-orange-800);
1587
- --salt-palette-warning-action-disabled: var(--salt-color-orange-600-40a);
1588
1601
  --salt-palette-warning-action-foreground: var(--salt-color-gray-900);
1589
- --salt-palette-warning-action-foreground-disabled: var(--salt-color-gray-900-40a);
1590
1602
  }
1591
1603
  .salt-theme[data-mode=dark] {
1592
1604
  --salt-palette-warning-background: var(--salt-color-orange-900);
1593
1605
  --salt-palette-warning-bold-background: var(--salt-color-orange-800);
1594
1606
  --salt-palette-warning-background-selected: var(--salt-color-orange-875);
1595
1607
  --salt-palette-warning-border: var(--salt-color-orange-500);
1596
- --salt-palette-warning-border-disabled: var(--salt-color-orange-500-40a);
1597
1608
  --salt-palette-warning-foreground-decorative: var(--salt-color-orange-500);
1598
1609
  --salt-palette-warning-foreground-informative: var(--salt-color-orange-400);
1599
- --salt-palette-warning-foreground-informative-disabled: var(--salt-color-orange-400-40a);
1600
1610
  --salt-palette-warning-action: var(--salt-color-orange-600);
1601
1611
  --salt-palette-warning-action-hover: var(--salt-color-orange-500);
1602
1612
  --salt-palette-warning-action-active: var(--salt-color-orange-800);
1603
- --salt-palette-warning-action-disabled: var(--salt-color-orange-600-40a);
1604
1613
  --salt-palette-warning-action-foreground: var(--salt-color-gray-900);
1605
- --salt-palette-warning-action-foreground-disabled: var(--salt-color-gray-900-40a);
1606
1614
  }
1607
1615
 
1608
1616
  /* css/legacy/characteristics/accent.css */
@@ -1617,183 +1625,153 @@
1617
1625
  /* css/legacy/characteristics/actionable.css */
1618
1626
  .salt-theme {
1619
1627
  --salt-actionable-accented-bold-background-active: var(--salt-palette-interact-cta-background-active);
1620
- --salt-actionable-accented-bold-background-disabled: var(--salt-palette-interact-cta-background-disabled);
1621
1628
  --salt-actionable-accented-bold-background-hover: var(--salt-palette-interact-cta-background-hover);
1622
1629
  --salt-actionable-accented-bold-background: var(--salt-palette-interact-cta-background);
1623
1630
  --salt-actionable-accented-bold-borderColor-active: var(--salt-palette-alpha-none);
1624
- --salt-actionable-accented-bold-borderColor-disabled: var(--salt-palette-alpha-none);
1625
1631
  --salt-actionable-accented-bold-borderColor-hover: var(--salt-palette-alpha-none);
1626
1632
  --salt-actionable-accented-bold-borderColor: var(--salt-palette-alpha-none);
1627
1633
  --salt-actionable-accented-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
1628
- --salt-actionable-accented-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1629
1634
  --salt-actionable-accented-bold-foreground-hover: var(--salt-palette-interact-cta-foreground);
1630
1635
  --salt-actionable-accented-bold-foreground: var(--salt-palette-interact-cta-foreground);
1631
- --salt-actionable-bold-background-active: var(--salt-palette-interact-primary-background-active);
1632
- --salt-actionable-bold-background-disabled: var(--salt-palette-interact-primary-background-disabled);
1633
- --salt-actionable-bold-background-hover: var(--salt-palette-interact-primary-background-hover);
1634
- --salt-actionable-bold-background: var(--salt-palette-interact-primary-background);
1635
- --salt-actionable-bold-borderColor-active: var(--salt-palette-alpha-none);
1636
- --salt-actionable-bold-borderColor-disabled: var(--salt-palette-alpha-none);
1637
- --salt-actionable-bold-borderColor-hover: var(--salt-palette-alpha-none);
1638
- --salt-actionable-bold-borderColor: var(--salt-palette-alpha-none);
1639
- --salt-actionable-bold-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1640
- --salt-actionable-bold-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1641
- --salt-actionable-bold-foreground-hover: var(--salt-palette-neutral-primary-foreground);
1642
- --salt-actionable-bold-foreground: var(--salt-palette-neutral-primary-foreground);
1643
1636
  --salt-actionable-accented-background-active: var(--salt-palette-interact-cta-background-active);
1644
- --salt-actionable-accented-background-disabled: var(--salt-palette-alpha-none);
1645
1637
  --salt-actionable-accented-background-hover: var(--salt-palette-interact-cta-background-hover);
1646
1638
  --salt-actionable-accented-background: var(--salt-palette-alpha-none);
1647
1639
  --salt-actionable-accented-borderColor-active: var(--salt-palette-interact-cta-border-active);
1648
- --salt-actionable-accented-borderColor-disabled: var(--salt-palette-accent-disabled);
1649
1640
  --salt-actionable-accented-borderColor-hover: var(--salt-palette-interact-cta-border-hover);
1650
1641
  --salt-actionable-accented-borderColor: var(--salt-palette-accent);
1651
1642
  --salt-actionable-accented-foreground-active: var(--salt-palette-interact-cta-foreground);
1652
- --salt-actionable-accented-foreground-disabled: var(--salt-palette-accent-foreground-informative-disabled);
1653
1643
  --salt-actionable-accented-foreground-hover: var(--salt-palette-interact-cta-foreground);
1654
1644
  --salt-actionable-accented-foreground: var(--salt-palette-accent-foreground-informative);
1655
- --salt-actionable-background-active: var(--salt-palette-interact-primary-background-active);
1656
- --salt-actionable-background-disabled: var(--salt-palette-alpha-none);
1657
- --salt-actionable-background-hover: var(--salt-palette-interact-primary-background-hover);
1658
- --salt-actionable-background: var(--salt-palette-alpha-none);
1659
- --salt-actionable-borderColor-active: var(--salt-palette-alpha-none);
1660
- --salt-actionable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
1661
- --salt-actionable-borderColor-hover: var(--salt-palette-alpha-none);
1662
- --salt-actionable-borderColor: var(--salt-palette-interact-border);
1663
- --salt-actionable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1664
- --salt-actionable-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1665
- --salt-actionable-foreground-hover: var(--salt-palette-neutral-primary-foreground);
1666
- --salt-actionable-foreground: var(--salt-palette-neutral-primary-foreground);
1645
+ --salt-actionable-accented-background-selected: var(--salt-palette-interact-cta-background-active);
1646
+ --salt-actionable-accented-borderColor-selected: var(--salt-palette-alpha-none);
1647
+ --salt-actionable-accented-foreground-selected: var(--salt-palette-interact-cta-foreground);
1667
1648
  --salt-actionable-accented-subtle-background-active: var(--salt-palette-interact-cta-background-active);
1668
- --salt-actionable-accented-subtle-background-disabled: var(--salt-palette-alpha-none);
1669
1649
  --salt-actionable-accented-subtle-background-hover: var(--salt-palette-interact-cta-background-hover);
1670
1650
  --salt-actionable-accented-subtle-background: var(--salt-palette-alpha-none);
1671
1651
  --salt-actionable-accented-subtle-borderColor-active: var(--salt-palette-alpha-none);
1672
- --salt-actionable-accented-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
1673
1652
  --salt-actionable-accented-subtle-borderColor-hover: var(--salt-palette-alpha-none);
1674
1653
  --salt-actionable-accented-subtle-borderColor: var(--salt-palette-alpha-none);
1675
1654
  --salt-actionable-accented-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
1676
- --salt-actionable-accented-subtle-foreground-disabled: var(--salt-palette-accent-foreground-informative-disabled);
1677
1655
  --salt-actionable-accented-subtle-foreground-hover: var(--salt-palette-interact-cta-foreground);
1678
1656
  --salt-actionable-accented-subtle-foreground: var(--salt-palette-accent-foreground-informative);
1657
+ --salt-actionable-bold-background-active: var(--salt-palette-interact-primary-background-active);
1658
+ --salt-actionable-bold-background-hover: var(--salt-palette-interact-primary-background-hover);
1659
+ --salt-actionable-bold-background: var(--salt-palette-interact-primary-background);
1660
+ --salt-actionable-bold-borderColor-active: var(--salt-palette-alpha-none);
1661
+ --salt-actionable-bold-borderColor-hover: var(--salt-palette-alpha-none);
1662
+ --salt-actionable-bold-borderColor: var(--salt-palette-alpha-none);
1663
+ --salt-actionable-bold-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1664
+ --salt-actionable-bold-foreground-hover: var(--salt-palette-neutral-primary-foreground);
1665
+ --salt-actionable-bold-foreground: var(--salt-palette-neutral-primary-foreground);
1666
+ --salt-actionable-background-active: var(--salt-palette-interact-primary-background-active);
1667
+ --salt-actionable-background-hover: var(--salt-palette-interact-primary-background-hover);
1668
+ --salt-actionable-background: var(--salt-palette-alpha-none);
1669
+ --salt-actionable-borderColor-active: var(--salt-palette-alpha-none);
1670
+ --salt-actionable-borderColor-hover: var(--salt-palette-alpha-none);
1671
+ --salt-actionable-borderColor: var(--salt-palette-interact-border);
1672
+ --salt-actionable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1673
+ --salt-actionable-foreground-hover: var(--salt-palette-neutral-primary-foreground);
1674
+ --salt-actionable-foreground: var(--salt-palette-neutral-primary-foreground);
1675
+ --salt-actionable-background-selected: var(--salt-palette-interact-primary-background-active);
1676
+ --salt-actionable-borderColor-selected: var(--salt-palette-alpha-none);
1677
+ --salt-actionable-foreground-selected: var(--salt-palette-interact-primary-foreground-active);
1679
1678
  --salt-actionable-subtle-background-active: var(--salt-palette-interact-primary-background-active);
1680
- --salt-actionable-subtle-background-disabled: var(--salt-palette-alpha-none);
1681
1679
  --salt-actionable-subtle-background-hover: var(--salt-palette-interact-primary-background-hover);
1682
1680
  --salt-actionable-subtle-background: var(--salt-palette-alpha-none);
1683
1681
  --salt-actionable-subtle-borderColor-active: var(--salt-palette-alpha-none);
1684
- --salt-actionable-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
1685
1682
  --salt-actionable-subtle-borderColor-hover: var(--salt-palette-alpha-none);
1686
1683
  --salt-actionable-subtle-borderColor: var(--salt-palette-alpha-none);
1687
1684
  --salt-actionable-subtle-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1688
- --salt-actionable-subtle-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1689
1685
  --salt-actionable-subtle-foreground-hover: var(--salt-palette-neutral-primary-foreground);
1690
1686
  --salt-actionable-subtle-foreground: var(--salt-palette-neutral-primary-foreground);
1691
1687
  --salt-actionable-negative-bold-background-active: var(--salt-palette-negative-background-active);
1692
- --salt-actionable-negative-bold-background-disabled: var(--salt-palette-negative-background-disabled);
1693
1688
  --salt-actionable-negative-bold-background-hover: var(--salt-palette-negative-background-hover);
1694
1689
  --salt-actionable-negative-bold-background: var(--salt-palette-negative-background);
1695
1690
  --salt-actionable-negative-bold-borderColor-active: var(--salt-palette-alpha-none);
1696
- --salt-actionable-negative-bold-borderColor-disabled: var(--salt-palette-alpha-none);
1697
1691
  --salt-actionable-negative-bold-borderColor-hover: var(--salt-palette-alpha-none);
1698
1692
  --salt-actionable-negative-bold-borderColor: var(--salt-palette-alpha-none);
1699
1693
  --salt-actionable-negative-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
1700
- --salt-actionable-negative-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1701
1694
  --salt-actionable-negative-bold-foreground-hover: var(--salt-palette-interact-cta-foreground);
1702
1695
  --salt-actionable-negative-bold-foreground: var(--salt-palette-interact-cta-foreground);
1703
1696
  --salt-actionable-negative-background-active: var(--salt-palette-negative-background-active);
1704
- --salt-actionable-negative-background-disabled: var(--salt-palette-alpha-none);
1705
1697
  --salt-actionable-negative-background-hover: var(--salt-palette-negative-background-hover);
1706
1698
  --salt-actionable-negative-background: var(--salt-palette-alpha-none);
1707
1699
  --salt-actionable-negative-borderColor-active: var(--salt-palette-alpha-none);
1708
- --salt-actionable-negative-borderColor-disabled: var(--salt-palette-negative-border-disabled);
1709
1700
  --salt-actionable-negative-borderColor-hover: var(--salt-palette-alpha-none);
1710
1701
  --salt-actionable-negative-borderColor: var(--salt-palette-negative-border);
1711
1702
  --salt-actionable-negative-foreground-active: var(--salt-palette-interact-cta-foreground);
1712
- --salt-actionable-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1713
1703
  --salt-actionable-negative-foreground-hover: var(--salt-palette-interact-cta-foreground);
1714
1704
  --salt-actionable-negative-foreground: var(--salt-palette-negative-foreground);
1705
+ --salt-actionable-negative-background-selected: var(--salt-palette-negative-background-active);
1706
+ --salt-actionable-negative-borderColor-selected: var(--salt-palette-alpha-none);
1707
+ --salt-actionable-negative-foreground-selected: var(--salt-palette-interact-cta-foreground);
1715
1708
  --salt-actionable-negative-subtle-background-active: var(--salt-palette-negative-background-active);
1716
- --salt-actionable-negative-subtle-background-disabled: var(--salt-palette-alpha-none);
1717
1709
  --salt-actionable-negative-subtle-background-hover: var(--salt-palette-negative-background-hover);
1718
1710
  --salt-actionable-negative-subtle-background: var(--salt-palette-alpha-none);
1719
1711
  --salt-actionable-negative-subtle-borderColor-active: var(--salt-palette-alpha-none);
1720
- --salt-actionable-negative-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
1721
1712
  --salt-actionable-negative-subtle-borderColor-hover: var(--salt-palette-alpha-none);
1722
1713
  --salt-actionable-negative-subtle-borderColor: var(--salt-palette-alpha-none);
1723
1714
  --salt-actionable-negative-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
1724
- --salt-actionable-negative-subtle-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1725
1715
  --salt-actionable-negative-subtle-foreground-hover: var(--salt-palette-interact-cta-foreground);
1726
1716
  --salt-actionable-negative-subtle-foreground: var(--salt-palette-negative-foreground);
1727
1717
  --salt-actionable-positive-bold-background-active: var(--salt-palette-positive-background-active);
1728
- --salt-actionable-positive-bold-background-disabled: var(--salt-palette-positive-background-disabled);
1729
1718
  --salt-actionable-positive-bold-background-hover: var(--salt-palette-positive-background-hover);
1730
1719
  --salt-actionable-positive-bold-background: var(--salt-palette-positive-background);
1731
1720
  --salt-actionable-positive-bold-borderColor-active: var(--salt-palette-alpha-none);
1732
- --salt-actionable-positive-bold-borderColor-disabled: var(--salt-palette-alpha-none);
1733
1721
  --salt-actionable-positive-bold-borderColor-hover: var(--salt-palette-alpha-none);
1734
1722
  --salt-actionable-positive-bold-borderColor: var(--salt-palette-alpha-none);
1735
1723
  --salt-actionable-positive-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
1736
- --salt-actionable-positive-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
1737
1724
  --salt-actionable-positive-bold-foreground-hover: var(--salt-palette-interact-cta-foreground);
1738
1725
  --salt-actionable-positive-bold-foreground: var(--salt-palette-interact-cta-foreground);
1739
1726
  --salt-actionable-positive-background-active: var(--salt-palette-positive-background-active);
1740
- --salt-actionable-positive-background-disabled: var(--salt-palette-alpha-none);
1741
1727
  --salt-actionable-positive-background-hover: var(--salt-palette-positive-background-hover);
1742
1728
  --salt-actionable-positive-background: var(--salt-palette-alpha-none);
1743
1729
  --salt-actionable-positive-borderColor-active: var(--salt-palette-alpha-none);
1744
- --salt-actionable-positive-borderColor-disabled: var(--salt-palette-positive-border-disabled);
1745
1730
  --salt-actionable-positive-borderColor-hover: var(--salt-palette-alpha-none);
1746
1731
  --salt-actionable-positive-borderColor: var(--salt-palette-positive-border);
1747
1732
  --salt-actionable-positive-foreground-active: var(--salt-palette-interact-cta-foreground);
1748
- --salt-actionable-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
1749
1733
  --salt-actionable-positive-foreground-hover: var(--salt-palette-interact-cta-foreground);
1750
1734
  --salt-actionable-positive-foreground: var(--salt-palette-positive-foreground);
1735
+ --salt-actionable-positive-background-selected: var(--salt-palette-positive-background-active);
1736
+ --salt-actionable-positive-borderColor-selected: var(--salt-palette-alpha-none);
1737
+ --salt-actionable-positive-foreground-selected: var(--salt-palette-interact-cta-foreground);
1751
1738
  --salt-actionable-positive-subtle-background-active: var(--salt-palette-positive-background-active);
1752
- --salt-actionable-positive-subtle-background-disabled: var(--salt-palette-alpha-none);
1753
1739
  --salt-actionable-positive-subtle-background-hover: var(--salt-palette-positive-background-hover);
1754
1740
  --salt-actionable-positive-subtle-background: var(--salt-palette-alpha-none);
1755
1741
  --salt-actionable-positive-subtle-borderColor-active: var(--salt-palette-alpha-none);
1756
- --salt-actionable-positive-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
1757
1742
  --salt-actionable-positive-subtle-borderColor-hover: var(--salt-palette-alpha-none);
1758
1743
  --salt-actionable-positive-subtle-borderColor: var(--salt-palette-alpha-none);
1759
1744
  --salt-actionable-positive-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
1760
- --salt-actionable-positive-subtle-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
1761
1745
  --salt-actionable-positive-subtle-foreground-hover: var(--salt-palette-interact-cta-foreground);
1762
1746
  --salt-actionable-positive-subtle-foreground: var(--salt-palette-positive-foreground);
1763
1747
  --salt-actionable-caution-bold-background-active: var(--salt-palette-warning-action-active);
1764
- --salt-actionable-caution-bold-background-disabled: var(--salt-palette-warning-action-disabled);
1765
1748
  --salt-actionable-caution-bold-background-hover: var(--salt-palette-warning-action-hover);
1766
1749
  --salt-actionable-caution-bold-background: var(--salt-palette-warning-action);
1767
1750
  --salt-actionable-caution-bold-borderColor-active: var(--salt-palette-alpha-none);
1768
- --salt-actionable-caution-bold-borderColor-disabled: var(--salt-palette-alpha-none);
1769
1751
  --salt-actionable-caution-bold-borderColor-hover: var(--salt-palette-alpha-none);
1770
1752
  --salt-actionable-caution-bold-borderColor: var(--salt-palette-alpha-none);
1771
1753
  --salt-actionable-caution-bold-foreground-active: var(--salt-palette-interact-cta-foreground);
1772
- --salt-actionable-caution-bold-foreground-disabled: var(--salt-palette-warning-action-foreground-disabled);
1773
1754
  --salt-actionable-caution-bold-foreground-hover: var(--salt-palette-warning-action-foreground);
1774
1755
  --salt-actionable-caution-bold-foreground: var(--salt-palette-warning-action-foreground);
1775
1756
  --salt-actionable-caution-background-active: var(--salt-palette-warning-action-active);
1776
- --salt-actionable-caution-background-disabled: var(--salt-palette-alpha-none);
1777
1757
  --salt-actionable-caution-background-hover: var(--salt-palette-warning-action-hover);
1778
1758
  --salt-actionable-caution-background: var(--salt-palette-alpha-none);
1779
1759
  --salt-actionable-caution-borderColor-active: var(--salt-palette-alpha-none);
1780
- --salt-actionable-caution-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1781
1760
  --salt-actionable-caution-borderColor-hover: var(--salt-palette-alpha-none);
1782
1761
  --salt-actionable-caution-borderColor: var(--salt-palette-warning-border);
1783
1762
  --salt-actionable-caution-foreground-active: var(--salt-palette-interact-cta-foreground);
1784
- --salt-actionable-caution-foreground-disabled: var(--salt-palette-warning-foreground-informative-disabled);
1785
1763
  --salt-actionable-caution-foreground-hover: var(--salt-palette-warning-action-foreground);
1786
1764
  --salt-actionable-caution-foreground: var(--salt-palette-warning-foreground-informative);
1765
+ --salt-actionable-caution-background-selected: var(--salt-palette-warning-action-active);
1766
+ --salt-actionable-caution-borderColor-selected: var(--salt-palette-alpha-none);
1767
+ --salt-actionable-caution-foreground-selected: var(--salt-palette-interact-cta-foreground);
1787
1768
  --salt-actionable-caution-subtle-background-active: var(--salt-palette-warning-action-active);
1788
- --salt-actionable-caution-subtle-background-disabled: var(--salt-palette-alpha-none);
1789
1769
  --salt-actionable-caution-subtle-background-hover: var(--salt-palette-warning-action-hover);
1790
1770
  --salt-actionable-caution-subtle-background: var(--salt-palette-alpha-none);
1791
1771
  --salt-actionable-caution-subtle-borderColor-active: var(--salt-palette-alpha-none);
1792
- --salt-actionable-caution-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
1793
1772
  --salt-actionable-caution-subtle-borderColor-hover: var(--salt-palette-alpha-none);
1794
1773
  --salt-actionable-caution-subtle-borderColor: var(--salt-palette-alpha-none);
1795
1774
  --salt-actionable-caution-subtle-foreground-active: var(--salt-palette-interact-cta-foreground);
1796
- --salt-actionable-caution-subtle-foreground-disabled: var(--salt-palette-warning-foreground-informative-disabled);
1797
1775
  --salt-actionable-caution-subtle-foreground-hover: var(--salt-palette-warning-action-foreground);
1798
1776
  --salt-actionable-caution-subtle-foreground: var(--salt-palette-warning-foreground-informative);
1799
1777
  }
@@ -1965,6 +1943,19 @@
1965
1943
  --salt-focused-outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor);
1966
1944
  }
1967
1945
 
1946
+ /* css/legacy/characteristics/layout.css */
1947
+ .salt-density-low,
1948
+ .salt-density-medium,
1949
+ .salt-density-high {
1950
+ --salt-layout-page-margin: var(--salt-spacing-300);
1951
+ --salt-layout-gap: var(--salt-spacing-300);
1952
+ }
1953
+ .salt-density-touch,
1954
+ .salt-density-mobile {
1955
+ --salt-layout-page-margin: var(--salt-spacing-100);
1956
+ --salt-layout-gap: var(--salt-spacing-100);
1957
+ }
1958
+
1968
1959
  /* css/legacy/characteristics/navigable.css */
1969
1960
  .salt-theme {
1970
1961
  --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
@@ -2222,6 +2213,31 @@
2222
2213
  --salt-text-notation-fontSize: 8px;
2223
2214
  --salt-text-notation-lineHeight: 10px;
2224
2215
  }
2216
+ .salt-density-mobile {
2217
+ --salt-text-h1-fontSize: 42px;
2218
+ --salt-text-h1-lineHeight: 54px;
2219
+ --salt-text-h2-fontSize: 32px;
2220
+ --salt-text-h2-lineHeight: 42px;
2221
+ --salt-text-h3-fontSize: 24px;
2222
+ --salt-text-h3-lineHeight: 32px;
2223
+ --salt-text-h4-fontSize: 16px;
2224
+ --salt-text-h4-lineHeight: 21px;
2225
+ --salt-text-label-fontSize: 14px;
2226
+ --salt-text-label-lineHeight: 18px;
2227
+ --salt-text-fontSize: 16px;
2228
+ --salt-text-lineHeight: 21px;
2229
+ --salt-text-minHeight: 21px;
2230
+ --salt-text-display1-fontSize: 84px;
2231
+ --salt-text-display1-lineHeight: 109px;
2232
+ --salt-text-display2-fontSize: 58px;
2233
+ --salt-text-display2-lineHeight: 76px;
2234
+ --salt-text-display3-fontSize: 42px;
2235
+ --salt-text-display3-lineHeight: 54px;
2236
+ --salt-text-display4-fontSize: 42px;
2237
+ --salt-text-display4-lineHeight: 54px;
2238
+ --salt-text-notation-fontSize: 14px;
2239
+ --salt-text-notation-lineHeight: 18px;
2240
+ }
2225
2241
 
2226
2242
  /* css/deprecated/foundations.css */
2227
2243
  .salt-theme {
@@ -2592,6 +2608,51 @@
2592
2608
  --salt-actionable-secondary-foreground-disabled: var(--salt-actionable-subtle-foreground-disabled);
2593
2609
  --salt-actionable-secondary-foreground-hover: var(--salt-actionable-subtle-foreground-hover);
2594
2610
  --salt-actionable-secondary-foreground: var(--salt-actionable-subtle-foreground);
2611
+ --salt-actionable-accented-bold-background-disabled: var(--salt-palette-interact-cta-background-disabled);
2612
+ --salt-actionable-accented-bold-borderColor-disabled: var(--salt-palette-alpha-none);
2613
+ --salt-actionable-accented-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
2614
+ --salt-actionable-bold-background-disabled: var(--salt-palette-interact-primary-background-disabled);
2615
+ --salt-actionable-bold-borderColor-disabled: var(--salt-palette-alpha-none);
2616
+ --salt-actionable-bold-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
2617
+ --salt-actionable-accented-background-disabled: var(--salt-palette-alpha-none);
2618
+ --salt-actionable-accented-borderColor-disabled: var(--salt-palette-accent-disabled);
2619
+ --salt-actionable-accented-foreground-disabled: var(--salt-palette-accent-foreground-informative-disabled);
2620
+ --salt-actionable-background-disabled: var(--salt-palette-alpha-none);
2621
+ --salt-actionable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
2622
+ --salt-actionable-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
2623
+ --salt-actionable-accented-subtle-background-disabled: var(--salt-palette-alpha-none);
2624
+ --salt-actionable-accented-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
2625
+ --salt-actionable-accented-subtle-foreground-disabled: var(--salt-palette-accent-foreground-informative-disabled);
2626
+ --salt-actionable-subtle-background-disabled: var(--salt-palette-alpha-none);
2627
+ --salt-actionable-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
2628
+ --salt-actionable-subtle-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
2629
+ --salt-actionable-negative-bold-background-disabled: var(--salt-palette-negative-background-disabled);
2630
+ --salt-actionable-negative-bold-borderColor-disabled: var(--salt-palette-alpha-none);
2631
+ --salt-actionable-negative-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
2632
+ --salt-actionable-negative-background-disabled: var(--salt-palette-alpha-none);
2633
+ --salt-actionable-negative-borderColor-disabled: var(--salt-palette-negative-border-disabled);
2634
+ --salt-actionable-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
2635
+ --salt-actionable-negative-subtle-background-disabled: var(--salt-palette-alpha-none);
2636
+ --salt-actionable-negative-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
2637
+ --salt-actionable-negative-subtle-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
2638
+ --salt-actionable-positive-bold-background-disabled: var(--salt-palette-positive-background-disabled);
2639
+ --salt-actionable-positive-bold-borderColor-disabled: var(--salt-palette-alpha-none);
2640
+ --salt-actionable-positive-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
2641
+ --salt-actionable-positive-background-disabled: var(--salt-palette-alpha-none);
2642
+ --salt-actionable-positive-borderColor-disabled: var(--salt-palette-positive-border-disabled);
2643
+ --salt-actionable-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
2644
+ --salt-actionable-positive-subtle-background-disabled: var(--salt-palette-alpha-none);
2645
+ --salt-actionable-positive-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
2646
+ --salt-actionable-positive-subtle-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
2647
+ --salt-actionable-caution-bold-background-disabled: var(--salt-palette-warning-action-disabled);
2648
+ --salt-actionable-caution-bold-borderColor-disabled: var(--salt-palette-alpha-none);
2649
+ --salt-actionable-caution-bold-foreground-disabled: var(--salt-palette-warning-action-foreground-disabled);
2650
+ --salt-actionable-caution-background-disabled: var(--salt-palette-alpha-none);
2651
+ --salt-actionable-caution-borderColor-disabled: var(--salt-palette-warning-border-disabled);
2652
+ --salt-actionable-caution-foreground-disabled: var(--salt-palette-warning-foreground-informative-disabled);
2653
+ --salt-actionable-caution-subtle-background-disabled: var(--salt-palette-alpha-none);
2654
+ --salt-actionable-caution-subtle-borderColor-disabled: var(--salt-palette-alpha-none);
2655
+ --salt-actionable-caution-subtle-foreground-disabled: var(--salt-palette-warning-foreground-informative-disabled);
2595
2656
  }
2596
2657
 
2597
2658
  /* css/legacy/deprecated/fade.css */
@@ -2719,6 +2780,8 @@
2719
2780
  --salt-palette-interact-secondary-background-disabled: transparent;
2720
2781
  --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
2721
2782
  --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
2783
+ --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-40a);
2784
+ --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-40a);
2722
2785
  --salt-palette-measured-fill: var(--salt-color-blue-500);
2723
2786
  --salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
2724
2787
  --salt-palette-measured-foreground: var(--salt-color-gray-90);
@@ -2777,6 +2840,17 @@
2777
2840
  --salt-palette-accent-border: var(--salt-color-blue-500);
2778
2841
  --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
2779
2842
  --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
2843
+ --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-600-40a);
2844
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-600-40a);
2845
+ --salt-palette-negative-background-disabled: var(--salt-color-red-600-40a);
2846
+ --salt-palette-negative-border-disabled: var(--salt-color-red-500-40a);
2847
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-600-40a);
2848
+ --salt-palette-positive-background-disabled: var(--salt-color-green-600-40a);
2849
+ --salt-palette-positive-border-disabled: var(--salt-color-green-500-40a);
2850
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-700-40a);
2851
+ --salt-palette-warning-foreground-informative-disabled: var(--salt-color-orange-850-40a);
2852
+ --salt-palette-warning-action-disabled: var(--salt-color-orange-600-40a);
2853
+ --salt-palette-warning-action-foreground-disabled: var(--salt-color-gray-900-40a);
2780
2854
  }
2781
2855
  .salt-theme[data-mode=dark] {
2782
2856
  --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
@@ -2795,6 +2869,8 @@
2795
2869
  --salt-palette-interact-secondary-background-disabled: transparent;
2796
2870
  --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
2797
2871
  --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
2872
+ --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-40a);
2873
+ --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-40a);
2798
2874
  --salt-palette-measured-fill: var(--salt-color-blue-300);
2799
2875
  --salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
2800
2876
  --salt-palette-measured-foreground: var(--salt-color-gray-90);
@@ -2853,6 +2929,17 @@
2853
2929
  --salt-palette-accent-border: var(--salt-color-blue-500);
2854
2930
  --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
2855
2931
  --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
2932
+ --salt-palette-accent-foreground-informative-disabled: var(--salt-color-blue-200-40a);
2933
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-200-40a);
2934
+ --salt-palette-negative-background-disabled: var(--salt-color-red-600-40a);
2935
+ --salt-palette-negative-border-disabled: var(--salt-color-red-500-40a);
2936
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-200-40a);
2937
+ --salt-palette-positive-background-disabled: var(--salt-color-green-600-40a);
2938
+ --salt-palette-positive-border-disabled: var(--salt-color-green-500-40a);
2939
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-500-40a);
2940
+ --salt-palette-warning-foreground-informative-disabled: var(--salt-color-orange-400-40a);
2941
+ --salt-palette-warning-action-disabled: var(--salt-color-orange-600-40a);
2942
+ --salt-palette-warning-action-foreground-disabled: var(--salt-color-gray-900-40a);
2856
2943
  }
2857
2944
 
2858
2945
  /* css/theme.css */