xto-fronted 0.7.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "xto-fronted",
3
- "version": "0.7.0",
3
+ "version": "0.8.0",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "description": "XTO 前端应用框架",
@@ -54,14 +54,14 @@
54
54
  "devDependencies": {
55
55
  "@types/node": "^20.11.30",
56
56
  "@vitejs/plugin-vue": "^5.0.4",
57
- "@xto/base": "^1.5.2",
58
- "@xto/business": "^1.3.0",
59
- "@xto/core": "^1.3.0",
60
- "@xto/data": "^1.3.0",
61
- "@xto/feedback": "^1.3.0",
62
- "@xto/form": "^1.5.0",
63
- "@xto/layout": "^1.2.0",
64
- "@xto/navigation": "^1.5.0",
57
+ "@xto/base": "^1.8.0",
58
+ "@xto/business": "^1.6.0",
59
+ "@xto/core": "^1.7.0",
60
+ "@xto/data": "^1.6.0",
61
+ "@xto/feedback": "^1.6.0",
62
+ "@xto/form": "^1.8.0",
63
+ "@xto/layout": "^1.5.0",
64
+ "@xto/navigation": "^1.8.0",
65
65
  "axios": "^1.6.8",
66
66
  "pinia": "^2.1.7",
67
67
  "sass": "^1.72.0",
package/src/App.vue CHANGED
@@ -43,7 +43,7 @@ const appStore = useAppStore()
43
43
 
44
44
  // 选中文本样式
45
45
  ::selection {
46
- background: var(--xto-color-primary-light-5, #93A0FA);
46
+ background: var(--xto-color-primary-light-5, #A7A2F2);
47
47
  color: var(--xto-color-primary-dark-2, #3730A3);
48
48
  }
49
49
  </style>
@@ -71,11 +71,11 @@ html.dark {
71
71
  }
72
72
 
73
73
  &.is-active {
74
- color: var(--xto-color-primary, #2ED3CB) !important;
75
- background-color: rgba(76, 141, 255, 0.12) !important;
74
+ color: var(--xto-color-primary, #818CF8) !important;
75
+ background-color: rgba(129, 140, 248, 0.12) !important;
76
76
 
77
77
  &::before {
78
- background-color: var(--xto-color-primary, #2ED3CB);
78
+ background-color: var(--xto-color-primary, #818CF8);
79
79
  }
80
80
  }
81
81
 
@@ -87,7 +87,7 @@ html.dark {
87
87
 
88
88
  &.is-active {
89
89
  background-color: transparent !important;
90
- border-bottom-color: var(--xto-color-primary, #2ED3CB);
90
+ border-bottom-color: var(--xto-color-primary, #818CF8);
91
91
  }
92
92
  }
93
93
  }
@@ -117,8 +117,8 @@ html.dark {
117
117
  }
118
118
 
119
119
  &.is-active {
120
- color: var(--xto-color-primary, #2ED3CB) !important;
121
- background-color: rgba(76, 141, 255, 0.12) !important;
120
+ color: var(--xto-color-primary, #818CF8) !important;
121
+ background-color: rgba(129, 140, 248, 0.12) !important;
122
122
  }
123
123
  }
124
124
  }
@@ -132,7 +132,7 @@ html.dark {
132
132
  }
133
133
 
134
134
  &.is-active > .x-sub-menu__title {
135
- color: var(--xto-color-primary, #2ED3CB) !important;
135
+ color: var(--xto-color-primary, #818CF8) !important;
136
136
  }
137
137
 
138
138
  // 水平模式下的子菜单
@@ -221,8 +221,8 @@ html.dark {
221
221
  }
222
222
 
223
223
  &__menu-char {
224
- background-color: rgba(76, 141, 255, 0.2);
225
- color: var(--xto-color-primary-light-3, #17C3BB);
224
+ background-color: rgba(129, 140, 248, 0.2);
225
+ color: var(--xto-color-primary-light-3, #6158E7);
226
226
  }
227
227
 
228
228
  &__action {
@@ -230,7 +230,7 @@ html.dark {
230
230
 
231
231
  &:hover {
232
232
  background-color: var(--xto-fill-color, #1A2027);
233
- color: var(--xto-color-primary, #2ED3CB);
233
+ color: var(--xto-color-primary, #818CF8);
234
234
  }
235
235
  }
236
236
 
@@ -282,13 +282,13 @@ html.dark {
282
282
  color: var(--xto-color-text-regular, #D9DCE1);
283
283
 
284
284
  &:hover {
285
- border-color: var(--xto-color-primary, #2ED3CB);
286
- color: var(--xto-color-primary, #2ED3CB);
285
+ border-color: var(--xto-color-primary, #818CF8);
286
+ color: var(--xto-color-primary, #818CF8);
287
287
  }
288
288
  }
289
289
 
290
290
  &.x-button--text {
291
- color: var(--xto-color-primary, #2ED3CB);
291
+ color: var(--xto-color-primary, #818CF8);
292
292
  }
293
293
  }
294
294
 
@@ -307,7 +307,7 @@ html.dark {
307
307
  border-color: var(--xto-border-color-light, #1A2027);
308
308
 
309
309
  &.is-focus {
310
- border-color: var(--xto-color-primary, #2ED3CB);
310
+ border-color: var(--xto-color-primary, #818CF8);
311
311
  }
312
312
 
313
313
  .x-input__inner {
@@ -395,7 +395,7 @@ html.dark {
395
395
  background-color: var(--xto-border-color-light, #1A2027);
396
396
 
397
397
  &.is-checked {
398
- background-color: var(--xto-color-primary, #2ED3CB);
398
+ background-color: var(--xto-color-primary, #818CF8);
399
399
  }
400
400
  }
401
401
 
@@ -409,20 +409,20 @@ html.dark {
409
409
  color: var(--xto-color-text-regular, #D9DCE1);
410
410
 
411
411
  &:hover {
412
- color: var(--xto-color-primary, #2ED3CB);
412
+ color: var(--xto-color-primary, #818CF8);
413
413
  }
414
414
 
415
415
  &.is-active {
416
- background-color: var(--xto-color-primary, #2ED3CB);
417
- border-color: var(--xto-color-primary, #2ED3CB);
418
- color: var(--xto-color-on-primary, #04302D);
416
+ background-color: var(--xto-color-primary, #818CF8);
417
+ border-color: var(--xto-color-primary, #818CF8);
418
+ color: var(--xto-color-on-primary, #FFFFFF);
419
419
  }
420
420
  }
421
421
  }
422
422
 
423
423
  // 登录页面(新版左右分区:品牌区 + 表单区)
424
424
  .login-brand {
425
- background: linear-gradient(135deg, #0E1216 0%, #074442 45%, #0B6B67 100%) !important;
425
+ background: linear-gradient(135deg, #0E1216 0%, #074442 45%, #3730A3 100%) !important;
426
426
  }
427
427
 
428
428
  .login-form-section {
@@ -450,12 +450,12 @@ html.dark {
450
450
 
451
451
  &:hover {
452
452
  background: var(--xto-color-primary-light-8, #074442) !important;
453
- color: var(--xto-color-primary, #2ED3CB) !important;
453
+ color: var(--xto-color-primary, #818CF8) !important;
454
454
  }
455
455
  }
456
456
 
457
457
  .forgot-link {
458
- color: var(--xto-color-primary, #2ED3CB) !important;
458
+ color: var(--xto-color-primary, #818CF8) !important;
459
459
  }
460
460
  }
461
461
 
@@ -469,7 +469,7 @@ html.dark {
469
469
  }
470
470
 
471
471
  .login__title {
472
- color: var(--xto-color-primary, #2ED3CB);
472
+ color: var(--xto-color-primary, #818CF8);
473
473
  }
474
474
 
475
475
  .login__subtitle {
@@ -489,7 +489,7 @@ html.dark {
489
489
  background-color: var(--xto-fill-color, #1A2027);
490
490
 
491
491
  &:hover {
492
- background-color: rgba(76, 141, 255, 0.12);
492
+ background-color: rgba(129, 140, 248, 0.12);
493
493
  }
494
494
 
495
495
  &__title {
@@ -559,12 +559,12 @@ html.dark {
559
559
  background-color: transparent;
560
560
 
561
561
  &:hover {
562
- border-color: var(--xto-color-primary, #2ED3CB);
562
+ border-color: var(--xto-color-primary, #818CF8);
563
563
  }
564
564
 
565
565
  &.is-active {
566
- border-color: var(--xto-color-primary, #2ED3CB);
567
- background-color: rgba(76, 141, 255, 0.12);
566
+ border-color: var(--xto-color-primary, #818CF8);
567
+ background-color: rgba(129, 140, 248, 0.12);
568
568
  }
569
569
 
570
570
  &__label {
@@ -585,7 +585,7 @@ html.dark {
585
585
  border-bottom-color: var(--xto-border-color, #4E5566);
586
586
 
587
587
  &__logo-text {
588
- color: var(--xto-color-primary, #2ED3CB);
588
+ color: var(--xto-color-primary, #818CF8);
589
589
  }
590
590
 
591
591
  &__menu {
@@ -593,8 +593,8 @@ html.dark {
593
593
  }
594
594
 
595
595
  &__menu-char {
596
- color: var(--xto-color-primary-light-3, #17C3BB);
597
- background-color: rgba(76, 141, 255, 0.2);
596
+ color: var(--xto-color-primary-light-3, #6158E7);
597
+ background-color: rgba(129, 140, 248, 0.2);
598
598
  }
599
599
 
600
600
  &__action {
@@ -602,7 +602,7 @@ html.dark {
602
602
 
603
603
  &:hover {
604
604
  background-color: var(--xto-fill-color, #1A2027);
605
- color: var(--xto-color-primary, #2ED3CB);
605
+ color: var(--xto-color-primary, #818CF8);
606
606
  }
607
607
  }
608
608
 
@@ -37,13 +37,13 @@ body {
37
37
  }
38
38
 
39
39
  a {
40
- color: var(--xto-color-primary, #12B6AF);
40
+ color: var(--xto-color-primary, #4F46E5);
41
41
  text-decoration: none;
42
42
  cursor: pointer;
43
43
  transition: color var(--xto-transition-duration-fast, 150ms);
44
44
 
45
45
  &:hover {
46
- color: var(--xto-color-primary-light-3, #7578F3);
46
+ color: var(--xto-color-primary-light-3, #726BEA);
47
47
  }
48
48
  }
49
49
 
@@ -121,6 +121,6 @@ p {
121
121
 
122
122
  // 选中文本样式
123
123
  ::selection {
124
- background-color: var(--xto-color-primary-light-8, #D4D7FE);
125
- color: var(--xto-color-primary, #12B6AF);
124
+ background-color: var(--xto-color-primary-light-8, #DCDAFC);
125
+ color: var(--xto-color-primary, #4F46E5);
126
126
  }
@@ -1,30 +1,32 @@
1
1
  // ==============================================
2
2
  // CSS Variables - XTO UI Design Token System
3
- // Gauss Admin 风格:品牌深蓝 + slate 蓝灰中性色(与 @xto/core 令牌对齐)
3
+ // 企业级靛蓝(Enterprise Indigo #4F46E5)+ 石墨灰中性色
4
+ // 与 @xto/core 1.7.0 主题体系保持一致
4
5
  // ==============================================
5
6
 
6
7
  :root {
7
- // 主色调 - Gauss 品牌深蓝
8
- --xto-color-primary: #12B6AF;
9
- --xto-color-on-primary: #04302D;
10
- --xto-color-primary-light-1: #17C3BB;
11
- --xto-color-primary-light-2: #2ED2CA;
12
- --xto-color-primary-light-3: #51DAD3;
13
- --xto-color-primary-light-4: #7AE1DC;
14
- --xto-color-primary-light-5: #A0E8E4;
15
- --xto-color-primary-light-6: #BCEEEA;
16
- --xto-color-primary-light-7: #CFF3F0;
17
- --xto-color-primary-light-8: #DDF6F4;
18
- --xto-color-primary-light-9: #EAF9F8;
19
- --xto-color-primary-dark-1: #0D7F7A;
20
- --xto-color-primary-dark-2: #0B6B67;
21
- --xto-color-primary-dark-3: #095755;
22
-
23
- // 功能色 - 精致调和
24
- --xto-color-success: #2BC48A;
25
- --xto-color-success-light: #94E6BF;
8
+ // 主色调 - 企业级靛蓝
9
+ --xto-color-primary: #4F46E5;
10
+ --xto-color-on-primary: #FFFFFF;
11
+ --xto-color-primary-light-1: #6158E7;
12
+ --xto-color-primary-light-2: #726BEA;
13
+ --xto-color-primary-light-3: #847DEC;
14
+ --xto-color-primary-light-4: #9590EF;
15
+ --xto-color-primary-light-5: #A7A2F2;
16
+ --xto-color-primary-light-6: #B9B5F5;
17
+ --xto-color-primary-light-7: #CAC7F9;
18
+ --xto-color-primary-light-8: #DCDAFC;
19
+ --xto-color-primary-light-9: #EDEDFC;
20
+ --xto-color-primary-dark-1: #4338CA;
21
+ --xto-color-primary-dark-2: #3730A3;
22
+ --xto-color-primary-dark-3: #312E81;
23
+ --xto-focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.15);
24
+
25
+ // 功能色 - 与 @xto/core 语义色一致
26
+ --xto-color-success: #00A870;
27
+ --xto-color-success-light: #6FDCAA;
26
28
  --xto-color-success-lighter: #EAFBF3;
27
- --xto-color-success-dark: #00A870;
29
+ --xto-color-success-dark: #008556;
28
30
 
29
31
  --xto-color-warning: #FF7D00;
30
32
  --xto-color-warning-light: #FFB36E;
@@ -32,23 +34,23 @@
32
34
  --xto-color-warning-dark: #CC6200;
33
35
 
34
36
  --xto-color-danger: #F53F3F;
35
- --xto-color-danger-light: #FAAFAF;
37
+ --xto-color-danger-light: #F99494;
36
38
  --xto-color-danger-lighter: #FEF2F2;
37
- --xto-color-danger-dark: #F53F3F;
39
+ --xto-color-danger-dark: #D42A2A;
38
40
 
39
41
  --xto-color-info: #86909C;
40
42
  --xto-color-info-light: #A9AEB8;
41
43
  --xto-color-info-lighter: #F2F3F5;
42
44
  --xto-color-info-dark: #4E5566;
43
45
 
44
- // 文字颜色 - slate 蓝灰体系
46
+ // 文字颜色 - 石墨灰体系
45
47
  --xto-color-text-primary: #1F2329;
46
48
  --xto-color-text-regular: #4E5566;
47
49
  --xto-color-text-secondary: #86909C;
48
50
  --xto-color-text-placeholder: #A9AEB8;
49
51
  --xto-color-text-disabled: #D9DCE1;
50
52
 
51
- // 边框颜色 - 蓝灰边框
53
+ // 边框颜色 - 中性灰
52
54
  --xto-border-color: #D9DCE1;
53
55
  --xto-border-color-light: #E5E6EB;
54
56
  --xto-border-color-lighter: #EDEEF1;
@@ -62,28 +64,28 @@
62
64
  --xto-fill-color-blank: #FFFFFF;
63
65
  --xto-fill-color-dark: #E5E6EB;
64
66
 
65
- // 背景颜色 - 页面层级(浅灰蓝页面底)
67
+ // 背景颜色 - 页面层级
66
68
  --xto-bg-color: #FFFFFF;
67
69
  --xto-bg-color-page: #F7F8FA;
68
70
  --xto-bg-color-component: #FFFFFF;
69
71
  --xto-bg-color-overlay: #FFFFFF;
70
- --xto-bg-color-spotlight: #EAF9F8;
71
-
72
- // 盒子阴影 - slate 基调多层柔和阴影
73
- --xto-shadow-subtle: 0 1px 2px rgba(15, 23, 42, 0.04);
74
- --xto-shadow-base: 0 1px 2px rgba(15, 23, 42, 0.04),
75
- 0 2px 8px rgba(15, 23, 42, 0.06);
76
- --xto-shadow-elevated: 0 2px 6px rgba(15, 23, 42, 0.05),
77
- 0 8px 24px rgba(15, 23, 42, 0.08);
78
- --xto-shadow-prominent: 0 4px 12px rgba(15, 23, 42, 0.06),
79
- 0 16px 48px rgba(15, 23, 42, 0.12);
80
- --xto-shadow-card: var(--xto-shadow-base);
81
- --xto-shadow-card-hover: var(--xto-shadow-elevated);
72
+ --xto-bg-color-spotlight: #EDEDFC;
73
+
74
+ // 盒子阴影 - 仅中性色(禁止彩色投影)
75
+ --xto-shadow-subtle: 0 1px 2px rgba(31, 35, 41, 0.06);
76
+ --xto-shadow-base: 0 1px 3px rgba(31, 35, 41, 0.08),
77
+ 0 4px 12px rgba(31, 35, 41, 0.06);
78
+ --xto-shadow-elevated: 0 4px 8px rgba(31, 35, 41, 0.08),
79
+ 0 8px 24px rgba(31, 35, 41, 0.1);
80
+ --xto-shadow-prominent: 0 6px 16px rgba(31, 35, 41, 0.1),
81
+ 0 16px 40px rgba(31, 35, 41, 0.14);
82
+ --xto-shadow-card: var(--xto-shadow-subtle);
83
+ --xto-shadow-card-hover: var(--xto-shadow-base);
82
84
 
83
85
  // 字体 - 企业级字体栈
84
86
  --xto-font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans SC', 'Source Han Sans SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
85
- --xto-font-family-code: 'IBM Plex Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
86
- Consolas, 'Courier New', monospace;
87
+ --xto-font-family-code: 'SF Mono', 'JetBrains Mono', 'Fira Code', Consolas,
88
+ 'Liberation Mono', Menlo, monospace;
87
89
  --xto-font-size-base: 14px;
88
90
  --xto-font-size-small: 12px;
89
91
  --xto-font-size-large: 16px;
@@ -92,13 +94,13 @@
92
94
  --xto-font-size-hero: 38px;
93
95
  --xto-font-line-height: 1.5714285714285714;
94
96
 
95
- // 圆角 - 精致圆润(卡片与弹层更圆润)
97
+ // 圆角 - 4/8/12/16 几何刻度(与 @xto/core 一致)
96
98
  --xto-border-radius-base: 8px;
97
99
  --xto-border-radius-small: 4px;
98
- --xto-border-radius-large: 10px;
100
+ --xto-border-radius-large: 12px;
99
101
  --xto-border-radius-extra-large: 16px;
100
102
  --xto-border-radius-xl: 16px;
101
- --xto-border-radius-round: 24px;
103
+ --xto-border-radius-round: 999px;
102
104
  --xto-border-radius-circle: 50%;
103
105
 
104
106
  // 间距 - 8px 基础网格
@@ -114,12 +116,12 @@
114
116
  --component-size-default: 36px;
115
117
  --component-size-small: 28px;
116
118
 
117
- // 过渡 - 流畅动效
119
+ // 过渡 - 流畅动效(克制,无弹跳)
118
120
  --xto-transition-duration: 0.2s;
119
121
  --xto-transition-duration-fast: 0.1s;
120
122
  --xto-transition-duration-slow: 0.3s;
121
- --xto-transition-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
122
- --xto-transition-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
123
+ --xto-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
124
+ --xto-transition-easing-bounce: cubic-bezier(0.4, 0, 0.2, 1);
123
125
 
124
126
  // z-index - 层级管理
125
127
  --z-index-dropdown: 1000;
@@ -137,53 +139,54 @@
137
139
  --tabs-height: 40px;
138
140
  --footer-height: 32px;
139
141
 
140
- // 特殊效果
141
- --xto-gradient-primary: linear-gradient(135deg, #12B6AF 0%, #2ED2CA 100%);
142
- --xto-gradient-hero: linear-gradient(135deg, #095755 0%, #12B6AF 50%, #2ED2CA 100%);
143
- --xto-gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
144
- --xto-gradient-mask: linear-gradient(180deg, rgba(18, 182, 175, 0.03) 0%, rgba(0, 0, 0, 0) 100%);
142
+ // 特殊效果 - 企业规范:无装饰渐变,一律纯色(保留变量名兼容既有引用)
143
+ --xto-gradient-primary: #4F46E5;
144
+ --xto-gradient-hero: #4F46E5;
145
+ --xto-gradient-card: rgba(255, 255, 255, 0);
146
+ --xto-gradient-mask: rgba(79, 70, 229, 0);
145
147
  }
146
148
 
147
- // 暗色主题 - 深蓝黑科技感(与 @xto/core 暗色令牌对齐)
149
+ // 暗色主题 - 中性石墨黑(与 @xto/core 暗色令牌一致)
148
150
  html.dark {
149
- --xto-color-primary: #2ED3CB;
150
- --xto-color-on-primary: #04302D;
151
- --xto-color-primary-light-1: #2ED2CA;
152
- --xto-color-primary-light-2: #12B6AF;
153
- --xto-color-primary-light-3: #17C3BB;
154
- --xto-color-primary-light-4: #12B6AF;
155
- --xto-color-primary-light-5: #0D7F7A;
156
- --xto-color-primary-light-6: #0B6B67;
157
- --xto-color-primary-light-7: #095755;
158
- --xto-color-primary-light-8: #074442;
159
- --xto-color-primary-light-9: #05302F;
160
- --xto-color-primary-dark-1: #51DAD3;
161
- --xto-color-primary-dark-2: #7AE1DC;
162
- --xto-color-primary-dark-3: #A0E8E4;
163
-
164
- --xto-color-text-primary: #F2F3F5;
165
- --xto-color-text-regular: #D9DCE1;
166
- --xto-color-text-secondary: #A9AEB8;
167
- --xto-color-text-placeholder: #86909C;
168
- --xto-color-text-disabled: #4E5566;
169
-
170
- --xto-border-color: #4E5566;
171
- --xto-border-color-light: #1E242B;
151
+ --xto-color-primary: #818CF8;
152
+ --xto-color-on-primary: #0E1024;
153
+ --xto-color-primary-light-1: #747EDF;
154
+ --xto-color-primary-light-2: #6770C6;
155
+ --xto-color-primary-light-3: #5A62AE;
156
+ --xto-color-primary-light-4: #4D5495;
157
+ --xto-color-primary-light-5: #41467C;
158
+ --xto-color-primary-light-6: #343863;
159
+ --xto-color-primary-light-7: #272A4A;
160
+ --xto-color-primary-light-8: #1A1C32;
161
+ --xto-color-primary-light-9: #0D0E19;
162
+ --xto-color-primary-dark-1: #A5AAF8;
163
+ --xto-color-primary-dark-2: #A5AAF8;
164
+ --xto-color-primary-dark-3: #A5AAF8;
165
+ --xto-focus-ring: 0 0 0 3px rgba(129, 140, 248, 0.2);
166
+
167
+ --xto-color-text-primary: #F0F2F5;
168
+ --xto-color-text-regular: #C9CDD4;
169
+ --xto-color-text-secondary: #86909C;
170
+ --xto-color-text-placeholder: #5F6672;
171
+ --xto-color-text-disabled: #484D56;
172
+
173
+ --xto-border-color: #2A313A;
174
+ --xto-border-color-light: #232A32;
172
175
  --xto-border-color-lighter: #1C232B;
173
- --xto-border-color-extra-light: #1F2329;
174
- --xto-border-color-dark: #4E5566;
176
+ --xto-border-color-extra-light: #171D24;
177
+ --xto-border-color-dark: #3A434E;
175
178
 
176
179
  --xto-fill-color: #1E242B;
177
180
  --xto-fill-color-light: #1C232B;
178
181
  --xto-fill-color-lighter: #1F2329;
179
182
  --xto-fill-color-blank: #161B21;
180
- --xto-fill-color-dark: #4E5566;
183
+ --xto-fill-color-dark: #2A313A;
181
184
 
182
185
  --xto-bg-color: #161B21;
183
186
  --xto-bg-color-page: #0E1216;
184
187
  --xto-bg-color-component: #1E242B;
185
- --xto-bg-color-overlay: #1A2027;
186
- --xto-bg-color-spotlight: #05302F;
188
+ --xto-bg-color-overlay: #1C232B;
189
+ --xto-bg-color-spotlight: #0D0E19;
187
190
 
188
191
  --xto-shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.3);
189
192
  --xto-shadow-base: 0 1px 3px rgba(0, 0, 0, 0.3),
@@ -195,7 +198,8 @@ html.dark {
195
198
  --xto-shadow-card: var(--xto-shadow-base);
196
199
  --xto-shadow-card-hover: var(--xto-shadow-elevated);
197
200
 
198
- --xto-gradient-primary: linear-gradient(135deg, #2ED3CB 0%, #17C3BB 100%);
199
- --xto-gradient-hero: linear-gradient(135deg, #0B6B67 0%, #12B6AF 50%, #2ED3CB 100%);
200
- --xto-gradient-card: linear-gradient(180deg, rgba(22, 27, 33, 0) 0%, rgba(22, 27, 33, 0.8) 100%);
201
+ --xto-gradient-primary: #818CF8;
202
+ --xto-gradient-hero: #818CF8;
203
+ --xto-gradient-card: rgba(22, 27, 33, 0);
204
+ --xto-gradient-mask: rgba(129, 140, 248, 0);
201
205
  }
@@ -4,11 +4,11 @@
4
4
  // ==============================================
5
5
 
6
6
  // 主题色 - Gauss 品牌深蓝
7
- $color-primary: #12B6AF;
8
- $color-primary-light: #2ED2CA;
9
- $color-primary-lighter: #51DAD3;
10
- $color-primary-dark: #0D7F7A;
11
- $color-primary-darker: #0B6B67;
7
+ $color-primary: #4F46E5;
8
+ $color-primary-light: #726BEA;
9
+ $color-primary-lighter: #847DEC;
10
+ $color-primary-dark: #4338CA;
11
+ $color-primary-darker: #3730A3;
12
12
 
13
13
  // 功能色
14
14
  $color-success: #2BC48A;
@@ -117,7 +117,7 @@
117
117
 
118
118
  // 颜色
119
119
  .text-primary {
120
- color: var(--xto-color-primary, #12B6AF);
120
+ color: var(--xto-color-primary, #4F46E5);
121
121
  }
122
122
 
123
123
  .text-success {
@@ -146,7 +146,7 @@
146
146
 
147
147
  // 背景
148
148
  .bg-primary {
149
- background-color: var(--xto-color-primary, #12B6AF);
149
+ background-color: var(--xto-color-primary, #4F46E5);
150
150
  }
151
151
 
152
152
  .bg-success {
@@ -308,8 +308,8 @@
308
308
  }
309
309
 
310
310
  .badge-primary {
311
- background: var(--xto-color-primary-light-6, #BCEEEA);
312
- color: var(--xto-color-primary, #12B6AF);
311
+ background: var(--xto-color-primary-light-6, #B9B5F5);
312
+ color: var(--xto-color-primary, #4F46E5);
313
313
  }
314
314
 
315
315
  .badge-success {
@@ -374,7 +374,7 @@
374
374
  width: 32px;
375
375
  height: 32px;
376
376
  border: 3px solid var(--xto-border-color-lighter, #F2F3F5);
377
- border-top-color: var(--xto-color-primary, #12B6AF);
377
+ border-top-color: var(--xto-color-primary, #4F46E5);
378
378
  border-radius: 50%;
379
379
  animation: spin 0.8s linear infinite;
380
380
  }
@@ -392,22 +392,22 @@
392
392
 
393
393
  // 链接样式
394
394
  .link {
395
- color: var(--xto-color-primary, #12B6AF);
395
+ color: var(--xto-color-primary, #4F46E5);
396
396
  text-decoration: none;
397
397
  transition: color 0.2s ease;
398
398
 
399
399
  &:hover {
400
- color: var(--xto-color-primary-light-1, #17C3BB);
400
+ color: var(--xto-color-primary-light-1, #6158E7);
401
401
  }
402
402
  }
403
403
 
404
404
  .link-underline {
405
- color: var(--xto-color-primary, #12B6AF);
405
+ color: var(--xto-color-primary, #4F46E5);
406
406
  text-decoration: underline;
407
407
  text-underline-offset: 2px;
408
408
 
409
409
  &:hover {
410
- color: var(--xto-color-primary-light-1, #17C3BB);
410
+ color: var(--xto-color-primary-light-1, #6158E7);
411
411
  }
412
412
  }
413
413
 
@@ -417,7 +417,7 @@
417
417
  // ==============================================
418
418
  .x-menu-item {
419
419
  &.is-active {
420
- color: var(--xto-color-primary, #12B6AF) !important;
420
+ color: var(--xto-color-primary, #4F46E5) !important;
421
421
  background-color: var(--xto-color-primary-light-9, #EAF9F8) !important;
422
422
  font-weight: 600;
423
423
  }
@@ -425,7 +425,7 @@
425
425
 
426
426
  // SubMenu 的子菜单项高亮(只有 MenuItem 高亮,SubMenu 本身不高亮)
427
427
  .x-sub-menu__menu .x-menu-item.is-active {
428
- color: var(--xto-color-primary, #12B6AF) !important;
428
+ color: var(--xto-color-primary, #4F46E5) !important;
429
429
  background-color: var(--xto-color-primary-light-9, #EAF9F8) !important;
430
430
  font-weight: 600;
431
431
  }