themeconstant
The loops design's drawing, for the package's own renderer: grey outline, grey header, three ring pins.
Most code wants calendarIcon from this file instead, which draws with it.
Import it
import { theme } from "@johnmorrisdotca/koyomi-calendars/themes/loops";Definition
const theme: Def = {
box: [29.5, 33, 270, 285],
numeral: "centre",
layout: () => ({ page: LOOPS, yearZone: [59.5, 119.5, 210, 32] }),
draw: ({ p, dark, l }) => {
const k = dark
? { line: "#c3c3c3", head: "#6e6e6e", body: "#262626", ink: "#e6e6e6", hole: "#262626", pin: "#c3c3c3", yr: "#ffffff" }
: { line: "#5b5b5b", head: "#828282", body: "#ffffff", ink: "#555555", hole: "#ffffff", pin: "#5b5b5b", yr: "#ffffff" };
const ring = (cx: number) => circle(cx, 100, 16.5, k.hole, `stroke="${k.line}" stroke-width="6"`) + rect(cx - 7, 52, 14, 46, 7, k.pin);
const [x, y, w, h] = l.page;
const [zx, zy, zw, zh] = l.yearZone!;
const ms = fit(p.month, 36, 180, 0.6);
const [mb, db] = stack(y, y + h, [[ms * CAP, 0], [70 * CAP, 14]]);
return (rect(56, 67, 217, 229, 26, k.body) +
`<path d="M56 155V93a26 26 0 0 1 26-26H247a26 26 0 0 1 26 26V155Z" fill="${k.head}"/>` +
rect(56, 67, 217, 229, 26, "none", `stroke="${k.line}" stroke-width="7"`) +
`<path d="M56 155H273" stroke="${k.line}" stroke-width="7"/>` +
ring(100) + ring(164.5) + ring(229) +
part("year", tx(zx + zw / 2, zy + zh / 2 + 19 * CAP / 2, p.year, 19, k.yr, 700, { opacity: 0.9 })) +
part("month", tx(x + w / 2, mb!, p.month, ms, k.ink, 700)) +
part("day", dayText(x + w / 2, db!, p.day, 70, k.ink, 700)));
},
}Members
| Name | Type | Description |
|---|---|---|
box | Rect | The drawing's own coordinate box: x, y, width, height. |
numeral | "centre" | Where the day sits in its page. Every theme centres it; a look that places it otherwise says so here, for 1, 9, 30 and 31 alike. |
layout | (year: boolean, weekend?: boolean) => CalendarLayout | The layout with a year and without one (the drawing is re-centred when the year is absent), and, for a theme with a weekend page, as that page. |
draw | (c: Ctx) => string | |
rings (optional) | readonly [x: number, y: number, width: number] | undefined | Where |
weekend (optional) | true | undefined | The theme has a weekend page ( |
extras (optional) | ((input: ExtrasInput) => Extras) | undefined | Works out the extra data a tear-off page draws. A theme without it is given none. |
Examples
import { theme } from "@johnmorrisdotca/koyomi-calendars/themes/loops";
console.log(theme.box.length);4What it prints (run when this page was built)