feat: add normalization for body and html & fix emotion leak (#1515)

.changeset/clean-cats-jog.md

@@ -0,0 +1,6 @@
+---
+"@marigold/components": patch
+"@marigold/system": patch
+---
+
+feat: add normalization for body and html & fix emotion leak

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

@@ -86,46 +86,44 @@ test('OverlayProvider is added only once', () => {
   ).toEqual(1);
 });
 
-test('renders global styles for body and html based on root in theme', () => {
+test('applies global styles for body and html based on `theme.root`', () => {
+  const theme = {
+    fonts: {
+      body: 'Inter',
+      html: 'Roboto',
+    },
+    lineHeights: {
+      body: 2.5,
+    },
+    fontWeights: {
+      body: 500,
+      html: 700,
+    },
+    root: {
+      body: {
+        fontFamily: 'body',
+        lineHeight: 'body',
+        fontWeight: 'body',
+      },
+      html: {
+        fontFamily: 'html',
+        fontWeight: 'html',
+      },
+    },
+  };
+
   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 theme={theme}>
+      <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');
+  const html = root.baseElement.parentElement;
+  expect(html).toHaveStyle(`font-family: ${theme.fonts.html}`);
+  expect(html).toHaveStyle(`font-weight: ${theme.fontWeights.html}`);
+
+  const body = root.baseElement;
+  expect(body).toHaveStyle(`font-family: ${theme.fonts.body}`);
+  expect(body).toHaveStyle(`font-weight: ${theme.fontWeights.body}`);
+  expect(body).toHaveStyle(`line-height: ${theme.lineHeights.body}`);
 });

packages/components/src/Provider/MarigoldProvider.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { OverlayProvider } from '@react-aria/overlays';
 import {
+  Global,
   ThemeProvider,
   ThemeProviderProps,
   useTheme,
   __defaultTheme,
 } from '@marigold/system';
-import { GlobalStyles } from './GlobalStyles';
 
 export const MarigoldProvider: React.FC<ThemeProviderProps> = ({
   theme,
@@ -19,7 +19,7 @@ export const MarigoldProvider: React.FC<ThemeProviderProps> = ({
     <ThemeProvider theme={theme}>
       {isTopLevel ? (
         <>
-          <GlobalStyles />
+          <Global />
           <OverlayProvider>{children}</OverlayProvider>
         </>
       ) : (

packages/components/src/Provider/index.ts

@@ -1,3 +1,4 @@
 export { useTheme, ThemeProvider } from '@marigold/system';
-export * from './MarigoldProvider';
 export { SSRProvider } from '@react-aria/ssr';
+
+export * from './MarigoldProvider';

packages/system/src/Global.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider } from './useTheme';
+
+import { Global } from './Global';
+
+test('applies normlaization to html and body', () => {
+  const root = render(<Global />);
+
+  const html = window.getComputedStyle(root.baseElement.parentElement!);
+  expect(html.height).toBe('100%');
+  const body = window.getComputedStyle(root.baseElement);
+  expect(body.height).toBe('100%');
+  expect(body.lineHeight).toBe('1.5');
+});
+
+test('applies global styles for body and html based on `theme.root`', () => {
+  const theme = {
+    colors: {
+      background: '#fff',
+    },
+    fonts: {
+      body: 'Inter',
+    },
+    lineHeights: {
+      body: 2.5,
+    },
+    fontWeights: {
+      body: 500,
+      html: 700,
+    },
+    root: {
+      body: {
+        fontFamily: 'body',
+        lineHeight: 'body',
+        fontWeight: 'body',
+      },
+      html: {
+        bg: 'background',
+      },
+    },
+  };
+
+  const root = render(
+    <ThemeProvider theme={theme}>
+      <Global />
+    </ThemeProvider>
+  );
+
+  const html = root.baseElement.parentElement;
+  expect(html).toHaveStyle(`background: ${theme.colors.background}`);
+
+  const body = root.baseElement;
+  expect(body).toHaveStyle(`font-family: ${theme.fonts.body}`);
+  expect(body).toHaveStyle(`line-height: ${theme.lineHeights.body}`);
+  expect(body).toHaveStyle(`font-weight: ${theme.fontWeights.body}`);
+});

packages/components/src/Provider/GlobalStyles.tsx → packages/system/src/Global.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Global } from '@emotion/react';
-import { useTheme } from '@marigold/system';
+import { Global as EmotionGlobal } from '@emotion/react';
+import { useTheme } from './useTheme';
 
 /**
  * CSS snippet and idea from:
@@ -16,12 +16,19 @@ const reduceMotionStyles = {
   },
 };
 
-export const GlobalStyles = () => {
+export const Global = () => {
   const { css } = useTheme();
   const styles = css({
-    body: { variant: 'root.body' },
-    html: { variant: 'root.html' },
+    html: {
+      height: '100%',
+      variant: 'root.html',
+    },
+    body: {
+      height: '100%',
+      lineHeight: 1.5,
+      WebkitFontSmoothing: 'antialiased',
+      variant: 'root.body',
+    },
   });
-
-  return <Global styles={{ reduceMotionStyles, ...styles }} />;
+  return <EmotionGlobal styles={{ reduceMotionStyles, ...styles }} />;
 };

packages/system/src/index.ts

@@ -1,3 +1,4 @@
 export * from './Element';
+export * from './Global';
 export * from './types';
 export * from './useTheme';