From 08e3d898040f4c2dd625fb34b5e4c08511788aa6 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Wed, 15 Feb 2023 13:27:09 +0800 Subject: [PATCH 01/13] feat: add initial Table theme --- react/src/theme/components/Table.ts | 28 ++++++++++++++++++++++++++++ react/src/theme/components/index.ts | 2 ++ 2 files changed, 30 insertions(+) create mode 100644 react/src/theme/components/Table.ts diff --git a/react/src/theme/components/Table.ts b/react/src/theme/components/Table.ts new file mode 100644 index 00000000..976b1d4e --- /dev/null +++ b/react/src/theme/components/Table.ts @@ -0,0 +1,28 @@ +import { tableAnatomy as parts } from '@chakra-ui/anatomy' +import { createMultiStyleConfigHelpers } from '@chakra-ui/react' + +const { defineMultiStyleConfig, definePartsStyle } = + createMultiStyleConfigHelpers(parts.keys) + +const sizes = { + sm: definePartsStyle({ + th: { + py: '0.5rem', + px: '0.5rem', + }, + td: { + px: { base: 0, md: '0.5rem' }, + py: { base: '0.75rem', md: '0.375rem' }, + }, + }), +} + +const variants = {} + +export const Table = defineMultiStyleConfig({ + variants, + defaultProps: { + colorScheme: 'main', + }, + sizes, +}) diff --git a/react/src/theme/components/index.ts b/react/src/theme/components/index.ts index f31432f8..d2098481 100644 --- a/react/src/theme/components/index.ts +++ b/react/src/theme/components/index.ts @@ -31,6 +31,7 @@ import { Searchbar } from './Searchbar' import { SingleCountryPhoneNumberInput } from './SingleCountryPhoneNumberInput' import { SingleSelect } from './SingleSelect' import { Switch } from './Switch' +import { Table } from './Table' import { Tabs } from './Tabs' import { Tag } from './Tag' import { TagInput } from './TagInput' @@ -74,6 +75,7 @@ export const components = { SingleCountryPhoneNumberInput, SingleSelect, Switch, + Table, Tabs, Tag, TagInput, From 7d50f8cdaa73cbff6b6319533c8f3d26c7616d89 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Wed, 15 Feb 2023 14:01:15 +0800 Subject: [PATCH 02/13] feat: add initial Th styles that account for interactivity --- react/src/Table/Table.stories.tsx | 63 +++++++++++++++++++ react/src/Table/Th.tsx | 19 ++++++ .../src/Table/utils/omitInteractivePseudos.ts | 36 +++++++++++ react/src/theme/components/Table.ts | 56 ++++++++++++++++- react/src/theme/layerStyles.ts | 20 ++++-- 5 files changed, 187 insertions(+), 7 deletions(-) create mode 100644 react/src/Table/Table.stories.tsx create mode 100644 react/src/Table/Th.tsx create mode 100644 react/src/Table/utils/omitInteractivePseudos.ts diff --git a/react/src/Table/Table.stories.tsx b/react/src/Table/Table.stories.tsx new file mode 100644 index 00000000..147ffcd6 --- /dev/null +++ b/react/src/Table/Table.stories.tsx @@ -0,0 +1,63 @@ +import { + Table, + TableCaption, + TableContainer, + TableProps, + Tbody, + Td, + Tfoot, + Thead, + Tr, +} from '@chakra-ui/react' +import { Meta, StoryFn } from '@storybook/react' + +import { Th } from './Th' + +export default { + title: 'Components/Table', + component: Table, + decorators: [], + tags: ['autodocs'], +} as Meta + +const Template: StoryFn = (args) => { + return ( + + + Imperial to metric conversion factors + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
To convertintomultiply by
inchesmillimetres (mm)25.4
feetcentimetres (cm)30.48
yardsmetres (m)0.91444
To convertintomultiply by
+ + ) +} +export const Default = Template.bind({}) diff --git a/react/src/Table/Th.tsx b/react/src/Table/Th.tsx new file mode 100644 index 00000000..3b3f315b --- /dev/null +++ b/react/src/Table/Th.tsx @@ -0,0 +1,19 @@ +import { TableColumnHeaderProps, useTableStyles } from '@chakra-ui/react' +import { chakra, forwardRef, HTMLChakraProps } from '@chakra-ui/system' + +import { omitInteractivePseudos } from './utils/omitInteractivePseudos' + +export const Th = forwardRef( + ({ isNumeric, ...props }, ref) => { + const styles = useTableStyles() + const thStyles = omitInteractivePseudos(props, styles.th) + return ( + + ) + }, +) diff --git a/react/src/Table/utils/omitInteractivePseudos.ts b/react/src/Table/utils/omitInteractivePseudos.ts new file mode 100644 index 00000000..736bbb10 --- /dev/null +++ b/react/src/Table/utils/omitInteractivePseudos.ts @@ -0,0 +1,36 @@ +import { SystemStyleObject, TableProps } from '@chakra-ui/react' +import { omit } from 'lodash' + +const isInteractive = (props: TableProps) => { + return ( + !!props.onClick || + !!props.onKeyDown || + !!props.onKeyUp || + !!props.onKeyPress || + !!props.onMouseDown || + !!props.onMouseUp || + !!props.onMouseEnter || + !!props.onMouseLeave || + !!props.onMouseMove || + !!props.onMouseOver || + !!props.onMouseOut || + !!props.onFocus || + !!props.onBlur + ) +} + +const INTERACTIVE_PSEUDO_PROPS = ['_active', '_hover', '_pressed', '_selected'] + +/** + * Function to omit interactive pseudos from a style object if the object is not + * interactive (i.e. if it does not have an `onClick`, `onKeyDown` props, etc) + */ +export function omitInteractivePseudos( + props: TableProps, + styles: Record, +): Record { + if (!isInteractive(props)) { + return omit(styles, INTERACTIVE_PSEUDO_PROPS) + } + return styles +} diff --git a/react/src/theme/components/Table.ts b/react/src/theme/components/Table.ts index 976b1d4e..1c0b1eca 100644 --- a/react/src/theme/components/Table.ts +++ b/react/src/theme/components/Table.ts @@ -1,9 +1,17 @@ import { tableAnatomy as parts } from '@chakra-ui/anatomy' -import { createMultiStyleConfigHelpers } from '@chakra-ui/react' +import { + createMultiStyleConfigHelpers, + SystemStyleObject, +} from '@chakra-ui/react' + +import { layerStyles } from '../layerStyles' +import { textStyles } from '../textStyles' const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(parts.keys) +const baseStyle = definePartsStyle({}) + const sizes = { sm: definePartsStyle({ th: { @@ -17,9 +25,53 @@ const sizes = { }), } -const variants = {} +const getSubtleVariantThStyles = (c: string): SystemStyleObject => { + const baseStyles: SystemStyleObject = { + ...textStyles['caption-1'], + textTransform: 'initial', + } + + switch (c) { + case 'main': + case 'sub': + case 'critical': + case 'neutral': + case 'warning': + case 'success': { + return { + bg: `interaction.${c}-subtle.default`, + color: `interaction.${c}.default`, + _hover: { + bg: `interaction.${c}-subtle.hover`, + }, + _active: { + bg: `interaction.${c}-subtle.active`, + }, + _focusVisible: layerStyles.focusRing.tightDefault._focusVisible, + ...baseStyles, + } + } + default: { + return { + bg: `interaction.main-subtle.default`, + ...baseStyles, + } + } + } +} + +const variantSubtle = definePartsStyle(({ colorScheme: c }) => { + return { + th: getSubtleVariantThStyles(c), + } +}) + +const variants = { + subtle: variantSubtle, +} export const Table = defineMultiStyleConfig({ + baseStyle, variants, defaultProps: { colorScheme: 'main', diff --git a/react/src/theme/layerStyles.ts b/react/src/theme/layerStyles.ts index 8c5c3aac..0e72e08b 100644 --- a/react/src/theme/layerStyles.ts +++ b/react/src/theme/layerStyles.ts @@ -1,13 +1,23 @@ +const defaultFocusRing = { + boxShadow: 'none !important', + outline: `2px solid var(--chakra-colors-utility-focus-default)`, + _dark: { + outline: `2px solid var(--chakra-colors-utility-focus-inverse)`, + }, +} + export const layerStyles = { focusRing: { default: { _focusVisible: { - boxShadow: 'none !important', - outline: `2px solid var(--chakra-colors-utility-focus-default)`, + ...defaultFocusRing, outlineOffset: '0.125rem', - _dark: { - outline: `2px solid var(--chakra-colors-utility-focus-inverse)`, - }, + }, + }, + tightDefault: { + _focusVisible: { + ...defaultFocusRing, + outlineOffset: '-2px', }, }, inverse: { From 7cfa4273f3d78d66b35d79765ace8c0bb10923a4 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Wed, 15 Feb 2023 14:35:22 +0800 Subject: [PATCH 03/13] feat: tighten omitInteractivePseudos util typing --- react/src/Table/Table.stories.tsx | 2 +- .../src/Table/utils/omitInteractivePseudos.ts | 28 +++++++++++++++---- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/react/src/Table/Table.stories.tsx b/react/src/Table/Table.stories.tsx index 147ffcd6..99b9359e 100644 --- a/react/src/Table/Table.stories.tsx +++ b/react/src/Table/Table.stories.tsx @@ -23,7 +23,7 @@ export default { const Template: StoryFn = (args) => { return ( - +
Imperial to metric conversion factors diff --git a/react/src/Table/utils/omitInteractivePseudos.ts b/react/src/Table/utils/omitInteractivePseudos.ts index 736bbb10..b134f539 100644 --- a/react/src/Table/utils/omitInteractivePseudos.ts +++ b/react/src/Table/utils/omitInteractivePseudos.ts @@ -1,7 +1,25 @@ -import { SystemStyleObject, TableProps } from '@chakra-ui/react' +import { DOMAttributes } from 'react' +import { SystemStyleObject } from '@chakra-ui/react' import { omit } from 'lodash' -const isInteractive = (props: TableProps) => { +type InteractableProps = Pick< + DOMAttributes, + | 'onClick' + | 'onKeyDown' + | 'onKeyUp' + | 'onKeyPress' + | 'onMouseDown' + | 'onMouseUp' + | 'onMouseEnter' + | 'onMouseLeave' + | 'onMouseMove' + | 'onMouseOver' + | 'onMouseOut' + | 'onFocus' + | 'onBlur' +> + +const isInteractive = (props: InteractableProps) => { return ( !!props.onClick || !!props.onKeyDown || @@ -26,9 +44,9 @@ const INTERACTIVE_PSEUDO_PROPS = ['_active', '_hover', '_pressed', '_selected'] * interactive (i.e. if it does not have an `onClick`, `onKeyDown` props, etc) */ export function omitInteractivePseudos( - props: TableProps, - styles: Record, -): Record { + props: InteractableProps, + styles: SystemStyleObject, +): SystemStyleObject { if (!isInteractive(props)) { return omit(styles, INTERACTIVE_PSEUDO_PROPS) } From 85b050e30ac9a2ff79b18c58f6030c62262d3730 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Wed, 15 Feb 2023 14:35:39 +0800 Subject: [PATCH 04/13] style(Th): add neutral colorScheme theming --- react/src/theme/components/Table.ts | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/react/src/theme/components/Table.ts b/react/src/theme/components/Table.ts index 1c0b1eca..dffc43c2 100644 --- a/react/src/theme/components/Table.ts +++ b/react/src/theme/components/Table.ts @@ -29,13 +29,13 @@ const getSubtleVariantThStyles = (c: string): SystemStyleObject => { const baseStyles: SystemStyleObject = { ...textStyles['caption-1'], textTransform: 'initial', + _focusVisible: layerStyles.focusRing.tightDefault._focusVisible, } switch (c) { case 'main': case 'sub': case 'critical': - case 'neutral': case 'warning': case 'success': { return { @@ -43,11 +43,25 @@ const getSubtleVariantThStyles = (c: string): SystemStyleObject => { color: `interaction.${c}.default`, _hover: { bg: `interaction.${c}-subtle.hover`, + cursor: 'pointer', + }, + _active: { + bg: `interaction.${c}-subtle.active`, + }, + ...baseStyles, + } + } + case 'neutral': { + return { + bg: `interaction.${c}-subtle.default`, + color: 'base.content.medium', + _hover: { + bg: `interaction.${c}-subtle.hover`, + cursor: 'pointer', }, _active: { bg: `interaction.${c}-subtle.active`, }, - _focusVisible: layerStyles.focusRing.tightDefault._focusVisible, ...baseStyles, } } @@ -74,6 +88,7 @@ export const Table = defineMultiStyleConfig({ baseStyle, variants, defaultProps: { + variant: 'subtle', colorScheme: 'main', }, sizes, From c68a5fc4adb7d2522b2ab917e5e31c6562ffbc57 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Wed, 15 Feb 2023 14:39:59 +0800 Subject: [PATCH 05/13] refactor: fixup omitInteractivePseudos again --- react/src/Table/Th.tsx | 2 +- react/src/Table/utils/omitInteractivePseudos.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/react/src/Table/Th.tsx b/react/src/Table/Th.tsx index 3b3f315b..a4b54fc7 100644 --- a/react/src/Table/Th.tsx +++ b/react/src/Table/Th.tsx @@ -1,5 +1,5 @@ import { TableColumnHeaderProps, useTableStyles } from '@chakra-ui/react' -import { chakra, forwardRef, HTMLChakraProps } from '@chakra-ui/system' +import { chakra, forwardRef } from '@chakra-ui/system' import { omitInteractivePseudos } from './utils/omitInteractivePseudos' diff --git a/react/src/Table/utils/omitInteractivePseudos.ts b/react/src/Table/utils/omitInteractivePseudos.ts index b134f539..c2ff80a8 100644 --- a/react/src/Table/utils/omitInteractivePseudos.ts +++ b/react/src/Table/utils/omitInteractivePseudos.ts @@ -3,7 +3,7 @@ import { SystemStyleObject } from '@chakra-ui/react' import { omit } from 'lodash' type InteractableProps = Pick< - DOMAttributes, + DOMAttributes, | 'onClick' | 'onKeyDown' | 'onKeyUp' From ff0f844313d4d4a4015a4676cfa1316c38831fdb Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Wed, 15 Feb 2023 17:38:43 +0800 Subject: [PATCH 06/13] feat: update responsive padding sizes for Table components --- react/src/theme/components/Table.ts | 43 ++++++++++++++++++++++++++--- 1 file changed, 39 insertions(+), 4 deletions(-) diff --git a/react/src/theme/components/Table.ts b/react/src/theme/components/Table.ts index dffc43c2..9d1fdbc3 100644 --- a/react/src/theme/components/Table.ts +++ b/react/src/theme/components/Table.ts @@ -13,16 +13,48 @@ const { defineMultiStyleConfig, definePartsStyle } = const baseStyle = definePartsStyle({}) const sizes = { + xs: definePartsStyle({ + th: { + py: '0.875rem', + px: '1rem', + }, + td: { + py: '0.875rem', + px: '1rem', + textStyle: 'caption-2', + }, + }), sm: definePartsStyle({ th: { - py: '0.5rem', - px: '0.5rem', + py: '0.875rem', + px: '1rem', }, td: { - px: { base: 0, md: '0.5rem' }, - py: { base: '0.75rem', md: '0.375rem' }, + py: '0.875rem', + px: '1rem', + textStyle: 'caption-2', }, }), + md: { + th: { + p: '1rem', + }, + td: { + textStyle: 'body-2', + p: '1rem', + }, + }, + lg: { + th: { + px: '1rem', + py: '1.125rem', + }, + td: { + textStyle: 'body-2', + px: '1rem', + py: '1.125rem', + }, + }, } const getSubtleVariantThStyles = (c: string): SystemStyleObject => { @@ -77,6 +109,9 @@ const getSubtleVariantThStyles = (c: string): SystemStyleObject => { const variantSubtle = definePartsStyle(({ colorScheme: c }) => { return { th: getSubtleVariantThStyles(c), + td: { + color: 'base.content.default', + }, } }) From 2615137d82d49d886999ced66d299f4ad19b6c0b Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Wed, 15 Feb 2023 17:46:02 +0800 Subject: [PATCH 07/13] feat: add neutral color scheme to Table --- react/src/Table/Table.stories.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/react/src/Table/Table.stories.tsx b/react/src/Table/Table.stories.tsx index 99b9359e..5e580b1f 100644 --- a/react/src/Table/Table.stories.tsx +++ b/react/src/Table/Table.stories.tsx @@ -61,3 +61,8 @@ const Template: StoryFn = (args) => { ) } export const Default = Template.bind({}) + +export const NeutralColorScheme = Template.bind({}) +NeutralColorScheme.args = { + colorScheme: 'neutral', +} From ba778fc205d2cc666a8048cfe3654741d5aea39e Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Wed, 15 Feb 2023 17:48:20 +0800 Subject: [PATCH 08/13] feat: add interactable Table header story --- react/src/Table/Table.stories.tsx | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/react/src/Table/Table.stories.tsx b/react/src/Table/Table.stories.tsx index 5e580b1f..eba4533c 100644 --- a/react/src/Table/Table.stories.tsx +++ b/react/src/Table/Table.stories.tsx @@ -66,3 +66,32 @@ export const NeutralColorScheme = Template.bind({}) NeutralColorScheme.args = { colorScheme: 'neutral', } + +export const InteractableHeaders: StoryFn = (args) => { + return ( + +
+ + + + + + + + + + + + + + + + + + + + +
alert('Column 1 clicked')}>InteractableNot interactable
inchesmillimetres (mm)
feetcentimetres (cm)
yardsmetres (m)
+ + ) +} From eaf72ab2c58e3a5dfc15a2e4cd0fd0594210bbf7 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Wed, 15 Feb 2023 17:52:09 +0800 Subject: [PATCH 09/13] feat: reexport Table and subcomponents from package --- react/src/Table/index.ts | 14 ++++++++++++++ react/src/index.ts | 1 + 2 files changed, 15 insertions(+) create mode 100644 react/src/Table/index.ts diff --git a/react/src/Table/index.ts b/react/src/Table/index.ts new file mode 100644 index 00000000..f3bd6f3b --- /dev/null +++ b/react/src/Table/index.ts @@ -0,0 +1,14 @@ +import { + Table, + TableCaption, + TableContainer, + Tbody, + Td, + Tfoot, + Thead, + Tr, +} from '@chakra-ui/react' + +export * from './Th' + +export { Table, TableCaption, TableContainer, Tbody, Td, Tfoot, Thead, Tr } diff --git a/react/src/index.ts b/react/src/index.ts index 662e4d25..b865b84c 100644 --- a/react/src/index.ts +++ b/react/src/index.ts @@ -29,6 +29,7 @@ export * from './Searchbar' export * from './SingleSelect' export * from './Spinner' export * from './Switch' +export * from './Table' export * from './Tabs' export * from './Tag' export * from './TagInput' From a7b90b6390103b0800b953ee9c9ed025251f1da2 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Thu, 16 Feb 2023 10:48:18 +0800 Subject: [PATCH 10/13] feat: update ColourTable to new Tables --- react/.storybook/foundations/Colours/ColourTable.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/react/.storybook/foundations/Colours/ColourTable.tsx b/react/.storybook/foundations/Colours/ColourTable.tsx index 20b83e40..d7baac76 100644 --- a/react/.storybook/foundations/Colours/ColourTable.tsx +++ b/react/.storybook/foundations/Colours/ColourTable.tsx @@ -3,12 +3,12 @@ import { TableCaption, Tbody, Td, - Th, Thead, Tr, useTheme, } from '@chakra-ui/react' import { get } from 'lodash' +import { Th } from '~/Table' interface ColourTableProps { label: string @@ -25,7 +25,7 @@ export const ColourTable = ({ const theme = useTheme() return ( - +
{label} From 6fa7e07fef0a6fd21aa5da6f9967726496d14e3f Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Thu, 16 Feb 2023 10:50:31 +0800 Subject: [PATCH 11/13] feat: update Utilities to new Tables --- react/.storybook/foundations/Utilities/Utilities.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/react/.storybook/foundations/Utilities/Utilities.tsx b/react/.storybook/foundations/Utilities/Utilities.tsx index 00ff7760..b6762d95 100644 --- a/react/.storybook/foundations/Utilities/Utilities.tsx +++ b/react/.storybook/foundations/Utilities/Utilities.tsx @@ -11,11 +11,11 @@ import { Tbody, Td, Text, - Th, Thead, Tr, useTheme, } from '@chakra-ui/react' +import { Th } from '~/Table' export const Utilities = (): JSX.Element => { const theme = useTheme() @@ -88,7 +88,7 @@ export const Utilities = (): JSX.Element => { Spacing -
+
Spacing From 41bfe74047b44611edf5cadcdadb5eee34d02f5f Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Thu, 16 Feb 2023 10:50:48 +0800 Subject: [PATCH 12/13] feat: update Menu playground stories to new Tables --- react/src/Menu/Menu.stories.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/react/src/Menu/Menu.stories.tsx b/react/src/Menu/Menu.stories.tsx index 1063e19c..56fbe22e 100644 --- a/react/src/Menu/Menu.stories.tsx +++ b/react/src/Menu/Menu.stories.tsx @@ -143,12 +143,12 @@ export const Playground: StoryFn = () => { )} -
- +
+ - - - + + + From 0a34aa795148c6ade983752b49afe19c1a206b13 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Mon, 6 Mar 2023 15:40:20 +0800 Subject: [PATCH 13/13] feat: update table styles --- react/src/theme/components/Table.ts | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/react/src/theme/components/Table.ts b/react/src/theme/components/Table.ts index 9d1fdbc3..c6a4ddb4 100644 --- a/react/src/theme/components/Table.ts +++ b/react/src/theme/components/Table.ts @@ -10,13 +10,16 @@ import { textStyles } from '../textStyles' const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(parts.keys) -const baseStyle = definePartsStyle({}) +const baseStyle = definePartsStyle({ + tr: { + pos: 'relative', + }, +}) const sizes = { xs: definePartsStyle({ th: { py: '0.875rem', - px: '1rem', }, td: { py: '0.875rem', @@ -26,8 +29,8 @@ const sizes = { }), sm: definePartsStyle({ th: { + ...textStyles['subhead-2'], py: '0.875rem', - px: '1rem', }, td: { py: '0.875rem', @@ -37,7 +40,7 @@ const sizes = { }), md: { th: { - p: '1rem', + py: '1rem', }, td: { textStyle: 'body-2', @@ -46,7 +49,6 @@ const sizes = { }, lg: { th: { - px: '1rem', py: '1.125rem', }, td: { @@ -59,9 +61,11 @@ const sizes = { const getSubtleVariantThStyles = (c: string): SystemStyleObject => { const baseStyles: SystemStyleObject = { - ...textStyles['caption-1'], textTransform: 'initial', - _focusVisible: layerStyles.focusRing.tightDefault._focusVisible, + _focusVisible: { + ...layerStyles.focusRing.tightDefault._focusVisible, + outlineOffset: '-2px', + }, } switch (c) { @@ -108,6 +112,11 @@ const getSubtleVariantThStyles = (c: string): SystemStyleObject => { const variantSubtle = definePartsStyle(({ colorScheme: c }) => { return { + thead: { + bg: `interaction.${c}-subtle.default`, + opacity: 1, + zIndex: 1, + }, th: getSubtleVariantThStyles(c), td: { color: 'base.content.default', @@ -124,6 +133,7 @@ export const Table = defineMultiStyleConfig({ variants, defaultProps: { variant: 'subtle', + size: 'md', colorScheme: 'main', }, sizes,
#Response IDTime#Response IDTime