カラートークン

Lism CSS で定義しているカラー関連のデザイントークンについて解説します。セマンティックカラーとパレットカラーの2種類が用意されています。

COLOR

トークン名	変数
`base`	`--base`
`base-2`	`--base-2`
`text`	`--text`
`text-2`	`--text-2`
`divider`	`--divider`
`link`	`--link`
`brand`	`--brand`
`accent`	`--accent`

これらのカラーは、サイトに合わせて調整してご利用ください。

↓

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

パレットトークン	変数
`red`	`--red`
`orange`	`--orange`
`yellow`	`--yellow`
`green`	`--green`
`blue`	`--blue`
`purple`	`--purple`
`pink`	`--pink`
`gray`	`--gray`
`black`	`--black`
`white`	`--white`

パレットカラーはOKLCHで定義されています。

--Lが明度、--Cが彩度の基準値として定義されており、この二つの値を調整するとパレットカラー全体の色味を調整できます。

パレットカラーの活用

u--cbox ユーティリティクラスを使うと、--keycolor をベースに color-mix() で color, background-color, border-color を一括生成できます。

↓

u—cbox の基本的な使い方

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>

↓

パレットカラー一覧

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

u--cbox の詳しい使い方やカスタマイズ方法はユーティリティクラスを参照してください。

カスタマイズ例

ダークモード対応

パレットカラーはOKLCHベースで定義されているため、--L（明度）と--C（彩度）の2つの変数を調整するだけで全体の色味を一括変更できます。

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

セマンティックカラーのカスタマイズ

サイトのブランドカラーに合わせて、セマンティックカラーを上書きできます。

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