diff --git a/.vscode/screen.code-snippets b/.vscode/screen.code-snippets
new file mode 100644
index 0000000000000000000000000000000000000000..821994200d7d97306726b8064d4bb8c4bf9b3a6c
--- /dev/null
+++ b/.vscode/screen.code-snippets
@@ -0,0 +1,212 @@
+{
+  "(0, 600)": {
+    "prefix": ["w-600", "@include respond-to('phone')"],
+    "body": [
+      "@include respond-to('phone') {",
+      "  $1",
+      "}"
+    ],
+    "description": "(0, 600px)",
+    "scope": "scss, less"
+  },
+  "(601, Inf)": {
+    "prefix": ["w600", "@include respond-to('>phone')"],
+    "body": [
+      "@include respond-to('>phone') {",
+      "  $1",
+      "}"
+    ],
+    "description": "(601px, Inf)",
+    "scope": "scss, less"
+  },
+  "(601, 1200)": {
+    "prefix": ["w600-1200", "@include respond-to('pad')"],
+    "body": [
+      "@include respond-to('pad') {",
+      "  $1",
+      "}"
+    ],
+    "description": "(601px, 1200px)",
+    "scope": "scss, less"
+  },
+  "(0, 1200)": {
+    "prefix": ["w-1200", "@include respond-to('<=pad')"],
+    "body": [
+      "@include respond-to('<=pad') {",
+      "  $1",
+      "}"
+    ],
+    "description": "(0, 1200px)",
+    "scope": "scss, less"
+  },
+  "(1201, Inf)": {
+    "prefix": ["w1200", "@include respond-to('>pad')"],
+    "body": [
+      "@include respond-to('>pad') {",
+      "  $1",
+      "}"
+    ],
+    "description": "(1201px, Inf)",
+    "scope": "scss, less"
+  },
+  "(601, 840)": {
+    "prefix": ["w600-840", "@include respond-to('pad_v')"],
+    "body": [
+      "@include respond-to('pad_v') {",
+      "  $1",
+      "}"
+    ],
+    "description": "(601px, 840px)",
+    "scope": "scss, less"
+  },
+  "(0, 840)": {
+    "prefix": ["w-840", "@include respond-to('<=pad_v')"],
+    "body": [
+      "@include respond-to('<=pad_v') {",
+      "  $1",
+      "}"
+    ],
+    "description": "(0, 840px)",
+    "scope": "scss, less"
+  },
+  "(841, Inf)": {
+    "prefix": ["w840", "@include respond-to('>pad_v')"],
+    "body": [
+      "@include respond-to('>pad_v') {",
+      "  $1",
+      "}"
+    ],
+    "description": "(841px, Inf)",
+    "scope": "scss, less"
+  },
+  "(841, 1200)": {
+    "prefix": ["w840-1200", "@include respond-to('pad_h')"],
+    "body": [
+      "@include respond-to('pad_h') {",
+      "  $1",
+      "}"
+    ],
+    "description": "(841px, 1200px)",
+    "scope": "scss, less"
+  },
+  "(1200, 1440)": {
+    "prefix": ["w1200-1440", "@include respond-to('laptop')"],
+    "body": [
+      "@include respond-to('laptop') {",
+      "  $1",
+      "}"
+    ],
+    "description": "(1200px, 1440px)",
+    "scope": "scss, less"
+  },
+  "(0, 1440)": {
+    "prefix": ["w-1440", "@include respond-to('<=laptop')"],
+    "body": [
+      "@include respond-to('<=laptop') {",
+      "  $1",
+      "}"
+    ],
+    "description": "(0, 1440px)",
+    "scope": "scss, less"
+  },
+  "(1441, Inf)": {
+    "prefix": ["w1440", "@include respond-to('>laptop')"],
+    "body": [
+      "@include respond-to('>laptop') {",
+      "  $1",
+      "}"
+    ],
+    "description": "(1441px, Inf)",
+    "scope": "scss, less"
+  },
+  "(601, 1440)": {
+    "prefix": ["w600-1440", "@include responsd-to('pad-laptop')"],
+    "body": [
+      "@include respond-to('pad-laptop') {",
+      "  $1",
+      "}"
+    ],
+    "description": "(601px, 1440px)",
+    "scope": "scss, less"
+  },
+  "(841, 1440)": {
+    "prefix": ["w840-1440", "@include responsd-to('pad_v-laptop')"],
+    "body": [
+      "@include respond-to('pad_v-laptop') {",
+      "  $1",
+      "}"
+    ],
+    "description": "(841px, 1440px)",
+    "scope": "scss, less"
+  },
+  "(1441-1920)": {
+    "prefix": ["w1440-1920", "@include responsd-to('pc')"],
+    "body": [
+      "@include respond-to('pc') {",
+      "  $1",
+      "}"
+    ],
+    "description": "(1441-1920px)",
+    "scope": "scss, less"
+  },
+  "(1441, 1680)": {
+    "prefix": ["w1440-1680", "@include responsd-to('pc_s')"],
+    "body": [
+      "@include respond-to('pc_s') {",
+      "  $1",
+      "}"
+    ],
+    "description": "(1441, 1680px)",
+    "scope": "scss, less"
+  },
+  "(0, 1680)": {
+    "prefix": ["w-1680", "@include responsd-to('<=pc_s')"],
+    "body": [
+      "@include respond-to('<=pc_s') {",
+      "  $1",
+      "}"
+    ],
+    "description": "(0, 1680px)",
+    "scope": "scss, less"
+  },
+  "(1681, 1920)": {
+    "prefix": ["w1680-1920", "@include responsd-to('pc_l')"],
+    "body": [
+      "@include respond-to('pc_l') {",
+      "  $1",
+      "}"
+    ],
+    "description": "(1681, 1920px)",
+    "scope": "scss, less"
+  },
+  "(1681, Inf)": {
+    "prefix": ["w1680", "@include responsd-to('>pc_s')"],
+    "body": [
+      "@include respond-to('>pc_s') {",
+      "  $1",
+      "}"
+    ],
+    "description": "(1681px, Inf)",
+    "scope": "scss, less"
+  },
+  "(1921, Inf)": {
+    "prefix": ["w1920", "@include responsd-to('>pc')"],
+    "body": [
+      "@include respond-to('>pc') {",
+      "  $1",
+      "}"
+    ],
+    "description": "(1921px, Inf)",
+    "scope": "scss, less"
+  },
+  "(1201, 1680)": {
+    "prefix": ["w1200-1680", "@include responsd-to('laptop-pc_s')"],
+    "body": [
+      "@include respond-to('laptop-pc_s') {",
+      "  $1",
+      "}"
+    ],
+    "description": "(1201px, 1680px)",
+    "scope": "scss, less"
+  }
+}
diff --git a/packages/docs/src/components/OperatorView.ts b/packages/docs/src/components/OperatorView.ts
index a694b93760983792908e1046ec9208bed4249687..8327474da512cf4bb9626e9d6e1cd5490c7ecd34 100644
--- a/packages/docs/src/components/OperatorView.ts
+++ b/packages/docs/src/components/OperatorView.ts
@@ -39,12 +39,13 @@ type RadioScheme = {
 export type SchemeT = CheckboxScheme | SelectorScheme | InputScheme | TextareaScheme | InputNumberScheme | RadioScheme;
 export type State = Record<string, any>;
 
+const camelcase2words = (str: string) => str.replace(/(?<=[a-z])([A-Z])|(?<=[A-Z])([A-Z][a-z])/g, ' $&').replace(/^[a-z]/, (char) => char.toUpperCase());
 const createCheckboxItem = (key: string, value: CheckboxScheme) => {
-  return h(OCheckbox, { value: key }, { default: () => value.label || key });
+  return h(OCheckbox, { value: key }, { default: () => value.label || camelcase2words(key) });
 };
 const createSelectorItem = (key: string, value: SelectorScheme, state: State) => {
   return h(Fragment, [
-    h('span', { class: 'props-playground-selector-name' }, value.label || key),
+    h('span', { class: 'props-playground-selector-name' }, value.label || camelcase2words(key)),
     h(
       OSelect,
       { modelValue: state[key], 'onUpdate:modelValue': (val) => (state[key] = val) },
@@ -56,13 +57,13 @@ const createSelectorItem = (key: string, value: SelectorScheme, state: State) =>
 };
 const createInputItem = (key: string, value: InputScheme, state: State) => {
   return h(Fragment, [
-    h('span', { class: 'props-playground-selector-name' }, value.label || key),
+    h('span', { class: 'props-playground-selector-name' }, value.label || camelcase2words(key)),
     h(OInput, { modelValue: state[key], 'onUpdate:modelValue': (val) => (state[key] = val) }),
   ]);
 };
 const createTextareaItem = (key: string, value: TextareaScheme, state: State) => {
   return h(Fragment, [
-    h('span', { class: 'props-playground-selector-name' }, value.label || key),
+    h('span', { class: 'props-playground-selector-name' }, value.label || camelcase2words(key)),
     h(OTextarea, {
       modelValue: state[key],
       style: { '--row': value.row || 3 },
@@ -73,7 +74,7 @@ const createTextareaItem = (key: string, value: TextareaScheme, state: State) =>
 };
 const createInputNumberItem = (key: string, value: InputNumberScheme, state: State) => {
   return h(Fragment, [
-    h('span', { class: 'props-playground-selector-name' }, value.label || key),
+    h('span', { class: 'props-playground-selector-name' }, value.label || camelcase2words(key)),
     h(OInputNumber, {
       modelValue: state[key],
       min: value.min,
diff --git a/packages/opendesign/.gitignore b/packages/opendesign/.gitignore
index bcf3a759281166ab2f6822b8dd0f39052c631d56..ffab77fac1053156b08e3b53c11fb0d11caa5705 100644
--- a/packages/opendesign/.gitignore
+++ b/packages/opendesign/.gitignore
@@ -25,4 +25,5 @@ dist-ssr
 
 es
 lib
+code-snippets
 *api.*.md
diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json
index da46d068f554fb63e138b6cd472ef80c2e8b04b2..d935c017203301d2b0512941e810bedd37b3fb74 100644
--- a/packages/opendesign/package.json
+++ b/packages/opendesign/package.json
@@ -17,7 +17,7 @@
     "vue3 components"
   ],
   "scripts": {
-    "gen:token": "open-scripts gen:token --config ./tokens/token.config.ts",
+    "gen:token": "open-scripts gen:token --config ./src/theme/opendesign/token.config.ts && open-scripts gen:token --config ./src/theme/ascend/token.config.ts && open-scripts gen:token --config ./src/theme/kunpeng/token.config.ts && open-scripts gen:token --config ./src/theme/openeuler/token.config.ts",
     "gen:icon": "open-scripts gen:icon --config ./icons/icon.config.ts",
     "clean:svg": "open-scripts clean:svg --config ./icons/cleansvg.config.ts",
     "build:component": "open-scripts build:component",
diff --git a/packages/opendesign/src/_demo/utils.ts b/packages/opendesign/src/_demo/utils.ts
index d8f86c6e8d7085ce1de38962c52dc263a66103b0..f4e02854009fbbfffa5049707b61c369d9c23500 100644
--- a/packages/opendesign/src/_demo/utils.ts
+++ b/packages/opendesign/src/_demo/utils.ts
@@ -11,10 +11,10 @@ export function hyphenate(str: string) {
  * @param exclude 不转化的props属性名
  * @returns 属性字符串
  */
-export function propsToAttrStr(props: Record<string, any>, exclude = [] as string[]) {
+export function propsToAttrStr<T extends Record<string, any>>(props: T, exclude: (keyof T)[] = []): string {
   return Object.entries(props)
     .reduce((acc, [_key, value]) => {
-      if (exclude.includes(_key)) {
+      if (exclude.includes(_key as any)) {
         return acc;
       }
       const key = hyphenate(_key);
@@ -50,3 +50,19 @@ export function propsToAttrStr(props: Record<string, any>, exclude = [] as strin
     }, '')
     .slice(1);
 }
+
+const REPLACEMENTS: Record<string, string> = {
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&apos;',
+  '&': '&amp;',
+};
+function replaceCellChar(ch: string) {
+  return REPLACEMENTS[ch];
+}
+// 避免xss注入
+export function escapeHTML(value?: string) {
+  const ESCAPE_REPLACE_RE = /[<>"'&]/g;
+  return value ? value.replace(ESCAPE_REPLACE_RE, replaceCellChar) : '';
+}
diff --git a/packages/opendesign/src/_styles/mixin.scss b/packages/opendesign/src/_styles/mixin.scss
index cbdf2c02d7a00b1be3d36840f0b9c873e05bd2c1..47e00db3a94197b93b32740a659b712d51d78460 100644
--- a/packages/opendesign/src/_styles/mixin.scss
+++ b/packages/opendesign/src/_styles/mixin.scss
@@ -22,7 +22,15 @@ $breakpoints: (
   '<=laptop': (0, 1440px),
   '>laptop': 1441px,
   'pad-laptop': (601px, 1440px),
-  'pad_v-laptop': (841px, 1440px)
+  'pad_v-laptop': (841px, 1440px),
+  'pad_v-pc_s': (841px, 1680px),
+  'pc': (1441px, 1920px),
+  'pc_s': (1441px, 1680px),
+  '<=pc_s': (0, 1680px),
+  'pc_l': (1681px, 1920px),
+  '>pc_s': 1681px,
+  '>pc': 1921px,
+  'laptop-pc_s': (1201px, 1680px)
 );
 
 @mixin respond-to($breakname) {
diff --git a/packages/opendesign/src/_utils/dom.ts b/packages/opendesign/src/_utils/dom.ts
index 77f9c9c550f5c3d6c0c0fccb33ca51a9b6c513f1..b2ea905a17daadf2a08ca62e8e41ed5835c309cb 100644
--- a/packages/opendesign/src/_utils/dom.ts
+++ b/packages/opendesign/src/_utils/dom.ts
@@ -189,3 +189,14 @@ export function scrollTo(y: number, opts: ScrollTopOptions) {
     throttleRAF(frameFn)();
   });
 }
+
+/*判断一个元素是否触发溢出隐藏*/
+export function isOverflown(element?: HTMLElement) {
+  if (!element) {
+    return false;
+  }
+  return (
+    element.scrollWidth > element.clientWidth ||
+    element.scrollHeight > element.clientHeight
+  );
+}
diff --git a/packages/opendesign/src/anchor/style/index.scss b/packages/opendesign/src/anchor/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..e6b6f59b06731c7cec52d32669a01b1cb474daeb 100644
--- a/packages/opendesign/src/anchor/style/index.scss
+++ b/packages/opendesign/src/anchor/style/index.scss
@@ -1,2 +1,3 @@
 @use './style.scss' as *;
 @use './media.scss' as *;
+@use './var.scss' as *;
diff --git a/packages/opendesign/src/anchor/style/style.scss b/packages/opendesign/src/anchor/style/style.scss
index daf4883e26556eaf42cef987e415e9acac5fb7c8..d90501d777194ead6aff02db4bd6b9d0779dafbc 100644
--- a/packages/opendesign/src/anchor/style/style.scss
+++ b/packages/opendesign/src/anchor/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-anchor {
   position: relative;
diff --git a/packages/opendesign/src/anchor/style/theme-ascend.index.ts b/packages/opendesign/src/anchor/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b0049a088358468a6b9185cfea3d656b4f1faaf9
--- /dev/null
+++ b/packages/opendesign/src/anchor/style/theme-ascend.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../select/style/theme-ascend.index';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/anchor/style/theme-ascend.scss b/packages/opendesign/src/anchor/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/anchor/style/theme-kunpeng.index.ts b/packages/opendesign/src/anchor/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..08f1ffe5704754a7322de7adff8f64b9f43f7379
--- /dev/null
+++ b/packages/opendesign/src/anchor/style/theme-kunpeng.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../select/style/theme-kunpeng.index';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/anchor/style/theme-kunpeng.scss b/packages/opendesign/src/anchor/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/anchor/style/theme-openeuler.index.ts b/packages/opendesign/src/anchor/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..93ba6509e35367f9c7ca12d2142dcb65d50c0b55
--- /dev/null
+++ b/packages/opendesign/src/anchor/style/theme-openeuler.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../select/style/theme-openeuler.index';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/anchor/style/theme-openeuler.scss b/packages/opendesign/src/anchor/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/badge/__docs__/__case__/BadgeUsage.vue b/packages/opendesign/src/badge/__docs__/__case__/BadgeUsage.vue
index 67ee2061e976e0f22d4e4f43a1045930180c7942..a0af9a3782386f7523a0dd244372c76f551716cf 100644
--- a/packages/opendesign/src/badge/__docs__/__case__/BadgeUsage.vue
+++ b/packages/opendesign/src/badge/__docs__/__case__/BadgeUsage.vue
@@ -45,11 +45,11 @@ const _schema = {
     type: 'boolean',
     default: false,
   },
-  'offset-x': {
+  offsetX: {
     type: 'number',
     default: 0,
   },
-  'offset-y': {
+  offsetY: {
     type: 'number',
     default: 0,
   },
@@ -57,12 +57,12 @@ const _schema = {
 
 const NUMBER_REGEXP = /^\d+$/;
 const _template: DocDemoTemplate<typeof _schema> = (props) => {
-  const { 'offset-x': offsetX, 'offset-y': offsetY, value } = props;
+  const { offsetX, offsetY, value } = props;
   const isNumber = NUMBER_REGEXP.test(value);
 
   return `
 <OBadge
-  ${propsToAttrStr(props, ['offset-x', 'offset-y', 'value'])}
+  ${propsToAttrStr(props, ['offsetX', 'offsetY', 'value'])}
   ${isNumber ? `:value="${parseInt(value)}"` : `value="${value}"`}
   ${offsetX || offsetY ? `:offset="[${offsetX}, ${offsetY}]"` : ''}
 >
diff --git a/packages/opendesign/src/badge/style/index.scss b/packages/opendesign/src/badge/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..e6b6f59b06731c7cec52d32669a01b1cb474daeb 100644
--- a/packages/opendesign/src/badge/style/index.scss
+++ b/packages/opendesign/src/badge/style/index.scss
@@ -1,2 +1,3 @@
 @use './style.scss' as *;
 @use './media.scss' as *;
+@use './var.scss' as *;
diff --git a/packages/opendesign/src/badge/style/style.scss b/packages/opendesign/src/badge/style/style.scss
index 2ea3242a29cf537082ee823c4a00d66a502dcd41..8b1860d3bc78f23c81ef49d2248b6d110865b3a4 100644
--- a/packages/opendesign/src/badge/style/style.scss
+++ b/packages/opendesign/src/badge/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-badge {
   position: relative;
diff --git a/packages/opendesign/src/badge/style/theme-ascend.index.ts b/packages/opendesign/src/badge/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/badge/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/badge/style/theme-ascend.scss b/packages/opendesign/src/badge/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/badge/style/theme-kunpeng.index.ts b/packages/opendesign/src/badge/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/badge/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/badge/style/theme-kunpeng.scss b/packages/opendesign/src/badge/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/badge/style/theme-openeuler.index.ts b/packages/opendesign/src/badge/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/badge/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/badge/style/theme-openeuler.scss b/packages/opendesign/src/badge/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/breadcrumb/style/index.scss b/packages/opendesign/src/breadcrumb/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..e6b6f59b06731c7cec52d32669a01b1cb474daeb 100644
--- a/packages/opendesign/src/breadcrumb/style/index.scss
+++ b/packages/opendesign/src/breadcrumb/style/index.scss
@@ -1,2 +1,3 @@
 @use './style.scss' as *;
 @use './media.scss' as *;
+@use './var.scss' as *;
diff --git a/packages/opendesign/src/breadcrumb/style/style.scss b/packages/opendesign/src/breadcrumb/style/style.scss
index ec7bbeacfd622e2f8f696c7071419a58c8429e14..21c9859b55226c099191816770ae50107146e360 100644
--- a/packages/opendesign/src/breadcrumb/style/style.scss
+++ b/packages/opendesign/src/breadcrumb/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-breadcrumb {
   display: inline-flex;
diff --git a/packages/opendesign/src/breadcrumb/style/theme-ascend.index.ts b/packages/opendesign/src/breadcrumb/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/breadcrumb/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/breadcrumb/style/theme-ascend.scss b/packages/opendesign/src/breadcrumb/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/breadcrumb/style/theme-kunpeng.index.ts b/packages/opendesign/src/breadcrumb/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/breadcrumb/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/breadcrumb/style/theme-kunpeng.scss b/packages/opendesign/src/breadcrumb/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/breadcrumb/style/theme-openeuler.index.ts b/packages/opendesign/src/breadcrumb/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/breadcrumb/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/breadcrumb/style/theme-openeuler.scss b/packages/opendesign/src/breadcrumb/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/button/style/index.scss b/packages/opendesign/src/button/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..e6b6f59b06731c7cec52d32669a01b1cb474daeb 100644
--- a/packages/opendesign/src/button/style/index.scss
+++ b/packages/opendesign/src/button/style/index.scss
@@ -1,2 +1,3 @@
 @use './style.scss' as *;
 @use './media.scss' as *;
+@use './var.scss' as *;
diff --git a/packages/opendesign/src/button/style/style.scss b/packages/opendesign/src/button/style/style.scss
index a60079cb00f2a58bc304404f8f45feded84077ea..e0d3a703b13e7a6283c8aaaeee0a8c0e7bd97420 100644
--- a/packages/opendesign/src/button/style/style.scss
+++ b/packages/opendesign/src/button/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-btn {
   outline: none;
diff --git a/packages/opendesign/src/button/style/theme-ascend.index.ts b/packages/opendesign/src/button/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/button/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/button/style/theme-ascend.scss b/packages/opendesign/src/button/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..63e91790243d968542416aa6ca558e281ca637d3
--- /dev/null
+++ b/packages/opendesign/src/button/style/theme-ascend.scss
@@ -0,0 +1,47 @@
+@use '../../_styles/mixin.scss' as *;
+
+.o-btn.o-btn-solid {
+  --btn-color: var(--o-color-info1-inverse);
+  --btn-color-hover: var(--o-color-info1-inverse);
+  --btn-color-active: var(--o-color-info1-inverse);
+  --btn-color-disabled: var(--o-color-info1-inverse);
+}
+
+.o-btn-outline.o-btn-primary:not(.o-btn-disabled) {
+  --btn-color: var(--o-color-info1);
+  --btn-color-hover: var(--o-color-info1-inverse);
+  --btn-color-active: var(--o-color-info1-inverse);
+  --btn-bg-color-hover: var(--o-color-primary2);
+  --btn-bg-color-active: var(--o-color-primary3);
+  @include hover {
+    background-color: var(--btn-bg-color-hover);
+  }
+
+  &:active {
+    background-color: var(--btn-bg-color-active);
+  }
+}
+
+.c-btn-activity,
+.c-btn-ascend {
+  color: var(--o-color-white) !important;
+  background: linear-gradient(90deg, rgb(var(--ak-color-band-start)) 0%, rgb(var(--ak-color-band-end)) 100%);
+  border-color: transparent;
+  background-repeat: no-repeat;
+  border: none;
+  @include hover {
+    background: linear-gradient(90deg, rgba(var(--ak-color-band-start), 0.8) 0%, rgba(var(--ak-color-band-end), 0.8) 100%);
+    border-color: transparent;
+    border: none;
+  }
+  &:active {
+    background: linear-gradient(90deg, rgba(var(--ak-color-band-start), 0.9) 0%, rgba(var(--ak-color-band-end), 0.9) 100%);
+    border-color: transparent;
+    border: none;
+  }
+  &.o-btn-disabled {
+    opacity: 0.4;
+    background: linear-gradient(90deg, rgb(var(--ak-color-band-start)) 0%, rgb(var(--ak-color-band-end)) 100%);
+    border: none;
+  }
+}
diff --git a/packages/opendesign/src/button/style/theme-kunpeng.index.ts b/packages/opendesign/src/button/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/button/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/button/style/theme-kunpeng.scss b/packages/opendesign/src/button/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a1cbbcc0c1e42c2d57f0b172d9893264b52895f3
--- /dev/null
+++ b/packages/opendesign/src/button/style/theme-kunpeng.scss
@@ -0,0 +1,47 @@
+@use '../../_styles/mixin.scss' as *;
+
+.o-btn.o-btn-solid {
+  --btn-color: var(--o-color-info1-inverse);
+  --btn-color-hover: var(--o-color-info1-inverse);
+  --btn-color-active: var(--o-color-info1-inverse);
+  --btn-color-disabled: var(--o-color-info1-inverse);
+}
+
+.o-btn-outline.o-btn-primary:not(.o-btn-disabled) {
+  --btn-color: var(--o-color-info1);
+  --btn-color-hover: var(--o-color-info1-inverse);
+  --btn-color-active: var(--o-color-info1-inverse);
+  --btn-bg-color-hover: var(--o-color-primary2);
+  --btn-bg-color-active: var(--o-color-primary3);
+  @include hover {
+    background-color: var(--btn-bg-color-hover);
+  }
+
+  &:active {
+    background-color: var(--btn-bg-color-active);
+  }
+}
+
+.c-btn-activity,
+.c-btn-kunpeng {
+  color: var(--o-color-white) !important;
+  background: linear-gradient(90deg, rgb(var(--ak-color-band-start)) 0%, rgb(var(--ak-color-band-end)) 100%);
+  border-color: transparent;
+  background-repeat: no-repeat;
+  border: none;
+  @include hover {
+    background: linear-gradient(90deg, rgba(var(--ak-color-band-start), 0.8) 0%, rgba(var(--ak-color-band-end), 0.8) 100%);
+    border-color: transparent;
+    border: none;
+  }
+  &:active {
+    background: linear-gradient(90deg, rgba(var(--ak-color-band-start), 0.9) 0%, rgba(var(--ak-color-band-end), 0.9) 100%);
+    border-color: transparent;
+    border: none;
+  }
+  &.o-btn-disabled {
+    opacity: 0.4;
+    background: linear-gradient(90deg, rgb(var(--ak-color-band-start)) 0%, rgb(var(--ak-color-band-end)) 100%);
+    border: none;
+  }
+}
diff --git a/packages/opendesign/src/button/style/theme-openeuler.index.ts b/packages/opendesign/src/button/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/button/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/button/style/theme-openeuler.scss b/packages/opendesign/src/button/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..be1cb63cffbf406841fec4a9ab6d75d54286e89d
--- /dev/null
+++ b/packages/opendesign/src/button/style/theme-openeuler.scss
@@ -0,0 +1,23 @@
+@use '../../_styles/mixin.scss' as *;
+
+.o-btn.o-btn-solid {
+  --btn-color: var(--o-color-info1-inverse);
+  --btn-color-hover: var(--o-color-info1-inverse);
+  --btn-color-active: var(--o-color-info1-inverse);
+  --btn-color-disabled: var(--o-color-info1-inverse);
+}
+
+.o-btn-outline.o-btn-primary:not(.o-btn-disabled) {
+  --btn-color: var(--o-color-info1);
+  --btn-color-hover: var(--o-color-info1-inverse);
+  --btn-color-active: var(--o-color-info1-inverse);
+  --btn-bg-color-hover: var(--o-color-primary2);
+  --btn-bg-color-active: var(--o-color-primary3);
+  @include hover {
+    background-color: var(--btn-bg-color-hover);
+  }
+
+  &:active {
+    background-color: var(--btn-bg-color-active);
+  }
+}
diff --git a/packages/opendesign/src/card/__docs__/__case__/CardUsage.vue b/packages/opendesign/src/card/__docs__/__case__/CardUsage.vue
index eefee6d8b7197565940ca9abfe50f2a762d5e7fb..157edde54e65ba97eb7a429d05792db407b9b1d3 100644
--- a/packages/opendesign/src/card/__docs__/__case__/CardUsage.vue
+++ b/packages/opendesign/src/card/__docs__/__case__/CardUsage.vue
@@ -76,7 +76,7 @@ const _schema = {
   },
   coverOrIcon: {
     type: 'radio',
-    list: ['cover', 'icon'],
+    list: ['Cover', 'Icon'] as const,
     default: 'cover',
   },
   coverRatio: {
@@ -122,14 +122,13 @@ const _schema = {
   noResponsive: {
     type: 'boolean',
     default: false,
-    label: 'close responsive',
   },
 } satisfies Record<string, DocDemoSchema>;
 
 const _template: DocDemoTemplate<typeof _schema> = (props) => {
   const { coverOrIcon, titleRow, detailRow } = props;
   let attrs = '';
-  if (coverOrIcon === 'cover') {
+  if (coverOrIcon === 'Cover') {
     attrs += ' cover="/card-cover.jpg"';
   } else {
     attrs += ' icon="/avatar.svg"';
diff --git a/packages/opendesign/src/card/style/index.scss b/packages/opendesign/src/card/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..e6b6f59b06731c7cec52d32669a01b1cb474daeb 100644
--- a/packages/opendesign/src/card/style/index.scss
+++ b/packages/opendesign/src/card/style/index.scss
@@ -1,2 +1,3 @@
 @use './style.scss' as *;
 @use './media.scss' as *;
+@use './var.scss' as *;
diff --git a/packages/opendesign/src/card/style/style.scss b/packages/opendesign/src/card/style/style.scss
index 6ca74f7bcade1c209f3ac024bee8f464770905e6..08d32d1f47916a9c3e051a02178818bb6637a191 100644
--- a/packages/opendesign/src/card/style/style.scss
+++ b/packages/opendesign/src/card/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-card {
   background-color: var(--card-bg-color);
diff --git a/packages/opendesign/src/card/style/theme-ascend.index.ts b/packages/opendesign/src/card/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a3a0c3070913208238ff9e05e044066d4692dde7
--- /dev/null
+++ b/packages/opendesign/src/card/style/theme-ascend.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../figure/style/theme-ascend.index';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/card/style/theme-ascend.scss b/packages/opendesign/src/card/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/card/style/theme-kunpeng.index.ts b/packages/opendesign/src/card/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ba2221168a9052208a58b7a194937a0a840c8c79
--- /dev/null
+++ b/packages/opendesign/src/card/style/theme-kunpeng.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../figure/style/theme-kunpeng.index';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/card/style/theme-kunpeng.scss b/packages/opendesign/src/card/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/card/style/theme-openeuler.index.ts b/packages/opendesign/src/card/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c9a3aa77171fb370f9e8f39f23fc9a2506c87532
--- /dev/null
+++ b/packages/opendesign/src/card/style/theme-openeuler.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../figure/style/theme-openeuler.index';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/card/style/theme-openeuler.scss b/packages/opendesign/src/card/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/carousel/__docs__/__case__/CarouselUsage.vue b/packages/opendesign/src/carousel/__docs__/__case__/CarouselUsage.vue
index 6ed2bdc26be9182730a84d9e6a9a0ad290ebf74e..87b795c3e5b43c1a57e9b8631d6bb7074f078891 100644
--- a/packages/opendesign/src/carousel/__docs__/__case__/CarouselUsage.vue
+++ b/packages/opendesign/src/carousel/__docs__/__case__/CarouselUsage.vue
@@ -81,14 +81,13 @@ const _schema = {
   autoPlay: {
     type: 'boolean',
     default: true,
-    label: 'auto play',
   },
   interval: {
     type: 'number',
     default: 5000,
     step: 1000,
     min: 1000,
-    label: 'interval (ms)',
+    label: 'Interval (ms)',
   },
   arrow: {
     type: 'list',
@@ -98,20 +97,16 @@ const _schema = {
   hideIndicator: {
     type: 'boolean',
     default: false,
-    label: 'hide indicator',
   },
   indicatorClick: {
     type: 'boolean',
-    label: 'indicator click',
   },
   pauseOnHover: {
     type: 'boolean',
     default: true,
-    label: 'pause on hover',
   },
   clickToSwitch: {
     type: 'boolean',
-    label: 'click to switch',
   },
 } satisfies Record<string, DocDemoSchema>;
 
diff --git a/packages/opendesign/src/carousel/style/index.scss b/packages/opendesign/src/carousel/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..e6b6f59b06731c7cec52d32669a01b1cb474daeb 100644
--- a/packages/opendesign/src/carousel/style/index.scss
+++ b/packages/opendesign/src/carousel/style/index.scss
@@ -1,2 +1,3 @@
 @use './style.scss' as *;
 @use './media.scss' as *;
+@use './var.scss' as *;
diff --git a/packages/opendesign/src/carousel/style/style.scss b/packages/opendesign/src/carousel/style/style.scss
index ba708031328447b141cc7916eb4cdfb32e71efca..1a63b74f49193ed2dff64616e8833b375cd6dae9 100644
--- a/packages/opendesign/src/carousel/style/style.scss
+++ b/packages/opendesign/src/carousel/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-carousel {
   position: relative;
diff --git a/packages/opendesign/src/carousel/style/theme-ascend.index.ts b/packages/opendesign/src/carousel/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/carousel/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/carousel/style/theme-ascend.scss b/packages/opendesign/src/carousel/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/carousel/style/theme-kunpeng.index.ts b/packages/opendesign/src/carousel/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/carousel/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/carousel/style/theme-kunpeng.scss b/packages/opendesign/src/carousel/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/carousel/style/theme-openeuler.index.ts b/packages/opendesign/src/carousel/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/carousel/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/carousel/style/theme-openeuler.scss b/packages/opendesign/src/carousel/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/cascader/__docs__/__case__/CascaderUsage.vue b/packages/opendesign/src/cascader/__docs__/__case__/CascaderUsage.vue
index ac13117321db4ee5f2bb844a79be86baa816d417..7566fcc878fc0d73d614e7a4d00c359babdbdcb0 100644
--- a/packages/opendesign/src/cascader/__docs__/__case__/CascaderUsage.vue
+++ b/packages/opendesign/src/cascader/__docs__/__case__/CascaderUsage.vue
@@ -89,10 +89,9 @@ import { DocDemoTemplate, DocDemoSchema } from '../../../_demo/types';
 import { propsToAttrStr } from '../../../_demo/utils';
 
 const _schema = {
-  'path-mode': {
+  pathMode: {
     type: 'boolean',
     default: false,
-    label: 'path mode',
   },
   round: {
     type: 'list',
@@ -106,11 +105,10 @@ const _schema = {
     type: 'string',
     default: 'Please select',
   },
-  'option-position': {
+  optionPosition: {
     type: 'list',
     list: ['top', 'tl', 'tr', 'bottom', 'bl', 'br', 'left', 'lt', 'lb', 'right', 'rt', 'rb'],
     default: 'bl',
-    label: 'option position',
   },
 } satisfies Record<string, DocDemoSchema>;
 
diff --git a/packages/opendesign/src/cascader/style/index.scss b/packages/opendesign/src/cascader/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..e6b6f59b06731c7cec52d32669a01b1cb474daeb 100644
--- a/packages/opendesign/src/cascader/style/index.scss
+++ b/packages/opendesign/src/cascader/style/index.scss
@@ -1,2 +1,3 @@
 @use './style.scss' as *;
 @use './media.scss' as *;
+@use './var.scss' as *;
diff --git a/packages/opendesign/src/cascader/style/style.scss b/packages/opendesign/src/cascader/style/style.scss
index 43b47d28a1012478b216cfe3729bd69b854be27f..e74c2f956faac7bb563979bbf8d821752a630b42 100644
--- a/packages/opendesign/src/cascader/style/style.scss
+++ b/packages/opendesign/src/cascader/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-cascader {
   height: var(--cascader-height);
diff --git a/packages/opendesign/src/cascader/style/theme-ascend.index.ts b/packages/opendesign/src/cascader/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b0049a088358468a6b9185cfea3d656b4f1faaf9
--- /dev/null
+++ b/packages/opendesign/src/cascader/style/theme-ascend.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../select/style/theme-ascend.index';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/cascader/style/theme-ascend.scss b/packages/opendesign/src/cascader/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/cascader/style/theme-kunpeng.index.ts b/packages/opendesign/src/cascader/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..08f1ffe5704754a7322de7adff8f64b9f43f7379
--- /dev/null
+++ b/packages/opendesign/src/cascader/style/theme-kunpeng.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../select/style/theme-kunpeng.index';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/cascader/style/theme-kunpeng.scss b/packages/opendesign/src/cascader/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/cascader/style/theme-openeuler.index.ts b/packages/opendesign/src/cascader/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..93ba6509e35367f9c7ca12d2142dcb65d50c0b55
--- /dev/null
+++ b/packages/opendesign/src/cascader/style/theme-openeuler.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../select/style/theme-openeuler.index';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/cascader/style/theme-openeuler.scss b/packages/opendesign/src/cascader/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/checkbox-group/style/index.scss b/packages/opendesign/src/checkbox-group/style/index.scss
index fe3754c0ddb3d27930cc73488d428bc9b017fac1..408201ef7c6c373652ee6db348b2a13c7aaf44de 100644
--- a/packages/opendesign/src/checkbox-group/style/index.scss
+++ b/packages/opendesign/src/checkbox-group/style/index.scss
@@ -1,21 +1,2 @@
-@use '../../_styles/mixin.scss' as *;
-@use './var.scss';
-
-.o-checkbox-group {
-  display: inline-flex;
-  flex-wrap: wrap;
-  vertical-align: middle;
-}
-
-.o-checkbox-group-h {
-  .o-checkbox + .o-checkbox {
-    margin-left: var(--checkbox-group-gap);
-  }
-}
-
-.o-checkbox-group-v {
-  flex-direction: column;
-  .o-checkbox + .o-checkbox {
-    margin-top: var(--checkbox-group-gap);
-  }
-}
+@use './style.scss' as *;
+@use './var.scss' as *;
diff --git a/packages/opendesign/src/checkbox-group/style/style.scss b/packages/opendesign/src/checkbox-group/style/style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3e76754f68d85bd8c5a326cb7954d3b6e1fd431a
--- /dev/null
+++ b/packages/opendesign/src/checkbox-group/style/style.scss
@@ -0,0 +1,20 @@
+@use '../../_styles/mixin.scss' as *;
+
+.o-checkbox-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  vertical-align: middle;
+}
+
+.o-checkbox-group-h {
+  .o-checkbox + .o-checkbox {
+    margin-left: var(--checkbox-group-gap);
+  }
+}
+
+.o-checkbox-group-v {
+  flex-direction: column;
+  .o-checkbox + .o-checkbox {
+    margin-top: var(--checkbox-group-gap);
+  }
+}
diff --git a/packages/opendesign/src/checkbox-group/style/theme-ascend.index.ts b/packages/opendesign/src/checkbox-group/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/checkbox-group/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/checkbox-group/style/theme-ascend.scss b/packages/opendesign/src/checkbox-group/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/checkbox-group/style/theme-kunpeng.index.ts b/packages/opendesign/src/checkbox-group/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/checkbox-group/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/checkbox-group/style/theme-kunpeng.scss b/packages/opendesign/src/checkbox-group/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/checkbox-group/style/theme-openeuler.index.ts b/packages/opendesign/src/checkbox-group/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/checkbox-group/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/checkbox-group/style/theme-openeuler.scss b/packages/opendesign/src/checkbox-group/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/checkbox/style/index.scss b/packages/opendesign/src/checkbox/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..e6b6f59b06731c7cec52d32669a01b1cb474daeb 100644
--- a/packages/opendesign/src/checkbox/style/index.scss
+++ b/packages/opendesign/src/checkbox/style/index.scss
@@ -1,2 +1,3 @@
 @use './style.scss' as *;
 @use './media.scss' as *;
+@use './var.scss' as *;
diff --git a/packages/opendesign/src/checkbox/style/style.scss b/packages/opendesign/src/checkbox/style/style.scss
index 9020e0886e9ffd88f84cd650158751447bf0c19d..b9a8606bc291265c897ac49a04bbc5a7a4d9f1e3 100644
--- a/packages/opendesign/src/checkbox/style/style.scss
+++ b/packages/opendesign/src/checkbox/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-checkbox {
   color: var(--checkbox-color);
diff --git a/packages/opendesign/src/checkbox/style/theme-ascend.index.ts b/packages/opendesign/src/checkbox/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/checkbox/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/checkbox/style/theme-ascend.scss b/packages/opendesign/src/checkbox/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/checkbox/style/theme-kunpeng.index.ts b/packages/opendesign/src/checkbox/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/checkbox/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/checkbox/style/theme-kunpeng.scss b/packages/opendesign/src/checkbox/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/checkbox/style/theme-openeuler.index.ts b/packages/opendesign/src/checkbox/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/checkbox/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/checkbox/style/theme-openeuler.scss b/packages/opendesign/src/checkbox/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/collapse/style/index.scss b/packages/opendesign/src/collapse/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..e6b6f59b06731c7cec52d32669a01b1cb474daeb 100644
--- a/packages/opendesign/src/collapse/style/index.scss
+++ b/packages/opendesign/src/collapse/style/index.scss
@@ -1,2 +1,3 @@
 @use './style.scss' as *;
 @use './media.scss' as *;
+@use './var.scss' as *;
diff --git a/packages/opendesign/src/collapse/style/style.scss b/packages/opendesign/src/collapse/style/style.scss
index 3853d758d3ab33a3378c4dcba6d4b67df7aef5a7..d32bfa0937653ee24d0f017f8e5599352c5b7ee3 100644
--- a/packages/opendesign/src/collapse/style/style.scss
+++ b/packages/opendesign/src/collapse/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-collapse {
   background-color: var(--collapse-bg-color);
diff --git a/packages/opendesign/src/collapse/style/theme-ascend.index.ts b/packages/opendesign/src/collapse/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/collapse/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/collapse/style/theme-ascend.scss b/packages/opendesign/src/collapse/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/collapse/style/theme-kunpeng.index.ts b/packages/opendesign/src/collapse/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/collapse/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/collapse/style/theme-kunpeng.scss b/packages/opendesign/src/collapse/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/collapse/style/theme-openeuler.index.ts b/packages/opendesign/src/collapse/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/collapse/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/collapse/style/theme-openeuler.scss b/packages/opendesign/src/collapse/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/dialog/__docs__/__case__/DialogSlot.vue b/packages/opendesign/src/dialog/__docs__/__case__/DialogSlot.vue
index 9fac140b5d90b3988a8087ca20a47e2880cb0c53..731030ef55c4c050f5af6bb7f2cd06ecfaa664a0 100644
--- a/packages/opendesign/src/dialog/__docs__/__case__/DialogSlot.vue
+++ b/packages/opendesign/src/dialog/__docs__/__case__/DialogSlot.vue
@@ -9,29 +9,35 @@
 - `default`: 主体，用于放置内容。**注**：`default` 插槽中的内容有溢出滚动的功能（可通过 `scrollbar` 参数调整滚动条，参数类型[BaseScrollerPropsT](#base-scroller-props-t)），其余插槽位置固定不能滚动；
 - `actions`: 按钮，用于自定义底部按钮
 - `footer`: 底部，用于防止底部内容。**注**：`footer` 插槽会覆盖 `actions` 插槽。
+
+<!-- en-US -->
+
+### Slots
+
+The dialog has four slots:
+
+- `header`: Header, used to place the title.
+- `default`: Body, used to place content. **Note**: Content in the `default` slot supports overflow scrolling
+  (the scrollbar can be adjusted via the `scrollbar` parameter; for the parameter type, see [BaseScrollerPropsT](#base-scroller-props-t)),
+  while other slots have fixed positions and cannot scroll.
+- `actions`: Buttons, used to customize the bottom buttons.
 </docs>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { ODialog, OButton, OTextarea, ORate, ODivider, OIconClose, OIconDone, OForm, OFormItem, OInput, OIcon } from '@opensig/opendesign';
+import { ODialog, OButton, OTextarea, ORate, ODivider } from '@opensig/opendesign';
 
-const ratingDialogVisible = ref(false);
-const formDialogVisible = ref(false);
+const visible = ref(false);
 const rateVal = ref(0);
 const feedback = ref('');
 const openRatingDialog = () => {
-  ratingDialogVisible.value = true;
-};
-const openFormDialog = () => {
-  formDialogVisible.value = true;
+  visible.value = true;
 };
 const cancel = () => {
-  ratingDialogVisible.value = false;
-  formDialogVisible.value = false;
+  visible.value = false;
 };
 const submit = () => {
-  ratingDialogVisible.value = false;
-  formDialogVisible.value = false;
+  visible.value = false;
 };
 const labels = ['Very Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Very Satisfied'];
 const title = computed(() => {
@@ -44,12 +50,8 @@ const title = computed(() => {
 </script>
 
 <template>
-  <div class="row">
-    <OButton @click="openRatingDialog">Open rating dialog</OButton>
-    <OButton @click="openFormDialog">Open form dialog</OButton>
-  </div>
-  <!-- rating dialog -->
-  <ODialog v-model:visible="ratingDialogVisible" size="auto">
+  <OButton @click="openRatingDialog">Open rating dialog</OButton>
+  <ODialog v-model:visible="visible" size="auto">
     <template #header>{{ title }}</template>
     <div class="body-wrapper">
       <ORate v-model="rateVal" size="large" />
@@ -62,24 +64,8 @@ const title = computed(() => {
       <OButton :variant="isPhonePad ? 'text' : 'outline'" color="primary" @click="submit">Submit</OButton>
     </template>
   </ODialog>
-  <!-- form dialog -->
-  <ODialog v-model:visible="formDialogVisible" size="exlarge" class="doc-case-form-dialog" hide-close>
-    <template #header>
-      <div class="form-header">
-        <OIcon button :icon="OIconClose" @click="cancel" class="close-icon" />
-        <span class="title">Form Dialog</span>
-        <OIcon button :icon="OIconDone" @click="submit" />
-      </div>
-    </template>
-    <OForm class="form" has-required layout="v" label-width="auto">
-      <OFormItem v-for="idx in 3" :key="idx" :label="`Form item ${idx}`" required>
-        <OInput :placeholder="`Form item ${idx}`" v-model="feedback" class="input" />
-      </OFormItem>
-    </OForm>
-  </ODialog>
 </template>
 <style lang="scss" scoped>
-// rating-dialog
 .body-wrapper {
   display: flex;
   flex-direction: column;
@@ -96,24 +82,3 @@ const title = computed(() => {
   --o-divider-bd-color: transparent;
 }
 </style>
-<style lang="scss">
-// form-dialog
-.doc-case-form-dialog {
-  --dlg-min-height: 100vh;
-  --dlg-radius: 0;
-  .form-header {
-    display: flex;
-    align-items: center;
-    .close-icon {
-      margin-right: var(--o-gap-4);
-    }
-    .title {
-      flex-grow: 1;
-      text-align: left;
-    }
-  }
-  .input {
-    width: 100%;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/packages/opendesign/src/dialog/__docs__/__case__/DialogSlotForm.vue b/packages/opendesign/src/dialog/__docs__/__case__/DialogSlotForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9855664aa90b9bdcf324307851dec8d10b05e732
--- /dev/null
+++ b/packages/opendesign/src/dialog/__docs__/__case__/DialogSlotForm.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ODialog, OButton, OIconClose, OIconDone, OForm, OFormItem, OInput, OIcon } from '@opensig/opendesign';
+
+const visible = ref(false);
+const feedback = ref('');
+const openFormDialog = () => {
+  visible.value = true;
+};
+const cancel = () => {
+  visible.value = false;
+};
+const submit = () => {
+  visible.value = false;
+};
+</script>
+
+<template>
+  <OButton @click="openFormDialog">Open form dialog</OButton>
+  <ODialog v-model:visible="visible" size="exlarge" class="doc-case-form-dialog" hide-close>
+    <template #header>
+      <div class="form-header">
+        <OIcon button :icon="OIconClose" @click="cancel" class="close-icon" />
+        <span class="title">Form Dialog</span>
+        <OIcon button :icon="OIconDone" @click="submit" />
+      </div>
+    </template>
+    <OForm class="form" has-required layout="v" label-width="auto">
+      <OFormItem v-for="idx in 3" :key="idx" :label="`Form item ${idx}`" required>
+        <OInput :placeholder="`Form item ${idx}`" v-model="feedback" class="input" />
+      </OFormItem>
+    </OForm>
+  </ODialog>
+</template>
+<style lang="scss">
+// form-dialog
+.doc-case-form-dialog {
+  --dlg-min-height: 100vh;
+  --dlg-radius: 0;
+  // The z-index must be higher than that of the Header component.
+  z-index: 9991;
+  .form-header {
+    display: flex;
+    align-items: center;
+    .close-icon {
+      margin-right: var(--o-gap-4);
+    }
+    .title {
+      flex-grow: 1;
+      text-align: left;
+    }
+  }
+  .input {
+    width: 100%;
+  }
+}
+</style>
diff --git a/packages/opendesign/src/dialog/__docs__/index.en-US.md b/packages/opendesign/src/dialog/__docs__/index.en-US.md
index 410634e03a634c5895e323826ba8a6b124d6cd83..ab1755805ab16a9e83980cb9adfcfdd924ad9fcd 100644
--- a/packages/opendesign/src/dialog/__docs__/index.en-US.md
+++ b/packages/opendesign/src/dialog/__docs__/index.en-US.md
@@ -8,31 +8,33 @@ sidebar: ODialog
 
 <!-- @usage DialogSizeUsage -->
 <!-- @case DialogActions -->
+<!-- @case DialogSlot -->
+<!-- @case DialogSlotForm -->
 
 ## API
 
 ### CSS Variables
 
-| CSS Variable | Description |
-| --- | --- |
-| --dlg-close-size | Size of the close button |
-| --dlg-close-color | Color of the close button |
-| --dlg-close-color-hover | Color of the close button when hovered |
-| --dlg-close-color-active | Color of the close button when active |
-| --dlg-color | Text color |
-| --dlg-header-color | Header color, overrides `--dlg-color` |
-| --dlg-bg-color | Background color |
-| --dlg-radius | Border radius |
-| --dlg-shadow | Box shadow |
-| --dlg-max-height | Maximum height |
-| --dlg-min-height | Minimum height |
-| --dlg-min-width | Minimum width |
-| --dlg-width | Width |
-| --dlg-margin | Margin |
-| --dlg-edge-gap | Padding |
-| --dlg-inner-gap | Spacing between the default header and footer |
-| --dlg-header-gap | Spacing between the header and default content, overrides `--dlg-inner-gap` |
-| --actions-justify | Alignment of the action buttons at the bottom |
+| CSS Variable               | Description                                                                 |
+| -------------------------- | --------------------------------------------------------------------------- |
+| \-\-dlg-close-size         | Size of the close button                                                    |
+| \-\-dlg-close-color        | Color of the close button                                                   |
+| \-\-dlg-close-color-hover  | Color of the close button when hovered                                      |
+| \-\-dlg-close-color-active | Color of the close button when active                                       |
+| \-\-dlg-color              | Text color                                                                  |
+| \-\-dlg-header-color       | Header color, overrides `--dlg-color`                                       |
+| \-\-dlg-bg-color           | Background color                                                            |
+| \-\-dlg-radius             | Border radius                                                               |
+| \-\-dlg-shadow             | Box shadow                                                                  |
+| \-\-dlg-max-height         | Maximum height                                                              |
+| \-\-dlg-min-height         | Minimum height                                                              |
+| \-\-dlg-min-width          | Minimum width                                                               |
+| \-\-dlg-width              | Width                                                                       |
+| \-\-dlg-margin             | Margin                                                                      |
+| \-\-dlg-edge-gap           | Padding                                                                     |
+| \-\-dlg-inner-gap          | Spacing between the default header and footer                               |
+| \-\-dlg-header-gap         | Spacing between the header and default content, overrides `--dlg-inner-gap` |
+| \-\-actions-justify        | Alignment of the action buttons at the bottom                               |
 
 <!-- @api ODialog -->
 
diff --git a/packages/opendesign/src/dialog/__docs__/index.zh-CN.md b/packages/opendesign/src/dialog/__docs__/index.zh-CN.md
index 2c6385a0e3d14c6af911a8d596c995ec5d210bd8..9bcc4c68b7d6dc71968c6a88017cea83faa5e49e 100644
--- a/packages/opendesign/src/dialog/__docs__/index.zh-CN.md
+++ b/packages/opendesign/src/dialog/__docs__/index.zh-CN.md
@@ -9,31 +9,32 @@ sidebar: ODialog 对话框
 <!-- @usage DialogSizeUsage -->
 <!-- @case DialogActions -->
 <!-- @case DialogSlot -->
+<!-- @case DialogSlotForm -->
 
 ## API
 
 ### CSS 变量
 
-| CSS变量 | 描述 |
-| --- | --- |
-| --dlg-close-size | 关闭按钮大小 |
-| --dlg-close-color | 关闭按钮颜色 |
-| --dlg-close-color-hover | 鼠标悬停关闭按钮颜色 |
-| --dlg-close-color-active | 鼠标按下关闭按钮颜色 |
-| --dlg-color | 文字颜色 |
-| --dlg-header-color | 标题颜色，覆盖 `--dlg-color` |
-| --dlg-bg-color | 背景颜色 |
-| --dlg-radius | 圆角 |
-| --dlg-shadow | 阴影 |
-| --dlg-max-height | 最大高度 |
-| --dlg-min-height | 最小高度 |
-| --dlg-min-width | 最小宽度 |
-| --dlg-width | 宽度 |
-| --dlg-margin | 外边距 |
-| --dlg-edge-gap | 内边距 |
-| --dlg-inner-gap | header default 和 footer 之间的间距 |
-| --dlg-header-gap | header 和 default 之间的间距，覆盖 `--dlg-inner-gap` |
-| --actions-justify | 底部操作按钮的对齐方式 |
+| CSS 变量                   | 描述                                                 |
+| -------------------------- | ---------------------------------------------------- |
+| \-\-dlg-close-size         | 关闭按钮大小                                         |
+| \-\-dlg-close-color        | 关闭按钮颜色                                         |
+| \-\-dlg-close-color-hover  | 鼠标悬停关闭按钮颜色                                 |
+| \-\-dlg-close-color-active | 鼠标按下关闭按钮颜色                                 |
+| \-\-dlg-color              | 文字颜色                                             |
+| \-\-dlg-header-color       | 标题颜色，覆盖 `--dlg-color`                         |
+| \-\-dlg-bg-color           | 背景颜色                                             |
+| \-\-dlg-radius             | 圆角                                                 |
+| \-\-dlg-shadow             | 阴影                                                 |
+| \-\-dlg-max-height         | 最大高度                                             |
+| \-\-dlg-min-height         | 最小高度                                             |
+| \-\-dlg-min-width          | 最小宽度                                             |
+| \-\-dlg-width              | 宽度                                                 |
+| \-\-dlg-margin             | 外边距                                               |
+| \-\-dlg-edge-gap           | 内边距                                               |
+| \-\-dlg-inner-gap          | header default 和 footer 之间的间距                  |
+| \-\-dlg-header-gap         | header 和 default 之间的间距，覆盖 `--dlg-inner-gap` |
+| \-\-actions-justify        | 底部操作按钮的对齐方式                               |
 
 <!-- @api ODialog -->
 
diff --git a/packages/opendesign/src/dialog/style/index.scss b/packages/opendesign/src/dialog/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..e6b6f59b06731c7cec52d32669a01b1cb474daeb 100644
--- a/packages/opendesign/src/dialog/style/index.scss
+++ b/packages/opendesign/src/dialog/style/index.scss
@@ -1,2 +1,3 @@
 @use './style.scss' as *;
 @use './media.scss' as *;
+@use './var.scss' as *;
diff --git a/packages/opendesign/src/dialog/style/style.scss b/packages/opendesign/src/dialog/style/style.scss
index 0d70f88267b3b0826875447ca14a742cce5db857..1eb28aa700304e7af3766d2180c048ecbfa21ac2 100644
--- a/packages/opendesign/src/dialog/style/style.scss
+++ b/packages/opendesign/src/dialog/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-dlg-main {
   color: var(--dlg-color);
diff --git a/packages/opendesign/src/dialog/style/theme-ascend.index.ts b/packages/opendesign/src/dialog/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..435d94825f9c72fbd1beebfa8ddc1b85e3e7f6fd
--- /dev/null
+++ b/packages/opendesign/src/dialog/style/theme-ascend.index.ts
@@ -0,0 +1,7 @@
+import '../../theme/common.scss';
+import '../../_styles';
+import '../../layer/style/theme-ascend.index';
+import '../../button/style/theme-ascend.index';
+import '../../scrollbar/style/theme-ascend.index';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/dialog/style/theme-ascend.scss b/packages/opendesign/src/dialog/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/dialog/style/theme-kunpeng.index.ts b/packages/opendesign/src/dialog/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..542bc71419df493175c13e2dc458dbb6c91e9bd5
--- /dev/null
+++ b/packages/opendesign/src/dialog/style/theme-kunpeng.index.ts
@@ -0,0 +1,7 @@
+import '../../theme/common.scss';
+import '../../_styles';
+import '../../layer/style/theme-kunpeng.index';
+import '../../button/style/theme-kunpeng.index';
+import '../../scrollbar/style/theme-kunpeng.index';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/dialog/style/theme-kunpeng.scss b/packages/opendesign/src/dialog/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/dialog/style/theme-openeuler.index.ts b/packages/opendesign/src/dialog/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c0cef23b08324e2684f903807edd9cc95f316a40
--- /dev/null
+++ b/packages/opendesign/src/dialog/style/theme-openeuler.index.ts
@@ -0,0 +1,7 @@
+import '../../theme/common.scss';
+import '../../_styles';
+import '../../layer/style/theme-openeuler.index';
+import '../../button/style/theme-openeuler.index';
+import '../../scrollbar/style/theme-openeuler.index';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/dialog/style/theme-openeuler.scss b/packages/opendesign/src/dialog/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/divider/__docs__/__case__/DividerUsage.vue b/packages/opendesign/src/divider/__docs__/__case__/DividerUsage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4c9425ce765a8d3c8bb91c17505b3b30e6d19ddd
--- /dev/null
+++ b/packages/opendesign/src/divider/__docs__/__case__/DividerUsage.vue
@@ -0,0 +1,86 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 使用说明
+
+#### 参数配置
+
+- **variant**：控制分割线形状
+  可选值：`solid`（实线）、`dashed`（虚线）、`dotted`（点线）
+
+- **direction**：控制分割线方向
+  可选值：`h`（水平）、`v`（垂直）
+
+  - 水平分割线（`direction="h"`）默认宽度占满容器；
+  - 垂直分割线（`direction="v"`）默认高度为 `1em`。
+
+- **darker**：控制分割线颜色深浅
+  可选值：`true`（深色）、`false`（浅色）
+
+#### 标签
+
+- **限制**：仅水平分割线（`direction="h"`）支持标签功能。
+- **标签位置**：通过 `labelPosition` 属性控制，可选值：`left`（左侧）、`center`（中间）、`right`（右侧）。
+- **标签内容**：标签文本需放置在组件的 `default` 插槽中。
+
+<!-- en-US -->
+
+### Usage Instructions
+
+#### Props Configuration
+
+- **variant**: Controls the shape of the divider
+  Optional values: `solid` (solid line), `dashed` (dashed line), `dotted` (dotted line)
+
+- **direction**: Controls the direction of the divider
+  Optional values: `h` (horizontal), `v` (vertical)
+
+  - Horizontal dividers (`direction="h"`) by default fill the full width of the container;
+  - Vertical dividers (`direction="v"`) have a default height of `1em`.
+
+- **darker**: Controls the darkness of the divider color
+  Optional values: `true` (darker), `false` (lighter)
+
+#### Label
+
+- **Restrictions**: Only horizontal dividers (`direction="h"`) support the label feature.
+- **Label Position**: Controlled by the `labelPosition` prop, with optional values: `left` (left side), `center` (middle), `right` (right side).
+- **Label Content**: The label text should be placed in the component's default slot.
+</docs>
+
+<script setup lang="ts">
+import { propsToAttrStr, escapeHTML } from '../../../_demo/utils';
+import { DocDemoSchema, DocDemoTemplate } from '../../../_demo/types';
+
+const _schema = {
+  variant: {
+    type: 'list',
+    list: ['solid', 'dashed', 'dotted'],
+    default: 'solid',
+  },
+  direction: {
+    type: 'list',
+    list: ['h', 'v'],
+    default: 'h',
+  },
+  labelPosition: {
+    type: 'list',
+    list: ['left', 'center', 'right'],
+    default: 'center',
+  },
+  darker: {
+    type: 'boolean',
+    default: false,
+  },
+  label: {
+    type: 'string',
+    default: 'Divider Label',
+  },
+} satisfies Record<string, DocDemoSchema>;
+
+const _template: DocDemoTemplate<typeof _schema> = (props) => `
+<ODivider ${propsToAttrStr(props, ['label'])}>${escapeHTML(props.label)}</ODivider>
+`;
+
+const _ctx = {};
+</script>
diff --git a/packages/opendesign/src/divider/__docs__/index.en-US.md b/packages/opendesign/src/divider/__docs__/index.en-US.md
new file mode 100644
index 0000000000000000000000000000000000000000..43a3318b992c006218541c33ed72feba1cdb864f
--- /dev/null
+++ b/packages/opendesign/src/divider/__docs__/index.en-US.md
@@ -0,0 +1,24 @@
+---
+sidebar: ODivider
+---
+
+# ODivider
+
+## Demo
+
+<!-- @usage DividerUsage -->
+
+## API
+
+### CSS Variables
+
+| CSS Variable              | Description                                      |
+| ------------------------- | ------------------------------------------------ |
+| \-\-o-divider-color       | Label text color                                 |
+| \-\-o-divider-text-size   | Label text font size                             |
+| \-\-o-divider-text-height | Label text line height                           |
+| \-\-o-divider-label-gap   | Spacing between label and divider                |
+| \-\-o-divider-bd-color    | Divider border color                             |
+| \-\-o-divider-gap         | Spacing between divider and surrounding elements |
+
+<!-- @api ODivider -->
diff --git a/packages/opendesign/src/divider/__docs__/index.zh-CN.md b/packages/opendesign/src/divider/__docs__/index.zh-CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..a07c15fd0a43f28db4944174e37b0baab27848b6
--- /dev/null
+++ b/packages/opendesign/src/divider/__docs__/index.zh-CN.md
@@ -0,0 +1,24 @@
+---
+sidebar: ODivider
+---
+
+# ODivider 分割线
+
+## 示例
+
+<!-- @usage DividerUsage -->
+
+## API
+
+### CSS 变量
+
+| CSS 变量                | 描述                       |
+| ----------------------- | -------------------------- |
+| \-\-o-divider-color       | label 文本颜色             |
+| \-\-o-divider-text-size   | label 文本字号             |
+| \-\-o-divider-text-height | label 文本行高             |
+| \-\-o-divider-label-gap   | label 与分割线之间的间距   |
+| \-\-o-divider-bd-color    | 分割线颜色                 |
+| \-\-o-divider-gap         | 分割线与周围元素之间的间距 |
+
+<!-- @api ODivider -->
diff --git a/packages/opendesign/src/divider/style/index.scss b/packages/opendesign/src/divider/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..e6b6f59b06731c7cec52d32669a01b1cb474daeb 100644
--- a/packages/opendesign/src/divider/style/index.scss
+++ b/packages/opendesign/src/divider/style/index.scss
@@ -1,2 +1,3 @@
 @use './style.scss' as *;
 @use './media.scss' as *;
+@use './var.scss' as *;
diff --git a/packages/opendesign/src/divider/style/style.scss b/packages/opendesign/src/divider/style/style.scss
index 9fc2d6eb121957d348d80b449b48d8edd78feb70..9a5e81ab1548765f2b5a768cf260096570159336 100644
--- a/packages/opendesign/src/divider/style/style.scss
+++ b/packages/opendesign/src/divider/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-divider {
   color: var(--o-divider-color);
diff --git a/packages/opendesign/src/divider/style/theme-ascend.index.ts b/packages/opendesign/src/divider/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/divider/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/divider/style/theme-ascend.scss b/packages/opendesign/src/divider/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/divider/style/theme-kunpeng.index.ts b/packages/opendesign/src/divider/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/divider/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/divider/style/theme-kunpeng.scss b/packages/opendesign/src/divider/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/divider/style/theme-openeuler.index.ts b/packages/opendesign/src/divider/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/divider/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/divider/style/theme-openeuler.scss b/packages/opendesign/src/divider/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/divider/types.ts b/packages/opendesign/src/divider/types.ts
index 4e42e386f94e0563ca802ff5f02c1167254a5a0c..6ae4f80e65dabab1d6044940e7ba35b05a544904 100644
--- a/packages/opendesign/src/divider/types.ts
+++ b/packages/opendesign/src/divider/types.ts
@@ -6,28 +6,36 @@ export type DividerVariantT = (typeof DividerVariantTypes)[number];
 
 export const dividerProps = {
   /**
-   * 分割线类型 DividerVariantT
+   * @zh-CN 分割线形状
+   * @en-US Divider shape
+   * @default 'solid'
    */
   variant: {
     type: String as PropType<DividerVariantT>,
     default: 'solid',
   },
   /**
-   * 分割线方向 DirectionT
+   * @zh-CN 分割线方向
+   * @en-US Divider direction
+   * @default 'h'
    */
   direction: {
     type: String as PropType<DirectionT>,
     default: 'h',
   },
   /**
-   * 自定义内容位置
+   * @zh-CN 分割线标签位置
+   * @en-US Divider label position
+   * @default 'center'
    */
   labelPosition: {
     type: String as PropType<'left' | 'center' | 'right'>,
     default: 'center',
   },
   /**
-   * 是否颜色加深
+   * @zh-CN 是否使用深色
+   * @en-US Whether to use dark
+   * @default false
    */
   darker: {
     type: Boolean,
diff --git a/packages/opendesign/src/dropdown/style/index.scss b/packages/opendesign/src/dropdown/style/index.scss
index 6eab681b84481c40d923ac2a6d7cbecd8fd22023..408201ef7c6c373652ee6db348b2a13c7aaf44de 100644
--- a/packages/opendesign/src/dropdown/style/index.scss
+++ b/packages/opendesign/src/dropdown/style/index.scss
@@ -1,44 +1,2 @@
-@use '../../_styles/mixin.scss' as *;
-@use './var.scss';
-
-.o-dropdown-list {
-  list-style: none;
-  margin: 0;
-  padding: var(--dropdown-list-padding);
-  background-color: var(--dropdown-list-bg-color);
-  box-shadow: var(--dropdown-list-shadow);
-  border-radius: var(--dropdown-list-radius);
-  border: var(--dropdown-list-bd);
-}
-
-.o-dropdown-item {
-  display: flex;
-  align-items: center;
-  justify-content: var(--dropdown-item-justify);
-  padding: var(--dropdown-item-padding);
-  background-color: var(--dropdown-item-bg-color);
-  font-size: var(--dropdown-item-text-size);
-  line-height: var(--dropdown-item-text-height);
-  border-radius: var(--dropdown-item-radius);
-  color: var(--dropdown-item-color);
-  transition: background-color var(--o-duration-s) var(--o-easing-standard);
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--dropdown-item-bg-color-hover);
-    color: var(--dropdown-item-color-hover);
-  }
-}
-
-.o-dropdown-item + .o-dropdown-item {
-  margin-top: var(--dropdown-item-gap);
-}
-
-.o-dropdown-item-disabled {
-  &,
-  &:hover {
-    cursor: not-allowed;
-    color: var(--dropdown-item-color-disabled);
-    background-color: var(--dropdown-item-bg-color-disabled);
-  }
-}
+@use './style.scss' as *;
+@use './var.scss' as *;
diff --git a/packages/opendesign/src/dropdown/style/style.scss b/packages/opendesign/src/dropdown/style/style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f58d4c35306aa085700eb075de1b54d14ca464c7
--- /dev/null
+++ b/packages/opendesign/src/dropdown/style/style.scss
@@ -0,0 +1,41 @@
+.o-dropdown-list {
+  list-style: none;
+  margin: 0;
+  padding: var(--dropdown-list-padding);
+  background-color: var(--dropdown-list-bg-color);
+  box-shadow: var(--dropdown-list-shadow);
+  border-radius: var(--dropdown-list-radius);
+  border: var(--dropdown-list-bd);
+}
+
+.o-dropdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: var(--dropdown-item-justify);
+  padding: var(--dropdown-item-padding);
+  background-color: var(--dropdown-item-bg-color);
+  font-size: var(--dropdown-item-text-size);
+  line-height: var(--dropdown-item-text-height);
+  border-radius: var(--dropdown-item-radius);
+  color: var(--dropdown-item-color);
+  transition: background-color var(--o-duration-s) var(--o-easing-standard);
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--dropdown-item-bg-color-hover);
+    color: var(--dropdown-item-color-hover);
+  }
+}
+
+.o-dropdown-item + .o-dropdown-item {
+  margin-top: var(--dropdown-item-gap);
+}
+
+.o-dropdown-item-disabled {
+  &,
+  &:hover {
+    cursor: not-allowed;
+    color: var(--dropdown-item-color-disabled);
+    background-color: var(--dropdown-item-bg-color-disabled);
+  }
+}
diff --git a/packages/opendesign/src/dropdown/style/theme-ascend.index.ts b/packages/opendesign/src/dropdown/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d0b5e7ce2228ae53e336d43b61a8b238fd0bd935
--- /dev/null
+++ b/packages/opendesign/src/dropdown/style/theme-ascend.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../popup/style/theme-ascend.index';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/dropdown/style/theme-ascend.scss b/packages/opendesign/src/dropdown/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/dropdown/style/theme-kunpeng.index.ts b/packages/opendesign/src/dropdown/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..77de075150277f92b2c7258ffa606170e90328d6
--- /dev/null
+++ b/packages/opendesign/src/dropdown/style/theme-kunpeng.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../popup/style/theme-kunpeng.index';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/dropdown/style/theme-kunpeng.scss b/packages/opendesign/src/dropdown/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/dropdown/style/theme-openeuler.index.ts b/packages/opendesign/src/dropdown/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c15af26f20f7cd71a4457d8a0ae784c5b75eff01
--- /dev/null
+++ b/packages/opendesign/src/dropdown/style/theme-openeuler.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../popup/style/theme-openeuler.index';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/dropdown/style/theme-openeuler.scss b/packages/opendesign/src/dropdown/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/figure/style/index.scss b/packages/opendesign/src/figure/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..67b8dbf9bcc94cd1494cdee89f98918026e5ab5a 100644
--- a/packages/opendesign/src/figure/style/index.scss
+++ b/packages/opendesign/src/figure/style/index.scss
@@ -1,2 +1,3 @@
+@use './var.scss' as *;
 @use './style.scss' as *;
 @use './media.scss' as *;
diff --git a/packages/opendesign/src/figure/style/style.scss b/packages/opendesign/src/figure/style/style.scss
index eb36a011c4f0095a0948bbbea2a61e10be6dcfd3..409d1f0a37fdcdfc1b7fca06c5d2c80825d57880 100644
--- a/packages/opendesign/src/figure/style/style.scss
+++ b/packages/opendesign/src/figure/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-figure {
   display: inline-flex;
diff --git a/packages/opendesign/src/figure/style/theme-ascend.index.ts b/packages/opendesign/src/figure/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3068c20b071edd4015b7aca6a1c32928621bd19b
--- /dev/null
+++ b/packages/opendesign/src/figure/style/theme-ascend.index.ts
@@ -0,0 +1,5 @@
+import '../../_styles';
+import '../../icon/style/theme-ascend.index';
+import '../../layer/style/theme-ascend.index';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/figure/style/theme-ascend.scss b/packages/opendesign/src/figure/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/figure/style/theme-kunpeng.index.ts b/packages/opendesign/src/figure/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..77a370ea8baebdc2d0d138ef494b6285d80faf4f
--- /dev/null
+++ b/packages/opendesign/src/figure/style/theme-kunpeng.index.ts
@@ -0,0 +1,5 @@
+import '../../_styles';
+import '../../icon/style/theme-kunpeng.index';
+import '../../layer/style/theme-kunpeng.index';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/figure/style/theme-kunpeng.scss b/packages/opendesign/src/figure/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/figure/style/theme-openeuler.index.ts b/packages/opendesign/src/figure/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..45382e5a66c92f80627bc3c48fc32fea44f23004
--- /dev/null
+++ b/packages/opendesign/src/figure/style/theme-openeuler.index.ts
@@ -0,0 +1,5 @@
+import '../../_styles';
+import '../../icon/style/theme-openeuler.index';
+import '../../layer/style/theme-openeuler.index';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/figure/style/theme-openeuler.scss b/packages/opendesign/src/figure/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/form/style/index.scss b/packages/opendesign/src/form/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..67b8dbf9bcc94cd1494cdee89f98918026e5ab5a 100644
--- a/packages/opendesign/src/form/style/index.scss
+++ b/packages/opendesign/src/form/style/index.scss
@@ -1,2 +1,3 @@
+@use './var.scss' as *;
 @use './style.scss' as *;
 @use './media.scss' as *;
diff --git a/packages/opendesign/src/form/style/style.scss b/packages/opendesign/src/form/style/style.scss
index cbe2a51ca3475e457d7639d95302ab86d08b07a2..5c63da0460680dfa1a5a2118039728425a003a34 100644
--- a/packages/opendesign/src/form/style/style.scss
+++ b/packages/opendesign/src/form/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-form-layout-inline {
   display: flex;
diff --git a/packages/opendesign/src/form/style/theme-ascend.index.ts b/packages/opendesign/src/form/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/form/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/form/style/theme-ascend.scss b/packages/opendesign/src/form/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/form/style/theme-kunpeng.index.ts b/packages/opendesign/src/form/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/form/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/form/style/theme-kunpeng.scss b/packages/opendesign/src/form/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/form/style/theme-openeuler.index.ts b/packages/opendesign/src/form/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/form/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/form/style/theme-openeuler.scss b/packages/opendesign/src/form/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/grid/style/index.scss b/packages/opendesign/src/grid/style/index.scss
index 781018c741191dc88668ec0cb25c864ca59a75ec..8758ab15dd9227626cac4b38c43076e260b9ac50 100644
--- a/packages/opendesign/src/grid/style/index.scss
+++ b/packages/opendesign/src/grid/style/index.scss
@@ -1,68 +1,2 @@
-@use '../../_styles/mixin.scss' as *;
-@use './var.scss';
-$media-phone: 600px;
-$media-pad-v: 840px;
-$media-pad: 1200px;
-$media-laptop: 1440px;
-
-.o-row {
-  display: flex;
-
-  --col-gap-x: calc(var(--row-gap-x) / 2);
-  --col-gap-y: var(--row-gap-y);
-  --row-shift-x: calc(-1 * var(--col-gap-x));
-  --row-shift-y: calc(-1 * var(--col-gap-y));
-  margin-left: var(--row-shift-x);
-  margin-right: var(--row-shift-x);
-  margin-bottom: var(--row-shift-y);
-
-  > * {
-    padding-left: var(--col-gap-x);
-    padding-right: var(--col-gap-x);
-    margin-bottom: var(--col-gap-y);
-    flex: 1 0 auto; // 默认撑满
-  }
-}
-
-.o-col {
-  flex: var(--col-flex);
-}
-
-@media (max-width: $media-laptop) {
-  .o-row-laptop {
-    --col-gap-x: calc(var(--row-laptop-gap-x) / 2);
-    --col-gap-y: var(--row-laptop-gap-y);
-  }
-  .o-col-laptop {
-    flex: var(--col-laptop-flex);
-  }
-}
-@media (max-width: $media-pad) {
-  .o-row-pad {
-    --col-gap-x: calc(var(--row-pad-gap-x) / 2);
-    --col-gap-y: var(--row-pad-gap-y);
-  }
-  .o-col-pad {
-    flex: var(--col-pad-flex);
-  }
-}
-
-@media (max-width: $media-pad-v) {
-  .o-row-pad-v {
-    --col-gap-x: calc(var(--row-pad-v-gap-x) / 2);
-    --col-gap-y: var(--row-pad-v-gap-y);
-  }
-  .o-col-pad-v {
-    flex: var(--col-pad-v-flex);
-  }
-}
-
-@media (max-width: $media-phone) {
-  .o-row-phone {
-    --col-gap-x: calc(var(--row-phone-gap-x) / 2);
-    --col-gap-y: var(--row-phone-gap-y);
-  }
-  .o-col-phone {
-    flex: var(--col-phone-flex);
-  }
-}
+@use './var.scss' as *;
+@use './style.scss' as *;
diff --git a/packages/opendesign/src/grid/style/style.scss b/packages/opendesign/src/grid/style/style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7c5201e11ee6cf7dfabbcde1ec69c74a2a7b6e7c
--- /dev/null
+++ b/packages/opendesign/src/grid/style/style.scss
@@ -0,0 +1,68 @@
+@use '../../_styles/mixin.scss' as *;
+
+$media-phone: 600px;
+$media-pad-v: 840px;
+$media-pad: 1200px;
+$media-laptop: 1440px;
+
+.o-row {
+  display: flex;
+
+  --col-gap-x: calc(var(--row-gap-x) / 2);
+  --col-gap-y: var(--row-gap-y);
+  --row-shift-x: calc(-1 * var(--col-gap-x));
+  --row-shift-y: calc(-1 * var(--col-gap-y));
+  margin-left: var(--row-shift-x);
+  margin-right: var(--row-shift-x);
+  margin-bottom: var(--row-shift-y);
+
+  > * {
+    padding-left: var(--col-gap-x);
+    padding-right: var(--col-gap-x);
+    margin-bottom: var(--col-gap-y);
+    flex: 1 0 auto; // 默认撑满
+  }
+}
+
+.o-col {
+  flex: var(--col-flex);
+}
+
+@media (max-width: $media-laptop) {
+  .o-row-laptop {
+    --col-gap-x: calc(var(--row-laptop-gap-x) / 2);
+    --col-gap-y: var(--row-laptop-gap-y);
+  }
+  .o-col-laptop {
+    flex: var(--col-laptop-flex);
+  }
+}
+@media (max-width: $media-pad) {
+  .o-row-pad {
+    --col-gap-x: calc(var(--row-pad-gap-x) / 2);
+    --col-gap-y: var(--row-pad-gap-y);
+  }
+  .o-col-pad {
+    flex: var(--col-pad-flex);
+  }
+}
+
+@media (max-width: $media-pad-v) {
+  .o-row-pad-v {
+    --col-gap-x: calc(var(--row-pad-v-gap-x) / 2);
+    --col-gap-y: var(--row-pad-v-gap-y);
+  }
+  .o-col-pad-v {
+    flex: var(--col-pad-v-flex);
+  }
+}
+
+@media (max-width: $media-phone) {
+  .o-row-phone {
+    --col-gap-x: calc(var(--row-phone-gap-x) / 2);
+    --col-gap-y: var(--row-phone-gap-y);
+  }
+  .o-col-phone {
+    flex: var(--col-phone-flex);
+  }
+}
diff --git a/packages/opendesign/src/grid/style/theme-ascend.index.ts b/packages/opendesign/src/grid/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/grid/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/grid/style/theme-ascend.scss b/packages/opendesign/src/grid/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/grid/style/theme-kunpeng.index.ts b/packages/opendesign/src/grid/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/grid/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/grid/style/theme-kunpeng.scss b/packages/opendesign/src/grid/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/grid/style/theme-openeuler.index.ts b/packages/opendesign/src/grid/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/grid/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/grid/style/theme-openeuler.scss b/packages/opendesign/src/grid/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/hooks/use-theme.ts b/packages/opendesign/src/hooks/use-theme.ts
index bd0765d846abcdf07f98e4e36bcd44a47925cea4..67c33bb25cd0dca5b7be88d928b6ca1880b18a93 100644
--- a/packages/opendesign/src/hooks/use-theme.ts
+++ b/packages/opendesign/src/hooks/use-theme.ts
@@ -1,25 +1,28 @@
 import { isClient } from '../_utils/is';
-import { ref, watchEffect } from 'vue';
+import { ref, watch } from 'vue';
 
 const THEME_KEY = '__theme__';
+const rootTheme = ref('');
 
+watch(rootTheme, (newTheme) => {
+  document.documentElement.dataset.oTheme = newTheme;
+  localStorage.setItem(THEME_KEY, newTheme);
+});
+
+/**
+ * 获取全局主题，该主题自动在html根元素上设置 data-o-theme 属性。多个组件和标签页使用同一个全局主题。
+ * 若想在不同的组件中使用不同的主题，可以在该组件的根元素上手动设置 data-o-theme 属性
+ * @param defaultTheme 默认主题
+ */
 export function useTheme(defaultTheme: string = 'light') {
   if (!isClient) {
     return {
-      theme: ref(defaultTheme),
+      theme: rootTheme,
     };
   }
-  const currentTheme = ref<string>(localStorage.getItem(THEME_KEY) || defaultTheme);
-
-  watchEffect(() => {
-    const theme = currentTheme.value;
-
-    document.documentElement.dataset.oTheme = theme;
-
-    localStorage.setItem(THEME_KEY, theme);
-  });
+  rootTheme.value = rootTheme.value || localStorage.getItem(THEME_KEY) || defaultTheme;
 
   return {
-    theme: currentTheme,
+    theme: rootTheme,
   };
 }
diff --git a/packages/opendesign/src/icon/style/index.scss b/packages/opendesign/src/icon/style/index.scss
index 458fef7f1d0bffa9e4574ec48d231b8fd3187905..8758ab15dd9227626cac4b38c43076e260b9ac50 100644
--- a/packages/opendesign/src/icon/style/index.scss
+++ b/packages/opendesign/src/icon/style/index.scss
@@ -1,30 +1,2 @@
-@use '../../_styles/mixin.scss' as *;
-@use './var.scss';
-
-.o-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--icon-size);
-}
-
-.o-icon-btn {
-  color: var(--icon-btn-color);
-  cursor: pointer;
-  @include hover {
-    color: var(--icon-btn-color-hover);
-  }
-  &:active,
-  &:focus-visible {
-    color: var(--icon-btn-color-active);
-  }
-}
-.o-icon-btn-disabled {
-  cursor: not-allowed;
-  &,
-  &:hover,
-  &:focus-visible,
-  &:active {
-    color: var(--icon-btn-color-disabled);
-  }
-}
+@use './var.scss' as *;
+@use './style.scss' as *;
diff --git a/packages/opendesign/src/icon/style/style.scss b/packages/opendesign/src/icon/style/style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..807edee87384aa00bcbebcd50effc8ac42348470
--- /dev/null
+++ b/packages/opendesign/src/icon/style/style.scss
@@ -0,0 +1,29 @@
+@use '../../_styles/mixin.scss' as *;
+
+.o-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--icon-size);
+}
+
+.o-icon-btn {
+  color: var(--icon-btn-color);
+  cursor: pointer;
+  @include hover {
+    color: var(--icon-btn-color-hover);
+  }
+  &:active,
+  &:focus-visible {
+    color: var(--icon-btn-color-active);
+  }
+}
+.o-icon-btn-disabled {
+  cursor: not-allowed;
+  &,
+  &:hover,
+  &:focus-visible,
+  &:active {
+    color: var(--icon-btn-color-disabled);
+  }
+}
diff --git a/packages/opendesign/src/icon/style/theme-ascend.index.ts b/packages/opendesign/src/icon/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/icon/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/icon/style/theme-ascend.scss b/packages/opendesign/src/icon/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/icon/style/theme-kunpeng.index.ts b/packages/opendesign/src/icon/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/icon/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/icon/style/theme-kunpeng.scss b/packages/opendesign/src/icon/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/icon/style/theme-openeuler.index.ts b/packages/opendesign/src/icon/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/icon/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/icon/style/theme-openeuler.scss b/packages/opendesign/src/icon/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/input-number/style/index.scss b/packages/opendesign/src/input-number/style/index.scss
index 6005a6f7f40a8e9d1881c4a57aab80ef7fadd08e..8758ab15dd9227626cac4b38c43076e260b9ac50 100644
--- a/packages/opendesign/src/input-number/style/index.scss
+++ b/packages/opendesign/src/input-number/style/index.scss
@@ -1,70 +1,2 @@
-@use '../../_styles/mixin.scss' as *;
-@use './var.scss';
-
-.o-input-number-btn-wrap {
-  height: 100%;
-  user-select: none;
-  justify-content: center;
-  display: flex;
-  cursor: pointer;
-  min-width: var(--_box-height);
-  font-size: 16px;
-  flex-wrap: wrap;
-  color: var(--input-number-btn-color);
-}
-
-.o-input-number-btn {
-  width: 100%;
-  height: 50%;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 16px;
-  overflow: hidden;
-  position: relative;
-  background-color: var(--input-number-btn-bg-color);
-  .o-input-control-left &,
-  .o-input-control-right & {
-    height: 100%;
-  }
-  @include hover {
-    color: var(--input-number-btn-color-hover);
-    background-color: var(--input-number-btn-bg-color-hover);
-  }
-  &:focus {
-    color: var(--input-number-btn-color-active);
-    background-color: var(--input-number-btn-bg-color-active);
-  }
-  &.is-disabled {
-    cursor: not-allowed;
-    color: var(--input-number-btn-color-disabled);
-    background-color: var(--input-number-btn-bg-color-disabled);
-  }
-
-  .o-input-round-pill & {
-    .o-input-control-right & {
-      padding-right: var(--input-number-btn-pill-fix);
-    }
-    .o-input-control-left & {
-      padding-left: var(--input-number-btn-pill-fix);
-    }
-  }
-}
-.o-input-number-icon-minus {
-  position: absolute;
-  margin-top: -4px;
-}
-.o-input-number-icon-plus {
-  position: absolute;
-  margin-bottom: -4px;
-}
-
-.o-input-number-size-small {
-  width: 90px;
-}
-.o-input-number-size-medium {
-  width: 120px;
-}
-.o-input-number-size-large {
-  width: 160px;
-}
+@use './var.scss' as *;
+@use './style.scss' as *;
diff --git a/packages/opendesign/src/input-number/style/style.scss b/packages/opendesign/src/input-number/style/style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6c4f9b957670ad61398c7ef8b59c8fa4fd46132a
--- /dev/null
+++ b/packages/opendesign/src/input-number/style/style.scss
@@ -0,0 +1,69 @@
+@use '../../_styles/mixin.scss' as *;
+
+.o-input-number-btn-wrap {
+  height: 100%;
+  user-select: none;
+  justify-content: center;
+  display: flex;
+  cursor: pointer;
+  min-width: var(--_box-height);
+  font-size: 16px;
+  flex-wrap: wrap;
+  color: var(--input-number-btn-color);
+}
+
+.o-input-number-btn {
+  width: 100%;
+  height: 50%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  overflow: hidden;
+  position: relative;
+  background-color: var(--input-number-btn-bg-color);
+  .o-input-control-left &,
+  .o-input-control-right & {
+    height: 100%;
+  }
+  @include hover {
+    color: var(--input-number-btn-color-hover);
+    background-color: var(--input-number-btn-bg-color-hover);
+  }
+  &:focus {
+    color: var(--input-number-btn-color-active);
+    background-color: var(--input-number-btn-bg-color-active);
+  }
+  &.is-disabled {
+    cursor: not-allowed;
+    color: var(--input-number-btn-color-disabled);
+    background-color: var(--input-number-btn-bg-color-disabled);
+  }
+
+  .o-input-round-pill & {
+    .o-input-control-right & {
+      padding-right: var(--input-number-btn-pill-fix);
+    }
+    .o-input-control-left & {
+      padding-left: var(--input-number-btn-pill-fix);
+    }
+  }
+}
+.o-input-number-icon-minus {
+  position: absolute;
+  margin-top: -4px;
+}
+.o-input-number-icon-plus {
+  position: absolute;
+  margin-bottom: -4px;
+}
+
+.o-input-number-size-small {
+  width: 90px;
+}
+.o-input-number-size-medium {
+  width: 120px;
+}
+.o-input-number-size-large {
+  width: 160px;
+}
diff --git a/packages/opendesign/src/input-number/style/theme-ascend.index.ts b/packages/opendesign/src/input-number/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/input-number/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/input-number/style/theme-ascend.scss b/packages/opendesign/src/input-number/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/input-number/style/theme-kunpeng.index.ts b/packages/opendesign/src/input-number/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/input-number/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/input-number/style/theme-kunpeng.scss b/packages/opendesign/src/input-number/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/input-number/style/theme-openeuler.index.ts b/packages/opendesign/src/input-number/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/input-number/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/input-number/style/theme-openeuler.scss b/packages/opendesign/src/input-number/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/input/style/index.scss b/packages/opendesign/src/input/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..67b8dbf9bcc94cd1494cdee89f98918026e5ab5a 100644
--- a/packages/opendesign/src/input/style/index.scss
+++ b/packages/opendesign/src/input/style/index.scss
@@ -1,2 +1,3 @@
+@use './var.scss' as *;
 @use './style.scss' as *;
 @use './media.scss' as *;
diff --git a/packages/opendesign/src/input/style/style.scss b/packages/opendesign/src/input/style/style.scss
index 2b5c5c854c39320013f28095743b2aec0b61df9e..9e46e8366087a1705cb5ae50822264995dcf3e87 100644
--- a/packages/opendesign/src/input/style/style.scss
+++ b/packages/opendesign/src/input/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-input {
   display: inline-flex;
diff --git a/packages/opendesign/src/input/style/theme-ascend.index.ts b/packages/opendesign/src/input/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..648389ed0cb41960c6c5802390aa88026749bbcd
--- /dev/null
+++ b/packages/opendesign/src/input/style/theme-ascend.index.ts
@@ -0,0 +1,5 @@
+import '../../_styles';
+import '../../_components/in-input/style';
+import '../../_components/in-box/style';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/input/style/theme-ascend.scss b/packages/opendesign/src/input/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/input/style/theme-kunpeng.index.ts b/packages/opendesign/src/input/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4cde7461313f260b198fe7d62c4a1e67d44cdae1
--- /dev/null
+++ b/packages/opendesign/src/input/style/theme-kunpeng.index.ts
@@ -0,0 +1,5 @@
+import '../../_styles';
+import '../../_components/in-input/style';
+import '../../_components/in-box/style';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/input/style/theme-kunpeng.scss b/packages/opendesign/src/input/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/input/style/theme-openeuler.index.ts b/packages/opendesign/src/input/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..20406c888ed5b9ee7d26de4475d5eefba5a79cec
--- /dev/null
+++ b/packages/opendesign/src/input/style/theme-openeuler.index.ts
@@ -0,0 +1,5 @@
+import '../../_styles';
+import '../../_components/in-input/style';
+import '../../_components/in-box/style';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/input/style/theme-openeuler.scss b/packages/opendesign/src/input/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/layer/style/index.scss b/packages/opendesign/src/layer/style/index.scss
index 6b5659e9ac18e070380addc35e53e5adaecb477d..8758ab15dd9227626cac4b38c43076e260b9ac50 100644
--- a/packages/opendesign/src/layer/style/index.scss
+++ b/packages/opendesign/src/layer/style/index.scss
@@ -1,52 +1,2 @@
-@use '../../_styles/mixin.scss' as *;
-@use './var.scss';
-
-.o-layer {
-  position: var(--layer-position, 'fixed');
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: var(--layer-z-index);
-  display: flex;
-  align-items: var(--layer-align);
-  justify-content: var(--layer-justify);
-}
-
-.o-layer-mask {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background-color: var(--layer-mask);
-  z-index: -1;
-}
-
-.o-layer-open {
-  overflow: hidden !important;
-}
-
-.o-layer-main {
-  transform-origin: var(--layer-origin);
-}
-.o-layer-close {
-  position: absolute;
-  top: 40px;
-  right: 40px;
-}
-.o-layer-close-icon {
-  font-size: var(--o-icon_size-m);
-  color: var(--o-color-info1-inverse);
-  background-color: var(--o-color-mask1);
-  border-radius: 50%;
-  padding: 8px;
-  @include x-svg-hover;
-  @include hover {
-    color: var(--o-color-info2-inverse);
-  }
-  &:active {
-    color: var(--o-color-info3-inverse);
-    transform: scale(0.9);
-  }
-}
+@use './var.scss' as *;
+@use './style.scss' as *;
diff --git a/packages/opendesign/src/layer/style/style.scss b/packages/opendesign/src/layer/style/style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..32212f8d2d9fd6d9af9853ca60a4fd5d1cffdcfc
--- /dev/null
+++ b/packages/opendesign/src/layer/style/style.scss
@@ -0,0 +1,51 @@
+@use '../../_styles/mixin.scss' as *;
+
+.o-layer {
+  position: var(--layer-position, 'fixed');
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: var(--layer-z-index);
+  display: flex;
+  align-items: var(--layer-align);
+  justify-content: var(--layer-justify);
+}
+
+.o-layer-mask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: var(--layer-mask);
+  z-index: -1;
+}
+
+.o-layer-open {
+  overflow: hidden !important;
+}
+
+.o-layer-main {
+  transform-origin: var(--layer-origin);
+}
+.o-layer-close {
+  position: absolute;
+  top: 40px;
+  right: 40px;
+}
+.o-layer-close-icon {
+  font-size: var(--o-icon_size-m);
+  color: var(--o-color-info1-inverse);
+  background-color: var(--o-color-mask1);
+  border-radius: 50%;
+  padding: 8px;
+  @include x-svg-hover;
+  @include hover {
+    color: var(--o-color-info2-inverse);
+  }
+  &:active {
+    color: var(--o-color-info3-inverse);
+    transform: scale(0.9);
+  }
+}
diff --git a/packages/opendesign/src/layer/style/theme-ascend.index.ts b/packages/opendesign/src/layer/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..af2779c2a532ac16f780caec4cb201912dceb45e
--- /dev/null
+++ b/packages/opendesign/src/layer/style/theme-ascend.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../icon/style/theme-ascend.index';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/layer/style/theme-ascend.scss b/packages/opendesign/src/layer/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/layer/style/theme-kunpeng.index.ts b/packages/opendesign/src/layer/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5c1a72268f3eb65f19a04d6ce215b14c86190fcf
--- /dev/null
+++ b/packages/opendesign/src/layer/style/theme-kunpeng.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../icon/style/theme-kunpeng.index';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/layer/style/theme-kunpeng.scss b/packages/opendesign/src/layer/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/layer/style/theme-openeuler.index.ts b/packages/opendesign/src/layer/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5d0df1fc5cba05a53a229985d4e3cdff1b14af67
--- /dev/null
+++ b/packages/opendesign/src/layer/style/theme-openeuler.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../icon/style/theme-openeuler.index';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/layer/style/theme-openeuler.scss b/packages/opendesign/src/layer/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/link/__docs__/__case__/LinkGlobal.vue b/packages/opendesign/src/link/__docs__/__case__/LinkGlobal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a3246d8f37b2bf988c3fd19b0e8c519eb310a4d8
--- /dev/null
+++ b/packages/opendesign/src/link/__docs__/__case__/LinkGlobal.vue
@@ -0,0 +1,45 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 全局配置
+
+可以通过`global`属性来控制链接点击之后是否在全局生效。该属性需要搭配OConfigProvider组件使用，当`global`为true时（默认为true），链接点击之后，会触发全局配置的link回调。
+
+<!-- en-US -->
+
+### Global configuration
+
+The `global` attribute can be used to control whether a link takes effect globally after being clicked. This attribute needs to be used in conjunction with the OConfigProvider component. When `global` is true (the default is true), a global configuration link callback will be triggered after the link is clicked.
+</docs>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OLink, OConfigProvider, LinkConfigT } from '@opensig/opendesign';
+
+const onLinkClick = (e: MouseEvent) => {
+  alert(`浮层${(e.target as HTMLElement).innerHTML}`);
+};
+
+const loading = ref(false);
+const onLinkClick2 = () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 3000);
+};
+
+const linkConfig: LinkConfigT = {
+  click: (e, params, attrs) => {
+    console.log(e, params, attrs);
+  },
+};
+</script>
+<template>
+  <div class="row">
+    <OConfigProvider :link="linkConfig">
+      <OLink :loading="!loading">loading</OLink>
+      <OLink :loading="loading" status="primary" @click="onLinkClick2" diy="123">点击Loading</OLink>
+      <OLink status="primary" @click="onLinkClick">点击弹窗</OLink>
+    </OConfigProvider>
+  </div>
+</template>
+<style scoped lang="scss"></style>
diff --git a/packages/opendesign/src/link/__docs__/__case__/LinkIconSize.vue b/packages/opendesign/src/link/__docs__/__case__/LinkIconSize.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ccc5637514a60a4181fe76d17d77aeca96cd6866
--- /dev/null
+++ b/packages/opendesign/src/link/__docs__/__case__/LinkIconSize.vue
@@ -0,0 +1,55 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 插槽及大小
+
+可以通过`icon`插槽设置链接左侧内容，通过`suffix`插槽设置链接右侧内容，通过`size`属性设置链接大小。
+
+<!-- en-US -->
+
+### Slots
+
+The Link icon can be set using the `icon` slot, and the link suffix can be set using the `suffix` slot, and the link size can be set using the `size` property.
+</docs>
+<script setup lang="ts">
+import { OLink } from '@opensig/opendesign';
+import { OIconEye, OIconChevronRight } from '@opensig/opendesign';
+</script>
+<template>
+  <div class="row">
+    <OLink size="medium" color="warning">
+      <template #icon><OIconEye /></template>
+      了解更多
+    </OLink>
+    <OLink size="medium" color="warning">
+      <template #suffix><OIconChevronRight /></template>
+      了解更多
+    </OLink>
+    <OLink size="medium" color="warning">
+      <template #icon><OIconEye /></template>
+      <template #suffix><OIconChevronRight /></template>
+      了解更多
+    </OLink>
+  </div>
+  <div class="row">
+    <OLink color="success">
+      <template #icon><OIconEye /></template>
+    </OLink>
+    <OLink color="success" size="small">
+      <template #icon><OIconEye /></template>
+    </OLink>
+    <OLink color="success" size="medium">
+      <template #icon><OIconEye /></template>
+    </OLink>
+    <OLink color="success" size="large">
+      <template #icon><OIconEye /></template>
+    </OLink>
+  </div>
+</template>
+<style scoped lang="scss">
+.o-link {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+}
+</style>
diff --git a/packages/opendesign/src/link/__docs__/__case__/LinkLoading.vue b/packages/opendesign/src/link/__docs__/__case__/LinkLoading.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9798d2f7770c5f2c322931b7866423cf5ffcbadc
--- /dev/null
+++ b/packages/opendesign/src/link/__docs__/__case__/LinkLoading.vue
@@ -0,0 +1,37 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 加载中
+
+加载中的链接，通过`loading`属性控制链接的加载状态。当`loading`为`true`时，链接会显示加载中的状态，同时`icon`插槽会被替换为加载中的图标。
+
+<!-- en-US -->
+
+### Loading
+
+A link that is loading, controlled by the `loading` property. When `loading` is `true`, the link will display the loading state. The `icon` slot will be replaced with the loading icon.
+</docs>
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { OIconEye } from '@opensig/opendesign';
+import { OLink } from '@opensig/opendesign';
+const rlt = reactive({
+  loading1: false,
+  loading2: false,
+});
+const showLoading = (key: keyof typeof rlt, val: boolean) => {
+  rlt[key] = val;
+  setTimeout(() => {
+    rlt[key] = !val;
+  }, 1000);
+};
+</script>
+<template>
+  <div class="row">
+    <OLink color="primary" :loading="rlt.loading1" @click="showLoading('loading1', true)">查看更多</OLink>
+    <OLink color="primary" :loading="rlt.loading2" @click="showLoading('loading2', true)">
+      <template #icon><OIconEye /></template>
+      点击icon替换成loading
+    </OLink>
+  </div>
+</template>
diff --git a/packages/opendesign/src/link/__docs__/__case__/LinkUsage.vue b/packages/opendesign/src/link/__docs__/__case__/LinkUsage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..096e6425e056909336dea0c3cef804f8ceb9cb26
--- /dev/null
+++ b/packages/opendesign/src/link/__docs__/__case__/LinkUsage.vue
@@ -0,0 +1,86 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 使用
+
+五种主题色：`normal`、`primary`、`success`、`warning`、`danger` ；
+
+四种尺寸：`auto`、`small`、`medium`、`large` ；
+
+四种跳转方式：`_blank`、`_parent`、`_self`、`_top` ；
+
+禁用状态：`disabled` ；
+
+加载状态：`loading` ；
+
+<!-- en-US -->
+
+### Usage
+
+Five theme colors: `normal`、`primary`、`success`、`warning`, and `danger`;
+
+Four sizes: `auto`、`small`、`medium`、`large`;
+
+Four forms of jumps: `_blank`、`_parent`、`_self`, and `_top`
+
+Disabled state: `disabled`;
+
+Loading state: `loading`;
+</docs>
+<script setup lang="ts">
+import { propsToAttrStr } from '../../../_demo/utils';
+import { DocDemoSchema, DocDemoTemplate } from '../../../_demo/types';
+
+const _schema = {
+  href: {
+    type: 'string',
+    default: '#使用',
+  },
+  target: {
+    type: 'list',
+    list: ['_blank', '_parent', '_self', '_top'],
+  },
+  color: {
+    type: 'list',
+    list: ['normal', 'primary', 'success', 'warning', 'danger'],
+  },
+  size: {
+    type: 'list',
+    list: ['large', 'medium', 'small', 'auto'],
+  },
+  disabled: {
+    type: 'boolean',
+  },
+  loading: {
+    type: 'boolean',
+  },
+  'icon(slot)': {
+    type: 'boolean',
+  },
+  'suffix(slot)': {
+    type: 'boolean',
+    default: true,
+  },
+  hoverBg: {
+    type: 'boolean',
+  },
+  hoverUnderline: {
+    type: 'boolean',
+  },
+} satisfies Record<string, DocDemoSchema>;
+
+const _template: DocDemoTemplate<typeof _schema> = (props) => {
+  const { 'icon(slot)': iconSlot, 'suffix(slot)': suffixSlot } = props;
+  let innerHTML = '';
+  if (iconSlot) {
+    innerHTML += '\n<template #icon><OIconEye /></template>';
+  }
+  innerHTML += '\n查看更多';
+  if (suffixSlot) {
+    innerHTML += '\n<template #suffix><OIconChevronRight /></template>';
+  }
+  return `<OLink style="display:flex;align-items:center;width:fit-content" ${propsToAttrStr(props, ['icon(slot)', 'suffix(slot)'])}>${innerHTML}\n</OLink>`;
+};
+
+const _ctx = {};
+</script>
diff --git a/packages/opendesign/src/link/__docs__/index.en-US.md b/packages/opendesign/src/link/__docs__/index.en-US.md
new file mode 100644
index 0000000000000000000000000000000000000000..e78e0c2646c6f91b25bd32f912642c31833f4377
--- /dev/null
+++ b/packages/opendesign/src/link/__docs__/index.en-US.md
@@ -0,0 +1,16 @@
+---
+sidebar: OLink Link
+---
+
+# Link
+
+## Demo
+
+<!-- @usage LinkUsage -->
+<!-- @case LinkIconSize -->
+<!-- @case LinkLoading -->
+<!-- @case LinkGlobal -->
+
+## Api
+
+<!-- @api OLink -->
diff --git a/packages/opendesign/src/link/__docs__/index.zh-CN.md b/packages/opendesign/src/link/__docs__/index.zh-CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..6ea13f480d7b63199ef678cfcbfb1459cad69920
--- /dev/null
+++ b/packages/opendesign/src/link/__docs__/index.zh-CN.md
@@ -0,0 +1,16 @@
+---
+sidebar: OLink 链接
+---
+
+# 链接
+
+## 示例
+
+<!-- @usage LinkUsage -->
+<!-- @case LinkIconSize -->
+<!-- @case LinkLoading -->
+<!-- @case LinkGlobal -->
+
+## Api
+
+<!-- @api OLink -->
diff --git a/packages/opendesign/src/link/style/index.scss b/packages/opendesign/src/link/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..67b8dbf9bcc94cd1494cdee89f98918026e5ab5a 100644
--- a/packages/opendesign/src/link/style/index.scss
+++ b/packages/opendesign/src/link/style/index.scss
@@ -1,2 +1,3 @@
+@use './var.scss' as *;
 @use './style.scss' as *;
 @use './media.scss' as *;
diff --git a/packages/opendesign/src/link/style/style.scss b/packages/opendesign/src/link/style/style.scss
index e4a371309c9aefa0ef529c5fdb4b68d548997393..a95f68d58bf6ff908c7f8b85c1cc814932867b48 100644
--- a/packages/opendesign/src/link/style/style.scss
+++ b/packages/opendesign/src/link/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-link {
   cursor: pointer;
diff --git a/packages/opendesign/src/link/style/theme-ascend.index.ts b/packages/opendesign/src/link/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/link/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/link/style/theme-ascend.scss b/packages/opendesign/src/link/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5f4b8aedb3a03bdde16dc722b78e5c52dad2630f
--- /dev/null
+++ b/packages/opendesign/src/link/style/theme-ascend.scss
@@ -0,0 +1,15 @@
+.o-link-normal {
+  --link-color: var(--o-color-info2);
+  --link-color-hover: var(--o-color-info1);
+  --link-color-active: var(--o-color-info1);
+}
+.o-link-primary {
+  --link-color: var(--o-color-link1);
+  --link-color-hover: var(--o-color-link1);
+  --link-color-active: var(--o-color-link1);
+}
+.o-link-disabled.o-link-primary,
+.o-link-disabled.o-link-primary:hover,
+.o-link-disabled.o-link-primary:active {
+  color: var(--o-color-link4);
+}
diff --git a/packages/opendesign/src/link/style/theme-kunpeng.index.ts b/packages/opendesign/src/link/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/link/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/link/style/theme-kunpeng.scss b/packages/opendesign/src/link/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5f4b8aedb3a03bdde16dc722b78e5c52dad2630f
--- /dev/null
+++ b/packages/opendesign/src/link/style/theme-kunpeng.scss
@@ -0,0 +1,15 @@
+.o-link-normal {
+  --link-color: var(--o-color-info2);
+  --link-color-hover: var(--o-color-info1);
+  --link-color-active: var(--o-color-info1);
+}
+.o-link-primary {
+  --link-color: var(--o-color-link1);
+  --link-color-hover: var(--o-color-link1);
+  --link-color-active: var(--o-color-link1);
+}
+.o-link-disabled.o-link-primary,
+.o-link-disabled.o-link-primary:hover,
+.o-link-disabled.o-link-primary:active {
+  color: var(--o-color-link4);
+}
diff --git a/packages/opendesign/src/link/style/theme-openeuler.index.ts b/packages/opendesign/src/link/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/link/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/link/style/theme-openeuler.scss b/packages/opendesign/src/link/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/loading/style/index.scss b/packages/opendesign/src/loading/style/index.scss
index f5bdc7dcbcb23e7fdafe457a08fea2b2058c8e5b..8758ab15dd9227626cac4b38c43076e260b9ac50 100644
--- a/packages/opendesign/src/loading/style/index.scss
+++ b/packages/opendesign/src/loading/style/index.scss
@@ -1,28 +1,2 @@
-@use '../../_styles/mixin.scss' as *;
-@use './var.scss';
-
-.o-loading {
-  font-size: var(--o-font_size-text1);
-  line-height: var(--o-line_height-text1);
-}
-.o-loading-main {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--loading-color);
-}
-.o-loading-icon {
-  font-size: var(--loading-icon-size);
-  color: var(--loading-icon-color);
-  + .o-loading-label {
-    margin-left: 4px;
-  }
-}
-.o-layer-mask + .o-loading-main {
-  color: var(--loading-mask-color);
-  .o-loading-icon {
-    color: var(--loading-mask-icon-color);
-  }
-}
+@use './var.scss' as *;
+@use './style.scss' as *;
diff --git a/packages/opendesign/src/loading/style/style.scss b/packages/opendesign/src/loading/style/style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5a31d37e6eb9f91420d892267d887fd455c34dee
--- /dev/null
+++ b/packages/opendesign/src/loading/style/style.scss
@@ -0,0 +1,27 @@
+@use '../../_styles/mixin.scss' as *;
+
+.o-loading {
+  font-size: var(--o-font_size-text1);
+  line-height: var(--o-line_height-text1);
+}
+.o-loading-main {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--loading-color);
+}
+.o-loading-icon {
+  font-size: var(--loading-icon-size);
+  color: var(--loading-icon-color);
+  + .o-loading-label {
+    margin-left: 4px;
+  }
+}
+.o-layer-mask + .o-loading-main {
+  color: var(--loading-mask-color);
+  .o-loading-icon {
+    color: var(--loading-mask-icon-color);
+  }
+}
diff --git a/packages/opendesign/src/loading/style/theme-ascend.index.ts b/packages/opendesign/src/loading/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..894f23779683b66126063f71d5d475cab9544d89
--- /dev/null
+++ b/packages/opendesign/src/loading/style/theme-ascend.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../layer/style/theme-ascend.index';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/loading/style/theme-ascend.scss b/packages/opendesign/src/loading/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/loading/style/theme-kunpeng.index.ts b/packages/opendesign/src/loading/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5d3223a772e578bcf1cdd7ac5ae610fb0d4d4d14
--- /dev/null
+++ b/packages/opendesign/src/loading/style/theme-kunpeng.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../layer/style/theme-kunpeng.index';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/loading/style/theme-kunpeng.scss b/packages/opendesign/src/loading/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/loading/style/theme-openeuler.index.ts b/packages/opendesign/src/loading/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..82304554501049aa694cff35ec9a361f4f6a38cb
--- /dev/null
+++ b/packages/opendesign/src/loading/style/theme-openeuler.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../layer/style/theme-openeuler.index';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/loading/style/theme-openeuler.scss b/packages/opendesign/src/loading/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/menu/OMenu.vue b/packages/opendesign/src/menu/OMenu.vue
index 396cccdd3977484213cbbd8ef233dd98d13a9c73..4990a0afa966d379e6cfdcf3a05a1202635b8d99 100644
--- a/packages/opendesign/src/menu/OMenu.vue
+++ b/packages/opendesign/src/menu/OMenu.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { onMounted, provide, ref, toRefs, watch } from 'vue';
-import { menuInjectKey } from './provide';
+import { onMounted, provide, ref, shallowRef, toRefs, watch } from 'vue';
+import { menuInjectKey, type ShowTooltipContent, type ShowTooltipOptions } from './provide';
 import { menuProps } from './types';
 import MenuTree from './menu';
 import { isArray, isUndefined } from '../_utils/is';
+import { OPopover } from '../popover';
+import '../popover/style';
 
 const props = defineProps(menuProps);
 
@@ -16,7 +18,7 @@ const emits = defineEmits<{
 
 const menuTree = new MenuTree(NaN, null);
 
-const { accordion, levelIndent, modelValue, defaultValue, expanded, defaultExpanded } = toRefs(props);
+const { size, accordion, modelValue, defaultValue, expanded, defaultExpanded } = toRefs(props);
 
 // value值
 const realValue = ref(modelValue?.value ?? defaultValue.value);
@@ -65,12 +67,28 @@ const updateExpanded = (val: Array<string>) => {
   emits('expanded-change', val);
 };
 
+const tooltipTarget = shallowRef<HTMLElement>();
+const tooltipContent = shallowRef<ShowTooltipContent>('');
+/**
+ * 对溢出元素创建tooltip，避免逐个元素创建浪费性能
+ */
+const showTooltip = (options: ShowTooltipOptions) => {
+  const { el, content } = options;
+  tooltipTarget.value = el;
+  tooltipContent.value = content || el.innerText;
+};
+const hideTooltip = () => {
+  tooltipContent.value = '';
+  tooltipTarget.value = undefined;
+};
+
 // 节点嵌套深度
 const depth = 0;
 
+
 provide(menuInjectKey, {
+  size,
   accordion,
-  levelIndent,
   realValue,
   activeNodes,
   realExpanded,
@@ -78,11 +96,17 @@ provide(menuInjectKey, {
   depth,
   updateModelValue,
   updateExpanded,
+  showTooltip,
+  hideTooltip
 });
 </script>
 
 <template>
-  <ul class="o-menu">
+  <ul :class="['o-menu', `o-menu-${size}`]">
     <slot></slot>
+    <OPopover v-if="tooltipTarget" visible :offset="16" :target="tooltipTarget" position="bottom">
+      <template v-if="['string', 'number'].includes(typeof tooltipContent)">{{ tooltipContent }}</template>
+      <component v-else :is="tooltipContent" />
+    </OPopover>
   </ul>
 </template>
diff --git a/packages/opendesign/src/menu/OMenuItem.vue b/packages/opendesign/src/menu/OMenuItem.vue
index 3bc5685e5114190a8a87efe54747b30f04c60989..6e2363a5a55d3b6ef1e30dc35141b2582e244d55 100644
--- a/packages/opendesign/src/menu/OMenuItem.vue
+++ b/packages/opendesign/src/menu/OMenuItem.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue';
+import { computed, inject, ref } from 'vue';
 import { menuItemProps } from './types';
 import { menuInjectKey, subMenuInjectKey } from './provide';
 import { isUndefined } from '../_utils/is';
+import { isOverflown } from '../_utils/dom.ts';
 
 const props = defineProps(menuItemProps);
 
@@ -13,6 +14,8 @@ const emits = defineEmits<{
 const menuInjection = inject(menuInjectKey, null);
 const subMenuInjection = inject(subMenuInjectKey, null);
 
+const { size = ref('medium'), showTooltip, hideTooltip } = menuInjection || {};
+
 const isSelected = computed(() => {
   if (menuInjection) {
     return menuInjection.realValue.value === props.value;
@@ -38,30 +41,39 @@ const onItemClick = (ev: MouseEvent) => {
 
 const depth = subMenuInjection ? subMenuInjection.depth + 1 : 1;
 
-const style = computed(() => {
-  if (depth === 1) {
-    return {};
-  } else {
-    return {
-      paddingLeft: `${(menuInjection?.levelIndent.value ?? 20) * depth}px`,
-    };
-  }
+
+const cssVars = computed(() => {
+  return {
+    '--menu-item-level': depth,
+  };
 });
 
 menuInjection?.menuTree.addChild({
   value: props.value as string,
   parentVal: subMenuInjection?.value,
 });
+
+const itemContentRef = ref<HTMLSpanElement>();
+const handleMouseenter = (e: MouseEvent) => {
+  if (!e.target || !isOverflown(itemContentRef.value)) {
+    return;
+  }
+  showTooltip?.({ el: e.target as HTMLElement, content: itemContentRef.value?.innerText });
+};
+const handleMouseleave = () => {
+  hideTooltip?.();
+};
 </script>
 
 <template>
-  <li class="o-menu-item" :class="{ 'o-menu-item-selected': isSelected, 'o-menu-item-disabled': $props.disabled }" :style="style" @click="onItemClick">
-    <span v-if="props.icon || $slots.icon" class="o-menu-item-icon">
+  <li class="o-menu-item" :class="{ 'o-menu-item-selected': isSelected, 'o-menu-item-disabled': $props.disabled }"
+    :style="cssVars" @click="onItemClick" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
+    <span v-if="size !== 'small' && (props.icon || $slots.icon)" class="o-menu-item-icon">
       <slot name="icon">
         <component :is="props.icon" />
       </slot>
     </span>
-    <span class="o-menu-item-content">
+    <span class="o-menu-item-content" ref="itemContentRef">
       <slot></slot>
     </span>
   </li>
diff --git a/packages/opendesign/src/menu/OSubMenu.vue b/packages/opendesign/src/menu/OSubMenu.vue
index d8b99886b20a87f87ee115390a676192fc24502f..dcb5ff479e3e62a55c077e139a67b57487fbe24d 100644
--- a/packages/opendesign/src/menu/OSubMenu.vue
+++ b/packages/opendesign/src/menu/OSubMenu.vue
@@ -1,15 +1,18 @@
 <script lang="ts" setup>
-import { computed, inject, provide } from 'vue';
+import { computed, inject, provide, ref } from 'vue';
 import { subMenuProps } from './types';
-import { IconChevronRight } from '../_utils/icons';
+import { IconChevronDown } from '../_utils/icons';
 import { menuInjectKey, subMenuInjectKey } from './provide';
 import { isUndefined } from '../_utils/is';
+import { isOverflown } from '../_utils/dom.ts';
 
 const props = defineProps(subMenuProps);
 
 const menuInjection = inject(menuInjectKey, null);
 const subMenuInjection = inject(subMenuInjectKey, null);
 
+const { size = ref('medium'), showTooltip, hideTooltip } = menuInjection || {};
+
 // 是否展开
 const isExpanded = computed(() => {
   if (isUndefined(props.value)) {
@@ -74,18 +77,11 @@ const onSubItemClick = (ev: Event) => {
 
 const depth = subMenuInjection ? subMenuInjection.depth + 1 : 1;
 
-const style = computed(() => {
-  if (depth === 1) {
-    return {};
-  } else {
-    return {
-      paddingLeft: `${(menuInjection?.levelIndent.value ?? 20) * depth}px`,
-    };
-  }
+provide(subMenuInjectKey, {
+  value: props.value,
+  depth,
 });
 
-provide(subMenuInjectKey, { value: props.value, depth });
-
 menuInjection?.menuTree.addChild({
   value: props.value as string,
   parentVal: subMenuInjection?.value,
@@ -108,26 +104,47 @@ const onBeforeLeave = (el: Element) => {
 const onLeave = (el: Element) => {
   (el as HTMLUListElement).style.height = '0px';
 };
+
+
+const itemContentRef = ref<HTMLSpanElement>();
+const handleMouseenter = (e: MouseEvent) => {
+  if (!e.target || !isOverflown(itemContentRef.value)) {
+    return;
+  }
+  showTooltip?.({ el: e.target as HTMLElement, content: itemContentRef.value?.innerText });
+};
+const handleMouseleave = () => {
+  hideTooltip?.();
+};
 </script>
 
 <template>
-  <li
-    class="o-sub-menu"
+  <li class="o-sub-menu"
     :class="{ 'o-sub-menu-selected': isSelected, 'o-sub-menu-associated-selected': isAssociatedSelected, 'o-sub-menu-expanded': isExpanded }"
-    @click="onSubItemClick"
-  >
-    <div class="o-sub-menu-title" :style="style">
-      <span v-if="$slots.icon" class="o-sub-menu-title-icon">
-        <slot name="icon"></slot>
-      </span>
-      <span class="o-sub-menu-title-content">
-        <slot name="title"></slot>
-      </span>
-      <span class="o-sub-menu-title-arrow">
-        <IconChevronRight />
-      </span>
+    :style="{ '--sub-menu-level': depth }" @click="onSubItemClick">
+    <div class="o-sub-menu-title" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
+      <template v-if="size === 'small'">
+        <span class="o-sub-menu-title-arrow o-sub-menu-title-icon">
+          <IconChevronDown />
+        </span>
+        <span ref="itemContentRef" class="o-sub-menu-title-content">
+          <slot name="title"></slot>
+        </span>
+      </template>
+      <template v-else>
+        <span v-if="$slots.icon" class="o-sub-menu-title-icon">
+          <slot name="icon"></slot>
+        </span>
+        <span ref="itemContentRef" class="o-sub-menu-title-content">
+          <slot name="title"></slot>
+        </span>
+        <span class="o-sub-menu-title-arrow">
+          <IconChevronDown />
+        </span>
+      </template>
     </div>
-    <Transition @before-enter="onBeforeEnter" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave">
+    <Transition @before-enter="onBeforeEnter" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave"
+      @leave="onLeave">
       <ul v-show="isExpanded" class="o-sub-menu-children">
         <slot></slot>
       </ul>
diff --git a/packages/opendesign/src/menu/__demo__/IndexMenu.vue b/packages/opendesign/src/menu/__demo__/IndexMenu.vue
index e5334052a14c12e99684894b93231fb63a98cdde..f5180b5f8bea5e7715a148678d4d4a9f0370a8fc 100644
--- a/packages/opendesign/src/menu/__demo__/IndexMenu.vue
+++ b/packages/opendesign/src/menu/__demo__/IndexMenu.vue
@@ -2,11 +2,19 @@
 import '../style';
 import MenuBasic from './MenuBasic.vue';
 import MenuAccordion from './MenuAccordion.vue';
+import MenuSize from './MenuSize.vue';
 </script>
 
 <template>
   <div class="page-demo">
     <MenuBasic />
     <MenuAccordion />
+    <MenuSize />
   </div>
 </template>
+
+<style scoped>
+.page-demo {
+  background-color: var(--o-color-fill2);
+}
+</style>
\ No newline at end of file
diff --git a/packages/opendesign/src/menu/__demo__/MenuSize.vue b/packages/opendesign/src/menu/__demo__/MenuSize.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0f920cadfdabe94bbc1a58eb3065006a5271788c
--- /dev/null
+++ b/packages/opendesign/src/menu/__demo__/MenuSize.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { ref, computed, reactive } from 'vue';
+import { OForm, OFormItem } from '../../form';
+import '../../form/style';
+import { OInputNumber } from '../../input-number';
+import '../../input-number/style';
+import { ORadio } from '../../radio';
+import '../../radio/style';
+import { ORadioGroup } from '../../radio-group';
+import '../../radio-group/style';
+
+import { mockTreeArr, MockTreeParams } from './utils.ts';
+import { OMenu } from '../index';
+import RecursiveSubMenu from './RecursiveSubMenu.vue';
+import OIconMore from './OIconMore.vue';
+
+const params = reactive<Pick<MockTreeParams, 'depth' | 'maxChild' | 'minChild'> & {
+  iconType: 'all' | 'some' | 'none'
+}>({
+  depth: 3, minChild: 2, maxChild: 10, iconType: 'none'
+});
+const data = computed(() => mockTreeArr({
+  ...params,
+  getIcon(item, i) {
+    if (params.iconType === 'all') {
+      return OIconMore;
+    } else if (params.iconType === 'some') {
+      return i % 2 ? OIconMore : undefined;
+    }
+    return undefined;
+  }
+}));
+const activeVal = ref();
+const expandedArr = ref([]);
+</script>
+
+<template>
+  <h4>带缩进指示线及背景颜色</h4>
+  <div>
+    <OForm>
+      <OFormItem label="最大深度" required>
+        <OInputNumber v-model="params.depth"/>
+      </OFormItem>
+      <OFormItem label="最小子节点数量" required>
+        <OInputNumber v-model="params.minChild"/>
+      </OFormItem>
+      <OFormItem label="最大子节点数量" required>
+        <OInputNumber v-model="params.maxChild"/>
+      </OFormItem>
+      <OFormItem label="图标" field="radio">
+        <ORadioGroup v-model="params.iconType">
+          <ORadio value="all">全部</ORadio>
+          <ORadio value="some">部分</ORadio>
+          <ORadio value="none">无</ORadio>
+        </ORadioGroup>
+      </OFormItem>
+    </OForm>
+  </div>
+  <section :key="params.iconType">
+    <div>
+      medium
+      <OMenu v-model="activeVal" v-model:expanded="expandedArr" accordion :level-indicator="true" size="medium">
+        <RecursiveSubMenu v-for="item in data" :key="item.label" :data="item"/>
+      </OMenu>
+    </div>
+    <div>
+      small
+      <OMenu v-model="activeVal" v-model:expanded="expandedArr" accordion :level-indicator="true" size="small">
+        <RecursiveSubMenu v-for="item in data" :key="item.label" :data="item"/>
+      </OMenu>
+    </div>
+  </section>
+</template>
+
+<style scoped lang="scss">
+section {
+  display: flex;
+  align-items: stretch;
+  gap: 120px;
+
+  :deep(.o-menu1) {
+
+    /*箭头调整*/
+    .o-sub-menu-title-arrow {
+      display: none;
+    }
+
+    .o-sub-menu-title-icon {
+      transition: transform var(--o-duration-m2) var(--o-easing-standard);
+    }
+
+    .o-sub-menu-expanded > .o-sub-menu-title .o-sub-menu-title-icon {
+      transform: rotate(-180deg);
+    }
+
+    /*引导线*/
+    .o-sub-menu-expanded {
+      .o-sub-menu-children {
+        position: relative;
+
+        &:before {
+          content: '';
+          display: block;
+          position: absolute;
+          z-index: var(--guid-line-z-index);
+          width: 1px;
+          height: 100%;
+          background-color: red;
+          left: var(--parent-padding-left);
+          top: 0;
+          bottom: 0;
+        }
+      }
+    }
+
+    > .o-sub-menu > .o-sub-menu-children:before {
+      display: none;
+    }
+
+    /*尺寸调整*/
+    .o-sub-menu {
+      --sub-menu-radius: 0;
+      --sub-menu-icon-size: 16px;
+      --padding-y: calc((var(--o-control_size-m) - var(--menu-item-secondary-text-height)) / 2);
+    }
+
+    .o-menu-item {
+      --menu-item-radius: 0;
+      padding-top: var(--padding-y);
+      padding-bottom: var(--padding-y);
+    }
+
+    .o-menu-item + .o-menu-item {
+      margin-top: 0;
+    }
+
+    .o-sub-menu-associated-selected {
+      background-color: #f7f8fa;
+
+      > .o-sub-menu-title .o-sub-menu-title-content {
+        color: var(--o-color-info1);
+        font-weight: 700;
+
+      }
+    }
+
+    .o-menu-item-selected {
+      background-color: #d1d6db;
+      color: var(--o-color-info1);
+      font-weight: 700;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/packages/opendesign/src/menu/__demo__/RecursiveSubMenu.vue b/packages/opendesign/src/menu/__demo__/RecursiveSubMenu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e7e762b9dd9da02885df0924f4b13449a5bb8f1b
--- /dev/null
+++ b/packages/opendesign/src/menu/__demo__/RecursiveSubMenu.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { MockTreeItem } from './utils.ts';
+import {  OMenuItem, OSubMenu } from '../index';
+
+const props = defineProps<{
+  data: MockTreeItem
+}>();
+
+</script>
+
+<template>
+  <OSubMenu v-if="props.data.children?.length"  :value="props.data.label" >
+    <template #title>{{props.data.label}}</template>
+    <template #icon v-if="props.data.icon">
+      <component :is="props.data.icon"/>
+    </template>
+    <RecursiveSubMenu v-for="item in props.data.children" :key="item.label" :data="item"/>
+  </OSubMenu>
+  <OMenuItem v-else :value="props.data.label">
+    <template #icon v-if="props.data.icon">
+      <component :is="props.data.icon"/>
+    </template>
+    {{props.data.label}}
+  </OMenuItem>
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/packages/opendesign/src/menu/__demo__/utils.ts b/packages/opendesign/src/menu/__demo__/utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..350103e88051e3076d057bb140074c4a275e40b7
--- /dev/null
+++ b/packages/opendesign/src/menu/__demo__/utils.ts
@@ -0,0 +1,64 @@
+import OIconMore from './OIconMore.vue';
+import { type Component } from 'vue';
+
+export type MockTreeItem = {
+  label: string;
+  icon?: Component;
+  children?: MockTreeItem[];
+};
+
+export type MockTreeParams = {
+  depth: number;
+  maxChild: number;
+  minChild: number;
+  label?: string;
+  getIcon?: (item: Omit<MockTreeItem, 'icon'>, index: number) => Component | undefined;
+  overflowText?: string;
+};
+const defaultOverflowText = '这是个长度的文字超长的文字用于测试溢出行为';
+
+export function mockTreeItem({
+  depth,
+  maxChild,
+  minChild,
+  label,
+  getIcon,
+  overflowText = defaultOverflowText,
+}: MockTreeParams & { label: string }): Omit<MockTreeItem, 'icon'> {
+  const children =
+    depth > 1
+      ? mockTreeArr({
+          depth: depth - 1,
+          maxChild,
+          minChild,
+          label,
+          getIcon,
+          overflowText,
+        })
+      : undefined;
+  return {
+    label,
+    children,
+  };
+}
+
+export function mockTreeArr({ depth, maxChild, minChild, label = '1', getIcon, overflowText = defaultOverflowText }: MockTreeParams): MockTreeItem[] {
+  if (depth <= 0) return [];
+  return new Array<number>(Math.floor(Math.random() * (maxChild - minChild + 1)) + minChild).fill(1).map((_, i) => {
+    const _item: MockTreeItem = mockTreeItem({
+      depth: depth,
+      maxChild,
+      minChild,
+      label: `${`${label}-${i + 1}`.replace(overflowText, '')}${overflowText}`,
+      getIcon,
+      overflowText,
+    });
+    if (getIcon) {
+      _item.icon = getIcon(_item, i);
+    } else {
+      _item.icon = OIconMore;
+    }
+
+    return _item;
+  });
+}
diff --git a/packages/opendesign/src/menu/index.ts b/packages/opendesign/src/menu/index.ts
index 30fb5df54197f27c8a0c6a8127c8cc481ec9fdb4..b3aafc7530cbd43e0271dcbe243a0236ee4a1dbd 100644
--- a/packages/opendesign/src/menu/index.ts
+++ b/packages/opendesign/src/menu/index.ts
@@ -16,3 +16,4 @@ const OMenu = Object.assign(_OMenu, {
 
 export { OMenu, OSubMenu, OMenuItem };
 export * from './types';
+export * from './provide';
diff --git a/packages/opendesign/src/menu/provide.ts b/packages/opendesign/src/menu/provide.ts
index 99811e06642f178642f246b7b976f88b0762d50e..1c8662824cf4e97e0d3563b16be7f45c37a672dc 100644
--- a/packages/opendesign/src/menu/provide.ts
+++ b/packages/opendesign/src/menu/provide.ts
@@ -1,9 +1,18 @@
-import { InjectionKey, Ref } from 'vue';
+import { Component, InjectionKey, Ref } from 'vue';
 import MenuTree from './menu';
+import { type MenuSizeT } from './types.ts';
+
+
+export type ShowTooltipContent = string | number| Component
+export type ShowTooltipOptions = {
+  el: HTMLElement;
+  /*不传取el的innerText*/
+  content?: ShowTooltipContent;
+}
 
 export const menuInjectKey: InjectionKey<{
+  size: Ref<MenuSizeT>;
   accordion: Ref<boolean>;
-  levelIndent: Ref<number>;
   realValue: Ref<string>;
   activeNodes: Ref<Array<string | undefined>>;
   realExpanded: Ref<Array<string>>;
@@ -11,6 +20,8 @@ export const menuInjectKey: InjectionKey<{
   depth: number;
   updateModelValue: (val: string) => void;
   updateExpanded: (val: Array<string>) => void;
+  showTooltip: (options: ShowTooltipOptions) => void;
+  hideTooltip: () => void;
 }> = Symbol('provide-menu');
 
 export const subMenuInjectKey: InjectionKey<{
diff --git a/packages/opendesign/src/menu/style/index.scss b/packages/opendesign/src/menu/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..67b8dbf9bcc94cd1494cdee89f98918026e5ab5a 100644
--- a/packages/opendesign/src/menu/style/index.scss
+++ b/packages/opendesign/src/menu/style/index.scss
@@ -1,2 +1,3 @@
+@use './var.scss' as *;
 @use './style.scss' as *;
 @use './media.scss' as *;
diff --git a/packages/opendesign/src/menu/style/media.scss b/packages/opendesign/src/menu/style/media.scss
index 0d74fdbd2adefd45fbd9da475c57eb5637e8a776..0b3194241fea5999415a8d959f0a54aa4f42fd6a 100644
--- a/packages/opendesign/src/menu/style/media.scss
+++ b/packages/opendesign/src/menu/style/media.scss
@@ -1,18 +1,38 @@
 @use '../../_styles/mixin.scss' as *;
 
-@include respond-to('<=laptop') {
+@include respond-to('pad_v-pc_s') {
   .o-menu {
-    --menu-padding-v: 11px;
-    --menu-secondary-padding-v: 11px;
+    --menu-padding-v: 9px;
+    --menu-secondary-padding-v: 5px;
   }
 
   .o-sub-menu {
     --sub-menu-text-size: var(--o-font_size-tip1);
     --sub-menu-text-height: var(--o-line_height-tip1);
+
+    --sub-menu-icon-size: var(--o-icon_size_control-s);
   }
 
   .o-menu-item {
     --menu-item-text-size: var(--o-font_size-text1);
     --menu-item-text-height: var(--o-line_height-text1);
+
+    --menu-item-icon-size: var(--o-icon_size_control-s);
   }
 }
+
+@include respond-to("<=pad_v") {
+  .o-menu.o-menu-small {
+    --menu-secondary-padding-v: 5px;
+
+  }
+  .o-menu.o-menu-small .o-sub-menu {
+    --sub-menu-secondary-text-size: var(--o-font_size-tip2);
+    --sub-menu-secondary-text-height: var(--o-line_height-tip2);
+  }
+
+  .o-menu.o-menu-small .o-menu-item {
+    --menu-item-secondary-text-size: var(--o-font_size-tip2);
+    --menu-item-secondary-text-height: var(--o-line_height-tip2);
+  }
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/menu/style/style.scss b/packages/opendesign/src/menu/style/style.scss
index 06282d06b01c3a37c2d6f43a14926e7e3a37c900..b45d543e6eef71d3e9ca9e4f968c03bfee4a4709 100644
--- a/packages/opendesign/src/menu/style/style.scss
+++ b/packages/opendesign/src/menu/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-menu {
   width: var(--menu-width);
@@ -14,10 +13,6 @@
   font-size: var(--sub-menu-text-size);
   line-height: var(--sub-menu-text-height);
   color: var(--sub-menu-color);
-
-  & + .o-sub-menu {
-    margin-top: 2px;
-  }
 }
 
 .o-sub-menu-selected,
@@ -46,7 +41,7 @@
 .o-sub-menu-expanded {
   & > .o-sub-menu-title {
     .o-sub-menu-title-arrow {
-      transform: rotate(90deg);
+      transform: rotate(-180deg);
     }
   }
 }
@@ -56,9 +51,7 @@
   display: flex;
   align-items: center;
   padding: 16px 48px 16px 8px;
-  padding-top: var(--menu-padding-v);
-  padding-bottom: var(--menu-padding-v);
-  padding-left: var(--menu-padding-h);
+  padding-left: var(--sub-menu-level-indent, var(--menu-padding-h));
   padding-right: var(--sub-menu-padding-right);
   border-radius: var(--sub-menu-radius);
   cursor: pointer;
@@ -72,10 +65,18 @@
 }
 
 .o-sub-menu-title-icon {
-  margin-left: calc(-1 * var(--sub-menu-icon-gap));
   margin-right: var(--sub-menu-icon-gap);
   font-size: var(--sub-menu-icon-size);
   color: var(--sub-menu-icon-color);
+
+  /*纠正容器高度计算错误及空图标占位*/
+  display: flex;
+  align-items: center;
+
+  .o-sub-menu-title-icon-placeholder {
+    height: var(--sub-menu-icon-size);
+    width: var(--sub-menu-icon-size);
+  }
 }
 
 .o-sub-menu-title-content {
@@ -86,7 +87,7 @@
 
 .o-sub-menu-title-arrow {
   position: absolute;
-  right: 16px;
+  right: var(--menu-padding-h);
   transform: rotate(0);
   font-size: var(--sub-menu-arrow-size);
   transition: transform var(--o-duration-m2) var(--o-easing-standard);
@@ -100,23 +101,38 @@
   transition: height var(--o-duration-m2) var(--o-easing-standard);
 }
 
+.o-sub-menu-title, .o-menu-item {
+  --effect-padding-v: var(--menu-padding-v);
+  padding-top: var(--effect-padding-v);
+  padding-bottom: var(--effect-padding-v);
+}
+
+/*选中状态，高度减2px，上下让出1px间距*/
+.o-menu-item-selected,
+.o-sub-menu-selected > .o-sub-menu-title,
+.o-sub-menu-associated-selected > .o-sub-menu-title {
+  margin-top: var(--menu-selected-gap-v);
+  margin-bottom: var(--menu-selected-gap-v);
+  padding-top: calc(var(--effect-padding-v) - var(--menu-selected-gap-v));
+  padding-bottom: calc(var(--effect-padding-v) - var(--menu-selected-gap-v));
+}
+
 .o-sub-menu-children {
-  margin-top: 2px;
+  .o-sub-menu-title, .o-menu-item {
+    --effect-padding-v: var(--menu-secondary-padding-v);
+  }
+
   .o-sub-menu-title {
     font-size: var(--sub-menu-secondary-text-size);
-    line-height: var(--sub-menu-item-secondary-text-height);
-    padding-top: var(--menu-secondary-padding-v);
-    padding-bottom: var(--menu-secondary-padding-v);
+    line-height: var(--sub-menu-secondary-text-height);
   }
+
   .o-menu-item {
     font-size: var(--menu-item-secondary-text-size);
     line-height: var(--menu-item-secondary-text-height);
-    padding-top: var(--menu-secondary-padding-v);
-    padding-bottom: var(--menu-secondary-padding-v);
   }
 }
 
-//menu-item
 .o-menu-item {
   display: flex;
   align-items: center;
@@ -124,29 +140,27 @@
   font-size: var(--menu-item-text-size);
   line-height: var(--menu-item-text-height);
   border-radius: var(--menu-item-radius);
-  padding-top: var(--menu-padding-v);
-  padding-bottom: var(--menu-padding-v);
-  padding-left: var(--menu-padding-h);
+  padding-left: var(--menu-item-level-indent, var(--menu-padding-h));
   padding-right: var(--menu-item-padding-right);
   cursor: pointer;
   transition: background-color var(--o-duration-s) var(--o-easing-standard);
+  position: relative;
 
   @include hover {
     &:hover {
       background-color: var(--menu-item-bg-color-hover);
     }
   }
-
-  & + .o-menu-item {
-    margin-top: 2px;
-  }
 }
 
 .o-menu-item-icon {
-  margin-left: calc(-1 * var(--menu-item-icon-gap));
   margin-right: var(--menu-item-icon-gap);
   font-size: var(--menu-item-icon-size);
   color: var(--menu-item-icon-color);
+
+  /*纠正容器高度计算错误及空图标占位*/
+  display: flex;
+  align-items: center;
 }
 
 .o-menu-item-content {
@@ -175,3 +189,37 @@
   cursor: not-allowed;
   color: var(--menu-item-color-disabled);
 }
+
+.o-menu-small {
+  /*引导线*/
+  .o-sub-menu-expanded {
+    .o-sub-menu-children {
+      position: relative;
+
+      &:before {
+        content: '';
+        display: var(--menu-indicator-display);
+        position: absolute;
+        width: var(--menu-indicator-width);
+        background-color: var(--menu-indicator-bg-color);
+        left: calc(var(--sub-menu-level-indent, var(--menu-padding-h)) + var(--sub-menu-arrow-size) / 2);
+        top: 0;
+        bottom: 0;
+      }
+    }
+  }
+
+  .o-sub-menu-title-arrow {
+    position: unset;
+  }
+
+  > .o-sub-menu-expanded {
+    background-color: var(--sub-expanded-bg-color);
+    /*第一级不展示引导线*/
+    --menu-indicator-display: none;
+
+    .o-sub-menu-expanded {
+      --menu-indicator-display: block;
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/menu/style/theme-ascend.index.ts b/packages/opendesign/src/menu/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/menu/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/menu/style/theme-ascend.scss b/packages/opendesign/src/menu/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/menu/style/theme-kunpeng.index.ts b/packages/opendesign/src/menu/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/menu/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/menu/style/theme-kunpeng.scss b/packages/opendesign/src/menu/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/menu/style/theme-openeuler.index.ts b/packages/opendesign/src/menu/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/menu/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/menu/style/theme-openeuler.scss b/packages/opendesign/src/menu/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/menu/style/var.scss b/packages/opendesign/src/menu/style/var.scss
index b3c28bf75c2647e2d3600b382db83384daca2b9c..10724186dd3494c18727e90e3b465ea810473f17 100644
--- a/packages/opendesign/src/menu/style/var.scss
+++ b/packages/opendesign/src/menu/style/var.scss
@@ -1,10 +1,13 @@
 .o-menu {
   --menu-width: 240px;
   --menu-bg-color: transparent;
-  --menu-padding-v: 15px;
-  --menu-secondary-padding-v: 11px;
-  --menu-padding-h: 16px;
+  --menu-padding-v: 12px;
+  --menu-secondary-padding-v: 9px;
+  --menu-padding-h: 8px;
   --menu-secondary-padding-h: 16px;
+  --menu-indicator-width: 1px;
+  --menu-indicator-bg-color: var(--o-color-control4);
+  --menu-selected-gap-v: 1px;
 }
 
 .o-sub-menu {
@@ -29,7 +32,14 @@
   --sub-menu-arrow-size: var(--o-icon_size_control-m);
 
   --sub-menu-bg-color-hover: var(--o-color-control2-light);
-  --sub-menu-bg-color-selected: var(--o-color-control3-light);
+  --sub-menu-bg-color-selected: rgb(var(--o-mixedgray-6));
+
+  --sub-menu-base-indent: var(--o-icon_size_control-l);
+  --sub-menu-level-indent: calc(var(--menu-padding-h) + (var(--sub-menu-base-indent)) * (var(--sub-menu-level) - 1));
+}
+
+.o-menu > .o-sub-menu {
+  --sub-menu-level-indent: var(--menu-padding-h);
 }
 
 .o-menu-item {
@@ -53,5 +63,52 @@
   --menu-item-secondary-text-height: var(--o-line_height-tip1);
 
   --menu-item-bg-color-hover: var(--o-color-control2-light);
-  --menu-item-bg-color-selected: var(--o-color-control3-light);
+  --menu-item-bg-color-selected: rgb(var(--o-mixedgray-6));
+
+  --menu-item-base-indent: var(--o-icon_size_control-l);
+  --menu-item-level-indent: calc(var(--menu-padding-h) + (var(--menu-item-base-indent)) * (var(--menu-item-level) - 1));
+}
+
+.o-menu > .o-menu-item {
+  --menu-item-level-indent: var(--menu-padding-h);
+}
+
+.o-menu.o-menu-small {
+  --menu-padding-v: 5px;
+  --menu-secondary-padding-v: 5px;
+  --menu-selected-gap-v: 0px;
+  --menu-padding-h: 4px;
+
+}
+
+.o-menu-small .o-sub-menu {
+  --sub-menu-radius: 0px;
+
+  --sub-menu-text-size: var(--o-font_size-tip1);
+  --sub-menu-text-height: var(--o-line_height-tip1);
+
+  --sub-menu-icon-size: var(--o-icon_size_control-xs);
+  --sub-menu-icon-gap: 4px;
+
+  --sub-menu-padding-right: var(--menu-padding-h);
+
+  --sub-menu-arrow-size: var(--o-icon_size_control-xs);
+
+  --sub-expanded-bg-color: rgb(var(--o-mixedgray-2));
+
+  --sub-menu-base-indent: var(--o-icon_size_control-s);
+}
+
+.o-menu-small .o-menu-item {
+  --menu-item-radius: 0px;
+
+  --menu-item-padding-right: var(--menu-padding-h);
+
+  --menu-item-text-size: var(--o-font_size-text1);
+  --menu-item-text-height: var(--o-line_height-text1);
+
+  --menu-item-icon-size: var(--o-icon_size_control-xs);
+  --menu-item-icon-gap: 4px;
+
+  --menu-item-base-indent: var(--o-icon_size_control-s);
 }
diff --git a/packages/opendesign/src/menu/types.ts b/packages/opendesign/src/menu/types.ts
index f78b520546dc8f5abdbcacd9c0922188c8bc1835..a2d09d14aa1b3593ec816f5dd5423f1a2c8db212 100644
--- a/packages/opendesign/src/menu/types.ts
+++ b/packages/opendesign/src/menu/types.ts
@@ -1,7 +1,18 @@
 import type { ExtractPropTypes, PropType, Component } from 'vue';
 
+export const MenuSizeTypes = ['medium', 'small'] as const;
+export type MenuSizeT = (typeof MenuSizeTypes)[number];
+
 // MenuProps
 export const menuProps = {
+  /**
+   * @zh-CN 菜单尺寸
+   * @en-US Menu size
+   */
+  size: {
+    type: String as PropType<MenuSizeT>,
+    default: 'medium'
+  },
   /**
    * 是否开启手风琴模式
    */
diff --git a/packages/opendesign/src/message/style/index.scss b/packages/opendesign/src/message/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..67b8dbf9bcc94cd1494cdee89f98918026e5ab5a 100644
--- a/packages/opendesign/src/message/style/index.scss
+++ b/packages/opendesign/src/message/style/index.scss
@@ -1,2 +1,3 @@
+@use './var.scss' as *;
 @use './style.scss' as *;
 @use './media.scss' as *;
diff --git a/packages/opendesign/src/message/style/style.scss b/packages/opendesign/src/message/style/style.scss
index f7c630b708fa4709ddddb780d8c11c53aea37133..c689cbe971d98c58b17f1242879c6a59f99d1d85 100644
--- a/packages/opendesign/src/message/style/style.scss
+++ b/packages/opendesign/src/message/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-message {
   display: flex;
diff --git a/packages/opendesign/src/message/style/theme-ascend.index.ts b/packages/opendesign/src/message/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/message/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/message/style/theme-ascend.scss b/packages/opendesign/src/message/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/message/style/theme-kunpeng.index.ts b/packages/opendesign/src/message/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/message/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/message/style/theme-kunpeng.scss b/packages/opendesign/src/message/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/message/style/theme-openeuler.index.ts b/packages/opendesign/src/message/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/message/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/message/style/theme-openeuler.scss b/packages/opendesign/src/message/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/option/style/index.scss b/packages/opendesign/src/option/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..67b8dbf9bcc94cd1494cdee89f98918026e5ab5a 100644
--- a/packages/opendesign/src/option/style/index.scss
+++ b/packages/opendesign/src/option/style/index.scss
@@ -1,2 +1,3 @@
+@use './var.scss' as *;
 @use './style.scss' as *;
 @use './media.scss' as *;
diff --git a/packages/opendesign/src/option/style/style.scss b/packages/opendesign/src/option/style/style.scss
index 9090c8ae5fd3ebcebb5e77818ad1a20746d37b1e..c2acbb3dc69db7c29bf79781e3be69f6b438196f 100644
--- a/packages/opendesign/src/option/style/style.scss
+++ b/packages/opendesign/src/option/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-option {
   padding: calc(var(--option-gap) / 2) 0;
diff --git a/packages/opendesign/src/option/style/theme-ascend.index.ts b/packages/opendesign/src/option/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..49eecdca7b1ac13bce81b2b2d03a9e73f94d1ffc
--- /dev/null
+++ b/packages/opendesign/src/option/style/theme-ascend.index.ts
@@ -0,0 +1,5 @@
+import '../../_styles';
+import '../../checkbox/style/theme-ascend.index';
+import '../../scrollbar/style/theme-ascend.index';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/option/style/theme-ascend.scss b/packages/opendesign/src/option/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/option/style/theme-kunpeng.index.ts b/packages/opendesign/src/option/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4889ffb92077c59e5d58d0efb47a3a421af9e628
--- /dev/null
+++ b/packages/opendesign/src/option/style/theme-kunpeng.index.ts
@@ -0,0 +1,5 @@
+import '../../_styles';
+import '../../checkbox/style/theme-kunpeng.index';
+import '../../scrollbar/style/theme-kunpeng.index';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/option/style/theme-kunpeng.scss b/packages/opendesign/src/option/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/option/style/theme-openeuler.index.ts b/packages/opendesign/src/option/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cf2ef539f2aa203f7d77cc89e8e1b1b58fa51110
--- /dev/null
+++ b/packages/opendesign/src/option/style/theme-openeuler.index.ts
@@ -0,0 +1,5 @@
+import '../../_styles';
+import '../../checkbox/style/theme-openeuler.index';
+import '../../scrollbar/style/theme-openeuler.index';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/option/style/theme-openeuler.scss b/packages/opendesign/src/option/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/pagination/style/index.scss b/packages/opendesign/src/pagination/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..67b8dbf9bcc94cd1494cdee89f98918026e5ab5a 100644
--- a/packages/opendesign/src/pagination/style/index.scss
+++ b/packages/opendesign/src/pagination/style/index.scss
@@ -1,2 +1,3 @@
+@use './var.scss' as *;
 @use './style.scss' as *;
 @use './media.scss' as *;
diff --git a/packages/opendesign/src/pagination/style/style.scss b/packages/opendesign/src/pagination/style/style.scss
index 924e8e40e0e857c3eea49008f6f7d33d2e6c7754..bb3ff3988ff55a415688651d8f326e5955358e50 100644
--- a/packages/opendesign/src/pagination/style/style.scss
+++ b/packages/opendesign/src/pagination/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-pagination {
   color: var(--o-color-info2);
diff --git a/packages/opendesign/src/pagination/style/theme-ascend.index.ts b/packages/opendesign/src/pagination/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d36170d0d9d3bf98527586938771c8c6b991f6d7
--- /dev/null
+++ b/packages/opendesign/src/pagination/style/theme-ascend.index.ts
@@ -0,0 +1,9 @@
+import '../../_styles';
+import '../../popover/style/theme-ascend.index';
+import '../../virtual-list/style/theme-ascend.index';
+import '../../input-number/style/theme-ascend.index';
+import '../../select/style/theme-ascend.index';
+import '../../option/style/theme-ascend.index';
+import '../../icon/style/theme-ascend.index';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/pagination/style/theme-ascend.scss b/packages/opendesign/src/pagination/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/pagination/style/theme-kunpeng.index.ts b/packages/opendesign/src/pagination/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..12b16afa4001fb9000d2af94c7536095c739fe8b
--- /dev/null
+++ b/packages/opendesign/src/pagination/style/theme-kunpeng.index.ts
@@ -0,0 +1,9 @@
+import '../../_styles';
+import '../../popover/style/theme-kunpeng.index';
+import '../../virtual-list/style/theme-kunpeng.index';
+import '../../input-number/style/theme-kunpeng.index';
+import '../../select/style/theme-kunpeng.index';
+import '../../option/style/theme-kunpeng.index';
+import '../../icon/style/theme-kunpeng.index';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/pagination/style/theme-kunpeng.scss b/packages/opendesign/src/pagination/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/pagination/style/theme-openeuler.index.ts b/packages/opendesign/src/pagination/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e4b81763ef7121b0ebffe74cc2685280a9e246e7
--- /dev/null
+++ b/packages/opendesign/src/pagination/style/theme-openeuler.index.ts
@@ -0,0 +1,9 @@
+import '../../_styles';
+import '../../popover/style/theme-openeuler.index';
+import '../../virtual-list/style/theme-openeuler.index';
+import '../../input-number/style/theme-openeuler.index';
+import '../../select/style/theme-openeuler.index';
+import '../../option/style/theme-openeuler.index';
+import '../../icon/style/theme-openeuler.index';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/pagination/style/theme-openeuler.scss b/packages/opendesign/src/pagination/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/popover/style/index.scss b/packages/opendesign/src/popover/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..67b8dbf9bcc94cd1494cdee89f98918026e5ab5a 100644
--- a/packages/opendesign/src/popover/style/index.scss
+++ b/packages/opendesign/src/popover/style/index.scss
@@ -1,2 +1,3 @@
+@use './var.scss' as *;
 @use './style.scss' as *;
 @use './media.scss' as *;
diff --git a/packages/opendesign/src/popover/style/style.scss b/packages/opendesign/src/popover/style/style.scss
index ba6b3d4d9fe670de01e05100403936e71bf5d2a3..95e41721632e88e6bc5772b6d580ed154ceae471 100644
--- a/packages/opendesign/src/popover/style/style.scss
+++ b/packages/opendesign/src/popover/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-popover {
   font-size: var(--popover-text-size);
diff --git a/packages/opendesign/src/popover/style/theme-ascend.index.ts b/packages/opendesign/src/popover/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d0b5e7ce2228ae53e336d43b61a8b238fd0bd935
--- /dev/null
+++ b/packages/opendesign/src/popover/style/theme-ascend.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../popup/style/theme-ascend.index';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/popover/style/theme-ascend.scss b/packages/opendesign/src/popover/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/popover/style/theme-kunpeng.index.ts b/packages/opendesign/src/popover/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..77de075150277f92b2c7258ffa606170e90328d6
--- /dev/null
+++ b/packages/opendesign/src/popover/style/theme-kunpeng.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../popup/style/theme-kunpeng.index';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/popover/style/theme-kunpeng.scss b/packages/opendesign/src/popover/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/popover/style/theme-openeuler.index.ts b/packages/opendesign/src/popover/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c15af26f20f7cd71a4457d8a0ae784c5b75eff01
--- /dev/null
+++ b/packages/opendesign/src/popover/style/theme-openeuler.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../popup/style/theme-openeuler.index';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/popover/style/theme-openeuler.scss b/packages/opendesign/src/popover/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/popup/style/index.scss b/packages/opendesign/src/popup/style/index.scss
index 16ede1cb0760fb5db8627d9906dddcfb96bcaae5..8758ab15dd9227626cac4b38c43076e260b9ac50 100644
--- a/packages/opendesign/src/popup/style/index.scss
+++ b/packages/opendesign/src/popup/style/index.scss
@@ -1,35 +1,2 @@
-@use '../../_styles/mixin.scss' as *;
-@use './var.scss';
-
-.o-popup {
-  position: absolute;
-  z-index: var(--popup-z-index);
-  opacity: 1;
-  transition: opacity var(--o-duration-m1) var(--o-easing-standard);
-  max-width: calc(100vw - var(--popup-edge-offset, 0) * 2);
-
-  &.out-view {
-    opacity: 0;
-    pointer-events: none;
-  }
-  &.animating {
-    pointer-events: none;
-  }
-}
-
-.o-popup-anchor {
-  position: absolute;
-  z-index: 0;
-}
-.o-popup-wrap {
-  box-shadow: var(--popup-shadow);
-  background-color: var(--popup-bg-color);
-  border-radius: var(--popup-radius);
-}
-.o-popup-body {
-  position: relative;
-  z-index: 1;
-  border: var(--popup-bd);
-  min-width: var(--popup-min-width);
-  padding: var(--popup-padding);
-}
+@use './var.scss' as *;
+@use './style.scss' as *;
diff --git a/packages/opendesign/src/popup/style/style.scss b/packages/opendesign/src/popup/style/style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e9461dcb8512e7c6a9bee093f16ee98984614d40
--- /dev/null
+++ b/packages/opendesign/src/popup/style/style.scss
@@ -0,0 +1,34 @@
+@use '../../_styles/mixin.scss' as *;
+
+.o-popup {
+  position: absolute;
+  z-index: var(--popup-z-index);
+  opacity: 1;
+  transition: opacity var(--o-duration-m1) var(--o-easing-standard);
+  max-width: calc(100vw - var(--popup-edge-offset, 0) * 2);
+
+  &.out-view {
+    opacity: 0;
+    pointer-events: none;
+  }
+  &.animating {
+    pointer-events: none;
+  }
+}
+
+.o-popup-anchor {
+  position: absolute;
+  z-index: 0;
+}
+.o-popup-wrap {
+  box-shadow: var(--popup-shadow);
+  background-color: var(--popup-bg-color);
+  border-radius: var(--popup-radius);
+}
+.o-popup-body {
+  position: relative;
+  z-index: 1;
+  border: var(--popup-bd);
+  min-width: var(--popup-min-width);
+  padding: var(--popup-padding);
+}
diff --git a/packages/opendesign/src/popup/style/theme-ascend.index.ts b/packages/opendesign/src/popup/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/popup/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/popup/style/theme-ascend.scss b/packages/opendesign/src/popup/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/popup/style/theme-kunpeng.index.ts b/packages/opendesign/src/popup/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/popup/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/popup/style/theme-kunpeng.scss b/packages/opendesign/src/popup/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/popup/style/theme-openeuler.index.ts b/packages/opendesign/src/popup/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/popup/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/popup/style/theme-openeuler.scss b/packages/opendesign/src/popup/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/progress/style/index.scss b/packages/opendesign/src/progress/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..67b8dbf9bcc94cd1494cdee89f98918026e5ab5a 100644
--- a/packages/opendesign/src/progress/style/index.scss
+++ b/packages/opendesign/src/progress/style/index.scss
@@ -1,2 +1,3 @@
+@use './var.scss' as *;
 @use './style.scss' as *;
 @use './media.scss' as *;
diff --git a/packages/opendesign/src/progress/style/style.scss b/packages/opendesign/src/progress/style/style.scss
index 7b2ce8ea93f9bdb1d5edb16ff7dd75919c76a02b..ffac042af14060ce8556100a26ce33c35b09342a 100644
--- a/packages/opendesign/src/progress/style/style.scss
+++ b/packages/opendesign/src/progress/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-progress-line {
   width: 100%;
diff --git a/packages/opendesign/src/progress/style/theme-ascend.index.ts b/packages/opendesign/src/progress/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/progress/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/progress/style/theme-ascend.scss b/packages/opendesign/src/progress/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/progress/style/theme-kunpeng.index.ts b/packages/opendesign/src/progress/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/progress/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/progress/style/theme-kunpeng.scss b/packages/opendesign/src/progress/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/progress/style/theme-openeuler.index.ts b/packages/opendesign/src/progress/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/progress/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/progress/style/theme-openeuler.scss b/packages/opendesign/src/progress/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/radio-group/style/index.scss b/packages/opendesign/src/radio-group/style/index.scss
index 8a9c6a179abe5996f086a6072b96fe83bd8706c5..8758ab15dd9227626cac4b38c43076e260b9ac50 100644
--- a/packages/opendesign/src/radio-group/style/index.scss
+++ b/packages/opendesign/src/radio-group/style/index.scss
@@ -1,20 +1,2 @@
-@use '../../_styles/mixin.scss' as *;
-@use './var.scss';
-
-.o-radio-group {
-  display: inline-flex;
-  flex-wrap: wrap;
-}
-
-.o-radio-group-h {
-  .o-radio + .o-radio {
-    margin-left: var(--radio-group-gap);
-  }
-}
-
-.o-radio-group-v {
-  flex-direction: column;
-  .o-radio + .o-radio {
-    margin-top: var(--radio-group-gap);
-  }
-}
+@use './var.scss' as *;
+@use './style.scss' as *;
diff --git a/packages/opendesign/src/radio-group/style/style.scss b/packages/opendesign/src/radio-group/style/style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2bbd57ff82f8fda51a8e6f2ac3051b8be0cb15a2
--- /dev/null
+++ b/packages/opendesign/src/radio-group/style/style.scss
@@ -0,0 +1,19 @@
+@use '../../_styles/mixin.scss' as *;
+
+.o-radio-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+}
+
+.o-radio-group-h {
+  .o-radio + .o-radio {
+    margin-left: var(--radio-group-gap);
+  }
+}
+
+.o-radio-group-v {
+  flex-direction: column;
+  .o-radio + .o-radio {
+    margin-top: var(--radio-group-gap);
+  }
+}
diff --git a/packages/opendesign/src/radio-group/style/theme-ascend.index.ts b/packages/opendesign/src/radio-group/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/radio-group/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/radio-group/style/theme-ascend.scss b/packages/opendesign/src/radio-group/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/radio-group/style/theme-kunpeng.index.ts b/packages/opendesign/src/radio-group/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/radio-group/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/radio-group/style/theme-kunpeng.scss b/packages/opendesign/src/radio-group/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/radio-group/style/theme-openeuler.index.ts b/packages/opendesign/src/radio-group/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/radio-group/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/radio-group/style/theme-openeuler.scss b/packages/opendesign/src/radio-group/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/radio/style/index.scss b/packages/opendesign/src/radio/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..67b8dbf9bcc94cd1494cdee89f98918026e5ab5a 100644
--- a/packages/opendesign/src/radio/style/index.scss
+++ b/packages/opendesign/src/radio/style/index.scss
@@ -1,2 +1,3 @@
+@use './var.scss' as *;
 @use './style.scss' as *;
 @use './media.scss' as *;
diff --git a/packages/opendesign/src/radio/style/style.scss b/packages/opendesign/src/radio/style/style.scss
index ed787c8de2ac6521fee1bc15edfc5cd5a6f5bb59..efd58a45f54dccfcce6089acbbf42051038cd14a 100644
--- a/packages/opendesign/src/radio/style/style.scss
+++ b/packages/opendesign/src/radio/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-radio {
   color: var(--radio-color);
diff --git a/packages/opendesign/src/radio/style/theme-ascend.index.ts b/packages/opendesign/src/radio/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/radio/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/radio/style/theme-ascend.scss b/packages/opendesign/src/radio/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/radio/style/theme-kunpeng.index.ts b/packages/opendesign/src/radio/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/radio/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/radio/style/theme-kunpeng.scss b/packages/opendesign/src/radio/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/radio/style/theme-openeuler.index.ts b/packages/opendesign/src/radio/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/radio/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/radio/style/theme-openeuler.scss b/packages/opendesign/src/radio/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/rate/style/index.scss b/packages/opendesign/src/rate/style/index.scss
index 5703aa022fed5a6d5ca3ea2f8b40ac3d202b8751..8758ab15dd9227626cac4b38c43076e260b9ac50 100644
--- a/packages/opendesign/src/rate/style/index.scss
+++ b/packages/opendesign/src/rate/style/index.scss
@@ -1,60 +1,2 @@
-@use '../../_styles/mixin.scss' as *;
-@use './var.scss';
-
-.o-rate {
-  display: inline-flex;
-  align-items: center;
-  user-select: none;
-  font-size: var(--rate-size);
-  cursor: pointer;
-}
-
-.o-rate-readonly {
-  cursor: auto;
-}
-
-.o-rate-item {
-  position: relative;
-
-  &.is-half {
-    .o-rate-icon-top {
-      opacity: 1;
-    }
-  }
-
-  &.is-full {
-    .o-rate-icon-bottom {
-      color: var(--rate-color-selected);
-    }
-  }
-
-  & + .o-rate-item {
-    margin-left: var(--rate-gap);
-  }
-}
-
-.o-rate-icon {
-  color: var(--rate-color);
-  transition: all var(--o-duration-m1) var(--o-easing-standard);
-}
-
-.o-rate-icon-top {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 50%;
-  opacity: 0;
-  overflow: hidden;
-  color: var(--rate-color-selected);
-}
-
-.o-rate-popover {
-  border-radius: var(--rate-popover-radius);
-  .o-popover-body {
-    color: var(--rate-popover-color);
-    font-size: var(--rate-popover-text-size);
-    line-height: var(--rate-popover-text-height);
-    padding: var(--rate-popover-padding);
-    min-width: auto;
-  }
-}
+@use './var.scss' as *;
+@use './style.scss' as *;
diff --git a/packages/opendesign/src/rate/style/style.scss b/packages/opendesign/src/rate/style/style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ddc4fa74de5cec8388f59104f83cd4e0f13b9a51
--- /dev/null
+++ b/packages/opendesign/src/rate/style/style.scss
@@ -0,0 +1,59 @@
+@use '../../_styles/mixin.scss' as *;
+
+.o-rate {
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+  font-size: var(--rate-size);
+  cursor: pointer;
+}
+
+.o-rate-readonly {
+  cursor: auto;
+}
+
+.o-rate-item {
+  position: relative;
+
+  &.is-half {
+    .o-rate-icon-top {
+      opacity: 1;
+    }
+  }
+
+  &.is-full {
+    .o-rate-icon-bottom {
+      color: var(--rate-color-selected);
+    }
+  }
+
+  & + .o-rate-item {
+    margin-left: var(--rate-gap);
+  }
+}
+
+.o-rate-icon {
+  color: var(--rate-color);
+  transition: all var(--o-duration-m1) var(--o-easing-standard);
+}
+
+.o-rate-icon-top {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50%;
+  opacity: 0;
+  overflow: hidden;
+  color: var(--rate-color-selected);
+}
+
+.o-rate-popover {
+  border-radius: var(--rate-popover-radius);
+  .o-popover-body {
+    color: var(--rate-popover-color);
+    font-size: var(--rate-popover-text-size);
+    line-height: var(--rate-popover-text-height);
+    padding: var(--rate-popover-padding);
+    min-width: auto;
+  }
+}
diff --git a/packages/opendesign/src/rate/style/theme-ascend.index.ts b/packages/opendesign/src/rate/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..321461214778bd33ae9b746e1822de5e6ed91699
--- /dev/null
+++ b/packages/opendesign/src/rate/style/theme-ascend.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../popover/style/theme-ascend.index';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/rate/style/theme-ascend.scss b/packages/opendesign/src/rate/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/rate/style/theme-kunpeng.index.ts b/packages/opendesign/src/rate/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7dd6dbe19cbff12818017e3f10e927e91f53d2ee
--- /dev/null
+++ b/packages/opendesign/src/rate/style/theme-kunpeng.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../popover/style/theme-kunpeng.index';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/rate/style/theme-kunpeng.scss b/packages/opendesign/src/rate/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/rate/style/theme-openeuler.index.ts b/packages/opendesign/src/rate/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ba05d7cbea3085f7e549bf0e92aed5d24788c49a
--- /dev/null
+++ b/packages/opendesign/src/rate/style/theme-openeuler.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../popover/style/theme-openeuler.index';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/rate/style/theme-openeuler.scss b/packages/opendesign/src/rate/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/result/style/index.scss b/packages/opendesign/src/result/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..67b8dbf9bcc94cd1494cdee89f98918026e5ab5a 100644
--- a/packages/opendesign/src/result/style/index.scss
+++ b/packages/opendesign/src/result/style/index.scss
@@ -1,2 +1,3 @@
+@use './var.scss' as *;
 @use './style.scss' as *;
 @use './media.scss' as *;
diff --git a/packages/opendesign/src/result/style/style.scss b/packages/opendesign/src/result/style/style.scss
index 3f4f5ab64db3198933d50df0019ed1bbc9c12322..3b494f94c105eff58172206a78bb1082d7e4aed1 100644
--- a/packages/opendesign/src/result/style/style.scss
+++ b/packages/opendesign/src/result/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-result {
   display: flex;
diff --git a/packages/opendesign/src/result/style/theme-ascend.index.ts b/packages/opendesign/src/result/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/result/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/result/style/theme-ascend.scss b/packages/opendesign/src/result/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/result/style/theme-kunpeng.index.ts b/packages/opendesign/src/result/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/result/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/result/style/theme-kunpeng.scss b/packages/opendesign/src/result/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/result/style/theme-openeuler.index.ts b/packages/opendesign/src/result/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/result/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/result/style/theme-openeuler.scss b/packages/opendesign/src/result/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/scrollbar/style/index.scss b/packages/opendesign/src/scrollbar/style/index.scss
index 10412596c6afb3397e39b5fcb55fa56dddcab22c..8758ab15dd9227626cac4b38c43076e260b9ac50 100644
--- a/packages/opendesign/src/scrollbar/style/index.scss
+++ b/packages/opendesign/src/scrollbar/style/index.scss
@@ -1,195 +1,2 @@
-@use '../../_styles/mixin.scss' as *;
-@use './var.scss';
-/*
- * ::-webkit-scrollbar 兼容chrome 4+, edge 79+, safari 4+, opera 15+, 
- * scrollbar-width 兼容firefox 64+
- */
-.o-scrollbar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  pointer-events: none;
-
-  > .o-scrollbar-dragging {
-    opacity: 1;
-  }
-
-  &.o-scrollbar-visible-x {
-    > .o-scrollbar-x {
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
-
-  &.o-scrollbar-visible-y {
-    > .o-scrollbar-y {
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
-
-  &.o-scrollbar-visible {
-    .o-scrollbar-rail {
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
-}
-
-.o-scrollbar-rail {
-  // 默认隐藏
-  opacity: 0;
-  pointer-events: none;
-
-  position: absolute;
-  background-color: var(--scrollbar-bg-color);
-  transition: opacity var(--o-duration-m1) var(--o-easing-standard-in) var(--scrollbar-delay);
-  @include hover {
-    .o-scrollbar-x-thumb-bar {
-      height: var(--scrollbar-thumb-width-hover);
-      background-color: var(--scrollbar-thumb-bg-color-hover);
-    }
-    .o-scrollbar-y-thumb-bar {
-      width: var(--scrollbar-thumb-width-hover);
-      background-color: var(--scrollbar-thumb-bg-color-hover);
-    }
-    .o-scrollbar-track {
-      opacity: 1;
-    }
-  }
-}
-.o-scrollbar-y {
-  top: var(--scrollbar-y-top);
-  bottom: var(--scrollbar-y-bottom);
-  margin: auto;
-
-  left: var(--scrollbar-y-left);
-  right: var(--scrollbar-y-right);
-
-  width: var(--scrollbar-width);
-  height: var(--scrollbar-height);
-}
-
-.o-scrollbar-x {
-  left: var(--scrollbar-x-left);
-  right: var(--scrollbar-x-right);
-  margin: auto;
-
-  top: var(--scrollbar-x-top);
-  bottom: var(--scrollbar-x-bottom);
-
-  width: var(--scrollbar-height);
-  height: var(--scrollbar-width);
-}
-
-.o-scrollbar-dragging {
-  .o-scrollbar-track {
-    opacity: 1;
-  }
-}
-.o-scrollbar-track {
-  position: relative;
-  z-index: 0;
-  border-radius: var(--scrollbar-thumb-radius);
-  background-color: var(--scrollbar-track-bg-color);
-  opacity: 0;
-  transition: opacity var(--o-duration-m1) var(--o-easing-standard-in) var(--scrollbar-delay);
-}
-.o-scrollbar-y-track {
-  width: var(--scrollbar-track-width);
-  height: 100%;
-  left: 50%;
-  margin-left: calc(var(--scrollbar-track-width) / -2);
-}
-.o-scrollbar-x-track {
-  height: var(--scrollbar-track-width);
-  width: 100%;
-  top: 50%;
-  margin-top: calc(var(--scrollbar-track-width) / -2);
-}
-
-.o-scrollbar-thumb {
-  position: absolute;
-  z-index: 1;
-}
-.o-scrollbar-y-thumb {
-  top: 0;
-  left: 0;
-  right: 0;
-  min-height: var(--scrollbar-thumb-min-size);
-}
-.o-scrollbar-x-thumb {
-  left: 0;
-  top: 0;
-  bottom: 0;
-  min-width: var(--scrollbar-thumb-min-size);
-  display: flex;
-}
-
-.o-scrollbar-x-thumb-bar,
-.o-scrollbar-y-thumb-bar {
-  background-color: var(--scrollbar-thumb-bg-color);
-  border-radius: var(--scrollbar-thumb-radius);
-  transition: all var(--o-duration-m1) var(--o-easing-standard-in) var(--scrollbar-delay);
-  margin: auto;
-  &.is-dragging {
-    background-color: var(--scrollbar-thumb-bg-color-hover);
-  }
-}
-.o-scrollbar-x-thumb-bar {
-  width: 100%;
-  height: var(--scrollbar-thumb-width);
-
-  &.is-dragging {
-    height: var(--scrollbar-thumb-width-hover);
-  }
-}
-.o-scrollbar-y-thumb-bar {
-  width: var(--scrollbar-thumb-width);
-  height: 100%;
-  &.is-dragging {
-    width: var(--scrollbar-thumb-width-hover);
-  }
-}
-
-// scrollbar container and wrapper
-
-.o-scrollbar-wrapper {
-  position: relative;
-}
-.o-scrollbar-container {
-  overflow: auto;
-  scrollbar-width: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-.o-scroller {
-  position: relative;
-  display: flex;
-}
-
-.o-scroller-container {
-  flex: 1; // 撑满父容器
-
-  padding: var(--scroller-padding);
-  overflow: auto;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  &.is-x-disabled {
-    overflow-x: hidden;
-  }
-  &.is-y-disabled {
-    overflow-y: hidden;
-  }
-}
-.o-scrollbar-to-body {
-  position: fixed;
-  z-index: var(--o-z-index-max);
-}
+@use './var.scss' as *;
+@use './style.scss' as *;
diff --git a/packages/opendesign/src/scrollbar/style/style.scss b/packages/opendesign/src/scrollbar/style/style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..196adcd31916af5811cdfe7fac22cc90eee4792e
--- /dev/null
+++ b/packages/opendesign/src/scrollbar/style/style.scss
@@ -0,0 +1,194 @@
+@use '../../_styles/mixin.scss' as *;
+/*
+ * ::-webkit-scrollbar 兼容chrome 4+, edge 79+, safari 4+, opera 15+, 
+ * scrollbar-width 兼容firefox 64+
+ */
+.o-scrollbar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  pointer-events: none;
+
+  > .o-scrollbar-dragging {
+    opacity: 1;
+  }
+
+  &.o-scrollbar-visible-x {
+    > .o-scrollbar-x {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  &.o-scrollbar-visible-y {
+    > .o-scrollbar-y {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  &.o-scrollbar-visible {
+    .o-scrollbar-rail {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}
+
+.o-scrollbar-rail {
+  // 默认隐藏
+  opacity: 0;
+  pointer-events: none;
+
+  position: absolute;
+  background-color: var(--scrollbar-bg-color);
+  transition: opacity var(--o-duration-m1) var(--o-easing-standard-in) var(--scrollbar-delay);
+  @include hover {
+    .o-scrollbar-x-thumb-bar {
+      height: var(--scrollbar-thumb-width-hover);
+      background-color: var(--scrollbar-thumb-bg-color-hover);
+    }
+    .o-scrollbar-y-thumb-bar {
+      width: var(--scrollbar-thumb-width-hover);
+      background-color: var(--scrollbar-thumb-bg-color-hover);
+    }
+    .o-scrollbar-track {
+      opacity: 1;
+    }
+  }
+}
+.o-scrollbar-y {
+  top: var(--scrollbar-y-top);
+  bottom: var(--scrollbar-y-bottom);
+  margin: auto;
+
+  left: var(--scrollbar-y-left);
+  right: var(--scrollbar-y-right);
+
+  width: var(--scrollbar-width);
+  height: var(--scrollbar-height);
+}
+
+.o-scrollbar-x {
+  left: var(--scrollbar-x-left);
+  right: var(--scrollbar-x-right);
+  margin: auto;
+
+  top: var(--scrollbar-x-top);
+  bottom: var(--scrollbar-x-bottom);
+
+  width: var(--scrollbar-height);
+  height: var(--scrollbar-width);
+}
+
+.o-scrollbar-dragging {
+  .o-scrollbar-track {
+    opacity: 1;
+  }
+}
+.o-scrollbar-track {
+  position: relative;
+  z-index: 0;
+  border-radius: var(--scrollbar-thumb-radius);
+  background-color: var(--scrollbar-track-bg-color);
+  opacity: 0;
+  transition: opacity var(--o-duration-m1) var(--o-easing-standard-in) var(--scrollbar-delay);
+}
+.o-scrollbar-y-track {
+  width: var(--scrollbar-track-width);
+  height: 100%;
+  left: 50%;
+  margin-left: calc(var(--scrollbar-track-width) / -2);
+}
+.o-scrollbar-x-track {
+  height: var(--scrollbar-track-width);
+  width: 100%;
+  top: 50%;
+  margin-top: calc(var(--scrollbar-track-width) / -2);
+}
+
+.o-scrollbar-thumb {
+  position: absolute;
+  z-index: 1;
+}
+.o-scrollbar-y-thumb {
+  top: 0;
+  left: 0;
+  right: 0;
+  min-height: var(--scrollbar-thumb-min-size);
+}
+.o-scrollbar-x-thumb {
+  left: 0;
+  top: 0;
+  bottom: 0;
+  min-width: var(--scrollbar-thumb-min-size);
+  display: flex;
+}
+
+.o-scrollbar-x-thumb-bar,
+.o-scrollbar-y-thumb-bar {
+  background-color: var(--scrollbar-thumb-bg-color);
+  border-radius: var(--scrollbar-thumb-radius);
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in) var(--scrollbar-delay);
+  margin: auto;
+  &.is-dragging {
+    background-color: var(--scrollbar-thumb-bg-color-hover);
+  }
+}
+.o-scrollbar-x-thumb-bar {
+  width: 100%;
+  height: var(--scrollbar-thumb-width);
+
+  &.is-dragging {
+    height: var(--scrollbar-thumb-width-hover);
+  }
+}
+.o-scrollbar-y-thumb-bar {
+  width: var(--scrollbar-thumb-width);
+  height: 100%;
+  &.is-dragging {
+    width: var(--scrollbar-thumb-width-hover);
+  }
+}
+
+// scrollbar container and wrapper
+
+.o-scrollbar-wrapper {
+  position: relative;
+}
+.o-scrollbar-container {
+  overflow: auto;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.o-scroller {
+  position: relative;
+  display: flex;
+}
+
+.o-scroller-container {
+  flex: 1; // 撑满父容器
+
+  padding: var(--scroller-padding);
+  overflow: auto;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  &.is-x-disabled {
+    overflow-x: hidden;
+  }
+  &.is-y-disabled {
+    overflow-y: hidden;
+  }
+}
+.o-scrollbar-to-body {
+  position: fixed;
+  z-index: var(--o-z-index-max);
+}
diff --git a/packages/opendesign/src/scrollbar/style/theme-ascend.index.ts b/packages/opendesign/src/scrollbar/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/scrollbar/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/scrollbar/style/theme-ascend.scss b/packages/opendesign/src/scrollbar/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/scrollbar/style/theme-kunpeng.index.ts b/packages/opendesign/src/scrollbar/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/scrollbar/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/scrollbar/style/theme-kunpeng.scss b/packages/opendesign/src/scrollbar/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/scrollbar/style/theme-openeuler.index.ts b/packages/opendesign/src/scrollbar/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/scrollbar/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/scrollbar/style/theme-openeuler.scss b/packages/opendesign/src/scrollbar/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/select/style/index.scss b/packages/opendesign/src/select/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..67b8dbf9bcc94cd1494cdee89f98918026e5ab5a 100644
--- a/packages/opendesign/src/select/style/index.scss
+++ b/packages/opendesign/src/select/style/index.scss
@@ -1,2 +1,3 @@
+@use './var.scss' as *;
 @use './style.scss' as *;
 @use './media.scss' as *;
diff --git a/packages/opendesign/src/select/style/style.scss b/packages/opendesign/src/select/style/style.scss
index 722570920e42579c757569eb5ac2d69f85bc8647..a0aed8899bf9685091de02f9b09dd0ade5263f74 100644
--- a/packages/opendesign/src/select/style/style.scss
+++ b/packages/opendesign/src/select/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-select {
   display: inline-flex;
diff --git a/packages/opendesign/src/select/style/theme-ascend.index.ts b/packages/opendesign/src/select/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42a5d67501e098752d1dbf0b531abdb80b692e56
--- /dev/null
+++ b/packages/opendesign/src/select/style/theme-ascend.index.ts
@@ -0,0 +1,7 @@
+import '../../_styles';
+import '../../popover/style/theme-ascend.index';
+import '../../scrollbar/style/theme-ascend.index';
+import '../../button/style/theme-ascend.index';
+import '../../dialog/style/theme-ascend.index';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/select/style/theme-ascend.scss b/packages/opendesign/src/select/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/select/style/theme-kunpeng.index.ts b/packages/opendesign/src/select/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3d515ff125655461ac28637352c493d42f009620
--- /dev/null
+++ b/packages/opendesign/src/select/style/theme-kunpeng.index.ts
@@ -0,0 +1,7 @@
+import '../../_styles';
+import '../../popover/style/theme-kunpeng.index';
+import '../../scrollbar/style/theme-kunpeng.index';
+import '../../button/style/theme-kunpeng.index';
+import '../../dialog/style/theme-kunpeng.index';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/select/style/theme-kunpeng.scss b/packages/opendesign/src/select/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/select/style/theme-openeuler.index.ts b/packages/opendesign/src/select/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..62a9afd6fcf64fe449a835f2660c4707a17c3eb3
--- /dev/null
+++ b/packages/opendesign/src/select/style/theme-openeuler.index.ts
@@ -0,0 +1,7 @@
+import '../../_styles';
+import '../../popover/style/theme-openeuler.index';
+import '../../scrollbar/style/theme-openeuler.index';
+import '../../button/style/theme-openeuler.index';
+import '../../dialog/style/theme-openeuler.index';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/select/style/theme-openeuler.scss b/packages/opendesign/src/select/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/skeleton/style/index.scss b/packages/opendesign/src/skeleton/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..67b8dbf9bcc94cd1494cdee89f98918026e5ab5a 100644
--- a/packages/opendesign/src/skeleton/style/index.scss
+++ b/packages/opendesign/src/skeleton/style/index.scss
@@ -1,2 +1,3 @@
+@use './var.scss' as *;
 @use './style.scss' as *;
 @use './media.scss' as *;
diff --git a/packages/opendesign/src/skeleton/style/style.scss b/packages/opendesign/src/skeleton/style/style.scss
index eec4f6e5cfcfa4ddf2733fdc3ec215543d00156e..2f0d0f77e2f4525aff23b284c27a2f3375637654 100644
--- a/packages/opendesign/src/skeleton/style/style.scss
+++ b/packages/opendesign/src/skeleton/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 @keyframes o-skeleton-ani {
   0% {
diff --git a/packages/opendesign/src/skeleton/style/theme-ascend.index.ts b/packages/opendesign/src/skeleton/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/skeleton/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/skeleton/style/theme-ascend.scss b/packages/opendesign/src/skeleton/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/skeleton/style/theme-kunpeng.index.ts b/packages/opendesign/src/skeleton/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/skeleton/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/skeleton/style/theme-kunpeng.scss b/packages/opendesign/src/skeleton/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/skeleton/style/theme-openeuler.index.ts b/packages/opendesign/src/skeleton/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/skeleton/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/skeleton/style/theme-openeuler.scss b/packages/opendesign/src/skeleton/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/switch/style/index.scss b/packages/opendesign/src/switch/style/index.scss
index 226741a4a89d5c9677450b7e7063c8a2e80b34d5..8758ab15dd9227626cac4b38c43076e260b9ac50 100644
--- a/packages/opendesign/src/switch/style/index.scss
+++ b/packages/opendesign/src/switch/style/index.scss
@@ -1,106 +1,2 @@
-@use '../../_styles/mixin.scss' as *;
-@use './var.scss';
-
-.o-switch {
-  display: inline-block;
-  height: var(--switch-size);
-  font-size: var(--switch-text-size);
-  line-height: var(--switch-text-height);
-  color: var(--switch-color);
-  background-color: var(--switch-bg-color);
-  border-radius: var(--switch-radius);
-  transition: background-color var(--o-duration-s) var(--o-easing-standard);
-  cursor: pointer;
-  min-width: var(--switch-min-width);
-
-  @include hover {
-    background-color: var(--switch-bg-color-hover);
-  }
-  &:active {
-    background-color: var(--switch-bg-color-active);
-  }
-}
-
-.o-switch-wrap {
-  position: relative;
-  height: 100%;
-}
-
-.o-switch-handler {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: var(--switch-handler-size);
-  height: var(--switch-handler-size);
-  border-radius: calc(var(--switch-radius) - 2px);
-  background-color: var(--switch-handler-bg-color);
-  transition: left var(--o-duration-s) var(--o-easing-standard);
-  left: var(--switch-handler-offset);
-
-  .o-switch-icon-loading {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--switch-bg-color);
-  }
-}
-
-.o-switch-checked {
-  background-color: var(--switch-bg-color-checked);
-
-  .o-switch-handler {
-    left: calc(100% - var(--switch-handler-offset) - var(--switch-handler-size));
-  }
-
-  .o-switch-label {
-    padding-left: var(--switch-label-padding);
-    padding-right: calc(var(--switch-handler-offset) + var(--switch-handler-size) + var(--switch-label-padding));
-  }
-
-  @include hover {
-    background-color: var(--switch-bg-color-checked-hover);
-  }
-  &:active {
-    background-color: var(--switch-bg-color-checked-active);
-  }
-}
-
-.o-switch-disabled,
-.o-switch-loading {
-  cursor: not-allowed;
-  &,
-  &:hover,
-  &:active {
-    background-color: var(--switch-bg-color-disabled);
-    .o-switch-handler {
-      background-color: var(--switch-handler-bg-color-disabled);
-      .o-switch-icon-loading {
-        color: var(--switch-icon-loading-color);
-      }
-    }
-  }
-}
-
-.o-switch-disabled.o-switch-checked,
-.o-switch-loading.o-switch-checked {
-  &,
-  &:hover,
-  &:active {
-    background-color: var(--switch-bg-color-checked-disabled);
-    .o-switch-handler {
-      background-color: var(--switch-handler-bg-color-checked-disabled);
-    }
-  }
-}
-
-.o-switch-label {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-left: calc(var(--switch-handler-offset) + var(--switch-handler-size) + var(--switch-label-padding));
-  padding-right: var(--switch-label-padding);
-}
+@use './var.scss' as *;
+@use './style.scss' as *;
diff --git a/packages/opendesign/src/switch/style/style.scss b/packages/opendesign/src/switch/style/style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3fa4c5930fd90e9917277b5f5eb3b6b44137a5fe
--- /dev/null
+++ b/packages/opendesign/src/switch/style/style.scss
@@ -0,0 +1,105 @@
+@use '../../_styles/mixin.scss' as *;
+
+.o-switch {
+  display: inline-block;
+  height: var(--switch-size);
+  font-size: var(--switch-text-size);
+  line-height: var(--switch-text-height);
+  color: var(--switch-color);
+  background-color: var(--switch-bg-color);
+  border-radius: var(--switch-radius);
+  transition: background-color var(--o-duration-s) var(--o-easing-standard);
+  cursor: pointer;
+  min-width: var(--switch-min-width);
+
+  @include hover {
+    background-color: var(--switch-bg-color-hover);
+  }
+  &:active {
+    background-color: var(--switch-bg-color-active);
+  }
+}
+
+.o-switch-wrap {
+  position: relative;
+  height: 100%;
+}
+
+.o-switch-handler {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--switch-handler-size);
+  height: var(--switch-handler-size);
+  border-radius: calc(var(--switch-radius) - 2px);
+  background-color: var(--switch-handler-bg-color);
+  transition: left var(--o-duration-s) var(--o-easing-standard);
+  left: var(--switch-handler-offset);
+
+  .o-switch-icon-loading {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--switch-bg-color);
+  }
+}
+
+.o-switch-checked {
+  background-color: var(--switch-bg-color-checked);
+
+  .o-switch-handler {
+    left: calc(100% - var(--switch-handler-offset) - var(--switch-handler-size));
+  }
+
+  .o-switch-label {
+    padding-left: var(--switch-label-padding);
+    padding-right: calc(var(--switch-handler-offset) + var(--switch-handler-size) + var(--switch-label-padding));
+  }
+
+  @include hover {
+    background-color: var(--switch-bg-color-checked-hover);
+  }
+  &:active {
+    background-color: var(--switch-bg-color-checked-active);
+  }
+}
+
+.o-switch-disabled,
+.o-switch-loading {
+  cursor: not-allowed;
+  &,
+  &:hover,
+  &:active {
+    background-color: var(--switch-bg-color-disabled);
+    .o-switch-handler {
+      background-color: var(--switch-handler-bg-color-disabled);
+      .o-switch-icon-loading {
+        color: var(--switch-icon-loading-color);
+      }
+    }
+  }
+}
+
+.o-switch-disabled.o-switch-checked,
+.o-switch-loading.o-switch-checked {
+  &,
+  &:hover,
+  &:active {
+    background-color: var(--switch-bg-color-checked-disabled);
+    .o-switch-handler {
+      background-color: var(--switch-handler-bg-color-checked-disabled);
+    }
+  }
+}
+
+.o-switch-label {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: calc(var(--switch-handler-offset) + var(--switch-handler-size) + var(--switch-label-padding));
+  padding-right: var(--switch-label-padding);
+}
diff --git a/packages/opendesign/src/switch/style/theme-ascend.index.ts b/packages/opendesign/src/switch/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/switch/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/switch/style/theme-ascend.scss b/packages/opendesign/src/switch/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/switch/style/theme-kunpeng.index.ts b/packages/opendesign/src/switch/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/switch/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/switch/style/theme-kunpeng.scss b/packages/opendesign/src/switch/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/switch/style/theme-openeuler.index.ts b/packages/opendesign/src/switch/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/switch/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/switch/style/theme-openeuler.scss b/packages/opendesign/src/switch/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/tab/style/index.scss b/packages/opendesign/src/tab/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..67b8dbf9bcc94cd1494cdee89f98918026e5ab5a 100644
--- a/packages/opendesign/src/tab/style/index.scss
+++ b/packages/opendesign/src/tab/style/index.scss
@@ -1,2 +1,3 @@
+@use './var.scss' as *;
 @use './style.scss' as *;
 @use './media.scss' as *;
diff --git a/packages/opendesign/src/tab/style/style.scss b/packages/opendesign/src/tab/style/style.scss
index dca2784852af63c050c075b355a255caed1805da..d8bac9f1ffef07407df1047dec5452be1f05e01d 100644
--- a/packages/opendesign/src/tab/style/style.scss
+++ b/packages/opendesign/src/tab/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-tab-navs {
   display: flex;
diff --git a/packages/opendesign/src/tab/style/theme-ascend.index.ts b/packages/opendesign/src/tab/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/tab/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/tab/style/theme-ascend.scss b/packages/opendesign/src/tab/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/tab/style/theme-kunpeng.index.ts b/packages/opendesign/src/tab/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/tab/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/tab/style/theme-kunpeng.scss b/packages/opendesign/src/tab/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/tab/style/theme-openeuler.index.ts b/packages/opendesign/src/tab/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/tab/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/tab/style/theme-openeuler.scss b/packages/opendesign/src/tab/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/table/style/index.scss b/packages/opendesign/src/table/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..67b8dbf9bcc94cd1494cdee89f98918026e5ab5a 100644
--- a/packages/opendesign/src/table/style/index.scss
+++ b/packages/opendesign/src/table/style/index.scss
@@ -1,2 +1,3 @@
+@use './var.scss' as *;
 @use './style.scss' as *;
 @use './media.scss' as *;
diff --git a/packages/opendesign/src/table/style/style.scss b/packages/opendesign/src/table/style/style.scss
index a5055fd82d5d21425ba4e99b9fc98a1f2cd21a39..a8092a66a40f0fea18e995bc3fd3813beb105a10 100644
--- a/packages/opendesign/src/table/style/style.scss
+++ b/packages/opendesign/src/table/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-table {
   position: relative;
diff --git a/packages/opendesign/src/table/style/theme-ascend.index.ts b/packages/opendesign/src/table/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/table/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/table/style/theme-ascend.scss b/packages/opendesign/src/table/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/table/style/theme-kunpeng.index.ts b/packages/opendesign/src/table/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/table/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/table/style/theme-kunpeng.scss b/packages/opendesign/src/table/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/table/style/theme-openeuler.index.ts b/packages/opendesign/src/table/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/table/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/table/style/theme-openeuler.scss b/packages/opendesign/src/table/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/tag/style/index.scss b/packages/opendesign/src/tag/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..67b8dbf9bcc94cd1494cdee89f98918026e5ab5a 100644
--- a/packages/opendesign/src/tag/style/index.scss
+++ b/packages/opendesign/src/tag/style/index.scss
@@ -1,2 +1,3 @@
+@use './var.scss' as *;
 @use './style.scss' as *;
 @use './media.scss' as *;
diff --git a/packages/opendesign/src/tag/style/style.scss b/packages/opendesign/src/tag/style/style.scss
index 1ee6411a2b5d8b96e49cef66fa2e02d5cb067880..3575de2333acccb32601d097c4a8f8e65503a4a9 100644
--- a/packages/opendesign/src/tag/style/style.scss
+++ b/packages/opendesign/src/tag/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-tag {
   height: var(--tag-height);
diff --git a/packages/opendesign/src/tag/style/theme-ascend.index.ts b/packages/opendesign/src/tag/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/tag/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/tag/style/theme-ascend.scss b/packages/opendesign/src/tag/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/tag/style/theme-kunpeng.index.ts b/packages/opendesign/src/tag/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/tag/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/tag/style/theme-kunpeng.scss b/packages/opendesign/src/tag/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/tag/style/theme-openeuler.index.ts b/packages/opendesign/src/tag/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/tag/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/tag/style/theme-openeuler.scss b/packages/opendesign/src/tag/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/textarea/style/index.scss b/packages/opendesign/src/textarea/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..67b8dbf9bcc94cd1494cdee89f98918026e5ab5a 100644
--- a/packages/opendesign/src/textarea/style/index.scss
+++ b/packages/opendesign/src/textarea/style/index.scss
@@ -1,2 +1,3 @@
+@use './var.scss' as *;
 @use './style.scss' as *;
 @use './media.scss' as *;
diff --git a/packages/opendesign/src/textarea/style/style.scss b/packages/opendesign/src/textarea/style/style.scss
index 0fe071880379cbf07745cec7f7456455604e7a11..8ddb544701db848c689ad3077a3cb0d06a613114 100644
--- a/packages/opendesign/src/textarea/style/style.scss
+++ b/packages/opendesign/src/textarea/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-textarea {
   display: inline-flex;
diff --git a/packages/opendesign/src/textarea/style/theme-ascend.index.ts b/packages/opendesign/src/textarea/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..caa3c4296d8674b3a2c0885df764374079029036
--- /dev/null
+++ b/packages/opendesign/src/textarea/style/theme-ascend.index.ts
@@ -0,0 +1,5 @@
+import '../../_styles';
+import '../../_components/in-textarea/style';
+import '../../_components/in-box/style';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/textarea/style/theme-ascend.scss b/packages/opendesign/src/textarea/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/textarea/style/theme-kunpeng.index.ts b/packages/opendesign/src/textarea/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/textarea/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/textarea/style/theme-kunpeng.scss b/packages/opendesign/src/textarea/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/textarea/style/theme-openeuler.index.ts b/packages/opendesign/src/textarea/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/textarea/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/textarea/style/theme-openeuler.scss b/packages/opendesign/src/textarea/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/theme/ascend/a.dark.token.css b/packages/opendesign/src/theme/ascend/a.dark.token.css
new file mode 100644
index 0000000000000000000000000000000000000000..efeca604b910c939d3ad66579f713bb922d64955
--- /dev/null
+++ b/packages/opendesign/src/theme/ascend/a.dark.token.css
@@ -0,0 +1,1949 @@
+/* theme: a.dark */
+[data-o-theme="a.dark"] {
+  /**
+   * @name 
+   * @type palette
+   * @group white
+   * @description 
+   */
+  --o-white: 255, 255, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group black
+   * @description 
+   */
+  --o-black: 0, 0, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-1: 0, 4, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-2: 6, 15, 120;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-3: 20, 37, 163;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-4: 40, 65, 207;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-5: 66, 99, 250;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-6: 84, 120, 251;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-7: 122, 154, 252;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-8: 160, 186, 253;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-9: 199, 217, 254;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-10: 238, 244, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-1: 0, 77, 42;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-2: 2, 102, 53;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-3: 10, 127, 66;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-4: 22, 152, 80;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-5: 36, 177, 95;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-6: 51, 193, 104;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-7: 90, 208, 131;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-8: 135, 224, 163;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-9: 185, 239, 200;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-10: 240, 255, 244;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-1: 77, 24, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-2: 120, 42, 1;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-3: 163, 68, 8;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-4: 207, 97, 19;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-5: 250, 130, 33;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-6: 251, 143, 43;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-7: 252, 174, 91;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-8: 253, 202, 139;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-9: 254, 227, 188;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-10: 255, 248, 237;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-1: 77, 0, 17;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-2: 115, 3, 24;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-3: 153, 9, 31;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-4: 192, 17, 37;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-5: 230, 28, 43;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-6: 235, 35, 45;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-7: 240, 82, 85;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-8: 245, 132, 130;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-9: 250, 183, 180;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-10: 255, 234, 232;
+  /**
+   * @name 
+   * @type palette
+   * @group huaweired
+   * @description 
+   */
+  --o-red-huawei: 199, 0, 11;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-1: 0, 0, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-2: 18, 18, 20;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-3: 26, 26, 28;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-4: 36, 36, 39;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-5: 43, 43, 47;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-6: 53, 53, 57;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-7: 63, 63, 67;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-8: 85, 85, 88;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-9: 118, 118, 122;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-10: 156, 156, 159;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-11: 181, 181, 185;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-12: 208, 208, 210;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-13: 235, 235, 238;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-14: 255, 255, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-1: 0, 0, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-2: 16, 18, 20;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-3: 23, 25, 28;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-4: 33, 35, 39;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-5: 40, 42, 47;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-6: 50, 53, 57;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-7: 61, 63, 67;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-8: 80, 84, 88;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-9: 113, 117, 122;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-10: 147, 152, 159;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-11: 172, 177, 185;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-12: 198, 202, 210;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-13: 231, 234, 238;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-14: 255, 255, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-1: 77, 54, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-2: 119, 87, 2;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-3: 161, 126, 11;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-4: 203, 167, 24;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-5: 245, 211, 42;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-6: 247, 222, 54;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-7: 249, 234, 100;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-8: 251, 244, 146;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-9: 253, 251, 192;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-10: 255, 255, 240;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-1: 41, 77, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-2: 63, 109, 3;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-3: 91, 142, 14;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-4: 121, 174, 30;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-5: 155, 207, 50;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-6: 172, 217, 68;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-7: 194, 226, 104;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-8: 214, 236, 144;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-9: 233, 245, 186;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-10: 251, 255, 232;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-1: 0, 73, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-2: 2, 101, 103;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-3: 9, 129, 127;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-4: 18, 155, 148;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-5: 30, 181, 167;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-6: 42, 196, 178;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-7: 84, 211, 192;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-8: 130, 225, 208;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-9: 182, 240, 227;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-10: 239, 255, 251;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-1: 0, 34, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-2: 1, 57, 117;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-3: 8, 86, 158;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-4: 18, 118, 199;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-5: 31, 153, 240;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-6: 42, 166, 243;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-7: 89, 191, 246;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-8: 137, 214, 249;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-9: 187, 233, 252;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-10: 237, 250, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-1: 22, 0, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-2: 40, 3, 118;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-3: 66, 15, 160;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-4: 98, 33, 202;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-5: 134, 57, 244;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-6: 152, 74, 246;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-7: 179, 114, 248;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-8: 205, 156, 251;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-9: 228, 198, 253;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-10: 249, 240, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-1: 61, 0, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-2: 93, 5, 110;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-3: 127, 16, 144;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-4: 164, 33, 178;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-5: 200, 54, 212;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-6: 216, 72, 221;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-7: 229, 109, 229;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-8: 238, 149, 235;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-9: 246, 191, 243;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-10: 255, 236, 253;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-1: 77, 0, 48;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-2: 114, 3, 70;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-3: 151, 12, 91;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-4: 189, 25, 112;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-5: 226, 41, 133;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-6: 232, 53, 137;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-7: 238, 97, 158;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-8: 243, 143, 183;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-9: 249, 192, 213;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-10: 255, 242, 247;
+  /**
+   * @name 
+   * @type color
+   * @group base
+   * @description 
+   */
+  --o-color-white: rgb(var(--o-white));
+  /**
+   * @name 
+   * @type color
+   * @group base
+   * @description 
+   */
+  --o-color-black: rgb(var(--o-black));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 常规
+   */
+  --o-color-primary1: rgb(var(--o-mixedgray-14));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 悬浮
+   */
+  --o-color-primary2: rgb(var(--o-mixedgray-13));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 激活
+   */
+  --o-color-primary3: rgb(var(--o-mixedgray-12));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 禁用
+   */
+  --o-color-primary4: rgb(var(--o-mixedgray-8));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 常规-浅
+   */
+  --o-color-primary1-light: rgb(var(--o-mixedgray-5));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 悬浮-浅
+   */
+  --o-color-primary2-light: rgb(var(--o-mixedgray-6));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 激活-浅
+   */
+  --o-color-primary3-light: rgb(var(--o-mixedgray-7));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 禁用-浅
+   */
+  --o-color-primary4-light: rgb(var(--o-mixedgray-6));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 常规
+   */
+  --o-color-success1: rgb(var(--o-green-6));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 悬浮
+   */
+  --o-color-success2: rgb(var(--o-green-4));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 激活
+   */
+  --o-color-success3: rgb(var(--o-green-7));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 禁用
+   */
+  --o-color-success4: rgb(var(--o-green-3));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 常规-浅
+   */
+  --o-color-success1-light: rgb(var(--o-green-2));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 悬浮-浅
+   */
+  --o-color-success2-light: rgb(var(--o-green-3));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 激活-浅
+   */
+  --o-color-success3-light: rgb(var(--o-green-4));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 禁用-浅
+   */
+  --o-color-success4-light: rgb(var(--o-green-1));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 常规
+   */
+  --o-color-warning1: rgb(var(--o-orange-6));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 悬浮
+   */
+  --o-color-warning2: rgb(var(--o-orange-4));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 激活
+   */
+  --o-color-warning3: rgb(var(--o-orange-7));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 禁用
+   */
+  --o-color-warning4: rgb(var(--o-orange-3));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 常规-浅
+   */
+  --o-color-warning1-light: rgb(var(--o-orange-2));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 悬浮-浅
+   */
+  --o-color-warning2-light: rgb(var(--o-orange-3));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 激活-浅
+   */
+  --o-color-warning3-light: rgb(var(--o-orange-4));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 禁用-浅
+   */
+  --o-color-warning4-light: rgb(var(--o-orange-1));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 常规
+   */
+  --o-color-danger1: rgb(var(--o-red-6));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 悬浮
+   */
+  --o-color-danger2: rgb(var(--o-red-4));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 激活
+   */
+  --o-color-danger3: rgb(var(--o-red-7));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 禁用
+   */
+  --o-color-danger4: rgb(var(--o-red-3));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 常规-浅
+   */
+  --o-color-danger1-light: rgb(var(--o-red-2));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 悬浮-浅
+   */
+  --o-color-danger2-light: rgb(var(--o-red-3));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 激活-浅
+   */
+  --o-color-danger3-light: rgb(var(--o-red-4));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 禁用-浅
+   */
+  --o-color-danger4-light: rgb(var(--o-red-1));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 一级填充：页面背景
+   */
+  --o-color-fill1: rgb(var(--o-mixedgray-3));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 二级填充：区块/卡片
+   */
+  --o-color-fill2: rgb(var(--o-mixedgray-4));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 三级填充：卡片
+   */
+  --o-color-fill3: rgb(var(--o-mixedgray-5));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 常规，常用于边框
+   */
+  --o-color-control1: rgba(var(--o-mixedgray-14), 0.25);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 悬浮，常用于边框
+   */
+  --o-color-control2: rgba(var(--o-mixedgray-14), 0.6);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 激活，常用于边框
+   */
+  --o-color-control3: rgba(var(--o-mixedgray-14), 0.8);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 禁用，常用于边框
+   */
+  --o-color-control4: rgba(var(--o-mixedgray-14), 0.15);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 常规-浅，常用于背景
+   */
+  --o-color-control1-light: rgb(var(--o-mixedgray-7));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 悬浮-浅，常用于背景
+   */
+  --o-color-control2-light: rgb(var(--o-mixedgray-5));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 激活-浅，常用于背景
+   */
+  --o-color-control3-light: rgb(var(--o-mixedgray-6));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 禁用-浅，常用于背景
+   */
+  --o-color-control4-light: rgb(var(--o-mixedgray-5));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 很浅，常用于表格背景色
+   */
+  --o-color-control-light: rgb(var(--o-mixedgray-4));
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 一级/强调/标题
+   */
+  --o-color-info1: rgba(var(--o-mixedgray-14), 1.0);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 二级/次强调/正文
+   */
+  --o-color-info2: rgba(var(--o-mixedgray-14), 0.8);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 三级/辅助信息
+   */
+  --o-color-info3: rgba(var(--o-mixedgray-14), 0.6);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 置灰/禁用
+   */
+  --o-color-info4: rgba(var(--o-mixedgray-14), 0.4);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 一级/次强调/正文反色
+   */
+  --o-color-info1-inverse: rgba(var(--o-mixedgray-1), 1.0);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 二级/辅助信息反色
+   */
+  --o-color-info2-inverse: rgba(var(--o-mixedgray-1), 0.8);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 三级/辅助信息反色
+   */
+  --o-color-info3-inverse: rgba(var(--o-mixedgray-1), 0.6);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 置灰/禁用反色
+   */
+  --o-color-info4-inverse: rgba(var(--o-mixedgray-1), 0.4);
+  /**
+   * @name 
+   * @type color
+   * @group mask
+   * @description 全局遮罩
+   */
+  --o-color-mask1: rgba(var(--o-mixedgray-1), 0.4);
+  /**
+   * @name 
+   * @type color
+   * @group mask
+   * @description 局部遮罩
+   */
+  --o-color-mask2: rgba(var(--o-mixedgray-4), 0.2);
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 常规
+   */
+  --o-color-link1: rgba(var(--o-deepblue-6), 1.0);
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 悬浮
+   */
+  --o-color-link2: rgba(var(--o-deepblue-6), 0.7);
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 激活
+   */
+  --o-color-link3: rgba(var(--o-deepblue-6), 0.9);
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 禁用
+   */
+  --o-color-link4: rgba(var(--o-deepblue-6), 0.4);
+  /**
+   * @name 阴影1
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片、小弹窗、楼层阴影
+   */
+  --o-shadow-1: 0 3px 8px rgba(var(--o-mixedgray-1), 0.08);
+  /**
+   * @name 阴影2
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片悬浮阴影
+   */
+  --o-shadow-2: 0 2px 24px rgba(var(--o-mixedgray-1), 0.15);
+  /**
+   * @name 阴影3
+   * @type shadow
+   * @group shadow
+   * @description 用于提示阴影
+   */
+  --o-shadow-3: 0 8px 40px rgba(var(--o-mixedgray-1), 0.1);
+  /**
+   * @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: 48px;
+  /**
+   * @name 间距9
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距9
+   */
+  --o-gap-9: 64px;
+  /**
+   * @name 间距10
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距10
+   */
+  --o-gap-10: 72px;
+  /**
+   * @name 超小尺寸
+   * @type size
+   * @group control_size
+   * @description 超小尺寸
+   */
+  --o-control_size-2xs: 14px;
+  /**
+   * @name 小尺寸
+   * @type size
+   * @group control_size
+   * @description 小尺寸
+   */
+  --o-control_size-xs: 16px;
+  /**
+   * @name 小尺寸
+   * @type size
+   * @group control_size
+   * @description 小尺寸
+   */
+  --o-control_size-s: 24px;
+  /**
+   * @name 中尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-m: 32px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-l: 40px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-xl: 48px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-2xl: 56px;
+  /**
+   * @name 超小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 超小尺寸图标
+   */
+  --o-icon_size-xs: 16px;
+  /**
+   * @name 小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 小尺寸图标
+   */
+  --o-icon_size-s: 20px;
+  /**
+   * @name 中尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 中尺寸图标
+   */
+  --o-icon_size-m: 24px;
+  /**
+   * @name 大尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 大尺寸图标
+   */
+  --o-icon_size-l: 32px;
+  /**
+   * @name 超大尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 超大尺寸图标
+   */
+  --o-icon_size-xl: 40px;
+  /**
+   * @name 2xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 2xl尺寸图标
+   */
+  --o-icon_size-2xl: 48px;
+  /**
+   * @name 3xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 3xl尺寸图标
+   */
+  --o-icon_size-3xl: 56px;
+  /**
+   * @name 4xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 4xl尺寸图标
+   */
+  --o-icon_size-4xl: 64px;
+  /**
+   * @name 超小尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 超小尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-xs: 16px;
+  /**
+   * @name 小尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 小尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-s: 20px;
+  /**
+   * @name 中尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 中尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-m: 24px;
+  /**
+   * @name 大尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 大尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-l: 32px;
+  /**
+   * @name 超大尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 超大尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-xl: 40px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group font_size
+   * @description 一级数据展示
+   */
+  --o-font_size-display1: 56px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group font_size
+   * @description 二级数据展示
+   */
+  --o-font_size-display2: 48px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group font_size
+   * @description 三级数据展示
+   */
+  --o-font_size-display3: 40px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group font_size
+   * @description 一级标题
+   */
+  --o-font_size-h1: 32px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group font_size
+   * @description 二级标题
+   */
+  --o-font_size-h2: 24px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group font_size
+   * @description 三级标题
+   */
+  --o-font_size-h3: 22px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group font_size
+   * @description 四级标题
+   */
+  --o-font_size-h4: 20px;
+  /**
+   * @name 常规正文
+   * @type font
+   * @group font_size
+   * @description 常规正文
+   */
+  --o-font_size-text1: 16px;
+  /**
+   * @name 大号正文
+   * @type font
+   * @group font_size
+   * @description 大号正文
+   */
+  --o-font_size-text2: 18px;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group font_size
+   * @description 提示文本1
+   */
+  --o-font_size-tip1: 14px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group font_size
+   * @description 提示文本2
+   */
+  --o-font_size-tip2: 12px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group line_height
+   * @description 一级数据展示
+   */
+  --o-line_height-display1: 80px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group line_height
+   * @description 二级数据展示
+   */
+  --o-line_height-display2: 64px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group line_height
+   * @description 三级数据展示
+   */
+  --o-line_height-display3: 56px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group line_height
+   * @description 一级标题
+   */
+  --o-line_height-h1: 44px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group line_height
+   * @description 二级标题
+   */
+  --o-line_height-h2: 32px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group line_height
+   * @description 三级标题
+   */
+  --o-line_height-h3: 30px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group line_height
+   * @description 四级标题
+   */
+  --o-line_height-h4: 28px;
+  /**
+   * @name 正文
+   * @type font
+   * @group line_height
+   * @description 正文
+   */
+  --o-line_height-text1: 24px;
+  /**
+   * @name 正文-大
+   * @type font
+   * @group line_height
+   * @description 正文-大
+   */
+  --o-line_height-text2: 26x;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group line_height
+   * @description 提示文本1
+   */
+  --o-line_height-tip1: 22px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group line_height
+   * @description 提示文本2
+   */
+  --o-line_height-tip2: 18px;
+  /**
+   * @name 超小尺寸圆角
+   * @type size
+   * @group radius
+   * @description 超小尺寸圆角
+   */
+  --o-radius-xs: 4px;
+  /**
+   * @name 小尺寸圆角
+   * @type size
+   * @group radius
+   * @description 小尺寸圆角
+   */
+  --o-radius-s: 8px;
+  /**
+   * @name 中尺寸圆角
+   * @type size
+   * @group radius
+   * @description 中尺寸圆角
+   */
+  --o-radius-m: 12px;
+  /**
+   * @name 大尺寸圆角
+   * @type size
+   * @group radius
+   * @description 大尺寸圆角
+   */
+  --o-radius-l: 16px;
+  /**
+   * @name 大尺寸圆角
+   * @type size
+   * @group radius
+   * @description 大尺寸圆角,一般用于卡片
+   */
+  --o-radius-xl: 24px;
+  /**
+   * @name 超小尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 超小尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-xs: 4px;
+  /**
+   * @name 小尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 小尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-s: 8px;
+  /**
+   * @name 中尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 中尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-m: 12px;
+  /**
+   * @name 大尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 大尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-l: 16px;
+  /**
+   * @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/theme/ascend/a.light.token.css b/packages/opendesign/src/theme/ascend/a.light.token.css
new file mode 100644
index 0000000000000000000000000000000000000000..10f88106209b396b57105b8a5310db8cf1010397
--- /dev/null
+++ b/packages/opendesign/src/theme/ascend/a.light.token.css
@@ -0,0 +1,1949 @@
+/* theme: a.light */
+[data-o-theme="a.light"] {
+  /**
+   * @name 
+   * @type palette
+   * @group white
+   * @description 
+   */
+  --o-white: 255, 255, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group black
+   * @description 
+   */
+  --o-black: 0, 0, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-1: 232, 240, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-2: 194, 213, 254;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-3: 157, 184, 253;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-4: 120, 153, 252;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-5: 83, 119, 251;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-6: 46, 83, 250;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-7: 29, 55, 207;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-8: 15, 32, 163;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-9: 6, 15, 120;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-10: 0, 4, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-1: 232, 255, 238;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-2: 177, 239, 195;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-3: 128, 224, 158;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-4: 84, 208, 127;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-5: 45, 193, 101;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-6: 11, 177, 81;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-7: 7, 152, 72;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-8: 4, 127, 63;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-9: 2, 102, 53;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-10: 0, 77, 42;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-1: 255, 246, 232;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-2: 254, 226, 186;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-3: 253, 202, 140;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-4: 252, 176, 95;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-5: 251, 147, 50;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-6: 250, 115, 5;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-7: 207, 88, 3;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-8: 163, 64, 2;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-9: 120, 42, 1;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-10: 77, 24, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-1: 255, 234, 232;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-2: 250, 185, 182;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-3: 245, 136, 134;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-4: 240, 87, 90;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-5: 235, 43, 52;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-6: 230, 0, 18;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-7: 192, 0, 22;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-8: 153, 0, 23;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-9: 115, 0, 21;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-10: 77, 0, 17;
+  /**
+   * @name 
+   * @type palette
+   * @group huaweired
+   * @description 
+   */
+  --o-red-huawei: 199, 0, 11;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-1: 255, 255, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-2: 243, 243, 245;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-3: 237, 237, 240;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-4: 232, 232, 235;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-5: 222, 222, 227;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-6: 210, 210, 217;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-7: 186, 186, 191;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-8: 149, 149, 156;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-9: 111, 111, 117;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-10: 85, 85, 92;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-11: 61, 61, 66;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-12: 37, 37, 41;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-13: 21, 21, 23;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-14: 0, 0, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-1: 255, 255, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-2: 244, 245, 247;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-3: 237, 239, 242;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-4: 232, 234, 237;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-5: 224, 226, 230;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-6: 209, 214, 219;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-7: 179, 185, 191;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-8: 144, 150, 158;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-9: 104, 109, 117;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-10: 79, 84, 92;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-11: 55, 59, 66;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-12: 32, 35, 41;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-13: 18, 20, 23;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-14: 0, 0, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-1: 255, 255, 232;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-2: 253, 251, 185;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-3: 251, 244, 139;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-4: 249, 233, 94;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-5: 247, 221, 49;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-6: 245, 205, 5;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-7: 203, 163, 3;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-8: 161, 124, 2;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-9: 119, 87, 1;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-10: 77, 54, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-1: 251, 255, 232;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-2: 233, 245, 184;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-3: 213, 236, 139;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-4: 192, 226, 97;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-5: 169, 217, 59;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-6: 146, 207, 23;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-7: 116, 174, 15;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-8: 88, 142, 8;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-9: 63, 109, 3;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-10: 41, 77, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-1: 232, 255, 249;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-2: 176, 240, 226;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-3: 125, 225, 207;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-4: 79, 211, 191;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-5: 38, 196, 177;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-6: 3, 181, 165;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-7: 2, 155, 147;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-8: 1, 129, 127;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-9: 0, 101, 103;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-10: 0, 73, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-1: 232, 249, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-2: 185, 233, 252;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-3: 138, 214, 249;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-4: 93, 192, 246;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-5: 48, 168, 243;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-6: 5, 142, 240;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-7: 3, 111, 199;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-8: 2, 83, 158;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-9: 1, 57, 117;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-10: 0, 34, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-1: 245, 232, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-2: 225, 192, 253;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-3: 203, 152, 251;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-4: 178, 113, 248;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-5: 152, 75, 246;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-6: 123, 37, 244;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-7: 92, 23, 202;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-8: 64, 12, 160;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-9: 41, 4, 118;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-10: 22, 0, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-1: 255, 232, 253;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-2: 246, 188, 243;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-3: 238, 146, 235;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-4: 229, 107, 229;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-5: 216, 71, 221;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-6: 199, 37, 212;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-7: 163, 23, 178;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-8: 127, 13, 144;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-9: 93, 5, 110;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-10: 61, 0, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-1: 255, 232, 240;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-2: 249, 185, 209;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-3: 243, 141, 182;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-4: 238, 98, 158;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-5: 232, 57, 139;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-6: 226, 18, 122;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-7: 189, 11, 106;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-8: 151, 6, 88;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-9: 114, 2, 69;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-10: 77, 0, 48;
+  /**
+   * @name 
+   * @type color
+   * @group base
+   * @description 
+   */
+  --o-color-white: rgb(var(--o-white));
+  /**
+   * @name 
+   * @type color
+   * @group base
+   * @description 
+   */
+  --o-color-black: rgb(var(--o-black));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 常规
+   */
+  --o-color-primary1: rgb(var(--o-mixedgray-12));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 悬浮
+   */
+  --o-color-primary2: rgb(var(--o-mixedgray-11));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 激活
+   */
+  --o-color-primary3: rgb(var(--o-mixedgray-13));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 禁用
+   */
+  --o-color-primary4: rgb(var(--o-mixedgray-6));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 常规-浅
+   */
+  --o-color-primary1-light: rgb(var(--o-mixedgray-4));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 悬浮-浅
+   */
+  --o-color-primary2-light: rgb(var(--o-mixedgray-5));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 激活-浅
+   */
+  --o-color-primary3-light: rgb(var(--o-mixedgray-6));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 禁用-浅
+   */
+  --o-color-primary4-light: rgb(var(--o-mixedgray-5));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 常规
+   */
+  --o-color-success1: rgb(var(--o-green-6));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 悬浮
+   */
+  --o-color-success2: rgb(var(--o-green-4));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 激活
+   */
+  --o-color-success3: rgb(var(--o-green-7));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 禁用
+   */
+  --o-color-success4: rgb(var(--o-green-3));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 常规-浅
+   */
+  --o-color-success1-light: rgb(var(--o-green-2));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 悬浮-浅
+   */
+  --o-color-success2-light: rgb(var(--o-green-3));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 激活-浅
+   */
+  --o-color-success3-light: rgb(var(--o-green-4));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 禁用-浅
+   */
+  --o-color-success4-light: rgb(var(--o-green-1));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 常规
+   */
+  --o-color-warning1: rgb(var(--o-orange-6));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 悬浮
+   */
+  --o-color-warning2: rgb(var(--o-orange-4));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 激活
+   */
+  --o-color-warning3: rgb(var(--o-orange-7));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 禁用
+   */
+  --o-color-warning4: rgb(var(--o-orange-3));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 常规-浅
+   */
+  --o-color-warning1-light: rgb(var(--o-orange-2));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 悬浮-浅
+   */
+  --o-color-warning2-light: rgb(var(--o-orange-3));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 激活-浅
+   */
+  --o-color-warning3-light: rgb(var(--o-orange-4));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 禁用-浅
+   */
+  --o-color-warning4-light: rgb(var(--o-orange-1));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 常规
+   */
+  --o-color-danger1: rgb(var(--o-red-6));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 悬浮
+   */
+  --o-color-danger2: rgb(var(--o-red-4));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 激活
+   */
+  --o-color-danger3: rgb(var(--o-red-7));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 禁用
+   */
+  --o-color-danger4: rgb(var(--o-red-3));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 常规-浅
+   */
+  --o-color-danger1-light: rgb(var(--o-red-2));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 悬浮-浅
+   */
+  --o-color-danger2-light: rgb(var(--o-red-3));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 激活-浅
+   */
+  --o-color-danger3-light: rgb(var(--o-red-4));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 禁用-浅
+   */
+  --o-color-danger4-light: rgb(var(--o-red-1));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 一级填充：页面背景
+   */
+  --o-color-fill1: rgb(var(--o-mixedgray-2));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 二级填充：区块/卡片
+   */
+  --o-color-fill2: rgb(var(--o-mixedgray-1));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 三级填充：卡片
+   */
+  --o-color-fill3: rgb(var(--o-mixedgray-3));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 常规，常用于边框
+   */
+  --o-color-control1: rgba(var(--o-mixedgray-14), 0.25);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 悬浮，常用于边框
+   */
+  --o-color-control2: rgba(var(--o-mixedgray-14), 0.6);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 激活，常用于边框
+   */
+  --o-color-control3: rgba(var(--o-mixedgray-14), 0.8);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 禁用，常用于边框
+   */
+  --o-color-control4: rgba(var(--o-mixedgray-14), 0.1);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 常规-浅，常用于背景
+   */
+  --o-color-control1-light: rgb(var(--o-mixedgray-5));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 悬浮-浅，常用于背景
+   */
+  --o-color-control2-light: rgb(var(--o-mixedgray-3));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 激活-浅，常用于背景
+   */
+  --o-color-control3-light: rgb(var(--o-mixedgray-4));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 禁用-浅，常用于背景
+   */
+  --o-color-control4-light: rgb(var(--o-mixedgray-3));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 很浅，常用于表格背景色
+   */
+  --o-color-control-light: rgb(var(--o-mixedgray-1));
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 一级/强调/标题
+   */
+  --o-color-info1: rgba(var(--o-mixedgray-14), 1.0);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 二级/次强调/正文
+   */
+  --o-color-info2: rgba(var(--o-mixedgray-14), 0.8);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 三级/辅助信息
+   */
+  --o-color-info3: rgba(var(--o-mixedgray-14), 0.6);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 置灰/禁用
+   */
+  --o-color-info4: rgba(var(--o-mixedgray-14), 0.4);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 一级/次强调/正文反色
+   */
+  --o-color-info1-inverse: rgba(var(--o-mixedgray-1), 1.0);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 二级/辅助信息反色
+   */
+  --o-color-info2-inverse: rgba(var(--o-mixedgray-1), 0.8);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 三级/辅助信息反色
+   */
+  --o-color-info3-inverse: rgba(var(--o-mixedgray-1), 0.6);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 置灰/禁用反色
+   */
+  --o-color-info4-inverse: rgba(var(--o-mixedgray-1), 0.4);
+  /**
+   * @name 
+   * @type color
+   * @group mask
+   * @description 全局遮罩
+   */
+  --o-color-mask1: rgba(var(--o-mixedgray-14), 0.4);
+  /**
+   * @name 
+   * @type color
+   * @group mask
+   * @description 局部遮罩
+   */
+  --o-color-mask2: rgba(var(--o-mixedgray-1), 0.2);
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 常规
+   */
+  --o-color-link1: rgba(var(--o-deepblue-6), 1.0);
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 悬浮
+   */
+  --o-color-link2: rgba(var(--o-deepblue-6), 0.7);
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 激活
+   */
+  --o-color-link3: rgba(var(--o-deepblue-6), 0.9);
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 禁用
+   */
+  --o-color-link4: rgba(var(--o-deepblue-6), 0.4);
+  /**
+   * @name 阴影1
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片、小弹窗、楼层阴影
+   */
+  --o-shadow-1: 0 3px 8px rgba(var(--o-mixedgray-13), 0.08);
+  /**
+   * @name 阴影2
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片悬浮阴影
+   */
+  --o-shadow-2: 0 2px 24px rgba(var(--o-mixedgray-13), 0.15);
+  /**
+   * @name 阴影3
+   * @type shadow
+   * @group shadow
+   * @description 用于提示阴影
+   */
+  --o-shadow-3: 0 8px 40px rgba(var(--o-mixedgray-13), 0.1);
+  /**
+   * @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: 48px;
+  /**
+   * @name 间距9
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距9
+   */
+  --o-gap-9: 64px;
+  /**
+   * @name 间距10
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距10
+   */
+  --o-gap-10: 72px;
+  /**
+   * @name 超小尺寸
+   * @type size
+   * @group control_size
+   * @description 超小尺寸
+   */
+  --o-control_size-2xs: 14px;
+  /**
+   * @name 小尺寸
+   * @type size
+   * @group control_size
+   * @description 小尺寸
+   */
+  --o-control_size-xs: 16px;
+  /**
+   * @name 小尺寸
+   * @type size
+   * @group control_size
+   * @description 小尺寸
+   */
+  --o-control_size-s: 24px;
+  /**
+   * @name 中尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-m: 32px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-l: 40px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-xl: 48px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-2xl: 56px;
+  /**
+   * @name 超小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 超小尺寸图标
+   */
+  --o-icon_size-xs: 16px;
+  /**
+   * @name 小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 小尺寸图标
+   */
+  --o-icon_size-s: 20px;
+  /**
+   * @name 中尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 中尺寸图标
+   */
+  --o-icon_size-m: 24px;
+  /**
+   * @name 大尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 大尺寸图标
+   */
+  --o-icon_size-l: 32px;
+  /**
+   * @name 超大尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 超大尺寸图标
+   */
+  --o-icon_size-xl: 40px;
+  /**
+   * @name 2xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 2xl尺寸图标
+   */
+  --o-icon_size-2xl: 48px;
+  /**
+   * @name 3xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 3xl尺寸图标
+   */
+  --o-icon_size-3xl: 56px;
+  /**
+   * @name 4xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 4xl尺寸图标
+   */
+  --o-icon_size-4xl: 64px;
+  /**
+   * @name 超小尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 超小尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-xs: 16px;
+  /**
+   * @name 小尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 小尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-s: 20px;
+  /**
+   * @name 中尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 中尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-m: 24px;
+  /**
+   * @name 大尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 大尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-l: 32px;
+  /**
+   * @name 超大尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 超大尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-xl: 40px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group font_size
+   * @description 一级数据展示
+   */
+  --o-font_size-display1: 56px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group font_size
+   * @description 二级数据展示
+   */
+  --o-font_size-display2: 48px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group font_size
+   * @description 三级数据展示
+   */
+  --o-font_size-display3: 40px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group font_size
+   * @description 一级标题
+   */
+  --o-font_size-h1: 32px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group font_size
+   * @description 二级标题
+   */
+  --o-font_size-h2: 24px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group font_size
+   * @description 三级标题
+   */
+  --o-font_size-h3: 22px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group font_size
+   * @description 四级标题
+   */
+  --o-font_size-h4: 20px;
+  /**
+   * @name 常规正文
+   * @type font
+   * @group font_size
+   * @description 常规正文
+   */
+  --o-font_size-text1: 16px;
+  /**
+   * @name 大号正文
+   * @type font
+   * @group font_size
+   * @description 大号正文
+   */
+  --o-font_size-text2: 18px;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group font_size
+   * @description 提示文本1
+   */
+  --o-font_size-tip1: 14px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group font_size
+   * @description 提示文本2
+   */
+  --o-font_size-tip2: 12px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group line_height
+   * @description 一级数据展示
+   */
+  --o-line_height-display1: 80px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group line_height
+   * @description 二级数据展示
+   */
+  --o-line_height-display2: 64px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group line_height
+   * @description 三级数据展示
+   */
+  --o-line_height-display3: 56px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group line_height
+   * @description 一级标题
+   */
+  --o-line_height-h1: 44px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group line_height
+   * @description 二级标题
+   */
+  --o-line_height-h2: 32px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group line_height
+   * @description 三级标题
+   */
+  --o-line_height-h3: 30px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group line_height
+   * @description 四级标题
+   */
+  --o-line_height-h4: 28px;
+  /**
+   * @name 正文
+   * @type font
+   * @group line_height
+   * @description 正文
+   */
+  --o-line_height-text1: 24px;
+  /**
+   * @name 正文-大
+   * @type font
+   * @group line_height
+   * @description 正文-大
+   */
+  --o-line_height-text2: 26px;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group line_height
+   * @description 提示文本1
+   */
+  --o-line_height-tip1: 22px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group line_height
+   * @description 提示文本2
+   */
+  --o-line_height-tip2: 18px;
+  /**
+   * @name 超小尺寸圆角
+   * @type size
+   * @group radius
+   * @description 超小尺寸圆角
+   */
+  --o-radius-xs: 4px;
+  /**
+   * @name 小尺寸圆角
+   * @type size
+   * @group radius
+   * @description 小尺寸圆角
+   */
+  --o-radius-s: 8px;
+  /**
+   * @name 中尺寸圆角
+   * @type size
+   * @group radius
+   * @description 中尺寸圆角
+   */
+  --o-radius-m: 12px;
+  /**
+   * @name 大尺寸圆角
+   * @type size
+   * @group radius
+   * @description 大尺寸圆角
+   */
+  --o-radius-l: 16px;
+  /**
+   * @name 大尺寸圆角
+   * @type size
+   * @group radius
+   * @description 大尺寸圆角,一般用于卡片
+   */
+  --o-radius-xl: 24px;
+  /**
+   * @name 超小尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 超小尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-xs: 4px;
+  /**
+   * @name 小尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 小尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-s: 8px;
+  /**
+   * @name 中尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 中尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-m: 12px;
+  /**
+   * @name 大尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 大尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-l: 16px;
+  /**
+   * @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/theme/ascend/a.token.code-snippets b/packages/opendesign/src/theme/ascend/a.token.code-snippets
new file mode 100644
index 0000000000000000000000000000000000000000..db5e09335d26f4834e22dbaa1eda92e7b3d91217
--- /dev/null
+++ b/packages/opendesign/src/theme/ascend/a.token.code-snippets
@@ -0,0 +1,2226 @@
+{
+  "--o-white": {
+    "prefix": [
+      "var(--o-white)"
+    ],
+    "body": "var(--o-white)",
+    "description": "[light: 255, 255, 255, dark: 255, 255, 255]",
+    "scope": "css,scss,less"
+  },
+  "--o-black": {
+    "prefix": [
+      "var(--o-black)"
+    ],
+    "body": "var(--o-black)",
+    "description": "[light: 0, 0, 0, dark: 0, 0, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-deepblue-1": {
+    "prefix": [
+      "var(--o-deepblue-1)"
+    ],
+    "body": "var(--o-deepblue-1)",
+    "description": "[light: 232, 240, 255, dark: 0, 4, 77]",
+    "scope": "css,scss,less"
+  },
+  "--o-deepblue-2": {
+    "prefix": [
+      "var(--o-deepblue-2)"
+    ],
+    "body": "var(--o-deepblue-2)",
+    "description": "[light: 194, 213, 254, dark: 6, 15, 120]",
+    "scope": "css,scss,less"
+  },
+  "--o-deepblue-3": {
+    "prefix": [
+      "var(--o-deepblue-3)"
+    ],
+    "body": "var(--o-deepblue-3)",
+    "description": "[light: 157, 184, 253, dark: 20, 37, 163]",
+    "scope": "css,scss,less"
+  },
+  "--o-deepblue-4": {
+    "prefix": [
+      "var(--o-deepblue-4)"
+    ],
+    "body": "var(--o-deepblue-4)",
+    "description": "[light: 120, 153, 252, dark: 40, 65, 207]",
+    "scope": "css,scss,less"
+  },
+  "--o-deepblue-5": {
+    "prefix": [
+      "var(--o-deepblue-5)"
+    ],
+    "body": "var(--o-deepblue-5)",
+    "description": "[light: 83, 119, 251, dark: 66, 99, 250]",
+    "scope": "css,scss,less"
+  },
+  "--o-deepblue-6": {
+    "prefix": [
+      "var(--o-deepblue-6)"
+    ],
+    "body": "var(--o-deepblue-6)",
+    "description": "[light: 46, 83, 250, dark: 84, 120, 251]",
+    "scope": "css,scss,less"
+  },
+  "--o-deepblue-7": {
+    "prefix": [
+      "var(--o-deepblue-7)"
+    ],
+    "body": "var(--o-deepblue-7)",
+    "description": "[light: 29, 55, 207, dark: 122, 154, 252]",
+    "scope": "css,scss,less"
+  },
+  "--o-deepblue-8": {
+    "prefix": [
+      "var(--o-deepblue-8)"
+    ],
+    "body": "var(--o-deepblue-8)",
+    "description": "[light: 15, 32, 163, dark: 160, 186, 253]",
+    "scope": "css,scss,less"
+  },
+  "--o-deepblue-9": {
+    "prefix": [
+      "var(--o-deepblue-9)"
+    ],
+    "body": "var(--o-deepblue-9)",
+    "description": "[light: 6, 15, 120, dark: 199, 217, 254]",
+    "scope": "css,scss,less"
+  },
+  "--o-deepblue-10": {
+    "prefix": [
+      "var(--o-deepblue-10)"
+    ],
+    "body": "var(--o-deepblue-10)",
+    "description": "[light: 0, 4, 77, dark: 238, 244, 255]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-1": {
+    "prefix": [
+      "var(--o-green-1)"
+    ],
+    "body": "var(--o-green-1)",
+    "description": "[light: 232, 255, 238, dark: 0, 77, 42]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-2": {
+    "prefix": [
+      "var(--o-green-2)"
+    ],
+    "body": "var(--o-green-2)",
+    "description": "[light: 177, 239, 195, dark: 2, 102, 53]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-3": {
+    "prefix": [
+      "var(--o-green-3)"
+    ],
+    "body": "var(--o-green-3)",
+    "description": "[light: 128, 224, 158, dark: 10, 127, 66]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-4": {
+    "prefix": [
+      "var(--o-green-4)"
+    ],
+    "body": "var(--o-green-4)",
+    "description": "[light: 84, 208, 127, dark: 22, 152, 80]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-5": {
+    "prefix": [
+      "var(--o-green-5)"
+    ],
+    "body": "var(--o-green-5)",
+    "description": "[light: 45, 193, 101, dark: 36, 177, 95]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-6": {
+    "prefix": [
+      "var(--o-green-6)"
+    ],
+    "body": "var(--o-green-6)",
+    "description": "[light: 11, 177, 81, dark: 51, 193, 104]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-7": {
+    "prefix": [
+      "var(--o-green-7)"
+    ],
+    "body": "var(--o-green-7)",
+    "description": "[light: 7, 152, 72, dark: 90, 208, 131]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-8": {
+    "prefix": [
+      "var(--o-green-8)"
+    ],
+    "body": "var(--o-green-8)",
+    "description": "[light: 4, 127, 63, dark: 135, 224, 163]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-9": {
+    "prefix": [
+      "var(--o-green-9)"
+    ],
+    "body": "var(--o-green-9)",
+    "description": "[light: 2, 102, 53, dark: 185, 239, 200]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-10": {
+    "prefix": [
+      "var(--o-green-10)"
+    ],
+    "body": "var(--o-green-10)",
+    "description": "[light: 0, 77, 42, dark: 240, 255, 244]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-1": {
+    "prefix": [
+      "var(--o-orange-1)"
+    ],
+    "body": "var(--o-orange-1)",
+    "description": "[light: 255, 246, 232, dark: 77, 24, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-2": {
+    "prefix": [
+      "var(--o-orange-2)"
+    ],
+    "body": "var(--o-orange-2)",
+    "description": "[light: 254, 226, 186, dark: 120, 42, 1]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-3": {
+    "prefix": [
+      "var(--o-orange-3)"
+    ],
+    "body": "var(--o-orange-3)",
+    "description": "[light: 253, 202, 140, dark: 163, 68, 8]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-4": {
+    "prefix": [
+      "var(--o-orange-4)"
+    ],
+    "body": "var(--o-orange-4)",
+    "description": "[light: 252, 176, 95, dark: 207, 97, 19]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-5": {
+    "prefix": [
+      "var(--o-orange-5)"
+    ],
+    "body": "var(--o-orange-5)",
+    "description": "[light: 251, 147, 50, dark: 250, 130, 33]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-6": {
+    "prefix": [
+      "var(--o-orange-6)"
+    ],
+    "body": "var(--o-orange-6)",
+    "description": "[light: 250, 115, 5, dark: 251, 143, 43]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-7": {
+    "prefix": [
+      "var(--o-orange-7)"
+    ],
+    "body": "var(--o-orange-7)",
+    "description": "[light: 207, 88, 3, dark: 252, 174, 91]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-8": {
+    "prefix": [
+      "var(--o-orange-8)"
+    ],
+    "body": "var(--o-orange-8)",
+    "description": "[light: 163, 64, 2, dark: 253, 202, 139]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-9": {
+    "prefix": [
+      "var(--o-orange-9)"
+    ],
+    "body": "var(--o-orange-9)",
+    "description": "[light: 120, 42, 1, dark: 254, 227, 188]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-10": {
+    "prefix": [
+      "var(--o-orange-10)"
+    ],
+    "body": "var(--o-orange-10)",
+    "description": "[light: 77, 24, 0, dark: 255, 248, 237]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-1": {
+    "prefix": [
+      "var(--o-red-1)"
+    ],
+    "body": "var(--o-red-1)",
+    "description": "[light: 255, 234, 232, dark: 77, 0, 17]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-2": {
+    "prefix": [
+      "var(--o-red-2)"
+    ],
+    "body": "var(--o-red-2)",
+    "description": "[light: 250, 185, 182, dark: 115, 3, 24]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-3": {
+    "prefix": [
+      "var(--o-red-3)"
+    ],
+    "body": "var(--o-red-3)",
+    "description": "[light: 245, 136, 134, dark: 153, 9, 31]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-4": {
+    "prefix": [
+      "var(--o-red-4)"
+    ],
+    "body": "var(--o-red-4)",
+    "description": "[light: 240, 87, 90, dark: 192, 17, 37]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-5": {
+    "prefix": [
+      "var(--o-red-5)"
+    ],
+    "body": "var(--o-red-5)",
+    "description": "[light: 235, 43, 52, dark: 230, 28, 43]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-6": {
+    "prefix": [
+      "var(--o-red-6)"
+    ],
+    "body": "var(--o-red-6)",
+    "description": "[light: 230, 0, 18, dark: 235, 35, 45]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-7": {
+    "prefix": [
+      "var(--o-red-7)"
+    ],
+    "body": "var(--o-red-7)",
+    "description": "[light: 192, 0, 22, dark: 240, 82, 85]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-8": {
+    "prefix": [
+      "var(--o-red-8)"
+    ],
+    "body": "var(--o-red-8)",
+    "description": "[light: 153, 0, 23, dark: 245, 132, 130]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-9": {
+    "prefix": [
+      "var(--o-red-9)"
+    ],
+    "body": "var(--o-red-9)",
+    "description": "[light: 115, 0, 21, dark: 250, 183, 180]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-10": {
+    "prefix": [
+      "var(--o-red-10)"
+    ],
+    "body": "var(--o-red-10)",
+    "description": "[light: 77, 0, 17, dark: 255, 234, 232]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-huawei": {
+    "prefix": [
+      "var(--o-red-huawei)"
+    ],
+    "body": "var(--o-red-huawei)",
+    "description": "[light: 199, 0, 11, dark: 199, 0, 11]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-1": {
+    "prefix": [
+      "var(--o-gray-1)"
+    ],
+    "body": "var(--o-gray-1)",
+    "description": "[light: 255, 255, 255, dark: 0, 0, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-2": {
+    "prefix": [
+      "var(--o-gray-2)"
+    ],
+    "body": "var(--o-gray-2)",
+    "description": "[light: 243, 243, 245, dark: 18, 18, 20]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-3": {
+    "prefix": [
+      "var(--o-gray-3)"
+    ],
+    "body": "var(--o-gray-3)",
+    "description": "[light: 237, 237, 240, dark: 26, 26, 28]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-4": {
+    "prefix": [
+      "var(--o-gray-4)"
+    ],
+    "body": "var(--o-gray-4)",
+    "description": "[light: 232, 232, 235, dark: 36, 36, 39]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-5": {
+    "prefix": [
+      "var(--o-gray-5)"
+    ],
+    "body": "var(--o-gray-5)",
+    "description": "[light: 222, 222, 227, dark: 43, 43, 47]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-6": {
+    "prefix": [
+      "var(--o-gray-6)"
+    ],
+    "body": "var(--o-gray-6)",
+    "description": "[light: 210, 210, 217, dark: 53, 53, 57]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-7": {
+    "prefix": [
+      "var(--o-gray-7)"
+    ],
+    "body": "var(--o-gray-7)",
+    "description": "[light: 186, 186, 191, dark: 63, 63, 67]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-8": {
+    "prefix": [
+      "var(--o-gray-8)"
+    ],
+    "body": "var(--o-gray-8)",
+    "description": "[light: 149, 149, 156, dark: 85, 85, 88]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-9": {
+    "prefix": [
+      "var(--o-gray-9)"
+    ],
+    "body": "var(--o-gray-9)",
+    "description": "[light: 111, 111, 117, dark: 118, 118, 122]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-10": {
+    "prefix": [
+      "var(--o-gray-10)"
+    ],
+    "body": "var(--o-gray-10)",
+    "description": "[light: 85, 85, 92, dark: 156, 156, 159]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-11": {
+    "prefix": [
+      "var(--o-gray-11)"
+    ],
+    "body": "var(--o-gray-11)",
+    "description": "[light: 61, 61, 66, dark: 181, 181, 185]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-12": {
+    "prefix": [
+      "var(--o-gray-12)"
+    ],
+    "body": "var(--o-gray-12)",
+    "description": "[light: 37, 37, 41, dark: 208, 208, 210]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-13": {
+    "prefix": [
+      "var(--o-gray-13)"
+    ],
+    "body": "var(--o-gray-13)",
+    "description": "[light: 21, 21, 23, dark: 235, 235, 238]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-14": {
+    "prefix": [
+      "var(--o-gray-14)"
+    ],
+    "body": "var(--o-gray-14)",
+    "description": "[light: 0, 0, 0, dark: 255, 255, 255]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-1": {
+    "prefix": [
+      "var(--o-mixedgray-1)"
+    ],
+    "body": "var(--o-mixedgray-1)",
+    "description": "[light: 255, 255, 255, dark: 0, 0, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-2": {
+    "prefix": [
+      "var(--o-mixedgray-2)"
+    ],
+    "body": "var(--o-mixedgray-2)",
+    "description": "[light: 244, 245, 247, dark: 16, 18, 20]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-3": {
+    "prefix": [
+      "var(--o-mixedgray-3)"
+    ],
+    "body": "var(--o-mixedgray-3)",
+    "description": "[light: 237, 239, 242, dark: 23, 25, 28]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-4": {
+    "prefix": [
+      "var(--o-mixedgray-4)"
+    ],
+    "body": "var(--o-mixedgray-4)",
+    "description": "[light: 232, 234, 237, dark: 33, 35, 39]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-5": {
+    "prefix": [
+      "var(--o-mixedgray-5)"
+    ],
+    "body": "var(--o-mixedgray-5)",
+    "description": "[light: 224, 226, 230, dark: 40, 42, 47]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-6": {
+    "prefix": [
+      "var(--o-mixedgray-6)"
+    ],
+    "body": "var(--o-mixedgray-6)",
+    "description": "[light: 209, 214, 219, dark: 50, 53, 57]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-7": {
+    "prefix": [
+      "var(--o-mixedgray-7)"
+    ],
+    "body": "var(--o-mixedgray-7)",
+    "description": "[light: 179, 185, 191, dark: 61, 63, 67]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-8": {
+    "prefix": [
+      "var(--o-mixedgray-8)"
+    ],
+    "body": "var(--o-mixedgray-8)",
+    "description": "[light: 144, 150, 158, dark: 80, 84, 88]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-9": {
+    "prefix": [
+      "var(--o-mixedgray-9)"
+    ],
+    "body": "var(--o-mixedgray-9)",
+    "description": "[light: 104, 109, 117, dark: 113, 117, 122]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-10": {
+    "prefix": [
+      "var(--o-mixedgray-10)"
+    ],
+    "body": "var(--o-mixedgray-10)",
+    "description": "[light: 79, 84, 92, dark: 147, 152, 159]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-11": {
+    "prefix": [
+      "var(--o-mixedgray-11)"
+    ],
+    "body": "var(--o-mixedgray-11)",
+    "description": "[light: 55, 59, 66, dark: 172, 177, 185]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-12": {
+    "prefix": [
+      "var(--o-mixedgray-12)"
+    ],
+    "body": "var(--o-mixedgray-12)",
+    "description": "[light: 32, 35, 41, dark: 198, 202, 210]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-13": {
+    "prefix": [
+      "var(--o-mixedgray-13)"
+    ],
+    "body": "var(--o-mixedgray-13)",
+    "description": "[light: 18, 20, 23, dark: 231, 234, 238]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-14": {
+    "prefix": [
+      "var(--o-mixedgray-14)"
+    ],
+    "body": "var(--o-mixedgray-14)",
+    "description": "[light: 0, 0, 0, dark: 255, 255, 255]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-1": {
+    "prefix": [
+      "var(--o-yellow-1)"
+    ],
+    "body": "var(--o-yellow-1)",
+    "description": "[light: 255, 255, 232, dark: 77, 54, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-2": {
+    "prefix": [
+      "var(--o-yellow-2)"
+    ],
+    "body": "var(--o-yellow-2)",
+    "description": "[light: 253, 251, 185, dark: 119, 87, 2]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-3": {
+    "prefix": [
+      "var(--o-yellow-3)"
+    ],
+    "body": "var(--o-yellow-3)",
+    "description": "[light: 251, 244, 139, dark: 161, 126, 11]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-4": {
+    "prefix": [
+      "var(--o-yellow-4)"
+    ],
+    "body": "var(--o-yellow-4)",
+    "description": "[light: 249, 233, 94, dark: 203, 167, 24]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-5": {
+    "prefix": [
+      "var(--o-yellow-5)"
+    ],
+    "body": "var(--o-yellow-5)",
+    "description": "[light: 247, 221, 49, dark: 245, 211, 42]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-6": {
+    "prefix": [
+      "var(--o-yellow-6)"
+    ],
+    "body": "var(--o-yellow-6)",
+    "description": "[light: 245, 205, 5, dark: 247, 222, 54]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-7": {
+    "prefix": [
+      "var(--o-yellow-7)"
+    ],
+    "body": "var(--o-yellow-7)",
+    "description": "[light: 203, 163, 3, dark: 249, 234, 100]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-8": {
+    "prefix": [
+      "var(--o-yellow-8)"
+    ],
+    "body": "var(--o-yellow-8)",
+    "description": "[light: 161, 124, 2, dark: 251, 244, 146]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-9": {
+    "prefix": [
+      "var(--o-yellow-9)"
+    ],
+    "body": "var(--o-yellow-9)",
+    "description": "[light: 119, 87, 1, dark: 253, 251, 192]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-10": {
+    "prefix": [
+      "var(--o-yellow-10)"
+    ],
+    "body": "var(--o-yellow-10)",
+    "description": "[light: 77, 54, 0, dark: 255, 255, 240]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-1": {
+    "prefix": [
+      "var(--o-lime-1)"
+    ],
+    "body": "var(--o-lime-1)",
+    "description": "[light: 251, 255, 232, dark: 41, 77, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-2": {
+    "prefix": [
+      "var(--o-lime-2)"
+    ],
+    "body": "var(--o-lime-2)",
+    "description": "[light: 233, 245, 184, dark: 63, 109, 3]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-3": {
+    "prefix": [
+      "var(--o-lime-3)"
+    ],
+    "body": "var(--o-lime-3)",
+    "description": "[light: 213, 236, 139, dark: 91, 142, 14]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-4": {
+    "prefix": [
+      "var(--o-lime-4)"
+    ],
+    "body": "var(--o-lime-4)",
+    "description": "[light: 192, 226, 97, dark: 121, 174, 30]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-5": {
+    "prefix": [
+      "var(--o-lime-5)"
+    ],
+    "body": "var(--o-lime-5)",
+    "description": "[light: 169, 217, 59, dark: 155, 207, 50]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-6": {
+    "prefix": [
+      "var(--o-lime-6)"
+    ],
+    "body": "var(--o-lime-6)",
+    "description": "[light: 146, 207, 23, dark: 172, 217, 68]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-7": {
+    "prefix": [
+      "var(--o-lime-7)"
+    ],
+    "body": "var(--o-lime-7)",
+    "description": "[light: 116, 174, 15, dark: 194, 226, 104]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-8": {
+    "prefix": [
+      "var(--o-lime-8)"
+    ],
+    "body": "var(--o-lime-8)",
+    "description": "[light: 88, 142, 8, dark: 214, 236, 144]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-9": {
+    "prefix": [
+      "var(--o-lime-9)"
+    ],
+    "body": "var(--o-lime-9)",
+    "description": "[light: 63, 109, 3, dark: 233, 245, 186]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-10": {
+    "prefix": [
+      "var(--o-lime-10)"
+    ],
+    "body": "var(--o-lime-10)",
+    "description": "[light: 41, 77, 0, dark: 251, 255, 232]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-1": {
+    "prefix": [
+      "var(--o-cyan-1)"
+    ],
+    "body": "var(--o-cyan-1)",
+    "description": "[light: 232, 255, 249, dark: 0, 73, 77]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-2": {
+    "prefix": [
+      "var(--o-cyan-2)"
+    ],
+    "body": "var(--o-cyan-2)",
+    "description": "[light: 176, 240, 226, dark: 2, 101, 103]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-3": {
+    "prefix": [
+      "var(--o-cyan-3)"
+    ],
+    "body": "var(--o-cyan-3)",
+    "description": "[light: 125, 225, 207, dark: 9, 129, 127]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-4": {
+    "prefix": [
+      "var(--o-cyan-4)"
+    ],
+    "body": "var(--o-cyan-4)",
+    "description": "[light: 79, 211, 191, dark: 18, 155, 148]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-5": {
+    "prefix": [
+      "var(--o-cyan-5)"
+    ],
+    "body": "var(--o-cyan-5)",
+    "description": "[light: 38, 196, 177, dark: 30, 181, 167]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-6": {
+    "prefix": [
+      "var(--o-cyan-6)"
+    ],
+    "body": "var(--o-cyan-6)",
+    "description": "[light: 3, 181, 165, dark: 42, 196, 178]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-7": {
+    "prefix": [
+      "var(--o-cyan-7)"
+    ],
+    "body": "var(--o-cyan-7)",
+    "description": "[light: 2, 155, 147, dark: 84, 211, 192]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-8": {
+    "prefix": [
+      "var(--o-cyan-8)"
+    ],
+    "body": "var(--o-cyan-8)",
+    "description": "[light: 1, 129, 127, dark: 130, 225, 208]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-9": {
+    "prefix": [
+      "var(--o-cyan-9)"
+    ],
+    "body": "var(--o-cyan-9)",
+    "description": "[light: 0, 101, 103, dark: 182, 240, 227]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-10": {
+    "prefix": [
+      "var(--o-cyan-10)"
+    ],
+    "body": "var(--o-cyan-10)",
+    "description": "[light: 0, 73, 77, dark: 239, 255, 251]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-1": {
+    "prefix": [
+      "var(--o-blue-1)"
+    ],
+    "body": "var(--o-blue-1)",
+    "description": "[light: 232, 249, 255, dark: 0, 34, 77]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-2": {
+    "prefix": [
+      "var(--o-blue-2)"
+    ],
+    "body": "var(--o-blue-2)",
+    "description": "[light: 185, 233, 252, dark: 1, 57, 117]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-3": {
+    "prefix": [
+      "var(--o-blue-3)"
+    ],
+    "body": "var(--o-blue-3)",
+    "description": "[light: 138, 214, 249, dark: 8, 86, 158]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-4": {
+    "prefix": [
+      "var(--o-blue-4)"
+    ],
+    "body": "var(--o-blue-4)",
+    "description": "[light: 93, 192, 246, dark: 18, 118, 199]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-5": {
+    "prefix": [
+      "var(--o-blue-5)"
+    ],
+    "body": "var(--o-blue-5)",
+    "description": "[light: 48, 168, 243, dark: 31, 153, 240]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-6": {
+    "prefix": [
+      "var(--o-blue-6)"
+    ],
+    "body": "var(--o-blue-6)",
+    "description": "[light: 5, 142, 240, dark: 42, 166, 243]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-7": {
+    "prefix": [
+      "var(--o-blue-7)"
+    ],
+    "body": "var(--o-blue-7)",
+    "description": "[light: 3, 111, 199, dark: 89, 191, 246]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-8": {
+    "prefix": [
+      "var(--o-blue-8)"
+    ],
+    "body": "var(--o-blue-8)",
+    "description": "[light: 2, 83, 158, dark: 137, 214, 249]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-9": {
+    "prefix": [
+      "var(--o-blue-9)"
+    ],
+    "body": "var(--o-blue-9)",
+    "description": "[light: 1, 57, 117, dark: 187, 233, 252]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-10": {
+    "prefix": [
+      "var(--o-blue-10)"
+    ],
+    "body": "var(--o-blue-10)",
+    "description": "[light: 0, 34, 77, dark: 237, 250, 255]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-1": {
+    "prefix": [
+      "var(--o-purple-1)"
+    ],
+    "body": "var(--o-purple-1)",
+    "description": "[light: 245, 232, 255, dark: 22, 0, 77]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-2": {
+    "prefix": [
+      "var(--o-purple-2)"
+    ],
+    "body": "var(--o-purple-2)",
+    "description": "[light: 225, 192, 253, dark: 40, 3, 118]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-3": {
+    "prefix": [
+      "var(--o-purple-3)"
+    ],
+    "body": "var(--o-purple-3)",
+    "description": "[light: 203, 152, 251, dark: 66, 15, 160]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-4": {
+    "prefix": [
+      "var(--o-purple-4)"
+    ],
+    "body": "var(--o-purple-4)",
+    "description": "[light: 178, 113, 248, dark: 98, 33, 202]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-5": {
+    "prefix": [
+      "var(--o-purple-5)"
+    ],
+    "body": "var(--o-purple-5)",
+    "description": "[light: 152, 75, 246, dark: 134, 57, 244]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-6": {
+    "prefix": [
+      "var(--o-purple-6)"
+    ],
+    "body": "var(--o-purple-6)",
+    "description": "[light: 123, 37, 244, dark: 152, 74, 246]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-7": {
+    "prefix": [
+      "var(--o-purple-7)"
+    ],
+    "body": "var(--o-purple-7)",
+    "description": "[light: 92, 23, 202, dark: 179, 114, 248]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-8": {
+    "prefix": [
+      "var(--o-purple-8)"
+    ],
+    "body": "var(--o-purple-8)",
+    "description": "[light: 64, 12, 160, dark: 205, 156, 251]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-9": {
+    "prefix": [
+      "var(--o-purple-9)"
+    ],
+    "body": "var(--o-purple-9)",
+    "description": "[light: 41, 4, 118, dark: 228, 198, 253]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-10": {
+    "prefix": [
+      "var(--o-purple-10)"
+    ],
+    "body": "var(--o-purple-10)",
+    "description": "[light: 22, 0, 77, dark: 249, 240, 255]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-1": {
+    "prefix": [
+      "var(--o-pink-1)"
+    ],
+    "body": "var(--o-pink-1)",
+    "description": "[light: 255, 232, 253, dark: 61, 0, 77]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-2": {
+    "prefix": [
+      "var(--o-pink-2)"
+    ],
+    "body": "var(--o-pink-2)",
+    "description": "[light: 246, 188, 243, dark: 93, 5, 110]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-3": {
+    "prefix": [
+      "var(--o-pink-3)"
+    ],
+    "body": "var(--o-pink-3)",
+    "description": "[light: 238, 146, 235, dark: 127, 16, 144]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-4": {
+    "prefix": [
+      "var(--o-pink-4)"
+    ],
+    "body": "var(--o-pink-4)",
+    "description": "[light: 229, 107, 229, dark: 164, 33, 178]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-5": {
+    "prefix": [
+      "var(--o-pink-5)"
+    ],
+    "body": "var(--o-pink-5)",
+    "description": "[light: 216, 71, 221, dark: 200, 54, 212]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-6": {
+    "prefix": [
+      "var(--o-pink-6)"
+    ],
+    "body": "var(--o-pink-6)",
+    "description": "[light: 199, 37, 212, dark: 216, 72, 221]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-7": {
+    "prefix": [
+      "var(--o-pink-7)"
+    ],
+    "body": "var(--o-pink-7)",
+    "description": "[light: 163, 23, 178, dark: 229, 109, 229]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-8": {
+    "prefix": [
+      "var(--o-pink-8)"
+    ],
+    "body": "var(--o-pink-8)",
+    "description": "[light: 127, 13, 144, dark: 238, 149, 235]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-9": {
+    "prefix": [
+      "var(--o-pink-9)"
+    ],
+    "body": "var(--o-pink-9)",
+    "description": "[light: 93, 5, 110, dark: 246, 191, 243]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-10": {
+    "prefix": [
+      "var(--o-pink-10)"
+    ],
+    "body": "var(--o-pink-10)",
+    "description": "[light: 61, 0, 77, dark: 255, 236, 253]",
+    "scope": "css,scss,less"
+  },
+  "--o-rosyred-1": {
+    "prefix": [
+      "var(--o-rosyred-1)"
+    ],
+    "body": "var(--o-rosyred-1)",
+    "description": "[light: 255, 232, 240, dark: 77, 0, 48]",
+    "scope": "css,scss,less"
+  },
+  "--o-rosyred-2": {
+    "prefix": [
+      "var(--o-rosyred-2)"
+    ],
+    "body": "var(--o-rosyred-2)",
+    "description": "[light: 249, 185, 209, dark: 114, 3, 70]",
+    "scope": "css,scss,less"
+  },
+  "--o-rosyred-3": {
+    "prefix": [
+      "var(--o-rosyred-3)"
+    ],
+    "body": "var(--o-rosyred-3)",
+    "description": "[light: 243, 141, 182, dark: 151, 12, 91]",
+    "scope": "css,scss,less"
+  },
+  "--o-rosyred-4": {
+    "prefix": [
+      "var(--o-rosyred-4)"
+    ],
+    "body": "var(--o-rosyred-4)",
+    "description": "[light: 238, 98, 158, dark: 189, 25, 112]",
+    "scope": "css,scss,less"
+  },
+  "--o-rosyred-5": {
+    "prefix": [
+      "var(--o-rosyred-5)"
+    ],
+    "body": "var(--o-rosyred-5)",
+    "description": "[light: 232, 57, 139, dark: 226, 41, 133]",
+    "scope": "css,scss,less"
+  },
+  "--o-rosyred-6": {
+    "prefix": [
+      "var(--o-rosyred-6)"
+    ],
+    "body": "var(--o-rosyred-6)",
+    "description": "[light: 226, 18, 122, dark: 232, 53, 137]",
+    "scope": "css,scss,less"
+  },
+  "--o-rosyred-7": {
+    "prefix": [
+      "var(--o-rosyred-7)"
+    ],
+    "body": "var(--o-rosyred-7)",
+    "description": "[light: 189, 11, 106, dark: 238, 97, 158]",
+    "scope": "css,scss,less"
+  },
+  "--o-rosyred-8": {
+    "prefix": [
+      "var(--o-rosyred-8)"
+    ],
+    "body": "var(--o-rosyred-8)",
+    "description": "[light: 151, 6, 88, dark: 243, 143, 183]",
+    "scope": "css,scss,less"
+  },
+  "--o-rosyred-9": {
+    "prefix": [
+      "var(--o-rosyred-9)"
+    ],
+    "body": "var(--o-rosyred-9)",
+    "description": "[light: 114, 2, 69, dark: 249, 192, 213]",
+    "scope": "css,scss,less"
+  },
+  "--o-rosyred-10": {
+    "prefix": [
+      "var(--o-rosyred-10)"
+    ],
+    "body": "var(--o-rosyred-10)",
+    "description": "[light: 77, 0, 48, dark: 255, 242, 247]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-white": {
+    "prefix": [
+      "var(--o-color-white)"
+    ],
+    "body": "var(--o-color-white)",
+    "description": "[light: rgb(var(--o-white)), dark: rgb(var(--o-white))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-black": {
+    "prefix": [
+      "var(--o-color-black)"
+    ],
+    "body": "var(--o-color-black)",
+    "description": "[light: rgb(var(--o-black)), dark: rgb(var(--o-black))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary1": {
+    "prefix": [
+      "var(--o-color-primary1)"
+    ],
+    "body": "var(--o-color-primary1)",
+    "description": "常规[light: rgb(var(--o-mixedgray-12)), dark: rgb(var(--o-mixedgray-14))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary2": {
+    "prefix": [
+      "var(--o-color-primary2)"
+    ],
+    "body": "var(--o-color-primary2)",
+    "description": "悬浮[light: rgb(var(--o-mixedgray-11)), dark: rgb(var(--o-mixedgray-13))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary3": {
+    "prefix": [
+      "var(--o-color-primary3)"
+    ],
+    "body": "var(--o-color-primary3)",
+    "description": "激活[light: rgb(var(--o-mixedgray-13)), dark: rgb(var(--o-mixedgray-12))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary4": {
+    "prefix": [
+      "var(--o-color-primary4)"
+    ],
+    "body": "var(--o-color-primary4)",
+    "description": "禁用[light: rgb(var(--o-mixedgray-6)), dark: rgb(var(--o-mixedgray-8))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary1-light": {
+    "prefix": [
+      "var(--o-color-primary1-light)"
+    ],
+    "body": "var(--o-color-primary1-light)",
+    "description": "常规-浅[light: rgb(var(--o-mixedgray-4)), dark: rgb(var(--o-mixedgray-5))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary2-light": {
+    "prefix": [
+      "var(--o-color-primary2-light)"
+    ],
+    "body": "var(--o-color-primary2-light)",
+    "description": "悬浮-浅[light: rgb(var(--o-mixedgray-5)), dark: rgb(var(--o-mixedgray-6))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary3-light": {
+    "prefix": [
+      "var(--o-color-primary3-light)"
+    ],
+    "body": "var(--o-color-primary3-light)",
+    "description": "激活-浅[light: rgb(var(--o-mixedgray-6)), dark: rgb(var(--o-mixedgray-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary4-light": {
+    "prefix": [
+      "var(--o-color-primary4-light)"
+    ],
+    "body": "var(--o-color-primary4-light)",
+    "description": "禁用-浅[light: rgb(var(--o-mixedgray-5)), dark: rgb(var(--o-mixedgray-6))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success1": {
+    "prefix": [
+      "var(--o-color-success1)"
+    ],
+    "body": "var(--o-color-success1)",
+    "description": "常规[light: rgb(var(--o-green-6)), dark: rgb(var(--o-green-6))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success2": {
+    "prefix": [
+      "var(--o-color-success2)"
+    ],
+    "body": "var(--o-color-success2)",
+    "description": "悬浮[light: rgb(var(--o-green-4)), dark: rgb(var(--o-green-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success3": {
+    "prefix": [
+      "var(--o-color-success3)"
+    ],
+    "body": "var(--o-color-success3)",
+    "description": "激活[light: rgb(var(--o-green-7)), dark: rgb(var(--o-green-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success4": {
+    "prefix": [
+      "var(--o-color-success4)"
+    ],
+    "body": "var(--o-color-success4)",
+    "description": "禁用[light: rgb(var(--o-green-3)), dark: rgb(var(--o-green-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success1-light": {
+    "prefix": [
+      "var(--o-color-success1-light)"
+    ],
+    "body": "var(--o-color-success1-light)",
+    "description": "常规-浅[light: rgb(var(--o-green-2)), dark: rgb(var(--o-green-2))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success2-light": {
+    "prefix": [
+      "var(--o-color-success2-light)"
+    ],
+    "body": "var(--o-color-success2-light)",
+    "description": "悬浮-浅[light: rgb(var(--o-green-3)), dark: rgb(var(--o-green-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success3-light": {
+    "prefix": [
+      "var(--o-color-success3-light)"
+    ],
+    "body": "var(--o-color-success3-light)",
+    "description": "激活-浅[light: rgb(var(--o-green-4)), dark: rgb(var(--o-green-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success4-light": {
+    "prefix": [
+      "var(--o-color-success4-light)"
+    ],
+    "body": "var(--o-color-success4-light)",
+    "description": "禁用-浅[light: rgb(var(--o-green-1)), dark: rgb(var(--o-green-1))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning1": {
+    "prefix": [
+      "var(--o-color-warning1)"
+    ],
+    "body": "var(--o-color-warning1)",
+    "description": "常规[light: rgb(var(--o-orange-6)), dark: rgb(var(--o-orange-6))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning2": {
+    "prefix": [
+      "var(--o-color-warning2)"
+    ],
+    "body": "var(--o-color-warning2)",
+    "description": "悬浮[light: rgb(var(--o-orange-4)), dark: rgb(var(--o-orange-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning3": {
+    "prefix": [
+      "var(--o-color-warning3)"
+    ],
+    "body": "var(--o-color-warning3)",
+    "description": "激活[light: rgb(var(--o-orange-7)), dark: rgb(var(--o-orange-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning4": {
+    "prefix": [
+      "var(--o-color-warning4)"
+    ],
+    "body": "var(--o-color-warning4)",
+    "description": "禁用[light: rgb(var(--o-orange-3)), dark: rgb(var(--o-orange-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning1-light": {
+    "prefix": [
+      "var(--o-color-warning1-light)"
+    ],
+    "body": "var(--o-color-warning1-light)",
+    "description": "常规-浅[light: rgb(var(--o-orange-2)), dark: rgb(var(--o-orange-2))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning2-light": {
+    "prefix": [
+      "var(--o-color-warning2-light)"
+    ],
+    "body": "var(--o-color-warning2-light)",
+    "description": "悬浮-浅[light: rgb(var(--o-orange-3)), dark: rgb(var(--o-orange-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning3-light": {
+    "prefix": [
+      "var(--o-color-warning3-light)"
+    ],
+    "body": "var(--o-color-warning3-light)",
+    "description": "激活-浅[light: rgb(var(--o-orange-4)), dark: rgb(var(--o-orange-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning4-light": {
+    "prefix": [
+      "var(--o-color-warning4-light)"
+    ],
+    "body": "var(--o-color-warning4-light)",
+    "description": "禁用-浅[light: rgb(var(--o-orange-1)), dark: rgb(var(--o-orange-1))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger1": {
+    "prefix": [
+      "var(--o-color-danger1)"
+    ],
+    "body": "var(--o-color-danger1)",
+    "description": "常规[light: rgb(var(--o-red-6)), dark: rgb(var(--o-red-6))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger2": {
+    "prefix": [
+      "var(--o-color-danger2)"
+    ],
+    "body": "var(--o-color-danger2)",
+    "description": "悬浮[light: rgb(var(--o-red-4)), dark: rgb(var(--o-red-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger3": {
+    "prefix": [
+      "var(--o-color-danger3)"
+    ],
+    "body": "var(--o-color-danger3)",
+    "description": "激活[light: rgb(var(--o-red-7)), dark: rgb(var(--o-red-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger4": {
+    "prefix": [
+      "var(--o-color-danger4)"
+    ],
+    "body": "var(--o-color-danger4)",
+    "description": "禁用[light: rgb(var(--o-red-3)), dark: rgb(var(--o-red-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger1-light": {
+    "prefix": [
+      "var(--o-color-danger1-light)"
+    ],
+    "body": "var(--o-color-danger1-light)",
+    "description": "常规-浅[light: rgb(var(--o-red-2)), dark: rgb(var(--o-red-2))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger2-light": {
+    "prefix": [
+      "var(--o-color-danger2-light)"
+    ],
+    "body": "var(--o-color-danger2-light)",
+    "description": "悬浮-浅[light: rgb(var(--o-red-3)), dark: rgb(var(--o-red-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger3-light": {
+    "prefix": [
+      "var(--o-color-danger3-light)"
+    ],
+    "body": "var(--o-color-danger3-light)",
+    "description": "激活-浅[light: rgb(var(--o-red-4)), dark: rgb(var(--o-red-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger4-light": {
+    "prefix": [
+      "var(--o-color-danger4-light)"
+    ],
+    "body": "var(--o-color-danger4-light)",
+    "description": "禁用-浅[light: rgb(var(--o-red-1)), dark: rgb(var(--o-red-1))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-fill1": {
+    "prefix": [
+      "var(--o-color-fill1)"
+    ],
+    "body": "var(--o-color-fill1)",
+    "description": "一级填充：页面背景[light: rgb(var(--o-mixedgray-2)), dark: rgb(var(--o-mixedgray-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-fill2": {
+    "prefix": [
+      "var(--o-color-fill2)"
+    ],
+    "body": "var(--o-color-fill2)",
+    "description": "二级填充：区块/卡片[light: rgb(var(--o-mixedgray-1)), dark: rgb(var(--o-mixedgray-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-fill3": {
+    "prefix": [
+      "var(--o-color-fill3)"
+    ],
+    "body": "var(--o-color-fill3)",
+    "description": "三级填充：卡片[light: rgb(var(--o-mixedgray-3)), dark: rgb(var(--o-mixedgray-5))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control1": {
+    "prefix": [
+      "var(--o-color-control1)"
+    ],
+    "body": "var(--o-color-control1)",
+    "description": "常规，常用于边框[light: rgba(var(--o-mixedgray-14), 0.25), dark: rgba(var(--o-mixedgray-14), 0.25)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control2": {
+    "prefix": [
+      "var(--o-color-control2)"
+    ],
+    "body": "var(--o-color-control2)",
+    "description": "悬浮，常用于边框[light: rgba(var(--o-mixedgray-14), 0.6), dark: rgba(var(--o-mixedgray-14), 0.6)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control3": {
+    "prefix": [
+      "var(--o-color-control3)"
+    ],
+    "body": "var(--o-color-control3)",
+    "description": "激活，常用于边框[light: rgba(var(--o-mixedgray-14), 0.8), dark: rgba(var(--o-mixedgray-14), 0.8)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control4": {
+    "prefix": [
+      "var(--o-color-control4)"
+    ],
+    "body": "var(--o-color-control4)",
+    "description": "禁用，常用于边框[light: rgba(var(--o-mixedgray-14), 0.1), dark: rgba(var(--o-mixedgray-14), 0.15)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control1-light": {
+    "prefix": [
+      "var(--o-color-control1-light)"
+    ],
+    "body": "var(--o-color-control1-light)",
+    "description": "常规-浅，常用于背景[light: rgb(var(--o-mixedgray-5)), dark: rgb(var(--o-mixedgray-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control2-light": {
+    "prefix": [
+      "var(--o-color-control2-light)"
+    ],
+    "body": "var(--o-color-control2-light)",
+    "description": "悬浮-浅，常用于背景[light: rgb(var(--o-mixedgray-3)), dark: rgb(var(--o-mixedgray-5))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control3-light": {
+    "prefix": [
+      "var(--o-color-control3-light)"
+    ],
+    "body": "var(--o-color-control3-light)",
+    "description": "激活-浅，常用于背景[light: rgb(var(--o-mixedgray-4)), dark: rgb(var(--o-mixedgray-6))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control4-light": {
+    "prefix": [
+      "var(--o-color-control4-light)"
+    ],
+    "body": "var(--o-color-control4-light)",
+    "description": "禁用-浅，常用于背景[light: rgb(var(--o-mixedgray-3)), dark: rgb(var(--o-mixedgray-5))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control-light": {
+    "prefix": [
+      "var(--o-color-control-light)"
+    ],
+    "body": "var(--o-color-control-light)",
+    "description": "很浅，常用于表格背景色[light: rgb(var(--o-mixedgray-1)), dark: rgb(var(--o-mixedgray-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info1": {
+    "prefix": [
+      "var(--o-color-info1)"
+    ],
+    "body": "var(--o-color-info1)",
+    "description": "一级/强调/标题[light: rgba(var(--o-mixedgray-14), 1.0), dark: rgba(var(--o-mixedgray-14), 1.0)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info2": {
+    "prefix": [
+      "var(--o-color-info2)"
+    ],
+    "body": "var(--o-color-info2)",
+    "description": "二级/次强调/正文[light: rgba(var(--o-mixedgray-14), 0.8), dark: rgba(var(--o-mixedgray-14), 0.8)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info3": {
+    "prefix": [
+      "var(--o-color-info3)"
+    ],
+    "body": "var(--o-color-info3)",
+    "description": "三级/辅助信息[light: rgba(var(--o-mixedgray-14), 0.6), dark: rgba(var(--o-mixedgray-14), 0.6)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info4": {
+    "prefix": [
+      "var(--o-color-info4)"
+    ],
+    "body": "var(--o-color-info4)",
+    "description": "置灰/禁用[light: rgba(var(--o-mixedgray-14), 0.4), dark: rgba(var(--o-mixedgray-14), 0.4)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info1-inverse": {
+    "prefix": [
+      "var(--o-color-info1-inverse)"
+    ],
+    "body": "var(--o-color-info1-inverse)",
+    "description": "一级/次强调/正文反色[light: rgba(var(--o-mixedgray-1), 1.0), dark: rgba(var(--o-mixedgray-1), 1.0)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info2-inverse": {
+    "prefix": [
+      "var(--o-color-info2-inverse)"
+    ],
+    "body": "var(--o-color-info2-inverse)",
+    "description": "二级/辅助信息反色[light: rgba(var(--o-mixedgray-1), 0.8), dark: rgba(var(--o-mixedgray-1), 0.8)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info3-inverse": {
+    "prefix": [
+      "var(--o-color-info3-inverse)"
+    ],
+    "body": "var(--o-color-info3-inverse)",
+    "description": "三级/辅助信息反色[light: rgba(var(--o-mixedgray-1), 0.6), dark: rgba(var(--o-mixedgray-1), 0.6)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info4-inverse": {
+    "prefix": [
+      "var(--o-color-info4-inverse)"
+    ],
+    "body": "var(--o-color-info4-inverse)",
+    "description": "置灰/禁用反色[light: rgba(var(--o-mixedgray-1), 0.4), dark: rgba(var(--o-mixedgray-1), 0.4)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-mask1": {
+    "prefix": [
+      "var(--o-color-mask1)"
+    ],
+    "body": "var(--o-color-mask1)",
+    "description": "全局遮罩[light: rgba(var(--o-mixedgray-14), 0.4), dark: rgba(var(--o-mixedgray-1), 0.4)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-mask2": {
+    "prefix": [
+      "var(--o-color-mask2)"
+    ],
+    "body": "var(--o-color-mask2)",
+    "description": "局部遮罩[light: rgba(var(--o-mixedgray-1), 0.2), dark: rgba(var(--o-mixedgray-4), 0.2)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-link1": {
+    "prefix": [
+      "var(--o-color-link1)"
+    ],
+    "body": "var(--o-color-link1)",
+    "description": "常规[light: rgba(var(--o-deepblue-6), 1.0), dark: rgba(var(--o-deepblue-6), 1.0)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-link2": {
+    "prefix": [
+      "var(--o-color-link2)"
+    ],
+    "body": "var(--o-color-link2)",
+    "description": "悬浮[light: rgba(var(--o-deepblue-6), 0.7), dark: rgba(var(--o-deepblue-6), 0.7)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-link3": {
+    "prefix": [
+      "var(--o-color-link3)"
+    ],
+    "body": "var(--o-color-link3)",
+    "description": "激活[light: rgba(var(--o-deepblue-6), 0.9), dark: rgba(var(--o-deepblue-6), 0.9)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-link4": {
+    "prefix": [
+      "var(--o-color-link4)"
+    ],
+    "body": "var(--o-color-link4)",
+    "description": "禁用[light: rgba(var(--o-deepblue-6), 0.4), dark: rgba(var(--o-deepblue-6), 0.4)]",
+    "scope": "css,scss,less"
+  },
+  "--o-shadow-1": {
+    "prefix": [
+      "var(--o-shadow-1)"
+    ],
+    "body": "var(--o-shadow-1)",
+    "description": "用于卡片、小弹窗、楼层阴影[light: 0 3px 8px rgba(var(--o-mixedgray-13), 0.08), dark: 0 3px 8px rgba(var(--o-mixedgray-1), 0.08)]",
+    "scope": "css,scss,less"
+  },
+  "--o-shadow-2": {
+    "prefix": [
+      "var(--o-shadow-2)"
+    ],
+    "body": "var(--o-shadow-2)",
+    "description": "用于卡片悬浮阴影[light: 0 2px 24px rgba(var(--o-mixedgray-13), 0.15), dark: 0 2px 24px rgba(var(--o-mixedgray-1), 0.15)]",
+    "scope": "css,scss,less"
+  },
+  "--o-shadow-3": {
+    "prefix": [
+      "var(--o-shadow-3)"
+    ],
+    "body": "var(--o-shadow-3)",
+    "description": "用于提示阴影[light: 0 8px 40px rgba(var(--o-mixedgray-13), 0.1), dark: 0 8px 40px rgba(var(--o-mixedgray-1), 0.1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-1": {
+    "prefix": [
+      "var(--o-gap-1)"
+    ],
+    "body": "var(--o-gap-1)",
+    "description": "用于组件之间的间距1[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-2": {
+    "prefix": [
+      "var(--o-gap-2)"
+    ],
+    "body": "var(--o-gap-2)",
+    "description": "用于组件之间的间距2[light: 8px, dark: 8px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-3": {
+    "prefix": [
+      "var(--o-gap-3)"
+    ],
+    "body": "var(--o-gap-3)",
+    "description": "用于组件之间的间距3[light: 12px, dark: 12px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-4": {
+    "prefix": [
+      "var(--o-gap-4)"
+    ],
+    "body": "var(--o-gap-4)",
+    "description": "用于组件之间的间距4[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-5": {
+    "prefix": [
+      "var(--o-gap-5)"
+    ],
+    "body": "var(--o-gap-5)",
+    "description": "用于组件之间的间距5[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-6": {
+    "prefix": [
+      "var(--o-gap-6)"
+    ],
+    "body": "var(--o-gap-6)",
+    "description": "用于组件之间的间距6[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-7": {
+    "prefix": [
+      "var(--o-gap-7)"
+    ],
+    "body": "var(--o-gap-7)",
+    "description": "用于组件之间的间距7[light: 40px, dark: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-8": {
+    "prefix": [
+      "var(--o-gap-8)"
+    ],
+    "body": "var(--o-gap-8)",
+    "description": "用于组件之间的间距8[light: 48px, dark: 48px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-9": {
+    "prefix": [
+      "var(--o-gap-9)"
+    ],
+    "body": "var(--o-gap-9)",
+    "description": "用于组件之间的间距9[light: 64px, dark: 64px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-10": {
+    "prefix": [
+      "var(--o-gap-10)"
+    ],
+    "body": "var(--o-gap-10)",
+    "description": "用于组件之间的间距10[light: 72px, dark: 72px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-2xs": {
+    "prefix": [
+      "var(--o-control_size-2xs)"
+    ],
+    "body": "var(--o-control_size-2xs)",
+    "description": "超小尺寸[light: 14px, dark: 14px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-xs": {
+    "prefix": [
+      "var(--o-control_size-xs)"
+    ],
+    "body": "var(--o-control_size-xs)",
+    "description": "小尺寸[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-s": {
+    "prefix": [
+      "var(--o-control_size-s)"
+    ],
+    "body": "var(--o-control_size-s)",
+    "description": "小尺寸[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-m": {
+    "prefix": [
+      "var(--o-control_size-m)"
+    ],
+    "body": "var(--o-control_size-m)",
+    "description": "尺寸[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-l": {
+    "prefix": [
+      "var(--o-control_size-l)"
+    ],
+    "body": "var(--o-control_size-l)",
+    "description": "尺寸[light: 40px, dark: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-xl": {
+    "prefix": [
+      "var(--o-control_size-xl)"
+    ],
+    "body": "var(--o-control_size-xl)",
+    "description": "尺寸[light: 48px, dark: 48px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-2xl": {
+    "prefix": [
+      "var(--o-control_size-2xl)"
+    ],
+    "body": "var(--o-control_size-2xl)",
+    "description": "尺寸[light: 56px, dark: 56px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-xs": {
+    "prefix": [
+      "var(--o-icon_size-xs)"
+    ],
+    "body": "var(--o-icon_size-xs)",
+    "description": "超小尺寸图标[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-s": {
+    "prefix": [
+      "var(--o-icon_size-s)"
+    ],
+    "body": "var(--o-icon_size-s)",
+    "description": "小尺寸图标[light: 20px, dark: 20px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-m": {
+    "prefix": [
+      "var(--o-icon_size-m)"
+    ],
+    "body": "var(--o-icon_size-m)",
+    "description": "中尺寸图标[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-l": {
+    "prefix": [
+      "var(--o-icon_size-l)"
+    ],
+    "body": "var(--o-icon_size-l)",
+    "description": "大尺寸图标[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-xl": {
+    "prefix": [
+      "var(--o-icon_size-xl)"
+    ],
+    "body": "var(--o-icon_size-xl)",
+    "description": "超大尺寸图标[light: 40px, dark: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-2xl": {
+    "prefix": [
+      "var(--o-icon_size-2xl)"
+    ],
+    "body": "var(--o-icon_size-2xl)",
+    "description": "2xl尺寸图标[light: 48px, dark: 48px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-3xl": {
+    "prefix": [
+      "var(--o-icon_size-3xl)"
+    ],
+    "body": "var(--o-icon_size-3xl)",
+    "description": "3xl尺寸图标[light: 56px, dark: 56px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-4xl": {
+    "prefix": [
+      "var(--o-icon_size-4xl)"
+    ],
+    "body": "var(--o-icon_size-4xl)",
+    "description": "4xl尺寸图标[light: 64px, dark: 64px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size_control-xs": {
+    "prefix": [
+      "var(--o-icon_size_control-xs)"
+    ],
+    "body": "var(--o-icon_size_control-xs)",
+    "description": "超小尺寸控件图标(组件使用)[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size_control-s": {
+    "prefix": [
+      "var(--o-icon_size_control-s)"
+    ],
+    "body": "var(--o-icon_size_control-s)",
+    "description": "小尺寸控件图标(组件使用)[light: 20px, dark: 20px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size_control-m": {
+    "prefix": [
+      "var(--o-icon_size_control-m)"
+    ],
+    "body": "var(--o-icon_size_control-m)",
+    "description": "中尺寸控件图标(组件使用)[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size_control-l": {
+    "prefix": [
+      "var(--o-icon_size_control-l)"
+    ],
+    "body": "var(--o-icon_size_control-l)",
+    "description": "大尺寸控件图标(组件使用)[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size_control-xl": {
+    "prefix": [
+      "var(--o-icon_size_control-xl)"
+    ],
+    "body": "var(--o-icon_size_control-xl)",
+    "description": "超大尺寸控件图标(组件使用)[light: 40px, dark: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-display1": {
+    "prefix": [
+      "var(--o-font_size-display1)"
+    ],
+    "body": "var(--o-font_size-display1)",
+    "description": "一级数据展示[light: 56px, dark: 56px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-display2": {
+    "prefix": [
+      "var(--o-font_size-display2)"
+    ],
+    "body": "var(--o-font_size-display2)",
+    "description": "二级数据展示[light: 48px, dark: 48px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-display3": {
+    "prefix": [
+      "var(--o-font_size-display3)"
+    ],
+    "body": "var(--o-font_size-display3)",
+    "description": "三级数据展示[light: 40px, dark: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h1": {
+    "prefix": [
+      "var(--o-font_size-h1)"
+    ],
+    "body": "var(--o-font_size-h1)",
+    "description": "一级标题[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h2": {
+    "prefix": [
+      "var(--o-font_size-h2)"
+    ],
+    "body": "var(--o-font_size-h2)",
+    "description": "二级标题[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h3": {
+    "prefix": [
+      "var(--o-font_size-h3)"
+    ],
+    "body": "var(--o-font_size-h3)",
+    "description": "三级标题[light: 22px, dark: 22px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h4": {
+    "prefix": [
+      "var(--o-font_size-h4)"
+    ],
+    "body": "var(--o-font_size-h4)",
+    "description": "四级标题[light: 20px, dark: 20px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-text1": {
+    "prefix": [
+      "var(--o-font_size-text1)"
+    ],
+    "body": "var(--o-font_size-text1)",
+    "description": "常规正文[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-text2": {
+    "prefix": [
+      "var(--o-font_size-text2)"
+    ],
+    "body": "var(--o-font_size-text2)",
+    "description": "大号正文[light: 18px, dark: 18px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-tip1": {
+    "prefix": [
+      "var(--o-font_size-tip1)"
+    ],
+    "body": "var(--o-font_size-tip1)",
+    "description": "提示文本1[light: 14px, dark: 14px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-tip2": {
+    "prefix": [
+      "var(--o-font_size-tip2)"
+    ],
+    "body": "var(--o-font_size-tip2)",
+    "description": "提示文本2[light: 12px, dark: 12px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-display1": {
+    "prefix": [
+      "var(--o-line_height-display1)"
+    ],
+    "body": "var(--o-line_height-display1)",
+    "description": "一级数据展示[light: 80px, dark: 80px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-display2": {
+    "prefix": [
+      "var(--o-line_height-display2)"
+    ],
+    "body": "var(--o-line_height-display2)",
+    "description": "二级数据展示[light: 64px, dark: 64px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-display3": {
+    "prefix": [
+      "var(--o-line_height-display3)"
+    ],
+    "body": "var(--o-line_height-display3)",
+    "description": "三级数据展示[light: 56px, dark: 56px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h1": {
+    "prefix": [
+      "var(--o-line_height-h1)"
+    ],
+    "body": "var(--o-line_height-h1)",
+    "description": "一级标题[light: 44px, dark: 44px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h2": {
+    "prefix": [
+      "var(--o-line_height-h2)"
+    ],
+    "body": "var(--o-line_height-h2)",
+    "description": "二级标题[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h3": {
+    "prefix": [
+      "var(--o-line_height-h3)"
+    ],
+    "body": "var(--o-line_height-h3)",
+    "description": "三级标题[light: 30px, dark: 30px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h4": {
+    "prefix": [
+      "var(--o-line_height-h4)"
+    ],
+    "body": "var(--o-line_height-h4)",
+    "description": "四级标题[light: 28px, dark: 28px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-text1": {
+    "prefix": [
+      "var(--o-line_height-text1)"
+    ],
+    "body": "var(--o-line_height-text1)",
+    "description": "正文[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-text2": {
+    "prefix": [
+      "var(--o-line_height-text2)"
+    ],
+    "body": "var(--o-line_height-text2)",
+    "description": "正文-大[light: 26px, dark: 26x]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-tip1": {
+    "prefix": [
+      "var(--o-line_height-tip1)"
+    ],
+    "body": "var(--o-line_height-tip1)",
+    "description": "提示文本1[light: 22px, dark: 22px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-tip2": {
+    "prefix": [
+      "var(--o-line_height-tip2)"
+    ],
+    "body": "var(--o-line_height-tip2)",
+    "description": "提示文本2[light: 18px, dark: 18px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-xs": {
+    "prefix": [
+      "var(--o-radius-xs)"
+    ],
+    "body": "var(--o-radius-xs)",
+    "description": "超小尺寸圆角[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-s": {
+    "prefix": [
+      "var(--o-radius-s)"
+    ],
+    "body": "var(--o-radius-s)",
+    "description": "小尺寸圆角[light: 8px, dark: 8px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-m": {
+    "prefix": [
+      "var(--o-radius-m)"
+    ],
+    "body": "var(--o-radius-m)",
+    "description": "中尺寸圆角[light: 12px, dark: 12px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-l": {
+    "prefix": [
+      "var(--o-radius-l)"
+    ],
+    "body": "var(--o-radius-l)",
+    "description": "大尺寸圆角[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-xl": {
+    "prefix": [
+      "var(--o-radius-xl)"
+    ],
+    "body": "var(--o-radius-xl)",
+    "description": "大尺寸圆角,一般用于卡片[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius_control-xs": {
+    "prefix": [
+      "var(--o-radius_control-xs)"
+    ],
+    "body": "var(--o-radius_control-xs)",
+    "description": "超小尺寸控件圆角(组件使用)[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius_control-s": {
+    "prefix": [
+      "var(--o-radius_control-s)"
+    ],
+    "body": "var(--o-radius_control-s)",
+    "description": "小尺寸控件圆角(组件使用)[light: 8px, dark: 8px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius_control-m": {
+    "prefix": [
+      "var(--o-radius_control-m)"
+    ],
+    "body": "var(--o-radius_control-m)",
+    "description": "中尺寸控件圆角(组件使用)[light: 12px, dark: 12px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius_control-l": {
+    "prefix": [
+      "var(--o-radius_control-l)"
+    ],
+    "body": "var(--o-radius_control-l)",
+    "description": "大尺寸控件圆角(组件使用)[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-s": {
+    "prefix": [
+      "var(--o-duration-s)"
+    ],
+    "body": "var(--o-duration-s)",
+    "description": "用于退出屏幕的动画[light: 200ms, dark: 200ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-m1": {
+    "prefix": [
+      "var(--o-duration-m1)"
+    ],
+    "body": "var(--o-duration-m1)",
+    "description": "用于当曲线为standard-in时进入屏幕的动画[light: 250ms, dark: 250ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-m2": {
+    "prefix": [
+      "var(--o-duration-m2)"
+    ],
+    "body": "var(--o-duration-m2)",
+    "description": "用于当曲线为standard时开始、结束的动画[light: 300ms, dark: 300ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-m3": {
+    "prefix": [
+      "var(--o-duration-m3)"
+    ],
+    "body": "var(--o-duration-m3)",
+    "description": "用于当曲线为emphasized-in时进入屏幕的动画[light: 400ms, dark: 400ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-l": {
+    "prefix": [
+      "var(--o-duration-l)"
+    ],
+    "body": "var(--o-duration-l)",
+    "description": "用于当曲线为emphasized时开始、结束的动画[light: 500ms, dark: 500ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-xl": {
+    "prefix": [
+      "var(--o-duration-xl)"
+    ],
+    "body": "var(--o-duration-xl)",
+    "description": "用于当曲线为emphasized时，轮播切换动画[light: 1000ms, dark: 1000ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-linear": {
+    "prefix": [
+      "var(--o-easing-linear)"
+    ],
+    "body": "var(--o-easing-linear)",
+    "description": "线性曲线[light: cubic-bezier(0, 0, 1, 1), dark: cubic-bezier(0, 0, 1, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-standard": {
+    "prefix": [
+      "var(--o-easing-standard)"
+    ],
+    "body": "var(--o-easing-standard)",
+    "description": "用于组件[light: cubic-bezier(0.2, 0, 0, 1), dark: cubic-bezier(0.2, 0, 0, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-standard-in": {
+    "prefix": [
+      "var(--o-easing-standard-in)"
+    ],
+    "body": "var(--o-easing-standard-in)",
+    "description": "用于组件[light: cubic-bezier(0, 0, 0, 1), dark: cubic-bezier(0, 0, 0, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-standard-out": {
+    "prefix": [
+      "var(--o-easing-standard-out)"
+    ],
+    "body": "var(--o-easing-standard-out)",
+    "description": "用于组件[light: cubic-bezier(0.3, 0, 1, 1), dark: cubic-bezier(0.3, 0, 1, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-emphasized": {
+    "prefix": [
+      "var(--o-easing-emphasized)"
+    ],
+    "body": "var(--o-easing-emphasized)",
+    "description": "用于大卡片、场景切换[light: cubic-bezier(0.2, 0, 0, 1), dark: cubic-bezier(0.2, 0, 0, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-emphasized-in": {
+    "prefix": [
+      "var(--o-easing-emphasized-in)"
+    ],
+    "body": "var(--o-easing-emphasized-in)",
+    "description": "用于大卡片、场景切换[light: cubic-bezier(0.3, 0, 0.8, 0.15), dark: cubic-bezier(0.3, 0, 0.8, 0.15)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-emphasized-out": {
+    "prefix": [
+      "var(--o-easing-emphasized-out)"
+    ],
+    "body": "var(--o-easing-emphasized-out)",
+    "description": "用于大卡片、场景切换[light: cubic-bezier(0.05, 0.7, 0.1, 1), dark: cubic-bezier(0.05, 0.7, 0.1, 1)]",
+    "scope": "css,scss,less"
+  }
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/theme/ascend/base.scss b/packages/opendesign/src/theme/ascend/base.scss
new file mode 100644
index 0000000000000000000000000000000000000000..20c3df2eb1d8e2fd3688fe92528ae8cb748610df
--- /dev/null
+++ b/packages/opendesign/src/theme/ascend/base.scss
@@ -0,0 +1,13 @@
+[class^='c-'],
+[class*=' c-'] {
+  box-sizing: border-box;
+}
+
+[data-o-theme='a.light'] {
+  --ak-color-band-start: 46, 83, 250;
+  --ak-color-band-end: 123, 37, 244;
+}
+[data-o-theme='a.dark'] {
+  --ak-color-band-start: 84, 120, 251;
+  --ak-color-band-end: 152, 74, 246;
+}
diff --git a/packages/opendesign/src/theme/ascend/index.scss b/packages/opendesign/src/theme/ascend/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..90e2972d8788cda308de9f0634b7964bc6f4c474
--- /dev/null
+++ b/packages/opendesign/src/theme/ascend/index.scss
@@ -0,0 +1,53 @@
+// 变量
+@use './a.dark.token.css' as *;
+@use './a.light.token.css' as *;
+@use '../common.scss' as *;
+// 样式
+@use './base.scss' as *;
+@use '../../index.scss' as *;
+
+// 皮肤
+@use '../../anchor/style/theme-ascend.scss' as *;
+@use '../../badge/style/theme-ascend.scss' as *;
+@use '../../breadcrumb/style/theme-ascend.scss' as *;
+@use '../../button/style/theme-ascend.scss' as *;
+@use '../../card/style/theme-ascend.scss' as *;
+@use '../../carousel/style/theme-ascend.scss' as *;
+@use '../../cascader/style/theme-ascend.scss' as *;
+@use '../../checkbox/style/theme-ascend.scss' as *;
+@use '../../checkbox-group/style/theme-ascend.scss' as *;
+@use '../../collapse/style/theme-ascend.scss' as *;
+@use '../../dialog/style/theme-ascend.scss' as *;
+@use '../../divider/style/theme-ascend.scss' as *;
+@use '../../dropdown/style/theme-ascend.scss' as *;
+@use '../../figure/style/theme-ascend.scss' as *;
+@use '../../form/style/theme-ascend.scss' as *;
+@use '../../grid/style/theme-ascend.scss' as *;
+@use '../../icon/style/theme-ascend.scss' as *;
+@use '../../input/style/theme-ascend.scss' as *;
+@use '../../input-number/style/theme-ascend.scss' as *;
+@use '../../layer/style/theme-ascend.scss' as *;
+@use '../../link/style/theme-ascend.scss' as *;
+@use '../../loading/style/theme-ascend.scss' as *;
+@use '../../menu/style/theme-ascend.scss' as *;
+@use '../../message/style/theme-ascend.scss' as *;
+@use '../../option/style/theme-ascend.scss' as *;
+@use '../../pagination/style/theme-ascend.scss' as *;
+@use '../../popover/style/theme-ascend.scss' as *;
+@use '../../popup/style/theme-ascend.scss' as *;
+@use '../../progress/style/theme-ascend.scss' as *;
+@use '../../radio/style/theme-ascend.scss' as *;
+@use '../../radio-group/style/theme-ascend.scss' as *;
+@use '../../rate/style/theme-ascend.scss' as *;
+@use '../../result/style/theme-ascend.scss' as *;
+@use '../../scrollbar/style/theme-ascend.scss' as *;
+@use '../../select/style/theme-ascend.scss' as *;
+@use '../../skeleton/style/theme-ascend.scss' as *;
+@use '../../switch/style/theme-ascend.scss' as *;
+@use '../../tab/style/theme-ascend.scss' as *;
+@use '../../table/style/theme-ascend.scss' as *;
+@use '../../tag/style/theme-ascend.scss' as *;
+@use '../../textarea/style/theme-ascend.scss' as *;
+@use '../../toggle/style/theme-ascend.scss' as *;
+@use '../../upload/style/theme-ascend.scss' as *;
+@use '../../virtual-list/style/theme-ascend.scss' as *;
diff --git a/packages/opendesign/src/theme/ascend/token.config.ts b/packages/opendesign/src/theme/ascend/token.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1a6a6e56b88fb1a6c7f3c087bf9ea840e16fd719
--- /dev/null
+++ b/packages/opendesign/src/theme/ascend/token.config.ts
@@ -0,0 +1,16 @@
+module.exports = {
+  prefix: '--o-',
+  themeMap: [
+    {
+      key: 'light',
+      name: 'a.light',
+    },
+    {
+      key: 'dark',
+      name: 'a.dark',
+    },
+  ],
+  defaultTheme: '',
+  tokenFile: ['./token.json'],
+  codeSnippetsFile: './a.token.code-snippets',
+};
diff --git a/packages/opendesign/src/theme/ascend/token.json b/packages/opendesign/src/theme/ascend/token.json
new file mode 100644
index 0000000000000000000000000000000000000000..30ca0270e6bb65836614ad0bd1809e1474820f91
--- /dev/null
+++ b/packages/opendesign/src/theme/ascend/token.json
@@ -0,0 +1,2428 @@
+{
+  "white": {
+    "name": "白色",
+    "type": "palette",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "white",
+        "value": {
+          "light": "255, 255, 255",
+          "dark": "255, 255, 255"
+        }
+      }
+    ]
+  },
+  "black": {
+    "name": "黑色",
+    "type": "palette",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "black",
+        "value": {
+          "light": "0, 0, 0",
+          "dark": "0, 0, 0"
+        }
+      }
+    ]
+  },
+  "deepblue": {
+    "name": "深蓝色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "deepblue-1",
+        "value": {
+          "light": "232, 240, 255",
+          "dark": "0, 4, 77"
+        }
+      },
+      {
+        "key": "deepblue-2",
+        "value": {
+          "light": "194, 213, 254",
+          "dark": "6, 15, 120"
+        }
+      },
+      {
+        "key": "deepblue-3",
+        "value": {
+          "light": "157, 184, 253",
+          "dark": "20, 37, 163"
+        }
+      },
+      {
+        "key": "deepblue-4",
+        "value": {
+          "light": "120, 153, 252",
+          "dark": "40, 65, 207"
+        }
+      },
+      {
+        "key": "deepblue-5",
+        "value": {
+          "light": "83, 119, 251",
+          "dark": "66, 99, 250"
+        }
+      },
+      {
+        "key": "deepblue-6",
+        "value": {
+          "light": "46, 83, 250",
+          "dark": "84, 120, 251"
+        }
+      },
+      {
+        "key": "deepblue-7",
+        "value": {
+          "light": "29, 55, 207",
+          "dark": "122, 154, 252"
+        }
+      },
+      {
+        "key": "deepblue-8",
+        "value": {
+          "light": "15, 32, 163",
+          "dark": "160, 186, 253"
+        }
+      },
+      {
+        "key": "deepblue-9",
+        "value": {
+          "light": "6, 15, 120",
+          "dark": "199, 217, 254"
+        }
+      },
+      {
+        "key": "deepblue-10",
+        "value": {
+          "light": "0, 4, 77",
+          "dark": "238, 244, 255"
+        }
+      }
+    ]
+  },
+  "green": {
+    "name": "绿色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "green-1",
+        "value": {
+          "light": "232, 255, 238",
+          "dark": "0, 77, 42"
+        }
+      },
+      {
+        "key": "green-2",
+        "value": {
+          "light": "177, 239, 195",
+          "dark": "2, 102, 53"
+        }
+      },
+      {
+        "key": "green-3",
+        "value": {
+          "light": "128, 224, 158",
+          "dark": "10, 127, 66"
+        }
+      },
+      {
+        "key": "green-4",
+        "value": {
+          "light": "84, 208, 127",
+          "dark": "22, 152, 80"
+        }
+      },
+      {
+        "key": "green-5",
+        "value": {
+          "light": "45, 193, 101",
+          "dark": "36, 177, 95"
+        }
+      },
+      {
+        "key": "green-6",
+        "value": {
+          "light": "11, 177, 81",
+          "dark": "51, 193, 104"
+        }
+      },
+      {
+        "key": "green-7",
+        "value": {
+          "light": "7, 152, 72",
+          "dark": "90, 208, 131"
+        }
+      },
+      {
+        "key": "green-8",
+        "value": {
+          "light": "4, 127, 63",
+          "dark": "135, 224, 163"
+        }
+      },
+      {
+        "key": "green-9",
+        "value": {
+          "light": "2, 102, 53",
+          "dark": "185, 239, 200"
+        }
+      },
+      {
+        "key": "green-10",
+        "value": {
+          "light": "0, 77, 42",
+          "dark": "240, 255, 244"
+        }
+      }
+    ]
+  },
+  "orange": {
+    "name": "橘红色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "orange-1",
+        "value": {
+          "light": "255, 246, 232",
+          "dark": "77, 24, 0"
+        }
+      },
+      {
+        "key": "orange-2",
+        "value": {
+          "light": "254, 226, 186",
+          "dark": "120, 42, 1"
+        }
+      },
+      {
+        "key": "orange-3",
+        "value": {
+          "light": "253, 202, 140",
+          "dark": "163, 68, 8"
+        }
+      },
+      {
+        "key": "orange-4",
+        "value": {
+          "light": "252, 176, 95",
+          "dark": "207, 97, 19"
+        }
+      },
+      {
+        "key": "orange-5",
+        "value": {
+          "light": "251, 147, 50",
+          "dark": "250, 130, 33"
+        }
+      },
+      {
+        "key": "orange-6",
+        "value": {
+          "light": "250, 115, 5",
+          "dark": "251, 143, 43"
+        }
+      },
+      {
+        "key": "orange-7",
+        "value": {
+          "light": "207, 88, 3",
+          "dark": "252, 174, 91"
+        }
+      },
+      {
+        "key": "orange-8",
+        "value": {
+          "light": "163, 64, 2",
+          "dark": "253, 202, 139"
+        }
+      },
+      {
+        "key": "orange-9",
+        "value": {
+          "light": "120, 42, 1",
+          "dark": "254, 227, 188"
+        }
+      },
+      {
+        "key": "orange-10",
+        "value": {
+          "light": "77, 24, 0",
+          "dark": "255, 248, 237"
+        }
+      }
+    ]
+  },
+  "red": {
+    "name": "红色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "red-1",
+        "value": {
+          "light": "255, 234, 232",
+          "dark": "77, 0, 17"
+        }
+      },
+      {
+        "key": "red-2",
+        "value": {
+          "light": "250, 185, 182",
+          "dark": "115, 3, 24"
+        }
+      },
+      {
+        "key": "red-3",
+        "value": {
+          "light": "245, 136, 134",
+          "dark": "153, 9, 31"
+        }
+      },
+      {
+        "key": "red-4",
+        "value": {
+          "light": "240, 87, 90",
+          "dark": "192, 17, 37"
+        }
+      },
+      {
+        "key": "red-5",
+        "value": {
+          "light": "235, 43, 52",
+          "dark": "230, 28, 43"
+        }
+      },
+      {
+        "key": "red-6",
+        "value": {
+          "light": "230, 0, 18",
+          "dark": "235, 35, 45"
+        }
+      },
+      {
+        "key": "red-7",
+        "value": {
+          "light": "192, 0, 22",
+          "dark": "240, 82, 85"
+        }
+      },
+      {
+        "key": "red-8",
+        "value": {
+          "light": "153, 0, 23",
+          "dark": "245, 132, 130"
+        }
+      },
+      {
+        "key": "red-9",
+        "value": {
+          "light": "115, 0, 21",
+          "dark": "250, 183, 180"
+        }
+      },
+      {
+        "key": "red-10",
+        "value": {
+          "light": "77, 0, 17",
+          "dark": "255, 234, 232"
+        }
+      }
+    ]
+  },
+  "huaweired": {
+    "name": "华为红",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "red-huawei",
+        "value": {
+          "light": "199, 0, 11",
+          "dark": "199, 0, 11"
+        }
+      }
+    ]
+  },
+  "gray": {
+    "name": "中性灰",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "gray-1",
+        "value": {
+          "light": "255, 255, 255",
+          "dark": "0, 0, 0"
+        }
+      },
+      {
+        "key": "gray-2",
+        "value": {
+          "light": "243, 243, 245",
+          "dark": "18, 18, 20"
+        }
+      },
+      {
+        "key": "gray-3",
+        "value": {
+          "light": "237, 237, 240",
+          "dark": "26, 26, 28"
+        }
+      },
+      {
+        "key": "gray-4",
+        "value": {
+          "light": "232, 232, 235",
+          "dark": "36, 36, 39"
+        }
+      },
+      {
+        "key": "gray-5",
+        "value": {
+          "light": "222, 222, 227",
+          "dark": "43, 43, 47"
+        }
+      },
+      {
+        "key": "gray-6",
+        "value": {
+          "light": "210, 210, 217",
+          "dark": "53, 53, 57"
+        }
+      },
+      {
+        "key": "gray-7",
+        "value": {
+          "light": "186, 186, 191",
+          "dark": "63, 63, 67"
+        }
+      },
+      {
+        "key": "gray-8",
+        "value": {
+          "light": "149, 149, 156",
+          "dark": "85, 85, 88"
+        }
+      },
+      {
+        "key": "gray-9",
+        "value": {
+          "light": "111, 111, 117",
+          "dark": "118, 118, 122"
+        }
+      },
+      {
+        "key": "gray-10",
+        "value": {
+          "light": "85, 85, 92",
+          "dark": "156, 156, 159"
+        }
+      },
+      {
+        "key": "gray-11",
+        "value": {
+          "light": "61, 61, 66",
+          "dark": "181, 181, 185"
+        }
+      },
+      {
+        "key": "gray-12",
+        "value": {
+          "light": "37, 37, 41",
+          "dark": "208, 208, 210"
+        }
+      },
+      {
+        "key": "gray-13",
+        "value": {
+          "light": "21, 21, 23",
+          "dark": "235, 235, 238"
+        }
+      },
+      {
+        "key": "gray-14",
+        "value": {
+          "light": "0, 0, 0",
+          "dark": "255, 255, 255"
+        }
+      }
+    ]
+  },
+  "mixedgray": {
+    "name": "混合中性色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "mixedgray-1",
+        "value": {
+          "light": "255, 255, 255",
+          "dark": "0, 0, 0"
+        }
+      },
+      {
+        "key": "mixedgray-2",
+        "value": {
+          "light": "244, 245, 247",
+          "dark": "16, 18, 20"
+        }
+      },
+      {
+        "key": "mixedgray-3",
+        "value": {
+          "light": "237, 239, 242",
+          "dark": "23, 25, 28"
+        }
+      },
+      {
+        "key": "mixedgray-4",
+        "value": {
+          "light": "232, 234, 237",
+          "dark": "33, 35, 39"
+        }
+      },
+      {
+        "key": "mixedgray-5",
+        "value": {
+          "light": "224, 226, 230",
+          "dark": "40, 42, 47"
+        }
+      },
+      {
+        "key": "mixedgray-6",
+        "value": {
+          "light": "209, 214, 219",
+          "dark": "50, 53, 57"
+        }
+      },
+      {
+        "key": "mixedgray-7",
+        "value": {
+          "light": "179, 185, 191",
+          "dark": "61, 63, 67"
+        }
+      },
+      {
+        "key": "mixedgray-8",
+        "value": {
+          "light": "144, 150, 158",
+          "dark": "80, 84, 88"
+        }
+      },
+      {
+        "key": "mixedgray-9",
+        "value": {
+          "light": "104, 109, 117",
+          "dark": "113, 117, 122"
+        }
+      },
+      {
+        "key": "mixedgray-10",
+        "value": {
+          "light": "79, 84, 92",
+          "dark": "147, 152, 159"
+        }
+      },
+      {
+        "key": "mixedgray-11",
+        "value": {
+          "light": "55, 59, 66",
+          "dark": "172, 177, 185"
+        }
+      },
+      {
+        "key": "mixedgray-12",
+        "value": {
+          "light": "32, 35, 41",
+          "dark": "198, 202, 210"
+        }
+      },
+      {
+        "key": "mixedgray-13",
+        "value": {
+          "light": "18, 20, 23",
+          "dark": "231, 234, 238"
+        }
+      },
+      {
+        "key": "mixedgray-14",
+        "value": {
+          "light": "0, 0, 0",
+          "dark": "255, 255, 255"
+        }
+      }
+    ]
+  },
+  "yellow": {
+    "name": "黄色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "yellow-1",
+        "value": {
+          "light": "255, 255, 232",
+          "dark": "77, 54, 0"
+        }
+      },
+      {
+        "key": "yellow-2",
+        "value": {
+          "light": "253, 251, 185",
+          "dark": "119, 87, 2"
+        }
+      },
+      {
+        "key": "yellow-3",
+        "value": {
+          "light": "251, 244, 139",
+          "dark": "161, 126, 11"
+        }
+      },
+      {
+        "key": "yellow-4",
+        "value": {
+          "light": "249, 233, 94",
+          "dark": "203, 167, 24"
+        }
+      },
+      {
+        "key": "yellow-5",
+        "value": {
+          "light": "247, 221, 49",
+          "dark": "245, 211, 42"
+        }
+      },
+      {
+        "key": "yellow-6",
+        "value": {
+          "light": "245, 205, 5",
+          "dark": "247, 222, 54"
+        }
+      },
+      {
+        "key": "yellow-7",
+        "value": {
+          "light": "203, 163, 3",
+          "dark": "249, 234, 100"
+        }
+      },
+      {
+        "key": "yellow-8",
+        "value": {
+          "light": "161, 124, 2",
+          "dark": "251, 244, 146"
+        }
+      },
+      {
+        "key": "yellow-9",
+        "value": {
+          "light": "119, 87, 1",
+          "dark": "253, 251, 192"
+        }
+      },
+      {
+        "key": "yellow-10",
+        "value": {
+          "light": "77, 54, 0",
+          "dark": "255, 255, 240"
+        }
+      }
+    ]
+  },
+  "lime": {
+    "name": "黄绿色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "lime-1",
+        "value": {
+          "light": "251, 255, 232",
+          "dark": "41, 77, 0"
+        }
+      },
+      {
+        "key": "lime-2",
+        "value": {
+          "light": "233, 245, 184",
+          "dark": "63, 109, 3"
+        }
+      },
+      {
+        "key": "lime-3",
+        "value": {
+          "light": "213, 236, 139",
+          "dark": "91, 142, 14"
+        }
+      },
+      {
+        "key": "lime-4",
+        "value": {
+          "light": "192, 226, 97",
+          "dark": "121, 174, 30"
+        }
+      },
+      {
+        "key": "lime-5",
+        "value": {
+          "light": "169, 217, 59",
+          "dark": "155, 207, 50"
+        }
+      },
+      {
+        "key": "lime-6",
+        "value": {
+          "light": "146, 207, 23",
+          "dark": "172, 217, 68"
+        }
+      },
+      {
+        "key": "lime-7",
+        "value": {
+          "light": "116, 174, 15",
+          "dark": "194, 226, 104"
+        }
+      },
+      {
+        "key": "lime-8",
+        "value": {
+          "light": "88, 142, 8",
+          "dark": "214, 236, 144"
+        }
+      },
+      {
+        "key": "lime-9",
+        "value": {
+          "light": "63, 109, 3",
+          "dark": "233, 245, 186"
+        }
+      },
+      {
+        "key": "lime-10",
+        "value": {
+          "light": "41, 77, 0",
+          "dark": "251, 255, 232"
+        }
+      }
+    ]
+  },
+  "cyan": {
+    "name": "青色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "cyan-1",
+        "value": {
+          "light": "232, 255, 249",
+          "dark": "0, 73, 77"
+        }
+      },
+      {
+        "key": "cyan-2",
+        "value": {
+          "light": "176, 240, 226",
+          "dark": "2, 101, 103"
+        }
+      },
+      {
+        "key": "cyan-3",
+        "value": {
+          "light": "125, 225, 207",
+          "dark": "9, 129, 127"
+        }
+      },
+      {
+        "key": "cyan-4",
+        "value": {
+          "light": "79, 211, 191",
+          "dark": "18, 155, 148"
+        }
+      },
+      {
+        "key": "cyan-5",
+        "value": {
+          "light": "38, 196, 177",
+          "dark": "30, 181, 167"
+        }
+      },
+      {
+        "key": "cyan-6",
+        "value": {
+          "light": "3, 181, 165",
+          "dark": "42, 196, 178"
+        }
+      },
+      {
+        "key": "cyan-7",
+        "value": {
+          "light": "2, 155, 147",
+          "dark": "84, 211, 192"
+        }
+      },
+      {
+        "key": "cyan-8",
+        "value": {
+          "light": "1, 129, 127",
+          "dark": "130, 225, 208"
+        }
+      },
+      {
+        "key": "cyan-9",
+        "value": {
+          "light": "0, 101, 103",
+          "dark": "182, 240, 227"
+        }
+      },
+      {
+        "key": "cyan-10",
+        "value": {
+          "light": "0, 73, 77",
+          "dark": "239, 255, 251"
+        }
+      }
+    ]
+  },
+  "blue": {
+    "name": "蓝色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "blue-1",
+        "value": {
+          "light": "232, 249, 255",
+          "dark": "0, 34, 77"
+        }
+      },
+      {
+        "key": "blue-2",
+        "value": {
+          "light": "185, 233, 252",
+          "dark": "1, 57, 117"
+        }
+      },
+      {
+        "key": "blue-3",
+        "value": {
+          "light": "138, 214, 249",
+          "dark": "8, 86, 158"
+        }
+      },
+      {
+        "key": "blue-4",
+        "value": {
+          "light": "93, 192, 246",
+          "dark": "18, 118, 199"
+        }
+      },
+      {
+        "key": "blue-5",
+        "value": {
+          "light": "48, 168, 243",
+          "dark": "31, 153, 240"
+        }
+      },
+      {
+        "key": "blue-6",
+        "value": {
+          "light": "5, 142, 240",
+          "dark": "42, 166, 243"
+        }
+      },
+      {
+        "key": "blue-7",
+        "value": {
+          "light": "3, 111, 199",
+          "dark": "89, 191, 246"
+        }
+      },
+      {
+        "key": "blue-8",
+        "value": {
+          "light": "2, 83, 158",
+          "dark": "137, 214, 249"
+        }
+      },
+      {
+        "key": "blue-9",
+        "value": {
+          "light": "1, 57, 117",
+          "dark": "187, 233, 252"
+        }
+      },
+      {
+        "key": "blue-10",
+        "value": {
+          "light": "0, 34, 77",
+          "dark": "237, 250, 255"
+        }
+      }
+    ]
+  },
+  "purple": {
+    "name": "紫色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "purple-1",
+        "value": {
+          "light": "245, 232, 255",
+          "dark": "22, 0, 77"
+        }
+      },
+      {
+        "key": "purple-2",
+        "value": {
+          "light": "225, 192, 253",
+          "dark": "40, 3, 118"
+        }
+      },
+      {
+        "key": "purple-3",
+        "value": {
+          "light": "203, 152, 251",
+          "dark": "66, 15, 160"
+        }
+      },
+      {
+        "key": "purple-4",
+        "value": {
+          "light": "178, 113, 248",
+          "dark": "98, 33, 202"
+        }
+      },
+      {
+        "key": "purple-5",
+        "value": {
+          "light": "152, 75, 246",
+          "dark": "134, 57, 244"
+        }
+      },
+      {
+        "key": "purple-6",
+        "value": {
+          "light": "123, 37, 244",
+          "dark": "152, 74, 246"
+        }
+      },
+      {
+        "key": "purple-7",
+        "value": {
+          "light": "92, 23, 202",
+          "dark": "179, 114, 248"
+        }
+      },
+      {
+        "key": "purple-8",
+        "value": {
+          "light": "64, 12, 160",
+          "dark": "205, 156, 251"
+        }
+      },
+      {
+        "key": "purple-9",
+        "value": {
+          "light": "41, 4, 118",
+          "dark": "228, 198, 253"
+        }
+      },
+      {
+        "key": "purple-10",
+        "value": {
+          "light": "22, 0, 77",
+          "dark": "249, 240, 255"
+        }
+      }
+    ]
+  },
+  "pink": {
+    "name": "粉色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "pink-1",
+        "value": {
+          "light": "255, 232, 253",
+          "dark": "61, 0, 77"
+        }
+      },
+      {
+        "key": "pink-2",
+        "value": {
+          "light": "246, 188, 243",
+          "dark": "93, 5, 110"
+        }
+      },
+      {
+        "key": "pink-3",
+        "value": {
+          "light": "238, 146, 235",
+          "dark": "127, 16, 144"
+        }
+      },
+      {
+        "key": "pink-4",
+        "value": {
+          "light": "229, 107, 229",
+          "dark": "164, 33, 178"
+        }
+      },
+      {
+        "key": "pink-5",
+        "value": {
+          "light": "216, 71, 221",
+          "dark": "200, 54, 212"
+        }
+      },
+      {
+        "key": "pink-6",
+        "value": {
+          "light": "199, 37, 212",
+          "dark": "216, 72, 221"
+        }
+      },
+      {
+        "key": "pink-7",
+        "value": {
+          "light": "163, 23, 178",
+          "dark": "229, 109, 229"
+        }
+      },
+      {
+        "key": "pink-8",
+        "value": {
+          "light": "127, 13, 144",
+          "dark": "238, 149, 235"
+        }
+      },
+      {
+        "key": "pink-9",
+        "value": {
+          "light": "93, 5, 110",
+          "dark": "246, 191, 243"
+        }
+      },
+      {
+        "key": "pink-10",
+        "value": {
+          "light": "61, 0, 77",
+          "dark": "255, 236, 253"
+        }
+      }
+    ]
+  },
+  "rosyred": {
+    "name": "玫红色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "rosyred-1",
+        "value": {
+          "light": "255, 232, 240",
+          "dark": "77, 0, 48"
+        }
+      },
+      {
+        "key": "rosyred-2",
+        "value": {
+          "light": "249, 185, 209",
+          "dark": "114, 3, 70"
+        }
+      },
+      {
+        "key": "rosyred-3",
+        "value": {
+          "light": "243, 141, 182",
+          "dark": "151, 12, 91"
+        }
+      },
+      {
+        "key": "rosyred-4",
+        "value": {
+          "light": "238, 98, 158",
+          "dark": "189, 25, 112"
+        }
+      },
+      {
+        "key": "rosyred-5",
+        "value": {
+          "light": "232, 57, 139",
+          "dark": "226, 41, 133"
+        }
+      },
+      {
+        "key": "rosyred-6",
+        "value": {
+          "light": "226, 18, 122",
+          "dark": "232, 53, 137"
+        }
+      },
+      {
+        "key": "rosyred-7",
+        "value": {
+          "light": "189, 11, 106",
+          "dark": "238, 97, 158"
+        }
+      },
+      {
+        "key": "rosyred-8",
+        "value": {
+          "light": "151, 6, 88",
+          "dark": "243, 143, 183"
+        }
+      },
+      {
+        "key": "rosyred-9",
+        "value": {
+          "light": "114, 2, 69",
+          "dark": "249, 192, 213"
+        }
+      },
+      {
+        "key": "rosyred-10",
+        "value": {
+          "light": "77, 0, 48",
+          "dark": "255, 242, 247"
+        }
+      }
+    ]
+  },
+
+  "base": {
+    "name": "基础色(不同皮肤色相不变)",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-white",
+        "value": {
+          "light": "rgb(var(--o-white))",
+          "dark": "rgb(var(--o-white))"
+        }
+      },
+      {
+        "key": "color-black",
+        "value": {
+          "light": "rgb(var(--o-black))",
+          "dark": "rgb(var(--o-black))"
+        }
+      }
+    ]
+  },
+  "primary": {
+    "name": "强调色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-primary1",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-12))",
+          "dark": "rgb(var(--o-mixedgray-14))"
+        }
+      },
+      {
+        "key": "color-primary2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-11))",
+          "dark": "rgb(var(--o-mixedgray-13))"
+        }
+      },
+      {
+        "key": "color-primary3",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-13))",
+          "dark": "rgb(var(--o-mixedgray-12))"
+        }
+      },
+      {
+        "key": "color-primary4",
+        "description": "禁用",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-6))",
+          "dark": "rgb(var(--o-mixedgray-8))"
+        }
+      },
+      {
+        "key": "color-primary1-light",
+        "description": "常规-浅",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-4))",
+          "dark": "rgb(var(--o-mixedgray-5))"
+        }
+      },
+      {
+        "key": "color-primary2-light",
+        "description": "悬浮-浅",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-5))",
+          "dark": "rgb(var(--o-mixedgray-6))"
+        }
+      },
+      {
+        "key": "color-primary3-light",
+        "description": "激活-浅",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-6))",
+          "dark": "rgb(var(--o-mixedgray-7))"
+        }
+      },
+      {
+        "key": "color-primary4-light",
+        "description": "禁用-浅",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-5))",
+          "dark": "rgb(var(--o-mixedgray-6))"
+        }
+      }
+    ]
+  },
+  "success": {
+    "name": "成功色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-success1",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-green-6))",
+          "dark": "rgb(var(--o-green-6))"
+        }
+      },
+      {
+        "key": "color-success2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-green-4))",
+          "dark": "rgb(var(--o-green-4))"
+        }
+      },
+      {
+        "key": "color-success3",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-green-7))",
+          "dark": "rgb(var(--o-green-7))"
+        }
+      },
+      {
+        "key": "color-success4",
+        "description": "禁用",
+        "value": {
+          "light": "rgb(var(--o-green-3))",
+          "dark": "rgb(var(--o-green-3))"
+        }
+      },
+      {
+        "key": "color-success1-light",
+        "description": "常规-浅",
+        "value": {
+          "light": "rgb(var(--o-green-2))",
+          "dark": "rgb(var(--o-green-2))"
+        }
+      },
+      {
+        "key": "color-success2-light",
+        "description": "悬浮-浅",
+        "value": {
+          "light": "rgb(var(--o-green-3))",
+          "dark": "rgb(var(--o-green-3))"
+        }
+      },
+      {
+        "key": "color-success3-light",
+        "description": "激活-浅",
+        "value": {
+          "light": "rgb(var(--o-green-4))",
+          "dark": "rgb(var(--o-green-4))"
+        }
+      },
+      {
+        "key": "color-success4-light",
+        "description": "禁用-浅",
+        "value": {
+          "light": "rgb(var(--o-green-1))",
+          "dark": "rgb(var(--o-green-1))"
+        }
+      }
+    ]
+  },
+  "warning": {
+    "name": "告警色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-warning1",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-orange-6))",
+          "dark": "rgb(var(--o-orange-6))"
+        }
+      },
+      {
+        "key": "color-warning2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-orange-4))",
+          "dark": "rgb(var(--o-orange-4))"
+        }
+      },
+      {
+        "key": "color-warning3",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-orange-7))",
+          "dark": "rgb(var(--o-orange-7))"
+        }
+      },
+      {
+        "key": "color-warning4",
+        "description": "禁用",
+        "value": {
+          "light": "rgb(var(--o-orange-3))",
+          "dark": "rgb(var(--o-orange-3))"
+        }
+      },
+      {
+        "key": "color-warning1-light",
+        "description": "常规-浅",
+        "value": {
+          "light": "rgb(var(--o-orange-2))",
+          "dark": "rgb(var(--o-orange-2))"
+        }
+      },
+      {
+        "key": "color-warning2-light",
+        "description": "悬浮-浅",
+        "value": {
+          "light": "rgb(var(--o-orange-3))",
+          "dark": "rgb(var(--o-orange-3))"
+        }
+      },
+      {
+        "key": "color-warning3-light",
+        "description": "激活-浅",
+        "value": {
+          "light": "rgb(var(--o-orange-4))",
+          "dark": "rgb(var(--o-orange-4))"
+        }
+      },
+      {
+        "key": "color-warning4-light",
+        "description": "禁用-浅",
+        "value": {
+          "light": "rgb(var(--o-orange-1))",
+          "dark": "rgb(var(--o-orange-1))"
+        }
+      }
+    ]
+  },
+  "danger": {
+    "name": "危险色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-danger1",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-red-6))",
+          "dark": "rgb(var(--o-red-6))"
+        }
+      },
+      {
+        "key": "color-danger2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-red-4))",
+          "dark": "rgb(var(--o-red-4))"
+        }
+      },
+      {
+        "key": "color-danger3",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-red-7))",
+          "dark": "rgb(var(--o-red-7))"
+        }
+      },
+      {
+        "key": "color-danger4",
+        "description": "禁用",
+        "value": {
+          "light": "rgb(var(--o-red-3))",
+          "dark": "rgb(var(--o-red-3))"
+        }
+      },
+      {
+        "key": "color-danger1-light",
+        "description": "常规-浅",
+        "value": {
+          "light": "rgb(var(--o-red-2))",
+          "dark": "rgb(var(--o-red-2))"
+        }
+      },
+      {
+        "key": "color-danger2-light",
+        "description": "悬浮-浅",
+        "value": {
+          "light": "rgb(var(--o-red-3))",
+          "dark": "rgb(var(--o-red-3))"
+        }
+      },
+      {
+        "key": "color-danger3-light",
+        "description": "激活-浅",
+        "value": {
+          "light": "rgb(var(--o-red-4))",
+          "dark": "rgb(var(--o-red-4))"
+        }
+      },
+      {
+        "key": "color-danger4-light",
+        "description": "禁用-浅",
+        "value": {
+          "light": "rgb(var(--o-red-1))",
+          "dark": "rgb(var(--o-red-1))"
+        }
+      }
+    ]
+  },
+  "fill": {
+    "name": "填充色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-fill1",
+        "description": "一级填充：页面背景",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-2))",
+          "dark": "rgb(var(--o-mixedgray-3))"
+        }
+      },
+      {
+        "key": "color-fill2",
+        "description": "二级填充：区块/卡片",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-1))",
+          "dark": "rgb(var(--o-mixedgray-4))"
+        }
+      },
+      {
+        "key": "color-fill3",
+        "description": "三级填充：卡片",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-3))",
+          "dark": "rgb(var(--o-mixedgray-5))"
+        }
+      }
+    ]
+  },
+  "control": {
+    "name": "控件色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-control1",
+        "description": "常规，常用于边框",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-14), 0.25)",
+          "dark": "rgba(var(--o-mixedgray-14), 0.25)"
+        }
+      },
+      {
+        "key": "color-control2",
+        "description": "悬浮，常用于边框",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-14), 0.6)",
+          "dark": "rgba(var(--o-mixedgray-14), 0.6)"
+        }
+      },
+      {
+        "key": "color-control3",
+        "description": "激活，常用于边框",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-14), 0.8)",
+          "dark": "rgba(var(--o-mixedgray-14), 0.8)"
+        }
+      },
+      {
+        "key": "color-control4",
+        "description": "禁用，常用于边框",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-14), 0.1)",
+          "dark": "rgba(var(--o-mixedgray-14), 0.15)"
+        }
+      },
+      {
+        "key": "color-control1-light",
+        "description": "常规-浅，常用于背景",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-5))",
+          "dark": "rgb(var(--o-mixedgray-7))"
+        }
+      },
+      {
+        "key": "color-control2-light",
+        "description": "悬浮-浅，常用于背景",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-3))",
+          "dark": "rgb(var(--o-mixedgray-5))"
+        }
+      },
+      {
+        "key": "color-control3-light",
+        "description": "激活-浅，常用于背景",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-4))",
+          "dark": "rgb(var(--o-mixedgray-6))"
+        }
+      },
+      {
+        "key": "color-control4-light",
+        "description": "禁用-浅，常用于背景",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-3))",
+          "dark": "rgb(var(--o-mixedgray-5))"
+        }
+      },
+      {
+        "key": "color-control-light",
+        "description": "很浅，常用于表格背景色",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-1))",
+          "dark": "rgb(var(--o-mixedgray-4))"
+        }
+      }
+    ]
+  },
+  "info": {
+    "name": "信息色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-info1",
+        "description": "一级/强调/标题",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-14), 1.0)",
+          "dark": "rgba(var(--o-mixedgray-14), 1.0)"
+        }
+      },
+      {
+        "key": "color-info2",
+        "description": "二级/次强调/正文",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-14), 0.8)",
+          "dark": "rgba(var(--o-mixedgray-14), 0.8)"
+        }
+      },
+      {
+        "key": "color-info3",
+        "description": "三级/辅助信息",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-14), 0.6)",
+          "dark": "rgba(var(--o-mixedgray-14), 0.6)"
+        }
+      },
+      {
+        "key": "color-info4",
+        "description": "置灰/禁用",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-14), 0.4)",
+          "dark": "rgba(var(--o-mixedgray-14), 0.4)"
+        }
+      },
+      {
+        "key": "color-info1-inverse",
+        "description": "一级/次强调/正文反色",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-1), 1.0)",
+          "dark": "rgba(var(--o-mixedgray-1), 1.0)"
+        }
+      },
+      {
+        "key": "color-info2-inverse",
+        "description": "二级/辅助信息反色",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-1), 0.8)",
+          "dark": "rgba(var(--o-mixedgray-1), 0.8)"
+        }
+      },
+      {
+        "key": "color-info3-inverse",
+        "description": "三级/辅助信息反色",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-1), 0.6)",
+          "dark": "rgba(var(--o-mixedgray-1), 0.6)"
+        }
+      },
+      {
+        "key": "color-info4-inverse",
+        "description": "置灰/禁用反色",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-1), 0.4)",
+          "dark": "rgba(var(--o-mixedgray-1), 0.4)"
+        }
+      }
+    ]
+  },
+  "mask": {
+    "name": "遮罩色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-mask1",
+        "description": "全局遮罩",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-14), 0.4)",
+          "dark": "rgba(var(--o-mixedgray-1), 0.4)"
+        }
+      },
+      {
+        "key": "color-mask2",
+        "description": "局部遮罩",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-1), 0.2)",
+          "dark": "rgba(var(--o-mixedgray-4), 0.2)"
+        }
+      }
+    ]
+  },
+  "link": {
+    "name": "链接色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-link1",
+        "description": "常规",
+        "value": {
+          "light": "rgba(var(--o-deepblue-6), 1.0)",
+          "dark": "rgba(var(--o-deepblue-6), 1.0)"
+        }
+      },
+      {
+        "key": "color-link2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgba(var(--o-deepblue-6), 0.7)",
+          "dark": "rgba(var(--o-deepblue-6), 0.7)"
+        }
+      },
+      {
+        "key": "color-link3",
+        "description": "激活",
+        "value": {
+          "light": "rgba(var(--o-deepblue-6), 0.9)",
+          "dark": "rgba(var(--o-deepblue-6), 0.9)"
+        }
+      },
+      {
+        "key": "color-link4",
+        "description": "禁用",
+        "value": {
+          "light": "rgba(var(--o-deepblue-6), 0.4)",
+          "dark": "rgba(var(--o-deepblue-6), 0.4)"
+        }
+      }
+    ]
+  },
+
+  "shadow": {
+    "name": "阴影",
+    "type": "shadow",
+    "typeName": "阴影",
+    "value": [
+      {
+        "key": "shadow-1",
+        "name": "阴影1",
+        "description": "用于卡片、小弹窗、楼层阴影",
+        "value": {
+          "light": "0 3px 8px rgba(var(--o-mixedgray-13), 0.08)",
+          "dark": "0 3px 8px rgba(var(--o-mixedgray-1), 0.08)"
+        }
+      },
+      {
+        "key": "shadow-2",
+        "name": "阴影2",
+        "description": "用于卡片悬浮阴影",
+        "value": {
+          "light": "0 2px 24px rgba(var(--o-mixedgray-13), 0.15)",
+          "dark": "0 2px 24px rgba(var(--o-mixedgray-1), 0.15)"
+        }
+      },
+      {
+        "key": "shadow-3",
+        "name": "阴影3",
+        "description": "用于提示阴影",
+        "value": {
+          "light": "0 8px 40px rgba(var(--o-mixedgray-13), 0.1)",
+          "dark": "0 8px 40px rgba(var(--o-mixedgray-1), 0.1)"
+        }
+      }
+    ]
+  },
+
+  "gap": {
+    "name": "间距",
+    "type": "gap",
+    "typeName": "间距",
+    "value": [
+      {
+        "key": "gap-1",
+        "name": "间距1",
+        "description": "用于组件之间的间距1",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "gap-2",
+        "name": "间距2",
+        "description": "用于组件之间的间距2",
+        "value": {
+          "light": "8px",
+          "dark": "8px"
+        }
+      },
+      {
+        "key": "gap-3",
+        "name": "间距3",
+        "description": "用于组件之间的间距3",
+        "value": {
+          "light": "12px",
+          "dark": "12px"
+        }
+      },
+      {
+        "key": "gap-4",
+        "name": "间距4",
+        "description": "用于组件之间的间距4",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "gap-5",
+        "name": "间距5",
+        "description": "用于组件之间的间距5",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "gap-6",
+        "name": "间距6",
+        "description": "用于组件之间的间距6",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "gap-7",
+        "name": "间距7",
+        "description": "用于组件之间的间距7",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      },
+      {
+        "key": "gap-8",
+        "name": "间距8",
+        "description": "用于组件之间的间距8",
+        "value": {
+          "light": "48px",
+          "dark": "48px"
+        }
+      },
+      {
+        "key": "gap-9",
+        "name": "间距9",
+        "description": "用于组件之间的间距9",
+        "value": {
+          "light": "64px",
+          "dark": "64px"
+        }
+      },
+      {
+        "key": "gap-10",
+        "name": "间距10",
+        "description": "用于组件之间的间距10",
+        "value": {
+          "light": "72px",
+          "dark": "72px"
+        }
+      }
+    ]
+  },
+
+  "control_size": {
+    "name": "组件尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "control_size-2xs",
+        "name": "超小尺寸",
+        "description": "超小尺寸",
+        "value": {
+          "light": "14px",
+          "dark": "14px"
+        }
+      },
+      {
+        "key": "control_size-xs",
+        "name": "小尺寸",
+        "description": "小尺寸",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "control_size-s",
+        "name": "小尺寸",
+        "description": "小尺寸",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "control_size-m",
+        "name": "中尺寸",
+        "description": "尺寸",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "control_size-l",
+        "name": "大尺寸",
+        "description": "尺寸",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      },
+      {
+        "key": "control_size-xl",
+        "name": "大尺寸",
+        "description": "尺寸",
+        "value": {
+          "light": "48px",
+          "dark": "48px"
+        }
+      },
+      {
+        "key": "control_size-2xl",
+        "name": "大尺寸",
+        "description": "尺寸",
+        "value": {
+          "light": "56px",
+          "dark": "56px"
+        }
+      }
+    ]
+  },
+
+  "icon_size": {
+    "name": "图标尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "icon_size-xs",
+        "name": "超小尺寸图标",
+        "description": "超小尺寸图标",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "icon_size-s",
+        "name": "小尺寸图标",
+        "description": "小尺寸图标",
+        "value": {
+          "light": "20px",
+          "dark": "20px"
+        }
+      },
+      {
+        "key": "icon_size-m",
+        "name": "中尺寸图标",
+        "description": "中尺寸图标",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "icon_size-l",
+        "name": "大尺寸图标",
+        "description": "大尺寸图标",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "icon_size-xl",
+        "name": "超大尺寸图标",
+        "description": "超大尺寸图标",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      },
+      {
+        "key": "icon_size-2xl",
+        "name": "2xl尺寸图标",
+        "description": "2xl尺寸图标",
+        "value": {
+          "light": "48px",
+          "dark": "48px"
+        }
+      },
+      {
+        "key": "icon_size-3xl",
+        "name": "3xl尺寸图标",
+        "description": "3xl尺寸图标",
+        "value": {
+          "light": "56px",
+          "dark": "56px"
+        }
+      },
+      {
+        "key": "icon_size-4xl",
+        "name": "4xl尺寸图标",
+        "description": "4xl尺寸图标",
+        "value": {
+          "light": "64px",
+          "dark": "64px"
+        }
+      }
+    ]
+  },
+  "icon_size_control": {
+    "name": "组件图标尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "icon_size_control-xs",
+        "name": "超小尺寸图标",
+        "description": "超小尺寸控件图标(组件使用)",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "icon_size_control-s",
+        "name": "小尺寸图标",
+        "description": "小尺寸控件图标(组件使用)",
+        "value": {
+          "light": "20px",
+          "dark": "20px"
+        }
+      },
+      {
+        "key": "icon_size_control-m",
+        "name": "中尺寸图标",
+        "description": "中尺寸控件图标(组件使用)",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "icon_size_control-l",
+        "name": "大尺寸图标",
+        "description": "大尺寸控件图标(组件使用)",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "icon_size_control-xl",
+        "name": "超大尺寸图标",
+        "description": "超大尺寸控件图标(组件使用)",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      }
+    ]
+  },
+
+  "font_size": {
+    "name": "字体尺寸",
+    "type": "font",
+    "typeName": "字体",
+    "value": [
+      {
+        "key": "font_size-display1",
+        "name": "一级数据展示",
+        "description": "一级数据展示",
+        "value": {
+          "light": "56px",
+          "dark": "56px"
+        }
+      },
+      {
+        "key": "font_size-display2",
+        "name": "二级数据展示",
+        "description": "二级数据展示",
+        "value": {
+          "light": "48px",
+          "dark": "48px"
+        }
+      },
+      {
+        "key": "font_size-display3",
+        "name": "三级数据展示",
+        "description": "三级数据展示",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      },
+      {
+        "key": "font_size-h1",
+        "name": "一级标题",
+        "description": "一级标题",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "font_size-h2",
+        "name": "二级标题",
+        "description": "二级标题",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "font_size-h3",
+        "name": "三级标题",
+        "description": "三级标题",
+        "value": {
+          "light": "22px",
+          "dark": "22px"
+        }
+      },
+      {
+        "key": "font_size-h4",
+        "name": "四级标题",
+        "description": "四级标题",
+        "value": {
+          "light": "20px",
+          "dark": "20px"
+        }
+      },
+      {
+        "key": "font_size-text1",
+        "name": "常规正文",
+        "description": "常规正文",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "font_size-text2",
+        "name": "大号正文",
+        "description": "大号正文",
+        "value": {
+          "light": "18px",
+          "dark": "18px"
+        }
+      },
+      {
+        "key": "font_size-tip1",
+        "name": "提示文本1",
+        "description": "提示文本1",
+        "value": {
+          "light": "14px",
+          "dark": "14px"
+        }
+      },
+      {
+        "key": "font_size-tip2",
+        "name": "提示文本2",
+        "description": "提示文本2",
+        "value": {
+          "light": "12px",
+          "dark": "12px"
+        }
+      }
+    ]
+  },
+  "line_height": {
+    "name": "字体行高",
+    "type": "font",
+    "typeName": "字体",
+    "value": [
+      {
+        "key": "line_height-display1",
+        "name": "一级数据展示",
+        "description": "一级数据展示",
+        "value": {
+          "light": "80px",
+          "dark": "80px"
+        }
+      },
+      {
+        "key": "line_height-display2",
+        "name": "二级数据展示",
+        "description": "二级数据展示",
+        "value": {
+          "light": "64px",
+          "dark": "64px"
+        }
+      },
+      {
+        "key": "line_height-display3",
+        "name": "三级数据展示",
+        "description": "三级数据展示",
+        "value": {
+          "light": "56px",
+          "dark": "56px"
+        }
+      },
+      {
+        "key": "line_height-h1",
+        "name": "一级标题",
+        "description": "一级标题",
+        "value": {
+          "light": "44px",
+          "dark": "44px"
+        }
+      },
+      {
+        "key": "line_height-h2",
+        "name": "二级标题",
+        "description": "二级标题",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "line_height-h3",
+        "name": "三级标题",
+        "description": "三级标题",
+        "value": {
+          "light": "30px",
+          "dark": "30px"
+        }
+      },
+      {
+        "key": "line_height-h4",
+        "name": "四级标题",
+        "description": "四级标题",
+        "value": {
+          "light": "28px",
+          "dark": "28px"
+        }
+      },
+      {
+        "key": "line_height-text1",
+        "name": "正文",
+        "description": "正文",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "line_height-text2",
+        "name": "正文-大",
+        "description": "正文-大",
+        "value": {
+          "light": "26px",
+          "dark": "26x"
+        }
+      },
+      {
+        "key": "line_height-tip1",
+        "name": "提示文本1",
+        "description": "提示文本1",
+        "value": {
+          "light": "22px",
+          "dark": "22px"
+        }
+      },
+      {
+        "key": "line_height-tip2",
+        "name": "提示文本2",
+        "description": "提示文本2",
+        "value": {
+          "light": "18px",
+          "dark": "18px"
+        }
+      }
+    ]
+  },
+
+  "radius": {
+    "name": "圆角尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "radius-xs",
+        "name": "超小尺寸圆角",
+        "description": "超小尺寸圆角",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "radius-s",
+        "name": "小尺寸圆角",
+        "description": "小尺寸圆角",
+        "value": {
+          "light": "8px",
+          "dark": "8px"
+        }
+      },
+      {
+        "key": "radius-m",
+        "name": "中尺寸圆角",
+        "description": "中尺寸圆角",
+        "value": {
+          "light": "12px",
+          "dark": "12px"
+        }
+      },
+      {
+        "key": "radius-l",
+        "name": "大尺寸圆角",
+        "description": "大尺寸圆角",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "radius-xl",
+        "name": "大尺寸圆角",
+        "description": "大尺寸圆角,一般用于卡片",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      }
+    ]
+  },
+  "radius_control": {
+    "name": "组件圆角尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "radius_control-xs",
+        "name": "超小尺寸控件圆角",
+        "description": "超小尺寸控件圆角(组件使用)",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "radius_control-s",
+        "name": "小尺寸控件圆角",
+        "description": "小尺寸控件圆角(组件使用)",
+        "value": {
+          "light": "8px",
+          "dark": "8px"
+        }
+      },
+      {
+        "key": "radius_control-m",
+        "name": "中尺寸控件圆角",
+        "description": "中尺寸控件圆角(组件使用)",
+        "value": {
+          "light": "12px",
+          "dark": "12px"
+        }
+      },
+      {
+        "key": "radius_control-l",
+        "name": "大尺寸控件圆角",
+        "description": "大尺寸控件圆角(组件使用)",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      }
+    ]
+  },
+
+  "duration": {
+    "name": "动画持续时间",
+    "type": "animation",
+    "typeName": "动画",
+    "value": [
+      {
+        "key": "duration-s",
+        "name": "持续时间",
+        "description": "用于退出屏幕的动画",
+        "value": {
+          "light": "200ms",
+          "dark": "200ms"
+        }
+      },
+      {
+        "key": "duration-m1",
+        "name": "持续时间",
+        "description": "用于当曲线为standard-in时进入屏幕的动画",
+        "value": {
+          "light": "250ms",
+          "dark": "250ms"
+        }
+      },
+      {
+        "key": "duration-m2",
+        "name": "持续时间",
+        "description": "用于当曲线为standard时开始、结束的动画",
+        "value": {
+          "light": "300ms",
+          "dark": "300ms"
+        }
+      },
+      {
+        "key": "duration-m3",
+        "name": "持续时间",
+        "description": "用于当曲线为emphasized-in时进入屏幕的动画",
+        "value": {
+          "light": "400ms",
+          "dark": "400ms"
+        }
+      },
+      {
+        "key": "duration-l",
+        "name": "持续时间",
+        "description": "用于当曲线为emphasized时开始、结束的动画",
+        "value": {
+          "light": "500ms",
+          "dark": "500ms"
+        }
+      },
+      {
+        "key": "duration-xl",
+        "name": "持续时间",
+        "description": "用于当曲线为emphasized时，轮播切换动画",
+        "value": {
+          "light": "1000ms",
+          "dark": "1000ms"
+        }
+      }
+    ]
+  },
+
+  "easing": {
+    "name": "动画曲线",
+    "type": "animation",
+    "typeName": "动画",
+    "value": [
+      {
+        "key": "easing-linear",
+        "name": "线性动画曲线",
+        "description": "线性曲线",
+        "value": {
+          "light": "cubic-bezier(0, 0, 1, 1)",
+          "dark": "cubic-bezier(0, 0, 1, 1)"
+        }
+      },
+      {
+        "key": "easing-standard",
+        "name": "动画曲线",
+        "description": "用于组件",
+        "value": {
+          "light": "cubic-bezier(0.2, 0, 0, 1)",
+          "dark": "cubic-bezier(0.2, 0, 0, 1)"
+        }
+      },
+      {
+        "key": "easing-standard-in",
+        "name": "动画曲线",
+        "description": "用于组件",
+        "value": {
+          "light": "cubic-bezier(0, 0, 0, 1)",
+          "dark": "cubic-bezier(0, 0, 0, 1)"
+        }
+      },
+      {
+        "key": "easing-standard-out",
+        "name": "动画曲线",
+        "description": "用于组件",
+        "value": {
+          "light": "cubic-bezier(0.3, 0, 1, 1)",
+          "dark": "cubic-bezier(0.3, 0, 1, 1)"
+        }
+      },
+      {
+        "key": "easing-emphasized",
+        "name": "动画曲线",
+        "description": "用于大卡片、场景切换",
+        "value": {
+          "light": "cubic-bezier(0.2, 0, 0, 1)",
+          "dark": "cubic-bezier(0.2, 0, 0, 1)"
+        }
+      },
+      {
+        "key": "easing-emphasized-in",
+        "name": "动画曲线",
+        "description": "用于大卡片、场景切换",
+        "value": {
+          "light": "cubic-bezier(0.3, 0, 0.8, 0.15)",
+          "dark": "cubic-bezier(0.3, 0, 0.8, 0.15)"
+        }
+      },
+      {
+        "key": "easing-emphasized-out",
+        "name": "动画曲线",
+        "description": "用于大卡片、场景切换",
+        "value": {
+          "light": "cubic-bezier(0.05, 0.7, 0.1, 1)",
+          "dark": "cubic-bezier(0.05, 0.7, 0.1, 1)"
+        }
+      }
+    ]
+  }
+}
diff --git a/packages/opendesign/src/theme/common.scss b/packages/opendesign/src/theme/common.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2d2d434c18154590162f24e1088f4fcd57cd883b
--- /dev/null
+++ b/packages/opendesign/src/theme/common.scss
@@ -0,0 +1,59 @@
+@use '../_styles/mixin.scss' as *;
+
+@mixin __inject_var($width, $padding, $gutter, $columns) {
+  --grid-padding: #{$padding};
+  --grid-layout-width: #{$width};
+  --grid-column-gutter: #{$gutter};
+  --grid-column-total: #{$columns};
+  --grid-full: calc(var(--grid-layout-width) - var(--grid-padding) * 2);
+  --grid-column-width: calc((var(--grid-full) - var(--grid-column-gutter) * (var(--grid-column-total) - 1)) / var(--grid-column-total));
+}
+
+:root {
+  --grid-1: var(--grid-column-width);
+  --layout-content-width: var(--grid-full);
+  @media (min-width: 1921px) {
+    @include __inject_var(1920px, 64px, 32px, 24);
+  }
+  @media (min-width: 1681px) {
+    @include __inject_var(100vw, 64px, 32px, 24);
+  }
+  @media (min-width: 1441px) and (max-width: 1680px) {
+    @include __inject_var(100vw, 64px, 32px, 24);
+  }
+  @include respond-to('laptop') {
+    @include __inject_var(100vw, 40px, 24px, 24);
+  }
+  @include respond-to('>pad') {
+    @for $i from 2 through 24 {
+      --grid-#{$i}: calc(var(--grid-column-width) * #{$i} + var(--grid-column-gutter) * #{$i - 1});
+    }
+  }
+  @include respond-to('pad_h') {
+    @include __inject_var(100vw, 32px, 16px, 12);
+    @for $i from 2 through 12 {
+      --grid-#{$i}: calc(var(--grid-column-width) * #{$i} + var(--grid-column-gutter) * #{$i - 1});
+    }
+    @for $i from 13 through 24 {
+      --grid-#{$i}: var(--grid-full);
+    }
+  }
+  @include respond-to('pad_v') {
+    @include __inject_var(100vw, 32px, 16px, 8);
+    @for $i from 2 through 8 {
+      --grid-#{$i}: calc(var(--grid-column-width) * #{$i} + var(--grid-column-gutter) * #{$i - 1});
+    }
+    @for $i from 9 through 24 {
+      --grid-#{$i}: var(--grid-full);
+    }
+  }
+  @media (max-width: 600px) {
+    @include __inject_var(100vw, 24px, 12px, 4);
+    @for $i from 2 through 4 {
+      --grid-#{$i}: calc(var(--grid-column-width) * #{$i} + var(--grid-column-gutter) * #{$i - 1});
+    }
+    @for $i from 5 through 24 {
+      --grid-#{$i}: var(--grid-full);
+    }
+  }
+}
diff --git a/packages/opendesign/src/theme/kunpeng/base.scss b/packages/opendesign/src/theme/kunpeng/base.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3dee5ae02258cd0c98498e4ca7d7001ab420ee02
--- /dev/null
+++ b/packages/opendesign/src/theme/kunpeng/base.scss
@@ -0,0 +1,13 @@
+[class^='c-'],
+[class*=' c-'] {
+  box-sizing: border-box;
+}
+
+[data-o-theme='k.light'] {
+  --ak-color-band-start: 255, 153, 51;
+  --ak-color-band-end: 247, 77, 97;
+}
+[data-o-theme='k.dark'] {
+  --ak-color-band-start: 255, 153, 51;
+  --ak-color-band-end: 247, 77, 97;
+}
diff --git a/packages/opendesign/src/theme/kunpeng/index.scss b/packages/opendesign/src/theme/kunpeng/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ee8780ea4409bf12c7c742eaf7ef1d9c261bfcc9
--- /dev/null
+++ b/packages/opendesign/src/theme/kunpeng/index.scss
@@ -0,0 +1,53 @@
+// 变量
+@use './k.dark.token.css' as *;
+@use './k.light.token.css' as *;
+@use '../common.scss' as *;
+// 样式
+@use './base.scss' as *;
+@use '../../index.scss' as *;
+
+// 皮肤
+@use '../../anchor/style/theme-kunpeng.scss' as *;
+@use '../../badge/style/theme-kunpeng.scss' as *;
+@use '../../breadcrumb/style/theme-kunpeng.scss' as *;
+@use '../../button/style/theme-kunpeng.scss' as *;
+@use '../../card/style/theme-kunpeng.scss' as *;
+@use '../../carousel/style/theme-kunpeng.scss' as *;
+@use '../../cascader/style/theme-kunpeng.scss' as *;
+@use '../../checkbox/style/theme-kunpeng.scss' as *;
+@use '../../checkbox-group/style/theme-kunpeng.scss' as *;
+@use '../../collapse/style/theme-kunpeng.scss' as *;
+@use '../../dialog/style/theme-kunpeng.scss' as *;
+@use '../../divider/style/theme-kunpeng.scss' as *;
+@use '../../dropdown/style/theme-kunpeng.scss' as *;
+@use '../../figure/style/theme-kunpeng.scss' as *;
+@use '../../form/style/theme-kunpeng.scss' as *;
+@use '../../grid/style/theme-kunpeng.scss' as *;
+@use '../../icon/style/theme-kunpeng.scss' as *;
+@use '../../input/style/theme-kunpeng.scss' as *;
+@use '../../input-number/style/theme-kunpeng.scss' as *;
+@use '../../layer/style/theme-kunpeng.scss' as *;
+@use '../../link/style/theme-kunpeng.scss' as *;
+@use '../../loading/style/theme-kunpeng.scss' as *;
+@use '../../menu/style/theme-kunpeng.scss' as *;
+@use '../../message/style/theme-kunpeng.scss' as *;
+@use '../../option/style/theme-kunpeng.scss' as *;
+@use '../../pagination/style/theme-kunpeng.scss' as *;
+@use '../../popover/style/theme-kunpeng.scss' as *;
+@use '../../popup/style/theme-kunpeng.scss' as *;
+@use '../../progress/style/theme-kunpeng.scss' as *;
+@use '../../radio/style/theme-kunpeng.scss' as *;
+@use '../../radio-group/style/theme-kunpeng.scss' as *;
+@use '../../rate/style/theme-kunpeng.scss' as *;
+@use '../../result/style/theme-kunpeng.scss' as *;
+@use '../../scrollbar/style/theme-kunpeng.scss' as *;
+@use '../../select/style/theme-kunpeng.scss' as *;
+@use '../../skeleton/style/theme-kunpeng.scss' as *;
+@use '../../switch/style/theme-kunpeng.scss' as *;
+@use '../../tab/style/theme-kunpeng.scss' as *;
+@use '../../table/style/theme-kunpeng.scss' as *;
+@use '../../tag/style/theme-kunpeng.scss' as *;
+@use '../../textarea/style/theme-kunpeng.scss' as *;
+@use '../../toggle/style/theme-kunpeng.scss' as *;
+@use '../../upload/style/theme-kunpeng.scss' as *;
+@use '../../virtual-list/style/theme-kunpeng.scss' as *;
diff --git a/packages/opendesign/src/theme/kunpeng/k.dark.token.css b/packages/opendesign/src/theme/kunpeng/k.dark.token.css
new file mode 100644
index 0000000000000000000000000000000000000000..82225fdc6ab2d72d2637adde8f4c740826f6fc1c
--- /dev/null
+++ b/packages/opendesign/src/theme/kunpeng/k.dark.token.css
@@ -0,0 +1,1949 @@
+/* theme: k.dark */
+[data-o-theme="k.dark"] {
+  /**
+   * @name 
+   * @type palette
+   * @group white
+   * @description 
+   */
+  --o-white: 255, 255, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group black
+   * @description 
+   */
+  --o-black: 0, 0, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-1: 0, 4, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-2: 6, 15, 120;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-3: 20, 37, 163;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-4: 40, 65, 207;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-5: 66, 99, 250;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-6: 84, 120, 251;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-7: 122, 154, 252;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-8: 160, 186, 253;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-9: 199, 217, 254;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-10: 238, 244, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-1: 0, 77, 42;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-2: 2, 102, 53;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-3: 10, 127, 66;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-4: 22, 152, 80;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-5: 36, 177, 95;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-6: 51, 193, 104;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-7: 90, 208, 131;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-8: 135, 224, 163;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-9: 185, 239, 200;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-10: 240, 255, 244;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-1: 77, 24, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-2: 120, 42, 1;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-3: 163, 68, 8;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-4: 207, 97, 19;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-5: 250, 130, 33;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-6: 251, 143, 43;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-7: 252, 174, 91;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-8: 253, 202, 139;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-9: 254, 227, 188;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-10: 255, 248, 237;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-1: 77, 0, 17;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-2: 115, 3, 24;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-3: 153, 9, 31;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-4: 192, 17, 37;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-5: 230, 28, 43;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-6: 235, 35, 45;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-7: 240, 82, 85;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-8: 245, 132, 130;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-9: 250, 183, 180;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-10: 255, 234, 232;
+  /**
+   * @name 
+   * @type palette
+   * @group huaweired
+   * @description 
+   */
+  --o-red-huawei: 199, 0, 11;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-1: 0, 0, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-2: 18, 18, 20;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-3: 26, 26, 28;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-4: 36, 36, 39;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-5: 43, 43, 47;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-6: 53, 53, 57;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-7: 63, 63, 67;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-8: 85, 85, 88;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-9: 118, 118, 122;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-10: 156, 156, 159;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-11: 181, 181, 185;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-12: 208, 208, 210;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-13: 235, 235, 238;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-14: 255, 255, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-1: 0, 0, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-2: 16, 18, 20;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-3: 23, 25, 28;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-4: 33, 35, 39;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-5: 40, 42, 47;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-6: 50, 53, 57;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-7: 61, 63, 67;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-8: 80, 84, 88;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-9: 113, 117, 122;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-10: 147, 152, 159;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-11: 172, 177, 185;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-12: 198, 202, 210;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-13: 231, 234, 238;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-14: 255, 255, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-1: 77, 54, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-2: 119, 87, 2;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-3: 161, 126, 11;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-4: 203, 167, 24;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-5: 245, 211, 42;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-6: 247, 222, 54;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-7: 249, 234, 100;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-8: 251, 244, 146;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-9: 253, 251, 192;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-10: 255, 255, 240;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-1: 41, 77, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-2: 63, 109, 3;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-3: 91, 142, 14;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-4: 121, 174, 30;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-5: 155, 207, 50;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-6: 172, 217, 68;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-7: 194, 226, 104;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-8: 214, 236, 144;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-9: 233, 245, 186;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-10: 251, 255, 232;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-1: 0, 73, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-2: 2, 101, 103;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-3: 9, 129, 127;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-4: 18, 155, 148;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-5: 30, 181, 167;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-6: 42, 196, 178;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-7: 84, 211, 192;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-8: 130, 225, 208;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-9: 182, 240, 227;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-10: 239, 255, 251;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-1: 0, 34, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-2: 1, 57, 117;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-3: 8, 86, 158;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-4: 18, 118, 199;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-5: 31, 153, 240;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-6: 42, 166, 243;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-7: 89, 191, 246;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-8: 137, 214, 249;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-9: 187, 233, 252;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-10: 237, 250, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-1: 22, 0, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-2: 40, 3, 118;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-3: 66, 15, 160;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-4: 98, 33, 202;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-5: 134, 57, 244;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-6: 152, 74, 246;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-7: 179, 114, 248;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-8: 205, 156, 251;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-9: 228, 198, 253;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-10: 249, 240, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-1: 61, 0, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-2: 93, 5, 110;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-3: 127, 16, 144;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-4: 164, 33, 178;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-5: 200, 54, 212;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-6: 216, 72, 221;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-7: 229, 109, 229;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-8: 238, 149, 235;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-9: 246, 191, 243;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-10: 255, 236, 253;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-1: 77, 0, 48;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-2: 114, 3, 70;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-3: 151, 12, 91;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-4: 189, 25, 112;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-5: 226, 41, 133;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-6: 232, 53, 137;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-7: 238, 97, 158;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-8: 243, 143, 183;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-9: 249, 192, 213;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-10: 255, 242, 247;
+  /**
+   * @name 
+   * @type color
+   * @group base
+   * @description 
+   */
+  --o-color-white: rgb(var(--o-white));
+  /**
+   * @name 
+   * @type color
+   * @group base
+   * @description 
+   */
+  --o-color-black: rgb(var(--o-black));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 常规
+   */
+  --o-color-primary1: rgb(var(--o-gray-14));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 悬浮
+   */
+  --o-color-primary2: rgb(var(--o-gray-13));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 激活
+   */
+  --o-color-primary3: rgb(var(--o-gray-12));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 禁用
+   */
+  --o-color-primary4: rgb(var(--o-gray-8));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 常规-浅
+   */
+  --o-color-primary1-light: rgb(var(--o-gray-5));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 悬浮-浅
+   */
+  --o-color-primary2-light: rgb(var(--o-gray-6));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 激活-浅
+   */
+  --o-color-primary3-light: rgb(var(--o-gray-7));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 禁用-浅
+   */
+  --o-color-primary4-light: rgb(var(--o-gray-6));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 常规
+   */
+  --o-color-success1: rgb(var(--o-green-6));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 悬浮
+   */
+  --o-color-success2: rgb(var(--o-green-4));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 激活
+   */
+  --o-color-success3: rgb(var(--o-green-7));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 禁用
+   */
+  --o-color-success4: rgb(var(--o-green-3));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 常规-浅
+   */
+  --o-color-success1-light: rgb(var(--o-green-2));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 悬浮-浅
+   */
+  --o-color-success2-light: rgb(var(--o-green-3));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 激活-浅
+   */
+  --o-color-success3-light: rgb(var(--o-green-4));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 禁用-浅
+   */
+  --o-color-success4-light: rgb(var(--o-green-1));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 常规
+   */
+  --o-color-warning1: rgb(var(--o-orange-6));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 悬浮
+   */
+  --o-color-warning2: rgb(var(--o-orange-4));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 激活
+   */
+  --o-color-warning3: rgb(var(--o-orange-7));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 禁用
+   */
+  --o-color-warning4: rgb(var(--o-orange-3));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 常规-浅
+   */
+  --o-color-warning1-light: rgb(var(--o-orange-2));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 悬浮-浅
+   */
+  --o-color-warning2-light: rgb(var(--o-orange-3));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 激活-浅
+   */
+  --o-color-warning3-light: rgb(var(--o-orange-4));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 禁用-浅
+   */
+  --o-color-warning4-light: rgb(var(--o-orange-1));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 常规
+   */
+  --o-color-danger1: rgb(var(--o-red-6));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 悬浮
+   */
+  --o-color-danger2: rgb(var(--o-red-4));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 激活
+   */
+  --o-color-danger3: rgb(var(--o-red-7));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 禁用
+   */
+  --o-color-danger4: rgb(var(--o-red-3));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 常规-浅
+   */
+  --o-color-danger1-light: rgb(var(--o-red-2));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 悬浮-浅
+   */
+  --o-color-danger2-light: rgb(var(--o-red-3));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 激活-浅
+   */
+  --o-color-danger3-light: rgb(var(--o-red-4));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 禁用-浅
+   */
+  --o-color-danger4-light: rgb(var(--o-red-1));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 一级填充：页面背景
+   */
+  --o-color-fill1: rgb(var(--o-gray-3));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 二级填充：区块、卡片
+   */
+  --o-color-fill2: rgb(var(--o-gray-4));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 三级填充：卡片
+   */
+  --o-color-fill3: rgb(var(--o-gray-5));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 常规，常用于边框
+   */
+  --o-color-control1: rgba(var(--o-gray-14), 0.25);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 悬浮，常用于边框
+   */
+  --o-color-control2: rgba(var(--o-gray-14), 0.6);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 激活，常用于边框
+   */
+  --o-color-control3: rgba(var(--o-gray-14), 0.8);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 禁用，常用于边框
+   */
+  --o-color-control4: rgba(var(--o-gray-14), 0.15);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 常规-浅，常用于背景
+   */
+  --o-color-control1-light: rgb(var(--o-gray-7));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 悬浮-浅，常用于背景
+   */
+  --o-color-control2-light: rgb(var(--o-gray-5));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 激活-浅，常用于背景
+   */
+  --o-color-control3-light: rgb(var(--o-gray-6));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 禁用，常用于背景
+   */
+  --o-color-control4-light: rgb(var(--o-gray-5));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 很浅，常用于表格背景色
+   */
+  --o-color-control-light: rgb(var(--o-gray-4));
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 一级/强调/标题
+   */
+  --o-color-info1: rgba(var(--o-gray-14), 1.0);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 二级/次强调/正文
+   */
+  --o-color-info2: rgba(var(--o-gray-14), 0.8);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 三级/辅助信息
+   */
+  --o-color-info3: rgba(var(--o-gray-14), 0.6);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 置灰/禁用
+   */
+  --o-color-info4: rgba(var(--o-gray-14), 0.4);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 一级/次强调/正文反色
+   */
+  --o-color-info1-inverse: rgba(var(--o-gray-1), 1.0);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 二级/辅助信息反色
+   */
+  --o-color-info2-inverse: rgba(var(--o-gray-1), 0.8);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 三级/辅助信息反色
+   */
+  --o-color-info3-inverse: rgba(var(--o-gray-1), 0.6);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 置灰/禁用反色
+   */
+  --o-color-info4-inverse: rgba(var(--o-gray-1), 0.4);
+  /**
+   * @name 
+   * @type color
+   * @group mask
+   * @description 全局遮罩
+   */
+  --o-color-mask1: rgba(var(--o-gray-1), 0.4);
+  /**
+   * @name 
+   * @type color
+   * @group mask
+   * @description 局部遮罩
+   */
+  --o-color-mask2: rgba(var(--o-gray-4), 0.2);
+  /**
+   * @name 阴影1
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片、小弹窗、楼层阴影
+   */
+  --o-shadow-1: 0 3px 8px rgba(var(--o-gray-1), 0.08);
+  /**
+   * @name 阴影2
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片悬浮阴影
+   */
+  --o-shadow-2: 0 2px 24px rgba(var(--o-gray-1), 0.15);
+  /**
+   * @name 阴影3
+   * @type shadow
+   * @group shadow
+   * @description 用于提示阴影
+   */
+  --o-shadow-3: 0 8px 40px rgba(var(--o-gray-1), 0.1);
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 常规
+   */
+  --o-color-link1: rgba(var(--o-deepblue-6), 1.0);
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 悬浮
+   */
+  --o-color-link2: rgba(var(--o-deepblue-6), 0.7);
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 激活
+   */
+  --o-color-link3: rgba(var(--o-deepblue-6), 0.9);
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 禁用
+   */
+  --o-color-link4: rgba(var(--o-deepblue-6), 0.4);
+  /**
+   * @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: 48px;
+  /**
+   * @name 间距9
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距9
+   */
+  --o-gap-9: 64px;
+  /**
+   * @name 间距10
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距10
+   */
+  --o-gap-10: 72px;
+  /**
+   * @name 超小尺寸
+   * @type size
+   * @group control_size
+   * @description 超小尺寸
+   */
+  --o-control_size-2xs: 14px;
+  /**
+   * @name 小尺寸
+   * @type size
+   * @group control_size
+   * @description 小尺寸
+   */
+  --o-control_size-xs: 16px;
+  /**
+   * @name 小尺寸
+   * @type size
+   * @group control_size
+   * @description 小尺寸
+   */
+  --o-control_size-s: 24px;
+  /**
+   * @name 中尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-m: 32px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-l: 40px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-xl: 48px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-2xl: 56px;
+  /**
+   * @name 超小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 超小尺寸图标
+   */
+  --o-icon_size-xs: 16px;
+  /**
+   * @name 小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 小尺寸图标
+   */
+  --o-icon_size-s: 20px;
+  /**
+   * @name 中尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 中尺寸图标
+   */
+  --o-icon_size-m: 24px;
+  /**
+   * @name 大尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 大尺寸图标
+   */
+  --o-icon_size-l: 32px;
+  /**
+   * @name 超大尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 超大尺寸图标
+   */
+  --o-icon_size-xl: 40px;
+  /**
+   * @name 2xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 2xl尺寸图标
+   */
+  --o-icon_size-2xl: 48px;
+  /**
+   * @name 3xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 3xl尺寸图标
+   */
+  --o-icon_size-3xl: 56px;
+  /**
+   * @name 4xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 4xl尺寸图标
+   */
+  --o-icon_size-4xl: 64px;
+  /**
+   * @name 超小尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 超小尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-xs: 16px;
+  /**
+   * @name 小尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 小尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-s: 20px;
+  /**
+   * @name 中尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 中尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-m: 24px;
+  /**
+   * @name 大尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 大尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-l: 32px;
+  /**
+   * @name 超大尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 超大尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-xl: 40px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group font_size
+   * @description 一级数据展示
+   */
+  --o-font_size-display1: 56px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group font_size
+   * @description 二级数据展示
+   */
+  --o-font_size-display2: 48px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group font_size
+   * @description 三级数据展示
+   */
+  --o-font_size-display3: 40px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group font_size
+   * @description 一级标题
+   */
+  --o-font_size-h1: 32px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group font_size
+   * @description 二级标题
+   */
+  --o-font_size-h2: 24px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group font_size
+   * @description 三级标题
+   */
+  --o-font_size-h3: 22px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group font_size
+   * @description 四级标题
+   */
+  --o-font_size-h4: 20px;
+  /**
+   * @name 常规正文
+   * @type font
+   * @group font_size
+   * @description 常规正文
+   */
+  --o-font_size-text1: 16px;
+  /**
+   * @name 大号正文
+   * @type font
+   * @group font_size
+   * @description 大号正文
+   */
+  --o-font_size-text2: 18px;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group font_size
+   * @description 提示文本1
+   */
+  --o-font_size-tip1: 14px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group font_size
+   * @description 提示文本2
+   */
+  --o-font_size-tip2: 12px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group line_height
+   * @description 一级数据展示
+   */
+  --o-line_height-display1: 80px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group line_height
+   * @description 二级数据展示
+   */
+  --o-line_height-display2: 64px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group line_height
+   * @description 三级数据展示
+   */
+  --o-line_height-display3: 56px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group line_height
+   * @description 一级标题
+   */
+  --o-line_height-h1: 44px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group line_height
+   * @description 二级标题
+   */
+  --o-line_height-h2: 32px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group line_height
+   * @description 三级标题
+   */
+  --o-line_height-h3: 30px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group line_height
+   * @description 四级标题
+   */
+  --o-line_height-h4: 28px;
+  /**
+   * @name 正文
+   * @type font
+   * @group line_height
+   * @description 正文
+   */
+  --o-line_height-text1: 24px;
+  /**
+   * @name 正文-大
+   * @type font
+   * @group line_height
+   * @description 正文-大
+   */
+  --o-line_height-text2: 26x;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group line_height
+   * @description 提示文本1
+   */
+  --o-line_height-tip1: 22px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group line_height
+   * @description 提示文本2
+   */
+  --o-line_height-tip2: 18px;
+  /**
+   * @name 超小尺寸圆角
+   * @type size
+   * @group radius
+   * @description 超小尺寸圆角
+   */
+  --o-radius-xs: 4px;
+  /**
+   * @name 小尺寸圆角
+   * @type size
+   * @group radius
+   * @description 小尺寸圆角
+   */
+  --o-radius-s: 4px;
+  /**
+   * @name 中尺寸圆角
+   * @type size
+   * @group radius
+   * @description 中尺寸圆角
+   */
+  --o-radius-m: 4px;
+  /**
+   * @name 大尺寸圆角
+   * @type size
+   * @group radius
+   * @description 大尺寸圆角
+   */
+  --o-radius-l: 4px;
+  /**
+   * @name 大尺寸圆角
+   * @type size
+   * @group radius
+   * @description 大尺寸圆角,一般用于卡片
+   */
+  --o-radius-xl: 0px;
+  /**
+   * @name 超小尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 超小尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-xs: 4px;
+  /**
+   * @name 小尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 小尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-s: 4px;
+  /**
+   * @name 中尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 中尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-m: 4px;
+  /**
+   * @name 大尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 大尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-l: 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/theme/kunpeng/k.light.token.css b/packages/opendesign/src/theme/kunpeng/k.light.token.css
new file mode 100644
index 0000000000000000000000000000000000000000..f7446ecbb8fc98df475c46ebbeb19a02883af36b
--- /dev/null
+++ b/packages/opendesign/src/theme/kunpeng/k.light.token.css
@@ -0,0 +1,1949 @@
+/* theme: k.light */
+[data-o-theme="k.light"] {
+  /**
+   * @name 
+   * @type palette
+   * @group white
+   * @description 
+   */
+  --o-white: 255, 255, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group black
+   * @description 
+   */
+  --o-black: 0, 0, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-1: 232, 240, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-2: 194, 213, 254;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-3: 157, 184, 253;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-4: 120, 153, 252;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-5: 83, 119, 251;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-6: 46, 83, 250;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-7: 29, 55, 207;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-8: 15, 32, 163;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-9: 6, 15, 120;
+  /**
+   * @name 
+   * @type palette
+   * @group deepblue
+   * @description 
+   */
+  --o-deepblue-10: 0, 4, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-1: 232, 255, 238;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-2: 177, 239, 195;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-3: 128, 224, 158;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-4: 84, 208, 127;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-5: 45, 193, 101;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-6: 11, 177, 81;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-7: 7, 152, 72;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-8: 4, 127, 63;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-9: 2, 102, 53;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-10: 0, 77, 42;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-1: 255, 246, 232;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-2: 254, 226, 186;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-3: 253, 202, 140;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-4: 252, 176, 95;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-5: 251, 147, 50;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-6: 250, 115, 5;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-7: 207, 88, 3;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-8: 163, 64, 2;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-9: 120, 42, 1;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-10: 77, 24, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-1: 255, 234, 232;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-2: 250, 185, 182;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-3: 245, 136, 134;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-4: 240, 87, 90;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-5: 235, 43, 52;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-6: 230, 0, 18;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-7: 192, 0, 22;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-8: 153, 0, 23;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-9: 115, 0, 21;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-10: 77, 0, 17;
+  /**
+   * @name 
+   * @type palette
+   * @group huaweired
+   * @description 
+   */
+  --o-red-huawei: 199, 0, 11;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-1: 255, 255, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-2: 243, 243, 245;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-3: 237, 237, 240;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-4: 232, 232, 235;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-5: 222, 222, 227;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-6: 210, 210, 217;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-7: 186, 186, 191;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-8: 149, 149, 156;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-9: 111, 111, 117;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-10: 85, 85, 92;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-11: 61, 61, 66;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-12: 37, 37, 41;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-13: 21, 21, 23;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-14: 0, 0, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-1: 255, 255, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-2: 244, 245, 247;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-3: 237, 239, 242;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-4: 232, 234, 237;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-5: 224, 226, 230;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-6: 209, 214, 219;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-7: 179, 185, 191;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-8: 144, 150, 158;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-9: 104, 109, 117;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-10: 79, 84, 92;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-11: 55, 59, 66;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-12: 32, 35, 41;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-13: 18, 20, 23;
+  /**
+   * @name 
+   * @type palette
+   * @group mixedgray
+   * @description 
+   */
+  --o-mixedgray-14: 0, 0, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-1: 255, 255, 232;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-2: 253, 251, 185;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-3: 251, 244, 139;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-4: 249, 233, 94;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-5: 247, 221, 49;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-6: 245, 205, 5;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-7: 203, 163, 3;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-8: 161, 124, 2;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-9: 119, 87, 1;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-10: 77, 54, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-1: 251, 255, 232;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-2: 233, 245, 184;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-3: 213, 236, 139;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-4: 192, 226, 97;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-5: 169, 217, 59;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-6: 146, 207, 23;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-7: 116, 174, 15;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-8: 88, 142, 8;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-9: 63, 109, 3;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-10: 41, 77, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-1: 232, 255, 249;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-2: 176, 240, 226;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-3: 125, 225, 207;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-4: 79, 211, 191;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-5: 38, 196, 177;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-6: 3, 181, 165;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-7: 2, 155, 147;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-8: 1, 129, 127;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-9: 0, 101, 103;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-10: 0, 73, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-1: 232, 249, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-2: 185, 233, 252;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-3: 138, 214, 249;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-4: 93, 192, 246;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-5: 48, 168, 243;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-6: 5, 142, 240;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-7: 3, 111, 199;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-8: 2, 83, 158;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-9: 1, 57, 117;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-10: 0, 34, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-1: 245, 232, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-2: 225, 192, 253;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-3: 203, 152, 251;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-4: 178, 113, 248;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-5: 152, 75, 246;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-6: 123, 37, 244;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-7: 92, 23, 202;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-8: 64, 12, 160;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-9: 41, 4, 118;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-10: 22, 0, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-1: 255, 232, 253;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-2: 246, 188, 243;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-3: 238, 146, 235;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-4: 229, 107, 229;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-5: 216, 71, 221;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-6: 199, 37, 212;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-7: 163, 23, 178;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-8: 127, 13, 144;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-9: 93, 5, 110;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-10: 61, 0, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-1: 255, 232, 240;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-2: 249, 185, 209;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-3: 243, 141, 182;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-4: 238, 98, 158;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-5: 232, 57, 139;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-6: 226, 18, 122;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-7: 189, 11, 106;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-8: 151, 6, 88;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-9: 114, 2, 69;
+  /**
+   * @name 
+   * @type palette
+   * @group rosyred
+   * @description 
+   */
+  --o-rosyred-10: 77, 0, 48;
+  /**
+   * @name 
+   * @type color
+   * @group base
+   * @description 
+   */
+  --o-color-white: rgb(var(--o-white));
+  /**
+   * @name 
+   * @type color
+   * @group base
+   * @description 
+   */
+  --o-color-black: rgb(var(--o-black));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 常规
+   */
+  --o-color-primary1: rgb(var(--o-gray-12));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 悬浮
+   */
+  --o-color-primary2: rgb(var(--o-gray-11));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 激活
+   */
+  --o-color-primary3: rgb(var(--o-gray-13));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 禁用
+   */
+  --o-color-primary4: rgb(var(--o-gray-6));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 常规-浅
+   */
+  --o-color-primary1-light: rgb(var(--o-gray-4));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 悬浮-浅
+   */
+  --o-color-primary2-light: rgb(var(--o-gray-5));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 激活-浅
+   */
+  --o-color-primary3-light: rgb(var(--o-gray-6));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 禁用-浅
+   */
+  --o-color-primary4-light: rgb(var(--o-gray-5));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 常规
+   */
+  --o-color-success1: rgb(var(--o-green-6));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 悬浮
+   */
+  --o-color-success2: rgb(var(--o-green-4));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 激活
+   */
+  --o-color-success3: rgb(var(--o-green-7));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 禁用
+   */
+  --o-color-success4: rgb(var(--o-green-3));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 常规-浅
+   */
+  --o-color-success1-light: rgb(var(--o-green-2));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 悬浮-浅
+   */
+  --o-color-success2-light: rgb(var(--o-green-3));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 激活-浅
+   */
+  --o-color-success3-light: rgb(var(--o-green-4));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 禁用-浅
+   */
+  --o-color-success4-light: rgb(var(--o-green-1));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 常规
+   */
+  --o-color-warning1: rgb(var(--o-orange-6));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 悬浮
+   */
+  --o-color-warning2: rgb(var(--o-orange-4));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 激活
+   */
+  --o-color-warning3: rgb(var(--o-orange-7));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 禁用
+   */
+  --o-color-warning4: rgb(var(--o-orange-3));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 常规-浅
+   */
+  --o-color-warning1-light: rgb(var(--o-orange-2));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 悬浮-浅
+   */
+  --o-color-warning2-light: rgb(var(--o-orange-3));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 激活-浅
+   */
+  --o-color-warning3-light: rgb(var(--o-orange-4));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 禁用-浅
+   */
+  --o-color-warning4-light: rgb(var(--o-orange-1));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 常规
+   */
+  --o-color-danger1: rgb(var(--o-red-6));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 悬浮
+   */
+  --o-color-danger2: rgb(var(--o-red-4));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 激活
+   */
+  --o-color-danger3: rgb(var(--o-red-7));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 禁用
+   */
+  --o-color-danger4: rgb(var(--o-red-3));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 常规-浅
+   */
+  --o-color-danger1-light: rgb(var(--o-red-2));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 悬浮-浅
+   */
+  --o-color-danger2-light: rgb(var(--o-red-3));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 激活-浅
+   */
+  --o-color-danger3-light: rgb(var(--o-red-4));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 禁用-浅
+   */
+  --o-color-danger4-light: rgb(var(--o-red-1));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 一级填充：页面背景
+   */
+  --o-color-fill1: rgb(var(--o-gray-2));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 二级填充：区块、卡片
+   */
+  --o-color-fill2: rgb(var(--o-gray-1));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 三级填充：卡片
+   */
+  --o-color-fill3: rgb(var(--o-gray-3));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 常规，常用于边框
+   */
+  --o-color-control1: rgba(var(--o-gray-14), 0.25);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 悬浮，常用于边框
+   */
+  --o-color-control2: rgba(var(--o-gray-14), 0.6);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 激活，常用于边框
+   */
+  --o-color-control3: rgba(var(--o-gray-14), 0.8);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 禁用，常用于边框
+   */
+  --o-color-control4: rgba(var(--o-gray-14), 0.1);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 常规-浅，常用于背景
+   */
+  --o-color-control1-light: rgb(var(--o-gray-5));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 悬浮-浅，常用于背景
+   */
+  --o-color-control2-light: rgb(var(--o-gray-3));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 激活-浅，常用于背景
+   */
+  --o-color-control3-light: rgb(var(--o-gray-4));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 禁用，常用于背景
+   */
+  --o-color-control4-light: rgb(var(--o-gray-3));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 很浅，常用于表格背景色
+   */
+  --o-color-control-light: rgb(var(--o-gray-1));
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 一级/强调/标题
+   */
+  --o-color-info1: rgba(var(--o-gray-14), 1.0);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 二级/次强调/正文
+   */
+  --o-color-info2: rgba(var(--o-gray-14), 0.8);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 三级/辅助信息
+   */
+  --o-color-info3: rgba(var(--o-gray-14), 0.6);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 置灰/禁用
+   */
+  --o-color-info4: rgba(var(--o-gray-14), 0.4);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 一级/次强调/正文反色
+   */
+  --o-color-info1-inverse: rgba(var(--o-gray-1), 1.0);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 二级/辅助信息反色
+   */
+  --o-color-info2-inverse: rgba(var(--o-gray-1), 0.8);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 三级/辅助信息反色
+   */
+  --o-color-info3-inverse: rgba(var(--o-gray-1), 0.6);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 置灰/禁用反色
+   */
+  --o-color-info4-inverse: rgba(var(--o-gray-1), 0.4);
+  /**
+   * @name 
+   * @type color
+   * @group mask
+   * @description 全局遮罩
+   */
+  --o-color-mask1: rgba(var(--o-gray-14), 0.4);
+  /**
+   * @name 
+   * @type color
+   * @group mask
+   * @description 局部遮罩
+   */
+  --o-color-mask2: rgba(var(--o-gray-1), 0.2);
+  /**
+   * @name 阴影1
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片、小弹窗、楼层阴影
+   */
+  --o-shadow-1: 0 3px 8px rgba(var(--o-gray-14), 0.08);
+  /**
+   * @name 阴影2
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片悬浮阴影
+   */
+  --o-shadow-2: 0 2px 24px rgba(var(--o-gray-14), 0.15);
+  /**
+   * @name 阴影3
+   * @type shadow
+   * @group shadow
+   * @description 用于提示阴影
+   */
+  --o-shadow-3: 0 8px 40px rgba(var(--o-gray-14), 0.1);
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 常规
+   */
+  --o-color-link1: rgba(var(--o-deepblue-6), 1.0);
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 悬浮
+   */
+  --o-color-link2: rgba(var(--o-deepblue-6), 0.7);
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 激活
+   */
+  --o-color-link3: rgba(var(--o-deepblue-6), 0.9);
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 禁用
+   */
+  --o-color-link4: rgba(var(--o-deepblue-6), 0.4);
+  /**
+   * @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: 48px;
+  /**
+   * @name 间距9
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距9
+   */
+  --o-gap-9: 64px;
+  /**
+   * @name 间距10
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距10
+   */
+  --o-gap-10: 72px;
+  /**
+   * @name 超小尺寸
+   * @type size
+   * @group control_size
+   * @description 超小尺寸
+   */
+  --o-control_size-2xs: 14px;
+  /**
+   * @name 小尺寸
+   * @type size
+   * @group control_size
+   * @description 小尺寸
+   */
+  --o-control_size-xs: 16px;
+  /**
+   * @name 小尺寸
+   * @type size
+   * @group control_size
+   * @description 小尺寸
+   */
+  --o-control_size-s: 24px;
+  /**
+   * @name 中尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-m: 32px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-l: 40px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-xl: 48px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-2xl: 56px;
+  /**
+   * @name 超小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 超小尺寸图标
+   */
+  --o-icon_size-xs: 16px;
+  /**
+   * @name 小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 小尺寸图标
+   */
+  --o-icon_size-s: 20px;
+  /**
+   * @name 中尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 中尺寸图标
+   */
+  --o-icon_size-m: 24px;
+  /**
+   * @name 大尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 大尺寸图标
+   */
+  --o-icon_size-l: 32px;
+  /**
+   * @name 超大尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 超大尺寸图标
+   */
+  --o-icon_size-xl: 40px;
+  /**
+   * @name 2xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 2xl尺寸图标
+   */
+  --o-icon_size-2xl: 48px;
+  /**
+   * @name 3xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 3xl尺寸图标
+   */
+  --o-icon_size-3xl: 56px;
+  /**
+   * @name 4xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 4xl尺寸图标
+   */
+  --o-icon_size-4xl: 64px;
+  /**
+   * @name 超小尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 超小尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-xs: 16px;
+  /**
+   * @name 小尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 小尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-s: 20px;
+  /**
+   * @name 中尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 中尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-m: 24px;
+  /**
+   * @name 大尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 大尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-l: 32px;
+  /**
+   * @name 超大尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 超大尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-xl: 40px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group font_size
+   * @description 一级数据展示
+   */
+  --o-font_size-display1: 56px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group font_size
+   * @description 二级数据展示
+   */
+  --o-font_size-display2: 48px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group font_size
+   * @description 三级数据展示
+   */
+  --o-font_size-display3: 40px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group font_size
+   * @description 一级标题
+   */
+  --o-font_size-h1: 32px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group font_size
+   * @description 二级标题
+   */
+  --o-font_size-h2: 24px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group font_size
+   * @description 三级标题
+   */
+  --o-font_size-h3: 22px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group font_size
+   * @description 四级标题
+   */
+  --o-font_size-h4: 20px;
+  /**
+   * @name 常规正文
+   * @type font
+   * @group font_size
+   * @description 常规正文
+   */
+  --o-font_size-text1: 16px;
+  /**
+   * @name 大号正文
+   * @type font
+   * @group font_size
+   * @description 大号正文
+   */
+  --o-font_size-text2: 18px;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group font_size
+   * @description 提示文本1
+   */
+  --o-font_size-tip1: 14px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group font_size
+   * @description 提示文本2
+   */
+  --o-font_size-tip2: 12px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group line_height
+   * @description 一级数据展示
+   */
+  --o-line_height-display1: 80px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group line_height
+   * @description 二级数据展示
+   */
+  --o-line_height-display2: 64px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group line_height
+   * @description 三级数据展示
+   */
+  --o-line_height-display3: 56px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group line_height
+   * @description 一级标题
+   */
+  --o-line_height-h1: 44px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group line_height
+   * @description 二级标题
+   */
+  --o-line_height-h2: 32px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group line_height
+   * @description 三级标题
+   */
+  --o-line_height-h3: 30px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group line_height
+   * @description 四级标题
+   */
+  --o-line_height-h4: 28px;
+  /**
+   * @name 正文
+   * @type font
+   * @group line_height
+   * @description 正文
+   */
+  --o-line_height-text1: 24px;
+  /**
+   * @name 正文-大
+   * @type font
+   * @group line_height
+   * @description 正文-大
+   */
+  --o-line_height-text2: 26px;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group line_height
+   * @description 提示文本1
+   */
+  --o-line_height-tip1: 22px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group line_height
+   * @description 提示文本2
+   */
+  --o-line_height-tip2: 18px;
+  /**
+   * @name 超小尺寸圆角
+   * @type size
+   * @group radius
+   * @description 超小尺寸圆角
+   */
+  --o-radius-xs: 4px;
+  /**
+   * @name 小尺寸圆角
+   * @type size
+   * @group radius
+   * @description 小尺寸圆角
+   */
+  --o-radius-s: 4px;
+  /**
+   * @name 中尺寸圆角
+   * @type size
+   * @group radius
+   * @description 中尺寸圆角
+   */
+  --o-radius-m: 4px;
+  /**
+   * @name 大尺寸圆角
+   * @type size
+   * @group radius
+   * @description 大尺寸圆角
+   */
+  --o-radius-l: 4px;
+  /**
+   * @name 大尺寸圆角
+   * @type size
+   * @group radius
+   * @description 大尺寸圆角,一般用于卡片
+   */
+  --o-radius-xl: 0px;
+  /**
+   * @name 超小尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 超小尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-xs: 4px;
+  /**
+   * @name 小尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 小尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-s: 4px;
+  /**
+   * @name 中尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 中尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-m: 4px;
+  /**
+   * @name 大尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 大尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-l: 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/theme/kunpeng/k.token.code-snippets b/packages/opendesign/src/theme/kunpeng/k.token.code-snippets
new file mode 100644
index 0000000000000000000000000000000000000000..7ece562a003558cdc2f12ea8384d35cc640eec0d
--- /dev/null
+++ b/packages/opendesign/src/theme/kunpeng/k.token.code-snippets
@@ -0,0 +1,2226 @@
+{
+  "--o-white": {
+    "prefix": [
+      "var(--o-white)"
+    ],
+    "body": "var(--o-white)",
+    "description": "[light: 255, 255, 255, dark: 255, 255, 255]",
+    "scope": "css,scss,less"
+  },
+  "--o-black": {
+    "prefix": [
+      "var(--o-black)"
+    ],
+    "body": "var(--o-black)",
+    "description": "[light: 0, 0, 0, dark: 0, 0, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-deepblue-1": {
+    "prefix": [
+      "var(--o-deepblue-1)"
+    ],
+    "body": "var(--o-deepblue-1)",
+    "description": "[light: 232, 240, 255, dark: 0, 4, 77]",
+    "scope": "css,scss,less"
+  },
+  "--o-deepblue-2": {
+    "prefix": [
+      "var(--o-deepblue-2)"
+    ],
+    "body": "var(--o-deepblue-2)",
+    "description": "[light: 194, 213, 254, dark: 6, 15, 120]",
+    "scope": "css,scss,less"
+  },
+  "--o-deepblue-3": {
+    "prefix": [
+      "var(--o-deepblue-3)"
+    ],
+    "body": "var(--o-deepblue-3)",
+    "description": "[light: 157, 184, 253, dark: 20, 37, 163]",
+    "scope": "css,scss,less"
+  },
+  "--o-deepblue-4": {
+    "prefix": [
+      "var(--o-deepblue-4)"
+    ],
+    "body": "var(--o-deepblue-4)",
+    "description": "[light: 120, 153, 252, dark: 40, 65, 207]",
+    "scope": "css,scss,less"
+  },
+  "--o-deepblue-5": {
+    "prefix": [
+      "var(--o-deepblue-5)"
+    ],
+    "body": "var(--o-deepblue-5)",
+    "description": "[light: 83, 119, 251, dark: 66, 99, 250]",
+    "scope": "css,scss,less"
+  },
+  "--o-deepblue-6": {
+    "prefix": [
+      "var(--o-deepblue-6)"
+    ],
+    "body": "var(--o-deepblue-6)",
+    "description": "[light: 46, 83, 250, dark: 84, 120, 251]",
+    "scope": "css,scss,less"
+  },
+  "--o-deepblue-7": {
+    "prefix": [
+      "var(--o-deepblue-7)"
+    ],
+    "body": "var(--o-deepblue-7)",
+    "description": "[light: 29, 55, 207, dark: 122, 154, 252]",
+    "scope": "css,scss,less"
+  },
+  "--o-deepblue-8": {
+    "prefix": [
+      "var(--o-deepblue-8)"
+    ],
+    "body": "var(--o-deepblue-8)",
+    "description": "[light: 15, 32, 163, dark: 160, 186, 253]",
+    "scope": "css,scss,less"
+  },
+  "--o-deepblue-9": {
+    "prefix": [
+      "var(--o-deepblue-9)"
+    ],
+    "body": "var(--o-deepblue-9)",
+    "description": "[light: 6, 15, 120, dark: 199, 217, 254]",
+    "scope": "css,scss,less"
+  },
+  "--o-deepblue-10": {
+    "prefix": [
+      "var(--o-deepblue-10)"
+    ],
+    "body": "var(--o-deepblue-10)",
+    "description": "[light: 0, 4, 77, dark: 238, 244, 255]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-1": {
+    "prefix": [
+      "var(--o-green-1)"
+    ],
+    "body": "var(--o-green-1)",
+    "description": "[light: 232, 255, 238, dark: 0, 77, 42]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-2": {
+    "prefix": [
+      "var(--o-green-2)"
+    ],
+    "body": "var(--o-green-2)",
+    "description": "[light: 177, 239, 195, dark: 2, 102, 53]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-3": {
+    "prefix": [
+      "var(--o-green-3)"
+    ],
+    "body": "var(--o-green-3)",
+    "description": "[light: 128, 224, 158, dark: 10, 127, 66]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-4": {
+    "prefix": [
+      "var(--o-green-4)"
+    ],
+    "body": "var(--o-green-4)",
+    "description": "[light: 84, 208, 127, dark: 22, 152, 80]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-5": {
+    "prefix": [
+      "var(--o-green-5)"
+    ],
+    "body": "var(--o-green-5)",
+    "description": "[light: 45, 193, 101, dark: 36, 177, 95]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-6": {
+    "prefix": [
+      "var(--o-green-6)"
+    ],
+    "body": "var(--o-green-6)",
+    "description": "[light: 11, 177, 81, dark: 51, 193, 104]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-7": {
+    "prefix": [
+      "var(--o-green-7)"
+    ],
+    "body": "var(--o-green-7)",
+    "description": "[light: 7, 152, 72, dark: 90, 208, 131]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-8": {
+    "prefix": [
+      "var(--o-green-8)"
+    ],
+    "body": "var(--o-green-8)",
+    "description": "[light: 4, 127, 63, dark: 135, 224, 163]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-9": {
+    "prefix": [
+      "var(--o-green-9)"
+    ],
+    "body": "var(--o-green-9)",
+    "description": "[light: 2, 102, 53, dark: 185, 239, 200]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-10": {
+    "prefix": [
+      "var(--o-green-10)"
+    ],
+    "body": "var(--o-green-10)",
+    "description": "[light: 0, 77, 42, dark: 240, 255, 244]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-1": {
+    "prefix": [
+      "var(--o-orange-1)"
+    ],
+    "body": "var(--o-orange-1)",
+    "description": "[light: 255, 246, 232, dark: 77, 24, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-2": {
+    "prefix": [
+      "var(--o-orange-2)"
+    ],
+    "body": "var(--o-orange-2)",
+    "description": "[light: 254, 226, 186, dark: 120, 42, 1]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-3": {
+    "prefix": [
+      "var(--o-orange-3)"
+    ],
+    "body": "var(--o-orange-3)",
+    "description": "[light: 253, 202, 140, dark: 163, 68, 8]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-4": {
+    "prefix": [
+      "var(--o-orange-4)"
+    ],
+    "body": "var(--o-orange-4)",
+    "description": "[light: 252, 176, 95, dark: 207, 97, 19]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-5": {
+    "prefix": [
+      "var(--o-orange-5)"
+    ],
+    "body": "var(--o-orange-5)",
+    "description": "[light: 251, 147, 50, dark: 250, 130, 33]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-6": {
+    "prefix": [
+      "var(--o-orange-6)"
+    ],
+    "body": "var(--o-orange-6)",
+    "description": "[light: 250, 115, 5, dark: 251, 143, 43]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-7": {
+    "prefix": [
+      "var(--o-orange-7)"
+    ],
+    "body": "var(--o-orange-7)",
+    "description": "[light: 207, 88, 3, dark: 252, 174, 91]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-8": {
+    "prefix": [
+      "var(--o-orange-8)"
+    ],
+    "body": "var(--o-orange-8)",
+    "description": "[light: 163, 64, 2, dark: 253, 202, 139]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-9": {
+    "prefix": [
+      "var(--o-orange-9)"
+    ],
+    "body": "var(--o-orange-9)",
+    "description": "[light: 120, 42, 1, dark: 254, 227, 188]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-10": {
+    "prefix": [
+      "var(--o-orange-10)"
+    ],
+    "body": "var(--o-orange-10)",
+    "description": "[light: 77, 24, 0, dark: 255, 248, 237]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-1": {
+    "prefix": [
+      "var(--o-red-1)"
+    ],
+    "body": "var(--o-red-1)",
+    "description": "[light: 255, 234, 232, dark: 77, 0, 17]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-2": {
+    "prefix": [
+      "var(--o-red-2)"
+    ],
+    "body": "var(--o-red-2)",
+    "description": "[light: 250, 185, 182, dark: 115, 3, 24]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-3": {
+    "prefix": [
+      "var(--o-red-3)"
+    ],
+    "body": "var(--o-red-3)",
+    "description": "[light: 245, 136, 134, dark: 153, 9, 31]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-4": {
+    "prefix": [
+      "var(--o-red-4)"
+    ],
+    "body": "var(--o-red-4)",
+    "description": "[light: 240, 87, 90, dark: 192, 17, 37]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-5": {
+    "prefix": [
+      "var(--o-red-5)"
+    ],
+    "body": "var(--o-red-5)",
+    "description": "[light: 235, 43, 52, dark: 230, 28, 43]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-6": {
+    "prefix": [
+      "var(--o-red-6)"
+    ],
+    "body": "var(--o-red-6)",
+    "description": "[light: 230, 0, 18, dark: 235, 35, 45]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-7": {
+    "prefix": [
+      "var(--o-red-7)"
+    ],
+    "body": "var(--o-red-7)",
+    "description": "[light: 192, 0, 22, dark: 240, 82, 85]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-8": {
+    "prefix": [
+      "var(--o-red-8)"
+    ],
+    "body": "var(--o-red-8)",
+    "description": "[light: 153, 0, 23, dark: 245, 132, 130]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-9": {
+    "prefix": [
+      "var(--o-red-9)"
+    ],
+    "body": "var(--o-red-9)",
+    "description": "[light: 115, 0, 21, dark: 250, 183, 180]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-10": {
+    "prefix": [
+      "var(--o-red-10)"
+    ],
+    "body": "var(--o-red-10)",
+    "description": "[light: 77, 0, 17, dark: 255, 234, 232]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-huawei": {
+    "prefix": [
+      "var(--o-red-huawei)"
+    ],
+    "body": "var(--o-red-huawei)",
+    "description": "[light: 199, 0, 11, dark: 199, 0, 11]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-1": {
+    "prefix": [
+      "var(--o-gray-1)"
+    ],
+    "body": "var(--o-gray-1)",
+    "description": "[light: 255, 255, 255, dark: 0, 0, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-2": {
+    "prefix": [
+      "var(--o-gray-2)"
+    ],
+    "body": "var(--o-gray-2)",
+    "description": "[light: 243, 243, 245, dark: 18, 18, 20]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-3": {
+    "prefix": [
+      "var(--o-gray-3)"
+    ],
+    "body": "var(--o-gray-3)",
+    "description": "[light: 237, 237, 240, dark: 26, 26, 28]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-4": {
+    "prefix": [
+      "var(--o-gray-4)"
+    ],
+    "body": "var(--o-gray-4)",
+    "description": "[light: 232, 232, 235, dark: 36, 36, 39]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-5": {
+    "prefix": [
+      "var(--o-gray-5)"
+    ],
+    "body": "var(--o-gray-5)",
+    "description": "[light: 222, 222, 227, dark: 43, 43, 47]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-6": {
+    "prefix": [
+      "var(--o-gray-6)"
+    ],
+    "body": "var(--o-gray-6)",
+    "description": "[light: 210, 210, 217, dark: 53, 53, 57]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-7": {
+    "prefix": [
+      "var(--o-gray-7)"
+    ],
+    "body": "var(--o-gray-7)",
+    "description": "[light: 186, 186, 191, dark: 63, 63, 67]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-8": {
+    "prefix": [
+      "var(--o-gray-8)"
+    ],
+    "body": "var(--o-gray-8)",
+    "description": "[light: 149, 149, 156, dark: 85, 85, 88]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-9": {
+    "prefix": [
+      "var(--o-gray-9)"
+    ],
+    "body": "var(--o-gray-9)",
+    "description": "[light: 111, 111, 117, dark: 118, 118, 122]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-10": {
+    "prefix": [
+      "var(--o-gray-10)"
+    ],
+    "body": "var(--o-gray-10)",
+    "description": "[light: 85, 85, 92, dark: 156, 156, 159]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-11": {
+    "prefix": [
+      "var(--o-gray-11)"
+    ],
+    "body": "var(--o-gray-11)",
+    "description": "[light: 61, 61, 66, dark: 181, 181, 185]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-12": {
+    "prefix": [
+      "var(--o-gray-12)"
+    ],
+    "body": "var(--o-gray-12)",
+    "description": "[light: 37, 37, 41, dark: 208, 208, 210]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-13": {
+    "prefix": [
+      "var(--o-gray-13)"
+    ],
+    "body": "var(--o-gray-13)",
+    "description": "[light: 21, 21, 23, dark: 235, 235, 238]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-14": {
+    "prefix": [
+      "var(--o-gray-14)"
+    ],
+    "body": "var(--o-gray-14)",
+    "description": "[light: 0, 0, 0, dark: 255, 255, 255]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-1": {
+    "prefix": [
+      "var(--o-mixedgray-1)"
+    ],
+    "body": "var(--o-mixedgray-1)",
+    "description": "[light: 255, 255, 255, dark: 0, 0, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-2": {
+    "prefix": [
+      "var(--o-mixedgray-2)"
+    ],
+    "body": "var(--o-mixedgray-2)",
+    "description": "[light: 244, 245, 247, dark: 16, 18, 20]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-3": {
+    "prefix": [
+      "var(--o-mixedgray-3)"
+    ],
+    "body": "var(--o-mixedgray-3)",
+    "description": "[light: 237, 239, 242, dark: 23, 25, 28]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-4": {
+    "prefix": [
+      "var(--o-mixedgray-4)"
+    ],
+    "body": "var(--o-mixedgray-4)",
+    "description": "[light: 232, 234, 237, dark: 33, 35, 39]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-5": {
+    "prefix": [
+      "var(--o-mixedgray-5)"
+    ],
+    "body": "var(--o-mixedgray-5)",
+    "description": "[light: 224, 226, 230, dark: 40, 42, 47]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-6": {
+    "prefix": [
+      "var(--o-mixedgray-6)"
+    ],
+    "body": "var(--o-mixedgray-6)",
+    "description": "[light: 209, 214, 219, dark: 50, 53, 57]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-7": {
+    "prefix": [
+      "var(--o-mixedgray-7)"
+    ],
+    "body": "var(--o-mixedgray-7)",
+    "description": "[light: 179, 185, 191, dark: 61, 63, 67]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-8": {
+    "prefix": [
+      "var(--o-mixedgray-8)"
+    ],
+    "body": "var(--o-mixedgray-8)",
+    "description": "[light: 144, 150, 158, dark: 80, 84, 88]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-9": {
+    "prefix": [
+      "var(--o-mixedgray-9)"
+    ],
+    "body": "var(--o-mixedgray-9)",
+    "description": "[light: 104, 109, 117, dark: 113, 117, 122]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-10": {
+    "prefix": [
+      "var(--o-mixedgray-10)"
+    ],
+    "body": "var(--o-mixedgray-10)",
+    "description": "[light: 79, 84, 92, dark: 147, 152, 159]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-11": {
+    "prefix": [
+      "var(--o-mixedgray-11)"
+    ],
+    "body": "var(--o-mixedgray-11)",
+    "description": "[light: 55, 59, 66, dark: 172, 177, 185]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-12": {
+    "prefix": [
+      "var(--o-mixedgray-12)"
+    ],
+    "body": "var(--o-mixedgray-12)",
+    "description": "[light: 32, 35, 41, dark: 198, 202, 210]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-13": {
+    "prefix": [
+      "var(--o-mixedgray-13)"
+    ],
+    "body": "var(--o-mixedgray-13)",
+    "description": "[light: 18, 20, 23, dark: 231, 234, 238]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-14": {
+    "prefix": [
+      "var(--o-mixedgray-14)"
+    ],
+    "body": "var(--o-mixedgray-14)",
+    "description": "[light: 0, 0, 0, dark: 255, 255, 255]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-1": {
+    "prefix": [
+      "var(--o-yellow-1)"
+    ],
+    "body": "var(--o-yellow-1)",
+    "description": "[light: 255, 255, 232, dark: 77, 54, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-2": {
+    "prefix": [
+      "var(--o-yellow-2)"
+    ],
+    "body": "var(--o-yellow-2)",
+    "description": "[light: 253, 251, 185, dark: 119, 87, 2]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-3": {
+    "prefix": [
+      "var(--o-yellow-3)"
+    ],
+    "body": "var(--o-yellow-3)",
+    "description": "[light: 251, 244, 139, dark: 161, 126, 11]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-4": {
+    "prefix": [
+      "var(--o-yellow-4)"
+    ],
+    "body": "var(--o-yellow-4)",
+    "description": "[light: 249, 233, 94, dark: 203, 167, 24]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-5": {
+    "prefix": [
+      "var(--o-yellow-5)"
+    ],
+    "body": "var(--o-yellow-5)",
+    "description": "[light: 247, 221, 49, dark: 245, 211, 42]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-6": {
+    "prefix": [
+      "var(--o-yellow-6)"
+    ],
+    "body": "var(--o-yellow-6)",
+    "description": "[light: 245, 205, 5, dark: 247, 222, 54]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-7": {
+    "prefix": [
+      "var(--o-yellow-7)"
+    ],
+    "body": "var(--o-yellow-7)",
+    "description": "[light: 203, 163, 3, dark: 249, 234, 100]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-8": {
+    "prefix": [
+      "var(--o-yellow-8)"
+    ],
+    "body": "var(--o-yellow-8)",
+    "description": "[light: 161, 124, 2, dark: 251, 244, 146]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-9": {
+    "prefix": [
+      "var(--o-yellow-9)"
+    ],
+    "body": "var(--o-yellow-9)",
+    "description": "[light: 119, 87, 1, dark: 253, 251, 192]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-10": {
+    "prefix": [
+      "var(--o-yellow-10)"
+    ],
+    "body": "var(--o-yellow-10)",
+    "description": "[light: 77, 54, 0, dark: 255, 255, 240]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-1": {
+    "prefix": [
+      "var(--o-lime-1)"
+    ],
+    "body": "var(--o-lime-1)",
+    "description": "[light: 251, 255, 232, dark: 41, 77, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-2": {
+    "prefix": [
+      "var(--o-lime-2)"
+    ],
+    "body": "var(--o-lime-2)",
+    "description": "[light: 233, 245, 184, dark: 63, 109, 3]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-3": {
+    "prefix": [
+      "var(--o-lime-3)"
+    ],
+    "body": "var(--o-lime-3)",
+    "description": "[light: 213, 236, 139, dark: 91, 142, 14]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-4": {
+    "prefix": [
+      "var(--o-lime-4)"
+    ],
+    "body": "var(--o-lime-4)",
+    "description": "[light: 192, 226, 97, dark: 121, 174, 30]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-5": {
+    "prefix": [
+      "var(--o-lime-5)"
+    ],
+    "body": "var(--o-lime-5)",
+    "description": "[light: 169, 217, 59, dark: 155, 207, 50]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-6": {
+    "prefix": [
+      "var(--o-lime-6)"
+    ],
+    "body": "var(--o-lime-6)",
+    "description": "[light: 146, 207, 23, dark: 172, 217, 68]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-7": {
+    "prefix": [
+      "var(--o-lime-7)"
+    ],
+    "body": "var(--o-lime-7)",
+    "description": "[light: 116, 174, 15, dark: 194, 226, 104]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-8": {
+    "prefix": [
+      "var(--o-lime-8)"
+    ],
+    "body": "var(--o-lime-8)",
+    "description": "[light: 88, 142, 8, dark: 214, 236, 144]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-9": {
+    "prefix": [
+      "var(--o-lime-9)"
+    ],
+    "body": "var(--o-lime-9)",
+    "description": "[light: 63, 109, 3, dark: 233, 245, 186]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-10": {
+    "prefix": [
+      "var(--o-lime-10)"
+    ],
+    "body": "var(--o-lime-10)",
+    "description": "[light: 41, 77, 0, dark: 251, 255, 232]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-1": {
+    "prefix": [
+      "var(--o-cyan-1)"
+    ],
+    "body": "var(--o-cyan-1)",
+    "description": "[light: 232, 255, 249, dark: 0, 73, 77]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-2": {
+    "prefix": [
+      "var(--o-cyan-2)"
+    ],
+    "body": "var(--o-cyan-2)",
+    "description": "[light: 176, 240, 226, dark: 2, 101, 103]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-3": {
+    "prefix": [
+      "var(--o-cyan-3)"
+    ],
+    "body": "var(--o-cyan-3)",
+    "description": "[light: 125, 225, 207, dark: 9, 129, 127]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-4": {
+    "prefix": [
+      "var(--o-cyan-4)"
+    ],
+    "body": "var(--o-cyan-4)",
+    "description": "[light: 79, 211, 191, dark: 18, 155, 148]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-5": {
+    "prefix": [
+      "var(--o-cyan-5)"
+    ],
+    "body": "var(--o-cyan-5)",
+    "description": "[light: 38, 196, 177, dark: 30, 181, 167]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-6": {
+    "prefix": [
+      "var(--o-cyan-6)"
+    ],
+    "body": "var(--o-cyan-6)",
+    "description": "[light: 3, 181, 165, dark: 42, 196, 178]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-7": {
+    "prefix": [
+      "var(--o-cyan-7)"
+    ],
+    "body": "var(--o-cyan-7)",
+    "description": "[light: 2, 155, 147, dark: 84, 211, 192]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-8": {
+    "prefix": [
+      "var(--o-cyan-8)"
+    ],
+    "body": "var(--o-cyan-8)",
+    "description": "[light: 1, 129, 127, dark: 130, 225, 208]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-9": {
+    "prefix": [
+      "var(--o-cyan-9)"
+    ],
+    "body": "var(--o-cyan-9)",
+    "description": "[light: 0, 101, 103, dark: 182, 240, 227]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-10": {
+    "prefix": [
+      "var(--o-cyan-10)"
+    ],
+    "body": "var(--o-cyan-10)",
+    "description": "[light: 0, 73, 77, dark: 239, 255, 251]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-1": {
+    "prefix": [
+      "var(--o-blue-1)"
+    ],
+    "body": "var(--o-blue-1)",
+    "description": "[light: 232, 249, 255, dark: 0, 34, 77]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-2": {
+    "prefix": [
+      "var(--o-blue-2)"
+    ],
+    "body": "var(--o-blue-2)",
+    "description": "[light: 185, 233, 252, dark: 1, 57, 117]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-3": {
+    "prefix": [
+      "var(--o-blue-3)"
+    ],
+    "body": "var(--o-blue-3)",
+    "description": "[light: 138, 214, 249, dark: 8, 86, 158]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-4": {
+    "prefix": [
+      "var(--o-blue-4)"
+    ],
+    "body": "var(--o-blue-4)",
+    "description": "[light: 93, 192, 246, dark: 18, 118, 199]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-5": {
+    "prefix": [
+      "var(--o-blue-5)"
+    ],
+    "body": "var(--o-blue-5)",
+    "description": "[light: 48, 168, 243, dark: 31, 153, 240]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-6": {
+    "prefix": [
+      "var(--o-blue-6)"
+    ],
+    "body": "var(--o-blue-6)",
+    "description": "[light: 5, 142, 240, dark: 42, 166, 243]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-7": {
+    "prefix": [
+      "var(--o-blue-7)"
+    ],
+    "body": "var(--o-blue-7)",
+    "description": "[light: 3, 111, 199, dark: 89, 191, 246]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-8": {
+    "prefix": [
+      "var(--o-blue-8)"
+    ],
+    "body": "var(--o-blue-8)",
+    "description": "[light: 2, 83, 158, dark: 137, 214, 249]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-9": {
+    "prefix": [
+      "var(--o-blue-9)"
+    ],
+    "body": "var(--o-blue-9)",
+    "description": "[light: 1, 57, 117, dark: 187, 233, 252]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-10": {
+    "prefix": [
+      "var(--o-blue-10)"
+    ],
+    "body": "var(--o-blue-10)",
+    "description": "[light: 0, 34, 77, dark: 237, 250, 255]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-1": {
+    "prefix": [
+      "var(--o-purple-1)"
+    ],
+    "body": "var(--o-purple-1)",
+    "description": "[light: 245, 232, 255, dark: 22, 0, 77]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-2": {
+    "prefix": [
+      "var(--o-purple-2)"
+    ],
+    "body": "var(--o-purple-2)",
+    "description": "[light: 225, 192, 253, dark: 40, 3, 118]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-3": {
+    "prefix": [
+      "var(--o-purple-3)"
+    ],
+    "body": "var(--o-purple-3)",
+    "description": "[light: 203, 152, 251, dark: 66, 15, 160]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-4": {
+    "prefix": [
+      "var(--o-purple-4)"
+    ],
+    "body": "var(--o-purple-4)",
+    "description": "[light: 178, 113, 248, dark: 98, 33, 202]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-5": {
+    "prefix": [
+      "var(--o-purple-5)"
+    ],
+    "body": "var(--o-purple-5)",
+    "description": "[light: 152, 75, 246, dark: 134, 57, 244]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-6": {
+    "prefix": [
+      "var(--o-purple-6)"
+    ],
+    "body": "var(--o-purple-6)",
+    "description": "[light: 123, 37, 244, dark: 152, 74, 246]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-7": {
+    "prefix": [
+      "var(--o-purple-7)"
+    ],
+    "body": "var(--o-purple-7)",
+    "description": "[light: 92, 23, 202, dark: 179, 114, 248]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-8": {
+    "prefix": [
+      "var(--o-purple-8)"
+    ],
+    "body": "var(--o-purple-8)",
+    "description": "[light: 64, 12, 160, dark: 205, 156, 251]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-9": {
+    "prefix": [
+      "var(--o-purple-9)"
+    ],
+    "body": "var(--o-purple-9)",
+    "description": "[light: 41, 4, 118, dark: 228, 198, 253]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-10": {
+    "prefix": [
+      "var(--o-purple-10)"
+    ],
+    "body": "var(--o-purple-10)",
+    "description": "[light: 22, 0, 77, dark: 249, 240, 255]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-1": {
+    "prefix": [
+      "var(--o-pink-1)"
+    ],
+    "body": "var(--o-pink-1)",
+    "description": "[light: 255, 232, 253, dark: 61, 0, 77]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-2": {
+    "prefix": [
+      "var(--o-pink-2)"
+    ],
+    "body": "var(--o-pink-2)",
+    "description": "[light: 246, 188, 243, dark: 93, 5, 110]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-3": {
+    "prefix": [
+      "var(--o-pink-3)"
+    ],
+    "body": "var(--o-pink-3)",
+    "description": "[light: 238, 146, 235, dark: 127, 16, 144]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-4": {
+    "prefix": [
+      "var(--o-pink-4)"
+    ],
+    "body": "var(--o-pink-4)",
+    "description": "[light: 229, 107, 229, dark: 164, 33, 178]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-5": {
+    "prefix": [
+      "var(--o-pink-5)"
+    ],
+    "body": "var(--o-pink-5)",
+    "description": "[light: 216, 71, 221, dark: 200, 54, 212]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-6": {
+    "prefix": [
+      "var(--o-pink-6)"
+    ],
+    "body": "var(--o-pink-6)",
+    "description": "[light: 199, 37, 212, dark: 216, 72, 221]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-7": {
+    "prefix": [
+      "var(--o-pink-7)"
+    ],
+    "body": "var(--o-pink-7)",
+    "description": "[light: 163, 23, 178, dark: 229, 109, 229]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-8": {
+    "prefix": [
+      "var(--o-pink-8)"
+    ],
+    "body": "var(--o-pink-8)",
+    "description": "[light: 127, 13, 144, dark: 238, 149, 235]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-9": {
+    "prefix": [
+      "var(--o-pink-9)"
+    ],
+    "body": "var(--o-pink-9)",
+    "description": "[light: 93, 5, 110, dark: 246, 191, 243]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-10": {
+    "prefix": [
+      "var(--o-pink-10)"
+    ],
+    "body": "var(--o-pink-10)",
+    "description": "[light: 61, 0, 77, dark: 255, 236, 253]",
+    "scope": "css,scss,less"
+  },
+  "--o-rosyred-1": {
+    "prefix": [
+      "var(--o-rosyred-1)"
+    ],
+    "body": "var(--o-rosyred-1)",
+    "description": "[light: 255, 232, 240, dark: 77, 0, 48]",
+    "scope": "css,scss,less"
+  },
+  "--o-rosyred-2": {
+    "prefix": [
+      "var(--o-rosyred-2)"
+    ],
+    "body": "var(--o-rosyred-2)",
+    "description": "[light: 249, 185, 209, dark: 114, 3, 70]",
+    "scope": "css,scss,less"
+  },
+  "--o-rosyred-3": {
+    "prefix": [
+      "var(--o-rosyred-3)"
+    ],
+    "body": "var(--o-rosyred-3)",
+    "description": "[light: 243, 141, 182, dark: 151, 12, 91]",
+    "scope": "css,scss,less"
+  },
+  "--o-rosyred-4": {
+    "prefix": [
+      "var(--o-rosyred-4)"
+    ],
+    "body": "var(--o-rosyred-4)",
+    "description": "[light: 238, 98, 158, dark: 189, 25, 112]",
+    "scope": "css,scss,less"
+  },
+  "--o-rosyred-5": {
+    "prefix": [
+      "var(--o-rosyred-5)"
+    ],
+    "body": "var(--o-rosyred-5)",
+    "description": "[light: 232, 57, 139, dark: 226, 41, 133]",
+    "scope": "css,scss,less"
+  },
+  "--o-rosyred-6": {
+    "prefix": [
+      "var(--o-rosyred-6)"
+    ],
+    "body": "var(--o-rosyred-6)",
+    "description": "[light: 226, 18, 122, dark: 232, 53, 137]",
+    "scope": "css,scss,less"
+  },
+  "--o-rosyred-7": {
+    "prefix": [
+      "var(--o-rosyred-7)"
+    ],
+    "body": "var(--o-rosyred-7)",
+    "description": "[light: 189, 11, 106, dark: 238, 97, 158]",
+    "scope": "css,scss,less"
+  },
+  "--o-rosyred-8": {
+    "prefix": [
+      "var(--o-rosyred-8)"
+    ],
+    "body": "var(--o-rosyred-8)",
+    "description": "[light: 151, 6, 88, dark: 243, 143, 183]",
+    "scope": "css,scss,less"
+  },
+  "--o-rosyred-9": {
+    "prefix": [
+      "var(--o-rosyred-9)"
+    ],
+    "body": "var(--o-rosyred-9)",
+    "description": "[light: 114, 2, 69, dark: 249, 192, 213]",
+    "scope": "css,scss,less"
+  },
+  "--o-rosyred-10": {
+    "prefix": [
+      "var(--o-rosyred-10)"
+    ],
+    "body": "var(--o-rosyred-10)",
+    "description": "[light: 77, 0, 48, dark: 255, 242, 247]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-white": {
+    "prefix": [
+      "var(--o-color-white)"
+    ],
+    "body": "var(--o-color-white)",
+    "description": "[light: rgb(var(--o-white)), dark: rgb(var(--o-white))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-black": {
+    "prefix": [
+      "var(--o-color-black)"
+    ],
+    "body": "var(--o-color-black)",
+    "description": "[light: rgb(var(--o-black)), dark: rgb(var(--o-black))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary1": {
+    "prefix": [
+      "var(--o-color-primary1)"
+    ],
+    "body": "var(--o-color-primary1)",
+    "description": "常规[light: rgb(var(--o-gray-12)), dark: rgb(var(--o-gray-14))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary2": {
+    "prefix": [
+      "var(--o-color-primary2)"
+    ],
+    "body": "var(--o-color-primary2)",
+    "description": "悬浮[light: rgb(var(--o-gray-11)), dark: rgb(var(--o-gray-13))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary3": {
+    "prefix": [
+      "var(--o-color-primary3)"
+    ],
+    "body": "var(--o-color-primary3)",
+    "description": "激活[light: rgb(var(--o-gray-13)), dark: rgb(var(--o-gray-12))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary4": {
+    "prefix": [
+      "var(--o-color-primary4)"
+    ],
+    "body": "var(--o-color-primary4)",
+    "description": "禁用[light: rgb(var(--o-gray-6)), dark: rgb(var(--o-gray-8))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary1-light": {
+    "prefix": [
+      "var(--o-color-primary1-light)"
+    ],
+    "body": "var(--o-color-primary1-light)",
+    "description": "常规-浅[light: rgb(var(--o-gray-4)), dark: rgb(var(--o-gray-5))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary2-light": {
+    "prefix": [
+      "var(--o-color-primary2-light)"
+    ],
+    "body": "var(--o-color-primary2-light)",
+    "description": "悬浮-浅[light: rgb(var(--o-gray-5)), dark: rgb(var(--o-gray-6))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary3-light": {
+    "prefix": [
+      "var(--o-color-primary3-light)"
+    ],
+    "body": "var(--o-color-primary3-light)",
+    "description": "激活-浅[light: rgb(var(--o-gray-6)), dark: rgb(var(--o-gray-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary4-light": {
+    "prefix": [
+      "var(--o-color-primary4-light)"
+    ],
+    "body": "var(--o-color-primary4-light)",
+    "description": "禁用-浅[light: rgb(var(--o-gray-5)), dark: rgb(var(--o-gray-6))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success1": {
+    "prefix": [
+      "var(--o-color-success1)"
+    ],
+    "body": "var(--o-color-success1)",
+    "description": "常规[light: rgb(var(--o-green-6)), dark: rgb(var(--o-green-6))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success2": {
+    "prefix": [
+      "var(--o-color-success2)"
+    ],
+    "body": "var(--o-color-success2)",
+    "description": "悬浮[light: rgb(var(--o-green-4)), dark: rgb(var(--o-green-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success3": {
+    "prefix": [
+      "var(--o-color-success3)"
+    ],
+    "body": "var(--o-color-success3)",
+    "description": "激活[light: rgb(var(--o-green-7)), dark: rgb(var(--o-green-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success4": {
+    "prefix": [
+      "var(--o-color-success4)"
+    ],
+    "body": "var(--o-color-success4)",
+    "description": "禁用[light: rgb(var(--o-green-3)), dark: rgb(var(--o-green-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success1-light": {
+    "prefix": [
+      "var(--o-color-success1-light)"
+    ],
+    "body": "var(--o-color-success1-light)",
+    "description": "常规-浅[light: rgb(var(--o-green-2)), dark: rgb(var(--o-green-2))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success2-light": {
+    "prefix": [
+      "var(--o-color-success2-light)"
+    ],
+    "body": "var(--o-color-success2-light)",
+    "description": "悬浮-浅[light: rgb(var(--o-green-3)), dark: rgb(var(--o-green-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success3-light": {
+    "prefix": [
+      "var(--o-color-success3-light)"
+    ],
+    "body": "var(--o-color-success3-light)",
+    "description": "激活-浅[light: rgb(var(--o-green-4)), dark: rgb(var(--o-green-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success4-light": {
+    "prefix": [
+      "var(--o-color-success4-light)"
+    ],
+    "body": "var(--o-color-success4-light)",
+    "description": "禁用-浅[light: rgb(var(--o-green-1)), dark: rgb(var(--o-green-1))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning1": {
+    "prefix": [
+      "var(--o-color-warning1)"
+    ],
+    "body": "var(--o-color-warning1)",
+    "description": "常规[light: rgb(var(--o-orange-6)), dark: rgb(var(--o-orange-6))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning2": {
+    "prefix": [
+      "var(--o-color-warning2)"
+    ],
+    "body": "var(--o-color-warning2)",
+    "description": "悬浮[light: rgb(var(--o-orange-4)), dark: rgb(var(--o-orange-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning3": {
+    "prefix": [
+      "var(--o-color-warning3)"
+    ],
+    "body": "var(--o-color-warning3)",
+    "description": "激活[light: rgb(var(--o-orange-7)), dark: rgb(var(--o-orange-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning4": {
+    "prefix": [
+      "var(--o-color-warning4)"
+    ],
+    "body": "var(--o-color-warning4)",
+    "description": "禁用[light: rgb(var(--o-orange-3)), dark: rgb(var(--o-orange-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning1-light": {
+    "prefix": [
+      "var(--o-color-warning1-light)"
+    ],
+    "body": "var(--o-color-warning1-light)",
+    "description": "常规-浅[light: rgb(var(--o-orange-2)), dark: rgb(var(--o-orange-2))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning2-light": {
+    "prefix": [
+      "var(--o-color-warning2-light)"
+    ],
+    "body": "var(--o-color-warning2-light)",
+    "description": "悬浮-浅[light: rgb(var(--o-orange-3)), dark: rgb(var(--o-orange-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning3-light": {
+    "prefix": [
+      "var(--o-color-warning3-light)"
+    ],
+    "body": "var(--o-color-warning3-light)",
+    "description": "激活-浅[light: rgb(var(--o-orange-4)), dark: rgb(var(--o-orange-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning4-light": {
+    "prefix": [
+      "var(--o-color-warning4-light)"
+    ],
+    "body": "var(--o-color-warning4-light)",
+    "description": "禁用-浅[light: rgb(var(--o-orange-1)), dark: rgb(var(--o-orange-1))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger1": {
+    "prefix": [
+      "var(--o-color-danger1)"
+    ],
+    "body": "var(--o-color-danger1)",
+    "description": "常规[light: rgb(var(--o-red-6)), dark: rgb(var(--o-red-6))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger2": {
+    "prefix": [
+      "var(--o-color-danger2)"
+    ],
+    "body": "var(--o-color-danger2)",
+    "description": "悬浮[light: rgb(var(--o-red-4)), dark: rgb(var(--o-red-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger3": {
+    "prefix": [
+      "var(--o-color-danger3)"
+    ],
+    "body": "var(--o-color-danger3)",
+    "description": "激活[light: rgb(var(--o-red-7)), dark: rgb(var(--o-red-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger4": {
+    "prefix": [
+      "var(--o-color-danger4)"
+    ],
+    "body": "var(--o-color-danger4)",
+    "description": "禁用[light: rgb(var(--o-red-3)), dark: rgb(var(--o-red-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger1-light": {
+    "prefix": [
+      "var(--o-color-danger1-light)"
+    ],
+    "body": "var(--o-color-danger1-light)",
+    "description": "常规-浅[light: rgb(var(--o-red-2)), dark: rgb(var(--o-red-2))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger2-light": {
+    "prefix": [
+      "var(--o-color-danger2-light)"
+    ],
+    "body": "var(--o-color-danger2-light)",
+    "description": "悬浮-浅[light: rgb(var(--o-red-3)), dark: rgb(var(--o-red-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger3-light": {
+    "prefix": [
+      "var(--o-color-danger3-light)"
+    ],
+    "body": "var(--o-color-danger3-light)",
+    "description": "激活-浅[light: rgb(var(--o-red-4)), dark: rgb(var(--o-red-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger4-light": {
+    "prefix": [
+      "var(--o-color-danger4-light)"
+    ],
+    "body": "var(--o-color-danger4-light)",
+    "description": "禁用-浅[light: rgb(var(--o-red-1)), dark: rgb(var(--o-red-1))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-fill1": {
+    "prefix": [
+      "var(--o-color-fill1)"
+    ],
+    "body": "var(--o-color-fill1)",
+    "description": "一级填充：页面背景[light: rgb(var(--o-gray-2)), dark: rgb(var(--o-gray-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-fill2": {
+    "prefix": [
+      "var(--o-color-fill2)"
+    ],
+    "body": "var(--o-color-fill2)",
+    "description": "二级填充：区块、卡片[light: rgb(var(--o-gray-1)), dark: rgb(var(--o-gray-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-fill3": {
+    "prefix": [
+      "var(--o-color-fill3)"
+    ],
+    "body": "var(--o-color-fill3)",
+    "description": "三级填充：卡片[light: rgb(var(--o-gray-3)), dark: rgb(var(--o-gray-5))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control1": {
+    "prefix": [
+      "var(--o-color-control1)"
+    ],
+    "body": "var(--o-color-control1)",
+    "description": "常规，常用于边框[light: rgba(var(--o-gray-14), 0.25), dark: rgba(var(--o-gray-14), 0.25)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control2": {
+    "prefix": [
+      "var(--o-color-control2)"
+    ],
+    "body": "var(--o-color-control2)",
+    "description": "悬浮，常用于边框[light: rgba(var(--o-gray-14), 0.6), dark: rgba(var(--o-gray-14), 0.6)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control3": {
+    "prefix": [
+      "var(--o-color-control3)"
+    ],
+    "body": "var(--o-color-control3)",
+    "description": "激活，常用于边框[light: rgba(var(--o-gray-14), 0.8), dark: rgba(var(--o-gray-14), 0.8)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control4": {
+    "prefix": [
+      "var(--o-color-control4)"
+    ],
+    "body": "var(--o-color-control4)",
+    "description": "禁用，常用于边框[light: rgba(var(--o-gray-14), 0.1), dark: rgba(var(--o-gray-14), 0.15)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control1-light": {
+    "prefix": [
+      "var(--o-color-control1-light)"
+    ],
+    "body": "var(--o-color-control1-light)",
+    "description": "常规-浅，常用于背景[light: rgb(var(--o-gray-5)), dark: rgb(var(--o-gray-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control2-light": {
+    "prefix": [
+      "var(--o-color-control2-light)"
+    ],
+    "body": "var(--o-color-control2-light)",
+    "description": "悬浮-浅，常用于背景[light: rgb(var(--o-gray-3)), dark: rgb(var(--o-gray-5))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control3-light": {
+    "prefix": [
+      "var(--o-color-control3-light)"
+    ],
+    "body": "var(--o-color-control3-light)",
+    "description": "激活-浅，常用于背景[light: rgb(var(--o-gray-4)), dark: rgb(var(--o-gray-6))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control4-light": {
+    "prefix": [
+      "var(--o-color-control4-light)"
+    ],
+    "body": "var(--o-color-control4-light)",
+    "description": "禁用，常用于背景[light: rgb(var(--o-gray-3)), dark: rgb(var(--o-gray-5))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control-light": {
+    "prefix": [
+      "var(--o-color-control-light)"
+    ],
+    "body": "var(--o-color-control-light)",
+    "description": "很浅，常用于表格背景色[light: rgb(var(--o-gray-1)), dark: rgb(var(--o-gray-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info1": {
+    "prefix": [
+      "var(--o-color-info1)"
+    ],
+    "body": "var(--o-color-info1)",
+    "description": "一级/强调/标题[light: rgba(var(--o-gray-14), 1.0), dark: rgba(var(--o-gray-14), 1.0)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info2": {
+    "prefix": [
+      "var(--o-color-info2)"
+    ],
+    "body": "var(--o-color-info2)",
+    "description": "二级/次强调/正文[light: rgba(var(--o-gray-14), 0.8), dark: rgba(var(--o-gray-14), 0.8)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info3": {
+    "prefix": [
+      "var(--o-color-info3)"
+    ],
+    "body": "var(--o-color-info3)",
+    "description": "三级/辅助信息[light: rgba(var(--o-gray-14), 0.6), dark: rgba(var(--o-gray-14), 0.6)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info4": {
+    "prefix": [
+      "var(--o-color-info4)"
+    ],
+    "body": "var(--o-color-info4)",
+    "description": "置灰/禁用[light: rgba(var(--o-gray-14), 0.4), dark: rgba(var(--o-gray-14), 0.4)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info1-inverse": {
+    "prefix": [
+      "var(--o-color-info1-inverse)"
+    ],
+    "body": "var(--o-color-info1-inverse)",
+    "description": "一级/次强调/正文反色[light: rgba(var(--o-gray-1), 1.0), dark: rgba(var(--o-gray-1), 1.0)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info2-inverse": {
+    "prefix": [
+      "var(--o-color-info2-inverse)"
+    ],
+    "body": "var(--o-color-info2-inverse)",
+    "description": "二级/辅助信息反色[light: rgba(var(--o-gray-1), 0.8), dark: rgba(var(--o-gray-1), 0.8)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info3-inverse": {
+    "prefix": [
+      "var(--o-color-info3-inverse)"
+    ],
+    "body": "var(--o-color-info3-inverse)",
+    "description": "三级/辅助信息反色[light: rgba(var(--o-gray-1), 0.6), dark: rgba(var(--o-gray-1), 0.6)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info4-inverse": {
+    "prefix": [
+      "var(--o-color-info4-inverse)"
+    ],
+    "body": "var(--o-color-info4-inverse)",
+    "description": "置灰/禁用反色[light: rgba(var(--o-gray-1), 0.4), dark: rgba(var(--o-gray-1), 0.4)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-mask1": {
+    "prefix": [
+      "var(--o-color-mask1)"
+    ],
+    "body": "var(--o-color-mask1)",
+    "description": "全局遮罩[light: rgba(var(--o-gray-14), 0.4), dark: rgba(var(--o-gray-1), 0.4)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-mask2": {
+    "prefix": [
+      "var(--o-color-mask2)"
+    ],
+    "body": "var(--o-color-mask2)",
+    "description": "局部遮罩[light: rgba(var(--o-gray-1), 0.2), dark: rgba(var(--o-gray-4), 0.2)]",
+    "scope": "css,scss,less"
+  },
+  "--o-shadow-1": {
+    "prefix": [
+      "var(--o-shadow-1)"
+    ],
+    "body": "var(--o-shadow-1)",
+    "description": "用于卡片、小弹窗、楼层阴影[light: 0 3px 8px rgba(var(--o-gray-14), 0.08), dark: 0 3px 8px rgba(var(--o-gray-1), 0.08)]",
+    "scope": "css,scss,less"
+  },
+  "--o-shadow-2": {
+    "prefix": [
+      "var(--o-shadow-2)"
+    ],
+    "body": "var(--o-shadow-2)",
+    "description": "用于卡片悬浮阴影[light: 0 2px 24px rgba(var(--o-gray-14), 0.15), dark: 0 2px 24px rgba(var(--o-gray-1), 0.15)]",
+    "scope": "css,scss,less"
+  },
+  "--o-shadow-3": {
+    "prefix": [
+      "var(--o-shadow-3)"
+    ],
+    "body": "var(--o-shadow-3)",
+    "description": "用于提示阴影[light: 0 8px 40px rgba(var(--o-gray-14), 0.1), dark: 0 8px 40px rgba(var(--o-gray-1), 0.1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-link1": {
+    "prefix": [
+      "var(--o-color-link1)"
+    ],
+    "body": "var(--o-color-link1)",
+    "description": "常规[light: rgba(var(--o-deepblue-6), 1.0), dark: rgba(var(--o-deepblue-6), 1.0)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-link2": {
+    "prefix": [
+      "var(--o-color-link2)"
+    ],
+    "body": "var(--o-color-link2)",
+    "description": "悬浮[light: rgba(var(--o-deepblue-6), 0.7), dark: rgba(var(--o-deepblue-6), 0.7)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-link3": {
+    "prefix": [
+      "var(--o-color-link3)"
+    ],
+    "body": "var(--o-color-link3)",
+    "description": "激活[light: rgba(var(--o-deepblue-6), 0.9), dark: rgba(var(--o-deepblue-6), 0.9)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-link4": {
+    "prefix": [
+      "var(--o-color-link4)"
+    ],
+    "body": "var(--o-color-link4)",
+    "description": "禁用[light: rgba(var(--o-deepblue-6), 0.4), dark: rgba(var(--o-deepblue-6), 0.4)]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-1": {
+    "prefix": [
+      "var(--o-gap-1)"
+    ],
+    "body": "var(--o-gap-1)",
+    "description": "用于组件之间的间距1[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-2": {
+    "prefix": [
+      "var(--o-gap-2)"
+    ],
+    "body": "var(--o-gap-2)",
+    "description": "用于组件之间的间距2[light: 8px, dark: 8px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-3": {
+    "prefix": [
+      "var(--o-gap-3)"
+    ],
+    "body": "var(--o-gap-3)",
+    "description": "用于组件之间的间距3[light: 12px, dark: 12px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-4": {
+    "prefix": [
+      "var(--o-gap-4)"
+    ],
+    "body": "var(--o-gap-4)",
+    "description": "用于组件之间的间距4[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-5": {
+    "prefix": [
+      "var(--o-gap-5)"
+    ],
+    "body": "var(--o-gap-5)",
+    "description": "用于组件之间的间距5[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-6": {
+    "prefix": [
+      "var(--o-gap-6)"
+    ],
+    "body": "var(--o-gap-6)",
+    "description": "用于组件之间的间距6[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-7": {
+    "prefix": [
+      "var(--o-gap-7)"
+    ],
+    "body": "var(--o-gap-7)",
+    "description": "用于组件之间的间距7[light: 40px, dark: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-8": {
+    "prefix": [
+      "var(--o-gap-8)"
+    ],
+    "body": "var(--o-gap-8)",
+    "description": "用于组件之间的间距8[light: 48px, dark: 48px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-9": {
+    "prefix": [
+      "var(--o-gap-9)"
+    ],
+    "body": "var(--o-gap-9)",
+    "description": "用于组件之间的间距9[light: 64px, dark: 64px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-10": {
+    "prefix": [
+      "var(--o-gap-10)"
+    ],
+    "body": "var(--o-gap-10)",
+    "description": "用于组件之间的间距10[light: 72px, dark: 72px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-2xs": {
+    "prefix": [
+      "var(--o-control_size-2xs)"
+    ],
+    "body": "var(--o-control_size-2xs)",
+    "description": "超小尺寸[light: 14px, dark: 14px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-xs": {
+    "prefix": [
+      "var(--o-control_size-xs)"
+    ],
+    "body": "var(--o-control_size-xs)",
+    "description": "小尺寸[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-s": {
+    "prefix": [
+      "var(--o-control_size-s)"
+    ],
+    "body": "var(--o-control_size-s)",
+    "description": "小尺寸[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-m": {
+    "prefix": [
+      "var(--o-control_size-m)"
+    ],
+    "body": "var(--o-control_size-m)",
+    "description": "尺寸[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-l": {
+    "prefix": [
+      "var(--o-control_size-l)"
+    ],
+    "body": "var(--o-control_size-l)",
+    "description": "尺寸[light: 40px, dark: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-xl": {
+    "prefix": [
+      "var(--o-control_size-xl)"
+    ],
+    "body": "var(--o-control_size-xl)",
+    "description": "尺寸[light: 48px, dark: 48px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-2xl": {
+    "prefix": [
+      "var(--o-control_size-2xl)"
+    ],
+    "body": "var(--o-control_size-2xl)",
+    "description": "尺寸[light: 56px, dark: 56px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-xs": {
+    "prefix": [
+      "var(--o-icon_size-xs)"
+    ],
+    "body": "var(--o-icon_size-xs)",
+    "description": "超小尺寸图标[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-s": {
+    "prefix": [
+      "var(--o-icon_size-s)"
+    ],
+    "body": "var(--o-icon_size-s)",
+    "description": "小尺寸图标[light: 20px, dark: 20px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-m": {
+    "prefix": [
+      "var(--o-icon_size-m)"
+    ],
+    "body": "var(--o-icon_size-m)",
+    "description": "中尺寸图标[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-l": {
+    "prefix": [
+      "var(--o-icon_size-l)"
+    ],
+    "body": "var(--o-icon_size-l)",
+    "description": "大尺寸图标[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-xl": {
+    "prefix": [
+      "var(--o-icon_size-xl)"
+    ],
+    "body": "var(--o-icon_size-xl)",
+    "description": "超大尺寸图标[light: 40px, dark: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-2xl": {
+    "prefix": [
+      "var(--o-icon_size-2xl)"
+    ],
+    "body": "var(--o-icon_size-2xl)",
+    "description": "2xl尺寸图标[light: 48px, dark: 48px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-3xl": {
+    "prefix": [
+      "var(--o-icon_size-3xl)"
+    ],
+    "body": "var(--o-icon_size-3xl)",
+    "description": "3xl尺寸图标[light: 56px, dark: 56px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-4xl": {
+    "prefix": [
+      "var(--o-icon_size-4xl)"
+    ],
+    "body": "var(--o-icon_size-4xl)",
+    "description": "4xl尺寸图标[light: 64px, dark: 64px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size_control-xs": {
+    "prefix": [
+      "var(--o-icon_size_control-xs)"
+    ],
+    "body": "var(--o-icon_size_control-xs)",
+    "description": "超小尺寸控件图标(组件使用)[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size_control-s": {
+    "prefix": [
+      "var(--o-icon_size_control-s)"
+    ],
+    "body": "var(--o-icon_size_control-s)",
+    "description": "小尺寸控件图标(组件使用)[light: 20px, dark: 20px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size_control-m": {
+    "prefix": [
+      "var(--o-icon_size_control-m)"
+    ],
+    "body": "var(--o-icon_size_control-m)",
+    "description": "中尺寸控件图标(组件使用)[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size_control-l": {
+    "prefix": [
+      "var(--o-icon_size_control-l)"
+    ],
+    "body": "var(--o-icon_size_control-l)",
+    "description": "大尺寸控件图标(组件使用)[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size_control-xl": {
+    "prefix": [
+      "var(--o-icon_size_control-xl)"
+    ],
+    "body": "var(--o-icon_size_control-xl)",
+    "description": "超大尺寸控件图标(组件使用)[light: 40px, dark: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-display1": {
+    "prefix": [
+      "var(--o-font_size-display1)"
+    ],
+    "body": "var(--o-font_size-display1)",
+    "description": "一级数据展示[light: 56px, dark: 56px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-display2": {
+    "prefix": [
+      "var(--o-font_size-display2)"
+    ],
+    "body": "var(--o-font_size-display2)",
+    "description": "二级数据展示[light: 48px, dark: 48px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-display3": {
+    "prefix": [
+      "var(--o-font_size-display3)"
+    ],
+    "body": "var(--o-font_size-display3)",
+    "description": "三级数据展示[light: 40px, dark: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h1": {
+    "prefix": [
+      "var(--o-font_size-h1)"
+    ],
+    "body": "var(--o-font_size-h1)",
+    "description": "一级标题[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h2": {
+    "prefix": [
+      "var(--o-font_size-h2)"
+    ],
+    "body": "var(--o-font_size-h2)",
+    "description": "二级标题[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h3": {
+    "prefix": [
+      "var(--o-font_size-h3)"
+    ],
+    "body": "var(--o-font_size-h3)",
+    "description": "三级标题[light: 22px, dark: 22px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h4": {
+    "prefix": [
+      "var(--o-font_size-h4)"
+    ],
+    "body": "var(--o-font_size-h4)",
+    "description": "四级标题[light: 20px, dark: 20px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-text1": {
+    "prefix": [
+      "var(--o-font_size-text1)"
+    ],
+    "body": "var(--o-font_size-text1)",
+    "description": "常规正文[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-text2": {
+    "prefix": [
+      "var(--o-font_size-text2)"
+    ],
+    "body": "var(--o-font_size-text2)",
+    "description": "大号正文[light: 18px, dark: 18px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-tip1": {
+    "prefix": [
+      "var(--o-font_size-tip1)"
+    ],
+    "body": "var(--o-font_size-tip1)",
+    "description": "提示文本1[light: 14px, dark: 14px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-tip2": {
+    "prefix": [
+      "var(--o-font_size-tip2)"
+    ],
+    "body": "var(--o-font_size-tip2)",
+    "description": "提示文本2[light: 12px, dark: 12px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-display1": {
+    "prefix": [
+      "var(--o-line_height-display1)"
+    ],
+    "body": "var(--o-line_height-display1)",
+    "description": "一级数据展示[light: 80px, dark: 80px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-display2": {
+    "prefix": [
+      "var(--o-line_height-display2)"
+    ],
+    "body": "var(--o-line_height-display2)",
+    "description": "二级数据展示[light: 64px, dark: 64px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-display3": {
+    "prefix": [
+      "var(--o-line_height-display3)"
+    ],
+    "body": "var(--o-line_height-display3)",
+    "description": "三级数据展示[light: 56px, dark: 56px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h1": {
+    "prefix": [
+      "var(--o-line_height-h1)"
+    ],
+    "body": "var(--o-line_height-h1)",
+    "description": "一级标题[light: 44px, dark: 44px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h2": {
+    "prefix": [
+      "var(--o-line_height-h2)"
+    ],
+    "body": "var(--o-line_height-h2)",
+    "description": "二级标题[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h3": {
+    "prefix": [
+      "var(--o-line_height-h3)"
+    ],
+    "body": "var(--o-line_height-h3)",
+    "description": "三级标题[light: 30px, dark: 30px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h4": {
+    "prefix": [
+      "var(--o-line_height-h4)"
+    ],
+    "body": "var(--o-line_height-h4)",
+    "description": "四级标题[light: 28px, dark: 28px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-text1": {
+    "prefix": [
+      "var(--o-line_height-text1)"
+    ],
+    "body": "var(--o-line_height-text1)",
+    "description": "正文[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-text2": {
+    "prefix": [
+      "var(--o-line_height-text2)"
+    ],
+    "body": "var(--o-line_height-text2)",
+    "description": "正文-大[light: 26px, dark: 26x]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-tip1": {
+    "prefix": [
+      "var(--o-line_height-tip1)"
+    ],
+    "body": "var(--o-line_height-tip1)",
+    "description": "提示文本1[light: 22px, dark: 22px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-tip2": {
+    "prefix": [
+      "var(--o-line_height-tip2)"
+    ],
+    "body": "var(--o-line_height-tip2)",
+    "description": "提示文本2[light: 18px, dark: 18px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-xs": {
+    "prefix": [
+      "var(--o-radius-xs)"
+    ],
+    "body": "var(--o-radius-xs)",
+    "description": "超小尺寸圆角[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-s": {
+    "prefix": [
+      "var(--o-radius-s)"
+    ],
+    "body": "var(--o-radius-s)",
+    "description": "小尺寸圆角[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-m": {
+    "prefix": [
+      "var(--o-radius-m)"
+    ],
+    "body": "var(--o-radius-m)",
+    "description": "中尺寸圆角[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-l": {
+    "prefix": [
+      "var(--o-radius-l)"
+    ],
+    "body": "var(--o-radius-l)",
+    "description": "大尺寸圆角[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-xl": {
+    "prefix": [
+      "var(--o-radius-xl)"
+    ],
+    "body": "var(--o-radius-xl)",
+    "description": "大尺寸圆角,一般用于卡片[light: 0px, dark: 0px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius_control-xs": {
+    "prefix": [
+      "var(--o-radius_control-xs)"
+    ],
+    "body": "var(--o-radius_control-xs)",
+    "description": "超小尺寸控件圆角(组件使用)[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius_control-s": {
+    "prefix": [
+      "var(--o-radius_control-s)"
+    ],
+    "body": "var(--o-radius_control-s)",
+    "description": "小尺寸控件圆角(组件使用)[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius_control-m": {
+    "prefix": [
+      "var(--o-radius_control-m)"
+    ],
+    "body": "var(--o-radius_control-m)",
+    "description": "中尺寸控件圆角(组件使用)[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius_control-l": {
+    "prefix": [
+      "var(--o-radius_control-l)"
+    ],
+    "body": "var(--o-radius_control-l)",
+    "description": "大尺寸控件圆角(组件使用)[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-s": {
+    "prefix": [
+      "var(--o-duration-s)"
+    ],
+    "body": "var(--o-duration-s)",
+    "description": "用于退出屏幕的动画[light: 200ms, dark: 200ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-m1": {
+    "prefix": [
+      "var(--o-duration-m1)"
+    ],
+    "body": "var(--o-duration-m1)",
+    "description": "用于当曲线为standard-in时进入屏幕的动画[light: 250ms, dark: 250ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-m2": {
+    "prefix": [
+      "var(--o-duration-m2)"
+    ],
+    "body": "var(--o-duration-m2)",
+    "description": "用于当曲线为standard时开始、结束的动画[light: 300ms, dark: 300ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-m3": {
+    "prefix": [
+      "var(--o-duration-m3)"
+    ],
+    "body": "var(--o-duration-m3)",
+    "description": "用于当曲线为emphasized-in时进入屏幕的动画[light: 400ms, dark: 400ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-l": {
+    "prefix": [
+      "var(--o-duration-l)"
+    ],
+    "body": "var(--o-duration-l)",
+    "description": "用于当曲线为emphasized时开始、结束的动画[light: 500ms, dark: 500ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-xl": {
+    "prefix": [
+      "var(--o-duration-xl)"
+    ],
+    "body": "var(--o-duration-xl)",
+    "description": "用于当曲线为emphasized时，轮播切换动画[light: 1000ms, dark: 1000ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-linear": {
+    "prefix": [
+      "var(--o-easing-linear)"
+    ],
+    "body": "var(--o-easing-linear)",
+    "description": "线性曲线[light: cubic-bezier(0, 0, 1, 1), dark: cubic-bezier(0, 0, 1, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-standard": {
+    "prefix": [
+      "var(--o-easing-standard)"
+    ],
+    "body": "var(--o-easing-standard)",
+    "description": "用于组件[light: cubic-bezier(0.2, 0, 0, 1), dark: cubic-bezier(0.2, 0, 0, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-standard-in": {
+    "prefix": [
+      "var(--o-easing-standard-in)"
+    ],
+    "body": "var(--o-easing-standard-in)",
+    "description": "用于组件[light: cubic-bezier(0, 0, 0, 1), dark: cubic-bezier(0, 0, 0, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-standard-out": {
+    "prefix": [
+      "var(--o-easing-standard-out)"
+    ],
+    "body": "var(--o-easing-standard-out)",
+    "description": "用于组件[light: cubic-bezier(0.3, 0, 1, 1), dark: cubic-bezier(0.3, 0, 1, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-emphasized": {
+    "prefix": [
+      "var(--o-easing-emphasized)"
+    ],
+    "body": "var(--o-easing-emphasized)",
+    "description": "用于大卡片、场景切换[light: cubic-bezier(0.2, 0, 0, 1), dark: cubic-bezier(0.2, 0, 0, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-emphasized-in": {
+    "prefix": [
+      "var(--o-easing-emphasized-in)"
+    ],
+    "body": "var(--o-easing-emphasized-in)",
+    "description": "用于大卡片、场景切换[light: cubic-bezier(0.3, 0, 0.8, 0.15), dark: cubic-bezier(0.3, 0, 0.8, 0.15)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-emphasized-out": {
+    "prefix": [
+      "var(--o-easing-emphasized-out)"
+    ],
+    "body": "var(--o-easing-emphasized-out)",
+    "description": "用于大卡片、场景切换[light: cubic-bezier(0.05, 0.7, 0.1, 1), dark: cubic-bezier(0.05, 0.7, 0.1, 1)]",
+    "scope": "css,scss,less"
+  }
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/theme/kunpeng/token.config.ts b/packages/opendesign/src/theme/kunpeng/token.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d0138f03e3b79c613a3c222d9be6a32c0c8fc2b8
--- /dev/null
+++ b/packages/opendesign/src/theme/kunpeng/token.config.ts
@@ -0,0 +1,16 @@
+module.exports = {
+  prefix: '--o-',
+  themeMap: [
+    {
+      key: 'light',
+      name: 'k.light',
+    },
+    {
+      key: 'dark',
+      name: 'k.dark',
+    },
+  ],
+  defaultTheme: '',
+  tokenFile: ['./token.json'],
+  codeSnippetsFile: './k.token.code-snippets',
+};
diff --git a/packages/opendesign/src/theme/kunpeng/token.json b/packages/opendesign/src/theme/kunpeng/token.json
new file mode 100644
index 0000000000000000000000000000000000000000..f9ed090b282207cde241488a1137a9e2402da230
--- /dev/null
+++ b/packages/opendesign/src/theme/kunpeng/token.json
@@ -0,0 +1,2427 @@
+{
+  "white": {
+    "name": "白色",
+    "type": "palette",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "white",
+        "value": {
+          "light": "255, 255, 255",
+          "dark": "255, 255, 255"
+        }
+      }
+    ]
+  },
+  "black": {
+    "name": "黑色",
+    "type": "palette",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "black",
+        "value": {
+          "light": "0, 0, 0",
+          "dark": "0, 0, 0"
+        }
+      }
+    ]
+  },
+  "deepblue": {
+    "name": "深蓝色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "deepblue-1",
+        "value": {
+          "light": "232, 240, 255",
+          "dark": "0, 4, 77"
+        }
+      },
+      {
+        "key": "deepblue-2",
+        "value": {
+          "light": "194, 213, 254",
+          "dark": "6, 15, 120"
+        }
+      },
+      {
+        "key": "deepblue-3",
+        "value": {
+          "light": "157, 184, 253",
+          "dark": "20, 37, 163"
+        }
+      },
+      {
+        "key": "deepblue-4",
+        "value": {
+          "light": "120, 153, 252",
+          "dark": "40, 65, 207"
+        }
+      },
+      {
+        "key": "deepblue-5",
+        "value": {
+          "light": "83, 119, 251",
+          "dark": "66, 99, 250"
+        }
+      },
+      {
+        "key": "deepblue-6",
+        "value": {
+          "light": "46, 83, 250",
+          "dark": "84, 120, 251"
+        }
+      },
+      {
+        "key": "deepblue-7",
+        "value": {
+          "light": "29, 55, 207",
+          "dark": "122, 154, 252"
+        }
+      },
+      {
+        "key": "deepblue-8",
+        "value": {
+          "light": "15, 32, 163",
+          "dark": "160, 186, 253"
+        }
+      },
+      {
+        "key": "deepblue-9",
+        "value": {
+          "light": "6, 15, 120",
+          "dark": "199, 217, 254"
+        }
+      },
+      {
+        "key": "deepblue-10",
+        "value": {
+          "light": "0, 4, 77",
+          "dark": "238, 244, 255"
+        }
+      }
+    ]
+  },
+  "green": {
+    "name": "绿色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "green-1",
+        "value": {
+          "light": "232, 255, 238",
+          "dark": "0, 77, 42"
+        }
+      },
+      {
+        "key": "green-2",
+        "value": {
+          "light": "177, 239, 195",
+          "dark": "2, 102, 53"
+        }
+      },
+      {
+        "key": "green-3",
+        "value": {
+          "light": "128, 224, 158",
+          "dark": "10, 127, 66"
+        }
+      },
+      {
+        "key": "green-4",
+        "value": {
+          "light": "84, 208, 127",
+          "dark": "22, 152, 80"
+        }
+      },
+      {
+        "key": "green-5",
+        "value": {
+          "light": "45, 193, 101",
+          "dark": "36, 177, 95"
+        }
+      },
+      {
+        "key": "green-6",
+        "value": {
+          "light": "11, 177, 81",
+          "dark": "51, 193, 104"
+        }
+      },
+      {
+        "key": "green-7",
+        "value": {
+          "light": "7, 152, 72",
+          "dark": "90, 208, 131"
+        }
+      },
+      {
+        "key": "green-8",
+        "value": {
+          "light": "4, 127, 63",
+          "dark": "135, 224, 163"
+        }
+      },
+      {
+        "key": "green-9",
+        "value": {
+          "light": "2, 102, 53",
+          "dark": "185, 239, 200"
+        }
+      },
+      {
+        "key": "green-10",
+        "value": {
+          "light": "0, 77, 42",
+          "dark": "240, 255, 244"
+        }
+      }
+    ]
+  },
+  "orange": {
+    "name": "橘红色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "orange-1",
+        "value": {
+          "light": "255, 246, 232",
+          "dark": "77, 24, 0"
+        }
+      },
+      {
+        "key": "orange-2",
+        "value": {
+          "light": "254, 226, 186",
+          "dark": "120, 42, 1"
+        }
+      },
+      {
+        "key": "orange-3",
+        "value": {
+          "light": "253, 202, 140",
+          "dark": "163, 68, 8"
+        }
+      },
+      {
+        "key": "orange-4",
+        "value": {
+          "light": "252, 176, 95",
+          "dark": "207, 97, 19"
+        }
+      },
+      {
+        "key": "orange-5",
+        "value": {
+          "light": "251, 147, 50",
+          "dark": "250, 130, 33"
+        }
+      },
+      {
+        "key": "orange-6",
+        "value": {
+          "light": "250, 115, 5",
+          "dark": "251, 143, 43"
+        }
+      },
+      {
+        "key": "orange-7",
+        "value": {
+          "light": "207, 88, 3",
+          "dark": "252, 174, 91"
+        }
+      },
+      {
+        "key": "orange-8",
+        "value": {
+          "light": "163, 64, 2",
+          "dark": "253, 202, 139"
+        }
+      },
+      {
+        "key": "orange-9",
+        "value": {
+          "light": "120, 42, 1",
+          "dark": "254, 227, 188"
+        }
+      },
+      {
+        "key": "orange-10",
+        "value": {
+          "light": "77, 24, 0",
+          "dark": "255, 248, 237"
+        }
+      }
+    ]
+  },
+  "red": {
+    "name": "红色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "red-1",
+        "value": {
+          "light": "255, 234, 232",
+          "dark": "77, 0, 17"
+        }
+      },
+      {
+        "key": "red-2",
+        "value": {
+          "light": "250, 185, 182",
+          "dark": "115, 3, 24"
+        }
+      },
+      {
+        "key": "red-3",
+        "value": {
+          "light": "245, 136, 134",
+          "dark": "153, 9, 31"
+        }
+      },
+      {
+        "key": "red-4",
+        "value": {
+          "light": "240, 87, 90",
+          "dark": "192, 17, 37"
+        }
+      },
+      {
+        "key": "red-5",
+        "value": {
+          "light": "235, 43, 52",
+          "dark": "230, 28, 43"
+        }
+      },
+      {
+        "key": "red-6",
+        "value": {
+          "light": "230, 0, 18",
+          "dark": "235, 35, 45"
+        }
+      },
+      {
+        "key": "red-7",
+        "value": {
+          "light": "192, 0, 22",
+          "dark": "240, 82, 85"
+        }
+      },
+      {
+        "key": "red-8",
+        "value": {
+          "light": "153, 0, 23",
+          "dark": "245, 132, 130"
+        }
+      },
+      {
+        "key": "red-9",
+        "value": {
+          "light": "115, 0, 21",
+          "dark": "250, 183, 180"
+        }
+      },
+      {
+        "key": "red-10",
+        "value": {
+          "light": "77, 0, 17",
+          "dark": "255, 234, 232"
+        }
+      }
+    ]
+  },
+  "huaweired": {
+    "name": "华为红",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "red-huawei",
+        "value": {
+          "light": "199, 0, 11",
+          "dark": "199, 0, 11"
+        }
+      }
+    ]
+  },
+  "gray": {
+    "name": "中性灰",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "gray-1",
+        "value": {
+          "light": "255, 255, 255",
+          "dark": "0, 0, 0"
+        }
+      },
+      {
+        "key": "gray-2",
+        "value": {
+          "light": "243, 243, 245",
+          "dark": "18, 18, 20"
+        }
+      },
+      {
+        "key": "gray-3",
+        "value": {
+          "light": "237, 237, 240",
+          "dark": "26, 26, 28"
+        }
+      },
+      {
+        "key": "gray-4",
+        "value": {
+          "light": "232, 232, 235",
+          "dark": "36, 36, 39"
+        }
+      },
+      {
+        "key": "gray-5",
+        "value": {
+          "light": "222, 222, 227",
+          "dark": "43, 43, 47"
+        }
+      },
+      {
+        "key": "gray-6",
+        "value": {
+          "light": "210, 210, 217",
+          "dark": "53, 53, 57"
+        }
+      },
+      {
+        "key": "gray-7",
+        "value": {
+          "light": "186, 186, 191",
+          "dark": "63, 63, 67"
+        }
+      },
+      {
+        "key": "gray-8",
+        "value": {
+          "light": "149, 149, 156",
+          "dark": "85, 85, 88"
+        }
+      },
+      {
+        "key": "gray-9",
+        "value": {
+          "light": "111, 111, 117",
+          "dark": "118, 118, 122"
+        }
+      },
+      {
+        "key": "gray-10",
+        "value": {
+          "light": "85, 85, 92",
+          "dark": "156, 156, 159"
+        }
+      },
+      {
+        "key": "gray-11",
+        "value": {
+          "light": "61, 61, 66",
+          "dark": "181, 181, 185"
+        }
+      },
+      {
+        "key": "gray-12",
+        "value": {
+          "light": "37, 37, 41",
+          "dark": "208, 208, 210"
+        }
+      },
+      {
+        "key": "gray-13",
+        "value": {
+          "light": "21, 21, 23",
+          "dark": "235, 235, 238"
+        }
+      },
+      {
+        "key": "gray-14",
+        "value": {
+          "light": "0, 0, 0",
+          "dark": "255, 255, 255"
+        }
+      }
+    ]
+  },
+  "mixedgray": {
+    "name": "混合中性色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "mixedgray-1",
+        "value": {
+          "light": "255, 255, 255",
+          "dark": "0, 0, 0"
+        }
+      },
+      {
+        "key": "mixedgray-2",
+        "value": {
+          "light": "244, 245, 247",
+          "dark": "16, 18, 20"
+        }
+      },
+      {
+        "key": "mixedgray-3",
+        "value": {
+          "light": "237, 239, 242",
+          "dark": "23, 25, 28"
+        }
+      },
+      {
+        "key": "mixedgray-4",
+        "value": {
+          "light": "232, 234, 237",
+          "dark": "33, 35, 39"
+        }
+      },
+      {
+        "key": "mixedgray-5",
+        "value": {
+          "light": "224, 226, 230",
+          "dark": "40, 42, 47"
+        }
+      },
+      {
+        "key": "mixedgray-6",
+        "value": {
+          "light": "209, 214, 219",
+          "dark": "50, 53, 57"
+        }
+      },
+      {
+        "key": "mixedgray-7",
+        "value": {
+          "light": "179, 185, 191",
+          "dark": "61, 63, 67"
+        }
+      },
+      {
+        "key": "mixedgray-8",
+        "value": {
+          "light": "144, 150, 158",
+          "dark": "80, 84, 88"
+        }
+      },
+      {
+        "key": "mixedgray-9",
+        "value": {
+          "light": "104, 109, 117",
+          "dark": "113, 117, 122"
+        }
+      },
+      {
+        "key": "mixedgray-10",
+        "value": {
+          "light": "79, 84, 92",
+          "dark": "147, 152, 159"
+        }
+      },
+      {
+        "key": "mixedgray-11",
+        "value": {
+          "light": "55, 59, 66",
+          "dark": "172, 177, 185"
+        }
+      },
+      {
+        "key": "mixedgray-12",
+        "value": {
+          "light": "32, 35, 41",
+          "dark": "198, 202, 210"
+        }
+      },
+      {
+        "key": "mixedgray-13",
+        "value": {
+          "light": "18, 20, 23",
+          "dark": "231, 234, 238"
+        }
+      },
+      {
+        "key": "mixedgray-14",
+        "value": {
+          "light": "0, 0, 0",
+          "dark": "255, 255, 255"
+        }
+      }
+    ]
+  },
+  "yellow": {
+    "name": "黄色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "yellow-1",
+        "value": {
+          "light": "255, 255, 232",
+          "dark": "77, 54, 0"
+        }
+      },
+      {
+        "key": "yellow-2",
+        "value": {
+          "light": "253, 251, 185",
+          "dark": "119, 87, 2"
+        }
+      },
+      {
+        "key": "yellow-3",
+        "value": {
+          "light": "251, 244, 139",
+          "dark": "161, 126, 11"
+        }
+      },
+      {
+        "key": "yellow-4",
+        "value": {
+          "light": "249, 233, 94",
+          "dark": "203, 167, 24"
+        }
+      },
+      {
+        "key": "yellow-5",
+        "value": {
+          "light": "247, 221, 49",
+          "dark": "245, 211, 42"
+        }
+      },
+      {
+        "key": "yellow-6",
+        "value": {
+          "light": "245, 205, 5",
+          "dark": "247, 222, 54"
+        }
+      },
+      {
+        "key": "yellow-7",
+        "value": {
+          "light": "203, 163, 3",
+          "dark": "249, 234, 100"
+        }
+      },
+      {
+        "key": "yellow-8",
+        "value": {
+          "light": "161, 124, 2",
+          "dark": "251, 244, 146"
+        }
+      },
+      {
+        "key": "yellow-9",
+        "value": {
+          "light": "119, 87, 1",
+          "dark": "253, 251, 192"
+        }
+      },
+      {
+        "key": "yellow-10",
+        "value": {
+          "light": "77, 54, 0",
+          "dark": "255, 255, 240"
+        }
+      }
+    ]
+  },
+  "lime": {
+    "name": "黄绿色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "lime-1",
+        "value": {
+          "light": "251, 255, 232",
+          "dark": "41, 77, 0"
+        }
+      },
+      {
+        "key": "lime-2",
+        "value": {
+          "light": "233, 245, 184",
+          "dark": "63, 109, 3"
+        }
+      },
+      {
+        "key": "lime-3",
+        "value": {
+          "light": "213, 236, 139",
+          "dark": "91, 142, 14"
+        }
+      },
+      {
+        "key": "lime-4",
+        "value": {
+          "light": "192, 226, 97",
+          "dark": "121, 174, 30"
+        }
+      },
+      {
+        "key": "lime-5",
+        "value": {
+          "light": "169, 217, 59",
+          "dark": "155, 207, 50"
+        }
+      },
+      {
+        "key": "lime-6",
+        "value": {
+          "light": "146, 207, 23",
+          "dark": "172, 217, 68"
+        }
+      },
+      {
+        "key": "lime-7",
+        "value": {
+          "light": "116, 174, 15",
+          "dark": "194, 226, 104"
+        }
+      },
+      {
+        "key": "lime-8",
+        "value": {
+          "light": "88, 142, 8",
+          "dark": "214, 236, 144"
+        }
+      },
+      {
+        "key": "lime-9",
+        "value": {
+          "light": "63, 109, 3",
+          "dark": "233, 245, 186"
+        }
+      },
+      {
+        "key": "lime-10",
+        "value": {
+          "light": "41, 77, 0",
+          "dark": "251, 255, 232"
+        }
+      }
+    ]
+  },
+  "cyan": {
+    "name": "青色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "cyan-1",
+        "value": {
+          "light": "232, 255, 249",
+          "dark": "0, 73, 77"
+        }
+      },
+      {
+        "key": "cyan-2",
+        "value": {
+          "light": "176, 240, 226",
+          "dark": "2, 101, 103"
+        }
+      },
+      {
+        "key": "cyan-3",
+        "value": {
+          "light": "125, 225, 207",
+          "dark": "9, 129, 127"
+        }
+      },
+      {
+        "key": "cyan-4",
+        "value": {
+          "light": "79, 211, 191",
+          "dark": "18, 155, 148"
+        }
+      },
+      {
+        "key": "cyan-5",
+        "value": {
+          "light": "38, 196, 177",
+          "dark": "30, 181, 167"
+        }
+      },
+      {
+        "key": "cyan-6",
+        "value": {
+          "light": "3, 181, 165",
+          "dark": "42, 196, 178"
+        }
+      },
+      {
+        "key": "cyan-7",
+        "value": {
+          "light": "2, 155, 147",
+          "dark": "84, 211, 192"
+        }
+      },
+      {
+        "key": "cyan-8",
+        "value": {
+          "light": "1, 129, 127",
+          "dark": "130, 225, 208"
+        }
+      },
+      {
+        "key": "cyan-9",
+        "value": {
+          "light": "0, 101, 103",
+          "dark": "182, 240, 227"
+        }
+      },
+      {
+        "key": "cyan-10",
+        "value": {
+          "light": "0, 73, 77",
+          "dark": "239, 255, 251"
+        }
+      }
+    ]
+  },
+  "blue": {
+    "name": "蓝色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "blue-1",
+        "value": {
+          "light": "232, 249, 255",
+          "dark": "0, 34, 77"
+        }
+      },
+      {
+        "key": "blue-2",
+        "value": {
+          "light": "185, 233, 252",
+          "dark": "1, 57, 117"
+        }
+      },
+      {
+        "key": "blue-3",
+        "value": {
+          "light": "138, 214, 249",
+          "dark": "8, 86, 158"
+        }
+      },
+      {
+        "key": "blue-4",
+        "value": {
+          "light": "93, 192, 246",
+          "dark": "18, 118, 199"
+        }
+      },
+      {
+        "key": "blue-5",
+        "value": {
+          "light": "48, 168, 243",
+          "dark": "31, 153, 240"
+        }
+      },
+      {
+        "key": "blue-6",
+        "value": {
+          "light": "5, 142, 240",
+          "dark": "42, 166, 243"
+        }
+      },
+      {
+        "key": "blue-7",
+        "value": {
+          "light": "3, 111, 199",
+          "dark": "89, 191, 246"
+        }
+      },
+      {
+        "key": "blue-8",
+        "value": {
+          "light": "2, 83, 158",
+          "dark": "137, 214, 249"
+        }
+      },
+      {
+        "key": "blue-9",
+        "value": {
+          "light": "1, 57, 117",
+          "dark": "187, 233, 252"
+        }
+      },
+      {
+        "key": "blue-10",
+        "value": {
+          "light": "0, 34, 77",
+          "dark": "237, 250, 255"
+        }
+      }
+    ]
+  },
+  "purple": {
+    "name": "紫色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "purple-1",
+        "value": {
+          "light": "245, 232, 255",
+          "dark": "22, 0, 77"
+        }
+      },
+      {
+        "key": "purple-2",
+        "value": {
+          "light": "225, 192, 253",
+          "dark": "40, 3, 118"
+        }
+      },
+      {
+        "key": "purple-3",
+        "value": {
+          "light": "203, 152, 251",
+          "dark": "66, 15, 160"
+        }
+      },
+      {
+        "key": "purple-4",
+        "value": {
+          "light": "178, 113, 248",
+          "dark": "98, 33, 202"
+        }
+      },
+      {
+        "key": "purple-5",
+        "value": {
+          "light": "152, 75, 246",
+          "dark": "134, 57, 244"
+        }
+      },
+      {
+        "key": "purple-6",
+        "value": {
+          "light": "123, 37, 244",
+          "dark": "152, 74, 246"
+        }
+      },
+      {
+        "key": "purple-7",
+        "value": {
+          "light": "92, 23, 202",
+          "dark": "179, 114, 248"
+        }
+      },
+      {
+        "key": "purple-8",
+        "value": {
+          "light": "64, 12, 160",
+          "dark": "205, 156, 251"
+        }
+      },
+      {
+        "key": "purple-9",
+        "value": {
+          "light": "41, 4, 118",
+          "dark": "228, 198, 253"
+        }
+      },
+      {
+        "key": "purple-10",
+        "value": {
+          "light": "22, 0, 77",
+          "dark": "249, 240, 255"
+        }
+      }
+    ]
+  },
+  "pink": {
+    "name": "粉色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "pink-1",
+        "value": {
+          "light": "255, 232, 253",
+          "dark": "61, 0, 77"
+        }
+      },
+      {
+        "key": "pink-2",
+        "value": {
+          "light": "246, 188, 243",
+          "dark": "93, 5, 110"
+        }
+      },
+      {
+        "key": "pink-3",
+        "value": {
+          "light": "238, 146, 235",
+          "dark": "127, 16, 144"
+        }
+      },
+      {
+        "key": "pink-4",
+        "value": {
+          "light": "229, 107, 229",
+          "dark": "164, 33, 178"
+        }
+      },
+      {
+        "key": "pink-5",
+        "value": {
+          "light": "216, 71, 221",
+          "dark": "200, 54, 212"
+        }
+      },
+      {
+        "key": "pink-6",
+        "value": {
+          "light": "199, 37, 212",
+          "dark": "216, 72, 221"
+        }
+      },
+      {
+        "key": "pink-7",
+        "value": {
+          "light": "163, 23, 178",
+          "dark": "229, 109, 229"
+        }
+      },
+      {
+        "key": "pink-8",
+        "value": {
+          "light": "127, 13, 144",
+          "dark": "238, 149, 235"
+        }
+      },
+      {
+        "key": "pink-9",
+        "value": {
+          "light": "93, 5, 110",
+          "dark": "246, 191, 243"
+        }
+      },
+      {
+        "key": "pink-10",
+        "value": {
+          "light": "61, 0, 77",
+          "dark": "255, 236, 253"
+        }
+      }
+    ]
+  },
+  "rosyred": {
+    "name": "玫红色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "rosyred-1",
+        "value": {
+          "light": "255, 232, 240",
+          "dark": "77, 0, 48"
+        }
+      },
+      {
+        "key": "rosyred-2",
+        "value": {
+          "light": "249, 185, 209",
+          "dark": "114, 3, 70"
+        }
+      },
+      {
+        "key": "rosyred-3",
+        "value": {
+          "light": "243, 141, 182",
+          "dark": "151, 12, 91"
+        }
+      },
+      {
+        "key": "rosyred-4",
+        "value": {
+          "light": "238, 98, 158",
+          "dark": "189, 25, 112"
+        }
+      },
+      {
+        "key": "rosyred-5",
+        "value": {
+          "light": "232, 57, 139",
+          "dark": "226, 41, 133"
+        }
+      },
+      {
+        "key": "rosyred-6",
+        "value": {
+          "light": "226, 18, 122",
+          "dark": "232, 53, 137"
+        }
+      },
+      {
+        "key": "rosyred-7",
+        "value": {
+          "light": "189, 11, 106",
+          "dark": "238, 97, 158"
+        }
+      },
+      {
+        "key": "rosyred-8",
+        "value": {
+          "light": "151, 6, 88",
+          "dark": "243, 143, 183"
+        }
+      },
+      {
+        "key": "rosyred-9",
+        "value": {
+          "light": "114, 2, 69",
+          "dark": "249, 192, 213"
+        }
+      },
+      {
+        "key": "rosyred-10",
+        "value": {
+          "light": "77, 0, 48",
+          "dark": "255, 242, 247"
+        }
+      }
+    ]
+  },
+
+  "base": {
+    "name": "基础色(不同皮肤色相不变)",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-white",
+        "value": {
+          "light": "rgb(var(--o-white))",
+          "dark": "rgb(var(--o-white))"
+        }
+      },
+      {
+        "key": "color-black",
+        "value": {
+          "light": "rgb(var(--o-black))",
+          "dark": "rgb(var(--o-black))"
+        }
+      }
+    ]
+  },
+  "primary": {
+    "name": "强调色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-primary1",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-gray-12))",
+          "dark": "rgb(var(--o-gray-14))"
+        }
+      },
+      {
+        "key": "color-primary2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-gray-11))",
+          "dark": "rgb(var(--o-gray-13))"
+        }
+      },
+      {
+        "key": "color-primary3",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-gray-13))",
+          "dark": "rgb(var(--o-gray-12))"
+        }
+      },
+      {
+        "key": "color-primary4",
+        "description": "禁用",
+        "value": {
+          "light": "rgb(var(--o-gray-6))",
+          "dark": "rgb(var(--o-gray-8))"
+        }
+      },
+      {
+        "key": "color-primary1-light",
+        "description": "常规-浅",
+        "value": {
+          "light": "rgb(var(--o-gray-4))",
+          "dark": "rgb(var(--o-gray-5))"
+        }
+      },
+      {
+        "key": "color-primary2-light",
+        "description": "悬浮-浅",
+        "value": {
+          "light": "rgb(var(--o-gray-5))",
+          "dark": "rgb(var(--o-gray-6))"
+        }
+      },
+      {
+        "key": "color-primary3-light",
+        "description": "激活-浅",
+        "value": {
+          "light": "rgb(var(--o-gray-6))",
+          "dark": "rgb(var(--o-gray-7))"
+        }
+      },
+      {
+        "key": "color-primary4-light",
+        "description": "禁用-浅",
+        "value": {
+          "light": "rgb(var(--o-gray-5))",
+          "dark": "rgb(var(--o-gray-6))"
+        }
+      }
+    ]
+  },
+  "success": {
+    "name": "成功色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-success1",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-green-6))",
+          "dark": "rgb(var(--o-green-6))"
+        }
+      },
+      {
+        "key": "color-success2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-green-4))",
+          "dark": "rgb(var(--o-green-4))"
+        }
+      },
+      {
+        "key": "color-success3",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-green-7))",
+          "dark": "rgb(var(--o-green-7))"
+        }
+      },
+      {
+        "key": "color-success4",
+        "description": "禁用",
+        "value": {
+          "light": "rgb(var(--o-green-3))",
+          "dark": "rgb(var(--o-green-3))"
+        }
+      },
+      {
+        "key": "color-success1-light",
+        "description": "常规-浅",
+        "value": {
+          "light": "rgb(var(--o-green-2))",
+          "dark": "rgb(var(--o-green-2))"
+        }
+      },
+      {
+        "key": "color-success2-light",
+        "description": "悬浮-浅",
+        "value": {
+          "light": "rgb(var(--o-green-3))",
+          "dark": "rgb(var(--o-green-3))"
+        }
+      },
+      {
+        "key": "color-success3-light",
+        "description": "激活-浅",
+        "value": {
+          "light": "rgb(var(--o-green-4))",
+          "dark": "rgb(var(--o-green-4))"
+        }
+      },
+      {
+        "key": "color-success4-light",
+        "description": "禁用-浅",
+        "value": {
+          "light": "rgb(var(--o-green-1))",
+          "dark": "rgb(var(--o-green-1))"
+        }
+      }
+    ]
+  },
+  "warning": {
+    "name": "告警色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-warning1",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-orange-6))",
+          "dark": "rgb(var(--o-orange-6))"
+        }
+      },
+      {
+        "key": "color-warning2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-orange-4))",
+          "dark": "rgb(var(--o-orange-4))"
+        }
+      },
+      {
+        "key": "color-warning3",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-orange-7))",
+          "dark": "rgb(var(--o-orange-7))"
+        }
+      },
+      {
+        "key": "color-warning4",
+        "description": "禁用",
+        "value": {
+          "light": "rgb(var(--o-orange-3))",
+          "dark": "rgb(var(--o-orange-3))"
+        }
+      },
+      {
+        "key": "color-warning1-light",
+        "description": "常规-浅",
+        "value": {
+          "light": "rgb(var(--o-orange-2))",
+          "dark": "rgb(var(--o-orange-2))"
+        }
+      },
+      {
+        "key": "color-warning2-light",
+        "description": "悬浮-浅",
+        "value": {
+          "light": "rgb(var(--o-orange-3))",
+          "dark": "rgb(var(--o-orange-3))"
+        }
+      },
+      {
+        "key": "color-warning3-light",
+        "description": "激活-浅",
+        "value": {
+          "light": "rgb(var(--o-orange-4))",
+          "dark": "rgb(var(--o-orange-4))"
+        }
+      },
+      {
+        "key": "color-warning4-light",
+        "description": "禁用-浅",
+        "value": {
+          "light": "rgb(var(--o-orange-1))",
+          "dark": "rgb(var(--o-orange-1))"
+        }
+      }
+    ]
+  },
+  "danger": {
+    "name": "危险色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-danger1",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-red-6))",
+          "dark": "rgb(var(--o-red-6))"
+        }
+      },
+      {
+        "key": "color-danger2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-red-4))",
+          "dark": "rgb(var(--o-red-4))"
+        }
+      },
+      {
+        "key": "color-danger3",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-red-7))",
+          "dark": "rgb(var(--o-red-7))"
+        }
+      },
+      {
+        "key": "color-danger4",
+        "description": "禁用",
+        "value": {
+          "light": "rgb(var(--o-red-3))",
+          "dark": "rgb(var(--o-red-3))"
+        }
+      },
+      {
+        "key": "color-danger1-light",
+        "description": "常规-浅",
+        "value": {
+          "light": "rgb(var(--o-red-2))",
+          "dark": "rgb(var(--o-red-2))"
+        }
+      },
+      {
+        "key": "color-danger2-light",
+        "description": "悬浮-浅",
+        "value": {
+          "light": "rgb(var(--o-red-3))",
+          "dark": "rgb(var(--o-red-3))"
+        }
+      },
+      {
+        "key": "color-danger3-light",
+        "description": "激活-浅",
+        "value": {
+          "light": "rgb(var(--o-red-4))",
+          "dark": "rgb(var(--o-red-4))"
+        }
+      },
+      {
+        "key": "color-danger4-light",
+        "description": "禁用-浅",
+        "value": {
+          "light": "rgb(var(--o-red-1))",
+          "dark": "rgb(var(--o-red-1))"
+        }
+      }
+    ]
+  },
+  "fill": {
+    "name": "填充色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-fill1",
+        "description": "一级填充：页面背景",
+        "value": {
+          "light": "rgb(var(--o-gray-2))",
+          "dark": "rgb(var(--o-gray-3))"
+        }
+      },
+      {
+        "key": "color-fill2",
+        "description": "二级填充：区块、卡片",
+        "value": {
+          "light": "rgb(var(--o-gray-1))",
+          "dark": "rgb(var(--o-gray-4))"
+        }
+      },
+      {
+        "key": "color-fill3",
+        "description": "三级填充：卡片",
+        "value": {
+          "light": "rgb(var(--o-gray-3))",
+          "dark": "rgb(var(--o-gray-5))"
+        }
+      }
+    ]
+  },
+  "control": {
+    "name": "控件色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-control1",
+        "description": "常规，常用于边框",
+        "value": {
+          "light": "rgba(var(--o-gray-14), 0.25)",
+          "dark": "rgba(var(--o-gray-14), 0.25)"
+        }
+      },
+      {
+        "key": "color-control2",
+        "description": "悬浮，常用于边框",
+        "value": {
+          "light": "rgba(var(--o-gray-14), 0.6)",
+          "dark": "rgba(var(--o-gray-14), 0.6)"
+        }
+      },
+      {
+        "key": "color-control3",
+        "description": "激活，常用于边框",
+        "value": {
+          "light": "rgba(var(--o-gray-14), 0.8)",
+          "dark": "rgba(var(--o-gray-14), 0.8)"
+        }
+      },
+      {
+        "key": "color-control4",
+        "description": "禁用，常用于边框",
+        "value": {
+          "light": "rgba(var(--o-gray-14), 0.1)",
+          "dark": "rgba(var(--o-gray-14), 0.15)"
+        }
+      },
+      {
+        "key": "color-control1-light",
+        "description": "常规-浅，常用于背景",
+        "value": {
+          "light": "rgb(var(--o-gray-5))",
+          "dark": "rgb(var(--o-gray-7))"
+        }
+      },
+      {
+        "key": "color-control2-light",
+        "description": "悬浮-浅，常用于背景",
+        "value": {
+          "light": "rgb(var(--o-gray-3))",
+          "dark": "rgb(var(--o-gray-5))"
+        }
+      },
+      {
+        "key": "color-control3-light",
+        "description": "激活-浅，常用于背景",
+        "value": {
+          "light": "rgb(var(--o-gray-4))",
+          "dark": "rgb(var(--o-gray-6))"
+        }
+      },
+      {
+        "key": "color-control4-light",
+        "description": "禁用，常用于背景",
+        "value": {
+          "light": "rgb(var(--o-gray-3))",
+          "dark": "rgb(var(--o-gray-5))"
+        }
+      },
+      {
+        "key": "color-control-light",
+        "description": "很浅，常用于表格背景色",
+        "value": {
+          "light": "rgb(var(--o-gray-1))",
+          "dark": "rgb(var(--o-gray-4))"
+        }
+      }
+    ]
+  },
+  "info": {
+    "name": "信息色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-info1",
+        "description": "一级/强调/标题",
+        "value": {
+          "light": "rgba(var(--o-gray-14), 1.0)",
+          "dark": "rgba(var(--o-gray-14), 1.0)"
+        }
+      },
+      {
+        "key": "color-info2",
+        "description": "二级/次强调/正文",
+        "value": {
+          "light": "rgba(var(--o-gray-14), 0.8)",
+          "dark": "rgba(var(--o-gray-14), 0.8)"
+        }
+      },
+      {
+        "key": "color-info3",
+        "description": "三级/辅助信息",
+        "value": {
+          "light": "rgba(var(--o-gray-14), 0.6)",
+          "dark": "rgba(var(--o-gray-14), 0.6)"
+        }
+      },
+      {
+        "key": "color-info4",
+        "description": "置灰/禁用",
+        "value": {
+          "light": "rgba(var(--o-gray-14), 0.4)",
+          "dark": "rgba(var(--o-gray-14), 0.4)"
+        }
+      },
+      {
+        "key": "color-info1-inverse",
+        "description": "一级/次强调/正文反色",
+        "value": {
+          "light": "rgba(var(--o-gray-1), 1.0)",
+          "dark": "rgba(var(--o-gray-1), 1.0)"
+        }
+      },
+      {
+        "key": "color-info2-inverse",
+        "description": "二级/辅助信息反色",
+        "value": {
+          "light": "rgba(var(--o-gray-1), 0.8)",
+          "dark": "rgba(var(--o-gray-1), 0.8)"
+        }
+      },
+      {
+        "key": "color-info3-inverse",
+        "description": "三级/辅助信息反色",
+        "value": {
+          "light": "rgba(var(--o-gray-1), 0.6)",
+          "dark": "rgba(var(--o-gray-1), 0.6)"
+        }
+      },
+      {
+        "key": "color-info4-inverse",
+        "description": "置灰/禁用反色",
+        "value": {
+          "light": "rgba(var(--o-gray-1), 0.4)",
+          "dark": "rgba(var(--o-gray-1), 0.4)"
+        }
+      }
+    ]
+  },
+  "mask": {
+    "name": "遮罩色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-mask1",
+        "description": "全局遮罩",
+        "value": {
+          "light": "rgba(var(--o-gray-14), 0.4)",
+          "dark": "rgba(var(--o-gray-1), 0.4)"
+        }
+      },
+      {
+        "key": "color-mask2",
+        "description": "局部遮罩",
+        "value": {
+          "light": "rgba(var(--o-gray-1), 0.2)",
+          "dark": "rgba(var(--o-gray-4), 0.2)"
+        }
+      }
+    ]
+  },
+  "shadow": {
+    "name": "阴影",
+    "type": "shadow",
+    "typeName": "阴影",
+    "value": [
+      {
+        "key": "shadow-1",
+        "name": "阴影1",
+        "description": "用于卡片、小弹窗、楼层阴影",
+        "value": {
+          "light": "0 3px 8px rgba(var(--o-gray-14), 0.08)",
+          "dark": "0 3px 8px rgba(var(--o-gray-1), 0.08)"
+        }
+      },
+      {
+        "key": "shadow-2",
+        "name": "阴影2",
+        "description": "用于卡片悬浮阴影",
+        "value": {
+          "light": "0 2px 24px rgba(var(--o-gray-14), 0.15)",
+          "dark": "0 2px 24px rgba(var(--o-gray-1), 0.15)"
+        }
+      },
+      {
+        "key": "shadow-3",
+        "name": "阴影3",
+        "description": "用于提示阴影",
+        "value": {
+          "light": "0 8px 40px rgba(var(--o-gray-14), 0.1)",
+          "dark": "0 8px 40px rgba(var(--o-gray-1), 0.1)"
+        }
+      }
+    ]
+  },
+  "link": {
+    "name": "链接色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-link1",
+        "description": "常规",
+        "value": {
+          "light": "rgba(var(--o-deepblue-6), 1.0)",
+          "dark": "rgba(var(--o-deepblue-6), 1.0)"
+        }
+      },
+      {
+        "key": "color-link2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgba(var(--o-deepblue-6), 0.7)",
+          "dark": "rgba(var(--o-deepblue-6), 0.7)"
+        }
+      },
+      {
+        "key": "color-link3",
+        "description": "激活",
+        "value": {
+          "light": "rgba(var(--o-deepblue-6), 0.9)",
+          "dark": "rgba(var(--o-deepblue-6), 0.9)"
+        }
+      },
+      {
+        "key": "color-link4",
+        "description": "禁用",
+        "value": {
+          "light": "rgba(var(--o-deepblue-6), 0.4)",
+          "dark": "rgba(var(--o-deepblue-6), 0.4)"
+        }
+      }
+    ]
+  },
+
+  "gap": {
+    "name": "间距",
+    "type": "gap",
+    "typeName": "间距",
+    "value": [
+      {
+        "key": "gap-1",
+        "name": "间距1",
+        "description": "用于组件之间的间距1",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "gap-2",
+        "name": "间距2",
+        "description": "用于组件之间的间距2",
+        "value": {
+          "light": "8px",
+          "dark": "8px"
+        }
+      },
+      {
+        "key": "gap-3",
+        "name": "间距3",
+        "description": "用于组件之间的间距3",
+        "value": {
+          "light": "12px",
+          "dark": "12px"
+        }
+      },
+      {
+        "key": "gap-4",
+        "name": "间距4",
+        "description": "用于组件之间的间距4",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "gap-5",
+        "name": "间距5",
+        "description": "用于组件之间的间距5",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "gap-6",
+        "name": "间距6",
+        "description": "用于组件之间的间距6",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "gap-7",
+        "name": "间距7",
+        "description": "用于组件之间的间距7",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      },
+      {
+        "key": "gap-8",
+        "name": "间距8",
+        "description": "用于组件之间的间距8",
+        "value": {
+          "light": "48px",
+          "dark": "48px"
+        }
+      },
+      {
+        "key": "gap-9",
+        "name": "间距9",
+        "description": "用于组件之间的间距9",
+        "value": {
+          "light": "64px",
+          "dark": "64px"
+        }
+      },
+      {
+        "key": "gap-10",
+        "name": "间距10",
+        "description": "用于组件之间的间距10",
+        "value": {
+          "light": "72px",
+          "dark": "72px"
+        }
+      }
+    ]
+  },
+
+  "control_size": {
+    "name": "组件尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "control_size-2xs",
+        "name": "超小尺寸",
+        "description": "超小尺寸",
+        "value": {
+          "light": "14px",
+          "dark": "14px"
+        }
+      },
+      {
+        "key": "control_size-xs",
+        "name": "小尺寸",
+        "description": "小尺寸",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "control_size-s",
+        "name": "小尺寸",
+        "description": "小尺寸",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "control_size-m",
+        "name": "中尺寸",
+        "description": "尺寸",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "control_size-l",
+        "name": "大尺寸",
+        "description": "尺寸",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      },
+      {
+        "key": "control_size-xl",
+        "name": "大尺寸",
+        "description": "尺寸",
+        "value": {
+          "light": "48px",
+          "dark": "48px"
+        }
+      },
+      {
+        "key": "control_size-2xl",
+        "name": "大尺寸",
+        "description": "尺寸",
+        "value": {
+          "light": "56px",
+          "dark": "56px"
+        }
+      }
+    ]
+  },
+
+  "icon_size": {
+    "name": "图标尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "icon_size-xs",
+        "name": "超小尺寸图标",
+        "description": "超小尺寸图标",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "icon_size-s",
+        "name": "小尺寸图标",
+        "description": "小尺寸图标",
+        "value": {
+          "light": "20px",
+          "dark": "20px"
+        }
+      },
+      {
+        "key": "icon_size-m",
+        "name": "中尺寸图标",
+        "description": "中尺寸图标",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "icon_size-l",
+        "name": "大尺寸图标",
+        "description": "大尺寸图标",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "icon_size-xl",
+        "name": "超大尺寸图标",
+        "description": "超大尺寸图标",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      },
+      {
+        "key": "icon_size-2xl",
+        "name": "2xl尺寸图标",
+        "description": "2xl尺寸图标",
+        "value": {
+          "light": "48px",
+          "dark": "48px"
+        }
+      },
+      {
+        "key": "icon_size-3xl",
+        "name": "3xl尺寸图标",
+        "description": "3xl尺寸图标",
+        "value": {
+          "light": "56px",
+          "dark": "56px"
+        }
+      },
+      {
+        "key": "icon_size-4xl",
+        "name": "4xl尺寸图标",
+        "description": "4xl尺寸图标",
+        "value": {
+          "light": "64px",
+          "dark": "64px"
+        }
+      }
+    ]
+  },
+  "icon_size_control": {
+    "name": "组件图标尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "icon_size_control-xs",
+        "name": "超小尺寸图标",
+        "description": "超小尺寸控件图标(组件使用)",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "icon_size_control-s",
+        "name": "小尺寸图标",
+        "description": "小尺寸控件图标(组件使用)",
+        "value": {
+          "light": "20px",
+          "dark": "20px"
+        }
+      },
+      {
+        "key": "icon_size_control-m",
+        "name": "中尺寸图标",
+        "description": "中尺寸控件图标(组件使用)",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "icon_size_control-l",
+        "name": "大尺寸图标",
+        "description": "大尺寸控件图标(组件使用)",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "icon_size_control-xl",
+        "name": "超大尺寸图标",
+        "description": "超大尺寸控件图标(组件使用)",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      }
+    ]
+  },
+
+  "font_size": {
+    "name": "字体尺寸",
+    "type": "font",
+    "typeName": "字体",
+    "value": [
+      {
+        "key": "font_size-display1",
+        "name": "一级数据展示",
+        "description": "一级数据展示",
+        "value": {
+          "light": "56px",
+          "dark": "56px"
+        }
+      },
+      {
+        "key": "font_size-display2",
+        "name": "二级数据展示",
+        "description": "二级数据展示",
+        "value": {
+          "light": "48px",
+          "dark": "48px"
+        }
+      },
+      {
+        "key": "font_size-display3",
+        "name": "三级数据展示",
+        "description": "三级数据展示",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      },
+      {
+        "key": "font_size-h1",
+        "name": "一级标题",
+        "description": "一级标题",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "font_size-h2",
+        "name": "二级标题",
+        "description": "二级标题",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "font_size-h3",
+        "name": "三级标题",
+        "description": "三级标题",
+        "value": {
+          "light": "22px",
+          "dark": "22px"
+        }
+      },
+      {
+        "key": "font_size-h4",
+        "name": "四级标题",
+        "description": "四级标题",
+        "value": {
+          "light": "20px",
+          "dark": "20px"
+        }
+      },
+      {
+        "key": "font_size-text1",
+        "name": "常规正文",
+        "description": "常规正文",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "font_size-text2",
+        "name": "大号正文",
+        "description": "大号正文",
+        "value": {
+          "light": "18px",
+          "dark": "18px"
+        }
+      },
+      {
+        "key": "font_size-tip1",
+        "name": "提示文本1",
+        "description": "提示文本1",
+        "value": {
+          "light": "14px",
+          "dark": "14px"
+        }
+      },
+      {
+        "key": "font_size-tip2",
+        "name": "提示文本2",
+        "description": "提示文本2",
+        "value": {
+          "light": "12px",
+          "dark": "12px"
+        }
+      }
+    ]
+  },
+  "line_height": {
+    "name": "字体行高",
+    "type": "font",
+    "typeName": "字体",
+    "value": [
+      {
+        "key": "line_height-display1",
+        "name": "一级数据展示",
+        "description": "一级数据展示",
+        "value": {
+          "light": "80px",
+          "dark": "80px"
+        }
+      },
+      {
+        "key": "line_height-display2",
+        "name": "二级数据展示",
+        "description": "二级数据展示",
+        "value": {
+          "light": "64px",
+          "dark": "64px"
+        }
+      },
+      {
+        "key": "line_height-display3",
+        "name": "三级数据展示",
+        "description": "三级数据展示",
+        "value": {
+          "light": "56px",
+          "dark": "56px"
+        }
+      },
+      {
+        "key": "line_height-h1",
+        "name": "一级标题",
+        "description": "一级标题",
+        "value": {
+          "light": "44px",
+          "dark": "44px"
+        }
+      },
+      {
+        "key": "line_height-h2",
+        "name": "二级标题",
+        "description": "二级标题",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "line_height-h3",
+        "name": "三级标题",
+        "description": "三级标题",
+        "value": {
+          "light": "30px",
+          "dark": "30px"
+        }
+      },
+      {
+        "key": "line_height-h4",
+        "name": "四级标题",
+        "description": "四级标题",
+        "value": {
+          "light": "28px",
+          "dark": "28px"
+        }
+      },
+      {
+        "key": "line_height-text1",
+        "name": "正文",
+        "description": "正文",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "line_height-text2",
+        "name": "正文-大",
+        "description": "正文-大",
+        "value": {
+          "light": "26px",
+          "dark": "26x"
+        }
+      },
+      {
+        "key": "line_height-tip1",
+        "name": "提示文本1",
+        "description": "提示文本1",
+        "value": {
+          "light": "22px",
+          "dark": "22px"
+        }
+      },
+      {
+        "key": "line_height-tip2",
+        "name": "提示文本2",
+        "description": "提示文本2",
+        "value": {
+          "light": "18px",
+          "dark": "18px"
+        }
+      }
+    ]
+  },
+
+  "radius": {
+    "name": "圆角尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "radius-xs",
+        "name": "超小尺寸圆角",
+        "description": "超小尺寸圆角",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "radius-s",
+        "name": "小尺寸圆角",
+        "description": "小尺寸圆角",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "radius-m",
+        "name": "中尺寸圆角",
+        "description": "中尺寸圆角",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "radius-l",
+        "name": "大尺寸圆角",
+        "description": "大尺寸圆角",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "radius-xl",
+        "name": "大尺寸圆角",
+        "description": "大尺寸圆角,一般用于卡片",
+        "value": {
+          "light": "0px",
+          "dark": "0px"
+        }
+      }
+    ]
+  },
+  "radius_control": {
+    "name": "组件圆角尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "radius_control-xs",
+        "name": "超小尺寸控件圆角",
+        "description": "超小尺寸控件圆角(组件使用)",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "radius_control-s",
+        "name": "小尺寸控件圆角",
+        "description": "小尺寸控件圆角(组件使用)",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "radius_control-m",
+        "name": "中尺寸控件圆角",
+        "description": "中尺寸控件圆角(组件使用)",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "radius_control-l",
+        "name": "大尺寸控件圆角",
+        "description": "大尺寸控件圆角(组件使用)",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      }
+    ]
+  },
+
+  "duration": {
+    "name": "动画持续时间",
+    "type": "animation",
+    "typeName": "动画",
+    "value": [
+      {
+        "key": "duration-s",
+        "name": "持续时间",
+        "description": "用于退出屏幕的动画",
+        "value": {
+          "light": "200ms",
+          "dark": "200ms"
+        }
+      },
+      {
+        "key": "duration-m1",
+        "name": "持续时间",
+        "description": "用于当曲线为standard-in时进入屏幕的动画",
+        "value": {
+          "light": "250ms",
+          "dark": "250ms"
+        }
+      },
+      {
+        "key": "duration-m2",
+        "name": "持续时间",
+        "description": "用于当曲线为standard时开始、结束的动画",
+        "value": {
+          "light": "300ms",
+          "dark": "300ms"
+        }
+      },
+      {
+        "key": "duration-m3",
+        "name": "持续时间",
+        "description": "用于当曲线为emphasized-in时进入屏幕的动画",
+        "value": {
+          "light": "400ms",
+          "dark": "400ms"
+        }
+      },
+      {
+        "key": "duration-l",
+        "name": "持续时间",
+        "description": "用于当曲线为emphasized时开始、结束的动画",
+        "value": {
+          "light": "500ms",
+          "dark": "500ms"
+        }
+      },
+      {
+        "key": "duration-xl",
+        "name": "持续时间",
+        "description": "用于当曲线为emphasized时，轮播切换动画",
+        "value": {
+          "light": "1000ms",
+          "dark": "1000ms"
+        }
+      }
+    ]
+  },
+
+  "easing": {
+    "name": "动画曲线",
+    "type": "animation",
+    "typeName": "动画",
+    "value": [
+      {
+        "key": "easing-linear",
+        "name": "线性动画曲线",
+        "description": "线性曲线",
+        "value": {
+          "light": "cubic-bezier(0, 0, 1, 1)",
+          "dark": "cubic-bezier(0, 0, 1, 1)"
+        }
+      },
+      {
+        "key": "easing-standard",
+        "name": "动画曲线",
+        "description": "用于组件",
+        "value": {
+          "light": "cubic-bezier(0.2, 0, 0, 1)",
+          "dark": "cubic-bezier(0.2, 0, 0, 1)"
+        }
+      },
+      {
+        "key": "easing-standard-in",
+        "name": "动画曲线",
+        "description": "用于组件",
+        "value": {
+          "light": "cubic-bezier(0, 0, 0, 1)",
+          "dark": "cubic-bezier(0, 0, 0, 1)"
+        }
+      },
+      {
+        "key": "easing-standard-out",
+        "name": "动画曲线",
+        "description": "用于组件",
+        "value": {
+          "light": "cubic-bezier(0.3, 0, 1, 1)",
+          "dark": "cubic-bezier(0.3, 0, 1, 1)"
+        }
+      },
+      {
+        "key": "easing-emphasized",
+        "name": "动画曲线",
+        "description": "用于大卡片、场景切换",
+        "value": {
+          "light": "cubic-bezier(0.2, 0, 0, 1)",
+          "dark": "cubic-bezier(0.2, 0, 0, 1)"
+        }
+      },
+      {
+        "key": "easing-emphasized-in",
+        "name": "动画曲线",
+        "description": "用于大卡片、场景切换",
+        "value": {
+          "light": "cubic-bezier(0.3, 0, 0.8, 0.15)",
+          "dark": "cubic-bezier(0.3, 0, 0.8, 0.15)"
+        }
+      },
+      {
+        "key": "easing-emphasized-out",
+        "name": "动画曲线",
+        "description": "用于大卡片、场景切换",
+        "value": {
+          "light": "cubic-bezier(0.05, 0.7, 0.1, 1)",
+          "dark": "cubic-bezier(0.05, 0.7, 0.1, 1)"
+        }
+      }
+    ]
+  }
+}
diff --git a/packages/opendesign/src/_styles/dark.token.css b/packages/opendesign/src/theme/opendesign/dark.token.css
similarity index 100%
rename from packages/opendesign/src/_styles/dark.token.css
rename to packages/opendesign/src/theme/opendesign/dark.token.css
diff --git a/packages/opendesign/src/theme/opendesign/index.scss b/packages/opendesign/src/theme/opendesign/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..bef847d6f8ddc2c945e95ac2dec05e0a8e01e234
--- /dev/null
+++ b/packages/opendesign/src/theme/opendesign/index.scss
@@ -0,0 +1,6 @@
+// 变量
+@use './dark.token.css' as *;
+@use './light.token.css' as *;
+
+// 样式
+@use '../../index.scss';
diff --git a/packages/opendesign/src/_styles/light.token.css b/packages/opendesign/src/theme/opendesign/light.token.css
similarity index 100%
rename from packages/opendesign/src/_styles/light.token.css
rename to packages/opendesign/src/theme/opendesign/light.token.css
diff --git a/packages/opendesign/src/theme/opendesign/opendesign.token.code-snippets b/packages/opendesign/src/theme/opendesign/opendesign.token.code-snippets
new file mode 100644
index 0000000000000000000000000000000000000000..c40e06de0b434b0b723c3ad7535f201e1435edf8
--- /dev/null
+++ b/packages/opendesign/src/theme/opendesign/opendesign.token.code-snippets
@@ -0,0 +1,2506 @@
+{
+  "--o-white": {
+    "prefix": [
+      "var(--o-white)"
+    ],
+    "body": "var(--o-white)",
+    "description": "[light: 255, 255, 255, dark: 255, 255, 255]",
+    "scope": "css,scss,less"
+  },
+  "--o-black": {
+    "prefix": [
+      "var(--o-black)"
+    ],
+    "body": "var(--o-black)",
+    "description": "[light: 0, 0, 0, dark: 0, 0, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-kleinblue-1": {
+    "prefix": [
+      "var(--o-kleinblue-1)"
+    ],
+    "body": "var(--o-kleinblue-1)",
+    "description": "[light: 227, 234, 246, dark: 11, 21, 55]",
+    "scope": "css,scss,less"
+  },
+  "--o-kleinblue-2": {
+    "prefix": [
+      "var(--o-kleinblue-2)"
+    ],
+    "body": "var(--o-kleinblue-2)",
+    "description": "[light: 190, 206, 237, dark: 16, 30, 77]",
+    "scope": "css,scss,less"
+  },
+  "--o-kleinblue-3": {
+    "prefix": [
+      "var(--o-kleinblue-3)"
+    ],
+    "body": "var(--o-kleinblue-3)",
+    "description": "[light: 132, 161, 220, dark: 27, 48, 113]",
+    "scope": "css,scss,less"
+  },
+  "--o-kleinblue-4": {
+    "prefix": [
+      "var(--o-kleinblue-4)"
+    ],
+    "body": "var(--o-kleinblue-4)",
+    "description": "[light: 81, 119, 202, dark: 40, 68, 149]",
+    "scope": "css,scss,less"
+  },
+  "--o-kleinblue-5": {
+    "prefix": [
+      "var(--o-kleinblue-5)"
+    ],
+    "body": "var(--o-kleinblue-5)",
+    "description": "[light: 37, 81, 185, dark: 55, 91, 184]",
+    "scope": "css,scss,less"
+  },
+  "--o-kleinblue-6": {
+    "prefix": [
+      "var(--o-kleinblue-6)"
+    ],
+    "body": "var(--o-kleinblue-6)",
+    "description": "[light: 0, 47, 167, dark: 72, 116, 220]",
+    "scope": "css,scss,less"
+  },
+  "--o-kleinblue-7": {
+    "prefix": [
+      "var(--o-kleinblue-7)"
+    ],
+    "body": "var(--o-kleinblue-7)",
+    "description": "[light: 0, 39, 147, dark: 105, 143, 227 ]",
+    "scope": "css,scss,less"
+  },
+  "--o-kleinblue-8": {
+    "prefix": [
+      "var(--o-kleinblue-8)"
+    ],
+    "body": "var(--o-kleinblue-8)",
+    "description": "[light: 0, 31, 126, dark: 140, 171, 234]",
+    "scope": "css,scss,less"
+  },
+  "--o-kleinblue-9": {
+    "prefix": [
+      "var(--o-kleinblue-9)"
+    ],
+    "body": "var(--o-kleinblue-9)",
+    "description": "[light: 0, 24, 126, dark: 176, 199, 241]",
+    "scope": "css,scss,less"
+  },
+  "--o-kleinblue-10": {
+    "prefix": [
+      "var(--o-kleinblue-10)"
+    ],
+    "body": "var(--o-kleinblue-10)",
+    "description": "[light: 0, 18, 85, dark: 215, 227, 248]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-1": {
+    "prefix": [
+      "var(--o-yellow-1)"
+    ],
+    "body": "var(--o-yellow-1)",
+    "description": "[light: 254, 252, 233, dark: 81, 46, 9]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-2": {
+    "prefix": [
+      "var(--o-yellow-2)"
+    ],
+    "body": "var(--o-yellow-2)",
+    "description": "[light: 252, 248, 202, dark: 121, 75, 15]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-3": {
+    "prefix": [
+      "var(--o-yellow-3)"
+    ],
+    "body": "var(--o-yellow-3)",
+    "description": "[light: 249, 237, 149, dark: 161, 107, 22]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-4": {
+    "prefix": [
+      "var(--o-yellow-4)"
+    ],
+    "body": "var(--o-yellow-4)",
+    "description": "[light: 246, 224, 98, dark: 202, 143, 30]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-5": {
+    "prefix": [
+      "var(--o-yellow-5)"
+    ],
+    "body": "var(--o-yellow-5)",
+    "description": "[light: 243, 207, 49, dark: 242, 183, 38]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-6": {
+    "prefix": [
+      "var(--o-yellow-6)"
+    ],
+    "body": "var(--o-yellow-6)",
+    "description": "[light: 240, 188, 6, dark: 245, 202, 80]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-7": {
+    "prefix": [
+      "var(--o-yellow-7)"
+    ],
+    "body": "var(--o-yellow-7)",
+    "description": "[light: 200, 147, 0, dark: 247, 219, 122]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-8": {
+    "prefix": [
+      "var(--o-yellow-8)"
+    ],
+    "body": "var(--o-yellow-8)",
+    "description": "[light: 160, 109, 0, dark: 250, 234, 166]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-9": {
+    "prefix": [
+      "var(--o-yellow-9)"
+    ],
+    "body": "var(--o-yellow-9)",
+    "description": "[light: 120, 76, 0, dark: 252, 246, 210]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-10": {
+    "prefix": [
+      "var(--o-yellow-10)"
+    ],
+    "body": "var(--o-yellow-10)",
+    "description": "[light: 80, 47, 0, dark: 254, 251, 237]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-1": {
+    "prefix": [
+      "var(--o-orange-1)"
+    ],
+    "body": "var(--o-orange-1)",
+    "description": "[light: 255, 246, 232, dark: 77, 24, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-2": {
+    "prefix": [
+      "var(--o-orange-2)"
+    ],
+    "body": "var(--o-orange-2)",
+    "description": "[light: 254, 226, 186, dark: 120, 42, 1]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-3": {
+    "prefix": [
+      "var(--o-orange-3)"
+    ],
+    "body": "var(--o-orange-3)",
+    "description": "[light: 253, 202, 140, dark: 163, 68, 8]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-4": {
+    "prefix": [
+      "var(--o-orange-4)"
+    ],
+    "body": "var(--o-orange-4)",
+    "description": "[light: 252, 176, 95, dark: 207, 97, 19]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-5": {
+    "prefix": [
+      "var(--o-orange-5)"
+    ],
+    "body": "var(--o-orange-5)",
+    "description": "[light: 251, 147, 50, dark: 250, 130, 33]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-6": {
+    "prefix": [
+      "var(--o-orange-6)"
+    ],
+    "body": "var(--o-orange-6)",
+    "description": "[light: 250, 115, 5, dark: 251, 143, 43]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-7": {
+    "prefix": [
+      "var(--o-orange-7)"
+    ],
+    "body": "var(--o-orange-7)",
+    "description": "[light: 207, 88, 3, dark: 252, 174, 91]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-8": {
+    "prefix": [
+      "var(--o-orange-8)"
+    ],
+    "body": "var(--o-orange-8)",
+    "description": "[light: 163, 64, 2, dark: 253, 202, 139]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-9": {
+    "prefix": [
+      "var(--o-orange-9)"
+    ],
+    "body": "var(--o-orange-9)",
+    "description": "[light: 120, 42, 1, dark: 254, 227, 188]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-10": {
+    "prefix": [
+      "var(--o-orange-10)"
+    ],
+    "body": "var(--o-orange-10)",
+    "description": "[light: 77, 24, 0, dark: 255, 248, 237]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-1": {
+    "prefix": [
+      "var(--o-red-1)"
+    ],
+    "body": "var(--o-red-1)",
+    "description": "[light: 255, 234, 232, dark: 77, 0, 17]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-2": {
+    "prefix": [
+      "var(--o-red-2)"
+    ],
+    "body": "var(--o-red-2)",
+    "description": "[light: 250, 185, 182, dark: 115, 3, 24]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-3": {
+    "prefix": [
+      "var(--o-red-3)"
+    ],
+    "body": "var(--o-red-3)",
+    "description": "[light: 245, 136, 134, dark: 153, 9, 31]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-4": {
+    "prefix": [
+      "var(--o-red-4)"
+    ],
+    "body": "var(--o-red-4)",
+    "description": "[light: 240, 87, 90, dark: 192, 17, 37]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-5": {
+    "prefix": [
+      "var(--o-red-5)"
+    ],
+    "body": "var(--o-red-5)",
+    "description": "[light: 235, 43, 52, dark: 230, 28, 43]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-6": {
+    "prefix": [
+      "var(--o-red-6)"
+    ],
+    "body": "var(--o-red-6)",
+    "description": "[light: 230, 0, 18, dark: 235, 35, 45]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-7": {
+    "prefix": [
+      "var(--o-red-7)"
+    ],
+    "body": "var(--o-red-7)",
+    "description": "[light: 192, 0, 22, dark: 240, 82, 85]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-8": {
+    "prefix": [
+      "var(--o-red-8)"
+    ],
+    "body": "var(--o-red-8)",
+    "description": "[light: 153, 0, 23, dark: 245, 132, 130]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-9": {
+    "prefix": [
+      "var(--o-red-9)"
+    ],
+    "body": "var(--o-red-9)",
+    "description": "[light: 115, 0, 21, dark: 250, 183, 180]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-10": {
+    "prefix": [
+      "var(--o-red-10)"
+    ],
+    "body": "var(--o-red-10)",
+    "description": "[light: 77, 0, 17, dark: 255, 234, 232]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-1": {
+    "prefix": [
+      "var(--o-green-1)"
+    ],
+    "body": "var(--o-green-1)",
+    "description": "[light: 232, 255, 238, dark: 0, 77, 42]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-2": {
+    "prefix": [
+      "var(--o-green-2)"
+    ],
+    "body": "var(--o-green-2)",
+    "description": "[light: 177, 239, 195, dark: 2, 102, 53]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-3": {
+    "prefix": [
+      "var(--o-green-3)"
+    ],
+    "body": "var(--o-green-3)",
+    "description": "[light: 128, 224, 158, dark: 10, 127, 66]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-4": {
+    "prefix": [
+      "var(--o-green-4)"
+    ],
+    "body": "var(--o-green-4)",
+    "description": "[light: 84, 208, 127, dark: 22, 152, 80]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-5": {
+    "prefix": [
+      "var(--o-green-5)"
+    ],
+    "body": "var(--o-green-5)",
+    "description": "[light: 45, 193, 101, dark: 36, 177, 95]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-6": {
+    "prefix": [
+      "var(--o-green-6)"
+    ],
+    "body": "var(--o-green-6)",
+    "description": "[light: 11, 177, 81, dark: 51, 193, 104]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-7": {
+    "prefix": [
+      "var(--o-green-7)"
+    ],
+    "body": "var(--o-green-7)",
+    "description": "[light: 7, 152, 72, dark: 90, 208, 131]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-8": {
+    "prefix": [
+      "var(--o-green-8)"
+    ],
+    "body": "var(--o-green-8)",
+    "description": "[light: 4, 127, 63, dark: 135, 224, 163]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-9": {
+    "prefix": [
+      "var(--o-green-9)"
+    ],
+    "body": "var(--o-green-9)",
+    "description": "[light: 2, 102, 53, dark: 185, 239, 200]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-10": {
+    "prefix": [
+      "var(--o-green-10)"
+    ],
+    "body": "var(--o-green-10)",
+    "description": "[light: 0, 77, 42, dark: 240, 255, 244]",
+    "scope": "css,scss,less"
+  },
+  "--o-amber-1": {
+    "prefix": [
+      "var(--o-amber-1)"
+    ],
+    "body": "var(--o-amber-1)",
+    "description": "[light: 253, 247, 232, dark: 77, 30, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-amber-2": {
+    "prefix": [
+      "var(--o-amber-2)"
+    ],
+    "body": "var(--o-amber-2)",
+    "description": "[light: 250, 237, 200, dark: 116, 51, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-amber-3": {
+    "prefix": [
+      "var(--o-amber-3)"
+    ],
+    "body": "var(--o-amber-3)",
+    "description": "[light: 245, 215, 147, dark: 154, 76, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-amber-4": {
+    "prefix": [
+      "var(--o-amber-4)"
+    ],
+    "body": "var(--o-amber-4)",
+    "description": "[light: 241, 191, 96, dark: 193, 105, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-amber-5": {
+    "prefix": [
+      "var(--o-amber-5)"
+    ],
+    "body": "var(--o-amber-5)",
+    "description": "[light: 236, 165, 47, dark: 231, 137, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-amber-6": {
+    "prefix": [
+      "var(--o-amber-6)"
+    ],
+    "body": "var(--o-amber-6)",
+    "description": "[light: 231, 137, 0, dark: 236, 165, 47]",
+    "scope": "css,scss,less"
+  },
+  "--o-amber-7": {
+    "prefix": [
+      "var(--o-amber-7)"
+    ],
+    "body": "var(--o-amber-7)",
+    "description": "[light: 193, 105, 0, dark: 241, 191, 96]",
+    "scope": "css,scss,less"
+  },
+  "--o-amber-8": {
+    "prefix": [
+      "var(--o-amber-8)"
+    ],
+    "body": "var(--o-amber-8)",
+    "description": "[light: 154, 76, 0, dark: 245, 215, 147]",
+    "scope": "css,scss,less"
+  },
+  "--o-amber-9": {
+    "prefix": [
+      "var(--o-amber-9)"
+    ],
+    "body": "var(--o-amber-9)",
+    "description": "[light: 116, 51, 0, dark: 250, 237, 200]",
+    "scope": "css,scss,less"
+  },
+  "--o-amber-10": {
+    "prefix": [
+      "var(--o-amber-10)"
+    ],
+    "body": "var(--o-amber-10)",
+    "description": "[light: 77, 30, 0, dark: 253, 247, 232]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-1": {
+    "prefix": [
+      "var(--o-lime-1)"
+    ],
+    "body": "var(--o-lime-1)",
+    "description": "[light: 243, 250, 230, dark: 53, 70, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-2": {
+    "prefix": [
+      "var(--o-lime-2)"
+    ],
+    "body": "var(--o-lime-2)",
+    "description": "[light: 229, 244, 195, dark: 82, 105, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-3": {
+    "prefix": [
+      "var(--o-lime-3)"
+    ],
+    "body": "var(--o-lime-3)",
+    "description": "[light: 208, 233, 140, dark: 112, 141, 1]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-4": {
+    "prefix": [
+      "var(--o-lime-4)"
+    ],
+    "body": "var(--o-lime-4)",
+    "description": "[light: 191, 223, 89, dark: 143, 176, 2]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-5": {
+    "prefix": [
+      "var(--o-lime-5)"
+    ],
+    "body": "var(--o-lime-5)",
+    "description": "[light: 177, 212, 42, dark: 175, 211, 5]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-6": {
+    "prefix": [
+      "var(--o-lime-6)"
+    ],
+    "body": "var(--o-lime-6)",
+    "description": "[light: 167, 201, 0, dark: 184, 220, 48]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-7": {
+    "prefix": [
+      "var(--o-lime-7)"
+    ],
+    "body": "var(--o-lime-7)",
+    "description": "[light: 136, 168, 0, dark: 196, 229, 95]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-8": {
+    "prefix": [
+      "var(--o-lime-8)"
+    ],
+    "body": "var(--o-lime-8)",
+    "description": "[light: 107, 134, 0, dark: 212, 237, 145]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-9": {
+    "prefix": [
+      "var(--o-lime-9)"
+    ],
+    "body": "var(--o-lime-9)",
+    "description": "[light: 78, 101, 0, dark: 231, 246, 198]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-10": {
+    "prefix": [
+      "var(--o-lime-10)"
+    ],
+    "body": "var(--o-lime-10)",
+    "description": "[light: 51, 67, 0, dark: 244, 251, 231]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-green-1": {
+    "prefix": [
+      "var(--o-light-green-1)"
+    ],
+    "body": "var(--o-light-green-1)",
+    "description": "[light: 242, 247, 231, dark: 33, 60, 7]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-green-2": {
+    "prefix": [
+      "var(--o-light-green-2)"
+    ],
+    "body": "var(--o-light-green-2)",
+    "description": "[light: 225, 240, 199, dark: 51, 90, 11]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-green-3": {
+    "prefix": [
+      "var(--o-light-green-3)"
+    ],
+    "body": "var(--o-light-green-3)",
+    "description": "[light: 195, 225, 148, dark: 70, 119, 16]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-green-4": {
+    "prefix": [
+      "var(--o-light-green-4)"
+    ],
+    "body": "var(--o-light-green-4)",
+    "description": "[light: 166, 209, 103, dark: 91, 149, 21]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-green-5": {
+    "prefix": [
+      "var(--o-light-green-5)"
+    ],
+    "body": "var(--o-light-green-5)",
+    "description": "[light: 138, 194, 62, dark: 112, 179, 27]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-green-6": {
+    "prefix": [
+      "var(--o-light-green-6)"
+    ],
+    "body": "var(--o-light-green-6)",
+    "description": "[light: 112, 179, 27, dark: 184, 220, 48]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-green-7": {
+    "prefix": [
+      "var(--o-light-green-7)"
+    ],
+    "body": "var(--o-light-green-7)",
+    "description": "[light: 91, 149, 21, dark: 166, 209, 103]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-green-8": {
+    "prefix": [
+      "var(--o-light-green-8)"
+    ],
+    "body": "var(--o-light-green-8)",
+    "description": "[light: 70, 119, 16, dark: 195, 225, 148]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-green-9": {
+    "prefix": [
+      "var(--o-light-green-9)"
+    ],
+    "body": "var(--o-light-green-9)",
+    "description": "[light: 51, 90, 11, dark: 225, 240, 199]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-green-10": {
+    "prefix": [
+      "var(--o-light-green-10)"
+    ],
+    "body": "var(--o-light-green-10)",
+    "description": "[light: 33, 60, 7, dark: 242, 247, 231]",
+    "scope": "css,scss,less"
+  },
+  "--o-teal-1": {
+    "prefix": [
+      "var(--o-teal-1)"
+    ],
+    "body": "var(--o-teal-1)",
+    "description": "[light: 228, 247, 241, dark: 0, 60, 48]",
+    "scope": "css,scss,less"
+  },
+  "--o-teal-2": {
+    "prefix": [
+      "var(--o-teal-2)"
+    ],
+    "body": "var(--o-teal-2)",
+    "description": "[light: 192, 240, 224, dark: 0, 90, 71]",
+    "scope": "css,scss,less"
+  },
+  "--o-teal-3": {
+    "prefix": [
+      "var(--o-teal-3)"
+    ],
+    "body": "var(--o-teal-3)",
+    "description": "[light: 135, 225, 197, dark: 0, 119, 93]",
+    "scope": "css,scss,less"
+  },
+  "--o-teal-4": {
+    "prefix": [
+      "var(--o-teal-4)"
+    ],
+    "body": "var(--o-teal-4)",
+    "description": "[light: 84, 209, 173, dark: 0, 149, 113]",
+    "scope": "css,scss,less"
+  },
+  "--o-teal-5": {
+    "prefix": [
+      "var(--o-teal-5)"
+    ],
+    "body": "var(--o-teal-5)",
+    "description": "[light: 39, 194, 152, dark: 0, 179, 133]",
+    "scope": "css,scss,less"
+  },
+  "--o-teal-6": {
+    "prefix": [
+      "var(--o-teal-6)"
+    ],
+    "body": "var(--o-teal-6)",
+    "description": "[light: 0, 179, 133, dark: 39, 194, 152]",
+    "scope": "css,scss,less"
+  },
+  "--o-teal-7": {
+    "prefix": [
+      "var(--o-teal-7)"
+    ],
+    "body": "var(--o-teal-7)",
+    "description": "[light: 0, 149, 113, dark: 84, 209, 173]",
+    "scope": "css,scss,less"
+  },
+  "--o-teal-8": {
+    "prefix": [
+      "var(--o-teal-8)"
+    ],
+    "body": "var(--o-teal-8)",
+    "description": "[light: 0, 119, 93, dark: 135, 225, 197]",
+    "scope": "css,scss,less"
+  },
+  "--o-teal-9": {
+    "prefix": [
+      "var(--o-teal-9)"
+    ],
+    "body": "var(--o-teal-9)",
+    "description": "[light: 0, 90, 71, dark: 192, 240, 224]",
+    "scope": "css,scss,less"
+  },
+  "--o-teal-10": {
+    "prefix": [
+      "var(--o-teal-10)"
+    ],
+    "body": "var(--o-teal-10)",
+    "description": "[light: 0, 60, 48, dark: 228, 247, 241]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-1": {
+    "prefix": [
+      "var(--o-cyan-1)"
+    ],
+    "body": "var(--o-cyan-1)",
+    "description": "[light: 228, 247, 247, dark: 0, 52, 60]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-2": {
+    "prefix": [
+      "var(--o-cyan-2)"
+    ],
+    "body": "var(--o-cyan-2)",
+    "description": "[light: 192, 240, 240, dark: 0, 79, 90]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-3": {
+    "prefix": [
+      "var(--o-cyan-3)"
+    ],
+    "body": "var(--o-cyan-3)",
+    "description": "[light: 135, 223, 225, dark: 0, 107, 119]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-4": {
+    "prefix": [
+      "var(--o-cyan-4)"
+    ],
+    "body": "var(--o-cyan-4)",
+    "description": "[light: 84, 205, 209, dark: 0, 137, 149]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-5": {
+    "prefix": [
+      "var(--o-cyan-5)"
+    ],
+    "body": "var(--o-cyan-5)",
+    "description": "[light: 39, 186, 194, dark: 39, 186, 194]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-6": {
+    "prefix": [
+      "var(--o-cyan-6)"
+    ],
+    "body": "var(--o-cyan-6)",
+    "description": "[light: 0, 167, 179, dark: 84, 205, 209]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-7": {
+    "prefix": [
+      "var(--o-cyan-7)"
+    ],
+    "body": "var(--o-cyan-7)",
+    "description": "[light: 0, 137, 149, dark: 92, 208, 212]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-8": {
+    "prefix": [
+      "var(--o-cyan-8)"
+    ],
+    "body": "var(--o-cyan-8)",
+    "description": "[light: 0, 107, 119, dark: 135, 223, 225]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-9": {
+    "prefix": [
+      "var(--o-cyan-9)"
+    ],
+    "body": "var(--o-cyan-9)",
+    "description": "[light: 0, 79, 90, dark: 192, 240, 240]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-10": {
+    "prefix": [
+      "var(--o-cyan-10)"
+    ],
+    "body": "var(--o-cyan-10)",
+    "description": "[light: 0, 52, 60, dark: 228, 247, 247]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-blue-1": {
+    "prefix": [
+      "var(--o-light-blue-1)"
+    ],
+    "body": "var(--o-light-blue-1)",
+    "description": "[light: 232, 247, 252, dark: 0, 47, 76]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-blue-2": {
+    "prefix": [
+      "var(--o-light-blue-2)"
+    ],
+    "body": "var(--o-light-blue-2)",
+    "description": "[light: 200, 237, 250, dark: 0, 72, 115]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-blue-3": {
+    "prefix": [
+      "var(--o-light-blue-3)"
+    ],
+    "body": "var(--o-light-blue-3)",
+    "description": "[light: 147, 218, 245, dark: 0, 99, 153]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-blue-4": {
+    "prefix": [
+      "var(--o-light-blue-4)"
+    ],
+    "body": "var(--o-light-blue-4)",
+    "description": "[light: 96, 198, 239, dark: 0, 127, 191]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-blue-5": {
+    "prefix": [
+      "var(--o-light-blue-5)"
+    ],
+    "body": "var(--o-light-blue-5)",
+    "description": "[light: 47, 178, 234, dark: 0, 156, 229]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-blue-6": {
+    "prefix": [
+      "var(--o-light-blue-6)"
+    ],
+    "body": "var(--o-light-blue-6)",
+    "description": "[light: 0, 156, 229, dark: 47, 178, 234]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-blue-7": {
+    "prefix": [
+      "var(--o-light-blue-7)"
+    ],
+    "body": "var(--o-light-blue-7)",
+    "description": "[light: 0, 127, 191, dark: 96, 198, 239]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-blue-8": {
+    "prefix": [
+      "var(--o-light-blue-8)"
+    ],
+    "body": "var(--o-light-blue-8)",
+    "description": "[light: 0, 99, 153, dark: 147, 218, 245]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-blue-9": {
+    "prefix": [
+      "var(--o-light-blue-9)"
+    ],
+    "body": "var(--o-light-blue-9)",
+    "description": "[light: 0, 72, 115, dark: 200, 237, 250]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-blue-10": {
+    "prefix": [
+      "var(--o-light-blue-10)"
+    ],
+    "body": "var(--o-light-blue-10)",
+    "description": "[light: 0, 47, 76, dark: 232, 247, 252]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-1": {
+    "prefix": [
+      "var(--o-blue-1)"
+    ],
+    "body": "var(--o-blue-1)",
+    "description": "[light: 233, 245, 254, dark: 0, 43, 97]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-2": {
+    "prefix": [
+      "var(--o-blue-2)"
+    ],
+    "body": "var(--o-blue-2)",
+    "description": "[light: 202, 231, 252, dark: 0, 61, 133]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-3": {
+    "prefix": [
+      "var(--o-blue-3)"
+    ],
+    "body": "var(--o-blue-3)",
+    "description": "[light: 149, 205, 249, dark: 0, 80, 169]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-4": {
+    "prefix": [
+      "var(--o-blue-4)"
+    ],
+    "body": "var(--o-blue-4)",
+    "description": "[light: 98, 178, 246, dark: 0, 100, 204]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-5": {
+    "prefix": [
+      "var(--o-blue-5)"
+    ],
+    "body": "var(--o-blue-5)",
+    "description": "[light: 49, 151, 243, dark: 0, 122, 240]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-6": {
+    "prefix": [
+      "var(--o-blue-6)"
+    ],
+    "body": "var(--o-blue-6)",
+    "description": "[light: 0, 122, 240, dark: 49, 151, 243]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-7": {
+    "prefix": [
+      "var(--o-blue-7)"
+    ],
+    "body": "var(--o-blue-7)",
+    "description": "[light: 0, 100, 204, dark: 98, 178, 246]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-8": {
+    "prefix": [
+      "var(--o-blue-8)"
+    ],
+    "body": "var(--o-blue-8)",
+    "description": "[light: 0, 80, 169, dark: 149, 205, 249]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-9": {
+    "prefix": [
+      "var(--o-blue-9)"
+    ],
+    "body": "var(--o-blue-9)",
+    "description": "[light: 0, 61, 133, dark: 202, 231, 252]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-10": {
+    "prefix": [
+      "var(--o-blue-10)"
+    ],
+    "body": "var(--o-blue-10)",
+    "description": "[light: 0, 43, 97, dark: 233, 245, 254]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-1": {
+    "prefix": [
+      "var(--o-mixedgray-1)"
+    ],
+    "body": "var(--o-mixedgray-1)",
+    "description": "[light: 255, 255, 255, dark: 0, 0, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-2": {
+    "prefix": [
+      "var(--o-mixedgray-2)"
+    ],
+    "body": "var(--o-mixedgray-2)",
+    "description": "[light: 240, 243, 245, dark: 18, 18, 20]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-3": {
+    "prefix": [
+      "var(--o-mixedgray-3)"
+    ],
+    "body": "var(--o-mixedgray-3)",
+    "description": "[light: 237, 237, 240, dark: 28, 26, 28]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-4": {
+    "prefix": [
+      "var(--o-mixedgray-4)"
+    ],
+    "body": "var(--o-mixedgray-4)",
+    "description": "[light: 232, 232, 235, dark: 36, 36, 39]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-5": {
+    "prefix": [
+      "var(--o-mixedgray-5)"
+    ],
+    "body": "var(--o-mixedgray-5)",
+    "description": "[light: 222, 222, 227, dark: 43, 43, 47]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-6": {
+    "prefix": [
+      "var(--o-mixedgray-6)"
+    ],
+    "body": "var(--o-mixedgray-6)",
+    "description": "[light: 212, 212, 217, dark: 53, 53, 57]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-7": {
+    "prefix": [
+      "var(--o-mixedgray-7)"
+    ],
+    "body": "var(--o-mixedgray-7)",
+    "description": "[light: 186, 186, 191, dark: 63, 63, 67]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-8": {
+    "prefix": [
+      "var(--o-mixedgray-8)"
+    ],
+    "body": "var(--o-mixedgray-8)",
+    "description": "[light: 149, 149, 157, dark: 85, 85, 88]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-9": {
+    "prefix": [
+      "var(--o-mixedgray-9)"
+    ],
+    "body": "var(--o-mixedgray-9)",
+    "description": "[light: 111, 111, 117, dark: 118, 118, 122]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-10": {
+    "prefix": [
+      "var(--o-mixedgray-10)"
+    ],
+    "body": "var(--o-mixedgray-10)",
+    "description": "[light: 85 , 85, 92, dark: 156, 156, 159]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-11": {
+    "prefix": [
+      "var(--o-mixedgray-11)"
+    ],
+    "body": "var(--o-mixedgray-11)",
+    "description": "[light: 61, 61, 66, dark: 181, 181, 185]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-12": {
+    "prefix": [
+      "var(--o-mixedgray-12)"
+    ],
+    "body": "var(--o-mixedgray-12)",
+    "description": "[light: 37, 37, 41, dark: 208, 208, 210]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-13": {
+    "prefix": [
+      "var(--o-mixedgray-13)"
+    ],
+    "body": "var(--o-mixedgray-13)",
+    "description": "[light: 21, 21, 23, dark: 235, 235, 238]",
+    "scope": "css,scss,less"
+  },
+  "--o-mixedgray-14": {
+    "prefix": [
+      "var(--o-mixedgray-14)"
+    ],
+    "body": "var(--o-mixedgray-14)",
+    "description": "[light: 0, 0, 0, dark: 255,255, 255]",
+    "scope": "css,scss,less"
+  },
+  "--o-indigo-1": {
+    "prefix": [
+      "var(--o-indigo-1)"
+    ],
+    "body": "var(--o-indigo-1)",
+    "description": "[light: 232, 236, 247, dark: 5, 19, 101]",
+    "scope": "css,scss,less"
+  },
+  "--o-indigo-2": {
+    "prefix": [
+      "var(--o-indigo-2)"
+    ],
+    "body": "var(--o-indigo-2)",
+    "description": "[light: 200, 211, 240, dark: 10, 28, 118]",
+    "scope": "css,scss,less"
+  },
+  "--o-indigo-3": {
+    "prefix": [
+      "var(--o-indigo-3)"
+    ],
+    "body": "var(--o-indigo-3)",
+    "description": "[light: 150, 170, 225, dark: 16, 38, 138]",
+    "scope": "css,scss,less"
+  },
+  "--o-indigo-4": {
+    "prefix": [
+      "var(--o-indigo-4)"
+    ],
+    "body": "var(--o-indigo-4)",
+    "description": "[light: 106, 131, 209, dark: 23, 50, 159]",
+    "scope": "css,scss,less"
+  },
+  "--o-indigo-5": {
+    "prefix": [
+      "var(--o-indigo-5)"
+    ],
+    "body": "var(--o-indigo-5)",
+    "description": "[light: 66, 96, 194, dark: 31, 63, 179]",
+    "scope": "css,scss,less"
+  },
+  "--o-indigo-6": {
+    "prefix": [
+      "var(--o-indigo-6)"
+    ],
+    "body": "var(--o-indigo-6)",
+    "description": "[light: 31, 63, 179, dark: 66, 96, 194]",
+    "scope": "css,scss,less"
+  },
+  "--o-indigo-7": {
+    "prefix": [
+      "var(--o-indigo-7)"
+    ],
+    "body": "var(--o-indigo-7)",
+    "description": "[light: 23, 50, 159, dark: 106, 131, 209]",
+    "scope": "css,scss,less"
+  },
+  "--o-indigo-8": {
+    "prefix": [
+      "var(--o-indigo-8)"
+    ],
+    "body": "var(--o-indigo-8)",
+    "description": "[light: 16, 38, 138, dark: 150, 170, 225]",
+    "scope": "css,scss,less"
+  },
+  "--o-indigo-9": {
+    "prefix": [
+      "var(--o-indigo-9)"
+    ],
+    "body": "var(--o-indigo-9)",
+    "description": "[light: 10, 28, 118, dark: 209, 218, 241]",
+    "scope": "css,scss,less"
+  },
+  "--o-indigo-10": {
+    "prefix": [
+      "var(--o-indigo-10)"
+    ],
+    "body": "var(--o-indigo-10)",
+    "description": "[light: 5, 19, 101, dark: 232, 236, 247]",
+    "scope": "css,scss,less"
+  },
+  "--o-violet-1": {
+    "prefix": [
+      "var(--o-violet-1)"
+    ],
+    "body": "var(--o-violet-1)",
+    "description": "[light: 234, 231, 249, dark: 34, 0, 109]",
+    "scope": "css,scss,less"
+  },
+  "--o-violet-2": {
+    "prefix": [
+      "var(--o-violet-2)"
+    ],
+    "body": "var(--o-violet-2)",
+    "description": "[light: 206, 199, 242, dark: 39, 2, 130]",
+    "scope": "css,scss,less"
+  },
+  "--o-violet-3": {
+    "prefix": [
+      "var(--o-violet-3)"
+    ],
+    "body": "var(--o-violet-3)",
+    "description": "[light: 163, 147, 229, dark: 46, 7, 150]",
+    "scope": "css,scss,less"
+  },
+  "--o-violet-4": {
+    "prefix": [
+      "var(--o-violet-4)"
+    ],
+    "body": "var(--o-violet-4)",
+    "description": "[light: 124, 100, 217, dark: 53, 13, 171]",
+    "scope": "css,scss,less"
+  },
+  "--o-violet-5": {
+    "prefix": [
+      "var(--o-violet-5)"
+    ],
+    "body": "var(--o-violet-5)",
+    "description": "[light: 90, 58, 204, dark: 61, 20, 191]",
+    "scope": "css,scss,less"
+  },
+  "--o-violet-6": {
+    "prefix": [
+      "var(--o-violet-6)"
+    ],
+    "body": "var(--o-violet-6)",
+    "description": "[light: 61, 20, 191, dark: 97, 62, 201]",
+    "scope": "css,scss,less"
+  },
+  "--o-violet-7": {
+    "prefix": [
+      "var(--o-violet-7)"
+    ],
+    "body": "var(--o-violet-7)",
+    "description": "[light: 53, 13, 171, dark: 150, 130, 223]",
+    "scope": "css,scss,less"
+  },
+  "--o-violet-8": {
+    "prefix": [
+      "var(--o-violet-8)"
+    ],
+    "body": "var(--o-violet-8)",
+    "description": "[light: 46, 7, 150, dark: 182, 169, 233]",
+    "scope": "css,scss,less"
+  },
+  "--o-violet-9": {
+    "prefix": [
+      "var(--o-violet-9)"
+    ],
+    "body": "var(--o-violet-9)",
+    "description": "[light: 39, 2, 130, dark: 217, 210, 244]",
+    "scope": "css,scss,less"
+  },
+  "--o-violet-10": {
+    "prefix": [
+      "var(--o-violet-10)"
+    ],
+    "body": "var(--o-violet-10)",
+    "description": "[light: 34, 0, 109, dark: 240, 237, 250]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-1": {
+    "prefix": [
+      "var(--o-purple-1)"
+    ],
+    "body": "var(--o-purple-1)",
+    "description": "[light: 245, 228, 247, dark: 60, 0, 97]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-2": {
+    "prefix": [
+      "var(--o-purple-2)"
+    ],
+    "body": "var(--o-purple-2)",
+    "description": "[light: 234, 192, 240, dark: 77, 0, 118]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-3": {
+    "prefix": [
+      "var(--o-purple-3)"
+    ],
+    "body": "var(--o-purple-3)",
+    "description": "[light: 211, 136, 225, dark: 95, 0, 138]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-4": {
+    "prefix": [
+      "var(--o-purple-4)"
+    ],
+    "body": "var(--o-purple-4)",
+    "description": "[light: 187, 85, 209, dark: 114, 0, 159]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-5": {
+    "prefix": [
+      "var(--o-purple-5)"
+    ],
+    "body": "var(--o-purple-5)",
+    "description": "[light: 161, 41, 194, dark: 135, 2, 179]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-6": {
+    "prefix": [
+      "var(--o-purple-6)"
+    ],
+    "body": "var(--o-purple-6)",
+    "description": "[light: 135, 2, 179, dark: 161, 41, 194]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-7": {
+    "prefix": [
+      "var(--o-purple-7)"
+    ],
+    "body": "var(--o-purple-7)",
+    "description": "[light: 114, 0, 159, dark: 187, 85, 209]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-8": {
+    "prefix": [
+      "var(--o-purple-8)"
+    ],
+    "body": "var(--o-purple-8)",
+    "description": "[light: 95, 0, 138, dark: 211, 136, 225]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-9": {
+    "prefix": [
+      "var(--o-purple-9)"
+    ],
+    "body": "var(--o-purple-9)",
+    "description": "[light: 77, 0, 118, dark: 234, 192, 240]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-10": {
+    "prefix": [
+      "var(--o-purple-10)"
+    ],
+    "body": "var(--o-purple-10)",
+    "description": "[light: 60, 0, 97, dark: 245, 228, 247]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-1": {
+    "prefix": [
+      "var(--o-pink-1)"
+    ],
+    "body": "var(--o-pink-1)",
+    "description": "[light: 252, 232, 239, dark: 81, 0, 51]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-2": {
+    "prefix": [
+      "var(--o-pink-2)"
+    ],
+    "body": "var(--o-pink-2)",
+    "description": "[light: 249, 199, 217, dark: 117, 0, 70]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-3": {
+    "prefix": [
+      "var(--o-pink-3)"
+    ],
+    "body": "var(--o-pink-3)",
+    "description": "[light: 243, 146, 184, dark: 153, 0, 86]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-4": {
+    "prefix": [
+      "var(--o-pink-4)"
+    ],
+    "body": "var(--o-pink-4)",
+    "description": "[light: 236, 95, 156, dark: 188, 0, 100]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-5": {
+    "prefix": [
+      "var(--o-pink-5)"
+    ],
+    "body": "var(--o-pink-5)",
+    "description": "[light: 230, 46, 132, dark: 224, 0, 112]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-6": {
+    "prefix": [
+      "var(--o-pink-6)"
+    ],
+    "body": "var(--o-pink-6)",
+    "description": "[light: 224, 0, 112, dark: 230, 46, 132]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-7": {
+    "prefix": [
+      "var(--o-pink-7)"
+    ],
+    "body": "var(--o-pink-7)",
+    "description": "[light: 188, 0, 100, dark: 236, 95, 156]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-8": {
+    "prefix": [
+      "var(--o-pink-8)"
+    ],
+    "body": "var(--o-pink-8)",
+    "description": "[light: 153, 0, 86, dark: 243, 146, 184]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-9": {
+    "prefix": [
+      "var(--o-pink-9)"
+    ],
+    "body": "var(--o-pink-9)",
+    "description": "[light: 117, 0, 70, dark: 249, 199, 217]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-10": {
+    "prefix": [
+      "var(--o-pink-10)"
+    ],
+    "body": "var(--o-pink-10)",
+    "description": "[light: 81, 0, 51, dark: 252, 232, 239]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-white": {
+    "prefix": [
+      "var(--o-color-white)"
+    ],
+    "body": "var(--o-color-white)",
+    "description": "[light: rgb(var(--o-white)), dark: rgb(var(--o-white))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-black": {
+    "prefix": [
+      "var(--o-color-black)"
+    ],
+    "body": "var(--o-color-black)",
+    "description": "[light: rgb(var(--o-black)), dark: rgb(var(--o-black))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary1": {
+    "prefix": [
+      "var(--o-color-primary1)"
+    ],
+    "body": "var(--o-color-primary1)",
+    "description": "常规[light: rgb(var(--o-kleinblue-6)), dark: rgb(var(--o-kleinblue-5))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary2": {
+    "prefix": [
+      "var(--o-color-primary2)"
+    ],
+    "body": "var(--o-color-primary2)",
+    "description": "悬浮[light: rgb(var(--o-kleinblue-4)), dark: rgb(var(--o-kleinblue-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary3": {
+    "prefix": [
+      "var(--o-color-primary3)"
+    ],
+    "body": "var(--o-color-primary3)",
+    "description": "激活[light: rgb(var(--o-kleinblue-7)), dark: rgb(var(--o-kleinblue-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary4": {
+    "prefix": [
+      "var(--o-color-primary4)"
+    ],
+    "body": "var(--o-color-primary4)",
+    "description": "禁用[light: rgb(var(--o-kleinblue-3)), dark: rgb(var(--o-kleinblue-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary1-light": {
+    "prefix": [
+      "var(--o-color-primary1-light)"
+    ],
+    "body": "var(--o-color-primary1-light)",
+    "description": "常规-浅[light: rgb(var(--o-kleinblue-2)), dark: rgb(var(--o-kleinblue-2))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary2-light": {
+    "prefix": [
+      "var(--o-color-primary2-light)"
+    ],
+    "body": "var(--o-color-primary2-light)",
+    "description": "悬浮-浅[light: rgb(var(--o-kleinblue-3)), dark: rgb(var(--o-kleinblue-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary3-light": {
+    "prefix": [
+      "var(--o-color-primary3-light)"
+    ],
+    "body": "var(--o-color-primary3-light)",
+    "description": "激活-浅[light: rgb(var(--o-kleinblue-4)), dark: rgb(var(--o-kleinblue-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary4-light": {
+    "prefix": [
+      "var(--o-color-primary4-light)"
+    ],
+    "body": "var(--o-color-primary4-light)",
+    "description": "禁用-浅[light: rgb(var(--o-kleinblue-1)), dark: rgb(var(--o-kleinblue-1))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success1": {
+    "prefix": [
+      "var(--o-color-success1)"
+    ],
+    "body": "var(--o-color-success1)",
+    "description": "常规[light: rgb(var(--o-green-6)), dark: rgb(var(--o-green-6))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success2": {
+    "prefix": [
+      "var(--o-color-success2)"
+    ],
+    "body": "var(--o-color-success2)",
+    "description": "悬浮[light: rgb(var(--o-green-4)), dark: rgb(var(--o-green-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success3": {
+    "prefix": [
+      "var(--o-color-success3)"
+    ],
+    "body": "var(--o-color-success3)",
+    "description": "激活[light: rgb(var(--o-green-7)), dark: rgb(var(--o-green-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success4": {
+    "prefix": [
+      "var(--o-color-success4)"
+    ],
+    "body": "var(--o-color-success4)",
+    "description": "禁用[light: rgb(var(--o-green-3)), dark: rgb(var(--o-green-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success1-light": {
+    "prefix": [
+      "var(--o-color-success1-light)"
+    ],
+    "body": "var(--o-color-success1-light)",
+    "description": "常规-浅[light: rgb(var(--o-green-2)), dark: rgb(var(--o-green-2))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success2-light": {
+    "prefix": [
+      "var(--o-color-success2-light)"
+    ],
+    "body": "var(--o-color-success2-light)",
+    "description": "悬浮-浅[light: rgb(var(--o-green-3)), dark: rgb(var(--o-green-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success3-light": {
+    "prefix": [
+      "var(--o-color-success3-light)"
+    ],
+    "body": "var(--o-color-success3-light)",
+    "description": "激活-浅[light: rgb(var(--o-green-4)), dark: rgb(var(--o-green-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success4-light": {
+    "prefix": [
+      "var(--o-color-success4-light)"
+    ],
+    "body": "var(--o-color-success4-light)",
+    "description": "禁用-浅[light: rgb(var(--o-green-1)), dark: rgb(var(--o-green-1))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning1": {
+    "prefix": [
+      "var(--o-color-warning1)"
+    ],
+    "body": "var(--o-color-warning1)",
+    "description": "常规[light: rgb(var(--o-orange-6)), dark: rgb(var(--o-orange-6))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning2": {
+    "prefix": [
+      "var(--o-color-warning2)"
+    ],
+    "body": "var(--o-color-warning2)",
+    "description": "悬浮[light: rgb(var(--o-orange-4)), dark: rgb(var(--o-orange-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning3": {
+    "prefix": [
+      "var(--o-color-warning3)"
+    ],
+    "body": "var(--o-color-warning3)",
+    "description": "激活[light: rgb(var(--o-orange-7)), dark: rgb(var(--o-orange-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning4": {
+    "prefix": [
+      "var(--o-color-warning4)"
+    ],
+    "body": "var(--o-color-warning4)",
+    "description": "禁用[light: rgb(var(--o-orange-3)), dark: rgb(var(--o-orange-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning1-light": {
+    "prefix": [
+      "var(--o-color-warning1-light)"
+    ],
+    "body": "var(--o-color-warning1-light)",
+    "description": "常规-浅[light: rgb(var(--o-orange-2)), dark: rgb(var(--o-orange-2))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning2-light": {
+    "prefix": [
+      "var(--o-color-warning2-light)"
+    ],
+    "body": "var(--o-color-warning2-light)",
+    "description": "悬浮-浅[light: rgb(var(--o-orange-3)), dark: rgb(var(--o-orange-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning3-light": {
+    "prefix": [
+      "var(--o-color-warning3-light)"
+    ],
+    "body": "var(--o-color-warning3-light)",
+    "description": "激活-浅[light: rgb(var(--o-orange-4)), dark: rgb(var(--o-orange-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning4-light": {
+    "prefix": [
+      "var(--o-color-warning4-light)"
+    ],
+    "body": "var(--o-color-warning4-light)",
+    "description": "禁用-浅[light: rgb(var(--o-orange-1)), dark: rgb(var(--o-orange-1))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger1": {
+    "prefix": [
+      "var(--o-color-danger1)"
+    ],
+    "body": "var(--o-color-danger1)",
+    "description": "常规[light: rgb(var(--o-red-6)), dark: rgb(var(--o-red-6))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger2": {
+    "prefix": [
+      "var(--o-color-danger2)"
+    ],
+    "body": "var(--o-color-danger2)",
+    "description": "悬浮[light: rgb(var(--o-red-4)), dark: rgb(var(--o-red-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger3": {
+    "prefix": [
+      "var(--o-color-danger3)"
+    ],
+    "body": "var(--o-color-danger3)",
+    "description": "激活[light: rgb(var(--o-red-7)), dark: rgb(var(--o-red-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger4": {
+    "prefix": [
+      "var(--o-color-danger4)"
+    ],
+    "body": "var(--o-color-danger4)",
+    "description": "禁用[light: rgb(var(--o-red-3)), dark: rgb(var(--o-red-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger1-light": {
+    "prefix": [
+      "var(--o-color-danger1-light)"
+    ],
+    "body": "var(--o-color-danger1-light)",
+    "description": "常规-浅[light: rgb(var(--o-red-2)), dark: rgb(var(--o-red-2))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger2-light": {
+    "prefix": [
+      "var(--o-color-danger2-light)"
+    ],
+    "body": "var(--o-color-danger2-light)",
+    "description": "悬浮-浅[light: rgb(var(--o-red-3)), dark: rgb(var(--o-red-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger3-light": {
+    "prefix": [
+      "var(--o-color-danger3-light)"
+    ],
+    "body": "var(--o-color-danger3-light)",
+    "description": "激活-浅[light: rgb(var(--o-red-4)), dark: rgb(var(--o-red-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger4-light": {
+    "prefix": [
+      "var(--o-color-danger4-light)"
+    ],
+    "body": "var(--o-color-danger4-light)",
+    "description": "禁用-浅[light: rgb(var(--o-red-1)), dark: rgb(var(--o-red-1))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-fill1": {
+    "prefix": [
+      "var(--o-color-fill1)"
+    ],
+    "body": "var(--o-color-fill1)",
+    "description": "一级填充：页面背景[light: rgb(var(--o-mixedgray-2)), dark: rgb(var(--o-mixedgray-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-fill2": {
+    "prefix": [
+      "var(--o-color-fill2)"
+    ],
+    "body": "var(--o-color-fill2)",
+    "description": "二级填充：区块/卡片[light: rgb(var(--o-mixedgray-1)), dark: rgb(var(--o-mixedgray-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-fill3": {
+    "prefix": [
+      "var(--o-color-fill3)"
+    ],
+    "body": "var(--o-color-fill3)",
+    "description": "三级填充：卡片[light: rgb(var(--o-mixedgray-3)), dark: rgb(var(--o-mixedgray-5))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control1": {
+    "prefix": [
+      "var(--o-color-control1)"
+    ],
+    "body": "var(--o-color-control1)",
+    "description": "常规，常用于边框[light: rgba(var(--o-mixedgray-10), 0.25), dark: rgba(var(--o-mixedgray-10), 0.25)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control2": {
+    "prefix": [
+      "var(--o-color-control2)"
+    ],
+    "body": "var(--o-color-control2)",
+    "description": "悬浮，常用于边框[light: rgba(var(--o-mixedgray-10), 0.6), dark: rgba(var(--o-mixedgray-10), 0.6)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control3": {
+    "prefix": [
+      "var(--o-color-control3)"
+    ],
+    "body": "var(--o-color-control3)",
+    "description": "激活，常用于边框[light: rgba(var(--o-mixedgray-10), 0.8), dark: rgba(var(--o-mixedgray-10), 0.8)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control4": {
+    "prefix": [
+      "var(--o-color-control4)"
+    ],
+    "body": "var(--o-color-control4)",
+    "description": "禁用，常用于边框[light: rgba(var(--o-mixedgray-10), 0.1), dark: rgba(var(--o-mixedgray-10), 0.15)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control1-light": {
+    "prefix": [
+      "var(--o-color-control1-light)"
+    ],
+    "body": "var(--o-color-control1-light)",
+    "description": "常规-浅，常用于背景[light: rgb(var(--o-mixedgray-5), 1.0), dark: rgb(var(--o-mixedgray-7), 1.0)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control2-light": {
+    "prefix": [
+      "var(--o-color-control2-light)"
+    ],
+    "body": "var(--o-color-control2-light)",
+    "description": "悬浮-浅，常用于背景[light: rgb(var(--o-mixedgray-3), 1), dark: rgb(var(--o-mixedgray-5), 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control3-light": {
+    "prefix": [
+      "var(--o-color-control3-light)"
+    ],
+    "body": "var(--o-color-control3-light)",
+    "description": "激活-浅，常用于背景[light: rgb(var(--o-mixedgray-4), 1), dark: rgb(var(--o-mixedgray-6), 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control4-light": {
+    "prefix": [
+      "var(--o-color-control4-light)"
+    ],
+    "body": "var(--o-color-control4-light)",
+    "description": "禁用-浅，常用于背景[light: rgb(var(--o-mixedgray-3), 1), dark: rgb(var(--o-mixedgray-5), 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control-light": {
+    "prefix": [
+      "var(--o-color-control-light)"
+    ],
+    "body": "var(--o-color-control-light)",
+    "description": "很浅，常用于表格背景色[light: rgb(var(--o-mixedgray-1), 1.0), dark: rgb(var(--o-mixedgray-4), 1.0)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info1": {
+    "prefix": [
+      "var(--o-color-info1)"
+    ],
+    "body": "var(--o-color-info1)",
+    "description": "一级/强调/标题[light: rgba(var(--o-mixedgray-14), 1.0), dark: rgba(var(--o-mixedgray-14), 1.0)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info2": {
+    "prefix": [
+      "var(--o-color-info2)"
+    ],
+    "body": "var(--o-color-info2)",
+    "description": "二级/次强调/正文[light: rgba(var(--o-mixedgray-14), 0.8), dark: rgba(var(--o-mixedgray-14), 0.8)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info3": {
+    "prefix": [
+      "var(--o-color-info3)"
+    ],
+    "body": "var(--o-color-info3)",
+    "description": "三级/辅助信息[light: rgba(var(--o-mixedgray-14), 0.6), dark: rgba(var(--o-mixedgray-14), 0.6)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info4": {
+    "prefix": [
+      "var(--o-color-info4)"
+    ],
+    "body": "var(--o-color-info4)",
+    "description": "置灰/禁用[light: rgba(var(--o-mixedgray-14), 0.4), dark: rgba(var(--o-mixedgray-14), 0.4)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info1-inverse": {
+    "prefix": [
+      "var(--o-color-info1-inverse)"
+    ],
+    "body": "var(--o-color-info1-inverse)",
+    "description": "一级/次强调/正文反色[light: rgba(var(--o-mixedgray-1), 1.0), dark: rgba(var(--o-mixedgray-1), 1.0)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info2-inverse": {
+    "prefix": [
+      "var(--o-color-info2-inverse)"
+    ],
+    "body": "var(--o-color-info2-inverse)",
+    "description": "二级/辅助信息反色[light: rgba(var(--o-mixedgray-1), 0.8), dark: rgba(var(--o-mixedgray-1), 0.8)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info3-inverse": {
+    "prefix": [
+      "var(--o-color-info3-inverse)"
+    ],
+    "body": "var(--o-color-info3-inverse)",
+    "description": "三级/辅助信息反色[light: rgba(var(--o-mixedgray-1), 0.6), dark: rgba(var(--o-mixedgray-1), 0.6)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info4-inverse": {
+    "prefix": [
+      "var(--o-color-info4-inverse)"
+    ],
+    "body": "var(--o-color-info4-inverse)",
+    "description": "置灰/禁用反色[light: rgba(var(--o-mixedgray-1), 0.4), dark: rgba(var(--o-mixedgray-1), 0.4)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-mask1": {
+    "prefix": [
+      "var(--o-color-mask1)"
+    ],
+    "body": "var(--o-color-mask1)",
+    "description": "全局遮罩[light: rgba(var(--o-mixedgray-14), 0.4), dark: rgba(var(--o-mixedgray-14), 0.4)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-mask2": {
+    "prefix": [
+      "var(--o-color-mask2)"
+    ],
+    "body": "var(--o-color-mask2)",
+    "description": "局部遮罩[light: rgba(var(--o-mixedgray-1), 0.2), dark: rgba(var(--o-mixedgray-4), 0.2)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-link1": {
+    "prefix": [
+      "var(--o-color-link1)"
+    ],
+    "body": "var(--o-color-link1)",
+    "description": "常规[light: rgba(var(--o-kleinblue-6)), dark: rgba(var(--o-kleinblue-5))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-link2": {
+    "prefix": [
+      "var(--o-color-link2)"
+    ],
+    "body": "var(--o-color-link2)",
+    "description": "悬浮[light: rgba(var(--o-kleinblue-4)), dark: rgba(var(--o-kleinblue-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-link3": {
+    "prefix": [
+      "var(--o-color-link3)"
+    ],
+    "body": "var(--o-color-link3)",
+    "description": "激活[light: rgba(var(--o-kleinblue-7)), dark: rgba(var(--o-kleinblue-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-link4": {
+    "prefix": [
+      "var(--o-color-link4)"
+    ],
+    "body": "var(--o-color-link4)",
+    "description": "禁用[light: rgba(var(--o-kleinblue-3)), dark: rgba(var(--o-kleinblue-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-shadow-1": {
+    "prefix": [
+      "var(--o-shadow-1)"
+    ],
+    "body": "var(--o-shadow-1)",
+    "description": "用于卡片、小弹窗、楼层阴影[light: 0 3px 8px rgba(var(--o-mixedgray-9), 0.08), dark: 0 3px 8px rgba(var(--o-mixedgray-1), 0.08)]",
+    "scope": "css,scss,less"
+  },
+  "--o-shadow-2": {
+    "prefix": [
+      "var(--o-shadow-2)"
+    ],
+    "body": "var(--o-shadow-2)",
+    "description": "用于卡片悬浮阴影[light: 0 2px 24px rgba(var(--o-mixedgray-9), 0.15), dark: 0 2px 24px rgba(var(--o-mixedgray-1), 0.15)]",
+    "scope": "css,scss,less"
+  },
+  "--o-shadow-3": {
+    "prefix": [
+      "var(--o-shadow-3)"
+    ],
+    "body": "var(--o-shadow-3)",
+    "description": "用于提示阴影[light: 0 8px 40px rgba(var(--o-mixedgray-9), 0.1), dark: 0 8px 40px rgba(var(--o-mixedgray-1), 0.1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-1": {
+    "prefix": [
+      "var(--o-gap-1)"
+    ],
+    "body": "var(--o-gap-1)",
+    "description": "用于组件之间的间距1[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-2": {
+    "prefix": [
+      "var(--o-gap-2)"
+    ],
+    "body": "var(--o-gap-2)",
+    "description": "用于组件之间的间距2[light: 8px, dark: 8px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-3": {
+    "prefix": [
+      "var(--o-gap-3)"
+    ],
+    "body": "var(--o-gap-3)",
+    "description": "用于组件之间的间距3[light: 12px, dark: 12px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-4": {
+    "prefix": [
+      "var(--o-gap-4)"
+    ],
+    "body": "var(--o-gap-4)",
+    "description": "用于组件之间的间距4[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-5": {
+    "prefix": [
+      "var(--o-gap-5)"
+    ],
+    "body": "var(--o-gap-5)",
+    "description": "用于组件之间的间距5[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-6": {
+    "prefix": [
+      "var(--o-gap-6)"
+    ],
+    "body": "var(--o-gap-6)",
+    "description": "用于组件之间的间距6[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-7": {
+    "prefix": [
+      "var(--o-gap-7)"
+    ],
+    "body": "var(--o-gap-7)",
+    "description": "用于组件之间的间距7[light: 40px, dark: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-8": {
+    "prefix": [
+      "var(--o-gap-8)"
+    ],
+    "body": "var(--o-gap-8)",
+    "description": "用于组件之间的间距8[light: 48px, dark: 48px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-9": {
+    "prefix": [
+      "var(--o-gap-9)"
+    ],
+    "body": "var(--o-gap-9)",
+    "description": "用于组件之间的间距9[light: 64px, dark: 64px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-10": {
+    "prefix": [
+      "var(--o-gap-10)"
+    ],
+    "body": "var(--o-gap-10)",
+    "description": "用于组件之间的间距10[light: 72px, dark: 72px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-2xs": {
+    "prefix": [
+      "var(--o-control_size-2xs)"
+    ],
+    "body": "var(--o-control_size-2xs)",
+    "description": "超小尺寸[light: 14px, dark: 14px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-xs": {
+    "prefix": [
+      "var(--o-control_size-xs)"
+    ],
+    "body": "var(--o-control_size-xs)",
+    "description": "小尺寸[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-s": {
+    "prefix": [
+      "var(--o-control_size-s)"
+    ],
+    "body": "var(--o-control_size-s)",
+    "description": "小尺寸[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-m": {
+    "prefix": [
+      "var(--o-control_size-m)"
+    ],
+    "body": "var(--o-control_size-m)",
+    "description": "尺寸[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-l": {
+    "prefix": [
+      "var(--o-control_size-l)"
+    ],
+    "body": "var(--o-control_size-l)",
+    "description": "尺寸[light: 40px, dark: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-xl": {
+    "prefix": [
+      "var(--o-control_size-xl)"
+    ],
+    "body": "var(--o-control_size-xl)",
+    "description": "尺寸[light: 48px, dark: 48px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-2xl": {
+    "prefix": [
+      "var(--o-control_size-2xl)"
+    ],
+    "body": "var(--o-control_size-2xl)",
+    "description": "尺寸[light: 56px, dark: 56px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-xs": {
+    "prefix": [
+      "var(--o-icon_size-xs)"
+    ],
+    "body": "var(--o-icon_size-xs)",
+    "description": "超小尺寸图标[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-s": {
+    "prefix": [
+      "var(--o-icon_size-s)"
+    ],
+    "body": "var(--o-icon_size-s)",
+    "description": "小尺寸图标[light: 20px, dark: 20px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-m": {
+    "prefix": [
+      "var(--o-icon_size-m)"
+    ],
+    "body": "var(--o-icon_size-m)",
+    "description": "中尺寸图标[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-l": {
+    "prefix": [
+      "var(--o-icon_size-l)"
+    ],
+    "body": "var(--o-icon_size-l)",
+    "description": "大尺寸图标[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-xl": {
+    "prefix": [
+      "var(--o-icon_size-xl)"
+    ],
+    "body": "var(--o-icon_size-xl)",
+    "description": "超大尺寸图标[light: 40px, dark: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-2xl": {
+    "prefix": [
+      "var(--o-icon_size-2xl)"
+    ],
+    "body": "var(--o-icon_size-2xl)",
+    "description": "2xl尺寸图标[light: 48px, dark: 48px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-3xl": {
+    "prefix": [
+      "var(--o-icon_size-3xl)"
+    ],
+    "body": "var(--o-icon_size-3xl)",
+    "description": "3xl尺寸图标[light: 56px, dark: 56px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-4xl": {
+    "prefix": [
+      "var(--o-icon_size-4xl)"
+    ],
+    "body": "var(--o-icon_size-4xl)",
+    "description": "4xl尺寸图标[light: 64px, dark: 64px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size_control-xs": {
+    "prefix": [
+      "var(--o-icon_size_control-xs)"
+    ],
+    "body": "var(--o-icon_size_control-xs)",
+    "description": "超小尺寸控件图标(组件使用)[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size_control-s": {
+    "prefix": [
+      "var(--o-icon_size_control-s)"
+    ],
+    "body": "var(--o-icon_size_control-s)",
+    "description": "小尺寸控件图标(组件使用)[light: 20px, dark: 20px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size_control-m": {
+    "prefix": [
+      "var(--o-icon_size_control-m)"
+    ],
+    "body": "var(--o-icon_size_control-m)",
+    "description": "中尺寸控件图标(组件使用)[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size_control-l": {
+    "prefix": [
+      "var(--o-icon_size_control-l)"
+    ],
+    "body": "var(--o-icon_size_control-l)",
+    "description": "大尺寸控件图标(组件使用)[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size_control-xl": {
+    "prefix": [
+      "var(--o-icon_size_control-xl)"
+    ],
+    "body": "var(--o-icon_size_control-xl)",
+    "description": "超大尺寸控件图标(组件使用)[light: 40px, dark: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-display1": {
+    "prefix": [
+      "var(--o-font_size-display1)"
+    ],
+    "body": "var(--o-font_size-display1)",
+    "description": "一级数据展示[light: 56px, dark: 56px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-display2": {
+    "prefix": [
+      "var(--o-font_size-display2)"
+    ],
+    "body": "var(--o-font_size-display2)",
+    "description": "二级数据展示[light: 48px, dark: 48px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-display3": {
+    "prefix": [
+      "var(--o-font_size-display3)"
+    ],
+    "body": "var(--o-font_size-display3)",
+    "description": "三级数据展示[light: 40px, dark: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h1": {
+    "prefix": [
+      "var(--o-font_size-h1)"
+    ],
+    "body": "var(--o-font_size-h1)",
+    "description": "一级标题[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h2": {
+    "prefix": [
+      "var(--o-font_size-h2)"
+    ],
+    "body": "var(--o-font_size-h2)",
+    "description": "二级标题[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h3": {
+    "prefix": [
+      "var(--o-font_size-h3)"
+    ],
+    "body": "var(--o-font_size-h3)",
+    "description": "三级标题[light: 22px, dark: 22px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h4": {
+    "prefix": [
+      "var(--o-font_size-h4)"
+    ],
+    "body": "var(--o-font_size-h4)",
+    "description": "四级标题[light: 20px, dark: 20px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-text1": {
+    "prefix": [
+      "var(--o-font_size-text1)"
+    ],
+    "body": "var(--o-font_size-text1)",
+    "description": "常规正文[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-text2": {
+    "prefix": [
+      "var(--o-font_size-text2)"
+    ],
+    "body": "var(--o-font_size-text2)",
+    "description": "大号正文[light: 18px, dark: 18px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-tip1": {
+    "prefix": [
+      "var(--o-font_size-tip1)"
+    ],
+    "body": "var(--o-font_size-tip1)",
+    "description": "提示文本1[light: 14px, dark: 14px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-tip2": {
+    "prefix": [
+      "var(--o-font_size-tip2)"
+    ],
+    "body": "var(--o-font_size-tip2)",
+    "description": "提示文本2[light: 12px, dark: 12px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-display1": {
+    "prefix": [
+      "var(--o-line_height-display1)"
+    ],
+    "body": "var(--o-line_height-display1)",
+    "description": "一级数据展示[light: 80px, dark: 80px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-display2": {
+    "prefix": [
+      "var(--o-line_height-display2)"
+    ],
+    "body": "var(--o-line_height-display2)",
+    "description": "二级数据展示[light: 64px, dark: 64px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-display3": {
+    "prefix": [
+      "var(--o-line_height-display3)"
+    ],
+    "body": "var(--o-line_height-display3)",
+    "description": "三级数据展示[light: 56px, dark: 56px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h1": {
+    "prefix": [
+      "var(--o-line_height-h1)"
+    ],
+    "body": "var(--o-line_height-h1)",
+    "description": "一级标题[light: 44px, dark: 44px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h2": {
+    "prefix": [
+      "var(--o-line_height-h2)"
+    ],
+    "body": "var(--o-line_height-h2)",
+    "description": "二级标题[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h3": {
+    "prefix": [
+      "var(--o-line_height-h3)"
+    ],
+    "body": "var(--o-line_height-h3)",
+    "description": "三级标题[light: 30px, dark: 30px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h4": {
+    "prefix": [
+      "var(--o-line_height-h4)"
+    ],
+    "body": "var(--o-line_height-h4)",
+    "description": "四级标题[light: 28px, dark: 28px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-text1": {
+    "prefix": [
+      "var(--o-line_height-text1)"
+    ],
+    "body": "var(--o-line_height-text1)",
+    "description": "正文[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-text2": {
+    "prefix": [
+      "var(--o-line_height-text2)"
+    ],
+    "body": "var(--o-line_height-text2)",
+    "description": "正文-大[light: 26px, dark: 26x]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-tip1": {
+    "prefix": [
+      "var(--o-line_height-tip1)"
+    ],
+    "body": "var(--o-line_height-tip1)",
+    "description": "提示文本1[light: 22px, dark: 22px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-tip2": {
+    "prefix": [
+      "var(--o-line_height-tip2)"
+    ],
+    "body": "var(--o-line_height-tip2)",
+    "description": "提示文本2[light: 18px, dark: 18px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-xs": {
+    "prefix": [
+      "var(--o-radius-xs)"
+    ],
+    "body": "var(--o-radius-xs)",
+    "description": "超小尺寸圆角[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-s": {
+    "prefix": [
+      "var(--o-radius-s)"
+    ],
+    "body": "var(--o-radius-s)",
+    "description": "小尺寸圆角[light: 8px, dark: 8px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-m": {
+    "prefix": [
+      "var(--o-radius-m)"
+    ],
+    "body": "var(--o-radius-m)",
+    "description": "中尺寸圆角[light: 12px, dark: 12px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-l": {
+    "prefix": [
+      "var(--o-radius-l)"
+    ],
+    "body": "var(--o-radius-l)",
+    "description": "大尺寸圆角[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-xl": {
+    "prefix": [
+      "var(--o-radius-xl)"
+    ],
+    "body": "var(--o-radius-xl)",
+    "description": "大尺寸圆角,一般用于卡片[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius_control-xs": {
+    "prefix": [
+      "var(--o-radius_control-xs)"
+    ],
+    "body": "var(--o-radius_control-xs)",
+    "description": "超小尺寸控件圆角(组件使用)[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius_control-s": {
+    "prefix": [
+      "var(--o-radius_control-s)"
+    ],
+    "body": "var(--o-radius_control-s)",
+    "description": "小尺寸控件圆角(组件使用)[light: 8px, dark: 8px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius_control-m": {
+    "prefix": [
+      "var(--o-radius_control-m)"
+    ],
+    "body": "var(--o-radius_control-m)",
+    "description": "中尺寸控件圆角(组件使用)[light: 12px, dark: 12px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius_control-l": {
+    "prefix": [
+      "var(--o-radius_control-l)"
+    ],
+    "body": "var(--o-radius_control-l)",
+    "description": "大尺寸控件圆角(组件使用)[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-s": {
+    "prefix": [
+      "var(--o-duration-s)"
+    ],
+    "body": "var(--o-duration-s)",
+    "description": "用于退出屏幕的动画[light: 200ms, dark: 200ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-m1": {
+    "prefix": [
+      "var(--o-duration-m1)"
+    ],
+    "body": "var(--o-duration-m1)",
+    "description": "用于当曲线为standard-in时进入屏幕的动画[light: 250ms, dark: 250ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-m2": {
+    "prefix": [
+      "var(--o-duration-m2)"
+    ],
+    "body": "var(--o-duration-m2)",
+    "description": "用于当曲线为standard时开始、结束的动画[light: 300ms, dark: 300ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-m3": {
+    "prefix": [
+      "var(--o-duration-m3)"
+    ],
+    "body": "var(--o-duration-m3)",
+    "description": "用于当曲线为emphasized-in时进入屏幕的动画[light: 400ms, dark: 400ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-l": {
+    "prefix": [
+      "var(--o-duration-l)"
+    ],
+    "body": "var(--o-duration-l)",
+    "description": "用于当曲线为emphasized时开始、结束的动画[light: 500ms, dark: 500ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-xl": {
+    "prefix": [
+      "var(--o-duration-xl)"
+    ],
+    "body": "var(--o-duration-xl)",
+    "description": "用于当曲线为emphasized时，轮播切换动画[light: 1000ms, dark: 1000ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-linear": {
+    "prefix": [
+      "var(--o-easing-linear)"
+    ],
+    "body": "var(--o-easing-linear)",
+    "description": "线性曲线[light: cubic-bezier(0, 0, 1, 1), dark: cubic-bezier(0, 0, 1, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-standard": {
+    "prefix": [
+      "var(--o-easing-standard)"
+    ],
+    "body": "var(--o-easing-standard)",
+    "description": "用于组件[light: cubic-bezier(0.2, 0, 0, 1), dark: cubic-bezier(0.2, 0, 0, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-standard-in": {
+    "prefix": [
+      "var(--o-easing-standard-in)"
+    ],
+    "body": "var(--o-easing-standard-in)",
+    "description": "用于组件[light: cubic-bezier(0, 0, 0, 1), dark: cubic-bezier(0, 0, 0, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-standard-out": {
+    "prefix": [
+      "var(--o-easing-standard-out)"
+    ],
+    "body": "var(--o-easing-standard-out)",
+    "description": "用于组件[light: cubic-bezier(0.3, 0, 1, 1), dark: cubic-bezier(0.3, 0, 1, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-emphasized": {
+    "prefix": [
+      "var(--o-easing-emphasized)"
+    ],
+    "body": "var(--o-easing-emphasized)",
+    "description": "用于大卡片、场景切换[light: cubic-bezier(0.2, 0, 0, 1), dark: cubic-bezier(0.2, 0, 0, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-emphasized-in": {
+    "prefix": [
+      "var(--o-easing-emphasized-in)"
+    ],
+    "body": "var(--o-easing-emphasized-in)",
+    "description": "用于大卡片、场景切换[light: cubic-bezier(0.3, 0, 0.8, 0.15), dark: cubic-bezier(0.3, 0, 0.8, 0.15)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-emphasized-out": {
+    "prefix": [
+      "var(--o-easing-emphasized-out)"
+    ],
+    "body": "var(--o-easing-emphasized-out)",
+    "description": "用于大卡片、场景切换[light: cubic-bezier(0.05, 0.7, 0.1, 1), dark: cubic-bezier(0.05, 0.7, 0.1, 1)]",
+    "scope": "css,scss,less"
+  }
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/theme/opendesign/token.config.ts b/packages/opendesign/src/theme/opendesign/token.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0434f9bfc769ca4b1b316cea96ef1651b1b1a56f
--- /dev/null
+++ b/packages/opendesign/src/theme/opendesign/token.config.ts
@@ -0,0 +1,16 @@
+module.exports = {
+  prefix: '--o-',
+  themeMap: [
+    {
+      key: 'light',
+      name: 'light',
+    },
+    {
+      key: 'dark',
+      name: 'dark',
+    },
+  ],
+  defaultTheme: '',
+  tokenFile: ['./token.json'],
+  codeSnippetsFile: './opendesign.token.code-snippets',
+};
diff --git a/packages/opendesign/src/theme/opendesign/token.json b/packages/opendesign/src/theme/opendesign/token.json
new file mode 100644
index 0000000000000000000000000000000000000000..65f8bca7e54fc2874703333db30d0d358eaae176
--- /dev/null
+++ b/packages/opendesign/src/theme/opendesign/token.json
@@ -0,0 +1,2697 @@
+{
+  "white": {
+    "name": "白色",
+    "type": "palette",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "white",
+        "value": {
+          "light": "255, 255, 255",
+          "dark": "255, 255, 255"
+        }
+      }
+    ]
+  },
+  "black": {
+    "name": "黑色",
+    "type": "palette",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "black",
+        "value": {
+          "light": "0, 0, 0",
+          "dark": "0, 0, 0"
+        }
+      }
+    ]
+  },
+  "kleinblue": {
+    "name": "品牌色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "kleinblue-1",
+        "value": {
+          "light": "227, 234, 246",
+          "dark": "11, 21, 55"
+        }
+      },
+      {
+        "key": "kleinblue-2",
+        "value": {
+          "light": "190, 206, 237",
+          "dark": "16, 30, 77"
+        }
+      },
+      {
+        "key": "kleinblue-3",
+        "value": {
+          "light": "132, 161, 220",
+          "dark": "27, 48, 113"
+        }
+      },
+      {
+        "key": "kleinblue-4",
+        "value": {
+          "light": "81, 119, 202",
+          "dark": "40, 68, 149"
+        }
+      },
+      {
+        "key": "kleinblue-5",
+        "value": {
+          "light": "37, 81, 185",
+          "dark": "55, 91, 184"
+        }
+      },
+      {
+        "key": "kleinblue-6",
+        "value": {
+          "light": "0, 47, 167",
+          "dark": "72, 116, 220"
+        }
+      },
+      {
+        "key": "kleinblue-7",
+        "value": {
+          "light": "0, 39, 147",
+          "dark": "105, 143, 227 "
+        }
+      },
+      {
+        "key": "kleinblue-8",
+        "value": {
+          "light": "0, 31, 126",
+          "dark": "140, 171, 234"
+        }
+      },
+      {
+        "key": "kleinblue-9",
+        "value": {
+          "light": "0, 24, 126",
+          "dark": "176, 199, 241"
+        }
+      },
+      {
+        "key": "kleinblue-10",
+        "value": {
+          "light": "0, 18, 85",
+          "dark": "215, 227, 248"
+        }
+      }
+    ]
+  },
+  "yellow": {
+    "name": "黄色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "yellow-1",
+        "value": {
+          "light": "254, 252, 233",
+          "dark": "81, 46, 9"
+        }
+      },
+      {
+        "key": "yellow-2",
+        "value": {
+          "light": "252, 248, 202",
+          "dark": "121, 75, 15"
+        }
+      },
+      {
+        "key": "yellow-3",
+        "value": {
+          "light": "249, 237, 149",
+          "dark": "161, 107, 22"
+        }
+      },
+      {
+        "key": "yellow-4",
+        "value": {
+          "light": "246, 224, 98",
+          "dark": "202, 143, 30"
+        }
+      },
+      {
+        "key": "yellow-5",
+        "value": {
+          "light": "243, 207, 49",
+          "dark": "242, 183, 38"
+        }
+      },
+      {
+        "key": "yellow-6",
+        "value": {
+          "light": "240, 188, 6",
+          "dark": "245, 202, 80"
+        }
+      },
+      {
+        "key": "yellow-7",
+        "value": {
+          "light": "200, 147, 0",
+          "dark": "247, 219, 122"
+        }
+      },
+      {
+        "key": "yellow-8",
+        "value": {
+          "light": "160, 109, 0",
+          "dark": "250, 234, 166"
+        }
+      },
+      {
+        "key": "yellow-9",
+        "value": {
+          "light": "120, 76, 0",
+          "dark": "252, 246, 210"
+        }
+      },
+      {
+        "key": "yellow-10",
+        "value": {
+          "light": "80, 47, 0",
+          "dark": "254, 251, 237"
+        }
+      }
+    ]
+  },
+  "orange": {
+    "name": "橘红色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "orange-1",
+        "value": {
+          "light": "255, 246, 232",
+          "dark": "77, 24, 0"
+        }
+      },
+      {
+        "key": "orange-2",
+        "value": {
+          "light": "254, 226, 186",
+          "dark": "120, 42, 1"
+        }
+      },
+      {
+        "key": "orange-3",
+        "value": {
+          "light": "253, 202, 140",
+          "dark": "163, 68, 8"
+        }
+      },
+      {
+        "key": "orange-4",
+        "value": {
+          "light": "252, 176, 95",
+          "dark": "207, 97, 19"
+        }
+      },
+      {
+        "key": "orange-5",
+        "value": {
+          "light": "251, 147, 50",
+          "dark": "250, 130, 33"
+        }
+      },
+      {
+        "key": "orange-6",
+        "value": {
+          "light": "250, 115, 5",
+          "dark": "251, 143, 43"
+        }
+      },
+      {
+        "key": "orange-7",
+        "value": {
+          "light": "207, 88, 3",
+          "dark": "252, 174, 91"
+        }
+      },
+      {
+        "key": "orange-8",
+        "value": {
+          "light": "163, 64, 2",
+          "dark": "253, 202, 139"
+        }
+      },
+      {
+        "key": "orange-9",
+        "value": {
+          "light": "120, 42, 1",
+          "dark": "254, 227, 188"
+        }
+      },
+      {
+        "key": "orange-10",
+        "value": {
+          "light": "77, 24, 0",
+          "dark": "255, 248, 237"
+        }
+      }
+    ]
+  },
+  "red": {
+    "name": "红色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "red-1",
+        "value": {
+          "light": "255, 234, 232",
+          "dark": "77, 0, 17"
+        }
+      },
+      {
+        "key": "red-2",
+        "value": {
+          "light": "250, 185, 182",
+          "dark": "115, 3, 24"
+        }
+      },
+      {
+        "key": "red-3",
+        "value": {
+          "light": "245, 136, 134",
+          "dark": "153, 9, 31"
+        }
+      },
+      {
+        "key": "red-4",
+        "value": {
+          "light": "240, 87, 90",
+          "dark": "192, 17, 37"
+        }
+      },
+      {
+        "key": "red-5",
+        "value": {
+          "light": "235, 43, 52",
+          "dark": "230, 28, 43"
+        }
+      },
+      {
+        "key": "red-6",
+        "value": {
+          "light": "230, 0, 18",
+          "dark": "235, 35, 45"
+        }
+      },
+      {
+        "key": "red-7",
+        "value": {
+          "light": "192, 0, 22",
+          "dark": "240, 82, 85"
+        }
+      },
+      {
+        "key": "red-8",
+        "value": {
+          "light": "153, 0, 23",
+          "dark": "245, 132, 130"
+        }
+      },
+      {
+        "key": "red-9",
+        "value": {
+          "light": "115, 0, 21",
+          "dark": "250, 183, 180"
+        }
+      },
+      {
+        "key": "red-10",
+        "value": {
+          "light": "77, 0, 17",
+          "dark": "255, 234, 232"
+        }
+      }
+    ]
+  },
+  "green": {
+    "name": "绿色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "green-1",
+        "value": {
+          "light": "232, 255, 238",
+          "dark": "0, 77, 42"
+        }
+      },
+      {
+        "key": "green-2",
+        "value": {
+          "light": "177, 239, 195",
+          "dark": "2, 102, 53"
+        }
+      },
+      {
+        "key": "green-3",
+        "value": {
+          "light": "128, 224, 158",
+          "dark": "10, 127, 66"
+        }
+      },
+      {
+        "key": "green-4",
+        "value": {
+          "light": "84, 208, 127",
+          "dark": "22, 152, 80"
+        }
+      },
+      {
+        "key": "green-5",
+        "value": {
+          "light": "45, 193, 101",
+          "dark": "36, 177, 95"
+        }
+      },
+      {
+        "key": "green-6",
+        "value": {
+          "light": "11, 177, 81",
+          "dark": "51, 193, 104"
+        }
+      },
+      {
+        "key": "green-7",
+        "value": {
+          "light": "7, 152, 72",
+          "dark": "90, 208, 131"
+        }
+      },
+      {
+        "key": "green-8",
+        "value": {
+          "light": "4, 127, 63",
+          "dark": "135, 224, 163"
+        }
+      },
+      {
+        "key": "green-9",
+        "value": {
+          "light": "2, 102, 53",
+          "dark": "185, 239, 200"
+        }
+      },
+      {
+        "key": "green-10",
+        "value": {
+          "light": "0, 77, 42",
+          "dark": "240, 255, 244"
+        }
+      }
+    ]
+  },
+  "amber": {
+    "name": "琥珀色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "amber-1",
+        "value": {
+          "light": "253, 247, 232",
+          "dark": "77, 30, 0"
+        }
+      },
+      {
+        "key": "amber-2",
+        "value": {
+          "light": "250, 237, 200",
+          "dark": "116, 51, 0"
+        }
+      },
+      {
+        "key": "amber-3",
+        "value": {
+          "light": "245, 215, 147",
+          "dark": "154, 76, 0"
+        }
+      },
+      {
+        "key": "amber-4",
+        "value": {
+          "light": "241, 191, 96",
+          "dark": "193, 105, 0"
+        }
+      },
+      {
+        "key": "amber-5",
+        "value": {
+          "light": "236, 165, 47",
+          "dark": "231, 137, 0"
+        }
+      },
+      {
+        "key": "amber-6",
+        "value": {
+          "light": "231, 137, 0",
+          "dark": "236, 165, 47"
+        }
+      },
+      {
+        "key": "amber-7",
+        "value": {
+          "light": "193, 105, 0",
+          "dark": "241, 191, 96"
+        }
+      },
+      {
+        "key": "amber-8",
+        "value": {
+          "light": "154, 76, 0",
+          "dark": "245, 215, 147"
+        }
+      },
+      {
+        "key": "amber-9",
+        "value": {
+          "light": "116, 51, 0",
+          "dark": "250, 237, 200"
+        }
+      },
+      {
+        "key": "amber-10",
+        "value": {
+          "light": "77, 30, 0",
+          "dark": "253, 247, 232"
+        }
+      }
+    ]
+  },
+  "lime": {
+    "name": "黄绿色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "lime-1",
+        "value": {
+          "light": "243, 250, 230",
+          "dark": "53, 70, 0"
+        }
+      },
+      {
+        "key": "lime-2",
+        "value": {
+          "light": "229, 244, 195",
+          "dark": "82, 105, 0"
+        }
+      },
+      {
+        "key": "lime-3",
+        "value": {
+          "light": "208, 233, 140",
+          "dark": "112, 141, 1"
+        }
+      },
+      {
+        "key": "lime-4",
+        "value": {
+          "light": "191, 223, 89",
+          "dark": "143, 176, 2"
+        }
+      },
+      {
+        "key": "lime-5",
+        "value": {
+          "light": "177, 212, 42",
+          "dark": "175, 211, 5"
+        }
+      },
+      {
+        "key": "lime-6",
+        "value": {
+          "light": "167, 201, 0",
+          "dark": "184, 220, 48"
+        }
+      },
+      {
+        "key": "lime-7",
+        "value": {
+          "light": "136, 168, 0",
+          "dark": "196, 229, 95"
+        }
+      },
+      {
+        "key": "lime-8",
+        "value": {
+          "light": "107, 134, 0",
+          "dark": "212, 237, 145"
+        }
+      },
+      {
+        "key": "lime-9",
+        "value": {
+          "light": "78, 101, 0",
+          "dark": "231, 246, 198"
+        }
+      },
+      {
+        "key": "lime-10",
+        "value": {
+          "light": "51, 67, 0",
+          "dark": "244, 251, 231"
+        }
+      }
+    ]
+  },
+  "light-green": {
+    "name": "浅绿色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "light-green-1",
+        "value": {
+          "light": "242, 247, 231",
+          "dark": "33, 60, 7"
+        }
+      },
+      {
+        "key": "light-green-2",
+        "value": {
+          "light": "225, 240, 199",
+          "dark": "51, 90, 11"
+        }
+      },
+      {
+        "key": "light-green-3",
+        "value": {
+          "light": "195, 225, 148",
+          "dark": "70, 119, 16"
+        }
+      },
+      {
+        "key": "light-green-4",
+        "value": {
+          "light": "166, 209, 103",
+          "dark": "91, 149, 21"
+        }
+      },
+      {
+        "key": "light-green-5",
+        "value": {
+          "light": "138, 194, 62",
+          "dark": "112, 179, 27"
+        }
+      },
+      {
+        "key": "light-green-6",
+        "value": {
+          "light": "112, 179, 27",
+          "dark": "184, 220, 48"
+        }
+      },
+      {
+        "key": "light-green-7",
+        "value": {
+          "light": "91, 149, 21",
+          "dark": "166, 209, 103"
+        }
+      },
+      {
+        "key": "light-green-8",
+        "value": {
+          "light": "70, 119, 16",
+          "dark": "195, 225, 148"
+        }
+      },
+      {
+        "key": "light-green-9",
+        "value": {
+          "light": "51, 90, 11",
+          "dark": "225, 240, 199"
+        }
+      },
+      {
+        "key": "light-green-10",
+        "value": {
+          "light": "33, 60, 7",
+          "dark": "242, 247, 231"
+        }
+      }
+    ]
+  },
+  "teal": {
+    "name": "蓝绿色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "teal-1",
+        "value": {
+          "light": "228, 247, 241",
+          "dark": "0, 60, 48"
+        }
+      },
+      {
+        "key": "teal-2",
+        "value": {
+          "light": "192, 240, 224",
+          "dark": "0, 90, 71"
+        }
+      },
+      {
+        "key": "teal-3",
+        "value": {
+          "light": "135, 225, 197",
+          "dark": "0, 119, 93"
+        }
+      },
+      {
+        "key": "teal-4",
+        "value": {
+          "light": "84, 209, 173",
+          "dark": "0, 149, 113"
+        }
+      },
+      {
+        "key": "teal-5",
+        "value": {
+          "light": "39, 194, 152",
+          "dark": "0, 179, 133"
+        }
+      },
+      {
+        "key": "teal-6",
+        "value": {
+          "light": "0, 179, 133",
+          "dark": "39, 194, 152"
+        }
+      },
+      {
+        "key": "teal-7",
+        "value": {
+          "light": "0, 149, 113",
+          "dark": "84, 209, 173"
+        }
+      },
+      {
+        "key": "teal-8",
+        "value": {
+          "light": "0, 119, 93",
+          "dark": "135, 225, 197"
+        }
+      },
+      {
+        "key": "teal-9",
+        "value": {
+          "light": "0, 90, 71",
+          "dark": "192, 240, 224"
+        }
+      },
+      {
+        "key": "teal-10",
+        "value": {
+          "light": "0, 60, 48",
+          "dark": "228, 247, 241"
+        }
+      }
+    ]
+  },
+  "cyan": {
+    "name": "青色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "cyan-1",
+        "value": {
+          "light": "228, 247, 247",
+          "dark": "0, 52, 60"
+        }
+      },
+      {
+        "key": "cyan-2",
+        "value": {
+          "light": "192, 240, 240",
+          "dark": "0, 79, 90"
+        }
+      },
+      {
+        "key": "cyan-3",
+        "value": {
+          "light": "135, 223, 225",
+          "dark": "0, 107, 119"
+        }
+      },
+      {
+        "key": "cyan-4",
+        "value": {
+          "light": "84, 205, 209",
+          "dark": "0, 137, 149"
+        }
+      },
+      {
+        "key": "cyan-5",
+        "value": {
+          "light": "39, 186, 194",
+          "dark": "39, 186, 194"
+        }
+      },
+      {
+        "key": "cyan-6",
+        "value": {
+          "light": "0, 167, 179",
+          "dark": "84, 205, 209"
+        }
+      },
+      {
+        "key": "cyan-7",
+        "value": {
+          "light": "0, 137, 149",
+          "dark": "92, 208, 212"
+        }
+      },
+      {
+        "key": "cyan-8",
+        "value": {
+          "light": "0, 107, 119",
+          "dark": "135, 223, 225"
+        }
+      },
+      {
+        "key": "cyan-9",
+        "value": {
+          "light": "0, 79, 90",
+          "dark": "192, 240, 240"
+        }
+      },
+      {
+        "key": "cyan-10",
+        "value": {
+          "light": "0, 52, 60",
+          "dark": "228, 247, 247"
+        }
+      }
+    ]
+  },
+  "light-blue": {
+    "name": "浅蓝色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "light-blue-1",
+        "value": {
+          "light": "232, 247, 252",
+          "dark": "0, 47, 76"
+        }
+      },
+      {
+        "key": "light-blue-2",
+        "value": {
+          "light": "200, 237, 250",
+          "dark": "0, 72, 115"
+        }
+      },
+      {
+        "key": "light-blue-3",
+        "value": {
+          "light": "147, 218, 245",
+          "dark": "0, 99, 153"
+        }
+      },
+      {
+        "key": "light-blue-4",
+        "value": {
+          "light": "96, 198, 239",
+          "dark": "0, 127, 191"
+        }
+      },
+      {
+        "key": "light-blue-5",
+        "value": {
+          "light": "47, 178, 234",
+          "dark": "0, 156, 229"
+        }
+      },
+      {
+        "key": "light-blue-6",
+        "value": {
+          "light": "0, 156, 229",
+          "dark": "47, 178, 234"
+        }
+      },
+      {
+        "key": "light-blue-7",
+        "value": {
+          "light": "0, 127, 191",
+          "dark": "96, 198, 239"
+        }
+      },
+      {
+        "key": "light-blue-8",
+        "value": {
+          "light": "0, 99, 153",
+          "dark": "147, 218, 245"
+        }
+      },
+      {
+        "key": "light-blue-9",
+        "value": {
+          "light": "0, 72, 115",
+          "dark": "200, 237, 250"
+        }
+      },
+      {
+        "key": "light-blue-10",
+        "value": {
+          "light": "0, 47, 76",
+          "dark": "232, 247, 252"
+        }
+      }
+    ]
+  },
+  "blue": {
+    "name": "蓝色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "blue-1",
+        "value": {
+          "light": "233, 245, 254",
+          "dark": "0, 43, 97"
+        }
+      },
+      {
+        "key": "blue-2",
+        "value": {
+          "light": "202, 231, 252",
+          "dark": "0, 61, 133"
+        }
+      },
+      {
+        "key": "blue-3",
+        "value": {
+          "light": "149, 205, 249",
+          "dark": "0, 80, 169"
+        }
+      },
+      {
+        "key": "blue-4",
+        "value": {
+          "light": "98, 178, 246",
+          "dark": "0, 100, 204"
+        }
+      },
+      {
+        "key": "blue-5",
+        "value": {
+          "light": "49, 151, 243",
+          "dark": "0, 122, 240"
+        }
+      },
+      {
+        "key": "blue-6",
+        "value": {
+          "light": "0, 122, 240",
+          "dark": "49, 151, 243"
+        }
+      },
+      {
+        "key": "blue-7",
+        "value": {
+          "light": "0, 100, 204",
+          "dark": "98, 178, 246"
+        }
+      },
+      {
+        "key": "blue-8",
+        "value": {
+          "light": "0, 80, 169",
+          "dark": "149, 205, 249"
+        }
+      },
+      {
+        "key": "blue-9",
+        "value": {
+          "light": "0, 61, 133",
+          "dark": "202, 231, 252"
+        }
+      },
+      {
+        "key": "blue-10",
+        "value": {
+          "light": "0, 43, 97",
+          "dark": "233, 245, 254"
+        }
+      }
+    ]
+  },
+
+  "mixedgray": {
+    "name": "混合中性色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "mixedgray-1",
+        "value": {
+          "light": "255, 255, 255",
+          "dark": "0, 0, 0"
+        }
+      },
+      {
+        "key": "mixedgray-2",
+        "value": {
+          "light": "240, 243, 245",
+          "dark": "18, 18, 20"
+        }
+      },
+      {
+        "key": "mixedgray-3",
+        "value": {
+          "light": "237, 237, 240",
+          "dark": "28, 26, 28"
+        }
+      },
+      {
+        "key": "mixedgray-4",
+        "value": {
+          "light": "232, 232, 235",
+          "dark": "36, 36, 39"
+        }
+      },
+      {
+        "key": "mixedgray-5",
+        "value": {
+          "light": "222, 222, 227",
+          "dark": "43, 43, 47"
+        }
+      },
+      {
+        "key": "mixedgray-6",
+        "value": {
+          "light": "212, 212, 217",
+          "dark": "53, 53, 57"
+        }
+      },
+      {
+        "key": "mixedgray-7",
+        "value": {
+          "light": "186, 186, 191",
+          "dark": "63, 63, 67"
+        }
+      },
+      {
+        "key": "mixedgray-8",
+        "value": {
+          "light": "149, 149, 157",
+          "dark": "85, 85, 88"
+        }
+      },
+      {
+        "key": "mixedgray-9",
+        "value": {
+          "light": "111, 111, 117",
+          "dark": "118, 118, 122"
+        }
+      },
+      {
+        "key": "mixedgray-10",
+        "value": {
+          "light": "85 , 85, 92",
+          "dark": "156, 156, 159"
+        }
+      },
+      {
+        "key": "mixedgray-11",
+        "value": {
+          "light": "61, 61, 66",
+          "dark": "181, 181, 185"
+        }
+      },
+      {
+        "key": "mixedgray-12",
+        "value": {
+          "light": "37, 37, 41",
+          "dark": "208, 208, 210"
+        }
+      },
+      {
+        "key": "mixedgray-13",
+        "value": {
+          "light": "21, 21, 23",
+          "dark": "235, 235, 238"
+        }
+      },
+      {
+        "key": "mixedgray-14",
+        "value": {
+          "light": "0, 0, 0",
+          "dark": "255,255, 255"
+        }
+      }
+    ]
+  },
+  "indigo": {
+    "name": "靛蓝色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "indigo-1",
+        "value": {
+          "light": "232, 236, 247",
+          "dark": "5, 19, 101"
+        }
+      },
+      {
+        "key": "indigo-2",
+        "value": {
+          "light": "200, 211, 240",
+          "dark": "10, 28, 118"
+        }
+      },
+      {
+        "key": "indigo-3",
+        "value": {
+          "light": "150, 170, 225",
+          "dark": "16, 38, 138"
+        }
+      },
+      {
+        "key": "indigo-4",
+        "value": {
+          "light": "106, 131, 209",
+          "dark": "23, 50, 159"
+        }
+      },
+      {
+        "key": "indigo-5",
+        "value": {
+          "light": "66, 96, 194",
+          "dark": "31, 63, 179"
+        }
+      },
+      {
+        "key": "indigo-6",
+        "value": {
+          "light": "31, 63, 179",
+          "dark": "66, 96, 194"
+        }
+      },
+      {
+        "key": "indigo-7",
+        "value": {
+          "light": "23, 50, 159",
+          "dark": "106, 131, 209"
+        }
+      },
+      {
+        "key": "indigo-8",
+        "value": {
+          "light": "16, 38, 138",
+          "dark": "150, 170, 225"
+        }
+      },
+      {
+        "key": "indigo-9",
+        "value": {
+          "light": "10, 28, 118",
+          "dark": "209, 218, 241"
+        }
+      },
+      {
+        "key": "indigo-10",
+        "value": {
+          "light": "5, 19, 101",
+          "dark": "232, 236, 247"
+        }
+      }
+    ]
+  },
+  "violet": {
+    "name": "紫罗兰色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "violet-1",
+        "value": {
+          "light": "234, 231, 249",
+          "dark": "34, 0, 109"
+        }
+      },
+      {
+        "key": "violet-2",
+        "value": {
+          "light": "206, 199, 242",
+          "dark": "39, 2, 130"
+        }
+      },
+      {
+        "key": "violet-3",
+        "value": {
+          "light": "163, 147, 229",
+          "dark": "46, 7, 150"
+        }
+      },
+      {
+        "key": "violet-4",
+        "value": {
+          "light": "124, 100, 217",
+          "dark": "53, 13, 171"
+        }
+      },
+      {
+        "key": "violet-5",
+        "value": {
+          "light": "90, 58, 204",
+          "dark": "61, 20, 191"
+        }
+      },
+      {
+        "key": "violet-6",
+        "value": {
+          "light": "61, 20, 191",
+          "dark": "97, 62, 201"
+        }
+      },
+      {
+        "key": "violet-7",
+        "value": {
+          "light": "53, 13, 171",
+          "dark": "150, 130, 223"
+        }
+      },
+      {
+        "key": "violet-8",
+        "value": {
+          "light": "46, 7, 150",
+          "dark": "182, 169, 233"
+        }
+      },
+      {
+        "key": "violet-9",
+        "value": {
+          "light": "39, 2, 130",
+          "dark": "217, 210, 244"
+        }
+      },
+      {
+        "key": "violet-10",
+        "value": {
+          "light": "34, 0, 109",
+          "dark": "240, 237, 250"
+        }
+      }
+    ]
+  },
+
+  "purple": {
+    "name": "紫色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "purple-1",
+        "value": {
+          "light": "245, 228, 247",
+          "dark": "60, 0, 97"
+        }
+      },
+      {
+        "key": "purple-2",
+        "value": {
+          "light": "234, 192, 240",
+          "dark": "77, 0, 118"
+        }
+      },
+      {
+        "key": "purple-3",
+        "value": {
+          "light": "211, 136, 225",
+          "dark": "95, 0, 138"
+        }
+      },
+      {
+        "key": "purple-4",
+        "value": {
+          "light": "187, 85, 209",
+          "dark": "114, 0, 159"
+        }
+      },
+      {
+        "key": "purple-5",
+        "value": {
+          "light": "161, 41, 194",
+          "dark": "135, 2, 179"
+        }
+      },
+      {
+        "key": "purple-6",
+        "value": {
+          "light": "135, 2, 179",
+          "dark": "161, 41, 194"
+        }
+      },
+      {
+        "key": "purple-7",
+        "value": {
+          "light": "114, 0, 159",
+          "dark": "187, 85, 209"
+        }
+      },
+      {
+        "key": "purple-8",
+        "value": {
+          "light": "95, 0, 138",
+          "dark": "211, 136, 225"
+        }
+      },
+      {
+        "key": "purple-9",
+        "value": {
+          "light": "77, 0, 118",
+          "dark": "234, 192, 240"
+        }
+      },
+      {
+        "key": "purple-10",
+        "value": {
+          "light": "60, 0, 97",
+          "dark": "245, 228, 247"
+        }
+      }
+    ]
+  },
+
+  "pink": {
+    "name": "粉红色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "pink-1",
+        "value": {
+          "light": "252, 232, 239",
+          "dark": "81, 0, 51"
+        }
+      },
+      {
+        "key": "pink-2",
+        "value": {
+          "light": "249, 199, 217",
+          "dark": "117, 0, 70"
+        }
+      },
+      {
+        "key": "pink-3",
+        "value": {
+          "light": "243, 146, 184",
+          "dark": "153, 0, 86"
+        }
+      },
+      {
+        "key": "pink-4",
+        "value": {
+          "light": "236, 95, 156",
+          "dark": "188, 0, 100"
+        }
+      },
+      {
+        "key": "pink-5",
+        "value": {
+          "light": "230, 46, 132",
+          "dark": "224, 0, 112"
+        }
+      },
+      {
+        "key": "pink-6",
+        "value": {
+          "light": "224, 0, 112",
+          "dark": "230, 46, 132"
+        }
+      },
+      {
+        "key": "pink-7",
+        "value": {
+          "light": "188, 0, 100",
+          "dark": "236, 95, 156"
+        }
+      },
+      {
+        "key": "pink-8",
+        "value": {
+          "light": "153, 0, 86",
+          "dark": "243, 146, 184"
+        }
+      },
+      {
+        "key": "pink-9",
+        "value": {
+          "light": "117, 0, 70",
+          "dark": "249, 199, 217"
+        }
+      },
+      {
+        "key": "pink-10",
+        "value": {
+          "light": "81, 0, 51",
+          "dark": "252, 232, 239"
+        }
+      }
+    ]
+  },
+
+  "base": {
+    "name": "基础色(不同皮肤色相不变)",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-white",
+        "value": {
+          "light": "rgb(var(--o-white))",
+          "dark": "rgb(var(--o-white))"
+        }
+      },
+      {
+        "key": "color-black",
+        "value": {
+          "light": "rgb(var(--o-black))",
+          "dark": "rgb(var(--o-black))"
+        }
+      }
+    ]
+  },
+  "primary": {
+    "name": "强调色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-primary1",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-6))",
+          "dark": "rgb(var(--o-kleinblue-5))"
+        }
+      },
+      {
+        "key": "color-primary2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-4))",
+          "dark": "rgb(var(--o-kleinblue-4))"
+        }
+      },
+      {
+        "key": "color-primary3",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-7))",
+          "dark": "rgb(var(--o-kleinblue-7))"
+        }
+      },
+      {
+        "key": "color-primary4",
+        "description": "禁用",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-3))",
+          "dark": "rgb(var(--o-kleinblue-3))"
+        }
+      },
+      {
+        "key": "color-primary1-light",
+        "description": "常规-浅",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-2))",
+          "dark": "rgb(var(--o-kleinblue-2))"
+        }
+      },
+      {
+        "key": "color-primary2-light",
+        "description": "悬浮-浅",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-3))",
+          "dark": "rgb(var(--o-kleinblue-3))"
+        }
+      },
+      {
+        "key": "color-primary3-light",
+        "description": "激活-浅",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-4))",
+          "dark": "rgb(var(--o-kleinblue-4))"
+        }
+      },
+      {
+        "key": "color-primary4-light",
+        "description": "禁用-浅",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-1))",
+          "dark": "rgb(var(--o-kleinblue-1))"
+        }
+      }
+    ]
+  },
+  "success": {
+    "name": "成功色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-success1",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-green-6))",
+          "dark": "rgb(var(--o-green-6))"
+        }
+      },
+      {
+        "key": "color-success2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-green-4))",
+          "dark": "rgb(var(--o-green-4))"
+        }
+      },
+      {
+        "key": "color-success3",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-green-7))",
+          "dark": "rgb(var(--o-green-7))"
+        }
+      },
+      {
+        "key": "color-success4",
+        "description": "禁用",
+        "value": {
+          "light": "rgb(var(--o-green-3))",
+          "dark": "rgb(var(--o-green-3))"
+        }
+      },
+      {
+        "key": "color-success1-light",
+        "description": "常规-浅",
+        "value": {
+          "light": "rgb(var(--o-green-2))",
+          "dark": "rgb(var(--o-green-2))"
+        }
+      },
+      {
+        "key": "color-success2-light",
+        "description": "悬浮-浅",
+        "value": {
+          "light": "rgb(var(--o-green-3))",
+          "dark": "rgb(var(--o-green-3))"
+        }
+      },
+      {
+        "key": "color-success3-light",
+        "description": "激活-浅",
+        "value": {
+          "light": "rgb(var(--o-green-4))",
+          "dark": "rgb(var(--o-green-4))"
+        }
+      },
+      {
+        "key": "color-success4-light",
+        "description": "禁用-浅",
+        "value": {
+          "light": "rgb(var(--o-green-1))",
+          "dark": "rgb(var(--o-green-1))"
+        }
+      }
+    ]
+  },
+  "warning": {
+    "name": "告警色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-warning1",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-orange-6))",
+          "dark": "rgb(var(--o-orange-6))"
+        }
+      },
+      {
+        "key": "color-warning2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-orange-4))",
+          "dark": "rgb(var(--o-orange-4))"
+        }
+      },
+      {
+        "key": "color-warning3",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-orange-7))",
+          "dark": "rgb(var(--o-orange-7))"
+        }
+      },
+      {
+        "key": "color-warning4",
+        "description": "禁用",
+        "value": {
+          "light": "rgb(var(--o-orange-3))",
+          "dark": "rgb(var(--o-orange-3))"
+        }
+      },
+      {
+        "key": "color-warning1-light",
+        "description": "常规-浅",
+        "value": {
+          "light": "rgb(var(--o-orange-2))",
+          "dark": "rgb(var(--o-orange-2))"
+        }
+      },
+      {
+        "key": "color-warning2-light",
+        "description": "悬浮-浅",
+        "value": {
+          "light": "rgb(var(--o-orange-3))",
+          "dark": "rgb(var(--o-orange-3))"
+        }
+      },
+      {
+        "key": "color-warning3-light",
+        "description": "激活-浅",
+        "value": {
+          "light": "rgb(var(--o-orange-4))",
+          "dark": "rgb(var(--o-orange-4))"
+        }
+      },
+      {
+        "key": "color-warning4-light",
+        "description": "禁用-浅",
+        "value": {
+          "light": "rgb(var(--o-orange-1))",
+          "dark": "rgb(var(--o-orange-1))"
+        }
+      }
+    ]
+  },
+  "danger": {
+    "name": "危险色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-danger1",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-red-6))",
+          "dark": "rgb(var(--o-red-6))"
+        }
+      },
+      {
+        "key": "color-danger2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-red-4))",
+          "dark": "rgb(var(--o-red-4))"
+        }
+      },
+      {
+        "key": "color-danger3",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-red-7))",
+          "dark": "rgb(var(--o-red-7))"
+        }
+      },
+      {
+        "key": "color-danger4",
+        "description": "禁用",
+        "value": {
+          "light": "rgb(var(--o-red-3))",
+          "dark": "rgb(var(--o-red-3))"
+        }
+      },
+      {
+        "key": "color-danger1-light",
+        "description": "常规-浅",
+        "value": {
+          "light": "rgb(var(--o-red-2))",
+          "dark": "rgb(var(--o-red-2))"
+        }
+      },
+      {
+        "key": "color-danger2-light",
+        "description": "悬浮-浅",
+        "value": {
+          "light": "rgb(var(--o-red-3))",
+          "dark": "rgb(var(--o-red-3))"
+        }
+      },
+      {
+        "key": "color-danger3-light",
+        "description": "激活-浅",
+        "value": {
+          "light": "rgb(var(--o-red-4))",
+          "dark": "rgb(var(--o-red-4))"
+        }
+      },
+      {
+        "key": "color-danger4-light",
+        "description": "禁用-浅",
+        "value": {
+          "light": "rgb(var(--o-red-1))",
+          "dark": "rgb(var(--o-red-1))"
+        }
+      }
+    ]
+  },
+  "fill": {
+    "name": "填充色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-fill1",
+        "description": "一级填充：页面背景",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-2))",
+          "dark": "rgb(var(--o-mixedgray-3))"
+        }
+      },
+      {
+        "key": "color-fill2",
+        "description": "二级填充：区块/卡片",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-1))",
+          "dark": "rgb(var(--o-mixedgray-4))"
+        }
+      },
+      {
+        "key": "color-fill3",
+        "description": "三级填充：卡片",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-3))",
+          "dark": "rgb(var(--o-mixedgray-5))"
+        }
+      }
+    ]
+  },
+  "control": {
+    "name": "控件色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-control1",
+        "description": "常规，常用于边框",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-10), 0.25)",
+          "dark": "rgba(var(--o-mixedgray-10), 0.25)"
+        }
+      },
+      {
+        "key": "color-control2",
+        "description": "悬浮，常用于边框",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-10), 0.6)",
+          "dark": "rgba(var(--o-mixedgray-10), 0.6)"
+        }
+      },
+      {
+        "key": "color-control3",
+        "description": "激活，常用于边框",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-10), 0.8)",
+          "dark": "rgba(var(--o-mixedgray-10), 0.8)"
+        }
+      },
+      {
+        "key": "color-control4",
+        "description": "禁用，常用于边框",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-10), 0.1)",
+          "dark": "rgba(var(--o-mixedgray-10), 0.15)"
+        }
+      },
+      {
+        "key": "color-control1-light",
+        "description": "常规-浅，常用于背景",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-5), 1.0)",
+          "dark": "rgb(var(--o-mixedgray-7), 1.0)"
+        }
+      },
+      {
+        "key": "color-control2-light",
+        "description": "悬浮-浅，常用于背景",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-3), 1)",
+          "dark": "rgb(var(--o-mixedgray-5), 1)"
+        }
+      },
+      {
+        "key": "color-control3-light",
+        "description": "激活-浅，常用于背景",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-4), 1)",
+          "dark": "rgb(var(--o-mixedgray-6), 1)"
+        }
+      },
+      {
+        "key": "color-control4-light",
+        "description": "禁用-浅，常用于背景",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-3), 1)",
+          "dark": "rgb(var(--o-mixedgray-5), 1)"
+        }
+      },
+      {
+        "key": "color-control-light",
+        "description": "很浅，常用于表格背景色",
+        "value": {
+          "light": "rgb(var(--o-mixedgray-1), 1.0)",
+          "dark": "rgb(var(--o-mixedgray-4), 1.0)"
+        }
+      }
+    ]
+  },
+  "info": {
+    "name": "信息色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-info1",
+        "description": "一级/强调/标题",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-14), 1.0)",
+          "dark": "rgba(var(--o-mixedgray-14), 1.0)"
+        }
+      },
+      {
+        "key": "color-info2",
+        "description": "二级/次强调/正文",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-14), 0.8)",
+          "dark": "rgba(var(--o-mixedgray-14), 0.8)"
+        }
+      },
+      {
+        "key": "color-info3",
+        "description": "三级/辅助信息",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-14), 0.6)",
+          "dark": "rgba(var(--o-mixedgray-14), 0.6)"
+        }
+      },
+      {
+        "key": "color-info4",
+        "description": "置灰/禁用",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-14), 0.4)",
+          "dark": "rgba(var(--o-mixedgray-14), 0.4)"
+        }
+      },
+      {
+        "key": "color-info1-inverse",
+        "description": "一级/次强调/正文反色",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-1), 1.0)",
+          "dark": "rgba(var(--o-mixedgray-1), 1.0)"
+        }
+      },
+      {
+        "key": "color-info2-inverse",
+        "description": "二级/辅助信息反色",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-1), 0.8)",
+          "dark": "rgba(var(--o-mixedgray-1), 0.8)"
+        }
+      },
+      {
+        "key": "color-info3-inverse",
+        "description": "三级/辅助信息反色",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-1), 0.6)",
+          "dark": "rgba(var(--o-mixedgray-1), 0.6)"
+        }
+      },
+      {
+        "key": "color-info4-inverse",
+        "description": "置灰/禁用反色",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-1), 0.4)",
+          "dark": "rgba(var(--o-mixedgray-1), 0.4)"
+        }
+      }
+    ]
+  },
+  "mask": {
+    "name": "遮罩色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-mask1",
+        "description": "全局遮罩",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-14), 0.4)",
+          "dark": "rgba(var(--o-mixedgray-14), 0.4)"
+        }
+      },
+      {
+        "key": "color-mask2",
+        "description": "局部遮罩",
+        "value": {
+          "light": "rgba(var(--o-mixedgray-1), 0.2)",
+          "dark": "rgba(var(--o-mixedgray-4), 0.2)"
+        }
+      }
+    ]
+  },
+  "link": {
+    "name": "链接色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-link1",
+        "description": "常规",
+        "value": {
+          "light": "rgba(var(--o-kleinblue-6))",
+          "dark": "rgba(var(--o-kleinblue-5))"
+        }
+      },
+      {
+        "key": "color-link2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgba(var(--o-kleinblue-4))",
+          "dark": "rgba(var(--o-kleinblue-4))"
+        }
+      },
+      {
+        "key": "color-link3",
+        "description": "激活",
+        "value": {
+          "light": "rgba(var(--o-kleinblue-7))",
+          "dark": "rgba(var(--o-kleinblue-7))"
+        }
+      },
+      {
+        "key": "color-link4",
+        "description": "禁用",
+        "value": {
+          "light": "rgba(var(--o-kleinblue-3))",
+          "dark": "rgba(var(--o-kleinblue-3))"
+        }
+      }
+    ]
+  },
+
+  "shadow": {
+    "name": "阴影",
+    "type": "shadow",
+    "typeName": "阴影",
+    "value": [
+      {
+        "key": "shadow-1",
+        "name": "阴影1",
+        "description": "用于卡片、小弹窗、楼层阴影",
+        "value": {
+          "light": "0 3px 8px rgba(var(--o-mixedgray-9), 0.08)",
+          "dark": "0 3px 8px rgba(var(--o-mixedgray-1), 0.08)"
+        }
+      },
+      {
+        "key": "shadow-2",
+        "name": "阴影2",
+        "description": "用于卡片悬浮阴影",
+        "value": {
+          "light": "0 2px 24px rgba(var(--o-mixedgray-9), 0.15)",
+          "dark": "0 2px 24px rgba(var(--o-mixedgray-1), 0.15)"
+        }
+      },
+      {
+        "key": "shadow-3",
+        "name": "阴影3",
+        "description": "用于提示阴影",
+        "value": {
+          "light": "0 8px 40px rgba(var(--o-mixedgray-9), 0.1)",
+          "dark": "0 8px 40px rgba(var(--o-mixedgray-1), 0.1)"
+        }
+      }
+    ]
+  },
+
+  "gap": {
+    "name": "间距",
+    "type": "gap",
+    "typeName": "间距",
+    "value": [
+      {
+        "key": "gap-1",
+        "name": "间距1",
+        "description": "用于组件之间的间距1",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "gap-2",
+        "name": "间距2",
+        "description": "用于组件之间的间距2",
+        "value": {
+          "light": "8px",
+          "dark": "8px"
+        }
+      },
+      {
+        "key": "gap-3",
+        "name": "间距3",
+        "description": "用于组件之间的间距3",
+        "value": {
+          "light": "12px",
+          "dark": "12px"
+        }
+      },
+      {
+        "key": "gap-4",
+        "name": "间距4",
+        "description": "用于组件之间的间距4",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "gap-5",
+        "name": "间距5",
+        "description": "用于组件之间的间距5",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "gap-6",
+        "name": "间距6",
+        "description": "用于组件之间的间距6",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "gap-7",
+        "name": "间距7",
+        "description": "用于组件之间的间距7",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      },
+      {
+        "key": "gap-8",
+        "name": "间距8",
+        "description": "用于组件之间的间距8",
+        "value": {
+          "light": "48px",
+          "dark": "48px"
+        }
+      },
+      {
+        "key": "gap-9",
+        "name": "间距9",
+        "description": "用于组件之间的间距9",
+        "value": {
+          "light": "64px",
+          "dark": "64px"
+        }
+      },
+      {
+        "key": "gap-10",
+        "name": "间距10",
+        "description": "用于组件之间的间距10",
+        "value": {
+          "light": "72px",
+          "dark": "72px"
+        }
+      }
+    ]
+  },
+
+  "control_size": {
+    "name": "组件尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "control_size-2xs",
+        "name": "超小尺寸",
+        "description": "超小尺寸",
+        "value": {
+          "light": "14px",
+          "dark": "14px"
+        }
+      },
+      {
+        "key": "control_size-xs",
+        "name": "小尺寸",
+        "description": "小尺寸",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "control_size-s",
+        "name": "小尺寸",
+        "description": "小尺寸",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "control_size-m",
+        "name": "中尺寸",
+        "description": "尺寸",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "control_size-l",
+        "name": "大尺寸",
+        "description": "尺寸",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      },
+      {
+        "key": "control_size-xl",
+        "name": "大尺寸",
+        "description": "尺寸",
+        "value": {
+          "light": "48px",
+          "dark": "48px"
+        }
+      },
+      {
+        "key": "control_size-2xl",
+        "name": "大尺寸",
+        "description": "尺寸",
+        "value": {
+          "light": "56px",
+          "dark": "56px"
+        }
+      }
+    ]
+  },
+
+  "icon_size": {
+    "name": "图标尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "icon_size-xs",
+        "name": "超小尺寸图标",
+        "description": "超小尺寸图标",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "icon_size-s",
+        "name": "小尺寸图标",
+        "description": "小尺寸图标",
+        "value": {
+          "light": "20px",
+          "dark": "20px"
+        }
+      },
+      {
+        "key": "icon_size-m",
+        "name": "中尺寸图标",
+        "description": "中尺寸图标",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "icon_size-l",
+        "name": "大尺寸图标",
+        "description": "大尺寸图标",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "icon_size-xl",
+        "name": "超大尺寸图标",
+        "description": "超大尺寸图标",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      },
+      {
+        "key": "icon_size-2xl",
+        "name": "2xl尺寸图标",
+        "description": "2xl尺寸图标",
+        "value": {
+          "light": "48px",
+          "dark": "48px"
+        }
+      },
+      {
+        "key": "icon_size-3xl",
+        "name": "3xl尺寸图标",
+        "description": "3xl尺寸图标",
+        "value": {
+          "light": "56px",
+          "dark": "56px"
+        }
+      },
+      {
+        "key": "icon_size-4xl",
+        "name": "4xl尺寸图标",
+        "description": "4xl尺寸图标",
+        "value": {
+          "light": "64px",
+          "dark": "64px"
+        }
+      }
+    ]
+  },
+  "icon_size_control": {
+    "name": "组件图标尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "icon_size_control-xs",
+        "name": "超小尺寸图标",
+        "description": "超小尺寸控件图标(组件使用)",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "icon_size_control-s",
+        "name": "小尺寸图标",
+        "description": "小尺寸控件图标(组件使用)",
+        "value": {
+          "light": "20px",
+          "dark": "20px"
+        }
+      },
+      {
+        "key": "icon_size_control-m",
+        "name": "中尺寸图标",
+        "description": "中尺寸控件图标(组件使用)",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "icon_size_control-l",
+        "name": "大尺寸图标",
+        "description": "大尺寸控件图标(组件使用)",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "icon_size_control-xl",
+        "name": "超大尺寸图标",
+        "description": "超大尺寸控件图标(组件使用)",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      }
+    ]
+  },
+
+  "font_size": {
+    "name": "字体尺寸",
+    "type": "font",
+    "typeName": "字体",
+    "value": [
+      {
+        "key": "font_size-display1",
+        "name": "一级数据展示",
+        "description": "一级数据展示",
+        "value": {
+          "light": "56px",
+          "dark": "56px"
+        }
+      },
+      {
+        "key": "font_size-display2",
+        "name": "二级数据展示",
+        "description": "二级数据展示",
+        "value": {
+          "light": "48px",
+          "dark": "48px"
+        }
+      },
+      {
+        "key": "font_size-display3",
+        "name": "三级数据展示",
+        "description": "三级数据展示",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      },
+      {
+        "key": "font_size-h1",
+        "name": "一级标题",
+        "description": "一级标题",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "font_size-h2",
+        "name": "二级标题",
+        "description": "二级标题",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "font_size-h3",
+        "name": "三级标题",
+        "description": "三级标题",
+        "value": {
+          "light": "22px",
+          "dark": "22px"
+        }
+      },
+      {
+        "key": "font_size-h4",
+        "name": "四级标题",
+        "description": "四级标题",
+        "value": {
+          "light": "20px",
+          "dark": "20px"
+        }
+      },
+      {
+        "key": "font_size-text1",
+        "name": "常规正文",
+        "description": "常规正文",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "font_size-text2",
+        "name": "大号正文",
+        "description": "大号正文",
+        "value": {
+          "light": "18px",
+          "dark": "18px"
+        }
+      },
+      {
+        "key": "font_size-tip1",
+        "name": "提示文本1",
+        "description": "提示文本1",
+        "value": {
+          "light": "14px",
+          "dark": "14px"
+        }
+      },
+      {
+        "key": "font_size-tip2",
+        "name": "提示文本2",
+        "description": "提示文本2",
+        "value": {
+          "light": "12px",
+          "dark": "12px"
+        }
+      }
+    ]
+  },
+  "line_height": {
+    "name": "字体行高",
+    "type": "font",
+    "typeName": "字体",
+    "value": [
+      {
+        "key": "line_height-display1",
+        "name": "一级数据展示",
+        "description": "一级数据展示",
+        "value": {
+          "light": "80px",
+          "dark": "80px"
+        }
+      },
+      {
+        "key": "line_height-display2",
+        "name": "二级数据展示",
+        "description": "二级数据展示",
+        "value": {
+          "light": "64px",
+          "dark": "64px"
+        }
+      },
+      {
+        "key": "line_height-display3",
+        "name": "三级数据展示",
+        "description": "三级数据展示",
+        "value": {
+          "light": "56px",
+          "dark": "56px"
+        }
+      },
+      {
+        "key": "line_height-h1",
+        "name": "一级标题",
+        "description": "一级标题",
+        "value": {
+          "light": "44px",
+          "dark": "44px"
+        }
+      },
+      {
+        "key": "line_height-h2",
+        "name": "二级标题",
+        "description": "二级标题",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "line_height-h3",
+        "name": "三级标题",
+        "description": "三级标题",
+        "value": {
+          "light": "30px",
+          "dark": "30px"
+        }
+      },
+      {
+        "key": "line_height-h4",
+        "name": "四级标题",
+        "description": "四级标题",
+        "value": {
+          "light": "28px",
+          "dark": "28px"
+        }
+      },
+      {
+        "key": "line_height-text1",
+        "name": "正文",
+        "description": "正文",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "line_height-text2",
+        "name": "正文-大",
+        "description": "正文-大",
+        "value": {
+          "light": "26px",
+          "dark": "26x"
+        }
+      },
+      {
+        "key": "line_height-tip1",
+        "name": "提示文本1",
+        "description": "提示文本1",
+        "value": {
+          "light": "22px",
+          "dark": "22px"
+        }
+      },
+      {
+        "key": "line_height-tip2",
+        "name": "提示文本2",
+        "description": "提示文本2",
+        "value": {
+          "light": "18px",
+          "dark": "18px"
+        }
+      }
+    ]
+  },
+
+  "radius": {
+    "name": "圆角尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "radius-xs",
+        "name": "超小尺寸圆角",
+        "description": "超小尺寸圆角",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "radius-s",
+        "name": "小尺寸圆角",
+        "description": "小尺寸圆角",
+        "value": {
+          "light": "8px",
+          "dark": "8px"
+        }
+      },
+      {
+        "key": "radius-m",
+        "name": "中尺寸圆角",
+        "description": "中尺寸圆角",
+        "value": {
+          "light": "12px",
+          "dark": "12px"
+        }
+      },
+      {
+        "key": "radius-l",
+        "name": "大尺寸圆角",
+        "description": "大尺寸圆角",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "radius-xl",
+        "name": "大尺寸圆角",
+        "description": "大尺寸圆角,一般用于卡片",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      }
+    ]
+  },
+  "radius_control": {
+    "name": "组件圆角尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "radius_control-xs",
+        "name": "超小尺寸控件圆角",
+        "description": "超小尺寸控件圆角(组件使用)",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "radius_control-s",
+        "name": "小尺寸控件圆角",
+        "description": "小尺寸控件圆角(组件使用)",
+        "value": {
+          "light": "8px",
+          "dark": "8px"
+        }
+      },
+      {
+        "key": "radius_control-m",
+        "name": "中尺寸控件圆角",
+        "description": "中尺寸控件圆角(组件使用)",
+        "value": {
+          "light": "12px",
+          "dark": "12px"
+        }
+      },
+      {
+        "key": "radius_control-l",
+        "name": "大尺寸控件圆角",
+        "description": "大尺寸控件圆角(组件使用)",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      }
+    ]
+  },
+
+  "duration": {
+    "name": "动画持续时间",
+    "type": "animation",
+    "typeName": "动画",
+    "value": [
+      {
+        "key": "duration-s",
+        "name": "持续时间",
+        "description": "用于退出屏幕的动画",
+        "value": {
+          "light": "200ms",
+          "dark": "200ms"
+        }
+      },
+      {
+        "key": "duration-m1",
+        "name": "持续时间",
+        "description": "用于当曲线为standard-in时进入屏幕的动画",
+        "value": {
+          "light": "250ms",
+          "dark": "250ms"
+        }
+      },
+      {
+        "key": "duration-m2",
+        "name": "持续时间",
+        "description": "用于当曲线为standard时开始、结束的动画",
+        "value": {
+          "light": "300ms",
+          "dark": "300ms"
+        }
+      },
+      {
+        "key": "duration-m3",
+        "name": "持续时间",
+        "description": "用于当曲线为emphasized-in时进入屏幕的动画",
+        "value": {
+          "light": "400ms",
+          "dark": "400ms"
+        }
+      },
+      {
+        "key": "duration-l",
+        "name": "持续时间",
+        "description": "用于当曲线为emphasized时开始、结束的动画",
+        "value": {
+          "light": "500ms",
+          "dark": "500ms"
+        }
+      },
+      {
+        "key": "duration-xl",
+        "name": "持续时间",
+        "description": "用于当曲线为emphasized时，轮播切换动画",
+        "value": {
+          "light": "1000ms",
+          "dark": "1000ms"
+        }
+      }
+    ]
+  },
+
+  "easing": {
+    "name": "动画曲线",
+    "type": "animation",
+    "typeName": "动画",
+    "value": [
+      {
+        "key": "easing-linear",
+        "name": "线性动画曲线",
+        "description": "线性曲线",
+        "value": {
+          "light": "cubic-bezier(0, 0, 1, 1)",
+          "dark": "cubic-bezier(0, 0, 1, 1)"
+        }
+      },
+      {
+        "key": "easing-standard",
+        "name": "动画曲线",
+        "description": "用于组件",
+        "value": {
+          "light": "cubic-bezier(0.2, 0, 0, 1)",
+          "dark": "cubic-bezier(0.2, 0, 0, 1)"
+        }
+      },
+      {
+        "key": "easing-standard-in",
+        "name": "动画曲线",
+        "description": "用于组件",
+        "value": {
+          "light": "cubic-bezier(0, 0, 0, 1)",
+          "dark": "cubic-bezier(0, 0, 0, 1)"
+        }
+      },
+      {
+        "key": "easing-standard-out",
+        "name": "动画曲线",
+        "description": "用于组件",
+        "value": {
+          "light": "cubic-bezier(0.3, 0, 1, 1)",
+          "dark": "cubic-bezier(0.3, 0, 1, 1)"
+        }
+      },
+      {
+        "key": "easing-emphasized",
+        "name": "动画曲线",
+        "description": "用于大卡片、场景切换",
+        "value": {
+          "light": "cubic-bezier(0.2, 0, 0, 1)",
+          "dark": "cubic-bezier(0.2, 0, 0, 1)"
+        }
+      },
+      {
+        "key": "easing-emphasized-in",
+        "name": "动画曲线",
+        "description": "用于大卡片、场景切换",
+        "value": {
+          "light": "cubic-bezier(0.3, 0, 0.8, 0.15)",
+          "dark": "cubic-bezier(0.3, 0, 0.8, 0.15)"
+        }
+      },
+      {
+        "key": "easing-emphasized-out",
+        "name": "动画曲线",
+        "description": "用于大卡片、场景切换",
+        "value": {
+          "light": "cubic-bezier(0.05, 0.7, 0.1, 1)",
+          "dark": "cubic-bezier(0.05, 0.7, 0.1, 1)"
+        }
+      }
+    ]
+  }
+}
diff --git a/packages/opendesign/src/theme/openeuler/e.dark.token.css b/packages/opendesign/src/theme/openeuler/e.dark.token.css
new file mode 100644
index 0000000000000000000000000000000000000000..a56c13c3a1994a7ed370fe16195d6e109e88bccc
--- /dev/null
+++ b/packages/opendesign/src/theme/openeuler/e.dark.token.css
@@ -0,0 +1,2201 @@
+/* theme: e.dark */
+[data-o-theme="e.dark"] {
+  /**
+   * @name 
+   * @type palette
+   * @group white
+   * @description 
+   */
+  --o-white: 255, 255, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group black
+   * @description 
+   */
+  --o-black: 0, 0, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-1: 0, 0, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-2: 18, 18, 20;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-3: 26, 26, 28;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-4: 36, 36, 39;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-5: 43, 43, 47;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-6: 53, 53, 57;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-7: 63, 63, 67;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-8: 85, 85, 88;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-9: 118, 118, 122;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-10: 156, 156, 159;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-11: 181, 181, 185;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-12: 208, 208, 210;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-13: 235, 235, 238;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-14: 255, 255, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group kleinblue
+   * @description 
+   */
+  --o-kleinblue-1: 14, 26, 69;
+  /**
+   * @name 
+   * @type palette
+   * @group kleinblue
+   * @description 
+   */
+  --o-kleinblue-2: 18, 34, 87;
+  /**
+   * @name 
+   * @type palette
+   * @group kleinblue
+   * @description 
+   */
+  --o-kleinblue-3: 29, 51, 119;
+  /**
+   * @name 
+   * @type palette
+   * @group kleinblue
+   * @description 
+   */
+  --o-kleinblue-4: 42, 72, 158;
+  /**
+   * @name 
+   * @type palette
+   * @group kleinblue
+   * @description 
+   */
+  --o-kleinblue-5: 57, 97, 202;
+  /**
+   * @name 
+   * @type palette
+   * @group kleinblue
+   * @description 
+   */
+  --o-kleinblue-6: 73, 122, 248;
+  /**
+   * @name 
+   * @type palette
+   * @group kleinblue
+   * @description 
+   */
+  --o-kleinblue-7: 110, 148, 243;
+  /**
+   * @name 
+   * @type palette
+   * @group kleinblue
+   * @description 
+   */
+  --o-kleinblue-8: 140, 171, 234;
+  /**
+   * @name 
+   * @type palette
+   * @group kleinblue
+   * @description 
+   */
+  --o-kleinblue-9: 176, 199, 241;
+  /**
+   * @name 
+   * @type palette
+   * @group kleinblue
+   * @description 
+   */
+  --o-kleinblue-10: 215, 227, 248;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-1: 81, 46, 9;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-2: 121, 75, 15;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-3: 161, 107, 22;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-4: 202, 143, 30;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-5: 242, 183, 38;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-6: 245, 202, 80;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-7: 247, 219, 122;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-8: 250, 234, 166;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-9: 252, 246, 210;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-10: 254, 251, 237;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-1: 77, 24, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-2: 120, 42, 1;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-3: 163, 68, 8;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-4: 207, 97, 19;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-5: 250, 130, 33;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-6: 251, 143, 43;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-7: 252, 174, 91;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-8: 253, 202, 139;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-9: 254, 227, 188;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-10: 255, 248, 237;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-1: 77, 0, 17;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-2: 115, 3, 24;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-3: 153, 9, 31;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-4: 192, 17, 37;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-5: 230, 28, 43;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-6: 235, 35, 45;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-7: 240, 82, 85;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-8: 245, 132, 130;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-9: 250, 183, 180;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-10: 255, 234, 232;
+  /**
+   * @name 
+   * @type palette
+   * @group huaweired
+   * @description 
+   */
+  --o-red-huawei: 199, 0, 11;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-1: 0, 77, 42;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-2: 2, 102, 53;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-3: 10, 127, 66;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-4: 22, 152, 80;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-5: 36, 177, 95;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-6: 51, 193, 104;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-7: 90, 208, 131;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-8: 135, 224, 163;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-9: 185, 239, 200;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-10: 240, 255, 244;
+  /**
+   * @name 
+   * @type palette
+   * @group amber
+   * @description 
+   */
+  --o-amber-1: 77, 30, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group amber
+   * @description 
+   */
+  --o-amber-2: 116, 51, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group amber
+   * @description 
+   */
+  --o-amber-3: 154, 76, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group amber
+   * @description 
+   */
+  --o-amber-4: 193, 105, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group amber
+   * @description 
+   */
+  --o-amber-5: 231, 137, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group amber
+   * @description 
+   */
+  --o-amber-6: 236, 165, 47;
+  /**
+   * @name 
+   * @type palette
+   * @group amber
+   * @description 
+   */
+  --o-amber-7: 241, 191, 96;
+  /**
+   * @name 
+   * @type palette
+   * @group amber
+   * @description 
+   */
+  --o-amber-8: 245, 215, 147;
+  /**
+   * @name 
+   * @type palette
+   * @group amber
+   * @description 
+   */
+  --o-amber-9: 250, 237, 200;
+  /**
+   * @name 
+   * @type palette
+   * @group amber
+   * @description 
+   */
+  --o-amber-10: 253, 247, 232;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-1: 51, 67, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-2: 78, 101, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-3: 107, 134, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-4: 134, 168, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-5: 167, 201, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-6: 177, 212, 42;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-7: 191, 223, 89;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-8: 208, 233, 140;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-9: 229, 244, 195;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-10: 243, 250, 230;
+  /**
+   * @name 
+   * @type palette
+   * @group light-green
+   * @description 
+   */
+  --o-light-green-1: 33, 60, 7;
+  /**
+   * @name 
+   * @type palette
+   * @group light-green
+   * @description 
+   */
+  --o-light-green-2: 51, 90, 11;
+  /**
+   * @name 
+   * @type palette
+   * @group light-green
+   * @description 
+   */
+  --o-light-green-3: 70, 119, 16;
+  /**
+   * @name 
+   * @type palette
+   * @group light-green
+   * @description 
+   */
+  --o-light-green-4: 91, 149, 21;
+  /**
+   * @name 
+   * @type palette
+   * @group light-green
+   * @description 
+   */
+  --o-light-green-5: 112, 179, 27;
+  /**
+   * @name 
+   * @type palette
+   * @group light-green
+   * @description 
+   */
+  --o-light-green-6: 184, 220, 48;
+  /**
+   * @name 
+   * @type palette
+   * @group light-green
+   * @description 
+   */
+  --o-light-green-7: 166, 209, 103;
+  /**
+   * @name 
+   * @type palette
+   * @group light-green
+   * @description 
+   */
+  --o-light-green-8: 195, 225, 148;
+  /**
+   * @name 
+   * @type palette
+   * @group light-green
+   * @description 
+   */
+  --o-light-green-9: 225, 240, 199;
+  /**
+   * @name 
+   * @type palette
+   * @group light-green
+   * @description 
+   */
+  --o-light-green-10: 242, 247, 231;
+  /**
+   * @name 
+   * @type palette
+   * @group teal
+   * @description 
+   */
+  --o-teal-1: 0, 60, 48;
+  /**
+   * @name 
+   * @type palette
+   * @group teal
+   * @description 
+   */
+  --o-teal-2: 0, 90, 71;
+  /**
+   * @name 
+   * @type palette
+   * @group teal
+   * @description 
+   */
+  --o-teal-3: 0, 119, 93;
+  /**
+   * @name 
+   * @type palette
+   * @group teal
+   * @description 
+   */
+  --o-teal-4: 0, 149, 113;
+  /**
+   * @name 
+   * @type palette
+   * @group teal
+   * @description 
+   */
+  --o-teal-5: 0, 179, 133;
+  /**
+   * @name 
+   * @type palette
+   * @group teal
+   * @description 
+   */
+  --o-teal-6: 39, 194, 152;
+  /**
+   * @name 
+   * @type palette
+   * @group teal
+   * @description 
+   */
+  --o-teal-7: 84, 209, 173;
+  /**
+   * @name 
+   * @type palette
+   * @group teal
+   * @description 
+   */
+  --o-teal-8: 135, 225, 197;
+  /**
+   * @name 
+   * @type palette
+   * @group teal
+   * @description 
+   */
+  --o-teal-9: 192, 240, 224;
+  /**
+   * @name 
+   * @type palette
+   * @group teal
+   * @description 
+   */
+  --o-teal-10: 228, 247, 241;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-1: 0, 52, 60;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-2: 0, 79, 90;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-3: 0, 107, 119;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-4: 0, 137, 149;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-5: 39, 186, 194;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-6: 84, 205, 209;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-7: 92, 208, 212;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-8: 135, 223, 225;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-9: 192, 240, 240;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-10: 228, 247, 247;
+  /**
+   * @name 
+   * @type palette
+   * @group light-blue
+   * @description 
+   */
+  --o-light-blue-1: 0, 47, 76;
+  /**
+   * @name 
+   * @type palette
+   * @group light-blue
+   * @description 
+   */
+  --o-light-blue-2: 0, 72, 115;
+  /**
+   * @name 
+   * @type palette
+   * @group light-blue
+   * @description 
+   */
+  --o-light-blue-3: 0, 99, 153;
+  /**
+   * @name 
+   * @type palette
+   * @group light-blue
+   * @description 
+   */
+  --o-light-blue-4: 0, 127, 191;
+  /**
+   * @name 
+   * @type palette
+   * @group light-blue
+   * @description 
+   */
+  --o-light-blue-5: 0, 156, 229;
+  /**
+   * @name 
+   * @type palette
+   * @group light-blue
+   * @description 
+   */
+  --o-light-blue-6: 47, 178, 234;
+  /**
+   * @name 
+   * @type palette
+   * @group light-blue
+   * @description 
+   */
+  --o-light-blue-7: 96, 198, 239;
+  /**
+   * @name 
+   * @type palette
+   * @group light-blue
+   * @description 
+   */
+  --o-light-blue-8: 147, 218, 245;
+  /**
+   * @name 
+   * @type palette
+   * @group light-blue
+   * @description 
+   */
+  --o-light-blue-9: 200, 237, 250;
+  /**
+   * @name 
+   * @type palette
+   * @group light-blue
+   * @description 
+   */
+  --o-light-blue-10: 232, 247, 252;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-1: 0, 43, 97;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-2: 0, 61, 133;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-3: 0, 80, 169;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-4: 0, 100, 204;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-5: 0, 122, 240;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-6: 49, 151, 243;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-7: 98, 178, 246;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-8: 149, 205, 249;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-9: 202, 231, 252;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-10: 233, 245, 254;
+  /**
+   * @name 
+   * @type palette
+   * @group indigo
+   * @description 
+   */
+  --o-indigo-1: 5, 19, 97;
+  /**
+   * @name 
+   * @type palette
+   * @group indigo
+   * @description 
+   */
+  --o-indigo-2: 10, 28, 118;
+  /**
+   * @name 
+   * @type palette
+   * @group indigo
+   * @description 
+   */
+  --o-indigo-3: 16, 38, 138;
+  /**
+   * @name 
+   * @type palette
+   * @group indigo
+   * @description 
+   */
+  --o-indigo-4: 23, 50, 159;
+  /**
+   * @name 
+   * @type palette
+   * @group indigo
+   * @description 
+   */
+  --o-indigo-5: 31, 63, 179;
+  /**
+   * @name 
+   * @type palette
+   * @group indigo
+   * @description 
+   */
+  --o-indigo-6: 66, 96, 194;
+  /**
+   * @name 
+   * @type palette
+   * @group indigo
+   * @description 
+   */
+  --o-indigo-7: 106, 131, 209;
+  /**
+   * @name 
+   * @type palette
+   * @group indigo
+   * @description 
+   */
+  --o-indigo-8: 150, 170, 225;
+  /**
+   * @name 
+   * @type palette
+   * @group indigo
+   * @description 
+   */
+  --o-indigo-9: 200, 211, 240;
+  /**
+   * @name 
+   * @type palette
+   * @group indigo
+   * @description 
+   */
+  --o-indigo-10: 232, 236, 247;
+  /**
+   * @name 
+   * @type palette
+   * @group violet
+   * @description 
+   */
+  --o-violet-1: 34, 0, 109;
+  /**
+   * @name 
+   * @type palette
+   * @group violet
+   * @description 
+   */
+  --o-violet-2: 39, 2, 130;
+  /**
+   * @name 
+   * @type palette
+   * @group violet
+   * @description 
+   */
+  --o-violet-3: 46, 7, 150;
+  /**
+   * @name 
+   * @type palette
+   * @group violet
+   * @description 
+   */
+  --o-violet-4: 53, 13, 171;
+  /**
+   * @name 
+   * @type palette
+   * @group violet
+   * @description 
+   */
+  --o-violet-5: 61, 20, 191;
+  /**
+   * @name 
+   * @type palette
+   * @group violet
+   * @description 
+   */
+  --o-violet-6: 97, 62, 201;
+  /**
+   * @name 
+   * @type palette
+   * @group violet
+   * @description 
+   */
+  --o-violet-7: 150, 130, 223;
+  /**
+   * @name 
+   * @type palette
+   * @group violet
+   * @description 
+   */
+  --o-violet-8: 182, 169, 233;
+  /**
+   * @name 
+   * @type palette
+   * @group violet
+   * @description 
+   */
+  --o-violet-9: 217, 210, 244;
+  /**
+   * @name 
+   * @type palette
+   * @group violet
+   * @description 
+   */
+  --o-violet-10: 240, 237, 250;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-1: 60, 0, 97;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-2: 77, 0, 118;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-3: 95, 0, 138;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-4: 114, 0, 159;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-5: 135, 2, 179;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-6: 161, 41, 194;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-7: 187, 85, 209;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-8: 211, 136, 225;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-9: 234, 192, 240;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-10: 245, 228, 247;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-1: 81, 0, 51;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-2: 117, 0, 70;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-3: 153, 0, 86;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-4: 188, 0, 100;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-5: 224, 0, 112;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-6: 230, 46, 132;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-7: 236, 95, 156;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-8: 243, 146, 184;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-9: 249, 199, 217;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-10: 252, 232, 239;
+  /**
+   * @name 
+   * @type color
+   * @group base
+   * @description 
+   */
+  --o-color-white: rgb(var(--o-white));
+  /**
+   * @name 
+   * @type color
+   * @group base
+   * @description 
+   */
+  --o-color-black: rgb(var(--o-black));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 常规
+   */
+  --o-color-primary1: rgb(var(--o-kleinblue-6));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 悬浮
+   */
+  --o-color-primary2: rgb(var(--o-kleinblue-5));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 激活
+   */
+  --o-color-primary3: rgb(var(--o-kleinblue-7));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 禁用
+   */
+  --o-color-primary4: rgb(var(--o-kleinblue-4));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 常规-浅
+   */
+  --o-color-primary1-light: rgb(var(--o-kleinblue-2));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 悬浮-浅
+   */
+  --o-color-primary2-light: rgb(var(--o-kleinblue-3));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 激活-浅
+   */
+  --o-color-primary3-light: rgb(var(--o-kleinblue-4));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 禁用-浅
+   */
+  --o-color-primary4-light: rgb(var(--o-kleinblue-1));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 常规
+   */
+  --o-color-success1: rgb(var(--o-green-6));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 悬浮
+   */
+  --o-color-success2: rgb(var(--o-green-4));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 激活
+   */
+  --o-color-success3: rgb(var(--o-green-7));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 禁用
+   */
+  --o-color-success4: rgb(var(--o-green-3));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 常规-浅
+   */
+  --o-color-success1-light: rgb(var(--o-green-2));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 悬浮-浅
+   */
+  --o-color-success2-light: rgb(var(--o-green-3));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 激活-浅
+   */
+  --o-color-success3-light: rgb(var(--o-green-4));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 禁用-浅
+   */
+  --o-color-success4-light: rgb(var(--o-green-1));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 常规
+   */
+  --o-color-warning1: rgb(var(--o-orange-6));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 悬浮
+   */
+  --o-color-warning2: rgb(var(--o-orange-4));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 激活
+   */
+  --o-color-warning3: rgb(var(--o-orange-7));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 禁用
+   */
+  --o-color-warning4: rgb(var(--o-orange-3));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 常规-浅
+   */
+  --o-color-warning1-light: rgb(var(--o-orange-2));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 悬浮-浅
+   */
+  --o-color-warning2-light: rgb(var(--o-orange-3));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 激活-浅
+   */
+  --o-color-warning3-light: rgb(var(--o-orange-4));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 禁用-浅
+   */
+  --o-color-warning4-light: rgb(var(--o-orange-1));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 常规
+   */
+  --o-color-danger1: rgb(var(--o-red-6));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 悬浮
+   */
+  --o-color-danger2: rgb(var(--o-red-4));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 激活
+   */
+  --o-color-danger3: rgb(var(--o-red-7));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 禁用
+   */
+  --o-color-danger4: rgb(var(--o-red-3));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 常规-浅
+   */
+  --o-color-danger1-light: rgb(var(--o-red-2));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 悬浮-浅
+   */
+  --o-color-danger2-light: rgb(var(--o-red-3));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 激活-浅
+   */
+  --o-color-danger3-light: rgb(var(--o-red-4));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 禁用-浅
+   */
+  --o-color-danger4-light: rgb(var(--o-red-1));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 一级填充：页面背景
+   */
+  --o-color-fill1: rgb(var(--o-gray-3));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 二级填充：区块、卡片
+   */
+  --o-color-fill2: rgb(var(--o-gray-4));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 三级填充：卡片
+   */
+  --o-color-fill3: rgb(var(--o-gray-5));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 常规，常用于边框
+   */
+  --o-color-control1: rgba(var(--o-gray-14), 0.25);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 悬浮，常用于边框
+   */
+  --o-color-control2: rgba(var(--o-gray-14), 0.6);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 激活，常用于边框
+   */
+  --o-color-control3: rgba(var(--o-gray-14), 0.8);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 禁用，常用于边框
+   */
+  --o-color-control4: rgba(var(--o-gray-14), 0.15);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 常规-浅，常用于背景
+   */
+  --o-color-control1-light: rgb(var(--o-gray-7));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 悬浮-浅，常用于背景
+   */
+  --o-color-control2-light: rgb(var(--o-gray-5));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 激活-浅，常用于背景
+   */
+  --o-color-control3-light: rgb(var(--o-gray-6));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 禁用，常用于背景
+   */
+  --o-color-control4-light: rgb(var(--o-gray-5));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 很浅，常用于表格背景色
+   */
+  --o-color-control-light: rgb(var(--o-gray-4));
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 一级/强调/标题
+   */
+  --o-color-info1: rgba(var(--o-gray-14), 1.0);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 二级/次强调/正文
+   */
+  --o-color-info2: rgba(var(--o-gray-14), 0.8);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 三级/辅助信息
+   */
+  --o-color-info3: rgba(var(--o-gray-14), 0.6);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 置灰/禁用
+   */
+  --o-color-info4: rgba(var(--o-gray-14), 0.4);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 一级/次强调/正文反色
+   */
+  --o-color-info1-inverse: rgba(var(--o-gray-1), 1.0);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 二级/辅助信息反色
+   */
+  --o-color-info2-inverse: rgba(var(--o-gray-1), 0.8);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 三级/辅助信息反色
+   */
+  --o-color-info3-inverse: rgba(var(--o-gray-1), 0.6);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 置灰/禁用反色
+   */
+  --o-color-info4-inverse: rgba(var(--o-gray-1), 0.4);
+  /**
+   * @name 
+   * @type color
+   * @group mask
+   * @description 全局遮罩
+   */
+  --o-color-mask1: rgba(var(--o-gray-1), 0.4);
+  /**
+   * @name 
+   * @type color
+   * @group mask
+   * @description 局部遮罩
+   */
+  --o-color-mask2: rgba(var(--o-gray-4), 0.2);
+  /**
+   * @name 阴影1
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片、小弹窗、楼层阴影
+   */
+  --o-shadow-1: 0 3px 8px rgba(var(--o-gray-1), 0.08);
+  /**
+   * @name 阴影2
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片悬浮阴影
+   */
+  --o-shadow-2: 0 2px 24px rgba(var(--o-gray-1), 0.15);
+  /**
+   * @name 阴影3
+   * @type shadow
+   * @group shadow
+   * @description 用于提示阴影
+   */
+  --o-shadow-3: 0 8px 40px rgba(var(--o-gray-1), 0.1);
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 常规
+   */
+  --o-color-link1: rgb(var(--o-kleinblue-6));
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 悬浮
+   */
+  --o-color-link2: rgb(var(--o-kleinblue-5));
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 激活
+   */
+  --o-color-link3: rgb(var(--o-kleinblue-7));
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 禁用
+   */
+  --o-color-link4: rgb(var(--o-kleinblue-4));
+  /**
+   * @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: 48px;
+  /**
+   * @name 间距9
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距9
+   */
+  --o-gap-9: 64px;
+  /**
+   * @name 间距10
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距10
+   */
+  --o-gap-10: 72px;
+  /**
+   * @name 超小尺寸
+   * @type size
+   * @group control_size
+   * @description 超小尺寸
+   */
+  --o-control_size-2xs: 14px;
+  /**
+   * @name 小尺寸
+   * @type size
+   * @group control_size
+   * @description 小尺寸
+   */
+  --o-control_size-xs: 16px;
+  /**
+   * @name 小尺寸
+   * @type size
+   * @group control_size
+   * @description 小尺寸
+   */
+  --o-control_size-s: 24px;
+  /**
+   * @name 中尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-m: 32px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-l: 40px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-xl: 48px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-2xl: 56px;
+  /**
+   * @name 超小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 超小尺寸图标
+   */
+  --o-icon_size-xs: 16px;
+  /**
+   * @name 小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 小尺寸图标
+   */
+  --o-icon_size-s: 20px;
+  /**
+   * @name 中尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 中尺寸图标
+   */
+  --o-icon_size-m: 24px;
+  /**
+   * @name 大尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 大尺寸图标
+   */
+  --o-icon_size-l: 32px;
+  /**
+   * @name 超大尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 超大尺寸图标
+   */
+  --o-icon_size-xl: 40px;
+  /**
+   * @name 2xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 2xl尺寸图标
+   */
+  --o-icon_size-2xl: 48px;
+  /**
+   * @name 3xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 3xl尺寸图标
+   */
+  --o-icon_size-3xl: 56px;
+  /**
+   * @name 4xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 4xl尺寸图标
+   */
+  --o-icon_size-4xl: 64px;
+  /**
+   * @name 超小尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 超小尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-xs: 16px;
+  /**
+   * @name 小尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 小尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-s: 20px;
+  /**
+   * @name 中尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 中尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-m: 24px;
+  /**
+   * @name 大尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 大尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-l: 32px;
+  /**
+   * @name 超大尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 超大尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-xl: 40px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group font_size
+   * @description 一级数据展示
+   */
+  --o-font_size-display1: 56px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group font_size
+   * @description 二级数据展示
+   */
+  --o-font_size-display2: 48px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group font_size
+   * @description 三级数据展示
+   */
+  --o-font_size-display3: 40px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group font_size
+   * @description 一级标题
+   */
+  --o-font_size-h1: 32px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group font_size
+   * @description 二级标题
+   */
+  --o-font_size-h2: 24px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group font_size
+   * @description 三级标题
+   */
+  --o-font_size-h3: 22px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group font_size
+   * @description 四级标题
+   */
+  --o-font_size-h4: 20px;
+  /**
+   * @name 常规正文
+   * @type font
+   * @group font_size
+   * @description 常规正文
+   */
+  --o-font_size-text1: 16px;
+  /**
+   * @name 大号正文
+   * @type font
+   * @group font_size
+   * @description 大号正文
+   */
+  --o-font_size-text2: 18px;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group font_size
+   * @description 提示文本1
+   */
+  --o-font_size-tip1: 14px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group font_size
+   * @description 提示文本2
+   */
+  --o-font_size-tip2: 12px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group line_height
+   * @description 一级数据展示
+   */
+  --o-line_height-display1: 80px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group line_height
+   * @description 二级数据展示
+   */
+  --o-line_height-display2: 64px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group line_height
+   * @description 三级数据展示
+   */
+  --o-line_height-display3: 56px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group line_height
+   * @description 一级标题
+   */
+  --o-line_height-h1: 44px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group line_height
+   * @description 二级标题
+   */
+  --o-line_height-h2: 32px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group line_height
+   * @description 三级标题
+   */
+  --o-line_height-h3: 30px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group line_height
+   * @description 四级标题
+   */
+  --o-line_height-h4: 28px;
+  /**
+   * @name 正文
+   * @type font
+   * @group line_height
+   * @description 正文
+   */
+  --o-line_height-text1: 24px;
+  /**
+   * @name 正文-大
+   * @type font
+   * @group line_height
+   * @description 正文-大
+   */
+  --o-line_height-text2: 26x;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group line_height
+   * @description 提示文本1
+   */
+  --o-line_height-tip1: 22px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group line_height
+   * @description 提示文本2
+   */
+  --o-line_height-tip2: 18px;
+  /**
+   * @name 超小尺寸圆角
+   * @type size
+   * @group radius
+   * @description 超小尺寸圆角
+   */
+  --o-radius-xs: 4px;
+  /**
+   * @name 小尺寸圆角
+   * @type size
+   * @group radius
+   * @description 小尺寸圆角
+   */
+  --o-radius-s: 4px;
+  /**
+   * @name 中尺寸圆角
+   * @type size
+   * @group radius
+   * @description 中尺寸圆角
+   */
+  --o-radius-m: 4px;
+  /**
+   * @name 大尺寸圆角
+   * @type size
+   * @group radius
+   * @description 大尺寸圆角
+   */
+  --o-radius-l: 4px;
+  /**
+   * @name 大尺寸圆角
+   * @type size
+   * @group radius
+   * @description 大尺寸圆角,一般用于卡片
+   */
+  --o-radius-xl: 0px;
+  /**
+   * @name 超小尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 超小尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-xs: 4px;
+  /**
+   * @name 小尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 小尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-s: 4px;
+  /**
+   * @name 中尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 中尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-m: 4px;
+  /**
+   * @name 大尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 大尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-l: 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/theme/openeuler/e.light.token.css b/packages/opendesign/src/theme/openeuler/e.light.token.css
new file mode 100644
index 0000000000000000000000000000000000000000..ae7e59b9c7062c47bcd05af1ac7799e7f4a86978
--- /dev/null
+++ b/packages/opendesign/src/theme/openeuler/e.light.token.css
@@ -0,0 +1,2201 @@
+/* theme: e.light */
+[data-o-theme="e.light"] {
+  /**
+   * @name 
+   * @type palette
+   * @group white
+   * @description 
+   */
+  --o-white: 255, 255, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group black
+   * @description 
+   */
+  --o-black: 0, 0, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-1: 255, 255, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-2: 243, 243, 245;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-3: 237, 237, 240;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-4: 232, 232, 235;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-5: 222, 222, 227;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-6: 210, 210, 217;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-7: 186, 186, 191;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-8: 149, 149, 156;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-9: 111, 111, 117;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-10: 85, 85, 92;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-11: 61, 61, 66;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-12: 37, 37, 41;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-13: 21, 21, 23;
+  /**
+   * @name 
+   * @type palette
+   * @group gray
+   * @description 
+   */
+  --o-gray-14: 0, 0, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group kleinblue
+   * @description 
+   */
+  --o-kleinblue-1: 235, 241, 250;
+  /**
+   * @name 
+   * @type palette
+   * @group kleinblue
+   * @description 
+   */
+  --o-kleinblue-2: 206, 219, 245;
+  /**
+   * @name 
+   * @type palette
+   * @group kleinblue
+   * @description 
+   */
+  --o-kleinblue-3: 132, 161, 220;
+  /**
+   * @name 
+   * @type palette
+   * @group kleinblue
+   * @description 
+   */
+  --o-kleinblue-4: 81, 119, 202;
+  /**
+   * @name 
+   * @type palette
+   * @group kleinblue
+   * @description 
+   */
+  --o-kleinblue-5: 37, 81, 185;
+  /**
+   * @name 
+   * @type palette
+   * @group kleinblue
+   * @description 
+   */
+  --o-kleinblue-6: 0, 47, 167;
+  /**
+   * @name 
+   * @type palette
+   * @group kleinblue
+   * @description 
+   */
+  --o-kleinblue-7: 0, 39, 147;
+  /**
+   * @name 
+   * @type palette
+   * @group kleinblue
+   * @description 
+   */
+  --o-kleinblue-8: 0, 31, 126;
+  /**
+   * @name 
+   * @type palette
+   * @group kleinblue
+   * @description 
+   */
+  --o-kleinblue-9: 0, 24, 106;
+  /**
+   * @name 
+   * @type palette
+   * @group kleinblue
+   * @description 
+   */
+  --o-kleinblue-10: 0, 18, 85;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-1: 254, 252, 233;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-2: 252, 248, 202;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-3: 249, 237, 149;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-4: 246, 224, 98;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-5: 243, 207, 49;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-6: 240, 188, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-7: 200, 147, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-8: 160, 109, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-9: 120, 76, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group yellow
+   * @description 
+   */
+  --o-yellow-10: 80, 47, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-1: 255, 246, 232;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-2: 254, 226, 186;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-3: 253, 202, 140;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-4: 252, 176, 95;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-5: 251, 147, 50;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-6: 250, 115, 5;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-7: 207, 88, 3;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-8: 163, 64, 2;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-9: 120, 42, 1;
+  /**
+   * @name 
+   * @type palette
+   * @group orange
+   * @description 
+   */
+  --o-orange-10: 77, 24, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-1: 255, 234, 232;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-2: 250, 185, 182;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-3: 245, 136, 134;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-4: 240, 87, 90;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-5: 235, 43, 52;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-6: 230, 0, 18;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-7: 192, 0, 22;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-8: 153, 0, 23;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-9: 115, 0, 21;
+  /**
+   * @name 
+   * @type palette
+   * @group red
+   * @description 
+   */
+  --o-red-10: 77, 0, 17;
+  /**
+   * @name 
+   * @type palette
+   * @group huaweired
+   * @description 
+   */
+  --o-red-huawei: 199, 0, 11;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-1: 232, 255, 238;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-2: 177, 239, 195;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-3: 128, 224, 158;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-4: 84, 208, 127;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-5: 45, 193, 101;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-6: 11, 177, 81;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-7: 7, 152, 72;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-8: 4, 127, 63;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-9: 2, 102, 53;
+  /**
+   * @name 
+   * @type palette
+   * @group green
+   * @description 
+   */
+  --o-green-10: 0, 77, 42;
+  /**
+   * @name 
+   * @type palette
+   * @group amber
+   * @description 
+   */
+  --o-amber-1: 253, 247, 232;
+  /**
+   * @name 
+   * @type palette
+   * @group amber
+   * @description 
+   */
+  --o-amber-2: 250, 237, 200;
+  /**
+   * @name 
+   * @type palette
+   * @group amber
+   * @description 
+   */
+  --o-amber-3: 245, 215, 147;
+  /**
+   * @name 
+   * @type palette
+   * @group amber
+   * @description 
+   */
+  --o-amber-4: 241, 191, 96;
+  /**
+   * @name 
+   * @type palette
+   * @group amber
+   * @description 
+   */
+  --o-amber-5: 236, 165, 47;
+  /**
+   * @name 
+   * @type palette
+   * @group amber
+   * @description 
+   */
+  --o-amber-6: 231, 137, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group amber
+   * @description 
+   */
+  --o-amber-7: 193, 105, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group amber
+   * @description 
+   */
+  --o-amber-8: 154, 76, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group amber
+   * @description 
+   */
+  --o-amber-9: 116, 51, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group amber
+   * @description 
+   */
+  --o-amber-10: 77, 30, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-1: 243, 250, 230;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-2: 229, 244, 195;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-3: 208, 233, 140;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-4: 191, 223, 89;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-5: 177, 212, 42;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-6: 167, 201, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-7: 136, 168, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-8: 107, 134, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-9: 78, 101, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group lime
+   * @description 
+   */
+  --o-lime-10: 51, 67, 0;
+  /**
+   * @name 
+   * @type palette
+   * @group light-green
+   * @description 
+   */
+  --o-light-green-1: 242, 247, 231;
+  /**
+   * @name 
+   * @type palette
+   * @group light-green
+   * @description 
+   */
+  --o-light-green-2: 225, 240, 199;
+  /**
+   * @name 
+   * @type palette
+   * @group light-green
+   * @description 
+   */
+  --o-light-green-3: 195, 225, 148;
+  /**
+   * @name 
+   * @type palette
+   * @group light-green
+   * @description 
+   */
+  --o-light-green-4: 166, 209, 103;
+  /**
+   * @name 
+   * @type palette
+   * @group light-green
+   * @description 
+   */
+  --o-light-green-5: 138, 194, 62;
+  /**
+   * @name 
+   * @type palette
+   * @group light-green
+   * @description 
+   */
+  --o-light-green-6: 112, 179, 27;
+  /**
+   * @name 
+   * @type palette
+   * @group light-green
+   * @description 
+   */
+  --o-light-green-7: 91, 149, 21;
+  /**
+   * @name 
+   * @type palette
+   * @group light-green
+   * @description 
+   */
+  --o-light-green-8: 70, 119, 16;
+  /**
+   * @name 
+   * @type palette
+   * @group light-green
+   * @description 
+   */
+  --o-light-green-9: 51, 90, 11;
+  /**
+   * @name 
+   * @type palette
+   * @group light-green
+   * @description 
+   */
+  --o-light-green-10: 33, 60, 7;
+  /**
+   * @name 
+   * @type palette
+   * @group teal
+   * @description 
+   */
+  --o-teal-1: 228, 247, 241;
+  /**
+   * @name 
+   * @type palette
+   * @group teal
+   * @description 
+   */
+  --o-teal-2: 192, 240, 224;
+  /**
+   * @name 
+   * @type palette
+   * @group teal
+   * @description 
+   */
+  --o-teal-3: 135, 225, 197;
+  /**
+   * @name 
+   * @type palette
+   * @group teal
+   * @description 
+   */
+  --o-teal-4: 84, 209, 173;
+  /**
+   * @name 
+   * @type palette
+   * @group teal
+   * @description 
+   */
+  --o-teal-5: 39, 194, 152;
+  /**
+   * @name 
+   * @type palette
+   * @group teal
+   * @description 
+   */
+  --o-teal-6: 0, 179, 133;
+  /**
+   * @name 
+   * @type palette
+   * @group teal
+   * @description 
+   */
+  --o-teal-7: 0, 149, 113;
+  /**
+   * @name 
+   * @type palette
+   * @group teal
+   * @description 
+   */
+  --o-teal-8: 0, 119, 93;
+  /**
+   * @name 
+   * @type palette
+   * @group teal
+   * @description 
+   */
+  --o-teal-9: 0, 90, 71;
+  /**
+   * @name 
+   * @type palette
+   * @group teal
+   * @description 
+   */
+  --o-teal-10: 0, 60, 48;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-1: 228, 247, 247;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-2: 192, 240, 240;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-3: 135, 223, 225;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-4: 84, 205, 209;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-5: 39, 186, 194;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-6: 0, 167, 179;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-7: 0, 137, 149;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-8: 0, 107, 119;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-9: 0, 79, 90;
+  /**
+   * @name 
+   * @type palette
+   * @group cyan
+   * @description 
+   */
+  --o-cyan-10: 0, 52, 60;
+  /**
+   * @name 
+   * @type palette
+   * @group light-blue
+   * @description 
+   */
+  --o-light-blue-1: 232, 247, 252;
+  /**
+   * @name 
+   * @type palette
+   * @group light-blue
+   * @description 
+   */
+  --o-light-blue-2: 200, 237, 250;
+  /**
+   * @name 
+   * @type palette
+   * @group light-blue
+   * @description 
+   */
+  --o-light-blue-3: 147, 218, 245;
+  /**
+   * @name 
+   * @type palette
+   * @group light-blue
+   * @description 
+   */
+  --o-light-blue-4: 96, 198, 239;
+  /**
+   * @name 
+   * @type palette
+   * @group light-blue
+   * @description 
+   */
+  --o-light-blue-5: 47, 178, 234;
+  /**
+   * @name 
+   * @type palette
+   * @group light-blue
+   * @description 
+   */
+  --o-light-blue-6: 0, 156, 229;
+  /**
+   * @name 
+   * @type palette
+   * @group light-blue
+   * @description 
+   */
+  --o-light-blue-7: 0, 127, 191;
+  /**
+   * @name 
+   * @type palette
+   * @group light-blue
+   * @description 
+   */
+  --o-light-blue-8: 0, 99, 153;
+  /**
+   * @name 
+   * @type palette
+   * @group light-blue
+   * @description 
+   */
+  --o-light-blue-9: 0, 72, 115;
+  /**
+   * @name 
+   * @type palette
+   * @group light-blue
+   * @description 
+   */
+  --o-light-blue-10: 0, 47, 76;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-1: 233, 245, 254;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-2: 202, 231, 252;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-3: 149, 205, 249;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-4: 98, 178, 246;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-5: 49, 151, 243;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-6: 0, 122, 240;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-7: 0, 100, 204;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-8: 0, 80, 169;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-9: 0, 61, 133;
+  /**
+   * @name 
+   * @type palette
+   * @group blue
+   * @description 
+   */
+  --o-blue-10: 0, 43, 97;
+  /**
+   * @name 
+   * @type palette
+   * @group indigo
+   * @description 
+   */
+  --o-indigo-1: 232, 236, 247;
+  /**
+   * @name 
+   * @type palette
+   * @group indigo
+   * @description 
+   */
+  --o-indigo-2: 200, 211, 240;
+  /**
+   * @name 
+   * @type palette
+   * @group indigo
+   * @description 
+   */
+  --o-indigo-3: 150, 170, 225;
+  /**
+   * @name 
+   * @type palette
+   * @group indigo
+   * @description 
+   */
+  --o-indigo-4: 106, 131, 209;
+  /**
+   * @name 
+   * @type palette
+   * @group indigo
+   * @description 
+   */
+  --o-indigo-5: 66, 96, 194;
+  /**
+   * @name 
+   * @type palette
+   * @group indigo
+   * @description 
+   */
+  --o-indigo-6: 31, 63, 179;
+  /**
+   * @name 
+   * @type palette
+   * @group indigo
+   * @description 
+   */
+  --o-indigo-7: 23, 50, 159;
+  /**
+   * @name 
+   * @type palette
+   * @group indigo
+   * @description 
+   */
+  --o-indigo-8: 16, 38, 138;
+  /**
+   * @name 
+   * @type palette
+   * @group indigo
+   * @description 
+   */
+  --o-indigo-9: 10, 28, 118;
+  /**
+   * @name 
+   * @type palette
+   * @group indigo
+   * @description 
+   */
+  --o-indigo-10: 5, 19, 101;
+  /**
+   * @name 
+   * @type palette
+   * @group violet
+   * @description 
+   */
+  --o-violet-1: 234, 231, 249;
+  /**
+   * @name 
+   * @type palette
+   * @group violet
+   * @description 
+   */
+  --o-violet-2: 206, 199, 242;
+  /**
+   * @name 
+   * @type palette
+   * @group violet
+   * @description 
+   */
+  --o-violet-3: 163, 147, 229;
+  /**
+   * @name 
+   * @type palette
+   * @group violet
+   * @description 
+   */
+  --o-violet-4: 124, 100, 217;
+  /**
+   * @name 
+   * @type palette
+   * @group violet
+   * @description 
+   */
+  --o-violet-5: 90, 58, 204;
+  /**
+   * @name 
+   * @type palette
+   * @group violet
+   * @description 
+   */
+  --o-violet-6: 61, 20, 191;
+  /**
+   * @name 
+   * @type palette
+   * @group violet
+   * @description 
+   */
+  --o-violet-7: 53, 13, 171;
+  /**
+   * @name 
+   * @type palette
+   * @group violet
+   * @description 
+   */
+  --o-violet-8: 46, 7, 150;
+  /**
+   * @name 
+   * @type palette
+   * @group violet
+   * @description 
+   */
+  --o-violet-9: 39, 2, 130;
+  /**
+   * @name 
+   * @type palette
+   * @group violet
+   * @description 
+   */
+  --o-violet-10: 34, 0, 109;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-1: 245, 232, 255;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-2: 225, 192, 253;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-3: 203, 152, 251;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-4: 178, 113, 248;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-5: 152, 75, 246;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-6: 123, 37, 244;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-7: 92, 23, 202;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-8: 64, 12, 160;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-9: 41, 4, 118;
+  /**
+   * @name 
+   * @type palette
+   * @group purple
+   * @description 
+   */
+  --o-purple-10: 22, 0, 77;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-1: 255, 232, 253;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-2: 246, 188, 243;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-3: 238, 146, 235;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-4: 229, 107, 229;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-5: 216, 71, 221;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-6: 199, 37, 212;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-7: 163, 23, 178;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-8: 127, 13, 144;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-9: 93, 5, 110;
+  /**
+   * @name 
+   * @type palette
+   * @group pink
+   * @description 
+   */
+  --o-pink-10: 61, 0, 77;
+  /**
+   * @name 
+   * @type color
+   * @group base
+   * @description 
+   */
+  --o-color-white: rgb(var(--o-white));
+  /**
+   * @name 
+   * @type color
+   * @group base
+   * @description 
+   */
+  --o-color-black: rgb(var(--o-black));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 常规
+   */
+  --o-color-primary1: rgb(var(--o-kleinblue-6));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 悬浮
+   */
+  --o-color-primary2: rgb(var(--o-kleinblue-4));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 激活
+   */
+  --o-color-primary3: rgb(var(--o-kleinblue-7));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 禁用
+   */
+  --o-color-primary4: rgb(var(--o-kleinblue-3));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 常规-浅
+   */
+  --o-color-primary1-light: rgb(var(--o-kleinblue-2));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 悬浮-浅
+   */
+  --o-color-primary2-light: rgb(var(--o-kleinblue-3));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 激活-浅
+   */
+  --o-color-primary3-light: rgb(var(--o-kleinblue-4));
+  /**
+   * @name 
+   * @type color
+   * @group primary
+   * @description 禁用-浅
+   */
+  --o-color-primary4-light: rgb(var(--o-kleinblue-1));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 常规
+   */
+  --o-color-success1: rgb(var(--o-green-6));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 悬浮
+   */
+  --o-color-success2: rgb(var(--o-green-4));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 激活
+   */
+  --o-color-success3: rgb(var(--o-green-7));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 禁用
+   */
+  --o-color-success4: rgb(var(--o-green-3));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 常规-浅
+   */
+  --o-color-success1-light: rgb(var(--o-green-2));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 悬浮-浅
+   */
+  --o-color-success2-light: rgb(var(--o-green-3));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 激活-浅
+   */
+  --o-color-success3-light: rgb(var(--o-green-4));
+  /**
+   * @name 
+   * @type color
+   * @group success
+   * @description 禁用-浅
+   */
+  --o-color-success4-light: rgb(var(--o-green-1));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 常规
+   */
+  --o-color-warning1: rgb(var(--o-orange-6));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 悬浮
+   */
+  --o-color-warning2: rgb(var(--o-orange-4));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 激活
+   */
+  --o-color-warning3: rgb(var(--o-orange-7));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 禁用
+   */
+  --o-color-warning4: rgb(var(--o-orange-3));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 常规-浅
+   */
+  --o-color-warning1-light: rgb(var(--o-orange-2));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 悬浮-浅
+   */
+  --o-color-warning2-light: rgb(var(--o-orange-3));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 激活-浅
+   */
+  --o-color-warning3-light: rgb(var(--o-orange-4));
+  /**
+   * @name 
+   * @type color
+   * @group warning
+   * @description 禁用-浅
+   */
+  --o-color-warning4-light: rgb(var(--o-orange-1));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 常规
+   */
+  --o-color-danger1: rgb(var(--o-red-6));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 悬浮
+   */
+  --o-color-danger2: rgb(var(--o-red-4));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 激活
+   */
+  --o-color-danger3: rgb(var(--o-red-7));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 禁用
+   */
+  --o-color-danger4: rgb(var(--o-red-3));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 常规-浅
+   */
+  --o-color-danger1-light: rgb(var(--o-red-2));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 悬浮-浅
+   */
+  --o-color-danger2-light: rgb(var(--o-red-3));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 激活-浅
+   */
+  --o-color-danger3-light: rgb(var(--o-red-4));
+  /**
+   * @name 
+   * @type color
+   * @group danger
+   * @description 禁用-浅
+   */
+  --o-color-danger4-light: rgb(var(--o-red-1));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 一级填充：页面背景
+   */
+  --o-color-fill1: rgb(var(--o-gray-2));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 二级填充：区块、卡片
+   */
+  --o-color-fill2: rgb(var(--o-gray-1));
+  /**
+   * @name 
+   * @type color
+   * @group fill
+   * @description 三级填充：卡片
+   */
+  --o-color-fill3: rgb(var(--o-gray-3));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 常规，常用于边框
+   */
+  --o-color-control1: rgba(var(--o-gray-14), 0.25);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 悬浮，常用于边框
+   */
+  --o-color-control2: rgb(var(--o-kleinblue-4));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 激活，常用于边框
+   */
+  --o-color-control3: rgb(var(--o-kleinblue-7));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 禁用，常用于边框
+   */
+  --o-color-control4: rgba(var(--o-gray-14), 0.1);
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 常规-浅，常用于背景
+   */
+  --o-color-control1-light: rgb(var(--o-gray-5));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 悬浮-浅，常用于背景
+   */
+  --o-color-control2-light: rgb(var(--o-kleinblue-1));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 激活-浅，常用于背景
+   */
+  --o-color-control3-light: rgb(var(--o-kleinblue-2));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 禁用，常用于背景
+   */
+  --o-color-control4-light: rgb(var(--o-gray-3));
+  /**
+   * @name 
+   * @type color
+   * @group control
+   * @description 很浅，常用于表格背景色
+   */
+  --o-color-control-light: rgb(var(--o-gray-1));
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 一级/强调/标题
+   */
+  --o-color-info1: rgba(var(--o-gray-14), 1.0);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 二级/次强调/正文
+   */
+  --o-color-info2: rgba(var(--o-gray-14), 0.8);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 三级/辅助信息
+   */
+  --o-color-info3: rgba(var(--o-gray-14), 0.6);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 置灰/禁用
+   */
+  --o-color-info4: rgba(var(--o-gray-14), 0.4);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 一级/次强调/正文反色
+   */
+  --o-color-info1-inverse: rgba(var(--o-gray-1), 1.0);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 二级/辅助信息反色
+   */
+  --o-color-info2-inverse: rgba(var(--o-gray-1), 0.8);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 三级/辅助信息反色
+   */
+  --o-color-info3-inverse: rgba(var(--o-gray-1), 0.6);
+  /**
+   * @name 
+   * @type color
+   * @group info
+   * @description 置灰/禁用反色
+   */
+  --o-color-info4-inverse: rgba(var(--o-gray-1), 0.4);
+  /**
+   * @name 
+   * @type color
+   * @group mask
+   * @description 全局遮罩
+   */
+  --o-color-mask1: rgba(var(--o-gray-14), 0.4);
+  /**
+   * @name 
+   * @type color
+   * @group mask
+   * @description 局部遮罩
+   */
+  --o-color-mask2: rgba(var(--o-gray-1), 0.2);
+  /**
+   * @name 阴影1
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片、小弹窗、楼层阴影
+   */
+  --o-shadow-1: 0 3px 8px rgba(var(--o-gray-14), 0.08);
+  /**
+   * @name 阴影2
+   * @type shadow
+   * @group shadow
+   * @description 用于卡片悬浮阴影
+   */
+  --o-shadow-2: 0 2px 24px rgba(var(--o-gray-14), 0.15);
+  /**
+   * @name 阴影3
+   * @type shadow
+   * @group shadow
+   * @description 用于提示阴影
+   */
+  --o-shadow-3: 0 8px 40px rgba(var(--o-gray-14), 0.1);
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 常规
+   */
+  --o-color-link1: rgb(var(--o-kleinblue-6));
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 悬浮
+   */
+  --o-color-link2: rgb(var(--o-kleinblue-4));
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 激活
+   */
+  --o-color-link3: rgb(var(--o-kleinblue-7));
+  /**
+   * @name 
+   * @type color
+   * @group link
+   * @description 禁用
+   */
+  --o-color-link4: rgb(var(--o-kleinblue-3));
+  /**
+   * @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: 48px;
+  /**
+   * @name 间距9
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距9
+   */
+  --o-gap-9: 64px;
+  /**
+   * @name 间距10
+   * @type gap
+   * @group gap
+   * @description 用于组件之间的间距10
+   */
+  --o-gap-10: 72px;
+  /**
+   * @name 超小尺寸
+   * @type size
+   * @group control_size
+   * @description 超小尺寸
+   */
+  --o-control_size-2xs: 14px;
+  /**
+   * @name 小尺寸
+   * @type size
+   * @group control_size
+   * @description 小尺寸
+   */
+  --o-control_size-xs: 16px;
+  /**
+   * @name 小尺寸
+   * @type size
+   * @group control_size
+   * @description 小尺寸
+   */
+  --o-control_size-s: 24px;
+  /**
+   * @name 中尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-m: 32px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-l: 40px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-xl: 48px;
+  /**
+   * @name 大尺寸
+   * @type size
+   * @group control_size
+   * @description 尺寸
+   */
+  --o-control_size-2xl: 56px;
+  /**
+   * @name 超小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 超小尺寸图标
+   */
+  --o-icon_size-xs: 16px;
+  /**
+   * @name 小尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 小尺寸图标
+   */
+  --o-icon_size-s: 20px;
+  /**
+   * @name 中尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 中尺寸图标
+   */
+  --o-icon_size-m: 24px;
+  /**
+   * @name 大尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 大尺寸图标
+   */
+  --o-icon_size-l: 32px;
+  /**
+   * @name 超大尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 超大尺寸图标
+   */
+  --o-icon_size-xl: 40px;
+  /**
+   * @name 2xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 2xl尺寸图标
+   */
+  --o-icon_size-2xl: 48px;
+  /**
+   * @name 3xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 3xl尺寸图标
+   */
+  --o-icon_size-3xl: 56px;
+  /**
+   * @name 4xl尺寸图标
+   * @type size
+   * @group icon_size
+   * @description 4xl尺寸图标
+   */
+  --o-icon_size-4xl: 64px;
+  /**
+   * @name 超小尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 超小尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-xs: 16px;
+  /**
+   * @name 小尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 小尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-s: 20px;
+  /**
+   * @name 中尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 中尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-m: 24px;
+  /**
+   * @name 大尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 大尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-l: 32px;
+  /**
+   * @name 超大尺寸图标
+   * @type size
+   * @group icon_size_control
+   * @description 超大尺寸控件图标(组件使用)
+   */
+  --o-icon_size_control-xl: 40px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group font_size
+   * @description 一级数据展示
+   */
+  --o-font_size-display1: 56px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group font_size
+   * @description 二级数据展示
+   */
+  --o-font_size-display2: 48px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group font_size
+   * @description 三级数据展示
+   */
+  --o-font_size-display3: 40px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group font_size
+   * @description 一级标题
+   */
+  --o-font_size-h1: 32px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group font_size
+   * @description 二级标题
+   */
+  --o-font_size-h2: 24px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group font_size
+   * @description 三级标题
+   */
+  --o-font_size-h3: 22px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group font_size
+   * @description 四级标题
+   */
+  --o-font_size-h4: 20px;
+  /**
+   * @name 常规正文
+   * @type font
+   * @group font_size
+   * @description 常规正文
+   */
+  --o-font_size-text1: 16px;
+  /**
+   * @name 大号正文
+   * @type font
+   * @group font_size
+   * @description 大号正文
+   */
+  --o-font_size-text2: 18px;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group font_size
+   * @description 提示文本1
+   */
+  --o-font_size-tip1: 14px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group font_size
+   * @description 提示文本2
+   */
+  --o-font_size-tip2: 12px;
+  /**
+   * @name 一级数据展示
+   * @type font
+   * @group line_height
+   * @description 一级数据展示
+   */
+  --o-line_height-display1: 80px;
+  /**
+   * @name 二级数据展示
+   * @type font
+   * @group line_height
+   * @description 二级数据展示
+   */
+  --o-line_height-display2: 64px;
+  /**
+   * @name 三级数据展示
+   * @type font
+   * @group line_height
+   * @description 三级数据展示
+   */
+  --o-line_height-display3: 56px;
+  /**
+   * @name 一级标题
+   * @type font
+   * @group line_height
+   * @description 一级标题
+   */
+  --o-line_height-h1: 44px;
+  /**
+   * @name 二级标题
+   * @type font
+   * @group line_height
+   * @description 二级标题
+   */
+  --o-line_height-h2: 32px;
+  /**
+   * @name 三级标题
+   * @type font
+   * @group line_height
+   * @description 三级标题
+   */
+  --o-line_height-h3: 30px;
+  /**
+   * @name 四级标题
+   * @type font
+   * @group line_height
+   * @description 四级标题
+   */
+  --o-line_height-h4: 28px;
+  /**
+   * @name 正文
+   * @type font
+   * @group line_height
+   * @description 正文
+   */
+  --o-line_height-text1: 24px;
+  /**
+   * @name 正文-大
+   * @type font
+   * @group line_height
+   * @description 正文-大
+   */
+  --o-line_height-text2: 26px;
+  /**
+   * @name 提示文本1
+   * @type font
+   * @group line_height
+   * @description 提示文本1
+   */
+  --o-line_height-tip1: 22px;
+  /**
+   * @name 提示文本2
+   * @type font
+   * @group line_height
+   * @description 提示文本2
+   */
+  --o-line_height-tip2: 18px;
+  /**
+   * @name 超小尺寸圆角
+   * @type size
+   * @group radius
+   * @description 超小尺寸圆角
+   */
+  --o-radius-xs: 4px;
+  /**
+   * @name 小尺寸圆角
+   * @type size
+   * @group radius
+   * @description 小尺寸圆角
+   */
+  --o-radius-s: 4px;
+  /**
+   * @name 中尺寸圆角
+   * @type size
+   * @group radius
+   * @description 中尺寸圆角
+   */
+  --o-radius-m: 4px;
+  /**
+   * @name 大尺寸圆角
+   * @type size
+   * @group radius
+   * @description 大尺寸圆角
+   */
+  --o-radius-l: 4px;
+  /**
+   * @name 大尺寸圆角
+   * @type size
+   * @group radius
+   * @description 大尺寸圆角,一般用于卡片
+   */
+  --o-radius-xl: 0px;
+  /**
+   * @name 超小尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 超小尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-xs: 4px;
+  /**
+   * @name 小尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 小尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-s: 4px;
+  /**
+   * @name 中尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 中尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-m: 4px;
+  /**
+   * @name 大尺寸控件圆角
+   * @type size
+   * @group radius_control
+   * @description 大尺寸控件圆角(组件使用)
+   */
+  --o-radius_control-l: 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/theme/openeuler/e.token.code-snippets b/packages/opendesign/src/theme/openeuler/e.token.code-snippets
new file mode 100644
index 0000000000000000000000000000000000000000..f64cd66a66e66e8d8a4b41d5c197b5f9c3682e52
--- /dev/null
+++ b/packages/opendesign/src/theme/openeuler/e.token.code-snippets
@@ -0,0 +1,2514 @@
+{
+  "--o-white": {
+    "prefix": [
+      "var(--o-white)"
+    ],
+    "body": "var(--o-white)",
+    "description": "[light: 255, 255, 255, dark: 255, 255, 255]",
+    "scope": "css,scss,less"
+  },
+  "--o-black": {
+    "prefix": [
+      "var(--o-black)"
+    ],
+    "body": "var(--o-black)",
+    "description": "[light: 0, 0, 0, dark: 0, 0, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-1": {
+    "prefix": [
+      "var(--o-gray-1)"
+    ],
+    "body": "var(--o-gray-1)",
+    "description": "[light: 255, 255, 255, dark: 0, 0, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-2": {
+    "prefix": [
+      "var(--o-gray-2)"
+    ],
+    "body": "var(--o-gray-2)",
+    "description": "[light: 243, 243, 245, dark: 18, 18, 20]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-3": {
+    "prefix": [
+      "var(--o-gray-3)"
+    ],
+    "body": "var(--o-gray-3)",
+    "description": "[light: 237, 237, 240, dark: 26, 26, 28]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-4": {
+    "prefix": [
+      "var(--o-gray-4)"
+    ],
+    "body": "var(--o-gray-4)",
+    "description": "[light: 232, 232, 235, dark: 36, 36, 39]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-5": {
+    "prefix": [
+      "var(--o-gray-5)"
+    ],
+    "body": "var(--o-gray-5)",
+    "description": "[light: 222, 222, 227, dark: 43, 43, 47]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-6": {
+    "prefix": [
+      "var(--o-gray-6)"
+    ],
+    "body": "var(--o-gray-6)",
+    "description": "[light: 210, 210, 217, dark: 53, 53, 57]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-7": {
+    "prefix": [
+      "var(--o-gray-7)"
+    ],
+    "body": "var(--o-gray-7)",
+    "description": "[light: 186, 186, 191, dark: 63, 63, 67]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-8": {
+    "prefix": [
+      "var(--o-gray-8)"
+    ],
+    "body": "var(--o-gray-8)",
+    "description": "[light: 149, 149, 156, dark: 85, 85, 88]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-9": {
+    "prefix": [
+      "var(--o-gray-9)"
+    ],
+    "body": "var(--o-gray-9)",
+    "description": "[light: 111, 111, 117, dark: 118, 118, 122]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-10": {
+    "prefix": [
+      "var(--o-gray-10)"
+    ],
+    "body": "var(--o-gray-10)",
+    "description": "[light: 85, 85, 92, dark: 156, 156, 159]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-11": {
+    "prefix": [
+      "var(--o-gray-11)"
+    ],
+    "body": "var(--o-gray-11)",
+    "description": "[light: 61, 61, 66, dark: 181, 181, 185]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-12": {
+    "prefix": [
+      "var(--o-gray-12)"
+    ],
+    "body": "var(--o-gray-12)",
+    "description": "[light: 37, 37, 41, dark: 208, 208, 210]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-13": {
+    "prefix": [
+      "var(--o-gray-13)"
+    ],
+    "body": "var(--o-gray-13)",
+    "description": "[light: 21, 21, 23, dark: 235, 235, 238]",
+    "scope": "css,scss,less"
+  },
+  "--o-gray-14": {
+    "prefix": [
+      "var(--o-gray-14)"
+    ],
+    "body": "var(--o-gray-14)",
+    "description": "[light: 0, 0, 0, dark: 255, 255, 255]",
+    "scope": "css,scss,less"
+  },
+  "--o-kleinblue-1": {
+    "prefix": [
+      "var(--o-kleinblue-1)"
+    ],
+    "body": "var(--o-kleinblue-1)",
+    "description": "[light: 235, 241, 250, dark: 14, 26, 69]",
+    "scope": "css,scss,less"
+  },
+  "--o-kleinblue-2": {
+    "prefix": [
+      "var(--o-kleinblue-2)"
+    ],
+    "body": "var(--o-kleinblue-2)",
+    "description": "[light: 206, 219, 245, dark: 18, 34, 87]",
+    "scope": "css,scss,less"
+  },
+  "--o-kleinblue-3": {
+    "prefix": [
+      "var(--o-kleinblue-3)"
+    ],
+    "body": "var(--o-kleinblue-3)",
+    "description": "[light: 132, 161, 220, dark: 29, 51, 119]",
+    "scope": "css,scss,less"
+  },
+  "--o-kleinblue-4": {
+    "prefix": [
+      "var(--o-kleinblue-4)"
+    ],
+    "body": "var(--o-kleinblue-4)",
+    "description": "[light: 81, 119, 202, dark: 42, 72, 158]",
+    "scope": "css,scss,less"
+  },
+  "--o-kleinblue-5": {
+    "prefix": [
+      "var(--o-kleinblue-5)"
+    ],
+    "body": "var(--o-kleinblue-5)",
+    "description": "[light: 37, 81, 185, dark: 57, 97, 202]",
+    "scope": "css,scss,less"
+  },
+  "--o-kleinblue-6": {
+    "prefix": [
+      "var(--o-kleinblue-6)"
+    ],
+    "body": "var(--o-kleinblue-6)",
+    "description": "[light: 0, 47, 167, dark: 73, 122, 248]",
+    "scope": "css,scss,less"
+  },
+  "--o-kleinblue-7": {
+    "prefix": [
+      "var(--o-kleinblue-7)"
+    ],
+    "body": "var(--o-kleinblue-7)",
+    "description": "[light: 0, 39, 147, dark: 110, 148, 243]",
+    "scope": "css,scss,less"
+  },
+  "--o-kleinblue-8": {
+    "prefix": [
+      "var(--o-kleinblue-8)"
+    ],
+    "body": "var(--o-kleinblue-8)",
+    "description": "[light: 0, 31, 126, dark: 140, 171, 234]",
+    "scope": "css,scss,less"
+  },
+  "--o-kleinblue-9": {
+    "prefix": [
+      "var(--o-kleinblue-9)"
+    ],
+    "body": "var(--o-kleinblue-9)",
+    "description": "[light: 0, 24, 106, dark: 176, 199, 241]",
+    "scope": "css,scss,less"
+  },
+  "--o-kleinblue-10": {
+    "prefix": [
+      "var(--o-kleinblue-10)"
+    ],
+    "body": "var(--o-kleinblue-10)",
+    "description": "[light: 0, 18, 85, dark: 215, 227, 248]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-1": {
+    "prefix": [
+      "var(--o-yellow-1)"
+    ],
+    "body": "var(--o-yellow-1)",
+    "description": "[light: 254, 252, 233, dark: 81, 46, 9]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-2": {
+    "prefix": [
+      "var(--o-yellow-2)"
+    ],
+    "body": "var(--o-yellow-2)",
+    "description": "[light: 252, 248, 202, dark: 121, 75, 15]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-3": {
+    "prefix": [
+      "var(--o-yellow-3)"
+    ],
+    "body": "var(--o-yellow-3)",
+    "description": "[light: 249, 237, 149, dark: 161, 107, 22]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-4": {
+    "prefix": [
+      "var(--o-yellow-4)"
+    ],
+    "body": "var(--o-yellow-4)",
+    "description": "[light: 246, 224, 98, dark: 202, 143, 30]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-5": {
+    "prefix": [
+      "var(--o-yellow-5)"
+    ],
+    "body": "var(--o-yellow-5)",
+    "description": "[light: 243, 207, 49, dark: 242, 183, 38]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-6": {
+    "prefix": [
+      "var(--o-yellow-6)"
+    ],
+    "body": "var(--o-yellow-6)",
+    "description": "[light: 240, 188, 0, dark: 245, 202, 80]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-7": {
+    "prefix": [
+      "var(--o-yellow-7)"
+    ],
+    "body": "var(--o-yellow-7)",
+    "description": "[light: 200, 147, 0, dark: 247, 219, 122]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-8": {
+    "prefix": [
+      "var(--o-yellow-8)"
+    ],
+    "body": "var(--o-yellow-8)",
+    "description": "[light: 160, 109, 0, dark: 250, 234, 166]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-9": {
+    "prefix": [
+      "var(--o-yellow-9)"
+    ],
+    "body": "var(--o-yellow-9)",
+    "description": "[light: 120, 76, 0, dark: 252, 246, 210]",
+    "scope": "css,scss,less"
+  },
+  "--o-yellow-10": {
+    "prefix": [
+      "var(--o-yellow-10)"
+    ],
+    "body": "var(--o-yellow-10)",
+    "description": "[light: 80, 47, 0, dark: 254, 251, 237]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-1": {
+    "prefix": [
+      "var(--o-orange-1)"
+    ],
+    "body": "var(--o-orange-1)",
+    "description": "[light: 255, 246, 232, dark: 77, 24, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-2": {
+    "prefix": [
+      "var(--o-orange-2)"
+    ],
+    "body": "var(--o-orange-2)",
+    "description": "[light: 254, 226, 186, dark: 120, 42, 1]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-3": {
+    "prefix": [
+      "var(--o-orange-3)"
+    ],
+    "body": "var(--o-orange-3)",
+    "description": "[light: 253, 202, 140, dark: 163, 68, 8]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-4": {
+    "prefix": [
+      "var(--o-orange-4)"
+    ],
+    "body": "var(--o-orange-4)",
+    "description": "[light: 252, 176, 95, dark: 207, 97, 19]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-5": {
+    "prefix": [
+      "var(--o-orange-5)"
+    ],
+    "body": "var(--o-orange-5)",
+    "description": "[light: 251, 147, 50, dark: 250, 130, 33]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-6": {
+    "prefix": [
+      "var(--o-orange-6)"
+    ],
+    "body": "var(--o-orange-6)",
+    "description": "[light: 250, 115, 5, dark: 251, 143, 43]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-7": {
+    "prefix": [
+      "var(--o-orange-7)"
+    ],
+    "body": "var(--o-orange-7)",
+    "description": "[light: 207, 88, 3, dark: 252, 174, 91]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-8": {
+    "prefix": [
+      "var(--o-orange-8)"
+    ],
+    "body": "var(--o-orange-8)",
+    "description": "[light: 163, 64, 2, dark: 253, 202, 139]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-9": {
+    "prefix": [
+      "var(--o-orange-9)"
+    ],
+    "body": "var(--o-orange-9)",
+    "description": "[light: 120, 42, 1, dark: 254, 227, 188]",
+    "scope": "css,scss,less"
+  },
+  "--o-orange-10": {
+    "prefix": [
+      "var(--o-orange-10)"
+    ],
+    "body": "var(--o-orange-10)",
+    "description": "[light: 77, 24, 0, dark: 255, 248, 237]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-1": {
+    "prefix": [
+      "var(--o-red-1)"
+    ],
+    "body": "var(--o-red-1)",
+    "description": "[light: 255, 234, 232, dark: 77, 0, 17]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-2": {
+    "prefix": [
+      "var(--o-red-2)"
+    ],
+    "body": "var(--o-red-2)",
+    "description": "[light: 250, 185, 182, dark: 115, 3, 24]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-3": {
+    "prefix": [
+      "var(--o-red-3)"
+    ],
+    "body": "var(--o-red-3)",
+    "description": "[light: 245, 136, 134, dark: 153, 9, 31]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-4": {
+    "prefix": [
+      "var(--o-red-4)"
+    ],
+    "body": "var(--o-red-4)",
+    "description": "[light: 240, 87, 90, dark: 192, 17, 37]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-5": {
+    "prefix": [
+      "var(--o-red-5)"
+    ],
+    "body": "var(--o-red-5)",
+    "description": "[light: 235, 43, 52, dark: 230, 28, 43]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-6": {
+    "prefix": [
+      "var(--o-red-6)"
+    ],
+    "body": "var(--o-red-6)",
+    "description": "[light: 230, 0, 18, dark: 235, 35, 45]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-7": {
+    "prefix": [
+      "var(--o-red-7)"
+    ],
+    "body": "var(--o-red-7)",
+    "description": "[light: 192, 0, 22, dark: 240, 82, 85]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-8": {
+    "prefix": [
+      "var(--o-red-8)"
+    ],
+    "body": "var(--o-red-8)",
+    "description": "[light: 153, 0, 23, dark: 245, 132, 130]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-9": {
+    "prefix": [
+      "var(--o-red-9)"
+    ],
+    "body": "var(--o-red-9)",
+    "description": "[light: 115, 0, 21, dark: 250, 183, 180]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-10": {
+    "prefix": [
+      "var(--o-red-10)"
+    ],
+    "body": "var(--o-red-10)",
+    "description": "[light: 77, 0, 17, dark: 255, 234, 232]",
+    "scope": "css,scss,less"
+  },
+  "--o-red-huawei": {
+    "prefix": [
+      "var(--o-red-huawei)"
+    ],
+    "body": "var(--o-red-huawei)",
+    "description": "[light: 199, 0, 11, dark: 199, 0, 11]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-1": {
+    "prefix": [
+      "var(--o-green-1)"
+    ],
+    "body": "var(--o-green-1)",
+    "description": "[light: 232, 255, 238, dark: 0, 77, 42]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-2": {
+    "prefix": [
+      "var(--o-green-2)"
+    ],
+    "body": "var(--o-green-2)",
+    "description": "[light: 177, 239, 195, dark: 2, 102, 53]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-3": {
+    "prefix": [
+      "var(--o-green-3)"
+    ],
+    "body": "var(--o-green-3)",
+    "description": "[light: 128, 224, 158, dark: 10, 127, 66]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-4": {
+    "prefix": [
+      "var(--o-green-4)"
+    ],
+    "body": "var(--o-green-4)",
+    "description": "[light: 84, 208, 127, dark: 22, 152, 80]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-5": {
+    "prefix": [
+      "var(--o-green-5)"
+    ],
+    "body": "var(--o-green-5)",
+    "description": "[light: 45, 193, 101, dark: 36, 177, 95]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-6": {
+    "prefix": [
+      "var(--o-green-6)"
+    ],
+    "body": "var(--o-green-6)",
+    "description": "[light: 11, 177, 81, dark: 51, 193, 104]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-7": {
+    "prefix": [
+      "var(--o-green-7)"
+    ],
+    "body": "var(--o-green-7)",
+    "description": "[light: 7, 152, 72, dark: 90, 208, 131]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-8": {
+    "prefix": [
+      "var(--o-green-8)"
+    ],
+    "body": "var(--o-green-8)",
+    "description": "[light: 4, 127, 63, dark: 135, 224, 163]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-9": {
+    "prefix": [
+      "var(--o-green-9)"
+    ],
+    "body": "var(--o-green-9)",
+    "description": "[light: 2, 102, 53, dark: 185, 239, 200]",
+    "scope": "css,scss,less"
+  },
+  "--o-green-10": {
+    "prefix": [
+      "var(--o-green-10)"
+    ],
+    "body": "var(--o-green-10)",
+    "description": "[light: 0, 77, 42, dark: 240, 255, 244]",
+    "scope": "css,scss,less"
+  },
+  "--o-amber-1": {
+    "prefix": [
+      "var(--o-amber-1)"
+    ],
+    "body": "var(--o-amber-1)",
+    "description": "[light: 253, 247, 232, dark: 77, 30, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-amber-2": {
+    "prefix": [
+      "var(--o-amber-2)"
+    ],
+    "body": "var(--o-amber-2)",
+    "description": "[light: 250, 237, 200, dark: 116, 51, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-amber-3": {
+    "prefix": [
+      "var(--o-amber-3)"
+    ],
+    "body": "var(--o-amber-3)",
+    "description": "[light: 245, 215, 147, dark: 154, 76, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-amber-4": {
+    "prefix": [
+      "var(--o-amber-4)"
+    ],
+    "body": "var(--o-amber-4)",
+    "description": "[light: 241, 191, 96, dark: 193, 105, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-amber-5": {
+    "prefix": [
+      "var(--o-amber-5)"
+    ],
+    "body": "var(--o-amber-5)",
+    "description": "[light: 236, 165, 47, dark: 231, 137, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-amber-6": {
+    "prefix": [
+      "var(--o-amber-6)"
+    ],
+    "body": "var(--o-amber-6)",
+    "description": "[light: 231, 137, 0, dark: 236, 165, 47]",
+    "scope": "css,scss,less"
+  },
+  "--o-amber-7": {
+    "prefix": [
+      "var(--o-amber-7)"
+    ],
+    "body": "var(--o-amber-7)",
+    "description": "[light: 193, 105, 0, dark: 241, 191, 96]",
+    "scope": "css,scss,less"
+  },
+  "--o-amber-8": {
+    "prefix": [
+      "var(--o-amber-8)"
+    ],
+    "body": "var(--o-amber-8)",
+    "description": "[light: 154, 76, 0, dark: 245, 215, 147]",
+    "scope": "css,scss,less"
+  },
+  "--o-amber-9": {
+    "prefix": [
+      "var(--o-amber-9)"
+    ],
+    "body": "var(--o-amber-9)",
+    "description": "[light: 116, 51, 0, dark: 250, 237, 200]",
+    "scope": "css,scss,less"
+  },
+  "--o-amber-10": {
+    "prefix": [
+      "var(--o-amber-10)"
+    ],
+    "body": "var(--o-amber-10)",
+    "description": "[light: 77, 30, 0, dark: 253, 247, 232]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-1": {
+    "prefix": [
+      "var(--o-lime-1)"
+    ],
+    "body": "var(--o-lime-1)",
+    "description": "[light: 243, 250, 230, dark: 51, 67, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-2": {
+    "prefix": [
+      "var(--o-lime-2)"
+    ],
+    "body": "var(--o-lime-2)",
+    "description": "[light: 229, 244, 195, dark: 78, 101, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-3": {
+    "prefix": [
+      "var(--o-lime-3)"
+    ],
+    "body": "var(--o-lime-3)",
+    "description": "[light: 208, 233, 140, dark: 107, 134, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-4": {
+    "prefix": [
+      "var(--o-lime-4)"
+    ],
+    "body": "var(--o-lime-4)",
+    "description": "[light: 191, 223, 89, dark: 134, 168, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-5": {
+    "prefix": [
+      "var(--o-lime-5)"
+    ],
+    "body": "var(--o-lime-5)",
+    "description": "[light: 177, 212, 42, dark: 167, 201, 0]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-6": {
+    "prefix": [
+      "var(--o-lime-6)"
+    ],
+    "body": "var(--o-lime-6)",
+    "description": "[light: 167, 201, 0, dark: 177, 212, 42]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-7": {
+    "prefix": [
+      "var(--o-lime-7)"
+    ],
+    "body": "var(--o-lime-7)",
+    "description": "[light: 136, 168, 0, dark: 191, 223, 89]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-8": {
+    "prefix": [
+      "var(--o-lime-8)"
+    ],
+    "body": "var(--o-lime-8)",
+    "description": "[light: 107, 134, 0, dark: 208, 233, 140]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-9": {
+    "prefix": [
+      "var(--o-lime-9)"
+    ],
+    "body": "var(--o-lime-9)",
+    "description": "[light: 78, 101, 0, dark: 229, 244, 195]",
+    "scope": "css,scss,less"
+  },
+  "--o-lime-10": {
+    "prefix": [
+      "var(--o-lime-10)"
+    ],
+    "body": "var(--o-lime-10)",
+    "description": "[light: 51, 67, 0, dark: 243, 250, 230]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-green-1": {
+    "prefix": [
+      "var(--o-light-green-1)"
+    ],
+    "body": "var(--o-light-green-1)",
+    "description": "[light: 242, 247, 231, dark: 33, 60, 7]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-green-2": {
+    "prefix": [
+      "var(--o-light-green-2)"
+    ],
+    "body": "var(--o-light-green-2)",
+    "description": "[light: 225, 240, 199, dark: 51, 90, 11]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-green-3": {
+    "prefix": [
+      "var(--o-light-green-3)"
+    ],
+    "body": "var(--o-light-green-3)",
+    "description": "[light: 195, 225, 148, dark: 70, 119, 16]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-green-4": {
+    "prefix": [
+      "var(--o-light-green-4)"
+    ],
+    "body": "var(--o-light-green-4)",
+    "description": "[light: 166, 209, 103, dark: 91, 149, 21]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-green-5": {
+    "prefix": [
+      "var(--o-light-green-5)"
+    ],
+    "body": "var(--o-light-green-5)",
+    "description": "[light: 138, 194, 62, dark: 112, 179, 27]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-green-6": {
+    "prefix": [
+      "var(--o-light-green-6)"
+    ],
+    "body": "var(--o-light-green-6)",
+    "description": "[light: 112, 179, 27, dark: 184, 220, 48]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-green-7": {
+    "prefix": [
+      "var(--o-light-green-7)"
+    ],
+    "body": "var(--o-light-green-7)",
+    "description": "[light: 91, 149, 21, dark: 166, 209, 103]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-green-8": {
+    "prefix": [
+      "var(--o-light-green-8)"
+    ],
+    "body": "var(--o-light-green-8)",
+    "description": "[light: 70, 119, 16, dark: 195, 225, 148]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-green-9": {
+    "prefix": [
+      "var(--o-light-green-9)"
+    ],
+    "body": "var(--o-light-green-9)",
+    "description": "[light: 51, 90, 11, dark: 225, 240, 199]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-green-10": {
+    "prefix": [
+      "var(--o-light-green-10)"
+    ],
+    "body": "var(--o-light-green-10)",
+    "description": "[light: 33, 60, 7, dark: 242, 247, 231]",
+    "scope": "css,scss,less"
+  },
+  "--o-teal-1": {
+    "prefix": [
+      "var(--o-teal-1)"
+    ],
+    "body": "var(--o-teal-1)",
+    "description": "[light: 228, 247, 241, dark: 0, 60, 48]",
+    "scope": "css,scss,less"
+  },
+  "--o-teal-2": {
+    "prefix": [
+      "var(--o-teal-2)"
+    ],
+    "body": "var(--o-teal-2)",
+    "description": "[light: 192, 240, 224, dark: 0, 90, 71]",
+    "scope": "css,scss,less"
+  },
+  "--o-teal-3": {
+    "prefix": [
+      "var(--o-teal-3)"
+    ],
+    "body": "var(--o-teal-3)",
+    "description": "[light: 135, 225, 197, dark: 0, 119, 93]",
+    "scope": "css,scss,less"
+  },
+  "--o-teal-4": {
+    "prefix": [
+      "var(--o-teal-4)"
+    ],
+    "body": "var(--o-teal-4)",
+    "description": "[light: 84, 209, 173, dark: 0, 149, 113]",
+    "scope": "css,scss,less"
+  },
+  "--o-teal-5": {
+    "prefix": [
+      "var(--o-teal-5)"
+    ],
+    "body": "var(--o-teal-5)",
+    "description": "[light: 39, 194, 152, dark: 0, 179, 133]",
+    "scope": "css,scss,less"
+  },
+  "--o-teal-6": {
+    "prefix": [
+      "var(--o-teal-6)"
+    ],
+    "body": "var(--o-teal-6)",
+    "description": "[light: 0, 179, 133, dark: 39, 194, 152]",
+    "scope": "css,scss,less"
+  },
+  "--o-teal-7": {
+    "prefix": [
+      "var(--o-teal-7)"
+    ],
+    "body": "var(--o-teal-7)",
+    "description": "[light: 0, 149, 113, dark: 84, 209, 173]",
+    "scope": "css,scss,less"
+  },
+  "--o-teal-8": {
+    "prefix": [
+      "var(--o-teal-8)"
+    ],
+    "body": "var(--o-teal-8)",
+    "description": "[light: 0, 119, 93, dark: 135, 225, 197]",
+    "scope": "css,scss,less"
+  },
+  "--o-teal-9": {
+    "prefix": [
+      "var(--o-teal-9)"
+    ],
+    "body": "var(--o-teal-9)",
+    "description": "[light: 0, 90, 71, dark: 192, 240, 224]",
+    "scope": "css,scss,less"
+  },
+  "--o-teal-10": {
+    "prefix": [
+      "var(--o-teal-10)"
+    ],
+    "body": "var(--o-teal-10)",
+    "description": "[light: 0, 60, 48, dark: 228, 247, 241]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-1": {
+    "prefix": [
+      "var(--o-cyan-1)"
+    ],
+    "body": "var(--o-cyan-1)",
+    "description": "[light: 228, 247, 247, dark: 0, 52, 60]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-2": {
+    "prefix": [
+      "var(--o-cyan-2)"
+    ],
+    "body": "var(--o-cyan-2)",
+    "description": "[light: 192, 240, 240, dark: 0, 79, 90]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-3": {
+    "prefix": [
+      "var(--o-cyan-3)"
+    ],
+    "body": "var(--o-cyan-3)",
+    "description": "[light: 135, 223, 225, dark: 0, 107, 119]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-4": {
+    "prefix": [
+      "var(--o-cyan-4)"
+    ],
+    "body": "var(--o-cyan-4)",
+    "description": "[light: 84, 205, 209, dark: 0, 137, 149]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-5": {
+    "prefix": [
+      "var(--o-cyan-5)"
+    ],
+    "body": "var(--o-cyan-5)",
+    "description": "[light: 39, 186, 194, dark: 39, 186, 194]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-6": {
+    "prefix": [
+      "var(--o-cyan-6)"
+    ],
+    "body": "var(--o-cyan-6)",
+    "description": "[light: 0, 167, 179, dark: 84, 205, 209]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-7": {
+    "prefix": [
+      "var(--o-cyan-7)"
+    ],
+    "body": "var(--o-cyan-7)",
+    "description": "[light: 0, 137, 149, dark: 92, 208, 212]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-8": {
+    "prefix": [
+      "var(--o-cyan-8)"
+    ],
+    "body": "var(--o-cyan-8)",
+    "description": "[light: 0, 107, 119, dark: 135, 223, 225]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-9": {
+    "prefix": [
+      "var(--o-cyan-9)"
+    ],
+    "body": "var(--o-cyan-9)",
+    "description": "[light: 0, 79, 90, dark: 192, 240, 240]",
+    "scope": "css,scss,less"
+  },
+  "--o-cyan-10": {
+    "prefix": [
+      "var(--o-cyan-10)"
+    ],
+    "body": "var(--o-cyan-10)",
+    "description": "[light: 0, 52, 60, dark: 228, 247, 247]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-blue-1": {
+    "prefix": [
+      "var(--o-light-blue-1)"
+    ],
+    "body": "var(--o-light-blue-1)",
+    "description": "[light: 232, 247, 252, dark: 0, 47, 76]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-blue-2": {
+    "prefix": [
+      "var(--o-light-blue-2)"
+    ],
+    "body": "var(--o-light-blue-2)",
+    "description": "[light: 200, 237, 250, dark: 0, 72, 115]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-blue-3": {
+    "prefix": [
+      "var(--o-light-blue-3)"
+    ],
+    "body": "var(--o-light-blue-3)",
+    "description": "[light: 147, 218, 245, dark: 0, 99, 153]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-blue-4": {
+    "prefix": [
+      "var(--o-light-blue-4)"
+    ],
+    "body": "var(--o-light-blue-4)",
+    "description": "[light: 96, 198, 239, dark: 0, 127, 191]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-blue-5": {
+    "prefix": [
+      "var(--o-light-blue-5)"
+    ],
+    "body": "var(--o-light-blue-5)",
+    "description": "[light: 47, 178, 234, dark: 0, 156, 229]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-blue-6": {
+    "prefix": [
+      "var(--o-light-blue-6)"
+    ],
+    "body": "var(--o-light-blue-6)",
+    "description": "[light: 0, 156, 229, dark: 47, 178, 234]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-blue-7": {
+    "prefix": [
+      "var(--o-light-blue-7)"
+    ],
+    "body": "var(--o-light-blue-7)",
+    "description": "[light: 0, 127, 191, dark: 96, 198, 239]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-blue-8": {
+    "prefix": [
+      "var(--o-light-blue-8)"
+    ],
+    "body": "var(--o-light-blue-8)",
+    "description": "[light: 0, 99, 153, dark: 147, 218, 245]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-blue-9": {
+    "prefix": [
+      "var(--o-light-blue-9)"
+    ],
+    "body": "var(--o-light-blue-9)",
+    "description": "[light: 0, 72, 115, dark: 200, 237, 250]",
+    "scope": "css,scss,less"
+  },
+  "--o-light-blue-10": {
+    "prefix": [
+      "var(--o-light-blue-10)"
+    ],
+    "body": "var(--o-light-blue-10)",
+    "description": "[light: 0, 47, 76, dark: 232, 247, 252]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-1": {
+    "prefix": [
+      "var(--o-blue-1)"
+    ],
+    "body": "var(--o-blue-1)",
+    "description": "[light: 233, 245, 254, dark: 0, 43, 97]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-2": {
+    "prefix": [
+      "var(--o-blue-2)"
+    ],
+    "body": "var(--o-blue-2)",
+    "description": "[light: 202, 231, 252, dark: 0, 61, 133]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-3": {
+    "prefix": [
+      "var(--o-blue-3)"
+    ],
+    "body": "var(--o-blue-3)",
+    "description": "[light: 149, 205, 249, dark: 0, 80, 169]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-4": {
+    "prefix": [
+      "var(--o-blue-4)"
+    ],
+    "body": "var(--o-blue-4)",
+    "description": "[light: 98, 178, 246, dark: 0, 100, 204]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-5": {
+    "prefix": [
+      "var(--o-blue-5)"
+    ],
+    "body": "var(--o-blue-5)",
+    "description": "[light: 49, 151, 243, dark: 0, 122, 240]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-6": {
+    "prefix": [
+      "var(--o-blue-6)"
+    ],
+    "body": "var(--o-blue-6)",
+    "description": "[light: 0, 122, 240, dark: 49, 151, 243]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-7": {
+    "prefix": [
+      "var(--o-blue-7)"
+    ],
+    "body": "var(--o-blue-7)",
+    "description": "[light: 0, 100, 204, dark: 98, 178, 246]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-8": {
+    "prefix": [
+      "var(--o-blue-8)"
+    ],
+    "body": "var(--o-blue-8)",
+    "description": "[light: 0, 80, 169, dark: 149, 205, 249]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-9": {
+    "prefix": [
+      "var(--o-blue-9)"
+    ],
+    "body": "var(--o-blue-9)",
+    "description": "[light: 0, 61, 133, dark: 202, 231, 252]",
+    "scope": "css,scss,less"
+  },
+  "--o-blue-10": {
+    "prefix": [
+      "var(--o-blue-10)"
+    ],
+    "body": "var(--o-blue-10)",
+    "description": "[light: 0, 43, 97, dark: 233, 245, 254]",
+    "scope": "css,scss,less"
+  },
+  "--o-indigo-1": {
+    "prefix": [
+      "var(--o-indigo-1)"
+    ],
+    "body": "var(--o-indigo-1)",
+    "description": "[light: 232, 236, 247, dark: 5, 19, 97]",
+    "scope": "css,scss,less"
+  },
+  "--o-indigo-2": {
+    "prefix": [
+      "var(--o-indigo-2)"
+    ],
+    "body": "var(--o-indigo-2)",
+    "description": "[light: 200, 211, 240, dark: 10, 28, 118]",
+    "scope": "css,scss,less"
+  },
+  "--o-indigo-3": {
+    "prefix": [
+      "var(--o-indigo-3)"
+    ],
+    "body": "var(--o-indigo-3)",
+    "description": "[light: 150, 170, 225, dark: 16, 38, 138]",
+    "scope": "css,scss,less"
+  },
+  "--o-indigo-4": {
+    "prefix": [
+      "var(--o-indigo-4)"
+    ],
+    "body": "var(--o-indigo-4)",
+    "description": "[light: 106, 131, 209, dark: 23, 50, 159]",
+    "scope": "css,scss,less"
+  },
+  "--o-indigo-5": {
+    "prefix": [
+      "var(--o-indigo-5)"
+    ],
+    "body": "var(--o-indigo-5)",
+    "description": "[light: 66, 96, 194, dark: 31, 63, 179]",
+    "scope": "css,scss,less"
+  },
+  "--o-indigo-6": {
+    "prefix": [
+      "var(--o-indigo-6)"
+    ],
+    "body": "var(--o-indigo-6)",
+    "description": "[light: 31, 63, 179, dark: 66, 96, 194]",
+    "scope": "css,scss,less"
+  },
+  "--o-indigo-7": {
+    "prefix": [
+      "var(--o-indigo-7)"
+    ],
+    "body": "var(--o-indigo-7)",
+    "description": "[light: 23, 50, 159, dark: 106, 131, 209]",
+    "scope": "css,scss,less"
+  },
+  "--o-indigo-8": {
+    "prefix": [
+      "var(--o-indigo-8)"
+    ],
+    "body": "var(--o-indigo-8)",
+    "description": "[light: 16, 38, 138, dark: 150, 170, 225]",
+    "scope": "css,scss,less"
+  },
+  "--o-indigo-9": {
+    "prefix": [
+      "var(--o-indigo-9)"
+    ],
+    "body": "var(--o-indigo-9)",
+    "description": "[light: 10, 28, 118, dark: 200, 211, 240]",
+    "scope": "css,scss,less"
+  },
+  "--o-indigo-10": {
+    "prefix": [
+      "var(--o-indigo-10)"
+    ],
+    "body": "var(--o-indigo-10)",
+    "description": "[light: 5, 19, 101, dark: 232, 236, 247]",
+    "scope": "css,scss,less"
+  },
+  "--o-violet-1": {
+    "prefix": [
+      "var(--o-violet-1)"
+    ],
+    "body": "var(--o-violet-1)",
+    "description": "[light: 234, 231, 249, dark: 34, 0, 109]",
+    "scope": "css,scss,less"
+  },
+  "--o-violet-2": {
+    "prefix": [
+      "var(--o-violet-2)"
+    ],
+    "body": "var(--o-violet-2)",
+    "description": "[light: 206, 199, 242, dark: 39, 2, 130]",
+    "scope": "css,scss,less"
+  },
+  "--o-violet-3": {
+    "prefix": [
+      "var(--o-violet-3)"
+    ],
+    "body": "var(--o-violet-3)",
+    "description": "[light: 163, 147, 229, dark: 46, 7, 150]",
+    "scope": "css,scss,less"
+  },
+  "--o-violet-4": {
+    "prefix": [
+      "var(--o-violet-4)"
+    ],
+    "body": "var(--o-violet-4)",
+    "description": "[light: 124, 100, 217, dark: 53, 13, 171]",
+    "scope": "css,scss,less"
+  },
+  "--o-violet-5": {
+    "prefix": [
+      "var(--o-violet-5)"
+    ],
+    "body": "var(--o-violet-5)",
+    "description": "[light: 90, 58, 204, dark: 61, 20, 191]",
+    "scope": "css,scss,less"
+  },
+  "--o-violet-6": {
+    "prefix": [
+      "var(--o-violet-6)"
+    ],
+    "body": "var(--o-violet-6)",
+    "description": "[light: 61, 20, 191, dark: 97, 62, 201]",
+    "scope": "css,scss,less"
+  },
+  "--o-violet-7": {
+    "prefix": [
+      "var(--o-violet-7)"
+    ],
+    "body": "var(--o-violet-7)",
+    "description": "[light: 53, 13, 171, dark: 150, 130, 223]",
+    "scope": "css,scss,less"
+  },
+  "--o-violet-8": {
+    "prefix": [
+      "var(--o-violet-8)"
+    ],
+    "body": "var(--o-violet-8)",
+    "description": "[light: 46, 7, 150, dark: 182, 169, 233]",
+    "scope": "css,scss,less"
+  },
+  "--o-violet-9": {
+    "prefix": [
+      "var(--o-violet-9)"
+    ],
+    "body": "var(--o-violet-9)",
+    "description": "[light: 39, 2, 130, dark: 217, 210, 244]",
+    "scope": "css,scss,less"
+  },
+  "--o-violet-10": {
+    "prefix": [
+      "var(--o-violet-10)"
+    ],
+    "body": "var(--o-violet-10)",
+    "description": "[light: 34, 0, 109, dark: 240, 237, 250]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-1": {
+    "prefix": [
+      "var(--o-purple-1)"
+    ],
+    "body": "var(--o-purple-1)",
+    "description": "[light: 245, 232, 255, dark: 60, 0, 97]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-2": {
+    "prefix": [
+      "var(--o-purple-2)"
+    ],
+    "body": "var(--o-purple-2)",
+    "description": "[light: 225, 192, 253, dark: 77, 0, 118]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-3": {
+    "prefix": [
+      "var(--o-purple-3)"
+    ],
+    "body": "var(--o-purple-3)",
+    "description": "[light: 203, 152, 251, dark: 95, 0, 138]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-4": {
+    "prefix": [
+      "var(--o-purple-4)"
+    ],
+    "body": "var(--o-purple-4)",
+    "description": "[light: 178, 113, 248, dark: 114, 0, 159]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-5": {
+    "prefix": [
+      "var(--o-purple-5)"
+    ],
+    "body": "var(--o-purple-5)",
+    "description": "[light: 152, 75, 246, dark: 135, 2, 179]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-6": {
+    "prefix": [
+      "var(--o-purple-6)"
+    ],
+    "body": "var(--o-purple-6)",
+    "description": "[light: 123, 37, 244, dark: 161, 41, 194]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-7": {
+    "prefix": [
+      "var(--o-purple-7)"
+    ],
+    "body": "var(--o-purple-7)",
+    "description": "[light: 92, 23, 202, dark: 187, 85, 209]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-8": {
+    "prefix": [
+      "var(--o-purple-8)"
+    ],
+    "body": "var(--o-purple-8)",
+    "description": "[light: 64, 12, 160, dark: 211, 136, 225]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-9": {
+    "prefix": [
+      "var(--o-purple-9)"
+    ],
+    "body": "var(--o-purple-9)",
+    "description": "[light: 41, 4, 118, dark: 234, 192, 240]",
+    "scope": "css,scss,less"
+  },
+  "--o-purple-10": {
+    "prefix": [
+      "var(--o-purple-10)"
+    ],
+    "body": "var(--o-purple-10)",
+    "description": "[light: 22, 0, 77, dark: 245, 228, 247]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-1": {
+    "prefix": [
+      "var(--o-pink-1)"
+    ],
+    "body": "var(--o-pink-1)",
+    "description": "[light: 255, 232, 253, dark: 81, 0, 51]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-2": {
+    "prefix": [
+      "var(--o-pink-2)"
+    ],
+    "body": "var(--o-pink-2)",
+    "description": "[light: 246, 188, 243, dark: 117, 0, 70]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-3": {
+    "prefix": [
+      "var(--o-pink-3)"
+    ],
+    "body": "var(--o-pink-3)",
+    "description": "[light: 238, 146, 235, dark: 153, 0, 86]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-4": {
+    "prefix": [
+      "var(--o-pink-4)"
+    ],
+    "body": "var(--o-pink-4)",
+    "description": "[light: 229, 107, 229, dark: 188, 0, 100]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-5": {
+    "prefix": [
+      "var(--o-pink-5)"
+    ],
+    "body": "var(--o-pink-5)",
+    "description": "[light: 216, 71, 221, dark: 224, 0, 112]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-6": {
+    "prefix": [
+      "var(--o-pink-6)"
+    ],
+    "body": "var(--o-pink-6)",
+    "description": "[light: 199, 37, 212, dark: 230, 46, 132]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-7": {
+    "prefix": [
+      "var(--o-pink-7)"
+    ],
+    "body": "var(--o-pink-7)",
+    "description": "[light: 163, 23, 178, dark: 236, 95, 156]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-8": {
+    "prefix": [
+      "var(--o-pink-8)"
+    ],
+    "body": "var(--o-pink-8)",
+    "description": "[light: 127, 13, 144, dark: 243, 146, 184]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-9": {
+    "prefix": [
+      "var(--o-pink-9)"
+    ],
+    "body": "var(--o-pink-9)",
+    "description": "[light: 93, 5, 110, dark: 249, 199, 217]",
+    "scope": "css,scss,less"
+  },
+  "--o-pink-10": {
+    "prefix": [
+      "var(--o-pink-10)"
+    ],
+    "body": "var(--o-pink-10)",
+    "description": "[light: 61, 0, 77, dark: 252, 232, 239]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-white": {
+    "prefix": [
+      "var(--o-color-white)"
+    ],
+    "body": "var(--o-color-white)",
+    "description": "[light: rgb(var(--o-white)), dark: rgb(var(--o-white))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-black": {
+    "prefix": [
+      "var(--o-color-black)"
+    ],
+    "body": "var(--o-color-black)",
+    "description": "[light: rgb(var(--o-black)), dark: rgb(var(--o-black))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary1": {
+    "prefix": [
+      "var(--o-color-primary1)"
+    ],
+    "body": "var(--o-color-primary1)",
+    "description": "常规[light: rgb(var(--o-kleinblue-6)), dark: rgb(var(--o-kleinblue-6))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary2": {
+    "prefix": [
+      "var(--o-color-primary2)"
+    ],
+    "body": "var(--o-color-primary2)",
+    "description": "悬浮[light: rgb(var(--o-kleinblue-4)), dark: rgb(var(--o-kleinblue-5))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary3": {
+    "prefix": [
+      "var(--o-color-primary3)"
+    ],
+    "body": "var(--o-color-primary3)",
+    "description": "激活[light: rgb(var(--o-kleinblue-7)), dark: rgb(var(--o-kleinblue-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary4": {
+    "prefix": [
+      "var(--o-color-primary4)"
+    ],
+    "body": "var(--o-color-primary4)",
+    "description": "禁用[light: rgb(var(--o-kleinblue-3)), dark: rgb(var(--o-kleinblue-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary1-light": {
+    "prefix": [
+      "var(--o-color-primary1-light)"
+    ],
+    "body": "var(--o-color-primary1-light)",
+    "description": "常规-浅[light: rgb(var(--o-kleinblue-2)), dark: rgb(var(--o-kleinblue-2))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary2-light": {
+    "prefix": [
+      "var(--o-color-primary2-light)"
+    ],
+    "body": "var(--o-color-primary2-light)",
+    "description": "悬浮-浅[light: rgb(var(--o-kleinblue-3)), dark: rgb(var(--o-kleinblue-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary3-light": {
+    "prefix": [
+      "var(--o-color-primary3-light)"
+    ],
+    "body": "var(--o-color-primary3-light)",
+    "description": "激活-浅[light: rgb(var(--o-kleinblue-4)), dark: rgb(var(--o-kleinblue-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-primary4-light": {
+    "prefix": [
+      "var(--o-color-primary4-light)"
+    ],
+    "body": "var(--o-color-primary4-light)",
+    "description": "禁用-浅[light: rgb(var(--o-kleinblue-1)), dark: rgb(var(--o-kleinblue-1))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success1": {
+    "prefix": [
+      "var(--o-color-success1)"
+    ],
+    "body": "var(--o-color-success1)",
+    "description": "常规[light: rgb(var(--o-green-6)), dark: rgb(var(--o-green-6))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success2": {
+    "prefix": [
+      "var(--o-color-success2)"
+    ],
+    "body": "var(--o-color-success2)",
+    "description": "悬浮[light: rgb(var(--o-green-4)), dark: rgb(var(--o-green-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success3": {
+    "prefix": [
+      "var(--o-color-success3)"
+    ],
+    "body": "var(--o-color-success3)",
+    "description": "激活[light: rgb(var(--o-green-7)), dark: rgb(var(--o-green-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success4": {
+    "prefix": [
+      "var(--o-color-success4)"
+    ],
+    "body": "var(--o-color-success4)",
+    "description": "禁用[light: rgb(var(--o-green-3)), dark: rgb(var(--o-green-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success1-light": {
+    "prefix": [
+      "var(--o-color-success1-light)"
+    ],
+    "body": "var(--o-color-success1-light)",
+    "description": "常规-浅[light: rgb(var(--o-green-2)), dark: rgb(var(--o-green-2))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success2-light": {
+    "prefix": [
+      "var(--o-color-success2-light)"
+    ],
+    "body": "var(--o-color-success2-light)",
+    "description": "悬浮-浅[light: rgb(var(--o-green-3)), dark: rgb(var(--o-green-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success3-light": {
+    "prefix": [
+      "var(--o-color-success3-light)"
+    ],
+    "body": "var(--o-color-success3-light)",
+    "description": "激活-浅[light: rgb(var(--o-green-4)), dark: rgb(var(--o-green-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-success4-light": {
+    "prefix": [
+      "var(--o-color-success4-light)"
+    ],
+    "body": "var(--o-color-success4-light)",
+    "description": "禁用-浅[light: rgb(var(--o-green-1)), dark: rgb(var(--o-green-1))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning1": {
+    "prefix": [
+      "var(--o-color-warning1)"
+    ],
+    "body": "var(--o-color-warning1)",
+    "description": "常规[light: rgb(var(--o-orange-6)), dark: rgb(var(--o-orange-6))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning2": {
+    "prefix": [
+      "var(--o-color-warning2)"
+    ],
+    "body": "var(--o-color-warning2)",
+    "description": "悬浮[light: rgb(var(--o-orange-4)), dark: rgb(var(--o-orange-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning3": {
+    "prefix": [
+      "var(--o-color-warning3)"
+    ],
+    "body": "var(--o-color-warning3)",
+    "description": "激活[light: rgb(var(--o-orange-7)), dark: rgb(var(--o-orange-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning4": {
+    "prefix": [
+      "var(--o-color-warning4)"
+    ],
+    "body": "var(--o-color-warning4)",
+    "description": "禁用[light: rgb(var(--o-orange-3)), dark: rgb(var(--o-orange-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning1-light": {
+    "prefix": [
+      "var(--o-color-warning1-light)"
+    ],
+    "body": "var(--o-color-warning1-light)",
+    "description": "常规-浅[light: rgb(var(--o-orange-2)), dark: rgb(var(--o-orange-2))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning2-light": {
+    "prefix": [
+      "var(--o-color-warning2-light)"
+    ],
+    "body": "var(--o-color-warning2-light)",
+    "description": "悬浮-浅[light: rgb(var(--o-orange-3)), dark: rgb(var(--o-orange-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning3-light": {
+    "prefix": [
+      "var(--o-color-warning3-light)"
+    ],
+    "body": "var(--o-color-warning3-light)",
+    "description": "激活-浅[light: rgb(var(--o-orange-4)), dark: rgb(var(--o-orange-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-warning4-light": {
+    "prefix": [
+      "var(--o-color-warning4-light)"
+    ],
+    "body": "var(--o-color-warning4-light)",
+    "description": "禁用-浅[light: rgb(var(--o-orange-1)), dark: rgb(var(--o-orange-1))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger1": {
+    "prefix": [
+      "var(--o-color-danger1)"
+    ],
+    "body": "var(--o-color-danger1)",
+    "description": "常规[light: rgb(var(--o-red-6)), dark: rgb(var(--o-red-6))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger2": {
+    "prefix": [
+      "var(--o-color-danger2)"
+    ],
+    "body": "var(--o-color-danger2)",
+    "description": "悬浮[light: rgb(var(--o-red-4)), dark: rgb(var(--o-red-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger3": {
+    "prefix": [
+      "var(--o-color-danger3)"
+    ],
+    "body": "var(--o-color-danger3)",
+    "description": "激活[light: rgb(var(--o-red-7)), dark: rgb(var(--o-red-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger4": {
+    "prefix": [
+      "var(--o-color-danger4)"
+    ],
+    "body": "var(--o-color-danger4)",
+    "description": "禁用[light: rgb(var(--o-red-3)), dark: rgb(var(--o-red-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger1-light": {
+    "prefix": [
+      "var(--o-color-danger1-light)"
+    ],
+    "body": "var(--o-color-danger1-light)",
+    "description": "常规-浅[light: rgb(var(--o-red-2)), dark: rgb(var(--o-red-2))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger2-light": {
+    "prefix": [
+      "var(--o-color-danger2-light)"
+    ],
+    "body": "var(--o-color-danger2-light)",
+    "description": "悬浮-浅[light: rgb(var(--o-red-3)), dark: rgb(var(--o-red-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger3-light": {
+    "prefix": [
+      "var(--o-color-danger3-light)"
+    ],
+    "body": "var(--o-color-danger3-light)",
+    "description": "激活-浅[light: rgb(var(--o-red-4)), dark: rgb(var(--o-red-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-danger4-light": {
+    "prefix": [
+      "var(--o-color-danger4-light)"
+    ],
+    "body": "var(--o-color-danger4-light)",
+    "description": "禁用-浅[light: rgb(var(--o-red-1)), dark: rgb(var(--o-red-1))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-fill1": {
+    "prefix": [
+      "var(--o-color-fill1)"
+    ],
+    "body": "var(--o-color-fill1)",
+    "description": "一级填充：页面背景[light: rgb(var(--o-gray-2)), dark: rgb(var(--o-gray-3))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-fill2": {
+    "prefix": [
+      "var(--o-color-fill2)"
+    ],
+    "body": "var(--o-color-fill2)",
+    "description": "二级填充：区块、卡片[light: rgb(var(--o-gray-1)), dark: rgb(var(--o-gray-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-fill3": {
+    "prefix": [
+      "var(--o-color-fill3)"
+    ],
+    "body": "var(--o-color-fill3)",
+    "description": "三级填充：卡片[light: rgb(var(--o-gray-3)), dark: rgb(var(--o-gray-5))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control1": {
+    "prefix": [
+      "var(--o-color-control1)"
+    ],
+    "body": "var(--o-color-control1)",
+    "description": "常规，常用于边框[light: rgba(var(--o-gray-14), 0.25), dark: rgba(var(--o-gray-14), 0.25)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control2": {
+    "prefix": [
+      "var(--o-color-control2)"
+    ],
+    "body": "var(--o-color-control2)",
+    "description": "悬浮，常用于边框[light: rgb(var(--o-kleinblue-4)), dark: rgba(var(--o-gray-14), 0.6)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control3": {
+    "prefix": [
+      "var(--o-color-control3)"
+    ],
+    "body": "var(--o-color-control3)",
+    "description": "激活，常用于边框[light: rgb(var(--o-kleinblue-7)), dark: rgba(var(--o-gray-14), 0.8)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control4": {
+    "prefix": [
+      "var(--o-color-control4)"
+    ],
+    "body": "var(--o-color-control4)",
+    "description": "禁用，常用于边框[light: rgba(var(--o-gray-14), 0.1), dark: rgba(var(--o-gray-14), 0.15)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control1-light": {
+    "prefix": [
+      "var(--o-color-control1-light)"
+    ],
+    "body": "var(--o-color-control1-light)",
+    "description": "常规-浅，常用于背景[light: rgb(var(--o-gray-5)), dark: rgb(var(--o-gray-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control2-light": {
+    "prefix": [
+      "var(--o-color-control2-light)"
+    ],
+    "body": "var(--o-color-control2-light)",
+    "description": "悬浮-浅，常用于背景[light: rgb(var(--o-kleinblue-1)), dark: rgb(var(--o-gray-5))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control3-light": {
+    "prefix": [
+      "var(--o-color-control3-light)"
+    ],
+    "body": "var(--o-color-control3-light)",
+    "description": "激活-浅，常用于背景[light: rgb(var(--o-kleinblue-2)), dark: rgb(var(--o-gray-6))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control4-light": {
+    "prefix": [
+      "var(--o-color-control4-light)"
+    ],
+    "body": "var(--o-color-control4-light)",
+    "description": "禁用，常用于背景[light: rgb(var(--o-gray-3)), dark: rgb(var(--o-gray-5))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-control-light": {
+    "prefix": [
+      "var(--o-color-control-light)"
+    ],
+    "body": "var(--o-color-control-light)",
+    "description": "很浅，常用于表格背景色[light: rgb(var(--o-gray-1)), dark: rgb(var(--o-gray-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info1": {
+    "prefix": [
+      "var(--o-color-info1)"
+    ],
+    "body": "var(--o-color-info1)",
+    "description": "一级/强调/标题[light: rgba(var(--o-gray-14), 1.0), dark: rgba(var(--o-gray-14), 1.0)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info2": {
+    "prefix": [
+      "var(--o-color-info2)"
+    ],
+    "body": "var(--o-color-info2)",
+    "description": "二级/次强调/正文[light: rgba(var(--o-gray-14), 0.8), dark: rgba(var(--o-gray-14), 0.8)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info3": {
+    "prefix": [
+      "var(--o-color-info3)"
+    ],
+    "body": "var(--o-color-info3)",
+    "description": "三级/辅助信息[light: rgba(var(--o-gray-14), 0.6), dark: rgba(var(--o-gray-14), 0.6)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info4": {
+    "prefix": [
+      "var(--o-color-info4)"
+    ],
+    "body": "var(--o-color-info4)",
+    "description": "置灰/禁用[light: rgba(var(--o-gray-14), 0.4), dark: rgba(var(--o-gray-14), 0.4)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info1-inverse": {
+    "prefix": [
+      "var(--o-color-info1-inverse)"
+    ],
+    "body": "var(--o-color-info1-inverse)",
+    "description": "一级/次强调/正文反色[light: rgba(var(--o-gray-1), 1.0), dark: rgba(var(--o-gray-1), 1.0)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info2-inverse": {
+    "prefix": [
+      "var(--o-color-info2-inverse)"
+    ],
+    "body": "var(--o-color-info2-inverse)",
+    "description": "二级/辅助信息反色[light: rgba(var(--o-gray-1), 0.8), dark: rgba(var(--o-gray-1), 0.8)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info3-inverse": {
+    "prefix": [
+      "var(--o-color-info3-inverse)"
+    ],
+    "body": "var(--o-color-info3-inverse)",
+    "description": "三级/辅助信息反色[light: rgba(var(--o-gray-1), 0.6), dark: rgba(var(--o-gray-1), 0.6)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-info4-inverse": {
+    "prefix": [
+      "var(--o-color-info4-inverse)"
+    ],
+    "body": "var(--o-color-info4-inverse)",
+    "description": "置灰/禁用反色[light: rgba(var(--o-gray-1), 0.4), dark: rgba(var(--o-gray-1), 0.4)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-mask1": {
+    "prefix": [
+      "var(--o-color-mask1)"
+    ],
+    "body": "var(--o-color-mask1)",
+    "description": "全局遮罩[light: rgba(var(--o-gray-14), 0.4), dark: rgba(var(--o-gray-1), 0.4)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-mask2": {
+    "prefix": [
+      "var(--o-color-mask2)"
+    ],
+    "body": "var(--o-color-mask2)",
+    "description": "局部遮罩[light: rgba(var(--o-gray-1), 0.2), dark: rgba(var(--o-gray-4), 0.2)]",
+    "scope": "css,scss,less"
+  },
+  "--o-shadow-1": {
+    "prefix": [
+      "var(--o-shadow-1)"
+    ],
+    "body": "var(--o-shadow-1)",
+    "description": "用于卡片、小弹窗、楼层阴影[light: 0 3px 8px rgba(var(--o-gray-14), 0.08), dark: 0 3px 8px rgba(var(--o-gray-1), 0.08)]",
+    "scope": "css,scss,less"
+  },
+  "--o-shadow-2": {
+    "prefix": [
+      "var(--o-shadow-2)"
+    ],
+    "body": "var(--o-shadow-2)",
+    "description": "用于卡片悬浮阴影[light: 0 2px 24px rgba(var(--o-gray-14), 0.15), dark: 0 2px 24px rgba(var(--o-gray-1), 0.15)]",
+    "scope": "css,scss,less"
+  },
+  "--o-shadow-3": {
+    "prefix": [
+      "var(--o-shadow-3)"
+    ],
+    "body": "var(--o-shadow-3)",
+    "description": "用于提示阴影[light: 0 8px 40px rgba(var(--o-gray-14), 0.1), dark: 0 8px 40px rgba(var(--o-gray-1), 0.1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-link1": {
+    "prefix": [
+      "var(--o-color-link1)"
+    ],
+    "body": "var(--o-color-link1)",
+    "description": "常规[light: rgb(var(--o-kleinblue-6)), dark: rgb(var(--o-kleinblue-6))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-link2": {
+    "prefix": [
+      "var(--o-color-link2)"
+    ],
+    "body": "var(--o-color-link2)",
+    "description": "悬浮[light: rgb(var(--o-kleinblue-4)), dark: rgb(var(--o-kleinblue-5))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-link3": {
+    "prefix": [
+      "var(--o-color-link3)"
+    ],
+    "body": "var(--o-color-link3)",
+    "description": "激活[light: rgb(var(--o-kleinblue-7)), dark: rgb(var(--o-kleinblue-7))]",
+    "scope": "css,scss,less"
+  },
+  "--o-color-link4": {
+    "prefix": [
+      "var(--o-color-link4)"
+    ],
+    "body": "var(--o-color-link4)",
+    "description": "禁用[light: rgb(var(--o-kleinblue-3)), dark: rgb(var(--o-kleinblue-4))]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-1": {
+    "prefix": [
+      "var(--o-gap-1)"
+    ],
+    "body": "var(--o-gap-1)",
+    "description": "用于组件之间的间距1[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-2": {
+    "prefix": [
+      "var(--o-gap-2)"
+    ],
+    "body": "var(--o-gap-2)",
+    "description": "用于组件之间的间距2[light: 8px, dark: 8px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-3": {
+    "prefix": [
+      "var(--o-gap-3)"
+    ],
+    "body": "var(--o-gap-3)",
+    "description": "用于组件之间的间距3[light: 12px, dark: 12px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-4": {
+    "prefix": [
+      "var(--o-gap-4)"
+    ],
+    "body": "var(--o-gap-4)",
+    "description": "用于组件之间的间距4[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-5": {
+    "prefix": [
+      "var(--o-gap-5)"
+    ],
+    "body": "var(--o-gap-5)",
+    "description": "用于组件之间的间距5[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-6": {
+    "prefix": [
+      "var(--o-gap-6)"
+    ],
+    "body": "var(--o-gap-6)",
+    "description": "用于组件之间的间距6[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-7": {
+    "prefix": [
+      "var(--o-gap-7)"
+    ],
+    "body": "var(--o-gap-7)",
+    "description": "用于组件之间的间距7[light: 40px, dark: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-8": {
+    "prefix": [
+      "var(--o-gap-8)"
+    ],
+    "body": "var(--o-gap-8)",
+    "description": "用于组件之间的间距8[light: 48px, dark: 48px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-9": {
+    "prefix": [
+      "var(--o-gap-9)"
+    ],
+    "body": "var(--o-gap-9)",
+    "description": "用于组件之间的间距9[light: 64px, dark: 64px]",
+    "scope": "css,scss,less"
+  },
+  "--o-gap-10": {
+    "prefix": [
+      "var(--o-gap-10)"
+    ],
+    "body": "var(--o-gap-10)",
+    "description": "用于组件之间的间距10[light: 72px, dark: 72px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-2xs": {
+    "prefix": [
+      "var(--o-control_size-2xs)"
+    ],
+    "body": "var(--o-control_size-2xs)",
+    "description": "超小尺寸[light: 14px, dark: 14px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-xs": {
+    "prefix": [
+      "var(--o-control_size-xs)"
+    ],
+    "body": "var(--o-control_size-xs)",
+    "description": "小尺寸[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-s": {
+    "prefix": [
+      "var(--o-control_size-s)"
+    ],
+    "body": "var(--o-control_size-s)",
+    "description": "小尺寸[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-m": {
+    "prefix": [
+      "var(--o-control_size-m)"
+    ],
+    "body": "var(--o-control_size-m)",
+    "description": "尺寸[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-l": {
+    "prefix": [
+      "var(--o-control_size-l)"
+    ],
+    "body": "var(--o-control_size-l)",
+    "description": "尺寸[light: 40px, dark: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-xl": {
+    "prefix": [
+      "var(--o-control_size-xl)"
+    ],
+    "body": "var(--o-control_size-xl)",
+    "description": "尺寸[light: 48px, dark: 48px]",
+    "scope": "css,scss,less"
+  },
+  "--o-control_size-2xl": {
+    "prefix": [
+      "var(--o-control_size-2xl)"
+    ],
+    "body": "var(--o-control_size-2xl)",
+    "description": "尺寸[light: 56px, dark: 56px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-xs": {
+    "prefix": [
+      "var(--o-icon_size-xs)"
+    ],
+    "body": "var(--o-icon_size-xs)",
+    "description": "超小尺寸图标[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-s": {
+    "prefix": [
+      "var(--o-icon_size-s)"
+    ],
+    "body": "var(--o-icon_size-s)",
+    "description": "小尺寸图标[light: 20px, dark: 20px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-m": {
+    "prefix": [
+      "var(--o-icon_size-m)"
+    ],
+    "body": "var(--o-icon_size-m)",
+    "description": "中尺寸图标[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-l": {
+    "prefix": [
+      "var(--o-icon_size-l)"
+    ],
+    "body": "var(--o-icon_size-l)",
+    "description": "大尺寸图标[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-xl": {
+    "prefix": [
+      "var(--o-icon_size-xl)"
+    ],
+    "body": "var(--o-icon_size-xl)",
+    "description": "超大尺寸图标[light: 40px, dark: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-2xl": {
+    "prefix": [
+      "var(--o-icon_size-2xl)"
+    ],
+    "body": "var(--o-icon_size-2xl)",
+    "description": "2xl尺寸图标[light: 48px, dark: 48px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-3xl": {
+    "prefix": [
+      "var(--o-icon_size-3xl)"
+    ],
+    "body": "var(--o-icon_size-3xl)",
+    "description": "3xl尺寸图标[light: 56px, dark: 56px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size-4xl": {
+    "prefix": [
+      "var(--o-icon_size-4xl)"
+    ],
+    "body": "var(--o-icon_size-4xl)",
+    "description": "4xl尺寸图标[light: 64px, dark: 64px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size_control-xs": {
+    "prefix": [
+      "var(--o-icon_size_control-xs)"
+    ],
+    "body": "var(--o-icon_size_control-xs)",
+    "description": "超小尺寸控件图标(组件使用)[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size_control-s": {
+    "prefix": [
+      "var(--o-icon_size_control-s)"
+    ],
+    "body": "var(--o-icon_size_control-s)",
+    "description": "小尺寸控件图标(组件使用)[light: 20px, dark: 20px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size_control-m": {
+    "prefix": [
+      "var(--o-icon_size_control-m)"
+    ],
+    "body": "var(--o-icon_size_control-m)",
+    "description": "中尺寸控件图标(组件使用)[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size_control-l": {
+    "prefix": [
+      "var(--o-icon_size_control-l)"
+    ],
+    "body": "var(--o-icon_size_control-l)",
+    "description": "大尺寸控件图标(组件使用)[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-icon_size_control-xl": {
+    "prefix": [
+      "var(--o-icon_size_control-xl)"
+    ],
+    "body": "var(--o-icon_size_control-xl)",
+    "description": "超大尺寸控件图标(组件使用)[light: 40px, dark: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-display1": {
+    "prefix": [
+      "var(--o-font_size-display1)"
+    ],
+    "body": "var(--o-font_size-display1)",
+    "description": "一级数据展示[light: 56px, dark: 56px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-display2": {
+    "prefix": [
+      "var(--o-font_size-display2)"
+    ],
+    "body": "var(--o-font_size-display2)",
+    "description": "二级数据展示[light: 48px, dark: 48px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-display3": {
+    "prefix": [
+      "var(--o-font_size-display3)"
+    ],
+    "body": "var(--o-font_size-display3)",
+    "description": "三级数据展示[light: 40px, dark: 40px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h1": {
+    "prefix": [
+      "var(--o-font_size-h1)"
+    ],
+    "body": "var(--o-font_size-h1)",
+    "description": "一级标题[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h2": {
+    "prefix": [
+      "var(--o-font_size-h2)"
+    ],
+    "body": "var(--o-font_size-h2)",
+    "description": "二级标题[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h3": {
+    "prefix": [
+      "var(--o-font_size-h3)"
+    ],
+    "body": "var(--o-font_size-h3)",
+    "description": "三级标题[light: 22px, dark: 22px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-h4": {
+    "prefix": [
+      "var(--o-font_size-h4)"
+    ],
+    "body": "var(--o-font_size-h4)",
+    "description": "四级标题[light: 20px, dark: 20px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-text1": {
+    "prefix": [
+      "var(--o-font_size-text1)"
+    ],
+    "body": "var(--o-font_size-text1)",
+    "description": "常规正文[light: 16px, dark: 16px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-text2": {
+    "prefix": [
+      "var(--o-font_size-text2)"
+    ],
+    "body": "var(--o-font_size-text2)",
+    "description": "大号正文[light: 18px, dark: 18px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-tip1": {
+    "prefix": [
+      "var(--o-font_size-tip1)"
+    ],
+    "body": "var(--o-font_size-tip1)",
+    "description": "提示文本1[light: 14px, dark: 14px]",
+    "scope": "css,scss,less"
+  },
+  "--o-font_size-tip2": {
+    "prefix": [
+      "var(--o-font_size-tip2)"
+    ],
+    "body": "var(--o-font_size-tip2)",
+    "description": "提示文本2[light: 12px, dark: 12px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-display1": {
+    "prefix": [
+      "var(--o-line_height-display1)"
+    ],
+    "body": "var(--o-line_height-display1)",
+    "description": "一级数据展示[light: 80px, dark: 80px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-display2": {
+    "prefix": [
+      "var(--o-line_height-display2)"
+    ],
+    "body": "var(--o-line_height-display2)",
+    "description": "二级数据展示[light: 64px, dark: 64px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-display3": {
+    "prefix": [
+      "var(--o-line_height-display3)"
+    ],
+    "body": "var(--o-line_height-display3)",
+    "description": "三级数据展示[light: 56px, dark: 56px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h1": {
+    "prefix": [
+      "var(--o-line_height-h1)"
+    ],
+    "body": "var(--o-line_height-h1)",
+    "description": "一级标题[light: 44px, dark: 44px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h2": {
+    "prefix": [
+      "var(--o-line_height-h2)"
+    ],
+    "body": "var(--o-line_height-h2)",
+    "description": "二级标题[light: 32px, dark: 32px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h3": {
+    "prefix": [
+      "var(--o-line_height-h3)"
+    ],
+    "body": "var(--o-line_height-h3)",
+    "description": "三级标题[light: 30px, dark: 30px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-h4": {
+    "prefix": [
+      "var(--o-line_height-h4)"
+    ],
+    "body": "var(--o-line_height-h4)",
+    "description": "四级标题[light: 28px, dark: 28px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-text1": {
+    "prefix": [
+      "var(--o-line_height-text1)"
+    ],
+    "body": "var(--o-line_height-text1)",
+    "description": "正文[light: 24px, dark: 24px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-text2": {
+    "prefix": [
+      "var(--o-line_height-text2)"
+    ],
+    "body": "var(--o-line_height-text2)",
+    "description": "正文-大[light: 26px, dark: 26x]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-tip1": {
+    "prefix": [
+      "var(--o-line_height-tip1)"
+    ],
+    "body": "var(--o-line_height-tip1)",
+    "description": "提示文本1[light: 22px, dark: 22px]",
+    "scope": "css,scss,less"
+  },
+  "--o-line_height-tip2": {
+    "prefix": [
+      "var(--o-line_height-tip2)"
+    ],
+    "body": "var(--o-line_height-tip2)",
+    "description": "提示文本2[light: 18px, dark: 18px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-xs": {
+    "prefix": [
+      "var(--o-radius-xs)"
+    ],
+    "body": "var(--o-radius-xs)",
+    "description": "超小尺寸圆角[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-s": {
+    "prefix": [
+      "var(--o-radius-s)"
+    ],
+    "body": "var(--o-radius-s)",
+    "description": "小尺寸圆角[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-m": {
+    "prefix": [
+      "var(--o-radius-m)"
+    ],
+    "body": "var(--o-radius-m)",
+    "description": "中尺寸圆角[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-l": {
+    "prefix": [
+      "var(--o-radius-l)"
+    ],
+    "body": "var(--o-radius-l)",
+    "description": "大尺寸圆角[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius-xl": {
+    "prefix": [
+      "var(--o-radius-xl)"
+    ],
+    "body": "var(--o-radius-xl)",
+    "description": "大尺寸圆角,一般用于卡片[light: 0px, dark: 0px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius_control-xs": {
+    "prefix": [
+      "var(--o-radius_control-xs)"
+    ],
+    "body": "var(--o-radius_control-xs)",
+    "description": "超小尺寸控件圆角(组件使用)[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius_control-s": {
+    "prefix": [
+      "var(--o-radius_control-s)"
+    ],
+    "body": "var(--o-radius_control-s)",
+    "description": "小尺寸控件圆角(组件使用)[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius_control-m": {
+    "prefix": [
+      "var(--o-radius_control-m)"
+    ],
+    "body": "var(--o-radius_control-m)",
+    "description": "中尺寸控件圆角(组件使用)[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-radius_control-l": {
+    "prefix": [
+      "var(--o-radius_control-l)"
+    ],
+    "body": "var(--o-radius_control-l)",
+    "description": "大尺寸控件圆角(组件使用)[light: 4px, dark: 4px]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-s": {
+    "prefix": [
+      "var(--o-duration-s)"
+    ],
+    "body": "var(--o-duration-s)",
+    "description": "用于退出屏幕的动画[light: 200ms, dark: 200ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-m1": {
+    "prefix": [
+      "var(--o-duration-m1)"
+    ],
+    "body": "var(--o-duration-m1)",
+    "description": "用于当曲线为standard-in时进入屏幕的动画[light: 250ms, dark: 250ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-m2": {
+    "prefix": [
+      "var(--o-duration-m2)"
+    ],
+    "body": "var(--o-duration-m2)",
+    "description": "用于当曲线为standard时开始、结束的动画[light: 300ms, dark: 300ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-m3": {
+    "prefix": [
+      "var(--o-duration-m3)"
+    ],
+    "body": "var(--o-duration-m3)",
+    "description": "用于当曲线为emphasized-in时进入屏幕的动画[light: 400ms, dark: 400ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-l": {
+    "prefix": [
+      "var(--o-duration-l)"
+    ],
+    "body": "var(--o-duration-l)",
+    "description": "用于当曲线为emphasized时开始、结束的动画[light: 500ms, dark: 500ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-duration-xl": {
+    "prefix": [
+      "var(--o-duration-xl)"
+    ],
+    "body": "var(--o-duration-xl)",
+    "description": "用于当曲线为emphasized时，轮播切换动画[light: 1000ms, dark: 1000ms]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-linear": {
+    "prefix": [
+      "var(--o-easing-linear)"
+    ],
+    "body": "var(--o-easing-linear)",
+    "description": "线性曲线[light: cubic-bezier(0, 0, 1, 1), dark: cubic-bezier(0, 0, 1, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-standard": {
+    "prefix": [
+      "var(--o-easing-standard)"
+    ],
+    "body": "var(--o-easing-standard)",
+    "description": "用于组件[light: cubic-bezier(0.2, 0, 0, 1), dark: cubic-bezier(0.2, 0, 0, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-standard-in": {
+    "prefix": [
+      "var(--o-easing-standard-in)"
+    ],
+    "body": "var(--o-easing-standard-in)",
+    "description": "用于组件[light: cubic-bezier(0, 0, 0, 1), dark: cubic-bezier(0, 0, 0, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-standard-out": {
+    "prefix": [
+      "var(--o-easing-standard-out)"
+    ],
+    "body": "var(--o-easing-standard-out)",
+    "description": "用于组件[light: cubic-bezier(0.3, 0, 1, 1), dark: cubic-bezier(0.3, 0, 1, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-emphasized": {
+    "prefix": [
+      "var(--o-easing-emphasized)"
+    ],
+    "body": "var(--o-easing-emphasized)",
+    "description": "用于大卡片、场景切换[light: cubic-bezier(0.2, 0, 0, 1), dark: cubic-bezier(0.2, 0, 0, 1)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-emphasized-in": {
+    "prefix": [
+      "var(--o-easing-emphasized-in)"
+    ],
+    "body": "var(--o-easing-emphasized-in)",
+    "description": "用于大卡片、场景切换[light: cubic-bezier(0.3, 0, 0.8, 0.15), dark: cubic-bezier(0.3, 0, 0.8, 0.15)]",
+    "scope": "css,scss,less"
+  },
+  "--o-easing-emphasized-out": {
+    "prefix": [
+      "var(--o-easing-emphasized-out)"
+    ],
+    "body": "var(--o-easing-emphasized-out)",
+    "description": "用于大卡片、场景切换[light: cubic-bezier(0.05, 0.7, 0.1, 1), dark: cubic-bezier(0.05, 0.7, 0.1, 1)]",
+    "scope": "css,scss,less"
+  }
+}
\ No newline at end of file
diff --git a/packages/opendesign/src/theme/openeuler/index.scss b/packages/opendesign/src/theme/openeuler/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5fcff8d7cac882f3a50d6ae1f2756ce8aeb7dabb
--- /dev/null
+++ b/packages/opendesign/src/theme/openeuler/index.scss
@@ -0,0 +1,53 @@
+// 变量
+@use './e.dark.token.css' as *;
+@use './e.light.token.css' as *;
+@use '../common.scss' as *;
+
+// 样式
+@use '../../index.scss' as *;
+
+// 皮肤
+@use '../../anchor/style/theme-openeuler.scss' as *;
+@use '../../badge/style/theme-openeuler.scss' as *;
+@use '../../breadcrumb/style/theme-openeuler.scss' as *;
+@use '../../button/style/theme-openeuler.scss' as *;
+@use '../../card/style/theme-openeuler.scss' as *;
+@use '../../carousel/style/theme-openeuler.scss' as *;
+@use '../../cascader/style/theme-openeuler.scss' as *;
+@use '../../checkbox/style/theme-openeuler.scss' as *;
+@use '../../checkbox-group/style/theme-openeuler.scss' as *;
+@use '../../collapse/style/theme-openeuler.scss' as *;
+@use '../../dialog/style/theme-openeuler.scss' as *;
+@use '../../divider/style/theme-openeuler.scss' as *;
+@use '../../dropdown/style/theme-openeuler.scss' as *;
+@use '../../figure/style/theme-openeuler.scss' as *;
+@use '../../form/style/theme-openeuler.scss' as *;
+@use '../../grid/style/theme-openeuler.scss' as *;
+@use '../../icon/style/theme-openeuler.scss' as *;
+@use '../../input/style/theme-openeuler.scss' as *;
+@use '../../input-number/style/theme-openeuler.scss' as *;
+@use '../../layer/style/theme-openeuler.scss' as *;
+@use '../../link/style/theme-openeuler.scss' as *;
+@use '../../loading/style/theme-openeuler.scss' as *;
+@use '../../menu/style/theme-openeuler.scss' as *;
+@use '../../message/style/theme-openeuler.scss' as *;
+@use '../../option/style/theme-openeuler.scss' as *;
+@use '../../pagination/style/theme-openeuler.scss' as *;
+@use '../../popover/style/theme-openeuler.scss' as *;
+@use '../../popup/style/theme-openeuler.scss' as *;
+@use '../../progress/style/theme-openeuler.scss' as *;
+@use '../../radio/style/theme-openeuler.scss' as *;
+@use '../../radio-group/style/theme-openeuler.scss' as *;
+@use '../../rate/style/theme-openeuler.scss' as *;
+@use '../../result/style/theme-openeuler.scss' as *;
+@use '../../scrollbar/style/theme-openeuler.scss' as *;
+@use '../../select/style/theme-openeuler.scss' as *;
+@use '../../skeleton/style/theme-openeuler.scss' as *;
+@use '../../switch/style/theme-openeuler.scss' as *;
+@use '../../tab/style/theme-openeuler.scss' as *;
+@use '../../table/style/theme-openeuler.scss' as *;
+@use '../../tag/style/theme-openeuler.scss' as *;
+@use '../../textarea/style/theme-openeuler.scss' as *;
+@use '../../toggle/style/theme-openeuler.scss' as *;
+@use '../../upload/style/theme-openeuler.scss' as *;
+@use '../../virtual-list/style/theme-openeuler.scss' as *;
diff --git a/packages/opendesign/src/theme/openeuler/token.config.ts b/packages/opendesign/src/theme/openeuler/token.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b5b4f86195e3220b685e982d04b3f89bee30d463
--- /dev/null
+++ b/packages/opendesign/src/theme/openeuler/token.config.ts
@@ -0,0 +1,16 @@
+module.exports = {
+  prefix: '--o-',
+  themeMap: [
+    {
+      key: 'light',
+      name: 'e.light',
+    },
+    {
+      key: 'dark',
+      name: 'e.dark',
+    },
+  ],
+  defaultTheme: '',
+  tokenFile: ['./token.json'],
+  codeSnippetsFile: './e.token.code-snippets',
+};
diff --git a/packages/opendesign/src/theme/openeuler/token.json b/packages/opendesign/src/theme/openeuler/token.json
new file mode 100644
index 0000000000000000000000000000000000000000..a1fa8005713b06d8ddc1546f46fc456e2d31f67d
--- /dev/null
+++ b/packages/opendesign/src/theme/openeuler/token.json
@@ -0,0 +1,2707 @@
+{
+  "white": {
+    "name": "白色",
+    "type": "palette",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "white",
+        "value": {
+          "light": "255, 255, 255",
+          "dark": "255, 255, 255"
+        }
+      }
+    ]
+  },
+  "black": {
+    "name": "黑色",
+    "type": "palette",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "black",
+        "value": {
+          "light": "0, 0, 0",
+          "dark": "0, 0, 0"
+        }
+      }
+    ]
+  },
+  "gray": {
+    "name": "中性灰",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "gray-1",
+        "value": {
+          "light": "255, 255, 255",
+          "dark": "0, 0, 0"
+        }
+      },
+      {
+        "key": "gray-2",
+        "value": {
+          "light": "243, 243, 245",
+          "dark": "18, 18, 20"
+        }
+      },
+      {
+        "key": "gray-3",
+        "value": {
+          "light": "237, 237, 240",
+          "dark": "26, 26, 28"
+        }
+      },
+      {
+        "key": "gray-4",
+        "value": {
+          "light": "232, 232, 235",
+          "dark": "36, 36, 39"
+        }
+      },
+      {
+        "key": "gray-5",
+        "value": {
+          "light": "222, 222, 227",
+          "dark": "43, 43, 47"
+        }
+      },
+      {
+        "key": "gray-6",
+        "value": {
+          "light": "210, 210, 217",
+          "dark": "53, 53, 57"
+        }
+      },
+      {
+        "key": "gray-7",
+        "value": {
+          "light": "186, 186, 191",
+          "dark": "63, 63, 67"
+        }
+      },
+      {
+        "key": "gray-8",
+        "value": {
+          "light": "149, 149, 156",
+          "dark": "85, 85, 88"
+        }
+      },
+      {
+        "key": "gray-9",
+        "value": {
+          "light": "111, 111, 117",
+          "dark": "118, 118, 122"
+        }
+      },
+      {
+        "key": "gray-10",
+        "value": {
+          "light": "85, 85, 92",
+          "dark": "156, 156, 159"
+        }
+      },
+      {
+        "key": "gray-11",
+        "value": {
+          "light": "61, 61, 66",
+          "dark": "181, 181, 185"
+        }
+      },
+      {
+        "key": "gray-12",
+        "value": {
+          "light": "37, 37, 41",
+          "dark": "208, 208, 210"
+        }
+      },
+      {
+        "key": "gray-13",
+        "value": {
+          "light": "21, 21, 23",
+          "dark": "235, 235, 238"
+        }
+      },
+      {
+        "key": "gray-14",
+        "value": {
+          "light": "0, 0, 0",
+          "dark": "255, 255, 255"
+        }
+      }
+    ]
+  },
+  "kleinblue": {
+    "name": "品牌色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "kleinblue-1",
+        "value": {
+          "light": "235, 241, 250",
+          "dark": "14, 26, 69"
+        }
+      },
+      {
+        "key": "kleinblue-2",
+        "value": {
+          "light": "206, 219, 245",
+          "dark": "18, 34, 87"
+        }
+      },
+      {
+        "key": "kleinblue-3",
+        "value": {
+          "light": "132, 161, 220",
+          "dark": "29, 51, 119"
+        }
+      },
+      {
+        "key": "kleinblue-4",
+        "value": {
+          "light": "81, 119, 202",
+          "dark": "42, 72, 158"
+        }
+      },
+      {
+        "key": "kleinblue-5",
+        "value": {
+          "light": "37, 81, 185",
+          "dark": "57, 97, 202"
+        }
+      },
+      {
+        "key": "kleinblue-6",
+        "value": {
+          "light": "0, 47, 167",
+          "dark": "73, 122, 248"
+        }
+      },
+      {
+        "key": "kleinblue-7",
+        "value": {
+          "light": "0, 39, 147",
+          "dark": "110, 148, 243"
+        }
+      },
+      {
+        "key": "kleinblue-8",
+        "value": {
+          "light": "0, 31, 126",
+          "dark": "140, 171, 234"
+        }
+      },
+      {
+        "key": "kleinblue-9",
+        "value": {
+          "light": "0, 24, 106",
+          "dark": "176, 199, 241"
+        }
+      },
+      {
+        "key": "kleinblue-10",
+        "value": {
+          "light": "0, 18, 85",
+          "dark": "215, 227, 248"
+        }
+      }
+    ]
+  },
+  "yellow": {
+    "name": "黄色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "yellow-1",
+        "value": {
+          "light": "254, 252, 233",
+          "dark": "81, 46, 9"
+        }
+      },
+      {
+        "key": "yellow-2",
+        "value": {
+          "light": "252, 248, 202",
+          "dark": "121, 75, 15"
+        }
+      },
+      {
+        "key": "yellow-3",
+        "value": {
+          "light": "249, 237, 149",
+          "dark": "161, 107, 22"
+        }
+      },
+      {
+        "key": "yellow-4",
+        "value": {
+          "light": "246, 224, 98",
+          "dark": "202, 143, 30"
+        }
+      },
+      {
+        "key": "yellow-5",
+        "value": {
+          "light": "243, 207, 49",
+          "dark": "242, 183, 38"
+        }
+      },
+      {
+        "key": "yellow-6",
+        "value": {
+          "light": "240, 188, 0",
+          "dark": "245, 202, 80"
+        }
+      },
+      {
+        "key": "yellow-7",
+        "value": {
+          "light": "200, 147, 0",
+          "dark": "247, 219, 122"
+        }
+      },
+      {
+        "key": "yellow-8",
+        "value": {
+          "light": "160, 109, 0",
+          "dark": "250, 234, 166"
+        }
+      },
+      {
+        "key": "yellow-9",
+        "value": {
+          "light": "120, 76, 0",
+          "dark": "252, 246, 210"
+        }
+      },
+      {
+        "key": "yellow-10",
+        "value": {
+          "light": "80, 47, 0",
+          "dark": "254, 251, 237"
+        }
+      }
+    ]
+  },
+  "orange": {
+    "name": "橘红色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "orange-1",
+        "value": {
+          "light": "255, 246, 232",
+          "dark": "77, 24, 0"
+        }
+      },
+      {
+        "key": "orange-2",
+        "value": {
+          "light": "254, 226, 186",
+          "dark": "120, 42, 1"
+        }
+      },
+      {
+        "key": "orange-3",
+        "value": {
+          "light": "253, 202, 140",
+          "dark": "163, 68, 8"
+        }
+      },
+      {
+        "key": "orange-4",
+        "value": {
+          "light": "252, 176, 95",
+          "dark": "207, 97, 19"
+        }
+      },
+      {
+        "key": "orange-5",
+        "value": {
+          "light": "251, 147, 50",
+          "dark": "250, 130, 33"
+        }
+      },
+      {
+        "key": "orange-6",
+        "value": {
+          "light": "250, 115, 5",
+          "dark": "251, 143, 43"
+        }
+      },
+      {
+        "key": "orange-7",
+        "value": {
+          "light": "207, 88, 3",
+          "dark": "252, 174, 91"
+        }
+      },
+      {
+        "key": "orange-8",
+        "value": {
+          "light": "163, 64, 2",
+          "dark": "253, 202, 139"
+        }
+      },
+      {
+        "key": "orange-9",
+        "value": {
+          "light": "120, 42, 1",
+          "dark": "254, 227, 188"
+        }
+      },
+      {
+        "key": "orange-10",
+        "value": {
+          "light": "77, 24, 0",
+          "dark": "255, 248, 237"
+        }
+      }
+    ]
+  },
+  "red": {
+    "name": "红色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "red-1",
+        "value": {
+          "light": "255, 234, 232",
+          "dark": "77, 0, 17"
+        }
+      },
+      {
+        "key": "red-2",
+        "value": {
+          "light": "250, 185, 182",
+          "dark": "115, 3, 24"
+        }
+      },
+      {
+        "key": "red-3",
+        "value": {
+          "light": "245, 136, 134",
+          "dark": "153, 9, 31"
+        }
+      },
+      {
+        "key": "red-4",
+        "value": {
+          "light": "240, 87, 90",
+          "dark": "192, 17, 37"
+        }
+      },
+      {
+        "key": "red-5",
+        "value": {
+          "light": "235, 43, 52",
+          "dark": "230, 28, 43"
+        }
+      },
+      {
+        "key": "red-6",
+        "value": {
+          "light": "230, 0, 18",
+          "dark": "235, 35, 45"
+        }
+      },
+      {
+        "key": "red-7",
+        "value": {
+          "light": "192, 0, 22",
+          "dark": "240, 82, 85"
+        }
+      },
+      {
+        "key": "red-8",
+        "value": {
+          "light": "153, 0, 23",
+          "dark": "245, 132, 130"
+        }
+      },
+      {
+        "key": "red-9",
+        "value": {
+          "light": "115, 0, 21",
+          "dark": "250, 183, 180"
+        }
+      },
+      {
+        "key": "red-10",
+        "value": {
+          "light": "77, 0, 17",
+          "dark": "255, 234, 232"
+        }
+      }
+    ]
+  },
+  "huaweired": {
+    "name": "华为红",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "red-huawei",
+        "value": {
+          "light": "199, 0, 11",
+          "dark": "199, 0, 11"
+        }
+      }
+    ]
+  },
+  "green": {
+    "name": "绿色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "green-1",
+        "value": {
+          "light": "232, 255, 238",
+          "dark": "0, 77, 42"
+        }
+      },
+      {
+        "key": "green-2",
+        "value": {
+          "light": "177, 239, 195",
+          "dark": "2, 102, 53"
+        }
+      },
+      {
+        "key": "green-3",
+        "value": {
+          "light": "128, 224, 158",
+          "dark": "10, 127, 66"
+        }
+      },
+      {
+        "key": "green-4",
+        "value": {
+          "light": "84, 208, 127",
+          "dark": "22, 152, 80"
+        }
+      },
+      {
+        "key": "green-5",
+        "value": {
+          "light": "45, 193, 101",
+          "dark": "36, 177, 95"
+        }
+      },
+      {
+        "key": "green-6",
+        "value": {
+          "light": "11, 177, 81",
+          "dark": "51, 193, 104"
+        }
+      },
+      {
+        "key": "green-7",
+        "value": {
+          "light": "7, 152, 72",
+          "dark": "90, 208, 131"
+        }
+      },
+      {
+        "key": "green-8",
+        "value": {
+          "light": "4, 127, 63",
+          "dark": "135, 224, 163"
+        }
+      },
+      {
+        "key": "green-9",
+        "value": {
+          "light": "2, 102, 53",
+          "dark": "185, 239, 200"
+        }
+      },
+      {
+        "key": "green-10",
+        "value": {
+          "light": "0, 77, 42",
+          "dark": "240, 255, 244"
+        }
+      }
+    ]
+  },
+  "amber": {
+    "name": "琥珀色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "amber-1",
+        "value": {
+          "light": "253, 247, 232",
+          "dark": "77, 30, 0"
+        }
+      },
+      {
+        "key": "amber-2",
+        "value": {
+          "light": "250, 237, 200",
+          "dark": "116, 51, 0"
+        }
+      },
+      {
+        "key": "amber-3",
+        "value": {
+          "light": "245, 215, 147",
+          "dark": "154, 76, 0"
+        }
+      },
+      {
+        "key": "amber-4",
+        "value": {
+          "light": "241, 191, 96",
+          "dark": "193, 105, 0"
+        }
+      },
+      {
+        "key": "amber-5",
+        "value": {
+          "light": "236, 165, 47",
+          "dark": "231, 137, 0"
+        }
+      },
+      {
+        "key": "amber-6",
+        "value": {
+          "light": "231, 137, 0",
+          "dark": "236, 165, 47"
+        }
+      },
+      {
+        "key": "amber-7",
+        "value": {
+          "light": "193, 105, 0",
+          "dark": "241, 191, 96"
+        }
+      },
+      {
+        "key": "amber-8",
+        "value": {
+          "light": "154, 76, 0",
+          "dark": "245, 215, 147"
+        }
+      },
+      {
+        "key": "amber-9",
+        "value": {
+          "light": "116, 51, 0",
+          "dark": "250, 237, 200"
+        }
+      },
+      {
+        "key": "amber-10",
+        "value": {
+          "light": "77, 30, 0",
+          "dark": "253, 247, 232"
+        }
+      }
+    ]
+  },
+  "lime": {
+    "name": "黄绿色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "lime-1",
+        "value": {
+          "light": "243, 250, 230",
+          "dark": "51, 67, 0"
+        }
+      },
+      {
+        "key": "lime-2",
+        "value": {
+          "light": "229, 244, 195",
+          "dark": "78, 101, 0"
+        }
+      },
+      {
+        "key": "lime-3",
+        "value": {
+          "light": "208, 233, 140",
+          "dark": "107, 134, 0"
+        }
+      },
+      {
+        "key": "lime-4",
+        "value": {
+          "light": "191, 223, 89",
+          "dark": "134, 168, 0"
+        }
+      },
+      {
+        "key": "lime-5",
+        "value": {
+          "light": "177, 212, 42",
+          "dark": "167, 201, 0"
+        }
+      },
+      {
+        "key": "lime-6",
+        "value": {
+          "light": "167, 201, 0",
+          "dark": "177, 212, 42"
+        }
+      },
+      {
+        "key": "lime-7",
+        "value": {
+          "light": "136, 168, 0",
+          "dark": "191, 223, 89"
+        }
+      },
+      {
+        "key": "lime-8",
+        "value": {
+          "light": "107, 134, 0",
+          "dark": "208, 233, 140"
+        }
+      },
+      {
+        "key": "lime-9",
+        "value": {
+          "light": "78, 101, 0",
+          "dark": "229, 244, 195"
+        }
+      },
+      {
+        "key": "lime-10",
+        "value": {
+          "light": "51, 67, 0",
+          "dark": "243, 250, 230"
+        }
+      }
+    ]
+  },
+  "light-green": {
+    "name": "浅绿色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "light-green-1",
+        "value": {
+          "light": "242, 247, 231",
+          "dark": "33, 60, 7"
+        }
+      },
+      {
+        "key": "light-green-2",
+        "value": {
+          "light": "225, 240, 199",
+          "dark": "51, 90, 11"
+        }
+      },
+      {
+        "key": "light-green-3",
+        "value": {
+          "light": "195, 225, 148",
+          "dark": "70, 119, 16"
+        }
+      },
+      {
+        "key": "light-green-4",
+        "value": {
+          "light": "166, 209, 103",
+          "dark": "91, 149, 21"
+        }
+      },
+      {
+        "key": "light-green-5",
+        "value": {
+          "light": "138, 194, 62",
+          "dark": "112, 179, 27"
+        }
+      },
+      {
+        "key": "light-green-6",
+        "value": {
+          "light": "112, 179, 27",
+          "dark": "184, 220, 48"
+        }
+      },
+      {
+        "key": "light-green-7",
+        "value": {
+          "light": "91, 149, 21",
+          "dark": "166, 209, 103"
+        }
+      },
+      {
+        "key": "light-green-8",
+        "value": {
+          "light": "70, 119, 16",
+          "dark": "195, 225, 148"
+        }
+      },
+      {
+        "key": "light-green-9",
+        "value": {
+          "light": "51, 90, 11",
+          "dark": "225, 240, 199"
+        }
+      },
+      {
+        "key": "light-green-10",
+        "value": {
+          "light": "33, 60, 7",
+          "dark": "242, 247, 231"
+        }
+      }
+    ]
+  },
+  "teal": {
+    "name": "蓝绿色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "teal-1",
+        "value": {
+          "light": "228, 247, 241",
+          "dark": "0, 60, 48"
+        }
+      },
+      {
+        "key": "teal-2",
+        "value": {
+          "light": "192, 240, 224",
+          "dark": "0, 90, 71"
+        }
+      },
+      {
+        "key": "teal-3",
+        "value": {
+          "light": "135, 225, 197",
+          "dark": "0, 119, 93"
+        }
+      },
+      {
+        "key": "teal-4",
+        "value": {
+          "light": "84, 209, 173",
+          "dark": "0, 149, 113"
+        }
+      },
+      {
+        "key": "teal-5",
+        "value": {
+          "light": "39, 194, 152",
+          "dark": "0, 179, 133"
+        }
+      },
+      {
+        "key": "teal-6",
+        "value": {
+          "light": "0, 179, 133",
+          "dark": "39, 194, 152"
+        }
+      },
+      {
+        "key": "teal-7",
+        "value": {
+          "light": "0, 149, 113",
+          "dark": "84, 209, 173"
+        }
+      },
+      {
+        "key": "teal-8",
+        "value": {
+          "light": "0, 119, 93",
+          "dark": "135, 225, 197"
+        }
+      },
+      {
+        "key": "teal-9",
+        "value": {
+          "light": "0, 90, 71",
+          "dark": "192, 240, 224"
+        }
+      },
+      {
+        "key": "teal-10",
+        "value": {
+          "light": "0, 60, 48",
+          "dark": "228, 247, 241"
+        }
+      }
+    ]
+  },
+  "cyan": {
+    "name": "青色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "cyan-1",
+        "value": {
+          "light": "228, 247, 247",
+          "dark": "0, 52, 60"
+        }
+      },
+      {
+        "key": "cyan-2",
+        "value": {
+          "light": "192, 240, 240",
+          "dark": "0, 79, 90"
+        }
+      },
+      {
+        "key": "cyan-3",
+        "value": {
+          "light": "135, 223, 225",
+          "dark": "0, 107, 119"
+        }
+      },
+      {
+        "key": "cyan-4",
+        "value": {
+          "light": "84, 205, 209",
+          "dark": "0, 137, 149"
+        }
+      },
+      {
+        "key": "cyan-5",
+        "value": {
+          "light": "39, 186, 194",
+          "dark": "39, 186, 194"
+        }
+      },
+      {
+        "key": "cyan-6",
+        "value": {
+          "light": "0, 167, 179",
+          "dark": "84, 205, 209"
+        }
+      },
+      {
+        "key": "cyan-7",
+        "value": {
+          "light": "0, 137, 149",
+          "dark": "92, 208, 212"
+        }
+      },
+      {
+        "key": "cyan-8",
+        "value": {
+          "light": "0, 107, 119",
+          "dark": "135, 223, 225"
+        }
+      },
+      {
+        "key": "cyan-9",
+        "value": {
+          "light": "0, 79, 90",
+          "dark": "192, 240, 240"
+        }
+      },
+      {
+        "key": "cyan-10",
+        "value": {
+          "light": "0, 52, 60",
+          "dark": "228, 247, 247"
+        }
+      }
+    ]
+  },
+  "light-blue": {
+    "name": "浅蓝色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "light-blue-1",
+        "value": {
+          "light": "232, 247, 252",
+          "dark": "0, 47, 76"
+        }
+      },
+      {
+        "key": "light-blue-2",
+        "value": {
+          "light": "200, 237, 250",
+          "dark": "0, 72, 115"
+        }
+      },
+      {
+        "key": "light-blue-3",
+        "value": {
+          "light": "147, 218, 245",
+          "dark": "0, 99, 153"
+        }
+      },
+      {
+        "key": "light-blue-4",
+        "value": {
+          "light": "96, 198, 239",
+          "dark": "0, 127, 191"
+        }
+      },
+      {
+        "key": "light-blue-5",
+        "value": {
+          "light": "47, 178, 234",
+          "dark": "0, 156, 229"
+        }
+      },
+      {
+        "key": "light-blue-6",
+        "value": {
+          "light": "0, 156, 229",
+          "dark": "47, 178, 234"
+        }
+      },
+      {
+        "key": "light-blue-7",
+        "value": {
+          "light": "0, 127, 191",
+          "dark": "96, 198, 239"
+        }
+      },
+      {
+        "key": "light-blue-8",
+        "value": {
+          "light": "0, 99, 153",
+          "dark": "147, 218, 245"
+        }
+      },
+      {
+        "key": "light-blue-9",
+        "value": {
+          "light": "0, 72, 115",
+          "dark": "200, 237, 250"
+        }
+      },
+      {
+        "key": "light-blue-10",
+        "value": {
+          "light": "0, 47, 76",
+          "dark": "232, 247, 252"
+        }
+      }
+    ]
+  },
+  "blue": {
+    "name": "蓝色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "blue-1",
+        "value": {
+          "light": "233, 245, 254",
+          "dark": "0, 43, 97"
+        }
+      },
+      {
+        "key": "blue-2",
+        "value": {
+          "light": "202, 231, 252",
+          "dark": "0, 61, 133"
+        }
+      },
+      {
+        "key": "blue-3",
+        "value": {
+          "light": "149, 205, 249",
+          "dark": "0, 80, 169"
+        }
+      },
+      {
+        "key": "blue-4",
+        "value": {
+          "light": "98, 178, 246",
+          "dark": "0, 100, 204"
+        }
+      },
+      {
+        "key": "blue-5",
+        "value": {
+          "light": "49, 151, 243",
+          "dark": "0, 122, 240"
+        }
+      },
+      {
+        "key": "blue-6",
+        "value": {
+          "light": "0, 122, 240",
+          "dark": "49, 151, 243"
+        }
+      },
+      {
+        "key": "blue-7",
+        "value": {
+          "light": "0, 100, 204",
+          "dark": "98, 178, 246"
+        }
+      },
+      {
+        "key": "blue-8",
+        "value": {
+          "light": "0, 80, 169",
+          "dark": "149, 205, 249"
+        }
+      },
+      {
+        "key": "blue-9",
+        "value": {
+          "light": "0, 61, 133",
+          "dark": "202, 231, 252"
+        }
+      },
+      {
+        "key": "blue-10",
+        "value": {
+          "light": "0, 43, 97",
+          "dark": "233, 245, 254"
+        }
+      }
+    ]
+  },
+  "indigo": {
+    "name": "靛蓝色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "indigo-1",
+        "value": {
+          "light": "232, 236, 247",
+          "dark": "5, 19, 97"
+        }
+      },
+      {
+        "key": "indigo-2",
+        "value": {
+          "light": "200, 211, 240",
+          "dark": "10, 28, 118"
+        }
+      },
+      {
+        "key": "indigo-3",
+        "value": {
+          "light": "150, 170, 225",
+          "dark": "16, 38, 138"
+        }
+      },
+      {
+        "key": "indigo-4",
+        "value": {
+          "light": "106, 131, 209",
+          "dark": "23, 50, 159"
+        }
+      },
+      {
+        "key": "indigo-5",
+        "value": {
+          "light": "66, 96, 194",
+          "dark": "31, 63, 179"
+        }
+      },
+      {
+        "key": "indigo-6",
+        "value": {
+          "light": "31, 63, 179",
+          "dark": "66, 96, 194"
+        }
+      },
+      {
+        "key": "indigo-7",
+        "value": {
+          "light": "23, 50, 159",
+          "dark": "106, 131, 209"
+        }
+      },
+      {
+        "key": "indigo-8",
+        "value": {
+          "light": "16, 38, 138",
+          "dark": "150, 170, 225"
+        }
+      },
+      {
+        "key": "indigo-9",
+        "value": {
+          "light": "10, 28, 118",
+          "dark": "200, 211, 240"
+        }
+      },
+      {
+        "key": "indigo-10",
+        "value": {
+          "light": "5, 19, 101",
+          "dark": "232, 236, 247"
+        }
+      }
+    ]
+  },
+  "violet": {
+    "name": "紫罗兰色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "violet-1",
+        "value": {
+          "light": "234, 231, 249",
+          "dark": "34, 0, 109"
+        }
+      },
+      {
+        "key": "violet-2",
+        "value": {
+          "light": "206, 199, 242",
+          "dark": "39, 2, 130"
+        }
+      },
+      {
+        "key": "violet-3",
+        "value": {
+          "light": "163, 147, 229",
+          "dark": "46, 7, 150"
+        }
+      },
+      {
+        "key": "violet-4",
+        "value": {
+          "light": "124, 100, 217",
+          "dark": "53, 13, 171"
+        }
+      },
+      {
+        "key": "violet-5",
+        "value": {
+          "light": "90, 58, 204",
+          "dark": "61, 20, 191"
+        }
+      },
+      {
+        "key": "violet-6",
+        "value": {
+          "light": "61, 20, 191",
+          "dark": "97, 62, 201"
+        }
+      },
+      {
+        "key": "violet-7",
+        "value": {
+          "light": "53, 13, 171",
+          "dark": "150, 130, 223"
+        }
+      },
+      {
+        "key": "violet-8",
+        "value": {
+          "light": "46, 7, 150",
+          "dark": "182, 169, 233"
+        }
+      },
+      {
+        "key": "violet-9",
+        "value": {
+          "light": "39, 2, 130",
+          "dark": "217, 210, 244"
+        }
+      },
+      {
+        "key": "violet-10",
+        "value": {
+          "light": "34, 0, 109",
+          "dark": "240, 237, 250"
+        }
+      }
+    ]
+  },
+  "purple": {
+    "name": "紫色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "purple-1",
+        "value": {
+          "light": "245, 232, 255",
+          "dark": "60, 0, 97"
+        }
+      },
+      {
+        "key": "purple-2",
+        "value": {
+          "light": "225, 192, 253",
+          "dark": "77, 0, 118"
+        }
+      },
+      {
+        "key": "purple-3",
+        "value": {
+          "light": "203, 152, 251",
+          "dark": "95, 0, 138"
+        }
+      },
+      {
+        "key": "purple-4",
+        "value": {
+          "light": "178, 113, 248",
+          "dark": "114, 0, 159"
+        }
+      },
+      {
+        "key": "purple-5",
+        "value": {
+          "light": "152, 75, 246",
+          "dark": "135, 2, 179"
+        }
+      },
+      {
+        "key": "purple-6",
+        "value": {
+          "light": "123, 37, 244",
+          "dark": "161, 41, 194"
+        }
+      },
+      {
+        "key": "purple-7",
+        "value": {
+          "light": "92, 23, 202",
+          "dark": "187, 85, 209"
+        }
+      },
+      {
+        "key": "purple-8",
+        "value": {
+          "light": "64, 12, 160",
+          "dark": "211, 136, 225"
+        }
+      },
+      {
+        "key": "purple-9",
+        "value": {
+          "light": "41, 4, 118",
+          "dark": "234, 192, 240"
+        }
+      },
+      {
+        "key": "purple-10",
+        "value": {
+          "light": "22, 0, 77",
+          "dark": "245, 228, 247"
+        }
+      }
+    ]
+  },
+  "pink": {
+    "name": "粉色",
+    "type": "palette",
+    "typeName": "色盘",
+    "value": [
+      {
+        "key": "pink-1",
+        "value": {
+          "light": "255, 232, 253",
+          "dark": "81, 0, 51"
+        }
+      },
+      {
+        "key": "pink-2",
+        "value": {
+          "light": "246, 188, 243",
+          "dark": "117, 0, 70"
+        }
+      },
+      {
+        "key": "pink-3",
+        "value": {
+          "light": "238, 146, 235",
+          "dark": "153, 0, 86"
+        }
+      },
+      {
+        "key": "pink-4",
+        "value": {
+          "light": "229, 107, 229",
+          "dark": "188, 0, 100"
+        }
+      },
+      {
+        "key": "pink-5",
+        "value": {
+          "light": "216, 71, 221",
+          "dark": "224, 0, 112"
+        }
+      },
+      {
+        "key": "pink-6",
+        "value": {
+          "light": "199, 37, 212",
+          "dark": "230, 46, 132"
+        }
+      },
+      {
+        "key": "pink-7",
+        "value": {
+          "light": "163, 23, 178",
+          "dark": "236, 95, 156"
+        }
+      },
+      {
+        "key": "pink-8",
+        "value": {
+          "light": "127, 13, 144",
+          "dark": "243, 146, 184"
+        }
+      },
+      {
+        "key": "pink-9",
+        "value": {
+          "light": "93, 5, 110",
+          "dark": "249, 199, 217"
+        }
+      },
+      {
+        "key": "pink-10",
+        "value": {
+          "light": "61, 0, 77",
+          "dark": "252, 232, 239"
+        }
+      }
+    ]
+  },
+
+  "base": {
+    "name": "基础色(不同皮肤色相不变)",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-white",
+        "value": {
+          "light": "rgb(var(--o-white))",
+          "dark": "rgb(var(--o-white))"
+        }
+      },
+      {
+        "key": "color-black",
+        "value": {
+          "light": "rgb(var(--o-black))",
+          "dark": "rgb(var(--o-black))"
+        }
+      }
+    ]
+  },
+  "primary": {
+    "name": "强调色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-primary1",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-6))",
+          "dark": "rgb(var(--o-kleinblue-6))"
+        }
+      },
+      {
+        "key": "color-primary2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-4))",
+          "dark": "rgb(var(--o-kleinblue-5))"
+        }
+      },
+      {
+        "key": "color-primary3",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-7))",
+          "dark": "rgb(var(--o-kleinblue-7))"
+        }
+      },
+      {
+        "key": "color-primary4",
+        "description": "禁用",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-3))",
+          "dark": "rgb(var(--o-kleinblue-4))"
+        }
+      },
+      {
+        "key": "color-primary1-light",
+        "description": "常规-浅",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-2))",
+          "dark": "rgb(var(--o-kleinblue-2))"
+        }
+      },
+      {
+        "key": "color-primary2-light",
+        "description": "悬浮-浅",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-3))",
+          "dark": "rgb(var(--o-kleinblue-3))"
+        }
+      },
+      {
+        "key": "color-primary3-light",
+        "description": "激活-浅",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-4))",
+          "dark": "rgb(var(--o-kleinblue-4))"
+        }
+      },
+      {
+        "key": "color-primary4-light",
+        "description": "禁用-浅",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-1))",
+          "dark": "rgb(var(--o-kleinblue-1))"
+        }
+      }
+    ]
+  },
+  "success": {
+    "name": "成功色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-success1",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-green-6))",
+          "dark": "rgb(var(--o-green-6))"
+        }
+      },
+      {
+        "key": "color-success2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-green-4))",
+          "dark": "rgb(var(--o-green-4))"
+        }
+      },
+      {
+        "key": "color-success3",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-green-7))",
+          "dark": "rgb(var(--o-green-7))"
+        }
+      },
+      {
+        "key": "color-success4",
+        "description": "禁用",
+        "value": {
+          "light": "rgb(var(--o-green-3))",
+          "dark": "rgb(var(--o-green-3))"
+        }
+      },
+      {
+        "key": "color-success1-light",
+        "description": "常规-浅",
+        "value": {
+          "light": "rgb(var(--o-green-2))",
+          "dark": "rgb(var(--o-green-2))"
+        }
+      },
+      {
+        "key": "color-success2-light",
+        "description": "悬浮-浅",
+        "value": {
+          "light": "rgb(var(--o-green-3))",
+          "dark": "rgb(var(--o-green-3))"
+        }
+      },
+      {
+        "key": "color-success3-light",
+        "description": "激活-浅",
+        "value": {
+          "light": "rgb(var(--o-green-4))",
+          "dark": "rgb(var(--o-green-4))"
+        }
+      },
+      {
+        "key": "color-success4-light",
+        "description": "禁用-浅",
+        "value": {
+          "light": "rgb(var(--o-green-1))",
+          "dark": "rgb(var(--o-green-1))"
+        }
+      }
+    ]
+  },
+  "warning": {
+    "name": "告警色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-warning1",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-orange-6))",
+          "dark": "rgb(var(--o-orange-6))"
+        }
+      },
+      {
+        "key": "color-warning2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-orange-4))",
+          "dark": "rgb(var(--o-orange-4))"
+        }
+      },
+      {
+        "key": "color-warning3",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-orange-7))",
+          "dark": "rgb(var(--o-orange-7))"
+        }
+      },
+      {
+        "key": "color-warning4",
+        "description": "禁用",
+        "value": {
+          "light": "rgb(var(--o-orange-3))",
+          "dark": "rgb(var(--o-orange-3))"
+        }
+      },
+      {
+        "key": "color-warning1-light",
+        "description": "常规-浅",
+        "value": {
+          "light": "rgb(var(--o-orange-2))",
+          "dark": "rgb(var(--o-orange-2))"
+        }
+      },
+      {
+        "key": "color-warning2-light",
+        "description": "悬浮-浅",
+        "value": {
+          "light": "rgb(var(--o-orange-3))",
+          "dark": "rgb(var(--o-orange-3))"
+        }
+      },
+      {
+        "key": "color-warning3-light",
+        "description": "激活-浅",
+        "value": {
+          "light": "rgb(var(--o-orange-4))",
+          "dark": "rgb(var(--o-orange-4))"
+        }
+      },
+      {
+        "key": "color-warning4-light",
+        "description": "禁用-浅",
+        "value": {
+          "light": "rgb(var(--o-orange-1))",
+          "dark": "rgb(var(--o-orange-1))"
+        }
+      }
+    ]
+  },
+  "danger": {
+    "name": "危险色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-danger1",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-red-6))",
+          "dark": "rgb(var(--o-red-6))"
+        }
+      },
+      {
+        "key": "color-danger2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-red-4))",
+          "dark": "rgb(var(--o-red-4))"
+        }
+      },
+      {
+        "key": "color-danger3",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-red-7))",
+          "dark": "rgb(var(--o-red-7))"
+        }
+      },
+      {
+        "key": "color-danger4",
+        "description": "禁用",
+        "value": {
+          "light": "rgb(var(--o-red-3))",
+          "dark": "rgb(var(--o-red-3))"
+        }
+      },
+      {
+        "key": "color-danger1-light",
+        "description": "常规-浅",
+        "value": {
+          "light": "rgb(var(--o-red-2))",
+          "dark": "rgb(var(--o-red-2))"
+        }
+      },
+      {
+        "key": "color-danger2-light",
+        "description": "悬浮-浅",
+        "value": {
+          "light": "rgb(var(--o-red-3))",
+          "dark": "rgb(var(--o-red-3))"
+        }
+      },
+      {
+        "key": "color-danger3-light",
+        "description": "激活-浅",
+        "value": {
+          "light": "rgb(var(--o-red-4))",
+          "dark": "rgb(var(--o-red-4))"
+        }
+      },
+      {
+        "key": "color-danger4-light",
+        "description": "禁用-浅",
+        "value": {
+          "light": "rgb(var(--o-red-1))",
+          "dark": "rgb(var(--o-red-1))"
+        }
+      }
+    ]
+  },
+  "fill": {
+    "name": "填充色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-fill1",
+        "description": "一级填充：页面背景",
+        "value": {
+          "light": "rgb(var(--o-gray-2))",
+          "dark": "rgb(var(--o-gray-3))"
+        }
+      },
+      {
+        "key": "color-fill2",
+        "description": "二级填充：区块、卡片",
+        "value": {
+          "light": "rgb(var(--o-gray-1))",
+          "dark": "rgb(var(--o-gray-4))"
+        }
+      },
+      {
+        "key": "color-fill3",
+        "description": "三级填充：卡片",
+        "value": {
+          "light": "rgb(var(--o-gray-3))",
+          "dark": "rgb(var(--o-gray-5))"
+        }
+      }
+    ]
+  },
+  "control": {
+    "name": "控件色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-control1",
+        "description": "常规，常用于边框",
+        "value": {
+          "light": "rgba(var(--o-gray-14), 0.25)",
+          "dark": "rgba(var(--o-gray-14), 0.25)"
+        }
+      },
+      {
+        "key": "color-control2",
+        "description": "悬浮，常用于边框",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-4))",
+          "dark": "rgba(var(--o-gray-14), 0.6)"
+        }
+      },
+      {
+        "key": "color-control3",
+        "description": "激活，常用于边框",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-7))",
+          "dark": "rgba(var(--o-gray-14), 0.8)"
+        }
+      },
+      {
+        "key": "color-control4",
+        "description": "禁用，常用于边框",
+        "value": {
+          "light": "rgba(var(--o-gray-14), 0.1)",
+          "dark": "rgba(var(--o-gray-14), 0.15)"
+        }
+      },
+      {
+        "key": "color-control1-light",
+        "description": "常规-浅，常用于背景",
+        "value": {
+          "light": "rgb(var(--o-gray-5))",
+          "dark": "rgb(var(--o-gray-7))"
+        }
+      },
+      {
+        "key": "color-control2-light",
+        "description": "悬浮-浅，常用于背景",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-1))",
+          "dark": "rgb(var(--o-gray-5))"
+        }
+      },
+      {
+        "key": "color-control3-light",
+        "description": "激活-浅，常用于背景",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-2))",
+          "dark": "rgb(var(--o-gray-6))"
+        }
+      },
+      {
+        "key": "color-control4-light",
+        "description": "禁用，常用于背景",
+        "value": {
+          "light": "rgb(var(--o-gray-3))",
+          "dark": "rgb(var(--o-gray-5))"
+        }
+      },
+      {
+        "key": "color-control-light",
+        "description": "很浅，常用于表格背景色",
+        "value": {
+          "light": "rgb(var(--o-gray-1))",
+          "dark": "rgb(var(--o-gray-4))"
+        }
+      }
+    ]
+  },
+  "info": {
+    "name": "信息色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-info1",
+        "description": "一级/强调/标题",
+        "value": {
+          "light": "rgba(var(--o-gray-14), 1.0)",
+          "dark": "rgba(var(--o-gray-14), 1.0)"
+        }
+      },
+      {
+        "key": "color-info2",
+        "description": "二级/次强调/正文",
+        "value": {
+          "light": "rgba(var(--o-gray-14), 0.8)",
+          "dark": "rgba(var(--o-gray-14), 0.8)"
+        }
+      },
+      {
+        "key": "color-info3",
+        "description": "三级/辅助信息",
+        "value": {
+          "light": "rgba(var(--o-gray-14), 0.6)",
+          "dark": "rgba(var(--o-gray-14), 0.6)"
+        }
+      },
+      {
+        "key": "color-info4",
+        "description": "置灰/禁用",
+        "value": {
+          "light": "rgba(var(--o-gray-14), 0.4)",
+          "dark": "rgba(var(--o-gray-14), 0.4)"
+        }
+      },
+      {
+        "key": "color-info1-inverse",
+        "description": "一级/次强调/正文反色",
+        "value": {
+          "light": "rgba(var(--o-gray-1), 1.0)",
+          "dark": "rgba(var(--o-gray-1), 1.0)"
+        }
+      },
+      {
+        "key": "color-info2-inverse",
+        "description": "二级/辅助信息反色",
+        "value": {
+          "light": "rgba(var(--o-gray-1), 0.8)",
+          "dark": "rgba(var(--o-gray-1), 0.8)"
+        }
+      },
+      {
+        "key": "color-info3-inverse",
+        "description": "三级/辅助信息反色",
+        "value": {
+          "light": "rgba(var(--o-gray-1), 0.6)",
+          "dark": "rgba(var(--o-gray-1), 0.6)"
+        }
+      },
+      {
+        "key": "color-info4-inverse",
+        "description": "置灰/禁用反色",
+        "value": {
+          "light": "rgba(var(--o-gray-1), 0.4)",
+          "dark": "rgba(var(--o-gray-1), 0.4)"
+        }
+      }
+    ]
+  },
+  "mask": {
+    "name": "遮罩色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-mask1",
+        "description": "全局遮罩",
+        "value": {
+          "light": "rgba(var(--o-gray-14), 0.4)",
+          "dark": "rgba(var(--o-gray-1), 0.4)"
+        }
+      },
+      {
+        "key": "color-mask2",
+        "description": "局部遮罩",
+        "value": {
+          "light": "rgba(var(--o-gray-1), 0.2)",
+          "dark": "rgba(var(--o-gray-4), 0.2)"
+        }
+      }
+    ]
+  },
+  "shadow": {
+    "name": "阴影",
+    "type": "shadow",
+    "typeName": "阴影",
+    "value": [
+      {
+        "key": "shadow-1",
+        "name": "阴影1",
+        "description": "用于卡片、小弹窗、楼层阴影",
+        "value": {
+          "light": "0 3px 8px rgba(var(--o-gray-14), 0.08)",
+          "dark": "0 3px 8px rgba(var(--o-gray-1), 0.08)"
+        }
+      },
+      {
+        "key": "shadow-2",
+        "name": "阴影2",
+        "description": "用于卡片悬浮阴影",
+        "value": {
+          "light": "0 2px 24px rgba(var(--o-gray-14), 0.15)",
+          "dark": "0 2px 24px rgba(var(--o-gray-1), 0.15)"
+        }
+      },
+      {
+        "key": "shadow-3",
+        "name": "阴影3",
+        "description": "用于提示阴影",
+        "value": {
+          "light": "0 8px 40px rgba(var(--o-gray-14), 0.1)",
+          "dark": "0 8px 40px rgba(var(--o-gray-1), 0.1)"
+        }
+      }
+    ]
+  },
+  "link": {
+    "name": "链接色",
+    "type": "color",
+    "typeName": "颜色",
+    "value": [
+      {
+        "key": "color-link1",
+        "description": "常规",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-6))",
+          "dark": "rgb(var(--o-kleinblue-6))"
+        }
+      },
+      {
+        "key": "color-link2",
+        "description": "悬浮",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-4))",
+          "dark": "rgb(var(--o-kleinblue-5))"
+        }
+      },
+      {
+        "key": "color-link3",
+        "description": "激活",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-7))",
+          "dark": "rgb(var(--o-kleinblue-7))"
+        }
+      },
+      {
+        "key": "color-link4",
+        "description": "禁用",
+        "value": {
+          "light": "rgb(var(--o-kleinblue-3))",
+          "dark": "rgb(var(--o-kleinblue-4))"
+        }
+      }
+    ]
+  },
+
+  "gap": {
+    "name": "间距",
+    "type": "gap",
+    "typeName": "间距",
+    "value": [
+      {
+        "key": "gap-1",
+        "name": "间距1",
+        "description": "用于组件之间的间距1",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "gap-2",
+        "name": "间距2",
+        "description": "用于组件之间的间距2",
+        "value": {
+          "light": "8px",
+          "dark": "8px"
+        }
+      },
+      {
+        "key": "gap-3",
+        "name": "间距3",
+        "description": "用于组件之间的间距3",
+        "value": {
+          "light": "12px",
+          "dark": "12px"
+        }
+      },
+      {
+        "key": "gap-4",
+        "name": "间距4",
+        "description": "用于组件之间的间距4",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "gap-5",
+        "name": "间距5",
+        "description": "用于组件之间的间距5",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "gap-6",
+        "name": "间距6",
+        "description": "用于组件之间的间距6",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "gap-7",
+        "name": "间距7",
+        "description": "用于组件之间的间距7",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      },
+      {
+        "key": "gap-8",
+        "name": "间距8",
+        "description": "用于组件之间的间距8",
+        "value": {
+          "light": "48px",
+          "dark": "48px"
+        }
+      },
+      {
+        "key": "gap-9",
+        "name": "间距9",
+        "description": "用于组件之间的间距9",
+        "value": {
+          "light": "64px",
+          "dark": "64px"
+        }
+      },
+      {
+        "key": "gap-10",
+        "name": "间距10",
+        "description": "用于组件之间的间距10",
+        "value": {
+          "light": "72px",
+          "dark": "72px"
+        }
+      }
+    ]
+  },
+
+  "control_size": {
+    "name": "组件尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "control_size-2xs",
+        "name": "超小尺寸",
+        "description": "超小尺寸",
+        "value": {
+          "light": "14px",
+          "dark": "14px"
+        }
+      },
+      {
+        "key": "control_size-xs",
+        "name": "小尺寸",
+        "description": "小尺寸",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "control_size-s",
+        "name": "小尺寸",
+        "description": "小尺寸",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "control_size-m",
+        "name": "中尺寸",
+        "description": "尺寸",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "control_size-l",
+        "name": "大尺寸",
+        "description": "尺寸",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      },
+      {
+        "key": "control_size-xl",
+        "name": "大尺寸",
+        "description": "尺寸",
+        "value": {
+          "light": "48px",
+          "dark": "48px"
+        }
+      },
+      {
+        "key": "control_size-2xl",
+        "name": "大尺寸",
+        "description": "尺寸",
+        "value": {
+          "light": "56px",
+          "dark": "56px"
+        }
+      }
+    ]
+  },
+
+  "icon_size": {
+    "name": "图标尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "icon_size-xs",
+        "name": "超小尺寸图标",
+        "description": "超小尺寸图标",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "icon_size-s",
+        "name": "小尺寸图标",
+        "description": "小尺寸图标",
+        "value": {
+          "light": "20px",
+          "dark": "20px"
+        }
+      },
+      {
+        "key": "icon_size-m",
+        "name": "中尺寸图标",
+        "description": "中尺寸图标",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "icon_size-l",
+        "name": "大尺寸图标",
+        "description": "大尺寸图标",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "icon_size-xl",
+        "name": "超大尺寸图标",
+        "description": "超大尺寸图标",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      },
+      {
+        "key": "icon_size-2xl",
+        "name": "2xl尺寸图标",
+        "description": "2xl尺寸图标",
+        "value": {
+          "light": "48px",
+          "dark": "48px"
+        }
+      },
+      {
+        "key": "icon_size-3xl",
+        "name": "3xl尺寸图标",
+        "description": "3xl尺寸图标",
+        "value": {
+          "light": "56px",
+          "dark": "56px"
+        }
+      },
+      {
+        "key": "icon_size-4xl",
+        "name": "4xl尺寸图标",
+        "description": "4xl尺寸图标",
+        "value": {
+          "light": "64px",
+          "dark": "64px"
+        }
+      }
+    ]
+  },
+  "icon_size_control": {
+    "name": "组件图标尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "icon_size_control-xs",
+        "name": "超小尺寸图标",
+        "description": "超小尺寸控件图标(组件使用)",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "icon_size_control-s",
+        "name": "小尺寸图标",
+        "description": "小尺寸控件图标(组件使用)",
+        "value": {
+          "light": "20px",
+          "dark": "20px"
+        }
+      },
+      {
+        "key": "icon_size_control-m",
+        "name": "中尺寸图标",
+        "description": "中尺寸控件图标(组件使用)",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "icon_size_control-l",
+        "name": "大尺寸图标",
+        "description": "大尺寸控件图标(组件使用)",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "icon_size_control-xl",
+        "name": "超大尺寸图标",
+        "description": "超大尺寸控件图标(组件使用)",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      }
+    ]
+  },
+
+  "font_size": {
+    "name": "字体尺寸",
+    "type": "font",
+    "typeName": "字体",
+    "value": [
+      {
+        "key": "font_size-display1",
+        "name": "一级数据展示",
+        "description": "一级数据展示",
+        "value": {
+          "light": "56px",
+          "dark": "56px"
+        }
+      },
+      {
+        "key": "font_size-display2",
+        "name": "二级数据展示",
+        "description": "二级数据展示",
+        "value": {
+          "light": "48px",
+          "dark": "48px"
+        }
+      },
+      {
+        "key": "font_size-display3",
+        "name": "三级数据展示",
+        "description": "三级数据展示",
+        "value": {
+          "light": "40px",
+          "dark": "40px"
+        }
+      },
+      {
+        "key": "font_size-h1",
+        "name": "一级标题",
+        "description": "一级标题",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "font_size-h2",
+        "name": "二级标题",
+        "description": "二级标题",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "font_size-h3",
+        "name": "三级标题",
+        "description": "三级标题",
+        "value": {
+          "light": "22px",
+          "dark": "22px"
+        }
+      },
+      {
+        "key": "font_size-h4",
+        "name": "四级标题",
+        "description": "四级标题",
+        "value": {
+          "light": "20px",
+          "dark": "20px"
+        }
+      },
+      {
+        "key": "font_size-text1",
+        "name": "常规正文",
+        "description": "常规正文",
+        "value": {
+          "light": "16px",
+          "dark": "16px"
+        }
+      },
+      {
+        "key": "font_size-text2",
+        "name": "大号正文",
+        "description": "大号正文",
+        "value": {
+          "light": "18px",
+          "dark": "18px"
+        }
+      },
+      {
+        "key": "font_size-tip1",
+        "name": "提示文本1",
+        "description": "提示文本1",
+        "value": {
+          "light": "14px",
+          "dark": "14px"
+        }
+      },
+      {
+        "key": "font_size-tip2",
+        "name": "提示文本2",
+        "description": "提示文本2",
+        "value": {
+          "light": "12px",
+          "dark": "12px"
+        }
+      }
+    ]
+  },
+  "line_height": {
+    "name": "字体行高",
+    "type": "font",
+    "typeName": "字体",
+    "value": [
+      {
+        "key": "line_height-display1",
+        "name": "一级数据展示",
+        "description": "一级数据展示",
+        "value": {
+          "light": "80px",
+          "dark": "80px"
+        }
+      },
+      {
+        "key": "line_height-display2",
+        "name": "二级数据展示",
+        "description": "二级数据展示",
+        "value": {
+          "light": "64px",
+          "dark": "64px"
+        }
+      },
+      {
+        "key": "line_height-display3",
+        "name": "三级数据展示",
+        "description": "三级数据展示",
+        "value": {
+          "light": "56px",
+          "dark": "56px"
+        }
+      },
+      {
+        "key": "line_height-h1",
+        "name": "一级标题",
+        "description": "一级标题",
+        "value": {
+          "light": "44px",
+          "dark": "44px"
+        }
+      },
+      {
+        "key": "line_height-h2",
+        "name": "二级标题",
+        "description": "二级标题",
+        "value": {
+          "light": "32px",
+          "dark": "32px"
+        }
+      },
+      {
+        "key": "line_height-h3",
+        "name": "三级标题",
+        "description": "三级标题",
+        "value": {
+          "light": "30px",
+          "dark": "30px"
+        }
+      },
+      {
+        "key": "line_height-h4",
+        "name": "四级标题",
+        "description": "四级标题",
+        "value": {
+          "light": "28px",
+          "dark": "28px"
+        }
+      },
+      {
+        "key": "line_height-text1",
+        "name": "正文",
+        "description": "正文",
+        "value": {
+          "light": "24px",
+          "dark": "24px"
+        }
+      },
+      {
+        "key": "line_height-text2",
+        "name": "正文-大",
+        "description": "正文-大",
+        "value": {
+          "light": "26px",
+          "dark": "26x"
+        }
+      },
+      {
+        "key": "line_height-tip1",
+        "name": "提示文本1",
+        "description": "提示文本1",
+        "value": {
+          "light": "22px",
+          "dark": "22px"
+        }
+      },
+      {
+        "key": "line_height-tip2",
+        "name": "提示文本2",
+        "description": "提示文本2",
+        "value": {
+          "light": "18px",
+          "dark": "18px"
+        }
+      }
+    ]
+  },
+
+  "radius": {
+    "name": "圆角尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "radius-xs",
+        "name": "超小尺寸圆角",
+        "description": "超小尺寸圆角",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "radius-s",
+        "name": "小尺寸圆角",
+        "description": "小尺寸圆角",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "radius-m",
+        "name": "中尺寸圆角",
+        "description": "中尺寸圆角",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "radius-l",
+        "name": "大尺寸圆角",
+        "description": "大尺寸圆角",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "radius-xl",
+        "name": "大尺寸圆角",
+        "description": "大尺寸圆角,一般用于卡片",
+        "value": {
+          "light": "0px",
+          "dark": "0px"
+        }
+      }
+    ]
+  },
+  "radius_control": {
+    "name": "组件圆角尺寸",
+    "type": "size",
+    "typeName": "尺寸",
+    "value": [
+      {
+        "key": "radius_control-xs",
+        "name": "超小尺寸控件圆角",
+        "description": "超小尺寸控件圆角(组件使用)",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "radius_control-s",
+        "name": "小尺寸控件圆角",
+        "description": "小尺寸控件圆角(组件使用)",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "radius_control-m",
+        "name": "中尺寸控件圆角",
+        "description": "中尺寸控件圆角(组件使用)",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      },
+      {
+        "key": "radius_control-l",
+        "name": "大尺寸控件圆角",
+        "description": "大尺寸控件圆角(组件使用)",
+        "value": {
+          "light": "4px",
+          "dark": "4px"
+        }
+      }
+    ]
+  },
+
+  "duration": {
+    "name": "动画持续时间",
+    "type": "animation",
+    "typeName": "动画",
+    "value": [
+      {
+        "key": "duration-s",
+        "name": "持续时间",
+        "description": "用于退出屏幕的动画",
+        "value": {
+          "light": "200ms",
+          "dark": "200ms"
+        }
+      },
+      {
+        "key": "duration-m1",
+        "name": "持续时间",
+        "description": "用于当曲线为standard-in时进入屏幕的动画",
+        "value": {
+          "light": "250ms",
+          "dark": "250ms"
+        }
+      },
+      {
+        "key": "duration-m2",
+        "name": "持续时间",
+        "description": "用于当曲线为standard时开始、结束的动画",
+        "value": {
+          "light": "300ms",
+          "dark": "300ms"
+        }
+      },
+      {
+        "key": "duration-m3",
+        "name": "持续时间",
+        "description": "用于当曲线为emphasized-in时进入屏幕的动画",
+        "value": {
+          "light": "400ms",
+          "dark": "400ms"
+        }
+      },
+      {
+        "key": "duration-l",
+        "name": "持续时间",
+        "description": "用于当曲线为emphasized时开始、结束的动画",
+        "value": {
+          "light": "500ms",
+          "dark": "500ms"
+        }
+      },
+      {
+        "key": "duration-xl",
+        "name": "持续时间",
+        "description": "用于当曲线为emphasized时，轮播切换动画",
+        "value": {
+          "light": "1000ms",
+          "dark": "1000ms"
+        }
+      }
+    ]
+  },
+
+  "easing": {
+    "name": "动画曲线",
+    "type": "animation",
+    "typeName": "动画",
+    "value": [
+      {
+        "key": "easing-linear",
+        "name": "线性动画曲线",
+        "description": "线性曲线",
+        "value": {
+          "light": "cubic-bezier(0, 0, 1, 1)",
+          "dark": "cubic-bezier(0, 0, 1, 1)"
+        }
+      },
+      {
+        "key": "easing-standard",
+        "name": "动画曲线",
+        "description": "用于组件",
+        "value": {
+          "light": "cubic-bezier(0.2, 0, 0, 1)",
+          "dark": "cubic-bezier(0.2, 0, 0, 1)"
+        }
+      },
+      {
+        "key": "easing-standard-in",
+        "name": "动画曲线",
+        "description": "用于组件",
+        "value": {
+          "light": "cubic-bezier(0, 0, 0, 1)",
+          "dark": "cubic-bezier(0, 0, 0, 1)"
+        }
+      },
+      {
+        "key": "easing-standard-out",
+        "name": "动画曲线",
+        "description": "用于组件",
+        "value": {
+          "light": "cubic-bezier(0.3, 0, 1, 1)",
+          "dark": "cubic-bezier(0.3, 0, 1, 1)"
+        }
+      },
+      {
+        "key": "easing-emphasized",
+        "name": "动画曲线",
+        "description": "用于大卡片、场景切换",
+        "value": {
+          "light": "cubic-bezier(0.2, 0, 0, 1)",
+          "dark": "cubic-bezier(0.2, 0, 0, 1)"
+        }
+      },
+      {
+        "key": "easing-emphasized-in",
+        "name": "动画曲线",
+        "description": "用于大卡片、场景切换",
+        "value": {
+          "light": "cubic-bezier(0.3, 0, 0.8, 0.15)",
+          "dark": "cubic-bezier(0.3, 0, 0.8, 0.15)"
+        }
+      },
+      {
+        "key": "easing-emphasized-out",
+        "name": "动画曲线",
+        "description": "用于大卡片、场景切换",
+        "value": {
+          "light": "cubic-bezier(0.05, 0.7, 0.1, 1)",
+          "dark": "cubic-bezier(0.05, 0.7, 0.1, 1)"
+        }
+      }
+    ]
+  }
+}
diff --git a/packages/opendesign/src/toggle/style/index.scss b/packages/opendesign/src/toggle/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..67b8dbf9bcc94cd1494cdee89f98918026e5ab5a 100644
--- a/packages/opendesign/src/toggle/style/index.scss
+++ b/packages/opendesign/src/toggle/style/index.scss
@@ -1,2 +1,3 @@
+@use './var.scss' as *;
 @use './style.scss' as *;
 @use './media.scss' as *;
diff --git a/packages/opendesign/src/toggle/style/style.scss b/packages/opendesign/src/toggle/style/style.scss
index c4cca274d42972bab93c29077293fafa127f880b..c60d7376f5dae374100ec7d9f42611b2dee5da86 100644
--- a/packages/opendesign/src/toggle/style/style.scss
+++ b/packages/opendesign/src/toggle/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-toggle {
   display: inline-flex;
diff --git a/packages/opendesign/src/toggle/style/theme-ascend.index.ts b/packages/opendesign/src/toggle/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bdacd9c6ee5aca363917db515e154542266f4c2
--- /dev/null
+++ b/packages/opendesign/src/toggle/style/theme-ascend.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/toggle/style/theme-ascend.scss b/packages/opendesign/src/toggle/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/toggle/style/theme-kunpeng.index.ts b/packages/opendesign/src/toggle/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2b4508ff081979f08fbcfda03f045c172570d33
--- /dev/null
+++ b/packages/opendesign/src/toggle/style/theme-kunpeng.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/toggle/style/theme-kunpeng.scss b/packages/opendesign/src/toggle/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/toggle/style/theme-openeuler.index.ts b/packages/opendesign/src/toggle/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a4690a05640253920c989242a44e2e2e5b4b720
--- /dev/null
+++ b/packages/opendesign/src/toggle/style/theme-openeuler.index.ts
@@ -0,0 +1,3 @@
+import '../../_styles';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/toggle/style/theme-openeuler.scss b/packages/opendesign/src/toggle/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/upload/style/index.scss b/packages/opendesign/src/upload/style/index.scss
index 504d59c44eea7243e3faa4e454b7675ea8b98768..67b8dbf9bcc94cd1494cdee89f98918026e5ab5a 100644
--- a/packages/opendesign/src/upload/style/index.scss
+++ b/packages/opendesign/src/upload/style/index.scss
@@ -1,2 +1,3 @@
+@use './var.scss' as *;
 @use './style.scss' as *;
 @use './media.scss' as *;
diff --git a/packages/opendesign/src/upload/style/style.scss b/packages/opendesign/src/upload/style/style.scss
index 3e90bc6627575216c8fc84fd13baf33168bf4af5..2abf46c935df0bac17c157e9b383084296e1a917 100644
--- a/packages/opendesign/src/upload/style/style.scss
+++ b/packages/opendesign/src/upload/style/style.scss
@@ -1,5 +1,4 @@
 @use '../../_styles/mixin.scss' as *;
-@use './var.scss';
 
 .o-upload-select {
   position: relative;
diff --git a/packages/opendesign/src/upload/style/theme-ascend.index.ts b/packages/opendesign/src/upload/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5ff72413de413a3d464b58bb49e1ef3af1912465
--- /dev/null
+++ b/packages/opendesign/src/upload/style/theme-ascend.index.ts
@@ -0,0 +1,7 @@
+import '../../_styles';
+import '../../button/style/theme-ascend.index';
+import '../../popover/style/theme-ascend.index';
+import '../../icon/style/theme-ascend.index';
+import '../../figure/style/theme-ascend.index';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/upload/style/theme-ascend.scss b/packages/opendesign/src/upload/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/upload/style/theme-kunpeng.index.ts b/packages/opendesign/src/upload/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f630b1273c7f725ff826c7565ee19e391df93979
--- /dev/null
+++ b/packages/opendesign/src/upload/style/theme-kunpeng.index.ts
@@ -0,0 +1,7 @@
+import '../../_styles';
+import '../../button/style/theme-kunpeng.index';
+import '../../popover/style/theme-kunpeng.index';
+import '../../icon/style/theme-kunpeng.index';
+import '../../figure/style/theme-kunpeng.index';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/upload/style/theme-kunpeng.scss b/packages/opendesign/src/upload/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/upload/style/theme-openeuler.index.ts b/packages/opendesign/src/upload/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9472bea5296137bdd1dbf2e5d1a3827de55739b6
--- /dev/null
+++ b/packages/opendesign/src/upload/style/theme-openeuler.index.ts
@@ -0,0 +1,7 @@
+import '../../_styles';
+import '../../button/style/theme-openeuler.index';
+import '../../popover/style/theme-openeuler.index';
+import '../../icon/style/theme-openeuler.index';
+import '../../figure/style/theme-openeuler.index';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/upload/style/theme-openeuler.scss b/packages/opendesign/src/upload/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/virtual-list/style/index.scss b/packages/opendesign/src/virtual-list/style/index.scss
index f7871b2a74e7246003a5b63e16eae74856316350..8758ab15dd9227626cac4b38c43076e260b9ac50 100644
--- a/packages/opendesign/src/virtual-list/style/index.scss
+++ b/packages/opendesign/src/virtual-list/style/index.scss
@@ -1,25 +1,2 @@
-@use '../../_styles/mixin.scss' as *;
-@use './var.scss';
-
-.o-virtual-list {
-  display: block;
-}
-.o-virtual-list-wrapper {
-  height: 100%;
-  width: 100%;
-  max-height: inherit;
-  min-height: inherit;
-  max-width: inherit;
-  min-width: inherit;
-  overflow: auto;
-}
-.o-virtual-body {
-  overflow: hidden;
-  height: var(--content-height);
-}
-.o-virtual-render-list {
-  transform: translate3d(var(--offsetX, 0), var(--offsetY), 0);
-}
-.o-virtual-render-item {
-  overflow: auto;
-}
+@use './var.scss' as *;
+@use './style.scss' as *;
diff --git a/packages/opendesign/src/virtual-list/style/style.scss b/packages/opendesign/src/virtual-list/style/style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2cb8fe81988de2887185982a4a79933538dd3681
--- /dev/null
+++ b/packages/opendesign/src/virtual-list/style/style.scss
@@ -0,0 +1,24 @@
+@use '../../_styles/mixin.scss' as *;
+
+.o-virtual-list {
+  display: block;
+}
+.o-virtual-list-wrapper {
+  height: 100%;
+  width: 100%;
+  max-height: inherit;
+  min-height: inherit;
+  max-width: inherit;
+  min-width: inherit;
+  overflow: auto;
+}
+.o-virtual-body {
+  overflow: hidden;
+  height: var(--content-height);
+}
+.o-virtual-render-list {
+  transform: translate3d(var(--offsetX, 0), var(--offsetY), 0);
+}
+.o-virtual-render-item {
+  overflow: auto;
+}
diff --git a/packages/opendesign/src/virtual-list/style/theme-ascend.index.ts b/packages/opendesign/src/virtual-list/style/theme-ascend.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a0e1175ca73a36307559db9daa013e6bf138453c
--- /dev/null
+++ b/packages/opendesign/src/virtual-list/style/theme-ascend.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../scrollbar/style/theme-ascend.index';
+import './index.scss';
+import './theme-ascend.scss';
diff --git a/packages/opendesign/src/virtual-list/style/theme-ascend.scss b/packages/opendesign/src/virtual-list/style/theme-ascend.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/virtual-list/style/theme-kunpeng.index.ts b/packages/opendesign/src/virtual-list/style/theme-kunpeng.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..036e6c0bbb4eff75f50bd78e035c4732f595f5bb
--- /dev/null
+++ b/packages/opendesign/src/virtual-list/style/theme-kunpeng.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../scrollbar/style/theme-kunpeng.index';
+import './index.scss';
+import './theme-kunpeng.scss';
diff --git a/packages/opendesign/src/virtual-list/style/theme-kunpeng.scss b/packages/opendesign/src/virtual-list/style/theme-kunpeng.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/virtual-list/style/theme-openeuler.index.ts b/packages/opendesign/src/virtual-list/style/theme-openeuler.index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9ab5432e8443eb8f8844cd426cf78a7cedabae1c
--- /dev/null
+++ b/packages/opendesign/src/virtual-list/style/theme-openeuler.index.ts
@@ -0,0 +1,4 @@
+import '../../_styles';
+import '../../scrollbar/style/theme-openeuler.index';
+import './index.scss';
+import './theme-openeuler.scss';
diff --git a/packages/opendesign/src/virtual-list/style/theme-openeuler.scss b/packages/opendesign/src/virtual-list/style/theme-openeuler.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/opendesign/src/vite-env.d.ts b/packages/opendesign/src/vite-env.d.ts
index af36df349a654c7c39061abbf656a6e5b5b48f8c..5e29237ab053b10a2ca392663d776eee21da93bf 100644
--- a/packages/opendesign/src/vite-env.d.ts
+++ b/packages/opendesign/src/vite-env.d.ts
@@ -5,3 +5,4 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
+declare module '*.scss' {}
diff --git a/packages/portal/package.json b/packages/portal/package.json
index 42c1bf1af3f8d3a8ad47eeb7a0a8ed75d5023d8f..cef65bfab55bf9c88c960d20b04902a95d993bf4 100644
--- a/packages/portal/package.json
+++ b/packages/portal/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc && vite build",
+    "build": "vite build",
     "preview": "vite preview",
     "gen:icon": "open-scripts gen:icon --config __test_scripts/icons/icon.config.ts"
   },
diff --git a/packages/opendesign/src/_styles/media.token.scss b/packages/portal/src/assets/style/media.token.scss
similarity index 100%
rename from packages/opendesign/src/_styles/media.token.scss
rename to packages/portal/src/assets/style/media.token.scss
diff --git a/packages/portal/src/main.ts b/packages/portal/src/main.ts
index bd24197636b5cd386b7e4de3c118bbceb0dad02c..31cdd422bcfedc330ed1a2b4e59468995d9f3c2b 100644
--- a/packages/portal/src/main.ts
+++ b/packages/portal/src/main.ts
@@ -4,7 +4,7 @@ import 'normalize.css';
 
 import '@opendesign-src/_styles/light.token.css';
 import '@opendesign-src/_styles/dark.token.css';
-import '@opendesign-src/_styles/media.token.scss';
+import './assets/style/media.token.scss';
 
 import './assets/style/a.light.token.css';
 import './assets/style/a.dark.token.css';
diff --git a/packages/scripts/src/build-style/index.ts b/packages/scripts/src/build-style/index.ts
index e98f4098a2288936beda633d1c7ef9447a242597..49a6296e6684241d92a289d82f518f594afe8a69 100644
--- a/packages/scripts/src/build-style/index.ts
+++ b/packages/scripts/src/build-style/index.ts
@@ -14,46 +14,43 @@ export default function main() {
   // compile scss
   const files = globSync('**/*.{scss,css}', {
     cwd: input,
+    posix: true,
   });
   fs.ensureDir('dist');
 
-  // 编译额外需要的数据
-  // const additionalData = '';
-
   files.forEach((fl) => {
     const fPath = path.resolve(input, fl);
+    // Copy SCSS and CSS files to es/lib directories
     fs.copySync(fPath, `es/${fl}`);
     fs.copySync(fPath, `lib/${fl}`);
 
     if (/index\.scss/.test(fl)) {
+      // Compile all index.scss files to CSS
       console.log(`compiling ${fl}`);
       const result = compile(fPath, {});
 
-      // 支持additionalData
-      // const originalContent = fs.readFileSync(fPath, 'utf8');
-      // const combinedContent = additionalData + originalContent;
-      // const result = compileString(combinedContent, {
-      //   url: new URL(`file://${fPath}`), // 保留文件路径上下文
-      //   loadPaths: ['node_modules/'], // 设置导入路径
-      // });
-
       const cssName = fl.replace('.scss', '.css');
       fs.outputFile(`es/${cssName}`, result.css);
       fs.outputFile(`lib/${cssName}`, result.css);
 
-      // compile total css
+      // Compile index.scss and theme/**/index.scss to dist directory
       if (fl === 'index.scss') {
-        fs.outputFile('dist/opendesign.css', result.css);
+        fs.outputFile('dist/index.css', result.css);
         // compile min.css
         const compress = new CleanCSS().minify(result.css);
-        fs.outputFile('dist/opendesign.min.css', compress.styles);
+        fs.outputFile('dist/index.min.css', compress.styles);
 
-        fs.writeFileSync('dist/opendesign.scss', "@import '../es/index.scss';");
+        fs.writeFileSync('dist/index.scss', "@import '../es/index.scss';");
+      }
+      if (/theme\/.+\/index.scss$/.test(fl)) {
+        fs.outputFile(`dist/${fl.replace(/\.scss$/, '.css')}`, result.css);
+        const compress = new CleanCSS().minify(result.css);
+        fs.outputFile(`dist/${fl.replace(/\.scss$/, '.min.css')}`, compress.styles);
       }
     }
   });
   // build index
-  const idxFiles = globSync('**/style/**/index.ts', {
+  const idxFiles = globSync('**/style/**/*index.ts', {
     cwd: input,
   });
   idxFiles.forEach((fl) => {
@@ -61,16 +58,17 @@ export default function main() {
     const toFl = fl.replace(/\.ts$/, '.js');
     fs.copySync(fpath, `es/${toFl}`);
     fs.copySync(fpath, `lib/${toFl}`);
-
-    const content = fs.readFileSync(fpath, 'utf-8');
-    const css = content.replace('.scss', '.css').replace(/\/style';/g, "/style/css';");
-    const cssFile = fl.replace(/index\.ts$/, 'css.js');
-    fs.outputFile(`es/${cssFile}`, css);
-    fs.outputFile(`lib/${cssFile}`, css);
   });
 
   // copy scss index
   const scssIndexContent = "import './index.scss';";
   fs.outputFile('es/scss.mjs', scssIndexContent);
   fs.outputFile('lib/scss.js', scssIndexContent);
+
+  // copy code-snippets
+  const codeSnippets = globSync('theme/**/*code-snippets', { cwd: input });
+  codeSnippets.forEach((item) => {
+    const fpath = path.resolve(input, item);
+    fs.copySync(fpath, item.replace('theme', 'code-snippets'));
+  });
 }