@madgex/design-system 1.0.1

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 (41) hide show
  1. package/.env-example +1 -0
  2. package/.eslintignore +2 -0
  3. package/.eslintrc.js +6 -0
  4. package/.prettierignore +3 -0
  5. package/.prettierrc +7 -0
  6. package/.vscode/launch.json +19 -0
  7. package/README.md +112 -0
  8. package/babel.config.js +12 -0
  9. package/commitlint.config.js +1 -0
  10. package/delivery/jenkinsfile +100 -0
  11. package/docs/01-index.njk +11 -0
  12. package/docs/tokens/colour.njk +43 -0
  13. package/docs/tokens/spacing.njk +5 -0
  14. package/fractal-theme/assets/css/styles.css +41 -0
  15. package/fractal.js +80 -0
  16. package/gulpfile.js +30 -0
  17. package/package.json +56 -0
  18. package/src/components/Button/_macro.njk +3 -0
  19. package/src/components/Button/_template.njk +35 -0
  20. package/src/components/Button/button.config.js +22 -0
  21. package/src/components/Button/button.njk +7 -0
  22. package/src/components/Button/button.scss +36 -0
  23. package/src/components/_preview.njk +16 -0
  24. package/src/core/functions/__index.scss +1 -0
  25. package/src/core/functions/_color.scss +0 -0
  26. package/src/core/helpers/__index.scss +11 -0
  27. package/src/core/helpers/_media-queries.scss +21 -0
  28. package/src/core/index.scss +31 -0
  29. package/src/core/utilities/__index.scss +3 -0
  30. package/src/core/utilities/_clearfix.scss +7 -0
  31. package/src/core/utilities/_mixins.scss +13 -0
  32. package/src/core/utilities/_visually-hidden.scss +20 -0
  33. package/src/core/vendor/_sass-mq.scss +360 -0
  34. package/src/patterns/form/form.njk +2 -0
  35. package/tasks/css.js +18 -0
  36. package/tasks/fractal.js +29 -0
  37. package/tasks/tokens.js +9 -0
  38. package/tokens/_config.js +159 -0
  39. package/tokens/color.json +24 -0
  40. package/tokens/font.json +9 -0
  41. package/tokens/size.json +51 -0
package/tokens/_config.js ADDED
@@ -0,0 +1,159 @@
1
+ const config = {
2
+ source: ['tokens/**/*.json'],
3
+ platforms: {
4
+ 'css-variables': {
5
+ transformGroup: 'css',
6
+ buildPath: 'tokens/build/css/',
7
+ prefix: 'mds',
8
+ files: [
9
+ {
10
+ destination: '_variables.css',
11
+ format: 'css/variables',
12
+ },
13
+ ],
14
+ },
15
+ 'scss-variables': {
16
+ transformGroup: 'web',
17
+ // transforms: ['size/px'],
18
+ buildPath: 'tokens/build/scss/',
19
+ prefix: 'mds',
20
+ files: [
21
+ {
22
+ destination: '_variables.scss',
23
+ // format: 'scss/variables',
24
+ format: 'scss/map-deep',
25
+ },
26
+ ],
27
+ },
28
+ sketch: {
29
+ transformGroup: 'web',
30
+ buildPath: 'tokens/build/sketch/',
31
+ prefix: 'mds',
32
+ files: [
33
+ {
34
+ destination: '_variables.sketchpalette',
35
+ format: 'sketch/palette',
36
+ },
37
+ ],
38
+ },
39
+ // json: {
40
+ // transformGroup: 'js',
41
+ // buildPath: 'build/json/',
42
+ // files: [
43
+ // {
44
+ // destination: '_variables.json',
45
+ // format: 'json',
46
+ // },
47
+ // ],
48
+ // },
49
+ // 'js-es6': {
50
+ // transformGroup: 'js',
51
+ // buildPath: 'build/js/',
52
+ // prefix: 'mds',
53
+ // files: [
54
+ // {
55
+ // format: 'javascript/es6',
56
+ // destination: '_variables-es6.js',
57
+ // filter: {
58
+ // attributes: {
59
+ // category: 'color',
60
+ // },
61
+ // },
62
+ // },
63
+ // ],
64
+ // },
65
+ 'js-module': {
66
+ transformGroup: 'js',
67
+ buildPath: 'tokens/build/js/',
68
+ prefix: 'mds',
69
+ files: [
70
+ {
71
+ destination: '_variables-module.js',
72
+ format: 'javascript/module',
73
+ },
74
+ ],
75
+ },
76
+ // 'js-object': {
77
+ // transformGroup: 'js',
78
+ // buildPath: 'build/js/',
79
+ // files: [
80
+ // {
81
+ // destination: '_variables-object.js',
82
+ // format: 'javascript/object',
83
+ // },
84
+ // ],
85
+ // },
86
+
87
+ // android: {
88
+ // transformGroup: 'android',
89
+ // buildPath: 'build/android/',
90
+ // files: [
91
+ // {
92
+ // destination: 'font_dimens.xml',
93
+ // format: 'android/fontDimens',
94
+ // },
95
+ // {
96
+ // destination: 'colors.xml',
97
+ // format: 'android/colors',
98
+ // filter: {
99
+ // attributes: {
100
+ // category: 'color',
101
+ // },
102
+ // },
103
+ // },
104
+ // ],
105
+ // },
106
+ // ios: {
107
+ // transformGroup: 'ios',
108
+ // buildPath: 'build/ios/',
109
+ // files: [
110
+ // {
111
+ // destination: 'StyleDictionaryColor.h',
112
+ // format: 'ios/colors.h',
113
+ // className: 'StyleDictionaryColor',
114
+ // type: 'StyleDictionaryColorName',
115
+ // filter: {
116
+ // attributes: {
117
+ // category: 'color',
118
+ // },
119
+ // },
120
+ // },
121
+ // {
122
+ // destination: 'StyleDictionaryColor.m',
123
+ // format: 'ios/colors.m',
124
+ // className: 'StyleDictionaryColor',
125
+ // type: 'StyleDictionaryColorName',
126
+ // filter: {
127
+ // attributes: {
128
+ // category: 'color',
129
+ // },
130
+ // },
131
+ // },
132
+ // {
133
+ // destination: 'StyleDictionarySize.h',
134
+ // format: 'ios/static.h',
135
+ // className: 'StyleDictionarySize',
136
+ // type: 'float',
137
+ // filter: {
138
+ // attributes: {
139
+ // category: 'size',
140
+ // },
141
+ // },
142
+ // },
143
+ // {
144
+ // destination: 'StyleDictionarySize.m',
145
+ // format: 'ios/static.m',
146
+ // className: 'StyleDictionarySize',
147
+ // type: 'float',
148
+ // filter: {
149
+ // attributes: {
150
+ // category: 'size',
151
+ // },
152
+ // },
153
+ // },
154
+ // ],
155
+ // },
156
+ },
157
+ };
158
+
159
+ module.exports = config;
package/tokens/color.json ADDED
@@ -0,0 +1,24 @@
1
+ {
2
+ "color": {
3
+ "base": {
4
+ "value": "#71767a",
5
+ "comment": "Base colour"
6
+ },
7
+ "white": { "value": "#FFFFFF" },
8
+ "black": { "value": "#000000" },
9
+ "primary": { "value": "#2c608a" },
10
+ "secondary": { "value": "#d83933" },
11
+ "text": {
12
+ "primary": { "value": "{color.black.value}" }
13
+ },
14
+ "accent-warm": { "value": "#fa9441" },
15
+ "accent-cool": { "value": "#00bde3" },
16
+ "neutral": {
17
+ "15": { "value": "#262626" },
18
+ "20": { "value": "#323232" },
19
+ "30": { "value": "#4d4d4d" },
20
+ "53": { "value": "#888888" },
21
+ "95": { "value": "#f3f1f1" }
22
+ }
23
+ }
24
+ }
package/tokens/font.json ADDED
@@ -0,0 +1,9 @@
1
+ {
2
+ "font": {
3
+ "family": {
4
+ "base": {
5
+ "value": "\"Helvetica\", Arial, sans-serif"
6
+ }
7
+ }
8
+ }
9
+ }
package/tokens/size.json ADDED
@@ -0,0 +1,51 @@
1
+ {
2
+ "size": {
3
+ "font": {
4
+ "xs": { "value": "12" },
5
+ "sm": { "value": "14" },
6
+ "md": { "value": "16px" },
7
+ "lg": { "value": "20" },
8
+ "xl": { "value": "26" },
9
+ "xxl": { "value": "46" },
10
+ "base": { "value": "{size.font.md.value}" }
11
+ },
12
+ "space": {
13
+ "none": { "value": "0" },
14
+ "xxs": { "value": "4px" },
15
+ "xs": { "value": "8px" },
16
+ "sm": { "value": "12px" },
17
+ "md": { "value": "16px" },
18
+ "lg": { "value": "24px" },
19
+ "xl": { "value": "32px" },
20
+ "xxl": { "value": "48px" },
21
+ "xxxl": { "value": "64px" },
22
+ "default": {
23
+ "value": "{size.space.md.value}"
24
+ },
25
+ "inset": {
26
+ "none": { "value": "0" },
27
+ "xxs": { "value": "4px" },
28
+ "xs": { "value": "8px" },
29
+ "sm": { "value": "12px" },
30
+ "md": { "value": "16px" },
31
+ "lg": { "value": "24px" },
32
+ "xl": { "value": "32px" },
33
+ "xxl": { "value": "48px" },
34
+ "xxxl": { "value": "64px" },
35
+ "default": {
36
+ "value": "{size.space.md.value}"
37
+ }
38
+ }
39
+ },
40
+ "breakpoint": {
41
+ "sm": { "value": "0px" },
42
+ "md": { "value": "768px" },
43
+ "lg": { "value": "1024px" }
44
+ },
45
+ "focus": {
46
+ "width": {
47
+ "value": "3px"
48
+ }
49
+ }
50
+ }
51
+ }