Blaze UI 颜色范围

Blaze UI 是一个基于 Tailwind CSS 架构的开源 UI 组件库，提供了一系列现代化的 UI 组件，让开发者快速开发美观且易于维护的界面。在 Blaze UI 中，与颜色相关的 CSS 类名称均基于一个定义良好的颜色范围。

颜色名称

Blaze UI 的颜色范围基于以下颜色名称：

• Primary
• Secondary
• Tertiary
• Success
• Warning
• Danger
• Dark
• Light
• Info

这些颜色名称在 Blaze UI 的 CSS 类名称中都会被作为前缀，并使用连字符来分隔单词。比如，Primary 颜色对应的 CSS 类名称为 bg-primary。

颜色变体

除了基本颜色名称之外，Blaze UI 也提供了不同的颜色变体，以支持更多的样式组合。以下是支持的变体：

• light
• dark
• muted
• bright
• dimmed
• accent

以 bg-primary 为例，以上变体会产生以下 CSS 类名称：

• bg-primary-light
• bg-primary-dark
• bg-primary-muted
• bg-primary-bright
• bg-primary-dimmed
• bg-primary-accent

其他颜色相关 CSS 类名称

除了基本的背景色和文本颜色 CSS 类名称之外，Blaze UI 还提供了一些其他的颜色相关 CSS 类名称，如：

• border-primary
• text-primary
• hover:bg-primary
• focus:bg-primary

这些 CSS 类名称可以在不同的场合下使用，以完成特定的 UI 效果。

示例代码

<div class="bg-primary-light text-white p-4">Hello, world!</div>
<div class="bg-secondary-dark text-white p-4">Hello, world!</div>
<div class="bg-success-muted text-white p-4">Hello, world!</div>
<div class="bg-warning-bright text-white p-4">Hello, world!</div>
<div class="bg-danger-dimmed text-white p-4">Hello, world!</div>
<div class="bg-info-accent text-white p-4">Hello, world!</div>