[docs] Use the new logo

.eslintrc.js

@@ -38,6 +38,9 @@ module.exports = {
       },
     ],
     '@typescript-eslint/no-redeclare': 'off',
+
+    // We LOVE non-breaking spaces here
+    'no-irregular-whitespace': 'off',
   },
   overrides: [
     ...baseline.overrides.filter(

docs/src/app/(content)/layout.tsx → docs/src/app/(content)/components/[slug]/layout.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { AppBar } from 'docs/src/components/AppBar';
 import { Navigation } from 'docs/src/components/Navigation';
 import routes from 'docs/data/pages';
-import '../../styles/style.css';
+import 'docs/src/styles/style.css';
 
 export default function Layout({ children }: React.PropsWithChildren<{}>) {
   return (

docs/src/app/(content)/getting-started/[slug]/layout.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import { AppBar } from 'docs/src/components/AppBar';
+import { Navigation } from 'docs/src/components/Navigation';
+import routes from 'docs/data/pages';
+import 'docs/src/styles/style.css';
+
+export default function Layout({ children }: React.PropsWithChildren<{}>) {
+  return (
+    <React.Fragment>
+      <AppBar />
+      <Navigation routes={routes} />
+      {children}
+    </React.Fragment>
+  );
+}

docs/src/app/(content)/guides/[slug]/layout.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import { AppBar } from 'docs/src/components/AppBar';
+import { Navigation } from 'docs/src/components/Navigation';
+import routes from 'docs/data/pages';
+import 'docs/src/styles/style.css';
+
+export default function Layout({ children }: React.PropsWithChildren<{}>) {
+  return (
+    <React.Fragment>
+      <AppBar />
+      <Navigation routes={routes} />
+      {children}
+    </React.Fragment>
+  );
+}

docs/src/app/(new)/layout.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import 'docs/src/styles.css';
+
+export default function RootLayout({ children }: React.PropsWithChildren) {
+  return (
+    <div className="relative z-0 px-[round(min(3rem,max(2rem,5vw)),1px)]">
+      <span className="bg-color-gridline absolute left-0 right-0 top-12 -mt-px h-px" />
+      <span className="bg-color-gridline absolute bottom-12 left-0 right-0 -mb-px h-px" />
+      <div className="relative mx-auto flex min-h-dvh max-w-[1330px] flex-col py-12">
+        <span className="bg-color-gridline absolute bottom-0 left-0 top-0 -ml-px w-px" />
+        <span className="bg-color-gridline absolute bottom-0 right-0 top-0 -mr-px w-px" />
+        <div className="bg-color-content flex grow flex-col">{children}</div>
+      </div>
+    </div>
+  );
+}

docs/src/app/(new)/page.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { Metadata } from 'next/types';
+import { readFile } from 'node:fs/promises';
+
+const description =
+  'Unstyled React components for building accessible user interfaces.';
+
+export default async function Page() {
+  const logo = await readFile('public/static/logo.svg', 'utf-8');
+  return (
+    <div className="relative flex grow flex-col justify-between gap-10 lg:justify-center [@media(min-height:720px)]:justify-center">
+      <div className="flex px-7 pt-7 md:px-16 md:pt-14 lg:items-center lg:pb-[min(10rem,max(3.5rem,10vh))]">
+        <div className="grow lg:max-w-[calc(100%-280px-8rem)]">
+          <h1 className="mb-2 text-balance text-3xl font-medium md:mb-5 md:text-5xl md:tracking-[-0.025em] lg:text-[max(2rem,min(4.25vw,4rem))] lg:leading-none 2xl:leading-[0.95]">
+            {description}
+          </h1>
+          <p className="text-color-gray mb-5 text-pretty md:text-lg lg:text-2xl">
+            From the creators of Radix, Floating UI, and MUI.
+          </p>
+          <div className="flex">
+            <span className="text-color-gray border-color-border relative -ml-0.5 cursor-default select-none rounded-full border px-2.5 pb-1.5 pt-1.5 text-sm">
+              Coming soon
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="mb-10 lg:hidden">
+        <div
+          className="LogoPattern"
+          style={{
+            height: 70,
+            background: 'var(--color-gridline)',
+            maskImage: `url("data:image/svg+xml;utf8,${encodeURI(logo)}")`,
+            maskSize: '280px 70px',
+            maskPosition: '50%',
+          }}
+        />
+        <div
+          className="LogoPattern"
+          style={{
+            height: 70,
+            background: 'var(--color-gridline)',
+            maskImage: `url("data:image/svg+xml;utf8,${encodeURI(logo)}")`,
+            maskSize: '280px 70px',
+            maskPosition: 'calc(50% - 140px)',
+          }}
+        />
+      </div>
+
+      <div
+        className="LogoPattern hidden lg:block"
+        style={{
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          right: '5rem',
+          width: 280,
+          background: 'var(--color-gridline)',
+          maskImage: `url("data:image/svg+xml;utf8,${encodeURI(logo)}")`,
+          maskSize: '280px 70px',
+          maskPosition: '0 -52px',
+          maskRepeat: 'repeat-y',
+        }}
+      />
+    </div>
+  );
+}
+
+export const metadata: Metadata = {
+  description,
+  twitter: {
+    description,
+  },
+  openGraph: {
+    description,
+  },
+};

docs/src/app/Favicons.tsx

@@ -0,0 +1,26 @@
+'use client';
+import * as React from 'react';
+
+export function Favicons() {
+  return (
+    <React.Fragment>
+      {/* Separate set of favicons in dev so that the dev tabs are easier to spot */}
+      {process.env.NODE_ENV !== 'production' && (
+        <React.Fragment>
+          <link rel="icon" href="/static/favicon-dev.ico" sizes="32x32" />
+          <link rel="icon" href="/static/favicon-dev.svg" type="image/svg+xml" />
+        </React.Fragment>
+      )}
+
+      {process.env.NODE_ENV === 'production' && (
+        <React.Fragment>
+          {/* Safari gets a different favicon because it messes up the original one in dark mode */}
+          <link rel="icon" href="/static/favicon-safari.ico" sizes="32x32" />
+          <link rel="icon" href="/static/favicon.svg" type="image/svg+xml" />
+        </React.Fragment>
+      )}
+
+      <link rel="apple-touch-icon" href="/static/apple-touch-icon.png" />
+    </React.Fragment>
+  );
+}

docs/src/app/experiments/experiments.module.css

@@ -20,7 +20,7 @@
 
   a {
     text-decoration: none;
-    color: var(--color-text);
+    color: var(--color-foreground);
     margin: 0.5rem;
 
     &:hover {

docs/src/app/layout.tsx

@@ -1,23 +1,26 @@
-import * as React from 'react';
 import { Metadata } from 'next';
-import { GoogleAnalytics } from 'docs/src/components/GoogleAnalytics';
+import * as React from 'react';
 import { DocsProviders } from './DocsProviders';
+import { Favicons } from './Favicons';
+import { GoogleAnalytics } from '../components/GoogleAnalytics';
 
-interface Props {
-  children: React.ReactNode;
-}
-
-export default function Layout({ children }: Props) {
+export default function Layout({ children }: React.PropsWithChildren) {
   return (
     <html lang="en">
       <head>
         <meta name="viewport" content="initial-scale=1, width=device-width" />
-        <link rel="manifest" href="/static/manifest.json" />
-        <link rel="shortcut icon" href="/static/favicon.ico" />
-        <link
-          rel="apple-touch-icon"
-          sizes="180x180"
-          href="/static/icons/180x180.png"
+        <Favicons />
+
+        {/* iOS header background */}
+        <meta
+          name="theme-color"
+          content="oklch(98% 0.25% 264)"
+          media="(prefers-color-scheme: light)"
+        />
+        <meta
+          name="theme-color"
+          content="oklch(0% 0% 0)"
+          media="(prefers-color-scheme: dark)"
         />
       </head>
       <body>

docs/src/components/AppBar.module.css

@@ -7,7 +7,10 @@
   background-color: rgba(255, 255, 255, 0.5);
   background-clip: padding-box;
   backdrop-filter: blur(4.25px) saturate(125%);
-  padding: var(--space-1) var(--space-3);
+  padding-top: var(--space-1);
+  padding-bottom: var(--space-1);
+  padding-left: var(--space-6);
+  padding-right: var(--space-3);
   border-bottom: 1px solid var(--gray-outline-1);
   display: flex;
   justify-content: space-between;
@@ -17,7 +20,7 @@
 .primary {
   display: flex;
   align-items: center;
-  gap: var(--space-2);
+  gap: var(--space-4);
 }
 
 .secondary {

docs/src/components/AppBar.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { BaseUIIcon } from 'docs/src/icons/BaseUI';
 import { GitHubIcon } from 'docs/src/icons/GitHub';
 import { SettingsIcon } from 'docs/src/icons/Settings';
 import { IconButton } from 'docs/src/design-system/IconButton';
 import { IconLinkButton } from 'docs/src/design-system/IconLinkButton';
+import NextLink from 'next/link';
 import { DocsVersionSelector } from './DocsVersionSelector';
 import packageJson from '../../../package.json';
 import classes from './AppBar.module.css';
+import { Logo } from './Logo';
 
 const currentVersion = packageJson.version;
 const supportedVersions = [
@@ -24,9 +25,9 @@ export function AppBar() {
   return (
     <header className={classes.root}>
       <div className={classes.primary}>
-        <IconLinkButton useNextLink href="/" label="Base UI" size={3}>
-          <BaseUIIcon />
-        </IconLinkButton>
+        <NextLink href="/" className="-m-3 block p-3">
+          <Logo aria-label="Base UI" />
+        </NextLink>
         <DocsVersionSelector currentVersion={currentVersion} versions={supportedVersions} />
       </div>
       <div className={classes.secondary}>