Text shadow makes other text colors appears fuzzy
xkisu opened this issue · comments
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.
Ah, good catch. Will cut a release to fix this right now.