@semi-bot/semi-theme-trade-pass-growth-platform-test 1.0.0 → 1.0.2

package/README.md

@@ -1,15 +1,15 @@
 
 # @semi-bot/semi-theme-trade-pass-growth-platform-test   --- Semi Theme Generated By [Design System Management](https://semi.design/dsm/)
 ID: 28703
-Operator: 用户4783652620477
+Operator: Apilase
 
 ## Compatibility
 
-Compatible with Semi Foundation Version 2.96.0 or newer.
+Compatible with Semi Foundation Version 2.96.1 or newer.
     
 ## Version Release Note
     
-根据 DESIGN.md 大致上设置好对应的主题
+navigation变更
     
     
 ## Manual

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@semi-bot/semi-theme-trade-pass-growth-platform-test",
- "version": "1.0.0",
+ "version": "1.0.2",
  "description": "Semi theme generated by dsm. https://semi.design/dsm",
  "keywords": [
   "semi-theme",

package/raw.json

@@ -33,16 +33,16 @@
             "--semi-cyan-7": "140,230,233",
             "--semi-cyan-8": "195,243,244",
             "--semi-cyan-9": "230,249,250",
-            "--semi-grey-0": "28,29,35",
-            "--semi-grey-1": "46,47,56",
-            "--semi-grey-2": "65,67,76",
-            "--semi-grey-3": "85,87,97",
-            "--semi-grey-4": "107,109,117",
-            "--semi-grey-5": "136,138,146",
-            "--semi-grey-6": "167,169,176",
-            "--semi-grey-7": "198,200,205",
-            "--semi-grey-8": "230,231,234",
-            "--semi-grey-9": "249,249,249",
+            "--semi-grey-0": "37,37,37",
+            "--semi-grey-1": "55,55,55",
+            "--semi-grey-2": "73,73,73",
+            "--semi-grey-3": "92,92,92",
+            "--semi-grey-4": "107,107,107",
+            "--semi-grey-5": "141,141,141",
+            "--semi-grey-6": "171,171,171",
+            "--semi-grey-7": "202,202,202",
+            "--semi-grey-8": "233,233,233",
+            "--semi-grey-9": "248,248,248",
             "--semi-lime-0": "55,77,0",
             "--semi-lime-1": "84,116,0",
             "--semi-lime-2": "114,154,0",
@@ -207,16 +207,16 @@
             "--semi-cyan-7": "0,118,134",
             "--semi-cyan-8": "0,87,101",
             "--semi-cyan-9": "0,57,67",
-            "--semi-grey-0": "249,249,249",
-            "--semi-grey-1": "230,231,234",
-            "--semi-grey-2": "198,200,205",
-            "--semi-grey-3": "167,169,176",
-            "--semi-grey-4": "136,138,146",
-            "--semi-grey-5": "107,109,117",
-            "--semi-grey-6": "85,87,97",
-            "--semi-grey-7": "65,67,76",
-            "--semi-grey-8": "46,47,56",
-            "--semi-grey-9": "28,29,35",
+            "--semi-grey-0": "248,248,248",
+            "--semi-grey-1": "233,233,233",
+            "--semi-grey-2": "201,201,201",
+            "--semi-grey-3": "170,170,170",
+            "--semi-grey-4": "138,138,138",
+            "--semi-grey-5": "107,107,107",
+            "--semi-grey-6": "89,89,89",
+            "--semi-grey-7": "71,71,71",
+            "--semi-grey-8": "54,54,54",
+            "--semi-grey-9": "36,36,36",
             "--semi-lime-0": "245,253,232",
             "--semi-lime-1": "232,250,200",
             "--semi-lime-2": "213,245,147",
@@ -452,11 +452,12 @@
                 "secondary-light/--semi-color-secondary-light-default": "rgba(var(--semi-light-blue-5), 0.2)"
             },
             "light": {
-                "bg/--semi-color-bg-0": "rgba(var(--semi-white), 1)",
-                "bg/--semi-color-bg-1": "rgba(var(--semi-white), 1)",
-                "bg/--semi-color-bg-2": "rgba(var(--semi-white), 1)",
-                "bg/--semi-color-bg-3": "rgba(var(--semi-white), 1)",
-                "bg/--semi-color-bg-4": "rgba(var(--semi-white), 1)",
+                "bg/--semi-color-bg-0": "rgba(238,238,238,1)",
+                "bg/--semi-color-bg-1": "rgba(241,241,241,1)",
+                "bg/--semi-color-bg-2": "rgba(245,245,245,1)",
+                "bg/--semi-color-bg-3": "rgba(248,248,248,1)",
+                "bg/--semi-color-bg-4": "rgba(255,255,255,1)",
+                "fill/--semi-color-fill": "rgba(var(--semi-blue-6),1)",
                 "info/--semi-color-info": "rgba(var(--semi-blue-5), 1)",
                 "link/--semi-color-link": "rgba(var(--semi-blue-5), 1)",
                 "nav/--semi-color-nav-bg": "rgba(var(--semi-white), 1)",
@@ -471,9 +472,9 @@
                 "data/--semi-color-data-7": "rgba(139, 215, 210, 1)",
                 "data/--semi-color-data-8": "rgba(131, 176, 35, 1)",
                 "data/--semi-color-data-9": "rgba(233, 165, 229, 1)",
-                "fill/--semi-color-fill-0": "rgba(var(--semi-grey-8), 0.05)",
-                "fill/--semi-color-fill-1": "rgba(var(--semi-grey-8), 0.09)",
-                "fill/--semi-color-fill-2": "rgba(var(--semi-grey-8), 0.13)",
+                "fill/--semi-color-fill-0": "rgba(var(--semi-grey-8),0.05)",
+                "fill/--semi-color-fill-1": "rgba(var(--semi-grey-8),0.09)",
+                "fill/--semi-color-fill-2": "rgba(var(--semi-grey-8),0.13)",
                 "text/--semi-color-text-0": "rgba(var(--semi-grey-9),1)",
                 "text/--semi-color-text-1": "rgba(var(--semi-grey-9),0.8)",
                 "text/--semi-color-text-2": "rgba(var(--semi-grey-9),0.6)",
@@ -511,6 +512,7 @@
                 "danger/--semi-color-danger-active": "rgba(var(--semi-red-7), 1)",
                 "disabled/--semi-color-disabled-bg": "rgba(var(--semi-grey-1), 1)",
                 "default/--semi-color-default-hover": "rgba(var(--semi-grey-1), 1)",
+                "primary/--semi-color-nav-bg-active": "rgba(var(--semi-blue-1),1)",
                 "primary/--semi-color-primary-hover": "rgba(var(--semi-brand-6), 1)",
                 "success/--semi-color-success-hover": "rgba(var(--semi-green-6), 1)",
                 "warning/--semi-color-warning-hover": "rgba(var(--semi-amber-6), 1)",
@@ -676,7 +678,33 @@
                 "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)"
             }
         },
-        "components": {},
+        "components": {
+            "navigation": {
+                "color": {
+                    "$color-navigation_itemL1-bg-active": "var(--semi-color-nav-bg-active)",
+                    "$color-navigation_itemL1-text-active": "var(--semi-color-primary-active)",
+                    "$color-navigation_itemL1_icon-active": "var(--semi-color-primary-active)",
+                    "$color-navigation_itemLn-text-default": "var(--semi-color-text-1)"
+                },
+                "width": {
+                    "$width-navigation-outline": "1px",
+                    "$width-navigation_header_logo": "36px",
+                    "$width-navigation-outlineOffset": "-1px",
+                    "$width-navigation_icon_left-minWidth": "10px"
+                },
+                "height": {
+                    "$height-navigation_item_base": "24px"
+                },
+                "spacing": {
+                    "$spacing-navigation-paddingX": "5px",
+                    "$spacing-navigation_item-paddingY": "1px",
+                    "$spacing-navigation_list_wrapper-paddingTop": "12px",
+                    "$spacing-navigation_sub_item_first_child-marginTop": "5px",
+                    "$spacing-navigation_vertical_nav_header-paddingLeft": "0px",
+                    "$spacing-navigation_vertical_nav_header-paddingRight": "5px"
+                }
+            }
+        },
         "typography": {
             "Header": {
                 "header-1": {
@@ -727,7 +755,7 @@
             "red": "#E03131",
             "blue": "#007cff",
             "cyan": "#00b8c9",
-            "grey": "#6b6d75",
+            "grey": "#6b6b6b",
             "lime": "#b3e700",
             "pink": "#ff1371",
             "teal": "#00b79b",

package/scss/_palette.scss

@@ -31,16 +31,16 @@ body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-ligh
 --semi-cyan-7: 0,118,134;
 --semi-cyan-8: 0,87,101;
 --semi-cyan-9: 0,57,67;
---semi-grey-0: 249,249,249;
---semi-grey-1: 230,231,234;
---semi-grey-2: 198,200,205;
---semi-grey-3: 167,169,176;
---semi-grey-4: 136,138,146;
---semi-grey-5: 107,109,117;
---semi-grey-6: 85,87,97;
---semi-grey-7: 65,67,76;
---semi-grey-8: 46,47,56;
---semi-grey-9: 28,29,35;
+--semi-grey-0: 248,248,248;
+--semi-grey-1: 233,233,233;
+--semi-grey-2: 201,201,201;
+--semi-grey-3: 170,170,170;
+--semi-grey-4: 138,138,138;
+--semi-grey-5: 107,107,107;
+--semi-grey-6: 89,89,89;
+--semi-grey-7: 71,71,71;
+--semi-grey-8: 54,54,54;
+--semi-grey-9: 36,36,36;
 --semi-lime-0: 245,253,232;
 --semi-lime-1: 232,250,200;
 --semi-lime-2: 213,245,147;
@@ -207,16 +207,16 @@ body[theme-mode="dark"], body .semi-always-dark, :host([theme-mode="dark"]), :ho
 --semi-cyan-7: 140,230,233;
 --semi-cyan-8: 195,243,244;
 --semi-cyan-9: 230,249,250;
---semi-grey-0: 28,29,35;
---semi-grey-1: 46,47,56;
---semi-grey-2: 65,67,76;
---semi-grey-3: 85,87,97;
---semi-grey-4: 107,109,117;
---semi-grey-5: 136,138,146;
---semi-grey-6: 167,169,176;
---semi-grey-7: 198,200,205;
---semi-grey-8: 230,231,234;
---semi-grey-9: 249,249,249;
+--semi-grey-0: 37,37,37;
+--semi-grey-1: 55,55,55;
+--semi-grey-2: 73,73,73;
+--semi-grey-3: 92,92,92;
+--semi-grey-4: 107,107,107;
+--semi-grey-5: 141,141,141;
+--semi-grey-6: 171,171,171;
+--semi-grey-7: 202,202,202;
+--semi-grey-8: 233,233,233;
+--semi-grey-9: 248,248,248;
 --semi-lime-0: 55,77,0;
 --semi-lime-1: 84,116,0;
 --semi-lime-2: 114,154,0;

package/scss/global.scss

@@ -1,11 +1,12 @@
 @import './_palette.scss';
 
 body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-light {
---semi-color-bg-0: rgba(var(--semi-white), 1);
---semi-color-bg-1: rgba(var(--semi-white), 1);
---semi-color-bg-2: rgba(var(--semi-white), 1);
---semi-color-bg-3: rgba(var(--semi-white), 1);
---semi-color-bg-4: rgba(var(--semi-white), 1);
+--semi-color-bg-0: rgba(238,238,238,1);
+--semi-color-bg-1: rgba(241,241,241,1);
+--semi-color-bg-2: rgba(245,245,245,1);
+--semi-color-bg-3: rgba(248,248,248,1);
+--semi-color-bg-4: rgba(255,255,255,1);
+--semi-color-fill: rgba(var(--semi-blue-6),1);
 --semi-color-info: rgba(var(--semi-blue-5), 1);
 --semi-color-link: rgba(var(--semi-blue-5), 1);
 --semi-color-nav-bg: rgba(var(--semi-white), 1);
@@ -20,9 +21,9 @@ body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-ligh
 --semi-color-data-7: rgba(139, 215, 210, 1);
 --semi-color-data-8: rgba(131, 176, 35, 1);
 --semi-color-data-9: rgba(233, 165, 229, 1);
---semi-color-fill-0: rgba(var(--semi-grey-8), 0.05);
---semi-color-fill-1: rgba(var(--semi-grey-8), 0.09);
---semi-color-fill-2: rgba(var(--semi-grey-8), 0.13);
+--semi-color-fill-0: rgba(var(--semi-grey-8),0.05);
+--semi-color-fill-1: rgba(var(--semi-grey-8),0.09);
+--semi-color-fill-2: rgba(var(--semi-grey-8),0.13);
 --semi-color-text-0: rgba(var(--semi-grey-9),1);
 --semi-color-text-1: rgba(var(--semi-grey-9),0.8);
 --semi-color-text-2: rgba(var(--semi-grey-9),0.6);
@@ -60,6 +61,7 @@ body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-ligh
 --semi-color-danger-active: rgba(var(--semi-red-7), 1);
 --semi-color-disabled-bg: rgba(var(--semi-grey-1), 1);
 --semi-color-default-hover: rgba(var(--semi-grey-1), 1);
+--semi-color-nav-bg-active: rgba(var(--semi-blue-1),1);
 --semi-color-primary-hover: rgba(var(--semi-brand-6), 1);
 --semi-color-success-hover: rgba(var(--semi-green-6), 1);
 --semi-color-warning-hover: rgba(var(--semi-amber-6), 1);

package/scss/local.scss

@@ -0,0 +1,15 @@
+$color-navigation_itemL1-bg-active: var(--semi-color-nav-bg-active);
+$color-navigation_itemL1-text-active: var(--semi-color-primary-active);
+$color-navigation_itemL1_icon-active: var(--semi-color-primary-active);
+$color-navigation_itemLn-text-default: var(--semi-color-text-1);
+$width-navigation-outline: 1px;
+$width-navigation_header_logo: 36px;
+$width-navigation-outlineOffset: -1px;
+$width-navigation_icon_left-minWidth: 10px;
+$height-navigation_item_base: 24px;
+$spacing-navigation-paddingX: 5px;
+$spacing-navigation_item-paddingY: 1px;
+$spacing-navigation_list_wrapper-paddingTop: 12px;
+$spacing-navigation_sub_item_first_child-marginTop: 5px;
+$spacing-navigation_vertical_nav_header-paddingLeft: 0px;
+$spacing-navigation_vertical_nav_header-paddingRight: 5px;

package/semi.css

@@ -33,16 +33,16 @@ body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light
   --semi-cyan-7: 0,118,134;
   --semi-cyan-8: 0,87,101;
   --semi-cyan-9: 0,57,67;
-  --semi-grey-0: 249,249,249;
-  --semi-grey-1: 230,231,234;
-  --semi-grey-2: 198,200,205;
-  --semi-grey-3: 167,169,176;
-  --semi-grey-4: 136,138,146;
-  --semi-grey-5: 107,109,117;
-  --semi-grey-6: 85,87,97;
-  --semi-grey-7: 65,67,76;
-  --semi-grey-8: 46,47,56;
-  --semi-grey-9: 28,29,35;
+  --semi-grey-0: 248,248,248;
+  --semi-grey-1: 233,233,233;
+  --semi-grey-2: 201,201,201;
+  --semi-grey-3: 170,170,170;
+  --semi-grey-4: 138,138,138;
+  --semi-grey-5: 107,107,107;
+  --semi-grey-6: 89,89,89;
+  --semi-grey-7: 71,71,71;
+  --semi-grey-8: 54,54,54;
+  --semi-grey-9: 36,36,36;
   --semi-lime-0: 245,253,232;
   --semi-lime-1: 232,250,200;
   --semi-lime-2: 213,245,147;
@@ -208,16 +208,16 @@ body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .
   --semi-cyan-7: 140,230,233;
   --semi-cyan-8: 195,243,244;
   --semi-cyan-9: 230,249,250;
-  --semi-grey-0: 28,29,35;
-  --semi-grey-1: 46,47,56;
-  --semi-grey-2: 65,67,76;
-  --semi-grey-3: 85,87,97;
-  --semi-grey-4: 107,109,117;
-  --semi-grey-5: 136,138,146;
-  --semi-grey-6: 167,169,176;
-  --semi-grey-7: 198,200,205;
-  --semi-grey-8: 230,231,234;
-  --semi-grey-9: 249,249,249;
+  --semi-grey-0: 37,37,37;
+  --semi-grey-1: 55,55,55;
+  --semi-grey-2: 73,73,73;
+  --semi-grey-3: 92,92,92;
+  --semi-grey-4: 107,107,107;
+  --semi-grey-5: 141,141,141;
+  --semi-grey-6: 171,171,171;
+  --semi-grey-7: 202,202,202;
+  --semi-grey-8: 233,233,233;
+  --semi-grey-9: 248,248,248;
   --semi-lime-0: 55,77,0;
   --semi-lime-1: 84,116,0;
   --semi-lime-2: 114,154,0;
@@ -351,11 +351,12 @@ body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .
 }
 
 body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light {
-  --semi-color-bg-0: rgba(var(--semi-white), 1);
-  --semi-color-bg-1: rgba(var(--semi-white), 1);
-  --semi-color-bg-2: rgba(var(--semi-white), 1);
-  --semi-color-bg-3: rgba(var(--semi-white), 1);
-  --semi-color-bg-4: rgba(var(--semi-white), 1);
+  --semi-color-bg-0: rgba(238,238,238,1);
+  --semi-color-bg-1: rgba(241,241,241,1);
+  --semi-color-bg-2: rgba(245,245,245,1);
+  --semi-color-bg-3: rgba(248,248,248,1);
+  --semi-color-bg-4: rgba(255,255,255,1);
+  --semi-color-fill: rgba(var(--semi-blue-6),1);
   --semi-color-info: rgba(var(--semi-blue-5), 1);
   --semi-color-link: rgba(var(--semi-blue-5), 1);
   --semi-color-nav-bg: rgba(var(--semi-white), 1);
@@ -370,9 +371,9 @@ body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light
   --semi-color-data-7: rgba(139, 215, 210, 1);
   --semi-color-data-8: rgba(131, 176, 35, 1);
   --semi-color-data-9: rgba(233, 165, 229, 1);
-  --semi-color-fill-0: rgba(var(--semi-grey-8), 0.05);
-  --semi-color-fill-1: rgba(var(--semi-grey-8), 0.09);
-  --semi-color-fill-2: rgba(var(--semi-grey-8), 0.13);
+  --semi-color-fill-0: rgba(var(--semi-grey-8),0.05);
+  --semi-color-fill-1: rgba(var(--semi-grey-8),0.09);
+  --semi-color-fill-2: rgba(var(--semi-grey-8),0.13);
   --semi-color-text-0: rgba(var(--semi-grey-9),1);
   --semi-color-text-1: rgba(var(--semi-grey-9),0.8);
   --semi-color-text-2: rgba(var(--semi-grey-9),0.6);
@@ -410,6 +411,7 @@ body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light
   --semi-color-danger-active: rgba(var(--semi-red-7), 1);
   --semi-color-disabled-bg: rgba(var(--semi-grey-1), 1);
   --semi-color-default-hover: rgba(var(--semi-grey-1), 1);
+  --semi-color-nav-bg-active: rgba(var(--semi-blue-1),1);
   --semi-color-primary-hover: rgba(var(--semi-brand-6), 1);
   --semi-color-success-hover: rgba(var(--semi-green-6), 1);
   --semi-color-warning-hover: rgba(var(--semi-amber-6), 1);
@@ -15873,8 +15875,8 @@ img[src=""], img:not([src]) {
   outline: none;
   overflow: hidden;
   margin: 0;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding-left: 5px;
+  padding-right: 5px;
   user-select: none;
   transition: padding-left 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95);
   border-right: 1px solid var(--semi-color-border);
@@ -15892,7 +15894,7 @@ img[src=""], img:not([src]) {
   list-style: none;
 }
 .semi-navigation-list > .semi-navigation-item-normal {
-  height: 36px;
+  height: 24px;
 }
 .semi-navigation-list > .semi-navigation-item {
   font-weight: 600;
@@ -15923,7 +15925,7 @@ img[src=""], img:not([src]) {
   cursor: pointer;
   display: flex;
   border-radius: var(--semi-border-radius-small);
-  padding: 8px 12px;
+  padding: 1px 12px;
   box-sizing: border-box;
   margin-top: 0;
   margin-bottom: 8px;
@@ -15946,8 +15948,8 @@ img[src=""], img:not([src]) {
   width: 32px;
 }
 .semi-navigation-sub-wrap .semi-navigation-sub-title:focus-visible, .semi-navigation-item:focus-visible {
-  outline: 2px solid var(--semi-color-primary-light-active);
-  outline-offset: -2px;
+  outline: 1px solid var(--semi-color-primary-light-active);
+  outline-offset: -1px;
 }
 .semi-navigation-header-link, .semi-navigation-item-link {
   display: flex;
@@ -15961,7 +15963,7 @@ img[src=""], img:not([src]) {
   padding: 0;
 }
 .semi-navigation-item-has-link .semi-navigation-item-link {
-  padding: 8px 12px;
+  padding: 1px 12px;
 }
 .semi-navigation-item-sub {
   padding: 0;
@@ -15989,14 +15991,14 @@ img[src=""], img:not([src]) {
   display: inline-flex;
   color: var(--semi-color-text-2);
   margin-right: 12px;
-  min-width: 20px;
+  min-width: 10px;
   margin-left: 0;
 }
 .semi-navigation-item-icon-toggle-left {
   display: inline-flex;
   color: var(--semi-color-text-2);
   margin-right: 12px;
-  min-width: 20px;
+  min-width: 10px;
 }
 .semi-navigation-item-icon-toggle-right {
   display: inline-flex;
@@ -16064,15 +16066,15 @@ img[src=""], img:not([src]) {
   color: var(--semi-color-primary-disabled);
 }
 .semi-navigation-item-normal:active:not(.semi-navigation-item-selected), .semi-navigation-inner > .semi-navigation-item-normal:active:not(.semi-navigation-item-selected) {
-  background-color: var(--semi-color-fill-1);
-  color: var(--semi-color-text-0);
+  background-color: var(--semi-color-nav-bg-active);
+  color: var(--semi-color-primary-active);
 }
 .semi-navigation-item-normal:active:not(.semi-navigation-item-selected) .semi-navigation-item-icon:first-child, .semi-navigation-inner > .semi-navigation-item-normal:active:not(.semi-navigation-item-selected) .semi-navigation-item-icon:first-child {
-  color: var(--semi-color-text-2);
+  color: var(--semi-color-primary-active);
 }
 .semi-navigation-item-normal:active.semi-navigation-item-selected, .semi-navigation-inner > .semi-navigation-item-normal:active.semi-navigation-item-selected {
   color: var(--semi-color-text-0);
-  background-color: var(--semi-color-fill-1);
+  background-color: var(--semi-color-nav-bg-active);
 }
 .semi-navigation-item-normal:active.semi-navigation-item-selected .semi-navigation-item-icon:first-child, .semi-navigation-inner > .semi-navigation-item-normal:active.semi-navigation-item-selected .semi-navigation-item-icon:first-child {
   color: var(--semi-color-primary);
@@ -16099,7 +16101,7 @@ img[src=""], img:not([src]) {
 .semi-navigation-sub-wrap .semi-navigation-sub-title {
   display: flex;
   justify-content: flex-start;
-  height: 36px;
+  height: 24px;
   align-items: center;
 }
 .semi-navigation-sub {
@@ -16113,14 +16115,14 @@ img[src=""], img:not([src]) {
   overflow: hidden;
 }
 .semi-navigation-sub .semi-navigation-item {
-  color: var(--semi-color-text-0);
+  color: var(--semi-color-text-1);
   background-color: transparent;
-  height: 36px;
+  height: 24px;
   font-weight: 400;
   width: 100%;
 }
 .semi-navigation-sub .semi-navigation-item:first-child {
-  margin-top: 8px;
+  margin-top: 5px;
 }
 .semi-navigation-sub .semi-navigation-item > .semi-navigation-sub .semi-navigation-item-text:first-child {
   margin-left: 44px;
@@ -16149,11 +16151,11 @@ img[src=""], img:not([src]) {
   color: var(--semi-color-primary);
 }
 .semi-navigation-sub .semi-navigation-item:active:not(.semi-navigation-sub-wrap):not(.semi-navigation-item-selected):not(.semi-navigation-item-disabled) {
-  background-color: var(--semi-color-fill-1);
-  color: var(--semi-color-text-0);
+  background-color: var(--semi-color-nav-bg-active);
+  color: var(--semi-color-primary-active);
 }
 .semi-navigation-sub .semi-navigation-item:active:not(.semi-navigation-sub-wrap):not(.semi-navigation-item-selected):not(.semi-navigation-item-disabled) .semi-navigation-item-icon:first-child {
-  color: var(--semi-color-text-2);
+  color: var(--semi-color-primary-active);
 }
 .semi-navigation-sub .semi-navigation-item:active.semi-navigation-item-disabled {
   background-color: transparent;
@@ -16311,15 +16313,15 @@ img[src=""], img:not([src]) {
   color: var(--semi-color-primary);
 }
 .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active:not(.semi-navigation-sub-title-selected) {
-  background-color: var(--semi-color-fill-1);
-  color: var(--semi-color-text-0);
+  background-color: var(--semi-color-nav-bg-active);
+  color: var(--semi-color-primary-active);
 }
 .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon:first-child {
-  color: var(--semi-color-text-2);
+  color: var(--semi-color-primary-active);
 }
 .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-selected {
   color: var(--semi-color-text-0);
-  background-color: var(--semi-color-fill-1);
+  background-color: var(--semi-color-nav-bg-active);
 }
 .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child {
   color: var(--semi-color-primary);
@@ -16399,8 +16401,8 @@ img[src=""], img:not([src]) {
 .semi-navigation-vertical .semi-navigation-header {
   padding-top: 32px;
   padding-bottom: 36px;
-  padding-left: 3.5px;
-  padding-right: 8px;
+  padding-left: 0px;
+  padding-right: 5px;
   width: 100%;
 }
 .semi-navigation-vertical .semi-navigation-header-collapsed {
@@ -16642,8 +16644,8 @@ img[src=""], img:not([src]) {
 }
 .semi-rtl .semi-navigation-vertical .semi-navigation-header,
 .semi-portal-rtl .semi-navigation-vertical .semi-navigation-header {
-  padding-right: 3.5px;
-  padding-left: 8px;
+  padding-right: 0px;
+  padding-left: 5px;
 }
 .semi-rtl .semi-navigation-vertical .semi-navigation-header-collapsed,
 .semi-portal-rtl .semi-navigation-vertical .semi-navigation-header-collapsed {