title: Customizing bootstrap 5 button colors and properties in it
body: <p>I've created my <code>custom.scss</code> in my project, and done this:</p>
  <pre><code>$primary: #e84c22;
  
  $theme-colors: (
    primary: $primary,
  );
  
  @import &quot;~bootstrap/scss/bootstrap.scss&quot;;
  </code></pre>
  <p>So far, the color is like this:</p>
  <p><a href="https://i.stack.imgur.com/lbLMK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/lbLMK.png" alt="button" /></a></p>
  <p>I am not satisfied with the text inside the <code>btn-primary</code> class. By default it's dark and regular font.
  I want to change it to <strong>white and bold text</strong> without adding <code>text-light</code> and <code>fw-bold</code> classes to the button element.
  I expected it to be like this:</p>
  <p><a href="https://i.stack.imgur.com/Go3yy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Go3yy.png" alt="bold button" /></a></p>
  <p>How can I do that by modifying the <code>custom.scss</code>?</p>
  <p><strong>extra information:</strong><br />
  Unlike <code>btn-danger</code><br />
  <a href="https://i.stack.imgur.com/ixBlc.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ixBlc.png" alt="btn-danger" /></a><br />
  It is white text by default. There must be a function to modify the text color according to the color brightness in bootstrap.</p>