Design Tokens

COLOR

トークン名	変数
`base`	`--c--base`
`base-2`	`--c--base-2`
`text`	`--c--text`
`text-2`	`--c--text-2`
`divider`	`--c--divider`
`main`	`--c--main`
`accent`	`--c--accent`

モダンCSSではcolor-mix()があるので、hsl値の中身を変数にすることはしていません。

PALETTE

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

`SPACE`

トークン値	変数	デフォルト値
`5`	`--s5`	`0.25rem`
`10`	`--s10`	`0.375rem`
`20`	`--s20`	`0.625rem`
`30`	`--s30`	`1rem`
`40`	`--s40`	`1.625rem`
`50`	`--s50`	`2.625rem`
`60`	`--s60`	`4.25rem`
`70`	`--s70`	`6.875rem`
`80`	`--s80`	`11.125rem`

↓

Preview

5

10

20

30

40

50

60

70

80

リサイズ可能

フィボナッチ数列 ((0, 1,) 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, …) に基づいたスケーリングを採用しています。
デフォルトでは1 = 0.125rem, 2 = 0.25rem として計算し、0.25remから順にトークン化しています。

`TYPO`

TYPO.FF

font-family 用のトークンです。

トークン	変数	クラス
`base`	`--ff--base`	`-ff:base`
`accent`	`--ff--accent`	`-ff:accent`
`mono`	`--ff--mono`	`-ff:mono`

↓

Preview

base: English text, 漢字ひらがな

accent: English text, 漢字ひらがな

mono: English text, 漢字ひらがな

<p class="-ff:base -fz:xl">Lorem ipsum ...</p>
<p class="-ff:accent -fz:xl">Lorem ipsum ...</p>
<p class="-ff:mono -fz:xl">Lorem ipsum ...</p>

TYPO.FW

font-weight 用のトークンです。

トークン	変数	クラス	初期値
`light`	`--fw--light`	`.-fw:light`	`300`
`normal`	`--fw--normal`	`.-fw:normal`	`400`
`medium`	`--fw--medium`	`.-fw:medium`	`500`
`bold`	`--fw--bold`	`.-fw:bold`	`700`

↓

Preview

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

<p class="-fw:light">Lorem ipsum ...</p>
<p class="-fw:normal">Lorem ipsum ...</p>
<p class="-fw:medium">Lorem ipsum ...</p>
<p class="-fw:bold">Lorem ipsum ...</p>

TYPO.FZ

font-size 用のトークンです。

トークン	変数	クラス	初期値
`2xs`	`--fz--2xs`	`.-fz:2xs`	`calc(1em * 8 / 11)`
`xs`	`--fz--xs`	`.-fz:xs`	`calc(1em * 8 / 10)`
`s`	`--fz--s`	`.-fz:s`	`calc(1em * 8 / 9)`
`m`	`--fz--m`	`.-fz:m`	`1em`
`l`	`--fz--l`	`.-fz:l`	`calc(1em * 8 / 7)`
`xl`	`--fz--xl`	`.-fz:xl`	`calc(1em * 8 / 6)`
`2xl`	`--fz--2xl`	`.-fz:2xl`	`calc(1em * 8 / 5)`
`3xl`	`--fz--3xl`	`.-fz:3xl`	`calc(1em * 8 / 4)`
`4xl`	`--fz--4xl`	`.-fz:4xl`	`calc(1em * 8 / 3)`

↓

Preview

2xs

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

xs

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

s

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

m

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

l

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

2xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

3xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

4xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

<p class='-fz:2xs'>Lorem ipsum ...</p>
<p class='-fz:xs'>Lorem ipsum ...</p>
<p class='-fz:s'>Lorem ipsum ...</p>
<p class='-fz:m'>Lorem ipsum ...</p>
<p class='-fz:l'>Lorem ipsum ...</p>
<p class='-fz:xl'>Lorem ipsum ...</p>
<p class='-fz:2xl'>Lorem ipsum ...</p>
<p class='-fz:3xl'>Lorem ipsum ...</p>
<p class='-fz:4xl'>Lorem ipsum ...</p>

スケーリングについて

Lism では、フォントサイズのスケーリングには数学的に美しいとされるスケーリング理論に基づいて定義することを推奨しています。

参考: 音楽、数学、タイポグラフィ

デフォルトでは、分子8の調和数列ベースに設定しています。

:root{
  --fz-mol: 8;
  --fz--4xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 5));
  --fz--3xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 4));
  --fz--2xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 3));
  --fz--xl: calc(1em * var(--fz-mol) / (var(--fz-mol) - 2));
  --fz--l: calc(1em * var(--fz-mol) / (var(--fz-mol) - 1));
  --fz--m: 1em;
  --fz--s: calc(1em * var(--fz-mol) / (var(--fz-mol) + 1));
  --fz--xs: calc(1em * var(--fz-mol) / (var(--fz-mol) + 2));
  --fz--2xs: calc(1em * var(--fz-mol) / (var(--fz-mol) + 3));
}

:rootで指定している --fz-mol を上書きすることで、スケーリングの基準（分子）を変更できます。

分子は 7~9 あたりで選ぶのがおすすめです。

`--fz-mol`の違い

↓

:root{--fz-mol:7}

2xs

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

xs

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

s

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

m

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

l

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

2xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

3xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

4xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

↓

:root{--fz-mol:8}

2xs

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

xs

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

s

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

m

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

l

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

2xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

3xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

4xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

↓

:root{--fz-mol:9}

2xs

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

xs

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

s

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

m

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

l

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

2xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

3xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

4xl

ロレムイプサムの座り雨、トマ好き学習だったエリット、しかし時と活力はそのような木々と楽しみ。

TYPO.LH

line-height 用のトークンです。

トークン	変数	クラス	初期値
`base`	`--lh--base`	`.-lh:base`	`1.75`
`xs`	`--lh--xs`	`.-lh:xs`	`calc({base} - 0.25)`
`s`	`--lh--s`	`.-lh:s`	`calc({base} - 0.125)`
`l`	`--lh--l`	`.-lh:l`	`calc({base} + 0.125)`
`xl`	`--lh--xl`	`.-lh:xl`	`calc({base} + 0.25)`

base値は日本語では 1.625, 1.75, 1.875 あたりがおすすめです。（英語なら 1.5, 1.625 あたりがおすすめ）

↓

Preview

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

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

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

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

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

<p class="-lh:xs">Lorem ipsum ...</p>
<p class="-lh:s">Lorem ipsum ...</p>
<p class="-lh:base">Lorem ipsum ...</p>
<p class="-lh:l">Lorem ipsum ...</p>
<p class="-lh:xl">Lorem ipsum ...</p>

TYPO.LTS

letter-spacing 用のトークンです。

トークン	変数	クラス	初期値
`base`	`--lts--base`	`-lts:base`	`normal`
`s`	`--lts--s`	`-lts:s`	`-0.05em`
`l`	`--lts--l`	`-lts:l`	`0.05em`
`xl`	`--lts--xl`	`-lts:xl`	`0.125em`

↓

Preview

s: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

base: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

l: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

xl: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

<p class="-lts:s">Lorem ipsum ...</p>
<p class="-lts:base">Lorem ipsum ...</p>
<p class="-lts:l">Lorem ipsum ...</p>
<p class="-lts:xl">Lorem ipsum ...</p>

`OPACITY`

トークン値	変数	クラス	初期値
`low`	`--op--low`	`.-op:low`	`0.25`
`mid`	`--op--mid`	`.-op:mid`	`0.5`
`high`	`--op--high`	`.-op:high`	`0.75`

↓

Preview

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

<p class="-op:low">Lorem ipsum ...</p>
<p class="-op:mid">Lorem ipsum ...</p>
<p class="-op:high">Lorem ipsum ...</p>

`RADIUS`

トークン値	変数	クラス	初期値
`1`	`--bdrs--1`	`.-bdrs:1`	`0.125rem`
`2`	`--bdrs--2`	`.-bdrs:2`	`0.25rem`
`3`	`--bdrs--3`	`.-bdrs:3`	`0.5rem`
`4`	`--bdrs--4`	`.-bdrs:4`	`1rem`
`5`	`--bdrs--5`	`.-bdrs:5`	`2rem`
`99`	`--bdrs--99`	`.-bdrs:99`	`99rem`

↓

Preview

<div class="-bdrs:1">...</div>
<div class="-bdrs:2">...</div>
<div class="-bdrs:3">...</div>
<div class="-bdrs:4">...</div>
<div class="-bdrs:5">...</div>
<div class="-bdrs:99">...</div>

`SHADOW`

トークン値	変数	クラス
`1`	`--bxsh--1`	`-bxsh:1`
`2`	`--bxsh--2`	`-bxsh:2`
`3`	`--bxsh--3`	`-bxsh:3`
`4`	`--bxsh--4`	`-bxsh:4`
`5`	`--bxsh--5`	`-bxsh:5`
`-1`	`--bxsh--i1`	`-bxsh:-1`
`-2`	`--bxsh--i2`	`-bxsh:-2`

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

構成変数	初期値
`--sh-hsl`	`220 4% 8%`
`--sh-a`	`5%`
`--sh-sz--[0~5]`

:root{
  --sh-color: hsl(var(--sh-hsl) / var(--sh-a));
  --bxsh--1: var(--sh-sz--0) var(--sh-color), var(--sh-sz--1) var(--sh-color);
  --bxsh--2: var(--sh-sz--1) var(--sh-color), var(--sh-sz--2) var(--sh-color);
  --bxsh--3: var(--sh-sz--2) var(--sh-color), var(--sh-sz--3) var(--sh-color);
  --bxsh--4: var(--sh-sz--3) var(--sh-color), var(--sh-sz--4) var(--sh-color);
  --bxsh--5: var(--sh-sz--4) var(--sh-color), var(--sh-sz--5) var(--sh-color);

  --bxsh--i1: inset var(--sh-sz--0) var(--sh-color), inset var(--sh-sz--1) var(--sh-color);
  --bxsh--i2: inset var(--sh-sz--1) var(--sh-color), inset var(--sh-sz--2) var(--sh-color);
}

↓

Preview

<div class="-bxsh:1">...</div>
<div class="-bxsh:2">...</div>
<div class="-bxsh:3">...</div>
<div class="-bxsh:4">...</div>
<div class="-bxsh:5">...</div>

↓

Preview(inset)

-1

-2

<div class="-bxsh:-1">...</div>
<div class="-bxsh:-2">...</div>

`SIZE`

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

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

.is--container 等で使用されています。

Design Tokens

COLOR

PALETTE

SPACE

TYPO

TYPO.FF

TYPO.FW

TYPO.FZ

スケーリングについて

--fz-molの違い

TYPO.LH

TYPO.LTS

OPACITY

RADIUS

SHADOW

SIZE

`SPACE`

`TYPO`

`--fz-mol`の違い

`OPACITY`

`RADIUS`

`SHADOW`

`SIZE`