From 775d4d7ebdf274e4cc8cc707bcb1d78fc1035981 Mon Sep 17 00:00:00 2001
From: Danne Lundqvist <danne@dotvoid.com>
Date: Wed, 13 Dec 2023 10:58:22 +0100
Subject: [PATCH] Added font weights for light, medium, bold and extra bold

---
 src/showroom/app.tsx                   |  2 +
 src/showroom/components/typography.tsx | 62 ++++++++++++++++++++++++++
 vite.config.ts                         |  2 +-
 3 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 src/showroom/components/typography.tsx

diff --git a/src/showroom/app.tsx b/src/showroom/app.tsx
index 66548344..5fe1543d 100644
--- a/src/showroom/app.tsx
+++ b/src/showroom/app.tsx
@@ -12,9 +12,11 @@ import { BadgeExample } from './components/badge'
 import { TooltipExample } from './components/tooltip'
 import { TabsExample } from './components/tabs'
 import { CalendarExample } from './components/calendar'
+import { TypographyExample } from './components/typography'
 
 export function App(): JSX.Element {
   return <div className="grid grid-cols-2 gap-4 gap-y-8 max-w-[900px] m-10">
+    <TypographyExample />
     <ButtonExample />
     <InputExample />
     <PopoverExample />
diff --git a/src/showroom/components/typography.tsx b/src/showroom/components/typography.tsx
new file mode 100644
index 00000000..dea8c65d
--- /dev/null
+++ b/src/showroom/components/typography.tsx
@@ -0,0 +1,62 @@
+import { Header } from '../header'
+import { Code } from '../code'
+
+export function TypographyExample(): JSX.Element {
+  const exampleString = 'å ä æ ö ø Þ ß Å Ä Æ Ö Ø þ'
+
+  return <>
+    <Header>Typography</Header>
+
+    <div>
+      <div className="font-light">
+        Light text<br />
+        {exampleString}
+      </div>
+    </div>
+    <Code code={`<div className="font-light">
+Normal text
+</div>`} />
+
+    <div>
+      <div className="font-normal">
+        Normal text<br />
+        {exampleString}
+      </div>
+    </div>
+    <Code code={`<div className="font-normal">
+Normal text
+</div>`} />
+
+    <div>
+      <div className="font-medium">
+        Medium text<br />
+        {exampleString}
+      </div>
+    </div>
+    <Code code={`<div className="font-medium">
+Medium text
+</div>`} />
+
+    <div>
+      <div className="font-bold">
+        Bold text<br />
+        {exampleString}
+      </div>
+    </div>
+    <Code code={`<div className="font-bold">
+Bold text
+</div>`} />
+
+    <div>
+      <div className="font-extrabold">
+        Extra bold text<br />
+        {exampleString}
+      </div>
+    </div>
+    <Code code={`<div className="font-extrabold">
+Extra bold text
+</div>`} />
+
+
+  </>
+}
diff --git a/vite.config.ts b/vite.config.ts
index 5ac650d2..3d446a78 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -44,7 +44,7 @@ export default defineConfig({
           dest: './styles'
         },
         {
-          src: 'node_modules/@fontsource/inter/files/inter-latin-400-normal.{woff,woff2}',
+          src: 'node_modules/@fontsource/inter/files/inter-latin-{300,400,500,700,800}-normal.{woff,woff2}',
           dest: './styles'
         }
       ]