title: What is a clear and concise way to create a custom button that has different types, variants and states?
body: <p>So I have a custom button component in React that accepts these props:</p>
  <pre><code>type: &quot;primary&quot; | &quot;secondary&quot; | &quot;tertiary&quot;
  variant: &quot;neutral&quot; | &quot;info&quot; | &quot;attention&quot; | &quot;danger&quot; | &quot;success&quot;
  size: &quot;normal&quot; | &quot;small&quot;
  </code></pre>
  <p>Since I am not using any outside styling I need to create all the styles on my own (these include different colors for each type, variant and state of the button). By that I mean changing the background-color, border-color and text-color. What I currently have:</p>
  <pre><code>&amp;.info {
      &amp;.primary {
          background-color: #567838;
          color: #f0f6eb;
  
          &amp;:hover {
          }
          &amp;:active {
          }
          &amp;:disabled {
          }
      }
  
      &amp;.secondary {
          background-color: white;
          color: #567838;
          border: 2px #567838 solid;
  
          &amp;:focus {
          }
          &amp;:hover {
          }
          &amp;:active {
          }
          &amp;:disabled {
          }
      }
  
      &amp;.tertiary {
          background-color: white;
          color: #567838;
  
          &amp;:focus {
          }
          &amp;:hover {
          }
          &amp;:active {
          }
          &amp;:disabled {
          }
      }
  }
  </code></pre>
  <p>This is a very long process and it is only half done for the first variant. It also get's repetitive really quickly. If I include all the states and types it would require somewhere around 3(types) * 5(variants) * 4(states) = 60 blocks of code to just adjust colours.</p>
  <p>Is there a &quot;clean&quot; way to do something like this? How do styling libraries adjust all of these colours?</p>