feat(css): add CSS vars for Close button (#1531)

Orange-OpenSource · Oct 12, 2022 · 2aef590 · 2aef590
1 parent 9dff4a1
commit 2aef590
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 34 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -26,7 +26,7 @@
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "36.75 kB"
+      "maxSize": "37.0 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",

diff --git a/scss/_close.scss b/scss/_close.scss
@@ -4,25 +4,37 @@
 // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
 
 .btn-close {
-  padding: $btn-close-padding;
-  color: $btn-close-color;
-  background-color: transparent; // include transparent for button elements
-  border: $btn-border-width solid transparent; // Boosted mod
+  // scss-docs-start btn-close-css-vars
+  --#{$prefix}btn-close-padding: #{$btn-close-padding}; // Boosted mod
+  --#{$prefix}btn-close-border-width: #{$btn-close-border-width}; // Boosted mod
+  --#{$prefix}btn-close-color: #{$btn-close-color}; // Boosted mod
+  --#{$prefix}btn-close-bg: #{$btn-close-bg}; // Boosted mod
+  --#{$prefix}btn-close-border-color: #{$btn-close-border-color}; // Boosted mod
+  --#{$prefix}btn-close-hover-color: #{$btn-close-hover-color}; // Boosted mod
+  --#{$prefix}btn-close-active-color: #{$btn-close-active-color}; // Boosted mod
+  --#{$prefix}btn-close-active-border-color: #{$btn-close-active-border-color}; // Boosted mod
+  --#{$prefix}btn-close-disabled-color: #{$btn-close-disabled-color}; // Boosted mod
+  // scss-docs-end btn-close-css-vars
+
+  padding: var(--#{$prefix}btn-close-padding); // Boosted mod
+  color: var(--#{$prefix}btn-close-color); // Boosted mod
+  background-color: var(--#{$prefix}btn-close-bg); // Boosted mod
+  border: var(--#{$prefix}btn-close-border-width) solid var(--#{$prefix}btn-close-border-color); // Boosted mod
   outline-offset: map-get($spacers, 2); // Boosted mod
   @include border-radius();
   @include button-icon($btn-close-bg, $btn-close-width, $btn-close-height, $btn-close-icon-size); // Boosted mod: using mask instead of background
 
   // Override <a>'s hover style
   &:hover {
-    color: $btn-close-color;
+    color: var(--#{$prefix}btn-close-hover-color); // Boosted mod
     text-decoration: none;
   }
 
   // Boosted mod: matching .btn-no-outline
   &:hover,
   &:focus,
   &:active {
-    border-color: $gray-500;
+    border: var(--#{$prefix}btn-close-border-width) solid var(--#{$prefix}btn-close-active-border-color);
   }
 
   &:focus {
@@ -35,40 +47,34 @@
   }
 
   &:active {
-    color: $primary;
+    color: var(--#{$prefix}btn-close-active-color);
   }
   // End mod
 
   &:disabled,
   &.disabled {
-    color: $gray-500; // Boosted mod
+    color: var(--#{$prefix}btn-close-disabled-color); // Boosted mod
     pointer-events: none;
     user-select: none;
   }
 }
 
 // Boosted mod: changing color instead of using filter
 .btn-close-white {
-  &,
-  &:hover:not(:active) {
-    color: $white;
-  }
-
-  &:hover,
-  &:focus,
-  &:active {
-    border-color: $gray-700;
-  }
+  // scss-docs-start btn-close-white-css-vars
+  --#{$prefix}btn-close-color: #{$btn-close-white-color}; // Boosted mod
+  --#{$prefix}btn-close-bg: #{$btn-close-white-bg}; // Boosted mod
+  --#{$prefix}btn-close-border-color: #{$btn-close-white-border-color}; // Boosted mod
+  --#{$prefix}btn-close-hover-color: #{$btn-close-white-hover-color}; // Boosted mod
+  --#{$prefix}btn-close-active-color: #{$btn-close-white-active-color}; // Boosted mod
+  --#{$prefix}btn-close-active-border-color: #{$btn-close-white-active-border-color}; // Boosted mod
+  --#{$prefix}btn-close-disabled-color: #{$btn-close-white-disabled-color}; // Boosted mod
+  // scss-docs-end btn-close-white-css-vars
 
   &:focus {
     &[data-focus-visible-added] {
       box-shadow: 0 0 0 $btn-focus-width $black;
     }
   }
-
-  &:disabled,
-  &.disabled {
-    color: $gray-700;
-  }
 }
 // End mod
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1945,19 +1945,37 @@ $spinner-border-width-lg: $border-width * 4 !default;
 // Close
 
 // scss-docs-start close-variables
-$btn-close-width:            $spacer !default;
-$btn-close-height:           $btn-close-width !default;
-$btn-close-padding:          var(--#{$boosted-prefix}icon-spacing, #{$btn-icon-padding-x}) !default;
-$btn-close-color:            $black !default;
-$btn-close-bg:               var(--#{$boosted-prefix}close-icon) !default;
-$btn-close-focus-shadow:     $btn-focus-box-shadow !default;
+$btn-close-width:               $spacer !default; // Boosted mod
+$btn-close-height:              $btn-close-width !default;
+$btn-close-padding:             var(--#{$boosted-prefix}icon-spacing, #{$btn-icon-padding-x}) !default; // Boosted mod
+$btn-close-border-width:        $border-width !default; // Boosted mod
+$btn-close-border-color:        transparent !default; // Boosted mod
+$btn-close-color:               $black !default;
+$btn-close-bg:                  var(--#{$boosted-prefix}close-icon) !default; // Boosted mod
+$btn-close-focus-shadow:        $btn-focus-box-shadow !default;
+// Boosted mod: no opacity/filter
 
 // Boosted mod
-$btn-close-icon-size:        1rem auto !default;
-$btn-close-padding-sm:       subtract($btn-icon-padding-x, $spacer * .25) !default;
+$btn-close-hover-color:         $btn-close-color !default;
+$btn-close-active-color:        $primary !default;
+$btn-close-active-border-color: $gray-500 !default;
+$btn-close-disabled-color:      $gray-500 !default;
+
+$btn-close-icon-size:           1rem auto !default;
+$btn-close-padding-sm:          subtract($btn-icon-padding-x, $spacer * .25) !default;
 // End mod
 // scss-docs-end close-variables
 
+// scss-docs-start close-white-variables
+$btn-close-white-color:               $white !default; // Boosted mod
+$btn-close-white-bg:                  transparent !default; // Boosted mod
+$btn-close-white-border-color:        transparent !default; // Boosted mod
+$btn-close-white-hover-color:         $btn-close-white-color !default; // Boosted mod
+$btn-close-white-active-color:        $primary !default; // Boosted mod
+$btn-close-white-active-border-color: $gray-700 !default; // Boosted mod
+$btn-close-white-disabled-color:      $gray-700 !default; // Boosted mod
+// scss-docs-end close-white-variables
+
 // Offcanvas
 
 // scss-docs-start offcanvas-variables

diff --git a/site/content/docs/5.2/components/close-button.md b/site/content/docs/5.2/components/close-button.md
@@ -33,7 +33,7 @@ Add `.btn-close-white` to the `.btn-close` for a dark variant.
 
 ## Without specific class
 
-Close buttons can also be created without `.btn-close`.
+Close buttons can also be created without `.btn-close` to reduce the size of your CSS bundle.
 
 {{< example >}}
 <button type="button" class="btn btn-icon btn-no-outline">
@@ -47,8 +47,28 @@ Close buttons can also be created without `.btn-close`.
 </button>
 {{< /example >}}
 
-## Sass
+## CSS
 
+<!-- Boosted mod: CSS var -->
 ### Variables
 
+{{< added-in "5.2.1" >}}
+
+As part of Boosted’s evolving CSS variables approach, close buttons now use local CSS variables on `.btn-close` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="btn-close-css-vars" file="scss/_close.scss" >}}
+
+Customization through CSS variables can be seen on the `.btn-close-white` modifier class where we override specific values without adding duplicate CSS selectors.
+
+{{< scss-docs name="btn-close-white-css-vars" file="scss/_close.scss" >}}
+
+### Sass variables
+
+Variables for all close buttons:
+
 {{< scss-docs name="close-variables" file="scss/_variables.scss" >}}
+
+Variables for the [dark close button](#dark-variant):
+
+{{< scss-docs name="close-white-variables" file="scss/_variables.scss" >}}
+<!-- End mod -->