@hackclub/design-system - npm Package Compare versions

Comparing version 0.0.1-11 to 0.0.1-12

dist/Badge.js

@@ -38,5 +38,5 @@ 'use strict';
   color: 'white',
-  f: 1
+  fontSize: 1
 };
 
 exports.default = Badge;

dist/Button.js

@@ -7,7 +7,15 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  text-decoration: none;\n  font-family: inherit;\n  font-weight: ', ';\n  line-height: 1.125;\n  appearance: none;\n  cursor: pointer;\n  transition: ', ' box-shadow;\n  box-shadow: 0 2px 4px ', ';\n  border-radius: ', ';\n  border: none;\n\n  ', ';\n\n  &:hover,\n  &:focus {\n    outline: 0;\n    box-shadow: 0 2px 6px\n      ', ';\n  }\n\n  &:active {\n    outline: 0;\n    box-shadow: 0 2px 8px 2px\n      ', ';\n  }\n\n  ', ';\n\n  ', ';\n\n  ', ';\n  ', ';\n'], ['\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  text-decoration: none;\n  font-family: inherit;\n  font-weight: ', ';\n  line-height: 1.125;\n  appearance: none;\n  cursor: pointer;\n  transition: ', ' box-shadow;\n  box-shadow: 0 2px 4px ', ';\n  border-radius: ', ';\n  border: none;\n\n  ', ';\n\n  &:hover,\n  &:focus {\n    outline: 0;\n    box-shadow: 0 2px 6px\n      ', ';\n  }\n\n  &:active {\n    outline: 0;\n    box-shadow: 0 2px 8px 2px\n      ', ';\n  }\n\n  ', ';\n\n  ', ';\n\n  ', ';\n  ', ';\n']),
+var _templateObject = _taggedTemplateLiteral(['\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  text-decoration: none;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: ', ';\n  line-height: 1.125;\n  appearance: none;\n  cursor: pointer;\n  transition: ', ' box-shadow;\n  box-shadow: 0 2px 4px ', ';\n  border-radius: ', ';\n  border: none;\n\n  ', ';\n\n  &:hover,\n  &:focus {\n    outline: 0;\n    box-shadow: 0 2px 6px\n      ', ';\n  }\n\n  &:active {\n    outline: 0;\n    box-shadow: 0 2px 8px 2px\n      ', ';\n  }\n\n  ', ';\n\n  ', ';\n\n  ', ';\n  ', ';\n'], ['\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  text-decoration: none;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: ', ';\n  line-height: 1.125;\n  appearance: none;\n  cursor: pointer;\n  transition: ', ' box-shadow;\n  box-shadow: 0 2px 4px ', ';\n  border-radius: ', ';\n  border: none;\n\n  ', ';\n\n  &:hover,\n  &:focus {\n    outline: 0;\n    box-shadow: 0 2px 6px\n      ', ';\n  }\n\n  &:active {\n    outline: 0;\n    box-shadow: 0 2px 8px 2px\n      ', ';\n  }\n\n  ', ';\n\n  ', ';\n\n  ', ';\n  ', ';\n']),
     _templateObject2 = _taggedTemplateLiteral(['\n      transition: ', ' all;\n      will-change: transform;\n      transform: scale(1);\n      &:hover,\n      &:focus {\n        transform: scale(', ');\n      }\n      ', ' {\n        transform: none;\n      }\n    '], ['\n      transition: ', ' all;\n      will-change: transform;\n      transform: scale(1);\n      &:hover,\n      &:focus {\n        transform: scale(', ');\n      }\n      ', ' {\n        transform: none;\n      }\n    ']),
-    _templateObject3 = _taggedTemplateLiteral(['\n      &:before {\n        content: \'\u2039\';\n        padding-right: 0.25em;\n      }\n    '], ['\n      &:before {\n        content: \'\u2039\';\n        padding-right: 0.25em;\n      }\n    ']),
-    _templateObject4 = _taggedTemplateLiteral(['\n      &:after {\n        content: \'\u203A\';\n        padding-left: 0.25em;\n      }\n    '], ['\n      &:after {\n        content: \'\u203A\';\n        padding-left: 0.25em;\n      }\n    ']);
+    _templateObject3 = _taggedTemplateLiteral(['\n      &:before {\n        content: \'\xAB\';\n        padding-right: 0.25em;\n      }\n    '], ['\n      &:before {\n        content: \'\xAB\';\n        padding-right: 0.25em;\n      }\n    ']),
+    _templateObject4 = _taggedTemplateLiteral(['\n      &:after {\n        content: \'\xBB\';\n        padding-left: 0.25em;\n      }\n    '], ['\n      &:after {\n        content: \'\xBB\';\n        padding-left: 0.25em;\n      }\n    ']);
 
+var _Box = require('./Box');
+
+var _Box2 = _interopRequireDefault(_Box);
+
+var _theme = require('./theme');
+
+var _theme2 = _interopRequireDefault(_theme);
+
 var _styledComponents = require('styled-components');
@@ -17,2 +25,4 @@
 
+var _styledSystem = require('styled-system');
+
 var _propTypes = require('prop-types');
@@ -22,10 +32,2 @@
 
-var _Box = require('./Box');
-
-var _Box2 = _interopRequireDefault(_Box);
-
-var _theme = require('./theme');
-
-var _theme2 = _interopRequireDefault(_theme);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -35,3 +37,3 @@
 
-var Button = (0, _styledComponents2.default)(_Box2.default.withComponent('a'))(_templateObject, function (_ref) {
+var Button = _Box2.default.withComponent('a').extend(_templateObject, function (_ref) {
   var theme = _ref.theme;
@@ -93,3 +95,3 @@ return theme.bold;
   color: 'white',
-  f: 3,
+  fontSize: 3,
   m: 0,
@@ -96,0 +98,0 @@ px: 3,

dist/Field.js

@@ -57,3 +57,3 @@ 'use strict';
   color: 'error',
-  f: 1,
+  fontSize: 1,
   ml: 1,
@@ -60,0 +60,0 @@ my: 0

dist/Heading.js

@@ -7,3 +7,4 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  line-height: 1.25;\n'], ['\n  line-height: 1.25;\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  line-height: 1.25;\n'], ['\n  line-height: 1.25;\n']),
+    _templateObject2 = _taggedTemplateLiteral([''], ['']);
 
@@ -26,3 +27,3 @@ var _styledComponents = require('styled-components');
 
-var Heading = (0, _styledComponents2.default)(_Text2.default.withComponent('h2'))(_templateObject);
+var Heading = _Text2.default.withComponent('h2').extend(_templateObject);
 
@@ -38,3 +39,3 @@ Heading.displayName = 'Heading';
 
-Heading.h1 = Heading.withComponent('h1');
+Heading.h1 = (0, _styledComponents2.default)(Heading.withComponent('h1'))(_templateObject2);
 Heading.h1.defaultProps = {
@@ -41,0 +42,0 @@ bold: true,

dist/Label.js

@@ -41,3 +41,3 @@ 'use strict';
   color: 'black',
-  f: 2,
+  fontSize: 2,
   w: 1
@@ -44,0 +44,0 @@ };

dist/LargeButton.js

@@ -25,3 +25,3 @@ 'use strict';
 
-var LargeButton = (0, _styledComponents2.default)(_Button2.default)(_templateObject, function (_ref) {
+var LargeButton = _Button2.default.extend(_templateObject, function (_ref) {
   var theme = _ref.theme;
@@ -28,0 +28,0 @@ return theme.shadowColor;

dist/Link.js

@@ -32,3 +32,3 @@ 'use strict';
 
-var Link = (0, _styledComponents2.default)(_Text2.default.withComponent('a'))(_templateObject, function (props) {
+var Link = _Text2.default.withComponent('a').extend(_templateObject, function (props) {
   return props.underline ? 'underline' : 'none';
@@ -35,0 +35,0 @@ }, function (props) {

dist/OutlineButton.js

@@ -25,3 +25,3 @@ 'use strict';
 
-var OutlineButton = (0, _styledComponents2.default)(_LargeButton2.default)(_templateObject, function (props) {
+var OutlineButton = _LargeButton2.default.extend(_templateObject, function (props) {
   return (0, _theme.cx)(props.bg);
@@ -28,0 +28,0 @@ }, function (props) {

dist/Section.js

@@ -25,3 +25,3 @@ 'use strict';
 
-var Section = (0, _styledComponents2.default)(_Flex2.default.withComponent('section'))(_templateObject);
+var Section = (0, _styledComponents2.default)(_Flex2.default)(_templateObject);
 
@@ -28,0 +28,0 @@ Section.displayName = 'Section';

dist/Text.js

@@ -35,7 +35,7 @@ 'use strict';
 var regular = exports.regular = function regular(props) {
-  return props.regular ? { fontWeight: props.theme.regular } : null;
+  return props.regular && { fontWeight: 'regular' };
 };
 
 var bold = exports.bold = function bold(props) {
-  return props.bold ? { fontWeight: props.theme.bold } : null;
+  return props.bold && { fontWeight: 'bold' };
 };
@@ -42,0 +42,0 @@

dist/theme.js

@@ -25,2 +25,4 @@ 'use strict';
 var grays = exports.grays = {
+  darker: '#121217',
+  dark: '#17171d',
   black: palette.black,
@@ -27,0 +29,0 @@ slate: palette.gray[8],

dist/ThemeProvider.js

@@ -10,3 +10,3 @@ '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  * {\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']);
+    _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']);
 
@@ -13,0 +13,0 @@ var _react = require('react');

package.json

 {
   "name": "@hackclub/design-system",
-  "version": "0.0.1-11",
+  "version": "0.0.1-12",
   "description": "Hack Club Design System",
@@ -28,3 +28,3 @@ "main": "dist/index.js",
     "styled-components": "3.4.8",
-    "styled-system": "1.1.4"
+    "styled-system": "1.1.7"
   },
@@ -37,3 +37,3 @@ "devDependencies": {
     "babel-core": "^6.26.3",
-    "babel-jest": "^23.0.0",
+    "babel-jest": "^23.6.0",
     "babel-preset-env": "^1.7.0",
@@ -40,0 +40,0 @@ "babel-preset-react": "^6.24.1",

No alert changes

Improved metrics

Lines of code

3742

increased by0.13%

Worsened metrics

Total package byte prevSize

3558440

decreased by-0.02%

Dependency changes

• + Addedstyled-system@1.1.7(transitive)

• - Removedstyled-system@1.1.4(transitive)

• Updatedstyled-system@1.1.7