@madgex/design-system 1.16.1 → 1.16.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/_tokens/css/_tokens.css +1 -1
  2. package/dist/_tokens/js/_tokens-module.js +1 -1
  3. package/dist/_tokens/scss/_tokens.scss +1 -1
  4. package/dist/css/index.css +1 -1
  5. package/package.json +1 -1
  6. package/src/components/button/button.scss +5 -3
  7. package/src/scss/functions/__index.scss +1 -0
  8. package/src/scss/functions/_text-contrast.scss +23 -0
  9. package/src/scss/utilities/_mixins.scss +0 -24
package/dist/_tokens/css/_tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 16 Jul 2019 12:41:51 GMT
3
+ * Generated on Tue, 16 Jul 2019 15:41:45 GMT
4
4
  */
5
5
 
6
6
  :root {
package/dist/_tokens/js/_tokens-module.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 16 Jul 2019 12:41:51 GMT
3
+ * Generated on Tue, 16 Jul 2019 15:41:45 GMT
4
4
  */
5
5
 
6
6
  module.exports = {
package/dist/_tokens/scss/_tokens.scss CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  /*
3
3
  Do not edit directly
4
- Generated on Tue, 16 Jul 2019 12:41:51 GMT
4
+ Generated on Tue, 16 Jul 2019 15:41:45 GMT
5
5
  */
6
6
 
7
7
  $mds-color-brand-1-base: #1b75bb !default;
package/dist/css/index.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /*
2
2
  Do not edit directly
3
- Generated on Tue, 16 Jul 2019 12:41:51 GMT
3
+ Generated on Tue, 16 Jul 2019 15:41:45 GMT
4
4
  */
5
5
  html,
6
6
  body,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@madgex/design-system",
3
- "version": "1.16.1",
3
+ "version": "1.16.2",
4
4
  "scripts": {
5
5
  "clean": "rimraf dist public tokens/build",
6
6
  "commit": "commit",
package/src/components/button/button.scss CHANGED
@@ -1,5 +1,7 @@
1
1
  $mds-color-button-bg: $mds-color-brand-2-base !default;
2
2
  $mds-color-button-bg-hover: $mds-color-brand-2-light !default;
3
+ $mds-color-button-text: text-contrast($mds-color-button-bg) !default;
4
+ $mds-color-button-text-hover: text-contrast($mds-color-button-bg-hover) !default;
3
5
 
4
6
  .mds-button {
5
7
  cursor: pointer;
@@ -15,7 +17,7 @@ $mds-color-button-bg-hover: $mds-color-brand-2-light !default;
15
17
  width: 100%;
16
18
  display: inline-block;
17
19
  text-align: center;
18
- @include mds-text-contrast($mds-color-button-bg);
20
+ color: $mds-color-button-text;
19
21
 
20
22
  @include mq($from: md) {
21
23
  width: auto;
@@ -26,13 +28,13 @@ $mds-color-button-bg-hover: $mds-color-brand-2-light !default;
26
28
  &:visited,
27
29
  &:active {
28
30
  text-decoration: none;
29
- @include mds-text-contrast($mds-color-button-bg);
31
+ color: $mds-color-button-text;
30
32
  }
31
33
 
32
34
  &:hover,
33
35
  &:focus {
34
36
  background-color: $mds-color-button-bg-hover;
35
37
  text-decoration: none;
36
- @include mds-text-contrast($mds-color-button-bg-hover);
38
+ color: $mds-color-button-text-hover
37
39
  }
38
40
  }
package/src/scss/functions/__index.scss CHANGED
@@ -1,3 +1,4 @@
1
1
  @import 'media-queries';
2
2
  @import 'color';
3
3
  @import 'px2rem';
4
+ @import 'text-contrast';
package/src/scss/functions/_text-contrast.scss ADDED
@@ -0,0 +1,23 @@
1
+
2
+ @function text-contrast($bg-color) {
3
+ $color-text-base-brightness: round(
4
+ (red($mds-color-text-base) * 299) + (green($mds-color-text-base) * 587) + (blue($mds-color-text-base) * 114) / 1000
5
+ );
6
+ $color-brightness: round((red($bg-color) * 299) + (green($bg-color) * 587) + (blue($bg-color) * 114) / 1000);
7
+ $light-color: round((red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114) / 1000);
8
+
9
+ $text-color-dark: $mds-color-text-base !default;
10
+ $text-color-light: $mds-color-text-invert !default;
11
+
12
+ @if abs($color-text-base-brightness) >= ($light-color/2) {
13
+ $text-color-dark: $mds-color-text-invert;
14
+ $text-color-light: $mds-color-text-base;
15
+ }
16
+
17
+ @if abs($color-brightness) < ($light-color/2) {
18
+ @return $text-color-light;
19
+ } @else {
20
+ @return $text-color-dark;
21
+ }
22
+ }
23
+
package/src/scss/utilities/_mixins.scss CHANGED
@@ -4,27 +4,3 @@
4
4
  -moz-user-select: none;
5
5
  user-select: none;
6
6
  }
7
-
8
- // This mixin will check the brightness of the background colour and text
9
- // and return either light or dark text depending on the contrast
10
- @mixin mds-text-contrast($bg-color) {
11
- $color-text-base-brightness: round(
12
- (red($mds-color-text-base) * 299) + (green($mds-color-text-base) * 587) + (blue($mds-color-text-base) * 114) / 1000
13
- );
14
- $color-brightness: round((red($bg-color) * 299) + (green($bg-color) * 587) + (blue($bg-color) * 114) / 1000);
15
- $light-color: round((red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114) / 1000);
16
-
17
- $text-color-dark: $mds-color-text-base !default;
18
- $text-color-light: $mds-color-text-invert !default;
19
-
20
- @if abs($color-text-base-brightness) >= ($light-color/2) {
21
- $text-color-dark: $mds-color-text-invert;
22
- $text-color-light: $mds-color-text-base;
23
- }
24
-
25
- @if abs($color-brightness) < ($light-color/2) {
26
- color: $text-color-light;
27
- } @else {
28
- color: $text-color-dark;
29
- }
30
- }