feat(mantine): remove a lot of custom style to get a vanilla style

coveo · Dec 17, 2024 · 25cedec · 25cedec
1 parent 34f8056
commit 25cedec
Show file tree

Hide file tree

Showing 30 changed files with 210 additions and 379 deletions.
diff --git a/packages/mantine/src/components/browser-preview/BrowserPreview.module.css b/packages/mantine/src/components/browser-preview/BrowserPreview.module.css
@@ -2,7 +2,7 @@
     box-shadow: var(--mantine-shadow-md);
     border-radius: var(--mantine-radius-default);
     border: 1px solid;
-    border-color: var(--mantine-color-gray-3);
+    border-color: var(--mantine-color-default-border);
     flex: 1;
 }
 

diff --git a/packages/mantine/src/components/header/Header.module.css b/packages/mantine/src/components/header/Header.module.css
@@ -5,18 +5,13 @@
     }
 
     & .description {
-        color: var(--mantine-color-gray-6);
+        color: var(--mantine-color-dimmed);
         font-weight: 300;
     }
 }
 
 .title {
     word-break: break-word;
-
-    &[data-variant='primary'] {
-        color: var(--mantine-color-gray-5);
-    }
-
     line-height: var(--mantine-line-height-md);
 }
 
@@ -31,5 +26,5 @@
 }
 
 .breadcrumbsSeparator {
-    color: var(--mantine-color-gray-5);
+    color: var(--mantine-color-dimmed);
 }
diff --git a/packages/mantine/src/components/prompt/Prompt.module.css b/packages/mantine/src/components/prompt/Prompt.module.css
@@ -1,14 +1,13 @@
 .root {
-    --prompt-icon-size: 88px;
+    --prompt-icon-size: 68px;
 
     .header {
         border-bottom: none;
-        align-items: center;
     }
 
     .body {
         padding: 0 var(--mantine-spacing-lg) var(--mantine-spacing-lg)
-            calc(var(--prompt-icon-size) + (2 * var(--mantine-spacing-lg)));
+            calc(var(--prompt-icon-size) + var(--mantine-spacing-md) + var(--mantine-spacing-lg));
     }
 }
 
@@ -18,10 +17,8 @@
 }
 
 .header {
-    gap: var(--mantine-spacing-lg);
+    gap: var(--mantine-spacing-md);
     width: 100%;
-    font-size: var(--mantine-h3-font-size);
-    line-height: var(--mantine-h3-line-height);
     overflow-wrap: anywhere;
     padding: var(--mantine-spacing-lg) var(--mantine-spacing-md) var(--mantine-spacing-xs) var(--mantine-spacing-lg);
 }
@@ -31,5 +28,5 @@
 }
 
 .inner {
-    color: var(--mantine-color-gray-7);
+    color: var(--mantine-color-dimmed);
 }
diff --git a/packages/mantine/src/components/prompt/Prompt.tsx b/packages/mantine/src/components/prompt/Prompt.tsx
@@ -99,7 +99,7 @@ export const Prompt = factory<PromptFactory>((_props, ref) => {
 
     return (
         <PromptContextProvider value={{variant, getStyles}}>
-            <Modal.Root ref={ref} variant="prompt" size="sm" {...others} {...getStyles('root')}>
+            <Modal.Root ref={ref} variant="prompt" size="lg" {...others} {...getStyles('root')}>
                 <Modal.Overlay {...getStyles('overlay', stylesApiProps)} />
                 <Modal.Content {...getStyles('content', stylesApiProps)}>
                     <Modal.Header {...getStyles('header', stylesApiProps)}>

diff --git a/packages/mantine/src/components/prompt/PromptConfirmButton.tsx b/packages/mantine/src/components/prompt/PromptConfirmButton.tsx
@@ -17,10 +17,10 @@ export type PromptConfirmButtonFactory = Factory<{
 }>;
 
 const COLOR_BY_VARIANT: Record<PromptVariant, string> = {
-    success: 'action',
-    info: 'action',
-    warning: 'critical',
-    critical: 'critical',
+    success: 'var(--mantine-primary-color-filled)',
+    info: 'var(--mantine-primary-color-filled)',
+    warning: 'var(--mantine-color-error)',
+    critical: 'var(--mantine-color-error)',
 };
 
 const defaultProps: Partial<PromptConfirmButtonProps> = {};

diff --git a/packages/mantine/src/styles/ActionIcon.module.css b/packages/mantine/src/styles/ActionIcon.module.css
diff --git a/packages/mantine/src/styles/Alert.module.css b/packages/mantine/src/styles/Alert.module.css
@@ -1,35 +1,10 @@
 .root {
-    padding: var(--mantine-spacing-sm);
-
     &:not(&[data-variant]) {
+        /* TODO: Plasma Reset, validate if we need the border */
         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);
-    }
-}
diff --git a/packages/mantine/src/styles/Anchor.module.css b/packages/mantine/src/styles/Anchor.module.css
diff --git a/packages/mantine/src/styles/AppShellNavBar.module.css b/packages/mantine/src/styles/AppShellNavBar.module.css
diff --git a/packages/mantine/src/styles/Badge.module.css b/packages/mantine/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;
 }
diff --git a/packages/mantine/src/styles/Checkbox.module.css b/packages/mantine/src/styles/Checkbox.module.css
@@ -1,20 +1,3 @@
 .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);
-    }
-}
diff --git a/packages/mantine/src/styles/Combobox.module.css b/packages/mantine/src/styles/Combobox.module.css
@@ -1,9 +1,9 @@
 .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);

diff --git a/packages/mantine/src/styles/DatePicker.module.css b/packages/mantine/src/styles/DatePicker.module.css
diff --git a/packages/mantine/src/styles/Input.module.css b/packages/mantine/src/styles/Input.module.css
diff --git a/packages/mantine/src/styles/Modal.module.css b/packages/mantine/src/styles/Modal.module.css
@@ -1,60 +1,8 @@
-.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;
+    border-bottom: 1px solid var(--mantine-color-default-border);
 }
 
 .title {
-    width: 100%;
-    font-size: var(--mantine-h3-font-size);
-    line-height: var(--mantine-h3-line-height);
     font-weight: 500;
 }
 

diff --git a/packages/mantine/src/styles/NavLink.module.css b/packages/mantine/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;
 }

diff --git a/packages/mantine/src/styles/Notification.module.css b/packages/mantine/src/styles/Notification.module.css
@@ -1,5 +1,5 @@
 .root {
-    border-color: var(--mantine-color-gray-3);
+    border-color: var(--mantine-color-default-border);
     background-color: var(--mantine-color-gray-0);
     box-shadow: var(--mantine-shadow-lg);
     padding: var(--mantine-spacing-sm);

diff --git a/packages/mantine/src/styles/Pagination.module.css b/packages/mantine/src/styles/Pagination.module.css
diff --git a/packages/mantine/src/styles/Radio.module.css b/packages/mantine/src/styles/Radio.module.css
@@ -1,10 +1,4 @@
 .labelWrapper {
     display: flex;
     align-items: flex-start;
-
-    &:not([data-disabled]) {
-        .label {
-            color: var(--mantine-color-gray-7);
-        }
-    }
 }
diff --git a/packages/mantine/src/styles/ReadOnlyInput.module.css b/packages/mantine/src/styles/ReadOnlyInput.module.css
@@ -2,7 +2,7 @@
     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-dimmed);
+    --input-placeholder-color: var(--mantine-color-dimmed);
 }
diff --git a/packages/mantine/src/styles/SegmentedControl.module.css b/packages/mantine/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);
-            }
-        }
-    }
 }