designsystemet
1.0.0
DesignSystemetは、公共サービスの構築に使用できる重要な設計要素、コンポーネント、パターンのコレクションです。
私たちの目標は、公共サービス向けのデジタルソリューションで一貫したユーザーフレンドリーなエクスペリエンスを作成し、それらをより効率的かつ信頼できるものにすることです。
ストーリーブック - Reactコンポーネントのプレビュー。
StoreFront-設計システムに関する一般的なドキュメント。
テーマ - テーマビルダー。
@digdir/designsystemet -cli for designsystemet。
@digdir/designsystemet-themeデザインシステム用のテーマ。
@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テーマは、デザイントケンを使用して定義されています。これは、Token Studioを使用して、将来の柔軟性を提供することに加えて、DesignSystemet Figma UIキットとコードのテーマを同期できるように行われます。
npx @digdir/designsystemet tokens buildを実行して、カスタムテーマのCSSファイルを構築します（デザイントークンから）。独自の構築されたCSSテーマファイルを使用して、 @digdir/designsystemet-themeパッケージを使用してスキップできます。
コンポーネントを備えたフォントファミリーを自由に使用できます。
コンポーネントは、インターフォントを使用して設計および開発されているため、別のフォントを使用するとバリエーションが発生する可能性があります。
<link>タグを<head>に追加し、グローバルCSSファイルでfont-familyをInterに設定します。
font-feature-settings小文字Lに尾を追加します。
< 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 、および600 500ウェイトを含めることを忘れないでください。
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 1回だけインポートする必要があります。
カラー名はどのテーマが使用されているかによって異なるため、 data-colorプロップを持つコンポーネントのすべての色を使用するには、次のテーマをtsconfig.jsonに追加する必要があります。
@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の変更を確認し、視覚回帰をキャッチするのに役立つ視覚的なテストプラットフォームを提供してくれたChromaticに感謝します。
