Color Tokens

This page covers the color design tokens defined in Lism CSS: semantic colors and palette colors.

Semantic Colors

Adjust these colors to match your site’s design. --neutral is a neutral support color used for generated UI colors, such as hover backgrounds.

Palette Colors

Palette colors are defined in OKLCH.

--L controls the base lightness and --C the base chroma. Adjusting these two variables shifts the entire palette at once (--black and --white are fixed values and are not affected).

Using Palette Colors

The u--cbox utility class generates --c, --bgc, and --bdc at once from a --keycolor base value using color-mix(). The generated values are applied directly to color and background-color, while --bdc takes effect when you combine it with the -bd class, which displays a border.

<div class="u--cbox -p:20" style="--keycolor: var(--red)">...</div>
<div class="set--bxsh u--cbox -bd -bdrs:20 -bxsh:20 -p:20" style="--keycolor: var(--purple)">...</div>
<div class="u--cbox -bdc:keycolor -bd-s -p:20" style="--keycolor: var(--brand); --bdw: 4px">...</div>

<Lism util="cbox" keycolor="red" p="20">...</Lism>
<Lism util="cbox" keycolor="purple" bd bdrs="20" bxsh="20" set="bxsh" p="20">...</Lism>
<Lism util="cbox" keycolor="brand" bdc="keycolor" bd-s bdw="4px" p="20">...</Lism>

For detailed usage and customization of u--cbox, see Utility Classes.

Transparency and Mixing (Lism Props)

In React / Astro components, color props accept :-separated values that generate color-mix(), such as bgc="black:50%" (50% opacity) or c="text:blue:5%" (mix 5% blue into text).

Customization Examples

Dark Mode

Because palette colors are OKLCH-based, adjusting the --L (lightness) and --C (chroma) variables changes the entire palette at once.

:root[data-theme='dark'] {
  --L: 72%;
  --C: 0.22;
}

Customizing Semantic Colors

Override semantic colors to match your site’s branding.

:root {
  --brand: #1e5f8c;
  --accent: #d94a6a;
  --link: oklch(50% 0.3 240);
}