LCSS themes and regional fills#

LCSS is LayMesh's styling language. Separate files use .lcss. Selectors and declarations resemble CSS, but this is not browser CSS: geometry, data, domains and placement remain in .lay.

3score = 0.9754page.add(text(f"Energy: $E=mc^2$ · fit $R^2={score:.3f}$", class="title"), offset=(8, 5))5p = plot(size=(134, 72), plot_area=box(offset=(20, 8), size=(100, 48)),6         x=axis(label="$t$ (s)", range=(0, 4)), y=axis(label="$E$ (eV)", range=(0, 5)))7p.line(x=[0, 1, 2, 3, 4], y=[1, 2.2, 3.8, 2.6, 3.2], label="Experiment",8       color="#0072b2", line_width=1, marker= circle)9p.legend(position= top_left)10chart = page.add(p, offset=(8, 20))11page.add(text(r"Raw: $E=mc^2$", class="annotation"), offset=(8, 93))12page.add(rect(size=(30, 8), fill=hatch(pattern= cross, color="#245447", spacing=2)), offset=(100, 94))

score = 0.975
page.add(text(f"Energy: $E=mc^2$ · fit $R^2={score:.3f}$", class="title"), offset=(8, 5))
p = plot(size=(134, 72), plot_area=box(offset=(20, 8), size=(100, 48)),
         x=axis(label="$t$ (s)", range=(0, 4)), y=axis(label="$E$ (eV)", range=(0, 5)))
p.line(x=[0, 1, 2, 3, 4], y=[1, 2.2, 3.8, 2.6, 3.2], label="Experiment",
       color="#0072b2", line_width=1, marker= circle)
p.legend(position= top_left)
chart = page.add(p, offset=(8, 20))
page.add(text(r"Raw: $E=mc^2$", class="annotation"), offset=(8, 93))
page.add(rect(size=(30, 8), fill=hatch(pattern= cross, color="#245447", spacing=2)), offset=(100, 94))

1page = canvas(size=(150, 110), unit= mm, stylesheet="language/paper.lcss", background="#ffffff")2# BEGIN DEMO3score = 0.9754page.add(text(f"Energy: $E=mc^2$ · fit $R^2={score:.3f}$", class="title"), offset=(8, 5))5p = plot(size=(134, 72), plot_area=box(offset=(20, 8), size=(100, 48)),6         x=axis(label="$t$ (s)", range=(0, 4)), y=axis(label="$E$ (eV)", range=(0, 5)))7p.line(x=[0, 1, 2, 3, 4], y=[1, 2.2, 3.8, 2.6, 3.2], label="Experiment",8       color="#0072b2", line_width=1, marker= circle)9p.legend(position= top_left)10chart = page.add(p, offset=(8, 20))11page.add(text(r"Raw: $E=mc^2$", class="annotation"), offset=(8, 93))12page.add(rect(size=(30, 8), fill=hatch(pattern= cross, color="#245447", spacing=2)), offset=(100, 94))13# END DEMO

page = canvas(size=(150, 110), unit= mm, stylesheet="language/paper.lcss", background="#ffffff")
# BEGIN DEMO
score = 0.975
page.add(text(f"Energy: $E=mc^2$ · fit $R^2={score:.3f}$", class="title"), offset=(8, 5))
p = plot(size=(134, 72), plot_area=box(offset=(20, 8), size=(100, 48)),
         x=axis(label="$t$ (s)", range=(0, 4)), y=axis(label="$E$ (eV)", range=(0, 5)))
p.line(x=[0, 1, 2, 3, 4], y=[1, 2.2, 3.8, 2.6, 3.2], label="Experiment",
       color="#0072b2", line_width=1, marker= circle)
p.legend(position= top_left)
chart = page.add(p, offset=(8, 20))
page.add(text(r"Raw: $E=mc^2$", class="annotation"), offset=(8, 93))
page.add(rect(size=(30, 8), fill=hatch(pattern= cross, color="#245447", spacing=2)), offset=(100, 94))
# END DEMO

1canvas {2  --ink: #245447;3  --soft: #eef5f2;4  font-family: "DejaVu Sans", "Noto Sans CJK SC";5  color: var(--ink);6}7.title { font-size: 13pt; }8.annotation {9  font-size: 10pt;10  background: #ffffff;11  border: 0.5pt solid #b9d5cb;12  border-radius: 1mm;13  padding: 2mm;14}15plot::area { background: linear-gradient(to bottom, #ffffff, #eef5f2); }16plot::axis { line-color: #445c53; line-width: 0.6pt; }17plot::axis(x) { background: #eef5f2; }18plot::legend { background: #ffffff; }

canvas {
  --ink: #245447;
  --soft: #eef5f2;
  font-family: "DejaVu Sans", "Noto Sans CJK SC";
  color: var(--ink);
}
.title { font-size: 13pt; }
.annotation {
  font-size: 10pt;
  background: #ffffff;
  border: 0.5pt solid #b9d5cb;
  border-radius: 1mm;
  padding: 2mm;
}
plot::area { background: linear-gradient(to bottom, #ffffff, #eef5f2); }
plot::axis { line-color: #445c53; line-width: 0.6pt; }
plot::axis(x) { background: #eef5f2; }
plot::legend { background: #ffffff; }

Dependencies

examples/language/paper.lcss
examples/unified.lay

Loading and precedence#

canvas(stylesheet="language/paper.lcss") loads a local stylesheet; an ordered path list is also supported. Entry-file style { … } blocks follow external sheets. Specificity and source order decide ties; explicit object parameters win. Module styles are scoped to objects from their module and act as component defaults; entry themes can override them.

1@import "base.lcss";2plot::axis(x) { line-color: #444444; line-width: 0.6pt; }3.annotation {4  --paper: #ffffff;5  background: var(--paper);6  border: 0.5pt solid #b9d5cb;7  border-radius: 1mm;8  padding: 1mm;9}

@import "base.lcss";
plot::axis(x) { line-color: #444444; line-width: 0.6pt; }
.annotation {
  --paper: #ffffff;
  background: var(--paper);
  border: 0.5pt solid #b9d5cb;
  border-radius: 1mm;
  padding: 1mm;
}

Use class="paper annotation" in .lay. Selectors support types, classes, combinations, comma-separated groups, descendants and direct children (>). Parts include plot::area, plot::axis(x), plot::tick-label, plot::axis-label, plot::legend and plot::colorbar.

Paints and borders#

fill paints a shape's interior; background paints a region. Values include none, colors, linear-gradient(...), radial-gradient(...), hatch(slash, #666666, 2mm, 0.5pt), cross/dot hatches and url("texture.png"). DSL counterparts are linear_gradient, radial_gradient, hatch and image_fill.

Configure canvas, plot frame, plot area, each axis and its labels, text/formula boxes, legends/colorbars and imported-image boxes independently. Plot-area paint follows polar outlines and visible broken-axis segments. Paint alone does not change data mapping. padding is inner spacing and contributes to measured bounds.

Closed outlines use border_*; open lines use line_*. LCSS uses hyphens, such as border-width and line-width. Typography inherits; backgrounds and placement do not. Parent and child opacity multiply. Instances of the same material can select independent classes.

Resources and limits#

LCSS lengths require explicit units (except zero), so a theme is independent of the canvas default unit. Image and font paths are relative to the declaring .lcss file. Variables support var(--name, fallback); variable and import cycles are errors.

Web layout, media queries, animation, interactive pseudo-classes and !important are unsupported and produce diagnostics. All parameters · Migration

style-properties#

Each property maps to the following DSL parameter. Types, units and inheritance use the same metadata as parameter hover.

LCSS	DSL
`font-family`	`font_family`
`font-size`	`font_size`
`font-weight`	`font_weight`
`font-style`	`font_style`
`color`	`color`
`line-height`	`line_height`
`background`	`background`
`padding`	`padding`
`border-radius`	`border_radius`
`border-color`	`border_color`
`border-width`	`border_width`
`border-style`	`border_style`
`border-dash`	`border_dash`
`border-dash-offset`	`border_dash_offset`
`border-cap`	`border_cap`
`border-join`	`border_join`
`border-miter-limit`	`border_miter_limit`
`border-opacity`	`border_opacity`
`line-color`	`line_color`
`line-width`	`line_width`
`line-style`	`line_style`
`line-dash`	`line_dash`
`line-dash-offset`	`line_dash_offset`
`line-cap`	`line_cap`
`line-join`	`line_join`
`line-miter-limit`	`line_miter_limit`
`line-opacity`	`line_opacity`
`fill`	`fill`
`opacity`	`opacity`
`tick-font-size`	`tick_font_size`
`label-font-size`	`label_font_size`
`tick-color`	`tick_color`
`grid-color`	`grid_color`
`grid-line-width`	`grid_line_width`
`grid-line-dash`	`grid_line_dash`
`start-head`	`start_head`
`end-head`	`end_head`
`start-cap`	`start_cap`
`end-cap`	`end_cap`

Endpoint properties accept head(...), for example end-head: head(shape=triangle,size=(5mm,4mm));. LCSS identifiers are style values; they are not reads from the DSL variable scope.

workflow#

Complete sources and executable verification fixtures for this workflow are listed in the feature coverage map. Follow this page’s input conditions and limits when composing features.