Skip to content

Commit e1d7fda

Browse files
danilo-lealdanilo-leal
authored
[docs-infra] Update branding theme colors to the HSL notation (#41738)
1 parent 79094e8 commit e1d7fda

File tree

12 files changed

+102
-108
lines changed

12 files changed

+102
-108
lines changed

‎docs/src/components/banner/TableOfContentsBanner.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,9 @@ export default function TableOfContentsBanner() {
3434
(theme) =>
3535
theme.applyDarkStyles({
3636
backgroundColor: alpha(theme.palette.primary[900], 0.2),
37-
borderColor: (theme.vars || theme).palette.divider,
3837
'&:hover, &:focus-visible': {
3938
backgroundColor: alpha(theme.palette.primary[900], 0.4),
40-
borderColor: (theme.vars || theme).palette.primaryDark[500],
39+
borderColor: (theme.vars || theme).palette.primary[900],
4140
},
4241
}),
4342
]}

‎docs/src/components/markdown/MarkdownElement.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const Root = styled('div')(({ theme }) => ({
1010
...theme.typography.caption,
1111
color: (theme.vars || theme).palette.text.primary,
1212
'& pre': {
13-
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.
13+
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.
1414
color: '#f8f8f2', // fallback color until Prism's theme is loaded
1515
overflow: 'auto',
1616
margin: 0,

‎docs/src/modules/components/AppFrame.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -115,13 +115,12 @@ const StyledAppBar = styled(AppBar, {
115115
boxShadow: 'none',
116116
backdropFilter: 'blur(8px)',
117117
borderStyle: 'solid',
118-
borderColor: (theme.vars || theme).palette.grey[100],
118+
borderColor: (theme.vars || theme).palette.divider,
119119
borderWidth: 0,
120120
borderBottomWidth: 'thin',
121121
backgroundColor: 'rgba(255,255,255,0.8)',
122122
color: (theme.vars || theme).palette.grey[800],
123123
...theme.applyDarkStyles({
124-
borderColor: alpha(theme.palette.primary[100], 0.08),
125124
backgroundColor: alpha(theme.palette.primaryDark[900], 0.8),
126125
color: (theme.vars || theme).palette.grey[500],
127126
}),
@@ -205,7 +204,7 @@ export default function AppFrame(props) {
205204
</Box>
206205
</NextLink>
207206
<GrowingDiv />
208-
<Stack direction="row" spacing="10px">
207+
<Stack direction="row" spacing={1} useFlexGap>
209208
<BannerComponent />
210209
<DeferredAppSearch />
211210
<Tooltip title={t('appFrame.github')} enterDelay={300}>

‎docs/src/modules/components/AppSearch.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,7 @@ const SearchButton = styled('button')(({ theme }) => [
5454
cursor: 'pointer',
5555
transitionProperty: 'all',
5656
transitionDuration: '150ms',
57-
boxShadow: `inset 0 -1px 0 ${(theme.vars || theme).palette.grey[100]}, 0 1px 0.5px ${alpha(
58-
theme.palette.grey[100],
59-
0.6,
60-
)}`,
57+
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`,
6158
'&:hover': {
6259
background: (theme.vars || theme).palette.grey[100],
6360
borderColor: (theme.vars || theme).palette.grey[300],
@@ -70,9 +67,7 @@ const SearchButton = styled('button')(({ theme }) => [
7067
theme.applyDarkStyles({
7168
backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
7269
borderColor: (theme.vars || theme).palette.primaryDark[700],
73-
boxShadow: `inset 0 -1px 1px ${(theme.vars || theme).palette.primaryDark[900]}, 0 1px 0.5px ${
74-
(theme.vars || theme).palette.common.black
75-
}`,
70+
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`,
7671
'&:hover': {
7772
background: (theme.vars || theme).palette.primaryDark[700],
7873
borderColor: (theme.vars || theme).palette.primaryDark[600],

‎docs/src/modules/components/Demo.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,7 @@ const DemoRootMaterial = styled('div', {
218218
border: `1px solid ${(theme.vars || theme).palette.divider}`,
219219
borderLeftWidth: 0,
220220
borderRightWidth: 0,
221+
borderBottomWidth: 0,
221222
...theme.applyDarkStyles({
222223
backgroundColor: alpha(theme.palette.primaryDark[700], 0.1),
223224
}),

‎docs/src/modules/components/DemoEditor.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [
1616
maxHeight: 'min(68vh, 1000px)',
1717
overflow: 'auto',
1818
marginTop: -1,
19-
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.
19+
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.
2020
border: `1px solid ${(theme.vars || theme).palette.divider}`,
2121
colorScheme: 'dark',
2222
'&:hover': {

‎docs/src/modules/components/DiamondSponsors.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const NativeLink = styled('a')(({ theme }) => ({
1717
border: '1px solid',
1818
borderColor: (theme.vars || theme).palette.divider,
1919
transition: theme.transitions.create(['color', 'border-color']),
20-
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`,
20+
boxShadow: `${alpha(theme.palette.grey[100], 0.3)} 0 -2px 0 inset`,
2121
'&:hover': {
2222
backgroundColor: (theme.vars || theme).palette.grey[50],
2323
},
@@ -29,10 +29,10 @@ const NativeLink = styled('a')(({ theme }) => ({
2929
display: 'inline-block',
3030
},
3131
...theme.applyDarkStyles({
32-
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`,
32+
boxShadow: `${alpha(theme.palette.primaryDark[600], 0.1)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset`,
3333
'&:hover': {
3434
backgroundColor: (theme.vars || theme).palette.primaryDark[800],
35-
borderColor: (theme.vars || theme).palette.primaryDark[600],
35+
borderColor: (theme.vars || theme).palette.primary[900],
3636
},
3737
}),
3838
}));

‎docs/src/modules/components/EditPage.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export default function EditPage(props) {
2525
component="a"
2626
size="small"
2727
variant="outlined"
28+
color="secondary"
2829
startIcon={<GitHubIcon sx={{ mr: 0.5 }} />}
2930
href={
3031
userLanguage === 'en'

‎docs/src/modules/components/MarkdownElement.js‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ const Root = styled('div')(
2424
lineHeight: 1.5, // Developers like when the code is dense.
2525
margin: theme.spacing(2, 'auto'),
2626
padding: theme.spacing(2),
27-
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.
28-
color: '#f8f8f2',
27+
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.
28+
color: 'hsl(60, 30%, 96%)',
2929
colorScheme: 'dark',
3030
borderRadius: `var(--muidocs-shape-borderRadius, ${
3131
theme.shape?.borderRadius ?? lightTheme.shape.borderRadius
@@ -344,7 +344,7 @@ const Root = styled('div')(
344344
},
345345
},
346346
'&.MuiCallout-info': {
347-
color: `var(--muidocs-palette-primary-900, ${lightTheme.palette.primary[900]})`,
347+
color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
348348
backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`,
349349
borderColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[100]})`,
350350
'& strong': {
@@ -375,7 +375,7 @@ const Root = styled('div')(
375375
'&.MuiCallout-warning': {
376376
color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
377377
backgroundColor: alpha(lightTheme.palette.warning[50], 0.5),
378-
borderColor: `var(--muidocs-palette-warning-200, ${lightTheme.palette.warning[200]})`,
378+
borderColor: alpha(lightTheme.palette.warning[700], 0.15),
379379
'& strong': {
380380
color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
381381
},
@@ -540,7 +540,7 @@ const Root = styled('div')(
540540
fontWeight: 500,
541541
borderRadius: 6,
542542
border: 'none',
543-
backgroundColor: '#0F1924', // using the code block one-off background color (defined in line 23)
543+
backgroundColor: 'hsl(210, 35%, 9%)', // using the code block one-off background color (defined in line 23)
544544
color: '#FFF',
545545
transition: theme.transitions.create(['background', 'borderColor', 'display'], {
546546
duration: theme.transitions.duration.shortest,
@@ -721,8 +721,8 @@ const Root = styled('div')(
721721
},
722722
'&.MuiCallout-error': {
723723
color: `var(--muidocs-palette-error-50, ${darkTheme.palette.error[50]})`,
724-
backgroundColor: alpha(darkTheme.palette.error[700], 0.2),
725-
borderColor: alpha(darkTheme.palette.error[600], 0.3),
724+
backgroundColor: alpha(darkTheme.palette.error[700], 0.15),
725+
borderColor: alpha(darkTheme.palette.error[400], 0.1),
726726
'& strong': {
727727
color: `var(--muidocs-palette-error-300, ${darkTheme.palette.error[300]})`,
728728
},
@@ -734,9 +734,9 @@ const Root = styled('div')(
734734
},
735735
},
736736
'&.MuiCallout-info': {
737-
color: `var(--muidocs-palette-primary-50, ${darkTheme.palette.primary[50]})`,
738-
backgroundColor: alpha(darkTheme.palette.grey[700], 0.2),
739-
borderColor: `var(--muidocs-palette-grey-800, ${darkTheme.palette.grey[800]})`,
737+
color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`,
738+
backgroundColor: alpha(darkTheme.palette.grey[700], 0.15),
739+
borderColor: alpha(darkTheme.palette.grey[800], 0.5),
740740
'& strong': {
741741
color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`,
742742
},
@@ -746,8 +746,8 @@ const Root = styled('div')(
746746
},
747747
'&.MuiCallout-success': {
748748
color: `var(--muidocs-palette-success-50, ${darkTheme.palette.success[50]})`,
749-
backgroundColor: alpha(darkTheme.palette.success[700], 0.15),
750-
borderColor: alpha(lightTheme.palette.success[600], 0.3),
749+
backgroundColor: alpha(darkTheme.palette.success[700], 0.12),
750+
borderColor: alpha(lightTheme.palette.success[400], 0.1),
751751
'& strong': {
752752
color: `var(--muidocs-palette-success-200, ${darkTheme.palette.success[200]})`,
753753
},
@@ -760,8 +760,8 @@ const Root = styled('div')(
760760
},
761761
'&.MuiCallout-warning': {
762762
color: `var(--muidocs-palette-warning-50, ${darkTheme.palette.warning[50]})`,
763-
backgroundColor: alpha(darkTheme.palette.warning[700], 0.15),
764-
borderColor: alpha(darkTheme.palette.warning[600], 0.3),
763+
backgroundColor: alpha(darkTheme.palette.warning[700], 0.12),
764+
borderColor: alpha(darkTheme.palette.warning[400], 0.1),
765765
'& strong': {
766766
color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`,
767767
},

‎docs/src/modules/components/ThemeViewer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ export default function ThemeViewer({
205205
sx={{
206206
color: '#FFF',
207207
p: 1.5,
208-
bgcolor: '#0F1924', // one-off code container color
208+
bgcolor: 'hsl(210, 35%, 9%)', // one-off code container color
209209
borderRadius: 3,
210210
border: `1px solid ${blueDark[700]}`,
211211
}}

0 commit comments

Comments
 (0)