From e2c4427361a1e0a69aeab1ed24410eb646110599 Mon Sep 17 00:00:00 2001 From: Philipp Rummelsberger Date: Fri, 24 Feb 2023 09:31:32 +0100 Subject: [PATCH 1/3] chore(#76): upgrade to react 18 --- mwui-react/package.json | 8 ++--- package-lock.json | 68 +++++++++++++++++++---------------------- 2 files changed, 35 insertions(+), 41 deletions(-) diff --git a/mwui-react/package.json b/mwui-react/package.json index ec15240f..6d8cc8f7 100644 --- a/mwui-react/package.json +++ b/mwui-react/package.json @@ -28,16 +28,16 @@ "jest": "^27.4.5", "jest-dom": "^3.0.2", "np": "^3.0.4", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "typescript": "^4.8.2" }, "dependencies": { "@maibornwolff/mwui-stencil": "^0.1.12" }, "peerDependencies": { - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.2.0", + "react-dom": "^18.2.0" }, "jest": { "preset": "ts-jest", diff --git a/package-lock.json b/package-lock.json index d53d8552..28342867 100644 --- a/package-lock.json +++ b/package-lock.json @@ -88,13 +88,13 @@ "jest": "^27.4.5", "jest-dom": "^3.0.2", "np": "^3.0.4", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "typescript": "^4.8.2" }, "peerDependencies": { - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.2.0", + "react-dom": "^18.2.0" } }, "mwui-stencil": { @@ -34753,30 +34753,28 @@ } }, "node_modules/react": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", - "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "dev": true, "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" }, "engines": { "node": ">=0.10.0" } }, "node_modules/react-dom": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", - "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", "dev": true, "dependencies": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" + "scheduler": "^0.23.0" }, "peerDependencies": { - "react": "17.0.2" + "react": "^18.2.0" } }, "node_modules/react-inspector": { @@ -36593,13 +36591,12 @@ } }, "node_modules/scheduler": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", - "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", "dev": true, "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "node_modules/schema-utils": { @@ -47704,8 +47701,8 @@ "jest": "^27.4.5", "jest-dom": "^3.0.2", "np": "^3.0.4", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "18.2.0", + "react-dom": "18.2.0", "typescript": "^4.8.2" } }, @@ -69676,24 +69673,22 @@ } }, "react": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", - "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "dev": true, "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "react-dom": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", - "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", "dev": true, "requires": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" + "scheduler": "^0.23.0" } }, "react-inspector": { @@ -71098,13 +71093,12 @@ } }, "scheduler": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", - "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", "dev": true, "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "schema-utils": { From f022927f85c9db1d52ce4ed4173a977fd969626e Mon Sep 17 00:00:00 2001 From: Martin Prinz Date: Mon, 27 Feb 2023 16:17:22 +0100 Subject: [PATCH 2/3] Update readme.md --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 20a4ea81..693aa7e6 100644 --- a/readme.md +++ b/readme.md @@ -99,7 +99,7 @@ defineCustomElements(window); ### Styling -To ensure CSS variables are available, import the global stylesheet in you Application root. +To ensure CSS variables are available, import the global stylesheet in your Application root. ```javascript import "@maibornwolff/mwui-stencil/dist/mwui-stencil/mwui-stencil.css"; From ff6fa26e257f2a346f40e9e421fc033608cd8e62 Mon Sep 17 00:00:00 2001 From: Philipp Rummelsberger Date: Tue, 28 Feb 2023 13:42:16 +0100 Subject: [PATCH 3/3] fix letter spacing transform --- mwui-stencil/docs.json | 2 +- mwui-token-farm/input/MW_component.json | 514 ++++++++++-------- mwui-token-farm/input/MW_core.json | 514 ++++++++++-------- mwui-token-farm/input/MW_semantic_light.json | 514 ++++++++++-------- .../src/scripts/transforms/index.ts | 4 +- .../{percent-em.ts => letter-spacing.ts} | 7 +- 6 files changed, 907 insertions(+), 648 deletions(-) rename mwui-token-farm/src/scripts/transforms/{percent-em.ts => letter-spacing.ts} (54%) diff --git a/mwui-stencil/docs.json b/mwui-stencil/docs.json index e3b68f67..21b3aba9 100644 --- a/mwui-stencil/docs.json +++ b/mwui-stencil/docs.json @@ -1,5 +1,5 @@ { - "timestamp": "2023-02-21T08:21:40", + "timestamp": "2023-02-28T12:41:07", "compiler": { "name": "@stencil/core", "version": "2.22.2", diff --git a/mwui-token-farm/input/MW_component.json b/mwui-token-farm/input/MW_component.json index 89eeee15..4a83459f 100644 --- a/mwui-token-farm/input/MW_component.json +++ b/mwui-token-farm/input/MW_component.json @@ -2454,234 +2454,320 @@ } } }, - "Hero -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "Bold", - "type": "fontWeights" - }, - "lineHeight": { - "value": 120, - "type": "lineHeight" - }, - "fontSize": { - "value": 112, - "type": "fontSizes" - } - }, - "H1 - v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "Regular", - "type": "fontWeights" - }, - "lineHeight": { - "value": 108, - "type": "lineHeight" - }, - "fontSize": { - "value": 72, - "type": "fontSizes" - } - }, - "H2 -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "Regular", - "type": "fontWeights" - }, - "lineHeight": { - "value": 96, - "type": "lineHeight" - }, - "fontSize": { - "value": 64, - "type": "fontSizes" - }, - "letterSpacing": { - "value": "-2%", - "type": "letterSpacing" - } - }, - "H3 -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "SemiBold", - "type": "fontWeights" - }, - "lineHeight": { - "value": 84, - "type": "lineHeight" - }, - "fontSize": { - "value": 56, - "type": "fontSizes" - }, - "letterSpacing": { - "value": "-2%", - "type": "letterSpacing" - } - }, - "H4 -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "SemiBold", - "type": "fontWeights" - }, - "lineHeight": { - "value": 72, - "type": "lineHeight" - }, - "fontSize": { - "value": 48, - "type": "fontSizes" - }, - "letterSpacing": { - "value": "", - "type": "letterSpacing" - } - }, - "H5 -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "SemiBold", - "type": "fontWeights" - }, - "lineHeight": { - "value": 60, - "type": "lineHeight" - }, - "fontSize": { - "value": 40, - "type": "fontSizes" - }, - "letterSpacing": { - "value": "-2%", - "type": "letterSpacing" - } - }, - "H6 -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "Bold", - "type": "fontWeights" - }, - "lineHeight": { - "value": 36, - "type": "lineHeight" - }, - "fontSize": { - "value": 24, - "type": "fontSizes" - }, - "letterSpacing": { - "value": "-2%", - "type": "letterSpacing" - } - }, - "title -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "SemiBold", - "type": "fontWeights" + "bold": { + "Hero": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Bold", + "type": "fontWeights" + }, + "lineHeight": { + "value": 120, + "type": "lineHeight" + }, + "fontSize": { + "value": 112, + "type": "fontSizes" + } }, - "fontSize": { - "value": 20, - "type": "fontSizes" + "H1": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Regular", + "type": "fontWeights" + }, + "lineHeight": { + "value": 108, + "type": "lineHeight" + }, + "fontSize": { + "value": 72, + "type": "fontSizes" + } }, - "lineHeight": { - "value": 30, - "type": "lineHeight" + "H2": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Regular", + "type": "fontWeights" + }, + "lineHeight": { + "value": 96, + "type": "lineHeight" + }, + "fontSize": { + "value": 64, + "type": "fontSizes" + }, + "letterSpacing": { + "value": "-2%", + "type": "letterSpacing" + } }, - "textCase": { - "value": "", - "type": "textCase" - } - }, - "Body -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" + "H3": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "SemiBold", + "type": "fontWeights" + }, + "lineHeight": { + "value": 84, + "type": "lineHeight" + }, + "fontSize": { + "value": 56, + "type": "fontSizes" + }, + "letterSpacing": { + "value": "-2%", + "type": "letterSpacing" + } }, - "fontWeight": { - "value": "Regular", - "type": "fontWeights" + "H4": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "SemiBold", + "type": "fontWeights" + }, + "lineHeight": { + "value": 72, + "type": "lineHeight" + }, + "fontSize": { + "value": 48, + "type": "fontSizes" + }, + "letterSpacing": { + "value": "", + "type": "letterSpacing" + } }, - "fontSize": { - "value": 16, - "type": "fontSizes" + "H5": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "SemiBold", + "type": "fontWeights" + }, + "lineHeight": { + "value": 60, + "type": "lineHeight" + }, + "fontSize": { + "value": 40, + "type": "fontSizes" + }, + "letterSpacing": { + "value": "-2%", + "type": "letterSpacing" + } }, - "lineHeight": { - "value": 24, - "type": "lineHeight" - } - }, - "subtitle -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" + "H6": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Bold", + "type": "fontWeights" + }, + "lineHeight": { + "value": 36, + "type": "lineHeight" + }, + "fontSize": { + "value": 24, + "type": "fontSizes" + }, + "letterSpacing": { + "value": "-2%", + "type": "letterSpacing" + } }, - "fontWeight": { - "value": "SemiBold", - "type": "fontWeights" + "title-bold": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "SemiBold", + "type": "fontWeights" + }, + "fontSize": { + "value": 20, + "type": "fontSizes" + }, + "lineHeight": { + "value": 30, + "type": "lineHeight" + }, + "textCase": { + "value": "", + "type": "textCase" + } }, - "fontSize": { - "value": 14, - "type": "fontSizes" + "title-regular": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Regular", + "type": "fontWeights" + }, + "fontSize": { + "value": 20, + "type": "fontSizes" + }, + "lineHeight": { + "value": 30, + "type": "lineHeight" + }, + "textCase": { + "value": "", + "type": "textCase" + } }, - "lineHeight": { - "value": 20, - "type": "lineHeight" - } - }, - "caption -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" + "body-bold": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "SemiBold", + "type": "fontWeights" + }, + "fontSize": { + "value": 16, + "type": "fontSizes" + }, + "lineHeight": { + "value": 24, + "type": "lineHeight" + } }, - "fontWeight": { - "value": "Regular", - "type": "fontWeights" + "body-regular": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Regular", + "type": "fontWeights" + }, + "fontSize": { + "value": 16, + "type": "fontSizes" + }, + "lineHeight": { + "value": 24, + "type": "lineHeight" + } }, - "fontSize": { - "value": 12, - "type": "fontSizes" + "subtitle-bold": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "SemiBold", + "type": "fontWeights" + }, + "fontSize": { + "value": 14, + "type": "fontSizes" + }, + "lineHeight": { + "value": 20, + "type": "lineHeight" + } }, - "lineHeight": { - "value": 16, - "type": "lineHeight" + "subtitle-regular": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Regular", + "type": "fontWeights" + }, + "fontSize": { + "value": 14, + "type": "fontSizes" + }, + "lineHeight": { + "value": 20, + "type": "lineHeight" + } }, - "textCase": { - "value": "uppercase", - "type": "textCase" + "caption-bold": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "SemiBold", + "type": "fontWeights" + }, + "fontSize": { + "value": 12, + "type": "fontSizes" + }, + "lineHeight": { + "value": 16, + "type": "lineHeight" + }, + "textCase": { + "value": "uppercase", + "type": "textCase" + }, + "letterSpacing": { + "value": "2%", + "type": "letterSpacing" + } }, - "letterSpacing": { - "value": "2%", - "type": "letterSpacing" + "caption-regular": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Regular", + "type": "fontWeights" + }, + "fontSize": { + "value": 12, + "type": "fontSizes" + }, + "lineHeight": { + "value": 16, + "type": "lineHeight" + }, + "textCase": { + "value": "uppercase", + "type": "textCase" + }, + "letterSpacing": { + "value": "2%", + "type": "letterSpacing" + } } } }, diff --git a/mwui-token-farm/input/MW_core.json b/mwui-token-farm/input/MW_core.json index 89eeee15..4a83459f 100644 --- a/mwui-token-farm/input/MW_core.json +++ b/mwui-token-farm/input/MW_core.json @@ -2454,234 +2454,320 @@ } } }, - "Hero -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "Bold", - "type": "fontWeights" - }, - "lineHeight": { - "value": 120, - "type": "lineHeight" - }, - "fontSize": { - "value": 112, - "type": "fontSizes" - } - }, - "H1 - v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "Regular", - "type": "fontWeights" - }, - "lineHeight": { - "value": 108, - "type": "lineHeight" - }, - "fontSize": { - "value": 72, - "type": "fontSizes" - } - }, - "H2 -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "Regular", - "type": "fontWeights" - }, - "lineHeight": { - "value": 96, - "type": "lineHeight" - }, - "fontSize": { - "value": 64, - "type": "fontSizes" - }, - "letterSpacing": { - "value": "-2%", - "type": "letterSpacing" - } - }, - "H3 -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "SemiBold", - "type": "fontWeights" - }, - "lineHeight": { - "value": 84, - "type": "lineHeight" - }, - "fontSize": { - "value": 56, - "type": "fontSizes" - }, - "letterSpacing": { - "value": "-2%", - "type": "letterSpacing" - } - }, - "H4 -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "SemiBold", - "type": "fontWeights" - }, - "lineHeight": { - "value": 72, - "type": "lineHeight" - }, - "fontSize": { - "value": 48, - "type": "fontSizes" - }, - "letterSpacing": { - "value": "", - "type": "letterSpacing" - } - }, - "H5 -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "SemiBold", - "type": "fontWeights" - }, - "lineHeight": { - "value": 60, - "type": "lineHeight" - }, - "fontSize": { - "value": 40, - "type": "fontSizes" - }, - "letterSpacing": { - "value": "-2%", - "type": "letterSpacing" - } - }, - "H6 -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "Bold", - "type": "fontWeights" - }, - "lineHeight": { - "value": 36, - "type": "lineHeight" - }, - "fontSize": { - "value": 24, - "type": "fontSizes" - }, - "letterSpacing": { - "value": "-2%", - "type": "letterSpacing" - } - }, - "title -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "SemiBold", - "type": "fontWeights" + "bold": { + "Hero": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Bold", + "type": "fontWeights" + }, + "lineHeight": { + "value": 120, + "type": "lineHeight" + }, + "fontSize": { + "value": 112, + "type": "fontSizes" + } }, - "fontSize": { - "value": 20, - "type": "fontSizes" + "H1": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Regular", + "type": "fontWeights" + }, + "lineHeight": { + "value": 108, + "type": "lineHeight" + }, + "fontSize": { + "value": 72, + "type": "fontSizes" + } }, - "lineHeight": { - "value": 30, - "type": "lineHeight" + "H2": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Regular", + "type": "fontWeights" + }, + "lineHeight": { + "value": 96, + "type": "lineHeight" + }, + "fontSize": { + "value": 64, + "type": "fontSizes" + }, + "letterSpacing": { + "value": "-2%", + "type": "letterSpacing" + } }, - "textCase": { - "value": "", - "type": "textCase" - } - }, - "Body -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" + "H3": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "SemiBold", + "type": "fontWeights" + }, + "lineHeight": { + "value": 84, + "type": "lineHeight" + }, + "fontSize": { + "value": 56, + "type": "fontSizes" + }, + "letterSpacing": { + "value": "-2%", + "type": "letterSpacing" + } }, - "fontWeight": { - "value": "Regular", - "type": "fontWeights" + "H4": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "SemiBold", + "type": "fontWeights" + }, + "lineHeight": { + "value": 72, + "type": "lineHeight" + }, + "fontSize": { + "value": 48, + "type": "fontSizes" + }, + "letterSpacing": { + "value": "", + "type": "letterSpacing" + } }, - "fontSize": { - "value": 16, - "type": "fontSizes" + "H5": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "SemiBold", + "type": "fontWeights" + }, + "lineHeight": { + "value": 60, + "type": "lineHeight" + }, + "fontSize": { + "value": 40, + "type": "fontSizes" + }, + "letterSpacing": { + "value": "-2%", + "type": "letterSpacing" + } }, - "lineHeight": { - "value": 24, - "type": "lineHeight" - } - }, - "subtitle -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" + "H6": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Bold", + "type": "fontWeights" + }, + "lineHeight": { + "value": 36, + "type": "lineHeight" + }, + "fontSize": { + "value": 24, + "type": "fontSizes" + }, + "letterSpacing": { + "value": "-2%", + "type": "letterSpacing" + } }, - "fontWeight": { - "value": "SemiBold", - "type": "fontWeights" + "title-bold": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "SemiBold", + "type": "fontWeights" + }, + "fontSize": { + "value": 20, + "type": "fontSizes" + }, + "lineHeight": { + "value": 30, + "type": "lineHeight" + }, + "textCase": { + "value": "", + "type": "textCase" + } }, - "fontSize": { - "value": 14, - "type": "fontSizes" + "title-regular": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Regular", + "type": "fontWeights" + }, + "fontSize": { + "value": 20, + "type": "fontSizes" + }, + "lineHeight": { + "value": 30, + "type": "lineHeight" + }, + "textCase": { + "value": "", + "type": "textCase" + } }, - "lineHeight": { - "value": 20, - "type": "lineHeight" - } - }, - "caption -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" + "body-bold": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "SemiBold", + "type": "fontWeights" + }, + "fontSize": { + "value": 16, + "type": "fontSizes" + }, + "lineHeight": { + "value": 24, + "type": "lineHeight" + } }, - "fontWeight": { - "value": "Regular", - "type": "fontWeights" + "body-regular": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Regular", + "type": "fontWeights" + }, + "fontSize": { + "value": 16, + "type": "fontSizes" + }, + "lineHeight": { + "value": 24, + "type": "lineHeight" + } }, - "fontSize": { - "value": 12, - "type": "fontSizes" + "subtitle-bold": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "SemiBold", + "type": "fontWeights" + }, + "fontSize": { + "value": 14, + "type": "fontSizes" + }, + "lineHeight": { + "value": 20, + "type": "lineHeight" + } }, - "lineHeight": { - "value": 16, - "type": "lineHeight" + "subtitle-regular": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Regular", + "type": "fontWeights" + }, + "fontSize": { + "value": 14, + "type": "fontSizes" + }, + "lineHeight": { + "value": 20, + "type": "lineHeight" + } }, - "textCase": { - "value": "uppercase", - "type": "textCase" + "caption-bold": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "SemiBold", + "type": "fontWeights" + }, + "fontSize": { + "value": 12, + "type": "fontSizes" + }, + "lineHeight": { + "value": 16, + "type": "lineHeight" + }, + "textCase": { + "value": "uppercase", + "type": "textCase" + }, + "letterSpacing": { + "value": "2%", + "type": "letterSpacing" + } }, - "letterSpacing": { - "value": "2%", - "type": "letterSpacing" + "caption-regular": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Regular", + "type": "fontWeights" + }, + "fontSize": { + "value": 12, + "type": "fontSizes" + }, + "lineHeight": { + "value": 16, + "type": "lineHeight" + }, + "textCase": { + "value": "uppercase", + "type": "textCase" + }, + "letterSpacing": { + "value": "2%", + "type": "letterSpacing" + } } } }, diff --git a/mwui-token-farm/input/MW_semantic_light.json b/mwui-token-farm/input/MW_semantic_light.json index 89eeee15..4a83459f 100644 --- a/mwui-token-farm/input/MW_semantic_light.json +++ b/mwui-token-farm/input/MW_semantic_light.json @@ -2454,234 +2454,320 @@ } } }, - "Hero -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "Bold", - "type": "fontWeights" - }, - "lineHeight": { - "value": 120, - "type": "lineHeight" - }, - "fontSize": { - "value": 112, - "type": "fontSizes" - } - }, - "H1 - v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "Regular", - "type": "fontWeights" - }, - "lineHeight": { - "value": 108, - "type": "lineHeight" - }, - "fontSize": { - "value": 72, - "type": "fontSizes" - } - }, - "H2 -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "Regular", - "type": "fontWeights" - }, - "lineHeight": { - "value": 96, - "type": "lineHeight" - }, - "fontSize": { - "value": 64, - "type": "fontSizes" - }, - "letterSpacing": { - "value": "-2%", - "type": "letterSpacing" - } - }, - "H3 -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "SemiBold", - "type": "fontWeights" - }, - "lineHeight": { - "value": 84, - "type": "lineHeight" - }, - "fontSize": { - "value": 56, - "type": "fontSizes" - }, - "letterSpacing": { - "value": "-2%", - "type": "letterSpacing" - } - }, - "H4 -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "SemiBold", - "type": "fontWeights" - }, - "lineHeight": { - "value": 72, - "type": "lineHeight" - }, - "fontSize": { - "value": 48, - "type": "fontSizes" - }, - "letterSpacing": { - "value": "", - "type": "letterSpacing" - } - }, - "H5 -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "SemiBold", - "type": "fontWeights" - }, - "lineHeight": { - "value": 60, - "type": "lineHeight" - }, - "fontSize": { - "value": 40, - "type": "fontSizes" - }, - "letterSpacing": { - "value": "-2%", - "type": "letterSpacing" - } - }, - "H6 -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "Bold", - "type": "fontWeights" - }, - "lineHeight": { - "value": 36, - "type": "lineHeight" - }, - "fontSize": { - "value": 24, - "type": "fontSizes" - }, - "letterSpacing": { - "value": "-2%", - "type": "letterSpacing" - } - }, - "title -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" - }, - "fontWeight": { - "value": "SemiBold", - "type": "fontWeights" + "bold": { + "Hero": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Bold", + "type": "fontWeights" + }, + "lineHeight": { + "value": 120, + "type": "lineHeight" + }, + "fontSize": { + "value": 112, + "type": "fontSizes" + } }, - "fontSize": { - "value": 20, - "type": "fontSizes" + "H1": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Regular", + "type": "fontWeights" + }, + "lineHeight": { + "value": 108, + "type": "lineHeight" + }, + "fontSize": { + "value": 72, + "type": "fontSizes" + } }, - "lineHeight": { - "value": 30, - "type": "lineHeight" + "H2": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Regular", + "type": "fontWeights" + }, + "lineHeight": { + "value": 96, + "type": "lineHeight" + }, + "fontSize": { + "value": 64, + "type": "fontSizes" + }, + "letterSpacing": { + "value": "-2%", + "type": "letterSpacing" + } }, - "textCase": { - "value": "", - "type": "textCase" - } - }, - "Body -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" + "H3": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "SemiBold", + "type": "fontWeights" + }, + "lineHeight": { + "value": 84, + "type": "lineHeight" + }, + "fontSize": { + "value": 56, + "type": "fontSizes" + }, + "letterSpacing": { + "value": "-2%", + "type": "letterSpacing" + } }, - "fontWeight": { - "value": "Regular", - "type": "fontWeights" + "H4": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "SemiBold", + "type": "fontWeights" + }, + "lineHeight": { + "value": 72, + "type": "lineHeight" + }, + "fontSize": { + "value": 48, + "type": "fontSizes" + }, + "letterSpacing": { + "value": "", + "type": "letterSpacing" + } }, - "fontSize": { - "value": 16, - "type": "fontSizes" + "H5": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "SemiBold", + "type": "fontWeights" + }, + "lineHeight": { + "value": 60, + "type": "lineHeight" + }, + "fontSize": { + "value": 40, + "type": "fontSizes" + }, + "letterSpacing": { + "value": "-2%", + "type": "letterSpacing" + } }, - "lineHeight": { - "value": 24, - "type": "lineHeight" - } - }, - "subtitle -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" + "H6": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Bold", + "type": "fontWeights" + }, + "lineHeight": { + "value": 36, + "type": "lineHeight" + }, + "fontSize": { + "value": 24, + "type": "fontSizes" + }, + "letterSpacing": { + "value": "-2%", + "type": "letterSpacing" + } }, - "fontWeight": { - "value": "SemiBold", - "type": "fontWeights" + "title-bold": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "SemiBold", + "type": "fontWeights" + }, + "fontSize": { + "value": 20, + "type": "fontSizes" + }, + "lineHeight": { + "value": 30, + "type": "lineHeight" + }, + "textCase": { + "value": "", + "type": "textCase" + } }, - "fontSize": { - "value": 14, - "type": "fontSizes" + "title-regular": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Regular", + "type": "fontWeights" + }, + "fontSize": { + "value": 20, + "type": "fontSizes" + }, + "lineHeight": { + "value": 30, + "type": "lineHeight" + }, + "textCase": { + "value": "", + "type": "textCase" + } }, - "lineHeight": { - "value": 20, - "type": "lineHeight" - } - }, - "caption -v_2": { - "fontFamily": { - "value": "Poppins", - "type": "fontFamilies" + "body-bold": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "SemiBold", + "type": "fontWeights" + }, + "fontSize": { + "value": 16, + "type": "fontSizes" + }, + "lineHeight": { + "value": 24, + "type": "lineHeight" + } }, - "fontWeight": { - "value": "Regular", - "type": "fontWeights" + "body-regular": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Regular", + "type": "fontWeights" + }, + "fontSize": { + "value": 16, + "type": "fontSizes" + }, + "lineHeight": { + "value": 24, + "type": "lineHeight" + } }, - "fontSize": { - "value": 12, - "type": "fontSizes" + "subtitle-bold": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "SemiBold", + "type": "fontWeights" + }, + "fontSize": { + "value": 14, + "type": "fontSizes" + }, + "lineHeight": { + "value": 20, + "type": "lineHeight" + } }, - "lineHeight": { - "value": 16, - "type": "lineHeight" + "subtitle-regular": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Regular", + "type": "fontWeights" + }, + "fontSize": { + "value": 14, + "type": "fontSizes" + }, + "lineHeight": { + "value": 20, + "type": "lineHeight" + } }, - "textCase": { - "value": "uppercase", - "type": "textCase" + "caption-bold": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "SemiBold", + "type": "fontWeights" + }, + "fontSize": { + "value": 12, + "type": "fontSizes" + }, + "lineHeight": { + "value": 16, + "type": "lineHeight" + }, + "textCase": { + "value": "uppercase", + "type": "textCase" + }, + "letterSpacing": { + "value": "2%", + "type": "letterSpacing" + } }, - "letterSpacing": { - "value": "2%", - "type": "letterSpacing" + "caption-regular": { + "fontFamily": { + "value": "Poppins", + "type": "fontFamilies" + }, + "fontWeight": { + "value": "Regular", + "type": "fontWeights" + }, + "fontSize": { + "value": 12, + "type": "fontSizes" + }, + "lineHeight": { + "value": 16, + "type": "lineHeight" + }, + "textCase": { + "value": "uppercase", + "type": "textCase" + }, + "letterSpacing": { + "value": "2%", + "type": "letterSpacing" + } } } }, diff --git a/mwui-token-farm/src/scripts/transforms/index.ts b/mwui-token-farm/src/scripts/transforms/index.ts index 78d00b01..604d6539 100644 --- a/mwui-token-farm/src/scripts/transforms/index.ts +++ b/mwui-token-farm/src/scripts/transforms/index.ts @@ -1,6 +1,6 @@ import { sizePxTransform } from "./size-px"; -import { percentEmTransform } from "./percent-em"; +import { letterSpacingTransform } from "./letter-spacing"; import { appendPxTransform } from "./append-px"; import { fontWeightTransform } from "./font-weight"; -export const TRANSFORMS = [sizePxTransform, percentEmTransform, appendPxTransform, fontWeightTransform]; +export const TRANSFORMS = [sizePxTransform, letterSpacingTransform, appendPxTransform, fontWeightTransform]; diff --git a/mwui-token-farm/src/scripts/transforms/percent-em.ts b/mwui-token-farm/src/scripts/transforms/letter-spacing.ts similarity index 54% rename from mwui-token-farm/src/scripts/transforms/percent-em.ts rename to mwui-token-farm/src/scripts/transforms/letter-spacing.ts index 688df89f..598a1180 100644 --- a/mwui-token-farm/src/scripts/transforms/percent-em.ts +++ b/mwui-token-farm/src/scripts/transforms/letter-spacing.ts @@ -1,11 +1,12 @@ import { Named, Transform, TransformedToken } from "style-dictionary"; -export const percentEmTransform: Named = { +export const letterSpacingTransform: Named = { name: "percent/px", type: "value", matcher: (token: TransformedToken) => ["letterSpacing"].includes(token.type), transformer: prop => { - // You can also modify the value here if you want to convert pixels to ems - return prop.original.value?.replace("%", "px"); + const letterSpacing = prop.original.value?.replace("%", ""); + + return `calc((1em / 100) * ${letterSpacing})`; }, };