@coveord/plasma-mantine 55.3.3 → 55.3.4-next.0

package/dist/esm/theme/plasmaCSSVariablesResolver.js

@@ -1,14 +1,10 @@
-import { keys } from '@mantine/core';
 export const plasmaCSSVariablesResolver = (theme)=>{
     const result = {
         variables: {},
         dark: {},
         light: {}
     };
-    keys(theme.colors).forEach((color)=>{
-        result.light[`--mantine-color-${color}-light`] = theme.colors[color][color === 'gray' ? 1 : 0];
-        result.light[`--mantine-color-${color}-light-hover`] = theme.colors[color][color === 'gray' ? 2 : 1];
-    });
+    result.light['--mantine-color-error'] = theme.colors.red[5];
     return result;
 };
 

package/dist/esm/theme/plasmaCSSVariablesResolver.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/theme/plasmaCSSVariablesResolver.ts"],"sourcesContent":["import {CSSVariablesResolver, ConvertCSSVariablesInput, keys} from '@mantine/core';\n\nexport const plasmaCSSVariablesResolver: CSSVariablesResolver = (theme) => {\n    const result: ConvertCSSVariablesInput = {\n        variables: {},\n        dark: {},\n        light: {},\n    };\n    keys(theme.colors).forEach((color) => {\n        result.light[`--mantine-color-${color}-light`] = theme.colors[color][color === 'gray' ? 1 : 0];\n        result.light[`--mantine-color-${color}-light-hover`] = theme.colors[color][color === 'gray' ? 2 : 1];\n    });\n    return result;\n};\n"],"names":["keys","plasmaCSSVariablesResolver","theme","result","variables","dark","light","colors","forEach","color"],"mappings":"AAAA,SAAwDA,IAAI,QAAO,gBAAgB;AAEnF,OAAO,MAAMC,6BAAmD,CAACC;IAC7D,MAAMC,SAAmC;QACrCC,WAAW,CAAC;QACZC,MAAM,CAAC;QACPC,OAAO,CAAC;IACZ;IACAN,KAAKE,MAAMK,MAAM,EAAEC,OAAO,CAAC,CAACC;QACxBN,OAAOG,KAAK,CAAC,CAAC,gBAAgB,EAAEG,MAAM,MAAM,CAAC,CAAC,GAAGP,MAAMK,MAAM,CAACE,MAAM,CAACA,UAAU,SAAS,IAAI,EAAE;QAC9FN,OAAOG,KAAK,CAAC,CAAC,gBAAgB,EAAEG,MAAM,YAAY,CAAC,CAAC,GAAGP,MAAMK,MAAM,CAACE,MAAM,CAACA,UAAU,SAAS,IAAI,EAAE;IACxG;IACA,OAAON;AACX,EAAE"}
+{"version":3,"sources":["../../../src/theme/plasmaCSSVariablesResolver.ts"],"sourcesContent":["import {ConvertCSSVariablesInput, CSSVariablesResolver} from '@mantine/core';\n\nexport const plasmaCSSVariablesResolver: CSSVariablesResolver = (theme) => {\n    const result: ConvertCSSVariablesInput = {\n        variables: {},\n        dark: {},\n        light: {},\n    };\n    result.light['--mantine-color-error'] = theme.colors.red[5];\n    return result;\n};\n"],"names":["plasmaCSSVariablesResolver","theme","result","variables","dark","light","colors","red"],"mappings":"AAEA,OAAO,MAAMA,6BAAmD,CAACC;IAC7D,MAAMC,SAAmC;QACrCC,WAAW,CAAC;QACZC,MAAM,CAAC;QACPC,OAAO,CAAC;IACZ;IACAH,OAAOG,KAAK,CAAC,wBAAwB,GAAGJ,MAAMK,MAAM,CAACC,GAAG,CAAC,EAAE;IAC3D,OAAOL;AACX,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "55.3.3",
+  "version": "55.3.4-next.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -42,8 +42,8 @@
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.52.0",
-    "@coveord/plasma-react-icons": "55.3.3",
-    "@coveord/plasma-tokens": "55.3.3"
+    "@coveord/plasma-react-icons": "55.3.4-next.0",
+    "@coveord/plasma-tokens": "55.3.4-next.0"
   },
   "devDependencies": {
     "@mantine/carousel": "7.14.3",
@@ -54,7 +54,7 @@
     "@mantine/hooks": "7.14.3",
     "@mantine/modals": "7.14.3",
     "@mantine/notifications": "7.14.3",
-    "@swc/cli": "0.5.1",
+    "@swc/cli": "0.5.2",
     "@swc/core": "1.9.3",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
@@ -74,10 +74,10 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rimraf": "6.0.1",
-    "sass": "1.81.0",
+    "sass": "1.81.1",
     "tslib": "2.8.1",
     "typescript": "5.7.2",
-    "vitest": "2.1.6"
+    "vitest": "2.1.8"
   },
   "peerDependencies": {
     "@mantine/carousel": "^7.6.1",

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

package/src/components/alert/index.ts

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

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

package/src/components/badge/index.ts

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

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

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

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

package/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';

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

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

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

package/src/components/sticky-footer/StickyFooter.module.css

@@ -2,11 +2,11 @@
     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));
@@ -14,5 +14,5 @@
 }
 
 .border {
-    border-top: 1px solid var(--mantine-color-gray-3);
+    border-top: 1px solid var(--mantine-color-default-border);
 }

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

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

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

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

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

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

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

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

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

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

package/src/styles/Stepper.module.css

@@ -1,69 +1,3 @@
-.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);
-        }
-    }
-}
-
 .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);
-}
-
-.stepDescription {
-    color: var(--mantine-color-gray-7);
-
-    &[data-size='xs'] {
-        font-size: var(--mantine-font-size-xs);
-    }
-
-    &[data-size='sm'] {
-        font-size: var(--mantine-font-size-sm);
-    }
-
-    &[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/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'] {