title: Angular Material - Global color variables
body: <p>Looking at the Angular Material documentation, they recommend using a <code>-theme</code> file per component to manage applying any theme-related styles to a specific class.</p>
  
  <p>From my perspective, some downsides to this approach are:</p>
  
  <ul>
  <li>quite verbose</li>
  <li>splits up the style into two different locations</li>
  <li>all your frontend devs need to understand how Angular Material colours work</li>
  <li>makes it harder to change values (e.g. we might've been using <code>mat-color($primary, 200)</code> for border colours and now want to change it to <code>mat-color($primary, 300)</code>. This will have been repeated all throughout the codebase.</li>
  </ul>
  
  <p>Given a consistent design language, there will only be a subset of colors that will be used (e.g. 4 colors from the primary palette, 3 from the accent palette, a few different foreground / background colors, etc).</p>
  
  <p>Given the above, doesn't it make more sense to have a <code>_colors.scss</code> that defines the exact colors using the theme rather than hoping developers extract the correct value from the theme each time?</p>
  
  <p>e.g. maybe something like:</p>
  
  <pre><code>  $clr-primary-default: mat-color($primary);
    $clr-primary-contrast: mat-color($primary, default-contrast);
    $clr-primary-light: mat-color($primary, lighter);
    $clr-primary-dark: mat-color($primary, darker);
  
    $clr-accent-default: mat-color($accent);
    $clr-accent-light: mat-color($accent, lighter);
    $clr-accent-dark: mat-color($accent, darker);
  
    $clr-default-text: mat-color($foreground);
    $clr-secondary-text: mat-color($foreground, secondary-text);
  
    //etc
  </code></pre>
  
  <p>Then rather than creating a separate <code>-theme</code> file for each component that requires specific colors, I can simply import the <code>colors.scss</code> file and use the variables directly in the <code>*.component.scss</code> file.</p>
  
  <p>Just wanting to validate that the above is sound and that I'm not missing anything obvious that's going to cause pain down the track?</p>
  
  <p>The other tricky part is how to actually define these in a separate <code>colors</code> file efficiently given the file will need access to the theme data.</p>