@deephaven/components 0.55.0 → 0.55.1-alpha-theme-spectrum.17

package/scss/BaseStyleSheet.scss

@@ -1,7 +1,18 @@
 // Import our custom variables and bootstrap
 // Can be imported directly by Vite since it resolves bootstrap to node_modules/bootstrap
 @import './custom.scss';
-@import 'bootstrap/scss/bootstrap';
+@import './util.scss';
+@import './bootstrap_imports.scss';
+
+:root {
+  --dh-svg-inline-icon-size: 16px;
+
+  color: var(--dh-color-text);
+
+  .spectrum-theme-provider {
+    color: var(--dh-color-text);
+  }
+}
 
 //Various non-variable css overides
 //Overide default size from 16px to 14px. We need density.
@@ -10,29 +21,36 @@ 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
 .svg-inline--fa {
-  font-size: 16px;
+  font-size: var(--dh-svg-inline-icon-size);
   vertical-align: -3px;
 }
 
 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;
   }
@@ -85,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%;
@@ -129,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);
     }
   }
 }
@@ -151,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);
   }
 }
 
@@ -174,8 +190,7 @@ span.btn-disabled-wrapper {
 
 .btn-spinner {
   padding: $btn-padding-y 1rem;
-  .fa-layers,
-  .loading-spinner {
+  .fa-layers {
     margin-right: 0.5rem;
   }
 }
@@ -220,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;
     }
@@ -228,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);
     }
   }
 }
@@ -290,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
@@ -392,18 +405,28 @@ form label small {
 .form-control.focus {
   border: 1px solid $primary;
 }
-.form-control.btn:focus {
+
+.form-control.is-invalid,
+.form-control.is-invalid:focus {
+  border-color: var(--dh-color-form-control-error);
+  background-image: var(--dh-svg-icon-error);
+}
+.form-control.is-invalid:focus {
+  box-shadow: 0 0 0 0.2rem var(--dh-color-form-control-error-shadow);
+}
+
+.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'] {
@@ -450,9 +473,41 @@ form label small {
   cursor: not-allowed;
 }
 
+.custom-select {
+  $caret-size: 10px 6px;
+  $error-size: 16px;
+
+  background-image: var(--dh-svg-icon-select-indicator);
+  background-size: $caret-size;
+
+  &:hover {
+    background-image: var(--dh-svg-icon-select-indicator-hover);
+  }
+
+  &.is-invalid,
+  &.is-invalid:focus {
+    border-color: var(--dh-color-form-control-error);
+    background-size: $caret-size, $error-size;
+    background-image: var(--dh-svg-icon-select-indicator),
+      var(--dh-svg-icon-error);
+  }
+  &.is-invalid:hover {
+    background-image: var(--dh-svg-icon-select-indicator-hover),
+      var(--dh-svg-icon-error);
+  }
+  &.is-invalid:focus {
+    box-shadow: 0 0 0 0.2rem var(--dh-color-form-control-error-shadow);
+  }
+}
+
 .custom-select:disabled {
   border-color: $black;
   cursor: not-allowed;
+  background-image: var(--dh-svg-icon-select-indicator-disabled);
+  &.is-invalid {
+    background-image: var(--dh-svg-icon-select-indicator-disabled),
+      var(--dh-svg-icon-error);
+  }
 }
 
 input[type='number'] {
@@ -481,11 +536,8 @@ input[type='number']::-webkit-inner-spin-button {
 }
 
 .input-group > .input-group-append.cb-dropdown > .btn {
-  color: $gray-400;
   border: 1px solid $gray-400;
-  &:hover {
-    color: $foreground;
-  }
+
   &:focus {
     border-color: $input-focus-border-color;
   }
@@ -572,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);
     }
   }
 }
@@ -596,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;
 }
 
@@ -627,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;
 }
 
@@ -637,36 +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);
 }
 
-/* stylelint-disable no-descending-specificity */
-:root {
-  --scrollbar-color: 255, 255, 255;
-}
-/* stylelint-enable no-descending-specificity */
-
 // 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 *********/
@@ -740,40 +787,80 @@ input[type='number']::-webkit-inner-spin-button {
 //Moz specific hacks
 /* stylelint-disable-next-line function-url-quotes */
 @-moz-document url-prefix() {
-  //Selection box in mozilla loses default styling on options list if you apply a background color other then #FFF or inheirt...
-  //Hack: turn the background to inheirt, then apply a background gradient that is inputbg color to inputbg color
+  $caret-position: right $custom-select-padding-x;
+  $error-position: right (1 + $custom-select-padding-x);
+  $svg-caret: var(--dh-svg-icon-select-indicator);
+  $svg-caret-hover: var(--dh-svg-icon-select-indicator-hover);
+  $svg-error: var(--dh-svg-icon-error);
+
+  //Selection box in mozilla loses default styling on options list if you apply a background color other then #FFF or inherit...
+  //Hack: turn the background to inherit, then apply a background gradient that is inputbg color to inputbg color
   //for crossbrowser consistency this gradient is stacked bellow the svg used to get a caret (indicator) looking the same
   .custom-select {
     background-color: inherit !important;
     color: $foreground;
-    background-image: escape-svg($custom-select-indicator),
-      linear-gradient(0deg, $input-bg, $input-bg);
-    background-size: $custom-select-bg-size, cover;
-    background-repeat: no-repeat;
-    background-position:
-      bottom 50% right $custom-select-padding-x,
+    // bg image, size and position for 2 layers
+    background-image: $svg-caret, solid-gradient($input-bg);
+    background-size:
+      10px 6px,
+      cover;
+    background-position-x: $caret-position, center;
+    background-position-y:
+      bottom 50%,
       center;
+    background-repeat: no-repeat;
+
     //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;
     }
+
+    &:hover {
+      background-image: $svg-caret-hover, solid-gradient($input-bg);
+    }
+
+    &.is-invalid,
+    &.is-invalid:focus {
+      // bg image, size and position for 3 layers
+      background-image: $svg-caret, $svg-error, solid-gradient($input-bg);
+      background-size:
+        10px 6px,
+        16px,
+        cover;
+      background-position-x: $caret-position, $error-position, center;
+    }
+
+    &.is-invalid:hover {
+      background-image: $svg-caret-hover, $svg-error, solid-gradient($input-bg);
+    }
+
+    &:disabled {
+      background-image: $svg-caret, solid-gradient($input-disabled-bg);
+
+      &.is-invalid {
+        background-image: $svg-caret, $svg-error,
+          solid-gradient($input-disabled-bg);
+      }
+    }
   }
 
   .console-creator .custom-select {
-    background-image: escape-svg($custom-select-indicator),
-      linear-gradient(0deg, $gray-700, $gray-700);
+    background-image: var(--dh-svg-icon-select-indicator),
+      solid-gradient($gray-700);
+
     &:-moz-focusring {
-      color: rgba(0, 0, 0, 0%);
+      color: transparent;
       text-shadow: 0 0 0 $foreground !important;
     }
   }
 
   .modal-dialog.theme-bg-light .custom-select {
-    background-image: escape-svg($custom-select-indicator),
-      linear-gradient(0deg, $gray-200, $gray-200);
+    background-image: var(--dh-svg-icon-select-indicator),
+      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;
+    }
+  }
+}