@deephaven/components 0.58.1-beta.5 → 0.59.0

package/scss/BaseStyleSheet.scss

@@ -129,8 +129,13 @@ button:focus {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding-top: 3px;
-  padding-bottom: 5px;
+  // match spectrum button custom padding
+  padding: 4px 14px 3px 14px;
+  gap: 6px;
+
+  .svg-inline--fa {
+    padding-bottom: 2px;
+  }
 }
 
 .btn-sm {
@@ -162,8 +167,8 @@ span.btn-disabled-wrapper {
   min-width: unset;
   padding: $spacer-1;
 
-  svg {
-    margin-right: $spacer-1;
+  .svg-inline--fa {
+    align-self: center;
   }
 
   &:not(.btn-link-icon) {
@@ -214,9 +219,6 @@ span.btn-disabled-wrapper {
 
 .btn-spinner {
   padding: $btn-padding-y 1rem;
-  .fa-layers {
-    margin-right: 0.5rem;
-  }
 }
 
 .btn-link.no-underline,
@@ -235,10 +237,6 @@ span.btn-disabled-wrapper {
   padding-left: $spacer-1;
   padding-right: $spacer-1;
 
-  svg {
-    margin-right: 0;
-  }
-
   &::after {
     content: '';
     box-sizing: border-box;
@@ -339,6 +337,10 @@ span.btn-disabled-wrapper {
   color: var(--dh-color-action-fg);
   font-weight: $font-weight-normal;
 
+  .svg-inline--fa {
+    align-self: center;
+  }
+
   &.active {
     border-color: var(--dh-color-action-active-border);
     background: var(--dh-color-action-active-bg);

package/scss/bootstrap_overrides.scss

@@ -9,6 +9,9 @@ $green: var(--dh-color-visual-green);
 $blue: var(--dh-color-visual-blue);
 $purple: var(--dh-color-visual-purple);
 
+// Fallback colors are used if theme isn't loaded
+// this is required for error messages if the API doesn't load
+
 //Define our Gray scale
 $gray-100: var(--dh-color-gray-900, #fcfcfa);
 $gray-200: var(--dh-color-gray-800);
@@ -31,8 +34,8 @@ $interfaceblue: var(--dh-color-accent-bg);
 $interfacewhite: $white;
 $interfaceblack: $black;
 $content-bg: var(--dh-color-content-bg, #2d2a2e);
-$background: var(--dh-color-bg);
-$foreground: var(--dh-color-fg);
+$background: var(--dh-color-bg, #1a171a);
+$foreground: var(--dh-color-fg, #f0f0ee);
 
 // Extend default Bootstrap $grays map
 $grays-custom: (
@@ -93,7 +96,6 @@ $body-color: $interfacewhite;
 $primary: var(--dh-color-accent-bg);
 $primary-hover: var(--dh-color-accent-hover-bg);
 $primary-dark: var(--dh-color-accent-down-bg);
-$primary-light: var(--dh-color-accent-1100);
 $secondary: var(--dh-color-neutral-bg);
 $secondary-hover: var(--dh-color-neutral-hover-bg);
 $success: $green;
@@ -112,7 +114,6 @@ $mid: var(--dh-color-gray-mid);
 
 $semantic-colors: (
   'primary-hover': $primary-hover,
-  'primary-light': $primary-light,
   'primary-dark': $primary-dark,
   'mid': $mid,
   'content-bg': $interfacegray,
@@ -180,9 +181,10 @@ $input-btn-focus-color: hsla(var(--dh-color-accent-hsl), 0.35);
 $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;
 $input-btn-line-height: 1.3;
 // Bootstrap uses a calc expression to determine the input height (calc(line-height + 2*padding-y + border)).
-// The padding-y value has to be in rem to match units. Using 0.4214rem with 1.3
-// line height gets us to 31.99px vs Spectrum's 32px.
-$input-btn-padding-y: 0.4214rem;
+// The padding-y value has to be in rem to match units as it is a SASS calc.
+// Using 0.42145rem with 1.3 line height gets us to spectrum's 32px.
+/* stylelint-disable-next-line number-max-precision */
+$input-btn-padding-y: 0.42145rem;
 
 //checkbox
 $custom-control-indicator-bg: var(--dh-color-input-bg);
@@ -241,7 +243,7 @@ $tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem var(--dh-color-tooltip-box-shadow);
 $dropdown-bg: $gray-600;
 $dropdown-link-color: $foreground;
 $dropdown-link-hover-color: $foreground;
-$dropdown-link-hover-bg: $primary;
+$dropdown-link-hover-bg: var(--dh-color-item-list-hover-bg);
 $dropdown-divider-bg: $gray-700;
 
 //context menus