@madgex/design-system 1.14.1 → 1.15.0

package/dist/_tokens/css/_tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 11 Jul 2019 12:56:59 GMT
+ * Generated on Thu, 11 Jul 2019 14:20:25 GMT
  */
 
 :root {
@@ -31,6 +31,7 @@
  --mds-color-text-invert: #ffffff;
  --mds-color-border: #979797;
  --mds-font-family-base: "Helvetica", Arial, sans-serif;
+ --mds-font-size-base: 16px;
  --mds-font-type-canon-default-size: 28px;
  --mds-font-type-canon-default-line-height: 1.15;
  --mds-font-type-canon-sm-size: 32px;

package/dist/_tokens/js/_tokens-module.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 11 Jul 2019 12:56:59 GMT
+ * Generated on Thu, 11 Jul 2019 14:20:25 GMT
  */
 
 module.exports = {
@@ -534,6 +534,25 @@ module.exports = {
         ]
       }
     },
+    "size": {
+      "base": {
+        "value": "16px",
+        "original": {
+          "value": "16px"
+        },
+        "name": "MdsFontSizeBase",
+        "attributes": {
+          "category": "font",
+          "type": "size",
+          "item": "base"
+        },
+        "path": [
+          "font",
+          "size",
+          "base"
+        ]
+      }
+    },
     "type": {
       "canon": {
         "default": {

package/dist/_tokens/scss/_tokens.scss

@@ -1,7 +1,7 @@
 
 /*
   Do not edit directly
-  Generated on Thu, 11 Jul 2019 12:56:59 GMT
+  Generated on Thu, 11 Jul 2019 14:20:25 GMT
 */
 
 $mds-color-brand-1-base: #1b75bb !default;
@@ -31,6 +31,7 @@ $mds-color-text-base: #222222 !default;
 $mds-color-text-invert: #ffffff !default;
 $mds-color-border: #979797 !default;
 $mds-font-family-base: "Helvetica", Arial, sans-serif !default;
+$mds-font-size-base: 16px !default;
 $mds-font-type-canon-default-size: 28px !default;
 $mds-font-type-canon-default-line-height: 1.15 !default;
 $mds-font-type-canon-sm-size: 32px !default;
@@ -174,6 +175,9 @@ $tokens: (
     'family': (
       'base': $mds-font-family-base
     ),
+    'size': (
+      'base': $mds-font-size-base
+    ),
     'type': (
       'canon': (
         'default': (

package/dist/css/index.css

@@ -1,6 +1,6 @@
 /*
   Do not edit directly
-  Generated on Thu, 11 Jul 2019 12:56:59 GMT
+  Generated on Thu, 11 Jul 2019 14:20:25 GMT
 */
 html,
 body,
@@ -430,261 +430,261 @@ template {
 }
 
 .mds-font-canon, h1 {
-  font-size: 28px;
+  font-size: 1.75rem;
   line-height: 1.15;
 }
 
 @media (min-width: 25em) {
   .mds-font-canon, h1 {
-    font-size: 32px;
+    font-size: 2rem;
     line-height: 1.13;
   }
 }
 
 @media (min-width: 37.5em) {
   .mds-font-canon, h1 {
-    font-size: 52px;
+    font-size: 3.25rem;
     line-height: 1.08;
   }
 }
 
 @media (min-width: 63em) {
   .mds-font-canon, h1 {
-    font-size: 44px;
+    font-size: 2.75rem;
     line-height: 1.1;
   }
 }
 
 .mds-font-trafalgar, h2 {
-  font-size: 20px;
+  font-size: 1.25rem;
   line-height: 1.2;
 }
 
 @media (min-width: 25em) {
   .mds-font-trafalgar, h2 {
-    font-size: 24px;
+    font-size: 1.5rem;
     line-height: 1.17;
   }
 }
 
 @media (min-width: 37.5em) {
   .mds-font-trafalgar, h2 {
-    font-size: 36px;
+    font-size: 2.25rem;
     line-height: 1.12;
   }
 }
 
 @media (min-width: 63em) {
   .mds-font-trafalgar, h2 {
-    font-size: 32px;
+    font-size: 2rem;
     line-height: 1.13;
   }
 }
 
 .mds-font-paragon, h3 {
-  font-size: 20px;
+  font-size: 1.25rem;
   line-height: 1.2;
 }
 
 @media (min-width: 25em) {
   .mds-font-paragon, h3 {
-    font-size: 22px;
+    font-size: 1.375rem;
     line-height: 1.19;
   }
 }
 
 @media (min-width: 37.5em) {
   .mds-font-paragon, h3 {
-    font-size: 28px;
+    font-size: 1.75rem;
     line-height: 1.15;
   }
 }
 
 @media (min-width: 63em) {
   .mds-font-paragon, h3 {
-    font-size: 28px;
+    font-size: 1.75rem;
     line-height: 1.15;
   }
 }
 
 .mds-font-double-pica, h4 {
-  font-size: 20px;
+  font-size: 1.25rem;
   line-height: 1.2;
 }
 
 @media (min-width: 25em) {
   .mds-font-double-pica, h4 {
-    font-size: 20px;
+    font-size: 1.25rem;
     line-height: 1.2;
   }
 }
 
 @media (min-width: 37.5em) {
   .mds-font-double-pica, h4 {
-    font-size: 26px;
+    font-size: 1.625rem;
     line-height: 1.16;
   }
 }
 
 @media (min-width: 63em) {
   .mds-font-double-pica, h4 {
-    font-size: 24px;
+    font-size: 1.5rem;
     line-height: 1.17;
   }
 }
 
 .mds-font-great-primer, .js .mds-tabs__list-item {
-  font-size: 18px;
+  font-size: 1.125rem;
   line-height: 1.23;
 }
 
 @media (min-width: 25em) {
   .mds-font-great-primer, .js .mds-tabs__list-item {
-    font-size: 18px;
+    font-size: 1.125rem;
     line-height: 1.23;
   }
 }
 
 @media (min-width: 37.5em) {
   .mds-font-great-primer, .js .mds-tabs__list-item {
-    font-size: 21px;
+    font-size: 1.3125rem;
     line-height: 1.15;
   }
 }
 
 @media (min-width: 63em) {
   .mds-font-great-primer, .js .mds-tabs__list-item {
-    font-size: 20px;
+    font-size: 1.25rem;
     line-height: 1.2;
   }
 }
 
 .mds-font-body-copy, body {
-  font-size: 14px;
+  font-size: 0.875rem;
   line-height: 1.43;
 }
 
 @media (min-width: 25em) {
   .mds-font-body-copy, body {
-    font-size: 16px;
+    font-size: 1rem;
     line-height: 1.38;
   }
 }
 
 @media (min-width: 37.5em) {
   .mds-font-body-copy, body {
-    font-size: 18px;
+    font-size: 1.125rem;
     line-height: 1.34;
   }
 }
 
 @media (min-width: 63em) {
   .mds-font-body-copy, body {
-    font-size: 16px;
+    font-size: 1rem;
     line-height: 1.38;
   }
 }
 
 .mds-font-pica {
-  font-size: 15px;
+  font-size: 0.9375rem;
   line-height: 1.34;
 }
 
 @media (min-width: 25em) {
   .mds-font-pica {
-    font-size: 16px;
+    font-size: 1rem;
     line-height: 1.25;
   }
 }
 
 @media (min-width: 37.5em) {
   .mds-font-pica {
-    font-size: 18px;
+    font-size: 1.125rem;
     line-height: 1.23;
   }
 }
 
 @media (min-width: 63em) {
   .mds-font-pica {
-    font-size: 16px;
+    font-size: 1rem;
     line-height: 1.25;
   }
 }
 
 .mds-font-long-primer {
-  font-size: 15px;
+  font-size: 0.9375rem;
   line-height: 1.2;
 }
 
 @media (min-width: 25em) {
   .mds-font-long-primer {
-    font-size: 15px;
+    font-size: 0.9375rem;
     line-height: 1.2;
   }
 }
 
 @media (min-width: 37.5em) {
   .mds-font-long-primer {
-    font-size: 15px;
+    font-size: 0.9375rem;
     line-height: 1.34;
   }
 }
 
 @media (min-width: 63em) {
   .mds-font-long-primer {
-    font-size: 14px;
+    font-size: 0.875rem;
     line-height: 1.29;
   }
 }
 
 .mds-font-brevier {
-  font-size: 14px;
+  font-size: 0.875rem;
   line-height: 1.15;
 }
 
 @media (min-width: 25em) {
   .mds-font-brevier {
-    font-size: 14px;
+    font-size: 0.875rem;
     line-height: 1.29;
   }
 }
 
 @media (min-width: 37.5em) {
   .mds-font-brevier {
-    font-size: 14px;
+    font-size: 0.875rem;
     line-height: 1.29;
   }
 }
 
 @media (min-width: 63em) {
   .mds-font-brevier {
-    font-size: 13px;
+    font-size: 0.8125rem;
     line-height: 1.24;
   }
 }
 
 .mds-font-minion, .mds-list__key {
-  font-size: 12px;
+  font-size: 0.75rem;
   line-height: 1.34;
 }
 
 @media (min-width: 25em) {
   .mds-font-minion, .mds-list__key {
-    font-size: 12px;
+    font-size: 0.75rem;
     line-height: 1.34;
   }
 }
 
 @media (min-width: 37.5em) {
   .mds-font-minion, .mds-list__key {
-    font-size: 13px;
+    font-size: 0.8125rem;
     line-height: 1.24;
   }
 }
 
 @media (min-width: 63em) {
   .mds-font-minion, .mds-list__key {
-    font-size: 12px;
+    font-size: 0.75rem;
     line-height: 1.34;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madgex/design-system",
-  "version": "1.14.1",
+  "version": "1.15.0",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",

package/src/scss/functions/__index.scss

@@ -1 +1,2 @@
 @import 'color';
+@import 'px2rem';

package/src/scss/functions/_px2rem.scss

@@ -0,0 +1,20 @@
+/// Convert pixels to rems
+///
+/// @param {Number} $px - value to convert
+/// @param {Number} $base-size ($mds-font-size-base) - `<body>` font size
+///
+/// @example scss
+///  $font-size-in-rems: px2rem(16px);
+///  p { font-size: px2rem(16px); }
+///
+/// @requires $mds-font-size-base
+/// @returns {Number}
+@function px2rem($px, $base-size: $mds-font-size-base) {
+  @if unitless($px) {
+    @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels.";
+    @return px2rem($px * 1px, $base-size);
+  } @else if unit($px) == rem {
+    @return $px;
+  }
+  @return ($px / $base-size) * 1rem;
+}

package/src/scss/helpers/_font-types.scss

@@ -24,11 +24,11 @@ $font-types: map-get(map-get($tokens, 'font'), 'type');
   .mds-font-#{$typename} {
     @each $bpname, $props in $typevalue {
       @if $bpname == 'default' {
-        font-size: map-get($props, 'size');
+        font-size: px2rem(map-get($props, 'size'));
         line-height: map-get($props, 'line-height');
       } @else {
         @include mq($from: $bpname) {
-          font-size: map-get($props, 'size');
+          font-size: px2rem(map-get($props, 'size'));
           line-height: map-get($props, 'line-height');
         }
       }

package/src/scss/index.scss

@@ -1,8 +1,8 @@
 @import '../../dist/_tokens/scss/tokens';
 @import 'resets/_index';
 @import 'vendor/normalize';
-@import 'helpers/_index';
 @import 'functions/_index';
+@import 'helpers/_index';
 @import 'utilities/_index';
 @import 'core/_index';
 

package/src/tokens/font.json

@@ -5,6 +5,11 @@
         "value": "\"Helvetica\", Arial, sans-serif"
       }
     },
+    "size": {
+      "base": {
+        "value": "16px"
+      }
+    },
     "type": {
       "canon": {
         "default": {