Mirrors/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-12-28 05:33:57 +00:00
Code Issues Actions 23 Packages Projects Releases Wiki Activity

More button cleanup (#41968)

Browse Source 
* 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
This commit is contained in:
Mark Otto 2025-12-27 11:27:00 -08:00 committed by GitHub
parent d67059f02d
commit 983f589253
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 73 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
scss/_variables.scss
View File

@ -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

16
scss/buttons/_button-group.scss
View File

@ -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;
}
}

23
scss/buttons/_button-variables.scss
View File

@ -7,11 +7,10 @@
// 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;
@ -19,14 +18,14 @@ $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;

11
scss/buttons/_button.scss
View File

@ -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,12 +300,15 @@ $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 {
@ -313,11 +316,11 @@ $btn-variant-selectors: () !default;
}
&: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

4
scss/content/_reboot.scss
View File

@ -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));
}
}

38
scss/helpers/_colored-links.scss
View File

@ -1,38 +0,0 @@
@use "../config" as *;
@use "../colors" as *;
@use "../theme" as *;
@use "../variables" as *;
@layer helpers {
@each $color, $value in $new-theme-colors {
.link-#{$color} {
--link-color: var(--#{$color}-text);
// text-decoration-color: color-mix(in srgb, var(--#{$color}-text), transparent var(--link-underline-opacity));
@if $link-shade-percentage != 0 {
&:hover,
&:focus {
--link-color: var(--#{$color}-text-emphasis);
--link-hover-color: var(--#{$color}-text-emphasis);
// $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
// color: color-mix(in srgb, $hover-color, transparent var(--link-opacity));
// text-decoration-color: color-mix(in srgb, var(--#{$color}-text), transparent var(--link-underline-opacity));
}
}
}
}
// One-off special link helper as a bridge until v6
.link-body-emphasis {
color: color-mix(in srgb, var(--emphasis-color), transparent var(--link-opacity));
text-decoration-color: color-mix(in srgb, var(--emphasis-color), transparent var(--link-underline-opacity));
@if $link-shade-percentage != 0 {
&:hover,
&:focus {
color: color-mix(in srgb, var(--emphasis-color), transparent var(--link-opacity, .75));
text-decoration-color: color-mix(in srgb, var(--emphasis-color), transparent var(--link-underline-opacity, .75));
}
}
}
}

1
scss/helpers/index.scss
View File

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

1
site/data/sidebar.yml
View File

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

22
site/src/components/shortcodes/ButtonPlayground.astro
View File

@ -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) => (

36
site/src/content/docs/components/buttons.mdx
View File

@ -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>`} />

10
site/src/content/docs/content/reboot.mdx
View File

@ -5,6 +5,8 @@ aliases: "/docs/[[config:docs_version]]/content/"
toc: true
---
import { getData } from '@libs/data'
## Approach
Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some `<table>` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more.
@ -103,9 +105,13 @@ Links have a default `color` and underline applied. While links change on `:hove
<Example code={`<a href="#">This is an example link</a>`} />
As of v5.3.x, link `color` is set using `rgba()` and new `-rgb` CSS variables, allowing for easy customization of link color opacity. Change the link color opacity with the `--bs-link-opacity` CSS variable:
Use [`.link-{%}`]([[docsref:/utilities/link/#link-opacity]]) utilities to change the link color opacity.
<Example code={`<a href="#" style="--bs-link-opacity: .5">This is an example link</a>`} />
<Example code={`<a href="#" class="link-50">This is an example link</a>`} />
Use the theme utility classes to change the link color.
<Example code={[...getData('theme-colors').map((themeColor) => `<a href="#" class="theme-${themeColor.name}">${themeColor.title} link</a>`)]} />
Placeholder links—those without an `href`—are targeted with a more specific selector and have their `color` and `text-decoration` reset to their default values.

2
site/src/content/docs/forms/overview.mdx
View File

@ -107,4 +107,4 @@ Many form variables are set at a general level to be re-used and extended by ind
`$input-btn-*` variables are shared global variables between our [buttons]([[docsref:/components/buttons]]) and our form components. You’ll find these frequently reassigned as values to other component-specific variables.
<ScssDocs name="input-btn-variables" file="scss/_variables.scss" />
<ScssDocs name="input-btn-variables" file="scss/forms/_form-variables.scss" />

31
site/src/content/docs/helpers/colored-links.mdx
View File

@ -1,31 +0,0 @@
---
title: Colored links
description: Colored links with hover states
toc: true
---
import { getData } from '@libs/data'
## Link colors
You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]([[docsref:/utilities/colors]]), these classes have a `:hover` and `:focus` state. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
<Callout>
**Heads up!** `.link-body-emphasis` is currently the only colored link that adapts to color modes. It’s treated as a special case until v6 arrives and we can more thoroughly rebuild our theme colors for color modes. Until then, it’s a unique, high-contrast link color with custom `:hover` and `:focus` styles. However, it still responds to the new link utilities.
</Callout>
<Example code={[
...getData('theme-colors').map((themeColor) => `<p><a href="#" class="link-${themeColor.name}">${themeColor.title} link</a></p>`),
`<p><a href="#" class="link-body-emphasis">Emphasis link</a></p>`
]} />
<Details name="warning-color-assistive-technologies" />
## Link utilities
Colored links can also be modified by our [link utilities]([[docsref:/utilities/link/]]).
<Example code={[
...getData('theme-colors').map((themeColor) => `<p><a href="#" class="link-${themeColor.name} link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">${themeColor.title} link</a></p>`),
`<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>`
]} />

2
site/src/content/docs/utilities/colors.mdx
View File

@ -28,7 +28,7 @@ For example, `.fg-primary` sets the `--bs-fg` variable to `light-dark(var(--bs-b
This approach allows us to also easily support translucency with our `.fg-{opacity}` utilities as we can use `color-mix()` with the CSS variable to generate the appropriate color. See the [opacity section](#opacity) for more details.
If you want to colorize links, you can use the [`.link-*` helper classes]([[docsref:/helpers/colored-links]]) which have `:hover` and `:focus` states.
If you want to colorize links, you can use the [`.link-{color}` utilities]([[docsref:/utilities/link]]) which have `:hover` and `:focus` states.
<Example code={[
...getData('theme-colors').map((themeColor) => `<p class="fg-${themeColor.name}">.fg-${themeColor.name}</p>

4
site/src/content/docs/utilities/link.mdx
View File

@ -38,10 +38,10 @@ You can even change the opacity level on hover.
## Colored links
[Colored link helpers]([[docsref:/helpers/colored-links/]]) have been updated to pair with our link utilities. Use the new utilities to modify the link opacity.
Links can be colored using the theme color utilities.
<Example code={[
...getData('theme-colors').map((themeColor) => `<p><a href="#" class="link-${themeColor.name} underline-offset-2 underline-20 underline-100-hover">${themeColor.title} link</a></p>`)
...getData('theme-colors').map((themeColor) => `<p><a href="#" class="theme-${themeColor.name} underline-offset-2 underline-20 underline-100-hover">${themeColor.title} link</a></p>`)
]} />
<Details name="warning-color-assistive-technologies" />