From 420f01e358b49707c490fc1414722220d4ceb475 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Tue, 10 Oct 2023 08:49:30 +0200 Subject: [PATCH] Add color mode on buttons --- scss/_buttons.scss | 36 +++---- scss/_dropdown.scss | 2 +- scss/_variables.scss | 13 ++- scss/mixins/_buttons.scss | 20 ++-- site/assets/scss/_tarteaucitron.scss | 2 +- site/content/docs/5.3/dark-mode.md | 148 +++++++++++++++++++++++++++ 6 files changed, 188 insertions(+), 33 deletions(-) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 179239108b..c41bd3a840 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -16,6 +16,7 @@ --#{$prefix}btn-border-width: #{$btn-border-width}; --#{$prefix}btn-border-color: transparent; --#{$prefix}btn-border-radius: #{$btn-border-radius}; + --#{$prefix}btn-hover-color: #{$btn-hover-color}; // Boosted mod --#{$prefix}btn-hover-border-color: initial; // Boosted mod --#{$prefix}btn-box-shadow: #{$btn-box-shadow}; --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity}; @@ -98,40 +99,35 @@ // scss-docs-start btn-variant-loops .btn-primary, .btn-warning { - @include button-variant($primary, $primary, $active-background: $white, $active-border: $black); + @include button-variant($primary, $primary, $black, $active-background: transparent, $active-border: var(--#{$prefix}highlight-bg), $active-color: var(--#{$prefix}highlight-bg)); } .btn-light, -.btn-secondary { - @include button-variant($white, $black, $disabled-background: $white, $disabled-border: $gray-500, $disabled-color: $gray-500); +.btn-secondary, +.btn-outline-secondary { + @include button-variant(transparent, var(--#{$prefix}highlight-bg), var(--#{$prefix}highlight-bg), $disabled-background: transparent, $disabled-color: var(--#{$prefix}disabled-color)); } .btn-success { - @include button-variant($success, $success); + @include button-variant($green, $green, $white); } .btn-info, .btn-dark { - @include button-variant($black, $black, $white, $white, $black, $black); + @include button-variant(var(--#{$prefix}highlight-bg), var(--#{$prefix}highlight-bg), var(--#{$prefix}highlight-color), $hover-background: transparent, $hover-border: var(--#{$prefix}highlight-bg), $hover-color: var(--#{$prefix}highlight-bg)); } .btn-danger { - @include button-variant($danger, $danger); + @include button-variant($red, $red, $white); } // scss-docs-end btn-variant-loops -// Boosted mod: only secondary variant -.btn-outline-secondary { - @include button-variant(transparent, $black, $black, $disabled-background: $white, $disabled-border: $gray-500, $disabled-color: $gray-500); -} -// End mod - // Boosted mod: border-only on :hover and :active .btn-no-outline { - --#{$prefix}btn-hover-border-color: #{$gray-500}; - --#{$prefix}btn-active-color: #{$accessible-orange}; - --#{$prefix}btn-active-border-color: #{$gray-500}; - --#{$prefix}btn-disabled-color: #{$gray-500}; + --#{$prefix}btn-hover-border-color: var(--#{$prefix}border-color-translucent); + --#{$prefix}btn-active-color: var(--#{$prefix}link-hover-color); + --#{$prefix}btn-active-border-color: var(--#{$prefix}border-color-translucent); + --#{$prefix}btn-disabled-color: var(--#{$prefix}disabled-color); --#{$prefix}btn-disabled-border-color: var(--#{$prefix}btn-border-color); } // End mod @@ -198,10 +194,10 @@ --#{$prefix}btn-hover-color: #{$white}; --#{$prefix}btn-hover-bg: var(--#{$prefix}network-color, #{$black}); --#{$prefix}btn-hover-border-color: var(--#{$prefix}network-color, #{$black}); - --#{$prefix}btn-active-color: #{$white}; - --#{$prefix}btn-active-bg: #{$black}; - --#{$prefix}btn-active-border-color: #{$black}; - --#{$prefix}btn-disabled-color: #{$gray-500}; + --#{$prefix}btn-active-color: var(--#{$prefix}highlight-color); + --#{$prefix}btn-active-bg: var(--#{$prefix}highlight-bg); + --#{$prefix}btn-active-border-color: var(--#{$prefix}highlight-bg); + --#{$prefix}btn-disabled-color: var(--#{$prefix}disabled-color); --#{$prefix}btn-disabled-bg: transparent; @include border-radius(50%, 50%); @include button-icon(var(--#{$prefix}network-logo)); diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index b8b4d13fe8..6a7bce24da 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -18,7 +18,7 @@ // Boosted mod // TODO: should probably be a `.btn-*` class &:not(.dropdown-toggle-split) { - @include button-variant($dropdown-bg, $dropdown-border-color, $dropdown-color, $white, $dropdown-border-color, $black, $white, $black, $black, $dropdown-bg, $gray-500, $gray-500); + @include button-variant($dropdown-bg, $dropdown-border-color, $dropdown-color, $dropdown-bg, $dropdown-border-color, $dropdown-color, $dropdown-bg, $dropdown-color, $dropdown-color, $dropdown-bg, var(--#{$prefix}disabled-color), var(--#{$prefix}disabled-color)); } // End mod } diff --git a/scss/_variables.scss b/scss/_variables.scss index 98c21a456c..7caeac9509 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -960,6 +960,7 @@ $input-btn-border-width: var(--#{$prefix}border-width) !default; // scss-docs-start btn-variables $btn-color: var(--#{$prefix}body-color) !default; +$btn-hover-color: $btn-color !default; // Boosted mod $btn-padding-y: $input-btn-padding-y !default; $btn-padding-x: $input-btn-padding-x !default; $btn-font-family: $input-btn-font-family !default; @@ -982,6 +983,16 @@ $btn-letter-spacing-lg: $letter-spacing-base * 2 !default; // Boosted mod $btn-border-width: $input-btn-border-width !default; +$btn-default-hover-bg: var(--#{$prefix}highlight-bg) !default; // Boosted mod +$btn-default-hover-border: var(--#{$prefix}highlight-bg) !default; // Boosted mod +$btn-default-hover-color: var(--#{$prefix}highlight-color) !default; // Boosted mod +$btn-default-active-bg: $primary !default; // Boosted mod +$btn-default-active-border: $primary !default; // Boosted mod +$btn-default-active-color: $black !default; // Boosted mod +$btn-default-disabled-bg: var(--#{$prefix}disabled-color) !default; // Boosted mod +$btn-default-disabled-border: var(--#{$prefix}disabled-color) !default; // Boosted mod +$btn-default-disabled-color: var(--#{$prefix}highlight-color) !default; // Boosted mod + $btn-font-weight: $font-weight-bold !default; $btn-box-shadow: null !default; $btn-focus-width: $input-btn-focus-width !default; @@ -991,7 +1002,7 @@ $btn-active-box-shadow: null !default; $btn-link-color: var(--#{$prefix}link-color) !default; $btn-link-hover-color: var(--#{$prefix}link-hover-color) !default; -$btn-link-disabled-color: $gray-500 !default; +$btn-link-disabled-color: var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `$gray-600` // Boosted mod: no `$btn-link-focus-shadow-rgb` // Allows for customizing button radius independently from global border radius diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index e6b8cb584a..a55d676e21 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -8,16 +8,16 @@ @mixin button-variant( $background, $border, - $color: color-contrast($background), - $hover-background: $black, // Boosted mod - $hover-border: $black, // Boosted mod - $hover-color: color-contrast($hover-background), - $active-background: $primary, // Boosted mod - $active-border: $primary, // Boosted mod - $active-color: color-contrast($active-background), - $disabled-background: $gray-500, // Boosted mod - $disabled-border: $gray-500, // Boosted mod - $disabled-color: $white, // Boosted mod + $color, // Boosted mod + $hover-background: $btn-default-hover-bg, // Boosted mod + $hover-border: $btn-default-hover-border, // Boosted mod + $hover-color: $btn-default-hover-color, // Boosted mod + $active-background: $btn-default-active-bg, // Boosted mod + $active-border: $btn-default-active-border, // Boosted mod + $active-color: $btn-default-active-color, // Boosted mod + $disabled-background: $btn-default-disabled-bg, // Boosted mod + $disabled-border: $btn-default-disabled-border, // Boosted mod + $disabled-color: $btn-default-disabled-color, // Boosted mod ) { --#{$prefix}btn-color: #{$color}; --#{$prefix}btn-bg: #{$background}; diff --git a/site/assets/scss/_tarteaucitron.scss b/site/assets/scss/_tarteaucitron.scss index 1b6b2738a3..0266384b8a 100644 --- a/site/assets/scss/_tarteaucitron.scss +++ b/site/assets/scss/_tarteaucitron.scss @@ -72,7 +72,7 @@ } @include tac("CloseAlert") { - @include button-variant($white, $white, $disabled-background: $white, $disabled-border: $gray-500, $disabled-color: $gray-500); + @include button-variant(transparent, transparent, var(--#{$prefix}body-color), $disabled-background: transparent, $disabled-color: var(--#{$prefix}disabled-color)); } @include tac("ClosePanel") { diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md index 52af682252..f8396a0e51 100644 --- a/site/content/docs/5.3/dark-mode.md +++ b/site/content/docs/5.3/dark-mode.md @@ -424,6 +424,154 @@ sitemap_exclude: true +### Buttons + +

No theme

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

Dark theme on container

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

Light theme on container

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

Dark theme on component

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

Light theme on component

+ +
+ + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ + ### Local navigation

No theme