Modernize Gate Figures (AND, OR, XOR)

[Amadeus1791]

This PR proposes a more modern design for the gates of the logic designer:

• Introduced thicker outlines for improved clarity.
• Added a new shared outline color (dark gray) to replace the monotone black color.
• Rounded edges in the AND gate for a softer and modernized appearance.
• Updated colors: The AND gate uses a soft red, the OR gate azure blue and the XOR gate a more vibrant yellow.
• Adjusted offsets, and clipping logic due to the new line width.

Follow-up PRs will be:

• modern design of the reamining components
• adjustment of the corresponding feedback figures

Before:

After:

[ptziegler]

Just a minor thing I noticed while trying it out as well. I get the impression that the edges are sometimes not drawn properly. At 400% zoom and with a thinner outline, for better visualization of the problem:

I assume some form of rounding error is happening here?

[azoitl]

with the latest version with thicker borders this is gone. But I noticed that we have some rounding issues in Draw2d that we definitely will need to look into. Especially which what is going on with swt31.

[ptziegler]

with the latest version with thicker borders this is gone

I'm using 55394a8, which hopefully contains everything up until now.

For comparison, the OR gate is using the "new" implementation and the XOR gate the "old" one. I don't believe that this is a rounding error but simply the filled oval being too big.

You won't notice this with thicker border, but I think this is simply because they camouflage the affected area.

Looking closer, I think this is caused by the oval being offset, due it being shifted along the x coordinate, which is then compensated by reducing the width twice.

Because the width is reduced by two, but the height only reduced by one, both ovals have different geometric shapes, which then causes those visual artifacts.

The thing I don't understand is why those new offsets are better. The oval was perfectly centered before:

And I don't see any noise, even with the thicker border.

Edit:
If it's about the filling and the border intersecting, then I would instead have done something similar to:

r.width -= 3;
r.height -= 3;
r.x += 1;
r.y += 1;
g.fillOval(r);
r.width += 1;
r.height += 1;
r.x -= 1;
r.y -= 1;
g.drawOval(r);

[azoitl]

@ptziegler thx for looking deeper into that. I experienced such issues in another Zest project (not public) so I didn't think it about to carefully. As you showed @ptziegler I was wrong. @Amadeus1791 can you please look into that.