feat(novui): Map panda values to mantine theme

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { Button } from './Button';
+import { Flex } from '../../../styled-system/jsx';
+import { Icon10K, IconInfo } from '../../icons';
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: {},
+} as Meta<typeof Button>;
+
+const Template: StoryFn<typeof Button> = ({ ...args }) => <Button {...args}>Click Me</Button>;
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  loading: true,
+};
+
+export const icon = () => (
+  <Flex>
+    <Button size="lg" Icon={Icon10K}>
+      Large
+    </Button>
+    <Button Icon={IconInfo}>Medium</Button>
+  </Flex>
+);
+
+export const filled = () => (
+  <Flex>
+    <Button size="lg">Large</Button>
+    <Button>Medium</Button>
+  </Flex>
+);
+
+export const outline = () => (
+  <Flex>
+    <Button size="lg" variant="outline">
+      Large
+    </Button>
+    <Button variant="outline">Medium</Button>
+  </Flex>
+);
+
+export const disabled = () => (
+  <Flex>
+    <Button disabled>Filled</Button>
+    <Button variant="outline" disabled>
+      Outline
+    </Button>
+  </Flex>
+);

libs/novui/src/components/button/Button.tsx

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { CorePropsWithChildren } from '../../types';
+import { Button as ExternalButton, ButtonProps } from '@mantine/core';
+import { IconType } from '../../icons';
+import { css } from '../../../styled-system/css';
+
+export interface IButtonProps
+  extends CorePropsWithChildren,
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    Pick<ButtonProps, 'size' | 'variant'> {
+  Icon?: IconType;
+}
+
+export const Button: FC<IButtonProps> = ({ children, Icon, size = 'md', variant = 'filled', ...buttonProps }) => {
+  return (
+    <ExternalButton
+      size={size}
+      leftSection={Icon ? <Icon title="button-icon" size="16" className={css({ color: 'legacy.white' })} /> : undefined}
+      variant={variant}
+      {...buttonProps}
+    >
+      {children}
+    </ExternalButton>
+  );
+};

libs/novui/src/components/button/index.ts

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

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

@@ -0,0 +1,87 @@
+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: 'gradient',
+  primaryShade: 6,
+  colors: {
+    gray: generateMantineColorTokens('mauve'),
+    yellow: generateMantineColorTokens('amber'),
+    blue: generateMantineColorTokens('blue'),
+    green: generateMantineColorTokens('green'),
+    red: generateMantineColorTokens('red'),
+    // must have a tuple of 10 strings, but replace the value at primaryShade with our gradient
+    gradient: ['', '', '', '', '', '', token('gradients.horizontal'), '', '', ''],
+  },
+
+  // 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'),
+  },
+};