From 80237a428beac1c10e05ca443a5a0ca73a637b25 Mon Sep 17 00:00:00 2001 From: zanivan Date: Thu, 29 Aug 2024 09:12:50 -0300 Subject: [PATCH 1/5] Add other 23 shadows from default theme --- .../templates/blog/theme/themePrimitives.js | 28 ++++++++++++++-- .../templates/blog/theme/themePrimitives.ts | 32 ++++++++++++++++--- .../checkout/theme/themePrimitives.js | 28 ++++++++++++++-- .../checkout/theme/themePrimitives.ts | 32 ++++++++++++++++--- .../dashboard/theme/themePrimitives.js | 28 ++++++++++++++-- .../dashboard/theme/themePrimitives.ts | 32 ++++++++++++++++--- .../marketing-page/theme/themePrimitives.js | 28 ++++++++++++++-- .../marketing-page/theme/themePrimitives.ts | 32 ++++++++++++++++--- .../templates/shared-theme/themePrimitives.js | 28 ++++++++++++++-- .../templates/shared-theme/themePrimitives.ts | 32 ++++++++++++++++--- .../sign-in-side/theme/themePrimitives.js | 28 ++++++++++++++-- .../sign-in-side/theme/themePrimitives.ts | 32 ++++++++++++++++--- .../sign-in/theme/themePrimitives.js | 28 ++++++++++++++-- .../sign-in/theme/themePrimitives.ts | 32 ++++++++++++++++--- .../sign-up/theme/themePrimitives.js | 28 ++++++++++++++-- .../sign-up/theme/themePrimitives.ts | 32 ++++++++++++++++--- 16 files changed, 432 insertions(+), 48 deletions(-) diff --git a/docs/data/material/getting-started/templates/blog/theme/themePrimitives.js b/docs/data/material/getting-started/templates/blog/theme/themePrimitives.js index 1894b11b326f0c..37448fbd9a0585 100644 --- a/docs/data/material/getting-started/templates/blog/theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/blog/theme/themePrimitives.js @@ -202,8 +202,32 @@ export const getDesignTokens = (mode) => ({ }, shadows: [ 'none', - ...(mode === 'dark' + mode === 'dark' ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + // The shadows below are from the default theme + '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', + '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', + '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', + '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', + '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', + '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', + '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', + '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', + '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', + '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', + '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', + '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', + '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', + '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', + '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', + '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', + '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', ], }); diff --git a/docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts index 09df769bb6687d..37cc9abddd2950 100644 --- a/docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts @@ -1,4 +1,4 @@ -import { createTheme, alpha, Shadows, PaletteMode } from '@mui/material/styles'; +import { createTheme, alpha, PaletteMode } from '@mui/material/styles'; declare module '@mui/material/Paper' { interface PaperPropsVariantOverrides { @@ -224,8 +224,32 @@ export const getDesignTokens = (mode: PaletteMode) => ({ }, shadows: [ 'none', - ...(mode === 'dark' + mode === 'dark' ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), - ] as Shadows, + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + // The shadows below are from the default theme + '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', + '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', + '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', + '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', + '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', + '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', + '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', + '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', + '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', + '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', + '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', + '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', + '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', + '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', + '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', + '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', + '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', + ], }); diff --git a/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.js b/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.js index 1894b11b326f0c..37448fbd9a0585 100644 --- a/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.js @@ -202,8 +202,32 @@ export const getDesignTokens = (mode) => ({ }, shadows: [ 'none', - ...(mode === 'dark' + mode === 'dark' ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + // The shadows below are from the default theme + '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', + '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', + '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', + '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', + '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', + '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', + '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', + '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', + '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', + '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', + '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', + '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', + '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', + '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', + '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', + '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', + '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', ], }); diff --git a/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts index 09df769bb6687d..37cc9abddd2950 100644 --- a/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts @@ -1,4 +1,4 @@ -import { createTheme, alpha, Shadows, PaletteMode } from '@mui/material/styles'; +import { createTheme, alpha, PaletteMode } from '@mui/material/styles'; declare module '@mui/material/Paper' { interface PaperPropsVariantOverrides { @@ -224,8 +224,32 @@ export const getDesignTokens = (mode: PaletteMode) => ({ }, shadows: [ 'none', - ...(mode === 'dark' + mode === 'dark' ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), - ] as Shadows, + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + // The shadows below are from the default theme + '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', + '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', + '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', + '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', + '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', + '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', + '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', + '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', + '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', + '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', + '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', + '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', + '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', + '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', + '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', + '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', + '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', + ], }); diff --git a/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.js b/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.js index 1894b11b326f0c..37448fbd9a0585 100644 --- a/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.js @@ -202,8 +202,32 @@ export const getDesignTokens = (mode) => ({ }, shadows: [ 'none', - ...(mode === 'dark' + mode === 'dark' ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + // The shadows below are from the default theme + '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', + '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', + '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', + '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', + '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', + '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', + '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', + '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', + '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', + '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', + '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', + '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', + '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', + '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', + '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', + '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', + '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', ], }); diff --git a/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts index 09df769bb6687d..37cc9abddd2950 100644 --- a/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts @@ -1,4 +1,4 @@ -import { createTheme, alpha, Shadows, PaletteMode } from '@mui/material/styles'; +import { createTheme, alpha, PaletteMode } from '@mui/material/styles'; declare module '@mui/material/Paper' { interface PaperPropsVariantOverrides { @@ -224,8 +224,32 @@ export const getDesignTokens = (mode: PaletteMode) => ({ }, shadows: [ 'none', - ...(mode === 'dark' + mode === 'dark' ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), - ] as Shadows, + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + // The shadows below are from the default theme + '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', + '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', + '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', + '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', + '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', + '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', + '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', + '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', + '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', + '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', + '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', + '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', + '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', + '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', + '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', + '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', + '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', + ], }); diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.js b/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.js index 1894b11b326f0c..37448fbd9a0585 100644 --- a/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.js @@ -202,8 +202,32 @@ export const getDesignTokens = (mode) => ({ }, shadows: [ 'none', - ...(mode === 'dark' + mode === 'dark' ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + // The shadows below are from the default theme + '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', + '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', + '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', + '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', + '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', + '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', + '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', + '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', + '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', + '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', + '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', + '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', + '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', + '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', + '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', + '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', + '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', ], }); diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts index 09df769bb6687d..37cc9abddd2950 100644 --- a/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts @@ -1,4 +1,4 @@ -import { createTheme, alpha, Shadows, PaletteMode } from '@mui/material/styles'; +import { createTheme, alpha, PaletteMode } from '@mui/material/styles'; declare module '@mui/material/Paper' { interface PaperPropsVariantOverrides { @@ -224,8 +224,32 @@ export const getDesignTokens = (mode: PaletteMode) => ({ }, shadows: [ 'none', - ...(mode === 'dark' + mode === 'dark' ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), - ] as Shadows, + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + // The shadows below are from the default theme + '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', + '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', + '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', + '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', + '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', + '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', + '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', + '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', + '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', + '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', + '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', + '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', + '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', + '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', + '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', + '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', + '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', + ], }); diff --git a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js index 1894b11b326f0c..37448fbd9a0585 100644 --- a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js @@ -202,8 +202,32 @@ export const getDesignTokens = (mode) => ({ }, shadows: [ 'none', - ...(mode === 'dark' + mode === 'dark' ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + // The shadows below are from the default theme + '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', + '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', + '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', + '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', + '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', + '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', + '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', + '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', + '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', + '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', + '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', + '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', + '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', + '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', + '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', + '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', + '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', ], }); diff --git a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts index 09df769bb6687d..37cc9abddd2950 100644 --- a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts @@ -1,4 +1,4 @@ -import { createTheme, alpha, Shadows, PaletteMode } from '@mui/material/styles'; +import { createTheme, alpha, PaletteMode } from '@mui/material/styles'; declare module '@mui/material/Paper' { interface PaperPropsVariantOverrides { @@ -224,8 +224,32 @@ export const getDesignTokens = (mode: PaletteMode) => ({ }, shadows: [ 'none', - ...(mode === 'dark' + mode === 'dark' ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), - ] as Shadows, + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + // The shadows below are from the default theme + '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', + '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', + '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', + '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', + '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', + '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', + '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', + '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', + '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', + '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', + '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', + '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', + '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', + '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', + '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', + '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', + '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', + ], }); diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.js b/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.js index 1894b11b326f0c..37448fbd9a0585 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.js @@ -202,8 +202,32 @@ export const getDesignTokens = (mode) => ({ }, shadows: [ 'none', - ...(mode === 'dark' + mode === 'dark' ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + // The shadows below are from the default theme + '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', + '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', + '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', + '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', + '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', + '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', + '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', + '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', + '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', + '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', + '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', + '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', + '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', + '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', + '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', + '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', + '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', ], }); diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts index 09df769bb6687d..37cc9abddd2950 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts @@ -1,4 +1,4 @@ -import { createTheme, alpha, Shadows, PaletteMode } from '@mui/material/styles'; +import { createTheme, alpha, PaletteMode } from '@mui/material/styles'; declare module '@mui/material/Paper' { interface PaperPropsVariantOverrides { @@ -224,8 +224,32 @@ export const getDesignTokens = (mode: PaletteMode) => ({ }, shadows: [ 'none', - ...(mode === 'dark' + mode === 'dark' ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), - ] as Shadows, + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + // The shadows below are from the default theme + '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', + '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', + '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', + '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', + '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', + '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', + '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', + '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', + '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', + '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', + '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', + '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', + '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', + '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', + '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', + '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', + '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', + ], }); diff --git a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.js b/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.js index 1894b11b326f0c..37448fbd9a0585 100644 --- a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.js @@ -202,8 +202,32 @@ export const getDesignTokens = (mode) => ({ }, shadows: [ 'none', - ...(mode === 'dark' + mode === 'dark' ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + // The shadows below are from the default theme + '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', + '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', + '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', + '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', + '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', + '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', + '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', + '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', + '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', + '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', + '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', + '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', + '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', + '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', + '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', + '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', + '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', ], }); diff --git a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts index 09df769bb6687d..37cc9abddd2950 100644 --- a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts @@ -1,4 +1,4 @@ -import { createTheme, alpha, Shadows, PaletteMode } from '@mui/material/styles'; +import { createTheme, alpha, PaletteMode } from '@mui/material/styles'; declare module '@mui/material/Paper' { interface PaperPropsVariantOverrides { @@ -224,8 +224,32 @@ export const getDesignTokens = (mode: PaletteMode) => ({ }, shadows: [ 'none', - ...(mode === 'dark' + mode === 'dark' ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), - ] as Shadows, + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + // The shadows below are from the default theme + '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', + '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', + '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', + '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', + '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', + '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', + '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', + '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', + '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', + '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', + '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', + '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', + '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', + '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', + '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', + '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', + '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', + ], }); diff --git a/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.js b/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.js index 1894b11b326f0c..37448fbd9a0585 100644 --- a/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.js @@ -202,8 +202,32 @@ export const getDesignTokens = (mode) => ({ }, shadows: [ 'none', - ...(mode === 'dark' + mode === 'dark' ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + // The shadows below are from the default theme + '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', + '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', + '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', + '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', + '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', + '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', + '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', + '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', + '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', + '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', + '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', + '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', + '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', + '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', + '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', + '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', + '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', ], }); diff --git a/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts index 09df769bb6687d..37cc9abddd2950 100644 --- a/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts @@ -1,4 +1,4 @@ -import { createTheme, alpha, Shadows, PaletteMode } from '@mui/material/styles'; +import { createTheme, alpha, PaletteMode } from '@mui/material/styles'; declare module '@mui/material/Paper' { interface PaperPropsVariantOverrides { @@ -224,8 +224,32 @@ export const getDesignTokens = (mode: PaletteMode) => ({ }, shadows: [ 'none', - ...(mode === 'dark' + mode === 'dark' ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'), - ] as Shadows, + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', + // The shadows below are from the default theme + '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', + '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', + '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', + '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', + '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', + '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', + '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', + '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', + '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', + '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', + '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', + '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', + '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', + '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', + '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', + '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', + '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', + '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', + '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', + '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', + ], }); From e4d3feabab74009d7ed2717df7fa7405cfe15db8 Mon Sep 17 00:00:00 2001 From: zanivan Date: Thu, 29 Aug 2024 15:22:00 -0300 Subject: [PATCH 2/5] Change customTheme for defaultTheme --- .../templates/blog/theme/themePrimitives.ts | 24 +++++++++---------- .../checkout/theme/themePrimitives.ts | 24 +++++++++---------- .../dashboard/theme/themePrimitives.ts | 24 +++++++++---------- .../marketing-page/theme/themePrimitives.ts | 24 +++++++++---------- .../templates/shared-theme/themePrimitives.ts | 24 +++++++++---------- .../sign-in-side/theme/themePrimitives.ts | 24 +++++++++---------- .../sign-in/theme/themePrimitives.ts | 24 +++++++++---------- .../sign-up/theme/themePrimitives.ts | 24 +++++++++---------- 8 files changed, 96 insertions(+), 96 deletions(-) diff --git a/docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts index 37cc9abddd2950..5cbf16422ec517 100644 --- a/docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts @@ -22,7 +22,7 @@ declare module '@mui/material/styles/createPalette' { interface PaletteColor extends ColorRange {} } -const customTheme = createTheme(); +const defaultTheme = createTheme(); export const brand = { 50: 'hsl(210, 100%, 95%)', @@ -173,49 +173,49 @@ export const getDesignTokens = (mode: PaletteMode) => ({ typography: { fontFamily: ['"Inter", "sans-serif"'].join(','), h1: { - fontSize: customTheme.typography.pxToRem(48), + fontSize: defaultTheme.typography.pxToRem(48), fontWeight: 600, lineHeight: 1.2, letterSpacing: -0.5, }, h2: { - fontSize: customTheme.typography.pxToRem(36), + fontSize: defaultTheme.typography.pxToRem(36), fontWeight: 600, lineHeight: 1.2, }, h3: { - fontSize: customTheme.typography.pxToRem(30), + fontSize: defaultTheme.typography.pxToRem(30), lineHeight: 1.2, }, h4: { - fontSize: customTheme.typography.pxToRem(24), + fontSize: defaultTheme.typography.pxToRem(24), fontWeight: 600, lineHeight: 1.5, }, h5: { - fontSize: customTheme.typography.pxToRem(20), + fontSize: defaultTheme.typography.pxToRem(20), fontWeight: 600, }, h6: { - fontSize: customTheme.typography.pxToRem(18), + fontSize: defaultTheme.typography.pxToRem(18), fontWeight: 600, }, subtitle1: { - fontSize: customTheme.typography.pxToRem(18), + fontSize: defaultTheme.typography.pxToRem(18), }, subtitle2: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), fontWeight: 500, }, body1: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), }, body2: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), fontWeight: 400, }, caption: { - fontSize: customTheme.typography.pxToRem(12), + fontSize: defaultTheme.typography.pxToRem(12), fontWeight: 400, }, }, diff --git a/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts index 37cc9abddd2950..5cbf16422ec517 100644 --- a/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts @@ -22,7 +22,7 @@ declare module '@mui/material/styles/createPalette' { interface PaletteColor extends ColorRange {} } -const customTheme = createTheme(); +const defaultTheme = createTheme(); export const brand = { 50: 'hsl(210, 100%, 95%)', @@ -173,49 +173,49 @@ export const getDesignTokens = (mode: PaletteMode) => ({ typography: { fontFamily: ['"Inter", "sans-serif"'].join(','), h1: { - fontSize: customTheme.typography.pxToRem(48), + fontSize: defaultTheme.typography.pxToRem(48), fontWeight: 600, lineHeight: 1.2, letterSpacing: -0.5, }, h2: { - fontSize: customTheme.typography.pxToRem(36), + fontSize: defaultTheme.typography.pxToRem(36), fontWeight: 600, lineHeight: 1.2, }, h3: { - fontSize: customTheme.typography.pxToRem(30), + fontSize: defaultTheme.typography.pxToRem(30), lineHeight: 1.2, }, h4: { - fontSize: customTheme.typography.pxToRem(24), + fontSize: defaultTheme.typography.pxToRem(24), fontWeight: 600, lineHeight: 1.5, }, h5: { - fontSize: customTheme.typography.pxToRem(20), + fontSize: defaultTheme.typography.pxToRem(20), fontWeight: 600, }, h6: { - fontSize: customTheme.typography.pxToRem(18), + fontSize: defaultTheme.typography.pxToRem(18), fontWeight: 600, }, subtitle1: { - fontSize: customTheme.typography.pxToRem(18), + fontSize: defaultTheme.typography.pxToRem(18), }, subtitle2: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), fontWeight: 500, }, body1: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), }, body2: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), fontWeight: 400, }, caption: { - fontSize: customTheme.typography.pxToRem(12), + fontSize: defaultTheme.typography.pxToRem(12), fontWeight: 400, }, }, diff --git a/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts index 37cc9abddd2950..5cbf16422ec517 100644 --- a/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts @@ -22,7 +22,7 @@ declare module '@mui/material/styles/createPalette' { interface PaletteColor extends ColorRange {} } -const customTheme = createTheme(); +const defaultTheme = createTheme(); export const brand = { 50: 'hsl(210, 100%, 95%)', @@ -173,49 +173,49 @@ export const getDesignTokens = (mode: PaletteMode) => ({ typography: { fontFamily: ['"Inter", "sans-serif"'].join(','), h1: { - fontSize: customTheme.typography.pxToRem(48), + fontSize: defaultTheme.typography.pxToRem(48), fontWeight: 600, lineHeight: 1.2, letterSpacing: -0.5, }, h2: { - fontSize: customTheme.typography.pxToRem(36), + fontSize: defaultTheme.typography.pxToRem(36), fontWeight: 600, lineHeight: 1.2, }, h3: { - fontSize: customTheme.typography.pxToRem(30), + fontSize: defaultTheme.typography.pxToRem(30), lineHeight: 1.2, }, h4: { - fontSize: customTheme.typography.pxToRem(24), + fontSize: defaultTheme.typography.pxToRem(24), fontWeight: 600, lineHeight: 1.5, }, h5: { - fontSize: customTheme.typography.pxToRem(20), + fontSize: defaultTheme.typography.pxToRem(20), fontWeight: 600, }, h6: { - fontSize: customTheme.typography.pxToRem(18), + fontSize: defaultTheme.typography.pxToRem(18), fontWeight: 600, }, subtitle1: { - fontSize: customTheme.typography.pxToRem(18), + fontSize: defaultTheme.typography.pxToRem(18), }, subtitle2: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), fontWeight: 500, }, body1: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), }, body2: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), fontWeight: 400, }, caption: { - fontSize: customTheme.typography.pxToRem(12), + fontSize: defaultTheme.typography.pxToRem(12), fontWeight: 400, }, }, diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts index 37cc9abddd2950..5cbf16422ec517 100644 --- a/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts @@ -22,7 +22,7 @@ declare module '@mui/material/styles/createPalette' { interface PaletteColor extends ColorRange {} } -const customTheme = createTheme(); +const defaultTheme = createTheme(); export const brand = { 50: 'hsl(210, 100%, 95%)', @@ -173,49 +173,49 @@ export const getDesignTokens = (mode: PaletteMode) => ({ typography: { fontFamily: ['"Inter", "sans-serif"'].join(','), h1: { - fontSize: customTheme.typography.pxToRem(48), + fontSize: defaultTheme.typography.pxToRem(48), fontWeight: 600, lineHeight: 1.2, letterSpacing: -0.5, }, h2: { - fontSize: customTheme.typography.pxToRem(36), + fontSize: defaultTheme.typography.pxToRem(36), fontWeight: 600, lineHeight: 1.2, }, h3: { - fontSize: customTheme.typography.pxToRem(30), + fontSize: defaultTheme.typography.pxToRem(30), lineHeight: 1.2, }, h4: { - fontSize: customTheme.typography.pxToRem(24), + fontSize: defaultTheme.typography.pxToRem(24), fontWeight: 600, lineHeight: 1.5, }, h5: { - fontSize: customTheme.typography.pxToRem(20), + fontSize: defaultTheme.typography.pxToRem(20), fontWeight: 600, }, h6: { - fontSize: customTheme.typography.pxToRem(18), + fontSize: defaultTheme.typography.pxToRem(18), fontWeight: 600, }, subtitle1: { - fontSize: customTheme.typography.pxToRem(18), + fontSize: defaultTheme.typography.pxToRem(18), }, subtitle2: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), fontWeight: 500, }, body1: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), }, body2: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), fontWeight: 400, }, caption: { - fontSize: customTheme.typography.pxToRem(12), + fontSize: defaultTheme.typography.pxToRem(12), fontWeight: 400, }, }, diff --git a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts index 37cc9abddd2950..5cbf16422ec517 100644 --- a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts @@ -22,7 +22,7 @@ declare module '@mui/material/styles/createPalette' { interface PaletteColor extends ColorRange {} } -const customTheme = createTheme(); +const defaultTheme = createTheme(); export const brand = { 50: 'hsl(210, 100%, 95%)', @@ -173,49 +173,49 @@ export const getDesignTokens = (mode: PaletteMode) => ({ typography: { fontFamily: ['"Inter", "sans-serif"'].join(','), h1: { - fontSize: customTheme.typography.pxToRem(48), + fontSize: defaultTheme.typography.pxToRem(48), fontWeight: 600, lineHeight: 1.2, letterSpacing: -0.5, }, h2: { - fontSize: customTheme.typography.pxToRem(36), + fontSize: defaultTheme.typography.pxToRem(36), fontWeight: 600, lineHeight: 1.2, }, h3: { - fontSize: customTheme.typography.pxToRem(30), + fontSize: defaultTheme.typography.pxToRem(30), lineHeight: 1.2, }, h4: { - fontSize: customTheme.typography.pxToRem(24), + fontSize: defaultTheme.typography.pxToRem(24), fontWeight: 600, lineHeight: 1.5, }, h5: { - fontSize: customTheme.typography.pxToRem(20), + fontSize: defaultTheme.typography.pxToRem(20), fontWeight: 600, }, h6: { - fontSize: customTheme.typography.pxToRem(18), + fontSize: defaultTheme.typography.pxToRem(18), fontWeight: 600, }, subtitle1: { - fontSize: customTheme.typography.pxToRem(18), + fontSize: defaultTheme.typography.pxToRem(18), }, subtitle2: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), fontWeight: 500, }, body1: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), }, body2: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), fontWeight: 400, }, caption: { - fontSize: customTheme.typography.pxToRem(12), + fontSize: defaultTheme.typography.pxToRem(12), fontWeight: 400, }, }, diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts index 37cc9abddd2950..5cbf16422ec517 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts @@ -22,7 +22,7 @@ declare module '@mui/material/styles/createPalette' { interface PaletteColor extends ColorRange {} } -const customTheme = createTheme(); +const defaultTheme = createTheme(); export const brand = { 50: 'hsl(210, 100%, 95%)', @@ -173,49 +173,49 @@ export const getDesignTokens = (mode: PaletteMode) => ({ typography: { fontFamily: ['"Inter", "sans-serif"'].join(','), h1: { - fontSize: customTheme.typography.pxToRem(48), + fontSize: defaultTheme.typography.pxToRem(48), fontWeight: 600, lineHeight: 1.2, letterSpacing: -0.5, }, h2: { - fontSize: customTheme.typography.pxToRem(36), + fontSize: defaultTheme.typography.pxToRem(36), fontWeight: 600, lineHeight: 1.2, }, h3: { - fontSize: customTheme.typography.pxToRem(30), + fontSize: defaultTheme.typography.pxToRem(30), lineHeight: 1.2, }, h4: { - fontSize: customTheme.typography.pxToRem(24), + fontSize: defaultTheme.typography.pxToRem(24), fontWeight: 600, lineHeight: 1.5, }, h5: { - fontSize: customTheme.typography.pxToRem(20), + fontSize: defaultTheme.typography.pxToRem(20), fontWeight: 600, }, h6: { - fontSize: customTheme.typography.pxToRem(18), + fontSize: defaultTheme.typography.pxToRem(18), fontWeight: 600, }, subtitle1: { - fontSize: customTheme.typography.pxToRem(18), + fontSize: defaultTheme.typography.pxToRem(18), }, subtitle2: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), fontWeight: 500, }, body1: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), }, body2: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), fontWeight: 400, }, caption: { - fontSize: customTheme.typography.pxToRem(12), + fontSize: defaultTheme.typography.pxToRem(12), fontWeight: 400, }, }, diff --git a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts index 37cc9abddd2950..5cbf16422ec517 100644 --- a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts @@ -22,7 +22,7 @@ declare module '@mui/material/styles/createPalette' { interface PaletteColor extends ColorRange {} } -const customTheme = createTheme(); +const defaultTheme = createTheme(); export const brand = { 50: 'hsl(210, 100%, 95%)', @@ -173,49 +173,49 @@ export const getDesignTokens = (mode: PaletteMode) => ({ typography: { fontFamily: ['"Inter", "sans-serif"'].join(','), h1: { - fontSize: customTheme.typography.pxToRem(48), + fontSize: defaultTheme.typography.pxToRem(48), fontWeight: 600, lineHeight: 1.2, letterSpacing: -0.5, }, h2: { - fontSize: customTheme.typography.pxToRem(36), + fontSize: defaultTheme.typography.pxToRem(36), fontWeight: 600, lineHeight: 1.2, }, h3: { - fontSize: customTheme.typography.pxToRem(30), + fontSize: defaultTheme.typography.pxToRem(30), lineHeight: 1.2, }, h4: { - fontSize: customTheme.typography.pxToRem(24), + fontSize: defaultTheme.typography.pxToRem(24), fontWeight: 600, lineHeight: 1.5, }, h5: { - fontSize: customTheme.typography.pxToRem(20), + fontSize: defaultTheme.typography.pxToRem(20), fontWeight: 600, }, h6: { - fontSize: customTheme.typography.pxToRem(18), + fontSize: defaultTheme.typography.pxToRem(18), fontWeight: 600, }, subtitle1: { - fontSize: customTheme.typography.pxToRem(18), + fontSize: defaultTheme.typography.pxToRem(18), }, subtitle2: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), fontWeight: 500, }, body1: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), }, body2: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), fontWeight: 400, }, caption: { - fontSize: customTheme.typography.pxToRem(12), + fontSize: defaultTheme.typography.pxToRem(12), fontWeight: 400, }, }, diff --git a/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts index 37cc9abddd2950..5cbf16422ec517 100644 --- a/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts @@ -22,7 +22,7 @@ declare module '@mui/material/styles/createPalette' { interface PaletteColor extends ColorRange {} } -const customTheme = createTheme(); +const defaultTheme = createTheme(); export const brand = { 50: 'hsl(210, 100%, 95%)', @@ -173,49 +173,49 @@ export const getDesignTokens = (mode: PaletteMode) => ({ typography: { fontFamily: ['"Inter", "sans-serif"'].join(','), h1: { - fontSize: customTheme.typography.pxToRem(48), + fontSize: defaultTheme.typography.pxToRem(48), fontWeight: 600, lineHeight: 1.2, letterSpacing: -0.5, }, h2: { - fontSize: customTheme.typography.pxToRem(36), + fontSize: defaultTheme.typography.pxToRem(36), fontWeight: 600, lineHeight: 1.2, }, h3: { - fontSize: customTheme.typography.pxToRem(30), + fontSize: defaultTheme.typography.pxToRem(30), lineHeight: 1.2, }, h4: { - fontSize: customTheme.typography.pxToRem(24), + fontSize: defaultTheme.typography.pxToRem(24), fontWeight: 600, lineHeight: 1.5, }, h5: { - fontSize: customTheme.typography.pxToRem(20), + fontSize: defaultTheme.typography.pxToRem(20), fontWeight: 600, }, h6: { - fontSize: customTheme.typography.pxToRem(18), + fontSize: defaultTheme.typography.pxToRem(18), fontWeight: 600, }, subtitle1: { - fontSize: customTheme.typography.pxToRem(18), + fontSize: defaultTheme.typography.pxToRem(18), }, subtitle2: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), fontWeight: 500, }, body1: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), }, body2: { - fontSize: customTheme.typography.pxToRem(14), + fontSize: defaultTheme.typography.pxToRem(14), fontWeight: 400, }, caption: { - fontSize: customTheme.typography.pxToRem(12), + fontSize: defaultTheme.typography.pxToRem(12), fontWeight: 400, }, }, From d9bb78c01c84d0a1e8c17f35d02e6ea99bb82a79 Mon Sep 17 00:00:00 2001 From: zanivan Date: Thu, 29 Aug 2024 15:43:02 -0300 Subject: [PATCH 3/5] Fix shadows --- .../templates/blog/theme/themePrimitives.js | 309 +++++++++--------- .../templates/blog/theme/themePrimitives.ts | 306 ++++++++--------- .../checkout/theme/themePrimitives.js | 309 +++++++++--------- .../checkout/theme/themePrimitives.ts | 306 ++++++++--------- .../dashboard/theme/themePrimitives.js | 309 +++++++++--------- .../dashboard/theme/themePrimitives.ts | 306 ++++++++--------- .../marketing-page/theme/themePrimitives.js | 309 +++++++++--------- .../marketing-page/theme/themePrimitives.ts | 306 ++++++++--------- .../templates/shared-theme/themePrimitives.js | 309 +++++++++--------- .../templates/shared-theme/themePrimitives.ts | 306 ++++++++--------- .../sign-in-side/theme/themePrimitives.js | 309 +++++++++--------- .../sign-in-side/theme/themePrimitives.ts | 306 ++++++++--------- .../sign-in/theme/themePrimitives.js | 309 +++++++++--------- .../sign-in/theme/themePrimitives.ts | 306 ++++++++--------- .../sign-up/theme/themePrimitives.js | 309 +++++++++--------- .../sign-up/theme/themePrimitives.ts | 306 ++++++++--------- 16 files changed, 2312 insertions(+), 2608 deletions(-) diff --git a/docs/data/material/getting-started/templates/blog/theme/themePrimitives.js b/docs/data/material/getting-started/templates/blog/theme/themePrimitives.js index 37448fbd9a0585..ba88ae6a65a342 100644 --- a/docs/data/material/getting-started/templates/blog/theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/blog/theme/themePrimitives.js @@ -1,6 +1,8 @@ import { createTheme, alpha } from '@mui/material/styles'; -const customTheme = createTheme(); +const defaultTheme = createTheme(); + +const customShadows = [...defaultTheme.shadows]; export const brand = { 50: 'hsl(210, 100%, 95%)', @@ -67,167 +69,148 @@ export const red = { 900: 'hsl(0, 93%, 6%)', }; -export const getDesignTokens = (mode) => ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[50], - light: brand[300], +export const getDesignTokens = (mode) => { + customShadows[1] = + mode === 'dark' + ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' + : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + + return { + palette: { + mode, + primary: { + light: brand[200], main: brand[400], dark: brand[700], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === 'dark' && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - ...(mode === 'dark' && { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: customTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: customTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: customTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: customTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: customTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: customTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: customTheme.typography.pxToRem(14), - }, - body2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: customTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: [ - 'none', - mode === 'dark' - ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - // The shadows below are from the default theme - '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', - '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', - '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', - '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', - '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', - '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', - '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', - '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', - '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', - '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', - '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', - '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', - '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', - '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', - '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', - '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', - '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', - ], -}); + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { + primary: 'hsl(0, 0%, 100%)', + secondary: gray[400], + }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: customShadows, + }; +}; diff --git a/docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts index 5cbf16422ec517..e66d84ba3c11c5 100644 --- a/docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts @@ -1,4 +1,4 @@ -import { createTheme, alpha, PaletteMode } from '@mui/material/styles'; +import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles'; declare module '@mui/material/Paper' { interface PaperPropsVariantOverrides { @@ -24,6 +24,8 @@ declare module '@mui/material/styles/createPalette' { const defaultTheme = createTheme(); +const customShadows: Shadows = [...defaultTheme.shadows]; + export const brand = { 50: 'hsl(210, 100%, 95%)', 100: 'hsl(210, 100%, 92%)', @@ -89,167 +91,145 @@ export const red = { 900: 'hsl(0, 93%, 6%)', }; -export const getDesignTokens = (mode: PaletteMode) => ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[50], - light: brand[300], +export const getDesignTokens = (mode: PaletteMode) => { + customShadows[1] = + mode === 'dark' + ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' + : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + + return { + palette: { + mode, + primary: { + light: brand[200], main: brand[400], dark: brand[700], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === 'dark' && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - ...(mode === 'dark' && { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: [ - 'none', - mode === 'dark' - ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - // The shadows below are from the default theme - '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', - '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', - '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', - '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', - '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', - '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', - '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', - '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', - '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', - '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', - '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', - '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', - '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', - '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', - '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', - '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', - '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', - ], -}); + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: customShadows, + }; +}; diff --git a/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.js b/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.js index 37448fbd9a0585..ba88ae6a65a342 100644 --- a/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.js @@ -1,6 +1,8 @@ import { createTheme, alpha } from '@mui/material/styles'; -const customTheme = createTheme(); +const defaultTheme = createTheme(); + +const customShadows = [...defaultTheme.shadows]; export const brand = { 50: 'hsl(210, 100%, 95%)', @@ -67,167 +69,148 @@ export const red = { 900: 'hsl(0, 93%, 6%)', }; -export const getDesignTokens = (mode) => ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[50], - light: brand[300], +export const getDesignTokens = (mode) => { + customShadows[1] = + mode === 'dark' + ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' + : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + + return { + palette: { + mode, + primary: { + light: brand[200], main: brand[400], dark: brand[700], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === 'dark' && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - ...(mode === 'dark' && { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: customTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: customTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: customTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: customTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: customTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: customTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: customTheme.typography.pxToRem(14), - }, - body2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: customTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: [ - 'none', - mode === 'dark' - ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - // The shadows below are from the default theme - '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', - '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', - '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', - '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', - '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', - '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', - '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', - '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', - '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', - '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', - '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', - '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', - '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', - '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', - '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', - '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', - '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', - ], -}); + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { + primary: 'hsl(0, 0%, 100%)', + secondary: gray[400], + }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: customShadows, + }; +}; diff --git a/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts index 5cbf16422ec517..e66d84ba3c11c5 100644 --- a/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts @@ -1,4 +1,4 @@ -import { createTheme, alpha, PaletteMode } from '@mui/material/styles'; +import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles'; declare module '@mui/material/Paper' { interface PaperPropsVariantOverrides { @@ -24,6 +24,8 @@ declare module '@mui/material/styles/createPalette' { const defaultTheme = createTheme(); +const customShadows: Shadows = [...defaultTheme.shadows]; + export const brand = { 50: 'hsl(210, 100%, 95%)', 100: 'hsl(210, 100%, 92%)', @@ -89,167 +91,145 @@ export const red = { 900: 'hsl(0, 93%, 6%)', }; -export const getDesignTokens = (mode: PaletteMode) => ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[50], - light: brand[300], +export const getDesignTokens = (mode: PaletteMode) => { + customShadows[1] = + mode === 'dark' + ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' + : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + + return { + palette: { + mode, + primary: { + light: brand[200], main: brand[400], dark: brand[700], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === 'dark' && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - ...(mode === 'dark' && { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: [ - 'none', - mode === 'dark' - ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - // The shadows below are from the default theme - '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', - '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', - '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', - '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', - '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', - '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', - '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', - '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', - '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', - '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', - '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', - '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', - '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', - '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', - '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', - '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', - '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', - ], -}); + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: customShadows, + }; +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.js b/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.js index 37448fbd9a0585..ba88ae6a65a342 100644 --- a/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.js @@ -1,6 +1,8 @@ import { createTheme, alpha } from '@mui/material/styles'; -const customTheme = createTheme(); +const defaultTheme = createTheme(); + +const customShadows = [...defaultTheme.shadows]; export const brand = { 50: 'hsl(210, 100%, 95%)', @@ -67,167 +69,148 @@ export const red = { 900: 'hsl(0, 93%, 6%)', }; -export const getDesignTokens = (mode) => ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[50], - light: brand[300], +export const getDesignTokens = (mode) => { + customShadows[1] = + mode === 'dark' + ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' + : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + + return { + palette: { + mode, + primary: { + light: brand[200], main: brand[400], dark: brand[700], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === 'dark' && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - ...(mode === 'dark' && { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: customTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: customTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: customTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: customTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: customTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: customTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: customTheme.typography.pxToRem(14), - }, - body2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: customTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: [ - 'none', - mode === 'dark' - ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - // The shadows below are from the default theme - '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', - '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', - '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', - '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', - '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', - '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', - '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', - '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', - '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', - '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', - '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', - '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', - '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', - '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', - '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', - '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', - '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', - ], -}); + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { + primary: 'hsl(0, 0%, 100%)', + secondary: gray[400], + }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: customShadows, + }; +}; diff --git a/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts index 5cbf16422ec517..e66d84ba3c11c5 100644 --- a/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts @@ -1,4 +1,4 @@ -import { createTheme, alpha, PaletteMode } from '@mui/material/styles'; +import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles'; declare module '@mui/material/Paper' { interface PaperPropsVariantOverrides { @@ -24,6 +24,8 @@ declare module '@mui/material/styles/createPalette' { const defaultTheme = createTheme(); +const customShadows: Shadows = [...defaultTheme.shadows]; + export const brand = { 50: 'hsl(210, 100%, 95%)', 100: 'hsl(210, 100%, 92%)', @@ -89,167 +91,145 @@ export const red = { 900: 'hsl(0, 93%, 6%)', }; -export const getDesignTokens = (mode: PaletteMode) => ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[50], - light: brand[300], +export const getDesignTokens = (mode: PaletteMode) => { + customShadows[1] = + mode === 'dark' + ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' + : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + + return { + palette: { + mode, + primary: { + light: brand[200], main: brand[400], dark: brand[700], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === 'dark' && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - ...(mode === 'dark' && { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: [ - 'none', - mode === 'dark' - ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - // The shadows below are from the default theme - '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', - '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', - '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', - '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', - '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', - '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', - '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', - '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', - '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', - '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', - '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', - '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', - '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', - '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', - '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', - '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', - '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', - ], -}); + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: customShadows, + }; +}; diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.js b/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.js index 37448fbd9a0585..ba88ae6a65a342 100644 --- a/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.js @@ -1,6 +1,8 @@ import { createTheme, alpha } from '@mui/material/styles'; -const customTheme = createTheme(); +const defaultTheme = createTheme(); + +const customShadows = [...defaultTheme.shadows]; export const brand = { 50: 'hsl(210, 100%, 95%)', @@ -67,167 +69,148 @@ export const red = { 900: 'hsl(0, 93%, 6%)', }; -export const getDesignTokens = (mode) => ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[50], - light: brand[300], +export const getDesignTokens = (mode) => { + customShadows[1] = + mode === 'dark' + ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' + : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + + return { + palette: { + mode, + primary: { + light: brand[200], main: brand[400], dark: brand[700], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === 'dark' && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - ...(mode === 'dark' && { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: customTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: customTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: customTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: customTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: customTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: customTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: customTheme.typography.pxToRem(14), - }, - body2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: customTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: [ - 'none', - mode === 'dark' - ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - // The shadows below are from the default theme - '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', - '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', - '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', - '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', - '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', - '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', - '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', - '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', - '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', - '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', - '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', - '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', - '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', - '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', - '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', - '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', - '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', - ], -}); + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { + primary: 'hsl(0, 0%, 100%)', + secondary: gray[400], + }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: customShadows, + }; +}; diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts index 5cbf16422ec517..e66d84ba3c11c5 100644 --- a/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts @@ -1,4 +1,4 @@ -import { createTheme, alpha, PaletteMode } from '@mui/material/styles'; +import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles'; declare module '@mui/material/Paper' { interface PaperPropsVariantOverrides { @@ -24,6 +24,8 @@ declare module '@mui/material/styles/createPalette' { const defaultTheme = createTheme(); +const customShadows: Shadows = [...defaultTheme.shadows]; + export const brand = { 50: 'hsl(210, 100%, 95%)', 100: 'hsl(210, 100%, 92%)', @@ -89,167 +91,145 @@ export const red = { 900: 'hsl(0, 93%, 6%)', }; -export const getDesignTokens = (mode: PaletteMode) => ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[50], - light: brand[300], +export const getDesignTokens = (mode: PaletteMode) => { + customShadows[1] = + mode === 'dark' + ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' + : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + + return { + palette: { + mode, + primary: { + light: brand[200], main: brand[400], dark: brand[700], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === 'dark' && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - ...(mode === 'dark' && { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: [ - 'none', - mode === 'dark' - ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - // The shadows below are from the default theme - '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', - '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', - '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', - '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', - '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', - '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', - '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', - '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', - '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', - '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', - '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', - '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', - '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', - '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', - '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', - '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', - '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', - ], -}); + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: customShadows, + }; +}; diff --git a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js index 37448fbd9a0585..ba88ae6a65a342 100644 --- a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js @@ -1,6 +1,8 @@ import { createTheme, alpha } from '@mui/material/styles'; -const customTheme = createTheme(); +const defaultTheme = createTheme(); + +const customShadows = [...defaultTheme.shadows]; export const brand = { 50: 'hsl(210, 100%, 95%)', @@ -67,167 +69,148 @@ export const red = { 900: 'hsl(0, 93%, 6%)', }; -export const getDesignTokens = (mode) => ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[50], - light: brand[300], +export const getDesignTokens = (mode) => { + customShadows[1] = + mode === 'dark' + ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' + : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + + return { + palette: { + mode, + primary: { + light: brand[200], main: brand[400], dark: brand[700], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === 'dark' && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - ...(mode === 'dark' && { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: customTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: customTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: customTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: customTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: customTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: customTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: customTheme.typography.pxToRem(14), - }, - body2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: customTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: [ - 'none', - mode === 'dark' - ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - // The shadows below are from the default theme - '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', - '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', - '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', - '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', - '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', - '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', - '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', - '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', - '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', - '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', - '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', - '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', - '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', - '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', - '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', - '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', - '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', - ], -}); + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { + primary: 'hsl(0, 0%, 100%)', + secondary: gray[400], + }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: customShadows, + }; +}; diff --git a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts index 5cbf16422ec517..e66d84ba3c11c5 100644 --- a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts @@ -1,4 +1,4 @@ -import { createTheme, alpha, PaletteMode } from '@mui/material/styles'; +import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles'; declare module '@mui/material/Paper' { interface PaperPropsVariantOverrides { @@ -24,6 +24,8 @@ declare module '@mui/material/styles/createPalette' { const defaultTheme = createTheme(); +const customShadows: Shadows = [...defaultTheme.shadows]; + export const brand = { 50: 'hsl(210, 100%, 95%)', 100: 'hsl(210, 100%, 92%)', @@ -89,167 +91,145 @@ export const red = { 900: 'hsl(0, 93%, 6%)', }; -export const getDesignTokens = (mode: PaletteMode) => ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[50], - light: brand[300], +export const getDesignTokens = (mode: PaletteMode) => { + customShadows[1] = + mode === 'dark' + ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' + : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + + return { + palette: { + mode, + primary: { + light: brand[200], main: brand[400], dark: brand[700], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === 'dark' && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - ...(mode === 'dark' && { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: [ - 'none', - mode === 'dark' - ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - // The shadows below are from the default theme - '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', - '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', - '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', - '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', - '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', - '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', - '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', - '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', - '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', - '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', - '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', - '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', - '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', - '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', - '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', - '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', - '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', - ], -}); + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: customShadows, + }; +}; diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.js b/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.js index 37448fbd9a0585..ba88ae6a65a342 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.js @@ -1,6 +1,8 @@ import { createTheme, alpha } from '@mui/material/styles'; -const customTheme = createTheme(); +const defaultTheme = createTheme(); + +const customShadows = [...defaultTheme.shadows]; export const brand = { 50: 'hsl(210, 100%, 95%)', @@ -67,167 +69,148 @@ export const red = { 900: 'hsl(0, 93%, 6%)', }; -export const getDesignTokens = (mode) => ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[50], - light: brand[300], +export const getDesignTokens = (mode) => { + customShadows[1] = + mode === 'dark' + ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' + : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + + return { + palette: { + mode, + primary: { + light: brand[200], main: brand[400], dark: brand[700], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === 'dark' && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - ...(mode === 'dark' && { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: customTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: customTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: customTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: customTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: customTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: customTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: customTheme.typography.pxToRem(14), - }, - body2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: customTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: [ - 'none', - mode === 'dark' - ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - // The shadows below are from the default theme - '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', - '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', - '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', - '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', - '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', - '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', - '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', - '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', - '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', - '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', - '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', - '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', - '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', - '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', - '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', - '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', - '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', - ], -}); + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { + primary: 'hsl(0, 0%, 100%)', + secondary: gray[400], + }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: customShadows, + }; +}; diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts index 5cbf16422ec517..e66d84ba3c11c5 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts @@ -1,4 +1,4 @@ -import { createTheme, alpha, PaletteMode } from '@mui/material/styles'; +import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles'; declare module '@mui/material/Paper' { interface PaperPropsVariantOverrides { @@ -24,6 +24,8 @@ declare module '@mui/material/styles/createPalette' { const defaultTheme = createTheme(); +const customShadows: Shadows = [...defaultTheme.shadows]; + export const brand = { 50: 'hsl(210, 100%, 95%)', 100: 'hsl(210, 100%, 92%)', @@ -89,167 +91,145 @@ export const red = { 900: 'hsl(0, 93%, 6%)', }; -export const getDesignTokens = (mode: PaletteMode) => ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[50], - light: brand[300], +export const getDesignTokens = (mode: PaletteMode) => { + customShadows[1] = + mode === 'dark' + ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' + : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + + return { + palette: { + mode, + primary: { + light: brand[200], main: brand[400], dark: brand[700], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === 'dark' && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - ...(mode === 'dark' && { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: [ - 'none', - mode === 'dark' - ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - // The shadows below are from the default theme - '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', - '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', - '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', - '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', - '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', - '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', - '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', - '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', - '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', - '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', - '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', - '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', - '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', - '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', - '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', - '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', - '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', - ], -}); + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: customShadows, + }; +}; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.js b/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.js index 37448fbd9a0585..ba88ae6a65a342 100644 --- a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.js @@ -1,6 +1,8 @@ import { createTheme, alpha } from '@mui/material/styles'; -const customTheme = createTheme(); +const defaultTheme = createTheme(); + +const customShadows = [...defaultTheme.shadows]; export const brand = { 50: 'hsl(210, 100%, 95%)', @@ -67,167 +69,148 @@ export const red = { 900: 'hsl(0, 93%, 6%)', }; -export const getDesignTokens = (mode) => ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[50], - light: brand[300], +export const getDesignTokens = (mode) => { + customShadows[1] = + mode === 'dark' + ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' + : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + + return { + palette: { + mode, + primary: { + light: brand[200], main: brand[400], dark: brand[700], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === 'dark' && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - ...(mode === 'dark' && { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: customTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: customTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: customTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: customTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: customTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: customTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: customTheme.typography.pxToRem(14), - }, - body2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: customTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: [ - 'none', - mode === 'dark' - ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - // The shadows below are from the default theme - '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', - '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', - '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', - '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', - '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', - '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', - '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', - '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', - '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', - '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', - '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', - '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', - '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', - '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', - '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', - '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', - '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', - ], -}); + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { + primary: 'hsl(0, 0%, 100%)', + secondary: gray[400], + }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: customShadows, + }; +}; diff --git a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts index 5cbf16422ec517..e66d84ba3c11c5 100644 --- a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts @@ -1,4 +1,4 @@ -import { createTheme, alpha, PaletteMode } from '@mui/material/styles'; +import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles'; declare module '@mui/material/Paper' { interface PaperPropsVariantOverrides { @@ -24,6 +24,8 @@ declare module '@mui/material/styles/createPalette' { const defaultTheme = createTheme(); +const customShadows: Shadows = [...defaultTheme.shadows]; + export const brand = { 50: 'hsl(210, 100%, 95%)', 100: 'hsl(210, 100%, 92%)', @@ -89,167 +91,145 @@ export const red = { 900: 'hsl(0, 93%, 6%)', }; -export const getDesignTokens = (mode: PaletteMode) => ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[50], - light: brand[300], +export const getDesignTokens = (mode: PaletteMode) => { + customShadows[1] = + mode === 'dark' + ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' + : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + + return { + palette: { + mode, + primary: { + light: brand[200], main: brand[400], dark: brand[700], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === 'dark' && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - ...(mode === 'dark' && { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: [ - 'none', - mode === 'dark' - ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - // The shadows below are from the default theme - '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', - '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', - '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', - '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', - '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', - '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', - '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', - '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', - '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', - '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', - '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', - '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', - '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', - '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', - '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', - '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', - '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', - ], -}); + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: customShadows, + }; +}; diff --git a/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.js b/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.js index 37448fbd9a0585..ba88ae6a65a342 100644 --- a/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.js @@ -1,6 +1,8 @@ import { createTheme, alpha } from '@mui/material/styles'; -const customTheme = createTheme(); +const defaultTheme = createTheme(); + +const customShadows = [...defaultTheme.shadows]; export const brand = { 50: 'hsl(210, 100%, 95%)', @@ -67,167 +69,148 @@ export const red = { 900: 'hsl(0, 93%, 6%)', }; -export const getDesignTokens = (mode) => ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[50], - light: brand[300], +export const getDesignTokens = (mode) => { + customShadows[1] = + mode === 'dark' + ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' + : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + + return { + palette: { + mode, + primary: { + light: brand[200], main: brand[400], dark: brand[700], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === 'dark' && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - ...(mode === 'dark' && { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: customTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: customTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: customTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: customTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: customTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: customTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: customTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: customTheme.typography.pxToRem(14), - }, - body2: { - fontSize: customTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: customTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: [ - 'none', - mode === 'dark' - ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - // The shadows below are from the default theme - '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', - '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', - '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', - '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', - '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', - '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', - '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', - '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', - '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', - '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', - '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', - '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', - '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', - '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', - '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', - '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', - '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', - ], -}); + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { + primary: 'hsl(0, 0%, 100%)', + secondary: gray[400], + }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: customShadows, + }; +}; diff --git a/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts index 5cbf16422ec517..e66d84ba3c11c5 100644 --- a/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts @@ -1,4 +1,4 @@ -import { createTheme, alpha, PaletteMode } from '@mui/material/styles'; +import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles'; declare module '@mui/material/Paper' { interface PaperPropsVariantOverrides { @@ -24,6 +24,8 @@ declare module '@mui/material/styles/createPalette' { const defaultTheme = createTheme(); +const customShadows: Shadows = [...defaultTheme.shadows]; + export const brand = { 50: 'hsl(210, 100%, 95%)', 100: 'hsl(210, 100%, 92%)', @@ -89,167 +91,145 @@ export const red = { 900: 'hsl(0, 93%, 6%)', }; -export const getDesignTokens = (mode: PaletteMode) => ({ - palette: { - mode, - primary: { - light: brand[200], - main: brand[400], - dark: brand[700], - contrastText: brand[50], - ...(mode === 'dark' && { - contrastText: brand[50], - light: brand[300], +export const getDesignTokens = (mode: PaletteMode) => { + customShadows[1] = + mode === 'dark' + ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' + : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + + return { + palette: { + mode, + primary: { + light: brand[200], main: brand[400], dark: brand[700], - }), - }, - info: { - light: brand[100], - main: brand[300], - dark: brand[600], - contrastText: gray[50], - ...(mode === 'dark' && { - contrastText: brand[300], - light: brand[500], - main: brand[700], - dark: brand[900], - }), - }, - warning: { - light: orange[300], - main: orange[400], - dark: orange[800], - ...(mode === 'dark' && { - light: orange[400], - main: orange[500], - dark: orange[700], - }), - }, - error: { - light: red[300], - main: red[400], - dark: red[800], - ...(mode === 'dark' && { - light: red[400], - main: red[500], - dark: red[700], - }), - }, - success: { - light: green[300], - main: green[400], - dark: green[800], - ...(mode === 'dark' && { - light: green[400], - main: green[500], - dark: green[700], - }), - }, - grey: { - ...gray, - }, - divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), - background: { - default: 'hsl(0, 0%, 99%)', - paper: 'hsl(220, 35%, 97%)', - ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), - }, - text: { - primary: gray[800], - secondary: gray[600], - warning: orange[400], - ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), - }, - action: { - hover: alpha(gray[200], 0.2), - selected: `${alpha(gray[200], 0.3)}`, - ...(mode === 'dark' && { - hover: alpha(gray[600], 0.2), - selected: alpha(gray[600], 0.3), - }), - }, - }, - typography: { - fontFamily: ['"Inter", "sans-serif"'].join(','), - h1: { - fontSize: defaultTheme.typography.pxToRem(48), - fontWeight: 600, - lineHeight: 1.2, - letterSpacing: -0.5, - }, - h2: { - fontSize: defaultTheme.typography.pxToRem(36), - fontWeight: 600, - lineHeight: 1.2, - }, - h3: { - fontSize: defaultTheme.typography.pxToRem(30), - lineHeight: 1.2, - }, - h4: { - fontSize: defaultTheme.typography.pxToRem(24), - fontWeight: 600, - lineHeight: 1.5, - }, - h5: { - fontSize: defaultTheme.typography.pxToRem(20), - fontWeight: 600, - }, - h6: { - fontSize: defaultTheme.typography.pxToRem(18), - fontWeight: 600, - }, - subtitle1: { - fontSize: defaultTheme.typography.pxToRem(18), - }, - subtitle2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 500, - }, - body1: { - fontSize: defaultTheme.typography.pxToRem(14), - }, - body2: { - fontSize: defaultTheme.typography.pxToRem(14), - fontWeight: 400, - }, - caption: { - fontSize: defaultTheme.typography.pxToRem(12), - fontWeight: 400, - }, - }, - shape: { - borderRadius: 8, - }, - shadows: [ - 'none', - mode === 'dark' - ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' - : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px', - // The shadows below are from the default theme - '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)', - '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)', - '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)', - '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)', - '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)', - '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)', - '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)', - '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)', - '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)', - '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)', - '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)', - '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)', - '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)', - '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)', - '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)', - '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)', - '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)', - '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)', - '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)', - '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)', - ], -}); + contrastText: brand[50], + ...(mode === 'dark' && { + contrastText: brand[50], + light: brand[300], + main: brand[400], + dark: brand[700], + }), + }, + info: { + light: brand[100], + main: brand[300], + dark: brand[600], + contrastText: gray[50], + ...(mode === 'dark' && { + contrastText: brand[300], + light: brand[500], + main: brand[700], + dark: brand[900], + }), + }, + warning: { + light: orange[300], + main: orange[400], + dark: orange[800], + ...(mode === 'dark' && { + light: orange[400], + main: orange[500], + dark: orange[700], + }), + }, + error: { + light: red[300], + main: red[400], + dark: red[800], + ...(mode === 'dark' && { + light: red[400], + main: red[500], + dark: red[700], + }), + }, + success: { + light: green[300], + main: green[400], + dark: green[800], + ...(mode === 'dark' && { + light: green[400], + main: green[500], + dark: green[700], + }), + }, + grey: { + ...gray, + }, + divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4), + background: { + default: 'hsl(0, 0%, 99%)', + paper: 'hsl(220, 35%, 97%)', + ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }), + }, + text: { + primary: gray[800], + secondary: gray[600], + warning: orange[400], + ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }), + }, + action: { + hover: alpha(gray[200], 0.2), + selected: `${alpha(gray[200], 0.3)}`, + ...(mode === 'dark' && { + hover: alpha(gray[600], 0.2), + selected: alpha(gray[600], 0.3), + }), + }, + }, + typography: { + fontFamily: ['"Inter", "sans-serif"'].join(','), + h1: { + fontSize: defaultTheme.typography.pxToRem(48), + fontWeight: 600, + lineHeight: 1.2, + letterSpacing: -0.5, + }, + h2: { + fontSize: defaultTheme.typography.pxToRem(36), + fontWeight: 600, + lineHeight: 1.2, + }, + h3: { + fontSize: defaultTheme.typography.pxToRem(30), + lineHeight: 1.2, + }, + h4: { + fontSize: defaultTheme.typography.pxToRem(24), + fontWeight: 600, + lineHeight: 1.5, + }, + h5: { + fontSize: defaultTheme.typography.pxToRem(20), + fontWeight: 600, + }, + h6: { + fontSize: defaultTheme.typography.pxToRem(18), + fontWeight: 600, + }, + subtitle1: { + fontSize: defaultTheme.typography.pxToRem(18), + }, + subtitle2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 500, + }, + body1: { + fontSize: defaultTheme.typography.pxToRem(14), + }, + body2: { + fontSize: defaultTheme.typography.pxToRem(14), + fontWeight: 400, + }, + caption: { + fontSize: defaultTheme.typography.pxToRem(12), + fontWeight: 400, + }, + }, + shape: { + borderRadius: 8, + }, + shadows: customShadows, + }; +}; From 54d1a162567c87d734feee1dcad3e024bad20a5a Mon Sep 17 00:00:00 2001 From: zanivan Date: Thu, 29 Aug 2024 15:54:01 -0300 Subject: [PATCH 4/5] Fix shadow styles --- .../getting-started/templates/blog/theme/themePrimitives.js | 4 ++-- .../getting-started/templates/blog/theme/themePrimitives.ts | 4 ++-- .../templates/checkout/theme/themePrimitives.js | 4 ++-- .../templates/checkout/theme/themePrimitives.ts | 4 ++-- .../templates/dashboard/theme/themePrimitives.js | 4 ++-- .../templates/dashboard/theme/themePrimitives.ts | 4 ++-- .../templates/marketing-page/theme/themePrimitives.js | 4 ++-- .../templates/marketing-page/theme/themePrimitives.ts | 4 ++-- .../getting-started/templates/shared-theme/themePrimitives.js | 4 ++-- .../getting-started/templates/shared-theme/themePrimitives.ts | 4 ++-- .../templates/sign-in-side/theme/themePrimitives.js | 4 ++-- .../templates/sign-in-side/theme/themePrimitives.ts | 4 ++-- .../templates/sign-in/theme/themePrimitives.js | 4 ++-- .../templates/sign-in/theme/themePrimitives.ts | 4 ++-- .../templates/sign-up/theme/themePrimitives.js | 4 ++-- .../templates/sign-up/theme/themePrimitives.ts | 4 ++-- 16 files changed, 32 insertions(+), 32 deletions(-) diff --git a/docs/data/material/getting-started/templates/blog/theme/themePrimitives.js b/docs/data/material/getting-started/templates/blog/theme/themePrimitives.js index ba88ae6a65a342..625400640eef43 100644 --- a/docs/data/material/getting-started/templates/blog/theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/blog/theme/themePrimitives.js @@ -72,8 +72,8 @@ export const red = { export const getDesignTokens = (mode) => { customShadows[1] = mode === 'dark' - ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' - : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'; return { palette: { diff --git a/docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts index e66d84ba3c11c5..41b517b5294fad 100644 --- a/docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/blog/theme/themePrimitives.ts @@ -94,8 +94,8 @@ export const red = { export const getDesignTokens = (mode: PaletteMode) => { customShadows[1] = mode === 'dark' - ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' - : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'; return { palette: { diff --git a/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.js b/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.js index ba88ae6a65a342..625400640eef43 100644 --- a/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.js @@ -72,8 +72,8 @@ export const red = { export const getDesignTokens = (mode) => { customShadows[1] = mode === 'dark' - ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' - : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'; return { palette: { diff --git a/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts index e66d84ba3c11c5..41b517b5294fad 100644 --- a/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/checkout/theme/themePrimitives.ts @@ -94,8 +94,8 @@ export const red = { export const getDesignTokens = (mode: PaletteMode) => { customShadows[1] = mode === 'dark' - ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' - : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'; return { palette: { diff --git a/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.js b/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.js index ba88ae6a65a342..625400640eef43 100644 --- a/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.js @@ -72,8 +72,8 @@ export const red = { export const getDesignTokens = (mode) => { customShadows[1] = mode === 'dark' - ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' - : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'; return { palette: { diff --git a/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts index e66d84ba3c11c5..41b517b5294fad 100644 --- a/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts @@ -94,8 +94,8 @@ export const red = { export const getDesignTokens = (mode: PaletteMode) => { customShadows[1] = mode === 'dark' - ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' - : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'; return { palette: { diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.js b/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.js index ba88ae6a65a342..625400640eef43 100644 --- a/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.js @@ -72,8 +72,8 @@ export const red = { export const getDesignTokens = (mode) => { customShadows[1] = mode === 'dark' - ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' - : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'; return { palette: { diff --git a/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts index e66d84ba3c11c5..41b517b5294fad 100644 --- a/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/marketing-page/theme/themePrimitives.ts @@ -94,8 +94,8 @@ export const red = { export const getDesignTokens = (mode: PaletteMode) => { customShadows[1] = mode === 'dark' - ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' - : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'; return { palette: { diff --git a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js index ba88ae6a65a342..625400640eef43 100644 --- a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js @@ -72,8 +72,8 @@ export const red = { export const getDesignTokens = (mode) => { customShadows[1] = mode === 'dark' - ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' - : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'; return { palette: { diff --git a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts index e66d84ba3c11c5..41b517b5294fad 100644 --- a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts @@ -94,8 +94,8 @@ export const red = { export const getDesignTokens = (mode: PaletteMode) => { customShadows[1] = mode === 'dark' - ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' - : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'; return { palette: { diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.js b/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.js index ba88ae6a65a342..625400640eef43 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.js @@ -72,8 +72,8 @@ export const red = { export const getDesignTokens = (mode) => { customShadows[1] = mode === 'dark' - ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' - : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'; return { palette: { diff --git a/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts index e66d84ba3c11c5..41b517b5294fad 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/sign-in-side/theme/themePrimitives.ts @@ -94,8 +94,8 @@ export const red = { export const getDesignTokens = (mode: PaletteMode) => { customShadows[1] = mode === 'dark' - ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' - : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'; return { palette: { diff --git a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.js b/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.js index ba88ae6a65a342..625400640eef43 100644 --- a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.js @@ -72,8 +72,8 @@ export const red = { export const getDesignTokens = (mode) => { customShadows[1] = mode === 'dark' - ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' - : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'; return { palette: { diff --git a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts index e66d84ba3c11c5..41b517b5294fad 100644 --- a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts @@ -94,8 +94,8 @@ export const red = { export const getDesignTokens = (mode: PaletteMode) => { customShadows[1] = mode === 'dark' - ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' - : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'; return { palette: { diff --git a/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.js b/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.js index ba88ae6a65a342..625400640eef43 100644 --- a/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.js +++ b/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.js @@ -72,8 +72,8 @@ export const red = { export const getDesignTokens = (mode) => { customShadows[1] = mode === 'dark' - ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' - : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'; return { palette: { diff --git a/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts index e66d84ba3c11c5..41b517b5294fad 100644 --- a/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts +++ b/docs/data/material/getting-started/templates/sign-up/theme/themePrimitives.ts @@ -94,8 +94,8 @@ export const red = { export const getDesignTokens = (mode: PaletteMode) => { customShadows[1] = mode === 'dark' - ? '0px 2px 1px -1px rgba(0,0,255,0.2),0px 1px 1px 0px rgba(0,0,255,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)' - : '0px 2px 1px -1px rgba(255,0,0,0.2),0px 1px 1px 0px rgba(255,0,0,0.14),0px 1px 3px 0px rgba(255,0,0,0.12)'; + ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px' + : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'; return { palette: { From 67a07b0ed3ebd3595b12315f86c56dfec144746f Mon Sep 17 00:00:00 2001 From: zanivan Date: Thu, 29 Aug 2024 17:39:20 -0300 Subject: [PATCH 5/5] Remove shadow from TemplateFrame --- .../material/getting-started/templates/blog/TemplateFrame.js | 2 +- .../material/getting-started/templates/blog/TemplateFrame.tsx | 2 +- .../getting-started/templates/checkout/TemplateFrame.js | 2 +- .../getting-started/templates/checkout/TemplateFrame.tsx | 2 +- .../getting-started/templates/dashboard/TemplateFrame.js | 2 +- .../getting-started/templates/dashboard/TemplateFrame.tsx | 2 +- .../getting-started/templates/marketing-page/TemplateFrame.js | 2 +- .../getting-started/templates/marketing-page/TemplateFrame.tsx | 2 +- .../getting-started/templates/sign-in-side/TemplateFrame.js | 2 +- .../getting-started/templates/sign-in-side/TemplateFrame.tsx | 2 +- .../material/getting-started/templates/sign-in/TemplateFrame.js | 2 +- .../getting-started/templates/sign-in/TemplateFrame.tsx | 2 +- .../material/getting-started/templates/sign-up/TemplateFrame.js | 2 +- .../getting-started/templates/sign-up/TemplateFrame.tsx | 2 +- 14 files changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/data/material/getting-started/templates/blog/TemplateFrame.js b/docs/data/material/getting-started/templates/blog/TemplateFrame.js index 2211b1e8cb2927..36dffad11fd03c 100644 --- a/docs/data/material/getting-started/templates/blog/TemplateFrame.js +++ b/docs/data/material/getting-started/templates/blog/TemplateFrame.js @@ -22,7 +22,7 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({ borderBottom: '1px solid', borderColor: theme.palette.divider, backgroundColor: theme.palette.background.paper, - boxShadow: theme.shadows[1], + boxShadow: 'none', backgroundImage: 'none', zIndex: theme.zIndex.drawer + 1, flex: '0 0 auto', diff --git a/docs/data/material/getting-started/templates/blog/TemplateFrame.tsx b/docs/data/material/getting-started/templates/blog/TemplateFrame.tsx index b26e93a81ab6f8..f1ff61fc03d27f 100644 --- a/docs/data/material/getting-started/templates/blog/TemplateFrame.tsx +++ b/docs/data/material/getting-started/templates/blog/TemplateFrame.tsx @@ -26,7 +26,7 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({ borderBottom: '1px solid', borderColor: theme.palette.divider, backgroundColor: theme.palette.background.paper, - boxShadow: theme.shadows[1], + boxShadow: 'none', backgroundImage: 'none', zIndex: theme.zIndex.drawer + 1, flex: '0 0 auto', diff --git a/docs/data/material/getting-started/templates/checkout/TemplateFrame.js b/docs/data/material/getting-started/templates/checkout/TemplateFrame.js index c27fc4dbeaed77..6f1b11ec4dff4a 100644 --- a/docs/data/material/getting-started/templates/checkout/TemplateFrame.js +++ b/docs/data/material/getting-started/templates/checkout/TemplateFrame.js @@ -22,7 +22,7 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({ borderBottom: '1px solid', borderColor: theme.palette.divider, backgroundColor: theme.palette.background.paper, - boxShadow: theme.shadows[1], + boxShadow: 'none', backgroundImage: 'none', zIndex: theme.zIndex.drawer + 1, flex: '0 0 auto', diff --git a/docs/data/material/getting-started/templates/checkout/TemplateFrame.tsx b/docs/data/material/getting-started/templates/checkout/TemplateFrame.tsx index 5965ba79a2466a..82a7e99505c3f0 100644 --- a/docs/data/material/getting-started/templates/checkout/TemplateFrame.tsx +++ b/docs/data/material/getting-started/templates/checkout/TemplateFrame.tsx @@ -26,7 +26,7 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({ borderBottom: '1px solid', borderColor: theme.palette.divider, backgroundColor: theme.palette.background.paper, - boxShadow: theme.shadows[1], + boxShadow: 'none', backgroundImage: 'none', zIndex: theme.zIndex.drawer + 1, flex: '0 0 auto', diff --git a/docs/data/material/getting-started/templates/dashboard/TemplateFrame.js b/docs/data/material/getting-started/templates/dashboard/TemplateFrame.js index 9e6b8f4ec726df..d05d218cf84528 100644 --- a/docs/data/material/getting-started/templates/dashboard/TemplateFrame.js +++ b/docs/data/material/getting-started/templates/dashboard/TemplateFrame.js @@ -22,7 +22,7 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({ borderBottom: '1px solid', borderColor: theme.palette.divider, backgroundColor: theme.palette.background.paper, - boxShadow: theme.shadows[1], + boxShadow: 'none', backgroundImage: 'none', zIndex: theme.zIndex.drawer + 1, flex: '0 0 auto', diff --git a/docs/data/material/getting-started/templates/dashboard/TemplateFrame.tsx b/docs/data/material/getting-started/templates/dashboard/TemplateFrame.tsx index c227e244101a19..98dbfa60d964ea 100644 --- a/docs/data/material/getting-started/templates/dashboard/TemplateFrame.tsx +++ b/docs/data/material/getting-started/templates/dashboard/TemplateFrame.tsx @@ -26,7 +26,7 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({ borderBottom: '1px solid', borderColor: theme.palette.divider, backgroundColor: theme.palette.background.paper, - boxShadow: theme.shadows[1], + boxShadow: 'none', backgroundImage: 'none', zIndex: theme.zIndex.drawer + 1, flex: '0 0 auto', diff --git a/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.js b/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.js index 59bed4973e6959..445336568e8c0a 100644 --- a/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.js +++ b/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.js @@ -22,7 +22,7 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({ borderBottom: '1px solid', borderColor: theme.palette.divider, backgroundColor: theme.palette.background.paper, - boxShadow: theme.shadows[1], + boxShadow: 'none', backgroundImage: 'none', zIndex: theme.zIndex.drawer + 1, flex: '0 0 auto', diff --git a/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.tsx b/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.tsx index b346465240785f..580ce16c15fd9e 100644 --- a/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.tsx +++ b/docs/data/material/getting-started/templates/marketing-page/TemplateFrame.tsx @@ -26,7 +26,7 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({ borderBottom: '1px solid', borderColor: theme.palette.divider, backgroundColor: theme.palette.background.paper, - boxShadow: theme.shadows[1], + boxShadow: 'none', backgroundImage: 'none', zIndex: theme.zIndex.drawer + 1, flex: '0 0 auto', diff --git a/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.js b/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.js index 27729f31893833..8a352720511cfd 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.js +++ b/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.js @@ -22,7 +22,7 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({ borderBottom: '1px solid', borderColor: theme.palette.divider, backgroundColor: theme.palette.background.paper, - boxShadow: theme.shadows[1], + boxShadow: 'none', backgroundImage: 'none', zIndex: theme.zIndex.drawer + 1, flex: '0 0 auto', diff --git a/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.tsx b/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.tsx index d30c6f181bcd0c..248480242da1f3 100644 --- a/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.tsx +++ b/docs/data/material/getting-started/templates/sign-in-side/TemplateFrame.tsx @@ -26,7 +26,7 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({ borderBottom: '1px solid', borderColor: theme.palette.divider, backgroundColor: theme.palette.background.paper, - boxShadow: theme.shadows[1], + boxShadow: 'none', backgroundImage: 'none', zIndex: theme.zIndex.drawer + 1, flex: '0 0 auto', diff --git a/docs/data/material/getting-started/templates/sign-in/TemplateFrame.js b/docs/data/material/getting-started/templates/sign-in/TemplateFrame.js index 3ce3a542fd4239..2b4f157597c4ec 100644 --- a/docs/data/material/getting-started/templates/sign-in/TemplateFrame.js +++ b/docs/data/material/getting-started/templates/sign-in/TemplateFrame.js @@ -22,7 +22,7 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({ borderBottom: '1px solid', borderColor: theme.palette.divider, backgroundColor: theme.palette.background.paper, - boxShadow: theme.shadows[1], + boxShadow: 'none', backgroundImage: 'none', zIndex: theme.zIndex.drawer + 1, flex: '0 0 auto', diff --git a/docs/data/material/getting-started/templates/sign-in/TemplateFrame.tsx b/docs/data/material/getting-started/templates/sign-in/TemplateFrame.tsx index ca3274e04ce78c..3d83d3350a64c8 100644 --- a/docs/data/material/getting-started/templates/sign-in/TemplateFrame.tsx +++ b/docs/data/material/getting-started/templates/sign-in/TemplateFrame.tsx @@ -26,7 +26,7 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({ borderBottom: '1px solid', borderColor: theme.palette.divider, backgroundColor: theme.palette.background.paper, - boxShadow: theme.shadows[1], + boxShadow: 'none', backgroundImage: 'none', zIndex: theme.zIndex.drawer + 1, flex: '0 0 auto', diff --git a/docs/data/material/getting-started/templates/sign-up/TemplateFrame.js b/docs/data/material/getting-started/templates/sign-up/TemplateFrame.js index 2fe5e79f2390f5..900462b107d3ee 100644 --- a/docs/data/material/getting-started/templates/sign-up/TemplateFrame.js +++ b/docs/data/material/getting-started/templates/sign-up/TemplateFrame.js @@ -22,7 +22,7 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({ borderBottom: '1px solid', borderColor: theme.palette.divider, backgroundColor: theme.palette.background.paper, - boxShadow: theme.shadows[1], + boxShadow: 'none', backgroundImage: 'none', zIndex: theme.zIndex.drawer + 1, flex: '0 0 auto', diff --git a/docs/data/material/getting-started/templates/sign-up/TemplateFrame.tsx b/docs/data/material/getting-started/templates/sign-up/TemplateFrame.tsx index 4d90c6aa90f2fc..15f6cf5962ce06 100644 --- a/docs/data/material/getting-started/templates/sign-up/TemplateFrame.tsx +++ b/docs/data/material/getting-started/templates/sign-up/TemplateFrame.tsx @@ -26,7 +26,7 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({ borderBottom: '1px solid', borderColor: theme.palette.divider, backgroundColor: theme.palette.background.paper, - boxShadow: theme.shadows[1], + boxShadow: 'none', backgroundImage: 'none', zIndex: theme.zIndex.drawer + 1, flex: '0 0 auto',