@theme-ui/css - npm Package Compare versions

Comparing version 0.6.0-canary.c5a716a.0 to 0.6.0-canary.d8b715d.0

dist/index.d.ts

@@ -1,6 +0,3 @@
-import { CSSObject, ThemeUIStyleObject, ThemeUICSSObject, Theme, ObjectWithDefault } from './types';
-export { scales } from './scales';
-export type { Scales } from './scales';
+import { CSSObject, ThemeUIStyleObject, Theme } from './types';
 export * from './types';
-export * from './exact-theme';
 export { __internalGetUseRootStyles } from './options';
@@ -18,3 +15,3 @@ /**
  */
-export declare const THEME_UI_DEFAULT_KEY: keyof ObjectWithDefault<never>;
+export declare const THEME_UI_DEFAULT_KEY = "__default";
 /**
@@ -30,7 +27,146 @@ * Extracts value under path from a deeply nested object.
 export declare function get(obj: object, path: string | number | undefined, fallback?: unknown, p?: number, undef?: unknown): any;
-export declare const getObjectWithVariants: (obj: ThemeUICSSObject, theme: Theme) => ThemeUICSSObject;
+export declare const getObjectWithVariants: (obj: any, theme: Theme) => CSSObject;
 export declare const defaultBreakpoints: string[];
+export declare const multiples: {
+    marginX: string[];
+    marginY: string[];
+    paddingX: string[];
+    paddingY: string[];
+    scrollPaddingX: string[];
+    scrollPaddingY: string[];
+    size: string[];
+};
+export declare const scales: {
+    readonly color: "colors";
+    readonly backgroundColor: "colors";
+    readonly borderColor: "colors";
+    readonly caretColor: "colors";
+    readonly columnRuleColor: "colors";
+    readonly opacity: "opacities";
+    readonly transition: "transitions";
+    readonly margin: "space";
+    readonly marginTop: "space";
+    readonly marginRight: "space";
+    readonly marginBottom: "space";
+    readonly marginLeft: "space";
+    readonly marginX: "space";
+    readonly marginY: "space";
+    readonly marginBlock: "space";
+    readonly marginBlockEnd: "space";
+    readonly marginBlockStart: "space";
+    readonly marginInline: "space";
+    readonly marginInlineEnd: "space";
+    readonly marginInlineStart: "space";
+    readonly padding: "space";
+    readonly paddingTop: "space";
+    readonly paddingRight: "space";
+    readonly paddingBottom: "space";
+    readonly paddingLeft: "space";
+    readonly paddingX: "space";
+    readonly paddingY: "space";
+    readonly paddingBlock: "space";
+    readonly paddingBlockEnd: "space";
+    readonly paddingBlockStart: "space";
+    readonly paddingInline: "space";
+    readonly paddingInlineEnd: "space";
+    readonly paddingInlineStart: "space";
+    readonly scrollPadding: "space";
+    readonly scrollPaddingTop: "space";
+    readonly scrollPaddingRight: "space";
+    readonly scrollPaddingBottom: "space";
+    readonly scrollPaddingLeft: "space";
+    readonly scrollPaddingX: "space";
+    readonly scrollPaddingY: "space";
+    readonly inset: "space";
+    readonly insetBlock: "space";
+    readonly insetBlockEnd: "space";
+    readonly insetBlockStart: "space";
+    readonly insetInline: "space";
+    readonly insetInlineEnd: "space";
+    readonly insetInlineStart: "space";
+    readonly top: "space";
+    readonly right: "space";
+    readonly bottom: "space";
+    readonly left: "space";
+    readonly gridGap: "space";
+    readonly gridColumnGap: "space";
+    readonly gridRowGap: "space";
+    readonly gap: "space";
+    readonly columnGap: "space";
+    readonly rowGap: "space";
+    readonly fontFamily: "fonts";
+    readonly fontSize: "fontSizes";
+    readonly fontWeight: "fontWeights";
+    readonly lineHeight: "lineHeights";
+    readonly letterSpacing: "letterSpacings";
+    readonly border: "borders";
+    readonly borderTop: "borders";
+    readonly borderRight: "borders";
+    readonly borderBottom: "borders";
+    readonly borderLeft: "borders";
+    readonly borderWidth: "borderWidths";
+    readonly borderStyle: "borderStyles";
+    readonly borderRadius: "radii";
+    readonly borderTopRightRadius: "radii";
+    readonly borderTopLeftRadius: "radii";
+    readonly borderBottomRightRadius: "radii";
+    readonly borderBottomLeftRadius: "radii";
+    readonly borderTopWidth: "borderWidths";
+    readonly borderTopColor: "colors";
+    readonly borderTopStyle: "borderStyles";
+    readonly borderBottomWidth: "borderWidths";
+    readonly borderBottomColor: "colors";
+    readonly borderBottomStyle: "borderStyles";
+    readonly borderLeftWidth: "borderWidths";
+    readonly borderLeftColor: "colors";
+    readonly borderLeftStyle: "borderStyles";
+    readonly borderRightWidth: "borderWidths";
+    readonly borderRightColor: "colors";
+    readonly borderRightStyle: "borderStyles";
+    readonly borderBlock: "borders";
+    readonly borderBlockEnd: "borders";
+    readonly borderBlockEndStyle: "borderStyles";
+    readonly borderBlockEndWidth: "borderWidths";
+    readonly borderBlockStart: "borders";
+    readonly borderBlockStartStyle: "borderStyles";
+    readonly borderBlockStartWidth: "borderWidths";
+    readonly borderBlockStyle: "borderStyles";
+    readonly borderBlockWidth: "borderWidths";
+    readonly borderEndEndRadius: "radii";
+    readonly borderEndStartRadius: "radii";
+    readonly borderInline: "borders";
+    readonly borderInlineEnd: "borders";
+    readonly borderInlineEndStyle: "borderStyles";
+    readonly borderInlineEndWidth: "borderWidths";
+    readonly borderInlineStart: "borders";
+    readonly borderInlineStartStyle: "borderStyles";
+    readonly borderInlineStartWidth: "borderWidths";
+    readonly borderInlineStyle: "borderStyles";
+    readonly borderInlineWidth: "borderWidths";
+    readonly borderStartEndRadius: "radii";
+    readonly borderStartStartRadius: "radii";
+    readonly outlineColor: "colors";
+    readonly boxShadow: "shadows";
+    readonly textShadow: "shadows";
+    readonly zIndex: "zIndices";
+    readonly width: "sizes";
+    readonly minWidth: "sizes";
+    readonly maxWidth: "sizes";
+    readonly height: "sizes";
+    readonly minHeight: "sizes";
+    readonly maxHeight: "sizes";
+    readonly flexBasis: "sizes";
+    readonly size: "sizes";
+    readonly blockSize: "sizes";
+    readonly inlineSize: "sizes";
+    readonly maxBlockSize: "sizes";
+    readonly maxInlineSize: "sizes";
+    readonly minBlockSize: "sizes";
+    readonly minInlineSize: "sizes";
+    readonly fill: "colors";
+    readonly stroke: "colors";
+};
 declare type CssPropsArgument = {
-    theme?: Theme;
+    theme: Theme;
 } | Theme;
 export declare const css: (args?: ThemeUIStyleObject) => (props?: CssPropsArgument) => CSSObject;

dist/index.esm.js

@@ -19,287 +19,4 @@ function _extends() {
 
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it;
-
-  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-      if (it) o = it;
-      var i = 0;
-      return function () {
-        if (i >= o.length) return {
-          done: true
-        };
-        return {
-          done: false,
-          value: o[i++]
-        };
-      };
-    }
-
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
-  it = o[Symbol.iterator]();
-  return it.next.bind(it);
-}
-
-var borders = {
-  border: 'borders',
-  borderTop: 'borders',
-  borderRight: 'borders',
-  borderBottom: 'borders',
-  borderLeft: 'borders',
-  borderBlock: 'borders',
-  borderBlockEnd: 'borders',
-  borderBlockStart: 'borders',
-  borderInline: 'borders',
-  borderInlineEnd: 'borders',
-  borderInlineStart: 'borders'
-};
-
-var borderStyles = {
-  borderStyle: 'borderStyles',
-  borderTopStyle: 'borderStyles',
-  borderBottomStyle: 'borderStyles',
-  borderLeftStyle: 'borderStyles',
-  borderRightStyle: 'borderStyles',
-  borderBlockEndStyle: 'borderStyles',
-  borderBlockStartStyle: 'borderStyles',
-  borderBlockStyle: 'borderStyles',
-  borderInlineEndStyle: 'borderStyles',
-  borderInlineStartStyle: 'borderStyles',
-  borderInlineStyle: 'borderStyles'
-};
-
-var borderWidths = {
-  borderWidth: 'borderWidths',
-  borderTopWidth: 'borderWidths',
-  borderBottomWidth: 'borderWidths',
-  borderLeftWidth: 'borderWidths',
-  borderRightWidth: 'borderWidths',
-  borderBlockEndWidth: 'borderWidths',
-  borderBlockStartWidth: 'borderWidths',
-  borderBlockWidth: 'borderWidths',
-  borderInlineEndWidth: 'borderWidths',
-  borderInlineStartWidth: 'borderWidths',
-  borderInlineWidth: 'borderWidths'
-};
-
-var colors = {
-  color: 'colors',
-  backgroundColor: 'colors',
-  borderColor: 'colors',
-  caretColor: 'colors',
-  fill: 'colors',
-  stroke: 'colors',
-  borderTopColor: 'colors',
-  borderBottomColor: 'colors',
-  borderLeftColor: 'colors',
-  borderRightColor: 'colors',
-  outlineColor: 'colors'
-};
-
-var fonts = {
-  fontFamily: 'fonts'
-};
-
-var fontSizes = {
-  fontSize: 'fontSizes'
-};
-
-var fontWeights = {
-  fontWeight: 'fontWeights'
-};
-
-var letterSpacings = {
-  letterSpacing: 'letterSpacings'
-};
-
-var lineHeights = {
-  lineHeight: 'lineHeights'
-};
-
-var opacities = {
-  opacity: 'opacities'
-};
-
-var radii = {
-  borderRadius: 'radii',
-  borderTopRightRadius: 'radii',
-  borderTopLeftRadius: 'radii',
-  borderBottomRightRadius: 'radii',
-  borderBottomLeftRadius: 'radii',
-  borderEndEndRadius: 'radii',
-  borderEndStartRadius: 'radii',
-  borderStartEndRadius: 'radii',
-  borderStartStartRadius: 'radii'
-};
-
-var shadows = {
-  boxShadow: 'shadows',
-  textShadow: 'shadows'
-};
-
 /**
  * @internal
- */
-var unsafeKeys = Object.keys;
-/**
- * @internal
- */
-
-var makeScaleMapping = function makeScaleMapping(properties, scaleName) {
-  var res = {};
-
-  for (var _iterator = _createForOfIteratorHelperLoose(properties), _step; !(_step = _iterator()).done;) {
-    var key = _step.value;
-    res[key] = scaleName;
-  }
-
-  return res;
-};
-
-var sizesScaleMultiples = {
-  size: ['width', 'height']
-};
-var sizes = _extends({
-  width: 'sizes',
-  minWidth: 'sizes',
-  maxWidth: 'sizes',
-  height: 'sizes',
-  minHeight: 'sizes',
-  maxHeight: 'sizes',
-  flexBasis: 'sizes',
-  blockSize: 'sizes',
-  inlineSize: 'sizes',
-  maxBlockSize: 'sizes',
-  maxInlineSize: 'sizes',
-  minBlockSize: 'sizes',
-  minInlineSize: 'sizes'
-}, makeScaleMapping(unsafeKeys(sizesScaleMultiples), 'sizes'));
-
-var spaceScaleMultiples = {
-  marginX: ['marginLeft', 'marginRight'],
-  marginY: ['marginTop', 'marginBottom'],
-  paddingX: ['paddingLeft', 'paddingRight'],
-  paddingY: ['paddingTop', 'paddingBottom'],
-  scrollPaddingX: ['scrollPaddingLeft', 'scrollPaddingRight'],
-  scrollPaddingY: ['scrollPaddingTop', 'scrollPaddingBottom']
-};
-var space = Object.assign({
-  margin: 'space',
-  marginTop: 'space',
-  marginRight: 'space',
-  marginBottom: 'space',
-  marginLeft: 'space',
-  marginBlock: 'space',
-  marginBlockEnd: 'space',
-  marginBlockStart: 'space',
-  marginInline: 'space',
-  marginInlineEnd: 'space',
-  marginInlineStart: 'space',
-  padding: 'space',
-  paddingTop: 'space',
-  paddingRight: 'space',
-  paddingBottom: 'space',
-  paddingLeft: 'space',
-  paddingBlock: 'space',
-  paddingBlockEnd: 'space',
-  paddingBlockStart: 'space',
-  paddingInline: 'space',
-  paddingInlineEnd: 'space',
-  paddingInlineStart: 'space',
-  scrollPadding: 'space',
-  scrollPaddingTop: 'space',
-  scrollPaddingRight: 'space',
-  scrollPaddingBottom: 'space',
-  scrollPaddingLeft: 'space',
-  scrollMargin: 'space',
-  scrollMarginBlock: 'space',
-  scrollMarginBlockEnd: 'space',
-  scrollMarginBlockStart: 'space',
-  scrollMarginBottom: 'space',
-  scrollMarginInline: 'space',
-  scrollMarginInlineEnd: 'space',
-  scrollMarginInlineStart: 'space',
-  scrollMarginLeft: 'space',
-  scrollMarginRight: 'space',
-  scrollMarginTop: 'space',
-  scrollPaddingBlock: 'space',
-  scrollPaddingBlockEnd: 'space',
-  scrollPaddingBlockStart: 'space',
-  scrollPaddingInline: 'space',
-  scrollPaddingInlineEnd: 'space',
-  scrollPaddingInlineStart: 'space',
-  inset: 'space',
-  insetBlock: 'space',
-  insetBlockEnd: 'space',
-  insetBlockStart: 'space',
-  insetInline: 'space',
-  insetInlineEnd: 'space',
-  insetInlineStart: 'space',
-  top: 'space',
-  right: 'space',
-  bottom: 'space',
-  left: 'space',
-  gridGap: 'space',
-  gridColumnGap: 'space',
-  gridRowGap: 'space',
-  gap: 'space',
-  columnGap: 'space',
-  rowGap: 'space'
-}, makeScaleMapping(unsafeKeys(spaceScaleMultiples), 'space'));
-
-var transitions = {
-  transition: 'transitions'
-};
-
-var zIndices = {
-  zIndex: 'zIndices'
-};
-
-var scales = _extends({}, colors, opacities, space, borders, sizes, radii, borderWidths, borderStyles, fonts, fontSizes, fontWeights, lineHeights, letterSpacings, shadows, transitions, zIndices);
-
-var multiples = _extends({}, spaceScaleMultiples, sizesScaleMultiples);
-
-var aliases = {
-  bg: 'backgroundColor',
-  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'
-};
-
-var makeTheme = function makeTheme(t) {
-  return t;
-};
-
-/**
- * @internal
  * We fall back to `theme.useBodyStyles` when `theme.useRootStyles` is not set.
@@ -388,2 +105,159 @@ */
 };
+var aliases = {
+  bg: 'backgroundColor',
+  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'
+};
+var multiples = {
+  marginX: ['marginLeft', 'marginRight'],
+  marginY: ['marginTop', 'marginBottom'],
+  paddingX: ['paddingLeft', 'paddingRight'],
+  paddingY: ['paddingTop', 'paddingBottom'],
+  scrollPaddingX: ['scrollPaddingLeft', 'scrollPaddingRight'],
+  scrollPaddingY: ['scrollPaddingTop', 'scrollPaddingBottom'],
+  size: ['width', 'height']
+};
+var scales = {
+  color: 'colors',
+  backgroundColor: 'colors',
+  borderColor: 'colors',
+  caretColor: 'colors',
+  columnRuleColor: 'colors',
+  opacity: 'opacities',
+  transition: 'transitions',
+  margin: 'space',
+  marginTop: 'space',
+  marginRight: 'space',
+  marginBottom: 'space',
+  marginLeft: 'space',
+  marginX: 'space',
+  marginY: 'space',
+  marginBlock: 'space',
+  marginBlockEnd: 'space',
+  marginBlockStart: 'space',
+  marginInline: 'space',
+  marginInlineEnd: 'space',
+  marginInlineStart: 'space',
+  padding: 'space',
+  paddingTop: 'space',
+  paddingRight: 'space',
+  paddingBottom: 'space',
+  paddingLeft: 'space',
+  paddingX: 'space',
+  paddingY: 'space',
+  paddingBlock: 'space',
+  paddingBlockEnd: 'space',
+  paddingBlockStart: 'space',
+  paddingInline: 'space',
+  paddingInlineEnd: 'space',
+  paddingInlineStart: 'space',
+  scrollPadding: 'space',
+  scrollPaddingTop: 'space',
+  scrollPaddingRight: 'space',
+  scrollPaddingBottom: 'space',
+  scrollPaddingLeft: 'space',
+  scrollPaddingX: 'space',
+  scrollPaddingY: 'space',
+  inset: 'space',
+  insetBlock: 'space',
+  insetBlockEnd: 'space',
+  insetBlockStart: 'space',
+  insetInline: 'space',
+  insetInlineEnd: 'space',
+  insetInlineStart: 'space',
+  top: 'space',
+  right: 'space',
+  bottom: 'space',
+  left: 'space',
+  gridGap: 'space',
+  gridColumnGap: 'space',
+  gridRowGap: 'space',
+  gap: 'space',
+  columnGap: 'space',
+  rowGap: 'space',
+  fontFamily: 'fonts',
+  fontSize: 'fontSizes',
+  fontWeight: 'fontWeights',
+  lineHeight: 'lineHeights',
+  letterSpacing: 'letterSpacings',
+  border: 'borders',
+  borderTop: 'borders',
+  borderRight: 'borders',
+  borderBottom: 'borders',
+  borderLeft: 'borders',
+  borderWidth: 'borderWidths',
+  borderStyle: 'borderStyles',
+  borderRadius: 'radii',
+  borderTopRightRadius: 'radii',
+  borderTopLeftRadius: 'radii',
+  borderBottomRightRadius: 'radii',
+  borderBottomLeftRadius: 'radii',
+  borderTopWidth: 'borderWidths',
+  borderTopColor: 'colors',
+  borderTopStyle: 'borderStyles',
+  borderBottomWidth: 'borderWidths',
+  borderBottomColor: 'colors',
+  borderBottomStyle: 'borderStyles',
+  borderLeftWidth: 'borderWidths',
+  borderLeftColor: 'colors',
+  borderLeftStyle: 'borderStyles',
+  borderRightWidth: 'borderWidths',
+  borderRightColor: 'colors',
+  borderRightStyle: 'borderStyles',
+  borderBlock: 'borders',
+  borderBlockEnd: 'borders',
+  borderBlockEndStyle: 'borderStyles',
+  borderBlockEndWidth: 'borderWidths',
+  borderBlockStart: 'borders',
+  borderBlockStartStyle: 'borderStyles',
+  borderBlockStartWidth: 'borderWidths',
+  borderBlockStyle: 'borderStyles',
+  borderBlockWidth: 'borderWidths',
+  borderEndEndRadius: 'radii',
+  borderEndStartRadius: 'radii',
+  borderInline: 'borders',
+  borderInlineEnd: 'borders',
+  borderInlineEndStyle: 'borderStyles',
+  borderInlineEndWidth: 'borderWidths',
+  borderInlineStart: 'borders',
+  borderInlineStartStyle: 'borderStyles',
+  borderInlineStartWidth: 'borderWidths',
+  borderInlineStyle: 'borderStyles',
+  borderInlineWidth: 'borderWidths',
+  borderStartEndRadius: 'radii',
+  borderStartStartRadius: 'radii',
+  outlineColor: 'colors',
+  boxShadow: 'shadows',
+  textShadow: 'shadows',
+  zIndex: 'zIndices',
+  width: 'sizes',
+  minWidth: 'sizes',
+  maxWidth: 'sizes',
+  height: 'sizes',
+  minHeight: 'sizes',
+  maxHeight: 'sizes',
+  flexBasis: 'sizes',
+  size: 'sizes',
+  blockSize: 'sizes',
+  inlineSize: 'sizes',
+  maxBlockSize: 'sizes',
+  maxInlineSize: 'sizes',
+  minBlockSize: 'sizes',
+  minInlineSize: 'sizes',
+  // svg
+  fill: 'colors',
+  stroke: 'colors'
+};
 
@@ -414,47 +288,45 @@ var positiveOrNegative = function positiveOrNegative(scale, value) {
 }, {});
-/**
- * transform functions (satyles derived from theme) into their values
- * and transforms responsive style tuples into media queries
- */
 
-function responsive(styles, theme) {
-  var next = {};
-  var breakpoints = theme && theme.breakpoints || defaultBreakpoints;
-  var mediaQueries = [null].concat(breakpoints.map(function (n) {
-    return "@media screen and (min-width: " + n + ")";
-  }));
+var responsive = function responsive(styles) {
+  return function (theme) {
+    var next = {};
+    var breakpoints = theme && theme.breakpoints || defaultBreakpoints;
+    var mediaQueries = [null].concat(breakpoints.map(function (n) {
+      return "@media screen and (min-width: " + n + ")";
+    }));
 
-  for (var k in styles) {
-    var key = k;
-    var value = styles[key];
+    for (var k in styles) {
+      var key = k;
+      var value = styles[key];
 
-    if (typeof value === 'function') {
-      value = value(theme);
-    }
+      if (typeof value === 'function') {
+        value = value(theme || {});
+      }
 
-    if (value === false || value == null) {
-      continue;
-    }
+      if (value === false || value == null) {
+        continue;
+      }
 
-    if (!Array.isArray(value)) {
-      next[key] = value;
-      continue;
-    }
+      if (!Array.isArray(value)) {
+        next[key] = value;
+        continue;
+      }
 
-    for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
-      var media = mediaQueries[i];
+      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
+        var media = mediaQueries[i];
 
-      if (!media) {
-        next[key] = value[i];
-        continue;
+        if (!media) {
+          next[key] = value[i];
+          continue;
+        }
+
+        next[media] = next[media] || {};
+        if (value[i] == null) continue;
+        next[media][key] = value[i];
       }
-
-      next[media] = next[media] || {};
-      if (value[i] == null) continue;
-      next[media][key] = value[i];
     }
-  }
 
-  return next;
-}
+    return next;
+  };
+};
 
@@ -477,3 +349,3 @@ var css = function css(args) {
     var obj = getObjectWithVariants(typeof args === 'function' ? args(theme) : args, theme);
-    var styles = responsive(obj, theme);
+    var styles = responsive(obj)(theme);
     var result = {};
@@ -483,7 +355,2 @@
       var x = styles[key];
-
-      if (x === false || x == null) {
-        continue;
-      }
-
       var val = typeof x === 'function' ? x(theme) : x;
@@ -494,6 +361,8 @@
           result[key] = val[THEME_UI_DEFAULT_KEY];
-        } else {
-          result[key] = css(val)(theme);
-        }
+          continue;
+        } // On type level, val can also be an array here,
+        // but we transform all arrays in `responsive` function.
 
+
+        result[key] = css(val)(theme);
         continue;
@@ -523,3 +392,3 @@ }
 
-export { THEME_UI_DEFAULT_KEY, __internalGetUseRootStyles, css, defaultBreakpoints, get, getObjectWithVariants, makeTheme, scales };
+export { THEME_UI_DEFAULT_KEY, __internalGetUseRootStyles, css, defaultBreakpoints, get, getObjectWithVariants, multiples, scales };
 //# sourceMappingURL=index.esm.js.map

dist/index.js

@@ -19,287 +19,4 @@ function _extends() {
 
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it;
-
-  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-      if (it) o = it;
-      var i = 0;
-      return function () {
-        if (i >= o.length) return {
-          done: true
-        };
-        return {
-          done: false,
-          value: o[i++]
-        };
-      };
-    }
-
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
-  it = o[Symbol.iterator]();
-  return it.next.bind(it);
-}
-
-var borders = {
-  border: 'borders',
-  borderTop: 'borders',
-  borderRight: 'borders',
-  borderBottom: 'borders',
-  borderLeft: 'borders',
-  borderBlock: 'borders',
-  borderBlockEnd: 'borders',
-  borderBlockStart: 'borders',
-  borderInline: 'borders',
-  borderInlineEnd: 'borders',
-  borderInlineStart: 'borders'
-};
-
-var borderStyles = {
-  borderStyle: 'borderStyles',
-  borderTopStyle: 'borderStyles',
-  borderBottomStyle: 'borderStyles',
-  borderLeftStyle: 'borderStyles',
-  borderRightStyle: 'borderStyles',
-  borderBlockEndStyle: 'borderStyles',
-  borderBlockStartStyle: 'borderStyles',
-  borderBlockStyle: 'borderStyles',
-  borderInlineEndStyle: 'borderStyles',
-  borderInlineStartStyle: 'borderStyles',
-  borderInlineStyle: 'borderStyles'
-};
-
-var borderWidths = {
-  borderWidth: 'borderWidths',
-  borderTopWidth: 'borderWidths',
-  borderBottomWidth: 'borderWidths',
-  borderLeftWidth: 'borderWidths',
-  borderRightWidth: 'borderWidths',
-  borderBlockEndWidth: 'borderWidths',
-  borderBlockStartWidth: 'borderWidths',
-  borderBlockWidth: 'borderWidths',
-  borderInlineEndWidth: 'borderWidths',
-  borderInlineStartWidth: 'borderWidths',
-  borderInlineWidth: 'borderWidths'
-};
-
-var colors = {
-  color: 'colors',
-  backgroundColor: 'colors',
-  borderColor: 'colors',
-  caretColor: 'colors',
-  fill: 'colors',
-  stroke: 'colors',
-  borderTopColor: 'colors',
-  borderBottomColor: 'colors',
-  borderLeftColor: 'colors',
-  borderRightColor: 'colors',
-  outlineColor: 'colors'
-};
-
-var fonts = {
-  fontFamily: 'fonts'
-};
-
-var fontSizes = {
-  fontSize: 'fontSizes'
-};
-
-var fontWeights = {
-  fontWeight: 'fontWeights'
-};
-
-var letterSpacings = {
-  letterSpacing: 'letterSpacings'
-};
-
-var lineHeights = {
-  lineHeight: 'lineHeights'
-};
-
-var opacities = {
-  opacity: 'opacities'
-};
-
-var radii = {
-  borderRadius: 'radii',
-  borderTopRightRadius: 'radii',
-  borderTopLeftRadius: 'radii',
-  borderBottomRightRadius: 'radii',
-  borderBottomLeftRadius: 'radii',
-  borderEndEndRadius: 'radii',
-  borderEndStartRadius: 'radii',
-  borderStartEndRadius: 'radii',
-  borderStartStartRadius: 'radii'
-};
-
-var shadows = {
-  boxShadow: 'shadows',
-  textShadow: 'shadows'
-};
-
 /**
  * @internal
- */
-var unsafeKeys = Object.keys;
-/**
- * @internal
- */
-
-var makeScaleMapping = function makeScaleMapping(properties, scaleName) {
-  var res = {};
-
-  for (var _iterator = _createForOfIteratorHelperLoose(properties), _step; !(_step = _iterator()).done;) {
-    var key = _step.value;
-    res[key] = scaleName;
-  }
-
-  return res;
-};
-
-var sizesScaleMultiples = {
-  size: ['width', 'height']
-};
-var sizes = _extends({
-  width: 'sizes',
-  minWidth: 'sizes',
-  maxWidth: 'sizes',
-  height: 'sizes',
-  minHeight: 'sizes',
-  maxHeight: 'sizes',
-  flexBasis: 'sizes',
-  blockSize: 'sizes',
-  inlineSize: 'sizes',
-  maxBlockSize: 'sizes',
-  maxInlineSize: 'sizes',
-  minBlockSize: 'sizes',
-  minInlineSize: 'sizes'
-}, makeScaleMapping(unsafeKeys(sizesScaleMultiples), 'sizes'));
-
-var spaceScaleMultiples = {
-  marginX: ['marginLeft', 'marginRight'],
-  marginY: ['marginTop', 'marginBottom'],
-  paddingX: ['paddingLeft', 'paddingRight'],
-  paddingY: ['paddingTop', 'paddingBottom'],
-  scrollPaddingX: ['scrollPaddingLeft', 'scrollPaddingRight'],
-  scrollPaddingY: ['scrollPaddingTop', 'scrollPaddingBottom']
-};
-var space = Object.assign({
-  margin: 'space',
-  marginTop: 'space',
-  marginRight: 'space',
-  marginBottom: 'space',
-  marginLeft: 'space',
-  marginBlock: 'space',
-  marginBlockEnd: 'space',
-  marginBlockStart: 'space',
-  marginInline: 'space',
-  marginInlineEnd: 'space',
-  marginInlineStart: 'space',
-  padding: 'space',
-  paddingTop: 'space',
-  paddingRight: 'space',
-  paddingBottom: 'space',
-  paddingLeft: 'space',
-  paddingBlock: 'space',
-  paddingBlockEnd: 'space',
-  paddingBlockStart: 'space',
-  paddingInline: 'space',
-  paddingInlineEnd: 'space',
-  paddingInlineStart: 'space',
-  scrollPadding: 'space',
-  scrollPaddingTop: 'space',
-  scrollPaddingRight: 'space',
-  scrollPaddingBottom: 'space',
-  scrollPaddingLeft: 'space',
-  scrollMargin: 'space',
-  scrollMarginBlock: 'space',
-  scrollMarginBlockEnd: 'space',
-  scrollMarginBlockStart: 'space',
-  scrollMarginBottom: 'space',
-  scrollMarginInline: 'space',
-  scrollMarginInlineEnd: 'space',
-  scrollMarginInlineStart: 'space',
-  scrollMarginLeft: 'space',
-  scrollMarginRight: 'space',
-  scrollMarginTop: 'space',
-  scrollPaddingBlock: 'space',
-  scrollPaddingBlockEnd: 'space',
-  scrollPaddingBlockStart: 'space',
-  scrollPaddingInline: 'space',
-  scrollPaddingInlineEnd: 'space',
-  scrollPaddingInlineStart: 'space',
-  inset: 'space',
-  insetBlock: 'space',
-  insetBlockEnd: 'space',
-  insetBlockStart: 'space',
-  insetInline: 'space',
-  insetInlineEnd: 'space',
-  insetInlineStart: 'space',
-  top: 'space',
-  right: 'space',
-  bottom: 'space',
-  left: 'space',
-  gridGap: 'space',
-  gridColumnGap: 'space',
-  gridRowGap: 'space',
-  gap: 'space',
-  columnGap: 'space',
-  rowGap: 'space'
-}, makeScaleMapping(unsafeKeys(spaceScaleMultiples), 'space'));
-
-var transitions = {
-  transition: 'transitions'
-};
-
-var zIndices = {
-  zIndex: 'zIndices'
-};
-
-var scales = _extends({}, colors, opacities, space, borders, sizes, radii, borderWidths, borderStyles, fonts, fontSizes, fontWeights, lineHeights, letterSpacings, shadows, transitions, zIndices);
-
-var multiples = _extends({}, spaceScaleMultiples, sizesScaleMultiples);
-
-var aliases = {
-  bg: 'backgroundColor',
-  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'
-};
-
-var makeTheme = function makeTheme(t) {
-  return t;
-};
-
-/**
- * @internal
  * We fall back to `theme.useBodyStyles` when `theme.useRootStyles` is not set.
@@ -388,2 +105,159 @@ */
 };
+var aliases = {
+  bg: 'backgroundColor',
+  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'
+};
+var multiples = {
+  marginX: ['marginLeft', 'marginRight'],
+  marginY: ['marginTop', 'marginBottom'],
+  paddingX: ['paddingLeft', 'paddingRight'],
+  paddingY: ['paddingTop', 'paddingBottom'],
+  scrollPaddingX: ['scrollPaddingLeft', 'scrollPaddingRight'],
+  scrollPaddingY: ['scrollPaddingTop', 'scrollPaddingBottom'],
+  size: ['width', 'height']
+};
+var scales = {
+  color: 'colors',
+  backgroundColor: 'colors',
+  borderColor: 'colors',
+  caretColor: 'colors',
+  columnRuleColor: 'colors',
+  opacity: 'opacities',
+  transition: 'transitions',
+  margin: 'space',
+  marginTop: 'space',
+  marginRight: 'space',
+  marginBottom: 'space',
+  marginLeft: 'space',
+  marginX: 'space',
+  marginY: 'space',
+  marginBlock: 'space',
+  marginBlockEnd: 'space',
+  marginBlockStart: 'space',
+  marginInline: 'space',
+  marginInlineEnd: 'space',
+  marginInlineStart: 'space',
+  padding: 'space',
+  paddingTop: 'space',
+  paddingRight: 'space',
+  paddingBottom: 'space',
+  paddingLeft: 'space',
+  paddingX: 'space',
+  paddingY: 'space',
+  paddingBlock: 'space',
+  paddingBlockEnd: 'space',
+  paddingBlockStart: 'space',
+  paddingInline: 'space',
+  paddingInlineEnd: 'space',
+  paddingInlineStart: 'space',
+  scrollPadding: 'space',
+  scrollPaddingTop: 'space',
+  scrollPaddingRight: 'space',
+  scrollPaddingBottom: 'space',
+  scrollPaddingLeft: 'space',
+  scrollPaddingX: 'space',
+  scrollPaddingY: 'space',
+  inset: 'space',
+  insetBlock: 'space',
+  insetBlockEnd: 'space',
+  insetBlockStart: 'space',
+  insetInline: 'space',
+  insetInlineEnd: 'space',
+  insetInlineStart: 'space',
+  top: 'space',
+  right: 'space',
+  bottom: 'space',
+  left: 'space',
+  gridGap: 'space',
+  gridColumnGap: 'space',
+  gridRowGap: 'space',
+  gap: 'space',
+  columnGap: 'space',
+  rowGap: 'space',
+  fontFamily: 'fonts',
+  fontSize: 'fontSizes',
+  fontWeight: 'fontWeights',
+  lineHeight: 'lineHeights',
+  letterSpacing: 'letterSpacings',
+  border: 'borders',
+  borderTop: 'borders',
+  borderRight: 'borders',
+  borderBottom: 'borders',
+  borderLeft: 'borders',
+  borderWidth: 'borderWidths',
+  borderStyle: 'borderStyles',
+  borderRadius: 'radii',
+  borderTopRightRadius: 'radii',
+  borderTopLeftRadius: 'radii',
+  borderBottomRightRadius: 'radii',
+  borderBottomLeftRadius: 'radii',
+  borderTopWidth: 'borderWidths',
+  borderTopColor: 'colors',
+  borderTopStyle: 'borderStyles',
+  borderBottomWidth: 'borderWidths',
+  borderBottomColor: 'colors',
+  borderBottomStyle: 'borderStyles',
+  borderLeftWidth: 'borderWidths',
+  borderLeftColor: 'colors',
+  borderLeftStyle: 'borderStyles',
+  borderRightWidth: 'borderWidths',
+  borderRightColor: 'colors',
+  borderRightStyle: 'borderStyles',
+  borderBlock: 'borders',
+  borderBlockEnd: 'borders',
+  borderBlockEndStyle: 'borderStyles',
+  borderBlockEndWidth: 'borderWidths',
+  borderBlockStart: 'borders',
+  borderBlockStartStyle: 'borderStyles',
+  borderBlockStartWidth: 'borderWidths',
+  borderBlockStyle: 'borderStyles',
+  borderBlockWidth: 'borderWidths',
+  borderEndEndRadius: 'radii',
+  borderEndStartRadius: 'radii',
+  borderInline: 'borders',
+  borderInlineEnd: 'borders',
+  borderInlineEndStyle: 'borderStyles',
+  borderInlineEndWidth: 'borderWidths',
+  borderInlineStart: 'borders',
+  borderInlineStartStyle: 'borderStyles',
+  borderInlineStartWidth: 'borderWidths',
+  borderInlineStyle: 'borderStyles',
+  borderInlineWidth: 'borderWidths',
+  borderStartEndRadius: 'radii',
+  borderStartStartRadius: 'radii',
+  outlineColor: 'colors',
+  boxShadow: 'shadows',
+  textShadow: 'shadows',
+  zIndex: 'zIndices',
+  width: 'sizes',
+  minWidth: 'sizes',
+  maxWidth: 'sizes',
+  height: 'sizes',
+  minHeight: 'sizes',
+  maxHeight: 'sizes',
+  flexBasis: 'sizes',
+  size: 'sizes',
+  blockSize: 'sizes',
+  inlineSize: 'sizes',
+  maxBlockSize: 'sizes',
+  maxInlineSize: 'sizes',
+  minBlockSize: 'sizes',
+  minInlineSize: 'sizes',
+  // svg
+  fill: 'colors',
+  stroke: 'colors'
+};
 
@@ -414,47 +288,45 @@ var positiveOrNegative = function positiveOrNegative(scale, value) {
 }, {});
-/**
- * transform functions (satyles derived from theme) into their values
- * and transforms responsive style tuples into media queries
- */
 
-function responsive(styles, theme) {
-  var next = {};
-  var breakpoints = theme && theme.breakpoints || defaultBreakpoints;
-  var mediaQueries = [null].concat(breakpoints.map(function (n) {
-    return "@media screen and (min-width: " + n + ")";
-  }));
+var responsive = function responsive(styles) {
+  return function (theme) {
+    var next = {};
+    var breakpoints = theme && theme.breakpoints || defaultBreakpoints;
+    var mediaQueries = [null].concat(breakpoints.map(function (n) {
+      return "@media screen and (min-width: " + n + ")";
+    }));
 
-  for (var k in styles) {
-    var key = k;
-    var value = styles[key];
+    for (var k in styles) {
+      var key = k;
+      var value = styles[key];
 
-    if (typeof value === 'function') {
-      value = value(theme);
-    }
+      if (typeof value === 'function') {
+        value = value(theme || {});
+      }
 
-    if (value === false || value == null) {
-      continue;
-    }
+      if (value === false || value == null) {
+        continue;
+      }
 
-    if (!Array.isArray(value)) {
-      next[key] = value;
-      continue;
-    }
+      if (!Array.isArray(value)) {
+        next[key] = value;
+        continue;
+      }
 
-    for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
-      var media = mediaQueries[i];
+      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
+        var media = mediaQueries[i];
 
-      if (!media) {
-        next[key] = value[i];
-        continue;
+        if (!media) {
+          next[key] = value[i];
+          continue;
+        }
+
+        next[media] = next[media] || {};
+        if (value[i] == null) continue;
+        next[media][key] = value[i];
       }
-
-      next[media] = next[media] || {};
-      if (value[i] == null) continue;
-      next[media][key] = value[i];
     }
-  }
 
-  return next;
-}
+    return next;
+  };
+};
 
@@ -477,3 +349,3 @@ var css = function css(args) {
     var obj = getObjectWithVariants(typeof args === 'function' ? args(theme) : args, theme);
-    var styles = responsive(obj, theme);
+    var styles = responsive(obj)(theme);
     var result = {};
@@ -483,7 +355,2 @@
       var x = styles[key];
-
-      if (x === false || x == null) {
-        continue;
-      }
-
       var val = typeof x === 'function' ? x(theme) : x;
@@ -494,6 +361,8 @@
           result[key] = val[THEME_UI_DEFAULT_KEY];
-        } else {
-          result[key] = css(val)(theme);
-        }
+          continue;
+        } // On type level, val can also be an array here,
+        // but we transform all arrays in `responsive` function.
 
+
+        result[key] = css(val)(theme);
         continue;
@@ -529,4 +398,4 @@ }
 exports.getObjectWithVariants = getObjectWithVariants;
-exports.makeTheme = makeTheme;
+exports.multiples = multiples;
 exports.scales = scales;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

@@ -19,242 +19,4 @@ function _extends() {
 
-const borders = {
-  border: 'borders',
-  borderTop: 'borders',
-  borderRight: 'borders',
-  borderBottom: 'borders',
-  borderLeft: 'borders',
-  borderBlock: 'borders',
-  borderBlockEnd: 'borders',
-  borderBlockStart: 'borders',
-  borderInline: 'borders',
-  borderInlineEnd: 'borders',
-  borderInlineStart: 'borders'
-};
-
-const borderStyles = {
-  borderStyle: 'borderStyles',
-  borderTopStyle: 'borderStyles',
-  borderBottomStyle: 'borderStyles',
-  borderLeftStyle: 'borderStyles',
-  borderRightStyle: 'borderStyles',
-  borderBlockEndStyle: 'borderStyles',
-  borderBlockStartStyle: 'borderStyles',
-  borderBlockStyle: 'borderStyles',
-  borderInlineEndStyle: 'borderStyles',
-  borderInlineStartStyle: 'borderStyles',
-  borderInlineStyle: 'borderStyles'
-};
-
-const borderWidths = {
-  borderWidth: 'borderWidths',
-  borderTopWidth: 'borderWidths',
-  borderBottomWidth: 'borderWidths',
-  borderLeftWidth: 'borderWidths',
-  borderRightWidth: 'borderWidths',
-  borderBlockEndWidth: 'borderWidths',
-  borderBlockStartWidth: 'borderWidths',
-  borderBlockWidth: 'borderWidths',
-  borderInlineEndWidth: 'borderWidths',
-  borderInlineStartWidth: 'borderWidths',
-  borderInlineWidth: 'borderWidths'
-};
-
-const colors = {
-  color: 'colors',
-  backgroundColor: 'colors',
-  borderColor: 'colors',
-  caretColor: 'colors',
-  fill: 'colors',
-  stroke: 'colors',
-  borderTopColor: 'colors',
-  borderBottomColor: 'colors',
-  borderLeftColor: 'colors',
-  borderRightColor: 'colors',
-  outlineColor: 'colors'
-};
-
-const fonts = {
-  fontFamily: 'fonts'
-};
-
-const fontSizes = {
-  fontSize: 'fontSizes'
-};
-
-const fontWeights = {
-  fontWeight: 'fontWeights'
-};
-
-const letterSpacings = {
-  letterSpacing: 'letterSpacings'
-};
-
-const lineHeights = {
-  lineHeight: 'lineHeights'
-};
-
-const opacities = {
-  opacity: 'opacities'
-};
-
-const radii = {
-  borderRadius: 'radii',
-  borderTopRightRadius: 'radii',
-  borderTopLeftRadius: 'radii',
-  borderBottomRightRadius: 'radii',
-  borderBottomLeftRadius: 'radii',
-  borderEndEndRadius: 'radii',
-  borderEndStartRadius: 'radii',
-  borderStartEndRadius: 'radii',
-  borderStartStartRadius: 'radii'
-};
-
-const shadows = {
-  boxShadow: 'shadows',
-  textShadow: 'shadows'
-};
-
 /**
  * @internal
- */
-const unsafeKeys = Object.keys;
-/**
- * @internal
- */
-
-const makeScaleMapping = (properties, scaleName) => {
-  const res = {};
-
-  for (const key of properties) {
-    res[key] = scaleName;
-  }
-
-  return res;
-};
-
-const sizesScaleMultiples = {
-  size: ['width', 'height']
-};
-const sizes = _extends({
-  width: 'sizes',
-  minWidth: 'sizes',
-  maxWidth: 'sizes',
-  height: 'sizes',
-  minHeight: 'sizes',
-  maxHeight: 'sizes',
-  flexBasis: 'sizes',
-  blockSize: 'sizes',
-  inlineSize: 'sizes',
-  maxBlockSize: 'sizes',
-  maxInlineSize: 'sizes',
-  minBlockSize: 'sizes',
-  minInlineSize: 'sizes'
-}, makeScaleMapping(unsafeKeys(sizesScaleMultiples), 'sizes'));
-
-const spaceScaleMultiples = {
-  marginX: ['marginLeft', 'marginRight'],
-  marginY: ['marginTop', 'marginBottom'],
-  paddingX: ['paddingLeft', 'paddingRight'],
-  paddingY: ['paddingTop', 'paddingBottom'],
-  scrollPaddingX: ['scrollPaddingLeft', 'scrollPaddingRight'],
-  scrollPaddingY: ['scrollPaddingTop', 'scrollPaddingBottom']
-};
-const space = Object.assign({
-  margin: 'space',
-  marginTop: 'space',
-  marginRight: 'space',
-  marginBottom: 'space',
-  marginLeft: 'space',
-  marginBlock: 'space',
-  marginBlockEnd: 'space',
-  marginBlockStart: 'space',
-  marginInline: 'space',
-  marginInlineEnd: 'space',
-  marginInlineStart: 'space',
-  padding: 'space',
-  paddingTop: 'space',
-  paddingRight: 'space',
-  paddingBottom: 'space',
-  paddingLeft: 'space',
-  paddingBlock: 'space',
-  paddingBlockEnd: 'space',
-  paddingBlockStart: 'space',
-  paddingInline: 'space',
-  paddingInlineEnd: 'space',
-  paddingInlineStart: 'space',
-  scrollPadding: 'space',
-  scrollPaddingTop: 'space',
-  scrollPaddingRight: 'space',
-  scrollPaddingBottom: 'space',
-  scrollPaddingLeft: 'space',
-  scrollMargin: 'space',
-  scrollMarginBlock: 'space',
-  scrollMarginBlockEnd: 'space',
-  scrollMarginBlockStart: 'space',
-  scrollMarginBottom: 'space',
-  scrollMarginInline: 'space',
-  scrollMarginInlineEnd: 'space',
-  scrollMarginInlineStart: 'space',
-  scrollMarginLeft: 'space',
-  scrollMarginRight: 'space',
-  scrollMarginTop: 'space',
-  scrollPaddingBlock: 'space',
-  scrollPaddingBlockEnd: 'space',
-  scrollPaddingBlockStart: 'space',
-  scrollPaddingInline: 'space',
-  scrollPaddingInlineEnd: 'space',
-  scrollPaddingInlineStart: 'space',
-  inset: 'space',
-  insetBlock: 'space',
-  insetBlockEnd: 'space',
-  insetBlockStart: 'space',
-  insetInline: 'space',
-  insetInlineEnd: 'space',
-  insetInlineStart: 'space',
-  top: 'space',
-  right: 'space',
-  bottom: 'space',
-  left: 'space',
-  gridGap: 'space',
-  gridColumnGap: 'space',
-  gridRowGap: 'space',
-  gap: 'space',
-  columnGap: 'space',
-  rowGap: 'space'
-}, makeScaleMapping(unsafeKeys(spaceScaleMultiples), 'space'));
-
-const transitions = {
-  transition: 'transitions'
-};
-
-const zIndices = {
-  zIndex: 'zIndices'
-};
-
-const scales = _extends({}, colors, opacities, space, borders, sizes, radii, borderWidths, borderStyles, fonts, fontSizes, fontWeights, lineHeights, letterSpacings, shadows, transitions, zIndices);
-
-const multiples = _extends({}, spaceScaleMultiples, sizesScaleMultiples);
-
-const aliases = {
-  bg: 'backgroundColor',
-  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'
-};
-
-const makeTheme = t => t;
-
-/**
- * @internal
  * We fall back to `theme.useBodyStyles` when `theme.useRootStyles` is not set.
@@ -338,2 +100,159 @@ */
 };
+const aliases = {
+  bg: 'backgroundColor',
+  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'
+};
+const multiples = {
+  marginX: ['marginLeft', 'marginRight'],
+  marginY: ['marginTop', 'marginBottom'],
+  paddingX: ['paddingLeft', 'paddingRight'],
+  paddingY: ['paddingTop', 'paddingBottom'],
+  scrollPaddingX: ['scrollPaddingLeft', 'scrollPaddingRight'],
+  scrollPaddingY: ['scrollPaddingTop', 'scrollPaddingBottom'],
+  size: ['width', 'height']
+};
+const scales = {
+  color: 'colors',
+  backgroundColor: 'colors',
+  borderColor: 'colors',
+  caretColor: 'colors',
+  columnRuleColor: 'colors',
+  opacity: 'opacities',
+  transition: 'transitions',
+  margin: 'space',
+  marginTop: 'space',
+  marginRight: 'space',
+  marginBottom: 'space',
+  marginLeft: 'space',
+  marginX: 'space',
+  marginY: 'space',
+  marginBlock: 'space',
+  marginBlockEnd: 'space',
+  marginBlockStart: 'space',
+  marginInline: 'space',
+  marginInlineEnd: 'space',
+  marginInlineStart: 'space',
+  padding: 'space',
+  paddingTop: 'space',
+  paddingRight: 'space',
+  paddingBottom: 'space',
+  paddingLeft: 'space',
+  paddingX: 'space',
+  paddingY: 'space',
+  paddingBlock: 'space',
+  paddingBlockEnd: 'space',
+  paddingBlockStart: 'space',
+  paddingInline: 'space',
+  paddingInlineEnd: 'space',
+  paddingInlineStart: 'space',
+  scrollPadding: 'space',
+  scrollPaddingTop: 'space',
+  scrollPaddingRight: 'space',
+  scrollPaddingBottom: 'space',
+  scrollPaddingLeft: 'space',
+  scrollPaddingX: 'space',
+  scrollPaddingY: 'space',
+  inset: 'space',
+  insetBlock: 'space',
+  insetBlockEnd: 'space',
+  insetBlockStart: 'space',
+  insetInline: 'space',
+  insetInlineEnd: 'space',
+  insetInlineStart: 'space',
+  top: 'space',
+  right: 'space',
+  bottom: 'space',
+  left: 'space',
+  gridGap: 'space',
+  gridColumnGap: 'space',
+  gridRowGap: 'space',
+  gap: 'space',
+  columnGap: 'space',
+  rowGap: 'space',
+  fontFamily: 'fonts',
+  fontSize: 'fontSizes',
+  fontWeight: 'fontWeights',
+  lineHeight: 'lineHeights',
+  letterSpacing: 'letterSpacings',
+  border: 'borders',
+  borderTop: 'borders',
+  borderRight: 'borders',
+  borderBottom: 'borders',
+  borderLeft: 'borders',
+  borderWidth: 'borderWidths',
+  borderStyle: 'borderStyles',
+  borderRadius: 'radii',
+  borderTopRightRadius: 'radii',
+  borderTopLeftRadius: 'radii',
+  borderBottomRightRadius: 'radii',
+  borderBottomLeftRadius: 'radii',
+  borderTopWidth: 'borderWidths',
+  borderTopColor: 'colors',
+  borderTopStyle: 'borderStyles',
+  borderBottomWidth: 'borderWidths',
+  borderBottomColor: 'colors',
+  borderBottomStyle: 'borderStyles',
+  borderLeftWidth: 'borderWidths',
+  borderLeftColor: 'colors',
+  borderLeftStyle: 'borderStyles',
+  borderRightWidth: 'borderWidths',
+  borderRightColor: 'colors',
+  borderRightStyle: 'borderStyles',
+  borderBlock: 'borders',
+  borderBlockEnd: 'borders',
+  borderBlockEndStyle: 'borderStyles',
+  borderBlockEndWidth: 'borderWidths',
+  borderBlockStart: 'borders',
+  borderBlockStartStyle: 'borderStyles',
+  borderBlockStartWidth: 'borderWidths',
+  borderBlockStyle: 'borderStyles',
+  borderBlockWidth: 'borderWidths',
+  borderEndEndRadius: 'radii',
+  borderEndStartRadius: 'radii',
+  borderInline: 'borders',
+  borderInlineEnd: 'borders',
+  borderInlineEndStyle: 'borderStyles',
+  borderInlineEndWidth: 'borderWidths',
+  borderInlineStart: 'borders',
+  borderInlineStartStyle: 'borderStyles',
+  borderInlineStartWidth: 'borderWidths',
+  borderInlineStyle: 'borderStyles',
+  borderInlineWidth: 'borderWidths',
+  borderStartEndRadius: 'radii',
+  borderStartStartRadius: 'radii',
+  outlineColor: 'colors',
+  boxShadow: 'shadows',
+  textShadow: 'shadows',
+  zIndex: 'zIndices',
+  width: 'sizes',
+  minWidth: 'sizes',
+  maxWidth: 'sizes',
+  height: 'sizes',
+  minHeight: 'sizes',
+  maxHeight: 'sizes',
+  flexBasis: 'sizes',
+  size: 'sizes',
+  blockSize: 'sizes',
+  inlineSize: 'sizes',
+  maxBlockSize: 'sizes',
+  maxInlineSize: 'sizes',
+  minBlockSize: 'sizes',
+  minInlineSize: 'sizes',
+  // svg
+  fill: 'colors',
+  stroke: 'colors'
+};
 
@@ -362,8 +281,4 @@ const positiveOrNegative = (scale, value) => {
 }), {});
-/**
- * transform functions (satyles derived from theme) into their values
- * and transforms responsive style tuples into media queries
- */
 
-function responsive(styles, theme) {
+const responsive = styles => theme => {
   const next = {};
@@ -378,3 +293,3 @@ const breakpoints = theme && theme.breakpoints || defaultBreakpoints;
     if (typeof value === 'function') {
-      value = value(theme);
+      value = value(theme || {});
     }
@@ -406,3 +321,3 @@
   return next;
-}
+};
 
@@ -416,3 +331,3 @@ const css = (args = {}) => (props = {}) => {
   const obj = getObjectWithVariants(typeof args === 'function' ? args(theme) : args, theme);
-  const styles = responsive(obj, theme);
+  const styles = responsive(obj)(theme);
   let result = {};
@@ -422,7 +337,2 @@
     const x = styles[key];
-
-    if (x === false || x == null) {
-      continue;
-    }
-
     const val = typeof x === 'function' ? x(theme) : x;
@@ -433,6 +343,8 @@
         result[key] = val[THEME_UI_DEFAULT_KEY];
-      } else {
-        result[key] = css(val)(theme);
-      }
+        continue;
+      } // On type level, val can also be an array here,
+      // but we transform all arrays in `responsive` function.
 
+
+      result[key] = css(val)(theme);
       continue;
@@ -461,3 +373,3 @@ }
 
-export { THEME_UI_DEFAULT_KEY, __internalGetUseRootStyles, css, defaultBreakpoints, get, getObjectWithVariants, makeTheme, scales };
+export { THEME_UI_DEFAULT_KEY, __internalGetUseRootStyles, css, defaultBreakpoints, get, getObjectWithVariants, multiples, scales };
 //# sourceMappingURL=index.modern.js.map

dist/index.umd.js

@@ -24,287 +24,4 @@ (function (global, factory) {
 
-  function _unsupportedIterableToArray(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(o);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-  }
-
-  function _arrayLikeToArray(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-
-    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-    return arr2;
-  }
-
-  function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-    var it;
-
-    if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
-      if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-        if (it) o = it;
-        var i = 0;
-        return function () {
-          if (i >= o.length) return {
-            done: true
-          };
-          return {
-            done: false,
-            value: o[i++]
-          };
-        };
-      }
-
-      throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-    }
-
-    it = o[Symbol.iterator]();
-    return it.next.bind(it);
-  }
-
-  var borders = {
-    border: 'borders',
-    borderTop: 'borders',
-    borderRight: 'borders',
-    borderBottom: 'borders',
-    borderLeft: 'borders',
-    borderBlock: 'borders',
-    borderBlockEnd: 'borders',
-    borderBlockStart: 'borders',
-    borderInline: 'borders',
-    borderInlineEnd: 'borders',
-    borderInlineStart: 'borders'
-  };
-
-  var borderStyles = {
-    borderStyle: 'borderStyles',
-    borderTopStyle: 'borderStyles',
-    borderBottomStyle: 'borderStyles',
-    borderLeftStyle: 'borderStyles',
-    borderRightStyle: 'borderStyles',
-    borderBlockEndStyle: 'borderStyles',
-    borderBlockStartStyle: 'borderStyles',
-    borderBlockStyle: 'borderStyles',
-    borderInlineEndStyle: 'borderStyles',
-    borderInlineStartStyle: 'borderStyles',
-    borderInlineStyle: 'borderStyles'
-  };
-
-  var borderWidths = {
-    borderWidth: 'borderWidths',
-    borderTopWidth: 'borderWidths',
-    borderBottomWidth: 'borderWidths',
-    borderLeftWidth: 'borderWidths',
-    borderRightWidth: 'borderWidths',
-    borderBlockEndWidth: 'borderWidths',
-    borderBlockStartWidth: 'borderWidths',
-    borderBlockWidth: 'borderWidths',
-    borderInlineEndWidth: 'borderWidths',
-    borderInlineStartWidth: 'borderWidths',
-    borderInlineWidth: 'borderWidths'
-  };
-
-  var colors = {
-    color: 'colors',
-    backgroundColor: 'colors',
-    borderColor: 'colors',
-    caretColor: 'colors',
-    fill: 'colors',
-    stroke: 'colors',
-    borderTopColor: 'colors',
-    borderBottomColor: 'colors',
-    borderLeftColor: 'colors',
-    borderRightColor: 'colors',
-    outlineColor: 'colors'
-  };
-
-  var fonts = {
-    fontFamily: 'fonts'
-  };
-
-  var fontSizes = {
-    fontSize: 'fontSizes'
-  };
-
-  var fontWeights = {
-    fontWeight: 'fontWeights'
-  };
-
-  var letterSpacings = {
-    letterSpacing: 'letterSpacings'
-  };
-
-  var lineHeights = {
-    lineHeight: 'lineHeights'
-  };
-
-  var opacities = {
-    opacity: 'opacities'
-  };
-
-  var radii = {
-    borderRadius: 'radii',
-    borderTopRightRadius: 'radii',
-    borderTopLeftRadius: 'radii',
-    borderBottomRightRadius: 'radii',
-    borderBottomLeftRadius: 'radii',
-    borderEndEndRadius: 'radii',
-    borderEndStartRadius: 'radii',
-    borderStartEndRadius: 'radii',
-    borderStartStartRadius: 'radii'
-  };
-
-  var shadows = {
-    boxShadow: 'shadows',
-    textShadow: 'shadows'
-  };
-
   /**
    * @internal
-   */
-  var unsafeKeys = Object.keys;
-  /**
-   * @internal
-   */
-
-  var makeScaleMapping = function makeScaleMapping(properties, scaleName) {
-    var res = {};
-
-    for (var _iterator = _createForOfIteratorHelperLoose(properties), _step; !(_step = _iterator()).done;) {
-      var key = _step.value;
-      res[key] = scaleName;
-    }
-
-    return res;
-  };
-
-  var sizesScaleMultiples = {
-    size: ['width', 'height']
-  };
-  var sizes = _extends({
-    width: 'sizes',
-    minWidth: 'sizes',
-    maxWidth: 'sizes',
-    height: 'sizes',
-    minHeight: 'sizes',
-    maxHeight: 'sizes',
-    flexBasis: 'sizes',
-    blockSize: 'sizes',
-    inlineSize: 'sizes',
-    maxBlockSize: 'sizes',
-    maxInlineSize: 'sizes',
-    minBlockSize: 'sizes',
-    minInlineSize: 'sizes'
-  }, makeScaleMapping(unsafeKeys(sizesScaleMultiples), 'sizes'));
-
-  var spaceScaleMultiples = {
-    marginX: ['marginLeft', 'marginRight'],
-    marginY: ['marginTop', 'marginBottom'],
-    paddingX: ['paddingLeft', 'paddingRight'],
-    paddingY: ['paddingTop', 'paddingBottom'],
-    scrollPaddingX: ['scrollPaddingLeft', 'scrollPaddingRight'],
-    scrollPaddingY: ['scrollPaddingTop', 'scrollPaddingBottom']
-  };
-  var space = Object.assign({
-    margin: 'space',
-    marginTop: 'space',
-    marginRight: 'space',
-    marginBottom: 'space',
-    marginLeft: 'space',
-    marginBlock: 'space',
-    marginBlockEnd: 'space',
-    marginBlockStart: 'space',
-    marginInline: 'space',
-    marginInlineEnd: 'space',
-    marginInlineStart: 'space',
-    padding: 'space',
-    paddingTop: 'space',
-    paddingRight: 'space',
-    paddingBottom: 'space',
-    paddingLeft: 'space',
-    paddingBlock: 'space',
-    paddingBlockEnd: 'space',
-    paddingBlockStart: 'space',
-    paddingInline: 'space',
-    paddingInlineEnd: 'space',
-    paddingInlineStart: 'space',
-    scrollPadding: 'space',
-    scrollPaddingTop: 'space',
-    scrollPaddingRight: 'space',
-    scrollPaddingBottom: 'space',
-    scrollPaddingLeft: 'space',
-    scrollMargin: 'space',
-    scrollMarginBlock: 'space',
-    scrollMarginBlockEnd: 'space',
-    scrollMarginBlockStart: 'space',
-    scrollMarginBottom: 'space',
-    scrollMarginInline: 'space',
-    scrollMarginInlineEnd: 'space',
-    scrollMarginInlineStart: 'space',
-    scrollMarginLeft: 'space',
-    scrollMarginRight: 'space',
-    scrollMarginTop: 'space',
-    scrollPaddingBlock: 'space',
-    scrollPaddingBlockEnd: 'space',
-    scrollPaddingBlockStart: 'space',
-    scrollPaddingInline: 'space',
-    scrollPaddingInlineEnd: 'space',
-    scrollPaddingInlineStart: 'space',
-    inset: 'space',
-    insetBlock: 'space',
-    insetBlockEnd: 'space',
-    insetBlockStart: 'space',
-    insetInline: 'space',
-    insetInlineEnd: 'space',
-    insetInlineStart: 'space',
-    top: 'space',
-    right: 'space',
-    bottom: 'space',
-    left: 'space',
-    gridGap: 'space',
-    gridColumnGap: 'space',
-    gridRowGap: 'space',
-    gap: 'space',
-    columnGap: 'space',
-    rowGap: 'space'
-  }, makeScaleMapping(unsafeKeys(spaceScaleMultiples), 'space'));
-
-  var transitions = {
-    transition: 'transitions'
-  };
-
-  var zIndices = {
-    zIndex: 'zIndices'
-  };
-
-  var scales = _extends({}, colors, opacities, space, borders, sizes, radii, borderWidths, borderStyles, fonts, fontSizes, fontWeights, lineHeights, letterSpacings, shadows, transitions, zIndices);
-
-  var multiples = _extends({}, spaceScaleMultiples, sizesScaleMultiples);
-
-  var aliases = {
-    bg: 'backgroundColor',
-    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'
-  };
-
-  var makeTheme = function makeTheme(t) {
-    return t;
-  };
-
-  /**
-   * @internal
    * We fall back to `theme.useBodyStyles` when `theme.useRootStyles` is not set.
@@ -393,2 +110,159 @@ */
   };
+  var aliases = {
+    bg: 'backgroundColor',
+    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'
+  };
+  var multiples = {
+    marginX: ['marginLeft', 'marginRight'],
+    marginY: ['marginTop', 'marginBottom'],
+    paddingX: ['paddingLeft', 'paddingRight'],
+    paddingY: ['paddingTop', 'paddingBottom'],
+    scrollPaddingX: ['scrollPaddingLeft', 'scrollPaddingRight'],
+    scrollPaddingY: ['scrollPaddingTop', 'scrollPaddingBottom'],
+    size: ['width', 'height']
+  };
+  var scales = {
+    color: 'colors',
+    backgroundColor: 'colors',
+    borderColor: 'colors',
+    caretColor: 'colors',
+    columnRuleColor: 'colors',
+    opacity: 'opacities',
+    transition: 'transitions',
+    margin: 'space',
+    marginTop: 'space',
+    marginRight: 'space',
+    marginBottom: 'space',
+    marginLeft: 'space',
+    marginX: 'space',
+    marginY: 'space',
+    marginBlock: 'space',
+    marginBlockEnd: 'space',
+    marginBlockStart: 'space',
+    marginInline: 'space',
+    marginInlineEnd: 'space',
+    marginInlineStart: 'space',
+    padding: 'space',
+    paddingTop: 'space',
+    paddingRight: 'space',
+    paddingBottom: 'space',
+    paddingLeft: 'space',
+    paddingX: 'space',
+    paddingY: 'space',
+    paddingBlock: 'space',
+    paddingBlockEnd: 'space',
+    paddingBlockStart: 'space',
+    paddingInline: 'space',
+    paddingInlineEnd: 'space',
+    paddingInlineStart: 'space',
+    scrollPadding: 'space',
+    scrollPaddingTop: 'space',
+    scrollPaddingRight: 'space',
+    scrollPaddingBottom: 'space',
+    scrollPaddingLeft: 'space',
+    scrollPaddingX: 'space',
+    scrollPaddingY: 'space',
+    inset: 'space',
+    insetBlock: 'space',
+    insetBlockEnd: 'space',
+    insetBlockStart: 'space',
+    insetInline: 'space',
+    insetInlineEnd: 'space',
+    insetInlineStart: 'space',
+    top: 'space',
+    right: 'space',
+    bottom: 'space',
+    left: 'space',
+    gridGap: 'space',
+    gridColumnGap: 'space',
+    gridRowGap: 'space',
+    gap: 'space',
+    columnGap: 'space',
+    rowGap: 'space',
+    fontFamily: 'fonts',
+    fontSize: 'fontSizes',
+    fontWeight: 'fontWeights',
+    lineHeight: 'lineHeights',
+    letterSpacing: 'letterSpacings',
+    border: 'borders',
+    borderTop: 'borders',
+    borderRight: 'borders',
+    borderBottom: 'borders',
+    borderLeft: 'borders',
+    borderWidth: 'borderWidths',
+    borderStyle: 'borderStyles',
+    borderRadius: 'radii',
+    borderTopRightRadius: 'radii',
+    borderTopLeftRadius: 'radii',
+    borderBottomRightRadius: 'radii',
+    borderBottomLeftRadius: 'radii',
+    borderTopWidth: 'borderWidths',
+    borderTopColor: 'colors',
+    borderTopStyle: 'borderStyles',
+    borderBottomWidth: 'borderWidths',
+    borderBottomColor: 'colors',
+    borderBottomStyle: 'borderStyles',
+    borderLeftWidth: 'borderWidths',
+    borderLeftColor: 'colors',
+    borderLeftStyle: 'borderStyles',
+    borderRightWidth: 'borderWidths',
+    borderRightColor: 'colors',
+    borderRightStyle: 'borderStyles',
+    borderBlock: 'borders',
+    borderBlockEnd: 'borders',
+    borderBlockEndStyle: 'borderStyles',
+    borderBlockEndWidth: 'borderWidths',
+    borderBlockStart: 'borders',
+    borderBlockStartStyle: 'borderStyles',
+    borderBlockStartWidth: 'borderWidths',
+    borderBlockStyle: 'borderStyles',
+    borderBlockWidth: 'borderWidths',
+    borderEndEndRadius: 'radii',
+    borderEndStartRadius: 'radii',
+    borderInline: 'borders',
+    borderInlineEnd: 'borders',
+    borderInlineEndStyle: 'borderStyles',
+    borderInlineEndWidth: 'borderWidths',
+    borderInlineStart: 'borders',
+    borderInlineStartStyle: 'borderStyles',
+    borderInlineStartWidth: 'borderWidths',
+    borderInlineStyle: 'borderStyles',
+    borderInlineWidth: 'borderWidths',
+    borderStartEndRadius: 'radii',
+    borderStartStartRadius: 'radii',
+    outlineColor: 'colors',
+    boxShadow: 'shadows',
+    textShadow: 'shadows',
+    zIndex: 'zIndices',
+    width: 'sizes',
+    minWidth: 'sizes',
+    maxWidth: 'sizes',
+    height: 'sizes',
+    minHeight: 'sizes',
+    maxHeight: 'sizes',
+    flexBasis: 'sizes',
+    size: 'sizes',
+    blockSize: 'sizes',
+    inlineSize: 'sizes',
+    maxBlockSize: 'sizes',
+    maxInlineSize: 'sizes',
+    minBlockSize: 'sizes',
+    minInlineSize: 'sizes',
+    // svg
+    fill: 'colors',
+    stroke: 'colors'
+  };
 
@@ -419,47 +293,45 @@ var positiveOrNegative = function positiveOrNegative(scale, value) {
   }, {});
-  /**
-   * transform functions (satyles derived from theme) into their values
-   * and transforms responsive style tuples into media queries
-   */
 
-  function responsive(styles, theme) {
-    var next = {};
-    var breakpoints = theme && theme.breakpoints || defaultBreakpoints;
-    var mediaQueries = [null].concat(breakpoints.map(function (n) {
-      return "@media screen and (min-width: " + n + ")";
-    }));
+  var responsive = function responsive(styles) {
+    return function (theme) {
+      var next = {};
+      var breakpoints = theme && theme.breakpoints || defaultBreakpoints;
+      var mediaQueries = [null].concat(breakpoints.map(function (n) {
+        return "@media screen and (min-width: " + n + ")";
+      }));
 
-    for (var k in styles) {
-      var key = k;
-      var value = styles[key];
+      for (var k in styles) {
+        var key = k;
+        var value = styles[key];
 
-      if (typeof value === 'function') {
-        value = value(theme);
-      }
+        if (typeof value === 'function') {
+          value = value(theme || {});
+        }
 
-      if (value === false || value == null) {
-        continue;
-      }
+        if (value === false || value == null) {
+          continue;
+        }
 
-      if (!Array.isArray(value)) {
-        next[key] = value;
-        continue;
-      }
+        if (!Array.isArray(value)) {
+          next[key] = value;
+          continue;
+        }
 
-      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
-        var media = mediaQueries[i];
+        for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
+          var media = mediaQueries[i];
 
-        if (!media) {
-          next[key] = value[i];
-          continue;
+          if (!media) {
+            next[key] = value[i];
+            continue;
+          }
+
+          next[media] = next[media] || {};
+          if (value[i] == null) continue;
+          next[media][key] = value[i];
         }
-
-        next[media] = next[media] || {};
-        if (value[i] == null) continue;
-        next[media][key] = value[i];
       }
-    }
 
-    return next;
-  }
+      return next;
+    };
+  };
 
@@ -482,3 +354,3 @@ var css = function css(args) {
       var obj = getObjectWithVariants(typeof args === 'function' ? args(theme) : args, theme);
-      var styles = responsive(obj, theme);
+      var styles = responsive(obj)(theme);
       var result = {};
@@ -488,7 +360,2 @@
         var x = styles[key];
-
-        if (x === false || x == null) {
-          continue;
-        }
-
         var val = typeof x === 'function' ? x(theme) : x;
@@ -499,6 +366,8 @@
             result[key] = val[THEME_UI_DEFAULT_KEY];
-          } else {
-            result[key] = css(val)(theme);
-          }
+            continue;
+          } // On type level, val can also be an array here,
+          // but we transform all arrays in `responsive` function.
 
+
+          result[key] = css(val)(theme);
           continue;
@@ -534,3 +403,3 @@ }
   exports.getObjectWithVariants = getObjectWithVariants;
-  exports.makeTheme = makeTheme;
+  exports.multiples = multiples;
   exports.scales = scales;
@@ -537,0 +406,0 @@

dist/options.d.ts

@@ -1,2 +0,2 @@
-import { BaseTheme } from './types';
+import { Theme } from './types';
 /**
@@ -6,5 +6,5 @@ * @internal
  */
-export declare function __internalGetUseRootStyles(theme?: BaseTheme): {
+export declare function __internalGetUseRootStyles(theme?: Theme): {
     scope: string;
     rootStyles: boolean | undefined;
 };

dist/types.d.ts

@@ -1,9 +0,4 @@
-import type * as CSS from 'csstype';
-import type { AliasesCSSProperties } from './aliases';
-import type { ScalesCSSProperties } from './scales';
-import type { MultiplesCSSProperties } from './multiples';
-export type { CSSObject } from '@emotion/react';
-export declare type ThemeUIEmpty = undefined | null | false;
-export interface ResponsiveStyleTuple<T> extends Array<T | ThemeUIEmpty> {
-}
+import * as CSS from 'csstype';
+declare type StandardCSSProperties = CSS.Properties<number | string>;
+declare type Empty = undefined | null | false;
 /**
@@ -16,3 +11,3 @@ * The `css` function accepts arrays as values for mobile-first responsive styles.
  */
-export declare type ResponsiveStyleValue<T> = T | ThemeUIEmpty | ResponsiveStyleTuple<T | ThemeUIEmpty>;
+export declare type ResponsiveStyleValue<T> = T | Empty | Array<T | Empty>;
 /**
@@ -31,12 +26,397 @@ * All non-vendor-prefixed CSS properties. (Allow `number` to support CSS-in-JS libs,
 /**
- * Can be augmented by users to inject their exact theme into Theme UI types.
- * @see TODO LINK TO THE DOCS
+ * CSS as POJO that is compatible with CSS-in-JS libaries.
+ * Copied directly from [emotion](https://github.com/emotion-js/emotion/blob/ca3ad1c1dcabf78a95b55cc2dc94cad1998a3196/packages/serialize/types/index.d.ts#L45) types
  */
-export interface UserTheme {
+export interface CSSObject extends CSSPropertiesWithMultiValues, CSSPseudosForCSSObject, CSSOthersObjectForCSSObject {
 }
-export interface Theme extends Assign<BaseTheme, UserTheme> {
+declare type CSSPropertiesWithMultiValues = {
+    [K in keyof CSSProperties]: CSSProperties[K];
+};
+declare type CSSPseudosForCSSObject = {
+    [K in CSS.Pseudos]?: CSSObject;
+};
+declare type CSSInterpolation = undefined | number | string | CSSObject;
+interface CSSOthersObjectForCSSObject {
+    [propertiesName: string]: CSSInterpolation;
 }
-export declare type Assign<T, U> = {
-    [P in keyof (T & U)]: P extends keyof U ? U[P] : P extends keyof T ? T[P] : never;
-};
+interface AliasesCSSProperties {
+    /**
+     * The **`background-color`** CSS property sets the background color of an element.
+     *
+     * **Initial value**: `transparent`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **4** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/background-color
+     */
+    bg?: StandardCSSProperties['backgroundColor'];
+    /**
+     * The **`margin`** CSS property sets the margin area on all four sides of an element. It is a shorthand for `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`.
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **3** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/margin
+     */
+    m?: StandardCSSProperties['margin'];
+    /**
+     * The **`margin-top`** CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+     *
+     * **Initial value**: `0`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **3** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
+     */
+    mt?: StandardCSSProperties['marginTop'];
+    /**
+     * The **`margin-right`** CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+     *
+     * **Initial value**: `0`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **3** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
+     */
+    mr?: StandardCSSProperties['marginRight'];
+    /**
+     * The **`margin-bottom`** CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+     *
+     * **Initial value**: `0`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **3** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
+     */
+    mb?: StandardCSSProperties['marginBottom'];
+    /**
+     * The **`margin-left`** CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+     *
+     * **Initial value**: `0`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **3** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
+     */
+    ml?: StandardCSSProperties['marginLeft'];
+    /**
+     * The **`mx`** is shorthand for using both **`margin-left`** and **`margin-right`** CSS properties. They set the margin area on the left and right side of an element. A positive value placesit
+     * farther from its neighbors, while a negative value places it closer.
+     *
+     * **Initial value**: `0`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **3** |
+     *
+     * @see https://styled-system.com/#margin-props
+     * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
+     * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
+     */
+    mx?: StandardCSSProperties['marginLeft'];
+    /**
+     * The **`marginX`** is shorthand for using both **`margin-left`** and **`margin-right`** CSS properties. They set the margin area on the left and right side of an element. A positive value
+     * places it farther from its neighbors, while a negative value places it closer.
+     *
+     * **Initial value**: `0`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **3** |
+     *
+     * @see https://styled-system.com/#margin-props
+     * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
+     * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
+     */
+    marginX?: StandardCSSProperties['marginLeft'];
+    /**
+     * The **`my`** is shorthard for using both **`margin-top`** and **`margin-bottom`** CSS properties. They set the margin area on the top and bottom of an element. A positive value places it
+     * farther from its neighbors, while a negative value places it closer.
+     *
+     * **Initial value**: `0`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **3** |
+     *
+     * @see https://styled-system.com/#margin-props
+     * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
+     * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
+     */
+    my?: StandardCSSProperties['marginTop'];
+    /**
+     * The **`marginY`** is shorthard for using both **`margin-top`** and **`margin-bottom`** CSS properties. They set the margin area on the top and bottom of an element. A positive value places
+     * it farther from its neighbors, while a negative value places it closer.
+     *
+     * **Initial value**: `0`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **3** |
+     *
+     * @see https://styled-system.com/#margin-props
+     * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
+     * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
+     */
+    marginY?: StandardCSSProperties['marginTop'];
+    /**
+     * The **`padding`** CSS property sets the padding area on all four sides of an element. It is a shorthand for `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`.
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **4** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/padding
+     */
+    p?: StandardCSSProperties['padding'];
+    /**
+     * The **`padding-top`** padding area on the top of an element.
+     *
+     * **Initial value**: `0`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **4** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
+     */
+    pt?: StandardCSSProperties['paddingTop'];
+    /**
+     * The **`padding-right`** CSS property sets the width of the padding area on the right side of an element.
+     *
+     * **Initial value**: `0`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **4** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
+     */
+    pr?: StandardCSSProperties['paddingRight'];
+    /**
+     * The **`padding-bottom`** CSS property sets the height of the padding area on the bottom of an element.
+     *
+     * **Initial value**: `0`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **4** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
+     */
+    pb?: StandardCSSProperties['paddingBottom'];
+    /**
+     * The **`padding-left`** CSS property sets the width of the padding area on the left side of an element.
+     *
+     * **Initial value**: `0`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **4** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
+     */
+    pl?: StandardCSSProperties['paddingLeft'];
+    /**
+     * The **`px`** is shorthand property for CSS properties **`padding-left`** and **`padding-right`**. They set the width of the padding area on the left and right side of an element.
+     *
+     * **Initial value**: `0`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **4** |
+     *
+     * @see https://styled-system.com/#padding-props
+     * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
+     * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
+     */
+    px?: StandardCSSProperties['paddingLeft'];
+    /**
+     * The **`paddingX`** is shorthand property for CSS properties **`padding-left`** and **`padding-right`**. They set the width of the padding area on the left and right side of an element.
+     *
+     * **Initial value**: `0`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **4** |
+     *
+     * @see https://styled-system.com/#padding-props
+     * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
+     * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
+     */
+    paddingX?: StandardCSSProperties['paddingLeft'];
+    /**
+     * The **`py`** is shorthand property for CSS properties **`padding-top`** and **`padding-bottom`**. They set the width of the padding area on the top and bottom of an element.
+     *
+     * **Initial value**: `0`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **4** |
+     *
+     * @see https://styled-system.com/#padding-props
+     * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
+     * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
+     */
+    py?: StandardCSSProperties['paddingTop'];
+    /**
+     * The **`paddingY`** is shorthand property for CSS properties **`padding-top`** and **`padding-bottom`**. They set the width of the padding area on the top and bottom of an element.
+     *
+     * **Initial value**: `0`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **4** |
+     *
+     * @see https://styled-system.com/#padding-props
+     * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
+     * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
+     */
+    paddingY?: StandardCSSProperties['paddingTop'];
+    /**
+     * The **`size`** is a shorthand property for CSS properties **`width`** and **`height`**.
+     *
+     * @see https://theme-ui.com/sx-prop#theme-aware-properties
+     * @see https://developer.mozilla.org/docs/Web/CSS/width
+     * @see https://developer.mozilla.org/docs/Web/CSS/height
+     */
+    /**
+     * 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
+     */
+    scrollPaddingY?: StandardCSSProperties['scrollPaddingTop'];
+    size?: StandardCSSProperties['width'];
+}
+interface OverwriteCSSProperties {
+    /**
+     * The **`box-shadow`** CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the
+     * element, blur and spread radii, and color.
+     *
+     * **Initial value**: `none`
+     *
+     * | Chrome  | Firefox | Safari  |  Edge  |  IE   |
+     * | :-----: | :-----: | :-----: | :----: | :---: |
+     * | **10**  |  **4**  | **5.1** | **12** | **9** |
+     * | 1 _-x-_ |         | 3 _-x-_ |        |       |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/box-shadow
+     */
+    boxShadow?: CSS.Property.BoxShadow | number;
+    /**
+     * 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
+     * available in `normal` and `bold`.
+     *
+     * **Initial value**: `normal`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **2**  |  **1**  | **1**  | **12** | **3** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/font-weight
+     */
+    fontWeight?: CSS.Property.FontWeight | string;
+    /**
+     * The **`border-top-style`** CSS property sets the line style of an element's top `border`.
+     *
+     * **Initial value**: `none`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |   IE    |
+     * | :----: | :-----: | :----: | :----: | :-----: |
+     * | **1**  |  **1**  | **1**  | **12** | **5.5** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/border-top-style
+     */
+    borderTopStyle?: CSS.Property.BorderTopStyle | string;
+    /**
+     * The **`border-top-width`** CSS property sets the width of the top border of an element.
+     *
+     * **Initial value**: `medium`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **4** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/border-top-width
+     */
+    borderTopWidth?: CSS.Property.BorderTopWidth<never> | string;
+    /**
+     * The **`border-bottom-style`** CSS property sets the line style of an element's bottom `border`.
+     *
+     * **Initial value**: `none`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |   IE    |
+     * | :----: | :-----: | :----: | :----: | :-----: |
+     * | **1**  |  **1**  | **1**  | **12** | **5.5** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-style
+     */
+    borderBottomStyle?: CSS.Property.BorderBottomStyle | string;
+    /**
+     * The **`border-right-style`** CSS property sets the line style of an element's right `border`.
+     *
+     * **Initial value**: `none`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |   IE    |
+     * | :----: | :-----: | :----: | :----: | :-----: |
+     * | **1**  |  **1**  | **1**  | **12** | **5.5** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/border-right-style
+     */
+    borderRightStyle?: CSS.Property.BorderRightStyle | string;
+    /**
+     * The **`border-left-style`** CSS property sets the line style of an element's left `border`.
+     *
+     * **Initial value**: `none`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |   IE    |
+     * | :----: | :-----: | :----: | :----: | :-----: |
+     * | **1**  |  **1**  | **1**  | **12** | **5.5** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/border-left-style
+     */
+    borderLeftStyle?: CSS.Property.BorderLeftStyle | string;
+    /**
+     * 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.
+     *
+     * | Chrome  | Firefox | Safari  |  Edge  |  IE   |
+     * | :-----: | :-----: | :-----: | :----: | :---: |
+     * |  **4**  |  **4**  |  **5**  | **12** | **9** |
+     * | 1 _-x-_ |         | 3 _-x-_ |        |       |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/border-radius
+     */
+    borderRadius?: CSS.Property.BorderRadius<string | number>;
+    /**
+     * 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.
+     *
+     * **Initial value**: `auto`
+     *
+     * | Chrome | Firefox | Safari |  Edge  |  IE   |
+     * | :----: | :-----: | :----: | :----: | :---: |
+     * | **1**  |  **1**  | **1**  | **12** | **4** |
+     *
+     * @see https://developer.mozilla.org/docs/Web/CSS/z-index
+     */
+    zIndex?: CSS.Property.ZIndex | string;
+}
 /**
@@ -46,7 +426,6 @@ * Map of all available CSS properties (including aliases and overwrites)
  */
-export interface ThemeUIExtendedCSSProperties extends Omit<CSSProperties, keyof ScalesCSSProperties>, AliasesCSSProperties, MultiplesCSSProperties, ScalesCSSProperties {
+export interface ThemeUIExtendedCSSProperties extends Omit<CSSProperties, keyof OverwriteCSSProperties>, AliasesCSSProperties, OverwriteCSSProperties {
 }
-export declare type DerivedStylePropertyValue<T> = (theme: Theme) => ResponsiveStyleValue<Exclude<T, undefined>> | undefined;
 declare type ThemeUIStyleValue<T> = ResponsiveStyleValue<T | ObjectWithDefault<T> | T[]>;
-export declare type StylePropertyValue<T> = ThemeUIStyleValue<Exclude<T, undefined>> | ((theme: Theme) => ThemeUIStyleValue<Exclude<T, undefined>> | undefined) | ThemeUIStyleObject | ThemeUIEmpty;
+export declare type StylePropertyValue<T> = ThemeUIStyleValue<Exclude<T, undefined>> | ((theme: Theme) => ThemeUIStyleValue<Exclude<T, undefined>> | undefined) | ThemeUIStyleObject | Empty;
 export declare type ThemeUICSSProperties = {
@@ -86,3 +465,3 @@ [K in keyof ThemeUIExtendedCSSProperties]: StylePropertyValue<ThemeUIExtendedCSSProperties[K]>;
 export interface CSSOthersObject {
-    [k: string]: StylePropertyValue<string | number | ThemeUIEmpty>;
+    [k: string]: StylePropertyValue<string | number>;
 }
@@ -99,4 +478,4 @@ export interface ThemeUICSSObject extends ThemeUICSSProperties, CSSPseudoSelectorProps, CSSOthersObject, VariantProperty, Label {
 export interface ScaleDict<T> {
-    [K: string]: T | NestedScale<T> | ThemeUIEmpty;
-    [I: number]: T | ThemeUIEmpty;
+    [K: string]: T | T[] | NestedScaleDict<T> | undefined;
+    [I: number]: T;
 }
@@ -125,8 +504,5 @@ export interface ObjectWithDefault<T> {
  */
-export declare type Scale<T> = (T | ThemeUIEmpty)[] | ScaleDict<T | ThemeUIEmpty>;
+export declare type Scale<T> = T[] | ScaleDict<T>;
 export declare type NestedScale<T> = T[] | NestedScaleDict<T>;
-export declare namespace ColorMode {
-    type ColorValue = CSS.Property.Color;
-    type ColorOrNestedScale = ColorValue | NestedScale<ColorValue> | ThemeUIEmpty;
-}
+export declare type ColorOrNestedColorScale = CSS.Property.Color | NestedScale<CSS.Property.Color>;
 /**
@@ -136,27 +512,27 @@ * Color modes can be used to create a user-configurable dark mode
  */
-export interface ColorMode extends ScaleDict<ColorMode.ColorValue> {
+export interface ColorMode extends ScaleDict<CSS.Property.Color> {
     /**
      * Body background color
      */
-    background?: ColorMode.ColorOrNestedScale;
+    background?: ColorOrNestedColorScale;
     /**
      * Body foreground color
      */
-    text?: ColorMode.ColorOrNestedScale;
+    text?: ColorOrNestedColorScale;
     /**
      * Primary brand color for links, buttons, etc.
      */
-    primary?: ColorMode.ColorOrNestedScale;
+    primary?: ColorOrNestedColorScale;
     /**
      * A secondary brand color for alternative styling
      */
-    secondary?: ColorMode.ColorOrNestedScale;
+    secondary?: ColorOrNestedColorScale;
     /**
      * A contrast color for emphasizing UI
      */
-    accent?: ColorMode.ColorOrNestedScale;
+    accent?: ColorOrNestedColorScale;
     /**
      * A background color for highlighting text
      */
-    highlight?: ColorMode.ColorOrNestedScale;
+    highlight?: ColorOrNestedColorScale;
     /**
@@ -166,3 +542,3 @@ * A faint color for backgrounds, borders, and accents that do not require
      */
-    muted?: ColorMode.ColorOrNestedScale;
+    muted?: ColorOrNestedColorScale;
 }
@@ -210,3 +586,3 @@ export declare type ColorModesScale = ColorMode & {
 }
-export interface BaseTheme {
+export interface Theme {
     breakpoints?: Array<string>;
@@ -222,5 +598,5 @@ mediaQueries?: {
     letterSpacings?: Scale<CSS.Property.LetterSpacing<TLengthStyledSystem>>;
-    sizes?: Scale<CSS.Property.Height<number> | CSS.Property.Width<number>>;
-    borders?: Scale<CSS.Property.Border>;
-    borderStyles?: Scale<CSS.Property.Border>;
+    sizes?: Scale<CSS.Property.Height<{}> | CSS.Property.Width<{}>>;
+    borders?: Scale<CSS.Property.Border<{}>>;
+    borderStyles?: Scale<CSS.Property.Border<{}>>;
     borderWidths?: Scale<CSS.Property.BorderWidth<TLengthStyledSystem>>;
@@ -272,15 +648,2 @@ radii?: Scale<CSS.Property.BorderRadius<TLengthStyledSystem>>;
     /**
-     * Other options
-     */
-    options?: {
-        strictMode?: {
-            /**
-             * If false, (string & {}) is accepted as style value.
-             * If true, all values need to be taken from scales.
-             * @default false
-             */
-            noStrings?: boolean;
-        };
-    };
-    /**
      * Define the colors that are available through this theme
@@ -290,2 +653,9 @@ */
     /**
+     * Colors are transformed into CSS custom properties.
+     *
+     * If you need to read their raw values to pass them somewhere where CSS
+     * custom properties are not supported, use `rawColors`.
+     */
+    rawColors?: ColorModesScale;
+    /**
      * Styles for elements rendered in MDX can be added to the theme.styles
@@ -422,1 +792,2 @@ * object. This is the primary, low-level way to control typographic and
 }
+export {};

package.json

 {
   "name": "@theme-ui/css",
-  "version": "0.6.0-canary.c5a716a.0",
+  "version": "0.6.0-canary.d8b715d.0",
   "source": "src/index.ts",
@@ -21,6 +21,5 @@ "main": "dist/index.js",
     "@emotion/react": "^11.1.1",
-    "csstype": "^3.0.5",
-    "ts-toolbelt": "^8.0.7"
+    "csstype": "^3.0.5"
   },
-  "gitHead": "df2c70ae4a780c9eb941ac9740a5ec91812ebbec"
+  "gitHead": "d8b715da41fc747f6084060340dcaf530ba43b95"
 }

src/index.ts

 import {
   CSSObject,
   ThemeUIStyleObject,
+  ThemeDerivedStyles,
+  Theme,
   ThemeUICSSObject,
-  Theme,
-  ResponsiveStyleTuple,
-  DerivedStylePropertyValue,
-  ObjectWithDefault,
 } from './types'
-import { scales, Scales } from './scales'
-import { multiples } from './multiples'
-import { Aliases, aliases } from './aliases'
 
-export { scales } from './scales'
-export type { Scales } from './scales'
-
 export * from './types'
-export * from './exact-theme'
 export { __internalGetUseRootStyles } from './options'
@@ -32,5 +23,7 @@
  */
-export const THEME_UI_DEFAULT_KEY: keyof ObjectWithDefault<never> = '__default'
+export const THEME_UI_DEFAULT_KEY = '__default'
 
-const hasDefault = (x: unknown): x is ObjectWithDefault<unknown> => {
+const hasDefault = (
+  x: unknown
+): x is { [THEME_UI_DEFAULT_KEY]: string | number } => {
   return typeof x === 'object' && x !== null && THEME_UI_DEFAULT_KEY in x
@@ -65,8 +58,5 @@ }
 
-export const getObjectWithVariants = (
-  obj: ThemeUICSSObject,
-  theme: Theme
-): ThemeUICSSObject => {
+export const getObjectWithVariants = (obj: any, theme: Theme): CSSObject => {
   if (obj && obj['variant']) {
-    let result: ThemeUICSSObject = {}
+    let result: CSSObject = {}
     for (const key in obj) {
@@ -79,3 +69,3 @@ const x = obj[key]
       } else {
-        result[key] = x
+        result[key] = x as CSSObject
       }
@@ -85,3 +75,3 @@ }
   }
-  return obj
+  return obj as CSSObject
 }
@@ -96,2 +86,164 @@
 
+const aliases = {
+  bg: 'backgroundColor',
+  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',
+} as const
+type Aliases = typeof aliases
+
+export const multiples = {
+  marginX: ['marginLeft', 'marginRight'],
+  marginY: ['marginTop', 'marginBottom'],
+  paddingX: ['paddingLeft', 'paddingRight'],
+  paddingY: ['paddingTop', 'paddingBottom'],
+  scrollPaddingX: ['scrollPaddingLeft', 'scrollPaddingRight'],
+  scrollPaddingY: ['scrollPaddingTop', 'scrollPaddingBottom'],
+  size: ['width', 'height'],
+}
+
+export const scales = {
+  color: 'colors',
+  backgroundColor: 'colors',
+  borderColor: 'colors',
+  caretColor: 'colors',
+  columnRuleColor: 'colors',
+  opacity: 'opacities',
+  transition: 'transitions',
+  margin: 'space',
+  marginTop: 'space',
+  marginRight: 'space',
+  marginBottom: 'space',
+  marginLeft: 'space',
+  marginX: 'space',
+  marginY: 'space',
+  marginBlock: 'space',
+  marginBlockEnd: 'space',
+  marginBlockStart: 'space',
+  marginInline: 'space',
+  marginInlineEnd: 'space',
+  marginInlineStart: 'space',
+  padding: 'space',
+  paddingTop: 'space',
+  paddingRight: 'space',
+  paddingBottom: 'space',
+  paddingLeft: 'space',
+  paddingX: 'space',
+  paddingY: 'space',
+  paddingBlock: 'space',
+  paddingBlockEnd: 'space',
+  paddingBlockStart: 'space',
+  paddingInline: 'space',
+  paddingInlineEnd: 'space',
+  paddingInlineStart: 'space',
+  scrollPadding: 'space',
+  scrollPaddingTop: 'space',
+  scrollPaddingRight: 'space',
+  scrollPaddingBottom: 'space',
+  scrollPaddingLeft: 'space',
+  scrollPaddingX: 'space',
+  scrollPaddingY: 'space',
+  inset: 'space',
+  insetBlock: 'space',
+  insetBlockEnd: 'space',
+  insetBlockStart: 'space',
+  insetInline: 'space',
+  insetInlineEnd: 'space',
+  insetInlineStart: 'space',
+  top: 'space',
+  right: 'space',
+  bottom: 'space',
+  left: 'space',
+  gridGap: 'space',
+  gridColumnGap: 'space',
+  gridRowGap: 'space',
+  gap: 'space',
+  columnGap: 'space',
+  rowGap: 'space',
+  fontFamily: 'fonts',
+  fontSize: 'fontSizes',
+  fontWeight: 'fontWeights',
+  lineHeight: 'lineHeights',
+  letterSpacing: 'letterSpacings',
+  border: 'borders',
+  borderTop: 'borders',
+  borderRight: 'borders',
+  borderBottom: 'borders',
+  borderLeft: 'borders',
+  borderWidth: 'borderWidths',
+  borderStyle: 'borderStyles',
+  borderRadius: 'radii',
+  borderTopRightRadius: 'radii',
+  borderTopLeftRadius: 'radii',
+  borderBottomRightRadius: 'radii',
+  borderBottomLeftRadius: 'radii',
+  borderTopWidth: 'borderWidths',
+  borderTopColor: 'colors',
+  borderTopStyle: 'borderStyles',
+  borderBottomWidth: 'borderWidths',
+  borderBottomColor: 'colors',
+  borderBottomStyle: 'borderStyles',
+  borderLeftWidth: 'borderWidths',
+  borderLeftColor: 'colors',
+  borderLeftStyle: 'borderStyles',
+  borderRightWidth: 'borderWidths',
+  borderRightColor: 'colors',
+  borderRightStyle: 'borderStyles',
+  borderBlock: 'borders',
+  borderBlockEnd: 'borders',
+  borderBlockEndStyle: 'borderStyles',
+  borderBlockEndWidth: 'borderWidths',
+  borderBlockStart: 'borders',
+  borderBlockStartStyle: 'borderStyles',
+  borderBlockStartWidth: 'borderWidths',
+  borderBlockStyle: 'borderStyles',
+  borderBlockWidth: 'borderWidths',
+  borderEndEndRadius: 'radii',
+  borderEndStartRadius: 'radii',
+  borderInline: 'borders',
+  borderInlineEnd: 'borders',
+  borderInlineEndStyle: 'borderStyles',
+  borderInlineEndWidth: 'borderWidths',
+  borderInlineStart: 'borders',
+  borderInlineStartStyle: 'borderStyles',
+  borderInlineStartWidth: 'borderWidths',
+  borderInlineStyle: 'borderStyles',
+  borderInlineWidth: 'borderWidths',
+  borderStartEndRadius: 'radii',
+  borderStartStartRadius: 'radii',
+  outlineColor: 'colors',
+  boxShadow: 'shadows',
+  textShadow: 'shadows',
+  zIndex: 'zIndices',
+  width: 'sizes',
+  minWidth: 'sizes',
+  maxWidth: 'sizes',
+  height: 'sizes',
+  minHeight: 'sizes',
+  maxHeight: 'sizes',
+  flexBasis: 'sizes',
+  size: 'sizes',
+  blockSize: 'sizes',
+  inlineSize: 'sizes',
+  maxBlockSize: 'sizes',
+  maxInlineSize: 'sizes',
+  minBlockSize: 'sizes',
+  minInlineSize: 'sizes',
+  // svg
+  fill: 'colors',
+  stroke: 'colors',
+} as const
+type Scales = typeof scales
+
 const positiveOrNegative = (scale: object, value: string | number) => {
@@ -138,20 +290,6 @@ if (typeof value !== 'number' || value >= 0) {
 
-type StyleObjectWithoutTuples = {
-  [P in keyof ThemeUICSSObject]:
-    | Exclude<
-        ThemeUICSSObject[P],
-        ResponsiveStyleTuple<any> | DerivedStylePropertyValue<any>
-      >
-    | ((theme: Theme) => string | number | null | false)
-}
-
-/**
- * transform functions (satyles derived from theme) into their values
- * and transforms responsive style tuples into media queries
- */
-function responsive(
-  styles: ThemeUICSSObject,
-  theme: Theme
-): StyleObjectWithoutTuples {
-  const next: StyleObjectWithoutTuples = {}
+const responsive = (
+  styles: Exclude<ThemeUIStyleObject, ThemeDerivedStyles>
+) => (theme?: Theme) => {
+  const next: Exclude<ThemeUIStyleObject, ThemeDerivedStyles> = {}
   const breakpoints =
@@ -168,3 +306,3 @@ (theme && (theme.breakpoints as string[])) || defaultBreakpoints
     if (typeof value === 'function') {
-      value = value(theme)
+      value = value(theme || {})
     }
@@ -182,3 +320,3 @@
       if (!media) {
-        next[key] = value[i] as Exclude<typeof value[0], any[]>
+        next[key] = value[i]
         continue
@@ -194,3 +332,3 @@ }
 
-type CssPropsArgument = { theme?: Theme } | Theme
+type CssPropsArgument = { theme: Theme } | Theme
 
@@ -200,6 +338,6 @@ export const css = (args: ThemeUIStyleObject = {}) => (
 ): CSSObject => {
-  const theme = {
+  const theme: Theme = {
     ...defaultTheme,
     ...('theme' in props ? props.theme : props),
-  } as Theme
+  }
   // insert variant props before responsive styles, so they can be merged
@@ -209,3 +347,3 @@ // we need to maintain order of the style props, so if a variant is place in the middle
 
-  const obj = getObjectWithVariants(
+  const obj: CSSObject = getObjectWithVariants(
     typeof args === 'function' ? args(theme) : args,
@@ -215,12 +353,6 @@ theme
 
-  const styles = responsive(obj, theme)
+  const styles = responsive(obj as ThemeUICSSObject)(theme)
   let result: CSSObject = {}
-
   for (const key in styles) {
     const x = styles[key as keyof typeof styles]
-
-    if (x === false || x == null) {
-      continue
-    }
-
     const val = typeof x === 'function' ? x(theme) : x
@@ -231,6 +363,8 @@
         result[key] = val[THEME_UI_DEFAULT_KEY]
-      } else {
-        result[key] = css(val)(theme)
+        continue
       }
 
+      // On type level, val can also be an array here,
+      // but we transform all arrays in `responsive` function.
+      result[key] = css(val as ThemeUICSSObject)(theme)
       continue
@@ -237,0 +371,0 @@ }

src/options.ts

@@ -1,2 +0,2 @@
-import { BaseTheme } from './types'
+import { Theme } from './types'
 
@@ -7,3 +7,3 @@ /**
  */
-export function __internalGetUseRootStyles(theme: BaseTheme = {}) {
+export function __internalGetUseRootStyles(theme: Theme = {}) {
   const { useRootStyles, useBodyStyles } = theme
@@ -10,0 +10,0 @@ const root = 'useRootStyles' in theme && useRootStyles != null

src/types.ts

@@ -1,14 +0,9 @@
-import type * as CSS from 'csstype'
-import type { AliasesCSSProperties } from './aliases'
-import type { ScalesCSSProperties } from './scales'
-import type { MultiplesCSSProperties } from './multiples'
+import * as CSS from 'csstype'
 
 import type {} from '../emotion-theme'
 
-export type { CSSObject } from '@emotion/react'
+type StandardCSSProperties = CSS.Properties<number | string>
 
-export type ThemeUIEmpty = undefined | null | false
+type Empty = undefined | null | false
 
-export interface ResponsiveStyleTuple<T> extends Array<T | ThemeUIEmpty> {}
-
 /**
@@ -21,6 +16,3 @@ * The `css` function accepts arrays as values for mobile-first responsive styles.
  */
-export type ResponsiveStyleValue<T> =
-  | T
-  | ThemeUIEmpty
-  | ResponsiveStyleTuple<T | ThemeUIEmpty>
+export type ResponsiveStyleValue<T> = T | Empty | Array<T | Empty>
 
@@ -42,17 +34,407 @@ /**
 /**
- * Can be augmented by users to inject their exact theme into Theme UI types.
- * @see TODO LINK TO THE DOCS
+ * CSS as POJO that is compatible with CSS-in-JS libaries.
+ * Copied directly from [emotion](https://github.com/emotion-js/emotion/blob/ca3ad1c1dcabf78a95b55cc2dc94cad1998a3196/packages/serialize/types/index.d.ts#L45) types
  */
-export interface UserTheme {}
+export interface CSSObject
+  extends CSSPropertiesWithMultiValues,
+    CSSPseudosForCSSObject,
+    CSSOthersObjectForCSSObject {}
 
-export interface Theme extends Assign<BaseTheme, UserTheme> {}
+type CSSPropertiesWithMultiValues = {
+  [K in keyof CSSProperties]: CSSProperties[K]
+}
+type CSSPseudosForCSSObject = { [K in CSS.Pseudos]?: CSSObject }
+type CSSInterpolation = undefined | number | string | CSSObject
+interface CSSOthersObjectForCSSObject {
+  [propertiesName: string]: CSSInterpolation
+}
 
-export type Assign<T, U> = {
-  [P in keyof (T & U)]: P extends keyof U
-    ? U[P]
-    : P extends keyof T
-    ? T[P]
-    : never
+interface AliasesCSSProperties {
+  /**
+   * The **`background-color`** CSS property sets the background color of an element.
+   *
+   * **Initial value**: `transparent`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **4** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/background-color
+   */
+  bg?: StandardCSSProperties['backgroundColor']
+  /**
+   * The **`margin`** CSS property sets the margin area on all four sides of an element. It is a shorthand for `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`.
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **3** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/margin
+   */
+  m?: StandardCSSProperties['margin']
+  /**
+   * The **`margin-top`** CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+   *
+   * **Initial value**: `0`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **3** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
+   */
+  mt?: StandardCSSProperties['marginTop']
+  /**
+   * The **`margin-right`** CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+   *
+   * **Initial value**: `0`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **3** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
+   */
+  mr?: StandardCSSProperties['marginRight']
+  /**
+   * The **`margin-bottom`** CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+   *
+   * **Initial value**: `0`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **3** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
+   */
+  mb?: StandardCSSProperties['marginBottom']
+  /**
+   * The **`margin-left`** CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
+   *
+   * **Initial value**: `0`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **3** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
+   */
+  ml?: StandardCSSProperties['marginLeft']
+  /**
+   * The **`mx`** is shorthand for using both **`margin-left`** and **`margin-right`** CSS properties. They set the margin area on the left and right side of an element. A positive value placesit
+   * farther from its neighbors, while a negative value places it closer.
+   *
+   * **Initial value**: `0`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **3** |
+   *
+   * @see https://styled-system.com/#margin-props
+   * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
+   * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
+   */
+  mx?: StandardCSSProperties['marginLeft']
+  /**
+   * The **`marginX`** is shorthand for using both **`margin-left`** and **`margin-right`** CSS properties. They set the margin area on the left and right side of an element. A positive value
+   * places it farther from its neighbors, while a negative value places it closer.
+   *
+   * **Initial value**: `0`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **3** |
+   *
+   * @see https://styled-system.com/#margin-props
+   * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
+   * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
+   */
+  marginX?: StandardCSSProperties['marginLeft']
+  /**
+   * The **`my`** is shorthard for using both **`margin-top`** and **`margin-bottom`** CSS properties. They set the margin area on the top and bottom of an element. A positive value places it
+   * farther from its neighbors, while a negative value places it closer.
+   *
+   * **Initial value**: `0`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **3** |
+   *
+   * @see https://styled-system.com/#margin-props
+   * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
+   * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
+   */
+  my?: StandardCSSProperties['marginTop']
+  /**
+   * The **`marginY`** is shorthard for using both **`margin-top`** and **`margin-bottom`** CSS properties. They set the margin area on the top and bottom of an element. A positive value places
+   * it farther from its neighbors, while a negative value places it closer.
+   *
+   * **Initial value**: `0`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **3** |
+   *
+   * @see https://styled-system.com/#margin-props
+   * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
+   * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
+   */
+  marginY?: StandardCSSProperties['marginTop']
+  /**
+   * The **`padding`** CSS property sets the padding area on all four sides of an element. It is a shorthand for `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`.
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **4** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/padding
+   */
+  p?: StandardCSSProperties['padding']
+  /**
+   * The **`padding-top`** padding area on the top of an element.
+   *
+   * **Initial value**: `0`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **4** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
+   */
+  pt?: StandardCSSProperties['paddingTop']
+  /**
+   * The **`padding-right`** CSS property sets the width of the padding area on the right side of an element.
+   *
+   * **Initial value**: `0`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **4** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
+   */
+  pr?: StandardCSSProperties['paddingRight']
+  /**
+   * The **`padding-bottom`** CSS property sets the height of the padding area on the bottom of an element.
+   *
+   * **Initial value**: `0`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **4** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
+   */
+  pb?: StandardCSSProperties['paddingBottom']
+  /**
+   * The **`padding-left`** CSS property sets the width of the padding area on the left side of an element.
+   *
+   * **Initial value**: `0`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **4** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
+   */
+  pl?: StandardCSSProperties['paddingLeft']
+  /**
+   * The **`px`** is shorthand property for CSS properties **`padding-left`** and **`padding-right`**. They set the width of the padding area on the left and right side of an element.
+   *
+   * **Initial value**: `0`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **4** |
+   *
+   * @see https://styled-system.com/#padding-props
+   * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
+   * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
+   */
+  px?: StandardCSSProperties['paddingLeft']
+  /**
+   * The **`paddingX`** is shorthand property for CSS properties **`padding-left`** and **`padding-right`**. They set the width of the padding area on the left and right side of an element.
+   *
+   * **Initial value**: `0`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **4** |
+   *
+   * @see https://styled-system.com/#padding-props
+   * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
+   * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
+   */
+  paddingX?: StandardCSSProperties['paddingLeft']
+  /**
+   * The **`py`** is shorthand property for CSS properties **`padding-top`** and **`padding-bottom`**. They set the width of the padding area on the top and bottom of an element.
+   *
+   * **Initial value**: `0`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **4** |
+   *
+   * @see https://styled-system.com/#padding-props
+   * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
+   * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
+   */
+  py?: StandardCSSProperties['paddingTop']
+  /**
+   * The **`paddingY`** is shorthand property for CSS properties **`padding-top`** and **`padding-bottom`**. They set the width of the padding area on the top and bottom of an element.
+   *
+   * **Initial value**: `0`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **4** |
+   *
+   * @see https://styled-system.com/#padding-props
+   * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
+   * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
+   */
+  paddingY?: StandardCSSProperties['paddingTop']
+  // TODO: Move me to `MultiplesCSSProperties type and colocate it with the
+  // multiples object possibly.
+  /**
+   * The **`size`** is a shorthand property for CSS properties **`width`** and **`height`**.
+   *
+   * @see https://theme-ui.com/sx-prop#theme-aware-properties
+   * @see https://developer.mozilla.org/docs/Web/CSS/width
+   * @see https://developer.mozilla.org/docs/Web/CSS/height
+   */
+
+  /**
+   * 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
+   */
+  scrollPaddingY?: StandardCSSProperties['scrollPaddingTop']
+  size?: StandardCSSProperties['width']
 }
 
+interface OverwriteCSSProperties {
+  /**
+   * The **`box-shadow`** CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the
+   * element, blur and spread radii, and color.
+   *
+   * **Initial value**: `none`
+   *
+   * | Chrome  | Firefox | Safari  |  Edge  |  IE   |
+   * | :-----: | :-----: | :-----: | :----: | :---: |
+   * | **10**  |  **4**  | **5.1** | **12** | **9** |
+   * | 1 _-x-_ |         | 3 _-x-_ |        |       |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/box-shadow
+   */
+  boxShadow?: CSS.Property.BoxShadow | number
+  /**
+   * 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
+   * available in `normal` and `bold`.
+   *
+   * **Initial value**: `normal`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **2**  |  **1**  | **1**  | **12** | **3** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/font-weight
+   */
+  fontWeight?: CSS.Property.FontWeight | string
+
+  /**
+   * The **`border-top-style`** CSS property sets the line style of an element's top `border`.
+   *
+   * **Initial value**: `none`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |   IE    |
+   * | :----: | :-----: | :----: | :----: | :-----: |
+   * | **1**  |  **1**  | **1**  | **12** | **5.5** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/border-top-style
+   */
+  borderTopStyle?: CSS.Property.BorderTopStyle | string
+  /**
+   * The **`border-top-width`** CSS property sets the width of the top border of an element.
+   *
+   * **Initial value**: `medium`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **4** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/border-top-width
+   */
+  borderTopWidth?: CSS.Property.BorderTopWidth<never> | string
+  /**
+   * The **`border-bottom-style`** CSS property sets the line style of an element's bottom `border`.
+   *
+   * **Initial value**: `none`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |   IE    |
+   * | :----: | :-----: | :----: | :----: | :-----: |
+   * | **1**  |  **1**  | **1**  | **12** | **5.5** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-style
+   */
+  borderBottomStyle?: CSS.Property.BorderBottomStyle | string
+  /**
+   * The **`border-right-style`** CSS property sets the line style of an element's right `border`.
+   *
+   * **Initial value**: `none`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |   IE    |
+   * | :----: | :-----: | :----: | :----: | :-----: |
+   * | **1**  |  **1**  | **1**  | **12** | **5.5** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/border-right-style
+   */
+  borderRightStyle?: CSS.Property.BorderRightStyle | string
+  /**
+   * The **`border-left-style`** CSS property sets the line style of an element's left `border`.
+   *
+   * **Initial value**: `none`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |   IE    |
+   * | :----: | :-----: | :----: | :----: | :-----: |
+   * | **1**  |  **1**  | **1**  | **12** | **5.5** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/border-left-style
+   */
+  borderLeftStyle?: CSS.Property.BorderLeftStyle | string
+  /**
+   * 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.
+   *
+   * | Chrome  | Firefox | Safari  |  Edge  |  IE   |
+   * | :-----: | :-----: | :-----: | :----: | :---: |
+   * |  **4**  |  **4**  |  **5**  | **12** | **9** |
+   * | 1 _-x-_ |         | 3 _-x-_ |        |       |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/border-radius
+   */
+  borderRadius?: CSS.Property.BorderRadius<string | number>
+
+  /**
+   * 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.
+   *
+   * **Initial value**: `auto`
+   *
+   * | Chrome | Firefox | Safari |  Edge  |  IE   |
+   * | :----: | :-----: | :----: | :----: | :---: |
+   * | **1**  |  **1**  | **1**  | **12** | **4** |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/z-index
+   */
+  zIndex?: CSS.Property.ZIndex | string
+}
+
 /**
@@ -63,11 +445,6 @@ * Map of all available CSS properties (including aliases and overwrites)
 export interface ThemeUIExtendedCSSProperties
-  extends Omit<CSSProperties, keyof ScalesCSSProperties>,
+  extends Omit<CSSProperties, keyof OverwriteCSSProperties>,
     AliasesCSSProperties,
-    MultiplesCSSProperties,
-    ScalesCSSProperties {}
+    OverwriteCSSProperties {}
 
-export type DerivedStylePropertyValue<T> = (
-  theme: Theme
-) => ResponsiveStyleValue<Exclude<T, undefined>> | undefined
-
 type ThemeUIStyleValue<T> = ResponsiveStyleValue<T | ObjectWithDefault<T> | T[]>
@@ -79,3 +456,3 @@
   | ThemeUIStyleObject
-  | ThemeUIEmpty
+  | Empty
 
@@ -125,3 +502,3 @@ export type ThemeUICSSProperties = {
   // so as a side-effect we allow unknown CSS properties (Emotion does too)
-  [k: string]: StylePropertyValue<string | number | ThemeUIEmpty>
+  [k: string]: StylePropertyValue<string | number>
 }
@@ -146,4 +523,4 @@
 export interface ScaleDict<T> {
-  [K: string]: T | NestedScale<T> | ThemeUIEmpty
-  [I: number]: T | ThemeUIEmpty
+  [K: string]: T | T[] | NestedScaleDict<T> | undefined
+  [I: number]: T
 }
@@ -176,17 +553,9 @@
  */
-export type Scale<T> = (T | ThemeUIEmpty)[] | ScaleDict<T | ThemeUIEmpty>
+export type Scale<T> = T[] | ScaleDict<T>
 
 export type NestedScale<T> = T[] | NestedScaleDict<T>
 
-export declare namespace ColorMode {
-  // We won't autocomplete "mediumseagreen" inside of `sx` prop, because
-  // csstype's Property.Color is a huge union of literals you didn't include
-  // in your theme. That would be a tiny sabotage, right?
-  // Nevertheless, it's convenient to have them inside of the colors scale.
-  export type ColorValue = CSS.Property.Color
-  export type ColorOrNestedScale =
-    | ColorValue
-    | NestedScale<ColorValue>
-    | ThemeUIEmpty
-}
+export type ColorOrNestedColorScale =
+  | CSS.Property.Color
+  | NestedScale<CSS.Property.Color>
 
@@ -197,7 +566,7 @@ /**
  */
-export interface ColorMode extends ScaleDict<ColorMode.ColorValue> {
+export interface ColorMode extends ScaleDict<CSS.Property.Color> {
   /**
    * Body background color
    */
-  background?: ColorMode.ColorOrNestedScale
+  background?: ColorOrNestedColorScale
 
@@ -207,3 +576,3 @@ /**
    */
-  text?: ColorMode.ColorOrNestedScale
+  text?: ColorOrNestedColorScale
 
@@ -213,3 +582,3 @@ /**
    */
-  primary?: ColorMode.ColorOrNestedScale
+  primary?: ColorOrNestedColorScale
 
@@ -219,3 +588,3 @@ /**
    */
-  secondary?: ColorMode.ColorOrNestedScale
+  secondary?: ColorOrNestedColorScale
 
@@ -225,3 +594,3 @@ /**
    */
-  accent?: ColorMode.ColorOrNestedScale
+  accent?: ColorOrNestedColorScale
 
@@ -231,3 +600,3 @@ /**
    */
-  highlight?: ColorMode.ColorOrNestedScale
+  highlight?: ColorOrNestedColorScale
 
@@ -238,3 +607,3 @@ /**
    */
-  muted?: ColorMode.ColorOrNestedScale
+  muted?: ColorOrNestedColorScale
 }
@@ -285,3 +654,3 @@
 
-export interface BaseTheme {
+export interface Theme {
   breakpoints?: Array<string>
@@ -295,5 +664,5 @@ mediaQueries?: { [size: string]: string }
   letterSpacings?: Scale<CSS.Property.LetterSpacing<TLengthStyledSystem>>
-  sizes?: Scale<CSS.Property.Height<number> | CSS.Property.Width<number>>
-  borders?: Scale<CSS.Property.Border>
-  borderStyles?: Scale<CSS.Property.Border>
+  sizes?: Scale<CSS.Property.Height<{}> | CSS.Property.Width<{}>>
+  borders?: Scale<CSS.Property.Border<{}>>
+  borderStyles?: Scale<CSS.Property.Border<{}>>
   borderWidths?: Scale<CSS.Property.BorderWidth<TLengthStyledSystem>>
@@ -354,19 +723,13 @@ radii?: Scale<CSS.Property.BorderRadius<TLengthStyledSystem>>
   /**
-   * Other options
+   * Define the colors that are available through this theme
    */
-  options?: {
-    strictMode?: {
-      /**
-       * If false, (string & {}) is accepted as style value.
-       * If true, all values need to be taken from scales.
-       * @default false
-       */
-      noStrings?: boolean
-    }
-  }
+  colors?: ColorModesScale
 
   /**
-   * Define the colors that are available through this theme
+   * Colors are transformed into CSS custom properties.
+   *
+   * If you need to read their raw values to pass them somewhere where CSS
+   * custom properties are not supported, use `rawColors`.
    */
-  colors?: ColorModesScale
+  rawColors?: ColorModesScale
 
@@ -373,0 +736,0 @@ /**

test/errors-and-inference.ts

@@ -54,14 +54,11 @@ import { expecter } from '@theme-ui/test-utils'
     expectSnippet(`
-      import { get, BaseTheme } from 'theme-ui'
+      import { get } from 'theme-ui'
 
       css({
         p: t => {
-          const inferred = t
-
-          const assignableToTheme: BaseTheme = t
-
+          const theme = t;
           return get(t, 'sizes.5')
         }
       })
-    `).toInfer('inferred', 'Theme')
+    `).toInfer('theme', 'Theme')
   })
@@ -102,4 +99,3 @@
 
-    const parse = (x: string | number | null | undefined | {}) =>
-      parseInt(String(x))
+    const parse = (x: string | number | undefined | {}) => parseInt(String(x))
     css({
@@ -145,3 +141,3 @@ size: (t) => parse(t.space?.[3]) + parse(t.sizes?.[5]),
   const expectedSnippet = expectSnippet(`
-    import { ColorMode, ThemeUIEmpty } from './packages/css/src'
+    import { ColorMode } from './packages/css/src'
 
@@ -148,0 +144,0 @@ const colorMode: ColorMode = {}

test/index.ts

@@ -1,2 +0,2 @@
-import { BaseTheme, css, NestedScaleDict, Theme } from '../src'
+import { css, NestedScale, NestedScaleDict, Theme } from '../src'
 
@@ -650,2 +650,3 @@ const theme: Theme = {
     'flexDirection',
+    'justifyContent',
     '@media screen and (min-width: 40em)',
@@ -670,14 +671,2 @@ '@media screen and (min-width: 52em)',
 test('omits empty values', () => {
-  const theme: BaseTheme = {
-    colors: {
-      gray: {
-        50: 'rgb(8, 8, 8)',
-        75: 'rgb(26, 26, 26)',
-        100: 'rgb(30, 30, 30),',
-        150: null as null,
-        200: undefined as undefined,
-      },
-    },
-  }
-
   expect(
@@ -684,0 +673,0 @@ css({

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Dependency count

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

243815

decreased by-71.15%

Number of package files

23

decreased by-67.14%

Lines of code

4328

decreased by-51.13%

Dependency changes

• - Removedts-toolbelt@^8.0.7

• - Removedts-toolbelt@8.4.0(transitive)