@salt-ds/theme 1.26.0 → 1.28.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 +26 -54
  2. package/css/theme.css +122 -20
  3. package/index.css +122 -20
  4. package/package.json +1 -1
package/css/theme-next.css CHANGED
@@ -1,15 +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-20a: rgba(var(--salt-color-white-rgb), 0.2);
5
- --salt-color-white-30a: rgba(var(--salt-color-white-rgb), 0.3);
6
- --salt-color-white-40a: rgba(var(--salt-color-white-rgb), 0.4);
7
- --salt-color-white-70a: rgba(var(--salt-color-white-rgb), 0.7);
8
- --salt-color-black-10a: rgba(var(--salt-color-black-rgb), 0.1);
9
- --salt-color-black-20a: rgba(var(--salt-color-black-rgb), 0.2);
10
- --salt-color-black-30a: rgba(var(--salt-color-black-rgb), 0.3);
11
- --salt-color-black-40a: rgba(var(--salt-color-black-rgb), 0.4);
12
- --salt-color-black-70a: rgba(var(--salt-color-black-rgb), 0.7);
13
3
  --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
14
4
  --salt-color-blue-300-40a: rgba(var(--salt-color-blue-300-rgb), 0.4);
15
5
  --salt-color-blue-400-40a: rgba(var(--salt-color-blue-400-rgb), 0.4);
@@ -418,36 +408,6 @@
418
408
  --salt-color-logo-brown: rgb(var(--salt-color-logo-brown-rgb));
419
409
  }
420
410
 
421
- /* css/foundations/curve-next.css */
422
- .salt-density-high {
423
- --salt-curve-0: 0;
424
- --salt-curve-50: 1px;
425
- --salt-curve-100: 2px;
426
- --salt-curve-150: 3px;
427
- --salt-curve-999: 999px;
428
- }
429
- .salt-density-medium {
430
- --salt-curve-0: 0;
431
- --salt-curve-50: 2px;
432
- --salt-curve-100: 4px;
433
- --salt-curve-150: 6px;
434
- --salt-curve-999: 999px;
435
- }
436
- .salt-density-low {
437
- --salt-curve-0: 0;
438
- --salt-curve-50: 3px;
439
- --salt-curve-100: 6px;
440
- --salt-curve-150: 9px;
441
- --salt-curve-999: 999px;
442
- }
443
- .salt-density-touch {
444
- --salt-curve-0: 0;
445
- --salt-curve-50: 4px;
446
- --salt-curve-100: 8px;
447
- --salt-curve-150: 12px;
448
- --salt-curve-999: 999px;
449
- }
450
-
451
411
  /* css/palette/accent-next.css */
452
412
  .salt-theme.salt-theme-next[data-mode=light][data-accent=blue] {
453
413
  --salt-palette-accent: var(--salt-color-blue-500);
@@ -533,12 +493,16 @@
533
493
  --salt-palette-corner-weaker: var(--salt-curve-50);
534
494
  --salt-palette-corner-weak: var(--salt-curve-100);
535
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);
536
498
  --salt-palette-corner-strongest: var(--salt-curve-999);
537
499
  }
538
500
  .salt-theme-next[data-corner=sharp] {
539
501
  --salt-palette-corner-weaker: var(--salt-curve-0);
540
502
  --salt-palette-corner-weak: var(--salt-curve-0);
541
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);
542
506
  --salt-palette-corner-strongest: var(--salt-curve-999);
543
507
  }
544
508
 
@@ -931,16 +895,16 @@
931
895
  .salt-theme.salt-theme-next {
932
896
  --salt-container-primary-background: var(--salt-palette-background-primary);
933
897
  --salt-container-primary-background-disabled: var(--salt-palette-background-primary-disabled);
934
- --salt-container-primary-borderColor: var(--salt-palette-alpha);
935
- --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);
936
900
  --salt-container-secondary-background: var(--salt-palette-background-secondary);
937
901
  --salt-container-secondary-background-disabled: var(--salt-palette-background-secondary-disabled);
938
- --salt-container-secondary-borderColor: var(--salt-palette-alpha);
939
- --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);
940
904
  --salt-container-tertiary-background: var(--salt-palette-background-tertiary);
941
905
  --salt-container-tertiary-background-disabled: var(--salt-palette-background-tertiary-disabled);
942
- --salt-container-tertiary-borderColor: var(--salt-palette-alpha);
943
- --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);
944
908
  }
945
909
 
946
910
  /* css/characteristics/content-next.css */
@@ -950,6 +914,7 @@
950
914
  --salt-content-secondary-foreground: var(--salt-palette-foreground-secondary);
951
915
  --salt-content-secondary-foreground-disabled: var(--salt-palette-foreground-secondary-disabled);
952
916
  --salt-content-accent-foreground: var(--salt-palette-accent-strong);
917
+ --salt-content-attention-foreground: var(--salt-palette-negative-strong);
953
918
  --salt-content-bold-foreground: var(--salt-palette-foreground-primary-alt);
954
919
  --salt-content-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
955
920
  --salt-content-foreground-hover: var(--salt-palette-accent-strong);
@@ -990,9 +955,9 @@
990
955
 
991
956
  /* css/characteristics/overlayable-next.css */
992
957
  .salt-theme.salt-theme-next {
993
- --salt-overlayable-background: var(--salt-palette-alpha-backdrop);
994
- --salt-overlayable-background-highlight: var(--salt-palette-alpha);
995
- --salt-overlayable-rangeSelection: var(--salt-palette-alpha-weak);
958
+ --salt-overlayable-background: var(--salt-palette-alpha-high);
959
+ --salt-overlayable-background-highlight: var(--salt-palette-alpha-contrast-low);
960
+ --salt-overlayable-rangeSelection: var(--salt-palette-alpha-contrast-lower);
996
961
  }
997
962
 
998
963
  /* css/characteristics/selectable-next.css */
@@ -1018,9 +983,16 @@
1018
983
 
1019
984
  /* css/characteristics/separable-next.css */
1020
985
  .salt-theme.salt-theme-next {
1021
- --salt-separable-primary-borderColor: var(--salt-palette-alpha-strong);
1022
- --salt-separable-secondary-borderColor: var(--salt-palette-alpha);
1023
- --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-weak);
986
+ --salt-separable-borderStyle: solid;
987
+ --salt-separable-primary-borderColor: var(--salt-palette-alpha-contrast-mediumLow);
988
+ --salt-separable-secondary-borderColor: var(--salt-palette-alpha-contrast-low);
989
+ --salt-separable-tertiary-borderColor: var(--salt-palette-alpha-contrast-lower);
990
+ --salt-separable-foreground: var(--salt-palette-foreground-primary);
991
+ --salt-separable-foreground-hover: var(--salt-palette-foreground-primary);
992
+ --salt-separable-foreground-active: var(--salt-palette-foreground-primary-alt);
993
+ --salt-separable-background: var(--salt-palette-alpha-none);
994
+ --salt-separable-background-hover: var(--salt-palette-alpha-weak);
995
+ --salt-separable-background-active: var(--salt-palette-accent);
1024
996
  }
1025
997
 
1026
998
  /* css/characteristics/status-next.css */
@@ -1103,8 +1075,8 @@
1103
1075
 
1104
1076
  /* css/characteristics/track-next.css */
1105
1077
  .salt-theme.salt-theme-next {
1106
- --salt-track-borderColor: var(--salt-palette-alpha-weak);
1107
- --salt-track-borderColor-disabled: var(--salt-palette-alpha-weaker);
1078
+ --salt-track-borderColor: var(--salt-palette-alpha-contrast-lower);
1079
+ --salt-track-borderColor-disabled: var(--salt-palette-alpha-contrast-lowest);
1108
1080
  }
1109
1081
 
1110
1082
  /* css/deprecated/foundations-next.css */
package/css/theme.css CHANGED
@@ -4,12 +4,20 @@
4
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-50a: rgba(var(--salt-color-white-rgb), 0.5);
8
+ --salt-color-white-60a: rgba(var(--salt-color-white-rgb), 0.6);
7
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);
8
12
  --salt-color-black-10a: rgba(var(--salt-color-black-rgb), 0.1);
9
13
  --salt-color-black-20a: rgba(var(--salt-color-black-rgb), 0.2);
10
14
  --salt-color-black-30a: rgba(var(--salt-color-black-rgb), 0.3);
11
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);
12
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);
13
21
  --salt-color-blue-30-40a: rgba(var(--salt-color-blue-30-rgb), 0.4);
14
22
  --salt-color-blue-100-40a: rgba(var(--salt-color-blue-100-rgb), 0.4);
15
23
  --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
@@ -896,6 +904,44 @@
896
904
  --salt-color-forest-900: rgb(0, 51, 31);
897
905
  }
898
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
+
899
945
  /* css/foundations/duration.css */
900
946
  .salt-theme {
901
947
  --salt-duration-instant: 0ms;
@@ -1027,6 +1073,8 @@
1027
1073
  --salt-typography-fontWeight-semiBold: 600;
1028
1074
  --salt-typography-fontWeight-bold: 700;
1029
1075
  --salt-typography-fontWeight-extraBold: 800;
1076
+ --salt-typography-textDecoration-none: none;
1077
+ --salt-typography-textDecoration-underline: underline;
1030
1078
  }
1031
1079
 
1032
1080
  /* css/foundations/zindex.css */
@@ -1047,19 +1095,45 @@
1047
1095
 
1048
1096
  /* css/palette/alpha.css */
1049
1097
  .salt-theme[data-mode=light] {
1050
- --salt-palette-alpha: var(--salt-color-black-30a);
1051
- --salt-palette-alpha-strong: var(--salt-color-black-40a);
1052
- --salt-palette-alpha-weak: var(--salt-color-black-20a);
1053
- --salt-palette-alpha-weaker: var(--salt-color-black-10a);
1054
- --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);
1055
1116
  --salt-palette-alpha-none: transparent;
1056
1117
  }
1057
1118
  .salt-theme[data-mode=dark] {
1058
- --salt-palette-alpha: var(--salt-color-white-30a);
1059
- --salt-palette-alpha-strong: var(--salt-color-white-40a);
1060
- --salt-palette-alpha-weak: var(--salt-color-white-20a);
1061
- --salt-palette-alpha-weaker: var(--salt-color-white-10a);
1062
- --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);
1063
1137
  --salt-palette-alpha-none: transparent;
1064
1138
  }
1065
1139
 
@@ -1223,6 +1297,16 @@
1223
1297
  --salt-palette-categorical-20-weakest: var(--salt-color-forest-900);
1224
1298
  }
1225
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
+
1226
1310
  /* css/palette/info.css */
1227
1311
  .salt-theme[data-mode=light] {
1228
1312
  --salt-palette-info-background: var(--salt-color-blue-10);
@@ -1432,6 +1516,8 @@
1432
1516
  --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
1433
1517
  --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-openSans);
1434
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);
1435
1521
  --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
1436
1522
  --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
1437
1523
  --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
@@ -1795,6 +1881,8 @@
1795
1881
  --salt-container-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
1796
1882
  --salt-container-tertiary-borderColor: var(--salt-palette-neutral-border);
1797
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);
1798
1886
  }
1799
1887
 
1800
1888
  /* css/characteristics/draggable.css */
@@ -1880,9 +1968,6 @@
1880
1968
  --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
1881
1969
  --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
1882
1970
  --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
1883
- --salt-navigable-textDecoration: underline;
1884
- --salt-navigable-textDecoration-hover: none;
1885
- --salt-navigable-textDecoration-selected: underline;
1886
1971
  }
1887
1972
 
1888
1973
  /* css/characteristics/overlayable.css */
@@ -1894,9 +1979,9 @@
1894
1979
  --salt-overlayable-shadow-popout: var(--salt-shadow-400);
1895
1980
  --salt-overlayable-shadow-drag: var(--salt-shadow-400);
1896
1981
  --salt-overlayable-shadow-modal: var(--salt-shadow-500);
1897
- --salt-overlayable-background: var(--salt-palette-alpha-backdrop);
1898
- --salt-overlayable-background-highlight: var(--salt-palette-alpha);
1899
- --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);
1900
1985
  }
1901
1986
 
1902
1987
  /* css/characteristics/selectable.css */
@@ -1932,9 +2017,15 @@
1932
2017
  /* css/characteristics/separable.css */
1933
2018
  .salt-theme {
1934
2019
  --salt-separable-borderStyle: solid;
1935
- --salt-separable-primary-borderColor: var(--salt-palette-alpha-strong);
1936
- --salt-separable-secondary-borderColor: var(--salt-palette-alpha);
1937
- --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);
1938
2029
  }
1939
2030
 
1940
2031
  /* css/characteristics/status.css */
@@ -1972,13 +2063,14 @@
1972
2063
  --salt-text-letterSpacing: 0;
1973
2064
  --salt-text-textAlign: left;
1974
2065
  --salt-text-textAlign-embedded: center;
1975
- --salt-text-textDecoration: none;
1976
2066
  --salt-text-textTransform: none;
1977
2067
  --salt-text-action-fontFamily: var(--salt-palette-text-fontFamily-action);
1978
2068
  --salt-text-action-letterSpacing: 0.6px;
1979
2069
  --salt-text-action-textTransform: uppercase;
1980
2070
  --salt-text-action-textAlign: center;
1981
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);
1982
2074
  --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
1983
2075
  --salt-text-fontWeight: var(--salt-palette-text-body-fontWeight);
1984
2076
  --salt-text-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
@@ -2133,6 +2225,7 @@
2133
2225
  --salt-content-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
2134
2226
  --salt-content-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
2135
2227
  --salt-content-accent-foreground: var(--salt-palette-accent-foreground-informative);
2228
+ --salt-content-attention-foreground: var(--salt-palette-negative-foreground);
2136
2229
  --salt-content-bold-foreground: var(--salt-palette-interact-cta-foreground);
2137
2230
  --salt-content-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
2138
2231
  --salt-content-foreground-hover: var(--salt-palette-accent-foreground-informative);
@@ -2252,6 +2345,7 @@
2252
2345
  --salt-text-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
2253
2346
  --salt-text-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
2254
2347
  --salt-text-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
2348
+ --salt-text-textDecoration: var(--salt-typography-textDecoration-none);
2255
2349
  --salt-navigable-primary-background: var(--salt-palette-navigate-primary-background);
2256
2350
  --salt-navigable-primary-background-hover: var(--salt-palette-navigate-primary-background-hover);
2257
2351
  --salt-navigable-primary-background-active: var(--salt-palette-navigate-primary-background-active);
@@ -2263,6 +2357,9 @@
2263
2357
  --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active);
2264
2358
  --salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);
2265
2359
  --salt-navigable-background-hover: var(--salt-palette-navigate-background-hover);
2360
+ --salt-navigable-textDecoration: var(--salt-typography-textDecoration-underline);
2361
+ --salt-navigable-textDecoration-hover: var(--salt-typography-textDecoration-none);
2362
+ --salt-navigable-textDecoration-selected: var(--salt-typography-textDecoration-underline);
2266
2363
  --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
2267
2364
  --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
2268
2365
  --salt-track-borderWidth: 2px;
@@ -2536,6 +2633,11 @@
2536
2633
  --salt-palette-opacity-primary-border: var(--salt-opacity-45);
2537
2634
  --salt-palette-opacity-secondary-border: var(--salt-opacity-25);
2538
2635
  --salt-palette-opacity-tertiary-border: var(--salt-opacity-15);
2636
+ --salt-palette-alpha: var(--salt-palette-alpha-contrast-low);
2637
+ --salt-palette-alpha-strong: var(--salt-palette-alpha-contrast-mediumLow);
2638
+ --salt-palette-alpha-weak: var(--salt-palette-alpha-contrast-lower);
2639
+ --salt-palette-alpha-weaker: var(--salt-palette-alpha-contrast-lowest);
2640
+ --salt-palette-alpha-backdrop: var(--salt-palette-alpha-high);
2539
2641
  }
2540
2642
  .salt-theme[data-mode=light] {
2541
2643
  --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
package/index.css CHANGED
@@ -33,12 +33,20 @@
33
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-50a: rgba(var(--salt-color-white-rgb), 0.5);
37
+ --salt-color-white-60a: rgba(var(--salt-color-white-rgb), 0.6);
36
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);
37
41
  --salt-color-black-10a: rgba(var(--salt-color-black-rgb), 0.1);
38
42
  --salt-color-black-20a: rgba(var(--salt-color-black-rgb), 0.2);
39
43
  --salt-color-black-30a: rgba(var(--salt-color-black-rgb), 0.3);
40
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);
41
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);
42
50
  --salt-color-blue-30-40a: rgba(var(--salt-color-blue-30-rgb), 0.4);
43
51
  --salt-color-blue-100-40a: rgba(var(--salt-color-blue-100-rgb), 0.4);
44
52
  --salt-color-blue-200-40a: rgba(var(--salt-color-blue-200-rgb), 0.4);
@@ -925,6 +933,44 @@
925
933
  --salt-color-forest-900: rgb(0, 51, 31);
926
934
  }
927
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
+
928
974
  /* css/foundations/duration.css */
929
975
  .salt-theme {
930
976
  --salt-duration-instant: 0ms;
@@ -1056,6 +1102,8 @@
1056
1102
  --salt-typography-fontWeight-semiBold: 600;
1057
1103
  --salt-typography-fontWeight-bold: 700;
1058
1104
  --salt-typography-fontWeight-extraBold: 800;
1105
+ --salt-typography-textDecoration-none: none;
1106
+ --salt-typography-textDecoration-underline: underline;
1059
1107
  }
1060
1108
 
1061
1109
  /* css/foundations/zindex.css */
@@ -1076,19 +1124,45 @@
1076
1124
 
1077
1125
  /* css/palette/alpha.css */
1078
1126
  .salt-theme[data-mode=light] {
1079
- --salt-palette-alpha: var(--salt-color-black-30a);
1080
- --salt-palette-alpha-strong: var(--salt-color-black-40a);
1081
- --salt-palette-alpha-weak: var(--salt-color-black-20a);
1082
- --salt-palette-alpha-weaker: var(--salt-color-black-10a);
1083
- --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);
1084
1145
  --salt-palette-alpha-none: transparent;
1085
1146
  }
1086
1147
  .salt-theme[data-mode=dark] {
1087
- --salt-palette-alpha: var(--salt-color-white-30a);
1088
- --salt-palette-alpha-strong: var(--salt-color-white-40a);
1089
- --salt-palette-alpha-weak: var(--salt-color-white-20a);
1090
- --salt-palette-alpha-weaker: var(--salt-color-white-10a);
1091
- --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);
1092
1166
  --salt-palette-alpha-none: transparent;
1093
1167
  }
1094
1168
 
@@ -1252,6 +1326,16 @@
1252
1326
  --salt-palette-categorical-20-weakest: var(--salt-color-forest-900);
1253
1327
  }
1254
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
+
1255
1339
  /* css/palette/info.css */
1256
1340
  .salt-theme[data-mode=light] {
1257
1341
  --salt-palette-info-background: var(--salt-color-blue-10);
@@ -1461,6 +1545,8 @@
1461
1545
  --salt-palette-text-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
1462
1546
  --salt-palette-text-fontFamily-action: var(--salt-typography-fontFamily-openSans);
1463
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);
1464
1550
  --salt-palette-text-display-fontWeight: var(--salt-typography-fontWeight-semiBold);
1465
1551
  --salt-palette-text-display-fontWeight-small: var(--salt-typography-fontWeight-regular);
1466
1552
  --salt-palette-text-display-fontWeight-strong: var(--salt-typography-fontWeight-bold);
@@ -1824,6 +1910,8 @@
1824
1910
  --salt-container-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
1825
1911
  --salt-container-tertiary-borderColor: var(--salt-palette-neutral-border);
1826
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);
1827
1915
  }
1828
1916
 
1829
1917
  /* css/characteristics/draggable.css */
@@ -1909,9 +1997,6 @@
1909
1997
  --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
1910
1998
  --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
1911
1999
  --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
1912
- --salt-navigable-textDecoration: underline;
1913
- --salt-navigable-textDecoration-hover: none;
1914
- --salt-navigable-textDecoration-selected: underline;
1915
2000
  }
1916
2001
 
1917
2002
  /* css/characteristics/overlayable.css */
@@ -1923,9 +2008,9 @@
1923
2008
  --salt-overlayable-shadow-popout: var(--salt-shadow-400);
1924
2009
  --salt-overlayable-shadow-drag: var(--salt-shadow-400);
1925
2010
  --salt-overlayable-shadow-modal: var(--salt-shadow-500);
1926
- --salt-overlayable-background: var(--salt-palette-alpha-backdrop);
1927
- --salt-overlayable-background-highlight: var(--salt-palette-alpha);
1928
- --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);
1929
2014
  }
1930
2015
 
1931
2016
  /* css/characteristics/selectable.css */
@@ -1961,9 +2046,15 @@
1961
2046
  /* css/characteristics/separable.css */
1962
2047
  .salt-theme {
1963
2048
  --salt-separable-borderStyle: solid;
1964
- --salt-separable-primary-borderColor: var(--salt-palette-alpha-strong);
1965
- --salt-separable-secondary-borderColor: var(--salt-palette-alpha);
1966
- --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);
1967
2058
  }
1968
2059
 
1969
2060
  /* css/characteristics/status.css */
@@ -2001,13 +2092,14 @@
2001
2092
  --salt-text-letterSpacing: 0;
2002
2093
  --salt-text-textAlign: left;
2003
2094
  --salt-text-textAlign-embedded: center;
2004
- --salt-text-textDecoration: none;
2005
2095
  --salt-text-textTransform: none;
2006
2096
  --salt-text-action-fontFamily: var(--salt-palette-text-fontFamily-action);
2007
2097
  --salt-text-action-letterSpacing: 0.6px;
2008
2098
  --salt-text-action-textTransform: uppercase;
2009
2099
  --salt-text-action-textAlign: center;
2010
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);
2011
2103
  --salt-text-fontFamily: var(--salt-palette-text-fontFamily);
2012
2104
  --salt-text-fontWeight: var(--salt-palette-text-body-fontWeight);
2013
2105
  --salt-text-fontWeight-small: var(--salt-palette-text-body-fontWeight-small);
@@ -2162,6 +2254,7 @@
2162
2254
  --salt-content-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
2163
2255
  --salt-content-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
2164
2256
  --salt-content-accent-foreground: var(--salt-palette-accent-foreground-informative);
2257
+ --salt-content-attention-foreground: var(--salt-palette-negative-foreground);
2165
2258
  --salt-content-bold-foreground: var(--salt-palette-interact-cta-foreground);
2166
2259
  --salt-content-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled);
2167
2260
  --salt-content-foreground-hover: var(--salt-palette-accent-foreground-informative);
@@ -2281,6 +2374,7 @@
2281
2374
  --salt-text-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
2282
2375
  --salt-text-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
2283
2376
  --salt-text-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
2377
+ --salt-text-textDecoration: var(--salt-typography-textDecoration-none);
2284
2378
  --salt-navigable-primary-background: var(--salt-palette-navigate-primary-background);
2285
2379
  --salt-navigable-primary-background-hover: var(--salt-palette-navigate-primary-background-hover);
2286
2380
  --salt-navigable-primary-background-active: var(--salt-palette-navigate-primary-background-active);
@@ -2292,6 +2386,9 @@
2292
2386
  --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active);
2293
2387
  --salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);
2294
2388
  --salt-navigable-background-hover: var(--salt-palette-navigate-background-hover);
2389
+ --salt-navigable-textDecoration: var(--salt-typography-textDecoration-underline);
2390
+ --salt-navigable-textDecoration-hover: var(--salt-typography-textDecoration-none);
2391
+ --salt-navigable-textDecoration-selected: var(--salt-typography-textDecoration-underline);
2295
2392
  --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
2296
2393
  --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
2297
2394
  --salt-track-borderWidth: 2px;
@@ -2565,6 +2662,11 @@
2565
2662
  --salt-palette-opacity-primary-border: var(--salt-opacity-45);
2566
2663
  --salt-palette-opacity-secondary-border: var(--salt-opacity-25);
2567
2664
  --salt-palette-opacity-tertiary-border: var(--salt-opacity-15);
2665
+ --salt-palette-alpha: var(--salt-palette-alpha-contrast-low);
2666
+ --salt-palette-alpha-strong: var(--salt-palette-alpha-contrast-mediumLow);
2667
+ --salt-palette-alpha-weak: var(--salt-palette-alpha-contrast-lower);
2668
+ --salt-palette-alpha-weaker: var(--salt-palette-alpha-contrast-lowest);
2669
+ --salt-palette-alpha-backdrop: var(--salt-palette-alpha-high);
2568
2670
  }
2569
2671
  .salt-theme[data-mode=light] {
2570
2672
  --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/theme",
3
- "version": "1.26.0",
3
+ "version": "1.28.0",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",