@una

Calculating Color: Dynamic Theming With CSS Variables

Una Kravets | @una

What We'll Learn:

  • Dynamic CSS Variables
  • CSS Math Functions
  • Color Types
  • Color Functions

Dynamic CSS Variables

currentColor

currentColor

<a class="ex1" href="#">Click Me</a>

currentColor

Messages 34
<div class="ex1a" href="#"> <span class="text-parent"> <span class="text">Messages</span> </span> 34 </div>

currentColor CSS Variable

Data on support for the currentcolor feature across the major browsers from caniuse.com

--var()

--var()

--var() CSS Variable

Data on support for the css-variables feature across the major browsers from caniuse.com

Fallback: PostCSS Polyfill All

github.com/postcss/postcss-custom-properties
:root { --color: red; } h1 { color: var(--color); } /* becomes */ h1 { color: red; color: var(--color); }

@property

Without @property

@property

@property

@property CSS Variable

Fallback: PostCSS Polyfill
Chromium, Opera, Samsung

github.com/jonathantneal/postcss-register-property
@property --highlight-color { inherits: true; initial-value: red; syntax: ""; }
[ { "name": "--highlight-color", "inherits": true, "initialValue": "red", "syntax": "" } ]
import properties from './styles.css.properties.json'; if (window.CSS && CSS.registerProperty) { for (const descriptor of properties) { CSS.registerProperty(descriptor); } }

Let's focus on
--var()

&
hsl()

source: commons.wikimedia.org

Break it down

Brand

lighten()

Brand
Lighten

darken()

Brand
Darken

complement()

Brand
Comp

triad()

Brand
Triad 1
Triad 2

mix()

Brand
Color 2
Brand
Color 2
Mixed

contrast-color()

Brand

Dynamic Color Systems

Web Components

Browser Art

Fallback: PostCSS Polyfill All

github.com/postcss/postcss-custom-properties
:root { --color: red; } h1 { color: var(--color); } /* becomes */ h1 { color: red; color: var(--color); }

The ✨Future✨ of Color on the Web

css-color-5

color-mix()

color-mix(peru lightgoldenrod 40%);

color-mix()

color-mix(lch(52% 58.1 22.7) lch(56% 49.1 257.1) hue(75.23%));

color-contrast()

color-contrast(wheat tan, sienna, var(--myAccent), #d2691e);

color-adjust()

color-adjust(peru lightness(-20%));

w3.org/TR/css-color-5

pod.link/thecsspodcast

spec.fm/podcasts/toolsday

Chrome Developers Youtube

Thank you!