@hackclub/design-system - npm Package Compare versions

Comparing version 0.0.1-13 to 0.0.1-14

dist/BackgroundImage.js

@@ -7,4 +7,4 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-color: ', ';\n  ', ' ', ';\n\n  ', ';\n'], ['\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-color: ', ';\n  ', ' ', ';\n\n  ', ';\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n      overflow: hidden;\n      transition: ', ' background-size;\n      will-change: background-size;\n      background-size: auto 100%;\n      &:hover {\n        background-size: auto ', '%;\n      }\n      ', ' {\n        transition: none;\n        background-size: cover !important;\n      }\n    '], ['\n      overflow: hidden;\n      transition: ', ' background-size;\n      will-change: background-size;\n      background-size: auto 100%;\n      &:hover {\n        background-size: auto ', '%;\n      }\n      ', ' {\n        transition: none;\n        background-size: cover !important;\n      }\n    ']);
+var _templateObject = _taggedTemplateLiteral(['\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  ', ' ', ';\n\n  ', ';\n'], ['\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  ', ' ', ';\n\n  ', ';\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n      overflow: hidden;\n      transition: ', ' background-size;\n      will-change: background-size;\n      background-size: auto ', '%;\n      &:hover {\n        background-size: auto\n          ', '%;\n      }\n      ', ' {\n        transition: none;\n        background-size: cover !important;\n      }\n    '], ['\n      overflow: hidden;\n      transition: ', ' background-size;\n      will-change: background-size;\n      background-size: auto ', '%;\n      &:hover {\n        background-size: auto\n          ', '%;\n      }\n      ', ' {\n        transition: none;\n        background-size: cover !important;\n      }\n    ']);
 
@@ -39,12 +39,12 @@ var _Box = require('./Box');
 
-var BackgroundImage = (0, _styledComponents2.default)(_Box2.default)(_templateObject, function (_ref) {
-  var theme = _ref.theme;
-  return theme.colors.smoke;
-}, src, height, function (props) {
-  return props.scale && (0, _styledComponents.css)(_templateObject2, function (_ref2) {
+var BackgroundImage = (0, _styledComponents2.default)(_Box2.default)(_templateObject, src, height, function (props) {
+  return props.scale && (0, _styledComponents.css)(_templateObject2, function (_ref) {
+    var theme = _ref.theme;
+    return theme.transition;
+  }, function (_ref2) {
     var theme = _ref2.theme;
-    return theme.transition;
+    return theme.scaleFactor * 100;
   }, function (_ref3) {
     var theme = _ref3.theme;
-    return theme.scaleFactor * 100;
+    return (theme.scaleFactor + 1 / 16) * 100;
   }, function (_ref4) {
@@ -68,5 +68,6 @@ var theme = _ref4.theme;
 BackgroundImage.defaultProps = {
-  theme: _theme2.default
+  theme: _theme2.default,
+  bg: 'smoke'
 };
 
 exports.default = BackgroundImage;

dist/Container.js

@@ -40,3 +40,3 @@ 'use strict';
 Container.defaultProps = {
-  maxWidth: 64,
+  maxWidth: 72,
   mx: 'auto'
@@ -43,0 +43,0 @@ };

dist/theme.js

@@ -77,12 +77,12 @@ 'use strict';
 
-var space = exports.space = [0, 4, 8, 16, 32, 64, 128, 256, 512];
+var space = exports.space = [0, 6, 12, 18, 24, 36, 72, 108, 144, 288, 432];
 
 var emoji = '"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"';
-var font = exports.font = 'Averta,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif,' + emoji;
+var font = exports.font = '"Phantom Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif,' + emoji;
 var mono = exports.mono = 'SFMono-Regular,"Roboto Mono",Menlo,monospace';
 
-var fontSizes = exports.fontSizes = [12, 14, 16, 20, 24, 32, 48, 64, 72, 96];
+var fontSizes = exports.fontSizes = [13.5, 16, 18, 24, 27, 36, 48, 54, 72, 96];
 
-var regular = exports.regular = 400;
-var bold = exports.bold = 700;
+var regular = exports.regular = 'regular';
+var bold = exports.bold = 'bold';
 
@@ -100,4 +100,4 @@ // styled-system's `fontWeight` function can hook into the `fontWeights` object
 
-var shadowColor = exports.shadowColor = 'rgba(0,0,0,0.16)';
-var baseShadow = exports.baseShadow = '0 0 2px 0 rgba(0,0,0,.08),';
+var shadowColor = exports.shadowColor = 'rgba(0,0,0,0.125)';
+var baseShadow = exports.baseShadow = '0 0 2px 0 rgba(0,0,0,.0625),';
 var boxShadows = exports.boxShadows = [baseShadow + ('0 2px 4px 0 ' + shadowColor), baseShadow + ('0 4px 8px 0 ' + shadowColor), baseShadow + ('0 12px 12px 0 ' + shadowColor), baseShadow + ('0 24px 24px 0 ' + shadowColor)];
@@ -104,0 +104,0 @@

dist/ThemeProvider.js

@@ -9,4 +9,4 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  @font-face {\n    font-family: Averta;\n    font-style: normal;\n    font-weight: 400;\n    font-display: swap;\n    src: url(//hackclub.com/fonts/averta-regular.woff2) format(\'woff2\'),\n      url(//hackclub.com/fonts/averta-regular.woff) format(\'woff\');\n    unicode-range: U + 0000 - F8FE, U + F900-FFFF;\n  }\n  @font-face {\n    font-family: Averta;\n    font-style: normal;\n    font-weight: 700;\n    font-display: swap;\n    src: url(//hackclub.com/fonts/averta-bold.woff2) format(\'woff2\'),\n      url(//hackclub.com/fonts/averta-bold.woff) format(\'woff\');\n    unicode-range: U + 0000 - F8FE, U + F900-FFFF;\n  }\n'], ['\n  @font-face {\n    font-family: Averta;\n    font-style: normal;\n    font-weight: 400;\n    font-display: swap;\n    src: url(//hackclub.com/fonts/averta-regular.woff2) format(\'woff2\'),\n      url(//hackclub.com/fonts/averta-regular.woff) format(\'woff\');\n    unicode-range: U + 0000 - F8FE, U + F900-FFFF;\n  }\n  @font-face {\n    font-family: Averta;\n    font-style: normal;\n    font-weight: 700;\n    font-display: swap;\n    src: url(//hackclub.com/fonts/averta-bold.woff2) format(\'woff2\'),\n      url(//hackclub.com/fonts/averta-bold.woff) format(\'woff\');\n    unicode-range: U + 0000 - F8FE, U + F900-FFFF;\n  }\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  * {\n    box-sizing: border-box;\n    font-weight: inherit;\n    text-rendering: optimizeLegibility;\n    -webkit-font-smoothing: antialiased;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n  }\n\n  html,\n  body {\n    min-height: 100%;\n    min-width: 100%;\n  }\n\n  body {\n    padding: 0;\n    margin: 0;\n    font-size: ', 'px;\n    font-family: ', ';\n    line-height: 1.5;\n    position: relative;\n    height: 100%;\n    max-height: 100%;\n    width: 100%;\n    -webkit-font-smoothing: antialiased;\n    overflow-x: hidden;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  a {\n    color: currentColor;\n    text-decoration: none;\n  }\n\n  textarea {\n    resize: none;\n  }\n\n  strong {\n    font-weight: bold;\n  }\n'], ['\n  * {\n    box-sizing: border-box;\n    font-weight: inherit;\n    text-rendering: optimizeLegibility;\n    -webkit-font-smoothing: antialiased;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n  }\n\n  html,\n  body {\n    min-height: 100%;\n    min-width: 100%;\n  }\n\n  body {\n    padding: 0;\n    margin: 0;\n    font-size: ', 'px;\n    font-family: ', ';\n    line-height: 1.5;\n    position: relative;\n    height: 100%;\n    max-height: 100%;\n    width: 100%;\n    -webkit-font-smoothing: antialiased;\n    overflow-x: hidden;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  a {\n    color: currentColor;\n    text-decoration: none;\n  }\n\n  textarea {\n    resize: none;\n  }\n\n  strong {\n    font-weight: bold;\n  }\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  @font-face {\n    font-family: \'Phantom Sans\';\n    src: url(\'https://hackclub.com/fonts/Phantom_Sans_0.4/Regular.woff\')\n        format(\'woff\'),\n      url(\'https://hackclub.com/fonts/Phantom_Sans_0.4/Regular.woff2\')\n        format(\'woff2\');\n    font-weight: normal;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: \'Phantom Sans\';\n    src: url(\'https://hackclub.com/fonts/Phantom_Sans_0.4/Bold.woff\')\n        format(\'woff\'),\n      url(\'https://hackclub.com/fonts/Phantom_Sans_0.4/Bold.woff2\')\n        format(\'woff2\');\n    font-weight: bold;\n    font-style: normal;\n    font-display: swap;\n  }\n'], ['\n  @font-face {\n    font-family: \'Phantom Sans\';\n    src: url(\'https://hackclub.com/fonts/Phantom_Sans_0.4/Regular.woff\')\n        format(\'woff\'),\n      url(\'https://hackclub.com/fonts/Phantom_Sans_0.4/Regular.woff2\')\n        format(\'woff2\');\n    font-weight: normal;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: \'Phantom Sans\';\n    src: url(\'https://hackclub.com/fonts/Phantom_Sans_0.4/Bold.woff\')\n        format(\'woff\'),\n      url(\'https://hackclub.com/fonts/Phantom_Sans_0.4/Bold.woff2\')\n        format(\'woff2\');\n    font-weight: bold;\n    font-style: normal;\n    font-display: swap;\n  }\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  * {\n    box-sizing: border-box;\n    font-weight: inherit;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n  }\n\n  html,\n  body {\n    min-height: 100%;\n    min-width: 100%;\n  }\n\n  body {\n    padding: 0;\n    margin: 0;\n    font-size: ', 'px;\n    font-family: ', ';\n    line-height: 1.375;\n    position: relative;\n    height: 100%;\n    max-height: 100%;\n    width: 100%;\n  }\n\n  a {\n    color: currentColor;\n    text-decoration: none;\n  }\n\n  textarea {\n    resize: none;\n  }\n\n  strong {\n    font-weight: bold;\n  }\n'], ['\n  * {\n    box-sizing: border-box;\n    font-weight: inherit;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n  }\n\n  html,\n  body {\n    min-height: 100%;\n    min-width: 100%;\n  }\n\n  body {\n    padding: 0;\n    margin: 0;\n    font-size: ', 'px;\n    font-family: ', ';\n    line-height: 1.375;\n    position: relative;\n    height: 100%;\n    max-height: 100%;\n    width: 100%;\n  }\n\n  a {\n    color: currentColor;\n    text-decoration: none;\n  }\n\n  textarea {\n    resize: none;\n  }\n\n  strong {\n    font-weight: bold;\n  }\n']);
 
@@ -13,0 +13,0 @@ var _react = require('react');

package.json

 {
   "name": "@hackclub/design-system",
-  "version": "0.0.1-13",
+  "version": "0.0.1-14",
   "description": "Hack Club Design System",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Worsened metrics

Total package byte prevSize

3557202

decreased by-0.03%

No dependency changes