@coveord/plasma-mantine 55.7.2-next.0 → 55.7.2

package/src/components/button/Button.tsx

@@ -56,9 +56,3 @@ 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/code-editor/CodeEditor.tsx

@@ -15,7 +15,7 @@ import {
 } from '@mantine/core';
 import {useUncontrolled} from '@mantine/hooks';
 import Editor, {Monaco, loader} from '@monaco-editor/react';
-import {editor as monacoEditor} from 'monaco-editor';
+import {editor as monacoEditor, MarkerSeverity} from 'monaco-editor';
 import {FunctionComponent, useEffect, useRef, useState} from 'react';
 
 import cx from 'clsx';
@@ -159,6 +159,10 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     };
 
     const [hasMonacoError, setHasMonacoError] = useState(false);
+    const hasMonacoErrorRef = useRef(false);
+
+    hasMonacoErrorRef.current = hasMonacoError;
+
     const renderErrorOutline = !!error || hasMonacoError;
     const theme = useMantineTheme();
     const {colorScheme} = useMantineColorScheme();
@@ -172,9 +176,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     }, []);
 
     const handleValidate = (markers: monacoEditor.IMarker[]) => {
-        setHasMonacoError(
-            markers.some((marker) => marker.severity === loader.__getMonacoInstance().MarkerSeverity.Error),
-        );
+        setHasMonacoError(markers.some((marker) => marker.severity === MarkerSeverity.Error));
     };
 
     const _label = label ? (
@@ -247,7 +249,12 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
                     registerThemes(monaco);
                     editor.onDidFocusEditorText(() => onFocus?.());
                     editor.onDidBlurEditorText(async () => {
-                        await editor.getAction('editor.action.formatDocument').run();
+                        // monaco editor has a timeout of 500ms populating errors, we want to ensure that checking errors happen after that
+                        setTimeout(async () => {
+                            if (!hasMonacoErrorRef.current) {
+                                await editor.getAction('editor.action.formatDocument').run();
+                            }
+                        }, 550);
                     });
                 }}
             />

package/src/components/header/Header.module.css

@@ -5,13 +5,18 @@
     }
 
     & .description {
-        color: var(--mantine-color-dimmed);
+        color: var(--mantine-color-gray-6);
         font-weight: 300;
     }
 }
 
 .title {
     word-break: break-word;
+
+    &[data-variant='primary'] {
+        color: var(--mantine-color-gray-5);
+    }
+
     line-height: var(--mantine-line-height-md);
 }
 
@@ -26,5 +31,5 @@
 }
 
 .breadcrumbsSeparator {
-    color: var(--mantine-color-dimmed);
+    color: var(--mantine-color-gray-5);
 }

package/src/components/index.ts

@@ -1,6 +1,4 @@
 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,9 +1,14 @@
 .root {
-    --prompt-icon-size: 68px;
+    --prompt-icon-size: 88px;
+
+    .header {
+        border-bottom: none;
+        align-items: center;
+    }
 
     .body {
         padding: 0 var(--mantine-spacing-lg) var(--mantine-spacing-lg)
-            calc(var(--prompt-icon-size) + var(--mantine-spacing-md) + var(--mantine-spacing-lg));
+            calc(var(--prompt-icon-size) + (2 * var(--mantine-spacing-lg)));
     }
 }
 
@@ -13,12 +18,18 @@
 }
 
 .header {
-    gap: var(--mantine-spacing-md);
+    gap: var(--mantine-spacing-lg);
     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-dimmed);
+    color: var(--mantine-color-gray-7);
 }

package/src/components/prompt/Prompt.tsx

@@ -100,7 +100,7 @@ export const Prompt = factory<PromptFactory>((_props, ref) => {
 
     return (
         <PromptContextProvider value={{variant, getStyles}}>
-            <Modal.Root ref={ref} variant="prompt" size="lg" {...others} {...getStyles('root')}>
+            <Modal.Root ref={ref} variant="prompt" size="sm" {...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: 'var(--mantine-primary-color-filled)',
-    info: 'var(--mantine-primary-color-filled)',
-    warning: 'var(--mantine-color-error)',
-    critical: 'var(--mantine-color-error)',
+    success: 'action',
+    info: 'action',
+    warning: 'critical',
+    critical: 'critical',
 };
 
 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: var(--mantine-color-body);
+    background-color: white;
     padding: var(--mantine-spacing-md) var(--mantine-spacing-lg);
 
     &[data-variant='modal-footer'] {
-        border-top: 1px solid var(--mantine-color-default-border);
+        border-top: 1px solid var(--mantine-color-gray-3);
         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-default-border);
+    border-top: 1px solid var(--mantine-color-gray-3);
 }

package/src/styles/ActionIcon.module.css

@@ -0,0 +1,6 @@
+.root {
+    &[data-disabled] {
+        color: var(--mantine-color-gray-4);
+        background-color: var(--mantine-color-gray-1);
+    }
+}

package/src/styles/Alert.module.css

@@ -1,10 +1,35 @@
 .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/Anchor.module.css

@@ -0,0 +1,6 @@
+.root {
+    @mixin hover {
+        text-decoration: underline;
+        color: var(--mantine-color-action-8);
+    }
+}

package/src/styles/AppShellNavBar.module.css

@@ -0,0 +1,3 @@
+.navbar {
+    border-color: var(--mantine-color-gray-3);
+}

package/src/styles/Badge.module.css

@@ -1,3 +1,5 @@
 .root {
+    text-transform: none;
+    padding: var(--mantine-spacing-xxs) var(--mantine-spacing-xs);
     font-weight: 500;
 }

package/src/styles/Checkbox.module.css

@@ -1,3 +1,20 @@
 .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,10 +1,9 @@
-/* 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-default);
+    border-radius: var(--mantine-radius-md);
     border: 1px solid;
     width: 100%;
-    border-color: var(--mantine-color-default-border);
+    border-color: var(--mantine-color-gray-4);
 
     &:focus {
         border-color: var(--mantine-primary-color-filled);

package/src/styles/DatePicker.module.css

@@ -0,0 +1,3 @@
+.monthCell {
+    text-align: center;
+}

package/src/styles/Input.module.css

@@ -0,0 +1,3 @@
+.input {
+    --input-color: var(--mantine-color-gray-7);
+}

package/src/styles/InputWrapper.module.css

@@ -1,7 +1,16 @@
+.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,3 +1,65 @@
+.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,3 +1,21 @@
+.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/Notification.module.css

@@ -0,0 +1,20 @@
+.root {
+    border-color: var(--mantine-color-gray-3);
+    background-color: var(--mantine-color-gray-0);
+    box-shadow: var(--mantine-shadow-lg);
+    padding: var(--mantine-spacing-sm);
+
+    &[data-with-icon] {
+        padding-left: var(--mantine-spacing-sm);
+    }
+}
+
+.icon {
+    background-color: transparent;
+    margin-right: var(--mantine-spacing-sm);
+}
+
+.closeButton {
+    margin: var(--mantine-spacing-xs);
+    color: var(--mantine-color-gray-5);
+}

package/src/styles/Pagination.module.css

@@ -0,0 +1,30 @@
+.root {
+    --pagination-control-fz: var(--mantine-font-size-sm);
+
+    color: var(--mantine-color-gray-6);
+}
+
+.control {
+    color: var(--mantine-color-gray-6);
+
+    @mixin light {
+        border-color: var(--mantine-color-gray-3);
+
+        @mixin hover {
+            &:where(:not(:disabled, [data-disabled])) {
+                background-color: var(--mantine-primary-color-1);
+            }
+        }
+    }
+
+    &:where([data-active]) {
+        @mixin light {
+            border-color: var(--pagination-active-bg);
+            color: var(--pagination-active-color, var(--mantine-color-white));
+
+            @mixin hover {
+                background-color: var(--pagination-active-bg);
+            }
+        }
+    }
+}

package/src/styles/Radio.module.css

@@ -1,4 +1,10 @@
 .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-dark-light);
-    --input-color: var(--mantine-color-dimmed);
-    --input-placeholder-color: var(--mantine-color-dimmed);
+    --input-bg: var(--mantine-color-gray-2);
+    --input-color: var(--mantine-color-gray-7);
+    --input-placeholder-color: var(--mantine-color-gray-7);
 }

package/src/styles/SegmentedControl.module.css

@@ -1,3 +1,35 @@
+.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/Select.module.css

@@ -0,0 +1,39 @@
+.input {
+    @mixin light {
+        color: var(--mantine-color-gray-7);
+    }
+
+    @mixin dark {
+        color: var(--mantine-color-dark-0);
+    }
+}
+
+.option {
+    padding: 12px 16px;
+
+    @mixin light {
+        color: var(--mantine-color-gray-7);
+
+        @mixin hover {
+            background-color: var(--mantine-color-gray-1);
+        }
+    }
+
+    @mixin dark {
+        color: var(--mantine-color-dark-0);
+
+        @mixin hover {
+            background-color: var(--mantine-color-dark-4);
+        }
+    }
+
+    &[aria-selected='true'] {
+        background-color: var(--mantine-color-action-1);
+        color: var(--mantine-color-action-6);
+
+        @mixin hover {
+            color: var(--mantine-color-action-6);
+            background-color: rgb(237 246 255 / 65%);
+        }
+    }
+}

package/src/styles/Stepper.module.css

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