Skip to content

fix(docs): improve ArgsTable border contrast in dark mode #34921

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
leno23 wants to merge 1 commit into from
Closed

fix(docs): improve ArgsTable border contrast in dark mode #34921

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
268 changes: 137 additions & 131 deletions code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,158 +22,164 @@ export const TableWrapper = styled.table<{
inAddonPanel?: boolean;
inTabPanel?: boolean;
isLoading?: boolean;
}>(({ theme, compact, inAddonPanel, inTabPanel }) => ({
'&&': {
// Resets for cascading/system styles
borderSpacing: 0,
color: theme.color.defaultText,

'td, th': {
padding: 0,
border: 'none',
verticalAlign: 'top',
textOverflow: 'ellipsis',
},
// End Resets

fontSize: theme.typography.size.s2 - 1,
lineHeight: '19px',
textAlign: 'left',
width: '100%',

// Margin collapse
marginTop: inAddonPanel ? 0 : 25,
marginBottom: inAddonPanel ? 0 : 40,
}>(({ theme, compact, inAddonPanel, inTabPanel }) => {
// Dark theme uses a very low-alpha appBorderColor; bump contrast so table
// edges stay visible in docs (issue #34691).
const tableBorderColor = theme.base === 'dark' ? 'hsl(0 0% 100% / 0.2)' : theme.appBorderColor;

return {
'&&': {
// Resets for cascading/system styles
borderSpacing: 0,
color: theme.color.defaultText,

'td, th': {
padding: 0,
border: 'none',
verticalAlign: 'top',
textOverflow: 'ellipsis',
},
// End Resets

'thead th:first-of-type, td:first-of-type': {
// intentionally specify thead here
width: '25%',
},
fontSize: theme.typography.size.s2 - 1,
lineHeight: '19px',
textAlign: 'left',
width: '100%',

'th:first-of-type, td:first-of-type': {
paddingLeft: 20,
},
// Margin collapse
marginTop: inAddonPanel ? 0 : 25,
marginBottom: inAddonPanel ? 0 : 40,

'th:nth-of-type(2), td:nth-of-type(2)': {
...(compact
? null
: {
// Description column
width: '35%',
}),
},
'thead th:first-of-type, td:first-of-type': {
// intentionally specify thead here
width: '25%',
},

'td:nth-of-type(3)': {
...(compact
? null
: {
// Defaults column
width: '15%',
}),
},
'th:first-of-type, td:first-of-type': {
paddingLeft: 20,
},

'th:last-of-type, td:last-of-type': {
paddingRight: 20,
...(compact
? null
: {
// Controls column
width: '25%',
}),
},
'th:nth-of-type(2), td:nth-of-type(2)': {
...(compact
? null
: {
// Description column
width: '35%',
}),
},

th: {
color: theme.textMutedColor,
paddingTop: 10,
paddingBottom: 10,
paddingLeft: 15,
paddingRight: 15,
},
'td:nth-of-type(3)': {
...(compact
? null
: {
// Defaults column
width: '15%',
}),
},

td: {
paddingTop: '10px',
paddingBottom: '10px',
'th:last-of-type, td:last-of-type': {
paddingRight: 20,
...(compact
? null
: {
// Controls column
width: '25%',
}),
},

'&:not(:first-of-type)': {
th: {
color: theme.textMutedColor,
paddingTop: 10,
paddingBottom: 10,
paddingLeft: 15,
paddingRight: 15,
},

'&:last-of-type': {
paddingRight: 20,
},
},
td: {
paddingTop: '10px',
paddingBottom: '10px',

'&:not(:first-of-type)': {
paddingLeft: 15,
paddingRight: 15,
},

// Makes border alignment consistent w/other DocBlocks
marginInline: inAddonPanel || inTabPanel ? 0 : 1,
paddingInline: inTabPanel ? 3 : 0,

tbody: {
// Safari doesn't love shadows on tbody so we need to use a shadow filter. In order to do this,
// the table cells all need to be solid so they have a background color applied.
// I wasn't sure what kinds of content go in these tables so I was extra specific with selectors
// to avoid unexpected surprises.
...(inAddonPanel
? null
: {
filter:
theme.base === 'light'
? `drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.10))`
: `drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.20))`,
}),

'> tr > *': {
// For filter to work properly, the table cells all need to be opaque.
background: theme.background.content,
borderTop: `1px solid ${theme.appBorderColor}`,
'&:last-of-type': {
paddingRight: 20,
},
},

...(inAddonPanel
? null
: {
// This works and I don't know why. :)
'> tr:first-of-type > *': {
borderBlockStart: `1px solid ${theme.appBorderColor}`,
},
'> tr:last-of-type > *': {
borderBlockEnd: `1px solid ${theme.appBorderColor}`,
},
'> tr > *:first-of-type': {
borderInlineStart: `1px solid ${theme.appBorderColor}`,
},
'> tr > *:last-of-type': {
borderInlineEnd: `1px solid ${theme.appBorderColor}`,
},

// Thank you, Safari, for making me write code like this.
'> tr:first-of-type > td:first-of-type': {
borderTopLeftRadius: theme.appBorderRadius,
},
'> tr:first-of-type > td:last-of-type': {
borderTopRightRadius: theme.appBorderRadius,
},
'> tr:last-of-type > td:first-of-type': {
borderBottomLeftRadius: theme.appBorderRadius,
},
'> tr:last-of-type > td:last-of-type': {
borderBottomRightRadius: theme.appBorderRadius,
},
}),
},
// High contrast mode: ensure borders are visible with system colors
'@media (forced-colors: active)': {
// Makes border alignment consistent w/other DocBlocks
marginInline: inAddonPanel || inTabPanel ? 0 : 1,
paddingInline: inTabPanel ? 3 : 0,

tbody: {
filter: 'none',
// Safari doesn't love shadows on tbody so we need to use a shadow filter. In order to do this,
// the table cells all need to be solid so they have a background color applied.
// I wasn't sure what kinds of content go in these tables so I was extra specific with selectors
// to avoid unexpected surprises.
...(inAddonPanel
? null
: {
filter:
theme.base === 'light'
? `drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.10))`
: `drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.20))`,
}),

'> tr > *': {
borderColor: 'CanvasText',
// For filter to work properly, the table cells all need to be opaque.
background: theme.background.content,
borderTop: `1px solid ${tableBorderColor}`,
},

...(inAddonPanel
? null
: {
// This works and I don't know why. :)
'> tr:first-of-type > *': {
borderBlockStart: `1px solid ${tableBorderColor}`,
},
'> tr:last-of-type > *': {
borderBlockEnd: `1px solid ${tableBorderColor}`,
},
'> tr > *:first-of-type': {
borderInlineStart: `1px solid ${tableBorderColor}`,
},
'> tr > *:last-of-type': {
borderInlineEnd: `1px solid ${tableBorderColor}`,
},

// Thank you, Safari, for making me write code like this.
'> tr:first-of-type > td:first-of-type': {
borderTopLeftRadius: theme.appBorderRadius,
},
'> tr:first-of-type > td:last-of-type': {
borderTopRightRadius: theme.appBorderRadius,
},
'> tr:last-of-type > td:first-of-type': {
borderBottomLeftRadius: theme.appBorderRadius,
},
'> tr:last-of-type > td:last-of-type': {
borderBottomRightRadius: theme.appBorderRadius,
},
}),
},
// High contrast mode: ensure borders are visible with system colors
'@media (forced-colors: active)': {
tbody: {
filter: 'none',

'> tr > *': {
borderColor: 'CanvasText',
},
},
},
},

// End awesome table styling
},
}));
// End awesome table styling
},
};
});

const TablePositionWrapper = styled.div({
position: 'relative',
Expand Down