@deephaven/components 0.58.1-beta.9 → 0.59.0

package/css/BaseStyleSheet.css

@@ -1,5 +1,6 @@
 @charset "UTF-8";
 /* stylelint-disable scss/at-import-no-partial-leading-underscore */
+/* stylelint-disable-next-line number-max-precision */
 /*!
  * Bootstrap v4.6.2 (https://getbootstrap.com/)
  * Copyright 2011-2022 The Bootstrap Authors
@@ -162,7 +163,7 @@ a {
   background-color: transparent;
 }
 a:hover {
-  color: var(--dh-color-fg);
+  color: var(--dh-color-fg, #f0f0ee);
   text-decoration: underline;
 }
 
@@ -1623,8 +1624,8 @@ pre code {
 .form-control {
   display: block;
   width: 100%;
-  height: calc(1.3em + 0.8428rem + 2px);
-  padding: 0.4214rem 0.75rem;
+  height: calc(1.3em + 0.8429rem + 2px);
+  padding: 0.42145rem 0.75rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.3;
@@ -1683,8 +1684,8 @@ select.form-control:focus::-ms-value {
 }
 
 .col-form-label {
-  padding-top: calc(0.4214rem + 1px);
-  padding-bottom: calc(0.4214rem + 1px);
+  padding-top: calc(0.42145rem + 1px);
+  padding-bottom: calc(0.42145rem + 1px);
   margin-bottom: 0;
   font-size: inherit;
   line-height: 1.3;
@@ -1707,7 +1708,7 @@ select.form-control:focus::-ms-value {
 .form-control-plaintext {
   display: block;
   width: 100%;
-  padding: 0.4214rem 0;
+  padding: 0.42145rem 0;
   margin-bottom: 0;
   font-size: 1rem;
   line-height: 1.3;
@@ -1834,11 +1835,11 @@ textarea.form-control {
 
 .was-validated .form-control:valid, .form-control.is-valid {
   border-color: var(--dh-color-positive-bg);
-  padding-right: calc(1.3em + 0.8428rem) !important;
+  padding-right: calc(1.3em + 0.8429rem) !important;
   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");
   background-repeat: no-repeat;
-  background-position: right calc(0.325em + 0.2107rem) center;
-  background-size: calc(0.65em + 0.4214rem) calc(0.65em + 0.4214rem);
+  background-position: right calc(0.325em + 0.210725rem) center;
+  background-size: calc(0.65em + 0.42145rem) calc(0.65em + 0.42145rem);
 }
 .was-validated .form-control:valid:focus, .form-control.is-valid:focus {
   border-color: var(--dh-color-positive-bg);
@@ -1853,14 +1854,14 @@ textarea.form-control {
 }
 
 .was-validated textarea.form-control:valid, textarea.form-control.is-valid {
-  padding-right: calc(1.3em + 0.8428rem);
-  background-position: top calc(0.325em + 0.2107rem) right calc(0.325em + 0.2107rem);
+  padding-right: calc(1.3em + 0.8429rem);
+  background-position: top calc(0.325em + 0.210725rem) right calc(0.325em + 0.210725rem);
 }
 
 .was-validated .custom-select:valid, .custom-select.is-valid {
   border-color: var(--dh-color-positive-bg);
-  padding-right: calc(0.75em + 2.3821rem) !important;
-  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-selector-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.65em + 0.4214rem) calc(0.65em + 0.4214rem) no-repeat;
+  padding-right: calc(0.75em + 2.382175rem) !important;
+  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-selector-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.65em + 0.42145rem) calc(0.65em + 0.42145rem) no-repeat;
 }
 .was-validated .custom-select:valid:focus, .custom-select.is-valid:focus {
   border-color: var(--dh-color-positive-bg);
@@ -1941,11 +1942,11 @@ textarea.form-control {
 
 .was-validated .form-control:invalid, .form-control.is-invalid {
   border-color: var(--dh-color-negative-bg);
-  padding-right: calc(1.3em + 0.8428rem) !important;
+  padding-right: calc(1.3em + 0.8429rem) !important;
   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 ");
   background-repeat: no-repeat;
-  background-position: right calc(0.325em + 0.2107rem) center;
-  background-size: calc(0.65em + 0.4214rem) calc(0.65em + 0.4214rem);
+  background-position: right calc(0.325em + 0.210725rem) center;
+  background-size: calc(0.65em + 0.42145rem) calc(0.65em + 0.42145rem);
 }
 .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
   border-color: var(--dh-color-negative-bg);
@@ -1960,14 +1961,14 @@ textarea.form-control {
 }
 
 .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
-  padding-right: calc(1.3em + 0.8428rem);
-  background-position: top calc(0.325em + 0.2107rem) right calc(0.325em + 0.2107rem);
+  padding-right: calc(1.3em + 0.8429rem);
+  background-position: top calc(0.325em + 0.210725rem) right calc(0.325em + 0.210725rem);
 }
 
 .was-validated .custom-select:invalid, .custom-select.is-invalid {
   border-color: var(--dh-color-negative-bg);
-  padding-right: calc(0.75em + 2.3821rem) !important;
-  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-selector-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.65em + 0.4214rem) calc(0.65em + 0.4214rem) no-repeat;
+  padding-right: calc(0.75em + 2.382175rem) !important;
+  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-selector-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.65em + 0.42145rem) calc(0.65em + 0.42145rem) no-repeat;
 }
 .was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus {
   border-color: var(--dh-color-negative-bg);
@@ -2078,7 +2079,7 @@ textarea.form-control {
   user-select: none;
   background-color: transparent;
   border: 2px solid transparent;
-  padding: 0.4214rem 1.5rem;
+  padding: 0.42145rem 1.5rem;
   font-size: 1rem;
   line-height: 1.3;
   border-radius: 4rem;
@@ -2480,7 +2481,7 @@ fieldset:disabled a.btn {
   text-decoration: none;
 }
 .btn-link:hover {
-  color: var(--dh-color-fg);
+  color: var(--dh-color-fg, #f0f0ee);
   text-decoration: underline;
 }
 .btn-link:focus, .btn-link.focus {
@@ -2749,16 +2750,16 @@ input[type=button].btn-block {
   padding: 0.25rem 1.5rem;
   clear: both;
   font-weight: 400;
-  color: var(--dh-color-fg);
+  color: var(--dh-color-fg, #f0f0ee);
   text-align: inherit;
   white-space: nowrap;
   background-color: transparent;
   border: 0;
 }
 .dropdown-item:hover, .dropdown-item:focus {
-  color: var(--dh-color-fg);
+  color: var(--dh-color-fg, #f0f0ee);
   text-decoration: none;
-  background-color: var(--dh-color-accent-bg);
+  background-color: var(--dh-color-item-list-hover-bg);
 }
 .dropdown-item.active, .dropdown-item:active {
   color: var(--dh-color-white, #f0f0ee);
@@ -2787,7 +2788,7 @@ input[type=button].btn-block {
 .dropdown-item-text {
   display: block;
   padding: 0.25rem 1.5rem;
-  color: var(--dh-color-fg);
+  color: var(--dh-color-fg, #f0f0ee);
 }
 
 .btn-group,
@@ -3000,7 +3001,7 @@ input[type=button].btn-block {
 .input-group-text {
   display: flex;
   align-items: center;
-  padding: 0.4214rem 0.75rem;
+  padding: 0.42145rem 0.75rem;
   margin-bottom: 0;
   font-size: 1rem;
   font-weight: 400;
@@ -3215,8 +3216,8 @@ input[type=button].btn-block {
 .custom-select {
   display: inline-block;
   width: 100%;
-  height: calc(1.3em + 0.8428rem + 2px);
-  padding: 0.4214rem 1.75rem 0.4214rem 0.75rem;
+  height: calc(1.3em + 0.8429rem + 2px);
+  padding: 0.42145rem 1.75rem 0.42145rem 0.75rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.3;
@@ -3273,7 +3274,7 @@ input[type=button].btn-block {
   position: relative;
   display: inline-block;
   width: 100%;
-  height: calc(1.3em + 0.8428rem + 2px);
+  height: calc(1.3em + 0.8429rem + 2px);
   margin-bottom: 0;
 }
 
@@ -3281,7 +3282,7 @@ input[type=button].btn-block {
   position: relative;
   z-index: 2;
   width: 100%;
-  height: calc(1.3em + 0.8428rem + 2px);
+  height: calc(1.3em + 0.8429rem + 2px);
   margin: 0;
   overflow: hidden;
   opacity: 0;
@@ -3306,8 +3307,8 @@ input[type=button].btn-block {
   right: 0;
   left: 0;
   z-index: 1;
-  height: calc(1.3em + 0.8428rem + 2px);
-  padding: 0.4214rem 0.75rem;
+  height: calc(1.3em + 0.8429rem + 2px);
+  padding: 0.42145rem 0.75rem;
   overflow: hidden;
   font-weight: 400;
   line-height: 1.3;
@@ -3323,8 +3324,8 @@ input[type=button].btn-block {
   bottom: 0;
   z-index: 3;
   display: block;
-  height: calc(1.3em + 0.8428rem);
-  padding: 0.4214rem 0.75rem;
+  height: calc(1.3em + 0.8429rem);
+  padding: 0.42145rem 0.75rem;
   line-height: 1.3;
   color: var(--dh-color-input-fg);
   content: "Browse";
@@ -8089,8 +8090,8 @@ html {
 
 body {
   min-height: 100%;
-  background-color: var(--dh-color-bg);
-  color: var(--dh-color-fg);
+  background-color: var(--dh-color-bg, #1a171a);
+  color: var(--dh-color-fg, #f0f0ee);
   margin: 0;
   padding: 0;
   overscroll-behavior: none;
@@ -8099,7 +8100,7 @@ body {
 }
 
 #root .app {
-  background-color: var(--dh-color-bg);
+  background-color: var(--dh-color-bg, #1a171a);
   height: 100vh;
   width: 100vw;
 }
@@ -8170,8 +8171,11 @@ button:focus {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding-top: 3px;
-  padding-bottom: 5px;
+  padding: 4px 14px 3px 14px;
+  gap: 6px;
+}
+.btn .svg-inline--fa {
+  padding-bottom: 2px;
 }
 
 .btn-sm, .btn-group-sm > .btn {
@@ -8197,8 +8201,8 @@ span.btn-disabled-wrapper .btn:disabled {
   min-width: unset;
   padding: 0.25rem;
 }
-.btn-link svg {
-  margin-right: 0.25rem;
+.btn-link .svg-inline--fa {
+  align-self: center;
 }
 .btn-link:not(.btn-link-icon) {
   border: 1px solid transparent;
@@ -8240,10 +8244,7 @@ span.btn-disabled-wrapper .btn:disabled {
 }
 
 .btn-spinner {
-  padding: 0.4214rem 1rem;
-}
-.btn-spinner .fa-layers {
-  margin-right: 0.5rem;
+  padding: 0.42145rem 1rem;
 }
 
 .btn-link.no-underline,
@@ -8262,9 +8263,6 @@ span.btn-disabled-wrapper .btn:disabled {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
-.btn-link-icon svg {
-  margin-right: 0;
-}
 .btn-link-icon::after {
   content: "";
   box-sizing: border-box;
@@ -8349,6 +8347,9 @@ span.btn-disabled-wrapper .btn:disabled {
   color: var(--dh-color-action-fg);
   font-weight: 400;
 }
+.btn-inline .svg-inline--fa {
+  align-self: center;
+}
 .btn-inline.active {
   border-color: var(--dh-color-action-active-border);
   background: var(--dh-color-action-active-bg);
@@ -8547,7 +8548,7 @@ input[type=number]::-webkit-inner-spin-button {
 /* stylelint-disable no-descending-specificity -- keep with input section */
 .input-group-append .btn {
   background-color: var(--dh-color-input-bg);
-  padding: 0.4214rem 0.5rem;
+  padding: 0.42145rem 0.5rem;
 }
 
 .input-group > .input-group-append > .btn {
@@ -8585,13 +8586,13 @@ input[type=number]::-webkit-inner-spin-button {
 /********** Modal Styling *********/
 /********** Browser Default Overides *********/
 ::selection {
-  color: var(--dh-color-fg);
+  color: var(--dh-color-fg, #f0f0ee);
   background: var(--dh-color-text-highlight);
   opacity: 1;
 }
 
 ::-moz-selection {
-  color: var(--dh-color-fg);
+  color: var(--dh-color-fg, #f0f0ee);
   background: var(--dh-color-text-highlight);
   opacity: 1;
 }
@@ -8691,7 +8692,7 @@ input[type=number]::-webkit-inner-spin-button {
 @-moz-document url-prefix() {
   .custom-select {
     background-color: inherit !important;
-    color: var(--dh-color-fg);
+    color: var(--dh-color-fg, #f0f0ee);
     background-image: var(--dh-svg-icon-select-indicator), linear-gradient(0deg, var(--dh-color-input-bg), var(--dh-color-input-bg));
     background-size: 10px 6px, cover;
     background-position-x: right 0.75rem, center;
@@ -8700,7 +8701,7 @@ input[type=number]::-webkit-inner-spin-button {
   }
   .custom-select:-moz-focusring {
     color: transparent;
-    text-shadow: 0 0 0 var(--dh-color-fg) !important;
+    text-shadow: 0 0 0 var(--dh-color-fg, #f0f0ee) !important;
   }
   .custom-select:hover {
     background-image: var(--dh-svg-icon-select-indicator-hover), linear-gradient(0deg, var(--dh-color-input-bg), var(--dh-color-input-bg));
@@ -8725,7 +8726,7 @@ input[type=number]::-webkit-inner-spin-button {
   }
   .console-creator .custom-select:-moz-focusring {
     color: transparent;
-    text-shadow: 0 0 0 var(--dh-color-fg) !important;
+    text-shadow: 0 0 0 var(--dh-color-fg, #f0f0ee) !important;
   }
 
   .custom-select option {