mirror of
https://github.com/Afilmory/afilmory
synced 2026-04-24 23:05:05 +00:00
chore: update documentation and configuration file
This commit is contained in:
Innei
@@ -67,4 +67,4 @@
|
||||
"typescript-eslint": "^8.46.4",
|
||||
"vite": "^7.2.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -296,4 +296,4 @@
|
||||
"order": "90"
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
@@ -6,18 +6,18 @@
|
||||
|
||||
```tsx
|
||||
// ✅ 推荐：使用语义化 token
|
||||
bg - background // 主背景
|
||||
bg - background - secondary // 次级背景
|
||||
bg - fill // 填充色
|
||||
bg - fill - secondary // 次级填充
|
||||
bg - material - medium // 材质：中等透明度
|
||||
bg - accent // 强调色
|
||||
bg-background // 主背景
|
||||
bg-background-secondary // 次级背景
|
||||
bg-fill // 填充色
|
||||
bg-fill-secondary // 次级填充
|
||||
bg-material-medium // 材质：中等透明度
|
||||
bg-accent // 强调色
|
||||
|
||||
text - text // 主文本
|
||||
text - text - secondary // 次级文本
|
||||
text - text - tertiary // 三级文本（最淡）
|
||||
text-text // 主文本
|
||||
text-text-secondary // 次级文本
|
||||
text-text-tertiary // 三级文本（最淡）
|
||||
|
||||
border - border // 边框色
|
||||
border-border // 边框色
|
||||
```
|
||||
|
||||
### 自定义 Accent 混合色
|
||||
@@ -35,10 +35,10 @@ bg-accent-80 // 强烈强调色
|
||||
|
||||
```tsx
|
||||
// ❌ 不要这样
|
||||
className = 'bg-blue-500 text-white shadow-xl'
|
||||
className="bg-blue-500 text-white shadow-xl"
|
||||
|
||||
// ✅ 应该这样
|
||||
className = 'bg-accent text-background shadow-medium'
|
||||
className="bg-accent text-background shadow-medium"
|
||||
```
|
||||
|
||||
## 📐 阴影系统
|
||||
@@ -49,11 +49,11 @@ className = 'bg-accent text-background shadow-medium'
|
||||
import { shadows } from '~/lib/design-tokens'
|
||||
|
||||
// 5 个标准层级
|
||||
shadows.subtle // 轻微阴影 - 用于悬停效果
|
||||
shadows.light // 轻度阴影 - 普通卡片
|
||||
shadows.medium // 中度阴影 - 浮动面板
|
||||
shadows.strong // 强阴影 - 模态框
|
||||
shadows.heavy // 重阴影 - 全屏/Hero
|
||||
shadows.subtle // 轻微阴影 - 用于悬停效果
|
||||
shadows.light // 轻度阴影 - 普通卡片
|
||||
shadows.medium // 中度阴影 - 浮动面板
|
||||
shadows.strong // 强阴影 - 模态框
|
||||
shadows.heavy // 重阴影 - 全屏/Hero
|
||||
```
|
||||
|
||||
### 使用示例
|
||||
@@ -76,10 +76,10 @@ shadows.heavy // 重阴影 - 全屏/Hero
|
||||
```tsx
|
||||
import { radius } from '~/lib/design-tokens'
|
||||
|
||||
radius.sm // rounded-xl (12px) - 小元素
|
||||
radius.md // rounded-2xl (16px) - 按钮、输入框
|
||||
radius.lg // rounded-3xl (24px) - 卡片
|
||||
radius.xl // rounded-[28px] - 大卡片
|
||||
radius.sm // rounded-xl (12px) - 小元素
|
||||
radius.md // rounded-2xl (16px) - 按钮、输入框
|
||||
radius.lg // rounded-3xl (24px) - 卡片
|
||||
radius.xl // rounded-[28px] - 大卡片
|
||||
radius['2xl'] // rounded-[32px] - Section 容器
|
||||
radius['3xl'] // rounded-[40px] - Hero 级别
|
||||
```
|
||||
@@ -89,10 +89,10 @@ radius['3xl'] // rounded-[40px] - Hero 级别
|
||||
```tsx
|
||||
import { blur } from '~/lib/design-tokens'
|
||||
|
||||
blur.sm // backdrop-blur-sm (4px)
|
||||
blur.md // backdrop-blur-md (12px)
|
||||
blur.lg // backdrop-blur-lg (16px)
|
||||
blur.xl // backdrop-blur-xl (24px)
|
||||
blur.sm // backdrop-blur-sm (4px)
|
||||
blur.md // backdrop-blur-md (12px)
|
||||
blur.lg // backdrop-blur-lg (16px)
|
||||
blur.xl // backdrop-blur-xl (24px)
|
||||
blur['2xl'] // backdrop-blur-2xl (40px)
|
||||
blur['3xl'] // backdrop-blur-[60px]
|
||||
```
|
||||
@@ -105,10 +105,10 @@ blur['3xl'] // backdrop-blur-[60px]
|
||||
import { glassCard } from '~/lib/design-tokens'
|
||||
|
||||
// 4 种预设风格
|
||||
glassCard.default // bg-background/60 + border + backdrop-blur-xl
|
||||
glassCard.elevated // bg-background/80 + backdrop-blur-2xl (更实)
|
||||
glassCard.floating // bg-background/50 + backdrop-blur-[30px] (更透)
|
||||
glassCard.gradient // border-white/15 + backdrop-blur-2xl (配合渐变)
|
||||
glassCard.default // bg-background/60 + border + backdrop-blur-xl
|
||||
glassCard.elevated // bg-background/80 + backdrop-blur-2xl (更实)
|
||||
glassCard.floating // bg-background/50 + backdrop-blur-[30px] (更透)
|
||||
glassCard.gradient // border-white/15 + backdrop-blur-2xl (配合渐变)
|
||||
```
|
||||
|
||||
### 组合使用
|
||||
@@ -116,7 +116,12 @@ glassCard.gradient // border-white/15 + backdrop-blur-2xl (配合渐变)
|
||||
```tsx
|
||||
import { glassCard, radius, shadows } from '~/lib/design-tokens'
|
||||
|
||||
;<div className={clsxm(glassCard.floating, radius.lg, shadows.medium, 'p-6')}>
|
||||
<div className={clsxm(
|
||||
glassCard.floating,
|
||||
radius.lg,
|
||||
shadows.medium,
|
||||
'p-6'
|
||||
)}>
|
||||
内容
|
||||
</div>
|
||||
```
|
||||
@@ -126,14 +131,14 @@ import { glassCard, radius, shadows } from '~/lib/design-tokens'
|
||||
```tsx
|
||||
import { typography } from '~/lib/design-tokens'
|
||||
|
||||
typography.hero // text-4xl sm:text-5xl lg:text-6xl font-semibold
|
||||
typography.h1 // text-3xl lg:text-4xl font-semibold
|
||||
typography.h2 // text-2xl lg:text-3xl font-semibold
|
||||
typography.h3 // text-xl lg:text-2xl font-semibold
|
||||
typography.body // text-base
|
||||
typography.small // text-sm
|
||||
typography.tiny // text-xs
|
||||
typography.label // text-xs tracking-[0.3em] uppercase font-semibold
|
||||
typography.hero // text-4xl sm:text-5xl lg:text-6xl font-semibold
|
||||
typography.h1 // text-3xl lg:text-4xl font-semibold
|
||||
typography.h2 // text-2xl lg:text-3xl font-semibold
|
||||
typography.h3 // text-xl lg:text-2xl font-semibold
|
||||
typography.body // text-base
|
||||
typography.small // text-sm
|
||||
typography.tiny // text-xs
|
||||
typography.label // text-xs tracking-[0.3em] uppercase font-semibold
|
||||
```
|
||||
|
||||
### 使用示例
|
||||
@@ -153,10 +158,10 @@ typography.label // text-xs tracking-[0.3em] uppercase font-semibold
|
||||
```tsx
|
||||
import { spacing } from '~/lib/design-tokens'
|
||||
|
||||
spacing.section // space-y-20 - Section 之间
|
||||
spacing.content // space-y-12 - 内容组之间
|
||||
spacing.group // space-y-6 - 组内元素
|
||||
spacing.tight // space-y-3 - 紧密元素
|
||||
spacing.section // space-y-20 - Section 之间
|
||||
spacing.content // space-y-12 - 内容组之间
|
||||
spacing.group // space-y-6 - 组内元素
|
||||
spacing.tight // space-y-3 - 紧密元素
|
||||
```
|
||||
|
||||
## 🎯 图标容器
|
||||
@@ -195,9 +200,9 @@ transition.slow // duration-500
|
||||
```tsx
|
||||
import { hover } from '~/lib/design-tokens'
|
||||
|
||||
hover.card // border 和 bg 变化
|
||||
hover.lift // 轻微放大 + 阴影加强
|
||||
hover.glow // 发光效果
|
||||
hover.card // border 和 bg 变化
|
||||
hover.lift // 轻微放大 + 阴影加强
|
||||
hover.glow // 发光效果
|
||||
```
|
||||
|
||||
## 🧩 组件使用模式
|
||||
@@ -208,8 +213,10 @@ hover.glow // 发光效果
|
||||
import { Card } from '~/components/landing'
|
||||
import { shadows } from '~/lib/design-tokens'
|
||||
|
||||
;<Card variant="floating" size="lg" hoverable>
|
||||
<div className="flex items-center gap-3">{/* 内容 */}</div>
|
||||
<Card variant="floating" size="lg" hoverable>
|
||||
<div className="flex items-center gap-3">
|
||||
{/* 内容 */}
|
||||
</div>
|
||||
</Card>
|
||||
```
|
||||
|
||||
@@ -218,13 +225,17 @@ import { shadows } from '~/lib/design-tokens'
|
||||
```tsx
|
||||
import { spacing, typography } from '~/lib/design-tokens'
|
||||
|
||||
;<section className={spacing.content}>
|
||||
<section className={spacing.content}>
|
||||
<header className={spacing.tight}>
|
||||
<p className={clsxm(typography.label, 'text-text-secondary')}>
|
||||
Section Label
|
||||
</p>
|
||||
<h2 className={clsxm(typography.h1, 'text-white')}>主标题</h2>
|
||||
<p className="text-base text-text-secondary">描述文字</p>
|
||||
<h2 className={clsxm(typography.h1, 'text-white')}>
|
||||
主标题
|
||||
</h2>
|
||||
<p className="text-base text-text-secondary">
|
||||
描述文字
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* Section 内容 */}
|
||||
@@ -251,13 +262,7 @@ import { spacing, typography } from '~/lib/design-tokens'
|
||||
|
||||
```tsx
|
||||
import { Card } from '~/components/landing'
|
||||
import {
|
||||
shadows,
|
||||
radius,
|
||||
spacing,
|
||||
typography,
|
||||
iconBox,
|
||||
} from '~/lib/design-tokens'
|
||||
import { shadows, radius, spacing, typography, iconBox } from '~/lib/design-tokens'
|
||||
import { clsxm } from '~/lib/helper'
|
||||
|
||||
const FeatureCard = () => (
|
||||
@@ -267,15 +272,15 @@ const FeatureCard = () => (
|
||||
<i className="i-lucide-cpu size-5" />
|
||||
</span>
|
||||
<div>
|
||||
<p className={clsxm(typography.h3, 'text-white')}>性能与体验</p>
|
||||
<p className={clsxm(typography.h3, 'text-white')}>
|
||||
性能与体验
|
||||
</p>
|
||||
<p className={clsxm(typography.small, 'text-text-secondary')}>
|
||||
描述文字
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
className={clsxm(spacing.tight, typography.small, 'text-text-secondary')}
|
||||
>
|
||||
<ul className={clsxm(spacing.tight, typography.small, 'text-text-secondary')}>
|
||||
<li className="flex items-start gap-2">
|
||||
<i className="i-lucide-check size-4 text-accent" />
|
||||
<span>功能点 1</span>
|
||||
@@ -287,15 +292,15 @@ const FeatureCard = () => (
|
||||
|
||||
## 🎨 颜色使用场景指南
|
||||
|
||||
| 场景 | 推荐颜色 | 示例 |
|
||||
| -------- | --------------------------------------- | --------------------------------- |
|
||||
| 页面背景 | `bg-background` | `<div className="bg-background">` |
|
||||
| 卡片背景 | `bg-background/60` ~ `bg-background/80` | 玻璃态透明度 |
|
||||
| 按钮主色 | `bg-accent text-background` | CTA 按钮 |
|
||||
| 按钮次级 | `bg-fill text-text` | 次要操作 |
|
||||
| 强调文字 | `text-accent` | 重要信息 |
|
||||
| 边框 | `border-border` 或 `border-white/10` | 分隔线 |
|
||||
| 悬浮蒙层 | `bg-background/50 backdrop-blur-xl` | Modal 背景 |
|
||||
| 场景 | 推荐颜色 | 示例 |
|
||||
|------|----------|------|
|
||||
| 页面背景 | `bg-background` | `<div className="bg-background">` |
|
||||
| 卡片背景 | `bg-background/60` ~ `bg-background/80` | 玻璃态透明度 |
|
||||
| 按钮主色 | `bg-accent text-background` | CTA 按钮 |
|
||||
| 按钮次级 | `bg-fill text-text` | 次要操作 |
|
||||
| 强调文字 | `text-accent` | 重要信息 |
|
||||
| 边框 | `border-border` 或 `border-white/10` | 分隔线 |
|
||||
| 悬浮蒙层 | `bg-background/50 backdrop-blur-xl` | Modal 背景 |
|
||||
|
||||
## 🚫 反模式（避免）
|
||||
|
||||
@@ -333,3 +338,4 @@ className={glassCard.floating}
|
||||
|
||||
**最后更新**: 2025-11-11
|
||||
**维护者**: Design System Team
|
||||
|
||||
|
||||
@@ -13,8 +13,12 @@ import { Card } from './Card'
|
||||
export const MySection = () => (
|
||||
<section className={spacing.content}>
|
||||
<header className={spacing.tight}>
|
||||
<p className={clsxm(typography.label, 'text-text-secondary')}>标签</p>
|
||||
<h2 className={clsxm(typography.h1, 'text-white')}>区块标题</h2>
|
||||
<p className={clsxm(typography.label, 'text-text-secondary')}>
|
||||
标签
|
||||
</p>
|
||||
<h2 className={clsxm(typography.h1, 'text-white')}>
|
||||
区块标题
|
||||
</h2>
|
||||
</header>
|
||||
|
||||
<Card variant="floating" size="lg">
|
||||
@@ -116,8 +120,8 @@ const features = [
|
||||
```tsx
|
||||
import { FeatureCard } from '~/components/landing'
|
||||
|
||||
;<div className="grid gap-6 lg:grid-cols-2">
|
||||
{featureGroups.map((group) => (
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
{featureGroups.map(group => (
|
||||
<FeatureCard
|
||||
key={group.title}
|
||||
icon={group.icon}
|
||||
@@ -132,17 +136,17 @@ import { FeatureCard } from '~/components/landing'
|
||||
### Pattern 3: Hero 渐变背景
|
||||
|
||||
```tsx
|
||||
<div
|
||||
className={clsxm(
|
||||
'relative overflow-hidden',
|
||||
radius['3xl'],
|
||||
shadows.heavy,
|
||||
'bg-linear-to-br from-accent/40 via-purple-600/40 to-slate-900/70',
|
||||
'p-10 text-white',
|
||||
)}
|
||||
>
|
||||
<div className={clsxm(
|
||||
'relative overflow-hidden',
|
||||
radius['3xl'],
|
||||
shadows.heavy,
|
||||
'bg-linear-to-br from-accent/40 via-purple-600/40 to-slate-900/70',
|
||||
'p-10 text-white'
|
||||
)}>
|
||||
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(255,255,255,0.25),_transparent_55%)] opacity-80" />
|
||||
<div className="relative space-y-6">内容</div>
|
||||
<div className="relative space-y-6">
|
||||
内容
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@@ -151,7 +155,7 @@ import { FeatureCard } from '~/components/landing'
|
||||
```tsx
|
||||
import { MetricCard } from '~/components/landing'
|
||||
|
||||
;<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<MetricCard label="用户" value="10k+" detail="活跃用户" />
|
||||
<MetricCard label="性能" value="99.9%" detail="可用性" />
|
||||
{/* 更多指标 */}
|
||||
@@ -164,14 +168,14 @@ import { MetricCard } from '~/components/landing'
|
||||
|
||||
```tsx
|
||||
import {
|
||||
shadows, // 阴影
|
||||
radius, // 圆角
|
||||
blur, // 模糊
|
||||
glassCard, // 玻璃态卡片
|
||||
typography, // 文字层级
|
||||
spacing, // 间距
|
||||
iconBox, // 图标容器
|
||||
transition, // 过渡动画
|
||||
shadows, // 阴影
|
||||
radius, // 圆角
|
||||
blur, // 模糊
|
||||
glassCard, // 玻璃态卡片
|
||||
typography, // 文字层级
|
||||
spacing, // 间距
|
||||
iconBox, // 图标容器
|
||||
transition, // 过渡动画
|
||||
} from '~/lib/design-tokens'
|
||||
```
|
||||
|
||||
@@ -241,7 +245,9 @@ export const glassCard = {
|
||||
**A**: Pastel Palette 已自动支持。在根元素添加 `data-color-mode` 属性：
|
||||
|
||||
```tsx
|
||||
<html data-color-mode="dark">{/* 所有颜色 token 自动切换 */}</html>
|
||||
<html data-color-mode="dark">
|
||||
{/* 所有颜色 token 自动切换 */}
|
||||
</html>
|
||||
```
|
||||
|
||||
## 🔗 相关文档
|
||||
@@ -261,3 +267,4 @@ export const glassCard = {
|
||||
---
|
||||
|
||||
Happy Coding! 🚀
|
||||
|
||||
|
||||
@@ -26,13 +26,14 @@
|
||||
import { shadows, radius, blur, glassCard } from '~/lib/design-tokens'
|
||||
|
||||
// 统一的玻璃态卡片
|
||||
;<div className={clsxm(glassCard.floating, radius.lg, shadows.medium)}>...</div>
|
||||
<div className={clsxm(glassCard.floating, radius.lg, shadows.medium)}>
|
||||
...
|
||||
</div>
|
||||
```
|
||||
|
||||
## 🧩 组件拆分
|
||||
|
||||
### 原文件结构
|
||||
|
||||
- `page.tsx`：680 行单文件，包含所有组件和数据
|
||||
|
||||
### 新文件结构
|
||||
@@ -52,7 +53,6 @@ components/landing/
|
||||
```
|
||||
|
||||
### 主页面（`page.tsx`）
|
||||
|
||||
- **重构前**：680 行
|
||||
- **重构后**：29 行（仅组合导入的组件）
|
||||
|
||||
@@ -61,16 +61,14 @@ components/landing/
|
||||
### 1. 颜色系统规范化
|
||||
|
||||
**重构前**：
|
||||
|
||||
```tsx
|
||||
// ❌ 硬编码颜色和不一致的阴影
|
||||
className = 'shadow-[0_20px_60px_rgba(0,0,0,0.35)] bg-white/5'
|
||||
className = 'shadow-[0_25px_80px_rgba(0,0,0,0.35)]'
|
||||
className = 'shadow-[0_30px_80px_rgba(0,0,0,0.35)]'
|
||||
className="shadow-[0_20px_60px_rgba(0,0,0,0.35)] bg-white/5"
|
||||
className="shadow-[0_25px_80px_rgba(0,0,0,0.35)]"
|
||||
className="shadow-[0_30px_80px_rgba(0,0,0,0.35)]"
|
||||
```
|
||||
|
||||
**重构后**：
|
||||
|
||||
```tsx
|
||||
// ✅ 使用统一的设计 token
|
||||
className={shadows.heavy}
|
||||
@@ -80,7 +78,6 @@ className={shadows.medium}
|
||||
### 2. 阴影层级统一
|
||||
|
||||
所有阴影现在遵循 5 个标准层级：
|
||||
|
||||
- `subtle`：轻微阴影（卡片悬停）
|
||||
- `light`：轻度阴影（普通卡片）
|
||||
- `medium`：中度阴影（浮动面板）
|
||||
@@ -92,7 +89,6 @@ className={shadows.medium}
|
||||
创建了 4 个通用卡片组件：
|
||||
|
||||
#### `Card`（基础卡片）
|
||||
|
||||
```tsx
|
||||
<Card variant="floating" size="md" hoverable>
|
||||
自定义内容
|
||||
@@ -100,7 +96,6 @@ className={shadows.medium}
|
||||
```
|
||||
|
||||
#### `IconCard`（带图标的卡片）
|
||||
|
||||
```tsx
|
||||
<IconCard
|
||||
icon="i-lucide-aperture"
|
||||
@@ -111,7 +106,6 @@ className={shadows.medium}
|
||||
```
|
||||
|
||||
#### `FeatureCard`（功能卡片）
|
||||
|
||||
```tsx
|
||||
<FeatureCard
|
||||
icon="i-lucide-cpu"
|
||||
@@ -122,15 +116,17 @@ className={shadows.medium}
|
||||
```
|
||||
|
||||
#### `MetricCard`（指标卡片）
|
||||
|
||||
```tsx
|
||||
<MetricCard label="WebGL 渲染" value="60fps" detail="平移 · 缩放 · HDR" />
|
||||
<MetricCard
|
||||
label="WebGL 渲染"
|
||||
value="60fps"
|
||||
detail="平移 · 缩放 · HDR"
|
||||
/>
|
||||
```
|
||||
|
||||
## 📦 组件拆分原则
|
||||
|
||||
遵循项目规则：
|
||||
|
||||
1. ✅ **每个文件 < 500 行**
|
||||
2. ✅ **避免重复代码**（提取通用 Card 组件）
|
||||
3. ✅ **单一职责**（每个 Section 组件只负责一个区块）
|
||||
@@ -172,7 +168,6 @@ import { NewSection } from '~/components/landing'
|
||||
### Glassmorphic Depth 原则
|
||||
|
||||
所有组件都遵循「玻璃态深度设计」：
|
||||
|
||||
1. **分层透明度**：`bg-background/60` → `bg-background/80`
|
||||
2. **模糊背景**：`backdrop-blur-xl` → `backdrop-blur-3xl`
|
||||
3. **精细边框**：`border border-white/10`
|
||||
@@ -181,13 +176,13 @@ import { NewSection } from '~/components/landing'
|
||||
|
||||
## 📊 重构效果
|
||||
|
||||
| 指标 | 重构前 | 重构后 | 改进 |
|
||||
| ---------- | ------ | ---------- | -------- |
|
||||
| 主文件行数 | 680 行 | 29 行 | ↓ 95.7% |
|
||||
| 组件文件数 | 1 个 | 10 个 | 模块化 |
|
||||
| 重复样式 | ~15 处 | 0 处 | 消除重复 |
|
||||
| 阴影定义 | 12+ 种 | 5 种 | 统一规范 |
|
||||
| 可维护性 | ⭐⭐ | ⭐⭐⭐⭐⭐ | 显著提升 |
|
||||
| 指标 | 重构前 | 重构后 | 改进 |
|
||||
|------|--------|--------|------|
|
||||
| 主文件行数 | 680 行 | 29 行 | ↓ 95.7% |
|
||||
| 组件文件数 | 1 个 | 10 个 | 模块化 |
|
||||
| 重复样式 | ~15 处 | 0 处 | 消除重复 |
|
||||
| 阴影定义 | 12+ 种 | 5 种 | 统一规范 |
|
||||
| 可维护性 | ⭐⭐ | ⭐⭐⭐⭐⭐ | 显著提升 |
|
||||
|
||||
## 🚀 后续优化建议
|
||||
|
||||
@@ -201,3 +196,4 @@ import { NewSection } from '~/components/landing'
|
||||
- 设计系统规范：`apps/landing/AGENTS.md`
|
||||
- Pastel Palette 文档：`@pastel-palette/tailwindcss`
|
||||
- 项目整体架构：根目录 `README.md`
|
||||
|
||||
|
||||
@@ -3,13 +3,11 @@
|
||||
> A color library and sample site for design systems, offering three styles: Regular, Kawaii, and High Contrast. It covers application-level colors (accent/primary/secondary), semantic colors (text, background, border, separator, link, disabled), material transparency layers (ultraThick→opaque), and grayscale gradients (gray1→gray10). All colors are defined using OKLCH and offer light/dark variants to maintain consistent perceptual contrast and accessibility across themes and light/dark modes.
|
||||
|
||||
This project includes a color package (`packages/colors`) and a demo/documentation site (`docs`). Colors are created using the `createColor` tool to ensure consistency and composability. Styles:
|
||||
|
||||
- Regular: Universal, neutral default style suitable for most products
|
||||
- Kawaii: Softer, cute-style light-color contrast controls
|
||||
- High Contrast: Extreme contrast for enhanced readability and accessibility (WCAG-friendly)
|
||||
|
||||
Color Organization Structure and Recommendations:
|
||||
|
||||
- Application Colors: `accent`, `primary`, `secondary` (for branding, primary actions, secondary buttons, etc.)
|
||||
- Semantic Colors: `text`, `placeholderText`, `border`, `separator`, `link`, `disabledControl`, `disabledText`; plus `background` and `fill` with progressive hierarchy (primary→quinary / primary→quaternary)
|
||||
- Material Colors: `ultraThick`, `thick`, `medium`, `thin`, `ultraThin`, `opaque` (same color with varying opacity levels, used for frosted glass, card overlays, etc.)
|
||||
@@ -67,13 +65,13 @@ Color Organization Structure and Recommendations:
|
||||
- Primary Colors: blue, pink, purple, green, orange, yellow, sky, red, brown, gray, neutral, black, white, teal, cyan, indigo, violet, lime, emerald, amber, rose, slate, zinc
|
||||
- Application Level (regularApplicationColors): accent (brand accents), primary (primary interactions), secondary (secondary interaction)
|
||||
- Semantic Level (regularElementColors / regularBackgroundColors / regularFillColors / regularMaterialColors):
|
||||
- text._, border._, separator.primary, link.primary, disabled*, background.* (primary→quinary), fill._ (primary→quaternary), material._ (ultraThick→opaque)
|
||||
- text.*, border.*, separator.primary, link.primary, disabled*, background.* (primary→quinary), fill.* (primary→quaternary), material.* (ultraThick→opaque)
|
||||
- Grayscale (regularGrayScale): gray1→gray10 supporting neutral surfaces and contrast levels
|
||||
|
||||
- Kawaii Style:
|
||||
- Distinctive features: More refined text/border contrast control on light color palettes; softer background/fill gradations
|
||||
- Application Level (kawaiiApplicationColors): accent/primary/secondary follow Regular roles, with softer hue and luminance
|
||||
- Semantic Level (kawaiiElementColors, etc.): links lean toward soft blue/cyan; disabled\* aligns with overall color temperature
|
||||
- Semantic Level (kawaiiElementColors, etc.): links lean toward soft blue/cyan; disabled* aligns with overall color temperature
|
||||
- Grayscale (kawaiiGrayScale): consistent gradation with Regular, adapted to overall style
|
||||
|
||||
- High Contrast Style:
|
||||
@@ -85,9 +83,10 @@ Color Organization Structure and Recommendations:
|
||||
## Docs
|
||||
|
||||
- [Demo Documentation Site](https://pastel.innei.dev/): Interactive preview of all themes and colors
|
||||
|
||||
|
||||
## Optional
|
||||
|
||||
- [packages/colors source code (theme definitions)](https://github.com/Innei/pastel/tree/main/packages/colors/src): Theme and color definitions, including Regular/Kawaii/High Contrast
|
||||
- [docs site source code](https://github.com/Innei/pastel/tree/main/docs): Example and preview site
|
||||
- [Tailwind Theme Export (packages/tailwindcss-colors)](https://github.com/Innei/pastel/tree/main/packages/tailwindcss-colors): Generator and theme CSS export
|
||||
|
||||
|
||||
@@ -95,4 +95,4 @@
|
||||
],
|
||||
"changelog": true
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,11 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
@@ -21,7 +25,9 @@
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"~/*": ["./src/*"]
|
||||
"~/*": [
|
||||
"./src/*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
@@ -31,5 +37,9 @@
|
||||
".next/types/**/*.ts",
|
||||
".next/dev/types/**/*.ts"
|
||||
],
|
||||
"exclude": ["node_modules", "packages/markdown", "./storybook"]
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"packages/markdown",
|
||||
"./storybook"
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user