bug: Buttons are transparent with just core CSS styles

[JacobMillward]

Preflight checklist

• [X] I could not find a solution in the existing issues, docs, nor discussions.
• [X] I agree to follow this project's Code of Conduct.
• [X] I have read and am following this repository's Contribution Guidelines.
• [X] This issue affects my Ory Cloud project.
• [X] I have joined the Ory Community Slack.
• [X] I am signed up to the Ory Security Patch Newsletter.

Describe the bug

By default with just the required CSS styles, the button on UserAuthCard has a transparent background. This makes it invisible.

Reproducing the bug

Set up '@ory/elements' with just the core styles (only import @ory/elements/style.css as defined in the docs). Create a Login variant of the UserAuthCard. The button should be visible, and it is not.

Relevant log output

No response

Relevant configuration

No response

Version

0.0.1-beta.3

On which operating system are you observing this issue?

None

In which environment are you deploying?

None

Additional Context

No response

[Benehiko]

Hi @JacobMillward

We use Ory Elements inside the Account Experience and in example projects and did not observe the button as transparent.

Could you share the code of how you are using Ory Elements? Did you wrap the ThemeProvider around the components?

https://github.com/ory/elements/blob/main/src/react-components/provider.tsx#L18

Please see the React example https://github.com/ory/elements/blob/main/examples/react-spa/src/main.tsx#L35