I'm in the process of enhancing my Bootstrap SASS theme with a new color scheme. I have a customized file that includes modifications and introduces a new color: GOLD.
After conducting extensive research and reading various resources, I successfully implemented the new theme for almost all elements, encompassing backgrounds and borders. For example, I added classes like text-gold, border-gold, btn-gold, bg-gold, etc.
However, despite following examples and documentation from Bootstrap, I am facing challenges creating "subtle" and "emphasis" classes such as border-gold-subtle, text-gold-emphasis, bg-gold-subtle, and others.
Is there a workaround to achieve this?
Below is a snippet of my code (I've omitted unrelated code blocks):
@import "functions"
$primary: #2B4261 !default;
$secondary: #9FA6B2 !default;
$success: #14A44D !default;
$info: #54B4D3 !default;
$warning: #E4A11B !default;
$danger: #DC4C64 !default;
$light: #FBFBFB !default;
$dark: #332D2D !default;
$gold: #AC863C !default;
$gold-bg-subtle: tint-color($gold, 80%) !default;
$gold-border-subtle: tint-color($gold, 60%) !default;
$gold-bg-subtle-dark: shade-color($danger, 80%) !default;
$gold-border-subtle-dark: shade-color($primary, 40%) !default;
<!-- More code follows below... -->
@import "bootstrap";