npm - @squadbase/vantage-template - Versions diffs - 0.1.1-dev1.ba90f54 → 0.1.1-dev1.ce5d265 - Mend

@squadbase/vantage-template 0.1.1-dev1.ba90f54 → 0.1.1-dev1.ce5d265

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/README.md +11 -1
package/base-template/.squadbase/skills/vantage-design/SKILL.md +27 -25
package/base-template/.squadbase/skills/vantage-design/references/extract.md +16 -14
package/base-template/.squadbase/skills/vantage-design/references/format.md +6 -5
package/base-template/.squadbase/skills/vantage-design/references/presets.md +60 -110
package/base-template/DESIGN.md +7 -6
package/base-template/bun.lock +4 -4
package/base-template/package.json +2 -2
package/base-template/src/styles.css +105 -20
package/dist/index.js +956 -0
package/package.json +6 -3

package/README.md CHANGED Viewed

@@ -52,11 +52,21 @@ npx @squadbase/vantage-template add funnel --force      # Overwrite existing fil
 `add` replaces the entry page, so it warns before overwriting it, and it lists leftover files from a previously applied template (it never deletes them — you may have edited them). A project with pages on *both* sides — `src/` present but `index.tsx` / `_layout.tsx` / `styles.css` still at the root — is refused with the list of files to move into `src/` first: Vantage ignores the root ones, so `vantage check` already fails there with `SRC_DIR_SPLIT`.
+#### `theme <theme-id>`
+Apply a SquadKit theme (`neutral`, `ocean`, `forest`, `sunset`, `violet`, `rose`, `mono`; the old `default` / `calm` / `vivid` / `mono` are accepted too). Rewrites a marked range of the project's `styles.css` with the theme's colors, radius and font for both light and dark mode, leaving everything else intact. Re-running with the same theme changes nothing. Overrides you write *after* the range win over the theme.
+```bash
+npx @squadbase/vantage-template theme ocean
+npx @squadbase/vantage-template theme forest --dry-run
+npx @squadbase/vantage-template theme sunset --reset-chart   # drop a `chart` preset so the theme's chart colors apply
+```
 #### `chart <preset-name>`
 Switch the chart color preset. Rewrites a marked block of `--chart-1`–`--chart-5` inside the project's `styles.css` (under `src/` when that layout is in use), leaving any other overrides in that file intact. Re-running replaces the block rather than stacking.
-A new project starts on the `blue` preset — the base template ships that block already written, so `init` and the gallery previews show the same colors. This command swaps it for another preset.
+A new project starts on the `neutral` theme and has no chart range; this command (or `init --chart`) adds one, which takes precedence over the theme's chart colors. `theme <id> --reset-chart` removes it again.
 ```bash
 npx @squadbase/vantage-template chart ocean

package/base-template/.squadbase/skills/vantage-design/SKILL.md CHANGED Viewed

@@ -1,6 +1,6 @@
 ---
 name: vantage-design
-description: Vantage(@squadbase/vantage)アプリの見た目の意図 `DESIGN.md` と、実際の値を持つ `styles.css` をまとめて作る / 更新する手順。配色・ブランドカラー・テーマ・チャートの色・フォント・角丸・トーンを変えたいとき、既存サイトやロゴ・資料・外部の DESIGN.md に合わせたいとき、プロジェクト作成時の初期デザイン(プリセット default / calm / vivid / mono)を決めるときに使う。「色を変えて」「ブランドに合わせて」「このサイトに合わせて」「落ち着いた感じに」「フォントを変えて」「テーマを作って」「DESIGN.md を作って」、"change the colors", "match our brand", "match this website", "theme", "color palette", "font", "design system", "DESIGN.md" で起動。
+description: Vantage(@squadbase/vantage)アプリの見た目の意図 `DESIGN.md` と、実際の値を持つ `styles.css` をまとめて作る / 更新する手順。配色・ブランドカラー・テーマ・チャートの色・フォント・角丸・トーンを変えたいとき、既存サイトやロゴ・資料・外部の DESIGN.md に合わせたいとき、プロジェクト作成時の初期デザイン(テーマ neutral / ocean / forest / sunset / violet / rose / mono)を決めるときに使う。「色を変えて」「ブランドに合わせて」「このサイトに合わせて」「落ち着いた感じに」「フォントを変えて」「テーマを作って」「DESIGN.md を作って」、"change the colors", "match our brand", "match this website", "theme", "color palette", "font", "design system", "DESIGN.md" で起動。
 ---
 # DESIGN.md と styles.css をまとめて更新する
@@ -23,7 +23,7 @@ Vantage アプリの見た目は 2 つのファイルで決まる。
 | --- | --- |
 | `references/format.md` | `DESIGN.md` を書く / 直すとき(書式・節の順番・雛形) |
 | `references/extract.md` | URL・画像・pptx/pdf・言葉・外部 DESIGN.md から色と書体を取り出すとき |
-| `references/presets.md` | プロジェクト作成時の初期デザイン(`default` / `calm` / `vivid` / `mono`) |
+| `references/presets.md` | テーマ(`neutral` / `ocean` / `forest` / `sunset` / `violet` / `rose` / `mono`)の選び方と `theme` コマンド。旧プリセット id の読み替え |
 | `scripts/contrast.mjs` | 文字色と背景色のコントラスト比を確かめるとき |
 ## 手順
@@ -43,29 +43,32 @@ Vantage アプリの見た目は 2 つのファイルで決まる。
   各行に「何に合わせてその色にしたか」を 1 語添える。
 - **トーンの説明**(2〜3 行。`DESIGN.md` の「全体のトーン」にそのまま入る文)。
-プリセットで足りる場合はプリセット名(`references/presets.md`)で提案してよい。
+テーマで足りる場合はテーマ id(`references/presets.md`)で提案してよい。旧プリセット id(`default` / `calm` / `vivid` / `mono`)で頼まれたら新 id に読み替える。
 ### 3. styles.css と DESIGN.md を同じステップで書く
 `styles.css`:
-- **マーカーブロックの中は手で編集しない。**
-  ``/* vantage-template:chart-preset — regenerated by `chart`; edits here are lost */`` 〜
-  `/* vantage-template:chart-preset:end */` の間はコマンドが丸ごと書き換える生成物で、手で直した
-  値は次の適用で消える。
-- チャートの 5 色は必ずコマンドで選ぶ: `npx @squadbase/vantage-template chart <preset>`
-  (`blue` / `ocean` / `sunset` / `forest` / `berry` / `mono`。プロジェクトルートで実行。
-  `--dry-run` で書き込まずに結果を見られる)。マーカーの中だけが置き換わり、他の記述は残る。
-- プリセットに無いチャート色(ブランド色を `--chart-1` にしたいなど)は、マーカーブロックの**後ろ**に
+- **テーマ範囲・チャート範囲のマーカーの中は手で編集しない。** 色・角丸・書体の出発点は 7 テーマ
+  (`neutral` / `ocean` / `forest` / `sunset` / `violet` / `rose` / `mono`)から選び、コマンドで当てる:
+  `npx @squadbase/vantage-template theme <id>`(プロジェクトルートで実行。`--dry-run` で書き込まずに
+  結果を見られる)。``/* squadkit-theme — regenerated by `theme`; edits here are lost */`` 〜
+  `/* squadkit-theme:end */` の間はコマンドが丸ごと書き換える生成物で、手で直した値は次の適用で消える。
+  旧プリセット id(`default` → `neutral` / `calm` → `ocean` / `vivid` → `sunset` / `mono`)もコマンドが受ける。
+- チャートの 5 色はテーマが持つ。テーマと別の配色にしたいときだけ
+  `npx @squadbase/vantage-template chart <preset>`(`blue` / `ocean` / `sunset` / `forest` / `berry` / `mono`)を使う。
+  ``/* vantage-template:chart-preset … */`` 〜 `/* vantage-template:chart-preset:end */` の間が置き換わり、
+  テーマのチャート色より優先される。テーマに揃え直すには `theme <id> --reset-chart`。
+- プリセットに無いチャート色(ブランド色を `--chart-1` にしたいなど)は、**マーカーブロックの後ろ**に
   別の `:root { --chart-1: …; }` と `.dark, [data-theme="dark"] { --chart-1: …; }` を足して上書きする
-  (後に書いた方が勝つ)。上書きするのは変えたい番号だけにし、残りはプリセットに任せる。
-- `--primary` / `--primary-foreground` / `--radius` などチャート以外のトークンは、マーカーの**外**
-  (ファイル先頭の `:root` ブロック)に書く。色は `:root` と `.dark, [data-theme="dark"]` の
-  **両方**に書く。片方だけだとダークモードで既定に戻る。値は `oklch()` か Tailwind のパレット変数
-  (`var(--color-sky-600)`)で書く。
-- 書体は既定でシステムフォント。**ページの書体を決めるのは `body` セレクタの `font-family`**
-  (フレームワークの `theme.css` が `body` にシステムフォントを直接指定しているため、`:root` や
-  `html` に `font-family` を書いても本文には効かない)。スライドの書体は `:root` の
+  (後に書いた方が勝つ)。上書きするのは変えたい番号だけにし、残りはテーマに任せる。
+- `--primary` / `--primary-foreground` / `--radius` などテーマに無い値・ブランド色の上書きも、
+  **マーカーブロックの後ろ**(ファイル末尾)に書く。マーカーより前に書いた値はテーマに負ける。
+  色は `:root` と `.dark, [data-theme="dark"]` の**両方**に書く。片方だけだとダークモードでテーマの値に
+  戻る。値は `oklch()` か Tailwind のパレット変数(`var(--color-sky-600)`)で書く。
+- 書体は既定でシステムフォント。**ページの書体は `--font-sans`**(`styles.css` の `body` が
+  `font-family: var(--font-sans)` で参照する。テーマ範囲も `--font-sans` を持つので、書体を変えるには
+  マーカーブロックの後ろで `:root { --font-sans: …; }` を上書きする)。スライドの書体は `:root` の
   `--slide-font-display`(見出し)/ `--slide-font-body`(本文)で決まる。Web フォントを使うときの
   レシピ:
   1. Google Fonts の CSS
@@ -73,13 +76,11 @@ Vantage アプリの見た目は 2 つのファイルで決まる。
      から使う subset の `@font-face` ブロックだけを `styles.css` の先頭に貼る。
      **`@import url(...)` は使わない** ― `styles.css` はテーマの後ろに連結されるので
      「@import rules must precede all rules」の警告とともにビルドで捨てられる。
-  2. マーカーの外に次を書く(フォールバックは `theme.css` の既定と同じ並び):
+  2. マーカーブロックの後ろに次を書く(フォールバックは `theme.css` の既定と同じ並び):
      ```css
-     body {
-       font-family: "<Font>", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, ui-sans-serif, system-ui, sans-serif;
-     }
      :root {
+       --font-sans: "<Font>", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, ui-sans-serif, system-ui, sans-serif;
        --slide-font-display: "<Font>", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, sans-serif;
        --slide-font-body: var(--slide-font-display);
      }
@@ -90,8 +91,9 @@ Vantage アプリの見た目は 2 つのファイルで決まる。
   `ui-sans-serif` / `system-ui` は日本語の face より**後ろ**に置く。日本語の Windows ではどちらも
   Yu Gothic UI(UI のリサイズを避けるために字幅を詰めた書体)に解決され、カナがここで決まって
   半角風に見える。macOS の Chrome は `-apple-system` を解釈しないので `BlinkMacSystemFont` も並べる。
-  既存アプリの `styles.css` に `ui-sans-serif, system-ui, …` が先頭にある、または `"Yu Gothic UI"` が
-  残っているときは、`body` の `font-family` を上の並びに直す(ほかの行は書き換えない)。
+  既存アプリの `styles.css` の `body` に `font-family` が直書きされている(`var(--font-sans)` ではない)、
+  または `ui-sans-serif, system-ui, …` が先頭にある、`"Yu Gothic UI"` が残っているときは、
+  `body { font-family: var(--font-sans); }` に直し、書体は `--font-sans` に上の並びで書く。
   日本語の Web フォントは face が 100 を超えるので原則使わない(pptx 書き出しも壊れる。
   `vantage-slide` の `references/tokens.md` 参照)。

package/base-template/.squadbase/skills/vantage-design/references/extract.md CHANGED Viewed

@@ -7,12 +7,13 @@
 3. **書体**(見出しと本文の `font-family`。システムフォントで足りるか)
 4. **トーン**(2〜3 語: 「落ち着いた」「明るい」「堅い」…)
-チャートの 5 色は、主色から直接作るより**主色に最も近いチャートプリセット**を選び、
-`npx @squadbase/vantage-template chart <preset>` で適用する方が安全(5 色の明度差・色覚多様性への
-配慮が済んでいる)。`styles.css` の `vantage-template:chart-preset` マーカーブロックの中は
+チャートの 5 色は、主色から直接作るより**主色に最も近いテーマ**を選び、
+`npx @squadbase/vantage-template theme <id>` で適用する方が安全(5 色の明度差・色覚多様性への
+配慮が済んでいる)。テーマと別のチャート配色が要るときは `chart <preset>`。`styles.css` の
+`squadkit-theme` / `vantage-template:chart-preset` のマーカーブロックの中は
 **手で編集しない**(次の適用で消える)。主色を `--chart-1` に入れたいときだけ、マーカーブロックの
 **後ろ**に `:root` と `.dark, [data-theme="dark"]` の `--chart-1` 上書きを足し、残り 4 色は
-プリセットに任せる。`--primary` や `--radius` もマーカーの外に書く。
+プリセットに任せる。`--primary` や `--radius` はマーカーブロックの後ろに書く。
 ## URL(既存サイトに合わせる)
@@ -36,7 +37,7 @@ grep -oE 'font-family:[^;]+' /tmp/site.css | sort | uniq -c | sort -rn | head
 3. **ボタン・リンクの色**: `a {` `.btn` `button` `[class*=primary]` のセレクタの `color` /
    `background-color`。出現回数の多い有彩色が主色。
 4. **背景**: `body` / `html` の `background`。暗ければ「暗い基調」。
-5. **書体**: `body` の `font-family`。Google Fonts の `<link>` があればその family 名。
+5. **書体**: `body` の `font-family`(書き込み先は `--font-sans`)。Google Fonts の `<link>` があればその family 名。
 注意:
@@ -66,18 +67,19 @@ grep -oE 'font-family:[^;]+' /tmp/site.css | sort | uniq -c | sort -rn | head
 ## 言葉だけ(「落ち着いた感じに」)
-形容詞を `presets.md` の 4 つに寄せ、そのうえで主色だけを調整する。
+形容詞を `presets.md` の 7 テーマに寄せ、そのうえで主色だけを調整する。
 | 言われたこと | 出発点 |
 | --- | --- |
-| 落ち着いた・信頼感・堅い・経営向け・青系 | `calm` |
-| 明るい・元気・勢い・暖かい・営業向け | `vivid` |
+| 落ち着いた・信頼感・堅い・経営向け・青系 | `ocean` |
+| 明るい・元気・勢い・暖かい・営業向け | `sunset` |
 | シンプル・モノクロ・印刷する・資料に貼る | `mono` |
-| 特に無し・標準・おまかせ | `default` |
-| 自然・環境・緑 | `default` の構成でチャートを `forest` に |
-| 華やか・ポップ・紫やピンク | `default` の構成でチャートを `berry` に |
+| 特に無し・標準・おまかせ | `neutral` |
+| 自然・環境・緑 | `forest` |
+| 華やか・ポップ・紫 | `violet` |
+| 華やか・ポップ・ピンク | `rose` |
-当てはまらない言葉は、2 案(例: `calm` と `default`)を並べて選んでもらう。
+当てはまらない言葉は、2 案(例: `ocean` と `neutral`)を並べて選んでもらう。
 ## 外部の DESIGN.md(Stitch などが書いたもの)
@@ -99,8 +101,8 @@ Vantage の `DESIGN.md` は値を持たないので、**値を `styles.css` へ
    | error | `--destructive` |
    | success / warning | 専用トークンなし → `--chart-*` のどれかに割り当てて `DESIGN.md` に書く |
    | radius / corner | `--radius` |
-   | display / headline font | `--slide-font-display`(+ ページの見出しなら `body` の font-family) |
-   | body font | `body` セレクタの font-family と `--slide-font-body`(`:root` の font-family は効かない) |
+   | display / headline font | `--slide-font-display`(+ ページの見出しなら `--font-sans`) |
+   | body font | `--font-sans`(ページ本文)と `--slide-font-body` |
 3. `styles.css` のマーカーブロックの外に、`:root` と `.dark, [data-theme="dark"]` の両方で書く
    (チャート色・書体の書き方は SKILL.md の手順 3)。外部の DESIGN.md に

package/base-template/.squadbase/skills/vantage-design/references/format.md CHANGED Viewed

@@ -50,8 +50,8 @@ Components → 「成果物の種類ごとの規則」/ Do's and Don'ts。値は
 - `--muted` `--accent` `--secondary` `--border` は背景・境界用。文字色の役割に割り当てない。
 - 良い / 注意の専用トークンは無い。`--chart-*` の中から割り当てるか、「専用トークンなし」と書く。
-- ページ本文の書体はトークンではなく `body` の `font-family`(`styles.css` の `body` セレクタで上書きする。
-  `:root` / `html` に書いても `theme.css` の `body` 指定に負けて効かない)。
+- ページ本文の書体は `--font-sans`(`styles.css` の `body` が `font-family: var(--font-sans)` で参照する。
+  テーマを当てると `--font-sans` もテーマの値になる。変えるときはテーマ範囲のマーカーの後ろで上書きする)。
 - `--slide-bg` などは既定で `--background` などの別名。`.dark` に書き直す必要は無い。
 ## 雛形(中立の既定テーマ)
@@ -112,14 +112,15 @@ DESIGN.md — このアプリの「見た目の意図」を書くファイルで
 - 系列は 5 つまで。それ以上はグループ化するか「その他」にまとめる。
 - 禁止: 同じチャートで `--destructive` を普通の系列色として使う(悪い値に見える)。
 - 禁止: 隣り合う系列に `--chart-3` と `--chart-4` を並べて細い線で描く(見分けにくい)。
-- 配色を丸ごと変えるときは `npx @squadbase/vantage-template chart <preset>` を使う
-  (`blue` / `ocean` / `sunset` / `forest` / `berry` / `mono`)。
+- 配色を丸ごと変えるときは `npx @squadbase/vantage-template theme <id>` を使う
+  (`neutral` / `ocean` / `forest` / `sunset` / `violet` / `rose` / `mono`)。チャートだけ別の配色にするときは
+  `chart <preset>`(`blue` / `ocean` / `sunset` / `forest` / `berry` / `mono`)。
 ## 書体 (Typography)
 | 用途 | 指定 | 備考 |
 | --- | --- | --- |
-| 見出し・本文 | 日本語を含むシステムフォント(`body` の `font-family`) | Web フォントは使わない |
+| 見出し・本文 | 日本語を含むシステムフォント(`--font-sans`) | Web フォントは使わない |
 | 数字 | 同上 + `tabular-nums` | 桁がそろうように必ず付ける |
 | スライドの見出し | `--slide-font-display` | 既定は日本語を含むシステムフォント |
 | スライドの本文 | `--slide-font-body` | 既定は見出しと同じ |

package/base-template/.squadbase/skills/vantage-design/references/presets.md CHANGED Viewed

@@ -1,110 +1,60 @@
-# 初期デザインのプリセット
-プロジェクト作成時に選ぶ 4 つの出発点。**id(`default` / `calm` / `vivid` / `mono`)はプロジェクト
-作成のワークフローが参照するので変えないこと。** どれも「チャートのプリセット 1 つ + `--primary` +
-`DESIGN.md` の差分」でできている。**`--primary` はどのプリセットでも必ず書く**(無彩色のプリセットも
-値を明示する)。チャートだけ変えるとホームのような色の少ない画面では見た目が変わらず、別のプリセットから
-切り替えたときに前の `--primary` が残るため。
-適用の手順は共通:
-1. `npx @squadbase/vantage-template chart <チャートのプリセット>` で `styles.css` のマーカーブロックを
-   差し替える。**マーカーブロックの中(`--chart-1..5`)は手で編集しない** ― コマンドの生成物で、
-   次の適用で消える。
-2. 各プリセットの `--primary` / `--primary-foreground` を、`styles.css` のマーカーの**外**(先頭の
-   `:root` ブロック)に `:root` と `.dark, [data-theme="dark"]` の両方で書く。既にある `--primary` は置き換える。
-3. `DESIGN.md` を `format.md` の雛形から作り、下の「DESIGN.md の差分」の行だけを書き換える。
-4. `scripts/contrast.mjs` で `--primary-foreground` / `--primary` をライトとダークで確かめる。
-| id | トーン | チャートのプリセット | `--primary` |
-| --- | --- | --- | --- |
-| `default` | 無彩色のベース。色を持つのはデータ(`blue` チャート)だけ | `blue` | 無彩色(`theme.css` の既定値を明示) |
-| `calm` | 落ち着いた寒色。報告書・経営向け | `ocean` | 深い青(スカイ 700 / 300) |
-| `vivid` | 明るい暖色。営業・マーケティング向け | `sunset` | 濃いオレンジ(オレンジ 700 / 400) |
-| `mono` | モノクロ。印刷・資料への貼り付け向け | `mono` | ジンク 900 / 200 |
-## `default`
-- トーン: 落ち着いた無彩色のベースに、データだけが色を持つ業務ダッシュボード。装飾より読みやすさ。
-- チャート: `blue`(青 → ティール → フクシア → バイオレット → グレー)。
-- `--primary`(フレームワークの既定と同じ無彩色。他のプリセットから戻すときのために明示する):
-  ```css
-  :root {
-    --primary: oklch(0.205 0 0);
-    --primary-foreground: oklch(0.985 0 0);
-  }
-  .dark,
-  [data-theme="dark"] {
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-  }
-  ```
-- `DESIGN.md`: 雛形そのまま(`format.md` の雛形は `default` を説明している)。
-## `calm`
-- トーン: 寒色でまとめた静かな画面。強調は控えめにし、数字と罫線で読ませる。
-- チャート: `ocean`(スカイ → シアン → インディゴ → ティール → スレート)。
-- `--primary`(チャートのスカイに揃えた深い青):
-  ```css
-  :root {
-    --primary: var(--color-sky-700);
-    --primary-foreground: oklch(0.985 0 0);
-  }
-  .dark,
-  [data-theme="dark"] {
-    --primary: var(--color-sky-300);
-    --primary-foreground: oklch(0.205 0 0);
-  }
-  ```
-- `DESIGN.md` の差分: 「全体のトーン」を上の文に。チャートの色味を「スカイ → シアン → インディゴ →
-  ティール → スレート」に。良い = `--chart-4`(ティール)。1 系列の強調は `--chart-1` + 残り `--chart-5`。
-  禁止: `--chart-1` と `--chart-2` を隣り合う細い線で並べる(どちらも明るい青系)。
-## `vivid`
-- トーン: 明るく勢いのある暖色。KPI とトレンドを大きく見せ、強調色をはっきり使う。
-- チャート: `sunset`(オレンジ → アンバー → ローズ → イエロー → ストーン)。
-- `--primary`(オレンジ 600 は白文字で 4.5:1 に届かないので 700 を使う):
-  ```css
-  :root {
-    --primary: var(--color-orange-700);
-    --primary-foreground: oklch(0.985 0 0);
-  }
-  .dark,
-  [data-theme="dark"] {
-    --primary: var(--color-orange-400);
-    --primary-foreground: oklch(0.205 0 0);
-  }
-  ```
-- `DESIGN.md` の差分: トーンを上の文に。主色の行を「濃いオレンジ」に。良い = 専用色なし(▲ と
-  `--foreground`)、悪い = `--destructive`。禁止: `--chart-3`(ローズ)と `--destructive` を同じ
-  チャートに置く(悪い値と区別できない)。1 系列の強調は `--chart-1` + 残り `--chart-5`。
-## `mono`
-- トーン: 白黒と灰色だけ。色で意味を運ばず、太さ・順番・ラベルで読ませる。
-- チャート: `mono`(ジンク 900 → 200。ダークでは反転)。
-- `--primary`(チャートの両端と同じジンク):
-  ```css
-  :root {
-    --primary: var(--color-zinc-900);
-    --primary-foreground: oklch(0.985 0 0);
-  }
-  .dark,
-  [data-theme="dark"] {
-    --primary: var(--color-zinc-200);
-    --primary-foreground: oklch(0.205 0 0);
-  }
-  ```
-- `DESIGN.md` の差分: トーンを上の文に。強調 = `--chart-1`(最も濃い灰)。良い = 専用色なし(▲ と
-  符号)、悪い = `--destructive`(**画面で唯一の有彩色**として使う)。チャートは系列を 3 つまでにし、
-  それ以上は直接ラベルを付ける。禁止: 隣り合う `--chart-4` と `--chart-5`(明度差が小さい)。
+# 初期デザイン(テーマ)
+プロジェクトの見た目の出発点は、SquadKit の 7 テーマから選ぶ。**テーマ id はプロジェクト作成の
+ワークフローが参照するので変えないこと。** テーマは主色・背景・文字・境界・チャート 5 色・角丸・書体を
+まとめて持つ(ライトとダークの両方)。
+| id | トーン | 向く場面 |
+| --- | --- | --- |
+| `neutral` | 既定。Vantage の素の見た目(青の主色と無彩色の面) | 迷ったとき・おまかせ |
+| `ocean` | 青を基調にした落ち着いた信頼感。角丸はやや小さめ | 報告書・経営向け |
+| `forest` | 緑を基調にした自然な印象。丸ゴシック系の書体、角丸はやや小さめ | 環境・ヘルスケア・自然 |
+| `sunset` | 橙を基調にした温かみ。角丸はやや大きめ | 営業・マーケティング |
+| `violet` | 紫を基調にしたやわらかい印象。角丸は大きめ | 華やかさ・ポップ |
+| `rose` | 赤紫からピンクの落ち着いた色。角丸は大きめ(`--destructive` の赤とは別の色) | 華やかさ・ポップ |
+| `mono` | 無彩色寄り。チャートも彩度を抑え、角丸は最小。等幅フォント | 印刷・資料への貼り付け |
+## 当てる
+プロジェクトルートで次を実行する。`--dry-run` で書き込まずに結果を見られる。
+```bash
+npx @squadbase/vantage-template theme <id>
+npx @squadbase/vantage-template theme ocean --reset-chart   # chart コマンドで選んだ配色を捨て、テーマのチャート色に揃える
+```
+- `styles.css` の ``/* squadkit-theme — regenerated by `theme`; edits here are lost */`` 〜
+  `/* squadkit-theme:end */` の範囲(テーマ範囲)だけを差し替える。**範囲の中は手で編集しない**。
+  マーカーが無いファイルには自動で足される。同じ id を再実行しても変わらない。
+- テーマ範囲はファイル先頭の `:root` より後ろに置かれ、同じ詳細度なら後ろが勝つ。
+  先頭の `:root` に手書きした `--primary` などはテーマに負ける。
+- `chart <preset>` の範囲(`--chart-*` だけ)はテーマ範囲の**後ろ**に置かれ、テーマのチャート色に勝つ。
+  チャートの配色もテーマに任せるなら `--reset-chart` で外す。
+## 旧プリセット id の読み替え
+古い呼び出しの `default` / `calm` / `vivid` / `mono` は、`theme` コマンドがそのまま受けて次の id として扱う。
+| 旧 | 新 |
+| --- | --- |
+| `default` | `neutral` |
+| `calm` | `ocean` |
+| `vivid` | `sunset` |
+| `mono` | `mono` |
+## テーマに無い値(ブランド色など)
+テーマの `--primary` を変えたい、特定の色だけブランドに合わせたい、というときは、テーマを当てたうえで
+**`/* squadkit-theme:end */`(チャート範囲があればその終端)より後ろ**に、変えたいトークンだけ
+`:root` と `.dark, [data-theme="dark"]` の**両方**に書く。前に書くとテーマに負ける。
+`scripts/contrast.mjs` で `--primary-foreground` / `--primary` をライトとダークで確かめる。
+## DESIGN.md
+`format.md` の雛形から作り、選んだテーマに合わせて次の行だけ書き換える。
+- 「全体のトーン」: 上の表のトーンを 2〜3 行に。
+- 主色の行: テーマの主色の色味(「青」「橙」など。**色コードは書かない**)。
+- チャートの色味: テーマの `--chart-1..5` の並び(適用後の `styles.css` を見る)。
+- 良い / 悪い / 注意: 専用トークンは無い。`--chart-*` から割り当てるか「専用トークンなし」と書く。
+  `--destructive` を普通の系列色に使わない。

package/base-template/DESIGN.md CHANGED Viewed

@@ -26,7 +26,7 @@ DESIGN.md — このアプリの「見た目の意図」を書くファイルで
 | 役割 | トークン | 使う場所 |
 | --- | --- | --- |
-| 主色 (Primary) | `--primary` / `--primary-foreground` | 主要ボタン、選択中の状態。既定は無彩色 |
+| 主色 (Primary) | `--primary` / `--primary-foreground` | 主要ボタン、選択中の状態。既定(テーマ `neutral`)は青 |
 | 強調 (Accent) | `--chart-1` | 1 つだけ目立たせたい数値・系列・リンク的な強調 |
 | 良い (Positive) | `--chart-2` | 前期比のプラスなど、良い変化の小さな印 |
 | 悪い (Negative) | `--destructive` | 前期比のマイナス、エラー、削除操作 |
@@ -43,20 +43,21 @@ DESIGN.md — このアプリの「見た目の意図」を書くファイルで
 ## チャート (Charts)
 - 系列の順番は `--chart-1` → `--chart-2` → `--chart-3` → `--chart-4` → `--chart-5`
-  (現在はプリセット `blue`: 青 → ティール → フクシア → バイオレット → グレー)。
-- 1 系列だけを目立たせるときは、その系列を `--chart-1`、残りをすべて `--chart-5`(グレー)にする。
+  (現在はテーマ `neutral`: 青 → 黄緑 → 赤紫 → ティール → 紫)。
+- 1 系列だけを目立たせるときは、その系列を `--chart-1`、残りをすべて `--chart-5` にする。
 - 良い / 悪いを色で塗り分けるときは `--chart-2` / `--destructive`。色だけに頼らず ▲▼ や符号も添える。
 - 系列は 5 つまで。それ以上はグループ化するか「その他」にまとめる。
 - 禁止: 同じチャートで `--destructive` を普通の系列色として使う(悪い値に見える)。
 - 禁止: 隣り合う系列に `--chart-3` と `--chart-4` を並べて細い線で描く(見分けにくい)。
-- 配色を丸ごと変えるときは `npx @squadbase/vantage-template chart <preset>` を使う
-  (`blue` / `ocean` / `sunset` / `forest` / `berry` / `mono`)。
+- 配色を丸ごと変えるときは `npx @squadbase/vantage-template theme <id>` を使う
+  (`neutral` / `ocean` / `forest` / `sunset` / `violet` / `rose` / `mono`)。チャートだけ別の配色にするときは
+  `chart <preset>`(`blue` / `ocean` / `sunset` / `forest` / `berry` / `mono`)。
 ## 書体 (Typography)
 | 用途 | 指定 | 備考 |
 | --- | --- | --- |
-| 見出し・本文 | 日本語を含むシステムフォント(`body` の `font-family`) | Web フォントは使わない |
+| 見出し・本文 | 日本語を含むシステムフォント(`--font-sans`) | Web フォントは使わない |
 | 数字 | 同上 + `tabular-nums` | 桁がそろうように必ず付ける |
 | スライドの見出し | `--slide-font-display` | 既定は日本語を含むシステムフォント |
 | スライドの本文 | `--slide-font-body` | 既定は見出しと同じ |

package/base-template/bun.lock CHANGED Viewed

@@ -6,8 +6,8 @@
       "name": "vibe-app",
       "dependencies": {
         "@squadbase/react": "^0.1.0",
-        "@squadbase/vantage": "0.6.2-dev1.5aae04e",
-        "@squadbase/vantage-sdk": "0.1.1-dev1.eba10e5",
+        "@squadbase/vantage": "0.6.2-dev1.01caa72",
+        "@squadbase/vantage-sdk": "0.1.1-dev1.3bf8f69",
         "date-fns": "^4.1.0",
         "lucide-react": "^0.468.0",
         "react": "^19.3.1",
@@ -196,9 +196,9 @@
     "@squadbase/react": ["@squadbase/react@0.1.0", "", { "dependencies": { "zod": "^4.3.6" }, "peerDependencies": { "@types/react": "17.x || 18.x || 19.x", "react": "17.x || 18.x || 19.x" }, "optionalPeers": ["@types/react"] }, "sha512-k+Dpyj7eH+Yjydw54iEluCjYDae086d12hWgBjNMpw4wLbQGz3CrJ6Yipodg8n1cKUt7zvwddlcTHd79bgKsXg=="],
-    "@squadbase/vantage": ["@squadbase/vantage@0.6.2-dev1.5aae04e", "", { "dependencies": { "@base-ui/react": "^1.6.0", "@hono/node-server": "^2.1.5", "@streamdown/code": "^1.1.1", "@tailwindcss/vite": "^4.3.3", "@tanstack/react-query": "^5.101.2", "@tanstack/react-router": "^1.170.17", "@tanstack/react-table": "^8.21.3", "@vitejs/plugin-react": "^6.1.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", "date-fns": "^4.1.0", "echarts": "^6.0.0", "esbuild": "0.28.1", "fflate": "^0.8.3", "hono": "^4.13.13", "html-to-image": "^1.11.13", "lucide-react": "^0.468.0", "papaparse": "^5.7.0", "picocolors": "^1.1.1", "react-day-picker": "^10.0.1", "read-excel-file": "^9.3.10", "shiki": "3.23.0", "streamdown": "^2.5.0", "tailwind-merge": "3.6.0", "tailwindcss": "^4.3.3", "tw-animate-css": "^1.0.0", "vite": "^8.3.4" }, "peerDependencies": { "react": ">=18.2.0", "react-dom": ">=18.2.0", "typescript": ">=5.0.0" }, "optionalPeers": ["typescript"], "bin": { "vantage": "dist/cli.js" } }, "sha512-F1H2taBaNrOink4a7I3H5xMpd5VqUaod3POFE92crQUsJEz5YLqw2uumvgQcQ0xajMgnnxDDhJIatiNMpDpBiQ=="],
+    "@squadbase/vantage": ["@squadbase/vantage@0.6.2-dev1.01caa72", "", { "dependencies": { "@base-ui/react": "^1.6.0", "@hono/node-server": "^2.1.5", "@streamdown/code": "^1.1.1", "@tailwindcss/vite": "^4.3.3", "@tanstack/react-query": "^5.101.2", "@tanstack/react-router": "^1.170.17", "@tanstack/react-table": "^8.21.3", "@vitejs/plugin-react": "^6.1.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", "date-fns": "^4.1.0", "echarts": "^6.0.0", "esbuild": "0.28.1", "fflate": "^0.8.3", "hono": "^4.13.13", "html-to-image": "^1.11.13", "lucide-react": "^0.468.0", "papaparse": "^5.7.0", "picocolors": "^1.1.1", "react-day-picker": "^10.0.1", "read-excel-file": "^9.3.10", "shiki": "3.23.0", "streamdown": "^2.5.0", "tailwind-merge": "3.6.0", "tailwindcss": "^4.3.3", "tw-animate-css": "^1.0.0", "vite": "^8.3.4" }, "peerDependencies": { "react": ">=18.2.0", "react-dom": ">=18.2.0", "typescript": ">=5.0.0" }, "optionalPeers": ["typescript"], "bin": { "vantage": "dist/cli.js" } }, "sha512-ALCYOzcXjSKzxBomVXsKrJmfNBFS4MtoEJZRqZ4lrcZT0JKX3pd5+idCvBtW60XV2LigvmXfy6Z1/zDbhWIA+Q=="],
-    "@squadbase/vantage-sdk": ["@squadbase/vantage-sdk@0.1.1-dev1.eba10e5", "", {}, "sha512-WaA56dy2c5xD4EP03q/9LXjBX0JcBEqMYOV3yXjg+/KqbgewWdydjbzpBCvuT3VRxiGohuFqOdL3Mit5KavECQ=="],
+    "@squadbase/vantage-sdk": ["@squadbase/vantage-sdk@0.1.1-dev1.3bf8f69", "", {}, "sha512-uCvBiPZH6d/mnZjS1u6g/XN0yuZS7K+/p5pqYK3qXAiHK3tM8jCMKFfHFrmc+G8wSpM7glNW/cawdlsGOCaNBQ=="],
     "@streamdown/code": ["@streamdown/code@1.1.1", "", { "dependencies": { "shiki": "^3.19.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0" } }, "sha512-i7HTNuDgZWb+VdrNVOam9gQhIc5MSSDXKWXgbUrn/4vSRaSMM+Rtl10MQj4wLWPNpF7p80waJsAqFP8HZfb0Jg=="],

package/base-template/package.json CHANGED Viewed

@@ -12,8 +12,8 @@
   },
   "dependencies": {
     "@squadbase/react": "^0.1.0",
-    "@squadbase/vantage": "0.6.2-dev1.5aae04e",
-    "@squadbase/vantage-sdk": "0.1.1-dev1.eba10e5",
+    "@squadbase/vantage": "0.6.2-dev1.01caa72",
+    "@squadbase/vantage-sdk": "0.1.1-dev1.3bf8f69",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.468.0",
     "react": "^19.3.1",

package/base-template/src/styles.css CHANGED Viewed

@@ -17,32 +17,117 @@
   /* --radius: 0.625rem; */
 }
-/* Page typeface. Latin system faces first, then Japanese system faces so kana and
-   kanji do not fall back to a thin locale default. `ui-sans-serif` / `system-ui`
-   come after the Japanese families on purpose: on Japanese Windows they resolve to
-   the condensed Yu Gothic UI, which would otherwise take the kana. Put a Latin
-   webfont in front if you add one, but keep the Japanese families. */
+/* Page typeface. `--font-sans` (Vantage theme.css, overridable by the theme range
+   below or here) already lists Latin system faces and then Japanese ones, so kana
+   and kanji do not fall back to a thin locale default. Change the typeface by
+   overriding `--font-sans`; keep the Japanese families if you put a webfont in
+   front. */
 body {
-  font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans",
-    "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, ui-sans-serif, system-ui, sans-serif;
+  font-family: var(--font-sans);
 }
-/* vantage-template:chart-preset — regenerated by `chart`; edits here are lost */
+/* squadkit-theme — regenerated by `theme`; edits here are lost */
+/* theme: neutral */
 :root {
-  --chart-1: var(--color-blue-600);
-  --chart-2: var(--color-teal-500);
-  --chart-3: var(--color-fuchsia-500);
-  --chart-4: var(--color-violet-500);
-  --chart-5: var(--color-gray-400);
+  --radius: 0.5rem;
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, ui-sans-serif, system-ui, sans-serif;
+  --background: oklch(0.975 0.004 255);
+  --card: oklch(1 0 0);
+  --popover: oklch(1 0 0);
+  --secondary: oklch(0.965 0.005 255);
+  --muted: oklch(0.965 0.005 255);
+  --accent: oklch(0.955 0.01 255);
+  --sidebar: oklch(0.985 0.003 255);
+  --sidebar-accent: oklch(0.955 0.01 255);
+  --border: oklch(0.93 0.006 255);
+  --input: oklch(0.9 0.01 255);
+  --sidebar-border: oklch(0.915 0.008 255);
+  --foreground: oklch(0.21 0.02 260);
+  --card-foreground: oklch(0.21 0.02 260);
+  --popover-foreground: oklch(0.21 0.02 260);
+  --secondary-foreground: oklch(0.25 0.02 260);
+  --muted-foreground: oklch(0.5 0.02 258);
+  --accent-foreground: oklch(0.25 0.02 260);
+  --sidebar-foreground: oklch(0.21 0.02 260);
+  --sidebar-accent-foreground: oklch(0.25 0.02 260);
+  --primary: oklch(0.55 0.2 262);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.7 0.12 262);
+  --sidebar-primary: oklch(0.55 0.2 262);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-ring: oklch(0.7 0.12 262);
+  --chart-1: oklch(0.55 0.2 262);
+  --chart-2: oklch(0.62 0.17 118);
+  --chart-3: oklch(0.5 0.19 352);
+  --chart-4: oklch(0.62 0.1 195);
+  --chart-5: oklch(0.44 0.18 300);
+  --positive: oklch(0.52 0.14 150);
+  --positive-subtle: oklch(0.96 0.04 150);
+  --positive-fill: oklch(0.62 0.15 150);
+  --negative: oklch(0.53 0.19 25);
+  --negative-subtle: oklch(0.96 0.03 25);
+  --negative-fill: oklch(0.62 0.17 25);
+  --warning: oklch(0.53 0.12 70);
+  --warning-subtle: oklch(0.96 0.05 85);
+  --warning-fill: oklch(0.79 0.16 82);
+  --info: oklch(0.52 0.16 255);
+  --info-subtle: oklch(0.96 0.03 250);
+  --info-fill: oklch(0.62 0.15 250);
+  --neutral: oklch(0.52 0 0);
+  --neutral-subtle: oklch(0.96 0 0);
+  --neutral-fill: oklch(0.62 0 0);
+  --destructive: oklch(0.53 0.21 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
 }
 .dark,
 [data-theme="dark"] {
-  --chart-1: var(--color-blue-400);
-  --chart-2: var(--color-teal-400);
-  --chart-3: var(--color-fuchsia-400);
-  --chart-4: var(--color-violet-400);
-  --chart-5: var(--color-gray-500);
+  --background: oklch(0.16 0.012 262);
+  --card: oklch(0.215 0.015 262);
+  --popover: oklch(0.235 0.016 262);
+  --secondary: oklch(0.27 0.016 262);
+  --muted: oklch(0.27 0.016 262);
+  --accent: oklch(0.3 0.02 262);
+  --sidebar: oklch(0.2 0.014 262);
+  --sidebar-accent: oklch(0.3 0.02 262);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --foreground: oklch(0.96 0.005 255);
+  --card-foreground: oklch(0.96 0.005 255);
+  --popover-foreground: oklch(0.96 0.005 255);
+  --secondary-foreground: oklch(0.96 0.005 255);
+  --muted-foreground: oklch(0.72 0.02 258);
+  --accent-foreground: oklch(0.96 0.005 255);
+  --sidebar-foreground: oklch(0.96 0.005 255);
+  --sidebar-accent-foreground: oklch(0.96 0.005 255);
+  --primary: oklch(0.68 0.19 262);
+  --primary-foreground: oklch(0.145 0.02 262);
+  --ring: oklch(0.6 0.15 262);
+  --sidebar-primary: oklch(0.68 0.19 262);
+  --sidebar-primary-foreground: oklch(0.145 0.02 262);
+  --sidebar-ring: oklch(0.6 0.15 262);
+  --chart-1: oklch(0.56 0.19 262);
+  --chart-2: oklch(0.75 0.17 118);
+  --chart-3: oklch(0.64 0.19 352);
+  --chart-4: oklch(0.78 0.105 195);
+  --chart-5: oklch(0.71 0.17 300);
+  --positive: oklch(0.76 0.15 150);
+  --positive-subtle: oklch(0.27 0.05 150);
+  --positive-fill: oklch(0.56 0.13 150);
+  --negative: oklch(0.74 0.15 22);
+  --negative-subtle: oklch(0.27 0.06 25);
+  --negative-fill: oklch(0.56 0.15 22);
+  --warning: oklch(0.8 0.14 80);
+  --warning-subtle: oklch(0.27 0.05 75);
+  --warning-fill: oklch(0.73 0.145 78);
+  --info: oklch(0.75 0.12 250);
+  --info-subtle: oklch(0.27 0.06 255);
+  --info-fill: oklch(0.56 0.13 250);
+  --neutral: oklch(0.85 0 0);
+  --neutral-subtle: oklch(0.27 0 0);
+  --neutral-fill: oklch(0.56 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.145 0.02 262);
 }
-/* vantage-template:chart-preset:end */
+/* squadkit-theme:end */