feat: add GlobalStyles via theme

docs/content/foundation/themes-variants.mdx

@@ -11,7 +11,7 @@ Marigold uses a theme for its base styles.
 ## Theme Object
 
 Theming is based on a `theme object` that builds on the [System UI Theme Specification](https://system-ui.com/theme/).
-The theme object defines your application's spacings, colors, fonts and component styles.
+The theme object defines your application's spacings, colors, fonts and component styles. In the theme, you can define root styles that are applied globally.
 
 ### Spacings
 
@@ -142,11 +142,19 @@ const classNames = useStyles({
 ### Create a Theme
 
 Create a file, e.g. `index.ts` in your theme folder and define your theme object.
+Define the overall applied root styles in the theme aswell.
 Import and use the theme in the `<ThemeProvider>`.
 See a working example base theme here:
 
 ```tsx code
 const theme: BaseTheme = {
+  styles: {
+    root: {
+      fontFamily: 'body',
+      margin: 0,
+      padding: 0,
+    },
+  },
   breakpoints: ['768', '1200'],
   space: {
     none: 0,
@@ -200,6 +208,7 @@ See the theme object keys and the corresponding CSS properties in the following
 
 | Theme Key     | CSS Properties                                                                                                                                                                                     |
 | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `styles.root` | CSSObject                                                                                                                                                                                          |
 | `space`       | `margin`, `margin-top`, `margin-right`, `margin-bottom`, `margin-left`, `padding`, `padding-top`, `padding-right`, `padding-bottom`, `padding-left`, `grid-gap`, `grid-column-gap`, `grid-row-gap` |
 | `breakpoints` | `min-width` (media query)                                                                                                                                                                          |
 | `fonts`       | `font-family `                                                                                                                                                                                     |

packages/components/src/Provider/MarigoldProvider.test.tsx

@@ -80,3 +80,47 @@ test('OverlayProvider is present and supports useModal hook', () => {
   const childComp = screen.getByText('Test');
   expect(childComp).toBeDefined();
 });
+
+test('renders global styles for body and html based on root in theme', () => {
+  const root = render(
+    <MarigoldProvider
+      theme={{
+        fonts: {
+          body: 'Inter',
+          html: 'Roboto',
+        },
+        lineHeights: {
+          body: 1.5,
+          html: 1,
+        },
+        fontWeights: {
+          body: 500,
+          html: 700,
+        },
+        root: {
+          body: {
+            fontFamily: 'body',
+            lineHeight: 'body',
+            fontWeight: 'body',
+          },
+          html: {
+            fontFamily: 'html',
+            lineHeight: 'html',
+            fontWeight: 'html',
+          }
+        },
+      }}
+    >
+      <h1 title="h1">Hello</h1>
+    </MarigoldProvider>
+  );
+
+  const html = window.getComputedStyle(root.baseElement.parentElement!);
+  expect(html.fontFamily).toBe('Roboto');
+  expect(html.fontWeight).toBe('700');
+  expect(html.lineHeight).toBe('1');
+  const body = window.getComputedStyle(root.baseElement); 
+  expect(body.fontFamily).toBe('Inter');
+  expect(body.fontWeight).toBe('500');
+  expect(body.lineHeight).toBe('1.5');
+});

packages/components/src/Provider/MarigoldProvider.tsx

@@ -1,15 +1,29 @@
 import React from 'react';
 import { OverlayProvider } from '@react-aria/overlays';
-import { ThemeProvider, ThemeProviderProps } from '@marigold/system';
+import { ThemeProvider, ThemeProviderProps, useTheme } from '@marigold/system';
+import { Global } from '@emotion/react';
+import { css } from '@theme-ui/css';
 
+const GlobalStyles = () => {
+  const theme = useTheme();
+  const styles = css({
+    body: { variant: 'root.body' },
+    html: { variant: 'root.html' },
+  })(theme);
+
+  return <Global styles={styles} />;
+};
 // a merge of the ThemeProvider and the react-aria OverlayProvider
 export const MarigoldProvider: React.FC<ThemeProviderProps> = ({
   theme,
   children,
-}) => {
+}) => { 
   return (
     <ThemeProvider theme={theme}>
-      <OverlayProvider>{children}</OverlayProvider>
+      <OverlayProvider>
+        <GlobalStyles />
+        {children}
+      </OverlayProvider>
     </ThemeProvider>
   );
 };

packages/system/src/index.ts

@@ -2,4 +2,4 @@ export * from './cache';
 export * from './types';
 export * from './useClassname';
 export * from './useStyles';
-export * from './useTheme';
+export * from './useTheme';

themes/theme-b2b/src/index.ts

@@ -217,6 +217,13 @@ const theme: BaseTheme = {
     info: colors.blue70,
     success: colors.green70,
   },
+  root: {
+    body: {
+      margin: 0,
+      padding: 0,
+      fontFamily: 'body',
+    },
+  },
   alerts: {
     error: {
       borderStyle: 'solid',

themes/theme-unicorn/src/index.ts

@@ -173,6 +173,13 @@ const selectOption = {
 };
 
 const theme: BaseTheme = {
+  styles: {
+    root: {
+      margin: 0,
+      padding: 0,
+      fontFamily: 'body',
+    }
+  },
   breakpoints: ['768', '1200'],
   space: {
     none: 0,