Source file skyline_card_v1.ml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
open! Core
open! Bonsai_web
open! Bonsai.Let_syntax

module Style = struct
  module Colors = Private_skyline_theme.Colors.Constants

  let ( @> ) = Css_gen.( @> )

  let card ~intent ~border_radius =
    let style ~foreground ~background ~border ~border_radius =
      Css_gen.color foreground
      @> Css_gen.background_color background
      @> Css_gen.border_radius border_radius
      @> Css_gen.border ~width:(`Px 1) ~style:`Solid ~color:border ()
      |> Vdom.Attr.style
    in
    let foreground = Option.value intent ~default:Colors.primary in
    let border =
      match intent with
      | Some _ -> foreground
      | None -> Colors.border
    in
    Vdom.Attr.many
      [ style ~foreground ~background:Colors.surface ~border ~border_radius
      ; Private_skyline_theme.Stylesheet.step_nested_surface_ramp
      ]
  ;;
end

let row
  ?(attrs = [])
  ?reverse
  ?wrap
  ?justify
  ?align
  ?gap
  ?(padding = `Px 4)
  ?(border_radius = `Px 4)
  ?intent
  children
  =
  Skyline_flex_v1.row
    ~attrs:(Style.card ~intent ~border_radius :: attrs)
    ?reverse
    ?wrap
    ?justify
    ?align
    ?gap
    ~padding
    children
;;

let column
  ?(attrs = [])
  ?reverse
  ?wrap
  ?justify
  ?align
  ?gap
  ?(padding = `Px 4)
  ?(border_radius = `Px 4)
  ?intent
  children
  =
  Skyline_flex_v1.column
    ~attrs:(Style.card ~intent ~border_radius :: attrs)
    ?reverse
    ?wrap
    ?justify
    ?align
    ?gap
    ~padding
    children
;;