@leapfuture-fastui/theme

FastUI 主题系统 - 为 FastUI 组件库提供设计令牌和样式

📦 安装

# npm
npm install @leapfuture-fastui/theme

# pnpm
pnpm add @leapfuture-fastui/theme

# yarn
yarn add @leapfuture-fastui/theme

🚀 快速开始

基础使用

<template>
  <div class="app">
    <!-- 你的应用内容 -->
  </div>
</template>

<script setup lang="ts">
// 导入主题样式
import '@leapfuture-fastui/theme/dist/index.css'
</script>

配合 Tailwind CSS 使用

如果你的项目使用 Tailwind CSS，可以直接引入源文件：

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{vue,js,ts,jsx,tsx}',
    './node_modules/@leapfuture-fastui/**/*.{vue,js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {
      // 使用 FastUI 的设计令牌扩展主题
    }
  },
  plugins: []
}

<script setup lang="ts">
// 导入 Tailwind 基础样式和 FastUI 主题
import '@leapfuture-fastui/theme/src/index.css'
</script>

🎨 设计系统

色彩系统

FastUI 采用基于 HSL 色彩空间的语义化色彩系统：

主色调 (Primary)

/* 主色调 - 品牌蓝 */
--primary-50: 240 100% 97%;
--primary-100: 240 100% 94%;
--primary-200: 240 100% 88%;
--primary-300: 240 100% 80%;
--primary-400: 240 100% 70%;
--primary-500: 240 100% 60%;   /* 主色 */
--primary-600: 240 100% 52%;
--primary-700: 240 100% 44%;
--primary-800: 240 100% 36%;
--primary-900: 240 100% 28%;
--primary-950: 240 100% 20%;

强调色 (Accent)

/* 强调色 - 能量橙 */
--accent-50: 32 100% 97%;
--accent-500: 32 100% 60%;    /* 强调色 */
--accent-950: 32 100% 20%;

语义色彩

/* 成功 */
--success: 145 63% 65%;

/* 警告 */
--warning: 40 84% 75%;

/* 危险 */
--danger: 0 84% 60%;

/* 信息 */
--info: 200 84% 70%;

中性色

/* 灰色系 */
--gray-50: 0 0% 98%;
--gray-100: 0 0% 96%;
--gray-500: 0 0% 60%;
--gray-900: 0 0% 15%;
--gray-950: 0 0% 8%;

主题变体

亮色主题 (Light)

:root {
  --bg-primary: var(--gray-50);
  --bg-secondary: var(--gray-100);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --border-color: var(--gray-300);
}

暗色主题 (Dark)

.dark {
  --bg-primary: var(--gray-950);
  --bg-secondary: var(--gray-900);
  --text-primary: 0 0% 87%;
  --text-secondary: 0 0% 60%;
  --border-color: var(--gray-700);
}

🎯 组件样式

按钮样式

/* 按钮基础样式 */
.btn {
  @apply inline-flex items-center justify-center whitespace-nowrap rounded-md 
         text-sm font-medium transition-colors focus-visible:outline-none 
         focus-visible:ring-2 focus-visible:ring-primary-500 
         disabled:pointer-events-none disabled:opacity-50;
}

/* 尺寸变体 */
.btn-small {
  @apply h-8 px-3 text-xs;
}

.btn-default {
  @apply h-10 px-6;
}

.btn-large {
  @apply h-12 px-8 text-base;
}

/* 颜色变体 */
.btn-primary {
  @apply bg-primary-500 hover:bg-primary-600 text-white shadow-sm;
}

.btn-secondary {
  @apply bg-gray-100 text-gray-700 hover:bg-gray-200 
         dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700;
}

.btn-outline {
  @apply border-2 border-primary-500 text-primary-500 
         hover:bg-primary-50 dark:hover:bg-primary-500/10;
}

输入框样式

.input {
  @apply w-full rounded-lg border border-gray-300 bg-white px-4 py-2 
         text-gray-900 placeholder-gray-400 transition-all duration-200
         focus:border-transparent focus:outline-none focus:ring-2 
         focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 
         dark:text-gray-100 dark:placeholder-gray-500;
}

卡片样式

.card {
  @apply rounded-xl border border-gray-200 bg-white shadow-sm 
         transition-shadow duration-200 hover:shadow-md 
         dark:border-gray-700 dark:bg-gray-900;
}

.card-header {
  @apply border-b border-gray-200 px-6 py-4 dark:border-gray-700;
}

.card-body {
  @apply p-6;
}

.card-footer {
  @apply border-t border-gray-200 bg-gray-50 px-6 py-4 
         dark:border-gray-700 dark:bg-gray-800;
}

标签样式

.tag {
  @apply inline-flex items-center rounded-full px-3 py-1 text-sm 
         font-medium transition-all duration-200;
}

.tag-primary {
  @apply bg-primary-100 text-primary-700 
         dark:bg-primary-500/20 dark:text-primary-400;
}

.tag-success {
  @apply bg-green-100 text-green-700 
         dark:bg-green-500/20 dark:text-green-400;
}

.tag-warning {
  @apply bg-yellow-100 text-yellow-700 
         dark:bg-yellow-500/20 dark:text-yellow-400;
}

.tag-danger {
  @apply bg-red-100 text-red-700 
         dark:bg-red-500/20 dark:text-red-400;
}

🛠 自定义主题

覆盖 CSS 变量

你可以通过覆盖 CSS 变量来自定义主题：

:root {
  /* 自定义主色调 */
  --primary-500: 220 100% 50%;  /* 自定义蓝色 */
  
  /* 自定义强调色 */
  --accent-500: 350 100% 60%;   /* 自定义红色 */
  
  /* 自定义语义色彩 */
  --success: 120 50% 50%;       /* 自定义绿色 */
}

扩展 Tailwind 配置

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        // 使用 FastUI 的设计令牌
        primary: {
          50: 'hsl(var(--primary-50))',
          500: 'hsl(var(--primary-500))',
          900: 'hsl(var(--primary-900))',
        },
        // 添加自定义颜色
        brand: {
          50: '#f0f9ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        }
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
      borderRadius: {
        'custom': '12px',
      }
    }
  }
}

创建自定义组件样式

/* 自定义组件样式 */
.my-custom-button {
  @apply btn btn-primary;
  border-radius: 20px;
  font-weight: 600;
}

.my-custom-card {
  @apply card;
  border: 2px solid hsl(var(--primary-200));
  box-shadow: 0 8px 32px hsl(var(--primary-500) / 0.1);
}

📱 响应式设计

FastUI 主题包含响应式断点和工具类：

/* 响应式断点 */
@media (min-width: 640px)  { /* sm */ }
@media (min-width: 768px)  { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }
@media (min-width: 1536px) { /* 2xl */ }

🎭 动画系统

预定义动画

/* 淡入动画 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 滑入动画 */
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

/* 旋转动画 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 使用动画 */
.animate-fade-in { animation: fadeIn 300ms ease-out; }
.animate-slide-in { animation: slideIn 300ms ease-out; }
.animate-spin { animation: spin 1s linear infinite; }

过渡效果

/* 通用过渡 */
.transition-colors { transition: color 150ms ease-in-out; }
.transition-transform { transition: transform 150ms ease-in-out; }

/* 悬停效果 */
.hover-lift {
  @apply transition-transform duration-200 ease-out hover:-translate-y-1;
}

/* 点击反馈 */
.click-scale {
  @apply transition-transform duration-150 active:scale-95;
}

🎪 工具类

滚动条样式

.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--gray-400)) transparent;
}

.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: hsl(var(--gray-400));
  border-radius: 3px;
}

聚焦样式

.focus-visible {
  @apply outline-none ring-2 ring-primary-500 ring-offset-2 
         dark:ring-offset-gray-900;
}

🔧 开发

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建样式
pnpm build

# 构建设计令牌
pnpm build:tokens

📁 文件结构

packages/theme/
├── src/
│   ├── index.css           # 主样式文件
│   ├── tokens/             # 设计令牌
│   │   └── index.ts
│   └── styles/             # 样式模块
├── dist/
│   ├── index.css          # 编译后的样式
│   ├── variables.css      # CSS 变量
│   └── tokens.js          # JS 设计令牌
└── package.json

📄 许可证

MIT License