@coveord/plasma-mantine 55.7.3 → 55.8.2

package/src/theme/Theme.tsx

@@ -1,21 +1,25 @@
 import {
     ArrowHeadLeftSize16Px,
     ArrowHeadRightSize16Px,
-    CheckSize16Px,
     CrossSize16Px,
     FilterSize16Px,
-    InfoSize16Px,
-    InfoSize24Px,
+    IconCalendarWeek,
+    IconCheck,
+    IconClock,
+    IconInfoCircleFilled,
+    IconSlash,
 } from '@coveord/plasma-react-icons';
 import {color} from '@coveord/plasma-tokens';
 import {
     ActionIcon,
     Alert,
-    Anchor,
-    AppShellNavbar,
+    AppShell,
     Badge,
+    Breadcrumbs,
     Button,
+    Card,
     Checkbox,
+    Chip,
     CloseButton,
     ColorSwatch,
     Combobox,
@@ -23,68 +27,96 @@ import {
     createTheme,
     deepMerge,
     Divider,
+    Image,
     Input,
     InputWrapper,
     List,
     Loader,
     MantineThemeOverride,
-    MenuItem,
     Modal,
     MultiSelect,
     NavLink,
     Notification,
+    NumberInput,
     Pagination,
+    Paper,
+    PasswordInput,
+    Pill,
     Popover,
     Radio,
     ScrollArea,
     SegmentedControl,
     Select,
     Skeleton,
+    Slider,
     Stepper,
     Switch,
+    Table,
     Tabs,
     Text,
-    TextInput,
     Tooltip,
 } from '@mantine/core';
-import {DatePicker} from '@mantine/dates';
+import {DateInput, DatePicker, MonthPicker, PickerInputBase, TimeInput, TimePicker, YearPicker} from '@mantine/dates';
+import {Accordion, CheckboxIcon, CircleLoader, InfoToken} from '../components';
+import AccordionClasses from '../styles/Accordion.module.css';
 import ActionIconClasses from '../styles/ActionIcon.module.css';
 import AlertClasses from '../styles/Alert.module.css';
-import AnchorClasses from '../styles/Anchor.module.css';
-import AppShellNavBarClasses from '../styles/AppShellNavBar.module.css';
 import BadgeClasses from '../styles/Badge.module.css';
+import BreadcrumbsClasses from '../styles/Breadcrumbs.module.css';
 import ButtonClasses from '../styles/Button.module.css';
+import CardClasses from '../styles/Card.module.css';
 import CheckboxClasses from '../styles/Checkbox.module.css';
+import CheckboxIndicatorClasses from '../styles/CheckboxIndicator.module.css';
+import ChipClasses from '../styles/Chip.module.css';
 import ComboboxClasses from '../styles/Combobox.module.css';
 import DatePickerClasses from '../styles/DatePicker.module.css';
 import InputClasses from '../styles/Input.module.css';
 import InputWrapperClasses from '../styles/InputWrapper.module.css';
 import ListClasses from '../styles/List.module.css';
 import ModalClasses from '../styles/Modal.module.css';
+import MonthPickerClasses from '../styles/MonthPicker.module.css';
 import NavLinkClasses from '../styles/NavLink.module.css';
-import NotificationClasses from '../styles/Notification.module.css';
+import NotificationClasses from '../styles/Notifications.module.css';
+import NumberInputClasses from '../styles/NumberInput.module.css';
 import PaginationClasses from '../styles/Pagination.module.css';
+import PaperClasses from '../styles/Paper.module.css';
+import PillClasses from '../styles/Pill.module.css';
+import PopoverClasses from '../styles/Popover.module.css';
 import RadioClasses from '../styles/Radio.module.css';
+import RadioCardClasses from '../styles/RadioCard.module.css';
 import ReadOnlyInputClasses from '../styles/ReadOnlyInput.module.css';
 import ReadOnlyStateClasses from '../styles/ReadOnlyState.module.css';
 import ScrollAreaClasses from '../styles/ScrollArea.module.css';
 import SegmentedControlClasses from '../styles/SegmentedControl.module.css';
 import SelectClasses from '../styles/Select.module.css';
 import SkeletonClasses from '../styles/Skeleton.module.css';
+import SliderClasses from '../styles/Slider.module.css';
 import StepperClasses from '../styles/Stepper.module.css';
+import TableClasses from '../styles/Table.module.css';
 import TabsClasses from '../styles/Tabs.module.css';
 import TextClasses from '../styles/Text.module.css';
+import TimePickerClasses from '../styles/TimePicker.module.css';
 import TooltipClasses from '../styles/Tooltip.module.css';
-import {NotificationVars} from '../vars/Notification.vars';
-import {TextVars} from '../vars/Text.vars';
+import YearPickerClasses from '../styles/YearPicker.module.css';
 import {PlasmaColors} from './PlasmaColors';
 
+import placeholderSvg from '../images/placeholder.svg';
+import {plasmaVariantColorResolver} from './plasmaVariantColorResolver';
+
 export const plasmaTheme: MantineThemeOverride = createTheme({
+    variantColorResolver: plasmaVariantColorResolver,
     // These are overrides over https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/default-theme.ts
     fontFamily: 'canada-type-gibson, sans-serif',
     black: color.primary.gray[9],
-    defaultRadius: 8,
-    lineHeights: {md: '1.5'},
+    defaultRadius: 'md',
+    lineHeights: {
+        xxs: '1.2',
+        xs: '1.16',
+        sm: '1.14',
+        md: '1.14',
+        lg: '1.11',
+        xl: '1.2',
+    },
     spacing: {
         xxs: '4px',
         xs: '8px',
@@ -93,59 +125,107 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
         lg: '32px',
         xl: '40px',
     },
-    primaryColor: 'action',
+    radius: {
+        none: '0px',
+        xs: '2px',
+        sm: '4px',
+        md: '8px',
+        lg: '16px',
+        xl: '24px',
+        xxl: '32px',
+    },
+    primaryColor: 'blue',
     headings: {
         fontFamily: 'canada-type-gibson, sans-serif',
-        fontWeight: '500',
+        fontWeight: 'var(--coveo-fw-bold)',
         sizes: {
-            h1: {fontSize: '48px', lineHeight: '1.5', fontWeight: '300'},
-            h2: {fontSize: '32px', lineHeight: '1.5', fontWeight: '500'},
-            h3: {fontSize: '24px', lineHeight: '1.5', fontWeight: '500'},
-            h4: {fontSize: '18px', lineHeight: '1.5', fontWeight: '300'},
-            h5: {fontSize: '14px', lineHeight: '1.5', fontWeight: '500'},
-            h6: {fontSize: '12px', lineHeight: '1.5', fontWeight: '500'},
+            h1: {fontSize: '40px', lineHeight: '1.2', fontWeight: 'var(--coveo-fw-bold)'},
+            h2: {fontSize: '32px', lineHeight: '1.35', fontWeight: 'var(--coveo-fw-normal)'},
+            h3: {fontSize: '24px', lineHeight: '1.33', fontWeight: 'var(--coveo-fw-bold)'},
+            h4: {fontSize: '18px', lineHeight: '1.2', fontWeight: 'var(--coveo-fw-bold)'},
+            h5: {fontSize: '16px', lineHeight: '1.25', fontWeight: 'var(--coveo-fw-bold)'},
+            h6: {fontSize: '12px', lineHeight: '1.33', fontWeight: 'var(--coveo-fw-bold)'},
         },
     },
+    fontSizes: {
+        xxs: '10px',
+        xs: '12px',
+        sm: '14px',
+        md: '16px',
+        lg: '18px',
+        xl: '20px',
+    },
     shadows: {
-        xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',
-        sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',
-        md: '0px 4px 8px rgba(4, 8, 31, 0.08)',
-        lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',
-        xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',
+        xs: '0px 1px 2px 0px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.05), 0px -0.5px 1px 0px rgba(0, 0, 0, 0.02)',
+        sm: '0px 7px 7px -5px rgba(0, 0, 0, 0.04), 0px 10px 15px -5px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.05)',
+        md: '0px 10px 10px -5px rgba(0, 0, 0, 0.04), 0px 20px 25px -5px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.05)',
+        lg: '0px 12px 12px -7px rgba(0, 0, 0, 0.04), 0px 28px 23px -7px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.05)',
+        xl: '0px 17px 17px -7px rgba(0, 0, 0, 0.04), 0px 36px 28px -7px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.05)',
     },
+    primaryShade: 5,
     colors: PlasmaColors,
     components: {
+        Accordion: Accordion.extend({
+            classNames: AccordionClasses,
+        }),
         ActionIcon: ActionIcon.extend({
-            classNames: {root: ActionIconClasses.root},
+            defaultProps: {
+                size: 'lg',
+            },
+            classNames: ActionIconClasses,
+        }),
+        AppShell: AppShell.extend({
+            vars: (theme) =>
+                ({
+                    root: {'--app-shell-border-color': theme.colors.gray[2]},
+                }) as any,
         }),
         Alert: Alert.extend({
             defaultProps: {
-                icon: <InfoSize16Px height={16} />,
-                color: 'navy',
+                icon: <InfoToken variant="advice" />,
+                p: 'sm',
             },
             classNames: AlertClasses,
         }),
-        Anchor: Anchor.extend({
+        Badge: Badge.extend({
+            classNames: BadgeClasses,
             defaultProps: {
-                color: 'action.6',
+                variant: 'light',
+                tt: 'none',
             },
-            classNames: {root: AnchorClasses.root},
         }),
-        AppShellNavbar: AppShellNavbar.extend({
-            classNames: {navbar: AppShellNavBarClasses.navbar},
-        }),
-        Badge: Badge.extend({
-            classNames: {root: BadgeClasses.root},
+        Breadcrumbs: Breadcrumbs.extend({
+            classNames: BreadcrumbsClasses,
             defaultProps: {
-                variant: 'light',
+                separator: <IconSlash size={16} color="var(--mantine-color-dimmed)" />,
+                separatorMargin: 'xxs',
             },
         }),
         Button: Button.extend({
+            defaultProps: {
+                size: 'sm',
+                vars: (theme) => ({
+                    root: {
+                        '--button-height': '32px',
+                        '--button-padding-x': theme.spacing.sm,
+                    },
+                }),
+            },
             classNames: ButtonClasses,
         }),
+        Card: Card.extend({
+            defaultProps: {
+                radius: 'lg',
+                shadow: 'xs',
+                padding: 'sm',
+                withBorder: true,
+            },
+            classNames: CardClasses,
+        }),
         Checkbox: Checkbox.extend({
             defaultProps: {
                 radius: 'sm',
+                icon: CheckboxIcon,
             },
             classNames: (theme, props) => {
                 if (props.readOnly && !props.disabled) {
@@ -153,17 +233,19 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
                 }
                 return CheckboxClasses;
             },
-            vars: (theme, props) => {
-                if (props.readOnly && !props.disabled) {
-                    return {
-                        root: {
-                            '--checkbox-icon-color': theme.colors.gray[7],
-                            '--checkbox-color': theme.colors.gray[2],
-                        },
-                    };
-                }
-                return {root: {}};
+        }),
+        CheckboxIndicator: Checkbox.Indicator.extend({
+            defaultProps: {
+                radius: 'sm',
+                icon: CheckboxIcon,
             },
+            classNames: CheckboxIndicatorClasses,
+        }),
+        Chip: Chip.extend({
+            defaultProps: {
+                icon: <IconCheck size={16} />,
+            },
+            classNames: ChipClasses,
         }),
         CloseButton: CloseButton.extend({
             defaultProps: {
@@ -177,7 +259,10 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
             },
         }),
         Combobox: Combobox.extend({
-            classNames: {option: SelectClasses.option, search: ComboboxClasses.search},
+            classNames: ComboboxClasses,
+            defaultProps: {
+                middlewares: {inline: true},
+            },
         }),
         ComboboxSearch: ComboboxSearch.extend({
             defaultProps: {
@@ -185,15 +270,29 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
                 rightSection: <FilterSize16Px height={16} color="gray.5" />,
             },
         }),
+        DateInput: DateInput.extend({
+            defaultProps: {
+                miw: 250,
+                leftSection: <IconCalendarWeek size={16} />,
+            },
+        }),
         DatePicker: DatePicker.extend({
-            classNames: {monthCell: DatePickerClasses.monthCell},
+            classNames: DatePickerClasses,
         }),
         Divider: Divider.extend({
             defaultProps: {
-                color: 'gray.3',
+                color: 'var(--mantine-color-default-border)',
+            },
+        }),
+        Image: Image.extend({
+            defaultProps: {
+                fallbackSrc: placeholderSvg,
             },
         }),
         Input: Input.extend({
+            defaultProps: {
+                size: 'sm',
+            },
             classNames: (_theme, props) => {
                 const anyProps = props as any;
                 if (anyProps.readOnly && !props.disabled && !['Select'].includes(anyProps.__staticSelector)) {
@@ -203,45 +302,69 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
             },
         }),
         InputWrapper: InputWrapper.extend({
+            defaultProps: {
+                size: 'sm',
+            },
             classNames: InputWrapperClasses,
             vars: (theme, props) => {
                 const anyProps = props as any;
                 if (anyProps.disabled || (anyProps.readOnly && !['Select'].includes(anyProps.__staticSelector))) {
                     return {
+                        root: {
+                            '--input-margin-top': props?.label || props?.description ? theme.spacing.xxs : undefined,
+                        },
                         label: {'--input-asterisk-color': theme.colors.red[2]},
                         error: {},
                         description: {},
                     };
                 }
                 return {
+                    root: {'--input-margin-top': props?.label || props?.description ? theme.spacing.xxs : undefined},
                     label: {},
                     error: {},
                     description: {},
                 };
             },
         }),
+        PasswordInput: PasswordInput.extend({
+            vars: () => ({
+                root: {
+                    '--psi-button-size': 'var(--mantine-spacing-lg)',
+                },
+            }),
+        }),
         Loader: Loader.extend({
             defaultProps: {
-                type: 'dots',
-                color: 'action',
+                loaders: {...Loader.defaultLoaders, circle: CircleLoader},
+                type: 'circle',
                 role: 'presentation',
             },
         }),
         List: List.extend({
-            classNames: {root: ListClasses.root},
-        }),
-        MenuItem: MenuItem.extend({
-            defaultProps: {
-                fw: 300,
-            },
+            classNames: ListClasses,
         }),
         Modal: Modal.extend({
             classNames: ModalClasses,
+            vars: () => {
+                const sizes = {
+                    '--modal-size-xs': '432px',
+                    '--modal-size-sm': '664px',
+                    '--modal-size-md': '896px',
+                    '--modal-size-lg': '1120px',
+                    '--modal-size-xl': '88%',
+                } as any;
+                return {
+                    root: {
+                        ...sizes,
+                    },
+                };
+            },
         }),
         ModalOverlay: Modal.Overlay.extend({
             defaultProps: {
-                color: color.primary.navy[9],
-                backgroundOpacity: 0.9,
+                color: PlasmaColors.indigo[8],
+                backgroundOpacity: 0.7,
+                blur: 2,
             },
         }),
         ModalRoot: Modal.Root.extend({
@@ -249,32 +372,44 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
                 padding: 'lg',
             },
         }),
+        MonthPicker: MonthPicker.extend({
+            classNames: MonthPickerClasses,
+        }),
         MultiSelect: MultiSelect.extend({defaultProps: {hidePickedOptions: true}}),
         NavLink: NavLink.extend({classNames: NavLinkClasses}),
         Notification: Notification.extend({
+            classNames: NotificationClasses,
             defaultProps: {
-                icon: <InfoSize24Px height={24} />,
-                color: 'info',
+                icon: <IconInfoCircleFilled height={20} />,
             },
-            classNames: {
-                root: NotificationClasses.root,
-                icon: NotificationClasses.icon,
-                closeButton: NotificationClasses.closeButton,
-            },
-            vars: NotificationVars,
+        }),
+        NumberInput: NumberInput.extend({
+            classNames: NumberInputClasses,
         }),
         Pagination: Pagination.extend({
             classNames: PaginationClasses,
-            vars: () => ({root: {'--pagination-control-fz': 'var(--mantine-font-size-sm)'}}),
             defaultProps: {
                 nextIcon: ArrowHeadRightSize16Px,
                 previousIcon: ArrowHeadLeftSize16Px,
             },
         }),
+        Paper: Paper.extend({
+            classNames: PaperClasses,
+        }),
+        PickerInputBase: PickerInputBase.extend({
+            defaultProps: {
+                miw: 250,
+                leftSection: <IconCalendarWeek size={16} />,
+            },
+        }),
+        Pill: Pill.extend({
+            classNames: PillClasses,
+        }),
         Popover: Popover.extend({
+            classNames: PopoverClasses,
             defaultProps: {
-                shadow: 'md',
-                withArrow: true,
+                middlewares: {inline: true},
+                position: 'bottom-start',
             },
         }),
         Radio: Radio.extend({
@@ -296,32 +431,34 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
                 return {root: {}};
             },
         }),
+        RadioCard: Radio.Card.extend({
+            classNames: RadioCardClasses,
+        }),
         ScrollArea: ScrollArea.extend({
-            classNames: {viewport: ScrollAreaClasses.viewport},
+            classNames: ScrollAreaClasses,
         }),
         SegmentedControl: SegmentedControl.extend({
             classNames: SegmentedControlClasses,
         }),
         Select: Select.extend({
-            defaultProps: {withCheckIcon: false, allowDeselect: false},
-            classNames: {input: SelectClasses.input, option: SelectClasses.option},
+            defaultProps: {allowDeselect: false, withCheckIcon: false},
+            classNames: SelectClasses,
         }),
         Skeleton: Skeleton.extend({
-            classNames: {root: SkeletonClasses.root},
+            classNames: SkeletonClasses,
+        }),
+        Slider: Slider.extend({
+            defaultProps: {
+                size: 'md',
+            },
+            classNames: SliderClasses,
         }),
         Stepper: Stepper.extend({
             defaultProps: {
                 size: 'xs',
-                completedIcon: <CheckSize16Px />,
-            },
-            classNames: {
-                step: StepperClasses.step,
-                stepIcon: StepperClasses.stepIcon,
-                stepCompletedIcon: StepperClasses.stepCompletedIcon,
-                stepDescription: StepperClasses.stepDescription,
-                separator: StepperClasses.separator,
-                verticalSeparator: StepperClasses.verticalSeparator,
+                completedIcon: <IconCheck size={16} />,
             },
+            classNames: StepperClasses,
         }),
         Switch: Switch.extend({
             classNames: (theme, props) => {
@@ -345,33 +482,51 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
                 }
                 return {root: {}, track: {}, thumb: {}};
             },
+            defaultProps: {
+                withThumbIndicator: false,
+            },
+        }),
+        Table: Table.extend({
+            classNames: TableClasses,
+            vars: () => ({
+                table: {
+                    '--table-border-color': 'var(--mantine-color-default-border)',
+                },
+            }),
         }),
         Tabs: Tabs.extend({
             classNames: TabsClasses,
         }),
-        TabsTab: Tabs.Tab.extend({
+        Text: Text.extend({
             defaultProps: {
-                px: 'sm',
+                size: 'sm',
             },
-        }),
-        Text: Text.extend({
             classNames: TextClasses,
-            vars: TextVars,
         }),
-        TextInput: TextInput.extend({
+        TimeInput: TimeInput.extend({
             defaultProps: {
-                radius: 8,
+                rightSection: <IconClock size={16} />,
             },
         }),
+        TimePicker: TimePicker.extend({
+            defaultProps: {
+                withDropdown: true,
+                format: '12h',
+            },
+            classNames: TimePickerClasses,
+        }),
         Tooltip: Tooltip.extend({
             defaultProps: {
-                color: 'navy',
-                maw: 300,
+                maw: 280,
                 multiline: true,
                 withArrow: true,
                 zIndex: 10000,
+                color: PlasmaColors.violet[9],
             },
             classNames: TooltipClasses,
         }),
+        YearPicker: YearPicker.extend({
+            classNames: YearPickerClasses,
+        }),
     },
 });

package/src/theme/__tests__/plasmaCSSVariablesResolver.spec.ts

@@ -1,65 +1,21 @@
-import {MantineColorsTuple, MantineTheme} from '@mantine/core';
+import {createTheme, DEFAULT_THEME, mergeMantineTheme} from '@mantine/core';
+import {PlasmaColors} from '../PlasmaColors';
 import {plasmaCSSVariablesResolver} from '../plasmaCSSVariablesResolver';
 
-const gray: MantineColorsTuple = [
-    '#f5f5f5',
-    '#e7e7e7',
-    '#cdcdcd',
-    '#b2b2b2',
-    '#9a9a9a',
-    '#8b8b8b',
-    '#848484',
-    '#717171',
-    '#656565',
-    '#575757',
-];
-
-const red: MantineColorsTuple = [
-    '#ffe8e8',
-    '#ffcfcf',
-    '#ff9b9c',
-    '#ff6464',
-    '#fe3837',
-    '#fe1b19',
-    '#ff0909',
-    '#e40000',
-    '#cb0000',
-    '#b10000',
-];
-
-const blue: MantineColorsTuple = [
-    '#eaeaff',
-    '#cfd0ff',
-    '#9c9cff',
-    '#6464ff',
-    '#3736fe',
-    '#1b19fe',
-    '#0909ff',
-    '#0000e4',
-    '#0000cc',
-    '#0000b4',
-];
-
 describe('plasmaCSSVariablesResolver', () => {
-    it('creates a --mantine-color-<name>-light variable for each color of the theme that equals to the first shade of that color palette', () => {
-        const variables = plasmaCSSVariablesResolver({colors: {red, blue, gray}} as MantineTheme);
-        expect(variables.light['--mantine-color-red-light']).toBe(red[0]);
-        expect(variables.light['--mantine-color-blue-light']).toBe(blue[0]);
-    });
-
-    it('uses the second shade for --mantine-color-gray-light variable because our gray color is too light', () => {
-        const variables = plasmaCSSVariablesResolver({colors: {red, blue, gray}} as MantineTheme);
-        expect(variables.light['--mantine-color-gray-light']).toBe(gray[1]);
-    });
-
-    it('creates a --mantine-color-<name>-light-hover variable for each color of the theme that equals to the second shade of that color palette', () => {
-        const variables = plasmaCSSVariablesResolver({colors: {red, blue, gray}} as MantineTheme);
-        expect(variables.light['--mantine-color-red-light-hover']).toBe(red[1]);
-        expect(variables.light['--mantine-color-blue-light-hover']).toBe(blue[1]);
-    });
-
-    it('uses the third shade for --mantine-color-gray-light-hover variable because our gray color is too light', () => {
-        const variables = plasmaCSSVariablesResolver({colors: {red, blue, gray}} as MantineTheme);
-        expect(variables.light['--mantine-color-gray-light-hover']).toBe(gray[2]);
+    it('updates the error color', () => {
+        const themeOverride = createTheme({colors: PlasmaColors});
+        const theme = mergeMantineTheme(DEFAULT_THEME, themeOverride);
+        const variables = plasmaCSSVariablesResolver(theme);
+        expect(variables.light['--mantine-color-error']).toBe('#d2271b');
+        expect(variables.light['--mantine-color-default-border']).toBe('#dddfe3');
+        expect(variables.light['--coveo-app-background']).toBe('#f9f9fa');
+        expect(variables.light['--coveo-color-input-border']).toBe('#b9bdc7');
+        expect(variables.light['--mantine-color-text']).toBe('#3b3e46');
+        expect(variables.light['--mantine-color-dimmed']).toBe('#676d7a');
+        expect(variables.light['--mantine-color-gray-filled']).toBe('#959cab');
+        expect(variables.light['--mantine-color-gray-light']).toBe('rgba(59, 62, 70, 0.1)');
+        expect(variables.light['--mantine-color-gray-light-hover']).toBe('rgba(59, 62, 70, 0.16)');
+        expect(variables.light['--mantine-color-warning-filled']).toBe('#c89300');
     });
 });

package/src/theme/index.ts

@@ -1 +1,2 @@
+export * from './plasmaCSSVariablesResolver';
 export * from './Plasmantine';