Trying to incorporate a unique button class in Bootstrap with an iris-purple color.
Utilized Sass for creating the custom button:
@import "../node_modules/bootstrap/scss/bootstrap";
$mynewcolor:#5D3FD3;
.btn-purple {
@include button-variant($mynewcolor, shade-color($mynewcolor, 7.5%), shade-color($mynewcolor, 10%), tint-color($mynewcolor,5%), tint-color($mynewcolor, 10%), shade-color($mynewcolor,30%));
}
Resulting CSS:
.btn-purple {
--bs-btn-color: #5439be;
--bs-btn-bg: #5D3FD3;
--bs-btn-border-color: #563ac3;
--bs-btn-hover-color: #261762;
--bs-btn-hover-bg: #6f54d8;
--bs-btn-hover-border-color: #8068dd;
--bs-btn-focus-shadow-rgb: 86, 58, 194;
--bs-btn-active-color: #000;
--bs-btn-active-bg: #7d65dc;
--bs-btn-active-border-color: #674ec9;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #5D3FD3;
--bs-btn-disabled-border-color: #563ac3;
}
Attempted using it in HTML without the expected color:
Checked Firefox inspector but btn-purple was not applied as a CSS class on the page. Did I miss something?