You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
As suggested/requested in issue #114, we want a way to programmatically work with design tokens. We are addressing this in PR #142 and are almost at a point where we are merging that in. You can look at a working situation at https://brave-cliff-0c0c93310-142.centralus.azurestaticapps.net/. The Theme switch and the 'Web components handlers' button are styled with the BaseLayerLuminance design token. The other buttons use the BaseHeightMultiplier token.
We are looking for need some confirmation form the community on if our direction would be considered the best solution for this.
The way we have implemented this now is that every design token (about 160 in total) is as an implementation of the generic DesignToken class. This means you would get a BaseFont class, a BaseLayerLuminance class, etc. . The classes are created with a source generator and added to the DI container in the AddFluentUIComponents extension (as transient dependencies) with an (also source generated) extension AddDesignTokens(). This means the design tokens can then by injected and used when needed. Besides being injected, every design token can also be used as a component (to wrap some other components where the design token needs to be applied). Of course there are other pro's and con's to this approach:
Pro
Inject just what is needed
Tiny classes tailored to a specific goal that are source generated so they don't clutter the code
Every design token can also be used as a component (to wrap some other components where the design token needs to be applied)
Con
Lot of classes added to the DI container
An alternative approach would be to keep using the generic DesignToken<> type (a design token can have a string or int or float value) and have a class with const values (DesignTokenNames) for all the standard design token names and a DesignTokens class that contains properties for all these standard design tokens. The DesignTokens class is added to the DI container, so you can inject it whenever it is needed. This has some pro's and con's:
Pro
Discoverability is pretty easy once you have injected the DesignTokens
Con
All design tokens are being created and initialized even if you only need one
Initialization takes a lot of repeated code when newing up the properties
Please take a look at the code as how it is int the PR (#142) at the moment, consider how it would change when the alternative would be implemented and let us know what you think the best solution would look like.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
As suggested/requested in issue #114, we want a way to programmatically work with design tokens. We are addressing this in PR #142 and are almost at a point where we are merging that in. You can look at a working situation at https://brave-cliff-0c0c93310-142.centralus.azurestaticapps.net/. The Theme switch and the 'Web components handlers' button are styled with the
BaseLayerLuminance
design token. The other buttons use theBaseHeightMultiplier
token.We are looking for need some confirmation form the community on if our direction would be considered the best solution for this.
The way we have implemented this now is that every design token (about 160 in total) is as an implementation of the generic
DesignToken
class. This means you would get aBaseFont
class, aBaseLayerLuminance
class, etc. . The classes are created with a source generator and added to the DI container in theAddFluentUIComponents
extension (as transient dependencies) with an (also source generated) extensionAddDesignTokens()
. This means the design tokens can then by injected and used when needed. Besides being injected, every design token can also be used as a component (to wrap some other components where the design token needs to be applied). Of course there are other pro's and con's to this approach:Pro
Con
An alternative approach would be to keep using the generic
DesignToken<>
type (a design token can have a string or int or float value) and have a class withconst
values (DesignTokenNames
) for all the standard design token names and aDesignTokens
class that contains properties for all these standard design tokens. TheDesignTokens
class is added to the DI container, so you can inject it whenever it is needed. This has some pro's and con's:Pro
DesignTokens
Con
Please take a look at the code as how it is int the PR (#142) at the moment, consider how it would change when the alternative would be implemented and let us know what you think the best solution would look like.
Beta Was this translation helpful? Give feedback.
All reactions