From ca92d34b8ffbf767a57ad671555d72c75f72e374 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Wed, 25 Oct 2023 09:11:50 +0200 Subject: [PATCH] Dark mode: Switches (#2285) --- scss/_root.scss | 2 + scss/_variables.scss | 14 +++++ scss/forms/_form-check.scss | 22 +++---- site/content/docs/5.3/dark-mode.md | 92 ++++++++++++++++++++++++++++++ 4 files changed, 119 insertions(+), 11 deletions(-) diff --git a/scss/_root.scss b/scss/_root.scss index 40a2883d1f..e60b518695 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -145,6 +145,7 @@ --#{$prefix}disabled-filter: #{$disabled-filter}; --#{$prefix}placeholder-color: #{$gray-700}; --#{$prefix}gray-tweak: #{$gray-900}; + --#{$prefix}black-tweak: #{$black}; --#{$prefix}input-filter: #{$invert-filter}; --#{$prefix}icon-filter: none; // ******* End additions for dark-mode @@ -224,6 +225,7 @@ --#{$prefix}disabled-filter: #{$disabled-filter-dark}; --#{$prefix}placeholder-color: #{$gray-600}; --#{$prefix}gray-tweak: #{$gray-700}; + --#{$prefix}black-tweak: #{$gray-950}; --#{$prefix}input-filter: none; --#{$prefix}icon-filter: #{$invert-filter}; // ******* End additions for dark-mode diff --git a/scss/_variables.scss b/scss/_variables.scss index f5d96d883b..9c5f5b916f 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1242,6 +1242,13 @@ $form-switch-bg-square-size: add(1rem, $spacer * .5) !default; // Boosted $form-switch-border-radius: null !default; // Boosted mod $form-switch-transition: background-position .15s ease-in-out, $transition-focus !default; // Boosted mod +$form-switch-square-bg: var(--#{$prefix}black-tweak) !default; // Boosted mod +$form-switch-bg: $white !default; // Boosted mod +$form-switch-border-color: $white !default; // Boosted mod +$form-switch-filter: var(--#{$prefix}input-filter) !default; // Boosted mod +$form-switch-focus-visible-inner: $black !default; // Boosted mod +$form-switch-focus-visible-outer: $white !default; // Boosted mod + // Boosted mod: no $form-switch-focus-color // Boosted mod: no $form-switch-focus-bg-image @@ -1250,6 +1257,13 @@ $form-switch-checked-bg-image: $form-check-input-checked-bg-image !default; / $form-switch-checked-bg-size: add(map-get($spacers, 2), map-get($spacers, 1)) !default; // Boosted mod // stylelint-disable-next-line function-disallowed-list $form-switch-checked-bg-position: calc(var(--#{$prefix}border-width) * 3) 50% !default; // Boosted mod + +$form-switch-checked-square-bg: var(--#{$prefix}body-bg) !default; // Boosted mod +$form-switch-checked-bg: $primary !default; // Boosted mod +$form-switch-checked-border-color: $primary !default; // Boosted mod +$form-switch-checked-filter: none !default; // Boosted mod +$form-switch-checked-focus-inner: var(--#{$prefix}focus-visible-inner-color) !default; // Boosted mod +$form-switch-checked-focus-outer: var(--#{$prefix}focus-visible-outer-color) !default; // Boosted mod // scss-docs-end form-switch-variables // scss-docs-start input-group-variables diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index e68035014b..52b60744b1 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -154,7 +154,7 @@ .form-switch { // Boosted mod - --#{$prefix}switch-gradient: #{linear-gradient(to right, $black $form-switch-bg-square-size, transparent)}; + --#{$prefix}switch-gradient: #{linear-gradient(to right, $form-switch-square-bg $form-switch-bg-square-size, transparent)}; min-height: $form-switch-width * .5; padding-left: $form-switch-padding-start; @@ -166,29 +166,29 @@ width: $form-switch-width; height: $form-switch-width * .5; margin-left: $form-switch-padding-start * -1; - background-color: $white; // Boosted mod + background-color: $form-switch-bg; // Boosted mod background-image: var(--#{$prefix}form-switch-bg), var(--#{$prefix}switch-gradient); // Boosted mod: extra param `var(--#{$prefix}switch-gradient)` - filter: $invert-filter; // Boosted mod + filter: $form-switch-filter; // Boosted mod background-position: $form-switch-bg-position, 0 0; background-size: $form-switch-bg-size, $form-switch-bg-square-size 100%; // Get a 1px separation - border-color: $white; // Boosted mod + border-color: $form-switch-border-color; // Boosted mod @include border-radius($form-switch-border-radius, 0); @include transition($form-switch-transition); &:focus { &[data-focus-visible-added] { - @include focus-visible($color: var(--#{$prefix}focus-visible-inner-color), $box-color: var(--#{$prefix}focus-visible-outer-color)); + @include focus-visible($color: $form-switch-focus-visible-outer, $box-color: $form-switch-focus-visible-inner); } } &:checked { - background-color: $primary; - filter: none; // Boosted mod - border-color: $primary; + background-color: $form-switch-checked-bg; + filter: $form-switch-checked-filter; // Boosted mod + border-color: $form-switch-checked-border-color; &:focus { &[data-focus-visible-added] { - @include focus-visible($color: var(--#{$prefix}focus-visible-outer-color), $box-color: var(--#{$prefix}focus-visible-inner-color)); + @include focus-visible($color: $form-switch-checked-focus-outer, $box-color: $form-switch-checked-focus-inner); } } @@ -203,7 +203,7 @@ } &:not(:disabled) { - --#{$prefix}switch-gradient: #{linear-gradient(to right, $white $form-switch-bg-square-size, transparent)}; + --#{$prefix}switch-gradient: #{linear-gradient(to right, $form-switch-checked-square-bg $form-switch-bg-square-size, transparent)}; } } @@ -215,7 +215,7 @@ &:disabled { background-color: $form-check-input-disabled-color; - filter: $invert-filter; + filter: $form-check-input-disabled-filter; border-color: $form-check-input-disabled-color; } } diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md index b88b1e6ba2..1405d41ad4 100644 --- a/site/content/docs/5.3/dark-mode.md +++ b/site/content/docs/5.3/dark-mode.md @@ -121,6 +121,11 @@ sitemap_exclude: true
+
+
--bs-black-tweak
+
+
+
## Components @@ -2859,3 +2864,90 @@ sitemap_exclude: true + +### Switches + +

No theme

+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +

Dark theme on container

+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +

Light theme on container

+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +

Dark theme on component

+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +

Light theme on component

+ +
+
+ +
+
+ +
+
+ +
+
+ +
+