@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
--var()
--var()
--var() CSS Variable
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