feat(buttons): reintroduce colored versions from Bootstrap of buttons and outline buttons

.bundlewatch.config.json

@@ -26,11 +26,11 @@
     },
     {
       "path": "./dist/css/boosted.css",
-      "maxSize": "43.75 kB"
+      "maxSize": "44.25 kB"
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "40.75 kB"
+      "maxSize": "41.0 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",

scss/_buttons.scss

@@ -97,8 +97,7 @@
 
 // Boosted mod: inconsistent theming ¯\_(ツ)_/¯
 // scss-docs-start btn-variant-loops
-.btn-primary,
-.btn-warning {
+.btn-primary {
   @include button-variant($primary, $primary, $active-background: $white, $active-border: $black);
   &.btn-inverse {
     @include button-variant($primary, $primary, $black, $white, $white, $black, $black, $white, $white, $gray-700, $gray-700, $black, $black);
@@ -116,34 +115,50 @@
 .btn-success {
   @include button-variant($success, $success);
   &.btn-inverse {
-    @include button-variant($success, $success, $black,  $white, $white, $black, $primary, $primary, $black, $gray-700, $gray-700, $black, $black);
+    @include button-variant($success, $success, $black, $white, $white, $black, $primary, $primary, $black, $gray-700, $gray-700, $black, $black);
   }
 }
 
-.btn-info,
-.btn-dark {
-  @include button-variant($black, $black, $white, $white, $black, $black);
+.btn-danger {
+  @include button-variant($danger, $danger);
   &.btn-inverse {
-    @include button-variant($white, $white, $black, $black, $white, $white, $primary, $primary, $black, $gray-700, $gray-700, $black, $black);
+    @include button-variant($danger, $danger, $white, $white, $white, $black, $primary, $primary, $black, $gray-700, $gray-700, $black, $black);
   }
 }
 
-.btn-danger {
-  @include button-variant($danger, $danger);
+.btn-warning {
+  @include button-variant($warning, $warning);
   &.btn-inverse {
-    @include button-variant($danger, $danger, $white, $white, $white, $black, $primary, $primary, $black, $gray-700, $gray-700, $black, $black);
+    @include button-variant($warning, $warning, $black, $white, $white, $black, $primary, $primary, $black, $gray-700, $gray-700, $black, $black);
   }
 }
-// scss-docs-end btn-variant-loops
-// End mod
 
-// 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);
+.btn-info {
+  @include button-variant($info, $info);
   &.btn-inverse {
-    @include button-variant(transparent, $white, $white, $white, $white, $black, $primary, $primary, $black, transparent, $gray-700, $gray-700, $black);
+    @include button-variant($info, $info, $black, $white, $white, $black, $primary, $primary, $black, $gray-700, $gray-700, $black, $black);
   }
 }
+
+.btn-dark {
+  @include button-variant($black, $black, $white, $white, $black, $black);
+  &.btn-inverse {
+    @include button-variant($white, $white, $black, $black, $white, $white, $primary, $primary, $black, $gray-700, $gray-700, $black, $black);
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .btn-outline-#{$color} {
+    @include button-outline-variant($value, $active-background: $primary, $active-border: $primary, $hover-background: $value, $hover-border: $value);
+
+    @if #{$color} == "secondary" or #{$color} == "dark" {
+      &.btn-inverse {
+        @include button-outline-variant($white, $active-background: $primary, $active-border: $primary, $hover-background: $white, $hover-border: $white);
+      }
+    }
+  }
+}
+// scss-docs-end btn-variant-loops
 // End mod
 
 // Boosted mod: border-only on :hover and :active

scss/mixins/_buttons.scss

@@ -38,7 +38,32 @@
 }
 // scss-docs-end btn-variant-mixin
 
-// Boosted mod: no `@mixin button-outline-variant`
+// scss-docs-start btn-outline-variant-mixin
+@mixin button-outline-variant(
+  $color,
+  $color-hover: color-contrast($color),
+  $active-background: $color,
+  $active-border: $color,
+  $active-color: color-contrast($active-background),
+  $hover-background: $active-background, // Boosted mod
+  $hover-border: $active-border // Boosted mod
+) {
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-border-color: #{$color};
+  --#{$prefix}btn-hover-color: #{$color-hover};
+  --#{$prefix}btn-hover-bg: #{$hover-background}; // Boosted mod: instead of using `#{$active-background}`
+  --#{$prefix}btn-hover-border-color: #{$hover-border}; // Boosted mod: instead of using `#{$active-border}`
+  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border};
+  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{$prefix}btn-disabled-color: #{$color};
+  --#{$prefix}btn-disabled-bg: transparent;
+  --#{$prefix}btn-disabled-border-color: #{$color};
+  --#{$prefix}gradient: none;
+}
+// scss-docs-end btn-outline-variant-mixin
 
 // scss-docs-start btn-size-mixin
 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius, $line-height: null, $icon-spacing: $btn-icon-padding-x, $letter-spacing: $letter-spacing-base) {

site/assets/js/tac.js

@@ -29,7 +29,7 @@
   window.addEventListener('tac.open_alert', () => {
     const alert = document.getElementById('tarteaucitronAlertBig')
 
-    document.getElementById('tarteaucitronCloseAlert').classList.add('btn', 'btn-sm', 'btn-info', 'btn-inverse', 'ms-lg-2')
+    document.getElementById('tarteaucitronCloseAlert').classList.add('btn', 'btn-sm', 'btn-secondary', 'btn-inverse', 'ms-lg-2')
     alert.querySelector('.tarteaucitronAllow').classList.add('btn', 'btn-sm', 'btn-success', 'btn-inverse', 'mx-sm-2', 'ms-lg-auto', 'my-2', 'my-lg-0')
     alert.querySelector('.tarteaucitronAllow').innerHTML = tarteaucitron.lang.acceptAll
     alert.querySelector('.tarteaucitronDeny').classList.add('btn', 'btn-sm', 'btn-danger', 'btn-inverse', 'mx-sm-2', 'my-2', 'my-lg-0')

site/content/docs/5.3/components/button-group.md

@@ -110,7 +110,7 @@ This variant should not be used because it does not respect the Orange Design Sy
     <button type="button" class="btn btn-secondary">7</button>
   </div>
   <div class="btn-group" role="group" aria-label="Third group">
-    <button type="button" class="btn btn-info">8</button>
+    <button type="button" class="btn btn-dark">8</button>
   </div>
 </div>
 {{< /example >}}

site/content/docs/5.3/components/buttons.md

@@ -24,6 +24,12 @@ The `.btn` class is intended to be used in conjunction with our button variants,
 
 Boosted includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control.
 
+{{< design-callout-alert >}}
+Warning, info, and light variants should not be used because they do not respect the Orange Design System specifications as they are inherited from Bootstrap.
+
+Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) guidelines on the Orange Design System website.
+{{< /design-callout-alert >}}
+
 {{< example >}}
 {{< buttons.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
@@ -34,6 +40,16 @@ Boosted includes several button variants, each serving its own semantic purpose,
 <button type="button" class="btn btn-link">Link</button>
 {{< /example >}}
 
+{{< example class="bg-dark" >}}
+{{< buttons.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<button type="button" class="btn btn-inverse btn-{{ .name }}">{{ .name | title }}</button>
+{{- end -}}
+{{< /buttons.inline >}}
+
+<button type="button" class="btn btn-link">Link</button>
+{{< /example >}}
+
 {{< callout info >}}
 {{< partial "callouts/warning-color-assistive-technologies.md" >}}
 {{< /callout >}}
@@ -211,14 +227,32 @@ When using button classes on `<a>` elements that are used to trigger in-page fun
 
 ## Outline buttons
 
-In need of a button with a transparent default background color? Replace the default modifier classes with the `.btn-outline-secondary` one to remove all background colors on buttons.
+{{< design-callout-alert >}}
+The only variant of outline buttons that should be used is the `.btn-outline-secondary` one. The other variants should not be used because they do not respect the Orange Design System specifications as they are inherited from Bootstrap.
+
+Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) guidelines on the Orange Design System website.
+{{< /design-callout-alert >}}
+
+In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.
+
+{{< example >}}
+{{< buttons.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<button type="button" class="btn btn-outline-{{ .name }}">{{ .name | title }}</button>
+{{- end -}}
+{{< /buttons.inline >}}
+{{< /example >}}
 
-{{< example class="bg-supporting-blue" >}}
-<button type="button" class="btn btn-outline-secondary">Secondary</button>
+{{< example class="bg-dark" >}}
+{{< buttons.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<button type="button" class="btn btn-inverse btn-outline-{{ .name }}">{{ .name | title }}</button>
+{{- end -}}
+{{< /buttons.inline >}}
 {{< /example >}}
 
 {{< callout info >}}
-This button should only be used on a light background in order to have sufficient contrast, otherwise use its dark variant.
+Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
 {{< /callout >}}
 
 ## Sizes
@@ -402,11 +436,11 @@ Each `.btn-*` modifier class updates the appropriate CSS variables to minimize a
 
 ### Sass mixins
 
-There are three mixins for buttons: button mixins (based on `$theme-colors`), a button size mixin and a button icon mixin.
+There are four mixins for buttons: button and button outline variant mixins (both based on `$theme-colors`), plus a button size mixin, and a button icon mixin.
 
 {{< scss-docs name="btn-variant-mixin" file="scss/mixins/_buttons.scss" >}}
 
-<!-- Boosted mod: no .btn-outline -->
+{{< scss-docs name="btn-outline-variant-mixin" file="scss/mixins/_buttons.scss" >}}
 
 {{< scss-docs name="btn-size-mixin" file="scss/mixins/_buttons.scss" >}}
 

site/content/docs/5.3/migration.md

@@ -9,6 +9,21 @@ aliases:
 toc: true
 ---
 
+## v5.3.3
+
+<hr class="mb-4">
+
+Boosted v5.3.3 has landed also including specific Boosted content as usual.
+
+If you need more details about the changes, please refer to the [v5.3.3 release](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/releases/tag/v5.3.3).
+
+### Components
+
+- **Buttons**
+  - <span class="badge bg-warning">Warning</span> Warning and info buttons are now rendered in yellow and blue colors. Please check that it doesn't break your design.
+  - All versions of outline buttons are now displayed in the documentation for Bootstrap compatibility reasons even if you can only use the secondary variant.
+    - A new ` button-outline-variant` Sass mixin is now available.
+
 ## v5.3.2
 
 <hr class="mb-4">