How to use Plasma design delivered with Widgets directly in your project

Widgets
1

Hi,

As I followed the instruction on [Widgets Showcase 23.11.2 - Use and configure Plasma]<INTERNAL_LINK> to use Plasma directly in the project, I could not get it displayed correctly as expected since there was something still missing.
After consulting a Widgets’ team member, I have made some changes to make it work as follow.

  1. Create app.styl in src/style and import plasma configure into your project’s stylus file.
@require "@com.mgmtp.a12/plasma-design/dist/stylus/plasma_mixins.styl"
@require "@com.mgmtp.a12/plasma-design/dist/stylus/plasma_base.styl"
@require "@com.mgmtp.a12/plasma-design/dist/stylus/plasma_config.styl"
@require "@com.mgmtp.a12/plasma-design/dist/stylus/plasma_components.styl"
  1. Copy folder assets from node_modules/@com.mgmtp.a12/plasma-design into your src folder.
  2. If you use the Widgets version under 23.14.x, in some Widgets (e.g. Tag, Counter), font family isn’t exposed yet then you will need to import one more file into your project style file, here I am using app.styl to get those components displayed with correct font style of Widgets.
@require "../../node_modules/@com.mgmtp.a12/plasma-design/dist/stylus/scaffolding/plasma_internal.styl"

Hope this tiny trick could help when you use A12 Widgets.