@salt-ds/theme 1.20.0 → 1.21.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 +2 -0
  2. package/css/theme.css +14 -13
  3. package/index.css +14 -13
  4. package/package.json +1 -1
package/css/theme-next.css CHANGED
@@ -786,6 +786,8 @@
786
786
  --salt-container-secondary-borderColor-disabled: var(--salt-palette-alpha-weaker);
787
787
  --salt-container-tertiary-background: var(--salt-palette-background-tertiary);
788
788
  --salt-container-tertiary-background-disabled: var(--salt-palette-background-tertiary-disabled);
789
+ --salt-container-tertiary-borderColor: var(--salt-palette-alpha);
790
+ --salt-container-tertiary-borderColor-disabled: var(--salt-palette-alpha-weaker);
789
791
  }
790
792
 
791
793
  /* css/characteristics/content-next.css */
package/css/theme.css CHANGED
@@ -477,6 +477,8 @@
477
477
  --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
478
478
  --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-disabled));
479
479
  --salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-disabled));
480
+ --salt-color-gray-30-fade-background: rgba(224, 228, 233, var(--salt-palette-opacity-disabled));
481
+ --salt-color-gray-50-fade-background: rgba(206, 210, 217, var(--salt-palette-opacity-disabled));
480
482
  --salt-color-gray-60-fade-background: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
481
483
  --salt-color-gray-70-fade-background: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
482
484
  --salt-color-gray-200-fade-background: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
@@ -954,6 +956,10 @@
954
956
  --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
955
957
  --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
956
958
  --salt-palette-neutral-selection: var(--salt-color-black-fade-background-selection);
959
+ --salt-palette-neutral-tertiary-background: var(--salt-color-gray-30);
960
+ --salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-30-fade-background);
961
+ --salt-palette-neutral-tertiary-border: var(--salt-color-gray-50);
962
+ --salt-palette-neutral-tertiary-border-disabled: var(--salt-color-gray-50-fade-background);
957
963
  }
958
964
  .salt-theme[data-mode=dark] {
959
965
  --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
@@ -975,6 +981,10 @@
975
981
  --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
976
982
  --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
977
983
  --salt-palette-neutral-selection: var(--salt-color-white-fade-background-selection);
984
+ --salt-palette-neutral-tertiary-background: var(--salt-color-gray-500);
985
+ --salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-500-fade-background);
986
+ --salt-palette-neutral-tertiary-border: var(--salt-color-gray-300);
987
+ --salt-palette-neutral-tertiary-border-disabled: var(--salt-color-gray-300-fade-background);
978
988
  }
979
989
 
980
990
  /* css/palette/opacity.css */
@@ -1218,6 +1228,10 @@
1218
1228
  --salt-container-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
1219
1229
  --salt-container-secondary-borderColor: var(--salt-palette-neutral-secondary-border);
1220
1230
  --salt-container-secondary-borderColor-disabled: var(--salt-palette-neutral-secondary-border-disabled);
1231
+ --salt-container-tertiary-background: var(--salt-palette-neutral-tertiary-background);
1232
+ --salt-container-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
1233
+ --salt-container-tertiary-borderColor: var(--salt-palette-neutral-tertiary-border);
1234
+ --salt-container-tertiary-borderColor-disabled: var(--salt-palette-neutral-tertiary-border-disabled);
1221
1235
  }
1222
1236
 
1223
1237
  /* css/characteristics/draggable.css */
@@ -1707,10 +1721,6 @@
1707
1721
  --salt-taggable-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1708
1722
  --salt-taggable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1709
1723
  --salt-taggable-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
1710
- --salt-container-tertiary-background: transparent;
1711
- --salt-container-tertiary-background-disabled: transparent;
1712
- --salt-container-tertiary-borderColor: transparent;
1713
- --salt-container-tertiary-borderColor-disabled: transparent;
1714
1724
  }
1715
1725
  .salt-density-high {
1716
1726
  --salt-accent-fontSize: 8px;
@@ -1789,7 +1799,6 @@
1789
1799
  --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
1790
1800
  --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
1791
1801
  --salt-size-separator-strokeWidth: 1px;
1792
- --salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
1793
1802
  --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
1794
1803
  --salt-size-sharktooth-height: 5px;
1795
1804
  --salt-size-sharktooth-width: 10px;
@@ -1857,10 +1866,6 @@
1857
1866
  --salt-palette-measured-border: var(--salt-color-gray-90);
1858
1867
  --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
1859
1868
  --salt-palette-neutral-tertiary-background-readonly: transparent;
1860
- --salt-palette-neutral-tertiary-background: transparent;
1861
- --salt-palette-neutral-tertiary-background-disabled: transparent;
1862
- --salt-palette-neutral-tertiary-border: transparent;
1863
- --salt-palette-neutral-tertiary-border-disabled: transparent;
1864
1869
  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1865
1870
  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1866
1871
  --salt-palette-error-foreground: var(--salt-color-red-500);
@@ -1913,10 +1918,6 @@
1913
1918
  --salt-palette-measured-border: var(--salt-color-gray-90);
1914
1919
  --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
1915
1920
  --salt-palette-neutral-tertiary-background-readonly: transparent;
1916
- --salt-palette-neutral-tertiary-background: transparent;
1917
- --salt-palette-neutral-tertiary-background-disabled: transparent;
1918
- --salt-palette-neutral-tertiary-border: transparent;
1919
- --salt-palette-neutral-tertiary-border-disabled: transparent;
1920
1921
  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1921
1922
  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1922
1923
  --salt-palette-error-foreground: var(--salt-color-red-500);
package/index.css CHANGED
@@ -506,6 +506,8 @@
506
506
  --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
507
507
  --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-disabled));
508
508
  --salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-disabled));
509
+ --salt-color-gray-30-fade-background: rgba(224, 228, 233, var(--salt-palette-opacity-disabled));
510
+ --salt-color-gray-50-fade-background: rgba(206, 210, 217, var(--salt-palette-opacity-disabled));
509
511
  --salt-color-gray-60-fade-background: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
510
512
  --salt-color-gray-70-fade-background: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
511
513
  --salt-color-gray-200-fade-background: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
@@ -983,6 +985,10 @@
983
985
  --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
984
986
  --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
985
987
  --salt-palette-neutral-selection: var(--salt-color-black-fade-background-selection);
988
+ --salt-palette-neutral-tertiary-background: var(--salt-color-gray-30);
989
+ --salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-30-fade-background);
990
+ --salt-palette-neutral-tertiary-border: var(--salt-color-gray-50);
991
+ --salt-palette-neutral-tertiary-border-disabled: var(--salt-color-gray-50-fade-background);
986
992
  }
987
993
  .salt-theme[data-mode=dark] {
988
994
  --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
@@ -1004,6 +1010,10 @@
1004
1010
  --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
1005
1011
  --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
1006
1012
  --salt-palette-neutral-selection: var(--salt-color-white-fade-background-selection);
1013
+ --salt-palette-neutral-tertiary-background: var(--salt-color-gray-500);
1014
+ --salt-palette-neutral-tertiary-background-disabled: var(--salt-color-gray-500-fade-background);
1015
+ --salt-palette-neutral-tertiary-border: var(--salt-color-gray-300);
1016
+ --salt-palette-neutral-tertiary-border-disabled: var(--salt-color-gray-300-fade-background);
1007
1017
  }
1008
1018
 
1009
1019
  /* css/palette/opacity.css */
@@ -1247,6 +1257,10 @@
1247
1257
  --salt-container-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
1248
1258
  --salt-container-secondary-borderColor: var(--salt-palette-neutral-secondary-border);
1249
1259
  --salt-container-secondary-borderColor-disabled: var(--salt-palette-neutral-secondary-border-disabled);
1260
+ --salt-container-tertiary-background: var(--salt-palette-neutral-tertiary-background);
1261
+ --salt-container-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
1262
+ --salt-container-tertiary-borderColor: var(--salt-palette-neutral-tertiary-border);
1263
+ --salt-container-tertiary-borderColor-disabled: var(--salt-palette-neutral-tertiary-border-disabled);
1250
1264
  }
1251
1265
 
1252
1266
  /* css/characteristics/draggable.css */
@@ -1736,10 +1750,6 @@
1736
1750
  --salt-taggable-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1737
1751
  --salt-taggable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1738
1752
  --salt-taggable-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
1739
- --salt-container-tertiary-background: transparent;
1740
- --salt-container-tertiary-background-disabled: transparent;
1741
- --salt-container-tertiary-borderColor: transparent;
1742
- --salt-container-tertiary-borderColor-disabled: transparent;
1743
1753
  }
1744
1754
  .salt-density-high {
1745
1755
  --salt-accent-fontSize: 8px;
@@ -1818,7 +1828,6 @@
1818
1828
  --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
1819
1829
  --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
1820
1830
  --salt-size-separator-strokeWidth: 1px;
1821
- --salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
1822
1831
  --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
1823
1832
  --salt-size-sharktooth-height: 5px;
1824
1833
  --salt-size-sharktooth-width: 10px;
@@ -1886,10 +1895,6 @@
1886
1895
  --salt-palette-measured-border: var(--salt-color-gray-90);
1887
1896
  --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
1888
1897
  --salt-palette-neutral-tertiary-background-readonly: transparent;
1889
- --salt-palette-neutral-tertiary-background: transparent;
1890
- --salt-palette-neutral-tertiary-background-disabled: transparent;
1891
- --salt-palette-neutral-tertiary-border: transparent;
1892
- --salt-palette-neutral-tertiary-border-disabled: transparent;
1893
1898
  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1894
1899
  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1895
1900
  --salt-palette-error-foreground: var(--salt-color-red-500);
@@ -1942,10 +1947,6 @@
1942
1947
  --salt-palette-measured-border: var(--salt-color-gray-90);
1943
1948
  --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
1944
1949
  --salt-palette-neutral-tertiary-background-readonly: transparent;
1945
- --salt-palette-neutral-tertiary-background: transparent;
1946
- --salt-palette-neutral-tertiary-background-disabled: transparent;
1947
- --salt-palette-neutral-tertiary-border: transparent;
1948
- --salt-palette-neutral-tertiary-border-disabled: transparent;
1949
1950
  --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1950
1951
  --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1951
1952
  --salt-palette-error-foreground: var(--salt-color-red-500);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/theme",
3
- "version": "1.20.0",
3
+ "version": "1.21.0",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",