カラー

コンポーネント名は色を指定しません。色はパレットの中に存在し、明るい面と暗い面のために与えられた12色のスケールとして存在します。カラースキームはページがどの面を読み取るかを決定します。コンポーネントは役割を読み取ります — サーフェス、ボーダー、テキスト — それはスケール上の1つの場所です。スキンは決して色を言いません。ヘッダーからスキームを切り替えると、下のスウォッチが再定義されることなく全て移動します。

スケール

パレットはニュートラル、アクセント — ブランド — であり、4つの状態はそれぞれ12色のスケールで、Radix ThemesとMaterial 3が色を配置する方法でレイアウトされています。スケール上の場所は、すべてのスケールと両方の面で同じ意味を持ちます：下の数字が何のためかです。アプリケーションはそのアクセントを与えることでパレットを持ち込みます；すべてのスケールがそれに従います。

--neutral-*

--accent-*

--info-*

--success-*

--warning-*

--error-*

1 作業領域の地面
2 ページの地面、領域の周りや間に
3 フィールドの地面；状態が座っている淡い地面
4 持ち上げられたコントロール；ホバーされた地面
5 カード、ブロック — そしてその控えめなボーダー
6 ボーダー
7 2つの領域の間のボーダー
8 強いボーダー、焦点リング
9 色全体、それが示すものを満たす
10 同じ、ホバーされた
11 地面の上で読み取れるインクとしての色
12 強いインク — ニュートラル、テキスト自体のために

サーフェス

グラウンドは、領域の外側から — 各自がニュートラルスケール上の場所です。ダッシュボードの明るい面は、それらを白までの明るさで順序付け、暗い面は各自が地面からどれだけ持ち上げられているかによって順序付けます。

--surface-zoneページの領域が立つ地面

--surface-pageページ自体とゾーン間に表示されるもの

--surface-shellメニュー、ヘッダー、フッター

--surface-1入力とフィールド

--surface-2ボタン、ツールバー

--surface-3ブロック、カード、モーダル

--surface-invertテキストの色を取り入れることで際立つコントロール

テキスト

注意の3つのレベル — ニュートラル12、11、9：何が読まれているか、それを定義するもの、そして探すときにのみ見つかるもの。

--text-color-default — 読まれているもの

--text-color-muted — ラベル、メタ、サブタイトル

--text-color-subtle — 区切り線と空の状態

ボーダー

4つの重さ、分けるもので区別されます — ニュートラル5から8：1つの領域の中の2つのもの、背後のものからのフィールド、ページの2つの領域、そして焦点を持つもののリング。

--border-color-discreet

--border-color-default

--border-color-region

--border-color-strong

カテゴリー

隣接するものとは何の意味もない13色：チャートの系列、分布のセグメント、ワークフローの段階。名付けられ、番号付けされず — アプリが`cat-mint`を選ぶのは、それがミントのように見えるからです — そしてそれぞれが他のものと同じようにスケールを持ち、カテゴリーは状態のように着用されます：その地面は3、インクは11、満たされるのは9です。

--cat-ruby-*

--cat-grapefruit-*

--cat-bittersweet-*

--cat-sunflower-*

--cat-straw-*

--cat-grass-*

--cat-mint-*

--cat-teal-*

--cat-aqua-*

--cat-blue-jeans-*

--cat-plum-*

--cat-lavender-*

--cat-pink-rose-*