Skip to content

Commit

Permalink
Merge pull request #74 from srambach/px-to-rem
Browse files Browse the repository at this point in the history 
feat(tokens): convert px values to rem
  • Loading branch information
@srambach
srambach authored Jul 3, 2024
2 parents 09d665d + bce5be4 commit 7ba5759
Show file tree
Hide file tree
Showing 7 changed files with 51 additions and 41 deletions.
19 changes: 14 additions & 5 deletions packages/module/build.js
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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',
Expand All @@ -63,6 +71,7 @@ const build = (selector) => {
'color/css',
// custom transforms
'patternfly/global/px',
'patternfly/global/pxToRem',
'patternfly/global/ms',
'patternfly/doublekebab'
]
Expand Down
2 changes: 1 addition & 1 deletion packages/module/build/css/tokens-charts-dark.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/module/build/css/tokens-charts.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/module/build/css/tokens-dark.scss
View file
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
64 changes: 32 additions & 32 deletions packages/module/build/css/tokens-default.scss
View file
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -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;
Expand All @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion packages/module/build/css/tokens-palette.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
1 change: 1 addition & 0 deletions packages/module/config.default.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"source": ["tokens/default/*.json"],
"basePxFontSize": 16,
"platforms": {
"css": {
"transformGroup": "patternfly/css",
Expand Down

0 comments on commit 7ba5759

Please sign in to comment.