designsystemet
1.0.0
DesignSystemet은 공공 서비스를 구축하는 데 사용할 수있는 중요한 설계 요소, 구성 요소 및 패턴 모음입니다.
우리의 목표는 공공 서비스를위한 디지털 솔루션에서 일관되고 사용자 친화적 인 경험을 만들어보다 효율적이고 신뢰할 수 있도록하는 것입니다.
스토리 북 - React 구성 요소에 대한 미리보기.
Storefront- 설계 시스템에 대한 일반 문서.
테마 - 테마 빌더.
@digdir/designsystemet -DesignSystemet의 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 테마 빌더로 이동하여 DesignSystemet 패키지와 함께 사용할 자신만의 테마를 만들 수 있습니다.
DesignSystemet 테마는 Design-Tokens를 사용하여 정의됩니다. 이것은 Token Studio를 사용하여 미래의 유연성을 제공 할뿐만 아니라 DesignSystemet Figma UI 키트와 코드의 테마를 동기화 할 수 있도록 수행됩니다.
npx @digdir/designsystemet tokens build 실행하여 사용자 정의 테마 용 CSS 파일 (Design-Tokens)을 구축하십시오. 자체 빌드 된 CSS 테마 파일을 사용하면 @digdir/designsystemet-theme 패키지를 사용하여 건너 뛸 수 있습니다.
구성 요소와 함께 글꼴을 자유롭게 사용할 수 있습니다.
구성 요소는 다른 글꼴을 사용하는 경우 인터 폰트를 사용하여 설계 및 개발되므로 변형이 발생할 수 있습니다.
<head> 에 <link> 태그를 추가하고 글로벌 CSS 파일에서 font-family 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"
]
} ,
} <span> 또는 <div> 와 같은 HTML 요소의 data-color 및 data-size 속성에 대한 편집기 힌트를 원할 수 있습니다. 이러한 속성은 이러한 요소 내에 중첩 된 구성 요소에 영향을 줄 수 있기 때문입니다.
이를 위해서는 React의 내장 유형을 보강해야하므로 옵트 인입니다. 이것을 원한다면 다음을 tsconfig.json 에 추가하십시오.
{
// ...other settings
"compilerOptions" : {
// ...other compilerOptions
"types" : [
// ...other types
"@digdir/designsystemet-react/react-types.d.ts"
]
} ,
} 행동 강령 및 기고 가이드를 읽어이 프로젝트에 어떻게 기여할 수 있는지 알아보십시오.
우리는 디자인 시스템을 도와주는 훌륭한 사람들을 갖게되어 운이 좋다.
UI 변경을 검토하고 시각적 회귀를 포착하는 데 도움이되는 시각적 테스트 플랫폼을 제공 한 rarcomice에게 감사드립니다.
