@coveord/plasma-mantine 55.8.0 → 56.0.0

package/dist/cjs/styles/Chip.module.css

@@ -0,0 +1,41 @@
+.root {
+    --chip-color: var(--coveo-color-text-primary);
+    --chip-bg: var(--mantine-primary-color-light);
+    --chip-hover: var(--mantine-primary-color-filled-hover);
+    --chip-radius: var(--mantine-radius-lg);
+    --chip-padding: var(--mantine-spacing-sm);
+    --chip-spacing: var(--mantine-spacing-sm);
+
+    > .label {
+        &:not([data-checked]) {
+            border: 1px solid var(--mantine-color-default-border);
+            border-radius: var(--mantine-radius-lg);
+            background-color: var(--mantine-color-white);
+
+            @mixin hover {
+                &[data-disabled] {
+                    border: none;
+                    color: var(--coveo-color-text-disabled);
+                    background-color: var(--coveo-color-bg-disabled);
+                }
+
+                background-color: var(--mantine-color-gray-light);
+                border-color: var(--coveo-color-input-border);
+            }
+        }
+
+        &:not([data-disabled]) {
+            @mixin hover {
+                &[data-checked] {
+                    color: var(--mantine-color-white);
+                }
+            }
+        }
+
+        &[data-disabled] {
+            border: none;
+            color: var(--coveo-color-text-disabled);
+            background-color: var(--coveo-color-bg-disabled);
+        }
+    }
+}

package/dist/cjs/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/dist/cjs/styles/DatePicker.module.css

@@ -1,3 +1,15 @@
-.monthCell {
-    text-align: center;
+.day {
+    border-radius: var(--mantine-radius-default);
+
+    @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-error);
+    }
 }

package/dist/cjs/styles/Input.module.css

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

package/dist/cjs/styles/InputWrapper.module.css

@@ -1,16 +1,18 @@
+.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-weight: var(--coveo-fw-normal);
     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;
+    font-weight: var(--coveo-fw-normal);
 }

package/dist/cjs/styles/Modal.module.css

@@ -1,65 +1,11 @@
-.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;
+.title {
+    font-weight: var(--coveo-fw-bold);
 }
 
 .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;
+    gap: var(--mantine-spacing-sm);
 }
 
-.body {
-    &:where(:not(:only-child)) {
-        padding-top: var(--mb-padding, var(--mantine-spacing-md));
-    }
+.close {
+    align-self: flex-start;
 }

package/dist/cjs/styles/MonthPicker.module.css

@@ -0,0 +1,11 @@
+.monthsListControl {
+    border-radius: var(--mantine-radius-default);
+
+    @mixin hover {
+        &:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) {
+            @mixin light {
+                background-color: var(--mantine-color-default-hover);
+            }
+        }
+    }
+}

package/dist/cjs/styles/NavLink.module.css

@@ -1,27 +1,23 @@
 .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);
+    &:where(:not([data-active]), [data-disabled]) {
+        color: var(--coveo-color-title);
 
-    &[data-active] {
-        color: var(--mantine-primary-color-6);
+        &:hover {
+            background-color: var(--mantine-color-default-hover);
+        }
     }
 
-    @mixin hover {
-        @mixin light {
-            &:where(:not([data-active])) {
-                background-color: var(--mantine-color-gray-1);
-            }
-        }
+    &:where([data-disabled]) {
+        color: var(--coveo-color-text-disabled);
     }
 }
 
 .label {
-    font-weight: 500;
+    font-weight: var(--coveo-fw-bold);
 }
 
 .children {
     & .label {
-        font-weight: 300;
+        font-weight: var(--coveo-fw-normal);
     }
 }

package/dist/cjs/styles/Notifications.module.css

@@ -0,0 +1,37 @@
+.root {
+    --notification-radius: var(--mantine-radius-lg);
+    --notification-color: transparent;
+
+    padding: 12px var(--mantine-spacing-sm) 12px;
+
+    @mixin light {
+        background-color: var(--coveo-color-bg-dark-surface);
+    }
+}
+
+.title,
+.closeButton {
+    @mixin light {
+        color: var(--mantine-color-white);
+
+        &:hover {
+            background-color: alpha(var(--mantine-color-gray-4), 0.2);
+        }
+
+        > svg {
+            @mixin light {
+                color: var(--mantine-color-white);
+            }
+        }
+    }
+}
+
+.description {
+    @mixin light {
+        color: var(--mantine-color-gray-2);
+    }
+}
+
+.icon {
+    margin-inline-end: var(--mantine-spacing-xs);
+}

package/dist/cjs/styles/NumberInput.module.css

@@ -0,0 +1,7 @@
+.control {
+    @mixin light {
+        @mixin hover {
+            background-color: var(--mantine-color-default-hover);
+        }
+    }
+}

package/dist/cjs/styles/Pagination.module.css

@@ -1,30 +1,37 @@
 .root {
-    --pagination-control-fz: var(--mantine-font-size-sm);
-
-    color: var(--mantine-color-gray-6);
+    --pagination-active-bg: var(--mantine-primary-color-light);
+    --pagination-active-color: var(--mantine-primary-color-filled);
 }
 
 .control {
-    color: var(--mantine-color-gray-6);
-
-    @mixin light {
-        border-color: var(--mantine-color-gray-3);
+    @mixin where-light {
+        border-color: var(--mantine-color-default-border);
 
         @mixin hover {
-            &:where(:not(:disabled, [data-disabled])) {
-                background-color: var(--mantine-primary-color-1);
+            &:not([data-active], [data-disabled]) {
+                background-color: var(--mantine-color-default-hover);
             }
         }
-    }
 
-    &:where([data-active]) {
-        @mixin light {
-            border-color: var(--pagination-active-bg);
-            color: var(--pagination-active-color, var(--mantine-color-white));
+        &:not([data-active]) {
+            color: var(--mantine-color-placeholder);
+        }
+
+        &[data-disabled] {
+            opacity: 1;
+            background-color: var(--coveo-color-bg-disabled);
 
-            @mixin hover {
-                background-color: var(--pagination-active-bg);
+            & + .icon {
+                color: var(--coveo-color-text-disabled);
             }
         }
     }
+
+    &[data-active] {
+        border: none;
+    }
+}
+
+.dots {
+    color: var(--mantine-color-gray-filled);
 }

package/dist/cjs/styles/Paper.module.css

@@ -0,0 +1,5 @@
+.root {
+    @mixin light {
+        --paper-border-color: var(--mantine-color-default-border);
+    }
+}

package/dist/cjs/styles/Pill.module.css

@@ -0,0 +1,4 @@
+.root {
+    color: var(--mantine-color-text);
+    background-color: var(--mantine-color-gray-light);
+}

package/dist/cjs/styles/Popover.module.css

@@ -0,0 +1,6 @@
+.dropdown {
+    --popover-radius: var(--mantine-radius-md);
+    --popover-shadow: var(--mantine-shadow-xs);
+
+    padding: var(--combobox-padding, var(--mantine-spacing-sm, 16));
+}

package/dist/cjs/styles/Radio.module.css

@@ -2,9 +2,42 @@
     display: flex;
     align-items: flex-start;
 
-    &:not([data-disabled]) {
-        .label {
-            color: var(--mantine-color-gray-7);
+    @mixin light {
+        color: var(--coveo-color-title);
+
+        &[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);
+        }
+
+        &:disabled {
+            background-color: var(--mantine-color-disabled);
+            border-color: var(--mantine-color-default-border);
+
+            & + .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);
+
+            & + .icon {
+                color: var(--coveo-color-text-readonly);
+            }
         }
     }
 }

package/dist/cjs/styles/RadioCard.module.css

@@ -0,0 +1,11 @@
+.card:hover:not([disabled]) {
+    @mixin light {
+        background-color: var(--mantine-color-default-hover);
+    }
+}
+
+.card {
+    &[disabled] {
+        pointer-events: none;
+    }
+}

package/dist/cjs/styles/ReadOnlyInput.module.css

@@ -1,8 +1,16 @@
 .input {
     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-bd: var(--mantine-color-default-border);
+    --input-bg: var(--mantine-color-gray-1);
+    --input-color: var(--mantine-color-text);
+    --input-placeholder-color: var(--mantine-color-text);
+}
+
+.section {
+    --input-section-color: var(--mantine-color-text);
+
+    > svg {
+        color: var(--input-section-color);
+    }
 }

package/dist/cjs/styles/SegmentedControl.module.css

@@ -1,34 +1,55 @@
-.root {
-    background-color: var(--mantine-color-gray-2);
+:root {
+    --sc-radius: var(--mantine-radius-sm);
 }
 
-.indicator {
-    border-radius: var(--sc-radius, var(--mantine-radius-sm));
+.label {
+    @mixin light {
+        font-weight: var(--coveo-fw-normal);
+        color: var(--mantine-color-dimmed);
+
+        @mixin hover {
+            color: var(--mantine-color-text);
+        }
+
+        &[data-active] {
+            color: var(--mantine-color-text);
+        }
+
+        &[data-disabled] {
+            color: var(--mantine-color-disabled-color);
+        }
+    }
 }
 
-.label {
-    font-weight: 300;
+.root {
+    border-radius: var(--mantine-radius-md);
+    border: 1px solid var(--mantine-color-default-border);
 
     @mixin light {
-        color: var(--mantine-color-gray-6);
+        background-color: var(--mantine-color-gray-light);
     }
+}
 
-    &:where([data-disabled]) {
-        @mixin light {
-            color: var(--mantine-color-gray-5);
+.control {
+    @mixin light {
+        .root[data-with-items-borders] :where(&)::before {
+            background-color: var(--mantine-color-default-border);
         }
     }
 
-    &:where([data-active]) {
-        @mixin light {
-            color: var(--sc-label-color, var(--mantine-color-black));
+    &:first-of-type {
+        &::before {
+            background-color: transparent;
         }
     }
 
-    &:where(:not([data-disabled], [data-active], [data-read-only])) {
-        @mixin hover {
-            @mixin light {
-                color: var(--mantine-color-black);
+    &[data-active] {
+        [data-mantine-color-scheme] & {
+            &,
+            & + .control {
+                &::before {
+                    background-color: transparent;
+                }
             }
         }
     }

package/dist/cjs/styles/Select.module.css

@@ -1,39 +1,47 @@
-.input {
-    @mixin light {
-        color: var(--mantine-color-gray-7);
-    }
-
-    @mixin dark {
-        color: var(--mantine-color-dark-0);
-    }
-}
-
 .option {
-    padding: 12px 16px;
+    padding: var(--mantine-spacing-xs);
 
     @mixin light {
-        color: var(--mantine-color-gray-7);
+        color: var(--coveo-color-title);
 
         @mixin hover {
-            background-color: var(--mantine-color-gray-1);
+            &:not([data-combobox-disabled], [data-checked], [data-combobox-selected]) {
+                background-color: var(--mantine-color-default-hover);
+            }
         }
-    }
 
-    @mixin dark {
-        color: var(--mantine-color-dark-0);
+        &[data-combobox-disabled] {
+            opacity: 1;
+            color: var(--mantine-color-disabled-color);
+        }
 
-        @mixin hover {
-            background-color: var(--mantine-color-dark-4);
+        &[data-combobox-active='true'] {
+            background-color: var(--mantine-primary-color-light);
+            color: var(--mantine-primary-color-filled);
+
+            + svg {
+                opacity: 1;
+            }
+        }
+
+        &[data-combobox-selected] {
+            background-color: var(--mantine-primary-color-filled);
+            color: white;
         }
     }
+}
 
-    &[aria-selected='true'] {
-        background-color: var(--mantine-color-action-1);
-        color: var(--mantine-color-action-6);
+.groupLabel {
+    @mixin light {
+        color: var(--mantine-color-placeholder);
+    }
+}
 
-        @mixin hover {
-            color: var(--mantine-color-action-6);
-            background-color: rgb(237 246 255 / 65%);
+.input {
+    @mixin light {
+        &[data-disabled] {
+            --input-disabled-bg: var(--mantine-color-disabled);
+            --input-bd: var(--mantine-color-default-border);
         }
     }
 }

package/dist/cjs/styles/Skeleton.module.css

@@ -5,6 +5,7 @@
         }
 
         &::after {
+            background-color: var(--mantine-color-gray-2);
             z-index: calc(var(--mantine-z-index-overlay) + 1);
         }
     }

package/dist/cjs/styles/Slider.module.css

@@ -0,0 +1,23 @@
+.track:not([data-inverted]) {
+    &::before {
+        background-color: var(--mantine-color-gray-light);
+    }
+}
+
+.mark:not([data-filled]) {
+    border-color: var(--mantine-color-gray-light);
+}
+
+.track .markLabel {
+    color: var(--mantine-color-text);
+}
+
+.track[data-disabled] .markLabel {
+    color: var(--coveo-color-text-disabled);
+}
+
+.bar {
+    &:where([data-disabled]) {
+        background-color: var(--coveo-color-input-border);
+    }
+}