@patternfly/design-tokens 1.12.0 → 1.13.0

package/build/css/tokens-charts-dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 02 Jul 2024 18:11:52 GMT
+// Generated on Thu, 18 Jul 2024 22:27:54 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--chart--global--BorderWidth--lg: 8;

package/build/css/tokens-charts.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 02 Jul 2024 18:11:52 GMT
+// Generated on Thu, 18 Jul 2024 22:27:54 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--chart--global--BorderWidth--lg: 8;

package/build/css/tokens-dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 02 Jul 2024 18:11:52 GMT
+// Generated on Thu, 18 Jul 2024 22:27:54 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);

package/build/css/tokens-default.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 02 Jul 2024 18:11:52 GMT
+// Generated on Thu, 18 Jul 2024 22:27:54 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -55,9 +55,9 @@
   --pf-t--global--duration--50: 50ms;
   --pf-t--global--duration--500: 500ms;
   --pf-t--global--duration--600: 600ms;
-  --pf-t--global--font--family--100: Red Hat Text VF;
-  --pf-t--global--font--family--200: Red Hat Display VF;
-  --pf-t--global--font--family--300: Red Hat Mono VF;
+  --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
+  --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
+  --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace;
   --pf-t--global--font--line-height--100: 1.2999999523162842;
   --pf-t--global--font--line-height--200: 1.5;
   --pf-t--global--font--size--100: 0.75rem;
@@ -86,6 +86,10 @@
   --pf-t--global--spacer--600: 3rem;
   --pf-t--global--spacer--700: 4rem;
   --pf-t--global--spacer--800: 5rem;
+  --pf-t--global--text-decoration--line--100: none;
+  --pf-t--global--text-decoration--line--200: underline;
+  --pf-t--global--text-decoration--style--100: solid;
+  --pf-t--global--text-decoration--style--200: dashed;
   --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);
@@ -236,8 +240,8 @@
   --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
   --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
   --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
-  --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--100);
-  --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--200);
+  --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
+  --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
   --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600);
   --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700);
   --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800);
@@ -246,8 +250,10 @@
   --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200);
   --pf-t--global--font--size--xl: var(--pf-t--global--font--size--500);
   --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100);
-  --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--100);
-  --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--300);
+  --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200);
+  --pf-t--global--font--weight--body--default: var(--pf-t--global--font--weight--100);
+  --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400);
+  --pf-t--global--font--weight--heading--default: var(--pf-t--global--font--weight--300);
   --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
   --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
   --pf-t--global--icon--color--300: var(--pf-t--color--white);
@@ -286,6 +292,18 @@
   --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
   --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
   --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
+  --pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200);
+  --pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200);
+  --pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200);
+  --pf-t--global--text-decoration--editable-text--style--hover: var(--pf-t--global--text-decoration--style--200);
+  --pf-t--global--text-decoration--help-text--line--default: var(--pf-t--global--text-decoration--line--200);
+  --pf-t--global--text-decoration--help-text--line--hover: var(--pf-t--global--text-decoration--line--200);
+  --pf-t--global--text-decoration--help-text--style--default: var(--pf-t--global--text-decoration--style--200);
+  --pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200);
+  --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--line--200);
+  --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--line--200);
+  --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--100);
+  --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--100);
   --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600);
   --pf-t--global--z-index--lg: var(--pf-t--global--z-index--400);
   --pf-t--global--z-index--md: var(--pf-t--global--z-index--300);
@@ -435,10 +453,9 @@
   --pf-t--global--motion--duration--slide-out--short: var(--pf-t--global--motion--duration--lg);
   --pf-t--global--spacer--action--horizontal--compact: var(--pf-t--global--spacer--md);
   --pf-t--global--spacer--action--horizontal--default: var(--pf-t--global--spacer--lg);
-  --pf-t--global--spacer--action--horizontal--plain: var(--pf-t--global--spacer--sm);
+  --pf-t--global--spacer--action--horizontal--plain--compact: var(--pf-t--global--spacer--xs);
+  --pf-t--global--spacer--action--horizontal--plain--default: var(--pf-t--global--spacer--sm);
   --pf-t--global--spacer--action--horizontal--spacious: var(--pf-t--global--spacer--xl);
-  --pf-t--global--spacer--action--vertical--compact: var(--pf-t--global--spacer--xs);
-  --pf-t--global--spacer--action--vertical--spacious: var(--pf-t--global--spacer--md);
   --pf-t--global--spacer--control--horizontal--compact: var(--pf-t--global--spacer--sm);
   --pf-t--global--spacer--control--horizontal--default: var(--pf-t--global--spacer--md);
   --pf-t--global--spacer--control--horizontal--plain: var(--pf-t--global--spacer--sm);
@@ -446,6 +463,7 @@
   --pf-t--global--spacer--control--vertical--compact: var(--pf-t--global--spacer--xs);
   --pf-t--global--spacer--control--vertical--default: var(--pf-t--global--spacer--sm);
   --pf-t--global--spacer--control--vertical--plain: var(--pf-t--global--spacer--sm);
+  --pf-t--global--spacer--control--vertical--spacious: var(--pf-t--global--spacer--md);
   --pf-t--global--spacer--gap--action-to-action--default: var(--pf-t--global--spacer--md);
   --pf-t--global--spacer--gap--action-to-action--plain: var(--pf-t--global--spacer--xs);
   --pf-t--global--spacer--gap--control-to-control--default: var(--pf-t--global--spacer--xs);
@@ -454,6 +472,8 @@
   --pf-t--global--spacer--gap--group-to-group--horizontal: var(--pf-t--global--spacer--2xl);
   --pf-t--global--spacer--gap--group-to-group--vertical: var(--pf-t--global--spacer--lg);
   --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm);
+  --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md);
+  --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg);
   --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
   --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
   --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--100);
@@ -467,6 +487,8 @@
   --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
   --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
   --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
+  --pf-t--global--text-decoration--offset--default: var(--pf-t--global--spacer--xs);
+  --pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular);
   --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
   --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
   --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);

package/build/css/tokens-palette.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 02 Jul 2024 18:11:52 GMT
+// Generated on Thu, 18 Jul 2024 22:27:54 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--color--black: #000000;

package/build.js

@@ -2,6 +2,21 @@
 const StyleDictionary = require('style-dictionary');
 const config = require('./config.default.json'); // Adjust the path if necessary
 const basePxFontSize = config.basePxFontSize || 16;
+const getTokenLayer = ({ filePath }) => {
+  if (filePath.includes('semantic.json')) return ['semantic', 'colors'];
+  if (filePath.includes('semantic.dark.json')) return ['semantic', 'colors'];
+  if (filePath.includes('semantic.dimension.json')) return ['semantic', 'dimension'];
+  if (filePath.includes('semantic.motion.json')) return ['semantic', 'motion'];
+  if (filePath.includes('base.json')) return ['base', 'colors'];
+  if (filePath.includes('base.dark.json')) return ['base', 'colors'];
+  if (filePath.includes('base.dimension.json')) return ['base', 'dimension'];
+  if (filePath.includes('base.motion.json')) return ['base', 'motion'];
+  if (filePath.includes('chart')) return ['chart'];
+  if (filePath.includes('palette.color.json')) return ['palette'];
+  return ['palette'];
+};
+// returns subdirectory within 'tokens' directory (ex: default, dark, etc)
+const getTheme = ({ filePath }) => /tokens\/([^\/]*)\//gm.exec(filePath)[1];
 
 const build = (selector) => {
   const { fileHeader, formattedVariables, sortByName } = StyleDictionary.formatHelpers;
@@ -25,6 +40,43 @@ const build = (selector) => {
     }
   });
 
+  StyleDictionary.registerFormat({
+    name: 'json/flat-categories',
+    formatter: function (dictionary) {
+      let tokens = {
+        semantic: {
+          colors: {},
+          dimension: {},
+          motion: {}
+        },
+        base: {
+          colors: {},
+          dimension: {},
+          motion: {}
+        },
+        palette: {},
+        chart: {}
+      };
+      dictionary.allTokens.map((token) => {
+        // determine token type based on tokens filepath
+        const theme = getTheme(token);
+        const layer = getTokenLayer(token);
+        let insertLayer = tokens;
+        while (layer.length) {
+          insertLayer = insertLayer[layer.shift()];
+        }
+        // assign each token object to token.name
+        insertLayer[token.name] = {};
+        insertLayer[token.name][theme] = token;
+        // attach references to build token chain
+        if (dictionary.usesReference(token.original.value)) {
+          token.references = dictionary.getReferences(token.original.value);
+        }
+      });
+      return JSON.stringify(tokens, null, 2);
+    }
+  });
+
   // Register custom transforms
   StyleDictionary.registerTransform({
     name: 'patternfly/global/px',
@@ -39,9 +91,7 @@ const build = (selector) => {
     name: 'patternfly/global/pxToRem',
     type: 'value',
     matcher: (token) =>
-      token.attributes.type === 'spacer' ||
-      token.attributes.item === 'size' ||
-      token.attributes.type === 'breakpoint',
+      token.attributes.type === 'spacer' || token.attributes.item === 'size' || token.attributes.type === 'breakpoint',
     transformer: (token) => `${token.value / basePxFontSize}rem`
   });
 
@@ -83,6 +133,8 @@ const build = (selector) => {
   const paletteExtendedSD = StyleDictionary.extend(__dirname + '/config.palette-colors.json');
   const chartsExtendedSD = StyleDictionary.extend(__dirname + '/config.charts.json');
   const chartsDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.charts.dark.json');
+  const layersSD = StyleDictionary.extend(__dirname + '/config.layers.json');
+  const layersDarkSD = StyleDictionary.extend(__dirname + '/config.layers.dark.json');
 
   // Build all
   defaultExtendedSD.buildAllPlatforms();
@@ -90,6 +142,8 @@ const build = (selector) => {
   paletteExtendedSD.buildAllPlatforms();
   chartsExtendedSD.buildAllPlatforms();
   chartsDarkExtendedSD.buildAllPlatforms();
+  layersSD.buildAllPlatforms();
+  layersDarkSD.buildAllPlatforms();
 
   console.log('\n============================');
   console.log('\nBuild completed.');

package/cli.js

@@ -1,5 +1,5 @@
 const { program } = require('commander');
-const {build} = require('./build');
+const { build } = require('./build');
 
 program
   .version(require('./package.json').version)

package/config.layers.dark.json

@@ -0,0 +1,20 @@
+{
+  "include": ["tokens/default/*.json"],
+  "source": ["tokens/dark/*.json"],
+  "platforms": {
+    "json/default": {
+      "transformGroup": "patternfly/css",
+      "buildPath": "patternfly-docs/content/",
+      "prefix": "pf-t",
+      "files": [
+        {
+          "destination": "token-layers-dark.json",
+          "format": "json/flat-categories",
+          "options": {
+            "outputReferences": false
+          }
+        }
+      ]
+    }
+  }
+}

package/config.layers.json

@@ -0,0 +1,19 @@
+{
+  "source": ["tokens/default/*.json"],
+  "platforms": {
+    "json/default": {
+      "transformGroup": "patternfly/css",
+      "buildPath": "patternfly-docs/content/",
+      "prefix": "pf-t",
+      "files": [
+        {
+          "destination": "token-layers-default.json",
+          "format": "json/flat-categories",
+          "options": {
+            "outputReferences": false
+          }
+        }
+      ]
+    }
+  }
+}

package/package.json

@@ -1,18 +1,17 @@
 {
   "name": "@patternfly/design-tokens",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "Define the design tokens for patternfly design system and component library",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
   "scripts": {
-    "build": "yarn build:js-from-scss",
+    "build": "yarn build:scss",
     "build:fed:packages": "node generate-fed-package-json.js",
     "build:scss": "node ./cli.js",
-    "build:js-from-scss": "node ./build-js-for-docs.js",
     "build:plugin": "webpack",
     "clean": "rimraf dist",
     "docs:develop": "pf-docs-framework start",
-    "docs:build": "yarn build:js-from-scss && pf-docs-framework build all --output public",
+    "docs:build": "yarn build:scss && pf-docs-framework build all --output public",
     "docs:serve": "pf-docs-framework serve public --port 5000",
     "docs:screenshots": "pf-docs-framework screenshots --urlPrefix http://localhost:5000",
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config",
@@ -32,7 +31,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0-alpha.36",
+    "@patternfly/react-core": "6.0.0-alpha.94",
     "commander": "^12.0.0"
   },
   "peerDependencies": {
@@ -41,11 +40,11 @@
   },
   "devDependencies": {
     "@figma/plugin-typings": "^1.95.0",
-    "@patternfly/documentation-framework": "6.0.0-alpha.12",
-    "@patternfly/patternfly": "6.0.0-alpha.91",
+    "@patternfly/documentation-framework": "^6.0.0-alpha.66",
+    "@patternfly/patternfly": "6.0.0-alpha.205",
     "@patternfly/patternfly-a11y": "^4.3.1",
-    "@patternfly/react-code-editor": "6.0.0-alpha.36",
-    "@patternfly/react-table": "6.0.0-alpha.36",
+    "@patternfly/react-code-editor": "6.0.0-alpha.94",
+    "@patternfly/react-table": "6.0.0-alpha.95",
     "css-loader": "^7.1.2",
     "html-inline-script-webpack-plugin": "^3.2.1",
     "html-webpack-plugin": "^5.6.0",

package/patternfly-docs/content/all-patternfly-tokens.md

@@ -3,7 +3,8 @@ section: tokens
 id: All PatternFly tokens
 ---
 
-
+import * as defaultTokens from './token-layers-default.json';
+import * as darkTokens from './token-layers-dark.json';
 import { TokensTable } from './tokensTable.js';
 
-<TokensTable/>
+<TokensTable tokenJson={{default: defaultTokens, dark: darkTokens}} />