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

package/src/theme/Theme.tsx

@@ -46,7 +46,7 @@ import {
     Text,
     Tooltip,
 } from '@mantine/core';
-import {InfoToken} from '../components';
+import {CheckboxIcon, CircleLoader, InfoToken} from '../components';
 import ActionIconClasses from '../styles/ActionIcon.module.css';
 import AlertClasses from '../styles/Alert.module.css';
 import BadgeClasses from '../styles/Badge.module.css';
@@ -66,6 +66,7 @@ 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 StepperClasses from '../styles/Stepper.module.css';
 import TableClasses from '../styles/Table.module.css';
@@ -151,6 +152,7 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
             classNames: BadgeClasses,
             defaultProps: {
                 variant: 'light',
+                tt: 'none',
             },
         }),
         Breadcrumbs: Breadcrumbs.extend({
@@ -169,6 +171,7 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
         Checkbox: Checkbox.extend({
             defaultProps: {
                 radius: 'sm',
+                icon: CheckboxIcon,
             },
             classNames: (theme, props) => {
                 if (props.readOnly && !props.disabled) {
@@ -176,21 +179,11 @@ 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,
         }),
@@ -260,7 +253,8 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
         }),
         Loader: Loader.extend({
             defaultProps: {
-                type: 'dots',
+                loaders: {...Loader.defaultLoaders, circle: CircleLoader},
+                type: 'circle',
                 role: 'presentation',
             },
         }),
@@ -342,7 +336,8 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
             classNames: SegmentedControlClasses,
         }),
         Select: Select.extend({
-            defaultProps: {allowDeselect: false},
+            defaultProps: {allowDeselect: false, withCheckIcon: false},
+            classNames: SelectClasses,
         }),
         Skeleton: Skeleton.extend({
             classNames: SkeletonClasses,

package/src/theme/plasmaCSSVariablesResolver.ts

@@ -1,4 +1,4 @@
-import {ConvertCSSVariablesInput, CSSVariablesResolver} from '@mantine/core';
+import {alpha, ConvertCSSVariablesInput, CSSVariablesResolver} from '@mantine/core';
 
 export const plasmaCSSVariablesResolver: CSSVariablesResolver = (theme) => {
     const result: ConvertCSSVariablesInput = {
@@ -9,6 +9,9 @@ export const plasmaCSSVariablesResolver: CSSVariablesResolver = (theme) => {
             '--coveo-color-input-border': theme.colors.gray[3],
             '--coveo-color-title': theme.colors.gray[8],
             '--coveo-color-text-disabled': theme.colors.gray[3],
+            '--coveo-color-bg-disabled': alpha(theme.colors.gray[4], 0.1),
+            '--coveo-color-text-readonly': 'var(--mantine-color-text)',
+            '--coveo-color-bg-readonly': theme.colors.gray[1],
 
             // mantine overrides
             '--mantine-color-default-border': theme.colors.gray[2],
@@ -20,6 +23,13 @@ export const plasmaCSSVariablesResolver: CSSVariablesResolver = (theme) => {
             '--mantine-color-gray-light-hover': theme.colors.gray[1],
             '--mantine-color-warning-filled': theme.colors.yellow[4],
             '--mantine-color-placeholder': theme.colors.gray[4],
+            '--mantine-color-default-hover': theme.colors.gray[1],
+            /**
+             * ADUI-10725 https://coveord.atlassian.net/browse/ADUI-10725
+             * '--mantine-color-disabled'
+             * '--mantine-color-disabled-color'
+             * '--mantine-color-disabled-border'
+             */
         },
     };
     return result;