@deephaven/components 0.55.1-beta.9 → 0.56.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/components",
-  "version": "0.55.1-beta.9+fd8a6c65",
+  "version": "0.56.0",
   "description": "Deephaven React component library",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
@@ -25,10 +25,10 @@
   },
   "dependencies": {
     "@adobe/react-spectrum": "^3.29.0",
-    "@deephaven/icons": "^0.55.1-beta.9+fd8a6c65",
-    "@deephaven/log": "^0.55.1-beta.9+fd8a6c65",
-    "@deephaven/react-hooks": "^0.55.1-beta.9+fd8a6c65",
-    "@deephaven/utils": "^0.55.1-beta.9+fd8a6c65",
+    "@deephaven/icons": "^0.56.0",
+    "@deephaven/log": "^0.56.0",
+    "@deephaven/react-hooks": "^0.56.0",
+    "@deephaven/utils": "^0.56.0",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@react-spectrum/theme-default": "^3.5.1",
@@ -52,7 +52,7 @@
     "react-dom": "^17.x"
   },
   "devDependencies": {
-    "@deephaven/mocks": "^0.55.1-beta.9+fd8a6c65"
+    "@deephaven/mocks": "^0.56.0"
   },
   "files": [
     "dist",
@@ -65,5 +65,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fd8a6c65d64b93ba69849b6053d5bbbd9d72c4dc"
+  "gitHead": "ce7c33f8f44023b8fa7c60164c1fd88fe049e2ea"
 }

package/scss/BaseStyleSheet.scss

@@ -2,11 +2,16 @@
 // Can be imported directly by Vite since it resolves bootstrap to node_modules/bootstrap
 @import './custom.scss';
 @import './util.scss';
-@import 'bootstrap/scss/bootstrap';
+@import './bootstrap_imports.scss';
 
 :root {
   --dh-svg-inline-icon-size: 16px;
-  --scrollbar-color: 255, 255, 255;
+
+  color: var(--dh-color-text);
+
+  .spectrum-theme-provider {
+    color: var(--dh-color-text);
+  }
 }
 
 //Various non-variable css overides
@@ -16,6 +21,14 @@ html {
   min-height: 100%;
 }
 
+// override
+.text-black-50 {
+  color: background-opacity(50) !important;
+}
+.text-white-50 {
+  color: foreground-opacity(50) !important;
+}
+
 // deephaven-icons are designed on a 16px grid
 // and look best at that size. Default icon size back to 16px
 // vertical alignment changed to best match icon set against 14px text
@@ -26,19 +39,18 @@ html {
 
 body {
   min-height: 100%;
-  background-color: var(--dh-color-background, $background);
+  background-color: $background;
   color: $foreground;
   margin: 0;
   padding: 0;
   overscroll-behavior: none;
   -ms-scroll-chaining: none;
-  scrollbar-color: rgba($white, 0.1) rgba($black, 0.1); //applies to firefox only
+  scrollbar-color: foreground-opacity(10) background-opacity(10); //applies to firefox only
 }
 
 #root {
-  background-color: var(--dh-color-background, $background);
-
   .app {
+    background-color: $background;
     height: 100vh;
     width: 100vw;
   }
@@ -91,7 +103,7 @@ a.custom-link,
       content: '';
       box-sizing: content-box;
       position: absolute;
-      background: rgba($primary, $focus-bg-transparency);
+      background: accent-opacity(10);
       top: 0;
       left: 0;
       width: 100%;
@@ -135,18 +147,18 @@ span.btn-disabled-wrapper {
     border-radius: $border-radius;
 
     &:focus {
-      background: rgba($primary, $focus-bg-transparency);
+      background: accent-opacity(10);
       border: $input-border-width solid $primary;
       box-shadow: $input-btn-focus-box-shadow;
     }
 
     &:hover {
-      background: rgba($primary, $hover-bg-transparency);
+      background: accent-opacity(15);
     }
 
     &:active {
       content: '';
-      background: rgba($primary, $active-bg-transparency);
+      background: accent-opacity(30);
     }
   }
 }
@@ -157,15 +169,13 @@ span.btn-disabled-wrapper {
   border-color: $danger;
 
   &:focus {
-    box-shadow: 0 0 0 $btn-focus-width
-      rgba(mix(color-yiq($background), $danger, 15%), 0.5);
+    box-shadow: 0 0 0 $btn-focus-width var(--dh-color-focus);
   }
 
   &:not(:disabled):not(.disabled):active {
-    background: darken($danger, 10%);
-    border-color: darken($danger, 10%);
-    box-shadow: 0 0 0 $btn-focus-width
-      rgba(mix(color-yiq($background), $danger, 15%), 0.5);
+    background: var(--dh-color-negative-down-bg);
+    border-color: var(--dh-color-negative-down-bg);
+    box-shadow: 0 0 0 $btn-focus-width var(--dh-color-focus);
   }
 }
 
@@ -180,8 +190,7 @@ span.btn-disabled-wrapper {
 
 .btn-spinner {
   padding: $btn-padding-y 1rem;
-  .fa-layers,
-  .loading-spinner {
+  .fa-layers {
     margin-right: 0.5rem;
   }
 }
@@ -226,7 +235,7 @@ span.btn-disabled-wrapper {
     text-decoration: none;
     box-shadow: none;
     &::after {
-      background: rgba($primary, $focus-bg-transparency);
+      background: accent-opacity(10);
       border: $input-border-width solid $primary;
       box-shadow: $input-btn-focus-box-shadow;
     }
@@ -234,14 +243,14 @@ span.btn-disabled-wrapper {
 
   &:hover {
     &::after {
-      background: rgba($primary, $hover-bg-transparency);
+      background: accent-opacity(15);
     }
   }
 
   &:active {
     &::after {
       content: '';
-      background: rgba($primary, $active-bg-transparency);
+      background: accent-opacity(30);
     }
   }
 }
@@ -296,51 +305,49 @@ span.btn-disabled-wrapper {
   padding-left: $spacer-1;
   padding-right: $spacer-1;
   border-radius: $border-radius;
-  background: $gray-600;
-  border: 1px solid $input-border-color;
-  color: $gray-300;
+  background: var(--dh-color-action-bg);
+  border: 1px solid var(--dh-color-action-border);
+  color: var(--dh-color-action-fg);
 
   &.active {
-    border-color: $primary;
-    background: $primary;
-    color: $gray-100;
+    border-color: var(--dh-color-action-active-border);
+    background: var(--dh-color-action-active-bg);
+    color: var(--dh-color-action-active-fg);
 
-    &:focus {
+    &:focus-visible {
       border: 1px solid $input-focus-border-color;
     }
 
     &:not(:disabled):not(.disabled):hover {
-      background: $primary;
+      color: var(--dh-color-action-active-hover-fg);
+      background: var(--dh-color-action-active-hover-bg);
+      border-color: var(--dh-color-action-active-hover-border);
     }
   }
 
   &.disabled,
   &:disabled {
-    border: 1px solid $black;
-    color: $gray-300;
+    background-color: var(--dh-color-action-disabled-bg);
+    border: 1px solid var(--dh-color-action-disabled-border);
+    color: var(--dh-color-action-disabled-fg);
     cursor: not-allowed;
   }
 
-  &:focus {
+  &:focus-visible {
     border: 1px solid $input-focus-border-color;
   }
 
   &:not(:disabled):not(.disabled):hover {
-    background-color: $gray-500;
-    color: $gray-200;
+    background-color: var(--dh-color-action-hover-bg);
+    border: 1px solid var(--dh-color-action-hover-border);
+    color: var(--dh-color-action-hover-fg);
   }
 
   &:not(:disabled):not(.disabled):active {
-    background: $gray-700;
+    background: var(--dh-color-action-down-bg);
   }
 }
 
-.btn-secondary:hover {
-  // steal primary hover state to look more hovered, less disabled
-  background-color: $primary-hover;
-  border-color: $primary-hover;
-}
-
 .btn-secondary.disabled,
 .btn-secondary:disabled {
   // look more disabled
@@ -408,18 +415,18 @@ form label small {
   box-shadow: 0 0 0 0.2rem var(--dh-color-form-control-error-shadow);
 }
 
-.form-control.btn:focus {
+.form-control.btn:focus-visible {
   box-shadow: $input-btn-focus-box-shadow;
 }
 
 .form-control:disabled {
   border-color: $black;
-  color: darken($gray-400, 5%);
+  color: $gray-500;
   cursor: not-allowed;
 }
 
 .form-control:disabled::placeholder {
-  color: darken($gray-400, 5%);
+  color: $gray-500;
 }
 
 .form-control[type='password'] {
@@ -617,7 +624,7 @@ input[type='number']::-webkit-inner-spin-button {
     border-color: $gray-300;
     &:focus,
     &.focus {
-      box-shadow: 0 0 0 0.2rem rgba(91, 90, 92, 20%);
+      box-shadow: 0 0 0 0.2rem background-opacity(20);
     }
   }
 }
@@ -641,26 +648,26 @@ input[type='number']::-webkit-inner-spin-button {
 ::selection {
   //blink/webkit
   color: $foreground;
-  background: rgba($text-select-color, 0.99);
+  background: var(--dh-color-text-highlight);
   opacity: 1;
 }
 
 ::-moz-selection {
   //moz
   color: $foreground;
-  background: rgba($text-select-color, 0.99);
+  background: var(--dh-color-text-highlight);
   opacity: 1;
 }
 
 .masked-input::selection {
   //blink/webkit
-  background: rgba($primary, 0.7);
+  background: var(--dh-color-text-highlight);
   opacity: 1;
 }
 
 .masked-input::-moz-selection {
   //moz
-  background: rgba($primary, 0.7);
+  background: var(--dh-color-text-highlight);
   opacity: 1;
 }
 
@@ -672,7 +679,7 @@ input[type='number']::-webkit-inner-spin-button {
 
 // style the same as monaco scrollbar
 ::-webkit-scrollbar-thumb {
-  background: rgba(var(--scrollbar-color), 0.18);
+  background: hsla(var(--dh-color-scrollbar-hsl), 0.18);
   border-radius: 0;
 }
 
@@ -682,30 +689,31 @@ input[type='number']::-webkit-inner-spin-button {
 }
 
 ::-webkit-scrollbar-corner {
-  background: rgba(0, 0, 0, 10%);
+  background: background-opacity(10);
 }
 
 ::-webkit-scrollbar-track:horizontal {
-  border-top: 1px solid rgba(var(--scrollbar-color), 0.15);
+  border-top: 1px solid hsla(var(--dh-color-scrollbar-hsl), 0.15);
 }
 
 ::-webkit-scrollbar-track:vertical {
-  border-left: 1px solid rgba(var(--scrollbar-color), 0.15);
+  border-left: 1px solid hsla(var(--dh-color-scrollbar-hsl), 0.15);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(var(--scrollbar-color), 0.25);
+  background: hsla(var(--dh-color-scrollbar-hsl), 0.25);
 }
 
 ::-webkit-scrollbar-thumb:active {
-  background: rgba(var(--scrollbar-color), 0.35);
+  background: hsla(var(--dh-color-scrollbar-hsl), 0.35);
 }
 
 // used in inverted color sections, like light modals
 .theme-bg-light {
-  --scrollbar-color: 0, 0, 0;
+  --dh-color-scrollbar-hsl: #{var(--dh-color-bg-hsl)};
 
-  scrollbar-color: rgba($black, 0.5) rgba($black, 0.3); // firefox
+  scrollbar-color: hsla(var(--dh-color-scrollbar-hsl), 0.5)
+    hsla(var(--dh-color-scrollbar-hsl), 0.3); // firefox
 }
 
 /********** Monaco Overides *********/
@@ -804,7 +812,7 @@ input[type='number']::-webkit-inner-spin-button {
 
     //make the dotted duplicate focus line on firefox go away
     &:-moz-focusring {
-      color: rgba(0, 0, 0, 0%);
+      color: transparent;
       text-shadow: 0 0 0 $foreground !important;
     }
 
@@ -842,7 +850,7 @@ input[type='number']::-webkit-inner-spin-button {
       solid-gradient($gray-700);
 
     &:-moz-focusring {
-      color: rgba(0, 0, 0, 0%);
+      color: transparent;
       text-shadow: 0 0 0 $foreground !important;
     }
   }
@@ -852,7 +860,7 @@ input[type='number']::-webkit-inner-spin-button {
       solid-gradient($gray-200);
 
     &:-moz-focusring {
-      color: rgba(0, 0, 0, 0%);
+      color: transparent;
       text-shadow: 0 0 0 $background !important;
     }
   }

package/scss/bootstrap_imports.scss

@@ -0,0 +1,49 @@
+/*!
+ * Bootstrap v4.6.2 (https://getbootstrap.com/)
+ * Copyright 2011-2022 The Bootstrap Authors
+ * Copyright 2011-2022 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+
+/* 
+ * Deephaven manually imports only the necessary bootstrap files.
+ * See `bootstrap/scss/bootstrap.scss` in `node_modules` for the original list of imports.
+ */
+
+@import 'bootstrap/scss/functions';
+
+// patch the functions
+@import './bootstrap_override_functions.scss';
+
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+
+// patch the mixins
+@import './bootstrap_override_mixins_background_variant.scss';
+@import './bootstrap_override_mixins_buttons.scss';
+@import './bootstrap_override_mixins_forms.scss';
+@import './bootstrap_override_mixins_text_emphasis.scss';
+
+// $theme-colors is used by button mixins. We don't want to use the `dark` or `light`
+// variants since they don't align with the semantics we use for theming.
+$theme-colors: map-remove($theme-colors, 'dark', 'light');
+
+@import 'bootstrap/scss/root';
+@import 'bootstrap/scss/reboot';
+@import 'bootstrap/scss/type';
+@import 'bootstrap/scss/code';
+@import 'bootstrap/scss/grid';
+@import 'bootstrap/scss/forms';
+@import 'bootstrap/scss/buttons';
+@import 'bootstrap/scss/transitions';
+@import 'bootstrap/scss/dropdown';
+@import 'bootstrap/scss/button-group';
+@import 'bootstrap/scss/input-group';
+@import 'bootstrap/scss/custom-forms';
+@import 'bootstrap/scss/nav';
+@import 'bootstrap/scss/navbar';
+@import 'bootstrap/scss/progress';
+@import 'bootstrap/scss/close';
+@import 'bootstrap/scss/modal';
+@import 'bootstrap/scss/spinners';
+@import 'bootstrap/scss/utilities';

package/scss/bootstrap_override_functions.scss

@@ -0,0 +1,31 @@
+// Bootstrap overrides for `bootstrap/scss/_functions.scss`
+
+// Color contrast
+// DH Customization: Add support for dh-color variables
+@function color-yiq(
+  $color,
+  $dark: var(--dh-color-contrast-dark),
+  $light: var(--dh-color-contrast-light)
+) {
+  // if $color is a hex color, use the default color-yiq function
+  @if type-of($color) == 'color' {
+    $r: red($color);
+    $g: green($color);
+    $b: blue($color);
+
+    $yiq: (($r * 299) + ($g * 587) + ($b * 114)) * 0.001;
+
+    @if $yiq >= $yiq-contrasted-threshold {
+      @return $dark;
+    } @else {
+      @return $light;
+    }
+  }
+
+  $contrast-color: var(
+    --dh-color-#{$color}-contrast,
+    var(--dh-color-contrast-light)
+  );
+
+  @return $contrast-color;
+}

package/scss/bootstrap_override_mixins_background_variant.scss

@@ -0,0 +1,16 @@
+// Bootstrap mixin overrides for `bootstrap/scss/mixins/_background-variant.scss`
+@use 'sass:map';
+
+@mixin bg-variant($parent, $bootstrap-value, $ignore-warning: false) {
+  $semantic-value: map.get($bootstrap-dh-semantic-map, $bootstrap-value) or '';
+
+  #{$parent} {
+    background-color: var(--dh-color-#{$semantic-value}-bg) !important;
+  }
+  a#{$parent},
+  button#{$parent} {
+    @include hover-focus {
+      background-color: var(--dh-color-#{$semantic-value}-down-bg) !important;
+    }
+  }
+}

package/scss/bootstrap_override_mixins_buttons.scss

@@ -0,0 +1,123 @@
+// Bootstrap mixin overrides for `bootstrap/scss/mixins/_buttons.scss`
+@use 'sass:map';
+
+// This mixin overrides the one in `bootstrap/scss/mixins/_buttons.scss`
+// $bootstrap-value comes from $theme-colors map (see `bootstrap/scss/_buttons.scss`)
+@mixin button-variant($bootstrap-value, $_) {
+  $semantic-value: map.get($bootstrap-dh-semantic-map, $bootstrap-value) or '';
+
+  // DH Customization: Convert semantic value to css variables
+  $background: var(--dh-color-#{$semantic-value}-bg);
+  $border: var(--dh-color-#{$semantic-value}-bg);
+  $boxshadow-color: hsla(var(--dh-color-#{$semantic-value}-hsl), 0.5);
+  $hover-background: var(--dh-color-#{$semantic-value}-hover-bg);
+  $hover-border: var(--dh-color-#{$semantic-value}-hover-bg);
+  $active-background: var(--dh-color-#{$semantic-value}-down-bg);
+  $active-border: var(--dh-color-#{$semantic-value}-down-bg);
+  $color: var(--dh-color-#{$semantic-value}-contrast);
+
+  color: $color;
+  font-weight: var(--spectrum-global-font-weight-bold);
+  @include gradient-bg($background);
+
+  border-color: $border;
+  @include box-shadow($btn-box-shadow);
+
+  @include hover {
+    color: $color;
+    @include gradient-bg($hover-background);
+
+    border-color: $hover-border;
+  }
+
+  &:focus {
+    box-shadow: none;
+  }
+
+  &:focus-visible,
+  &.focus {
+    color: $color;
+    @include gradient-bg($hover-background);
+
+    border-color: $hover-border;
+    box-shadow: 0 0 0 $btn-focus-width $boxshadow-color;
+  }
+
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    color: $color;
+    background-color: $background;
+    border-color: $border;
+    // Remove CSS gradients if they're enabled
+    @if $enable-gradients {
+      background-image: none;
+    }
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    color: $color;
+    background-color: $active-background;
+    @if $enable-gradients {
+      background-image: none; // Remove the gradient for the pressed/active state
+    }
+
+    border-color: $active-border;
+
+    &:focus-visible {
+      box-shadow: 0 0 0 $btn-focus-width $boxshadow-color;
+    }
+  }
+}
+
+@mixin button-outline-variant($bootstrap-value) {
+  $semantic-value: map.get($bootstrap-dh-semantic-map, $bootstrap-value) or '';
+
+  $color: var(--dh-color-#{$semantic-value}-bg);
+  $boxshadow-color: hsla(var(--dh-color-#{$semantic-value}-hsl), 0.5);
+  $hover-color: color-yiq($semantic-value);
+  $hover-background: var(--dh-color-#{$semantic-value}-hover-bg);
+  $active-background: var(--dh-color-#{$semantic-value}-down-bg);
+
+  color: $color;
+  border-color: $color;
+
+  @include hover {
+    color: $hover-color;
+    background-color: $hover-background;
+    border-color: $hover-background;
+  }
+
+  &:focus,
+  &.focus {
+    box-shadow: 0 0 0 $btn-focus-width $boxshadow-color;
+  }
+
+  &.disabled,
+  &:disabled {
+    color: $color;
+    background-color: transparent;
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    color: color-yiq($semantic-value);
+    background-color: $active-background;
+    border-color: $active-background;
+
+    &:focus {
+      @if $enable-shadows and $btn-active-box-shadow != none {
+        @include box-shadow(
+          $btn-active-box-shadow,
+          0 0 0 $btn-focus-width $boxshadow-color
+        );
+      } @else {
+        // Avoid using mixin so we can pass custom focus shadow properly
+        box-shadow: 0 0 0 $btn-focus-width $boxshadow-color;
+      }
+    }
+  }
+}