Color Tokens

This page covers the color-related design tokens defined in Lism CSS. Two types are provided: semantic colors and palette colors.

COLOR

Token	Variable
`base`	`--base`
`base-2`	`--base-2`
`text`	`--text`
`text-2`	`--text-2`
`divider`	`--divider`
`link`	`--link`
`brand`	`--brand`
`accent`	`--accent`

Adjust these colors to match your site’s design.

↓

Preview

Main color example text

text: Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor. Non facere Laudantium ex eos doloribus aut dolore nisi provident.

text-2: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

Accent color example text

text: Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor. Non facere Laudantium ex eos doloribus aut dolore nisi provident.

text-2: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

PALETTE

Palette token	Variable
`red`	`--red`
`orange`	`--orange`
`yellow`	`--yellow`
`green`	`--green`
`blue`	`--blue`
`purple`	`--purple`
`pink`	`--pink`
`gray`	`--gray`
`black`	`--black`
`white`	`--white`

Palette colors are defined in OKLCH.

--L is defined as the base lightness value and --C as the base chroma value. Adjusting these two values lets you tune the overall palette color.

Using Palette Colors

The u--cbox utility class generates color, background-color, and border-color from a --keycolor base using color-mix().

↓

Basic u—cbox usage

Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor. Non facere Laudantium ex eos doloribus aut dolore nisi provident.

リサイズ可能

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

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

↓

Palette color list

Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor. Non facere Laudantium ex eos doloribus aut dolore nisi provident.

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

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);
}