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

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;
 }
 

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);
-    }
-}

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;
 }

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);
-    }
-}

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);

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;
 }
 

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;
 }

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);

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);
-        }
-    }
 }

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);
-            }
-        }
-    }
 }

packages/mantine/src/styles/Stepper.module.css

@@ -7,7 +7,7 @@
         }
 
         & .mantine-Stepper-stepIcon {
-            border-color: var(--mantine-color-gray-1);
+            border-color: var(--mantine-color-default-border);
         }
     }
 }

packages/mantine/src/styles/Tabs.module.css

@@ -1,9 +1,5 @@
 .root {
     &[data-variant='default'] {
-        @mixin light {
-            --tab-hover-color: var(--mantine-color-gray-1);
-        }
-
         --tabs-list-border-width: 1px;
 
         &[data-orientation='horizontal'] {