カラー定義について

Rabee UIで使用している色と用途の一覧です。実際に使用するCSSはセットアップの手順で確認できます。

概要

Rabee UIのカラーは、適用対象によって分類されるカラーと、機能によって分類されるカラーがあります。
適用対象によって分類するカラーは、Surface、Foreground、Border、Overlayの4種類があります。
機能によって分類するカラーは、Primary、Destructive、Success、Warningの4種類があります。

Surface

ページ、カード、ボタンなどの背景に使用するカラーです。

名前	値 (Light)	値 (Dark)	用途
surface	`#FFF`	`#09090B`	基準となる背景色です。
inverse	`#18181B`	`#FAFAFA`	ライトモードでは暗く、ダークモードでは明るい背景色です。Tooltipなど周囲とのコントラストを強めたい要素に使います。
muted	`#E4E4E7`	`#27272A`	主張を抑えた背景色です。Disabled状態などに使います。
subtle	`#FAFAFA`	`#18181B`	surfaceより控えめな背景色です。Tableのヘッダーなどに使います。
accent	`#F4F4F5`	`#27272A`	hoverなどのやや目立たせたい状態に使う背景色です。
subarea	`#FAFAFA`	`#18181B`	Sidebarなど、メインではない補助的なエリアの背景色です。
subarea-accent	`#F4F4F5`	`#27272A`	subarea内で、hoverなどのやや目立たせたい状態に使う背景色です。

Foreground

テキスト・アイコンなどの前景に使用するカラーです。

名前	値 (Light)	値 (Dark)	用途
foreground	`#18181B`	`#FAFAFA`	基準となるテキスト・アイコンの色です。
inverse-foreground	`#FAFAFA`	`#18181B`	inverseの背景色の上に乗せるテキスト・アイコンの色です。
bright-foreground	`#FAFAFA`	`#FAFAFA`	ライト・ダークを問わず常に明るく表示するテキスト・アイコンの色です。primaryなどの色が濃い背景の上に使います。
muted-foreground	`#71717A`	`#A1A1AA`	プレースホルダーなど、主張を抑えたテキスト・アイコンの色です。
subtle-foreground	`#A1A1AA`	`#71717A`	補足説明など、最も主張の弱いテキスト・アイコンの色です。
accent-foreground	`#18181B`	`#FAFAFA`	hoverなどのやや目立たせたい状態に使うテキスト・アイコンの色です。
subarea-foreground	`#3F3F46`	`#F4F4F5`	subareaで使うテキスト・アイコンの色です。
subarea-accent-foreground	`#18181B`	`#FAFAFA`	subareaで、hoverなどのやや目立たせたい状態に使うテキスト・アイコンの色です。
link	`#2563EB`	`#60A5FA`	リンクテキストの色です。
link-visited	`#7E22CE`	`#C084FC`	訪問済みのリンクテキストの色です。

Border

ボーダーに使用するカラーです。

名前	値 (Light)	値 (Dark)	用途
border	`#E4E4E7`	`#3F3F46`	基準となるボーダーの色です。
input	`#E4E4E7`	`#3F3F46`	InputやTextareaなど、フォーム要素に使うボーダー色です。
ring	`#2563EB`	`#1D4ED8`	フォーカス時に表示するリングの色です。

Overlay

モーダルなど、要素の前面に重ねて使うカラーです。

名前	値 (Light)	値 (Dark)	用途
overlay-bright	`#FFF`	`#FFF`	ライト・ダークを問わず常に明るいオーバーレイの色です。
overlay-dark	`#09090B`	`#09090B`	ライト・ダークを問わず常に暗いオーバーレイの色です。

Function

機能を示すカラーです。背景、前景、ボーダーのいずれにも使うことができます。

名前	値 (Light)	値 (Dark)	用途
primary	`#2563EB`	`#1D4ED8`	主要なアクションを示す色です。
primary-foreground	`#EFF6FF`	`#EFF6FF`	primary背景の上に乗せるテキスト・アイコンの色です。
destructive	`#DC2626`	`#B91C1C`	削除など、破壊的なアクションを示す色です。
destructive-foreground	`#FEF2F2`	`#FEF2F2`	destructive背景の上に乗せるテキスト・アイコンの色です。
success	`#16A34A`	`#15803D`	成功・完了を示す色です。
success-foreground	`#F0FDF4`	`#F0FDF4`	success背景の上に乗せるテキスト・アイコンの色です。
warning	`#FBBF24`	`#F59E0B`	警告・注意を示す色です。
warning-foreground	`#451A03`	`#451A03`	warning背景の上に乗せるテキスト・アイコンの色です。