@marigold/system 0.0.2 → 0.3.0

package/dist/system.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"system.esm.js","sources":["../src/categories.ts","../src/system.tsx","../src/useTheme.tsx","../src/useClassname.ts","../src/normalize.ts","../src/useStyles.ts"],"sourcesContent":["import { PropertiesFallback } from 'csstype';\n\n/**\n * System categories are based on https://primer.style/components/docs/system-props\n */\n\n// Spacing\n// ---------------\nexport const SPACE_PROPS = [\n  'm',\n  'margin',\n  'mt',\n  'marginTop',\n  'mr',\n  'marginRight',\n  'mb',\n  'marginBottom',\n  'ml',\n  'marginLeft',\n  'mx',\n  'marginX',\n  'my',\n  'marginY',\n  'p',\n  'padding',\n  'pt',\n  'paddingTop',\n  'pr',\n  'paddingRight',\n  'pb',\n  'paddingBottom',\n  'pl',\n  'paddingLeft',\n  'px',\n  'paddingX',\n  'py',\n  'paddingY',\n];\n\ntype StandardCSSProperties = PropertiesFallback<number | string>;\n\nexport type SpacingProps = {\n  /**\n   * The **`margin`** CSS property sets the margin area on all four sides of an element. It is a shorthand for `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`.\n   *\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin\n   */\n  m?: StandardCSSProperties['margin'];\n  /**\n   * The **`margin-top`** CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-top\n   */\n  mt?: StandardCSSProperties['marginTop'];\n  /**\n   * The **`margin-right`** CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-right\n   */\n  mr?: StandardCSSProperties['marginRight'];\n  /**\n   * The **`margin-bottom`** CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom\n   */\n  mb?: StandardCSSProperties['marginBottom'];\n  /**\n   * The **`margin-left`** CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-left\n   */\n  ml?: StandardCSSProperties['marginLeft'];\n  /**\n   * The **`mx`** is shorthand for using both **`margin-left`** and **`margin-right`** CSS properties. They set the margin area on the left and right side of an element. A positive value placesit\n   * farther from its neighbors, while a negative value places it closer.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://styled-system.com/#margin-props\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-left\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-right\n   */\n  mx?: StandardCSSProperties['marginLeft'];\n  /**\n   * The **`marginX`** is shorthand for using both **`margin-left`** and **`margin-right`** CSS properties. They set the margin area on the left and right side of an element. A positive value\n   * places it farther from its neighbors, while a negative value places it closer.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://styled-system.com/#margin-props\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-left\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-right\n   */\n  marginX?: StandardCSSProperties['marginLeft'];\n  /**\n   * The **`my`** is shorthard for using both **`margin-top`** and **`margin-bottom`** CSS properties. They set the margin area on the top and bottom of an element. A positive value places it\n   * farther from its neighbors, while a negative value places it closer.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://styled-system.com/#margin-props\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-top\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom\n   */\n  my?: StandardCSSProperties['marginTop'];\n  /**\n   * The **`marginY`** is shorthard for using both **`margin-top`** and **`margin-bottom`** CSS properties. They set the margin area on the top and bottom of an element. A positive value places\n   * it farther from its neighbors, while a negative value places it closer.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://styled-system.com/#margin-props\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-top\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom\n   */\n  marginY?: StandardCSSProperties['marginTop'];\n  /**\n   * The **`padding`** CSS property sets the padding area on all four sides of an element. It is a shorthand for `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`.\n   *\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding\n   */\n  p?: StandardCSSProperties['padding'];\n  /**\n   * The **`padding-top`** padding area on the top of an element.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-top\n   */\n  pt?: StandardCSSProperties['paddingTop'];\n  /**\n   * The **`padding-right`** CSS property sets the width of the padding area on the right side of an element.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-right\n   */\n  pr?: StandardCSSProperties['paddingRight'];\n  /**\n   * The **`padding-bottom`** CSS property sets the height of the padding area on the bottom of an element.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom\n   */\n  pb?: StandardCSSProperties['paddingBottom'];\n  /**\n   * The **`padding-left`** CSS property sets the width of the padding area on the left side of an element.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-left\n   */\n  pl?: StandardCSSProperties['paddingLeft'];\n  /**\n   * The **`px`** is shorthand property for CSS properties **`padding-left`** and **`padding-right`**. They set the width of the padding area on the left and right side of an element.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://styled-system.com/#padding-props\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-left\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-right\n   */\n  px?: StandardCSSProperties['paddingLeft'];\n  /**\n   * The **`paddingX`** is shorthand property for CSS properties **`padding-left`** and **`padding-right`**. They set the width of the padding area on the left and right side of an element.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://styled-system.com/#padding-props\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-left\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-right\n   */\n  paddingX?: StandardCSSProperties['paddingLeft'];\n  /**\n   * The **`py`** is shorthand property for CSS properties **`padding-top`** and **`padding-bottom`**. They set the width of the padding area on the top and bottom of an element.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://styled-system.com/#padding-props\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-top\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom\n   */\n  py?: StandardCSSProperties['paddingTop'];\n  /**\n   * The **`paddingY`** is shorthand property for CSS properties **`padding-top`** and **`padding-bottom`**. They set the width of the padding area on the top and bottom of an element.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://styled-system.com/#padding-props\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-top\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom\n   */\n  paddingY?: StandardCSSProperties['paddingTop'];\n};\n","/**\n * Typings are based on [Reach UI](https://github.com/reach/reach-ui/blob/4cb497f530b0f83f80c6f6f2da46ab55b1160cb6/packages/utils/src/types.tsx).\n */\nimport {\n  forwardRef,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactElement,\n  ValidationMap,\n  WeakValidationMap,\n} from 'react';\n\n/**\n * SystemProps support the `as` and `variant` prop. The former\n * is used to changed the rendered root element of a component.\n *\n * These props also infer additional allowed props based on the\n * value of the `as` prop. For example, setting `as=\"button\"` will\n * allow to use HTMLButtonAttributes on the component.\n */\nexport type SystemProps<P, T extends ElementType> = P &\n  Omit<ComponentPropsWithRef<T>, 'as' | keyof P> & {\n    as?: T;\n    variant?: string;\n  };\n\n/**\n * Enhanced version of `React.FunctionComponent` that accepts `SystemProps`\n * and infers allowed properties based on the `as` prop.\n */\nexport interface SystemComponent<P, T extends ElementType> {\n  /**\n   * These types are a bit of a hack, but cover us in cases where the `as` prop\n   * is not a JSX string type. Makes the compiler happy so 🤷‍♂️\n   */\n  <TT extends ElementType>(props: SystemProps<P, TT>): ReactElement | null;\n  (props: SystemProps<P, T>): ReactElement | null;\n\n  displayName?: string;\n  propTypes?: WeakValidationMap<SystemProps<P, T>>;\n  contextTypes?: ValidationMap<any>;\n  defaultProps?: Partial<SystemProps<P, T>>;\n}\n\n/**\n * Helper to write components that adhere to a common design system API,\n * which includes the `as` and `variant` prop.\n */\nexport function system<P, T extends ElementType>(\n  render: (props: SystemProps<P, T>) => ReactElement | null\n) {\n  return forwardRef((props: any, ref) =>\n    render({ ...props, ref })\n  ) as SystemComponent<P, T>;\n}\n","import React, { createContext, useContext } from 'react';\n\nconst Context = createContext({});\n\nexport const useTheme = () => useContext(Context);\n\nexport type ThemeProviderProps = { theme: any };\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n  theme,\n  children,\n}) => <Context.Provider value={theme}>{children}</Context.Provider>;\n","import { css as emotion } from 'emotion';\nimport { css, ThemeUIStyleObject } from '@theme-ui/css';\nimport { useTheme } from './useTheme';\n\nexport const useClassname = (...styles: ThemeUIStyleObject[]) => {\n  const theme = useTheme();\n  return styles.map(style => emotion(css(style)(theme))).join(' ');\n};\n","import { CSSObject } from '@marigold/components/src';\n\nconst base = {\n  boxSizing: 'border-box',\n  margin: 0,\n  padding: 0,\n  minWidth: 0,\n  fontSize: '100%',\n  font: 'inherit',\n  verticalAlign: 'baseline',\n  WebkitTapHighlightColor: 'transparent',\n};\n\nconst block = {\n  display: 'block',\n};\n\nconst body = {\n  lineHeight: 1,\n};\n\nconst list = {\n  listStyle: 'none',\n};\n\nconst quote = {\n  quotes: 'none',\n  selectors: {\n    '&:before, &:after': {\n      content: \"''\",\n    },\n  },\n};\n\nconst table = {\n  borderCollapse: 'collapse',\n  borderSpacing: 0,\n};\n\nconst appearance = {\n  appearance: 'none',\n};\n\nconst field = [block, appearance];\n\nconst mark = {\n  backgroundColor: 'transparent',\n  color: 'inherit',\n};\n\nconst select = [\n  ...field,\n  {\n    selectors: {\n      '&::-ms-expand': {\n        display: 'none',\n      },\n    },\n  },\n];\n\nconst input = [\n  ...field,\n  {\n    selectors: {\n      '&::-ms-clear': {\n        display: 'none',\n      },\n      '&::-webkit-search-cancel-button': {\n        WebkitAppearance: 'none',\n      },\n    },\n  },\n];\n\nconst button = {\n  background: 'none',\n};\n\nconst a = {\n  textDecoration: 'none',\n};\n\nexport const el: BaseNormalization = {\n  article: block,\n  aside: block,\n  details: block,\n  figcaption: block,\n  figure: block,\n  footer: block,\n  header: block,\n  hgroup: block,\n  menu: block,\n  nav: block,\n  section: block,\n  ul: list,\n  ol: list,\n  blockquote: quote,\n  q: quote,\n  body,\n  a,\n  base,\n  table,\n  mark,\n  select,\n  p: list,\n  button,\n  textarea: field,\n  input,\n};\n\ntype BaseNormalization = {\n  [key: string]: CSSObject;\n};\n","import { useClassname } from './useClassname';\n\nimport * as resetStyleRefs from './normalize';\nimport { ElementType } from 'react';\n\nexport type StylesProps = {\n  element?: ElementType[];\n  variant?: string | string[];\n  [key: string]: any;\n};\n\n/**\n * Hook function that can add base styles, normalization, variant and custom styles\n */\nexport const useStyles = (\n  { element, variant, ...styles }: StylesProps,\n  classNames?: string\n) => {\n  /**\n   * Normalization styles looked up by html tag name(s). Base normalization\n   * is always applied.\n   */\n  var elementArray: ElementType[] = [];\n  if (element) {\n    element.push('base'); // always apply base styles\n    elementArray = element;\n  } else {\n    elementArray = ['base'];\n  }\n  const resetStyles = resetStyleRefs.el;\n  const elements: { [key: string]: any }[] = elementArray.map(\n    styleObject => resetStyles[styleObject as keyof typeof resetStyleRefs.el]\n  );\n\n  const elementObject = Object.assign({}, ...elements);\n\n  const basedOnNormalize = useClassname(elementObject);\n\n  /**\n   * Variants are retrieved from the theme.\n   */\n  const variants = Array.isArray(variant)\n    ? variant.map(v => ({ variant: v }))\n    : [{ variant }];\n\n  const basedOnVariants = useClassname(...variants);\n\n  /**\n   * Custom styles are applied \"on runtime\". They are usually controlled via component\n   * props and can change between component instances. They are more or less the `css`\n   * prop of `emotion`.\n   */\n  const custom = useClassname(styles);\n\n  return [basedOnNormalize, basedOnVariants, custom, classNames].join(' ');\n};\n"],"names":["SPACE_PROPS","system","render","forwardRef","props","ref","Context","createContext","useTheme","useContext","ThemeProvider","theme","children","React","Provider","value","useClassname","styles","map","style","emotion","css","join","base","boxSizing","margin","padding","minWidth","fontSize","font","verticalAlign","WebkitTapHighlightColor","block","display","body","lineHeight","list","listStyle","quote","quotes","selectors","content","table","borderCollapse","borderSpacing","appearance","field","mark","backgroundColor","color","select","input","WebkitAppearance","button","background","a","textDecoration","el","article","aside","details","figcaption","figure","footer","header","hgroup","menu","nav","section","ul","ol","blockquote","q","p","textarea","useStyles","classNames","element","variant","elementArray","push","resetStyles","resetStyleRefs","elements","styleObject","elementObject","Object","assign","basedOnNormalize","variants","Array","isArray","v","basedOnVariants","custom"],"mappings":"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"}
+{"version":3,"file":"system.esm.js","sources":["../src/normalize.ts","../src/variant.ts","../src/Box.tsx","../src/useTheme.tsx","../src/Global.tsx","../src/SVG.tsx"],"sourcesContent":["/**\n * Normalize styling of certain elements between browsers.\n * Based on https://www.joshwcomeau.com/css/custom-css-reset/\n */\nimport { ElementType } from 'react';\n\nconst base = {\n  boxSizing: 'border-box',\n  margin: 0,\n  minWidth: 0,\n} as const;\n\nconst a = {\n  ...base,\n  textDecoration: 'none',\n} as const;\n\nconst text = {\n  ...base,\n  overflowWrap: 'break-word',\n} as const;\n\nconst media = {\n  ...base,\n  display: 'block',\n  maxWidth: '100%',\n} as const;\n\nconst button = {\n  ...base,\n  display: 'block',\n  appearance: 'none',\n  font: 'inherit',\n  background: 'transparent',\n  textAlign: 'center',\n} as const;\n\nconst input = {\n  ...base,\n  display: 'block',\n  appearance: 'none',\n  font: 'inherit',\n  '&::-ms-clear': {\n    display: 'none',\n  },\n  '&::-webkit-search-cancel-button': {\n    WebkitAppearance: 'none',\n  },\n} as const;\n\nconst select = {\n  ...base,\n  display: 'block',\n  appearance: 'none',\n  font: 'inherit',\n  '&::-ms-expand': {\n    display: 'none',\n  },\n} as const;\n\nconst textarea = {\n  ...base,\n  display: 'block',\n  appearance: 'none',\n  font: 'inherit',\n} as const;\n\n// Normalize\n// ---------------\nexport const normalize = {\n  base,\n  a,\n  p: text,\n  h1: text,\n  h2: text,\n  h3: text,\n  h4: text,\n  h5: text,\n  h6: text,\n  img: media,\n  picture: media,\n  video: media,\n  canvas: media,\n  svg: media,\n  select,\n  button,\n  textarea,\n  input,\n} as const;\n\nexport type NormalizedElement = keyof typeof normalize;\n\n/**\n * Type-safe helper to get normalization. If no normalization is found,\n * returns the *base* normalization.\n */\nexport const getNormalizedStyles = (val?: ElementType) =>\n  typeof val === 'string' && val in normalize\n    ? normalize[val as NormalizedElement] // Typescript doesn't infer this correctly\n    : normalize.base;\n","const isNil = (value: any): value is null | undefined =>\n  value === null || value === undefined;\n\n/**\n * Ensures that the `val` is an array. Will return an empty array if `val` is falsy.\n */\nexport const ensureArray = <T>(val?: T | T[]) =>\n  isNil(val) ? [] : Array.isArray(val) ? val : [val];\n\n/**\n * Removes trailing dot from variant, if necessary. This is necessary to support\n * `__default` styles. See https://github.com/system-ui/theme-ui/pull/951\n */\nexport const ensureVariantDefault = (val: string) => val.replace(/\\.$/, '');\n\n/**\n * Ensures that the `variant` is an array and supports the `__default` key.\n */\nexport const ensureArrayVariant = <T extends string>(variant?: T | T[]) =>\n  ensureArray(variant).map(ensureVariantDefault);\n\nexport type State = {\n  checked?: boolean;\n  focus?: boolean;\n  hover?: boolean;\n  disabled?: boolean;\n  error?: boolean;\n};\n\n/**\n * Appends given `state` to a `variant`.\n */\nexport const appendVariantState = (variant: string, state: keyof State) => {\n  return `${ensureVariantDefault(variant)}.:${state}`;\n};\n\n/**\n * Create a variant array from a `variant` and `state` containing\n * passed states, if they are truthy.\n */\nexport const conditional = (\n  variant: string,\n  { disabled = false, ...states }: State\n) => {\n  const entries = [...Object.entries(states), ['disabled', disabled]] as [\n    keyof State,\n    boolean\n  ][];\n  const stateVariants = entries\n    .filter(([, val]) => Boolean(val))\n    .map(([key]) => appendVariantState(variant, key));\n\n  return [variant, ...stateVariants];\n};\n","import { jsx, Theme } from '@emotion/react';\nimport { css as transformStyleObject } from '@theme-ui/css';\nimport { forwardRef } from 'react';\nimport {\n  PolymorphicPropsWithRef,\n  PolymorphicComponentWithRef,\n} from '@marigold/types';\n\nimport { getNormalizedStyles } from './normalize';\nimport { CSSObject } from './types';\nimport { ensureArrayVariant } from './variant';\n\nexport type StyleProps = Pick<\n  CSSObject,\n  | 'display'\n  | 'height'\n  | 'width'\n  | 'minWidth'\n  | 'maxWidth'\n  | 'position'\n  | 'top'\n  | 'bottom'\n  | 'right'\n  | 'left'\n  | 'zIndex'\n  | 'p'\n  | 'px'\n  | 'py'\n  | 'pt'\n  | 'pb'\n  | 'pl'\n  | 'pr'\n  | 'm'\n  | 'mx'\n  | 'my'\n  | 'mt'\n  | 'mb'\n  | 'ml'\n  | 'mr'\n  | 'flexDirection'\n  | 'flexWrap'\n  | 'flexShrink'\n  | 'flexGrow'\n  | 'alignItems'\n  | 'justifyContent'\n  | 'bg'\n  | 'border'\n  | 'borderRadius'\n  | 'boxShadow'\n  | 'opacity'\n  | 'overflow'\n  | 'transition'\n>;\n\nexport type BoxOwnProps = {\n  css?: CSSObject;\n  variant?: string | string[];\n  /**\n   * Use to set base styles for the component\n   * @internal Used to set default styles for Marigold components\n   */\n  __baseCSS?: CSSObject;\n} & StyleProps;\n\nexport type BoxProps = PolymorphicPropsWithRef<BoxOwnProps, 'div'>;\n\n/**\n * Check if there is any falsy value or empty object\n */\nconst isNotEmpty = (val: any) =>\n  !(val && Object.keys(val).length === 0 && val.constructor === Object);\n\ntype CreateStyleProps = {\n  as?: BoxProps['as'];\n  __baseCSS?: BoxOwnProps['__baseCSS'];\n  variant?: BoxOwnProps['variant'];\n  css?: BoxOwnProps['css'];\n  styles?: StyleProps;\n};\n\nconst createThemedStyle =\n  ({ as, __baseCSS, variant, styles, css }: CreateStyleProps) =>\n  (theme: Theme) => {\n    return [\n      getNormalizedStyles(as),\n      transformStyleObject(__baseCSS)(theme),\n      ...ensureArrayVariant(variant).map(v =>\n        transformStyleObject({ variant: v })(theme)\n      ),\n      transformStyleObject(styles)(theme),\n      transformStyleObject(css)(theme),\n    ].filter(isNotEmpty);\n  };\n\nexport const Box: PolymorphicComponentWithRef<BoxOwnProps, 'div'> = forwardRef(\n  (\n    {\n      as = 'div',\n      children,\n      __baseCSS,\n      variant,\n      css = {},\n      display,\n      height,\n      width,\n      minWidth,\n      maxWidth,\n      position,\n      top,\n      bottom,\n      right,\n      left,\n      zIndex,\n      p,\n      px,\n      py,\n      pt,\n      pb,\n      pl,\n      pr,\n      m,\n      mx,\n      my,\n      mt,\n      mb,\n      ml,\n      mr,\n      flexDirection,\n      flexWrap,\n      flexShrink,\n      flexGrow,\n      alignItems,\n      justifyContent,\n      bg,\n      border,\n      borderRadius,\n      boxShadow,\n      opacity,\n      overflow,\n      transition,\n      ...props\n    },\n    ref\n  ) =>\n    jsx(\n      as,\n      {\n        ...props,\n        css: createThemedStyle({\n          as,\n          __baseCSS,\n          variant,\n          css,\n          styles: {\n            display,\n            height,\n            width,\n            minWidth,\n            maxWidth,\n            position,\n            top,\n            bottom,\n            right,\n            left,\n            zIndex,\n            p,\n            px,\n            py,\n            pt,\n            pb,\n            pl,\n            pr,\n            m,\n            mx,\n            my,\n            mt,\n            mb,\n            ml,\n            mr,\n            flexDirection,\n            flexWrap,\n            flexShrink,\n            flexGrow,\n            alignItems,\n            justifyContent,\n            bg,\n            border,\n            borderRadius,\n            boxShadow,\n            opacity,\n            overflow,\n            transition,\n          },\n        }),\n        ref,\n      },\n      children\n    )\n);\n","import React, {\n  createContext,\n  ReactNode,\n  useCallback,\n  useContext,\n} from 'react';\nimport { css as transformStyleObject } from '@theme-ui/css';\nimport { ThemeProvider as EmotionProvider } from '@emotion/react';\n\nimport { Theme } from './theme';\nimport { StyleObject } from './types';\n\n/**\n * @internal\n */\nexport const __defaultTheme: Theme = {};\n\nconst InternalContext = createContext<Theme>(__defaultTheme);\n\nexport const useTheme = () => {\n  const theme = useContext(InternalContext);\n  /**\n   * We cast the theme here to `any` since our subset is not\n   * compatible with the typings of `theme-ui`, since they\n   * also support arrays as scale values, while we don't.\n   */\n  const css = useCallback(\n    (style: StyleObject) => transformStyleObject(style)(theme as any),\n    [theme]\n  );\n  return { theme, css };\n};\n\nexport type ThemeProviderProps<T extends Theme> = {\n  theme: T;\n  children: ReactNode;\n};\n\nexport function ThemeProvider<T extends Theme>({\n  theme,\n  children,\n}: ThemeProviderProps<T>) {\n  return (\n    <EmotionProvider theme={theme}>\n      <InternalContext.Provider value={theme}>\n        {children}\n      </InternalContext.Provider>\n    </EmotionProvider>\n  );\n}\n","import React from 'react';\nimport { Global as EmotionGlobal } from '@emotion/react';\nimport { useTheme } from './useTheme';\n\n/**\n * CSS snippet and idea from:\n * https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/\n */\nconst reduceMotionStyles = {\n  '@media screen and (prefers-reduced-motion: reduce), (update: slow)': {\n    '*': {\n      animationDuration: '0.001ms !important',\n      animationIterationCount: '1 !important',\n      transitionDuration: '0.001ms !important',\n    },\n  },\n};\n\nexport const Global = () => {\n  const { css } = useTheme();\n  const styles = css({\n    html: {\n      height: '100%',\n      variant: 'root.html',\n    },\n    body: {\n      height: '100%',\n      lineHeight: 1.5,\n      WebkitFontSmoothing: 'antialiased',\n      variant: 'root.body',\n    },\n  });\n  return <EmotionGlobal styles={{ reduceMotionStyles, ...styles }} />;\n};\n","import React from 'react';\nimport { jsx } from '@emotion/react';\nimport { ComponentProps } from '@marigold/types';\nimport { getNormalizedStyles } from '@marigold/system';\n\nconst css = getNormalizedStyles('svg');\n\nexport type SVGProps = {\n  size?: number;\n} & ComponentProps<'svg'>;\n\nexport const SVG: React.FC<SVGProps> = ({ size = 24, children, ...props }) =>\n  jsx(\n    'svg',\n    {\n      width: size,\n      height: size,\n      viewBox: '0 0 24 24',\n      fill: 'currentcolor',\n      ...props,\n      css,\n    },\n    children\n  );\n"],"names":["base","boxSizing","margin","minWidth","a","textDecoration","text","overflowWrap","media","display","maxWidth","button","appearance","font","background","textAlign","input","WebkitAppearance","select","textarea","normalize","p","h1","h2","h3","h4","h5","h6","img","picture","video","canvas","svg","getNormalizedStyles","val","isNil","value","undefined","ensureArray","Array","isArray","ensureVariantDefault","replace","ensureArrayVariant","variant","map","appendVariantState","state","conditional","disabled","states","entries","Object","stateVariants","filter","Boolean","key","isNotEmpty","keys","length","constructor","createThemedStyle","as","__baseCSS","styles","css","theme","transformStyleObject","v","Box","forwardRef","ref","children","height","width","position","top","bottom","right","left","zIndex","px","py","pt","pb","pl","pr","m","mx","my","mt","mb","ml","mr","flexDirection","flexWrap","flexShrink","flexGrow","alignItems","justifyContent","bg","border","borderRadius","boxShadow","opacity","overflow","transition","props","jsx","__defaultTheme","InternalContext","createContext","useTheme","useContext","useCallback","style","ThemeProvider","React","EmotionProvider","Provider","reduceMotionStyles","animationDuration","animationIterationCount","transitionDuration","Global","html","body","lineHeight","WebkitFontSmoothing","EmotionGlobal","SVG","size","viewBox","fill"],"mappings":"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"}

package/dist/theme.d.ts

@@ -0,0 +1,136 @@
+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 declare 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 declare type Scale<T> = {
+    [key: string]: ScaleValue<T>;
+};
+/**
+ * Predefined {@link Scale} scale which uses size values.
+ */
+export declare 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 declare 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/dist/types.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 declare type ResponsiveStyleValue<T> = RSV<T>;
+export declare type StyleObject = ThemeUIStyleObject;
+export declare type CSSObject = ThemeUICSSObject;
+export declare type CSSProperties = ThemeUICSSProperties;

package/dist/useTheme.d.ts

@@ -1,6 +1,16 @@
-import React from 'react';
-export declare const useTheme: () => {};
-export declare type ThemeProviderProps = {
-    theme: any;
+import { ReactNode } from 'react';
+import { Theme } from './theme';
+import { StyleObject } from './types';
+/**
+ * @internal
+ */
+export declare const __defaultTheme: Theme;
+export declare const useTheme: () => {
+    theme: Theme;
+    css: (style: StyleObject) => import("@theme-ui/css").CSSObject;
 };
-export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export declare type ThemeProviderProps<T extends Theme> = {
+    theme: T;
+    children: ReactNode;
+};
+export declare function ThemeProvider<T extends Theme>({ theme, children, }: ThemeProviderProps<T>): JSX.Element;

package/dist/variant.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Ensures that the `val` is an array. Will return an empty array if `val` is falsy.
+ */
+export declare const ensureArray: <T>(val?: T | T[] | undefined) => T[];
+/**
+ * Removes trailing dot from variant, if necessary. This is necessary to support
+ * `__default` styles. See https://github.com/system-ui/theme-ui/pull/951
+ */
+export declare const ensureVariantDefault: (val: string) => string;
+/**
+ * Ensures that the `variant` is an array and supports the `__default` key.
+ */
+export declare const ensureArrayVariant: <T extends string>(variant?: T | T[] | undefined) => string[];
+export declare type State = {
+    checked?: boolean;
+    focus?: boolean;
+    hover?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+};
+/**
+ * Appends given `state` to a `variant`.
+ */
+export declare const appendVariantState: (variant: string, state: keyof State) => string;
+/**
+ * Create a variant array from a `variant` and `state` containing
+ * passed states, if they are truthy.
+ */
+export declare const conditional: (variant: string, { disabled, ...states }: State) => string[];

package/package.json

@@ -1,21 +1,19 @@
 {
   "name": "@marigold/system",
-  "version": "0.0.2",
+  "version": "0.3.0",
   "description": "Marigold System Library",
   "main": "dist/index.js",
   "module": "dist/system.esm.js",
   "typings": "dist/index.d.ts",
   "license": "MIT",
   "dependencies": {
-    "emotion": "10.0.27",
-    "@theme-ui/css": "0.4.0-rc.13"
+    "@emotion/react": "11.7.1",
+    "@theme-ui/css": "0.13.1",
+    "csstype": "3.0.10"
   },
   "peerDependencies": {
-    "react": "^16.x",
-    "react-dom": "^16.x"
-  },
-  "devDependencies": {
-    "csstype": "3.0.6"
+    "react": "^16.x || ^17.0.0",
+    "react-dom": "^16.x || ^17.0.0"
   },
   "scripts": {
     "build": "tsdx build --tsconfig tsconfig.build.json --transpileOnly",

package/src/Box.test.tsx

@@ -0,0 +1,308 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from './useTheme';
+import { Box, StyleProps } from './Box';
+import { normalize } from './normalize';
+
+const theme = {
+  colors: {
+    primary: 'black',
+    secondary: 'hotpink',
+    black: '#000',
+    white: '#fff',
+    blue: 'cornflowerblue',
+  },
+  fontSizes: {
+    body: 16,
+    small: 12,
+    large: 24,
+  },
+  space: {
+    none: 0,
+    xsmall: 2,
+    small: 4,
+    medium: 8,
+    large: 16,
+  },
+  sizes: {
+    none: 0,
+    small: 8,
+    medium: 16,
+    large: 32,
+  },
+  borders: { none: 'none', regular: '1px solid black' },
+  radii: { none: 0, small: 2, medium: 4 },
+  opacities: {
+    hidden: 0,
+    faded: 0.5,
+    visible: 1,
+  },
+  transitions: { none: 'none', regular: '1s opacity' },
+  shadows: {
+    none: 'none',
+    regular: '3px 3px 5px 6px #ccc',
+    inset: 'inset 0 0 10px #000000',
+  },
+  text: {
+    body: {
+      fontSize: 'body',
+      color: 'primary',
+      bg: 'white',
+    },
+    headline1: {
+      fontSize: 'large',
+      color: 'secondary',
+    },
+    whitespace: {
+      p: 'medium',
+    },
+  },
+  variant: {
+    spacing: {
+      m: 'large',
+      p: 'large',
+    },
+  },
+};
+
+test('renders a <div> by default', () => {
+  render(<Box>Test</Box>);
+  const testelem = screen.getByText('Test');
+
+  expect(testelem instanceof HTMLDivElement).toBeTruthy();
+});
+
+test('changes rendered element via "as" prop', () => {
+  render(<Box as="p">Test</Box>);
+  const testelem = screen.getByText('Test');
+
+  expect(testelem instanceof HTMLParagraphElement).toBeTruthy();
+});
+
+test('supports custom className', () => {
+  render(<Box className="my-custom-class">Test</Box>);
+  const element = screen.getByText('Test');
+
+  expect(element.getAttribute('class')).toMatch('my-custom-class');
+});
+
+test('passes down HTML attributes', () => {
+  render(
+    <Box className="my-custom-class" id="element-id" disabled>
+      Test
+    </Box>
+  );
+  const element = screen.getByText('Test');
+
+  expect(element.getAttribute('id')).toEqual('element-id');
+  expect(element.getAttribute('disabled')).toMatch('');
+});
+
+test('forwards ref', () => {
+  const ref = React.createRef<HTMLButtonElement>();
+  render(
+    <Box as="button" ref={ref}>
+      button
+    </Box>
+  );
+
+  expect(ref.current instanceof HTMLButtonElement).toBeTruthy();
+});
+
+test('apply normalized styles', () => {
+  render(<Box>Test</Box>);
+  const element = screen.getByText('Test');
+  const { base } = normalize;
+
+  // Smoketest
+  expect(element).toHaveStyle(`box-sizing: ${base.boxSizing}`);
+  expect(element).toHaveStyle(`margin: ${base.margin}px`);
+  expect(element).toHaveStyle(`min-width: ${base.minWidth}`);
+});
+
+test('base normalization is always applied', () => {
+  render(<Box as="button">Test</Box>);
+  const element = screen.getByText('Test');
+  const { base } = normalize;
+
+  expect(element).toHaveStyle(`box-sizing: ${base.boxSizing}`);
+  expect(element).toHaveStyle(`margin: ${base.margin}px`);
+  expect(element).toHaveStyle(`min-width: ${base.minWidth}`);
+});
+
+test('apply normalized styles based on element', () => {
+  render(<Box as="h1">Test</Box>);
+  const element = screen.getByText('Test');
+  const { h1 } = normalize;
+
+  expect(element).toHaveStyle(`overflow-wrap: ${h1.overflowWrap}`);
+});
+
+test('accepts default styling via "__baseCSS" prop', () => {
+  render(<Box __baseCSS={{ color: 'hotpink' }}>Test</Box>);
+  const element = screen.getByText('Test');
+
+  expect(element).toHaveStyle('color: hotpink');
+});
+
+test('default styling overrides normalization', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Box __baseCSS={{ m: 'medium' }}>Test</Box>
+    </ThemeProvider>
+  );
+  const element = screen.getByText('Test');
+
+  expect(element).toHaveStyle(`margin: ${theme.space.medium}px`);
+});
+
+test('variants are applied correctly', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Box variant="text.body">Test</Box>
+    </ThemeProvider>
+  );
+  const element = screen.getByText('Test');
+
+  expect(element).toHaveStyle(`font-size: ${theme.fontSizes.body}px`);
+  expect(element).toHaveStyle(`color: ${theme.colors.primary}`);
+});
+
+test('accept an array of variants', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Box as="p" variant={['text.headline1', 'text.whitespace']}>
+        Test
+      </Box>
+    </ThemeProvider>
+  );
+  const element = screen.getByText('Test');
+
+  expect(element).toHaveStyle(`font-size: ${theme.fontSizes.large}px`);
+  expect(element).toHaveStyle(`color: ${theme.colors.secondary}`);
+  expect(element).toHaveStyle(`padding: ${theme.space.medium}px`);
+});
+
+test('variants override normalization and default styles', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Box __baseCSS={{ p: 'small' }} variant="variant.spacing">
+        Test
+      </Box>
+    </ThemeProvider>
+  );
+  const element = screen.getByText('Test');
+
+  expect(element).toHaveStyle(`margin: ${theme.space.large}px`);
+  expect(element).toHaveStyle(`padding: ${theme.space.large}px`);
+});
+
+test.each([
+  [{ display: 'flex' }, 'display: flex'],
+  [{ height: 'small' }, 'height: 8px'],
+  [{ width: 'medium' }, 'width: 16px'],
+  [{ minWidth: 'small' }, 'min-width: 8px'],
+  [{ maxWidth: 'large' }, 'max-width: 32px'],
+  [{ position: 'absolute' }, 'position: absolute'],
+  [{ top: 'none' }, 'top: 0px'],
+  [{ bottom: 'xsmall' }, 'bottom: 2px'],
+  [{ right: 'medium' }, 'right: 8px'],
+  [{ left: 'small' }, 'left: 4px'],
+  [{ zIndex: 1000 }, 'z-index: 1000'],
+  [{ p: 'xsmall' }, 'padding: 2px'],
+  [{ px: 'xsmall' }, 'padding-left: 2px', 'padding-right: 2px'],
+  [{ py: 'small' }, 'padding-top: 4px', 'padding-bottom: 4px'],
+  [{ pt: 'xsmall' }, 'padding-top: 2px'],
+  [{ pb: 'xsmall' }, 'padding-bottom: 2px'],
+  [{ pl: 'xsmall' }, 'padding-left: 2px'],
+  [{ pr: 'xsmall' }, 'padding-right: 2px'],
+  [{ m: 'xsmall' }, 'margin: 2px'],
+  [{ mx: 'xsmall' }, 'margin-left: 2px', 'margin-right: 2px'],
+  [{ my: 'small' }, 'margin-top: 4px', 'margin-bottom: 4px'],
+  [{ mt: 'xsmall' }, 'margin-top: 2px'],
+  [{ mb: 'xsmall' }, 'margin-bottom: 2px'],
+  [{ ml: 'xsmall' }, 'margin-left: 2px'],
+  [{ mr: 'xsmall' }, 'margin-right: 2px'],
+  [{ flexDirection: 'column' }, 'flex-direction: column'],
+  [{ flexWrap: 'wrap' }, 'flex-wrap: wrap'],
+  [{ flexShrink: 5 }, 'flex-shrink: 5'],
+  [{ flexGrow: 1 }, 'flex-grow: 1'],
+  [{ alignItems: 'baseline' }, 'align-items: baseline'],
+  [{ justifyContent: 'space-between' }, 'justify-content: space-between'],
+  [{ bg: 'secondary' }, 'background-color: hotpink'],
+  [{ border: 'regular' }, 'border: 1px solid black'],
+  [{ borderRadius: 'medium' }, 'border-radius: 4px'],
+  [{ boxShadow: 'regular' }, 'box-shadow: 3px 3px 5px 6px #ccc'],
+  [{ opacity: 'faded' }, 'opacity: 0.5'],
+  [{ overflow: 'hidden' }, 'overflow: hidden'],
+  [{ transition: 'regular' }, 'transition: 1s opacity'],
+])('supports style prop (%o)', (...args) => {
+  const props = args.shift() as StyleProps;
+
+  render(
+    <ThemeProvider theme={theme}>
+      <Box {...props}>What's in the box!</Box>
+    </ThemeProvider>
+  );
+
+  const box = screen.getByText(`What's in the box!`);
+  args.forEach((style: any) => {
+    expect(box).toHaveStyle(style);
+  });
+});
+
+test('style props override normalization, defaults and variants', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Box
+        __baseCSS={{ p: 'small' }}
+        variant="text.body"
+        bg="blue"
+        m="medium"
+        p="large"
+      >
+        Test
+      </Box>
+    </ThemeProvider>
+  );
+  const element = screen.getByText('Test');
+
+  expect(element).toHaveStyle(`margin: ${theme.space.medium}px`); // overrides normalization
+  expect(element).toHaveStyle(`padding: ${theme.space.large}px`); // overrides default
+  expect(element).toHaveStyle(`background: ${theme.colors.blue}`); // overrides variant
+});
+
+test('apply custom styling via css prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Box css={{ color: 'secondary', padding: '1rem' }}>Test</Box>
+    </ThemeProvider>
+  );
+  const element = screen.getByText('Test');
+
+  expect(element).toHaveStyle(`padding: 1rem`);
+  expect(element).toHaveStyle(`color: ${theme.colors.secondary}`);
+});
+
+test('custom styling overrides normalization, defaults, variants and style props', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Box
+        __baseCSS={{ p: 'small' }}
+        variant="text.body"
+        bg="black"
+        css={{ fontSize: 'large', m: 'small', p: 'large', bg: 'blue' }}
+      >
+        Test
+      </Box>
+    </ThemeProvider>
+  );
+  const element = screen.getByText('Test');
+
+  expect(element).toHaveStyle(`margin: ${theme.space.small}px`); // overrides normalization
+  expect(element).toHaveStyle(`padding: ${theme.space.large}px`); // overrides default
+  expect(element).toHaveStyle(`font-size: ${theme.fontSizes.large}px`); // overrides variant
+  expect(element).toHaveStyle(`background: ${theme.colors.blue}`); // overrides style prop
+
+  expect(element).not.toHaveStyle(`color: ${theme.colors.primary}px`); // variant part that is not overriden
+});