Skip to content

Commit 44cdadd

Browse files
silviuaavramsilviuaavram
committed
code review
1 parent 05ce878 commit 44cdadd

3 files changed

Lines changed: 155 additions & 31 deletions

File tree

‎docs/data/material/customization/palette/HighContrastTokens.js‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import Box from '@mui/material/Box';
2+
import Typography from '@mui/material/Typography';
3+
import { styled } from '@mui/material/styles';
4+
5+
const tokens = [
6+
{
7+
token: 'disabled',
8+
color: 'GrayText',
9+
description: 'Color for disabled elements',
10+
},
11+
{ token: 'error', color: 'ActiveText', description: 'Color for error states' },
12+
{
13+
token: 'selectedBackground',
14+
color: 'SelectedItem',
15+
description: 'Background color for selected items',
16+
},
17+
{
18+
token: 'selectedText',
19+
color: 'SelectedItemText',
20+
description: 'Text color on selected items',
21+
},
22+
{
23+
token: 'activeBackground',
24+
color: 'Highlight',
25+
description: 'Background color for active or toggled controls',
26+
},
27+
{
28+
token: 'activeText',
29+
color: 'HighlightText',
30+
description: 'Text color on active or toggled controls',
31+
},
32+
{
33+
token: 'buttonBorder',
34+
color: 'ButtonBorder',
35+
description: 'Border color for interactive controls',
36+
},
37+
{
38+
token: 'buttonText',
39+
color: 'ButtonText',
40+
description: 'Text and icon color on buttons',
41+
},
42+
{
43+
token: 'canvas',
44+
color: 'Canvas',
45+
description: 'Background color for the page or canvas',
46+
},
47+
];
48+
49+
const Table = styled('table')(({ theme }) => ({
50+
width: '100%',
51+
borderCollapse: 'collapse',
52+
...theme.typography.body2,
53+
}));
54+
55+
const Th = styled('th')(({ theme }) => ({
56+
textAlign: 'left',
57+
padding: theme.spacing(1, 2),
58+
borderBottom: `2px solid ${theme.palette.divider}`,
59+
whiteSpace: 'nowrap',
60+
}));
61+
62+
const Td = styled('td')(({ theme }) => ({
63+
padding: theme.spacing(1, 2),
64+
borderBottom: `1px solid ${theme.palette.divider}`,
65+
verticalAlign: 'middle',
66+
}));
67+
68+
const ColorSwatch = styled('div')(({ theme }) => ({
69+
display: 'inline-block',
70+
width: theme.spacing(3),
71+
height: theme.spacing(3),
72+
marginRight: theme.spacing(1),
73+
borderRadius: theme.shape.borderRadius,
74+
outline: '1px solid ButtonBorder',
75+
verticalAlign: 'middle',
76+
}));
77+
78+
export default function HighContrastTokens() {
79+
return (
80+
<Box sx={{ width: '100%', overflowX: 'auto' }}>
81+
<Table>
82+
<thead>
83+
<tr>
84+
<Th>Token</Th>
85+
<Th>Default</Th>
86+
<Th>Description</Th>
87+
</tr>
88+
</thead>
89+
<tbody>
90+
{tokens.map(({ token, color, description }) => (
91+
<tr key={token}>
92+
<Td>
93+
<code>{token}</code>
94+
</Td>
95+
<Td>
96+
<ColorSwatch style={{ backgroundColor: color }} />
97+
<Typography component="code" variant="body2">
98+
{color}
99+
</Typography>
100+
</Td>
101+
<Td sx={{ color: 'text.secondary' }}>{description}</Td>
102+
</tr>
103+
))}
104+
</tbody>
105+
</Table>
106+
</Box>
107+
);
108+
}

‎docs/data/material/customization/palette/palette.md‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -325,32 +325,22 @@ const theme = enhanceHighContrast(createTheme());
325325
```
326326

327327
By default, it uses the [CSS system color keywords](https://www.w3.org/TR/css-color-4/#css-system-colors) (`Highlight`, `HighlightText`, `ButtonBorder`, etc.).
328-
You can override individual tokens to match your brand or design requirements:
328+
You can override individual tokens with other [system colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/system-color) to match your brand or design requirements.
329+
When overriding paired tokens, choose values that the browser guarantees to contrast with each other — for example `SelectedItem` is always paired with `SelectedItemText`, and `Highlight` with `HighlightText`:
329330

330331
```js
331332
import { createTheme, enhanceHighContrast } from '@mui/material/styles';
332333

333334
const theme = enhanceHighContrast(createTheme(), {
334-
// Use ButtonText instead of GrayText for disabled elements.
335-
disabled: 'ButtonText',
336-
// Use a custom active background color.
337-
activeBackground: 'Highlight',
335+
// Use the system's selection colors for active or toggled controls.
336+
activeBackground: 'SelectedItem',
337+
activeText: 'SelectedItemText',
338338
});
339339
```
340340

341-
The following tokens are available:
342-
343-
| Token | Default | Description |
344-
| :------------------- | :----------------- | :---------------------------------------------- |
345-
| `disabled` | `GrayText` | Color for disabled elements |
346-
| `error` | `ActiveText` | Color for error states |
347-
| `selectedBackground` | `SelectedItem` | Background color for selected items |
348-
| `selectedText` | `SelectedItemText` | Text color on selected items |
349-
| `activeBackground` | `Highlight` | Background color for active or toggled controls |
350-
| `activeText` | `HighlightText` | Text color on active or toggled controls |
351-
| `buttonBorder` | `ButtonBorder` | Border color for interactive controls |
352-
| `buttonText` | `ButtonText` | Text and icon color on buttons |
353-
| `canvas` | `Canvas` | Background color for the page or canvas |
341+
The following tokens are available, showing how your browser resolves each system color keyword in the current environment:
342+
343+
{{"demo": "HighContrastTokens.js", "bg": "inline", "hideToolbar": true}}
354344

355345
## Picking colors
356346

‎packages/mui-material/src/styles/enhanceHighContrast.ts‎

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,50 @@ import toggleButtonClasses from '../ToggleButton/toggleButtonClasses';
1616
import { Theme } from './createTheme';
1717

1818
export interface HighContrastTokens {
19-
/** Color for disabled elements. Default: `'GrayText'` */
19+
/**
20+
* Color for disabled elements.
21+
* @default 'GrayText'
22+
*/
2023
disabled?: string | undefined;
21-
/** Color for error states. Default: `'ActiveText'` */
24+
/**
25+
* Color for error states.
26+
* @default 'ActiveText'
27+
*/
2228
error?: string | undefined;
23-
/** Background color for selected items. Default: `'SelectedItem'` */
29+
/**
30+
* Background color for selected items.
31+
* @default 'SelectedItem'
32+
*/
2433
selectedBackground?: string | undefined;
25-
/** Text color on selected items. Default: `'SelectedItemText'` */
34+
/**
35+
* Text color on selected items.
36+
* @default 'SelectedItemText'
37+
*/
2638
selectedText?: string | undefined;
27-
/** Background color for active/toggled controls. Default: `'Highlight'` */
39+
/**
40+
* Background color for active/toggled controls.
41+
* @default 'Highlight'
42+
*/
2843
activeBackground?: string | undefined;
29-
/** Text color on active/toggled controls. Default: `'HighlightText'` */
44+
/**
45+
* Text color on active/toggled controls.
46+
* @default 'HighlightText'
47+
*/
3048
activeText?: string | undefined;
31-
/** Border color for interactive controls. Default: `'ButtonBorder'` */
49+
/**
50+
* Border color for interactive controls.
51+
* @default 'ButtonBorder'
52+
*/
3253
buttonBorder?: string | undefined;
33-
/** Text/icon color on buttons. Default: `'ButtonText'` */
54+
/**
55+
* Text/icon color on buttons.
56+
* @default 'ButtonText'
57+
*/
3458
buttonText?: string | undefined;
35-
/** Background color for the page/canvas. Default: `'Canvas'` */
59+
/**
60+
* Background color for the page/canvas.
61+
* @default 'Canvas'
62+
*/
3663
canvas?: string | undefined;
3764
}
3865

@@ -54,10 +81,9 @@ const HCM = '@media (forced-colors: active)';
5481
/**
5582
* Enhances a theme with styles for Windows High Contrast Mode (forced-colors).
5683
*
57-
* Follows the same signature as `responsiveFontSizes`: accepts a fully-created
58-
* theme, merges in HCM component overrides using arrays so that Emotion emits
59-
* each entry as a separate CSS rule and the browser cascade (rather than JS
60-
* object merging) resolves specificity.
84+
* Accepts a fully-created theme, merges in HCM component overrides using arrays
85+
* so that Emotion emits each entry as a separate CSS rule and the browser
86+
* cascade (rather than JS object merging) resolves specificity.
6187
*
6288
* @param themeInput - The theme to enhance.
6389
* @param tokens - Override any of the default system color tokens.

0 commit comments

Comments
 (0)