From bce5be4df6cd2e0bd36108195e5a980c4f3e8563 Mon Sep 17 00:00:00 2001 From: Sarah Rambacher Date: Tue, 2 Jul 2024 14:14:17 -0400 Subject: [PATCH] feat(tokens): convert px values to rem --- packages/module/build.js | 19 ++++-- .../module/build/css/tokens-charts-dark.scss | 2 +- packages/module/build/css/tokens-charts.scss | 2 +- packages/module/build/css/tokens-dark.scss | 2 +- packages/module/build/css/tokens-default.scss | 64 +++++++++---------- packages/module/build/css/tokens-palette.scss | 2 +- packages/module/config.default.json | 1 + 7 files changed, 51 insertions(+), 41 deletions(-) diff --git a/packages/module/build.js b/packages/module/build.js index 88495e9..ba60e57 100644 --- a/packages/module/build.js +++ b/packages/module/build.js @@ -1,5 +1,7 @@ /* eslint-disable no-console */ const StyleDictionary = require('style-dictionary'); +const config = require('./config.default.json'); // Adjust the path if necessary +const basePxFontSize = config.basePxFontSize || 16; const build = (selector) => { const { fileHeader, formattedVariables, sortByName } = StyleDictionary.formatHelpers; @@ -28,15 +30,21 @@ const build = (selector) => { name: 'patternfly/global/px', type: 'value', matcher: (token) => - token.attributes.type === 'spacer' || token.attributes.type === 'border' || - token.attributes.type === 'icon' || - token.attributes.type === 'breakpoint' || - (token.attributes.type === 'box-shadow' && token.attributes.item !== 'color') || - (token.attributes.type === 'font' && token.attributes.item === 'size'), + (token.attributes.type === 'box-shadow' && token.attributes.item !== 'color'), transformer: (token) => `${token.value}px` }); + StyleDictionary.registerTransform({ + name: 'patternfly/global/pxToRem', + type: 'value', + matcher: (token) => + token.attributes.type === 'spacer' || + token.attributes.item === 'size' || + token.attributes.type === 'breakpoint', + transformer: (token) => `${token.value / basePxFontSize}rem` + }); + StyleDictionary.registerTransform({ name: 'patternfly/global/ms', type: 'value', @@ -63,6 +71,7 @@ const build = (selector) => { 'color/css', // custom transforms 'patternfly/global/px', + 'patternfly/global/pxToRem', 'patternfly/global/ms', 'patternfly/doublekebab' ] diff --git a/packages/module/build/css/tokens-charts-dark.scss b/packages/module/build/css/tokens-charts-dark.scss index 8e4198f..b0c3f4b 100644 --- a/packages/module/build/css/tokens-charts-dark.scss +++ b/packages/module/build/css/tokens-charts-dark.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Fri, 21 Jun 2024 21:25:19 GMT +// Generated on Tue, 02 Jul 2024 18:11:52 GMT @mixin pf-v6-tokens { --pf-t--chart--global--BorderWidth--lg: 8; diff --git a/packages/module/build/css/tokens-charts.scss b/packages/module/build/css/tokens-charts.scss index c1ea17c..f6f1e29 100644 --- a/packages/module/build/css/tokens-charts.scss +++ b/packages/module/build/css/tokens-charts.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Fri, 21 Jun 2024 21:25:19 GMT +// Generated on Tue, 02 Jul 2024 18:11:52 GMT @mixin pf-v6-tokens { --pf-t--chart--global--BorderWidth--lg: 8; diff --git a/packages/module/build/css/tokens-dark.scss b/packages/module/build/css/tokens-dark.scss index 2aaf346..ae5918d 100644 --- a/packages/module/build/css/tokens-dark.scss +++ b/packages/module/build/css/tokens-dark.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Fri, 21 Jun 2024 21:25:18 GMT +// Generated on Tue, 02 Jul 2024 18:11:52 GMT @mixin pf-v6-tokens { --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000); diff --git a/packages/module/build/css/tokens-default.scss b/packages/module/build/css/tokens-default.scss index 1894fc6..40340e0 100644 --- a/packages/module/build/css/tokens-default.scss +++ b/packages/module/build/css/tokens-default.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Fri, 21 Jun 2024 21:25:18 GMT +// Generated on Tue, 02 Jul 2024 18:11:52 GMT @mixin pf-v6-tokens { --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000); @@ -35,15 +35,15 @@ --pf-t--global--box-shadow--color--100: rgba(0, 0, 0, 0.1600); --pf-t--global--box-shadow--color--200: rgba(0, 0, 0, 0.1200); --pf-t--global--box-shadow--spread--100: 0px; - --pf-t--global--breakpoint--100: 0px; - --pf-t--global--breakpoint--200: 576px; - --pf-t--global--breakpoint--250: 640px; - --pf-t--global--breakpoint--300: 768px; - --pf-t--global--breakpoint--350: 960px; - --pf-t--global--breakpoint--400: 992px; - --pf-t--global--breakpoint--500: 1200px; - --pf-t--global--breakpoint--550: 1280px; - --pf-t--global--breakpoint--600: 1450px; + --pf-t--global--breakpoint--100: 0rem; + --pf-t--global--breakpoint--200: 36rem; + --pf-t--global--breakpoint--250: 40rem; + --pf-t--global--breakpoint--300: 48rem; + --pf-t--global--breakpoint--350: 60rem; + --pf-t--global--breakpoint--400: 62rem; + --pf-t--global--breakpoint--500: 75rem; + --pf-t--global--breakpoint--550: 80rem; + --pf-t--global--breakpoint--600: 90.625rem; --pf-t--global--delay--100: 0ms; --pf-t--global--delay--200: 50ms; --pf-t--global--delay--300: 100ms; @@ -60,32 +60,32 @@ --pf-t--global--font--family--300: Red Hat Mono VF; --pf-t--global--font--line-height--100: 1.2999999523162842; --pf-t--global--font--line-height--200: 1.5; - --pf-t--global--font--size--100: 12px; - --pf-t--global--font--size--200: 14px; - --pf-t--global--font--size--300: 16px; - --pf-t--global--font--size--400: 18px; - --pf-t--global--font--size--500: 20px; - --pf-t--global--font--size--600: 22px; - --pf-t--global--font--size--700: 28px; - --pf-t--global--font--size--800: 36px; + --pf-t--global--font--size--100: 0.75rem; + --pf-t--global--font--size--200: 0.875rem; + --pf-t--global--font--size--300: 1rem; + --pf-t--global--font--size--400: 1.125rem; + --pf-t--global--font--size--500: 1.25rem; + --pf-t--global--font--size--600: 1.375rem; + --pf-t--global--font--size--700: 1.75rem; + --pf-t--global--font--size--800: 2.25rem; --pf-t--global--font--weight--100: 400; --pf-t--global--font--weight--200: 500; --pf-t--global--font--weight--300: 700; --pf-t--global--font--weight--400: 700; - --pf-t--global--icon--size--100: 12px; - --pf-t--global--icon--size--200: 14px; - --pf-t--global--icon--size--250: 16px; - --pf-t--global--icon--size--300: 22px; - --pf-t--global--icon--size--400: 56px; - --pf-t--global--icon--size--500: 96px; - --pf-t--global--spacer--100: 4px; - --pf-t--global--spacer--200: 8px; - --pf-t--global--spacer--300: 16px; - --pf-t--global--spacer--400: 24px; - --pf-t--global--spacer--500: 32px; - --pf-t--global--spacer--600: 48px; - --pf-t--global--spacer--700: 64px; - --pf-t--global--spacer--800: 80px; + --pf-t--global--icon--size--100: 0.75rem; + --pf-t--global--icon--size--200: 0.875rem; + --pf-t--global--icon--size--250: 1rem; + --pf-t--global--icon--size--300: 1.375rem; + --pf-t--global--icon--size--400: 3.5rem; + --pf-t--global--icon--size--500: 6rem; + --pf-t--global--spacer--100: 0.25rem; + --pf-t--global--spacer--200: 0.5rem; + --pf-t--global--spacer--300: 1rem; + --pf-t--global--spacer--400: 1.5rem; + --pf-t--global--spacer--500: 2rem; + --pf-t--global--spacer--600: 3rem; + --pf-t--global--spacer--700: 4rem; + --pf-t--global--spacer--800: 5rem; --pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2); --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1); --pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1); diff --git a/packages/module/build/css/tokens-palette.scss b/packages/module/build/css/tokens-palette.scss index ce374d6..1a96c99 100644 --- a/packages/module/build/css/tokens-palette.scss +++ b/packages/module/build/css/tokens-palette.scss @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Fri, 21 Jun 2024 21:25:19 GMT +// Generated on Tue, 02 Jul 2024 18:11:52 GMT @mixin pf-v6-tokens { --pf-t--color--black: #000000; diff --git a/packages/module/config.default.json b/packages/module/config.default.json index fdf3c61..d77e56e 100644 --- a/packages/module/config.default.json +++ b/packages/module/config.default.json @@ -1,5 +1,6 @@ { "source": ["tokens/default/*.json"], + "basePxFontSize": 16, "platforms": { "css": { "transformGroup": "patternfly/css",