Add color mode on buttons

Orange-OpenSource · Oct 10, 2023 · 420f01e · 420f01e
1 parent 92a4a81
commit 420f01e
Show file tree

Hide file tree

Showing 6 changed files with 188 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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") {