docs: automate system tokens in manifests (#1003)

.changeset/cem-system-tokens.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": patch
+---
+Updated design system token metadata in custom elements manifest

package.json

@@ -98,7 +98,7 @@
       "command": "node scripts/bundle.js"
     },
     "analyze": {
-      "command": "cem analyze",
+      "command": "cem analyze && node scripts/cem-tokens.js",
       "files": [
         "elements/*/demo/*.html",
         "elements/**/*.{ts,js,map}",

scripts/cem-tokens.js

@@ -0,0 +1,37 @@
+import { readFile, writeFile } from 'node:fs/promises';
+import { tokens } from '@rhds/tokens/meta.js';
+
+/** token type names to css syntax data types */
+const syntaxes = new Map(Object.entries({
+  color: '<color>',
+  dimension: '<length>',
+  fontFamily: '<custom-ident>|string+',
+  fontWeight: '<integer>',
+  shadow: '<shadow>',
+}));
+
+/** @return {decl is import('custom-elements-manifest').CustomElementDeclaration} */
+const isCustomElementDeclaration = decl => decl.customElement;
+
+/** file to modify */
+const url = new URL('../custom-elements.json', import.meta.url);
+
+/** @type{import('custom-elements-manifest').Package} */
+const manifest = JSON.parse(await readFile(url, 'utf8'));
+
+for (const mod of manifest.modules) {
+  for (const decl of mod.declarations) {
+    if (isCustomElementDeclaration(decl)) {
+      for (const prop of decl?.cssProperties ?? []) {
+        const token = tokens.get(prop.name);
+        if (token) {
+          prop.description = token.$description;
+          prop.syntax = syntaxes.get(token.$type) ?? token.$type;
+          prop.default = token.$value.toString();
+        }
+      }
+    }
+  }
+}
+
+await writeFile(url, JSON.stringify(manifest, null, 2), 'utf8');