Docs: Added Typography and Icons to Foundation section

.storybook/preview.tsx

@@ -2,6 +2,9 @@ import React from "react";
 import { CssBaseline } from "@mui/material";
 import type { Preview } from "@storybook/react";
 import "@fontsource-variable/inter";
+import "@fontsource-variable/outfit";
+import "@fontsource/ibm-plex-mono";
+import "@fontsource/ibm-plex-mono/600.css";
 import "./storybook.css"; /* Storybook CSS override */
 import { ThemeProvider } from "../src";
 import { DiamondDSTheme } from "../src";

.storybook/storybook.css

@@ -1,16 +1,4 @@
-:root:not(.MuiTypography-root) {
-  --sb-ds-font-body:
-    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Helvetica, Arial, sans-serif;
-
-  --sb-ds-font-heading:
-    "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Helvetica, Arial, sans-serif;
-
-  --sb-ds-font-mono:
-    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    "Liberation Mono", "Courier New", monospace;
-
+:root {
   --sb-ds-background: #f6f6f9;
   --sb-ds-surface: #ffffff;
   --sb-ds-surface-container: #eef1f5;
@@ -43,14 +31,14 @@ body .sbdocs:not(.MuiTypography-root) {
 .sbdocs li:not(.MuiTypography-root),
 .sbdocs :where(div:not(.sb-anchor, .sb-unstyled, .sb-unstyled div)),
 .sbdocs :where(span:not(.sb-anchor, .sb-unstyled, .sb-unstyled span)) {
-  font-family: var(--sb-ds-font-body) !important;
+  font-family: var(--ds-font-family-default) !important;
 }
 
 /* Headings use Outfit or Inter */
 
 .sbdocs h1.sbdocs-title,
 .sbdocs.sbdocs-content h1:not(.MuiTypography-root) {
-  font-family: var(--sb-ds-font-heading);
+  font-family: var(--ds-font-family-display);
 }
 
 .sbdocs h2:not(.MuiTypography-root),
@@ -60,7 +48,7 @@ body .sbdocs:not(.MuiTypography-root) {
 .sbdocs h6:not(.MuiTypography-root),
 table th:not(.MuiTypography-root),
 table td:not(.MuiTypography-root) {
-  font-family: var(--sb-ds-font-body);
+  font-family: var(--ds-font-family-default);
 }
 /* Code uses IBM Plex Mono */
 code:not(.MuiTypography-root),
@@ -70,8 +58,9 @@ code:not(.MuiTypography-root),
 .sbdocs samp:not(.MuiTypography-root),
 .token:not(.MuiTypography-root),
 pre .language-text:not(.MuiTypography-root),
-pre .language-tsx:not(.MuiTypography-root) {
-  font-family: var(--sb-ds-font-mono) !important;
+pre .language-tsx:not(.MuiTypography-root),
+pre .language-shell:not(.MuiTypography-root) {
+  font-family: var(--ds-font-family-mono) !important;
 }
 
 /* DS DOCS */
@@ -170,7 +159,7 @@ pre .language-tsx:not(.MuiTypography-root) {
 }
 .ds-docs .ds-table th,
 .ds-docs .ds-table td {
-  font-family: var(--sb-ds-font-body);
+  font-family: var(--ds-font-family-default);
   border-bottom: 1px solid var(--sb-ds-border-subtle);
   padding: 10px 12px;
   text-align: left;

package.json

@@ -56,7 +56,9 @@
     "dev:preview": "pnpm --dir ./dev preview"
   },
   "dependencies": {
-    "@fontsource-variable/inter": "^5.2.8",
+    "@fontsource-variable/inter": "^5.3.0",
+    "@fontsource-variable/outfit": "^5.3.0",
+    "@fontsource/ibm-plex-mono": "^5.3.0",
     "@mui/icons-material": "^7.0.0",
     "react-icons": "^5.3.0",
     "utif": "^3.1.0"
@@ -81,9 +83,9 @@
     "@emotion/styled": "^11.13.0",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^10.0.1",
-    "@fontsource/ibm-plex-mono": "^5.2.7",
-    "@fontsource/inter": "^5.2.8",
-    "@fontsource/outfit": "^5.2.8",
+    "@fontsource/ibm-plex-mono": "^5.3.0",
+    "@fontsource/inter": "^5.3.0",
+    "@fontsource/outfit": "^5.3.0",
     "@jsonforms/core": "^3.7.0",
     "@jsonforms/material-renderers": "^3.7.0",
     "@jsonforms/react": "^3.7.0",
@@ -123,6 +125,7 @@
     "gh-pages": "^6.2.0",
     "jsdom": "^29.1.1",
     "keycloak-js": "^26.2.1",
+    "lucide-react": "^1.26.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.12.0",