Dark mode, tweak copy

mui · Oct 21, 2024 · b0a00a5 · b0a00a5
1 parent 53507a4
commit b0a00a5
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 23 deletions.
diff --git a/docs/src/app/(new)/layout.tsx b/docs/src/app/(new)/layout.tsx
@@ -5,18 +5,13 @@ export default function Layout({ children }: React.PropsWithChildren) {
   return (
     <div className="relative z-0 px-14">
       {/* Horizontal gridlines */}
-      <span className="pointer-events-none">
-        <span className="bg-color-gridline absolute left-0 right-0 top-14 -mt-px h-px" />
-        <span className="bg-color-gridline absolute bottom-14 left-0 right-0 -mb-px h-px" />
-      </span>
+      <span className="bg-color-gridline absolute left-0 right-0 top-14 -mt-px h-px" />
+      <span className="bg-color-gridline absolute bottom-14 left-0 right-0 -mb-px h-px" />
 
       <div className="relative mx-auto flex min-h-dvh max-w-[1330px] flex-col py-14">
-        {/* Vertical gridlines */}
-        <span className="pointer-events-none">
-          {/* TODO position fixed */}
-          <span className="bg-color-gridline absolute -left-px bottom-0 top-0 w-px" />
-          <span className="bg-color-gridline absolute -right-px bottom-0 top-0 w-px" />
-        </span>
+        {/* Vertical gridlines (overshoot 200px so that page overscroll looks nice) */}
+        <span className="bg-color-gridline fixed bottom-[-200px] left-[calc(50%-min(1330px,calc(100vw-7rem))/2)] top-[-200px] w-px" />
+        <span className="bg-color-gridline fixed bottom-[-200px] right-[calc(50%-min(1330px,calc(100vw-7rem))/2)] top-[-200px] w-px" />
 
         <div className="bg-color-content flex grow flex-col">{children}</div>
       </div>

diff --git a/docs/src/app/(new)/page.tsx b/docs/src/app/(new)/page.tsx
@@ -5,17 +5,16 @@ import * as React from 'react';
 export default function Page() {
   return (
     <div className="m-auto px-12 pb-[min(5rem,max(3.5rem,10vh))] pt-12">
-      <div className="max-w-[480px]">
+      <div className="max-w-[420px]">
         <Logo className="mb-8 ml-px" />
         <h1 className="mb-2 text-2xl font-medium">
-          Unstyled React components for building accessible web apps and design
-          systems.
+          Unstyled React components for building accessible user interfaces.
         </h1>
         <p className="text-color-gray mb-6">
           From the creators of Radix, Floating UI, and MUI.
         </p>
 
-        <span className="text-color-gray border-color-separator relative -ml-0.5 cursor-default select-none rounded-full border px-1.5 py-0.5 text-xs">
+        <span className="text-color-gray border-color-border relative -ml-0.5 cursor-default select-none rounded-full border px-1.5 py-0.5 text-xs">
           <span className="relative -top-[0.5px]">Coming soon</span>
         </span>
       </div>
@@ -24,7 +23,7 @@ export default function Page() {
 }
 
 const description =
-  'Unstyled UI components for building accessible web apps and design systems.';
+  'Unstyled UI components for building accessible user interfaces.';
 
 export const metadata: Metadata = {
   description,

diff --git a/docs/src/styles.css b/docs/src/styles.css
@@ -6,13 +6,25 @@
 @import 'tailwindcss/utilities';
 
 :root {
-  --color-background: #fcfcfd;
   --color-content: #fff;
-  --color-foreground: #18181d;
-  --color-gray: oklch(12.7% 0.028 264 / 67%);
-  --color-separator: #131c3a40;
-  --color-link: oklch(47% 0.19 264);
-  --color-gridline: #e2e3e6;
+  --color-background: oklch(98% 0.25% 264);
+  --color-foreground: oklch(21% 2% 264);
+  --color-selection: oklch(80% 0.2 264 / 60%);
+  --color-gray: oklch(12.7% 6% 264 / 67%);
+  --color-link: oklch(47% 50% 264);
+  --color-border: oklch(20% 12% 264 / 25%);
+  --color-gridline: oklch(91.6% 1% 264);
+
+  @media (prefers-color-scheme: dark) {
+    --color-content: oklch(12% 2% 264);
+    --color-background: #000;
+    --color-foreground: oklch(90% 2% 264);
+    --color-selection: oklch(50% 0.2 264 / 80%);
+    --color-gray: oklch(90% 6% 264 / 70%);
+    --color-link: oklch(69% 50% 264);
+    --color-border: oklch(90% 12% 264 / 35%);
+    --color-gridline: oklch(21.6% 1% 264);
+  }
 }
 
 html {
@@ -28,5 +40,5 @@ body {
 }
 
 ::selection {
-  background-color: oklch(80% 0.2 264 / 60%);
+  background-color: var(--color-selection);
 }
diff --git a/docs/tailwind.config.ts b/docs/tailwind.config.ts
@@ -13,7 +13,7 @@ export default {
         'color-content': 'var(--color-content)',
         'color-link': 'var(--color-link)',
         'color-gray': 'var(--color-gray)',
-        'color-separator': 'var(--color-separator)',
+        'color-border': 'var(--color-border)',
       },
       fontFamily: {
         sans: '"Unica 77", system-ui',