@madgex/design-system 1.12.0 → 1.14.0

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>
@@ -12,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>