@coveord/plasma-mantine 52.4.3 → 52.6.0

package/src/components/header/__tests__/__snapshots__/Header.spec.tsx.snap

@@ -38,7 +38,7 @@ exports[`Header > renders the specified breadcrumbs above the title 1`] = `
         </a>
       </div>
       <h1
-        class="mantine-Text-root mantine-Title-root mantine-d1yoif"
+        class="mantine-Text-root mantine-Title-root mantine-m67b81"
       >
         Title
       </h1>

package/src/components/prompt/Prompt.tsx

@@ -18,7 +18,6 @@ const useStyles = createStyles((theme) => ({
         fontSize: theme.headings.sizes.h3.fontSize,
         lineHeight: theme.headings.sizes.h3.lineHeight,
     },
-    default: {},
     success: {backgroundColor: theme.colors.lime[6], color: color.primary.pureWhite},
     warning: {backgroundColor: theme.colors.yellow[5], color: color.primary.pureWhite},
     critical: {
@@ -33,7 +32,12 @@ const useStyles = createStyles((theme) => ({
 }));
 
 export interface PromptProps extends ModalProps {
-    variant: 'default' | 'success' | 'warning' | 'critical' | 'info';
+    /**
+     * Controls prompt appearance
+     *
+     * @default "info"
+     */
+    variant?: 'success' | 'warning' | 'critical' | 'info';
     children: ReactNode;
 }
 interface PromptType {
@@ -41,9 +45,8 @@ interface PromptType {
     Footer: typeof PromptFooter;
 }
 
-export const Prompt: PromptType = ({children, variant, size, ...otherProps}) => {
+export const Prompt: PromptType = ({children, variant = 'info', ...otherProps}) => {
     const {classes, cx} = useStyles();
-    const defaultVariant = variant === 'default';
     const convertedChildren = Children.toArray(children) as ReactElement[];
 
     const otherChildren = convertedChildren.filter((child) => child.type !== PromptFooter);
@@ -51,14 +54,14 @@ export const Prompt: PromptType = ({children, variant, size, ...otherProps}) =>
 
     const classNames = {
         header: cx(classes.header, classes[variant]),
-        close: !defaultVariant && classes.whiteClose,
+        close: classes.whiteClose,
         body: classes.body,
-        modal: !defaultVariant && classes.modalType,
+        modal: classes.modalType,
         title: classes.title,
     };
 
     return (
-        <Modal padding={0} classNames={classNames} size={defaultVariant ? size : 'sm'} {...otherProps}>
+        <Modal variant="prompt" padding={0} classNames={classNames} size={'sm'} {...otherProps}>
             <div className={classes.innerBody}>{otherChildren}</div>
             {footer}
         </Modal>

package/src/components/table/Table.styles.ts

@@ -2,9 +2,10 @@ import {createStyles} from '@mantine/core';
 
 interface TableStylesParams {
     multiRowSelectionEnabled: boolean;
+    disableRowSelection: boolean;
 }
 
-const useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelectionEnabled}) => {
+const useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelectionEnabled, disableRowSelection}) => {
     const rowBackgroundColor =
         theme.colorScheme === 'dark'
             ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)
@@ -44,12 +45,36 @@ const useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelec
             '& th:first-of-type > *': {
                 paddingLeft: theme.spacing.xl,
             },
+
+            '& input[type=checkbox]': {
+                backgroundColor: disableRowSelection ? `${theme.colors.gray[2]}` : undefined,
+                borderColor: disableRowSelection ? `${theme.colors.gray[3]}` : `${theme.colors.gray[4]}`,
+                pointerEvents: disableRowSelection ? 'none' : 'auto',
+                cursor: disableRowSelection ? 'not-allowed' : 'default',
+
+                '& + svg': {
+                    color: disableRowSelection ? `${theme.colors.gray[5]}` : 'inherit',
+                },
+            },
         },
 
         rowSelected: {
             backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,
         },
 
+        rowUnselectable: {
+            '& input[type=checkbox]': {
+                backgroundColor: `${theme.colors.gray[2]}`,
+                borderColor: `${theme.colors.gray[3]}`,
+                pointerEvents: 'none',
+                cursor: 'not-allowed',
+
+                '&:checked + svg': {
+                    color: `${theme.colors.gray[5]}`,
+                },
+            },
+        },
+
         rowCollapsibleButtonCell: {
             textAlign: 'right',
             padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,

package/src/components/table/Table.tsx

@@ -1,13 +1,13 @@
-import {Box, Center, Collapse, Loader, Skeleton, SkeletonProps, Table as MantineTable} from '@mantine/core';
+import {Box, Center, Collapse, Loader, Table as MantineTable, Skeleton, SkeletonProps} from '@mantine/core';
 import {useForm} from '@mantine/form';
 import {useDidUpdate} from '@mantine/hooks';
 import {
     ColumnDef,
+    Row,
+    TableState as TanstackTableState,
     defaultColumnSizing,
     flexRender,
     getCoreRowModel,
-    Row,
-    TableState as TanstackTableState,
     useReactTable,
 } from '@tanstack/react-table';
 import debounce from 'lodash.debounce';
@@ -50,6 +50,7 @@ export const Table: TableType = <T,>({
     loading = false,
     doubleClickAction,
     multiRowSelectionEnabled,
+    disableRowSelection,
     onRowSelectionChange,
     options = {},
 }: TableProps<T>) => {
@@ -62,7 +63,7 @@ export const Table: TableType = <T,>({
     const form = useForm<TableFormType>({
         initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},
     });
-    const {cx, classes} = useStyles({multiRowSelectionEnabled});
+    const {cx, classes} = useStyles({multiRowSelectionEnabled, disableRowSelection});
 
     const table = useReactTable({
         initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),
@@ -76,6 +77,7 @@ export const Table: TableType = <T,>({
         enableRowSelection: !loading,
         ...options,
     });
+
     const [state, setState] = useState<TableState<T>>(table.initialState as TableState<T>);
     table.setOptions((prev) => ({
         ...prev,
@@ -128,9 +130,12 @@ export const Table: TableType = <T,>({
         return (
             <Fragment key={row.id}>
                 <tr
-                    onClick={() => row.toggleSelected()}
+                    onClick={() => (disableRowSelection ? undefined : row.toggleSelected())}
                     onDoubleClick={() => doubleClickAction?.(row.original)}
-                    className={cx(classes.row, {[classes.rowSelected]: isSelected})}
+                    className={cx(classes.row, {
+                        [classes.rowSelected]: isSelected,
+                        [classes.rowUnselectable]: disableRowSelection,
+                    })}
                     aria-selected={isSelected}
                 >
                     {row.getVisibleCells().map((cell) => {
@@ -189,6 +194,7 @@ export const Table: TableType = <T,>({
                     containerRef: outsideClickRef,
                     multiRowSelectionEnabled,
                     getPageCount: table.getPageCount,
+                    disableRowSelection,
                 }}
             >
                 {consumer}

package/src/components/table/Table.types.ts

@@ -2,8 +2,8 @@ import {UseFormReturnType} from '@mantine/form';
 import {
     ColumnDef,
     CoreOptions,
-    InitialTableState as TanstackInitialTableState,
     TableOptions,
+    InitialTableState as TanstackInitialTableState,
     TableState as TanstackTableState,
 } from '@tanstack/table-core';
 import {Dispatch, ReactElement, ReactNode, RefObject} from 'react';
@@ -11,6 +11,7 @@ import {Dispatch, ReactElement, ReactNode, RefObject} from 'react';
 import {DateRangePickerValue} from '../date-range-picker/DateRangePickerInlineCalendar';
 import {TableActions} from './TableActions';
 import {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';
+import {TableConsumer} from './TableConsumer';
 import {TableDateRangePicker} from './TableDateRangePicker';
 import {TableFilter} from './TableFilter';
 import {TableFooter} from './TableFooter';
@@ -18,7 +19,6 @@ import {TableHeader} from './TableHeader';
 import {TablePagination} from './TablePagination';
 import {TablePerPage} from './TablePerPage';
 import {TablePredicate} from './TablePredicate';
-import {TableConsumer} from './TableConsumer';
 
 export type RowSelectionWithData<TData> = Record<string, TData>;
 export interface RowSelectionState<TData> {
@@ -97,6 +97,10 @@ export type TableContextType<TData> = {
      * Whether multi row selection is activated
      */
     multiRowSelectionEnabled: boolean;
+    /**
+     * Whether row selection is enabled or not
+     */
+    disableRowSelection: boolean;
     /**
      * Function that returns the number of pages
      */
@@ -178,6 +182,12 @@ export interface TableProps<T> {
      * @default false
      */
     multiRowSelectionEnabled?: boolean;
+    /**
+     * Whether row selection is enabled or not
+     *
+     * @default false
+     */
+    disableRowSelection?: boolean;
     /**
      * Additional options that can be passed to the table
      */

package/src/components/table/TableDateRangePicker.tsx

@@ -1,8 +1,9 @@
 import {CalendarSize24Px} from '@coveord/plasma-react-icons';
 import {Grid, Group, Popover, Text} from '@mantine/core';
 import dayjs from 'dayjs';
-import {FunctionComponent, useState} from 'react';
+import {FunctionComponent} from 'react';
 
+import {useToggle} from '@mantine/hooks';
 import {Button} from '../button';
 import {
     DateRangePickerInlineCalendar,
@@ -33,27 +34,27 @@ export const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps>
     presets = {},
     rangeCalendarProps,
 }) => {
-    const [opened, setOpened] = useState(false);
+    const [opened, toggleOpened] = useToggle();
     const {form} = useTable();
 
     const onApply = (dates: DateRangePickerValue) => {
         form.setFieldValue('dateRange', dates);
-        setOpened(false);
+        toggleOpened(false);
     };
     const onCancel = () => {
-        setOpened(false);
+        toggleOpened(false);
     };
 
     const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');
-    const formatedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;
+    const formattedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;
 
     return (
         <Grid.Col span="content" order={TableComponentsOrder.DateRangePicker} py="sm">
             <Group spacing="xs">
-                <Text span>{formatedRange}</Text>
-                <Popover opened={opened} onChange={setOpened} withinPortal>
+                <Text span>{formattedRange}</Text>
+                <Popover opened={opened} onChange={toggleOpened} withinPortal>
                     <Popover.Target>
-                        <Button variant="outline" color="gray" onClick={() => setOpened(true)} px="xs">
+                        <Button variant="outline" color="gray" onClick={() => toggleOpened()} px="xs">
                             <CalendarSize24Px width={24} height={24} />
                         </Button>
                     </Popover.Target>

package/src/components/table/TableHeader.tsx

@@ -30,9 +30,10 @@ export const TableHeader: FunctionComponent<TableHeaderProps> = ({
     children,
     ...others
 }) => {
-    const {getSelectedRows, multiRowSelectionEnabled, clearSelection} = useTable();
+    const {getSelectedRows, multiRowSelectionEnabled, clearSelection, disableRowSelection} = useTable();
     const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});
     const selectedRows = getSelectedRows();
+
     return (
         <Grid
             justify="flex-start"
@@ -53,7 +54,12 @@ export const TableHeader: FunctionComponent<TableHeaderProps> = ({
                     order={TableComponentsOrder.MultiSelectInfo}
                 >
                     <Tooltip label="Unselect all">
-                        <Button onClick={clearSelection} variant="subtle" leftIcon={<CrossSize16Px height={16} />}>
+                        <Button
+                            onClick={clearSelection}
+                            variant="subtle"
+                            disabled={disableRowSelection}
+                            leftIcon={<CrossSize16Px height={16} />}
+                        >
                             {selectedRows.length} selected
                         </Button>
                     </Tooltip>

package/src/components/table/Th.tsx

@@ -6,7 +6,6 @@ const useStyles = createStyles((theme) => ({
     th: {
         fontWeight: '400 !important' as any,
         padding: '0 !important',
-        color: theme.black + '!important',
         verticalAlign: 'middle',
     },
 
@@ -14,9 +13,11 @@ const useStyles = createStyles((theme) => ({
         width: '100%',
         padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
         whiteSpace: 'nowrap',
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[0],
+        color: theme.colors.gray[6],
 
         '&:hover': {
-            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[6] : theme.colors.gray[2],
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.gray[1],
         },
     },
 }));
@@ -49,7 +50,7 @@ export const Th = <T,>({header}: ThProps<T>) => {
     if (!header.column.getCanSort()) {
         return (
             <th className={classes.th} style={{width}}>
-                <Text size="xs" py="xs" px="sm">
+                <Text size="xs" py="xs" px="sm" fw={500}>
                     {flexRender(header.column.columnDef.header, header.getContext())}
                 </Text>
             </th>
@@ -64,7 +65,9 @@ export const Th = <T,>({header}: ThProps<T>) => {
         <th className={classes.th} style={{width}} aria-sort={SortingLabels[sortingOrder]}>
             <UnstyledButton onClick={onSort} className={classes.control}>
                 <Group position="apart" noWrap>
-                    <Text size="xs">{flexRender(header.column.columnDef.header, header.getContext())}</Text>
+                    <Text size="xs" fw={500}>
+                        {flexRender(header.column.columnDef.header, header.getContext())}
+                    </Text>
                     <Center>
                         <Icon height={14} />
                     </Center>

package/src/components/table/__tests__/Table.spec.tsx

@@ -508,5 +508,77 @@ describe('Table', () => {
             await user.click(screen.getByRole('button', {name: /2 selected/i}));
             expect(screen.queryAllByRole('row', {selected: true})).toEqual([]);
         });
+
+        it('prevents row selection if disableRowSelection is true', async () => {
+            const user = userEvent.setup({delay: null});
+
+            render(
+                <div>
+                    <Table
+                        getRowId={({id}) => id}
+                        data={[
+                            {id: '🆔-1', firstName: 'first', lastName: 'last'},
+                            {id: '🆔-2', firstName: 'patate', lastName: 'king'},
+                        ]}
+                        columns={columns}
+                        multiRowSelectionEnabled
+                        disableRowSelection
+                    />
+                </div>
+            );
+
+            await user.click(screen.getByRole('row', {name: /patate king/i}));
+            expect(screen.getByRole('row', {name: /patate king/i, selected: false})).toBeInTheDocument();
+            expect(screen.queryByRole('row', {name: /patate king/i, selected: true})).not.toBeInTheDocument();
+
+            await user.click(screen.getByRole('row', {name: /first last/i}));
+            expect(screen.getByRole('row', {name: /first last/i, selected: false})).toBeInTheDocument();
+            expect(screen.queryByRole('row', {name: /first last/i, selected: true})).not.toBeInTheDocument();
+        });
+
+        it('prevents click on checkboxes if disableRowSelection is true', async () => {
+            const user = userEvent.setup({delay: null});
+
+            render(
+                <Table
+                    getRowId={({id}) => id}
+                    data={[
+                        {id: '🆔-1', firstName: 'John', lastName: 'Smith'},
+                        {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'},
+                    ]}
+                    columns={columns}
+                    multiRowSelectionEnabled
+                    disableRowSelection
+                />
+            );
+
+            expect(screen.getByRole('checkbox', {name: /select all/i})).toHaveStyle('pointerEvents: none');
+
+            const rows = screen.getAllByRole('row');
+            rows.forEach(async (row) => {
+                const checkbox = within(row).getByRole('checkbox', {name: /select/i});
+                expect(checkbox).toHaveStyle('pointerEvents: none');
+            });
+        });
+
+        it('does not display number of selected rows if disableRowSelection is true', async () => {
+            render(
+                <Table
+                    getRowId={({id}) => id}
+                    data={[
+                        {id: '🆔-1', firstName: 'John', lastName: 'Smith'},
+                        {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'},
+                    ]}
+                    columns={columns}
+                    multiRowSelectionEnabled
+                    initialState={{
+                        rowSelection: {'🆔-2': {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'}},
+                    }}
+                />
+            );
+
+            expect(screen.getByRole('row', {name: /jane doe/i, selected: true})).toBeInTheDocument();
+            expect(screen.queryByRole('button', {name: /1 selected/i})).not.toBeInTheDocument();
+        });
     });
 });

package/src/components/table/__tests__/TableDateRangePicker.spec.tsx

@@ -1,5 +1,6 @@
 import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
 import {render, screen, userEvent, waitFor} from '@test-utils';
+import {act} from 'react-dom/test-utils';
 
 import {Table} from '../Table';
 
@@ -7,6 +8,17 @@ type RowData = {name: string};
 
 const columnHelper = createColumnHelper<RowData>();
 const columns: Array<ColumnDef<RowData>> = [columnHelper.accessor('name', {enableSorting: false})];
+const basicTableWithDateRangePicker = (
+    <Table
+        data={[{name: 'fruit'}, {name: 'vegetable'}]}
+        columns={columns}
+        initialState={{dateRange: [new Date(2022, 0, 1), new Date(2022, 0, 7)]}}
+    >
+        <Table.Header>
+            <Table.DateRangePicker />
+        </Table.Header>
+    </Table>
+);
 
 // Since we're mocking the date and the animations are timer based we're mocking useReduceMotion to disable all the animations
 // I tried wrapping the components in <MantineProvider theme={{components: {Transition: {defaultProps: {duration: 0}}}}}>
@@ -20,8 +32,6 @@ vi.mock('@mantine/hooks', async () => {
 });
 
 describe('Table.DateRangePicker', () => {
-    // vi.setTimeout(15000);
-
     beforeEach(() => {
         vi.useFakeTimers().setSystemTime(new Date(2022, 0, 15));
     });
@@ -30,24 +40,41 @@ describe('Table.DateRangePicker', () => {
         vi.useRealTimers();
     });
 
-    it('displays the intial dates', async () => {
-        render(
-            <Table
-                data={[{name: 'fruit'}, {name: 'vegetable'}]}
-                columns={columns}
-                initialState={{dateRange: [new Date(2022, 0, 1), new Date(2022, 0, 7)]}}
-            >
-                <Table.Header>
-                    <Table.DateRangePicker />
-                </Table.Header>
-            </Table>
-        );
+    it('displays the initial dates', async () => {
+        render(basicTableWithDateRangePicker);
 
         await waitFor(() => {
             expect(screen.getByText('Jan 01, 2022 - Jan 07, 2022')).toBeVisible();
         });
     });
 
+    it('opens the dialog when clicking on the calendar button', async () => {
+        // Otherwise, css transition is not triggered in Mantine component
+        vi.useRealTimers();
+        const user = userEvent.setup({delay: null});
+        render(basicTableWithDateRangePicker);
+
+        await screen.findByRole('button', {name: 'calendar'});
+        await act(async () => {
+            await user.click(screen.getByRole('button', {name: 'calendar'}));
+        });
+        expect(screen.queryByRole('dialog')).toBeVisible();
+    });
+
+    it('closes the dialog when clicking back on the calendar button', async () => {
+        // Otherwise, css transition is not triggered in Mantine component
+        vi.useRealTimers();
+        const user = userEvent.setup({delay: null});
+        render(basicTableWithDateRangePicker);
+
+        await screen.findByRole('button', {name: 'calendar'});
+        await act(async () => {
+            await user.click(screen.getByRole('button', {name: 'calendar'}));
+            await user.click(screen.getByRole('button', {name: 'calendar'}));
+        });
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+
     it('displays the selected date range in the table', async () => {
         const user = userEvent.setup({delay: null});
         const onChange = vi.fn();

package/src/theme/Theme.tsx

@@ -1,6 +1,13 @@
-import {InfoSize24Px} from '@coveord/plasma-react-icons';
+import {CheckSize16Px, InfoSize24Px} from '@coveord/plasma-react-icons';
 import {color} from '@coveord/plasma-tokens';
-import {getSize, MantineThemeOverride, NotificationProps, rem} from '@mantine/core';
+import {
+    getSize,
+    rem,
+    type MantineThemeOverride,
+    type NotificationProps,
+    type StepperStylesParams,
+    type TabsStylesParams,
+} from '@mantine/core';
 
 import {PlasmaColors} from './PlasmaColors';
 
@@ -83,18 +90,18 @@ export const plasmaTheme: MantineThemeOverride = {
             },
         },
         Modal: {
-            styles: (theme, {fullScreen}, {size}) => ({
+            styles: (theme, {fullScreen, padding}, {size, variant}) => ({
                 content: {
                     flex: fullScreen
                         ? '0 0 100%'
                         : `0 0 ${getSize({
                               size,
                               sizes: {
-                                  xs: rem(440),
-                                  sm: rem(550),
-                                  md: rem(800),
-                                  lg: rem(1334),
-                                  xl: rem('85%'),
+                                  xs: rem(432),
+                                  sm: rem(664),
+                                  md: rem(896),
+                                  lg: rem(1120),
+                                  xl: rem('88%'),
                               },
                           })}`,
                     overflow: 'auto',
@@ -105,12 +112,20 @@ export const plasmaTheme: MantineThemeOverride = {
                     lineHeight: theme.headings.sizes.h3.lineHeight,
                     fontWeight: 500,
                 },
+                header: {
+                    borderBottom: variant !== 'prompt' ? `1px solid ${color.primary.gray[3]}` : null,
+                },
+                body: {
+                    '&:not(:only-child)': {
+                        paddingTop: variant === 'prompt' ? 0 : getSize({size: padding, sizes: plasmaTheme.spacing}),
+                    },
+                },
             }),
+        },
+        ModalOverlay: {
             defaultProps: {
-                overlayProps: {
-                    color: color.primary.navy[9],
-                    opacity: 0.9,
-                },
+                color: color.primary.navy[9],
+                opacity: 0.9,
             },
         },
         InputWrapper: {
@@ -268,5 +283,73 @@ export const plasmaTheme: MantineThemeOverride = {
                 },
             },
         },
+        Stepper: {
+            defaultProps: {
+                size: 'xs',
+                completedIcon: <CheckSize16Px />,
+            },
+            styles: (theme, {}: StepperStylesParams, {size}) => ({
+                step: {
+                    '&[disabled]': {
+                        color: theme.colors.gray[5],
+                        '& .mantine-Stepper-stepDescription': {
+                            color: theme.colors.gray[5],
+                        },
+                        '& .mantine-Stepper-stepIcon': {
+                            borderColor: theme.colors.gray[1],
+                        },
+                    },
+                },
+                stepIcon: {
+                    fontWeight: 500,
+                    backgroundColor: theme.colors.gray[1],
+                    color: 'inherit',
+                    border: `${rem(1)} solid ${theme.colors.gray[3]}`,
+                    '&[data-progress]': {
+                        backgroundColor: theme.white,
+                    },
+
+                    '&[data-completed]': {
+                        backgroundColor: theme.white,
+                        borderColor: theme.colors.lime[6],
+                        color: theme.colors.lime[6],
+                    },
+                },
+                stepCompletedIcon: {
+                    color: theme.colors.lime[6],
+                    fontSize: rem(16),
+                },
+                stepDescription: {
+                    color: theme.colors.gray[7],
+                    fontSize: getSize({size, sizes: theme.fontSizes}),
+                },
+                separator: {
+                    height: rem(1),
+                    backgroundColor: theme.colors.gray[3],
+                },
+                separatorActive: {
+                    backgroundColor: theme.colors.gray[3],
+                },
+                verticalSeparator: {
+                    borderLeft: `${rem(1)} solid ${theme.colors.gray[3]}`,
+                },
+                verticalSeparatorActive: {
+                    borderColor: theme.colors.gray[3],
+                },
+            }),
+        },
+        Tabs: {
+            styles: (theme, {orientation}: TabsStylesParams) => ({
+                tabsList: {
+                    [orientation === 'horizontal' ? 'borderBottom' : 'borderRight']: `${rem(1)} solid ${
+                        theme.colors.gray[3]
+                    }`,
+                },
+                tab: {
+                    [orientation === 'horizontal' ? 'borderBottom' : 'borderRight']: `${rem(1)} solid transparent`,
+                    [orientation === 'horizontal' ? 'marginBottom' : 'marginRight']: rem(-1),
+                },
+            }),
+        },
     },
 };