@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
@@ -1,235 +1,490 @@
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
  module.exports = {
7
7
  "color": {
8
- "base": {
9
- "value": "#71767a",
10
- "comment": "Base colour",
11
- "original": {
12
- "value": "#71767a",
13
- "comment": "Base colour"
14
- },
15
- "name": "MdsColorBase",
16
- "attributes": {
17
- "category": "color",
18
- "type": "base"
19
- },
20
- "path": [
21
- "color",
22
- "base"
23
- ]
24
- },
25
- "white": {
26
- "value": "#ffffff",
27
- "original": {
28
- "value": "#FFFFFF"
29
- },
30
- "name": "MdsColorWhite",
31
- "attributes": {
32
- "category": "color",
33
- "type": "white"
34
- },
35
- "path": [
36
- "color",
37
- "white"
38
- ]
39
- },
40
- "black": {
41
- "value": "#000000",
42
- "original": {
43
- "value": "#000000"
8
+ "brand": {
9
+ "1": {
10
+ "base": {
11
+ "value": "#1b75bb",
12
+ "original": {
13
+ "value": "#1B75BB"
14
+ },
15
+ "name": "MdsColorBrand1Base",
16
+ "attributes": {
17
+ "category": "color",
18
+ "type": "brand",
19
+ "item": "1",
20
+ "subitem": "base"
21
+ },
22
+ "path": [
23
+ "color",
24
+ "brand",
25
+ "1",
26
+ "base"
27
+ ]
28
+ },
29
+ "light": {
30
+ "value": "#2990e0",
31
+ "scssColorFunction": "lighten($mds-color-brand-1-base,10%)",
32
+ "original": {
33
+ "value": "#2990e0",
34
+ "scssColorFunction": "lighten($mds-color-brand-1-base,10%)"
35
+ },
36
+ "name": "MdsColorBrand1Light",
37
+ "attributes": {
38
+ "category": "color",
39
+ "type": "brand",
40
+ "item": "1",
41
+ "subitem": "light"
42
+ },
43
+ "path": [
44
+ "color",
45
+ "brand",
46
+ "1",
47
+ "light"
48
+ ]
49
+ },
50
+ "lightest": {
51
+ "value": "#e9f3fc",
52
+ "scssColorFunction": "lighten($mds-color-brand-1-base,(95% - lightness($mds-color-brand-1-base)))",
53
+ "original": {
54
+ "value": "#e9f3fc",
55
+ "scssColorFunction": "lighten($mds-color-brand-1-base,(95% - lightness($mds-color-brand-1-base)))"
56
+ },
57
+ "name": "MdsColorBrand1Lightest",
58
+ "attributes": {
59
+ "category": "color",
60
+ "type": "brand",
61
+ "item": "1",
62
+ "subitem": "lightest"
63
+ },
64
+ "path": [
65
+ "color",
66
+ "brand",
67
+ "1",
68
+ "lightest"
69
+ ]
70
+ },
71
+ "dark": {
72
+ "value": "#15598e",
73
+ "scssColorFunction": "darken($mds-color-brand-1-base,10%)",
74
+ "original": {
75
+ "value": "#15598e",
76
+ "scssColorFunction": "darken($mds-color-brand-1-base,10%)"
77
+ },
78
+ "name": "MdsColorBrand1Dark",
79
+ "attributes": {
80
+ "category": "color",
81
+ "type": "brand",
82
+ "item": "1",
83
+ "subitem": "dark"
84
+ },
85
+ "path": [
86
+ "color",
87
+ "brand",
88
+ "1",
89
+ "dark"
90
+ ]
91
+ },
92
+ "darkest": {
93
+ "value": "#082135",
94
+ "scssColorFunction": "darken($mds-color-brand-1-base,(lightness($mds-color-brand-1-base) - 12%))",
95
+ "original": {
96
+ "value": "#082135",
97
+ "scssColorFunction": "darken($mds-color-brand-1-base,(lightness($mds-color-brand-1-base) - 12%))"
98
+ },
99
+ "name": "MdsColorBrand1Darkest",
100
+ "attributes": {
101
+ "category": "color",
102
+ "type": "brand",
103
+ "item": "1",
104
+ "subitem": "darkest"
105
+ },
106
+ "path": [
107
+ "color",
108
+ "brand",
109
+ "1",
110
+ "darkest"
111
+ ]
112
+ }
44
113
  },
45
- "name": "MdsColorBlack",
46
- "attributes": {
47
- "category": "color",
48
- "type": "black"
114
+ "2": {
115
+ "base": {
116
+ "value": "#f0af11",
117
+ "original": {
118
+ "value": "#f0af11"
119
+ },
120
+ "name": "MdsColorBrand2Base",
121
+ "attributes": {
122
+ "category": "color",
123
+ "type": "brand",
124
+ "item": "2",
125
+ "subitem": "base"
126
+ },
127
+ "path": [
128
+ "color",
129
+ "brand",
130
+ "2",
131
+ "base"
132
+ ]
133
+ },
134
+ "light": {
135
+ "value": "#f3bf41",
136
+ "scssColorFunction": "lighten($mds-color-brand-2-base,10%)",
137
+ "original": {
138
+ "value": "#f3bf41",
139
+ "scssColorFunction": "lighten($mds-color-brand-2-base,10%)"
140
+ },
141
+ "name": "MdsColorBrand2Light",
142
+ "attributes": {
143
+ "category": "color",
144
+ "type": "brand",
145
+ "item": "2",
146
+ "subitem": "light"
147
+ },
148
+ "path": [
149
+ "color",
150
+ "brand",
151
+ "2",
152
+ "light"
153
+ ]
154
+ },
155
+ "lightest": {
156
+ "value": "#fdf7e7",
157
+ "scssColorFunction": "lighten($mds-color-brand-2-base,(95% - lightness($mds-color-brand-2-base)))",
158
+ "original": {
159
+ "value": "#fdf7e7",
160
+ "scssColorFunction": "lighten($mds-color-brand-2-base,(95% - lightness($mds-color-brand-2-base)))"
161
+ },
162
+ "name": "MdsColorBrand2Lightest",
163
+ "attributes": {
164
+ "category": "color",
165
+ "type": "brand",
166
+ "item": "2",
167
+ "subitem": "lightest"
168
+ },
169
+ "path": [
170
+ "color",
171
+ "brand",
172
+ "2",
173
+ "lightest"
174
+ ]
175
+ },
176
+ "dark": {
177
+ "value": "#c28d0c",
178
+ "scssColorFunction": "darken($mds-color-brand-2-base,10%)",
179
+ "original": {
180
+ "value": "#c28d0c",
181
+ "scssColorFunction": "darken($mds-color-brand-2-base,10%)"
182
+ },
183
+ "name": "MdsColorBrand2Dark",
184
+ "attributes": {
185
+ "category": "color",
186
+ "type": "brand",
187
+ "item": "2",
188
+ "subitem": "dark"
189
+ },
190
+ "path": [
191
+ "color",
192
+ "brand",
193
+ "2",
194
+ "dark"
195
+ ]
196
+ },
197
+ "darkest": {
198
+ "value": "#3a2a04",
199
+ "scssColorFunction": "darken($mds-color-brand-2-base,(lightness($mds-color-brand-2-base) - 12%))",
200
+ "original": {
201
+ "value": "#3a2a04",
202
+ "scssColorFunction": "darken($mds-color-brand-2-base,(lightness($mds-color-brand-2-base) - 12%))"
203
+ },
204
+ "name": "MdsColorBrand2Darkest",
205
+ "attributes": {
206
+ "category": "color",
207
+ "type": "brand",
208
+ "item": "2",
209
+ "subitem": "darkest"
210
+ },
211
+ "path": [
212
+ "color",
213
+ "brand",
214
+ "2",
215
+ "darkest"
216
+ ]
217
+ }
49
218
  },
50
- "path": [
51
- "color",
52
- "black"
53
- ]
219
+ "3": {
220
+ "base": {
221
+ "value": "#16c1b4",
222
+ "original": {
223
+ "value": "#16C1B4"
224
+ },
225
+ "name": "MdsColorBrand3Base",
226
+ "attributes": {
227
+ "category": "color",
228
+ "type": "brand",
229
+ "item": "3",
230
+ "subitem": "base"
231
+ },
232
+ "path": [
233
+ "color",
234
+ "brand",
235
+ "3",
236
+ "base"
237
+ ]
238
+ },
239
+ "light": {
240
+ "value": "#24e6d7",
241
+ "scssColorFunction": "lighten($mds-color-brand-3-base,10%)",
242
+ "original": {
243
+ "value": "#24e6d7",
244
+ "scssColorFunction": "lighten($mds-color-brand-3-base,10%)"
245
+ },
246
+ "name": "MdsColorBrand3Light",
247
+ "attributes": {
248
+ "category": "color",
249
+ "type": "brand",
250
+ "item": "3",
251
+ "subitem": "light"
252
+ },
253
+ "path": [
254
+ "color",
255
+ "brand",
256
+ "3",
257
+ "light"
258
+ ]
259
+ },
260
+ "lightest": {
261
+ "value": "#e8fcfb",
262
+ "scssColorFunction": "lighten($mds-color-brand-3-base,(95% - lightness($mds-color-brand-3-base)))",
263
+ "original": {
264
+ "value": "#e8fcfb",
265
+ "scssColorFunction": "lighten($mds-color-brand-3-base,(95% - lightness($mds-color-brand-3-base)))"
266
+ },
267
+ "name": "MdsColorBrand3Lightest",
268
+ "attributes": {
269
+ "category": "color",
270
+ "type": "brand",
271
+ "item": "3",
272
+ "subitem": "lightest"
273
+ },
274
+ "path": [
275
+ "color",
276
+ "brand",
277
+ "3",
278
+ "lightest"
279
+ ]
280
+ },
281
+ "dark": {
282
+ "value": "#119389",
283
+ "scssColorFunction": "darken($mds-color-brand-3-base,10%)",
284
+ "original": {
285
+ "value": "#119389",
286
+ "scssColorFunction": "darken($mds-color-brand-3-base,10%)"
287
+ },
288
+ "name": "MdsColorBrand3Dark",
289
+ "attributes": {
290
+ "category": "color",
291
+ "type": "brand",
292
+ "item": "3",
293
+ "subitem": "dark"
294
+ },
295
+ "path": [
296
+ "color",
297
+ "brand",
298
+ "3",
299
+ "dark"
300
+ ]
301
+ },
302
+ "darkest": {
303
+ "value": "#063733",
304
+ "scssColorFunction": "darken($mds-color-brand-3-base,(lightness($mds-color-brand-3-base) - 12%))",
305
+ "original": {
306
+ "value": "#063733",
307
+ "scssColorFunction": "darken($mds-color-brand-3-base,(lightness($mds-color-brand-3-base) - 12%))"
308
+ },
309
+ "name": "MdsColorBrand3Darkest",
310
+ "attributes": {
311
+ "category": "color",
312
+ "type": "brand",
313
+ "item": "3",
314
+ "subitem": "darkest"
315
+ },
316
+ "path": [
317
+ "color",
318
+ "brand",
319
+ "3",
320
+ "darkest"
321
+ ]
322
+ }
323
+ }
54
324
  },
55
- "primary": {
56
- "value": "#2c608a",
57
- "original": {
58
- "value": "#2c608a"
325
+ "background": {
326
+ "body": {
327
+ "value": "#f0f0f0",
328
+ "original": {
329
+ "value": "{color.background.site-container.value}"
330
+ },
331
+ "name": "MdsColorBackgroundBody",
332
+ "attributes": {
333
+ "category": "color",
334
+ "type": "background",
335
+ "item": "body"
336
+ },
337
+ "path": [
338
+ "color",
339
+ "background",
340
+ "body"
341
+ ]
59
342
  },
60
- "name": "MdsColorPrimary",
61
- "attributes": {
62
- "category": "color",
63
- "type": "primary"
343
+ "site-container": {
344
+ "value": "#f0f0f0",
345
+ "original": {
346
+ "value": "#f0f0f0"
347
+ },
348
+ "name": "MdsColorBackgroundSiteContainer",
349
+ "attributes": {
350
+ "category": "color",
351
+ "type": "background",
352
+ "item": "site-container"
353
+ },
354
+ "path": [
355
+ "color",
356
+ "background",
357
+ "site-container"
358
+ ]
64
359
  },
65
- "path": [
66
- "color",
67
- "primary"
68
- ]
360
+ "surface": {
361
+ "value": "#ffffff",
362
+ "original": {
363
+ "value": "#ffffff"
364
+ },
365
+ "name": "MdsColorBackgroundSurface",
366
+ "attributes": {
367
+ "category": "color",
368
+ "type": "background",
369
+ "item": "surface"
370
+ },
371
+ "path": [
372
+ "color",
373
+ "background",
374
+ "surface"
375
+ ]
376
+ }
69
377
  },
70
- "secondary": {
71
- "value": "#d83933",
378
+ "text": {
379
+ "value": "#222222",
72
380
  "original": {
73
- "value": "#d83933"
381
+ "value": "#222"
74
382
  },
75
- "name": "MdsColorSecondary",
383
+ "name": "MdsColorText",
76
384
  "attributes": {
77
385
  "category": "color",
78
- "type": "secondary"
386
+ "type": "text"
79
387
  },
80
388
  "path": [
81
389
  "color",
82
- "secondary"
390
+ "text"
83
391
  ]
84
392
  },
85
- "destructive": {
86
- "value": "#ff0000",
393
+ "border": {
394
+ "value": "#979797",
87
395
  "original": {
88
- "value": "red"
396
+ "value": "{color.neutral.base.value}"
89
397
  },
90
- "name": "MdsColorDestructive",
398
+ "name": "MdsColorBorder",
91
399
  "attributes": {
92
400
  "category": "color",
93
- "type": "destructive"
401
+ "type": "border"
94
402
  },
95
403
  "path": [
96
404
  "color",
97
- "destructive"
405
+ "border"
98
406
  ]
99
407
  },
100
- "text": {
101
- "primary": {
102
- "value": "#000000",
103
- "original": {
104
- "value": "{color.black.value}"
105
- },
106
- "name": "MdsColorTextPrimary",
107
- "attributes": {
108
- "category": "color",
109
- "type": "text",
110
- "item": "primary"
111
- },
112
- "path": [
113
- "color",
114
- "text",
115
- "primary"
116
- ]
117
- }
118
- },
119
- "accent-warm": {
120
- "value": "#fa9441",
408
+ "white": {
409
+ "value": "#ffffff",
121
410
  "original": {
122
- "value": "#fa9441"
411
+ "value": "#FFFFFF"
123
412
  },
124
- "name": "MdsColorAccentWarm",
413
+ "name": "MdsColorWhite",
125
414
  "attributes": {
126
415
  "category": "color",
127
- "type": "accent-warm"
416
+ "type": "white"
128
417
  },
129
418
  "path": [
130
419
  "color",
131
- "accent-warm"
420
+ "white"
132
421
  ]
133
422
  },
134
- "accent-cool": {
135
- "value": "#00bde3",
423
+ "black": {
424
+ "value": "#000000",
136
425
  "original": {
137
- "value": "#00bde3"
426
+ "value": "#000000"
138
427
  },
139
- "name": "MdsColorAccentCool",
428
+ "name": "MdsColorBlack",
140
429
  "attributes": {
141
430
  "category": "color",
142
- "type": "accent-cool"
431
+ "type": "black"
143
432
  },
144
433
  "path": [
145
434
  "color",
146
- "accent-cool"
435
+ "black"
147
436
  ]
148
437
  },
149
438
  "neutral": {
150
- "15": {
151
- "value": "#262626",
152
- "original": {
153
- "value": "#262626"
154
- },
155
- "name": "MdsColorNeutral15",
156
- "attributes": {
157
- "category": "color",
158
- "type": "neutral",
159
- "item": "15"
160
- },
161
- "path": [
162
- "color",
163
- "neutral",
164
- "15"
165
- ]
166
- },
167
- "20": {
168
- "value": "#323232",
169
- "original": {
170
- "value": "#323232"
171
- },
172
- "name": "MdsColorNeutral20",
173
- "attributes": {
174
- "category": "color",
175
- "type": "neutral",
176
- "item": "20"
177
- },
178
- "path": [
179
- "color",
180
- "neutral",
181
- "20"
182
- ]
183
- },
184
- "30": {
185
- "value": "#4d4d4d",
439
+ "base": {
440
+ "value": "#979797",
186
441
  "original": {
187
- "value": "#4d4d4d"
442
+ "value": "#979797"
188
443
  },
189
- "name": "MdsColorNeutral30",
444
+ "name": "MdsColorNeutralBase",
190
445
  "attributes": {
191
446
  "category": "color",
192
447
  "type": "neutral",
193
- "item": "30"
448
+ "item": "base"
194
449
  },
195
450
  "path": [
196
451
  "color",
197
452
  "neutral",
198
- "30"
453
+ "base"
199
454
  ]
200
455
  },
201
- "53": {
202
- "value": "#888888",
456
+ "lightest": {
457
+ "value": "#f0f0f0",
203
458
  "original": {
204
- "value": "#888888"
459
+ "value": "#F0F0F0"
205
460
  },
206
- "name": "MdsColorNeutral53",
461
+ "name": "MdsColorNeutralLightest",
207
462
  "attributes": {
208
463
  "category": "color",
209
464
  "type": "neutral",
210
- "item": "53"
465
+ "item": "lightest"
211
466
  },
212
467
  "path": [
213
468
  "color",
214
469
  "neutral",
215
- "53"
470
+ "lightest"
216
471
  ]
217
472
  },
218
- "95": {
219
- "value": "#f3f1f1",
473
+ "darker": {
474
+ "value": "#333333",
220
475
  "original": {
221
- "value": "#f3f1f1"
476
+ "value": "#333333"
222
477
  },
223
- "name": "MdsColorNeutral95",
478
+ "name": "MdsColorNeutralDarker",
224
479
  "attributes": {
225
480
  "category": "color",
226
481
  "type": "neutral",
227
- "item": "95"
482
+ "item": "darker"
228
483
  },
229
484
  "path": [
230
485
  "color",
231
486
  "neutral",
232
- "95"
487
+ "darker"
233
488
  ]
234
489
  }
235
490
  }
@@ -2142,9 +2397,9 @@ module.exports = {
2142
2397
  ]
2143
2398
  },
2144
2399
  "radius": {
2145
- "value": "3rem",
2400
+ "value": "4rem",
2146
2401
  "original": {
2147
- "value": "3px"
2402
+ "value": "4px"
2148
2403
  },
2149
2404
  "name": "MdsSizeBorderRadius",
2150
2405
  "attributes": {
@@ -2173,6 +2428,112 @@ module.exports = {
2173
2428
  "size",
2174
2429
  "gutter-width"
2175
2430
  ]
2431
+ },
2432
+ "container": {
2433
+ "width": {
2434
+ "value": "100rem",
2435
+ "original": {
2436
+ "value": "100%"
2437
+ },
2438
+ "name": "MdsSizeContainerWidth",
2439
+ "attributes": {
2440
+ "category": "size",
2441
+ "type": "container",
2442
+ "item": "width"
2443
+ },
2444
+ "path": [
2445
+ "size",
2446
+ "container",
2447
+ "width"
2448
+ ]
2449
+ },
2450
+ "min-width": {
2451
+ "value": "0rem",
2452
+ "original": {
2453
+ "value": "0"
2454
+ },
2455
+ "name": "MdsSizeContainerMinWidth",
2456
+ "attributes": {
2457
+ "category": "size",
2458
+ "type": "container",
2459
+ "item": "min-width"
2460
+ },
2461
+ "path": [
2462
+ "size",
2463
+ "container",
2464
+ "min-width"
2465
+ ]
2466
+ },
2467
+ "max-width": {
2468
+ "value": "100rem",
2469
+ "original": {
2470
+ "value": "100%"
2471
+ },
2472
+ "name": "MdsSizeContainerMaxWidth",
2473
+ "attributes": {
2474
+ "category": "size",
2475
+ "type": "container",
2476
+ "item": "max-width"
2477
+ },
2478
+ "path": [
2479
+ "size",
2480
+ "container",
2481
+ "max-width"
2482
+ ]
2483
+ }
2484
+ },
2485
+ "wrapper": {
2486
+ "width": {
2487
+ "value": "100rem",
2488
+ "original": {
2489
+ "value": "100%"
2490
+ },
2491
+ "name": "MdsSizeWrapperWidth",
2492
+ "attributes": {
2493
+ "category": "size",
2494
+ "type": "wrapper",
2495
+ "item": "width"
2496
+ },
2497
+ "path": [
2498
+ "size",
2499
+ "wrapper",
2500
+ "width"
2501
+ ]
2502
+ },
2503
+ "max-width": {
2504
+ "value": "1280rem",
2505
+ "original": {
2506
+ "value": "1280px"
2507
+ },
2508
+ "name": "MdsSizeWrapperMaxWidth",
2509
+ "attributes": {
2510
+ "category": "size",
2511
+ "type": "wrapper",
2512
+ "item": "max-width"
2513
+ },
2514
+ "path": [
2515
+ "size",
2516
+ "wrapper",
2517
+ "max-width"
2518
+ ]
2519
+ },
2520
+ "paddings": {
2521
+ "value": "2.5rem",
2522
+ "original": {
2523
+ "value": "2.5%"
2524
+ },
2525
+ "name": "MdsSizeWrapperPaddings",
2526
+ "attributes": {
2527
+ "category": "size",
2528
+ "type": "wrapper",
2529
+ "item": "paddings"
2530
+ },
2531
+ "path": [
2532
+ "size",
2533
+ "wrapper",
2534
+ "paddings"
2535
+ ]
2536
+ }
2176
2537
  }
2177
2538
  }
2178
2539
  };