Open AllanJard opened 1 year ago
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:
btn-outline-subtle
would be the same as btn-outline-dark
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.
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 https://github.com/twbs/bootstrap/pull/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.
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/)
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
.
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;
}
Prerequisites
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:
btn-subtle
would be the same asbtn-light
, whilebtn-subtle
would be the same asbtn-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.