カラーとテーマ

セマンティックロールを選ぶ

色の値ではなく、意味から決めてください。

• 表面: surface と surfaceMuted はニュートラルなレイヤーを作ります。surfaceHover、surfaceSelected、surfacePressed は、操作を強調するときだけ Rack Blue を加えます。
• 内容: 基本文字、補助文字、プレースホルダー、境界線、反転の各ロールは、前景色を文脈に結び付けます。text、textMuted、textPlaceholder、border、surfaceInverse など、意味に合うトークンを選んでください。
• 操作: primary、primaryHover、primaryPressed はソリッド操作の面を作り、onPrimary はその上の内容を表示します。primary の面を使わない強調には primaryForeground を選んでください。
• ステータス: 情報、成功、警告、危険には、それぞれ塗り、on-*、単独の *Foreground、表面、境界線のロールがあります。
• イラストレーション: 面、ディテール、輪郭線、影のロールは、テーマが変わっても絵の階層を維持します。構成方法と例はイラストレーションで確認してください。

テーマ構造

祖先要素に data-theme="tinyrack-light" または data-theme="tinyrack-dark" を設定してください。両方のセレクターが同じセマンティック変数を定義するため、テーマが変わっても子要素の意図は維持されます。

<html data-theme="tinyrack-light">

通常、ホバー、押下の各ロールをセットで使います。明るいテーマから暗いテーマの値を算出したり、無関係な塗りに前景色を載せたりしないでください。

暗いテーマの通常時の境界には、border、controlBorder、controlTrack として Neutral 800 の #262626 を使います。hover、pressed、dragged 状態のコントロールでは、操作を強調するために Neutral 700 の #404040 である borderStrong を使用できます。どちらも視覚的に控えめで、標準の暗いサーフェスに対して単独では WCAG の非テキストコントラスト 3:1 を満たしません。境界が重要な場合は、フォーカス、ステータス、テキスト、表面の手掛かりも維持してください。

デフォルトの操作色を安全に上書きする

Tinyrack はデフォルトの操作色に Rack Blue を使用します。製品に別のアイデンティティが必要な場合に限り、製品用のアクセントセレクターを追加してください。塗りの各状態、その上の内容、単独の前景色を 1 つのセットとして上書きします。

[data-theme="tinyrack-dark"][data-accent="product-violet"] {
  --tinyrack-primary: #6d28d9;
  --tinyrack-primary-hover: #7c3aed;
  --tinyrack-primary-pressed: #5b21b6;
  --tinyrack-primary-foreground: #a78bfa;
  --tinyrack-on-primary: #ffffff;
}

<main data-theme="tinyrack-dark" data-accent="product-violet">

避ける使い方

• プロダクト UI でパレット値を直接使わないでください。テーマに追従しません。
• ステータス色を装飾だけに使ったり、警告と危険のロールを入れ替えたりしないでください。
• primary だけを上書きしないでください。状態と前景色のセットが不完全だと操作フィードバックが一貫しません。
• on-* 色を別の背景ロール上に置かないでください。

セマンティックカラーのリファレンス

実装

@import "@tinyrack/ui/core.css";
.rack-status { color: var(--tinyrack-info-foreground); background: var(--tinyrack-info-surface-subtle); border-color: var(--tinyrack-info-border); }

接頭辞付きユーティリティは Tailwind の色マッピングで確認してください。