xto-fronted 0.7.0 → 0.8.1

package/src/assets/styles/_dark.scss

@@ -71,11 +71,11 @@ html.dark {
     }
 
     &.is-active {
-      color: var(--xto-color-primary, #2ED3CB) !important;
-      background-color: rgba(76, 141, 255, 0.12) !important;
+      color: var(--xto-color-primary, #818CF8) !important;
+      background-color: rgba(129, 140, 248, 0.12) !important;
 
       &::before {
-        background-color: var(--xto-color-primary, #2ED3CB);
+        background-color: var(--xto-color-primary, #818CF8);
       }
     }
 
@@ -87,7 +87,7 @@ html.dark {
 
       &.is-active {
         background-color: transparent !important;
-        border-bottom-color: var(--xto-color-primary, #2ED3CB);
+        border-bottom-color: var(--xto-color-primary, #818CF8);
       }
     }
   }
@@ -117,8 +117,8 @@ html.dark {
         }
 
         &.is-active {
-          color: var(--xto-color-primary, #2ED3CB) !important;
-          background-color: rgba(76, 141, 255, 0.12) !important;
+          color: var(--xto-color-primary, #818CF8) !important;
+          background-color: rgba(129, 140, 248, 0.12) !important;
         }
       }
     }
@@ -132,7 +132,7 @@ html.dark {
     }
 
     &.is-active > .x-sub-menu__title {
-      color: var(--xto-color-primary, #2ED3CB) !important;
+      color: var(--xto-color-primary, #818CF8) !important;
     }
 
     // 水平模式下的子菜单
@@ -221,8 +221,8 @@ html.dark {
     }
 
     &__menu-char {
-      background-color: rgba(76, 141, 255, 0.2);
-      color: var(--xto-color-primary-light-3, #17C3BB);
+      background-color: rgba(129, 140, 248, 0.2);
+      color: var(--xto-color-primary-light-3, #6158E7);
     }
 
     &__action {
@@ -230,7 +230,7 @@ html.dark {
 
       &:hover {
         background-color: var(--xto-fill-color, #1A2027);
-        color: var(--xto-color-primary, #2ED3CB);
+        color: var(--xto-color-primary, #818CF8);
       }
     }
 
@@ -282,13 +282,13 @@ html.dark {
       color: var(--xto-color-text-regular, #D9DCE1);
 
       &:hover {
-        border-color: var(--xto-color-primary, #2ED3CB);
-        color: var(--xto-color-primary, #2ED3CB);
+        border-color: var(--xto-color-primary, #818CF8);
+        color: var(--xto-color-primary, #818CF8);
       }
     }
 
     &.x-button--text {
-      color: var(--xto-color-primary, #2ED3CB);
+      color: var(--xto-color-primary, #818CF8);
     }
   }
 
@@ -307,7 +307,7 @@ html.dark {
     border-color: var(--xto-border-color-light, #1A2027);
 
     &.is-focus {
-      border-color: var(--xto-color-primary, #2ED3CB);
+      border-color: var(--xto-color-primary, #818CF8);
     }
 
     .x-input__inner {
@@ -395,7 +395,7 @@ html.dark {
     background-color: var(--xto-border-color-light, #1A2027);
 
     &.is-checked {
-      background-color: var(--xto-color-primary, #2ED3CB);
+      background-color: var(--xto-color-primary, #818CF8);
     }
   }
 
@@ -409,20 +409,20 @@ html.dark {
       color: var(--xto-color-text-regular, #D9DCE1);
 
       &:hover {
-        color: var(--xto-color-primary, #2ED3CB);
+        color: var(--xto-color-primary, #818CF8);
       }
 
       &.is-active {
-        background-color: var(--xto-color-primary, #2ED3CB);
-        border-color: var(--xto-color-primary, #2ED3CB);
-        color: var(--xto-color-on-primary, #04302D);
+        background-color: var(--xto-color-primary, #818CF8);
+        border-color: var(--xto-color-primary, #818CF8);
+        color: var(--xto-color-on-primary, #FFFFFF);
       }
     }
   }
 
   // 登录页面（新版左右分区：品牌区 + 表单区）
   .login-brand {
-    background: linear-gradient(135deg, #0E1216 0%, #074442 45%, #0B6B67 100%) !important;
+    background: linear-gradient(135deg, #0E1216 0%, #074442 45%, #3730A3 100%) !important;
   }
 
   .login-form-section {
@@ -450,12 +450,12 @@ html.dark {
 
       &:hover {
         background: var(--xto-color-primary-light-8, #074442) !important;
-        color: var(--xto-color-primary, #2ED3CB) !important;
+        color: var(--xto-color-primary, #818CF8) !important;
       }
     }
 
     .forgot-link {
-      color: var(--xto-color-primary, #2ED3CB) !important;
+      color: var(--xto-color-primary, #818CF8) !important;
     }
   }
 
@@ -469,7 +469,7 @@ html.dark {
   }
 
   .login__title {
-    color: var(--xto-color-primary, #2ED3CB);
+    color: var(--xto-color-primary, #818CF8);
   }
 
   .login__subtitle {
@@ -489,7 +489,7 @@ html.dark {
     background-color: var(--xto-fill-color, #1A2027);
 
     &:hover {
-      background-color: rgba(76, 141, 255, 0.12);
+      background-color: rgba(129, 140, 248, 0.12);
     }
 
     &__title {
@@ -559,12 +559,12 @@ html.dark {
       background-color: transparent;
 
       &:hover {
-        border-color: var(--xto-color-primary, #2ED3CB);
+        border-color: var(--xto-color-primary, #818CF8);
       }
 
       &.is-active {
-        border-color: var(--xto-color-primary, #2ED3CB);
-        background-color: rgba(76, 141, 255, 0.12);
+        border-color: var(--xto-color-primary, #818CF8);
+        background-color: rgba(129, 140, 248, 0.12);
       }
 
       &__label {
@@ -585,7 +585,7 @@ html.dark {
     border-bottom-color: var(--xto-border-color, #4E5566);
 
     &__logo-text {
-      color: var(--xto-color-primary, #2ED3CB);
+      color: var(--xto-color-primary, #818CF8);
     }
 
     &__menu {
@@ -593,8 +593,8 @@ html.dark {
     }
 
     &__menu-char {
-      color: var(--xto-color-primary-light-3, #17C3BB);
-      background-color: rgba(76, 141, 255, 0.2);
+      color: var(--xto-color-primary-light-3, #6158E7);
+      background-color: rgba(129, 140, 248, 0.2);
     }
 
     &__action {
@@ -602,7 +602,7 @@ html.dark {
 
       &:hover {
         background-color: var(--xto-fill-color, #1A2027);
-        color: var(--xto-color-primary, #2ED3CB);
+        color: var(--xto-color-primary, #818CF8);
       }
     }
 

package/src/assets/styles/_reset.scss

@@ -37,13 +37,13 @@ body {
 }
 
 a {
-  color: var(--xto-color-primary, #12B6AF);
+  color: var(--xto-color-primary, #4F46E5);
   text-decoration: none;
   cursor: pointer;
   transition: color var(--xto-transition-duration-fast, 150ms);
 
   &:hover {
-    color: var(--xto-color-primary-light-3, #7578F3);
+    color: var(--xto-color-primary-light-3, #726BEA);
   }
 }
 
@@ -121,6 +121,6 @@ p {
 
 // 选中文本样式
 ::selection {
-  background-color: var(--xto-color-primary-light-8, #D4D7FE);
-  color: var(--xto-color-primary, #12B6AF);
+  background-color: var(--xto-color-primary-light-8, #DCDAFC);
+  color: var(--xto-color-primary, #4F46E5);
 }

package/src/assets/styles/_root.scss

@@ -1,30 +1,32 @@
 // ==============================================
 // CSS Variables - XTO UI Design Token System
-// Gauss Admin 风格：品牌深蓝 + slate 蓝灰中性色（与 @xto/core 令牌对齐）
+// 企业级靛蓝（Enterprise Indigo #4F46E5）+ 石墨灰中性色
+// 与 @xto/core 1.7.0 主题体系保持一致
 // ==============================================
 
 :root {
-  // 主色调 - Gauss 品牌深蓝
-  --xto-color-primary: #12B6AF;
-  --xto-color-on-primary: #04302D;
-  --xto-color-primary-light-1: #17C3BB;
-  --xto-color-primary-light-2: #2ED2CA;
-  --xto-color-primary-light-3: #51DAD3;
-  --xto-color-primary-light-4: #7AE1DC;
-  --xto-color-primary-light-5: #A0E8E4;
-  --xto-color-primary-light-6: #BCEEEA;
-  --xto-color-primary-light-7: #CFF3F0;
-  --xto-color-primary-light-8: #DDF6F4;
-  --xto-color-primary-light-9: #EAF9F8;
-  --xto-color-primary-dark-1: #0D7F7A;
-  --xto-color-primary-dark-2: #0B6B67;
-  --xto-color-primary-dark-3: #095755;
-
-  // 功能色 - 精致调和
-  --xto-color-success: #2BC48A;
-  --xto-color-success-light: #94E6BF;
+  // 主色调 - 企业级靛蓝
+  --xto-color-primary: #4F46E5;
+  --xto-color-on-primary: #FFFFFF;
+  --xto-color-primary-light-1: #6158E7;
+  --xto-color-primary-light-2: #726BEA;
+  --xto-color-primary-light-3: #847DEC;
+  --xto-color-primary-light-4: #9590EF;
+  --xto-color-primary-light-5: #A7A2F2;
+  --xto-color-primary-light-6: #B9B5F5;
+  --xto-color-primary-light-7: #CAC7F9;
+  --xto-color-primary-light-8: #DCDAFC;
+  --xto-color-primary-light-9: #EDEDFC;
+  --xto-color-primary-dark-1: #4338CA;
+  --xto-color-primary-dark-2: #3730A3;
+  --xto-color-primary-dark-3: #312E81;
+  --xto-focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.15);
+
+  // 功能色 - 与 @xto/core 语义色一致
+  --xto-color-success: #00A870;
+  --xto-color-success-light: #6FDCAA;
   --xto-color-success-lighter: #EAFBF3;
-  --xto-color-success-dark: #00A870;
+  --xto-color-success-dark: #008556;
 
   --xto-color-warning: #FF7D00;
   --xto-color-warning-light: #FFB36E;
@@ -32,23 +34,23 @@
   --xto-color-warning-dark: #CC6200;
 
   --xto-color-danger: #F53F3F;
-  --xto-color-danger-light: #FAAFAF;
+  --xto-color-danger-light: #F99494;
   --xto-color-danger-lighter: #FEF2F2;
-  --xto-color-danger-dark: #F53F3F;
+  --xto-color-danger-dark: #D42A2A;
 
   --xto-color-info: #86909C;
   --xto-color-info-light: #A9AEB8;
   --xto-color-info-lighter: #F2F3F5;
   --xto-color-info-dark: #4E5566;
 
-  // 文字颜色 - slate 蓝灰体系
+  // 文字颜色 - 石墨灰体系
   --xto-color-text-primary: #1F2329;
   --xto-color-text-regular: #4E5566;
   --xto-color-text-secondary: #86909C;
   --xto-color-text-placeholder: #A9AEB8;
   --xto-color-text-disabled: #D9DCE1;
 
-  // 边框颜色 - 蓝灰边框
+  // 边框颜色 - 中性灰
   --xto-border-color: #D9DCE1;
   --xto-border-color-light: #E5E6EB;
   --xto-border-color-lighter: #EDEEF1;
@@ -62,28 +64,28 @@
   --xto-fill-color-blank: #FFFFFF;
   --xto-fill-color-dark: #E5E6EB;
 
-  // 背景颜色 - 页面层级（浅灰蓝页面底）
+  // 背景颜色 - 页面层级
   --xto-bg-color: #FFFFFF;
   --xto-bg-color-page: #F7F8FA;
   --xto-bg-color-component: #FFFFFF;
   --xto-bg-color-overlay: #FFFFFF;
-  --xto-bg-color-spotlight: #EAF9F8;
-
-  // 盒子阴影 - slate 基调多层柔和阴影
-  --xto-shadow-subtle: 0 1px 2px rgba(15, 23, 42, 0.04);
-  --xto-shadow-base: 0 1px 2px rgba(15, 23, 42, 0.04),
-                      0 2px 8px rgba(15, 23, 42, 0.06);
-  --xto-shadow-elevated: 0 2px 6px rgba(15, 23, 42, 0.05),
-                          0 8px 24px rgba(15, 23, 42, 0.08);
-  --xto-shadow-prominent: 0 4px 12px rgba(15, 23, 42, 0.06),
-                           0 16px 48px rgba(15, 23, 42, 0.12);
-  --xto-shadow-card: var(--xto-shadow-base);
-  --xto-shadow-card-hover: var(--xto-shadow-elevated);
+  --xto-bg-color-spotlight: #EDEDFC;
+
+  // 盒子阴影 - 仅中性色（禁止彩色投影）
+  --xto-shadow-subtle: 0 1px 2px rgba(31, 35, 41, 0.06);
+  --xto-shadow-base: 0 1px 3px rgba(31, 35, 41, 0.08),
+                      0 4px 12px rgba(31, 35, 41, 0.06);
+  --xto-shadow-elevated: 0 4px 8px rgba(31, 35, 41, 0.08),
+                          0 8px 24px rgba(31, 35, 41, 0.1);
+  --xto-shadow-prominent: 0 6px 16px rgba(31, 35, 41, 0.1),
+                           0 16px 40px rgba(31, 35, 41, 0.14);
+  --xto-shadow-card: var(--xto-shadow-subtle);
+  --xto-shadow-card-hover: var(--xto-shadow-base);
 
   // 字体 - 企业级字体栈
   --xto-font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans SC', 'Source Han Sans SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  --xto-font-family-code: 'IBM Plex Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
-    Consolas, 'Courier New', monospace;
+  --xto-font-family-code: 'SF Mono', 'JetBrains Mono', 'Fira Code', Consolas,
+    'Liberation Mono', Menlo, monospace;
   --xto-font-size-base: 14px;
   --xto-font-size-small: 12px;
   --xto-font-size-large: 16px;
@@ -92,13 +94,13 @@
   --xto-font-size-hero: 38px;
   --xto-font-line-height: 1.5714285714285714;
 
-  // 圆角 - 精致圆润（卡片与弹层更圆润）
+  // 圆角 - 4/8/12/16 几何刻度（与 @xto/core 一致）
   --xto-border-radius-base: 8px;
   --xto-border-radius-small: 4px;
-  --xto-border-radius-large: 10px;
+  --xto-border-radius-large: 12px;
   --xto-border-radius-extra-large: 16px;
   --xto-border-radius-xl: 16px;
-  --xto-border-radius-round: 24px;
+  --xto-border-radius-round: 999px;
   --xto-border-radius-circle: 50%;
 
   // 间距 - 8px 基础网格
@@ -114,12 +116,12 @@
   --component-size-default: 36px;
   --component-size-small: 28px;
 
-  // 过渡 - 流畅动效
+  // 过渡 - 流畅动效（克制，无弹跳）
   --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);
+  --xto-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --xto-transition-easing-bounce: cubic-bezier(0.4, 0, 0.2, 1);
 
   // z-index - 层级管理
   --z-index-dropdown: 1000;
@@ -137,53 +139,54 @@
   --tabs-height: 40px;
   --footer-height: 32px;
 
-  // 特殊效果
-  --xto-gradient-primary: linear-gradient(135deg, #12B6AF 0%, #2ED2CA 100%);
-  --xto-gradient-hero: linear-gradient(135deg, #095755 0%, #12B6AF 50%, #2ED2CA 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(18, 182, 175, 0.03) 0%, rgba(0, 0, 0, 0) 100%);
+  // 特殊效果 - 企业规范：无装饰渐变，一律纯色（保留变量名兼容既有引用）
+  --xto-gradient-primary: #4F46E5;
+  --xto-gradient-hero: #4F46E5;
+  --xto-gradient-card: rgba(255, 255, 255, 0);
+  --xto-gradient-mask: rgba(79, 70, 229, 0);
 }
 
-// 暗色主题 - 深蓝黑科技感（与 @xto/core 暗色令牌对齐）
+// 暗色主题 - 中性石墨黑（与 @xto/core 暗色令牌一致）
 html.dark {
-  --xto-color-primary: #2ED3CB;
-  --xto-color-on-primary: #04302D;
-  --xto-color-primary-light-1: #2ED2CA;
-  --xto-color-primary-light-2: #12B6AF;
-  --xto-color-primary-light-3: #17C3BB;
-  --xto-color-primary-light-4: #12B6AF;
-  --xto-color-primary-light-5: #0D7F7A;
-  --xto-color-primary-light-6: #0B6B67;
-  --xto-color-primary-light-7: #095755;
-  --xto-color-primary-light-8: #074442;
-  --xto-color-primary-light-9: #05302F;
-  --xto-color-primary-dark-1: #51DAD3;
-  --xto-color-primary-dark-2: #7AE1DC;
-  --xto-color-primary-dark-3: #A0E8E4;
-
-  --xto-color-text-primary: #F2F3F5;
-  --xto-color-text-regular: #D9DCE1;
-  --xto-color-text-secondary: #A9AEB8;
-  --xto-color-text-placeholder: #86909C;
-  --xto-color-text-disabled: #4E5566;
-
-  --xto-border-color: #4E5566;
-  --xto-border-color-light: #1E242B;
+  --xto-color-primary: #818CF8;
+  --xto-color-on-primary: #0E1024;
+  --xto-color-primary-light-1: #747EDF;
+  --xto-color-primary-light-2: #6770C6;
+  --xto-color-primary-light-3: #5A62AE;
+  --xto-color-primary-light-4: #4D5495;
+  --xto-color-primary-light-5: #41467C;
+  --xto-color-primary-light-6: #343863;
+  --xto-color-primary-light-7: #272A4A;
+  --xto-color-primary-light-8: #1A1C32;
+  --xto-color-primary-light-9: #0D0E19;
+  --xto-color-primary-dark-1: #A5AAF8;
+  --xto-color-primary-dark-2: #A5AAF8;
+  --xto-color-primary-dark-3: #A5AAF8;
+  --xto-focus-ring: 0 0 0 3px rgba(129, 140, 248, 0.2);
+
+  --xto-color-text-primary: #F0F2F5;
+  --xto-color-text-regular: #C9CDD4;
+  --xto-color-text-secondary: #86909C;
+  --xto-color-text-placeholder: #5F6672;
+  --xto-color-text-disabled: #484D56;
+
+  --xto-border-color: #2A313A;
+  --xto-border-color-light: #232A32;
   --xto-border-color-lighter: #1C232B;
-  --xto-border-color-extra-light: #1F2329;
-  --xto-border-color-dark: #4E5566;
+  --xto-border-color-extra-light: #171D24;
+  --xto-border-color-dark: #3A434E;
 
   --xto-fill-color: #1E242B;
   --xto-fill-color-light: #1C232B;
   --xto-fill-color-lighter: #1F2329;
   --xto-fill-color-blank: #161B21;
-  --xto-fill-color-dark: #4E5566;
+  --xto-fill-color-dark: #2A313A;
 
   --xto-bg-color: #161B21;
   --xto-bg-color-page: #0E1216;
   --xto-bg-color-component: #1E242B;
-  --xto-bg-color-overlay: #1A2027;
-  --xto-bg-color-spotlight: #05302F;
+  --xto-bg-color-overlay: #1C232B;
+  --xto-bg-color-spotlight: #0D0E19;
 
   --xto-shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.3);
   --xto-shadow-base: 0 1px 3px rgba(0, 0, 0, 0.3),
@@ -195,7 +198,8 @@ html.dark {
   --xto-shadow-card: var(--xto-shadow-base);
   --xto-shadow-card-hover: var(--xto-shadow-elevated);
 
-  --xto-gradient-primary: linear-gradient(135deg, #2ED3CB 0%, #17C3BB 100%);
-  --xto-gradient-hero: linear-gradient(135deg, #0B6B67 0%, #12B6AF 50%, #2ED3CB 100%);
-  --xto-gradient-card: linear-gradient(180deg, rgba(22, 27, 33, 0) 0%, rgba(22, 27, 33, 0.8) 100%);
+  --xto-gradient-primary: #818CF8;
+  --xto-gradient-hero: #818CF8;
+  --xto-gradient-card: rgba(22, 27, 33, 0);
+  --xto-gradient-mask: rgba(129, 140, 248, 0);
 }

package/src/assets/styles/_variables.scss

@@ -4,11 +4,11 @@
 // ==============================================
 
 // 主题色 - Gauss 品牌深蓝
-$color-primary: #12B6AF;
-$color-primary-light: #2ED2CA;
-$color-primary-lighter: #51DAD3;
-$color-primary-dark: #0D7F7A;
-$color-primary-darker: #0B6B67;
+$color-primary: #4F46E5;
+$color-primary-light: #726BEA;
+$color-primary-lighter: #847DEC;
+$color-primary-dark: #4338CA;
+$color-primary-darker: #3730A3;
 
 // 功能色
 $color-success: #2BC48A;

package/src/assets/styles/index.scss

@@ -117,7 +117,7 @@
 
 // 颜色
 .text-primary {
-  color: var(--xto-color-primary, #12B6AF);
+  color: var(--xto-color-primary, #4F46E5);
 }
 
 .text-success {
@@ -146,7 +146,7 @@
 
 // 背景
 .bg-primary {
-  background-color: var(--xto-color-primary, #12B6AF);
+  background-color: var(--xto-color-primary, #4F46E5);
 }
 
 .bg-success {
@@ -308,8 +308,8 @@
 }
 
 .badge-primary {
-  background: var(--xto-color-primary-light-6, #BCEEEA);
-  color: var(--xto-color-primary, #12B6AF);
+  background: var(--xto-color-primary-light-6, #B9B5F5);
+  color: var(--xto-color-primary, #4F46E5);
 }
 
 .badge-success {
@@ -374,7 +374,7 @@
     width: 32px;
     height: 32px;
     border: 3px solid var(--xto-border-color-lighter, #F2F3F5);
-    border-top-color: var(--xto-color-primary, #12B6AF);
+    border-top-color: var(--xto-color-primary, #4F46E5);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
   }
@@ -392,22 +392,22 @@
 
 // 链接样式
 .link {
-  color: var(--xto-color-primary, #12B6AF);
+  color: var(--xto-color-primary, #4F46E5);
   text-decoration: none;
   transition: color 0.2s ease;
 
   &:hover {
-    color: var(--xto-color-primary-light-1, #17C3BB);
+    color: var(--xto-color-primary-light-1, #6158E7);
   }
 }
 
 .link-underline {
-  color: var(--xto-color-primary, #12B6AF);
+  color: var(--xto-color-primary, #4F46E5);
   text-decoration: underline;
   text-underline-offset: 2px;
 
   &:hover {
-    color: var(--xto-color-primary-light-1, #17C3BB);
+    color: var(--xto-color-primary-light-1, #6158E7);
   }
 }
 
@@ -417,7 +417,7 @@
 // ==============================================
 .x-menu-item {
   &.is-active {
-    color: var(--xto-color-primary, #12B6AF) !important;
+    color: var(--xto-color-primary, #4F46E5) !important;
     background-color: var(--xto-color-primary-light-9, #EAF9F8) !important;
     font-weight: 600;
   }
@@ -425,7 +425,7 @@
 
 // SubMenu 的子菜单项高亮（只有 MenuItem 高亮，SubMenu 本身不高亮）
 .x-sub-menu__menu .x-menu-item.is-active {
-  color: var(--xto-color-primary, #12B6AF) !important;
+  color: var(--xto-color-primary, #4F46E5) !important;
   background-color: var(--xto-color-primary-light-9, #EAF9F8) !important;
   font-weight: 600;
 }