@ dume/ds (英语)
我的设计系统:我的项目共用的风格((原始内容存档于2018-10-21). simon.duhem.fr,音乐桥...),其自定义属性和类前缀为: ds-。只有项目使用的东西:符号、组件和布局在从一个项目重复到另一个项目时才会出现.
每个组件首先是HTML和CSS:原生元素和一个类,可以在没有JavaScript的任何一页中使用. 网络组件在需要时,是阴影根中的相同组件,加上它增加的行为(见 网络组件) (中文(简体) ).
每个互动要素都有其所有状态,它们都可以使用: 交互式状态。 。 。 .
在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- 名称空间, 在 贝姆 (单位:千美元).ds-l-page--centered)),而只有在一种风格需要它们的地方:一个块的阶级在它的根上,一个元素在它的块样式上,在它内部. 没有通用第一或框架类。 修饰者只有在其块或元素也在没有它的情况下被使用时,或当它是它本身的变体时(.ds-c-field__control--multiline:一个选择或输入是没有它的控制.
选择要添加的内容
在添加任何内容之前,请按顺序通过这些内容,然后在第一个符合时停止:
- 土生土长:基部中的元素样式,无类,或按原样使用(
<progress>, (中文(简体) ),role="status"已载入页中). - 看看这个,对于一个块:一个组件,
.ds-c-*(一张牌,一个按钮). 其变种为变种. - 安排 区块:布局,
.ds-l-*,或其中一种的修改者(.ds-l-cluster) (中文(简体) ). - 行为 浏览器没有,或者一个不是我们的页面:一个基于步骤2组件的网页组件(参见 网络组件) (中文(简体) ).
一个组件不决定其用途:它在页面上的位置(一个提醒没有位置:页面将其放置)及其作用(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,因为不是我们的页面有自己的根字体大小.
| 网络组件 | 模块 | 这是什么 |
|---|---|---|
| 警报 | @dume/ds/web-components/alert.js | <ds-alert>,由屏幕阅读器宣布的页面顶端的信息,关闭时按下按钮或逃逸: showAlert(document, { text, lang, closeLabel, iconUrl, link }),没有自定义元素注册,而扩展的内容脚本没有 |
| 文件字段 | @dume/ds/web-components/file-field.js | <ds-file-field>,围绕页面的文件字段(.ds-c-field),在它的槽中:它还需要一个文件在它的任何地方被丢弃,在它上面显示一个文件(adragging),拒绝一个输入不接受,页面的 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,从设计系统自己的样式表一次显示每个状态的每个交互元素. 页面不能徘徊,也不能按元素本身: Chromium的可访问性测试力 data-state (单位:千美元)hover, (中文(简体) ), focus-visible, (中文(简体) ), active),正如德夫图尔人所做的,所以非常 :hover, (中文(简体) ), :focus-visible 财务报告和审定财务报表 :active 规则适用.
无障碍性测试pnpm --filter @dume/ds test:a11y,在无障碍工作流程中)在两个主题中加载,并配有 Playwright Test:
- 斧头检查它, 所以每个州的对比, 它不能做的页面 没有人徘徊;
- 每个状态必须在休息时查看除元素以外的其他元素(颜色、背景、边框、轮廓、下划线、重量或光标);
- 董事会必须与其截图相符,
tests/screenshots/light.png财务报告和审定财务报表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,显示标题级别,每个级别都有其大小、重量和边距从计算样式、标题及其标记线、文本的元素和堆栈读取。 无障碍测试用斧头检查,检查每个标题级别外观,以及 h6 在文本的大小, 和它的截图, tests/screenshots/typography-light.png 财务报告和审定财务报表 typography-dark.png作为州议会。 在 Playwright 的 Docker 图像中,文本是 system-ui 字体是没有粗体的: <strong> 仅显示截图上的正常重量,计算出的重量为700.
单位
rem大小, 基数 4: 倍数为 4px,0.25rem(单位:千美元)0.5rem是 8px, 时速,1rem16px) (英语). 它们跟随浏览器中选择的字体大小.- 间隔,字体大小, 弧度和边框宽度从符(
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%,这将使每个rem10px (英语). - 例外:一个在不是我们的页面上显示的组件,如音乐桥在音乐页面上的信息,是用px表示的,因为该页面的根字体大小不是我们的.
标准
- 平面 CSS, 无预处理器: 本地嵌入, 自定义属性,
color-mix(), (中文(简体) ),@layer。 。 。 . - 目标: 广泛提供的基准每个主要浏览器 拥有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/ 文件夹按原样装入.
<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 | 现代规范化,然后是 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 | 每个组件一个样式表(见下文) |
@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 把它固定在一个不是我们的页面的顶端, 我们的一页放在它的流中.
<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>
| 构成部分 | 类 | 对于 |
|---|---|---|
| 警报 | .ds-c-alert (单位:千美元)--danger, (中文(简体) ), __icon, (中文(简体) ), __text, (中文(简体) ), __close | 在页面流中选择其位置和角色的信息: status, (中文(简体) ), alert 因为它打断了屏幕阅读器 因为它是紧急的 它的关闭按钮,可选的,一个幽灵按钮,页面的脚本用它关闭. 一个错误, --danger:它的背景和边框被危险的颜色所染上,它的文字说出了什么是错. <ds-alert>标记 |
| 按钮 | .ds-c-button, (中文(简体) ), --outline, (中文(简体) ), --ghost | 一个按钮,或者一个看起来像一个的链接,被填充;一个二次动作或文本中被勾勒;一个幽灵,既不被填充,也不被勾勒出,一个谨慎的行动. 专注、按压、残疾disabled, (中文(简体) ), aria-disabled(中文(简体) ) |
| 纸牌 | .ds-c-card, (中文(简体) ), --horizontal | 一个盒子在页面上, 告诉一个街区 周围是什么. --horizontal:在几行短线旁的一幅相片(圆形),在太长时用椭圆剪接,如相册封面在链接旁,然后是其标题和艺术家 |
| 复选框 | .ds-c-checkbox, (中文(简体) ), __control, (中文(简体) ), __label, (中文(简体) ), __description | 本地的复选框,其旁边的标签和标签下的描述; 在一个纸牌上取出一个盒子. 重点残疾(disabled 管制) |
| 无线电按钮 | .ds-c-radio, (中文(简体) ), __control, (中文(简体) ), __label, (中文(简体) ), __description | 原生无线电按钮 旁边的标签 以及标签下的描述 选择中的收音机按钮 fieldset中的问题 legend: 并列在一个 .ds-l-cluster一个在另一个在a .ds-l-stack. 重点突出、残疾disabled 管制) |
| 外地 | .ds-c-field, (中文(简体) ), __label, (中文(简体) ), __control (单位:千美元)--multiline, (中文(简体) ), __message (单位:千美元)--danger(中文(简体) ) | 一个标签,它的控制 横跨它的容器, 一个信息,它的行。 受控,有重点,无效(aria-invalid,其信息 --danger),已停用。 文件输入有其按钮大纲 . |
| 跳过链接 | .ds-c-skip-link | 主要内容的链接, 当焦点显示时显示 |
| 标记 | .ds-c-tag | "新"等标题外有一两字:小而粗,上为主色. 不交互: 链接或按钮不是标签 |
| 页眉 | .ds-c-header, (中文(简体) ), __brand, (中文(简体) ), __link | 一个站点的页眉:它的名称和导航,当前页面的链接(Caria-current(以黑体表示) |
| 英雄们 | .ds-c-hero, (中文(简体) ), --media, (中文(简体) ), __media | --media: 图像 (__media它的文本旁边,当没有空间时,它就放在它下面。 一个吸引眼睛的街区,比如在主页的顶端: 里面的每样东西都要大一点,不管水平如何,都行. 页面的h1在其他方面是属于自己的大小. --ds-c-hero-size-heading 财务报告和审定财务报表 --ds-c-hero-size-text 设置其标题和文本大小 |
| 页脚 | .ds-c-footer | 一个网站的页脚 |
| 链接 | .ds-c-links | 一些显著的链接,在主页的介绍之下 |
| 倾斜 | .ds-c-pagination, (中文(简体) ), __item (单位:千美元)--next(中文(简体) ) | 链接到系列的上页和下页,如文章:不是为表单的步. 在一个 <nav> 带有标签 |
| 进程清单 | .ds-c-process-list | 过程的步骤,编号,例如服务如何运作:不是任务的进展. 一个 <ol> 与 .ds-l-grid 财务报告和审定财务报表 role="list" |
| 代码 | 棱镜的课 | 棱柱突出显示的代码示例( Okaidia 主题, 对比固定) |
发展
与 维特+ (单位:千美元)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>。 。 。 .