Add Inter font to Diamond Theme and update Stroybook typography

.storybook/preview.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { CssBaseline } from "@mui/material";
 import type { Preview } from "@storybook/react";
-
+import "@fontsource-variable/inter";
+import "./storybook.css"; /* Storybook CSS override */
 import { ThemeProvider } from "../src";
 import { GenericTheme, DiamondTheme } from "../src";
 

.storybook/storybook.css

@@ -0,0 +1,58 @@
+:root {
+    --ds-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+
+    --ds-font-heading: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+
+    --ds-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco,
+      Consolas, 'Liberation Mono', 'Courier New', monospace;
+  }
+
+  /* Docs root */
+  .sbdocs, .sbdocs p, .sbdocs li,.sb-unstyled, .sb-unstyled ul, .sb-unstyled li {
+    font-family: var(--ds-font-body);
+    font-size: 16px !important;
+    line-height: 1.6;
+  }
+
+  /* Lists */
+  .sbdocs li {
+    font-size: 16px !important;
+  }
+
+  /* Headings use Outfit or Inter */
+
+  .sbdocs h1 {
+    font-family: var(--ds-font-heading);
+  }
+
+  .sbdocs h3,
+  .sbdocs h4,
+  .sbdocs h5,
+  .sbdocs h6 {
+    font-family: var(--ds-font-body);
+  }
+
+  /* Code uses IBM Plex Mono */
+  .sbdocs code,
+  .sbdocs pre,
+  .sbdocs kbd,
+  .sbdocs samp,
+  .token {
+    font-family: var(--ds-font-mono);
+    font-size: 1em;
+  }
+
+  /* Neutralise Storybook Docs inline preview background wrapper */
+  .sbdocs-preview div[style*="background-color"], #storybook-root div[style*="background-color"] {
+    background-color: transparent !important;
+  }
+
+  .light .sbdocs-preview div[style*="background-color"] {
+    background-color: #f6f6f6 !important;
+  }
+
+  .dark .sbdocs-preview div[style*="background-color"]{
+    background-color: #212121   !important;
+  }

package.json

@@ -49,6 +49,7 @@
     "storybook:publish": "gh-pages -b storybook/publish -d storybook-static"
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.2.8",
     "keycloak-js": "^26.2.1",
     "react-icons": "^5.3.0",
     "utif": "^3.1.0",
@@ -71,6 +72,9 @@
     "@babel/preset-typescript": "^7.26.10",
     "@chromatic-com/storybook": "^3.2.2",
     "@eslint/eslintrc": "^3.2.0",
+    "@fontsource/ibm-plex-mono": "^5.2.7",
+    "@fontsource/inter": "^5.2.8",
+    "@fontsource/outfit": "^5.2.8",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-json": "^6.1.0",

src/themes/DiamondTheme.ts

@@ -10,6 +10,20 @@ const dlsLogoBlue = "#202740";
 const dlsLogoYellow = "#facf07";
 
 const DiamondThemeOptions = mergeThemeOptions({
+  typography: {
+    fontFamily: [
+      "Inter Variable",
+      "Inter",
+      "system-ui",
+      "-apple-system",
+      '"Segoe UI"',
+      "Roboto",
+      "Helvetica",
+      "Arial",
+      "sans-serif",
+    ].join(","),
+  },
+
   logos: {
     normal: {
       src: logoImageLight,