Tootfinder

@toxi@mastodon.thi.ng
2024-03-17 16:04:19

Today's #ReleaseSunday features a major update for the https://thi.ng/meta-css toolchain, a data-driven codegen for creating custom modular CSS frameworks, incl. transpiler, bundler, dev/watch mode...…

Screenshot of a concise MetaCSS stylesheet snippet, showing the declaration of an oklch() color variable (using the def-oklch() template/function), its use as link color and the creation of a derived/adjusted color for link hover states...

The source code reads:

:root {
// define an oklch() color variable called "link-color"
def-oklch(link-color, 80, 100, 0, 1)
}

// use color variable to set text color
a:link, a:visited { color (link-color) }

// use an adiusted version for l…

Transpiled resulting CSS of the MetaCSS declerations in the previous image, showing the expanded variable definitions and calculations to create the derived color...

CSS source code:

:root {
--link-color-luma: 80%;
--link-color-chroma: 100%;
--link-color-hue: 0;
--link-color-alpha: 1;
--link-color: oklch(
var(--link-color-luma)
var(--link-color-chroma)
var(--link-color-hue) /
var(--link-color-alpha)
);
}

a:link, a:visited {
color: var(--link-color);
}

a:h…

Data-driven CSS framework codegen, transpiler & bundler