@theme-ui/css - npm Package Compare versions

Comparing version 0.6.0-canary.1544.3ce24759664e3c638354903f9eebb194f2bae7ec.0 to 0.6.0-canary.c5a716a.0

dist/index.d.ts

@@ -1,3 +0,6 @@
-import { CSSObject, ThemeUIStyleObject, Theme } from './types';
+import { CSSObject, ThemeUIStyleObject, ThemeUICSSObject, Theme, ObjectWithDefault } from './types';
+export { scales } from './scales';
+export type { Scales } from './scales';
 export * from './types';
+export * from './exact-theme';
 export { __internalGetUseRootStyles } from './options';
@@ -15,3 +18,3 @@ /**
  */
-export declare const THEME_UI_DEFAULT_KEY = "__default";
+export declare const THEME_UI_DEFAULT_KEY: keyof ObjectWithDefault<never>;
 /**
@@ -27,146 +30,7 @@ * 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: any, theme: Theme) => CSSObject;
+export declare const getObjectWithVariants: (obj: ThemeUICSSObject, theme: Theme) => ThemeUICSSObject;
 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,4 +19,287 @@ 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.
@@ -105,159 +388,2 @@ */
 };
-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'
-};
 
@@ -288,45 +414,47 @@ var positiveOrNegative = function positiveOrNegative(scale, value) {
 }, {});
+/**
+ * transform functions (satyles derived from theme) into their values
+ * and transforms responsive style tuples into media queries
+ */
 
-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 + ")";
-    }));
+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 + ")";
+  }));
 
-    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;
+    if (!Array.isArray(value)) {
+      next[key] = value;
+      continue;
+    }
+
+    for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
+      var media = mediaQueries[i];
+
+      if (!media) {
+        next[key] = value[i];
         continue;
       }
 
-      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
-        var media = mediaQueries[i];
-
-        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;
+}
 
@@ -349,3 +477,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 = {};
@@ -355,2 +483,7 @@
       var x = styles[key];
+
+      if (x === false || x == null) {
+        continue;
+      }
+
       var val = typeof x === 'function' ? x(theme) : x;
@@ -361,8 +494,6 @@
           result[key] = val[THEME_UI_DEFAULT_KEY];
-          continue;
-        } // On type level, val can also be an array here,
-        // but we transform all arrays in `responsive` function.
+        } else {
+          result[key] = css(val)(theme);
+        }
 
-
-        result[key] = css(val)(theme);
         continue;
@@ -392,3 +523,3 @@ }
 
-export { THEME_UI_DEFAULT_KEY, __internalGetUseRootStyles, css, defaultBreakpoints, get, getObjectWithVariants, multiples, scales };
+export { THEME_UI_DEFAULT_KEY, __internalGetUseRootStyles, css, defaultBreakpoints, get, getObjectWithVariants, makeTheme, scales };
 //# sourceMappingURL=index.esm.js.map

dist/index.js

@@ -19,4 +19,287 @@ 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.
@@ -105,159 +388,2 @@ */
 };
-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'
-};
 
@@ -288,45 +414,47 @@ var positiveOrNegative = function positiveOrNegative(scale, value) {
 }, {});
+/**
+ * transform functions (satyles derived from theme) into their values
+ * and transforms responsive style tuples into media queries
+ */
 
-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 + ")";
-    }));
+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 + ")";
+  }));
 
-    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;
+    if (!Array.isArray(value)) {
+      next[key] = value;
+      continue;
+    }
+
+    for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
+      var media = mediaQueries[i];
+
+      if (!media) {
+        next[key] = value[i];
         continue;
       }
 
-      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
-        var media = mediaQueries[i];
-
-        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;
+}
 
@@ -349,3 +477,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 = {};
@@ -355,2 +483,7 @@
       var x = styles[key];
+
+      if (x === false || x == null) {
+        continue;
+      }
+
       var val = typeof x === 'function' ? x(theme) : x;
@@ -361,8 +494,6 @@
           result[key] = val[THEME_UI_DEFAULT_KEY];
-          continue;
-        } // On type level, val can also be an array here,
-        // but we transform all arrays in `responsive` function.
+        } else {
+          result[key] = css(val)(theme);
+        }
 
-
-        result[key] = css(val)(theme);
         continue;
@@ -398,4 +529,4 @@ }
 exports.getObjectWithVariants = getObjectWithVariants;
-exports.multiples = multiples;
+exports.makeTheme = makeTheme;
 exports.scales = scales;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

@@ -19,4 +19,242 @@ 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.
@@ -100,159 +338,2 @@ */
 };
-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'
-};
 
@@ -281,4 +362,8 @@ const positiveOrNegative = (scale, value) => {
 }), {});
+/**
+ * transform functions (satyles derived from theme) into their values
+ * and transforms responsive style tuples into media queries
+ */
 
-const responsive = styles => theme => {
+function responsive(styles, theme) {
   const next = {};
@@ -293,3 +378,3 @@ const breakpoints = theme && theme.breakpoints || defaultBreakpoints;
     if (typeof value === 'function') {
-      value = value(theme || {});
+      value = value(theme);
     }
@@ -321,3 +406,3 @@
   return next;
-};
+}
 
@@ -331,3 +416,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 = {};
@@ -337,2 +422,7 @@
     const x = styles[key];
+
+    if (x === false || x == null) {
+      continue;
+    }
+
     const val = typeof x === 'function' ? x(theme) : x;
@@ -343,8 +433,6 @@
         result[key] = val[THEME_UI_DEFAULT_KEY];
-        continue;
-      } // On type level, val can also be an array here,
-      // but we transform all arrays in `responsive` function.
+      } else {
+        result[key] = css(val)(theme);
+      }
 
-
-      result[key] = css(val)(theme);
       continue;
@@ -373,3 +461,3 @@ }
 
-export { THEME_UI_DEFAULT_KEY, __internalGetUseRootStyles, css, defaultBreakpoints, get, getObjectWithVariants, multiples, scales };
+export { THEME_UI_DEFAULT_KEY, __internalGetUseRootStyles, css, defaultBreakpoints, get, getObjectWithVariants, makeTheme, scales };
 //# sourceMappingURL=index.modern.js.map

dist/index.umd.js

@@ -24,4 +24,287 @@ (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.
@@ -110,159 +393,2 @@ */
   };
-  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'
-  };
 
@@ -293,45 +419,47 @@ var positiveOrNegative = function positiveOrNegative(scale, value) {
   }, {});
+  /**
+   * transform functions (satyles derived from theme) into their values
+   * and transforms responsive style tuples into media queries
+   */
 
-  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 + ")";
-      }));
+  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 + ")";
+    }));
 
-      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;
+      if (!Array.isArray(value)) {
+        next[key] = value;
+        continue;
+      }
+
+      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
+        var media = mediaQueries[i];
+
+        if (!media) {
+          next[key] = value[i];
           continue;
         }
 
-        for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
-          var media = mediaQueries[i];
-
-          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;
+  }
 
@@ -354,3 +482,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 = {};
@@ -360,2 +488,7 @@
         var x = styles[key];
+
+        if (x === false || x == null) {
+          continue;
+        }
+
         var val = typeof x === 'function' ? x(theme) : x;
@@ -366,8 +499,6 @@
             result[key] = val[THEME_UI_DEFAULT_KEY];
-            continue;
-          } // On type level, val can also be an array here,
-          // but we transform all arrays in `responsive` function.
+          } else {
+            result[key] = css(val)(theme);
+          }
 
-
-          result[key] = css(val)(theme);
           continue;
@@ -403,3 +534,3 @@ }
   exports.getObjectWithVariants = getObjectWithVariants;
-  exports.multiples = multiples;
+  exports.makeTheme = makeTheme;
   exports.scales = scales;
@@ -406,0 +537,0 @@

dist/options.d.ts

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

dist/types.d.ts

@@ -1,4 +0,9 @@
-import * as CSS from 'csstype';
-declare type StandardCSSProperties = CSS.Properties<number | string>;
-declare type Empty = undefined | null | false;
+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> {
+}
 /**
@@ -11,3 +16,3 @@ * The `css` function accepts arrays as values for mobile-first responsive styles.
  */
-export declare type ResponsiveStyleValue<T> = T | Empty | Array<T | Empty>;
+export declare type ResponsiveStyleValue<T> = T | ThemeUIEmpty | ResponsiveStyleTuple<T | ThemeUIEmpty>;
 /**
@@ -26,397 +31,12 @@ * All non-vendor-prefixed CSS properties. (Allow `number` to support CSS-in-JS libs,
 /**
- * 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
+ * Can be augmented by users to inject their exact theme into Theme UI types.
+ * @see TODO LINK TO THE DOCS
  */
-export interface CSSObject extends CSSPropertiesWithMultiValues, CSSPseudosForCSSObject, CSSOthersObjectForCSSObject {
+export interface UserTheme {
 }
-declare type CSSPropertiesWithMultiValues = {
-    [K in keyof CSSProperties]: CSSProperties[K];
+export interface Theme extends Assign<BaseTheme, UserTheme> {
+}
+export declare type Assign<T, U> = {
+    [P in keyof (T & U)]: P extends keyof U ? U[P] : P extends keyof T ? T[P] : never;
 };
-declare type CSSPseudosForCSSObject = {
-    [K in CSS.Pseudos]?: CSSObject;
-};
-declare type CSSInterpolation = undefined | number | string | CSSObject;
-interface CSSOthersObjectForCSSObject {
-    [propertiesName: string]: CSSInterpolation;
-}
-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;
-}
 /**
@@ -426,6 +46,7 @@ * Map of all available CSS properties (including aliases and overwrites)
  */
-export interface ThemeUIExtendedCSSProperties extends Omit<CSSProperties, keyof OverwriteCSSProperties>, AliasesCSSProperties, OverwriteCSSProperties {
+export interface ThemeUIExtendedCSSProperties extends Omit<CSSProperties, keyof ScalesCSSProperties>, AliasesCSSProperties, MultiplesCSSProperties, ScalesCSSProperties {
 }
+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 | Empty;
+export declare type StylePropertyValue<T> = ThemeUIStyleValue<Exclude<T, undefined>> | ((theme: Theme) => ThemeUIStyleValue<Exclude<T, undefined>> | undefined) | ThemeUIStyleObject | ThemeUIEmpty;
 export declare type ThemeUICSSProperties = {
@@ -465,3 +86,3 @@ [K in keyof ThemeUIExtendedCSSProperties]: StylePropertyValue<ThemeUIExtendedCSSProperties[K]>;
 export interface CSSOthersObject {
-    [k: string]: StylePropertyValue<string | number>;
+    [k: string]: StylePropertyValue<string | number | ThemeUIEmpty>;
 }
@@ -478,4 +99,4 @@ export interface ThemeUICSSObject extends ThemeUICSSProperties, CSSPseudoSelectorProps, CSSOthersObject, VariantProperty, Label {
 export interface ScaleDict<T> {
-    [K: string]: T | T[] | NestedScaleDict<T> | undefined;
-    [I: number]: T;
+    [K: string]: T | NestedScale<T> | ThemeUIEmpty;
+    [I: number]: T | ThemeUIEmpty;
 }
@@ -504,5 +125,8 @@ export interface ObjectWithDefault<T> {
  */
-export declare type Scale<T> = T[] | ScaleDict<T>;
+export declare type Scale<T> = (T | ThemeUIEmpty)[] | ScaleDict<T | ThemeUIEmpty>;
 export declare type NestedScale<T> = T[] | NestedScaleDict<T>;
-export declare type ColorOrNestedColorScale = CSS.Property.Color | NestedScale<CSS.Property.Color>;
+export declare namespace ColorMode {
+    type ColorValue = CSS.Property.Color;
+    type ColorOrNestedScale = ColorValue | NestedScale<ColorValue> | ThemeUIEmpty;
+}
 /**
@@ -512,27 +136,27 @@ * Color modes can be used to create a user-configurable dark mode
  */
-export interface ColorMode extends ScaleDict<CSS.Property.Color> {
+export interface ColorMode extends ScaleDict<ColorMode.ColorValue> {
     /**
      * Body background color
      */
-    background?: ColorOrNestedColorScale;
+    background?: ColorMode.ColorOrNestedScale;
     /**
      * Body foreground color
      */
-    text?: ColorOrNestedColorScale;
+    text?: ColorMode.ColorOrNestedScale;
     /**
      * Primary brand color for links, buttons, etc.
      */
-    primary?: ColorOrNestedColorScale;
+    primary?: ColorMode.ColorOrNestedScale;
     /**
      * A secondary brand color for alternative styling
      */
-    secondary?: ColorOrNestedColorScale;
+    secondary?: ColorMode.ColorOrNestedScale;
     /**
      * A contrast color for emphasizing UI
      */
-    accent?: ColorOrNestedColorScale;
+    accent?: ColorMode.ColorOrNestedScale;
     /**
      * A background color for highlighting text
      */
-    highlight?: ColorOrNestedColorScale;
+    highlight?: ColorMode.ColorOrNestedScale;
     /**
@@ -542,3 +166,3 @@ * A faint color for backgrounds, borders, and accents that do not require
      */
-    muted?: ColorOrNestedColorScale;
+    muted?: ColorMode.ColorOrNestedScale;
 }
@@ -586,3 +210,3 @@ export declare type ColorModesScale = ColorMode & {
 }
-export interface Theme {
+export interface BaseTheme {
     breakpoints?: Array<string>;
@@ -598,5 +222,5 @@ mediaQueries?: {
     letterSpacings?: Scale<CSS.Property.LetterSpacing<TLengthStyledSystem>>;
-    sizes?: Scale<CSS.Property.Height<{}> | CSS.Property.Width<{}>>;
-    borders?: Scale<CSS.Property.Border<{}>>;
-    borderStyles?: Scale<CSS.Property.Border<{}>>;
+    sizes?: Scale<CSS.Property.Height<number> | CSS.Property.Width<number>>;
+    borders?: Scale<CSS.Property.Border>;
+    borderStyles?: Scale<CSS.Property.Border>;
     borderWidths?: Scale<CSS.Property.BorderWidth<TLengthStyledSystem>>;
@@ -648,2 +272,15 @@ 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
@@ -784,2 +421,1 @@ */
 }
-export {};

package.json

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

src/index.ts

 import {
   CSSObject,
   ThemeUIStyleObject,
-  ThemeDerivedStyles,
+  ThemeUICSSObject,
   Theme,
-  ThemeUICSSObject,
+  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'
@@ -23,7 +32,5 @@
  */
-export const THEME_UI_DEFAULT_KEY = '__default'
+export const THEME_UI_DEFAULT_KEY: keyof ObjectWithDefault<never> = '__default'
 
-const hasDefault = (
-  x: unknown
-): x is { [THEME_UI_DEFAULT_KEY]: string | number } => {
+const hasDefault = (x: unknown): x is ObjectWithDefault<unknown> => {
   return typeof x === 'object' && x !== null && THEME_UI_DEFAULT_KEY in x
@@ -58,5 +65,8 @@ }
 
-export const getObjectWithVariants = (obj: any, theme: Theme): CSSObject => {
+export const getObjectWithVariants = (
+  obj: ThemeUICSSObject,
+  theme: Theme
+): ThemeUICSSObject => {
   if (obj && obj['variant']) {
-    let result: CSSObject = {}
+    let result: ThemeUICSSObject = {}
     for (const key in obj) {
@@ -69,3 +79,3 @@ const x = obj[key]
       } else {
-        result[key] = x as CSSObject
+        result[key] = x
       }
@@ -75,3 +85,3 @@ }
   }
-  return obj as CSSObject
+  return obj
 }
@@ -86,164 +96,2 @@
 
-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) => {
@@ -290,6 +138,20 @@ if (typeof value !== 'number' || value >= 0) {
 
-const responsive = (
-  styles: Exclude<ThemeUIStyleObject, ThemeDerivedStyles>
-) => (theme?: Theme) => {
-  const next: Exclude<ThemeUIStyleObject, ThemeDerivedStyles> = {}
+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 breakpoints =
@@ -306,3 +168,3 @@ (theme && (theme.breakpoints as string[])) || defaultBreakpoints
     if (typeof value === 'function') {
-      value = value(theme || {})
+      value = value(theme)
     }
@@ -320,3 +182,3 @@
       if (!media) {
-        next[key] = value[i]
+        next[key] = value[i] as Exclude<typeof value[0], any[]>
         continue
@@ -332,3 +194,3 @@ }
 
-type CssPropsArgument = { theme: Theme } | Theme
+type CssPropsArgument = { theme?: Theme } | Theme
 
@@ -338,6 +200,6 @@ export const css = (args: ThemeUIStyleObject = {}) => (
 ): CSSObject => {
-  const theme: Theme = {
+  const theme = {
     ...defaultTheme,
     ...('theme' in props ? props.theme : props),
-  }
+  } as Theme
   // insert variant props before responsive styles, so they can be merged
@@ -347,3 +209,3 @@ // we need to maintain order of the style props, so if a variant is place in the middle
 
-  const obj: CSSObject = getObjectWithVariants(
+  const obj = getObjectWithVariants(
     typeof args === 'function' ? args(theme) : args,
@@ -353,6 +215,12 @@ theme
 
-  const styles = responsive(obj as ThemeUICSSObject)(theme)
+  const styles = responsive(obj, 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
@@ -363,8 +231,6 @@
         result[key] = val[THEME_UI_DEFAULT_KEY]
-        continue
+      } else {
+        result[key] = css(val)(theme)
       }
 
-      // 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
@@ -371,0 +237,0 @@ }

src/options.ts

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

src/types.ts

@@ -1,9 +0,14 @@
-import * as CSS from 'csstype'
+import type * as CSS from 'csstype'
+import type { AliasesCSSProperties } from './aliases'
+import type { ScalesCSSProperties } from './scales'
+import type { MultiplesCSSProperties } from './multiples'
 
 import type {} from '../emotion-theme'
 
-type StandardCSSProperties = CSS.Properties<number | string>
+export type { CSSObject } from '@emotion/react'
 
-type Empty = undefined | null | false
+export type ThemeUIEmpty = undefined | null | false
 
+export interface ResponsiveStyleTuple<T> extends Array<T | ThemeUIEmpty> {}
+
 /**
@@ -16,3 +21,6 @@ * The `css` function accepts arrays as values for mobile-first responsive styles.
  */
-export type ResponsiveStyleValue<T> = T | Empty | Array<T | Empty>
+export type ResponsiveStyleValue<T> =
+  | T
+  | ThemeUIEmpty
+  | ResponsiveStyleTuple<T | ThemeUIEmpty>
 
@@ -34,407 +42,17 @@ /**
 /**
- * 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
+ * Can be augmented by users to inject their exact theme into Theme UI types.
+ * @see TODO LINK TO THE DOCS
  */
-export interface CSSObject
-  extends CSSPropertiesWithMultiValues,
-    CSSPseudosForCSSObject,
-    CSSOthersObjectForCSSObject {}
+export interface 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 interface Theme extends Assign<BaseTheme, UserTheme> {}
 
-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']
+export type Assign<T, U> = {
+  [P in keyof (T & U)]: P extends keyof U
+    ? U[P]
+    : P extends keyof T
+    ? T[P]
+    : never
 }
 
-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
-}
-
 /**
@@ -445,6 +63,11 @@ * Map of all available CSS properties (including aliases and overwrites)
 export interface ThemeUIExtendedCSSProperties
-  extends Omit<CSSProperties, keyof OverwriteCSSProperties>,
+  extends Omit<CSSProperties, keyof ScalesCSSProperties>,
     AliasesCSSProperties,
-    OverwriteCSSProperties {}
+    MultiplesCSSProperties,
+    ScalesCSSProperties {}
 
+export type DerivedStylePropertyValue<T> = (
+  theme: Theme
+) => ResponsiveStyleValue<Exclude<T, undefined>> | undefined
+
 type ThemeUIStyleValue<T> = ResponsiveStyleValue<T | ObjectWithDefault<T> | T[]>
@@ -456,3 +79,3 @@
   | ThemeUIStyleObject
-  | Empty
+  | ThemeUIEmpty
 
@@ -502,3 +125,3 @@ export type ThemeUICSSProperties = {
   // so as a side-effect we allow unknown CSS properties (Emotion does too)
-  [k: string]: StylePropertyValue<string | number>
+  [k: string]: StylePropertyValue<string | number | ThemeUIEmpty>
 }
@@ -523,4 +146,4 @@
 export interface ScaleDict<T> {
-  [K: string]: T | T[] | NestedScaleDict<T> | undefined
-  [I: number]: T
+  [K: string]: T | NestedScale<T> | ThemeUIEmpty
+  [I: number]: T | ThemeUIEmpty
 }
@@ -553,9 +176,17 @@
  */
-export type Scale<T> = T[] | ScaleDict<T>
+export type Scale<T> = (T | ThemeUIEmpty)[] | ScaleDict<T | ThemeUIEmpty>
 
 export type NestedScale<T> = T[] | NestedScaleDict<T>
 
-export type ColorOrNestedColorScale =
-  | CSS.Property.Color
-  | NestedScale<CSS.Property.Color>
+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
+}
 
@@ -566,7 +197,7 @@ /**
  */
-export interface ColorMode extends ScaleDict<CSS.Property.Color> {
+export interface ColorMode extends ScaleDict<ColorMode.ColorValue> {
   /**
    * Body background color
    */
-  background?: ColorOrNestedColorScale
+  background?: ColorMode.ColorOrNestedScale
 
@@ -576,3 +207,3 @@ /**
    */
-  text?: ColorOrNestedColorScale
+  text?: ColorMode.ColorOrNestedScale
 
@@ -582,3 +213,3 @@ /**
    */
-  primary?: ColorOrNestedColorScale
+  primary?: ColorMode.ColorOrNestedScale
 
@@ -588,3 +219,3 @@ /**
    */
-  secondary?: ColorOrNestedColorScale
+  secondary?: ColorMode.ColorOrNestedScale
 
@@ -594,3 +225,3 @@ /**
    */
-  accent?: ColorOrNestedColorScale
+  accent?: ColorMode.ColorOrNestedScale
 
@@ -600,3 +231,3 @@ /**
    */
-  highlight?: ColorOrNestedColorScale
+  highlight?: ColorMode.ColorOrNestedScale
 
@@ -607,3 +238,3 @@ /**
    */
-  muted?: ColorOrNestedColorScale
+  muted?: ColorMode.ColorOrNestedScale
 }
@@ -654,3 +285,3 @@
 
-export interface Theme {
+export interface BaseTheme {
   breakpoints?: Array<string>
@@ -664,5 +295,5 @@ mediaQueries?: { [size: string]: string }
   letterSpacings?: Scale<CSS.Property.LetterSpacing<TLengthStyledSystem>>
-  sizes?: Scale<CSS.Property.Height<{}> | CSS.Property.Width<{}>>
-  borders?: Scale<CSS.Property.Border<{}>>
-  borderStyles?: Scale<CSS.Property.Border<{}>>
+  sizes?: Scale<CSS.Property.Height<number> | CSS.Property.Width<number>>
+  borders?: Scale<CSS.Property.Border>
+  borderStyles?: Scale<CSS.Property.Border>
   borderWidths?: Scale<CSS.Property.BorderWidth<TLengthStyledSystem>>
@@ -723,2 +354,16 @@ 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
@@ -725,0 +370,0 @@ */

test/errors-and-inference.ts

@@ -54,11 +54,14 @@ import { expecter } from '@theme-ui/test-utils'
     expectSnippet(`
-      import { get } from 'theme-ui'
+      import { get, BaseTheme } from 'theme-ui'
 
       css({
         p: t => {
-          const theme = t;
+          const inferred = t
+
+          const assignableToTheme: BaseTheme = t
+
           return get(t, 'sizes.5')
         }
       })
-    `).toInfer('theme', 'Theme')
+    `).toInfer('inferred', 'Theme')
   })
@@ -99,3 +102,4 @@
 
-    const parse = (x: string | number | undefined | {}) => parseInt(String(x))
+    const parse = (x: string | number | null | undefined | {}) =>
+      parseInt(String(x))
     css({
@@ -141,16 +145,6 @@ size: (t) => parse(t.space?.[3]) + parse(t.sizes?.[5]),
   const expectedSnippet = expectSnippet(`
-    import { ColorMode } from './packages/css/src'
+    import { ColorMode, ThemeUIEmpty } from './packages/css/src'
 
     const colorMode: ColorMode = {}
 
-    const baseColors = [
-      colorMode.text,
-      colorMode.background,
-      colorMode.primary,
-      colorMode.secondary,
-      colorMode.muted,
-      colorMode.highlight,
-      colorMode.accent,
-    ];
-
     const seriousPink = colorMode.seriousPink
@@ -162,8 +156,4 @@ if (Array.isArray(seriousPink)) {
 
-  expectedSnippet.toInfer(
-    'baseColors',
-    '((string & {}) | Color[] | NestedScaleDict<Color> | undefined)[]'
-  )
   expectedSnippet.toInfer('light', 'Color')
   expectedSnippet.toInfer('dark', 'Color')
 })

test/index.ts

@@ -1,2 +0,2 @@
-import { css, NestedScale, NestedScaleDict, Theme } from '../src'
+import { BaseTheme, css, NestedScaleDict, Theme } from '../src'
 
@@ -650,3 +650,2 @@ const theme: Theme = {
     'flexDirection',
-    'justifyContent',
     '@media screen and (min-width: 40em)',
@@ -671,2 +670,14 @@ '@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(
@@ -673,0 +684,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

Improved metrics

Total package byte prevSize

845032

increased by246.77%

Number of package files

70

increased by204.35%

Lines of code

8857

increased by104.69%

Worsened metrics

Dependency count

3

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedts-toolbelt@^8.0.7

• + Addedts-toolbelt@8.4.0(transitive)