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 等で使用できます。