title: How to create color shades using CSS variables similar to darken() of Sass?
body: <p>I'm looking a way of modifying a CSS variable as you would in SCSS</p>
  
  <p>Define a color like primary - and automatically I would get shades for focus and actives states. 
  Basically, would like to change one variable in css variables and get 3 shades of the same color.</p>
  
  <p>What Id like to achieve in CSS </p>
  
  <pre><code>$color-primary: #f00;
  
  .button {
      background: $color-primary;
  
      &amp;:hover,
      &amp;:focus {
          background: darken($color-primary, 5%);
      }
  
      &amp;:active {
          background: darken($color-primary, 10%);
      }
  }
  </code></pre>
  
  <p><strong>trying to achieve:</strong> </p>
  
  <pre><code>:root {
      --color-primary: #f00;
      --color-primary-darker: #f20000  //     var(--color-primary) * 5% darker
      --color-primary-darkest: #e50000 //     var(--color-primary) * 10% darker
  }
  
  .button {
      background: var(--color-primary);
  }
  
  .button:hover,
  .button:focus {
      background: var(--color-primary-darker);
  }
  
  .button:active {
      background: var(--color-primary-darkest);
  }
  </code></pre>