From e804bda617a68321ea72a26b94600af2c680d9c4 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 3 Apr 2024 13:57:53 -0300
Subject: [PATCH] [docs-infra] Update branding theme colors to the HSL notation
(#41738)
---
.../banner/TableOfContentsBanner.tsx | 3 +-
.../components/markdown/MarkdownElement.tsx | 2 +-
docs/src/modules/components/AppFrame.js | 5 +-
docs/src/modules/components/AppSearch.js | 9 +-
docs/src/modules/components/Demo.js | 1 +
docs/src/modules/components/DemoEditor.tsx | 2 +-
.../src/modules/components/DiamondSponsors.js | 6 +-
docs/src/modules/components/EditPage.js | 1 +
.../src/modules/components/MarkdownElement.js | 28 ++--
docs/src/modules/components/ThemeViewer.tsx | 2 +-
packages/mui-docs/src/InfoCard/InfoCard.tsx | 2 +-
.../mui-docs/src/branding/brandingTheme.ts | 149 +++++++++---------
12 files changed, 102 insertions(+), 108 deletions(-)
diff --git a/docs/src/components/banner/TableOfContentsBanner.tsx b/docs/src/components/banner/TableOfContentsBanner.tsx
index 66f492e4b3ca8b..79d27a93df033e 100644
--- a/docs/src/components/banner/TableOfContentsBanner.tsx
+++ b/docs/src/components/banner/TableOfContentsBanner.tsx
@@ -34,10 +34,9 @@ export default function TableOfContentsBanner() {
(theme) =>
theme.applyDarkStyles({
backgroundColor: alpha(theme.palette.primary[900], 0.2),
- borderColor: (theme.vars || theme).palette.divider,
'&:hover, &:focus-visible': {
backgroundColor: alpha(theme.palette.primary[900], 0.4),
- borderColor: (theme.vars || theme).palette.primaryDark[500],
+ borderColor: (theme.vars || theme).palette.primary[900],
},
}),
]}
diff --git a/docs/src/components/markdown/MarkdownElement.tsx b/docs/src/components/markdown/MarkdownElement.tsx
index 37eda97a4d1289..0fa3ed548afea2 100644
--- a/docs/src/components/markdown/MarkdownElement.tsx
+++ b/docs/src/components/markdown/MarkdownElement.tsx
@@ -10,7 +10,7 @@ const Root = styled('div')(({ theme }) => ({
...theme.typography.caption,
color: (theme.vars || theme).palette.text.primary,
'& pre': {
- backgroundColor: '#0F1924', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
+ backgroundColor: 'hsl(210, 35%, 9%)', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
color: '#f8f8f2', // fallback color until Prism's theme is loaded
overflow: 'auto',
margin: 0,
diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
index f1ff5f2f9bae04..08d1eb2c232786 100644
--- a/docs/src/modules/components/AppFrame.js
+++ b/docs/src/modules/components/AppFrame.js
@@ -115,13 +115,12 @@ const StyledAppBar = styled(AppBar, {
boxShadow: 'none',
backdropFilter: 'blur(8px)',
borderStyle: 'solid',
- borderColor: (theme.vars || theme).palette.grey[100],
+ borderColor: (theme.vars || theme).palette.divider,
borderWidth: 0,
borderBottomWidth: 'thin',
backgroundColor: 'rgba(255,255,255,0.8)',
color: (theme.vars || theme).palette.grey[800],
...theme.applyDarkStyles({
- borderColor: alpha(theme.palette.primary[100], 0.08),
backgroundColor: alpha(theme.palette.primaryDark[900], 0.8),
color: (theme.vars || theme).palette.grey[500],
}),
@@ -208,7 +207,7 @@ export default function AppFrame(props) {
-
+
diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
index 0cf3f3da46828e..c74297650aa327 100644
--- a/docs/src/modules/components/AppSearch.js
+++ b/docs/src/modules/components/AppSearch.js
@@ -54,10 +54,7 @@ const SearchButton = styled('button')(({ theme }) => [
cursor: 'pointer',
transitionProperty: 'all',
transitionDuration: '150ms',
- boxShadow: `inset 0 -1px 0 ${(theme.vars || theme).palette.grey[100]}, 0 1px 0.5px ${alpha(
- theme.palette.grey[100],
- 0.6,
- )}`,
+ boxShadow: `hsl(200, 0%, 100%) 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1.5px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
'&:hover': {
background: (theme.vars || theme).palette.grey[100],
borderColor: (theme.vars || theme).palette.grey[300],
@@ -70,9 +67,7 @@ const SearchButton = styled('button')(({ theme }) => [
theme.applyDarkStyles({
backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
borderColor: (theme.vars || theme).palette.primaryDark[700],
- boxShadow: `inset 0 -1px 1px ${(theme.vars || theme).palette.primaryDark[900]}, 0 1px 0.5px ${
- (theme.vars || theme).palette.common.black
- }`,
+ 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': {
background: (theme.vars || theme).palette.primaryDark[700],
borderColor: (theme.vars || theme).palette.primaryDark[600],
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 4bebe7324c9390..1d6eb268fa9092 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -218,6 +218,7 @@ const DemoRootMaterial = styled('div', {
border: `1px solid ${(theme.vars || theme).palette.divider}`,
borderLeftWidth: 0,
borderRightWidth: 0,
+ borderBottomWidth: 0,
...theme.applyDarkStyles({
backgroundColor: alpha(theme.palette.primaryDark[700], 0.1),
}),
diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx
index e32390019b3f63..a73d74799d6c35 100644
--- a/docs/src/modules/components/DemoEditor.tsx
+++ b/docs/src/modules/components/DemoEditor.tsx
@@ -16,7 +16,7 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [
maxHeight: 'min(68vh, 1000px)',
overflow: 'auto',
marginTop: -1,
- backgroundColor: '#0F1924', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
+ backgroundColor: 'hsl(210, 35%, 9%)', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
border: `1px solid ${(theme.vars || theme).palette.divider}`,
colorScheme: 'dark',
'&:hover': {
diff --git a/docs/src/modules/components/DiamondSponsors.js b/docs/src/modules/components/DiamondSponsors.js
index cdd753cb98009b..4461e562ee4742 100644
--- a/docs/src/modules/components/DiamondSponsors.js
+++ b/docs/src/modules/components/DiamondSponsors.js
@@ -17,7 +17,7 @@ const NativeLink = styled('a')(({ theme }) => ({
border: '1px solid',
borderColor: (theme.vars || theme).palette.divider,
transition: theme.transitions.create(['color', 'border-color']),
- boxShadow: `${alpha(theme.palette.grey[50], 0.5)} 0 1px 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: `${alpha(theme.palette.grey[100], 0.3)} 0 -2px 0 inset`,
'&:hover': {
backgroundColor: (theme.vars || theme).palette.grey[50],
},
@@ -29,10 +29,10 @@ const NativeLink = styled('a')(({ theme }) => ({
display: 'inline-block',
},
...theme.applyDarkStyles({
- boxShadow: `${alpha(theme.palette.primaryDark[600], 0.15)} 0 1px 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`,
'&:hover': {
backgroundColor: (theme.vars || theme).palette.primaryDark[800],
- borderColor: (theme.vars || theme).palette.primaryDark[600],
+ borderColor: (theme.vars || theme).palette.primary[900],
},
}),
}));
diff --git a/docs/src/modules/components/EditPage.js b/docs/src/modules/components/EditPage.js
index d8b16b3067ee3b..63b658fa4b4266 100644
--- a/docs/src/modules/components/EditPage.js
+++ b/docs/src/modules/components/EditPage.js
@@ -19,6 +19,7 @@ export default function EditPage(props) {
component="a"
size="small"
variant="outlined"
+ color="secondary"
startIcon={}
href={
userLanguage === 'en'
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index 1b2b6a0816f49c..7554dd0820ceac 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -24,8 +24,8 @@ const Root = styled('div')(
lineHeight: 1.5, // Developers like when the code is dense.
margin: theme.spacing(2, 'auto'),
padding: theme.spacing(2),
- backgroundColor: '#0F1924', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
- color: '#f8f8f2',
+ backgroundColor: 'hsl(210, 35%, 9%)', // a special, one-off, color tailored for the code blocks using MUI's branding theme blue palette as the starting point. It has a less saturaded color but still maintaining a bit of the blue tint.
+ color: 'hsl(60, 30%, 96%)',
colorScheme: 'dark',
borderRadius: `var(--muidocs-shape-borderRadius, ${
theme.shape?.borderRadius ?? lightTheme.shape.borderRadius
@@ -344,7 +344,7 @@ const Root = styled('div')(
},
},
'&.MuiCallout-info': {
- color: `var(--muidocs-palette-primary-900, ${lightTheme.palette.primary[900]})`,
+ color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`,
borderColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`,
'& strong': {
@@ -375,7 +375,7 @@ const Root = styled('div')(
'&.MuiCallout-warning': {
color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
backgroundColor: alpha(lightTheme.palette.warning[50], 0.5),
- borderColor: `var(--muidocs-palette-warning-200, ${lightTheme.palette.warning[200]})`,
+ borderColor: alpha(lightTheme.palette.warning[700], 0.15),
'& strong': {
color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
},
@@ -540,7 +540,7 @@ const Root = styled('div')(
fontWeight: 500,
borderRadius: 6,
border: 'none',
- backgroundColor: '#0F1924', // using the code block one-off background color (defined in line 23)
+ backgroundColor: 'hsl(210, 35%, 9%)', // using the code block one-off background color (defined in line 23)
color: '#FFF',
transition: theme.transitions.create(['background', 'borderColor', 'display'], {
duration: theme.transitions.duration.shortest,
@@ -721,8 +721,8 @@ const Root = styled('div')(
},
'&.MuiCallout-error': {
color: `var(--muidocs-palette-error-50, ${darkTheme.palette.error[50]})`,
- backgroundColor: alpha(darkTheme.palette.error[700], 0.2),
- borderColor: alpha(darkTheme.palette.error[600], 0.3),
+ backgroundColor: alpha(darkTheme.palette.error[700], 0.15),
+ borderColor: alpha(darkTheme.palette.error[400], 0.1),
'& strong': {
color: `var(--muidocs-palette-error-300, ${darkTheme.palette.error[300]})`,
},
@@ -734,9 +734,9 @@ const Root = styled('div')(
},
},
'&.MuiCallout-info': {
- color: `var(--muidocs-palette-primary-50, ${darkTheme.palette.primary[50]})`,
- backgroundColor: alpha(darkTheme.palette.grey[700], 0.2),
- borderColor: `var(--muidocs-palette-grey-800, ${darkTheme.palette.grey[800]})`,
+ color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`,
+ backgroundColor: alpha(darkTheme.palette.grey[700], 0.15),
+ borderColor: alpha(darkTheme.palette.grey[800], 0.5),
'& strong': {
color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`,
},
@@ -746,8 +746,8 @@ const Root = styled('div')(
},
'&.MuiCallout-success': {
color: `var(--muidocs-palette-success-50, ${darkTheme.palette.success[50]})`,
- backgroundColor: alpha(darkTheme.palette.success[700], 0.15),
- borderColor: alpha(lightTheme.palette.success[600], 0.3),
+ backgroundColor: alpha(darkTheme.palette.success[700], 0.12),
+ borderColor: alpha(lightTheme.palette.success[400], 0.1),
'& strong': {
color: `var(--muidocs-palette-success-200, ${darkTheme.palette.success[200]})`,
},
@@ -760,8 +760,8 @@ const Root = styled('div')(
},
'&.MuiCallout-warning': {
color: `var(--muidocs-palette-warning-50, ${darkTheme.palette.warning[50]})`,
- backgroundColor: alpha(darkTheme.palette.warning[700], 0.15),
- borderColor: alpha(darkTheme.palette.warning[600], 0.3),
+ backgroundColor: alpha(darkTheme.palette.warning[700], 0.12),
+ borderColor: alpha(darkTheme.palette.warning[400], 0.1),
'& strong': {
color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`,
},
diff --git a/docs/src/modules/components/ThemeViewer.tsx b/docs/src/modules/components/ThemeViewer.tsx
index 6db97b5221fb91..60ddb10417cd1f 100644
--- a/docs/src/modules/components/ThemeViewer.tsx
+++ b/docs/src/modules/components/ThemeViewer.tsx
@@ -205,7 +205,7 @@ export default function ThemeViewer({
sx={{
color: '#FFF',
p: 1.5,
- bgcolor: '#0F1924', // one-off code container color
+ bgcolor: 'hsl(210, 35%, 9%)', // one-off code container color
borderRadius: 3,
border: `1px solid ${blueDark[700]}`,
}}
diff --git a/packages/mui-docs/src/InfoCard/InfoCard.tsx b/packages/mui-docs/src/InfoCard/InfoCard.tsx
index d686fd4f268ee2..754a22b43e5c77 100644
--- a/packages/mui-docs/src/InfoCard/InfoCard.tsx
+++ b/packages/mui-docs/src/InfoCard/InfoCard.tsx
@@ -79,7 +79,7 @@ export function InfoCard(props: InfoCardProps) {
height: '100%',
background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
...theme.applyDarkStyles({
- bgcolor: 'primaryDark.900',
+ bgcolor: alpha(theme.palette.primaryDark[800], 0.25),
background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
borderColor: 'primaryDark.700',
}),
diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts
index e28e76c6bda058..2788f6680d6300 100644
--- a/packages/mui-docs/src/branding/brandingTheme.ts
+++ b/packages/mui-docs/src/branding/brandingTheme.ts
@@ -91,82 +91,81 @@ declare module '@mui/material/SvgIcon' {
const defaultTheme = createTheme();
export const blue = {
- 50: '#EBF5FF',
- 100: '#CCE5FF',
- 200: '#99CCFF',
- 300: '#66B2FF',
- 400: '#3399FF',
- main: '#0073E6',
- 500: '#0073E6',
- 600: '#006BD6',
- 700: '#0061C2',
- 800: '#004C99',
- 900: '#003A75',
+ 50: 'hsl(210, 100%, 96%)',
+ 100: 'hsl(210, 100%, 90%)',
+ 200: 'hsl(210, 100%, 80%)',
+ 300: 'hsl(210, 100%, 70%)',
+ 400: 'hsl(210, 100%, 60%)',
+ main: 'hsl(210, 100%, 45%)',
+ 500: 'hsl(210, 100%, 45%)',
+ 600: 'hsl(210, 100%, 42%)',
+ 700: 'hsl(210, 100%, 38%)',
+ 800: 'hsl(210, 100%, 30%)',
+ 900: 'hsl(210, 100%, 23%)',
};
export const blueDark = {
- 50: '#EAEDF1',
- 100: '#DAE0E7',
- 200: '#ACBAC8',
- 300: '#7B91A7',
- main: '#7B91A7',
- 400: '#4B5E71',
- 500: '#3B4A59',
- 600: '#2F3A46',
- 700: '#1F262E', // contrast 13.64:1
- 800: '#141A1F',
- 900: '#101418',
+ 50: 'hsl(210, 14%, 92%)',
+ 100: 'hsl(210, 14%, 87%)',
+ 200: 'hsl(210, 14%, 72%)',
+ 300: 'hsl(210, 14%, 56%)',
+ main: 'hsl(210, 14%, 56%)',
+ 400: 'hsl(210, 14%, 36%)',
+ 500: 'hsl(210, 14%, 28%)',
+ 600: 'hsl(210, 14%, 22%)',
+ 700: 'hsl(210, 14%, 13%)',
+ 800: 'hsl(210, 14%, 9%)',
+ 900: 'hsl(210, 14%, 7%)',
};
export const grey = {
- 50: '#F3F6F9',
- 100: '#E5EAF2',
- 200: '#DAE2ED',
- 300: '#C5D0E0', // vs blueDark 900: WCAG 11.6 AAA, APCA 78 Best for text
- 400: '#AEBACB', // vs blueDark 900: WCAG 9 AAA, APCA 63.3 Ok for text
- 500: '#99A7BB', // vs blueDark 900: WCAG 7.5 AAA, APCA 54.3 Only for large text
- 600: '#6F7F95', // vs white bg: WCAG 4.1 AA, APCA 68.7 Ok for text
- 700: '#576375', // vs white bg: WCAG 8.3 AAA, APCA 88.7 Best for text
- 800: '#303740', // vs white bg: WCAG 11.9 AAA, APCA 97.3 Best for text
- 900: '#1C2025',
+ 50: 'hsl(215, 15%, 97%)',
+ 100: 'hsl(215, 15%, 92%)',
+ 200: 'hsl(215, 15%, 89%)',
+ 300: 'hsl(215, 15%, 82%)',
+ 400: 'hsl(215, 15%, 75%)',
+ 500: 'hsl(215, 15%, 65%)',
+ 600: 'hsl(215, 15%, 50%)',
+ 700: 'hsl(215, 15%, 40%)',
+ 800: 'hsl(215, 15%, 22%)',
+ 900: 'hsl(215, 15%, 12%)',
};
export const error = {
- 50: '#FFF0F1',
- 100: '#FFDBDE',
- 200: '#FFBDC2',
- 300: '#FF99A2',
- 400: '#FF7A86',
- 500: '#FF505F',
- main: '#EB0014', // contrast 4.63:1
- 600: '#EB0014',
- 700: '#C70011',
- 800: '#94000D',
- 900: '#570007',
+ 50: 'hsl(355, 98%, 97%)',
+ 100: 'hsl(355, 98%, 93%)',
+ 200: 'hsl(355, 98%, 87%)',
+ 300: 'hsl(355, 98%, 80%)',
+ 400: 'hsl(355, 98%, 74%)',
+ 500: 'hsl(355, 98%, 66%)',
+ main: 'hsl(355, 98%, 66%)',
+ 600: 'hsl(355, 98%, 46%)',
+ 700: 'hsl(355, 98%, 39%)',
+ 800: 'hsl(355, 98%, 29%)',
+ 900: 'hsl(355, 98%, 17%)',
};
export const success = {
- 50: '#E9FBF0',
- 100: '#C6F6D9',
- 200: '#9AEFBC',
- 300: '#6AE79C',
- 400: '#3EE07F',
- 500: '#21CC66',
- 600: '#1DB45A',
- 700: '#1AA251',
- 800: '#178D46',
- 900: '#0F5C2E',
+ 50: 'hsl(144, 72%, 95%)',
+ 100: 'hsl(144, 72%, 87%)',
+ 200: 'hsl(144, 72%, 77%)',
+ 300: 'hsl(144, 72%, 66%)',
+ 400: 'hsl(144, 72%, 56%)',
+ 500: 'hsl(144, 72%, 46%)',
+ 600: 'hsl(144, 72%, 41%)',
+ 700: 'hsl(144, 72%, 37%)',
+ 800: 'hsl(144, 72%, 32%)',
+ 900: 'hsl(144, 72%, 21%)',
};
export const warning = {
- 50: '#FFF9EB',
- 100: '#FFF3C1',
- 200: '#FFECA1',
- 300: '#FFDC48', // vs blueDark900: WCAG 10.4 AAA, APCA 72 Ok for text
- 400: '#F4C000', // vs blueDark900: WCAG 6.4 AA normal, APCA 48 Only large text
- 500: '#DEA500', // vs blueDark900: WCAG 8 AAA normal, APCA 58 Only large text
- main: '#DEA500',
- 600: '#D18E00', // vs blueDark900: WCAG 6.4 AA normal, APCA 48 Only large text
- 700: '#AB6800', // vs white bg: WCAG 4.4 AA large, APCA 71 Ok for text
- 800: '#8C5800', // vs white bg: WCAG 5.9 AAA large, APCA 80 Best for text
- 900: '#5A3600', // vs white bg: WCAG 10.7 AAA, APCA 95 Best for text
+ 50: 'hsl(48, 100%, 96%)',
+ 100: 'hsl(48, 100%, 88%)',
+ 200: 'hsl(48, 100%, 82%)',
+ 300: 'hsl(48, 100%, 64%)',
+ 400: 'hsl(48, 100%, 48%)',
+ 500: 'hsl(48, 100%, 44%)',
+ main: 'hsl(48, 100%, 44%)',
+ 600: 'hsl(40, 100%, 40%)',
+ 700: 'hsl(36, 100%, 34%)',
+ 800: 'hsl(36, 100%, 27%)',
+ 900: 'hsl(36, 100%, 18%)',
};
-// context on the Advanced Perceptual Contrast Algorithm (APCA) used above here: https://github.com/w3c/wcag/issues/695
const systemFont = [
'-apple-system',
@@ -209,7 +208,7 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
contrastText: blueDark[600],
}),
},
- divider: mode === 'dark' ? alpha(blueDark[500], 0.2) : grey[100],
+ divider: mode === 'dark' ? alpha(blueDark[500], 0.3) : grey[100],
primaryDark: blueDark,
mode,
...(mode === 'dark' && {
@@ -219,7 +218,7 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
},
}),
common: {
- black: '#0B0D0E',
+ black: 'hsl(200, 10%, 4%)',
},
text: {
...(mode === 'light' && {
@@ -248,10 +247,10 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
success: {
...success,
...(mode === 'dark' && {
- main: '#1DB45A', // contrast 6.17:1 (blueDark.800)
+ main: success[600],
}),
...(mode === 'light' && {
- main: '#1AA251', // contrast 3.31:1
+ main: success[700],
}),
},
warning,
@@ -718,7 +717,7 @@ export function getThemedComponents(): ThemeOptions {
color: (theme.vars || theme).palette.primary.main,
backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
borderColor: (theme.vars || theme).palette.primaryDark[100],
- boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0 1px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1.5px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+ boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1.5px 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],
@@ -728,7 +727,7 @@ export function getThemedComponents(): ThemeOptions {
color: (theme.vars || theme).palette.primary[300],
borderColor: alpha(theme.palette.primaryDark[600], 0.5),
backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
- boxShadow: `${alpha(theme.palette.primaryDark[600], 0.2)} 0 1px 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.2)} 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: (theme.vars || theme).palette.primaryDark[500],
background: alpha(theme.palette.primaryDark[700], 0.4),
@@ -747,7 +746,7 @@ export function getThemedComponents(): ThemeOptions {
border: `1px solid`,
backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
borderColor: (theme.vars || theme).palette.primaryDark[100],
- boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0 1px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1.5px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+ boxShadow: `${alpha(theme.palette.grey[50], 0.4)} 0 2px 0 inset, ${alpha(theme.palette.grey[100], 0.5)} 0 -1.5px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
'&:hover': {
color: (theme.vars || theme).palette.primary.main,
borderColor: (theme.vars || theme).palette.grey[300],
@@ -757,7 +756,7 @@ export function getThemedComponents(): ThemeOptions {
theme.applyDarkStyles({
borderColor: alpha(theme.palette.primaryDark[600], 0.5),
backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
- boxShadow: `${alpha(theme.palette.primaryDark[600], 0.2)} 0 1px 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.2)} 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': {
color: (theme.vars || theme).palette.primary[400],
borderColor: (theme.vars || theme).palette.primaryDark[500],
@@ -1081,7 +1080,7 @@ export function getThemedComponents(): ThemeOptions {
borderColor: (theme.vars || theme).palette.grey[100],
'&[href]': {
textDecorationLine: 'none',
- boxShadow: `${alpha(theme.palette.grey[50], 0.5)} 0 1px 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(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`,
'&:hover': {
borderColor: (theme.vars || theme).palette.primary[200],
boxShadow: `0px 2px 8px ${(theme.vars || theme).palette.primary[100]}`,
@@ -1106,7 +1105,7 @@ export function getThemedComponents(): ThemeOptions {
backgroundColor: alpha(theme.palette.primaryDark[800], 0.6),
'&[href]': {
textDecorationLine: 'none',
- boxShadow: `${alpha(theme.palette.primaryDark[600], 0.2)} 0 1px 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[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`,
'&:hover': {
borderColor: alpha(theme.palette.primary[600], 0.5),
boxShadow: `0px 2px 8px ${alpha(theme.palette.primary[900], 0.6)}`,