btn-subtle button class

[AllanJard]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

I love the 5.3 dark mode - it looks awesome! One thing that has caught me out though is that btn-light is a "light" button, where in light mode it is a "subtle" button.

I'd like to propose a new button modifier "btn-subtle" which will respect the theme, tinting the button as suitable for either dark or light mode.

In effect:

• When in light mode btn-subtle would be the same as btn-light, while
• In dark mode btn-subtle would be the same as btn-dark

Motivation and context

I've been using btn-light in a number of places to act as a subtle tint. That worked prior to dark mode, but breaks now.

Another option for the name would be btn-tertiary perhaps.

[palhal]

I almost created a PR, but realized I actually want it inverted for btn-outline-subtle. That is how my custom color modes are before 5.3. Has anyone else thought of this? btn-outline-light is almost invisible (and useless) in light mode, while btn-outline-dark is completely invisible in dark mode.

In effect:

• In light mode, btn-outline-subtle would be the same as btn-outline-dark
• In dark mode, btn-outline-subtle would be the same as btn-outline-light

This is probably confusing and too inconsistent compared to other *-subtle components.

Perhaps subtle outline buttons aren't needed, but instead we could have another variant btn[-outline]-{contrast,inverted,monochrome} or similar.

[julien-deramond]

but instead we could have another variant btn[-outline]-{contrast,inverted,monochrome} or similar.

Yes, we haven't had the time to think about it yet but I got the same feeling that something like it would be useful. This is why we closed #38763, to take time to think about it in detail. I've also the feeling that it shouldn't be limited to buttons but should be something more transversal in the framework.

[bpatrik]

I run into the same issue.

I think a btn-tertiary would also solve the issue. I find it odd that all type of buttons are available, only tertiary is not. (I'm referring to the bs colors: https://getbootstrap.com/docs/5.3/customize/color/)

[markusberg]

I ran into this exact issue when implementing dark mode. My quick and dirty solution was to add the following to my global style:

.btn-temp-light {
  @extend .btn-light;
}

[data-bs-theme='dark'] .btn-temp-light {
  @extend .btn-dark;
}

followed by a search-and-replace of btn-light to btn-temp-light.

[ngblaylock]

My workaround is similar to what was mentioned above, but slightly different:

.btn-contrast,
[data-bs-theme="light"] .btn-contrast {
  @include button-variant($body-color, $body-color);
}

.btn-outline-contrast,
[data-bs-theme="light"] .btn-outline-contrast {
  @include button-outline-variant($body-color);
}

[data-bs-theme="dark"] {
  .btn-contrast {
    @include button-variant($body-color-dark, $body-color-dark);
  }
  .btn-outline-contrast {
    @include button-outline-variant($body-color-dark);
  }
}

Or the CSS output:

.btn-contrast,
[data-bs-theme=light] .btn-contrast {
  --bs-btn-color: #fff;
  --bs-btn-bg: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1c1f23;
  --bs-btn-hover-border-color: #1a1e21;
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1a1e21;
  --bs-btn-active-border-color: #191c1f;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #212529;
  --bs-btn-disabled-border-color: #212529;
}

.btn-outline-contrast,
[data-bs-theme=light] .btn-outline-contrast {
  --bs-btn-color: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #212529;
  --bs-btn-hover-border-color: #212529;
  --bs-btn-focus-shadow-rgb: 33, 37, 41;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #212529;
  --bs-btn-active-border-color: #212529;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #212529;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #212529;
  --bs-gradient: none;
}

[data-bs-theme=dark] .btn-contrast {
  --bs-btn-color: #000;
  --bs-btn-bg: #dee2e6;
  --bs-btn-border-color: #dee2e6;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #e3e6ea;
  --bs-btn-hover-border-color: #e1e5e9;
  --bs-btn-focus-shadow-rgb: 189, 192, 196;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #e5e8eb;
  --bs-btn-active-border-color: #e1e5e9;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #dee2e6;
  --bs-btn-disabled-border-color: #dee2e6;
}
[data-bs-theme=dark] .btn-outline-contrast {
  --bs-btn-color: #dee2e6;
  --bs-btn-border-color: #dee2e6;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #dee2e6;
  --bs-btn-hover-border-color: #dee2e6;
  --bs-btn-focus-shadow-rgb: 222, 226, 230;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #dee2e6;
  --bs-btn-active-border-color: #dee2e6;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #dee2e6;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #dee2e6;
  --bs-gradient: none;
}