:root {
  --theme-background: #46cdcf;
  --theme-color: #fff;
}

body {
  color: var(--theme-color);
  background: var(--theme-background);
}

.a-button {
  color: var(--theme-color);
}

...

:root {
  --theme-background: #46cdcf;
  --theme-color: #fff;
}

body {
  color: var(--theme-color);
  background: var(--theme-background);
}

body.fixed-color {
  color: #000;
} 

@media screen and (min-width: 40rem) {
  body {
    color: tomato;
    background: #fff;
  }
}

:root {
  --theme-background: #46cdcf;
  --theme-color: #fff;
}

body {
  color: var(--theme-color);
  background: var(--theme-background);
}

CSS.registerProperty({
  name: '--theme-color',
  syntax: '<color>',
  inherits: true,
  initialValue: '#fff'
});

CSS.registerProperty({
  name: '--theme-background',
  syntax: '<color>',
  inherits: true,
  initialValue: '#454468'
});

<number> // 0, 2, 4.1, ...
<length> // 0, px, rem, ...
<percentage> // 10%, 0.5%, ...
<length-percentage> // px, rem, %, ...
<color> // #fff, rgba(0, 0, 0, .5), ...
<url> // url()
<image> // url, image-list, gradient, ...
<integer> // 1, 2, ...
<angle> // deg, grad, rad, ...
<time> // s, ms
<resolution> // dpi, dpcm, ...
<transform-list> // scale(), translate(), ...
<custom-ident> // test, ground-level, ...

CSS.registerProperty({
  name: '--theme-color',
  syntax: '<color>',
  inherits: true,
  initialValue: '#fff'
});

CSS.registerProperty({
  name: '--theme-background',
  syntax: '<color>',
  inherits: true,
  initialValue: '#454468'
});

    --prop: 20rem;

    --prop: 10%;

    --prop: calc(20rem * 10%);

    --prop: 20rem;

    --prop: 10%;

    --prop: calc(20rem * 10%);

    --prop: 20rem, 10vw, 1px;

CSS.registerProperty({    
  name: '--vertical-spacing',
  syntax: '<length>',
  inherits: true,
  initialValue: '1rem'
});

.article {
  --vertical-spacing: 5rem;

  max-width: 20rem;
  margin-top: var(--vertical-spacing); /* 5rem */
}

.article__fig {
  margin-top: var(--vertical-spacing); /* 5rem */
}

.article__fig__img {
  margin-top: var(--vertical-spacing); /* 5rem */
}

<article class="article">
 <figure class="article__fig">
  <img class="article__fig__img" src="/awesome-image.jpg" alt="Awesome Image">
  ...

.article {
  --vertical-spacing: 5rem;

  max-width: 20rem;
  margin-top: var(--vertical-spacing); /* 5rem */
}

.article__fig {
  margin-top: var(--vertical-spacing); /* 1rem */
}

.article__fig__img {
  margin-top: var(--vertical-spacing); /* 1rem */
}

CSS.registerProperty({    
  name: '--vertical-spacing',
  syntax: '<length>',
  inherits: false,
  initialValue: '1rem'
});

<article class="article">
 <figure class="article__fig">
  <img class="article__fig__img" src="/awesome-image.jpg" alt="Awesome" >
  ...

body {
  color: var(--theme-color);
  background: var(--theme-background);
}

CSS.registerProperty({
  name: '--theme-color',
  syntax: '<color>',
  inherits: true,
  initialValue: '#fff'
});

CSS.registerProperty({
  name: '--theme-background',
  syntax: '<color>',
  inherits: true,
  initialValue: '#454468'
});

body {
  color: var(--theme-color);
  background: var(--theme-background);
  
  transition: --theme-color .3s ease, 
              --theme-background .3s ease;
}

if (CSS.registerProperty) {
    CSS.registerProperty({
      name: '--theme-color',
      syntax: '<color>',
      ...

@property --highlight-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #fff;
}

CSS.registerProperty({
  name: '--theme-color',
  syntax: '<color>',
  inherits: true,
  initialValue: '#fff'
});

registerPaint('my-module-name', class {
  // Do awesome stuff
});

await CSS.paintWorklet.addModule('my-module.paint-module.js');

Promise.all([
    window.paintWorklet.addModule('my-module.paint-module.js'),
    window.layoutWorklet.addModule('my-module.layout-module.js')
]).then(() => {
    // Both modules are loaded, let's do some stuff
});

registerPaint('circle', class {
  static get inputProperties() {}

  paint(ctx, size, properties) {}
});

if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('circle.paint-module.js');
}

registerPaint('circle', class {
  static get inputProperties() {}

  paint(ctx, size, properties) {}
});

if ('paintWorklet' in CSS) {
 CSS.paintWorklet.addModule('circle.paint-module.js');
}

registerPaint('circle', class {
  static get inputProperties() {}

  paint(ctx, size, properties) {}
});

.circle-btn {
  background-image: paint(circle);
}

registerPaint('circle', class {
  static get inputProperties() {}

  paint(ctx, size, properties) {
    const x = size.width / 2;
    const y = size.height / 2;
    const radius = Math.min(x, y);
    
    ctx.fillStyle = '#454468';
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.fill();
  }
});

.circle-btn {
  background-image: paint(circle);
}

.circle-btn {
  --circle-color: #454468;

  background: paint(circle);
  transition: --circle-color 1s ease;
}

.circle-btn:hover {
  --circle-color: tomato;
}

registerPaint('circle', class {
  static get inputProperties() {
    return ['--circle-color'];
  }

  paint(ctx, size, properties) {
    const fill = properties.get('--circle-color');
    const x = size.width / 2;
    const y = size.height / 2;
    const radius = Math.min(x, y);
    
    ctx.fillStyle = fill;
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.fill();
  }
});

.circle-btn {
  --circle-color: #454468;

  background: paint(circle);
  transition: --circle-color 1s ease;
}

.circle-btn:hover {
  --circle-color: tomato;
}

CSS.registerProperty({
  name: '--circle-x',
  syntax: '<number>',
  inherits: false,
  initialValue: 0
});

const setPosition = (event, el) => {
  const x = event.offsetX;
  const y = event.offsetY;

  el.style.cssText = `--circle-x: ${x}; --circle-y: ${y};`;
}

el.addEventListener('click', event => setPosition(event, el), false);

CSS.registerProperty({
  name: '--circle-y',
  syntax: '<number>',
  inherits: false,
  initialValue: 0
});

registerPaint('circle', class {
  static get inputProperties() {
    return ['--circle-color', '--circle-x', '--circle-y'];
  }

  paint(ctx, size, properties) {
    const fill = properties.get('--circle-color');
    const x = properties.get('--circle-x');
    const y = properties.get('--circle-y');
    const radius = Math.min(x, y);

    ctx.fillStyle = fill;
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.fill();
  }
});

.circle-btn {
  --circle-color: #454468;

  background-image: paint(circle);
  transition: --circle-color 1s ease;
}

.circle-btn:hover {
  --circle-color: tomato;
}

.circle-btn {
  --circle-color: #454468;

  background-image: paint(circle);
  transition: --circle-color 1s ease, 
              --circle-x 1s ease, 
              --circle-y 1s ease;
}

.circle-btn:hover {
  --circle-color: tomato;
}

CSS.registerProperty({
  name: '--animation-tick',
  syntax: '<number>',
  inherits: false,
  initialValue: 0
});

.circle-btn {
  --animation-duration: 1s;
  --circle-color: #c6efeb;
}

.circle-btn.-animating {
  --animation-tick: 1000;

  background-image: paint(circle);
  transition: --animation-tick var(--animation-duration) ease;
}

CSS.registerProperty({
  name: '--animation-duration',
  syntax: '<time>',
  inherits: false,
  initialValue: '0.3s'
});

const ANIM_CLASS = '-animating';

const setPosition = (event, el) => { ... }; // Set X and Y
const startAnimation = el => { el.classList.add(ANIM_CLASS); }; // Add animation class
const stopAnimation = el => { el.classList.remove(ANIM_CLASS); }; // Remove animation class

const setupElement = el => {
  const duration = CSSNumericValue
                    .parse(getComputedStyle(el).getPropertyValue('--animation-duration'))
                    .to('ms').value || 1000;

  let timeout;

  el.addEventListener('click', event => {
    stopAnimation(el);
    setPosition(event, el);
    startAnimation(el);

    window.clearTimeout(timeout);
    timeout = window.setTimeout(() => stopAnimation(el), duration);
  }, false);
};

registerPaint('circle', class {
  static get inputProperties() {
    return ['--circle-color', '--animation-tick', '--animation-duration', '--circle-x', '--circle-y'];
  }

  paint(ctx, size, properties) {
    const tick = properties.get('--animation-tick');
    const duration = properties.get('--animation-duration').to('ms').value;
    const fill = properties.get('--circle-color');
    const x = properties.get('--circle-x');
    const y = properties.get('--circle-y');
    const radius = size.width * (tick / duration);

    ctx.fillStyle = fill;
    ctx.beginPath();
    ctx.globalAlpha = 1 - (tick / duration);
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.fill();
  }
});

.circle-btn {
  --animation-duration: 1s;
  --circle-color: #c6efeb;
}

.circle-btn.-animating {
  --animation-tick: 1000;

  background-image: paint(circle);
  transition: --animation-tick var(--animation-duration) ease;
}

.circle-btn {
  --animation-duration: 1s;
  --circle-color: #c6efeb;
}

.circle-btn.-animating {
  --animation-tick: 1000;

  background-image: paint(circle);
  transition: --animation-tick var(--animation-duration) ease;
}

registerLayout('ratio', class {
  static get inputProperties() {}

  *intrinsicSizes() { /* Note: Not yet implemented */ }
  
  *layout(children, edges, constraints, properties) {}
});

if ('layoutWorklet' in CSS) {
  CSS.layoutWorklet.addModule('ratio.layout-module.js');
}

registerLayout('ratio', class {
  static get inputProperties() {}

  *intrinsicSizes() {}
  
  *layout(children, edges, constraints, properties) {}
});

if ('layoutWorklet' in CSS) {
  CSS.layoutWorklet.addModule('masonry.layout-module.js');
}

.my-element {
  --aspect-ratio: 1.2;

  display: layout(ratio);
}

registerLayout('ratio', class {
  static get inputProperties() {}

  *intrinsicSizes() {}
  
  *layout(children, edges, constraints, properties) {}
});

registerLayout('ratio', class {
  static get inputProperties() {
    return ['--aspect-ratio'];
  }

  *intrinsicSizes() {}

  *layout(children, edges, constraints, properties) {
    const ratio = properties.get('--aspect-ratio');

    const autoBlockSize = constraints.fixedInlineSize * ratio;

    return { autoBlockSize };
  }
});

registerLayout(
  'masonry',
  class {
    static get inputProperties() {
      return ['--masonry-padding', '--masonry-columns'];
    }

    *layout(children, edges, constraints, properties) {
      const inlineSize = constraints.fixedInlineSize;

      const padding = parseInt(properties.get('--masonry-padding'));
      const columnValue = properties.get('--masonry-columns').toString();

      // We also accept 'auto', which will select the BEST number of columns.
      let columns = parseInt(columnValue);
      if (columnValue === 'auto' || !columns) {
        columns = Math.ceil(inlineSize / 350); // MAGIC NUMBER \o/.
      }

      // Layout all children with simply their column size.
      const childInlineSize = (inlineSize - (columns + 1) * padding) / columns;
      const childFragments = yield children.map(child => {
        return child.layoutNextFragment({ fixedInlineSize: childInlineSize });
      });

      let autoBlockSize = 0;
      const columnOffsets = Array(columns).fill(0);

      childFragments.forEach(childFragment => {
        // Select the column with the least amount of stuff in it.
        const min = columnOffsets.reduce(
          (acc, val, idx) => {
            if (!acc || val < acc.val) {
              return { idx, val };
            }

            return acc;
          },
          { val: +Infinity, idx: -1 }
        );

        childFragment.inlineOffset = padding + (childInlineSize + padding) * min.idx;
        childFragment.blockOffset = padding + min.val;

        columnOffsets[min.idx] = childFragment.blockOffset + childFragment.blockSize;
        autoBlockSize = Math.max(autoBlockSize, columnOffsets[min.idx] + padding);
      });

      return { autoBlockSize, childFragments };
    }
  }
);