diff --git a/docs/pages/design-kits.tsx b/docs/pages/design-kits.tsx
index 909b5ef4f93740..bb7e696f1512fc 100644
--- a/docs/pages/design-kits.tsx
+++ b/docs/pages/design-kits.tsx
@@ -9,13 +9,13 @@ import DesignKitDemo from 'docs/src/components/productDesignKit/DesignKitDemo';
import DesignKitFAQ from 'docs/src/components/productDesignKit/DesignKitFAQ';
import Testimonials from 'docs/src/components/home/Testimonials';
import HeroEnd from 'docs/src/components/home/HeroEnd';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
import References, { DESIGNKITS_CUSTOMERS } from 'docs/src/components/home/References';
import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
export default function DesignKits() {
return (
-
+
-
+
);
}
diff --git a/docs/src/components/home/DesignKits.tsx b/docs/src/components/home/DesignKits.tsx
index 4f257ca0bdbec2..5c5f6fc53c1563 100644
--- a/docs/src/components/home/DesignKits.tsx
+++ b/docs/src/components/home/DesignKits.tsx
@@ -20,30 +20,35 @@ const Image = styled('img')(({ theme }) => ({
height: 450 / ratio,
},
border: '6px solid',
- borderColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[400],
+ borderColor: (theme.vars || theme).palette.grey[400],
borderRadius: theme.shape.borderRadius,
objectFit: 'cover',
transitionProperty: 'all',
transitionDuration: '150ms',
- boxShadow:
- theme.palette.mode === 'dark'
- ? '0px 4px 20px rgba(0, 0, 0, 0.6)'
- : '0px 4px 20px rgba(61, 71, 82, 0.25)',
+ boxShadow: '0px 4px 20px rgba(61, 71, 82, 0.25)',
+ ...theme.applyDarkStyles({
+ borderColor: (theme.vars || theme).palette.grey[800],
+ boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.6)',
+ }),
}));
-const Anchor = styled('a')(({ theme }) => ({
- display: 'inline-block',
- position: 'relative',
- transitionProperty: 'all',
- transitionDuration: '150ms',
- borderRadius: '50%',
- '&:hover, &:focus': {
- boxShadow:
- theme.palette.mode === 'dark'
- ? `0 6px 20px 0 ${alpha(theme.palette.primaryDark[100], 0.5)}`
- : '0 6px 20px 0 rgba(0,0,0,0.2)',
+const Anchor = styled('a')(({ theme }) => [
+ {
+ display: 'inline-block',
+ position: 'relative',
+ transitionProperty: 'all',
+ transitionDuration: '150ms',
+ borderRadius: '50%',
+ '&:hover, &:focus': {
+ boxShadow: '0 6px 20px 0 rgba(0,0,0,0.2)',
+ },
},
-}));
+ theme.applyDarkStyles({
+ '&:hover, &:focus': {
+ boxShadow: `0 6px 20px 0 ${alpha(theme.palette.primaryDark[100], 0.5)}`,
+ },
+ }),
+]);
const DesignToolLink = React.forwardRef<
HTMLAnchorElement,
@@ -80,15 +85,15 @@ const DesignToolLogo = React.forwardRef<
src={`/static/branding/design-kits/designkits-${brand}.png`}
alt=""
{...props}
- sx={{
- boxShadow: (theme) =>
- `0px 3.57436px 44.6795px ${
- theme.palette.mode === 'dark'
- ? theme.palette.primaryDark[900]
- : 'rgba(90, 105, 120, 0.36)'
- }`,
- ...props.sx,
- }}
+ sx={[
+ (theme) => ({
+ boxShadow: `0px 3.57436px 44.6795px ${'rgba(90, 105, 120, 0.36)'}`,
+ ...theme.applyDarkStyles({
+ boxShadow: `0px 3.57436px 44.6795px ${(theme.vars || theme).palette.primaryDark[900]}`,
+ }),
+ }),
+ ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
+ ]}
/>
);
});
@@ -225,64 +230,60 @@ export default function DesignKits() {
}}
>
({
position: 'absolute',
width: '100%',
height: '100%',
- bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.900' : 'grey.50'),
+ bgcolor: 'grey.50',
opacity: 0.6,
zIndex: 1,
- }}
+ ...theme.applyDarkStyles({
+ bgcolor: 'primaryDark.900',
+ }),
+ })}
/>
({
display: { xs: 'block', md: 'none' },
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
- background: (theme) =>
- `linear-gradient(to bottom, ${
- theme.palette.mode === 'dark'
- ? theme.palette.primaryDark[900]
- : theme.palette.grey[50]
- } 0%, ${
- theme.palette.mode === 'dark'
- ? alpha(theme.palette.primaryDark[900], 0)
- : 'rgba(255,255,255,0)' // transparent does not work in Safari & Mobile device
- } 30%, ${
- theme.palette.mode === 'dark'
- ? alpha(theme.palette.primaryDark[900], 0)
- : 'rgba(255,255,255,0)' // transparent does not work in Safari & Mobile device
- } 70%, ${
- theme.palette.mode === 'dark'
- ? theme.palette.primaryDark[900]
- : theme.palette.grey[50]
- } 100%)`,
+ background: `linear-gradient(to bottom, ${(theme.vars || theme).palette.grey[50]} 0%, ${
+ 'rgba(255,255,255,0)' // transparent does not work in Safari & Mobile device
+ } 30%, ${
+ 'rgba(255,255,255,0)' // transparent does not work in Safari & Mobile device
+ } 70%, ${(theme.vars || theme).palette.grey[50]} 100%)`,
zIndex: 2,
- }}
+ ...theme.applyDarkStyles({
+ background: `linear-gradient(to bottom, ${
+ (theme.vars || theme).palette.primaryDark[900]
+ } 0%, ${alpha((theme.vars || theme).palette.primaryDark[900], 0)} 30%, ${alpha(
+ (theme.vars || theme).palette.primaryDark[900],
+ 0,
+ )} 70%, ${(theme.vars || theme).palette.primaryDark[900]} 100%)`,
+ }),
+ })}
/>
({
display: { xs: 'none', md: 'block' },
position: 'absolute',
top: 0,
left: 0,
width: 400,
height: '100%',
- background: (theme) =>
- `linear-gradient(to right, ${
- theme.palette.mode === 'dark'
- ? theme.palette.primaryDark[900]
- : theme.palette.grey[50]
- }, ${
- theme.palette.mode === 'dark'
- ? alpha(theme.palette.primaryDark[900], 0)
- : 'rgba(255,255,255,0)' // transparent does not work in Safari & Mobile device
- })`,
+ background: `linear-gradient(to right, ${(theme.vars || theme).palette.grey[50]}, ${
+ 'rgba(255,255,255,0)' // transparent does not work in Safari & Mobile device
+ })`,
zIndex: 2,
- }}
+ ...theme.applyDarkStyles({
+ background: `linear-gradient(to right, ${
+ (theme.vars || theme).palette.primaryDark[900]
+ }, ${alpha((theme.vars || theme).palette.primaryDark[900], 0)})`,
+ }),
+ })}
/>
({
- filter:
- theme.palette.mode === 'dark'
- ? 'drop-shadow(-8px 4px 20px rgba(0, 0, 0, 0.4))'
- : 'drop-shadow(-8px 4px 20px rgba(61, 71, 82, 0.2))',
+ filter: 'drop-shadow(-8px 4px 20px rgba(61, 71, 82, 0.2))',
transition: '0.4s',
display: 'block',
height: 'auto',
borderRadius: '10px',
+ ...theme.applyDarkStyles({
+ filter: 'drop-shadow(-8px 4px 20px rgba(0, 0, 0, 0.4))',
+ }),
}));
export default function TemplateDemo() {
- const globalTheme = useTheme();
- const mode = globalTheme.palette.mode;
const [demo, setDemo] = React.useState(DEMOS[0]);
const icons = {
[DEMOS[0]]: ,
@@ -82,93 +80,121 @@ export default function TemplateDemo() {
>
+ theme.applyDarkStyles({
+ '&:hover': {
+ '& img': {
+ filter: 'drop-shadow(-16px 12px 20px rgba(0, 0, 0, 0.4))',
+ },
+ },
+ }),
+ ]}
>
+ theme.applyDarkStyles({
+ content: `url(/static/branding/design-kits/Button-dark.jpeg)`,
+ })
+ }
/>
+ theme.applyDarkStyles({
+ content: `url(/static/branding/design-kits/Alert-dark.jpeg)`,
+ })
+ }
/>
+ theme.applyDarkStyles({
+ content: `url(/static/branding/design-kits/Slider-dark.jpeg)`,
+ })
+ }
/>
({
width: { sm: 400 },
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)',
- }}
+ ...theme.applyDarkStyles({
+ content: `url(/static/branding/design-kits/Colors-dark.jpeg)`,
+ }),
+ })}
/>
({
width: { sm: 500 },
position: 'absolute',
left: '50%',
top: 60,
transform: 'translate(-40%)',
- }}
+ ...theme.applyDarkStyles({
+ content: `url(/static/branding/design-kits/Icons-dark.jpeg)`,
+ }),
+ })}
/>
diff --git a/docs/src/components/productDesignKit/DesignKitFAQ.tsx b/docs/src/components/productDesignKit/DesignKitFAQ.tsx
index f527668b358696..dcd8891eb65304 100644
--- a/docs/src/components/productDesignKit/DesignKitFAQ.tsx
+++ b/docs/src/components/productDesignKit/DesignKitFAQ.tsx
@@ -152,15 +152,18 @@ export default function DesignKitFAQ() {
{renderItem(4)}
({
pt: 2,
pb: 1,
px: 2,
borderStyle: 'dashed',
- borderColor: (theme) =>
- theme.palette.mode === 'dark' ? 'primaryDark.400' : 'grey.300',
- bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.800' : 'white'),
- }}
+ borderColor: 'grey.300',
+ bgcolor: 'white',
+ ...theme.applyDarkStyles({
+ borderColor: 'primaryDark.400',
+ bgcolor: 'primaryDark.800',
+ }),
+ })}
>
diff --git a/docs/src/components/productDesignKit/DesignKitHero.tsx b/docs/src/components/productDesignKit/DesignKitHero.tsx
index ee55dac8510e82..e49b001401233e 100644
--- a/docs/src/components/productDesignKit/DesignKitHero.tsx
+++ b/docs/src/components/productDesignKit/DesignKitHero.tsx
@@ -22,13 +22,16 @@ export default function TemplateHero() {
(theme.palette.mode === 'dark' ? 'primary.400' : 'primary.600')}
- sx={{
+ sx={(theme) => ({
+ color: 'primary.600',
display: 'flex',
alignItems: 'center',
justifyContent: { xs: 'center', md: 'start' },
'& > *': { mr: 1, width: 28, height: 28 },
- }}
+ ...theme.applyDarkStyles({
+ color: 'primary.400',
+ }),
+ })}
>
Design kits
@@ -57,20 +60,21 @@ export default function TemplateHero() {
({
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: 1,
- background: (theme) =>
- `linear-gradient(90deg, ${theme.palette.primaryDark[900]} 1%, ${alpha(
- theme.palette.primaryDark[900],
- 0.5,
- )})`,
- opacity: (theme) => (theme.palette.mode === 'dark' ? 1 : 0),
- }}
+ background: `linear-gradient(90deg, ${
+ (theme.vars || theme).palette.primaryDark[900]
+ } 1%, ${alpha(theme.palette.primaryDark[900], 0.5)})`,
+ opacity: 0,
+ ...theme.applyDarkStyles({
+ opacity: 1,
+ }),
+ })}
/>