@mysugr/spring-core - npm Package Compare versions

Comparing version 0.7.2 to 0.7.3

dist/index.cjs.js

@@ -37,3 +37,3 @@ 'use strict';
 
-var css = ".Button_button__3_Ozh {\n  font-family: \"Brandon Text\", \"Trebuchet MS\", sans-serif;\n  font-size: 1rem;\n  font-weight: 400;\n  background-color: #8eb927;\n  border-radius: 6px;\n  border: 0;\n  color: white;\n  cursor: pointer;\n  line-height: 36px;\n  min-width: 72px;\n  padding: 0 8px;\n  position: relative;\n  transition: background-color 0.1s ease-in; }\n  @media screen and (min-width: 768px) {\n    .Button_button__3_Ozh {\n      font-size: 1rem; } }\n  @media screen and (min-width: 1024px) {\n    .Button_button__3_Ozh {\n      font-size: 1.0625rem; } }\n  @media screen and (min-weight: 768px) {\n    .Button_button__3_Ozh {\n      font-weight: 400; } }\n  @media screen and (min-weight: 1024px) {\n    .Button_button__3_Ozh {\n      font-weight: 500; } }\n  .Button_button__3_Ozh::before {\n    border-radius: 6px;\n    border: 2px solid #8eb927;\n    content: ' ';\n    height: calc(100% - 8px);\n    left: 2px;\n    position: absolute;\n    top: 2px;\n    transition: border-color 0.1s ease-in;\n    width: calc(100% - 8px); }\n  .Button_button__3_Ozh:hover {\n    background-color: #72951f; }\n    .Button_button__3_Ozh:hover::before {\n      border-color: #72951f; }\n  .Button_button__3_Ozh.Button_focus__6iQfE, .Button_button__3_Ozh:focus {\n    background-color: #8eb927; }\n    .Button_button__3_Ozh.Button_focus__6iQfE::before, .Button_button__3_Ozh:focus::before {\n      border-color: white; }\n\n.Button_large__1AC7w {\n  font-size: 1.125rem;\n  line-height: 44px;\n  min-width: 88px;\n  padding-left: 10px;\n  padding-right: 10px; }\n  @media screen and (min-width: 768px) {\n    .Button_large__1AC7w {\n      font-size: 1.125rem; } }\n  @media screen and (min-width: 1024px) {\n    .Button_large__1AC7w {\n      font-size: 1.19531rem; } }\n\n.Button_slim__3DaeJ {\n  font-size: 0.875rem;\n  line-height: 30px; }\n  @media screen and (min-width: 768px) {\n    .Button_slim__3DaeJ {\n      font-size: 0.875rem; } }\n  @media screen and (min-width: 1024px) {\n    .Button_slim__3DaeJ {\n      font-size: 0.92969rem; } }\n\n.Button_line__2JqtO {\n  background-color: transparent;\n  color: #8eb927; }\n  .Button_line__2JqtO:hover {\n    background-color: #f3f8e9; }\n    .Button_line__2JqtO:hover::before {\n      border-color: #8eb927; }\n  .Button_line__2JqtO.Button_focus__6iQfE, .Button_line__2JqtO:focus {\n    background-color: transparent;\n    color: #72951f; }\n    .Button_line__2JqtO.Button_focus__6iQfE::before, .Button_line__2JqtO:focus::before {\n      border-color: #72951f; }\n\n.Button_text__74Hf2 {\n  background-color: transparent;\n  color: #8eb927; }\n  .Button_text__74Hf2::before {\n    border-color: transparent; }\n  .Button_text__74Hf2:hover {\n    background-color: transparent;\n    color: #72951f; }\n    .Button_text__74Hf2:hover::before {\n      border-color: transparent; }\n  .Button_text__74Hf2.Button_focus__6iQfE, .Button_text__74Hf2:focus {\n    background-color: transparent; }\n    .Button_text__74Hf2.Button_focus__6iQfE::before, .Button_text__74Hf2:focus::before {\n      border-color: transparent; }\n\n.Button_inverse__11bW2 {\n  background-color: #ffffff;\n  color: #8eb927; }\n  .Button_inverse__11bW2::before {\n    border-color: #ffffff; }\n  .Button_inverse__11bW2:hover {\n    background-color: #ffffff;\n    color: #72951f; }\n    .Button_inverse__11bW2:hover::before {\n      border-color: #ffffff; }\n  .Button_inverse__11bW2.Button_focus__6iQfE, .Button_inverse__11bW2:focus {\n    background-color: #ffffff; }\n\n.Button_secondary__3Hm6m {\n  background-color: #ff8819; }\n  .Button_secondary__3Hm6m::before {\n    border-color: #ff8819; }\n  .Button_secondary__3Hm6m:hover {\n    background-color: #e07716; }\n    .Button_secondary__3Hm6m:hover::before {\n      border-color: #e07716; }\n  .Button_secondary__3Hm6m.Button_focus__6iQfE, .Button_secondary__3Hm6m:focus {\n    background-color: #ff8819; }\n    .Button_secondary__3Hm6m.Button_focus__6iQfE::before, .Button_secondary__3Hm6m:focus::before {\n      border-color: white; }\n  .Button_secondary__3Hm6m.Button_line__2JqtO {\n    background-color: transparent;\n    color: #ff8819; }\n    .Button_secondary__3Hm6m.Button_line__2JqtO:hover {\n      background-color: #fff3e8; }\n    .Button_secondary__3Hm6m.Button_line__2JqtO.Button_focus__6iQfE, .Button_secondary__3Hm6m.Button_line__2JqtO:focus {\n      color: #e07716; }\n      .Button_secondary__3Hm6m.Button_line__2JqtO.Button_focus__6iQfE::before, .Button_secondary__3Hm6m.Button_line__2JqtO:focus::before {\n        border-color: #e07716; }\n  .Button_secondary__3Hm6m.Button_text__74Hf2 {\n    background-color: transparent;\n    color: #ff8819; }\n    .Button_secondary__3Hm6m.Button_text__74Hf2::before {\n      border-color: transparent; }\n    .Button_secondary__3Hm6m.Button_text__74Hf2:hover {\n      color: #e07716; }\n\n.Button_tertiary__1vMCD {\n  background-color: #479d95; }\n  .Button_tertiary__1vMCD::before {\n    border-color: #479d95; }\n  .Button_tertiary__1vMCD:hover {\n    background-color: #088e85; }\n    .Button_tertiary__1vMCD:hover::before {\n      border-color: #088e85; }\n  .Button_tertiary__1vMCD.Button_focus__6iQfE, .Button_tertiary__1vMCD:focus {\n    background-color: #479d95; }\n    .Button_tertiary__1vMCD.Button_focus__6iQfE::before, .Button_tertiary__1vMCD:focus::before {\n      border-color: white; }\n  .Button_tertiary__1vMCD.Button_line__2JqtO {\n    background-color: transparent;\n    color: #479d95; }\n    .Button_tertiary__1vMCD.Button_line__2JqtO:hover {\n      background-color: #edf5f4; }\n    .Button_tertiary__1vMCD.Button_line__2JqtO.Button_focus__6iQfE, .Button_tertiary__1vMCD.Button_line__2JqtO:focus {\n      color: #088e85; }\n      .Button_tertiary__1vMCD.Button_line__2JqtO.Button_focus__6iQfE::before, .Button_tertiary__1vMCD.Button_line__2JqtO:focus::before {\n        border-color: #088e85; }\n  .Button_tertiary__1vMCD.Button_text__74Hf2 {\n    background-color: transparent;\n    color: #479d95; }\n    .Button_tertiary__1vMCD.Button_text__74Hf2::before {\n      border-color: transparent; }\n    .Button_tertiary__1vMCD.Button_text__74Hf2:hover {\n      color: #088e85; }\n\n.Button_button__3_Ozh.Button_disabled__3O5v9 {\n  background-color: #c4c2c2;\n  cursor: not-allowed; }\n  .Button_button__3_Ozh.Button_disabled__3O5v9::before {\n    border-color: #c4c2c2; }\n  .Button_button__3_Ozh.Button_disabled__3O5v9.Button_line__2JqtO {\n    background-color: transparent;\n    color: #a3a3a3; }\n    .Button_button__3_Ozh.Button_disabled__3O5v9.Button_line__2JqtO::before {\n      border-color: #a3a3a3; }\n  .Button_button__3_Ozh.Button_disabled__3O5v9.Button_text__74Hf2 {\n    background-color: transparent;\n    color: #a3a3a3; }\n    .Button_button__3_Ozh.Button_disabled__3O5v9.Button_text__74Hf2::before {\n      border-color: transparent; }\n  .Button_button__3_Ozh.Button_disabled__3O5v9.Button_inverse__11bW2 {\n    background-color: #ffffff;\n    color: #a3a3a3; }\n    .Button_button__3_Ozh.Button_disabled__3O5v9.Button_inverse__11bW2::before {\n      border-color: #ffffff; }\n";
+var css = ".Button_button__3_Ozh {\n  font-family: Brandon Text, 'Trebuchet MS', sans-serif;\n  font-size: 1rem;\n  font-weight: 400;\n  background-color: #8eb927;\n  border-radius: 6px;\n  border: 0;\n  color: #ffffff;\n  cursor: pointer;\n  line-height: 36px;\n  min-width: 72px;\n  padding: 0 8px;\n  position: relative;\n  transition: background-color 0.1s ease-in; }\n  @media screen and (min-width: 768px) {\n    .Button_button__3_Ozh {\n      font-size: 1rem; } }\n  @media screen and (min-width: 1024px) {\n    .Button_button__3_Ozh {\n      font-size: 1.0625rem; } }\n  @media screen and (min-weight: 768px) {\n    .Button_button__3_Ozh {\n      font-weight: 400; } }\n  @media screen and (min-weight: 1024px) {\n    .Button_button__3_Ozh {\n      font-weight: 400; } }\n  .Button_button__3_Ozh::before {\n    border-radius: 6px;\n    border: 2px solid #8eb927;\n    content: ' ';\n    height: calc(100% - 8px);\n    left: 2px;\n    position: absolute;\n    top: 2px;\n    transition: border-color 0.1s ease-in;\n    width: calc(100% - 8px); }\n  .Button_button__3_Ozh:hover {\n    background-color: #72951f; }\n    .Button_button__3_Ozh:hover::before {\n      border-color: #72951f; }\n  .Button_button__3_Ozh.Button_focus__6iQfE, .Button_button__3_Ozh:focus {\n    background-color: #8eb927; }\n    .Button_button__3_Ozh.Button_focus__6iQfE::before, .Button_button__3_Ozh:focus::before {\n      border-color: #ffffff; }\n\n.Button_large__1AC7w {\n  font-size: 1.125rem;\n  line-height: 44px;\n  min-width: 88px;\n  padding-left: 10px;\n  padding-right: 10px; }\n  @media screen and (min-width: 768px) {\n    .Button_large__1AC7w {\n      font-size: 1.125rem; } }\n  @media screen and (min-width: 1024px) {\n    .Button_large__1AC7w {\n      font-size: 1.19531rem; } }\n\n.Button_slim__3DaeJ {\n  font-size: 0.875rem;\n  line-height: 30px; }\n  @media screen and (min-width: 768px) {\n    .Button_slim__3DaeJ {\n      font-size: 0.875rem; } }\n  @media screen and (min-width: 1024px) {\n    .Button_slim__3DaeJ {\n      font-size: 0.92969rem; } }\n\n.Button_line__2JqtO {\n  background-color: transparent;\n  color: #8eb927; }\n  .Button_line__2JqtO:hover {\n    background-color: #f3f8e9; }\n    .Button_line__2JqtO:hover::before {\n      border-color: #8eb927; }\n  .Button_line__2JqtO.Button_focus__6iQfE, .Button_line__2JqtO:focus {\n    background-color: transparent;\n    color: #72951f; }\n    .Button_line__2JqtO.Button_focus__6iQfE::before, .Button_line__2JqtO:focus::before {\n      border-color: #72951f; }\n\n.Button_text__74Hf2 {\n  background-color: transparent;\n  color: #8eb927; }\n  .Button_text__74Hf2::before {\n    border-color: transparent; }\n  .Button_text__74Hf2:hover {\n    background-color: transparent;\n    color: #72951f; }\n    .Button_text__74Hf2:hover::before {\n      border-color: transparent; }\n  .Button_text__74Hf2.Button_focus__6iQfE, .Button_text__74Hf2:focus {\n    background-color: transparent; }\n    .Button_text__74Hf2.Button_focus__6iQfE::before, .Button_text__74Hf2:focus::before {\n      border-color: transparent; }\n\n.Button_inverse__11bW2 {\n  background-color: #ffffff;\n  color: #8eb927; }\n  .Button_inverse__11bW2::before {\n    border-color: #ffffff; }\n  .Button_inverse__11bW2:hover {\n    background-color: #ffffff;\n    color: #72951f; }\n    .Button_inverse__11bW2:hover::before {\n      border-color: #ffffff; }\n  .Button_inverse__11bW2.Button_focus__6iQfE, .Button_inverse__11bW2:focus {\n    background-color: #ffffff; }\n\n.Button_secondary__3Hm6m {\n  background-color: #ff8819; }\n  .Button_secondary__3Hm6m::before {\n    border-color: #ff8819; }\n  .Button_secondary__3Hm6m:hover {\n    background-color: #e07716; }\n    .Button_secondary__3Hm6m:hover::before {\n      border-color: #e07716; }\n  .Button_secondary__3Hm6m.Button_focus__6iQfE, .Button_secondary__3Hm6m:focus {\n    background-color: #ff8819; }\n    .Button_secondary__3Hm6m.Button_focus__6iQfE::before, .Button_secondary__3Hm6m:focus::before {\n      border-color: #ffffff; }\n  .Button_secondary__3Hm6m.Button_line__2JqtO {\n    background-color: transparent;\n    color: #ff8819; }\n    .Button_secondary__3Hm6m.Button_line__2JqtO:hover {\n      background-color: #fff3e8; }\n    .Button_secondary__3Hm6m.Button_line__2JqtO.Button_focus__6iQfE, .Button_secondary__3Hm6m.Button_line__2JqtO:focus {\n      color: #e07716; }\n      .Button_secondary__3Hm6m.Button_line__2JqtO.Button_focus__6iQfE::before, .Button_secondary__3Hm6m.Button_line__2JqtO:focus::before {\n        border-color: #e07716; }\n  .Button_secondary__3Hm6m.Button_text__74Hf2 {\n    background-color: transparent;\n    color: #ff8819; }\n    .Button_secondary__3Hm6m.Button_text__74Hf2::before {\n      border-color: transparent; }\n    .Button_secondary__3Hm6m.Button_text__74Hf2:hover {\n      color: #e07716; }\n\n.Button_tertiary__1vMCD {\n  background-color: #479d95; }\n  .Button_tertiary__1vMCD::before {\n    border-color: #479d95; }\n  .Button_tertiary__1vMCD:hover {\n    background-color: #088e85; }\n    .Button_tertiary__1vMCD:hover::before {\n      border-color: #088e85; }\n  .Button_tertiary__1vMCD.Button_focus__6iQfE, .Button_tertiary__1vMCD:focus {\n    background-color: #479d95; }\n    .Button_tertiary__1vMCD.Button_focus__6iQfE::before, .Button_tertiary__1vMCD:focus::before {\n      border-color: #ffffff; }\n  .Button_tertiary__1vMCD.Button_line__2JqtO {\n    background-color: transparent;\n    color: #479d95; }\n    .Button_tertiary__1vMCD.Button_line__2JqtO.Button_focus__6iQfE, .Button_tertiary__1vMCD.Button_line__2JqtO:focus {\n      color: #088e85; }\n      .Button_tertiary__1vMCD.Button_line__2JqtO.Button_focus__6iQfE::before, .Button_tertiary__1vMCD.Button_line__2JqtO:focus::before {\n        border-color: #088e85; }\n  .Button_tertiary__1vMCD.Button_text__74Hf2 {\n    background-color: transparent;\n    color: #479d95; }\n    .Button_tertiary__1vMCD.Button_text__74Hf2::before {\n      border-color: transparent; }\n    .Button_tertiary__1vMCD.Button_text__74Hf2:hover {\n      color: #088e85; }\n\n.Button_button__3_Ozh.Button_disabled__3O5v9 {\n  background-color: #c4c2c2;\n  cursor: not-allowed; }\n  .Button_button__3_Ozh.Button_disabled__3O5v9::before {\n    border-color: #c4c2c2; }\n  .Button_button__3_Ozh.Button_disabled__3O5v9.Button_line__2JqtO {\n    background-color: transparent;\n    color: #a3a3a3; }\n    .Button_button__3_Ozh.Button_disabled__3O5v9.Button_line__2JqtO::before {\n      border-color: #a3a3a3; }\n  .Button_button__3_Ozh.Button_disabled__3O5v9.Button_text__74Hf2 {\n    background-color: transparent;\n    color: #a3a3a3; }\n    .Button_button__3_Ozh.Button_disabled__3O5v9.Button_text__74Hf2::before {\n      border-color: transparent; }\n  .Button_button__3_Ozh.Button_disabled__3O5v9.Button_inverse__11bW2 {\n    background-color: #ffffff;\n    color: #a3a3a3; }\n    .Button_button__3_Ozh.Button_disabled__3O5v9.Button_inverse__11bW2::before {\n      border-color: #ffffff; }\n";
 var Button = {"button":"Button_button__3_Ozh","focus":"Button_focus__6iQfE","large":"Button_large__1AC7w","slim":"Button_slim__3DaeJ","line":"Button_line__2JqtO","text":"Button_text__74Hf2","inverse":"Button_inverse__11bW2","secondary":"Button_secondary__3Hm6m","tertiary":"Button_tertiary__1vMCD","disabled":"Button_disabled__3O5v9"};
@@ -100,4 +100,187 @@ styleInject(css);
 
+const breakpoint = {
+  medium: '768px',
+  large: '1024px',
+  extraLarge: '1440px',
+};
+
+const color = {
+  // Primary colors
+  msGreen: '#8eb927',
+  msMidnight: '#343434',
+  msTwilight: '#737373',
+  msNoon: '#a3a3a3',
+  msDim: '#c4c2c2',
+  msDaytime: '#e6e6e6',
+  msShady: '#f2f2f2',
+  msNeutral: '#fafafa',
+  msWhite: '#ffffff',
+
+  // Secondary colors
+  msRed: '#e75d32',
+  msGold: '#f0ac00',
+  msPetrol: '#479d95',
+  msDarkPetrol: '#088e85',
+  msOrange: '#ff8819',
+  msDarkOrange: '#e07716',
+  msPurple: '#a53257',
+  msBrown: '#9e6c3b',
+  msTree: '#72951f',
+  msBlue: '#66d4d9',
+
+  // Gradations of ms-green
+  msGreen70: '#afce67',
+  msGreen50: '#c6dc93',
+  msGreen40: '#d2e3a9',
+  msGreen20: '#e8f1d4',
+  msGreen10: '#f3f8e9',
+
+  // Gradations of ms-orange
+  msOrange70: '#ffac5e',
+  msOrange50: '#ffc48c',
+  msOrange20: '#ffe7d1',
+  msOrange10: '#fff3e8',
+
+  // Gradations of ms-petrol
+  msPetrol70: '#7ebab5',
+  msPetrol50: '#a3ceca',
+  msPetrol20: '#daebea',
+  msPetrol10: '#edf5f4',
+};
+
+const fontWeights = {
+  thin: 100,
+  light: 200,
+  regular: 400,
+  medium: 500,
+  bold: 700,
+  black: 900,
+};
+
+const brandonText = 'Brandon Text';
+const fontFamily = `${brandonText}, 'Trebuchet MS', sans-serif`;
+
+const typography = {
+  fontFamily,
+  fontSize: '16px',
+  fontWeight: fontWeights.regular,
+  lineHeight: 1,
+  paragraph: {
+    fontSize: '16px',
+    fontWeight: fontWeights.regular,
+    lineHeight: 1.5,
+  },
+  h1: {
+    fontSize: '28px',
+    fontWeight: fontWeights.medium,
+    lineHeight: 1.2,
+  },
+  h2: {
+    fontSize: '24px',
+    fontWeight: fontWeights.medium,
+    lineHeight: 1.2,
+  },
+  h3: {
+    fontSize: '21px',
+    fontWeight: fontWeights.medium,
+    lineHeight: 1.2,
+  },
+  h4: {
+    fontSize: '17px',
+    fontWeight: fontWeights.medium,
+    lineHeight: 1.5,
+  },
+  medium: {
+    fontSize: '16px',
+    fontWeight: fontWeights.regular,
+    paragraph: {
+      fontSize: '16px',
+      fontWeight: fontWeights.regular,
+      lineHeight: 1.5,
+    },
+    h1: {
+      fontSize: '36px',
+      fontWeight: fontWeights.medium,
+      lineHeight: 1.2,
+    },
+    h2: {
+      fontSize: '26px',
+      fontWeight: fontWeights.medium,
+      lineHeight: 1.5,
+    },
+    h3: {
+      fontSize: '21px',
+      fontWeight: fontWeights.medium,
+      lineHeight: 1.5,
+    },
+    h4: {
+      fontSize: '17px',
+      fontWeight: fontWeights.medium,
+      lineHeight: 1.5,
+    },
+  },
+  large: {
+    fontSize: '17px',
+    fontWeight: fontWeights.regular,
+    paragraph: {
+      fontSize: '17px',
+      fontWeight: fontWeights.regular,
+      lineHeight: 1.5,
+      marginToH1Top: '22px',
+      marginToH2Top: '12px',
+      marginToH3Top: '6px',
+      marginToH4Top: '4px',
+      marginToParagraphTop: '16px',
+    },
+    h1: {
+      fontSize: '42px',
+      fontWeight: fontWeights.medium,
+      lineHeight: 1.2,
+    },
+    h2: {
+      fontSize: '32px',
+      fontWeight: fontWeights.medium,
+      lineHeight: 1.2,
+    },
+    h3: {
+      fontSize: '24px',
+      fontWeight: fontWeights.medium,
+      lineHeight: 1.2,
+    },
+    h4: {
+      fontSize: '20px',
+      fontWeight: fontWeights.medium,
+      lineHeight: 1.5,
+    },
+  },
+};
+
+const constants = {
+  breakpoint,
+  color,
+  typography,
+};
+
+function fontWeightName(fontWeight) {
+    var weight = Object.keys(fontWeights).filter(function (weightName) { return fontWeights[weightName] === fontWeight; });
+    return weight[0] ? weight[0] : '';
+}
+
+function pxToEm(pixelsArg, options) {
+    if (options === void 0) { options = {}; }
+    var pixels = typeof pixelsArg === 'string'
+        ? parseInt(pixelsArg.replace('px', ''), 10)
+        : pixelsArg;
+    var context = typeof options.context === 'string'
+        ? parseInt(options.context.replace('px', ''), 10)
+        : options.context || 16;
+    var rem = options.rem || false;
+    return "" + pixels / context + (rem ? 'rem' : 'em');
+}
+
 /* istanbul ignore file */
 
 exports.Button = Button$1;
+exports.constants = constants;
+exports.pxToEm = pxToEm;
+exports.fontWeightName = fontWeightName;

dist/index.es.js

@@ -31,3 +31,3 @@ import classNames from 'classnames';
 
-var css = ".Button_button__3_Ozh {\n  font-family: \"Brandon Text\", \"Trebuchet MS\", sans-serif;\n  font-size: 1rem;\n  font-weight: 400;\n  background-color: #8eb927;\n  border-radius: 6px;\n  border: 0;\n  color: white;\n  cursor: pointer;\n  line-height: 36px;\n  min-width: 72px;\n  padding: 0 8px;\n  position: relative;\n  transition: background-color 0.1s ease-in; }\n  @media screen and (min-width: 768px) {\n    .Button_button__3_Ozh {\n      font-size: 1rem; } }\n  @media screen and (min-width: 1024px) {\n    .Button_button__3_Ozh {\n      font-size: 1.0625rem; } }\n  @media screen and (min-weight: 768px) {\n    .Button_button__3_Ozh {\n      font-weight: 400; } }\n  @media screen and (min-weight: 1024px) {\n    .Button_button__3_Ozh {\n      font-weight: 500; } }\n  .Button_button__3_Ozh::before {\n    border-radius: 6px;\n    border: 2px solid #8eb927;\n    content: ' ';\n    height: calc(100% - 8px);\n    left: 2px;\n    position: absolute;\n    top: 2px;\n    transition: border-color 0.1s ease-in;\n    width: calc(100% - 8px); }\n  .Button_button__3_Ozh:hover {\n    background-color: #72951f; }\n    .Button_button__3_Ozh:hover::before {\n      border-color: #72951f; }\n  .Button_button__3_Ozh.Button_focus__6iQfE, .Button_button__3_Ozh:focus {\n    background-color: #8eb927; }\n    .Button_button__3_Ozh.Button_focus__6iQfE::before, .Button_button__3_Ozh:focus::before {\n      border-color: white; }\n\n.Button_large__1AC7w {\n  font-size: 1.125rem;\n  line-height: 44px;\n  min-width: 88px;\n  padding-left: 10px;\n  padding-right: 10px; }\n  @media screen and (min-width: 768px) {\n    .Button_large__1AC7w {\n      font-size: 1.125rem; } }\n  @media screen and (min-width: 1024px) {\n    .Button_large__1AC7w {\n      font-size: 1.19531rem; } }\n\n.Button_slim__3DaeJ {\n  font-size: 0.875rem;\n  line-height: 30px; }\n  @media screen and (min-width: 768px) {\n    .Button_slim__3DaeJ {\n      font-size: 0.875rem; } }\n  @media screen and (min-width: 1024px) {\n    .Button_slim__3DaeJ {\n      font-size: 0.92969rem; } }\n\n.Button_line__2JqtO {\n  background-color: transparent;\n  color: #8eb927; }\n  .Button_line__2JqtO:hover {\n    background-color: #f3f8e9; }\n    .Button_line__2JqtO:hover::before {\n      border-color: #8eb927; }\n  .Button_line__2JqtO.Button_focus__6iQfE, .Button_line__2JqtO:focus {\n    background-color: transparent;\n    color: #72951f; }\n    .Button_line__2JqtO.Button_focus__6iQfE::before, .Button_line__2JqtO:focus::before {\n      border-color: #72951f; }\n\n.Button_text__74Hf2 {\n  background-color: transparent;\n  color: #8eb927; }\n  .Button_text__74Hf2::before {\n    border-color: transparent; }\n  .Button_text__74Hf2:hover {\n    background-color: transparent;\n    color: #72951f; }\n    .Button_text__74Hf2:hover::before {\n      border-color: transparent; }\n  .Button_text__74Hf2.Button_focus__6iQfE, .Button_text__74Hf2:focus {\n    background-color: transparent; }\n    .Button_text__74Hf2.Button_focus__6iQfE::before, .Button_text__74Hf2:focus::before {\n      border-color: transparent; }\n\n.Button_inverse__11bW2 {\n  background-color: #ffffff;\n  color: #8eb927; }\n  .Button_inverse__11bW2::before {\n    border-color: #ffffff; }\n  .Button_inverse__11bW2:hover {\n    background-color: #ffffff;\n    color: #72951f; }\n    .Button_inverse__11bW2:hover::before {\n      border-color: #ffffff; }\n  .Button_inverse__11bW2.Button_focus__6iQfE, .Button_inverse__11bW2:focus {\n    background-color: #ffffff; }\n\n.Button_secondary__3Hm6m {\n  background-color: #ff8819; }\n  .Button_secondary__3Hm6m::before {\n    border-color: #ff8819; }\n  .Button_secondary__3Hm6m:hover {\n    background-color: #e07716; }\n    .Button_secondary__3Hm6m:hover::before {\n      border-color: #e07716; }\n  .Button_secondary__3Hm6m.Button_focus__6iQfE, .Button_secondary__3Hm6m:focus {\n    background-color: #ff8819; }\n    .Button_secondary__3Hm6m.Button_focus__6iQfE::before, .Button_secondary__3Hm6m:focus::before {\n      border-color: white; }\n  .Button_secondary__3Hm6m.Button_line__2JqtO {\n    background-color: transparent;\n    color: #ff8819; }\n    .Button_secondary__3Hm6m.Button_line__2JqtO:hover {\n      background-color: #fff3e8; }\n    .Button_secondary__3Hm6m.Button_line__2JqtO.Button_focus__6iQfE, .Button_secondary__3Hm6m.Button_line__2JqtO:focus {\n      color: #e07716; }\n      .Button_secondary__3Hm6m.Button_line__2JqtO.Button_focus__6iQfE::before, .Button_secondary__3Hm6m.Button_line__2JqtO:focus::before {\n        border-color: #e07716; }\n  .Button_secondary__3Hm6m.Button_text__74Hf2 {\n    background-color: transparent;\n    color: #ff8819; }\n    .Button_secondary__3Hm6m.Button_text__74Hf2::before {\n      border-color: transparent; }\n    .Button_secondary__3Hm6m.Button_text__74Hf2:hover {\n      color: #e07716; }\n\n.Button_tertiary__1vMCD {\n  background-color: #479d95; }\n  .Button_tertiary__1vMCD::before {\n    border-color: #479d95; }\n  .Button_tertiary__1vMCD:hover {\n    background-color: #088e85; }\n    .Button_tertiary__1vMCD:hover::before {\n      border-color: #088e85; }\n  .Button_tertiary__1vMCD.Button_focus__6iQfE, .Button_tertiary__1vMCD:focus {\n    background-color: #479d95; }\n    .Button_tertiary__1vMCD.Button_focus__6iQfE::before, .Button_tertiary__1vMCD:focus::before {\n      border-color: white; }\n  .Button_tertiary__1vMCD.Button_line__2JqtO {\n    background-color: transparent;\n    color: #479d95; }\n    .Button_tertiary__1vMCD.Button_line__2JqtO:hover {\n      background-color: #edf5f4; }\n    .Button_tertiary__1vMCD.Button_line__2JqtO.Button_focus__6iQfE, .Button_tertiary__1vMCD.Button_line__2JqtO:focus {\n      color: #088e85; }\n      .Button_tertiary__1vMCD.Button_line__2JqtO.Button_focus__6iQfE::before, .Button_tertiary__1vMCD.Button_line__2JqtO:focus::before {\n        border-color: #088e85; }\n  .Button_tertiary__1vMCD.Button_text__74Hf2 {\n    background-color: transparent;\n    color: #479d95; }\n    .Button_tertiary__1vMCD.Button_text__74Hf2::before {\n      border-color: transparent; }\n    .Button_tertiary__1vMCD.Button_text__74Hf2:hover {\n      color: #088e85; }\n\n.Button_button__3_Ozh.Button_disabled__3O5v9 {\n  background-color: #c4c2c2;\n  cursor: not-allowed; }\n  .Button_button__3_Ozh.Button_disabled__3O5v9::before {\n    border-color: #c4c2c2; }\n  .Button_button__3_Ozh.Button_disabled__3O5v9.Button_line__2JqtO {\n    background-color: transparent;\n    color: #a3a3a3; }\n    .Button_button__3_Ozh.Button_disabled__3O5v9.Button_line__2JqtO::before {\n      border-color: #a3a3a3; }\n  .Button_button__3_Ozh.Button_disabled__3O5v9.Button_text__74Hf2 {\n    background-color: transparent;\n    color: #a3a3a3; }\n    .Button_button__3_Ozh.Button_disabled__3O5v9.Button_text__74Hf2::before {\n      border-color: transparent; }\n  .Button_button__3_Ozh.Button_disabled__3O5v9.Button_inverse__11bW2 {\n    background-color: #ffffff;\n    color: #a3a3a3; }\n    .Button_button__3_Ozh.Button_disabled__3O5v9.Button_inverse__11bW2::before {\n      border-color: #ffffff; }\n";
+var css = ".Button_button__3_Ozh {\n  font-family: Brandon Text, 'Trebuchet MS', sans-serif;\n  font-size: 1rem;\n  font-weight: 400;\n  background-color: #8eb927;\n  border-radius: 6px;\n  border: 0;\n  color: #ffffff;\n  cursor: pointer;\n  line-height: 36px;\n  min-width: 72px;\n  padding: 0 8px;\n  position: relative;\n  transition: background-color 0.1s ease-in; }\n  @media screen and (min-width: 768px) {\n    .Button_button__3_Ozh {\n      font-size: 1rem; } }\n  @media screen and (min-width: 1024px) {\n    .Button_button__3_Ozh {\n      font-size: 1.0625rem; } }\n  @media screen and (min-weight: 768px) {\n    .Button_button__3_Ozh {\n      font-weight: 400; } }\n  @media screen and (min-weight: 1024px) {\n    .Button_button__3_Ozh {\n      font-weight: 400; } }\n  .Button_button__3_Ozh::before {\n    border-radius: 6px;\n    border: 2px solid #8eb927;\n    content: ' ';\n    height: calc(100% - 8px);\n    left: 2px;\n    position: absolute;\n    top: 2px;\n    transition: border-color 0.1s ease-in;\n    width: calc(100% - 8px); }\n  .Button_button__3_Ozh:hover {\n    background-color: #72951f; }\n    .Button_button__3_Ozh:hover::before {\n      border-color: #72951f; }\n  .Button_button__3_Ozh.Button_focus__6iQfE, .Button_button__3_Ozh:focus {\n    background-color: #8eb927; }\n    .Button_button__3_Ozh.Button_focus__6iQfE::before, .Button_button__3_Ozh:focus::before {\n      border-color: #ffffff; }\n\n.Button_large__1AC7w {\n  font-size: 1.125rem;\n  line-height: 44px;\n  min-width: 88px;\n  padding-left: 10px;\n  padding-right: 10px; }\n  @media screen and (min-width: 768px) {\n    .Button_large__1AC7w {\n      font-size: 1.125rem; } }\n  @media screen and (min-width: 1024px) {\n    .Button_large__1AC7w {\n      font-size: 1.19531rem; } }\n\n.Button_slim__3DaeJ {\n  font-size: 0.875rem;\n  line-height: 30px; }\n  @media screen and (min-width: 768px) {\n    .Button_slim__3DaeJ {\n      font-size: 0.875rem; } }\n  @media screen and (min-width: 1024px) {\n    .Button_slim__3DaeJ {\n      font-size: 0.92969rem; } }\n\n.Button_line__2JqtO {\n  background-color: transparent;\n  color: #8eb927; }\n  .Button_line__2JqtO:hover {\n    background-color: #f3f8e9; }\n    .Button_line__2JqtO:hover::before {\n      border-color: #8eb927; }\n  .Button_line__2JqtO.Button_focus__6iQfE, .Button_line__2JqtO:focus {\n    background-color: transparent;\n    color: #72951f; }\n    .Button_line__2JqtO.Button_focus__6iQfE::before, .Button_line__2JqtO:focus::before {\n      border-color: #72951f; }\n\n.Button_text__74Hf2 {\n  background-color: transparent;\n  color: #8eb927; }\n  .Button_text__74Hf2::before {\n    border-color: transparent; }\n  .Button_text__74Hf2:hover {\n    background-color: transparent;\n    color: #72951f; }\n    .Button_text__74Hf2:hover::before {\n      border-color: transparent; }\n  .Button_text__74Hf2.Button_focus__6iQfE, .Button_text__74Hf2:focus {\n    background-color: transparent; }\n    .Button_text__74Hf2.Button_focus__6iQfE::before, .Button_text__74Hf2:focus::before {\n      border-color: transparent; }\n\n.Button_inverse__11bW2 {\n  background-color: #ffffff;\n  color: #8eb927; }\n  .Button_inverse__11bW2::before {\n    border-color: #ffffff; }\n  .Button_inverse__11bW2:hover {\n    background-color: #ffffff;\n    color: #72951f; }\n    .Button_inverse__11bW2:hover::before {\n      border-color: #ffffff; }\n  .Button_inverse__11bW2.Button_focus__6iQfE, .Button_inverse__11bW2:focus {\n    background-color: #ffffff; }\n\n.Button_secondary__3Hm6m {\n  background-color: #ff8819; }\n  .Button_secondary__3Hm6m::before {\n    border-color: #ff8819; }\n  .Button_secondary__3Hm6m:hover {\n    background-color: #e07716; }\n    .Button_secondary__3Hm6m:hover::before {\n      border-color: #e07716; }\n  .Button_secondary__3Hm6m.Button_focus__6iQfE, .Button_secondary__3Hm6m:focus {\n    background-color: #ff8819; }\n    .Button_secondary__3Hm6m.Button_focus__6iQfE::before, .Button_secondary__3Hm6m:focus::before {\n      border-color: #ffffff; }\n  .Button_secondary__3Hm6m.Button_line__2JqtO {\n    background-color: transparent;\n    color: #ff8819; }\n    .Button_secondary__3Hm6m.Button_line__2JqtO:hover {\n      background-color: #fff3e8; }\n    .Button_secondary__3Hm6m.Button_line__2JqtO.Button_focus__6iQfE, .Button_secondary__3Hm6m.Button_line__2JqtO:focus {\n      color: #e07716; }\n      .Button_secondary__3Hm6m.Button_line__2JqtO.Button_focus__6iQfE::before, .Button_secondary__3Hm6m.Button_line__2JqtO:focus::before {\n        border-color: #e07716; }\n  .Button_secondary__3Hm6m.Button_text__74Hf2 {\n    background-color: transparent;\n    color: #ff8819; }\n    .Button_secondary__3Hm6m.Button_text__74Hf2::before {\n      border-color: transparent; }\n    .Button_secondary__3Hm6m.Button_text__74Hf2:hover {\n      color: #e07716; }\n\n.Button_tertiary__1vMCD {\n  background-color: #479d95; }\n  .Button_tertiary__1vMCD::before {\n    border-color: #479d95; }\n  .Button_tertiary__1vMCD:hover {\n    background-color: #088e85; }\n    .Button_tertiary__1vMCD:hover::before {\n      border-color: #088e85; }\n  .Button_tertiary__1vMCD.Button_focus__6iQfE, .Button_tertiary__1vMCD:focus {\n    background-color: #479d95; }\n    .Button_tertiary__1vMCD.Button_focus__6iQfE::before, .Button_tertiary__1vMCD:focus::before {\n      border-color: #ffffff; }\n  .Button_tertiary__1vMCD.Button_line__2JqtO {\n    background-color: transparent;\n    color: #479d95; }\n    .Button_tertiary__1vMCD.Button_line__2JqtO.Button_focus__6iQfE, .Button_tertiary__1vMCD.Button_line__2JqtO:focus {\n      color: #088e85; }\n      .Button_tertiary__1vMCD.Button_line__2JqtO.Button_focus__6iQfE::before, .Button_tertiary__1vMCD.Button_line__2JqtO:focus::before {\n        border-color: #088e85; }\n  .Button_tertiary__1vMCD.Button_text__74Hf2 {\n    background-color: transparent;\n    color: #479d95; }\n    .Button_tertiary__1vMCD.Button_text__74Hf2::before {\n      border-color: transparent; }\n    .Button_tertiary__1vMCD.Button_text__74Hf2:hover {\n      color: #088e85; }\n\n.Button_button__3_Ozh.Button_disabled__3O5v9 {\n  background-color: #c4c2c2;\n  cursor: not-allowed; }\n  .Button_button__3_Ozh.Button_disabled__3O5v9::before {\n    border-color: #c4c2c2; }\n  .Button_button__3_Ozh.Button_disabled__3O5v9.Button_line__2JqtO {\n    background-color: transparent;\n    color: #a3a3a3; }\n    .Button_button__3_Ozh.Button_disabled__3O5v9.Button_line__2JqtO::before {\n      border-color: #a3a3a3; }\n  .Button_button__3_Ozh.Button_disabled__3O5v9.Button_text__74Hf2 {\n    background-color: transparent;\n    color: #a3a3a3; }\n    .Button_button__3_Ozh.Button_disabled__3O5v9.Button_text__74Hf2::before {\n      border-color: transparent; }\n  .Button_button__3_Ozh.Button_disabled__3O5v9.Button_inverse__11bW2 {\n    background-color: #ffffff;\n    color: #a3a3a3; }\n    .Button_button__3_Ozh.Button_disabled__3O5v9.Button_inverse__11bW2::before {\n      border-color: #ffffff; }\n";
 var Button = {"button":"Button_button__3_Ozh","focus":"Button_focus__6iQfE","large":"Button_large__1AC7w","slim":"Button_slim__3DaeJ","line":"Button_line__2JqtO","text":"Button_text__74Hf2","inverse":"Button_inverse__11bW2","secondary":"Button_secondary__3Hm6m","tertiary":"Button_tertiary__1vMCD","disabled":"Button_disabled__3O5v9"};
@@ -94,4 +94,184 @@ styleInject(css);
 
+const breakpoint = {
+  medium: '768px',
+  large: '1024px',
+  extraLarge: '1440px',
+};
+
+const color = {
+  // Primary colors
+  msGreen: '#8eb927',
+  msMidnight: '#343434',
+  msTwilight: '#737373',
+  msNoon: '#a3a3a3',
+  msDim: '#c4c2c2',
+  msDaytime: '#e6e6e6',
+  msShady: '#f2f2f2',
+  msNeutral: '#fafafa',
+  msWhite: '#ffffff',
+
+  // Secondary colors
+  msRed: '#e75d32',
+  msGold: '#f0ac00',
+  msPetrol: '#479d95',
+  msDarkPetrol: '#088e85',
+  msOrange: '#ff8819',
+  msDarkOrange: '#e07716',
+  msPurple: '#a53257',
+  msBrown: '#9e6c3b',
+  msTree: '#72951f',
+  msBlue: '#66d4d9',
+
+  // Gradations of ms-green
+  msGreen70: '#afce67',
+  msGreen50: '#c6dc93',
+  msGreen40: '#d2e3a9',
+  msGreen20: '#e8f1d4',
+  msGreen10: '#f3f8e9',
+
+  // Gradations of ms-orange
+  msOrange70: '#ffac5e',
+  msOrange50: '#ffc48c',
+  msOrange20: '#ffe7d1',
+  msOrange10: '#fff3e8',
+
+  // Gradations of ms-petrol
+  msPetrol70: '#7ebab5',
+  msPetrol50: '#a3ceca',
+  msPetrol20: '#daebea',
+  msPetrol10: '#edf5f4',
+};
+
+const fontWeights = {
+  thin: 100,
+  light: 200,
+  regular: 400,
+  medium: 500,
+  bold: 700,
+  black: 900,
+};
+
+const brandonText = 'Brandon Text';
+const fontFamily = `${brandonText}, 'Trebuchet MS', sans-serif`;
+
+const typography = {
+  fontFamily,
+  fontSize: '16px',
+  fontWeight: fontWeights.regular,
+  lineHeight: 1,
+  paragraph: {
+    fontSize: '16px',
+    fontWeight: fontWeights.regular,
+    lineHeight: 1.5,
+  },
+  h1: {
+    fontSize: '28px',
+    fontWeight: fontWeights.medium,
+    lineHeight: 1.2,
+  },
+  h2: {
+    fontSize: '24px',
+    fontWeight: fontWeights.medium,
+    lineHeight: 1.2,
+  },
+  h3: {
+    fontSize: '21px',
+    fontWeight: fontWeights.medium,
+    lineHeight: 1.2,
+  },
+  h4: {
+    fontSize: '17px',
+    fontWeight: fontWeights.medium,
+    lineHeight: 1.5,
+  },
+  medium: {
+    fontSize: '16px',
+    fontWeight: fontWeights.regular,
+    paragraph: {
+      fontSize: '16px',
+      fontWeight: fontWeights.regular,
+      lineHeight: 1.5,
+    },
+    h1: {
+      fontSize: '36px',
+      fontWeight: fontWeights.medium,
+      lineHeight: 1.2,
+    },
+    h2: {
+      fontSize: '26px',
+      fontWeight: fontWeights.medium,
+      lineHeight: 1.5,
+    },
+    h3: {
+      fontSize: '21px',
+      fontWeight: fontWeights.medium,
+      lineHeight: 1.5,
+    },
+    h4: {
+      fontSize: '17px',
+      fontWeight: fontWeights.medium,
+      lineHeight: 1.5,
+    },
+  },
+  large: {
+    fontSize: '17px',
+    fontWeight: fontWeights.regular,
+    paragraph: {
+      fontSize: '17px',
+      fontWeight: fontWeights.regular,
+      lineHeight: 1.5,
+      marginToH1Top: '22px',
+      marginToH2Top: '12px',
+      marginToH3Top: '6px',
+      marginToH4Top: '4px',
+      marginToParagraphTop: '16px',
+    },
+    h1: {
+      fontSize: '42px',
+      fontWeight: fontWeights.medium,
+      lineHeight: 1.2,
+    },
+    h2: {
+      fontSize: '32px',
+      fontWeight: fontWeights.medium,
+      lineHeight: 1.2,
+    },
+    h3: {
+      fontSize: '24px',
+      fontWeight: fontWeights.medium,
+      lineHeight: 1.2,
+    },
+    h4: {
+      fontSize: '20px',
+      fontWeight: fontWeights.medium,
+      lineHeight: 1.5,
+    },
+  },
+};
+
+const constants = {
+  breakpoint,
+  color,
+  typography,
+};
+
+function fontWeightName(fontWeight) {
+    var weight = Object.keys(fontWeights).filter(function (weightName) { return fontWeights[weightName] === fontWeight; });
+    return weight[0] ? weight[0] : '';
+}
+
+function pxToEm(pixelsArg, options) {
+    if (options === void 0) { options = {}; }
+    var pixels = typeof pixelsArg === 'string'
+        ? parseInt(pixelsArg.replace('px', ''), 10)
+        : pixelsArg;
+    var context = typeof options.context === 'string'
+        ? parseInt(options.context.replace('px', ''), 10)
+        : options.context || 16;
+    var rem = options.rem || false;
+    return "" + pixels / context + (rem ? 'rem' : 'em');
+}
+
 /* istanbul ignore file */
 
-export { Button$1 as Button };
+export { Button$1 as Button, constants, pxToEm, fontWeightName };

package.json

@@ -11,3 +11,4 @@ {
     "dist",
-    "scss"
+    "scss",
+    "src"
   ],
@@ -24,4 +25,4 @@ "repository": "https://github.com/mysugr/spring/tree/master/%40mysugr/spring-core",
   },
-  "version": "0.7.2",
+  "version": "0.7.3",
   "gitHead": "9c41764b47a1be83a47e4eb4d734fc85cf39eac6"
 }

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

59254

increased by97.66%

Number of package files

28

increased by133.33%

Lines of code

1048

increased by374.21%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes