@coveord/plasma-mantine 56.2.5 → 56.3.0

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

@@ -67,7 +67,7 @@
 /* Table.Header */
 .headerRoot {
     border-bottom: 1px solid var(--mantine-color-default-border);
-    background-color: var(--mantine-color-gray-0);
+    background-color: var(--mantine-color-body);
     padding: var(--mantine-spacing-sm) var(--mantine-spacing-xl);
     position: relative;
     min-height: 69px;
@@ -90,7 +90,7 @@
     vertical-align: middle;
     white-space: nowrap;
     text-align: left;
-    color: var(--mantine-color-gray-6);
+    color: var(--mantine-color-text);
     height: var(--mantine-spacing-xl);
     font-weight: var(--coveo-fw-bold);
     font-size: var(--mantine-font-size-sm);
@@ -103,11 +103,11 @@
         padding-right: var(--mantine-spacing-xl);
     }
 
-    background-color: var(--mantine-color-gray-0);
+    background-color: var(--mantine-color-body);
 
     &[data-control='true'] {
         @mixin hover {
-            background-color: var(--mantine-color-gray-1);
+            background-color: var(--mantine-color-default-hover);
         }
     }
 }
@@ -117,7 +117,7 @@
 }
 
 .lastUpdatedLabel {
-    color: var(--mantine-color-gray-6);
+    color: var(--mantine-color-text);
 }
 
 /* Table.Predicate */

package/src/styles/DatePicker.module.css

@@ -1,6 +1,4 @@
 .day {
-    border-radius: var(--mantine-radius-default);
-
     @mixin hover {
         &:where(:not([data-static], [data-disabled], [data-selected], [data-in-range])) {
             @mixin light {
@@ -10,6 +8,10 @@
     }
 
     &:where([data-weekend]) {
-        color: var(--mantine-color-error);
+        color: var(--mantine-color-text);
+
+        &:where([data-selected]) {
+            color: var(--mantine-primary-color-contrast);
+        }
     }
 }

package/src/styles/DateTimePicker.module.css

@@ -0,0 +1,17 @@
+.day {
+    @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-text);
+
+        &:where([data-selected]) {
+            color: var(--mantine-primary-color-contrast);
+        }
+    }
+}

package/src/styles/Input.module.css

@@ -31,6 +31,12 @@
     }
 }
 
+.input {
+    @mixin dark {
+        --input-bg: var(--mantine-color-default);
+    }
+}
+
 .section {
     > svg {
         color: var(--mantine-color-gray-3);

package/src/styles/Radio.module.css

@@ -1,43 +1,38 @@
 .labelWrapper {
     display: flex;
     align-items: flex-start;
+    color: var(--coveo-color-title);
 
-    @mixin light {
-        color: var(--coveo-color-title);
-
-        &[data-disabled] {
-            .label,
-            .description {
-                color: var(--mantine-color-disabled-color);
-            }
+    &[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);
-        }
+    &: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);
+    &:disabled {
+        background-color: var(--mantine-color-disabled);
+        border-color: var(--mantine-color-default-border);
 
-            & + .icon {
-                color: var(--mantine-color-placeholder);
-            }
+        & + .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);
+    /* 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);
-            }
+        & + .icon {
+            color: var(--coveo-color-text-readonly);
         }
     }
 }

package/src/styles/ReadOnlyInput.module.css

@@ -2,7 +2,7 @@
     cursor: text;
 
     --input-bd: var(--mantine-color-default-border);
-    --input-bg: var(--mantine-color-gray-1);
+    --input-bg: var(--coveo-color-bg-readonly);
     --input-color: var(--mantine-color-text);
     --input-placeholder-color: var(--mantine-color-text);
 }

package/src/styles/Skeleton.module.css

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

package/src/theme/Theme.tsx

@@ -56,7 +56,16 @@ import {
     Text,
     Tooltip,
 } from '@mantine/core';
-import {DateInput, DatePicker, MonthPicker, PickerInputBase, TimeInput, TimePicker, YearPicker} from '@mantine/dates';
+import {
+    DateInput,
+    DatePicker,
+    DateTimePicker,
+    MonthPicker,
+    PickerInputBase,
+    TimeInput,
+    TimePicker,
+    YearPicker,
+} from '@mantine/dates';
 import {Accordion, CheckboxIcon, CircleLoader, InfoToken} from '../components/index.js';
 import AccordionClasses from '../styles/Accordion.module.css';
 import ActionIconClasses from '../styles/ActionIcon.module.css';
@@ -70,6 +79,7 @@ import CheckboxIndicatorClasses from '../styles/CheckboxIndicator.module.css';
 import ChipClasses from '../styles/Chip.module.css';
 import ComboboxClasses from '../styles/Combobox.module.css';
 import DatePickerClasses from '../styles/DatePicker.module.css';
+import DateTimePickerClasses from '../styles/DateTimePicker.module.css';
 import InputClasses from '../styles/Input.module.css';
 import InputWrapperClasses from '../styles/InputWrapper.module.css';
 import ListClasses from '../styles/List.module.css';
@@ -278,6 +288,9 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
         DatePicker: DatePicker.extend({
             classNames: DatePickerClasses,
         }),
+        DateTimePicker: DateTimePicker.extend({
+            classNames: DateTimePickerClasses,
+        }),
         Divider: Divider.extend({
             defaultProps: {
                 color: 'var(--mantine-color-default-border)',

package/src/theme/plasmaCSSVariablesResolver.ts

@@ -19,7 +19,32 @@ export const plasmaCSSVariablesResolver: CSSVariablesResolver = (theme) => {
             '--coveo-fw-normal': '400',
             '--coveo-fw-bold': '500',
         },
-        dark: {'--coveo-color-title': 'var(--mantine-color-white)'},
+        dark: {
+            // custom colors
+            '--coveo-color-title': 'var(--mantine-color-white)',
+            '--coveo-app-background': theme.colors.dark[8],
+            '--coveo-color-input-border': theme.colors.dark[4],
+            '--coveo-color-text-readonly': theme.colors.dark[0],
+            '--coveo-color-bg-readonly': theme.colors.dark[6],
+            '--coveo-color-text-primary': 'var(--mantine-primary-color-4)',
+            '--coveo-color-bg-dark-surface': 'var(--mantine-primary-color-3)',
+
+            // mantine overrides
+            '--mantine-primary-color-light': 'var(--mantine-primary-color-7)',
+            '--mantine-color-body': theme.colors.dark[8],
+            '--mantine-color-default': theme.colors.dark[7],
+            '--mantine-color-default-border': theme.colors.dark[6],
+            '--mantine-color-default-hover': theme.colors.dark[6],
+            '--mantine-color-error': theme.colors.red[4],
+            '--mantine-color-text': theme.colors.dark[0],
+            '--mantine-color-dimmed': theme.colors.dark[1],
+            '--mantine-color-gray-filled': theme.colors.dark[6],
+            '--mantine-color-warning-filled': theme.colors.yellow[2],
+            '--mantine-color-warning-light': theme.colors.yellow[6],
+            '--mantine-color-placeholder': theme.colors.dark[2],
+            '--mantine-color-disabled': theme.colors.dark[7],
+            '--mantine-color-disabled-color': theme.colors.dark[3],
+        },
         light: {
             // custom colors
             '--coveo-app-background': theme.colors.gray[0],
@@ -31,15 +56,17 @@ export const plasmaCSSVariablesResolver: CSSVariablesResolver = (theme) => {
             '--coveo-color-bg-dark-surface': theme.colors.violet[9],
 
             // mantine overrides
+            '--mantine-color-body': theme.colors.gray[0],
+            '--mantine-color-default': 'var(--mantine-color-white)',
             '--mantine-color-default-border': theme.colors.gray[2],
+            '--mantine-color-default-hover': theme.colors.gray[1],
             '--mantine-color-error': theme.colors.red[5],
             '--mantine-color-text': theme.colors.gray[6],
             '--mantine-color-dimmed': theme.colors.gray[5],
             '--mantine-color-gray-filled': theme.colors.gray[4],
             '--mantine-color-warning-filled': theme.colors.yellow[4],
             '--mantine-color-placeholder': theme.colors.gray[4],
-            '--mantine-color-default-hover': theme.colors.gray[1],
-            '--mantine-color-disabled': alpha('var(--mantine-color-gray-4)', 0.1),
+            '--mantine-color-disabled': alpha(theme.colors.gray[4], 0.1),
             '--mantine-color-disabled-color': theme.colors.gray[3],
         },
     };