Make mermaid diagram colors configurable

oddcelot commented 3 years ago

Just stumbled upon this line in the markdown generator. Are there any overrides for the colors used here? 🤔

Maybe we could make this configurable via stencil.config.ts

Would make for great design cohesion, when using the docs in storybook for example 🙃

Tardigrada777 commented 3 months ago

I'm interested in taking on this issue. Here's a preliminary implementation plan, open to discussion and refinement:

[x] Add a new docs field in the configuration, including a markdown subfield for color customization.
[x] Extend the generateReadmeDocs function to pass the configuration down to the depsToMarkdown function.
[x] Implement the use of custom colors in depsToMarkdown, falling back to defaults if not specified.

My current understanding is that these colors correspond to the nodes representing individual components in the dependency tree diagram:

 content.push(`  style ${cmp.tag} fill:#f9f,stroke:#333,stroke-width:4px`);

Please, let me know if I can start working on it. Thanks.

christian-bromann commented 3 months ago

@Tardigrada777 this sounds great! Let me know if I can support with anything in this endeavor. Join our Discord channel and ping me there 😉

ionic-team / stencil