From 717139e38b0e0c1660e7c2363236ba8248e30040 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 17 Jan 2023 11:29:52 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E5=88=B7=E6=96=B0doc?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/button.md                       | 12 +++----
 packages/docs/global.md                       | 24 ++++++++-----
 packages/docs/link.md                         | 26 +++++++-------
 packages/docs/select.md                       | 30 ++++++++--------
 packages/docs/tab.md                          | 36 +++++++++----------
 .../src/components/_shared/global.ts          |  8 +++--
 .../opendesign/src/components/link/OLink.vue  |  7 ++--
 7 files changed, 78 insertions(+), 65 deletions(-)

diff --git a/packages/docs/button.md b/packages/docs/button.md
index 8779fcb9..cbf9e7f0 100644
--- a/packages/docs/button.md
+++ b/packages/docs/button.md
@@ -2,12 +2,12 @@
 
 ## props
 
-| name    | type        | 默认值    | 说明                                 |
-| :------ | :---------- | :-------- | :----------------------------------- |
-| shape   | ShapeT      | 'normal'  | 形状: large \| normal \| small       |
-| size    | SizeT       | 'normal'  | 形状 normal \| round                 |
-| type    | ButtonTypeT | 'outline' | 形状 primary \|outline\| text \|link |
-| loading | boolean     | false     | 加载状态                             |
+| name    | type                                    | 默认值    | 说明           |
+| :------ | :-------------------------------------- | :-------- | :------------- |
+| shape   | 'large' \| 'normal' \| 'small'          | 'normal'  | 可选，形状     |
+| size    | 'normal' \| 'round'                     | 'normal'  | 可选，尺寸     |
+| type    | 'primary' \|'outline'\| 'text' \|'link' | 'outline' | 可选，状态     |
+| loading | boolean                                 | false     | 可选，加载状态 |
 
 ## event
 
diff --git a/packages/docs/global.md b/packages/docs/global.md
index 304d9c08..aa5ad896 100644
--- a/packages/docs/global.md
+++ b/packages/docs/global.md
@@ -1,10 +1,18 @@
 # 全局配置
 
-## 方法
-
-| name    | type        | 默认值    | 说明                                 |
-| :------ | :---------- | :-------- | :----------------------------------- |
-| shape   | ShapeT      | 'normal'  | 形状: large \| normal \| small       |
-| size    | SizeT       | 'normal'  | 形状 normal \| round                 |
-| type    | ButtonTypeT | 'outline' | 形状 primary \|outline\| text \|link |
-| loading | boolean     | false     | 加载状态                             |
+## 配置全局样式
+
+| 方法名    | 参数                                   | 返回值 | 说明             |
+| :-------- | :------------------------------------- | :----- | :--------------- |
+| initSize  | (type: 'large' \| 'normal' \| 'small') | --     | 设置全局组件尺寸 |
+| initShape | (type: 'normal' \| 'round')            | --     | 设置全局组件形状 |
+
+## 配置全局图标
+
+| 方法名             | 参数              | 返回值 | 说明                   |
+| :----------------- | :---------------- | :----- | :--------------------- |
+| initLoadingIcon    | (icon: Component) | --     | 设置全局加载按钮图标   |
+| initLinkArrowIcon  | (icon: Component) | --     | 设置 link 组件箭头图标 |
+| initLinkPrefixIcon | (icon: Component) | --     | 设置 link 组件前缀图标 |
+| initCloseIcon      | (icon: Component) | --     | 设置全局关闭图标       |
+| initAddIcon        | (icon: Component) | --     | 设置全局添加图标       |
diff --git a/packages/docs/link.md b/packages/docs/link.md
index b6f9bd50..bb23a5b0 100644
--- a/packages/docs/link.md
+++ b/packages/docs/link.md
@@ -2,22 +2,22 @@
 
 ## props
 
-| name       | type                                                        | 默认值   | 说明                               |
-| :--------- | :---------------------------------------------------------- | :------- | :--------------------------------- |
-| href       | string                                                      | ''       | 包含超链接指向的 URL 或 URL 片段。 |
-| target     | '\_blank' \| '\_parent' \| '\_self' \| '\_top'              | 'normal' | 指定在何处显示链接的资源。         |
-| type       | 'normal' \| 'primary' \| 'warning' \| 'danger' \| 'success' | 'normal' | 链接类型                           |
-| disabled   | boolean                                                     | false    | 是否禁用                           |
-| loading    | boolean                                                     | false    | 是否为 loading 状态                |
-| iconPrefix | boolean                                                     | false    | 前缀图标                           |
-| iconArrow  | boolean                                                     | false    | 图标箭头                           |
-| hoverable  | boolean                                                     | false    | hover 时是否显示背景               |
+| name       | type                                                        | 默认值   | 说明                                     |
+| :--------- | :---------------------------------------------------------- | :------- | :--------------------------------------- |
+| href       | string                                                      | ''       | 可选，包含超链接指向的 URL 或 URL 片段。 |
+| target     | '\_blank' \| '\_parent' \| '\_self' \| '\_top'              | 'normal' | 可选，指定在何处显示链接的资源。         |
+| type       | 'normal' \| 'primary' \| 'warning' \| 'danger' \| 'success' | 'normal' | 可选，链接类型                           |
+| disabled   | boolean                                                     | false    | 可选，是否禁用                           |
+| loading    | boolean                                                     | false    | 可选，是否为 loading 状态                |
+| iconPrefix | boolean                                                     | false    | 可选，前缀图标                           |
+| iconArrow  | boolean                                                     | false    | 可选，图标箭头                           |
+| hoverable  | boolean                                                     | false    | 可选，hover 时是否显示背景               |
 
 ## event
 
-| event | 参数         | 说明     |
-| :---- | :----------- | :------- |
-| click | e:MouseEvent | 点击事件 |
+| event | 参数           | 说明     |
+| :---- | :------------- | :------- |
+| click | (e:MouseEvent) | 点击事件 |
 
 ## expose
 
diff --git a/packages/docs/select.md b/packages/docs/select.md
index 93baac4c..bcbeb989 100644
--- a/packages/docs/select.md
+++ b/packages/docs/select.md
@@ -2,24 +2,24 @@
 
 ## props
 
-| name            | type                             | 默认值             | 说明                                                          |
-| :-------------- | :------------------------------- | :----------------- | ------------------------------------------------------------- |
-| modelValue      | string \| number（v-model）      | false              | 开关状态                                                      |
-| shape           | ShapeT                           | 'normal'           | 形状: large \| normal \| small                                |
-| size            | SizeT                            | 'normal'           | 形状 normal \| round                                          |
-| disabled        | boolean                          | false              | 形状                                                          |
-| placeholder     | string                           | 'please select...' | 提示文本                                                      |
-| loading         | boolean                          | false              | 加载状态                                                      |
-| beforeChange    | function                         | ()=>true           | return Promise. resolve(true)继续切换，resolve(false)阻止切换 |
-| optionWrapClass | string                           | ''                 | 下拉的自定义类                                                |
-| optionPosition  | PopupPositionT                   | 'bl'               | 下拉的位置                                                    |
-| optionWidthMode | 'auto' \| 'min-width' \| 'width' | 'min-width'        | 下拉的宽度适配方式                                            |
+| name            | type                             | 默认值             | 说明                                                                |
+| :-------------- | :------------------------------- | :----------------- | ------------------------------------------------------------------- |
+| modelValue      | string \| number（v-model）      | --                 | 必选，开关状态                                                      |
+| shape           | ShapeT                           | 'normal'           | 可选，形状: large \| normal \| small                                |
+| size            | SizeT                            | 'normal'           | 可选，形状 normal \| round                                          |
+| disabled        | boolean                          | false              | 可选，形状                                                          |
+| placeholder     | string                           | 'please select...' | 可选，提示文本                                                      |
+| loading         | boolean                          | false              | 可选，加载状态                                                      |
+| beforeChange    | function                         | ()=>true           | 可选，return Promise. resolve(true)继续切换，resolve(false)阻止切换 |
+| optionWrapClass | string                           | ''                 | 可选，下拉的自定义类                                                |
+| optionPosition  | PopupPositionT                   | 'bl'               | 可选，下拉的位置                                                    |
+| optionWidthMode | 'auto' \| 'min-width' \| 'width' | 'min-width'        | 可选，下拉的宽度适配方式                                            |
 
 ## event
 
-| name   | 参数                      | 说明           |
-| :----- | :------------------------ | :------------- |
-| change | value: boolean; ev: Event | 选择切换后触发 |
+| name   | 参数                        | 说明           |
+| :----- | :-------------------------- | :------------- |
+| change | (value: boolean; ev: Event) | 选择切换后触发 |
 
 ## expose
 
diff --git a/packages/docs/tab.md b/packages/docs/tab.md
index 5e0ff3b4..50d3737c 100644
--- a/packages/docs/tab.md
+++ b/packages/docs/tab.md
@@ -4,32 +4,32 @@
 
 ### OTabs
 
-| name       | type                        | 默认值 | 说明                           |
-| :--------- | :-------------------------- | :----- | ------------------------------ |
-| modelValue | string \| number（v-model） | ''     | 开关状态                       |
-| lazy       | boolean                     | false  | 是否在首次激活标签时再挂载内容 |
-| addable    | boolean                     | false  | 是否可以添加页签               |
+| name       | type                        | 默认值 | 说明                                 |
+| :--------- | :-------------------------- | :----- | ------------------------------------ |
+| modelValue | string \| number（v-model） | ''     | 可选，开关状态                       |
+| lazy       | boolean                     | false  | 可选，是否在首次激活标签时再挂载内容 |
+| addable    | boolean                     | false  | 可选，是否可以添加页签               |
 
 ### OTabPane
 
-| name          | type             | 默认值          | 说明                           |
-| :------------ | :--------------- | :-------------- | ------------------------------ |
-| value         | string \| number | uid             | tab id                         |
-| label         | string           | undefined       | 页签文本                       |
-| transition    | string           | o-fade-up-enter | 页签切换时过渡动画             |
-| lazy          | boolean          | false           | 是否在首次激活标签时再挂载内容 |
-| unmountOnHide | boolean          | false           | 是否在未激活时卸载页签内容     |
-| disabled      | boolean          | false           | 是否禁用选中                   |
-| closable      | boolean          | false           | 是否可以删除                   |
+| name          | type             | 默认值          | 说明                                 |
+| :------------ | :--------------- | :-------------- | ------------------------------------ |
+| value         | string \| number | instance.uid    | 可选，tab id                         |
+| label         | string           | undefined       | 可选，页签文本                       |
+| transition    | string           | o-fade-up-enter | 可选，页签切换时过渡动画             |
+| lazy          | boolean          | false           | 可选，是否在首次激活标签时再挂载内容 |
+| unmountOnHide | boolean          | false           | 可选，是否在未激活时卸载页签内容     |
+| disabled      | boolean          | false           | 可选，是否禁用选中                   |
+| closable      | boolean          | false           | 可选，是否可以删除                   |
 
 ## event
 
 ### OTabs
 
-| name   | 参数                                                | 说明           |
-| :----- | :-------------------------------------------------- | :------------- |
-| change | value: string \| number, oldValue: string \| number | 页签切换后触发 |
-| delete | value: string \| number                             | 页签删除后触发 |
+| name   | 参数                                                  | 说明           |
+| :----- | :---------------------------------------------------- | :------------- |
+| change | (value: string \| number, oldValue: string \| number) | 页签切换后触发 |
+| delete | (value: string \| number )                            | 页签删除后触发 |
 
 ## expose
 
diff --git a/packages/opendesign/src/components/_shared/global.ts b/packages/opendesign/src/components/_shared/global.ts
index 83db256f..d645d10e 100644
--- a/packages/opendesign/src/components/_shared/global.ts
+++ b/packages/opendesign/src/components/_shared/global.ts
@@ -1,15 +1,19 @@
 import { ref } from 'vue';
 
 // 尺寸
-export type SizeT = 'large' | 'normal' | 'small'
+export type SizeT = 'large' | 'normal' | 'small';
 export const defaultSize = ref<SizeT>('normal');
 export function initSize(type: SizeT) {
   defaultSize.value = type;
 }
 
 // 形状
-export type ShapeT = 'round' | 'normal'
+export type ShapeT = 'round' | 'normal';
 export const defaultShape = ref<ShapeT>('normal');
 export function initShape(type: ShapeT) {
   defaultShape.value = type;
 }
+
+
+// 状态
+export type StatusT = 'normal' | 'primary' | 'warning' | 'danger' | 'success';
\ No newline at end of file
diff --git a/packages/opendesign/src/components/link/OLink.vue b/packages/opendesign/src/components/link/OLink.vue
index d36ddeb0..b11216b8 100644
--- a/packages/opendesign/src/components/link/OLink.vue
+++ b/packages/opendesign/src/components/link/OLink.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { StatusT } from '../_shared/global';
 import { IconLinkPrefix, IconLinkArrow, IconLoading } from '../_shared/icons';
 
 interface LinkPropsT {
@@ -17,7 +18,7 @@ interface LinkPropsT {
   /**
    * 链接类型
    */
-  type?: 'normal' | 'primary' | 'warning' | 'danger' | 'success';
+  status?: StatusT;
   /**
    * 是否禁用
    */
@@ -40,7 +41,7 @@ const props = withDefaults(defineProps<LinkPropsT>(), {
   href: '',
   target: undefined,
   icon: false,
-  type: 'normal',
+  status: 'normal',
 });
 
 const emits = defineEmits<{ (e: 'click', val: MouseEvent): void }>();
@@ -60,7 +61,7 @@ const onClick = (e: MouseEvent) => {
     class="o-link"
     :href="props.href"
     :target="props.target"
-    :class="[{ 'is-disabled': props.disabled, 'o-link-hoverable': props.hoverable }, `o-link-${props.type}`]"
+    :class="[{ 'is-disabled': props.disabled, 'o-link-hoverable': props.hoverable }, `o-link-${props.status}`]"
     v-bind="$attrs"
     @click="onClick"
   >
-- 
Gitee


From 053739df514be00d19f4d89f1d9e7886aeb4053c Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 17 Jan 2023 18:14:45 +0800
Subject: [PATCH 2/4] =?UTF-8?q?token=20=E8=87=AA=E5=8A=A8=E7=94=9F?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |   1 +
 packages/opendesign/package.json              |   1 +
 .../src/components/hooks/use-element.ts       |   2 +-
 .../src/components/link/__demo__/LinkDemo.vue |  24 +-
 .../src/components/link/style/var.scss        |   2 +-
 .../src/components/style/dark.token.css       | 654 +++++++++++++++++
 .../components/style/default.light.token.css  | 655 ++++++++++++++++++
 .../opendesign/src/tokens/dark.color.json     | 314 +++++++++
 .../opendesign/src/tokens/light.color.json    | 314 +++++++++
 packages/opendesign/src/tokens/size.json      | 368 ++++++++++
 .../opendesign/src/tokens/token.config.ts     |  15 +
 packages/opendesign/tsconfig.json             |   3 +
 packages/portal/src/main.ts                   |   2 +-
 packages/scripts/src/gen-tokens/index.ts      | 133 ++++
 packages/scripts/src/index.ts                 |   7 +
 15 files changed, 2480 insertions(+), 15 deletions(-)
 create mode 100644 packages/opendesign/src/components/style/dark.token.css
 create mode 100644 packages/opendesign/src/components/style/default.light.token.css
 create mode 100644 packages/opendesign/src/tokens/dark.color.json
 create mode 100644 packages/opendesign/src/tokens/light.color.json
 create mode 100644 packages/opendesign/src/tokens/size.json
 create mode 100644 packages/opendesign/src/tokens/token.config.ts
 create mode 100644 packages/scripts/src/gen-tokens/index.ts

diff --git a/.gitignore b/.gitignore
index a547bf36..3fb0166c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,6 +15,7 @@ dist-ssr
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
+!.vscode/*.code-snippets
 .idea
 .DS_Store
 *.suo
diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json
index 19323c5c..240bbf60 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -16,6 +16,7 @@
     "vue3 components"
   ],
   "scripts": {
+    "gen:token": "opensig-scripts gen:token --config ./src/tokens/token.config.ts",
     "gen:icon": "opensig-scripts gen:icon",
     "build:component": "opensig-scripts build:component",
     "build:style": "opensig-scripts build:style",
diff --git a/packages/opendesign/src/components/hooks/use-element.ts b/packages/opendesign/src/components/hooks/use-element.ts
index 21a222ec..21978f24 100644
--- a/packages/opendesign/src/components/hooks/use-element.ts
+++ b/packages/opendesign/src/components/hooks/use-element.ts
@@ -17,4 +17,4 @@ export function useElementDirective(onElementChange: (el: HTMLElement | null, ty
   return {
     getElementDirective: directive
   };
-}
\ No newline at end of file
+}
diff --git a/packages/opendesign/src/components/link/__demo__/LinkDemo.vue b/packages/opendesign/src/components/link/__demo__/LinkDemo.vue
index a253dc1b..1a689b2b 100644
--- a/packages/opendesign/src/components/link/__demo__/LinkDemo.vue
+++ b/packages/opendesign/src/components/link/__demo__/LinkDemo.vue
@@ -21,14 +21,14 @@ const onLinkClick2 = () => {
   <h4>基本</h4>
   <section>
     <OLink :href="link">普通链接</OLink>
-    <OLink :href="link" type="primary">高亮链接</OLink>
+    <OLink :href="link" status="primary">高亮链接</OLink>
     <OLink :href="link" target="_blank">新页签打开的链接</OLink>
     <OLink :href="link" disabled>禁用链接</OLink>
   </section>
 
   <h4>图标</h4>
   <section>
-    <OLink :href="link" icon-prefix type="primary">图标链接1</OLink>
+    <OLink :href="link" icon-prefix status="primary">图标链接1</OLink>
     <OLink :href="link" icon-arrow>图标链接2</OLink>
     <OLink :href="link">
       <template #icon><IconDone /></template>自定义图标链接1
@@ -41,20 +41,20 @@ const onLinkClick2 = () => {
   <section>
     <OLink :href="link">普通链接</OLink>
     <OLink :href="link" hoverable>hoverable链接</OLink>
-    <OLink type="primary">primary链接</OLink>
-    <OLink type="primary" hoverable>hoverable</OLink>
-    <OLink type="warning">warning链接</OLink>
-    <OLink type="warning" hoverable>hoverable</OLink>
-    <OLink type="danger">danger链接</OLink>
-    <OLink type="danger" hoverable>hoverable</OLink>
-    <OLink type="success">success链接</OLink>
-    <OLink type="success" hoverable>hoverable</OLink>
+    <OLink status="primary">primary链接</OLink>
+    <OLink status="primary" hoverable>hoverable</OLink>
+    <OLink status="warning">warning链接</OLink>
+    <OLink status="warning" hoverable>hoverable</OLink>
+    <OLink status="danger">danger链接</OLink>
+    <OLink status="danger" hoverable>hoverable</OLink>
+    <OLink status="success">success链接</OLink>
+    <OLink status="success" hoverable>hoverable</OLink>
   </section>
   <h4>点击事件</h4>
   <section>
     <OLink :loading="!loading">loading</OLink>
-    <OLink :loading="loading" type="primary" @click="onLinkClick2">点击Loading</OLink>
-    <OLink type="primary" @click="onLinkClick">点击弹窗</OLink>
+    <OLink :loading="loading" status="primary" @click="onLinkClick2">点击Loading</OLink>
+    <OLink status="primary" @click="onLinkClick">点击弹窗</OLink>
   </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/link/style/var.scss b/packages/opendesign/src/components/link/style/var.scss
index 19414e06..692deb78 100644
--- a/packages/opendesign/src/components/link/style/var.scss
+++ b/packages/opendesign/src/components/link/style/var.scss
@@ -1,5 +1,5 @@
 .o-link {
-  --link-color: var(--o-color-text);
+  --link-color: var(--o-color-text2);
   --link-color_hover: var(--o-color-primary2);
   --link-color_active: var(--o-color-primary1);
   --link-color_disabled: var(--o-color-info3);
diff --git a/packages/opendesign/src/components/style/dark.token.css b/packages/opendesign/src/components/style/dark.token.css
new file mode 100644
index 00000000..809e1646
--- /dev/null
+++ b/packages/opendesign/src/components/style/dark.token.css
@@ -0,0 +1,654 @@
+/* theme: dark */
+:root[theme="dark"] {
+  /**
+   * @name 常规色
+   * @type color
+   * @group primary
+   * @description 用于按钮、文本、链接强调状态时常规颜色
+   */
+  --o-primary1: #002fa7;
+  /**
+   * @name 悬浮色
+   * @type color
+   * @group primary
+   * @description 用于按钮、文本、链接强调状态时悬浮颜色
+   */
+  --o-primary2: #406fe7;
+  /**
+   * @name 聚焦色
+   * @type color
+   * @group primary
+   * @description 用于按钮、文本、链接强调状态时聚焦颜色
+   */
+  --o-primary3: #00288d;
+  /**
+   * @name 禁用色
+   * @type color
+   * @group primary
+   * @description 用于按钮、文本、链接强调状态时禁用颜色
+   */
+  --o-primary4: #b2c0e4;
+  /**
+   * @name 常规色
+   * @type color
+   * @group major
+   * @description 用于按钮、文本、链接major状态时文本颜色
+   */
+  --o-major1: #feb32a;
+  /**
+   * @name 常规色
+   * @type color
+   * @group success
+   * @description 用于按钮、文本、链接成功状态时常规颜色
+   */
+  --o-success1: #6dc335;
+  /**
+   * @name 悬浮色
+   * @type color
+   * @group success
+   * @description 用于按钮、文本、链接成功状态时悬浮颜色
+   */
+  --o-success2: #93e95b;
+  /**
+   * @name 聚焦色
+   * @type color
+   * @group success
+   * @description 用于按钮、文本、链接成功状态时聚焦颜色
+   */
+  --o-success3: #62af30;
+  /**
+   * @name 禁用色
+   * @type color
+   * @group success
+   * @description 用于按钮、文本、链接成功状态时禁用颜色
+   */
+  --o-success4: #c5e7ae;
+  /**
+   * @name 常规色
+   * @type color
+   * @group warning
+   * @description 用于按钮、文本、链接告警状态时常规颜色
+   */
+  --o-warning1: #ff8e36;
+  /**
+   * @name 悬浮色
+   * @type color
+   * @group warning
+   * @description 用于按钮、文本、链接告警状态时悬浮颜色
+   */
+  --o-warning2: #ffb45c;
+  /**
+   * @name 聚焦色
+   * @type color
+   * @group warning
+   * @description 用于按钮、文本、链接告警状态时聚焦颜色
+   */
+  --o-warning3: #ff801c;
+  /**
+   * @name 禁用色
+   * @type color
+   * @group warning
+   * @description 用于按钮、文本、链接告警状态时禁用颜色
+   */
+  --o-warning4: #ffd2af;
+  /**
+   * @name 常规色
+   * @type color
+   * @group danger
+   * @description 用于按钮、文本、链接错误状态时常规颜色
+   */
+  --o-danger1: #f3524d;
+  /**
+   * @name 悬浮色
+   * @type color
+   * @group danger
+   * @description 用于按钮、文本、链接错误状态时悬浮颜色
+   */
+  --o-danger2: #ff7873;
+  /**
+   * @name 聚焦色
+   * @type color
+   * @group danger
+   * @description 用于按钮、文本、链接错误状态时聚焦颜色
+   */
+  --o-danger3: #f13b35;
+  /**
+   * @name 禁用色
+   * @type color
+   * @group danger
+   * @description 用于按钮、文本、链接错误状态时禁用颜色
+   */
+  --o-danger4: #fabab8;
+  /**
+   * @name 常规色
+   * @type color
+   * @group info
+   * @description 用于按钮、文本、链接信息状态时常规颜色
+   */
+  --o-info1: #e5e5e5;
+  /**
+   * @name 悬浮色
+   * @type color
+   * @group info
+   * @description 用于按钮、文本、链接信息状态时悬浮颜色
+   */
+  --o-info2: #e5e8f0;
+  /**
+   * @name 聚焦色
+   * @type color
+   * @group info
+   * @description 用于按钮、文本、链接信息状态时聚焦颜色
+   */
+  --o-info3: #cccccc;
+  /**
+   * @name 禁用色
+   * @type color
+   * @group info
+   * @description 用于按钮、文本、链接信息状态时禁用颜色
+   */
+  --o-info4: #f7f8fa;
+  /**
+   * @name 一级容器背景色
+   * @type color
+   * @group background
+   * @description 用于页面整体背景色
+   */
+  --o-bg1: #f5f6f8;
+  /**
+   * @name 二级容器背景色
+   * @type color
+   * @group background
+   * @description 用于区块、卡片、弹出框、tooltip背景色
+   */
+  --o-bg2: #ffffff;
+  /**
+   * @name 三级容器背景色
+   * @type color
+   * @group background
+   * @description 用于区块卡片背景色
+   */
+  --o-bg3: #f7f8fa;
+  /**
+   * @name 四级容器背景色
+   * @type color
+   * @group background
+   * @description 用于区块、卡片、表头背景色
+   */
+  --o-bg4: #e5e8f0;
+  /**
+   * @name 标题色
+   * @type color
+   * @group text
+   * @description 用于强调、标题颜色
+   */
+  --o-text1: #000000;
+  /**
+   * @name 标题反色
+   * @type color
+   * @group text
+   * @description 用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题
+   */
+  --o-text1_inverse: #ffffff;
+  /**
+   * @name 正文色
+   * @type color
+   * @group text
+   * @description 用于次强调、次级标题、正文颜色
+   */
+  --o-text2: #3f3f3f;
+  /**
+   * @name 正文反色
+   * @type color
+   * @group text
+   * @description 用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文
+   */
+  --o-text2_inverse: #e5e5e5;
+  /**
+   * @name 提示色
+   * @type color
+   * @group text
+   * @description 用于提示文本颜色
+   */
+  --o-text3: #707070;
+  /**
+   * @name 提示反色
+   * @type color
+   * @group text
+   * @description 用于提示文本颜色的反色，例如浅色模式下的深色背景上的提示
+   */
+  --o-text3_inverse: #b2b2b2;
+  /**
+   * @name 置灰色
+   * @type color
+   * @group text
+   * @description 用于禁用文本颜色
+   */
+  --o-text4: #cccccc;
+  /**
+   * @name 置灰反色
+   * @type color
+   * @group text
+   * @description 用于禁用文本颜色的反色，例如浅色模式下的深色背景上的禁用文本
+   */
+  --o-text4_inverse: #e5e5e5;
+  /**
+   * @name 边框色
+   * @type color
+   * @group border
+   * @description 较明显的边框
+   */
+  --o-border1: #707070;
+  /**
+   * @name 弱边框色
+   * @type color
+   * @group border
+   * @description 较弱的边框
+   */
+  --o-border2: #e5e5e5;
+  /**
+   * @name 分隔线色1
+   * @type color
+   * @group division
+   * @description 用于分隔线颜色
+   */
+  --o-division1: #707070;
+  /**
+   * @name 遮罩色1
+   * @type mask
+   * @group mask
+   * @description 用于弹窗遮罩色
+   */
+  --o-mask1: rgba(0, 0, 0, 0.5);
+  /**
+   * @name 阴影色1
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片、小弹窗、楼层阴影
+   */
+  --o-shadow-1: 0 1px 5px rgba(45, 47, 51, 0.1);
+  /**
+   * @name 阴影色2
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片悬浮阴影
+   */
+  --o-shadow-2: 0 6px 18px rgba(0, 47, 167, 0.14);
+  /**
+   * @name 阴影色3
+   * @type shadow
+   * @group shadow
+   * @description 用于提示阴影
+   */
+  --o-shadow-3: 0 10px 32px rgba(45, 47, 51, 0.18);
+  /**
+   * @name 间距1
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距1
+   */
+  --o-gap-1: 4px;
+  /**
+   * @name 间距2
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距2
+   */
+  --o-gap-2: 8px;
+  /**
+   * @name 间距3
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距3
+   */
+  --o-gap-3: 12px;
+  /**
+   * @name 间距4
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距4
+   */
+  --o-gap-4: 16px;
+  /**
+   * @name 间距5
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距5
+   */
+  --o-gap-5: 24px;
+  /**
+   * @name 间距6
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距6
+   */
+  --o-gap-6: 32px;
+  /**
+   * @name 间距7
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距7
+   */
+  --o-gap-7: 40px;
+  /**
+   * @name 间距8
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距8
+   */
+  --o-gap-8: 64px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group size
+   * @description 尺寸
+   */
+  --o-size-l: 40px;
+  /**
+   * @name 中尺寸
+   * @type size
+   * @group size
+   * @description 尺寸
+   */
+  --o-size-m: 32px;
+  /**
+   * @name 小尺寸
+   * @type size
+   * @group size
+   * @description 小尺寸
+   */
+  --o-size-s: 24px;
+  /**
+   * @name 大尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 尺寸
+   */
+  --o-icon_size-l: 48px;
+  /**
+   * @name 中尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 尺寸
+   */
+  --o-icon_size-m: 32px;
+  /**
+   * @name 小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 小尺寸
+   */
+  --o-icon_size-s: 24px;
+  /**
+   * @name 超小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 小尺寸
+   */
+  --o-icon_size-xs: 16px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group font_size
+   * @description 一级数据展示
+   */
+  --o-font_size-display1: 64px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group font_size
+   * @description 二级数据展示
+   */
+  --o-font_size-display2: 54px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group font_size
+   * @description 三级数据展示
+   */
+  --o-font_size-display3: 36px;
+  /**
+   * @name 四级数据展示
+   * @type font
+   * @group font_size
+   * @description 四级数据展示
+   */
+  --o-font_size-display4: 28px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group font_size
+   * @description 一级标题
+   */
+  --o-font_size-h1: 24px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group font_size
+   * @description 二级标题
+   */
+  --o-font_size-h2: 20px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group font_size
+   * @description 三级标题
+   */
+  --o-font_size-h3: 18px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group font_size
+   * @description 四级标题
+   */
+  --o-font_size-h4: 16px;
+  /**
+   * @name 正文
+   * @type font
+   * @group font_size
+   * @description 正文
+   */
+  --o-font_size-text: 14px;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group font_size
+   * @description 提示文本1
+   */
+  --o-font_size-tip1: 12px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group font_size
+   * @description 提示文本2
+   */
+  --o-font_size-tip2: 10px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group line_height
+   * @description 一级数据展示
+   */
+  --o-line_height-display1: 84px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group line_height
+   * @description 二级数据展示
+   */
+  --o-line_height-display2: 76px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group line_height
+   * @description 三级数据展示
+   */
+  --o-line_height-display3: 48px;
+  /**
+   * @name 四级数据展示
+   * @type font
+   * @group line_height
+   * @description 四级数据展示
+   */
+  --o-line_height-display4: 36px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group line_height
+   * @description 一级标题
+   */
+  --o-line_height-h1: 32px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group line_height
+   * @description 二级标题
+   */
+  --o-line_height-h2: 28px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group line_height
+   * @description 三级标题
+   */
+  --o-line_height-h3: 26px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group line_height
+   * @description 四级标题
+   */
+  --o-line_height-h4: 24px;
+  /**
+   * @name 正文
+   * @type font
+   * @group line_height
+   * @description 正文
+   */
+  --o-line_height-text: 22px;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group line_height
+   * @description 提示文本1
+   */
+  --o-line_height-tip1: 18px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group line_height
+   * @description 提示文本2
+   */
+  --o-line_height-tip2: 14px;
+  /**
+   * @name 大尺寸圆角
+   * @type radius
+   * @group radius
+   * @description 大尺寸圆角
+   */
+  --o-radius-l: 16px;
+  /**
+   * @name 中尺寸圆角
+   * @type radius
+   * @group radius
+   * @description 中尺寸圆角
+   */
+  --o-radius-m: 8px;
+  /**
+   * @name 小尺寸圆角
+   * @type radius
+   * @group radius
+   * @description 小尺寸圆角
+   */
+  --o-radius-s: 4px;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于退出屏幕的动画
+   */
+  --o-duration-s: 200ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为standard-in时进入屏幕的动画
+   */
+  --o-duration-m1: 250ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为standard时开始、结束的动画
+   */
+  --o-duration-m2: 300ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为emphasized-in时进入屏幕的动画
+   */
+  --o-duration-m3: 400ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为emphasized时开始、结束的动画
+   */
+  --o-duration-l: 500ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为emphasized时，轮播切换动画
+   */
+  --o-duration-xl: 1000ms;
+  /**
+   * @name 线性动画曲线
+   * @type animation
+   * @group easing
+   * @description 线性曲线
+   */
+  --o-easing-linear: cubic-bezier(0, 0, 1, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于组件
+   */
+  --o-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于组件
+   */
+  --o-easing-standard-in: cubic-bezier(0, 0, 0, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于组件
+   */
+  --o-easing-standard-out: cubic-bezier(0.3, 0, 1, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于大卡片、场景切换
+   */
+  --o-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于大卡片、场景切换
+   */
+  --o-easing-emphasized-in: cubic-bezier(0.3, 0, 0.8, 0.15);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于大卡片、场景切换
+   */
+  --o-easing-emphasized-out: cubic-bezier(0.05, 0.7, 0.1, 1);
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/components/style/default.light.token.css b/packages/opendesign/src/components/style/default.light.token.css
new file mode 100644
index 00000000..a30bb4c0
--- /dev/null
+++ b/packages/opendesign/src/components/style/default.light.token.css
@@ -0,0 +1,655 @@
+/* theme: default,light */
+:root,
+:root[theme="light"] {
+  /**
+   * @name 常规色
+   * @type color
+   * @group primary
+   * @description 用于按钮、文本、链接强调状态时常规颜色
+   */
+  --o-color-primary1: #002fa7;
+  /**
+   * @name 悬浮色
+   * @type color
+   * @group primary
+   * @description 用于按钮、文本、链接强调状态时悬浮颜色
+   */
+  --o-color-primary2: #406fe7;
+  /**
+   * @name 聚焦色
+   * @type color
+   * @group primary
+   * @description 用于按钮、文本、链接强调状态时聚焦颜色
+   */
+  --o-color-primary3: #00288d;
+  /**
+   * @name 禁用色
+   * @type color
+   * @group primary
+   * @description 用于按钮、文本、链接强调状态时禁用颜色
+   */
+  --o-color-primary4: #b2c0e4;
+  /**
+   * @name 常规色
+   * @type color
+   * @group major
+   * @description 用于按钮、文本、链接major状态时文本颜色
+   */
+  --o-color-major1: #feb32a;
+  /**
+   * @name 常规色
+   * @type color
+   * @group success
+   * @description 用于按钮、文本、链接成功状态时常规颜色
+   */
+  --o-color-success1: #6dc335;
+  /**
+   * @name 悬浮色
+   * @type color
+   * @group success
+   * @description 用于按钮、文本、链接成功状态时悬浮颜色
+   */
+  --o-color-success2: #93e95b;
+  /**
+   * @name 聚焦色
+   * @type color
+   * @group success
+   * @description 用于按钮、文本、链接成功状态时聚焦颜色
+   */
+  --o-color-success3: #62af30;
+  /**
+   * @name 禁用色
+   * @type color
+   * @group success
+   * @description 用于按钮、文本、链接成功状态时禁用颜色
+   */
+  --o-color-success4: #c5e7ae;
+  /**
+   * @name 常规色
+   * @type color
+   * @group warning
+   * @description 用于按钮、文本、链接告警状态时常规颜色
+   */
+  --o-color-warning1: #ff8e36;
+  /**
+   * @name 悬浮色
+   * @type color
+   * @group warning
+   * @description 用于按钮、文本、链接告警状态时悬浮颜色
+   */
+  --o-color-warning2: #ffb45c;
+  /**
+   * @name 聚焦色
+   * @type color
+   * @group warning
+   * @description 用于按钮、文本、链接告警状态时聚焦颜色
+   */
+  --o-color-warning3: #ff801c;
+  /**
+   * @name 禁用色
+   * @type color
+   * @group warning
+   * @description 用于按钮、文本、链接告警状态时禁用颜色
+   */
+  --o-color-warning4: #ffd2af;
+  /**
+   * @name 常规色
+   * @type color
+   * @group danger
+   * @description 用于按钮、文本、链接错误状态时常规颜色
+   */
+  --o-color-danger1: #f3524d;
+  /**
+   * @name 悬浮色
+   * @type color
+   * @group danger
+   * @description 用于按钮、文本、链接错误状态时悬浮颜色
+   */
+  --o-color-danger2: #ff7873;
+  /**
+   * @name 聚焦色
+   * @type color
+   * @group danger
+   * @description 用于按钮、文本、链接错误状态时聚焦颜色
+   */
+  --o-color-danger3: #f13b35;
+  /**
+   * @name 禁用色
+   * @type color
+   * @group danger
+   * @description 用于按钮、文本、链接错误状态时禁用颜色
+   */
+  --o-color-danger4: #fabab8;
+  /**
+   * @name 常规色
+   * @type color
+   * @group info
+   * @description 用于按钮、文本、链接信息状态时常规颜色
+   */
+  --o-color-info1: #e5e5e5;
+  /**
+   * @name 悬浮色
+   * @type color
+   * @group info
+   * @description 用于按钮、文本、链接信息状态时悬浮颜色
+   */
+  --o-color-info2: #e5e8f0;
+  /**
+   * @name 聚焦色
+   * @type color
+   * @group info
+   * @description 用于按钮、文本、链接信息状态时聚焦颜色
+   */
+  --o-color-info3: #cccccc;
+  /**
+   * @name 禁用色
+   * @type color
+   * @group info
+   * @description 用于按钮、文本、链接信息状态时禁用颜色
+   */
+  --o-color-info4: #f7f8fa;
+  /**
+   * @name 一级容器背景色
+   * @type color
+   * @group background
+   * @description 用于页面整体背景色
+   */
+  --o-color-bg1: #f5f6f8;
+  /**
+   * @name 二级容器背景色
+   * @type color
+   * @group background
+   * @description 用于区块、卡片、弹出框、tooltip背景色
+   */
+  --o-color-bg2: #ffffff;
+  /**
+   * @name 三级容器背景色
+   * @type color
+   * @group background
+   * @description 用于区块卡片背景色
+   */
+  --o-color-bg3: #f7f8fa;
+  /**
+   * @name 四级容器背景色
+   * @type color
+   * @group background
+   * @description 用于区块、卡片、表头背景色
+   */
+  --o-color-bg4: #e5e8f0;
+  /**
+   * @name 标题色
+   * @type color
+   * @group text
+   * @description 用于强调、标题颜色
+   */
+  --o-color-text1: #000000;
+  /**
+   * @name 标题反色
+   * @type color
+   * @group text
+   * @description 用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题
+   */
+  --o-color-text1_inverse: #ffffff;
+  /**
+   * @name 正文色
+   * @type color
+   * @group text
+   * @description 用于次强调、次级标题、正文颜色
+   */
+  --o-color-text2: #3f3f3f;
+  /**
+   * @name 正文反色
+   * @type color
+   * @group text
+   * @description 用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文
+   */
+  --o-color-text2_inverse: #e5e5e5;
+  /**
+   * @name 提示色
+   * @type color
+   * @group text
+   * @description 用于提示文本颜色
+   */
+  --o-color-text3: #707070;
+  /**
+   * @name 提示反色
+   * @type color
+   * @group text
+   * @description 用于提示文本颜色的反色，例如浅色模式下的深色背景上的提示
+   */
+  --o-color-text3_inverse: #b2b2b2;
+  /**
+   * @name 置灰色
+   * @type color
+   * @group text
+   * @description 用于禁用文本颜色
+   */
+  --o-color-text4: #cccccc;
+  /**
+   * @name 置灰反色
+   * @type color
+   * @group text
+   * @description 用于禁用文本颜色的反色，例如浅色模式下的深色背景上的禁用文本
+   */
+  --o-color-text4_inverse: #e5e5e5;
+  /**
+   * @name 边框色
+   * @type color
+   * @group border
+   * @description 较明显的边框
+   */
+  --o-color-border1: #707070;
+  /**
+   * @name 弱边框色
+   * @type color
+   * @group border
+   * @description 较弱的边框
+   */
+  --o-color-border2: #e5e5e5;
+  /**
+   * @name 分隔线色1
+   * @type color
+   * @group division
+   * @description 用于分隔线颜色
+   */
+  --o-color-division1: #707070;
+  /**
+   * @name 遮罩色1
+   * @type mask
+   * @group mask
+   * @description 用于弹窗遮罩色
+   */
+  --o-color-mask1: rgba(0, 0, 0, 0.5);
+  /**
+   * @name 阴影色1
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片、小弹窗、楼层阴影
+   */
+  --o-shadow-1: 0 1px 5px rgba(45, 47, 51, 0.1);
+  /**
+   * @name 阴影色2
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片悬浮阴影
+   */
+  --o-shadow-2: 0 6px 18px rgba(0, 47, 167, 0.14);
+  /**
+   * @name 阴影色3
+   * @type shadow
+   * @group shadow
+   * @description 用于提示阴影
+   */
+  --o-shadow-3: 0 10px 32px rgba(45, 47, 51, 0.18);
+  /**
+   * @name 间距1
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距1
+   */
+  --o-gap-1: 4px;
+  /**
+   * @name 间距2
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距2
+   */
+  --o-gap-2: 8px;
+  /**
+   * @name 间距3
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距3
+   */
+  --o-gap-3: 12px;
+  /**
+   * @name 间距4
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距4
+   */
+  --o-gap-4: 16px;
+  /**
+   * @name 间距5
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距5
+   */
+  --o-gap-5: 24px;
+  /**
+   * @name 间距6
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距6
+   */
+  --o-gap-6: 32px;
+  /**
+   * @name 间距7
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距7
+   */
+  --o-gap-7: 40px;
+  /**
+   * @name 间距8
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距8
+   */
+  --o-gap-8: 64px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group size
+   * @description 尺寸
+   */
+  --o-size-l: 40px;
+  /**
+   * @name 中尺寸
+   * @type size
+   * @group size
+   * @description 尺寸
+   */
+  --o-size-m: 32px;
+  /**
+   * @name 小尺寸
+   * @type size
+   * @group size
+   * @description 小尺寸
+   */
+  --o-size-s: 24px;
+  /**
+   * @name 大尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 尺寸
+   */
+  --o-icon_size-l: 48px;
+  /**
+   * @name 中尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 尺寸
+   */
+  --o-icon_size-m: 32px;
+  /**
+   * @name 小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 小尺寸
+   */
+  --o-icon_size-s: 24px;
+  /**
+   * @name 超小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 小尺寸
+   */
+  --o-icon_size-xs: 16px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group font_size
+   * @description 一级数据展示
+   */
+  --o-font_size-display1: 64px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group font_size
+   * @description 二级数据展示
+   */
+  --o-font_size-display2: 54px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group font_size
+   * @description 三级数据展示
+   */
+  --o-font_size-display3: 36px;
+  /**
+   * @name 四级数据展示
+   * @type font
+   * @group font_size
+   * @description 四级数据展示
+   */
+  --o-font_size-display4: 28px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group font_size
+   * @description 一级标题
+   */
+  --o-font_size-h1: 24px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group font_size
+   * @description 二级标题
+   */
+  --o-font_size-h2: 20px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group font_size
+   * @description 三级标题
+   */
+  --o-font_size-h3: 18px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group font_size
+   * @description 四级标题
+   */
+  --o-font_size-h4: 16px;
+  /**
+   * @name 正文
+   * @type font
+   * @group font_size
+   * @description 正文
+   */
+  --o-font_size-text: 14px;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group font_size
+   * @description 提示文本1
+   */
+  --o-font_size-tip1: 12px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group font_size
+   * @description 提示文本2
+   */
+  --o-font_size-tip2: 10px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group line_height
+   * @description 一级数据展示
+   */
+  --o-line_height-display1: 84px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group line_height
+   * @description 二级数据展示
+   */
+  --o-line_height-display2: 76px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group line_height
+   * @description 三级数据展示
+   */
+  --o-line_height-display3: 48px;
+  /**
+   * @name 四级数据展示
+   * @type font
+   * @group line_height
+   * @description 四级数据展示
+   */
+  --o-line_height-display4: 36px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group line_height
+   * @description 一级标题
+   */
+  --o-line_height-h1: 32px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group line_height
+   * @description 二级标题
+   */
+  --o-line_height-h2: 28px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group line_height
+   * @description 三级标题
+   */
+  --o-line_height-h3: 26px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group line_height
+   * @description 四级标题
+   */
+  --o-line_height-h4: 24px;
+  /**
+   * @name 正文
+   * @type font
+   * @group line_height
+   * @description 正文
+   */
+  --o-line_height-text: 22px;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group line_height
+   * @description 提示文本1
+   */
+  --o-line_height-tip1: 18px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group line_height
+   * @description 提示文本2
+   */
+  --o-line_height-tip2: 14px;
+  /**
+   * @name 大尺寸圆角
+   * @type radius
+   * @group radius
+   * @description 大尺寸圆角
+   */
+  --o-radius-l: 16px;
+  /**
+   * @name 中尺寸圆角
+   * @type radius
+   * @group radius
+   * @description 中尺寸圆角
+   */
+  --o-radius-m: 8px;
+  /**
+   * @name 小尺寸圆角
+   * @type radius
+   * @group radius
+   * @description 小尺寸圆角
+   */
+  --o-radius-s: 4px;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于退出屏幕的动画
+   */
+  --o-duration-s: 200ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为standard-in时进入屏幕的动画
+   */
+  --o-duration-m1: 250ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为standard时开始、结束的动画
+   */
+  --o-duration-m2: 300ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为emphasized-in时进入屏幕的动画
+   */
+  --o-duration-m3: 400ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为emphasized时开始、结束的动画
+   */
+  --o-duration-l: 500ms;
+  /**
+   * @name 持续时间
+   * @type animation
+   * @group duration
+   * @description 用于当曲线为emphasized时，轮播切换动画
+   */
+  --o-duration-xl: 1000ms;
+  /**
+   * @name 线性动画曲线
+   * @type animation
+   * @group easing
+   * @description 线性曲线
+   */
+  --o-easing-linear: cubic-bezier(0, 0, 1, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于组件
+   */
+  --o-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于组件
+   */
+  --o-easing-standard-in: cubic-bezier(0, 0, 0, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于组件
+   */
+  --o-easing-standard-out: cubic-bezier(0.3, 0, 1, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于大卡片、场景切换
+   */
+  --o-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于大卡片、场景切换
+   */
+  --o-easing-emphasized-in: cubic-bezier(0.3, 0, 0.8, 0.15);
+  /**
+   * @name 动画曲线
+   * @type animation
+   * @group easing
+   * @description 用于大卡片、场景切换
+   */
+  --o-easing-emphasized-out: cubic-bezier(0.05, 0.7, 0.1, 1);
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/tokens/dark.color.json b/packages/opendesign/src/tokens/dark.color.json
new file mode 100644
index 00000000..e920354c
--- /dev/null
+++ b/packages/opendesign/src/tokens/dark.color.json
@@ -0,0 +1,314 @@
+{
+  "primary": {
+    "name": "主色",
+    "type": "color",
+    "value": [
+      {
+        "key": "primary1",
+        "value": "#002fa7",
+        "name": "常规色",
+        "description": "用于按钮、文本、链接强调状态时常规颜色"
+      },
+      {
+        "key": "primary2",
+        "value": "#406fe7",
+        "name": "悬浮色",
+        "description": "用于按钮、文本、链接强调状态时悬浮颜色"
+      },
+      {
+        "key": "primary3",
+        "value": "#00288d",
+        "name": "聚焦色",
+        "description": "用于按钮、文本、链接强调状态时聚焦颜色"
+      },
+      {
+        "key": "primary4",
+        "value": "#b2c0e4",
+        "name": "禁用色",
+        "description": "用于按钮、文本、链接强调状态时禁用颜色"
+      }
+    ]
+  },
+  "major": {
+    "name": "辅色",
+    "type": "color",
+    "value": [
+      {
+        "key": "major1",
+        "value": "#feb32a",
+        "name": "常规色",
+        "description": "用于按钮、文本、链接major状态时文本颜色"
+      }
+    ]
+  },
+  "success": {
+    "name": "成功色",
+    "type": "color",
+    "value": [
+      {
+        "key": "success1",
+        "value": "#6dc335",
+        "name": "常规色",
+        "description": "用于按钮、文本、链接成功状态时常规颜色"
+      },
+      {
+        "key": "success2",
+        "value": "#93e95b",
+        "name": "悬浮色",
+        "description": "用于按钮、文本、链接成功状态时悬浮颜色"
+      },
+      {
+        "key": "success3",
+        "value": "#62af30",
+        "name": "聚焦色",
+        "description": "用于按钮、文本、链接成功状态时聚焦颜色"
+      },
+      {
+        "key": "success4",
+        "value": "#c5e7ae",
+        "name": "禁用色",
+        "description": "用于按钮、文本、链接成功状态时禁用颜色"
+      }
+    ]
+  },
+  "warning": {
+    "name": "告警色",
+    "type": "color",
+    "value": [
+      {
+        "key": "warning1",
+        "value": "#ff8e36",
+        "name": "常规色",
+        "description": "用于按钮、文本、链接告警状态时常规颜色"
+      },
+      {
+        "key": "warning2",
+        "value": "#ffb45c",
+        "name": "悬浮色",
+        "description": "用于按钮、文本、链接告警状态时悬浮颜色"
+      },
+      {
+        "key": "warning3",
+        "value": "#ff801c",
+        "name": "聚焦色",
+        "description": "用于按钮、文本、链接告警状态时聚焦颜色"
+      },
+      {
+        "key": "warning4",
+        "value": "#ffd2af",
+        "name": "禁用色",
+        "description": "用于按钮、文本、链接告警状态时禁用颜色"
+      }
+    ]
+  },
+  "danger": {
+    "name": "错误色",
+    "type": "color",
+    "value": [
+      {
+        "key": "danger1",
+        "value": "#f3524d",
+        "name": "常规色",
+        "description": "用于按钮、文本、链接错误状态时常规颜色"
+      },
+      {
+        "key": "danger2",
+        "value": "#ff7873",
+        "name": "悬浮色",
+        "description": "用于按钮、文本、链接错误状态时悬浮颜色"
+      },
+      {
+        "key": "danger3",
+        "value": "#f13b35",
+        "name": "聚焦色",
+        "description": "用于按钮、文本、链接错误状态时聚焦颜色"
+      },
+      {
+        "key": "danger4",
+        "value": "#fabab8",
+        "name": "禁用色",
+        "description": "用于按钮、文本、链接错误状态时禁用颜色"
+      }
+    ]
+  },
+  "info": {
+    "name": "信息色",
+    "type": "color",
+    "value": [
+      {
+        "key": "info1",
+        "value": "#e5e5e5",
+        "name": "常规色",
+        "description": "用于按钮、文本、链接信息状态时常规颜色"
+      },
+      {
+        "key": "info2",
+        "value": "#e5e8f0",
+        "name": "悬浮色",
+        "description": "用于按钮、文本、链接信息状态时悬浮颜色"
+      },
+      {
+        "key": "info3",
+        "value": "#cccccc",
+        "name": "聚焦色",
+        "description": "用于按钮、文本、链接信息状态时聚焦颜色"
+      },
+      {
+        "key": "info4",
+        "value": "#f7f8fa",
+        "name": "禁用色",
+        "description": "用于按钮、文本、链接信息状态时禁用颜色"
+      }
+    ]
+  },
+  "background": {
+    "name": "背景色",
+    "type": "color",
+    "value": [
+      {
+        "key": "bg1",
+        "value": "#f5f6f8",
+        "name": "一级容器背景色",
+        "description": "用于页面整体背景色"
+      },
+      {
+        "key": "bg2",
+        "value": "#ffffff",
+        "name": "二级容器背景色",
+        "description": "用于区块、卡片、弹出框、tooltip背景色"
+      },
+      {
+        "key": "bg3",
+        "value": "#f7f8fa",
+        "name": "三级容器背景色",
+        "description": "用于区块卡片背景色"
+      },
+      {
+        "key": "bg4",
+        "value": "#e5e8f0",
+        "name": "四级容器背景色",
+        "description": "用于区块、卡片、表头背景色"
+      }
+    ]
+  },
+  "text": {
+    "name": "文字色",
+    "type": "color",
+    "value": [
+      {
+        "key": "text1",
+        "value": "#000000",
+        "name": "标题色",
+        "description": "用于强调、标题颜色"
+      },
+      {
+        "key": "text1_inverse",
+        "value": "#ffffff",
+        "name": "标题反色",
+        "description": "用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题"
+      },
+      {
+        "key": "text2",
+        "value": "#3f3f3f",
+        "name": "正文色",
+        "description": "用于次强调、次级标题、正文颜色"
+      },
+      {
+        "key": "text2_inverse",
+        "value": "#e5e5e5",
+        "name": "正文反色",
+        "description": "用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文"
+      },
+      {
+        "key": "text3",
+        "value": "#707070",
+        "name": "提示色",
+        "description": "用于提示文本颜色"
+      },
+      {
+        "key": "text3_inverse",
+        "value": "#b2b2b2",
+        "name": "提示反色",
+        "description": "用于提示文本颜色的反色，例如浅色模式下的深色背景上的提示"
+      },
+      {
+        "key": "text4",
+        "value": "#cccccc",
+        "name": "置灰色",
+        "description": "用于禁用文本颜色"
+      },
+      {
+        "key": "text4_inverse",
+        "value": "#e5e5e5",
+        "name": "置灰反色",
+        "description": "用于禁用文本颜色的反色，例如浅色模式下的深色背景上的禁用文本"
+      }
+    ]
+  },
+  "border": {
+    "name": "边框色",
+    "type": "color",
+    "value": [
+      {
+        "key": "border1",
+        "value": "#707070",
+        "name": "边框色",
+        "description": "较明显的边框"
+      },
+      {
+        "key": "border2",
+        "value": "#e5e5e5",
+        "name": "弱边框色",
+        "description": "较弱的边框"
+      }
+    ]
+  },
+  "division": {
+    "name": "分隔线色",
+    "type": "color",
+    "value": [
+      {
+        "key": "division1",
+        "value": "#707070",
+        "name": "分隔线色1",
+        "description": "用于分隔线颜色"
+      }
+    ]
+  },
+  "mask": {
+    "name": "遮罩色",
+    "type": "mask",
+    "value": [
+      {
+        "key": "mask1",
+        "value": "rgba(0, 0, 0, 0.5)",
+        "name": "遮罩色1",
+        "description": "用于弹窗遮罩色"
+      }
+    ]
+  },
+  "shadow": {
+    "name": "阴影色",
+    "type": "shadow",
+    "value": [
+      {
+        "key": "shadow-1",
+        "value": "0 1px 5px rgba(45, 47, 51, 0.1)",
+        "name": "阴影色1",
+        "description": "用于卡片、小弹窗、楼层阴影"
+      },
+      {
+        "key": "shadow-2",
+        "value": "0 6px 18px rgba(0, 47, 167, 0.14)",
+        "name": "阴影色2",
+        "description": "用于卡片悬浮阴影"
+      },
+      {
+        "key": "shadow-3",
+        "value": "0 10px 32px rgba(45, 47, 51, 0.18)",
+        "name": "阴影色3",
+        "description": "用于提示阴影"
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/tokens/light.color.json b/packages/opendesign/src/tokens/light.color.json
new file mode 100644
index 00000000..223032ba
--- /dev/null
+++ b/packages/opendesign/src/tokens/light.color.json
@@ -0,0 +1,314 @@
+{
+  "primary": {
+    "name": "主色",
+    "type": "color",
+    "value": [
+      {
+        "key": "color-primary1",
+        "value": "#002fa7",
+        "name": "常规色",
+        "description": "用于按钮、文本、链接强调状态时常规颜色"
+      },
+      {
+        "key": "color-primary2",
+        "value": "#406fe7",
+        "name": "悬浮色",
+        "description": "用于按钮、文本、链接强调状态时悬浮颜色"
+      },
+      {
+        "key": "color-primary3",
+        "value": "#00288d",
+        "name": "聚焦色",
+        "description": "用于按钮、文本、链接强调状态时聚焦颜色"
+      },
+      {
+        "key": "color-primary4",
+        "value": "#b2c0e4",
+        "name": "禁用色",
+        "description": "用于按钮、文本、链接强调状态时禁用颜色"
+      }
+    ]
+  },
+  "major": {
+    "name": "辅色",
+    "type": "color",
+    "value": [
+      {
+        "key": "color-major1",
+        "value": "#feb32a",
+        "name": "常规色",
+        "description": "用于按钮、文本、链接major状态时文本颜色"
+      }
+    ]
+  },
+  "success": {
+    "name": "成功色",
+    "type": "color",
+    "value": [
+      {
+        "key": "color-success1",
+        "value": "#6dc335",
+        "name": "常规色",
+        "description": "用于按钮、文本、链接成功状态时常规颜色"
+      },
+      {
+        "key": "color-success2",
+        "value": "#93e95b",
+        "name": "悬浮色",
+        "description": "用于按钮、文本、链接成功状态时悬浮颜色"
+      },
+      {
+        "key": "color-success3",
+        "value": "#62af30",
+        "name": "聚焦色",
+        "description": "用于按钮、文本、链接成功状态时聚焦颜色"
+      },
+      {
+        "key": "color-success4",
+        "value": "#c5e7ae",
+        "name": "禁用色",
+        "description": "用于按钮、文本、链接成功状态时禁用颜色"
+      }
+    ]
+  },
+  "warning": {
+    "name": "告警色",
+    "type": "color",
+    "value": [
+      {
+        "key": "color-warning1",
+        "value": "#ff8e36",
+        "name": "常规色",
+        "description": "用于按钮、文本、链接告警状态时常规颜色"
+      },
+      {
+        "key": "color-warning2",
+        "value": "#ffb45c",
+        "name": "悬浮色",
+        "description": "用于按钮、文本、链接告警状态时悬浮颜色"
+      },
+      {
+        "key": "color-warning3",
+        "value": "#ff801c",
+        "name": "聚焦色",
+        "description": "用于按钮、文本、链接告警状态时聚焦颜色"
+      },
+      {
+        "key": "color-warning4",
+        "value": "#ffd2af",
+        "name": "禁用色",
+        "description": "用于按钮、文本、链接告警状态时禁用颜色"
+      }
+    ]
+  },
+  "danger": {
+    "name": "错误色",
+    "type": "color",
+    "value": [
+      {
+        "key": "color-danger1",
+        "value": "#f3524d",
+        "name": "常规色",
+        "description": "用于按钮、文本、链接错误状态时常规颜色"
+      },
+      {
+        "key": "color-danger2",
+        "value": "#ff7873",
+        "name": "悬浮色",
+        "description": "用于按钮、文本、链接错误状态时悬浮颜色"
+      },
+      {
+        "key": "color-danger3",
+        "value": "#f13b35",
+        "name": "聚焦色",
+        "description": "用于按钮、文本、链接错误状态时聚焦颜色"
+      },
+      {
+        "key": "color-danger4",
+        "value": "#fabab8",
+        "name": "禁用色",
+        "description": "用于按钮、文本、链接错误状态时禁用颜色"
+      }
+    ]
+  },
+  "info": {
+    "name": "信息色",
+    "type": "color",
+    "value": [
+      {
+        "key": "color-info1",
+        "value": "#e5e5e5",
+        "name": "常规色",
+        "description": "用于按钮、文本、链接信息状态时常规颜色"
+      },
+      {
+        "key": "color-info2",
+        "value": "#e5e8f0",
+        "name": "悬浮色",
+        "description": "用于按钮、文本、链接信息状态时悬浮颜色"
+      },
+      {
+        "key": "color-info3",
+        "value": "#cccccc",
+        "name": "聚焦色",
+        "description": "用于按钮、文本、链接信息状态时聚焦颜色"
+      },
+      {
+        "key": "color-info4",
+        "value": "#f7f8fa",
+        "name": "禁用色",
+        "description": "用于按钮、文本、链接信息状态时禁用颜色"
+      }
+    ]
+  },
+  "background": {
+    "name": "背景色",
+    "type": "color",
+    "value": [
+      {
+        "key": "color-bg1",
+        "value": "#f5f6f8",
+        "name": "一级容器背景色",
+        "description": "用于页面整体背景色"
+      },
+      {
+        "key": "color-bg2",
+        "value": "#ffffff",
+        "name": "二级容器背景色",
+        "description": "用于区块、卡片、弹出框、tooltip背景色"
+      },
+      {
+        "key": "color-bg3",
+        "value": "#f7f8fa",
+        "name": "三级容器背景色",
+        "description": "用于区块卡片背景色"
+      },
+      {
+        "key": "color-bg4",
+        "value": "#e5e8f0",
+        "name": "四级容器背景色",
+        "description": "用于区块、卡片、表头背景色"
+      }
+    ]
+  },
+  "text": {
+    "name": "文字色",
+    "type": "color",
+    "value": [
+      {
+        "key": "color-text1",
+        "value": "#000000",
+        "name": "标题色",
+        "description": "用于强调、标题颜色"
+      },
+      {
+        "key": "color-text1_inverse",
+        "value": "#ffffff",
+        "name": "标题反色",
+        "description": "用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题"
+      },
+      {
+        "key": "color-text2",
+        "value": "#3f3f3f",
+        "name": "正文色",
+        "description": "用于次强调、次级标题、正文颜色"
+      },
+      {
+        "key": "color-text2_inverse",
+        "value": "#e5e5e5",
+        "name": "正文反色",
+        "description": "用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文"
+      },
+      {
+        "key": "color-text3",
+        "value": "#707070",
+        "name": "提示色",
+        "description": "用于提示文本颜色"
+      },
+      {
+        "key": "color-text3_inverse",
+        "value": "#b2b2b2",
+        "name": "提示反色",
+        "description": "用于提示文本颜色的反色，例如浅色模式下的深色背景上的提示"
+      },
+      {
+        "key": "color-text4",
+        "value": "#cccccc",
+        "name": "置灰色",
+        "description": "用于禁用文本颜色"
+      },
+      {
+        "key": "color-text4_inverse",
+        "value": "#e5e5e5",
+        "name": "置灰反色",
+        "description": "用于禁用文本颜色的反色，例如浅色模式下的深色背景上的禁用文本"
+      }
+    ]
+  },
+  "border": {
+    "name": "边框色",
+    "type": "color",
+    "value": [
+      {
+        "key": "color-border1",
+        "value": "#707070",
+        "name": "边框色",
+        "description": "较明显的边框"
+      },
+      {
+        "key": "color-border2",
+        "value": "#e5e5e5",
+        "name": "弱边框色",
+        "description": "较弱的边框"
+      }
+    ]
+  },
+  "division": {
+    "name": "分隔线色",
+    "type": "color",
+    "value": [
+      {
+        "key": "color-division1",
+        "value": "#707070",
+        "name": "分隔线色1",
+        "description": "用于分隔线颜色"
+      }
+    ]
+  },
+  "mask": {
+    "name": "遮罩色",
+    "type": "mask",
+    "value": [
+      {
+        "key": "color-mask1",
+        "value": "rgba(0, 0, 0, 0.5)",
+        "name": "遮罩色1",
+        "description": "用于弹窗遮罩色"
+      }
+    ]
+  },
+  "shadow": {
+    "name": "阴影色",
+    "type": "shadow",
+    "value": [
+      {
+        "key": "shadow-1",
+        "value": "0 1px 5px rgba(45, 47, 51, 0.1)",
+        "name": "阴影色1",
+        "description": "用于卡片、小弹窗、楼层阴影"
+      },
+      {
+        "key": "shadow-2",
+        "value": "0 6px 18px rgba(0, 47, 167, 0.14)",
+        "name": "阴影色2",
+        "description": "用于卡片悬浮阴影"
+      },
+      {
+        "key": "shadow-3",
+        "value": "0 10px 32px rgba(45, 47, 51, 0.18)",
+        "name": "阴影色3",
+        "description": "用于提示阴影"
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/tokens/size.json b/packages/opendesign/src/tokens/size.json
new file mode 100644
index 00000000..831ad5ac
--- /dev/null
+++ b/packages/opendesign/src/tokens/size.json
@@ -0,0 +1,368 @@
+{
+  "gap": {
+    "name": "间距",
+    "type": "gap",
+    "value": [
+      {
+        "key": "gap-1",
+        "value": "4px",
+        "name": "间距1",
+        "description": "用于组件之间的间距1"
+      },
+      {
+        "key": "gap-2",
+        "value": "8px",
+        "name": "间距2",
+        "description": "用于组件之间的间距2"
+      },
+      {
+        "key": "gap-3",
+        "value": "12px",
+        "name": "间距3",
+        "description": "用于组件之间的间距3"
+      },
+      {
+        "key": "gap-4",
+        "value": "16px",
+        "name": "间距4",
+        "description": "用于组件之间的间距4"
+      },
+      {
+        "key": "gap-5",
+        "value": "24px",
+        "name": "间距5",
+        "description": "用于组件之间的间距5"
+      },
+      {
+        "key": "gap-6",
+        "value": "32px",
+        "name": "间距6",
+        "description": "用于组件之间的间距6"
+      },
+      {
+        "key": "gap-7",
+        "value": "40px",
+        "name": "间距7",
+        "description": "用于组件之间的间距7"
+      },
+      {
+        "key": "gap-8",
+        "value": "64px",
+        "name": "间距8",
+        "description": "用于组件之间的间距8"
+      }
+    ]
+  },
+  "size": {
+    "name": "组件尺寸",
+    "type": "size",
+    "value": [
+      {
+        "key": "size-l",
+        "value": "40px",
+        "name": "大尺寸",
+        "description": "尺寸"
+      },
+      {
+        "key": "size-m",
+        "value": "32px",
+        "name": "中尺寸",
+        "description": "尺寸"
+      },
+      {
+        "key": "size-s",
+        "value": "24px",
+        "name": "小尺寸",
+        "description": "小尺寸"
+      }
+    ]
+  },
+  "icon_size": {
+    "name": "图标尺寸",
+    "type": "size",
+    "value": [
+      {
+        "key": "icon_size-l",
+        "value": "48px",
+        "name": "大尺寸图标",
+        "description": "尺寸"
+      },
+      {
+        "key": "icon_size-m",
+        "value": "32px",
+        "name": "中尺寸图标",
+        "description": "尺寸"
+      },
+      {
+        "key": "icon_size-s",
+        "value": "24px",
+        "name": "小尺寸图标",
+        "description": "小尺寸"
+      },
+      {
+        "key": "icon_size-xs",
+        "value": "16px",
+        "name": "超小尺寸图标",
+        "description": "小尺寸"
+      }
+    ]
+  },
+  "font_size": {
+    "name": "文本尺寸",
+    "type": "font",
+    "value": [
+      {
+        "key": "font_size-display1",
+        "value": "64px",
+        "name": "一级数据展示",
+        "description": "一级数据展示"
+      },
+      {
+        "key": "font_size-display2",
+        "value": "54px",
+        "name": "二级数据展示",
+        "description": "二级数据展示"
+      },
+      {
+        "key": "font_size-display3",
+        "value": "36px",
+        "name": "三级数据展示",
+        "description": "三级数据展示"
+      },
+      {
+        "key": "font_size-display4",
+        "value": "28px",
+        "name": "四级数据展示",
+        "description": "四级数据展示"
+      },
+      {
+        "key": "font_size-h1",
+        "value": "24px",
+        "name": "一级标题",
+        "description": "一级标题"
+      },
+      {
+        "key": "font_size-h2",
+        "value": "20px",
+        "name": "二级标题",
+        "description": "二级标题"
+      },
+      {
+        "key": "font_size-h3",
+        "value": "18px",
+        "name": "三级标题",
+        "description": "三级标题"
+      },
+      {
+        "key": "font_size-h4",
+        "value": "16px",
+        "name": "四级标题",
+        "description": "四级标题"
+      },
+      {
+        "key": "font_size-text",
+        "value": "14px",
+        "name": "正文",
+        "description": "正文"
+      },
+      {
+        "key": "font_size-tip1",
+        "value": "12px",
+        "name": "提示文本1",
+        "description": "提示文本1"
+      },
+      {
+        "key": "font_size-tip2",
+        "value": "10px",
+        "name": "提示文本2",
+        "description": "提示文本2"
+      }
+    ]
+  },
+  "line_height": {
+    "name": "文本行高",
+    "type": "font",
+    "value": [
+      {
+        "key": "line_height-display1",
+        "value": "84px",
+        "name": "一级数据展示",
+        "description": "一级数据展示"
+      },
+      {
+        "key": "line_height-display2",
+        "value": "76px",
+        "name": "二级数据展示",
+        "description": "二级数据展示"
+      },
+      {
+        "key": "line_height-display3",
+        "value": "48px",
+        "name": "三级数据展示",
+        "description": "三级数据展示"
+      },
+      {
+        "key": "line_height-display4",
+        "value": "36px",
+        "name": "四级数据展示",
+        "description": "四级数据展示"
+      },
+      {
+        "key": "line_height-h1",
+        "value": "32px",
+        "name": "一级标题",
+        "description": "一级标题"
+      },
+      {
+        "key": "line_height-h2",
+        "value": "28px",
+        "name": "二级标题",
+        "description": "二级标题"
+      },
+      {
+        "key": "line_height-h3",
+        "value": "26px",
+        "name": "三级标题",
+        "description": "三级标题"
+      },
+      {
+        "key": "line_height-h4",
+        "value": "24px",
+        "name": "四级标题",
+        "description": "四级标题"
+      },
+      {
+        "key": "line_height-text",
+        "value": "22px",
+        "name": "正文",
+        "description": "正文"
+      },
+      {
+        "key": "line_height-tip1",
+        "value": "18px",
+        "name": "提示文本1",
+        "description": "提示文本1"
+      },
+      {
+        "key": "line_height-tip2",
+        "value": "14px",
+        "name": "提示文本2",
+        "description": "提示文本2"
+      }
+    ]
+  },
+  "radius": {
+    "name": "圆角尺寸",
+    "type": "radius",
+    "value": [
+      {
+        "key": "radius-l",
+        "value": "16px",
+        "name": "大尺寸圆角",
+        "description": "大尺寸圆角"
+      },
+      {
+        "key": "radius-m",
+        "value": "8px",
+        "name": "中尺寸圆角",
+        "description": "中尺寸圆角"
+      },
+      {
+        "key": "radius-s",
+        "value": "4px",
+        "name": "小尺寸圆角",
+        "description": "小尺寸圆角"
+      }
+    ]
+  },
+  "duration": {
+    "name": "动画持续时间",
+    "type": "animation",
+    "value": [
+      {
+        "key": "duration-s",
+        "value": "200ms",
+        "name": "持续时间",
+        "description": "用于退出屏幕的动画"
+      },
+      {
+        "key": "duration-m1",
+        "value": "250ms",
+        "name": "持续时间",
+        "description": "用于当曲线为standard-in时进入屏幕的动画"
+      },
+      {
+        "key": "duration-m2",
+        "value": "300ms",
+        "name": "持续时间",
+        "description": "用于当曲线为standard时开始、结束的动画"
+      },
+      {
+        "key": "duration-m3",
+        "value": "400ms",
+        "name": "持续时间",
+        "description": "用于当曲线为emphasized-in时进入屏幕的动画"
+      },
+      {
+        "key": "duration-l",
+        "value": "500ms",
+        "name": "持续时间",
+        "description": "用于当曲线为emphasized时开始、结束的动画"
+      },
+      {
+        "key": "duration-xl",
+        "value": "1000ms",
+        "name": "持续时间",
+        "description": "用于当曲线为emphasized时，轮播切换动画"
+      }
+    ]
+  },
+  "easing": {
+    "name": "动画曲线",
+    "type": "animation",
+    "value": [
+      {
+        "key": "easing-linear",
+        "value": "cubic-bezier(0, 0, 1, 1)",
+        "name": "线性动画曲线",
+        "description": "线性曲线"
+      },
+      {
+        "key": "easing-standard",
+        "value": "cubic-bezier(0.2, 0, 0, 1)",
+        "name": "动画曲线",
+        "description": "用于组件"
+      },
+      {
+        "key": "easing-standard-in",
+        "value": "cubic-bezier(0, 0, 0, 1)",
+        "name": "动画曲线",
+        "description": "用于组件"
+      },
+      {
+        "key": "easing-standard-out",
+        "value": "cubic-bezier(0.3, 0, 1, 1)",
+        "name": "动画曲线",
+        "description": "用于组件"
+      },
+      {
+        "key": "easing-emphasized",
+        "value": "cubic-bezier(0.2, 0, 0, 1)",
+        "name": "动画曲线",
+        "description": "用于大卡片、场景切换"
+      },
+      {
+        "key": "easing-emphasized-in",
+        "value": "cubic-bezier(0.3, 0, 0.8, 0.15)",
+        "name": "动画曲线",
+        "description": "用于大卡片、场景切换"
+      },
+      {
+        "key": "easing-emphasized-out",
+        "value": "cubic-bezier(0.05, 0.7, 0.1, 1)",
+        "name": "动画曲线",
+        "description": "用于大卡片、场景切换"
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/tokens/token.config.ts b/packages/opendesign/src/tokens/token.config.ts
new file mode 100644
index 00000000..5a553d80
--- /dev/null
+++ b/packages/opendesign/src/tokens/token.config.ts
@@ -0,0 +1,15 @@
+module.exports = {
+  prefix: '--o-',
+  output: '../components/style/',
+  globalTokenFile: ['./size.json'],
+  tokens: [
+    {
+      theme: ['default', 'light'],
+      file: ['./light.color.json']
+    },
+    {
+      theme: 'dark',
+      file: ['./dark.color.json']
+    }
+  ]
+};
\ No newline at end of file
diff --git a/packages/opendesign/tsconfig.json b/packages/opendesign/tsconfig.json
index 07cb971a..68a292fd 100644
--- a/packages/opendesign/tsconfig.json
+++ b/packages/opendesign/tsconfig.json
@@ -23,4 +23,7 @@
     "src/**/*.tsx",
     "src/**/*.vue",
   ],
+  "exclude": [
+    "src/tokens/token.config.ts"
+  ]
 }
\ No newline at end of file
diff --git a/packages/portal/src/main.ts b/packages/portal/src/main.ts
index c79bb2ee..bf0aa996 100644
--- a/packages/portal/src/main.ts
+++ b/packages/portal/src/main.ts
@@ -1,7 +1,7 @@
 import { createApp } from 'vue';
 import './style.scss';
 import 'normalize.css';
-import '@opensig/opendesign/src/components/style/token.css';
+import '@opensig/opendesign/src/components/style/default.light.token.css';
 import '@opensig/opendesign/src/components/style';
 
 
diff --git a/packages/scripts/src/gen-tokens/index.ts b/packages/scripts/src/gen-tokens/index.ts
new file mode 100644
index 00000000..4c9c9731
--- /dev/null
+++ b/packages/scripts/src/gen-tokens/index.ts
@@ -0,0 +1,133 @@
+import path from 'path';
+import fs from 'fs-extra';
+
+export interface TokenOptionsT {
+  config: string
+}
+export interface TokenConfigT {
+  output: string,
+  prefix: string,
+  tokens: Array<{ theme: string, file: Array<string> }>,
+  globalTokenFile: Array<string>,
+}
+interface FlatTokenT {
+  prefix: string,
+  catgName: string,
+  key: string,
+  value: string,
+  name: string,
+  type: string,
+  group: string,
+  description: string
+}
+
+export interface TokenT {
+  [key: string]: {
+    name: string,
+    type: string,
+    value: Array<{
+      key: string,
+      value: string,
+      name: string,
+      description: string
+    }>
+  }
+}
+
+type TokenListT = Array<{ theme: string, tokens: TokenT }>
+
+const base = process.cwd();
+
+async function readTokens(configFile: string) {
+  const cfg = path.resolve(base, configFile || './token.config.ts');
+  const configData: TokenConfigT = await require(cfg);
+  const { prefix, tokens, output, globalTokenFile = [] } = configData;
+  let tokenData: TokenListT = [];
+
+  if (Array.isArray(tokens)) {
+    tokenData = tokens.map(tk => {
+
+      const files = tk.file.concat(globalTokenFile);
+      const themeToken = {};
+
+      files.forEach(f => {
+        const fpath = path.resolve(path.dirname(cfg), f);
+        try {
+          const content = require(fpath);
+          Object.assign(themeToken, content);
+        } catch (error) {
+          console.warn('load token eror:', fpath);
+        }
+      });
+
+      return {
+        theme: tk.theme,
+        tokens: themeToken
+      };
+
+    });
+  }
+
+  const outDir = path.resolve(path.dirname(cfg), output);
+  return {
+    prefix,
+    tokens: tokenData,
+    outDir
+  };
+}
+
+function generateTokenCss(tokenData: { tokens: TokenListT, prefix: string }, outDir: string) {
+
+  const { tokens, prefix = '--o-' } = tokenData;
+
+  tokens.forEach(tk => {
+    const flatToken: Array<FlatTokenT> = [];
+    const { theme } = tk;
+
+    Object.keys(tk.tokens).forEach(k => {
+      const catg = tk.tokens[k];
+      catg.value.forEach(item => {
+        flatToken.push({
+          ...item,
+          prefix,
+          type: catg.type,
+          group: k,
+          catgName: catg.name
+        });
+      });
+    });
+
+    const content = flatToken.map(item => {
+      const { prefix: p, key, value, name = '', type = '', description = '', group = '' } = item;
+      return `  /**
+   * @name ${name}
+   * @type ${type}
+   * @group ${group}
+   * @description ${description}
+   */
+  ${p}${key}: ${value};`;
+    });
+
+    const themeStr = Array.isArray(theme) ? theme : [theme];
+    const selector = themeStr.map(t => {
+      if (t === 'default') {
+        return ':root';
+      }
+      return `:root[theme="${t}"]`;
+    });
+
+    fs.outputFileSync(path.join(outDir, `${themeStr.join('.')}.token.css`), `/* theme: ${theme} */
+${selector.join(',\n')} {
+${content.join('\n')}
+}`);
+  });
+
+
+
+}
+
+
+export default async function main(options: TokenOptionsT) {
+  const { tokens, prefix, outDir } = await readTokens(options.config);
+  generateTokenCss({ tokens, prefix }, outDir);
+}
\ No newline at end of file
diff --git a/packages/scripts/src/index.ts b/packages/scripts/src/index.ts
index 9a1a0f53..3ab0a286 100644
--- a/packages/scripts/src/index.ts
+++ b/packages/scripts/src/index.ts
@@ -5,6 +5,7 @@ import { Command } from 'commander';
 import buildIcons from './gen-icons';
 import buildComponents from './build-components';
 import buildStyle from './build-style';
+import genTokens, { TokenOptionsT } from './gen-tokens';
 
 const program = new Command();
 
@@ -33,5 +34,11 @@ program.command('build:style')
     buildStyle();
   });
 
+program.command('gen:token')
+  .description('generate opendesign tokens')
+  .option('-c, --config <configFile>', 'config file')
+  .action((options: TokenOptionsT) => {
+    genTokens(options);
+  });
 
 program.parse(process.argv);
\ No newline at end of file
-- 
Gitee


From 89c37bf3b6ab9ca3ac4dbbc07ce7286a7b0a09d1 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 17 Jan 2023 18:15:00 +0800
Subject: [PATCH 3/4] up

---
 .../style/{default.light.token.css => default-light.token.css}  | 0
 packages/portal/src/main.ts                                     | 2 +-
 packages/scripts/src/gen-tokens/index.ts                        | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename packages/opendesign/src/components/style/{default.light.token.css => default-light.token.css} (100%)

diff --git a/packages/opendesign/src/components/style/default.light.token.css b/packages/opendesign/src/components/style/default-light.token.css
similarity index 100%
rename from packages/opendesign/src/components/style/default.light.token.css
rename to packages/opendesign/src/components/style/default-light.token.css
diff --git a/packages/portal/src/main.ts b/packages/portal/src/main.ts
index bf0aa996..4ecaba73 100644
--- a/packages/portal/src/main.ts
+++ b/packages/portal/src/main.ts
@@ -1,7 +1,7 @@
 import { createApp } from 'vue';
 import './style.scss';
 import 'normalize.css';
-import '@opensig/opendesign/src/components/style/default.light.token.css';
+import '@opensig/opendesign/src/components/style/default-light.token.css';
 import '@opensig/opendesign/src/components/style';
 
 
diff --git a/packages/scripts/src/gen-tokens/index.ts b/packages/scripts/src/gen-tokens/index.ts
index 4c9c9731..2d675c87 100644
--- a/packages/scripts/src/gen-tokens/index.ts
+++ b/packages/scripts/src/gen-tokens/index.ts
@@ -116,7 +116,7 @@ function generateTokenCss(tokenData: { tokens: TokenListT, prefix: string }, out
       return `:root[theme="${t}"]`;
     });
 
-    fs.outputFileSync(path.join(outDir, `${themeStr.join('.')}.token.css`), `/* theme: ${theme} */
+    fs.outputFileSync(path.join(outDir, `${themeStr.join('-')}.token.css`), `/* theme: ${theme} */
 ${selector.join(',\n')} {
 ${content.join('\n')}
 }`);
-- 
Gitee


From 64c847c2e42ac637a3218284f922799d28955856 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 17 Jan 2023 18:22:31 +0800
Subject: [PATCH 4/4] up name

---
 .../opendesign/src/components/link/__demo__/IndexLink.vue     | 4 ++--
 .../components/link/__demo__/{LinkDemo.vue => LinkBasic.vue}  | 0
 .../opendesign/src/components/tabs/__demo__/IndexTabs.vue     | 4 ++--
 .../tabs/__demo__/{TabsDefault.vue => TabsBasic.vue}          | 0
 4 files changed, 4 insertions(+), 4 deletions(-)
 rename packages/opendesign/src/components/link/__demo__/{LinkDemo.vue => LinkBasic.vue} (100%)
 rename packages/opendesign/src/components/tabs/__demo__/{TabsDefault.vue => TabsBasic.vue} (100%)

diff --git a/packages/opendesign/src/components/link/__demo__/IndexLink.vue b/packages/opendesign/src/components/link/__demo__/IndexLink.vue
index 4b5694ae..671f9399 100644
--- a/packages/opendesign/src/components/link/__demo__/IndexLink.vue
+++ b/packages/opendesign/src/components/link/__demo__/IndexLink.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import '../style';
-import LinkDemo from './LinkDemo.vue';
+import LinkBasic from './LinkBasic.vue';
 </script>
 <template>
   <div class="page-demo">
-    <LinkDemo />
+    <LinkBasic />
   </div>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/link/__demo__/LinkDemo.vue b/packages/opendesign/src/components/link/__demo__/LinkBasic.vue
similarity index 100%
rename from packages/opendesign/src/components/link/__demo__/LinkDemo.vue
rename to packages/opendesign/src/components/link/__demo__/LinkBasic.vue
diff --git a/packages/opendesign/src/components/tabs/__demo__/IndexTabs.vue b/packages/opendesign/src/components/tabs/__demo__/IndexTabs.vue
index 35e857c7..d2ddd489 100644
--- a/packages/opendesign/src/components/tabs/__demo__/IndexTabs.vue
+++ b/packages/opendesign/src/components/tabs/__demo__/IndexTabs.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import '../style';
 
-import TabsDefault from './TabsDefault.vue';
+import TabsBasic from './TabsBasic.vue';
 </script>
 <template>
   <div class="page-demo">
-    <TabsDefault />
+    <TabsBasic />
   </div>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/tabs/__demo__/TabsDefault.vue b/packages/opendesign/src/components/tabs/__demo__/TabsBasic.vue
similarity index 100%
rename from packages/opendesign/src/components/tabs/__demo__/TabsDefault.vue
rename to packages/opendesign/src/components/tabs/__demo__/TabsBasic.vue
-- 
Gitee