Skip to content

Commit 460d6f7

Browse files
siriwatknpsiriwatknp
authored
[core] Group Pigment CSS dependencies (#42174)
1 parent c33515b commit 460d6f7

File tree

76 files changed

+657
-395
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+657
-395
lines changed

‎apps/local-ui-lib/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
"version": "0.0.1",
44
"private": true,
55
"dependencies": {
6-
"@pigment-css/react": "^0.0.9"
6+
"@pigment-css/react": "^0.0.12"
77
}
88
}

‎apps/pigment-css-next-app/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"clean": "rimraf .next"
1010
},
1111
"dependencies": {
12-
"@pigment-css/react": "^0.0.10",
12+
"@pigment-css/react": "^0.0.12",
1313
"@mui/utils": "workspace:^",
1414
"@mui/base": "workspace:^",
1515
"@mui/lab": "workspace:^",
@@ -24,7 +24,7 @@
2424
"next": "latest"
2525
},
2626
"devDependencies": {
27-
"@pigment-css/nextjs-plugin": "^0.0.10",
27+
"@pigment-css/nextjs-plugin": "^0.0.12",
2828
"@types/node": "^20.5.7",
2929
"@types/react": "^18.2.55",
3030
"@types/react-dom": "^18.3.0",

‎apps/pigment-css-vite-app/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"build": "vite build"
1010
},
1111
"dependencies": {
12-
"@pigment-css/react": "^0.0.9",
12+
"@pigment-css/react": "^0.0.12",
1313
"@mui/utils": "workspace:^",
1414
"@mui/base": "workspace:^",
1515
"@mui/lab": "workspace:^",
@@ -27,7 +27,7 @@
2727
"devDependencies": {
2828
"@babel/preset-react": "^7.24.6",
2929
"@babel/preset-typescript": "^7.24.6",
30-
"@pigment-css/vite-plugin": "^0.0.9",
30+
"@pigment-css/vite-plugin": "^0.0.12",
3131
"@types/react": "^18.2.55",
3232
"@types/react-dom": "^18.3.0",
3333
"@vitejs/plugin-react": "^4.3.0",

‎docs/data/material/components/accordion/AccordionTransition.js

+24-4
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,30 @@ export default function AccordionTransition() {
2020
onChange={handleExpansion}
2121
slots={{ transition: Fade }}
2222
slotProps={{ transition: { timeout: 400 } }}
23-
sx={{
24-
'& .MuiAccordion-region': { height: expanded ? 'auto' : 0 },
25-
'& .MuiAccordionDetails-root': { display: expanded ? 'block' : 'none' },
26-
}}
23+
sx={[
24+
expanded
25+
? {
26+
'& .MuiAccordion-region': {
27+
height: 'auto',
28+
},
29+
}
30+
: {
31+
'& .MuiAccordion-region': {
32+
height: 0,
33+
},
34+
},
35+
expanded
36+
? {
37+
'& .MuiAccordionDetails-root': {
38+
display: 'block',
39+
},
40+
}
41+
: {
42+
'& .MuiAccordionDetails-root': {
43+
display: 'none',
44+
},
45+
},
46+
]}
2747
>
2848
<AccordionSummary
2949
expandIcon={<ExpandMoreIcon />}

‎docs/data/material/components/accordion/AccordionTransition.tsx

+24-4
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,30 @@ export default function AccordionTransition() {
2020
onChange={handleExpansion}
2121
slots={{ transition: Fade as AccordionSlots['transition'] }}
2222
slotProps={{ transition: { timeout: 400 } }}
23-
sx={{
24-
'& .MuiAccordion-region': { height: expanded ? 'auto' : 0 },
25-
'& .MuiAccordionDetails-root': { display: expanded ? 'block' : 'none' },
26-
}}
23+
sx={[
24+
expanded
25+
? {
26+
'& .MuiAccordion-region': {
27+
height: 'auto',
28+
},
29+
}
30+
: {
31+
'& .MuiAccordion-region': {
32+
height: 0,
33+
},
34+
},
35+
expanded
36+
? {
37+
'& .MuiAccordionDetails-root': {
38+
display: 'block',
39+
},
40+
}
41+
: {
42+
'& .MuiAccordionDetails-root': {
43+
display: 'none',
44+
},
45+
},
46+
]}
2747
>
2848
<AccordionSummary
2949
expandIcon={<ExpandMoreIcon />}

‎docs/data/material/components/app-bar/ResponsiveAppBar.js

-1
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,6 @@ function ResponsiveAppBar() {
124124
</Button>
125125
))}
126126
</Box>
127-
128127
<Box sx={{ flexGrow: 0 }}>
129128
<Tooltip title="Open settings">
130129
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>

‎docs/data/material/components/app-bar/ResponsiveAppBar.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,6 @@ function ResponsiveAppBar() {
124124
</Button>
125125
))}
126126
</Box>
127-
128127
<Box sx={{ flexGrow: 0 }}>
129128
<Tooltip title="Open settings">
130129
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>

‎docs/data/material/components/autocomplete/CountrySelect.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,12 @@ export default function CountrySelect() {
3838
/>
3939
);
4040
}
41-
4241
interface CountryType {
4342
code: string;
4443
label: string;
4544
phone: string;
4645
suggested?: boolean;
4746
}
48-
4947
// From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js
5048
const countries: readonly CountryType[] = [
5149
{ code: 'AD', label: 'Andorra', phone: '376' },

‎docs/data/material/components/autocomplete/CustomInputAutocomplete.js

+3-4
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,14 @@ export default function CustomInputAutocomplete() {
88
<label>
99
Value:{' '}
1010
<Autocomplete
11-
sx={{
11+
sx={(theme) => ({
1212
display: 'inline-block',
1313
'& input': {
1414
width: 200,
1515
bgcolor: 'background.paper',
16-
color: (theme) =>
17-
theme.palette.getContrastText(theme.palette.background.paper),
16+
color: theme.palette.getContrastText(theme.palette.background.paper),
1817
},
19-
}}
18+
})}
2019
id="custom-input-demo"
2120
options={options}
2221
renderInput={(params) => (

‎docs/data/material/components/autocomplete/CustomInputAutocomplete.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,14 @@ export default function CustomInputAutocomplete() {
88
<label>
99
Value:{' '}
1010
<Autocomplete
11-
sx={{
11+
sx={(theme) => ({
1212
display: 'inline-block',
1313
'& input': {
1414
width: 200,
1515
bgcolor: 'background.paper',
16-
color: (theme) =>
17-
theme.palette.getContrastText(theme.palette.background.paper),
16+
color: theme.palette.getContrastText(theme.palette.background.paper),
1817
},
19-
}}
18+
})}
2019
id="custom-input-demo"
2120
options={options}
2221
renderInput={(params) => (

‎docs/data/material/components/autocomplete/GitHubLabel.js

+12-9
Original file line numberDiff line numberDiff line change
@@ -162,13 +162,14 @@ export default function GitHubLabel() {
162162
<ClickAwayListener onClickAway={handleClose}>
163163
<div>
164164
<Box
165-
sx={{
166-
borderBottom: `1px solid ${
167-
theme.palette.mode === 'light' ? '#eaecef' : '#30363d'
168-
}`,
165+
sx={(t) => ({
166+
borderBottom: `1px solid ${'#30363d'}`,
169167
padding: '8px 10px',
170168
fontWeight: 600,
171-
}}
169+
...t.applyStyles('light', {
170+
borderBottom: `1px solid ${'#eaecef'}`,
171+
}),
172+
})}
172173
>
173174
Apply labels to this pull request
174175
</Box>
@@ -216,13 +217,15 @@ export default function GitHubLabel() {
216217
style={{ backgroundColor: option.color }}
217218
/>
218219
<Box
219-
sx={{
220+
sx={(t) => ({
220221
flexGrow: 1,
221222
'& span': {
222-
color:
223-
theme.palette.mode === 'light' ? '#586069' : '#8b949e',
223+
color: '#8b949e',
224+
...t.applyStyles('light', {
225+
color: '#586069',
226+
}),
224227
},
225-
}}
228+
})}
226229
>
227230
{option.name}
228231
<br />

‎docs/data/material/components/autocomplete/GitHubLabel.tsx

+12-9
Original file line numberDiff line numberDiff line change
@@ -164,13 +164,14 @@ export default function GitHubLabel() {
164164
<ClickAwayListener onClickAway={handleClose}>
165165
<div>
166166
<Box
167-
sx={{
168-
borderBottom: `1px solid ${
169-
theme.palette.mode === 'light' ? '#eaecef' : '#30363d'
170-
}`,
167+
sx={(t) => ({
168+
borderBottom: `1px solid ${'#30363d'}`,
171169
padding: '8px 10px',
172170
fontWeight: 600,
173-
}}
171+
...t.applyStyles('light', {
172+
borderBottom: `1px solid ${'#eaecef'}`,
173+
}),
174+
})}
174175
>
175176
Apply labels to this pull request
176177
</Box>
@@ -222,13 +223,15 @@ export default function GitHubLabel() {
222223
style={{ backgroundColor: option.color }}
223224
/>
224225
<Box
225-
sx={{
226+
sx={(t) => ({
226227
flexGrow: 1,
227228
'& span': {
228-
color:
229-
theme.palette.mode === 'light' ? '#586069' : '#8b949e',
229+
color: '#8b949e',
230+
...t.applyStyles('light', {
231+
color: '#586069',
232+
}),
230233
},
231-
}}
234+
})}
232235
>
233236
{option.name}
234237
<br />

‎docs/data/material/components/backdrop/SimpleBackdrop.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default function SimpleBackdrop() {
1616
<div>
1717
<Button onClick={handleOpen}>Show backdrop</Button>
1818
<Backdrop
19-
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
19+
sx={(theme) => ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })}
2020
open={open}
2121
onClick={handleClose}
2222
>

‎docs/data/material/components/backdrop/SimpleBackdrop.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default function SimpleBackdrop() {
1616
<div>
1717
<Button onClick={handleOpen}>Show backdrop</Button>
1818
<Backdrop
19-
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
19+
sx={(theme) => ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })}
2020
open={open}
2121
onClick={handleClose}
2222
>

‎docs/data/material/components/backdrop/SimpleBackdrop.tsx.preview

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<Button onClick={handleOpen}>Show backdrop</Button>
22
<Backdrop
3-
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
3+
sx={(theme) => ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })}
44
open={open}
55
onClick={handleClose}
66
>

‎docs/data/material/components/badges/BadgeOverlap.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ const rectangle = <Box component="span" sx={shapeStyles} />;
99
const circle = (
1010
<Box component="span" sx={{ ...shapeStyles, ...shapeCircleStyles }} />
1111
);
12-
1312
export default function BadgeOverlap() {
1413
return (
1514
<Stack spacing={3} direction="row">

‎docs/data/material/components/buttons/ButtonBaseDemo.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -104,12 +104,12 @@ export default function ButtonBaseDemo() {
104104
component="span"
105105
variant="subtitle1"
106106
color="inherit"
107-
sx={{
107+
sx={(theme) => ({
108108
position: 'relative',
109109
p: 4,
110110
pt: 2,
111-
pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,
112-
}}
111+
pb: `calc(${theme.spacing(1)} + 6px)`,
112+
})}
113113
>
114114
{image.title}
115115
<ImageMarked className="MuiImageMarked-root" />

‎docs/data/material/components/buttons/ButtonBaseDemo.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -104,12 +104,12 @@ export default function ButtonBaseDemo() {
104104
component="span"
105105
variant="subtitle1"
106106
color="inherit"
107-
sx={{
107+
sx={(theme) => ({
108108
position: 'relative',
109109
p: 4,
110110
pt: 2,
111-
pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,
112-
}}
111+
pb: `calc(${theme.spacing(1)} + 6px)`,
112+
})}
113113
>
114114
{image.title}
115115
<ImageMarked className="MuiImageMarked-root" />

‎docs/data/material/components/buttons/LoadingButtonsTransition.js

-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,6 @@ export default function LoadingButtonsTransition() {
6969
<span>Save</span>
7070
</LoadingButton>
7171
</Box>
72-
7372
<Box sx={{ '& > button': { m: 1 } }}>
7473
<LoadingButton
7574
onClick={handleClick}

‎docs/data/material/components/buttons/LoadingButtonsTransition.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,6 @@ export default function LoadingButtonsTransition() {
6969
<span>Save</span>
7070
</LoadingButton>
7171
</Box>
72-
7372
<Box sx={{ '& > button': { m: 1 } }}>
7473
<LoadingButton
7574
onClick={handleClick}

‎docs/data/material/components/chips/ChipsPlayground.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,12 @@ function ChipsPlayground() {
9393
<Grid container sx={{ flexGrow: 1 }}>
9494
<Grid item xs={12}>
9595
<Grid container justifyContent="center" alignItems="center">
96-
<Grid item sx={{ height: (theme) => theme.spacing(10) }}>
96+
<Grid
97+
item
98+
sx={(theme) => ({
99+
height: theme.spacing(10),
100+
})}
101+
>
97102
<Chip
98103
label="Chip Component"
99104
color={color}
@@ -258,5 +263,4 @@ function ChipsPlayground() {
258263
</Grid>
259264
);
260265
}
261-
262266
export default ChipsPlayground;

‎docs/data/material/components/dialogs/CustomizedDialogs.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,12 @@ export default function CustomizedDialogs() {
4444
<IconButton
4545
aria-label="close"
4646
onClick={handleClose}
47-
sx={{
47+
sx={(theme) => ({
4848
position: 'absolute',
4949
right: 8,
5050
top: 8,
51-
color: (theme) => theme.palette.grey[500],
52-
}}
51+
color: theme.palette.grey[500],
52+
})}
5353
>
5454
<CloseIcon />
5555
</IconButton>

‎docs/data/material/components/dialogs/CustomizedDialogs.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,12 @@ export default function CustomizedDialogs() {
4444
<IconButton
4545
aria-label="close"
4646
onClick={handleClose}
47-
sx={{
47+
sx={(theme) => ({
4848
position: 'absolute',
4949
right: 8,
5050
top: 8,
51-
color: (theme) => theme.palette.grey[500],
52-
}}
51+
color: theme.palette.grey[500],
52+
})}
5353
>
5454
<CloseIcon />
5555
</IconButton>

0 commit comments

Comments
 (0)