@marigold/system 0.5.1 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @marigold/system
 
+## 0.6.0
+
+### Minor Changes
+
+- [#1817](https://github.com/marigold-ui/marigold/pull/1817) [`4cc0ad3b`](https://github.com/marigold-ui/marigold/commit/4cc0ad3b85b993e01b4d85b6f30b1a81cdee2351) Thanks [@sebald](https://github.com/sebald)! - feat(system): Add textSizeAdjust to globals
+
+* [#1842](https://github.com/marigold-ui/marigold/pull/1842) [`e053b7b9`](https://github.com/marigold-ui/marigold/commit/e053b7b903f02c56cf10e6b9aecbedd29399895d) Thanks [@ti10le](https://github.com/ti10le)! - feat: extend svg fill prop to handle theme color
+
+### Patch Changes
+
+- [#1809](https://github.com/marigold-ui/marigold/pull/1809) [`539d4198`](https://github.com/marigold-ui/marigold/commit/539d41987118db125ee37a4a83231335ea15830a) Thanks [@sebald](https://github.com/sebald)! - feat(create-theme): Introduce helper package to create themes with sensible defaults
+
 ## 0.5.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -210,13 +210,21 @@ declare type ScaleValue<T> = T | T[] | NestedScaleDict<T> | undefined;
  * descriptive name for the scale (e.g. `small`/`medium`/.. or `body`/`heading`/...),
  * and the value is the CSS value.
  */
-declare type Scale<T> = {
+interface Scale<T> {
     [key: string]: ScaleValue<T>;
-};
+}
+/**
+ * A {@link Scale} that also includes a required `none` value, which is
+ * usually used to define the blank value (e.g `0`).
+ */
+interface ZeroScale<T> extends Scale<T> {
+    none: ScaleValue<T>;
+}
 /**
  * Predefined {@link Scale} scale which uses size values.
  */
-declare type SizeScale<T> = {
+interface SizeScale<T> {
+    regular?: ScaleValue<T>;
     xxsmall?: ScaleValue<T>;
     xsmall?: ScaleValue<T>;
     small?: ScaleValue<T>;
@@ -224,14 +232,17 @@ declare type SizeScale<T> = {
     large?: ScaleValue<T>;
     xlarge?: ScaleValue<T>;
     xxlarge?: ScaleValue<T>;
-};
+    xxxlarge?: ScaleValue<T>;
+    huge?: ScaleValue<T>;
+    epic?: ScaleValue<T>;
+}
 /**
  * A {@link SizeScale} that also includes a required `none` value, which is
  * usually used to define the blank value (e.g `0`).
  */
-declare type ZeroScale<T> = {
+interface ZeroSizeScale<T> extends SizeScale<T> {
     none: ScaleValue<T>;
-} & Scale<T>;
+}
 /**
  * Base theme with typings for available scales properties.
  */
@@ -248,7 +259,7 @@ interface Theme {
      * ```ts
      * {
      *   breakpoints: [
-     *     '40em', '@media (min-width: 56em) and (orientation: landscape)', '64em',
+     *     '40em', '50em', '64em',
      *   ],
      * }
      * ```
@@ -259,7 +270,7 @@ interface Theme {
      * Used to define a scale for whitspace values,
      * like `padding`, `margin`, `gap`, etc.
      */
-    space?: ZeroScale<CSS.Property.Margin<number | string>>;
+    space?: ZeroSizeScale<CSS.Property.Margin<number | string>>;
     /**
      * Used to define a `font-size` scale.
      */
@@ -279,12 +290,12 @@ interface Theme {
     /**
      * Used to define a `letter-spacing` scale.
      */
-    letterSpacings?: ZeroScale<CSS.Property.LetterSpacing<string | 0 | number>>;
+    letterSpacings?: Scale<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<{}>>;
+    sizes?: ZeroSizeScale<CSS.Property.Height<{}> | CSS.Property.Width<{}>>;
     /**
      * Used to define different `border` styles.
      */
@@ -316,7 +327,7 @@ interface Theme {
     /**
      * Used to define a `transition` styles.
      */
-    transitions?: ZeroScale<CSS.Property.Transition>;
+    transitions?: Scale<CSS.Property.Transition>;
 }
 
 /**
@@ -370,4 +381,4 @@ declare const appendVariantState: (variant: string, state: keyof State) => strin
  */
 declare const conditional: (variant: string, { disabled, ...states }: State) => string[];
 
-export { Box, BoxOwnProps, BoxProps, CSSObject, CSSProperties, Global, NormalizedElement, ResponsiveStyleValue, SVG, SVGProps, Scale, ScaleValue, SizeScale, State, StyleObject, StyleProps, Theme, ThemeProvider, ThemeProviderProps, ZeroScale, __defaultTheme, appendVariantState, conditional, ensureArray, ensureArrayVariant, ensureVariantDefault, getNormalizedStyles, normalize, useResponsiveValue, useTheme };
+export { Box, BoxOwnProps, BoxProps, CSSObject, CSSProperties, Global, NormalizedElement, ResponsiveStyleValue, SVG, SVGProps, Scale, ScaleValue, SizeScale, State, StyleObject, StyleProps, Theme, ThemeProvider, ThemeProviderProps, ZeroScale, ZeroSizeScale, __defaultTheme, appendVariantState, conditional, ensureArray, ensureArrayVariant, ensureVariantDefault, getNormalizedStyles, normalize, useResponsiveValue, useTheme };

package/dist/index.js

@@ -165,13 +165,13 @@ var conditional = (variant, _a) => {
 
 // src/Box.tsx
 var isNotEmpty = (val) => !(val && Object.keys(val).length === 0 && val.constructor === Object);
-var createThemedStyle = ({ as, __baseCSS, variant, styles, css: css2 }) => (theme) => {
+var createThemedStyle = ({ as, __baseCSS, variant, styles, css }) => (theme) => {
   return [
     getNormalizedStyles(as),
     (0, import_css.css)(__baseCSS)(theme),
     ...ensureArrayVariant(variant).map((v) => (0, import_css.css)({ variant: v })(theme)),
     (0, import_css.css)(styles)(theme),
-    (0, import_css.css)(css2)(theme)
+    (0, import_css.css)(css)(theme)
   ].filter(isNotEmpty);
 };
 var Box = (0, import_react2.forwardRef)((_a, ref) => {
@@ -180,7 +180,7 @@ var Box = (0, import_react2.forwardRef)((_a, ref) => {
     children,
     __baseCSS,
     variant,
-    css: css2 = {},
+    css = {},
     display,
     height,
     width,
@@ -269,7 +269,7 @@ var Box = (0, import_react2.forwardRef)((_a, ref) => {
       as,
       __baseCSS,
       variant,
-      css: css2,
+      css,
       styles: {
         display,
         height,
@@ -327,8 +327,8 @@ var __defaultTheme = {};
 var InternalContext = (0, import_react3.createContext)(__defaultTheme);
 var useTheme = () => {
   const theme = (0, import_react3.useContext)(InternalContext);
-  const css2 = (0, import_react3.useCallback)((style) => (0, import_css2.css)(style)(theme), [theme]);
-  return { theme, css: css2 };
+  const css = (0, import_react3.useCallback)((style) => (0, import_css2.css)(style)(theme), [theme]);
+  return { theme, css };
 };
 function ThemeProvider({
   theme,
@@ -352,10 +352,11 @@ var reduceMotionStyles = {
   }
 };
 var Global = () => {
-  const { css: css2 } = useTheme();
-  const styles = css2({
+  const { css } = useTheme();
+  const styles = css({
     html: {
       height: "100%",
+      textSizeAdjust: "none",
       variant: "root.html"
     },
     body: {
@@ -372,17 +373,24 @@ var Global = () => {
 
 // src/SVG.tsx
 var import_react7 = require("@emotion/react");
-var css = getNormalizedStyles("svg");
+var normalizedStyles = getNormalizedStyles("svg");
 var SVG = (_a) => {
-  var _b = _a, { size = 24, children } = _b, props = __objRest(_b, ["size", "children"]);
-  return (0, import_react7.jsx)("svg", __spreadProps(__spreadValues({
+  var _b = _a, {
+    size = 24,
+    fill = "currentcolor",
+    children
+  } = _b, props = __objRest(_b, [
+    "size",
+    "fill",
+    "children"
+  ]);
+  const { css } = useTheme();
+  return (0, import_react7.jsx)("svg", __spreadValues({
     width: size,
     height: size,
     viewBox: "0 0 24 24",
-    fill: "currentcolor"
-  }, props), {
-    css
-  }), children);
+    css: css(__spreadValues({ fill }, normalizedStyles))
+  }, props), children);
 };
 
 // src/useResponsiveValue.ts

package/dist/index.mjs

@@ -121,13 +121,13 @@ var conditional = (variant, _a) => {
 
 // src/Box.tsx
 var isNotEmpty = (val) => !(val && Object.keys(val).length === 0 && val.constructor === Object);
-var createThemedStyle = ({ as, __baseCSS, variant, styles, css: css2 }) => (theme) => {
+var createThemedStyle = ({ as, __baseCSS, variant, styles, css }) => (theme) => {
   return [
     getNormalizedStyles(as),
     transformStyleObject(__baseCSS)(theme),
     ...ensureArrayVariant(variant).map((v) => transformStyleObject({ variant: v })(theme)),
     transformStyleObject(styles)(theme),
-    transformStyleObject(css2)(theme)
+    transformStyleObject(css)(theme)
   ].filter(isNotEmpty);
 };
 var Box = forwardRef((_a, ref) => {
@@ -136,7 +136,7 @@ var Box = forwardRef((_a, ref) => {
     children,
     __baseCSS,
     variant,
-    css: css2 = {},
+    css = {},
     display,
     height,
     width,
@@ -225,7 +225,7 @@ var Box = forwardRef((_a, ref) => {
       as,
       __baseCSS,
       variant,
-      css: css2,
+      css,
       styles: {
         display,
         height,
@@ -287,8 +287,8 @@ var __defaultTheme = {};
 var InternalContext = createContext(__defaultTheme);
 var useTheme = () => {
   const theme = useContext(InternalContext);
-  const css2 = useCallback((style) => transformStyleObject2(style)(theme), [theme]);
-  return { theme, css: css2 };
+  const css = useCallback((style) => transformStyleObject2(style)(theme), [theme]);
+  return { theme, css };
 };
 function ThemeProvider({
   theme,
@@ -312,10 +312,11 @@ var reduceMotionStyles = {
   }
 };
 var Global = () => {
-  const { css: css2 } = useTheme();
-  const styles = css2({
+  const { css } = useTheme();
+  const styles = css({
     html: {
       height: "100%",
+      textSizeAdjust: "none",
       variant: "root.html"
     },
     body: {
@@ -332,17 +333,24 @@ var Global = () => {
 
 // src/SVG.tsx
 import { jsx as jsx2 } from "@emotion/react";
-var css = getNormalizedStyles("svg");
+var normalizedStyles = getNormalizedStyles("svg");
 var SVG = (_a) => {
-  var _b = _a, { size = 24, children } = _b, props = __objRest(_b, ["size", "children"]);
-  return jsx2("svg", __spreadProps(__spreadValues({
+  var _b = _a, {
+    size = 24,
+    fill = "currentcolor",
+    children
+  } = _b, props = __objRest(_b, [
+    "size",
+    "fill",
+    "children"
+  ]);
+  const { css } = useTheme();
+  return jsx2("svg", __spreadValues({
     width: size,
     height: size,
     viewBox: "0 0 24 24",
-    fill: "currentcolor"
-  }, props), {
-    css
-  }), children);
+    css: css(__spreadValues({ fill }, normalizedStyles))
+  }, props), children);
 };
 
 // src/useResponsiveValue.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -29,7 +29,7 @@
     "@emotion/react": "11.7.1",
     "@marigold/types": "0.4.0",
     "@theme-ui/css": "0.13.1",
-    "csstype": "3.0.10"
+    "csstype": "3.0.11"
   },
   "peerDependencies": {
     "react": "^16.x || ^17.0.0",