fix: Bootstrap mixins

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',