@deephaven/components 0.57.1-alpha-theming-bootstrap.2 → 0.57.1-beta.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 (30) hide show
  1. package/css/BaseStyleSheet.css +49 -45
  2. package/css/BaseStyleSheet.css.map +1 -1
  3. package/dist/AutoCompleteInput.css.map +1 -1
  4. package/dist/ComboBox.css.map +1 -1
  5. package/dist/CustomTimeSelect.css +0 -1
  6. package/dist/CustomTimeSelect.css.map +1 -1
  7. package/dist/DraggableItemList.css.map +1 -1
  8. package/dist/HierarchicalCheckboxMenu.css +0 -1
  9. package/dist/HierarchicalCheckboxMenu.css.map +1 -1
  10. package/dist/ItemList.css.map +1 -1
  11. package/dist/MaskedInput.css.map +1 -1
  12. package/dist/SelectValueList.css.map +1 -1
  13. package/dist/SocketedButton.css.map +1 -1
  14. package/dist/ThemeExport.module.css.map +1 -1
  15. package/dist/TimeSlider.css.map +1 -1
  16. package/dist/TimeSlider.module.css.map +1 -1
  17. package/dist/ToastNotification.css.map +1 -1
  18. package/dist/UISwitch.css.map +1 -1
  19. package/dist/context-actions/ContextActions.css.map +1 -1
  20. package/dist/menu-actions/DropdownMenu.css.map +1 -1
  21. package/dist/navigation/MenuItem.css.map +1 -1
  22. package/dist/navigation/Page.css.map +1 -1
  23. package/dist/navigation/Stack.css.map +1 -1
  24. package/dist/popper/Popper.css.map +1 -1
  25. package/package.json +7 -7
  26. package/scss/BaseStyleSheet.scss +0 -3
  27. package/scss/bootstrap_override_mixins_buttons.scss +1 -0
  28. package/scss/bootstrap_override_mixins_forms.scss +2 -5
  29. package/scss/bootstrap_override_mixins_text_emphasis.scss +10 -10
  30. package/scss/bootstrap_overrides.scss +0 -1
package/css/BaseStyleSheet.css CHANGED
@@ -1803,7 +1803,7 @@ textarea.form-control {
1803
1803
  width: 100%;
1804
1804
  margin-top: 0.25rem;
1805
1805
  font-size: 0.875em;
1806
- color: var(--dh-color-positive-bg);
1806
+ color: var(--dh-color-visual-success);
1807
1807
  }
1808
1808
 
1809
1809
  .valid-tooltip {
@@ -1817,8 +1817,8 @@ textarea.form-control {
1817
1817
  margin-top: 0.1rem;
1818
1818
  font-size: 0.875rem;
1819
1819
  line-height: 1.5;
1820
- color: var(--dh-color-positive-contrast, var(--dh-color-contrast-light));
1821
- background-color: var(--dh-color-positive-bg);
1820
+ color: var(--dh-color-success-contrast, var(--dh-color-contrast-light));
1821
+ background-color: var(--dh-color-visual-success);
1822
1822
  border-radius: 4px;
1823
1823
  }
1824
1824
  .form-row > .col > .valid-tooltip, .form-row > [class*=col-] > .valid-tooltip {
@@ -1833,7 +1833,7 @@ textarea.form-control {
1833
1833
  }
1834
1834
 
1835
1835
  .was-validated .form-control:valid, .form-control.is-valid {
1836
- border-color: var(--dh-color-positive-bg);
1836
+ border-color: var(--dh-color-visual-success);
1837
1837
  padding-right: calc(1.5em + 0.75rem) !important;
1838
1838
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='success' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
1839
1839
  background-repeat: no-repeat;
@@ -1841,7 +1841,7 @@ textarea.form-control {
1841
1841
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
1842
1842
  }
1843
1843
  .was-validated .form-control:valid:focus, .form-control.is-valid:focus {
1844
- border-color: var(--dh-color-positive-bg);
1844
+ border-color: var(--dh-color-visual-success);
1845
1845
  }
1846
1846
  .was-validated .form-control:valid:focus-visible, .form-control.is-valid:focus-visible {
1847
1847
  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
@@ -1858,19 +1858,19 @@ textarea.form-control {
1858
1858
  }
1859
1859
 
1860
1860
  .was-validated .custom-select:valid, .custom-select.is-valid {
1861
- border-color: var(--dh-color-positive-bg);
1861
+ border-color: var(--dh-color-visual-success);
1862
1862
  padding-right: calc(0.75em + 2.3125rem) !important;
1863
1863
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23929192' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E") right 0.75rem center/16px 16px no-repeat, var(--dh-color-input-bg) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='success' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat;
1864
1864
  }
1865
1865
  .was-validated .custom-select:valid:focus, .custom-select.is-valid:focus {
1866
- border-color: var(--dh-color-positive-bg);
1866
+ border-color: var(--dh-color-visual-success);
1867
1867
  }
1868
1868
  .was-validated .custom-select:valid:focus-visible, .custom-select.is-valid:focus-visible {
1869
1869
  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
1870
1870
  }
1871
1871
 
1872
1872
  .was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
1873
- color: var(--dh-color-positive-bg);
1873
+ color: var(--dh-color-visual-success);
1874
1874
  }
1875
1875
  .was-validated .form-check-input:valid ~ .valid-feedback,
1876
1876
  .was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback,
@@ -1879,27 +1879,27 @@ textarea.form-control {
1879
1879
  }
1880
1880
 
1881
1881
  .was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label {
1882
- color: var(--dh-color-positive-bg);
1882
+ color: var(--dh-color-visual-success);
1883
1883
  }
1884
1884
  .was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before {
1885
- border-color: var(--dh-color-positive-bg);
1885
+ border-color: var(--dh-color-visual-success);
1886
1886
  }
1887
1887
  .was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before {
1888
- border-color: var(--dh-color-positive-bg);
1889
- background-color: var(--dh-color-positive-bg);
1888
+ border-color: var(--dh-color-visual-success);
1889
+ background-color: var(--dh-color-visual-success);
1890
1890
  }
1891
1891
  .was-validated .custom-control-input:valid:focus-visible ~ .custom-control-label::before, .custom-control-input.is-valid:focus-visible ~ .custom-control-label::before {
1892
1892
  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
1893
1893
  }
1894
1894
  .was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before {
1895
- border-color: var(--dh-color-positive-bg);
1895
+ border-color: var(--dh-color-visual-success);
1896
1896
  }
1897
1897
 
1898
1898
  .was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label {
1899
- border-color: var(--dh-color-positive-bg);
1899
+ border-color: var(--dh-color-visual-success);
1900
1900
  }
1901
1901
  .was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label {
1902
- border-color: var(--dh-color-positive-bg);
1902
+ border-color: var(--dh-color-visual-success);
1903
1903
  }
1904
1904
  .was-validated .custom-file-input:valid:focus-visible ~ .custom-file-label, .custom-file-input.is-valid:focus-visible ~ .custom-file-label {
1905
1905
  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
@@ -1910,7 +1910,7 @@ textarea.form-control {
1910
1910
  width: 100%;
1911
1911
  margin-top: 0.25rem;
1912
1912
  font-size: 0.875em;
1913
- color: var(--dh-color-negative-bg);
1913
+ color: var(--dh-color-visual-danger);
1914
1914
  }
1915
1915
 
1916
1916
  .invalid-tooltip {
@@ -1924,8 +1924,8 @@ textarea.form-control {
1924
1924
  margin-top: 0.1rem;
1925
1925
  font-size: 0.875rem;
1926
1926
  line-height: 1.5;
1927
- color: var(--dh-color-negative-contrast, var(--dh-color-contrast-light));
1928
- background-color: var(--dh-color-negative-bg);
1927
+ color: var(--dh-color-danger-contrast, var(--dh-color-contrast-light));
1928
+ background-color: var(--dh-color-visual-danger);
1929
1929
  border-radius: 4px;
1930
1930
  }
1931
1931
  .form-row > .col > .invalid-tooltip, .form-row > [class*=col-] > .invalid-tooltip {
@@ -1940,7 +1940,7 @@ textarea.form-control {
1940
1940
  }
1941
1941
 
1942
1942
  .was-validated .form-control:invalid, .form-control.is-invalid {
1943
- border-color: var(--dh-color-negative-bg);
1943
+ border-color: var(--dh-color-visual-danger);
1944
1944
  padding-right: calc(1.5em + 0.75rem) !important;
1945
1945
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='var%28--dh-color-negative-bg%29'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E ");
1946
1946
  background-repeat: no-repeat;
@@ -1948,7 +1948,7 @@ textarea.form-control {
1948
1948
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
1949
1949
  }
1950
1950
  .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
1951
- border-color: var(--dh-color-negative-bg);
1951
+ border-color: var(--dh-color-visual-danger);
1952
1952
  }
1953
1953
  .was-validated .form-control:invalid:focus-visible, .form-control.is-invalid:focus-visible {
1954
1954
  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
@@ -1965,19 +1965,19 @@ textarea.form-control {
1965
1965
  }
1966
1966
 
1967
1967
  .was-validated .custom-select:invalid, .custom-select.is-invalid {
1968
- border-color: var(--dh-color-negative-bg);
1968
+ border-color: var(--dh-color-visual-danger);
1969
1969
  padding-right: calc(0.75em + 2.3125rem) !important;
1970
1970
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23929192' d='M4 7l-.4-.8 4-3.7h.8l4 3.7-.4.8H4zm0 2l-.4.8 4 3.7h.8l4-3.7L12 9H4z'/%3E%3C/svg%3E") right 0.75rem center/16px 16px no-repeat, var(--dh-color-input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg fill='none'%3E%3Cg fill='var%28--dh-color-negative-bg%29'%3E%3Cpath d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E ") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat;
1971
1971
  }
1972
1972
  .was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus {
1973
- border-color: var(--dh-color-negative-bg);
1973
+ border-color: var(--dh-color-visual-danger);
1974
1974
  }
1975
1975
  .was-validated .custom-select:invalid:focus-visible, .custom-select.is-invalid:focus-visible {
1976
1976
  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
1977
1977
  }
1978
1978
 
1979
1979
  .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
1980
- color: var(--dh-color-negative-bg);
1980
+ color: var(--dh-color-visual-danger);
1981
1981
  }
1982
1982
  .was-validated .form-check-input:invalid ~ .invalid-feedback,
1983
1983
  .was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback,
@@ -1986,27 +1986,27 @@ textarea.form-control {
1986
1986
  }
1987
1987
 
1988
1988
  .was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label {
1989
- color: var(--dh-color-negative-bg);
1989
+ color: var(--dh-color-visual-danger);
1990
1990
  }
1991
1991
  .was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before {
1992
- border-color: var(--dh-color-negative-bg);
1992
+ border-color: var(--dh-color-visual-danger);
1993
1993
  }
1994
1994
  .was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before {
1995
- border-color: var(--dh-color-negative-bg);
1996
- background-color: var(--dh-color-negative-bg);
1995
+ border-color: var(--dh-color-visual-danger);
1996
+ background-color: var(--dh-color-visual-danger);
1997
1997
  }
1998
1998
  .was-validated .custom-control-input:invalid:focus-visible ~ .custom-control-label::before, .custom-control-input.is-invalid:focus-visible ~ .custom-control-label::before {
1999
1999
  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
2000
2000
  }
2001
2001
  .was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before {
2002
- border-color: var(--dh-color-negative-bg);
2002
+ border-color: var(--dh-color-visual-danger);
2003
2003
  }
2004
2004
 
2005
2005
  .was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label {
2006
- border-color: var(--dh-color-negative-bg);
2006
+ border-color: var(--dh-color-visual-danger);
2007
2007
  }
2008
2008
  .was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label {
2009
- border-color: var(--dh-color-negative-bg);
2009
+ border-color: var(--dh-color-visual-danger);
2010
2010
  }
2011
2011
  .was-validated .custom-file-input:invalid:focus-visible ~ .custom-file-label, .custom-file-input.is-invalid:focus-visible ~ .custom-file-label {
2012
2012
  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
@@ -2071,7 +2071,7 @@ textarea.form-control {
2071
2071
 
2072
2072
  .btn {
2073
2073
  display: inline-block;
2074
- font-weight: var(--spectrum-global-font-weight-bold);
2074
+ font-weight: 400;
2075
2075
  color: var(--dh-color-white, #f0f0ee);
2076
2076
  text-align: center;
2077
2077
  vertical-align: middle;
@@ -2110,6 +2110,7 @@ fieldset:disabled a.btn {
2110
2110
 
2111
2111
  .btn-primary {
2112
2112
  color: var(--dh-color-accent-contrast);
2113
+ font-weight: var(--spectrum-global-font-weight-bold);
2113
2114
  background-color: var(--dh-color-accent-bg);
2114
2115
  border-color: var(--dh-color-accent-bg);
2115
2116
  }
@@ -2143,6 +2144,7 @@ fieldset:disabled a.btn {
2143
2144
 
2144
2145
  .btn-secondary {
2145
2146
  color: var(--dh-color-neutral-contrast);
2147
+ font-weight: var(--spectrum-global-font-weight-bold);
2146
2148
  background-color: var(--dh-color-neutral-bg);
2147
2149
  border-color: var(--dh-color-neutral-bg);
2148
2150
  }
@@ -2176,6 +2178,7 @@ fieldset:disabled a.btn {
2176
2178
 
2177
2179
  .btn-success {
2178
2180
  color: var(--dh-color-positive-contrast);
2181
+ font-weight: var(--spectrum-global-font-weight-bold);
2179
2182
  background-color: var(--dh-color-positive-bg);
2180
2183
  border-color: var(--dh-color-positive-bg);
2181
2184
  }
@@ -2209,6 +2212,7 @@ fieldset:disabled a.btn {
2209
2212
 
2210
2213
  .btn-info {
2211
2214
  color: var(--dh-color-info-contrast);
2215
+ font-weight: var(--spectrum-global-font-weight-bold);
2212
2216
  background-color: var(--dh-color-info-bg);
2213
2217
  border-color: var(--dh-color-info-bg);
2214
2218
  }
@@ -2242,6 +2246,7 @@ fieldset:disabled a.btn {
2242
2246
 
2243
2247
  .btn-warning {
2244
2248
  color: var(--dh-color-notice-contrast);
2249
+ font-weight: var(--spectrum-global-font-weight-bold);
2245
2250
  background-color: var(--dh-color-notice-bg);
2246
2251
  border-color: var(--dh-color-notice-bg);
2247
2252
  }
@@ -2275,6 +2280,7 @@ fieldset:disabled a.btn {
2275
2280
 
2276
2281
  .btn-danger {
2277
2282
  color: var(--dh-color-negative-contrast);
2283
+ font-weight: var(--spectrum-global-font-weight-bold);
2278
2284
  background-color: var(--dh-color-negative-bg);
2279
2285
  border-color: var(--dh-color-negative-bg);
2280
2286
  }
@@ -7950,51 +7956,51 @@ button.bg-danger:focus {
7950
7956
  }
7951
7957
 
7952
7958
  .text-primary {
7953
- color: var(--dh-color-accent-bg) !important;
7959
+ color: var(--spectrum-primary-visual-color) !important;
7954
7960
  }
7955
7961
 
7956
7962
  a.text-primary:hover, a.text-primary:focus {
7957
- color: var(--dh-color-accent-hover-bg) !important;
7963
+ color: var(--spectrum-primary-background-color-default) !important;
7958
7964
  }
7959
7965
 
7960
7966
  .text-secondary {
7961
- color: var(--dh-color-neutral-bg) !important;
7967
+ color: var(--spectrum-secondary-visual-color) !important;
7962
7968
  }
7963
7969
 
7964
7970
  a.text-secondary:hover, a.text-secondary:focus {
7965
- color: var(--dh-color-neutral-hover-bg) !important;
7971
+ color: var(--spectrum-secondary-background-color-default) !important;
7966
7972
  }
7967
7973
 
7968
7974
  .text-success {
7969
- color: var(--dh-color-positive-bg) !important;
7975
+ color: var(--spectrum-success-visual-color) !important;
7970
7976
  }
7971
7977
 
7972
7978
  a.text-success:hover, a.text-success:focus {
7973
- color: var(--dh-color-positive-hover-bg) !important;
7979
+ color: var(--spectrum-success-background-color-default) !important;
7974
7980
  }
7975
7981
 
7976
7982
  .text-info {
7977
- color: var(--dh-color-info-bg) !important;
7983
+ color: var(--spectrum-info-visual-color) !important;
7978
7984
  }
7979
7985
 
7980
7986
  a.text-info:hover, a.text-info:focus {
7981
- color: var(--dh-color-info-hover-bg) !important;
7987
+ color: var(--spectrum-info-background-color-default) !important;
7982
7988
  }
7983
7989
 
7984
7990
  .text-warning {
7985
- color: var(--dh-color-notice-bg) !important;
7991
+ color: var(--spectrum-warning-visual-color) !important;
7986
7992
  }
7987
7993
 
7988
7994
  a.text-warning:hover, a.text-warning:focus {
7989
- color: var(--dh-color-notice-hover-bg) !important;
7995
+ color: var(--spectrum-warning-background-color-default) !important;
7990
7996
  }
7991
7997
 
7992
7998
  .text-danger {
7993
- color: var(--dh-color-negative-bg) !important;
7999
+ color: var(--spectrum-danger-visual-color) !important;
7994
8000
  }
7995
8001
 
7996
8002
  a.text-danger:hover, a.text-danger:focus {
7997
- color: var(--dh-color-negative-hover-bg) !important;
8003
+ color: var(--spectrum-danger-background-color-default) !important;
7998
8004
  }
7999
8005
 
8000
8006
  .text-body {
@@ -8150,7 +8156,6 @@ button:focus {
8150
8156
 
8151
8157
  .btn {
8152
8158
  min-width: 7rem;
8153
- -webkit-font-smoothing: antialiased;
8154
8159
  }
8155
8160
 
8156
8161
  span.btn-disabled-wrapper {
@@ -8309,7 +8314,6 @@ span.btn-disabled-wrapper .btn:disabled {
8309
8314
  background: var(--dh-color-action-bg);
8310
8315
  border: 1px solid var(--dh-color-action-border);
8311
8316
  color: var(--dh-color-action-fg);
8312
- font-weight: 400;
8313
8317
  }
8314
8318
  .btn-inline.active {
8315
8319
  border-color: var(--dh-color-action-active-border);