@madgex/design-system 1.11.0 → 1.13.0

package/fractal-theme/assets/css/styles.css

@@ -41,4 +41,17 @@
   padding: 10px;
   text-align: center;
   margin-bottom: 1rem;
-}
+}
+
+.container-example.mds-site-container {
+  background-color: #ff6861;
+}
+
+.container-example .mds-wrapper {
+  background-color: #fcba30;
+}
+
+.container-example .mds-wrapper .content-example {
+  padding: 30px;
+  min-height: 250px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madgex/design-system",
-  "version": "1.11.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/helpers/borders/README.md

@@ -0,0 +1,26 @@
+## Helpers
+
+### Border
+
+Use the class `mds-border`, followed by a position: `top`, `right`, `bottom`, `left` (optional), a breakpoint: `sm`, `md`, `lg`, `xl` (optional), and a flag none as required (optional).
+
+Examples:
+
+- `mds-border`
+- `mds-border-lg-none`
+- `mds-border-md-bottom`
+
+the hierarchy of the classes is (where last class overrides all the previous ones):
+
+- `mds-border`
+- `mds-border-none`
+- `mds-border-[breakpoint]`
+- `mds-border-[breakpoint]-none`
+- `mds-border-[position]`
+- `mds-border-[position]-none`
+- `mds-border-[breakpoint]-[position]`
+- `mds-border-[breakpoint]-[position]-none`
+
+### Border radius
+
+Use the class `mds-border-radius` to add border radius to all corners, and `mds-border-radius-none` to remove it.

package/src/helpers/borders/borders.njk

@@ -0,0 +1,13 @@
+<h2>Borders</h2>
+<div class="mds-border">A div with default border</div>
+<br/>
+<div class="mds-border-xl">A div with default border from 'xl' breakpoint</div>
+<br/>
+<div class="mds-border mds-border-xl-none">A div with default border before 'xl' breakpoint</div>
+<br/>
+<div class="mds-border mds-border-md-top-none">A div with default border and no border after 'md' breakpoint</div>
+<br/>
+<div class="mds-border mds-border-sm-none mds-border-sm-top mds-border-md-right mds-border-lg-bottom mds-border-xl-left">A div with all borders as default, only top border after 'sm', plus right border after 'md', plus bottom border after 'lg' and plus left border after 'xl', breakpoints</div>
+
+<h2>Border radius</h2>
+<div class="mds-border mds-border-radius">A div with borders and border radius</div>

package/src/helpers/display/README.md

@@ -0,0 +1,8 @@
+## Helpers
+
+Use the class `mds-display`, followed by a breakpoint: `sm`, `md`, `lg`, `xl` (optional), type: `block`, `inline`, `inline-block`, `none`.
+
+Examples:
+
+- `mds-display-none`
+- `mds-display-lg-inline-block`

package/src/helpers/display/display.njk

@@ -0,0 +1,14 @@
+<h2>Display</h2>
+<div class="mds-display-block">A div with display block<br/></div>
+<div class="mds-display-block mds-display-lg-inline-block" style="color: #ff6861;">
+    A div with block and inline-block after 'lg' breakpoint<br/>
+</div>
+<div class="mds-display-block mds-display-lg-inline" style="color: #1B75BB;">
+    A div with block and inline after 'lg' breakpoint<br/>
+</div>
+<div class="mds-display-xl-none" style="color: #3e2563;">
+    A div hidden from 'xl' breakpoint<br/>
+</div>
+<div class="mds-display-none mds-display-xl-block" style="color: #ff6861;">
+    A div visible from 'xl' breakpoint<br/>
+</div>

package/src/helpers/floats/README.md

@@ -0,0 +1,8 @@
+## Helpers
+
+Use the class `mds-float`, followed by a breakpoint: `sm`, `md`, `lg`, `xl` (optional), a position: `left`, `right`, `none`.
+
+Examples:
+
+- `mds-float-left`
+- `mds-float-lg-right`

package/src/helpers/floats/floats.njk

@@ -0,0 +1,5 @@
+<h2>Floats</h2>
+<div class="mds-float-right">A div with float right</div>
+<br/>
+<div class="mds-float-lg-right">A div with float right after 'lg' breakpoint</div>
+<br/>

package/src/helpers/text-align/README.md

@@ -0,0 +1,8 @@
+## Helpers
+
+Use the class `mds-text-align`, followed by a breakpoint: `sm`, `md`, `lg`, `xl` (optional), a position: `left`, `right`, `center`.
+
+Examples:
+
+- `mds-text-align-center`
+- `mds-text-align-lg-right`

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

@@ -0,0 +1,4 @@
+<h2>Text align</h2>
+<p class="mds-text-align-right">A paragraph with text align right</p>
+<br/>
+<p class="mds-text-align-lg-center" style="top: 0;">A paragraph with text align right after 'lg' breakpoint</p>

package/src/layout/containers/README.md

@@ -0,0 +1,6 @@
+## Containers
+
+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

@@ -0,0 +1,13 @@
+<div class="mds-site-container container-example">
+  <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/__index.scss

@@ -1,4 +1,5 @@
 @import 'defaults';
 @import 'typography';
+@import 'containers';
 @import 'lists';
 @import 'grid';

package/src/scss/core/_containers.scss

@@ -0,0 +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-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-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/__index.scss

@@ -1,3 +1,7 @@
 @import 'media-queries';
 @import 'font-types';
 @import 'spacing';
+@import 'floats';
+@import 'text-align';
+@import 'display';
+@import 'borders';

package/src/scss/helpers/_borders.scss

@@ -0,0 +1,100 @@
+$breakpoints: map-get(map-get($tokens, 'size'), 'breakpoint');
+$positions: top, right, bottom, left;
+$corners: top-left, top-right, bottom-right, bottom-left;
+
+.mds-border {
+  border: $mds-size-border-width solid $mds-color-border;
+}
+
+.mds-border-none {
+  border: 0;
+}
+
+@each $bpname, $value in $breakpoints {
+  @include mq($from: $bpname) {
+    .mds-border-#{$bpname} {
+      border: $mds-size-border-width solid $mds-color-border;
+    }
+  }
+}
+
+@each $bpname, $value in $breakpoints {
+  @include mq($from: $bpname) {
+    .mds-border-#{$bpname}-none {
+      border: 0;
+    }
+  }
+}
+
+@each $position in $positions {
+  .mds-border-#{$position} {
+    border-#{$position}: $mds-size-border-width solid $mds-color-border;
+  }
+}
+
+@each $position in $positions {
+  .mds-border-#{$position}-none {
+    border-#{$position}: 0;
+  }
+}
+
+@each $bpname, $value in $breakpoints {
+  @include mq($from: $bpname) {
+    @each $position in $positions {
+      .mds-border-#{$bpname}-#{$position} {
+        border-#{$position}: $mds-size-border-width solid $mds-color-border;
+      }
+    }
+  }
+}
+
+@each $bpname, $value in $breakpoints {
+  @include mq($from: $bpname) {
+    @each $position in $positions {
+      .mds-border-#{$bpname}-#{$position}-none {
+        border-#{$position}: 0;
+      }
+    }
+  }
+}
+
+// border radius
+.mds-border-radius {
+  border-radius: $mds-size-border-radius;
+}
+
+.mds-border-radius-none {
+  border-radius: 0;
+}
+
+// 0/4 corners
+// @each $bpname, $value in $breakpoints {
+//   @include mq($from: $bpname) {
+//     .mds-border-radius-#{$bpname} {
+//       border-radius: $mds-size-border-radius;
+//     }
+//     .mds-border-radius-#{$bpname}-none {
+//       border-radius: 0;
+//     }
+//   }
+// }
+
+// 1 corner
+// @each $corner in $corners {
+//   .mds-border-radius-#{$corner} {
+//     border-#{$corner}-radius: $mds-size-border-radius;
+//   }
+// }
+
+// @each $bpname, $value in $breakpoints {
+//   @include mq($from: $bpname) {
+//     @each $corner in $corners {
+//       .mds-border-radius-#{$bpname}-#{$corner} {
+//         border-#{$corner}-radius: $mds-size-border-radius;
+//       }
+//       .mds-border-radius-#{$bpname}-#{$corner}-none {
+//         border-#{$corner}-radius: 0;
+//       }
+//     }
+//   }
+// }

package/src/scss/helpers/_display.scss

@@ -0,0 +1,35 @@
+$breakpoints: map-get(map-get($tokens, 'size'), 'breakpoint');
+$types: block, inline, inline-block, none;
+
+@each $type in $types {
+  .mds-display-#{$type} {
+    display: #{$type};
+  }
+}
+
+@each $bpname, $value in $breakpoints {
+  @include mq($from: $bpname) {
+    @each $type in $types {
+      .mds-display-#{$bpname}-#{$type} {
+        display: #{$type};
+      }
+    }
+  }
+}
+
+// .js .mds-js-display-none {
+//   display: none;
+// }
+// .js .mds-js-display-block {
+//   display: block;
+// }
+// @each $bpname, $value in $breakpoints {
+//   @include mq($from: $bpname) {
+//     .js .mds-js-display-#{$bpname}-none {
+//       display: none;
+//     }
+//     .js .mds-js-display-#{$bpname}-block {
+//       display: block;
+//     }
+//   }
+// }

package/src/scss/helpers/_floats.scss

@@ -0,0 +1,18 @@
+$breakpoints: map-get(map-get($tokens, 'size'), 'breakpoint');
+$positions: left, right, none;
+
+@each $position in $positions {
+  .mds-float-#{$position} {
+    float: #{$position};
+  }
+}
+
+@each $bpname, $value in $breakpoints {
+  @include mq($from: $bpname) {
+    @each $position in $positions {
+      .mds-float-#{$bpname}-#{$position} {
+        float: #{$position};
+      }
+    }
+  }
+}

package/src/scss/helpers/_text-align.scss

@@ -0,0 +1,18 @@
+$breakpoints: map-get(map-get($tokens, 'size'), 'breakpoint');
+$positions: left, right, center;
+
+@each $position in $positions {
+  .mds-text-align-#{$position} {
+    text-align: #{$position};
+  }
+}
+
+@each $bpname, $value in $breakpoints {
+  @include mq($from: $bpname) {
+    @each $position in $positions {
+      .mds-text-align-#{$bpname}-#{$position} {
+        text-align: #{$position};
+      }
+    }
+  }
+}

package/src/scss/index.scss

@@ -1,9 +1,10 @@
 @import '../../dist/_tokens/scss/tokens';
+@import 'resets/_index';
 @import 'vendor/normalize';
-@import 'core/_index';
+@import 'helpers/_index';
 @import 'functions/_index';
 @import 'utilities/_index';
-@import 'helpers/_index';
+@import 'core/_index';
 
 *,
 *::before,

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
    ========================================================================== */