[docs] Main demo design (#846)

mui · Nov 21, 2024 · 4922a3f · 4922a3f
1 parent ad4043e
commit 4922a3f
Show file tree

Hide file tree

Showing 44 changed files with 378 additions and 723 deletions.
diff --git a/docs/data/components/alert-dialog/AlertDialogIntroduction/css-modules/styles.module.css b/docs/data/components/alert-dialog/AlertDialogIntroduction/css-modules/styles.module.css
@@ -1,6 +1,6 @@
 .popup {
-  background: var(--gray-50);
-  border: 1px solid var(--gray-100);
+  background: var(--color-gray-50);
+  border: 1px solid var(--color-gray-100);
   min-width: 400px;
   border-radius: 4px;
   box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
@@ -13,14 +13,14 @@
   z-index: 2100;
 
   :global(.dark) & {
-    color: var(--gray-900);
-    border-color: var(--gray-700);
+    color: var(--color-gray-900);
+    border-color: var(--color-gray-700);
   }
 }
 
 .trigger {
-  background-color: var(--gray-900);
-  color: var(--gray-50);
+  background-color: var(--color-gray-900);
+  color: var(--color-gray-50);
   padding: 8px 16px;
   border-radius: 4px;
   border: none;
@@ -29,23 +29,23 @@
     sans-serif;
 
   &:hover {
-    background-color: var(--gray-700);
+    background-color: var(--color-gray-700);
 
     :global(.dark) & {
-      background-color: var(--gray-200);
+      background-color: var(--color-gray-200);
     }
   }
 
   :global(.dark) & {
-    background-color: var(--gray-50);
-    color: var(--gray-900);
+    background-color: var(--color-gray-50);
+    color: var(--color-gray-900);
   }
 }
 
 .close {
   background-color: transparent;
-  border: 1px solid var(--gray-500);
-  color: var(--gray-900);
+  border: 1px solid var(--color-gray-500);
+  color: var(--color-gray-900);
   padding: 8px 16px;
   border-radius: 4px;
   font-family:
@@ -54,29 +54,29 @@
   min-width: 80px;
 
   &:hover {
-    background-color: var(--gray-200);
+    background-color: var(--color-gray-200);
 
     :global(.dark) & {
-      background-color: var(--gray-700);
+      background-color: var(--color-gray-700);
     }
   }
 
   :global(.dark) & {
-    border-color: var(--gray-300);
-    color: var(--gray-50);
+    border-color: var(--color-gray-300);
+    color: var(--color-gray-50);
   }
 }
 
 .controls {
   display: flex;
   flex-direction: row-reverse;
-  background: var(--gray-100);
+  background: var(--color-gray-100);
   gap: 8px;
   padding: 16px;
   margin: 32px -16px -16px;
 
   :global(.dark) & {
-    background: var(--gray-800);
+    background: var(--color-gray-800);
   }
 }
 

diff --git a/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.js b/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.js
@@ -21,16 +21,16 @@ export default function UnstyledDialogIntroduction() {
 
 function TriggerButton(props) {
   const className = `
-    bg-slate-900 dark:bg-slate-50 text-slate-50 dark:text-slate-900
+    bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900
     py-2 px-4 rounded min-w-[80px] border-none font-sans
-    hover:bg-slate-700 dark:hover:bg-slate-200`;
+    hover:bg-gray-700 dark:hover:bg-gray-200`;
 
   return <AlertDialog.Trigger {...props} className={className} />;
 }
 
 function Popup(props) {
   const className = `
-    bg-slate-50 dark:bg-slate-900 border-[1px] border-solid border-slate-100 dark:border-slate-700
+    bg-gray-50 dark:bg-gray-900 border-[1px] border-solid border-gray-100 dark:border-gray-700
     min-w-[400px] rounded shadow-xl fixed top-2/4 left-2/4 z-[2100]
     -translate-x-2/4 -translate-y-2/4 p-4`;
 
@@ -41,16 +41,16 @@ function Controls(props) {
   return (
     <div
       {...props}
-      className="-mx-4 mt-8 -mb-4 flex flex-row-reverse gap-2 bg-slate-100 p-4 dark:bg-slate-800"
+      className="-mx-4 mt-8 -mb-4 flex flex-row-reverse gap-2 bg-gray-100 p-4 dark:bg-gray-800"
     />
   );
 }
 
 function CloseButton(props) {
   const className = `
-    bg-transparent border-[1px] border-solid border-slate-500 dark:border-slate-300
-    text-slate-900 dark:text-slate-50 py-2 px-4 rounded font-sans min-w-[80px]
-    hover:bg-slate-200 dark:hover:bg-slate-700`;
+    bg-transparent border-[1px] border-solid border-gray-500 dark:border-gray-300
+    text-gray-900 dark:text-gray-50 py-2 px-4 rounded font-sans min-w-[80px]
+    hover:bg-gray-200 dark:hover:bg-gray-700`;
 
   return <AlertDialog.Close {...props} className={className} />;
 }

diff --git a/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.tsx b/docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.tsx
@@ -21,16 +21,16 @@ export default function UnstyledDialogIntroduction() {
 
 function TriggerButton(props: AlertDialog.Trigger.Props) {
   const className = `
-    bg-slate-900 dark:bg-slate-50 text-slate-50 dark:text-slate-900
+    bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900
     py-2 px-4 rounded min-w-[80px] border-none font-sans
-    hover:bg-slate-700 dark:hover:bg-slate-200`;
+    hover:bg-gray-700 dark:hover:bg-gray-200`;
 
   return <AlertDialog.Trigger {...props} className={className} />;
 }
 
 function Popup(props: AlertDialog.Popup.Props) {
   const className = `
-    bg-slate-50 dark:bg-slate-900 border-[1px] border-solid border-slate-100 dark:border-slate-700
+    bg-gray-50 dark:bg-gray-900 border-[1px] border-solid border-gray-100 dark:border-gray-700
     min-w-[400px] rounded shadow-xl fixed top-2/4 left-2/4 z-[2100]
     -translate-x-2/4 -translate-y-2/4 p-4`;
 
@@ -41,16 +41,16 @@ function Controls(props: React.ComponentPropsWithoutRef<'div'>) {
   return (
     <div
       {...props}
-      className="-mx-4 mt-8 -mb-4 flex flex-row-reverse gap-2 bg-slate-100 p-4 dark:bg-slate-800"
+      className="-mx-4 mt-8 -mb-4 flex flex-row-reverse gap-2 bg-gray-100 p-4 dark:bg-gray-800"
     />
   );
 }
 
 function CloseButton(props: AlertDialog.Close.Props) {
   const className = `
-    bg-transparent border-[1px] border-solid border-slate-500 dark:border-slate-300
-    text-slate-900 dark:text-slate-50 py-2 px-4 rounded font-sans min-w-[80px]
-    hover:bg-slate-200 dark:hover:bg-slate-700`;
+    bg-transparent border-[1px] border-solid border-gray-500 dark:border-gray-300
+    text-gray-900 dark:text-gray-50 py-2 px-4 rounded font-sans min-w-[80px]
+    hover:bg-gray-200 dark:hover:bg-gray-700`;
 
   return <AlertDialog.Close {...props} className={className} />;
 }

diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js
@@ -75,11 +75,11 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
       className={(state) =>
         classNames(
           'h-6 w-6 rounded-md p-0',
-          'border-2 border-solid border-purple-500',
-          'focus-visible:ring-opacity-60 outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-2',
+          'border-2 border-solid border-gray-500',
+          'focus-visible:ring-opacity-60 outline-none focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2',
           'transition-colors duration-150',
           state.disabled && 'cursor-not-allowed opacity-40',
-          state.checked && 'bg-purple-500',
+          state.checked && 'bg-gray-500',
           !state.checked && 'bg-transparent',
           typeof props.className === 'function'
             ? props.className(state)

diff --git a/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx b/docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx
@@ -75,11 +75,11 @@ const Checkbox = React.forwardRef<HTMLButtonElement, BaseCheckbox.Root.Props>(
         className={(state) =>
           classNames(
             'h-6 w-6 rounded-md p-0',
-            'border-2 border-solid border-purple-500',
-            'focus-visible:ring-opacity-60 outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-2',
+            'border-2 border-solid border-gray-500',
+            'focus-visible:ring-opacity-60 outline-none focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2',
             'transition-colors duration-150',
             state.disabled && 'cursor-not-allowed opacity-40',
-            state.checked && 'bg-purple-500',
+            state.checked && 'bg-gray-500',
             !state.checked && 'bg-transparent',
             typeof props.className === 'function'
               ? props.className(state)

diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js
@@ -47,11 +47,11 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
       className={(state) =>
         classNames(
           'h-6 w-6 rounded-md p-0',
-          'border-2 border-solid border-purple-500',
-          'focus-visible:ring-opacity-60 outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-2',
+          'border-2 border-solid border-gray-500',
+          'focus-visible:ring-opacity-60 outline-none focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2',
           'transition-colors duration-150',
           state.disabled && 'cursor-not-allowed opacity-40',
-          state.checked && 'bg-purple-500',
+          state.checked && 'bg-gray-500',
           !state.checked && 'bg-transparent',
           typeof props.className === 'function'
             ? props.className(state)

diff --git a/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx b/docs/data/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx
@@ -47,11 +47,11 @@ const Checkbox = React.forwardRef<HTMLButtonElement, BaseCheckbox.Root.Props>(
         className={(state) =>
           classNames(
             'h-6 w-6 rounded-md p-0',
-            'border-2 border-solid border-purple-500',
-            'focus-visible:ring-opacity-60 outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-2',
+            'border-2 border-solid border-gray-500',
+            'focus-visible:ring-opacity-60 outline-none focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2',
             'transition-colors duration-150',
             state.disabled && 'cursor-not-allowed opacity-40',
-            state.checked && 'bg-purple-500',
+            state.checked && 'bg-gray-500',
             !state.checked && 'bg-transparent',
             typeof props.className === 'function'
               ? props.className(state)

diff --git a/docs/data/components/dialog/UnstyledDialogIntroduction/css-modules/styles.module.css b/docs/data/components/dialog/UnstyledDialogIntroduction/css-modules/styles.module.css
@@ -1,6 +1,6 @@
 .popup {
-  background: var(--gray-50);
-  border: 1px solid var(--gray-100);
+  background: var(--color-gray-50);
+  border: 1px solid var(--color-gray-100);
   min-width: 400px;
   border-radius: 4px;
   box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
@@ -13,14 +13,14 @@
   z-index: 2100;
 
   :global(.dark) & {
-    color: var(--gray-900);
-    border-color: var(--gray-700);
+    color: var(--color-gray-900);
+    border-color: var(--color-gray-700);
   }
 }
 
 .trigger {
-  background-color: var(--gray-900);
-  color: var(--gray-50);
+  background-color: var(--color-gray-900);
+  color: var(--color-gray-50);
   padding: 8px 16px;
   border-radius: 4px;
   border: none;
@@ -29,23 +29,23 @@
     sans-serif;
 
   &:hover {
-    background-color: var(--gray-700);
+    background-color: var(--color-gray-700);
 
     :global(.dark) & {
-      background-color: var(--gray-200);
+      background-color: var(--color-gray-200);
     }
   }
 
   :global(.dark) & {
-    background-color: var(--gray-50);
-    color: var(--gray-900);
+    background-color: var(--color-gray-50);
+    color: var(--color-gray-900);
   }
 }
 
 .close {
   background-color: transparent;
-  border: 1px solid var(--gray-500);
-  color: var(--gray-900);
+  border: 1px solid var(--color-gray-500);
+  color: var(--color-gray-900);
   padding: 8px 16px;
   border-radius: 4px;
   font-family:
@@ -54,29 +54,29 @@
   min-width: 80px;
 
   &:hover {
-    background-color: var(--gray-200);
+    background-color: var(--color-gray-200);
 
     :global(.dark) & {
-      background-color: var(--gray-700);
+      background-color: var(--color-gray-700);
     }
   }
 
   :global(.dark) & {
-    border-color: var(--gray-300);
-    color: var(--gray-50);
+    border-color: var(--color-gray-300);
+    color: var(--color-gray-50);
   }
 }
 
 .controls {
   display: flex;
   flex-direction: row-reverse;
-  background: var(--gray-100);
+  background: var(--color-gray-100);
   gap: 8px;
   padding: 16px;
   margin: 32px -16px -16px;
 
   :global(.dark) & {
-    background: var(--gray-800);
+    background: var(--color-gray-800);
   }
 }
 
@@ -94,7 +94,7 @@
 .textfield {
   padding: 8px;
   border-radius: 4px;
-  border: 1px solid var(--gray-300);
+  border: 1px solid var(--color-gray-300);
   font-family: 'IBM Plex Sans', sans-serif;
   margin: 16px 0;
   width: 100%;

diff --git a/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.js b/docs/data/components/dialog/UnstyledDialogIntroduction/tailwind/index.js
@@ -28,16 +28,16 @@ export default function UnstyledDialogIntroduction() {
 
 function TriggerButton(props) {
   const className = `
-    bg-slate-900 dark:bg-slate-50 text-slate-50 dark:text-slate-900
+    bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900
     py-2 px-4 rounded min-w-[80px] border-none font-sans
-    hover:bg-slate-700 dark:hover:bg-slate-200`;
+    hover:bg-gray-700 dark:hover:bg-gray-200`;
 
   return <Dialog.Trigger {...props} className={className} />;
 }
 
 function Popup(props) {
   const className = `
-    bg-slate-50 dark:bg-slate-900 border-[1px] border-solid border-slate-100 dark:border-slate-700
+    bg-gray-50 dark:bg-gray-900 border-[1px] border-solid border-gray-100 dark:border-gray-700
     min-w-[400px] rounded shadow-xl fixed top-2/4 left-2/4 z-[2100]
     -translate-x-2/4 -translate-y-2/4 p-4`;
 
@@ -48,16 +48,16 @@ function Controls(props) {
   return (
     <div
       {...props}
-      className="-mx-4 mt-8 -mb-4 flex flex-row-reverse gap-2 bg-slate-100 p-4 dark:bg-slate-800"
+      className="-mx-4 mt-8 -mb-4 flex flex-row-reverse gap-2 bg-gray-100 p-4 dark:bg-gray-800"
     />
   );
 }
 
 function CloseButton(props) {
   const className = `
-    bg-transparent border-[1px] border-solid border-slate-500 dark:border-slate-300
-    text-slate-900 dark:text-slate-50 py-2 px-4 rounded font-sans min-w-[80px]
-    hover:bg-slate-200 dark:hover:bg-slate-700`;
+    bg-transparent border-[1px] border-solid border-gray-500 dark:border-gray-300
+    text-gray-900 dark:text-gray-50 py-2 px-4 rounded font-sans min-w-[80px]
+    hover:bg-gray-200 dark:hover:bg-gray-700`;
 
   return <Dialog.Close {...props} className={className} />;
 }
@@ -82,7 +82,7 @@ function Backdrop(props) {
 function TextField(props) {
   const className = `
     w-full p-2 mt-4 font-sans
-    border-[1px] border-solid border-slate-300 dark:border-slate-700 rounded
+    border-[1px] border-solid border-gray-300 dark:border-gray-700 rounded
   `;
   return <input {...props} className={className} />;
 }