gregwhitworth

--bg: rgb(calc(var(--r) + var(--modifier)), calc(var(--g) + var(--modifier)), calc(var(--b) + (var(--modifier) + 50)));

gregwhitworth

var myComponent = document.getElementsByClassName('my-component')[0];
var cs = getComputedStyle(myComponent);
cs.getPropertyValue('--primary');

gregwhitworth

var myComponent = document.getElementsByClassName('my-component')[0];
myComponent.style.setProperty('--primary', 'green');

gregwhitworth

body {
  --primary: blue;
  background: var(--primary);
}

.my-component {
  --primary: yellow;
  background: var(--primary);
}

gregwhitworth

div {
  --pos: 0;
  left: var(--pos);
  animation: move 1s;
}

@keyframes move {
  to {
    --pos: 50px;
  }

gregwhitworth

:root {
  --foo: true;
}

body {
  background: red;
}

@supports(--foo: false) {
  body {

gregwhitworth

body {
  background: red;
}

@supports(--foo: blue) {
  body {
    background: green;
  }
}

gregwhitworth

div {
  --primary: blue;
  margin-top: var(--primary, 12px);
}

gregwhitworth

body {
  background: var(--primary, blue);
}

gregwhitworth

:root {
  --primary: #0B61A4;
  --secondary: #25567B;
}

header {
  background: var(--primary);
  border-bottom: 2px solid var(--secondary);
}