@mindvalley/design-system 3.4.2 → 4.0.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.
- package/CHANGELOG.md +90 -2
- package/dist/b2b.d.ts +45 -45
- package/dist/b2b.d.ts.map +1 -1
- package/dist/b2b.js +1 -1
- package/dist/b2b.js.map +1 -1
- package/dist/helpers/casing.d.ts.map +1 -1
- package/dist/helpers/casing.js +21 -23
- package/dist/helpers/dimens.d.ts +1 -0
- package/dist/helpers/dimens.d.ts.map +1 -1
- package/dist/helpers/dimens.js +11 -2
- package/dist/helpers/regex.d.ts.map +1 -1
- package/dist/index.d.ts +98 -83
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/tailwind/plugins/tokens/b2b/typography.d.ts.map +1 -1
- package/dist/tailwind/plugins/tokens/b2b/typography.js +25 -26
- package/dist/tailwind/plugins/tokens/mindvalley/typography.d.ts.map +1 -1
- package/dist/tailwind/plugins/tokens/mindvalley/typography.js +60 -67
- package/dist/tailwind/plugins/typography.d.ts.map +1 -1
- package/dist/tailwind/plugins/typography.js +25 -15
- package/dist/typography/b2b/fonts.css +19 -0
- package/dist/typography/b2b/fonts.d.ts +8 -0
- package/dist/typography/b2b/fonts.js +30 -0
- package/dist/typography/mindvalley/fonts.css +43 -0
- package/dist/typography/mindvalley/fonts.d.ts +8 -0
- package/dist/typography/mindvalley/fonts.js +54 -0
- package/docs/USAGE.md +121 -76
- package/docs/typography-fonts.md +552 -0
- package/docs/typography-token-pipeline-b2b.md +156 -0
- package/package.json +17 -3
- package/docs/token-validation.md +0 -298
|
@@ -1,72 +1,65 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const tokens = {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
"title-9-mobile": { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "12px", "letterSpacing": "0.35px", "lineHeight": "16px" },
|
|
65
|
-
"title-1-mobile": { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "36px", "letterSpacing": "0.25px", "lineHeight": "44px" },
|
|
66
|
-
"title-2-mobile": { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "32px", "letterSpacing": "0.25px", "lineHeight": "38px" },
|
|
67
|
-
"title-3-mobile": { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "28px", "letterSpacing": "0.25px", "lineHeight": "34px" },
|
|
68
|
-
"title-4-mobile": { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "24px", "letterSpacing": "0.25px", "lineHeight": "30px" },
|
|
69
|
-
"title-6-mobile": { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "18px", "letterSpacing": "0.25px", "lineHeight": "22px" },
|
|
70
|
-
"title-11-mobile": { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "8px", "letterSpacing": "0.35px", "lineHeight": "12px" }
|
|
4
|
+
'body': { "fontFamily": "'Sharp Grotesk Cyr Book 19', Helvetica, Arial, 'sans-serif'", "fontSize": "16px", "letterSpacing": "0.35px", "lineHeight": "24px", "fontWeight": 400 },
|
|
5
|
+
'body-2xs': { "fontFamily": "'Sharp Grotesk Cyr Book 19', Helvetica, Arial, 'sans-serif'", "fontSize": "10px", "letterSpacing": "0.5px", "lineHeight": "15px", "fontWeight": 400 },
|
|
6
|
+
'body-3xs': { "fontFamily": "'Sharp Grotesk Cyr Book 19', Helvetica, Arial, 'sans-serif'", "fontSize": "8px", "letterSpacing": "0.5px", "lineHeight": "12px", "fontWeight": 400 },
|
|
7
|
+
'body-bold': { "fontFamily": "'Sharp Grotesk Cyr Medium 19', Helvetica, Arial, 'sans-serif'", "fontSize": "16px", "letterSpacing": "0.35px", "lineHeight": "24px", "fontWeight": 500 },
|
|
8
|
+
'body-italic': { "fontFamily": "'Sharp Grotesk Cyr Book Itl 19', Helvetica, Arial, 'sans-serif'", "fontSize": "16px", "letterSpacing": "0.35px", "lineHeight": "24px", "fontWeight": 400 },
|
|
9
|
+
'body-large': { "fontFamily": "'Sharp Grotesk Cyr Book 19', Helvetica, Arial, 'sans-serif'", "fontSize": "20px", "letterSpacing": "0.25px", "lineHeight": "30px", "fontWeight": 400 },
|
|
10
|
+
'body-large-bold': { "fontFamily": "'Sharp Grotesk Cyr Medium 19', Helvetica, Arial, 'sans-serif'", "fontSize": "20px", "letterSpacing": "0.25px", "lineHeight": "30px", "fontWeight": 500 },
|
|
11
|
+
'body-large-italic': { "fontFamily": "'Sharp Grotesk Cyr Book Itl 19', Helvetica, Arial, 'sans-serif'", "fontSize": "20px", "letterSpacing": "0.25px", "lineHeight": "30px", "fontWeight": 400 },
|
|
12
|
+
'body-small': { "fontFamily": "'Sharp Grotesk Cyr Book 19', Helvetica, Arial, 'sans-serif'", "fontSize": "14px", "letterSpacing": "0.35px", "lineHeight": "20px", "fontWeight": 400 },
|
|
13
|
+
'body-small-bold': { "fontFamily": "'Sharp Grotesk Cyr Medium 19', Helvetica, Arial, 'sans-serif'", "fontSize": "14px", "letterSpacing": "0.35px", "lineHeight": "20px", "fontWeight": 500 },
|
|
14
|
+
'body-small-italic': { "fontFamily": "'Sharp Grotesk Cyr Book Itl 19', Helvetica, Arial, 'sans-serif'", "fontSize": "14px", "letterSpacing": "0.35px", "lineHeight": "20px", "fontWeight": 400 },
|
|
15
|
+
'body-xs': { "fontFamily": "'Sharp Grotesk Cyr Book 19', Helvetica, Arial, 'sans-serif'", "fontSize": "12px", "letterSpacing": "0.35px", "lineHeight": "16px", "fontWeight": 400 },
|
|
16
|
+
'body-xs-italic': { "fontFamily": "'Sharp Grotesk Cyr Book 19', Helvetica, Arial, 'sans-serif'", "fontSize": "12px", "letterSpacing": "0.35px", "lineHeight": "16px", "fontWeight": 400 },
|
|
17
|
+
'button-text': { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "16px", "letterSpacing": "0.25px", "lineHeight": "20px", "fontWeight": 500 },
|
|
18
|
+
'button-text-medium': { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "14px", "letterSpacing": "0.25px", "lineHeight": "18px", "fontWeight": 500 },
|
|
19
|
+
'button-text-small': { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "12px", "letterSpacing": "0.35px", "lineHeight": "16px", "fontWeight": 500 },
|
|
20
|
+
'caption-disclaimer': { "fontFamily": "'Sharp Grotesk Cyr Book 19', Helvetica, Arial, 'sans-serif'", "fontSize": "12px", "letterSpacing": "0.35px", "lineHeight": "16px", "fontWeight": 400 },
|
|
21
|
+
'overline-text': { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "14px", "letterSpacing": "0.5px", "lineHeight": "20px", "fontWeight": 500 },
|
|
22
|
+
'timer-text': { "fontFamily": "'Sharp Grotesk Cyr Book 19', Helvetica, Arial, 'sans-serif'", "fontSize": "44px", "letterSpacing": "0.25px", "lineHeight": "52px", "fontWeight": 400 },
|
|
23
|
+
'timer-text-medium': { "fontFamily": "'Sharp Grotesk Cyr Book 19', Helvetica, Arial, 'sans-serif'", "fontSize": "36px", "letterSpacing": "0.25px", "lineHeight": "44px", "fontWeight": 400 },
|
|
24
|
+
'timer-text-small': { "fontFamily": "'Sharp Grotesk Cyr Book 19', Helvetica, Arial, 'sans-serif'", "fontSize": "28px", "letterSpacing": "0.25px", "lineHeight": "34px", "fontWeight": 400 },
|
|
25
|
+
'title-bold-1-mobile': { "fontFamily": "'Sharp Grotesk Cyr Semibold 20', Helvetica, Arial, 'sans-serif'", "fontSize": "48px", "letterSpacing": "0.25px", "lineHeight": "56px", "fontWeight": 600 },
|
|
26
|
+
'title-bold-1-desktop': { "fontFamily": "'Sharp Grotesk Cyr Semibold 20', Helvetica, Arial, 'sans-serif'", "fontSize": "72px", "letterSpacing": "0.25px", "lineHeight": "80px", "fontWeight": 600 },
|
|
27
|
+
'title-bold-10-mobile': { "fontFamily": "'Sharp Grotesk Cyr Semibold 20', Helvetica, Arial, 'sans-serif'", "fontSize": "14px", "letterSpacing": "0.25px", "lineHeight": "0px", "fontWeight": 600 },
|
|
28
|
+
'title-bold-10-desktop': { "fontFamily": "'Sharp Grotesk Cyr Semibold 20', Helvetica, Arial, 'sans-serif'", "fontSize": "16px", "letterSpacing": "0.25px", "lineHeight": "0px", "fontWeight": 600 },
|
|
29
|
+
'title-bold-11-mobile': { "fontFamily": "'Sharp Grotesk Cyr Semibold 20', Helvetica, Arial, 'sans-serif'", "fontSize": "12px", "letterSpacing": "0.25px", "lineHeight": "0px", "fontWeight": 600 },
|
|
30
|
+
'title-bold-11-desktop': { "fontFamily": "'Sharp Grotesk Cyr Semibold 20', Helvetica, Arial, 'sans-serif'", "fontSize": "14px", "letterSpacing": "0.25px", "lineHeight": "0px", "fontWeight": 600 },
|
|
31
|
+
'title-bold-2-mobile': { "fontFamily": "'Sharp Grotesk Cyr Semibold 20', Helvetica, Arial, 'sans-serif'", "fontSize": "36px", "letterSpacing": "0.25px", "lineHeight": "44px", "fontWeight": 600 },
|
|
32
|
+
'title-bold-2-desktop': { "fontFamily": "'Sharp Grotesk Cyr Semibold 20', Helvetica, Arial, 'sans-serif'", "fontSize": "60px", "letterSpacing": "0.25px", "lineHeight": "68px", "fontWeight": 600 },
|
|
33
|
+
'title-bold-3-mobile': { "fontFamily": "'Sharp Grotesk Cyr Semibold 20', Helvetica, Arial, 'sans-serif'", "fontSize": "30px", "letterSpacing": "0.25px", "lineHeight": "36px", "fontWeight": 600 },
|
|
34
|
+
'title-bold-3-desktop': { "fontFamily": "'Sharp Grotesk Cyr Semibold 20', Helvetica, Arial, 'sans-serif'", "fontSize": "48px", "letterSpacing": "0.25px", "lineHeight": "56px", "fontWeight": 600 },
|
|
35
|
+
'title-bold-4-mobile': { "fontFamily": "'Sharp Grotesk Cyr Semibold 20', Helvetica, Arial, 'sans-serif'", "fontSize": "28px", "letterSpacing": "0.25px", "lineHeight": "34px", "fontWeight": 600 },
|
|
36
|
+
'title-bold-4-desktop': { "fontFamily": "'Sharp Grotesk Cyr Semibold 20', Helvetica, Arial, 'sans-serif'", "fontSize": "36px", "letterSpacing": "0.25px", "lineHeight": "44px", "fontWeight": 600 },
|
|
37
|
+
'title-bold-5-mobile': { "fontFamily": "'Sharp Grotesk Cyr Semibold 20', Helvetica, Arial, 'sans-serif'", "fontSize": "24px", "letterSpacing": "0.25px", "lineHeight": "30px", "fontWeight": 600 },
|
|
38
|
+
'title-bold-5-desktop': { "fontFamily": "'Sharp Grotesk Cyr Semibold 20', Helvetica, Arial, 'sans-serif'", "fontSize": "28px", "letterSpacing": "0.25px", "lineHeight": "34px", "fontWeight": 600 },
|
|
39
|
+
'title-bold-6-mobile': { "fontFamily": "'Sharp Grotesk Cyr Semibold 20', Helvetica, Arial, 'sans-serif'", "fontSize": "22px", "letterSpacing": "0.25px", "lineHeight": "0px", "fontWeight": 600 },
|
|
40
|
+
'title-bold-6-desktop': { "fontFamily": "'Sharp Grotesk Cyr Semibold 20', Helvetica, Arial, 'sans-serif'", "fontSize": "24px", "letterSpacing": "0.25px", "lineHeight": "0px", "fontWeight": 600 },
|
|
41
|
+
'title-bold-7-mobile': { "fontFamily": "'Sharp Grotesk Cyr Semibold 20', Helvetica, Arial, 'sans-serif'", "fontSize": "20px", "letterSpacing": "0.25px", "lineHeight": "0px", "fontWeight": 600 },
|
|
42
|
+
'title-bold-7-desktop': { "fontFamily": "'Sharp Grotesk Cyr Semibold 20', Helvetica, Arial, 'sans-serif'", "fontSize": "22px", "letterSpacing": "0.25px", "lineHeight": "0px", "fontWeight": 600 },
|
|
43
|
+
'title-bold-8-mobile': { "fontFamily": "'Sharp Grotesk Cyr Semibold 20', Helvetica, Arial, 'sans-serif'", "fontSize": "18px", "letterSpacing": "0.25px", "lineHeight": "0px", "fontWeight": 600 },
|
|
44
|
+
'title-bold-8-desktop': { "fontFamily": "'Sharp Grotesk Cyr Semibold 20', Helvetica, Arial, 'sans-serif'", "fontSize": "20px", "letterSpacing": "0.25px", "lineHeight": "0px", "fontWeight": 600 },
|
|
45
|
+
'title-bold-9-mobile': { "fontFamily": "'Sharp Grotesk Cyr Semibold 20', Helvetica, Arial, 'sans-serif'", "fontSize": "16px", "letterSpacing": "0.25px", "lineHeight": "0px", "fontWeight": 600 },
|
|
46
|
+
'title-bold-9-desktop': { "fontFamily": "'Sharp Grotesk Cyr Semibold 20', Helvetica, Arial, 'sans-serif'", "fontSize": "18px", "letterSpacing": "0.25px", "lineHeight": "0px", "fontWeight": 600 },
|
|
47
|
+
'title-1-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "36px", "letterSpacing": "0.25px", "lineHeight": "44px", "fontWeight": 500 },
|
|
48
|
+
'title-1-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "60px", "letterSpacing": "0.25px", "lineHeight": "68px", "fontWeight": 500 },
|
|
49
|
+
'title-10': { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "10px", "letterSpacing": "0.35px", "lineHeight": "14px", "fontWeight": 500 },
|
|
50
|
+
'title-11': { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "8px", "letterSpacing": "0.35px", "lineHeight": "12px", "fontWeight": 500 },
|
|
51
|
+
'title-2-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "32px", "letterSpacing": "0.25px", "lineHeight": "40px", "fontWeight": 500 },
|
|
52
|
+
'title-2-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "48px", "letterSpacing": "0.25px", "lineHeight": "56px", "fontWeight": 500 },
|
|
53
|
+
'title-3-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "28px", "letterSpacing": "0.25px", "lineHeight": "36px", "fontWeight": 500 },
|
|
54
|
+
'title-3-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "36px", "letterSpacing": "0.25px", "lineHeight": "44px", "fontWeight": 500 },
|
|
55
|
+
'title-4-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "24px", "letterSpacing": "0.25px", "lineHeight": "30px", "fontWeight": 500 },
|
|
56
|
+
'title-4-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "28px", "letterSpacing": "0.25px", "lineHeight": "36px", "fontWeight": 500 },
|
|
57
|
+
'title-5-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "20px", "letterSpacing": "0.25px", "lineHeight": "24px", "fontWeight": 500 },
|
|
58
|
+
'title-5-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "24px", "letterSpacing": "0.25px", "lineHeight": "30px", "fontWeight": 500 },
|
|
59
|
+
'title-6-mobile': { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "18px", "letterSpacing": "0.25px", "lineHeight": "22px", "fontWeight": 500 },
|
|
60
|
+
'title-6-desktop': { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "20px", "letterSpacing": "0.25px", "lineHeight": "24px", "fontWeight": 500 },
|
|
61
|
+
'title-7': { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "16px", "letterSpacing": "0.25px", "lineHeight": "20px", "fontWeight": 500 },
|
|
62
|
+
'title-8': { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "14px", "letterSpacing": "0.25px", "lineHeight": "18px", "fontWeight": 500 },
|
|
63
|
+
'title-9': { "fontFamily": "'Sharp Grotesk Cyr Medium 20', Helvetica, Arial, 'sans-serif'", "fontSize": "12px", "letterSpacing": "0.35px", "lineHeight": "16px", "fontWeight": 500 }
|
|
71
64
|
};
|
|
72
65
|
exports.default = tokens;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/tailwind/plugins/typography.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/tailwind/plugins/typography.ts"],"names":[],"mappings":"AAcA,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;IAClB,aAAa,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;CAC3C;AAED,MAAM,WAAW,aAAa;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,eAAe,CAAA;CAC/B;AAgBD,MAAM,WAAW,uBAAuB;IACtC,MAAM,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,YAAY,GAAG,WAAW,GAAG,QAAQ,CAAA;IAC1E,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;CAClB;;;;cApCE,CAAC;;;;AAoMJ,wBAAmD"}
|
|
@@ -4,17 +4,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
const plugin_1 = __importDefault(require("tailwindcss/plugin"));
|
|
7
|
-
const dimens_1 = require("../../helpers/dimens");
|
|
8
7
|
const casing_1 = require("../../helpers/casing");
|
|
9
|
-
const
|
|
10
|
-
const
|
|
8
|
+
const dimens_1 = require("../../helpers/dimens");
|
|
9
|
+
const typography_1 = __importDefault(require("./tokens/b2b/typography"));
|
|
10
|
+
const typography_2 = __importDefault(require("./tokens/mindvalley/typography"));
|
|
11
11
|
const brandMapping = {
|
|
12
|
-
mindvalley:
|
|
13
|
-
b2b:
|
|
12
|
+
mindvalley: typography_2.default,
|
|
13
|
+
b2b: typography_1.default,
|
|
14
14
|
};
|
|
15
15
|
function typographyPlugin(options = {}) {
|
|
16
16
|
return ({ addUtilities, theme }) => {
|
|
17
|
-
const { casing = casing_1.CASINGS.kebabCase, breakingPoint = theme(
|
|
17
|
+
const { casing = casing_1.CASINGS.kebabCase, breakingPoint = theme('screens.lg', '1024px'), prefix = '', brands = ['mindvalley'], } = options;
|
|
18
18
|
const typographyClassDeclarations = {};
|
|
19
19
|
for (const brand of brands) {
|
|
20
20
|
const brandTypography = brandMapping[brand];
|
|
@@ -31,17 +31,20 @@ function typographyPlugin(options = {}) {
|
|
|
31
31
|
function processTypography(typography, breakingPoint) {
|
|
32
32
|
const result = {};
|
|
33
33
|
for (const key of Object.keys(typography)) {
|
|
34
|
-
const
|
|
35
|
-
const
|
|
36
|
-
const isMobile = key.includes("-mobile");
|
|
34
|
+
const isDesktop = key.includes('-desktop');
|
|
35
|
+
const isMobile = key.includes('-mobile');
|
|
37
36
|
const baseTypography = typography[key];
|
|
37
|
+
const baseKey = isDesktop || isMobile ? (0, casing_1.toCamelCase)(key.replace(/-desktop|-mobile/g, '')) : key;
|
|
38
38
|
if (isDesktop) {
|
|
39
39
|
const existing = result[baseKey] || {};
|
|
40
|
-
result[baseKey] =
|
|
40
|
+
result[baseKey] = {
|
|
41
|
+
...existing,
|
|
42
|
+
[`@media (min-width: ${breakingPoint})`]: { ...baseTypography },
|
|
43
|
+
};
|
|
41
44
|
}
|
|
42
45
|
else if (isMobile) {
|
|
43
46
|
const existing = result[baseKey] || {};
|
|
44
|
-
result[baseKey] =
|
|
47
|
+
result[baseKey] = { ...baseTypography, ...existing };
|
|
45
48
|
}
|
|
46
49
|
else {
|
|
47
50
|
result[baseKey] = baseTypography;
|
|
@@ -49,7 +52,7 @@ function processTypography(typography, breakingPoint) {
|
|
|
49
52
|
}
|
|
50
53
|
return result;
|
|
51
54
|
}
|
|
52
|
-
function convertObjectKeysToCasedClassNames(typography, casing = casing_1.CASINGS.kebabCase, prefix =
|
|
55
|
+
function convertObjectKeysToCasedClassNames(typography, casing = casing_1.CASINGS.kebabCase, prefix = '') {
|
|
53
56
|
const mapKey = (key) => {
|
|
54
57
|
let className;
|
|
55
58
|
switch (casing) {
|
|
@@ -78,10 +81,13 @@ function convertObjectKeysToCasedClassNames(typography, casing = casing_1.CASING
|
|
|
78
81
|
const res = {};
|
|
79
82
|
Object.keys(value).forEach((key) => {
|
|
80
83
|
const propValue = value[key];
|
|
81
|
-
if (
|
|
84
|
+
if (key === 'lineHeight' && typeof propValue === 'string') {
|
|
85
|
+
res[key] = (0, dimens_1.lineHeightToRem)(propValue);
|
|
86
|
+
}
|
|
87
|
+
else if (['fontSize', 'letterSpacing'].includes(key) && typeof propValue === 'string') {
|
|
82
88
|
res[key] = (0, dimens_1.strPxToRemStr)(propValue);
|
|
83
89
|
}
|
|
84
|
-
else if (typeof propValue ===
|
|
90
|
+
else if (typeof propValue === 'object' && propValue !== null) {
|
|
85
91
|
res[key] = mapVal(propValue);
|
|
86
92
|
}
|
|
87
93
|
else if (propValue !== undefined) {
|
|
@@ -93,6 +99,10 @@ function convertObjectKeysToCasedClassNames(typography, casing = casing_1.CASING
|
|
|
93
99
|
return mapObj(typography, mapKey, mapVal);
|
|
94
100
|
}
|
|
95
101
|
function mapObj(obj, keyMapFn, valueMapFn) {
|
|
96
|
-
|
|
102
|
+
const result = {};
|
|
103
|
+
for (const [key, value] of Object.entries(obj)) {
|
|
104
|
+
result[keyMapFn(key)] = valueMapFn(value);
|
|
105
|
+
}
|
|
106
|
+
return result;
|
|
97
107
|
}
|
|
98
108
|
exports.default = plugin_1.default.withOptions(typographyPlugin);
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Mindvalley Design System - B2b Typography Fonts
|
|
3
|
+
*
|
|
4
|
+
* This file contains @font-face declarations for the b2b brand typography.
|
|
5
|
+
* Fonts are served via Fastly CDN and managed via platform backoffice.
|
|
6
|
+
*
|
|
7
|
+
* Note: Each font file has a single weight baked into the font name
|
|
8
|
+
* (e.g., "Sharp Grotesk Cyr Medium 20" contains Medium weight).
|
|
9
|
+
* Using font-weight: auto allows the browser to use the font's intrinsic weight.
|
|
10
|
+
*
|
|
11
|
+
* @generated This file is automatically generated. Do not edit manually.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
@font-face {
|
|
15
|
+
font-family: "Sharp Grotesk Cyr Medium 22";
|
|
16
|
+
font-weight: auto;
|
|
17
|
+
font-display: swap;
|
|
18
|
+
src: url("https://assets.mindvalley.com/api/v1/assets/b61f86ec-3dbd-4674-907a-f3f26f5101ce.woff2") format("woff2");
|
|
19
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Mindvalley Design System - Typography Fonts (JS Module)
|
|
3
|
+
*
|
|
4
|
+
* This module exports the font-face CSS as a string for programmatic use.
|
|
5
|
+
*
|
|
6
|
+
* @generated This file is automatically generated. Do not edit manually.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
export const fontFaceCSS = `/**
|
|
10
|
+
* Mindvalley Design System - B2b Typography Fonts
|
|
11
|
+
*
|
|
12
|
+
* This file contains @font-face declarations for the b2b brand typography.
|
|
13
|
+
* Fonts are served via Fastly CDN and managed via platform backoffice.
|
|
14
|
+
*
|
|
15
|
+
* Note: Each font file has a single weight baked into the font name
|
|
16
|
+
* (e.g., "Sharp Grotesk Cyr Medium 20" contains Medium weight).
|
|
17
|
+
* Using font-weight: auto allows the browser to use the font's intrinsic weight.
|
|
18
|
+
*
|
|
19
|
+
* @generated This file is automatically generated. Do not edit manually.
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
@font-face {
|
|
23
|
+
font-family: "Sharp Grotesk Cyr Medium 22";
|
|
24
|
+
font-weight: auto;
|
|
25
|
+
font-display: swap;
|
|
26
|
+
src: url("https://assets.mindvalley.com/api/v1/assets/b61f86ec-3dbd-4674-907a-f3f26f5101ce.woff2") format("woff2");
|
|
27
|
+
}
|
|
28
|
+
`
|
|
29
|
+
|
|
30
|
+
export default fontFaceCSS
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Mindvalley Design System - Mindvalley Typography Fonts
|
|
3
|
+
*
|
|
4
|
+
* This file contains @font-face declarations for the mindvalley brand typography.
|
|
5
|
+
* Fonts are served via Fastly CDN and managed via platform backoffice.
|
|
6
|
+
*
|
|
7
|
+
* Note: Each font file has a single weight baked into the font name
|
|
8
|
+
* (e.g., "Sharp Grotesk Cyr Medium 20" contains Medium weight).
|
|
9
|
+
* Using font-weight: auto allows the browser to use the font's intrinsic weight.
|
|
10
|
+
*
|
|
11
|
+
* @generated This file is automatically generated. Do not edit manually.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
@font-face {
|
|
15
|
+
font-family: "Sharp Grotesk Cyr Semibold 20";
|
|
16
|
+
font-weight: auto;
|
|
17
|
+
font-display: swap;
|
|
18
|
+
src: url("https://assets.mindvalley.com/api/v1/assets/85092275-d096-483e-a271-7d6094cafca1.woff2") format("woff2");
|
|
19
|
+
}
|
|
20
|
+
@font-face {
|
|
21
|
+
font-family: "Sharp Grotesk Cyr Medium 20";
|
|
22
|
+
font-weight: auto;
|
|
23
|
+
font-display: swap;
|
|
24
|
+
src: url("https://assets.mindvalley.com/api/v1/assets/faf3d1e3-d18c-461e-aafa-9e56f9f16ce0.woff2") format("woff2");
|
|
25
|
+
}
|
|
26
|
+
@font-face {
|
|
27
|
+
font-family: "Sharp Grotesk Cyr Medium 19";
|
|
28
|
+
font-weight: auto;
|
|
29
|
+
font-display: swap;
|
|
30
|
+
src: url("https://assets.mindvalley.com/api/v1/assets/9f7eea7d-ba59-4ee1-85a6-3ac45f23239c.woff2") format("woff2");
|
|
31
|
+
}
|
|
32
|
+
@font-face {
|
|
33
|
+
font-family: "Sharp Grotesk Cyr Book 19";
|
|
34
|
+
font-weight: auto;
|
|
35
|
+
font-display: swap;
|
|
36
|
+
src: url("https://assets.mindvalley.com/api/v1/assets/0982041e-3874-48dc-bba5-a15c6fb960d1.woff2") format("woff2");
|
|
37
|
+
}
|
|
38
|
+
@font-face {
|
|
39
|
+
font-family: "Sharp Grotesk Cyr Book Itl 19";
|
|
40
|
+
font-weight: auto;
|
|
41
|
+
font-display: swap;
|
|
42
|
+
src: url("https://assets.mindvalley.com/api/v1/assets/2ba064b8-f0d5-48e4-a790-d7b90d5d2db5.woff2") format("woff2");
|
|
43
|
+
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Mindvalley Design System - Typography Fonts (JS Module)
|
|
3
|
+
*
|
|
4
|
+
* This module exports the font-face CSS as a string for programmatic use.
|
|
5
|
+
*
|
|
6
|
+
* @generated This file is automatically generated. Do not edit manually.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
export const fontFaceCSS = `/**
|
|
10
|
+
* Mindvalley Design System - Mindvalley Typography Fonts
|
|
11
|
+
*
|
|
12
|
+
* This file contains @font-face declarations for the mindvalley brand typography.
|
|
13
|
+
* Fonts are served via Fastly CDN and managed via platform backoffice.
|
|
14
|
+
*
|
|
15
|
+
* Note: Each font file has a single weight baked into the font name
|
|
16
|
+
* (e.g., "Sharp Grotesk Cyr Medium 20" contains Medium weight).
|
|
17
|
+
* Using font-weight: auto allows the browser to use the font's intrinsic weight.
|
|
18
|
+
*
|
|
19
|
+
* @generated This file is automatically generated. Do not edit manually.
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
@font-face {
|
|
23
|
+
font-family: "Sharp Grotesk Cyr Semibold 20";
|
|
24
|
+
font-weight: auto;
|
|
25
|
+
font-display: swap;
|
|
26
|
+
src: url("https://assets.mindvalley.com/api/v1/assets/85092275-d096-483e-a271-7d6094cafca1.woff2") format("woff2");
|
|
27
|
+
}
|
|
28
|
+
@font-face {
|
|
29
|
+
font-family: "Sharp Grotesk Cyr Medium 20";
|
|
30
|
+
font-weight: auto;
|
|
31
|
+
font-display: swap;
|
|
32
|
+
src: url("https://assets.mindvalley.com/api/v1/assets/faf3d1e3-d18c-461e-aafa-9e56f9f16ce0.woff2") format("woff2");
|
|
33
|
+
}
|
|
34
|
+
@font-face {
|
|
35
|
+
font-family: "Sharp Grotesk Cyr Medium 19";
|
|
36
|
+
font-weight: auto;
|
|
37
|
+
font-display: swap;
|
|
38
|
+
src: url("https://assets.mindvalley.com/api/v1/assets/9f7eea7d-ba59-4ee1-85a6-3ac45f23239c.woff2") format("woff2");
|
|
39
|
+
}
|
|
40
|
+
@font-face {
|
|
41
|
+
font-family: "Sharp Grotesk Cyr Book 19";
|
|
42
|
+
font-weight: auto;
|
|
43
|
+
font-display: swap;
|
|
44
|
+
src: url("https://assets.mindvalley.com/api/v1/assets/0982041e-3874-48dc-bba5-a15c6fb960d1.woff2") format("woff2");
|
|
45
|
+
}
|
|
46
|
+
@font-face {
|
|
47
|
+
font-family: "Sharp Grotesk Cyr Book Itl 19";
|
|
48
|
+
font-weight: auto;
|
|
49
|
+
font-display: swap;
|
|
50
|
+
src: url("https://assets.mindvalley.com/api/v1/assets/2ba064b8-f0d5-48e4-a790-d7b90d5d2db5.woff2") format("woff2");
|
|
51
|
+
}
|
|
52
|
+
`
|
|
53
|
+
|
|
54
|
+
export default fontFaceCSS
|