@coveord/plasma-mantine 55.8.0 → 56.0.0

package/src/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/src/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/src/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/src/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/src/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);
+    }
+}

package/src/styles/Stepper.module.css

@@ -1,69 +1,21 @@
-.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);
-        }
-    }
+.root {
+    --stepper-outline-thickness: 1px;
+    --stepper-outline-color: var(--mantine-color-default-border);
+    --stepper-icon-color: var(--mantine-primary-color-filled);
 }
 
 .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);
-}
+    background-color: var(--mantine-color-gray-light);
+    font-weight: var(--coveo-fw-bold);
 
-.stepDescription {
-    color: var(--mantine-color-gray-7);
+    &:where([data-completed]) {
+        --stepper-icon-color: var(--step-color);
 
-    &[data-size='xs'] {
-        font-size: var(--mantine-font-size-xs);
+        background-color: alpha(var(--step-color), 0.1);
+        color: var(--step-color);
     }
 
-    &[data-size='sm'] {
-        font-size: var(--mantine-font-size-sm);
+    &:where([data-progress]) {
+        background-color: var(--mantine-color-body);
     }
-
-    &[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: var(--coveo-fw-bold);
+}

package/src/styles/Tabs.module.css

@@ -1,19 +1,57 @@
 .root {
-    &[data-variant='default'] {
-        @mixin light {
-            --tab-hover-color: var(--mantine-color-gray-1);
-        }
+    --tab-active-border-width: calc(3px - var(--tabs-list-border-width));
+    --tab-box-shadow: 0 calc(-1 * var(--tab-active-border-width));
+
+    &[data-inverted] {
+        --tab-box-shadow: 0 var(--tab-active-border-width);
+    }
+
+    &[data-orientation='vertical'] {
+        --tab-box-shadow: calc(-1 * var(--tab-active-border-width)) 0;
+    }
 
+    &[data-placement='right'] {
+        --tab-box-shadow: var(--tab-active-border-width) 0;
+    }
+
+    &[data-variant='default'] {
         --tabs-list-border-width: 1px;
+    }
+
+    @mixin light {
+        --tab-border-color: var(--mantine-color-default-border);
 
-        &[data-orientation='horizontal'] {
-            .list {
-                margin-bottom: calc(-1 * var(--tabs-list-border-width));
-            }
+        &[data-variant='default'] {
+            --tab-hover-color: var(--mantine-color-default-hover);
         }
     }
 }
 
 .tab {
-    line-height: 1.5;
+    font-weight: var(--coveo-fw-bold);
+    line-height: 16px;
+    color: var(--mantine-color-dimmed);
+    padding: 12px;
+
+    &:not(:disabled, [data-disabled]) {
+        @mixin hover {
+            color: var(--coveo-color-title);
+        }
+    }
+
+    &:where(:disabled, [data-disabled]) {
+        opacity: 1 !important; /* Override Mantine's 0.5 */
+        color: var(--mantine-color-disabled-color);
+    }
+
+    &:where([data-active]) {
+        color: var(--coveo-color-title);
+        box-shadow: inset var(--tab-box-shadow) var(--tabs-color);
+    }
+}
+
+.list {
+    &[data-variant='default']::before {
+        border-width: var(--tabs-list-border-size);
+    }
 }

package/src/styles/Text.module.css

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

package/src/styles/TimePicker.module.css

@@ -0,0 +1,8 @@
+.dropdown {
+    padding: var(--mantine-spacing-xs);
+}
+
+.control {
+    width: 40px;
+    height: 40px;
+}

package/src/styles/Tooltip.module.css

@@ -1,3 +1,4 @@
 .tooltip {
     word-break: break-word;
+    padding: 12px;
 }

package/src/styles/YearPicker.module.css

@@ -0,0 +1,11 @@
+.yearsListControl {
+    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/src/styles/global.css

@@ -0,0 +1,14 @@
+body {
+    font-weight: var(--coveo-fw-normal);
+    font-size: var(--mantine-font-size-sm);
+
+    &::selection {
+        color: var(--mantine-color-white);
+        background-color: var(--mantine-primary-color-filled);
+    }
+}
+
+b,
+strong {
+    font-weight: var(--coveo-fw-bold);
+}

package/src/theme/PlasmaColors.ts

@@ -23,32 +23,157 @@ const lime = [
 
 export const PlasmaColors = {
     // Primary
-    gray: toMantineColor(color.primary.gray),
-    action: [
-        color.primary.action[1],
-        color.primary.action[1],
-        color.primary.action[2],
-        color.primary.action[3],
-        color.primary.action[4],
-        color.primary.action[6],
-        color.primary.action[6],
-        color.primary.action[8],
-        color.primary.action[8],
-        color.primary.action[9],
-    ] as MantineColorsTuple,
+    blue: [
+        '#f8f9ff',
+        '#eef2ff',
+        '#d5defe',
+        '#a6bcfe',
+        '#6e99fd',
+        '#1169da',
+        '#063c82',
+        '#03275a',
+        '#01193f',
+        '#010e29',
+    ] satisfies MantineColorsTuple,
+    red: [
+        '#fff8f8',
+        '#feefee',
+        '#fdd5d5',
+        '#fca7a5',
+        '#fb6f6c',
+        '#d2271b',
+        '#7e0f17',
+        '#58050f',
+        '#3e020a',
+        '#280104',
+    ] satisfies MantineColorsTuple,
+    gray: [
+        '#f9f9fa',
+        '#f1f2f4',
+        '#dddfe3',
+        '#b9bdc7',
+        '#959cab',
+        '#676d7a',
+        '#3b3e46',
+        '#26292f',
+        '#191b1f',
+        '#0e0f12',
+    ] satisfies MantineColorsTuple,
+    dark: [
+        '#c9c9c9',
+        '#b8b8b8',
+        '#828282',
+        '#696969',
+        '#424242',
+        '#3b3b3b',
+        '#2e2e2e',
+        '#242424',
+        '#1f1f1f',
+        '#141414',
+    ] satisfies MantineColorsTuple,
+    teal: [
+        '#e5fff9',
+        '#bffff0',
+        '#1efadc',
+        '#18d4bb',
+        '#0faf99',
+        '#077b6b',
+        '#02473e',
+        '#012f2a',
+        '#011f1b',
+        '#001210',
+    ] satisfies MantineColorsTuple,
+    yellow: [
+        '#fff9e5',
+        '#fff2c0',
+        '#fbe000',
+        '#e5b800',
+        '#c89300',
+        '#936400',
+        '#593700',
+        '#3c2301',
+        '#291700',
+        '#180d00',
+    ] satisfies MantineColorsTuple,
+    violet: [
+        '#faf8ff',
+        '#f4f0ff',
+        '#e3daff',
+        '#c7b2ff',
+        '#ac86ff',
+        '#8a36ff',
+        '#5500aa',
+        '#390076',
+        '#270054',
+        '#180037',
+    ] satisfies MantineColorsTuple,
+    grape: [
+        '#fbf8fd',
+        '#f6f0fb',
+        '#e7d6f5',
+        '#d2b0ed',
+        '#bc85e3',
+        '#9946c7',
+        '#592676',
+        '#3c1851',
+        '#290e38',
+        '#190624',
+    ] satisfies MantineColorsTuple,
+    cyan: [
+        '#e3fafc',
+        '#c5f6fa',
+        '#99e9f2',
+        '#66d9e8',
+        '#3bc9db',
+        '#22b8cf',
+        '#15aabf',
+        '#1098ad',
+        '#0c8599',
+        '#0b7285',
+    ] satisfies MantineColorsTuple,
+    orange: [
+        '#fff8f5',
+        '#ffefe8',
+        '#ffeedd',
+        '#fea980',
+        '#f27a38',
+        '#b84b11',
+        '#6c2a00',
+        '#491b02',
+        '#301301',
+        '#1c0a00',
+    ] satisfies MantineColorsTuple,
+    indigo: [
+        '#f9f9fb',
+        '#f1f1f9',
+        '#dbdbf2',
+        '#babadf',
+        '#9797cb',
+        '#6767a4',
+        '#393968',
+        '#252547',
+        '#181831',
+        '#0d0d1f',
+    ] satisfies MantineColorsTuple,
+    green: [
+        '#e9ffed',
+        '#cdfed5',
+        '#73fa84',
+        '#32d961',
+        '#15b43c',
+        '#0b7e2f',
+        '#044918',
+        '#02300f',
+        '#012008',
+        '#001304',
+    ] satisfies MantineColorsTuple,
     navy,
     info: navy,
     // Accent
-    blue: toMantineColor(color.accent.blue),
-    red,
     critical: red,
-    teal,
     new: teal,
-    yellow,
     warning: yellow,
     // Secondary
-    green: toMantineColor(color.secondary.green),
-    indigo: toMantineColor(color.secondary.indigo),
     lime,
     success: lime,
     purple: toMantineColor(color.secondary.purple),

package/src/theme/Plasmantine.tsx

@@ -4,6 +4,7 @@ import {FunctionComponent} from 'react';
 import {plasmaCSSVariablesResolver} from './plasmaCSSVariablesResolver';
 import {plasmaTheme} from './Theme';
 import {mergeCSSVariablesResolvers} from './mergeCSSVariablesResolvers';
+import '../styles/global.css';
 
 export const Plasmantine: FunctionComponent<MantineProviderProps> = ({
     children,