颜色

这些颜色的十六进制值可以在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

results matching ""

    No results matching ""