xt-element-ui 1.1.0 → 1.1.2

package/src/styles/css-variables.scss

@@ -1,168 +1,258 @@
 @import './theme/index.scss';
 
 :root {
-  // 主色调系列
-  --xt-color-primary: #{$xt-color-primary};
-  --xt-color-success: #{$xt-color-success};
-  --xt-color-warning: #{$xt-color-warning};
-  --xt-color-danger: #{$xt-color-danger};
-  --xt-color-info: #{$xt-color-info};
-
-  // 主色调浅色系列
-  --xt-color-primary-light-3: #{$xt-color-primary-light-3};
-  --xt-color-primary-light-5: #{$xt-color-primary-light-5};
-  --xt-color-primary-light-7: #{$xt-color-primary-light-7};
-  --xt-color-primary-light-8: #{$xt-color-primary-light-8};
-  --xt-color-primary-light-9: #{$xt-color-primary-light-9};
+  // ============================
+  // 基础变量（参考 Element Plus）
+  // ============================
+  color-scheme: light;
+  
+  // 基础颜色
+  --xt-color-white: #ffffff;
+  --xt-color-black: #000000;
+  
+  // RGB 值
+  --xt-color-primary-rgb: 24, 144, 255;
+  --xt-color-success-rgb: 103, 194, 58;
+  --xt-color-warning-rgb: 230, 162, 60;
+  --xt-color-danger-rgb: 245, 108, 108;
+  --xt-color-info-rgb: 144, 147, 153;
+  
+  // 主色调系列 (#1890ff)
+  --xt-color-primary: #1890ff;
+  --xt-color-success: #67c23a;
+  --xt-color-warning: #e6a23c;
+  --xt-color-danger: #f56c6c;
+  --xt-color-error: #f56c6c;
+  --xt-color-info: #909399;
 
-  // 文字颜色
-  --xt-color-text-primary: #{$xt-color-text-primary};
-  --xt-color-text-regular: #{$xt-color-text-regular};
-  --xt-color-text-secondary: #{$xt-color-text-secondary};
-  --xt-color-text-placeholder: #{$xt-color-text-placeholder};
-  --xt-color-text-disabled: #{$xt-color-text-disabled};
+  // Primary 渐变色系 (#1890ff)
+  --xt-color-primary-light-3: rgb(93, 177, 255);
+  --xt-color-primary-light-5: rgb(140, 200, 255);
+  --xt-color-primary-light-7: rgb(186, 222, 255);
+  --xt-color-primary-light-8: rgb(209, 233, 255);
+  --xt-color-primary-light-9: rgb(232, 244, 255);
+  --xt-color-primary-dark-2: rgb(19, 115, 204);
+
+  // Success 渐变色系
+  --xt-color-success-light-3: rgb(149, 212, 117);
+  --xt-color-success-light-5: rgb(179, 225, 157);
+  --xt-color-success-light-7: rgb(209, 237, 196);
+  --xt-color-success-light-8: rgb(225, 243, 216);
+  --xt-color-success-light-9: rgb(240, 249, 235);
+  --xt-color-success-dark-2: rgb(82, 155, 46);
+
+  // Warning 渐变色系
+  --xt-color-warning-light-3: rgb(238, 190, 119);
+  --xt-color-warning-light-5: rgb(243, 209, 158);
+  --xt-color-warning-light-7: rgb(248, 227, 197);
+  --xt-color-warning-light-8: rgb(250, 236, 216);
+  --xt-color-warning-light-9: rgb(253, 246, 236);
+  --xt-color-warning-dark-2: rgb(184, 130, 48);
+
+  // Danger 渐变色系
+  --xt-color-danger-light-3: rgb(248, 152, 152);
+  --xt-color-danger-light-5: rgb(250, 182, 182);
+  --xt-color-danger-light-7: rgb(252, 211, 211);
+  --xt-color-danger-light-8: rgb(253, 226, 226);
+  --xt-color-danger-light-9: rgb(254, 240, 240);
+  --xt-color-danger-dark-2: rgb(196, 86, 86);
+
+  // Error 渐变色系
+  --xt-color-error-light-3: rgb(248, 152, 152);
+  --xt-color-error-light-5: rgb(250, 182, 182);
+  --xt-color-error-light-7: rgb(252, 211, 211);
+  --xt-color-error-light-8: rgb(253, 226, 226);
+  --xt-color-error-light-9: rgb(254, 240, 240);
+  --xt-color-error-dark-2: rgb(196, 86, 86);
+
+  // Info 渐变色系
+  --xt-color-info-light-3: rgb(177, 179, 184);
+  --xt-color-info-light-5: rgb(200, 201, 204);
+  --xt-color-info-light-7: rgb(222, 223, 224);
+  --xt-color-info-light-8: rgb(233, 233, 235);
+  --xt-color-info-light-9: rgb(244, 244, 245);
+  --xt-color-info-dark-2: rgb(115, 118, 122);
 
   // 背景颜色
-  --xt-color-bg-primary: #{$xt-color-bg-primary};
-  --xt-color-bg-secondary: #{$xt-color-bg-secondary};
-  --xt-color-bg-hover: #{$xt-color-bg-hover};
-  --xt-color-bg-container: #{$xt-color-bg-container};
-  --xt-color-bg-overlay: #{$xt-color-bg-overlay};
+  --xt-bg-color: #ffffff;
+  --xt-bg-color-page: #f2f3f5;
+  --xt-bg-color-overlay: #ffffff;
+
+  // 文字颜色
+  --xt-text-color-primary: #303133;
+  --xt-text-color-regular: #606266;
+  --xt-text-color-secondary: #909399;
+  --xt-text-color-placeholder: #a8abb2;
+  --xt-text-color-disabled: #c0c4cc;
 
   // 边框颜色
-  --xt-color-border: #{$xt-color-border};
-  --xt-color-border-light: #{$xt-color-border-light};
-  --xt-color-border-lighter: #{$xt-color-border-lighter};
-  --xt-color-border-extra-light: #{$xt-color-border-extra-light};
+  --xt-border-color: #dcdfe6;
+  --xt-border-color-light: #e4e7ed;
+  --xt-border-color-lighter: #ebeef5;
+  --xt-border-color-extra-light: #f2f6fc;
+  --xt-border-color-dark: #d4d7de;
+  --xt-border-color-darker: #cdd0d6;
+
+  // 填充颜色
+  --xt-fill-color: #f0f2f5;
+  --xt-fill-color-light: #f5f7fa;
+  --xt-fill-color-lighter: #fafafa;
+  --xt-fill-color-extra-light: #fafcff;
+  --xt-fill-color-dark: #ebedf0;
+  --xt-fill-color-darker: #e6e8eb;
+  --xt-fill-color-blank: #ffffff;
+
+  // 阴影
+  --xt-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);
+  --xt-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, .12);
+  --xt-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .12);
+  --xt-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16);
+
+  // 禁用状态颜色
+  --xt-disabled-bg-color: var(--xt-fill-color-light);
+  --xt-disabled-text-color: var(--xt-text-color-placeholder);
+  --xt-disabled-border-color: var(--xt-border-color-light);
+
+  // 遮罩颜色
+  --xt-overlay-color: rgba(0, 0, 0, .8);
+  --xt-overlay-color-light: rgba(0, 0, 0, .7);
+  --xt-overlay-color-lighter: rgba(0, 0, 0, .5);
+  --xt-mask-color: rgba(255, 255, 255, .9);
+  --xt-mask-color-extra-light: rgba(255, 255, 255, .3);
+
+  // 边框
+  --xt-border-width: 1px;
+  --xt-border-style: solid;
+  --xt-border-color-hover: var(--xt-text-color-disabled);
+  --xt-border: var(--xt-border-width) var(--xt-border-style) var(--xt-border-color);
+
+  // SVG 灰度
+  --xt-svg-monochrome-grey: var(--xt-border-color);
 
   // 字体大小
-  --xt-font-size-extra-large: #{$xt-font-size-extra-large};
-  --xt-font-size-large: #{$xt-font-size-large};
-  --xt-font-size-medium: #{$xt-font-size-medium};
-  --xt-font-size-base: #{$xt-font-size-base};
-  --xt-font-size-small: #{$xt-font-size-small};
-  --xt-font-size-extra-small: #{$xt-font-size-extra-small};
+  --xt-font-size-extra-large: 20px;
+  --xt-font-size-large: 18px;
+  --xt-font-size-medium: 16px;
+  --xt-font-size-base: 14px;
+  --xt-font-size-small: 13px;
+  --xt-font-size-extra-small: 12px;
 
-  // 间距
-  --xt-spacing-xs: #{$xt-spacing-xs};
-  --xt-spacing-sm: #{$xt-spacing-sm};
-  --xt-spacing-md: #{$xt-spacing-md};
-  --xt-spacing-lg: #{$xt-spacing-lg};
-  --xt-spacing-xl: #{$xt-spacing-xl};
+  // 字体
+  --xt-font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  --xt-font-weight-primary: 500;
+  --xt-font-line-height-primary: 24px;
 
-  // 圆角
-  --xt-border-radius-base: #{$xt-border-radius-base};
-  --xt-border-radius-small: #{$xt-border-radius-small};
-  --xt-border-radius-round: #{$xt-border-radius-round};
-  --xt-border-radius-circle: #{$xt-border-radius-circle};
+  // 层级
+  --xt-index-normal: 1;
+  --xt-index-top: 1000;
+  --xt-index-popper: 2000;
 
-  // 阴影
-  --xt-shadow-sm: #{$xt-shadow-sm};
-  --xt-shadow-md: #{$xt-shadow-md};
-  --xt-shadow-lg: #{$xt-shadow-lg};
+  // 圆角
+  --xt-border-radius-base: 4px;
+  --xt-border-radius-small: 2px;
+  --xt-border-radius-round: 20px;
+  --xt-border-radius-circle: 100%;
 
   // 过渡动画
-  --xt-transition-duration: #{$xt-transition-duration};
-  --xt-transition-duration-fast: #{$xt-transition-duration-fast};
-
-  // 按钮专用变量
-  --xt-button-height: #{$xt-button-height};
-  --xt-button-padding-x: #{$xt-button-padding-x};
-  --xt-button-padding-y: #{$xt-button-padding-y};
-  --xt-button-font-weight: #{$xt-button-font-weight};
-  --xt-button-border-width: #{$xt-button-border-width};
-  --xt-button-transition: #{$xt-button-transition};
-
-  // 卡片专用变量
-  --xt-card-bg-color: #{$xt-card-bg-color};
-  --xt-card-border-color: #{$xt-card-border-color};
-  --xt-card-border-radius: #{$xt-card-border-radius};
-  --xt-card-padding: #{$xt-card-padding};
-  --xt-card-header-padding: #{$xt-card-header-padding};
-  --xt-card-shadow: #{$xt-card-shadow};
-
-  // 卡片项专用变量
-  --xt-card-item-min-height: #{$xt-card-item-min-height};
-  --xt-card-item-gap: #{$xt-card-item-gap};
-  --xt-card-item-border-width: #{$xt-card-item-border-width};
-
-  // 输入框专用变量
-  --xt-input-height: #{$xt-input-height};
-  --xt-input-padding-x: #{$xt-input-padding-x};
-  --xt-input-bg-color: #{$xt-input-bg-color};
-  --xt-input-border-color: #{$xt-input-border-color};
-  --xt-input-text-color: #{$xt-input-text-color};
-  --xt-input-placeholder-color: #{$xt-input-placeholder-color};
-
-  // FlexBox 专用变量
-  --xt-flex-box-gap: #{$xt-flex-box-gap};
-}
+  --xt-transition-duration: .3s;
+  --xt-transition-duration-fast: .2s;
+  --xt-transition-function-ease-in-out-bezier: cubic-bezier(.645, .045, .355, 1);
+  --xt-transition-function-fast-bezier: cubic-bezier(.23, 1, .32, 1);
+  --xt-transition-all: all var(--xt-transition-duration) var(--xt-transition-function-ease-in-out-bezier);
+  --xt-transition-fade: opacity var(--xt-transition-duration) var(--xt-transition-function-fast-bezier);
+  --xt-transition-md-fade: transform var(--xt-transition-duration) var(--xt-transition-function-fast-bezier), opacity var(--xt-transition-duration) var(--xt-transition-function-fast-bezier);
+  --xt-transition-fade-linear: opacity var(--xt-transition-duration-fast) linear;
+  --xt-transition-border: border-color var(--xt-transition-duration-fast) var(--xt-transition-function-ease-in-out-bezier);
+  --xt-transition-box-shadow: box-shadow var(--xt-transition-duration-fast) var(--xt-transition-function-ease-in-out-bezier);
+  --xt-transition-color: color var(--xt-transition-duration-fast) var(--xt-transition-function-ease-in-out-bezier);
 
-// 暗色主题
-html[data-theme="dark"] {
-  --xt-color-primary: var(--xt-color-primary);
-  --xt-color-success: #{$xt-dark-color-success};
-  --xt-color-warning: #{$xt-dark-color-warning};
-  --xt-color-danger: #{$xt-dark-color-danger};
-  --xt-color-info: #{$xt-dark-color-info};
-
-  --xt-color-text-primary: #{$xt-dark-color-text-primary};
-  --xt-color-text-regular: #{$xt-dark-color-text-regular};
-  --xt-color-text-secondary: #{$xt-dark-color-text-secondary};
-  --xt-color-text-placeholder: #{$xt-dark-color-text-placeholder};
-  --xt-color-text-disabled: #{$xt-dark-color-text-disabled};
-
-  --xt-color-bg-primary: #{$xt-dark-color-bg-primary};
-  --xt-color-bg-secondary: #{$xt-dark-color-bg-secondary};
-  --xt-color-bg-hover: #{$xt-dark-color-bg-hover};
-  --xt-color-bg-container: #{$xt-dark-color-bg-container};
-  --xt-color-bg-overlay: #{$xt-dark-color-bg-overlay};
-
-  --xt-color-border: #{$xt-dark-color-border};
-  --xt-color-border-light: #{$xt-dark-color-border-light};
-  --xt-color-border-lighter: #{$xt-dark-color-border-lighter};
-  --xt-color-border-extra-light: #{$xt-dark-color-border-extra-light};
-
-  // 暗色主题下的组件变量
-  --xt-card-bg-color: #{$xt-dark-color-bg-primary};
-  --xt-card-border-color: #{$xt-dark-color-border};
-  --xt-input-bg-color: #{$xt-dark-color-bg-secondary};
-  --xt-input-border-color: #{$xt-dark-color-border};
-  --xt-input-text-color: #{$xt-dark-color-text-primary};
-  --xt-input-placeholder-color: #{$xt-dark-color-text-placeholder};
-
-  // 暗色主题按钮颜色变量
-  --xt-dark-button-primary-bg: #{$xt-dark-button-primary-bg};
-  --xt-dark-button-success-bg: #{$xt-dark-button-success-bg};
-  --xt-dark-button-warning-bg: #{$xt-dark-button-warning-bg};
-  --xt-dark-button-danger-bg: #{$xt-dark-button-danger-bg};
-  --xt-dark-button-info-bg: #{$xt-dark-button-info-bg};
-}
+  // 组件尺寸
+  --xt-component-size-large: 40px;
+  --xt-component-size: 32px;
+  --xt-component-size-small: 24px;
 
-// 字体大小主题（基于增量）
-[data-size="small"] {
-  --xt-font-size-extra-large: #{$xt-font-size-extra-large + $xt-font-size-increment-small};
-  --xt-font-size-large: #{$xt-font-size-large + $xt-font-size-increment-small};
-  --xt-font-size-medium: #{$xt-font-size-medium + $xt-font-size-increment-small};
-  --xt-font-size-base: #{$xt-font-size-base + $xt-font-size-increment-small};
-  --xt-font-size-small: #{$xt-font-size-small + $xt-font-size-increment-small};
-  --xt-font-size-extra-small: #{$xt-font-size-extra-small + $xt-font-size-increment-small};
+  // 间距
+  --xt-spacing-xs: 8px;
+  --xt-spacing-sm: 12px;
+  --xt-spacing-md: 16px;
+  --xt-spacing-lg: 24px;
+  --xt-spacing-xl: 32px;
 }
 
-[data-size="medium"] {
-  --xt-font-size-extra-large: #{$xt-font-size-extra-large + $xt-font-size-increment-medium};
-  --xt-font-size-large: #{$xt-font-size-large + $xt-font-size-increment-medium};
-  --xt-font-size-medium: #{$xt-font-size-medium + $xt-font-size-increment-medium};
-  --xt-font-size-base: #{$xt-font-size-base + $xt-font-size-increment-medium};
-  --xt-font-size-small: #{$xt-font-size-small + $xt-font-size-increment-medium};
-  --xt-font-size-extra-small: #{$xt-font-size-extra-small + $xt-font-size-increment-medium};
+// ============================
+// 暗色主题（参考 Element Plus）
+// ============================
+:root[data-theme="dark"],
+html[data-theme="dark"],
+[data-theme="dark"] {
+    color-scheme: dark;
+    --xt-color-primary: #409eff;
+    --xt-color-primary-light-3: rgb(51, 117, 185);
+    --xt-color-primary-light-5: rgb(42, 89, 138);
+    --xt-color-primary-light-7: rgb(33, 61, 91);
+    --xt-color-primary-light-8: rgb(29, 48, 67);
+    --xt-color-primary-light-9: rgb(24, 34, 43);
+    --xt-color-primary-dark-2: rgb(102, 177, 255);
+    --xt-color-success: #67c23a;
+    --xt-color-success-light-3: rgb(78, 142, 47);
+    --xt-color-success-light-5: rgb(62, 107, 39);
+    --xt-color-success-light-7: rgb(45, 72, 31);
+    --xt-color-success-light-8: rgb(37, 55, 28);
+    --xt-color-success-light-9: rgb(28, 37, 24);
+    --xt-color-success-dark-2: rgb(133, 206, 97);
+    --xt-color-warning: #e6a23c;
+    --xt-color-warning-light-3: rgb(167, 119, 48);
+    --xt-color-warning-light-5: rgb(125, 91, 40);
+    --xt-color-warning-light-7: rgb(83, 63, 32);
+    --xt-color-warning-light-8: rgb(62, 48, 28);
+    --xt-color-warning-light-9: rgb(41, 34, 24);
+    --xt-color-warning-dark-2: rgb(235, 181, 99);
+    --xt-color-danger: #f56c6c;
+    --xt-color-danger-light-3: rgb(178, 82, 82);
+    --xt-color-danger-light-5: rgb(133, 64, 64);
+    --xt-color-danger-light-7: rgb(88, 46, 46);
+    --xt-color-danger-light-8: rgb(65, 38, 38);
+    --xt-color-danger-light-9: rgb(42, 29, 29);
+    --xt-color-danger-dark-2: rgb(247, 137, 137);
+    --xt-color-error: #f56c6c;
+    --xt-color-error-light-3: rgb(178, 82, 82);
+    --xt-color-error-light-5: rgb(133, 64, 64);
+    --xt-color-error-light-7: rgb(88, 46, 46);
+    --xt-color-error-light-8: rgb(65, 38, 38);
+    --xt-color-error-light-9: rgb(42, 29, 29);
+    --xt-color-error-dark-2: rgb(247, 137, 137);
+    --xt-color-info: #909399;
+    --xt-color-info-light-3: rgb(107, 109, 113);
+    --xt-color-info-light-5: rgb(82, 84, 87);
+    --xt-color-info-light-7: rgb(57, 58, 60);
+    --xt-color-info-light-8: rgb(45, 45, 47);
+    --xt-color-info-light-9: rgb(32, 33, 33);
+    --xt-color-info-dark-2: rgb(166, 169, 173);
+    --xt-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .36), 0px 8px 20px rgba(0, 0, 0, .72);
+    --xt-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, .72);
+    --xt-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .72);
+    --xt-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, .72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;
+    --xt-bg-color-page: #0a0a0a;
+    --xt-bg-color: #141414;
+    --xt-bg-color-overlay: #1d1e1f;
+    --xt-text-color-primary: #E5EAF3;
+    --xt-text-color-regular: #CFD3DC;
+    --xt-text-color-secondary: #A3A6AD;
+    --xt-text-color-placeholder: #8D9095;
+    --xt-text-color-disabled: #6C6E72;
+    --xt-border-color-darker: #636466;
+    --xt-border-color-dark: #58585B;
+    --xt-border-color: #4C4D4F;
+    --xt-border-color-light: #414243;
+    --xt-border-color-lighter: #363637;
+    --xt-border-color-extra-light: #2B2B2C;
+    --xt-fill-color-darker: #424243;
+    --xt-fill-color-dark: #39393A;
+    --xt-fill-color: #303030;
+    --xt-fill-color-light: #262727;
+    --xt-fill-color-lighter: #1D1D1D;
+    --xt-fill-color-extra-light: #191919;
+    --xt-fill-color-blank: #141414;
+    --xt-mask-color: rgba(0, 0, 0, .8);
+    --xt-mask-color-extra-light: rgba(0, 0, 0, .3)
 }
-
-[data-size="large"] {
-  --xt-font-size-extra-large: #{$xt-font-size-extra-large + $xt-font-size-increment-large};
-  --xt-font-size-large: #{$xt-font-size-large + $xt-font-size-increment-large};
-  --xt-font-size-medium: #{$xt-font-size-medium + $xt-font-size-increment-large};
-  --xt-font-size-base: #{$xt-font-size-base + $xt-font-size-increment-large};
-  --xt-font-size-small: #{$xt-font-size-small + $xt-font-size-increment-large};
-  --xt-font-size-extra-small: #{$xt-font-size-extra-small + $xt-font-size-increment-large};
-}

package/src/styles/theme/background.scss

@@ -1,6 +1,6 @@
 $xt-color-bg-primary: #ffffff;               // 主背景色 - 白色
 $xt-color-bg-secondary: #f5f7fa;            // 次要背景色 - 浅灰
 $xt-color-bg-hover: #f5f5f5;                 // 悬停背景色
-$xt-color-bg-container: #f5f7fa;             // 容器背景色
+$xt-color-bg-container: #f0f0f2;             // 容器背景色
 $xt-color-bg-main: #ffffff;                  // 主内容区域背景色
 $xt-color-bg-overlay: #ffffff;               // 浮层背景色

package/src/styles/theme/colors.scss

@@ -8,4 +8,93 @@ $xt-color-primary-light-3: #5DB1FF;   // 主色浅色 30%
 $xt-color-primary-light-5: #8CC8FF;   // 主色浅色 50%
 $xt-color-primary-light-7: #BADEFF;   // 主色浅色 70%
 $xt-color-primary-light-8: #D1E9FF;   // 主色浅色 80%
-$xt-color-primary-light-9: #E8F4FF;   // 主色浅色 90%
+$xt-color-primary-light-9: #E8F4FF;   // 主色浅色 90%
+
+// 主色调深色系列（与 config-provider darkenColor 算法保持一致）
+$xt-color-primary-dark-2: #1373cc;    // 主色深色 20%
+$xt-color-primary-dark-3: #1165b3;    // 主色深色 30%
+$xt-color-primary-dark-4: #0e5699;    // 主色深色 40%
+
+// ============================
+// Success 成功色渐变色系
+// ============================
+$xt-color-success-light-3: #5dd3b0;   // 成功色浅色 30%
+$xt-color-success-light-5: #8be9d0;   // 成功色浅色 50%
+$xt-color-success-light-7: #b8f0e0;   // 成功色浅色 70%
+$xt-color-success-light-8: #d1f5ec;   // 成功色浅色 80%
+$xt-color-success-light-9: #e8faf5;   // 成功色浅色 90%
+$xt-color-success-dark-2: #2da88a;    // 成功色深色 20%
+
+// ============================
+// Warning 警告色渐变色系
+// ============================
+$xt-color-warning-light-3: #f5c976;   // 警告色浅色 30%
+$xt-color-warning-light-5: #f9d8a3;   // 警告色浅色 50%
+$xt-color-warning-light-7: #fce7cf;   // 警告色浅色 70%
+$xt-color-warning-light-8: #fdf2e7;   // 警告色浅色 80%
+$xt-color-warning-light-9: #fff8f0;   // 警告色浅色 90%
+$xt-color-warning-dark-2: #e5a033;    // 警告色深色 20%
+
+// ============================
+// Danger 危险色渐变色系
+// ============================
+$xt-color-danger-light-3: #f04a5e;    // 危险色浅色 30%
+$xt-color-danger-light-5: #f57786;    // 危险色浅色 50%
+$xt-color-danger-light-7: #f9a4ad;    // 危险色浅色 70%
+$xt-color-danger-light-8: #fbc8cd;    // 危险色浅色 80%
+$xt-color-danger-light-9: #fee8ea;    // 危险色浅色 90%
+$xt-color-danger-dark-2: #d4162c;     // 危险色深色 20%
+
+// ============================
+// Info 信息色渐变色系
+// ============================
+$xt-color-info-light-3: #a4a6aa;      // 信息色浅色 30%
+$xt-color-info-light-5: #babbbc;      // 信息色浅色 50%
+$xt-color-info-light-7: #d0d1d3;      // 信息色浅色 70%
+$xt-color-info-light-8: #e0e1e2;      // 信息色浅色 80%
+$xt-color-info-light-9: #f0f0f0;      // 信息色浅色 90%
+$xt-color-info-dark-2: #7a7c80;       // 信息色深色 20%
+
+// ============================
+// 暗色主题渐变色系（参考 Element Plus）
+// ============================
+
+// Primary 暗色主题渐变色系
+$xt-dark-color-primary-light-3: #336eb9;   // 主色暗色 30%
+$xt-dark-color-primary-light-5: #2a598a;   // 主色暗色 50%
+$xt-dark-color-primary-light-7: #213d5b;   // 主色暗色 70%
+$xt-dark-color-primary-light-8: #1d3043;   // 主色暗色 80%
+$xt-dark-color-primary-light-9: #18222b;   // 主色暗色 90%
+$xt-dark-color-primary-dark-2: #66b1ff;    // 主色亮色 20%
+
+// Success 暗色主题渐变色系
+$xt-dark-color-success-light-3: #4e8e2f;   // 成功色暗色 30%
+$xt-dark-color-success-light-5: #3e6b27;   // 成功色暗色 50%
+$xt-dark-color-success-light-7: #2d481f;   // 成功色暗色 70%
+$xt-dark-color-success-light-8: #25371c;   // 成功色暗色 80%
+$xt-dark-color-success-light-9: #1c2518;   // 成功色暗色 90%
+$xt-dark-color-success-dark-2: #85ce61;    // 成功色亮色 20%
+
+// Warning 暗色主题渐变色系
+$xt-dark-color-warning-light-3: #a77730;   // 警告色暗色 30%
+$xt-dark-color-warning-light-5: #7d5b28;   // 警告色暗色 50%
+$xt-dark-color-warning-light-7: #533f20;   // 警告色暗色 70%
+$xt-dark-color-warning-light-8: #3e301c;   // 警告色暗色 80%
+$xt-dark-color-warning-light-9: #292218;   // 警告色暗色 90%
+$xt-dark-color-warning-dark-2: #ebb563;    // 警告色亮色 20%
+
+// Danger 暗色主题渐变色系
+$xt-dark-color-danger-light-3: #b25252;    // 危险色暗色 30%
+$xt-dark-color-danger-light-5: #854040;    // 危险色暗色 50%
+$xt-dark-color-danger-light-7: #582e2e;    // 危险色暗色 70%
+$xt-dark-color-danger-light-8: #412626;    // 危险色暗色 80%
+$xt-dark-color-danger-light-9: #2a1d1d;    // 危险色暗色 90%
+$xt-dark-color-danger-dark-2: #f78989;     // 危险色亮色 20%
+
+// Info 暗色主题渐变色系
+$xt-dark-color-info-light-3: #6b6d71;      // 信息色暗色 30%
+$xt-dark-color-info-light-5: #525457;      // 信息色暗色 50%
+$xt-dark-color-info-light-7: #393a3c;      // 信息色暗色 70%
+$xt-dark-color-info-light-8: #2d2d2f;      // 信息色暗色 80%
+$xt-dark-color-info-light-9: #202121;      // 信息色暗色 90%
+$xt-dark-color-info-dark-2: #a6a9ad;       // 信息色亮色 20%

package/src/styles/variables.scss

@@ -1 +1 @@
-@import './theme/index.scss';
+@import './theme/index.scss';