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

…3986)

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

* feat(mantine): add semantic components for button, badge and alert

feat(website): update demo of components

* feat(website): add colour and scheme picker

packages/components-props-analyzer/src/ComponentsList.ts

@@ -97,6 +97,10 @@ const components: Component[] = [
         name: 'Alert',
         packageName: '@coveord/plasma-mantine',
     },
+    {
+        name: 'Badge',
+        packageName: '@coveord/plasma-mantine',
+    },
     {
         name: 'EllipsisText',
         packageName: '@coveord/plasma-mantine',

packages/mantine/src/components/alert/Alert.tsx

@@ -0,0 +1,7 @@
+import {CheckmarkSize16Px, CriticalSize16Px, TipSize16Px, WarningSize16Px} from '@coveord/plasma-react-icons';
+import {Alert} from '@mantine/core';
+
+export const AlertTip = Alert.withProps({color: 'gray', icon: <TipSize16Px height={16} />});
+export const AlertSuccess = Alert.withProps({color: 'success', icon: <CheckmarkSize16Px height={16} />});
+export const AlertWarning = Alert.withProps({color: 'warning', icon: <WarningSize16Px height={16} />});
+export const AlertCritical = Alert.withProps({color: 'critical', icon: <CriticalSize16Px height={16} />});

packages/mantine/src/components/alert/index.ts

@@ -0,0 +1 @@
+export * from './Alert';

packages/mantine/src/components/badge/Badge.tsx

@@ -0,0 +1,10 @@
+import {Badge} from '@mantine/core';
+
+export const BadgePrimary = Badge.withProps({variant: 'light'});
+export const BadgeSecondary = Badge.withProps({variant: 'outline'});
+export const BadgeTertiary = Badge.withProps({variant: 'default'});
+
+export const BadgeInfo = Badge.withProps({variant: 'light'});
+export const BadgeRecommended = Badge.withProps({variant: 'light', color: 'success'});
+export const BadgeCritical = Badge.withProps({variant: 'light', color: 'critical'});
+export const BadgeWarning = Badge.withProps({variant: 'light', color: 'warning'});

packages/mantine/src/components/badge/index.ts

@@ -0,0 +1 @@
+export * from './Badge';

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/components/button/Button.tsx

@@ -56,3 +56,9 @@ export const Button = polymorphicFactory<ButtonOverloadFactory>(
     },
 );
 Button.Group = MantineButton.Group;
+
+export const ButtonPrimary = Button.withProps({variant: 'filled'});
+export const ButtonSecondary = Button.withProps({variant: 'light'});
+export const ButtonTertiary = Button.withProps({variant: 'subtle'});
+export const ButtonDestructive = Button.withProps({variant: 'filled', color: 'var(--mantine-color-error)'});
+export const ButtonDestructiveSecondary = Button.withProps({variant: 'light', color: 'var(--mantine-color-error)'});

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

packages/mantine/src/components/index.ts

@@ -1,4 +1,6 @@
 export * from './action-icon';
+export * from './alert';
+export * from './badge';
 export * from './blank-slate';
 export * from './browser-preview';
 export * from './button';

packages/mantine/src/components/prompt/Prompt.module.css

@@ -1,14 +1,9 @@
 .root {
-    --prompt-icon-size: 88px;
-
-    .header {
-        border-bottom: none;
-        align-items: center;
-    }
+    --prompt-icon-size: 68px;
 
     .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,18 +13,12 @@
 }
 
 .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);
 }
 
-.close {
-    align-self: flex-start;
-}
-
 .inner {
-    color: var(--mantine-color-gray-7);
+    color: var(--mantine-color-dimmed);
 }

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

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

packages/mantine/src/components/sticky-footer/StickyFooter.module.css

@@ -2,17 +2,17 @@
     position: sticky;
     bottom: 0;
     z-index: 10;
-    background-color: white;
+    background-color: var(--mantine-color-body);
     padding: var(--mantine-spacing-md) var(--mantine-spacing-lg);
 
     &[data-variant='modal-footer'] {
-        border-top: 1px solid var(--mantine-color-gray-3);
+        border-top: 1px solid var(--mantine-color-default-border);
         padding-bottom: 0;
         margin: var(--mb-padding) calc(-1 * var(--mb-padding)) calc(var(--mantine-spacing-md) - var(--mb-padding))
             calc(-1 * var(--mb-padding));
     }
 }
 
 .border {
-    border-top: 1px solid var(--mantine-color-gray-3);
+    border-top: 1px solid var(--mantine-color-default-border);
 }

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

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

@@ -1,16 +1,7 @@
-.label {
-    margin-bottom: var(--mantine-spacing-xs);
-}
-
 .description {
-    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;
 }

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

@@ -1,65 +1,3 @@
-.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;
-}
-
 .title {
-    width: 100%;
-    font-size: var(--mantine-h3-font-size);
-    line-height: var(--mantine-h3-line-height);
     font-weight: 500;
 }
-
-.body {
-    &:where(:not(:only-child)) {
-        padding-top: var(--mb-padding, var(--mantine-spacing-md));
-    }
-}

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