update CSS

vercel · May 21, 2024 · 4ef0734 · 4ef0734
1 parent bd2520a
commit 4ef0734
Show file tree

Hide file tree

Showing 20 changed files with 92 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,11 +1,30 @@
 .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;
   justify-items: center;
   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
@@ -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
@@ -1,11 +1,30 @@
 .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;
   justify-items: center;
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)"],