@madgex/design-system 1.10.1 → 1.12.0

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 (38) hide show
  1. package/README.md +1 -1
  2. package/dist/_tokens/css/_tokens.css +31 -14
  3. package/dist/_tokens/js/_tokens-module.js +515 -154
  4. package/dist/_tokens/scss/_tokens.scss +75 -29
  5. package/dist/_tokens/sketch/_tokens.sketchpalette +1 -3
  6. package/dist/css/index.css +2682 -2250
  7. package/docs/tokens/colour.njk +13 -5
  8. package/fractal-theme/assets/css/styles.css +25 -18
  9. package/gulp-tasks/tokens.js +11 -0
  10. package/package.json +1 -1
  11. package/src/components/button/button.scss +1 -2
  12. package/src/components/card/card.scss +2 -2
  13. package/src/components/section-title/section-title.scss +1 -1
  14. package/src/components/tabs/tabs.scss +4 -4
  15. package/src/helpers/borders/README.md +26 -0
  16. package/src/helpers/borders/borders.njk +13 -0
  17. package/src/helpers/display/README.md +8 -0
  18. package/src/helpers/display/display.njk +14 -0
  19. package/src/helpers/floats/README.md +8 -0
  20. package/src/helpers/floats/floats.njk +5 -0
  21. package/src/helpers/text-align/README.md +8 -0
  22. package/src/helpers/text-align/text-align.njk +4 -0
  23. package/src/layout/containers/README.md +4 -0
  24. package/src/layout/containers/containers.njk +9 -0
  25. package/src/scss/core/__index.scss +1 -0
  26. package/src/scss/core/_containers.scss +17 -0
  27. package/src/scss/helpers/__index.scss +4 -0
  28. package/src/scss/helpers/_borders.scss +100 -0
  29. package/src/scss/helpers/_display.scss +35 -0
  30. package/src/scss/helpers/_floats.scss +18 -0
  31. package/src/scss/helpers/_text-align.scss +18 -0
  32. package/src/scss/index.scss +2 -14
  33. package/src/tokens/_config.js +1 -1
  34. package/src/tokens/color.json +68 -16
  35. package/src/tokens/size.json +25 -3
  36. package/src/typography/font-types.njk +10 -10
  37. /package/src/{layout → helpers}/spacing/README.md +0 -0
  38. /package/src/{layout → helpers}/spacing/spacing.njk +0 -0
package/README.md CHANGED
@@ -19,7 +19,7 @@ Use the DS tokens to change DS variables.
19
19
  e.g. import the Madgex DS to your Sass file & overload variables:
20
20
 
21
21
  ```scss
22
- $mds-color-primary: #ff0000; // my primary brand colour is RED
22
+ $mds-color-brand-colour-1: #ff0000; // my primary brand colour is RED
23
23
  $mds-size-font-md: 20px; // my base font-size is 20px
24
24
 
25
25
  @import 'node_modules/@madgex/design-system/src/scss/index.scss';
package/dist/_tokens/css/_tokens.css CHANGED
@@ -1,23 +1,34 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 08 Jul 2019 16:03:51 GMT
3
+ * Generated on Wed, 10 Jul 2019 14:24:59 GMT
4
4
  */
5
5
 
6
6
  :root {
7
- --mds-color-base: #71767a; /* Base colour */
7
+ --mds-color-brand-1-base: #1b75bb;
8
+ --mds-color-brand-1-light: #2990e0;
9
+ --mds-color-brand-1-lightest: #e9f3fc;
10
+ --mds-color-brand-1-dark: #15598e;
11
+ --mds-color-brand-1-darkest: #082135;
12
+ --mds-color-brand-2-base: #f0af11;
13
+ --mds-color-brand-2-light: #f3bf41;
14
+ --mds-color-brand-2-lightest: #fdf7e7;
15
+ --mds-color-brand-2-dark: #c28d0c;
16
+ --mds-color-brand-2-darkest: #3a2a04;
17
+ --mds-color-brand-3-base: #16c1b4;
18
+ --mds-color-brand-3-light: #24e6d7;
19
+ --mds-color-brand-3-lightest: #e8fcfb;
20
+ --mds-color-brand-3-dark: #119389;
21
+ --mds-color-brand-3-darkest: #063733;
22
+ --mds-color-background-body: #f0f0f0;
23
+ --mds-color-background-site-container: #f0f0f0;
24
+ --mds-color-background-surface: #ffffff;
25
+ --mds-color-text: #222222;
26
+ --mds-color-border: #979797;
8
27
  --mds-color-white: #ffffff;
9
28
  --mds-color-black: #000000;
10
- --mds-color-primary: #2c608a;
11
- --mds-color-secondary: #d83933;
12
- --mds-color-destructive: #ff0000;
13
- --mds-color-text-primary: #000000;
14
- --mds-color-accent-warm: #fa9441;
15
- --mds-color-accent-cool: #00bde3;
16
- --mds-color-neutral-15: #262626;
17
- --mds-color-neutral-20: #323232;
18
- --mds-color-neutral-30: #4d4d4d;
19
- --mds-color-neutral-53: #888888;
20
- --mds-color-neutral-95: #f3f1f1;
29
+ --mds-color-neutral-base: #979797;
30
+ --mds-color-neutral-lightest: #f0f0f0;
31
+ --mds-color-neutral-darker: #333333;
21
32
  --mds-font-family-base: "Helvetica", Arial, sans-serif;
22
33
  --mds-font-type-canon-default-size: 28px;
23
34
  --mds-font-type-canon-default-line-height: 1.15;
@@ -105,6 +116,12 @@
105
116
  --mds-size-breakpoint-lg: 1008px;
106
117
  --mds-size-breakpoint-xl: 1280px;
107
118
  --mds-size-border-width: 1px;
108
- --mds-size-border-radius: 3px;
119
+ --mds-size-border-radius: 4px;
109
120
  --mds-size-gutter-width: 20px;
121
+ --mds-size-container-width: 100%;
122
+ --mds-size-container-min-width: 0;
123
+ --mds-size-container-max-width: 100%;
124
+ --mds-size-wrapper-width: 100%;
125
+ --mds-size-wrapper-max-width: 1280px;
126
+ --mds-size-wrapper-paddings: 2.5%;
110
127
  }