Type for length in an elm-css theme

Learn
1

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?

2

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.

3

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.

4

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

5

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.