@marigold/system 0.2.0 → 0.3.0

package/dist/system.esm.js

@@ -1,8 +1,7 @@
-import { jsx } from '@emotion/react';
-import React, { useContext, useCallback, createContext, forwardRef } from 'react';
-import { css } from '@theme-ui/css';
-import { css as css$1 } from '@emotion/css';
-export { cache } from '@emotion/css';
+import { jsx, ThemeProvider as ThemeProvider$1, Global as Global$1 } from '@emotion/react';
+import { css as css$1 } from '@theme-ui/css';
+import React, { forwardRef, useContext, useCallback, createContext } from 'react';
+import { getNormalizedStyles as getNormalizedStyles$1 } from '@marigold/system';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -40,351 +39,354 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 var base = {
   boxSizing: 'border-box',
   margin: 0,
-  padding: 0,
-  minWidth: 0,
-  fontSize: '100%',
-  fontFamily: 'inherit',
-  verticalAlign: 'baseline',
-  WebkitTapHighlightColor: 'transparent'
-}; // Content
-// ---------------
-
-var block = {
-  display: 'block'
-};
-var list = {// empty
+  minWidth: 0
 };
-var table = {
-  borderCollapse: 'collapse',
-  borderSpacing: 0
-}; // Typography
-// ---------------
 
-var a = {
-  textDecoration: 'none',
-  touchAction: 'manipulation'
-};
-var quote = {
-  quotes: 'none',
-  selectors: {
-    '&:before, &:after': {
-      content: "''"
-    }
-  }
-}; // Form Elements
-// ---------------
+var a = /*#__PURE__*/_extends({}, base, {
+  textDecoration: 'none'
+});
 
-var button = {
+var text = /*#__PURE__*/_extends({}, base, {
+  overflowWrap: 'break-word'
+});
+
+var media = /*#__PURE__*/_extends({}, base, {
+  display: 'block',
+  maxWidth: '100%'
+});
+
+var button = /*#__PURE__*/_extends({}, base, {
   display: 'block',
   appearance: 'none',
+  font: 'inherit',
   background: 'transparent',
-  textAlign: 'center',
-  touchAction: 'manipulation'
-};
-var input = {
+  textAlign: 'center'
+});
+
+var input = /*#__PURE__*/_extends({}, base, {
   display: 'block',
   appearance: 'none',
-  selectors: {
-    '&::-ms-clear': {
-      display: 'none'
-    },
-    '&::-webkit-search-cancel-button': {
-      WebkitAppearance: 'none'
-    }
+  font: 'inherit',
+  '&::-ms-clear': {
+    display: 'none'
+  },
+  '&::-webkit-search-cancel-button': {
+    WebkitAppearance: 'none'
   }
-};
-var select = {
+});
+
+var select = /*#__PURE__*/_extends({}, base, {
   display: 'block',
   appearance: 'none',
-  selectors: {
-    '&::-ms-expand': {
-      display: 'none'
-    }
+  font: 'inherit',
+  '&::-ms-expand': {
+    display: 'none'
   }
-};
-var textarea = {
+});
+
+var textarea = /*#__PURE__*/_extends({}, base, {
   display: 'block',
-  appearance: 'none'
-}; // Reset
+  appearance: 'none',
+  font: 'inherit'
+}); // Normalize
 // ---------------
 
-var reset = {
-  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,
-  a: a,
+
+var normalize = {
   base: base,
-  table: table,
+  a: 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: select,
   button: button,
   textarea: textarea,
   input: input
 };
+/**
+ * Type-safe helper to get normalization. If no normalization is found,
+ * returns the *base* normalization.
+ */
+
+var getNormalizedStyles = function getNormalizedStyles(val) {
+  return typeof val === 'string' && val in normalize ? normalize[val] // Typescript doesn't infer this correctly
+  : normalize.base;
+};
+
+var _excluded = ["disabled"];
 
-var isKnownElement = function isKnownElement(input) {
-  return input in reset;
+var isNil = function isNil(value) {
+  return value === null || value === undefined;
 };
 /**
- * Helper to conveniently get reset styles.
+ * Ensures that the `val` is an array. Will return an empty array if `val` is falsy.
  */
 
 
-var getNormalizedStyles = function getNormalizedStyles(input) {
-  /**
-   * If a React component is given, we don't apply any reset styles
-   * and return the base reset.
-   */
-  if (typeof input !== 'string') {
-    return reset.base;
-  }
-  /**
-   * Try to find the reset style for a HTML element. If the element
-   * is not included return empty styles.
-   */
+var ensureArray = function ensureArray(val) {
+  return isNil(val) ? [] : Array.isArray(val) ? val : [val];
+};
+/**
+ * Removes trailing dot from variant, if necessary. This is necessary to support
+ * `__default` styles. See https://github.com/system-ui/theme-ui/pull/951
+ */
 
+var ensureVariantDefault = function ensureVariantDefault(val) {
+  return val.replace(/\.$/, '');
+};
+/**
+ * Ensures that the `variant` is an array and supports the `__default` key.
+ */
 
-  return isKnownElement(input) ? reset[input] : {};
+var ensureArrayVariant = function ensureArrayVariant(variant) {
+  return ensureArray(variant).map(ensureVariantDefault);
 };
+/**
+ * Appends given `state` to a `variant`.
+ */
 
-var Context = /*#__PURE__*/createContext({});
-var useTheme = function useTheme() {
-  var theme = useContext(Context);
-  var css$1 = useCallback(function (style) {
-    return css(style)(theme);
-  }, [theme]);
-  return {
-    theme: theme,
-    css: css$1
-  };
+var appendVariantState = function appendVariantState(variant, state) {
+  return ensureVariantDefault(variant) + ".:" + state;
 };
-var ThemeProvider = function ThemeProvider(_ref) {
-  var theme = _ref.theme,
-      children = _ref.children;
-  return React.createElement(Context.Provider, {
-    value: theme
-  }, children);
+/**
+ * Create a variant array from a `variant` and `state` containing
+ * passed states, if they are truthy.
+ */
+
+var conditional = function conditional(variant, _ref) {
+  var _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      states = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var entries = [].concat(Object.entries(states), [['disabled', disabled]]);
+  var stateVariants = entries.filter(function (_ref2) {
+    var val = _ref2[1];
+    return Boolean(val);
+  }).map(function (_ref3) {
+    var key = _ref3[0];
+    return appendVariantState(variant, key);
+  });
+  return [variant].concat(stateVariants);
 };
 
-var _excluded = ["as", "css", "variant", "children"];
+var _excluded$1 = ["as", "children", "__baseCSS", "variant", "css", "display", "height", "width", "minWidth", "maxWidth", "position", "top", "bottom", "right", "left", "zIndex", "p", "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"];
 /**
- * Function expression to check if there is any falsy value or empty object
+ * Check if there is any falsy value or empty object
  */
 
 var isNotEmpty = function isNotEmpty(val) {
   return !(val && Object.keys(val).length === 0 && val.constructor === Object);
 };
-/**
- * Get the normalized base styles
- */
 
-
-var baseStyles = /*#__PURE__*/getNormalizedStyles('base');
-var Element = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _ref$as = _ref.as,
-      as = _ref$as === void 0 ? 'div' : _ref$as,
-      _ref$css = _ref.css,
-      styles = _ref$css === void 0 ? {} : _ref$css,
+var createThemedStyle = function createThemedStyle(_ref) {
+  var as = _ref.as,
+      __baseCSS = _ref.__baseCSS,
       variant = _ref.variant,
-      children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  var _useTheme = useTheme(),
-      css = _useTheme.css;
-  /**
-   * Transform variant input for `@theme-ui/css`
-   */
+      styles = _ref.styles,
+      css = _ref.css;
+  return function (theme) {
+    return [getNormalizedStyles(as), css$1(__baseCSS)(theme)].concat(ensureArrayVariant(variant).map(function (v) {
+      return css$1({
+        variant: v
+      })(theme);
+    }), [css$1(styles)(theme), css$1(css)(theme)]).filter(isNotEmpty);
+  };
+};
 
+var Box = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var _ref2$as = _ref2.as,
+      as = _ref2$as === void 0 ? 'div' : _ref2$as,
+      children = _ref2.children,
+      __baseCSS = _ref2.__baseCSS,
+      variant = _ref2.variant,
+      _ref2$css = _ref2.css,
+      css = _ref2$css === void 0 ? {} : _ref2$css,
+      display = _ref2.display,
+      height = _ref2.height,
+      width = _ref2.width,
+      minWidth = _ref2.minWidth,
+      maxWidth = _ref2.maxWidth,
+      position = _ref2.position,
+      top = _ref2.top,
+      bottom = _ref2.bottom,
+      right = _ref2.right,
+      left = _ref2.left,
+      zIndex = _ref2.zIndex,
+      p = _ref2.p,
+      px = _ref2.px,
+      py = _ref2.py,
+      pt = _ref2.pt,
+      pb = _ref2.pb,
+      pl = _ref2.pl,
+      pr = _ref2.pr,
+      m = _ref2.m,
+      mx = _ref2.mx,
+      my = _ref2.my,
+      mt = _ref2.mt,
+      mb = _ref2.mb,
+      ml = _ref2.ml,
+      mr = _ref2.mr,
+      flexDirection = _ref2.flexDirection,
+      flexWrap = _ref2.flexWrap,
+      flexShrink = _ref2.flexShrink,
+      flexGrow = _ref2.flexGrow,
+      alignItems = _ref2.alignItems,
+      justifyContent = _ref2.justifyContent,
+      bg = _ref2.bg,
+      border = _ref2.border,
+      borderRadius = _ref2.borderRadius,
+      boxShadow = _ref2.boxShadow,
+      opacity = _ref2.opacity,
+      overflow = _ref2.overflow,
+      transition = _ref2.transition,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
 
-  var variants = Array.isArray(variant) ? variant.map(function (v) {
-    return {
-      variant: v
-    };
-  }) : [{
-    variant: variant
-  }];
   return jsx(as, _extends({}, props, {
-    css: [baseStyles, getNormalizedStyles(as)].concat(variants.map(function (v) {
-      return css(v);
-    }), [css(styles)]).filter(isNotEmpty)
-  }, {
+    css: createThemedStyle({
+      as: as,
+      __baseCSS: __baseCSS,
+      variant: variant,
+      css: css,
+      styles: {
+        display: display,
+        height: height,
+        width: width,
+        minWidth: minWidth,
+        maxWidth: maxWidth,
+        position: position,
+        top: top,
+        bottom: bottom,
+        right: right,
+        left: left,
+        zIndex: zIndex,
+        p: p,
+        px: px,
+        py: py,
+        pt: pt,
+        pb: pb,
+        pl: pl,
+        pr: pr,
+        m: m,
+        mx: mx,
+        my: my,
+        mt: mt,
+        mb: mb,
+        ml: ml,
+        mr: mr,
+        flexDirection: flexDirection,
+        flexWrap: flexWrap,
+        flexShrink: flexShrink,
+        flexGrow: flexGrow,
+        alignItems: alignItems,
+        justifyContent: justifyContent,
+        bg: bg,
+        border: border,
+        borderRadius: borderRadius,
+        boxShadow: boxShadow,
+        opacity: opacity,
+        overflow: overflow,
+        transition: transition
+      }
+    }),
     ref: ref
   }), children);
 });
 
-// lodash.isEmpty is tooo much KBs!
-
-var isEmpty = function isEmpty(val) {
-  return val && Object.keys(val).length === 0 && val.constructor === Object;
-};
-
-var useClassname = function useClassname() {
-  var _useTheme = useTheme(),
-      css = _useTheme.css;
+/**
+ * @internal
+ */
 
-  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
-    styles[_key] = arguments[_key];
-  }
+var __defaultTheme = {};
+var InternalContext = /*#__PURE__*/createContext(__defaultTheme);
+var useTheme = function useTheme() {
+  var theme = useContext(InternalContext);
+  /**
+   * We cast the theme here to `any` since our subset is not
+   * compatible with the typings of `theme-ui`, since they
+   * also support arrays as scale values, while we don't.
+   */
 
-  return styles.map(function (style) {
-    /**
-     * emotion will create a `css-0` class whenever an empty object is
-     * passed. Since this makes debugging harder we'll do not pass empty
-     * objects to emotion.
-     */
-    var themedStyle = css(style);
-    return isEmpty(themedStyle) ? '' : css$1(themedStyle);
-  }).join(' ');
+  var css = useCallback(function (style) {
+    return css$1(style)(theme);
+  }, [theme]);
+  return {
+    theme: theme,
+    css: css
+  };
 };
+function ThemeProvider(_ref) {
+  var theme = _ref.theme,
+      children = _ref.children;
+  return React.createElement(ThemeProvider$1, {
+    theme: theme
+  }, React.createElement(InternalContext.Provider, {
+    value: theme
+  }, children));
+}
 
-var base$1 = /*#__PURE__*/css$1({
-  boxSizing: 'border-box',
-  margin: 0,
-  padding: 0,
-  minWidth: 0,
-  fontSize: '100%',
-  font: 'inherit',
-  verticalAlign: 'baseline',
-  WebkitTapHighlightColor: 'transparent'
-}); // Content
-// ---------------
-
-var block$1 = /*#__PURE__*/css$1({
-  display: 'block'
-});
-var list$1 = /*#__PURE__*/css$1({// empty
-});
-var table$1 = /*#__PURE__*/css$1({
-  borderCollapse: 'collapse',
-  borderSpacing: 0
-}); // Typography
-// ---------------
+/**
+ * CSS snippet and idea from:
+ * https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/
+ */
 
-var a$1 = /*#__PURE__*/css$1({
-  textDecoration: 'none',
-  touchAction: 'manipulation'
-});
-var quote$1 = /*#__PURE__*/css$1({
-  quotes: 'none',
-  selectors: {
-    '&:before, &:after': {
-      content: "''"
+var reduceMotionStyles = {
+  '@media screen and (prefers-reduced-motion: reduce), (update: slow)': {
+    '*': {
+      animationDuration: '0.001ms !important',
+      animationIterationCount: '1 !important',
+      transitionDuration: '0.001ms !important'
     }
   }
-}); // Form Elements
-// ---------------
+};
+var Global = function Global() {
+  var _useTheme = useTheme(),
+      css = _useTheme.css;
 
-var button$1 = /*#__PURE__*/css$1({
-  display: 'block',
-  appearance: 'none',
-  background: 'transparent',
-  textAlign: 'center',
-  touchAction: 'manipulation'
-});
-var input$1 = /*#__PURE__*/css$1({
-  display: 'block',
-  appearance: 'none',
-  selectors: {
-    '&::-ms-clear': {
-      display: 'none'
+  var styles = css({
+    html: {
+      height: '100%',
+      variant: 'root.html'
     },
-    '&::-webkit-search-cancel-button': {
-      WebkitAppearance: 'none'
+    body: {
+      height: '100%',
+      lineHeight: 1.5,
+      WebkitFontSmoothing: 'antialiased',
+      variant: 'root.body'
     }
-  }
-});
-var select$1 = /*#__PURE__*/css$1({
-  display: 'block',
-  appearance: 'none',
-  selectors: {
-    '&::-ms-expand': {
-      display: 'none'
-    }
-  }
-});
-var textarea$1 = /*#__PURE__*/css$1({
-  display: 'block',
-  appearance: 'none'
-}); // Reset
-// ---------------
-
-var reset$1 = {
-  article: block$1,
-  aside: block$1,
-  details: block$1,
-  figcaption: block$1,
-  figure: block$1,
-  footer: block$1,
-  header: block$1,
-  hgroup: block$1,
-  menu: block$1,
-  nav: block$1,
-  section: block$1,
-  ul: list$1,
-  ol: list$1,
-  blockquote: quote$1,
-  q: quote$1,
-  a: a$1,
-  base: base$1,
-  table: table$1,
-  select: select$1,
-  button: button$1,
-  textarea: textarea$1,
-  input: input$1
+  });
+  return React.createElement(Global$1, {
+    styles: _extends({
+      reduceMotionStyles: reduceMotionStyles
+    }, styles)
+  });
 };
 
-/**
- * Hook that can adds base styles, reset for certain elements, variants and custom styles
- */
-
-var useStyles = function useStyles(_ref) {
-  var element = _ref.element,
-      _ref$css = _ref.css,
-      styles = _ref$css === void 0 ? {} : _ref$css,
-      variant = _ref.variant,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className;
-
-  /**
-   * Get reset styles. Base is always applied. An additional reset maybe applied
-   * based on the passed element.
-   *
-   * We check the passed className if it already includes the reset styles so no
-   * duplicates are applied.
-   */
-  var baseClassName = className.includes(reset$1.base) ? '' : reset$1.base;
-  var resetClassName = typeof element === 'string' ? className.includes(reset$1[element]) ? '' : reset$1[element] : '';
-  /**
-   * Get variant styles (from theme).
-   */
-
-  var variants = Array.isArray(variant) ? variant.map(function (v) {
-    return {
-      variant: v
-    };
-  }) : [{
-    variant: variant
-  }];
-  var variantsClassName = useClassname.apply(void 0, variants);
-  /**
-   * Custom styles are applied "on runtime". They are usually controlled via component
-   * props and can change between component instances.
-   */
-
-  var customClassName = useClassname(styles);
-  return [baseClassName, resetClassName, variantsClassName, customClassName, className].filter(Boolean).join(' ');
+var _excluded$2 = ["size", "children"];
+var css = /*#__PURE__*/getNormalizedStyles$1('svg');
+var SVG = function SVG(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+
+  return jsx('svg', _extends({
+    width: size,
+    height: size,
+    viewBox: '0 0 24 24',
+    fill: 'currentcolor'
+  }, props, {
+    css: css
+  }), children);
 };
 
-export { Element, ThemeProvider, useClassname, useStyles, useTheme };
+export { Box, Global, SVG, ThemeProvider, __defaultTheme, appendVariantState, conditional, ensureArray, ensureArrayVariant, ensureVariantDefault, getNormalizedStyles, normalize, useTheme };
 //# sourceMappingURL=system.esm.js.map