From 4ef0734a34fda432838c91fbbd2ffb8466165bda Mon Sep 17 00:00:00 2001
From: yasmin p <yasmin.pessoa@vercel.com>
Date: Tue, 21 May 2024 11:56:21 -0400
Subject: [PATCH] update CSS

---
 .../templates/app-tw/js/app/globals.css       | 15 +--------------
 .../templates/app-tw/js/app/page.js           |  6 +++---
 .../templates/app-tw/js/tailwind.config.js    |  5 -----
 .../templates/app-tw/ts/app/globals.css       | 15 +--------------
 .../templates/app-tw/ts/app/page.tsx          |  6 +++---
 .../templates/app-tw/ts/tailwind.config.ts    |  5 -----
 .../templates/app/js/app/globals.css          | 14 --------------
 .../templates/app/js/app/page.module.css      | 19 +++++++++++++++++++
 .../templates/app/ts/app/globals.css          | 14 --------------
 .../templates/app/ts/app/page.module.css      | 19 +++++++++++++++++++
 .../templates/default-tw/js/pages/index.js    |  6 +++---
 .../default-tw/js/styles/globals.css          | 15 +--------------
 .../default-tw/js/tailwind.config.js          |  5 -----
 .../templates/default-tw/ts/pages/index.tsx   |  6 +++---
 .../default-tw/ts/styles/globals.css          | 15 +--------------
 .../default-tw/ts/tailwind.config.ts          |  5 -----
 .../default/js/styles/Home.module.css         | 19 +++++++++++++++++++
 .../templates/default/js/styles/globals.css   | 14 --------------
 .../default/ts/styles/Home.module.css         | 19 +++++++++++++++++++
 .../templates/default/ts/styles/globals.css   | 14 --------------
 20 files changed, 92 insertions(+), 144 deletions(-)

diff --git a/packages/create-next-app/templates/app-tw/js/app/globals.css b/packages/create-next-app/templates/app-tw/js/app/globals.css
index 56a26f512cba4..ba5124dfa58cf 100644
--- a/packages/create-next-app/templates/app-tw/js/app/globals.css
+++ b/packages/create-next-app/templates/app-tw/js/app/globals.css
@@ -5,30 +5,17 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
-
-  --gray-rgb: 0, 0, 0;
-  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
-  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
-
-  --button-primary-hover: #383838;
-  --button-secondary-hover: #f2f2f2;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;
     --foreground: #ededed;
-
-    --gray-rgb: 255, 255, 255;
-    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
-    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
-
-    --button-primary-hover: #ccc;
-    --button-secondary-hover: #1a1a1a;
   }
 }
 
 body {
   color: var(--foreground);
   background: var(--background);
+  font-synthesis: none;
 }
diff --git a/packages/create-next-app/templates/app-tw/js/app/page.js b/packages/create-next-app/templates/app-tw/js/app/page.js
index 5e485c044da2a..4bf92ed211e10 100644
--- a/packages/create-next-app/templates/app-tw/js/app/page.js
+++ b/packages/create-next-app/templates/app-tw/js/app/page.js
@@ -15,7 +15,7 @@ export default function Home() {
         <ol className="font-mono list-inside list-decimal text-sm text-center sm:text-left">
           <li className="mb-2">
             Get started by editing{" "}
-            <code className="bg-gray-alpha-100 px-1 py-0.5 rounded font-semibold">
+            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
               app/page.js
             </code>
           </li>
@@ -24,7 +24,7 @@ export default function Home() {
 
         <div className="flex gap-4 items-center flex-col sm:flex-row">
           <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-button-primary-hover text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
+            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"
@@ -39,7 +39,7 @@ export default function Home() {
             Deploy now
           </a>
           <a
-            className="rounded-full border border-solid border-gray-alpha-200 transition-colors flex items-center justify-center hover:bg-button-secondary-hover hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
+            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
             href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"
diff --git a/packages/create-next-app/templates/app-tw/js/tailwind.config.js b/packages/create-next-app/templates/app-tw/js/tailwind.config.js
index 2627ac98bff6d..b0a7d6ea3e567 100644
--- a/packages/create-next-app/templates/app-tw/js/tailwind.config.js
+++ b/packages/create-next-app/templates/app-tw/js/tailwind.config.js
@@ -10,11 +10,6 @@ module.exports = {
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",
-        "gray-rgb": "var(--gray-rgb)",
-        "gray-alpha-200": "var(--gray-alpha-200)",
-        "gray-alpha-100": "var(--gray-alpha-100)",
-        "button-primary-hover": "var(--button-primary-hover)",
-        "button-secondary-hover": "var(--button-secondary-hover)",
       },
       fontFamily: {
         sans: ["var(--font-geist-sans)"],
diff --git a/packages/create-next-app/templates/app-tw/ts/app/globals.css b/packages/create-next-app/templates/app-tw/ts/app/globals.css
index 56a26f512cba4..ba5124dfa58cf 100644
--- a/packages/create-next-app/templates/app-tw/ts/app/globals.css
+++ b/packages/create-next-app/templates/app-tw/ts/app/globals.css
@@ -5,30 +5,17 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
-
-  --gray-rgb: 0, 0, 0;
-  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
-  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
-
-  --button-primary-hover: #383838;
-  --button-secondary-hover: #f2f2f2;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;
     --foreground: #ededed;
-
-    --gray-rgb: 255, 255, 255;
-    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
-    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
-
-    --button-primary-hover: #ccc;
-    --button-secondary-hover: #1a1a1a;
   }
 }
 
 body {
   color: var(--foreground);
   background: var(--background);
+  font-synthesis: none;
 }
diff --git a/packages/create-next-app/templates/app-tw/ts/app/page.tsx b/packages/create-next-app/templates/app-tw/ts/app/page.tsx
index 3f2fb7c963a26..6e518c35d18a1 100644
--- a/packages/create-next-app/templates/app-tw/ts/app/page.tsx
+++ b/packages/create-next-app/templates/app-tw/ts/app/page.tsx
@@ -15,7 +15,7 @@ export default function Home() {
         <ol className="font-mono list-inside list-decimal text-sm text-center sm:text-left">
           <li className="mb-2">
             Get started by editing{" "}
-            <code className="bg-gray-alpha-100 px-1 py-0.5 rounded font-semibold">
+            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
               app/page.tsx
             </code>
           </li>
@@ -24,7 +24,7 @@ export default function Home() {
 
         <div className="flex gap-4 items-center flex-col sm:flex-row">
           <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-button-primary-hover text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
+            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"
@@ -39,7 +39,7 @@ export default function Home() {
             Deploy now
           </a>
           <a
-            className="rounded-full border border-solid border-gray-alpha-200 transition-colors flex items-center justify-center hover:bg-button-secondary-hover hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
+            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
             href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"
diff --git a/packages/create-next-app/templates/app-tw/ts/tailwind.config.ts b/packages/create-next-app/templates/app-tw/ts/tailwind.config.ts
index 35cea844ba037..02b87e801f68a 100644
--- a/packages/create-next-app/templates/app-tw/ts/tailwind.config.ts
+++ b/packages/create-next-app/templates/app-tw/ts/tailwind.config.ts
@@ -11,11 +11,6 @@ const config: Config = {
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",
-        "gray-rgb": "var(--gray-rgb)",
-        "gray-alpha-200": "var(--gray-alpha-200)",
-        "gray-alpha-100": "var(--gray-alpha-100)",
-        "button-primary-hover": "var(--button-primary-hover)",
-        "button-secondary-hover": "var(--button-secondary-hover)",
       },
       fontFamily: {
         sans: ["var(--font-geist-sans)"],
diff --git a/packages/create-next-app/templates/app/js/app/globals.css b/packages/create-next-app/templates/app/js/app/globals.css
index 2d0672b386096..9147fcd3e6987 100644
--- a/packages/create-next-app/templates/app/js/app/globals.css
+++ b/packages/create-next-app/templates/app/js/app/globals.css
@@ -1,26 +1,12 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
-
-  --gray-rgb: 0, 0, 0;
-  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
-  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
-
-  --button-primary-hover: #383838;
-  --button-secondary-hover: #f2f2f2;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;
     --foreground: #ededed;
-
-    --gray-rgb: 255, 255, 255;
-    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
-    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
-
-    --button-primary-hover: #ccc;
-    --button-secondary-hover: #1a1a1a;
   }
 }
 
diff --git a/packages/create-next-app/templates/app/js/app/page.module.css b/packages/create-next-app/templates/app/js/app/page.module.css
index 293622709a46e..b69ca06d80809 100644
--- a/packages/create-next-app/templates/app/js/app/page.module.css
+++ b/packages/create-next-app/templates/app/js/app/page.module.css
@@ -1,4 +1,11 @@
 .page {
+  --gray-rgb: 0, 0, 0;
+  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
+  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
+
+  --button-primary-hover: #383838;
+  --button-secondary-hover: #f2f2f2;
+
   display: grid;
   grid-template-rows: 20px 1fr 20px;
   align-items: center;
@@ -6,6 +13,18 @@
   min-height: 100svh;
   padding: 80px;
   gap: 64px;
+  font-synthesis: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  .page {
+    --gray-rgb: 255, 255, 255;
+    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
+    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
+
+    --button-primary-hover: #ccc;
+    --button-secondary-hover: #1a1a1a;
+  }
 }
 
 .main {
diff --git a/packages/create-next-app/templates/app/ts/app/globals.css b/packages/create-next-app/templates/app/ts/app/globals.css
index 2d0672b386096..9147fcd3e6987 100644
--- a/packages/create-next-app/templates/app/ts/app/globals.css
+++ b/packages/create-next-app/templates/app/ts/app/globals.css
@@ -1,26 +1,12 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
-
-  --gray-rgb: 0, 0, 0;
-  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
-  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
-
-  --button-primary-hover: #383838;
-  --button-secondary-hover: #f2f2f2;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;
     --foreground: #ededed;
-
-    --gray-rgb: 255, 255, 255;
-    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
-    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
-
-    --button-primary-hover: #ccc;
-    --button-secondary-hover: #1a1a1a;
   }
 }
 
diff --git a/packages/create-next-app/templates/app/ts/app/page.module.css b/packages/create-next-app/templates/app/ts/app/page.module.css
index 293622709a46e..b69ca06d80809 100644
--- a/packages/create-next-app/templates/app/ts/app/page.module.css
+++ b/packages/create-next-app/templates/app/ts/app/page.module.css
@@ -1,4 +1,11 @@
 .page {
+  --gray-rgb: 0, 0, 0;
+  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
+  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
+
+  --button-primary-hover: #383838;
+  --button-secondary-hover: #f2f2f2;
+
   display: grid;
   grid-template-rows: 20px 1fr 20px;
   align-items: center;
@@ -6,6 +13,18 @@
   min-height: 100svh;
   padding: 80px;
   gap: 64px;
+  font-synthesis: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  .page {
+    --gray-rgb: 255, 255, 255;
+    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
+    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
+
+    --button-primary-hover: #ccc;
+    --button-secondary-hover: #1a1a1a;
+  }
 }
 
 .main {
diff --git a/packages/create-next-app/templates/default-tw/js/pages/index.js b/packages/create-next-app/templates/default-tw/js/pages/index.js
index d257e3b9f1399..ef0666a779c62 100644
--- a/packages/create-next-app/templates/default-tw/js/pages/index.js
+++ b/packages/create-next-app/templates/default-tw/js/pages/index.js
@@ -27,7 +27,7 @@ export default function Home() {
         <ol className="font-mono list-inside list-decimal text-sm text-center sm:text-left">
           <li className="mb-2">
             Get started by editing{" "}
-            <code className="bg-gray-alpha-100 px-1 py-0.5 rounded font-semibold">
+            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
               pages/index.js
             </code>
           </li>
@@ -36,7 +36,7 @@ export default function Home() {
 
         <div className="font-sans flex gap-4 items-center flex-col sm:flex-row">
           <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-button-primary-hover text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
+            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"
@@ -51,7 +51,7 @@ export default function Home() {
             Deploy now
           </a>
           <a
-            className="rounded-full border border-solid border-gray-alpha-200 transition-colors flex items-center justify-center hover:bg-button-secondary-hover hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
+            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
             href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"
diff --git a/packages/create-next-app/templates/default-tw/js/styles/globals.css b/packages/create-next-app/templates/default-tw/js/styles/globals.css
index 56a26f512cba4..ba5124dfa58cf 100644
--- a/packages/create-next-app/templates/default-tw/js/styles/globals.css
+++ b/packages/create-next-app/templates/default-tw/js/styles/globals.css
@@ -5,30 +5,17 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
-
-  --gray-rgb: 0, 0, 0;
-  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
-  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
-
-  --button-primary-hover: #383838;
-  --button-secondary-hover: #f2f2f2;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;
     --foreground: #ededed;
-
-    --gray-rgb: 255, 255, 255;
-    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
-    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
-
-    --button-primary-hover: #ccc;
-    --button-secondary-hover: #1a1a1a;
   }
 }
 
 body {
   color: var(--foreground);
   background: var(--background);
+  font-synthesis: none;
 }
diff --git a/packages/create-next-app/templates/default-tw/js/tailwind.config.js b/packages/create-next-app/templates/default-tw/js/tailwind.config.js
index 2627ac98bff6d..b0a7d6ea3e567 100644
--- a/packages/create-next-app/templates/default-tw/js/tailwind.config.js
+++ b/packages/create-next-app/templates/default-tw/js/tailwind.config.js
@@ -10,11 +10,6 @@ module.exports = {
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",
-        "gray-rgb": "var(--gray-rgb)",
-        "gray-alpha-200": "var(--gray-alpha-200)",
-        "gray-alpha-100": "var(--gray-alpha-100)",
-        "button-primary-hover": "var(--button-primary-hover)",
-        "button-secondary-hover": "var(--button-secondary-hover)",
       },
       fontFamily: {
         sans: ["var(--font-geist-sans)"],
diff --git a/packages/create-next-app/templates/default-tw/ts/pages/index.tsx b/packages/create-next-app/templates/default-tw/ts/pages/index.tsx
index b4cdf23cd3093..4df330c0ac470 100644
--- a/packages/create-next-app/templates/default-tw/ts/pages/index.tsx
+++ b/packages/create-next-app/templates/default-tw/ts/pages/index.tsx
@@ -27,7 +27,7 @@ export default function Home() {
         <ol className="font-mono list-inside list-decimal text-sm text-center sm:text-left">
           <li className="mb-2">
             Get started by editing{" "}
-            <code className="bg-gray-alpha-100 px-1 py-0.5 rounded font-semibold">
+            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
               pages/index.tsx
             </code>
           </li>
@@ -36,7 +36,7 @@ export default function Home() {
 
         <div className="font-sans flex gap-4 items-center flex-col sm:flex-row">
           <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-button-primary-hover text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
+            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"
@@ -51,7 +51,7 @@ export default function Home() {
             Deploy now
           </a>
           <a
-            className="rounded-full border border-solid border-gray-alpha-200 transition-colors flex items-center justify-center hover:bg-button-secondary-hover hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
+            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
             href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"
diff --git a/packages/create-next-app/templates/default-tw/ts/styles/globals.css b/packages/create-next-app/templates/default-tw/ts/styles/globals.css
index 56a26f512cba4..ba5124dfa58cf 100644
--- a/packages/create-next-app/templates/default-tw/ts/styles/globals.css
+++ b/packages/create-next-app/templates/default-tw/ts/styles/globals.css
@@ -5,30 +5,17 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
-
-  --gray-rgb: 0, 0, 0;
-  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
-  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
-
-  --button-primary-hover: #383838;
-  --button-secondary-hover: #f2f2f2;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;
     --foreground: #ededed;
-
-    --gray-rgb: 255, 255, 255;
-    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
-    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
-
-    --button-primary-hover: #ccc;
-    --button-secondary-hover: #1a1a1a;
   }
 }
 
 body {
   color: var(--foreground);
   background: var(--background);
+  font-synthesis: none;
 }
diff --git a/packages/create-next-app/templates/default-tw/ts/tailwind.config.ts b/packages/create-next-app/templates/default-tw/ts/tailwind.config.ts
index 35cea844ba037..02b87e801f68a 100644
--- a/packages/create-next-app/templates/default-tw/ts/tailwind.config.ts
+++ b/packages/create-next-app/templates/default-tw/ts/tailwind.config.ts
@@ -11,11 +11,6 @@ const config: Config = {
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",
-        "gray-rgb": "var(--gray-rgb)",
-        "gray-alpha-200": "var(--gray-alpha-200)",
-        "gray-alpha-100": "var(--gray-alpha-100)",
-        "button-primary-hover": "var(--button-primary-hover)",
-        "button-secondary-hover": "var(--button-secondary-hover)",
       },
       fontFamily: {
         sans: ["var(--font-geist-sans)"],
diff --git a/packages/create-next-app/templates/default/js/styles/Home.module.css b/packages/create-next-app/templates/default/js/styles/Home.module.css
index 293622709a46e..b69ca06d80809 100644
--- a/packages/create-next-app/templates/default/js/styles/Home.module.css
+++ b/packages/create-next-app/templates/default/js/styles/Home.module.css
@@ -1,4 +1,11 @@
 .page {
+  --gray-rgb: 0, 0, 0;
+  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
+  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
+
+  --button-primary-hover: #383838;
+  --button-secondary-hover: #f2f2f2;
+
   display: grid;
   grid-template-rows: 20px 1fr 20px;
   align-items: center;
@@ -6,6 +13,18 @@
   min-height: 100svh;
   padding: 80px;
   gap: 64px;
+  font-synthesis: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  .page {
+    --gray-rgb: 255, 255, 255;
+    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
+    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
+
+    --button-primary-hover: #ccc;
+    --button-secondary-hover: #1a1a1a;
+  }
 }
 
 .main {
diff --git a/packages/create-next-app/templates/default/js/styles/globals.css b/packages/create-next-app/templates/default/js/styles/globals.css
index 2d0672b386096..9147fcd3e6987 100644
--- a/packages/create-next-app/templates/default/js/styles/globals.css
+++ b/packages/create-next-app/templates/default/js/styles/globals.css
@@ -1,26 +1,12 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
-
-  --gray-rgb: 0, 0, 0;
-  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
-  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
-
-  --button-primary-hover: #383838;
-  --button-secondary-hover: #f2f2f2;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;
     --foreground: #ededed;
-
-    --gray-rgb: 255, 255, 255;
-    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
-    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
-
-    --button-primary-hover: #ccc;
-    --button-secondary-hover: #1a1a1a;
   }
 }
 
diff --git a/packages/create-next-app/templates/default/ts/styles/Home.module.css b/packages/create-next-app/templates/default/ts/styles/Home.module.css
index 293622709a46e..b69ca06d80809 100644
--- a/packages/create-next-app/templates/default/ts/styles/Home.module.css
+++ b/packages/create-next-app/templates/default/ts/styles/Home.module.css
@@ -1,4 +1,11 @@
 .page {
+  --gray-rgb: 0, 0, 0;
+  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
+  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
+
+  --button-primary-hover: #383838;
+  --button-secondary-hover: #f2f2f2;
+
   display: grid;
   grid-template-rows: 20px 1fr 20px;
   align-items: center;
@@ -6,6 +13,18 @@
   min-height: 100svh;
   padding: 80px;
   gap: 64px;
+  font-synthesis: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  .page {
+    --gray-rgb: 255, 255, 255;
+    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
+    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
+
+    --button-primary-hover: #ccc;
+    --button-secondary-hover: #1a1a1a;
+  }
 }
 
 .main {
diff --git a/packages/create-next-app/templates/default/ts/styles/globals.css b/packages/create-next-app/templates/default/ts/styles/globals.css
index 2d0672b386096..9147fcd3e6987 100644
--- a/packages/create-next-app/templates/default/ts/styles/globals.css
+++ b/packages/create-next-app/templates/default/ts/styles/globals.css
@@ -1,26 +1,12 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
-
-  --gray-rgb: 0, 0, 0;
-  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
-  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
-
-  --button-primary-hover: #383838;
-  --button-secondary-hover: #f2f2f2;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;
     --foreground: #ededed;
-
-    --gray-rgb: 255, 255, 255;
-    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
-    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
-
-    --button-primary-hover: #ccc;
-    --button-secondary-hover: #1a1a1a;
   }
 }