From c9ff62da95d0c3ad75aadf831ca2d7da0ce7ce6c Mon Sep 17 00:00:00 2001
From: Lucien Cartier-Tilet <lucien@phundrak.com>
Date: Sun, 7 Dec 2025 21:27:23 +0100
Subject: [PATCH] feat(css): set up theme

---
 app/assets/css/colors.css        | 84 +++++++++++++++++++++++++++++++
 app/assets/css/main.css          | 20 ++------
 app/assets/css/tailwind.css      | 85 ++++++++++++++++++++++++++++++++
 app/assets/css/ui/background.css | 14 ++++++
 app/assets/css/ui/border.css     | 12 +++++
 app/assets/css/ui/colors.css     |  8 +++
 app/assets/css/ui/index.css      |  4 ++
 app/assets/css/ui/text.css       | 16 ++++++
 8 files changed, 227 insertions(+), 16 deletions(-)
 create mode 100644 app/assets/css/colors.css
 create mode 100644 app/assets/css/tailwind.css
 create mode 100644 app/assets/css/ui/background.css
 create mode 100644 app/assets/css/ui/border.css
 create mode 100644 app/assets/css/ui/colors.css
 create mode 100644 app/assets/css/ui/index.css
 create mode 100644 app/assets/css/ui/text.css

diff --git a/app/assets/css/colors.css b/app/assets/css/colors.css
new file mode 100644
index 0000000..6523115
--- /dev/null
+++ b/app/assets/css/colors.css
@@ -0,0 +1,84 @@
+:root {
+  /* Polar Night */
+  --nord0: #2e3440; /* Darkest - base background (dark mode) */
+  --nord1: #3b4252; /* Dark - elevated surfaces (cards, panels) */
+  --nord2: #434c5e; /* Medium - selections, highlights */
+  --nord3: #4c566a; /* Light - borders, disabled states */
+  /* Snow Storm */
+  --nord4: #d8dee9; /* Dark - elevated (light mode) */
+  --nord5: #e5e9f0; /* Medium - selections (light mode) */
+  --nord6: #eceff4; /* Lightest - base background (light mode) */
+  /* Frost (Blues) */
+  --nord7: #8fbcbb; /* Calm accent */
+  --nord8: #88c0d0; /* PRIMARY brand color */
+  --nord9: #81a1c1; /* Secondary accent */
+  --nord10: #5e81ac; /* Deep accent, links */
+  /* Aurora (Status colors) */
+  --nord11: #bf616a; /* Error, danger (red) */
+  --nord12: #d08770; /* Orange accent */
+  --nord13: #ebcb8b; /* Warning (yellow) */
+  --nord14: #a3be8c; /* Success (green) */
+  --nord15: #b48ead; /* Uncommon (purple) */
+
+  --primary-50: #f0f9ff;
+  --primary-100: #e0f2fe;
+  --primary-200: #b9e6fe;
+  --primary-300: #7dd3fc;
+  --primary-400: #88c0d0; /* nord8 */
+  --primary-500: #88c0d0; /* nord8 - main */
+  --primary-600: #5e81ac; /* nord10 */
+  --PRIMARY-700: #5e81ac;
+  --primary-800: #434c5e; /* nord2 */
+  --primary-900: #2e3440; /* nord0 */
+  --primary-950: #1a1f2e;
+
+  --success-50: #f0fdf4;
+  --success-100: #dcfce7;
+  --success-200: #bbf7d0;
+  --success-300: #86efac;
+  --success-400: #a3be8c; /* nord14 */
+  --success-500: #a3be8c; /* nord14 - main */
+  --success-600: #8a9f75;
+  --success-700: #71805e;
+  --success-800: #586047;
+  --success-900: #3f4030;
+
+  --warning-50: #fefce8;
+  --warning-100: #fef9c3;
+  --warning-200: #fef08a;
+  --warning-300: #fde047;
+  --warning-400: #ebcb8b; /* nord13 */
+  --warning-500: #ebcb8b; /* nord13 - main */
+  --warning-600: #c8ac76;
+  --warning-700: #a58d61;
+  --warning-800: #826e4c;
+  --warning-900: #5f4f37;
+
+  --error-50: #fef2f2;
+  --error-100: #fee2e2;
+  --error-200: #fecaca;
+  --error-300: #fca5a5;
+  --error-400: #bf616a; /* nord11 */
+  --error-500: #bf616a; /* nord11 - main */
+  --error-600: #a2525a;
+  --error-700: #85434a;
+  --error-800: #68343a;
+  --error-900: #4b252a;
+
+  --category-issue: #bf616a; /* nord11 (red) */
+  --category-feature: #81a1c1; /* nord9 (blue) */
+  --category-assistance: #b48ead; /* nord15 (purple) */
+  --category-other: #4c566a; /* nord3 (gray) */
+
+  --text: var(--nord0);
+  --background: var(--nord6);
+  --primary: var(--nord8);
+  --secondary: var(--nord9);
+  --accent: var(--nord7);
+}
+.dark {
+  --text: var(--nord6);
+  --background: var(--nord0);
+  --background-elevated: var(--nord1);
+  --background-hover: var(--nord2);
+}
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 9fab67b..6bd75a9 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -1,18 +1,6 @@
-@import 'tailwindcss';
 @import '@nuxt/ui';
+@import './colors.css';
+@import './ui/index.css';
+@import './tailwind.css';
 
-@theme static {
-  --font-sans: 'Public Sans', sans-serif;
-
-  --color-green-50: #effdf5;
-  --color-green-100: #d9fbe8;
-  --color-green-200: #b3f5d1;
-  --color-green-300: #75edae;
-  --color-green-400: #00dc82;
-  --color-green-500: #00c16a;
-  --color-green-600: #00a155;
-  --color-green-700: #007f45;
-  --color-green-800: #016538;
-  --color-green-900: #0a5331;
-  --color-green-950: #052e16;
-}
+@source "../../../content/**/*";
diff --git a/app/assets/css/tailwind.css b/app/assets/css/tailwind.css
new file mode 100644
index 0000000..c3d3117
--- /dev/null
+++ b/app/assets/css/tailwind.css
@@ -0,0 +1,85 @@
+@import 'tailwindcss';
+@theme {
+  --color-text-50: var(--text-50);
+  --color-text: var(--text);
+  --color-text-100: var(--text-100);
+  --color-text-200: var(--text-200);
+  --color-text-300: var(--text-300);
+  --color-text-400: var(--text-400);
+  --color-text-500: var(--text-500);
+  --color-text-600: var(--text-600);
+  --color-text-700: var(--text-700);
+  --color-text-800: var(--text-800);
+  --color-text-900: var(--text-900);
+  --color-text-950: var(--text-950);
+
+  --color-background-50: var(--background-50);
+  --color-background-100: var(--background-100);
+  --color-background-200: var(--background-200);
+  --color-background-300: var(--background-300);
+  --color-background-400: var(--background-400);
+  --color-background-500: var(--background-500);
+  --color-background-600: var(--background-600);
+  --color-background-700: var(--background-700);
+  --color-background-800: var(--background-800);
+  --color-background-900: var(--background-900);
+  --color-background-950: var(--background-950);
+  --color-background: var(--background);
+
+  --color-primary-50: var(--primary-50);
+  --color-primary-100: var(--primary-100);
+  --color-primary-200: var(--primary-200);
+  --color-primary-300: var(--primary-300);
+  --color-primary-400: var(--primary-400);
+  --color-primary: var(--primary);
+  --color-primary-500: var(--primary-500);
+  --color-primary-600: var(--primary-600);
+  --color-primary-700: var(--primary-700);
+  --color-primary-800: var(--primary-800);
+  --color-primary-900: var(--primary-900);
+  --color-primary-950: var(--primary-950);
+
+  --color-secondary-50: var(--secondary-50);
+  --color-secondary-100: var(--secondary-100);
+  --color-secondary-200: var(--secondary-200);
+  --color-secondary-300: var(--secondary-300);
+  --color-secondary: var(--secondary);
+  --color-secondary-400: var(--secondary-400);
+  --color-secondary-500: var(--secondary-500);
+  --color-secondary-600: var(--secondary-600);
+  --color-secondary-700: var(--secondary-700);
+  --color-secondary-800: var(--secondary-800);
+  --color-secondary-900: var(--secondary-900);
+  --color-secondary-950: var(--secondary-950);
+
+  --color-accent-50: var(--accent-50);
+  --color-accent-100: var(--accent-100);
+  --color-accent-200: var(--accent-200);
+  --color-accent-300: var(--accent-300);
+  --color-accent: var(--accent);
+  --color-accent-400: var(--accent-400);
+  --color-accent-500: var(--accent-500);
+  --color-accent-600: var(--accent-600);
+  --color-accent-700: var(--accent-700);
+  --color-accent-800: var(--accent-800);
+  --color-accent-900: var(--accent-900);
+  --color-accent-950: var(--accent-950);
+
+  --text-sm: 0.75rem;
+  --text-base: 1rem;
+  --text-xl: 1.333rem;
+  --text-2xl: 1.777rem;
+  --text-3xl: 2.369rem;
+  --text-4xl: 3.158rem;
+  --text-5xl: 4.21rem;
+
+  --text-weight-normal: 400;
+  --text-weight-bold: 700;
+
+  --font-sans:
+    Noto Sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --font-title:
+    Wittgenstein, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+}
diff --git a/app/assets/css/ui/background.css b/app/assets/css/ui/background.css
new file mode 100644
index 0000000..34e7bb0
--- /dev/null
+++ b/app/assets/css/ui/background.css
@@ -0,0 +1,14 @@
+:root {
+  --ui-bg: var(--nord6);
+  --ui-bg-muted: var(--nord5);
+  --ui-bg-elevated: var(--nord5);
+  --ui-bg-accented: var(--nord4);
+  --ui-bg-inverted: var(--nord0);
+}
+.dark {
+  --ui-bg: var(--nord0);
+  --ui-bg-muted: var(--nord1);
+  --ui-bg-elevated: var(--nord1);
+  --ui-bg-accented: var(--nord2);
+  --ui-bg-inverted: var(--nord6);
+}
diff --git a/app/assets/css/ui/border.css b/app/assets/css/ui/border.css
new file mode 100644
index 0000000..46d1ccc
--- /dev/null
+++ b/app/assets/css/ui/border.css
@@ -0,0 +1,12 @@
+:root {
+  --ui-border: var(--nord5);
+  --ui-border-muted: var(--nord6);
+  --ui-border-accented: var(--nord4);
+  --ui-border-inverted: var(--nord0);
+}
+.dark {
+  --ui-border: var(--nord3);
+  --ui-border-muted: var(--nord2);
+  --ui-border-accented: var(--nord4);
+  --ui-border-inverted: var(--nord6);
+}
diff --git a/app/assets/css/ui/colors.css b/app/assets/css/ui/colors.css
new file mode 100644
index 0000000..4746098
--- /dev/null
+++ b/app/assets/css/ui/colors.css
@@ -0,0 +1,8 @@
+:root {
+  --ui-primary: var(--nord8);
+  --ui-secondary: var(--nord9);
+  --ui-success: var(--nord14);
+  --ui-info: var(--nord9);
+  --ui-warning: var(--nord13);
+  --ui-error: var(--nord11);
+}
diff --git a/app/assets/css/ui/index.css b/app/assets/css/ui/index.css
new file mode 100644
index 0000000..0f421a3
--- /dev/null
+++ b/app/assets/css/ui/index.css
@@ -0,0 +1,4 @@
+@import './colors.css';
+@import './text.css';
+@import './background.css';
+@import './border.css';
diff --git a/app/assets/css/ui/text.css b/app/assets/css/ui/text.css
new file mode 100644
index 0000000..f69e286
--- /dev/null
+++ b/app/assets/css/ui/text.css
@@ -0,0 +1,16 @@
+:root {
+  --ui-text-dimmed: var(--nord3);
+  --ui-text-muted: var(--nord3);
+  --ui-text-toned: var(--nord2);
+  --ui-text: var(--nord0);
+  --ui-text-highlighted: var(--nord0);
+  --ui-text-inverted: var(--nord6);
+}
+.dark {
+  --ui-text-dimmed: var(--nord3);
+  --ui-text-muted: var(--nord4);
+  --ui-text-toned: var(--nord4);
+  --ui-text: var(--nord6);
+  --ui-text-highlighted: var(--nord6);
+  --ui-text-inverted: var(--nord0);
+}