@madgex/design-system 1.11.0 → 1.13.0

package/dist/_tokens/css/_tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 10 Jul 2019 13:44:29 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;
@@ -116,6 +117,13 @@
  --mds-size-breakpoint-lg: 1008px;
  --mds-size-breakpoint-xl: 1280px;
  --mds-size-border-width: 1px;
- --mds-size-border-radius: 3px;
+ --mds-size-border-radius: 4px;
  --mds-size-gutter-width: 20px;
+ --mds-size-container-width: 100%;
+ --mds-size-container-min-width: 0;
+ --mds-size-container-max-width: 100%;
+ --mds-size-wrapper-width: 100%;
+ --mds-size-wrapper-max-width: 1280px;
+ --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 13:44:30 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": {
@@ -2397,9 +2422,9 @@ module.exports = {
         ]
       },
       "radius": {
-        "value": "3rem",
+        "value": "4rem",
         "original": {
-          "value": "3px"
+          "value": "4px"
         },
         "name": "MdsSizeBorderRadius",
         "attributes": {
@@ -2428,6 +2453,131 @@ module.exports = {
         "size",
         "gutter-width"
       ]
+    },
+    "container": {
+      "width": {
+        "value": "100rem",
+        "original": {
+          "value": "100%"
+        },
+        "name": "MdsSizeContainerWidth",
+        "attributes": {
+          "category": "size",
+          "type": "container",
+          "item": "width"
+        },
+        "path": [
+          "size",
+          "container",
+          "width"
+        ]
+      },
+      "min-width": {
+        "value": "0rem",
+        "original": {
+          "value": "0"
+        },
+        "name": "MdsSizeContainerMinWidth",
+        "attributes": {
+          "category": "size",
+          "type": "container",
+          "item": "min-width"
+        },
+        "path": [
+          "size",
+          "container",
+          "min-width"
+        ]
+      },
+      "max-width": {
+        "value": "100rem",
+        "original": {
+          "value": "100%"
+        },
+        "name": "MdsSizeContainerMaxWidth",
+        "attributes": {
+          "category": "size",
+          "type": "container",
+          "item": "max-width"
+        },
+        "path": [
+          "size",
+          "container",
+          "max-width"
+        ]
+      }
+    },
+    "wrapper": {
+      "width": {
+        "value": "100rem",
+        "original": {
+          "value": "100%"
+        },
+        "name": "MdsSizeWrapperWidth",
+        "attributes": {
+          "category": "size",
+          "type": "wrapper",
+          "item": "width"
+        },
+        "path": [
+          "size",
+          "wrapper",
+          "width"
+        ]
+      },
+      "max-width": {
+        "value": "1280rem",
+        "original": {
+          "value": "1280px"
+        },
+        "name": "MdsSizeWrapperMaxWidth",
+        "attributes": {
+          "category": "size",
+          "type": "wrapper",
+          "item": "max-width"
+        },
+        "path": [
+          "size",
+          "wrapper",
+          "max-width"
+        ]
+      },
+      "padding": {
+        "value": "2.5rem",
+        "original": {
+          "value": "2.5%"
+        },
+        "name": "MdsSizeWrapperPadding",
+        "attributes": {
+          "category": "size",
+          "type": "wrapper",
+          "item": "padding"
+        },
+        "path": [
+          "size",
+          "wrapper",
+          "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 13:44:30 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;
@@ -116,8 +117,15 @@ $mds-size-breakpoint-md: 600px !default;
 $mds-size-breakpoint-lg: 1008px !default;
 $mds-size-breakpoint-xl: 1280px !default;
 $mds-size-border-width: 1px !default;
-$mds-size-border-radius: 3px !default;
+$mds-size-border-radius: 4px !default;
 $mds-size-gutter-width: 20px !default;
+$mds-size-container-width: 100% !default;
+$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-padding: 2.5% !default;
+$mds-size-surface-padding: 20px !default;
 
 $tokens: (
   'color': (
@@ -149,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': (
@@ -358,6 +369,19 @@ $tokens: (
       'width': $mds-size-border-width,
       'radius': $mds-size-border-radius
     ),
-    'gutter-width': $mds-size-gutter-width
+    'gutter-width': $mds-size-gutter-width,
+    'container': (
+      'width': $mds-size-container-width,
+      'min-width': $mds-size-container-min-width,
+      'max-width': $mds-size-container-max-width
+    ),
+    'wrapper': (
+      'width': $mds-size-wrapper-width,
+      'max-width': $mds-size-wrapper-max-width,
+      'padding': $mds-size-wrapper-padding
+    ),
+    'surface': (
+      'padding': $mds-size-surface-padding
+    )
   )
 );