@qiqi1996/design-system 0.0.2 → 0.0.3

package/README.md

@@ -1,10 +1,14 @@
 # Qi Design System
 
-Use a unified configuration file to describe the design system, and then automatically generate the configuration of Tailwind, Chakra UI and other UI frameworks.
+![banner](src-docs/assets/banner.png)
 
-Languages: [中文](./README.zh-CN.md) | [English](./README.md)
+Describe the design system once and output multiple framework configs (Tailwind, Chakra UI, Ant Design, etc.).
 
-## Quick Start
+Languages: [中文](./README.zh-cn.md) | [English](./README.md)
+
+## Documentation
+
+[https://qiqi-1996.github.io/qi-design-system](https://qiqi-1996.github.io/qi-design-system)
 
 ## Features & Roadmap
 
@@ -13,6 +17,7 @@ Languages: [中文](./README.zh-CN.md) | [English](./README.md)
 - [ ] Color System
   - [ ] Single-color Palette Generation
     - [x] Ant Design Color
+    - [x] Qi Design System V0
     - [ ] Mantine Colors Generator
   - [ ] Triadic Color Scheme
   - [x] Semantic Definition (Based on Chakra UI Semantic Specifications)
@@ -32,7 +37,7 @@ Languages: [中文](./README.zh-CN.md) | [English](./README.md)
 - [ ] Tailwind V3
 - [ ] Ant Design
 - [ ] Chakra UI
-- [ ] Mantine
+- [x] Mantine
 
 ## Contribution
 

package/README.zh-cn.md

@@ -0,0 +1,42 @@
+# Qi Design System
+
+描述一次设计系统, 输出多套框架配置（Tailwind、Chakra UI、Ant Design 等等）。
+
+Languages: [中文](./README.zh-cn.md) | [English](./README.md)
+
+## 文档
+
+[https://qiqi-1996.github.io/qi-design-system](https://qiqi-1996.github.io/qi-design-system)
+
+## 特性和计划
+
+### 颜色系统定义
+
+- [ ] 颜色系统
+  - [ ] 单色色板生成
+    - [x] Ant Design Color
+    - [x] Qi Design System V0
+    - [ ] Mantine Colors Generator
+  - [ ] 三元群配色方案
+  - [x] 语义化（基于 Chakra UI Semantic 定义）
+  - [ ] 暗黑模式
+- [ ] 字体系统
+  - [x] 字号（仅语义化定义）
+  - [x] 行高
+    - [x] 线性自动生成
+  - [x] 字重（仅语义化定义）
+- [x] 空间系统 
+- [ ] 圆角
+- [ ] 阴影
+
+### 内置配置生成器
+
+- [x] Talwind V4
+- [ ] Talwind V3
+- [ ] Ant Design
+- [ ] Chakra UI
+- [x] Mantine
+
+## 贡献
+
+* 需要 Bun 运行环境（v1.3.0+）

package/dist/cli/main

@@ -708,7 +708,7 @@ var require_lodash = __commonJS((exports2, module2) => {
     function unicodeWords(string4) {
       return string4.match(reUnicodeWord) || [];
     }
-    var runInContext = function runInContext(context) {
+    var runInContext = function runInContext2(context) {
       context = context == null ? root : _2.defaults(root.Object(), context, _2.pick(root, contextProps));
       var { Array: Array2, Date: Date2, Error: Error2, Function: Function2, Math: Math2, Object: Object2, RegExp: RegExp2, String: String2, TypeError: TypeError2 } = context;
       var arrayProto = Array2.prototype, funcProto = Function2.prototype, objectProto = Object2.prototype;
@@ -5221,7 +5221,7 @@ __p += '`;
       lodash.replace = replace;
       lodash.result = result;
       lodash.round = round;
-      lodash.runInContext = runInContext;
+      lodash.runInContext = runInContext2;
       lodash.sample = sample;
       lodash.size = size;
       lodash.snakeCase = snakeCase;
@@ -6236,7 +6236,7 @@ var require_lib2 = __commonJS((exports2) => {
   };
   Object.defineProperty(exports2, "generate", {
     enumerable: true,
-    get: function get() {
+    get: function get2() {
       return _generate.default;
     }
   });
@@ -6251,7 +6251,7 @@ var require_lib2 = __commonJS((exports2) => {
       return;
     Object.defineProperty(exports2, key, {
       enumerable: true,
-      get: function get() {
+      get: function get2() {
         return _presets[key];
       }
     });
@@ -29157,7 +29157,7 @@ var loadLanguages = instance.loadLanguages;
 // src/schema/color.ts
 var colorPaletteSchema = () => zod_default.array(zod_default.discriminatedUnion("type", [
   zod_default.object({
-    type: zod_default.union([zod_default.literal("ant-design")]).default("ant-design").meta({
+    type: zod_default.union([zod_default.literal("ant-design"), zod_default.literal("qi-design-system-v0")]).default("qi-design-system-v0").meta({
       title: t("schema.color.type.title"),
       description: t("schema.color.type.desc")
     }),
@@ -29254,7 +29254,8 @@ var colorSemanticThemeSchema = () => zod_default.record(zod_default.string(), zo
 }));
 var colorSchema = () => zod_default.object({
   palettes: colorPaletteSchema().optional().meta({
-    title: t("schema.color.title")
+    title: t("schema.color.title"),
+    description: t("schema.color.desc")
   }),
   semantic: colorSemanticThemeSchema().optional().meta({
     title: t("common.semantic"),
@@ -29277,7 +29278,10 @@ var spaceSchema = () => zod_default.object({
 });
 
 // src/schema/output.ts
-var outputSchema = () => zod_default.record(zod_default.union([zod_default.literal("tailwind-v4")]), zod_default.string().meta({ title: "文件输出位置" })).meta({
+var outputSchema = () => zod_default.array(zod_default.object({
+  type: zod_default.union([zod_default.literal("tailwind-v4"), zod_default.literal("mantine")]).meta({ title: "输出类型", description: "例如：./src" }),
+  path: zod_default.string().meta({ title: "输出位置", description: "例如：./src/theme.css" })
+})).meta({
   title: "输出配置"
 });
 
@@ -29371,15 +29375,130 @@ var isColorVariable = (value) => {
 // src/generator/common/color.ts
 var import_colors = __toESM(require_lib2(), 1);
 var import_lodash2 = __toESM(require_lodash(), 1);
+
+// src/generator/qi-design-system/color-palettes-v0.ts
+function genQiDesignSystemColorsV0(base, schema = "light") {
+  const [h, s, l] = hexToHsl(base);
+  const light = [
+    ...distribution(l, 100, 7, easeInOutQuad).reverse(),
+    ...distribution(0, l, 4, easeInOutQuart).reverse().slice(1)
+  ].map((l2) => [h, s, Number(l2.toFixed(0))]).map(hslToHex);
+  const dark = [...distribution(0, l, 7, easeInOutQuad), ...distribution(l, 100, 4, easeInOutQuart).slice(1)].map((d) => [h, s, Number(d.toFixed(0))]).map(hslToHex);
+  return {
+    light,
+    dark
+  }[schema];
+}
+function distribution(v2, target, step, easing) {
+  if (step <= 0)
+    return [];
+  const result = [];
+  const delta = target - v2;
+  for (let i = 1;i <= step; i++) {
+    const t2 = i / step;
+    const easedT = easing(t2);
+    result.push(v2 + easedT * delta);
+  }
+  return result;
+}
+function easeInOutQuart(x) {
+  return x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2;
+}
+function easeInOutQuad(x) {
+  return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2;
+}
+function hexToHsl(hex3) {
+  let cleanHex = hex3.replace(/^#/, "");
+  if (cleanHex.length === 3) {
+    cleanHex = cleanHex.split("").map((char) => char + char).join("");
+  }
+  if (!/^[0-9a-fA-F]{6}$/.test(cleanHex)) {
+    throw new Error("无效的16进制颜色值，请传入正确格式（如#fff或#ffffff）");
+  }
+  const r = parseInt(cleanHex.slice(0, 2), 16);
+  const g3 = parseInt(cleanHex.slice(2, 4), 16);
+  const b2 = parseInt(cleanHex.slice(4, 6), 16);
+  const rNorm = r / 255;
+  const gNorm = g3 / 255;
+  const bNorm = b2 / 255;
+  const max = Math.max(rNorm, gNorm, bNorm);
+  const min = Math.min(rNorm, gNorm, bNorm);
+  let h = 0;
+  let s = 0;
+  let l = (max + min) / 2;
+  if (max !== min) {
+    const delta = max - min;
+    s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+    switch (max) {
+      case rNorm:
+        h = (gNorm - bNorm) / delta + (gNorm < bNorm ? 6 : 0);
+        break;
+      case gNorm:
+        h = (bNorm - rNorm) / delta + 2;
+        break;
+      case bNorm:
+        h = (rNorm - gNorm) / delta + 4;
+        break;
+    }
+    h = h * 60;
+  }
+  const hFinal = Math.round(h);
+  const sFinal = Math.round(s * 100);
+  const lFinal = Math.round(l * 100);
+  return [hFinal, sFinal, lFinal];
+}
+function hslToHex(hslArr) {
+  let [h = 0, s = 0, l = 0] = hslArr;
+  h = Math.max(0, Math.min(360, h));
+  s = Math.max(0, Math.min(100, s)) / 100;
+  l = Math.max(0, Math.min(100, l)) / 100;
+  let r, g3, b2;
+  if (s === 0) {
+    r = g3 = b2 = l;
+  } else {
+    const hue2rgb = (p2, q4, t2) => {
+      if (t2 < 0)
+        t2 += 1;
+      if (t2 > 1)
+        t2 -= 1;
+      if (t2 < 1 / 6)
+        return p2 + (q4 - p2) * 6 * t2;
+      if (t2 < 1 / 2)
+        return q4;
+      if (t2 < 2 / 3)
+        return p2 + (q4 - p2) * (2 / 3 - t2) * 6;
+      return p2;
+    };
+    const q3 = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q3;
+    r = Math.max(0, Math.min(1, hue2rgb(p, q3, h / 360 + 1 / 3)));
+    g3 = Math.max(0, Math.min(1, hue2rgb(p, q3, h / 360)));
+    b2 = Math.max(0, Math.min(1, hue2rgb(p, q3, h / 360 - 1 / 3)));
+  }
+  const toHex = (value) => {
+    const intValue = Math.round(Math.max(0, Math.min(255, value * 255)));
+    const hex3 = intValue.toString(16);
+    return hex3.padStart(2, "0");
+  };
+  return `#${toHex(r)}${toHex(g3)}${toHex(b2)}`.toUpperCase();
+}
+
+// src/generator/common/color.ts
 function commonGenColorPalette(paletteConfig) {
   const fullPalettesConfig = colorPaletteSchema().parse(paletteConfig ?? []);
   return fullPalettesConfig?.map((paletteConfig2) => {
     if (paletteConfig2.type === "ant-design") {
       if (paletteConfig2.base) {
-        const palette = import_colors.generate(paletteConfig2.base);
+        const palette = import_colors.generate(paletteConfig2.base, ...paletteConfig2.args ?? []);
         return [paletteConfig2.name, { primary: palette[5] ?? "", palette }];
       }
     }
+    if (paletteConfig2.type === "qi-design-system-v0") {
+      if (paletteConfig2.base) {
+        const palette = genQiDesignSystemColorsV0(paletteConfig2.base, ...paletteConfig2.args ?? []);
+        return [paletteConfig2.name, { primary: palette[6] ?? "", palette }];
+      }
+    }
     return [paletteConfig2.name, { primary: "", palette: [] }];
   }) ?? [];
 }
@@ -29429,16 +29548,11 @@ function genColor(colorConfig) {
   const fullPalette = commonGenColorPalette(fullColorConfig.palettes ?? []);
   const fullSemantic = commonGenColorSemantic(fullColorConfig.semantic ?? {});
   return [
-    fullPalette.map(([name, data]) => {
-      return [
-        `--color-${name}: ${data.primary};`,
-        data.palette.map((c, i) => `--color-${name}-${(i + 1) * 100}: ${c};`).join(`
-`)
-      ].join(`
-`);
-    }),
-    fullSemantic.map(([name, value]) => `--color-${name}: ${isColorVariable(value) ? `var(--color-${value});` : value};`).join(`
-`)
+    ...fullPalette.flatMap(([name, data]) => [
+      `--color-${name}: ${data.primary};`,
+      ...data.palette.map((c, i) => `--color-${name}-${(i + 1) * 100}: ${c};`)
+    ]),
+    ...fullSemantic.map(([name, value]) => `--color-${name}: ${isColorVariable(value) ? `var(--color-${value});` : value};`)
   ].join(`
 `);
 }
@@ -29524,8 +29638,46 @@ function genTailwindV4(data, options) {
 
 // src/cli/generate.ts
 var import_promises2 = __toESM(require("node:fs/promises"));
+// src/generator/mantine/index.ts
+function genMantine(data) {
+  const system = designSystemSchema().parse(data);
+  const lightIndex = system.color?.palettes?.findIndex((item) => item.type === "qi-design-system-v0" && (item.args?.[0] ?? "light") === "light") ?? -1;
+  const darkIndex = system.color?.palettes?.findIndex((item) => item.type === "qi-design-system-v0" && (item.args?.[0] ?? "light") === "dark") ?? -1;
+  const lightName = system.color?.palettes?.[lightIndex]?.name;
+  const darkTheme = system.color?.palettes?.[darkIndex]?.name;
+  const themeObject = {
+    colors: genColor2(system.color),
+    primaryColor: system.color?.palettes?.[0]?.name,
+    primaryShade: lightIndex !== -1 && lightIndex < 2 || darkIndex !== -1 && darkIndex < 2 ? 7 : undefined
+  };
+  if (lightName && darkTheme) {
+    return `import { createTheme } from "@mantine/core"
+    
+export const lightTheme = createTheme(${JSON.stringify({ ...themeObject, primaryColor: lightName }, null, 4)})
+
+export const darkTheme = createTheme(${JSON.stringify({ ...themeObject, primaryColor: darkTheme }, null, 4)})
+
+export default lightTheme
+        `;
+  } else {
+    return `import { createTheme } from "@mantine/core"
+
+export default createTheme(${JSON.stringify(themeObject, null, 4)})
+        `;
+  }
+}
+function genColor2(colorConfig) {
+  const fullColorConfig = colorSchema().parse(colorConfig);
+  const fullPalette = commonGenColorPalette(fullColorConfig.palettes ?? []);
+  return fullPalette.reduce((acc, [name, data]) => {
+    acc[name] = data.palette;
+    return acc;
+  }, {});
+}
+
+// src/cli/generate.ts
 async function emitFile(filePath, content) {
-  await import_promises2.default.writeFile(filePath, await formatCode(content)).then(() => {
+  await import_promises2.default.writeFile(filePath, content).then(() => {
     console.log(`✅ Generated at '${filePath}'`);
   }).catch((err) => {
     console.log(`❌ Generate failed at '${filePath}', caused by '${err}'`);
@@ -29542,10 +29694,14 @@ async function generateContent(configPath) {
     return;
   const system = designSystemCliSchema().parse(JSON.parse((await file2.readFile()).toString()) ?? {});
   await file2.close();
-  if (system.output?.["tailwind-v4"]) {
-    const outputPath = system.output["tailwind-v4"];
-    const result = genTailwindV4(system);
-    await emitFile(outputPath, result);
+  for (let output2 of system.output ?? []) {
+    if (output2.type === "tailwind-v4") {
+      const result = await formatCode(genTailwindV4(system));
+      await emitFile(output2.path, result);
+    } else if (output2.type === "mantine") {
+      const result = genMantine(system);
+      await emitFile(output2.path, result);
+    }
   }
 }
 

package/dist/cli/package.json

@@ -1 +1 @@
-{"name":"@qiqi1996/design-system","version":"0.0.1","module":"index.ts","type":"commonjs","scripts":{"dev":"bun run vite","build:schema":"bun run ./src/build-schema.ts","build:cli":"bun build ./src/cli/index.ts --format cjs --target node --banner '#!/usr/bin/env node' --outfile ./dist/cli/main && bun run ./src/build-cli.ts","build:docs":"bun run vite build","build":"del dist && make-dir dist && bun run build:schema && bun run build:cli && bun run build:docs","generate":"bun run src/cli/index.ts"},"files":["./dist"],"bin":{"qi-design-system":"./dist/cli/main"},"devDependencies":{"@types/bun":"latest","@types/lodash":"^4.17.20","@types/node":"^24.8.1","del-cli":"^7.0.0","make-dir-cli":"^4.0.0","prettier-plugin-tailwindcss":"^0.7.1","vite-plugin-pages":"^0.33.1"},"dependencies":{"@ant-design/colors":"^7.2.1","@mantine/core":"^8.3.5","@mantine/hooks":"^8.3.5","@tailwindcss/vite":"^4.1.13","@types/react":"^19.1.10","@types/react-dom":"^19.1.7","@vitejs/plugin-react-swc":"^4.0.0","ahooks":"^3.9.5","classnames":"^2.5.1","globals":"^16.3.0","i18next":"^25.6.0","i18next-browser-languagedetector":"^8.2.0","immer":"^10.2.0","lodash":"^4.17.21","package-directory":"^8.1.0","prettier":"^3.6.2","react":"^19.1.1","react-dom":"^19.1.1","react-i18next":"^16.0.1","react-icons":"^5.5.0","react-json-view-lite":"^2.5.0","react-router-dom":"^7.9.4","save-file":"^2.3.1","tailwindcss":"^4.1.13","ts-essentials":"^10.1.1","typescript":"~5.8.3","vite":"^7.1.2","zod":"^4.1.12"}}
+{"name":"@qiqi1996/design-system","description":"Describe the design system once and output multiple framework configs (Tailwind, Chakra UI, Ant Design, etc.) | 描述一次设计系统, 输出多套框架配置。","version":"0.0.3","module":"index.ts","type":"commonjs","publishConfig":{"access":"public"},"license":"MIT","repository":{"type":"git","url":"https://github.com/qiqi-1996/qi-design-system"},"scripts":{"dev":"bun run vite","build:schema":"bun run ./src/build-schema.ts","build:cli":"bun build ./src/cli/index.ts --format cjs --target node --banner '#!/usr/bin/env node' --outfile ./dist/cli/main && bun run ./src/build-cli.ts","build:docs":"bun run vite build","build":"del dist && make-dir dist && bun run build:schema && bun run build:cli && bun run build:docs","generate":"bun run src/cli/index.ts"},"files":["./dist/cli","./dist/*.json"],"bin":{"qi-design-system":"./dist/cli/main"},"devDependencies":{"@mdx-js/react":"^3.1.1","@mdx-js/rollup":"^3.1.1","@types/bun":"latest","@types/lodash":"^4.17.20","@types/mdx":"^2.0.13","@types/node":"^24.8.1","del-cli":"^7.0.0","make-dir-cli":"^4.0.0","prettier-plugin-tailwindcss":"^0.7.1","vite-plugin-pages":"^0.33.1"},"dependencies":{"@ant-design/colors":"^7.2.1","@mantine/core":"^8.3.5","@mantine/hooks":"^8.3.5","@tailwindcss/vite":"^4.1.13","@types/react":"^19.1.10","@types/react-dom":"^19.1.7","@vitejs/plugin-react-swc":"^4.0.0","ahooks":"^3.9.5","classnames":"^2.5.1","globals":"^16.3.0","i18next":"^25.6.0","i18next-browser-languagedetector":"^8.2.0","immer":"^10.2.0","lodash":"^4.17.21","package-directory":"^8.1.0","prettier":"^3.6.2","react":"^19.1.1","react-dom":"^19.1.1","react-i18next":"^16.0.1","react-icons":"^5.5.0","react-json-view-lite":"^2.5.0","react-router-dom":"^7.9.4","save-file":"^2.3.1","tailwindcss":"^4.1.13","ts-essentials":"^10.1.1","typescript":"~5.8.3","vite":"^7.1.2","zod":"^4.1.12"}}

package/dist/schema-en.json

@@ -1 +1 @@
-{"$schema":"https://json-schema.org/draft/2020-12/schema","type":"object","properties":{"$schema":{"type":"string"},"output":{"title":"输出配置","type":"object","propertyNames":{"anyOf":[{"type":"string","const":"tailwind-v4"}]},"additionalProperties":{"title":"文件输出位置","type":"string"}},"color":{"title":"Define Color System","default":{"palettes":[]},"type":"object","properties":{"palettes":{"title":"Define Color System","type":"array","items":{"default":{"type":"ant-design","name":"","base":"#212121","args":[]},"anyOf":[{"type":"object","properties":{"type":{"title":"schema.color.type.title","description":"schema.color.type.desc","default":"ant-design","anyOf":[{"type":"string","const":"ant-design"}]},"name":{"title":"Color Name","description":"Supports input of any CSS color value, but not all frameworks may support it. For example: Tailwind v3 does not support oklch","type":"string"},"base":{"title":"Base Color","description":"Supports input of any CSS color value, but not all frameworks may support it. For example: Tailwind v3 does not support oklch","default":"#212121","type":"string"},"args":{"title":"Color Palette Generation Algorithm Parameter Tuple","default":[],"type":"array","items":{}}},"required":["name"]}]}},"semantic":{"title":"common.semantic","description":"schema.color.semantic.desc","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"object","properties":{"default":{"title":"配色模式：默认","default":{"type":"chakra","default":"100","solid":"100","contrast":"100","fg":"200","muted":"300","subtle":"400","emphasized":"500"},"anyOf":[{"type":"object","properties":{"type":{"type":"string","const":"chakra"},"default":{"title":"The bold fill color of the color.","default":"600","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"solid":{"title":"The bold fill color of the color.","default":"600","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"contrast":{"title":"The text color that goes on solid color.","default":"100","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"fg":{"title":"The foreground color used for text, icons, etc.","default":"200","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"muted":{"title":"The muted color of the color.","default":"300","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"subtle":{"title":"The subtle color of the color.","default":"400","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"emphasized":{"title":"The emphasized version of the subtle color.","default":"500","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]}},"required":["type"]},{"type":"object","properties":{"type":{"type":"string","const":"custom"},"default":{"anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]}},"required":["type"],"additionalProperties":{}}]},"dark":{"title":"配色模式：暗黑模式","default":{"type":"chakra","default":"600","solid":"600","contrast":"100","fg":"200","muted":"300","subtle":"400","emphasized":"500"},"anyOf":[{"type":"object","properties":{"type":{"type":"string","const":"chakra"},"default":{"title":"The bold fill color of the color.","default":"600","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"solid":{"title":"The bold fill color of the color.","default":"600","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"contrast":{"title":"The text color that goes on solid color.","default":"100","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"fg":{"title":"The foreground color used for text, icons, etc.","default":"200","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"muted":{"title":"The muted color of the color.","default":"300","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"subtle":{"title":"The subtle color of the color.","default":"400","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"emphasized":{"title":"The emphasized version of the subtle color.","default":"500","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]}},"required":["type"]},{"type":"object","properties":{"type":{"type":"string","const":"custom"},"default":{"anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]}},"required":["type"],"additionalProperties":{}}]}}}}}},"space":{"title":"schema.space.title","description":"schema.space.desc","default":{"base":8,"unit":"px"},"type":"object","properties":{"base":{"title":"schema.space.title","description":"schema.space.base.desc","default":8,"type":"number"},"unit":{"title":"schema.space.unit.title","description":"schema.space.unit.desc","default":"px","type":"string"}}},"font":{"title":"字体字号","type":"object","properties":{"size":{"title":"schema.font.size.title","default":{"semantic":{}},"type":"object","properties":{"semantic":{"title":"common.semantic","desc":"schema.font.size.semantic-desc","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}}}},"lineHeight":{"title":"schema.font.line-height.title","default":{"semantic":{},"auto":{"value":4,"range":[0,3]}},"type":"object","properties":{"semantic":{"title":"common.semantic","description":"schema.font.line-height.semantic-desc","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"auto":{"title":"schema.font.line-height.auto.title","type":"object","properties":{"value":{"title":"schema.font.line-height.auto.value","description":"schema.font.line-height.auto.value-desc","type":"number"},"range":{"title":"schema.font.line-height.auto.range","description":"schema.font.line-height.auto.range-desc","default":[0,3],"type":"array","prefixItems":[{"type":"number"},{"type":"number"}]}}}}},"weight":{"title":"schema.font.weight.title","default":{"semantic":{}},"type":"object","properties":{"semantic":{"title":"common.semantic","description":"schema.font.weight.semantic-desc","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":""}]}}}},"disableDefault":{"title":"common.disable-default","description":"common.disable-default-desc","default":true,"type":"boolean"}}}}}
+{"$schema":"https://json-schema.org/draft/2020-12/schema","type":"object","properties":{"$schema":{"type":"string"},"output":{"title":"输出配置","type":"array","items":{"type":"object","properties":{"type":{"title":"输出类型","description":"例如：./src","anyOf":[{"type":"string","const":"tailwind-v4"},{"type":"string","const":"mantine"}]},"path":{"title":"输出位置","description":"例如：./src/theme.css","type":"string"}},"required":["type","path"]}},"color":{"title":"Define Color System","default":{"palettes":[]},"type":"object","properties":{"palettes":{"title":"Define Color System","description":"Note the order: the first color will be used as the primary color.","type":"array","items":{"default":{"type":"ant-design","name":"","base":"#212121","args":[]},"anyOf":[{"type":"object","properties":{"type":{"title":"Color Harmony","description":"The method used to generate the color palette","default":"qi-design-system-v0","anyOf":[{"type":"string","const":"ant-design"},{"type":"string","const":"qi-design-system-v0"}]},"name":{"title":"Color Name","description":"Supports any CSS color value input, but not all frameworks may support it. For example: Tailwind v3 does not support oklch","type":"string"},"base":{"title":"Base Color","description":"Supports any CSS color value input, but not all frameworks may support it. For example: Tailwind v3 does not support oklch","default":"#212121","type":"string"},"args":{"title":"Color Palette Generation Algorithm Parameter Tuple","default":[],"type":"array","items":{}}},"required":["name"]}]}},"semantic":{"title":"Semantic","description":"Define color semantic names and color relationships (e.g.: The default brand color is the 600th color of the primary palette (bg-brand-solid), { brand: { default: { solid: \"primary-600\" } } })","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"object","properties":{"default":{"title":"配色模式：默认","default":{"type":"chakra","default":"100","solid":"100","contrast":"100","fg":"200","muted":"300","subtle":"400","emphasized":"500"},"anyOf":[{"type":"object","properties":{"type":{"type":"string","const":"chakra"},"default":{"title":"The bold fill color of the color.","default":"600","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"solid":{"title":"The bold fill color of the color.","default":"600","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"contrast":{"title":"The text color that goes on solid color.","default":"100","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"fg":{"title":"The foreground color used for text, icons, etc.","default":"200","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"muted":{"title":"The muted color of the color.","default":"300","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"subtle":{"title":"The subtle color of the color.","default":"400","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"emphasized":{"title":"The emphasized version of the subtle color.","default":"500","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]}},"required":["type"]},{"type":"object","properties":{"type":{"type":"string","const":"custom"},"default":{"anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]}},"required":["type"],"additionalProperties":{}}]},"dark":{"title":"配色模式：暗黑模式","default":{"type":"chakra","default":"600","solid":"600","contrast":"100","fg":"200","muted":"300","subtle":"400","emphasized":"500"},"anyOf":[{"type":"object","properties":{"type":{"type":"string","const":"chakra"},"default":{"title":"The bold fill color of the color.","default":"600","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"solid":{"title":"The bold fill color of the color.","default":"600","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"contrast":{"title":"The text color that goes on solid color.","default":"100","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"fg":{"title":"The foreground color used for text, icons, etc.","default":"200","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"muted":{"title":"The muted color of the color.","default":"300","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"subtle":{"title":"The subtle color of the color.","default":"400","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"emphasized":{"title":"The emphasized version of the subtle color.","default":"500","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]}},"required":["type"]},{"type":"object","properties":{"type":{"type":"string","const":"custom"},"default":{"anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]}},"required":["type"],"additionalProperties":{}}]}}}}}},"space":{"title":"Define Space System","description":"Establish an ordered visual hierarchy and information association in the interface by defining unified spacing rules.","default":{"base":8,"unit":"px"},"type":"object","properties":{"base":{"title":"Define Space System","description":"Example: 4, 8, 10, etc.","default":8,"type":"number"},"unit":{"title":"Value Unit","description":"Example: px, rem, etc.","default":"px","type":"string"}}},"font":{"title":"字体字号","type":"object","properties":{"size":{"title":"Font Size","default":{"semantic":{}},"type":"object","properties":{"semantic":{"title":"Semantic","desc":"Semantically name font sizes. Example: footnote=12px, text=14px, title=24px, etc.","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}}}},"lineHeight":{"title":"Line Height","default":{"semantic":{},"auto":{"value":4,"range":[0,3]}},"type":"object","properties":{"semantic":{"title":"Semantic","description":"It is recommended to keep consistency with font size semantics.\nExample: If the font size definition includes { \"title\": \"24px\" },\nthe corresponding line height semantic definition should be { \"title-xs\": \"24px\", \"title-sm\": \"28px\", \"title-md\": \"32px\" }","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"auto":{"title":"Automatically Generate Line Height Based on Font Size","type":"object","properties":{"value":{"title":"Incremental Value","description":"Example: For a base font size of 14px and an incremental value of 4, the line heights generated will be 14px, 18px, 22px","type":"number"},"range":{"title":"Generation Range","description":"Example: [0, 2] means based on the font size (14px) and incremental value (4), generate line heights from 14 + (4 * 0) to 14 + (4 * 2), and match the semantic names in sequence: text-xs: 14px; text-sm: 18px; text-md: 22px;","default":[0,3],"type":"array","prefixItems":[{"type":"number"},{"type":"number"}]}}}}},"weight":{"title":"Font Weight","default":{"semantic":{}},"type":"object","properties":{"semantic":{"title":"Semantic","description":"It is recommended to keep consistency with font size semantics.\nExample: If the font size definition includes { \"text\": \"14px\", \"title\": \"24px\" },\nthe corresponding font weight semantic definition should be { \"text\": \"400\", \"title\": \"700\" }","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":""}]}}}},"disableDefault":{"title":"Disable Default Styles","description":"Example: Remove default theme definitions like --text-md in Tailwind","default":true,"type":"boolean"}}}}}

package/dist/schema-zh.json

@@ -1 +1 @@
-{"$schema":"https://json-schema.org/draft/2020-12/schema","type":"object","properties":{"$schema":{"type":"string"},"output":{"title":"输出配置","type":"object","propertyNames":{"anyOf":[{"type":"string","const":"tailwind-v4"}]},"additionalProperties":{"title":"文件输出位置","type":"string"}},"color":{"title":"定义颜色系统","default":{"palettes":[]},"type":"object","properties":{"palettes":{"title":"定义颜色系统","type":"array","items":{"default":{"type":"ant-design","name":"","base":"#212121","args":[]},"anyOf":[{"type":"object","properties":{"type":{"title":"色彩调和","description":"使用何种方法生成色板","default":"ant-design","anyOf":[{"type":"string","const":"ant-design"}]},"name":{"title":"颜色名称","description":"支持输入任意 CSS 颜色值，但未必所有框架均能支持，比如：Tailwind v3 不支持 oklch","type":"string"},"base":{"title":"基本颜色","description":"支持输入任意 CSS 颜色值，但未必所有框架均能支持，比如：Tailwind v3 不支持 oklch","default":"#212121","type":"string"},"args":{"title":"色板生成算法参数元组","default":[],"type":"array","items":{}}},"required":["name"]}]}},"semantic":{"title":"语义化","description":"定义颜色语义名称和颜色关系（如：品牌色默认颜色为主色板的600号色（bg-brand-solid），{ brand: { default: { solid: \"primary-600\" } } }）","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"object","properties":{"default":{"title":"配色模式：默认","default":{"type":"chakra","default":"100","solid":"100","contrast":"100","fg":"200","muted":"300","subtle":"400","emphasized":"500"},"anyOf":[{"type":"object","properties":{"type":{"type":"string","const":"chakra"},"default":{"title":"The bold fill color of the color.","default":"600","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"solid":{"title":"The bold fill color of the color.","default":"600","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"contrast":{"title":"The text color that goes on solid color.","default":"100","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"fg":{"title":"The foreground color used for text, icons, etc.","default":"200","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"muted":{"title":"The muted color of the color.","default":"300","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"subtle":{"title":"The subtle color of the color.","default":"400","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"emphasized":{"title":"The emphasized version of the subtle color.","default":"500","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]}},"required":["type"]},{"type":"object","properties":{"type":{"type":"string","const":"custom"},"default":{"anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]}},"required":["type"],"additionalProperties":{}}]},"dark":{"title":"配色模式：暗黑模式","default":{"type":"chakra","default":"600","solid":"600","contrast":"100","fg":"200","muted":"300","subtle":"400","emphasized":"500"},"anyOf":[{"type":"object","properties":{"type":{"type":"string","const":"chakra"},"default":{"title":"The bold fill color of the color.","default":"600","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"solid":{"title":"The bold fill color of the color.","default":"600","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"contrast":{"title":"The text color that goes on solid color.","default":"100","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"fg":{"title":"The foreground color used for text, icons, etc.","default":"200","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"muted":{"title":"The muted color of the color.","default":"300","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"subtle":{"title":"The subtle color of the color.","default":"400","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"emphasized":{"title":"The emphasized version of the subtle color.","default":"500","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]}},"required":["type"]},{"type":"object","properties":{"type":{"type":"string","const":"custom"},"default":{"anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]}},"required":["type"],"additionalProperties":{}}]}}}}}},"space":{"title":"定义空间系统","description":"通过定义统一的间距规则，在界面中建立有序的视觉层次与信息关联。","default":{"base":8,"unit":"px"},"type":"object","properties":{"base":{"title":"定义空间系统","description":"例如：4、8、10 等。","default":8,"type":"number"},"unit":{"title":"数值单位","description":"例如：px, rem 等。","default":"px","type":"string"}}},"font":{"title":"字体字号","type":"object","properties":{"size":{"title":"字号","default":{"semantic":{}},"type":"object","properties":{"semantic":{"title":"语义化","desc":"为字号进行语义化命名，例如：footnote=12px, text=14px, title=24px, etc.","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}}}},"lineHeight":{"title":"行高","default":{"semantic":{},"auto":{"value":4,"range":[0,3]}},"type":"object","properties":{"semantic":{"title":"语义化","description":"推荐和字号语义保持一致，\n例如：字号定义中有 { \"title\": \"24px\" }，\n则对应的行高语义定义应该为 { \"title-xs\": \"24px\", \"title-sm\": \"28px\", \"title-md\": \"32px\" }","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"auto":{"title":"根据字号自动生成行高","type":"object","properties":{"value":{"title":"递增数值","description":"例如：基础字号 14px，递增数值 4 则行高会生成 14px、18px、22px","type":"number"},"range":{"title":"生成范围","description":"例如：[0, 2] 则表示基于字号（14px）和递增数值（4），生成从 14 + (4 * 0) 到 14 + (4 * 2) 的行高，并依次匹配语义名称：text-xs: 14px; text-sm: 18px; text-md: 22px;","default":[0,3],"type":"array","prefixItems":[{"type":"number"},{"type":"number"}]}}}}},"weight":{"title":"字重","default":{"semantic":{}},"type":"object","properties":{"semantic":{"title":"语义化","description":"推荐和字号语义保持一致，\n例如：字号定义中有 { \"text\": \"14px\", \"title\": \"24px\" }，\n则对应的字重语义定义应该为 { \"text\": \"400\", \"title\": \"700\" }","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":""}]}}}},"disableDefault":{"title":"禁用默认样式","description":"例如：移除 tailwind 中默认的 --text-md 等主题定义","default":true,"type":"boolean"}}}}}
+{"$schema":"https://json-schema.org/draft/2020-12/schema","type":"object","properties":{"$schema":{"type":"string"},"output":{"title":"输出配置","type":"array","items":{"type":"object","properties":{"type":{"title":"输出类型","description":"例如：./src","anyOf":[{"type":"string","const":"tailwind-v4"},{"type":"string","const":"mantine"}]},"path":{"title":"输出位置","description":"例如：./src/theme.css","type":"string"}},"required":["type","path"]}},"color":{"title":"定义颜色系统","default":{"palettes":[]},"type":"object","properties":{"palettes":{"title":"定义颜色系统","description":"注意顺序，将使用第一个颜色作为主色","type":"array","items":{"default":{"type":"ant-design","name":"","base":"#212121","args":[]},"anyOf":[{"type":"object","properties":{"type":{"title":"色彩调和","description":"使用何种方法生成色板","default":"qi-design-system-v0","anyOf":[{"type":"string","const":"ant-design"},{"type":"string","const":"qi-design-system-v0"}]},"name":{"title":"颜色名称","description":"支持输入任意 CSS 颜色值，但未必所有框架均能支持，比如：Tailwind v3 不支持 oklch","type":"string"},"base":{"title":"基本颜色","description":"支持输入任意 CSS 颜色值，但未必所有框架均能支持，比如：Tailwind v3 不支持 oklch","default":"#212121","type":"string"},"args":{"title":"色板生成算法参数元组","default":[],"type":"array","items":{}}},"required":["name"]}]}},"semantic":{"title":"语义化","description":"定义颜色语义名称和颜色关系（如：品牌色默认颜色为主色板的600号色（bg-brand-solid），{ brand: { default: { solid: \"primary-600\" } } }）","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"object","properties":{"default":{"title":"配色模式：默认","default":{"type":"chakra","default":"100","solid":"100","contrast":"100","fg":"200","muted":"300","subtle":"400","emphasized":"500"},"anyOf":[{"type":"object","properties":{"type":{"type":"string","const":"chakra"},"default":{"title":"The bold fill color of the color.","default":"600","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"solid":{"title":"The bold fill color of the color.","default":"600","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"contrast":{"title":"The text color that goes on solid color.","default":"100","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"fg":{"title":"The foreground color used for text, icons, etc.","default":"200","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"muted":{"title":"The muted color of the color.","default":"300","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"subtle":{"title":"The subtle color of the color.","default":"400","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"emphasized":{"title":"The emphasized version of the subtle color.","default":"500","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]}},"required":["type"]},{"type":"object","properties":{"type":{"type":"string","const":"custom"},"default":{"anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]}},"required":["type"],"additionalProperties":{}}]},"dark":{"title":"配色模式：暗黑模式","default":{"type":"chakra","default":"600","solid":"600","contrast":"100","fg":"200","muted":"300","subtle":"400","emphasized":"500"},"anyOf":[{"type":"object","properties":{"type":{"type":"string","const":"chakra"},"default":{"title":"The bold fill color of the color.","default":"600","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"solid":{"title":"The bold fill color of the color.","default":"600","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"contrast":{"title":"The text color that goes on solid color.","default":"100","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"fg":{"title":"The foreground color used for text, icons, etc.","default":"200","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"muted":{"title":"The muted color of the color.","default":"300","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"subtle":{"title":"The subtle color of the color.","default":"400","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]},"emphasized":{"title":"The emphasized version of the subtle color.","default":"500","anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]}},"required":["type"]},{"type":"object","properties":{"type":{"type":"string","const":"custom"},"default":{"anyOf":[{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":"1000"}]},{"type":"string"}]}},"required":["type"],"additionalProperties":{}}]}}}}}},"space":{"title":"定义空间系统","description":"通过定义统一的间距规则，在界面中建立有序的视觉层次与信息关联。","default":{"base":8,"unit":"px"},"type":"object","properties":{"base":{"title":"定义空间系统","description":"例如：4、8、10 等。","default":8,"type":"number"},"unit":{"title":"数值单位","description":"例如：px, rem 等。","default":"px","type":"string"}}},"font":{"title":"字体字号","type":"object","properties":{"size":{"title":"字号","default":{"semantic":{}},"type":"object","properties":{"semantic":{"title":"语义化","desc":"为字号进行语义化命名，例如：footnote=12px, text=14px, title=24px, etc.","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}}}},"lineHeight":{"title":"行高","default":{"semantic":{},"auto":{"value":4,"range":[0,3]}},"type":"object","properties":{"semantic":{"title":"语义化","description":"推荐和字号语义保持一致，\n例如：字号定义中有 { \"title\": \"24px\" }，\n则对应的行高语义定义应该为 { \"title-xs\": \"24px\", \"title-sm\": \"28px\", \"title-md\": \"32px\" }","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"type":"string"}},"auto":{"title":"根据字号自动生成行高","type":"object","properties":{"value":{"title":"递增数值","description":"例如：基础字号 14px，递增数值 4 则行高会生成 14px、18px、22px","type":"number"},"range":{"title":"生成范围","description":"例如：[0, 2] 则表示基于字号（14px）和递增数值（4），生成从 14 + (4 * 0) 到 14 + (4 * 2) 的行高，并依次匹配语义名称：text-xs: 14px; text-sm: 18px; text-md: 22px;","default":[0,3],"type":"array","prefixItems":[{"type":"number"},{"type":"number"}]}}}}},"weight":{"title":"字重","default":{"semantic":{}},"type":"object","properties":{"semantic":{"title":"语义化","description":"推荐和字号语义保持一致，\n例如：字号定义中有 { \"text\": \"14px\", \"title\": \"24px\" }，\n则对应的字重语义定义应该为 { \"text\": \"400\", \"title\": \"700\" }","type":"object","propertyNames":{"type":"string"},"additionalProperties":{"anyOf":[{"type":"string","const":"100"},{"type":"string","const":"200"},{"type":"string","const":"300"},{"type":"string","const":"400"},{"type":"string","const":"500"},{"type":"string","const":"600"},{"type":"string","const":"700"},{"type":"string","const":"800"},{"type":"string","const":"900"},{"type":"string","const":""}]}}}},"disableDefault":{"title":"禁用默认样式","description":"例如：移除 tailwind 中默认的 --text-md 等主题定义","default":true,"type":"boolean"}}}}}

package/package.json

@@ -1,6 +1,7 @@
 {
     "name": "@qiqi1996/design-system",
-    "version": "0.0.2",
+    "description": "Describe the design system once and output multiple framework configs (Tailwind, Chakra UI, Ant Design, etc.) | 描述一次设计系统, 输出多套框架配置。",
+    "version": "0.0.3",
     "module": "index.ts",
     "type": "module",
     "publishConfig": {
@@ -27,8 +28,11 @@
         "qi-design-system": "./dist/cli/main"
     },
     "devDependencies": {
+        "@mdx-js/react": "^3.1.1",
+        "@mdx-js/rollup": "^3.1.1",
         "@types/bun": "latest",
         "@types/lodash": "^4.17.20",
+        "@types/mdx": "^2.0.13",
         "@types/node": "^24.8.1",
         "del-cli": "^7.0.0",
         "make-dir-cli": "^4.0.0",

package/README.zh-CN.md

@@ -1,77 +0,0 @@
-# Qi Design System
-
-使用统一的配置文件去描述设计系统, 然后自动生成到 Tailwind、Chakra UI 等等 UI 框架的配置。
-
-Languages: [中文](./README.zh-CN.md) | [English](./README.md)
-
-## 快速上手
-
-1. 安装
-   - `npm install -D @qiqi1996/design-system`
-   - `pnpm install -D @qiqi1996/design-system`
-   - `bun add -D @qiqi1996/design-system`
-2. 创建 `design-system.json`
-   - 注意：
-   - 你可以将 `$schema` 改为 `schema-zh.json` 或 `schema-en.json` 以查看多语言的 JSON 字段注释。（目前支持：中文、英语）
-   - 以下示例为：定义了 8px 的空间系统，和基于 Ant Design 的色板算法生成 品牌色（克莱因蓝） 色板，并将此色板应用到了 Chakra UI 的语义化命名。此设计系统配置将生成 Tailwind V4 版本的配置到 `./src-doc/src/theme.css` 文件中。
-```json
-{
-    "$schema": "./node_modules/@qiqi1996/design-system/schema-zh.json",
-    "output": {
-        "tailwind-v4": "./src-doc/src/theme.css"
-    },
-    "space": {
-        "base": 8,
-        "unit": "px"
-    },
-    "color": {
-        "palettes": [
-            {
-                "type": "monochromatic",
-                "name": "brand",
-                "base": "#002FA7"
-            }
-        ],
-        "semantic": {
-            "primary": {
-                "default": {
-                    "solid": "brand-600"
-                }
-            }
-        }
-    }
-}
-```
-3. 执行生成：qi-design-system --config /path/to/your/design-system.json
-
-## 特性和计划
-
-### 颜色系统定义
-
-- [ ] 颜色系统
-  - [ ] 单色色板生成
-    - [x] Ant Design Color
-    - [ ] Mantine Colors Generator
-  - [ ] 三元群配色方案
-  - [x] 语义化（基于 Chakra UI Semantic 定义）
-  - [ ] 暗黑模式
-- [ ] 字体系统
-  - [x] 字号（仅语义化定义）
-  - [x] 行高
-    - [x] 线性自动生成
-  - [x] 字重（仅语义化定义）
-- [x] 空间系统 
-- [ ] 圆角
-- [ ] 阴影
-
-### 内置配置生成器
-
-- [x] Talwind V4
-- [ ] Talwind V3
-- [ ] Ant Design
-- [ ] Chakra UI
-- [ ] Mantine
-
-## 贡献
-
-* 需要 Bun 运行环境（v1.3.0+）