xt-element-ui 1.0.8 → 1.1.0

package/src/components/input/index.vue

@@ -1,20 +1,37 @@
 <template>
+  <div class="xt-input">
     <el-input
       :value="value"
       :placeholder="placeholder"
+      :style="inputStyle"
       @input="$emit('input', $event)"
     />
-  </template>
-  
-  <script>
-  export default {
-    name: 'XtInput',
-    props: {
-      value: [String, Number],
-      placeholder: {
-        type: String,
-        default: '请输入内容'
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'XtInput',
+  props: {
+    value: [String, Number],
+    placeholder: {
+      type: String,
+      default: '请输入内容'
+    },
+    color: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    inputStyle() {
+      if (this.color) {
+        return {
+          '--xt-input-focus-color': this.color
+        }
       }
+      return {}
     }
   }
-  </script>
+}
+</script>

package/src/components/input/style/index.scss

@@ -0,0 +1,27 @@
+@import '../../../styles/variables.scss';
+
+.xt-input .el-input__inner {
+  --xt-input-focus-color: var(--xt-color-primary, #1890ff);
+  
+  background-color: var(--xt-input-bg-color, #ffffff);
+  border-color: var(--xt-input-border-color, #DCDFE6);
+  color: var(--xt-input-text-color, #303133);
+  font-size: var(--xt-font-size-base, 14px);
+}
+
+.xt-input .el-input__inner::placeholder {
+  color: var(--xt-input-placeholder-color, #C0C4CC);
+}
+
+.xt-input .el-input__inner:focus {
+  border-color: var(--xt-input-focus-color);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--xt-input-focus-color) 20%, transparent);
+}
+
+.xt-input .el-input {
+  height: var(--xt-input-height, 32px);
+}
+
+.xt-input .el-input .el-input__wrapper {
+  padding: 0 var(--xt-input-padding-x, 15px);
+}

package/src/components/text/index.js

@@ -0,0 +1,2 @@
+import XtText from './index.vue'
+export default XtText

package/src/components/text/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <span 
+    class="xt-text" 
+    :class="[
+      type ? 'xt-text--' + type : '',
+      { 'xt-text--bold': bold }
+    ]"
+    :style="customStyle"
+  >
+    <slot></slot>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'XtText',
+  props: {
+    type: {
+      type: String,
+      default: '',
+      validator: (val) => ['', 'primary', 'success', 'warning', 'danger'].includes(val)
+    },
+    bold: {
+      type: Boolean,
+      default: false
+    },
+    letterSpacing: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  computed: {
+    customStyle() {
+      const style = {}
+      if (this.letterSpacing) {
+        style.letterSpacing = typeof this.letterSpacing === 'number' ? `${this.letterSpacing}px` : this.letterSpacing
+      }
+      return style
+    }
+  }
+}
+</script>

package/src/components/text/style/index.scss

@@ -0,0 +1,45 @@
+@import '../../../styles/variables.scss';
+
+// 文字组件
+.xt-text {
+  letter-spacing: $xt-spacing-xs;
+}
+
+// 不同类型文字颜色
+.xt-text--primary {
+  color: $xt-color-primary;
+}
+
+.xt-text--success {
+  color: $xt-color-success;
+}
+
+.xt-text--warning {
+  color: $xt-color-warning;
+}
+
+.xt-text--danger {
+  color: $xt-color-danger;
+}
+
+// 粗体
+.xt-text--bold {
+  font-weight: bold;
+}
+
+// 暗色主题
+html.dark .xt-text--primary {
+  color: $xt-color-primary;
+}
+
+html.dark .xt-text--success {
+  color: $xt-dark-color-success;
+}
+
+html.dark .xt-text--warning {
+  color: $xt-dark-color-warning;
+}
+
+html.dark .xt-text--danger {
+  color: $xt-dark-color-danger;
+}

package/src/index.js

@@ -1,7 +1,19 @@
+// 导入主题样式（定义 CSS 变量）
+import './styles/css-variables.scss'
+
+// 导入组件样式（统一入口）
+import './components/index.scss'
+
 // 导入 SCSS 变量（通过 CSS Modules :export 导出）
-import variables from './styles/export.scss'
+import variables from './styles/variables-export.scss'
+
+import utilsModule from './utils/index'
+
+// ES Module 默认导出需要通过 .default 访问
+const utils = utilsModule.default || utilsModule
 
-import utils from './utils/index'
+// 从 utils 导入配置管理函数（仅用于存储配置）
+const { getConfig, setConfig, getTheme, getSize, getPrimaryColor, resetConfig, onConfigChange, setTheme, setSize, setPrimaryColor } = utils
 
 // 导入组件
 import Button from './components/button'
@@ -9,6 +21,8 @@ import Input from './components/input'
 import FlexBox from './components/flex-box'
 import Card from './components/card'
 import CardItem from './components/card-item'
+import ConfigProvider from './components/config-provider'
+import Text from './components/text'
 
 // 存储组件列表
 const components = [
@@ -16,12 +30,14 @@ const components = [
   Input,
   FlexBox,
   Card,
-  CardItem
+  CardItem,
+  ConfigProvider,
+  Text
 ]
 
 
 // 定义 install 方法，Vue.use() 会自动调用
-const install = function (Vue) {
+const install = function (Vue, options = {}) {
   if (install.installed) return
   install.installed = true
 
@@ -29,7 +45,40 @@ const install = function (Vue) {
   components.forEach(component => {
     Vue.component(component.name, component)
   })
-  Vue.prototype.$utils = utils
+  
+  // 将工具方法挂载到 Vue.prototype
+  Vue.prototype.$xt = {
+    setTheme,
+    setSize,
+    setPrimaryColor,
+    getConfig,
+    setConfig,
+    getTheme,
+    getSize,
+    getPrimaryColor,
+    resetConfig,
+    onConfigChange
+  }
+
+  // 在安装时直接应用配置选项
+  if (options) {
+    // 处理主题配置
+    if (options.theme !== undefined) {
+      setTheme(options.theme)
+    }
+    // 处理字体大小配置
+    if (options.size !== undefined) {
+      setSize(options.size)
+    }
+    // 处理主色调配置
+    if (options.primaryColor !== undefined) {
+      setPrimaryColor(options.primaryColor)
+    }
+    // 处理完整配置对象
+    if (options.config !== undefined) {
+      setConfig(options.config)
+    }
+  }
 }
 
 // 支持全局 script 标签引入
@@ -45,127 +94,24 @@ export default {
   Input,
   FlexBox,
   Card,
-  CardItem
+  CardItem,
+  ConfigProvider,
+  Text
 }
 
 // 导出工具函数和变量
 export {
   utils,
-  variables
-}
-
-// 默认配置
-const defaultConfig = {
-  theme: 'light',
-  size: 'medium',
-  primaryColor: '#1890ff'
+  variables,
+  // 配置管理函数（从 utils 导入）
+  getConfig,
+  setConfig,
+  getTheme,
+  getSize,
+  getPrimaryColor,
+  resetConfig,
+  onConfigChange,
+  setTheme,
+  setSize,
+  setPrimaryColor
 }
-
-// 当前配置
-let currentConfig = { ...defaultConfig }
-
-// 配置变更事件处理
-const configChangeListeners = []
-
-const emitConfigChange = function(key, value) {
-  configChangeListeners.forEach(listener => {
-    listener(key, value)
-  })
-}
-
-// 获取所有配置
-export const getConfig = function() {
-  return { ...currentConfig }
-}
-
-// 设置全局配置
-export const setConfig = function(config) {
-  if (typeof config !== 'object' || config === null) {
-    console.warn('[XtElementUI] setConfig 必须传入对象参数')
-    return
-  }
-
-  if (config.theme !== undefined) {
-    setTheme(config.theme)
-  }
-  if (config.size !== undefined) {
-    setSize(config.size)
-  }
-  if (config.primaryColor !== undefined) {
-    setPrimaryColor(config.primaryColor)
-  }
-}
-
-// 设置主题（只控制颜色）
-export const setTheme = function(theme) {
-  const validThemes = ['light', 'dark']
-  if (!validThemes.includes(theme)) {
-    console.warn(`[XtElementUI] 无效的主题值: ${theme}，可选值: ${validThemes.join(', ')}`)
-    return
-  }
-  
-  currentConfig.theme = theme
-  document.documentElement.setAttribute('data-theme', theme)
-  emitConfigChange('theme', theme)
-}
-
-// 设置字体大小和间距
-export const setSize = function(size) {
-  const validSizes = ['small', 'medium', 'large']
-  if (!validSizes.includes(size)) {
-    console.warn(`[XtElementUI] 无效的大小值: ${size}，可选值: ${validSizes.join(', ')}`)
-    return
-  }
-  
-  currentConfig.size = size
-  document.documentElement.setAttribute('data-size', size)
-  emitConfigChange('size', size)
-}
-
-// 设置主色调
-export const setPrimaryColor = function(color) {
-  const colorRegex = /^#[0-9A-Fa-f]{6}$|^#[0-9A-Fa-f]{3}$/
-  if (!colorRegex.test(color)) {
-    console.warn(`[XtElementUI] 无效的颜色值: ${color}，请使用十六进制颜色格式，如 #1890ff`)
-    return
-  }
-  
-  currentConfig.primaryColor = color
-  document.documentElement.style.setProperty('--xt-color-primary', color)
-  emitConfigChange('primaryColor', color)
-}
-
-// 获取当前主题
-export const getTheme = function() {
-  return currentConfig.theme
-}
-
-// 获取当前字体大小
-export const getSize = function() {
-  return currentConfig.size
-}
-
-// 获取当前主色调
-export const getPrimaryColor = function() {
-  return currentConfig.primaryColor
-}
-
-// 重置为默认配置
-export const resetConfig = function() {
-  setConfig(defaultConfig)
-}
-
-// 监听配置变更
-export const onConfigChange = function(listener) {
-  if (typeof listener === 'function') {
-    configChangeListeners.push(listener)
-    return function() {
-      const index = configChangeListeners.indexOf(listener)
-      if (index > -1) {
-        configChangeListeners.splice(index, 1)
-      }
-    }
-  } else {
-    console.warn('[XtElementUI] onConfigChange 必须传入函数')
-  }
-}

package/src/styles/{theme.scss → css-variables.scss}

@@ -1,4 +1,4 @@
-@use './variables.scss' as *;
+@import './theme/index.scss';
 
 :root {
   // 主色调系列
@@ -64,39 +64,82 @@
   // 过渡动画
   --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};
 }
 
-// 暗色主题 - 只控制颜色
-[data-theme="dark"] {
-  --xt-color-primary: #{$xt-color-primary};
-  --xt-color-success: #67C23A;
-  --xt-color-warning: #E6A23C;
-  --xt-color-danger: #F56C6C;
-  --xt-color-info: #909399;
-
-  --xt-color-text-primary: rgba(255, 255, 255, 0.95);
-  --xt-color-text-regular: rgba(255, 255, 255, 0.8);
-  --xt-color-text-secondary: rgba(255, 255, 255, 0.6);
-  --xt-color-text-placeholder: rgba(255, 255, 255, 0.4);
-  --xt-color-text-disabled: rgba(255, 255, 255, 0.3);
-
-  --xt-color-bg-primary: #1f1f1f;
-  --xt-color-bg-secondary: #2d2d2d;
-  --xt-color-bg-hover: #3d3d3d;
-  --xt-color-bg-container: #1f1f1f;
-  --xt-color-bg-overlay: #2d2d2d;
-
-  --xt-color-border: #434343;
-  --xt-color-border-light: #3d3d3d;
-  --xt-color-border-lighter: #3d3d3d;
-  --xt-color-border-extra-light: #434343;
+// 暗色主题
+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};
 }
 
-// ===========================
 // 字体大小主题（基于增量）
-// ===========================
-
-// 小字体主题 - 增量 0px
 [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};
@@ -106,7 +149,6 @@
   --xt-font-size-extra-small: #{$xt-font-size-extra-small + $xt-font-size-increment-small};
 }
 
-// 中等字体主题 - 增量 2px
 [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};
@@ -116,7 +158,6 @@
   --xt-font-size-extra-small: #{$xt-font-size-extra-small + $xt-font-size-increment-medium};
 }
 
-// 大字体主题 - 增量 4px
 [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};

package/src/styles/{theme-element.scss → element-theme.scss}

@@ -84,16 +84,6 @@
   --el-border-color-extra-light: #5c5c5d;
 }
 
-/* 紧凑主题 */
-[data-theme="compact"] {
-  --el-font-size-base: 13px;
-  --el-font-size-small: 12px;
-  
-  --el-spacing-xs: 3px;
-  --el-spacing-sm: 6px;
-  --el-spacing-md: 10px;
-  --el-spacing-lg: 14px;
-}
 
 /* 大字体主题 */
 [data-size="large"] {

package/src/styles/theme/background.scss

@@ -0,0 +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-main: #ffffff;                  // 主内容区域背景色
+$xt-color-bg-overlay: #ffffff;               // 浮层背景色

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

@@ -0,0 +1,4 @@
+$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

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

package/src/styles/theme/colors.scss

@@ -0,0 +1,11 @@
+$xt-color-primary: #1890ff;       // 主颜色 - XT UI 标准蓝色
+$xt-color-success: #37c3a4;       // 成功色 - XT UI 标准绿色
+$xt-color-warning: #FFB74D;       // 警告色 - XT UI 标准橙色
+$xt-color-danger: #EA1D34;        // 危险色 - XT UI 标准红色
+$xt-color-info: #999999;          // 信息色 - XT UI 标准灰色
+
+$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%

package/src/styles/theme/component-variables.scss

@@ -0,0 +1,70 @@
+// ===========================
+// 按钮专用变量
+// ===========================
+$xt-button-height: 32px;                    // 按钮高度
+$xt-button-padding-x: 15px;                 // 按钮水平内边距
+$xt-button-padding-y: 8px;                  // 按钮垂直内边距
+$xt-button-font-weight: 500;                // 按钮字体粗细
+$xt-button-border-width: 1px;               // 按钮边框宽度
+$xt-button-transition: 0.1s;                // 按钮过渡时长
+
+// ===========================
+// 卡片专用变量
+// ===========================
+$xt-card-bg-color: #ffffff;                 // 卡片背景色
+$xt-card-border-color: #EBEEF5;             // 卡片边框颜色
+$xt-card-border-radius: 4px;                // 卡片圆角
+$xt-card-padding: 20px;                     // 卡片内边距
+$xt-card-header-padding: 18px 20px;         // 卡片头部内边距
+$xt-card-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);  // 卡片阴影
+
+// ===========================
+// 卡片项专用变量
+// ===========================
+$xt-card-item-min-height: 40px;             // 卡片项最小高度
+$xt-card-item-gap: 10px;                    // 卡片项间距
+$xt-card-item-border-width: 3px;            // 卡片项边框宽度
+
+// ===========================
+// 输入框专用变量
+// ===========================
+$xt-input-height: 32px;                     // 输入框高度
+$xt-input-padding-x: 15px;                  // 输入框水平内边距
+$xt-input-bg-color: #ffffff;                // 输入框背景色
+$xt-input-border-color: #DCDFE6;            // 输入框边框颜色
+$xt-input-text-color: #303133;              // 输入框文字颜色
+$xt-input-placeholder-color: #C0C4CC;       // 输入框占位符颜色
+
+// ===========================
+// FlexBox 专用变量
+// ===========================
+$xt-flex-box-gap: 8px;                      // FlexBox 默认间距
+
+// ===========================
+// 布局 / 头部 / 导航 专用变量
+// ===========================
+$xt-header-bg: #ffffff;                      // 头部背景色
+$xt-header-text-color: #303133;              // 头部文字颜色
+$xt-header-active-text: #1890ff;             // 头部激活状态文字颜色
+$xt-header-hover-text: #1890ff;              // 头部悬停状态文字颜色
+
+$xt-hamburger-bg: #1890ff;                   // 汉堡按钮背景色
+
+$xt-menu-bg: #304156;                        // 菜单背景色
+$xt-menu-hover: #263445;                     // 菜单悬停背景色
+$xt-menu-text: #bfcbd9;                      // 菜单文字颜色
+$xt-menu-active-text: #ffffff;               // 菜单激活状态文字颜色
+
+$xt-sub-menu-bg: #1f2d3d;                    // 子菜单背景色
+$xt-sub-menu-hover: #001528;                 // 子菜单悬停背景色
+
+// ===========================
+// 弹窗专用变量
+// ===========================
+$xt-dialog-bg: #ffffff;                      // 弹窗背景色
+$xt-dialog-title: #303133;                   // 弹窗标题文字颜色
+
+// ===========================
+// TAG 标签专用变量
+// ===========================
+$xt-tag-bg: #ffffff;                         // 标签背景色

package/src/styles/theme/dark-variables.scss

@@ -0,0 +1,29 @@
+$xt-dark-color-primary: #0a7be0;            // 暗色主题主色调
+$xt-dark-color-success: #4BC376;             // 暗色主题成功颜色
+$xt-dark-color-warning: #E6B61e;             // 暗色主题警告颜色
+$xt-dark-color-danger: #c13737;              // 暗色主题危险颜色
+$xt-dark-color-info: #3f4249;                // 暗色主题信息文字颜色
+
+$xt-dark-color-text-primary: rgba(255, 255, 255, 0.95);      // 暗色主题主要文字颜色
+$xt-dark-color-text-regular: rgba(255, 255, 255, 0.8);       // 暗色主题常规文字颜色
+$xt-dark-color-text-secondary: rgba(255, 255, 255, 0.6);     // 暗色主题次要文字颜色
+$xt-dark-color-text-placeholder: rgba(255, 255, 255, 0.4);   // 暗色主题占位符文字颜色
+$xt-dark-color-text-disabled: rgba(255, 255, 255, 0.3);      // 暗色主题禁用状态文字颜色
+
+$xt-dark-color-bg-primary: #1f1f1f;                           // 暗色主题主背景色
+$xt-dark-color-bg-secondary: #2d2d2d;                         // 暗色主题次要背景色
+$xt-dark-color-bg-hover: #3d3d3d;                             // 暗色主题悬停背景色
+$xt-dark-color-bg-container: #1f1f1f;                         // 暗色主题容器背景色
+$xt-dark-color-bg-overlay: #2d2d2d;                           // 暗色主题浮层背景色
+
+$xt-dark-color-border: #434343;                               // 暗色主题边框颜色
+$xt-dark-color-border-light: #3d3d3d;                         // 暗色主题边框浅色
+$xt-dark-color-border-lighter: #3d3d3d;                       // 暗色主题边框更浅色
+$xt-dark-color-border-extra-light: #434343;                   // 暗色主题边框极浅色
+
+// 暗色主题按钮颜色
+$xt-dark-button-primary-bg: #1e40af;          // 暗色主题主按钮背景色
+$xt-dark-button-success-bg: #166534;          // 暗色主题成功按钮背景色
+$xt-dark-button-warning-bg: #78350f;          // 暗色主题警告按钮背景色
+$xt-dark-button-danger-bg: #991b1b;           // 暗色主题危险按钮背景色
+$xt-dark-button-info-bg: #374151;            // 暗色主题信息按钮背景色