style(token-studio): refactor component generator

libs/core/scripts/style-dictionary/filters/component.mjs

@@ -1,11 +1,9 @@
+import fs from 'fs-extra';
+
+const basePath = `src/global/styles/tokens`;
+
 // filters tokens by themable and from which tokenset they originate
 // must match per component name, in this repository we currently only have "button"
 export const componentFilter =
-  (cat, themeable = false) =>
-    (token) => {
-      const tokenThemable = Boolean(token.attributes.themeable);
-
-      return (
-        themeable === tokenThemable && token.filePath.endsWith(`${cat}.json`)
-      );
-  };
+  (cat) =>
+    (token) => token.filePath.startsWith(`${basePath}/components/${cat}.json`);

libs/core/scripts/style-dictionary/transform.mjs

@@ -3,7 +3,6 @@ import {generateCoreFiles, generateComponentFiles, generateSemanticFiles } from
 import StyleDictionary from 'style-dictionary';
 import { getReferences, usesReferences } from "style-dictionary/utils";
 import { promises } from 'fs';
-import { coreFilter } from './filters/index.mjs';
 
 register(StyleDictionary, {
   /* options here if needed */
@@ -13,6 +12,7 @@ const basePath = `src/global/styles/tokens`;
 
 const componentNames = [
   "avatar",
+  "chip",
 ];
 
 async function run() {
@@ -25,8 +25,9 @@ async function run() {
 				.reduce((acc, sets) => [...acc, ...sets], [])
 		),
 	];
+
 	const themeableSets = tokenSets.filter(set => {
-		return !Object.values(themes).every(sets => sets.includes(set));
+    return !Object.values(themes).every(sets => sets.includes(set));
 	});
 
   const configs = Object.entries(themes).map(([theme, tokensets]) => ({

libs/core/src/global/styles/tokens/$themes.json

@@ -22,8 +22,8 @@
       "base/core": "enabled",
       "base/semantic": "enabled",
       "components/avatar": "enabled",
-      "brand/kajabi_products": "enabled",
-      "components/chip": "disabled"
+      "components/chip": "enabled",
+      "brand/kajabi_products": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:175:2717",
     "$figmaModeId": "175:46",
@@ -325,9 +325,9 @@
       "base/core": "enabled",
       "base/semantic": "enabled",
       "components/avatar": "enabled",
+      "components/chip": "enabled",
       "brand/kajabi_products": "enabled",
-      "brand/kajabi_products/light": "enabled",
-      "components/chip": "disabled"
+      "brand/kajabi_products/light": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:208:607",
     "$figmaModeId": "208:4",
@@ -700,9 +700,9 @@
       "base/core": "enabled",
       "base/semantic": "enabled",
       "components/avatar": "enabled",
+      "components/chip": "enabled",
       "brand/kajabi_products": "enabled",
-      "brand/kajabi_products/dark": "enabled",
-      "components/chip": "disabled"
+      "brand/kajabi_products/dark": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:208:607",
     "$figmaModeId": "208:5",
@@ -986,4 +986,4 @@
     },
     "group": "kajabi_products"
   }
-]
+]