@squadbase/vantage 0.6.2-dev1.25d59a0 → 0.6.2-dev1.26a3cce

package/registry/ui/tooltip.tsx

@@ -34,14 +34,18 @@ function TooltipContent({
   align = "center",
   alignOffset = 0,
   children,
+  container,
   ...props
 }: TooltipPrimitive.Popup.Props &
   Pick<
     TooltipPrimitive.Positioner.Props,
     "align" | "alignOffset" | "side" | "sideOffset"
-  >) {
+  > & {
+    /** ポータルの親要素。ローカルテーマ内の要素を渡すと、その CSS 変数を継承する。省略時は body。 */
+    container?: TooltipPrimitive.Portal.Props["container"]
+  }) {
   return (
-    <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Portal container={container} className={container ? "contents" : undefined}>
       <TooltipPrimitive.Positioner
         align={align}
         alignOffset={alignOffset}

package/registry/ui/tracker.tsx

@@ -11,7 +11,7 @@
  * never carries the meaning alone: put the date and the state in `tooltip`
  * (also the block's accessible name).
  */
-import { forwardRef, type ComponentProps } from "react"
+import { forwardRef, useCallback, useRef, type ComponentProps } from "react"
 
 import { cn } from "@squadbase/vantage/ui"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@squadbase/vantage/ui"
@@ -816,9 +816,15 @@ export const Tracker = forwardRef<HTMLDivElement, TrackerProps>(function Tracker
   { data = NO_ROWS, defaultColor, hoverEffect = true, className, ...props },
   ref,
 ) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const setRef = useCallback((node: HTMLDivElement | null) => {
+    containerRef.current = node
+    if (typeof ref === "function") return ref(node)
+    if (ref) ref.current = node
+  }, [ref])
   const fallback = defaultColor ? blockColorToCss(defaultColor) : DEFAULT_BLOCK_COLOR
   return (
-    <div ref={ref} data-slot="tracker" className={cn("flex h-6 w-full gap-0.5", className)} {...props}>
+    <div ref={setRef} data-slot="tracker" className={cn("flex h-6 w-full gap-0.5", className)} {...props}>
       {data.map((block, i) => {
         const blockClass = cn(
           "h-full min-w-0 flex-1 rounded-[2px]",
@@ -831,7 +837,7 @@ export const Tracker = forwardRef<HTMLDivElement, TrackerProps>(function Tracker
               delay={0}
               render={<div data-slot="tracker-block" role="img" tabIndex={0} aria-label={block.tooltip} className={blockClass} style={style} />}
             />
-            <TooltipContent>{block.tooltip}</TooltipContent>
+            <TooltipContent container={containerRef}>{block.tooltip}</TooltipContent>
           </Tooltip>
         ) : (
           <div key={block.key ?? i} data-slot="tracker-block" className={blockClass} style={style} />

package/registry/ui/trend-indicator.tsx

@@ -19,8 +19,8 @@ import type { TrendDirection } from "@squadbase/vantage/components"
 const trendIndicatorVariants = cva("inline-flex items-center gap-0.5 text-sm font-medium", {
   variants: {
     sentiment: {
-      positive: "text-chart-1",
-      negative: "text-primary",
+      positive: "text-positive",
+      negative: "text-negative",
       neutral: "text-muted-foreground",
     },
   },

package/registry/ui/waterfall-chart.tsx

@@ -32,7 +32,7 @@ import { EChart } from "@squadbase/vantage/components"
 import type { Polarity } from "@squadbase/vantage/components"
 import { EMPTY_VALUE, MINUS_SIGN } from "@squadbase/vantage/components"
 import type { ChartCommonProps, NumericKeys, ValueFormatter } from "@squadbase/vantage/components"
-import { createContext, useCallback, useEffect, useRef, useState } from "react"
+import { createContext, useCallback, useEffect, useRef, useState, type RefObject } from "react"
 import type { ChartTone } from "@squadbase/vantage/components"
 import { type ReactNode } from "react"
 import { computeComparison, defaultChangeDisplay, formatChange, toneForValue, type ComparisonKind, type PeriodGrain } from "@squadbase/vantage/components"
@@ -75,10 +75,23 @@ interface ChartTokens {
   border: string | null
   /** Tooltip surface. */
   popover: string | null
+  /** Semantic and surface dependencies used by typed chart options. Optional for hand-built tokens. */
+  colors?: Record<string, string>
+  /** Actual inherited painting surface (may change without a token changing). */
+  surface?: string | null
   /** Tooltip text. */
   popoverForeground: string | null
 }
 
+// Keep scope out of the public token shape. A resolved snapshot remembers where arbitrary
+// var(--token) expressions must be read, without retaining unmounted charts globally.
+const tokenScopes = new WeakMap<ChartTokens, Element>()
+const OPTION_COLOR_TOKENS = [
+  "--background", "--card", "--muted", "--primary", "--destructive",
+  ...["positive", "negative", "warning", "neutral", "info"].flatMap((tone) =>
+    ["", "-fill", "-subtle"].map((suffix) => `--${tone}${suffix}`)),
+]
+
 let normalizeContext: CanvasRenderingContext2D | null | undefined
 
 /** The forms `fillStyle` serializes legacy colours to, and zrender can parse. */
@@ -134,8 +147,10 @@ function readChartTokens(el?: Element | null): ChartTokens | null {
     const color = read(token)
     if (color) series.push(color)
   }
-  return {
+  const tokens: ChartTokens = {
     series,
+    colors: Object.fromEntries(OPTION_COLOR_TOKENS.map((name) => [name, styles.getPropertyValue(name).trim()])),
+    surface: readChartSurface(target),
     ...(styles.fontFamily ? { fontFamily: styles.fontFamily } : {}),
     foreground: read("--foreground"),
     mutedForeground: read("--muted-foreground"),
@@ -143,6 +158,8 @@ function readChartTokens(el?: Element | null): ChartTokens | null {
     popover: read("--popover"),
     popoverForeground: read("--popover-foreground"),
   }
+  tokenScopes.set(tokens, target)
+  return tokens
 }
 
 /** Structural equality, so a theme toggle that changes nothing doesn't re-init. */
@@ -150,6 +167,10 @@ function sameChartTokens(a: ChartTokens | null, b: ChartTokens | null): boolean
   if (a === b) return true
   if (!a || !b) return false
   return (
+    tokenScopes.get(a) === tokenScopes.get(b) &&
+    a.surface === b.surface &&
+    Object.keys(a.colors ?? {}).length === Object.keys(b.colors ?? {}).length &&
+    Object.entries(a.colors ?? {}).every(([name, value]) => b.colors?.[name] === value) &&
     a.series.length === b.series.length &&
     a.series.every((color, i) => color === b.series[i]) &&
     a.fontFamily === b.fontFamily &&
@@ -175,7 +196,7 @@ function sameChartTokens(a: ChartTokens | null, b: ChartTokens | null): boolean
  *    attributes alone leaves the chart painted in the previous palette until a
  *    reload — the tokens in the DOM are new, the canvas is not.
  */
-function watchChartTokens(onChange: () => void): () => void {
+function watchChartTokens(onChange: () => void, scope?: Element | null): () => void {
   if (typeof document === "undefined") return () => {}
   // Style edits arrive as bursts of mutations; coalesce them into one read, and
   // take it after the next frame so a swapped stylesheet has been applied.
@@ -190,8 +211,11 @@ function watchChartTokens(onChange: () => void): () => void {
 
   const themeObserver = new MutationObserver(schedule)
   const attributeFilter = ["class", "style", "data-theme"]
-  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter })
-  if (document.body) themeObserver.observe(document.body, { attributes: true, attributeFilter })
+  // Only the chart and its ancestors can change its inherited theme. Never observe
+  // the document subtree: canvas/tooltip/rendering mutations would trigger every chart.
+  for (let node: Element | null = scope ?? document.body ?? document.documentElement; node; node = node.parentElement) {
+    themeObserver.observe(node, { attributes: true, attributeFilter })
+  }
 
   const styleObserver = new MutationObserver(schedule)
   if (document.head) {
@@ -279,22 +303,23 @@ function buildChartTheme(tokens: ChartTokens): Record<string, unknown> {
  * components that build an ECharts option from token colours themselves (the
  * typed charts), so their palette follows light/dark like `EChart`'s theme.
  */
-function useChartTokens(): ChartTokens | null {
+function useChartTokens(scope?: Element | null | RefObject<Element | null>): ChartTokens | null {
   const [tokens, setTokens] = useState<ChartTokens | null>(() => readChartTokens())
   // Compared here, not inside a `setTokens` updater: an updater that reads the DOM is
   // replayed by React on every rebase and returns a fresh object each time, so the state
   // never settles ("Maximum update depth exceeded" once the tokens change after mount).
   const tokensRef = useRef(tokens)
   useEffect(() => {
+    const target = scope && "current" in scope ? scope.current : scope
     const sync = () => {
-      const next = readChartTokens()
+      const next = readChartTokens(target)
       if (sameChartTokens(tokensRef.current, next)) return
       tokensRef.current = next
       setTokens(next)
     }
     sync()
-    return watchChartTokens(sync)
-  }, [])
+    return watchChartTokens(sync, target)
+  }, [scope])
   return tokens
 }
 
@@ -306,7 +331,7 @@ const EMBEDDED_VAR_RE = /var\(\s*(--[\w-]+)\s*\)/g
 /**
  * Turn chart colours into canvas-safe strings. `"chart-1"`〜`"chart-5"` come from
  * the resolved series tokens; `"positive"` / `"warning"` / `"negative"` / `"neutral"` (and the area
- * variants `"positive-fill"`, …) are read off the document root (`--positive`, …); `var(--token)` is read off the document root; any
+ * variants `"positive-fill"`, …) are read in the snapshot's inherited scope (`--positive`, …); `var(--token)` uses the same scope; any
  * other CSS colour is normalized like the tokens are. A colour that can't be
  * resolved comes back as `""`, which ECharts treats as "use the palette".
  */
@@ -317,12 +342,13 @@ function resolveChartColors(colors: readonly string[], tokens: ChartTokens | nul
     // Meaning colours are the theme tokens of the same name: same path as `var(--positive)`.
     if (TONE_NAME_RE.test(color.trim())) {
       if (typeof document === "undefined") return ""
-      return toCanvasColor(getComputedStyle(document.documentElement).getPropertyValue(`--${color.trim()}`)) ?? ""
+      const target = (tokens && tokenScopes.get(tokens)) ?? document.documentElement
+      return toCanvasColor(getComputedStyle(target).getPropertyValue(`--${color.trim()}`)) ?? ""
     }
     if (typeof document === "undefined") return color
     let value = color.trim()
     const cssVar = CSS_VAR_RE.exec(value)
-    const styles = getComputedStyle(document.documentElement)
+    const styles = getComputedStyle((tokens && tokenScopes.get(tokens)) ?? document.documentElement)
     if (cssVar) {
       value = styles.getPropertyValue(cssVar[1]!).trim() || (cssVar[2] ?? "").trim()
     } else if (value.includes("var(")) {
@@ -368,7 +394,7 @@ function readChartSurface(el: Element | null): string | null {
       if (color) return color
     }
   }
-  return toCanvasColor(getComputedStyle(document.documentElement).getPropertyValue("--background"))
+  return toCanvasColor(getComputedStyle(el ?? document.documentElement).getPropertyValue("--background"))
 }
 
 /** Widths are bucketed so a resize only rebuilds the option when the label budget can change. */
@@ -382,9 +408,10 @@ const WIDTH_BUCKET = 40
  */
 function useChartSurface<E extends Element>(
   forwarded: ForwardedRef<E>,
-  tokens: ChartTokens | null,
-): { ref: (el: E | null) => void; surface: string | undefined; width: number | undefined } {
+  tokens?: ChartTokens | null,
+): { ref: (el: E | null) => void; surface: string | undefined; width: number | undefined; tokens: ChartTokens | null } {
   const [node, setNode] = useState<E | null>(null)
+  const scopedTokens = useChartTokens(node)
   const [surface, setSurface] = useState<string | undefined>(undefined)
   const [width, setWidth] = useState<number | undefined>(undefined)
   const ref = useCallback(
@@ -398,7 +425,7 @@ function useChartSurface<E extends Element>(
   useEffect(() => {
     if (!node) return
     setSurface(readChartSurface(node) ?? undefined)
-  }, [node, tokens])
+  }, [node, tokens, scopedTokens])
   useEffect(() => {
     if (!node || typeof ResizeObserver === "undefined") return
     const update = (w: number) => setWidth(Math.floor(w / WIDTH_BUCKET) * WIDTH_BUCKET)
@@ -407,7 +434,7 @@ function useChartSurface<E extends Element>(
     observer.observe(node)
     return () => observer.disconnect()
   }, [node])
-  return { ref, surface, width }
+  return { ref, surface, width, tokens: scopedTokens }
 }
 
 /* ---------- inlined from @squadbase/squadkit registry/lib/chart-options.ts (internal to @squadbase/vantage) ---------- */
@@ -4141,8 +4168,7 @@ function WaterfallChartImpl<T extends Record<string, unknown>>(
   ref: ForwardedRef<HTMLDivElement>,
 ) {
   const valueKey: string = categories[0] ?? ""
-  const tokens = useChartTokens()
-  const { ref: frameRef, width: plotWidth } = useChartSurface(ref, tokens)
+  const { ref: frameRef, width: plotWidth, tokens } = useChartSurface(ref)
   // Value labels and the tooltip read in full (as `format` says); ticks read short.
   const valueFormatter = useMemo(() => resolveValueFormatter(valueFormatterProp, format), [valueFormatterProp, format])
   const axisFormatter = useMemo(() => resolveAxisFormatter(valueFormatterProp, format), [valueFormatterProp, format])

package/skills/vantage-design/SKILL.md

@@ -1,71 +1,76 @@
 ---
 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)アプリのテーマ(色・チャートの色・書体・角丸)を、`styles.css` とテーマコマンドで作る / 更新する手順。配色・ブランドカラー・テーマ・チャートの色・フォント・角丸・トーンを変えたいとき、既存サイトやロゴ・資料に合わせたいとき、プロジェクト作成時の初期デザイン(テーマ neutral / ocean / forest / sunset / violet / rose / mono)を決めるときに使う。「色を変えて」「ブランドに合わせて」「このサイトに合わせて」「落ち着いた感じに」「フォントを変えて」「テーマを作って」、"change the colors", "match our brand", "match this website", "theme", "color palette", "font", "design system" で起動。
 ---
 
-# DESIGN.md と styles.css をまとめて更新する
+# テーマと styles.css を更新する
 
-Vantage アプリの見た目は 2 つのファイルで決まる。
+Vantage アプリの色・書体・角丸の値と色の割り当ては、SquadKit のテーマだけが持つ。
 
-| ファイル | 持つもの | 所有者 |
-| --- | --- | --- |
-| `DESIGN.md`(プロジェクトルート) | 意図とルール。**トークン名だけ**を書き、色コードは書かない(150 行以内) | ユーザー |
-| `styles.css`(ページと同じ側。通常 `src/styles.css`) | トークンの実際の値(`:root` と `.dark`) | ユーザー |
+| 手段 | 何を決めるか |
+| --- | --- |
+| ThemeDialog / `theme <id>` / `chart <preset>`(CLI) | 出発点のテーマとチャートの配色 |
+| `styles.css`(ページと同じ側。通常 `src/styles.css`)の `/* squadkit-theme:end */` より後ろ | ブランド色・書体など、テーマに無い値の上書き |
 
-**2 つは必ず同じステップで更新する。** 片方だけ直すと、次にページを書くエージェントが古い意図に
-従ってしまう。デザイン変更の依頼をページ単位の `className` 修正で済ませない。
+デザイン変更の依頼(「もっと落ち着いた色に」など)は、**テーマの切り替えかスタイルシートの上書きで完結させる。**
+`DESIGN.md` へは記録しない。今のテーマ名は `styles.css` の `/* theme: <name> */` マーカーから読む。
+ページ単位の `className` 修正で済ませない。
 
-一般規約(トークンで色を書く・設定ファイルを作らない)は `AGENTS.md` が正本。ここでは手順だけを扱う。
+見た目の規則(意味トークンの使い分け・カードで包む・KPI → チャート → 表など)は `AGENTS.md` の
+「見た目の規約」節が正本。ここでは手順だけを扱い、規則は重複させない。
+任意の `DESIGN.md`(ユーザー固有の意図を書くファイル)は、ユーザーが望んだときだけ扱う(`references/format.md`)。
 
 ## リファレンス
 
 | ファイル | 読む場面 |
 | --- | --- |
-| `references/format.md` | `DESIGN.md` を書く / 直すとき(書式・節の順番・雛形) |
-| `references/extract.md` | URL・画像・pptx/pdf・言葉・外部 DESIGN.md から色と書体を取り出すとき |
-| `references/presets.md` | プロジェクト作成時の初期デザイン(`default` / `calm` / `vivid` / `mono`) |
+| `references/format.md` | ユーザーが任意の `DESIGN.md` を望んだとき(位置づけと優先順位) |
+| `references/extract.md` | URL・画像・pptx/pdf・言葉から色と書体を取り出すとき |
+| `references/presets.md` | テーマ(`neutral` / `ocean` / `forest` / `sunset` / `violet` / `rose` / `mono`)の選び方と `theme` コマンド。旧プリセット id の読み替え |
 | `scripts/contrast.mjs` | 文字色と背景色のコントラスト比を確かめるとき |
 
 ## 手順
 
 ### 1. 入力を集める
 
-- 何に合わせるのか(URL・ロゴ画像・資料・言葉・外部の `DESIGN.md`)を確認し、
+- 何に合わせるのか(URL・ロゴ画像・資料・言葉)を確認し、
   `references/extract.md` の該当する節の手順で色・書体・トーンを取り出す。
-- 既存の `DESIGN.md` と `styles.css` を読む。既にあるルールで今回触らないものは残す。
+- 既存の `styles.css` を読み、マーカーから今のテーマ名を確かめる。今回触らない上書きは残す。
+- プロジェクトルートに `DESIGN.md` があれば読む(ユーザー所有。書き換えない)。色の割り当てはテーマが優先。
 - スライド(`*.slide.tsx`)があるかを `ls` / `vantage routes` で確認しておく。
 
 ### 2. 提案して確認を取る
 
 書き込む前に、次の 2 つをユーザーに見せて確認を取る。
 
-- **役割 → トークンの対応表**(主色・強調・良い/悪い/注意・背景の段階・文字・チャート 5 色・書体)。
+- **役割 → トークンの対応表**(主色・背景の段階・文字・チャート 5 色・書体。良い/悪い/注意/情報/中立はテーマの意味トークンに任せる)。
   各行に「何に合わせてその色にしたか」を 1 語添える。
-- **トーンの説明**(2〜3 行。`DESIGN.md` の「全体のトーン」にそのまま入る文)。
-
-プリセットで足りる場合はプリセット名(`references/presets.md`)で提案してよい。
-
-### 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` にしたいなど)は、マーカーブロックの**後ろ**に
+- **トーンの説明**(2〜3 行)。
+
+テーマで足りる場合はテーマ id(`references/presets.md`)で提案してよい。旧プリセット id(`default` / `calm` / `vivid` / `mono`)で頼まれたら新 id に読み替える。
+
+### 3. テーマを当て、styles.css を書く
+
+- **テーマ範囲・チャート範囲のマーカーの中は手で編集しない。** 色・角丸・書体の出発点は 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 +78,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,18 +93,15 @@ 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` 参照)。
 
 長い表(ダッシュボード): カードに `max-h-*` + `overflow-y-auto` の縦スクロール領域を作らず、
 ページング付きの `DataTablePreset`(`enablePagination`)にする(ホイールや End キーがページに届かなくなるため)。
 
-`DESIGN.md`: `references/format.md` の書式で書く。**色コードを書かない**(トークン名だけ)。
-150 行を超えない(超えると `vantage check` が `DESIGN_MD_TOO_LONG` を出す)。ロゴなどの素材は
-`public/brand/logo.svg` のように `public/` 配下のパスで「ブランド素材」行に書く。
-
 ### 4. コントラストを確かめる
 
 主な文字色 / 背景色の組を、**ライトとダークの両方で**確かめる。
@@ -131,11 +131,11 @@ node <このスキルの場所>/scripts/contrast.mjs '<文字色>' '<背景色>'
 npx vantage check
 ```
 
-`HARDCODED_COLOR`(ページ内の色コード)や `DESIGN_MD_TOO_LONG` が出たらその場で直す。
+`HARDCODED_COLOR`(ページ内の色コード)などが出たらその場で直す。
 
 ### 7. 完了を報告する
 
-報告には、更新したファイル(`DESIGN.md` / `styles.css`)に加えて次を**必ず**入れる。
+報告には、更新したファイル(`styles.css` など)と当てたテーマ名に加えて次を**必ず**入れる。
 
 - プレビューページのパスと URL(`src/design-preview.tsx` → `/design-preview`)。
 - 「ホームなど既存の画面は一部の色しか使っていないので、変更が見えないことがある。配色はプレビュー
@@ -143,5 +143,5 @@ npx vantage check
 
 ## 会話中の指示との関係
 
-- 会話中の個別の指示(「このグラフだけ赤で」)は `DESIGN.md` より優先する。そのページだけ直せばよい。
-- 同じ指示が 2 回以上出たら、`DESIGN.md` への反映を提案する(反映するときはこの手順の 2 から)。
+- 会話中の個別の指示(「このグラフだけ赤で」)はテーマより優先する。そのページだけ直せばよい。
+- 同じ指示が 2 回以上出たら、`styles.css` の上書きへ反映することを提案する(この手順の 2 から)。

package/skills/vantage-design/references/extract.md

@@ -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,14 +37,14 @@ 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 名。
 
 注意:
 
 - SPA で HTML がほぼ空のときは、`<script>` より先に CSS の `<link>` を探す。それも無ければ
   ユーザーにスクリーンショットかブランドカラーを聞く(推測で埋めない)。
 - 取得できない(認証・ボット対策)ときは、その旨を伝えてスクリーンショットをもらう。
-- ロゴを使うなら `public/brand/` に保存し、`DESIGN.md` の「ブランド素材」行にパスを書く。
+- ロゴを使うなら `public/brand/` に保存する。
 
 ## 画像・ロゴ
 
@@ -66,27 +67,26 @@ 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 などが書いたもの)
 
-外部の DESIGN.md は YAML frontmatter や本文に**値**(hex・px・フォント名)を持っていることが多い。
-Vantage の `DESIGN.md` は値を持たないので、**値を `styles.css` へ移し、`DESIGN.md` をトークン参照に
-書き直す**。
+外部の DESIGN.md が値(hex・px・フォント名)を持っているときは、値だけを拾って**テーマ側**へ移す。
+Vantage に `DESIGN.md` は作らない。
 
-1. 値を拾う: primary / secondary / surface / background / on-* / error / success / warning、
-   フォント、角丸。
+1. 値を拾う: primary / secondary / surface / background / on-* / error、フォント、角丸。
 2. 対応づける:
 
    | 外部の名前 | Vantage のトークン |
@@ -96,15 +96,14 @@ Vantage の `DESIGN.md` は値を持たないので、**値を `styles.css` へ
    | background / surface / surface-container | `--background` / `--card` / `--muted` |
    | on-background / on-surface / on-surface-variant | `--foreground` / `--card-foreground` / `--muted-foreground` |
    | outline | `--border` |
-   | error | `--destructive` |
-   | success / warning | 専用トークンなし → `--chart-*` のどれかに割り当てて `DESIGN.md` に書く |
+   | error | `--destructive`(意味トークンの negative) |
+   | success / warning | テーマの意味トークン(positive / warning)に任せる。チャートの色には割り当てない |
    | 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 に
-   ダークの値が無ければ、ライトの色相を保って明度だけ反転した値を作り、コントラストを確かめる。
-4. `DESIGN.md` を `format.md` の節の順番で書き直す。外部の文章(トーン・Do/Don't・コンポーネントの
-   ルール)は活かし、値だけをトークン名に置き換える。150 行に収まらない分は要約する。
-5. 元のファイルは消さずに残すか(例: `docs/design-source.md`)、ユーザーに確認して削除する。
+   (チャート色・書体の書き方は SKILL.md の手順 3)。外部にダークの値が無ければ、ライトの色相を保って
+   明度だけ反転した値を作り、コントラストを確かめる。
+4. 外部のトーン・Do/Don't・コンポーネントのルールは、ユーザーが望んだときだけ任意の `DESIGN.md`
+   (`format.md`)に要約して残す。値は書かない。