カラーとテーマ · Tinyrack Design System

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

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

表面: surface と surfaceMuted はニュートラルなレイヤーを作ります。surfaceHover、surfaceSelected、surfacePressed は、操作を強調するときだけ Rack Blue を加えます。
内容: 基本文字、補助文字、プレースホルダー、境界線、反転の各ロールは、前景色を文脈に結び付けます。text、textMuted、textPlaceholder、border、surfaceInverse など、意味に合うトークンを選んでください。
操作: 主操作の通常、ホバー、押下、前景色は、primary、primaryHover、primaryPressed、onPrimary で 1 つのセットになります。
ステータス: 情報、成功、警告、危険には、それぞれ内容、表面、操作、境界線、前景色のロールがあります。

テーマ構造

祖先要素に 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 を使用します。製品に別のアイデンティティが必要な場合に限り、Tinyrack のテーマセレクターを維持したまま、製品用のアクセントセレクターを追加してください。通常、ホバー、押下、前景のコントラストを一貫したセットとして保つため、4 つのロールをすべて上書きします。

[data-accent="product-violet"] {
  --tinyrack-primary: #6d28d9;
  --tinyrack-primary-hover: #5b21b6;
  --tinyrack-primary-pressed: #4c1d95;
  --tinyrack-on-primary: #ffffff;
}

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

避ける使い方

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

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

ロール	明るいテーマ	暗いテーマ
`surface`	`#ffffff`	`#0a0a0a`
`surfaceMuted`	`#f5f5f5`	`#171717`
`surfaceHover`	`#eff6ff`	`#172554`
`surfaceSelected`	`#dbeafe`	`#1e3a8a`
`surfacePressed`	`#bfdbfe`	`#1e40af`
`text`	`#171717`	`#fafafa`
`textMuted`	`#525252`	`#a3a3a3`
`textPlaceholder`	`#737373`	`#a3a3a3`
`border`	`#d4d4d4`	`#262626`
`borderStrong`	`#a3a3a3`	`#404040`
`controlBorder`	`#d4d4d4`	`#262626`
`controlTrack`	`#d4d4d4`	`#262626`
`focus`	`#2563eb`	`#60a5fa`
`surfaceInverse`	`#171717`	`#fafafa`
`textInverse`	`#fafafa`	`#171717`
`borderInverse`	`#a3a3a3`	`#737373`
`skeletonFill`	`#d4d4d4`	`#404040`
`skeletonHighlight`	`#f5f5f5`	`#525252`
`primary`	`#1d4ed8`	`#60a5fa`
`primaryHover`	`#1e40af`	`#93c5fd`
`primaryPressed`	`#1e3a8a`	`#bfdbfe`
`onPrimary`	`#ffffff`	`#172554`
`info`	`#1d4ed8`	`#93c5fd`
`infoHover`	`#1e40af`	`#bfdbfe`
`infoPressed`	`#1e3a8a`	`#dbeafe`
`infoSurface`	`#eff6ff`	`#172554`
`infoSurfaceSubtle`	`#eff6ff`	`#262d34`
`infoSurfaceHover`	`#dbeafe`	`#1e3a8a`
`infoSurfacePressed`	`#bfdbfe`	`#1e40af`
`infoBorder`	`#2563eb`	`#60a5fa`
`onInfo`	`#ffffff`	`#172554`
`success`	`#15803d`	`#86efac`
`successHover`	`#166534`	`#bbf7d0`
`successPressed`	`#14532d`	`#dcfce7`
`successSurface`	`#f0fdf4`	`#052e16`
`successSurfaceSubtle`	`#f0fdf4`	`#25322a`
`successSurfaceHover`	`#dcfce7`	`#14532d`
`successSurfacePressed`	`#bbf7d0`	`#166534`
`successBorder`	`#16a34a`	`#4ade80`
`onSuccess`	`#ffffff`	`#052e16`
`warning`	`#92400e`	`#fcd34d`
`warningHover`	`#78350f`	`#fde68a`
`warningPressed`	`#451a03`	`#fef3c7`
`warningSurface`	`#fffbeb`	`#451a03`
`warningSurfaceSubtle`	`#fffbeb`	`#342e1e`
`warningSurfaceHover`	`#fef3c7`	`#78350f`
`warningSurfacePressed`	`#fde68a`	`#92400e`
`warningBorder`	`#d97706`	`#fbbf24`
`onWarning`	`#ffffff`	`#451a03`
`danger`	`#b91c1c`	`#f87171`
`dangerHover`	`#991b1b`	`#fca5a5`
`dangerPressed`	`#7f1d1d`	`#fecaca`
`dangerSurface`	`#fef2f2`	`#450a0a`
`dangerSurfaceSubtle`	`#fef2f2`	`#332222`
`dangerSurfaceHover`	`#fee2e2`	`#7f1d1d`
`dangerSurfacePressed`	`#fecaca`	`#991b1b`
`dangerBorder`	`#dc2626`	`#f87171`
`onDanger`	`#ffffff`	`#450a0a`
`scrim`	`#0000008f`	`#000000b8`

実装

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

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

トークン作成者向け基本パレット

基本カラースケールはトークン作成ツール向けにエクスポートされています。実行時 CSS と Tailwind の連携層には含まれません。

`neutral`

段階	値
50	`#fafafa`
100	`#f5f5f5`
300	`#d4d4d4`
400	`#a3a3a3`
500	`#737373`
600	`#525252`
700	`#404040`
800	`#262626`
900	`#171717`
950	`#0a0a0a`

`blue`

段階	値
50	`#eff6ff`
100	`#dbeafe`
200	`#bfdbfe`
300	`#93c5fd`
400	`#60a5fa`
600	`#2563eb`
700	`#1d4ed8`
800	`#1e40af`
900	`#1e3a8a`
950	`#172554`

`green`

段階	値
50	`#f0fdf4`
100	`#dcfce7`
200	`#bbf7d0`
300	`#86efac`
400	`#4ade80`
600	`#16a34a`
700	`#15803d`
800	`#166534`
900	`#14532d`
950	`#052e16`

`amber`

段階	値
50	`#fffbeb`
100	`#fef3c7`
200	`#fde68a`
300	`#fcd34d`
400	`#fbbf24`
600	`#d97706`
800	`#92400e`
900	`#78350f`
950	`#451a03`

`red`

段階	値
50	`#fef2f2`
100	`#fee2e2`
200	`#fecaca`
300	`#fca5a5`
400	`#f87171`
600	`#dc2626`
700	`#b91c1c`
800	`#991b1b`
900	`#7f1d1d`
950	`#450a0a`