[FEAT] Add the new "2022" theme in the Hacktoberfest demo

[tbouffard]

For the 1st time, use a dedicated font to better match the brand guidelines.

Improve the label bounds in the BPMN diagram, especially for the Hacktoberfest 2022 theme. Use the right wording for the lib name: "BPMN Visualization" --> "bpmn-visualization"

General improvements in theme management

• let configure the default font size
• remove duplication when applying the mxgraph styles and better manage default values
• improve the page styles
  • display nothing prior the page is fully loaded. Previously several titles were displayed while loading.
  • do not duplicate styles and use CSS class instead of inline styles

covers #374

Live environment of examples

https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/d5326c1/demo/hacktoberfest-custom-themes/index.html

Remaining Tasks

• Review colors and gradients
• Clean remaining comments and TODO

Initial theme proposed in commit b4bd015

dark	light

[assynour]

I really like the light theme 👌
Minor comment: is the font size the same as previous years? it seems smaller. I wonder if it's possible to increase it a bit 😣

[tbouffard]

I really like the light theme ok_hand Minor comment: is the font size the same as previous years? it seems smaller. I wonder if it's possible to increase it a bit persevere

Yes the size is smaller, it is currently set to 9 (the default value is 11). I have tried to used larger values but the label went outside the shapes. I will do some extra test to increase the size.

[tbouffard]

@assynour
Please let me know if with 3a0367f, this is better: https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/3a0367f/demo/hacktoberfest-custom-themes/index.html

Previous url for comparison: https://cdn.statically.io/gh/process-analytics/bpmn-visualization-examples/b4bd015/demo/hacktoberfest-custom-themes/index.html

[assynour]

Yes, I think it's better. I opened both versions on my small laptop screen and 3a0367f is more readable