颜色系统为我们提供了一个开箱即用的默认主题，包括了亮暗两种颜色体系，简约又漂亮
系统概述
skiyee/ui 的颜色系统基于语义化设计，提供了一套完整且一致的颜色体系。系统分为两个主要部分：
- 基础颜色层：定义了原始的颜色值，包括灰度、功能色等
- 语义颜色层：基于基础颜色层，定义了具有语义含义的颜色，如背景色、文本色、边框色等
这种分层设计使得主题切换和颜色定制变得简单而灵活。
功能颜色
功能颜色用于传达特定的状态和含义，包括品牌色、成功色、警告色、危险色和中性色。
<template>
<div class="bg-brand text-brand-foreground">Brand</div>
<div class="bg-success text-success-foreground">Success</div>
<div class="bg-warning text-warning-foreground">Warning</div>
<div class="bg-error text-error-foreground">Error</div>
<div class="bg-neutral text-neutral-foreground">Neutral</div>
</template>
语义颜色
背景颜色
背景颜色系统定义了应用中各种背景元素的色彩，是构建视觉层次的基础：
<template>
<div class="bg-page">Page</div>
<div class="bg-surface">Surface</div>
<div class="bg-subtle">Subtle</div>
<div class="bg-muted">Muted</div>
<div class="bg-accent">Accent</div>
<div class="bg-emphasized">Emphasized</div>
<div class="bg-backdrop text-anti">Backdrop</div>
<div class="bg-disabled">Disabled</div>
<div class="bg-skeleton">Skeleton</div>
</template>
文本颜色
文本颜色系统确保了在不同背景下的可读性和层次感，是信息传达的核心：
<template>
<span class="text-primary">Primary</span>
<span class="text-secondary">Secondary</span>
<span class="text-tertiary">Tertiary</span>
<span class="text-label">Label</span>
<span class="text-selected">Selected</span>
<span class="text-description">Description</span>
<span class="text-placeholder">Placeholder</span>
<span class="text-disabled">Disabled</span>
</template>
边框颜色
边框颜色系统用于定义各种边框和分割线的颜色，是界定和分割元素的重要工具：
<template>
<div class="border border-solid border-base">Base</div>
<div class="border border-solid border-subtle">Subtle</div>
<div class="border border-solid border-strong">Strong</div>
</template>