style: use Fira Sans as primary font family

nl-design-system · Aug 26, 2024 · fc8922a · fc8922a
1 parent 399b6f6
commit fc8922a
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 10 deletions.
diff --git a/packages/storybook/config/preview.tsx b/packages/storybook/config/preview.tsx
@@ -10,6 +10,10 @@ import { Preview } from '@storybook/react';
 import '@utrecht/component-library-css/dist/html.css';
 import '@utrecht/component-library-css/dist/index.css';
 import { UtrechtDocument } from '@utrecht/web-component-library-react';
+import '@fontsource/fira-sans/400.css';
+import '@fontsource/fira-sans/400-italic.css';
+import '@fontsource/fira-sans/700.css';
+import '@fontsource/fira-sans/700-italic.css';
 
 const preview: Preview = {
   decorators: [

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -27,6 +27,7 @@
   "devDependencies": {
     "@chromatic-com/storybook": "1.6.1",
     "@etchteam/storybook-addon-status": "5.0.0",
+    "@fontsource/fira-sans": "5.0.21",
     "@nl-rvo/assets": "1.0.0-alpha.360",
     "@rijkshuisstijl-community/assets": "workspace:*",
     "@rijkshuisstijl-community/components-css": "workspace:*",
@@ -37,8 +38,8 @@
     "@rijkshuisstijl-community/logius-design-tokens": "workspace:*",
     "@rijkshuisstijl-community/mijnoverheid-design-tokens": "workspace:*",
     "@rijkshuisstijl-community/rivm-design-tokens": "workspace:*",
-    "@rijkshuisstijl-community/web-components-stencil": "workspace:*",
     "@rijkshuisstijl-community/web-components-react": "workspace:*",
+    "@rijkshuisstijl-community/web-components-stencil": "workspace:*",
     "@storybook/addon-a11y": "8.2.4",
     "@storybook/addon-actions": "8.2.4",
     "@storybook/addon-docs": "8.2.4",
@@ -55,12 +56,12 @@
     "@tabler/icons-react": "3.11.0",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
-    "chromatic": "11.3.0",
     "@utrecht/component-library-css": "4.0.0",
     "@utrecht/component-library-react": "5.0.0",
     "@utrecht/web-component-library-react": "1.2.0",
     "@utrecht/web-component-library-stencil": "1.3.0",
     "@whitespace/storybook-addon-html": "6.1.1",
+    "chromatic": "11.3.0",
     "prettier": "3.3.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/proprietary/design-tokens/figma/figma.tokens.json b/proprietary/design-tokens/figma/figma.tokens.json
@@ -713,7 +713,7 @@
       },
       "font-family": {
         "primary": {
-          "value": "Arial, Verdana, sans-serif",
+          "value": "Fira Sans, Arial, Verdana, sans-serif",
           "type": "fontFamilies"
         },
         "secondary": {