Clean up styles

mui · Oct 18, 2024 · f032056 · f032056
1 parent 342cb97
commit f032056
Show file tree

Hide file tree

Showing 33 changed files with 151 additions and 886 deletions.
diff --git a/docs/src/app/(content)/components/[slug]/page.tsx b/docs/src/app/(content)/components/[slug]/page.tsx
@@ -17,7 +17,6 @@ import {
 } from 'docs/src/components/ApiReference';
 import { DemoLoader, DemoLoaderProps } from 'docs/src/components/demo/DemoLoader';
 import { getApiReferenceData } from './getApiReferenceData';
-import classes from '../../styles.module.css';
 
 const CATEGORY_SEGMENT = 'components';
 
@@ -69,11 +68,11 @@ export default async function ComponentPage(props: Props) {
 
   return (
     <React.Fragment>
-      <main className={classes.content}>
+      <main className="Content">
         <MDXContent components={{ ...allComponents }} />
         <ApiReference componentsApi={componentsApi} />
         <div>
-          <div className={classes.editLink}>
+          <div className="EditLink">
             <EditPageGithubLink category={CATEGORY_SEGMENT} slug={componentName} />
           </div>
           <div>

diff --git a/docs/src/app/(content)/getting-started/[slug]/page.tsx b/docs/src/app/(content)/getting-started/[slug]/page.tsx
@@ -10,7 +10,6 @@ import routes, { getSlugs } from 'docs/data/pages';
 import { Description } from 'docs/src/components/content/Description';
 import { SiblingPageLinks } from 'docs/src/components/SiblingPageLinks';
 import { EditPageGithubLink } from 'docs/src/components/EditPageGithubLink';
-import classes from '../../styles.module.css';
 
 const CATEGORY_SEGMENT = 'getting-started';
 
@@ -39,10 +38,10 @@ export default async function DocsPage(props: Props) {
 
   return (
     <React.Fragment>
-      <main className={classes.content}>
+      <main className="Content">
         <MDXContent components={allComponents} />
         <div>
-          <div className={classes.editLink}>
+          <div className="EditLink">
             <EditPageGithubLink category={CATEGORY_SEGMENT} slug={slug} />
           </div>
           <div>

diff --git a/docs/src/app/(content)/guides/[slug]/page.tsx b/docs/src/app/(content)/guides/[slug]/page.tsx
@@ -10,7 +10,6 @@ import routes, { getSlugs } from 'docs/data/pages';
 import { Description } from 'docs/src/components/content/Description';
 import { SiblingPageLinks } from 'docs/src/components/SiblingPageLinks';
 import { EditPageGithubLink } from 'docs/src/components/EditPageGithubLink';
-import classes from '../../styles.module.css';
 
 const CATEGORY_SEGMENT = 'guides';
 
@@ -39,10 +38,10 @@ export default async function DocsPage(props: Props) {
 
   return (
     <React.Fragment>
-      <main className={classes.content}>
+      <main className="Content">
         <MDXContent components={allComponents} />
         <div>
-          <div className={classes.editLink}>
+          <div className="EditLink">
             <EditPageGithubLink category={CATEGORY_SEGMENT} slug={slug} />
           </div>
           <div>

diff --git a/docs/src/app/(content)/layout.tsx b/docs/src/app/(content)/layout.tsx
@@ -3,6 +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';
 
 export default function Layout({ children }: React.PropsWithChildren<{}>) {
   return (

diff --git a/docs/src/app/experiments/[slug]/page.tsx b/docs/src/app/experiments/[slug]/page.tsx
@@ -4,6 +4,7 @@ import { notFound } from 'next/navigation';
 import { type Dirent } from 'node:fs';
 import { basename, extname } from 'node:path';
 import { readdir } from 'node:fs/promises';
+import '../../../styles/style.css';
 
 interface Props {
   params: {

diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { Metadata } from 'next';
 import { GoogleAnalytics } from 'docs/src/components/GoogleAnalytics';
 import { DocsProviders } from './DocsProviders';
-import '../styles/style.css';
 
 interface Props {
   children: React.ReactNode;

diff --git a/docs/src/app/new/page.tsx b/docs/src/app/new/page.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import './styles.css';
+
+export default function Page() {
+  return (
+    <div className="flex h-dvh w-dvw items-center justify-center">
+      Here is to the new beginnings.
+    </div>
+  );
+}
diff --git a/docs/src/app/new/styles.css b/docs/src/app/new/styles.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind utilities;
+@tailwind components;
diff --git a/docs/src/app/not-found.tsx b/docs/src/app/not-found.tsx
@@ -3,14 +3,13 @@ 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 classes from './(content)/styles.module.css';
 
 export default function NotFound() {
   return (
     <React.Fragment>
       <AppBar />
       <Navigation routes={routes} />
-      <main className={classes.content}>
+      <main>
         <h1>Page not found</h1>
       </main>
     </React.Fragment>

diff --git a/docs/src/app/page.tsx b/docs/src/app/page.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Metadata } from 'next';
 import Link from 'next/link';
 import { BaseUIIcon } from 'docs/src/icons/BaseUI';
+import '../styles/style.css';
 
 export default function Home() {
   return (
@@ -18,16 +19,16 @@ export default function Home() {
         maxWidth: 500,
       }}
     >
-      <div className="mb-8">
+      <div className="mb-10">
         <BaseUIIcon />
       </div>
-      <h1 className="Text mb-2 size-7">
+      <h1 className="Text s-7 mb-2">
         Unstyled UI components for building accessible web apps and design systems.
       </h1>
-      <p className="Text color-gray weight-1 mb-8 size-5">
+      <p className="Text color-gray weight-1 s-5 mb-10">
         From the creators of Radix, Floating UI, and MUI.
       </p>
-      <Link className="Link Text size-4" href="/getting-started/overview">
+      <Link className="Link Text s-4" href="/getting-started/overview">
         Documentation
       </Link>
     </div>

diff --git a/docs/src/app/playground/[slug]/page.tsx b/docs/src/app/playground/[slug]/page.tsx
@@ -4,6 +4,7 @@ import { notFound } from 'next/navigation';
 import { type Dirent } from 'node:fs';
 import { basename, extname } from 'node:path';
 import { readdir } from 'node:fs/promises';
+import '../../../styles/style.css';
 
 interface Props {
   params: {

diff --git a/docs/src/components/content/Description.tsx b/docs/src/components/content/Description.tsx
@@ -10,10 +10,7 @@ export function Description(props: DescriptionProps) {
   const { text, children, ...other } = props;
 
   return (
-    <p
-      {...other}
-      className={clsx('Text size-5 weight-1 color-gray', classes.root, props.className)}
-    >
+    <p {...other} className={clsx('Text s-5 weight-1 color-gray', classes.root, props.className)}>
       {text ?? children}
     </p>
   );

diff --git a/docs/src/design-system/IconButton.module.css b/docs/src/design-system/IconButton.module.css
@@ -28,17 +28,17 @@
   }
 }
 
-.size-1 {
+.s-1 {
   width: var(--space-6);
   height: var(--space-6);
 }
 
-.size-2 {
+.s-2 {
   width: var(--space-7);
   height: var(--space-7);
 }
 
-.size-3 {
+.s-3 {
   width: var(--space-8);
   height: var(--space-8);
 }
diff --git a/docs/src/design-system/IconButton.tsx b/docs/src/design-system/IconButton.tsx
@@ -10,7 +10,7 @@ export function IconButton(props: IconButton.Props) {
       type="button"
       aria-label={label}
       {...other}
-      className={clsx(classes.root, classes[`size-${size}`], props.className)}
+      className={clsx(classes.root, classes[`s-${size}`], props.className)}
     />
   );
 

diff --git a/docs/src/design-system/IconLinkButton.tsx b/docs/src/design-system/IconLinkButton.tsx
@@ -11,13 +11,13 @@ export function IconLinkButton(props: IconLinkButton.Props) {
     <Link
       aria-label={label}
       {...(other as React.ComponentPropsWithoutRef<typeof Link>)}
-      className={clsx(classes.root, classes[`size-${size}`], props.className)}
+      className={clsx(classes.root, classes[`s-${size}`], props.className)}
     />
   ) : (
     <a
       aria-label={label}
       {...(other as React.ComponentPropsWithoutRef<'a'>)}
-      className={clsx(classes.root, classes[`size-${size}`], props.className)}
+      className={clsx(classes.root, classes[`s-${size}`], props.className)}
     />
   );
 

diff --git a/docs/src/styles/components/select.css b/docs/src/styles/components/select.css
@@ -50,14 +50,14 @@
   }
 }
 
-.SelectTrigger.size-1 {
+.SelectTrigger.s-1 {
   height: var(--space-6);
   padding-left: var(--space-2);
   padding-right: var(--space-5);
   font-size: var(--fs-2);
 }
 
-.SelectTrigger.size-2 {
+.SelectTrigger.s-2 {
   height: var(--space-7);
   padding-left: var(--space-3);
   padding-right: var(--space-6);

diff --git a/docs/src/styles/components/text.css b/docs/src/styles/components/text.css
@@ -6,56 +6,56 @@
   scroll-margin-top: 80px;
 }
 
-.Text.size-1 {
+.Text.s-1 {
   font-size: var(--fs-1);
   line-height: 1;
 }
 
-.Text.size-2 {
+.Text.s-2 {
   font-size: var(--fs-2);
   line-height: 1;
 }
 
-.Text.size-3 {
+.Text.s-3 {
   font-size: var(--fs-3);
   line-height: 20px;
 }
 
-.Text.size-4 {
+.Text.s-4 {
   font-size: var(--fs-4);
   line-height: 23px;
 }
 
-.Text.size-5 {
+.Text.s-5 {
   font-size: var(--fs-5);
   line-height: 23px;
   font-weight: 500;
   letter-spacing: -0.012em;
 }
 
-.Text.size-6 {
+.Text.s-6 {
   font-size: var(--fs-6);
   line-height: 24px;
   font-weight: 500;
   letter-spacing: -0.018em;
 }
 
-.Text.size-7 {
+.Text.s-7 {
   font-size: var(--fs-7);
   line-height: 28px;
   font-weight: 500;
   letter-spacing: -0.031em;
 }
 
-.Text.size-8 {
+.Text.s-8 {
   font-size: var(--fs-8);
   line-height: 37px;
   font-weight: 500;
   letter-spacing: -0.042em;
   text-indent: -1.1px;
 }
 
-.Text.size-9 {
+.Text.s-9 {
   font-size: var(--fs-9);
   line-height: 1;
   font-weight: 500;

diff --git a/docs/src/app/(content)/styles.module.css → docs/src/styles/content.css b/docs/src/app/(content)/styles.module.css → docs/src/styles/content.css
@@ -1,5 +1,6 @@
-@layer mdx {
-  .content {
+@layer components {
+  .Content {
+    box-sizing: content-box;
     max-width: 714px;
     padding-top: var(--space-9);
     padding-left: var(--space-6);
@@ -197,9 +198,9 @@
       }
     }
   }
-}
 
-.editLink {
-  padding-top: var(--space-9);
-  padding-bottom: var(--space-9);
+  .EditLink {
+    padding-top: var(--space-9);
+    padding-bottom: var(--space-9);
+  }
 }
diff --git a/docs/src/styles/style.css b/docs/src/styles/style.css
@@ -3,6 +3,7 @@
 @import 'shiki.css';
 
 @import 'demo-colors.css';
+@import 'content.css';
 
 @import 'components/badge.css';
 @import 'components/callout.css';
@@ -23,17 +24,6 @@
 @import 'components/textarea.css';
 @import 'components/toggle.css';
 
-@import 'utilities/align-items.css';
-@import 'utilities/align-self.css';
-@import 'utilities/display.css';
-@import 'utilities/flex-direction.css';
-@import 'utilities/gap.css';
-@import 'utilities/height.css';
-@import 'utilities/justify-content.css';
-@import 'utilities/margin.css';
-@import 'utilities/padding.css';
-@import 'utilities/position.css';
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/docs/src/styles/utilities/align-items.css b/docs/src/styles/utilities/align-items.css
diff --git a/docs/src/styles/utilities/align-self.css b/docs/src/styles/utilities/align-self.css