xto-fronted 0.4.113 → 0.5.0

package/src/assets/styles/_reset.scss

@@ -13,7 +13,7 @@
 html {
   width: 100%;
   height: 100%;
-  font-size: var(--font-size-base);
+  font-size: var(--xto-font-size-base, 14px);
   -webkit-text-size-adjust: 100%;
   -webkit-tap-highlight-color: transparent;
   text-rendering: optimizeLegibility;
@@ -24,11 +24,11 @@ html {
 body {
   width: 100%;
   height: 100%;
-  font-family: var(--font-family);
-  font-size: var(--font-size-base);
+  font-family: var(--xto-font-family, 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif);
+  font-size: var(--xto-font-size-base, 14px);
   line-height: 1.5;
-  color: var(--color-text-primary);
-  background-color: var(--bg-color-page);
+  color: var(--xto-color-text-primary, #1F2937);
+  background-color: var(--xto-bg-color-page, #F9FAFB);
 }
 
 #app {
@@ -37,13 +37,13 @@ body {
 }
 
 a {
-  color: var(--color-primary);
+  color: var(--xto-color-primary, #4F46E5);
   text-decoration: none;
   cursor: pointer;
-  transition: color var(--transition-duration-fast);
+  transition: color var(--xto-transition-duration-fast, 150ms);
 
   &:hover {
-    color: var(--color-primary-light-3);
+    color: var(--xto-color-primary-light-3, #7578F3);
   }
 }
 
@@ -92,7 +92,7 @@ h5,
 h6 {
   margin: 0;
   font-weight: 500;
-  color: var(--color-text-primary);
+  color: var(--xto-color-text-primary, #1F2937);
 }
 
 p {
@@ -106,21 +106,21 @@ p {
 }
 
 ::-webkit-scrollbar-track {
-  background-color: var(--color-fill-light);
+  background-color: var(--xto-fill-color-light, #F9FAFB);
   border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: var(--color-border);
+  background-color: var(--xto-border-color, #D1D5DB);
   border-radius: 3px;
 
   &:hover {
-    background-color: var(--color-text-secondary);
+    background-color: var(--xto-color-text-secondary, #6B7280);
   }
 }
 
 // 选中文本样式
 ::selection {
-  background-color: var(--color-primary-light-8);
-  color: var(--color-primary);
+  background-color: var(--xto-color-primary-light-8, #D4D7FE);
+  color: var(--xto-color-primary, #4F46E5);
 }

package/src/assets/styles/_root.scss

@@ -1,112 +1,115 @@
 // ==============================================
-// CSS Variables - 企业级配色方案
-// 参考：阿里 Ant Design Pro、腾讯云控制台
+// CSS Variables - XTO UI Design Token System
+// Indigo palette with --xto-* namespace
 // ==============================================
 
 :root {
-  // 主色调 - 科技蓝系（深邃、专业）
-  --color-primary: #1677ff;
-  --color-primary-light-1: #4096ff;
-  --color-primary-light-2: #69b1ff;
-  --color-primary-light-3: #91caff;
-  --color-primary-light-4: #bae0ff;
-  --color-primary-light-5: #e6f4ff;
-  --color-primary-light-6: #f0f8ff;
-  --color-primary-dark-1: #0958d9;
-  --color-primary-dark-2: #003eb3;
-  --color-primary-dark-3: #002c8c;
+  // 主色调 - Indigo 系（深邃、专业）
+  --xto-color-primary: #4F46E5;
+  --xto-color-primary-light-1: #5B54E8;
+  --xto-color-primary-light-2: #6B63EB;
+  --xto-color-primary-light-3: #7C73EE;
+  --xto-color-primary-light-4: #8B83F1;
+  --xto-color-primary-light-5: #A5A4F4;
+  --xto-color-primary-light-6: #BFBDF7;
+  --xto-color-primary-light-7: #D4D3F9;
+  --xto-color-primary-light-8: #E0DFFB;
+  --xto-color-primary-light-9: #EEF2FF;
+  --xto-color-primary-dark-1: #4338CA;
+  --xto-color-primary-dark-2: #3730A3;
+  --xto-color-primary-dark-3: #312E81;
 
   // 功能色 - 精致调和
-  --color-success: #52c41a;
-  --color-success-light: #b7eb8f;
-  --color-success-lighter: #f6ffed;
-  --color-success-dark: #389e0d;
-
-  --color-warning: #faad14;
-  --color-warning-light: #ffe58f;
-  --color-warning-lighter: #fffbe6;
-  --color-warning-dark: #d48806;
-
-  --color-danger: #ff4d4f;
-  --color-danger-light: #ffa39e;
-  --color-danger-lighter: #fff2f0;
-  --color-danger-dark: #cf1322;
-
-  --color-info: #1677ff;
-  --color-info-light: #91caff;
-  --color-info-lighter: #e6f4ff;
-  --color-info-dark: #0958d9;
+  --xto-color-success: #10B981;
+  --xto-color-success-light: #6EE7B7;
+  --xto-color-success-lighter: #ECFDF5;
+  --xto-color-success-dark: #059669;
+
+  --xto-color-warning: #F59E0B;
+  --xto-color-warning-light: #FCD34D;
+  --xto-color-warning-lighter: #FFFBEB;
+  --xto-color-warning-dark: #D97706;
+
+  --xto-color-danger: #EF4444;
+  --xto-color-danger-light: #FCA5A5;
+  --xto-color-danger-lighter: #FEF2F2;
+  --xto-color-danger-dark: #DC2626;
+
+  --xto-color-info: #6B7280;
+  --xto-color-info-light: #9CA3AF;
+  --xto-color-info-lighter: #F3F4F6;
+  --xto-color-info-dark: #4B5563;
 
   // 文字颜色 - 层次分明
-  --color-text-primary: #1f1f1f;
-  --color-text-regular: #424242;
-  --color-text-secondary: #757575;
-  --color-text-placeholder: #9e9e9e;
-  --color-text-disabled: #bdbdbd;
+  --xto-color-text-primary: #1F2937;
+  --xto-color-text-regular: #4B5563;
+  --xto-color-text-secondary: #6B7280;
+  --xto-color-text-placeholder: #9CA3AF;
+  --xto-color-text-disabled: #D1D5DB;
 
   // 边框颜色 - 克制淡雅
-  --color-border: #d9d9d9;
-  --color-border-light: #e8e8e8;
-  --color-border-lighter: #f0f0f0;
-  --color-border-extra-light: #f5f5f5;
-  --color-border-dark: #bfbfbf;
+  --xto-border-color: #D1D5DB;
+  --xto-border-color-light: #E5E7EB;
+  --xto-border-color-lighter: #F3F4F6;
+  --xto-border-color-extra-light: #F9FAFB;
+  --xto-border-color-dark: #9CA3AF;
 
   // 填充颜色 - 背景层次
-  --color-fill: #f5f5f5;
-  --color-fill-light: #fafafa;
-  --color-fill-lighter: #ffffff;
-  --color-fill-blank: #ffffff;
-  --color-fill-dark: #e8e8e8;
+  --xto-fill-color: #F3F4F6;
+  --xto-fill-color-light: #F9FAFB;
+  --xto-fill-color-lighter: #FFFFFF;
+  --xto-fill-color-blank: #FFFFFF;
+  --xto-fill-color-dark: #E5E7EB;
 
   // 背景颜色 - 页面层级
-  --bg-color: #ffffff;
-  --bg-color-page: #f0f2f5;
-  --bg-color-component: #ffffff;
-  --bg-color-overlay: #ffffff;
-  --bg-color-spotlight: #e6f4ff;
+  --xto-bg-color: #FFFFFF;
+  --xto-bg-color-page: #F9FAFB;
+  --xto-bg-color-component: #FFFFFF;
+  --xto-bg-color-overlay: #FFFFFF;
+  --xto-bg-color-spotlight: #EEF2FF;
 
   // 盒子阴影 - 精致层次
-  --box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
-                0 3px 6px -4px rgba(0, 0, 0, 0.12),
-                0 9px 28px 8px rgba(0, 0, 0, 0.05);
-  --box-shadow-light: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
-                      0 1px 6px -1px rgba(0, 0, 0, 0.02),
-                      0 2px 4px 0 rgba(0, 0, 0, 0.02);
-  --box-shadow-lighter: 0 1px 4px rgba(0, 0, 0, 0.04);
-  --box-shadow-dark: 0 6px 16px -8px rgba(0, 0, 0, 0.08),
-                     0 9px 28px 8px rgba(0, 0, 0, 0.05),
-                     0 12px 48px 16px rgba(0, 0, 0, 0.03);
-  --box-shadow-card: 0 1px 10px -6px rgba(0, 0, 0, 0.1);
-  --box-shadow-card-hover: 0 6px 16px -8px rgba(0, 0, 0, 0.12);
+  --xto-shadow-subtle: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
+                        0 1px 6px -1px rgba(0, 0, 0, 0.02),
+                        0 2px 4px 0 rgba(0, 0, 0, 0.02);
+  --xto-shadow-base: 0 1px 4px rgba(0, 0, 0, 0.04);
+  --xto-shadow-elevated: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+                          0 3px 6px -4px rgba(0, 0, 0, 0.12),
+                          0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  --xto-shadow-prominent: 0 6px 16px -8px rgba(0, 0, 0, 0.08),
+                           0 9px 28px 8px rgba(0, 0, 0, 0.05),
+                           0 12px 48px 16px rgba(0, 0, 0, 0.03);
+  --xto-shadow-card: 0 1px 10px -6px rgba(0, 0, 0, 0.1);
+  --xto-shadow-card-hover: 0 6px 16px -8px rgba(0, 0, 0, 0.12);
 
   // 字体 - 企业级字体栈
-  --font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+  --xto-font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-  --font-family-code: 'IBM Plex Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
+  --xto-font-family-code: 'IBM Plex Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
     Consolas, 'Courier New', monospace;
-  --font-size-base: 14px;
-  --font-size-small: 12px;
-  --font-size-large: 16px;
-  --font-size-extra-large: 20px;
-  --font-size-title: 24px;
-  --font-size-hero: 38px;
-  --font-line-height: 1.5714285714285714;
+  --xto-font-size-base: 14px;
+  --xto-font-size-small: 12px;
+  --xto-font-size-large: 16px;
+  --xto-font-size-extra-large: 20px;
+  --xto-font-size-title: 24px;
+  --xto-font-size-hero: 38px;
+  --xto-font-line-height: 1.5714285714285714;
 
   // 圆角 - 精致圆润
-  --border-radius-base: 6px;
-  --border-radius-small: 4px;
-  --border-radius-large: 8px;
-  --border-radius-extra-large: 12px;
-  --border-radius-round: 24px;
-  --border-radius-circle: 50%;
+  --xto-border-radius-base: 6px;
+  --xto-border-radius-small: 4px;
+  --xto-border-radius-large: 8px;
+  --xto-border-radius-extra-large: 12px;
+  --xto-border-radius-round: 24px;
+  --xto-border-radius-circle: 50%;
 
   // 间距 - 8px 基础网格
-  --spacing-xs: 4px;
-  --spacing-sm: 8px;
-  --spacing-md: 16px;
-  --spacing-lg: 24px;
-  --spacing-xl: 32px;
-  --spacing-xxl: 48px;
+  --xto-spacing-xs: 4px;
+  --xto-spacing-sm: 8px;
+  --xto-spacing-md: 16px;
+  --xto-spacing-lg: 24px;
+  --xto-spacing-xl: 32px;
+  --xto-spacing-xxl: 48px;
 
   // 尺寸 - 组件规格
   --component-size-large: 40px;
@@ -114,11 +117,11 @@
   --component-size-small: 24px;
 
   // 过渡 - 流畅动效
-  --transition-duration: 0.2s;
-  --transition-duration-fast: 0.1s;
-  --transition-duration-slow: 0.3s;
-  --transition-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
-  --transition-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --xto-transition-duration: 0.2s;
+  --xto-transition-duration-fast: 0.1s;
+  --xto-transition-duration-slow: 0.3s;
+  --xto-transition-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --xto-transition-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
 
   // z-index - 层级管理
   --z-index-dropdown: 1000;
@@ -137,48 +140,66 @@
   --footer-height: 32px;
 
   // 特殊效果
-  --gradient-primary: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
-  --gradient-hero: linear-gradient(135deg, #002c8c 0%, #1677ff 50%, #4096ff 100%);
-  --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
-  --gradient-mask: linear-gradient(180deg, rgba(0, 44, 140, 0.03) 0%, rgba(0, 0, 0, 0) 100%);
+  --xto-gradient-primary: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
+  --xto-gradient-hero: linear-gradient(135deg, #312E81 0%, #4F46E5 50%, #6366F1 100%);
+  --xto-gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
+  --xto-gradient-mask: linear-gradient(180deg, rgba(79, 70, 229, 0.03) 0%, rgba(0, 0, 0, 0) 100%);
 }
 
 // 暗色主题 - 深邃科技感
-.dark {
-  --color-text-primary: #ffffff;
-  --color-text-regular: #e0e0e0;
-  --color-text-secondary: #a6a6a6;
-  --color-text-placeholder: #737373;
-  --color-text-disabled: #5c5c5c;
-
-  --color-border: #434343;
-  --color-border-light: #363636;
-  --color-border-lighter: #2a2a2a;
-  --color-border-extra-light: #1f1f1f;
-  --color-border-dark: #5c5c5c;
-
-  --color-fill: #262626;
-  --color-fill-light: #1f1f1f;
-  --color-fill-lighter: #141414;
-  --color-fill-blank: #141414;
-  --color-fill-dark: #363636;
-
-  --bg-color: #141414;
-  --bg-color-page: #0a0a0a;
-  --bg-color-component: #1f1f1f;
-  --bg-color-overlay: #1f1f1f;
-  --bg-color-spotlight: #111d2c;
-
-  --box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.32),
-                0 3px 6px -4px rgba(0, 0, 0, 0.48),
-                0 9px 28px 8px rgba(0, 0, 0, 0.2);
-  --box-shadow-light: 0 1px 2px 0 rgba(0, 0, 0, 0.16),
-                      0 1px 6px -1px rgba(0, 0, 0, 0.12),
-                      0 2px 4px 0 rgba(0, 0, 0, 0.08);
-  --box-shadow-card: 0 1px 10px -6px rgba(0, 0, 0, 0.32);
-  --box-shadow-card-hover: 0 6px 16px -8px rgba(0, 0, 0, 0.48);
-
-  --gradient-primary: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
-  --gradient-hero: linear-gradient(135deg, #002c8c 0%, #0958d9 50%, #1677ff 100%);
-  --gradient-card: linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0.8) 100%);
-}
+html.dark {
+  --xto-color-primary: #818CF8;
+  --xto-color-primary-light-1: #9BA3FA;
+  --xto-color-primary-light-2: #B5BAFB;
+  --xto-color-primary-light-3: #C7CAFC;
+  --xto-color-primary-light-4: #D5D7FD;
+  --xto-color-primary-light-5: #E0E2FE;
+  --xto-color-primary-light-6: #EBECFE;
+  --xto-color-primary-light-7: #F0F1FE;
+  --xto-color-primary-light-8: #F5F5FE;
+  --xto-color-primary-light-9: #FAFAFF;
+  --xto-color-primary-dark-1: #6366F1;
+  --xto-color-primary-dark-2: #4F46E5;
+  --xto-color-primary-dark-3: #4338CA;
+
+  --xto-color-text-primary: #F9FAFB;
+  --xto-color-text-regular: #E5E7EB;
+  --xto-color-text-secondary: #9CA3AF;
+  --xto-color-text-placeholder: #6B7280;
+  --xto-color-text-disabled: #4B5563;
+
+  --xto-border-color: #374151;
+  --xto-border-color-light: #1F2937;
+  --xto-border-color-lighter: #111827;
+  --xto-border-color-extra-light: #030712;
+  --xto-border-color-dark: #4B5563;
+
+  --xto-fill-color: #1F2937;
+  --xto-fill-color-light: #111827;
+  --xto-fill-color-lighter: #030712;
+  --xto-fill-color-blank: #030712;
+  --xto-fill-color-dark: #374151;
+
+  --xto-bg-color: #111827;
+  --xto-bg-color-page: #030712;
+  --xto-bg-color-component: #1F2937;
+  --xto-bg-color-overlay: #1F2937;
+  --xto-bg-color-spotlight: #1E1B4B;
+
+  --xto-shadow-subtle: 0 1px 2px 0 rgba(0, 0, 0, 0.16),
+                        0 1px 6px -1px rgba(0, 0, 0, 0.12),
+                        0 2px 4px 0 rgba(0, 0, 0, 0.08);
+  --xto-shadow-base: 0 1px 4px rgba(0, 0, 0, 0.2);
+  --xto-shadow-elevated: 0 6px 16px 0 rgba(0, 0, 0, 0.32),
+                          0 3px 6px -4px rgba(0, 0, 0, 0.48),
+                          0 9px 28px 8px rgba(0, 0, 0, 0.2);
+  --xto-shadow-prominent: 0 6px 16px -8px rgba(0, 0, 0, 0.32),
+                           0 9px 28px 8px rgba(0, 0, 0, 0.2),
+                           0 12px 48px 16px rgba(0, 0, 0, 0.12);
+  --xto-shadow-card: 0 1px 10px -6px rgba(0, 0, 0, 0.32);
+  --xto-shadow-card-hover: 0 6px 16px -8px rgba(0, 0, 0, 0.48);
+
+  --xto-gradient-primary: linear-gradient(135deg, #818CF8 0%, #6366F1 100%);
+  --xto-gradient-hero: linear-gradient(135deg, #4338CA 0%, #4F46E5 50%, #818CF8 100%);
+  --xto-gradient-card: linear-gradient(180deg, rgba(17, 24, 39, 0) 0%, rgba(17, 24, 39, 0.8) 100%);
+}

package/src/assets/styles/_transition.scss

@@ -5,7 +5,7 @@
 // 淡入淡出
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity var(--transition-duration);
+  transition: opacity var(--xto-transition-duration-fast, 150ms);
 }
 
 .fade-enter-from,
@@ -16,7 +16,7 @@
 // 淡入淡出 + 缩放
 .fade-scale-enter-active,
 .fade-scale-leave-active {
-  transition: all var(--transition-duration);
+  transition: all var(--xto-transition-duration-fast, 150ms);
 }
 
 .fade-scale-enter-from,
@@ -28,7 +28,7 @@
 // 淡入淡出 + 滑动
 .fade-transform-enter-active,
 .fade-transform-leave-active {
-  transition: all var(--transition-duration-fast);
+  transition: all var(--xto-transition-duration-fast, 150ms);
 }
 
 .fade-transform-enter-from {
@@ -44,7 +44,7 @@
 // 向下滑入
 .slide-down-enter-active,
 .slide-down-leave-active {
-  transition: all var(--transition-duration);
+  transition: all var(--xto-transition-duration-fast, 150ms);
 }
 
 .slide-down-enter-from,
@@ -56,7 +56,7 @@
 // 向上滑入
 .slide-up-enter-active,
 .slide-up-leave-active {
-  transition: all var(--transition-duration);
+  transition: all var(--xto-transition-duration-fast, 150ms);
 }
 
 .slide-up-enter-from,
@@ -68,7 +68,7 @@
 // 向左滑入
 .slide-left-enter-active,
 .slide-left-leave-active {
-  transition: all var(--transition-duration);
+  transition: all var(--xto-transition-duration-fast, 150ms);
 }
 
 .slide-left-enter-from,
@@ -80,7 +80,7 @@
 // 向右滑入
 .slide-right-enter-active,
 .slide-right-leave-active {
-  transition: all var(--transition-duration);
+  transition: all var(--xto-transition-duration-fast, 150ms);
 }
 
 .slide-right-enter-from,
@@ -92,7 +92,7 @@
 // 缩放
 .zoom-enter-active,
 .zoom-leave-active {
-  transition: all var(--transition-duration);
+  transition: all var(--xto-transition-duration-fast, 150ms);
 }
 
 .zoom-enter-from,
@@ -104,7 +104,7 @@
 // 列表动画
 .list-enter-active,
 .list-leave-active {
-  transition: all var(--transition-duration);
+  transition: all var(--xto-transition-duration-fast, 150ms);
 }
 
 .list-enter-from,
@@ -115,5 +115,5 @@
 
 // 侧边栏折叠动画
 .collapse-transition {
-  transition: width var(--transition-duration), padding var(--transition-duration);
+  transition: width var(--xto-transition-duration-fast, 150ms), padding var(--xto-transition-duration-fast, 150ms);
 }

package/src/assets/styles/_variables.scss

@@ -1,39 +1,40 @@
+// Design tokens aligned with @xto/core theme system
 // ==============================================
 // SCSS Variables - 用于样式计算
 // ==============================================
 
-// 主题色 - 科技蓝
-$color-primary: #1677ff;
-$color-primary-light: #4096ff;
-$color-primary-lighter: #91caff;
-$color-primary-dark: #0958d9;
-$color-primary-darker: #003eb3;
+// 主题色 - Indigo
+$color-primary: #4F46E5;
+$color-primary-light: #6366F1;
+$color-primary-lighter: #818CF8;
+$color-primary-dark: #4338CA;
+$color-primary-darker: #3730A3;
 
 // 功能色
-$color-success: #52c41a;
-$color-warning: #faad14;
-$color-danger: #ff4d4f;
-$color-info: #1677ff;
+$color-success: #10B981;
+$color-warning: #F59E0B;
+$color-danger: #EF4444;
+$color-info: #6B7280;
 
 // 文字颜色
-$color-text-primary: #1f1f1f;
-$color-text-regular: #424242;
-$color-text-secondary: #757575;
-$color-text-placeholder: #9e9e9e;
+$color-text-primary: #1F2937;
+$color-text-regular: #4B5563;
+$color-text-secondary: #6B7280;
+$color-text-placeholder: #9CA3AF;
 
 // 边框颜色
-$color-border: #d9d9d9;
-$color-border-light: #e8e8e8;
-$color-border-lighter: #f0f0f0;
+$color-border: #D1D5DB;
+$color-border-light: #E5E7EB;
+$color-border-lighter: #F3F4F6;
 
 // 背景颜色
-$bg-color: #ffffff;
-$bg-color-page: #f0f2f5;
-$bg-color-component: #ffffff;
+$bg-color: #FFFFFF;
+$bg-color-page: #F9FAFB;
+$bg-color-component: #FFFFFF;
 
 // 字体
-$font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-$font-family-code: 'IBM Plex Mono', 'SF Mono', Monaco, Consolas, monospace;
+$font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$font-family-code: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace;
 $font-size-base: 14px;
 $font-size-small: 12px;
 $font-size-large: 16px;
@@ -63,8 +64,8 @@ $footer-height: 32px;
 
 // 过渡
 $transition-duration: 0.2s;
-$transition-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
+$transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
 
 // 阴影
-$box-shadow-card: 0 1px 10px -6px rgba(0, 0, 0, 0.1);
-$box-shadow-card-hover: 0 6px 16px -8px rgba(0, 0, 0, 0.12);
+$box-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05);
+$box-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.1);