Test that `src/diagrams/*/styles.ts` module returns a valid
CSS stylesheet that can be parsed via [stylis][1] and then
becomes a valid CSS that [csstree-validator][2] validates.
We test this for every diagram and for every theme, because
many of the invalid CSS bugs are caused by missing theme vars.
There are some CSS errors that I couldn't easily fix, so I've written
the tests to ignore the following CSS errors:
- 'Unknown property `rx`' (Valid in SVG2 draft and in some browsers)
- 'Unknown property `ry`' (Valid in SVG2 draft and in some browsers)
- 'Unknown property `dy`'
- This doesn't seem to be valid CSS in any SVG version, but maybe
some browsers support it 🤷 I feel like we should probably change
this though.
[1]: https://github.com/thysultan/stylis
[2]: https://github.com/csstree/validator
The `scaleLabelColor` variable in `theme-forest` and `theme-neutral`
was set to `"calculated"`, as it defaults to `this.labelTextColor`
**before** `this.labelTextColor` was set.
Moving the `this.labelTextColor` assignments before `scaleLabelColor`
is calculated fixes this.
Fixes mindmap and timeline invalid CSS in theme forest and neutral.
Define `excludeBkgColor` for `theme-dark` to fix invalid CSS
for gantt diagrams.
All the other themes defined this to '#eeeeee', but I thought that
was a bit too bright in a dark theme, so instead I set it to
`darken(this.sectionBkgColor, 10);`.
`border2` is a theme variable used by the CSS for flowcharts and
user-journey.
I've defined this to default to `tertiaryBorderColor` in theme-base,
as other themes tend to set `border2` to the same value as
`clusterBorder`, which in theme-base is `tertiaryBorderColor`.
Define `arrowheadColor` as `invert(this.background)` in
`theme-base.js`, as it's currently `undefined`, which causes CSS
issues when using `theme-base`.
I've picked `invert(this.background)` so that it matches
the default value of `lineColor`.
Currently, `requirementBorderSize` defaults to `primaryBorderColor`,
which is a color, not a valid SVG `stroke-width`.
Instead, I've made it default to `1`.
Fix an invalid value for the CSS `fill-opacity` value.
Percentage values for `fill-opacity` are only supported in the SVG 2.0
draft, so according to [MDN][1]:
> it is not widely supported yet, […] as a consequence, it is best
> practices [sic] to set opacity with a value in the range `[0-1]`.
[1]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity
The current `personBorder`/`personBkg` theme variables for C4 diagrams
are set to the string `'calculated'`.
However, despite being `'calculated'`, they never seem to change to
anything else, and so become invalid CSS variables.
I've instead changed these to just default to base theme vars,
as that's what they do in [`these-base.js`][1].
[1]: 727bf30824/packages/mermaid/src/themes/theme-base.js (L106-L107)
In #3938, it appears that the marker sizes for pointEnd was
unintentionally changed. This reverts the change in marker size.
It is also possible that the intention was to change the viewBox size
for both start and end, but I doubt this since it makes the arrows
significantly smaller than other markers.
