From 72f80b767055fb6b44995f4f612b23efe1461e69 Mon Sep 17 00:00:00 2001
From: alastair-simon <alastairfraser.work@gmail.com>
Date: Mon, 19 Jan 2026 18:24:47 +0100
Subject: [PATCH 1/2] feat: add font import inter

---
 packages/component-library/.storybook/preview.ts       |  1 +
 packages/component-library/src/assets/fonts.css        |  6 ++++++
 .../component-library/src/components/button/Button.css |  6 +++---
 .../component-library/src/components/input/Input.css   | 10 +++++-----
 .../component-library/src/components/modal/Modal.css   |  8 ++++----
 packages/component-library/src/index.ts                |  3 +++
 6 files changed, 22 insertions(+), 12 deletions(-)
 create mode 100644 packages/component-library/src/assets/fonts.css

diff --git a/packages/component-library/.storybook/preview.ts b/packages/component-library/.storybook/preview.ts
index bd3c061..252c8cc 100644
--- a/packages/component-library/.storybook/preview.ts
+++ b/packages/component-library/.storybook/preview.ts
@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook/react';
+import '../src/assets/fonts.css';
 
 const preview: Preview = {
   parameters: {
diff --git a/packages/component-library/src/assets/fonts.css b/packages/component-library/src/assets/fonts.css
new file mode 100644
index 0000000..33417c6
--- /dev/null
+++ b/packages/component-library/src/assets/fonts.css
@@ -0,0 +1,6 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+/* CSS Variable for font family - allows easy override by consumers */
+:root {
+    --component-library-font-family: 'Inter', sans-serif;
+}
\ No newline at end of file
diff --git a/packages/component-library/src/components/button/Button.css b/packages/component-library/src/components/button/Button.css
index ef01068..26a4f20 100644
--- a/packages/component-library/src/components/button/Button.css
+++ b/packages/component-library/src/components/button/Button.css
@@ -6,8 +6,8 @@
   gap: 8px;
   border: none;
   border-radius: 8px;
-  font-weight: 500;
-  font-family: sans-serif;
+  font-weight: 200;
+  font-family: var(--component-library-font-family, 'Inter', sans-serif);
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   position: relative;
@@ -152,4 +152,4 @@
   to {
     transform: rotate(360deg);
   }
-}
+}
\ No newline at end of file
diff --git a/packages/component-library/src/components/input/Input.css b/packages/component-library/src/components/input/Input.css
index 473b894..c49105a 100644
--- a/packages/component-library/src/components/input/Input.css
+++ b/packages/component-library/src/components/input/Input.css
@@ -10,7 +10,7 @@
   width: 100%;
   border: 1px solid rgb(203, 213, 225);
   border-radius: 6px;
-  font-family: sans-serif;
+  font-family: var(--component-library-font-family, 'Inter', sans-serif);
   transition: all 0.2s ease-in-out;
   background-color: white;
   color: rgb(15, 23, 42);
@@ -59,17 +59,17 @@
   font-size: 0.875em;
   font-weight: 500;
   color: rgb(51, 65, 85);
-  font-family: sans-serif;
+  font-family: var(--component-library-font-family, 'Inter', sans-serif);
 }
 
 .input__error {
   font-size: 0.875em;
   color: rgb(220, 38, 38);
-  font-family: sans-serif;
+  font-family: var(--component-library-font-family, 'Inter', sans-serif);
 }
 
 .input__helper {
   font-size: 0.875em;
   color: rgb(100, 116, 139);
-  font-family: sans-serif;
-}
+  font-family: var(--component-library-font-family, 'Inter', sans-serif);
+}
\ No newline at end of file
diff --git a/packages/component-library/src/components/modal/Modal.css b/packages/component-library/src/components/modal/Modal.css
index 25cddb7..6dbefeb 100644
--- a/packages/component-library/src/components/modal/Modal.css
+++ b/packages/component-library/src/components/modal/Modal.css
@@ -41,11 +41,11 @@
   font-size: 1.25em;
   font-weight: 600;
   color: rgb(15, 23, 42);
-  font-family: sans-serif;
+  font-family: var(--component-library-font-family, 'Inter', sans-serif);
 }
 
 .modal__content {
-  font-family: sans-serif;
+  font-family: var(--component-library-font-family, 'Inter', sans-serif);
   font-size: 1rem;
 }
 
@@ -64,7 +64,7 @@
   justify-content: center;
   border-radius: 4px;
   transition: all 0.2s ease-in-out;
-  font-family: sans-serif;
+  font-family: var(--component-library-font-family, 'Inter', sans-serif);
 }
 
 .modal__close:hover {
@@ -104,4 +104,4 @@
     transform: translateY(0);
     opacity: 1;
   }
-}
+}
\ No newline at end of file
diff --git a/packages/component-library/src/index.ts b/packages/component-library/src/index.ts
index f1ff337..22f5a27 100644
--- a/packages/component-library/src/index.ts
+++ b/packages/component-library/src/index.ts
@@ -1,3 +1,6 @@
+// Global styles (includes Inter font from Google Fonts)
+import './assets/fonts.css';
+
 // Components
 export { Button } from './components/button/Button';
 export { Input } from './components/input/Input';

From 1e792d48a52871b0285bf6aa82af27130e7bae8c Mon Sep 17 00:00:00 2001
From: alastair-simon <alastairfraser.work@gmail.com>
Date: Mon, 19 Jan 2026 18:37:58 +0100
Subject: [PATCH 2/2] feat: create imports

---
 .../component-library/src/components/button/Button.css    | 4 ++--
 packages/component-library/src/components/input/Input.css | 8 ++++----
 packages/component-library/src/components/modal/Modal.css | 6 +++---
 packages/component-library/src/font.ts                    | 2 ++
 packages/component-library/src/index.ts                   | 3 ---
 5 files changed, 11 insertions(+), 12 deletions(-)
 create mode 100644 packages/component-library/src/font.ts

diff --git a/packages/component-library/src/components/button/Button.css b/packages/component-library/src/components/button/Button.css
index 26a4f20..a0bbfcf 100644
--- a/packages/component-library/src/components/button/Button.css
+++ b/packages/component-library/src/components/button/Button.css
@@ -6,8 +6,8 @@
   gap: 8px;
   border: none;
   border-radius: 8px;
-  font-weight: 200;
-  font-family: var(--component-library-font-family, 'Inter', sans-serif);
+  font-weight: 400;
+  font-family: var(--component-library-font-family);
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   position: relative;
diff --git a/packages/component-library/src/components/input/Input.css b/packages/component-library/src/components/input/Input.css
index c49105a..9a0fd1a 100644
--- a/packages/component-library/src/components/input/Input.css
+++ b/packages/component-library/src/components/input/Input.css
@@ -10,7 +10,7 @@
   width: 100%;
   border: 1px solid rgb(203, 213, 225);
   border-radius: 6px;
-  font-family: var(--component-library-font-family, 'Inter', sans-serif);
+  font-family: var(--component-library-font-family);
   transition: all 0.2s ease-in-out;
   background-color: white;
   color: rgb(15, 23, 42);
@@ -59,17 +59,17 @@
   font-size: 0.875em;
   font-weight: 500;
   color: rgb(51, 65, 85);
-  font-family: var(--component-library-font-family, 'Inter', sans-serif);
+  font-family: var(--component-library-font-family);
 }
 
 .input__error {
   font-size: 0.875em;
   color: rgb(220, 38, 38);
-  font-family: var(--component-library-font-family, 'Inter', sans-serif);
+  font-family: var(--component-library-font-family);
 }
 
 .input__helper {
   font-size: 0.875em;
   color: rgb(100, 116, 139);
-  font-family: var(--component-library-font-family, 'Inter', sans-serif);
+  font-family: var(--component-library-font-family);
 }
\ No newline at end of file
diff --git a/packages/component-library/src/components/modal/Modal.css b/packages/component-library/src/components/modal/Modal.css
index 6dbefeb..d3ea443 100644
--- a/packages/component-library/src/components/modal/Modal.css
+++ b/packages/component-library/src/components/modal/Modal.css
@@ -41,11 +41,11 @@
   font-size: 1.25em;
   font-weight: 600;
   color: rgb(15, 23, 42);
-  font-family: var(--component-library-font-family, 'Inter', sans-serif);
+  font-family: var(--component-library-font-family);
 }
 
 .modal__content {
-  font-family: var(--component-library-font-family, 'Inter', sans-serif);
+  font-family: var(--component-library-font-family);
   font-size: 1rem;
 }
 
@@ -64,7 +64,7 @@
   justify-content: center;
   border-radius: 4px;
   transition: all 0.2s ease-in-out;
-  font-family: var(--component-library-font-family, 'Inter', sans-serif);
+  font-family: var(--component-library-font-family);
 }
 
 .modal__close:hover {
diff --git a/packages/component-library/src/font.ts b/packages/component-library/src/font.ts
new file mode 100644
index 0000000..3b82447
--- /dev/null
+++ b/packages/component-library/src/font.ts
@@ -0,0 +1,2 @@
+// Global styles (includes Inter font from Google Fonts)
+import './assets/fonts.css';
\ No newline at end of file
diff --git a/packages/component-library/src/index.ts b/packages/component-library/src/index.ts
index 22f5a27..f1ff337 100644
--- a/packages/component-library/src/index.ts
+++ b/packages/component-library/src/index.ts
@@ -1,6 +1,3 @@
-// Global styles (includes Inter font from Google Fonts)
-import './assets/fonts.css';
-
 // Components
 export { Button } from './components/button/Button';
 export { Input } from './components/input/Input';