@ibiz-template/vue3-components 0.7.19 → 0.7.21

package/es/common/custom-theme/custom-theme-model.mjs

@@ -0,0 +1,840 @@
+"use strict";
+const predefineThemeVars = [
+  {
+    caption: "\u5B57\u4F53",
+    labelLang: "typeface",
+    vars: [
+      {
+        label: "\u5B57\u53F7",
+        value: "--ibiz-font-size-regular",
+        labelLang: "fontSize",
+        unit: "px",
+        type: "size",
+        kindVars: {
+          "--ibiz-font-size-small": -2,
+          "--ibiz-font-size-header-6": 2,
+          "--ibiz-font-size-header-5": 4,
+          "--ibiz-font-size-header-4": 6,
+          "--ibiz-font-size-header-3": 8,
+          "--ibiz-font-size-header-2": 10,
+          "--ibiz-font-size-header-1": 12
+        }
+      },
+      {
+        label: "\u5B57\u91CD",
+        value: "--ibiz-font-weight-regular",
+        labelLang: "fontWeight",
+        type: "size",
+        kindVars: {
+          "--ibiz-font-weight-light": -200,
+          "--ibiz-font-weight-bold": 200
+        }
+      },
+      {
+        label: "\u5706\u89D2",
+        value: "--ibiz-border-radius-medium",
+        labelLang: "borderRadius",
+        unit: "px",
+        type: "size",
+        kindVars: {
+          "--ibiz-border-radius-extra-small": -6,
+          "--ibiz-border-radius-small": -4,
+          "--ibiz-border-radius-large": 4
+        }
+      },
+      {
+        label: "\u56FE\u6807\u5C3A\u5BF8",
+        value: "--ibiz-width-icon-medium",
+        labelLang: "widthIcon",
+        unit: "px",
+        type: "size",
+        kindVars: {
+          "--ibiz-width-icon-extra-small": -16,
+          "--ibiz-width-icon-small": -4,
+          "--ibiz-width-icon-large": 4,
+          "--ibiz-width-icon-extra-large": 8
+        }
+      }
+    ]
+  },
+  {
+    caption: "\u989C\u8272",
+    labelLang: "color",
+    children: [
+      {
+        caption: "\u4E3B\u8981\u989C\u8272",
+        labelLang: "primaryColor",
+        vars: [
+          {
+            label: "\u4E3B\u8981\u989C\u8272",
+            description: "\u4E3B\u8981\u989C\u8272,\u4EC5\u5728\u9700\u8981\u975E\u5E38\u5F3A\u8C03\u7684\u60C5\u51B5\u4E0B\u4F7F\u7528",
+            labelLang: "primaryColor",
+            descLang: "primaryColorDesc",
+            value: "--ibiz-color-primary"
+          },
+          {
+            label: "\u4E3B\u8981\u6587\u672C\u989C\u8272",
+            description: "\u4E3B\u8981\u989C\u8272\u6587\u5B57\u8272\uFF0C\u548C\u80CC\u666F\u8272\u5F62\u6210\u5BF9\u6BD4",
+            labelLang: "primaryTextColor",
+            descLang: "primaryTextColorDesc",
+            value: "--ibiz-color-primary-text"
+          },
+          {
+            label: "\u4E3B\u8981\u60AC\u6D6E\u989C\u8272",
+            description: "\u4E3B\u8981\u989C\u8272\u60AC\u6D6E\u6001",
+            labelLang: "primaryHoverColor",
+            descLang: "primaryHoverColorDesc",
+            value: "--ibiz-color-primary-hover"
+          },
+          {
+            label: "\u4E3B\u8981\u60AC\u6D6E\u6587\u672C\u989C\u8272",
+            description: "\u4E3B\u8981\u989C\u8272\u60AC\u6D6E\u6001\u6587\u5B57\u8272\uFF0C\u548C\u80CC\u666F\u8272\u5F62\u6210\u5BF9\u6BD4",
+            labelLang: "primaryHoverTextColor",
+            descLang: "primaryHoverTextColorDesc",
+            value: "--ibiz-color-primary-hover-text"
+          },
+          {
+            label: "\u4E3B\u8981\u6FC0\u6D3B\u989C\u8272",
+            description: "\u4E3B\u8981\u989C\u8272\u6FC0\u6D3B\u6001",
+            labelLang: "primaryActiveColor",
+            descLang: "primaryActiveColorDesc",
+            value: "--ibiz-color-primary-active"
+          },
+          {
+            label: "\u4E3B\u8981\u6FC0\u6D3B\u6587\u672C\u989C\u8272",
+            description: "\u4E3B\u8981\u989C\u8272\u6FC0\u6D3B\u6001\u6587\u5B57\u8272\uFF0C\u548C\u80CC\u666F\u8272\u5F62\u6210\u5BF9\u6BD4",
+            labelLang: "primaryActiveTextColor",
+            descLang: "primaryActiveTextColorDesc",
+            value: "--ibiz-color-primary-active-text"
+          },
+          {
+            label: "\u4E3B\u8981\u7981\u7528\u989C\u8272",
+            description: "\u4E3B\u8981\u989C\u8272\u7981\u7528\u6001",
+            labelLang: "primaryDisabledColor",
+            descLang: "primaryDisabledColorDesc",
+            value: "--ibiz-color-primary-disabled"
+          },
+          {
+            label: "\u4E3B\u8981\u7981\u7528\u6587\u672C\u989C\u8272",
+            description: "\u4E3B\u8981\u989C\u8272\u7981\u7528\u6001\u6587\u5B57\u8272\uFF0C\u548C\u80CC\u666F\u8272\u5F62\u6210\u5BF9\u6BD4",
+            labelLang: "primaryDisabledTextColor",
+            descLang: "primaryDisabledTextColorDesc",
+            value: "--ibiz-color-primary-disabled-text"
+          },
+          {
+            label: "\u4E3B\u8981\u6D45\u7248\u989C\u8272",
+            description: "\u6D45\u7248\u4E3B\u8981\u989C\u8272\uFF08\u591A\u7528\u4E8E\u80CC\u666F\uFF09\u3002\u4EC5\u5728\u9700\u8981\u975E\u5E38\u5F3A\u8C03\u7684\u60C5\u51B5\u4E0B\u4F7F\u7528",
+            labelLang: "primaryLightDefaultColor",
+            descLang: "primaryLightDefaultColorDesc",
+            value: "--ibiz-color-primary-light-default"
+          },
+          {
+            label: "\u4E3B\u8981\u6D45\u7248\u60AC\u6D6E\u8272",
+            description: "\u6D45\u7248\u4E3B\u8981\u989C\u8272\u60AC\u6D6E\u6001",
+            labelLang: "primaryLightHoverColor",
+            descLang: "primaryLightHoverColorDesc",
+            value: "--ibiz-color-primary-light-hover"
+          },
+          {
+            label: "\u4E3B\u8981\u6D45\u7248\u6FC0\u6D3B\u8272",
+            description: "\u6D45\u7248\u4E3B\u8981\u989C\u8272\u6FC0\u6D3B\u6001",
+            labelLang: "primaryLightActiveColor",
+            descLang: "primaryLightActiveColorDesc",
+            value: "--ibiz-color-primary-light-active"
+          }
+        ]
+      },
+      // {
+      //   caption: '次要颜色',
+      //   vars: [
+      //     {
+      //       label: '次要颜色',
+      //       description: '次要颜色。强调作用次于主要颜色，但仍然具有强调作用',
+      //       value: '--ibiz-color-secondary',
+      //     },
+      //     {
+      //       label: '次要文本颜色',
+      //       description: '次要颜色文字色，和背景色形成对比',
+      //       value: '--ibiz-color-secondary-text',
+      //     },
+      //     {
+      //       label: '次要悬浮颜色',
+      //       description: '次要颜色悬浮态',
+      //       value: '--ibiz-color-secondary-hover',
+      //     },
+      //     {
+      //       label: '次要悬浮文本色',
+      //       description: '次要颜色悬浮态文字色，和背景色形成对比',
+      //       value: '--ibiz-color-secondary-hover-text',
+      //     },
+      //     {
+      //       label: '次要激活颜色',
+      //       description: '次要颜色激活态',
+      //       value: '--ibiz-color-secondary-active',
+      //     },
+      //     {
+      //       label: '次要激活文本色',
+      //       description: '次要颜色激活态文字色，和背景色形成对比',
+      //       value: '--ibiz-color-secondary-active-text',
+      //     },
+      //     {
+      //       label: '次要禁用颜色',
+      //       description: '次要颜色禁用态',
+      //       value: '--ibiz-color-secondary-disabled',
+      //     },
+      //     {
+      //       label: '次要禁用文本颜色',
+      //       description: '次要颜色禁用态文字色，和背景色形成对比',
+      //       value: '--ibiz-color-secondary-disabled-text',
+      //     },
+      //     {
+      //       label: '次要浅版颜色',
+      //       description: '浅版次要颜色（多用于背景）。仅在需要非常强调的情况下使用',
+      //       value: '--ibiz-color-secondary-light-default',
+      //     },
+      //     {
+      //       label: '次要浅版悬浮色',
+      //       description: '浅版次要颜色悬浮态',
+      //       value: '--ibiz-color-secondary-light-hover',
+      //     },
+      //     {
+      //       label: '次要浅版激活色',
+      //       description: '浅版次要颜色激活态',
+      //       value: '--ibiz-color-secondary-light-active',
+      //     },
+      //   ],
+      // },
+      // {
+      //   caption: '第三颜色',
+      //   vars: [
+      //     {
+      //       label: '第三颜色',
+      //       description: '第三颜色，可以在页面上多次使用',
+      //       value: '--ibiz-color-tertiary',
+      //     },
+      //     {
+      //       label: '第三文本色',
+      //       description: '第三颜色文字色，和背景色形成对比',
+      //       value: '--ibiz-color-tertiary-text',
+      //     },
+      //     {
+      //       label: '第三悬浮色',
+      //       description: '第三颜色悬浮态',
+      //       value: '--ibiz-color-tertiary-hover',
+      //     },
+      //     {
+      //       label: '第三悬浮文本色',
+      //       description: '第三颜色悬浮态文字色，和背景色形成对比',
+      //       value: '--ibiz-color-tertiary-hover-text',
+      //     },
+      //     {
+      //       label: '第三激活色',
+      //       description: '第三颜色激活态',
+      //       value: '--ibiz-color-tertiary-active',
+      //     },
+      //     {
+      //       label: '第三激活文本色',
+      //       description: '第三颜色激活态文字色，和背景色形成对比',
+      //       value: '--ibiz-color-tertiary-active-text',
+      //     },
+      //     {
+      //       label: '第三禁用色',
+      //       description: '第三颜色禁用态',
+      //       value: '--ibiz-color-tertiary-disabled',
+      //     },
+      //     {
+      //       label: '第三禁用文本色',
+      //       description: '第三颜色禁用态文字色，和背景色形成对比',
+      //       value: '--ibiz-color-tertiary-disabled-text',
+      //     },
+      //     {
+      //       label: '第三浅版色',
+      //       description: '浅版第三颜色（多用于背景）。仅在需要非常强调的情况下使用',
+      //       value: '--ibiz-color-tertiary-light-default',
+      //     },
+      //     {
+      //       label: '第三浅版悬浮色',
+      //       description: '浅版第三颜色悬浮态',
+      //       value: '--ibiz-color-tertiary-light-hover',
+      //     },
+      //     {
+      //       label: '第三浅版激活色',
+      //       description: '浅版第三颜色激活态',
+      //       value: '--ibiz-color-tertiary-light-active',
+      //     },
+      //   ],
+      // },
+      // {
+      //   caption: '信息色',
+      //   vars: [
+      //     {
+      //       label: '信息色',
+      //       description: '信息色, 通常用于表达客观、中立信息',
+      //       value: '--ibiz-color-info',
+      //     },
+      //     {
+      //       label: '信息文本色',
+      //       description: '信息颜色文字色，和背景色形成对比',
+      //       value: '--ibiz-color-info-text',
+      //     },
+      //     {
+      //       label: '信息悬浮色',
+      //       description: '信息颜色悬浮态',
+      //       value: '--ibiz-color-info-hover',
+      //     },
+      //     {
+      //       label: '信息悬浮文本色',
+      //       description: '信息颜色悬浮态文字色，和背景色形成对比',
+      //       value: '--ibiz-color-info-hover-text',
+      //     },
+      //     {
+      //       label: '信息激活色',
+      //       description: '信息颜色激活态',
+      //       value: '--ibiz-color-info-active',
+      //     },
+      //     {
+      //       label: '信息颜色激活文本色',
+      //       description: '信息颜色激活态文字色，和背景色形成对比',
+      //       value: '--ibiz-color-info-active-text',
+      //     },
+      //     {
+      //       label: '信息禁用色',
+      //       description: '信息颜色禁用态',
+      //       value: '--ibiz-color-info-disabled',
+      //     },
+      //     {
+      //       label: '信息禁用文本色',
+      //       description: '信息颜色禁用态文字色，和背景色形成对比',
+      //       value: '--ibiz-color-info-disabled-text',
+      //     },
+      //     {
+      //       label: '信息浅版色',
+      //       description: '浅版信息颜色（多用于背景）。仅在需要非常强调的情况下使用',
+      //       value: '--ibiz-color-info-light-default',
+      //     },
+      //     {
+      //       label: '信息浅版悬浮色',
+      //       description: '浅版信息颜色悬浮态',
+      //       value: '--ibiz-color-info-light-hover',
+      //     },
+      //     {
+      //       label: '信息浅版激活色',
+      //       description: '浅版信息颜色激活态',
+      //       value: '--ibiz-color-info-light-active',
+      //     },
+      //   ],
+      // },
+      // {
+      //   caption: '成功色',
+      //   vars: [
+      //     {
+      //       label: '成功色',
+      //       description: '成功色，表示安全、成功、开启的状态',
+      //       value: '--ibiz-color-success',
+      //     },
+      //     {
+      //       label: '成功文本色',
+      //       description: '成功颜色文字色，和背景色形成对比',
+      //       value: '--ibiz-color-success-text',
+      //     },
+      //     {
+      //       label: '成功悬浮色',
+      //       description: '成功颜色悬浮态',
+      //       value: '--ibiz-color-success-hover',
+      //     },
+      //     {
+      //       label: '成功悬浮文本色',
+      //       description: '成功颜色悬浮态文字色，和背景色形成对比',
+      //       value: '--ibiz-color-success-hover-text',
+      //     },
+      //     {
+      //       label: '成功激活色',
+      //       description: '成功颜色激活态',
+      //       value: '--ibiz-color-success-active',
+      //     },
+      //     {
+      //       label: '成功激活文本色',
+      //       description: '成功颜色激活态文字色，和背景色形成对比',
+      //       value: '--ibiz-color-success-active-text',
+      //     },
+      //     {
+      //       label: '成功禁用色',
+      //       description: '成功颜色禁用态',
+      //       value: '--ibiz-color-success-disabled',
+      //     },
+      //     {
+      //       label: '成功禁用文本色',
+      //       description: '成功颜色禁用态文字色，和背景色形成对比',
+      //       value: '--ibiz-color-success-disabled-text',
+      //     },
+      //     {
+      //       label: '成功浅版色',
+      //       description: '浅版成功颜色（多用于背景）。仅在需要非常强调的情况下使用',
+      //       value: '--ibiz-color-success-light-default',
+      //     },
+      //     {
+      //       label: '成功浅版悬浮色',
+      //       description: '浅版成功颜色悬浮态',
+      //       value: '--ibiz-color-success-light-hover',
+      //     },
+      //     {
+      //       label: '成功浅版激活色',
+      //       description: '浅版成功颜色激活态',
+      //       value: '--ibiz-color-success-light-active',
+      //     },
+      //   ],
+      // },
+      // {
+      //   caption: '警告色',
+      //   vars: [
+      //     {
+      //       label: '警告色',
+      //       description: '警示色，表示警告、不安全的状态',
+      //       value: '--ibiz-color-warning',
+      //     },
+      //     {
+      //       label: '警告文本色',
+      //       description: '警告颜色文字色，和背景色形成对比',
+      //       value: '--ibiz-color-warning-text',
+      //     },
+      //     {
+      //       label: '警告悬浮色',
+      //       description: '警告颜色悬浮态',
+      //       value: '--ibiz-color-warning-hover',
+      //     },
+      //     {
+      //       label: '警告悬浮文本色',
+      //       description: '警告颜色悬浮态文字色，和背景色形成对比',
+      //       value: '--ibiz-color-warning-hover-text',
+      //     },
+      //     {
+      //       label: '警告激活色',
+      //       description: '警告颜色激活态',
+      //       value: '--ibiz-color-warning-active',
+      //     },
+      //     {
+      //       label: '警告激活文本色',
+      //       description: '警告颜色激活态文字色，和背景色形成对比',
+      //       value: '--ibiz-color-warning-active-text',
+      //     },
+      //     {
+      //       label: '警告浅版色',
+      //       description: '浅版警告颜色（多用于背景）。仅在需要非常强调的情况下使用',
+      //       value: '--ibiz-color-warning-light-default',
+      //     },
+      //     {
+      //       label: '警告浅版悬浮色',
+      //       description: '浅版警告颜色悬浮态',
+      //       value: '--ibiz-color-warning-light-hover',
+      //     },
+      //     {
+      //       label: '警告浅版激活色',
+      //       description: '浅版警告颜色激活态',
+      //       value: '--ibiz-color-warning-light-active',
+      //     },
+      //   ],
+      // },
+      // {
+      //   caption: '危险色',
+      //   vars: [
+      //     {
+      //       label: '危险色',
+      //       description: '危险色，表示危险的操作、或需要特别注意的危险信息',
+      //       value: '--ibiz-color-danger',
+      //     },
+      //     {
+      //       label: '危险文本色',
+      //       description: '危险颜色文字色，和背景色形成对比',
+      //       value: '--ibiz-color-danger-text',
+      //     },
+      //     {
+      //       label: '危险悬浮色',
+      //       description: '危险颜色悬浮态',
+      //       value: '--ibiz-color-danger-hover',
+      //     },
+      //     {
+      //       label: '危险悬浮文本色',
+      //       description: '危险颜色悬浮态文字色，和背景色形成对比',
+      //       value: '--ibiz-color-danger-hover-text',
+      //     },
+      //     {
+      //       label: '危险激活色',
+      //       description: '危险颜色激活态',
+      //       value: '--ibiz-color-danger-active',
+      //     },
+      //     {
+      //       label: '危险激活文本色',
+      //       description: '危险颜色激活态文字色，和背景色形成对比',
+      //       value: '--ibiz-color-danger-active-text',
+      //     },
+      //     {
+      //       label: '危险浅版色',
+      //       description: '浅版危险颜色（多用于背景）。仅在需要非常强调的情况下使用',
+      //       value: '--ibiz-color-danger-light-default',
+      //     },
+      //     {
+      //       label: '危险浅版悬浮色',
+      //       description: '浅版危险颜色悬浮态',
+      //       value: '--ibiz-color-danger-light-hover',
+      //     },
+      //     {
+      //       label: '危险浅版激活色',
+      //       description: '浅版危险颜色激活态',
+      //       value: '--ibiz-color-danger-light-active',
+      //     },
+      //   ],
+      // },
+      {
+        caption: "\u6587\u672C/\u56FE\u6807\u989C\u8272",
+        labelLang: "textIcon",
+        vars: [
+          {
+            label: "\u6587\u672C\u56FE\u6807\u4E3B\u8272",
+            description: "\u6587\u672C/\u56FE\u6807\u989C\u8272 - \u6700\u4E3B\u8981",
+            labelLang: "mainTextIconColor",
+            descLang: "mianTextIconColorDesc",
+            value: "--ibiz-color-text-0"
+          },
+          {
+            label: "\u6587\u672C\u56FE\u6807\u7A0D\u6B21\u8272",
+            description: "\u6587\u672C/\u56FE\u6807\u989C\u8272 - \u7A0D\u6B21\u8981",
+            labelLang: "minorTextIconColor",
+            descLang: "minorTextIconColorDesc",
+            value: "--ibiz-color-text-1"
+          },
+          {
+            label: "\u6587\u672C\u56FE\u6807\u6B21\u8272",
+            description: "\u6587\u672C/\u56FE\u6807\u989C\u8272 - \u6B21\u8981",
+            labelLang: "secondaryTextIconColor",
+            descLang: "secondaryTextIconColorDesc",
+            value: "--ibiz-color-text-2"
+          },
+          {
+            label: "\u6587\u672C\u56FE\u6807\u6700\u6B21\u8272",
+            description: "\u6587\u672C/\u56FE\u6807\u989C\u8272 - \u6700\u6B21\u8981",
+            labelLang: "lastTextIconColor",
+            descLang: "lastTextIconColorDesc",
+            value: "--ibiz-color-text-3"
+          }
+        ]
+      },
+      {
+        caption: "\u94FE\u63A5\u989C\u8272",
+        labelLang: "linkColor",
+        vars: [
+          {
+            label: "\u6587\u672C\u94FE\u63A5\u8272",
+            description: "\u94FE\u63A5\u989C\u8272 - \u6700\u4E3B\u8981",
+            labelLang: "textLinkColor",
+            descLang: "textLinkColorDesc",
+            value: "--ibiz-color-link"
+          },
+          {
+            label: "\u6587\u672C\u94FE\u63A5\u60AC\u6D6E\u8272",
+            description: "\u94FE\u63A5\u989C\u8272 - \u60AC\u6D6E\u6001",
+            labelLang: "textLinkHoverColor",
+            descLang: "textLinkHoverColorDesc",
+            value: "--ibiz-color-link-hover"
+          },
+          {
+            label: "\u6587\u672C\u94FE\u63A5\u6FC0\u6D3B\u8272",
+            description: "\u94FE\u63A5\u989C\u8272 - \u6FC0\u6D3B\u6001",
+            labelLang: "textLinkActiveColor",
+            descLang: "textLinkActiveColorDesc",
+            value: "--ibiz-color-link-active"
+          },
+          {
+            label: "\u6587\u672C\u94FE\u63A5\u5DF2\u8BBF\u95EE\u8272",
+            description: "\u94FE\u63A5\u989C\u8272 - \u5DF2\u8BBF\u95EE",
+            labelLang: "textLinkVisitedColor",
+            descLang: "textLinkVisitedColorDesc",
+            value: "--ibiz-color-link-visited"
+          }
+        ]
+      },
+      {
+        caption: "\u80CC\u666F\u8272",
+        labelLang: "bgColor",
+        vars: [
+          {
+            label: "\u80CC\u666F\u8272\u6700\u4E0B\u5C42",
+            description: "\u80CC\u666F\u8272 - \u6700\u4E0B\u5C42\uFF08\u5E95\u90E8\u9875\u9762\uFF09",
+            labelLang: "bgColorLowestLayer",
+            descLang: "bgColorLowestLayerDesc",
+            value: "--ibiz-color-bg-0"
+          },
+          {
+            label: "\u80CC\u666F\u8272\u6B21\u4E0B\u5C42",
+            description: "\u80CC\u666F\u8272 - \u6B21\u4E0B\u5C42\uFF08\u9875\u9762\u4E2D\u9700\u8981\u63D0\u5347\u7684\u5185\u5BB9\uFF09",
+            labelLang: "bgColorLowerLayer",
+            descLang: "bgColorLowerLayerDesc",
+            value: "--ibiz-color-bg-1"
+          },
+          {
+            label: "\u80CC\u666F\u8272\u4E2D\u5C42",
+            description: "\u80CC\u666F\u8272 - \u4E2D\u95F4\u5C42\uFF08\u6A21\u6001\u7B49\u5BB9\u5668\uFF09",
+            labelLang: "bgColorCenterLayer",
+            descLang: "bgColorCenterLayerDesc",
+            value: "--ibiz-color-bg-2"
+          },
+          {
+            label: "\u80CC\u666F\u8272\u6B21\u4E0A\u5C42",
+            description: "\u80CC\u666F\u8272 - \u6B21\u4E0A\u5C42(\u901A\u77E5,Toast\u7B49)",
+            labelLang: "bgColorSecondaryUpperLayer",
+            descLang: "bgColorSecondaryUpperLayerDesc",
+            value: "--ibiz-color-bg-3"
+          },
+          {
+            label: "\u80CC\u666F\u8272\u6700\u4E0A\u5C42",
+            description: "\u80CC\u666F\u8272 - \u6700\u4E0A\u5C42\uFF08\u7279\u6B8A\uFF09",
+            labelLang: "bgColorTopLayer",
+            descLang: "bgColorTopLayerDesc",
+            value: "--ibiz-color-bg-4"
+          }
+        ]
+      },
+      {
+        caption: "\u586B\u5145\u8272",
+        labelLang: "fillColor",
+        vars: [
+          {
+            label: "\u9ED8\u8BA4\u586B\u5145\u8272",
+            description: "\u586B\u5145\u8272 - \u9ED8\u8BA4\u6001",
+            labelLang: "fillDefault",
+            descLang: "fillDefaultDesc",
+            value: "--ibiz-color-fill-0"
+          },
+          {
+            label: "\u60AC\u6D6E\u586B\u5145\u8272",
+            description: "\u586B\u5145\u8272 - \u60AC\u6D6E\u6001",
+            labelLang: "fillHover",
+            descLang: "fillHoverDesc",
+            value: "--ibiz-color-fill-1"
+          },
+          {
+            label: "\u6FC0\u6D3B\u586B\u5145\u8272",
+            description: "\u586B\u5145\u8272 - \u6FC0\u6D3B\u6001",
+            labelLang: "fillActive",
+            descLang: "fillActiveDesc",
+            value: "--ibiz-color-fill-2"
+          }
+        ]
+      },
+      {
+        caption: "\u8FB9\u6846",
+        labelLang: "border",
+        vars: [
+          {
+            label: "\u8FB9\u6846\u8272",
+            description: "\u9ED8\u8BA4\u63CF\u8FB9\u989C\u8272",
+            labelLang: "borderColor",
+            descLang: "borderColorDesc",
+            value: "--ibiz-color-border"
+          }
+        ]
+      },
+      {
+        caption: "\u7981\u7528\u6001",
+        labelLang: "disabledState",
+        vars: [
+          {
+            label: "\u7981\u7528\u6587\u672C\u8272",
+            description: "\u7981\u7528\u6001 - \u6587\u5B57",
+            labelLang: "disabledText",
+            descLang: "disabledTextDesc",
+            value: "--ibiz-color-disabled-text"
+          },
+          {
+            label: "\u7981\u7528\u63CF\u8FB9\u8272",
+            description: "\u7981\u7528\u6001 - \u63CF\u8FB9",
+            labelLang: "disabledTextBorder",
+            descLang: "disabledTextBorderDesc",
+            value: "--ibiz-color-text-border"
+          },
+          {
+            label: "\u7981\u7528\u80CC\u666F\u8272",
+            description: "\u7981\u7528\u6001 - \u80CC\u666F",
+            labelLang: "disabledBg",
+            descLang: "disabledBgDesc",
+            value: "--ibiz-color-text-bg"
+          },
+          {
+            label: "\u7981\u7528\u586B\u5145\u8272",
+            description: "\u7981\u7528\u6001 - \u586B\u5145",
+            labelLang: "disabledFill",
+            descLang: "disabledFillDesc",
+            value: "--ibiz-color-text-fill"
+          }
+        ]
+      }
+      // {
+      //   caption: '阴影',
+      //   vars: [
+      //     {
+      //       label: '描边阴影',
+      //       description: '用于模拟描边的阴影颜色',
+      //       value: '--ibiz-color-shadow',
+      //     },
+      //     {
+      //       label: '模态阴影',
+      //       description: '用于toast, modal, popover等需要提升层级的界面元素',
+      //       value: '--ibiz-color-shadow-elevated',
+      //     },
+      //   ],
+      // },
+    ]
+  },
+  {
+    caption: "\u4FA7\u8FB9\u680F",
+    labelLang: "sidebar",
+    vars: [
+      {
+        label: "\u80CC\u666F",
+        value: "--ibiz-panel-app-header-bg-color",
+        defaultValue: "--ibiz-color-primary",
+        labelLang: "sidebarBg",
+        className: "ibiz-panel-app-header"
+      },
+      {
+        label: "\u5B57\u4F53\u989C\u8272",
+        value: "--ibiz-panel-app-header-color",
+        defaultValue: "--ibiz-color-primary-text",
+        labelLang: "sidebarColor",
+        className: "ibiz-panel-app-header"
+      },
+      {
+        label: "\u60AC\u6D6E\u8272",
+        value: "--ibiz-panel-app-header-hover-bg-color",
+        defaultValue: "--ibiz-color-primary-hover",
+        labelLang: "sidebarHoverBgColor",
+        className: "ibiz-panel-app-header"
+      },
+      {
+        label: "\u9009\u4E2D\u8272",
+        value: "--ibiz-panel-app-header-select-bg-color",
+        defaultValue: "--ibiz-color-primary-active",
+        labelLang: "sidebarSelectBgColor",
+        className: "ibiz-panel-app-header"
+      }
+    ]
+  },
+  {
+    caption: "\u9876\u90E8",
+    labelLang: "top",
+    vars: [
+      {
+        label: "\u80CC\u666F",
+        value: "--ibiz-panel-app-header-horizontal-bg-color",
+        defaultValue: "--ibiz-color-primary",
+        labelLang: "topBgColor",
+        className: "ibiz-panel-app-header"
+      },
+      {
+        label: "\u5B57\u4F53\u989C\u8272",
+        value: "--ibiz-panel-app-header-horizontal-color",
+        defaultValue: "--ibiz-color-primary-text",
+        labelLang: "topColor",
+        className: "ibiz-panel-app-header"
+      },
+      {
+        label: "\u60AC\u6D6E\u8272",
+        value: "--ibiz-panel-app-header-horizontal-hover-bg-color",
+        defaultValue: "--ibiz-color-primary-hover",
+        labelLang: "topHoverBgColor",
+        className: "ibiz-panel-app-header"
+      },
+      {
+        label: "\u9009\u4E2D\u8272",
+        value: "--ibiz-panel-app-header-horizontal-select-bg-color",
+        defaultValue: "--ibiz-color-primary-active",
+        labelLang: "topSelectBgColor",
+        className: "ibiz-panel-app-header"
+      }
+    ]
+  },
+  {
+    caption: "\u8868\u683C",
+    labelLang: "grid",
+    vars: [
+      {
+        label: "\u8868\u683C\u5934\u5B57\u4F53\u8272",
+        value: "--ibiz-control-grid-header-text-color",
+        defaultValue: "--ibiz-color-text-2",
+        labelLang: "gridHeaderColor",
+        className: "ibiz-control-grid"
+      },
+      {
+        label: "\u8868\u683C\u5934\u80CC\u666F\u8272",
+        value: "--ibiz-control-grid-header-bg-color",
+        defaultValue: "--ibiz-color-fill-1",
+        labelLang: "gridHeaderBg",
+        className: "ibiz-control-grid"
+      },
+      {
+        label: "\u8868\u683C\u884C\u5B57\u4F53\u8272",
+        value: "--ibiz-control-grid-text-color",
+        defaultValue: "--ibiz-color-text-0",
+        labelLang: "gridRowColor",
+        className: "ibiz-control-grid"
+      },
+      {
+        label: "\u8868\u683C\u884C\u80CC\u666F\u8272\u4EAE\u8272",
+        value: "--ibiz-control-grid-row-bg-color",
+        defaultValue: "--ibiz-color-bg-1",
+        labelLang: "gridRowBg",
+        className: "ibiz-control-grid"
+      },
+      {
+        label: "\u8868\u683C\u884C\u80CC\u666F\u8272\u6697\u8272",
+        value: "--ibiz-control-grid-row-bg-color-2",
+        defaultValue: "--ibiz-color-bg-0",
+        labelLang: "gridRowBg2",
+        className: "ibiz-control-grid"
+      },
+      {
+        label: "\u8868\u683C\u884C\u60AC\u6D6E\u8272",
+        value: "--ibiz-control-grid-row-hover-color",
+        defaultValue: "--ibiz-grey-1",
+        labelLang: "gridRowHover",
+        className: "ibiz-control-grid"
+      }
+    ]
+  },
+  {
+    caption: "\u5176\u4ED6",
+    labelLang: "other",
+    type: "size",
+    vars: [
+      {
+        label: "\u9AD8\u5EA6",
+        value: "--ibiz-height-control-default",
+        labelLang: "height",
+        unit: "px",
+        type: "size",
+        kindVars: {
+          "--ibiz-height-control-small": -8,
+          "--ibiz-height-control-large": 8
+        }
+      },
+      {
+        label: "\u95F4\u8DDD",
+        value: "--ibiz-spacing-base",
+        labelLang: "spacing",
+        unit: "px",
+        type: "size",
+        kindVars: {
+          "--ibiz-spacing-super-tight": -14,
+          "--ibiz-spacing-extra-tight": -12,
+          "--ibiz-spacing-tight": -8,
+          "--ibiz-spacing-base-tight": -4,
+          "--ibiz-spacing-base-loose": 4,
+          "--ibiz-spacing-loose": 8,
+          "--ibiz-spacing-extra-loose": 16,
+          "--ibiz-spacing-super-loose": 24
+        }
+      }
+    ]
+  }
+];
+
+export { predefineThemeVars };