@madgex/design-system 1.9.0 → 1.10.1

package/package.json

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

package/src/layout/spacing/README.md

@@ -0,0 +1,23 @@
+## Space scale
+
+We are using a spacing scale based on a single tolen: `$mds-size-baseline = 0.25 rem | 4px`.
+
+We multiply this token to create any spacing on the design system.
+
+Ex: `margin-bottom: $mds-size-baseline * 5`
+
+## Helpers
+
+To help building a layout, we created classes that add margin and padding to an element.
+
+Use the class `mds-padding` or `mds-margin`, followed by a position: `top`, `right`, `bottom`, `left` (optional), a breakpoint: `sm`, `md`, `lg`, `xl` (optional) and the spacing that you want: `b0 to 10` (`baseline * scale`).
+
+Examples:
+
+- `mds-padding-b5`
+- `mds-margin-bottom-b0`
+- `mds-padding-left-lg-b4`
+
+The classes with the positions will override the value of the "shorthand" class at any viewport width.
+
+For example: `class="mds-padding-b5 mds-padding-md-b10 mds-padding-top-b0"` will create 20px padding at default size, then 40px padding from the `md` breakpoint but the padding-top will always be 0px at all sizes.

package/src/layout/spacing/spacing.njk

@@ -0,0 +1,15 @@
+<h2>Padding</h2>
+<div class="mds-padding-b5" style="border: 1px solid #666;">
+    <div>A box with a padding of 20px (baseline * 5)</div>
+</div>
+<div class="mds-padding-b5 mds-padding-left-b2 mds-padding-right-b2" style="border: 1px solid #666;">
+    <div>A box with a padding of 20px at the top and bottom and 8px on the left and right</div>
+</div>
+<div class="mds-padding-b5 mds-padding-md-b10 mds-padding-right-b0" style="border: 1px solid #666;">
+    <div>A box with a padding of 20px, 40px from the `md` breakpoint and no padding on the right</div>
+</div>
+
+<h2>Margin</h2>
+<p class="mds-margin-bottom-b7">A paragraph with a margin-bottom override of 28px (baseline * 7)</p>
+<p class="mds-margin-bottom-b7 mds-margin-bottom-md-b10">A paragraph with a margin-bottom override of 28px as default and 40px (baseline * 10) from the `md` breakpoint</p>
+<p class="mds-margin-bottom-b0">A paragraph with a margin-bottom override of 0px (baseline * 0)</p>

package/src/scss/core/_grid.scss

@@ -1,7 +1,6 @@
 /* Source: https://github.com/kristoferjoseph/flexboxgrid */
 
-$mds-gutter-width: $mds-size-baseline * 5;
-$mds-half-gutter-width: $mds-gutter-width * 0.5;
+$mds-half-gutter-width: $mds-size-gutter-width * 0.5;
 
 .mds-grid-row {
   box-sizing: border-box;

package/src/scss/helpers/__index.scss

@@ -1,2 +1,3 @@
 @import 'media-queries';
 @import 'font-types';
+@import 'spacing';

package/src/scss/helpers/_spacing.scss

@@ -0,0 +1,46 @@
+$breakpoints: map-get(map-get($tokens, 'size'), 'breakpoint');
+$positions: top, right, bottom, left;
+
+// There are 2 loops as the more specific classes with positions have to be declared before the shorthand ones
+// so the value with the position can override the value of the shorthand.
+
+@for $i from 0 through 10 {
+  .mds-padding-b#{$i} {
+    padding: $mds-size-baseline * $i;
+  }
+  .mds-margin-b#{$i} {
+    margin: $mds-size-baseline * $i;
+  }
+  @each $bpname, $value in $breakpoints {
+    @include mq($from: $bpname) {
+      .mds-padding-#{$bpname}-b#{$i} {
+        padding: $mds-size-baseline * $i;
+      }
+      .mds-margin-#{$bpname}-b#{$i} {
+        margin: $mds-size-baseline * $i;
+      }
+    }
+  }
+}
+
+@for $i from 0 through 10 {
+  @each $position in $positions {
+    .mds-padding-#{$position}-b#{$i} {
+      padding-#{$position}: $mds-size-baseline * $i;
+    }
+    .mds-margin-#{$position}-b#{$i} {
+      margin-#{$position}: $mds-size-baseline * $i;
+    }
+
+    @each $bpname, $value in $breakpoints {
+      @include mq($from: $bpname) {
+        .mds-padding-#{$position}-#{$bpname}-b#{$i} {
+          padding-#{$position}: $mds-size-baseline * $i;
+        }
+        .mds-margin-#{$position}-#{$bpname}-b#{$i} {
+          margin-#{$position}: $mds-size-baseline * $i;
+        }
+      }
+    }
+  }
+}

package/src/tokens/_config.js

@@ -2,7 +2,8 @@ const config = {
   source: ['src/tokens/**/*.json'],
   platforms: {
     'css-variables': {
-      transformGroup: 'css',
+      // transformGroup: 'css',
+      transforms: ['attribute/cti', 'name/cti/kebab', 'time/seconds', 'content/icon', 'color/css'],
       buildPath: 'dist/_tokens/css/',
       prefix: 'mds',
       files: [
@@ -13,8 +14,9 @@ const config = {
       ],
     },
     'scss-variables': {
-      transformGroup: 'web',
+      // transformGroup: 'web',
       // transforms: ['size/px'],
+      transforms: ['attribute/cti', 'name/cti/kebab', 'color/css'],
       buildPath: 'dist/_tokens/scss/',
       prefix: 'mds',
       files: [

package/src/tokens/size.json

@@ -1,14 +1,5 @@
 {
   "size": {
-    "font": {
-      "xs": { "value": "12" },
-      "sm": { "value": "14" },
-      "md": { "value": "16px" },
-      "lg": { "value": "20" },
-      "xl": { "value": "26" },
-      "xxl": { "value": "46" },
-      "base": { "value": "{size.font.md.value}" }
-    },
     "baseline": { "value": "4px" },
     "breakpoint": {
       "sm": { "value": "400px" },
@@ -23,6 +14,7 @@
       "radius": {
         "value": "3px"
       }
-    }
+    },
+    "gutter-width": { "value" : "20px" }
   }
 }