ksk-design-system 1.35.0

package/src/styles/semantic.css

@@ -0,0 +1,247 @@
+/* =============================================================
+   KSK Design System — Semantic Color Tokens
+
+   Layer 2: 用途別カラートークン
+   Primitive トークンを参照し、Light / Dark モードを自動切替。
+   コンポーネント内では必ずこのレイヤーのトークンを使用すること。
+
+   命名規則: --{Category}-{Role}
+   Category: Surface, Text, Border, Object, Brand, Hover, Active,
+             Overlay, Focus, Caution, Success, Warning, Info
+   ============================================================= */
+
+:root {
+  /* ─── Surface（背景） ─── */
+  --Surface-Primary:               var(--Primitive-White);
+  --Surface-Secondary:             var(--Primitive-Gray-50);
+  --Surface-Tertiary:              var(--Primitive-Gray-100);
+  --Surface-Quaternary:            var(--Primitive-Gray-200);
+  --Surface-Disable:               var(--Primitive-Gray-100);
+  --Surface-Inverse:               var(--Primitive-Gray-900);
+  --Surface-Accent-Primary:        var(--Primitive-Brand-500);
+  --Surface-Accent-Primary-Light:  var(--Primitive-Brand-50);
+  --Surface-Accent-Primary-Ultra-Light: var(--Primitive-Brand-50);
+  --Surface-Caution:               var(--Primitive-Red-50);
+  --Surface-Success:               var(--Primitive-Green-50);
+  --Surface-Warning:               var(--Primitive-Amber-50);
+  --Surface-Info:                  var(--Primitive-Blue-50);
+
+  /* Subtle 階層: 半透明 fill（中強度）。
+     bg-red-500/15 のような既存実装が "Surface-Caution"（Primitive-50）の
+     極薄背景では弱すぎ、Strong（fill 全開）では強すぎる場合の中間。
+     既存 Surface-Caution は据え置きで後方互換維持。 */
+  --Surface-Caution-Subtle:        rgba(239, 68, 68, 0.15);   /* Red-500 @ 15% */
+  --Surface-Success-Subtle:        rgba(34, 197, 94, 0.15);   /* Green-500 @ 15% */
+  --Surface-Warning-Subtle:        rgba(249, 115, 22, 0.15);  /* Orange-500 @ 15% */
+  --Surface-Info-Subtle:           rgba(59, 130, 246, 0.15);  /* Blue-500 @ 15% */
+  --Surface-Accent-Primary-Subtle: color-mix(in srgb, var(--Primitive-Brand-500) 15%, transparent);
+
+  /* Strong 階層: fill 全開（Primitive-500 そのまま）。
+     主にバッジ・ピル・通知ドットなど「強調 fill」用途。 */
+  --Surface-Caution-Strong:        var(--Primitive-Red-500);
+  --Surface-Success-Strong:        var(--Primitive-Green-500);
+  --Surface-Warning-Strong:        var(--Primitive-Orange-500);
+  --Surface-Info-Strong:           var(--Primitive-Blue-500);
+
+  /* 動画視聴コンテキスト専用 — テーマに依存しない常時黒オーバーレイ。
+     trailer-feed / video-player のような「常に暗背景の動画 UX」で、
+     ライト/ダーク両モードでも黒地のままにしたいケース用。
+     一般的なオーバーレイには --Overlay-* を使用すること。 */
+  --Surface-VideoOverlay-Light:    rgba(0, 0, 0, 0.40);
+  --Surface-VideoOverlay-Medium:   rgba(0, 0, 0, 0.60);
+  --Surface-VideoOverlay-Strong:   rgba(0, 0, 0, 0.80);
+
+  /* ─── Text（テキスト） ─── */
+  --Text-High-Emphasis:    var(--Primitive-Gray-900);
+  --Text-Medium-Emphasis:  var(--Primitive-Gray-700);
+  --Text-Low-Emphasis:     var(--Primitive-Gray-500);
+  --Text-Disable:          var(--Primitive-Gray-400);
+  --Text-on-Inverse:       var(--Primitive-White);
+  --Text-on-Inverse-Secondary: var(--Primitive-White-Alpha-800);
+  --Text-Accent-Primary:   var(--Primitive-Brand-600);
+  --Text-Success:          var(--Primitive-Green-700);
+  --Text-Caution:          var(--Primitive-Red-600);
+  --Text-Warning:          var(--Primitive-Orange-600);
+  --Text-Info:             var(--Primitive-Blue-600);
+
+  /* ─── Object（アイコン・UI要素） ─── */
+  --Object-High-Emphasis:   var(--Primitive-Gray-900);
+  --Object-Medium-Emphasis: var(--Primitive-Gray-600);
+  --Object-Low-Emphasis:    var(--Primitive-Gray-400);
+  --Object-Disable:         var(--Primitive-Gray-300);
+  --Object-on-Inverse:      var(--Primitive-White);
+  --Object-Accent-Primary:  var(--Primitive-Brand-500);
+  --Object-Caution:         var(--Primitive-Red-500);
+  --Object-Success:         var(--Primitive-Green-500);
+  --Object-Warning:         var(--Primitive-Orange-500);
+  --Object-Info:            var(--Primitive-Blue-500);
+  --Object-Favorite:        var(--Primitive-Red-500);
+  /* レーティング/評価用 — Warning と意味的に分離。
+     ★ の塗りや 4.5/5.0 などのレーティング表示で使用。 */
+  --Object-Rating:          var(--Primitive-Amber-500);
+
+  /* ─── Border（罫線） ─── */
+  --Border-High-Emphasis:   var(--Primitive-Gray-700);
+  --Border-Medium-Emphasis: var(--Primitive-Gray-300);
+  --Border-Low-Emphasis:    var(--Primitive-Gray-200);
+  --Border-Disable:         var(--Primitive-Gray-200);
+  --Border-Accent-Primary:  var(--Primitive-Brand-500);
+  --Border-Caution:         var(--Primitive-Red-500);
+  --Border-Success:         var(--Primitive-Green-500);
+  --Border-Warning:         var(--Primitive-Orange-500);
+  --Border-Info:            var(--Primitive-Blue-500);
+  /* Border の Subtle 階層 — `/30` 的な薄い枠線が必要なときに。
+     Tailwind の `/N` opacity modifier は CSS variable に対しては
+     <alpha-value> プレースホルダ前提なので、明示的な Subtle トークンを
+     提供することで「border-[var(--Border-Accent-Primary)]/30」のような
+     不安定な書き方を避けられる。 */
+  --Border-Accent-Primary-Subtle: color-mix(in srgb, var(--Primitive-Brand-500) 30%, transparent);
+  --Border-Caution-Subtle:  rgba(239, 68, 68, 0.30);
+  --Border-Success-Subtle:  rgba(34, 197, 94, 0.30);
+  --Border-Info-Subtle:     rgba(59, 130, 246, 0.30);
+
+  /* ─── Brand ─── */
+  --Brand-Primary:           var(--Primitive-Brand-600);
+  --Brand-Action:            var(--Primitive-Brand-700);
+  --Brand-Light:             var(--Primitive-Brand-100);
+  --Brand-Ultra-Light:       var(--Primitive-Brand-50);
+
+  /* ─── External Brand（外部サービスの公式色）───
+     SNS / OAuth プロバイダの公式ブランドカラー。テーマ（Brand-*）には
+     連動せず、ライト/ダーク共通で固定。SocialLoginButton 等で生 #hex を
+     直書きせずこのトークンを参照する。新規追加時は公式ガイドライン準拠。 */
+  --Brand-Line:              #06C755;
+  --Brand-Google-Border:     #DADCE0; /* Google ボタンの罫線（Google 推奨グレー） */
+  --Brand-Apple:             #000000;
+  --Brand-Amazon:            #232F3E;
+  --Brand-Amazon-Accent:     #FF9900;
+
+  /* ─── Interactive States ─── */
+  --Hover-Primary-Button:    var(--Primitive-Brand-700);
+  --Active-Primary-Button:   var(--Primitive-Brand-800);
+  --Hover-Secondary-Button:  var(--Primitive-Brand-50);
+  --Active-Secondary-Button: var(--Primitive-Brand-100);
+  --Hover-Tertiary-Button:   var(--Primitive-Gray-100);
+  --Active-Tertiary-Button:  var(--Primitive-Gray-200);
+  --Hover-Ghost-Button:      var(--Primitive-Gray-100);
+  --Hover-Destructive-Button: var(--Primitive-Red-700);
+  --Active-Destructive-Button: var(--Primitive-Red-800);
+
+  /* ─── Overlay ─── */
+  --Overlay-Dark:   var(--Primitive-Gray-Alpha-800);
+  --Overlay-Medium: var(--Primitive-Gray-Alpha-600);
+  --Overlay-Light:  var(--Primitive-Gray-Alpha-200);
+
+  /* ─── Focus ─── */
+  --Focus-High-Emphasis: var(--Primitive-Brand-400);
+
+  /* ─── Semantic Functional ─── */
+  --Caution-Base:    var(--Primitive-Red-600);
+  --Caution-Action:  var(--Primitive-Red-700);
+  --Success-Base:    var(--Primitive-Green-600);
+  --Warning-Base:    var(--Primitive-Orange-600);
+  --Info-Base:       var(--Primitive-Blue-600);
+}
+
+/* ─── Dark Mode ─── */
+.dark {
+  --Surface-Primary:               var(--Primitive-Gray-900);
+  --Surface-Secondary:             var(--Primitive-Gray-800);
+  --Surface-Tertiary:              var(--Primitive-Gray-700);
+  --Surface-Quaternary:            var(--Primitive-Gray-600);
+  --Surface-Disable:               var(--Primitive-Gray-800);
+  --Surface-Inverse:               var(--Primitive-White);
+  --Surface-Accent-Primary:        var(--Primitive-Brand-500);
+  --Surface-Accent-Primary-Light:  var(--Primitive-Brand-900);
+  --Surface-Accent-Primary-Ultra-Light: var(--Primitive-Brand-900);
+  --Surface-Caution:               #2d1414; /* Red-900(#7F1D1D)より彩度を落とした暗赤色 */
+  --Surface-Success:               var(--Primitive-Green-900);
+  --Surface-Warning:               var(--Primitive-Amber-900);
+  --Surface-Info:                  var(--Primitive-Blue-900);
+
+  /* Subtle 階層（Dark） — Primitive-400 系をベースに alpha 20% で
+     暗背景上でも視認できる中強度 fill。 */
+  --Surface-Caution-Subtle:        rgba(248, 113, 113, 0.20);  /* Red-400 @ 20% */
+  --Surface-Success-Subtle:        rgba(74, 222, 128, 0.20);   /* Green-400 @ 20% */
+  --Surface-Warning-Subtle:        rgba(251, 146, 60, 0.20);   /* Orange-400 @ 20% */
+  --Surface-Info-Subtle:           rgba(96, 165, 250, 0.20);   /* Blue-400 @ 20% */
+  --Surface-Accent-Primary-Subtle: color-mix(in srgb, var(--Primitive-Brand-400) 20%, transparent);
+
+  --Surface-Caution-Strong:        var(--Primitive-Red-500);
+  --Surface-Success-Strong:        var(--Primitive-Green-500);
+  --Surface-Warning-Strong:        var(--Primitive-Orange-500);
+  --Surface-Info-Strong:           var(--Primitive-Blue-500);
+
+  /* VideoOverlay はテーマ非依存（常に黒）— Light モードと同じ値。 */
+  --Surface-VideoOverlay-Light:    rgba(0, 0, 0, 0.40);
+  --Surface-VideoOverlay-Medium:   rgba(0, 0, 0, 0.60);
+  --Surface-VideoOverlay-Strong:   rgba(0, 0, 0, 0.80);
+
+  --Text-High-Emphasis:    var(--Primitive-White-Alpha-1000);
+  --Text-Medium-Emphasis:  var(--Primitive-White-Alpha-800);
+  --Text-Low-Emphasis:     var(--Primitive-White-Alpha-600);
+  --Text-Disable:          var(--Primitive-White-Alpha-400);
+  --Text-on-Inverse:       var(--Primitive-Gray-900);
+  --Text-on-Inverse-Secondary: var(--Primitive-Gray-700);
+  --Text-Accent-Primary:   var(--Primitive-Brand-400);
+  --Text-Success:          var(--Primitive-Green-400);
+  --Text-Caution:          var(--Primitive-Red-400);
+  --Text-Warning:          var(--Primitive-Orange-400);
+  --Text-Info:             var(--Primitive-Blue-400);
+
+  --Object-High-Emphasis:   var(--Primitive-White-Alpha-1000);
+  --Object-Medium-Emphasis: var(--Primitive-White-Alpha-700);
+  --Object-Low-Emphasis:    var(--Primitive-White-Alpha-500);
+  --Object-Disable:         var(--Primitive-White-Alpha-300);
+  --Object-on-Inverse:      var(--Primitive-Gray-900);
+  --Object-Accent-Primary:  var(--Primitive-Brand-400);
+  --Object-Caution:         var(--Primitive-Red-400);
+  --Object-Success:         var(--Primitive-Green-400);
+  --Object-Warning:         var(--Primitive-Orange-400);
+  --Object-Info:            var(--Primitive-Blue-400);
+  --Object-Favorite:        var(--Primitive-Red-400);
+  --Object-Rating:          var(--Primitive-Amber-400);
+
+  --Border-High-Emphasis:   var(--Primitive-White-Alpha-500);
+  --Border-Medium-Emphasis: var(--Primitive-White-Alpha-300);
+  --Border-Low-Emphasis:    var(--Primitive-White-Alpha-200);
+  --Border-Disable:         var(--Primitive-White-Alpha-100);
+  --Border-Accent-Primary:  var(--Primitive-Brand-400);
+  --Border-Caution:         var(--Primitive-Red-400);
+  --Border-Success:         var(--Primitive-Green-400);
+  --Border-Warning:         var(--Primitive-Orange-400);
+  --Border-Info:            var(--Primitive-Blue-400);
+  --Border-Accent-Primary-Subtle: color-mix(in srgb, var(--Primitive-Brand-400) 40%, transparent);
+  --Border-Caution-Subtle:  rgba(248, 113, 113, 0.40);
+  --Border-Success-Subtle:  rgba(74, 222, 128, 0.40);
+  --Border-Info-Subtle:     rgba(96, 165, 250, 0.40);
+
+  --Brand-Primary:           var(--Primitive-Brand-400);
+  --Brand-Action:            var(--Primitive-Brand-300);
+  --Brand-Light:             var(--Primitive-Brand-900);
+  --Brand-Ultra-Light:       var(--Primitive-Brand-900);
+
+  --Hover-Primary-Button:    var(--Primitive-Brand-500);
+  --Active-Primary-Button:   var(--Primitive-Brand-600);
+  --Hover-Secondary-Button:  var(--Primitive-Brand-900);
+  --Active-Secondary-Button: var(--Primitive-Brand-800);
+  --Hover-Tertiary-Button:   var(--Primitive-White-Alpha-100);
+  --Active-Tertiary-Button:  var(--Primitive-White-Alpha-200);
+  --Hover-Ghost-Button:      var(--Primitive-White-Alpha-100);
+  --Hover-Destructive-Button: var(--Primitive-Red-500);
+  --Active-Destructive-Button: var(--Primitive-Red-600);
+
+  --Overlay-Dark:   var(--Primitive-Gray-Alpha-900);
+  --Overlay-Medium: var(--Primitive-Gray-Alpha-700);
+  --Overlay-Light:  var(--Primitive-Gray-Alpha-400);
+
+  /* ─── Focus ─── */
+  --Focus-High-Emphasis: var(--Primitive-Brand-400);
+
+  /* ─── Semantic Functional ─── */
+  --Caution-Base:    var(--Primitive-Red-400);
+  --Caution-Action:  var(--Primitive-Red-500);
+  --Success-Base:    var(--Primitive-Green-400);
+  --Warning-Base:    var(--Primitive-Orange-400);
+  --Info-Base:       var(--Primitive-Blue-400);
+}

package/src/styles/typography.css

@@ -0,0 +1,140 @@
+/* =============================================================
+   KSK Design System — Typography Utilities
+
+   Layer 3: typo-* ユーティリティクラス
+   font-size / line-height / font-weight / letter-spacing を
+   1クラスに集約し、デザインのブレを防止する。
+
+   ルール:
+   1. 必ず typo-* クラスを使う（text-sm font-bold 等の個別指定は禁止）
+   2. typo-* と text-* / font-* / leading-* / tracking-* を混在させない
+   3. カラーは別途指定: className="typo-body-sm text-[var(--Text-Low-Emphasis)]"
+   4. レスポンシブ対応可: md:typo-heading-xl
+   5. CVA 内でも typo-* を使用する
+   ============================================================= */
+
+/* ─── Heading（見出し） ─── */
+
+@utility typo-heading-3xl {
+  font-size: 28px;
+  line-height: 1.5;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+@utility typo-heading-2xl {
+  font-size: 24px;
+  line-height: 1.5;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+@utility typo-heading-xl {
+  font-size: 21px;
+  line-height: 1.5;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+@utility typo-heading-lg {
+  font-size: 18px;
+  line-height: 1.5;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+@utility typo-heading-md {
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+@utility typo-heading-sm {
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+/* ─── Body（本文） ─── */
+
+@utility typo-body-lg {
+  font-size: 16px;
+  line-height: 1.75;
+  font-weight: 400;
+}
+
+@utility typo-body-md {
+  font-size: 14px;
+  line-height: 1.75;
+  font-weight: 400;
+}
+
+@utility typo-body-sm {
+  font-size: 12px;
+  line-height: 1.5;
+  font-weight: 400;
+}
+
+/* body-xs(10px) は本文禁止 — 補助ラベル/メタ情報専用。
+   本文の最小は typo-body-sm(12px)。10px を本文に使うとモバイル可読性の
+   下限（iOS HIG ~11pt / WCAG 観点）を割る。 */
+@utility typo-body-xs {
+  font-size: 10px;
+  line-height: 1.5;
+  font-weight: 400;
+}
+
+/* ─── Label（ボタン・ナビ・タグ） ─── */
+
+@utility typo-label-lg {
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+@utility typo-label-md {
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+@utility typo-label-sm {
+  font-size: 12px;
+  line-height: 1.5;
+  font-weight: 500;
+}
+
+@utility typo-label-xs {
+  font-size: 10px;
+  line-height: 1.5;
+  font-weight: 500;
+}
+
+/* ─── Display（ヒーロー・ランディング用） ─── */
+
+@utility typo-display-xl {
+  font-size: 48px;
+  line-height: 1.25;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+@utility typo-display-lg {
+  font-size: 36px;
+  line-height: 1.3;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+/* ─── Caption（注釈・法律表記） ───
+   caption(11px) は非必須の注釈・法的表記のみ。本文には使わない（本文下限は body-sm=12px）。 */
+
+@utility typo-caption {
+  font-size: 11px;
+  line-height: 1.5;
+  font-weight: 400;
+}

package/src/themes/README.md

@@ -0,0 +1,44 @@
+# KSK Design System — テーマガイド
+
+## 概要
+
+KSK DS のテーマシステムは **Primitive Layer の Brand 色を差し替えるだけ** で、
+全 Semantic トークン → 全コンポーネントの見た目が自動的に切り替わる設計です。
+
+## プリセットテーマ
+
+| テーマ | ファイル | Brand-500 | 想定業種 |
+|--------|---------|-----------|---------|
+| Default (Blue) | `default.css` | `#3B82F6` | 汎用・SaaS・BtoB |
+| Orange | `orange.css` | `#E04B00` | EC・フード・エンタメ |
+| Blue | `blue.css` | `#3B82F6` | リクルート・HR・建設 |
+| Green | `green.css` | `#16A34A` | ヘルスケア・サステナ・金融 |
+| Violet | `violet.css` | `#7C3AED` | プレミアム・クリエイティブ・教育 |
+
+## 新しいクライアントテーマの作り方
+
+1. `default.css` をコピーして `{client-name}.css` を作成
+2. `--Primitive-Brand-*` の 50〜900 をクライアントのブランドカラーに置換
+3. プロジェクトの CSS で `@import` する
+
+```css
+/* クライアントプロジェクト側 */
+@import "ksk-design-system/preset";
+@import "./themes/my-client.css";
+```
+
+## テーマ切替の仕組み
+
+```
+Brand色を差し替え
+  ↓
+Primitive Layer（primitive.css の Brand-50〜900）
+  ↓ 参照
+Semantic Layer（semantic.css の Brand-Primary, Hover-*, Active-* 等）
+  ↓ 参照
+Bridge Layer（preset.css の --primary, --ring 等 shadcn 互換）
+  ↓ 参照
+全コンポーネント（Button, Input, Card 等）
+```
+
+**変更は Brand 色の 10 行だけ。** 残り全てが CSS 変数の連鎖で自動反映されます。

package/src/themes/blue.css

@@ -0,0 +1,21 @@
+/* =============================================================
+   KSK Design System — Blue Theme
+
+   BtoB・SaaS・リクルート系向けの信頼感テーマ。
+
+   使い方:
+   @import "ksk-design-system/themes/blue";
+   ============================================================= */
+
+@theme {
+  --Primitive-Brand-50:  #EFF6FF;
+  --Primitive-Brand-100: #DBEAFE;
+  --Primitive-Brand-200: #BFDBFE;
+  --Primitive-Brand-300: #93C5FD;
+  --Primitive-Brand-400: #60A5FA;
+  --Primitive-Brand-500: #3B82F6;
+  --Primitive-Brand-600: #2563EB;
+  --Primitive-Brand-700: #1D4ED8;
+  --Primitive-Brand-800: #1E40AF;
+  --Primitive-Brand-900: #1E3A8A;
+}

package/src/themes/default.css

@@ -0,0 +1,12 @@
+/* =============================================================
+   KSK Design System — Default Theme (Blue)
+
+   デフォルトのニュートラルブルーテーマ。
+   このファイルをコピーして新しいクライアントテーマを作成できる。
+
+   使い方:
+   @import "ksk-design-system/themes/default";
+   ============================================================= */
+
+/* デフォルトは primitive.css の初期値をそのまま使用するため空 */
+/* Brand 色は Primitive-Brand-500: #3B82F6 (Blue) */

package/src/themes/green.css

@@ -0,0 +1,22 @@
+/* =============================================================
+   KSK Design System — Green Theme
+
+   ヘルスケア・サステナ・金融系クライアント向け。
+   安心感・成長を表現するグリーンテーマ。
+
+   使い方:
+   @import "ksk-design-system/themes/green";
+   ============================================================= */
+
+@theme {
+  --Primitive-Brand-50:  #F0FDF4;
+  --Primitive-Brand-100: #DCFCE7;
+  --Primitive-Brand-200: #BBF7D0;
+  --Primitive-Brand-300: #86EFAC;
+  --Primitive-Brand-400: #4ADE80;
+  --Primitive-Brand-500: #16A34A;
+  --Primitive-Brand-600: #15803D;
+  --Primitive-Brand-700: #166534;
+  --Primitive-Brand-800: #14532D;
+  --Primitive-Brand-900: #052E16;
+}

package/src/themes/orange.css

@@ -0,0 +1,21 @@
+/* =============================================================
+   KSK Design System — Orange Theme
+
+   EC・フード・エンタメ系向けのウォームテーマ。
+
+   使い方:
+   @import "ksk-design-system/themes/orange";
+   ============================================================= */
+
+@theme {
+  --Primitive-Brand-50:  #FFF7ED;
+  --Primitive-Brand-100: #FFEDD5;
+  --Primitive-Brand-200: #FED7AA;
+  --Primitive-Brand-300: #FDBA74;
+  --Primitive-Brand-400: #FB923C;
+  --Primitive-Brand-500: #F97316;
+  --Primitive-Brand-600: #C2410C;
+  --Primitive-Brand-700: #9A3412;
+  --Primitive-Brand-800: #7C2D12;
+  --Primitive-Brand-900: #431407;
+}

package/src/themes/violet.css

@@ -0,0 +1,22 @@
+/* =============================================================
+   KSK Design System — Violet Theme
+
+   プレミアム・クリエイティブ・教育系クライアント向け。
+   洗練された印象のバイオレットテーマ。
+
+   使い方:
+   @import "ksk-design-system/themes/violet";
+   ============================================================= */
+
+@theme {
+  --Primitive-Brand-50:  #F5F3FF;
+  --Primitive-Brand-100: #EDE9FE;
+  --Primitive-Brand-200: #DDD6FE;
+  --Primitive-Brand-300: #C4B5FD;
+  --Primitive-Brand-400: #A78BFA;
+  --Primitive-Brand-500: #7C3AED;
+  --Primitive-Brand-600: #6D28D9;
+  --Primitive-Brand-700: #5B21B6;
+  --Primitive-Brand-800: #4C1D95;
+  --Primitive-Brand-900: #3B0764;
+}

package/templates/AGENTS.md

@@ -0,0 +1,77 @@
+<!--
+  このファイルは ksk-design-system の postinstall で自動設置されました。
+  最新ルールを取り込むには: npx ksk-ds init --force
+-->
+
+# このプロジェクトは ksk-design-system に準拠する
+
+Codex（および他の AI エージェント）は UI 作業を始める前に、以下のファイルを**必ず**読み込むこと。
+
+## 必読ファイル（node_modules 配下）
+
+| ファイル | 内容 |
+|---------|------|
+| `node_modules/ksk-design-system/AGENTS.md` | DS 全体のルール・禁止パターン |
+| `node_modules/ksk-design-system/contracts/components.json` | 全コンポーネントの定義・バリアント |
+| `node_modules/ksk-design-system/contracts/rules.json` | 禁止パターン31件・AIアンチパターン9件 |
+| `node_modules/ksk-design-system/tokens.json` | カラー・余白・角丸・影・タイポ |
+| `node_modules/ksk-design-system/src/components/COMPONENT_LOOKUP.md` | 全コンポーネントのバリアント・インポートパス一覧 |
+
+> DS 側のルール更新は `npm update ksk-design-system` で自動反映されます。このファイルは書き換え不要。
+
+## 書く前に必ず確認するパターン
+
+| 書こうとしているもの | 代わりに使うもの |
+|-------------------|----------------|
+| カスタムカラー（`#xxxxxx` / `rgba(...)` ハードコード） | `var(--Brand-Primary)`, `var(--Surface-*)` 等のセマンティックトークン |
+| カスタム余白（`margin: 17px` 等の非トークン値） | Tailwind の標準スペーシング（`p-4`, `gap-2` 等） |
+| カスタム角丸（`rounded-md`, `rounded-xl` 等） | `rounded-none/sm/lg/2xl/full` のみ使用可 |
+| カスタム影（`shadow-md` 以上） | `shadow-[var(--shadow-md)]`, `shadow-[var(--shadow-dialog)]` |
+| `font-bold` / `font-semibold` 等の個別指定 | `typo-*` クラス（`typo-heading-md`, `typo-label-sm` 等） |
+| `<button>` / `<input>` / `<a href>` 生タグ | `<Button>`, `<Input>`, `<Button variant="link">` |
+| `text-white` / `bg-white` / Tailwind標準色 | `text-[var(--Text-on-Inverse)]`, `bg-[var(--Surface-Primary)]` |
+| グラデーション（`bg-gradient-to-*`） | 単色背景 `bg-[var(--Surface-*)]` |
+| カラーバー（`border-t-4` 等の太ボーダー） | 全周ボーダー `border border-[var(--Border-Low-Emphasis)]` |
+
+DS に該当パターンが無い場合のみカスタム実装を許可。その場合は**必ずコメントで理由を記載**すること。
+
+## 新規コンポーネントを作る前に必ず確認する
+
+**`node_modules/ksk-design-system/src/components/COMPONENT_LOOKUP.md` を読んでから実装・提案すること。**
+以下は「DSにない」と誤解されやすいが既に存在するもの:
+
+| やりたいこと | 正しい使い方 |
+|---|---|
+| アイコンだけのボタン | `<Button size="icon">` / `"icon-sm"` / `"icon-lg"` |
+| リンク見た目のボタン | `<Button variant="link">` |
+| チェックボックス | `<Checkbox>` |
+| ラジオボタン | `<RadioGroup><RadioGroupItem>` |
+| Badge の色違い | `<Badge variant="success">` / `"caution"` / `"warning"` / `"info"` |
+| 空状態の表示 | `<EmptyState>` |
+| 数値カード | `<StatCard>` |
+| トースト通知 | `<Toaster>` + `useToast()` |
+| スケルトン | `<Skeleton>` |
+| 下部ナビゲーション | `<BottomTabBar>` |
+| プログレスバー | `<Progress>` |
+| フォームフィールド | `<FormField>` |
+| ケバブメニュー | `<KebabMenu>` |
+| モーダル（PC） | `<Dialog>` |
+| ドロワー（モバイル） | `<Sheet side="bottom">` |
+| PC/モバイル自動切替モーダル | `<ResponsiveDialog>` |
+
+## 使用方法
+
+### CSS のセットアップ
+
+```css
+/* globals.css / app.css など */
+@import "ksk-design-system/preset";          /* DS のトークン・スタイル */
+@import "ksk-design-system/themes/default";  /* または orange / green / violet */
+@import "tailwindcss";
+```
+
+### コンポーネントの使用
+
+```tsx
+import { Button, Card, Input, FormField } from "ksk-design-system"
+```