デザイントークン

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

COLOR

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

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

Typography

トークン	変数
`FF` (font-family)	`--ff--base`, `--ff--accent`, `--ff--mono`
`FW` (font-weight)	`--fw--light`, `--fw--normal`, `--fw--bold`
`FZ` (font-size)	`--fz--2xs` 〜 `--fz--5xl`
`LH` (line-height)	`--hl--xs`, `--hl--s`, `--hl--base`, `--hl--l`
`LTS` (letter-spacing)	`--lts--s`, `--lts--base`, `--lts--l`, `--lts--xl`

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

SPACE

トークン値	変数	概算値
`5`	`--s5`	`4px`
`10`	`--s10`	`8px`
`15`	`--s15`	`12px`
`20`	`--s20`	`16px`
`30`	`--s30`	`24px`
`40`	`--s40`	`40px`
`50`	`--s50`	`64px`
`60`	`--s60`	`104px`
`70`	`--s70`	`168px`
`80`	`--s80`	`272px`

フィボナッチ数列ベースのスケーリング。対応する property class の詳細はスペーシングトークンを参照してください。

`RADIUS`

トークン値	変数	クラス	初期値
`10`	`--bdrs--10`	`-bdrs:10`	`0.25rem`
`20`	`--bdrs--20`	`-bdrs:20`	`0.5rem`
`30`	`--bdrs--30`	`-bdrs:30`	`1rem`
`40`	`--bdrs--40`	`-bdrs:40`	`1.5rem`
`99`	`--bdrs--99`	`-bdrs:99`	`99rem`

↓

Preview

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

`SHADOW`

トークン値	変数	クラス
`10`	`--bxsh--10`	`-bxsh:10`
`20`	`--bxsh--20`	`-bxsh:20`
`30`	`--bxsh--30`	`-bxsh:30`
`40`	`--bxsh--40`	`-bxsh:40`
`50`	`--bxsh--50`	`-bxsh:50`

--bxsh--{token}の値の中身は、次の変数で構成されます。

構成変数	初期値
`--shc`	`hsl(220 4% 8% / 15%)`
`--shsz--10`	`0px 1px 3px`
`--shsz--20`	`0px 2px 6px`
`--shsz--30`	`0px 4px 12px`
`--shsz--40`	`0px 8px 24px`
`--shsz--50`	`0px 16px 48px`

↓

Preview

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

`OPACITY`

トークン値	変数	クラス	初期値
`mp`	`--o--mp`	`-o:mp`	`0.9`
`p`	`--o--p`	`-o:p`	`0.75`
`pp`	`--o--pp`	`-o:pp`	`0.5`
`ppp`	`--o--ppp`	`-o:ppp`	`0.25`

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

↓

Preview

mp: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

p: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

pp: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

ppp: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

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

`SIZE`

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

トークン値	変数
`xs`	`--sz--xs`
`s`	`--sz--s`
`m`	`--sz--m`
`l`	`--sz--l`
`xl`	`--sz--xl`

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