カラーパレット
これらは primitive カラーランプ — 4 レイヤートークンモデルの最下層です。 すべての semantic・component・theme トークンは、最終的に以下のいずれかの シェードに解決されます。
各ランプは標準的な 50–950 スケールです。5 つのニュートラル
ランプには調整済みの 350 ステップを追加しています — ダークテーマの
text-muted 用シェードで、muted テキストが muted-bg(ランプの 700)の
上でも 4.5:1 以上のコントラストを保つよう選定されています。gray ランプが
プロジェクトのデフォルトニュートラルで、slate / zinc / neutral /
stone はテーマビルダーが
提供する代替ニュートラルです。アクセント / ステータスの色相は、組み込みの
data-color テーマと、固定の semantic info / success / warning /
error カラーを支えています。
ステップ番号は明度である
Section titled “ステップ番号は明度である”7 つの彩度ランプは手で選んだ値ではなく生成されたものです。それぞれ 1 つの
色相角を共有ラダーに通し、oklch(L C H) として書き出しています:
Lはステップが決め、色相をまたいで同一です。したがって600は blue でも amber でも同じ暗さを意味します。Cはステップごとの絶対目標値で、その色相がその明度で sRGB 内に 保持できる範囲にクランプされます。彩度を色域最大値に対する比率に すると色域境界の形をなぞることになり、その形は色相で大きく振れます — green の色域は明るい側で最も広いため、比率固定ではgreen.200がgreen.500より鮮やかになり、淡いティントがネオン調になります。Hはランプを通じて一定なので、ランプの途中で色相がずれません。
これがアクセントテーマが
1 つの形と 1 つの前景ルールを共有できる理由です。値の再生成は
scripts/build-ramp.mjs が行い、test/ramp.test.mjs がコミット済みトークンと
ラダーの一致を検証します。
5 つのニュートラルランプは生成対象ではありません。これらは元から 知覚的に均一で(どのステップでも明度のばらつきは最大 1.8 ポイント。変更前の 彩度ランプは 18.3)、ダークモードは完全にニュートラルから構成されるため、 手を加えていません。
スウォッチのラベルは他ツールへ貼り付けやすいよう sRGB hex を表示しています。
ホバーするとトークンパスと、実際に記述されている oklch() 値が見られます。
oklch(1 0 0)black oklch(0 0 0)Neutrals
color.graycolor.slatecolor.zinccolor.neutralcolor.stoneAccent & status hues
color.bluecolor.indigocolor.violetcolor.fuchsiacolor.rosecolor.redcolor.orangecolor.ambercolor.limecolor.greencolor.tealシェードの参照
Section titled “シェードの参照”カスタムテーマを書くとき (独自テーマの作成を参照)、 DTCG トークンをパスで primitive に向けます:
{ "color": { "action": { "primary": { "bg": { "$type": "color", "$value": "{primitive.color.violet.600}" } } } }}上のスウォッチにホバーすると、正確な {primitive.color.*} パスと hex が
表示されます。ビルドが参照を具体的な値に解決し、primitive 自体は決して
出力されません。