refactor/theme

Standardizes fonts and colors, refactors files to use the new standard, and adds color highlighting to tailwind config.
rikhall1515 · Apr 24, 2024 · 8852c01 · 8852c01
2 parents bc6bffb + d637115
commit 8852c01
Show file tree

Hide file tree

Showing 9 changed files with 173 additions and 60 deletions.
diff --git a/app/(public)/_components/hero/index.tsx b/app/(public)/_components/hero/index.tsx
@@ -12,7 +12,7 @@ export default function Hero() {
         <Link
           className={cn(
             "relative inline-flex overflow-hidden rounded-full",
-            "focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50",
+            "focus:ring-slate-400 focus:ring-offset-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2",
             "mb-6 h-12 p-[1px] transition-all hover:scale-110 focus:outline-none"
           )}
           href="https://github.com/rikhall1515/nextjs-project-template/tree/main"
@@ -169,13 +169,11 @@ export default function Hero() {
             </defs>
           </svg>
 
-          <Button asChild className="transition-all">
-            <Link
-              className="h-14 rounded-md px-6 text-xl font-semibold text-primary-foreground shadow hover:scale-110 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none"
-              href="#"
-            >
-              Get Started
-            </Link>
+          <Button
+            asChild
+            className="h-14 rounded-md px-6 text-xl font-bold text-primary-foreground shadow transition-all hover:scale-110 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none"
+          >
+            <Link href="#">Get Started</Link>
           </Button>
         </div>
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-background [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,13 +1,12 @@
 import { Analytics } from "@vercel/analytics/react";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import type { Metadata, Viewport } from "next";
-import { Inter } from "next/font/google";
 
 import "@/styles/index.css";
 import Providers from "@/context";
 import { env } from "@/env/client";
 import { VERCEL_ENV } from "@/next.constants.mjs";
-const inter = Inter({ subsets: ["latin"] });
+import { PLUS_JAKARTA_SANS, ATKINSON_HYPERLEGIBLE } from "@/next.fonts";
 
 export const metadata: Metadata = {
   metadataBase: new URL(env.NEXT_PUBLIC_BASE_URL),
@@ -43,7 +42,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={inter.className}>
+      <body
+        className={`${PLUS_JAKARTA_SANS.variable} ${ATKINSON_HYPERLEGIBLE.variable}`}
+      >
         <Providers>{children}</Providers>
         {VERCEL_ENV && (
           <>

diff --git a/components/footer/index.tsx b/components/footer/index.tsx
@@ -7,7 +7,7 @@ export default function Footer() {
     <>
       <footer className="relative flex min-h-[15rem] w-full justify-center bg-popover py-6 text-foreground">
         <div className="pxPage mx-auto w-full max-w-[103rem]">
-          <span className="mb-6 block text-2xl font-extrabold">
+          <span className="mb-6 block text-2xl font-bold">
             {env.NEXT_PUBLIC_SITE_NAME}
           </span>
           <div className="mb-6 flex w-full flex-col items-start justify-between gap-6 m:flex-row">
@@ -17,7 +17,7 @@ export default function Footer() {
                 {env.NEXT_PUBLIC_SITE_NAME}
               </a>
             </div>
-            <ul className="flex flex-wrap text-sm">
+            <ul className="flex flex-wrap text-sm font-medium">
               <li className="me-4 last:mr-0 md:mr-6">
                 <a href="/privacy">Privacy Policy</a>
               </li>

diff --git a/components/header/logo.tsx b/components/header/logo.tsx
@@ -13,15 +13,15 @@ export default function Logo() {
         className={cn(
           "h-8",
           "z-30 flex items-center gap-1",
-          "text-base font-extrabold tracking-[0.2em]",
+          "text-base font-bold tracking-[0.2em]",
           sidebar.isExpanded
             ? "text-foreground m:text-white"
             : "text-foreground"
         )}
       >
         <BaseLogo />
         <span className="text-3xl">/</span>
-        <span>{env.NEXT_PUBLIC_SITE_NAME}</span>
+        <span className="-mb-2">{env.NEXT_PUBLIC_SITE_NAME}</span>
       </a>
     </>
   );

diff --git a/components/header/util/jumpToContent.tsx b/components/header/util/jumpToContent.tsx
@@ -8,7 +8,7 @@ export default function JumpToContent() {
         asChild
         className={cn(
           "absolute left-0 top-0 z-50 block -translate-y-[200%] rounded-none rounded-br-md transition-all",
-          "focus:translate-y-0 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 focus-visible:translate-y-0"
+          "focus:ring-slate-400 focus:ring-offset-slate-50 focus:translate-y-0 focus:outline-none focus:ring-2 focus:ring-offset-2 focus-visible:translate-y-0"
         )}
       >
         <a href="#content">Skip to Content</a>

diff --git a/next.fonts.ts b/next.fonts.ts
@@ -0,0 +1,20 @@
+import { Plus_Jakarta_Sans, Atkinson_Hyperlegible } from "next/font/google";
+
+// This configures the Next.js Font for Open Sans
+// We then export a variable and class name to be used
+// within Tailwind (tailwind.config.ts) and Storybook (preview.js)
+export const PLUS_JAKARTA_SANS = Plus_Jakarta_Sans({
+  weight: ["400", "500", "600", "700"],
+  display: "fallback",
+  subsets: ["latin"],
+  variable: "--font-jakarta",
+});
+
+// This configures the Next.js Font for IBM Plex Mono
+// We then export a variable and class name to be used
+// within Tailwind (tailwind.config.ts) and Storybook (preview.js)
+export const ATKINSON_HYPERLEGIBLE = Atkinson_Hyperlegible({
+  weight: ["400", "700"],
+  subsets: ["latin"],
+  variable: "--font-atkinson",
+});
diff --git a/styles/base.css b/styles/base.css
@@ -46,8 +46,8 @@ html.light {
   /* hsl(0 84% 60%) */
   --destructive: 0 84% 60%;
 
-  /* hsl(270 40% 98%) */
-  --destructive-foreground: 270 40% 98%;
+  /* hsl(274 84% 5%) */
+  --destructive-foreground: 274 84% 5%;
 
   /* hsl(270 32% 91%) */
   --border: 270 32% 91%;

diff --git a/styles/content.css b/styles/content.css
@@ -2,7 +2,7 @@ main {
   hr {
     @apply w-full
       border-t
-      border-border 
+      border-border
       bg-background;
   }
 
@@ -13,11 +13,11 @@ main {
   h5,
   h6,
   strong {
-    @apply font-semibold text-foreground;
+    @apply font-plusjakarta font-semibold text-foreground;
   }
 
   h1 {
-    @apply text-3xl font-extrabold
+    @apply text-3xl font-bold
           leading-[2.5rem] tracking-wide
           lg:text-5xl lg:leading-[3.5rem];
   }
@@ -40,4 +40,8 @@ main {
   h6 {
     @apply text-xl;
   }
+
+  p {
+    @apply font-atkinson;
+  }
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -25,59 +25,149 @@ import { default as flattenColorPalette } from "tailwindcss/lib/util/flattenColo
 const config = {
   darkMode: ["class"],
   content: [
-    "./pages/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-    "./app/**/*.{ts,tsx}",
-    "./src/**/*.{ts,tsx}",
+    "./pages/**/*.{tsx,mdx}",
+    "./components/**/*.tsx",
+    "./context/**/*.tsx",
+    "./layouts/**/*.tsx",
+    "./.storybook/preview.tsx",
+    "./.storybook/main.ts",
+    "./app/**/*.tsx",
   ],
   prefix: "",
   theme: {
+    fontSize: {
+      xs: ["0.75rem", "1rem"],
+      sm: ["0.875rem", "1.25rem"],
+      base: ["1rem", "1.5rem"],
+      lg: ["1.125rem", "1.75rem"],
+      xl: ["1.25rem", "1.875rem"],
+      "2xl": ["1.5rem", "2rem"],
+      "3xl": ["1.875rem", "2.25rem"],
+      "4xl": ["2.25rem", "2.5rem"],
+      "5xl": ["3rem", "3rem"],
+      "6xl": ["3.75rem", "3.75rem"],
+      "7xl": ["4.5rem", "4.5rem"],
+    },
+    fontWeight: {
+      regular: "400",
+      medium: "500",
+      semibold: "600",
+      bold: "700",
+    },
+    fontFamily: {
+      plusjakarta: ["var(--font-jakarta)"],
+      atkinson: ["var(--font-atkinson)"],
+    },
     container: {
       center: true,
       padding: "2rem",
       screens: {
         "2xl": "1400px",
       },
     },
+    screens: {
+      xs: "320px",
+      // => @media (min-width: 320px) { ... }
+
+      m: "420px",
+      // => @media (min-width: 420px) { ... }
+
+      sm: "640px",
+      // => @media (min-width: 640px) { ... }
+
+      md: "768px",
+      // => @media (min-width: 768px) { ... }
+
+      lg: "1024px",
+      // => @media (min-width: 1024px) { ... }
+
+      xl: "1280px",
+      // => @media (min-width: 1280px) { ... }
+
+      "2xl": "1536px",
+      // => @media (min-width: 1536px) { ... }
+    },
+    colors: {
+      /* light: hsl(0 0% 98%) */
+      /* dark: hsl(274 84% 5%) */
+      background: "hsl(var(--background))",
+      /* light: hsl(274 84% 5%) */
+      /* dark: hsl(270 40% 98%) */
+      foreground: "hsl(var(--foreground))",
+      card: {
+        /* light: hsl(0 0% 100%) */
+        /* dark: hsl(274 84% 10%) */
+        DEFAULT: "hsl(var(--card))",
+        /* light: hsl(274 84% 5%) */
+        /* dark: hsl(270 40% 98%) */
+        foreground: "hsl(var(--card-foreground))",
+      },
+      popover: {
+        /* light: hsl(0 0% 100%) */
+        /* dark: hsl(274 84% 10%) */
+        DEFAULT: "hsl(var(--popover))",
+        /* light: hsl(274 84% 5%) */
+        /* dark: hsl(270 40% 98%) */
+        foreground: "hsl(var(--popover-foreground))",
+      },
+      primary: {
+        /* light: hsl(274 90% 47%) */
+        /* dark: hsl(274 70% 61%) */
+        DEFAULT: "hsl(var(--primary))",
+        /* light: hsl(270 40% 98%) */
+        /* dark: hsl(274 47% 11%) */
+        foreground: "hsl(var(--primary-foreground))",
+      },
+      secondary: {
+        /* light: hsl(238 82% 38%) */
+        /* dark: hsl(238 72% 58%) */
+        DEFAULT: "hsl(var(--secondary))",
+        /* light: hsl(0 0% 98%) */
+        /* dark: hsl(270 40% 98%) */
+        foreground: "hsl(var(--secondary-foreground))",
+      },
+      muted: {
+        /* light: hsl(270 40% 96%) */
+        /* dark: hsl(260 33% 18%) */
+        DEFAULT: "hsl(var(--muted))",
+        /* light: hsl(250 16% 47%) */
+        /* dark: hsl(250 20% 65%) */
+        foreground: "hsl(var(--muted-foreground))",
+      },
+      accent: {
+        /* light: hsl(274 90% 30%) */
+        /* dark: hsl(274 70% 80%) */
+        DEFAULT: "hsl(var(--accent))",
+        /* light: hsl(270 40% 98%) */
+        /* dark: hsl(274 47% 11%) */
+        foreground: "hsl(var(--accent-foreground))",
+      },
+      destructive: {
+        /* light: hsl(0 84% 60%) */
+        /* dark: hsl(0 63% 33%) */
+        DEFAULT: "hsl(var(--destructive))",
+        /* light: hsl(274 84% 5%) */
+        /* dark: hsl(270 40% 98%) */
+        foreground: "hsl(var(--destructive-foreground))",
+      },
+      /* light: hsl(270 32% 91%) */
+      /* dark: hsl(260 33% 18%) */
+      border: "hsl(var(--border))",
+      /* light: hsl(270 32% 91%) */
+      /* dark: hsl(260 33% 18%) */
+      input: "hsl(var(--input))",
+      /* light: hsl(274 84% 5%) */
+      /* dark: hsl(213 27% 84%) */
+      ring: "hsl(var(--ring))",
+      white: "#FFFFFF",
+      black: "#2E2E2E",
+      transparent: "transparent",
+      shadow: "#101828",
+    },
     extend: {
       screens: {
         m: "420px",
       },
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
       borderRadius: {
         lg: "var(--radius)",
         md: "calc(var(--radius) - 2px)",