@salt-ds/theme 1.25.0 → 1.27.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 +27 -57
  2. package/css/theme.css +148 -32
  3. package/index.css +148 -32
  4. package/package.json +1 -1
package/css/theme-next.css CHANGED
@@ -1,19 +1,5 @@
1
1
  /* css/foundations/alpha-next.css */
2
2
  .salt-theme.salt-theme-next {
3
- --salt-color-white-10a: rgba(var(--salt-color-white-rgb), 0.1);
4
- --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
5
- --salt-color-white-20a: rgba(var(--salt-color-white-rgb), 0.2);
6
- --salt-color-white-30a: rgba(var(--salt-color-white-rgb), 0.3);
7
- --salt-color-white-40a: rgba(var(--salt-color-white-rgb), 0.4);
8
- --salt-color-white-45a: rgba(var(--salt-color-white-rgb), 0.45);
9
- --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
10
- --salt-color-black-10a: rgba(var(--salt-color-black-rgb), 0.1);
11
- --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
12
- --salt-color-black-20a: rgba(var(--salt-color-black-rgb), 0.2);
13
- --salt-color-black-30a: rgba(var(--salt-color-black-rgb), 0.3);
14
- --salt-color-black-40a: rgba(var(--salt-color-black-rgb), 0.4);
15
- --salt-color-black-45a: rgba(var(--salt-color-black-rgb), 0.45);
16
- --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
17
3
  --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
18
4
  --salt-color-blue-300-40a: rgba(var(--salt-color-blue-300-rgb), 0.4);
19
5
  --salt-color-blue-400-40a: rgba(var(--salt-color-blue-400-rgb), 0.4);
@@ -422,36 +408,6 @@
422
408
  --salt-color-logo-brown: rgb(var(--salt-color-logo-brown-rgb));
423
409
  }
424
410
 
425
- /* css/foundations/curve-next.css */
426
- .salt-density-high {
427
- --salt-curve-0: 0;
428
- --salt-curve-50: 1px;
429
- --salt-curve-100: 2px;
430
- --salt-curve-150: 3px;
431
- --salt-curve-999: 999px;
432
- }
433
- .salt-density-medium {
434
- --salt-curve-0: 0;
435
- --salt-curve-50: 2px;
436
- --salt-curve-100: 4px;
437
- --salt-curve-150: 6px;
438
- --salt-curve-999: 999px;
439
- }
440
- .salt-density-low {
441
- --salt-curve-0: 0;
442
- --salt-curve-50: 3px;
443
- --salt-curve-100: 6px;
444
- --salt-curve-150: 9px;
445
- --salt-curve-999: 999px;
446
- }
447
- .salt-density-touch {
448
- --salt-curve-0: 0;
449
- --salt-curve-50: 4px;
450
- --salt-curve-100: 8px;
451
- --salt-curve-150: 12px;
452
- --salt-curve-999: 999px;
453
- }
454
-
455
411
  /* css/palette/accent-next.css */
456
412
  .salt-theme.salt-theme-next[data-mode=light][data-accent=blue] {
457
413
  --salt-palette-accent: var(--salt-color-blue-500);
@@ -537,12 +493,16 @@
537
493
  --salt-palette-corner-weaker: var(--salt-curve-50);
538
494
  --salt-palette-corner-weak: var(--salt-curve-100);
539
495
  --salt-palette-corner: var(--salt-curve-150);
496
+ --salt-palette-corner-strong: var(--salt-curve-200);
497
+ --salt-palette-corner-stronger: var(--salt-curve-250);
540
498
  --salt-palette-corner-strongest: var(--salt-curve-999);
541
499
  }
542
500
  .salt-theme-next[data-corner=sharp] {
543
501
  --salt-palette-corner-weaker: var(--salt-curve-0);
544
502
  --salt-palette-corner-weak: var(--salt-curve-0);
545
503
  --salt-palette-corner: var(--salt-curve-0);
504
+ --salt-palette-corner-strong: var(--salt-curve-0);
505
+ --salt-palette-corner-stronger: var(--salt-curve-0);
546
506
  --salt-palette-corner-strongest: var(--salt-curve-999);
547
507
  }
548
508
 
@@ -719,6 +679,7 @@
719
679
  --salt-accent-background: var(--salt-palette-accent);
720
680
  --salt-accent-background-disabled: var(--salt-palette-accent-disabled);
721
681
  --salt-accent-borderColor: var(--salt-palette-accent);
682
+ --salt-accent-borderColor-disabled: var(--salt-palette-accent-disabled);
722
683
  --salt-accent-foreground: var(--salt-palette-foreground-primary-alt);
723
684
  }
724
685
 
@@ -934,16 +895,16 @@
934
895
  .salt-theme.salt-theme-next {
935
896
  --salt-container-primary-background: var(--salt-palette-background-primary);
936
897
  --salt-container-primary-background-disabled: var(--salt-palette-background-primary-disabled);
937
- --salt-container-primary-borderColor: var(--salt-palette-alpha);
938
- --salt-container-primary-borderColor-disabled: var(--salt-palette-alpha-weaker);
898
+ --salt-container-primary-borderColor: var(--salt-palette-alpha-contrast-low);
899
+ --salt-container-primary-borderColor-disabled: var(--salt-palette-alpha-contrast-lowest);
939
900
  --salt-container-secondary-background: var(--salt-palette-background-secondary);
940
901
  --salt-container-secondary-background-disabled: var(--salt-palette-background-secondary-disabled);
941
- --salt-container-secondary-borderColor: var(--salt-palette-alpha);
942
- --salt-container-secondary-borderColor-disabled: var(--salt-palette-alpha-weaker);
902
+ --salt-container-secondary-borderColor: var(--salt-palette-alpha-contrast-low);
903
+ --salt-container-secondary-borderColor-disabled: var(--salt-palette-alpha-contrast-lowest);
943
904
  --salt-container-tertiary-background: var(--salt-palette-background-tertiary);
944
905
  --salt-container-tertiary-background-disabled: var(--salt-palette-background-tertiary-disabled);
945
- --salt-container-tertiary-borderColor: var(--salt-palette-alpha);
946
- --salt-container-tertiary-borderColor-disabled: var(--salt-palette-alpha-weaker);
906
+ --salt-container-tertiary-borderColor: var(--salt-palette-alpha-contrast-low);
907
+ --salt-container-tertiary-borderColor-disabled: var(--salt-palette-alpha-contrast-lowest);
947
908
  }
948
909
 
949
910
  /* css/characteristics/content-next.css */
@@ -952,6 +913,7 @@
952
913
  --salt-content-primary-foreground-disabled: var(--salt-palette-foreground-primary-disabled);
953
914
  --salt-content-secondary-foreground: var(--salt-palette-foreground-secondary);
954
915
  --salt-content-secondary-foreground-disabled: var(--salt-palette-foreground-secondary-disabled);
916
+ --salt-content-accent-foreground: var(--salt-palette-accent-strong);
955
917
  --salt-content-bold-foreground: var(--salt-palette-foreground-primary-alt);
956
918
  --salt-content-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
957
919
  --salt-content-foreground-hover: var(--salt-palette-accent-strong);
@@ -992,9 +954,9 @@
992
954
 
993
955
  /* css/characteristics/overlayable-next.css */
994
956
  .salt-theme.salt-theme-next {
995
- --salt-overlayable-background: var(--salt-palette-alpha-backdrop);
996
- --salt-overlayable-background-highlight: var(--salt-palette-alpha);
997
- --salt-overlayable-rangeSelection: var(--salt-palette-alpha-weak);
957
+ --salt-overlayable-background: var(--salt-palette-alpha-high);
958
+ --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-low);
959
+ --salt-overlayable-rangeSelection: var(--salt-palette-alpha-contrast-lower);
998
960
  }
999
961
 
1000
962
  /* css/characteristics/selectable-next.css */
@@ -1020,9 +982,16 @@
1020
982
 
1021
983
  /* css/characteristics/separable-next.css */
1022
984
  .salt-theme.salt-theme-next {
1023
- --salt-separable-primary-borderColor: var(--salt-palette-alpha-strong);
1024
- --salt-separable-secondary-borderColor: var(--salt-palette-alpha);
1025
- --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-weak);
985
+ --salt-separable-borderStyle: solid;
986
+ --salt-separable-primary-borderColor: var(--salt-palette-alpha-contrast-mediumLow);
987
+ --salt-separable-secondary-borderColor: var(--salt-palette-alpha-contrast-low);
988
+ --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-contrast-lower);
989
+ --salt-separable-foreground: var(--salt-palette-foreground-primary);
990
+ --salt-separable-foreground-hover: var(--salt-palette-foreground-primary);
991
+ --salt-separable-foreground-active: var(--salt-palette-foreground-primary-alt);
992
+ --salt-separable-background: var(--salt-palette-alpha-none);
993
+ --salt-separable-background-hover: var(--salt-palette-alpha-weak);
994
+ --salt-separable-background-active: var(--salt-palette-accent);
1026
995
  }
1027
996
 
1028
997
  /* css/characteristics/status-next.css */
@@ -1105,7 +1074,8 @@
1105
1074
 
1106
1075
  /* css/characteristics/track-next.css */
1107
1076
  .salt-theme.salt-theme-next {
1108
- --salt-track-borderColor: var(--salt-palette-alpha);
1077
+ --salt-track-borderColor: var(--salt-palette-alpha-contrast-lower);
1078
+ --salt-track-borderColor-disabled: var(--salt-palette-alpha-contrast-lowest);
1109
1079
  }
1110
1080
 
1111
1081
  /* css/deprecated/foundations-next.css */
package/css/theme.css CHANGED
@@ -1,16 +1,23 @@
1
1
  /* css/foundations/alpha.css */
2
2
  .salt-theme {
3
3
  --salt-color-white-10a: rgba(var(--salt-color-white-rgb), 0.1);
4
- --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
4
+ --salt-color-white-20a: rgba(var(--salt-color-white-rgb), 0.2);
5
5
  --salt-color-white-30a: rgba(var(--salt-color-white-rgb), 0.3);
6
6
  --salt-color-white-40a: rgba(var(--salt-color-white-rgb), 0.4);
7
- --salt-color-white-45a: rgba(var(--salt-color-white-rgb), 0.45);
7
+ --salt-color-white-50a: rgba(var(--salt-color-white-rgb), 0.5);
8
+ --salt-color-white-60a: rgba(var(--salt-color-white-rgb), 0.6);
8
9
  --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
10
+ --salt-color-white-80a: rgba(var(--salt-color-white-rgb), 0.8);
11
+ --salt-color-white-90a: rgba(var(--salt-color-white-rgb), 0.9);
9
12
  --salt-color-black-10a: rgba(var(--salt-color-black-rgb), 0.1);
10
- --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
13
+ --salt-color-black-20a: rgba(var(--salt-color-black-rgb), 0.2);
11
14
  --salt-color-black-30a: rgba(var(--salt-color-black-rgb), 0.3);
12
- --salt-color-black-45a: rgba(var(--salt-color-black-rgb), 0.45);
15
+ --salt-color-black-40a: rgba(var(--salt-color-black-rgb), 0.4);
16
+ --salt-color-black-50a: rgba(var(--salt-color-black-rgb), 0.5);
17
+ --salt-color-black-60a: rgba(var(--salt-color-black-rgb), 0.6);
13
18
  --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
19
+ --salt-color-black-80a: rgba(var(--salt-color-black-rgb), 0.8);
20
+ --salt-color-black-90a: rgba(var(--salt-color-black-rgb), 0.9);
14
21
  --salt-color-blue-30-40a: rgba(var(--salt-color-blue-30-rgb), 0.4);
15
22
  --salt-color-blue-100-40a: rgba(var(--salt-color-blue-100-rgb), 0.4);
16
23
  --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
@@ -897,6 +904,44 @@
897
904
  --salt-color-forest-900: rgb(0, 51, 31);
898
905
  }
899
906
 
907
+ /* css/foundations/curve.css */
908
+ .salt-density-high {
909
+ --salt-curve-0: 0;
910
+ --salt-curve-50: 1px;
911
+ --salt-curve-100: 2px;
912
+ --salt-curve-150: 3px;
913
+ --salt-curve-200: 4px;
914
+ --salt-curve-250: 5px;
915
+ --salt-curve-999: 999px;
916
+ }
917
+ .salt-density-medium {
918
+ --salt-curve-0: 0;
919
+ --salt-curve-50: 2px;
920
+ --salt-curve-100: 4px;
921
+ --salt-curve-150: 6px;
922
+ --salt-curve-200: 8px;
923
+ --salt-curve-250: 10px;
924
+ --salt-curve-999: 999px;
925
+ }
926
+ .salt-density-low {
927
+ --salt-curve-0: 0;
928
+ --salt-curve-50: 3px;
929
+ --salt-curve-100: 6px;
930
+ --salt-curve-150: 9px;
931
+ --salt-curve-200: 12px;
932
+ --salt-curve-250: 15px;
933
+ --salt-curve-999: 999px;
934
+ }
935
+ .salt-density-touch {
936
+ --salt-curve-0: 0;
937
+ --salt-curve-50: 4px;
938
+ --salt-curve-100: 8px;
939
+ --salt-curve-150: 12px;
940
+ --salt-curve-200: 16px;
941
+ --salt-curve-250: 20px;
942
+ --salt-curve-999: 999px;
943
+ }
944
+
900
945
  /* css/foundations/duration.css */
901
946
  .salt-theme {
902
947
  --salt-duration-instant: 0ms;
@@ -1004,6 +1049,17 @@
1004
1049
  --salt-spacing-300: calc(3 * var(--salt-spacing-100));
1005
1050
  --salt-spacing-350: calc(3.5 * var(--salt-spacing-100));
1006
1051
  --salt-spacing-400: calc(4 * var(--salt-spacing-100));
1052
+ --salt-spacing-450: calc(4.5 * var(--salt-spacing-100));
1053
+ --salt-spacing-500: calc(5 * var(--salt-spacing-100));
1054
+ --salt-spacing-550: calc(5.5 * var(--salt-spacing-100));
1055
+ --salt-spacing-600: calc(6 * var(--salt-spacing-100));
1056
+ --salt-spacing-650: calc(6.5 * var(--salt-spacing-100));
1057
+ --salt-spacing-700: calc(7 * var(--salt-spacing-100));
1058
+ --salt-spacing-750: calc(7.5 * var(--salt-spacing-100));
1059
+ --salt-spacing-800: calc(8 * var(--salt-spacing-100));
1060
+ --salt-spacing-850: calc(8.5 * var(--salt-spacing-100));
1061
+ --salt-spacing-900: calc(9 * var(--salt-spacing-100));
1062
+ --salt-spacing-950: calc(9.5 * var(--salt-spacing-100));
1007
1063
  }
1008
1064
 
1009
1065
  /* css/foundations/typography.css */
@@ -1017,6 +1073,8 @@
1017
1073
  --salt-typography-fontWeight-semiBold: 600;
1018
1074
  --salt-typography-fontWeight-bold: 700;
1019
1075
  --salt-typography-fontWeight-extraBold: 800;
1076
+ --salt-typography-textDecoration-none: none;
1077
+ --salt-typography-textDecoration-underline: underline;
1020
1078
  }
1021
1079
 
1022
1080
  /* css/foundations/zindex.css */
@@ -1037,19 +1095,45 @@
1037
1095
 
1038
1096
  /* css/palette/alpha.css */
1039
1097
  .salt-theme[data-mode=light] {
1040
- --salt-palette-alpha: var(--salt-color-black-30a);
1041
- --salt-palette-alpha-strong: var(--salt-color-black-45a);
1042
- --salt-palette-alpha-weak: var(--salt-color-black-15a);
1043
- --salt-palette-alpha-weaker: var(--salt-color-black-10a);
1044
- --salt-palette-alpha-backdrop: var(--salt-color-white-70a);
1098
+ --salt-palette-alpha-highest: var(--salt-color-white-90a);
1099
+ --salt-palette-alpha-higher: var(--salt-color-white-80a);
1100
+ --salt-palette-alpha-high: var(--salt-color-white-70a);
1101
+ --salt-palette-alpha-mediumHigh: var(--salt-color-white-60a);
1102
+ --salt-palette-alpha-medium: var(--salt-color-white-50a);
1103
+ --salt-palette-alpha-mediumLow: var(--salt-color-white-40a);
1104
+ --salt-palette-alpha-low: var(--salt-color-white-30a);
1105
+ --salt-palette-alpha-lower: var(--salt-color-white-20a);
1106
+ --salt-palette-alpha-lowest: var(--salt-color-white-10a);
1107
+ --salt-palette-alpha-contrast-highest: var(--salt-color-black-90a);
1108
+ --salt-palette-alpha-contrast-higher: var(--salt-color-black-80a);
1109
+ --salt-palette-alpha-contrast-high: var(--salt-color-black-70a);
1110
+ --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-black-60a);
1111
+ --salt-palette-alpha-contrast-medium: var(--salt-color-black-50a);
1112
+ --salt-palette-alpha-contrast-mediumLow: var(--salt-color-black-40a);
1113
+ --salt-palette-alpha-contrast-low: var(--salt-color-black-30a);
1114
+ --salt-palette-alpha-contrast-lower: var(--salt-color-black-20a);
1115
+ --salt-palette-alpha-contrast-lowest: var(--salt-color-black-10a);
1045
1116
  --salt-palette-alpha-none: transparent;
1046
1117
  }
1047
1118
  .salt-theme[data-mode=dark] {
1048
- --salt-palette-alpha: var(--salt-color-white-30a);
1049
- --salt-palette-alpha-strong: var(--salt-color-white-45a);
1050
- --salt-palette-alpha-weak: var(--salt-color-white-15a);
1051
- --salt-palette-alpha-weaker: var(--salt-color-white-10a);
1052
- --salt-palette-alpha-backdrop: var(--salt-color-black-70a);
1119
+ --salt-palette-alpha-highest: var(--salt-color-black-90a);
1120
+ --salt-palette-alpha-higher: var(--salt-color-black-80a);
1121
+ --salt-palette-alpha-high: var(--salt-color-black-70a);
1122
+ --salt-palette-alpha-mediumHigh: var(--salt-color-black-60a);
1123
+ --salt-palette-alpha-medium: var(--salt-color-black-50a);
1124
+ --salt-palette-alpha-mediumLow: var(--salt-color-black-40a);
1125
+ --salt-palette-alpha-low: var(--salt-color-black-30a);
1126
+ --salt-palette-alpha-lower: var(--salt-color-black-20a);
1127
+ --salt-palette-alpha-lowest: var(--salt-color-black-10a);
1128
+ --salt-palette-alpha-contrast-highest: var(--salt-color-white-90a);
1129
+ --salt-palette-alpha-contrast-higher: var(--salt-color-white-80a);
1130
+ --salt-palette-alpha-contrast-high: var(--salt-color-white-70a);
1131
+ --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-white-60a);
1132
+ --salt-palette-alpha-contrast-medium: var(--salt-color-white-50a);
1133
+ --salt-palette-alpha-contrast-mediumLow: var(--salt-color-white-40a);
1134
+ --salt-palette-alpha-contrast-low: var(--salt-color-white-30a);
1135
+ --salt-palette-alpha-contrast-lower: var(--salt-color-white-20a);
1136
+ --salt-palette-alpha-contrast-lowest: var(--salt-color-white-10a);
1053
1137
  --salt-palette-alpha-none: transparent;
1054
1138
  }
1055
1139
 
@@ -1213,6 +1297,16 @@
1213
1297
  --salt-palette-categorical-20-weakest: var(--salt-color-forest-900);
1214
1298
  }
1215
1299
 
1300
+ /* css/palette/corner.css */
1301
+ .salt-theme {
1302
+ --salt-palette-corner-weaker: var(--salt-curve-0);
1303
+ --salt-palette-corner-weak: var(--salt-curve-0);
1304
+ --salt-palette-corner: var(--salt-curve-0);
1305
+ --salt-palette-corner-strong: var(--salt-curve-0);
1306
+ --salt-palette-corner-stronger: var(--salt-curve-0);
1307
+ --salt-palette-corner-strongest: var(--salt-curve-999);
1308
+ }
1309
+
1216
1310
  /* css/palette/info.css */
1217
1311
  .salt-theme[data-mode=light] {
1218
1312
  --salt-palette-info-background: var(--salt-color-blue-10);
@@ -1313,15 +1407,11 @@
1313
1407
 
1314
1408
  /* css/palette/navigate.css */
1315
1409
  .salt-theme[data-mode=light] {
1316
- --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600);
1317
- --salt-palette-navigate-foreground-active: var(--salt-color-blue-700);
1318
1410
  --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);
1319
1411
  --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
1320
1412
  --salt-palette-navigate-indicator-active: var(--salt-color-orange-600);
1321
1413
  }
1322
1414
  .salt-theme[data-mode=dark] {
1323
- --salt-palette-navigate-foreground-hover: var(--salt-color-blue-200);
1324
- --salt-palette-navigate-foreground-active: var(--salt-color-blue-300);
1325
1415
  --salt-palette-navigate-foreground-visited: var(--salt-color-purple-100);
1326
1416
  --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
1327
1417
  --salt-palette-navigate-indicator-active: var(--salt-color-orange-400);
@@ -1426,6 +1516,8 @@
1426
1516
  --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
1427
1517
  --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-openSans);
1428
1518
  --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
1519
+ --salt-palette-text-action-fontWeight-small: var(--salt-typography-fontWeight-regular);
1520
+ --salt-palette-text-action-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1429
1521
  --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
1430
1522
  --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
1431
1523
  --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
@@ -1479,6 +1571,7 @@
1479
1571
  --salt-accent-background: var(--salt-palette-accent);
1480
1572
  --salt-accent-background-disabled: var(--salt-palette-accent-disabled);
1481
1573
  --salt-accent-borderColor: var(--salt-palette-accent);
1574
+ --salt-accent-borderColor-disabled: var(--salt-palette-accent-disabled);
1482
1575
  --salt-accent-foreground: var(--salt-palette-accent-foreground);
1483
1576
  }
1484
1577
 
@@ -1788,6 +1881,8 @@
1788
1881
  --salt-container-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
1789
1882
  --salt-container-tertiary-borderColor: var(--salt-palette-neutral-border);
1790
1883
  --salt-container-tertiary-borderColor-disabled: var(--salt-palette-neutral-border-disabled);
1884
+ --salt-container-ghost-background: var(--salt-palette-alpha-low);
1885
+ --salt-container-ghost-borderColor: var(--salt-palette-alpha-contrast-low);
1791
1886
  }
1792
1887
 
1793
1888
  /* css/characteristics/draggable.css */
@@ -1873,9 +1968,6 @@
1873
1968
  --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
1874
1969
  --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
1875
1970
  --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
1876
- --salt-navigable-textDecoration: underline;
1877
- --salt-navigable-textDecoration-hover: none;
1878
- --salt-navigable-textDecoration-selected: underline;
1879
1971
  }
1880
1972
 
1881
1973
  /* css/characteristics/overlayable.css */
@@ -1887,9 +1979,9 @@
1887
1979
  --salt-overlayable-shadow-popout: var(--salt-shadow-400);
1888
1980
  --salt-overlayable-shadow-drag: var(--salt-shadow-400);
1889
1981
  --salt-overlayable-shadow-modal: var(--salt-shadow-500);
1890
- --salt-overlayable-background: var(--salt-palette-alpha-backdrop);
1891
- --salt-overlayable-background-highlight: var(--salt-palette-alpha);
1892
- --salt-overlayable-rangeSelection: var(--salt-palette-alpha-weak);
1982
+ --salt-overlayable-background: var(--salt-palette-alpha-high);
1983
+ --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-low);
1984
+ --salt-overlayable-rangeSelection: var(--salt-palette-alpha-contrast-lower);
1893
1985
  }
1894
1986
 
1895
1987
  /* css/characteristics/selectable.css */
@@ -1925,9 +2017,15 @@
1925
2017
  /* css/characteristics/separable.css */
1926
2018
  .salt-theme {
1927
2019
  --salt-separable-borderStyle: solid;
1928
- --salt-separable-primary-borderColor: var(--salt-palette-alpha-strong);
1929
- --salt-separable-secondary-borderColor: var(--salt-palette-alpha);
1930
- --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-weak);
2020
+ --salt-separable-primary-borderColor: var(--salt-palette-alpha-contrast-mediumLow);
2021
+ --salt-separable-secondary-borderColor: var(--salt-palette-alpha-contrast-low);
2022
+ --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-contrast-lower);
2023
+ --salt-separable-foreground: var(--salt-palette-neutral-primary-foreground);
2024
+ --salt-separable-foreground-hover: var(--salt-palette-neutral-primary-foreground);
2025
+ --salt-separable-foreground-active: var(--salt-palette-interact-cta-foreground);
2026
+ --salt-separable-background: var(--salt-palette-alpha-none);
2027
+ --salt-separable-background-hover: var(--salt-palette-alpha-weak);
2028
+ --salt-separable-background-active: var(--salt-palette-accent);
1931
2029
  }
1932
2030
 
1933
2031
  /* css/characteristics/status.css */
@@ -1965,13 +2063,14 @@
1965
2063
  --salt-text-letterSpacing: 0;
1966
2064
  --salt-text-textAlign: left;
1967
2065
  --salt-text-textAlign-embedded: center;
1968
- --salt-text-textDecoration: none;
1969
2066
  --salt-text-textTransform: none;
1970
2067
  --salt-text-action-fontFamily: var(--salt-palette-text-fontFamily-action);
1971
2068
  --salt-text-action-letterSpacing: 0.6px;
1972
2069
  --salt-text-action-textTransform: uppercase;
1973
2070
  --salt-text-action-textAlign: center;
1974
2071
  --salt-text-action-fontWeight: var(--salt-palette-text-action-fontWeight);
2072
+ --salt-text-action-fontWeight-small: var(--salt-palette-text-action-fontWeight-small);
2073
+ --salt-text-action-fontWeight-strong: var(--salt-palette-text-action-fontWeight-strong);
1975
2074
  --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
1976
2075
  --salt-text-fontWeight: var(--salt-palette-text-body-fontWeight);
1977
2076
  --salt-text-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
@@ -2125,10 +2224,11 @@
2125
2224
  --salt-content-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
2126
2225
  --salt-content-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
2127
2226
  --salt-content-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
2227
+ --salt-content-accent-foreground: var(--salt-palette-accent-foreground-informative);
2128
2228
  --salt-content-bold-foreground: var(--salt-palette-interact-cta-foreground);
2129
2229
  --salt-content-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
2130
- --salt-content-foreground-hover: var(--salt-palette-navigate-foreground-hover);
2131
- --salt-content-foreground-active: var(--salt-palette-navigate-foreground-active);
2230
+ --salt-content-foreground-hover: var(--salt-palette-accent-foreground-informative);
2231
+ --salt-content-foreground-active: var(--salt-palette-accent-foreground-informative);
2132
2232
  --salt-content-foreground-visited: var(--salt-palette-navigate-foreground-visited);
2133
2233
  --salt-content-foreground-highlight: var(--salt-palette-interact-background-active);
2134
2234
  }
@@ -2140,6 +2240,7 @@
2140
2240
  --salt-track-borderStyle-complete: solid;
2141
2241
  --salt-track-borderStyle-incomplete: dotted;
2142
2242
  --salt-track-borderColor: var(--salt-palette-neutral-border);
2243
+ --salt-track-borderColor-disabled: var(--salt-palette-neutral-border-disabled);
2143
2244
  }
2144
2245
 
2145
2246
  /* css/deprecated/characteristics.css */
@@ -2243,6 +2344,7 @@
2243
2344
  --salt-text-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
2244
2345
  --salt-text-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
2245
2346
  --salt-text-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
2347
+ --salt-text-textDecoration: var(--salt-typography-textDecoration-none);
2246
2348
  --salt-navigable-primary-background: var(--salt-palette-navigate-primary-background);
2247
2349
  --salt-navigable-primary-background-hover: var(--salt-palette-navigate-primary-background-hover);
2248
2350
  --salt-navigable-primary-background-active: var(--salt-palette-navigate-primary-background-active);
@@ -2254,9 +2356,11 @@
2254
2356
  --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active);
2255
2357
  --salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);
2256
2358
  --salt-navigable-background-hover: var(--salt-palette-navigate-background-hover);
2359
+ --salt-navigable-textDecoration: var(--salt-typography-textDecoration-underline);
2360
+ --salt-navigable-textDecoration-hover: var(--salt-typography-textDecoration-none);
2361
+ --salt-navigable-textDecoration-selected: var(--salt-typography-textDecoration-underline);
2257
2362
  --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
2258
2363
  --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
2259
- --salt-accent-borderColor-disabled: var(--salt-palette-accent-border-disabled);
2260
2364
  --salt-track-borderWidth: 2px;
2261
2365
  --salt-track-borderWidth-active: 2px;
2262
2366
  --salt-track-borderWidth-complete: 2px;
@@ -2265,7 +2369,6 @@
2265
2369
  --salt-track-textAlign: center;
2266
2370
  --salt-track-background: var(--salt-palette-track-background);
2267
2371
  --salt-track-background-disabled: var(--salt-palette-track-background-disabled);
2268
- --salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled);
2269
2372
  --salt-taggable-cursor-hover: pointer;
2270
2373
  --salt-taggable-cursor-active: pointer;
2271
2374
  --salt-taggable-cursor-disabled: not-allowed;
@@ -2413,6 +2516,10 @@
2413
2516
  --salt-color-black-fade-background-highlight: rgba(0, 0, 0, var(--salt-opacity-25));
2414
2517
  --salt-color-white-fade-background-selection: rgba(255, 255, 255, var(--salt-opacity-15));
2415
2518
  --salt-color-white-fade-background-highlight: rgba(255, 255, 255, var(--salt-opacity-25));
2519
+ --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
2520
+ --salt-color-white-45a: rgba(var(--salt-color-white-rgb), 0.45);
2521
+ --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
2522
+ --salt-color-black-45a: rgba(var(--salt-color-black-rgb), 0.45);
2416
2523
  }
2417
2524
 
2418
2525
  /* css/deprecated/foundations.css */
@@ -2525,6 +2632,11 @@
2525
2632
  --salt-palette-opacity-primary-border: var(--salt-opacity-45);
2526
2633
  --salt-palette-opacity-secondary-border: var(--salt-opacity-25);
2527
2634
  --salt-palette-opacity-tertiary-border: var(--salt-opacity-15);
2635
+ --salt-palette-alpha: var(--salt-palette-alpha-contrast-low);
2636
+ --salt-palette-alpha-strong: var(--salt-palette-alpha-contrast-mediumLow);
2637
+ --salt-palette-alpha-weak: var(--salt-palette-alpha-contrast-lower);
2638
+ --salt-palette-alpha-weaker: var(--salt-palette-alpha-contrast-lowest);
2639
+ --salt-palette-alpha-backdrop: var(--salt-palette-alpha-high);
2528
2640
  }
2529
2641
  .salt-theme[data-mode=light] {
2530
2642
  --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
@@ -2589,6 +2701,8 @@
2589
2701
  --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-20);
2590
2702
  --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
2591
2703
  --salt-palette-navigate-background-hover: var(--salt-color-black-fade-background-hover);
2704
+ --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600);
2705
+ --salt-palette-navigate-foreground-active: var(--salt-color-blue-700);
2592
2706
  --salt-palette-track-border: var(--salt-color-gray-90);
2593
2707
  --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
2594
2708
  --salt-palette-track-background: var(--salt-color-gray-60);
@@ -2662,6 +2776,8 @@
2662
2776
  --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-700);
2663
2777
  --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border);
2664
2778
  --salt-palette-navigate-background-hover: var(--salt-color-white-fade-background-hover);
2779
+ --salt-palette-navigate-foreground-hover: var(--salt-color-blue-200);
2780
+ --salt-palette-navigate-foreground-active: var(--salt-color-blue-300);
2665
2781
  --salt-palette-track-border: var(--salt-color-gray-90);
2666
2782
  --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
2667
2783
  --salt-palette-track-background: var(--salt-color-gray-300);
package/index.css CHANGED
@@ -30,16 +30,23 @@
30
30
  /* css/foundations/alpha.css */
31
31
  .salt-theme {
32
32
  --salt-color-white-10a: rgba(var(--salt-color-white-rgb), 0.1);
33
- --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
33
+ --salt-color-white-20a: rgba(var(--salt-color-white-rgb), 0.2);
34
34
  --salt-color-white-30a: rgba(var(--salt-color-white-rgb), 0.3);
35
35
  --salt-color-white-40a: rgba(var(--salt-color-white-rgb), 0.4);
36
- --salt-color-white-45a: rgba(var(--salt-color-white-rgb), 0.45);
36
+ --salt-color-white-50a: rgba(var(--salt-color-white-rgb), 0.5);
37
+ --salt-color-white-60a: rgba(var(--salt-color-white-rgb), 0.6);
37
38
  --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
39
+ --salt-color-white-80a: rgba(var(--salt-color-white-rgb), 0.8);
40
+ --salt-color-white-90a: rgba(var(--salt-color-white-rgb), 0.9);
38
41
  --salt-color-black-10a: rgba(var(--salt-color-black-rgb), 0.1);
39
- --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
42
+ --salt-color-black-20a: rgba(var(--salt-color-black-rgb), 0.2);
40
43
  --salt-color-black-30a: rgba(var(--salt-color-black-rgb), 0.3);
41
- --salt-color-black-45a: rgba(var(--salt-color-black-rgb), 0.45);
44
+ --salt-color-black-40a: rgba(var(--salt-color-black-rgb), 0.4);
45
+ --salt-color-black-50a: rgba(var(--salt-color-black-rgb), 0.5);
46
+ --salt-color-black-60a: rgba(var(--salt-color-black-rgb), 0.6);
42
47
  --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
48
+ --salt-color-black-80a: rgba(var(--salt-color-black-rgb), 0.8);
49
+ --salt-color-black-90a: rgba(var(--salt-color-black-rgb), 0.9);
43
50
  --salt-color-blue-30-40a: rgba(var(--salt-color-blue-30-rgb), 0.4);
44
51
  --salt-color-blue-100-40a: rgba(var(--salt-color-blue-100-rgb), 0.4);
45
52
  --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
@@ -926,6 +933,44 @@
926
933
  --salt-color-forest-900: rgb(0, 51, 31);
927
934
  }
928
935
 
936
+ /* css/foundations/curve.css */
937
+ .salt-density-high {
938
+ --salt-curve-0: 0;
939
+ --salt-curve-50: 1px;
940
+ --salt-curve-100: 2px;
941
+ --salt-curve-150: 3px;
942
+ --salt-curve-200: 4px;
943
+ --salt-curve-250: 5px;
944
+ --salt-curve-999: 999px;
945
+ }
946
+ .salt-density-medium {
947
+ --salt-curve-0: 0;
948
+ --salt-curve-50: 2px;
949
+ --salt-curve-100: 4px;
950
+ --salt-curve-150: 6px;
951
+ --salt-curve-200: 8px;
952
+ --salt-curve-250: 10px;
953
+ --salt-curve-999: 999px;
954
+ }
955
+ .salt-density-low {
956
+ --salt-curve-0: 0;
957
+ --salt-curve-50: 3px;
958
+ --salt-curve-100: 6px;
959
+ --salt-curve-150: 9px;
960
+ --salt-curve-200: 12px;
961
+ --salt-curve-250: 15px;
962
+ --salt-curve-999: 999px;
963
+ }
964
+ .salt-density-touch {
965
+ --salt-curve-0: 0;
966
+ --salt-curve-50: 4px;
967
+ --salt-curve-100: 8px;
968
+ --salt-curve-150: 12px;
969
+ --salt-curve-200: 16px;
970
+ --salt-curve-250: 20px;
971
+ --salt-curve-999: 999px;
972
+ }
973
+
929
974
  /* css/foundations/duration.css */
930
975
  .salt-theme {
931
976
  --salt-duration-instant: 0ms;
@@ -1033,6 +1078,17 @@
1033
1078
  --salt-spacing-300: calc(3 * var(--salt-spacing-100));
1034
1079
  --salt-spacing-350: calc(3.5 * var(--salt-spacing-100));
1035
1080
  --salt-spacing-400: calc(4 * var(--salt-spacing-100));
1081
+ --salt-spacing-450: calc(4.5 * var(--salt-spacing-100));
1082
+ --salt-spacing-500: calc(5 * var(--salt-spacing-100));
1083
+ --salt-spacing-550: calc(5.5 * var(--salt-spacing-100));
1084
+ --salt-spacing-600: calc(6 * var(--salt-spacing-100));
1085
+ --salt-spacing-650: calc(6.5 * var(--salt-spacing-100));
1086
+ --salt-spacing-700: calc(7 * var(--salt-spacing-100));
1087
+ --salt-spacing-750: calc(7.5 * var(--salt-spacing-100));
1088
+ --salt-spacing-800: calc(8 * var(--salt-spacing-100));
1089
+ --salt-spacing-850: calc(8.5 * var(--salt-spacing-100));
1090
+ --salt-spacing-900: calc(9 * var(--salt-spacing-100));
1091
+ --salt-spacing-950: calc(9.5 * var(--salt-spacing-100));
1036
1092
  }
1037
1093
 
1038
1094
  /* css/foundations/typography.css */
@@ -1046,6 +1102,8 @@
1046
1102
  --salt-typography-fontWeight-semiBold: 600;
1047
1103
  --salt-typography-fontWeight-bold: 700;
1048
1104
  --salt-typography-fontWeight-extraBold: 800;
1105
+ --salt-typography-textDecoration-none: none;
1106
+ --salt-typography-textDecoration-underline: underline;
1049
1107
  }
1050
1108
 
1051
1109
  /* css/foundations/zindex.css */
@@ -1066,19 +1124,45 @@
1066
1124
 
1067
1125
  /* css/palette/alpha.css */
1068
1126
  .salt-theme[data-mode=light] {
1069
- --salt-palette-alpha: var(--salt-color-black-30a);
1070
- --salt-palette-alpha-strong: var(--salt-color-black-45a);
1071
- --salt-palette-alpha-weak: var(--salt-color-black-15a);
1072
- --salt-palette-alpha-weaker: var(--salt-color-black-10a);
1073
- --salt-palette-alpha-backdrop: var(--salt-color-white-70a);
1127
+ --salt-palette-alpha-highest: var(--salt-color-white-90a);
1128
+ --salt-palette-alpha-higher: var(--salt-color-white-80a);
1129
+ --salt-palette-alpha-high: var(--salt-color-white-70a);
1130
+ --salt-palette-alpha-mediumHigh: var(--salt-color-white-60a);
1131
+ --salt-palette-alpha-medium: var(--salt-color-white-50a);
1132
+ --salt-palette-alpha-mediumLow: var(--salt-color-white-40a);
1133
+ --salt-palette-alpha-low: var(--salt-color-white-30a);
1134
+ --salt-palette-alpha-lower: var(--salt-color-white-20a);
1135
+ --salt-palette-alpha-lowest: var(--salt-color-white-10a);
1136
+ --salt-palette-alpha-contrast-highest: var(--salt-color-black-90a);
1137
+ --salt-palette-alpha-contrast-higher: var(--salt-color-black-80a);
1138
+ --salt-palette-alpha-contrast-high: var(--salt-color-black-70a);
1139
+ --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-black-60a);
1140
+ --salt-palette-alpha-contrast-medium: var(--salt-color-black-50a);
1141
+ --salt-palette-alpha-contrast-mediumLow: var(--salt-color-black-40a);
1142
+ --salt-palette-alpha-contrast-low: var(--salt-color-black-30a);
1143
+ --salt-palette-alpha-contrast-lower: var(--salt-color-black-20a);
1144
+ --salt-palette-alpha-contrast-lowest: var(--salt-color-black-10a);
1074
1145
  --salt-palette-alpha-none: transparent;
1075
1146
  }
1076
1147
  .salt-theme[data-mode=dark] {
1077
- --salt-palette-alpha: var(--salt-color-white-30a);
1078
- --salt-palette-alpha-strong: var(--salt-color-white-45a);
1079
- --salt-palette-alpha-weak: var(--salt-color-white-15a);
1080
- --salt-palette-alpha-weaker: var(--salt-color-white-10a);
1081
- --salt-palette-alpha-backdrop: var(--salt-color-black-70a);
1148
+ --salt-palette-alpha-highest: var(--salt-color-black-90a);
1149
+ --salt-palette-alpha-higher: var(--salt-color-black-80a);
1150
+ --salt-palette-alpha-high: var(--salt-color-black-70a);
1151
+ --salt-palette-alpha-mediumHigh: var(--salt-color-black-60a);
1152
+ --salt-palette-alpha-medium: var(--salt-color-black-50a);
1153
+ --salt-palette-alpha-mediumLow: var(--salt-color-black-40a);
1154
+ --salt-palette-alpha-low: var(--salt-color-black-30a);
1155
+ --salt-palette-alpha-lower: var(--salt-color-black-20a);
1156
+ --salt-palette-alpha-lowest: var(--salt-color-black-10a);
1157
+ --salt-palette-alpha-contrast-highest: var(--salt-color-white-90a);
1158
+ --salt-palette-alpha-contrast-higher: var(--salt-color-white-80a);
1159
+ --salt-palette-alpha-contrast-high: var(--salt-color-white-70a);
1160
+ --salt-palette-alpha-contrast-mediumHigh: var(--salt-color-white-60a);
1161
+ --salt-palette-alpha-contrast-medium: var(--salt-color-white-50a);
1162
+ --salt-palette-alpha-contrast-mediumLow: var(--salt-color-white-40a);
1163
+ --salt-palette-alpha-contrast-low: var(--salt-color-white-30a);
1164
+ --salt-palette-alpha-contrast-lower: var(--salt-color-white-20a);
1165
+ --salt-palette-alpha-contrast-lowest: var(--salt-color-white-10a);
1082
1166
  --salt-palette-alpha-none: transparent;
1083
1167
  }
1084
1168
 
@@ -1242,6 +1326,16 @@
1242
1326
  --salt-palette-categorical-20-weakest: var(--salt-color-forest-900);
1243
1327
  }
1244
1328
 
1329
+ /* css/palette/corner.css */
1330
+ .salt-theme {
1331
+ --salt-palette-corner-weaker: var(--salt-curve-0);
1332
+ --salt-palette-corner-weak: var(--salt-curve-0);
1333
+ --salt-palette-corner: var(--salt-curve-0);
1334
+ --salt-palette-corner-strong: var(--salt-curve-0);
1335
+ --salt-palette-corner-stronger: var(--salt-curve-0);
1336
+ --salt-palette-corner-strongest: var(--salt-curve-999);
1337
+ }
1338
+
1245
1339
  /* css/palette/info.css */
1246
1340
  .salt-theme[data-mode=light] {
1247
1341
  --salt-palette-info-background: var(--salt-color-blue-10);
@@ -1342,15 +1436,11 @@
1342
1436
 
1343
1437
  /* css/palette/navigate.css */
1344
1438
  .salt-theme[data-mode=light] {
1345
- --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600);
1346
- --salt-palette-navigate-foreground-active: var(--salt-color-blue-700);
1347
1439
  --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);
1348
1440
  --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
1349
1441
  --salt-palette-navigate-indicator-active: var(--salt-color-orange-600);
1350
1442
  }
1351
1443
  .salt-theme[data-mode=dark] {
1352
- --salt-palette-navigate-foreground-hover: var(--salt-color-blue-200);
1353
- --salt-palette-navigate-foreground-active: var(--salt-color-blue-300);
1354
1444
  --salt-palette-navigate-foreground-visited: var(--salt-color-purple-100);
1355
1445
  --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
1356
1446
  --salt-palette-navigate-indicator-active: var(--salt-color-orange-400);
@@ -1455,6 +1545,8 @@
1455
1545
  --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
1456
1546
  --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-openSans);
1457
1547
  --salt-palette-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
1548
+ --salt-palette-text-action-fontWeight-small: var(--salt-typography-fontWeight-regular);
1549
+ --salt-palette-text-action-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1458
1550
  --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
1459
1551
  --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
1460
1552
  --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
@@ -1508,6 +1600,7 @@
1508
1600
  --salt-accent-background: var(--salt-palette-accent);
1509
1601
  --salt-accent-background-disabled: var(--salt-palette-accent-disabled);
1510
1602
  --salt-accent-borderColor: var(--salt-palette-accent);
1603
+ --salt-accent-borderColor-disabled: var(--salt-palette-accent-disabled);
1511
1604
  --salt-accent-foreground: var(--salt-palette-accent-foreground);
1512
1605
  }
1513
1606
 
@@ -1817,6 +1910,8 @@
1817
1910
  --salt-container-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
1818
1911
  --salt-container-tertiary-borderColor: var(--salt-palette-neutral-border);
1819
1912
  --salt-container-tertiary-borderColor-disabled: var(--salt-palette-neutral-border-disabled);
1913
+ --salt-container-ghost-background: var(--salt-palette-alpha-low);
1914
+ --salt-container-ghost-borderColor: var(--salt-palette-alpha-contrast-low);
1820
1915
  }
1821
1916
 
1822
1917
  /* css/characteristics/draggable.css */
@@ -1902,9 +1997,6 @@
1902
1997
  --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
1903
1998
  --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
1904
1999
  --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
1905
- --salt-navigable-textDecoration: underline;
1906
- --salt-navigable-textDecoration-hover: none;
1907
- --salt-navigable-textDecoration-selected: underline;
1908
2000
  }
1909
2001
 
1910
2002
  /* css/characteristics/overlayable.css */
@@ -1916,9 +2008,9 @@
1916
2008
  --salt-overlayable-shadow-popout: var(--salt-shadow-400);
1917
2009
  --salt-overlayable-shadow-drag: var(--salt-shadow-400);
1918
2010
  --salt-overlayable-shadow-modal: var(--salt-shadow-500);
1919
- --salt-overlayable-background: var(--salt-palette-alpha-backdrop);
1920
- --salt-overlayable-background-highlight: var(--salt-palette-alpha);
1921
- --salt-overlayable-rangeSelection: var(--salt-palette-alpha-weak);
2011
+ --salt-overlayable-background: var(--salt-palette-alpha-high);
2012
+ --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-low);
2013
+ --salt-overlayable-rangeSelection: var(--salt-palette-alpha-contrast-lower);
1922
2014
  }
1923
2015
 
1924
2016
  /* css/characteristics/selectable.css */
@@ -1954,9 +2046,15 @@
1954
2046
  /* css/characteristics/separable.css */
1955
2047
  .salt-theme {
1956
2048
  --salt-separable-borderStyle: solid;
1957
- --salt-separable-primary-borderColor: var(--salt-palette-alpha-strong);
1958
- --salt-separable-secondary-borderColor: var(--salt-palette-alpha);
1959
- --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-weak);
2049
+ --salt-separable-primary-borderColor: var(--salt-palette-alpha-contrast-mediumLow);
2050
+ --salt-separable-secondary-borderColor: var(--salt-palette-alpha-contrast-low);
2051
+ --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-contrast-lower);
2052
+ --salt-separable-foreground: var(--salt-palette-neutral-primary-foreground);
2053
+ --salt-separable-foreground-hover: var(--salt-palette-neutral-primary-foreground);
2054
+ --salt-separable-foreground-active: var(--salt-palette-interact-cta-foreground);
2055
+ --salt-separable-background: var(--salt-palette-alpha-none);
2056
+ --salt-separable-background-hover: var(--salt-palette-alpha-weak);
2057
+ --salt-separable-background-active: var(--salt-palette-accent);
1960
2058
  }
1961
2059
 
1962
2060
  /* css/characteristics/status.css */
@@ -1994,13 +2092,14 @@
1994
2092
  --salt-text-letterSpacing: 0;
1995
2093
  --salt-text-textAlign: left;
1996
2094
  --salt-text-textAlign-embedded: center;
1997
- --salt-text-textDecoration: none;
1998
2095
  --salt-text-textTransform: none;
1999
2096
  --salt-text-action-fontFamily: var(--salt-palette-text-fontFamily-action);
2000
2097
  --salt-text-action-letterSpacing: 0.6px;
2001
2098
  --salt-text-action-textTransform: uppercase;
2002
2099
  --salt-text-action-textAlign: center;
2003
2100
  --salt-text-action-fontWeight: var(--salt-palette-text-action-fontWeight);
2101
+ --salt-text-action-fontWeight-small: var(--salt-palette-text-action-fontWeight-small);
2102
+ --salt-text-action-fontWeight-strong: var(--salt-palette-text-action-fontWeight-strong);
2004
2103
  --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
2005
2104
  --salt-text-fontWeight: var(--salt-palette-text-body-fontWeight);
2006
2105
  --salt-text-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
@@ -2154,10 +2253,11 @@
2154
2253
  --salt-content-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
2155
2254
  --salt-content-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
2156
2255
  --salt-content-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
2256
+ --salt-content-accent-foreground: var(--salt-palette-accent-foreground-informative);
2157
2257
  --salt-content-bold-foreground: var(--salt-palette-interact-cta-foreground);
2158
2258
  --salt-content-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
2159
- --salt-content-foreground-hover: var(--salt-palette-navigate-foreground-hover);
2160
- --salt-content-foreground-active: var(--salt-palette-navigate-foreground-active);
2259
+ --salt-content-foreground-hover: var(--salt-palette-accent-foreground-informative);
2260
+ --salt-content-foreground-active: var(--salt-palette-accent-foreground-informative);
2161
2261
  --salt-content-foreground-visited: var(--salt-palette-navigate-foreground-visited);
2162
2262
  --salt-content-foreground-highlight: var(--salt-palette-interact-background-active);
2163
2263
  }
@@ -2169,6 +2269,7 @@
2169
2269
  --salt-track-borderStyle-complete: solid;
2170
2270
  --salt-track-borderStyle-incomplete: dotted;
2171
2271
  --salt-track-borderColor: var(--salt-palette-neutral-border);
2272
+ --salt-track-borderColor-disabled: var(--salt-palette-neutral-border-disabled);
2172
2273
  }
2173
2274
 
2174
2275
  /* css/deprecated/characteristics.css */
@@ -2272,6 +2373,7 @@
2272
2373
  --salt-text-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
2273
2374
  --salt-text-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
2274
2375
  --salt-text-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
2376
+ --salt-text-textDecoration: var(--salt-typography-textDecoration-none);
2275
2377
  --salt-navigable-primary-background: var(--salt-palette-navigate-primary-background);
2276
2378
  --salt-navigable-primary-background-hover: var(--salt-palette-navigate-primary-background-hover);
2277
2379
  --salt-navigable-primary-background-active: var(--salt-palette-navigate-primary-background-active);
@@ -2283,9 +2385,11 @@
2283
2385
  --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active);
2284
2386
  --salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);
2285
2387
  --salt-navigable-background-hover: var(--salt-palette-navigate-background-hover);
2388
+ --salt-navigable-textDecoration: var(--salt-typography-textDecoration-underline);
2389
+ --salt-navigable-textDecoration-hover: var(--salt-typography-textDecoration-none);
2390
+ --salt-navigable-textDecoration-selected: var(--salt-typography-textDecoration-underline);
2286
2391
  --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
2287
2392
  --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
2288
- --salt-accent-borderColor-disabled: var(--salt-palette-accent-border-disabled);
2289
2393
  --salt-track-borderWidth: 2px;
2290
2394
  --salt-track-borderWidth-active: 2px;
2291
2395
  --salt-track-borderWidth-complete: 2px;
@@ -2294,7 +2398,6 @@
2294
2398
  --salt-track-textAlign: center;
2295
2399
  --salt-track-background: var(--salt-palette-track-background);
2296
2400
  --salt-track-background-disabled: var(--salt-palette-track-background-disabled);
2297
- --salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled);
2298
2401
  --salt-taggable-cursor-hover: pointer;
2299
2402
  --salt-taggable-cursor-active: pointer;
2300
2403
  --salt-taggable-cursor-disabled: not-allowed;
@@ -2442,6 +2545,10 @@
2442
2545
  --salt-color-black-fade-background-highlight: rgba(0, 0, 0, var(--salt-opacity-25));
2443
2546
  --salt-color-white-fade-background-selection: rgba(255, 255, 255, var(--salt-opacity-15));
2444
2547
  --salt-color-white-fade-background-highlight: rgba(255, 255, 255, var(--salt-opacity-25));
2548
+ --salt-color-white-15a: rgba(var(--salt-color-white-rgb), 0.15);
2549
+ --salt-color-white-45a: rgba(var(--salt-color-white-rgb), 0.45);
2550
+ --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
2551
+ --salt-color-black-45a: rgba(var(--salt-color-black-rgb), 0.45);
2445
2552
  }
2446
2553
 
2447
2554
  /* css/deprecated/foundations.css */
@@ -2554,6 +2661,11 @@
2554
2661
  --salt-palette-opacity-primary-border: var(--salt-opacity-45);
2555
2662
  --salt-palette-opacity-secondary-border: var(--salt-opacity-25);
2556
2663
  --salt-palette-opacity-tertiary-border: var(--salt-opacity-15);
2664
+ --salt-palette-alpha: var(--salt-palette-alpha-contrast-low);
2665
+ --salt-palette-alpha-strong: var(--salt-palette-alpha-contrast-mediumLow);
2666
+ --salt-palette-alpha-weak: var(--salt-palette-alpha-contrast-lower);
2667
+ --salt-palette-alpha-weaker: var(--salt-palette-alpha-contrast-lowest);
2668
+ --salt-palette-alpha-backdrop: var(--salt-palette-alpha-high);
2557
2669
  }
2558
2670
  .salt-theme[data-mode=light] {
2559
2671
  --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
@@ -2618,6 +2730,8 @@
2618
2730
  --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-20);
2619
2731
  --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
2620
2732
  --salt-palette-navigate-background-hover: var(--salt-color-black-fade-background-hover);
2733
+ --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600);
2734
+ --salt-palette-navigate-foreground-active: var(--salt-color-blue-700);
2621
2735
  --salt-palette-track-border: var(--salt-color-gray-90);
2622
2736
  --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
2623
2737
  --salt-palette-track-background: var(--salt-color-gray-60);
@@ -2691,6 +2805,8 @@
2691
2805
  --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-700);
2692
2806
  --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border);
2693
2807
  --salt-palette-navigate-background-hover: var(--salt-color-white-fade-background-hover);
2808
+ --salt-palette-navigate-foreground-hover: var(--salt-color-blue-200);
2809
+ --salt-palette-navigate-foreground-active: var(--salt-color-blue-300);
2694
2810
  --salt-palette-track-border: var(--salt-color-gray-90);
2695
2811
  --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
2696
2812
  --salt-palette-track-background: var(--salt-color-gray-300);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/theme",
3
- "version": "1.25.0",
3
+ "version": "1.27.0",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",