zhongwei/gh-vuer-ai-vuer-skill-marketplace-skills-vuer-uikit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Zhongwei Li
2025-11-30 09:05:04 +08:00
commit 7afdd6601b
69 changed files with 9552 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
docs/style-guide/colors.md Normal file
View File

@@ -0,0 +1,92 @@
# Color Guidelines
This documentation outlines the color system utilized in the VUER UI Kit.
## Brand Colors
| Variable | Dark Mode | Light Mode | Liquid Dark | Liquid Light |
|----------|-----------|-----------|-------------|--------------|
| `--brand-primary` | rgba(0, 123, 255, 1) | rgba(0, 123, 255, 1) | rgba(0, 123, 255, 1) | rgba(0, 123, 255, 1) |
| `--brand-hover` | rgba(41, 151, 255, 1) | rgba(41, 151, 255, 1) | rgba(41, 151, 255, 1) | rgba(41, 151, 255, 1) |
| `--brand-pressed` | rgba(0, 74, 179, 1) | rgba(0, 74, 179, 1) | rgba(0, 74, 179, 1) | rgba(0, 74, 179, 1) |
## Background Colors
| Variable | Dark Mode | Light Mode | Liquid Dark | Liquid Light |
|----------|-----------|-----------|-------------|--------------|
| `--bg-primary` | rgba(29, 29, 30, 1) | rgba(255, 255, 255, 1) | rgba(29, 29, 30, 1) | rgba(255, 255, 255, 1) |
| `--bg-secondary` | rgba(90, 93, 98, 0.3) | rgba(227, 230, 235, 0.6) | rgba(90, 93, 98, 0.3) | rgba(227, 230, 235, 0.6) |
| `--bg-tertiary` | rgba(75, 77, 83, 1) | rgba(220, 222, 229, 1) | rgba(75, 77, 83, 1) | rgba(220, 222, 229, 1) |
| `--bg-quaternary` | rgba(87, 90, 96, 1) | rgba(202, 206, 217, 1) | rgba(87, 90, 96, 1) | rgba(202, 206, 217, 1) |
| `--bg-mask` | rgba(56, 57, 59, 0.5) | rgba(56, 57, 59, 0.5) | rgba(56, 57, 59, 0.5) | rgba(246, 247, 248, 0.8) |
## Text Colors
| Variable | Dark Mode | Light Mode | Liquid Dark | Liquid Light |
|----------|-----------|-----------|-------------|--------------|
| `--text-highlight` | rgba(255, 255, 255, 1) | rgba(0, 0, 0, 1) | rgba(255, 255, 255, 1) | rgba(0, 0, 0, 1) |
| `--text-primary` | rgba(220, 222, 229, 1) | rgba(52, 53, 56, 1) | rgba(220, 222, 229, 1) | rgba(52, 53, 56, 1) |
| `--text-secondary` | rgba(147, 150, 159, 1) | rgba(87, 90, 96, 1) | rgba(147, 150, 159, 1) | rgba(87, 90, 96, 1) |
| `--text-tertiary` | rgba(121, 124, 131, 1) | rgba(147, 150, 159, 1) | rgba(121, 124, 131, 1) | rgba(147, 150, 159, 1) |
| `--text-withbg` | rgba(255, 255, 255, 1) | rgba(255, 255, 255, 1) | rgba(255, 255, 255, 1) | rgba(255, 255, 255, 1) |
## Icon Colors
| Variable | Dark Mode | Light Mode | Liquid Dark | Liquid Light |
|----------|-----------|-----------|-------------|--------------|
| `--icon-highlight` | rgba(255, 255, 255, 1) | rgba(0, 0, 0, 1) | rgba(255, 255, 255, 1) | rgba(0, 0, 0, 1) |
| `--icon-primary` | rgba(220, 222, 229, 1) | rgba(75, 77, 83, 1) | rgba(220, 222, 229, 1) | rgba(75, 77, 83, 1) |
| `--icon-secondary` | rgba(147, 150, 159, 1) | rgba(121, 124, 131, 1) | rgba(147, 150, 159, 1) | rgba(121, 124, 131, 1) |
| `--icon-tertiary` | rgba(121, 124, 131, 1) | rgba(181, 184, 196, 1) | rgba(121, 124, 131, 1) | rgba(181, 184, 196, 1) |
| `--icon-withbg` | rgba(255, 255, 255, 1) | rgba(255, 255, 255, 1) | rgba(255, 255, 255, 1) | rgba(255, 255, 255, 1) |
## Danger Colors
| Variable | Dark Mode | Light Mode | Liquid Dark | Liquid Light |
|----------|-----------|-----------|-------------|--------------|
| `--danger-primary` | rgba(255, 69, 91, 1) | rgba(255, 69, 91, 1) | rgba(255, 69, 91, 1) | rgba(255, 69, 91, 1) |
| `--danger-secondary` | rgba(255, 150, 156, 1) | rgba(255, 150, 156, 1) | rgba(255, 150, 156, 1) | rgba(255, 150, 156, 1) |
| `--danger-tertiary` | rgba(179, 30, 58, 1) | rgba(179, 30, 58, 1) | rgba(179, 30, 58, 1) | rgba(179, 30, 58, 1) |
## Accent Colors
| Variable | Dark Mode | Light Mode | Liquid Dark | Liquid Light |
|----------|-----------|-----------|-------------|--------------|
| `--accent-warning` | rgba(251, 187, 49, 1) | rgba(251, 187, 49, 1) | rgba(251, 187, 49, 1) | rgba(251, 187, 49, 1) |
| `--accent-success` | rgba(84, 190, 125, 1) | rgba(84, 190, 125, 1) | rgba(84, 190, 125, 1) | rgba(84, 190, 125, 1) |
## Line Colors
| Variable | Dark Mode | Light Mode | Liquid Dark | Liquid Light |
|----------|-----------|-----------|-------------|--------------|
| `--line-primary` | rgba(75, 77, 83, 1) | rgba(220, 222, 229, 1) | rgba(75, 77, 83, 0.5) | rgba(173, 176, 183, 0.6) |
| `--line-secondary` | rgba(52, 53, 56, 1) | rgba(245, 245, 245, 1) | rgba(52, 53, 56, 1) | rgba(245, 245, 245, 1) |
## Shadow Colors
| Variable | Dark Mode | Light Mode | Liquid Dark | Liquid Light |
|----------|-----------|-----------|-------------|--------------|
| `--shadow-primary` | rgba(0, 0, 0, 0.6) | rgba(0, 0, 0, 0.1) | rgba(0, 0, 0, 0.6) | rgba(0, 0, 0, 0.1) |
| `--shadow-secondary` | rgba(0, 0, 0, 0.2) | rgba(0, 0, 0, 0.06) | rgba(0, 0, 0, 0.2) | rgba(0, 0, 0, 0.06) |
## Alternative Colors
| Variable | Dark Mode | Light Mode | Liquid Dark | Liquid Light |
|----------|-----------|-----------|-------------|--------------|
| `--alt-primary` | rgba(52, 53, 56, 1) | rgba(245, 245, 245, 1) | rgba(52, 53, 56, 1) | rgba(245, 245, 245, 1) |
| `--alt-hover` | rgba(87, 90, 96, 1) | rgba(220, 222, 229, 1) | rgba(87, 90, 96, 1) | rgba(220, 222, 229, 1) |
| `--alt-pressed` | rgba(75, 77, 83, 1) | rgba(245, 245, 245, 1) | rgba(75, 77, 83, 1) | rgba(245, 245, 245, 1) |
## Group Colors
| Variable | Dark Mode | Light Mode | Liquid Dark | Liquid Light |
|----------|-----------|-----------|-------------|--------------|
| `--group-primary` | rgba(0, 0, 0, 1) | rgba(255, 255, 255, 1) | rgba(255, 255, 255, 1) | rgba(255, 255, 255, 1) |
| `--group-hover` | rgba(52, 53, 56, 1) | rgba(245, 245, 245, 1) | rgba(52, 53, 56, 1) | rgba(245, 245, 245, 1) |
| `--group-pressed` | rgba(29, 29, 30, 1) | rgba(220, 222, 229, 1) | rgba(220, 222, 229, 1) | rgba(220, 222, 229, 1) |
## Select Colors
| Variable | Dark Mode | Light Mode | Liquid Dark | Liquid Light |
|----------|-----------|-----------|-------------|--------------|
| `--select-secondary` | rgba(56, 57, 59, 0.5) | rgba(227, 230, 235, 0.6) | rgba(56, 57, 59, 0.5) | rgba(227, 230, 235, 0.6) |

26
docs/style-guide/font.md Normal file
View File

@@ -0,0 +1,26 @@
# Font Style Guide
## Font Family
The design system uses **Inter** as its typeface. This is a freely available font from Google Fonts optimized for on-screen readability.
## Typography Scale
The following table documents the complete font sizing system used throughout the Vuer UIKit:
| Style Name | Size (px) | Line Height | Weight |
|---|---|---|---|
| text-uk-h1 | 30 | 36 | 400 |
| text-uk-h2 | 24 | 32 | 400 |
| text-uk-h3 | 20 | 28 | 400 |
| text-uk-lg | 16 | 24 | 400 |
| text-uk-md | 14 | 20 | 400 |
| text-uk-subtitle | 13 | 18 | 400 |
| text-uk-sm | 12 | 16 | 400 |
| text-uk-xs | 11 | 14 | 400 |
| text-uk-xxs | 10 | 12 | 400 |
| text-uk-hint | 10 | 12 | 400 |
## Key Information
All typography styles utilize the Inter typeface, with measurements specified in pixels. Font weights remain consistent at 400 (regular) across all size variants. Line heights are provided as both variable names and pixel values for implementation flexibility.

70
docs/style-guide/icons.md Normal file
View File

@@ -0,0 +1,70 @@
# Icons Style Guide
## Overview
The VUER UI Kit utilizes Lucide icons as its foundational icon system, providing a "comprehensive collection of beautifully crafted, customizable icons that maintain consistency" across applications.
## Icon Sizing Guidelines
| Size | Use Case | Description |
|------|----------|-------------|
| 16px | Dense interfaces | Compact layout icons |
| 20px | Default UI | Standard element sizing |
| 24px | Buttons/Actions | Primary action buttons |
| 32px | Emphasis | Large touch target icons |
## Color Application
| Type | Usage | Application |
|------|-------|-------------|
| Current Color | Default | Inherits parent text color |
| Gray Scale | Secondary | Disabled states and subtle elements |
| Accent Colors | Emphasis | Actions and highlights (use sparingly) |
## Implementation Guidelines
**Best Practices:**
- Maintain consistent sizing within interface sections
- Scale proportionally when resizing
- Ensure minimum 44px touch targets for mobile devices
### Stroke Width Options
| Width | Usage |
|-------|-------|
| 1.5 | Default |
| 1 | Light |
| 2 | Bold |
## Code Examples
**Standard Usage:**
```javascript
import { ChevronUp, Plus, Search } from 'lucide-react';
<ChevronUp size={24} strokeWidth={1.5} />
```
**Custom Styling:**
```javascript
<Plus
size={20}
strokeWidth={2}
className="text-blue-500 hover:text-blue-700"
/>
```
## Accessibility
Always provide descriptive labels for icon-only buttons:
```javascript
<button aria-label="Delete item">
<Trash size={20} />
</button>
```
Hide purely decorative icons from screen readers using `aria-hidden="true"`.
## Responsive Implementation
Adjust sizes based on viewport dimensions for optimal display across devices.

30
docs/style-guide/layout.md Normal file
View File

@@ -0,0 +1,30 @@
# Layout Guidelines
This section presents the design tokens used throughout the VUER UI Kit, focusing on spacing and border radius values.
## Spacing Scale
The spacing system uses a 4px base unit to ensure consistent spacing across the interface.
| Variable | Value |
|----------|-------|
| `--spacing-xxs` | 2px |
| `--spacing-xs` | 4px |
| `--spacing-sm` | 6px |
| `--spacing-md` | 8px |
| `--spacing-lg` | 12px |
| `--spacing-xl` | 16px |
## Border Radius Scale
The border radius system provides standardized rounded corners for components throughout the design system.
| Variable | Value |
|----------|-------|
| `--radius-uk-xs` | 4px |
| `--radius-uk-sm` | 6px |
| `--radius-uk-md` | 8px |
| `--radius-uk-lg` | 12px |
| `--radius-uk-xl` | 16px |
These design tokens serve as foundational building blocks for creating visual consistency and maintaining rhythm within VUER UI Kit components.