# @dume/ds 中文文档

规范地址：https://npmcn.com/package/%40dume/ds/

版本：0\.10\.0
npm 元数据更新时间：2026-11-11T17:46:23.051Z
中文译文更新时间：2026-11-13T04:41:44.090Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40dume/ds
原文对照：https://npmcn.com/package/%40dume/ds/?lang=original
源码仓库：https://github.com/smndhm/blu

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

- 包体积（解压后）：212 kB，35 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：4 个
- 首次发布：2026-10-26T20:54:12.044Z
- 最新版本发布：2026-11-11T17:46:22.629Z
- 近 30 天下载量：2309（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：12（近 12 个月 12 个）

## 中文简介

我的设计系统:我的项目(simon.duhem.fr, Music Bridge)共享的风格,设计符号,基础,布局和组件

## 安装

```sh
npm install @dume/ds
```

也可以使用：`pnpm add @dume/ds`、`yarn add @dume/ds`、`bun add @dume/ds`

## README

# @ dume/ds (英语)

我的设计系统:我的项目共用的风格([(原始内容存档于2018-10-21). simon.duhem.fr](https://simon.duhem.fr/),音乐桥...),其自定义属性和类前缀为: `ds-`。只有项目使用的东西:符号、组件和布局在从一个项目重复到另一个项目时才会出现.

每个组件首先是HTML和CSS:原生元素和一个类,可以在没有JavaScript的任何一页中使用. 网络组件在需要时,是阴影根中的相同组件,加上它增加的行为(见 [网络组件](https://npmcn.com/package/%40dume/ds/#readme-web-components)) (中文(简体) ).

每个互动要素都有其所有状态,它们都可以使用: [交互式状态](https://npmcn.com/package/%40dume/ds/#readme-interactive-states)。 。 。 .

在0版中,它只涵盖我的项目需求,一个小版本可能会改变其中的事物:以你自己的速度在其他地方使用,其版本被固定.

## 命名

自定义属性以小写单词命名 :

-   `--ds-b-{category}-{role}-{variant}` 用于基准符号 : `--ds-b-color-text`, (中文(简体) ), `--ds-b-color-text-muted`, (中文(简体) ), `--ds-b-color-background-surface`, (中文(简体) ), `--ds-b-outline-focus`。 。 。 .
-   `--ds-c-{component}-{category}-…` 用于组件的(`--ds-c-button-size-min-height`, (中文(简体) ), `--ds-l-{layout}-{category}-…` 用于布局的 (`--ds-l-grid-size-gap`) (中文(简体) ).
-   `--ds-` 名称空间; `b`, (中文(简体) ), `c`, (中文(简体) ), `l` 层.
-   该类别来自一个封闭式清单: `color`, (中文(简体) ), `font`, (中文(简体) ), `size`,或 CSS 属性的复合值为(`outline`) (中文(简体) ).
-   角色,然后是变体,从最一般到最具体.
-   光和暗的主题会改变价值,永远不会改变名字.

没有 `--ds-b-muted-color` (该类别为第一), `--ds-b-color-surface` (角色, `background`,已丢失), `--ds-b-focus-outline` (单位:千美元)`focus` cSS 属性为 .

@dume/dev-config的Stytlint配置检查名称(`custom-property-pattern`)在任何项目中,不取决于此包。 其测试检查其标志(`css/tokens.css`同样的方式。 在此列表中, 在Stylelint规则和测试中, 有一个新的分类 .

只有项目使用的标志:一个新的标志是首先使用的.

HTML 元素的样式没有分类,在底部:链接、标题、标题及其标签行(`hgroup`),表,引文,代码. 类别用于组件(`c-`),布局(`l-`)和公用事业`u-`),在 `.ds-` 名称空间, 在 [贝姆](https://getbem.com/introduction/) (单位:千美元)`.ds-l-page--centered`)),而只有在一种风格需要它们的地方:一个块的阶级在它的根上,一个元素在它的块样式上,在它内部. 没有通用第一或框架类。 修饰者只有在其块或元素也在没有它的情况下被使用时,或当它是它本身的变体时(`.ds-c-field__control--multiline`:一个选择或输入是没有它的控制.

### 选择要添加的内容

在添加任何内容之前,请按顺序通过这些内容,然后在第一个符合时停止:

1.  **土生土长**:基部中的元素样式,无类,或按原样使用(`<progress>`, (中文(简体) ), `role="status"` 已载入页中).
2.  **看看这个**,对于一个块:一个组件, `.ds-c-*` (一张牌,一个按钮). 其变种为变种.
3.  **安排** 区块:布局, `.ds-l-*`,或其中一种的修改者(`.ds-l-cluster`) (中文(简体) ).
4.  **行为** 浏览器没有,或者一个不是我们的页面:一个基于步骤2组件的网页组件(参见 [网络组件](https://npmcn.com/package/%40dume/ds/#readme-web-components)) (中文(简体) ).

一个组件不决定其用途:它在页面上的位置(一个提醒没有位置:页面将其放置)及其作用(`status`,或 `alert` 紧急的事情)是页面的.

属于一个项目的东西留在这个项目中,由这些东西建造。 请说每个步骤会带来什么:一个只添加JavaScript的网页组件不是一个.

### 网络组件

一个组件是 HTML 和 CSS 首先是: 一个本地元素 (`<a>`, (中文(简体) ), `<button>`, (中文(简体) ), `<dialog>`, (中文(简体) ), `<details>`...)和一个班级. 只有当它需要 CSS 和本地 HTML 无法给出时,它才会成为网络组件 :

-   在 JavaScript 中,浏览器本身没有的行为(Music Bridge 的訊息,用其按钮或 Escape 关闭);
-   在阴影根中从页面中分离出样式,当页面不是我们的(Music Bridge的留言,在一个音乐平台的页面上).

单看(一个按钮,一个字段:一个类就够了),也不代表一个原生元素已经做的. 其内容在任何地方都没有JavaScript,网络组件增强.

网站部分建立在 `css/components`,它在我们的一页中没有它就起作用了:它的阴影根取取了该组件的样式表和类,只添加了该页面的基础会给出的内容(链接,焦点环)和它在页面上的位置. `<ds-alert>` 是警报( e)`.ds-c-alert`)入于阴根.

Web 组件被命名 `ds-` 也一样(`<ds-alert>`);第三方保留其名称(`<heading-anchors>`) (中文(简体) ).

他们住在这里 `web-components/`,在 TypeScript 中,每个都带有阴影根的样式:其模块导入它们(设置在 `:host`,它的组件样式表,它自己的),并将它们的 rem 转换为 px,因为不是我们的页面有自己的根字体大小.

| 网络组件 | 模块 | 这是什么 |
| --- | --- | --- |
| [警报](https://npmcn.com/package/%40dume/ds/web-components/alert.js) | `@dume/ds/web-components/alert.js` | `<ds-alert>`,由屏幕阅读器宣布的页面顶端的信息,关闭时按下按钮或逃逸: `showAlert(document, { text, lang, closeLabel, iconUrl, link })`,没有自定义元素注册,而扩展的内容脚本没有 |
| [文件字段](https://npmcn.com/package/%40dume/ds/web-components/file-field.js) | `@dume/ds/web-components/file-field.js` | `<ds-file-field>`,围绕页面的文件字段(`.ds-c-field`),在它的槽中:它还需要一个文件在它的任何地方被丢弃,在它上面显示一个文件(a`dragging`),拒绝一个输入不接受,页面的 `change` 并没有被开除,说为什么`invalid-type-message`, (中文(简体) ), `too-many-message`) (中文(简体) ). 没有 JavaScript 文件字段 |

## 交互式状态

每个交互元素(link, button, control)都有其所有状态,每个状态由设计系统定义,从不留待浏览器的默认:

| 状态 | 什么变化 | 选择器 |
| --- | --- | --- |
| 休息时 | 组件本身的外观 |  |
| 捆绑 | 主色, 更暗( 浅的主题) 或更轻( 暗的主题); 有色背景; 有更厚的下划线 | `:hover`,除非已禁用 |
| 键盘焦点 | 焦点环,主色调为 3px, 元素为 2px : 在一切上, 从未被移除 | `:focus-visible` |
| 按键 | 更暗或更轻, 更有色的背景 | `:active`,除非已禁用 |
| 已禁用 | 灰色文字和背景, 和 `not-allowed` 光标, 不悬浮 | `:disabled`, (中文(简体) ), `[aria-disabled='true']` |
| 无效( 控件) | 2px 边框在危险颜色, 一条信息说为什么 | `[aria-invalid='true']`, (中文(简体) ), `__message--danger` |
| 当前(导航链接) | 以粗体表示,下划线 2px | `[aria-current]` |

它们可以:

-   一个状态从不单用其颜色来显示:一个链接总是被下划线,被徘徊时会更粗;当前页面也用粗体来显示;一个无效的控制有一个更粗的边框和一个消息,它的文本说出什么是错.
-   对比:4.5:1为正文,3:1为边框和焦点环,在每个州,在两个主题中,在两个背景上. 检查它们时人们会看到它们,以及三种颜色失明(protanopia, deuteranopia,tritanopia,模拟). WCAG不问任何有缺陷的元素:它的灰色意在淡出.
-   残疾者 `aria-disabled="true"` 长得和以前一样 `disabled`,用于链接,或用于键盘顺序中的按钮,以解释为何不能使用.
-   Windows的对比主题(`forced-colors`: 系统灰色文本颜色中的一个已禁用元素 (`GrayText`); 鬼按钮的透明边框显示在那里.
-   如大多数设计系统(GOV.UK、USWDS、Carbon、Primer、DSFR)那样,按钮和链接具有指针光标 `not-allowed` 一当残疾.
-   至少24px的目标(WCAG 2.5.8):一个按键,有它的贴板和行高;警报的近按钮,32px.

国务委员会, [`tests/states.html`](https://npmcn.com/package/%40dume/ds/tests/states.html),从设计系统自己的样式表一次显示每个状态的每个交互元素. 页面不能徘徊,也不能按元素本身: Chromium的可访问性测试力 `data-state` (单位:千美元)`hover`, (中文(简体) ), `focus-visible`, (中文(简体) ), `active`),正如德夫图尔人所做的,所以非常 `:hover`, (中文(简体) ), `:focus-visible` 财务报告和审定财务报表 `:active` 规则适用.

无障碍性测试`pnpm --filter @dume/ds test:a11y`,在无障碍工作流程中)在两个主题中加载,并配有 Playwright Test:

-   斧头检查它, 所以每个州的对比, 它不能做的页面 没有人徘徊;
-   每个状态必须在休息时查看除元素以外的其他元素(颜色、背景、边框、轮廓、下划线、重量或光标);
-   董事会必须与其截图相符, [`tests/screenshots/light.png`](https://npmcn.com/package/%40dume/ds/tests/screenshots/light.png) 财务报告和审定财务报表 [`dark.png`](https://npmcn.com/package/%40dume/ds/tests/screenshots/dark.png): 颜色,边框,角或大小,更改失败测试.

游戏板在游戏作家的多克图像的Chrimium中制作版本 `@playwright/test`:每台计算机和CI中相同的字体和渲染,所以截图在任何地方都匹配. 需要多克帮忙 在改变状态之后, `pnpm --filter @dume/ds test:a11y --update-snapshots` 再来一遍:看看他们。 当测试失败时,所拍摄的截图和它们的差异都存在于 `test-results/`以及工作流程中的文物.

国家颜色是标志(`--ds-b-color-primary-hover`, (中文(简体) ), `-active`, (中文(简体) ), `--ds-b-color-background-hover`, (中文(简体) ), `-active`, (中文(简体) ), `--ds-b-color-text-disabled`, (中文(简体) ), `--ds-b-color-background-disabled`, (中文(简体) ), `--ds-b-color-danger`:一个组件带走它们,从来不是它自己的颜色. 一个新的构成部分在构成部分表中列出了其状态.

## 类型

每个标题级别都有自有的大小和权重,在基数4上,下至文本的大小: 1

| 职等 | 大小 | 重量 | 边距(以上,以下) |
| --- | --- | --- | --- |
| `h1` | 32px 密码 | 额外粗体 | 0, 16px (英语) |
| `h2` | 24px (英语) | 粗体 | 40px, 16px (英语) |
| `h3` | 20px (英语) | 额外粗体 | 32px, 8px (英语) |
| `h4` | 16px 时 | 额外粗体 | 24px, 8px 键 |
| `h5` | 16px 时 | 粗体 | 24px, 8px 键 |
| `h6` | 16px 时 | 半粗体 | 24px, 8px 键 |

-   一个头和它的标记线 在一个 `hgroup`:它取取其标题的边距,并取出一个小平面标记线(a) `<small>` 单在其一款,例如日期)就坐在那里。 A 类 `h1` 将自己的比值保持在下方.
-   一个段落最多是65个字符宽,用于读取,无论页面的宽度如何;打印出,工作表的整个宽度.
-   相接相接的航向没有上方的差分:上方的航向下为它们(一CV's company and its first position)之间的间隙.
-   `.ds-l-stack` 将一个条目的细节放在另一个条目下,8px相隔,比段落相近.

排版委员会, [`tests/typography.html`](https://npmcn.com/package/%40dume/ds/tests/typography.html),显示标题级别,每个级别都有其大小、重量和边距从计算样式、标题及其标记线、文本的元素和堆栈读取。 无障碍测试用斧头检查,检查每个标题级别外观,以及 `h6` 在文本的大小, 和它的截图, [`tests/screenshots/typography-light.png`](https://npmcn.com/package/%40dume/ds/tests/screenshots/typography-light.png) 财务报告和审定财务报表 [`typography-dark.png`](https://npmcn.com/package/%40dume/ds/tests/screenshots/typography-dark.png)作为州议会。 在 Playwright 的 Docker 图像中,文本是 `system-ui` 字体是没有粗体的: `<strong>` 仅显示截图上的正常重量,计算出的重量为700.

## 单位

-   `rem` 大小, 基数 4: 倍数为 4px, `0.25rem` (单位:千美元)`0.5rem` 是 8px, 时速, `1rem` 16px) (英语). 它们跟随浏览器中选择的字体大小.
-   间隔,字体大小, 弧度和边框宽度从符(`var(--ds-b-size-16)`, (中文(简体) ), `var(--ds-b-size-border-1) solid`),从不以雷姆或px来写:天平停留在一个地方. Stylelint (@dume/ dev-config) 检查两种规则 .
-   `em` 在一个组件中,用于其文本的生长,例如按键的粘接.
-   `px` 用于边框和焦点环: 1px保持 1px,3px环保持可见,无论缩放.
-   无线高度单位( N)`1.5`, (中文(简体) ), `ch` 读取宽度(`65ch`, (中文(简体) ), `clamp()` 在屏幕后方最小到最大之间的大小, `dvh` 而不是说 `vh`,逻辑属性(`margin-inline`, (中文(简体) ), `padding-block`) (中文(简体) ).
-   页面的根字体大小保留浏览器的:否 `font-size: 62.5%`,这将使每个 `rem` 10px (英语).
-   例外:一个在不是我们的页面上显示的组件,如音乐桥在音乐页面上的信息,是用px表示的,因为该页面的根字体大小不是我们的.

## 标准

-   平面 CSS, 无预处理器: 本地嵌入, 自定义属性, `color-mix()`, (中文(简体) ), `@layer`。 。 。 .
-   目标: [广泛提供的基准](https://web.dev/baseline)每个主要浏览器 拥有30个月.
-   光和暗的主题: 每种颜色是 `light-dark(light, dark)`,随后 `color-scheme`,系统默认; `color-scheme: dark` 在页面或元素上强制主题.
-   左到右和右到左语言:逻辑属性和值(`margin-inline-start`, (中文(简体) ), `text-align: start`),这需要 @dume/dev-config的Stytlint配置.
-   叠加层 : `ds.normalize`, (中文(简体) ), `ds.base`, (中文(简体) ), `ds.layout`, (中文(简体) ), `ds.components`, (中文(简体) ), `ds.utilities`,在任何项目自己的CSS下,在没有特异性战斗的情况下获胜. 他们的顺序是 `tokens.css`,第一个导入样式表.
-   Windows的对比主题(`forced-colors`: 组件用这些主题所保持的边框和轮廓来画出它们的边框和轮廓,而不仅仅是背景.
-   主色调的本地控件( E)`accent-color`),平衡的标题和段落,无"孤"字`text-wrap`) (中文(简体) ).

## 打印

打印的一页以轻取为主题,其正文以"乐器 sans"(页面加载) `fonts.css`:每台打印的计算机都一样,而屏幕上文本在系统字体中,工作表的全宽,没有站点的页眉,页脚和跳过链接;标题保留其内容. `.ds-u-print-hidden` 留下屏幕上唯一有意义的内容,例如下载链接。 simon.duhem.fr将它的CV页面打印成PDF这样.

## 支助科

整个设计系统是一个样式表, `@dume/ds/styles.css`,其字体输入 `fonts/` 旁边: 服务包的 `dist/` 文件夹按原样装入.

```html
<link rel="stylesheet" href="/ds/styles.css" />
```

simon.duhem.fr这样做:它的"十一"配置副本 `dist/` 作为 `/ds/`。 。 。 .

它的部件也是它们自己的样式表, 对于一个仅需要其中一部分的项目:

| 样式表 | 什麽 |
| --- | --- |
| `@dume/ds/fonts.css` | Bricolage Grotesque, 标题字体, 和乐器 sans, 打印文本的: 他们的拉丁子集, 文件在 `fonts/` 旁边 |
| `@dume/ds/tokens.css` | 设计符号作为自定义属性 |
| `@dume/ds/base.css` | [现代规范化](https://github.com/sindresorhus/modern-normalize),然后是 HTML 元素,没有分类:文本、标题、, `hgroup`,链接,焦点环,小打印(`small`,四分之三文本的大小),字段组(`fieldset`, (中文(简体) ), `legend`),折叠内容(`details`, (中文(简体) ), `summary`),图像,表格,引用,代码 |
| `@dume/ds/utilities.css` | `.ds-u-visually-hidden`:隐藏在屏幕上,由屏幕阅读器阅读; `.ds-u-print-hidden`: 未打印; `.ds-u-text-muted`: 文本第二; `.ds-u-text-primary`: 主色调; `.ds-u-text-center`: 以文字为中心,一个段落横穿其容器 |
| `@dume/ds/extension-page.css` | 在扩展版的页面上,仅次于其他: 设计系统字体,Chrome设置自己的字体. 在任何一层之外,而不是在 `styles.css` |
| `@dume/ds/layout/*.css` | 每个布局一个样式表 : `page.css` (单位:千美元)`.ds-l-page`, (中文(简体) ), `__main`, (中文(简体) ), `--fluid`, (中文(简体) ), `--large`, (中文(简体) ), `--full-height`, (中文(简体) ), `--centered`, (中文(简体) ), `--tinted`, (中文(简体) ), `cluster.css` (单位:千美元)`.ds-l-cluster`, (中文(简体) ), `--between`, (中文(简体) ), `--center`, (中文(简体) ), `--equal`, (中文(简体) ), `grid.css` (单位:千美元)`.ds-l-grid`, (中文(简体) ), `stack.css` (单位:千美元)`.ds-l-stack`(中文(简体) ) |
| `@dume/ds/components/*.css` | 每个组件一个样式表(见下文) |

```css
@import '@dume/ds/tokens.css';
@import '@dume/ds/base.css';
@import '@dume/ds/components/button.css';
```

具有自己套装颜色的项目 `--ds-b-color-primary` 打开 `:root`,在两个主题中: 州和地表来自它. 测试检查设计系统本身的颜色:检查一个人的对比度也一样.

自定义属性设定在 `:root`,与 `color-scheme: light dark`,每个颜色 `light-dark()`数字 :

| 自定义属性 | 光线 | 阴暗 | 对于 |
| --- | --- | --- | --- |
| `--ds-b-color-text` | `#222` | `#fafafa` | 文本 |
| `--ds-b-color-text-muted` | `#555` | `#bbb` | 副文本 |
| `--ds-b-color-background` | `#fafafa` | `#222` | 页面 |
| `--ds-b-color-background-surface` | 小学5%,背景 | 小学6%,背景 | 页面上的盒子 |
| `--ds-b-color-background-tinted` | 小学14%,背景 | 小学14%,背景 | 页面梯度中最强者(`.ds-l-page--tinted`(中文(简体) ) |
| `--ds-b-color-border` | `#ccc` | `#555` | 分隔符,装饰边界 |
| `--ds-b-color-border-control` | `#8a8a8a` | `#8a8a8a` | 输入的边框( 3:1) |
| `--ds-b-color-primary` | `#4b0195` | `#c9a2ff` | 链接、焦点、按钮 |
| `--ds-b-color-text-on-primary` | `#fff` | `#222` | 主颜色的文本 |
| `--ds-b-color-primary-hover` | 小学80%,黑色 | 小学70%,白色 | 主要颜色,徘徊 |
| `--ds-b-color-primary-active` | 小学60%,黑色 | 小学40%,白色 | 主颜色, 按下 |
| `--ds-b-color-background-hover` | 小学8%,半透明 | 小学14%,半透明 | 背景徘徊:主色,半透明 |
| `--ds-b-color-background-active` | 小学16%,半透明 | 小学26%,半透明 | 按下一个背景 |
| `--ds-b-color-text-disabled` | `#767676` | `#949494` | 禁用元素的文本 |
| `--ds-b-color-background-disabled` | `#e8e8e8` | `#333` | 残废元素的背景 |
| `--ds-b-color-danger` | `#a30d31` | `#ffabba` | 一个错误,一个破坏行动: 原色的染色体,变成红色 |

| 自定义属性 | 数值 |
| --- | --- |
| `--ds-b-font-family`, (中文(简体) ), `--ds-b-font-family-heading`, (中文(简体) ), `--ds-b-font-family-monospace` | 系统-ui(系统字体), Bricolage Grotesque, 单空间 |
| `--ds-b-size-4`, (中文(简体) ), `-8`, (中文(简体) ), `-12`, (中文(简体) ), `-16`, (中文(简体) ), `-20`, (中文(简体) ), `-24`, (中文(简体) ), `-32`, (中文(简体) ), `-40`, (中文(简体) ), `-48` | `0.25rem` 改为 `3rem`,以 px 命名,用于间隔和字体相同 |
| `--ds-b-size-display` | `clamp(2.5rem, 8vw, 4rem)`一个英雄的行踪 |
| `--ds-b-size-radius`, (中文(简体) ), `--ds-b-size-radius-small` | `0.5rem` (8页x), `0.25rem` (4px) 用于标记等小块 |
| `--ds-b-size-border-1`, (中文(简体) ), `-2`, (中文(简体) ), `-4` | `1px`, (中文(简体) ), `2px`, (中文(简体) ), `4px`: 边界宽度 |
| `--ds-b-outline-focus`, (中文(简体) ), `--ds-b-outline-offset-focus`, (中文(简体) ), `--ds-b-outline-radius-focus` | `3px solid var(--ds-b-color-primary)`, (中文(简体) ), `2px`, (中文(简体) ), `2px` |

文字颜色通过WCAG AA(4.5:1)两种背景,在两种主题中,同样作为三种颜色盲所见:测试检查. Bricolage Grotesque只用于标题(和一个站点名称),而不是粗体文字,按钮或标签. `styles.css` 财务报告和审定财务报表 `fonts.css` 查找其文件于 `fonts/`在他们旁边 没有它,标题会回到系统字体.

## 构成部分

符号后每个组件一个样式表: `@import '@dume/ds/components/button.css';`,按钮第一:其他组件在其上建起(警报的关闭按钮).

警报,如 `<ds-alert>` 显示它:页面的脚本关闭它,并在页面装入后显示时将其文本放入状态区域,供屏幕阅读器宣布. 它没有立场: `showAlert` 把它固定在一个不是我们的页面的顶端, 我们的一页放在它的流中.

```html
<div class="ds-c-alert" lang="en">
  <img class="ds-c-alert__icon" src="icon.svg" alt="" />
  <p class="ds-c-alert__text"><span role="status">A message.</span> <a href="…">A link</a></p>
  <button type="button" class="ds-c-button ds-c-button--ghost ds-c-alert__close" aria-label="Close">×</button>
</div>
```

| 构成部分 | 类 | 对于 |
| --- | --- | --- |
| [警报](https://npmcn.com/package/%40dume/ds/css/components/alert.css) | `.ds-c-alert` (单位:千美元)`--danger`, (中文(简体) ), `__icon`, (中文(简体) ), `__text`, (中文(简体) ), `__close` | 在页面流中选择其位置和角色的信息: `status`, (中文(简体) ), `alert` 因为它打断了屏幕阅读器 因为它是紧急的 它的关闭按钮,可选的,一个幽灵按钮,页面的脚本用它关闭. 一个错误, `--danger`:它的背景和边框被危险的颜色所染上,它的文字说出了什么是错. `<ds-alert>`标记 |
| [按钮](https://npmcn.com/package/%40dume/ds/css/components/button.css) | `.ds-c-button`, (中文(简体) ), `--outline`, (中文(简体) ), `--ghost` | 一个按钮,或者一个看起来像一个的链接,被填充;一个二次动作或文本中被勾勒;一个幽灵,既不被填充,也不被勾勒出,一个谨慎的行动. 专注、按压、残疾`disabled`, (中文(简体) ), `aria-disabled`(中文(简体) ) |
| [纸牌](https://npmcn.com/package/%40dume/ds/css/components/card.css) | `.ds-c-card`, (中文(简体) ), `--horizontal` | 一个盒子在页面上, 告诉一个街区 周围是什么. `--horizontal`:在几行短线旁的一幅相片(圆形),在太长时用椭圆剪接,如相册封面在链接旁,然后是其标题和艺术家 |
| [复选框](https://npmcn.com/package/%40dume/ds/css/components/checkbox.css) | `.ds-c-checkbox`, (中文(简体) ), `__control`, (中文(简体) ), `__label`, (中文(简体) ), `__description` | 本地的复选框,其旁边的标签和标签下的描述; 在一个纸牌上取出一个盒子. 重点残疾(`disabled` 管制) |
| [无线电按钮](https://npmcn.com/package/%40dume/ds/css/components/radio.css) | `.ds-c-radio`, (中文(简体) ), `__control`, (中文(简体) ), `__label`, (中文(简体) ), `__description` | 原生无线电按钮 旁边的标签 以及标签下的描述 选择中的收音机按钮 `fieldset`中的问题 `legend`: 并列在一个 `.ds-l-cluster`一个在另一个在a `.ds-l-stack`. 重点突出、残疾`disabled` 管制) |
| [外地](https://npmcn.com/package/%40dume/ds/css/components/field.css) | `.ds-c-field`, (中文(简体) ), `__label`, (中文(简体) ), `__control` (单位:千美元)`--multiline`, (中文(简体) ), `__message` (单位:千美元)`--danger`(中文(简体) ) | 一个标签,它的控制 横跨它的容器, 一个信息,它的行。 受控,有重点,无效(`aria-invalid`,其信息 `--danger`),已停用。 文件输入有其按钮大纲 . |
| [跳过链接](https://npmcn.com/package/%40dume/ds/css/components/skip-link.css) | `.ds-c-skip-link` | 主要内容的链接, 当焦点显示时显示 |
| [标记](https://npmcn.com/package/%40dume/ds/css/components/tag.css) | `.ds-c-tag` | "新"等标题外有一两字:小而粗,上为主色. 不交互: 链接或按钮不是标签 |
| [页眉](https://npmcn.com/package/%40dume/ds/css/components/header.css) | `.ds-c-header`, (中文(简体) ), `__brand`, (中文(简体) ), `__link` | 一个站点的页眉:它的名称和导航,当前页面的链接(C`aria-current`(以黑体表示) |
| [英雄们](https://npmcn.com/package/%40dume/ds/css/components/hero.css) | `.ds-c-hero`, (中文(简体) ), `--media`, (中文(简体) ), `__media` | `--media`: 图像 (`__media`它的文本旁边,当没有空间时,它就放在它下面。 一个吸引眼睛的街区,比如在主页的顶端: 里面的每样东西都要大一点,不管水平如何,都行. 页面的h1在其他方面是属于自己的大小. `--ds-c-hero-size-heading` 财务报告和审定财务报表 `--ds-c-hero-size-text` 设置其标题和文本大小 |
| [页脚](https://npmcn.com/package/%40dume/ds/css/components/footer.css) | `.ds-c-footer` | 一个网站的页脚 |
| [链接](https://npmcn.com/package/%40dume/ds/css/components/links.css) | `.ds-c-links` | 一些显著的链接,在主页的介绍之下 |
| [倾斜](https://npmcn.com/package/%40dume/ds/css/components/pagination.css) | `.ds-c-pagination`, (中文(简体) ), `__item` (单位:千美元)`--next`(中文(简体) ) | 链接到系列的上页和下页,如文章:不是为表单的步. 在一个 `<nav>` 带有标签 |
| [进程清单](https://npmcn.com/package/%40dume/ds/css/components/process-list.css) | `.ds-c-process-list` | 过程的步骤,编号,例如服务如何运作:不是任务的进展. 一个 `<ol>` 与 `.ds-l-grid` 财务报告和审定财务报表 `role="list"` |
| [代码](https://npmcn.com/package/%40dume/ds/css/components/code.css) | 棱镜的课 | 棱柱突出显示的代码示例( Okaidia 主题, 对比固定) |

## 发展

与 [维特+](https://viteplus.dev/) (单位:千美元)`vp pack`,其设置在 `vite.config.ts`) (中文(简体) ). 每个文件在 `css/` 声明其自己的地层( e) :`@layer ds.components { … }`),他们的订单设定一次,在 `tokens.css`,它首先出现;它的进口被捆绑在它的地层中:在底部之前实现现代化的正常化(`@import 'modern-normalize' layer(ds.normalize)`),"棱晶"在代码组件前的Okaidia主题. `pnpm build` 写入 `dist/`: 每个样式表, `styles.css` (所有来自 `css/styles.css`, (中文(简体) ), `fonts/` (Bricolage Grotesque的拉丁子集,出自@fontsource-valtable/bricolage-grotesque,即: `css/fonts.css` (声明)和 `web-components/` 他们的类型。 闪电 CSS 保留用于浏览器的语法,其目标(`light-dark()`,筑巢). `pnpm test` (Vitest)检查符名,对比和大小,以及 `<ds-alert>`。 。 。 .

## 常见问题

### @dume/ds 是什么？

我的设计系统:我的项目\(simon\.duhem\.fr, Music Bridge\)共享的风格,设计符号,基础,布局和组件

### 如何安装 @dume/ds？

在项目目录运行 npm install @dume/ds，或使用 pnpm add / yarn add / bun add。

### @dume/ds 支持 TypeScript 吗？

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

### @dume/ds 支持 ESM 还是 CommonJS？

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

### @dume/ds 可以商用吗？

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

### @dume/ds 的下载量有多少？

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

### @dume/ds 还在维护吗？

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