crimson kiln
How can I customize cards style? Maybe lead by tags just like the grouping: https://backstage.io/docs/features/software-templates/configuration#customizing-the-scaffolderpage-with-grouping-and-filtering
I've seen multiple examples with coloring so I think I may be missing something other than customizing the full scaffolder page.
edgy hare
@errant fox you've worked a lot on theming. Any idea how to get multi-colored scaffolder cards like the screenshot?
crimson kiln
A few days w/o a response looks like it's not trivial. I'll definitively share if I go down the customization road
edgy hare
It could be just that nobody has tried all that hard to make this happen. Don't lose hope! 😄
paper adder
Oh, it’s fairly easy just have not had time to follow up. It’s all theme based and in your control there.
paper adder
So those colors are all driven by the pageTheme: https://github.com/backstage/backstage/blob/93f4a773d4decfb0d0a59b835954fb4fe95bf8e4/packages/theme/src/base/pageTheme.ts#L94
There's an example of them in the docs: https://backstage.io/docs/getting-started/app-custom-theme#example-of-a-custom-theme
For the scaffolder cards the code that uses them are is here: https://github.com/backstage/backstage/blob/93f4a773d4decfb0d0a59b835954fb4fe95bf8e4/plugins/scaffolder-react/src/next/components/TemplateCard/CardHeader.tsx#L57-L63
What that means is that for each spec.type you have for your Templates you wante to create a pageTheme for each of them in your custom theme.
Say you had a Template with sepc.type = nodejs then you would need to add nodejs: genPageTheme({ colors: ['red', 'blue'], shape: shapes.wave }), to your pageTheme array in your custom theme.
Hope that helps @crimson kiln ?
crimson kiln
For the scaffolder cards the code that uses them are is here: https://github.com...
Oh this was the bit I was missing then! Thank you very much, @paper adder 🚀
crimson kiln
Very simple to make it work. We now need some design support 😂
