@deephaven/components 0.55.0 → 0.55.1-alpha-theming-bootstrap.77

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;
+      }
+    }
+  }
+}

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;
+      }
+    }
+  }
+}