@patternfly/design-tokens 1.10.0 → 1.12.0

package/build/css/tokens-palette.scss

@@ -1,74 +1,74 @@
 
 // Do not edit directly
-// Generated on Wed, 29 May 2024 15:57:12 GMT
+// Generated on Tue, 02 Jul 2024 18:11:52 GMT
 
 @mixin pf-v6-tokens {
-  --pf-t--color--red--70: #5f0000;
-  --pf-t--color--red--60: #a60000;
-  --pf-t--color--red--50: #ee0000;
-  --pf-t--color--red--40: #f56e6e;
-  --pf-t--color--red--30: #f9a8a8;
-  --pf-t--color--red--20: #fbc5c5;
-  --pf-t--color--red--10: #fce3e3;
-  --pf-t--color--purple--70: #21134d;
-  --pf-t--color--purple--60: #3d2785;
-  --pf-t--color--purple--50: #5e40be;
-  --pf-t--color--purple--40: #876fd4;
-  --pf-t--color--purple--30: #b6a6e9;
-  --pf-t--color--purple--20: #d0c5f4;
+  --pf-t--color--black: #000000;
+  --pf-t--color--blue--10: #e0f0ff;
+  --pf-t--color--blue--20: #b9dafc;
+  --pf-t--color--blue--30: #92c5f9;
+  --pf-t--color--blue--40: #4394e5;
+  --pf-t--color--blue--50: #0066cc;
+  --pf-t--color--blue--60: #004d99;
+  --pf-t--color--blue--70: #003366;
+  --pf-t--color--gray--10: #f2f2f2;
+  --pf-t--color--gray--20: #e0e0e0;
+  --pf-t--color--gray--30: #c7c7c7;
+  --pf-t--color--gray--40: #a3a3a3;
+  --pf-t--color--gray--50: #707070;
+  --pf-t--color--gray--60: #4d4d4d;
+  --pf-t--color--gray--70: #383838;
+  --pf-t--color--gray--80: #292929;
+  --pf-t--color--gray--90: #1f1f1f;
+  --pf-t--color--gray--95: #151515;
+  --pf-t--color--green--10: #e9f7df;
+  --pf-t--color--green--20: #d1f1bb;
+  --pf-t--color--green--30: #afdc8f;
+  --pf-t--color--green--40: #87bb62;
+  --pf-t--color--green--50: #63993d;
+  --pf-t--color--green--60: #3d7317;
+  --pf-t--color--green--70: #204d00;
+  --pf-t--color--orange--10: #ffe8cc;
+  --pf-t--color--orange--20: #fccb8f;
+  --pf-t--color--orange--30: #f8ae54;
+  --pf-t--color--orange--40: #f5921b;
+  --pf-t--color--orange--50: #ca6c0f;
+  --pf-t--color--orange--60: #9e4a06;
+  --pf-t--color--orange--70: #732e00;
   --pf-t--color--purple--10: #ece6ff;
-  --pf-t--color--red-orange--70: #731f00;
-  --pf-t--color--red-orange--60: #b1380b;
-  --pf-t--color--red-orange--50: #f0561d;
-  --pf-t--color--red-orange--40: #f4784a;
-  --pf-t--color--red-orange--30: #f89b78;
-  --pf-t--color--red-orange--20: #fbbea8;
+  --pf-t--color--purple--20: #d0c5f4;
+  --pf-t--color--purple--30: #b6a6e9;
+  --pf-t--color--purple--40: #876fd4;
+  --pf-t--color--purple--50: #5e40be;
+  --pf-t--color--purple--60: #3d2785;
+  --pf-t--color--purple--70: #21134d;
+  --pf-t--color--red--10: #fce3e3;
+  --pf-t--color--red--20: #fbc5c5;
+  --pf-t--color--red--30: #f9a8a8;
+  --pf-t--color--red--40: #f56e6e;
+  --pf-t--color--red--50: #ee0000;
+  --pf-t--color--red--60: #a60000;
+  --pf-t--color--red--70: #5f0000;
   --pf-t--color--red-orange--10: #ffe3d9;
-  --pf-t--color--orange--70: #732e00;
-  --pf-t--color--orange--60: #9e4a06;
-  --pf-t--color--orange--50: #ca6c0f;
-  --pf-t--color--orange--40: #f5921b;
-  --pf-t--color--orange--30: #f8ae54;
-  --pf-t--color--orange--20: #fccb8f;
-  --pf-t--color--orange--10: #ffe8cc;
-  --pf-t--color--green--70: #204d00;
-  --pf-t--color--green--60: #3d7317;
-  --pf-t--color--green--50: #63993d;
-  --pf-t--color--green--40: #87bb62;
-  --pf-t--color--green--30: #afdc8f;
-  --pf-t--color--green--20: #d1f1bb;
-  --pf-t--color--green--10: #e9f7df;
-  --pf-t--color--yellow--70: #73480b;
-  --pf-t--color--yellow--60: #96640f;
-  --pf-t--color--yellow--50: #b98412;
-  --pf-t--color--yellow--40: #dca614;
-  --pf-t--color--yellow--30: #ffcc17;
-  --pf-t--color--yellow--20: #ffe072;
-  --pf-t--color--yellow--10: #fff4cc;
-  --pf-t--color--teal--70: #004d4d;
-  --pf-t--color--teal--60: #147878;
-  --pf-t--color--teal--50: #37a3a3;
-  --pf-t--color--teal--40: #63bdbd;
-  --pf-t--color--teal--30: #9ad8d8;
-  --pf-t--color--teal--20: #b9e5e5;
+  --pf-t--color--red-orange--20: #fbbea8;
+  --pf-t--color--red-orange--30: #f89b78;
+  --pf-t--color--red-orange--40: #f4784a;
+  --pf-t--color--red-orange--50: #f0561d;
+  --pf-t--color--red-orange--60: #b1380b;
+  --pf-t--color--red-orange--70: #731f00;
   --pf-t--color--teal--10: #daf2f2;
-  --pf-t--color--blue--70: #003366;
-  --pf-t--color--blue--60: #004d99;
-  --pf-t--color--blue--50: #0066cc;
-  --pf-t--color--blue--40: #4394e5;
-  --pf-t--color--blue--30: #92c5f9;
-  --pf-t--color--blue--20: #b9dafc;
-  --pf-t--color--blue--10: #e0f0ff;
-  --pf-t--color--black: #000000;
-  --pf-t--color--gray--95: #151515;
-  --pf-t--color--gray--90: #1f1f1f;
-  --pf-t--color--gray--80: #292929;
-  --pf-t--color--gray--70: #383838;
-  --pf-t--color--gray--60: #4d4d4d;
-  --pf-t--color--gray--50: #707070;
-  --pf-t--color--gray--40: #a3a3a3;
-  --pf-t--color--gray--30: #c7c7c7;
-  --pf-t--color--gray--20: #e0e0e0;
-  --pf-t--color--gray--10: #f2f2f2;
+  --pf-t--color--teal--20: #b9e5e5;
+  --pf-t--color--teal--30: #9ad8d8;
+  --pf-t--color--teal--40: #63bdbd;
+  --pf-t--color--teal--50: #37a3a3;
+  --pf-t--color--teal--60: #147878;
+  --pf-t--color--teal--70: #004d4d;
   --pf-t--color--white: #ffffff;
+  --pf-t--color--yellow--10: #fff4cc;
+  --pf-t--color--yellow--20: #ffe072;
+  --pf-t--color--yellow--30: #ffcc17;
+  --pf-t--color--yellow--40: #dca614;
+  --pf-t--color--yellow--50: #b98412;
+  --pf-t--color--yellow--60: #96640f;
+  --pf-t--color--yellow--70: #73480b;
 }

package/build.js

@@ -1,8 +1,10 @@
 /* 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 } = StyleDictionary.formatHelpers;
+  const { fileHeader, formattedVariables, sortByName } = StyleDictionary.formatHelpers;
 
   console.log('Build started...');
   console.log('\n============================');
@@ -12,6 +14,8 @@ const build = (selector) => {
     name: 'customFormat',
     formatter: function ({ dictionary, file, options }) {
       const { outputReferences } = options;
+      const alphaSort = (a, b) => sortByName(a, b) * -1;
+      dictionary.allTokens = dictionary.allTokens.sort(alphaSort);
       return (
         fileHeader({ file, commentStyle: 'short' }) +
         `${selector} {\n` +
@@ -26,21 +30,25 @@ 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/ms',
+    name: 'patternfly/global/pxToRem',
     type: 'value',
     matcher: (token) =>
-      token.attributes.type === 'duration' ||
-      token.attributes.type === 'delay',
+      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',
+    matcher: (token) => token.attributes.type === 'duration' || token.attributes.type === 'delay',
     transformer: (token) => `${token.value}ms`
   });
 
@@ -63,6 +71,7 @@ const build = (selector) => {
       'color/css',
       // custom transforms
       'patternfly/global/px',
+      'patternfly/global/pxToRem',
       'patternfly/global/ms',
       'patternfly/doublekebab'
     ]

package/config.default.json

@@ -1,5 +1,6 @@
 {
   "source": ["tokens/default/*.json"],
+  "basePxFontSize": 16,
   "platforms": {
     "css": {
       "transformGroup": "patternfly/css",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/design-tokens",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "description": "Define the design tokens for patternfly design system and component library",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",

package/tokens/dark/base.dark.json

@@ -220,7 +220,7 @@
               "value": "{color.orange.10}"
             }
           },
-          "gold": {
+          "yellow": {
             "100": {
               "type": "color",
               "value": "{color.yellow.30}"
@@ -248,7 +248,7 @@
               "value": "{color.green.10}"
             }
           },
-          "cyan": {
+          "teal": {
             "100": {
               "type": "color",
               "value": "{color.teal.30}"