@madgex/design-system 1.21.5 → 1.21.7

package/dist/_tokens/css/_tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Aug 2019 17:23:54 GMT
+ * Generated on Tue, 20 Aug 2019 09:14:10 GMT
  */
 
 :root {
@@ -43,8 +43,9 @@
  --mds-color-neutral-lighter: #dddddd;
  --mds-color-neutral-lightest: #f8f8f8;
  --mds-color-neutral-darker: #333333;
- --mds-color-text-base: #222222;
+ --mds-color-text-base: #343433;
  --mds-color-text-invert: #ffffff;
+ --mds-color-text-headers: #222222;
  --mds-color-border: #dddddd;
  --mds-font-family-base: "Helvetica", Arial, sans-serif;
  --mds-font-size-base: 16px;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Aug 2019 17:23:54 GMT
+ * Generated on Tue, 20 Aug 2019 09:14:11 GMT
  */
 
 module.exports = {
@@ -798,9 +798,9 @@ module.exports = {
     },
     "text": {
       "base": {
-        "value": "#222222",
+        "value": "#343433",
         "original": {
-          "value": "#222"
+          "value": "#343433"
         },
         "name": "MdsColorTextBase",
         "attributes": {
@@ -830,6 +830,23 @@ module.exports = {
           "text",
           "invert"
         ]
+      },
+      "headers": {
+        "value": "#222222",
+        "original": {
+          "value": "#222222"
+        },
+        "name": "MdsColorTextHeaders",
+        "attributes": {
+          "category": "color",
+          "type": "text",
+          "item": "headers"
+        },
+        "path": [
+          "color",
+          "text",
+          "headers"
+        ]
       }
     },
     "border": {

package/dist/_tokens/scss/_tokens.scss

@@ -1,7 +1,7 @@
 
 /*
   Do not edit directly
-  Generated on Thu, 15 Aug 2019 17:23:54 GMT
+  Generated on Tue, 20 Aug 2019 09:14:10 GMT
 */
 
 $mds-color-brand-1-base: #1b75bb !default;
@@ -43,8 +43,9 @@ $mds-color-neutral-base: #979797 !default;
 $mds-color-neutral-lighter: #dddddd !default;
 $mds-color-neutral-lightest: #f8f8f8 !default;
 $mds-color-neutral-darker: #333333 !default;
-$mds-color-text-base: #222222 !default;
+$mds-color-text-base: #343433 !default;
 $mds-color-text-invert: #ffffff !default;
+$mds-color-text-headers: #222222 !default;
 $mds-color-border: #dddddd !default;
 $mds-font-family-base: "Helvetica", Arial, sans-serif !default;
 $mds-font-size-base: 16px !default;
@@ -220,7 +221,8 @@ $tokens: (
     ),
     'text': (
       'base': $mds-color-text-base,
-      'invert': $mds-color-text-invert
+      'invert': $mds-color-text-invert,
+      'headers': $mds-color-text-headers
     ),
     'border': $mds-color-border
   ),

package/dist/css/index.css

@@ -1,6 +1,6 @@
 /*
   Do not edit directly
-  Generated on Thu, 15 Aug 2019 17:23:54 GMT
+  Generated on Tue, 20 Aug 2019 09:14:10 GMT
 */
 html,
 body,
@@ -464,6 +464,16 @@ img {
 
 body {
   font-family: "Helvetica", Arial, sans-serif;
+  color: #343433;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+dl dt {
   color: #222222;
 }
 
@@ -512,14 +522,14 @@ body {
 }
 
 .mds-list {
-  margin: 0 0 20px 0;
+  margin: 0 0 20px 12px;
   padding: 0;
   list-style-type: none;
   list-style-position: outside;
 }
 
 .mds-list__item {
-  margin-bottom: 8px;
+  margin-bottom: 4px;
   margin-left: 16px;
 }
 
@@ -534,6 +544,7 @@ body {
 .mds-list--border {
   border-left: 5px solid #f8f8f8;
   padding-left: 20px;
+  margin-left: 0;
 }
 
 .mds-list__key,
@@ -1456,7 +1467,7 @@ body {
   width: 100%;
   display: inline-block;
   text-align: center;
-  color: #222222;
+  color: #343433;
   line-height: 1.15;
 }
 
@@ -1468,13 +1479,13 @@ body {
 
 .mds-button:link, .mds-button:visited, .mds-button:active {
   text-decoration: none;
-  color: #222222;
+  color: #343433;
 }
 
 .mds-button:hover, .mds-button:focus {
   background-color: #f3bf41;
   text-decoration: none;
-  color: #222222;
+  color: #343433;
 }
 
 .mds-card {
@@ -4653,7 +4664,7 @@ body {
 
 .mds-edited-text ul,
 .mds-edited-text ol {
-  margin: 0 0 20px 0;
+  margin: 0 0 20px 12px;
   padding: 0;
   list-style-position: outside;
 }
@@ -4674,6 +4685,12 @@ body {
 }
 
 .mds-edited-text li {
-  margin-bottom: 8px;
+  margin-bottom: 4px;
   margin-left: 16px;
 }
+
+.mds-edited-text.mds-font-body-copy-bulk p,
+.mds-font-body-copy-bulk .mds-edited-text p,
+.mds-edited-text .mds-font-body-copy-bulk p {
+  margin-bottom: 16px;
+}

package/package.json

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

package/src/components/tabs/tabs.scss

@@ -32,7 +32,7 @@
 
 .js .mds-tabs__tab.mds-tabs__tab--selected {
   border-bottom: 6px solid $mds-color-brand-1-base;
-  color: $mds-color-text-base;
+  color: $mds-color-text-headers;
 }
 
 .js .mds-tabs__panel {

package/src/helpers/edited-text/edited-text.njk

@@ -1,3 +1,4 @@
+<h4>Lists:</h4>
 <div class="mds-edited-text">
   <ol>
     <li>
@@ -25,4 +26,14 @@
       <a href="#two">five</a>
     </li>
   </ol>
+</div>
+
+<h4>Paragraph (combined with font-body-copy-bulk):</h4>
+<div class="mds-edited-text mds-font-body-copy-bulk">
+  <h3>Paragraph 1</h3>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacus mi, molestie vulputate dolor dictum, mollis tempor dolor. Proin ut interdum tortor, eu dictum massa. Quisque eu congue mi. Curabitur ac fermentum lorem. Ut quam sapien, mollis vel rhoncus et, mattis non sapien. Aenean nec lacinia felis. Aenean rhoncus lacinia pretium. Cras rutrum mollis orci, vitae ultrices nisi fermentum sit amet. Donec vehicula libero ac mollis ornare. Pellentesque eleifend libero urna, accumsan tincidunt lectus lobortis nec.</p>
+  <h3>Paragraph 2</h3>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacus mi, molestie vulputate dolor dictum, mollis tempor dolor. Proin ut interdum tortor, eu dictum massa. Quisque eu congue mi. Curabitur ac fermentum lorem. Ut quam sapien, mollis vel rhoncus et, mattis non sapien. Aenean nec lacinia felis. Aenean rhoncus lacinia pretium. Cras rutrum mollis orci, vitae ultrices nisi fermentum sit amet. Donec vehicula libero ac mollis ornare. Pellentesque eleifend libero urna, accumsan tincidunt lectus lobortis nec.</p>
+  <h3>Paragraph 3</h3>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacus mi, molestie vulputate dolor dictum, mollis tempor dolor. Proin ut interdum tortor, eu dictum massa. Quisque eu congue mi. Curabitur ac fermentum lorem. Ut quam sapien, mollis vel rhoncus et, mattis non sapien. Aenean nec lacinia felis. Aenean rhoncus lacinia pretium. Cras rutrum mollis orci, vitae ultrices nisi fermentum sit amet. Donec vehicula libero ac mollis ornare. Pellentesque eleifend libero urna, accumsan tincidunt lectus lobortis nec.</p>
 </div>

package/src/scss/core/_lists.scss

@@ -1,11 +1,11 @@
 .mds-list {
-  margin: 0 0 ($mds-size-baseline * 5) 0;
+  margin: 0 0 ($mds-size-baseline * 5) ($mds-size-baseline * 3);
   padding: 0;
   list-style-type: none;
   list-style-position: outside;
 }
 .mds-list__item {
-  margin-bottom: $mds-size-baseline * 2;
+  margin-bottom: $mds-size-baseline;
   margin-left: $mds-size-baseline * 4;
 }
 
@@ -20,6 +20,7 @@
 .mds-list--border {
   border-left: 5px solid $mds-color-neutral-lightest;
   padding-left: $mds-size-baseline * 5;
+  margin-left: 0;
 }
 
 .mds-list__key,

package/src/scss/core/_typography.scss

@@ -19,3 +19,13 @@ h3 {
 h4 {
   @extend .mds-font-body-copy;
 }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+dl dt {
+  color: $mds-color-text-headers;
+}

package/src/scss/helpers/_edited-text.scss

@@ -1,7 +1,7 @@
 .mds-edited-text {
   ul,
   ol {
-    margin: 0 0 ($mds-size-baseline * 5) 0;
+    margin: 0 0 ($mds-size-baseline * 5) ($mds-size-baseline * 3);
     padding: 0;
     list-style-position: outside;
     ul,
@@ -16,7 +16,14 @@
     list-style-type: decimal;
   }
   li {
-    margin-bottom: $mds-size-baseline * 2;
+    margin-bottom: $mds-size-baseline;
     margin-left: $mds-size-baseline * 4;
   }
 }
+.mds-edited-text.mds-font-body-copy-bulk,
+.mds-font-body-copy-bulk .mds-edited-text,
+.mds-edited-text .mds-font-body-copy-bulk {
+  p{
+    margin-bottom: $mds-size-baseline * 4;
+  }
+}

package/src/tokens/color.json

@@ -133,10 +133,13 @@
     },
     "text": {
       "base": {
-        "value": "#222"
+        "value": "#343433"
       },
       "invert": {
         "value": "{color.neutral.white.value}"
+      },
+      "headers": {
+        "value": "#222222"
       }
     },
     "border": {