@volue/design-typography 0.1.0-next.0

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 (16) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +44 -0
  3. package/dist/index.common.d.ts +87 -0
  4. package/dist/index.common.js +86 -0
  5. package/dist/index.cssmodules.css +54 -0
  6. package/dist/index.custom-properties.css +61 -0
  7. package/dist/index.json +56 -0
  8. package/dist/index.module.d.ts +87 -0
  9. package/dist/index.module.js +86 -0
  10. package/dist/index.scss +58 -0
  11. package/package.json +45 -0
  12. package/src/font-size.js +44 -0
  13. package/src/line-height.js +70 -0
  14. package/src/style.json +118 -0
  15. package/src/tokens.json +15 -0
  16. package/src/weight.json +12 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,6 @@
1
+ # Changelog
2
+
3
+ All notable changes to this project will be documented in this file. See [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) for commit guidelines.
4
+
5
+ <!-- MONODEPLOY:BELOW -->
6
+
package/README.md ADDED
@@ -0,0 +1,44 @@
1
+ # `@volue/design-typography`
2
+
3
+ Typography primitives/tokens to be used across Volue's products
4
+
5
+ ## Installation
6
+
7
+ ```sh
8
+ npm install @volue/design-typography --save
9
+ # or
10
+ yarn add @volue/design-typography
11
+ ```
12
+
13
+ ## Usage
14
+
15
+ ### JavaScript
16
+
17
+ In JavaScript, design token names are formatted in [lower camelCase](https://en.wikipedia.org/wiki/Camel_case).
18
+ Tokens are exported as nested object structure.
19
+
20
+ ```js
21
+ const tokens = require('@volue/design-typography');
22
+ console.log(tokens.family.display);
23
+ ```
24
+
25
+ In JSON, design token names are formatted in [SNAKE_CASE](https://en.wikipedia.org/wiki/Snake_case).
26
+
27
+ ```js
28
+ const tokens = require('@volue/design-typography/dist/index.json');
29
+ console.log(tokens['FONT_FAMILY_DISPLAY']);
30
+ ```
31
+
32
+ ### Sass
33
+
34
+ Sass variables and map keys are formatted in [kebab-case](https://en.wikipedia.org/wiki/Kebab_case).
35
+
36
+ ```scss
37
+ // Using variables
38
+ @import '~@volue/design-typography/dist/index';
39
+
40
+ h1 {
41
+ font-family: $font-family-display;
42
+ font-size: $size-font-alpha;
43
+ }
44
+ ```
package/dist/index.common.d.ts ADDED
@@ -0,0 +1,87 @@
1
+ export default tokens;
2
+ declare const tokens: {
3
+ "size": {
4
+ "font": {
5
+ "base": "16px",
6
+ "zeta": "14px",
7
+ "epsilon": "16px",
8
+ "delta": "19px",
9
+ "gamma": "21px",
10
+ "beta": "28px",
11
+ "alpha": "38px",
12
+ "giga": "51px"
13
+ },
14
+ "lineHeight": {
15
+ "base": "24px",
16
+ "body": number,
17
+ "zeta": number,
18
+ "epsilon": number,
19
+ "delta": number,
20
+ "gamma": number,
21
+ "beta": number,
22
+ "alpha": number,
23
+ "giga": number
24
+ }
25
+ },
26
+ "font": {
27
+ "style": {
28
+ "body": {
29
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
30
+ "fontSize": "16px",
31
+ "lineHeight": number,
32
+ "fontWeight": "400"
33
+ },
34
+ "giga": {
35
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
36
+ "fontSize": "51px",
37
+ "lineHeight": number,
38
+ "fontWeight": "400"
39
+ },
40
+ "alpha": {
41
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
42
+ "fontSize": "38px",
43
+ "lineHeight": number,
44
+ "fontWeight": "400"
45
+ },
46
+ "beta": {
47
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
48
+ "fontSize": "28px",
49
+ "lineHeight": number,
50
+ "fontWeight": "400"
51
+ },
52
+ "gamma": {
53
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
54
+ "fontSize": "21px",
55
+ "lineHeight": number,
56
+ "fontWeight": "400"
57
+ },
58
+ "delta": {
59
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
60
+ "fontSize": "19px",
61
+ "lineHeight": number,
62
+ "fontWeight": "400"
63
+ },
64
+ "epsilon": {
65
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
66
+ "fontSize": "16px",
67
+ "lineHeight": number,
68
+ "fontWeight": "400"
69
+ },
70
+ "zeta": {
71
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
72
+ "fontSize": "14px",
73
+ "lineHeight": number,
74
+ "fontWeight": "400"
75
+ }
76
+ },
77
+ "family": {
78
+ "base": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
79
+ "display": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
80
+ "mono": "ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
81
+ },
82
+ "weight": {
83
+ "normal": "400",
84
+ "semibold": "600"
85
+ }
86
+ }
87
+ };
package/dist/index.common.js ADDED
@@ -0,0 +1,86 @@
1
+ module.exports = {
2
+ "size": {
3
+ "font": {
4
+ "base": "16px",
5
+ "zeta": "14px",
6
+ "epsilon": "16px",
7
+ "delta": "19px",
8
+ "gamma": "21px",
9
+ "beta": "28px",
10
+ "alpha": "38px",
11
+ "giga": "51px"
12
+ },
13
+ "lineHeight": {
14
+ "base": "24px",
15
+ "body": 1.5,
16
+ "zeta": 1.7142857143,
17
+ "epsilon": 1.5,
18
+ "delta": 1.2631578947,
19
+ "gamma": 1.5238095238,
20
+ "beta": 1.7142857143,
21
+ "alpha": 1.2631578947,
22
+ "giga": 1.4117647059
23
+ }
24
+ },
25
+ "font": {
26
+ "style": {
27
+ "body": {
28
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
29
+ "fontSize": "16px",
30
+ "lineHeight": 1.5,
31
+ "fontWeight": "400"
32
+ },
33
+ "giga": {
34
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
35
+ "fontSize": "51px",
36
+ "lineHeight": 1.4117647059,
37
+ "fontWeight": "400"
38
+ },
39
+ "alpha": {
40
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
41
+ "fontSize": "38px",
42
+ "lineHeight": 1.2631578947,
43
+ "fontWeight": "400"
44
+ },
45
+ "beta": {
46
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
47
+ "fontSize": "28px",
48
+ "lineHeight": 1.7142857143,
49
+ "fontWeight": "400"
50
+ },
51
+ "gamma": {
52
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
53
+ "fontSize": "21px",
54
+ "lineHeight": 1.5238095238,
55
+ "fontWeight": "400"
56
+ },
57
+ "delta": {
58
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
59
+ "fontSize": "19px",
60
+ "lineHeight": 1.2631578947,
61
+ "fontWeight": "400"
62
+ },
63
+ "epsilon": {
64
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
65
+ "fontSize": "16px",
66
+ "lineHeight": 1.5,
67
+ "fontWeight": "400"
68
+ },
69
+ "zeta": {
70
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
71
+ "fontSize": "14px",
72
+ "lineHeight": 1.7142857143,
73
+ "fontWeight": "400"
74
+ }
75
+ },
76
+ "family": {
77
+ "base": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
78
+ "display": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
79
+ "mono": "ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
80
+ },
81
+ "weight": {
82
+ "normal": "400",
83
+ "semibold": "600"
84
+ }
85
+ }
86
+ }
package/dist/index.cssmodules.css ADDED
@@ -0,0 +1,54 @@
1
+ @value size-font-base: 16px;
2
+ @value size-font-zeta: 14px;
3
+ @value size-font-epsilon: 16px;
4
+ @value size-font-delta: 19px;
5
+ @value size-font-gamma: 21px;
6
+ @value size-font-beta: 28px;
7
+ @value size-font-alpha: 38px;
8
+ @value size-font-giga: 51px;
9
+ @value size-line-height-base: 24px;
10
+ @value size-line-height-body: 1.5;
11
+ @value size-line-height-zeta: 1.7142857143;
12
+ @value size-line-height-epsilon: 1.5;
13
+ @value size-line-height-delta: 1.2631578947;
14
+ @value size-line-height-gamma: 1.5238095238;
15
+ @value size-line-height-beta: 1.7142857143;
16
+ @value size-line-height-alpha: 1.2631578947;
17
+ @value size-line-height-giga: 1.4117647059;
18
+ @value font-style-body-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
19
+ @value font-style-body-font-size: 16px;
20
+ @value font-style-body-line-height: 1.5;
21
+ @value font-style-body-font-weight: 400;
22
+ @value font-style-giga-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
23
+ @value font-style-giga-font-size: 51px;
24
+ @value font-style-giga-line-height: 1.4117647059;
25
+ @value font-style-giga-font-weight: 400;
26
+ @value font-style-alpha-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
27
+ @value font-style-alpha-font-size: 38px;
28
+ @value font-style-alpha-line-height: 1.2631578947;
29
+ @value font-style-alpha-font-weight: 400;
30
+ @value font-style-beta-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
31
+ @value font-style-beta-font-size: 28px;
32
+ @value font-style-beta-line-height: 1.7142857143;
33
+ @value font-style-beta-font-weight: 400;
34
+ @value font-style-gamma-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
35
+ @value font-style-gamma-font-size: 21px;
36
+ @value font-style-gamma-line-height: 1.5238095238;
37
+ @value font-style-gamma-font-weight: 400;
38
+ @value font-style-delta-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
39
+ @value font-style-delta-font-size: 19px;
40
+ @value font-style-delta-line-height: 1.2631578947;
41
+ @value font-style-delta-font-weight: 400;
42
+ @value font-style-epsilon-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
43
+ @value font-style-epsilon-font-size: 16px;
44
+ @value font-style-epsilon-line-height: 1.5;
45
+ @value font-style-epsilon-font-weight: 400;
46
+ @value font-style-zeta-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
47
+ @value font-style-zeta-font-size: 14px;
48
+ @value font-style-zeta-line-height: 1.7142857143;
49
+ @value font-style-zeta-font-weight: 400;
50
+ @value font-family-base: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
51
+ @value font-family-display: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
52
+ @value font-family-mono: ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
53
+ @value font-weight-normal: 400;
54
+ @value font-weight-semibold: 600;
package/dist/index.custom-properties.css ADDED
@@ -0,0 +1,61 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 15 Feb 2023 21:11:53 GMT
4
+ */
5
+
6
+ :root {
7
+ --size-font-base: 16px;
8
+ --size-font-zeta: 14px;
9
+ --size-font-epsilon: 16px;
10
+ --size-font-delta: 19px;
11
+ --size-font-gamma: 21px;
12
+ --size-font-beta: 28px;
13
+ --size-font-alpha: 38px;
14
+ --size-font-giga: 51px;
15
+ --size-line-height-base: 24px;
16
+ --size-line-height-body: 1.5;
17
+ --size-line-height-zeta: 1.7142857143;
18
+ --size-line-height-epsilon: 1.5;
19
+ --size-line-height-delta: 1.2631578947;
20
+ --size-line-height-gamma: 1.5238095238;
21
+ --size-line-height-beta: 1.7142857143;
22
+ --size-line-height-alpha: 1.2631578947;
23
+ --size-line-height-giga: 1.4117647059;
24
+ --font-style-body-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
25
+ --font-style-body-font-size: 16px;
26
+ --font-style-body-line-height: 1.5;
27
+ --font-style-body-font-weight: 400;
28
+ --font-style-giga-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
29
+ --font-style-giga-font-size: 51px;
30
+ --font-style-giga-line-height: 1.4117647059;
31
+ --font-style-giga-font-weight: 400;
32
+ --font-style-alpha-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
33
+ --font-style-alpha-font-size: 38px;
34
+ --font-style-alpha-line-height: 1.2631578947;
35
+ --font-style-alpha-font-weight: 400;
36
+ --font-style-beta-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
37
+ --font-style-beta-font-size: 28px;
38
+ --font-style-beta-line-height: 1.7142857143;
39
+ --font-style-beta-font-weight: 400;
40
+ --font-style-gamma-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
41
+ --font-style-gamma-font-size: 21px;
42
+ --font-style-gamma-line-height: 1.5238095238;
43
+ --font-style-gamma-font-weight: 400;
44
+ --font-style-delta-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
45
+ --font-style-delta-font-size: 19px;
46
+ --font-style-delta-line-height: 1.2631578947;
47
+ --font-style-delta-font-weight: 400;
48
+ --font-style-epsilon-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
49
+ --font-style-epsilon-font-size: 16px;
50
+ --font-style-epsilon-line-height: 1.5;
51
+ --font-style-epsilon-font-weight: 400;
52
+ --font-style-zeta-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
53
+ --font-style-zeta-font-size: 14px;
54
+ --font-style-zeta-line-height: 1.7142857143;
55
+ --font-style-zeta-font-weight: 400;
56
+ --font-family-base: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
57
+ --font-family-display: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
58
+ --font-family-mono: ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
59
+ --font-weight-normal: 400;
60
+ --font-weight-semibold: 600;
61
+ }
package/dist/index.json ADDED
@@ -0,0 +1,56 @@
1
+ {
2
+ "SIZE_FONT_BASE": "16px",
3
+ "SIZE_FONT_ZETA": "14px",
4
+ "SIZE_FONT_EPSILON": "16px",
5
+ "SIZE_FONT_DELTA": "19px",
6
+ "SIZE_FONT_GAMMA": "21px",
7
+ "SIZE_FONT_BETA": "28px",
8
+ "SIZE_FONT_ALPHA": "38px",
9
+ "SIZE_FONT_GIGA": "51px",
10
+ "SIZE_LINE_HEIGHT_BASE": "24px",
11
+ "SIZE_LINE_HEIGHT_BODY": 1.5,
12
+ "SIZE_LINE_HEIGHT_ZETA": 1.7142857143,
13
+ "SIZE_LINE_HEIGHT_EPSILON": 1.5,
14
+ "SIZE_LINE_HEIGHT_DELTA": 1.2631578947,
15
+ "SIZE_LINE_HEIGHT_GAMMA": 1.5238095238,
16
+ "SIZE_LINE_HEIGHT_BETA": 1.7142857143,
17
+ "SIZE_LINE_HEIGHT_ALPHA": 1.2631578947,
18
+ "SIZE_LINE_HEIGHT_GIGA": 1.4117647059,
19
+ "FONT_STYLE_BODY_FONT_FAMILY": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
20
+ "FONT_STYLE_BODY_FONT_SIZE": "16px",
21
+ "FONT_STYLE_BODY_LINE_HEIGHT": 1.5,
22
+ "FONT_STYLE_BODY_FONT_WEIGHT": "400",
23
+ "FONT_STYLE_GIGA_FONT_FAMILY": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
24
+ "FONT_STYLE_GIGA_FONT_SIZE": "51px",
25
+ "FONT_STYLE_GIGA_LINE_HEIGHT": 1.4117647059,
26
+ "FONT_STYLE_GIGA_FONT_WEIGHT": "400",
27
+ "FONT_STYLE_ALPHA_FONT_FAMILY": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
28
+ "FONT_STYLE_ALPHA_FONT_SIZE": "38px",
29
+ "FONT_STYLE_ALPHA_LINE_HEIGHT": 1.2631578947,
30
+ "FONT_STYLE_ALPHA_FONT_WEIGHT": "400",
31
+ "FONT_STYLE_BETA_FONT_FAMILY": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
32
+ "FONT_STYLE_BETA_FONT_SIZE": "28px",
33
+ "FONT_STYLE_BETA_LINE_HEIGHT": 1.7142857143,
34
+ "FONT_STYLE_BETA_FONT_WEIGHT": "400",
35
+ "FONT_STYLE_GAMMA_FONT_FAMILY": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
36
+ "FONT_STYLE_GAMMA_FONT_SIZE": "21px",
37
+ "FONT_STYLE_GAMMA_LINE_HEIGHT": 1.5238095238,
38
+ "FONT_STYLE_GAMMA_FONT_WEIGHT": "400",
39
+ "FONT_STYLE_DELTA_FONT_FAMILY": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
40
+ "FONT_STYLE_DELTA_FONT_SIZE": "19px",
41
+ "FONT_STYLE_DELTA_LINE_HEIGHT": 1.2631578947,
42
+ "FONT_STYLE_DELTA_FONT_WEIGHT": "400",
43
+ "FONT_STYLE_EPSILON_FONT_FAMILY": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
44
+ "FONT_STYLE_EPSILON_FONT_SIZE": "16px",
45
+ "FONT_STYLE_EPSILON_LINE_HEIGHT": 1.5,
46
+ "FONT_STYLE_EPSILON_FONT_WEIGHT": "400",
47
+ "FONT_STYLE_ZETA_FONT_FAMILY": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
48
+ "FONT_STYLE_ZETA_FONT_SIZE": "14px",
49
+ "FONT_STYLE_ZETA_LINE_HEIGHT": 1.7142857143,
50
+ "FONT_STYLE_ZETA_FONT_WEIGHT": "400",
51
+ "FONT_FAMILY_BASE": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
52
+ "FONT_FAMILY_DISPLAY": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
53
+ "FONT_FAMILY_MONO": "ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
54
+ "FONT_WEIGHT_NORMAL": "400",
55
+ "FONT_WEIGHT_SEMIBOLD": "600"
56
+ }
package/dist/index.module.d.ts ADDED
@@ -0,0 +1,87 @@
1
+ export default tokens;
2
+ declare const tokens: {
3
+ "size": {
4
+ "font": {
5
+ "base": "16px",
6
+ "zeta": "14px",
7
+ "epsilon": "16px",
8
+ "delta": "19px",
9
+ "gamma": "21px",
10
+ "beta": "28px",
11
+ "alpha": "38px",
12
+ "giga": "51px"
13
+ },
14
+ "lineHeight": {
15
+ "base": "24px",
16
+ "body": number,
17
+ "zeta": number,
18
+ "epsilon": number,
19
+ "delta": number,
20
+ "gamma": number,
21
+ "beta": number,
22
+ "alpha": number,
23
+ "giga": number
24
+ }
25
+ },
26
+ "font": {
27
+ "style": {
28
+ "body": {
29
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
30
+ "fontSize": "16px",
31
+ "lineHeight": number,
32
+ "fontWeight": "400"
33
+ },
34
+ "giga": {
35
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
36
+ "fontSize": "51px",
37
+ "lineHeight": number,
38
+ "fontWeight": "400"
39
+ },
40
+ "alpha": {
41
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
42
+ "fontSize": "38px",
43
+ "lineHeight": number,
44
+ "fontWeight": "400"
45
+ },
46
+ "beta": {
47
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
48
+ "fontSize": "28px",
49
+ "lineHeight": number,
50
+ "fontWeight": "400"
51
+ },
52
+ "gamma": {
53
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
54
+ "fontSize": "21px",
55
+ "lineHeight": number,
56
+ "fontWeight": "400"
57
+ },
58
+ "delta": {
59
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
60
+ "fontSize": "19px",
61
+ "lineHeight": number,
62
+ "fontWeight": "400"
63
+ },
64
+ "epsilon": {
65
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
66
+ "fontSize": "16px",
67
+ "lineHeight": number,
68
+ "fontWeight": "400"
69
+ },
70
+ "zeta": {
71
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
72
+ "fontSize": "14px",
73
+ "lineHeight": number,
74
+ "fontWeight": "400"
75
+ }
76
+ },
77
+ "family": {
78
+ "base": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
79
+ "display": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
80
+ "mono": "ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
81
+ },
82
+ "weight": {
83
+ "normal": "400",
84
+ "semibold": "600"
85
+ }
86
+ }
87
+ };
package/dist/index.module.js ADDED
@@ -0,0 +1,86 @@
1
+ export default {
2
+ "size": {
3
+ "font": {
4
+ "base": "16px",
5
+ "zeta": "14px",
6
+ "epsilon": "16px",
7
+ "delta": "19px",
8
+ "gamma": "21px",
9
+ "beta": "28px",
10
+ "alpha": "38px",
11
+ "giga": "51px"
12
+ },
13
+ "lineHeight": {
14
+ "base": "24px",
15
+ "body": 1.5,
16
+ "zeta": 1.7142857143,
17
+ "epsilon": 1.5,
18
+ "delta": 1.2631578947,
19
+ "gamma": 1.5238095238,
20
+ "beta": 1.7142857143,
21
+ "alpha": 1.2631578947,
22
+ "giga": 1.4117647059
23
+ }
24
+ },
25
+ "font": {
26
+ "style": {
27
+ "body": {
28
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
29
+ "fontSize": "16px",
30
+ "lineHeight": 1.5,
31
+ "fontWeight": "400"
32
+ },
33
+ "giga": {
34
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
35
+ "fontSize": "51px",
36
+ "lineHeight": 1.4117647059,
37
+ "fontWeight": "400"
38
+ },
39
+ "alpha": {
40
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
41
+ "fontSize": "38px",
42
+ "lineHeight": 1.2631578947,
43
+ "fontWeight": "400"
44
+ },
45
+ "beta": {
46
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
47
+ "fontSize": "28px",
48
+ "lineHeight": 1.7142857143,
49
+ "fontWeight": "400"
50
+ },
51
+ "gamma": {
52
+ "fontFamily": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
53
+ "fontSize": "21px",
54
+ "lineHeight": 1.5238095238,
55
+ "fontWeight": "400"
56
+ },
57
+ "delta": {
58
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
59
+ "fontSize": "19px",
60
+ "lineHeight": 1.2631578947,
61
+ "fontWeight": "400"
62
+ },
63
+ "epsilon": {
64
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
65
+ "fontSize": "16px",
66
+ "lineHeight": 1.5,
67
+ "fontWeight": "400"
68
+ },
69
+ "zeta": {
70
+ "fontFamily": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
71
+ "fontSize": "14px",
72
+ "lineHeight": 1.7142857143,
73
+ "fontWeight": "400"
74
+ }
75
+ },
76
+ "family": {
77
+ "base": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",
78
+ "display": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",
79
+ "mono": "ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
80
+ },
81
+ "weight": {
82
+ "normal": "400",
83
+ "semibold": "600"
84
+ }
85
+ }
86
+ }
package/dist/index.scss ADDED
@@ -0,0 +1,58 @@
1
+
2
+ // Do not edit directly
3
+ // Generated on Wed, 15 Feb 2023 21:11:53 GMT
4
+
5
+ $size-font-base: 16px;
6
+ $size-font-zeta: 14px;
7
+ $size-font-epsilon: 16px;
8
+ $size-font-delta: 19px;
9
+ $size-font-gamma: 21px;
10
+ $size-font-beta: 28px;
11
+ $size-font-alpha: 38px;
12
+ $size-font-giga: 51px;
13
+ $size-line-height-base: 24px;
14
+ $size-line-height-body: 1.5;
15
+ $size-line-height-zeta: 1.7142857143;
16
+ $size-line-height-epsilon: 1.5;
17
+ $size-line-height-delta: 1.2631578947;
18
+ $size-line-height-gamma: 1.5238095238;
19
+ $size-line-height-beta: 1.7142857143;
20
+ $size-line-height-alpha: 1.2631578947;
21
+ $size-line-height-giga: 1.4117647059;
22
+ $font-style-body-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
23
+ $font-style-body-font-size: 16px;
24
+ $font-style-body-line-height: 1.5;
25
+ $font-style-body-font-weight: 400;
26
+ $font-style-giga-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
27
+ $font-style-giga-font-size: 51px;
28
+ $font-style-giga-line-height: 1.4117647059;
29
+ $font-style-giga-font-weight: 400;
30
+ $font-style-alpha-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
31
+ $font-style-alpha-font-size: 38px;
32
+ $font-style-alpha-line-height: 1.2631578947;
33
+ $font-style-alpha-font-weight: 400;
34
+ $font-style-beta-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
35
+ $font-style-beta-font-size: 28px;
36
+ $font-style-beta-line-height: 1.7142857143;
37
+ $font-style-beta-font-weight: 400;
38
+ $font-style-gamma-font-family: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
39
+ $font-style-gamma-font-size: 21px;
40
+ $font-style-gamma-line-height: 1.5238095238;
41
+ $font-style-gamma-font-weight: 400;
42
+ $font-style-delta-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
43
+ $font-style-delta-font-size: 19px;
44
+ $font-style-delta-line-height: 1.2631578947;
45
+ $font-style-delta-font-weight: 400;
46
+ $font-style-epsilon-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
47
+ $font-style-epsilon-font-size: 16px;
48
+ $font-style-epsilon-line-height: 1.5;
49
+ $font-style-epsilon-font-weight: 400;
50
+ $font-style-zeta-font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
51
+ $font-style-zeta-font-size: 14px;
52
+ $font-style-zeta-line-height: 1.7142857143;
53
+ $font-style-zeta-font-weight: 400;
54
+ $font-family-base: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI';
55
+ $font-family-display: 'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
56
+ $font-family-mono: ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
57
+ $font-weight-normal: 400;
58
+ $font-weight-semibold: 600;
package/package.json ADDED
@@ -0,0 +1,45 @@
1
+ {
2
+ "name": "@volue/design-typography",
3
+ "version": "0.1.0-next.0",
4
+ "description": "Typography primitives for Volue design primitives",
5
+ "license": "UNLICENSED",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "https://github.com/Volue/wave",
9
+ "directory": "design-primitives/typography"
10
+ },
11
+ "publishConfig": {
12
+ "access": "public"
13
+ },
14
+ "main": "dist/index.common.js",
15
+ "module": "dist/index.module.js",
16
+ "types": "dist/index.common.d.ts",
17
+ "sideEffects": false,
18
+ "files": [
19
+ "dist",
20
+ "src"
21
+ ],
22
+ "scripts": {
23
+ "lint": "eslint . --cache",
24
+ "lint:fix": "yarn run lint --fix",
25
+ "_prettier": "prettier \"**/*.{json,md,mdx,yml,css}\" --ignore-path .eslintignore",
26
+ "format": "yarn run _prettier --write",
27
+ "test": "run-p lint \"_prettier --check\"",
28
+ "clean": "rimraf dist",
29
+ "build:tokens": "style-dictionary build",
30
+ "build": "yarn run clean && yarn run build:tokens",
31
+ "prepack": "yarn run build"
32
+ },
33
+ "devDependencies": {
34
+ "eslint": "8.34.0",
35
+ "eslint-config-powel": "14.2.1",
36
+ "eslint-import-resolver-node": "0.3.7",
37
+ "eslint-plugin-import": "2.27.5",
38
+ "npm-run-all": "4.1.5",
39
+ "polished": "4.2.2",
40
+ "prettier": "2.8.4",
41
+ "rimraf": "3.0.2",
42
+ "style-dictionary": "3.7.3-rc.1",
43
+ "typescript": "4.9.5"
44
+ }
45
+ }
package/src/font-size.js ADDED
@@ -0,0 +1,44 @@
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 ADDED
@@ -0,0 +1,70 @@
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
+ body: {
33
+ value: calcLineHeight(baseFontSize)
34
+ },
35
+ zeta: {
36
+ value: calcLineHeight(fontSizeTokens.size.font.zeta.value)
37
+ },
38
+ epsilon: {
39
+ value: calcLineHeight(fontSizeTokens.size.font.epsilon.value)
40
+ },
41
+ delta: {
42
+ value: calcLineHeight(fontSizeTokens.size.font.delta.value)
43
+ },
44
+ gamma: {
45
+ value: calcLineHeight(
46
+ fontSizeTokens.size.font.gamma.value,
47
+ ceil(baseLineHeight * 1.333)
48
+ )
49
+ },
50
+ beta: {
51
+ value: calcLineHeight(
52
+ fontSizeTokens.size.font.beta.value,
53
+ baseLineHeight * 2
54
+ )
55
+ },
56
+ alpha: {
57
+ value: calcLineHeight(
58
+ fontSizeTokens.size.font.alpha.value,
59
+ baseLineHeight * 2
60
+ )
61
+ },
62
+ giga: {
63
+ value: calcLineHeight(
64
+ fontSizeTokens.size.font.giga.value,
65
+ baseLineHeight * 3
66
+ )
67
+ }
68
+ }
69
+ }
70
+ };
package/src/style.json ADDED
@@ -0,0 +1,118 @@
1
+ {
2
+ "font": {
3
+ "style": {
4
+ "body": {
5
+ "fontFamily": {
6
+ "value": "{font.family.base.value}"
7
+ },
8
+ "fontSize": {
9
+ "value": "{size.font.base.value}"
10
+ },
11
+ "lineHeight": {
12
+ "value": "{size.lineHeight.body.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}"
58
+ }
59
+ },
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}"
114
+ }
115
+ }
116
+ }
117
+ }
118
+ }
package/src/tokens.json ADDED
@@ -0,0 +1,15 @@
1
+ {
2
+ "font": {
3
+ "family": {
4
+ "base": {
5
+ "value": "'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'"
6
+ },
7
+ "display": {
8
+ "value": "'FK Display', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif"
9
+ },
10
+ "mono": {
11
+ "value": "ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
12
+ }
13
+ }
14
+ }
15
+ }
package/src/weight.json ADDED
@@ -0,0 +1,12 @@
1
+ {
2
+ "font": {
3
+ "weight": {
4
+ "normal": {
5
+ "value": "400"
6
+ },
7
+ "semibold": {
8
+ "value": "600"
9
+ }
10
+ }
11
+ }
12
+ }