@coveord/plasma-mantine 52.27.4 → 53.0.0

package/src/styles/Stepper.module.css

@@ -0,0 +1,55 @@
+.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

@@ -0,0 +1,37 @@
+.list {
+    &[data-orientation='horizontal'] {
+        &::before {
+            border-style: none;
+        }
+        border-bottom: rem(1) solid var(--mantine-color-gray-3);
+    }
+    &[data-orientation='vertical'] {
+        &::before {
+            border-style: none;
+        }
+        border-right: rem(1) solid var(--mantine-color-gray-3);
+    }
+}
+
+.tab {
+    &[data-orientation='horizontal'] {
+        border-bottom: rem(1) solid transparent;
+        margin-bottom: rem(-1);
+        &[data-active] {
+            border-bottom: rem(1) solid var(--mantine-primary-color-6);
+        }
+    }
+    &[data-orientation='vertical'] {
+        border-right: rem(1) solid transparent;
+        margin-right: rem(-1);
+        &[data-active] {
+            border-bottom: rem(1) solid var(--mantine-primary-color-6);
+        }
+    }
+    & :hover {
+        background-color: var(--mantine-color-gray-0);
+    }
+    &:not([data-active]):hover {
+        border-color: var(--mantine-color-gray-3);
+    }
+}

package/src/styles/Text.module.css

@@ -0,0 +1,3 @@
+.root {
+    font-weight: 300;
+}

package/src/styles/Title.module.css

@@ -0,0 +1,5 @@
+.root {
+    &:is(h1, h2, h3, h4, h5, h6) {
+        letter-spacing: 0.011em;
+    }
+}

package/src/theme/PlasmaColors.ts

@@ -1,8 +1,8 @@
 import {color} from '@coveord/plasma-tokens';
-import {Tuple} from '@mantine/core';
+import {MantineColorsTuple} from '@mantine/core';
 
-const toMantineColor = (plasmaColor: Record<string, string>): Tuple<string, 10> =>
-    Object.values(plasmaColor) as Tuple<string, 10>;
+const toMantineColor = (plasmaColor: Record<string, string>): MantineColorsTuple =>
+    Object.values(plasmaColor) as unknown as MantineColorsTuple;
 
 const navy = toMantineColor(color.primary.navy);
 const red = toMantineColor(color.accent.red);
@@ -19,7 +19,7 @@ const lime = [
     color.secondary.lime[9],
     color.secondary.lime[9],
     color.secondary.lime[9],
-] as Tuple<string, 10>;
+] as MantineColorsTuple;
 
 export const PlasmaColors = {
     // Primary
@@ -35,7 +35,7 @@ export const PlasmaColors = {
         color.primary.action[8],
         color.primary.action[8],
         color.primary.action[9],
-    ] as Tuple<string, 10>,
+    ] as MantineColorsTuple,
     navy,
     info: navy,
     // Accent

package/src/theme/Plasmantine.tsx

@@ -1,10 +1,22 @@
-import {MantineProvider} from '@mantine/core';
-import {FunctionComponent, PropsWithChildren} from 'react';
+import {MantineProvider, MantineProviderProps, mergeThemeOverrides} from '@mantine/core';
+import {FunctionComponent} from 'react';
 
+import {plasmaCSSVariablesResolver} from './plasmaCSSVariablesResolver';
 import {plasmaTheme} from './Theme';
+import {mergeCSSVariablesResolvers} from './mergeCSSVariablesResolvers';
 
-export const Plasmantine: FunctionComponent<PropsWithChildren<unknown>> = ({children}) => (
-    <MantineProvider withGlobalStyles withNormalizeCSS theme={plasmaTheme}>
-        {children}
-    </MantineProvider>
-);
+export const Plasmantine: FunctionComponent<MantineProviderProps> = ({
+    children,
+    theme: externalTheme,
+    cssVariablesResolver: externalCSSVariablesResolver,
+    ...others
+}) => {
+    const theme = mergeThemeOverrides(plasmaTheme, externalTheme);
+    const cssVariablesResolver = mergeCSSVariablesResolvers(plasmaCSSVariablesResolver, externalCSSVariablesResolver);
+
+    return (
+        <MantineProvider theme={theme} cssVariablesResolver={cssVariablesResolver} {...others}>
+            {children}
+        </MantineProvider>
+    );
+};