Initial commit

2026-04-19 11:28:23 -04:00
commit a51f82e681
69 changed files with 7187 additions and 0 deletions
--- a/components/Theme.tsx
+++ b/components/Theme.tsx
@@ -0,0 +1,123 @@
+import React from 'react';
+import config from '../lib/config.json';
+
+const Theme: React.FC = () => {
+  const headerFont = config.brand.fonts.header;
+  const bodyFont = config.brand.fonts.body;
+  const primaryColor = config.brand.colors.primary;
+  const secondaryColor = config.brand.colors.secondary;
+
+  return (
+    <>
+      {/* Font Imports */}
+      <link
+        href={`https://fonts.googleapis.com/css2?family=${headerFont}:wght@400;500;600;700;800&display=swap`}
+        rel="stylesheet"
+      />
+      <link
+        href={`https://fonts.googleapis.com/css2?family=${bodyFont}:wght@300;400;500;600;700&display=swap`}
+        rel="stylesheet"
+      />
+
+      {/* Tailwind Browser Script */}
+      <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4?plugins=typography,forms"></script>
+
+      {/* Theme Styles */}
+      <style type="text/tailwindcss">
+        {`
+        @theme {
+          /* Background and foreground */
+          --color-background: hsl(0 0% 100%);
+          --color-foreground: hsl(222.2 84% 4.9%);
+
+          /* Card */
+          --color-card: hsl(0 0% 100%);
+          --color-card-foreground: hsl(222.2 84% 4.9%);
+
+          /* Popover */
+          --color-popover: hsl(0 0% 100%);
+          --color-popover-foreground: hsl(222.2 84% 4.9%);
+
+          /* Primary */
+          --color-primary: ${primaryColor};
+          --color-primary-foreground: hsl(210 40% 98%);
+
+          /* Secondary */
+          --color-secondary: ${secondaryColor};
+          --color-secondary-foreground: hsl(222.2 47.4% 11.2%);
+
+          /* Muted */
+          --color-muted: hsl(210 40% 96.1%);
+          --color-muted-foreground: hsl(215.4 16.3% 46.9%);
+
+          /* Accent */
+          --color-accent: hsl(210 40% 96.1%);
+          --color-accent-foreground: hsl(222.2 47.4% 11.2%);
+
+          /* Destructive */
+          --color-destructive: hsl(0 84.2% 60.2%);
+          --color-destructive-foreground: hsl(210 40% 98%);
+
+          /* Border, input, ring */
+          --color-border: hsl(214.3 31.8% 91.4%);
+          --color-input: hsl(214.3 31.8% 91.4%);
+          --color-ring: hsl(222.2 84% 4.9%);
+
+          /* Sidebar */
+          --color-sidebar: hsl(0 0% 98%);
+          --color-sidebar-foreground: hsl(240 5.3% 26.1%);
+          --color-sidebar-primary: hsl(240 5.9% 10%);
+          --color-sidebar-primary-foreground: hsl(0 0% 98%);
+          --color-sidebar-accent: hsl(240 4.8% 95.9%);
+          --color-sidebar-accent-foreground: hsl(240 5.9% 10%);
+          --color-sidebar-border: hsl(220 13% 91%);
+          --color-sidebar-ring: hsl(217.2 91.2% 59.8%);
+
+          /* Border radius */
+          --radius-sm: 0.25rem;
+          --radius-md: 0.375rem;
+          --radius-lg: 0.5rem;
+          --radius-xl: 0.75rem;
+
+          /* Fonts from config */
+          --font-heading: "${headerFont.replace(/\+/g, ' ')}", sans-serif;
+          --font-body: "${bodyFont.replace(/\+/g, ' ')}", sans-serif;
+        }
+
+        /* Dark mode */
+        .dark {
+          --color-background: hsl(222.2 84% 4.9%);
+          --color-foreground: hsl(210 40% 98%);
+          --color-card: hsl(222.2 84% 4.9%);
+          --color-card-foreground: hsl(210 40% 98%);
+          --color-popover: hsl(222.2 84% 4.9%);
+          --color-popover-foreground: hsl(210 40% 98%);
+          --color-primary: hsl(210 40% 98%);
+          --color-primary-foreground: hsl(222.2 47.4% 11.2%);
+          --color-secondary: hsl(217.2 32.6% 17.5%);
+          --color-secondary-foreground: hsl(210 40% 98%);
+          --color-muted: hsl(217.2 32.6% 17.5%);
+          --color-muted-foreground: hsl(215 20.2% 65.1%);
+          --color-accent: hsl(217.2 32.6% 17.5%);
+          --color-accent-foreground: hsl(210 40% 98%);
+          --color-destructive: hsl(0 62.8% 30.6%);
+          --color-destructive-foreground: hsl(210 40% 98%);
+          --color-border: hsl(217.2 32.6% 17.5%);
+          --color-input: hsl(217.2 32.6% 17.5%);
+          --color-ring: hsl(212.7 26.8% 83.9%);
+          --color-sidebar: hsl(240 5.9% 10%);
+          --color-sidebar-foreground: hsl(240 4.8% 95.9%);
+          --color-sidebar-primary: hsl(224.3 76.3% 48%);
+          --color-sidebar-primary-foreground: hsl(0 0% 100%);
+          --color-sidebar-accent: hsl(240 3.7% 15.9%);
+          --color-sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+          --color-sidebar-border: hsl(240 3.7% 15.9%);
+          --color-sidebar-ring: hsl(217.2 91.2% 59.8%);
+        }
+        `}
+      </style>
+    </>
+  );
+};
+
+export default Theme;