デザイントークン

Lism CSS では、主要なCSSプロパティに対してデザイントークンを用意しています。

COLOR

パレットカラー（--red, --blue, --green 等）やカスタマイズ方法は カラートークン を参照してください。

Typography

各トークンの詳細やスケーリング規則は タイポグラフィトークン を参照してください。

RADIUS

増分が+0.125rem → +0.25rem → +0.375rem → +0.5remと一定量ずつ大きくなっていく、二階等差数列のスケールです。小さいサイズほど刻みが細かく、大きいサイズほど大胆に変化します。

<div class="-bdrs:10">...</div>
<div class="-bdrs:20">...</div>
<div class="-bdrs:30">...</div>
<div class="-bdrs:40">...</div>
<div class="-bdrs:50">...</div>
<div class="-bdrs:99">...</div>

SHADOW

--bxsh--{token}は、要素に近い薄い影と、主となる影の2層で構成されます。近い側の影には、1段小さいシャドウサイズと、--shcを半分の濃さにした--shc--nearを使います。

構成変数の初期値は次の通りです。

シャドウサイズは10以降、オフセットとぼかしが毎段2倍になるスケールです。ぼかしは常にオフセットの3倍で統一されています。5はオフセットなしの小さなぼかしだけの段階で、--bxsh--10の近い側の影に使われます。

<div class="-bxsh:10">...</div>
<div class="-bxsh:20">...</div>
<div class="-bxsh:30">...</div>
<div class="-bxsh:40">...</div>
<div class="-bxsh:50">...</div>

SPACE

主軸（--s10 〜 --s70）はフィボナッチ数列 ((0, 1,) 1, 2, 3, 5, 8, 13, 21, …) に基づくスケールで、タイポグラフィの縦のリズムを作るための設計です。--s-unit（デフォルト 0.5rem ≒ 8px）を基準単位として算出しています。

水平方向の gap や padding は縦のリズムに縛られなくてよいため、50 までは主軸トークン間を補う 5 刻みの中間値 --s5 (4px) / --s15 (12px) / --s25 (20px) / --s35 (32px) / --s45 (52px) を追加しています。

:root,
.set--s {
  /* 余白単位 ≒ 8px */
  --s-unit: 0.5rem;

  /* n * 10 はフィボナッチ数列スケール */
  --s10: var(--s-unit);            /* ≒ 8px */
  --s20: calc(var(--s-unit) * 2);  /* ≒ 16px */
  --s30: calc(var(--s-unit) * 3);  /* ≒ 24px */
  --s40: calc(var(--s-unit) * 5);  /* ≒ 40px */
  --s50: calc(var(--s-unit) * 8);  /* ≒ 64px */
  --s60: calc(var(--s-unit) * 13); /* ≒ 104px */
  --s70: calc(var(--s-unit) * 21); /* ≒ 168px */

  /* 50 までは 5 刻みの中間値で間を埋める（水平方向の gap / padding 用） */
  --s5:  calc(var(--s-unit) * 0.5); /* ≒ 4px */
  --s15: calc(var(--s-unit) * 1.5); /* ≒ 12px */
  --s25: calc(var(--s-unit) * 2.5); /* ≒ 20px */
  --s35: calc(var(--s-unit) * 4);   /* ≒ 32px */
  --s45: calc(var(--s-unit) * 6.5); /* ≒ 52px */
}

.set--s {
  --s-unit: 0.5em;
}

余白トークンは、padding, margin, gap 系のすべての Property Class で利用できます。詳細は Property Class の一覧表を参照してください。

また、set--s クラスを使うと --s-unit が 0.5em に切り替わり、余白を現在のフォントサイズ基準で再計算できます。

--fz--base を clamp() 等を使って流体値にしているサイトで、余白もフォントサイズ基準にして流体的に変化させたい場合は、:root で --s-unit: calc(var(--fz--base) * 0.5); のように上書きしてください。

OPACITY

音楽の強弱記号（piano 系列）に由来します。p（piano / 弱く）の反復回数が多いほど透明度が増す命名です。
（mezzo-piano/piano/pianissimo/pianississimo）

<p class="-o:mp">mp: Lorem ipsum ...</p>
<p class="-o:p">p: Lorem ipsum ...</p>
<p class="-o:pp">pp: Lorem ipsum ...</p>
<p class="-o:ppp">ppp: Lorem ipsum ...</p>

<Text o="mp">mp: Lorem ipsum ...</Text>
<Text o="p">p: Lorem ipsum ...</Text>
<Text o="pp">pp: Lorem ipsum ...</Text>
<Text o="ppp">ppp: Lorem ipsum ...</Text>

SIZE

コンテンツサイズ用のトークンです。

max-sz, .is--wrapper 等で使用できます。