npm - @coveord/plasma-mantine - Versions diffs - 55.7.2-next.20 → 55.7.2-next.21 - Mend

@coveord/plasma-mantine 55.7.2-next.20 → 55.7.2-next.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (82) hide show

package/dist/esm/theme/Theme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {\n ArrowHeadLeftSize16Px,\n ArrowHeadRightSize16Px,\n CheckSize16Px,\n CrossSize16Px,\n FilterSize16Px,\n IconSlash,\n InfoSize24Px,\n} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {\n Alert,\n AppShell,\n Badge,\n Breadcrumbs,\n Button,\n Checkbox,\n CloseButton,\n ColorSwatch,\n Combobox,\n ComboboxSearch,\n createTheme,\n deepMerge,\n Divider,\n Input,\n InputWrapper,\n List,\n Loader,\n MantineThemeOverride,\n Modal,\n MultiSelect,\n NavLink,\n Notification,\n Pagination,\n Popover,\n Radio,\n ScrollArea,\n SegmentedControl,\n Select,\n Skeleton,\n Stepper,\n Switch,\n Table,\n Tabs,\n Text,\n Tooltip,\n} from '@mantine/core';\nimport {InfoToken} from '../components';\nimport AlertClasses from '../styles/Alert.module.css';\nimport BadgeClasses from '../styles/Badge.module.css';\nimport BreadcrumbsClasses from '../styles/Breadcrumbs.module.css';\nimport ButtonClasses from '../styles/Button.module.css';\nimport CheckboxClasses from '../styles/Checkbox.module.css';\nimport CheckboxIndicatorClasses from '../styles/CheckboxIndicator.module.css';\nimport ComboboxClasses from '../styles/Combobox.module.css';\nimport InputClasses from '../styles/Input.module.css';\nimport InputWrapperClasses from '../styles/InputWrapper.module.css';\nimport ListClasses from '../styles/List.module.css';\nimport ModalClasses from '../styles/Modal.module.css';\nimport NavLinkClasses from '../styles/NavLink.module.css';\nimport PaginationClasses from '../styles/Pagination.module.css';\nimport RadioClasses from '../styles/Radio.module.css';\nimport ReadOnlyInputClasses from '../styles/ReadOnlyInput.module.css';\nimport ReadOnlyStateClasses from '../styles/ReadOnlyState.module.css';\nimport ScrollAreaClasses from '../styles/ScrollArea.module.css';\nimport SegmentedControlClasses from '../styles/SegmentedControl.module.css';\nimport SkeletonClasses from '../styles/Skeleton.module.css';\nimport StepperClasses from '../styles/Stepper.module.css';\nimport TableClasses from '../styles/Table.module.css';\nimport TabsClasses from '../styles/Tabs.module.css';\nimport TextClasses from '../styles/Text.module.css';\nimport TooltipClasses from '../styles/Tooltip.module.css';\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = createTheme({\n // These are overrides over https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/default-theme.ts\n fontFamily: 'canada-type-gibson, sans-serif',\n black: color.primary.gray[9],\n defaultRadius: 'md',\n lineHeights: {md: '1.5'},\n spacing: {\n xxs: '4px',\n xs: '8px',\n sm: '16px',\n md: '24px',\n lg: '32px',\n xl: '40px',\n },\n radius: {\n none: '0px',\n xs: '2px',\n sm: '4px',\n md: '8px',\n lg: '16px',\n xl: '24px',\n xxl: '32px',\n },\n primaryColor: 'blue',\n headings: {\n fontFamily: 'canada-type-gibson, sans-serif',\n fontWeight: '500',\n sizes: {\n h1: {fontSize: '40px', lineHeight: '1.2', fontWeight: '500'},\n h2: {fontSize: '32px', lineHeight: '1.25', fontWeight: '500'},\n h3: {fontSize: '24px', lineHeight: '1.33', fontWeight: '500'},\n h4: {fontSize: '18px', lineHeight: '1.2', fontWeight: '400'},\n h5: {fontSize: '16px', lineHeight: '1.25', fontWeight: '500'},\n h6: {fontSize: '12px', lineHeight: '1.33', fontWeight: '500'},\n },\n },\n fontSizes: {\n xs: '12px',\n sm: '14px',\n md: '16px',\n lg: '18px',\n xl: '20px',\n },\n shadows: {\n xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n },\n primaryShade: 5,\n colors: PlasmaColors,\n components: {\n AppShell: AppShell.extend({\n vars: (theme) =>\n ({\n root: {'--app-shell-border-color': theme.colors.gray[2]},\n }) as any,\n }),\n Alert: Alert.extend({\n defaultProps: {\n icon: <InfoToken variant=\"advice\" />,\n p: 'sm',\n },\n classNames: AlertClasses,\n }),\n Badge: Badge.extend({\n classNames: BadgeClasses,\n defaultProps: {\n variant: 'light',\n },\n }),\n Breadcrumbs: Breadcrumbs.extend({\n classNames: BreadcrumbsClasses,\n defaultProps: {\n separator: <IconSlash size={16} color=\"var(--mantine-color-dimmed)\" />,\n separatorMargin: 'xxs',\n },\n }),\n Button: Button.extend({\n defaultProps: {\n size: 'sm',\n },\n classNames: ButtonClasses,\n }),\n Checkbox: Checkbox.extend({\n defaultProps: {\n radius: 'sm',\n },\n classNames: (theme, props) => {\n if (props.readOnly && !props.disabled) {\n return deepMerge(CheckboxClasses, ReadOnlyStateClasses);\n }\n return CheckboxClasses;\n },\n vars: (theme, props) => {\n if (props.readOnly && !props.disabled) {\n return {\n root: {\n '--checkbox-icon-color': theme.colors.gray[7],\n '--checkbox-color': theme.colors.gray[2],\n },\n };\n }\n return {root: {}};\n },\n }),\n CheckboxIndicator: Checkbox.Indicator.extend({\n defaultProps: {\n radius: 'sm',\n },\n classNames: CheckboxIndicatorClasses,\n }),\n CloseButton: CloseButton.extend({\n defaultProps: {\n icon: <CrossSize16Px height={16} aria-label=\"close\" />,\n },\n }),\n ColorSwatch: ColorSwatch.extend({\n defaultProps: {\n size: 8,\n withShadow: false,\n },\n }),\n Combobox: Combobox.extend({\n classNames: ComboboxClasses,\n }),\n ComboboxSearch: ComboboxSearch.extend({\n defaultProps: {\n placeholder: 'Search',\n rightSection: <FilterSize16Px height={16} color=\"gray.5\" />,\n },\n }),\n Divider: Divider.extend({\n defaultProps: {\n color: 'var(--mantine-color-default-border)',\n },\n }),\n Input: Input.extend({\n defaultProps: {\n size: 'sm',\n },\n classNames: (_theme, props) => {\n const anyProps = props as any;\n if (anyProps.readOnly && !props.disabled && !['Select'].includes(anyProps.__staticSelector)) {\n return deepMerge(InputClasses, ReadOnlyInputClasses);\n }\n return InputClasses;\n },\n vars: (theme, props) => ({\n wrapper: {\n '--input-margin-top':\n props.wrapperProps?.label \|\| props.wrapperProps?.description ? theme.spacing.xxs : undefined,\n },\n }),\n }),\n InputWrapper: InputWrapper.extend({\n defaultProps: {\n size: 'sm',\n },\n classNames: InputWrapperClasses,\n vars: (theme, props) => {\n const anyProps = props as any;\n if (anyProps.disabled \|\| (anyProps.readOnly && !['Select'].includes(anyProps.__staticSelector))) {\n return {\n label: {'--input-asterisk-color': theme.colors.red[2]},\n error: {},\n description: {},\n };\n }\n return {\n label: {},\n error: {},\n description: {},\n };\n },\n }),\n Loader: Loader.extend({\n defaultProps: {\n type: 'dots',\n role: 'presentation',\n },\n }),\n List: List.extend({\n classNames: ListClasses,\n }),\n Modal: Modal.extend({\n classNames: ModalClasses,\n vars: () => {\n const sizes = {\n '--modal-size-xs': '432px',\n '--modal-size-sm': '664px',\n '--modal-size-md': '896px',\n '--modal-size-lg': '1120px',\n '--modal-size-xl': '88%',\n } as any;\n return {\n root: {\n ...sizes,\n },\n };\n },\n }),\n ModalOverlay: Modal.Overlay.extend({\n defaultProps: {\n color: PlasmaColors.indigo[8],\n backgroundOpacity: 0.7,\n blur: 2,\n },\n }),\n ModalRoot: Modal.Root.extend({\n defaultProps: {\n padding: 'lg',\n },\n }),\n MultiSelect: MultiSelect.extend({defaultProps: {hidePickedOptions: true}}),\n NavLink: NavLink.extend({classNames: NavLinkClasses}),\n Notification: Notification.extend({\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n },\n }),\n Pagination: Pagination.extend({\n classNames: PaginationClasses,\n defaultProps: {\n nextIcon: ArrowHeadRightSize16Px,\n previousIcon: ArrowHeadLeftSize16Px,\n },\n }),\n Popover: Popover.extend({\n defaultProps: {\n shadow: 'md',\n withArrow: true,\n },\n }),\n Radio: Radio.extend({\n classNames: (theme, props) => {\n if (props.readOnly && !props.disabled) {\n return deepMerge(RadioClasses, ReadOnlyStateClasses);\n }\n return RadioClasses;\n },\n vars: (theme, props) => {\n if (props.readOnly && !props.disabled) {\n return {\n root: {\n '--radio-icon-color': theme.colors.gray[7],\n '--radio-color': theme.colors.gray[2],\n },\n };\n }\n return {root: {}};\n },\n }),\n ScrollArea: ScrollArea.extend({\n classNames: ScrollAreaClasses,\n }),\n SegmentedControl: SegmentedControl.extend({\n classNames: SegmentedControlClasses,\n }),\n Select: Select.extend({\n defaultProps: {allowDeselect: false},\n }),\n Skeleton: Skeleton.extend({\n classNames: SkeletonClasses,\n }),\n Stepper: Stepper.extend({\n defaultProps: {\n size: 'xs',\n completedIcon: <CheckSize16Px />,\n },\n classNames: StepperClasses,\n }),\n Switch: Switch.extend({\n classNames: (theme, props) => {\n if (props.readOnly && !props.disabled) {\n return ReadOnlyStateClasses;\n }\n return {};\n },\n vars: (theme, props) => {\n if (props.readOnly && !props.disabled) {\n return {\n root: {},\n track: {\n '--switch-bg': theme.colors.gray[2],\n '--switch-bd': 'transparent',\n },\n thumb: {\n '--switch-thumb-bd': 'transparent',\n },\n };\n }\n return {root: {}, track: {}, thumb: {}};\n },\n }),\n Table: Table.extend({\n classNames: TableClasses,\n vars: () => ({\n table: {\n '--table-border-color': 'var(--mantine-color-default-border)',\n },\n }),\n }),\n Tabs: Tabs.extend({\n classNames: TabsClasses,\n }),\n Text: Text.extend({\n defaultProps: {\n size: 'sm',\n },\n classNames: TextClasses,\n }),\n Tooltip: Tooltip.extend({\n defaultProps: {\n maw: 300,\n multiline: true,\n withArrow: true,\n zIndex: 10000,\n },\n classNames: TooltipClasses,\n }),\n },\n});\n"],"names":["ArrowHeadLeftSize16Px","ArrowHeadRightSize16Px","CheckSize16Px","CrossSize16Px","FilterSize16Px","IconSlash","InfoSize24Px","color","Alert","AppShell","Badge","Breadcrumbs","Button","Checkbox","CloseButton","ColorSwatch","Combobox","ComboboxSearch","createTheme","deepMerge","Divider","Input","InputWrapper","List","Loader","Modal","MultiSelect","NavLink","Notification","Pagination","Popover","Radio","ScrollArea","SegmentedControl","Select","Skeleton","Stepper","Switch","Table","Tabs","Text","Tooltip","InfoToken","AlertClasses","BadgeClasses","BreadcrumbsClasses","ButtonClasses","CheckboxClasses","CheckboxIndicatorClasses","ComboboxClasses","InputClasses","InputWrapperClasses","ListClasses","ModalClasses","NavLinkClasses","PaginationClasses","RadioClasses","ReadOnlyInputClasses","ReadOnlyStateClasses","ScrollAreaClasses","SegmentedControlClasses","SkeletonClasses","StepperClasses","TableClasses","TabsClasses","TextClasses","TooltipClasses","PlasmaColors","plasmaTheme","fontFamily","black","primary","gray","defaultRadius","lineHeights","md","spacing","xxs","xs","sm","lg","xl","radius","none","xxl","primaryColor","headings","fontWeight","sizes","h1","fontSize","lineHeight","h2","h3","h4","h5","h6","fontSizes","shadows","primaryShade","colors","components","extend","vars","theme","root","defaultProps","icon","variant","p","classNames","separator","size","separatorMargin","props","readOnly","disabled","CheckboxIndicator","Indicator","height","aria-label","withShadow","placeholder","rightSection","_theme","anyProps","includes","__staticSelector","wrapper","wrapperProps","label","description","undefined","red","error","type","role","ModalOverlay","Overlay","indigo","backgroundOpacity","blur","ModalRoot","Root","padding","hidePickedOptions","nextIcon","previousIcon","shadow","withArrow","allowDeselect","completedIcon","track","thumb","table","maw","multiline","zIndex"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {\n ArrowHeadLeftSize16Px,\n ArrowHeadRightSize16Px,\n CheckSize16Px,\n CrossSize16Px,\n FilterSize16Px,\n IconSlash,\n InfoSize24Px,\n} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {\n ActionIcon,\n Alert,\n AppShell,\n Badge,\n Breadcrumbs,\n Button,\n Checkbox,\n CloseButton,\n ColorSwatch,\n Combobox,\n ComboboxSearch,\n createTheme,\n deepMerge,\n Divider,\n Input,\n InputWrapper,\n List,\n Loader,\n MantineThemeOverride,\n Modal,\n MultiSelect,\n NavLink,\n Notification,\n Pagination,\n Popover,\n Radio,\n ScrollArea,\n SegmentedControl,\n Select,\n Skeleton,\n Stepper,\n Switch,\n Table,\n Tabs,\n Text,\n Tooltip,\n} from '@mantine/core';\nimport {InfoToken} from '../components';\nimport ActionIconClasses from '../styles/ActionIcon.module.css';\nimport AlertClasses from '../styles/Alert.module.css';\nimport BadgeClasses from '../styles/Badge.module.css';\nimport BreadcrumbsClasses from '../styles/Breadcrumbs.module.css';\nimport ButtonClasses from '../styles/Button.module.css';\nimport CheckboxClasses from '../styles/Checkbox.module.css';\nimport CheckboxIndicatorClasses from '../styles/CheckboxIndicator.module.css';\nimport ComboboxClasses from '../styles/Combobox.module.css';\nimport InputClasses from '../styles/Input.module.css';\nimport InputWrapperClasses from '../styles/InputWrapper.module.css';\nimport ListClasses from '../styles/List.module.css';\nimport ModalClasses from '../styles/Modal.module.css';\nimport NavLinkClasses from '../styles/NavLink.module.css';\nimport PaginationClasses from '../styles/Pagination.module.css';\nimport RadioClasses from '../styles/Radio.module.css';\nimport ReadOnlyInputClasses from '../styles/ReadOnlyInput.module.css';\nimport ReadOnlyStateClasses from '../styles/ReadOnlyState.module.css';\nimport ScrollAreaClasses from '../styles/ScrollArea.module.css';\nimport SegmentedControlClasses from '../styles/SegmentedControl.module.css';\nimport SkeletonClasses from '../styles/Skeleton.module.css';\nimport StepperClasses from '../styles/Stepper.module.css';\nimport TableClasses from '../styles/Table.module.css';\nimport TabsClasses from '../styles/Tabs.module.css';\nimport TextClasses from '../styles/Text.module.css';\nimport TooltipClasses from '../styles/Tooltip.module.css';\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = createTheme({\n // These are overrides over https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/default-theme.ts\n fontFamily: 'canada-type-gibson, sans-serif',\n black: color.primary.gray[9],\n defaultRadius: 'md',\n lineHeights: {md: '1.5'},\n spacing: {\n xxs: '4px',\n xs: '8px',\n sm: '16px',\n md: '24px',\n lg: '32px',\n xl: '40px',\n },\n radius: {\n none: '0px',\n xs: '2px',\n sm: '4px',\n md: '8px',\n lg: '16px',\n xl: '24px',\n xxl: '32px',\n },\n primaryColor: 'blue',\n headings: {\n fontFamily: 'canada-type-gibson, sans-serif',\n fontWeight: '500',\n sizes: {\n h1: {fontSize: '40px', lineHeight: '1.2', fontWeight: '500'},\n h2: {fontSize: '32px', lineHeight: '1.25', fontWeight: '500'},\n h3: {fontSize: '24px', lineHeight: '1.33', fontWeight: '500'},\n h4: {fontSize: '18px', lineHeight: '1.2', fontWeight: '400'},\n h5: {fontSize: '16px', lineHeight: '1.25', fontWeight: '500'},\n h6: {fontSize: '12px', lineHeight: '1.33', fontWeight: '500'},\n },\n },\n fontSizes: {\n xs: '12px',\n sm: '14px',\n md: '16px',\n lg: '18px',\n xl: '20px',\n },\n shadows: {\n xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n },\n primaryShade: 5,\n colors: PlasmaColors,\n components: {\n ActionIcon: ActionIcon.extend({\n defaultProps: {\n size: 24,\n radius: 'sm',\n },\n classNames: ActionIconClasses,\n }),\n AppShell: AppShell.extend({\n vars: (theme) =>\n ({\n root: {'--app-shell-border-color': theme.colors.gray[2]},\n }) as any,\n }),\n Alert: Alert.extend({\n defaultProps: {\n icon: <InfoToken variant=\"advice\" />,\n p: 'sm',\n },\n classNames: AlertClasses,\n }),\n Badge: Badge.extend({\n classNames: BadgeClasses,\n defaultProps: {\n variant: 'light',\n },\n }),\n Breadcrumbs: Breadcrumbs.extend({\n classNames: BreadcrumbsClasses,\n defaultProps: {\n separator: <IconSlash size={16} color=\"var(--mantine-color-dimmed)\" />,\n separatorMargin: 'xxs',\n },\n }),\n Button: Button.extend({\n defaultProps: {\n size: 'sm',\n },\n classNames: ButtonClasses,\n }),\n Checkbox: Checkbox.extend({\n defaultProps: {\n radius: 'sm',\n },\n classNames: (theme, props) => {\n if (props.readOnly && !props.disabled) {\n return deepMerge(CheckboxClasses, ReadOnlyStateClasses);\n }\n return CheckboxClasses;\n },\n vars: (theme, props) => {\n if (props.readOnly && !props.disabled) {\n return {\n root: {\n '--checkbox-icon-color': theme.colors.gray[7],\n '--checkbox-color': theme.colors.gray[2],\n },\n };\n }\n return {root: {}};\n },\n }),\n CheckboxIndicator: Checkbox.Indicator.extend({\n defaultProps: {\n radius: 'sm',\n },\n classNames: CheckboxIndicatorClasses,\n }),\n CloseButton: CloseButton.extend({\n defaultProps: {\n icon: <CrossSize16Px height={16} aria-label=\"close\" />,\n },\n }),\n ColorSwatch: ColorSwatch.extend({\n defaultProps: {\n size: 8,\n withShadow: false,\n },\n }),\n Combobox: Combobox.extend({\n classNames: ComboboxClasses,\n }),\n ComboboxSearch: ComboboxSearch.extend({\n defaultProps: {\n placeholder: 'Search',\n rightSection: <FilterSize16Px height={16} color=\"gray.5\" />,\n },\n }),\n Divider: Divider.extend({\n defaultProps: {\n color: 'var(--mantine-color-default-border)',\n },\n }),\n Input: Input.extend({\n defaultProps: {\n size: 'sm',\n },\n classNames: (_theme, props) => {\n const anyProps = props as any;\n if (anyProps.readOnly && !props.disabled && !['Select'].includes(anyProps.__staticSelector)) {\n return deepMerge(InputClasses, ReadOnlyInputClasses);\n }\n return InputClasses;\n },\n vars: (theme, props) => ({\n wrapper: {\n '--input-margin-top':\n props.wrapperProps?.label \|\| props.wrapperProps?.description ? theme.spacing.xxs : undefined,\n },\n }),\n }),\n InputWrapper: InputWrapper.extend({\n defaultProps: {\n size: 'sm',\n },\n classNames: InputWrapperClasses,\n vars: (theme, props) => {\n const anyProps = props as any;\n if (anyProps.disabled \|\| (anyProps.readOnly && !['Select'].includes(anyProps.__staticSelector))) {\n return {\n label: {'--input-asterisk-color': theme.colors.red[2]},\n error: {},\n description: {},\n };\n }\n return {\n label: {},\n error: {},\n description: {},\n };\n },\n }),\n Loader: Loader.extend({\n defaultProps: {\n type: 'dots',\n role: 'presentation',\n },\n }),\n List: List.extend({\n classNames: ListClasses,\n }),\n Modal: Modal.extend({\n classNames: ModalClasses,\n vars: () => {\n const sizes = {\n '--modal-size-xs': '432px',\n '--modal-size-sm': '664px',\n '--modal-size-md': '896px',\n '--modal-size-lg': '1120px',\n '--modal-size-xl': '88%',\n } as any;\n return {\n root: {\n ...sizes,\n },\n };\n },\n }),\n ModalOverlay: Modal.Overlay.extend({\n defaultProps: {\n color: PlasmaColors.indigo[8],\n backgroundOpacity: 0.7,\n blur: 2,\n },\n }),\n ModalRoot: Modal.Root.extend({\n defaultProps: {\n padding: 'lg',\n },\n }),\n MultiSelect: MultiSelect.extend({defaultProps: {hidePickedOptions: true}}),\n NavLink: NavLink.extend({classNames: NavLinkClasses}),\n Notification: Notification.extend({\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n },\n }),\n Pagination: Pagination.extend({\n classNames: PaginationClasses,\n defaultProps: {\n nextIcon: ArrowHeadRightSize16Px,\n previousIcon: ArrowHeadLeftSize16Px,\n },\n }),\n Popover: Popover.extend({\n defaultProps: {\n shadow: 'md',\n withArrow: true,\n },\n }),\n Radio: Radio.extend({\n classNames: (theme, props) => {\n if (props.readOnly && !props.disabled) {\n return deepMerge(RadioClasses, ReadOnlyStateClasses);\n }\n return RadioClasses;\n },\n vars: (theme, props) => {\n if (props.readOnly && !props.disabled) {\n return {\n root: {\n '--radio-icon-color': theme.colors.gray[7],\n '--radio-color': theme.colors.gray[2],\n },\n };\n }\n return {root: {}};\n },\n }),\n ScrollArea: ScrollArea.extend({\n classNames: ScrollAreaClasses,\n }),\n SegmentedControl: SegmentedControl.extend({\n classNames: SegmentedControlClasses,\n }),\n Select: Select.extend({\n defaultProps: {allowDeselect: false},\n }),\n Skeleton: Skeleton.extend({\n classNames: SkeletonClasses,\n }),\n Stepper: Stepper.extend({\n defaultProps: {\n size: 'xs',\n completedIcon: <CheckSize16Px />,\n },\n classNames: StepperClasses,\n }),\n Switch: Switch.extend({\n classNames: (theme, props) => {\n if (props.readOnly && !props.disabled) {\n return ReadOnlyStateClasses;\n }\n return {};\n },\n vars: (theme, props) => {\n if (props.readOnly && !props.disabled) {\n return {\n root: {},\n track: {\n '--switch-bg': theme.colors.gray[2],\n '--switch-bd': 'transparent',\n },\n thumb: {\n '--switch-thumb-bd': 'transparent',\n },\n };\n }\n return {root: {}, track: {}, thumb: {}};\n },\n }),\n Table: Table.extend({\n classNames: TableClasses,\n vars: () => ({\n table: {\n '--table-border-color': 'var(--mantine-color-default-border)',\n },\n }),\n }),\n Tabs: Tabs.extend({\n classNames: TabsClasses,\n }),\n Text: Text.extend({\n defaultProps: {\n size: 'sm',\n },\n classNames: TextClasses,\n }),\n Tooltip: Tooltip.extend({\n defaultProps: {\n maw: 300,\n multiline: true,\n withArrow: true,\n zIndex: 10000,\n },\n classNames: TooltipClasses,\n }),\n },\n});\n"],"names":["ArrowHeadLeftSize16Px","ArrowHeadRightSize16Px","CheckSize16Px","CrossSize16Px","FilterSize16Px","IconSlash","InfoSize24Px","color","ActionIcon","Alert","AppShell","Badge","Breadcrumbs","Button","Checkbox","CloseButton","ColorSwatch","Combobox","ComboboxSearch","createTheme","deepMerge","Divider","Input","InputWrapper","List","Loader","Modal","MultiSelect","NavLink","Notification","Pagination","Popover","Radio","ScrollArea","SegmentedControl","Select","Skeleton","Stepper","Switch","Table","Tabs","Text","Tooltip","InfoToken","ActionIconClasses","AlertClasses","BadgeClasses","BreadcrumbsClasses","ButtonClasses","CheckboxClasses","CheckboxIndicatorClasses","ComboboxClasses","InputClasses","InputWrapperClasses","ListClasses","ModalClasses","NavLinkClasses","PaginationClasses","RadioClasses","ReadOnlyInputClasses","ReadOnlyStateClasses","ScrollAreaClasses","SegmentedControlClasses","SkeletonClasses","StepperClasses","TableClasses","TabsClasses","TextClasses","TooltipClasses","PlasmaColors","plasmaTheme","fontFamily","black","primary","gray","defaultRadius","lineHeights","md","spacing","xxs","xs","sm","lg","xl","radius","none","xxl","primaryColor","headings","fontWeight","sizes","h1","fontSize","lineHeight","h2","h3","h4","h5","h6","fontSizes","shadows","primaryShade","colors","components","extend","defaultProps","size","classNames","vars","theme","root","icon","variant","p","separator","separatorMargin","props","readOnly","disabled","CheckboxIndicator","Indicator","height","aria-label","withShadow","placeholder","rightSection","_theme","anyProps","includes","__staticSelector","wrapper","wrapperProps","label","description","undefined","red","error","type","role","ModalOverlay","Overlay","indigo","backgroundOpacity","blur","ModalRoot","Root","padding","hidePickedOptions","nextIcon","previousIcon","shadow","withArrow","allowDeselect","completedIcon","track","thumb","table","maw","multiline","zIndex"],"mappings":"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"}

package/dist/esm/theme/plasmaCSSVariablesResolver.js CHANGED Viewed

@@ -4,7 +4,7 @@ export const plasmaCSSVariablesResolver = (theme)=>{
         dark: {},
         light: {
             // custom colors
-            '--coveo-color-input-border': theme.colors.gray[2],
+            '--coveo-color-input-border': theme.colors.gray[3],
             '--coveo-color-title': theme.colors.gray[8],
             '--coveo-color-text-disabled': theme.colors.gray[3],
             // mantine overrides

package/dist/esm/theme/plasmaCSSVariablesResolver.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/theme/plasmaCSSVariablesResolver.ts"],"sourcesContent":["import {ConvertCSSVariablesInput, CSSVariablesResolver} from '@mantine/core';\n\nexport const plasmaCSSVariablesResolver: CSSVariablesResolver = (theme) => {\n const result: ConvertCSSVariablesInput = {\n variables: {},\n dark: {},\n light: {\n // custom colors\n '--coveo-color-input-border': theme.colors.gray[2],\n '--coveo-color-title': theme.colors.gray[8],\n '--coveo-color-text-disabled': theme.colors.gray[3],\n\n // mantine overrides\n '--mantine-color-default-border': theme.colors.gray[2],\n '--mantine-color-error': theme.colors.red[5],\n '--mantine-color-text': theme.colors.gray[6],\n '--mantine-color-dimmed': theme.colors.gray[5],\n '--mantine-color-gray-filled': theme.colors.gray[4],\n '--mantine-color-gray-light': theme.colors.gray[0],\n '--mantine-color-gray-light-hover': theme.colors.gray[1],\n '--mantine-color-warning-filled': theme.colors.yellow[4],\n '--mantine-color-placeholder': theme.colors.gray[4],\n },\n };\n return result;\n};\n"],"names":["plasmaCSSVariablesResolver","theme","result","variables","dark","light","colors","gray","red","yellow"],"mappings":"AAEA,OAAO,MAAMA,6BAAmD,CAACC;IAC7D,MAAMC,SAAmC;QACrCC,WAAW,CAAC;QACZC,MAAM,CAAC;QACPC,OAAO;YACH,gBAAgB;YAChB,8BAA8BJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YAClD,uBAAuBN,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3C,+BAA+BN,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YAEnD,oBAAoB;YACpB,kCAAkCN,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YACtD,yBAAyBN,MAAMK,MAAM,CAACE,GAAG,CAAC,EAAE;YAC5C,wBAAwBP,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YAC5C,0BAA0BN,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YAC9C,+BAA+BN,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YACnD,8BAA8BN,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YAClD,oCAAoCN,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YACxD,kCAAkCN,MAAMK,MAAM,CAACG,MAAM,CAAC,EAAE;YACxD,+BAA+BR,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QACvD;IACJ;IACA,OAAOL;AACX,EAAE"}
1	+ {"version":3,"sources":["../../../src/theme/plasmaCSSVariablesResolver.ts"],"sourcesContent":["import {ConvertCSSVariablesInput, CSSVariablesResolver} from '@mantine/core';\n\nexport const plasmaCSSVariablesResolver: CSSVariablesResolver = (theme) => {\n const result: ConvertCSSVariablesInput = {\n variables: {},\n dark: {},\n light: {\n // custom colors\n '--coveo-color-input-border': theme.colors.gray[3],\n '--coveo-color-title': theme.colors.gray[8],\n '--coveo-color-text-disabled': theme.colors.gray[3],\n\n // mantine overrides\n '--mantine-color-default-border': theme.colors.gray[2],\n '--mantine-color-error': theme.colors.red[5],\n '--mantine-color-text': theme.colors.gray[6],\n '--mantine-color-dimmed': theme.colors.gray[5],\n '--mantine-color-gray-filled': theme.colors.gray[4],\n '--mantine-color-gray-light': theme.colors.gray[0],\n '--mantine-color-gray-light-hover': theme.colors.gray[1],\n '--mantine-color-warning-filled': theme.colors.yellow[4],\n '--mantine-color-placeholder': theme.colors.gray[4],\n },\n };\n return result;\n};\n"],"names":["plasmaCSSVariablesResolver","theme","result","variables","dark","light","colors","gray","red","yellow"],"mappings":"AAEA,OAAO,MAAMA,6BAAmD,CAACC;IAC7D,MAAMC,SAAmC;QACrCC,WAAW,CAAC;QACZC,MAAM,CAAC;QACPC,OAAO;YACH,gBAAgB;YAChB,8BAA8BJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YAClD,uBAAuBN,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3C,+BAA+BN,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YAEnD,oBAAoB;YACpB,kCAAkCN,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YACtD,yBAAyBN,MAAMK,MAAM,CAACE,GAAG,CAAC,EAAE;YAC5C,wBAAwBP,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YAC5C,0BAA0BN,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YAC9C,+BAA+BN,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YACnD,8BAA8BN,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YAClD,oCAAoCN,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YACxD,kCAAkCN,MAAMK,MAAM,CAACG,MAAM,CAAC,EAAE;YACxD,+BAA+BR,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QACvD;IACJ;IACA,OAAOL;AACX,EAAE"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "55.7.2-next.20",
+  "version": "55.7.2-next.21",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -42,8 +42,8 @@
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.52.2",
-    "@coveord/plasma-react-icons": "55.7.2-next.15",
-    "@coveord/plasma-tokens": "55.7.2-next.14"
+    "@coveord/plasma-tokens": "55.7.2-next.14",
+    "@coveord/plasma-react-icons": "55.7.2-next.15"
   },
   "devDependencies": {
     "@mantine/carousel": "7.17.3",

package/src/components/action-icon/ActionIcon.tsx CHANGED Viewed

@@ -26,6 +26,14 @@ type ActionIconOverloadFactory = Factory<{
     variant: ActionIconVariant;
     staticComponents: {
         Group: typeof ActionIconGroup;
+        Primary: typeof ActionIconPrimary;
+        Secondary: typeof ActionIconSecondary;
+        Tertiary: typeof ActionIconTertiary;
+        Quaternary: typeof ActionIconQuaternary;
+        DestructivePrimary: typeof ActionIconDestructive;
+        DestructiveSecondary: typeof ActionIconDestructiveSecondary;
+        DestructiveTertiary: typeof ActionIconDestructiveTertiary;
+        DestructiveQuaternary: typeof ActionIconDestructiveQuaternary;
     };
 }>;
@@ -51,4 +59,29 @@ export const ActionIcon = polymorphicFactory<ActionIconOverloadFactory>(
         );
     },
 );
+const ActionIconPrimary = ActionIcon.withProps({variant: 'filled'});
+const ActionIconSecondary = ActionIcon.withProps({variant: 'light'});
+const ActionIconTertiary = ActionIcon.withProps({
+    variant: 'default',
+    vars: () => ({root: {'--ai-color': 'var(--mantine-primary-color-filled)'}}),
+});
+const ActionIconQuaternary = ActionIcon.withProps({variant: 'subtle'});
+const ActionIconDestructive = ActionIcon.withProps({variant: 'filled', color: 'var(--mantine-color-error)'});
+const ActionIconDestructiveSecondary = ActionIcon.withProps({variant: 'light', color: 'var(--mantine-color-error)'});
+const ActionIconDestructiveTertiary = ActionIcon.withProps({
+    variant: 'default',
+    vars: () => ({root: {'--ai-color': 'var(--mantine-color-error)'}}),
+});
+const ActionIconDestructiveQuaternary = ActionIcon.withProps({variant: 'subtle', color: 'var(--mantine-color-error)'});
 ActionIcon.Group = MantineActionIcon.Group;
+ActionIcon.Primary = ActionIconPrimary;
+ActionIcon.Secondary = ActionIconSecondary;
+ActionIcon.Tertiary = ActionIconTertiary;
+ActionIcon.Quaternary = ActionIconQuaternary;
+ActionIcon.DestructivePrimary = ActionIconDestructive;
+ActionIcon.DestructiveSecondary = ActionIconDestructiveSecondary;
+ActionIcon.DestructiveTertiary = ActionIconDestructiveTertiary;
+ActionIcon.DestructiveQuaternary = ActionIconDestructiveQuaternary;

package/src/components/code-editor/search/Search.tsx CHANGED Viewed

@@ -1,14 +1,15 @@
-import {SearchSize16Px} from '@coveord/plasma-react-icons';
-import {ActionIcon} from '@mantine/core';
+import {IconSearch} from '@coveord/plasma-react-icons';
+import {FunctionComponent} from 'react';
+import {ActionIcon} from '../../action-icon';
 export interface SearchProps {
     handleSearch: () => void;
 }
-const SearchButton: React.FunctionComponent<SearchProps> = ({handleSearch}) => (
-    <ActionIcon onClick={handleSearch} variant="subtle" color="gray">
-        <SearchSize16Px height={16}></SearchSize16Px>
-    </ActionIcon>
+const SearchButton: FunctionComponent<SearchProps> = ({handleSearch}) => (
+    <ActionIcon.Quaternary onClick={handleSearch}>
+        <IconSearch aria-label="Search" size={20} />
+    </ActionIcon.Quaternary>
 );
-export const Search: React.FunctionComponent<SearchProps> = ({...params}) => <SearchButton {...params} />;
+export const Search: FunctionComponent<SearchProps> = ({...params}) => <SearchButton {...params} />;

package/src/components/collection/Collection.tsx CHANGED Viewed

@@ -1,18 +1,16 @@
-import {AddSize16Px} from '@coveord/plasma-react-icons';
+import {IconCirclePlus} from '@coveord/plasma-react-icons';
 import {DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';
 import {restrictToParentElement, restrictToVerticalAxis} from '@dnd-kit/modifiers';
 import {SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy} from '@dnd-kit/sortable';
 import {
+    __InputWrapperProps,
     Box,
     BoxProps,
     Factory,
-    Group,
     Input,
     MantineSpacing,
     Stack,
     StylesApiProps,
-    Tooltip,
-    __InputWrapperProps,
     useProps,
     useStyles,
 } from '@mantine/core';
@@ -253,19 +251,14 @@ export const Collection = <T,>(props: CollectionProps<T> & {ref?: ForwardedRef<H
     const addAllowed = allowAdd?.(value) ?? true;
     const _addButton = canEdit ? (
-        <Group>
-            <Tooltip label={addDisabledTooltip} disabled={addAllowed}>
-                <Box>
-                    <Button.Quaternary
-                        leftSection={<AddSize16Px height={16} />}
-                        onClick={() => onInsertItem(newItem, value?.length ?? 0)}
-                        disabled={!addAllowed}
-                    >
-                        {addLabel}
-                    </Button.Quaternary>
-                </Box>
-            </Tooltip>
-        </Group>
+        <Button.Quaternary
+            leftSection={<IconCirclePlus size={16} />}
+            onClick={() => onInsertItem(newItem, value?.length ?? 0)}
+            disabled={!addAllowed}
+            disabledTooltip={addDisabledTooltip}
+        >
+            {addLabel}
+        </Button.Quaternary>
     ) : null;
     const getIndex = (id: string) => standardizedItems.findIndex((item) => item.id === id);

package/src/components/collection/CollectionItem.tsx CHANGED Viewed

@@ -1,9 +1,10 @@
-import {DragAndDropSize24Px, RemoveSize16Px} from '@coveord/plasma-react-icons';
+import {DragAndDropSize24Px, IconCircleMinus} from '@coveord/plasma-react-icons';
 import {useSortable} from '@dnd-kit/sortable';
 import {CSS} from '@dnd-kit/utilities';
-import {ActionIcon, Group, GroupProps} from '@mantine/core';
+import {Group, GroupProps} from '@mantine/core';
 import {FunctionComponent, PropsWithChildren} from 'react';
+import {ActionIcon} from '../action-icon';
 import {useCollectionContext} from './CollectionContext';
 interface CollectionItemProps extends CollectionItemSharedProps {
@@ -20,9 +21,9 @@ interface CollectionItemSharedProps extends GroupProps {
 const RemoveButton: FunctionComponent<{
     onClick: React.MouseEventHandler<HTMLButtonElement>;
 }> = ({onClick}) => (
-    <ActionIcon style={{alignSelf: 'center'}} variant="subtle" onClick={onClick}>
-        <RemoveSize16Px height={16} />
-    </ActionIcon>
+    <ActionIcon.Quaternary style={{alignSelf: 'center'}} onClick={onClick}>
+        <IconCircleMinus aria-label="Remove" size={20} />
+    </ActionIcon.Quaternary>
 );
 const RemoveButtonPlaceholder = () => <div style={{width: 28}} />;

package/src/components/copyToClipboard/CopyToClipboard.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import {IconClipboardCheck, IconClipboardText} from '@coveord/plasma-react-icons';
-import {ActionIcon, ActionIconProps, CopyButton, MantineColor, TextInput, Tooltip} from '@mantine/core';
+import {ActionIconProps, CopyButton, MantineColor, TextInput, Tooltip} from '@mantine/core';
 import {FunctionComponent, MouseEventHandler} from 'react';
+import {ActionIcon} from '../action-icon';
 export interface CopyToClipboardProps extends ActionIconProps {
     /**
@@ -48,9 +49,8 @@ const CopyToClipboardButton: FunctionComponent<Omit<CopyToClipboardProps, 'withL
     <CopyButton value={value} timeout={2000}>
         {({copied, copy}) => (
             <Tooltip label={copied ? tooltipLabelCopied : tooltipLabelCopy}>
-                <ActionIcon
+                <ActionIcon.Quaternary
                     aria-label={tooltipLabelCopy}
-                    variant="subtle"
                     color={copied ? 'success' : color}
                     onClick={(clickEvent) => {
                         copy();
@@ -59,7 +59,7 @@ const CopyToClipboardButton: FunctionComponent<Omit<CopyToClipboardProps, 'withL
                     {...others}
                 >
                     {copied ? <IconClipboardCheck size={20} /> : <IconClipboardText size={20} />}
-                </ActionIcon>
+                </ActionIcon.Quaternary>
             </Tooltip>
         )}
     </CopyButton>

package/src/components/table/__tests__/TableFilter.spec.tsx CHANGED Viewed

@@ -76,7 +76,7 @@ describe('Table.Filter', () => {
         };
         render(<Fixture />);
         expect(screen.getByRole('textbox')).toHaveValue('foo');
-        await user.click(screen.getByRole('button', {name: /cross/i}));
+        await user.click(screen.getByRole('button', {name: /clear/i}));
         expect(screen.getByRole('textbox')).toHaveValue('');
     });

package/src/components/table/layouts/__tests__/RowLayout.spec.tsx CHANGED Viewed

@@ -111,11 +111,11 @@ describe('RowLayout', () => {
         render(<Fixture />);
         // wait for the collapsible icon to show
-        await screen.findByRole('button', {name: 'arrowHeadDown'});
+        await screen.findByRole('button', {name: 'Expand'});
         expect(screen.queryByText('Collapsible content: last')).not.toBeVisible();
-        await user.click(screen.getByRole('button', {name: 'arrowHeadDown'}));
+        await user.click(screen.getByRole('button', {name: 'Expand'}));
         await waitFor(() => {
             expect(screen.queryByText('Collapsible content: last')).toBeVisible();
         });
@@ -156,9 +156,9 @@ describe('RowLayout', () => {
         render(<Fixture />);
         // wait for the collapsible icon to show
-        await screen.findAllByRole('button', {name: 'arrowHeadDown'});
+        await screen.findAllByRole('button', {name: 'Expand'});
-        const allRows = screen.getAllByRole('button', {name: 'arrowHeadDown'});
+        const allRows = screen.getAllByRole('button', {name: 'Expand'});
         expect(allRows).toHaveLength(2);
     });
@@ -190,18 +190,18 @@ describe('RowLayout', () => {
         render(<Fixture />);
         // wait for the collapsible icon to show
-        await screen.findAllByRole('button', {name: 'arrowHeadDown'});
+        await screen.findAllByRole('button', {name: 'Expand'});
         expect(screen.queryByText('Collapsible content: Russel')).not.toBeVisible();
         expect(screen.queryByText('Collapsible content: Retriever')).not.toBeVisible();
-        await user.click(within(screen.getAllByRole('row')[1]).getByRole('button', {name: 'arrowHeadDown'}));
+        await user.click(within(screen.getAllByRole('row')[1]).getByRole('button', {name: 'Expand'}));
         await waitFor(() => {
             expect(screen.queryByText('Collapsible content: Russel')).toBeVisible();
         });
         expect(screen.queryByText('Collapsible content: Retriever')).not.toBeVisible();
-        await user.click(within(screen.getAllByRole('row')[3]).getByRole('button', {name: 'arrowHeadDown'}));
+        await user.click(within(screen.getAllByRole('row')[3]).getByRole('button', {name: 'Expand'}));
         await waitFor(() => {
             expect(screen.queryByText('Collapsible content: Retriever')).toBeVisible();

package/src/components/table/table-actions/TableActionsList.tsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import {MoreSize16Px} from '@coveord/plasma-react-icons';
 import {
-    ActionIcon,
     Box,
     CompoundStylesApiProps,
     CSSProperties,
@@ -12,6 +11,7 @@ import {
     useProps,
 } from '@mantine/core';
 import {MouseEventHandler, ReactNode, useState} from 'react';
+import {ActionIcon} from '../../action-icon';
 import {Button} from '../../button';
 import {InlineConfirm} from '../../inline-confirm';
 import {TableAction} from '../Table.types';
@@ -158,13 +158,12 @@ export const TableActionsList = (props: TableActionsListProps) => {
                 <Menu opened={opened} onChange={onChange} {...others} keepMounted>
                     <Menu.Target>
                         <Tooltip label={label} {...getStyles('actionsTooltip', {styles, classNames})}>
-                            <ActionIcon
+                            <ActionIcon.Quaternary
                                 {...getStyles('actionsTarget', {styles, classNames})}
                                 onClick={onClick}
-                                variant="subtle"
                             >
                                 {icon}
-                            </ActionIcon>
+                            </ActionIcon.Quaternary>
                         </Tooltip>
                     </Menu.Target>
                     <Menu.Dropdown {...getStyles('actionsDropdown', {styles, classNames})}>

package/src/components/table/table-column/TableCollapsibleColumn.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import {ArrowHeadDownSize16Px, ArrowHeadUpSize16Px} from '@coveord/plasma-react-icons';
+import {IconChevronDown, IconChevronUp} from '@coveord/plasma-react-icons';
 import {Factory, factory, useProps} from '@mantine/core';
 import {CellContext, ColumnDef} from '@tanstack/table-core';
 import {MouseEvent as ReactMouseEvent, ReactNode} from 'react';
@@ -58,8 +58,8 @@ type TableCollapsibleColumnFactory = Factory<{
 }>;
 const defaultProps: Partial<CollapsibleIconProps> = {
-    iconExpanded: <ArrowHeadUpSize16Px height={16} />,
-    iconCollapsed: <ArrowHeadDownSize16Px height={16} />,
+    iconExpanded: <IconChevronUp aria-label="Collapse" size={20} />,
+    iconCollapsed: <IconChevronDown aria-label="Expand" size={20} />,
 };
 const CollapsibleIcon = factory<TableCollapsibleColumnFactory>((props, ref) => {
@@ -76,16 +76,15 @@ const CollapsibleIcon = factory<TableCollapsibleColumnFactory>((props, ref) => {
         handler();
     };
     return info.row.getCanExpand() ? (
-        <ActionIcon
+        <ActionIcon.Quaternary
             ref={ref}
             onClick={onClick}
-            variant="subtle"
             color="gray"
             radius="sm"
             {...getStyles('collapsibleIcon', {className, classNames, styles, style})}
             {...others}
         >
             {info.row.getIsExpanded() ? iconExpanded : iconCollapsed}
-        </ActionIcon>
+        </ActionIcon.Quaternary>
     ) : null;
 });

package/src/components/table/table-filter/TableFilter.tsx CHANGED Viewed

@@ -1,8 +1,9 @@
-import {CrossSize16Px, FilterSize16Px} from '@coveord/plasma-react-icons';
-import {ActionIcon, BoxProps, CompoundStylesApiProps, Factory, Grid, TextInput, factory, useProps} from '@mantine/core';
+import {IconSearch, IconX} from '@coveord/plasma-react-icons';
+import {BoxProps, CompoundStylesApiProps, Factory, factory, Grid, TextInput, useProps} from '@mantine/core';
 import {useDebouncedValue, useDidUpdate} from '@mantine/hooks';
 import {ChangeEventHandler, MouseEventHandler, useEffect, useState} from 'react';
+import {ActionIcon} from '../../action-icon';
 import {TableComponentsOrder} from '../Table';
 import {useTableContext} from '../TableContext';
@@ -74,11 +75,11 @@ export const TableFilter = factory<TableFilterFactory>((props, ref) => {
                 autoComplete="off"
                 rightSection={
                     filter ? (
-                        <ActionIcon onClick={handleClear} color="gray" variant="subtle">
-                            <CrossSize16Px height={16} />
-                        </ActionIcon>
+                        <ActionIcon.Quaternary onClick={handleClear}>
+                            <IconX aria-label="clear" size={20} />
+                        </ActionIcon.Quaternary>
                     ) : (
-                        <FilterSize16Px height={16} {...getStyles('filterEmpty', stylesApiProps)} />
+                        <IconSearch size={20} {...getStyles('filterEmpty', stylesApiProps)} />
                     )
                 }
                 value={filter}

package/src/styles/ActionIcon.module.css ADDED Viewed

@@ -0,0 +1,7 @@
+.root {
+    &[data-variant='subtle'] {
+        &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
+            background: transparent;
+        }
+    }
+}

package/src/theme/Theme.tsx CHANGED Viewed

@@ -9,6 +9,7 @@ import {
 } from '@coveord/plasma-react-icons';
 import {color} from '@coveord/plasma-tokens';
 import {
+    ActionIcon,
     Alert,
     AppShell,
     Badge,
@@ -46,6 +47,7 @@ import {
     Tooltip,
 } from '@mantine/core';
 import {InfoToken} from '../components';
+import ActionIconClasses from '../styles/ActionIcon.module.css';
 import AlertClasses from '../styles/Alert.module.css';
 import BadgeClasses from '../styles/Badge.module.css';
 import BreadcrumbsClasses from '../styles/Breadcrumbs.module.css';
@@ -125,6 +127,13 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
     primaryShade: 5,
     colors: PlasmaColors,
     components: {
+        ActionIcon: ActionIcon.extend({
+            defaultProps: {
+                size: 24,
+                radius: 'sm',
+            },
+            classNames: ActionIconClasses,
+        }),
         AppShell: AppShell.extend({
             vars: (theme) =>
                 ({

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

@@ -7,7 +7,7 @@ describe('plasmaCSSVariablesResolver', () => {
         const variables = plasmaCSSVariablesResolver({colors: PlasmaColors} as unknown as MantineTheme);
         expect(variables.light['--mantine-color-error']).toBe('#d2271b');
         expect(variables.light['--mantine-color-default-border']).toBe('#dddfe3');
-        expect(variables.light['--coveo-color-input-border']).toBe('#dddfe3');
+        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');

package/src/theme/plasmaCSSVariablesResolver.ts CHANGED Viewed

@@ -6,7 +6,7 @@ export const plasmaCSSVariablesResolver: CSSVariablesResolver = (theme) => {
         dark: {},
         light: {
             // custom colors
-            '--coveo-color-input-border': theme.colors.gray[2],
+            '--coveo-color-input-border': theme.colors.gray[3],
             '--coveo-color-title': theme.colors.gray[8],
             '--coveo-color-text-disabled': theme.colors.gray[3],