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

socaseinpoint commented 1 year ago

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

[X] 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 commented 1 year ago

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

socaseinpoint commented 1 year ago

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

taylorjdawson commented 1 year ago

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

socaseinpoint commented 1 year ago

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 commented 1 year ago

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.

socaseinpoint commented 1 year ago

Rem units allow you to set sizes relative to the root element. As I understand it's only possible to define font size for rem calculation

mvdschee commented 1 year ago

I have tried, and it's impossible to get this to work as expected without changing the font-size outside of the web component, it would have been an easy fix if they did keep consistency throughout their whole component by using css variables, but I found 153 cases where they hardcoded a rem value.

a rewrite to pixel would be best in this case.