Syntax

Variable

CSS variables defined specific values to be reused throughout a document.

🚧This page is still under construction and some content may not be complete.

Overview

ClassDeclarations
$custom:value--custom: value;

Stylize a shadow DOM

Let's say this's your custom element and its tree:

<test-element>
▼ #shadow-root (open)
<button part="button"></button>
</test-element>

and the element contains an encapsulated style like this:

:host {
--button-bg: red;
}
[part=button] {
background: var(--button-bg);
}

Elements in the shadow DOM cannot be selected via descendant selectors, but you can:

<test-element class="$button-bg:red $button-bg:pink@sm">
▼ #shadow-root (open)
<button part="button"></button>
</test-element>

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="$size:2.5rem:hover $size:2.5rem@sm $size:2.5rem@dark $size:2.5rem@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.