Apply pillar colour to audio controls

[JustinPinner]

First pass to update the play/pause button and the slider thumb control to use the pillar colour.

We still have to find a way to make the progress bar apply the correct colour (or choose a neutral one) for the 'played' section. It's set by javascript and currently hard-coded to match the news pillar.

Before

After

[regiskuckaertz]

Looking great! Just one minor thing with the progress bar, then we 🚢

[regiskuckaertz]

Doesn't this need to be the pillar colour too?

[regiskuckaertz]

This is where SASS becomes useful:

$pillars: (
  news: $c-pillar--news, 
  arts: $c-pillar--arts,
  sport: $c-pillar--sport, 
  opinion: $c-pillar--opinion, 
  lifestyle: $c-pillar--lifestyle
);

@mixin thumb($property) {
  .atom--audio__progress-bar input[type=range]::${property} {
    @each $pillar, $colour in $pillars {
      .garnett--pillar-${pillar} &,
      .content--pillar-${pillar} & { background: $colour; }
    }
}

@include thumb(-moz-range-thumb);
@include thumb(-webkit-slider-thumb);
@include thumb(-ms-thumb);

Not 100% sure of the syntax though 🤔

[regiskuckaertz]

This will effectively override the definition you set in the CSS. What I suggest instead is that you parse it on start, e.g. assuming a progressBar reference to the DOM element:

const styles = getComputedStyle(progressBar);
const defaultValue = '#c70000';
const colorRegex = /##[\w\d]{6}/;
const pillarColour = (styles.getPropertyValue('background') || defaultValue).match(colorRegex);
// pillarColour[0] has the colour.

With CSS variables, this will be way easier:

const styles = getComputedStyles(document.body);
const pillarColour = styles.getPropertyValue('--c-main') || defaultValue;

[regiskuckaertz]

Beautiful!