@genesislcap/foundation-ui 14.369.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.
- package/dist/custom-elements.json +70 -0
- package/dist/dts/design-system-provider/design-system-provider.utils.d.ts +97 -2
- package/dist/dts/design-system-provider/design-system-provider.utils.d.ts.map +1 -1
- package/dist/dts/design-system-provider/types.d.ts +7 -4
- package/dist/dts/design-system-provider/types.d.ts.map +1 -1
- package/dist/esm/design-system-provider/design-system-provider.utils.js +123 -1
- package/package.json +18 -18
|
@@ -14319,6 +14319,21 @@
|
|
|
14319
14319
|
"kind": "javascript-module",
|
|
14320
14320
|
"path": "src/design-system-provider/design-system-provider.utils.ts",
|
|
14321
14321
|
"declarations": [
|
|
14322
|
+
{
|
|
14323
|
+
"kind": "class",
|
|
14324
|
+
"description": "Observable class for design tokens config that components can subscribe to.",
|
|
14325
|
+
"name": "DesignTokensObservable",
|
|
14326
|
+
"members": [
|
|
14327
|
+
{
|
|
14328
|
+
"kind": "field",
|
|
14329
|
+
"name": "value",
|
|
14330
|
+
"type": {
|
|
14331
|
+
"text": "DesignTokensConfig | null"
|
|
14332
|
+
},
|
|
14333
|
+
"default": "null"
|
|
14334
|
+
}
|
|
14335
|
+
]
|
|
14336
|
+
},
|
|
14322
14337
|
{
|
|
14323
14338
|
"kind": "function",
|
|
14324
14339
|
"name": "provideTokens",
|
|
@@ -14447,6 +14462,37 @@
|
|
|
14447
14462
|
}
|
|
14448
14463
|
]
|
|
14449
14464
|
},
|
|
14465
|
+
{
|
|
14466
|
+
"kind": "function",
|
|
14467
|
+
"name": "designTokensMap",
|
|
14468
|
+
"return": {
|
|
14469
|
+
"type": {
|
|
14470
|
+
"text": ""
|
|
14471
|
+
}
|
|
14472
|
+
},
|
|
14473
|
+
"description": "Returns an observable object that components can subscribe to for design tokens config updates.",
|
|
14474
|
+
"privacy": "public"
|
|
14475
|
+
},
|
|
14476
|
+
{
|
|
14477
|
+
"kind": "function",
|
|
14478
|
+
"name": "selectCustomToken",
|
|
14479
|
+
"parameters": [
|
|
14480
|
+
{
|
|
14481
|
+
"name": "path",
|
|
14482
|
+
"type": {
|
|
14483
|
+
"text": "string[]"
|
|
14484
|
+
},
|
|
14485
|
+
"description": "Variable number of string arguments representing the path to the token.\nEach argument represents a level in the nested token structure."
|
|
14486
|
+
}
|
|
14487
|
+
],
|
|
14488
|
+
"description": "Selects a custom token value from the custom tokens configuration using a path selector.\n\nNavigates through nested token groups using the provided path segments to retrieve\na specific token's value. Returns the token object with its `$value` and optional `$type`,\nor `null` if the path doesn't exist or the custom tokens haven't been configured.",
|
|
14489
|
+
"return": {
|
|
14490
|
+
"type": {
|
|
14491
|
+
"text": ""
|
|
14492
|
+
}
|
|
14493
|
+
},
|
|
14494
|
+
"privacy": "public"
|
|
14495
|
+
},
|
|
14450
14496
|
{
|
|
14451
14497
|
"kind": "function",
|
|
14452
14498
|
"name": "configureDesignSystem",
|
|
@@ -14467,6 +14513,14 @@
|
|
|
14467
14513
|
}
|
|
14468
14514
|
],
|
|
14469
14515
|
"exports": [
|
|
14516
|
+
{
|
|
14517
|
+
"kind": "js",
|
|
14518
|
+
"name": "DesignTokensObservable",
|
|
14519
|
+
"declaration": {
|
|
14520
|
+
"name": "DesignTokensObservable",
|
|
14521
|
+
"module": "src/design-system-provider/design-system-provider.utils.ts"
|
|
14522
|
+
}
|
|
14523
|
+
},
|
|
14470
14524
|
{
|
|
14471
14525
|
"kind": "js",
|
|
14472
14526
|
"name": "provideTokens",
|
|
@@ -14531,6 +14585,22 @@
|
|
|
14531
14585
|
"module": "src/design-system-provider/design-system-provider.utils.ts"
|
|
14532
14586
|
}
|
|
14533
14587
|
},
|
|
14588
|
+
{
|
|
14589
|
+
"kind": "js",
|
|
14590
|
+
"name": "designTokensMap",
|
|
14591
|
+
"declaration": {
|
|
14592
|
+
"name": "designTokensMap",
|
|
14593
|
+
"module": "src/design-system-provider/design-system-provider.utils.ts"
|
|
14594
|
+
}
|
|
14595
|
+
},
|
|
14596
|
+
{
|
|
14597
|
+
"kind": "js",
|
|
14598
|
+
"name": "selectCustomToken",
|
|
14599
|
+
"declaration": {
|
|
14600
|
+
"name": "selectCustomToken",
|
|
14601
|
+
"module": "src/design-system-provider/design-system-provider.utils.ts"
|
|
14602
|
+
}
|
|
14603
|
+
},
|
|
14534
14604
|
{
|
|
14535
14605
|
"kind": "js",
|
|
14536
14606
|
"name": "configureDesignSystem",
|
|
@@ -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
|
|
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
|
|
@@ -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,
|
|
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"}
|
|
@@ -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
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/design-system-provider/types.ts"],"names":[],"mappings":"AAAA,
|
|
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"}
|
|
@@ -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.
|
|
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.
|
|
87
|
-
"@genesislcap/genx": "14.
|
|
88
|
-
"@genesislcap/rollup-builder": "14.
|
|
89
|
-
"@genesislcap/ts-builder": "14.
|
|
90
|
-
"@genesislcap/uvu-playwright-builder": "14.
|
|
91
|
-
"@genesislcap/vite-builder": "14.
|
|
92
|
-
"@genesislcap/webpack-builder": "14.
|
|
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.
|
|
102
|
-
"@genesislcap/foundation-comms": "14.
|
|
103
|
-
"@genesislcap/foundation-criteria": "14.
|
|
104
|
-
"@genesislcap/foundation-errors": "14.
|
|
105
|
-
"@genesislcap/foundation-events": "14.
|
|
106
|
-
"@genesislcap/foundation-logger": "14.
|
|
107
|
-
"@genesislcap/foundation-notifications": "14.
|
|
108
|
-
"@genesislcap/foundation-user": "14.
|
|
109
|
-
"@genesislcap/foundation-utils": "14.
|
|
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": "
|
|
131
|
+
"gitHead": "85079a1941403b9daee95a1cca7fc14bc5929435"
|
|
132
132
|
}
|