From: Mark Otto Date: Sat, 27 Dec 2025 19:27:00 +0000 (-0800) Subject: More button cleanup (#41968) X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=9b42d6dd09e7000916cceb9e50e7893f1f044323;p=thirdparty%2Fbootstrap.git 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 --- diff --git a/scss/_variables.scss b/scss/_variables.scss index 5ff0a10a28..b6e670e55f 100644 --- a/scss/_variables.scss +++ b/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 diff --git a/scss/buttons/_button-group.scss b/scss/buttons/_button-group.scss index f384053b14..4ed0a3457f 100644 --- a/scss/buttons/_button-group.scss +++ b/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; } } diff --git a/scss/buttons/_button-variables.scss b/scss/buttons/_button-variables.scss index f89ac33c91..4ce60d10bd 100644 --- a/scss/buttons/_button-variables.scss +++ b/scss/buttons/_button-variables.scss @@ -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; diff --git a/scss/buttons/_button.scss b/scss/buttons/_button.scss index fe7424ae2e..d9eccc037a 100644 --- a/scss/buttons/_button.scss +++ b/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,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 diff --git a/scss/content/_reboot.scss b/scss/content/_reboot.scss index 0162321ad3..db802f86ad 100644 --- a/scss/content/_reboot.scss +++ b/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)); } } diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss deleted file mode 100644 index fdd8b458ea..0000000000 --- a/scss/helpers/_colored-links.scss +++ /dev/null @@ -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)); - } - } - } -} diff --git a/scss/helpers/index.scss b/scss/helpers/index.scss index eb18c98b3a..450afce02a 100644 --- a/scss/helpers/index.scss +++ b/scss/helpers/index.scss @@ -1,5 +1,4 @@ @forward "color-bg"; -@forward "colored-links"; @forward "focus-ring"; @forward "icon-link"; @forward "position"; diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 4fd8e75f3d..b22b80f6a1 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -110,7 +110,6 @@ icon_color: orange pages: - title: Color & background - - title: Colored links - title: Focus ring - title: Icon link - title: Position diff --git a/site/src/components/shortcodes/ButtonPlayground.astro b/site/src/components/shortcodes/ButtonPlayground.astro index 8a73faf806..7d8d590430 100644 --- a/site/src/components/shortcodes/ButtonPlayground.astro +++ b/site/src/components/shortcodes/ButtonPlayground.astro @@ -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'] -
+
-
+
    {themeColors.map((themeColor) => ( @@ -57,7 +60,7 @@ const rounded = ['default', 'pill', 'square']
-
+
{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']
-
+
    {sizes.map((size) => ( diff --git a/site/src/content/docs/components/buttons.mdx b/site/src/content/docs/components/buttons.mdx index 3819ea1eaf..f580b29879 100644 --- a/site/src/content/docs/components/buttons.mdx +++ b/site/src/content/docs/components/buttons.mdx @@ -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. - -When using `.btn` without a modifier, be sure to add some explicit `:focus-visible` styles. - - ## 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: - ` - - - -`), ` -`]} /> + ` + + +`)]} />
    +## Link buttons + +Use the `.btn-link` class to create a button that looks like a link. + +Link`} /> + +Link buttons can also be styled with the theme colors. + + ``)]} /> + ## 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 | -## 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 ` `} /> -### Disabled links - -Disabled buttons using the `` 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 `` elements to make them visually appear disabled. +Disabled buttons using the `` element behave a bit different. Use the `.disabled` class instead of the attribute on `` 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. Primary link Link`} /> diff --git a/site/src/content/docs/content/reboot.mdx b/site/src/content/docs/content/reboot.mdx index 8ce7af8eab..26dd213213 100644 --- a/site/src/content/docs/content/reboot.mdx +++ b/site/src/content/docs/content/reboot.mdx @@ -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 `` 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 This is an example link`} /> -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. + +This is an example link`} /> + +Use the theme utility classes to change the link color. -This is an example link`} /> + `${themeColor.title} link`)]} /> 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. diff --git a/site/src/content/docs/forms/overview.mdx b/site/src/content/docs/forms/overview.mdx index ac1c650a3d..7e8e52e29f 100644 --- a/site/src/content/docs/forms/overview.mdx +++ b/site/src/content/docs/forms/overview.mdx @@ -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. - + diff --git a/site/src/content/docs/helpers/colored-links.mdx b/site/src/content/docs/helpers/colored-links.mdx deleted file mode 100644 index 8dd4ad05d9..0000000000 --- a/site/src/content/docs/helpers/colored-links.mdx +++ /dev/null @@ -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. - - -**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. - - - `

    ${themeColor.title} link

    `), - `

    Emphasis link

    ` -]} /> - -
    - -## Link utilities - -Colored links can also be modified by our [link utilities]([[docsref:/utilities/link/]]). - - `

    ${themeColor.title} link

    `), - `

    Emphasis link

    ` -]} /> diff --git a/site/src/content/docs/utilities/colors.mdx b/site/src/content/docs/utilities/colors.mdx index 2cbfe4ea25..9a50bbab57 100644 --- a/site/src/content/docs/utilities/colors.mdx +++ b/site/src/content/docs/utilities/colors.mdx @@ -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. `

    .fg-${themeColor.name}

    diff --git a/site/src/content/docs/utilities/link.mdx b/site/src/content/docs/utilities/link.mdx index 6fb52252f7..0114fd3394 100644 --- a/site/src/content/docs/utilities/link.mdx +++ b/site/src/content/docs/utilities/link.mdx @@ -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. `

    ${themeColor.title} link

    `) + ...getData('theme-colors').map((themeColor) => `

    ${themeColor.title} link

    `) ]} />