I am looking for some help with using Microsoft FAST with Aurelia v2.
I have read through the information on the Aurelia docs here.
I have read through the information on the Microsoft FAST docs here.
It seems that there have been some changes to the Aurelia interfaces, that now mean that the suggested code for AureliaFastAdapter doesn’t work.
Does anyone have a working example of this that they can share here?
P.S. I am using:
@microsoft/fast-components@2.2.3
aurelia@2.0.0-alpha.12
In the doc from MS FAST, it should be changed from
AppTask.with(IContainer).beforeCreate().call(container => {
to
AppTask.beforeCreate(IContainer, container => {
Maybe we should create a PR to FAST doc
From the code on the FAST site, there is also this error:
Module ‘“aurelia”’ has no exported member ‘IAttrSyntaxTransformer’.
If I change it to IAttrMapper it appears to compile.
The IAttrTransformer has been renamed to IAttrMapper, it’s no longer transforming(mutating) stuff. Only maps.
Also, the code sample uses:
import {
FASTDesignSystemProvider,
FASTCard,
FASTButton
} from ‘@microsoft/fast-components’;
but I think that might have changed to lowercase, e.g.:
fastDesignSystemProvider,
fastCard,
fastButton
Fast recently moved to v2, maybe there’ some changes on that side. It’d be great if you could help correct the doc there. @ben-girardet created the initial version of the doc, he’s been working with it.
Hi Stuart,
As @bigopon said I’ve been working with FAST and I did follow along with the new v2 of FAST. I confirm that the doc is out of date, I can help with fixing this.
Meanwhile I’ve also published a small wrapper that you can simply use and your Aurelia 2 application will be ready to work with FAST. It’s here:
This wrapper will:
And now with FAST you can change the prefix of the components if you need, the wrapper can also work with custom prefix.
Don’t hesitate to reach out to me if you have questions.
Hi @ben-girardet
Thank you for your quick response, and the work you’ve done in creating the wrapper.
For the purpose of testing, I have created a new Aurelia v2 project, using:
npx make aurelia
I used the default Typescript project.
I installed FAST using:
npm install --save @microsoft/fast-components @microsoft/fast-element lodash-es
I installed the Aurelia FAST adapter using:
npm install aurelia-fast-adapter
I made the changes to main.ts to Register the FASTAdapter
I changed the my-app.html to this:
<fast-design-system-provider use-defaults>
<fast-card>
<h2>${message}</h2>
<fast-button appearance="accent" click.trigger="onClick()">Click Me</fast-button>
</fast-card>
</fast-design-system-provider>
However when I run the project, the HTML is rendered without any styles.
I’ve obviously missed a step - what do I need to do to get it to look pretty?
BTW - these are the versions of modules:
“@microsoft/fast-components”: “2.2.3”,
“@microsoft/fast-element”: “1.4.0”,
“aurelia”: “2.0.0-alpha.13”,
“aurelia-fast-adapter”: “1.0.3”,
“lodash-es”: “4.17.21”
Update: I found this code snippet here:
import { DesignSystem } from "@microsoft/fast-foundation"
import { allComponents } from '@microsoft/fast-components';
DesignSystem.getOrCreate().register(
Object.values(allComponents).map(definition => definition())
);
which now correctly shows all the components,
But now I’m stuck with trying to change the colors, e.g. background color of the page. I’m guessing I am missing some basics around how to use FAST, so @ben-girardet - do you have any suggestions about that?
UPDATE: For anyone following this thread, the solution was to add this in the style for the page:
body {
background-color: var(--fill-color);
color: var(--neutral-foreground-rest);
}
And the documentation on the FAST site has now been updated to reflect the current status of the project.
I would need some guidance to customize FAST design components to fit our brand color/styles.
I got started with a simple Aurelia v2 project and followed instructions to add FAST: Aurelia | FAST
I got the basic examples working with ease. What I couldn’t figure out was how to apply custom colors and styles globally, it feels like it should be easy to do.
I can see from the FAST website that there should be options to customize colors and styles:
I found a section from the documentation, where it shows how to change styles for the individual components: Configuring components during registration. But what I would like to do is use the provided fast-components and set my custom global accentBaseColor, border and etc values.
UPDATE: I managed to solve this problem. I couldn’t find an example for changing the default FAST theme accent color or corner radius in the documentation. I did some digging in their Discord and found a good example that demonstrated the steps needed to customize my theme.
I ended up with my main.ts file looking like this:
import Aurelia, { RouterConfiguration } from 'aurelia';
import { FASTAdapter } from 'aurelia-fast-adapter';
import { MyApp } from './my-app';
import {
provideFASTDesignSystem,
allComponents,
accentPalette,
PaletteRGB,
SwatchRGB,
controlCornerRadius,
strokeWidth,
Switch
} from '@microsoft/fast-components';
import { parseColorHexRGB } from '@microsoft/fast-colors';
//customizing theme properties
accentPalette.setValueFor(
document.body,
PaletteRGB.from(SwatchRGB.from(parseColorHexRGB('#D83B01')))
);
controlCornerRadius.setValueFor(document.body, 10);
strokeWidth.setValueFor(document.body, 2);
provideFASTDesignSystem()
.register(
allComponents
);
Aurelia
.register(RouterConfiguration)
.register(FASTAdapter)
.app(MyApp)
.start();
Another thing I got interested in was light/dark mode switching since FAST supports that. I found another example that demonstrates that feature in a plain typescript project. Unfortunately I’m not able to translate that example to my Aurelia app. I’m getting an error: Uncaught TypeError: toggle is null
I’m able to change my app to dark mode with a line of code:
baseLayerLuminance.setValueFor(document.body, StandardLuminance.DarkMode);
Instead of having to statically change the mode it would be great if the app could change it for the user according to their system settings. What would be the ‘Aurelia way’ of solving this?
thats not aurelia specific but can be done with media query matches macos darkmode - How do I detect dark mode using JavaScript? - Stack Overflow