@coveord/plasma-mantine 55.7.1 → 55.7.2-alpha.0

package/src/components/prompt/__tests__/Prompt.spec.tsx

@@ -9,6 +9,7 @@ describe('Prompt', () => {
                 <Prompt.Footer>footer content</Prompt.Footer>
             </Prompt>,
         );
+        expect(screen.getByRole('dialog', {name: /title modal/i})).toBeInTheDocument();
         expect(screen.getByText(/content modal/i)).toBeInTheDocument();
         expect(screen.getByText(/footer content/i)).toBeInTheDocument();
         expect(screen.getByText(/title modal/i)).toBeInTheDocument();

package/src/components/sticky-footer/StickyFooter.module.css

@@ -2,11 +2,11 @@
     position: sticky;
     bottom: 0;
     z-index: 10;
-    background-color: white;
+    background-color: var(--mantine-color-body);
     padding: var(--mantine-spacing-md) var(--mantine-spacing-lg);
 
     &[data-variant='modal-footer'] {
-        border-top: 1px solid var(--mantine-color-gray-3);
+        border-top: 1px solid var(--mantine-color-default-border);
         padding-bottom: 0;
         margin: var(--mb-padding) calc(-1 * var(--mb-padding)) calc(var(--mantine-spacing-md) - var(--mb-padding))
             calc(-1 * var(--mb-padding));
@@ -14,5 +14,5 @@
 }
 
 .border {
-    border-top: 1px solid var(--mantine-color-gray-3);
+    border-top: 1px solid var(--mantine-color-default-border);
 }

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

@@ -19,7 +19,7 @@
         left: 0;
         right: 0;
         bottom: 0;
-        border-bottom: 1px solid var(--mantine-color-gray-3);
+        border-bottom: 1px solid var(--mantine-color-default-border);
     }
 }
 
@@ -61,13 +61,14 @@
 }
 
 .filterEmpty {
-    color: var(--mantine-color-gray-5);
+    color: var(--mantine-color-dimmed);
 }
 
 /* Table.Header */
 .headerRoot {
-    border-bottom: 1px solid var(--mantine-color-gray-3);
-    background-color: var(--mantine-color-gray-1);
+    border-bottom: 1px solid var(--mantine-color-default-border);
+    border-top: 1px solid var(--mantine-color-default-border);
+    background-color: var(--mantine-color-gray-light);
     padding: var(--mantine-spacing-sm) var(--mantine-spacing-xl);
     position: relative;
     min-height: 69px;
@@ -89,7 +90,7 @@
     color: var(--mantine-color-gray-6);
     height: var(--mantine-spacing-xl);
     font-weight: 500;
-    font-size: var(--mantine-font-size-xs);
+    font-size: var(--mantine-font-size-sm);
 
     &:first-of-type {
         padding-left: var(--mantine-spacing-xl);
@@ -99,11 +100,11 @@
         padding-right: var(--mantine-spacing-xl);
     }
 
-    background-color: var(--mantine-color-gray-0);
+    background-color: var(--mantine-color-gray-light);
 
     &[data-control='true'] {
         @mixin hover {
-            background-color: var(--mantine-color-gray-1);
+            background-color: var(--mantine-color-gray-light-hover);
         }
     }
 }

package/src/components/table/Table.types.ts

@@ -1,4 +1,4 @@
-import {Icon} from '@coveord/plasma-react-icons';
+import {TablerIcon} from '@coveord/plasma-react-icons';
 import {BoxProps, StylesApiProps} from '@mantine/core';
 import {ColumnDef, CoreOptions, Row, TableOptions} from '@tanstack/table-core';
 import {ReactElement, ReactNode} from 'react';
@@ -23,7 +23,7 @@ export interface TableLayout {
      * Icon illustrating the layout.
      * Will be displayed in the layout control
      */
-    Icon?: Icon;
+    Icon?: TablerIcon;
     /**
      * Header portion of the table.
      * In the standard row layout that is where column headers would be displayed.

package/src/components/table/layouts/TableLayoutControl.tsx

@@ -13,7 +13,7 @@ export const TableLayoutControl = () => {
                         <Center>
                             {Icon ? (
                                 <>
-                                    <Icon height={16} />
+                                    <Icon size={16} />
                                     <Space w="xs" />
                                 </>
                             ) : null}

package/src/components/table/layouts/row-layout/RowLayout.module.css

@@ -1,18 +1,12 @@
 .headerRow {
-    &[data-selectable='true'] input[type='checkbox'] {
-        border-color: var(--mantine-color-gray-4);
-        pointer-events: auto;
-        cursor: default;
-    }
-
     &[data-selectable='false'] input[type='checkbox'] {
-        background-color: var(--mantine-color-gray-2);
-        border-color: var(--mantine-color-gray-3);
+        background-color: var(--mantine-color-gray-light);
+        border-color: var(--mantine-color-default-border);
         pointer-events: none;
         cursor: not-allowed;
 
         & + svg {
-            color: var(--mantine-color-gray-5);
+            color: var(--mantine-color-dimmed);
         }
     }
 }
@@ -25,23 +19,23 @@
     }
 
     @mixin hover {
-        background-color: var(--mantine-color-gray-1);
+        background-color: var(--mantine-color-gray-light-hover);
     }
 
     &[data-selectable='false'] input[type='checkbox'] {
-        background-color: var(--mantine-color-gray-2);
-        border-color: var(--mantine-color-gray-3);
+        background-color: var(--mantine-color-gray-light);
+        border-color: var(--mantine-color-default-border);
         pointer-events: none;
         cursor: not-allowed;
 
         &:checked + svg {
-            color: var(--mantine-color-gray-5);
+            color: var(--mantine-color-dimmed);
         }
     }
 
     &[data-selected='true'] {
         &[data-multi-selection='false'] {
-            background-color: var(--mantine-color-gray-1);
+            background-color: var(--mantine-color-gray-light);
         }
 
         &[data-multi-selection='true'] {
@@ -61,10 +55,10 @@
     /* We must use height instead of minHeight here, otherwise it doesn’t apply */
     height: 56px;
     padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
-    border-bottom: rem(1) solid var(--mantine-color-gray-3);
+    border-bottom: rem(1) solid var(--mantine-color-default-border);
 }
 
 .collapsibleWrapper {
-    border-bottom: rem(1) solid var(--mantine-color-gray-3);
-    background-color: var(--mantine-color-gray-1);
+    border-bottom: rem(1) solid var(--mantine-color-default-border);
+    background-color: var(--mantine-color-gray-light);
 }

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

@@ -1,3 +1,4 @@
+import {IconList} from '@coveord/plasma-react-icons';
 import {Factory, MantineComponent, StylesApiProps, useProps, useStyles} from '@mantine/core';
 import {ReactNode} from 'react';
 import {identity} from '../../../../utils';
@@ -6,7 +7,6 @@ import classes from './RowLayout.module.css';
 import {RowLayoutBody, RowLayoutBodyStylesNames} from './RowLayoutBody';
 import {RowLayoutProvider} from './RowLayoutContext';
 import {RowLayoutHeader, RowLayoutHeaderStyleNames} from './RowLayoutHeader';
-import {RowLayoutIcon} from './RowLayoutIcon';
 
 type RowLayoutStylesNames = RowLayoutHeaderStyleNames | RowLayoutBodyStylesNames;
 export interface RowLayoutProps extends StylesApiProps<RowLayoutFactory> {
@@ -37,6 +37,6 @@ export const RowLayout = ((props: RowLayoutProps) => {
 
 RowLayout.Body = RowLayoutBody;
 RowLayout.Header = RowLayoutHeader;
-RowLayout.Icon = RowLayoutIcon;
+RowLayout.Icon = IconList;
 RowLayout.displayName = 'Rows';
 RowLayout.extend = identity;

package/src/index.ts

@@ -15,6 +15,7 @@ export {noop};
 
 // explicitly overriding mantine components
 export {
+    Accordion,
     ActionIcon,
     BrowserPreview,
     Button,

package/src/styles/Alert.module.css

@@ -1,35 +1,10 @@
-.root {
-    padding: var(--mantine-spacing-sm);
-
-    &:not(&[data-variant]) {
-        border-color: color-mix(in srgb, var(--alert-color), var(--alert-bg) 85%);
-    }
-}
-
-.wrapper {
-    gap: var(--mantine-spacing-sm);
-}
-
 .title {
     font-weight: 500;
 }
 
-.icon {
-    width: 16px;
-    height: 16px;
-    margin-right: 0;
-}
-
-.message {
-    @mixin light {
-        color: var(--mantine-color-gray-7);
-
-        &:where([data-variant='filled']) {
-            color: var(--alert-color);
-        }
-    }
-
-    &:where([data-variant='white']) {
-        color: var(--mantine-color-black);
+.closeButton {
+    & svg {
+        width: 20px;
+        height: 20px;
     }
 }

package/src/styles/Badge.module.css

@@ -1,5 +1,3 @@
 .root {
-    text-transform: none;
-    padding: var(--mantine-spacing-xxs) var(--mantine-spacing-xs);
     font-weight: 500;
 }

package/src/styles/Breadcrumbs.module.css

@@ -0,0 +1,10 @@
+.root {
+    font-size: var(--mantine-font-size-xs);
+    font-weight: var(--mantine-heading-font-weight);
+}
+
+.breadcrumb {
+    &:not(a) {
+        color: var(--coveo-color-title);
+    }
+}

package/src/styles/Button.module.css

@@ -1,3 +1,3 @@
 .label {
-    font-weight: 400;
+    font-weight: 500;
 }

package/src/styles/Checkbox.module.css

@@ -1,20 +1,9 @@
 .label {
-    font-size: var(--mantine-font-size-sm);
     font-weight: 300;
 }
 
 .input {
-    &[data-indeterminate] {
-        background-color: var(--mantine-color-pureWhite);
-        border-color: var(--mantine-color-gray-4);
-
-        & + svg {
-            color: var(--mantine-color-gray-6);
-        }
-    }
-
-    &[readonly] {
-        background-color: var(--mantine-color-gray-2);
-        border-color: var(--mantine-color-gray-2);
+    @mixin where-light {
+        border-color: var(--coveo-color-input-border);
     }
 }

package/src/styles/CheckboxIndicator.module.css

@@ -0,0 +1,5 @@
+.indicator {
+    @mixin where-light {
+        border-color: var(--coveo-color-input-border);
+    }
+}

package/src/styles/Combobox.module.css

@@ -1,9 +1,10 @@
+/* TODO: Plasma Reset, validate if we need the custom style for the search */
 .search {
     margin: 0 0 var(--mantine-spacing-xs);
-    border-radius: var(--mantine-radius-md);
+    border-radius: var(--mantine-radius-default);
     border: 1px solid;
     width: 100%;
-    border-color: var(--mantine-color-gray-4);
+    border-color: var(--mantine-color-default-border);
 
     &:focus {
         border-color: var(--mantine-primary-color-filled);

package/src/styles/Input.module.css

@@ -1,3 +1,19 @@
-.input {
-    --input-color: var(--mantine-color-gray-7);
+.wrapper {
+    --input-section-color: var(--mantine-color-placeholder);
+
+    @mixin light {
+        --input-disabled-color: var(--coveo-color-text-disabled);
+
+        &[data-variant='default'] {
+            --input-bd: var(--coveo-color-input-border);
+        }
+    }
+
+    &[data-disabled] {
+        --input-section-color: var(--input-disabled-color);
+    }
+}
+
+.section {
+    color: var(--input-section-color);
 }

package/src/styles/InputWrapper.module.css

@@ -1,16 +1,17 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mantine-spacing-xxs);
+}
+
 .label {
-    margin-bottom: var(--mantine-spacing-xs);
+    color: var(--coveo-color-title);
 }
 
 .description {
-    font-size: var(--mantine-font-size-sm);
-    color: var(--mantine-color-gray-7);
-    margin-bottom: var(--mantine-spacing-xs);
-    line-height: var(--mantine-line-height);
     font-weight: 300;
 }
 
 .error {
-    line-height: var(--mantine-line-height);
     font-weight: 300;
 }

package/src/styles/Modal.module.css

@@ -1,65 +1,3 @@
-.root {
-    &[data-full-screen] {
-        .content {
-            flex: 0 0 100%;
-        }
-    }
-
-    &[data-size='xs'] {
-        .content {
-            flex: 0 0 rem(432px);
-        }
-    }
-
-    &[data-size='sm'] {
-        .content {
-            flex: 0 0 rem(664px);
-        }
-    }
-
-    &[data-size='md'] {
-        .content {
-            flex: 0 0 rem(896px);
-        }
-    }
-
-    &[data-size='lg'] {
-        .content {
-            flex: 0 0 rem(1120px);
-        }
-    }
-
-    &[data-size='xl'] {
-        .content {
-            flex: 0 0 rem(88%);
-        }
-    }
-
-    &:not([data-size]) {
-        .content {
-            flex: 0 0 rem(896px);
-        }
-    }
-}
-
-.content {
-    overflow: auto;
-}
-
-.header {
-    border-bottom: 1px solid var(--mantine-color-gray-3);
-    align-items: flex-start;
-}
-
 .title {
-    width: 100%;
-    font-size: var(--mantine-h3-font-size);
-    line-height: var(--mantine-h3-line-height);
     font-weight: 500;
 }
-
-.body {
-    &:where(:not(:only-child)) {
-        padding-top: var(--mb-padding, var(--mantine-spacing-md));
-    }
-}

package/src/styles/NavLink.module.css

@@ -1,21 +1,3 @@
-.root {
-    color: var(--mantine-color-gray-6);
-    line-height: var(--mantine-line-height);
-    border-radius: var(--mantine-radius-default) 0 0 var(--mantine-radius-default);
-
-    &[data-active] {
-        color: var(--mantine-primary-color-6);
-    }
-
-    @mixin hover {
-        @mixin light {
-            &:where(:not([data-active])) {
-                background-color: var(--mantine-color-gray-1);
-            }
-        }
-    }
-}
-
 .label {
     font-weight: 500;
 }

package/src/styles/Pagination.module.css

@@ -1,30 +1,5 @@
-.root {
-    --pagination-control-fz: var(--mantine-font-size-sm);
-
-    color: var(--mantine-color-gray-6);
-}
-
 .control {
-    color: var(--mantine-color-gray-6);
-
-    @mixin light {
-        border-color: var(--mantine-color-gray-3);
-
-        @mixin hover {
-            &:where(:not(:disabled, [data-disabled])) {
-                background-color: var(--mantine-primary-color-1);
-            }
-        }
-    }
-
-    &:where([data-active]) {
-        @mixin light {
-            border-color: var(--pagination-active-bg);
-            color: var(--pagination-active-color, var(--mantine-color-white));
-
-            @mixin hover {
-                background-color: var(--pagination-active-bg);
-            }
-        }
+    @mixin where-light {
+        border-color: var(--coveo-color-input-border);
     }
 }

package/src/styles/Radio.module.css

@@ -1,10 +1,10 @@
 .labelWrapper {
     display: flex;
     align-items: flex-start;
+}
 
-    &:not([data-disabled]) {
-        .label {
-            color: var(--mantine-color-gray-7);
-        }
+.radio {
+    @mixin where-light {
+        border-color: var(--coveo-color-input-border);
     }
 }

package/src/styles/ReadOnlyInput.module.css

@@ -2,7 +2,11 @@
     cursor: text;
 
     --input-bd: transparent;
-    --input-bg: var(--mantine-color-gray-2);
-    --input-color: var(--mantine-color-gray-7);
-    --input-placeholder-color: var(--mantine-color-gray-7);
+    --input-bg: var(--mantine-color-dark-light);
+    --input-color: var(--mantine-color-text);
+    --input-placeholder-color: var(--mantine-color-text);
+}
+
+.section {
+    --input-section-color: var(--mantine-color-text);
 }

package/src/styles/SegmentedControl.module.css

@@ -1,35 +1,3 @@
-.root {
-    background-color: var(--mantine-color-gray-2);
-}
-
-.indicator {
-    border-radius: var(--sc-radius, var(--mantine-radius-sm));
-}
-
 .label {
     font-weight: 300;
-
-    @mixin light {
-        color: var(--mantine-color-gray-6);
-    }
-
-    &:where([data-disabled]) {
-        @mixin light {
-            color: var(--mantine-color-gray-5);
-        }
-    }
-
-    &:where([data-active]) {
-        @mixin light {
-            color: var(--sc-label-color, var(--mantine-color-black));
-        }
-    }
-
-    &:where(:not([data-disabled], [data-active], [data-read-only])) {
-        @mixin hover {
-            @mixin light {
-                color: var(--mantine-color-black);
-            }
-        }
-    }
 }

package/src/styles/Stepper.module.css

@@ -1,69 +1,3 @@
-.step {
-    &[disabled] {
-        color: var(--mantine-color-gray-5);
-
-        & .mantine-Stepper-stepDescription {
-            color: var(--mantine-color-gray-5);
-        }
-
-        & .mantine-Stepper-stepIcon {
-            border-color: var(--mantine-color-gray-1);
-        }
-    }
-}
-
 .stepIcon {
     font-weight: 500;
-    background-color: var(--mantine-color-gray-1);
-    color: inherit;
-    border: rem(1) solid var(--mantine-color-gray-3);
-
-    &[data-progress] {
-        background-color: var(--mantine-color-white);
-        border-color: var(--step-color);
-    }
-
-    &[data-completed] {
-        background-color: var(--mantine-color-white);
-        border-color: var(--mantine-color-lime-6);
-        color: var(--mantine-color-lime-6);
-    }
-}
-
-.stepCompletedIcon {
-    color: var(--mantine-color-lime-6);
-    font-size: rem(16);
-}
-
-.stepDescription {
-    color: var(--mantine-color-gray-7);
-
-    &[data-size='xs'] {
-        font-size: var(--mantine-font-size-xs);
-    }
-
-    &[data-size='sm'] {
-        font-size: var(--mantine-font-size-sm);
-    }
-
-    &[data-size='md'] {
-        font-size: var(--mantine-font-size-md);
-    }
-
-    &[data-size='lg'] {
-        font-size: var(--mantine-font-size-lg);
-    }
-
-    &[data-size='xl'] {
-        font-size: var(--mantine-font-size-xl);
-    }
-}
-
-.separator {
-    height: rem(1);
-    background-color: var(--mantine-color-gray-3);
-}
-
-.verticalSeparator {
-    border-left: rem(1) solid var(--mantine-color-gray-3);
 }

package/src/styles/Table.module.css

@@ -0,0 +1,3 @@
+.th {
+    font-weight: 500;
+}

package/src/styles/Tabs.module.css

@@ -1,19 +1,18 @@
 .root {
     &[data-variant='default'] {
-        @mixin light {
-            --tab-hover-color: var(--mantine-color-gray-1);
-        }
-
-        --tabs-list-border-width: 1px;
-
         &[data-orientation='horizontal'] {
             .list {
                 margin-bottom: calc(-1 * var(--tabs-list-border-width));
             }
         }
     }
+
+    @mixin light {
+        --tab-border-color: var(--mantine-color-default-border);
+    }
 }
 
 .tab {
+    font-weight: 500;
     line-height: 1.5;
 }

package/src/styles/Text.module.css

@@ -1,3 +1,7 @@
 .root {
     font-weight: 300;
+
+    &:where([data-inherit]) {
+        font-weight: inherit;
+    }
 }