@genesislcap/foundation-ui 14.368.0 → 14.370.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/custom-elements.json +1391 -1321
  2. package/dist/dts/design-system-provider/design-system-provider.utils.d.ts +97 -2
  3. package/dist/dts/design-system-provider/design-system-provider.utils.d.ts.map +1 -1
  4. package/dist/dts/design-system-provider/types.d.ts +7 -4
  5. package/dist/dts/design-system-provider/types.d.ts.map +1 -1
  6. package/dist/esm/design-system-provider/design-system-provider.utils.js +123 -1
  7. package/package.json +18 -18
package/dist/dts/design-system-provider/design-system-provider.utils.d.ts CHANGED
@@ -1,8 +1,15 @@
1
1
  import { PaletteRGB } from '@microsoft/fast-components';
2
2
  import { ValueConverter } from '@microsoft/fast-element';
3
3
  import { FoundationElement, FoundationElementDefinition } from '@microsoft/fast-foundation';
4
- import type { DesignToken } from '@microsoft/fast-foundation';
5
- import { CustomTokensConfig, DesignTokensConfig } from './types';
4
+ import { DesignToken } from '@microsoft/fast-foundation';
5
+ import { CustomTokensConfig, DesignTokensConfig, TokenValue } from './types';
6
+ /**
7
+ * Observable class for design tokens config that components can subscribe to.
8
+ * @public
9
+ */
10
+ export declare class DesignTokensObservable {
11
+ value: DesignTokensConfig | null;
12
+ }
6
13
  export declare const provideTokens: (tokens: any, values: any, element?: HTMLElement) => void;
7
14
  export declare function designToken<T>(token: DesignToken<T>): (source: FoundationElement, key: string) => void;
8
15
  export declare const swatchConverter: ValueConverter;
@@ -28,5 +35,93 @@ export declare const getExports: (registrationFunction: any) => {
28
35
  defaultConfig: {};
29
36
  };
30
37
  export declare const getTypeRampValue: (baseTypeRamp: string, value: number) => string;
38
+ /**
39
+ * Returns an observable object that components can subscribe to for design tokens config updates.
40
+ * @remarks
41
+ * Components can access the `value` property of the returned object, and FAST will automatically
42
+ * track changes. When `configureDesignSystem()` sets the design tokens, all subscribed components
43
+ * will be notified automatically.
44
+ *
45
+ * The `value` property will be `null` initially, then set to the actual config when
46
+ * `configureDesignSystem()` is called with a design tokens config.
47
+ *
48
+ * @returns An observable object with a `value` property containing the design tokens config (or null)
49
+ * @public
50
+ */
51
+ export declare const designTokensMap: () => DesignTokensObservable;
52
+ /**
53
+ * Selects a custom token value from the custom tokens configuration using a path selector.
54
+ *
55
+ * Navigates through nested token groups using the provided path segments to retrieve
56
+ * a specific token's value. Returns the token object with its `$value` and optional `$type`,
57
+ * or `null` if the path doesn't exist or the custom tokens haven't been configured.
58
+ *
59
+ * @param path - Variable number of string arguments representing the path to the token.
60
+ * Each argument represents a level in the nested token structure.
61
+ * @returns The token object containing `$value` and optional `$type`, or `null` if:
62
+ * - The design tokens config hasn't been configured (designTokensObservable.value is null)
63
+ * - The customTokens property doesn't exist in the config
64
+ * - The path doesn't exist in the token structure
65
+ * - The path points to a token group without a `$value` property
66
+ *
67
+ * @example
68
+ * ```json
69
+ * // Example design-tokens.json structure:
70
+ * {
71
+ * "design_tokens": { ... },
72
+ * "customTokens": {
73
+ * "spacing": {
74
+ * "padding": {
75
+ * "small": { "$value": "8px", "$type": "dimension" },
76
+ * "medium": { "$value": "16px", "$type": "dimension" },
77
+ * "large": { "$value": "24px", "$type": "dimension" }
78
+ * },
79
+ * "margin": {
80
+ * "small": { "$value": "4px", "$type": "dimension" },
81
+ * "medium": { "$value": "12px", "$type": "dimension" }
82
+ * }
83
+ * },
84
+ * "elevation": {
85
+ * "low": { "$value": "0 2px 4px rgba(0,0,0,0.1)", "$type": "shadow" },
86
+ * "medium": { "$value": "0 4px 8px rgba(0,0,0,0.15)", "$type": "shadow" }
87
+ * }
88
+ * }
89
+ * }
90
+ * ```
91
+ *
92
+ * @example
93
+ * ```ts
94
+ * // Select a nested token: spacing.padding.small
95
+ * const token = selectCustomToken("spacing", "padding", "small");
96
+ * // Returns: { $value: "8px", $type: "dimension" }
97
+ * ```
98
+ *
99
+ * @example
100
+ * ```ts
101
+ * // Select a single-level token: elevation.low
102
+ * const token = selectCustomToken("elevation", "low");
103
+ * // Returns: { $value: "0 2px 4px rgba(0,0,0,0.1)", $type: "shadow" }
104
+ * ```
105
+ *
106
+ * @example
107
+ * ```ts
108
+ * // Non-existent path returns null
109
+ * const token = selectCustomToken("spacing", "padding", "xlarge");
110
+ * // Returns: null
111
+ * ```
112
+ *
113
+ * @example
114
+ * ```ts
115
+ * // Returns null when design tokens config hasn't been configured
116
+ * // (before configureDesignSystem is called)
117
+ * const token = selectCustomToken("spacing", "padding", "small");
118
+ * // Returns: null
119
+ * ```
120
+ * @public
121
+ */
122
+ export declare const selectCustomToken: (...path: string[]) => {
123
+ $value: TokenValue;
124
+ $type?: string;
125
+ };
31
126
  export declare const configureDesignSystem: (provider: HTMLElement, config: DesignTokensConfig) => void;
32
127
  //# sourceMappingURL=design-system-provider.utils.d.ts.map
package/dist/dts/design-system-provider/design-system-provider.utils.d.ts.map CHANGED
@@ -1 +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,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"}
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,EA8BX,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAc,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,2BAA2B,EAAE,MAAM,4BAA4B,CAAC;AAC5F,OAAO,EAAE,WAAW,EAAoB,MAAM,4BAA4B,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAoB,kBAAkB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE/F;;;GAGG;AACH,qBAAa,sBAAsB;IACrB,KAAK,EAAE,kBAAkB,GAAG,IAAI,CAAQ;CACrD;AAKD,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;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,QAAO,sBAAgD,CAAC;AAEpF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AACH,eAAO,MAAM,iBAAiB,GAAI,GAAG,MAAM,MAAM,EAAE;YAOQ,UAAU;YAAU,MAAM;CAQpF,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,UAAU,WAAW,EAAE,QAAQ,kBAAkB,SA+FtF,CAAC"}
package/dist/dts/design-system-provider/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- type TokenValue = string | number | boolean;
2
- interface DesignToken {
1
+ export type TokenValue = string | number | boolean;
2
+ export interface DesignToken {
3
3
  $value: TokenValue;
4
4
  $type?: string;
5
5
  }
@@ -7,7 +7,7 @@ interface DesignToken {
7
7
  * Custom tokens can be either a token value or nested token groups.
8
8
  * This allows for arbitrary nesting depth (e.g., spacing.padding.small)
9
9
  */
10
- type CustomTokenValue = DesignToken | {
10
+ export type CustomTokenValue = DesignToken | {
11
11
  [key: string]: CustomTokenValue;
12
12
  };
13
13
  export interface CustomTokensConfig {
@@ -52,6 +52,10 @@ export interface DesignTokensConfig {
52
52
  $value: number;
53
53
  $type: string;
54
54
  };
55
+ baseHeightMultiplier: {
56
+ $value: number;
57
+ $type: string;
58
+ };
55
59
  borderRadius: {
56
60
  $value: number;
57
61
  $type: string;
@@ -70,5 +74,4 @@ export interface DesignTokensConfig {
70
74
  };
71
75
  customTokens?: CustomTokensConfig;
72
76
  }
73
- export {};
74
77
  //# sourceMappingURL=types.d.ts.map
package/dist/dts/design-system-provider/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"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"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/design-system-provider/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnD,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GACxB,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,oBAAoB,EAAE;gBACpB,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 CHANGED
@@ -1,6 +1,22 @@
1
+ import { __decorate } from "tslib";
1
2
  import { TypeRampValues } from '@genesislcap/foundation-utils';
2
3
  import { parseColorHexRGB } from '@microsoft/fast-colors';
3
- import { PaletteRGB, SwatchRGB, accentPalette, controlCornerRadius, designUnit, neutralPalette, baseLayerLuminance, density, strokeWidth, bodyFont, typeRampBaseFontSize, typeRampBaseLineHeight, typeRampMinus1FontSize, typeRampMinus1LineHeight, typeRampMinus2FontSize, typeRampMinus2LineHeight, typeRampPlus1FontSize, typeRampPlus1LineHeight, typeRampPlus2FontSize, typeRampPlus2LineHeight, typeRampPlus3FontSize, typeRampPlus3LineHeight, typeRampPlus4FontSize, typeRampPlus4LineHeight, typeRampPlus5FontSize, typeRampPlus5LineHeight, typeRampPlus6FontSize, typeRampPlus6LineHeight, } from '@microsoft/fast-components';
4
+ import { PaletteRGB, SwatchRGB, accentPalette, controlCornerRadius, designUnit, neutralPalette, baseLayerLuminance, baseHeightMultiplier, density, strokeWidth, bodyFont, typeRampBaseFontSize, typeRampBaseLineHeight, typeRampMinus1FontSize, typeRampMinus1LineHeight, typeRampMinus2FontSize, typeRampMinus2LineHeight, typeRampPlus1FontSize, typeRampPlus1LineHeight, typeRampPlus2FontSize, typeRampPlus2LineHeight, typeRampPlus3FontSize, typeRampPlus3LineHeight, typeRampPlus4FontSize, typeRampPlus4LineHeight, typeRampPlus5FontSize, typeRampPlus5LineHeight, typeRampPlus6FontSize, typeRampPlus6LineHeight, } from '@microsoft/fast-components';
5
+ import { observable } from '@microsoft/fast-element';
6
+ /**
7
+ * Observable class for design tokens config that components can subscribe to.
8
+ * @public
9
+ */
10
+ export class DesignTokensObservable {
11
+ constructor() {
12
+ this.value = null;
13
+ }
14
+ }
15
+ __decorate([
16
+ observable
17
+ ], DesignTokensObservable.prototype, "value", void 0);
18
+ // Singleton instance for components to subscribe to
19
+ const designTokensObservable = new DesignTokensObservable();
4
20
  export const provideTokens = (tokens, values, element) => {
5
21
  const setToken = element
6
22
  ? (token, value) => token.setValueFor(element, value)
@@ -89,6 +105,109 @@ export const getTypeRampValue = (baseTypeRamp, value) => {
89
105
  const typeRampSize = Number(baseFontValue) + value;
90
106
  return typeRampSize + baseUnit;
91
107
  };
108
+ /**
109
+ * Returns an observable object that components can subscribe to for design tokens config updates.
110
+ * @remarks
111
+ * Components can access the `value` property of the returned object, and FAST will automatically
112
+ * track changes. When `configureDesignSystem()` sets the design tokens, all subscribed components
113
+ * will be notified automatically.
114
+ *
115
+ * The `value` property will be `null` initially, then set to the actual config when
116
+ * `configureDesignSystem()` is called with a design tokens config.
117
+ *
118
+ * @returns An observable object with a `value` property containing the design tokens config (or null)
119
+ * @public
120
+ */
121
+ export const designTokensMap = () => designTokensObservable;
122
+ /**
123
+ * Selects a custom token value from the custom tokens configuration using a path selector.
124
+ *
125
+ * Navigates through nested token groups using the provided path segments to retrieve
126
+ * a specific token's value. Returns the token object with its `$value` and optional `$type`,
127
+ * or `null` if the path doesn't exist or the custom tokens haven't been configured.
128
+ *
129
+ * @param path - Variable number of string arguments representing the path to the token.
130
+ * Each argument represents a level in the nested token structure.
131
+ * @returns The token object containing `$value` and optional `$type`, or `null` if:
132
+ * - The design tokens config hasn't been configured (designTokensObservable.value is null)
133
+ * - The customTokens property doesn't exist in the config
134
+ * - The path doesn't exist in the token structure
135
+ * - The path points to a token group without a `$value` property
136
+ *
137
+ * @example
138
+ * ```json
139
+ * // Example design-tokens.json structure:
140
+ * {
141
+ * "design_tokens": { ... },
142
+ * "customTokens": {
143
+ * "spacing": {
144
+ * "padding": {
145
+ * "small": { "$value": "8px", "$type": "dimension" },
146
+ * "medium": { "$value": "16px", "$type": "dimension" },
147
+ * "large": { "$value": "24px", "$type": "dimension" }
148
+ * },
149
+ * "margin": {
150
+ * "small": { "$value": "4px", "$type": "dimension" },
151
+ * "medium": { "$value": "12px", "$type": "dimension" }
152
+ * }
153
+ * },
154
+ * "elevation": {
155
+ * "low": { "$value": "0 2px 4px rgba(0,0,0,0.1)", "$type": "shadow" },
156
+ * "medium": { "$value": "0 4px 8px rgba(0,0,0,0.15)", "$type": "shadow" }
157
+ * }
158
+ * }
159
+ * }
160
+ * ```
161
+ *
162
+ * @example
163
+ * ```ts
164
+ * // Select a nested token: spacing.padding.small
165
+ * const token = selectCustomToken("spacing", "padding", "small");
166
+ * // Returns: { $value: "8px", $type: "dimension" }
167
+ * ```
168
+ *
169
+ * @example
170
+ * ```ts
171
+ * // Select a single-level token: elevation.low
172
+ * const token = selectCustomToken("elevation", "low");
173
+ * // Returns: { $value: "0 2px 4px rgba(0,0,0,0.1)", $type: "shadow" }
174
+ * ```
175
+ *
176
+ * @example
177
+ * ```ts
178
+ * // Non-existent path returns null
179
+ * const token = selectCustomToken("spacing", "padding", "xlarge");
180
+ * // Returns: null
181
+ * ```
182
+ *
183
+ * @example
184
+ * ```ts
185
+ * // Returns null when design tokens config hasn't been configured
186
+ * // (before configureDesignSystem is called)
187
+ * const token = selectCustomToken("spacing", "padding", "small");
188
+ * // Returns: null
189
+ * ```
190
+ * @public
191
+ */
192
+ export const selectCustomToken = (...path) => {
193
+ const config = designTokensObservable.value;
194
+ if (!(config === null || config === void 0 ? void 0 : config.customTokens) || path.length === 0)
195
+ return null;
196
+ function select(xs, ref) {
197
+ const [selector, ...rest] = xs;
198
+ if (rest.length === 0) {
199
+ const token = ref[selector];
200
+ if (token && token.$value)
201
+ return token;
202
+ return null;
203
+ }
204
+ const nextRef = ref[selector];
205
+ if (!nextRef)
206
+ return null;
207
+ return select(rest, nextRef);
208
+ }
209
+ return select(path, config.customTokens);
210
+ };
92
211
  export const configureDesignSystem = (provider, config) => {
93
212
  const designTokens = config.design_tokens;
94
213
  accentPalette.setValueFor(provider, paletteFromHex(designTokens.color.accent.$value));
@@ -96,6 +215,7 @@ export const configureDesignSystem = (provider, config) => {
96
215
  bodyFont.setValueFor(provider, designTokens.fontFamily.bodyFont.$value);
97
216
  baseLayerLuminance.setValueFor(provider, designTokens.mode.luminance.$value);
98
217
  density.setValueFor(provider, designTokens.style.density.$value);
218
+ baseHeightMultiplier.setValueFor(provider, designTokens.style.baseHeightMultiplier.$value);
99
219
  controlCornerRadius.setValueFor(provider, designTokens.style.borderRadius.$value);
100
220
  strokeWidth.setValueFor(provider, designTokens.style.strokeWidth.$value);
101
221
  designUnit.setValueFor(provider, designTokens.space.designUnit.$value);
@@ -123,4 +243,6 @@ export const configureDesignSystem = (provider, config) => {
123
243
  if (config.customTokens) {
124
244
  applyCustomTokens(provider, config.customTokens);
125
245
  }
246
+ // Update the observable value with full config - FAST will automatically notify all subscribers
247
+ designTokensObservable.value = structuredClone(config);
126
248
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@genesislcap/foundation-ui",
3
3
  "description": "Genesis Foundation UI",
4
- "version": "14.368.0",
4
+ "version": "14.370.0",
5
5
  "sideEffects": false,
6
6
  "license": "SEE LICENSE IN license.txt",
7
7
  "main": "dist/esm/index.js",
@@ -83,13 +83,13 @@
83
83
  }
84
84
  },
85
85
  "devDependencies": {
86
- "@genesislcap/foundation-testing": "14.368.0",
87
- "@genesislcap/genx": "14.368.0",
88
- "@genesislcap/rollup-builder": "14.368.0",
89
- "@genesislcap/ts-builder": "14.368.0",
90
- "@genesislcap/uvu-playwright-builder": "14.368.0",
91
- "@genesislcap/vite-builder": "14.368.0",
92
- "@genesislcap/webpack-builder": "14.368.0",
86
+ "@genesislcap/foundation-testing": "14.370.0",
87
+ "@genesislcap/genx": "14.370.0",
88
+ "@genesislcap/rollup-builder": "14.370.0",
89
+ "@genesislcap/ts-builder": "14.370.0",
90
+ "@genesislcap/uvu-playwright-builder": "14.370.0",
91
+ "@genesislcap/vite-builder": "14.370.0",
92
+ "@genesislcap/webpack-builder": "14.370.0",
93
93
  "copyfiles": "^2.4.1"
94
94
  },
95
95
  "dependencies": {
@@ -98,15 +98,15 @@
98
98
  "@fortawesome/free-regular-svg-icons": "^6.2.1",
99
99
  "@fortawesome/free-solid-svg-icons": "^6.2.1",
100
100
  "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
101
- "@genesislcap/expression-builder": "14.368.0",
102
- "@genesislcap/foundation-comms": "14.368.0",
103
- "@genesislcap/foundation-criteria": "14.368.0",
104
- "@genesislcap/foundation-errors": "14.368.0",
105
- "@genesislcap/foundation-events": "14.368.0",
106
- "@genesislcap/foundation-logger": "14.368.0",
107
- "@genesislcap/foundation-notifications": "14.368.0",
108
- "@genesislcap/foundation-user": "14.368.0",
109
- "@genesislcap/foundation-utils": "14.368.0",
101
+ "@genesislcap/expression-builder": "14.370.0",
102
+ "@genesislcap/foundation-comms": "14.370.0",
103
+ "@genesislcap/foundation-criteria": "14.370.0",
104
+ "@genesislcap/foundation-errors": "14.370.0",
105
+ "@genesislcap/foundation-events": "14.370.0",
106
+ "@genesislcap/foundation-logger": "14.370.0",
107
+ "@genesislcap/foundation-notifications": "14.370.0",
108
+ "@genesislcap/foundation-user": "14.370.0",
109
+ "@genesislcap/foundation-utils": "14.370.0",
110
110
  "@microsoft/fast-colors": "5.3.1",
111
111
  "@microsoft/fast-components": "2.30.6",
112
112
  "@microsoft/fast-element": "1.14.0",
@@ -128,5 +128,5 @@
128
128
  "access": "public"
129
129
  },
130
130
  "customElements": "dist/custom-elements.json",
131
- "gitHead": "698eab45797054e3c04d32edb44aecadcbb0095e"
131
+ "gitHead": "85079a1941403b9daee95a1cca7fc14bc5929435"
132
132
  }