Add JetBrains Mono

Author: Panthevm

packages/react-components/.storybook/preview-head.html

@@ -1,3 +1,7 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+<link
+    href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+    rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
+    rel="stylesheet">

packages/react-components/src/index.css

@@ -94,4 +94,5 @@
 
 @theme inline {
 	--font-family-sans: "Inter", system-ui, sans-serif;
-}
+	--font-family-mono: "JetBrains Mono", monospace;
+}

packages/react-components/src/typography.css

@@ -14,6 +14,13 @@ body {
 	line-height: var(--font-leading-5);
 }
 
+.typo-code {
+	font-size: var(--font-size-sm);
+	font-family: var(--font-family-mono);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--font-leading-5);
+}
+
 .typo-label {
 	font-size: var(--font-size-sm);
 	font-family: var(--font-family-sans);
@@ -88,4 +95,4 @@ body {
 	font-weight: var(--font-weight-semibold);
 	line-height: var(--font-leading-none);
 	letter-spacing: var(--font-tracking-tight);
-}
+}