@deephaven/components 0.55.1-beta.13 → 0.55.1-beta.16

package/scss/bootstrap_override_mixins_forms.scss

@@ -0,0 +1,231 @@
+/* stylelint-disable scss/comment-no-empty */
+// Bootstrap mixin overrides for `bootstrap/scss/mixins/_forms.scss`
+
+// Form control focus state
+//
+// Generate a customized focus state and for any input with the specified color,
+// which defaults to the `$input-focus-border-color` variable.
+//
+// We highly encourage you to not customize the default value, but instead use
+// this to tweak colors on an as-needed basis. This aesthetic change is based on
+// WebKit's default styles, but applicable to a wider range of browsers. Its
+// usability and accessibility should be taken into account with any change.
+//
+// Example usage: change the default blue border and shadow to white for better
+// contrast against a dark gray background.
+@mixin form-control-focus($ignore-warning: false) {
+  &:focus {
+    color: $input-focus-color;
+    background-color: $input-focus-bg;
+    border-color: $input-focus-border-color;
+    outline: 0;
+    @if $enable-shadows {
+      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $input-focus-box-shadow;
+    }
+  }
+  @include deprecate(
+    'The `form-control-focus()` mixin',
+    'v4.4.0',
+    'v5',
+    $ignore-warning
+  );
+}
+
+// This mixin overrides the one in `bootstrap/scss/mixins/_forms.scss`
+// It's primary purpose is to convert the input color value into a dh css
+// variable expression. There are a few additional tweaks annotated with
+// `DH Customization:`
+@mixin form-validation-state($state, $semantic-value, $icon) {
+  // DH Customization: Convert semantic value to css variable
+  $color: var(--dh-color-visual-#{$semantic-value});
+
+  .#{$state}-feedback {
+    display: none;
+    width: 100%;
+    margin-top: $form-feedback-margin-top;
+    @include font-size($form-feedback-font-size);
+
+    color: $color;
+  }
+
+  .#{$state}-tooltip {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 5;
+    display: none;
+    max-width: 100%; // Contain to parent when possible
+    padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
+    margin-top: 0.1rem;
+    @include font-size($form-feedback-tooltip-font-size);
+
+    line-height: $form-feedback-tooltip-line-height;
+    color: color-yiq($semantic-value);
+    background-color: $color;
+    @include border-radius($form-feedback-tooltip-border-radius);
+
+    // See https://github.com/twbs/bootstrap/pull/31557
+    // Align tooltip to form elements
+    .form-row > .col > &,
+    .form-row > [class*='col-'] > & {
+      left: $form-grid-gutter-width * 0.5;
+    }
+  }
+
+  @include form-validation-state-selector($state) {
+    ~ .#{$state}-feedback,
+    ~ .#{$state}-tooltip {
+      display: block;
+    }
+  }
+
+  .form-control {
+    @include form-validation-state-selector($state) {
+      border-color: $color;
+
+      @if $enable-validation-icons {
+        padding-right: $input-height-inner !important; // stylelint-disable-line declaration-no-important
+        background-image: escape-svg($icon);
+        background-repeat: no-repeat;
+        background-position: right $input-height-inner-quarter center;
+        background-size: $input-height-inner-half $input-height-inner-half;
+      }
+
+      &:focus {
+        border-color: $color;
+      }
+
+      // DH Customization: Moved box-shadow from :focus to :focus-visible and
+      // changed to $input-focus-box-shadow
+      &:focus-visible {
+        box-shadow: $input-focus-box-shadow;
+      }
+    }
+  }
+
+  // stylelint-disable-next-line selector-no-qualifying-type
+  select.form-control {
+    @include form-validation-state-selector($state) {
+      @if $enable-validation-icons {
+        padding-right: $input-padding-x *
+          4 !important; // stylelint-disable-line declaration-no-important
+
+        background-position: right $input-padding-x * 2 center;
+      }
+    }
+  }
+
+  // stylelint-disable-next-line selector-no-qualifying-type
+  textarea.form-control {
+    @include form-validation-state-selector($state) {
+      @if $enable-validation-icons {
+        padding-right: $input-height-inner;
+        background-position: top
+          $input-height-inner-quarter
+          right
+          $input-height-inner-quarter;
+      }
+    }
+  }
+
+  .custom-select {
+    @include form-validation-state-selector($state) {
+      border-color: $color;
+
+      @if $enable-validation-icons {
+        padding-right: $custom-select-feedback-icon-padding-right !important; // stylelint-disable-line declaration-no-important
+        background:
+          $custom-select-background,
+          $custom-select-bg
+            escape-svg($icon)
+            $custom-select-feedback-icon-position /
+            $custom-select-feedback-icon-size
+            no-repeat;
+      }
+
+      &:focus {
+        border-color: $color;
+      }
+
+      // DH Customization: Moved box-shadow from :focus to :focus-visible and
+      // changed to $input-focus-box-shadow
+      &:focus-visible {
+        box-shadow: $input-focus-box-shadow;
+      }
+    }
+  }
+
+  .form-check-input {
+    @include form-validation-state-selector($state) {
+      ~ .form-check-label {
+        color: $color;
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+    }
+  }
+
+  .custom-control-input {
+    @include form-validation-state-selector($state) {
+      ~ .custom-control-label {
+        color: $color;
+
+        &::before {
+          border-color: $color;
+        }
+      }
+
+      &:checked {
+        // DH Customization: Changed from lighten($color, 10%) to $color
+        ~ .custom-control-label::before {
+          border-color: $color;
+          @include gradient-bg($color);
+        }
+      }
+
+      // DH Customization: Moved box-shadow from :focus to :focus-visible and
+      // changed to $input-focus-box-shadow.
+      &:focus-visible {
+        ~ .custom-control-label::before {
+          box-shadow: $input-focus-box-shadow;
+        }
+      }
+
+      &:focus {
+        &:not(:checked) ~ .custom-control-label::before {
+          border-color: $color;
+        }
+      }
+    }
+  }
+
+  // custom file
+  .custom-file-input {
+    @include form-validation-state-selector($state) {
+      ~ .custom-file-label {
+        border-color: $color;
+      }
+
+      &:focus {
+        ~ .custom-file-label {
+          border-color: $color;
+          // DH Customization: Removed box-shadow
+          // box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+        }
+      }
+
+      // DH Customization: Added rule
+      &:focus-visible {
+        ~ .custom-file-label {
+          box-shadow: $input-focus-box-shadow;
+        }
+      }
+    }
+  }
+}

package/scss/bootstrap_override_mixins_text_emphasis.scss

@@ -0,0 +1,21 @@
+// Bootstrap mixin overrides for `bootstrap/scss/mixins/_text-emphasis.scss`
+
+@mixin text-emphasis-variant($parent, $semantic-value, $ignore-warning: false) {
+  #{$parent} {
+    // if $semantic-value = primary then use accent-700
+    @if $semantic-value == 'accent' {
+      color: var(--spectrum-#{$semantic-value}-color-700) !important;
+    } @else {
+      color: var(--spectrum-#{$semantic-value}-visual-color) !important;
+    }
+  }
+  @if $emphasized-link-hover-darken-percentage != 0 {
+    a#{$parent} {
+      @include hover-focus {
+        color: var(
+          --spectrum-#{$semantic-value}-background-color-default
+        ) !important;
+      }
+    }
+  }
+}

package/scss/bootstrap_overrides.scss

@@ -1,50 +1,88 @@
 // Styling overrides for bootstrap
+@use 'sass:map';
 
 // Override / set color variables
-$red: #f95d84;
-$orange: #f37e3f;
-$yellow: #fcd65b;
-$green: #9edc6f;
-$blue: #76d9e4;
-$purple: #aa9af4;
+$red: var(--dh-color-visual-red);
+$orange: var(--dh-color-visual-orange);
+$yellow: var(--dh-color-visual-yellow);
+$green: var(--dh-color-visual-green);
+$blue: var(--dh-color-visual-blue);
+$purple: var(--dh-color-visual-purple);
+
+//Define our Gray scale
+$gray-100: var(--dh-color-gray-900, #fcfcfa);
+$gray-200: var(--dh-color-gray-800);
+$gray-300: var(--dh-color-gray-700);
+$gray-400: var(--dh-color-gray-600);
+$gray-500: var(--dh-color-gray-500);
+// intentional duplicate, scale doesn't line up otherwise
+// as we have gray-850 and spectrum doesn't and it is needed
+$gray-600: var(--dh-color-gray-500);
+$gray-700: var(--dh-color-gray-400);
+$gray-800: var(--dh-color-gray-300);
+$gray-850: var(--dh-color-gray-200);
+$gray-900: var(--dh-color-gray-75);
+$black: var(--dh-color-black, #1a171a);
+$white: var(--dh-color-white, #f0f0ee);
 
 //Define some UI colors
-$interfacegray: #2d2a2e;
-$interfaceblue: #4878ea;
-$interfacewhite: #f0f0ee; //same as gray-200
-$interfaceblack: #1a171a;
+$interfacegray: var(--dh-color-content-bg, #2d2a2e);
+$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);
 
-//Define our Gray scale
-$white: $interfacewhite;
-$gray-100: #fcfcfa;
-$gray-200: $interfacewhite;
-$gray-300: #c0bfbf;
-$gray-400: #929192;
-$gray-500: #5b5a5c;
-$gray-600: #555356;
-$gray-700: #403e41;
-$gray-800: #373438;
-$gray-850: #322f33;
-$gray-900: #211f22;
-$black: $interfaceblack;
-$content-bg: $interfacegray;
-$background: $interfaceblack;
-$foreground: $interfacewhite;
-
-//Load colors into map
-$colors: ();
-$colors: map-merge(
-  (
-    'red': $red,
-    'orange': $orange,
-    'yellow': $yellow,
-    'green': $green,
-    'blue': $blue,
-    'purple': $purple,
-    'white': $white,
-    'black': $black,
-  ),
-  $colors
+// Extend default Bootstrap $grays map
+$grays-custom: (
+  '850': $gray-850,
+);
+$grays: () !default;
+$grays: map-merge($grays, $grays-custom);
+
+// Extend default Bootstrap $colors map
+$colors-custom: (
+  'black': $black,
+);
+$colors: () !default;
+$colors: map-merge($colors, $colors-custom);
+
+// Override default Bootstrap $theme-colors map by mapping each key to itself.
+// These will then be re-mapped inside of `button-outline-variant` and
+// `button-outline-variant` mixins in `bootstrap_override_mixins_buttons.scss`
+$theme-colors-self-map: ();
+@each $key
+  in (
+    'primary',
+    'secondary',
+    'success',
+    'info',
+    'warning',
+    'danger',
+    'light',
+    'dark'
+  )
+{
+  $theme-colors-self-map: map.set($theme-colors-self-map, $key, $key);
+}
+$theme-colors: () !default;
+$theme-colors: map-merge($theme-colors, $theme-colors-self-map);
+
+// Used by bootstrap_override_mixins_buttons.scss to map Bootstrap colors to
+// DH semantic colors
+$bootstrap-dh-semantic-map: (
+  'primary': 'accent',
+  'secondary': 'neutral',
+  'success': 'positive',
+  'info': 'info',
+  'warning': 'notice',
+  'danger': 'negative',
+  // We shouldn't be using these, but mapping so they work with our custom
+  // `color-yiq` mixin. If we find a way to remove $light + $dark that are
+  // defined in Bootstrap _variables.scss, we should remove these
+  'light': 'neutral',
+  'dark': 'neutral',
 );
 
 //Set default colors
@@ -52,42 +90,36 @@ $body-bg: $black;
 $body-color: $interfacewhite;
 
 // Set brand colors
-$primary: $interfaceblue;
-$primary-hover: darken($primary, 8%);
-$primary-dark: mix($primary, $content-bg, 25%);
-$primary-light: scale-color($primary, $lightness: -25%);
-$secondary: $gray-500;
-$secondary-hover: darken($secondary, 8%);
+$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;
 $info: $yellow;
 $warning: $orange;
-$danger: $red;
-$danger-hover: darken($danger, 8%);
-$light: $gray-100;
-$mid: $gray-400; //Added a mid color, useful for input styling
-$dark: $gray-800;
-$green-dark: scale-color($green, $lightness: -45%, $saturation: -10%);
+$danger: var(--dh-color-negative-bg);
+$danger-hover: var(--dh-color-negative-hover-bg);
+// We really don't want to use $light or $dark variables, but Bootstrap defines
+// them in _variables.scss. Explicitly setting them to ensure we are in control
+// of their values. If we can find a way to remove them, we should
+$light: var(--dh-color-gray-light);
+$dark: var(--dh-color-gray-dark);
+// Bootstrap doesn't define $mid, and we want to move away from this particular
+// semantic. Should be deleted by #1635
+$mid: var(--dh-color-gray-mid);
 
-$theme-colors: () !default;
-$theme-colors: map-merge(
-  (
-    'primary': $primary,
-    'primary-hover': $primary-hover,
-    'primary-light': $primary-light,
-    'primary-dark': $primary-dark,
-    'secondary': $secondary,
-    'success': $success,
-    'info': $info,
-    'warning': $warning,
-    'danger': $danger,
-    'light': $light,
-    'dark': $dark,
-    'mid': $mid,
-    'content-bg': $interfacegray,
-    'background': $interfaceblack,
-    'foreground': $interfacewhite,
-  ),
-  $theme-colors
+$semantic-colors: (
+  'primary-hover': $primary-hover,
+  'primary-light': $primary-light,
+  'primary-dark': $primary-dark,
+  'mid': $mid,
+  'content-bg': $interfacegray,
+  'background': $interfaceblack,
+  'foreground': $interfacewhite,
+  'secondary-hover': $secondary-hover,
+  'danger-hover': $danger-hover,
 );
 
 $component-active-bg: $primary;
@@ -114,21 +146,15 @@ $headings-font-weight: 400;
 $text-muted: $gray-400;
 
 //Style Selection highlight color
-//so browsers add alpha to your color by default, ignoring opacity 1
-//by setting rgba with 0.99 it tricks browser into thinking there is alpha applied
-$text-select-color: $primary-hover;
-$text-select-color-editor: lighten(
-  $gray-700,
-  15%
-); //we lighten it abit to account for that 0.01 loss, and because it needs some anyways.
+$text-select-color: var(--dh-color-text-highlight);
 
 //Grid variables, same value as default just making easily accessible
 $grid-gutter-width: 30px;
 
 //Visual Overrides
 $border-radius: 4px;
-$box-shadow: 0 0.1rem 1rem rgba($black, 45%); //because our UI is so dark, we need darker default shadows
-$box-shadow-900: 0 0.1rem 1rem rgba(0, 0, 0, 45%); //darkest shadow for $black popups over $black UI
+$box-shadow: 0 0.1rem 1rem hsla(var(--dh-color-black-hsl), 0.45); //because our UI is so dark, we need darker default shadows
+$box-shadow-900: 0 0.1rem 1rem hsla(var(--dh-color-true-black-hsl), 0.45); //darkest shadow for $black popups over $black UI
 
 //Override Btn
 $btn-border-radius: 4rem;
@@ -141,26 +167,31 @@ $btn-transition:
 $btn-border-width: 2px;
 
 //Override Inputs
-$input-bg: $gray-600;
-$input-disabled-bg: $gray-800;
-$input-color: $foreground;
-$input-border-color: $gray-400;
-$input-placeholder-color: $gray-400;
-$input-focus-border-color: rgba($primary, 85%);
+$input-bg: var(--dh-color-input-bg);
+$input-disabled-bg: var(--dh-color-input-disabled-bg);
+$input-color: var(--dh-color-input-fg);
+$input-border-color: var(--dh-color-input-border);
+$input-placeholder-color: var(--dh-color-input-placeholder);
+$input-focus-border-color: var(--dh-color-input-focus-border);
 
 $input-btn-focus-width: 0.2rem;
-$input-btn-focus-color: rgba($component-active-bg, 35%);
+$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;
 
 //checkbox
 $custom-control-indicator-bg: $gray-600;
+$custom-control-indicator-active-bg: var(--dh-color-accent-1100);
 $custom-control-indicator-bg-size: 75% 75%;
 $custom-control-indicator-disabled-bg: $gray-800;
 $custom-control-indicator-checked-disabled-bg: $gray-800;
 $custom-control-label-disabled-color: $gray-400;
 
-//Custom Select
-$custom-select-indicator-color: $gray-400;
+// The $custom-select-indicator variable is used by Bootstrap to provide the
+// icon for the select dropdown. Inline svgs can't use CSS variables, so we hard
+// code the color to #929192 (the default value of --dh-color-gray-600). PR #1651
+// overrides this icon altogether for known dropdowns, so technically we may not
+// need this, but it's here in case there are any remaining instances.
+$custom-select-indicator-color: #929192;
 $custom-select-bg-size: 16px 16px;
 //dhSort icon encoded
 $custom-select-indicator: str-replace(
@@ -169,7 +200,7 @@ $custom-select-indicator: str-replace(
   '%23'
 );
 $custom-select-focus-box-shadow: $input-btn-focus-box-shadow;
-$custom-select-disabled-color: darken($gray-400, 5%);
+$custom-select-disabled-color: $gray-500;
 $custom-select-disabled-bg: $gray-800;
 
 //modal
@@ -178,15 +209,15 @@ $modal-content-border-width: 0;
 $modal-md: 550px;
 
 // Toast notification
-$toast-bg: $primary-dark;
-$toast-color: $foreground;
-$toast-error-bg: mix($danger, $content-bg, 15%);
-$toast-error-color: $foreground;
+$toast-bg: var(--dh-color-accent-100);
+$toast-color: var(--dh-color-text);
+$toast-error-bg: var(--dh-color-negative-bg);
+$toast-error-color: var(--dh-color-text);
 
 //tooltips
-$tooltip-bg: $gray-700;
-$tooltip-color: $foreground;
-$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem rgba($black, 80%);
+$tooltip-bg: var(--dh-color-tooltip-bg);
+$tooltip-color: var(--dh-color-tooltip-fg);
+$tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem var(--dh-color-tooltip-box-shadow);
 
 //drowdowns
 $dropdown-bg: $gray-600;
@@ -199,7 +230,7 @@ $dropdown-divider-bg: $gray-700;
 $contextmenu-bg: $gray-600;
 $contextmenu-color: $foreground;
 $contextmenu-disabled-color: $text-muted;
-$contextmenu-keyboard-selected-bg: rgba($primary, 50%);
+$contextmenu-keyboard-selected-bg: hsla(var(--dh-color-accent-hsl), 0.5);
 $contextmenu-selected-bg: $primary;
 $contextmenu-selected-color: $foreground;
 
@@ -223,9 +254,21 @@ $transition-long: 0.3s;
 $transition-slow: 0.6s;
 
 //form-validation icon, uses vsWarning icon encoded here as svg
-$form-feedback-icon-invalid-color: theme-color('danger');
+$form-feedback-icon-invalid-color: $danger;
 $form-feedback-icon-invalid: str-replace(
   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='#{$form-feedback-icon-invalid-color}'%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 "),
   '#',
   '%23'
 );
+
+// This section of variables is not consumed directly by DH, but they need to be
+// defined for sass to compile _variables
+$table-dark-bg: $gray-800;
+$table-dark-accent-bg: var(--dh-color-highlight-hover);
+$table-dark-hover-bg: var(--dh-color-highlight-active);
+$table-dark-border-color: $gray-700;
+$popover-bg: var(--dh-color-tooltip-bg);
+$popover-border-color: var(--dh-color-overlay-modal-bg);
+$popover-header-bg: #000;
+$popover-arrow-outer-color: var(--dh-color-dropshadow);
+$custom-range-thumb-active-bg: var(--dh-color-accent-1100);

package/scss/new_variables.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 //Set of spacer variables from the spacer map
 $spacer-0: map-get($spacers, 0); //0
 $spacer-1: map-get($spacers, 1);
@@ -49,6 +51,22 @@ $ant-thickness: 1px;
   }
 }
 
+@function hsla-opacity($semantic-name, $i: 100) {
+  @return hsla(var(--dh-color-#{$semantic-name}-hsl), math.div($i, 100));
+}
+
+@function accent-opacity($i: 100) {
+  @return hsla-opacity('accent', $i);
+}
+
+@function background-opacity($i: 100) {
+  @return hsla-opacity('bg', $i);
+}
+
+@function foreground-opacity($i: 100) {
+  @return hsla-opacity('fg', $i);
+}
+
 $focus-bg-transparency: 0.12;
 $hover-bg-transparency: 0.14;
 $active-bg-transparency: 0.28;

package/scss/util.scss

@@ -1,7 +1,7 @@
 // Setup a mask-image for an inline svg
 @mixin icon-image-mask($mask-image, $size: 16px) {
   background-size: $size;
-  background-color: var(--dh-color-foreground);
+  background-color: var(--dh-color-fg);
   mask-image: $mask-image;
   mask-position: center center;
   mask-repeat: no-repeat;
@@ -52,4 +52,4 @@
 // where we need a solid background image layer.
 @function solid-gradient($color) {
   @return linear-gradient(0deg, $color, $color);
-}
+}