@theme-ui/css - npm Package Compare versions

Comparing version 0.3.3 to 0.3.4

dist/index.d.ts

@@ -21,2 +21,3 @@ import { CSSObject, ThemeUIStyleObject, Theme } from './types';
     readonly opacity: "opacities";
+    readonly transition: "transitions";
     readonly margin: "space";
@@ -23,0 +24,0 @@ readonly marginTop: "space";

dist/index.modern.js

@@ -0,1 +1,21 @@
+import '@emotion/react';
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function get(obj, key, def, p, undef) {
@@ -48,2 +68,3 @@ const path = key && typeof key === 'string' ? key.split('.') : [key];
   opacity: 'opacities',
+  transition: 'transitions',
   margin: 'space',
@@ -192,3 +213,3 @@ marginTop: 'space',
 
-const transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'top', 'bottom', 'left', 'right'].reduce((acc, curr) => ({ ...acc,
+const transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'top', 'bottom', 'left', 'right'].reduce((acc, curr) => _extends({}, acc, {
   [curr]: positiveOrNegative
@@ -235,5 +256,4 @@ }), {});
 const css = (args = {}) => (props = {}) => {
-  const theme = { ...defaultTheme,
-    ...('theme' in props ? props.theme : props)
-  };
+  const theme = _extends({}, defaultTheme, 'theme' in props ? props.theme : props);
+
   let result = {};
@@ -249,5 +269,3 @@ const obj = typeof args === 'function' ? args(theme) : args;
       const variant = css(get(theme, val))(theme);
-      result = { ...result,
-        ...variant
-      };
+      result = _extends({}, result, variant);
       continue;
@@ -254,0 +272,0 @@ }

dist/types.d.ts

 import * as CSS from 'csstype';
+import '@emotion/react';
 declare type StandardCSSProperties = CSS.Properties<number | string>;
@@ -292,14 +293,14 @@ /**
     /**
-    * The **`scrollPaddingX`** is shorthand property for CSS properties **`scroll-padding-left`** and **`scroll-padding-right`**. They set the width of the scroll padding area on the left and right side of an element.
-    *
-    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-left
-    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-right
-    */
+     * The **`scrollPaddingX`** is shorthand property for CSS properties **`scroll-padding-left`** and **`scroll-padding-right`**. They set the width of the scroll padding area on the left and right side of an element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-left
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-right
+     */
     scrollPaddingX?: StandardCSSProperties['scrollPaddingLeft'];
     /**
-       * The **`scrollPaddingY`** is shorthand property for CSS properties **`scroll-padding-top`** and **`scroll-padding-bottom`**. They set the width of the scroll padding area on the top and bottom side of an element.
-       *
-       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top
-       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-bottom
-       */
+     * The **`scrollPaddingY`** is shorthand property for CSS properties **`scroll-padding-top`** and **`scroll-padding-bottom`**. They set the width of the scroll padding area on the top and bottom side of an element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-bottom
+     */
     scrollPaddingY?: StandardCSSProperties['scrollPaddingTop'];
@@ -322,3 +323,3 @@ size?: StandardCSSProperties['width'];
      */
-    boxShadow?: CSS.BoxShadowProperty | number;
+    boxShadow?: CSS.Property.BoxShadow | number;
     /**
@@ -336,3 +337,3 @@ * The **`font-weight`** CSS property specifies the weight (or boldness) of the font. The font weights available to you will depend on the `font-family` you are using. Some fonts are only
      */
-    fontWeight?: CSS.FontWeightProperty | string;
+    fontWeight?: CSS.Property.FontWeight | string;
     /**
@@ -349,3 +350,3 @@ * The **`border-top-style`** CSS property sets the line style of an element's top `border`.
      */
-    borderTopStyle?: CSS.BorderTopStyleProperty | string;
+    borderTopStyle?: CSS.Property.BorderTopStyle | string;
     /**
@@ -362,3 +363,3 @@ * The **`border-top-width`** CSS property sets the width of the top border of an element.
      */
-    borderTopWidth?: CSS.BorderTopWidthProperty<never> | string;
+    borderTopWidth?: CSS.Property.BorderTopWidth<never> | string;
     /**
@@ -375,3 +376,3 @@ * The **`border-bottom-style`** CSS property sets the line style of an element's bottom `border`.
      */
-    borderBottomStyle?: CSS.BorderBottomStyleProperty | string;
+    borderBottomStyle?: CSS.Property.BorderBottomStyle | string;
     /**
@@ -388,3 +389,3 @@ * The **`border-right-style`** CSS property sets the line style of an element's right `border`.
      */
-    borderRightStyle?: CSS.BorderRightStyleProperty | string;
+    borderRightStyle?: CSS.Property.BorderRightStyle | string;
     /**
@@ -401,3 +402,3 @@ * The **`border-left-style`** CSS property sets the line style of an element's left `border`.
      */
-    borderLeftStyle?: CSS.BorderLeftStyleProperty | string;
+    borderLeftStyle?: CSS.Property.BorderLeftStyle | string;
     /**
@@ -413,3 +414,3 @@ * The **`border-radius`** CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
      */
-    borderRadius?: CSS.BorderRadiusProperty<string | number>;
+    borderRadius?: CSS.Property.BorderRadius<string | number>;
     /**
@@ -426,3 +427,3 @@ * The **`z-index`** CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
      */
-    zIndex?: CSS.ZIndexProperty | string;
+    zIndex?: CSS.Property.ZIndex | string;
 }
@@ -497,23 +498,23 @@ /**
      */
-    background?: CSS.ColorProperty;
+    background?: CSS.Property.Color;
     /**
      * Body foreground color
      */
-    text?: CSS.ColorProperty;
+    text?: CSS.Property.Color;
     /**
      * Primary brand color for links, buttons, etc.
      */
-    primary?: CSS.ColorProperty;
+    primary?: CSS.Property.Color;
     /**
      * A secondary brand color for alternative styling
      */
-    secondary?: CSS.ColorProperty;
+    secondary?: CSS.Property.Color;
     /**
      * A contrast color for emphasizing UI
      */
-    accent?: CSS.ColorProperty;
+    accent?: CSS.Property.Color;
     /**
      * A background color for highlighting text
      */
-    highlight?: CSS.ColorProperty;
+    highlight?: CSS.Property.Color;
     /**
@@ -523,4 +524,4 @@ * A faint color for backgrounds, borders, and accents that do not require
      */
-    muted?: CSS.ColorProperty;
-    [k: string]: CSS.ColorProperty | Scale<CSS.ColorProperty> | undefined;
+    muted?: CSS.Property.Color;
+    [k: string]: CSS.Property.Color | Scale<CSS.Property.Color> | undefined;
 }
@@ -573,18 +574,19 @@ export declare type ColorModesScale = ColorMode & {
     };
-    space?: Scale<CSS.MarginProperty<number | string>>;
-    fontSizes?: Scale<CSS.FontSizeProperty<number>>;
-    fonts?: Scale<CSS.FontFamilyProperty>;
-    fontWeights?: Scale<CSS.FontWeightProperty>;
-    lineHeights?: Scale<CSS.LineHeightProperty<TLengthStyledSystem>>;
-    letterSpacings?: Scale<CSS.LetterSpacingProperty<TLengthStyledSystem>>;
-    sizes?: Scale<CSS.HeightProperty<{}> | CSS.WidthProperty<{}>>;
-    borders?: Scale<CSS.BorderProperty<{}>>;
-    borderStyles?: Scale<CSS.BorderProperty<{}>>;
-    borderWidths?: Scale<CSS.BorderWidthProperty<TLengthStyledSystem>>;
-    radii?: Scale<CSS.BorderRadiusProperty<TLengthStyledSystem>>;
-    shadows?: Scale<CSS.BoxShadowProperty>;
-    zIndices?: Scale<CSS.ZIndexProperty>;
+    space?: Scale<CSS.Property.Margin<number | string>>;
+    fontSizes?: Scale<CSS.Property.FontSize<number>>;
+    fonts?: Scale<CSS.Property.FontFamily>;
+    fontWeights?: Scale<CSS.Property.FontWeight>;
+    lineHeights?: Scale<CSS.Property.LineHeight<TLengthStyledSystem>>;
+    letterSpacings?: Scale<CSS.Property.LetterSpacing<TLengthStyledSystem>>;
+    sizes?: Scale<CSS.Property.Height<{}> | CSS.Property.Width<{}>>;
+    borders?: Scale<CSS.Property.Border<{}>>;
+    borderStyles?: Scale<CSS.Property.Border<{}>>;
+    borderWidths?: Scale<CSS.Property.BorderWidth<TLengthStyledSystem>>;
+    radii?: Scale<CSS.Property.BorderRadius<TLengthStyledSystem>>;
+    shadows?: Scale<CSS.Property.BoxShadow>;
+    zIndices?: Scale<CSS.Property.ZIndex>;
     colorStyles?: Scale<ThemeUICSSProperties>;
     textStyles?: Scale<ThemeUICSSProperties>;
-    opacities?: Scale<CSS.OpacityProperty>;
+    opacities?: Scale<CSS.Property.Opacity>;
+    transitions?: Scale<CSS.Property.Transition>;
     /**
@@ -602,2 +604,6 @@ * Enable/disable custom CSS properties/variables if lower browser
     /**
+     * Provide a value here to set a color mode for printing
+     */
+    printColorModeName?: string;
+    /**
      * Adds styles defined in theme.styles.root to the <body> element along with color and background-color
@@ -754,2 +760,8 @@ */
 }
+interface ThemeUITheme extends Theme {
+}
+declare module '@emotion/react' {
+    interface Theme extends ThemeUITheme {
+    }
+}
 export {};

package.json

 {
   "name": "@theme-ui/css",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "main": "dist/index.js",
@@ -16,3 +16,3 @@ "module": "dist/index.esm.js",
   },
-  "gitHead": "bfba2df8fdd01119c3af6a233355db1955c54ba0"
+  "gitHead": "7840f829dea27b554c5cd1cb00470770fceca2eb"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

195879

increased by0.45%

Lines of code

3705

increased by0.68%

No dependency changes