# @abtion-oss/design-system-colors 中文文档

规范地址：https://npmcn.com/package/%40abtion-oss/design-system-colors/

版本：1\.1\.2
npm 元数据更新时间：2024-11-02T12:43:27.063Z
中文译文更新时间：2026-11-06T05:19:35.258Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40abtion-oss/design-system-colors
原文对照：https://npmcn.com/package/%40abtion-oss/design-system-colors/?lang=original
项目主页：https://github.com/abtion/design-system-colors#readme
源码仓库：https://github.com/abtion/design-system-colors

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

- 包体积（解压后）：53.6 kB，17 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=18\.16\.0
- 运行依赖：1 个
- 首次发布：2024-11-01T19:46:14.521Z
- 最新版本发布：2024-11-02T12:43:26.898Z
- 近 30 天下载量：4872（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：6（近 12 个月 0 个）

## 中文简介

生成有对比色的尾风彩色图案的公用事业

## 安装

```sh
npm install @abtion-oss/design-system-colors
```

也可以使用：`pnpm add @abtion-oss/design-system-colors`、`yarn add @abtion-oss/design-system-colors`、`bun add @abtion-oss/design-system-colors`

## README

# 设计系统颜色

使不同项目颜色标准化的公用事业 -- -- 从而有可能通过 [Abtion 组件库](https://muffibook.abtion.com/)

## 使用量

想法是:

1.  设计者为一个项目创建了样式指南,其背景颜色(中性、初级、二级、成功、危险、警告、信息)
    
2.  设计者会为每个上下文的花色100-900和暗/光的花色创造出彩色遮荫,这将分别用于提供光/暗的花色对比.
    
3.  A 类 `colors.json`\- 创建了所有颜色的文件:
    
    ```json
    {
      "dark": "#111827",
      "light": "#F3F4F6",
      "neutral": {
        "DEFAULT": "#6B7280",
        "100": "#F3F4F6",
        ...
        "900": "#111827"
      },
      "primary": {
        "DEFAULT": "#2563EB",
        "100": "#D3E6FE",
        ...
        "900": "#071A70"
      },
    
      ...
    }
    ```
    
4.  `getColorStyles` 用于生成所有颜色的样式表,指定为 CSS 变量(`R G B`),而每个阴影上都加上了对比颜色("暗"或"光"基于相对亮度):
    
    ```css
    :root {
      --color-dark: 17 24 39;
      --color-light: 243 244 246;
    
      --color-neutral: 107 114 128;
      --color-neutral-contrast: 243 244 246;
    
      --color-neutral-100: 243 244 246;
      --color-neutral-100-contrast: 17 24 39;
      ...
      --color-neutral-900: 17 24 39;
      --color-neutral-900-contrast: 243 244 246;
    
      --color-primary: 37 99 235;
      --color-primary-contrast: 243 244 246;
    
      --color-primary-100: 211 230 254;
      --color-primary-100-contrast: 17 24 39;
      ...
      --color-primary-900: 7 26 112;
      --color-primary-900-contrast: 243 244 246;
    
      ...
    }
    ```
    
5.  `getTailwindColors` 用于为尾风配置提供颜色(带有对比颜色和不透明支持):
    
    ```js
    {
      dark: 'rgb(var(--color-dark) / <alpha-value>)',
      light: 'rgb(var(--color-light) / <alpha-value>)',
      neutral: {
        DEFAULT: 'rgb(var(--color-neutral) / <alpha-value>)',
        contrast: 'rgb(var(--color-neutral-contrast) / <alpha-value>)',
    
        '100': 'rgb(var(--color-neutral-100) / <alpha-value>)',
        '100-contrast': 'rgb(var(--color-neutral-100-contrast) / <alpha-value>)',
        ...
        '900': 'rgb(var(--color-neutral-900) / <alpha-value>)',
        '900-contrast': 'rgb(var(--color-neutral-900-contrast) / <alpha-value>)',
      },
      primary: {
        DEFAULT: 'rgb(var(--color-info) / <alpha-value>)',
        contrast: 'rgb(var(--color-info-contrast) / <alpha-value>)'
    
        '100-contrast': 'rgb(var(--color-danger-100-contrast) / <alpha-value>)',
        ...
        '900': 'rgb(var(--color-primary-900) / <alpha-value>)',
        '900-contrast': 'rgb(var(--color-info-900-contrast) / <alpha-value>)',
      },
      ...
    }
    ```
    
6.  现在项目可以使用上下文颜色(和对比颜色)和共享组件进行样式化 [组件库](https://muffibook.abtion.com/) 可在不作任何调整的情况下投入使用.
    

## 公用事业

通常项目只需要使用:

-   [获取颜色样式](https://npmcn.com/package/%40abtion-oss/design-system-colors/src/getColorStyles.ts)
-   [获取 Tailwind Colors](https://npmcn.com/package/%40abtion-oss/design-system-colors/src/getTailwindColors.ts)

其他公用事业包括:

-   [添加连接颜色](https://npmcn.com/package/%40abtion-oss/design-system-colors/src/addContrastColors.ts)
-   [获取康特拉斯特颜色](https://npmcn.com/package/%40abtion-oss/design-system-colors/src/getContrastColor.ts)
-   [获取色彩变量](https://npmcn.com/package/%40abtion-oss/design-system-colors/src/getColorVariables.ts)
-   [获取元素](https://npmcn.com/package/%40abtion-oss/design-system-colors/src/getLuminance.ts)

## 常见问题

### @abtion-oss/design-system-colors 是什么？

生成有对比色的尾风彩色图案的公用事业

### 如何安装 @abtion-oss/design-system-colors？

在项目目录运行 npm install @abtion-oss/design-system-colors，或使用 pnpm add / yarn add / bun add。

### @abtion-oss/design-system-colors 支持 TypeScript 吗？

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

### @abtion-oss/design-system-colors 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @abtion-oss/design-system-colors 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=18\.16\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @abtion-oss/design-system-colors 可以商用吗？

@abtion-oss/design-system-colors 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @abtion-oss/design-system-colors 的下载量有多少？

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

### @abtion-oss/design-system-colors 还在维护吗？

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