fix: more ms-select Dark Mode styling fixes

ghiscoding · Nov 6, 2024 · 810ce40 · 810ce40
1 parent ea9d14a
commit 810ce40
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 3 deletions.
diff --git a/examples/vite-demo-vanilla-bundle/src/material-styles.scss b/examples/vite-demo-vanilla-bundle/src/material-styles.scss
@@ -184,7 +184,7 @@
       --ms-checkbox-color: #66bb6a;
       --ms-checkbox-hover-color: #{color.adjust(#49a54e, $lightness: 13%)};
       --ms-choice-focus-border-color: #66bb6a;
-      --ms-choice-focus-box-shadow: 0 0 0 2px rgba(#66bb6a,.55);
+      --ms-choice-focus-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(102, 187, 106, 0.3);
       --ms-ok-button-text-color: #66bb6a;
       --ms-ok-button-text-hover-color: #{color.adjust(#66bb6a, $lightness: 5%)};
 

diff --git a/packages/common/src/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss
@@ -119,6 +119,8 @@ $slick-dark-text-color:                                   #d4d4d4;
   --slick-container-border-top:                   1px solid #505050;
   --slick-container-border-left:                  1px solid #505050;
   --slick-container-border-bottom:                1px solid #505050;
+  --slick-form-control-focus-border-color:        #66bb6a;
+  --slick-form-control-focus-box-shadow:          #{0 0 0 2px rgba(#66bb6a, 0.25)};
   --slick-pane-top-border-top:                    1px solid #505050;
   --slick-filled-filter-color:                    #66bb6a;
   --slick-highlight-color:                        #49a54e;
@@ -135,6 +137,7 @@ $slick-dark-text-color:                                   #d4d4d4;
   --slick-multiselect-icon-radio-color:           #66bb6a;
   --ms-checkbox-color:                            #66bb6a;
   --ms-checkbox-hover-color:                      #{color.adjust(#49a54e, $lightness: 13%)};
+  --ms-choice-focus-box-shadow:                   #{0 0 0 2px rgba(#66bb6a, 0.25)};
   --ms-ok-button-text-color:                      #66bb6a;
   --ms-ok-button-text-hover-color:                #{color.adjust(#66bb6a, $lightness: 5%)};
 }
diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss
@@ -144,6 +144,7 @@ $slick-dark-base-dark-menu-bg-color:        #212121;
 .slick-dark-mode .icon-checkbox-container,
 .slick-dark-mode {
   --ms-checkbox-color:                            #66b8ff;
+  --ms-choice-focus-box-shadow:                   #{0 0 0 2.5px rgba(#66b8ff, 0.25)};
   --ms-ok-button-text-color:                      #66b8ff;
   --slick-multiselect-checkbox-color:             #66b8ff;
   --slick-multiselect-ok-button-text-color:       #66b8ff;

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -926,9 +926,10 @@ $slick-empty-data-warning-z-index:                          10 !default;
 @use 'multiple-select-vanilla/dist/styles/sass/multiple-select' with (
   $ms-primary-color:                                        $slick-primary-color,
   $ms-drop-color:                                           $slick-text-color,
-  $ms-choice-bgcolor:                                       $slick-form-control-bg-color,
   $ms-checkbox-color:                                       $slick-multiselect-icon-checked-color,
+  $ms-choice-bgcolor:                                       $slick-form-control-bg-color,
   $ms-choice-border:                                        $slick-multiselect-input-filter-border,
+  $ms-choice-focus-box-shadow:                              $slick-form-control-focus-box-shadow,
   $ms-drop-background:                                      $slick-multiselect-dropdown-bg-color,
   $ms-drop-list-padding:                                    $slick-multiselect-dropdown-list-padding,
   $ms-drop-list-item-align-items:                           center,
@@ -1142,6 +1143,8 @@ $slick-dark-text-color:                                   #d4d4d4 !default;
   --slick-canvas-bg-color:                                #141618;
   --slick-multiselect-checkbox-hover-bg-color:            $slick-dark-base-dark-menu-bg-color;
   --slick-multiselect-input-filter-border:                1px solid #949494;
+  --slick-multiselect-input-focus-border-color:           var(--slick-form-control-focus-border-color);
+  --slick-multiselect-input-focus-box-shadow:             var(--slick-form-control-focus-box-shadow);
   --slick-multiselect-option-highlight-bg-color:          var(--slick-base-dark-menu-item-hover-color);
   --slick-multiselect-select-all-label-hover-bg-color:    var(--slick-base-dark-menu-item-hover-color);
   --slick-multiselect-option-highlight-border:            var(--slick-base-dark-menu-item-border);
@@ -1162,8 +1165,9 @@ $slick-dark-text-color:                                   #d4d4d4 !default;
   --slick-multiselect-select-all-label-hover-border:      var(--slick-base-dark-menu-item-border);
   --slick-multiselect-select-all-text-color:              #fff;
   --ms-checkbox-color:                                    var(--slick-primary-color);
-  --ms-choice-border:                                     var(--slick-base-dark-menu-item-border);
   --ms-choice-bgcolor:                                    var(--slick-base-dark-menu-bg-color);
+  --ms-choice-border:                                     var(--slick-base-dark-menu-item-border);
+  --ms-choice-focus-box-shadow:                           var(--slick-form-control-focus-box-shadow, $slick-form-control-focus-box-shadow);
   --ms-drop-background:                                   var(--slick-base-dark-menu-bg-color);
   --ms-drop-color:                                        #bbbbbb;
   --ms-drop-hide-radio-hover-bgcolor:                     var(--slick-base-dark-menu-item-hover-color);