[Question] Root html element font-size affects library offsets calculated in rem

[socaseinpoint]

Current Behavior

My web application has an overridden font size on HTML element, this affects the paddings and font size inside the shadow dom created by the library since the calculation of the size of the indents is specified through rem, which always relies on the value on the root element.

The library has the ability to override styles via css variables, so i can fix brocken paddings and font size by using em instead of rem, but there is some values that has no css variables. Can you provide more css variables in this library or suggest any other fix for that problem?

Expected Behavior

No response

Steps To Reproduce

No response

What package is effected by this issue?

@web3-onboard/react

Is this a build or a runtime issue?

Runtime, N/A

Package Version

2.9.0

Node Version

No response

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Anything else?

No response

Sanity Check

• If this is a build issue, I have included my build config. If this is a runtime issue, I have included reproduction steps and/or a Minimal, Reproducible Example.

[leightkt]

@socaseinpoint Can you provide a code pen or link to a repo that demos the issue you're having?

[socaseinpoint]

https://github.com/socaseinpoint/demo_block_native_rem demo the issue

[taylorjdawson]

@socaseinpoint Is this what you are looking for? Let us know which styles there are missing that you need for you application.

[socaseinpoint]

this There are many css properties that are defined in rem, and that I can't customize by passing css-custom-properties

Examples:
[packages/co](padding: 1rem;)
https://github.com/blocknative/web3-onboard/blob/43c7d05e25baeeb7343cfc98a6bd7bc3e8417a3f/packages/core/src/views/connect/Index.svelte#L473

[gesquinca]

Hey @socaseinpoint can you apply your font-size to the body element instead of the root html element? This would be the easiest way to resolve on your end.