buoy-theme - npm Package Compare versions

Comparing version 5.0.5 to 6.0.0

dist/breakpoints.js

@@ -7,3 +7,4 @@ "use strict";
 var breakpoints = {
-  sm: "479",
+  xs: "479",
+  sm: "768",
   md: "1019",
@@ -10,0 +11,0 @@ lg: "1319"

dist/fonts.js

@@ -18,3 +18,4 @@ "use strict";
       md: "34px",
-      sm: "34px"
+      sm: "34px",
+      xs: "34px"
     },
@@ -25,3 +26,4 @@ h2: {
       md: "30px",
-      sm: "30px"
+      sm: "30px",
+      xs: "30px"
     },
@@ -32,3 +34,4 @@ h3: {
       md: "24px",
-      sm: "24px"
+      sm: "24px",
+      xs: "24px"
     },
@@ -39,3 +42,4 @@ label: {
       md: "11px",
-      sm: "11px"
+      sm: "11px",
+      xs: "11px"
     },
@@ -46,3 +50,4 @@ bodySmall: {
       md: "12px",
-      sm: "12px"
+      sm: "12px",
+      xs: "12px"
     },
@@ -53,3 +58,4 @@ bodyMain: {
       md: "16px",
-      sm: "16px"
+      sm: "16px",
+      xs: "16px"
     },
@@ -60,3 +66,4 @@ bodyLarge: {
       md: "18px",
-      sm: "18px"
+      sm: "18px",
+      xs: "18px"
     },
@@ -67,3 +74,4 @@ bodyLarger: {
       md: "20px",
-      sm: "20px"
+      sm: "20px",
+      xs: "20px"
     }
@@ -70,0 +78,0 @@ }

dist/helpers.js

@@ -46,4 +46,4 @@ "use strict";
   return function (props) {
-    return (0, _responsive2.default)("font-size", props.theme.fonts.size[size].xl, props.theme.fonts.size[size].lg, props.theme.fonts.size[size].md, props.theme.fonts.size[size].sm);
+    return (0, _responsive2.default)("font-size", props.theme.fonts.size[size].xl, props.theme.fonts.size[size].lg, props.theme.fonts.size[size].md, props.theme.fonts.size[size].sm, props.theme.fonts.size[size].xs);
   };
 };

dist/responsive.js

@@ -8,3 +8,3 @@ "use strict";
 
-var _templateObject = _taggedTemplateLiteral(["\n  ", ": ", ";\n  ", "\n  ", "\n  ", "\n"], ["\n  ", ": ", ";\n  ", "\n  ", "\n  ", "\n"]);
+var _templateObject = _taggedTemplateLiteral(["\n  ", ": ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  ", ": ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n"]);
 
@@ -21,6 +21,6 @@ var _breakpoints = require("./breakpoints");
 
-var responsive = function responsive(field, xl, lg, md, sm) {
-  return (0, _styledComponents.css)(_templateObject, field, xl, xl !== lg && "\n  @media(max-width: " + (_breakpoints2.default.lg + "px") + ") {\n    " + field + ": " + lg + ";\n  }\n  ", lg !== md && "\n  @media(max-width: " + (_breakpoints2.default.md + "px") + ") {\n    " + field + ": " + md + ";\n  }\n  ", md !== sm && "\n  @media(max-width: " + (_breakpoints2.default.sm + "px") + ") {\n    " + field + ": " + sm + ";\n  }\n  ");
+var responsive = function responsive(field, xl, lg, md, sm, xs) {
+  return (0, _styledComponents.css)(_templateObject, field, xl, xl !== lg && "\n  @media(max-width: " + (_breakpoints2.default.lg + "px") + ") {\n    " + field + ": " + lg + ";\n  }\n  ", lg !== md && "\n  @media(max-width: " + (_breakpoints2.default.md + "px") + ") {\n    " + field + ": " + md + ";\n  }\n  ", md !== sm && "\n  @media(max-width: " + (_breakpoints2.default.sm + "px") + ") {\n    " + field + ": " + sm + ";\n  }\n  ", sm !== xs && "\n  @media(max-width: " + (_breakpoints2.default.xs + "px") + ") {\n    " + field + ": " + xs + ";\n  }\n  ");
 };
 
 exports.default = responsive;

package.json

 {
   "name": "buoy-theme",
-  "version": "5.0.5",
+  "version": "6.0.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/breakpoints.js

 const breakpoints = {
-  sm: "479",
+  xs: "479",
+  sm: "768",
   md: "1019",
@@ -4,0 +5,0 @@ lg: "1319",

src/fonts.js

@@ -14,2 +14,3 @@ const fonts = {
       sm: "34px",
+      xs: "34px",
     },
@@ -21,2 +22,3 @@ h2: {
       sm: "30px",
+      xs: "30px",
     },
@@ -28,2 +30,3 @@ h3: {
       sm: "24px",
+      xs: "24px",
     },
@@ -35,2 +38,3 @@ label: {
       sm: "11px",
+      xs: "11px",
     },
@@ -42,2 +46,3 @@ bodySmall: {
       sm: "12px",
+      xs: "12px",
     },
@@ -49,2 +54,3 @@ bodyMain: {
       sm: "16px",
+      xs: "16px",
     },
@@ -56,2 +62,3 @@ bodyLarge: {
       sm: "18px",
+      xs: "18px",
     },
@@ -63,2 +70,3 @@ bodyLarger: {
       sm: "20px",
+      xs: "20px",
     },
@@ -65,0 +73,0 @@ },

src/helpers.js

@@ -30,3 +30,4 @@ import theme from "./theme"
     props.theme.fonts.size[size].md,
-    props.theme.fonts.size[size].sm
+    props.theme.fonts.size[size].sm,
+    props.theme.fonts.size[size].xs
   )

src/responsive.js

 import breakpoints from "./breakpoints"
 import { css } from "styled-components"
 
-const responsive = (field, xl, lg, md, sm) => css`
+const responsive = (field, xl, lg, md, sm, xs) => css`
   ${field}: ${xl};
@@ -21,4 +21,9 @@ ${xl !== lg && `
   `}
+  ${sm !== xs && `
+  @media(max-width: ${breakpoints.xs + "px"}) {
+    ${field}: ${xs};
+  }
+  `}
 `
 
 export { responsive as default }

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

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

14803

increased by4.44%

Lines of code

506

increased by4.98%

No dependency changes