@marigold/system 0.0.2 → 0.3.0

package/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}`);
+});

package/src/Global.tsx

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,55 @@
+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" />

package/src/SVG.test.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { SVG } from './SVG';
+
+test('renders svg', () => {
+  render(<SVG data-testid="svg" />);
+  const svg = screen.getByTestId('svg');
+  expect(svg instanceof SVGElement).toBeTruthy();
+});
+
+test('normalizes <svg>', () => {
+  render(<SVG data-testid="svg" />);
+  const svg = screen.getByTestId('svg');
+  expect(svg).toHaveStyle('display: block');
+  expect(svg).toHaveStyle('max-width: 100%');
+});
+
+test('supports default fill color', () => {
+  render(
+    <SVG data-testid="svg">
+      <path d="M9.9 20.113V13.8415H14" />
+    </SVG>
+  );
+  const svg = screen.getByTestId(/svg/);
+
+  expect(svg.getAttribute('fill')).toEqual('currentcolor');
+});
+
+test('supports default size', () => {
+  render(
+    <SVG data-testid="svg">
+      <path d="M9.9 20.113V13.8415H14" />
+    </SVG>
+  );
+  const svg = screen.getByTestId(/svg/);
+
+  expect(svg.getAttribute('width')).toEqual('24');
+});
+
+test('supports size prop', () => {
+  render(
+    <SVG data-testid="svg" size={30}>
+      <path d="M9.9 20.113V13.8415H14" />
+    </SVG>
+  );
+  const svg = screen.getByTestId(/svg/);
+
+  expect(svg.getAttribute('width')).toEqual('30');
+});
+
+test('supports fill prop', () => {
+  render(
+    <SVG data-testid="svg" fill="#fafafa">
+      <path d="M9.9 20.113V13.8415H14" />
+    </SVG>
+  );
+  const svg = screen.getByTestId(/svg/);
+
+  expect(svg.getAttribute('fill')).toEqual('#fafafa');
+});
+
+test('accepts custom styles prop className', () => {
+  render(
+    <SVG data-testid="svg" className="custom-class-name">
+      <path d="M9.9 20.113V13.8415H14" />
+    </SVG>
+  );
+  const svg = screen.getByTestId(/svg/);
+
+  expect(svg.getAttribute('class')).toMatch(/custom-class-name/);
+});
+
+test('renders <svg> element', () => {
+  render(
+    <SVG data-testid="svg">
+      <path d="M9.9 20.113V13.8415H14" />
+    </SVG>
+  );
+  const svg = screen.getByTestId(/svg/);
+
+  expect(svg instanceof SVGElement).toBeTruthy();
+});

package/src/SVG.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { ComponentProps } from '@marigold/types';
+import { getNormalizedStyles } from '@marigold/system';
+
+const css = getNormalizedStyles('svg');
+
+export type SVGProps = {
+  size?: number;
+} & ComponentProps<'svg'>;
+
+export const SVG: React.FC<SVGProps> = ({ size = 24, children, ...props }) =>
+  jsx(
+    'svg',
+    {
+      width: size,
+      height: size,
+      viewBox: '0 0 24 24',
+      fill: 'currentcolor',
+      ...props,
+      css,
+    },
+    children
+  );

package/src/concepts-principles.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Guides/Concepts & Principles" />
 

package/src/index.ts

@@ -1,5 +1,8 @@
-export * from './categories';
-export * from './system';
-export * from './useClassname';
-export * from './useStyles';
+export * from './Box';
+export * from './Global';
+export * from './normalize';
+export * from './SVG';
+export * from './theme';
+export * from './types';
 export * from './useTheme';
+export * from './variant';

package/src/normalize.test.tsx

@@ -0,0 +1,15 @@
+import { normalize, getNormalizedStyles } from './normalize';
+
+test.each(Object.entries(normalize))('base is included in %p', (_, value) => {
+  expect(value).toMatchObject(normalize.base);
+});
+
+test('get normalized styles', () => {
+  expect(getNormalizedStyles('a')).toMatchObject(normalize.a);
+  expect(getNormalizedStyles('p')).toMatchObject(normalize.p);
+});
+
+test('return base normalzation for arbitrary components', () => {
+  const Component = () => null;
+  expect(getNormalizedStyles(Component)).toMatchObject(normalize.base);
+});

package/src/normalize.ts

@@ -1,114 +1,100 @@
-import { CSSObject } from '@marigold/components/src';
+/**
+ * Normalize styling of certain elements between browsers.
+ * Based on https://www.joshwcomeau.com/css/custom-css-reset/
+ */
+import { ElementType } from 'react';
 
 const base = {
   boxSizing: 'border-box',
   margin: 0,
-  padding: 0,
   minWidth: 0,
-  fontSize: '100%',
-  font: 'inherit',
-  verticalAlign: 'baseline',
-  WebkitTapHighlightColor: 'transparent',
-};
-
-const block = {
-  display: 'block',
-};
-
-const body = {
-  lineHeight: 1,
-};
+} as const;
 
-const list = {
-  listStyle: 'none',
-};
+const a = {
+  ...base,
+  textDecoration: 'none',
+} as const;
 
-const quote = {
-  quotes: 'none',
-  selectors: {
-    '&:before, &:after': {
-      content: "''",
-    },
-  },
-};
+const text = {
+  ...base,
+  overflowWrap: 'break-word',
+} as const;
 
-const table = {
-  borderCollapse: 'collapse',
-  borderSpacing: 0,
-};
+const media = {
+  ...base,
+  display: 'block',
+  maxWidth: '100%',
+} as const;
 
-const appearance = {
+const button = {
+  ...base,
+  display: 'block',
   appearance: 'none',
-};
-
-const field = [block, appearance];
-
-const mark = {
-  backgroundColor: 'transparent',
-  color: 'inherit',
-};
+  font: 'inherit',
+  background: 'transparent',
+  textAlign: 'center',
+} as const;
 
-const select = [
-  ...field,
-  {
-    selectors: {
-      '&::-ms-expand': {
-        display: 'none',
-      },
-    },
+const input = {
+  ...base,
+  display: 'block',
+  appearance: 'none',
+  font: 'inherit',
+  '&::-ms-clear': {
+    display: 'none',
   },
-];
-
-const input = [
-  ...field,
-  {
-    selectors: {
-      '&::-ms-clear': {
-        display: 'none',
-      },
-      '&::-webkit-search-cancel-button': {
-        WebkitAppearance: 'none',
-      },
-    },
+  '&::-webkit-search-cancel-button': {
+    WebkitAppearance: 'none',
   },
-];
+} as const;
 
-const button = {
-  background: 'none',
-};
+const select = {
+  ...base,
+  display: 'block',
+  appearance: 'none',
+  font: 'inherit',
+  '&::-ms-expand': {
+    display: 'none',
+  },
+} as const;
 
-const a = {
-  textDecoration: 'none',
-};
+const textarea = {
+  ...base,
+  display: 'block',
+  appearance: 'none',
+  font: 'inherit',
+} as const;
 
-export const el: BaseNormalization = {
-  article: block,
-  aside: block,
-  details: block,
-  figcaption: block,
-  figure: block,
-  footer: block,
-  header: block,
-  hgroup: block,
-  menu: block,
-  nav: block,
-  section: block,
-  ul: list,
-  ol: list,
-  blockquote: quote,
-  q: quote,
-  body,
-  a,
+// Normalize
+// ---------------
+export const normalize = {
   base,
-  table,
-  mark,
+  a,
+  p: text,
+  h1: text,
+  h2: text,
+  h3: text,
+  h4: text,
+  h5: text,
+  h6: text,
+  img: media,
+  picture: media,
+  video: media,
+  canvas: media,
+  svg: media,
   select,
-  p: list,
   button,
-  textarea: field,
+  textarea,
   input,
-};
+} as const;
+
+export type NormalizedElement = keyof typeof normalize;
 
-type BaseNormalization = {
-  [key: string]: CSSObject;
-};
+/**
+ * Type-safe helper to get normalization. If no normalization is found,
+ * returns the *base* normalization.
+ */
+export const getNormalizedStyles = (val?: ElementType) =>
+  typeof val === 'string' && val in normalize
+    ? normalize[val as NormalizedElement] // Typescript doesn't infer this correctly
+    : normalize.base;

package/src/theme.ts

@@ -0,0 +1,157 @@
+import * as CSS from 'csstype';
+import { NestedScaleDict } from '@theme-ui/css';
+
+/**
+ * Value used to define a scale.
+ *
+ * Can be nested to support a default value.
+ *
+ * @example
+ * Given a theme
+ * ```
+ * {
+ *   colors: {
+ *     primary: { __default: '#00f', light: '#33f' }
+ *   }
+ * }
+ * ```
+ * `css{{ color: 'primary' }}` resolves to `color: #00f`.
+ */
+export type ScaleValue<T> = T | T[] | NestedScaleDict<T> | undefined;
+
+/**
+ * Scales are a set of named, pre-defined CSS values which are used
+ * to create consitency in sizing across visual elements. They give
+ * plain values semantics meaning.
+ *
+ * Marigold uses a plain object to define scales, where the key should be a
+ * descriptive name for the scale (e.g. `small`/`medium`/.. or `body`/`heading`/...),
+ * and the value is the CSS value.
+ */
+export type Scale<T> = {
+  [key: string]: ScaleValue<T>;
+};
+
+/**
+ * Predefined {@link Scale} scale which uses size values.
+ */
+export type SizeScale<T> = {
+  xxsmall?: ScaleValue<T>;
+  xsmall?: ScaleValue<T>;
+  small?: ScaleValue<T>;
+  medium?: ScaleValue<T>;
+  large?: ScaleValue<T>;
+  xlarge?: ScaleValue<T>;
+  xxlarge?: ScaleValue<T>;
+};
+
+/**
+ * A {@link SizeScale} that also includes a required `none` value, which is
+ * usually used to define the blank value (e.g `0`).
+ */
+export type ZeroScale<T> = {
+  none: ScaleValue<T>;
+} & Scale<T>;
+
+/**
+ * Base theme with typings for available scales properties.
+ */
+export interface Theme {
+  /**
+   * To configure the default breakpoints used in responsive array values,
+   * add a breakpoints array to your theme.
+   *
+   * Each breakpoint should be a string  with a CSS length unit included or a
+   * string including a CSS media query. String values with a CSS length unit
+   * will be used to generate a mobile-first (i.e. min-width) media query.
+   *
+   * @example
+   * ```ts
+   * {
+   *   breakpoints: [
+   *     '40em', '@media (min-width: 56em) and (orientation: landscape)', '64em',
+   *   ],
+   * }
+   * ```
+   */
+  breakpoints?: Array<string>;
+
+  colors?: Scale<CSS.Property.Color | NestedScaleDict<CSS.Property.Color>>;
+
+  /**
+   * Used to define a scale for whitspace values,
+   * like `padding`, `margin`, `gap`, etc.
+   */
+  space?: ZeroScale<CSS.Property.Margin<number | string>>;
+
+  /**
+   * Used to define a `font-size` scale.
+   */
+  fontSizes?: Scale<CSS.Property.FontSize<number>>;
+
+  /**
+   * Used to define a `font-family` scale.
+   */
+  fonts?: Scale<CSS.Property.FontFamily>;
+
+  /**
+   * Used to define a `font-weight` scale.
+   */
+  fontWeights?: Scale<CSS.Property.FontWeight>;
+
+  /**
+   * Used to define a `line-height` scale.
+   */
+  lineHeights?: Scale<CSS.Property.LineHeight<string | 0 | number>>;
+
+  /**
+   * Used to define a `letter-spacing` scale.
+   */
+  letterSpacings?: ZeroScale<CSS.Property.LetterSpacing<string | 0 | number>>;
+
+  /**
+   * Used to define a scale for size values,
+   * like `height`, `width`, `flexBasis`, etc.
+   */
+  sizes?: ZeroScale<CSS.Property.Height<{}> | CSS.Property.Width<{}>>;
+
+  /**
+   * Used to define different `border` styles.
+   */
+  borders?: ZeroScale<CSS.Property.Border<{}>>;
+
+  /**
+   * Used to define `border-style` styles.
+   */
+  borderStyles?: Scale<CSS.Property.Border<{}>>;
+
+  /**
+   * Used to define `border-width` styles.
+   */
+  borderWidths?: ZeroScale<CSS.Property.BorderWidth<string | 0 | number>>;
+
+  /**
+   * Used to define `border-radius` styles.
+   */
+  radii?: ZeroScale<CSS.Property.BorderRadius<string | 0 | number>>;
+
+  /**
+   * Used to define `Shadow` styles.
+   */
+  shadows?: ZeroScale<CSS.Property.BoxShadow>;
+
+  /**
+   * Used to define a `z-index` scake.
+   */
+  zIndices?: Scale<CSS.Property.ZIndex>;
+
+  /**
+   * Used to define a `opacity` scale.
+   */
+  opacities?: Scale<CSS.Property.Opacity>;
+
+  /**
+   * Used to define a `transition` styles.
+   */
+  transitions?: ZeroScale<CSS.Property.Transition>;
+}

package/src/types.ts

@@ -0,0 +1,14 @@
+/**
+ * Create type aliases for `theme-ui` so that it doesn't leak too much into our code.
+ */
+import {
+  ThemeUIStyleObject,
+  ThemeUICSSObject,
+  ThemeUICSSProperties,
+  ResponsiveStyleValue as RSV,
+} from '@theme-ui/css';
+
+export type ResponsiveStyleValue<T> = RSV<T>;
+export type StyleObject = ThemeUIStyleObject;
+export type CSSObject = ThemeUICSSObject;
+export type CSSProperties = ThemeUICSSProperties;