diff --git a/scss/_root.scss b/scss/_root.scss index e60b518695..3684f7bd8d 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -148,6 +148,8 @@ --#{$prefix}black-tweak: #{$black}; --#{$prefix}input-filter: #{$invert-filter}; --#{$prefix}icon-filter: none; + --#{$prefix}select-indicator: #{$form-select-indicator}; + --#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator}; // ******* End additions for dark-mode } @@ -228,6 +230,8 @@ --#{$prefix}black-tweak: #{$gray-950}; --#{$prefix}input-filter: none; --#{$prefix}icon-filter: #{$invert-filter}; + --#{$prefix}select-indicator: #{$form-select-indicator-dark}; + --#{$prefix}select-disabled-indicator: #{$form-select-disabled-indicator-dark}; // ******* End additions for dark-mode // scss-docs-end root-dark-mode-vars } diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss index 65a02315cb..501db9f13f 100644 --- a/scss/_variables-dark.scss +++ b/scss/_variables-dark.scss @@ -99,7 +99,8 @@ $focus-visible-outer-color-dark: $white !default; // Boosted mod // // Boosted mod: no $form-select-indicator-color-dark -// Boosted mod: no $form-select-indicator-dark +$form-select-indicator-dark: escape-svg(url("data:image/svg+xml,")) !default; // Boosted mod: instead of Bootstrap svg +$form-select-disabled-indicator-dark: escape-svg(url("data:image/svg+xml,")) !default; // Boosted mod // Boosted mod: no $form-switch-color-dark // Boosted mod: no $form-switch-bg-image-dark diff --git a/scss/_variables.scss b/scss/_variables.scss index 9c5f5b916f..d7f8fb0128 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1285,13 +1285,13 @@ $form-select-font-weight: $input-font-weight !default; $form-select-line-height: $input-line-height !default; $form-select-color: $input-color !default; $form-select-bg: $input-bg !default; -$form-select-disabled-color: $gray-700 !default; +$form-select-disabled-color: $input-disabled-color !default; // Boosted mod: instead of `null` $form-select-disabled-bg: $input-disabled-bg !default; $form-select-disabled-border-color: $input-disabled-border-color !default; $form-select-bg-position: right $form-select-padding-x top add(50%, 1px) !default; $form-select-bg-size: .875rem 1rem !default; // In pixels because image dimensions -$form-select-indicator: url("data:image/svg+xml,") !default; -$form-select-disabled-indicator: url("data:image/svg+xml,") !default; // Boosted mod +$form-select-indicator: escape-svg(url("data:image/svg+xml,")) !default; // Boosted mod: instead of Bootstrap svg +$form-select-disabled-indicator: escape-svg(url("data:image/svg+xml,")) !default; // Boosted mod $form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default; $form-select-feedback-icon-position: center right $form-select-indicator-padding !default; diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss index 3b4483f54a..4360ce2cae 100644 --- a/scss/forms/_form-select.scss +++ b/scss/forms/_form-select.scss @@ -4,7 +4,7 @@ // https://primer.github.io/. .form-select { - --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)}; + --#{$prefix}form-select-bg-img: var(--#{$prefix}select-indicator); // Boosted mod: instead of `#{escape-svg($form-select-indicator)}` display: block; width: 100%; @@ -45,7 +45,7 @@ &:disabled { color: $form-select-disabled-color; background-color: $form-select-disabled-bg; - background-image: escape-svg($form-select-disabled-indicator); // Boosted mod + background-image: var(--#{$prefix}select-disabled-indicator); // Boosted mod border-color: $form-select-disabled-border-color; } diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md index 1405d41ad4..35434394b5 100644 --- a/site/content/docs/5.3/dark-mode.md +++ b/site/content/docs/5.3/dark-mode.md @@ -2658,6 +2658,93 @@ sitemap_exclude: true +### Select + +