@marigold/system 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,95 @@
+# @marigold/system
+
+## 0.3.0
+### Minor Changes
+
+
+
+- [#1163](https://github.com/marigold-ui/marigold/pull/1163) [`51af6693`](https://github.com/marigold-ui/marigold/commit/51af669330fd52e4e31fe5ad71d2b202ab8d2231) Thanks [@sebald](https://github.com/sebald)! - feat(system): Expose helper to transpile style object
+
+
+### Patch Changes
+
+
+
+- [#1549](https://github.com/marigold-ui/marigold/pull/1549) [`c030aa85`](https://github.com/marigold-ui/marigold/commit/c030aa85156356c294bafe9831024f6b6f2ce4db) Thanks [@sebald](https://github.com/sebald)! - refa: use emotion's theme function in <Element>
+
+
+
+- [#1515](https://github.com/marigold-ui/marigold/pull/1515) [`8eda245f`](https://github.com/marigold-ui/marigold/commit/8eda245f01a918fcdaa9f0ac211889ed869aa375) Thanks [@sebald](https://github.com/sebald)! - feat: add normalization for body and html & fix emotion leak
+
+
+
+- [#1491](https://github.com/marigold-ui/marigold/pull/1491) [`5a04de11`](https://github.com/marigold-ui/marigold/commit/5a04de110637d004f5824679697ee4d6a90eaf34) Thanks [@ti10le](https://github.com/ti10le)! - remove useStyles from Element
+
+
+
+- [#1440](https://github.com/marigold-ui/marigold/pull/1440) [`c1da52c0`](https://github.com/marigold-ui/marigold/commit/c1da52c0f035b141608fd606e6ba3bc2b5482dc1) Thanks [@ti10le](https://github.com/ti10le)! - feature: use Element in Box + necessary fix changes
+
+
+
+- [#1591](https://github.com/marigold-ui/marigold/pull/1591) [`1448ddca`](https://github.com/marigold-ui/marigold/commit/1448ddcaa0f647f48b018fa74a8686af30eccc53) Thanks [@sebald](https://github.com/sebald)! - feat(jest): Improve snapshot readability
+
+
+
+- [#1514](https://github.com/marigold-ui/marigold/pull/1514) [`5107b943`](https://github.com/marigold-ui/marigold/commit/5107b943cb3085eb3137d84e79966acad6173a26) Thanks [@sebald](https://github.com/sebald)! - feat(system): Use emotion's context
+
+
+
+- [#1647](https://github.com/marigold-ui/marigold/pull/1647) [`cd3a0d3e`](https://github.com/marigold-ui/marigold/commit/cd3a0d3edb3f2ddc1f561e8007e1c20000f7855a) Thanks [@ti10le](https://github.com/ti10le)! - feat: conditional function to allow state props in variants
+
+
+
+- [#1230](https://github.com/marigold-ui/marigold/pull/1230) [`ebd6e26f`](https://github.com/marigold-ui/marigold/commit/ebd6e26f71f675b98b663bc45c6a2d5badddcd47) Thanks [@viktoria-schwarz](https://github.com/viktoria-schwarz)! - feat: add GlobalStyles via theme
+
+
+
+- [#1563](https://github.com/marigold-ui/marigold/pull/1563) [`6e485f5a`](https://github.com/marigold-ui/marigold/commit/6e485f5a8800094fe54c075a2b21f8abe726b3cd) Thanks [@sebald](https://github.com/sebald)! - feat: Introduce a `Theme` with all available scales
+
+
+
+- [#1620](https://github.com/marigold-ui/marigold/pull/1620) [`80a2abe5`](https://github.com/marigold-ui/marigold/commit/80a2abe5804ba2c5a48cc6b05211245c37baf266) Thanks [@ti10le](https://github.com/ti10le)! - feat(comp): extend Box to handle __default variants
+
+
+
+- [#1579](https://github.com/marigold-ui/marigold/pull/1579) [`e13e3cc1`](https://github.com/marigold-ui/marigold/commit/e13e3cc1fc66b261209973b1fc90eb48117076e9) Thanks [@ti10le](https://github.com/ti10le)! - feat: remove Heading from marigold
+
+
+
+- [#1622](https://github.com/marigold-ui/marigold/pull/1622) [`1829cf17`](https://github.com/marigold-ui/marigold/commit/1829cf17e16c574e5577b3e1709c34dc7ed4faaf) Thanks [@ti10le](https://github.com/ti10le)! - feat(comp): change Card default variant
+
+
+
+- [#1501](https://github.com/marigold-ui/marigold/pull/1501) [`1c1f8648`](https://github.com/marigold-ui/marigold/commit/1c1f864820a060214406ef711f4ed873746c16c4) Thanks [@ti10le](https://github.com/ti10le)! - feat(storybook): remove use styles stories
+
+
+
+- [#1190](https://github.com/marigold-ui/marigold/pull/1190) [`a00b7eb9`](https://github.com/marigold-ui/marigold/commit/a00b7eb971131634414d3912d059fb505bb7a370) Thanks [@sebald](https://github.com/sebald)! - fix(system): List reset should not remove the enumeration
+
+
+
+- [#1499](https://github.com/marigold-ui/marigold/pull/1499) [`ec5baf85`](https://github.com/marigold-ui/marigold/commit/ec5baf85a9a0f82a4fca5bbd1e1680316c186593) Thanks [@sebald](https://github.com/sebald)! - feat: Update and simplify normalization
+
+
+
+- [#1652](https://github.com/marigold-ui/marigold/pull/1652) [`0bb8f19e`](https://github.com/marigold-ui/marigold/commit/0bb8f19ebdec0e2f9dc3f6164f4373cac5c10880) Thanks [@sebald](https://github.com/sebald)! - refa(system): Groupt variant related fns in own file
+
+
+
+- [#1436](https://github.com/marigold-ui/marigold/pull/1436) [`c4ae5c5c`](https://github.com/marigold-ui/marigold/commit/c4ae5c5ca442f93034ff8f4c70adc295547951d4) Thanks [@ti10le](https://github.com/ti10le)! - create Element component + normalize file
+
+
+
+- [#1508](https://github.com/marigold-ui/marigold/pull/1508) [`a1ef2108`](https://github.com/marigold-ui/marigold/commit/a1ef2108dd6c8e6838b517dd58c82d38e71dae2b) Thanks [@sebald](https://github.com/sebald)! - feat: Add default styling to `<Element>`
+
+
+
+- [#1621](https://github.com/marigold-ui/marigold/pull/1621) [`2f7b936f`](https://github.com/marigold-ui/marigold/commit/2f7b936f5b07eade00a51cb138c3c492f1e08c9d) Thanks [@ti10le](https://github.com/ti10le)! - feat(comp): change Badge default variant
+
+
+
+- [#1550](https://github.com/marigold-ui/marigold/pull/1550) [`846eb640`](https://github.com/marigold-ui/marigold/commit/846eb640ad035c7f3410b4a8a451f8de56e62339) Thanks [@sebald](https://github.com/sebald)! - feat: Merge <Box> and <Element>
+
+
+
+- [#1614](https://github.com/marigold-ui/marigold/pull/1614) [`5d63cd9c`](https://github.com/marigold-ui/marigold/commit/5d63cd9c14578787083c82c85d93bbd2ff0efac6) Thanks [@ti10le](https://github.com/ti10le)! - remove all purple color things

package/dist/Box.d.ts

@@ -0,0 +1,14 @@
+import { PolymorphicPropsWithRef, PolymorphicComponentWithRef } from '@marigold/types';
+import { CSSObject } from './types';
+export declare type StyleProps = Pick<CSSObject, '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'>;
+export declare type BoxOwnProps = {
+    css?: CSSObject;
+    variant?: string | string[];
+    /**
+     * Use to set base styles for the component
+     * @internal Used to set default styles for Marigold components
+     */
+    __baseCSS?: CSSObject;
+} & StyleProps;
+export declare type BoxProps = PolymorphicPropsWithRef<BoxOwnProps, 'div'>;
+export declare const Box: PolymorphicComponentWithRef<BoxOwnProps, 'div'>;

package/dist/Global.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Global: () => JSX.Element;

package/dist/SVG.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ComponentProps } from '@marigold/types';
+export declare type SVGProps = {
+    size?: number;
+} & ComponentProps<'svg'>;
+export declare const SVG: React.FC<SVGProps>;

package/dist/index.d.ts

@@ -1,6 +1,8 @@
-export * from './Element';
-export * from './cache';
+export * from './Box';
+export * from './Global';
+export * from './normalize';
+export * from './SVG';
+export * from './theme';
 export * from './types';
-export * from './useClassname';
-export * from './useStyles';
 export * from './useTheme';
+export * from './variant';

package/dist/normalize.d.ts

@@ -1,110 +1,144 @@
 /// <reference types="react" />
-declare const reset: {
-    readonly article: {
-        readonly display: "block";
+export declare const normalize: {
+    readonly base: {
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
     };
-    readonly aside: {
-        readonly display: "block";
+    readonly a: {
+        readonly textDecoration: "none";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
     };
-    readonly details: {
-        readonly display: "block";
+    readonly p: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
     };
-    readonly figcaption: {
-        readonly display: "block";
+    readonly h1: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
     };
-    readonly figure: {
-        readonly display: "block";
+    readonly h2: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
     };
-    readonly footer: {
-        readonly display: "block";
+    readonly h3: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
     };
-    readonly header: {
-        readonly display: "block";
+    readonly h4: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
     };
-    readonly hgroup: {
-        readonly display: "block";
+    readonly h5: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
     };
-    readonly menu: {
-        readonly display: "block";
+    readonly h6: {
+        readonly overflowWrap: "break-word";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
     };
-    readonly nav: {
+    readonly img: {
         readonly display: "block";
+        readonly maxWidth: "100%";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
     };
-    readonly section: {
+    readonly picture: {
         readonly display: "block";
+        readonly maxWidth: "100%";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
     };
-    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 video: {
+        readonly display: "block";
+        readonly maxWidth: "100%";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
     };
-    readonly base: {
+    readonly canvas: {
+        readonly display: "block";
+        readonly maxWidth: "100%";
         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 svg: {
+        readonly display: "block";
+        readonly maxWidth: "100%";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
     };
     readonly select: {
         readonly display: "block";
         readonly appearance: "none";
-        readonly selectors: {
-            readonly '&::-ms-expand': {
-                readonly display: "none";
-            };
+        readonly font: "inherit";
+        readonly '&::-ms-expand': {
+            readonly display: "none";
         };
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
     };
     readonly button: {
         readonly display: "block";
         readonly appearance: "none";
+        readonly font: "inherit";
         readonly background: "transparent";
         readonly textAlign: "center";
-        readonly touchAction: "manipulation";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
     };
     readonly textarea: {
         readonly display: "block";
         readonly appearance: "none";
+        readonly font: "inherit";
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
     };
     readonly input: {
         readonly display: "block";
         readonly appearance: "none";
-        readonly selectors: {
-            readonly '&::-ms-clear': {
-                readonly display: "none";
-            };
-            readonly '&::-webkit-search-cancel-button': {
-                readonly WebkitAppearance: "none";
-            };
+        readonly font: "inherit";
+        readonly '&::-ms-clear': {
+            readonly display: "none";
+        };
+        readonly '&::-webkit-search-cancel-button': {
+            readonly WebkitAppearance: "none";
         };
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly minWidth: 0;
     };
 };
-export declare type NormalizedElement = keyof typeof reset;
+export declare type NormalizedElement = keyof typeof normalize;
 /**
- * Helper to conveniently get reset styles.
+ * Type-safe helper to get normalization. If no normalization is found,
+ * returns the *base* normalization.
  */
-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 {};
+export declare const getNormalizedStyles: (val?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "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) => {
+    readonly boxSizing: "border-box";
+    readonly margin: 0;
+    readonly minWidth: 0;
+};