diff --git a/examples/vite-demo-vanilla-bundle/src/material-styles.scss b/examples/vite-demo-vanilla-bundle/src/material-styles.scss index d9df15743..b08937a5e 100644 --- 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 index fa4129f9d..e78f03ac6 100644 --- 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%)}; } \ No newline at end of file diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss index 8655252d3..80d5b76bd 100644 --- 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 index d717da5f1..e225a52e8 100644 --- 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);