@madgex/design-system 1.13.0 → 1.14.1

package/dist/_tokens/css/_tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 11 Jul 2019 11:26:49 GMT
+ * Generated on Thu, 11 Jul 2019 12:56:59 GMT
  */
 
 :root {
@@ -125,5 +125,5 @@
  --mds-size-wrapper-width: 100%;
  --mds-size-wrapper-max-width: 1280px;
  --mds-size-wrapper-padding: 2.5%;
- --mds-size-surface-padding: 20px;
+ --mds-size-surface-padding: 28px 32px;
 }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 11 Jul 2019 11:26:49 GMT
+ * Generated on Thu, 11 Jul 2019 12:56:59 GMT
  */
 
 module.exports = {
@@ -2562,9 +2562,9 @@ module.exports = {
     },
     "surface": {
       "padding": {
-        "value": "20rem",
+        "value": "28rem",
         "original": {
-          "value": "20px"
+          "value": "28px 32px"
         },
         "name": "MdsSizeSurfacePadding",
         "attributes": {

package/dist/_tokens/scss/_tokens.scss

@@ -1,7 +1,7 @@
 
 /*
   Do not edit directly
-  Generated on Thu, 11 Jul 2019 11:26:49 GMT
+  Generated on Thu, 11 Jul 2019 12:56:59 GMT
 */
 
 $mds-color-brand-1-base: #1b75bb !default;
@@ -125,7 +125,7 @@ $mds-size-container-max-width: 100% !default;
 $mds-size-wrapper-width: 100% !default;
 $mds-size-wrapper-max-width: 1280px !default;
 $mds-size-wrapper-padding: 2.5% !default;
-$mds-size-surface-padding: 20px !default;
+$mds-size-surface-padding: 28px 32px !default;
 
 $tokens: (
   'color': (

package/dist/css/index.css

@@ -1,6 +1,6 @@
 /*
   Do not edit directly
-  Generated on Thu, 11 Jul 2019 11:26:49 GMT
+  Generated on Thu, 11 Jul 2019 12:56:59 GMT
 */
 html,
 body,
@@ -533,27 +533,27 @@ template {
   }
 }
 
-.mds-font-great-primer {
+.mds-font-great-primer, .js .mds-tabs__list-item {
   font-size: 18px;
   line-height: 1.23;
 }
 
 @media (min-width: 25em) {
-  .mds-font-great-primer {
+  .mds-font-great-primer, .js .mds-tabs__list-item {
     font-size: 18px;
     line-height: 1.23;
   }
 }
 
 @media (min-width: 37.5em) {
-  .mds-font-great-primer {
+  .mds-font-great-primer, .js .mds-tabs__list-item {
     font-size: 21px;
     line-height: 1.15;
   }
 }
 
 @media (min-width: 63em) {
-  .mds-font-great-primer {
+  .mds-font-great-primer, .js .mds-tabs__list-item {
     font-size: 20px;
     line-height: 1.2;
   }
@@ -663,27 +663,27 @@ template {
   }
 }
 
-.mds-font-minion {
+.mds-font-minion, .mds-list__key {
   font-size: 12px;
   line-height: 1.34;
 }
 
 @media (min-width: 25em) {
-  .mds-font-minion {
+  .mds-font-minion, .mds-list__key {
     font-size: 12px;
     line-height: 1.34;
   }
 }
 
 @media (min-width: 37.5em) {
-  .mds-font-minion {
+  .mds-font-minion, .mds-list__key {
     font-size: 13px;
     line-height: 1.24;
   }
 }
 
 @media (min-width: 63em) {
-  .mds-font-minion {
+  .mds-font-minion, .mds-list__key {
     font-size: 12px;
     line-height: 1.34;
   }
@@ -3369,7 +3369,7 @@ template {
   border-right: 1px solid #979797;
 }
 
-.mds-border-bottom {
+.mds-border-bottom, .mds-tabs__list {
   border-bottom: 1px solid #979797;
 }
 
@@ -3582,7 +3582,7 @@ body {
 }
 
 .mds-surface__inner {
-  padding: 20px;
+  padding: 28px 32px;
 }
 
 .mds-list {
@@ -3604,13 +3604,19 @@ body {
   list-style-type: decimal;
 }
 
+.mds-list--border {
+  border-left: 5px solid #f0f0f0;
+  padding-left: 20px;
+}
+
 .mds-list__key,
 .mds-list__value {
   margin: 0;
 }
 
 .mds-list__key {
-  margin-bottom: 8px;
+  font-weight: bold;
+  margin-bottom: 4px;
 }
 
 .mds-list__value {
@@ -4523,7 +4529,6 @@ body {
 }
 
 .js .mds-tabs__list {
-  border-bottom: 1px solid #979797;
   margin-bottom: 0;
 }
 
@@ -4538,23 +4543,18 @@ body {
 
 .js .mds-tabs__tab {
   text-decoration: none;
-  background-color: #f0f0f0;
   margin-right: 4px;
   margin-bottom: 0;
-  padding: 8px 12px;
-  border-radius: 4px 4px 0 0;
-  border: 1px solid #979797;
-  border-bottom: 0;
+  padding: 28px 32px;
+  padding-top: 24px;
+  padding-bottom: 20px;
 }
 
 .js .mds-tabs__tab.mds-tabs__tab--selected {
-  background-color: #ffffff;
-  padding-bottom: 9px;
-  margin-bottom: -1px;
+  border-bottom: 6px solid #1b75bb;
+  color: #222222;
 }
 
 .js .mds-tabs__panel {
-  padding: 12px 16px;
-  border: 1px solid #979797;
-  border-top: 0;
+  padding: 28px 32px;
 }

package/package.json

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

package/src/components/tabs/tabs.scss

@@ -4,15 +4,16 @@
 
 .mds-tabs__list {
   margin-bottom: $mds-size-baseline * 2;
+  @extend .mds-border-bottom;
 
   .js & {
-    border-bottom: $mds-size-border-width solid $mds-color-border;
     margin-bottom: 0;
   }
 }
 
 .js .mds-tabs__list-item {
   display: inline-block;
+  @extend .mds-font-great-primer;
 }
 
 .mds-tabs__tab {
@@ -21,24 +22,19 @@
 
   .js & {
     text-decoration: none;
-    background-color: $mds-color-neutral-lightest;
     margin-right: $mds-size-baseline;
     margin-bottom: 0;
-    padding: ($mds-size-baseline * 2) ($mds-size-baseline * 3);
-    border-radius: $mds-size-border-radius $mds-size-border-radius 0 0;
-    border: $mds-size-border-width solid $mds-color-border;
-    border-bottom: 0;
+    padding: $mds-size-surface-padding;
+    padding-top: $mds-size-baseline * 6;
+    padding-bottom: $mds-size-baseline * 5;
   }
 }
 
 .js .mds-tabs__tab.mds-tabs__tab--selected {
-  background-color: $mds-color-neutral-white;
-  padding-bottom: ($mds-size-baseline * 2) + 1px;
-  margin-bottom: -1px;
+  border-bottom: 6px solid $mds-color-brand-1-base;
+  color: $mds-color-text-base;
 }
 
 .js .mds-tabs__panel {
-  padding: ($mds-size-baseline * 3) ($mds-size-baseline * 4);
-  border: $mds-size-border-width solid $mds-color-border;
-  border-top: 0;
+  padding: $mds-size-surface-padding;
 }

package/src/scss/core/_lists.scss

@@ -15,12 +15,19 @@
   list-style-type: decimal;
 }
 
+.mds-list--border {
+  border-left: 5px solid $mds-color-neutral-lightest;
+  padding-left: $mds-size-baseline * 5;
+}
+
 .mds-list__key,
 .mds-list__value {
   margin: 0;
 }
 .mds-list__key {
-  margin-bottom: $mds-size-baseline * 2;
+  @extend .mds-font-minion;
+  font-weight: bold;
+  margin-bottom: $mds-size-baseline;
 }
 .mds-list__value {
   margin-bottom: $mds-size-baseline * 3;

package/src/tokens/size.json

@@ -40,7 +40,7 @@
     },
     "surface": {
       "padding": {
-        "value": "20px"
+        "value": "28px 32px"
       }
     }
   }

package/src/typography/lists.njk

@@ -18,8 +18,8 @@
   <li class="mds-list__item">three</li>
 </ol>
 
-<h2>Definition List</h2>
-<dl class="mds-list mds-list--definition">
+<h2>Definition List with border</h2>
+<dl class="mds-list mds-list--definition mds-list--border">
   <dt class="mds-list__key">Recruiter</dt>
   <dd class="mds-list__value">The National Aeronautics and Space Association</dd>
   <dt class="mds-list__key">Reference</dt>