{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "flow-tone",
  "title": "色调变量",
  "description": "全站带颜色的组件共用的色调：primary、blue、green 等内置名或任意 CSS 颜色，统一换成 --flow-tone 变量；附带六种多彩色调的亮 / 暗取值，在全局样式里改写即可换成品牌色。",
  "files": [
    {
      "path": "src/registry/lib/flow-tone.ts",
      "content": "import type { CSSProperties } from \"react\"\n\n/**\n * 内置色调。\n * - `primary`、`foreground`、`muted`、`destructive` 直接引用主题变量，跟随颜色主题；\n * - `blue` 等多彩色调引用 `--flow-blue` 这类变量，由 registry 条目的 `cssVars` 提供亮 / 暗两套取值，\n *   在自己的全局样式里改写它们即可换成品牌色。\n */\ntype FlowToneName =\n  | \"primary\"\n  | \"foreground\"\n  | \"muted\"\n  | \"destructive\"\n  | \"blue\"\n  | \"green\"\n  | \"amber\"\n  | \"rose\"\n  | \"violet\"\n  | \"cyan\"\n\n/** 色调：内置名，或任意 CSS 颜色（`\"#f97316\"`、`\"oklch(0.7 0.2 150)\"`、`\"var(--brand)\"` 都可以）。 */\ntype FlowTone = FlowToneName | (string & {})\n\nconst FLOW_TONES: Record<FlowToneName, string> = {\n  primary: \"var(--primary)\",\n  foreground: \"var(--foreground)\",\n  muted: \"var(--muted-foreground)\",\n  destructive: \"var(--destructive)\",\n  blue: \"var(--flow-blue)\",\n  green: \"var(--flow-green)\",\n  amber: \"var(--flow-amber)\",\n  rose: \"var(--flow-rose)\",\n  violet: \"var(--flow-violet)\",\n  cyan: \"var(--flow-cyan)\",\n}\n\n/**\n * 把色调换成 `--flow-tone` 这个 CSS 变量。\n * 所有带颜色的原语都只读 `--flow-tone`，变量沿 DOM 向下继承，所以在任何元素（包括你自己写的 SVG）\n * 上设置它，里面没有指定 `tone` 的原语都会跟着变。不传 `tone` 返回 `undefined`，即沿用外层的色调。\n */\nfunction flowToneStyle(tone?: FlowTone): CSSProperties | undefined {\n  if (tone === undefined) return undefined\n  const color = Object.hasOwn(FLOW_TONES, tone)\n    ? FLOW_TONES[tone as FlowToneName]\n    : tone\n  return { \"--flow-tone\": color } as CSSProperties\n}\n\n// Tailwind 只识别完整的类名，所以每种用法都把类写全\nconst toneClasses = {\n  /** 节点被点亮：淡底色 + 描边 */\n  lit: \"fill-(--flow-tone)/10 stroke-(--flow-tone)\",\n  stroke: \"stroke-(--flow-tone)\",\n  /** 常驻连接上流动的虚线纹理 */\n  flow: \"stroke-(--flow-tone)/40\",\n  /** 指定了色调的连线：淡淡染上色调 */\n  line: \"stroke-(--flow-tone)/30\",\n  fill: \"fill-(--flow-tone)\",\n} as const\n\nexport { FLOW_TONES, flowToneStyle, toneClasses }\nexport type { FlowTone, FlowToneName }\n",
      "type": "registry:ui",
      "target": "lib/flow-tone.ts"
    }
  ],
  "cssVars": {
    "light": {
      "flow-blue": "oklch(0.56 0.2 258)",
      "flow-green": "oklch(0.62 0.16 150)",
      "flow-amber": "oklch(0.7 0.16 70)",
      "flow-rose": "oklch(0.62 0.21 5)",
      "flow-violet": "oklch(0.56 0.22 292)",
      "flow-cyan": "oklch(0.66 0.12 215)"
    },
    "dark": {
      "flow-blue": "oklch(0.72 0.15 255)",
      "flow-green": "oklch(0.77 0.17 152)",
      "flow-amber": "oklch(0.82 0.15 82)",
      "flow-rose": "oklch(0.74 0.16 8)",
      "flow-violet": "oklch(0.74 0.15 295)",
      "flow-cyan": "oklch(0.82 0.11 208)"
    }
  },
  "type": "registry:lib"
}