1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121 |
1x
8x
1x
1x
1x
1x
1x
1x
1x
3x
3x
1x
3x
3x
3x
3x
3x
3x
3x
1x
2x
2x
6x
6x
6x
6x
4x
2x
6x
6x
3x
3x
1x
2x
4x
4x
1x
1x | 'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; Eif ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { Eif (protoProps) defineProperties(Constructor.prototype, protoProps); Iif (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _color = require('./color');
var _color2 = _interopRequireDefault(_color);
var _get2 = require('./get');
var _get3 = _interopRequireDefault(_get2);
var _calcs = require('./calcs');
var _modularscaleJs = require('modularscale-js');
var _modularscaleJs2 = _interopRequireDefault(_modularscaleJs);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { Iif (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var DesignSystem = function () {
function DesignSystem(system, options) {
_classCallCheck(this, DesignSystem);
var defaultOptions = {
defaultUnit: 'px',
useModularScale: true,
fontSizeUnit: 'rem'
};
this.options = Object.assign({}, defaultOptions, options);
this.designSystem = system;
this.color = (0, _color2.default)(system.colorPalette);
this.pxTo = _calcs.pxTo;
this.toPx = _calcs.toPx;
}
_createClass(DesignSystem, [{
key: 'multiply',
value: function multiply(initial, multiplier) {
var initialVal = void 0;
if (typeof initial === 'string') {
initialVal = parseFloat(this.get(initial));
} else {
initialVal = initial;
}
return (0, _calcs.multiply)(initialVal, multiplier);
}
}, {
key: 'get',
value: function get(val) {
return (0, _get3.default)(this.designSystem, val);
}
}, {
key: 'bp',
value: function bp(_bp) {
return (0, _get3.default)(this.designSystem.breakpoints, _bp);
}
}, {
key: 'z',
value: function z(_z) {
return (0, _get3.default)(this.designSystem.zIndex, _z);
}
}, {
key: 'fontSize',
value: function fontSize(size) {
var toPxl = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var value = (0, _get3.default)(this.designSystem.type.sizes, size);
var output = void 0;
if (this.options.useModularScale) {
output = (0, _modularscaleJs2.default)(value, this.designSystem.type.modularscale);
} else {
output = value;
}
var untransformedOutput = output + 'px';
if (toPxl) {
return untransformedOutput;
}
switch (this.options.fontSizeUnit) {
case 'rem':
return (0, _calcs.pxTo)(output, parseFloat(this.designSystem.type.baseFontSize), 'rem');
case 'em':
return (0, _calcs.pxTo)(output, parseFloat(this.designSystem.type.baseFontSize), 'em');
default:
return untransformedOutput;
}
}
}, {
key: 'fs',
value: function fs(size) {
var toPxl = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
return this.fontSize(size, toPxl);
}
}, {
key: 'spacing',
value: function spacing() {
var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
return this.designSystem.spacing.scale[index] + 'px';
}
}, {
key: 'space',
value: function space(index) {
return this.spacing(index);
}
}]);
return DesignSystem;
}();
exports.default = DesignSystem; |