💄 Update tailwind to use dynamic primary color

src/app/not-found.tsx

@@ -9,13 +9,13 @@ export default function NotFound() {
       <div className="relative flex h-full items-center py-20 sm:py-36">
         <BackgroundImage className="-top-36 bottom-0" />
         <Container className="relative flex w-full flex-col items-center">
-          <p className="font-display text-2xl tracking-tight text-teal-900">
+          <p className="text-primary-900 font-display text-2xl tracking-tight">
             404
           </p>
-          <h1 className="mt-4 font-display text-4xl font-bold tracking-tighter text-teal-600 sm:text-5xl">
+          <h1 className="text-primary-600 mt-4 font-display text-4xl font-bold tracking-tighter sm:text-5xl">
             Page not found
           </h1>
-          <p className="mt-4 text-lg tracking-tight text-teal-900">
+          <p className="text-primary-900 mt-4 text-lg tracking-tight">
             Sorry, we couldn’t find the page you’re looking for.
           </p>
           <Button href="/" className="mt-8">

src/components/BackgroundImage.tsx

@@ -9,7 +9,10 @@ export function BackgroundImage({
 }) {
   return (
     <div
-      className={clsx('absolute inset-0 overflow-hidden bg-teal-50', className)}
+      className={clsx(
+        'bg-primary-50 absolute inset-0 overflow-hidden',
+        className,
+      )}
     >
       <svg
         className={clsx(

src/components/Button.tsx

@@ -7,24 +7,24 @@ type ButtonProps =
 
 export function Button({ className, children, ...props }: ButtonProps) {
   className = clsx(
-    'inline-flex justify-center group bg-teal-600 py-3 px-5 text-base font-semibold text-white hover:bg-teal-500 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-500 active:text-white/70 -translate-x-6',
+    'inline-flex justify-center group bg-primary-600 py-3 px-5 text-base font-semibold text-white hover:bg-primary-500 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 active:text-white/70 -translate-x-6',
     className,
   )
 
   return typeof props.href === 'undefined' ? (
     <div className="relative">
       <button className={className}>
-        <ButtonLeft className="absolute left-px top-0 h-full -translate-x-full text-teal-600 group-hover:text-teal-500 " />
+        <ButtonLeft className="text-primary-600 group-hover:text-primary-500 absolute left-px top-0 h-full -translate-x-full " />
         {children}
-        <ButtonLeft className="absolute right-px top-0 h-full translate-x-full rotate-180 text-teal-600 group-hover:text-teal-500" />
+        <ButtonLeft className="text-primary-600 group-hover:text-primary-500 absolute right-px top-0 h-full translate-x-full rotate-180" />
       </button>
     </div>
   ) : (
     <div className="relative">
       <Link href={props.href} className={className}>
-        <ButtonLeft className="absolute left-px top-0 h-full -translate-x-full text-teal-600 group-hover:text-teal-500" />
+        <ButtonLeft className="text-primary-600 group-hover:text-primary-500 absolute left-px top-0 h-full -translate-x-full" />
         {children}
-        <ButtonLeft className="absolute right-px top-0 h-full translate-x-full rotate-180 text-teal-600 group-hover:text-teal-500" />
+        <ButtonLeft className="text-primary-600 group-hover:text-primary-500 absolute right-px top-0 h-full translate-x-full rotate-180" />
       </Link>
     </div>
   )

src/components/Footer.tsx

@@ -6,19 +6,19 @@ export function Footer() {
   return (
     <footer className="flex-none py-16">
       <Container className="flex flex-col items-center justify-between md:flex-row">
-        <Logo className="h-12 w-auto text-teal-500" />
+        <Logo className="text-primary-500 h-12 w-auto" />
         <nav className="mt-4 flex items-center space-x-4 sm:mt-0">
           <a
             href="https://linkedin.com/company/chowdhary"
             aria-label="LinkedIn"
-            className="text-teal-600"
+            className="text-primary-600"
           >
             <IconBrandLinkedin strokeWidth={1.5} className="h-8 w-8" />
           </a>
           <a
             href="https://github.com/chowdhary-org"
             aria-label="GitHub"
-            className="text-teal-600"
+            className="text-primary-600"
           >
             <IconBrandGithub strokeWidth={1.5} className="h-8 w-8" />
           </a>

src/components/Header.tsx

@@ -9,9 +9,9 @@ export function Header() {
     <header className="relative z-50 flex-none lg:pt-11">
       <Container className="flex flex-wrap items-center justify-center sm:justify-between lg:flex-nowrap">
         <div className="mt-10 lg:mt-0 lg:grow lg:basis-0">
-          <Logo className="h-12 w-auto text-teal-500" />
+          <Logo className="text-primary-500 h-12 w-auto" />
         </div>
-        <div className="order-first -mx-4 flex flex-auto basis-full overflow-x-auto whitespace-nowrap border-b border-teal-600/10 py-4 font-mono text-sm text-teal-600 sm:-mx-6 lg:order-none lg:mx-0 lg:basis-auto lg:border-0 lg:py-0">
+        <div className="border-primary-600/10 text-primary-600 order-first -mx-4 flex flex-auto basis-full overflow-x-auto whitespace-nowrap border-b py-4 font-mono text-sm sm:-mx-6 lg:order-none lg:mx-0 lg:basis-auto lg:border-0 lg:py-0">
           <div className="mx-auto flex items-center gap-4 px-4">
             <Link href="#foundation">Foundation</Link>
             <DiamondIcon className="h-1.5 w-1.5 overflow-visible fill-current stroke-current" />

src/components/Hero.tsx

@@ -8,11 +8,11 @@ export function Hero() {
       <BackgroundImage className="-bottom-14 -top-36" />
       <Container className="relative">
         <div className="mx-auto max-w-2xl lg:max-w-4xl lg:px-12">
-          <h1 className="font-display text-5xl font-bold tracking-tighter text-teal-600 sm:text-7xl">
+          <h1 className="text-primary-600 font-display text-5xl font-bold tracking-tighter sm:text-7xl">
             Technology for good.
           </h1>
-          <div className="mt-6 space-y-6 font-display text-2xl tracking-tight text-teal-900">
-            <p className="text-3xl font-bold text-teal-700">
+          <div className="text-primary-900 mt-6 space-y-6 font-display text-2xl tracking-tight">
+            <p className="text-primary-700 text-3xl font-bold">
               We are a nonprofit harnessing the power of technology to open
               doors to a better future.
             </p>