Skip to content

Commit 6bc045c

Browse files
siriwatknpsiriwatknp
authored
[Joy] Add color inversion feature (mui#32511)
1 parent bb84c5a commit 6bc045c

26 files changed

+828
-1213
lines changed

‎docs/pages/experiments/joy/variant-overrides.tsx‎

Lines changed: 116 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import * as React from 'react';
22
import { GlobalStyles } from '@mui/system';
3-
import Box, { BoxProps } from '@mui/joy/Box';
3+
import Box from '@mui/joy/Box';
44
import Button from '@mui/joy/Button';
5-
import IconButton from '@mui/joy/IconButton';
5+
import Divider from '@mui/joy/Divider';
66
import Typography from '@mui/joy/Typography';
7-
import { CssVarsProvider, ColorPaletteProp, VariantProp, useColorScheme } from '@mui/joy/styles';
8-
import CodeRounded from '@mui/icons-material/CodeRounded';
9-
import ScheduleRounded from '@mui/icons-material/ScheduleRounded';
10-
import DeleteForeverRounded from '@mui/icons-material/DeleteForeverRounded';
7+
import Sheet from '@mui/joy/Sheet';
8+
import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
119
import Moon from '@mui/icons-material/DarkMode';
1210
import Sun from '@mui/icons-material/LightMode';
1311

@@ -38,162 +36,132 @@ function ColorSchemePicker() {
3836
);
3937
}
4038

41-
// how to add more color and use with variants
42-
function Tile({
43-
children,
44-
variant = 'soft',
45-
color = 'primary',
46-
sx = [],
47-
...props
48-
}: {
49-
variant?: 'soft' | 'solid';
50-
color?: ColorPaletteProp | 'secondary' | 'alternate';
51-
} & Omit<BoxProps, 'color'>) {
52-
return (
53-
<Box
54-
sx={[
55-
{ display: 'inline-flex', p: 0.75, borderRadius: '4px' },
56-
// @ts-ignore
57-
(theme) => theme.variants[variant][color],
58-
...(Array.isArray(sx) ? sx : [sx]),
59-
]}
60-
{...props}
61-
>
62-
{children}
63-
</Box>
64-
);
65-
}
66-
6739
export default function JoyVariant() {
68-
const renderContent = (variant: VariantProp, color: ColorPaletteProp) => (
69-
<React.Fragment>
70-
<Box sx={{ display: 'flex', alignItems: 'center' }}>
71-
<ScheduleRounded fontSize="md" />
72-
<Typography level="body3" sx={{ ml: 0.5, mt: '1px', fontWeight: 500 }}>
73-
March 25th
74-
</Typography>
75-
</Box>
76-
<Box sx={{ my: 'auto' }}>
77-
<Tile
78-
variant={variant.match(/(solid)/) ? 'soft' : 'solid'}
79-
color={color}
80-
sx={{
81-
...(variant.match(/(solid)/) && {
82-
bgcolor: 'background.body',
83-
}),
84-
boxShadow: 'md',
85-
}}
86-
>
87-
<CodeRounded />
88-
</Tile>
89-
<Typography level="h6" component="div" sx={{ mt: 1.5, fontWeight: 500 }}>
90-
Check the docs for getting every component API
91-
</Typography>
92-
</Box>
93-
<Box sx={{ display: 'flex', gap: 1 }}>
94-
<Box
95-
component="img"
96-
aria-labelledby="demo-task-card-assigne-name"
97-
src="/static/images/avatar/1-sm.jpeg"
98-
sx={{ borderRadius: 'sm', width: 40, height: 40 }}
99-
/>
100-
<Box>
101-
<Typography level="body2" sx={{ fontWeight: 500 }}>
102-
Assigned to
103-
</Typography>
104-
<Typography id="demo-task-card-assigne-name" sx={{ fontWeight: 500 }}>
105-
Michael Scott
106-
</Typography>
107-
</Box>
108-
<Button color={variant === 'solid' ? undefined : color} sx={{ ml: 'auto' }}>
109-
Check
110-
</Button>
111-
<IconButton color={variant.match(/(solid)/) ? undefined : color}>
112-
<DeleteForeverRounded />
113-
</IconButton>
114-
</Box>
115-
</React.Fragment>
116-
);
11740
return (
11841
<CssVarsProvider>
11942
<GlobalStyles styles={{ body: { margin: 0 } }} />
120-
<Box sx={{ px: 3, pb: 4 }}>
121-
<ColorSchemePicker />
122-
</Box>
12343
<Box
12444
sx={{
12545
maxWidth: { md: 1152, xl: 1536 },
12646
py: 3,
12747
mx: 'auto',
128-
display: 'grid',
129-
gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
130-
gap: 2,
13148
}}
13249
>
133-
<Box
134-
sx={(theme) => ({
135-
'--shadow-channel': '0 0 0',
136-
minWidth: 280,
137-
maxWidth: 360,
138-
minHeight: 280,
139-
display: 'flex',
140-
flexDirection: 'column',
141-
p: 2.5,
142-
boxShadow: 'md',
143-
borderRadius: 'sm',
144-
...theme.variants.solid.primary,
145-
...theme.variants.solidOverrides.primary,
146-
})}
147-
>
148-
{renderContent('solid', 'primary')}
149-
</Box>
150-
<Box
151-
sx={(theme) => ({
152-
minWidth: 280,
153-
maxWidth: 360,
154-
minHeight: 280,
155-
display: 'flex',
156-
flexDirection: 'column',
157-
p: 2.5,
158-
boxShadow: 'md',
159-
borderRadius: 'sm',
160-
...theme.variants.plain.info,
161-
...theme.variants.plainOverrides.info,
162-
})}
163-
>
164-
{renderContent('plain', 'info')}
165-
</Box>
166-
<Box
167-
sx={(theme) => ({
168-
minWidth: 280,
169-
maxWidth: 360,
170-
minHeight: 280,
171-
display: 'flex',
172-
flexDirection: 'column',
173-
p: 2.5,
174-
boxShadow: 'md',
175-
borderRadius: 'sm',
176-
...theme.variants.outlined.neutral,
177-
...theme.variants.outlinedOverrides.neutral,
178-
})}
179-
>
180-
{renderContent('outlined', 'neutral')}
50+
<Box sx={{ px: 3, pb: 4 }}>
51+
<ColorSchemePicker />
18152
</Box>
18253
<Box
183-
sx={(theme) => ({
184-
minWidth: 280,
185-
maxWidth: 360,
186-
minHeight: 280,
187-
display: 'flex',
188-
flexDirection: 'column',
189-
p: 2.5,
190-
boxShadow: 'md',
191-
borderRadius: 'sm',
192-
...theme.variants.soft.success,
193-
...theme.variants.softOverrides.success,
194-
})}
54+
sx={{
55+
display: 'grid',
56+
gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
57+
gap: 2,
58+
'& > div': {
59+
display: 'flex',
60+
flexDirection: 'column',
61+
gap: 1,
62+
p: 2.5,
63+
boxShadow: 'md',
64+
borderRadius: 'sm',
65+
},
66+
}}
19567
>
196-
{renderContent('soft', 'success')}
68+
<Sheet variant="solid" color="warning" invertedColors>
69+
<Sheet
70+
sx={{
71+
bgcolor: 'background.body',
72+
width: 64,
73+
height: 64,
74+
borderRadius: '50%',
75+
position: 'absolute',
76+
top: '1rem',
77+
right: '1rem',
78+
}}
79+
/>
80+
<Typography>text.primary</Typography>
81+
<Typography level="body2">text.secondary</Typography>
82+
<Typography level="body3" mb={1}>
83+
text.tertiary
84+
</Typography>
85+
<Divider />
86+
<Box display="flex" gap={1}>
87+
<Button variant="solid">solid</Button>
88+
<Button disabled variant="solid">
89+
solid
90+
</Button>
91+
</Box>
92+
<Box display="flex" gap={1}>
93+
<Button variant="soft">soft</Button>
94+
<Button disabled variant="soft">
95+
soft
96+
</Button>
97+
</Box>
98+
<Box display="flex" gap={1}>
99+
<Button variant="outlined">outlined</Button>
100+
<Button disabled variant="outlined">
101+
outlined
102+
</Button>
103+
</Box>
104+
<Box display="flex" gap={1}>
105+
<Button variant="plain">plain</Button>
106+
<Button disabled variant="plain">
107+
plain
108+
</Button>
109+
</Box>
110+
<Box sx={{ height: 40, bgcolor: 'background.surface' }} />
111+
<Box sx={{ height: 40, bgcolor: 'background.level1' }} />
112+
<Box sx={{ height: 40, bgcolor: 'background.level2' }} />
113+
<Box sx={{ height: 40, bgcolor: 'background.level3' }} />
114+
<Box sx={{ height: 40, bgcolor: 'background.tooltip' }} />
115+
</Sheet>
116+
<Sheet variant="soft" color="warning" invertedColors>
117+
<Sheet
118+
variant="soft"
119+
sx={{
120+
bgcolor: 'background.body',
121+
width: 64,
122+
height: 64,
123+
borderRadius: '50%',
124+
position: 'absolute',
125+
top: '1rem',
126+
right: '1rem',
127+
}}
128+
/>
129+
<Typography>text.primary</Typography>
130+
<Typography level="body2">text.secondary</Typography>
131+
<Typography level="body3" mb={1}>
132+
text.tertiary
133+
</Typography>
134+
<Divider />
135+
<Box display="flex" gap={1}>
136+
<Button variant="solid">solid</Button>
137+
<Button disabled variant="solid">
138+
solid
139+
</Button>
140+
</Box>
141+
<Box display="flex" gap={1}>
142+
<Button variant="soft">soft</Button>
143+
<Button disabled variant="soft">
144+
soft
145+
</Button>
146+
</Box>
147+
<Box display="flex" gap={1}>
148+
<Button variant="outlined">outlined</Button>
149+
<Button disabled variant="outlined">
150+
outlined
151+
</Button>
152+
</Box>
153+
<Box display="flex" gap={1}>
154+
<Button variant="plain">plain</Button>
155+
<Button disabled variant="plain">
156+
plain
157+
</Button>
158+
</Box>
159+
<Box sx={{ height: 40, bgcolor: 'background.surface' }} />
160+
<Box sx={{ height: 40, bgcolor: 'background.level1' }} />
161+
<Box sx={{ height: 40, bgcolor: 'background.level2' }} />
162+
<Box sx={{ height: 40, bgcolor: 'background.level3' }} />
163+
<Box sx={{ height: 40, bgcolor: 'background.tooltip' }} />
164+
</Sheet>
197165
</Box>
198166
</Box>
199167
</CssVarsProvider>

0 commit comments

Comments
 (0)