@volue/design-typography 0.1.0 → 0.2.0-next.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 (14) hide show
  1. package/dist/index.common.d.ts +77 -56
  2. package/dist/index.common.js +77 -56
  3. package/dist/index.cssmodules.css +60 -47
  4. package/dist/index.custom-properties.css +61 -48
  5. package/dist/index.json +55 -42
  6. package/dist/index.module.d.ts +77 -56
  7. package/dist/index.module.js +77 -56
  8. package/dist/index.scss +61 -48
  9. package/package.json +5 -3
  10. package/src/font-size.json +48 -0
  11. package/src/line-height.json +52 -0
  12. package/src/style.json +140 -108
  13. package/src/font-size.js +0 -44
  14. package/src/line-height.js +0 -73
package/src/line-height.json ADDED
@@ -0,0 +1,52 @@
1
+ {
2
+ "size": {
3
+ "lineHeight": {
4
+ "none": {
5
+ "value": "1"
6
+ },
7
+ "body": {
8
+ "value": "1.5"
9
+ },
10
+ "base": {
11
+ "value": "1.5rem",
12
+ "comment": "24"
13
+ },
14
+ "small": {
15
+ "value": "1.25rem",
16
+ "comment": "20"
17
+ },
18
+ "xSmall": {
19
+ "value": "1.125rem",
20
+ "comment": "18"
21
+ },
22
+ "zeta": {
23
+ "value": "roundTo(({size.font.base} * {size.lineHeight.body}) / {size.font.zeta}, 6)",
24
+ "comment": "14/24"
25
+ },
26
+ "epsilon": {
27
+ "value": "roundTo(({size.font.base} * {size.lineHeight.body}) / {size.font.epsilon}, 6)",
28
+ "comment": "16/24"
29
+ },
30
+ "delta": {
31
+ "value": "roundTo(({size.font.base} * {size.lineHeight.body}) / {size.font.delta}, 6)",
32
+ "comment": "19/24"
33
+ },
34
+ "gamma": {
35
+ "value": "roundTo(ceil({size.font.base} * {size.lineHeight.body} * 1.333) / {size.font.gamma}, 6)",
36
+ "comment": "21/32"
37
+ },
38
+ "beta": {
39
+ "value": "roundTo(({size.font.base} * {size.lineHeight.body} * 2) / {size.font.beta}, 6)",
40
+ "comment": "28/48"
41
+ },
42
+ "alpha": {
43
+ "value": "roundTo(({size.font.base} * {size.lineHeight.body} * 2) / {size.font.alpha}, 6)",
44
+ "comment": "38/48"
45
+ },
46
+ "giga": {
47
+ "value": "roundTo(({size.font.base} * {size.lineHeight.body} * 3) / {size.font.giga}, 6)",
48
+ "comment": "51/72"
49
+ }
50
+ }
51
+ }
52
+ }
package/src/style.json CHANGED
@@ -1,116 +1,148 @@
1
1
  {
2
2
  "font": {
3
3
  "style": {
4
- "base": {
5
- "fontFamily": {
6
- "value": "{font.family.base.value}"
7
- },
8
- "fontSize": {
9
- "value": "{size.font.base.value}"
10
- },
11
- "lineHeight": {
12
- "value": "{size.lineHeight.default.value}"
13
- },
14
- "fontWeight": {
15
- "value": "{font.weight.normal.value}"
16
- }
17
- },
18
- "giga": {
19
- "fontFamily": {
20
- "value": "{font.family.display.value}"
21
- },
22
- "fontSize": {
23
- "value": "{size.font.giga.value}"
24
- },
25
- "lineHeight": {
26
- "value": "{size.lineHeight.giga.value}"
27
- },
28
- "fontWeight": {
29
- "value": "{font.weight.normal.value}"
30
- }
31
- },
32
- "alpha": {
33
- "fontFamily": {
34
- "value": "{font.family.display.value}"
35
- },
36
- "fontSize": {
37
- "value": "{size.font.alpha.value}"
38
- },
39
- "lineHeight": {
40
- "value": "{size.lineHeight.alpha.value}"
41
- },
42
- "fontWeight": {
43
- "value": "{font.weight.normal.value}"
44
- }
45
- },
46
- "beta": {
47
- "fontFamily": {
48
- "value": "{font.family.display.value}"
49
- },
50
- "fontSize": {
51
- "value": "{size.font.beta.value}"
52
- },
53
- "lineHeight": {
54
- "value": "{size.lineHeight.beta.value}"
55
- },
56
- "fontWeight": {
57
- "value": "{font.weight.normal.value}"
4
+ "body": {
5
+ "base": {
6
+ "fontFamily": {
7
+ "value": "{font.family.base.value}"
8
+ },
9
+ "fontSize": {
10
+ "value": "{size.font.base.value}"
11
+ },
12
+ "lineHeight": {
13
+ "value": "{size.lineHeight.base.value}"
14
+ },
15
+ "fontWeight": {
16
+ "value": "{font.weight.normal.value}"
17
+ }
18
+ },
19
+ "small": {
20
+ "fontFamily": {
21
+ "value": "{font.family.base.value}"
22
+ },
23
+ "fontSize": {
24
+ "value": "{size.font.small.value}"
25
+ },
26
+ "lineHeight": {
27
+ "value": "{size.lineHeight.small.value}"
28
+ },
29
+ "fontWeight": {
30
+ "value": "{font.weight.normal.value}"
31
+ }
32
+ },
33
+ "xSmall": {
34
+ "fontFamily": {
35
+ "value": "{font.family.base.value}"
36
+ },
37
+ "fontSize": {
38
+ "value": "{size.font.xSmall.value}"
39
+ },
40
+ "lineHeight": {
41
+ "value": "{size.lineHeight.xSmall.value}"
42
+ },
43
+ "fontWeight": {
44
+ "value": "{font.weight.normal.value}"
45
+ }
58
46
  }
59
47
  },
60
- "gamma": {
61
- "fontFamily": {
62
- "value": "{font.family.display.value}"
63
- },
64
- "fontSize": {
65
- "value": "{size.font.gamma.value}"
66
- },
67
- "lineHeight": {
68
- "value": "{size.lineHeight.gamma.value}"
69
- },
70
- "fontWeight": {
71
- "value": "{font.weight.normal.value}"
72
- }
73
- },
74
- "delta": {
75
- "fontFamily": {
76
- "value": "{font.family.base.value}"
77
- },
78
- "fontSize": {
79
- "value": "{size.font.delta.value}"
80
- },
81
- "lineHeight": {
82
- "value": "{size.lineHeight.delta.value}"
83
- },
84
- "fontWeight": {
85
- "value": "{font.weight.normal.value}"
86
- }
87
- },
88
- "epsilon": {
89
- "fontFamily": {
90
- "value": "{font.family.base.value}"
91
- },
92
- "fontSize": {
93
- "value": "{size.font.epsilon.value}"
94
- },
95
- "lineHeight": {
96
- "value": "{size.lineHeight.epsilon.value}"
97
- },
98
- "fontWeight": {
99
- "value": "{font.weight.normal.value}"
100
- }
101
- },
102
- "zeta": {
103
- "fontFamily": {
104
- "value": "{font.family.base.value}"
105
- },
106
- "fontSize": {
107
- "value": "{size.font.zeta.value}"
108
- },
109
- "lineHeight": {
110
- "value": "{size.lineHeight.zeta.value}"
111
- },
112
- "fontWeight": {
113
- "value": "{font.weight.normal.value}"
48
+ "headlines": {
49
+ "giga": {
50
+ "fontFamily": {
51
+ "value": "{font.family.display.value}"
52
+ },
53
+ "fontSize": {
54
+ "value": "{size.font.giga.value}"
55
+ },
56
+ "lineHeight": {
57
+ "value": "{size.lineHeight.giga.value}"
58
+ },
59
+ "fontWeight": {
60
+ "value": "{font.weight.normal.value}"
61
+ }
62
+ },
63
+ "alpha": {
64
+ "fontFamily": {
65
+ "value": "{font.family.display.value}"
66
+ },
67
+ "fontSize": {
68
+ "value": "{size.font.alpha.value}"
69
+ },
70
+ "lineHeight": {
71
+ "value": "{size.lineHeight.alpha.value}"
72
+ },
73
+ "fontWeight": {
74
+ "value": "{font.weight.normal.value}"
75
+ }
76
+ },
77
+ "beta": {
78
+ "fontFamily": {
79
+ "value": "{font.family.display.value}"
80
+ },
81
+ "fontSize": {
82
+ "value": "{size.font.beta.value}"
83
+ },
84
+ "lineHeight": {
85
+ "value": "{size.lineHeight.beta.value}"
86
+ },
87
+ "fontWeight": {
88
+ "value": "{font.weight.normal.value}"
89
+ }
90
+ },
91
+ "gamma": {
92
+ "fontFamily": {
93
+ "value": "{font.family.display.value}"
94
+ },
95
+ "fontSize": {
96
+ "value": "{size.font.gamma.value}"
97
+ },
98
+ "lineHeight": {
99
+ "value": "{size.lineHeight.gamma.value}"
100
+ },
101
+ "fontWeight": {
102
+ "value": "{font.weight.normal.value}"
103
+ }
104
+ },
105
+ "delta": {
106
+ "fontFamily": {
107
+ "value": "{font.family.base.value}"
108
+ },
109
+ "fontSize": {
110
+ "value": "{size.font.delta.value}"
111
+ },
112
+ "lineHeight": {
113
+ "value": "{size.lineHeight.delta.value}"
114
+ },
115
+ "fontWeight": {
116
+ "value": "{font.weight.normal.value}"
117
+ }
118
+ },
119
+ "epsilon": {
120
+ "fontFamily": {
121
+ "value": "{font.family.base.value}"
122
+ },
123
+ "fontSize": {
124
+ "value": "{size.font.epsilon.value}"
125
+ },
126
+ "lineHeight": {
127
+ "value": "{size.lineHeight.epsilon.value}"
128
+ },
129
+ "fontWeight": {
130
+ "value": "{font.weight.normal.value}"
131
+ }
132
+ },
133
+ "zeta": {
134
+ "fontFamily": {
135
+ "value": "{font.family.base.value}"
136
+ },
137
+ "fontSize": {
138
+ "value": "{size.font.zeta.value}"
139
+ },
140
+ "lineHeight": {
141
+ "value": "{size.lineHeight.zeta.value}"
142
+ },
143
+ "fontWeight": {
144
+ "value": "{font.weight.normal.value}"
145
+ }
114
146
  }
115
147
  }
116
148
  }
package/src/font-size.js DELETED
@@ -1,44 +0,0 @@
1
- 'use strict';
2
-
3
- const { modularScale } = require('polished');
4
-
5
- const typeRatio = 1.333;
6
- const baseFontSize = 16; // default browser font size
7
-
8
- const createScale = (ratio, base) => steps => modularScale(steps, base, ratio);
9
- const px = value => `${value}px`;
10
-
11
- const { round, floor } = Math;
12
-
13
- const typeScale = createScale(typeRatio, baseFontSize);
14
-
15
- module.exports = {
16
- size: {
17
- font: {
18
- base: {
19
- value: px(baseFontSize)
20
- },
21
- zeta: {
22
- value: px(round(baseFontSize * 0.857))
23
- },
24
- epsilon: {
25
- value: px(typeScale(0))
26
- },
27
- delta: {
28
- value: px(round(baseFontSize * 1.17))
29
- },
30
- gamma: {
31
- value: px(floor(typeScale(1)))
32
- },
33
- beta: {
34
- value: px(round(typeScale(2)))
35
- },
36
- alpha: {
37
- value: px(round(typeScale(3)))
38
- },
39
- giga: {
40
- value: px(round(typeScale(4)))
41
- }
42
- }
43
- }
44
- };
package/src/line-height.js DELETED
@@ -1,73 +0,0 @@
1
- 'use strict';
2
-
3
- const fontSizeTokens = require('./font-size');
4
-
5
- const baseFontSize = parseInt(fontSizeTokens.size.font.base.value);
6
- const baseLineHeight = baseFontSize * 1.5; // 24
7
-
8
- const toPx = value => `${value}px`;
9
-
10
- const { ceil } = Math;
11
-
12
- const limitPrecision = (value, precision) => {
13
- const exp = Math.pow(10, precision);
14
- return Math.round(value * exp) / exp;
15
- };
16
-
17
- const calcLineHeight = (fontSize, lineHeight = baseLineHeight) => {
18
- const parsedFontSize = parseFloat(fontSize);
19
-
20
- return limitPrecision(
21
- ceil(parsedFontSize / lineHeight) * (lineHeight / parsedFontSize),
22
- 10
23
- );
24
- };
25
-
26
- module.exports = {
27
- size: {
28
- lineHeight: {
29
- base: {
30
- value: toPx(baseLineHeight)
31
- },
32
- none: {
33
- value: 1
34
- },
35
- default: {
36
- value: calcLineHeight(baseFontSize)
37
- },
38
- zeta: {
39
- value: calcLineHeight(fontSizeTokens.size.font.zeta.value)
40
- },
41
- epsilon: {
42
- value: calcLineHeight(fontSizeTokens.size.font.epsilon.value)
43
- },
44
- delta: {
45
- value: calcLineHeight(fontSizeTokens.size.font.delta.value)
46
- },
47
- gamma: {
48
- value: calcLineHeight(
49
- fontSizeTokens.size.font.gamma.value,
50
- ceil(baseLineHeight * 1.333)
51
- )
52
- },
53
- beta: {
54
- value: calcLineHeight(
55
- fontSizeTokens.size.font.beta.value,
56
- baseLineHeight * 2
57
- )
58
- },
59
- alpha: {
60
- value: calcLineHeight(
61
- fontSizeTokens.size.font.alpha.value,
62
- baseLineHeight * 2
63
- )
64
- },
65
- giga: {
66
- value: calcLineHeight(
67
- fontSizeTokens.size.font.giga.value,
68
- baseLineHeight * 3
69
- )
70
- }
71
- }
72
- }
73
- };