spread canvas.typography (#171)

Author: thedannywahl

apps/roadmap/package.json

@@ -1,28 +1,28 @@
 {
-  "dependencies": {
-    "@instructure/ui": "^11.2.0",
-    "@instructure/ui-color-utils": "^10.2.0",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
-  },
-  "devDependencies": {
-    "@instructure.ai/shared-configs": "workspace:^"
-  },
-  "name": "@instructure.ai/roadmap",
-  "private": true,
-  "repository": {
-    "directory": "apps/roadmap",
-    "type": "git",
-    "url": "https://github.com/instructure/instructure.ai"
-  },
-  "scripts": {
-    "build": "vite build",
-    "dev": "vite",
-    "lint": "pnpm biome check",
-    "preview": "vite preview",
-    "test": "pnpm vitest run",
-    "typecheck": "tsgo --noEmit"
-  },
-  "type": "module",
-  "version": "1.0.2"
+	"dependencies": {
+		"@instructure/ui": "^11.2.0",
+		"@instructure/ui-color-utils": "^10.2.0",
+		"react": "^19.2.0",
+		"react-dom": "^19.2.0"
+	},
+	"devDependencies": {
+		"@instructure.ai/shared-configs": "workspace:^"
+	},
+	"name": "@instructure.ai/roadmap",
+	"private": true,
+	"repository": {
+		"directory": "apps/roadmap",
+		"type": "git",
+		"url": "https://github.com/instructure/instructure.ai"
+	},
+	"scripts": {
+		"build": "vite build",
+		"dev": "vite",
+		"lint": "pnpm biome check",
+		"preview": "vite preview",
+		"test": "pnpm vitest run",
+		"typecheck": "tsgo --noEmit"
+	},
+	"type": "module",
+	"version": "1.0.2"
 }

apps/roadmap/src/App.tsx

@@ -10,7 +10,6 @@ import {
 	sendHeight,
 } from "./utils";
 import "./App.css";
-import "./assets/fonts/AtkinsonHyperlegibleNext.css";
 
 const App: FC = () => {
 	const [overlayOpen, setOverlayOpen] = useState(false);
@@ -87,7 +86,10 @@ const App: FC = () => {
 			theme={{
 				...canvas,
 				...(brandConfig as object),
-				typography: { fontFamily: "Atkinson Hyperlegible Next, sans-serif" },
+				typography: {
+					...canvas.typography,
+					fontFamily: "Atkinson Hyperlegible Next, sans-serif",
+				},
 			}}
 		>
 			{Entries.length ? (

apps/roadmap/src/Main.tsx

@@ -2,6 +2,7 @@ import { StrictMode } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import App from "./App.tsx";
 import "./Main.css";
+import "./assets/fonts/AtkinsonHyperlegibleNext.css";
 
 const root: HTMLElement =
 	document.getElementById("root") ||

apps/roadmap/src/assets/fonts/AtkinsonHyperlegibleNext.css

@@ -123,4 +123,4 @@
 	font-weight: 800;
 	font-style: italic;
 	font-display: swap;
-}
+}