# Designsystemet 设计系统 ## Designsystemet 设计系统界面预览 使用原生字符计数器，切换主题和尺寸，并根据内容的变化决定是否保留或使确认状态失效。 ## Designsystemet 设计系统设计参考 @digdir/designsystemet-css/web 1.23.0 中的默认主题导出项和原生 ds-field 实现。颜色行明确记录浅色模式的取值。 ### 默认浅色强调色用途 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --ds-color-accent-background-default | #fff | 1.23.0 中的实际默认浅色主题用途。运行时的深色方案使用单独的用途值。 | | --ds-color-accent-background-tinted | #eef4fa | 1.23.0 中的实际默认浅色主题用途。运行时的深色方案使用单独的用途值。 | | --ds-color-accent-surface-tinted | #ddeaf6 | 1.23.0 中的实际默认浅色主题用途。运行时的深色方案使用单独的用途值。 | | --ds-color-accent-surface-hover | #c7ddf0 | 1.23.0 中的实际默认浅色主题用途。运行时的深色方案使用单独的用途值。 | | --ds-color-accent-border-subtle | #99c0e3 | 1.23.0 中的实际默认浅色主题用途。运行时的深色方案使用单独的用途值。 | | --ds-color-accent-border-default | #2a7cc5 | 1.23.0 中的实际默认浅色主题用途。运行时的深色方案使用单独的用途值。 | | --ds-color-accent-text-default | #002c54 | 1.23.0 中的实际默认浅色主题用途。运行时的深色方案使用单独的用途值。 | | --ds-color-accent-base-default | #0062ba | 1.23.0 中的实际默认浅色主题用途。运行时的深色方案使用单独的用途值。 | | --ds-color-accent-base-hover | #004f96 | 1.23.0 中的实际默认浅色主题用途。运行时的深色方案使用单独的用途值。 | | --ds-color-accent-base-active | #003d75 | 1.23.0 中的实际默认浅色主题用途。运行时的深色方案使用单独的用途值。 | | --ds-color-accent-base-contrast-default | #fff | 1.23.0 中的实际默认浅色主题用途。运行时的深色方案使用单独的用途值。 | ### 默认浅色中性色用途 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --ds-color-neutral-background-default | #fff | 使用中性用途呈现辅助界面表面和文本，避免赋予不必要的状态含义。 | | --ds-color-neutral-background-tinted | #f3f3f4 | 使用中性用途呈现辅助界面表面和文本，避免赋予不必要的状态含义。 | | --ds-color-neutral-surface-default | #fff | 使用中性用途呈现辅助界面表面和文本，避免赋予不必要的状态含义。 | | --ds-color-neutral-surface-tinted | #e8e8e9 | 使用中性用途呈现辅助界面表面和文本，避免赋予不必要的状态含义。 | | --ds-color-neutral-border-subtle | #bbbcbd | 使用中性用途呈现辅助界面表面和文本，避免赋予不必要的状态含义。 | | --ds-color-neutral-text-subtle | #5b5d60 | 使用中性用途呈现辅助界面表面和文本，避免赋予不必要的状态含义。 | | --ds-color-neutral-text-default | #292c30 | 使用中性用途呈现辅助界面表面和文本，避免赋予不必要的状态含义。 | | --ds-color-neutral-base-default | #24272b | 使用中性用途呈现辅助界面表面和文本，避免赋予不必要的状态含义。 | | --ds-color-neutral-base-contrast-default | #fff | 使用中性用途呈现辅助界面表面和文本，避免赋予不必要的状态含义。 | ### 尺寸模式与字体基础 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --ds-size-mode-font-size--sm | 1 | 实际导出的标量值或表达式。请使用 data-size 模式，而不要将每个标量值都解释为像素值。 | | --ds-size-mode-font-size--md | 1.125 | 实际导出的标量值或表达式。请使用 data-size 模式，而不要将每个标量值都解释为像素值。 | | --ds-size-mode-font-size--lg | 1.3125 | 实际导出的标量值或表达式。请使用 data-size 模式，而不要将每个标量值都解释为像素值。 | | --ds-size-base | 18 | 实际导出的标量值或表达式。请使用 data-size 模式，而不要将每个标量值都解释为像素值。 | | --ds-font-family | Inter | 实际导出的标量值或表达式。请使用 data-size 模式，而不要将每个标量值都解释为像素值。 | | --ds-font-weight-regular | 400 | 实际导出的标量值或表达式。请使用 data-size 模式，而不要将每个标量值都解释为像素值。 | | --ds-font-weight-medium | 500 | 实际导出的标量值或表达式。请使用 data-size 模式，而不要将每个标量值都解释为像素值。 | | --ds-font-weight-semibold | 600 | 实际导出的标量值或表达式。请使用 data-size 模式，而不要将每个标量值都解释为像素值。 | | --ds-line-height-sm | 1.3 | 实际导出的标量值或表达式。请使用 data-size 模式，而不要将每个标量值都解释为像素值。 | | --ds-line-height-md | 1.5 | 实际导出的标量值或表达式。请使用 data-size 模式，而不要将每个标量值都解释为像素值。 | | --ds-line-height-lg | 1.7 | 实际导出的标量值或表达式。请使用 data-size 模式，而不要将每个标量值都解释为像素值。 | | --ds-border-radius-base | 0.25rem | 实际导出的标量值或表达式。请使用 data-size 模式，而不要将每个标量值都解释为像素值。 | | --ds-border-radius-sm | min(.5 * var(--ds-border-radius-base), var(--ds-border-radius-scale)) | 实际导出的标量值或表达式。请使用 data-size 模式，而不要将每个标量值都解释为像素值。 | | --ds-border-radius-md | min(var(--ds-border-radius-base), 2 * var(--ds-border-radius-scale)) | 实际导出的标量值或表达式。请使用 data-size 模式，而不要将每个标量值都解释为像素值。 | | --ds-border-radius-lg | min(2 * var(--ds-border-radius-base), 5 * var(--ds-border-radius-scale)) | 实际导出的标量值或表达式。请使用 data-size 模式，而不要将每个标量值都解释为像素值。 | ## Designsystemet 设计系统完整指南 实用指南，介绍如何为真实界面选择、应用和评审此系统。 完整指导、实现起点和源代码链接。 ## Designsystemet 设计系统行为、CSS 与主题包 ### 按正确顺序加载这三个部分 > Designsystemet 将与框架无关的行为、组件 CSS 和主题值分开。此示例将 designsystemet-web 和 designsystemet-css 固定在 1.23.0，先导入 CSS，再导入默认主题，并且只注册一次行为。只有样式、没有行为包的字段，与此处连接了行为的 ds-field 并非同一种实现。 ### 使用当前的原生-HTML契约 示例使用 ds-field 包裹普通的 input、textarea 和 select 元素，并为其添加 ds-input 类。这样既保留了原生表单控件，也能由软件包关联标签和描述。它没有复制较早的仅使用 React 的字段 API。完整源代码包含正确的软件包导入，以及原应用中的审核逻辑。 ## Designsystemet 设计系统配色方案与尺寸模式 ### 通过数据属性更改外观 页面在根元素上将 data-color-scheme 设置为 light 或 dark。主题会提供相应的语义颜色，而表单值保持不变。参数表明确记录默认的浅色值，并未声称这些相同的十六进制颜色也适用于深色模式。次要外观按钮描述了接下来将执行的操作。 ### 让尺寸模式影响整个系统 阅读尺寸控件会在 sm、md 和 lg 之间切换 data-size。这会更改主题的尺寸模式，而不是只缩放标题。已发布的模式系数为 1、1.125 和 1.3125；它们会参与设计令牌公式，并非要求将控件统一设为这些像素值。此示例还会在手机宽度下测试大尺寸模式。 ## Designsystemet 设计系统 Inter 与语义排版 ### 包含预期字重 预览中包含 Inter 400、500 和 600 字重，并启用文档所述的 cv05 字体特性，以呈现小写字母 l 的字形。页面使用原生标题和段落类，使字重和行高遵循主题。固定为 14px 的注释是专门编写的辅助说明，明确位于主要交互尺寸体系之外。 ### 将辅助内容放在对应控件旁边 标题提示说明标签的用途；结果提示说明预期内容的类型。它们会放在对应控件旁，并通过 ds-field 关联。辅助指南位于单独的卡片中，在窄屏上会排在表单之后。此布局不依赖悬停来显示说明。 ## Designsystemet 设计系统自动关联与字符反馈 ### 让 ds-field 关联一个控件 每个 ds-field 都包含一个类似输入框的控件、它的标签，以及可选的 data-field 描述。软件包会分配 ID，并建立标签与描述之间的关联。将互不相关的控件分组放入同一个 ds-field，会使这项自动关联契约变得模糊。应使用 fieldset 对一组控件进行分组，而不要将此包装器视为通用表单容器。 - 每个 ds-field 中只放一个类似输入框的控件。 - 使用 data-field 描述来呈现相关辅助内容。 - 让原生观察器维护 ID 和 described-by 关联。 ### 了解计数器的计数方式 原生计数器使用 data-limit、data-under 和 data-over，并以剩余或超出的字符数替换 %d。在 1.23.0 中，它会根据 JavaScript 字符串长度计算，并通过 data-label/data-state 提供反馈；超出限制时还会显示无效状态。这并不保证所有表情符号都按字素计数。140 个字符的限制是此示例的写作约束，并非官方的 Designsystemet 内容规则。 ## Designsystemet 设计系统应用验证与审核状态 ### 单独验证用户填写的任务内容 应用要求任务标题和结果均不能为空，并拒绝超过示例限制的结果。显示可执行的提示后，它会将焦点移至相应字段。原生计数器用于说明长度，而提交处理程序负责执行本地审核规则。不会通过 maxlength 静默截断粘贴的文本。 ### 更改呈现方式时保留数据 审核成功后，会以文本形式显示当前标题和结果。编辑任一字段都会清除审核结果；更改外观或尺寸则会保留结果，因为这些控件不会更改任务说明。这一区别是有意为之，并经过验证。数据不会发送到项目管理服务，预览也绝不会声称已创建外部任务。 ## Designsystemet 设计系统完整原生字段实现 ### 复现指定版本的示例 创建一个 Vite vanilla 项目，安装两个固定版本的 Designsystemet 软件包和 Inter，然后保存完整的入口文件和 digdir.css。保留根挂载元素。源代码包含注册逻辑、主题加载顺序、计数器标记、呈现方式控件，以及所有审核验证状态转换。本地预览使用同一个原生字段观察器，而不是手工绘制的仿制版本。 1. 只导入一次行为，然后导入组件 CSS 和默认主题。 2. 加载 Inter 400、500 和 600，并保存完整的入口文件/CSS。 3. 测试超限计数器，并修正结果内容。 4. 执行审核，切换尺寸和外观，然后编辑文本以清除结果。 ### 测试超限和恢复行为 将 150 个普通字符粘贴到结果字段，并确认提示超出限制 10 个字符。审核必须拒绝该内容。将文本替换为简短结果，成功通过审核，然后切换深色模式和阅读尺寸，确认结果仍然保留。编辑标题并确认旧审核结果已清除。在每种视口宽度下检查焦点可见性和文本换行。 ## Designsystemet 设计系统组件示例 ### main.js — 完整的原生字段与主题示例 完整编辑器、真实计数器标记、外观和尺寸控件，以及本地审核验证。 ``` import '@digdir/designsystemet-web'; import '@digdir/designsystemet-css'; import '@digdir/designsystemet-css/theme'; import '@fontsource/inter/latin-400.css'; import '@fontsource/inter/latin-500.css'; import '@fontsource/inter/latin-600.css'; import './digdir.css'; document.documentElement.dataset.colorScheme='light';document.documentElement.dataset.size='md';document.getElementById('root').innerHTML=`

DESIGNSYSTEMET / NATIVE FIELD STUDY

Write a useful task brief

Describe one outcome clearly. The native field connects its label, hint and character feedback while the theme controls size and appearance.

Use a short label that identifies the work.

Describe the result, not a list of implementation instructions.

`;const $=id=>document.getElementById(id);function edit(){$('review').hidden=true;$('error').hidden=true}['title','outcome'].forEach(id=>$(id).addEventListener('input',edit));$('theme').addEventListener('click',()=>{const dark=document.documentElement.dataset.colorScheme!=='dark';document.documentElement.dataset.colorScheme=dark?'dark':'light';$('theme').setAttribute('aria-pressed',String(dark));$('theme').textContent=dark?'Light appearance':'Dark appearance'});$('size').addEventListener('change',e=>document.documentElement.dataset.size=e.target.value);$('brief-form').addEventListener('submit',e=>{e.preventDefault();let message='',focus='outcome';if(!$('title').value.trim()){message='Enter a task title.';focus='title'}else if(!$('outcome').value.trim())message='Describe the desired outcome.';else if($('outcome').value.length>140)message='Shorten the outcome to 140 characters or fewer.';if(message){$('error').textContent=message;$('error').hidden=false;$(focus).focus();return}$('review-title').textContent=$('title').value.trim();$('review-body').textContent=$('outcome').value.trim();$('review').hidden=false;$('review').focus()}); ``` 代码参考 - Select 在 ds-field 中使用当前的 ds-input 样式。计数器反馈由原生观察器管理。 ### digdir.css — 原始响应式布局 围绕原生主题构建的布局，包含 Inter 字体特性设置。 ``` body{margin:0;font-family:Inter,sans-serif;font-feature-settings:"cv05" 1}main{max-width:1160px;margin:auto;padding:32px}header{display:flex;gap:24px;justify-content:space-between;align-items:start}.eyebrow{font-size:13px;letter-spacing:.04em;font-weight:600}.lead{max-width:65ch;margin-top:24px}.layout{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;margin-top:32px}form{display:grid;gap:24px;align-content:start}form button{justify-self:start}aside{padding:24px;align-self:start}aside h3{margin-top:32px}aside select{margin-top:8px}aside li{margin:12px 0}.small{font-size:14px;line-height:1.6}#review{padding:24px;margin-top:32px}#review h3{margin-top:16px}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr;gap:24px}header{flex-direction:column}} ``` 代码参考 - 更改主题和尺寸会保留原有值；只有编辑内容才会使审核失效。 ## Designsystemet 设计系统 Agent 设置 ### 实现起点 已在真实浏览器中测试原生标签关联、计数器状态、验证错误恢复，以及明暗主题下的尺寸变化。 ``` npm create vite@latest ds-brief -- --template vanilla cd ds-brief npm install npm install @digdir/designsystemet-css@1.23.0 @digdir/designsystemet-web@1.23.0 @fontsource/inter # Replace src/main.js and add src/digdir.css. Keep
. npm run dev ``` ### 适用于你项目的提示词 ``` 按照正确顺序，使用 Designsystemet 1.23.0 的行为、CSS 和默认主题构建简报编辑器。使用 ds-field、一个原生控件、实际的 data-field 计数器属性和 Inter 字重。更改外观和尺寸时保留审核状态，编辑内容后清除审核状态，并严格执行原有的 140 字符限制，不截断粘贴的输入。 ``` ## Designsystemet 设计系统来源与范围 由 OpenDesign 编写的本地编辑器，使用 Designsystemet CSS 和 1.23.0 版 Web 行为。默认主题和字段观察器均为原生功能；简报内容、140 字符限制和审核流程为自定义内容。 - 设置与主题顺序 原生行为、CSS、主题和字体配置。 - 主题基础 尺寸、颜色和排版入口。 - 公开实现 带版本控制的 ds-field 观察器和生成的主题。 - 系统范围 共享组件与指南范围。 ## Designsystemet 设计系统相关资源 ### DSFR 了解法国国家设计系统在其机构适用范围内的具体字体排印、网格和手风琴组件 API。在清晰、中立的教学示例中，对比相互关联与彼此独立的展开行为。 ### Europa Component Library 通过完整的原生手风琴任务说明，了解 Europa 的 EC 颜色、字体和间距用途，其中包括键盘操作、全部展开行为，以及无 JavaScript 时的易读回退方案。 ### gov.cz 设计系统 通过包含六项资源的完整阅读工具包，探索 Gov Design System CE 的实际颜色角色、卡片插槽和原生分页，并明确呈现焦点和页面状态。 - [实现参考](https://designsystemet.no/en/fundamentals/code/setup) - [来源](https://github.com/digdir/designsystemet) - [代码参考](https://designsystemet.no/en/fundamentals/code/setup) - [设置与主题顺序 原生行为、CSS、主题和字体配置。](https://designsystemet.no/en/fundamentals/code/setup) - [主题基础 尺寸、颜色和排版入口。](https://designsystemet.no/en/fundamentals) - [公开实现 带版本控制的 ds-field 观察器和生成的主题。](https://github.com/digdir/designsystemet) - [系统范围 共享组件与指南范围。](https://designsystemet.no/en/intro)