ghivert / sketch

A CSS-in-Gleam package, made to work with frontend, backend, with your favorite framework!
https://hexdocs.pm/sketch/
MIT License
41 stars 3 forks source link

add color functions #9

Open brunoti opened 5 months ago

brunoti commented 5 months ago

I'm thinking of:

import sketch/color

// Something like this with contructors
type Color {
  Named(String)
  Hex(String)
  Rgb(Int, Int, Int)
  Rgba(Int, Int, Int, Float)
  Hsl(Int, Float, Float)
}

sketch.class([
  sketch.background(
    color.named("red")
        |> color.alpha(0.5)
        |> color.darken(0.2)
        |> color.to_hsl_string()
    )
])

sketch.class([
  sketch.background(
    color.rgba(r: 255, g: 255, b: 255, alpha: 0.1)
        |> color.alpha(0.5)
        |> color.to_rgba_string() // rgba(255, 255, 255, 0.5)
    )
])

sketch.class([
  sketch.background(
    color.rgba(r: 255, g: 0, b: 0, alpha: 1)
        |> color.to_hex_string() // "#FF0000
    )
])

    color.hex("FFF")
        |> color.alpha(0.5)
        |> color.to_hex_string() |> // rgba(255, 255, 255, 0.5)
    )

But let's discuss the API

ghivert commented 5 months ago

That would be awesome!

I think a really generic Color type would be nice, with multiple constructors, and ways to generate colors at the end like you wrote.

pub opaque type Color {
  Color(
    red: Int, 
    green: Int, 
    blue : Int,
    alpha: Int,
    luminance: Int
  )
}

pub fn hex(hex: String) -> Result(Color, Error) {
  parse_hex(hex)
}

pub fn rgba(r, g, b, a) -> Result(Color, Error) {
  parse_rgba(r, g, b, a)
}
ghivert commented 4 months ago

I wonder whether is should resides in sketch or not in the end. Maybe managing colors would just be something generic, and can be build easily on its own, before turning them into strings. I'm 100% sure that I want to build something like that in the long run, just not sure where. I don't want to add too much overhead on top of sketch, and I'd like to keep the abstractions really simple. I think it what could make the strength of sketch, because you don't have to relearn a new API. However, it could be really nice to have helpers to darken colors, etc.

I see two directions:

I really much prefer option 2. The real strong upside is see to the first option though is to avoid people to install 2 different packages in gleam.toml.

brunoti commented 4 months ago

started here! give me your thoughts, open issues if you think it's worth and let's do it!

https://github.com/brunoti/lumiere

pure gleam!

ghivert commented 4 months ago

That seems really great ! 💜

It seems to be a great foundation to start with, the goal is probably now to test it properly, and add the desired features (darken etc.). I'll take a look and open issues 🙂