Type for length in an elm-css theme

Elm-css has an example theme that consists of colors:

theme : { secondary : Color, primary : Color }
theme =
    { primary = hex "55af6a"
    , secondary = rgb 250 240 230
    }

But what if I want a record with sizes:

bodyText =
  { fontSize = px 16
  , lineHeight = px 21
  }

How do you type that? I mean, for the above you could go with Px, but what if some of the records use em or unitless instead? Is there a more general type?

elm-css seems to be using Css.Length compatible units as general type: Css.Length

I have no idea how to use that in your code. My tries only result in compiler errors about extensible records.

Yeah, me neither. Length requires two parameters. The first one can be plugged by Css.Compatible, though I won’t pretend I understand what it does :slight_smile: As for the second one, I have no idea what to put there.

You seem to be able to use FontSize a and LengthOrNumber b. I found these by looking at the type annotations for the fontSize and lineHeight functions. Here’s an example: https://ellie-app.com/8Nd6qrjPTNba1

Thanks, I think that’s what I need!

It’s not even that I missed LengthOrNumber, it’s just that I didn’t think you can provide an abstract parameter in a signature (LengthOrNumber b in your example). I thought it has to be some specific type.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.