fix: several updates to take PR review comments into account

scss/_buttons.scss

@@ -4,8 +4,8 @@
 
 .btn {
   // scss-docs-start btn-css-vars
-  --#{$prefix}btn-padding-start: #{$btn-padding-x};
-  --#{$prefix}btn-padding-end: #{$btn-padding-x};
+  --#{$prefix}btn-padding-start: #{$btn-padding-x}; // OUDS mod
+  --#{$prefix}btn-padding-end: #{$btn-padding-x}; // OUDS mod
   --#{$prefix}btn-padding-y: #{$btn-padding-y};
   --#{$prefix}btn-min-width: #{$ouds-button-size-min-width}; // OUDS mod
   --#{$prefix}btn-min-height: #{$ouds-button-size-min-height}; // OUDS mod

scss/_placeholders.scss

@@ -6,7 +6,7 @@
   background-color: currentcolor;
   opacity: $placeholder-opacity-max;
 
-  // OUDs mod: no &.btn::before
+  // OUDS mod: no &.btn::before
 }
 
 // Sizing

scss/_variables.scss

@@ -933,7 +933,6 @@ $btn-padding-x:               $ouds-button-space-padding-inline-icon-none !defau
 $btn-font-family:             $input-btn-font-family !default;
 // OUDS mod: no `$btn-font-size` which is defined within the font size tokens
 // OUDS mod: no `$btn-line-height` which is defined within the font size tokens
-// OUDS mod: no `$btn-letter-spacing` which is defined within the font size tokens
 $btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping
 
 $btn-padding-y-sm:            $input-btn-padding-y-sm !default;
@@ -951,7 +950,7 @@ $btn-letter-spacing-lg:       calc(#{$letter-spacing-base} * 2) !default; // sty
 $btn-border-width:            $ouds-button-border-width-default !default; // OUDS mod: instead of $input-btn-border-width
 
 $btn-font-weight:             $font-weight-bold !default;
-$btn-box-shadow:              null !default; // OUDS mod
+$btn-box-shadow:              null !default; // OUDS mod: instead of `inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075)`
 $btn-focus-width:             $input-btn-focus-width !default;
 $btn-focus-box-shadow:        0 0 0 $btn-focus-width $white !default;
 $btn-disabled-opacity:        1 !default;
@@ -964,17 +963,17 @@ $btn-link-disabled-color:     var(--#{$prefix}color-content-disabled) !default;
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:           $ouds-button-border-radius !default; // OUDS mod: instead of var(--#{$prefix}border-radius)
-// OUDS mod: no $btn-border-radius-sm
-// OUDS mod: no $btn-border-radius-lg
+// OUDS mod: no $btn-border-radius-sm:        var(--#{$prefix}border-radius-sm) !default;
+// OUDS mod: no $btn-border-radius-lg:        var(--#{$prefix}border-radius-lg) !default;
 
 $btn-transition:              $transition-focus !default; // OUDS mod
 // scss-docs-end btn-variables
 
 // OUDS mod: icon button
 $btn-icon-padding-x:          subtract($ouds-button-space-padding-inline-icon-start, var(--#{$prefix}border-width)) !default;
 $btn-icon-padding-left:       $ouds-button-space-padding-inline-icon-start !default;
-// TODO to confirm to delete $btn-icon-padding-x-sm:       $spacer * .25 !default;
-// TODO to confirm to delete $btn-icon-padding-x-lg:       add($spacer * .5, calc(var(--#{$prefix}border-width) * 1.5)) !default; // stylelint-disable-line function-disallowed-list
+// OUDS mod: no $btn-icon-padding-x-sm:       $spacer * .25 !default;
+// OUDS mod: no $btn-icon-padding-x-lg:       add($spacer * .5, calc(var(--#{$prefix}border-width) * 1.5)) !default; // stylelint-disable-line function-disallowed-list
 // OUDS mod: social button
 // scss-docs-start social-buttons
 $btn-social-networks: (

scss/mixins/_buttons.scss

@@ -37,30 +37,30 @@
 // scss-docs-end btn-variant-mixin
 
 // scss-docs-start btn-outline-variant-mixin - not used by OUDS
-//@mixin button-outline-variant(
-//  $color,
-//  $color-hover: $btn-outline-default-hover-color, // OUDS mod: instead of `color-contrast($color)`
-//  $active-background: $btn-outline-default-active-bg, // OUDS mod: instead of `$color`
-//  $active-border: $btn-outline-default-active-border, // OUDS mod: instead of `$color`
-//  $active-color: $btn-outline-default-active-color, // Booted mod: `color-contrast($active-background)`
-//  $hover-background: $btn-outline-default-hover-bg, // OUDS mod
-//  $hover-border: $btn-outline-default-hover-border // OUDS mod
-//) {
-//  --#{$prefix}btn-color: #{$color};
-//  --#{$prefix}btn-border-color: #{$color};
-//  --#{$prefix}btn-hover-color: #{$color-hover};
-//  --#{$prefix}btn-hover-bg: #{$hover-background}; // OUDS mod: instead of using `#{$active-background}`
-//  --#{$prefix}btn-hover-border-color: #{$hover-border}; // OUDS mod: instead of using `#{$active-border}`
-//  --#{$prefix}btn-focus-shadow-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: #{$btn-outline-default-disabled-color};
-//  --#{$prefix}btn-disabled-bg: #{$btn-outline-default-disabled-bg};
-//  --#{$prefix}btn-disabled-border-color: #{$btn-outline-default-disabled-border};
-//  --#{$prefix}gradient: none;
-//}
+@mixin button-outline-variant(
+  $color,
+  $color-hover: $btn-outline-default-hover-color,
+  $active-background: $btn-outline-default-active-bg,
+  $active-border: $btn-outline-default-active-border,
+  $active-color: $btn-outline-default-active-color,
+  $hover-background: $btn-outline-default-hover-bg,
+  $hover-border: $btn-outline-default-hover-border
+) {
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-border-color: #{$color};
+  --#{$prefix}btn-hover-color: #{$color-hover};
+  --#{$prefix}btn-hover-bg: #{$hover-background}; // OUDS mod: instead of using `#{$active-background}`
+  --#{$prefix}btn-hover-border-color: #{$hover-border}; // OUDS mod: instead of using `#{$active-border}`
+  --#{$prefix}btn-focus-shadow-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: #{$btn-outline-default-disabled-color};
+  --#{$prefix}btn-disabled-bg: #{$btn-outline-default-disabled-bg};
+  --#{$prefix}btn-disabled-border-color: #{$btn-outline-default-disabled-border};
+  --#{$prefix}gradient: none;
+}
 // scss-docs-end btn-outline-variant-mixin
 
 // scss-docs-start btn-size-mixin - not used by OUDS

site/content/docs/0.0/examples/loading-buttons/loading-buttons.css

@@ -11,5 +11,5 @@
 }
 
 .accordion-collapse {
-  background-color: #f4f4f4;
+  background-color: var(--bs-color-bg-secondary);
 }

site/content/docs/0.0/examples/loading-buttons/loading-buttons.js

@@ -17,7 +17,7 @@
     updateStatusMessageCall1 = setInterval(() => {
       statusMessage1.innerHTML = `${statusMessage1.innerHTML}.`
     }, 1000)
-    // stop loading after 10 secondes for this demo
+    // stop loading after 5 secondes for this demo
     setTimeout(() => {
       clearInterval(updateStatusMessageCall1)
       statusMessage1.innerHTML = 'Downloading file 1 is complete'

site/content/docs/0.0/helpers/clearfix.md

@@ -30,11 +30,11 @@ Use the mixin in SCSS:
 }
 ```
 
-<!-- The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout.
+The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout.
 
 {{< example >}}
 <div class="bg-status-info-emphasized clearfix">
   <button type="button" class="btn btn-strong float-start">Example Button floated left</button>
-  <button type="button" class="btn btn-strong float-end">Example Button floated right</button>
+  <button type="button" class="btn btn-default float-end">Example Button floated right</button>
 </div>
-{{< /example >}} -->
+{{< /example >}}

site/content/docs/0.0/helpers/stretched-link.md

@@ -13,16 +13,16 @@ Add `.stretched-link` to a link to make its [containing block](https://developer
 
 Multiple links and tap targets are not recommended with stretched links. However, some `position` and `z-index` styles can help should this be required.
 
-<!--{{< example >}}
+{{< example >}}
 <div class="card" style="width: 18rem;">
-  { {< placeholder width="100%" height="180" class="card-img-top" text="false" title="Card image cap" >}}
+  {{< placeholder width="100%" height="180" class="card-img-top" text="false" title="Card image cap" >}}
   <div class="card-body">
     <h5 class="card-title">Card with stretched link</h5>
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-    <a href="#" class="btn btn-default stretched-link">Go somewhere</a>
+    <a href="#" class="btn btn-strong stretched-link">Go somewhere</a>
   </div>
 </div>
-{{< /example >}}-->
+{{< /example >}}
 
 Most custom components do not have `position: relative` by default, so we need to add the `.position-relative` here to prevent the link from stretching outside the parent element.
 

site/content/docs/0.0/migration-from-boosted.md

@@ -86,7 +86,7 @@ All responsive classes, helpers, and utilities have been updated accordingly to
   - `.btn-primary` and `.btn-dark` will look as `.btn-strong`
   - `.btn-secondary` and `.btn-success` will look as `.btn-default`
   - `.btn-danger` and `.btn-warning` will look as `.btn-negative`
-  - `.btn-info`and `.btn-light` will look as `.btn-minimal`
+  - `.btn-info` and `.btn-light` will look as `.btn-minimal`
 - <span class="badge text-bg-status-negative-emphasized">Breaking</span> `.btn-no-outline` has been removed. You can use `.btn-minimal` instead.
 - <span class="badge text-bg-status-negative-emphasized">Breaking</span> `.btn-outline-*` have been removed. You can still have them using `$enable-bootstrap-compatibility`. They all look like `.btn-default`.
 - <span class="badge text-bg-status-warning-emphasized">Warning</span> `.btn-sm` and `.btn-lg` have been removed.