@coveord/plasma-mantine 56.2.6 → 56.3.1

package/src/components/collection/__tests__/Collection.spec.tsx

@@ -431,4 +431,45 @@ describe('Collection', () => {
             });
         });
     });
+
+    describe('form validation', () => {
+        it('triggers validation when items are removed and displays error', async () => {
+            const user = userEvent.setup();
+            const Fixture = () => {
+                const form = useForm({
+                    validateInputOnChange: true,
+                    initialValues: {fruits: ['banana', 'orange']},
+                    validate: {
+                        fruits: (value) => (value.length < 2 ? 'Need at least 2 items' : null),
+                    },
+                    enhanceGetInputProps: (payload) => ({
+                        ...enhanceWithCollectionProps(payload, 'fruits', {validateInputOnChange: true}),
+                    }),
+                });
+                return (
+                    <>
+                        <Collection newItem="new" {...form.getInputProps('fruits')}>
+                            {(name) => <span>{name}</span>}
+                        </Collection>
+                        <div data-testid="form-errors">{JSON.stringify(form.errors)}</div>
+                    </>
+                );
+            };
+
+            render(<Fixture />);
+
+            // Initially no errors
+            expect(screen.getByTestId('form-errors')).toHaveTextContent('{}');
+
+            // Remove one item to get below minimum
+            const removeBanana = await within(screen.getByTestId('item-0')).findByRole('button', {name: /remove/i});
+            await user.click(removeBanana);
+
+            // Should show validation error
+            expect(screen.getByTestId('form-errors')).toHaveTextContent('{"fruits":"Need at least 2 items"}');
+
+            // Error should also be displayed in the UI
+            expect(screen.getByText('Need at least 2 items')).toBeInTheDocument();
+        });
+    });
 });

package/src/components/collection/enhanceWithCollectionProps.ts

@@ -7,14 +7,23 @@ export const enhanceWithCollectionProps = <
 >(
     payload: Parameters<UseFormInput<FormValues, TransformValues>['enhanceGetInputProps']>[0],
     field: (typeof payload)['field'],
+    options?: {validateInputOnChange?: boolean},
 ): Pick<CollectionProps<unknown>, 'onReorderItem' | 'onInsertItem' | 'onRemoveItem'> => {
     if (payload.field === field) {
+        const {validateInputOnChange = false} = options || {};
         return {
-            onReorderItem: (reorderPayload: Record<'from' | 'to', number>) =>
-                payload.form.reorderListItem(field, reorderPayload),
-            onRemoveItem: (index: number) => payload.form.removeListItem(field, index),
-            onInsertItem: (valueToInsert: unknown, index: number) =>
-                payload.form.insertListItem(field, valueToInsert, index),
+            onReorderItem: (reorderPayload: Record<'from' | 'to', number>) => {
+                payload.form.reorderListItem(field, reorderPayload);
+                validateInputOnChange && payload.form.validate();
+            },
+            onRemoveItem: (index: number) => {
+                payload.form.removeListItem(field, index);
+                validateInputOnChange && payload.form.validate();
+            },
+            onInsertItem: (valueToInsert: unknown, index: number) => {
+                payload.form.insertListItem(field, valueToInsert, index);
+                validateInputOnChange && payload.form.validate();
+            },
         };
     }
 

package/src/components/copyToClipboard/CopyToClipboard.tsx

@@ -1,7 +1,7 @@
 import {IconClipboardCheck, IconClipboardText} from '@coveord/plasma-react-icons';
 import {ActionIconProps, CopyButton, MantineColor, TextInput, Tooltip} from '@mantine/core';
 import {FunctionComponent, MouseEventHandler} from 'react';
-import {ActionIcon} from '../action-icon/index.js';
+import {ActionIcon} from '../action-icon/ActionIcon.js';
 
 export interface CopyToClipboardProps extends ActionIconProps {
     /**

package/src/components/date-range-picker/DateRangePickerInlineCalendar.tsx

@@ -3,7 +3,7 @@ import {DatePicker, DatePickerBaseProps, type DateStringValue, type DatesRangeVa
 import {useForm} from '@mantine/form';
 
 import dayjs from 'dayjs';
-import {Button} from '../button/index.js';
+import {Button} from '../button/Button.js';
 import DateRangeClasses from './DateRange.module.css';
 import {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect.js';
 import {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker.js';

package/src/components/header/Header.module.css

@@ -12,6 +12,7 @@
 
 .title {
     word-break: break-word;
+    color: var(--coveo-color-title);
 }
 
 .docAnchor {

package/src/components/header/HeaderDocAnchor/HeaderDocAnchor.tsx

@@ -10,7 +10,7 @@ import {
 } from '@mantine/core';
 import {ReactNode} from 'react';
 import {useHeaderContext} from '../Header.context.js';
-import {InfoToken} from '../../info-token/index.js';
+import {InfoToken} from '../../info-token/InfoToken.js';
 
 export type HeaderDocAnchorStyleNames = 'docAnchorTooltip' | 'docAnchor';
 

package/src/components/info-token/InfoToken.tsx

@@ -64,11 +64,10 @@ const colorResolver = (variant: InfoTokenVariant): string => {
         case 'error':
             return 'var(--mantine-color-error)';
         case 'advice':
-            return 'var(--mantine-primary-color-filled)';
         case 'question':
-            return 'var(--mantine-primary-color-filled)';
+            return 'var(--coveo-color-text-primary)';
         case 'warning':
-            return 'var(--mantine-color-yellow-4)';
+            return 'var(--mantine-color-warning-filled)';
         case 'information':
         default:
             return 'var(--mantine-color-gray-3)';

package/src/components/inline-confirm/InlineConfirmTarget.tsx

@@ -1,6 +1,6 @@
 import {createPolymorphicComponent} from '@mantine/core';
 import {forwardRef, MouseEventHandler} from 'react';
-import {Button, ButtonProps} from '../button/index.js';
+import {Button, type ButtonProps} from '../button/Button.js';
 import {InlineConfirmComponentsProps} from './InlineConfirm.js';
 import {useInlineConfirm} from './InlineConfirmContext.js';
 

package/src/components/menu/Menu.tsx

@@ -1,9 +1,9 @@
 import {Menu as MantineMenu, MenuItemProps as MantineMenuItemProps} from '@mantine/core';
 import {forwardRef} from 'react';
 
-import {createPolymorphicComponent, overrideComponent} from '../../utils/index.js';
-import {ButtonWithDisabledTooltipProps} from '../button/index.js';
-import {ButtonWithDisabledTooltip} from '../button/ButtonWithDisabledTooltip.js';
+import {createPolymorphicComponent} from '../../utils/createPolymorphicComponent.js';
+import {overrideComponent} from '../../utils/overrideComponent.js';
+import {ButtonWithDisabledTooltip, ButtonWithDisabledTooltipProps} from '../button/ButtonWithDisabledTooltip.js';
 
 export interface MenuItemProps extends MantineMenuItemProps, ButtonWithDisabledTooltipProps {}
 

package/src/components/modal/Modal.tsx

@@ -4,7 +4,7 @@ import {
     ModalFactory as MantineModalFactory,
     ModalProps as MantineModalProps,
 } from '@mantine/core';
-import {Header, HeaderDocAnchorProps, HeaderProps} from '../header/index.js';
+import {Header, type HeaderDocAnchorProps, type HeaderProps} from '../header/Header.js';
 import {ModalFooter as PlasmaModalFooter} from './ModalFooter.js';
 
 interface PlasmaModalProps extends MantineModalProps {

package/src/components/modal/ModalFooter.tsx

@@ -1,6 +1,6 @@
 import {useRef, useEffect} from 'react';
 import {Factory, factory} from '@mantine/core';
-import {StickyFooter, StickyFooterProps, StickyFooterStylesNames} from '../sticky-footer/index.js';
+import {StickyFooter, type StickyFooterProps, type StickyFooterStylesNames} from '../sticky-footer/StickyFooter.js';
 import classes from './ModalFooter.module.css';
 
 export interface ModalFooterProps extends Omit<StickyFooterProps, 'variant'> {}

package/src/components/prompt/Prompt.tsx

@@ -10,7 +10,7 @@ import {
     useStyles,
 } from '@mantine/core';
 import {Children, ComponentType, ReactElement, ReactNode} from 'react';
-import {Modal} from '../modal/index.js';
+import {Modal} from '../modal/Modal.js';
 import {PromptContextProvider} from './Prompt.context.js';
 import classes from './Prompt.module.css';
 import {PromptCancelButton, PromptCancelButtonStylesNamesVariant} from './PromptCancelButton.js';

package/src/components/table/Table.module.css

@@ -5,6 +5,8 @@
 .table {
     width: 100%;
     padding-bottom: var(--mantine-spacing-sm);
+    border-collapse: collapse;
+    border-spacing: 0;
 }
 
 .header {
@@ -67,7 +69,7 @@
 /* Table.Header */
 .headerRoot {
     border-bottom: 1px solid var(--mantine-color-default-border);
-    background-color: var(--mantine-color-gray-0);
+    background-color: var(--coveo-app-background);
     padding: var(--mantine-spacing-sm) var(--mantine-spacing-xl);
     position: relative;
     min-height: 69px;
@@ -90,7 +92,7 @@
     vertical-align: middle;
     white-space: nowrap;
     text-align: left;
-    color: var(--mantine-color-gray-6);
+    color: var(--mantine-color-text);
     height: var(--mantine-spacing-xl);
     font-weight: var(--coveo-fw-bold);
     font-size: var(--mantine-font-size-sm);
@@ -103,11 +105,11 @@
         padding-right: var(--mantine-spacing-xl);
     }
 
-    background-color: var(--mantine-color-gray-0);
+    background-color: var(--coveo-app-background);
 
     &[data-control='true'] {
         @mixin hover {
-            background-color: var(--mantine-color-gray-1);
+            background-color: var(--mantine-color-default-hover);
         }
     }
 }
@@ -117,7 +119,7 @@
 }
 
 .lastUpdatedLabel {
-    color: var(--mantine-color-gray-6);
+    color: var(--mantine-color-text);
 }
 
 /* Table.Predicate */

package/src/components/table/Table.tsx

@@ -10,12 +10,13 @@ import {
 } from '@tanstack/react-table';
 import isEqual from 'fast-deep-equal';
 import {Children, ForwardedRef, ReactElement, useEffect, useRef} from 'react';
-import {CustomComponentThemeExtend, identity} from '../../utils/index.js';
+import {CustomComponentThemeExtend, identity} from '../../utils/createFactoryComponent.js';
 import classes from './Table.module.css';
 import {TableLayout, TableProps} from './Table.types.js';
 import {TableProvider} from './TableContext.js';
 import {TableLayouts} from './layouts/TableLayouts.js';
-import {TableActionItem, TableActionItemStylesNames, TableHeaderActionsStylesNames} from './table-actions/index.js';
+import {TableActionItem, TableActionItemStylesNames} from './table-actions/TableActionItem.js';
+import {TableHeaderActionsStylesNames} from './table-actions/TableHeaderActions.js';
 import {TableActionsListStylesNames} from './table-actions/TableActionsList.js';
 import {TableActionsColumn} from './table-column/TableActionsColumn.js';
 import {

package/src/components/table/layouts/row-layout/RowLayout.tsx

@@ -1,7 +1,7 @@
 import {IconList} from '@coveord/plasma-react-icons';
 import {Factory, MantineComponent, StylesApiProps, useProps, useStyles} from '@mantine/core';
 import {ReactNode} from 'react';
-import {identity} from '../../../../utils/index.js';
+import {identity} from '../../../../utils/createFactoryComponent.js';
 import {TableLayout} from '../../Table.types.js';
 import classes from './RowLayout.module.css';
 import {RowLayoutBody, RowLayoutBodyStylesNames} from './RowLayoutBody.js';

package/src/components/table/layouts/row-layout/RowLayoutBody.tsx

@@ -2,7 +2,7 @@ import {Box, BoxProps, Collapse, CompoundStylesApiProps, Factory, useProps} from
 import {flexRender} from '@tanstack/react-table';
 import {defaultColumnSizing} from '@tanstack/table-core';
 import {ForwardedRef, Fragment, type MouseEvent} from 'react';
-import {CustomComponentThemeExtend, identity} from '../../../../utils/index.js';
+import {CustomComponentThemeExtend, identity} from '../../../../utils/createFactoryComponent.js';
 import {TableLayoutProps} from '../../Table.types.js';
 import {useTableContext} from '../../TableContext.js';
 import {TableCollapsibleColumn} from '../../table-column/TableCollapsibleColumn.js';

package/src/components/table/layouts/row-layout/RowLayoutHeader.tsx

@@ -1,6 +1,6 @@
 import {BoxProps, CompoundStylesApiProps, Factory, useProps} from '@mantine/core';
 import {ForwardedRef} from 'react';
-import {CustomComponentThemeExtend, identity} from '../../../../utils/index.js';
+import {CustomComponentThemeExtend, identity} from '../../../../utils/createFactoryComponent.js';
 import {TableLayoutProps} from '../../Table.types.js';
 import {useTableContext} from '../../TableContext.js';
 import {Th} from '../../table-header/Th.js';

package/src/components/table/table-actions/TableActionItem.tsx

@@ -1,9 +1,9 @@
 import {CompoundStylesApiProps, PolymorphicFactory, polymorphicFactory, useProps} from '@mantine/core';
 import {ReactNode} from 'react';
-import {Button, ButtonProps} from '../../button/index.js';
+import {Button, type ButtonProps} from '../../button/Button.js';
 import {useTableContext} from '../TableContext.js';
 import {useTableActionContext} from './TableActionContext.js';
-import {Menu, MenuItemProps} from '../../menu/index.js';
+import {Menu, type MenuItemProps} from '../../menu/Menu.js';
 
 export type TableActionItemStylesNames = 'actionItemRoot';
 

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

@@ -11,9 +11,9 @@ import {
     useProps,
 } from '@mantine/core';
 import {MouseEventHandler, ReactNode, useState} from 'react';
-import {ActionIcon} from '../../action-icon/index.js';
-import {Button} from '../../button/index.js';
-import {InlineConfirm} from '../../inline-confirm/index.js';
+import {ActionIcon} from '../../action-icon/ActionIcon.js';
+import {Button} from '../../button/Button.js';
+import {InlineConfirm} from '../../inline-confirm/InlineConfirm.js';
 import {TableAction} from '../Table.types.js';
 import {useTableContext} from '../TableContext.js';
 import {TableActionProvider} from './TableActionContext.js';

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

@@ -2,7 +2,7 @@ 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';
-import {ActionIcon, ActionIconProps} from '../../action-icon/index.js';
+import {ActionIcon, type ActionIconProps} from '../../action-icon/ActionIcon.js';
 import {useTableContext} from '../TableContext.js';
 
 export type TableCollapsibleColumnStylesNames = 'collapsibleIcon';

package/src/components/table/table-date-range-picker/TableDateRangePicker.tsx

@@ -7,8 +7,8 @@ import {useState} from 'react';
 import {
     DateRangePickerInlineCalendar,
     DateRangePickerInlineCalendarProps,
-    DateRangePickerPreset,
-} from '../../date-range-picker/index.js';
+} from '../../date-range-picker/DateRangePickerInlineCalendar.js';
+import {DateRangePickerPreset} from '../../date-range-picker/DateRangePickerPresetSelect.js';
 import {TableComponentsOrder} from '../Table.js';
 import {useTableContext} from '../TableContext.js';
 

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

@@ -3,7 +3,7 @@ import {BoxProps, CompoundStylesApiProps, Factory, factory, Grid, TextInput, use
 import {useDebouncedValue, useDidUpdate} from '@mantine/hooks';
 import {ChangeEventHandler, MouseEventHandler, useEffect, useState} from 'react';
 
-import {ActionIcon} from '../../action-icon/index.js';
+import {ActionIcon} from '../../action-icon/ActionIcon.js';
 import {TableComponentsOrder} from '../Table.js';
 import {useTableContext} from '../TableContext.js';
 

package/src/components/table/table-header/TableHeader.tsx

@@ -2,10 +2,10 @@ import {CrossSize16Px} from '@coveord/plasma-react-icons';
 import {Box, BoxProps, CompoundStylesApiProps, factory, Factory, Grid, Tooltip, useProps} from '@mantine/core';
 import {ReactNode} from 'react';
 
-import {Button} from '../../button/index.js';
+import {Button} from '../../button/Button.js';
 import {TableLayoutControl} from '../layouts/TableLayoutControl.js';
 import {TableComponentsOrder} from '../Table.js';
-import {TableHeaderActions} from '../table-actions/index.js';
+import {TableHeaderActions} from '../table-actions/TableHeaderActions.js';
 import {useTableContext} from '../TableContext.js';
 
 export type TableHeaderStylesNames = 'headerRoot' | 'headerGrid' | 'headerGridInner' | 'headerCol';

package/src/components/table/table-header/Th.tsx

@@ -2,7 +2,7 @@ import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@cov
 import {BoxProps, CompoundStylesApiProps, Factory, Group, UnstyledButton, useProps} from '@mantine/core';
 import {Header, defaultColumnSizing, flexRender} from '@tanstack/react-table';
 import {AriaAttributes, ComponentType, ForwardedRef, SVGProps} from 'react';
-import {CustomComponentThemeExtend, identity} from '../../../utils/index.js';
+import {CustomComponentThemeExtend, identity} from '../../../utils/createFactoryComponent.js';
 import {useTableContext} from '../TableContext.js';
 
 export type TableThStylesNames = 'th';

package/src/index.ts

@@ -11,37 +11,130 @@ export * from '@mantine/hooks';
 export * from '@mantine/notifications';
 export {type NotificationsProps} from '@mantine/notifications';
 export * from '@tanstack/table-core';
-export * from './components/index.js';
-export {noop};
 
-// explicitly overriding mantine components
+// Export all components
+// Accordion
+export {Accordion} from './components/accordion/Accordion.js';
+
+// Action Icon - override Mantine ActionIcon
+export {ActionIcon, type ActionIconProps} from './components/action-icon/ActionIcon.js';
+
+// Alert - override Mantine Alert
+export {Alert} from './components/alert/Alert.js';
+
+// Badge - override Mantine Badge
 export {
-    Accordion,
-    ActionIcon,
-    Alert,
     Badge,
-    BrowserPreview,
-    Button,
-    Chip,
-    CopyToClipboard,
+    type BadgeOverloadFactory,
+    type SemanticBadge,
+    type SemanticBadgeProps,
+} from './components/badge/Badge.js';
+
+// Blank Slate
+export * from './components/blank-slate/BlankSlate.js';
+
+// Browser Preview
+export * from './components/browser-preview/BrowserPreview.js';
+
+// Button - override Mantine Button
+export {Button, type ButtonProps} from './components/button/Button.js';
+export {type ButtonWithDisabledTooltipProps} from './components/button/ButtonWithDisabledTooltip.js';
+
+// Checkbox
+export * from './components/checkbox/CheckboxIcon.js';
+
+// Child Form
+export * from './components/child-form/ChildForm.js';
+
+// Chip - override Mantine Chip
+export {Chip} from './components/chip/Chip.js';
+
+// Code Editor
+export * from './components/code-editor/CodeEditor.js';
+
+// Collection
+export * from './components/collection/Collection.js';
+export {enhanceWithCollectionProps} from './components/collection/enhanceWithCollectionProps.js';
+
+// Copy to Clipboard
+export * from './components/copyToClipboard/CopyToClipboard.js';
+
+// Date Range Picker
+export * from './components/date-range-picker/DateRangePickerInlineCalendar.js';
+export * from './components/date-range-picker/DateRangePickerPopoverCalendar.js';
+export * from './components/date-range-picker/DateRangePickerPresetSelect.js';
+
+// Date Time Range Picker
+export * from './components/date-time-range-picker/DateTimeRangePicker.js';
+
+// Ellipsis Text
+export * from './components/ellipsis-text/EllipsisText.js';
+
+// Header - override @tanstack/table-core Header
+export {
     Header,
-    Menu,
-    Modal,
-    PasswordInput,
-    Select,
-    Table,
-    type ActionIconProps,
-    type ButtonProps,
-    type CopyToClipboardProps,
+    type HeaderBreadcrumbsProps,
+    type HeaderDocAnchorProps,
+    type HeaderFactory,
     type HeaderProps,
-    type MenuItemProps,
-    type ModalFactory,
-    type ModalProps,
+    type HeaderRightProps,
+    type HeaderStyleNames,
+    type HeaderVariant,
+} from './components/header/Header.js';
+
+// Info Token
+export * from './components/info-token/InfoToken.js';
+
+// Inline Confirm
+export * from './components/inline-confirm/InlineConfirm.js';
+export * from './components/inline-confirm/InlineConfirmContext.js';
+
+// Last Updated
+export * from './components/last-updated/LastUpdated.js';
+
+// Loader
+export * from './components/loader/CircleLoader.js';
+
+// Menu - override Mantine Menu
+export {Menu, type MenuItemProps} from './components/menu/Menu.js';
+
+// Modal - override Mantine Modal
+export {Modal, type ModalFactory, type ModalProps} from './components/modal/Modal.js';
+export * from './components/modal/ModalFooter.js';
+
+// Prompt
+export * from './components/prompt/Prompt.js';
+
+// Read Only - override Mantine PasswordInput and Select
+export {PasswordInput} from './components/read-only/PasswordInput.js';
+export {Select} from './components/read-only/Select.js';
+
+// Sticky Footer
+export * from './components/sticky-footer/StickyFooter.js';
+
+// Table - override Mantine Table
+export {flexRender as renderTableCell} from '@tanstack/react-table';
+export {Table, TableComponentsOrder, type PlasmaTableFactory} from './components/table/Table.js';
+export {type TablePredicateProps} from './components/table/table-predicate/TablePredicate.js';
+export {
+    type TableAction,
+    type TableLayout,
+    type TableLayoutProps,
     type TableProps,
-    type TableState,
-} from './components/index.js';
+} from './components/table/Table.types.js';
+export {useTableContext} from './components/table/TableContext.js';
+export {useTable, type TableState, type TableStore, type UseTableOptions} from './components/table/use-table.js';
+export {
+    useUrlSyncedState,
+    type UseUrlSyncedStateOptions,
+    type SearchParamEntry,
+} from './components/table/use-url-synced-state.js';
+
+export {noop};
 
-export * from './theme/index.js';
+// Theme
+export * from './theme/plasmaCSSVariablesResolver.js';
+export * from './theme/Plasmantine.js';
 
 declare module '@mantine/core' {
     export interface MantineThemeColorsOverride {

package/src/styles/DatePicker.module.css

@@ -1,6 +1,4 @@
 .day {
-    border-radius: var(--mantine-radius-default);
-
     @mixin hover {
         &:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) {
             @mixin light {
@@ -10,6 +8,10 @@
     }
 
     &:where([data-weekend]) {
-        color: var(--mantine-color-error);
+        color: var(--mantine-color-text);
+
+        &:where([data-selected]) {
+            color: var(--mantine-primary-color-contrast);
+        }
     }
 }

package/src/styles/DateTimePicker.module.css

@@ -0,0 +1,17 @@
+.day {
+    @mixin hover {
+        &:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) {
+            @mixin light {
+                background-color: var(--mantine-color-default-hover);
+            }
+        }
+    }
+
+    &:where([data-weekend]) {
+        color: var(--mantine-color-text);
+
+        &:where([data-selected]) {
+            color: var(--mantine-primary-color-contrast);
+        }
+    }
+}

package/src/styles/Input.module.css

@@ -31,6 +31,12 @@
     }
 }
 
+.input {
+    @mixin dark {
+        --input-bg: var(--mantine-color-default);
+    }
+}
+
 .section {
     > svg {
         color: var(--mantine-color-gray-3);

package/src/styles/Radio.module.css

@@ -1,43 +1,38 @@
 .labelWrapper {
     display: flex;
     align-items: flex-start;
+    color: var(--coveo-color-title);
 
-    @mixin light {
-        color: var(--coveo-color-title);
-
-        &[data-disabled] {
-            .label,
-            .description {
-                color: var(--mantine-color-disabled-color);
-            }
+    &[data-disabled] {
+        .label,
+        .description {
+            color: var(--mantine-color-disabled-color);
         }
     }
 }
 
 .radio {
-    @mixin light {
-        &:not(:checked, [readonly], :disabled, [data-error='true']) {
-            border-color: var(--coveo-color-input-border);
-        }
+    &:not(:checked, [readonly], :disabled, [data-error='true']) {
+        border-color: var(--coveo-color-input-border);
+    }
 
-        &:disabled {
-            background-color: var(--mantine-color-disabled);
-            border-color: var(--mantine-color-default-border);
+    &:disabled {
+        background-color: var(--mantine-color-disabled);
+        border-color: var(--mantine-color-default-border);
 
-            & + .icon {
-                color: var(--mantine-color-placeholder);
-            }
+        & + .icon {
+            color: var(--mantine-color-placeholder);
         }
+    }
 
-        /* mantine hardcodes disabled styles so we need to write custom styles */
-        &[readonly] {
-            border-color: var(--mantine-color-default-border);
-            background-color: var(--coveo-color-bg-readonly);
-            color: var(--coveo-color-text-readonly);
+    /* mantine hardcodes disabled styles so we need to write custom styles */
+    &[readonly] {
+        border-color: var(--mantine-color-default-border);
+        background-color: var(--coveo-color-bg-readonly);
+        color: var(--coveo-color-text-readonly);
 
-            & + .icon {
-                color: var(--coveo-color-text-readonly);
-            }
+        & + .icon {
+            color: var(--coveo-color-text-readonly);
         }
     }
 }

package/src/styles/ReadOnlyInput.module.css

@@ -2,7 +2,7 @@
     cursor: text;
 
     --input-bd: var(--mantine-color-default-border);
-    --input-bg: var(--mantine-color-gray-1);
+    --input-bg: var(--coveo-color-bg-readonly);
     --input-color: var(--mantine-color-text);
     --input-placeholder-color: var(--mantine-color-text);
 }