@madgex/design-system 2.0.7 → 2.0.8

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",

package/src/components/button/button.scss

@@ -46,6 +46,7 @@
   color: $mds-color-link-base;
   font-weight: $mds-font-weight-link-base;
   border-color: transparent;
+  text-transform: none;
 
   &:hover,
   &:focus {

package/src/components/notification/notification.scss

@@ -5,7 +5,7 @@
   left: 50%;
   @include z-index(modal);
   transform: translateX(-50%) translateY(-50%);
-  box-shadow: $mds-color-box-shadow-base;
+  box-shadow: $mds-shadow-base;
 
   animation: notification-fadeIn 0.25s;
   animation-fill-mode: forwards;

package/src/components/popover/popover.scss

@@ -13,7 +13,7 @@ $arrow-size: 10px;
   border: $mds-size-border-width-base solid $mds-color-border;
   border-radius: $mds-size-border-radius-base;
   padding: ($mds-size-baseline * 2);
-  box-shadow: $mds-color-box-shadow-base;
+  box-shadow: $mds-shadow-base;
   text-align: left;
   max-width: 250px;
   @include z-index(popup);

package/src/layout/containers/01-base-containers.njk

@@ -5,7 +5,7 @@
         <div class="mds-surface__inner">
           <h2>Content inside the site-container and wrapper</h2>
           <p>site-container is 100%</p>
-          <p>wrapper is 100% - 20px (gutter width) and max-width 1280px (1.5% left and right padding)</p>
+          <p>wrapper is 97% - 20px (gutter width) and max-width 1240px</p>
           <div style="height: 100px;"></div>
         </div>
       </div>

package/src/scss/core/_containers.scss

@@ -9,7 +9,7 @@ body {
   min-width: $mds-size-container-min-width;
   margin: 0 auto;
   background: $mds-color-background-site-container;
-  // box-shadow: $mds-color-container-box-shadow;
+  box-shadow: $mds-shadow-site-container;
 }
 .mds-main {
   background: $mds-color-background-main;
@@ -20,7 +20,6 @@ body {
   width: calc(#{$mds-size-wrapper-width} - #{$mds-size-gutter-width});
   max-width: $mds-size-wrapper-max-width;
   margin: 0 auto;
-  padding: 0 $mds-size-wrapper-padding;
 }
 
 .mds-surface {
@@ -85,15 +84,18 @@ $breakpoints: map-get(map-get($tokens, 'size'), 'breakpoint');
 }
 
 $mds-half-gutter-width: $mds-size-gutter-width * 0.5;
+// Calculate space left between the wrapper and the edge of the screen on each side
+// so we can stretch the sticky container to make it appear full screen
+// I added 0.01 to stretch the container slightly more to avoid a tiny gap between the edge of the screen and the container
+$space-between-wrapper-and-edge: (100% - $mds-size-wrapper-width) / 2 + 0.01;
 
 .mds-fixed-container--sticky {
   position: sticky;
 
-  // I added 0.01 to stretch the container slightly more to avoid a tiny gap between the edge of the screen and the container
   .mds-wrapper & {
-    width: calc(100% + #{($mds-size-wrapper-padding + 0.01) * 2} + #{$mds-size-gutter-width});
-    margin-left: calc((#{$mds-size-wrapper-padding + 0.01} + #{$mds-half-gutter-width}) * -1);
-    margin-right: calc((#{$mds-size-wrapper-padding + 0.01} + #{$mds-half-gutter-width}) * -1);
+    width: calc(100% + #{$space-between-wrapper-and-edge * 2} + #{$mds-size-gutter-width});
+    margin-left: calc((#{$space-between-wrapper-and-edge} + #{$mds-half-gutter-width}) * -1);
+    margin-right: calc((#{$space-between-wrapper-and-edge} + #{$mds-half-gutter-width}) * -1);
 
     @include mq($from: $mds-size-breakpoint-md) {
       width: 100%;

package/src/tokens/color.json

@@ -225,11 +225,6 @@
         "value" : "{color.brand.1.dark.value}"
       }
     },
-    "box-shadow": {
-      "base": {
-        "value" : "0 2px 5px 0 {color.neutral.lighter.value}"
-      }
-    },
     "branded-container": {
       "1": {
         "background": {
@@ -248,14 +243,6 @@
       }
     },
     "input": {
-      "shadow": {
-        "disabled": {
-          "value" : "0px 0px 0px 3px {color.input.disabled.field.value}"
-        },
-        "focus": {
-          "value" : "0px 0px 0px 3px {color.input.focus.value}"
-        }
-      },
       "checked": {
         "value" : "{color.neutral.black.value}"
       },

package/src/tokens/effects.json

@@ -0,0 +1,10 @@
+{
+  "shadow": {
+    "base": {
+      "value" : "0 2px 5px 0 {color.neutral.lighter.value}"
+    },
+    "site-container": {
+      "value": "none"
+    }
+  }
+}

package/src/tokens/size.json

@@ -39,13 +39,10 @@
     },
     "wrapper": {
       "width": {
-        "value": "100%"
+        "value": "97%"
       },
       "max-width": {
-        "value": "1280px"
-      },
-      "padding": {
-        "value": "1.5%"
+        "value": "1240px"
       }
     },
     "surface": {