カラーシステム

概要

Caroa UIは一貫したカラーシステムを提供しています。すべてのカラーはCSS変数（--caroa-color-*）として定義されており、Tailwind CSSクラスから利用できます。

カラーパレット一覧

Black（黒）

トークン名	HEX	HSL
black-dark	#000000	0 0% 0%
black-base	#1C1C1C	0 0% 11%
black-light	#4A403B	18 10% 27%

White（白）

カラー	トークン名	HEX	HSL
	white	#FFFFFF	0 0% 100%

Sand（サンド）

トークン名	HEX	HSL
sand-dark	#D3C9BD	32.7 20% 78.4%
sand-base	#F2EFEA	37.5 23.5% 93.3%
sand-light	#F9F7F4	37.5 23.5% 96.5%

Ash（アッシュ）

トークン名	HEX	HSL
ash-dark	#A9A9A9	0 0% 66%
ash-base	#D7D7D7	0 0% 84%
ash-light	#F0F0F0	0 0% 94%

Fog（フォグ）

トークン名	HEX	HSL
fog-dark	#B0B8C2	210 12% 72%
fog-base	#E3E8EE	213 30% 91%
fog-light	#F7F9FC	210 60% 98%

Orange（オレンジ） - ブランドカラー

トークン名	HEX	HSL
orange-dark	#A24A30	15 54% 41%
orange-base	#D75A11	22 85% 45%
orange-bright	#FF7A2E	22 100% 59%
orange-light	#FFC19E	22 100% 81%
orange-bg	#FDE9DE	23 92% 94%

Blue（ブルー）

トークン名	HEX	HSL
blue-dark	#1C3AA1	225 70% 37%
blue-base	#2F62D7	219 68% 51%
blue-bright	#3E7BFF	219 100% 62%
blue-light	#A9CCFF	219 100% 83%
blue-bg	#EEF4FF	219 100% 97%

Purple（パープル）

トークン名	HEX	HSL
purple-dark	#9539A3	288 49% 43%
purple-base	#B03CC9	288 54% 51%
purple-bright	#CF5CFF	284 100% 68%
purple-light	#F2C8FE	284 96% 89%
purple-bg	#FBEFFF	284 100% 97%

Turquoise（ターコイズ）

トークン名	HEX	HSL
turquoise-dark	#196773	188 67% 28%
turquoise-base	#3498A6	188 51% 43%
turquoise-bright	#2CBFD0	188 65% 50%
turquoise-light	#A7DBE2	188 51% 77%
turquoise-bg	#E4F6F9	188 70% 94%

Green（グリーン）

トークン名	HEX	HSL
green-dark	#107B40	153 76% 28%
green-base	#1CA459	153 70% 38%
green-bright	#2FD86C	153 74% 52%
green-light	#9FE7B4	153 57% 76%
green-bg	#DFF5E9	153 58% 92%

Red（レッド）

トークン名	HEX	HSL
red-dark	#B71C1C	0 73% 41%
red-base	#E53930	4 77% 54%
red-bright	#FF554A	4 100% 65%
red-light	#FFAA9F	4 100% 81%
red-bg	#FDE7E7	0 80% 95%

Yellow（イエロー）

トークン名	HEX	HSL
yellow-dark	#C8A54E	41 52% 47%
yellow-base	#F2C21C	47 88% 53%
yellow-bright	#FFD237	47 100% 61%
yellow-light	#FFE99C	47 100% 81%
yellow-bg	#FFF9E0	47 100% 94%

セマンティックカラー

セマンティックカラーは「意味」に基づいた色の定義です。生のカラートークン（orange-baseなど）を直接使わず、セマンティックカラー（primaryなど）を使うことで、テーマ変更や一括修正が容易になります。

基本原則

// ✅ 推奨: セマンティックカラーを使う
<Button variant="primary">購入する</Button>
<div className="bg-background">...</div>
 
// ❌ 非推奨: 生のカラートークンを直接使う
<div className="bg-orange-base">...</div>

背景・テキスト系

ページ全体やコンテナの背景色に使います。

セマンティック	実際の色	用途・解説
background	white	ページ全体の背景色。最も基本となるベース。
foreground	black-base	メインのテキスト色。背景に対して十分なコントラスト。
card	white	カードやコンテナの背景。ダークモードでは背景より明るくして階層感を出す。
popover	white	ドロップダウン、ツールチップなどの浮遊要素の背景。

アクション系

ボタンやインタラクティブ要素に使います。

セマンティック	実際の色	用途・解説
primary	orange-base	ブランドカラー。CTA、重要なアクション、特に目立たせたい要素に。
base	black-base	通常のUI要素。ボタンのデフォルト色。標準的なアクション。
secondary	sand-base	サブアクション。primaryほど目立たせたくないボタンやタグに。
accent	sand-light	温かみのある背景色。ページ全体の背景やセクション背景など、静的な領域に使用。落ち着いた雰囲気を演出し、コンテンツを引き立てる。
accent-action	sand-base	インタラクティブ状態の背景色。ホバー時、選択状態、アクティブ状態など、ユーザー操作に反応する要素に使用。accentより少し濃い色でフィードバックを表現。
muted	ash-light	無効状態、補足テキスト、プレースホルダー。控えめな表示。

💡 accent と accent-action について

一般的なデザイン理論では「accent = 目立つ差し色」ですが、Caroa UIでは「温かみのある控えめな背景色」として定義しています。

accent (sand-light)

静的な背景色として使用

ページ全体の背景、セクション背景、カードの背景など

落ち着いた雰囲気を演出し、白一色より温かみのある印象を与える

accent-action (sand-base)

ユーザー操作に反応するインタラクティブな状態で使用

ホバー時、選択状態、アクティブ状態、フォーカス状態など

accentより少し濃い色で、操作可能であることや現在の状態を視覚的にフィードバック
// ページ背景（静的）
<main className="bg-accent">
 
// ホバー時の背景変化
<button className="hover:bg-accent-action">
 
// 選択状態の背景
<div className={cn(selected && "bg-accent-action")}>
 
// テーブル行のホバー
<tr className="hover:bg-accent-action">
 
// サイドバーのアクティブ項目
<SidebarItem className={cn(isActive && "bg-accent-action")}>

状態・フィードバック系

ユーザーへのフィードバックや状態表示に使います。

セマンティック	実際の色	用途・解説
destructive	red-base	破壊的アクション。削除ボタン、取り消せない操作など。
error	red-base	エラー状態。バリデーションエラー、入力エラーなど。destructiveのエイリアス。
success	green-base	成功、完了、有効状態。ポジティブなフィードバック。
warning	yellow-base	警告、注意喚起。エラーほど深刻ではないが確認が必要な状態。
info	blue-base	情報、ヒント、お知らせ。ニュートラルな情報提供。

destructive と error の使い分け

destructive と error は同じ色（red-base）ですが、意味的に使い分けることで、コードの意図が明確になります。

// ✅ 破壊的アクション → destructive
<Button variant="destructive">削除する</Button>
<Button variant="destructive">アカウントを完全に削除</Button>
 
// ✅ エラー状態 → error
<span className="text-error">入力値が不正です</span>
<div className="border-error bg-error-light">エラーメッセージ</div>
<Input className="border-error" aria-invalid="true" />

用途	使用するトークン	例
削除ボタン	`destructive`	`<Button variant="destructive">`
取り消せない操作	`destructive`	「完全に削除」ボタン
バリデーションエラー	`error`	`text-error`, `border-error`
フォームエラーメッセージ	`error`	`<FieldError>`, `text-error`
エラートースト	`error`	`toast.error()`

状態色の使用例

Errorbg-error-light / text-error

Successbg-success-light

Warningbg-warning-light

Infobg-info-light

ボーダー・入力系

境界線やフォーム要素に使います。

セマンティック	実際の色	用途・解説
border	ash-light	標準的なボーダー色。カード、セパレーター、テーブルの罫線に。
border-muted	ash-light / 0.8	薄めのボーダー。テーブルの罫線など控えめな境界線に。
input	ash-light	入力フィールドのボーダー。非フォーカス時の状態。
ring	fog-dark	フォーカスリング。キーボードナビゲーション時のフォーカス表示。

リンク・サイドバー系

セマンティック	実際の色	用途・解説
link	blue-dark	テキストリンクの色。クリック可能であることを示す。
sidebar	white	サイドバーの背景色。
sidebar-accent	sand-light	サイドバー内のホバー・選択状態の背景。

セマンティックカラー一覧（まとめ）

セマンティック	実際の色	Tailwindクラス	用途
`background`	white	`bg-background`	ページ背景
`foreground`	black-base	`text-foreground`	メインテキスト
`card`	white	`bg-card`	カード背景
`popover`	white	`bg-popover`	ポップオーバー背景
`primary`	orange-base	`bg-primary`	ブランド、CTA
`base`	black-base	`bg-base`	通常のUI
`secondary`	sand-base	`bg-secondary`	サブ要素
`accent`	sand-light	`bg-accent`	温かみのある背景色。ページ背景やセクション背景など、落ち着いた雰囲気を演出する
`accent-action`	sand-base	`bg-accent-action`	インタラクティブ状態の背景。ホバー、選択状態、アクティブ状態など、ユーザー操作に反応する要素に使用
`muted`	ash-light	`bg-muted`	無効、補足
`destructive`	red-base	`bg-destructive`	破壊的アクション（削除ボタンなど）
`error`	red-base	`text-error`	エラー状態（destructiveのエイリアス）
`success`	green-base	`bg-success`	成功、完了
`warning`	yellow-base	`bg-warning`	警告、注意
`info`	blue-base	`bg-info`	情報、ヒント
`border`	ash-light	`border-border`	ボーダー
`border-muted`	ash-light / 0.8	`border-border-muted`	薄めのボーダー
`input`	ash-light	`border-input`	入力ボーダー
`ring`	fog-dark	`ring-ring`	フォーカスリング
`link`	blue-dark	`text-link`	リンク
`sidebar`	white	`bg-sidebar`	サイドバー背景
`sidebar-accent`	sand-light	`bg-sidebar-accent`	サイドバーハイライト

コンポーネントでの使い方

Buttonのカラーバリアント

<Button>Base (Default)</Button>
<Button variant="primary">Primary</Button>
<Button variant="success">Success</Button>
<Button variant="warning">Warning</Button>
<Button variant="destructive">Destructive</Button>

Tailwind CSSでの使い方

{/* 背景色 */}
<div className="bg-orange-base">ブランドカラー背景</div>
<div className="bg-destructive-light">エラー背景（薄い）</div>
 
{/* テキスト色 */}
<p className="text-blue-base">青いテキスト</p>
<p className="text-destructive">エラーテキスト</p>
 
{/* ボーダー */}
<div className="border border-ash-base">グレーボーダー</div>
<div className="border border-destructive/20">エラーボーダー（透明度20%）</div>

CSS変数

すべてのカラートークンは--caroa-color-*形式のCSS変数として利用可能です。

/* プロジェクト固有のカスタマイズ */
:root {
  /* セマンティックカラーの上書き */
  --caroa-primary: var(--caroa-color-blue-base);
  --caroa-destructive: var(--caroa-color-red-base);
 
  /* 独自のカラー追加 */
  --brand-gradient: linear-gradient(
    to right,
    hsl(var(--caroa-color-orange-base)),
    hsl(var(--caroa-color-orange-bright))
  );
}

useAutoThemeフック

テーマカラーを動的に変更するためのフックです。

import { useAutoTheme } from '@caroainc/ui-components'
 
function App() {
  useAutoTheme({
    primary: 'blue-base',      // プライマリカラー
    base: 'black-base',        // ベースカラー
    secondary: 'sand-base',    // セカンダリカラー
    accent: 'sand-light',      // アクセントカラー
    borderRadius: '0.5rem',    // 角丸
  })
 
  return <YourApp />
}

カラーシステム

On this page