# @esri/calcite-colors 中文文档

规范地址：https://npmcn.com/package/%40esri/calcite-colors/

版本：6\.1\.0
npm 元数据更新时间：2025-10-31T20:20:42.432Z
中文译文更新时间：2026-11-13T22:44:54.151Z
软件包许可：SEE LICENSE IN README\.md

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40esri/calcite-colors
原文对照：https://npmcn.com/package/%40esri/calcite-colors/?lang=original
项目主页：https://github.com/Esri/calcite-colors
源码仓库：https://github.com/Esri/calcite-colors

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：280 kB，22 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2018-08-17T23:12:31.537Z
- 最新版本发布：2023-01-04T23:15:57.007Z
- 近 30 天下载量：110223（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：21（近 12 个月 0 个）

## 中文简介

Esri 的授权颜色变量

## 安装

```sh
npm install @esri/calcite-colors
```

也可以使用：`pnpm add @esri/calcite-colors`、`yarn add @esri/calcite-colors`、`bun add @esri/calcite-colors`

## README

# 计算颜色

![saturated color wheel](https://raw.githubusercontent.com/Esri/calcite-colors/master/resources/saturated-graph.png)

Calcite-colors寄存器以多文件格式提供埃斯里的官方彩色调色板,包括文档,参考文件,以及帮助器.

## 颜色参考文件

以下链接是下载.ase swatch,用于Adobe产品,如Adobe Photoshop和Adobe Illustrator. 此外,还有可视参考色调色板的PDF下载.

-   [阿多贝.ase](https://github.com/Esri/calcite-colors/raw/master/resources/colors.ase)
-   [调色板 PDF](https://github.com/Esri/calcite-colors/raw/master/resources/colors.pdf)

## Sass 变量

A 类 [萨斯](http://sass-lang.com/) 变量文件可见于根目录 `colors.scss`。这是消耗颜色变量的主要来源.

## 萨斯主题混合

已有一对 Sass 混音器, 将返回这两个主题为 CSS 自定义属性 。 这样,如果需要,您可以在您的应用中加入css vars:

```scss
@import "@esri/calcite-colors/dist/colors.scss";

:root {
  @include calcite-theme-light();
}

[theme="dark"] {
  @include calcite-theme-dark();
}
```

这些颜色随同 `var` 语法 :

```css
.my-element {
  border-color: var(--calcite-ui-blue-1);
}
```

## ES6 导出

在现代的javascript环境中,您可以通过ES6导入导入颜色:

```js
import { colors } from "@esri/calcite-colors/dist/colors";

console.log(colors["ui-blue"]); // => "#007ac2"
```

## UI 颜色

在Sass和JSON两个文件中都是UI色彩变量. 这些变量应当是大多数应用程序的颜色标准用法. 它们将成为用户抓住主要使用颜色的简单方法,使各种应用程序的颜色保持一致。 它们包括"光明"和"黑暗"两个主题变量. 黑暗主题变量 `-dark` 附录。 此外,光和暗都包括徘徊和受压状态的变量(`$ui-blue-2`, (中文(简体) ), `$ui-red-3`) (中文(简体) ).

## 图表颜色

图表的颜色也包括在内。 这些可用于导入用于图表库的颜色.

## 命名解剖学的颜色

![colors naming anatomy](https://raw.githubusercontent.com/Esri/calcite-colors/master/resources/colors-naming-anatomy.png)

## 构建指令

要运行一个建设运行 `npm run build` 在工程根目录的终端内。 这将将 Typescript 文件编译为 JavaScript 模块 .

**确保运行 `npm install` 已经运行在第一次建筑之前**

## 许可证发放

2021年埃斯里岛

美国版权法所保留的所有权利 和适用的国际法、条约和公约.

这些材料根据Esri主许可证获得使用许可证 协定受协定条款的约束. 您可以不经修改再分配和使用此代码, 如果你遵守《司法协助法》的规定,并包括这一点 版权公告.

见使用限制 [http://www.esri.com/legal/pdfs/mla e204 e300/english (英语)](http://www.esri.com/legal/pdfs/mla_e204_e300/english)

详情请联系: 环境系统研究所. Attn:合同和法律事务部 纽约街380号 美国加利福尼亚州红地 92373 美国

电子邮件 : [合同@esri.com](mailto:contracts@esri.com)

## 向 Calcite 颜色贡献

请读一下 [输入文档](https://npmcn.com/package/%40esri/calcite-colors/CONTRIBUTE.md)。 。 。 .

## 常见问题

### @esri/calcite-colors 是什么？

Esri 的授权颜色变量

### 如何安装 @esri/calcite-colors？

在项目目录运行 npm install @esri/calcite-colors，或使用 pnpm add / yarn add / bun add。

### @esri/calcite-colors 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @esri/calcite-colors 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @esri/calcite-colors 可以商用吗？

@esri/calcite-colors 使用 SEE LICENSE IN README\.md 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @esri/calcite-colors 的下载量有多少？

根据 npm 官方下载统计，@esri/calcite-colors 在 2026/10/14 – 2026/11/12 这 30 天内被下载 110,223 次，日均约 3,674 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @esri/calcite-colors 还在维护吗？

最新版本 6\.1\.0 发布于 2023/01/05（3 年前）；至今共发布 21 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/08/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。