Fixed bootstrap mixin semantic colors

#1669
deephaven · Dec 12, 2023 · 7bf0f29 · 7bf0f29
1 parent 4423545
commit 7bf0f29
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 12 deletions.
diff --git a/packages/components/scss/bootstrap_override_mixins_forms.scss b/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;

diff --git a/packages/components/scss/bootstrap_override_mixins_text_emphasis.scss b/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;
       }
     }
   }