package bonsai

You can search for identifiers within the package.
in-package search v0.2.0
A library for building dynamic webapps, using Js_of_ocaml
Install

Dune Dependency

github.com Readme Changelog MIT License Edit opam file Versions (6)
Authors

J

Jane Street Group, LLC
Maintainers

J

Jane Street developers
Sources

bonsai-v0.16.0.tar.gz
sha256=1d68aab713659951eba5b85f21d6f9382e0efa8579a02c3be65d9071c6e86303
doc/src/bonsai.kado/kado.ml.html

Source file `kado.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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
open! Core
open! Import

module Style = struct
  type t =
    | Light
    | Dark
end

module Contrast = struct
  type t = Standard
end

module Version = struct
  type t =
    | V1
    | Bleeding
end

let c ~fg ~bg = { Fg_bg.foreground = fg; background = bg }

let dark_mode_constants =
  let primary = c ~fg:(`Hex "#d1d2d3") ~bg:(`Hex "#1a1d21") in
  let extreme = c ~fg:(`Name "#e2e3e4") ~bg:(`Hex "#14181c") in
  let table_even = c ~bg:(`Hex "#21242a") ~fg:primary.foreground in
  let extreme_primary_border = `Hex "#313943" in
  let header = c ~bg:(`Hex "#0b0e11") ~fg:primary.foreground in
  { primary
  ; extreme
  ; extreme_primary_border
  ; intent =
      { info = c ~fg:(`Name "black") ~bg:(`Hex "#1BA1F2")
      ; success = c ~fg:(`Name "black") ~bg:(`Hex "#57c961")
      ; warning = c ~fg:(`Name "black") ~bg:(`Hex "#ffbe01")
      ; error = c ~fg:(`Name "white") ~bg:(`Hex "#f2581b")
      }
  ; table =
      { body_row_even = table_even
      ; body_row_odd = primary
      ; header_row = header
      ; header_header_border = extreme_primary_border
      ; header_body_border = extreme_primary_border
      ; body_body_border = extreme_primary_border
      }
  ; form =
      { error_message = { foreground = `Name "black"; background = `Name "pink" }
      ; error_toggle_text = `Hex "#f54646"
      ; error_border = `Name "red"
      ; tooltip_message = { foreground = `Name "black"; background = `Name "azure" }
      ; tooltip_border = `Name "darkblue"
      ; tooltip_toggle_text = `Name "blue"
      }
  ; small_font_size = `Em_float 0.8
  ; large_font_size = `Em_float 1.2
  ; is_dark = true
  }
;;

let light_mode_constants =
  let primary = c ~fg:(`Hex "#101c28") ~bg:(`Hex "#e5e2de") in
  let extreme = c ~fg:(`Name "#101c28") ~bg:(`Hex "#f0eeec") in
  let table_even = c ~bg:(`Hex "#d9d0c4") ~fg:(`Name "#070e16") in
  let extreme_primary_border = `Hex "#313943" in
  let header = c ~bg:(`Hex "#312516") ~fg:(`Hex "#f7dec5") in
  let header_header_border = `Hex "#775a34" in
  { primary
  ; extreme
  ; extreme_primary_border
  ; intent = dark_mode_constants.intent
  ; small_font_size = dark_mode_constants.small_font_size
  ; large_font_size = dark_mode_constants.large_font_size
  ; table =
      { body_row_even = table_even
      ; body_row_odd = primary
      ; header_row = header
      ; header_header_border
      ; header_body_border = header_header_border
      ; body_body_border = extreme_primary_border
      }
  ; is_dark =
      false
  ; form =
      { error_message = { foreground = `Name "black"; background = `Name "pink" }
      ; error_toggle_text = `Hex "#f54646"
      ; error_border = `Name "red"
      ; tooltip_message = { foreground = `Name "black"; background = `Name "azure" }
      ; tooltip_border = `Name "darkblue"
      ; tooltip_toggle_text = `Name "blue"
      }
  }
;;

let app_attr ~color ~is_dark ~set_min_height_to_100vh =
  Vdom.Attr.many
    [ App.Variables.set () ~bg:(color |> Color.to_string_css)
    ; App.app
    ; (if is_dark then App.dark else App.light)
    ; (if set_min_height_to_100vh then App.set_min_height_to_100vh else Vdom.Attr.empty)
    ]
;;

let v1 ~constants ~codemirror_theme ~is_dark ~name ~version_name ~set_min_height_to_100vh =
  View.Expert.override_theme View.Expert.default_theme ~f:(fun (module M) ->
    (module struct
      class c =
        object (self)
          inherit M.c
          method! theme_name = [%string "%{name} %{version_name}"]
          method! constants = constants

          method! app_attr =
            app_attr
              ~is_dark
              ~color:self#constants.primary.background
              ~set_min_height_to_100vh

          method! devbar = Devbar.make self#constants ~is_dark
          method! tabs = Tabs.make
          method! button = Buttons.make self#constants
          method! use_intent_fg_or_bg_for_highlighting = `Bg
          method! codemirror_theme = Some codemirror_theme
          method! card = Cards.make self#constants
        end
    end))
;;

let theme
      ?(contrast = Contrast.Standard)
      ?(style = Style.Dark)
      ?set_min_height_to_100vh
      ~version
      ()
  =
  let is_dark, constants, name =
    match style with
    | Light -> false, light_mode_constants, "kado (light)"
    | Dark -> true, dark_mode_constants, "kado"
  in
  let codemirror_theme : View.Expert.For_codemirror.Theme.t =
    match style with
    | Light -> Solarized_light
    | Dark -> Nord
  in
  let Standard = contrast in
  let set_min_height_to_100vh = Option.is_some set_min_height_to_100vh in
  match version with
  | Version.V1 ->
    v1
      ~constants
      ~codemirror_theme
      ~is_dark
      ~name
      ~version_name:"v1"
      ~set_min_height_to_100vh
  | Bleeding ->
    v1
      ~constants
      ~codemirror_theme
      ~is_dark
      ~name
      ~version_name:"v1"
      ~set_min_height_to_100vh
;;

module Unstable = struct
  module Buttons = Buttons
  module Input = Input
end