[docs] Increase the contrast of the demos

[oliviertassinari]

Use a white background for the demos as much as possible:

• Increase the contrast.
• Less opinionated background color, closer to the most common cases.

Before
https://material-ui.com/components/text-fields/#textfield

After
https://deploy-preview-18396--material-ui.netlify.com/components/text-fields/#textfield

The border vs box-shadow diff is related to #15728

[mui-pr-bot]

Details of bundle changes.

Comparing: 58f0d04...345dfc1

bundle	Size Change	Size	Gzip Change	Gzip
docs.main	▲ +209 B (+0.03% )	609 kB	▲ +77 B (+0.04% )	194 kB
@material-ui/core	▲ +44 B (+0.01% )	351 kB	▲ +27 B (+0.03% )	96.1 kB
@material-ui/core[umd]	▲ +44 B (+0.01% )	310 kB	▲ +8 B (+0.01% )	89.4 kB
Switch	▲ +44 B (+0.06% )	79.7 kB	▲ +8 B (+0.03% )	24.8 kB
@material-ui/lab	--	172 kB	--	51.9 kB
@material-ui/styles	--	50.8 kB	--	15.4 kB
@material-ui/system	--	14.8 kB	--	4.06 kB
AppBar	--	62.4 kB	--	19.5 kB
Autocomplete	--	126 kB	--	40 kB
Avatar	--	61.4 kB	--	19.3 kB
Backdrop	--	66.4 kB	--	20.5 kB
Badge	--	64 kB	--	19.8 kB
BottomNavigation	--	61 kB	--	19.1 kB
BottomNavigationAction	--	74 kB	--	23.4 kB
Box	--	69.4 kB	--	21 kB
Breadcrumbs	--	66.6 kB	--	20.9 kB
Button	--	78 kB	--	23.8 kB
ButtonBase	--	72.5 kB	--	22.7 kB
ButtonGroup	--	80.6 kB	--	24.7 kB
Card	--	61.3 kB	--	19.2 kB
CardActionArea	--	73.6 kB	--	23.2 kB
CardActions	--	60.7 kB	--	19 kB
CardContent	--	60.6 kB	--	18.9 kB
CardHeader	--	63.7 kB	--	20 kB
CardMedia	--	61 kB	--	19.1 kB
Checkbox	--	80.4 kB	--	25.2 kB
Chip	--	81.1 kB	--	24.8 kB
CircularProgress	--	62.7 kB	--	19.7 kB
ClickAwayListener	--	3.87 kB	--	1.56 kB
Collapse	--	66.5 kB	--	20.5 kB
colorManipulator	--	3.83 kB	--	1.52 kB
Container	--	61.8 kB	--	19.3 kB
CssBaseline	--	56.2 kB	--	17.6 kB
Dialog	--	81.2 kB	--	25.2 kB
DialogActions	--	60.7 kB	--	19 kB
DialogContent	--	60.8 kB	--	19.1 kB
DialogContentText	--	62.7 kB	--	19.7 kB
DialogTitle	--	62.9 kB	--	19.8 kB
Divider	--	61.2 kB	--	19.2 kB
docs.landing	--	55.5 kB	--	14.4 kB
Drawer	--	82.9 kB	--	25.7 kB
ExpansionPanel	--	69.9 kB	--	21.8 kB
ExpansionPanelActions	--	60.7 kB	--	19 kB
ExpansionPanelDetails	--	60.6 kB	--	18.9 kB
ExpansionPanelSummary	--	76.7 kB	--	24.1 kB
Fab	--	75.4 kB	--	23.4 kB
Fade	--	22.2 kB	--	7.66 kB
FilledInput	--	72.2 kB	--	22.3 kB
FormControl	--	63 kB	--	19.5 kB
FormControlLabel	--	64.1 kB	--	20.1 kB
FormGroup	--	60.6 kB	--	19 kB
FormHelperText	--	61.9 kB	--	19.4 kB
FormLabel	--	62.1 kB	--	19.2 kB
Grid	--	63.7 kB	--	20 kB
GridList	--	61.1 kB	--	19.2 kB
GridListTile	--	62.3 kB	--	19.5 kB
GridListTileBar	--	61.8 kB	--	19.4 kB
Grow	--	22.8 kB	--	7.79 kB
Hidden	--	64.5 kB	--	20.2 kB
Icon	--	61.4 kB	--	19.2 kB
IconButton	--	74.7 kB	--	23.2 kB
Input	--	71.1 kB	--	22.1 kB
InputAdornment	--	63.7 kB	--	20.1 kB
InputBase	--	69.2 kB	--	21.7 kB
InputLabel	--	63.9 kB	--	19.9 kB
LinearProgress	--	64 kB	--	19.9 kB
Link	--	65.2 kB	--	20.7 kB
List	--	61 kB	--	18.9 kB
ListItem	--	75.7 kB	--	23.6 kB
ListItemAvatar	--	60.7 kB	--	19 kB
ListItemIcon	--	60.8 kB	--	19 kB
ListItemSecondaryAction	--	60.6 kB	--	19 kB
ListItemText	--	63.6 kB	--	20 kB
ListSubheader	--	61.4 kB	--	19.3 kB
Menu	--	86.9 kB	--	27.3 kB
MenuItem	--	76.7 kB	--	23.9 kB
MenuList	--	64.6 kB	--	20.1 kB
MobileStepper	--	66.3 kB	--	20.7 kB
Modal	--	14.2 kB	--	4.98 kB
NativeSelect	--	75.4 kB	--	23.7 kB
NoSsr	--	2.19 kB	--	1.03 kB
OutlinedInput	--	72.6 kB	--	22.5 kB
Paper	--	60.9 kB	--	18.9 kB
Popover	--	81.2 kB	--	25.1 kB
Popper	--	28.6 kB	--	10.2 kB
Portal	--	2.87 kB	--	1.29 kB
Radio	--	81.2 kB	--	25.5 kB
RadioGroup	--	61.8 kB	--	19.3 kB
Rating	--	68.6 kB	--	22 kB
RootRef	--	4.43 kB	--	1.67 kB
Select	--	113 kB	--	33.5 kB
Skeleton	--	61.2 kB	--	19.3 kB
Slide	--	24.3 kB	--	8.27 kB
Slider	--	74.2 kB	--	23.4 kB
Snackbar	--	75.7 kB	--	23.6 kB
SnackbarContent	--	64.3 kB	--	20.2 kB
SpeedDial	--	84.6 kB	--	26.6 kB
SpeedDialAction	--	115 kB	--	36.4 kB
SpeedDialIcon	--	63.2 kB	--	19.8 kB
Step	--	61.2 kB	--	19.2 kB
StepButton	--	80.9 kB	--	25.4 kB
StepConnector	--	61.3 kB	--	19.3 kB
StepContent	--	67.6 kB	--	21.1 kB
StepIcon	--	63.3 kB	--	19.7 kB
StepLabel	--	67.2 kB	--	21.1 kB
Stepper	--	63.4 kB	--	19.9 kB
styles/createMuiTheme	--	15.4 kB	--	5.43 kB
SvgIcon	--	61.7 kB	--	19.2 kB
SwipeableDrawer	--	90.3 kB	--	28.1 kB
Tab	--	74.9 kB	--	23.7 kB
Table	--	61.2 kB	--	19.2 kB
TableBody	--	60.7 kB	--	19 kB
TableCell	--	62.7 kB	--	19.7 kB
TableFooter	--	60.7 kB	--	19 kB
TableHead	--	60.7 kB	--	19 kB
TablePagination	--	139 kB	--	40.7 kB
TableRow	--	61.1 kB	--	19.1 kB
TableSortLabel	--	75.9 kB	--	24 kB
Tabs	--	84 kB	--	26.8 kB
TextareaAutosize	--	5.06 kB	--	2.11 kB
TextField	--	122 kB	--	35.5 kB
ToggleButton	--	74.7 kB	--	23.6 kB
ToggleButtonGroup	--	61.8 kB	--	19.4 kB
Toolbar	--	60.9 kB	--	19.1 kB
Tooltip	--	99.1 kB	--	31.4 kB
TreeItem	--	72.2 kB	--	22.7 kB
TreeView	--	65 kB	--	20.3 kB
Typography	--	62.3 kB	--	19.4 kB
useAutocomplete	--	12.2 kB	--	4.5 kB
useMediaQuery	--	2.49 kB	--	1.05 kB
Zoom	--	22.3 kB	--	7.67 kB

Generated by 🚫 dangerJS against 345dfc1

[mbrookes]

Sorry to say, but I'm not convinced in its current form:

1. The demos no longer "pop" from the page.
2. They are inconsistent. Some are grey, some are outlined. The docs should follow a consistent set of styles to make them easy to follow.
3. The fact that there are so many exceptions is a red flag.

[mbrookes]

🎉

[oliviertassinari]

@mbrookes Thanks for the review. What do you think if I keep iterating with goal to have all the demos with a white background?

The fact that there are so many exceptions is a red flag.

I believe that in the current form, we always end up with a white background. But I can explore how to make the border more consistent.

The demos no longer "pop" from the page.

I can explore that too.

[mbrookes]

What do you think if I keep iteration on moving more demos to the white background version?

How do you plan to differentiate the demo from the page? The border doesn't seem sufficient to me.

Could we perhaps keep the border, but make the background a shade of grey that is lighter than it is currently?

updated, I have worked on the "consistency" and "pop" aspects

[oliviertassinari]

After this change, if we visually compare the filled background between our implementation and material.io, we can see something is off:

material.io

material-ui.com

[mbrookes]

Except that you're comparing it to the MCW implementation, which, like several other components, doesn't follow the spec. (See also: #12889 (comment) 😄)

The filled text field matches:

(And most other examples)

But not:

(Which unhelpfully doesn't provide RGBA values to use.)

Perhaps the spec has changed slightly since the last revision of the component? There's a record of contrast ratio in the discussion linked above, so it would be easy to tell.

[oliviertassinari]

@mbrookes Every time I ask Una about a specification question, she sends me toward material-components-web and not the material.io website. I'm confused.

(I start more and more to believe that our users are looking for a UI that looks like the Google products that are used to. I would be cautious not to upgrade to match a new spec until at least a few Google products do)

[oliviertassinari]

@mbrookes I think that it's really important that we display the elements on a white background as often as possible. While this change might introduce consistency. I still think that it puts us in a better place, overall. We likely want to use bg: true when displaying an element in a fullscreen context. For instance, when we display an iframe, an app bar or mobile tabs. Or when displaying an elevated Paper component, to improve the box-shadow contrast (still full screen context).

bg: false is better suited for displaying small individual elements.