@genesislcap/foundation-ui 14.352.0 → 14.353.0

package/dist/custom-elements.json

@@ -14370,6 +14370,40 @@
             }
           ]
         },
+        {
+          "kind": "function",
+          "name": "applyCustomTokens",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "provider",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "description": "The HTML element to set CSS variables on"
+            },
+            {
+              "name": "customTokens",
+              "type": {
+                "text": "CustomTokensConfig"
+              },
+              "description": "The custom tokens object to process"
+            },
+            {
+              "name": "prefix",
+              "default": "''",
+              "type": {
+                "text": "string"
+              },
+              "description": "Internal prefix for nested keys (used during recursion)"
+            }
+          ],
+          "description": "Converts custom tokens to CSS custom properties and sets them on the provider element.\nSupports nested token groups which are flattened into kebab-case CSS variable names.\n\nExample:\n  Input: { spacing: { padding: { small: { $value: \"8px\" } } } }\n  Output: --spacing-padding-small: 8px"
+        },
         {
           "kind": "function",
           "name": "getDefaultConfig",
@@ -14465,6 +14499,14 @@
             "module": "src/design-system-provider/design-system-provider.utils.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "applyCustomTokens",
+          "declaration": {
+            "name": "applyCustomTokens",
+            "module": "src/design-system-provider/design-system-provider.utils.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "getDefaultConfig",

package/dist/dts/design-system-provider/design-system-provider.utils.d.ts

@@ -2,11 +2,24 @@ import { PaletteRGB } from '@microsoft/fast-components';
 import { ValueConverter } from '@microsoft/fast-element';
 import { FoundationElement, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import type { DesignToken } from '@microsoft/fast-foundation';
-import { DesignTokensConfig } from './types';
+import { CustomTokensConfig, DesignTokensConfig } from './types';
 export declare const provideTokens: (tokens: any, values: any, element?: HTMLElement) => void;
 export declare function designToken<T>(token: DesignToken<T>): (source: FoundationElement, key: string) => void;
 export declare const swatchConverter: ValueConverter;
 export declare const paletteFromHex: (hexColor: string) => PaletteRGB;
+/**
+ * Converts custom tokens to CSS custom properties and sets them on the provider element.
+ * Supports nested token groups which are flattened into kebab-case CSS variable names.
+ *
+ * Example:
+ *   Input: { spacing: { padding: { small: { $value: "8px" } } } }
+ *   Output: --spacing-padding-small: 8px
+ *
+ * @param provider - The HTML element to set CSS variables on
+ * @param customTokens - The custom tokens object to process
+ * @param prefix - Internal prefix for nested keys (used during recursion)
+ */
+export declare const applyCustomTokens: (provider: HTMLElement, customTokens: CustomTokensConfig, prefix?: string) => void;
 export declare const getDefaultConfig: (definition: Partial<FoundationElementDefinition>, exclusions?: string[]) => {};
 export declare const getExports: (registrationFunction: any) => {
     shadowOptions: any;

package/dist/dts/design-system-provider/design-system-provider.utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"design-system-provider.utils.d.ts","sourceRoot":"","sources":["../../../src/design-system-provider/design-system-provider.utils.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,UAAU,EA6BX,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,2BAA2B,EAAE,MAAM,4BAA4B,CAAC;AAC5F,OAAO,KAAK,EAAE,WAAW,EAAoB,MAAM,4BAA4B,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,eAAO,MAAM,aAAa,GAAI,WAAM,EAAE,WAAM,EAAE,UAAU,WAAW,SAalE,CAAC;AAEF,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,IAC1C,QAAQ,iBAAiB,EAAE,KAAK,MAAM,UAa/C;AAED,eAAO,MAAM,eAAe,EAAE,cAe7B,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,UAAU,MAAM,eACc,CAAC;AAG9D,eAAO,MAAM,gBAAgB,GAC3B,YAAY,OAAO,CAAC,2BAA2B,CAAC,EAChD,qBAA8B,OAO/B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,yBAAoB;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,cAAc,MAAM,EAAE,OAAO,MAAM,WAOnE,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,UAAU,WAAW,EAAE,QAAQ,kBAAkB,SAuFtF,CAAC"}
+{"version":3,"file":"design-system-provider.utils.d.ts","sourceRoot":"","sources":["../../../src/design-system-provider/design-system-provider.utils.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,UAAU,EA6BX,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,2BAA2B,EAAE,MAAM,4BAA4B,CAAC;AAC5F,OAAO,KAAK,EAAE,WAAW,EAAoB,MAAM,4BAA4B,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAEjE,eAAO,MAAM,aAAa,GAAI,WAAM,EAAE,WAAM,EAAE,UAAU,WAAW,SAalE,CAAC;AAEF,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,IAC1C,QAAQ,iBAAiB,EAAE,KAAK,MAAM,UAa/C;AAED,eAAO,MAAM,eAAe,EAAE,cAe7B,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,UAAU,MAAM,eACc,CAAC;AAE9D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB,GAC5B,UAAU,WAAW,EACrB,cAAc,kBAAkB,EAChC,SAAQ,MAAW,KAClB,IAcF,CAAC;AAGF,eAAO,MAAM,gBAAgB,GAC3B,YAAY,OAAO,CAAC,2BAA2B,CAAC,EAChD,qBAA8B,OAO/B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,yBAAoB;;;;;CAM9C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,cAAc,MAAM,EAAE,OAAO,MAAM,WAOnE,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,UAAU,WAAW,EAAE,QAAQ,kBAAkB,SA4FtF,CAAC"}

package/dist/dts/design-system-provider/types.d.ts

@@ -1,3 +1,18 @@
+type TokenValue = string | number | boolean;
+interface DesignToken {
+    $value: TokenValue;
+    $type?: string;
+}
+/**
+ * Custom tokens can be either a token value or nested token groups.
+ * This allows for arbitrary nesting depth (e.g., spacing.padding.small)
+ */
+type CustomTokenValue = DesignToken | {
+    [key: string]: CustomTokenValue;
+};
+export interface CustomTokensConfig {
+    [key: string]: CustomTokenValue;
+}
 export interface DesignTokensConfig {
     design_tokens: {
         color: {
@@ -53,5 +68,7 @@ export interface DesignTokensConfig {
             };
         };
     };
+    customTokens?: CustomTokensConfig;
 }
+export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/dts/design-system-provider/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/design-system-provider/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IACjC,aAAa,EAAE;QACb,KAAK,EAAE;YACL,MAAM,EAAE;gBACN,MAAM,EAAE,MAAM,CAAC;gBACf,KAAK,EAAE,MAAM,CAAC;aACf,CAAC;YACF,OAAO,EAAE;gBACP,MAAM,EAAE,MAAM,CAAC;gBACf,KAAK,EAAE,MAAM,CAAC;aACf,CAAC;SACH,CAAC;QACF,UAAU,EAAE;YACV,QAAQ,EAAE;gBACR,MAAM,EAAE,MAAM,CAAC;gBACf,KAAK,EAAE,MAAM,CAAC;aACf,CAAC;SACH,CAAC;QACF,UAAU,EAAE;YACV,YAAY,EAAE;gBACZ,MAAM,EAAE,MAAM,CAAC;gBACf,KAAK,EAAE,MAAM,CAAC;aACf,CAAC;YACF,cAAc,EAAE;gBACd,MAAM,EAAE,MAAM,CAAC;gBACf,KAAK,EAAE,MAAM,CAAC;aACf,CAAC;SACH,CAAC;QACF,IAAI,EAAE;YACJ,SAAS,EAAE;gBACT,MAAM,EAAE,MAAM,CAAC;gBACf,KAAK,EAAE,MAAM,CAAC;aACf,CAAC;SACH,CAAC;QACF,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,MAAM,EAAE,MAAM,CAAC;gBACf,KAAK,EAAE,MAAM,CAAC;aACf,CAAC;YACF,YAAY,EAAE;gBACZ,MAAM,EAAE,MAAM,CAAC;gBACf,KAAK,EAAE,MAAM,CAAC;aACf,CAAC;YACF,WAAW,EAAE;gBACX,MAAM,EAAE,MAAM,CAAC;gBACf,KAAK,EAAE,MAAM,CAAC;aACf,CAAC;SACH,CAAC;QACF,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,MAAM,EAAE,MAAM,CAAC;gBACf,KAAK,EAAE,MAAM,CAAC;aACf,CAAC;SACH,CAAC;KACH,CAAC;CACH"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/design-system-provider/types.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5C,UAAU,WAAW;IACnB,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,KAAK,gBAAgB,GACjB,WAAW,GACX;IACE,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,CAAC;CACjC,CAAC;AAEN,MAAM,WAAW,kBAAkB;IACjC,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,CAAC;CACjC;AAED,MAAM,WAAW,kBAAkB;IACjC,aAAa,EAAE;QACb,KAAK,EAAE;YACL,MAAM,EAAE;gBACN,MAAM,EAAE,MAAM,CAAC;gBACf,KAAK,EAAE,MAAM,CAAC;aACf,CAAC;YACF,OAAO,EAAE;gBACP,MAAM,EAAE,MAAM,CAAC;gBACf,KAAK,EAAE,MAAM,CAAC;aACf,CAAC;SACH,CAAC;QACF,UAAU,EAAE;YACV,QAAQ,EAAE;gBACR,MAAM,EAAE,MAAM,CAAC;gBACf,KAAK,EAAE,MAAM,CAAC;aACf,CAAC;SACH,CAAC;QACF,UAAU,EAAE;YACV,YAAY,EAAE;gBACZ,MAAM,EAAE,MAAM,CAAC;gBACf,KAAK,EAAE,MAAM,CAAC;aACf,CAAC;YACF,cAAc,EAAE;gBACd,MAAM,EAAE,MAAM,CAAC;gBACf,KAAK,EAAE,MAAM,CAAC;aACf,CAAC;SACH,CAAC;QACF,IAAI,EAAE;YACJ,SAAS,EAAE;gBACT,MAAM,EAAE,MAAM,CAAC;gBACf,KAAK,EAAE,MAAM,CAAC;aACf,CAAC;SACH,CAAC;QACF,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,MAAM,EAAE,MAAM,CAAC;gBACf,KAAK,EAAE,MAAM,CAAC;aACf,CAAC;YACF,YAAY,EAAE;gBACZ,MAAM,EAAE,MAAM,CAAC;gBACf,KAAK,EAAE,MAAM,CAAC;aACf,CAAC;YACF,WAAW,EAAE;gBACX,MAAM,EAAE,MAAM,CAAC;gBACf,KAAK,EAAE,MAAM,CAAC;aACf,CAAC;SACH,CAAC;QACF,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,MAAM,EAAE,MAAM,CAAC;gBACf,KAAK,EAAE,MAAM,CAAC;aACf,CAAC;SACH,CAAC;KACH,CAAC;IACF,YAAY,CAAC,EAAE,kBAAkB,CAAC;CACnC"}

package/dist/esm/design-system-provider/design-system-provider.utils.js

@@ -40,6 +40,33 @@ export const swatchConverter = {
     },
 };
 export const paletteFromHex = (hexColor) => PaletteRGB.from(SwatchRGB.from(parseColorHexRGB(hexColor)));
+/**
+ * Converts custom tokens to CSS custom properties and sets them on the provider element.
+ * Supports nested token groups which are flattened into kebab-case CSS variable names.
+ *
+ * Example:
+ *   Input: { spacing: { padding: { small: { $value: "8px" } } } }
+ *   Output: --spacing-padding-small: 8px
+ *
+ * @param provider - The HTML element to set CSS variables on
+ * @param customTokens - The custom tokens object to process
+ * @param prefix - Internal prefix for nested keys (used during recursion)
+ */
+export const applyCustomTokens = (provider, customTokens, prefix = '') => {
+    Object.entries(customTokens).forEach(([key, value]) => {
+        const cssVarName = prefix ? `${prefix}-${key}` : key;
+        if (value && typeof value === 'object') {
+            // If it has $value, this is a leaf token - set it as CSS variable
+            if ('$value' in value) {
+                provider.style.setProperty(`--${cssVarName}`, String(value.$value));
+            }
+            else {
+                // Otherwise, it's a token group - recurse into nested structure
+                applyCustomTokens(provider, value, cssVarName);
+            }
+        }
+    });
+};
 const defaultExclusions = ['baseClass', 'baseName', 'shadowOptions', 'styles', 'template'];
 export const getDefaultConfig = (definition, exclusions = defaultExclusions) => {
     const keys = Object.keys(definition).filter((k) => !exclusions.includes(k));
@@ -92,4 +119,8 @@ export const configureDesignSystem = (provider, config) => {
     typeRampPlus5LineHeight.setValueFor(provider, getTypeRampValue(baseLineHeight, TypeRampValues.plusFive));
     typeRampPlus6FontSize.setValueFor(provider, getTypeRampValue(baseFontSize, TypeRampValues.plusSix));
     typeRampPlus6LineHeight.setValueFor(provider, getTypeRampValue(baseLineHeight, TypeRampValues.plusSix));
+    // Apply custom tokens if provided
+    if (config.customTokens) {
+        applyCustomTokens(provider, config.customTokens);
+    }
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-ui",
   "description": "Genesis Foundation UI",
-  "version": "14.352.0",
+  "version": "14.353.0",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -83,13 +83,13 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.352.0",
-    "@genesislcap/genx": "14.352.0",
-    "@genesislcap/rollup-builder": "14.352.0",
-    "@genesislcap/ts-builder": "14.352.0",
-    "@genesislcap/uvu-playwright-builder": "14.352.0",
-    "@genesislcap/vite-builder": "14.352.0",
-    "@genesislcap/webpack-builder": "14.352.0",
+    "@genesislcap/foundation-testing": "14.353.0",
+    "@genesislcap/genx": "14.353.0",
+    "@genesislcap/rollup-builder": "14.353.0",
+    "@genesislcap/ts-builder": "14.353.0",
+    "@genesislcap/uvu-playwright-builder": "14.353.0",
+    "@genesislcap/vite-builder": "14.353.0",
+    "@genesislcap/webpack-builder": "14.353.0",
     "copyfiles": "^2.4.1"
   },
   "dependencies": {
@@ -98,15 +98,15 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
-    "@genesislcap/expression-builder": "14.352.0",
-    "@genesislcap/foundation-comms": "14.352.0",
-    "@genesislcap/foundation-criteria": "14.352.0",
-    "@genesislcap/foundation-errors": "14.352.0",
-    "@genesislcap/foundation-events": "14.352.0",
-    "@genesislcap/foundation-logger": "14.352.0",
-    "@genesislcap/foundation-notifications": "14.352.0",
-    "@genesislcap/foundation-user": "14.352.0",
-    "@genesislcap/foundation-utils": "14.352.0",
+    "@genesislcap/expression-builder": "14.353.0",
+    "@genesislcap/foundation-comms": "14.353.0",
+    "@genesislcap/foundation-criteria": "14.353.0",
+    "@genesislcap/foundation-errors": "14.353.0",
+    "@genesislcap/foundation-events": "14.353.0",
+    "@genesislcap/foundation-logger": "14.353.0",
+    "@genesislcap/foundation-notifications": "14.353.0",
+    "@genesislcap/foundation-user": "14.353.0",
+    "@genesislcap/foundation-utils": "14.353.0",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
@@ -128,5 +128,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "3d8a323fd4989f7862d640f7a66b5c206bb7ebea"
+  "gitHead": "056526f2c5983b54024fe6fcdeb7c6e83e0e5cb3"
 }