カラートークン

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

セマンティックカラー

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

これらのカラーは、サイトに合わせて調整してご利用ください。--neutralは、背景やhover色の生成などに使う中立的な補助色として定義されています。

↓

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.

パレットカラー

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

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

--Lが明度、--Cが彩度の基準値として定義されており、この二つの値を調整するとパレットカラー全体の色味を調整できます（--black/--whiteは固定値のため対象外です）。

パレットカラーの活用

u--cbox ユーティリティクラスを使うと、--keycolor をベースに color-mix() で --c, --bgc, --bdc を一括生成できます。color と background-color にはそのまま適用され、--bdc はボーダーを表示する -bd クラスと併用すると反映されます。

↓

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="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>

↓

パレットカラー一覧

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

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

Utility Class( u--* )

スタイルや装飾をまとめて適用できる Lism CSS のユーティリティクラスについて解説します。

透過・混色（Lism Props）

React / Astro コンポーネントのカラー系 Props では、bgc="black:50%"（50%の透過）や c="text:blue:5%"（text に blue を5%混ぜる）のように、: 区切りの値から color-mix() を生成できます。

Lism Props

<Lism> 系コンポーネントが受け取る、Lism CSS 専用プロパティの一覧と使い方です。

カスタマイズ例

ダークモード対応

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

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

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

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

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