@marigold/system 0.0.1 → 0.2.0

package/dist/Element.d.ts

@@ -0,0 +1,8 @@
+import { PolymorphicPropsWithRef, PolymorphicComponentWithRef } from '@marigold/types';
+import { CSSObject } from './types';
+export declare type ElementOwnProps = {
+    css?: CSSObject;
+    variant?: string | string[];
+};
+export declare type ElementProps = PolymorphicPropsWithRef<ElementOwnProps, 'div'>;
+export declare const Element: PolymorphicComponentWithRef<ElementOwnProps, 'div'>;

package/dist/cache.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Expose cache from emotion so we can use the same cache when doing SSR.
+ */
+export { cache } from '@emotion/css';

package/dist/index.d.ts

@@ -1,4 +1,6 @@
-export * from './Box';
-export * from './categories';
-export * from './MarigoldProvider';
-export * from './system';
+export * from './Element';
+export * from './cache';
+export * from './types';
+export * from './useClassname';
+export * from './useStyles';
+export * from './useTheme';

package/dist/normalize.d.ts

@@ -0,0 +1,110 @@
+/// <reference types="react" />
+declare const reset: {
+    readonly article: {
+        readonly display: "block";
+    };
+    readonly aside: {
+        readonly display: "block";
+    };
+    readonly details: {
+        readonly display: "block";
+    };
+    readonly figcaption: {
+        readonly display: "block";
+    };
+    readonly figure: {
+        readonly display: "block";
+    };
+    readonly footer: {
+        readonly display: "block";
+    };
+    readonly header: {
+        readonly display: "block";
+    };
+    readonly hgroup: {
+        readonly display: "block";
+    };
+    readonly menu: {
+        readonly display: "block";
+    };
+    readonly nav: {
+        readonly display: "block";
+    };
+    readonly section: {
+        readonly display: "block";
+    };
+    readonly ul: {};
+    readonly ol: {};
+    readonly blockquote: {
+        readonly quotes: "none";
+        readonly selectors: {
+            readonly '&:before, &:after': {
+                readonly content: "''";
+            };
+        };
+    };
+    readonly q: {
+        readonly quotes: "none";
+        readonly selectors: {
+            readonly '&:before, &:after': {
+                readonly content: "''";
+            };
+        };
+    };
+    readonly a: {
+        readonly textDecoration: "none";
+        readonly touchAction: "manipulation";
+    };
+    readonly base: {
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly padding: 0;
+        readonly minWidth: 0;
+        readonly fontSize: "100%";
+        readonly fontFamily: "inherit";
+        readonly verticalAlign: "baseline";
+        readonly WebkitTapHighlightColor: "transparent";
+    };
+    readonly table: {
+        readonly borderCollapse: "collapse";
+        readonly borderSpacing: 0;
+    };
+    readonly select: {
+        readonly display: "block";
+        readonly appearance: "none";
+        readonly selectors: {
+            readonly '&::-ms-expand': {
+                readonly display: "none";
+            };
+        };
+    };
+    readonly button: {
+        readonly display: "block";
+        readonly appearance: "none";
+        readonly background: "transparent";
+        readonly textAlign: "center";
+        readonly touchAction: "manipulation";
+    };
+    readonly textarea: {
+        readonly display: "block";
+        readonly appearance: "none";
+    };
+    readonly input: {
+        readonly display: "block";
+        readonly appearance: "none";
+        readonly selectors: {
+            readonly '&::-ms-clear': {
+                readonly display: "none";
+            };
+            readonly '&::-webkit-search-cancel-button': {
+                readonly WebkitAppearance: "none";
+            };
+        };
+    };
+};
+export declare type NormalizedElement = keyof typeof reset;
+/**
+ * Helper to conveniently get reset styles.
+ */
+export declare const getNormalizedStyles: (input?: "symbol" | "object" | "article" | "aside" | "details" | "figcaption" | "figure" | "footer" | "header" | "hgroup" | "menu" | "nav" | "section" | "ul" | "ol" | "blockquote" | "q" | "a" | "base" | "table" | "select" | "button" | "textarea" | "input" | "abbr" | "address" | "area" | "audio" | "b" | "bdi" | "bdo" | "big" | "body" | "br" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "hr" | "html" | "i" | "iframe" | "img" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menuitem" | "meta" | "meter" | "noindex" | "noscript" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "template" | "tbody" | "td" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined) => object;
+export {};

package/dist/reset.d.ts

@@ -0,0 +1,24 @@
+export declare const reset: {
+    readonly article: string;
+    readonly aside: string;
+    readonly details: string;
+    readonly figcaption: string;
+    readonly figure: string;
+    readonly footer: string;
+    readonly header: string;
+    readonly hgroup: string;
+    readonly menu: string;
+    readonly nav: string;
+    readonly section: string;
+    readonly ul: string;
+    readonly ol: string;
+    readonly blockquote: string;
+    readonly q: string;
+    readonly a: string;
+    readonly base: string;
+    readonly table: string;
+    readonly select: string;
+    readonly button: string;
+    readonly textarea: string;
+    readonly input: string;
+};

package/dist/system.cjs.development.js

@@ -2,11 +2,11 @@
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var css = require('@theme-ui/css');
-var pick = _interopDefault(require('lodash.pick'));
-var core = require('@emotion/core');
+var react = require('@emotion/react');
 var React = require('react');
 var React__default = _interopDefault(React);
+var css = require('@theme-ui/css');
+var css$1 = require('@emotion/css');
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -41,127 +41,364 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-/**
- * System categories are based on https://primer.style/components/docs/system-props
- */
-// Spacing
+var base = {
+  boxSizing: 'border-box',
+  margin: 0,
+  padding: 0,
+  minWidth: 0,
+  fontSize: '100%',
+  fontFamily: 'inherit',
+  verticalAlign: 'baseline',
+  WebkitTapHighlightColor: 'transparent'
+}; // Content
 // ---------------
-var SPACE_PROPS = ['m', 'margin', 'mt', 'marginTop', 'mr', 'marginRight', 'mb', 'marginBottom', 'ml', 'marginLeft', 'mx', 'marginX', 'my', 'marginY', 'p', 'padding', 'pt', 'paddingTop', 'pr', 'paddingRight', 'pb', 'paddingBottom', 'pl', 'paddingLeft', 'px', 'paddingX', 'py', 'paddingY'];
 
-/**
- * Fix until the global JSX augmentation is not included in
- * `@emotion/core`. See https://github.com/emotion-js/emotion/issues/1257
- * for more information.
- *
- * *Why is this a problem?*
- *
- * (1) Every JSX element accepts a `css` prop, but we don't parse that.
- * (2) Every JSX element only accepts a type that is compatible with emotion's
- *     css prop, which we don't care, since we first pass the `css` prop
- *     to styled-system.
- *
- * *The fix consist of two parts:*
- *
- * (1) using `.yarnclean` to remove the `emotion/core` typings completly.
- * (2) having this sink file to re-apply the typings and tell TS to ignore
- *     the untyped import.
- */
+var block = {
+  display: 'block'
+};
+var list = {// empty
+};
+var table = {
+  borderCollapse: 'collapse',
+  borderSpacing: 0
+}; // Typography
 // ---------------
 
-var jsx = core.jsx;
-var ThemeContext = core.ThemeContext;
-var Global = core.Global;
-
-/**
- * Helper to write components that adhere to a common design system API,
- * which includes the `as` and `variant` prop.
- */
+var a = {
+  textDecoration: 'none',
+  touchAction: 'manipulation'
+};
+var quote = {
+  quotes: 'none',
+  selectors: {
+    '&:before, &:after': {
+      content: "''"
+    }
+  }
+}; // Form Elements
+// ---------------
 
-function system(render) {
-  return React.forwardRef(function (props, ref) {
-    return render(_extends({}, props, {
-      ref: ref
-    }));
-  });
-}
+var button = {
+  display: 'block',
+  appearance: 'none',
+  background: 'transparent',
+  textAlign: 'center',
+  touchAction: 'manipulation'
+};
+var input = {
+  display: 'block',
+  appearance: 'none',
+  selectors: {
+    '&::-ms-clear': {
+      display: 'none'
+    },
+    '&::-webkit-search-cancel-button': {
+      WebkitAppearance: 'none'
+    }
+  }
+};
+var select = {
+  display: 'block',
+  appearance: 'none',
+  selectors: {
+    '&::-ms-expand': {
+      display: 'none'
+    }
+  }
+};
+var textarea = {
+  display: 'block',
+  appearance: 'none'
+}; // Reset
+// ---------------
 
-/**
- * Props that we have to remove (because they are not valid HTML attributes)
- * and want to process (for styling the component).
- */
+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,
+  base: base,
+  table: table,
+  select: select,
+  button: button,
+  textarea: textarea,
+  input: input
+};
 
-var SKIP_PROPS = /*#__PURE__*/['css', 'variant', 'themeSection'].concat(SPACE_PROPS);
+var isKnownElement = function isKnownElement(input) {
+  return input in reset;
+};
 /**
- * Gather styling related props (css, variant, space props, ...) and put them in a
- * single `css` prop for emotion. All gathered props will be passed to `@theme-ui/css`
- * before emotion will process them. This way CSS properties will interpolated based on
- * the given theme.
+ * Helper to conveniently get reset styles.
  */
 
-var parseProps = function parseProps(props) {
-  var next = {}; // TODO: optimize loop such that the style props are picked
-  //       within the loop (and remove lodash.pick!)
 
-  for (var key in props) {
-    if (SKIP_PROPS.includes(key)) continue;
-    next[key] = props[key];
+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 styles = _extends({}, props.css, {}, pick(props, SPACE_PROPS));
 
-  var variant = props.themeSection && props.variant && props.themeSection + "." + props.variant;
+  return isKnownElement(input) ? reset[input] : {};
+};
 
-  next.css = function (theme) {
-    return [{
-      boxSizing: 'border-box',
-      margin: 0,
-      minWidth: 0
-    }, css.css(styles)(theme), css.css({
-      variant: variant
-    })(theme)];
+var Context = /*#__PURE__*/React.createContext({});
+var useTheme = function useTheme() {
+  var theme = React.useContext(Context);
+  var css$1 = React.useCallback(function (style) {
+    return css.css(style)(theme);
+  }, [theme]);
+  return {
+    theme: theme,
+    css: css$1
   };
+};
+var ThemeProvider = function ThemeProvider(_ref) {
+  var theme = _ref.theme,
+      children = _ref.children;
+  return React__default.createElement(Context.Provider, {
+    value: theme
+  }, children);
+};
+
+var _excluded = ["as", "css", "variant", "children"];
+/**
+ * Function expression to check if there is any falsy value or empty object
+ */
 
-  return next;
+var isNotEmpty = function isNotEmpty(val) {
+  return !(val && Object.keys(val).length === 0 && val.constructor === Object);
 };
+/**
+ * Get the normalized base styles
+ */
+
 
-var Box = /*#__PURE__*/system(function (_ref) {
+var baseStyles = /*#__PURE__*/getNormalizedStyles('base');
+var Element = /*#__PURE__*/React.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,
+      variant = _ref.variant,
       children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["as", "children"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var _useTheme = useTheme(),
+      css = _useTheme.css;
+  /**
+   * Transform variant input for `@theme-ui/css`
+   */
+
 
-  return jsx(as, parseProps(props), children);
+  var variants = Array.isArray(variant) ? variant.map(function (v) {
+    return {
+      variant: v
+    };
+  }) : [{
+    variant: variant
+  }];
+  return react.jsx(as, _extends({}, props, {
+    css: [baseStyles, getNormalizedStyles(as)].concat(variants.map(function (v) {
+      return css(v);
+    }), [css(styles)]).filter(isNotEmpty)
+  }, {
+    ref: ref
+  }), children);
 });
 
-/**
- * CSS snippet and idea from:
- * https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/
- */
+// lodash.isEmpty is tooo much KBs!
 
-var ReduceMotion = function ReduceMotion() {
-  return React__default.createElement(Global, {
-    styles: {
-      '@media screen and (prefers-reduced-motion: reduce), (update: slow)': {
-        '*': {
-          animationDuration: '0.001ms !important',
-          animationIterationCount: '1 !important',
-          transitionDuration: '0.001ms !important'
-        }
-      }
+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;
+
+  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
+    styles[_key] = arguments[_key];
+  }
+
+  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.css(themedStyle);
+  }).join(' ');
+};
+
+var base$1 = /*#__PURE__*/css$1.css({
+  boxSizing: 'border-box',
+  margin: 0,
+  padding: 0,
+  minWidth: 0,
+  fontSize: '100%',
+  font: 'inherit',
+  verticalAlign: 'baseline',
+  WebkitTapHighlightColor: 'transparent'
+}); // Content
+// ---------------
+
+var block$1 = /*#__PURE__*/css$1.css({
+  display: 'block'
+});
+var list$1 = /*#__PURE__*/css$1.css({// empty
+});
+var table$1 = /*#__PURE__*/css$1.css({
+  borderCollapse: 'collapse',
+  borderSpacing: 0
+}); // Typography
+// ---------------
+
+var a$1 = /*#__PURE__*/css$1.css({
+  textDecoration: 'none',
+  touchAction: 'manipulation'
+});
+var quote$1 = /*#__PURE__*/css$1.css({
+  quotes: 'none',
+  selectors: {
+    '&:before, &:after': {
+      content: "''"
     }
-  });
+  }
+}); // Form Elements
+// ---------------
+
+var button$1 = /*#__PURE__*/css$1.css({
+  display: 'block',
+  appearance: 'none',
+  background: 'transparent',
+  textAlign: 'center',
+  touchAction: 'manipulation'
+});
+var input$1 = /*#__PURE__*/css$1.css({
+  display: 'block',
+  appearance: 'none',
+  selectors: {
+    '&::-ms-clear': {
+      display: 'none'
+    },
+    '&::-webkit-search-cancel-button': {
+      WebkitAppearance: 'none'
+    }
+  }
+});
+var select$1 = /*#__PURE__*/css$1.css({
+  display: 'block',
+  appearance: 'none',
+  selectors: {
+    '&::-ms-expand': {
+      display: 'none'
+    }
+  }
+});
+var textarea$1 = /*#__PURE__*/css$1.css({
+  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
 };
 
-var MarigoldProvider = function MarigoldProvider(_ref) {
-  var theme = _ref.theme,
-      children = _ref.children;
-  return React__default.createElement(ThemeContext.Provider, {
-    value: theme
-  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(ReduceMotion, null), children));
+/**
+ * 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(' ');
 };
 
-exports.Box = Box;
-exports.MarigoldProvider = MarigoldProvider;
-exports.SPACE_PROPS = SPACE_PROPS;
-exports.system = system;
+Object.defineProperty(exports, 'cache', {
+  enumerable: true,
+  get: function () {
+    return css$1.cache;
+  }
+});
+exports.Element = Element;
+exports.ThemeProvider = ThemeProvider;
+exports.useClassname = useClassname;
+exports.useStyles = useStyles;
+exports.useTheme = useTheme;
 //# sourceMappingURL=system.cjs.development.js.map