Typography fixes

src/markdoc/nodes/Item.svelte

@@ -9,7 +9,7 @@
 
     $: classes = (() => {
         if (inDocs) return '';
-        if (inChangelog) return '';
+        if (inChangelog) return 'aw-paragraph-lg';
         if (inPolicy) return '';
         return 'aw-paragraph-lg';
     })();

src/markdoc/nodes/Link.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
+    import { isInDocs } from '$lib/layouts/Docs.svelte';
     import { isInChangelog } from '$markdoc/layouts/Changelog.svelte';
-    import { hasContext } from 'svelte';
 
     export let href: string;
     export let title: string;
@@ -9,11 +9,11 @@
     const target = isExternal ? '_blank' : undefined;
     const rel = isExternal ? 'noopener nofollow' : undefined;
 
-    const isDocs = hasContext('isDocs');
+    const inDocs = isInDocs();
     const inChangelog = isInChangelog();
 
     $: classes = (() => {
-        if (isDocs) return 'aw-paragraph-md';
+        if (inDocs) return 'aw-paragraph-md';
         if (inChangelog) return 'aw-paragraph-lg in-changelog';
         return '';
     })();

src/markdoc/nodes/Paragraph.svelte

@@ -3,9 +3,10 @@
     import { isInPolicy } from '$markdoc/layouts/Policy.svelte';
     import { getContext, hasContext } from 'svelte';
     import { isInTable } from './Table.svelte';
+    import { isInDocs } from '$lib/layouts/Docs.svelte';
 
     const noParagraph = hasContext('no-paragraph') ? getContext('no-paragraph') : false;
-    const isDocs = getContext<boolean>('isDocs') ?? false;
+    const inDocs = isInDocs();
     const inPolicy = isInPolicy();
     const inChangelog = isInChangelog();
     const inTable = isInTable();
@@ -14,7 +15,7 @@
     export { className as class };
 
     $: classes = (() => {
-        if (isDocs) return 'aw-paragraph-md';
+        if (inDocs) return 'aw-paragraph-md';
         if (inPolicy) return 'aw-paragraph-md in-policy';
         if (inTable) return 'aw-paragraph-md';
         if (inChangelog) return 'aw-paragraph-lg in-changelog';

src/scss/1-css-variables/_fonts.scss

@@ -3,6 +3,7 @@
   --aw-font-family-aeonik-pro: 'Aeonik Pro', arial, sans-serif;
   --aw-font-family-inter: 'Inter', arial, sans-serif;
   --aw-font-family-aeonik-fono: 'Aenoik Fono', monospace;
+  --aw-font-family-fira-code: 'Fira Code', monospace;
 }
 :root {
   --aw-font-size-micro:  #{pxToRem(12)};

src/scss/3-fonts/_fira-code.scss

@@ -0,0 +1,37 @@
+@use '../abstract' as *;
+
+@font-face {
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('/fonts/fira-code/fira-code-latin-300-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/fira-code/fira-code-latin-400-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('/fonts/fira-code/fira-code-latin-500-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('/fonts/fira-code/fira-code-latin-600-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Fira Code';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/fira-code/fira-code-latin-700-normal.woff2') format('woff2');
+}

src/scss/3-fonts/_index.scss

@@ -1,3 +1,4 @@
 @forward "aeonik-pro";
 @forward "aeonik-fono";
-@forward "inter";
+@forward "inter";
+@forward "fira-code";

src/scss/6-elements/_inline-code.scss

@@ -1,11 +1,15 @@
 @use '../abstract' as *;
 
 .#{$p}-inline-code {
-  --p-inline-code-text-color: var(--aw-color-secondary);
-  --p-inline-code-bg-color: var(--aw-color-smooth);
+    --p-inline-code-text-color: var(--aw-color-secondary);
+    --p-inline-code-bg-color: var(--aw-color-smooth);
 
-  color: hsl(var(--p-inline-code-text-color));
-  background-color: hsl(var(--p-inline-code-bg-color));
+    color: hsl(var(--p-inline-code-text-color));
+    background-color: hsl(var(--p-inline-code-bg-color));
 
-  display:inline-flex; padding-inline:pxToRem(4); padding-block:pxToRem(1); border-radius:pxToRem(4); font-family:monospace;
-}
+    display: inline-flex;
+    padding-inline: pxToRem(4);
+    padding-block: pxToRem(1);
+    border-radius: pxToRem(4);
+    font-family: var(--aw-font-family-fira-code);
+}

src/scss/6-elements/text-tokens/_code.scss

@@ -1,6 +1,6 @@
 @use '../../abstract' as *;
 .#{$p}-code {
-  --p-font-family: monospace;
+  --p-font-family: var(--aw-font-family-fira-code);
   --p-font-size: var(--aw-font-size-micro);
   --p-line-height: var(--aw-line-height-tiny);
   --p-letter-spacing: var(--aw-letter-spacing-none);