色彩

基础色彩系统

主色（Primary Colors）

用以表现品牌或产品的核心视觉感，例如品牌色、主题色。 品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅至深的第六个颜色作为主色。 Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 #1890FF，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。

辅助色（Secondary Colors）

用以支持主色或提供功能区分。

中性色（Neutral Colors）

中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线等场景中也非常常见。

状态色（Status Colors）

状态色代表了明确的信息以及状态，比如成功、出错、失败、提醒、链接等。状态色的选取需要遵守用户对色彩的基本认知。

2. 色彩应用

色彩在 UI 设计中有多种应用场景，包括：

• 背景色（Background Colors）：适配不同层次的背景，常见为浅色背景与深色背景。
• 文本色（Text Colors）：确保文本的对比度，分为标题、正文和次要信息颜色。
• 边框色（Border Colors）：用于强调或分隔组件。
• 高亮色（Highlight Colors）：用于交互元素（如按钮、链接、悬停效果）。

import { defineConfig } from 'unocss'

export default defineConfig({
  theme: {
    text: 'var(--pro-ant-color-text)',
    textSecondary: 'var(--pro-ant-color-text-secondary)',
  },
})

使用

<div class="text">text</div>
<div class="text-secondary">textSecondary</div>

3. 色彩语义化

色彩体系通常通过语义化的命名方式增强可读性和一致性，例如：

• color-primary-500：主色调中的标准色。
• color-neutral-100：浅灰色，适合用于背景。
• color-success-300：成功状态的轻量色。
• color-error-700：错误状态的深色。

这些语义类简化了跨多种模式（例如，深色或浅色主题）的主题定制和管理。每个主题通过css变量动态地为这些类分配颜色，使您的设计能够毫不费力地适应主题的变化。

4. 色彩等级（Color Scales）

提供色彩的深浅梯度，增强灵活性：

• 深浅变化：每个主色或辅助色包含 5-10 个深浅等级，例如：
  • Primary-50: 最浅的主色。
  • Primary-900: 最深的主色。

这种分层可以满足多样化的 UI 需求，例如不同的交互状态（悬停、禁用等）。

6. 定制与扩展

FlyonUI 通常允许开发者根据品牌或项目需求定制色彩：

• 支持动态主题（Light/Dark Mode）。
• 提供工具生成或管理色彩变量（如 SCSS、CSS Variables 或 Token 管理工具）。

:root {
  /* 主色 */
  --color-primary-50: #e3f2fd;
  --color-primary-100: #bbdefb;
  --color-primary-500: #2196f3;
  --color-primary-900: #0d47a1;

  /* 辅助色 */
  --color-secondary-50: #f3e5f5;
  --color-secondary-500: #9c27b0;

  /* 状态色 */
  --color-success-500: #4caf50;
  --color-error-500: #f44336;
  --color-warning-500: #ff9800;

  /* 中性色 */
  --color-neutral-50: #fafafa;
  --color-neutral-500: #9e9e9e;
  --color-neutral-900: #212121;
}

const darkTheme = {
  'color-scheme': 'dark',
  'primary': '#794DFF',
  'primary-content': '#EAE7FF',
  'secondary': '#76717F',
  'secondary-content': '#fff',
  'accent': '#3B82F6',
  'accent-content': '#DBEAFE',
  'neutral': '#928F9E',
  'neutral-content': '#141119',
  'base-100': '#282332',
  'base-200': '#1D1A26',
  'base-300': '#4A4456',
  'base-content': '#B8B6C0',
  'base-shadow': '#141119',
  'info': '#06B6D4',
  'info-content': '#CFFAFE',
  'success': '#02CA4B',
  'success-content': '#E1FAF1',
  'warning': '#FCAA1D',
  'warning-content': '#FFFAE8',
  'error': '#FB4141',
  'error-content': '#FFF5ED'
}

如果需要更详细的文档或具体实现细节，请提供 FlyonUI 的特定文档或设计需求，我可以进一步分析和扩展内容！