[DISCUSSION] Modify theming scale values to allow style calculation

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

While developing or overriding components that consume theme values I expect to be able to calculate associated styling values from the theme provided.

i.e. If a style in a component should always have a marginTop value that is 50% the height of the current font lineHeight, I should be able to apply the size via

{
    marginTop: `${$theme.typography.font200.lineHeight / 2}px`
}

This would allow a theme to modify the typography without breaking the spacing provided within a component.

Current Behavior

All spacing, border, and sizing values are represented as strings. This makes ratio calculations impossible.

I suggest we convert these values to numbers (BREAKING change).

Context

I ran into some customization issues between the typography provided by the default and UberMove theme while implementing the ProgressSteps component.

[schnerd]

It’s maybe worth pointing out that such a change would make baseui a strict pixel-based system. As of right now customers could theoretically create a theme that uses rem/em for font sizes or spacing. Not necessarily a blocker, but worth considering.

One alternative to consider, though I’m not 100% sure of the support/performance implications, is using calc(), which works with any units

{
    marginTop: `calc(${$theme.typography.font200.lineHeight} / 2)`
}

I’d be curious to hear design’s take on this as well. When building these are they thinking in terms of “half of line height”, or are they relying on the scale system to ensure consistent spacing?

cc @nguyensomniac

[sandgraham]

@tonypee - You can set the sizing scale to be any unit and things should adjust accordingly. This is because we don’t make assumptions about the units you assign to the scale when using them in styling code.

// yes
marginLeft: theme.sizing.scale400

// no
marginLeft: `${theme.sizing.scale400}px`

There are px units used in certain circumstances though- mostly border widths and certain elements that need to be absolutely sized (or at least for our purposes are always an exact size in px). I think in these cases a simple styling override is probably sufficient.

All that said, we are comfortable with px values in our own apps and don’t test the components with relative units.