戴金设计系统-Web组件
该项目是使用Web组件的Daikin设计套件的实施.
使用量
安装软件包开始 :
npm install @daikin-oss/design-system-web-components @daikin-oss/dds-tokens
要部署必要的 CSS 变量,请从 @daikin-oss/dds-tokens 软件包 :
详情请查看 dds- tokens 仓库。 。 。 .
import "@daikin-oss/dds-tokens/css/daikin/Light/variables.css";
您可以在捆绑中导入必要的组件( . js 扩展是可选的):
import "@daikin-oss/design-system-web-components/components/button/index.js";
字体
我们使用机器人作为UI组件的字体. 此字体不包含在我们软件包中,因此开发者需要将它包含在他们的应用中.
所需重量和变式如下:
- 常规( 400), 普通
- 粗体( 700), 正常
带有 Google 字体
如果可以使用外部的CDN,可以使用Google字体来加载.
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
rel="stylesheet"
/>
有字体来源
如果您想要在应用程序中不依赖外部 CDN 来发送字体, 您可以使用类似软件包 字体来源 这样做.
以 :
npm install @fontsource/roboto
然后在您的应用程序中导入 :
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/700.css";
黑暗模式和品牌/主题
由于由Web组件规格来封装样式,主题的应用方式在未来可能会有变化.
对于暗模式支持和非戴金品牌,你需要添加 tokens 在您的 html 中包含 CSS 引用 :
npm install @daikin-oss/dds-tokens
黑暗模式
在 HTML 中引用 CSS :
<link
rel="stylesheet"
href="node_modules/@daikin-oss/dds-tokens/build/css/DKN/Dark/variables.css"
media="(prefers-color-scheme: dark)"
/>
使用 CSS 软件 @import 与 prefers-color-scheme数字 :
@import "@daikin-oss/dds-tokens/css/daikin/Dark/variables.css"
(prefers-color-scheme: dark);
其他品牌/主题
在 HTML 中引用 CSS :
<link
rel="stylesheet"
href="node_modules/@daikin-oss/dds-tokens/build/css/AAF/Dark/variables.css"
media="(prefers-color-scheme: light)"
/>
<link
rel="stylesheet"
href="node_modules/@daikin-oss/dds-tokens/build/css/AAF/Dark/variables.css"
media="(prefers-color-scheme: dark)"
/>
使用 CSS 软件 @import 与 prefers-color-scheme数字 :
@import "@daikin-oss/dds-tokens/css/aaf/Light/variables.css"
(prefers-color-scheme: light);
@import "@daikin-oss/dds-tokens/css/aaf/Dark/variables.css"
(prefers-color-scheme: dark);
捐款
以下是给软件包贡献者的指示.
设置
克隆和安装依赖性 :
git clone https://github.com/dsv-rp/DDS.git
cd DDS
# install dependencies
npm i
# install Playwright browsers
npx playwright install
构建
要构建用于制作的文件 :
npm run build
Vite用于将TypeScript代码转换为在现代浏览器中运行的JavaScript.
已建文件写入 /dist。 。 。 .
文档
故事书用于记录设计系统组件/工具/实例.
要以开发模式运行 :
# Web Components version
npm run storybook
# or React version
npm run storybook:react
生成可分配文件 /storybook-static/web-components 财务报告和审定财务报表 /storybook-static/react 文件夹 :
npm run build-storybook
测试
目前有两套测试套件:VRT(视觉回转测试)和交互测试.
视觉回归测试,放置在 *.visual.test.ts,由 Playwright 在容器中运行完成.
为了消除环境之间的渲染差异,取取截图的浏览器必须在容器上运行.
目前,Web组成部分在大多数主要框架中都得到充分支持 除了反应。 。 。 . 因此,我们单独测试两个Web组件,并在React导入时进行测试:
# start a container for running the browsers
docker compose up -d
# run VRT for Web Components and React versions
npm run test:visual
# stop the container
docker compose down
对 Podman 用户, 使用 podman-compose -f compose.podman.yaml 或者说 podman compose -f compose.podman.yaml 改为 docker compose。 。 。 .
要更新快照, 请使用 npm run test:visual-update
互动测试,放置在 *.stories.ts,由故事书执行,故事书内部也使用Playwright.
相互作用测试不使用容器,因为使环境之间的差异不重要.
npm run test:interaction
林入和类型检查
Linting由ESLint进行,用于JavaScript和TypeScript的普通林克,并 升分析器 键入 lit-html 模板中的检查约束. c spell 键 用于拼写检查. 伊丝-林特 还用于确保使用一致的文件名.
要插入项目, 运行 :
npm run lint
npx tsc -b
如果你遇到一个 Unknown word 错误,将单词添加到 cspell-dictionary.txt。 。 。 .
设计托肯斯
我们管理和使用设计标志,以确保设计系统的一致性.
-
真相来源数字 : 我们使用的标志 是我们设计风格的基础 被从 https://github.com/dsv-rp/dds-tokens (中文(简体) )。 。 。 . 这些设计符被作为CSS变量来部署.
-
组件使用量数字 : 这些组件通过引用CSS变量来使用设计符号. 由于它们与Tailwind CSS集成在一起,它们大多被用作公用类,但在某些情况下直接使用
var()。 。 。 .
@ddsElement("daikin-link")
export class DaikinLink extends DDSElement {
static override readonly styles = css`
${unsafeCSS(tailwindStyles)}
:host([show-visited]:not([disabled])) a:visited {
/* HERE */
color: var(--dds-color-link-text-visited-default);
}
`;
override render() {
/* AND HERE (`text-ddt-*` classes) */
return html`
<a
class="text-ddt-color-link-text-default hover:text-ddt-color-link-text-hover"
href="https://www.example.com/"
>
...
</a>
`;
}
}
尾风CSS
有个习俗 daikinPlugin 管理 这里。 。 。 .
与 VSCode 一起开发
该项目为VSCode提供了推荐的扩展和工作空间设置.
参考资料 戴金设计套件