[Docs] Swatches aren't working in docs

[JasonStoltz]

Describe the bug The swatches are not working on https://eui.elastic.co/docs/getting-started/theming/tokens/borders/. They all look identical.

None of the border radiuses, etc. are applied.

Impact and severity It'll likely cause confusion for folks internally looking at our docs

Environment and versions It's only happening in production. Running eui.elastic.co locally does not have this issue.

Minimum reproducible sandbox

N/A

To Reproduce

N/A

Expected behavior N/A

Screenshots

Additional context From Slack:

It's the order in which the styles are applied You can see the 2px is getting overidden. I believe the styles are being applied in the wrong order.

Note the order of the classnames on the DOM node

I just tried to change them in the DOM, but it had no effect. So it might just be how the browser applies these styles based on where they appear in the document? Could be a race condition? Not sure. Also be aware: there are a ton of React errors in the console about the HTML rendered on the server doesn't match the client. That could also account for why it's different locally vs on a prod server

https://react.dev/errors/418?invariant=418

Looking at the code, the most likely culprit, IMO, is the React hydration issue. It's the only clue that would explain differences between local and server.

But I admit I don't know a lot about how Emotion and the browser reconcile differing styles between css and style.

[tkajtoch]

This has something to do with CSS specificity and EuiSwatch not accepting the css prop the right way. The fix would be to properly pass the received css prop to the rendered <button>

[tkajtoch]

When implementing this make sure to test the color picker for style overrides