fix: Bootstrap mixins (#1692)

- Fixed semantic color mappings for forms and emphasized text.
Validation error labels are now red instead of white. Link sample added
to the styleguide to show proper colors that were incorrectly white
before
- Added anti-aliasing to button text
- font-weight is now bold for outlined buttons (consistent with
Spectrum)

#1693

packages/code-studio/src/styleguide/Buttons.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React, { Component, ReactElement } from 'react';
+import { Flex } from '@adobe/react-spectrum';
 import { Button, ButtonOld, SocketedButton } from '@deephaven/components';
 import { dhTruck } from '@deephaven/icons';
 import { sampleSectionIdAndClasses } from './utils';
@@ -47,6 +48,34 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
     );
   }
 
+  static renderLinks(): ReactElement {
+    const levelMap = {
+      primary: 'accent',
+      secondary: 'neutral',
+      success: 'positive',
+      info: 'info',
+      warning: 'notice',
+      danger: 'negative',
+    };
+
+    return (
+      <div
+        {...sampleSectionIdAndClasses('links')}
+        style={{ paddingTop: '1rem' }}
+      >
+        <h5>Links</h5>
+        <Flex gap="1rem">
+          {Object.entries(levelMap).map(([level, semantic]) => (
+            // eslint-disable-next-line jsx-a11y/anchor-is-valid
+            <a key={level} className={`text-${level}`}>
+              {level} ({semantic})
+            </a>
+          ))}
+        </Flex>
+      </div>
+    );
+  }
+
   static renderSocketedButtons(): ReactElement {
     return (
       <div {...sampleSectionIdAndClasses('buttons-socketed')}>
@@ -139,6 +168,7 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
     const buttons = ['', 'outline'].map(type => Buttons.renderButtons(type));
     const inlineButtons = this.renderInlineButtons();
     const socketedButtons = Buttons.renderSocketedButtons();
+    const links = Buttons.renderLinks();
 
     return (
       <div>
@@ -147,6 +177,7 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
           {buttons}
           {inlineButtons}
           {socketedButtons}
+          {links}
         </div>
       </div>
     );

packages/components/scss/BaseStyleSheet.scss

@@ -124,6 +124,8 @@ button:focus {
 //Make btns a minumum size
 .btn {
   min-width: 7rem;
+  // Matching Spectrum styles
+  -webkit-font-smoothing: antialiased;
 }
 
 span.btn-disabled-wrapper {
@@ -308,6 +310,7 @@ span.btn-disabled-wrapper {
   background: var(--dh-color-action-bg);
   border: 1px solid var(--dh-color-action-border);
   color: var(--dh-color-action-fg);
+  font-weight: $font-weight-normal;
 
   &.active {
     border-color: var(--dh-color-action-active-border);

packages/components/scss/bootstrap_override_mixins_buttons.scss

@@ -17,7 +17,6 @@
   $color: var(--dh-color-#{$semantic-value}-contrast);
 
   color: $color;
-  font-weight: var(--spectrum-global-font-weight-bold);
   @include gradient-bg($background);
 
   border-color: $border;

packages/components/scss/bootstrap_override_mixins_forms.scss

@@ -1,5 +1,6 @@
 /* stylelint-disable scss/comment-no-empty */
 // Bootstrap mixin overrides for `bootstrap/scss/mixins/_forms.scss`
+@use 'sass:map';
 
 // Form control focus state
 //
@@ -38,9 +39,11 @@
 // 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) {
+@mixin form-validation-state($state, $bootstrap-value, $icon) {
+  $semantic-value: map.get($bootstrap-dh-semantic-map, $bootstrap-value) or '';
+
   // DH Customization: Convert semantic value to css variable
-  $color: var(--dh-color-visual-#{$semantic-value});
+  $color: var(--dh-color-#{$semantic-value}-bg);
 
   .#{$state}-feedback {
     display: none;

packages/components/scss/bootstrap_override_mixins_text_emphasis.scss

@@ -1,20 +1,20 @@
 // Bootstrap mixin overrides for `bootstrap/scss/mixins/_text-emphasis.scss`
+@use 'sass:map';
+
+@mixin text-emphasis-variant(
+  $parent,
+  $bootstrap-value,
+  $ignore-warning: false
+) {
+  $semantic-value: map.get($bootstrap-dh-semantic-map, $bootstrap-value) or '';
 
-@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;
-    }
+    color: var(--dh-color-#{$semantic-value}-bg) !important;
   }
   @if $emphasized-link-hover-darken-percentage != 0 {
     a#{$parent} {
       @include hover-focus {
-        color: var(
-          --spectrum-#{$semantic-value}-background-color-default
-        ) !important;
+        color: var(--dh-color-#{$semantic-value}-hover-bg) !important;
       }
     }
   }

packages/components/scss/bootstrap_overrides.scss

@@ -165,6 +165,7 @@ $btn-transition:
   border-color 0.12s ease-in-out,
   box-shadow 0.12s ease-in-out; //default 0.15 is too long
 $btn-border-width: 2px;
+$btn-font-weight: var(--spectrum-global-font-weight-bold);
 
 //Override Inputs
 $input-bg: var(--dh-color-input-bg);

packages/components/src/CustomTimeSelect.scss

@@ -17,6 +17,7 @@ $cs-option-hover-color: $dropdown-link-hover-color;
     border-radius: $border-radius;
     border: $input-border-width solid $input-border-color;
     min-width: 14rem;
+    font-weight: $font-weight-normal;
 
     .cs-caret {
       @include caret-icon;

packages/components/src/HierarchicalCheckboxMenu.scss

@@ -11,6 +11,7 @@
   border: $input-border-width solid $input-border-color;
   background-color: $input-bg;
   padding: $custom-select-padding-y $custom-select-padding-x;
+  font-weight: $font-weight-normal;
 
   .cs-caret {
     @include caret-icon;

packages/components/src/theme/theme-dark/theme-dark-semantic.css

@@ -149,7 +149,7 @@
   --dh-color-keyboard-selected-bg: hsla(var(--dh-color-accent-hsl), 0.5);
 
   /* Shadows / Overlays */
-  --dh-color-dropshadow: hsla(var(--dh-color-visual-gray-hsl), 0.8);
+  --dh-color-dropshadow: hsla(var(--dh-color-true-black-hsl), 0.8);
   --dh-color-overlay-modal-bg: hsla(var(--dh-color-visual-gray-hsl), 0.6);
   --dh-color-overlay-hover-bg: hsla(var(--dh-color-visual-gray-hsl), 0.08);
 

tests/styleguide.spec.ts

@@ -15,6 +15,7 @@ const sampleSectionIds: string[] = [
   'sample-section-buttons-outline',
   'sample-section-buttons-inline',
   'sample-section-buttons-socketed',
+  'sample-section-links',
   'sample-section-progress',
   'sample-section-inputs',
   'sample-section-item-list-inputs',