颜色
这些颜色的十六进制值可以在JavaScript中访问。该模块的全局版本公开了Blueprint.Colors
对象。 在CommonJS中,您可以import { Colors } from "@blueprintjs/core"
。
灰度
黑色,白色之间的一切。灰度应该用于主UI框架:containers, headers, sections, boxes, etc.如果您需要引起对特定元素(按钮,图标,工具提示等)的注意,请使用其中一种核心颜色。
@reactDocs GrayscalePalette
核心颜色
核心颜色保留用于用户界面设计。 使用这些来帮助引起对特定UI元素的注意,如按钮,标注,图标等。每个核心颜色被映射到我们称之为visual intent的地方。我们使用意图来传达UI元素的状态:
- Blue (intent: primary) 从典型的灰度UI框架中提升元素。
- Green (intent: success) 表示成功的操作。
- Orange (intent: warning) 表示警告和中间状态。
- Red (intent: danger) 表示错误和潜在的破坏性操作。
核心颜色也被设计为:
- 在任何应用程序中相处融洽,彼此并用。
- 遵守WCAG 2.0标准,因此对视障人士和色盲用户来说非常方便。
@reactDocs CoreColorsPalette
扩展颜色
扩展颜色通常应该保留用于数据可视化:任何时候您需要表示某种数据时,都可以使用这些颜色。这些颜色对于WCAG 2.0辅助功能标准的要求不那么严格,因此不应该用于典型的用户界面设计 — 而应该考虑使用核心颜色。
@reactDocs ExtendedColorsPalette
配色方案
使用以下配色方案生成器为您的数据可视化生成配色方案。首先,根据您的数据类型选择方案类型,然后使用下面的表单自定义数值。最后,将颜色数组复制到您的应用程序中并使其生效!
以下方案经过精心打造,视觉震撼,易于理解,同时视障人士和色盲用户仍可使用。
顺序配色方案
顺序颜色方案意味着顺序,并且最适合用于表示在序数或数字尺度上从低到高值的数据。
@reactDocs SequentialSchemePalette
发散的配色方案
分散的配色方案同时强调数据范围两端的中间值和极端值。
@reactDocs DivergingSchemePalette
定性配色方案
定性的配色方案使用一系列不相关的颜色来创建一个不包含顺序的方案,仅仅是种类上的差异。
@reactDocs QualitativeSchemePalette
颜色别名
这些变量是我们颜色的语义别名。 它们在整个Blueprint中使用,以确保各个组件之间的颜色使用一致。
Variable | Description | |
---|---|---|
$pt-intent-primary |
Primary intent color | |
$pt-intent-success |
Success intent color | |
$pt-intent-warning |
Warning intent color | |
$pt-intent-danger |
Danger intent color | |
$pt-app-background-color |
Application background color | |
$pt-dark-app-background-color |
Dark theme application background color | |
$pt-text-color |
Default text color | |
$pt-text-color-muted |
Muted text color | |
$pt-text-color-disabled |
Disabled text color | |
$pt-heading-color |
Text color for headers | |
$pt-link-color |
Text color for links | |
$pt-dark-text-color |
Dark theme default text color | |
$pt-dark-text-color-muted |
Dark theme muted text color | |
$pt-dark-text-color-disabled |
Dark theme disabled text color | |
$pt-dark-heading-color |
Dark theme text color for headers | |
$pt-dark-link-color |
Dark theme text color for links | |
$pt-text-selection-color |
Text selection color | |
$pt-icon-color |
Default icon color | |
$pt-icon-color-hover |
Hovered icon color | |
$pt-icon-color-disabled |
Disabled icon color | |
$pt-icon-color-selected |
Selected icon color | |
$pt-dark-icon-color |
Dark theme default icon color | |
$pt-dark-icon-color-hover |
Dark theme hovered icon color | |
$pt-dark-icon-color-disabled |
Dark theme disabled icon color | |
$pt-dark-icon-color-selected |
Dark theme selected icon color | |
$pt-divider-black |
Black divider color | |
$pt-dark-divider-black |
Dark theme black divider color | |
$pt-dark-divider-white |
Dark theme white divider color | |
$pt-code-text-color |
Code text color | |
$pt-code-background-color |
Code background color | |
$pt-dark-code-text-color |
Dark theme code text color | |
$pt-dark-code-background-color |
Dark theme code background color |