refactored separator to use CeTZ style

src/consts.typ

@@ -28,3 +28,9 @@
 #let COL-GRP-NAME = rgb("#EEEEEE")
 #let COL-SEP-NAME = rgb("#EEEEEE")
 #let COL-NOTE = rgb("#FEFFDD")
+
+#let default-style = (
+  y-space: 10pt,
+  fill: rgb("#EEEEEE"),
+  stroke: black + 1pt,
+)

src/core/draw/separator.typ

@@ -1,47 +1,65 @@
-#import "/src/cetz.typ": draw
+#import "/src/cetz.typ": draw, styles
 
 #import "/src/consts.typ": *
-#import "/src/core/utils.typ": get-ctx, set-ctx
+#import "/src/core/utils.typ": normalize-units, set-y, with-ctx-style
 
-#let render(sep) = get-ctx(ctx => {
-  ctx.y -= Y-SPACE
+#let separator-default-style = (
+  inset: (
+    x: 3pt, y: 5pt
+  ),
+  fill: auto,
+  stroke: auto,
+  gap: 3pt,
+  outset: 20pt
+)
 
-  let x0 = ctx.x-pos.first() - 20
-  let x1 = ctx.x-pos.last() + 20
-  let m = measure(
-    box(
-      sep.name,
-      inset: (left: 3pt, right: 3pt, top: 5pt, bottom: 5pt)
-    )
+#let render(sep) = with-ctx-style((ctx, glob-style) => {
+  let style = styles.resolve(
+    glob-style,
+    merge: sep.style,
+    root: "separator",
+    base: separator-default-style
   )
+  let gap = normalize-units(style.gap)
+  let outset = normalize-units(style.outset)
+
+  ctx.y -= glob-style.y-space
+
+  let x0 = ctx.x-pos.first() - outset
+  let x1 = ctx.x-pos.last() + outset
+  let name = box(
+    sep.name,
+    inset: style.inset,
+    stroke: style.stroke,
+    fill: style.fill
+  )
+  let m = measure(name)
   let w = m.width / 1pt
   let h = m.height / 1pt
   let cx = (x0 + x1) / 2
   let xl = cx - w / 2
   let xr = cx + w / 2
 
-  ctx.y -= h / 2
-  draw.rect(
-    (x0, ctx.y),
-    (x1, ctx.y - 3),
-    stroke: none,
-    fill: white
-  )
-  draw.line((x0, ctx.y), (x1, ctx.y))
-  ctx.y -= 3
-  draw.line((x0, ctx.y), (x1, ctx.y))
-  draw.content(
-    ((x0 + x1) / 2, ctx.y + 1.5),
-    sep.name,
-    anchor: "center",
-    padding: (5pt, 3pt),
-    frame: "rect",
-    fill: COL-SEP-NAME
-  )
-  ctx.y -= h / 2
+  let y0 = ctx.y
+  let y2 = y0 - h
+  let y1 = (y0 + y2) / 2
 
-  set-ctx(c => {
-    c.y = ctx.y
-    return c
-  })
+  let gap-y0 = y1 + gap / 2
+  let gap-y1 = gap-y0 - gap
+
+  draw.rect(
+    (x0, gap-y0),
+    (x1, gap-y1),
+    stroke: none,
+    fill: style.fill
+  )
+  draw.line((x0, gap-y0), (x1, gap-y0))
+  draw.line((x0, gap-y1), (x1, gap-y1))
+  draw.content(
+    (cx, y1),
+    name,
+    anchor: "mid"
+  )
+
+  set-y(y2)
 })

src/core/utils.typ

@@ -1,4 +1,6 @@
-#import "/src/cetz.typ": draw
+#import "/src/cetz.typ": draw, styles
+
+#import "/src/consts.typ": default-style
 
 #let is-elmt(elmt) = {
   if type(elmt) != dictionary {
@@ -93,19 +95,31 @@
   )
 })
 
+#let extract-ctx(cetz-ctx) = {
+  let state = cetz-ctx.at("shared-state", default: (:))
+  return state.at("chronos", default: (:))
+}
+
 #let set-ctx(func) = draw.set-ctx(c => {
-  let ctx = c.shared-state.chronos
+  let ctx = extract-ctx(c)
   let new-ctx = func(ctx)
   assert(new-ctx != none, message: "set-ctx must return a context!")
-  c.shared-state.chronos = new-ctx
+  let state = c.at("shared-state", default: (:))
+  state.chronos = new-ctx
+  c.shared-state = state
   return c
 })
 
 #let get-ctx(func) = draw.get-ctx(c => {
-  let ctx = c.shared-state.chronos
+  let ctx = extract-ctx(c)
   func(ctx)
 })
 
+#let set-y(new-y) = set-ctx(c => {
+  c.y = new-y
+  return c
+})
+
 #let expand-parent-group(x0, x1) = set-ctx(ctx => {
   if ctx.groups.len() != 0 {
     let group = ctx.groups.last()
@@ -115,3 +129,17 @@
   }
   return ctx
 })
+
+#let with-ctx-style(func) = draw.get-ctx(cetz-ctx => {
+  let ctx = extract-ctx(cetz-ctx)
+  let glob-style = styles.resolve(
+    cetz-ctx.style,
+    root: "chronos",
+    base: default-style
+  )
+
+  // Normalize because it is used very frequently
+  glob-style.y-space = normalize-units(glob-style.y-space)
+
+  func(ctx, glob-style)
+})

src/misc.typ

@@ -4,11 +4,12 @@
 #import "core/draw/sync.typ"
 #import "core/utils.typ": set-ctx
 
-#let _sep(name) = {
+#let _sep(name, ..style) = {
   return ((
     type: "sep",
     draw: separator.render,
-    name: name
+    name: name,
+    style: style.named()
   ),)
 }