From 4f2d6ed3b83ef32b73408c9ebad560446154ca14 Mon Sep 17 00:00:00 2001
From: soecka <twcbnubio@gmail.com>
Date: Tue, 28 Jan 2025 00:31:25 +0800
Subject: [PATCH] [polish] mobile layout

---
 components/Layout/MainNavigator.tsx |  19 +-
 components/Member/Card.tsx          |   5 +-
 components/Project/index.tsx        |   2 +-
 pages/_document.tsx                 |   2 +-
 pages/index.tsx                     |   5 +-
 tailwind.config.ts                  | 381 ++++++++++++++++++++--------
 6 files changed, 289 insertions(+), 125 deletions(-)

diff --git a/components/Layout/MainNavigator.tsx b/components/Layout/MainNavigator.tsx
index ea9d09a..bc15aa0 100644
--- a/components/Layout/MainNavigator.tsx
+++ b/components/Layout/MainNavigator.tsx
@@ -48,16 +48,14 @@ export class MainNavigator extends Component {
 
     return (
       <>
-        <Button
+        <IconButton
           color="inherit"
           aria-controls="i18n-menu"
-          size="small"
           id="i18n-selector"
-          startIcon={<SymbolIcon name="translate" />}
           onClick={event => (this.menuAnchor = event.currentTarget)}
         >
-          {LanguageName[currentLanguage]}
-        </Button>
+          <SymbolIcon name="language" />
+        </IconButton>
         <Menu
           anchorEl={menuAnchor}
           id="i18n-menu"
@@ -104,7 +102,7 @@ export class MainNavigator extends Component {
         open={this.menuExpand}
         onClose={() => (this.menuExpand = false)}
       >
-        <Toolbar className="bg-transparent bg-none shadow-none" disableGutters />
+        <Toolbar disableGutters />
         <div className="bg-background-paper py-3 elevation-16">
           <nav className="flex flex-col items-center gap-4">{this.renderLinks()}</nav>
         </div>
@@ -121,7 +119,7 @@ export class MainNavigator extends Component {
               {this.renderDrawer()}
 
               <Image src="/idea2app.svg" alt="brand logo" width={32} height={40} />
-              <Link translate="no" className="font-bold uppercase" href="/">
+              <Link translate="no" className="font-bold uppercase" href="/" rel="home">
                 idea2app
               </Link>
             </div>
@@ -129,7 +127,12 @@ export class MainNavigator extends Component {
             <nav className="item-center hidden flex-row gap-4 sm:flex">{this.renderLinks()}</nav>
 
             <div className="flex flex-row items-center gap-3 sm:gap-6">
-              <Link href="https://github.com/idea2app" target="_blank" rel="noopener noreferrer">
+              <Link
+                href="https://github.com/idea2app"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="idea2app's GitHub account"
+              >
                 <GithubIcon />
               </Link>
               <ColorModeIconDropdown />
diff --git a/components/Member/Card.tsx b/components/Member/Card.tsx
index fee4268..4fd9c93 100644
--- a/components/Member/Card.tsx
+++ b/components/Member/Card.tsx
@@ -21,6 +21,7 @@ export const MemberCard: FC<MemberCardProps> = observer(
           href={`https://github.com/${String(github)}`}
           target="_blank"
           rel="noreferrer"
+          aria-label={`${String(nickname)}'s GitHub account`}
         >
           <GithubIcon />
         </a>
@@ -37,7 +38,7 @@ export const MemberCard: FC<MemberCardProps> = observer(
           />
         )}
 
-        <Link href={`/member/${String(nickname)}`}>
+        <Link href={`/member/${String(nickname)}`} aria-label={String(nickname)}>
           <h3 className="text-base">{String(nickname)}</h3>
           <p className="text-sm">{String(position ?? '')}</p>
         </Link>
@@ -51,5 +52,5 @@ export const MemberCard: FC<MemberCardProps> = observer(
 
       <Markdown markdown={String(summary)} />
     </li>
-  )
+  ),
 );
diff --git a/components/Project/index.tsx b/components/Project/index.tsx
index 570c1be..8be35d8 100644
--- a/components/Project/index.tsx
+++ b/components/Project/index.tsx
@@ -9,7 +9,7 @@ export interface ProjectListLayoutProps {
 }
 
 export const ProjectListLayout: FC<ProjectListLayoutProps> = ({ className = '', defaultData }) => (
-  <ul className={`${className} grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4`}>
+  <ul className={`${className} grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3`}>
     {defaultData.map(item => (
       <ProjectCard key={String(item.id)} className="h-full" {...item} />
     ))}
diff --git a/pages/_document.tsx b/pages/_document.tsx
index a34e1f8..dda1317 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -40,7 +40,7 @@ export default function Document() {
          * */}
         <link
           rel="stylesheet"
-          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=code,dark_mode,diversity_3,keyboard_arrow_down,light_mode,menu,translate,trending_up&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=code,dark_mode,diversity_3,keyboard_arrow_down,language,light_mode,menu,translate,trending_up&display=swap"
         />
         <script type="application/ld+json">{JSON.stringify(siteNameJsonLd)}</script>
       </Head>
diff --git a/pages/index.tsx b/pages/index.tsx
index 12f499e..947be34 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -51,7 +51,7 @@ const HomePage: FC<HomePageProps> = observer(({ repositories, members }) => (
             <p>{t('idea2app_summary')}</p>
             <p>{t('idea2app_slogan')}</p>
 
-            <p className="my-4 text-gray-500">{t('idea2app_slogan_2')}?</p>
+            <p className="my-4 text-neutral-500">{t('idea2app_slogan_2')}?</p>
 
             <a
               className="border-b-2 border-b-black py-1 dark:border-b-white"
@@ -104,8 +104,9 @@ const HomePage: FC<HomePageProps> = observer(({ repositories, members }) => (
       <Section title={t('member')} link="/member">
         <div className="relative max-h-[45rem] overflow-hidden">
           <Masonry
+            component="ul"
             className="overflow-hidden"
-            columns={{ xs: 2, md: 3 }}
+            columns={{ xs: 1, sm: 2, md: 3 }}
             spacing={2}
             defaultHeight={720}
             defaultColumns={4}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 2895206..985a5ea 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,40 +1,5 @@
 import plugin from 'tailwindcss/plugin';
 
-const status = ['error', 'info', 'success', 'warning'];
-const variants = ['primary', 'secondary', ...status],
-  weights = [
-    '50',
-    '100',
-    '200',
-    '300',
-    '400',
-    '500',
-    '600',
-    '700',
-    '800',
-    '900',
-    'A100',
-    'A200',
-    'A400',
-    'A700',
-  ],
-  typographies = [
-    'h1',
-    'h2',
-    'h3',
-    'h4',
-    'h5',
-    'h6',
-    'subtitle1',
-    'subtitle2',
-    'body1',
-    'body2',
-    'button',
-    'caption',
-    'overline',
-  ],
-  states = ['active', 'disabled', 'focus', 'hover', 'selected'];
-
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
@@ -52,6 +17,7 @@ export default {
   },
   theme: {
     // @see {@link https://mui-treasury.com/?path=/docs/tailwind-preset--docs }
+
     extend: {
       screens: {
         sm: '600px',
@@ -61,18 +27,42 @@ export default {
         '2xl': '1920px',
       },
       colors: {
-        ...variants.reduce(
-          (acc, variant) => ({
-            ...acc,
-            [variant]: {
-              DEFAULT: `rgb(var(--mui-palette-${variant}-mainChannel))`,
-              light: `rgb(var(--mui-palette-${variant}-lightChannel))`,
-              dark: `rgb(var(--mui-palette-${variant}-darkChannel))`,
-              contrastText: `rgb(var(--mui-palette-${variant}-contrastTextChannel))`,
-            },
-          }),
-          {},
-        ),
+        primary: {
+          DEFAULT: 'rgb(var(--mui-palette-primary-mainChannel))',
+          light: 'rgb(var(--mui-palette-primary-lightChannel))',
+          dark: 'rgb(var(--mui-palette-primary-darkChannel))',
+          contrastText: 'rgb(var(--mui-palette-primary-contrastTextChannel))',
+        },
+        secondary: {
+          DEFAULT: 'rgb(var(--mui-palette-secondary-mainChannel))',
+          light: 'rgb(var(--mui-palette-secondary-lightChannel))',
+          dark: 'rgb(var(--mui-palette-secondary-darkChannel))',
+          contrastText: 'rgb(var(--mui-palette-secondary-contrastTextChannel))',
+        },
+        info: {
+          DEFAULT: 'rgb(var(--mui-palette-info-mainChannel))',
+          light: 'rgb(var(--mui-palette-info-lightChannel))',
+          dark: 'rgb(var(--mui-palette-info-darkChannel))',
+          contrastText: 'rgb(var(--mui-palette-info-contrastTextChannel))',
+        },
+        error: {
+          DEFAULT: 'rgb(var(--mui-palette-error-mainChannel))',
+          light: 'rgb(var(--mui-palette-error-lightChannel))',
+          dark: 'rgb(var(--mui-palette-error-darkChannel))',
+          contrastText: 'rgb(var(--mui-palette-error-contrastTextChannel))',
+        },
+        success: {
+          DEFAULT: 'rgb(var(--mui-palette-success-mainChannel))',
+          light: 'rgb(var(--mui-palette-success-lightChannel))',
+          dark: 'rgb(var(--mui-palette-success-darkChannel))',
+          contrastText: 'rgb(var(--mui-palette-success-contrastTextChannel))',
+        },
+        warning: {
+          DEFAULT: 'rgb(var(--mui-palette-warning-mainChannel))',
+          light: 'rgb(var(--mui-palette-warning-lightChannel))',
+          dark: 'rgb(var(--mui-palette-warning-darkChannel))',
+          contrastText: 'rgb(var(--mui-palette-warning-contrastTextChannel))',
+        },
         text: {
           primary: 'var(--mui-palette-text-primary)',
           secondary: 'var(--mui-palette-text-secondary)',
@@ -82,30 +72,56 @@ export default {
           background: 'var(--mui-palette-common-background)',
           onBackground: 'var(--mui-palette-common-onBackground)',
         },
-        gray: weights.reduce(
-          (acc, weight) => ({ ...acc, [weight]: `var(--mui-palette-grey-${weight})` }),
-          {},
-        ),
+        gray: {
+          50: 'var(--mui-palette-grey-50)',
+          100: 'var(--mui-palette-grey-100)',
+          200: 'var(--mui-palette-grey-200)',
+          300: 'var(--mui-palette-grey-300)',
+          400: 'var(--mui-palette-grey-400)',
+          500: 'var(--mui-palette-grey-500)',
+          600: 'var(--mui-palette-grey-600)',
+          700: 'var(--mui-palette-grey-700)',
+          800: 'var(--mui-palette-grey-800)',
+          900: 'var(--mui-palette-grey-900)',
+          A100: 'var(--mui-palette-grey-A100)',
+          A200: 'var(--mui-palette-grey-A200)',
+          A400: 'var(--mui-palette-grey-A400)',
+          A700: 'var(--mui-palette-grey-A700)',
+        },
         divider: 'var(--mui-palette-divider)',
         background: {
           DEFAULT: 'var(--mui-palette-background-default)',
           paper: 'var(--mui-palette-background-paper)',
         },
-        action: states.reduce(
-          (acc, state) => ({ ...acc, [state]: `var(--mui-palette-action-${state})` }),
-          {},
-        ),
-        Alert: status.reduce(
-          (acc, status) => ({
-            ...acc,
-            [`${status}Color`]: `var(--mui-palette-Alert-${status}Color)`,
-            [`${status}FilledBg`]: `var(--mui-palette-Alert-${status}FilledBg)`,
-            [`${status}FilledColor`]: `var(--mui-palette-Alert-${status}FilledColor)`,
-            [`${status}StandardBg`]: `var(--mui-palette-Alert-${status}StandardBg)`,
-            [`${status}IconColor`]: `var(--mui-palette-Alert-${status}IconColor)`,
-          }),
-          {},
-        ),
+        action: {
+          active: 'var(--mui-palette-action-active)',
+          hover: 'var(--mui-palette-action-hover)',
+          selected: 'var(--mui-palette-action-selected)',
+          disabled: 'var(--mui-palette-action-disabled)',
+          focus: 'var(--mui-palette-action-focus)',
+        },
+        Alert: {
+          errorColor: 'var(--mui-palette-Alert-errorColor)',
+          infoColor: 'var(--mui-palette-Alert-infoColor)',
+          successColor: 'var(--mui-palette-Alert-successColor)',
+          warningColor: 'var(--mui-palette-Alert-warningColor)',
+          errorFilledBg: 'var(--mui-palette-Alert-errorFilledBg)',
+          infoFilledBg: 'var(--mui-palette-Alert-infoFilledBg)',
+          successFilledBg: 'var(--mui-palette-Alert-successFilledBg)',
+          warningFilledBg: 'var(--mui-palette-Alert-warningFilledBg)',
+          errorFilledColor: 'var(--mui-palette-Alert-errorFilledColor)',
+          infoFilledColor: 'var(--mui-palette-Alert-infoFilledColor)',
+          successFilledColor: 'var(--mui-palette-Alert-successFilledColor)',
+          warningFilledColor: 'var(--mui-palette-Alert-warningFilledColor)',
+          errorStandardBg: 'var(--mui-palette-Alert-errorStandardBg)',
+          infoStandardBg: 'var(--mui-palette-Alert-infoStandardBg)',
+          successStandardBg: 'var(--mui-palette-Alert-successStandardBg)',
+          warningStandardBg: 'var(--mui-palette-Alert-warningStandardBg)',
+          errorIconColor: 'var(--mui-palette-Alert-errorIconColor)',
+          infoIconColor: 'var(--mui-palette-Alert-infoIconColor)',
+          successIconColor: 'var(--mui-palette-Alert-successIconColor)',
+          warningIconColor: 'var(--mui-palette-Alert-warningIconColor)',
+        },
         AppBar: {
           defaultBg: 'var(--mui-palette-AppBar-defaultBg)',
         },
@@ -126,23 +142,25 @@ export default {
           hoverBg: 'var(--mui-palette-FilledInput-hoverBg)',
           disabledBg: 'var(--mui-palette-FilledInput-disabledBg)',
         },
-        LinearProgress: variants.reduce(
-          (acc, variant) => ({
-            ...acc,
-            [`${variant}Bg`]: `var(--mui-palette-LinearProgress-${variant}Bg)`,
-          }),
-          {},
-        ),
+        LinearProgress: {
+          primaryBg: 'var(--mui-palette-LinearProgress-primaryBg)',
+          secondaryBg: 'var(--mui-palette-LinearProgress-secondaryBg)',
+          errorBg: 'var(--mui-palette-LinearProgress-errorBg)',
+          infoBg: 'var(--mui-palette-LinearProgress-infoBg)',
+          successBg: 'var(--mui-palette-LinearProgress-successBg)',
+          warningBg: 'var(--mui-palette-LinearProgress-warningBg)',
+        },
         Skeleton: {
           bg: 'var(--mui-palette-Skeleton-bg)',
         },
-        Slider: variants.reduce(
-          (acc, variant) => ({
-            ...acc,
-            [`${variant}TrackColor`]: `var(--mui-palette-Slider-${variant}Track)`,
-          }),
-          {},
-        ),
+        Slider: {
+          primaryTrack: 'var(--mui-palette-Slider-primaryTrack)',
+          secondaryTrack: 'var(--mui-palette-Slider-secondaryTrack)',
+          errorTrack: 'var(--mui-palette-Slider-errorTrack)',
+          infoTrack: 'var(--mui-palette-Slider-infoTrack)',
+          successTrack: 'var(--mui-palette-Slider-successTrack)',
+          warningTrack: 'var(--mui-palette-Slider-warningTrack)',
+        },
         SnackbarContent: {
           bg: 'var(--mui-palette-SnackbarContent-bg)',
           color: 'var(--mui-palette-SnackbarContent-color)',
@@ -159,13 +177,12 @@ export default {
         Switch: {
           defaultColor: 'var(--mui-palette-Switch-defaultColor)',
           defaultDisabledColor: 'var(--mui-palette-Switch-defaultDisabledColor)',
-          ...variants.reduce(
-            (acc, variant) => ({
-              ...acc,
-              [`${variant}DisabledColor`]: `var(--mui-palette-Switch-${variant}DisabledColor)`,
-            }),
-            {},
-          ),
+          primaryDisabledColor: 'var(--mui-palette-Switch-primaryDisabledColor)',
+          secondaryDisabledColor: 'var(--mui-palette-Switch-secondaryDisabledColor)',
+          errorDisabledColor: 'var(--mui-palette-Switch-errorDisabledColor)',
+          infoDisabledColor: 'var(--mui-palette-Switch-infoDisabledColor)',
+          successDisabledColor: 'var(--mui-palette-Switch-successDisabledColor)',
+          warningDisabledColor: 'var(--mui-palette-Switch-warningDisabledColor)',
         },
         TableCell: {
           border: 'var(--mui-palette-TableCell-border)',
@@ -179,11 +196,39 @@ export default {
         DEFAULT: 'var(--mui-shape-borderRadius)',
         lg: 'calc(var(--mui-shape-borderRadius) * 2)',
       },
-      boxShadow: Array.from({ length: 24 }, (_, i) => `var(--mui-shadows-${++i})`),
-      opacity: states.reduce(
-        (acc, state) => ({ ...acc, [state]: `var(--mui-palette-action-${state}Opacity)` }),
-        {},
-      ),
+      boxShadow: {
+        1: 'var(--mui-shadows-1)',
+        2: 'var(--mui-shadows-2)',
+        3: 'var(--mui-shadows-3)',
+        4: 'var(--mui-shadows-4)',
+        5: 'var(--mui-shadows-5)',
+        6: 'var(--mui-shadows-6)',
+        7: 'var(--mui-shadows-7)',
+        8: 'var(--mui-shadows-8)',
+        9: 'var(--mui-shadows-9)',
+        10: 'var(--mui-shadows-10)',
+        11: 'var(--mui-shadows-11)',
+        12: 'var(--mui-shadows-12)',
+        13: 'var(--mui-shadows-13)',
+        14: 'var(--mui-shadows-14)',
+        15: 'var(--mui-shadows-15)',
+        16: 'var(--mui-shadows-16)',
+        17: 'var(--mui-shadows-17)',
+        18: 'var(--mui-shadows-18)',
+        19: 'var(--mui-shadows-19)',
+        20: 'var(--mui-shadows-20)',
+        21: 'var(--mui-shadows-21)',
+        22: 'var(--mui-shadows-22)',
+        23: 'var(--mui-shadows-23)',
+        24: 'var(--mui-shadows-24)',
+      },
+      opacity: {
+        activated: 'var(--mui-palette-action-activatedOpacity)',
+        disabled: 'var(--mui-palette-action-disabledOpacity)',
+        focus: 'var(--mui-palette-action-focusOpacity)',
+        hover: 'var(--mui-palette-action-hoverOpacity)',
+        selected: 'var(--mui-palette-action-selectedOpacity)',
+      },
       animation: {
         carousel: 'scrolls 60s linear infinite',
       },
@@ -207,26 +252,140 @@ export default {
         p: { font: 'var(--mui-font-body1)', letterSpacing: '0.00938em' },
         span: { font: 'var(--mui-font-body2)', letterSpacing: '0.01071em' },
       });
-
       utility.addUtilities({
-        ...typographies.reduce(
-          (acc, typography) => ({
-            ...acc,
-            [`.typography-${typography}`]: { font: `var(--mui-font-${typography})` },
-          }),
-          {},
-        ),
-        ...Array.from({ length: 24 }, (_, i) => ({
-          [`.overlay-${i}`]: {
-            backgroundImage: `var(--mui-overlays-${++i})`,
-          },
-        })),
-        ...Array.from({ length: 24 }, (_, i) => ({
-          [`.elevation-${i}`]: {
-            backgroundImage: `var(--mui-overlays-${++i})`,
-            boxShadow: `var(--mui-shadows-${i})`,
-          },
-        })),
+        '.typography-h1': { font: 'var(--mui-font-h1)' },
+        '.typography-h2': { font: 'var(--mui-font-h2)' },
+        '.typography-h3': { font: 'var(--mui-font-h3)' },
+        '.typography-h4': { font: 'var(--mui-font-h4)' },
+        '.typography-h5': { font: 'var(--mui-font-h5)' },
+        '.typography-h6': { font: 'var(--mui-font-h6)' },
+        '.typography-subtitle1': { font: 'var(--mui-font-subtitle1)' },
+        '.typography-subtitle2': { font: 'var(--mui-font-subtitle2)' },
+        '.typography-body1': { font: 'var(--mui-font-body1)' },
+        '.typography-body2': { font: 'var(--mui-font-body2)' },
+        '.typography-button': { font: 'var(--mui-font-button)' },
+        '.typography-caption': { font: 'var(--mui-font-caption)' },
+        '.typography-overline': { font: 'var(--mui-font-overline)' },
+        '.overlay-1': { backgroundImage: 'var(--mui-overlays-1)' },
+        '.overlay-2': { backgroundImage: 'var(--mui-overlays-2)' },
+        '.overlay-3': { backgroundImage: 'var(--mui-overlays-3)' },
+        '.overlay-4': { backgroundImage: 'var(--mui-overlays-4)' },
+        '.overlay-5': { backgroundImage: 'var(--mui-overlays-5)' },
+        '.overlay-6': { backgroundImage: 'var(--mui-overlays-6)' },
+        '.overlay-7': { backgroundImage: 'var(--mui-overlays-7)' },
+        '.overlay-8': { backgroundImage: 'var(--mui-overlays-8)' },
+        '.overlay-9': { backgroundImage: 'var(--mui-overlays-9)' },
+        '.overlay-10': { backgroundImage: 'var(--mui-overlays-10)' },
+        '.overlay-11': { backgroundImage: 'var(--mui-overlays-11)' },
+        '.overlay-12': { backgroundImage: 'var(--mui-overlays-12)' },
+        '.overlay-13': { backgroundImage: 'var(--mui-overlays-13)' },
+        '.overlay-14': { backgroundImage: 'var(--mui-overlays-14)' },
+        '.overlay-15': { backgroundImage: 'var(--mui-overlays-15)' },
+        '.overlay-16': { backgroundImage: 'var(--mui-overlays-16)' },
+        '.overlay-17': { backgroundImage: 'var(--mui-overlays-17)' },
+        '.overlay-18': { backgroundImage: 'var(--mui-overlays-18)' },
+        '.overlay-19': { backgroundImage: 'var(--mui-overlays-19)' },
+        '.overlay-20': { backgroundImage: 'var(--mui-overlays-20)' },
+        '.overlay-21': { backgroundImage: 'var(--mui-overlays-21)' },
+        '.overlay-22': { backgroundImage: 'var(--mui-overlays-22)' },
+        '.overlay-23': { backgroundImage: 'var(--mui-overlays-23)' },
+        '.overlay-24': { backgroundImage: 'var(--mui-overlays-24)' },
+        '.elevation-1': {
+          backgroundImage: 'var(--mui-overlays-1)',
+          boxShadow: 'var(--mui-shadows-1)',
+        },
+        '.elevation-2': {
+          backgroundImage: 'var(--mui-overlays-2)',
+          boxShadow: 'var(--mui-shadows-2)',
+        },
+        '.elevation-3': {
+          backgroundImage: 'var(--mui-overlays-3)',
+          boxShadow: 'var(--mui-shadows-3)',
+        },
+        '.elevation-4': {
+          backgroundImage: 'var(--mui-overlays-4)',
+          boxShadow: 'var(--mui-shadows-4)',
+        },
+        '.elevation-5': {
+          backgroundImage: 'var(--mui-overlays-5)',
+          boxShadow: 'var(--mui-shadows-5)',
+        },
+        '.elevation-6': {
+          backgroundImage: 'var(--mui-overlays-6)',
+          boxShadow: 'var(--mui-shadows-6)',
+        },
+        '.elevation-7': {
+          backgroundImage: 'var(--mui-overlays-7)',
+          boxShadow: 'var(--mui-shadows-7)',
+        },
+        '.elevation-8': {
+          backgroundImage: 'var(--mui-overlays-8)',
+          boxShadow: 'var(--mui-shadows-8)',
+        },
+        '.elevation-9': {
+          backgroundImage: 'var(--mui-overlays-9)',
+          boxShadow: 'var(--mui-shadows-9)',
+        },
+        '.elevation-10': {
+          backgroundImage: 'var(--mui-overlays-10)',
+          boxShadow: 'var(--mui-shadows-10)',
+        },
+        '.elevation-11': {
+          backgroundImage: 'var(--mui-overlays-11)',
+          boxShadow: 'var(--mui-shadows-11)',
+        },
+        '.elevation-12': {
+          backgroundImage: 'var(--mui-overlays-12)',
+          boxShadow: 'var(--mui-shadows-12)',
+        },
+        '.elevation-13': {
+          backgroundImage: 'var(--mui-overlays-13)',
+          boxShadow: 'var(--mui-shadows-13)',
+        },
+        '.elevation-14': {
+          backgroundImage: 'var(--mui-overlays-14)',
+          boxShadow: 'var(--mui-shadows-14)',
+        },
+        '.elevation-15': {
+          backgroundImage: 'var(--mui-overlays-15)',
+          boxShadow: 'var(--mui-shadows-15)',
+        },
+        '.elevation-16': {
+          backgroundImage: 'var(--mui-overlays-16)',
+          boxShadow: 'var(--mui-shadows-16)',
+        },
+        '.elevation-17': {
+          backgroundImage: 'var(--mui-overlays-17)',
+          boxShadow: 'var(--mui-shadows-17)',
+        },
+        '.elevation-18': {
+          backgroundImage: 'var(--mui-overlays-18)',
+          boxShadow: 'var(--mui-shadows-18)',
+        },
+        '.elevation-19': {
+          backgroundImage: 'var(--mui-overlays-19)',
+          boxShadow: 'var(--mui-shadows-19)',
+        },
+        '.elevation-20': {
+          backgroundImage: 'var(--mui-overlays-20)',
+          boxShadow: 'var(--mui-shadows-20)',
+        },
+        '.elevation-21': {
+          backgroundImage: 'var(--mui-overlays-21)',
+          boxShadow: 'var(--mui-shadows-21)',
+        },
+        '.elevation-22': {
+          backgroundImage: 'var(--mui-overlays-22)',
+          boxShadow: 'var(--mui-shadows-22)',
+        },
+        '.elevation-23': {
+          backgroundImage: 'var(--mui-overlays-23)',
+          boxShadow: 'var(--mui-shadows-23)',
+        },
+        '.elevation-24': {
+          backgroundImage: 'var(--mui-overlays-24)',
+          boxShadow: 'var(--mui-shadows-24)',
+        },
       });
     }),
   ],