Theme | New theme: Patterns

[reb-dev]

The PR adds a new theme to the library.

Pattern Theme

When document.body has the class theme-patterns we automatically apply patterns of two types:

• Fill patterns for solid shapes (most cases). Users can customize fill patterns by assigning --vis-pattern${i} to a valid SVG def of a mask element. The default palette looks like:

with the corresponding css variables:

--vis-pattern-fill0: var(--vis-pattern-fill-stripes-diagonal);
--vis-pattern-fill1: var(--vis-pattern-fill-dots);
--vis-pattern-fill2: var(--vis-pattern-fill-stripes-vertical);
--vis-pattern-fill3: var(--vis-pattern-fill-crosshatch);
--vis-pattern-fill4: var(--vis-pattern-fill-waves);
--vis-pattern-fill5: var(--vis-pattern-fill-circles);

• Line patterns for the Line component and when BulletLegend's bulletShape property is set to "line". Users can customize these patterns by assigning --vis-pattern-marker${i} to a valid SVG def of a marker element or --vis-pattern-dasharray${i} to a valid value for the stroke-dasharray property. The default palette looks like:

with the corresponding css variables:

--vis-pattern-marker0: var(--vis-pattern-marker-circle);

--vis-pattern-marker1: var(--vis-pattern-marker-triangle);
--vis-pattern-dasharray1: 9 1;

--vis-pattern-marker2: var(--vis-pattern-marker-diamond);
--vis-pattern-dasharray2: 2;

--vis-pattern-marker3: var(--vis-pattern-marker-arrow);
--vis-pattern-dasharray3: 2 3 8 3;

--vis-pattern-marker4: var(--vis-pattern-marker-square);
--vis-pattern-dasharray4: 6;

--vis-pattern-marker5: var(--vis-pattern-marker-star);
--vis-pattern-dasharray5: 1 6;

Other changes:

• Added a theme selector to the dev demo app (toggle switch for dark/light theme, wand button toggles pattern theme)
• Tweaked Bullet Legend's viewBox sizing method to accommodate the patterns (tweaking the viewBox height instead of the width gives the best results for both types)

[rokotyan]

Overall looks great, the implementation is clean and clear. I've only left a few comments.