乌托邦设计系统

现代 Vue 3设计系统 具有多品牌主题,设计符号,以及30+生产准备组件. 建造时间 俱乐部 打开 礼物 带有完整的类型脚本支持.

* 特性

• 🧩 30+ Vue 3 组件 - 原子、分子、有机体、布局
• 🎨 多品牌主题 - 职业和礼品品牌俱乐部
• 🌙 暗模式支持 - 所有主题的浅暗变体
• 🎯 设计托肯斯 - 用样式词典生成的 CSS 变量
• 📱 响应 - 具有分点公用事业的移动第一办法
• ♿ 可访问 - WCAG 2.1 AA合规组件
• 🔧 类型脚本 - 包括全部类型定义
• 🚀 可摇动的树 - 只导入你需要的东西
• 📦 0 配置 - 工作出来的盒子

QQ 快速启动

安装

npm install @club-employes/utopia

基本用途

<template>
  <ThemeProvider :theme="clubEmployesLight">
    <div class="app">
      <Button variant="primary" size="medium" @click="handleClick">
        Get Started
      </Button>
      
      <Card variant="elevated">
        <Icon name="heart" size="large" />
        <h2>Welcome to Utopia</h2>
        <p>Modern design system for Vue 3</p>
      </Card>
    </div>
  </ThemeProvider>
</template>

<script setup lang="ts">
import { 
  Button, 
  Card, 
  Icon, 
  ThemeProvider, 
  clubEmployesLight 
} from '@club-employes/utopia'
import '@club-employes/utopia/styles'

const handleClick = () => {
  console.log('Button clicked!')
}
</script>

导入样式

// Import all styles (recommended)
import '@club-employes/utopia/styles'

// Or import specific theme tokens
import '@club-employes/utopia/tokens/club-employes/light'
import '@club-employes/utopia/tokens/gifteo/dark'

QQ 可用主题

import { 
  clubEmployesLight,   // Club Employés light theme
  clubEmployesDark,    // Club Employés dark theme
  gifteoLight,         // Gifteo light theme
  gifteoDark           // Gifteo dark theme
} from '@club-employes/utopia'

组件

原子( 建筑块)

• 按钮 - 有变体的互动按钮
• 图标 - 1200+Lucide图标
• 标记 - 多品牌标志
• 徽标 - 状况指标
• 纸牌 - 内容容器
• 投入 - 表格控制器
• 复选框 - 布尔输入
• 切换 - 切换控制

分子 (简单组合)

• 搜索框 - 用图标搜索输入
• 输入选择 - 随着过滤而下降

有机物(复合成分)

• 数据表 - 高级数据表
• 页眉 - 导航头
• 菜单 - 侧边栏导航

布局( 文件结构)

• 默认拉尤特 - 主要应用程序布局

* 可编译

import { useTheme, useFavicon, useScrollShadows } from '@club-employes/utopia'

// Theme management
const { theme, setTheme } = useTheme()
setTheme('club-employes', 'dark')

// Dynamic favicon
const { setFavicon } = useFavicon()

// Scroll shadows
const { shadowTop, shadowBottom } = useScrollShadows(containerRef)

设计托肯斯

所有组件都使用 CSS 自定义属性( 设计符号 ):

.my-component {
  /* Colors */
  background: var(--utopia-color-surface);
  color: var(--utopia-color-text-primary);
  
  /* Spacing */
  padding: var(--utopia-space-md);
  margin: var(--utopia-space-lg);
  
  /* Typography */
  font-family: var(--utopia-font-family);
  font-size: var(--utopia-font-size-base);
  
  /* Borders */
  border-radius: var(--utopia-radius-md);
  border: 1px solid var(--utopia-color-border);
}

主题切换

<template>
  <div>
    <ThemeProvider :theme="currentTheme">
      <Button @click="toggleTheme">
        Switch to {{ isDark ? 'Light' : 'Dark' }} Mode
      </Button>
      <YourApp />
    </ThemeProvider>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { 
  ThemeProvider, 
  clubEmployesLight, 
  clubEmployesDark 
} from '@club-employes/utopia'

const isDark = ref(false)
const currentTheme = computed(() => 
  isDark.value ? clubEmployesDark : clubEmployesLight
)

const toggleTheme = () => {
  isDark.value = !isDark.value
}
</script>

基于域的主题初始化( 无 FOUC)

对于具有不同域的多租户应用程序,您可以初始化主题 在此之前 Vue 挂载来防止未设定内容的闪光 :

// main.ts
import { createApp } from 'vue'
import { initializeTheme } from '@club-employes/utopia'
import '@club-employes/utopia/styles'
import App from './App.vue'

// Detect theme from domain
function getThemeFromDomain(): string {
  const hostname = window.location.hostname
  
  if (hostname.includes('gifteo')) {
    return 'gifteo-light'
  }
  
  if (hostname.includes('club-employes')) {
    return 'club-employes-light'
  }
  
  return 'club-employes-light' // Default
}

// Initialize theme BEFORE creating Vue app
async function bootstrap() {
  const themeName = getThemeFromDomain()
  
  try {
    await initializeTheme(themeName)
    console.log('✅ Theme initialized:', themeName)
  } catch (error) {
    console.error('❌ Failed to initialize theme:', error)
  }
  
  // Create Vue app (no FOUC!)
  const app = createApp(App)
  app.mount('#app')
}

bootstrap()

📖 见完整文件 以先进的模式和实例.

QQ 软件包出口

// Main export
import { Button, Icon, ThemeProvider } from '@club-employes/utopia'

// Styles
import '@club-employes/utopia/styles'

// Specific theme tokens
import '@club-employes/utopia/tokens/club-employes/light'
import '@club-employes/utopia/tokens/club-employes/dark'
import '@club-employes/utopia/tokens/gifteo/light'
import '@club-employes/utopia/tokens/gifteo/dark'

// Icons list (JSON)
import iconsList from '@club-employes/utopia/icons'

高级用途

自定义主题配置

<script setup lang="ts">
import { ThemeProvider } from '@club-employes/utopia'

const customTheme = {
  colors: {
    primary: '#your-brand-color',
    secondary: '#your-secondary-color'
  },
  // ... other theme properties
}
</script>

树摇

// Import only what you need
import { Button } from '@club-employes/utopia/components/Button'
import { Icon } from '@club-employes/utopia/components/Icon'

响应设计

组件为移动第一并默认响应:

<template>
  <Button 
    size="small"        <!-- Mobile -->
    size-md="medium"    <!-- Tablet -->
    size-lg="large"     <!-- Desktop -->
  >
    Responsive Button
  </Button>
</template>

* 无障碍

所有组成部分都遵循《世界保护准则》2.1 AA准则:

• 键盘导航
• QQ 屏幕阅读器支持
• 高对比度模式
• QQ 重点管理
• ARIA 属性

QQ 类型脚本支持

全部类型脚本定义为 自动生成 从源代码通过 vite-plugin-dts数字 :

import type { ButtonProps, IconProps, ThemeConfig } from '@club-employes/utopia'

const buttonProps: ButtonProps = {
  variant: 'primary',
  size: 'medium',
  disabled: false
}

如何运作:

• * 组件道具在本地定义 types.ts 文件(真伪来源)
• QQ 类型自动编译到 dist/index.d.ts 构建时
• QQ 完全 IntelliSense 和自动补全支持
• * 不需要手动类型定义

QQ 套装大小

• 完整软件包:~150KB(小于+克齐普)
• 单一构成部分:~5~15KB (树上刮花)
• 仅指针:~10KB(CSS变量)

QQ 浏览器支持

• ✅(Chrome 90+)
• * 火狐88+
• 萨法里14+
• • 边缘90+

文档和资源

• 📖 完整文档 - 互动实例和指南
• 🐙 GitHub 仓库 - 源代码和问题
• 📦 国家防范机制一揽子计划 - 包裹细节

捐款

我们欢迎捐款! 请看我们的 贡献指南。 。 。 .

1. 叉子存储器
2. 创建特性分支
3. 做你的改变
4. 添加测试和文件
5. 提交拉动请求

许可证

麻省理工学院 俱乐部