@coveord/plasma-mantine 59.1.2 → 59.3.0

package/src/styles/CloseButton.module.css

@@ -0,0 +1,15 @@
+.root {
+    &[data-size='sm'] {
+        & svg {
+            width: 12px;
+            height: 12px;
+        }
+    }
+
+    &[data-size='md'] {
+        & svg {
+            width: 16px;
+            height: 16px;
+        }
+    }
+}

package/src/styles/Input.module.css

@@ -14,7 +14,8 @@
 
     &[data-disabled] {
         > .section {
-            > svg {
+            > svg,
+            > [data-combined-clear-section] > svg {
                 color: var(--input-disabled-color);
             }
         }
@@ -22,7 +23,8 @@
 
     &[data-error] {
         > .section {
-            > svg {
+            > svg,
+            > [data-combined-clear-section] > svg {
                 color: var(--mantine-color-error);
             }
         }
@@ -33,10 +35,15 @@
     @mixin dark {
         --input-bg: var(--mantine-color-default);
     }
+
+    &[data-expanded]:not([data-readonly]) ~ .section [data-plasma-combobox-chevron] {
+        transform: rotate(180deg);
+    }
 }
 
 .section {
-    > svg {
+    > svg,
+    > [data-combined-clear-section] > svg {
         color: var(--mantine-color-dimmed);
     }
 }

package/src/styles/Pill.module.css

@@ -1,4 +1,17 @@
 .root {
+    padding: 0 var(--mantine-spacing-xs);
     color: var(--mantine-color-text);
     background-color: var(--mantine-color-gray-light);
+
+    &[data-with-remove] {
+        padding: 0 var(--mantine-spacing-xxs) 0 var(--mantine-spacing-xs);
+
+        &[data-size='md'] {
+            padding: 0 2px 0 var(--mantine-spacing-xs);
+        }
+    }
+}
+
+.remove {
+    padding: 0;
 }

package/src/styles/RadioCard.module.css

@@ -5,24 +5,30 @@
 }
 
 .card {
-    display: inline-flex;
-    flex-direction: column;
+    --radio-card-outline-color: var(--mantine-color-default-border);
+
+    display: flex;
+    flex-flow: row nowrap;
     align-items: flex-start;
+    gap: var(--mantine-spacing-sm);
     padding: var(--mantine-spacing-sm);
     border-radius: var(--mantine-radius-lg);
+    border-color: var(--radio-card-outline-color);
+    transition: border-color 150ms ease;
 
     &[data-checked] {
-        border-color: var(--mantine-primary-color-filled);
+        --radio-card-outline-color: var(--mantine-primary-color-filled);
+    }
+
+    &[disabled],
+    &[readonly] {
+        --radio-card-outline-color: var(--mantine-color-default-border);
     }
 
     &[disabled] {
         cursor: not-allowed;
-        border-color: var(--mantine-color-default-border);
-
-        .title {
-            color: var(--mantine-color-disabled-color);
-        }
 
+        .title,
         .description {
             color: var(--mantine-color-disabled-color);
         }
@@ -30,44 +36,39 @@
 
     &[readonly] {
         pointer-events: none;
-        border-color: var(--mantine-color-default-border);
 
-        & .indicator {
-            border-color: var(--mantine-color-default-border);
+        .indicator[data-checked] {
+            background-color: var(--mantine-color-default);
+            color: var(--coveo-color-text-readonly);
 
-            &[data-checked] {
-                background-color: var(--coveo-color-bg-readonly);
-                color: var(--coveo-color-text-readonly);
-
-                & > svg {
-                    color: var(--coveo-color-text-readonly);
-                }
+            & > svg {
+                color: inherit;
             }
         }
     }
 }
 
 .container {
-    flex-wrap: nowrap;
-    gap: var(--mantine-spacing-sm);
-    align-items: baseline;
-    justify-content: flex-start;
-    width: 100%;
-    margin-bottom: var(--mantine-spacing-xs);
+    gap: var(--mantine-spacing-xs);
 }
 
 .title {
-    flex: 1;
-    word-break: break-word;
+    line-height: 20px;
 }
 
+.title,
 .description {
-    padding-left: var(--mantine-spacing-lg);
-    color: var(--mantine-color-dimmed);
-    font-weight: 400;
-    font-size: var(--mantine-font-size-xs);
+    flex: 1;
+    overflow-wrap: anywhere;
 }
 
 .indicator {
     cursor: pointer;
+    transition: border-color 150ms ease;
+
+    &,
+    &[data-disabled],
+    &[data-checked] {
+        border-color: var(--radio-card-outline-color);
+    }
 }

package/src/theme/Theme.tsx

@@ -23,6 +23,7 @@ import {
     CloseButton,
     ColorSwatch,
     Combobox,
+    ComboboxChevron,
     ComboboxSearch,
     createTheme,
     deepMerge,
@@ -70,6 +71,7 @@ import {Accordion} from '../components/Accordion/Accordion.js';
 import {CheckboxIcon} from '../components/CheckboxIcon/CheckboxIcon.js';
 import {CircleLoader} from '../components/CircleLoader/CircleLoader.js';
 import {InfoToken} from '../components/InfoToken/InfoToken.js';
+import {PlasmaComboboxChevron} from '../components/Combobox/PlasmaComboboxChevron.js';
 import AccordionClasses from '../styles/Accordion.module.css';
 import ActionIconClasses from '../styles/ActionIcon.module.css';
 import AlertClasses from '../styles/Alert.module.css';
@@ -81,6 +83,7 @@ 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 CloseButtonClasses from '../styles/CloseButton.module.css';
 import ComboboxClasses from '../styles/Combobox.module.css';
 import DatePickerClasses from '../styles/DatePicker.module.css';
 import DateTimePickerClasses from '../styles/DateTimePicker.module.css';
@@ -184,7 +187,7 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
         }),
         ActionIcon: ActionIcon.extend({
             defaultProps: {
-                size: 'lg',
+                size: 'md',
             },
             classNames: ActionIconClasses,
         }),
@@ -271,6 +274,7 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
             defaultProps: {
                 icon: <CrossSize16Px height={16} aria-label="close" />,
             },
+            classNames: CloseButtonClasses,
         }),
         ColorSwatch: ColorSwatch.extend({
             defaultProps: {
@@ -284,6 +288,11 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
                 middlewares: {inline: true},
             },
         }),
+        ComboboxChevron: ComboboxChevron.extend({
+            defaultProps: {
+                component: PlasmaComboboxChevron,
+            },
+        }),
         ComboboxSearch: ComboboxSearch.extend({
             defaultProps: {
                 placeholder: 'Search',

package/src/theme/plasmaCSSVariablesResolver.ts

@@ -18,6 +18,8 @@ export const plasmaCSSVariablesResolver: CSSVariablesResolver = (theme) => {
             '--coveo-fw-light': '300',
             '--coveo-fw-normal': '400',
             '--coveo-fw-bold': '500',
+            '--coveo-transition-duration': '150ms',
+            '--coveo-transition-function': 'ease-in-out',
         },
         dark: {
             // custom colors