Merge pull request #72 from evwilkin/chore/68-token-docs

README.md

@@ -20,8 +20,8 @@ We are temporarily pushing the built SCSS files to the repo for ease of access.
 # Docs build
 
 Whenever `yarn build:docs` is executed:
-- the [build-js-for-docs.js](https://github.com/patternfly/design-tokens/blob/main/packages/module/build-js-for-docs.js) script is run to turn the scss files into a javascript object.
-- The javascript object is stored in the [scssAsJson.json](https://github.com/patternfly/design-tokens/blob/main/packages/module/patternfly-docs/scssAsJson.json) file.
-- The code for generating the table containing all tokens is the [tokensTable.js](https://github.com/patternfly/design-tokens/blob/main/packages/module/patternfly-docs/content/tokensTable.js), which consumes the javascript object from scssAsJson.json as data.
-- Ultimately, the markdown file which is rendering the docs is [all-patternfly-tokens.md](https://github.com/patternfly/design-tokens/blob/main/packages/module/patternfly-docs/content/all-patternfly-tokens.md). This markdown file imports the tokensTable.js.
+- the [build:scss](https://github.com/patternfly/design-tokens/blob/main/packages/module/build.js) script is run which transforms tokens pulled from Figma (split into separate token json files in the `/tokens` directory) into combined default and dark theme files (in addition to the .scss files within `build/css`).
+- The two new json files (`token-layers-default.json` and `token-layers-dark.json`) are stored in the [patternfly-docs/content](https://github.com/patternfly/design-tokens/blob/main/packages/module/patternfly-docs/content) directory.
+- The code for generating the table containing all tokens is the [tokensTable.js](https://github.com/patternfly/design-tokens/blob/main/packages/module/patternfly-docs/content/tokensTable.js), which combines the default and dark theme json tokens into one object and consumes it as data.
+- Ultimately, the markdown file which is rendering the docs is [all-patternfly-tokens.md](https://github.com/patternfly/design-tokens/blob/main/packages/module/patternfly-docs/content/all-patternfly-tokens.md). This markdown file imports the tokensTable.js and takes the token theme files as props.
 

packages/module/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,13 +133,17 @@ 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();
   darkExtendedSD.buildAllPlatforms();
   paletteExtendedSD.buildAllPlatforms();
   chartsExtendedSD.buildAllPlatforms();
   chartsDarkExtendedSD.buildAllPlatforms();
+  layersSD.buildAllPlatforms();
+  layersDarkSD.buildAllPlatforms();
 
   console.log('\n============================');
   console.log('\nBuild completed.');

packages/module/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
+          }
+        }
+      ]
+    }
+  }
+}

packages/module/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
+          }
+        }
+      ]
+    }
+  }
+}

packages/module/package.json

@@ -5,14 +5,13 @@
   "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",

packages/module/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}} />