designsystemet
1.0.0
DesignSyStonEt是一个重要的设计元素，组件和模式的集合，可用于构建公共服务。
我们的目标是在公共服务的数字解决方案中创建一致且用户友好的体验，从而使其更有效和可靠。
Storybook-预览React组件。
店面 - 有关设计系统的一般文档。
主题 - 主题构建器。
@digdir/designsystemet -for DesignSystettonet的CLI。
@digdir/designsystemet-theme designSystemet的主题。
@digdir/designsystemet-css组件的样式。
@digdir/designsystemet-react designSystemet组件的反应实现。
按照以下步骤开始使用React组件。
根据您的需求和技术堆栈安装相关软件包
npm i @digdir/designsystemet
npm i @digdir/designsystemet-css
npm i @digdir/designsystemet-theme
npm i @digdir/designsystemet-react 您可以通过转到我们的主题构建器来创建自己的主题，以与DesignSytoneT软件包一起使用。
DesignSyStonTemet主题是使用Design-Tokens定义的。这样做是为了使您可以使用代币工作室将您的主题与DesignSystoneT Figma UI套件同步，此外还可以提供未来的灵活性。
运行npx @digdir/designsystemet tokens build以构建自定义主题（来自Design-Tokens）的CSS文件。使用自己构建的CSS主题文件，您可以使用@digdir/designsystemet-theme软件包跳过。
您可以自由使用任何字体家庭与组件使用。
组件是使用中字体设计和开发的，因此使用不同的字体，可能会发生变化。
在<head>中添加<link>标签，然后将font-family设置为全局CSS文件中的Inter 。
font-feature-settings为小写L S增加了尾巴。
< link
rel =" stylesheet "
href =" https://altinncdn.no/fonts/inter/inter.css "
/> body {
font-family : 'Inter' , sans-serif;
font-feature-settings : 'cv05' 1 ; /* Enable lowercase l with tail */
}如果您选择以不同的方式安装字体，请记住包括400和500 600字体重量。
import '@digdir/designsystemet-theme' ;
import '@digdir/designsystemet-css' ;
import { Button } from '@digdir/designsystemet-react' ;
< Button variant = 'secondary' > I am a button! </ Button > ; @digdir/designsystemet-theme和@digdir/designsystemet-css仅需一次导入一次即可。
因为颜色名称取决于使用哪个主题，因此您必须将以下内容添加到tsconfig.json中以使用具有data-color组件中的所有颜色：
@digdir/designsystemet-theme {
// ...other settings
"compilerOptions" : {
// ...other compilerOptions
"types" : [
// ...other types
"@digdir/designsystemet-theme/colors.d.ts"
]
} ,
} CLI designsystemet tokens build命令将向您选择的输出目录输出colors.d.ts文件。在示例中，将运行<your-path>时使用的实际路径替换。
{
// ...other settings
"compilerOptions" : {
// ...other compilerOptions
"types" : [
// ...other types
"<your-path>/colors.d.ts"
]
} ,
}您可能需要在HTML元素（例如<span>或<div>上进行data-color和data-size属性的编辑提示，因为这些属性会影响嵌套在这些元素中的组件。
这需要增强React的内置类型，因此可以选择加入。如果需要，请将以下内容添加到您的tsconfig.json ：
{
// ...other settings
"compilerOptions" : {
// ...other compilerOptions
"types" : [
// ...other types
"@digdir/designsystemet-react/react-types.d.ts"
]
} ,
} 了解如何通过阅读我们的行为准则和贡献指南来为该项目做出贡献。
我们很幸运能有一群帮助设计系统的人。
感谢色彩疗法提供的视觉测试平台，该平台可帮助我们查看UI更改并捕获视觉回归。
