From 053840ecd4958efa2b42d55b34c4da5871a91a87 Mon Sep 17 00:00:00 2001 From: wuyangfan <1102042793@qq.com> Date: Tue, 26 May 2026 22:54:24 +0800 Subject: [PATCH] fix(docs): improve ArgsTable border contrast in dark mode Docs ArgsTable borders used theme.appBorderColor, which is only 10% white alpha in dark mode and was hard to see. Use a stronger table border token locally so row/column edges stay visible. Fixes #34691 Co-authored-by: Cursor --- .../blocks/components/ArgsTable/ArgsTable.tsx | 268 +++++++++--------- 1 file changed, 137 insertions(+), 131 deletions(-) diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx index 9dd2ce45e630..b244f5da2e17 100644 --- a/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx +++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx @@ -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',