@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/dist/index.json CHANGED
@@ -2,41 +2,52 @@
2
2
  "FONT_FAMILY_BASE": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
3
3
  "FONT_FAMILY_DISPLAY": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
4
4
  "FONT_FAMILY_MONO": "ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
5
- "FONT_STYLE_BASE_FONT_FAMILY": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
6
- "FONT_STYLE_BASE_FONT_SIZE": "16px",
7
- "FONT_STYLE_BASE_LINE_HEIGHT": 1.5,
8
- "FONT_STYLE_BASE_FONT_WEIGHT": "400",
9
- "FONT_STYLE_GIGA_FONT_FAMILY": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
10
- "FONT_STYLE_GIGA_FONT_SIZE": "51px",
11
- "FONT_STYLE_GIGA_LINE_HEIGHT": 1.4117647059,
12
- "FONT_STYLE_GIGA_FONT_WEIGHT": "400",
13
- "FONT_STYLE_ALPHA_FONT_FAMILY": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
14
- "FONT_STYLE_ALPHA_FONT_SIZE": "38px",
15
- "FONT_STYLE_ALPHA_LINE_HEIGHT": 1.2631578947,
16
- "FONT_STYLE_ALPHA_FONT_WEIGHT": "400",
17
- "FONT_STYLE_BETA_FONT_FAMILY": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
18
- "FONT_STYLE_BETA_FONT_SIZE": "28px",
19
- "FONT_STYLE_BETA_LINE_HEIGHT": 1.7142857143,
20
- "FONT_STYLE_BETA_FONT_WEIGHT": "400",
21
- "FONT_STYLE_GAMMA_FONT_FAMILY": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
22
- "FONT_STYLE_GAMMA_FONT_SIZE": "21px",
23
- "FONT_STYLE_GAMMA_LINE_HEIGHT": 1.5238095238,
24
- "FONT_STYLE_GAMMA_FONT_WEIGHT": "400",
25
- "FONT_STYLE_DELTA_FONT_FAMILY": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
26
- "FONT_STYLE_DELTA_FONT_SIZE": "19px",
27
- "FONT_STYLE_DELTA_LINE_HEIGHT": 1.2631578947,
28
- "FONT_STYLE_DELTA_FONT_WEIGHT": "400",
29
- "FONT_STYLE_EPSILON_FONT_FAMILY": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
30
- "FONT_STYLE_EPSILON_FONT_SIZE": "16px",
31
- "FONT_STYLE_EPSILON_LINE_HEIGHT": 1.5,
32
- "FONT_STYLE_EPSILON_FONT_WEIGHT": "400",
33
- "FONT_STYLE_ZETA_FONT_FAMILY": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
34
- "FONT_STYLE_ZETA_FONT_SIZE": "14px",
35
- "FONT_STYLE_ZETA_LINE_HEIGHT": 1.7142857143,
36
- "FONT_STYLE_ZETA_FONT_WEIGHT": "400",
5
+ "FONT_STYLE_BODY_BASE_FONT_FAMILY": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
6
+ "FONT_STYLE_BODY_BASE_FONT_SIZE": "16px",
7
+ "FONT_STYLE_BODY_BASE_LINE_HEIGHT": "1.5rem",
8
+ "FONT_STYLE_BODY_BASE_FONT_WEIGHT": "400",
9
+ "FONT_STYLE_BODY_SMALL_FONT_FAMILY": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
10
+ "FONT_STYLE_BODY_SMALL_FONT_SIZE": "14px",
11
+ "FONT_STYLE_BODY_SMALL_LINE_HEIGHT": "1.25rem",
12
+ "FONT_STYLE_BODY_SMALL_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
+ "FONT_STYLE_HEADLINES_GIGA_FONT_FAMILY": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
18
+ "FONT_STYLE_HEADLINES_GIGA_FONT_SIZE": "51px",
19
+ "FONT_STYLE_HEADLINES_GIGA_LINE_HEIGHT": "1.411765",
20
+ "FONT_STYLE_HEADLINES_GIGA_FONT_WEIGHT": "400",
21
+ "FONT_STYLE_HEADLINES_ALPHA_FONT_FAMILY": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
22
+ "FONT_STYLE_HEADLINES_ALPHA_FONT_SIZE": "38px",
23
+ "FONT_STYLE_HEADLINES_ALPHA_LINE_HEIGHT": "1.263158",
24
+ "FONT_STYLE_HEADLINES_ALPHA_FONT_WEIGHT": "400",
25
+ "FONT_STYLE_HEADLINES_BETA_FONT_FAMILY": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
26
+ "FONT_STYLE_HEADLINES_BETA_FONT_SIZE": "28px",
27
+ "FONT_STYLE_HEADLINES_BETA_LINE_HEIGHT": "1.714286",
28
+ "FONT_STYLE_HEADLINES_BETA_FONT_WEIGHT": "400",
29
+ "FONT_STYLE_HEADLINES_GAMMA_FONT_FAMILY": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
30
+ "FONT_STYLE_HEADLINES_GAMMA_FONT_SIZE": "21px",
31
+ "FONT_STYLE_HEADLINES_GAMMA_LINE_HEIGHT": "1.52381",
32
+ "FONT_STYLE_HEADLINES_GAMMA_FONT_WEIGHT": "400",
33
+ "FONT_STYLE_HEADLINES_DELTA_FONT_FAMILY": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
34
+ "FONT_STYLE_HEADLINES_DELTA_FONT_SIZE": "19px",
35
+ "FONT_STYLE_HEADLINES_DELTA_LINE_HEIGHT": "1.263158",
36
+ "FONT_STYLE_HEADLINES_DELTA_FONT_WEIGHT": "400",
37
+ "FONT_STYLE_HEADLINES_EPSILON_FONT_FAMILY": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
38
+ "FONT_STYLE_HEADLINES_EPSILON_FONT_SIZE": "16px",
39
+ "FONT_STYLE_HEADLINES_EPSILON_LINE_HEIGHT": "1.5",
40
+ "FONT_STYLE_HEADLINES_EPSILON_FONT_WEIGHT": "400",
41
+ "FONT_STYLE_HEADLINES_ZETA_FONT_FAMILY": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
42
+ "FONT_STYLE_HEADLINES_ZETA_FONT_SIZE": "14px",
43
+ "FONT_STYLE_HEADLINES_ZETA_LINE_HEIGHT": "1.714286",
44
+ "FONT_STYLE_HEADLINES_ZETA_FONT_WEIGHT": "400",
37
45
  "FONT_WEIGHT_NORMAL": "400",
38
46
  "FONT_WEIGHT_SEMIBOLD": "600",
47
+ "SIZE_FONT_SCALE_RATIO": "1.3333",
39
48
  "SIZE_FONT_BASE": "16px",
49
+ "SIZE_FONT_X_SMALL": "12px",
50
+ "SIZE_FONT_SMALL": "14px",
40
51
  "SIZE_FONT_ZETA": "14px",
41
52
  "SIZE_FONT_EPSILON": "16px",
42
53
  "SIZE_FONT_DELTA": "19px",
@@ -50,14 +61,16 @@
50
61
  "SIZE_LETTER_SPACING_WIDE": "0.025em",
51
62
  "SIZE_LETTER_SPACING_WIDER": "0.05em",
52
63
  "SIZE_LETTER_SPACING_WIDEST": "0.1em",
53
- "SIZE_LINE_HEIGHT_BASE": "24px",
54
- "SIZE_LINE_HEIGHT_NONE": 1,
55
- "SIZE_LINE_HEIGHT_DEFAULT": 1.5,
56
- "SIZE_LINE_HEIGHT_ZETA": 1.7142857143,
57
- "SIZE_LINE_HEIGHT_EPSILON": 1.5,
58
- "SIZE_LINE_HEIGHT_DELTA": 1.2631578947,
59
- "SIZE_LINE_HEIGHT_GAMMA": 1.5238095238,
60
- "SIZE_LINE_HEIGHT_BETA": 1.7142857143,
61
- "SIZE_LINE_HEIGHT_ALPHA": 1.2631578947,
62
- "SIZE_LINE_HEIGHT_GIGA": 1.4117647059
64
+ "SIZE_LINE_HEIGHT_NONE": "1",
65
+ "SIZE_LINE_HEIGHT_BODY": "1.5",
66
+ "SIZE_LINE_HEIGHT_BASE": "1.5rem",
67
+ "SIZE_LINE_HEIGHT_SMALL": "1.25rem",
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"
63
76
  }
package/dist/index.module.d.ts CHANGED
@@ -7,53 +7,69 @@ declare const tokens: {
7
7
  "mono": "ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
8
8
  },
9
9
  "style": {
10
- "base": {
11
- "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
12
- "fontSize": "16px",
13
- "lineHeight": number,
14
- "fontWeight": "400"
10
+ "body": {
11
+ "base": {
12
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
13
+ "fontSize": "16px",
14
+ "lineHeight": "1.5rem",
15
+ "fontWeight": "400"
16
+ },
17
+ "small": {
18
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
19
+ "fontSize": "14px",
20
+ "lineHeight": "1.25rem",
21
+ "fontWeight": "400"
22
+ },
23
+ "xSmall": {
24
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
25
+ "fontSize": "12px",
26
+ "lineHeight": "1.125rem",
27
+ "fontWeight": "400"
28
+ }
15
29
  },
16
- "giga": {
17
- "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
18
- "fontSize": "51px",
19
- "lineHeight": number,
20
- "fontWeight": "400"
21
- },
22
- "alpha": {
23
- "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
24
- "fontSize": "38px",
25
- "lineHeight": number,
26
- "fontWeight": "400"
27
- },
28
- "beta": {
29
- "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
30
- "fontSize": "28px",
31
- "lineHeight": number,
32
- "fontWeight": "400"
33
- },
34
- "gamma": {
35
- "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
36
- "fontSize": "21px",
37
- "lineHeight": number,
38
- "fontWeight": "400"
39
- },
40
- "delta": {
41
- "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
42
- "fontSize": "19px",
43
- "lineHeight": number,
44
- "fontWeight": "400"
45
- },
46
- "epsilon": {
47
- "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
48
- "fontSize": "16px",
49
- "lineHeight": number,
50
- "fontWeight": "400"
51
- },
52
- "zeta": {
53
- "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
54
- "fontSize": "14px",
55
- "lineHeight": number,
56
- "fontWeight": "400"
30
+ "headlines": {
31
+ "giga": {
32
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
33
+ "fontSize": "51px",
34
+ "lineHeight": "1.411765",
35
+ "fontWeight": "400"
36
+ },
37
+ "alpha": {
38
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
39
+ "fontSize": "38px",
40
+ "lineHeight": "1.263158",
41
+ "fontWeight": "400"
42
+ },
43
+ "beta": {
44
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
45
+ "fontSize": "28px",
46
+ "lineHeight": "1.714286",
47
+ "fontWeight": "400"
48
+ },
49
+ "gamma": {
50
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
51
+ "fontSize": "21px",
52
+ "lineHeight": "1.52381",
53
+ "fontWeight": "400"
54
+ },
55
+ "delta": {
56
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
57
+ "fontSize": "19px",
58
+ "lineHeight": "1.263158",
59
+ "fontWeight": "400"
60
+ },
61
+ "epsilon": {
62
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
63
+ "fontSize": "16px",
64
+ "lineHeight": "1.5",
65
+ "fontWeight": "400"
66
+ },
67
+ "zeta": {
68
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
69
+ "fontSize": "14px",
70
+ "lineHeight": "1.714286",
71
+ "fontWeight": "400"
72
+ }
57
73
  }
58
74
  },
59
75
  "weight": {
@@ -62,8 +78,11 @@ declare const tokens: {
62
78
  }
63
79
  },
64
80
  "size": {
81
+ "_fontScaleRatio": "1.3333",
65
82
  "font": {
66
83
  "base": "16px",
84
+ "xSmall": "12px",
85
+ "small": "14px",
67
86
  "zeta": "14px",
68
87
  "epsilon": "16px",
69
88
  "delta": "19px",
@@ -81,16 +100,18 @@ declare const tokens: {
81
100
  "widest": "0.1em"
82
101
  },
83
102
  "lineHeight": {
84
- "base": "24px",
85
- "none": number,
86
- "default": number,
87
- "zeta": number,
88
- "epsilon": number,
89
- "delta": number,
90
- "gamma": number,
91
- "beta": number,
92
- "alpha": number,
93
- "giga": number
103
+ "none": "1",
104
+ "body": "1.5",
105
+ "base": "1.5rem",
106
+ "small": "1.25rem",
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"
94
115
  }
95
116
  }
96
117
  };
package/dist/index.module.js CHANGED
@@ -6,53 +6,69 @@ export default {
6
6
  "mono": "ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
7
7
  },
8
8
  "style": {
9
- "base": {
10
- "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
11
- "fontSize": "16px",
12
- "lineHeight": 1.5,
13
- "fontWeight": "400"
9
+ "body": {
10
+ "base": {
11
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
12
+ "fontSize": "16px",
13
+ "lineHeight": "1.5rem",
14
+ "fontWeight": "400"
15
+ },
16
+ "small": {
17
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
18
+ "fontSize": "14px",
19
+ "lineHeight": "1.25rem",
20
+ "fontWeight": "400"
21
+ },
22
+ "xSmall": {
23
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
24
+ "fontSize": "12px",
25
+ "lineHeight": "1.125rem",
26
+ "fontWeight": "400"
27
+ }
14
28
  },
15
- "giga": {
16
- "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
17
- "fontSize": "51px",
18
- "lineHeight": 1.4117647059,
19
- "fontWeight": "400"
20
- },
21
- "alpha": {
22
- "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
23
- "fontSize": "38px",
24
- "lineHeight": 1.2631578947,
25
- "fontWeight": "400"
26
- },
27
- "beta": {
28
- "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
29
- "fontSize": "28px",
30
- "lineHeight": 1.7142857143,
31
- "fontWeight": "400"
32
- },
33
- "gamma": {
34
- "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
35
- "fontSize": "21px",
36
- "lineHeight": 1.5238095238,
37
- "fontWeight": "400"
38
- },
39
- "delta": {
40
- "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
41
- "fontSize": "19px",
42
- "lineHeight": 1.2631578947,
43
- "fontWeight": "400"
44
- },
45
- "epsilon": {
46
- "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
47
- "fontSize": "16px",
48
- "lineHeight": 1.5,
49
- "fontWeight": "400"
50
- },
51
- "zeta": {
52
- "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
53
- "fontSize": "14px",
54
- "lineHeight": 1.7142857143,
55
- "fontWeight": "400"
29
+ "headlines": {
30
+ "giga": {
31
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
32
+ "fontSize": "51px",
33
+ "lineHeight": "1.411765",
34
+ "fontWeight": "400"
35
+ },
36
+ "alpha": {
37
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
38
+ "fontSize": "38px",
39
+ "lineHeight": "1.263158",
40
+ "fontWeight": "400"
41
+ },
42
+ "beta": {
43
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
44
+ "fontSize": "28px",
45
+ "lineHeight": "1.714286",
46
+ "fontWeight": "400"
47
+ },
48
+ "gamma": {
49
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
50
+ "fontSize": "21px",
51
+ "lineHeight": "1.52381",
52
+ "fontWeight": "400"
53
+ },
54
+ "delta": {
55
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
56
+ "fontSize": "19px",
57
+ "lineHeight": "1.263158",
58
+ "fontWeight": "400"
59
+ },
60
+ "epsilon": {
61
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
62
+ "fontSize": "16px",
63
+ "lineHeight": "1.5",
64
+ "fontWeight": "400"
65
+ },
66
+ "zeta": {
67
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
68
+ "fontSize": "14px",
69
+ "lineHeight": "1.714286",
70
+ "fontWeight": "400"
71
+ }
56
72
  }
57
73
  },
58
74
  "weight": {
@@ -61,8 +77,11 @@ export default {
61
77
  }
62
78
  },
63
79
  "size": {
80
+ "_fontScaleRatio": "1.3333",
64
81
  "font": {
65
82
  "base": "16px",
83
+ "xSmall": "12px",
84
+ "small": "14px",
66
85
  "zeta": "14px",
67
86
  "epsilon": "16px",
68
87
  "delta": "19px",
@@ -80,16 +99,18 @@ export default {
80
99
  "widest": "0.1em"
81
100
  },
82
101
  "lineHeight": {
83
- "base": "24px",
84
- "none": 1,
85
- "default": 1.5,
86
- "zeta": 1.7142857143,
87
- "epsilon": 1.5,
88
- "delta": 1.2631578947,
89
- "gamma": 1.5238095238,
90
- "beta": 1.7142857143,
91
- "alpha": 1.2631578947,
92
- "giga": 1.4117647059
102
+ "none": "1",
103
+ "body": "1.5",
104
+ "base": "1.5rem",
105
+ "small": "1.25rem",
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"
93
114
  }
94
115
  }
95
116
  }
package/dist/index.scss CHANGED
@@ -1,65 +1,78 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 01 Mar 2023 08:39:30 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;
7
7
  $font-family-mono: ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
8
- $font-style-base-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
9
- $font-style-base-font-size: 16px;
10
- $font-style-base-line-height: 1.5;
11
- $font-style-base-font-weight: 400;
12
- $font-style-giga-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
13
- $font-style-giga-font-size: 51px;
14
- $font-style-giga-line-height: 1.4117647059;
15
- $font-style-giga-font-weight: 400;
16
- $font-style-alpha-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
17
- $font-style-alpha-font-size: 38px;
18
- $font-style-alpha-line-height: 1.2631578947;
19
- $font-style-alpha-font-weight: 400;
20
- $font-style-beta-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
21
- $font-style-beta-font-size: 28px;
22
- $font-style-beta-line-height: 1.7142857143;
23
- $font-style-beta-font-weight: 400;
24
- $font-style-gamma-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
25
- $font-style-gamma-font-size: 21px;
26
- $font-style-gamma-line-height: 1.5238095238;
27
- $font-style-gamma-font-weight: 400;
28
- $font-style-delta-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
29
- $font-style-delta-font-size: 19px;
30
- $font-style-delta-line-height: 1.2631578947;
31
- $font-style-delta-font-weight: 400;
32
- $font-style-epsilon-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
33
- $font-style-epsilon-font-size: 16px;
34
- $font-style-epsilon-line-height: 1.5;
35
- $font-style-epsilon-font-weight: 400;
36
- $font-style-zeta-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
37
- $font-style-zeta-font-size: 14px;
38
- $font-style-zeta-line-height: 1.7142857143;
39
- $font-style-zeta-font-weight: 400;
8
+ $font-style-body-base-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
9
+ $font-style-body-base-font-size: 16px;
10
+ $font-style-body-base-line-height: 1.5rem;
11
+ $font-style-body-base-font-weight: 400;
12
+ $font-style-body-small-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
13
+ $font-style-body-small-font-size: 14px;
14
+ $font-style-body-small-line-height: 1.25rem;
15
+ $font-style-body-small-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
+ $font-style-headlines-giga-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
21
+ $font-style-headlines-giga-font-size: 51px;
22
+ $font-style-headlines-giga-line-height: 1.411765;
23
+ $font-style-headlines-giga-font-weight: 400;
24
+ $font-style-headlines-alpha-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
25
+ $font-style-headlines-alpha-font-size: 38px;
26
+ $font-style-headlines-alpha-line-height: 1.263158;
27
+ $font-style-headlines-alpha-font-weight: 400;
28
+ $font-style-headlines-beta-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
29
+ $font-style-headlines-beta-font-size: 28px;
30
+ $font-style-headlines-beta-line-height: 1.714286;
31
+ $font-style-headlines-beta-font-weight: 400;
32
+ $font-style-headlines-gamma-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
33
+ $font-style-headlines-gamma-font-size: 21px;
34
+ $font-style-headlines-gamma-line-height: 1.52381;
35
+ $font-style-headlines-gamma-font-weight: 400;
36
+ $font-style-headlines-delta-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
37
+ $font-style-headlines-delta-font-size: 19px;
38
+ $font-style-headlines-delta-line-height: 1.263158;
39
+ $font-style-headlines-delta-font-weight: 400;
40
+ $font-style-headlines-epsilon-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
41
+ $font-style-headlines-epsilon-font-size: 16px;
42
+ $font-style-headlines-epsilon-line-height: 1.5;
43
+ $font-style-headlines-epsilon-font-weight: 400;
44
+ $font-style-headlines-zeta-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
45
+ $font-style-headlines-zeta-font-size: 14px;
46
+ $font-style-headlines-zeta-line-height: 1.714286;
47
+ $font-style-headlines-zeta-font-weight: 400;
40
48
  $font-weight-normal: 400;
41
49
  $font-weight-semibold: 600;
50
+ $size-font-scale-ratio: 1.3333; // Modular scale ratio
42
51
  $size-font-base: 16px;
52
+ $size-font-x-small: 12px; // 12
53
+ $size-font-small: 14px; // 14
43
54
  $size-font-zeta: 14px;
44
- $size-font-epsilon: 16px;
45
- $size-font-delta: 19px;
46
- $size-font-gamma: 21px;
47
- $size-font-beta: 28px;
48
- $size-font-alpha: 38px;
49
- $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
50
61
  $size-letter-spacing-tighter: -0.05em;
51
62
  $size-letter-spacing-tight: -0.025em;
52
63
  $size-letter-spacing-normal: normal;
53
64
  $size-letter-spacing-wide: 0.025em;
54
65
  $size-letter-spacing-wider: 0.05em;
55
66
  $size-letter-spacing-widest: 0.1em;
56
- $size-line-height-base: 24px;
57
67
  $size-line-height-none: 1;
58
- $size-line-height-default: 1.5;
59
- $size-line-height-zeta: 1.7142857143;
60
- $size-line-height-epsilon: 1.5;
61
- $size-line-height-delta: 1.2631578947;
62
- $size-line-height-gamma: 1.5238095238;
63
- $size-line-height-beta: 1.7142857143;
64
- $size-line-height-alpha: 1.2631578947;
65
- $size-line-height-giga: 1.4117647059;
68
+ $size-line-height-body: 1.5;
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.1.0",
3
+ "version": "0.2.0-next.1",
4
4
  "description": "Typography primitives for Volue design primitives",
5
5
  "license": "UNLICENSED",
6
6
  "repository": {
@@ -31,14 +31,16 @@
31
31
  "prepack": "yarn run build"
32
32
  },
33
33
  "devDependencies": {
34
- "eslint": "8.35.0",
34
+ "eslint": "8.36.0",
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",
41
- "prettier": "2.8.4",
42
+ "postcss-calc-ast-parser": "0.1.4",
43
+ "prettier": "2.8.6",
42
44
  "rimraf": "3.0.2",
43
45
  "style-dictionary": "3.7.3-rc.1",
44
46
  "typescript": "4.9.5"
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
+ }