feat: Map Mantine config

libs/novui/src/components/NovuiProvider.tsx

@@ -1,12 +1,14 @@
 import { MantineProvider } from '@mantine/core';
 import { FC, PropsWithChildren } from 'react';
 import { IconProvider } from '../icons/IconProvider';
+import { MANTINE_THEME } from './mantine-theme.config';
+
 type INovuiProviderProps = PropsWithChildren;
 
 /** Used to export a v7 Mantine provider */
 export const NovuiProvider: FC<INovuiProviderProps> = ({ children }) => {
   return (
-    <MantineProvider>
+    <MantineProvider theme={MANTINE_THEME}>
       <IconProvider>{children}</IconProvider>
     </MantineProvider>
   );

libs/novui/src/components/mantine-theme.config.ts

@@ -0,0 +1,84 @@
+import { MantineColorsTuple, MantineThemeOverride } from '@mantine/core';
+import { COLOR_PALETTE_TOKENS } from '../tokens/colors.tokens';
+import { token, Token } from '../../styled-system/tokens';
+
+/**
+ * Generates a Mantine color tuple for the given Panda color "family"
+ */
+const generateMantineColorTokens = (colorFamily: keyof typeof COLOR_PALETTE_TOKENS): MantineColorsTuple => {
+  return Object.keys(COLOR_PALETTE_TOKENS[colorFamily]).map((paletteNumber) =>
+    token(`colors.${colorFamily}.${paletteNumber}.dark` as Token)
+  ) as unknown as MantineColorsTuple;
+};
+
+/** Maps Panda token values to a mantine theme config */
+export const MANTINE_THEME: MantineThemeOverride = {
+  // colors
+  white: token('colors.legacy.white'),
+  black: token('colors.legacy.black'),
+  primaryColor: 'red',
+  colors: {
+    gray: generateMantineColorTokens('mauve'),
+    yellow: generateMantineColorTokens('amber'),
+    blue: generateMantineColorTokens('blue'),
+    green: generateMantineColorTokens('green'),
+    red: generateMantineColorTokens('red'),
+  },
+
+  // typography
+  fontFamily: token('fonts.system'),
+  fontFamilyMonospace: token('fonts.mono'),
+  lineHeights: {
+    sm: token('lineHeights.100'),
+    md: token('lineHeights.125'),
+    lg: token('lineHeights.150'),
+    // missing 175
+    xl: token('lineHeights.200'),
+  },
+  headings: {
+    fontFamily: token('fonts.system'),
+    fontWeight: token('fontWeights.strong'),
+    sizes: {
+      // page title
+      h1: {
+        fontSize: token('fontSizes.150'),
+        lineHeight: token('lineHeights.200'),
+      },
+      // section title
+      h2: {
+        fontSize: token('fontSizes.125'),
+        lineHeight: token('lineHeights.175'),
+      },
+      // subsection title
+      h3: {
+        fontSize: token('fontSizes.100'),
+        lineHeight: token('lineHeights.150'),
+      },
+    },
+  },
+
+  // TODO: these are guesses for how they match up
+  spacing: {
+    xs: token('spacing.25'),
+    sm: token('spacing.50'),
+    md: token('spacing.100'),
+    lg: token('spacing.150'),
+    xl: token('spacing.200'),
+    xxl: token('spacing.250'),
+    xxxl: token('spacing.300'),
+  },
+  radius: {
+    xs: token('radii.xs'),
+    sm: token('radii.s'),
+    md: token('radii.m'),
+    lg: token('radii.l'),
+  },
+  defaultRadius: 'md',
+  shadows: {
+    // TODO: this makes no sense except for md
+    sm: token('shadows.light'),
+    md: token('shadows.medium'),
+    lg: token('shadows.dark'),
+    xl: token('shadows.color'),
+  },
+};