@casomoltd/tooling 0.28.0 → 0.29.0

package/styles/casomo-spec.css

@@ -0,0 +1,230 @@
+/* Casomo document chrome — plain by design.
+ *
+ * A spec is read to extract decisions from, not to be impressed by, so this
+ * sheet is deliberately quiet: white ground, one link colour, hairline rules
+ * instead of cards and shadows, and colour used only where it carries
+ * meaning. It styles the skeleton's own class names and nothing else, so a
+ * page needs no markup of its own.
+ *
+ * Colour is a signal, not decoration. The four callout kinds and the status
+ * tags keep a hue because they mean something; everything else is ink on
+ * white. If a rule here paints something for emphasis alone, it is a bug.
+ *
+ * Tokens come from casomo-tokens.css, which is the brand sheet and is left
+ * alone. The block below re-points the handful this sheet reads, so a page
+ * that wants the brand look can drop it and get one.
+ */
+:root {
+  --bg: #ffffff;
+  --card: #ffffff;
+  --panel: #f8f9fa;
+  --ink: #202122;
+  --muted: #54595d;
+  --dim: #72777d;
+  --line: #a2a9b1;
+  --hair: #eaecf0;
+  --accent: #3366cc;
+  --radius: 2px;
+  --shadow: none;
+  --measure: 62rem;
+  /* Everything read as prose shares one measure; content that needs the
+     width -- tables, code, figures -- takes the whole column. One value, so
+     a callout and the paragraph above it end at the same edge. */
+  --reading: 44rem;   /* clears the floated contents card in the masthead */
+}
+
+html { -webkit-text-size-adjust: 100%; }
+body {
+  margin: 0; background: var(--bg); color: var(--ink);
+  font: 15px/1.65 var(--sans); }
+.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 16px; }
+
+/* ---- masthead: eyebrow, title, contents and the Overview card,
+       and no loose prose (S11) ---- */
+header.hero { border-bottom: 1px solid var(--line); padding: 28px 0 18px; }
+header.hero .eyebrow {
+  font: 500 12px/1.5 var(--mono); color: var(--muted);
+  letter-spacing: .02em; margin-bottom: 10px; }
+header.hero h1 {
+  font-size: 30px; line-height: 1.2; font-weight: 600; margin: 0 0 8px; }
+header.hero a { color: var(--accent); }
+.pillrow { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
+.pill { font-size: 12.5px; color: var(--muted); }
+.pill + .pill::before { content: "· "; color: var(--dim); margin-left: -8px; }
+
+/* ---- contents: a box the brief flows around, the way a reference page
+       does it. Floated rather than placed in a column, so a short brief
+       does not leave a tall empty gutter beside it. ---- */
+nav.toc {
+  float: right; width: 15rem; margin: 4px 0 14px 28px;
+  border: 1px solid var(--line); background: var(--panel); padding: 10px 14px; }
+nav.toc .wrap { max-width: none; margin: 0; padding: 0; display: block; }
+nav.toc::before {
+  content: "Contents"; display: block; font-weight: 600; font-size: 13px;
+  margin-bottom: 6px; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
+nav.toc a {
+  display: block; color: var(--accent); text-decoration: none;
+  font-size: 13px; line-height: 1.5; padding: 1px 0; }
+nav.toc a:hover { text-decoration: underline; }
+header.hero::after { content: ""; display: block; clear: both; }
+
+/* ---- numbering, generated ----
+   Sections number themselves from document order, so a section that moves
+   renumbers itself and everything after it. Nothing in the markup carries a
+   number, which means a heading and its contents entry cannot disagree and a
+   renumber cannot leave a subsection behind. Prose cites a section by NAME,
+   never by number -- a named link is right wherever the section ends up. */
+body { counter-reset: sec; }
+section[id]:not(.unnumbered) { counter-increment: sec; counter-reset: sub; }
+section[id]:not(.unnumbered) > h2::before { content: counter(sec) " · "; }
+section[id]:not(.unnumbered) h3 { counter-increment: sub; }
+section[id]:not(.unnumbered) h3::before {
+  content: counter(sec) "." counter(sub) " · "; }
+nav.toc { counter-reset: toc; }
+nav.toc a:not(.unnumbered) { counter-increment: toc; }
+nav.toc a:not(.unnumbered)::before { content: counter(toc) " · "; }
+
+/* ---- headings: a rule under each, no numbers bolted on ---- */
+section { margin: 30px 0; }
+h2 {
+  font-size: 22px; font-weight: 600; margin: 32px 0 10px;
+  padding-bottom: 5px; border-bottom: 1px solid var(--line); }
+h2::before { content: none; }
+h3 { font-size: 17px; font-weight: 600; margin: 24px 0 8px; }
+h4 { font-size: 15px; font-weight: 600; margin: 18px 0 6px; }
+h5 { font-size: 14px; font-weight: 600; margin: 14px 0 4px; }
+p { margin: 0 0 12px; max-width: var(--reading); }
+/* Justified with hyphenation, so a justified line does not open rivers.
+   Code, tables and figures keep their own alignment. */
+p, li, .callout, .legend { text-align: justify; hyphens: auto; }
+/* A box's padding and border sit inside the measure, so its outer edge
+   lines up with the paragraphs beside it. */
+.callout, .card { box-sizing: border-box; }
+ul, ol { max-width: var(--reading); }
+a { color: var(--accent); }
+a:visited { color: #795cb2; }
+/* An unbreakable path in a justified line stretches every gap before it,
+   so inline code may wrap; a split path reads better than a river. */
+code:not(pre code) {
+  overflow-wrap: anywhere;
+  font: 13px var(--mono); background: var(--panel);
+  border: 1px solid var(--hair); border-radius: 2px; padding: 0 3px; }
+
+/* ---- boxes: a thin rule, never a shadow ---- */
+.card {
+  border: 1px solid var(--line); background: var(--card);
+  padding: 14px 16px; margin: 14px 0; max-width: var(--reading); }
+.callout {
+  border: 1px solid var(--hair); border-left: 3px solid var(--dim);
+  background: var(--panel); padding: 10px 14px; margin: 14px 0;
+  max-width: var(--reading); }
+.callout .lbl {
+  display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
+.c-info   { border-left-color: var(--info); }
+.c-decide { border-left-color: var(--gen); }
+.c-warn   { border-left-color: var(--amber); }
+.c-key    { border-left-color: var(--ok); }
+
+/* ---- tables ---- */
+table {
+  border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 14px; }
+th, td {
+  border: 1px solid var(--line); padding: 7px 9px;
+  text-align: left; vertical-align: top; }
+th { background: var(--hair); font-weight: 600; }
+td.ok { color: var(--ok); }
+
+/* ---- status words: colour without a badge ---- */
+.tag {
+  font: 600 12px var(--mono); letter-spacing: .01em; white-space: nowrap; }
+.tag.ok    { color: var(--ok); }
+.tag.red   { color: var(--red); }
+.tag.amber { color: var(--amber); }
+.tag.gen   { color: var(--gen); }
+.tag.new   { color: var(--info); }
+
+/* ---- layout helpers ---- */
+.grid, .grid2, .grid3 { display: grid; gap: 12px; margin: 14px 0; }
+.grid2 { grid-template-columns: repeat(2, 1fr); }
+.grid, .grid3 { grid-template-columns: repeat(3, 1fr); }
+@media (max-width: 820px) {
+  .grid, .grid2, .grid3 { grid-template-columns: 1fr; }
+  .wrap { padding: 0 14px; }
+  nav.toc { float: none; width: auto; margin: 14px 0; }
+}
+.stat {
+  border: 1px solid var(--line); background: var(--panel);
+  padding: 10px 12px; font: 600 17px/1.3 var(--sans); }
+.statlbl {
+  display: block; font: 400 12px/1.4 var(--sans);
+  color: var(--muted); margin-bottom: 3px; }
+
+/* ---- code ---- */
+pre {
+  background: var(--code-bg); border: 1px solid var(--line);
+  border-radius: 2px; padding: 12px 14px; overflow-x: auto; margin: 12px 0; }
+pre code { font: 13px/1.55 var(--mono); }
+
+/* ---- figures ----
+   `.figure-card` holds a PRE-RENDERED svg and is deliberately not called
+   `.mermaid`: a mermaid runtime treats such an element as a diagram source
+   and would try to parse the rendered svg as text. */
+.figure-card, .mermaid {
+  border: 1px solid var(--line); background: var(--card);
+  padding: 16px; margin: 14px 0; text-align: center; overflow-x: auto; }
+.legend {
+  font-size: 13px; color: var(--muted); margin: -4px 0 16px;
+  max-width: var(--reading); }
+
+/* ---- lists and odds ---- */
+ul.tight, ol.tight { margin: 8px 0; padding-left: 20px; }
+ul.tight li, ol.tight li { margin-bottom: 5px; }
+.kbd {
+  font: 12px var(--mono); border: 1px solid var(--line);
+  border-bottom-width: 2px; border-radius: 3px; padding: 1px 5px;
+  background: var(--panel); }
+.q { font-weight: 600; }
+.layer {
+  border: 1px solid var(--line); padding: 12px 14px; margin: 10px 0; }
+.layer h4 { margin-top: 0; }
+.layer .n {
+  display: inline-block; min-width: 1.5em; font-weight: 600;
+  color: var(--muted); }
+.big-arrow { color: var(--dim); text-align: center; margin: 6px 0; }
+footer {
+  border-top: 1px solid var(--line); margin-top: 36px;
+  padding-top: 14px; font-size: 13px; color: var(--muted); }
+
+/* ---- print ----
+   A spec is read on screen and marked up on a tablet, and only the second
+   surface has a fixed page. So the measure gives way to the page box, and
+   nothing carrying an argument may break across a leaf: a figure parted
+   from its legend, or a row from its heading, is read wrong rather than
+   read as broken. */
+@page { size: A4; margin: 14mm 12mm; }
+@media print {
+  :root { --measure: 100%; --reading: 100%; }
+  body { font-size: 10.5pt; }
+  .wrap { padding: 0; }
+  nav.toc { float: none; width: auto; margin: 0 0 18px; }
+  /* Every selector that sets a link colour on screen has to be named, or it
+     keeps it: a bare `a` is (0,0,1) and loses to all three. */
+  a, a:visited, nav.toc a, header.hero a {
+    color: inherit; text-decoration: none; }
+  h2, h3, h4, h5 { break-after: avoid; }
+  .callout, .stat, pre, tr { break-inside: avoid; }
+  /* The legend is a sibling of the figure's WRAPPER, not of the card inside
+     it, so the wrapper is what must hold together and what the legend must
+     follow. */
+  [id^="fig-"] { break-inside: avoid; break-after: avoid; }
+  .legend { break-before: avoid; }
+  /* Mermaid emits width and height as presentation attributes, which any
+     author rule already beats -- no !important needed. Only the cap is
+     ours: A4 less the @page margins leaves 269mm, and a figure is held
+     under that so its legend and heading can share the leaf. */
+  .figure-card svg { max-height: 215mm; width: auto; }
+  /* On paper an overflow box clips instead of scrolling, so a long code
+     line would be cropped at the page edge with nothing to show it. */
+  pre { overflow: visible; white-space: pre-wrap; overflow-wrap: break-word; }
+  footer { break-before: avoid; }
+}

package/styles/casomo-tokens.css

@@ -0,0 +1,43 @@
+/* Casomo brand tokens.
+ *
+ * Link this next to any HTML that should carry the company's look. It
+ * declares custom properties and paints nothing, so it is safe to drop into
+ * a page that has its own stylesheet: nothing here can bleed into the
+ * page's own rules.
+ *
+ * The colours are transcribed by hand from the company site's design
+ * tokens. They have to be literal values: a rendered page is opened from
+ * disk over file:// with no server, so it cannot fetch at view time, and
+ * this package is a devDependency of the site rather than a dependency, so
+ * it cannot import at build time either. Nine colours are copied; the drift
+ * risk that creates, and what would retire the copy, are recorded at
+ * https://github.com/casomoltd/tooling/issues/6
+ *
+ * These are DEFAULTS. Every value is a custom property, so a consumer
+ * rebrands by adding a later :root block overriding the ones they care
+ * about — no fork of this file needed.
+ *
+ * The status colours are NOT brand. They are the diagram key's vocabulary
+ * and mean the same thing in every figure that uses this sheet.
+ */
+:root {
+  --bg: #DADADA;        /* surface-mid — the ground the cards sit on */
+  --card: #FFFFFF;      /* white — every panel, figure and code frame */
+  --panel: #EFEFEF;     /* surface-light — table heads, inline code */
+  --ink: #2C2C2C;       /* text-dark */
+  --muted: #707070;     /* text-muted */
+  --dim: #8A8A8A;       /* text-mid */
+  --line: #C0C0C0;      /* border */
+  --accent: #F6643A;    /* accent — the only brand colour */
+  --black: #000000;     /* the head and foot bands */
+  --on-black: #EFEFEF;  /* text-white, for use on those bands only */
+  --radius: 12px;       /* rounded-xl */
+  --shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);  /* shadow-sm */
+  --ok: #007f3b; --ok-bg: #e6f4ec; --amber: #a8720a; --amber-bg: #fbf3e2;
+  --red: #b3140c; --red-bg: #fbe9e8; --gen: #6b3fa0; --gen-bg: #f0e9f8;
+  --info: #1451a0; --info-bg: #eaf2fb;
+  --code-bg: #0d1117;
+  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --prompt: "Share Tech Mono", "IBM Plex Mono", ui-monospace, monospace;
+}