@theme-ui/theme-provider - npm Package Compare versions

Comparing version 0.3.0-alpha.3 to 0.3.0-alpha.4

dist/index.esm.js

@@ -6,22 +6,241 @@ import { jsx, useThemeUI, ThemeProvider } from '@theme-ui/core';
 
-var BodyStyles = function (ref) {
-  var theme = ref.theme; if ( theme === void 0 ) theme = {};
+var get = function (obj, key, def, p, undef) {
+  key = key && key.split ? key.split('.') : [key];
 
-  if (theme.useBodyStyles === false) { return false; }
-  return jsx(Global, {
-    styles: function (theme) {
-      var fontFamily = theme.fonts && theme.fonts.body;
-      var fontWeight = theme.fontWeights && theme.fontWeights.body;
-      var lineHeight = theme.lineHeights && theme.lineHeights.body;
-      return {
-        body: {
-          fontFamily: fontFamily,
-          fontWeight: fontWeight,
-          lineHeight: lineHeight
+  for (p = 0; p < key.length; p++) {
+    obj = obj ? obj[key[p]] : undef;
+  }
+
+  return obj === undef ? def : obj;
+};
+
+var defaultBreakpoints = [40, 52, 64].map(function (n) {
+  return n + 'em';
+});
+var defaultTheme = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
+};
+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'],
+  size: ['width', 'height']
+};
+var scales = {
+  color: 'colors',
+  backgroundColor: 'colors',
+  borderColor: 'colors',
+  margin: 'space',
+  marginTop: 'space',
+  marginRight: 'space',
+  marginBottom: 'space',
+  marginLeft: 'space',
+  marginX: 'space',
+  marginY: 'space',
+  padding: 'space',
+  paddingTop: 'space',
+  paddingRight: 'space',
+  paddingBottom: 'space',
+  paddingLeft: 'space',
+  paddingX: 'space',
+  paddingY: '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',
+  borderTopLeftRadius: 'radii',
+  borderTopRightRadius: 'radii',
+  borderBottomWidth: 'borderWidths',
+  borderBottomColor: 'colors',
+  borderBottomStyle: 'borderStyles',
+  borderBottomLeftRadius: 'radii',
+  borderBottomRightRadius: 'radii',
+  borderLeftWidth: 'borderWidths',
+  borderLeftColor: 'colors',
+  borderLeftStyle: 'borderStyles',
+  borderRightWidth: 'borderWidths',
+  borderRightColor: 'colors',
+  borderRightStyle: 'borderStyles',
+  outlineColor: 'colors',
+  boxShadow: 'shadows',
+  textShadow: 'shadows',
+  zIndex: 'zIndices',
+  width: 'sizes',
+  minWidth: 'sizes',
+  maxWidth: 'sizes',
+  height: 'sizes',
+  minHeight: 'sizes',
+  maxHeight: 'sizes',
+  flexBasis: 'sizes',
+  size: 'sizes',
+  // svg
+  fill: 'colors',
+  stroke: 'colors'
+};
+
+var positiveOrNegative = function (scale, value) {
+  if (typeof value !== 'number' || value >= 0) {
+    return get(scale, value, value);
+  }
+
+  var absolute = Math.abs(value);
+  var n = get(scale, absolute, absolute);
+
+  if (typeof n === 'string') {
+    return '-' + n;
+  }
+
+  return n * -1;
+};
+
+var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
+  var obj;
+  return Object.assign({}, acc, (obj = {}, obj[curr] = positiveOrNegative, obj));
+}, {});
+
+var responsive = function (styles) {
+  return function (theme) {
+    var next = {};
+    var breakpoints = get(theme, 'breakpoints', defaultBreakpoints);
+    var mediaQueries = [null].concat(breakpoints.map(function (n) {
+      return "@media screen and (min-width: " + n + ")";
+    }));
+
+    for (var key in styles) {
+      var value = typeof styles[key] === 'function' ? styles[key](theme) : styles[key];
+
+      if (value == null) {
+        continue;
+      }
+
+      if (!Array.isArray(value)) {
+        next[key] = value;
+        continue;
+      }
+
+      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
+        var media = mediaQueries[i];
+
+        if (value[i] == null) {
+          continue;
         }
-      };
+
+        if (!media) {
+          next[key] = value[i];
+          continue;
+        }
+
+        next[media] = next[media] || {};
+        next[media][key] = value[i];
+      }
     }
-  });
+
+    return next;
+  };
 };
 
+var css = function (args) {
+  return function (props) {
+    if (props === void 0) { props = {}; }
+    var theme = Object.assign({}, defaultTheme, props.theme || props);
+    var result = {};
+    var obj = typeof args === 'function' ? args(theme) : args;
+    var styles = responsive(obj)(theme);
+
+    for (var key in styles) {
+      var x = styles[key];
+      var val = typeof x === 'function' ? x(theme) : x;
+
+      if (key === 'variant') {
+        var variant = css(get(theme, val))(theme);
+        result = Object.assign({}, result, variant);
+        continue;
+      }
+
+      if (val && typeof val === 'object') {
+        result[key] = css(val)(theme);
+        continue;
+      }
+
+      var prop = get(aliases, key, key);
+      var scaleName = get(scales, prop);
+      var scale = get(theme, scaleName, get(theme, prop, {}));
+      var transform = get(transforms, prop, get);
+      var value = transform(scale, val, val);
+
+      if (multiples[prop]) {
+        var dirs = multiples[prop];
+
+        for (var i = 0; i < dirs.length; i++) {
+          result[dirs[i]] = value;
+        }
+      } else {
+        result[prop] = value;
+      }
+    }
+
+    return result;
+  };
+};
+
+var BodyStyles = function () { return jsx(Global, {
+  styles: function (theme) {
+    if (theme.useBodyStyles === false || theme.styles && !theme.styles.root) { return false; }
+    var boxSizing = theme.useBorderBox === false ? null : 'border-box';
+    return css({
+      '*': {
+        boxSizing: boxSizing
+      },
+      body: {
+        variant: 'styles.root'
+      }
+    })(theme);
+  }
+}); };
+
 var ThemeProvider$1 = function (ref) {
@@ -45,5 +264,3 @@ var theme = ref.theme;
     theme: theme
-  }, jsx(ColorModeProvider, null, jsx(BodyStyles, {
-    theme: theme
-  }), jsx(MDXProvider, {
+  }, jsx(ColorModeProvider, null, jsx(BodyStyles), jsx(MDXProvider, {
     components: components,
@@ -50,0 +267,0 @@ children: children

dist/index.js

@@ -6,22 +6,241 @@ var core = require('@theme-ui/core');
 
-var BodyStyles = function (ref) {
-  var theme = ref.theme; if ( theme === void 0 ) theme = {};
+var get = function (obj, key, def, p, undef) {
+  key = key && key.split ? key.split('.') : [key];
 
-  if (theme.useBodyStyles === false) { return false; }
-  return core.jsx(core$1.Global, {
-    styles: function (theme) {
-      var fontFamily = theme.fonts && theme.fonts.body;
-      var fontWeight = theme.fontWeights && theme.fontWeights.body;
-      var lineHeight = theme.lineHeights && theme.lineHeights.body;
-      return {
-        body: {
-          fontFamily: fontFamily,
-          fontWeight: fontWeight,
-          lineHeight: lineHeight
+  for (p = 0; p < key.length; p++) {
+    obj = obj ? obj[key[p]] : undef;
+  }
+
+  return obj === undef ? def : obj;
+};
+
+var defaultBreakpoints = [40, 52, 64].map(function (n) {
+  return n + 'em';
+});
+var defaultTheme = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
+};
+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'],
+  size: ['width', 'height']
+};
+var scales = {
+  color: 'colors',
+  backgroundColor: 'colors',
+  borderColor: 'colors',
+  margin: 'space',
+  marginTop: 'space',
+  marginRight: 'space',
+  marginBottom: 'space',
+  marginLeft: 'space',
+  marginX: 'space',
+  marginY: 'space',
+  padding: 'space',
+  paddingTop: 'space',
+  paddingRight: 'space',
+  paddingBottom: 'space',
+  paddingLeft: 'space',
+  paddingX: 'space',
+  paddingY: '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',
+  borderTopLeftRadius: 'radii',
+  borderTopRightRadius: 'radii',
+  borderBottomWidth: 'borderWidths',
+  borderBottomColor: 'colors',
+  borderBottomStyle: 'borderStyles',
+  borderBottomLeftRadius: 'radii',
+  borderBottomRightRadius: 'radii',
+  borderLeftWidth: 'borderWidths',
+  borderLeftColor: 'colors',
+  borderLeftStyle: 'borderStyles',
+  borderRightWidth: 'borderWidths',
+  borderRightColor: 'colors',
+  borderRightStyle: 'borderStyles',
+  outlineColor: 'colors',
+  boxShadow: 'shadows',
+  textShadow: 'shadows',
+  zIndex: 'zIndices',
+  width: 'sizes',
+  minWidth: 'sizes',
+  maxWidth: 'sizes',
+  height: 'sizes',
+  minHeight: 'sizes',
+  maxHeight: 'sizes',
+  flexBasis: 'sizes',
+  size: 'sizes',
+  // svg
+  fill: 'colors',
+  stroke: 'colors'
+};
+
+var positiveOrNegative = function (scale, value) {
+  if (typeof value !== 'number' || value >= 0) {
+    return get(scale, value, value);
+  }
+
+  var absolute = Math.abs(value);
+  var n = get(scale, absolute, absolute);
+
+  if (typeof n === 'string') {
+    return '-' + n;
+  }
+
+  return n * -1;
+};
+
+var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
+  var obj;
+  return Object.assign({}, acc, (obj = {}, obj[curr] = positiveOrNegative, obj));
+}, {});
+
+var responsive = function (styles) {
+  return function (theme) {
+    var next = {};
+    var breakpoints = get(theme, 'breakpoints', defaultBreakpoints);
+    var mediaQueries = [null].concat(breakpoints.map(function (n) {
+      return "@media screen and (min-width: " + n + ")";
+    }));
+
+    for (var key in styles) {
+      var value = typeof styles[key] === 'function' ? styles[key](theme) : styles[key];
+
+      if (value == null) {
+        continue;
+      }
+
+      if (!Array.isArray(value)) {
+        next[key] = value;
+        continue;
+      }
+
+      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
+        var media = mediaQueries[i];
+
+        if (value[i] == null) {
+          continue;
         }
-      };
+
+        if (!media) {
+          next[key] = value[i];
+          continue;
+        }
+
+        next[media] = next[media] || {};
+        next[media][key] = value[i];
+      }
     }
-  });
+
+    return next;
+  };
 };
 
+var css = function (args) {
+  return function (props) {
+    if (props === void 0) { props = {}; }
+    var theme = Object.assign({}, defaultTheme, props.theme || props);
+    var result = {};
+    var obj = typeof args === 'function' ? args(theme) : args;
+    var styles = responsive(obj)(theme);
+
+    for (var key in styles) {
+      var x = styles[key];
+      var val = typeof x === 'function' ? x(theme) : x;
+
+      if (key === 'variant') {
+        var variant = css(get(theme, val))(theme);
+        result = Object.assign({}, result, variant);
+        continue;
+      }
+
+      if (val && typeof val === 'object') {
+        result[key] = css(val)(theme);
+        continue;
+      }
+
+      var prop = get(aliases, key, key);
+      var scaleName = get(scales, prop);
+      var scale = get(theme, scaleName, get(theme, prop, {}));
+      var transform = get(transforms, prop, get);
+      var value = transform(scale, val, val);
+
+      if (multiples[prop]) {
+        var dirs = multiples[prop];
+
+        for (var i = 0; i < dirs.length; i++) {
+          result[dirs[i]] = value;
+        }
+      } else {
+        result[prop] = value;
+      }
+    }
+
+    return result;
+  };
+};
+
+var BodyStyles = function () { return core.jsx(core$1.Global, {
+  styles: function (theme) {
+    if (theme.useBodyStyles === false || theme.styles && !theme.styles.root) { return false; }
+    var boxSizing = theme.useBorderBox === false ? null : 'border-box';
+    return css({
+      '*': {
+        boxSizing: boxSizing
+      },
+      body: {
+        variant: 'styles.root'
+      }
+    })(theme);
+  }
+}); };
+
 var ThemeProvider = function (ref) {
@@ -45,5 +264,3 @@ var theme = ref.theme;
     theme: theme
-  }, core.jsx(colorModes.ColorModeProvider, null, core.jsx(BodyStyles, {
-    theme: theme
-  }), core.jsx(mdx.MDXProvider, {
+  }, core.jsx(colorModes.ColorModeProvider, null, core.jsx(BodyStyles), core.jsx(mdx.MDXProvider, {
     components: components,
@@ -50,0 +267,0 @@ children: children

dist/index.umd.js

@@ -6,22 +6,241 @@ (function (global, factory) {
 }(this, (function (exports,core,colorModes,mdx,core$1) {
-  var BodyStyles = function (ref) {
-    var theme = ref.theme; if ( theme === void 0 ) theme = {};
+  var get = function (obj, key, def, p, undef) {
+    key = key && key.split ? key.split('.') : [key];
 
-    if (theme.useBodyStyles === false) { return false; }
-    return core.jsx(core$1.Global, {
-      styles: function (theme) {
-        var fontFamily = theme.fonts && theme.fonts.body;
-        var fontWeight = theme.fontWeights && theme.fontWeights.body;
-        var lineHeight = theme.lineHeights && theme.lineHeights.body;
-        return {
-          body: {
-            fontFamily: fontFamily,
-            fontWeight: fontWeight,
-            lineHeight: lineHeight
+    for (p = 0; p < key.length; p++) {
+      obj = obj ? obj[key[p]] : undef;
+    }
+
+    return obj === undef ? def : obj;
+  };
+
+  var defaultBreakpoints = [40, 52, 64].map(function (n) {
+    return n + 'em';
+  });
+  var defaultTheme = {
+    space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+    fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
+  };
+  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'],
+    size: ['width', 'height']
+  };
+  var scales = {
+    color: 'colors',
+    backgroundColor: 'colors',
+    borderColor: 'colors',
+    margin: 'space',
+    marginTop: 'space',
+    marginRight: 'space',
+    marginBottom: 'space',
+    marginLeft: 'space',
+    marginX: 'space',
+    marginY: 'space',
+    padding: 'space',
+    paddingTop: 'space',
+    paddingRight: 'space',
+    paddingBottom: 'space',
+    paddingLeft: 'space',
+    paddingX: 'space',
+    paddingY: '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',
+    borderTopLeftRadius: 'radii',
+    borderTopRightRadius: 'radii',
+    borderBottomWidth: 'borderWidths',
+    borderBottomColor: 'colors',
+    borderBottomStyle: 'borderStyles',
+    borderBottomLeftRadius: 'radii',
+    borderBottomRightRadius: 'radii',
+    borderLeftWidth: 'borderWidths',
+    borderLeftColor: 'colors',
+    borderLeftStyle: 'borderStyles',
+    borderRightWidth: 'borderWidths',
+    borderRightColor: 'colors',
+    borderRightStyle: 'borderStyles',
+    outlineColor: 'colors',
+    boxShadow: 'shadows',
+    textShadow: 'shadows',
+    zIndex: 'zIndices',
+    width: 'sizes',
+    minWidth: 'sizes',
+    maxWidth: 'sizes',
+    height: 'sizes',
+    minHeight: 'sizes',
+    maxHeight: 'sizes',
+    flexBasis: 'sizes',
+    size: 'sizes',
+    // svg
+    fill: 'colors',
+    stroke: 'colors'
+  };
+
+  var positiveOrNegative = function (scale, value) {
+    if (typeof value !== 'number' || value >= 0) {
+      return get(scale, value, value);
+    }
+
+    var absolute = Math.abs(value);
+    var n = get(scale, absolute, absolute);
+
+    if (typeof n === 'string') {
+      return '-' + n;
+    }
+
+    return n * -1;
+  };
+
+  var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
+    var obj;
+    return Object.assign({}, acc, (obj = {}, obj[curr] = positiveOrNegative, obj));
+  }, {});
+
+  var responsive = function (styles) {
+    return function (theme) {
+      var next = {};
+      var breakpoints = get(theme, 'breakpoints', defaultBreakpoints);
+      var mediaQueries = [null].concat(breakpoints.map(function (n) {
+        return "@media screen and (min-width: " + n + ")";
+      }));
+
+      for (var key in styles) {
+        var value = typeof styles[key] === 'function' ? styles[key](theme) : styles[key];
+
+        if (value == null) {
+          continue;
+        }
+
+        if (!Array.isArray(value)) {
+          next[key] = value;
+          continue;
+        }
+
+        for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
+          var media = mediaQueries[i];
+
+          if (value[i] == null) {
+            continue;
           }
-        };
+
+          if (!media) {
+            next[key] = value[i];
+            continue;
+          }
+
+          next[media] = next[media] || {};
+          next[media][key] = value[i];
+        }
       }
-    });
+
+      return next;
+    };
   };
 
+  var css = function (args) {
+    return function (props) {
+      if (props === void 0) { props = {}; }
+      var theme = Object.assign({}, defaultTheme, props.theme || props);
+      var result = {};
+      var obj = typeof args === 'function' ? args(theme) : args;
+      var styles = responsive(obj)(theme);
+
+      for (var key in styles) {
+        var x = styles[key];
+        var val = typeof x === 'function' ? x(theme) : x;
+
+        if (key === 'variant') {
+          var variant = css(get(theme, val))(theme);
+          result = Object.assign({}, result, variant);
+          continue;
+        }
+
+        if (val && typeof val === 'object') {
+          result[key] = css(val)(theme);
+          continue;
+        }
+
+        var prop = get(aliases, key, key);
+        var scaleName = get(scales, prop);
+        var scale = get(theme, scaleName, get(theme, prop, {}));
+        var transform = get(transforms, prop, get);
+        var value = transform(scale, val, val);
+
+        if (multiples[prop]) {
+          var dirs = multiples[prop];
+
+          for (var i = 0; i < dirs.length; i++) {
+            result[dirs[i]] = value;
+          }
+        } else {
+          result[prop] = value;
+        }
+      }
+
+      return result;
+    };
+  };
+
+  var BodyStyles = function () { return core.jsx(core$1.Global, {
+    styles: function (theme) {
+      if (theme.useBodyStyles === false || theme.styles && !theme.styles.root) { return false; }
+      var boxSizing = theme.useBorderBox === false ? null : 'border-box';
+      return css({
+        '*': {
+          boxSizing: boxSizing
+        },
+        body: {
+          variant: 'styles.root'
+        }
+      })(theme);
+    }
+  }); };
+
   var ThemeProvider = function (ref) {
@@ -45,5 +264,3 @@ var theme = ref.theme;
       theme: theme
-    }, core.jsx(colorModes.ColorModeProvider, null, core.jsx(BodyStyles, {
-      theme: theme
-    }), core.jsx(mdx.MDXProvider, {
+    }, core.jsx(colorModes.ColorModeProvider, null, core.jsx(BodyStyles), core.jsx(mdx.MDXProvider, {
       components: components,
@@ -50,0 +267,0 @@ children: children

package.json

 {
   "name": "@theme-ui/theme-provider",
-  "version": "0.3.0-alpha.3",
+  "version": "0.3.0-alpha.4",
   "main": "dist/index.js",
@@ -13,5 +13,5 @@ "module": "dist/index.esm.js",
     "@emotion/core": "^10.0.0",
-    "@theme-ui/color-modes": "^0.3.0-alpha.3",
-    "@theme-ui/core": "^0.3.0-alpha.3",
-    "@theme-ui/mdx": "^0.3.0-alpha.3"
+    "@theme-ui/color-modes": "^0.3.0-alpha.4",
+    "@theme-ui/core": "^0.3.0-alpha.4",
+    "@theme-ui/mdx": "^0.3.0-alpha.4"
   },
@@ -24,3 +24,3 @@ "repository": "system-ui/theme-ui",
   },
-  "gitHead": "7f6331a5e53cdd6e8425240b235bbfb23d49997e"
+  "gitHead": "9eaf51404d4a8a927d7bf64a1dd09e09d7fbac65"
 }

src/index.js

@@ -1,6 +0,3 @@
-import {
-  jsx,
-  useThemeUI,
-  ThemeProvider as CoreProvider,
-} from '@theme-ui/core'
+import { jsx, useThemeUI, ThemeProvider as CoreProvider } from '@theme-ui/core'
+import { css } from '@theme-ui/css'
 import { ColorModeProvider } from '@theme-ui/color-modes'
@@ -10,34 +7,30 @@ import { MDXProvider } from '@theme-ui/mdx'
 
-const BodyStyles = ({ theme = {} }) => {
-  if (theme.useBodyStyles === false) return false
-
-  return jsx(Global, {
+const BodyStyles = () =>
+  jsx(Global, {
     styles: theme => {
-      const fontFamily = theme.fonts && theme.fonts.body
-      const fontWeight = theme.fontWeights && theme.fontWeights.body
-      const lineHeight = theme.lineHeights && theme.lineHeights.body
+      if (theme.useBodyStyles === false || (theme.styles && !theme.styles.root))
+        return false
+      const boxSizing = theme.useBorderBox === false ? null : 'border-box'
 
-      return {
+      return css({
+        '*': {
+          boxSizing,
+        },
         body: {
-          fontFamily,
-          fontWeight,
-          lineHeight,
-        }
-      }
-    }
+          variant: 'styles.root',
+        },
+      })(theme)
+    },
   })
-}
 
-export const ThemeProvider = ({
-  theme,
-  components,
-  children
-}) => {
+export const ThemeProvider = ({ theme, components, children }) => {
   const outer = useThemeUI()
 
   if (typeof outer.setColorMode === 'function') {
-    return jsx(CoreProvider, { theme },
+    return jsx(
+      CoreProvider,
+      { theme },
       jsx(MDXProvider, {
         components,
-        children
+        children,
       })
@@ -47,8 +40,12 @@ )
 
-  return jsx(CoreProvider, { theme },
-    jsx(ColorModeProvider, null,
-      jsx(BodyStyles, { theme }),
+  return jsx(
+    CoreProvider,
+    { theme },
+    jsx(
+      ColorModeProvider,
+      null,
+      jsx(BodyStyles),
       jsx(MDXProvider, {
         components,
-        children
+        children,
       })
@@ -55,0 +52,0 @@ )

test/index.js

@@ -31,4 +31,4 @@ /** @jsx jsx */
         colors: {
-          primary: 'tomato'
-        }
+          primary: 'tomato',
+        },
       }}>
@@ -75,4 +75,4 @@ <h1 sx={{ color: 'primary' }}>Hello</h1>
               color: 'cyan',
-            }
-          }
+            },
+          },
         }}>
@@ -122,2 +122,9 @@ {mdx('h1', null, 'Hello')}
         },
+        styles: {
+          root: {
+            fontFamily: 'body',
+            fontWeight: 'body',
+            lineHeight: 'body',
+          },
+        },
       }}>
@@ -135,5 +142,3 @@ <h1>Hello</h1>
   const root = render(
-    <ThemeProvider
-      theme={{
-      }}>
+    <ThemeProvider theme={{}}>
       <h1>Hello</h1>
@@ -162,2 +167,7 @@ </ThemeProvider>
         },
+        styles: {
+          root: {
+            fontFamily: 'body',
+          },
+        },
       }}>
@@ -173,1 +183,25 @@ <h1>Hello</h1>
 
+test('adds box-sizing: border-box', () => {
+  const root = render(
+    <ThemeProvider theme={{}}>
+      <h1>Hello</h1>
+    </ThemeProvider>
+  )
+  const style = window.getComputedStyle(root.baseElement)
+  expect(style.boxSizing).toBe('border-box')
+})
+
+test('does not add box-sizing: border-box', () => {
+  const styles = [].slice.call(document.querySelectorAll('style'))
+  styles.forEach(style => (style.innerHTML = ''))
+  const root = render(
+    <ThemeProvider
+      theme={{
+        useBorderBox: false,
+      }}>
+      <h1>Hello</h1>
+    </ThemeProvider>
+  )
+  const style = window.getComputedStyle(root.baseElement)
+  expect(style.boxSizing).toBe('')
+})

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

74862

increased by291.46%

Lines of code

950

increased by176.97%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@theme-ui/color-modes@^0.3.0-alpha.4

• Updated@theme-ui/core@^0.3.0-alpha.4

• Updated@theme-ui/mdx@^0.3.0-alpha.4