@marigold/system 0.3.0 → 0.4.0

package/src/Colors.stories.mdx

@@ -1,499 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { Box, Column, Columns, Container, Text } from '@marigold/components';
-
-<Meta title="Tokens/Marigold Colours" />
-
-# Colours
-
-## B2B Theme
-
-<Canvas>
-  <Story name="B2B Theme">
-    <Columns space={16}>
-      <Column width={6}>
-        <Text as="h2" variant="headline2">
-          Gray
-        </Text>
-        <Box
-          as={Container}
-          bg="#ffffff"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Gray00</Text>
-          <Text>#ffffff</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#fafafa"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Gray10</Text>
-          <Text>#fafafa</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#f3f3f3"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Gray20</Text>
-          <Text>#f3f3f3</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#e3e3e3"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Gray30</Text>
-          <Text>#e3e3e3</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#cccccc"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Gray40</Text>
-          <Text>#cccccc</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#8d8d8d"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Gray50</Text>
-          <Text>#8d8d8d</Text>
-        </Box>
-        <Box
-          as={Container}
-          css={{ color: 'white' }}
-          bg="#6d6d6d"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Gray60</Text>
-          <Text>#6d6d6d</Text>
-        </Box>
-        <Box
-          as={Container}
-          css={{ color: 'white' }}
-          bg="#4b4b4b"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Gray70 (Text Black)</Text>
-          <Text>#4b4b4b</Text>
-        </Box>
-        <Box
-          as={Container}
-          css={{ color: 'white' }}
-          bg="#2b2b2b"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Gray80</Text>
-          <Text>#2b2b2b</Text>
-        </Box>
-        <Box
-          as={Container}
-          css={{ color: 'white' }}
-          bg="#0f0f0f"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Gray90</Text>
-          <Text>#0f0f0f</Text>
-        </Box>
-      </Column>
-      <Column width={6}>
-        <Text as="h2" variant="headline2">
-          Orange
-        </Text>
-        <Box
-          as={Container}
-          bg="#fff8f1"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Orange10</Text>
-          <Text>#fff8f1</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#fdcca0"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Orange20</Text>
-          <Text>#fdcca0</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#f8ac67"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Orange40</Text>
-          <Text>#f8ac67</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#fa8005"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Orange60 (Primary)</Text>
-          <Text>#fa8005</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#ea5200"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Orange70</Text>
-          <Text>#ea5200</Text>
-        </Box>
-        <Box
-          as={Container}
-          css={{ color: 'white' }}
-          bg="#ae440a"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Orange80</Text>
-          <Text>#ae440a</Text>
-        </Box>
-      </Column>
-    </Columns>
-    <Columns space={16}>
-      <Column width={6}>
-        <Text as="h2" variant="headline2">
-          Blue
-        </Text>
-        <Box
-          as={Container}
-          bg="#e8f4fa"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Blue10</Text>
-          <Text>#e8f4fa</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#c1f0fc"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Blue20</Text>
-          <Text>#c1f0fc</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#67dfff"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Blue40</Text>
-          <Text>#67dfff</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#3ab3d5"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Blue60</Text>
-          <Text>#3ab3d5</Text>
-        </Box>
-        <Box
-          as={Container}
-          css={{ color: 'white' }}
-          bg="#1d67b6"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Blue70</Text>
-          <Text>#1d67b6</Text>
-        </Box>
-        <Box
-          as={Container}
-          css={{ color: 'white' }}
-          bg="#fafafa"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Blue80</Text>
-          <Text>#0c3a6b</Text>
-        </Box>
-      </Column>
-      <Column width={6}>
-        <Text as="h2" variant="headline2">
-          Green
-        </Text>
-        <Box
-          as={Container}
-          bg="#f9fed0"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Green10</Text>
-          <Text>#f9fed0</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#e8f57b"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Green20</Text>
-          <Text>#e8f57b</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#bacb2a"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Green40</Text>
-          <Text>#bacb2a</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#8bbd26"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Green60</Text>
-          <Text>#8bbd26</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#44a112"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Green70</Text>
-          <Text>#44a112</Text>
-        </Box>
-        <Box
-          as={Container}
-          css={{ color: 'white' }}
-          bg="#215107"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Green80</Text>
-          <Text>#215107</Text>
-        </Box>
-      </Column>
-    </Columns>
-    <Columns space={16}>
-      <Column width={6}>
-        <Text as="h2" variant="headline2">
-          Red
-        </Text>
-        <Box
-          as={Container}
-          bg="#fff8f8"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Red10</Text>
-          <Text>#fff8f8</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#fec8c9"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Red20</Text>
-          <Text>#fec8c9</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#f38a8a"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Red40</Text>
-          <Text>#f38a8a</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#dd4142"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Red60</Text>
-          <Text>#dd4142</Text>
-        </Box>
-        <Box
-          as={Container}
-          css={{ color: 'white' }}
-          bg="#8b0027"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Red70</Text>
-          <Text>#8b0027</Text>
-        </Box>
-        <Box
-          as={Container}
-          css={{ color: 'white' }}
-          bg="#4d0419"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Red80</Text>
-          <Text>#4d0419</Text>
-        </Box>
-      </Column>
-    </Columns>
-  </Story>
-</Canvas>
-
-## Unicorn Theme
-
-<Canvas>
-  <Story name="Unicorn Theme">
-    <Columns space={16}>
-      <Column width={6}>
-        <Text as="h2" variant="headline2">
-          Base Colours
-        </Text>
-        <Box
-          as={Container}
-          css={{ color: 'white' }}
-          bg="#070708"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Text</Text>
-          <Text>#070708</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#fdfcfd"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Background</Text>
-          <Text>#fdfcfd</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#c9b1ff"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Primary</Text>
-          <Text>#c9b1ff</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#ffcaf2"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Secondary</Text>
-          <Text>#ffcaf2</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#e9e7eb"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Disabled</Text>
-          <Text>#e9e7eb</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#ffb2b1"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Error</Text>
-          <Text>#ffb2b1</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#fff3ad"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Warning</Text>
-          <Text>#fff3ad</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#a2edff"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Info</Text>
-          <Text>#a2edff</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#bcffbc"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Success</Text>
-          <Text>#bcffbc</Text>
-        </Box>
-      </Column>
-    </Columns>
-  </Story>
-</Canvas>

package/src/Global.test.tsx

@@ -1,57 +0,0 @@
-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}`);
-});

package/src/Global.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { Global as EmotionGlobal } from '@emotion/react';
-import { useTheme } from './useTheme';
-
-/**
- * CSS snippet and idea from:
- * https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/
- */
-const reduceMotionStyles = {
-  '@media screen and (prefers-reduced-motion: reduce), (update: slow)': {
-    '*': {
-      animationDuration: '0.001ms !important',
-      animationIterationCount: '1 !important',
-      transitionDuration: '0.001ms !important',
-    },
-  },
-};
-
-export const Global = () => {
-  const { css } = useTheme();
-  const styles = css({
-    html: {
-      height: '100%',
-      variant: 'root.html',
-    },
-    body: {
-      height: '100%',
-      lineHeight: 1.5,
-      WebkitFontSmoothing: 'antialiased',
-      variant: 'root.body',
-    },
-  });
-  return <EmotionGlobal styles={{ reduceMotionStyles, ...styles }} />;
-};

package/src/SVG.stories.mdx

@@ -1,55 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { SVG } from './SVG';
-
-<Meta
-  title="Components/SVG"
-  argTypes={{
-    variant: {
-      control: {
-        type: 'text',
-      },
-      table: {
-        defaultValue: {
-          summary: 'icon',
-        },
-      },
-    },
-    size: {
-      control: {
-        type: 'range',
-        min: 0,
-        max: 96,
-        step: 2,
-      },
-      table: {
-        defaultValue: {
-          summary: 24,
-        },
-      },
-    },
-    fill: {
-      control: {
-        type: 'text',
-      },
-      table: {
-        defaultValue: {
-          summary: 'currentColor',
-        },
-      },
-    },
-  }}
-/>
-
-# SVG
-
-export const Template = args => (
-  <SVG {...args}>
-    <path d="M9.9 20.113V13.8415H14.1V20.113H19.35V11.751H22.5L12 2.34375L1.5 11.751H4.65V20.113H9.9Z" />
-  </SVG>
-);
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />