@volue/design-typography 0.2.0-next.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 +20 -20
  2. package/dist/index.common.js +20 -20
  3. package/dist/index.cssmodules.css +29 -29
  4. package/dist/index.custom-properties.css +30 -30
  5. package/dist/index.json +23 -23
  6. package/dist/index.module.d.ts +20 -20
  7. package/dist/index.module.js +20 -20
  8. package/dist/index.scss +30 -30
  9. package/package.json +3 -1
  10. package/src/font-size.json +48 -0
  11. package/src/line-height.json +52 -0
  12. package/src/style.json +3 -3
  13. package/src/font-size.js +0 -50
  14. package/src/line-height.js +0 -83
package/dist/index.common.d.ts CHANGED
@@ -20,7 +20,7 @@ declare const tokens: {
20
20
  "lineHeight": "1.25rem",
21
21
  "fontWeight": "400"
22
22
  },
23
- "xsmall": {
23
+ "xSmall": {
24
24
  "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
25
25
  "fontSize": "12px",
26
26
  "lineHeight": "1.125rem",
@@ -31,43 +31,43 @@ declare const tokens: {
31
31
  "giga": {
32
32
  "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
33
33
  "fontSize": "51px",
34
- "lineHeight": number,
34
+ "lineHeight": "1.411765",
35
35
  "fontWeight": "400"
36
36
  },
37
37
  "alpha": {
38
38
  "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
39
39
  "fontSize": "38px",
40
- "lineHeight": number,
40
+ "lineHeight": "1.263158",
41
41
  "fontWeight": "400"
42
42
  },
43
43
  "beta": {
44
44
  "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
45
45
  "fontSize": "28px",
46
- "lineHeight": number,
46
+ "lineHeight": "1.714286",
47
47
  "fontWeight": "400"
48
48
  },
49
49
  "gamma": {
50
50
  "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
51
51
  "fontSize": "21px",
52
- "lineHeight": number,
52
+ "lineHeight": "1.52381",
53
53
  "fontWeight": "400"
54
54
  },
55
55
  "delta": {
56
56
  "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
57
57
  "fontSize": "19px",
58
- "lineHeight": number,
58
+ "lineHeight": "1.263158",
59
59
  "fontWeight": "400"
60
60
  },
61
61
  "epsilon": {
62
62
  "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
63
63
  "fontSize": "16px",
64
- "lineHeight": number,
64
+ "lineHeight": "1.5",
65
65
  "fontWeight": "400"
66
66
  },
67
67
  "zeta": {
68
68
  "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
69
69
  "fontSize": "14px",
70
- "lineHeight": number,
70
+ "lineHeight": "1.714286",
71
71
  "fontWeight": "400"
72
72
  }
73
73
  }
@@ -78,10 +78,11 @@ declare const tokens: {
78
78
  }
79
79
  },
80
80
  "size": {
81
+ "_fontScaleRatio": "1.3333",
81
82
  "font": {
82
83
  "base": "16px",
84
+ "xSmall": "12px",
83
85
  "small": "14px",
84
- "xsmall": "12px",
85
86
  "zeta": "14px",
86
87
  "epsilon": "16px",
87
88
  "delta": "19px",
@@ -99,19 +100,18 @@ declare const tokens: {
99
100
  "widest": "0.1em"
100
101
  },
101
102
  "lineHeight": {
102
- "none": number,
103
- "body": number,
104
- "default": "24px",
103
+ "none": "1",
104
+ "body": "1.5",
105
105
  "base": "1.5rem",
106
106
  "small": "1.25rem",
107
- "xsmall": "1.125rem",
108
- "zeta": number,
109
- "epsilon": number,
110
- "delta": number,
111
- "gamma": number,
112
- "beta": number,
113
- "alpha": number,
114
- "giga": number
107
+ "xSmall": "1.125rem",
108
+ "zeta": "1.714286",
109
+ "epsilon": "1.5",
110
+ "delta": "1.263158",
111
+ "gamma": "1.52381",
112
+ "beta": "1.714286",
113
+ "alpha": "1.263158",
114
+ "giga": "1.411765"
115
115
  }
116
116
  }
117
117
  };
package/dist/index.common.js CHANGED
@@ -19,7 +19,7 @@ module.exports = {
19
19
  "lineHeight": "1.25rem",
20
20
  "fontWeight": "400"
21
21
  },
22
- "xsmall": {
22
+ "xSmall": {
23
23
  "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
24
24
  "fontSize": "12px",
25
25
  "lineHeight": "1.125rem",
@@ -30,43 +30,43 @@ module.exports = {
30
30
  "giga": {
31
31
  "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
32
32
  "fontSize": "51px",
33
- "lineHeight": 1.4117647059,
33
+ "lineHeight": "1.411765",
34
34
  "fontWeight": "400"
35
35
  },
36
36
  "alpha": {
37
37
  "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
38
38
  "fontSize": "38px",
39
- "lineHeight": 1.2631578947,
39
+ "lineHeight": "1.263158",
40
40
  "fontWeight": "400"
41
41
  },
42
42
  "beta": {
43
43
  "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
44
44
  "fontSize": "28px",
45
- "lineHeight": 1.7142857143,
45
+ "lineHeight": "1.714286",
46
46
  "fontWeight": "400"
47
47
  },
48
48
  "gamma": {
49
49
  "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
50
50
  "fontSize": "21px",
51
- "lineHeight": 1.5238095238,
51
+ "lineHeight": "1.52381",
52
52
  "fontWeight": "400"
53
53
  },
54
54
  "delta": {
55
55
  "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
56
56
  "fontSize": "19px",
57
- "lineHeight": 1.2631578947,
57
+ "lineHeight": "1.263158",
58
58
  "fontWeight": "400"
59
59
  },
60
60
  "epsilon": {
61
61
  "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
62
62
  "fontSize": "16px",
63
- "lineHeight": 1.5,
63
+ "lineHeight": "1.5",
64
64
  "fontWeight": "400"
65
65
  },
66
66
  "zeta": {
67
67
  "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
68
68
  "fontSize": "14px",
69
- "lineHeight": 1.7142857143,
69
+ "lineHeight": "1.714286",
70
70
  "fontWeight": "400"
71
71
  }
72
72
  }
@@ -77,10 +77,11 @@ module.exports = {
77
77
  }
78
78
  },
79
79
  "size": {
80
+ "_fontScaleRatio": "1.3333",
80
81
  "font": {
81
82
  "base": "16px",
83
+ "xSmall": "12px",
82
84
  "small": "14px",
83
- "xsmall": "12px",
84
85
  "zeta": "14px",
85
86
  "epsilon": "16px",
86
87
  "delta": "19px",
@@ -98,19 +99,18 @@ module.exports = {
98
99
  "widest": "0.1em"
99
100
  },
100
101
  "lineHeight": {
101
- "none": 1,
102
- "body": 1.5,
103
- "default": "24px",
102
+ "none": "1",
103
+ "body": "1.5",
104
104
  "base": "1.5rem",
105
105
  "small": "1.25rem",
106
- "xsmall": "1.125rem",
107
- "zeta": 1.7142857143,
108
- "epsilon": 1.5,
109
- "delta": 1.2631578947,
110
- "gamma": 1.5238095238,
111
- "beta": 1.7142857143,
112
- "alpha": 1.2631578947,
113
- "giga": 1.4117647059
106
+ "xSmall": "1.125rem",
107
+ "zeta": "1.714286",
108
+ "epsilon": "1.5",
109
+ "delta": "1.263158",
110
+ "gamma": "1.52381",
111
+ "beta": "1.714286",
112
+ "alpha": "1.263158",
113
+ "giga": "1.411765"
114
114
  }
115
115
  }
116
116
  }
package/dist/index.cssmodules.css CHANGED
@@ -9,29 +9,29 @@
9
9
  @value font-style-body-small-font-size: 14px;
10
10
  @value font-style-body-small-line-height: 1.25rem;
11
11
  @value font-style-body-small-font-weight: 400;
12
- @value font-style-body-xsmall-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
13
- @value font-style-body-xsmall-font-size: 12px;
14
- @value font-style-body-xsmall-line-height: 1.125rem;
15
- @value font-style-body-xsmall-font-weight: 400;
12
+ @value font-style-body-x-small-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
13
+ @value font-style-body-x-small-font-size: 12px;
14
+ @value font-style-body-x-small-line-height: 1.125rem;
15
+ @value font-style-body-x-small-font-weight: 400;
16
16
  @value font-style-headlines-giga-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
17
17
  @value font-style-headlines-giga-font-size: 51px;
18
- @value font-style-headlines-giga-line-height: 1.4117647059;
18
+ @value font-style-headlines-giga-line-height: 1.411765;
19
19
  @value font-style-headlines-giga-font-weight: 400;
20
20
  @value font-style-headlines-alpha-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
21
21
  @value font-style-headlines-alpha-font-size: 38px;
22
- @value font-style-headlines-alpha-line-height: 1.2631578947;
22
+ @value font-style-headlines-alpha-line-height: 1.263158;
23
23
  @value font-style-headlines-alpha-font-weight: 400;
24
24
  @value font-style-headlines-beta-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
25
25
  @value font-style-headlines-beta-font-size: 28px;
26
- @value font-style-headlines-beta-line-height: 1.7142857143;
26
+ @value font-style-headlines-beta-line-height: 1.714286;
27
27
  @value font-style-headlines-beta-font-weight: 400;
28
28
  @value font-style-headlines-gamma-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
29
29
  @value font-style-headlines-gamma-font-size: 21px;
30
- @value font-style-headlines-gamma-line-height: 1.5238095238;
30
+ @value font-style-headlines-gamma-line-height: 1.52381;
31
31
  @value font-style-headlines-gamma-font-weight: 400;
32
32
  @value font-style-headlines-delta-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
33
33
  @value font-style-headlines-delta-font-size: 19px;
34
- @value font-style-headlines-delta-line-height: 1.2631578947;
34
+ @value font-style-headlines-delta-line-height: 1.263158;
35
35
  @value font-style-headlines-delta-font-weight: 400;
36
36
  @value font-style-headlines-epsilon-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
37
37
  @value font-style-headlines-epsilon-font-size: 16px;
@@ -39,20 +39,21 @@
39
39
  @value font-style-headlines-epsilon-font-weight: 400;
40
40
  @value font-style-headlines-zeta-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
41
41
  @value font-style-headlines-zeta-font-size: 14px;
42
- @value font-style-headlines-zeta-line-height: 1.7142857143;
42
+ @value font-style-headlines-zeta-line-height: 1.714286;
43
43
  @value font-style-headlines-zeta-font-weight: 400;
44
44
  @value font-weight-normal: 400;
45
45
  @value font-weight-semibold: 600;
46
+ @value size-font-scale-ratio: 1.3333; /* Modular scale ratio */
46
47
  @value size-font-base: 16px;
47
- @value size-font-small: 14px;
48
- @value size-font-xsmall: 12px;
48
+ @value size-font-x-small: 12px; /* 12 */
49
+ @value size-font-small: 14px; /* 14 */
49
50
  @value size-font-zeta: 14px;
50
- @value size-font-epsilon: 16px;
51
- @value size-font-delta: 19px;
52
- @value size-font-gamma: 21px;
53
- @value size-font-beta: 28px;
54
- @value size-font-alpha: 38px;
55
- @value size-font-giga: 51px;
51
+ @value size-font-epsilon: 16px; /* 16 */
52
+ @value size-font-delta: 19px; /* 19 */
53
+ @value size-font-gamma: 21px; /* 21 */
54
+ @value size-font-beta: 28px; /* 28 */
55
+ @value size-font-alpha: 38px; /* 38 */
56
+ @value size-font-giga: 51px; /* 51 */
56
57
  @value size-letter-spacing-tighter: -0.05em;
57
58
  @value size-letter-spacing-tight: -0.025em;
58
59
  @value size-letter-spacing-normal: normal;
@@ -61,14 +62,13 @@
61
62
  @value size-letter-spacing-widest: 0.1em;
62
63
  @value size-line-height-none: 1;
63
64
  @value size-line-height-body: 1.5;
64
- @value size-line-height-default: 24px;
65
- @value size-line-height-base: 1.5rem;
66
- @value size-line-height-small: 1.25rem;
67
- @value size-line-height-xsmall: 1.125rem;
68
- @value size-line-height-zeta: 1.7142857143;
69
- @value size-line-height-epsilon: 1.5;
70
- @value size-line-height-delta: 1.2631578947;
71
- @value size-line-height-gamma: 1.5238095238;
72
- @value size-line-height-beta: 1.7142857143;
73
- @value size-line-height-alpha: 1.2631578947;
74
- @value size-line-height-giga: 1.4117647059;
65
+ @value size-line-height-base: 1.5rem; /* 24 */
66
+ @value size-line-height-small: 1.25rem; /* 20 */
67
+ @value size-line-height-x-small: 1.125rem; /* 18 */
68
+ @value size-line-height-zeta: 1.714286; /* 14/24 */
69
+ @value size-line-height-epsilon: 1.5; /* 16/24 */
70
+ @value size-line-height-delta: 1.263158; /* 19/24 */
71
+ @value size-line-height-gamma: 1.52381; /* 21/32 */
72
+ @value size-line-height-beta: 1.714286; /* 28/48 */
73
+ @value size-line-height-alpha: 1.263158; /* 38/48 */
74
+ @value size-line-height-giga: 1.411765; /* 51/72 */
package/dist/index.custom-properties.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 03 Apr 2023 08:11:38 GMT
3
+ * Generated on Wed, 05 Apr 2023 10:48:31 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -15,29 +15,29 @@
15
15
  --font-style-body-small-font-size: 14px;
16
16
  --font-style-body-small-line-height: 1.25rem;
17
17
  --font-style-body-small-font-weight: 400;
18
- --font-style-body-xsmall-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
19
- --font-style-body-xsmall-font-size: 12px;
20
- --font-style-body-xsmall-line-height: 1.125rem;
21
- --font-style-body-xsmall-font-weight: 400;
18
+ --font-style-body-x-small-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
19
+ --font-style-body-x-small-font-size: 12px;
20
+ --font-style-body-x-small-line-height: 1.125rem;
21
+ --font-style-body-x-small-font-weight: 400;
22
22
  --font-style-headlines-giga-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
23
23
  --font-style-headlines-giga-font-size: 51px;
24
- --font-style-headlines-giga-line-height: 1.4117647059;
24
+ --font-style-headlines-giga-line-height: 1.411765;
25
25
  --font-style-headlines-giga-font-weight: 400;
26
26
  --font-style-headlines-alpha-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
27
27
  --font-style-headlines-alpha-font-size: 38px;
28
- --font-style-headlines-alpha-line-height: 1.2631578947;
28
+ --font-style-headlines-alpha-line-height: 1.263158;
29
29
  --font-style-headlines-alpha-font-weight: 400;
30
30
  --font-style-headlines-beta-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
31
31
  --font-style-headlines-beta-font-size: 28px;
32
- --font-style-headlines-beta-line-height: 1.7142857143;
32
+ --font-style-headlines-beta-line-height: 1.714286;
33
33
  --font-style-headlines-beta-font-weight: 400;
34
34
  --font-style-headlines-gamma-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
35
35
  --font-style-headlines-gamma-font-size: 21px;
36
- --font-style-headlines-gamma-line-height: 1.5238095238;
36
+ --font-style-headlines-gamma-line-height: 1.52381;
37
37
  --font-style-headlines-gamma-font-weight: 400;
38
38
  --font-style-headlines-delta-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
39
39
  --font-style-headlines-delta-font-size: 19px;
40
- --font-style-headlines-delta-line-height: 1.2631578947;
40
+ --font-style-headlines-delta-line-height: 1.263158;
41
41
  --font-style-headlines-delta-font-weight: 400;
42
42
  --font-style-headlines-epsilon-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
43
43
  --font-style-headlines-epsilon-font-size: 16px;
@@ -45,20 +45,21 @@
45
45
  --font-style-headlines-epsilon-font-weight: 400;
46
46
  --font-style-headlines-zeta-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
47
47
  --font-style-headlines-zeta-font-size: 14px;
48
- --font-style-headlines-zeta-line-height: 1.7142857143;
48
+ --font-style-headlines-zeta-line-height: 1.714286;
49
49
  --font-style-headlines-zeta-font-weight: 400;
50
50
  --font-weight-normal: 400;
51
51
  --font-weight-semibold: 600;
52
+ --size-font-scale-ratio: 1.3333; /* Modular scale ratio */
52
53
  --size-font-base: 16px;
53
- --size-font-small: 14px;
54
- --size-font-xsmall: 12px;
54
+ --size-font-x-small: 12px; /* 12 */
55
+ --size-font-small: 14px; /* 14 */
55
56
  --size-font-zeta: 14px;
56
- --size-font-epsilon: 16px;
57
- --size-font-delta: 19px;
58
- --size-font-gamma: 21px;
59
- --size-font-beta: 28px;
60
- --size-font-alpha: 38px;
61
- --size-font-giga: 51px;
57
+ --size-font-epsilon: 16px; /* 16 */
58
+ --size-font-delta: 19px; /* 19 */
59
+ --size-font-gamma: 21px; /* 21 */
60
+ --size-font-beta: 28px; /* 28 */
61
+ --size-font-alpha: 38px; /* 38 */
62
+ --size-font-giga: 51px; /* 51 */
62
63
  --size-letter-spacing-tighter: -0.05em;
63
64
  --size-letter-spacing-tight: -0.025em;
64
65
  --size-letter-spacing-normal: normal;
@@ -67,15 +68,14 @@
67
68
  --size-letter-spacing-widest: 0.1em;
68
69
  --size-line-height-none: 1;
69
70
  --size-line-height-body: 1.5;
70
- --size-line-height-default: 24px;
71
- --size-line-height-base: 1.5rem;
72
- --size-line-height-small: 1.25rem;
73
- --size-line-height-xsmall: 1.125rem;
74
- --size-line-height-zeta: 1.7142857143;
75
- --size-line-height-epsilon: 1.5;
76
- --size-line-height-delta: 1.2631578947;
77
- --size-line-height-gamma: 1.5238095238;
78
- --size-line-height-beta: 1.7142857143;
79
- --size-line-height-alpha: 1.2631578947;
80
- --size-line-height-giga: 1.4117647059;
71
+ --size-line-height-base: 1.5rem; /* 24 */
72
+ --size-line-height-small: 1.25rem; /* 20 */
73
+ --size-line-height-x-small: 1.125rem; /* 18 */
74
+ --size-line-height-zeta: 1.714286; /* 14/24 */
75
+ --size-line-height-epsilon: 1.5; /* 16/24 */
76
+ --size-line-height-delta: 1.263158; /* 19/24 */
77
+ --size-line-height-gamma: 1.52381; /* 21/32 */
78
+ --size-line-height-beta: 1.714286; /* 28/48 */
79
+ --size-line-height-alpha: 1.263158; /* 38/48 */
80
+ --size-line-height-giga: 1.411765; /* 51/72 */
81
81
  }
package/dist/index.json CHANGED
@@ -10,43 +10,44 @@
10
10
  "FONT_STYLE_BODY_SMALL_FONT_SIZE": "14px",
11
11
  "FONT_STYLE_BODY_SMALL_LINE_HEIGHT": "1.25rem",
12
12
  "FONT_STYLE_BODY_SMALL_FONT_WEIGHT": "400",
13
- "FONT_STYLE_BODY_XSMALL_FONT_FAMILY": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
14
- "FONT_STYLE_BODY_XSMALL_FONT_SIZE": "12px",
15
- "FONT_STYLE_BODY_XSMALL_LINE_HEIGHT": "1.125rem",
16
- "FONT_STYLE_BODY_XSMALL_FONT_WEIGHT": "400",
13
+ "FONT_STYLE_BODY_X_SMALL_FONT_FAMILY": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
14
+ "FONT_STYLE_BODY_X_SMALL_FONT_SIZE": "12px",
15
+ "FONT_STYLE_BODY_X_SMALL_LINE_HEIGHT": "1.125rem",
16
+ "FONT_STYLE_BODY_X_SMALL_FONT_WEIGHT": "400",
17
17
  "FONT_STYLE_HEADLINES_GIGA_FONT_FAMILY": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
18
18
  "FONT_STYLE_HEADLINES_GIGA_FONT_SIZE": "51px",
19
- "FONT_STYLE_HEADLINES_GIGA_LINE_HEIGHT": 1.4117647059,
19
+ "FONT_STYLE_HEADLINES_GIGA_LINE_HEIGHT": "1.411765",
20
20
  "FONT_STYLE_HEADLINES_GIGA_FONT_WEIGHT": "400",
21
21
  "FONT_STYLE_HEADLINES_ALPHA_FONT_FAMILY": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
22
22
  "FONT_STYLE_HEADLINES_ALPHA_FONT_SIZE": "38px",
23
- "FONT_STYLE_HEADLINES_ALPHA_LINE_HEIGHT": 1.2631578947,
23
+ "FONT_STYLE_HEADLINES_ALPHA_LINE_HEIGHT": "1.263158",
24
24
  "FONT_STYLE_HEADLINES_ALPHA_FONT_WEIGHT": "400",
25
25
  "FONT_STYLE_HEADLINES_BETA_FONT_FAMILY": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
26
26
  "FONT_STYLE_HEADLINES_BETA_FONT_SIZE": "28px",
27
- "FONT_STYLE_HEADLINES_BETA_LINE_HEIGHT": 1.7142857143,
27
+ "FONT_STYLE_HEADLINES_BETA_LINE_HEIGHT": "1.714286",
28
28
  "FONT_STYLE_HEADLINES_BETA_FONT_WEIGHT": "400",
29
29
  "FONT_STYLE_HEADLINES_GAMMA_FONT_FAMILY": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
30
30
  "FONT_STYLE_HEADLINES_GAMMA_FONT_SIZE": "21px",
31
- "FONT_STYLE_HEADLINES_GAMMA_LINE_HEIGHT": 1.5238095238,
31
+ "FONT_STYLE_HEADLINES_GAMMA_LINE_HEIGHT": "1.52381",
32
32
  "FONT_STYLE_HEADLINES_GAMMA_FONT_WEIGHT": "400",
33
33
  "FONT_STYLE_HEADLINES_DELTA_FONT_FAMILY": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
34
34
  "FONT_STYLE_HEADLINES_DELTA_FONT_SIZE": "19px",
35
- "FONT_STYLE_HEADLINES_DELTA_LINE_HEIGHT": 1.2631578947,
35
+ "FONT_STYLE_HEADLINES_DELTA_LINE_HEIGHT": "1.263158",
36
36
  "FONT_STYLE_HEADLINES_DELTA_FONT_WEIGHT": "400",
37
37
  "FONT_STYLE_HEADLINES_EPSILON_FONT_FAMILY": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
38
38
  "FONT_STYLE_HEADLINES_EPSILON_FONT_SIZE": "16px",
39
- "FONT_STYLE_HEADLINES_EPSILON_LINE_HEIGHT": 1.5,
39
+ "FONT_STYLE_HEADLINES_EPSILON_LINE_HEIGHT": "1.5",
40
40
  "FONT_STYLE_HEADLINES_EPSILON_FONT_WEIGHT": "400",
41
41
  "FONT_STYLE_HEADLINES_ZETA_FONT_FAMILY": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
42
42
  "FONT_STYLE_HEADLINES_ZETA_FONT_SIZE": "14px",
43
- "FONT_STYLE_HEADLINES_ZETA_LINE_HEIGHT": 1.7142857143,
43
+ "FONT_STYLE_HEADLINES_ZETA_LINE_HEIGHT": "1.714286",
44
44
  "FONT_STYLE_HEADLINES_ZETA_FONT_WEIGHT": "400",
45
45
  "FONT_WEIGHT_NORMAL": "400",
46
46
  "FONT_WEIGHT_SEMIBOLD": "600",
47
+ "SIZE_FONT_SCALE_RATIO": "1.3333",
47
48
  "SIZE_FONT_BASE": "16px",
49
+ "SIZE_FONT_X_SMALL": "12px",
48
50
  "SIZE_FONT_SMALL": "14px",
49
- "SIZE_FONT_XSMALL": "12px",
50
51
  "SIZE_FONT_ZETA": "14px",
51
52
  "SIZE_FONT_EPSILON": "16px",
52
53
  "SIZE_FONT_DELTA": "19px",
@@ -60,17 +61,16 @@
60
61
  "SIZE_LETTER_SPACING_WIDE": "0.025em",
61
62
  "SIZE_LETTER_SPACING_WIDER": "0.05em",
62
63
  "SIZE_LETTER_SPACING_WIDEST": "0.1em",
63
- "SIZE_LINE_HEIGHT_NONE": 1,
64
- "SIZE_LINE_HEIGHT_BODY": 1.5,
65
- "SIZE_LINE_HEIGHT_DEFAULT": "24px",
64
+ "SIZE_LINE_HEIGHT_NONE": "1",
65
+ "SIZE_LINE_HEIGHT_BODY": "1.5",
66
66
  "SIZE_LINE_HEIGHT_BASE": "1.5rem",
67
67
  "SIZE_LINE_HEIGHT_SMALL": "1.25rem",
68
- "SIZE_LINE_HEIGHT_XSMALL": "1.125rem",
69
- "SIZE_LINE_HEIGHT_ZETA": 1.7142857143,
70
- "SIZE_LINE_HEIGHT_EPSILON": 1.5,
71
- "SIZE_LINE_HEIGHT_DELTA": 1.2631578947,
72
- "SIZE_LINE_HEIGHT_GAMMA": 1.5238095238,
73
- "SIZE_LINE_HEIGHT_BETA": 1.7142857143,
74
- "SIZE_LINE_HEIGHT_ALPHA": 1.2631578947,
75
- "SIZE_LINE_HEIGHT_GIGA": 1.4117647059
68
+ "SIZE_LINE_HEIGHT_X_SMALL": "1.125rem",
69
+ "SIZE_LINE_HEIGHT_ZETA": "1.714286",
70
+ "SIZE_LINE_HEIGHT_EPSILON": "1.5",
71
+ "SIZE_LINE_HEIGHT_DELTA": "1.263158",
72
+ "SIZE_LINE_HEIGHT_GAMMA": "1.52381",
73
+ "SIZE_LINE_HEIGHT_BETA": "1.714286",
74
+ "SIZE_LINE_HEIGHT_ALPHA": "1.263158",
75
+ "SIZE_LINE_HEIGHT_GIGA": "1.411765"
76
76
  }
package/dist/index.module.d.ts CHANGED
@@ -20,7 +20,7 @@ declare const tokens: {
20
20
  "lineHeight": "1.25rem",
21
21
  "fontWeight": "400"
22
22
  },
23
- "xsmall": {
23
+ "xSmall": {
24
24
  "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
25
25
  "fontSize": "12px",
26
26
  "lineHeight": "1.125rem",
@@ -31,43 +31,43 @@ declare const tokens: {
31
31
  "giga": {
32
32
  "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
33
33
  "fontSize": "51px",
34
- "lineHeight": number,
34
+ "lineHeight": "1.411765",
35
35
  "fontWeight": "400"
36
36
  },
37
37
  "alpha": {
38
38
  "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
39
39
  "fontSize": "38px",
40
- "lineHeight": number,
40
+ "lineHeight": "1.263158",
41
41
  "fontWeight": "400"
42
42
  },
43
43
  "beta": {
44
44
  "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
45
45
  "fontSize": "28px",
46
- "lineHeight": number,
46
+ "lineHeight": "1.714286",
47
47
  "fontWeight": "400"
48
48
  },
49
49
  "gamma": {
50
50
  "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
51
51
  "fontSize": "21px",
52
- "lineHeight": number,
52
+ "lineHeight": "1.52381",
53
53
  "fontWeight": "400"
54
54
  },
55
55
  "delta": {
56
56
  "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
57
57
  "fontSize": "19px",
58
- "lineHeight": number,
58
+ "lineHeight": "1.263158",
59
59
  "fontWeight": "400"
60
60
  },
61
61
  "epsilon": {
62
62
  "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
63
63
  "fontSize": "16px",
64
- "lineHeight": number,
64
+ "lineHeight": "1.5",
65
65
  "fontWeight": "400"
66
66
  },
67
67
  "zeta": {
68
68
  "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
69
69
  "fontSize": "14px",
70
- "lineHeight": number,
70
+ "lineHeight": "1.714286",
71
71
  "fontWeight": "400"
72
72
  }
73
73
  }
@@ -78,10 +78,11 @@ declare const tokens: {
78
78
  }
79
79
  },
80
80
  "size": {
81
+ "_fontScaleRatio": "1.3333",
81
82
  "font": {
82
83
  "base": "16px",
84
+ "xSmall": "12px",
83
85
  "small": "14px",
84
- "xsmall": "12px",
85
86
  "zeta": "14px",
86
87
  "epsilon": "16px",
87
88
  "delta": "19px",
@@ -99,19 +100,18 @@ declare const tokens: {
99
100
  "widest": "0.1em"
100
101
  },
101
102
  "lineHeight": {
102
- "none": number,
103
- "body": number,
104
- "default": "24px",
103
+ "none": "1",
104
+ "body": "1.5",
105
105
  "base": "1.5rem",
106
106
  "small": "1.25rem",
107
- "xsmall": "1.125rem",
108
- "zeta": number,
109
- "epsilon": number,
110
- "delta": number,
111
- "gamma": number,
112
- "beta": number,
113
- "alpha": number,
114
- "giga": number
107
+ "xSmall": "1.125rem",
108
+ "zeta": "1.714286",
109
+ "epsilon": "1.5",
110
+ "delta": "1.263158",
111
+ "gamma": "1.52381",
112
+ "beta": "1.714286",
113
+ "alpha": "1.263158",
114
+ "giga": "1.411765"
115
115
  }
116
116
  }
117
117
  };
package/dist/index.module.js CHANGED
@@ -19,7 +19,7 @@ export default {
19
19
  "lineHeight": "1.25rem",
20
20
  "fontWeight": "400"
21
21
  },
22
- "xsmall": {
22
+ "xSmall": {
23
23
  "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
24
24
  "fontSize": "12px",
25
25
  "lineHeight": "1.125rem",
@@ -30,43 +30,43 @@ export default {
30
30
  "giga": {
31
31
  "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
32
32
  "fontSize": "51px",
33
- "lineHeight": 1.4117647059,
33
+ "lineHeight": "1.411765",
34
34
  "fontWeight": "400"
35
35
  },
36
36
  "alpha": {
37
37
  "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
38
38
  "fontSize": "38px",
39
- "lineHeight": 1.2631578947,
39
+ "lineHeight": "1.263158",
40
40
  "fontWeight": "400"
41
41
  },
42
42
  "beta": {
43
43
  "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
44
44
  "fontSize": "28px",
45
- "lineHeight": 1.7142857143,
45
+ "lineHeight": "1.714286",
46
46
  "fontWeight": "400"
47
47
  },
48
48
  "gamma": {
49
49
  "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
50
50
  "fontSize": "21px",
51
- "lineHeight": 1.5238095238,
51
+ "lineHeight": "1.52381",
52
52
  "fontWeight": "400"
53
53
  },
54
54
  "delta": {
55
55
  "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
56
56
  "fontSize": "19px",
57
- "lineHeight": 1.2631578947,
57
+ "lineHeight": "1.263158",
58
58
  "fontWeight": "400"
59
59
  },
60
60
  "epsilon": {
61
61
  "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
62
62
  "fontSize": "16px",
63
- "lineHeight": 1.5,
63
+ "lineHeight": "1.5",
64
64
  "fontWeight": "400"
65
65
  },
66
66
  "zeta": {
67
67
  "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
68
68
  "fontSize": "14px",
69
- "lineHeight": 1.7142857143,
69
+ "lineHeight": "1.714286",
70
70
  "fontWeight": "400"
71
71
  }
72
72
  }
@@ -77,10 +77,11 @@ export default {
77
77
  }
78
78
  },
79
79
  "size": {
80
+ "_fontScaleRatio": "1.3333",
80
81
  "font": {
81
82
  "base": "16px",
83
+ "xSmall": "12px",
82
84
  "small": "14px",
83
- "xsmall": "12px",
84
85
  "zeta": "14px",
85
86
  "epsilon": "16px",
86
87
  "delta": "19px",
@@ -98,19 +99,18 @@ export default {
98
99
  "widest": "0.1em"
99
100
  },
100
101
  "lineHeight": {
101
- "none": 1,
102
- "body": 1.5,
103
- "default": "24px",
102
+ "none": "1",
103
+ "body": "1.5",
104
104
  "base": "1.5rem",
105
105
  "small": "1.25rem",
106
- "xsmall": "1.125rem",
107
- "zeta": 1.7142857143,
108
- "epsilon": 1.5,
109
- "delta": 1.2631578947,
110
- "gamma": 1.5238095238,
111
- "beta": 1.7142857143,
112
- "alpha": 1.2631578947,
113
- "giga": 1.4117647059
106
+ "xSmall": "1.125rem",
107
+ "zeta": "1.714286",
108
+ "epsilon": "1.5",
109
+ "delta": "1.263158",
110
+ "gamma": "1.52381",
111
+ "beta": "1.714286",
112
+ "alpha": "1.263158",
113
+ "giga": "1.411765"
114
114
  }
115
115
  }
116
116
  }
package/dist/index.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 03 Apr 2023 08:11:38 GMT
3
+ // Generated on Wed, 05 Apr 2023 10:48:31 GMT
4
4
 
5
5
  $font-family-base: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
6
6
  $font-family-display: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
@@ -13,29 +13,29 @@ $font-style-body-small-font-family: 'Source Sans Pro', system-ui, -apple-system,
13
13
  $font-style-body-small-font-size: 14px;
14
14
  $font-style-body-small-line-height: 1.25rem;
15
15
  $font-style-body-small-font-weight: 400;
16
- $font-style-body-xsmall-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
17
- $font-style-body-xsmall-font-size: 12px;
18
- $font-style-body-xsmall-line-height: 1.125rem;
19
- $font-style-body-xsmall-font-weight: 400;
16
+ $font-style-body-x-small-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
17
+ $font-style-body-x-small-font-size: 12px;
18
+ $font-style-body-x-small-line-height: 1.125rem;
19
+ $font-style-body-x-small-font-weight: 400;
20
20
  $font-style-headlines-giga-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
21
21
  $font-style-headlines-giga-font-size: 51px;
22
- $font-style-headlines-giga-line-height: 1.4117647059;
22
+ $font-style-headlines-giga-line-height: 1.411765;
23
23
  $font-style-headlines-giga-font-weight: 400;
24
24
  $font-style-headlines-alpha-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
25
25
  $font-style-headlines-alpha-font-size: 38px;
26
- $font-style-headlines-alpha-line-height: 1.2631578947;
26
+ $font-style-headlines-alpha-line-height: 1.263158;
27
27
  $font-style-headlines-alpha-font-weight: 400;
28
28
  $font-style-headlines-beta-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
29
29
  $font-style-headlines-beta-font-size: 28px;
30
- $font-style-headlines-beta-line-height: 1.7142857143;
30
+ $font-style-headlines-beta-line-height: 1.714286;
31
31
  $font-style-headlines-beta-font-weight: 400;
32
32
  $font-style-headlines-gamma-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
33
33
  $font-style-headlines-gamma-font-size: 21px;
34
- $font-style-headlines-gamma-line-height: 1.5238095238;
34
+ $font-style-headlines-gamma-line-height: 1.52381;
35
35
  $font-style-headlines-gamma-font-weight: 400;
36
36
  $font-style-headlines-delta-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
37
37
  $font-style-headlines-delta-font-size: 19px;
38
- $font-style-headlines-delta-line-height: 1.2631578947;
38
+ $font-style-headlines-delta-line-height: 1.263158;
39
39
  $font-style-headlines-delta-font-weight: 400;
40
40
  $font-style-headlines-epsilon-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
41
41
  $font-style-headlines-epsilon-font-size: 16px;
@@ -43,20 +43,21 @@ $font-style-headlines-epsilon-line-height: 1.5;
43
43
  $font-style-headlines-epsilon-font-weight: 400;
44
44
  $font-style-headlines-zeta-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
45
45
  $font-style-headlines-zeta-font-size: 14px;
46
- $font-style-headlines-zeta-line-height: 1.7142857143;
46
+ $font-style-headlines-zeta-line-height: 1.714286;
47
47
  $font-style-headlines-zeta-font-weight: 400;
48
48
  $font-weight-normal: 400;
49
49
  $font-weight-semibold: 600;
50
+ $size-font-scale-ratio: 1.3333; // Modular scale ratio
50
51
  $size-font-base: 16px;
51
- $size-font-small: 14px;
52
- $size-font-xsmall: 12px;
52
+ $size-font-x-small: 12px; // 12
53
+ $size-font-small: 14px; // 14
53
54
  $size-font-zeta: 14px;
54
- $size-font-epsilon: 16px;
55
- $size-font-delta: 19px;
56
- $size-font-gamma: 21px;
57
- $size-font-beta: 28px;
58
- $size-font-alpha: 38px;
59
- $size-font-giga: 51px;
55
+ $size-font-epsilon: 16px; // 16
56
+ $size-font-delta: 19px; // 19
57
+ $size-font-gamma: 21px; // 21
58
+ $size-font-beta: 28px; // 28
59
+ $size-font-alpha: 38px; // 38
60
+ $size-font-giga: 51px; // 51
60
61
  $size-letter-spacing-tighter: -0.05em;
61
62
  $size-letter-spacing-tight: -0.025em;
62
63
  $size-letter-spacing-normal: normal;
@@ -65,14 +66,13 @@ $size-letter-spacing-wider: 0.05em;
65
66
  $size-letter-spacing-widest: 0.1em;
66
67
  $size-line-height-none: 1;
67
68
  $size-line-height-body: 1.5;
68
- $size-line-height-default: 24px;
69
- $size-line-height-base: 1.5rem;
70
- $size-line-height-small: 1.25rem;
71
- $size-line-height-xsmall: 1.125rem;
72
- $size-line-height-zeta: 1.7142857143;
73
- $size-line-height-epsilon: 1.5;
74
- $size-line-height-delta: 1.2631578947;
75
- $size-line-height-gamma: 1.5238095238;
76
- $size-line-height-beta: 1.7142857143;
77
- $size-line-height-alpha: 1.2631578947;
78
- $size-line-height-giga: 1.4117647059;
69
+ $size-line-height-base: 1.5rem; // 24
70
+ $size-line-height-small: 1.25rem; // 20
71
+ $size-line-height-x-small: 1.125rem; // 18
72
+ $size-line-height-zeta: 1.714286; // 14/24
73
+ $size-line-height-epsilon: 1.5; // 16/24
74
+ $size-line-height-delta: 1.263158; // 19/24
75
+ $size-line-height-gamma: 1.52381; // 21/32
76
+ $size-line-height-beta: 1.714286; // 28/48
77
+ $size-line-height-alpha: 1.263158; // 38/48
78
+ $size-line-height-giga: 1.411765; // 51/72
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@volue/design-typography",
3
- "version": "0.2.0-next.0",
3
+ "version": "0.2.0-next.1",
4
4
  "description": "Typography primitives for Volue design primitives",
5
5
  "license": "UNLICENSED",
6
6
  "repository": {
@@ -35,9 +35,11 @@
35
35
  "eslint-config-powel": "14.2.1",
36
36
  "eslint-import-resolver-node": "0.3.7",
37
37
  "eslint-plugin-import": "2.27.5",
38
+ "expr-eval": "2.0.2",
38
39
  "map-obj": "4.3.0",
39
40
  "npm-run-all": "4.1.5",
40
41
  "polished": "4.2.2",
42
+ "postcss-calc-ast-parser": "0.1.4",
41
43
  "prettier": "2.8.6",
42
44
  "rimraf": "3.0.2",
43
45
  "style-dictionary": "3.7.3-rc.1",
package/src/font-size.json ADDED
@@ -0,0 +1,48 @@
1
+ {
2
+ "size": {
3
+ "_fontScaleRatio": {
4
+ "value": "1.3333",
5
+ "comment": "Modular scale ratio"
6
+ },
7
+ "font": {
8
+ "base": {
9
+ "value": "16"
10
+ },
11
+ "xSmall": {
12
+ "value": "roundTo({size.font.base} * {size._fontScaleRatio}^-1, 0)",
13
+ "comment": "12"
14
+ },
15
+ "small": {
16
+ "value": "roundTo({size.font.base} * {size._fontScaleRatio}^-0.5, 0)",
17
+ "comment": "14"
18
+ },
19
+ "zeta": {
20
+ "value": "{size.font.small}"
21
+ },
22
+ "epsilon": {
23
+ "value": "{size.font.base} * {size._fontScaleRatio}^0",
24
+ "comment": "16"
25
+ },
26
+ "delta": {
27
+ "value": "roundTo({size.font.base} * 1.17, 0)",
28
+ "comment": "19"
29
+ },
30
+ "gamma": {
31
+ "value": "roundTo({size.font.base} * {size._fontScaleRatio}^1, 0)",
32
+ "comment": "21"
33
+ },
34
+ "beta": {
35
+ "value": "roundTo({size.font.base} * {size._fontScaleRatio}^2, 0)",
36
+ "comment": "28"
37
+ },
38
+ "alpha": {
39
+ "value": "roundTo({size.font.base} * {size._fontScaleRatio}^3, 0)",
40
+ "comment": "38"
41
+ },
42
+ "giga": {
43
+ "value": "roundTo({size.font.base} * {size._fontScaleRatio}^4, 0)",
44
+ "comment": "51"
45
+ }
46
+ }
47
+ }
48
+ }
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
@@ -30,15 +30,15 @@
30
30
  "value": "{font.weight.normal.value}"
31
31
  }
32
32
  },
33
- "xsmall": {
33
+ "xSmall": {
34
34
  "fontFamily": {
35
35
  "value": "{font.family.base.value}"
36
36
  },
37
37
  "fontSize": {
38
- "value": "{size.font.xsmall.value}"
38
+ "value": "{size.font.xSmall.value}"
39
39
  },
40
40
  "lineHeight": {
41
- "value": "{size.lineHeight.xsmall.value}"
41
+ "value": "{size.lineHeight.xSmall.value}"
42
42
  },
43
43
  "fontWeight": {
44
44
  "value": "{font.weight.normal.value}"
package/src/font-size.js DELETED
@@ -1,50 +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
- small: {
22
- value: px(14)
23
- },
24
- xsmall: {
25
- value: px(12)
26
- },
27
- zeta: {
28
- value: px(round(baseFontSize * 0.857))
29
- },
30
- epsilon: {
31
- value: px(typeScale(0))
32
- },
33
- delta: {
34
- value: px(round(baseFontSize * 1.17))
35
- },
36
- gamma: {
37
- value: px(floor(typeScale(1)))
38
- },
39
- beta: {
40
- value: px(round(typeScale(2)))
41
- },
42
- alpha: {
43
- value: px(round(typeScale(3)))
44
- },
45
- giga: {
46
- value: px(round(typeScale(4)))
47
- }
48
- }
49
- }
50
- };
package/src/line-height.js DELETED
@@ -1,83 +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
- const toRem = value => `${value / baseFontSize}rem`;
10
-
11
- const { ceil } = Math;
12
-
13
- const limitPrecision = (value, precision) => {
14
- const exp = Math.pow(10, precision);
15
- return Math.round(value * exp) / exp;
16
- };
17
-
18
- const calcLineHeight = (fontSize, lineHeight = baseLineHeight) => {
19
- const parsedFontSize = parseFloat(fontSize);
20
-
21
- return limitPrecision(
22
- ceil(parsedFontSize / lineHeight) * (lineHeight / parsedFontSize),
23
- 10
24
- );
25
- };
26
-
27
- module.exports = {
28
- size: {
29
- lineHeight: {
30
- none: {
31
- value: 1
32
- },
33
- body: {
34
- value: calcLineHeight(baseFontSize)
35
- },
36
- default: {
37
- value: toPx(baseLineHeight)
38
- },
39
- base: {
40
- value: toRem(baseLineHeight)
41
- },
42
- small: {
43
- value: toRem(20)
44
- },
45
- xsmall: {
46
- value: toRem(18)
47
- },
48
- zeta: {
49
- value: calcLineHeight(fontSizeTokens.size.font.zeta.value)
50
- },
51
- epsilon: {
52
- value: calcLineHeight(fontSizeTokens.size.font.epsilon.value)
53
- },
54
- delta: {
55
- value: calcLineHeight(fontSizeTokens.size.font.delta.value)
56
- },
57
- gamma: {
58
- value: calcLineHeight(
59
- fontSizeTokens.size.font.gamma.value,
60
- ceil(baseLineHeight * 1.333)
61
- )
62
- },
63
- beta: {
64
- value: calcLineHeight(
65
- fontSizeTokens.size.font.beta.value,
66
- baseLineHeight * 2
67
- )
68
- },
69
- alpha: {
70
- value: calcLineHeight(
71
- fontSizeTokens.size.font.alpha.value,
72
- baseLineHeight * 2
73
- )
74
- },
75
- giga: {
76
- value: calcLineHeight(
77
- fontSizeTokens.size.font.giga.value,
78
- baseLineHeight * 3
79
- )
80
- }
81
- }
82
- }
83
- };