Design Tokens

COLOR

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

これらのカラーは、サイトに合わせて調整してご利用ください。

↓

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.

PALETTE

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

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

--Lが明度、--Cが彩度の基準値として定義されており、この二つの値を調整するとパレットカラー全体の色味を調整できます。

例えば、以下のようにすることで全体を少し明るくすることができ、ダークモード対応が簡単に実装できます。

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

`RADIUS`

トークン値	変数	クラス	初期値
`5`	`--bdrs--5`	`-bdrs:5`	`2px`
`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`
`50`	`--bdrs--50`	`-bdrs:50`	`2rem`
`99`	`--bdrs--99`	`-bdrs:99`	`99rem`

↓

Preview

<div class="-bdrs:5">...</div>
<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`

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

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

構成変数	初期値
`--shc`	`hsl(220 4% 8% / 5%)`
`--shsz--5`	`0px 2px 4px`
`--shsz--10`	`1px 3px 6px`
`--shsz--20`	`1px 5px 10px`
`--shsz--30`	`2px 8px 16px`
`--shsz--40`	`3px 13px 26px`
`--shsz--50`	`5px 21px 42px`

↓

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`

トークン値	変数	クラス	初期値
`-10`	`--o--n10`	`-o:-10`	`0.75`
`-20`	`--o--n20`	`-o:-20`	`0.5`
`-30`	`--o--n30`	`-o:-30`	`0.25`

↓

Preview

-10: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

-20: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

-30: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

<p class="-o:-10">Lorem ipsum ...</p>
<p class="-o:-20">Lorem ipsum ...</p>
<p class="-o:-30">Lorem ipsum ...</p>

`SIZE`

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

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

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