diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx index c4ffeb0d8c2b..ce1365487acf 100644 --- a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx +++ b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx @@ -21,7 +21,6 @@ export const TableWrapper = styled.table<{ ({ theme, compact, inAddonPanel }) => ({ '&&': { // Resets for cascading/system styles - borderCollapse: 'collapse', borderSpacing: 0, color: theme.color.defaultText, @@ -132,61 +131,61 @@ export const TableWrapper = styled.table<{ tbody: { // slightly different than the other DocBlock shadows to account for table styling gymnastics - boxShadow: - !inAddonPanel && - (theme.base === 'light' - ? `rgba(0, 0, 0, 0.10) 0 1px 3px 1px, - ${transparentize(0.035, theme.appBorderColor)} 0 0 0 1px` - : `rgba(0, 0, 0, 0.20) 0 2px 5px 1px, - ${opacify(0.05, theme.appBorderColor)} 0 0 0 1px`), - borderRadius: theme.appBorderRadius, - - // for safari only - // CSS hack courtesy of https://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome - '@media not all and (min-resolution:.001dpcm)': { - '@supports (-webkit-appearance:none)': { - borderWidth: 1, - borderStyle: 'solid', - ...(inAddonPanel && { - borderColor: 'transparent', - }), - - ...(!inAddonPanel && { - borderColor: + ...(inAddonPanel + ? null + : { + filter: theme.base === 'light' - ? transparentize(0.035, theme.appBorderColor) - : opacify(0.05, theme.appBorderColor), + ? `drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.10))` + : `drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.20))`, }), - }, + + '> tr > *': { + background: theme.background.content, + borderTop: `1px solid ${theme.appBorderColor}`, }, - tr: { - background: 'transparent', - overflow: 'hidden', - ...(inAddonPanel - ? { - borderTopWidth: 1, - borderTopStyle: 'solid', - borderTopColor: - theme.base === 'light' - ? darken(0.1, theme.background.content) - : lighten(0.05, theme.background.content), - } - : { - [`&:not(:first-child)`]: { - borderTopWidth: 1, - borderTopStyle: 'solid', - borderTopColor: - theme.base === 'light' - ? darken(0.1, theme.background.content) - : lighten(0.05, theme.background.content), - }, - }), + '> 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}`, }, - td: { - background: theme.background.content, + '> 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, + }, + + tr: { + // borderTopWidth: 1, + // borderTopStyle: 'solid', + // borderTopColor: + // theme.base === 'light' + // ? darken(0.1, theme.background.content) + // : lighten(0.05, theme.background.content), + // overflow: 'hidden', + // ['&:first-child']: { + // borderTop: 'none', + // } }, + // td: { + // border: '1px solid red', + // }, }, // End finicky table styling }, diff --git a/code/ui/blocks/src/components/DocsPage.tsx b/code/ui/blocks/src/components/DocsPage.tsx index d7dded1379a4..fbd9236fd2b9 100644 --- a/code/ui/blocks/src/components/DocsPage.tsx +++ b/code/ui/blocks/src/components/DocsPage.tsx @@ -32,7 +32,7 @@ export const Title = styled.h1(withReset, ({ theme }) => ({ [`@media (min-width: ${breakpoint}px)`]: { fontSize: theme.typography.size.l1, lineHeight: '36px', - marginBottom: '.5rem', // 8px + marginBottom: '16px', }, })); diff --git a/code/ui/blocks/src/components/Title.tsx b/code/ui/blocks/src/components/Title.tsx index e08e72c51308..39a276159941 100644 --- a/code/ui/blocks/src/components/Title.tsx +++ b/code/ui/blocks/src/components/Title.tsx @@ -13,6 +13,6 @@ export const Title = styled.h1(withReset, ({ theme }: { theme: Theme }) => ({ [`@media (min-width: ${breakpoint}px)`]: { fontSize: theme.typography.size.l1, lineHeight: '36px', - marginBottom: '.5rem', // 8px + marginBottom: '16px', }, }));