xt-element-ui 1.3.3 → 1.3.4

package/src/styles/css-variables.scss

@@ -1,257 +1,257 @@
-@import './theme/index.scss';
-
-:root {
-  // ============================
-  // 基础变量（参考 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;
-
-  // 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-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-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: 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-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-index-normal: 1;
-  --xt-index-top: 1000;
-  --xt-index-popper: 2000;
-
-  // 圆角
-  --xt-border-radius-base: 4px;
-  --xt-border-radius-small: 2px;
-  --xt-border-radius-round: 20px;
-  --xt-border-radius-circle: 100%;
-
-  // 过渡动画
-  --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);
-
-  // 组件尺寸
-  --xt-component-size-large: 40px;
-  --xt-component-size: 32px;
-  --xt-component-size-small: 24px;
-
-  // 间距
-  --xt-spacing-xs: 8px;
-  --xt-spacing-sm: 12px;
-  --xt-spacing-md: 16px;
-  --xt-spacing-lg: 24px;
-  --xt-spacing-xl: 32px;
-}
-
-// ============================
-// 暗色主题（参考 Element Plus）
-// ============================
-:root[data-theme="dark"],
-[data-theme="dark"], html.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)
-}
+@import './theme/index.scss';
+
+:root {
+  // ============================
+  // 基础变量（参考 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;
+
+  // 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-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-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: 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-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-index-normal: 1;
+  --xt-index-top: 1000;
+  --xt-index-popper: 2000;
+
+  // 圆角
+  --xt-border-radius-base: 4px;
+  --xt-border-radius-small: 2px;
+  --xt-border-radius-round: 20px;
+  --xt-border-radius-circle: 100%;
+
+  // 过渡动画
+  --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);
+
+  // 组件尺寸
+  --xt-component-size-large: 40px;
+  --xt-component-size: 32px;
+  --xt-component-size-small: 24px;
+
+  // 间距
+  --xt-spacing-xs: 8px;
+  --xt-spacing-sm: 12px;
+  --xt-spacing-md: 16px;
+  --xt-spacing-lg: 24px;
+  --xt-spacing-xl: 32px;
+}
+
+// ============================
+// 暗色主题（参考 Element Plus）
+// ============================
+:root[data-theme="dark"],
+[data-theme="dark"], html.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)
+}

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: #f0f0f2;             // 容器背景色
-$xt-color-bg-main: #ffffff;                  // 主内容区域背景色
+$xt-color-bg-primary: #ffffff;               // 主背景色 - 白色
+$xt-color-bg-secondary: #f5f7fa;            // 次要背景色 - 浅灰
+$xt-color-bg-hover: #f5f5f5;                 // 悬停背景色
+$xt-color-bg-container: #f0f0f2;             // 容器背景色
+$xt-color-bg-main: #ffffff;                  // 主内容区域背景色
 $xt-color-bg-overlay: #ffffff;               // 浮层背景色

package/src/styles/theme/border-radius.scss

@@ -1,4 +1,4 @@
-$xt-border-radius-base: 4px;                 // 基准圆角
-$xt-border-radius-small: 2px;                // 小圆角
-$xt-border-radius-round: 20px;               // 圆角（胶囊状）
+$xt-border-radius-base: 4px;                 // 基准圆角
+$xt-border-radius-small: 2px;                // 小圆角
+$xt-border-radius-round: 20px;               // 圆角（胶囊状）
 $xt-border-radius-circle: 50%;               // 圆形

package/src/styles/theme/borders.scss

@@ -1,4 +1,4 @@
-$xt-color-border: #DCDFE6;                   // 边框颜色 - 标准
-$xt-color-border-light: #E4E7ED;             // 边框浅色
-$xt-color-border-lighter: #EBEEF5;          // 边框更浅色
+$xt-color-border: #DCDFE6;                   // 边框颜色 - 标准
+$xt-color-border-light: #E4E7ED;             // 边框浅色
+$xt-color-border-lighter: #EBEEF5;          // 边框更浅色
 $xt-color-border-extra-light: #F2F6FC;      // 边框极浅色