diff --git a/packages/toolbar-design/CHANGELOG.md b/packages/toolbar-design/CHANGELOG.md
index c83c8bdcaafec80763b7689ca9a12e9d3481daa3..0bec054816e8e4668144c5c0b018d01776295796 100644
--- a/packages/toolbar-design/CHANGELOG.md
+++ b/packages/toolbar-design/CHANGELOG.md
@@ -7,6 +7,8 @@
 
 ## [Unreleased]
 
+-   update:更新工具栏设计工具预览区支持蓝青色亮色主题'
+
 ## [0.0.3-alpha.20] - 2024-09-10
 
 - 初始化
diff --git a/packages/toolbar-design/src/components/toolbar-shell/toolbar-shell.scss b/packages/toolbar-design/src/components/toolbar-shell/toolbar-shell.scss
index 4f01c9f384fed4c9323da49df545125221cb4a8e..6de155f51d7ca8daa8cb033cfd137e5478c13f71 100644
--- a/packages/toolbar-design/src/components/toolbar-shell/toolbar-shell.scss
+++ b/packages/toolbar-design/src/components/toolbar-shell/toolbar-shell.scss
@@ -1,9 +1,32 @@
 /* stylelint-disable selector-class-pattern */
+@import '../../style/light-theme';
+
 $toolbar-shell: (
   padding: getCssVar(spacing, extra-tight),
   padding-top-bottom: getCssVar(spacing, base-tight),
+  container-bg: rgba(var(#{getCssVarName(white)}), 1),
 );
-@include b('toolbar-shell') {
+
+// 亮色主题
+@mixin mixin-light-theme{
+  @include light-theme;
+
+  #{getCssVarName(control-toolbar, item-disabled-button)}: rgba(var(#{getCssVarName(grey, 4)}), 0.5);
+  #{getCssVarName(control-toolbar, item-bg-color)}: rgba(var(#{getCssVarName(blue, cyan, 4)}), 1);
+  #{getCssVarName(control-toolbar, item-color)}: rgba(var(#{getCssVarName(white)}), 1);
+  #{getCssVarName(editor, default, text-color)}:rgba(var(#{getCssVarName(grey, 6)}), 1);
+  #{getCssVarName(control-toolbar, item-color)}: rgba(var(#{getCssVarName(white)}), 1);
+}
+
+@include b('toolbar-shell-container') {
+  @include set-component-css-var(toolbar-shell, $toolbar-shell);
+
+  width: 100%;
+  height: 100%;
+  background-color: getCssVar(toolbar-shell, container-bg);
+}
+
+@include b('toolbar-shell') { 
   @include set-component-css-var(toolbar-shell, $toolbar-shell);
 
   display: flex;
@@ -16,19 +39,56 @@ $toolbar-shell: (
   overflow-y: auto;
   border-bottom: 1px solid getCssVar(color, border);
 
-  .ibiz-control-toolbar__item {
-    padding: getCssVar(toolbar-shell, padding);
-    cursor: pointer;
-  }
 
-  .ibiz-control-toolbar__menu {
-    padding: getCssVar(toolbar-shell, padding);
+
+  // 亮色主题
+  @include m('light') {
+    @include mixin-light-theme;
+
+    .#{bem('control-toolbar', 'item')} {
+      padding: getCssVar(toolbar-shell, padding);
+
+      .el-button {
+        --el-border-radius-base: 4px;
+        --el-button-bg-color: rgba(var(#{getCssVarName(blue, cyan, 4)}),1) !important;
+        --el-button-text-color: rgba(var(#{getCssVarName(white)}),1) !important;
+      }
+    }
+
+    .#{bem('control-toolbar', 'menu')} {
+      padding: getCssVar(toolbar-shell, padding);
+
+      .el-button {
+        --el-border-radius-base: 4px;
+        --el-button-bg-color: rgba(var(#{getCssVarName(blue, cyan, 4)}), 1) !important;
+        --el-button-text-color: rgba(var(#{getCssVarName(white)}),1) !important;
+      }
+    }
   }
 }
 
-// 禁用分组下拉框里面的行为项点击事件
-.ibiz-control-toolbar-submenu-popper--pointer-event-none {
-  .el-menu-item.pointer-event-none {
+// 亮色主题-分组下拉模态
+.#{bem(control-toolbar-submenu-popper,'',design-toolbar--light)} {
+
+  @include mixin-light-theme;
+
+  .el-menu-item{
+    pointer-events: none;
+  }
+
+  .el-button {
+    width:auto!important;
+
+    --el-border-radius-base: 4px;
+    --el-button-bg-color: rgba(var(#{getCssVarName(blue, cyan, 4)}),1) !important;
+    --el-button-text-color: rgba(var(#{getCssVarName(white)}), 1) !important;
+  }
+
+  .ibiz-control-toolbar-submenu-popper {
+    #{getCssVar(color, primary)}: rgba(var(#{getCssVarName(blue, cyan, 4)}), 1);
+  }
+
+  .el-menu-item.pointer-event-none_light {
     pointer-events: none;
   }
 }
diff --git a/packages/toolbar-design/src/components/toolbar-shell/toolbar-shell.tsx b/packages/toolbar-design/src/components/toolbar-shell/toolbar-shell.tsx
index d00ecd3e161e353267df5e2573a60fc27e36b674..33c0b0f20d9d584c1865a47141c3d9252d4641a8 100644
--- a/packages/toolbar-design/src/components/toolbar-shell/toolbar-shell.tsx
+++ b/packages/toolbar-design/src/components/toolbar-shell/toolbar-shell.tsx
@@ -29,6 +29,7 @@ export default defineComponent({
   },
   setup(props) {
     const ns = useNamespace('toolbar-shell');
+    const theme = ref('light');
 
     // 模型
     const tempModelData = ref<IDEToolbar>();
@@ -56,7 +57,9 @@ export default defineComponent({
           appId: props.context!.srfappid,
           sysCss: {
             appId: props.context!.srfappid,
-            cssName: 'pointer-event-none',
+            cssName: `design-toolbar--${
+              theme.value === 'light' ? 'light' : ''
+            }`,
           },
         };
 
@@ -154,19 +157,21 @@ export default defineComponent({
       }
     });
 
-    return { ns, toolbarRef, tempModelData };
+    return { ns, theme, toolbarRef, tempModelData };
   },
   render() {
     if (!this.tempModelData) {
       return;
     }
     return (
-      <IBizToolbarControl
-        ref='toolbarRef'
-        class={this.ns.b()}
-        modelData={this.tempModelData}
-        context={this.context}
-      ></IBizToolbarControl>
+      <div class={this.ns.b('container')}>
+        <IBizToolbarControl
+          ref='toolbarRef'
+          class={[this.ns.b(), this.ns.m('light', this.theme === 'light')]}
+          modelData={this.tempModelData}
+          context={this.context}
+        ></IBizToolbarControl>
+      </div>
     );
   },
 });
diff --git a/packages/toolbar-design/src/style/light-theme.scss b/packages/toolbar-design/src/style/light-theme.scss
new file mode 100644
index 0000000000000000000000000000000000000000..56b8ed5e360b4266ebbcca07c55dd58464e15de2
--- /dev/null
+++ b/packages/toolbar-design/src/style/light-theme.scss
@@ -0,0 +1,391 @@
+@mixin light-theme {
+   // 红色
+   #{getCssVarName(red, 0)}: 254, 242, 237;
+   #{getCssVarName(red, 1)}: 254, 221, 210;
+   #{getCssVarName(red, 2)}: 253, 183, 164;
+   #{getCssVarName(red, 3)}: 251, 144, 120;
+   #{getCssVarName(red, 4)}: 250, 102, 75;
+   #{getCssVarName(red, 5)}: 249, 57, 31;
+   #{getCssVarName(red, 6)}: 213, 37, 20;
+   #{getCssVarName(red, 7)}: 177, 20, 13;
+   #{getCssVarName(red, 8)}: 142, 7, 5;
+   #{getCssVarName(red, 9)}: 106, 2, 3;
+ 
+   // 粉色
+   #{getCssVarName(pink, 0)}: 253, 236, 239;
+   #{getCssVarName(pink, 1)}: 251, 207, 216;
+   #{getCssVarName(pink, 2)}: 246, 160, 181;
+   #{getCssVarName(pink, 3)}: 242, 115, 150;
+   #{getCssVarName(pink, 4)}: 238, 72, 122;
+   #{getCssVarName(pink, 5)}: 233, 31, 99;
+   #{getCssVarName(pink, 6)}: 197, 18, 86;
+   #{getCssVarName(pink, 7)}: 162, 11, 72;
+   #{getCssVarName(pink, 8)}: 126, 4, 58;
+   #{getCssVarName(pink, 9)}: 90, 1, 44;
+ 
+   // 紫色
+   #{getCssVarName(purple, 0)}: 247, 233, 247;
+   #{getCssVarName(purple, 1)}: 239, 202, 239;
+   #{getCssVarName(purple, 2)}: 221, 155, 224;
+   #{getCssVarName(purple, 3)}: 201, 112, 209;
+   #{getCssVarName(purple, 4)}: 180, 73, 194;
+   #{getCssVarName(purple, 5)}: 158, 40, 179;
+   #{getCssVarName(purple, 6)}: 135, 30, 159;
+   #{getCssVarName(purple, 7)}: 112, 23, 138;
+   #{getCssVarName(purple, 8)}: 92, 14, 117;
+   #{getCssVarName(purple, 9)}: 72, 11, 97;
+ 
+   // 紫罗兰色
+   #{getCssVarName(violet, 0)}: 243, 237, 249;
+   #{getCssVarName(violet, 1)}: 226, 209, 244;
+   #{getCssVarName(violet, 2)}: 196, 167, 233;
+   #{getCssVarName(violet, 3)}: 166, 126, 221;
+   #{getCssVarName(violet, 4)}: 136, 91, 210;
+   #{getCssVarName(violet, 5)}: 106, 58, 199;
+   #{getCssVarName(violet, 6)}: 87, 47, 179;
+   #{getCssVarName(violet, 7)}: 70, 36, 158;
+   #{getCssVarName(violet, 8)}: 54, 28, 138;
+   #{getCssVarName(violet, 9)}: 40, 20, 117;
+ 
+   // 靛蓝
+   #{getCssVarName(indigo, 0)}: 237, 239, 248;
+   #{getCssVarName(indigo, 1)}: 209, 216, 240;
+   #{getCssVarName(indigo, 2)}: 167, 179, 225;
+   #{getCssVarName(indigo, 3)}: 128, 144, 211;
+   #{getCssVarName(indigo, 4)}: 94, 111, 196;
+   #{getCssVarName(indigo, 5)}: 63, 81, 181;
+   #{getCssVarName(indigo, 6)}: 51, 66, 161;
+   #{getCssVarName(indigo, 7)}: 41, 52, 140;
+   #{getCssVarName(indigo, 8)}: 31, 40, 120;
+   #{getCssVarName(indigo, 9)}: 23, 29, 99;
+ 
+   // 蓝色
+   #{getCssVarName(blue, 0)}: 234, 245, 255;
+   #{getCssVarName(blue, 1)}: 203, 231, 254;
+   #{getCssVarName(blue, 2)}: 152, 205, 253;
+   #{getCssVarName(blue, 3)}: 101, 179, 252;
+   #{getCssVarName(blue, 4)}: 51, 149, 252;
+   #{getCssVarName(blue, 5)}: 3, 118, 250;
+   #{getCssVarName(blue, 6)}: 2, 97, 214;
+   #{getCssVarName(blue, 7)}: 2, 79, 179;
+   #{getCssVarName(blue, 8)}: 0, 61, 143;
+   #{getCssVarName(blue, 9)}: 0, 44, 107;
+ 
+   // 浅蓝色
+   #{getCssVarName(light, blue, 0)}: 234, 247, 253;
+   #{getCssVarName(light, blue, 1)}: 202, 236, 252;
+   #{getCssVarName(light, blue, 2)}: 149, 216, 248;
+   #{getCssVarName(light, blue, 3)}: 97, 195, 245;
+   #{getCssVarName(light, blue, 4)}: 48, 172, 241;
+   #{getCssVarName(light, blue, 5)}: 0, 149, 238;
+   #{getCssVarName(light, blue, 6)}: 0, 123, 202;
+   #{getCssVarName(light, blue, 7)}: 0, 99, 167;
+   #{getCssVarName(light, blue, 8)}: 0, 75, 131;
+   #{getCssVarName(light, blue, 9)}: 0, 53, 95;
+ 
+   // 青色
+   #{getCssVarName(cyan, 0)}: 229, 247, 248;
+   #{getCssVarName(cyan, 1)}: 194, 239, 240;
+   #{getCssVarName(cyan, 2)}: 138, 221, 225;
+   #{getCssVarName(cyan, 3)}: 87, 203, 211;
+   #{getCssVarName(cyan, 4)}: 44, 184, 197;
+   #{getCssVarName(cyan, 5)}: 6, 164, 182;
+   #{getCssVarName(cyan, 6)}: 3, 134, 152;
+   #{getCssVarName(cyan, 7)}: 2, 105, 121;
+   #{getCssVarName(cyan, 8)}: 0, 77, 91;
+   #{getCssVarName(cyan, 9)}: 1, 50, 61;
+ 
+   // 蓝绿色
+   #{getCssVarName(teal, 0)}: 227, 247, 244;
+   #{getCssVarName(teal, 1)}: 192, 240, 232;
+   #{getCssVarName(teal, 2)}: 135, 224, 211;
+   #{getCssVarName(teal, 3)}: 84, 209, 193;
+   #{getCssVarName(teal, 4)}: 39, 194, 176;
+   #{getCssVarName(teal, 5)}: 5, 179, 161;
+   #{getCssVarName(teal, 6)}: 0, 149, 137;
+   #{getCssVarName(teal, 7)}: 0, 119, 111;
+   #{getCssVarName(teal, 8)}: 0, 90, 85;
+   #{getCssVarName(teal, 9)}: 1, 60, 58;
+ 
+   // 绿色
+   #{getCssVarName(green, 0)}: 236, 246, 236;
+   #{getCssVarName(green, 1)}: 208, 240, 208;
+   #{getCssVarName(green, 2)}: 164, 224, 167;
+   #{getCssVarName(green, 3)}: 126, 209, 130;
+   #{getCssVarName(green, 4)}: 90, 194, 98;
+   #{getCssVarName(green, 5)}: 59, 179, 70;
+   #{getCssVarName(green, 6)}: 49, 149, 58;
+   #{getCssVarName(green, 7)}: 37, 119, 47;
+   #{getCssVarName(green, 8)}: 26, 89, 36;
+   #{getCssVarName(green, 9)}: 18, 60, 24;
+ 
+   // 浅绿色
+   #{getCssVarName(light, green, 0)}: 243, 248, 236;
+   #{getCssVarName(light, green, 1)}: 226, 240, 208;
+   #{getCssVarName(light, green, 2)}: 200, 225, 165;
+   #{getCssVarName(light, green, 3)}: 173, 211, 127;
+   #{getCssVarName(light, green, 4)}: 147, 197, 91;
+   #{getCssVarName(light, green, 5)}: 123, 182, 60;
+   #{getCssVarName(light, green, 6)}: 100, 152, 47;
+   #{getCssVarName(light, green, 7)}: 79, 121, 38;
+   #{getCssVarName(light, green, 8)}: 57, 91, 27;
+   #{getCssVarName(light, green, 9)}: 36, 61, 18;
+ 
+   // 清柠色
+   #{getCssVarName(lime, 0)}: 241, 250, 230;
+   #{getCssVarName(lime, 1)}: 227, 246, 197;
+   #{getCssVarName(lime, 2)}: 203, 237, 142;
+   #{getCssVarName(lime, 3)}: 183, 226, 91;
+   #{getCssVarName(lime, 4)}: 168, 218, 44;
+   #{getCssVarName(lime, 5)}: 154, 209, 0;
+   #{getCssVarName(lime, 6)}: 125, 174, 0;
+   #{getCssVarName(lime, 7)}: 99, 139, 2;
+   #{getCssVarName(lime, 8)}: 72, 104, 0;
+   #{getCssVarName(lime, 9)}: 47, 70, 0;
+ 
+   // 黄色
+   #{getCssVarName(yellow, 0)}: 255, 253, 234;
+   #{getCssVarName(yellow, 1)}: 255, 250, 203;
+   #{getCssVarName(yellow, 2)}: 253, 243, 152;
+   #{getCssVarName(yellow, 3)}: 252, 231, 101;
+   #{getCssVarName(yellow, 4)}: 251, 218, 49;
+   #{getCssVarName(yellow, 5)}: 249, 200, 0;
+   #{getCssVarName(yellow, 6)}: 208, 170, 0;
+   #{getCssVarName(yellow, 7)}: 167, 139, 0;
+   #{getCssVarName(yellow, 8)}: 125, 106, 0;
+   #{getCssVarName(yellow, 9)}: 83, 72, 0;
+ 
+   // 琥珀色
+   #{getCssVarName(amber, 0)}: 255, 251, 236;
+   #{getCssVarName(amber, 1)}: 252, 245, 206;
+   #{getCssVarName(amber, 2)}: 249, 232, 158;
+   #{getCssVarName(amber, 3)}: 246, 216, 110;
+   #{getCssVarName(amber, 4)}: 243, 198, 65;
+   #{getCssVarName(amber, 5)}: 240, 177, 20;
+   #{getCssVarName(amber, 6)}: 200, 138, 16;
+   #{getCssVarName(amber, 7)}: 160, 102, 10;
+   #{getCssVarName(amber, 8)}: 120, 70, 5;
+   #{getCssVarName(amber, 9)}: 80, 43, 3;
+ 
+   // 橙色
+   #{getCssVarName(orange, 0)}: 255, 243, 224;
+   #{getCssVarName(orange, 1)}: 255, 223, 177;
+   #{getCssVarName(orange, 2)}: 255, 204, 128;
+   #{getCssVarName(orange, 3)}: 254, 183, 77;
+   #{getCssVarName(orange, 4)}: 255, 167, 38;
+   #{getCssVarName(orange, 5)}: 255, 152, 0;
+   #{getCssVarName(orange, 6)}: 250, 141, 0;
+   #{getCssVarName(orange, 7)}: 245, 124, 2;
+   #{getCssVarName(orange, 8)}: 239, 108, 0;
+   #{getCssVarName(orange, 9)}: 230, 81, 0;
+ 
+   // 灰色
+   #{getCssVarName(grey, 0)}: 249, 249, 249;
+   #{getCssVarName(grey, 1)}: 230, 232, 234;
+   #{getCssVarName(grey, 2)}: 198, 202, 205;
+   #{getCssVarName(grey, 3)}: 167, 171, 175;
+   #{getCssVarName(grey, 4)}: 136, 141, 145;
+   #{getCssVarName(grey, 5)}: 107, 102, 116;
+   #{getCssVarName(grey, 6)}: 85, 91, 97;
+   #{getCssVarName(grey, 7)}: 65, 70, 76;
+   #{getCssVarName(grey, 8)}: 46, 50, 55;
+   #{getCssVarName(grey, 9)}: 29, 31, 35;
+ 
+ 
+   // 蓝青色
+   #{getCssVarName(blue, cyan, 0)}: 217, 236, 255;
+   #{getCssVarName(blue, cyan, 1)}: 164, 201, 238;
+   #{getCssVarName(blue, cyan, 2)}: 131, 171, 212;
+   #{getCssVarName(blue, cyan, 3)}: 105, 148, 190;
+   #{getCssVarName(blue, cyan, 4)}: 85, 125, 165;
+   #{getCssVarName(blue, cyan, 5)}: 70, 107, 144;
+   #{getCssVarName(blue, cyan, 6)}: 48, 81, 115;
+   #{getCssVarName(blue, cyan, 7)}: 36, 65, 96;
+   #{getCssVarName(blue, cyan, 8)}: 26, 52, 79;
+   #{getCssVarName(blue, cyan, 9)}: 16, 41, 68;
+ 
+   // 黑、白色
+   #{getCssVarName(white)}: 255, 255, 255;
+   #{getCssVarName(black)}: 0, 0, 0;
+ 
+   // 功能色
+   #{getCssVarName(color, white)}: rgba(var(#{getCssVarName(white)}),1); // 浅色模式下深色背景内容Inverse
+   #{getCssVarName(color, black)}: rgba(var(#{getCssVarName(black)}),1); // 深色模式下浅色背景内容Inverse
+ 
+   // 主要颜色
+   #{getCssVarName(color, primary)}: rgba(var(#{getCssVarName(blue, cyan, 4)}),1); // 主要颜色。仅在需要非常强调的情况下使用。
+   #{getCssVarName(color, primary, text)}: rgba(var(#{getCssVarName(white)}), 1); // 主要颜色文字色，和背景色形成对比
+   #{getCssVarName(color, primary, hover)}: rgba(var(#{getCssVarName(blue, cyan, 3)}),1); // 主要颜色悬浮态
+   #{getCssVarName(color, primary, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 主要颜色文字色，和背景色形成对比
+   #{getCssVarName(color, primary, active)}: rgba(var(#{getCssVarName(blue, cyan, 5)}),1); // 主要颜色激活态
+   #{getCssVarName(color, primary, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 主要颜色文字色，和背景色形成对比
+   #{getCssVarName(color, primary, disabled)}: rgba(var(#{getCssVarName(blue, cyan, 2)}),1); // 主要颜色禁用态
+   #{getCssVarName(color, primary, disabled, text)}: rgba(var(#{getCssVarName(white)}), 1); // 主要颜色文字色，和背景色形成对比
+   #{getCssVarName(color, primary, light, default)}: rgba(var(#{getCssVarName(blue, cyan, 0)}),1); // 浅版主要颜色（多用于背景）。仅在需要非常强调的情况下使用。
+   #{getCssVarName(color, primary, light, hover)}: rgba(var(#{getCssVarName(blue, cyan, 1)}),1); // 浅版主要颜色悬浮态
+   #{getCssVarName(color, primary, light, active)}: rgba(var(#{getCssVarName(blue, cyan, 2)}),1); // 浅版主要颜色激活态
+ 
+   // 次要颜色
+   #{getCssVarName(color, secondary)}: rgba(var(#{getCssVarName(light, blue, 5)}),1); // 次要颜色。强调作用次于主要颜色，但仍然具有强调作用。
+   #{getCssVarName(color, secondary, text)}: rgba(var(#{getCssVarName(white)}), 1); // 次要颜色文字色，和背景色形成对比
+   #{getCssVarName(color, secondary, hover)}: rgba(var(#{getCssVarName(light, blue, 6)}),1); // 次要颜色悬浮态
+   #{getCssVarName(color, secondary, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 次要颜色文字色，和背景色形成对比
+   #{getCssVarName(color, secondary, active)}: rgba(var(#{getCssVarName(light, blue, 7)}),1); // 次要颜色激活态
+   #{getCssVarName(color, secondary, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 次要颜色文字色，和背景色形成对比
+   #{getCssVarName(color, secondary, disabled)}: rgba(var(#{getCssVarName(light, blue, 2)}),1); // 次要颜色禁用态
+   #{getCssVarName(color, secondary, disabled, text)}: rgba(var(#{getCssVarName(white)}), 1); // 次要颜色文字色，和背景色形成对比
+   #{getCssVarName(color, secondary, light, default)}: rgba(var(#{getCssVarName(light, blue, 0)}),1); // 浅版次要颜色（多用于背景）。强调作用次于主要颜色，但仍然具有强调作用。
+   #{getCssVarName(color, secondary, light, hover)}: rgba(var(#{getCssVarName(light, blue, 1)}),1); // 浅版次要颜色悬浮态
+   #{getCssVarName(color, secondary, light, active)}: rgba(var(#{getCssVarName(light, blue, 2)}),1); // 浅版次要颜色激活态
+ 
+   // 第三颜色
+   #{getCssVarName(color, tertiary)}: rgba(var(#{getCssVarName(grey, 5)}),1); // 第三颜色，可以在页面上多次使用
+   #{getCssVarName(color, tertiary, text)}: rgba(var(#{getCssVarName(white)}), 1); // 第三颜色文字色，和背景色形成对比
+   #{getCssVarName(color, tertiary, hover)}: rgba(var(#{getCssVarName(grey, 4)}),1); // 第三颜色悬浮态
+   #{getCssVarName(color, tertiary, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 第三颜色文字色，和背景色形成对比
+   #{getCssVarName(color, tertiary, active)}: rgba(var(#{getCssVarName(grey, 6)}),1); // 第三颜色激活态
+   #{getCssVarName(color, tertiary, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 第三颜色文字色，和背景色形成对比
+   #{getCssVarName(color, tertiary, light, default)}: rgba(var(#{getCssVarName(grey, 0)}),1); // 浅版第三颜色（多用于背景），可以在页面上多次使用
+   #{getCssVarName(color, tertiary, light, hover)}: rgba(var(#{getCssVarName(grey, 1)}),1); // 浅版第三颜色悬浮态
+   #{getCssVarName(color, tertiary, light, active)}: rgba(var(#{getCssVarName(grey, 2)}),1); // 浅版第三颜色激活态
+ 
+   // 信息色
+   #{getCssVarName(color, info)}: rgba(var(#{getCssVarName(blue, cyan, 4)}),1); // 信息色, 通常用于表达客观、中立信息
+   #{getCssVarName(color, info, text)}: rgba(var(#{getCssVarName(white)}), 1); // 信息颜色文字色，和背景色形成对比
+   #{getCssVarName(color, info, hover)}: rgba(var(#{getCssVarName(blue, cyan, 3)}),1); // 信息色悬浮态
+   #{getCssVarName(color, info, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 信息颜色文字色，和背景色形成对比
+   #{getCssVarName(color, info, active)}: rgba(var(#{getCssVarName(blue, cyan, 5)}),1); // 信息色激活态
+   #{getCssVarName(color, info, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 信息颜色文字色，和背景色形成对比
+   #{getCssVarName(color, info, disabled)}: rgba(var(#{getCssVarName(blue, cyan, 2)}),1); // 信息色禁用态
+   #{getCssVarName(color, info, disabled, text)}: rgba(var(#{getCssVarName(white)}), 1); // 信息颜色文字色，和背景色形成对比
+   #{getCssVarName(color, info, light, default)}: rgba(var(#{getCssVarName(blue, cyan, 0)}),1); // 浅版信息色（多用于背景），通常用于表达客观、中立信息
+   #{getCssVarName(color, info, light, hover)}: rgba(var(#{getCssVarName(blue, cyan, 1)}),1); // 浅版信息色悬浮态
+   #{getCssVarName(color, info, light, active)}: rgba(var(#{getCssVarName(blue, cyan, 2)}),1); // 浅版信息色激活态
+ 
+   // 成功色
+   #{getCssVarName(color, success)}: rgba(var(#{getCssVarName(green, 5)}),1); // 成功色，表示安全、成功、开启的状态
+   #{getCssVarName(color, success, text)}: rgba(var(#{getCssVarName(white)}), 1); // 成功颜色文字色，和背景色形成对比
+   #{getCssVarName(color, success, hover)}: rgba(var(#{getCssVarName(green, 4)}),1); // 成功色悬浮态
+   #{getCssVarName(color, success, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 成功颜色文字色，和背景色形成对比
+   #{getCssVarName(color, success, active)}: rgba(var(#{getCssVarName(green, 6)}),1); // 成功色激活态
+   #{getCssVarName(color, success, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 成功颜色文字色，和背景色形成对比
+   #{getCssVarName(color, success, disabled)}: rgba(var(#{getCssVarName(green, 2)}),1); // 成功色禁用态
+   #{getCssVarName(color, success, disabled, text)}: rgba(var(#{getCssVarName(white)}), 1); // 成功颜色文字色，和背景色形成对比
+   #{getCssVarName(color, success, light, default)}: rgba(var(#{getCssVarName(green, 0)}),1); // 浅版成功色（多用于背景），表示安全、成功、开启的状态
+   #{getCssVarName(color, success, light, hover)}: rgba(var(#{getCssVarName(green, 1)}),1); // 浅版成功色悬浮态
+   #{getCssVarName(color, success, light, active)}: rgba(var(#{getCssVarName(green, 2)}),1); // 浅版成功色激活态
+ 
+   // 警示色
+   #{getCssVarName(color, warning)}: rgba(var(#{getCssVarName(orange, 5)}),1); // 警示色，表示警告、不安全的状态
+   #{getCssVarName(color, warning, text)}: rgba(var(#{getCssVarName(white)}), 1); // 警告颜色文字色，和背景色形成对比
+   #{getCssVarName(color, warning, hover)}: rgba(var(#{getCssVarName(orange, 4)}),1); // 警示色悬浮态
+   #{getCssVarName(color, warning, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 警告颜色文字色，和背景色形成对比
+   #{getCssVarName(color, warning, active)}: rgba(var(#{getCssVarName(orange, 6)}),1); // 警示色激活态
+   #{getCssVarName(color, warning, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 警告颜色文字色，和背景色形成对比
+   #{getCssVarName(color, warning, light, default)}: rgba(var(#{getCssVarName(orange, 0)}),1); // 浅版警示色（多用于背景），表示警告、不安全的状态
+   #{getCssVarName(color, warning, light, hover)}: rgba(var(#{getCssVarName(orange, 1)}),1); // 浅版警示色悬浮态
+   #{getCssVarName(color, warning, light, active)}: rgba(var(#{getCssVarName(orange, 2)}),1); // 浅版警示色激活态
+ 
+   // 危险色
+   #{getCssVarName(color, danger)}: rgba(var(#{getCssVarName(red, 5)}),1); // 危险色，表示危险的操作、或需要特别注意的危险信息
+   #{getCssVarName(color, danger, text)}: rgba(var(#{getCssVarName(white)}), 1); // 危险颜色文字色，和背景色形成对比
+   #{getCssVarName(color, danger, hover)}: rgba(var(#{getCssVarName(red, 4)}),1); // 危险色悬浮态
+   #{getCssVarName(color, danger, hover, text)}: rgba(var(#{getCssVarName(white)}), 1); // 危险颜色文字色，和背景色形成对比
+   #{getCssVarName(color, danger, active)}: rgba(var(#{getCssVarName(red, 6)}),1); // 危险色激活态
+   #{getCssVarName(color, danger, active, text)}: rgba(var(#{getCssVarName(white)}), 1); // 危险颜色文字色，和背景色形成对比
+   #{getCssVarName(color, danger, light, default)}: rgba(var(#{getCssVarName(red, 0)}),1); // 浅版危险色（多用于背景），表示危险的操作、或需要特别注意的危险信息
+   #{getCssVarName(color, danger, light, hover)}: rgba(var(#{getCssVarName(red, 1)}),1); // 浅版危险色悬浮态
+   #{getCssVarName(color, danger, light, active)}: rgba(var(#{getCssVarName(red, 2)}),1); // 浅版危险色激活态
+ 
+   // 文本/图标颜色
+   #{getCssVarName(color, text, 0)}: rgba(var(#{getCssVarName(grey, 9)}),1); // 文本/图标颜色 - 最主要
+   #{getCssVarName(color, text, 1)}: rgba(var(#{getCssVarName(grey, 7)}),1); // 文本/图标颜色 - 稍次要
+   #{getCssVarName(color, text, 2)}: rgba(var(#{getCssVarName(grey, 6)}),1); // 文本/图标颜色 - 次要
+   #{getCssVarName(color, text, 3)}: rgba(var(#{getCssVarName(grey, 4)}),1); // 文本/图标颜色 - 最次要
+ 
+   // 链接颜色
+   #{getCssVarName(color, link)}: rgba(var(#{getCssVarName(blue, cyan, 5)}),1); // 链接颜色
+   #{getCssVarName(color, link, hover)}: rgba(var(#{getCssVarName(blue, cyan, 4)}),1); // 链接颜色 - 悬浮态
+   #{getCssVarName(color, link, active)}: rgba(var(#{getCssVarName(blue, cyan, 6)}),1); // 链接颜色 - 激活态
+   #{getCssVarName(color, link, visited)}: rgba(var(#{getCssVarName(blue, cyan, 5)}),1); // 链接颜色 - 已访问
+ 
+   // 背景色
+   #{getCssVarName(color, bg, 0)}: rgba(var(#{getCssVarName(grey, 0)}),1); // 背景色 - 最下层（底部页面）
+   #{getCssVarName(color, bg, 1)}: rgba(var(#{getCssVarName(white)}),1); // 背景色 - 次下层（页面中需要提升的内容）
+   #{getCssVarName(color, bg, 2)}: rgba(var(#{getCssVarName(white)}),1); // 背景色 - 中间层（模态等容器）
+   #{getCssVarName(color, bg, 3)}: rgba(var(#{getCssVarName(white)}),1); // 背景色 - 次上层（通知，Toast等）
+   #{getCssVarName(color, bg, 4)}: rgba(var(#{getCssVarName(white)}),1); // 背景色 - 最上层（特殊）
+ 
+   // 填充色
+   #{getCssVarName(color, fill, 0)}: rgba(var(#{getCssVarName(grey, 8)}),0.05); // 填充色 - 默认态
+   #{getCssVarName(color, fill, 1)}: rgba(var(#{getCssVarName(grey, 8)}),0.1); // 填充色 - 悬浮态
+   #{getCssVarName(color, fill, 2)}: rgba(var(#{getCssVarName(grey, 8), }),0.13); // 填充色 - 激活态
+ 
+ 
+   // 边框
+   #{getCssVarName(color, border)}: rgba(var(#{getCssVarName(grey, 9)}),0.1); // 默认描边颜色
+ 
+   // 禁用态
+   #{getCssVarName(color, disabled, text)}: rgba(var(#{getCssVarName(grey, 9)}), 0.35); // 禁用态 - 文字
+   #{getCssVarName(color, disabled, border)}: rgba(var(#{getCssVarName(grey, 1)}),1); // 禁用态 - 描边
+   #{getCssVarName(color, disabled, bg)}: rgba(var(#{getCssVarName(grey, 1)}),1); // 禁用态 - 背景
+   #{getCssVarName(color, disabled, fill)}: rgba(var(#{getCssVarName(grey, 8)}),0.04); // 禁用态 - 填充
+ 
+   // 阴影
+   #{getCssVarName(color, shadow)}: rgba(var(#{getCssVarName(black)}),0.04); // 用于模拟描边的阴影颜色
+   #{getCssVarName(shadow, elevated)}:
+     0 0 1px rgba(0 0 0 / 30%),
+     0 4px 14px rgba(0 0 0 / 10%); // 用于toast, modal, popover等需要提升层级的界面元素
+ 
+   // 字号
+   #{getCssVarName('font-size', 'small')}: 12px;
+   #{getCssVarName('font-size', 'regular')}: 14px;
+   #{getCssVarName('font-size', 'header-6')}: 16px;
+   #{getCssVarName('font-size', 'header-5')}: 18px;
+   #{getCssVarName('font-size', 'header-4')}: 20px;
+   #{getCssVarName('font-size', 'header-3')}: 24px;
+   #{getCssVarName('font-size', 'header-2')}: 28px;
+   #{getCssVarName('font-size', 'header-1')}: 32px;
+ 
+   // 字重
+   #{getCssVarName('font-weight', 'light')}: 200;
+   #{getCssVarName('font-weight', 'regular')}: 400;
+   #{getCssVarName('font-weight', 'bold')}: 800;
+ 
+   // 圆角
+   #{getCssVarName(border, radius, extra, small)}: 2px; // 超小圆角，用于 checkbox 内圆角
+   #{getCssVarName(border, radius, small)}: 4px; // 小圆角, 用于 button、tag、tabs 等大多数组件, 比较常用
+   #{getCssVarName(border, radius, medium)}: 8px; // 中圆角, 用于 dropdown、scrollist、transfer 等菜单类组件
+   #{getCssVarName(border, radius, large)}: 12px; // 大圆角, 用于 modal
+   #{getCssVarName(border, radius, circle)}: 50%; // 全圆角, 用于 avatar, badge 等组件
+   #{getCssVarName(border, radius, full)}: 9999px; // 用于创建全尺寸圆角，如胶囊标签等
+ 
+   // 高度
+   #{getCssVarName('height-control', 'small')}: 24px;
+   #{getCssVarName('height-control', 'default')}: 32px;
+   #{getCssVarName('height-control', 'large')}: 40px;
+ 
+   // 描边尺寸
+   #{getCssVarName('border-thickness')}: 0;
+   #{getCssVarName('border-thickness', 'control')}: 1px;
+   #{getCssVarName('border-thickness', 'control-focus')}: 1px;
+ 
+   // 图标尺寸
+   #{getCssVarName('width-icon', 'extra-small')}: 8px;
+   #{getCssVarName('width-icon', 'small')}: 12px;
+   #{getCssVarName('width-icon', 'medium')}: 16px;
+   #{getCssVarName('width-icon', 'large')}: 20px;
+   #{getCssVarName('width-icon', 'extra-large')}: 24px;
+ 
+   // 间距
+   #{getCssVarName('spacing', 'none')}: 0;
+   #{getCssVarName('spacing', 'super-tight')}: 2px;
+   #{getCssVarName('spacing', 'extra-tight')}: 4px;
+   #{getCssVarName('spacing', 'tight')}: 8px;
+   #{getCssVarName('spacing', 'base-tight')}: 12px;
+   #{getCssVarName('spacing', 'base')}: 16px;
+   #{getCssVarName('spacing', 'base-loose')}: 20px;
+   #{getCssVarName('spacing', 'loose')}: 24px;
+   #{getCssVarName('spacing', 'extra-loose')}: 32px;
+   #{getCssVarName('spacing', 'super-loose')}: 40px;
+}
\ No newline at end of file