From 662a3d507f71f774aa2c306fb084141db51a5ba7 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Tue, 18 Jun 2024 17:45:23 -0300 Subject: [PATCH 1/5] [website] Add new sponsors to the homepage (#42632) --- README.md | 1 + docs/data/material/discover-more/backers/backers.md | 1 + docs/src/components/home/GoldSponsors.tsx | 7 +++++++ 3 files changed, 9 insertions(+) diff --git a/README.md b/README.md index 9f373c703d8d22..b11d5c05d3937f 100644 --- a/README.md +++ b/README.md @@ -77,6 +77,7 @@ via [Open Collective](https://opencollective.com/mui-org) or via [Patreon](http megafamous.com dialmycalls.com goread.io + Viralyft

Gold sponsors are those who have pledged \$500/month or more to MUI. diff --git a/docs/data/material/discover-more/backers/backers.md b/docs/data/material/discover-more/backers/backers.md index 3ddd593cf5ec46..9a9cd068191a3d 100644 --- a/docs/data/material/discover-more/backers/backers.md +++ b/docs/data/material/discover-more/backers/backers.md @@ -28,6 +28,7 @@ via [Open Collective](https://opencollective.com/mui-org) or via [the for-profi megafamous.com dialmycalls.com goread.io + Viralyft

Gold sponsors are those who've pledged \$500/month or more to the MUI organization. [Tier benefits](#gold). diff --git a/docs/src/components/home/GoldSponsors.tsx b/docs/src/components/home/GoldSponsors.tsx index c15cb20a07d179..dc17665cef1cad 100644 --- a/docs/src/components/home/GoldSponsors.tsx +++ b/docs/src/components/home/GoldSponsors.tsx @@ -63,6 +63,13 @@ const GOLDs = [ description: 'Instagram followers, likes, views, and comments.', href: 'https://goread.io/?utm_source=MUI&utm_medium=referral&utm_content=homepage', }, + { + src: 'https://images.opencollective.com/viralyft/b853d22/avatar/40.png', + srcSet: 'https://images.opencollective.com/viralyft/b853d22/avatar/120.png 3x', + name: 'Viralyft', + description: 'Boost social media following & get real results.', + href: 'https://viralyft.com/?utm_source=MUI&utm_medium=referral&utm_content=homepage', + }, ]; export default function GoldSponsors() { From 70b95a5c3b18fbb2619ab749a9dfd5d35ab577f8 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 19 Jun 2024 02:18:59 +0200 Subject: [PATCH 2/5] Revert "[website] Add new sponsors to the homepage (#42632)" This reverts commit 662a3d507f71f774aa2c306fb084141db51a5ba7. --- README.md | 1 - docs/data/material/discover-more/backers/backers.md | 1 - docs/src/components/home/GoldSponsors.tsx | 7 ------- 3 files changed, 9 deletions(-) diff --git a/README.md b/README.md index b11d5c05d3937f..9f373c703d8d22 100644 --- a/README.md +++ b/README.md @@ -77,7 +77,6 @@ via [Open Collective](https://opencollective.com/mui-org) or via [Patreon](http megafamous.com dialmycalls.com goread.io - Viralyft

Gold sponsors are those who have pledged \$500/month or more to MUI. diff --git a/docs/data/material/discover-more/backers/backers.md b/docs/data/material/discover-more/backers/backers.md index 9a9cd068191a3d..3ddd593cf5ec46 100644 --- a/docs/data/material/discover-more/backers/backers.md +++ b/docs/data/material/discover-more/backers/backers.md @@ -28,7 +28,6 @@ via [Open Collective](https://opencollective.com/mui-org) or via [the for-profi megafamous.com dialmycalls.com goread.io - Viralyft

Gold sponsors are those who've pledged \$500/month or more to the MUI organization. [Tier benefits](#gold). diff --git a/docs/src/components/home/GoldSponsors.tsx b/docs/src/components/home/GoldSponsors.tsx index dc17665cef1cad..c15cb20a07d179 100644 --- a/docs/src/components/home/GoldSponsors.tsx +++ b/docs/src/components/home/GoldSponsors.tsx @@ -63,13 +63,6 @@ const GOLDs = [ description: 'Instagram followers, likes, views, and comments.', href: 'https://goread.io/?utm_source=MUI&utm_medium=referral&utm_content=homepage', }, - { - src: 'https://images.opencollective.com/viralyft/b853d22/avatar/40.png', - srcSet: 'https://images.opencollective.com/viralyft/b853d22/avatar/120.png 3x', - name: 'Viralyft', - description: 'Boost social media following & get real results.', - href: 'https://viralyft.com/?utm_source=MUI&utm_medium=referral&utm_content=homepage', - }, ]; export default function GoldSponsors() { From c96d05e25c66a7948976882e4d72b52bdcf108f0 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Wed, 19 Jun 2024 10:24:38 +0700 Subject: [PATCH 3/5] [docs-infra] Fix wrong migration (#42675) --- docs/src/modules/components/DemoToolbarRoot.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/docs/src/modules/components/DemoToolbarRoot.ts b/docs/src/modules/components/DemoToolbarRoot.ts index f40d3fc5ad3ece..d6be2527a0ac39 100644 --- a/docs/src/modules/components/DemoToolbarRoot.ts +++ b/docs/src/modules/components/DemoToolbarRoot.ts @@ -32,14 +32,18 @@ const DemoToolbarRoot = styled('div', { { props: ({ demoOptions }) => demoOptions.bg === 'inline', style: { - marginTop: theme.spacing(1), - borderTopWidth: 1, + [theme.breakpoints.up('sm')]: { + marginTop: theme.spacing(1), + borderTopWidth: 1, + }, }, }, { props: ({ openDemoSource }) => openDemoSource, style: { - borderRadius: 0, + [theme.breakpoints.up('sm')]: { + borderRadius: 0, + }, }, }, ], From 07507147e03b9a66fd3cbfd4f0f8d2c05925be5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= Date: Wed, 19 Jun 2024 14:40:39 +0200 Subject: [PATCH 4/5] [material-ui][Tab] Fix failing test (#42686) --- .../src/deprecations/tab-classes/test-cases/actual.css | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mui-codemod/src/deprecations/tab-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/tab-classes/test-cases/actual.css index a4c3225a1c88fc..3523390136c960 100644 --- a/packages/mui-codemod/src/deprecations/tab-classes/test-cases/actual.css +++ b/packages/mui-codemod/src/deprecations/tab-classes/test-cases/actual.css @@ -1,4 +1,3 @@ .MuiTab-root .MuiTab-iconWrapper { color: red; } - From da4546dc9a606800f898a24553d516997ca57be2 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Wed, 19 Jun 2024 15:35:16 -0300 Subject: [PATCH 5/5] [docs-infra] Add stray design polish (#42646) --- docs/src/components/about/OurValues.tsx | 6 +- docs/src/components/careers/PerksBenefits.tsx | 57 +++++++++++-------- docs/src/components/footer/EmailSubscribe.tsx | 18 +++--- docs/src/components/home/DiamondSponsors.tsx | 7 +-- docs/src/components/home/GoldSponsors.tsx | 4 +- docs/src/components/home/SponsorCard.tsx | 20 ++----- .../src/modules/components/DiamondSponsors.js | 51 +++++++++-------- .../mui-docs/src/branding/brandingTheme.ts | 39 +++++++------ 8 files changed, 100 insertions(+), 102 deletions(-) diff --git a/docs/src/components/about/OurValues.tsx b/docs/src/components/about/OurValues.tsx index a503455268348f..e56d7d74cccb6c 100644 --- a/docs/src/components/about/OurValues.tsx +++ b/docs/src/components/about/OurValues.tsx @@ -74,7 +74,7 @@ export default function OurValues() { ({ - p: 4, + p: 2.5, height: '100%', display: 'flex', flexDirection: 'column', @@ -110,14 +110,12 @@ export default function OurValues() { variant="body2" sx={[ { - fontWeight: 'bold', + fontWeight: 'semiBold', }, (theme) => ({ mb: 0.5, color: (theme.vars || theme).palette.text.primary, '&::first-letter': { - mr: 0.1, - fontSize: theme.typography.pxToRem(16), color: (theme.vars || theme).palette.primary.main, }, ...theme.applyDarkStyles({ diff --git a/docs/src/components/careers/PerksBenefits.tsx b/docs/src/components/careers/PerksBenefits.tsx index 71c9aca45a4cd2..cfae97c1469373 100644 --- a/docs/src/components/careers/PerksBenefits.tsx +++ b/docs/src/components/careers/PerksBenefits.tsx @@ -19,16 +19,37 @@ const companyInfo = [ }, { title: 'Handbook', - description: 'Learn everything about how MUI as a company is run.', + description: 'Learn everything about how MUI as a company.', routeUrl: ROUTES.handbook, }, { title: 'Blog', - description: 'Check behind-the-scenes and news about the company.', + description: 'Learn about our products and team.', routeUrl: ROUTES.blog, }, ]; +interface CardContentBlockProps { + description: string; + title: string; +} + +function CardContentBlock({ title, description }: CardContentBlockProps) { + return ( + + + {title} + + + {description} + + + Learn more + + + ); +} + function RemoteAwardCard() { return ( -
- - Remote Excellence Awards - - - Winners in the first-ever Remote Excellence Awards, in the Small & Mighty category! 🎉 - - - Learn more - -
+ + + ); } @@ -151,16 +169,7 @@ export default function PerksBenefits() { variant="outlined" sx={{ p: 2, width: '100%', flexGrow: 1, display: 'flex', flexDirection: 'column' }} > - - {title} - - - {description} - - - Learn more{' '} - - + ))} diff --git a/docs/src/components/footer/EmailSubscribe.tsx b/docs/src/components/footer/EmailSubscribe.tsx index 66c1da6ac891af..c9c18b18e2fafa 100644 --- a/docs/src/components/footer/EmailSubscribe.tsx +++ b/docs/src/components/footer/EmailSubscribe.tsx @@ -87,12 +87,12 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps }) { }) { minWidth: 220, borderRadius: '8px', border: '1px solid', - borderColor: 'grey.200', + borderColor: 'grey.300', bgcolor: '#FFF', boxShadow: `inset 0 1px 2px ${ (theme.vars || theme).palette.grey[50] }, 0 2px .5px ${alpha(theme.palette.grey[100], 0.5)}`, '&:hover': { - borderColor: 'grey.300', + borderColor: 'grey.400', boxShadow: `inset 0 1px 2px ${(theme.vars || theme).palette.grey[100]}`, }, [`&.${inputBaseClasses.focused}`]: { - boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primary[200]}`, + boxShadow: `0 0 0 3px ${alpha(theme.palette.primary[500], 0.5)}`, borderColor: 'primary.500', }, [`& .${inputBaseClasses.input}`]: { borderRadius: theme.shape.borderRadius, - py: 1, - px: 1.5, + px: 1, }, }), (theme) => @@ -141,13 +140,12 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps }) { boxShadow: `inset 0 1px 2px ${(theme.vars || theme).palette.common.black}`, }, [`&.${inputBaseClasses.focused}`]: { - boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primary[800]}`, borderColor: 'primary.400', }, }), ]} /> - diff --git a/docs/src/components/home/DiamondSponsors.tsx b/docs/src/components/home/DiamondSponsors.tsx index 1f021988a58bda..244567b64636c6 100644 --- a/docs/src/components/home/DiamondSponsors.tsx +++ b/docs/src/components/home/DiamondSponsors.tsx @@ -18,8 +18,7 @@ const DIAMONDs = [ { src: '/static/sponsors/doit-square.svg', name: 'Doit International', - description: - 'Delivers technology and cloud expertise to buy, optimize and manage public cloud.', + description: 'Technology and cloud expertise to buy, optimize and manage public cloud.', href: 'https://www.doit.com/?utm_source=MUI&utm_medium=referral&utm_content=homepage', }, { @@ -45,7 +44,7 @@ export default function DiamondSponsors() { variant="h6" sx={[ { - fontWeight: 'bold', + fontWeight: 'semiBold', }, (theme) => ({ mt: 4, @@ -97,7 +96,7 @@ export default function DiamondSponsors() {
- + Become our sponsor! diff --git a/docs/src/components/home/GoldSponsors.tsx b/docs/src/components/home/GoldSponsors.tsx index c15cb20a07d179..fa78d71f64289c 100644 --- a/docs/src/components/home/GoldSponsors.tsx +++ b/docs/src/components/home/GoldSponsors.tsx @@ -78,7 +78,7 @@ export default function GoldSponsors() { variant="h6" sx={[ { - fontWeight: 'bold', + fontWeight: 'semiBold', }, (theme) => ({ mt: 4, @@ -129,7 +129,7 @@ export default function GoldSponsors() {
- + Become a sponsor diff --git a/docs/src/components/home/SponsorCard.tsx b/docs/src/components/home/SponsorCard.tsx index fd31a9b4c3442a..291ad835d91eb2 100644 --- a/docs/src/components/home/SponsorCard.tsx +++ b/docs/src/components/home/SponsorCard.tsx @@ -1,9 +1,7 @@ import * as React from 'react'; import Avatar from '@mui/material/Avatar'; -import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import Paper from '@mui/material/Paper'; -import LaunchRounded from '@mui/icons-material/LaunchRounded'; import { Link } from '@mui/docs/Link'; export default function SponsorCard(props: { @@ -39,15 +37,8 @@ export default function SponsorCard(props: { sx={{ p: 2, display: 'flex', + gap: 2, height: '100%', - '& svg': { - transition: '0.2s', - }, - '&:hover': { - '& svg': { - transform: 'translateY(-2px)', - }, - }, }} > - - - {item.name}{' '} - +
+ + {item.name} {item.description} - +
); } diff --git a/docs/src/modules/components/DiamondSponsors.js b/docs/src/modules/components/DiamondSponsors.js index 5f1998b88be5d9..817a4526e9003a 100644 --- a/docs/src/modules/components/DiamondSponsors.js +++ b/docs/src/modules/components/DiamondSponsors.js @@ -2,6 +2,7 @@ import * as React from 'react'; import { styled, alpha } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; +import Divider from '@mui/material/Divider'; import Typography from '@mui/material/Typography'; import { Link } from '@mui/docs/Link'; import { useTranslate } from 'docs/src/modules/utils/i18n'; @@ -13,26 +14,28 @@ const NativeLink = styled('a')(({ theme }) => ({ display: 'flex', alignItems: 'center', justifyContent: 'center', - borderRadius: 12, - border: '1px solid', + borderLeft: '1px solid', + borderRight: '1px solid', + borderBottom: 0, borderColor: (theme.vars || theme).palette.divider, - transition: theme.transitions.create(['color', 'border-color']), - boxShadow: `${alpha(theme.palette.grey[100], 0.3)} 0 -2px 0 inset`, + transition: theme.transitions.create(['background-color']), + '&:first-of-type': { + borderTop: `1px solid ${(theme.vars || theme).palette.divider}`, + borderRadius: '12px 12px 0 0', + }, '&:hover': { backgroundColor: (theme.vars || theme).palette.grey[50], }, '&:focus-visible': { outline: `3px solid ${alpha((theme.vars || theme).palette.primary[500], 0.5)}`, - outlineOffset: '2px', + outlineOffset: '-3px', }, '& img': { display: 'inline-block', }, ...theme.applyDarkStyles({ - boxShadow: `${alpha(theme.palette.primaryDark[600], 0.1)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset`, '&:hover': { - backgroundColor: alpha(theme.palette.primary[800], 0.2), - borderColor: (theme.vars || theme).palette.primary[900], + backgroundColor: alpha(theme.palette.primary[900], 0.1), }, }), })); @@ -41,7 +44,7 @@ export default function DiamondSponsors() { const t = useTranslate(); return ( - + + + ({ - p: 1.5, + height: 45, width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', - borderRadius: 1, border: '1px dashed', - transition: theme.transitions.create(['color', 'border-color', 'background-color']), - backgroundColor: alpha(theme.palette.grey[50], 0.5), borderColor: (theme.vars || theme).palette.grey[300], + borderRadius: '0 0 12px 12px', + backgroundColor: alpha(theme.palette.primary[50], 0.4), + transition: theme.transitions.create(['color', 'background-color']), '&:hover': { - backgroundColor: alpha(theme.palette.primary[100], 0.5), - borderColor: (theme.vars || theme).palette.primary[300], + backgroundColor: (theme.vars || theme).palette.primary[50], + borderColor: (theme.vars || theme).palette.primary[200], + }, + '&:focus-visible': { + outlineOffset: '-3px', }, ...theme.applyDarkStyles({ - backgroundColor: alpha(theme.palette.primaryDark[700], 0.2), - borderColor: (theme.vars || theme).palette.primaryDark[700], + backgroundColor: alpha(theme.palette.primaryDark[700], 0.3), + borderColor: alpha(theme.palette.primaryDark[600], 0.5), '&:hover': { - backgroundColor: alpha(theme.palette.primary[700], 0.2), - borderColor: (theme.vars || theme).palette.primary[800], + backgroundColor: alpha(theme.palette.primary[700], 0.1), + borderColor: alpha(theme.palette.primary[600], 0.4), }, }), })} > - + {t('becomeADiamondSponsor')} - {/* - {t('diamondSponsorVacancies')} - */} ); diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts index e759d2f68da2a6..6345977d7c31c8 100644 --- a/packages/mui-docs/src/branding/brandingTheme.ts +++ b/packages/mui-docs/src/branding/brandingTheme.ts @@ -226,7 +226,7 @@ export const getDesignTokens = (mode: 'light' | 'dark') => tertiary: grey[700], }), ...(mode === 'dark' && { - primary: '#fff', + primary: 'hsl(0, 0%, 100%)', secondary: grey[400], tertiary: grey[500], }), @@ -364,10 +364,10 @@ export const getDesignTokens = (mode: 'light' | 'dark') => * ...theme.vars ? { * color: theme.vars.palette.primary.main, * [theme.getColorScheme('dark')]: { - * color: '#fff', + * color: 'hsl(0, 0%, 100%)', * } * } : { - * color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary.main, + * color: theme.palette.mode === 'dark' ? 'hsl(0, 0%, 100%)' : theme.palette.primary.main, * } * } * @@ -375,7 +375,7 @@ export const getDesignTokens = (mode: 'light' | 'dark') => * { * color: (theme.vars || theme).palette.primary.main, * ...theme.applyDarkStyles({ - * color: '#fff', + * color: 'hsl(0, 0%, 100%)', * }), * } * @@ -568,7 +568,7 @@ export function getThemedComponents(): ThemeOptions { color: (theme.vars || theme).palette.text.primary, backgroundColor: alpha(theme.palette.primaryDark[50], 0.1), borderColor: (theme.vars || theme).palette.primaryDark[100], - boxShadow: `#FFF 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`, + boxShadow: `hsl(0, 0%, 100%) 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`, '&:hover': { backgroundColor: (theme.vars || theme).palette.grey[50], }, @@ -606,7 +606,7 @@ export function getThemedComponents(): ThemeOptions { }), ...(ownerState.variant === 'contained' && ownerState.color === 'primary' && { - color: '#fff', + color: 'hsl(0, 0%, 100%)', textShadow: `0 1px 1px ${alpha(theme.palette.common.black, 0.6)}`, backgroundColor: (theme.vars || theme).palette.primary[500], backgroundImage: `linear-gradient(180deg, ${alpha(theme.palette.primary[500], 0.6)} 0%, ${theme.palette.primary[600]} 100%)`, @@ -809,7 +809,7 @@ export function getThemedComponents(): ThemeOptions { color: (theme.vars || theme).palette.primary.main, backgroundColor: alpha(theme.palette.primaryDark[50], 0.1), border: `1px solid ${(theme.vars || theme).palette.primaryDark[100]}`, - boxShadow: `#FFF 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`, + boxShadow: `hsl(0, 0%, 100%) 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`, '&:hover': { borderColor: (theme.vars || theme).palette.grey[300], background: (theme.vars || theme).palette.grey[50], @@ -834,7 +834,7 @@ export function getThemedComponents(): ThemeOptions { color: (theme.vars || theme).palette.text.secondary, backgroundColor: alpha(theme.palette.primaryDark[50], 0.1), border: `1px solid ${(theme.vars || theme).palette.primaryDark[100]}`, - boxShadow: `#FFF 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`, + boxShadow: `hsl(0, 0%, 100%) 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`, '&:hover': { color: (theme.vars || theme).palette.text.primary, borderColor: (theme.vars || theme).palette.grey[300], @@ -1031,7 +1031,7 @@ export function getThemedComponents(): ThemeOptions { backgroundColor: (theme.vars || theme).palette.primary[100], }, ...theme.applyDarkStyles({ - color: '#fff', + color: 'hsl(0, 0%, 100%)', backgroundColor: alpha(theme.palette.primaryDark[500], 0.8), '&:hover': { backgroundColor: (theme.vars || theme).palette.primaryDark[600], @@ -1083,7 +1083,7 @@ export function getThemedComponents(): ThemeOptions { color: (theme.vars || theme).palette.warning[900], backgroundColor: (theme.vars || theme).palette.warning[100], ...theme.applyDarkStyles({ - color: '#fff', + color: 'hsl(0, 0%, 100%)', backgroundColor: (theme.vars || theme).palette.warning[900], }), }), @@ -1091,7 +1091,7 @@ export function getThemedComponents(): ThemeOptions { color: (theme.vars || theme).palette.success[900], backgroundColor: (theme.vars || theme).palette.success[100], ...theme.applyDarkStyles({ - color: '#fff', + color: 'hsl(0, 0%, 100%)', backgroundColor: (theme.vars || theme).palette.success[900], }), }), @@ -1136,7 +1136,7 @@ export function getThemedComponents(): ThemeOptions { backgroundColor: alpha(theme.palette.primaryDark[700], 0.4), }, '&.Mui-selected': { - color: '#fff', + color: 'hsl(0, 0%, 100%)', borderColor: `${(theme.vars || theme).palette.primary[700]} !important`, backgroundColor: (theme.vars || theme).palette.primaryDark[700], '&:hover': { @@ -1167,7 +1167,7 @@ export function getThemedComponents(): ThemeOptions { root: ({ theme, ownerState }) => [ { backgroundImage: 'none', - backgroundColor: '#fff', + backgroundColor: 'hsl(0, 0%, 100%)', '&[href]': { textDecorationLine: 'none', }, @@ -1179,7 +1179,7 @@ export function getThemedComponents(): ThemeOptions { borderColor: (theme.vars || theme).palette.grey[100], '&[href]': { textDecorationLine: 'none', - boxShadow: `hsl(200, 0%, 100%) 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.3)} 0 -2px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`, + boxShadow: `hsl(0, 0%, 100%) 0 2px 0 inset, ${alpha(theme.palette.primary[100], 0.3)} 0 -2px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`, '&:hover': { borderColor: (theme.vars || theme).palette.primary[200], boxShadow: `0px 2px 8px ${(theme.vars || theme).palette.primary[100]}`, @@ -1203,8 +1203,7 @@ export function getThemedComponents(): ThemeOptions { borderColor: (theme.vars || theme).palette.primaryDark[700], backgroundColor: alpha(theme.palette.primaryDark[800], 0.6), '&[href]': { - textDecorationLine: 'none', - boxShadow: `${alpha(theme.palette.primaryDark[700], 0.4)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`, + boxShadow: `${alpha(theme.palette.primaryDark[600], 0.1)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`, '&:hover': { borderColor: alpha(theme.palette.primary[600], 0.5), boxShadow: `0px 2px 8px ${alpha(theme.palette.primary[900], 0.6)}`, @@ -1238,7 +1237,7 @@ export function getThemedComponents(): ThemeOptions { MuiToggleButtonGroup: { styleOverrides: { root: ({ theme }) => ({ - backgroundColor: '#fff', + backgroundColor: 'hsl(0, 0%, 100%)', ...theme.applyDarkStyles({ backgroundColor: (theme.vars || theme).palette.primaryDark[900], }), @@ -1307,7 +1306,7 @@ export function getThemedComponents(): ThemeOptions { '& .MuiSwitch-switchBase': { '&.Mui-checked': { transform: 'translateX(11px)', - color: '#fff', + color: 'hsl(0, 0%, 100%)', }, }, }, @@ -1315,7 +1314,7 @@ export function getThemedComponents(): ThemeOptions { height: 20, width: 20, padding: 0, - color: '#fff', + color: 'hsl(0, 0%, 100%)', '&.Mui-checked + .MuiSwitch-track': { opacity: 1, }, @@ -1339,7 +1338,7 @@ export function getThemedComponents(): ThemeOptions { styleOverrides: { root: ({ theme }) => ({ '& .MuiSnackbarContent-root': { - backgroundColor: '#FFF', + backgroundColor: 'hsl(0, 0%, 100%)', color: (theme.vars || theme).palette.text.primary, fontWeight: theme.typography.fontWeightMedium, border: `1px solid ${(theme.vars || theme).palette.divider}`,