デザイントークン
Lism CSS では、主要なCSSプロパティに対してデザイントークンを用意しています。
COLOR
|トークン名|変数| |---|---| |
base--base|
|base-2--base-2|
|text--text|
|text-2--text-2|
|divider--divider|
|link--link|
|brand--brand|
|accent--accent|
|neutral--neutral|
パレットカラー（--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|
|25|--s25|20px|
|30|--s30|24px|
|35|--s35|32px|
|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|
<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% / 12%)|
|--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|
<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）
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 等で使用できます。