Text shadow makes other text colors appears fuzzy

[Keith Mitchell]

When specifying a color other than the default for the Text component, the edges of the text become fuzzy and appears bold

For example, here's what the default text color looks like:

<Text
    x={yTip[0]}
    y={yTip[1]}
    attach="e"
    attachDistance={25}
>
    Y
</Text>

And here's how it appears with a different color specified:

<Text
    x={yTip[0]}
    y={yTip[1]}
    attach="e"
    attachDistance={25}
    color={Theme.green}
>
    Y
</Text>

This happens because when a custom color is set, the Text component uses that color as its stroke instead of using the background color (line https://github.com/stevenpetryk/mafs/blob/7d86d79c916606c6ea8e48dad7fce69b1e5377b4/src/display/Text.tsx#LL66). However this causes the size of the text to inflate and become fuzzy because of the simulated shadow effect from the mafs-shadow class not playing nice with colours other than white.

Here's how the above example looks like with the stroke set back to mafs-bg:

Proposed solution: Update Text to still use the mafs-bg color as the text stroke, even when a custom color is specified.

[Steven Petryk]

Ah, good catch. Will cut a release to fix this right now.

[Steven Petryk]

[Keith Mitchell]

Cheers!