More button cleanup (#41968)

* Clean up button vars, docs, fix up .btn-link

* more buttons docs cleanup

* Remove colored links for theme utilities

* Fix scssdocs

* Fix broken link

* Fix another link

Author: mdo

scss/_variables.scss

@@ -337,30 +337,6 @@ $mark-color:                  $body-color !default;
 $mark-bg:                     var(--yellow-100) !default;
 // scss-docs-end type-variables
 
-
-// Buttons + Forms
-//
-// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
-
-// scss-docs-start input-btn-variables
-$input-btn-padding-y:         .375rem !default;
-$input-btn-padding-x:         .75rem !default;
-$input-btn-font-family:       null !default;
-$input-btn-font-size:         $font-size-base !default;
-$input-btn-line-height:       $line-height-base !default;
-
-$input-btn-padding-y-sm:      .25rem !default;
-$input-btn-padding-x-sm:      .5rem !default;
-$input-btn-font-size-sm:      $font-size-sm !default;
-
-$input-btn-padding-y-lg:      .5rem !default;
-$input-btn-padding-x-lg:      1rem !default;
-$input-btn-font-size-lg:      $font-size-lg !default;
-
-$input-btn-border-width:      var(--border-width) !default;
-// scss-docs-end input-btn-variables
-
-
 // Z-index master list
 //
 // Warning: Avoid customizing these values. They're used for a bird's eye view

scss/buttons/_button-group.scss

@@ -15,17 +15,21 @@
     > [class*="btn-"] {
       position: relative;
       flex: 1 1 auto;
+
+      &:hover {
+        z-index: 1;
+      }
     }
 
-    // Bring the hover, focused, and "active" buttons to the front to overlay
-    // the borders properly
     > .btn-check:has(input:checked),
-    > .btn-check:has(input:focus),
-    > [class*="btn-"]:hover,
-    > [class*="btn-"]:focus,
     > [class*="btn-"]:active,
     > [class*="btn-"].active {
-      z-index: 1;
+      z-index: 2;
+    }
+
+    > .btn-check:has(input:focus),
+    > [class*="btn-"]:focus {
+      z-index: 3;
     }
   }
 

scss/buttons/_button-variables.scss

@@ -7,26 +7,25 @@
 
 // scss-docs-start btn-variables
 $btn-color:                   var(--fg-body) !default;
-$btn-padding-y:               $input-btn-padding-y !default;
-$btn-padding-x:               $input-btn-padding-x !default;
-$btn-font-family:             $input-btn-font-family !default;
-$btn-font-size:               $input-btn-font-size !default;
-$btn-line-height:             $input-btn-line-height !default;
+$btn-padding-y:               .375rem !default;
+$btn-padding-x:               .75rem !default;
+$btn-font-size:               var(--font-size-base) !default;
+$btn-line-height:             var(--line-height-base) !default;
 $btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping
 
 $btn-padding-y-xs:            .125rem !default;
 $btn-padding-x-xs:            .375rem !default;
 $btn-font-size-xs:            var(--font-size-xs) !default;
 $btn-line-height-xs:          1.125rem !default;
 
-$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
-$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
+$btn-padding-y-sm:            .25rem !default;
+$btn-padding-x-sm:            .5rem !default;
 $btn-font-size-sm:            var(--font-size-sm) !default;
 $btn-line-height-sm:          1.125rem !default;
 
-$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
-$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
-$btn-font-size-lg:            16px !default;
+$btn-padding-y-lg:            .5rem !default;
+$btn-padding-x-lg:            1rem !default;
+$btn-font-size-lg:            var(--font-size-md) !default;
 $btn-line-height-lg:          1.25rem !default;
 
 // Intentionally left for folks who want it
@@ -35,9 +34,9 @@ $btn-line-height-lg:          1.25rem !default;
 // $btn-font-size-xl:            var(--font-size-lg) !default;
 // $btn-line-height-xl:          1.5rem !default;
 
-$btn-border-width:            $input-btn-border-width !default;
+$btn-border-width:            var(--border-width) !default;
 
-$btn-font-weight:             $font-weight-normal !default;
+$btn-font-weight:             var(--font-weight-normal) !default;
 $btn-disabled-opacity:        .65 !default;
 
 $btn-link-color:              var(--link-color) !default;

scss/buttons/_button.scss

@@ -138,7 +138,7 @@ $btn-variant-selectors: () !default;
     --btn-min-height: 2.25rem;
     --btn-padding-x: #{$btn-padding-x};
     --btn-padding-y: #{$btn-padding-y};
-    --btn-font-family: #{$btn-font-family};
+    // --btn-font-family: #{$btn-font-family};
     --btn-font-size: #{$btn-font-size};
     --btn-font-weight: #{$btn-font-weight};
     --btn-line-height: #{$btn-line-height};
@@ -156,7 +156,7 @@ $btn-variant-selectors: () !default;
     justify-content: center;
     min-height: var(--btn-min-height);
     padding: var(--btn-padding-y) var(--btn-padding-x);
-    font-family: var(--btn-font-family);
+    // font-family: var(--btn-font-family);
     font-size: var(--btn-font-size);
     font-weight: var(--btn-font-weight);
     line-height: var(--btn-line-height);
@@ -300,24 +300,27 @@ $btn-variant-selectors: () !default;
     --btn-bg: transparent;
     --btn-border-color: transparent;
     --btn-hover-color: #{$btn-link-hover-color};
+    --btn-hover-bg: transparent;
     --btn-hover-border-color: transparent;
     --btn-active-color: #{$btn-link-hover-color};
+    --btn-active-bg: transparent;
     --btn-active-border-color: transparent;
     --btn-disabled-color: #{$btn-link-disabled-color};
     --btn-disabled-border-color: transparent;
 
+    color: var(--theme-text, var(--btn-color));
     text-decoration: var(--link-decoration);
 
     @if $enable-gradients {
       background-image: none;
     }
 
     &:focus-visible {
-      color: var(--btn-color);
+      color: var(--theme-text, var(--btn-color));
     }
 
     &:hover {
-      color: var(--btn-hover-color);
+      color: var(--theme-text-emphasis, var(--btn-hover-color));
     }
 
     // No need for an active state here

scss/content/_reboot.scss

@@ -249,14 +249,14 @@
   // Links
 
   a {
-    color: var(--link-color);
+    color: var(--theme-text, var(--link-color));
     text-decoration: var(--link-decoration);
     text-underline-offset: $link-underline-offset;
 
     &:hover {
       // --link-color: var(--link-hover-color);
       // --link-decoration: var(--link-hover-decoration, var(--link-decoration));
-      color: var(--link-hover-color);
+      color: var(--theme-text-emphasis, var(--link-hover-color));
       text-decoration: var(--link-hover-decoration, var(--link-decoration));
     }
   }

scss/helpers/_colored-links.scss

@@ -1,5 +1,4 @@
 @forward "color-bg";
-@forward "colored-links";
 @forward "focus-ring";
 @forward "icon-link";
 @forward "position";

scss/helpers/index.scss

@@ -110,7 +110,6 @@
   icon_color: orange
   pages:
     - title: Color & background
-    - title: Colored links
     - title: Focus ring
     - title: Icon link
     - title: Position

site/data/sidebar.yml

@@ -3,7 +3,7 @@ import { getData } from '@libs/data'
 import Example from '@components/shortcodes/Example.astro'
 
 const themeColors = getData('theme-colors')
-const styles = ['solid', 'styled', 'outline', 'subtle', 'text']
+const styles = ['styled', 'solid', 'outline', 'subtle', 'text']
 const sizes = [
   { value: 'xs', label: 'Extra small' },
   { value: 'sm', label: 'Small' },
@@ -25,20 +25,23 @@ const rounded = ['default', 'pill', 'square']
   </symbol>
 </svg>
 
-<div class="bg-1 p-3 rounded-3 mb-3">
+<div class="bg-1 p-3 rounded-3">
   <div class="d-flex flex-wrap gap-3">
-    <div class="vstack gap-1 flex-grow-0">
+    <div class="vstack gap-1">
       <label class="form-label fw-semibold mb-0">Color</label>
       <div class="dropdown">
         <button
           type="button"
-          class="btn btn-outline theme-secondary dropdown-toggle w-100 d-inline-flex align-items-center justify-content-between"
+          class="btn btn-outline theme-secondary dropdown-toggle w-100 justify-content-between"
           id="btn-color-dropdown"
           data-bs-toggle="dropdown"
           aria-expanded="false"
           data-color="primary"
         >
           Primary
+          <svg class="bi ms-1" width="16" height="16" aria-hidden="true">
+            <use href="#chevron-expand" />
+          </svg>
         </button>
         <ul class="dropdown-menu" aria-labelledby="btn-color-dropdown">
           {themeColors.map((themeColor) => (
@@ -57,7 +60,7 @@ const rounded = ['default', 'pill', 'square']
       </div>
     </div>
 
-    <div class="vstack gap-1 flex-grow-0">
+    <div class="vstack gap-1">
       <label class="form-label fw-semibold mb-0">Style</label>
       <div class="btn-group text-capitalize" role="group" aria-label="Button style">
         {styles.map((style) => (
@@ -66,7 +69,7 @@ const rounded = ['default', 'pill', 'square']
               type="radio"
               name="btn-style"
               value={style}
-              checked={style === 'solid'}
+              checked={style === 'styled'}
               data-style={style}
             />
             {style || 'default'}
@@ -75,18 +78,21 @@ const rounded = ['default', 'pill', 'square']
       </div>
     </div>
 
-    <div class="vstack gap-1 flex-grow-0">
+    <div class="vstack gap-1">
       <label class="form-label fw-semibold mb-0">Size</label>
       <div class="dropdown">
         <button
           type="button"
-          class="btn btn-outline theme-secondary dropdown-toggle w-100 d-inline-flex align-items-center justify-content-between"
+          class="btn btn-outline theme-secondary dropdown-toggle w-100 justify-content-between"
           id="btn-size-dropdown"
           data-bs-toggle="dropdown"
           aria-expanded="false"
           data-size=""
         >
           Medium
+          <svg class="bi ms-1" width="16" height="16" aria-hidden="true">
+            <use href="#chevron-expand" />
+          </svg>
         </button>
         <ul class="dropdown-menu" aria-labelledby="btn-size-dropdown">
           {sizes.map((size) => (

site/src/components/shortcodes/ButtonPlayground.astro

@@ -14,10 +14,6 @@ Buttons have a standard `.btn` class that sets up basic styles such as padding a
 
 The `.btn` class is intended to be a starting point for your own custom button styles, while our provided button variants  used in conjunction with our button variants, or to serve as a basis for your own custom styles.
 
-<Callout type="warning">
-When using `.btn` without a modifier, be sure to add some explicit `:focus-visible` styles.
-</Callout>
-
 ## Playground
 
 Bootstrap includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control. Combined with our utilities, you have a very powerful set of defaults to choose from.
@@ -26,17 +22,25 @@ Bootstrap includes several button variants, each serving its own semantic purpos
 
 ## Variants
 
-Compare all variants at once:
+Compare all button variants and styles at once:
 
-<Example class="bd-example-buttons" code={[...getData('theme-colors').map((themeColor) => `<button type="button" class="btn-solid theme-${themeColor.name} justify-self-start">${themeColor.title}</button>
-<button type="button" class="btn-outline theme-${themeColor.name} justify-self-start">${themeColor.title}</button>
-<button type="button" class="btn-subtle theme-${themeColor.name} justify-self-start">${themeColor.title}</button>
-<button type="button" class="btn-text theme-${themeColor.name} justify-self-start">${themeColor.title}</button>
-`), `
-<button type="button" class="btn btn-link">Link</button>`]} />
+<Example class="bd-example-buttons justify-items-start" code={[...getData('theme-colors').map((themeColor) => `<button type="button" class="btn-solid theme-${themeColor.name}">${themeColor.title}</button>
+<button type="button" class="btn-outline theme-${themeColor.name}">${themeColor.title}</button>
+<button type="button" class="btn-subtle theme-${themeColor.name}">${themeColor.title}</button>
+<button type="button" class="btn-text theme-${themeColor.name}">${themeColor.title}</button>`)]} />
 
 <Details name="warning-color-assistive-technologies" />
 
+## Link buttons
+
+Use the `.btn-link` class to create a button that looks like a link.
+
+<Example code={`<button type="button" class="btn btn-link">Link</button>`} />
+
+Link buttons can also be styled with the theme colors.
+
+<Example code={[...getData('theme-colors').map((themeColor) => `<button type="button" class="btn btn-link theme-${themeColor.name}">${themeColor.title}</button>`)]} />
+
 ## Styled buttons
 
 Add visual depth to solid buttons with gradients and shadows using the `.btn-styled` modifier class. This provides a more three-dimensional appearance that can be customized further with CSS variables.
@@ -58,10 +62,6 @@ The gradient and shadow can be customized via CSS variables:
 | `--bs-btn-active-shadow` | Pressed/active state shadow |
 </BsTable>
 
-## Disable text wrapping
-
-If you don’t want the button text to wrap, you can add the `.text-nowrap` class to the button. In Sass, you can set `$btn-white-space: nowrap` to disable text wrapping for each button.
-
 ## Button tags
 
 The `.btn` classes are designed to be used with the `<button>` element. However, you can also use these classes on `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).
@@ -125,16 +125,14 @@ Combine with size classes for different icon button sizes:
 
 ## Disabled state
 
-Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element. Disabled buttons have `pointer-events: none` applied to, preventing hover and active states from triggering, and some additional styling to indicate the disabled state.
+Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element. Disabled buttons have `pointer-events: none`, preventing hover and active states from triggering, and some additional styling to indicate the disabled state.
 
 <Example code={`<button type="button" class="btn-solid theme-primary" disabled>Primary button</button>
 <button type="button" class="btn-solid theme-secondary" disabled>Button</button>
 <button type="button" class="btn-outline theme-primary" disabled>Primary button</button>
 <button type="button" class="btn-outline theme-secondary" disabled>Button</button>`} />
 
-### Disabled links
-
-Disabled buttons using the `<a>` element behave a bit different, and if you need to keep the `href` attribute, you may need additional HTML to fully disable the link functionality. Use the `.disabled` class instead of the attribute on `<a>` elements to make them visually appear disabled.
+Disabled buttons using the `<a>` element behave a bit different. Use the `.disabled` class instead of the attribute on `<a>` elements to make them visually appear disabled. If you need to keep the `href` attribute, you may need additional HTML to fully disable the link functionality.
 
 <Example code={`<a class="btn-solid theme-primary disabled" role="button" aria-disabled="true">Primary link</a>
 <a class="btn-solid theme-secondary disabled" role="button" aria-disabled="true">Link</a>`} />