themeconstant
The pins design's drawing, for the package's own renderer: flat page, red header, two slate pins through white holes.
Most code wants calendarIcon from this file instead, which draws with it.
Import it
import { theme } from "@johnmorrisdotca/koyomi-calendars/themes/pins";Definition
const theme: Def = {
box: [20, 15, 273, 280],
numeral: "centre",
layout: () => ({ page: PINS, yearZone: PINS }),
draw: ({ p, dark, l }) => {
const k = dark
? { head: "#d4442f", body: "#2c3539", ink: "#e9eff1", muted: "#9aaab0", hole: "#2c3539", pin: "#e9eff1" }
: { head: "#ee4338", body: "#ffffff", ink: "#3a4a4f", muted: "#7c8c91", hole: "#ffffff", pin: "#3a4a4f" };
const pin = (cx: number) => circle(cx, 72, 14.5, k.hole) + rect(cx - 9.5, 25, 19, 57, 9.5, k.pin);
const [x, y, w, h] = l.page;
const ms = fit(p.monthUp, 37, 160, 0.68);
const [mb, db, yb] = stack(y, y + h, [[ms * CAP, 0], [111 * CAP, 14], ...(p.year ? [[20 * CAP, 12] as const] : [])]);
return (rect(35, 40, 243, 245, 28, k.body, `stroke="${dark ? "none" : "#e4e9eb"}" stroke-width="1.6"`) +
topRound(35, 40, 243, 65, 28, k.head) +
pin(93) + pin(221) +
part("month", tx(x + w / 2, mb!, p.monthUp, ms, k.ink, 600, { spacing: 1 })) +
part("day", dayText(x + w / 2, db!, p.day, 111, k.ink, 700)) +
part("year", tx(x + w / 2, yb!, p.year, 20, k.muted, 600)));
},
}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/pins";
console.log(theme.box.length);4What it prints (run when this page was built)