Design Token

Frame Colors

Customizing frame color variables or starting with the official design system.

Default

TokenDescriptions
frame-neutral
frame-light
alpha, divider
frame-lighter
alpha, dotted, td
frame-lightest
alpha, layout, navbar, sidebar

By default, theme modes drive frame variables are meticulously adjusted in light and dark modes.

<div class="light">
<div class="b:3x|neutral size:96"></div>
</div>
<div class="dark">
<div class="b:3x|neutral size:96"></div>
</div>

View the default variables on GitHub


Basic usage

Apply a frame color

Apply the defined frame-* variables using the inherited syntaxes border-top-color, border-bottom-color, border-left-color, border-right-color, border-x-color, border-y-color, border-color, border-top, border-bottom, border-left, border-right, border-x, border-y, border, outline-color, outline.

<div class="outline:$(frame-neutral)">equals</div>
<div class="outline:frame-neutral">equals</div>
<div class="outline:neutral"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.