颜色系统

Tabler-Vue 完整继承了 Tabler CSS 的颜色系统，所有组件通过统一的 TablerColor 类型提供颜色支持。

颜色类型层级

// 12 种品牌色（BaseColor）
type BaseColor =
    | 'blue' | 'azure' | 'indigo' | 'purple' | 'pink' | 'red'
    | 'orange' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan'

// 6 种语义色（StatusColor）
type StatusColor =
    | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'

// 3 种中性色（NeutralColor）
type NeutralColor = 'dark' | 'light' | 'muted'

// 组件 color prop 的完整类型，含 white 和 -lt 浅色变体
type TablerColor =
    | BaseColor | StatusColor | NeutralColor
    | 'default' | 'white'
    | `${BaseColor}-lt` | `${StatusColor}-lt` | `${NeutralColor}-lt`

所有组件的 color 属性均遵循 TablerColor 类型约束。

---

品牌色

Tabler 提供了从蓝色到青色的 12 色环，覆盖了常用的品牌色彩空间。

将品牌色应用到组件上：

查看代码

<TBadge color="blue">blue</TBadge>
<TBadge color="azure">azure</TBadge>
<TBadge color="indigo">indigo</TBadge>
<TBadge color="purple">purple</TBadge>
<TBadge color="pink">pink</TBadge>
<TBadge color="red">red</TBadge>
<TBadge color="orange">orange</TBadge>
<TBadge color="yellow">yellow</TBadge>
<TBadge color="lime">lime</TBadge>
<TBadge color="green">green</TBadge>
<TBadge color="teal">teal</TBadge>
<TBadge color="cyan">cyan</TBadge>

---

语义色

用于传达操作结果或系统状态（如成功、危险、警告等）。

<TBadge color="primary">Primary</TBadge>
<TBadge color="secondary">Secondary</TBadge>
<TBadge color="success">Success</TBadge>
<TBadge color="danger">Danger</TBadge>
<TBadge color="warning">Warning</TBadge>
<TBadge color="info">Info</TBadge>

---

中性色

dark、light、muted 三个中性色用于辅助性的视觉层次。

---

浅色变体（Light Tint）

所有色彩均提供了 -lt 后缀的浅色变体，适用于需要柔和色彩表现的场景。

查看代码

<TBadge color="primary-lt">primary-lt</TBadge>
<TBadge color="secondary-lt">secondary-lt</TBadge>
<TBadge color="success-lt">success-lt</TBadge>
<TBadge color="danger-lt">danger-lt</TBadge>
<TBadge color="warning-lt">warning-lt</TBadge>
<TBadge color="info-lt">info-lt</TBadge>
<TBadge color="blue-lt">blue-lt</TBadge>
<TBadge color="green-lt">green-lt</TBadge>
<TBadge color="purple-lt">purple-lt</TBadge>
<TBadge color="dark-lt">dark-lt</TBadge>
<TBadge color="muted-lt">muted-lt</TBadge>

---

社交品牌色

Tabler 内置了常用的社交品牌颜色，主要用于品牌相关图标的展示。

颜色名	CSS 类示例
x	bg-x text-x-fg
facebook	bg-facebook text-facebook-fg
twitter	bg-twitter text-twitter-fg
linkedin	bg-linkedin text-linkedin-fg
google	bg-google text-google-fg
youtube	bg-youtube text-youtube-fg
vimeo	bg-vimeo text-vimeo-fg
dribbble	bg-dribbble text-dribbble-fg
github	bg-github text-github-fg
instagram	bg-instagram text-instagram-fg
pinterest	bg-pinterest text-pinterest-fg
vk	bg-vk text-vk-fg
rss	bg-rss text-rss-fg
flickr	bg-flickr text-flickr-fg
bitbucket	bg-bitbucket text-bitbucket-fg
tabler	bg-tabler text-tabler-fg

---

灰色阶

从 gray-50 到 gray-950 的完整灰色阶梯，用于背景、边框、分隔线等场景。

---

在组件中使用颜色

Alert（提示框）

<TAlert color="success" title="操作成功">
  您的数据已成功提交。
</TAlert>

<TAlert color="danger-lt" title="错误提示">
  请检查输入后重试。
</TAlert>

Button（按钮）

<TButton color="primary">提交</TButton>
<TButton color="green" outline>绿色轮廓</TButton>
<TButton color="red" ghost>红色幽灵</TButton>

Avatar（头像）

<TAvatar color="blue" initials="张"/>
<TAvatar color="green-lt" initials="李"/>

Progress（进度条）

<TProgress color="success" :value="75"/>
<TProgress color="warning" :value="50"/>

Badge（徽章）

<TBadge color="purple">标签</TBadge>
<TBadge color="purple-lt">浅色标签</TBadge>

Card（卡片）

<TCard bg="primary" textColor="primary-fg">
  深色背景卡片
</TCard>

---

完整颜色 API

类型对照

类型	包含的颜色	组件示例
BaseColor	blue, azure, indigo, purple, pink, red, orange, yellow, lime, green, teal, cyan	color="blue"
StatusColor	primary, secondary, success, danger, warning, info	color="success"
NeutralColor	dark, light, muted	color="muted"
-lt 后缀	上述所有颜色 + -lt	color="green-lt"
white	仅 white	color="white"
default	组件默认样式（不应用颜色类）	color="default"