Color Tokens
- Box にも variant
テキスト系(code, link )
リサイズ可能エリアです ↑
カラートークン
Point colors
リサイズ可能エリアです ↑
Basic カラー
リサイズ可能エリアです ↑
Basic系カラーはデフォルトで 背景色・文字色・ボーダー色などに使われています。(50:背景色 ←→ 950:文字色)
--hs--basicで色味を一括調整可能。
パレットカラー
リサイズ可能エリアです ↑
セマンティックトークン
文字色(color)用
| トークン | 変数 | 初期値 |
|---|---|---|
base | --c--base | --b900 |
pale | --c--pale | --b700 |
opposite | --c--opposite | --b50 |
weak - srtong? pale - deep?
背景色(background-color)用
| トークン | 変数 | 初期値 |
|---|---|---|
base | --bgc--base | --b50 |
pale | --bgc--pale | --b100 |
opposite | --bgc--opposite | --b900 |
ボーダー色(border-color)用
| トークン | 変数 | 初期値 |
|---|---|---|
base | --bdc--base | --b300 |
テキストカラー
リサイズ可能エリアです ↑
背景色
リサイズ可能エリアです ↑
ボーダーカラー
リサイズ可能エリアです ↑