@madgex/design-system 1.16.0 → 1.16.2

package/dist/_tokens/css/_tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 12 Jul 2019 11:31:23 GMT
+ * Generated on Tue, 16 Jul 2019 15:41:45 GMT
  */
 
 :root {
@@ -128,4 +128,5 @@
  --mds-size-wrapper-max-width: 1280px;
  --mds-size-wrapper-padding: 1.5%;
  --mds-size-surface-padding: 28px 32px;
+ --mds-size-button-border-radius: 4px;
 }

package/dist/_tokens/js/_tokens-module.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 12 Jul 2019 11:31:23 GMT
+ * Generated on Tue, 16 Jul 2019 15:41:45 GMT
  */
 
 module.exports = {
@@ -2614,6 +2614,29 @@ module.exports = {
           "padding"
         ]
       }
+    },
+    "button": {
+      "border": {
+        "radius": {
+          "value": "4rem",
+          "original": {
+            "value": "{size.border.radius.value}"
+          },
+          "name": "MdsSizeButtonBorderRadius",
+          "attributes": {
+            "category": "size",
+            "type": "button",
+            "item": "border",
+            "subitem": "radius"
+          },
+          "path": [
+            "size",
+            "button",
+            "border",
+            "radius"
+          ]
+        }
+      }
     }
   }
 };

package/dist/_tokens/scss/_tokens.scss

@@ -1,7 +1,7 @@
 
 /*
   Do not edit directly
-  Generated on Fri, 12 Jul 2019 11:31:23 GMT
+  Generated on Tue, 16 Jul 2019 15:41:45 GMT
 */
 
 $mds-color-brand-1-base: #1b75bb !default;
@@ -128,6 +128,7 @@ $mds-size-wrapper-width: 100% !default;
 $mds-size-wrapper-max-width: 1280px !default;
 $mds-size-wrapper-padding: 1.5% !default;
 $mds-size-surface-padding: 28px 32px !default;
+$mds-size-button-border-radius: 4px !default;
 
 $tokens: (
   'color': (
@@ -388,6 +389,11 @@ $tokens: (
     ),
     'surface': (
       'padding': $mds-size-surface-padding
+    ),
+    'button': (
+      'border': (
+        'radius': $mds-size-button-border-radius
+      )
     )
   )
 );

package/dist/css/index.css

@@ -1,6 +1,6 @@
 /*
   Do not edit directly
-  Generated on Fri, 12 Jul 2019 11:31:23 GMT
+  Generated on Tue, 16 Jul 2019 15:41:45 GMT
 */
 html,
 body,
@@ -1393,6 +1393,7 @@ body {
   white-space: nowrap;
   -webkit-appearance: none;
   border: 1px solid transparent;
+  border-radius: 4px;
   background-color: #f0af11;
   padding: 8px 12px;
   font-size: 100%;

package/package.json

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

package/src/components/button/button.scss

@@ -1,5 +1,7 @@
 $mds-color-button-bg: $mds-color-brand-2-base !default;
 $mds-color-button-bg-hover: $mds-color-brand-2-light !default;
+$mds-color-button-text: text-contrast($mds-color-button-bg) !default;
+$mds-color-button-text-hover: text-contrast($mds-color-button-bg-hover) !default;
 
 .mds-button {
   cursor: pointer;
@@ -8,13 +10,14 @@ $mds-color-button-bg-hover: $mds-color-brand-2-light !default;
   white-space: nowrap;
   -webkit-appearance: none;
   border: 1px solid transparent;
+  border-radius: $mds-size-button-border-radius;
   background-color: $mds-color-button-bg;
   padding: ($mds-size-baseline * 2) ($mds-size-baseline * 3);
   font-size: 100%;
   width: 100%;
   display: inline-block;
   text-align: center;
-  @include mds-text-contrast($mds-color-button-bg);
+  color: $mds-color-button-text;
 
   @include mq($from: md) {
     width: auto;
@@ -25,13 +28,13 @@ $mds-color-button-bg-hover: $mds-color-brand-2-light !default;
   &:visited,
   &:active {
     text-decoration: none;
-    @include mds-text-contrast($mds-color-button-bg);
+    color: $mds-color-button-text;
   }
 
   &:hover,
   &:focus {
     background-color: $mds-color-button-bg-hover;
     text-decoration: none;
-    @include mds-text-contrast($mds-color-button-bg-hover);
+    color: $mds-color-button-text-hover
   }
 }

package/src/scss/functions/__index.scss

@@ -1,3 +1,4 @@
 @import 'media-queries';
 @import 'color';
 @import 'px2rem';
+@import 'text-contrast';

package/src/scss/functions/_text-contrast.scss

@@ -0,0 +1,23 @@
+
+@function 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) {
+    @return $text-color-light;
+  } @else {
+    @return $text-color-dark;
+  }
+}
+    

package/src/scss/utilities/_mixins.scss

@@ -4,27 +4,3 @@
   -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/tokens/size.json

@@ -42,6 +42,13 @@
       "padding": {
         "value": "28px 32px"
       }
+    },
+    "button": {
+      "border": {
+        "radius": {
+          "value": "{size.border.radius.value}"
+        }
+      }
     }
   }
 }