@mindvalley/design-system 3.4.0 β 4.0.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.
- package/CHANGELOG.md +283 -6
- package/dist/b2b.d.ts +115 -51
- 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/CONTRIBUTION.md +3 -3
- package/docs/RELEASING.md +12 -7
- 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 +31 -23
- 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
|
package/docs/CONTRIBUTION.md
CHANGED
|
@@ -56,14 +56,14 @@ See more in the [release guide](RELEASING.md#releasing-π).
|
|
|
56
56
|
|
|
57
57
|
#### π Directory structure
|
|
58
58
|
|
|
59
|
-
Here is a
|
|
59
|
+
Here is a simplified directory structure highlighting key areas for contributors:
|
|
60
60
|
|
|
61
61
|
```bash
|
|
62
62
|
βββ LICENSE
|
|
63
63
|
βββ README.md
|
|
64
64
|
βββ __tests__
|
|
65
65
|
βββ babel.config.js
|
|
66
|
-
βββ build.
|
|
66
|
+
βββ build.ts
|
|
67
67
|
βββ dist/
|
|
68
68
|
β βββ ...
|
|
69
69
|
βββ docs/
|
|
@@ -108,7 +108,7 @@ Here is a simplifie directory structure highlighting key areas for contributors:
|
|
|
108
108
|
|
|
109
109
|
* There is **no** root `config.json`.
|
|
110
110
|
|
|
111
|
-
* Main configuration is in `build.
|
|
111
|
+
* Main configuration is in `build.ts`, `webpack.config.js`, and scripts in `package.json`.
|
|
112
112
|
|
|
113
113
|
#### Important npm scripts
|
|
114
114
|
|
package/docs/RELEASING.md
CHANGED
|
@@ -13,8 +13,8 @@ Only the above type of commits will trigger a release.
|
|
|
13
13
|
|
|
14
14
|
On merging to the main branch, several things will happen:
|
|
15
15
|
|
|
16
|
-
1. Semantic
|
|
17
|
-
2.
|
|
16
|
+
1. Semantic Release analyzes the commit messages for the merged changes.
|
|
17
|
+
2. It determines the release type using the table above.
|
|
18
18
|
3. Generate a changelog for the new changes and generate the new package version number.
|
|
19
19
|
4. Thereafter a git release will be prepared and pushed to the repo together with the Changelog and package.json version update.
|
|
20
20
|
5. The new package is then published to npm.
|
|
@@ -23,10 +23,15 @@ More detailed explanation can be found on the [semantic release steps documentat
|
|
|
23
23
|
|
|
24
24
|
After release and publishing, the package should be available as a [scoped npm package](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages) and is on npm as [@mindvalley/design-system](https://www.npmjs.com/package/@mindvalley/design-system).
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
### Trusted publishing
|
|
27
|
+
|
|
28
|
+
Releases run through the GitHub Actions workflow [`release.yml`](../.github/workflows/release.yml) using [npm trusted publishing](https://docs.npmjs.com/trusted-publishers). The workflow:
|
|
27
29
|
|
|
28
|
-
|
|
30
|
+
- authenticates to npm via OpenID Connect (`id-token` GitHub permission) so no long-lived `NPM_TOKEN` is required;
|
|
31
|
+
- enables Corepack and resolves `npm@11.5.1`, pinned via the repositoryβs `package.json` and `.tool-versions`, to satisfy npmβs trusted publisher requirements;
|
|
32
|
+
- publishes with provenance metadata via `NPM_CONFIG_PROVENANCE=true` so npm records the GitHub build attestation;
|
|
33
|
+
- executes the standard semantic-release pipeline to tag, generate changelog entries, open the release PR, and publish to npm.
|
|
29
34
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
35
|
+
If the workflow fails, re-run it from the Actions tab after addressing the underlying error. No manual npm publishing is expected under normal circumstances.
|
|
36
|
+
|
|
37
|
+
Jump to the [usage guide](USAGE.md) to understand how to use the published package in your repo.
|