@marigold/system 0.4.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @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
+
+- [#1795](https://github.com/marigold-ui/marigold/pull/1795) [`a178eafe`](https://github.com/marigold-ui/marigold/commit/a178eafe8c8380ee23b4587d953ee52b231414ff) Thanks [@ti10le](https://github.com/ti10le)! - refa: use interface instead of type
+
+## 0.5.0
+
+### Minor Changes
+
+- [#1723](https://github.com/marigold-ui/marigold/pull/1723) [`5936de75`](https://github.com/marigold-ui/marigold/commit/5936de75e5a0134584438117c53c5edfe15c6c5d) Thanks [@sebald](https://github.com/sebald)! - feat(system): add hook that allows to use values based on screen size
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -13,8 +13,9 @@ declare type StyleObject = ThemeUIStyleObject;
 declare type CSSObject = ThemeUICSSObject;
 declare type CSSProperties = ThemeUICSSProperties;
 
-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'>;
-declare type BoxOwnProps = {
+interface StyleProps extends 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'> {
+}
+interface BoxOwnProps extends StyleProps {
     css?: CSSObject;
     variant?: string | string[];
     /**
@@ -22,8 +23,9 @@ declare type BoxOwnProps = {
      * @internal Used to set default styles for Marigold components
      */
     __baseCSS?: CSSObject;
-} & StyleProps;
-declare type BoxProps = PolymorphicPropsWithRef<BoxOwnProps, 'div'>;
+}
+interface BoxProps extends PolymorphicPropsWithRef<BoxOwnProps, 'div'> {
+}
 declare const Box: PolymorphicComponentWithRef<BoxOwnProps, 'div'>;
 
 declare const Global: () => JSX.Element;
@@ -177,9 +179,9 @@ declare const getNormalizedStyles: (val?: ElementType<any> | undefined) => {
     readonly minWidth: 0;
 };
 
-declare type SVGProps = {
+interface SVGProps extends ComponentProps<'svg'> {
     size?: number;
-} & ComponentProps<'svg'>;
+}
 declare const SVG: React.FC<SVGProps>;
 
 /**
@@ -208,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>;
@@ -222,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.
  */
@@ -246,7 +259,7 @@ interface Theme {
      * ```ts
      * {
      *   breakpoints: [
-     *     '40em', '@media (min-width: 56em) and (orientation: landscape)', '64em',
+     *     '40em', '50em', '64em',
      *   ],
      * }
      * ```
@@ -257,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.
      */
@@ -277,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.
      */
@@ -314,9 +327,16 @@ interface Theme {
     /**
      * Used to define a `transition` styles.
      */
-    transitions?: ZeroScale<CSS.Property.Transition>;
+    transitions?: Scale<CSS.Property.Transition>;
 }
 
+/**
+ * Hook that can be used to return values based on the current screen size,
+ * using breakpoints from the theme (`theme.breakpoints`). Note that this
+ * hook is client.side only.
+ */
+declare const useResponsiveValue: <T>(values: T[], defaultIndex?: number) => T;
+
 /**
  * @internal
  */
@@ -325,10 +345,10 @@ declare const useTheme: () => {
     theme: Theme;
     css: (style: StyleObject) => _theme_ui_css.CSSObject;
 };
-declare type ThemeProviderProps<T extends Theme> = {
+interface ThemeProviderProps<T extends Theme> {
     theme: T;
     children: ReactNode;
-};
+}
 declare function ThemeProvider<T extends Theme>({ theme, children, }: ThemeProviderProps<T>): JSX.Element;
 
 /**
@@ -344,13 +364,13 @@ declare const ensureVariantDefault: (val: string) => string;
  * Ensures that the `variant` is an array and supports the `__default` key.
  */
 declare const ensureArrayVariant: <T extends string>(variant?: T | T[] | undefined) => string[];
-declare type State = {
+interface State {
     checked?: boolean;
     focus?: boolean;
     hover?: boolean;
     disabled?: boolean;
     error?: boolean;
-};
+}
 /**
  * Appends given `state` to a `variant`.
  */
@@ -361,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, 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

@@ -70,6 +70,7 @@ __export(src_exports, {
   ensureVariantDefault: () => ensureVariantDefault,
   getNormalizedStyles: () => getNormalizedStyles,
   normalize: () => normalize,
+  useResponsiveValue: () => useResponsiveValue,
   useTheme: () => useTheme
 });
 
@@ -164,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) => {
@@ -179,7 +180,7 @@ var Box = (0, import_react2.forwardRef)((_a, ref) => {
     children,
     __baseCSS,
     variant,
-    css: css2 = {},
+    css = {},
     display,
     height,
     width,
@@ -268,7 +269,7 @@ var Box = (0, import_react2.forwardRef)((_a, ref) => {
       as,
       __baseCSS,
       variant,
-      css: css2,
+      css,
       styles: {
         display,
         height,
@@ -326,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,
@@ -351,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: {
@@ -371,17 +373,49 @@ 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
+var import_react8 = require("react");
+var emptyBreakpoints = ["40em", "52em", "64em"];
+var useResponsiveValue = (values, defaultIndex = 0) => {
+  const { theme } = useTheme();
+  const breakpoints = theme.breakpoints || emptyBreakpoints;
+  if (defaultIndex < 0 || defaultIndex >= breakpoints.length) {
+    throw new RangeError(`Default breakpoint index is out of bounds. Theme has ${breakpoints.length} breakpoints, default is ${defaultIndex}.`);
+  }
+  const [index, setIndex] = (0, import_react8.useState)(defaultIndex);
+  (0, import_react8.useEffect)(() => {
+    const getIndex = () => breakpoints.filter((breakpoint) => window.matchMedia(`screen and (min-width: ${breakpoint})`).matches).length;
+    const handleResize = () => {
+      const newIndex = getIndex();
+      if (index !== newIndex) {
+        setIndex(newIndex);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [breakpoints, index]);
+  return values[index >= values.length ? values.length - 1 : index];
 };
 module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:
@@ -398,5 +432,6 @@ module.exports = __toCommonJS(src_exports);
   ensureVariantDefault,
   getNormalizedStyles,
   normalize,
+  useResponsiveValue,
   useTheme
 });

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,49 @@ 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
+import { useEffect, useState } from "react";
+var emptyBreakpoints = ["40em", "52em", "64em"];
+var useResponsiveValue = (values, defaultIndex = 0) => {
+  const { theme } = useTheme();
+  const breakpoints = theme.breakpoints || emptyBreakpoints;
+  if (defaultIndex < 0 || defaultIndex >= breakpoints.length) {
+    throw new RangeError(`Default breakpoint index is out of bounds. Theme has ${breakpoints.length} breakpoints, default is ${defaultIndex}.`);
+  }
+  const [index, setIndex] = useState(defaultIndex);
+  useEffect(() => {
+    const getIndex = () => breakpoints.filter((breakpoint) => window.matchMedia(`screen and (min-width: ${breakpoint})`).matches).length;
+    const handleResize = () => {
+      const newIndex = getIndex();
+      if (index !== newIndex) {
+        setIndex(newIndex);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [breakpoints, index]);
+  return values[index >= values.length ? values.length - 1 : index];
 };
 export {
   Box,
@@ -357,5 +390,6 @@ export {
   ensureVariantDefault,
   getNormalizedStyles,
   normalize,
+  useResponsiveValue,
   useTheme
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -22,14 +22,14 @@
   ],
   "repository": {
     "type": "git",
-    "url": "github:marigold-ui/marigold",
+    "url": "https://github.com/marigold-ui/marigold",
     "directory": "packages/system"
   },
   "dependencies": {
     "@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",