@mtn-ui/theme 0.0.1

package/index.css

@@ -0,0 +1,244 @@
+/* ============================================
+   MTN UI Theme System
+   Tailwind CSS v4 CSS-first Configuration
+   注意：这里不导入 Tailwind，只定义变量
+   Tailwind 应在应用层（play）导入
+   ============================================ */
+
+/* ============================================
+   Theme Variables (@theme)
+   定义全局主题变量，供 Tailwind 和组件使用
+   ============================================ */
+@theme {
+  /* ---------- 颜色系统 ---------- */
+  --color-primary: #409eff;
+  --color-primary-hover: #66b1ff;
+  --color-primary-active: #3a8ee6;
+  --color-success: #67c23a;
+  --color-success-hover: #85ce61;
+  --color-warning: #e6a23c;
+  --color-warning-hover: #ebb563;
+  --color-danger: #f56c6c;
+  --color-danger-hover: #f78989;
+  --color-danger-active: #dd6161;
+  --color-info: #909399;
+  --color-info-hover: #a6a9ad;
+
+  /* ---------- 中性色系统 ---------- */
+  --color-text-primary: #303133;
+  --color-text-regular: #606266;
+  --color-text-secondary: #909399;
+  --color-text-placeholder: #c0c4cc;
+  --color-border-base: #dcdfe6;
+  --color-border-light: #e4e7ed;
+  --color-border-lighter: #ebeef5;
+  --color-border-extra-light: #f2f6fc;
+  --color-bg-base: #f5f7fa;
+  --color-bg-page: #ffffff;
+
+  /* ---------- 圆角系统 ---------- */
+  --radius-none: 0;
+  --radius-sm: 2px;
+  --radius-base: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-full: 9999px;
+
+  /* ---------- 间距系统 ---------- */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  --spacing-2xl: 48px;
+
+  /* ---------- 阴影系统 ---------- */
+  --shadow-sm: 0 2px 4px rgb(0 0 0 / 12%), 0 0 6px rgb(0 0 0 / 4%);
+  --shadow-base: 0 2px 12px 0 rgb(0 0 0 / 10%);
+  --shadow-md: 0 4px 16px 0 rgb(0 0 0 / 12%);
+  --shadow-lg: 0 8px 24px 0 rgb(0 0 0 / 16%);
+
+  /* ---------- 过渡动画 ---------- */
+  --transition-base: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  --transition-fast: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+  --transition-slow: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+  /* ---------- 自定义动画 ---------- */
+  --animate-spin-slow: spin 3s linear infinite;
+  --animate-fade-in: fade-in 0.3s ease-in-out;
+  --animate-slide-up: slide-up 0.3s ease-out;
+}
+
+/* ============================================
+   Base Layer
+   定义基础样式和 CSS 变量
+   ============================================ */
+@layer base {
+  :root {
+    /* MTN UI 专用变量（带 mtn- 前缀） */
+    --mtn-main-bg: var(--color-bg-page);
+    --mtn-text-primary: var(--color-text-primary);
+    --mtn-text-regular: var(--color-text-regular);
+    --mtn-text-secondary: var(--color-text-secondary);
+    --mtn-border-color: var(--color-border-base);
+    --mtn-border-radius: var(--radius-base);
+    --mtn-transition: var(--transition-base);
+
+    /* ============================================
+       Ant Design Vue 主题变量映射
+       将 Antdv 的 CSS 变量映射到 Tailwind 变量
+       ============================================ */
+    --ant-primary-color: var(--color-primary);
+    --ant-primary-color-hover: var(--color-primary-hover);
+    --ant-primary-color-active: var(--color-primary-active);
+    --ant-error-color: var(--color-danger);
+    --ant-error-color-hover: var(--color-danger-hover);
+    --ant-error-color-active: var(--color-danger-active);
+    --ant-success-color: var(--color-success);
+    --ant-success-color-hover: var(--color-success-hover);
+    --ant-warning-color: var(--color-warning);
+    --ant-warning-color-hover: var(--color-warning-hover);
+    --ant-info-color: var(--color-info);
+    --ant-info-color-hover: var(--color-info-hover);
+    --ant-border-radius-base: var(--radius-base);
+    --ant-border-radius-sm: var(--radius-sm);
+    --ant-border-radius-lg: var(--radius-md);
+  }
+
+  /* 全局重置和基础样式 */
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ============================================
+     保护 Ant Design Vue 组件不被 Tailwind reset 影响
+     解决 Tailwind Preflight 导致的样式冲突
+     ============================================ */
+  /* 保护 Antdv 按钮的对齐和显示方式 */
+  .ant-btn {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    vertical-align: middle !important;
+    line-height: 1.5715 !important;
+  
+  }
+
+  /* 保护 Antdv 按钮组 */
+  .ant-btn-group {
+    display: inline-block !important;
+  }
+
+  /* 保护 Antdv 图标对齐 */
+  .ant-btn .anticon {
+    line-height: 0 !important;
+    display: inline-flex !important;
+    align-items: center !important;
+  }
+
+  /* ============================================
+     修复 Ant Design Vue Popconfirm 图标对齐问题
+     ============================================ */
+  /* Popconfirm 消息容器 - 使用 flex 确保内容对齐 */
+  .ant-popconfirm-message {
+    display: flex !important;
+    align-items: center !important;
+  }
+
+  /* Popconfirm 图标容器 - 确保图标垂直居中 */
+  .ant-popconfirm-message-icon {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    flex-shrink: 0 !important;
+    line-height: 1 !important;
+  }
+
+  /* Popconfirm 图标内的 anticon - 确保垂直居中 */
+  /* 覆盖 Ant Design Vue 的 padding-top: 4px 以修复图标偏下问题 */
+  .ant-popconfirm-message-icon > .anticon {
+    display: inline-flex !important;
+    align-items: center !important;
+    padding-top: 0 !important;
+  }
+  
+  /* 保护 Antdv loading spinner 的间距 */
+  .ant-btn-loading-icon {
+    margin-right: 8px !important;
+  }
+  
+  /* 如果图标在文字后面 */
+  .ant-btn .anticon:last-child {
+    margin-left: 4px !important;
+    margin-right: 0 !important;
+  }
+
+  /* 保护 Antdv 按钮内的 SVG */
+  .ant-btn svg {
+    display: inline !important;
+    vertical-align: middle !important;
+  }
+
+  /* ============================================
+     MTN 专属按钮风格样式
+     使用 mtn-variant 属性选择器直接匹配
+     这是最可靠的方式，确保样式能够正确应用
+     ============================================ */
+  /* 渐变风格 */
+  .ant-btn[mtn-variant="gradient"] {
+    background: linear-gradient(to right, rgb(59 130 246), rgb(99 102 241)) !important;
+    border: none !important;
+    color: white !important;
+  }
+
+  /* 毛玻璃风格 */
+  .ant-btn[mtn-variant="glass"] {
+    backdrop-filter: blur(12px) !important;
+    background: rgb(255 255 255 / 30%) !important;
+    border: 1px solid rgb(255 255 255 / 20%) !important;
+    color: rgb(31 41 55) !important;
+  }
+
+  /* 柔和风格 */
+  .ant-btn[mtn-variant="soft"] {
+    background-color: rgb(239 246 255) !important;
+    color: rgb(37 99 235) !important;
+    border: none !important;
+  }
+
+  .ant-btn[mtn-variant="soft"]:hover:not(:disabled) {
+    background-color: rgb(219 234 254) !important;
+  }
+
+  /* 动画定义 */
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-up {
+    from {
+      transform: translateY(10px);
+      opacity: 0;
+    }
+
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+}
+
+/* ============================================
+   Components Layer - 样式隔离
+   使用 mtn- 前缀防止样式冲突
+   ============================================ */
+@layer components {
+  /* 此层暂时为空，未来可用于自定义组件样式 */
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@mtn-ui/theme",
+  "version": "0.0.1",
+  "description": "MTN UI Theme System",
+  "type": "module",
+  "main": "./index.css",
+  "exports": {
+    ".": "./index.css",
+    "./vars": "./vars.scss",
+    "./tailwind": "./index.css"
+  },
+  "files": [
+    "index.css",
+    "vars.scss"
+  ],
+  "peerDependencies": {
+    "tailwindcss": "^4.0.0"
+  },
+  "dependencies": {
+    "tailwindcss": "^4.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/vars.scss

@@ -0,0 +1,29 @@
+// SCSS 共享变量
+
+// 颜色系统
+$color-primary: #409eff;
+$color-success: #67c23a;
+$color-warning: #e6a23c;
+$color-danger: #f56c6c;
+$color-info: #909399;
+
+// 尺寸
+$size-small: 24px;
+$size-medium: 32px;
+$size-large: 40px;
+
+// 间距
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-md: 16px;
+$spacing-lg: 24px;
+$spacing-xl: 32px;
+
+// 圆角
+$border-radius-sm: 2px;
+$border-radius-md: 4px;
+$border-radius-lg: 8px;
+
+// 阴影
+$shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+$shadow-md: 0 2px 12px 0 rgba(0, 0, 0, 0.1);