npm - @admin-core/design - Versions diffs - 0.1.0 → 0.2.1 - Mend

@admin-core/design 0.1.0 → 0.2.1

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.

Files changed (45) hide show

package/README.en.md +698 -0
package/README.md +588 -285
package/dist/index.cjs +5 -1
package/dist/index.cjs.map +1 -1
package/dist/index.d.ts +1 -0
package/dist/index.d.ts.map +1 -1
package/dist/index.js +2616 -1
package/dist/index.js.map +1 -1
package/dist/index.umd.js +5 -1
package/dist/index.umd.js.map +1 -1
package/dist/style.css +1 -1
package/dist/theme/composables.d.ts +89 -0
package/dist/theme/composables.d.ts.map +1 -0
package/dist/theme/constants.d.ts +56 -0
package/dist/theme/constants.d.ts.map +1 -0
package/dist/theme/i18n/en-US.d.ts +3 -0
package/dist/theme/i18n/en-US.d.ts.map +1 -0
package/dist/theme/i18n/index.d.ts +34 -0
package/dist/theme/i18n/index.d.ts.map +1 -0
package/dist/theme/i18n/zh-CN.d.ts +69 -0
package/dist/theme/i18n/zh-CN.d.ts.map +1 -0
package/dist/theme/index.d.ts +52 -0
package/dist/theme/index.d.ts.map +1 -0
package/dist/theme/integration.d.ts +124 -0
package/dist/theme/integration.d.ts.map +1 -0
package/dist/theme/types.d.ts +135 -0
package/dist/theme/types.d.ts.map +1 -0
package/dist/theme/utils.d.ts +230 -0
package/dist/theme/utils.d.ts.map +1 -0
package/package.json +32 -4
package/src/css/base.css +145 -0
package/src/css/components.css +96 -0
package/src/css/index.css +21 -0
package/src/css/integrations/ant-design-vue.css +64 -0
package/src/css/integrations/arco-design.css +62 -0
package/src/css/integrations/element-plus.css +157 -0
package/src/css/integrations/index.css +17 -0
package/src/css/integrations/naive-ui.css +60 -0
package/src/css/nprogress.css +74 -0
package/src/css/transition.css +256 -0
package/src/css/ui.css +117 -0
package/src/css/utilities.css +138 -0
package/src/tokens/dark.css +406 -0
package/src/tokens/index.ts +6 -0
package/src/tokens/light.css +297 -0

package/README.md CHANGED Viewed

@@ -1,395 +1,698 @@
 # @admin-core/design
-设计系统（样式、令牌）
+<div align="center">
-## 安装
+**现代化的 Vue 3 设计系统**
-```bash
-# npm
-npm install @admin-core/design
+基于 Tailwind CSS v4 的完整设计系统，提供主题管理、设计令牌和第三方组件库集成
+[![npm version](https://img.shields.io/npm/v/@admin-core/design.svg)](https://www.npmjs.com/package/@admin-core/design)
+[![License](https://img.shields.io/npm/l/@admin-core/design.svg)](https://github.com/jackBoVip/admin-kit/blob/main/LICENSE)
+[English](./README.en.md) | 简体中文
+</div>
+---
+## ✨ 特性
+- 🎨 **15+ 预设主题** - 2026 流行色系列，支持浅色/暗色模式
+- 🔧 **Tailwind CSS v4** - 使用最新的 Tailwind CSS v4 特性
+- 🎯 **设计令牌** - 基于 CSS 变量的设计令牌系统
+- 🔌 **第三方集成** - 开箱即用的 Element Plus、Ant Design Vue 等组件库主题集成
+- 🌍 **国际化** - 支持中英文主题名称和描述
+- 🎭 **自定义主题** - 智能配色算法，只需选择主色即可生成完整主题
+- 📦 **TypeScript** - 完整的 TypeScript 类型支持
+- 🚀 **零配置** - 导入即用，无需复杂配置
+---
+## 📦 安装
-# pnpm
+```bash
+# 使用 pnpm
 pnpm add @admin-core/design
-# yarn
+# 使用 npm
+npm install @admin-core/design
+# 使用 yarn
 yarn add @admin-core/design
 ```
-## 使用方式
+---
-### 1. CSS 样式导入
+## 🚀 快速开始
-#### ESM (推荐)
+### 基础使用
 ```typescript
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+// 导入设计系统
 import '@admin-core/design/css'
-// 使用 CSS 变量
-// 在你的组件中直接使用设计令牌
+const app = createApp(App)
+app.mount('#app')
 ```
-#### CommonJS
+### 在组件中使用
-```javascript
-require('@admin-core/design/css')
+```vue
+<template>
+  <div class="min-h-screen bg-background text-foreground">
+    <div class="card-box p-6 rounded-lg">
+      <h1 class="text-2xl font-bold text-primary">欢迎使用 Admin Core</h1>
+      <p class="text-muted-foreground mt-2">现代化的设计系统</p>
+      <button class="mt-4 bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90">
+        开始使用
+      </button>
+    </div>
+  </div>
+</template>
 ```
-### 2. SCSS BEM 工具
+---
-如果你的项目使用 SCSS，可以导入 BEM 命名规范工具：
+## 🎨 主题系统
-```scss
-// 导入 BEM Mixin 工具
-@use '@admin-core/design/scss-bem' as *;
+### 切换暗色模式
-// 使用 BEM Mixin
-@include b(button) {
-  padding: 8px 16px;
-  @include e(icon) {
-    margin-right: 8px;
-  }
-  @include m(primary) {
-    background: blue;
-  }
-  @include is(disabled) {
-    opacity: 0.5;
-  }
-}
+```typescript
+// 切换暗色模式
+document.documentElement.classList.toggle('dark')
 ```
-详细的 BEM 工具使用文档，请查看 [SCSS BEM 文档](./src/scss-bem/README.md)
+```html
+<!-- 浅色模式（默认） -->
+<html>
+  <body>...</body>
+</html>
-### 3. CDN (UMD)
+<!-- 暗色模式 -->
+<html class="dark">
+  <body>...</body>
+</html>
+```
-#### unpkg
+### 切换主题变体
-```html
-<!-- 样式 -->
-<link rel="stylesheet" href="https://unpkg.com/@admin-core/design/dist/style.css">
-<!-- JavaScript -->
-<script src="https://unpkg.com/@admin-core/design/dist/index.umd.js"></script>
-<script>
-  // 全局变量 AdminKitDesign
-  console.log(AdminKitDesign)
-</script>
+```typescript
+// 设置主题
+document.documentElement.setAttribute('data-theme', 'deep-teal')
 ```
-#### jsDelivr
 ```html
-<!-- 样式 -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@admin-core/design/dist/style.css">
+<!-- 深邃青主题 -->
+<html data-theme="deep-teal">
+  <body>...</body>
+</html>
+<!-- 暗色 + 深邃青主题 -->
+<html class="dark" data-theme="deep-teal">
+  <body>...</body>
+</html>
+```
-<!-- JavaScript -->
-<script src="https://cdn.jsdelivr.net/npm/@admin-core/design/dist/index.umd.js"></script>
-<script>
-  console.log(AdminKitDesign)
+### 可用主题（15 个 2026 流行色）
+| 主题 ID | 名称 | 描述 |
+|---------|------|------|
+| `default` | 经典蓝 | 适合大多数场景的经典蓝色主题 |
+| `slate` | 石板灰 | 专业沉稳的中性灰色调 |
+| `burnished-lilac` | 烟熏薰衣草 | 优雅神秘的紫灰色调 |
+| `teaberry` | 茶莓红 | 活力四射的玫瑰红色调 |
+| `amaranth` | 苋菜紫 | 高贵典雅的深紫色调 |
+| `pulse-blue` | 脉冲蓝 | 充满活力的明亮蓝色 |
+| `deep-teal` | 深邃青 | 沉稳大气的青色调 |
+| `mermaid-aqua` | 美人鱼蓝 | 清新梦幻的水蓝色 |
+| `pearl-purple` | 珍珠紫 | 柔和优雅的淡紫色 |
+| `burgundy` | 勃艮第 | 成熟稳重的酒红色 |
+| `burnt-sienna` | 焦赭石 | 温暖复古的橙棕色 |
+| `olive-sage` | 橄榄绿 | 自然清新的橄榄绿 |
+| `champagne-gold` | 香槟金 | 奢华典雅的金色调 |
+| `dusty-rose` | 灰玫瑰 | 温柔浪漫的粉灰色 |
+| `citrus-green` | 柑橘绿 | 清新活力的柠檬绿 |
+### 使用 Vue Composable
+```vue
+<script setup lang="ts">
+import { useTheme } from '@admin-core/design'
+const {
+  mode,           // 当前模式：'light' | 'dark'
+  variant,        // 当前主题变体
+  isDark,         // 是否暗色模式
+  setMode,        // 设置模式
+  setVariant,     // 设置主题变体
+  toggleDarkMode, // 切换暗色模式
+} = useTheme()
+// 切换暗色模式
+const handleToggle = () => {
+  toggleDarkMode()
+}
+// 切换主题
+const handleThemeChange = (theme: string) => {
+  setVariant(theme)
+}
 </script>
+<template>
+  <div>
+    <button @click="handleToggle">
+      {{ isDark ? '切换到浅色' : '切换到暗色' }}
+    </button>
+    <select @change="handleThemeChange($event.target.value)">
+      <option value="default">经典蓝</option>
+      <option value="deep-teal">深邃青</option>
+      <option value="teaberry">茶莓红</option>
+    </select>
+  </div>
+</template>
 ```
-## 包含内容
+---
+## 🎯 自定义主题
+### 智能配色
+只需选择主色，系统会自动生成完整的配色方案：
+```typescript
+import { applyThemeFromPrimary } from '@admin-core/design'
+// 使用 HEX 颜色
+applyThemeFromPrimary('#8B5CF6')
-### 样式文件
+// 使用 HSL 颜色
+applyThemeFromPrimary('280 60% 50%')
-- **global.css** - 全局样式、盒模型、滚动条、视图过渡
-- **nprogress.css** - 进度条样式和旋转加载动画
-- **transition.css** - Vue 过渡动画（滑动、淡入淡出、缩放等）
-- **ui.css** - UI 组件样式（侧边内容、面包屑、弹窗层级等）
-- **light.css** - 浅色主题 CSS 变量
-- **dark.css** - 暗色主题 CSS 变量
+// 指定模式并持久化
+applyThemeFromPrimary('#8B5CF6', 'dark', true)
+```
+### 完全自定义
+```typescript
+import { applyCustomTheme } from '@admin-core/design'
+applyCustomTheme({
+  primary: '280 60% 50%',
+  secondary: '280 30% 90%',
+  accent: '280 55% 85%',
+  // ... 更多颜色
+}, true) // true 表示持久化到 localStorage
+```
 ---
-# 设计令牌（Design Tokens）
+## 🔌 第三方组件库集成
-## 概述
+### 一行代码集成
-设计令牌是设计系统的基础，定义了应用中所有的颜色、间距、字体等视觉属性。通过 CSS 变量实现，可以轻松切换主题和适配暗色模式。
+我们提供了开箱即用的第三方组件库主题集成文件：
-## 文件说明
+#### Element Plus
-### light.css - 浅色主题
+```typescript
+// main.ts
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import '@admin-core/design/css'
-**用途：**
-- 定义浅色主题下的所有 CSS 变量
-- 提供 12 种预设主题变体（default、violet、pink、rose、sky-blue、deep-blue、green、deep-green、orange、yellow、zinc、neutral、slate、gray）
-- 作为整个设计系统的颜色基础
+// 一行代码集成！
+import '@admin-core/design/css/integrations/element-plus.css'
-**核心变量：**
-- `--background` - 页面背景色
-- `--foreground` - 文字颜色
-- `--primary` - 主题色
-- `--secondary` - 次要色
-- `--accent` - 强调色
-- `--destructive` - 危险操作色
-- `--success` - 成功提示色
-- `--warning` - 警告提示色
-- `--border` - 边框色
-- `--input` - 输入框边框色
-- `--card` - 卡片背景色
-- `--popover` - 弹出层背景色
+app.use(ElementPlus)
+```
-**使用示例：**
-```html
-<!-- 默认主题 -->
-<html>
-  <body>默认浅色主题</body>
-</html>
+#### Ant Design Vue
-<!-- 紫色主题 -->
-<html data-theme="violet">
-  <body>紫色浅色主题</body>
-</html>
+```typescript
+import Antd from 'ant-design-vue'
+import 'ant-design-vue/dist/reset.css'
+import '@admin-core/design/css'
+import '@admin-core/design/css/integrations/ant-design-vue.css'
+app.use(Antd)
 ```
-### dark.css - 暗色主题
+#### Naive UI
-**用途：**
-- 定义暗色模式下的所有 CSS 变量
-- 提供护眼的深色配色方案
-- 支持与浅色主题相同的 12 种主题变体
-- 通过 `.dark` 类名自动应用
+```typescript
+import naive from 'naive-ui'
+import '@admin-core/design/css'
+import '@admin-core/design/css/integrations/naive-ui.css'
-**特点：**
-- 背景色使用深色调（低亮度值）
-- 前景色使用浅色调（高亮度值）
-- 优化的对比度，确保文字可读性
-- 减少夜间使用时的眼睛疲劳
+app.use(naive)
+```
-**使用示例：**
-```html
-<!-- 暗色模式 -->
-<html class="dark">
-  <body>默认暗色主题</body>
-</html>
+#### Arco Design
-<!-- 暗色模式 + 紫色主题 -->
-<html class="dark" data-theme="violet">
-  <body>紫色暗色主题</body>
-</html>
+```typescript
+import ArcoVue from '@arco-design/web-vue'
+import '@arco-design/web-vue/dist/arco.css'
+import '@admin-core/design/css'
+import '@admin-core/design/css/integrations/arco-design.css'
+app.use(ArcoVue)
+```
+### 集成效果
+✅ **主题自动同步** - 切换主题，组件库颜色立即更新
+✅ **暗色模式支持** - 切换暗色模式，组件库自动适配
+✅ **自定义主题** - 使用自定义主题，组件库同步应用
+✅ **零配置** - 无需任何额外配置
+✅ **高性能** - 基于 CSS 变量，性能优秀
+### 高级用法：使用 ConfigProvider
+```vue
+<template>
+  <a-config-provider :theme="antdTheme">
+    <router-view />
+  </a-config-provider>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { theme } from 'ant-design-vue'
+import { useTheme, getRGBColor } from '@admin-core/design'
+const { isDark } = useTheme()
+const antdTheme = computed(() => ({
+  algorithm: isDark.value ? theme.darkAlgorithm : theme.defaultAlgorithm,
+  token: {
+    colorPrimary: getRGBColor('primary'),
+    colorSuccess: getRGBColor('success'),
+    colorWarning: getRGBColor('warning'),
+    colorError: getRGBColor('destructive'),
+  },
+}))
+</script>
+```
+### 集成工具函数
+```typescript
+import {
+  getHSLColor,      // 获取 HSL 格式颜色
+  getRGBColor,      // 获取 RGB 格式颜色
+  getHexColor,      // 获取 HEX 格式颜色
+  getThemeColors,   // 批量获取所有颜色（HSL）
+  getThemeColorsRGB,// 批量获取所有颜色（RGB）
+  getThemeColorsHex,// 批量获取所有颜色（HEX）
+} from '@admin-core/design'
+// 获取单个颜色
+const primaryHSL = getHSLColor('primary')  // 'hsl(212, 100%, 48%)'
+const primaryRGB = getRGBColor('primary')  // 'rgb(0, 102, 245)'
+const primaryHex = getHexColor('primary')  // '#0066F5'
+// 批量获取所有颜色
+const allColors = getThemeColors()
 ```
-## 主题系统
+---
-### 预设主题列表
+## 🌍 国际化
-| 主题名称 | data-theme 值 | 描述 |
-|---------|--------------|------|
-| 默认 | 不设置 | 蓝色系主题 |
-| 紫罗兰 | `violet` | 紫色系主题 |
-| 粉色 | `pink` | 粉色系主题 |
-| 玫瑰 | `rose` | 玫瑰色系主题 |
-| 天蓝 | `sky-blue` | 天蓝色系主题 |
-| 深蓝 | `deep-blue` | 深蓝色系主题 |
-| 绿色 | `green` | 绿色系主题 |
-| 深绿 | `deep-green` | 深绿色系主题 |
-| 橙色 | `orange` | 橙色系主题 |
-| 黄色 | `yellow` | 黄色系主题 |
-| 锌灰 | `zinc` | 锌灰色系主题 |
-| 中性灰 | `neutral` | 中性灰色系主题 |
-| 石板灰 | `slate` | 石板灰色系主题 |
-| 灰色 | `gray` | 灰色系主题 |
+### 设置语言
-### 主题切换实现
+```typescript
+import { setLocale, getLocale } from '@admin-core/design'
-**JavaScript 切换：**
-```javascript
-// 切换到暗色模式
-document.documentElement.classList.add('dark')
+// 设置为英文
+setLocale('en-US')
-// 切换到浅色模式
-document.documentElement.classList.remove('dark')
+// 设置为中文
+setLocale('zh-CN')
-// 切换主题颜色
-document.documentElement.setAttribute('data-theme', 'violet')
+// 获取当前语言
+const currentLocale = getLocale() // 'zh-CN' | 'en-US'
 ```
-**Vue 组合式函数：**
+### 获取国际化主题信息
 ```typescript
-import { ref } from 'vue'
+import { getThemeName, getThemeDescription, getThemeMetadata } from '@admin-core/design'
-export function useTheme() {
-  const isDark = ref(false)
-  const theme = ref('default')
+// 获取主题名称（根据当前语言）
+const name = getThemeName('deep-teal')
+// 中文: '深邃青'
+// 英文: 'Deep Teal'
-  const toggleDark = () => {
-    isDark.value = !isDark.value
-    document.documentElement.classList.toggle('dark', isDark.value)
-  }
+// 获取主题描述
+const description = getThemeDescription('deep-teal')
+// 中文: '2026流行色 - 深邃的青色，沉稳大气'
+// 英文: '2026 Trending Color - Deep teal, calm and atmospheric'
-  const setTheme = (newTheme: string) => {
-    theme.value = newTheme
-    document.documentElement.setAttribute('data-theme', newTheme)
-  }
+// 获取所有主题（自动国际化）
+const themes = getThemeMetadata()
+```
+### 在 Vue 组件中使用
+```vue
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { setLocale, getLocale, getThemeMetadata, type Locale } from '@admin-core/design'
-  return { isDark, theme, toggleDark, setTheme }
+const currentLocale = ref<Locale>(getLocale())
+const themes = ref(getThemeMetadata())
+const changeLanguage = (locale: Locale) => {
+  setLocale(locale)
+  currentLocale.value = locale
+  themes.value = getThemeMetadata() // 重新获取以更新语言
 }
+</script>
+<template>
+  <div>
+    <select v-model="currentLocale" @change="changeLanguage(currentLocale)">
+      <option value="zh-CN">🇨🇳 中文</option>
+      <option value="en-US">🇺🇸 English</option>
+    </select>
+    <select>
+      <option v-for="theme in themes" :key="theme.id" :value="theme.id">
+        {{ theme.icon }} {{ theme.name }}
+      </option>
+    </select>
+  </div>
+</template>
 ```
-## CSS 变量使用
+---
-### 在组件中使用
+## 🎨 设计令牌
+所有颜色都使用 HSL 格式的 CSS 变量定义，支持透明度修饰符：
+### 基础颜色
+```html
+<!-- 背景和前景 -->
+<div class="bg-background text-foreground">内容</div>
+<!-- 卡片 -->
+<div class="bg-card text-card-foreground">卡片内容</div>
+<!-- 弹出层 -->
+<div class="bg-popover text-popover-foreground">弹出内容</div>
+```
+### 语义颜色
+```html
+<!-- 主色 -->
+<button class="bg-primary text-primary-foreground">主要按钮</button>
+<!-- 次要色 -->
+<button class="bg-secondary text-secondary-foreground">次要按钮</button>
+<!-- 强调色 -->
+<div class="bg-accent text-accent-foreground">强调内容</div>
+<!-- 柔和色 -->
+<div class="bg-muted text-muted-foreground">柔和内容</div>
+<!-- 破坏性操作 -->
+<button class="bg-destructive text-destructive-foreground">删除</button>
+```
+### 状态颜色
+```html
+<!-- 成功 -->
+<div class="bg-success text-success-foreground">操作成功</div>
+<!-- 警告 -->
+<div class="bg-warning text-warning-foreground">警告信息</div>
+<!-- 信息 -->
+<div class="bg-info text-info-foreground">提示信息</div>
+```
+### 透明度修饰符
+```html
+<div class="bg-primary/10">10% 透明度</div>
+<div class="bg-primary/50">50% 透明度</div>
+<div class="bg-primary/90">90% 透明度</div>
+```
+### 在 CSS 中使用
 ```css
-.my-button {
-  /* 使用主题色 */
+.my-component {
   background-color: hsl(var(--primary));
   color: hsl(var(--primary-foreground));
-  /* 使用边框色 */
   border: 1px solid hsl(var(--border));
-  /* 使用圆角 */
   border-radius: var(--radius);
 }
-.my-button:hover {
-  /* 使用强调色 */
-  background-color: hsl(var(--accent));
+/* 使用透明度 */
+.my-overlay {
+  background-color: hsl(var(--primary) / 0.5);
 }
+```
-.my-button.destructive {
-  /* 使用危险色 */
-  background-color: hsl(var(--destructive));
-  color: hsl(var(--destructive-foreground));
-}
+---
+## 🛠️ 工具类
+### 布局工具类
+```html
+<!-- 水平居中 -->
+<div class="flex-center">
+  <div>居中内容</div>
+</div>
+<!-- 垂直居中 -->
+<div class="flex-col-center">
+  <div>垂直居中</div>
+</div>
+<!-- 卡片容器 -->
+<div class="card-box p-6">
+  <h3>卡片标题</h3>
+  <p>卡片内容</p>
+</div>
+<!-- 轮廓框 -->
+<div class="outline-box">
+  可点击的框
+</div>
+<div class="outline-box outline-box-active">
+  激活状态的框
+</div>
 ```
-### 颜色值格式
+### 链接样式
-所有颜色变量使用 HSL 格式（色相 饱和度 亮度），需要配合 `hsl()` 函数使用：
+```html
+<a href="#" class="admin-link">链接文本</a>
+```
-```css
-/* ✅ 正确 */
-background-color: hsl(var(--primary));
+---
-/* ❌ 错误 */
-background-color: var(--primary);
+## 📱 响应式设计
+```html
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+  <div class="card-box p-4">卡片 1</div>
+  <div class="card-box p-4">卡片 2</div>
+  <div class="card-box p-4">卡片 3</div>
+</div>
 ```
-### 透明度支持
+---
-可以通过 HSL 的第四个参数添加透明度：
+## 🎭 特殊模式
-```css
-/* 50% 透明度的主题色 */
-background-color: hsl(var(--primary) / 0.5);
+### 反色模式
-/* 20% 透明度的边框色 */
-border-color: hsl(var(--border) / 0.2);
+```html
+<html class="invert-mode">
+  <body>所有颜色反转</body>
+</html>
 ```
-## 变量分类
+### 灰度模式
-### 基础颜色
-- `--background` / `--background-deep` - 背景色
-- `--foreground` - 前景色（文字）
-- `--border` - 边框色
+```html
+<html class="grayscale-mode">
+  <body>所有颜色变为灰度</body>
+</html>
+```
-### 组件颜色
-- `--card` - 卡片背景
-- `--popover` - 弹出层背景
-- `--input` - 输入框边框
-- `--muted` - 柔和背景
+---
-### 语义颜色
-- `--primary` - 主题色（品牌色）
-- `--secondary` - 次要色
-- `--accent` - 强调色（悬停效果）
-- `--destructive` - 危险操作（删除、警告）
-- `--success` - 成功提示
-- `--warning` - 警告提示
-- `--info` - 信息提示
-### 布局组件
-- `--sidebar` - 侧边栏背景
-- `--header` - 头部背景
-- `--menu` - 菜单背景
-### 其他
-- `--radius` - 圆角大小
-- `--ring` - 焦点环颜色
-- `--overlay` - 遮罩颜色
-- `--font-size-base` - 基础字体大小
-## 最佳实践
-1. **始终使用语义化变量**
-   ```css
-   /* ✅ 推荐 */
-   color: hsl(var(--foreground));
-   /* ❌ 不推荐 */
-   color: #000000;
-   ```
-2. **为不同状态使用对应的颜色**
-   ```css
-   .button-primary { background: hsl(var(--primary)); }
-   .button-danger { background: hsl(var(--destructive)); }
-   .button-success { background: hsl(var(--success)); }
-   ```
-3. **利用前景色变量确保对比度**
-   ```css
-   .card {
-     background: hsl(var(--card));
-     color: hsl(var(--card-foreground));
-   }
-   ```
-4. **使用 accent 系列实现悬停效果**
-   ```css
-   .menu-item {
-     background: transparent;
-   }
-   .menu-item:hover {
-     background: hsl(var(--accent));
-     color: hsl(var(--accent-foreground));
-   }
-   ```
-## 扩展自定义主题
-如需添加新的主题变体，在对应的 CSS 文件中添加：
+## ⚙️ Tailwind CSS 配置
-```css
-/* light.css */
-[data-theme='my-theme'] {
-  --primary: 200 100% 50%;
-  --primary-foreground: 0 0% 100%;
-  /* ... 其他变量 */
-}
+如果你的项目需要扩展 Tailwind 配置：
-/* dark.css */
-.dark[data-theme='my-theme'] {
-  --primary: 200 80% 40%;
-  --primary-foreground: 0 0% 100%;
-  /* ... 其他变量 */
-}
+```typescript
+// tailwind.config.ts
+import designConfig from '@admin-core/design/tailwind.config'
+import type { Config } from 'tailwindcss'
+export default {
+  ...designConfig,
+  content: [
+    ...designConfig.content,
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+  ],
+  theme: {
+    ...designConfig.theme,
+    extend: {
+      ...designConfig.theme.extend,
+      // 你的自定义扩展
+      colors: {
+        brand: '#FF6B6B',
+      },
+    },
+  },
+} satisfies Config
+```
+---
+## 📚 API 参考
+### 主题管理
+```typescript
+// Composable
+const {
+  mode,           // 当前模式
+  variant,        // 当前主题变体
+  isDark,         // 是否暗色模式
+  setMode,        // 设置模式
+  setVariant,     // 设置主题变体
+  toggleDarkMode, // 切换暗色模式
+  getCurrentThemeMetadata, // 获取当前主题元数据
+} = useTheme()
+// 工具函数
+initTheme()                    // 初始化主题
+applyTheme(config, options)    // 应用主题配置
+detectSystemTheme()            // 检测系统主题
+watchSystemTheme(callback)     // 监听系统主题变化
+```
+### 自定义主题
+```typescript
+// 智能配色
+applyThemeFromPrimary(color, mode?, persist?)
+// 完全自定义
+applyCustomTheme(colors, persist?)
+// 清除自定义主题
+clearCustomTheme()
+// 恢复自定义主题
+restoreCustomTheme()
+```
+### 颜色工具
+```typescript
+// 获取颜色
+getHSLColor(token)      // 获取 HSL 格式
+getRGBColor(token)      // 获取 RGB 格式
+getHexColor(token)      // 获取 HEX 格式
+// 批量获取
+getThemeColors()        // 所有颜色（HSL）
+getThemeColorsRGB()     // 所有颜色（RGB）
+getThemeColorsHex()     // 所有颜色（HEX）
+// 颜色转换
+hexToHSL(hex)          // HEX 转 HSL
+rgbToHSL(r, g, b)      // RGB 转 HSL
+hslToRgb(hsl)          // HSL 转 RGB
+hslToHex(hsl)          // HSL 转 HEX
 ```
+### 国际化
+```typescript
+setLocale(locale)              // 设置语言
+getLocale()                    // 获取当前语言
+getThemeName(themeId)          // 获取主题名称
+getThemeDescription(themeId)   // 获取主题描述
+getThemeMetadata()             // 获取所有主题元数据
+getTranslations()              // 获取当前语言的翻译
+```
+---
+## 🌐 浏览器兼容性
+- Chrome >= 90
+- Firefox >= 88
+- Safari >= 14
+- Edge >= 90
 ---
-## 构建输出
+## 📦 导出说明
+```typescript
+// 主入口
+import '@admin-core/design'
+// 只导入 CSS
+import '@admin-core/design/css'
-- `dist/index.js` - ESM 格式（已压缩）
-- `dist/index.cjs` - CommonJS 格式（已压缩）
-- `dist/index.umd.js` - UMD 格式，用于 CDN（已压缩）
-- `dist/index.d.ts` - TypeScript 类型定义
-- `dist/style.css` - 合并的样式文件（42.20 kB，gzip: 9.01 kB）
+// 导入主题系统
+import { useTheme, setLocale } from '@admin-core/design'
-## 技术栈
+// 导入集成文件
+import '@admin-core/design/css/integrations/element-plus.css'
+import '@admin-core/design/css/integrations/ant-design-vue.css'
+import '@admin-core/design/css/integrations/naive-ui.css'
+import '@admin-core/design/css/integrations/arco-design.css'
-- **构建工具**: Vite 7.x
-- **样式**: Tailwind CSS v4 + 原生 CSS
-- **类型定义**: TypeScript 5.x
+// 导入 Tailwind 配置
+import designConfig from '@admin-core/design/tailwind.config'
+```
+---
+## 🤝 贡献
+欢迎贡献代码、报告问题或提出建议！
+---
+## 📄 许可证
+MIT License © 2024 [Admin Kit Team](https://github.com/jackBoVip/admin-kit)
+---
-## License
+## 🔗 相关链接
-MIT
+- [GitHub 仓库](https://github.com/jackBoVip/admin-kit)
+- [问题反馈](https://github.com/jackBoVip/admin-kit/issues)
+- [更新日志](./CHANGELOG.md)
+- [Tailwind CSS 文档](https://tailwindcss.com/docs)