@madgex/design-system 1.12.0 → 1.13.0

package/dist/_tokens/css/_tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 10 Jul 2019 14:24:59 GMT
+ * Generated on Thu, 11 Jul 2019 11:26:49 GMT
  */
 
 :root {
@@ -10,7 +10,7 @@
  --mds-color-brand-1-dark: #15598e;
  --mds-color-brand-1-darkest: #082135;
  --mds-color-brand-2-base: #f0af11;
- --mds-color-brand-2-light: #f3bf41;
+ --mds-color-brand-2-light: #f0af11;
  --mds-color-brand-2-lightest: #fdf7e7;
  --mds-color-brand-2-dark: #c28d0c;
  --mds-color-brand-2-darkest: #3a2a04;
@@ -19,16 +19,17 @@
  --mds-color-brand-3-lightest: #e8fcfb;
  --mds-color-brand-3-dark: #119389;
  --mds-color-brand-3-darkest: #063733;
- --mds-color-background-body: #f0f0f0;
+ --mds-color-background-body: #ffffff;
  --mds-color-background-site-container: #f0f0f0;
  --mds-color-background-surface: #ffffff;
- --mds-color-text: #222222;
- --mds-color-border: #979797;
- --mds-color-white: #ffffff;
- --mds-color-black: #000000;
+ --mds-color-neutral-white: #ffffff;
+ --mds-color-neutral-black: #000000;
  --mds-color-neutral-base: #979797;
  --mds-color-neutral-lightest: #f0f0f0;
  --mds-color-neutral-darker: #333333;
+ --mds-color-text-base: #222222;
+ --mds-color-text-invert: #ffffff;
+ --mds-color-border: #979797;
  --mds-font-family-base: "Helvetica", Arial, sans-serif;
  --mds-font-type-canon-default-size: 28px;
  --mds-font-type-canon-default-line-height: 1.15;
@@ -123,5 +124,6 @@
  --mds-size-container-max-width: 100%;
  --mds-size-wrapper-width: 100%;
  --mds-size-wrapper-max-width: 1280px;
- --mds-size-wrapper-paddings: 2.5%;
+ --mds-size-wrapper-padding: 2.5%;
+ --mds-size-surface-padding: 20px;
 }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 10 Jul 2019 14:24:59 GMT
+ * Generated on Thu, 11 Jul 2019 11:26:49 GMT
  */
 
 module.exports = {
@@ -132,11 +132,11 @@ module.exports = {
           ]
         },
         "light": {
-          "value": "#f3bf41",
           "scssColorFunction": "lighten($mds-color-brand-2-base,10%)",
+          "value": "#f0af11",
           "original": {
-            "value": "#f3bf41",
-            "scssColorFunction": "lighten($mds-color-brand-2-base,10%)"
+            "scssColorFunction": "lighten($mds-color-brand-2-base,10%)",
+            "value": "{color.brand.2.base.value}"
           },
           "name": "MdsColorBrand2Light",
           "attributes": {
@@ -324,9 +324,9 @@ module.exports = {
     },
     "background": {
       "body": {
-        "value": "#f0f0f0",
+        "value": "#ffffff",
         "original": {
-          "value": "{color.background.site-container.value}"
+          "value": "{color.neutral.white.value}"
         },
         "name": "MdsColorBackgroundBody",
         "attributes": {
@@ -343,7 +343,7 @@ module.exports = {
       "site-container": {
         "value": "#f0f0f0",
         "original": {
-          "value": "#f0f0f0"
+          "value": "{color.neutral.lightest.value}"
         },
         "name": "MdsColorBackgroundSiteContainer",
         "attributes": {
@@ -360,7 +360,7 @@ module.exports = {
       "surface": {
         "value": "#ffffff",
         "original": {
-          "value": "#ffffff"
+          "value": "{color.neutral.white.value}"
         },
         "name": "MdsColorBackgroundSurface",
         "attributes": {
@@ -375,67 +375,41 @@ module.exports = {
         ]
       }
     },
-    "text": {
-      "value": "#222222",
-      "original": {
-        "value": "#222"
-      },
-      "name": "MdsColorText",
-      "attributes": {
-        "category": "color",
-        "type": "text"
-      },
-      "path": [
-        "color",
-        "text"
-      ]
-    },
-    "border": {
-      "value": "#979797",
-      "original": {
-        "value": "{color.neutral.base.value}"
-      },
-      "name": "MdsColorBorder",
-      "attributes": {
-        "category": "color",
-        "type": "border"
-      },
-      "path": [
-        "color",
-        "border"
-      ]
-    },
-    "white": {
-      "value": "#ffffff",
-      "original": {
-        "value": "#FFFFFF"
-      },
-      "name": "MdsColorWhite",
-      "attributes": {
-        "category": "color",
-        "type": "white"
-      },
-      "path": [
-        "color",
-        "white"
-      ]
-    },
-    "black": {
-      "value": "#000000",
-      "original": {
-        "value": "#000000"
+    "neutral": {
+      "white": {
+        "value": "#ffffff",
+        "original": {
+          "value": "#FFFFFF"
+        },
+        "name": "MdsColorNeutralWhite",
+        "attributes": {
+          "category": "color",
+          "type": "neutral",
+          "item": "white"
+        },
+        "path": [
+          "color",
+          "neutral",
+          "white"
+        ]
       },
-      "name": "MdsColorBlack",
-      "attributes": {
-        "category": "color",
-        "type": "black"
+      "black": {
+        "value": "#000000",
+        "original": {
+          "value": "#000000"
+        },
+        "name": "MdsColorNeutralBlack",
+        "attributes": {
+          "category": "color",
+          "type": "neutral",
+          "item": "black"
+        },
+        "path": [
+          "color",
+          "neutral",
+          "black"
+        ]
       },
-      "path": [
-        "color",
-        "black"
-      ]
-    },
-    "neutral": {
       "base": {
         "value": "#979797",
         "original": {
@@ -487,6 +461,57 @@ module.exports = {
           "darker"
         ]
       }
+    },
+    "text": {
+      "base": {
+        "value": "#222222",
+        "original": {
+          "value": "#222"
+        },
+        "name": "MdsColorTextBase",
+        "attributes": {
+          "category": "color",
+          "type": "text",
+          "item": "base"
+        },
+        "path": [
+          "color",
+          "text",
+          "base"
+        ]
+      },
+      "invert": {
+        "value": "#ffffff",
+        "original": {
+          "value": "{color.neutral.white.value}"
+        },
+        "name": "MdsColorTextInvert",
+        "attributes": {
+          "category": "color",
+          "type": "text",
+          "item": "invert"
+        },
+        "path": [
+          "color",
+          "text",
+          "invert"
+        ]
+      }
+    },
+    "border": {
+      "value": "#979797",
+      "original": {
+        "value": "{color.neutral.base.value}"
+      },
+      "name": "MdsColorBorder",
+      "attributes": {
+        "category": "color",
+        "type": "border"
+      },
+      "path": [
+        "color",
+        "border"
+      ]
     }
   },
   "font": {
@@ -2517,21 +2542,40 @@ module.exports = {
           "max-width"
         ]
       },
-      "paddings": {
+      "padding": {
         "value": "2.5rem",
         "original": {
           "value": "2.5%"
         },
-        "name": "MdsSizeWrapperPaddings",
+        "name": "MdsSizeWrapperPadding",
         "attributes": {
           "category": "size",
           "type": "wrapper",
-          "item": "paddings"
+          "item": "padding"
         },
         "path": [
           "size",
           "wrapper",
-          "paddings"
+          "padding"
+        ]
+      }
+    },
+    "surface": {
+      "padding": {
+        "value": "20rem",
+        "original": {
+          "value": "20px"
+        },
+        "name": "MdsSizeSurfacePadding",
+        "attributes": {
+          "category": "size",
+          "type": "surface",
+          "item": "padding"
+        },
+        "path": [
+          "size",
+          "surface",
+          "padding"
         ]
       }
     }

package/dist/_tokens/scss/_tokens.scss

@@ -1,7 +1,7 @@
 
 /*
   Do not edit directly
-  Generated on Wed, 10 Jul 2019 14:24:59 GMT
+  Generated on Thu, 11 Jul 2019 11:26:49 GMT
 */
 
 $mds-color-brand-1-base: #1b75bb !default;
@@ -10,7 +10,7 @@ $mds-color-brand-1-lightest: lighten($mds-color-brand-1-base,(95% - lightness($m
 $mds-color-brand-1-dark: darken($mds-color-brand-1-base,10%) !default;
 $mds-color-brand-1-darkest: darken($mds-color-brand-1-base,(lightness($mds-color-brand-1-base) - 12%)) !default;
 $mds-color-brand-2-base: #f0af11 !default;
-$mds-color-brand-2-light: lighten($mds-color-brand-2-base,10%) !default;
+$mds-color-brand-2-light: #f0af11 !default;
 $mds-color-brand-2-lightest: lighten($mds-color-brand-2-base,(95% - lightness($mds-color-brand-2-base))) !default;
 $mds-color-brand-2-dark: darken($mds-color-brand-2-base,10%) !default;
 $mds-color-brand-2-darkest: darken($mds-color-brand-2-base,(lightness($mds-color-brand-2-base) - 12%)) !default;
@@ -19,16 +19,17 @@ $mds-color-brand-3-light: lighten($mds-color-brand-3-base,10%) !default;
 $mds-color-brand-3-lightest: lighten($mds-color-brand-3-base,(95% - lightness($mds-color-brand-3-base))) !default;
 $mds-color-brand-3-dark: darken($mds-color-brand-3-base,10%) !default;
 $mds-color-brand-3-darkest: darken($mds-color-brand-3-base,(lightness($mds-color-brand-3-base) - 12%)) !default;
-$mds-color-background-body: #f0f0f0 !default;
+$mds-color-background-body: #ffffff !default;
 $mds-color-background-site-container: #f0f0f0 !default;
 $mds-color-background-surface: #ffffff !default;
-$mds-color-text: #222222 !default;
-$mds-color-border: #979797 !default;
-$mds-color-white: #ffffff !default;
-$mds-color-black: #000000 !default;
+$mds-color-neutral-white: #ffffff !default;
+$mds-color-neutral-black: #000000 !default;
 $mds-color-neutral-base: #979797 !default;
 $mds-color-neutral-lightest: #f0f0f0 !default;
 $mds-color-neutral-darker: #333333 !default;
+$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-type-canon-default-size: 28px !default;
 $mds-font-type-canon-default-line-height: 1.15 !default;
@@ -123,7 +124,8 @@ $mds-size-container-min-width: 0 !default;
 $mds-size-container-max-width: 100% !default;
 $mds-size-wrapper-width: 100% !default;
 $mds-size-wrapper-max-width: 1280px !default;
-$mds-size-wrapper-paddings: 2.5% !default;
+$mds-size-wrapper-padding: 2.5% !default;
+$mds-size-surface-padding: 20px !default;
 
 $tokens: (
   'color': (
@@ -155,15 +157,18 @@ $tokens: (
       'site-container': $mds-color-background-site-container,
       'surface': $mds-color-background-surface
     ),
-    'text': $mds-color-text,
-    'border': $mds-color-border,
-    'white': $mds-color-white,
-    'black': $mds-color-black,
     'neutral': (
+      'white': $mds-color-neutral-white,
+      'black': $mds-color-neutral-black,
       'base': $mds-color-neutral-base,
       'lightest': $mds-color-neutral-lightest,
       'darker': $mds-color-neutral-darker
-    )
+    ),
+    'text': (
+      'base': $mds-color-text-base,
+      'invert': $mds-color-text-invert
+    ),
+    'border': $mds-color-border
   ),
   'font': (
     'family': (
@@ -373,7 +378,10 @@ $tokens: (
     'wrapper': (
       'width': $mds-size-wrapper-width,
       'max-width': $mds-size-wrapper-max-width,
-      'paddings': $mds-size-wrapper-paddings
+      'padding': $mds-size-wrapper-padding
+    ),
+    'surface': (
+      'padding': $mds-size-surface-padding
     )
   )
 );

package/dist/css/index.css

@@ -1,7 +1,104 @@
 /*
   Do not edit directly
-  Generated on Wed, 10 Jul 2019 14:24:59 GMT
+  Generated on Thu, 11 Jul 2019 11:26:49 GMT
 */
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+ol,
+ul {
+  list-style-type: none;
+  list-style-position: outside;
+}
+
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 /* Document
    ========================================================================== */
@@ -32,15 +129,6 @@ main {
   display: block;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 /**
@@ -3217,8 +3305,8 @@ template {
   }
 }
 
-.mds-border {
-  border: 1px solid red;
+.mds-border, .mds-surface {
+  border: 1px solid #979797;
 }
 
 .mds-border-none {
@@ -3227,25 +3315,25 @@ template {
 
 @media (min-width: 25em) {
   .mds-border-sm {
-    border: 1px solid red;
+    border: 1px solid #979797;
   }
 }
 
 @media (min-width: 37.5em) {
   .mds-border-md {
-    border: 1px solid red;
+    border: 1px solid #979797;
   }
 }
 
 @media (min-width: 63em) {
   .mds-border-lg {
-    border: 1px solid red;
+    border: 1px solid #979797;
   }
 }
 
 @media (min-width: 80em) {
   .mds-border-xl {
-    border: 1px solid red;
+    border: 1px solid #979797;
   }
 }
 
@@ -3274,19 +3362,19 @@ template {
 }
 
 .mds-border-top {
-  border-top: 1px solid red;
+  border-top: 1px solid #979797;
 }
 
 .mds-border-right {
-  border-right: 1px solid red;
+  border-right: 1px solid #979797;
 }
 
 .mds-border-bottom {
-  border-bottom: 1px solid red;
+  border-bottom: 1px solid #979797;
 }
 
 .mds-border-left {
-  border-left: 1px solid red;
+  border-left: 1px solid #979797;
 }
 
 .mds-border-top-none {
@@ -3307,61 +3395,61 @@ template {
 
 @media (min-width: 25em) {
   .mds-border-sm-top {
-    border-top: 1px solid red;
+    border-top: 1px solid #979797;
   }
   .mds-border-sm-right {
-    border-right: 1px solid red;
+    border-right: 1px solid #979797;
   }
   .mds-border-sm-bottom {
-    border-bottom: 1px solid red;
+    border-bottom: 1px solid #979797;
   }
   .mds-border-sm-left {
-    border-left: 1px solid red;
+    border-left: 1px solid #979797;
   }
 }
 
 @media (min-width: 37.5em) {
   .mds-border-md-top {
-    border-top: 1px solid red;
+    border-top: 1px solid #979797;
   }
   .mds-border-md-right {
-    border-right: 1px solid red;
+    border-right: 1px solid #979797;
   }
   .mds-border-md-bottom {
-    border-bottom: 1px solid red;
+    border-bottom: 1px solid #979797;
   }
   .mds-border-md-left {
-    border-left: 1px solid red;
+    border-left: 1px solid #979797;
   }
 }
 
 @media (min-width: 63em) {
   .mds-border-lg-top {
-    border-top: 1px solid red;
+    border-top: 1px solid #979797;
   }
   .mds-border-lg-right {
-    border-right: 1px solid red;
+    border-right: 1px solid #979797;
   }
   .mds-border-lg-bottom {
-    border-bottom: 1px solid red;
+    border-bottom: 1px solid #979797;
   }
   .mds-border-lg-left {
-    border-left: 1px solid red;
+    border-left: 1px solid #979797;
   }
 }
 
 @media (min-width: 80em) {
   .mds-border-xl-top {
-    border-top: 1px solid red;
+    border-top: 1px solid #979797;
   }
   .mds-border-xl-right {
-    border-right: 1px solid red;
+    border-right: 1px solid #979797;
   }
   .mds-border-xl-bottom {
-    border-bottom: 1px solid red;
+    border-bottom: 1px solid #979797;
   }
   .mds-border-xl-left {
-    border-left: 1px solid red;
+    border-left: 1px solid #979797;
   }
 }
 
@@ -3425,7 +3513,7 @@ template {
   }
 }
 
-.mds-border-radius {
+.mds-border-radius, .mds-surface {
   border-radius: 4px;
 }
 
@@ -3446,23 +3534,34 @@ template {
   white-space: nowrap;
 }
 
-ol,
-ul {
-  list-style-type: none;
-  list-style-position: outside;
-  margin: 0;
-  padding: 0;
+h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, pre {
+  margin-bottom: 12px;
+}
+
+a {
+  color: #1b75bb;
+  text-decoration: none;
+}
+
+a:hover, a:focus {
+  color: #15598e;
+  text-decoration: underline;
 }
 
 body {
   font-family: "Helvetica", Arial, sans-serif;
 }
 
+body {
+  background: #ffffff;
+}
+
 .mds-site-container {
   width: 100%;
   max-width: 100%;
   min-width: 0;
   margin: 0 auto;
+  background: #f0f0f0;
 }
 
 .mds-wrapper {
@@ -3478,6 +3577,14 @@ body {
   }
 }
 
+.mds-surface {
+  background: #ffffff;
+}
+
+.mds-surface__inner {
+  padding: 20px;
+}
+
 .mds-list {
   margin: 0 0 20px 0;
   padding: 0;
@@ -4368,13 +4475,13 @@ body {
   white-space: nowrap;
   -webkit-appearance: none;
   border: 1px solid transparent;
-  color: #ffffff;
+  background-color: #f0af11;
   padding: 8px 12px;
-  background-color: #1b75bb;
   font-size: 100%;
   width: 100%;
   display: inline-block;
   text-align: center;
+  color: #222222;
 }
 
 @media (min-width: 37.5em) {
@@ -4383,9 +4490,15 @@ body {
   }
 }
 
-.mds-button:link, .mds-button:visited, .mds-button:active, .mds-button:hover {
-  color: #ffffff;
+.mds-button:link, .mds-button:visited, .mds-button:active {
+  text-decoration: none;
+  color: #222222;
+}
+
+.mds-button:hover, .mds-button:focus {
+  background-color: #f0af11;
   text-decoration: none;
+  color: #222222;
 }
 
 .mds-card {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madgex/design-system",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",
@@ -37,10 +37,10 @@
     "babel-loader": "^8.0.6",
     "commitizen": "^3.1.1",
     "concurrently": "^4.1.0",
-    "css-loader": "^2.1.1",
+    "css-loader": "^3.0.0",
     "cssnano": "^4.1.10",
     "cz-conventional-changelog": "^2.1.0",
-    "del": "^4.1.1",
+    "del": "^5.0.0",
     "file-loader": "^4.0.0",
     "flat": "^4.1.0",
     "glob": "^7.1.4",
@@ -50,8 +50,8 @@
     "gulp-svgmin": "^2.2.0",
     "gulp-svgstore": "^7.0.1",
     "gulp-tap": "^1.0.1",
-    "husky": "^2.4.0",
-    "lint-staged": "^8.2.0",
+    "husky": "^3.0.0",
+    "lint-staged": "^9.2.0",
     "mini-css-extract-plugin": "^0.7.0",
     "node-sass": "^4.12.0",
     "postcss": "^7.0.17",

package/src/components/button/button.scss

@@ -1,3 +1,6 @@
+$mds-color-button-bg: $mds-color-brand-2-base !default;
+$mds-color-button-bg-hover: $mds-color-brand-2-light !default;
+
 .mds-button {
   cursor: pointer;
   user-select: none;
@@ -5,13 +8,13 @@
   white-space: nowrap;
   -webkit-appearance: none;
   border: 1px solid transparent;
-  color: $mds-color-white;
+  background-color: $mds-color-button-bg;
   padding: ($mds-size-baseline * 2) ($mds-size-baseline * 3);
-  background-color: $mds-color-brand-1-base;
   font-size: 100%;
   width: 100%;
   display: inline-block;
   text-align: center;
+  @include mds-text-contrast($mds-color-button-bg);
 
   @include mq($from: md) {
     width: auto;
@@ -20,14 +23,15 @@
   // Ensure that any global link styles are overridden
   &:link,
   &:visited,
-  &:active,
-  &:hover {
-    color: $mds-color-white;
+  &:active {
     text-decoration: none;
+    @include mds-text-contrast($mds-color-button-bg);
   }
 
   &:hover,
   &:focus {
-    // background-color: $mds-color-primary-hover-colour;
+    background-color: $mds-color-button-bg-hover;
+    text-decoration: none;
+    @include mds-text-contrast($mds-color-button-bg-hover);
   }
 }

package/src/components/tabs/tabs.scss

@@ -2,20 +2,20 @@
   display: none;
 }
 
-.mds-tabs__list{
+.mds-tabs__list {
   margin-bottom: $mds-size-baseline * 2;
-  
+
   .js & {
     border-bottom: $mds-size-border-width solid $mds-color-border;
     margin-bottom: 0;
   }
 }
 
-.js .mds-tabs__list-item{
+.js .mds-tabs__list-item {
   display: inline-block;
 }
 
-.mds-tabs__tab{
+.mds-tabs__tab {
   display: inline-block;
   margin-bottom: $mds-size-baseline * 2;
 
@@ -32,12 +32,12 @@
 }
 
 .js .mds-tabs__tab.mds-tabs__tab--selected {
-  background-color: $mds-color-white;
+  background-color: $mds-color-neutral-white;
   padding-bottom: ($mds-size-baseline * 2) + 1px;
   margin-bottom: -1px;
 }
 
-.js .mds-tabs__panel{
+.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;

package/src/layout/containers/README.md

@@ -2,3 +2,5 @@
 
 Class `mds-site-container` should be added right after the body, it contains all the visual elements of the site
 `mds-wrapper` inside `mds-site-container` will give a max-width to the content of the pages
+
+`mds-surface` will add a block with a white background, border and and border-radius. Add `mds-surface__inner` inside it to get the padding.

package/src/layout/containers/containers.njk

@@ -1,9 +1,13 @@
 <div class="mds-site-container container-example">
-    <div class="mds-wrapper">
-        <div class="content-example">
-            <h2>Content inside the site-container and wrapper</h2>
-            <p>site-container is 100%</p>
-            <p>wrapper is 100% and max-width 1280px (2.5% paddings)</p>
+  <div class="mds-wrapper">
+    <div class="content-example">
+      <div class="mds-surface">
+        <div class="mds-surface__inner">
+          <h2>Content inside the site-container and wrapper</h2>
+          <p>site-container is 100%</p>
+          <p>wrapper is 100% and max-width 1280px (2.5% left and right padding)</p>
         </div>
+      </div>
     </div>
+  </div>
 </div>

package/src/scss/core/_containers.scss

@@ -1,17 +1,31 @@
+body {
+  background: $mds-color-background-body;
+}
+
 .mds-site-container {
   width: $mds-size-container-width;
   max-width: $mds-size-container-max-width;
   min-width: $mds-size-container-min-width;
   margin: 0 auto;
-  // background: $mds-color-container-background;
+  background: $mds-color-background-site-container;
   // box-shadow: $mds-color-container-box-shadow;
 }
 .mds-wrapper {
   width: $mds-size-wrapper-width;
   max-width: $mds-size-wrapper-max-width;
   margin: 0 auto;
-  padding: 0 $mds-size-wrapper-paddings;
+  padding: 0 $mds-size-wrapper-padding;
   @include mq($from: xl) {
     padding: 0;
   }
 }
+
+.mds-surface {
+  background: $mds-color-background-surface;
+  @extend .mds-border;
+  @extend .mds-border-radius;
+}
+
+.mds-surface__inner {
+  padding: $mds-size-surface-padding;
+}

package/src/scss/core/_defaults.scss

@@ -1,8 +1,18 @@
+$mds-color-link: $mds-color-brand-1-base !default;
+$mds-color-link-hover: $mds-color-brand-1-dark !default;
 
-ol,
-ul {
-  list-style-type: none;
-  list-style-position: outside;
-  margin: 0;
-  padding: 0;
+h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, pre {
+  margin-bottom: $mds-size-baseline * 3;
+}
+
+
+a {
+  color: $mds-color-link;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    color: $mds-color-link-hover;
+    text-decoration: underline;
+  }
 }

package/src/scss/helpers/_borders.scss

@@ -3,7 +3,7 @@ $positions: top, right, bottom, left;
 $corners: top-left, top-right, bottom-right, bottom-left;
 
 .mds-border {
-  border: $mds-size-border-width solid red;
+  border: $mds-size-border-width solid $mds-color-border;
 }
 
 .mds-border-none {
@@ -13,7 +13,7 @@ $corners: top-left, top-right, bottom-right, bottom-left;
 @each $bpname, $value in $breakpoints {
   @include mq($from: $bpname) {
     .mds-border-#{$bpname} {
-      border: $mds-size-border-width solid red;
+      border: $mds-size-border-width solid $mds-color-border;
     }
   }
 }
@@ -28,7 +28,7 @@ $corners: top-left, top-right, bottom-right, bottom-left;
 
 @each $position in $positions {
   .mds-border-#{$position} {
-    border-#{$position}: $mds-size-border-width solid red;
+    border-#{$position}: $mds-size-border-width solid $mds-color-border;
   }
 }
 
@@ -42,7 +42,7 @@ $corners: top-left, top-right, bottom-right, bottom-left;
   @include mq($from: $bpname) {
     @each $position in $positions {
       .mds-border-#{$bpname}-#{$position} {
-        border-#{$position}: $mds-size-border-width solid red;
+        border-#{$position}: $mds-size-border-width solid $mds-color-border;
       }
     }
   }

package/src/scss/index.scss

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

package/src/scss/resets/__index.scss

@@ -0,0 +1,96 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+ol,
+ul {
+  list-style-type: none;
+  list-style-position: outside;
+}

package/src/scss/utilities/_mixins.scss

@@ -4,3 +4,27 @@
   -moz-user-select: none;
   user-select: none;
 }
+
+// This mixin will check the brightness of the background colour and text
+// and return either light or dark text depending on the contrast
+@mixin mds-text-contrast($bg-color) {
+  $color-text-base-brightness: round(
+    (red($mds-color-text-base) * 299) + (green($mds-color-text-base) * 587) + (blue($mds-color-text-base) * 114) / 1000
+  );
+  $color-brightness: round((red($bg-color) * 299) + (green($bg-color) * 587) + (blue($bg-color) * 114) / 1000);
+  $light-color: round((red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114) / 1000);
+
+  $text-color-dark: $mds-color-text-base !default;
+  $text-color-light: $mds-color-text-invert !default;
+
+  @if abs($color-text-base-brightness) >= ($light-color/2) {
+    $text-color-dark: $mds-color-text-invert;
+    $text-color-light: $mds-color-text-base;
+  }
+
+  @if abs($color-brightness) < ($light-color/2) {
+    color: $text-color-light;
+  } @else {
+    color: $text-color-dark;
+  }
+}

package/src/scss/vendor/_normalize.scss

@@ -32,16 +32,6 @@ main {
   display: block;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /* Grouping content
    ========================================================================== */
 

package/src/tokens/color.json

@@ -1,77 +1,86 @@
 {
   "color": {
     "brand": {
-      "1" : { 
-        "base": { "value" : "#1B75BB" },
-        "light": { 
-          "value" : "#2990e0",
-          "scssColorFunction" : "lighten($mds-color-brand-1-base,10%)"
-         },
-        "lightest" : { 
-          "value" : "#e9f3fc",
-          "scssColorFunction" : "lighten($mds-color-brand-1-base,(95% - lightness($mds-color-brand-1-base)))"
+      "1": {
+        "base": { "value": "#1B75BB" },
+        "light": {
+          "value": "#2990e0",
+          "scssColorFunction": "lighten($mds-color-brand-1-base,10%)"
         },
-        "dark" : {
-          "value" : "#15598e",
-          "scssColorFunction" : "darken($mds-color-brand-1-base,10%)"
+        "lightest": {
+          "value": "#e9f3fc",
+          "scssColorFunction": "lighten($mds-color-brand-1-base,(95% - lightness($mds-color-brand-1-base)))"
         },
-        "darkest" : { 
-          "value" : "#082135",
-          "scssColorFunction" : "darken($mds-color-brand-1-base,(lightness($mds-color-brand-1-base) - 12%))" 
+        "dark": {
+          "value": "#15598e",
+          "scssColorFunction": "darken($mds-color-brand-1-base,10%)"
+        },
+        "darkest": {
+          "value": "#082135",
+          "scssColorFunction": "darken($mds-color-brand-1-base,(lightness($mds-color-brand-1-base) - 12%))"
         }
       },
-      "2" : { 
-        "base": { "value" : "#f0af11" },
-        "light": { 
-          "value" : "#f3bf41",
-          "scssColorFunction" : "lighten($mds-color-brand-2-base,10%)"
-         },
-        "lightest" : { 
-          "value" : "#fdf7e7",
-          "scssColorFunction" : "lighten($mds-color-brand-2-base,(95% - lightness($mds-color-brand-2-base)))"
+      "2": {
+        "base": { "value": "#f0af11" },
+        "light": {
+          "scssColorFunction": "lighten($mds-color-brand-2-base,10%)",
+          "value": "{color.brand.2.base.value}"
+        },
+        "lightest": {
+          "value": "#fdf7e7",
+          "scssColorFunction": "lighten($mds-color-brand-2-base,(95% - lightness($mds-color-brand-2-base)))"
         },
-        "dark" : {
-          "value" : "#c28d0c",
-          "scssColorFunction" : "darken($mds-color-brand-2-base,10%)"
+        "dark": {
+          "value": "#c28d0c",
+          "scssColorFunction": "darken($mds-color-brand-2-base,10%)"
         },
-        "darkest" : { 
-          "value" : "#3a2a04",
-          "scssColorFunction" : "darken($mds-color-brand-2-base,(lightness($mds-color-brand-2-base) - 12%))"
+        "darkest": {
+          "value": "#3a2a04",
+          "scssColorFunction": "darken($mds-color-brand-2-base,(lightness($mds-color-brand-2-base) - 12%))"
         }
       },
-      "3" : { 
-        "base": { "value" : "#16C1B4" },
-        "light": { 
-          "value" : "#24e6d7",
-          "scssColorFunction" : "lighten($mds-color-brand-3-base,10%)"
-         },
-        "lightest" : { 
-          "value" : "#e8fcfb",
-          "scssColorFunction" : "lighten($mds-color-brand-3-base,(95% - lightness($mds-color-brand-3-base)))"
+      "3": {
+        "base": { "value": "#16C1B4" },
+        "light": {
+          "value": "#24e6d7",
+          "scssColorFunction": "lighten($mds-color-brand-3-base,10%)"
         },
-        "dark" : {
-          "value" : "#119389",
-          "scssColorFunction" : "darken($mds-color-brand-3-base,10%)"
+        "lightest": {
+          "value": "#e8fcfb",
+          "scssColorFunction": "lighten($mds-color-brand-3-base,(95% - lightness($mds-color-brand-3-base)))"
         },
-        "darkest" : { 
-          "value" : "#063733",
-          "scssColorFunction" : "darken($mds-color-brand-3-base,(lightness($mds-color-brand-3-base) - 12%))"
+        "dark": {
+          "value": "#119389",
+          "scssColorFunction": "darken($mds-color-brand-3-base,10%)"
+        },
+        "darkest": {
+          "value": "#063733",
+          "scssColorFunction": "darken($mds-color-brand-3-base,(lightness($mds-color-brand-3-base) - 12%))"
         }
       }
     },
-    "background" : {
-      "body" : { "value" : "{color.background.site-container.value}" },
-      "site-container" : { "value" : "#f0f0f0" },
-      "surface" : { "value" : "#ffffff" }
+    "background": {
+      "body": { "value": "{color.neutral.white.value}" },
+      "site-container": { "value": "{color.neutral.lightest.value}" },
+      "surface": { "value": "{color.neutral.white.value}" }
     },
-    "text" : { "value" : "#222" },
-    "border" : { "value" : "{color.neutral.base.value}" },
-    "white": { "value": "#FFFFFF" },
-    "black": { "value": "#000000" },
     "neutral": {
+      "white": { "value": "#FFFFFF" },
+      "black": { "value": "#000000" },
       "base": { "value": "#979797" },
       "lightest": { "value": "#F0F0F0" },
       "darker": { "value": "#333333" }
+    },
+    "text": {
+      "base": {
+        "value": "#222"
+      },
+      "invert": {
+        "value": "{color.neutral.white.value}"
+      }
+    },
+    "border": {
+      "value": "{color.neutral.base.value}"
     }
   }
 }

package/src/tokens/size.json

@@ -34,9 +34,14 @@
       "max-width": {
         "value": "1280px"
       },
-      "paddings": {
+      "padding": {
         "value": "2.5%"
       }
+    },
+    "surface": {
+      "padding": {
+        "value": "20px"
+      }
     }
   }
 }

package/src/typography/lists.njk

@@ -1,8 +1,14 @@
 <h2>Unordered list</h2>
 <ul class="mds-list mds-list--bullet">
-  <li class="mds-list__item">one</li>
-  <li class="mds-list__item">two</li>
-  <li class="mds-list__item">three</li>
+  <li class="mds-list__item">
+    <a href="#one">one</a>
+  </li>
+  <li class="mds-list__item">
+    <a href="#two">two</a>
+  </li>
+  <li class="mds-list__item">
+    <a href="#three">three</a>
+  </li>
 </ul>
 
 <h2>Ordered list</h2>