1 | export function isUnitless(value) {
|
2 | return String(parseFloat(value)).length === String(value).length;
|
3 | }
|
4 |
|
5 |
|
6 |
|
7 | export function getUnit(input) {
|
8 | return String(input).match(/[\d.\-+]*\s*(.*)/)[1] || '';
|
9 | }
|
10 |
|
11 | export function toUnitless(length) {
|
12 | return parseFloat(length);
|
13 | }
|
14 |
|
15 |
|
16 | export function convertLength(baseFontSize) {
|
17 | return (length, toUnit) => {
|
18 | const fromUnit = getUnit(length);
|
19 |
|
20 | if (fromUnit === toUnit) {
|
21 | return length;
|
22 | }
|
23 |
|
24 |
|
25 | let pxLength = toUnitless(length);
|
26 |
|
27 | if (fromUnit !== 'px') {
|
28 | if (fromUnit === 'em') {
|
29 | pxLength = toUnitless(length) * toUnitless(baseFontSize);
|
30 | } else if (fromUnit === 'rem') {
|
31 | pxLength = toUnitless(length) * toUnitless(baseFontSize);
|
32 | return length;
|
33 | }
|
34 | }
|
35 |
|
36 |
|
37 | let outputLength = pxLength;
|
38 |
|
39 | if (toUnit !== 'px') {
|
40 | if (toUnit === 'em') {
|
41 | outputLength = pxLength / toUnitless(baseFontSize);
|
42 | } else if (toUnit === 'rem') {
|
43 | outputLength = pxLength / toUnitless(baseFontSize);
|
44 | } else {
|
45 | return length;
|
46 | }
|
47 | }
|
48 |
|
49 | return parseFloat(outputLength.toFixed(5)) + toUnit;
|
50 | };
|
51 | }
|
52 | export function alignProperty({
|
53 | size,
|
54 | grid
|
55 | }) {
|
56 | const sizeBelow = size - size % grid;
|
57 | const sizeAbove = sizeBelow + grid;
|
58 | return size - sizeBelow < sizeAbove - size ? sizeBelow : sizeAbove;
|
59 | }
|
60 |
|
61 |
|
62 |
|
63 | export function fontGrid({
|
64 | lineHeight,
|
65 | pixels,
|
66 | htmlFontSize
|
67 | }) {
|
68 | return pixels / (lineHeight * htmlFontSize);
|
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 | export function responsiveProperty({
|
104 | cssProperty,
|
105 | min,
|
106 | max,
|
107 | unit = 'rem',
|
108 | breakpoints = [600, 960, 1280],
|
109 | transform = null
|
110 | }) {
|
111 | const output = {
|
112 | [cssProperty]: `${min}${unit}`
|
113 | };
|
114 | const factor = (max - min) / breakpoints[breakpoints.length - 1];
|
115 | breakpoints.forEach(breakpoint => {
|
116 | let value = min + factor * breakpoint;
|
117 |
|
118 | if (transform !== null) {
|
119 | value = transform(value);
|
120 | }
|
121 |
|
122 | output[`@media (min-width:${breakpoint}px)`] = {
|
123 | [cssProperty]: `${Math.round(value * 10000) / 10000}${unit}`
|
124 | };
|
125 | });
|
126 | return output;
|
127 | } |
\ | No newline at end of file |