@plus234feed/ds 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plus234feed/ds",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Plus234Feed design system. Editorial tokens, type scale and components for a news intelligence platform: newspaper hierarchy, accessible colour in both themes, one component per job.",
   "keywords": [
     "design-system",

package/src/components.css

@@ -328,6 +328,91 @@
   color: var(--p234-color-ink);
 }
 
+/* Headings, lists and small print, styled on the element itself.
+ *
+ * An article body arrives as markup from the pipeline and a policy page is
+ * written by hand, but both are the same thing: a document. Styling the
+ * element rather than a class is what lets a page body be plain semantic
+ * HTML, which is also the only version of these pages anyone will maintain.
+ *
+ * Section headings carry a hairline above instead of sitting in a bordered
+ * box. A page of eight boxes reads as eight unrelated panels; a page of eight
+ * ruled sections reads as one document, which is what it is. */
+.p234-prose h2 {
+  font-family: var(--p234-type-headline-sm-family);
+  font-size: var(--p234-type-headline-sm-size);
+  line-height: var(--p234-type-headline-sm-leading);
+  letter-spacing: var(--p234-type-headline-sm-tracking);
+  font-weight: var(--p234-type-headline-sm-weight);
+  color: var(--p234-color-ink);
+  border-top: var(--p234-border-hairline) solid var(--p234-color-rule);
+  padding-top: var(--p234-space-4);
+}
+.p234-prose > * + h2 { margin-top: var(--p234-space-7); }
+
+.p234-prose h3 {
+  font-family: var(--p234-type-headline-xs-family);
+  font-size: var(--p234-type-headline-xs-size);
+  line-height: var(--p234-type-headline-xs-leading);
+  letter-spacing: var(--p234-type-headline-xs-tracking);
+  font-weight: var(--p234-type-headline-xs-weight);
+  color: var(--p234-color-ink);
+}
+.p234-prose > * + h3 { margin-top: var(--p234-space-6); }
+
+/* A heading followed straight by its own text should not carry a full gap:
+   the two belong together. */
+.p234-prose h2 + *,
+.p234-prose h3 + * { margin-top: var(--p234-space-3); }
+
+.p234-prose ul,
+.p234-prose ol { padding-left: var(--p234-space-6); }
+.p234-prose ul { list-style: disc; }
+.p234-prose ol { list-style: decimal; }
+.p234-prose li + li { margin-top: var(--p234-space-3); }
+.p234-prose li::marker { color: var(--p234-color-ink-subtle); }
+
+.p234-prose strong { font-weight: 700; }
+.p234-prose em { font-style: italic; }
+.p234-prose hr {
+  border: 0;
+  border-top: var(--p234-border-hairline) solid var(--p234-color-rule);
+}
+.p234-prose code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.9em;
+  background: var(--p234-color-paper-sunk);
+  padding: 0.1em 0.3em;
+  border-radius: var(--p234-radius-sm);
+}
+.p234-prose pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: var(--p234-type-ui-sm-size);
+  line-height: 1.55;
+  background: var(--p234-color-paper-sunk);
+  border: var(--p234-border-hairline) solid var(--p234-color-rule);
+  border-radius: var(--p234-radius-sm);
+  padding: var(--p234-space-4);
+  overflow-x: auto;
+}
+.p234-prose pre code { background: none; padding: 0; }
+
+/* The line under a document: last updated, a version, a notice. */
+.p234-prose small {
+  display: block;
+  font-family: var(--p234-type-meta-family);
+  font-size: var(--p234-type-meta-size);
+  line-height: var(--p234-type-meta-leading);
+  color: var(--p234-color-ink-muted);
+}
+
+/* A document page is a column of sections, not a reading column of 66
+   characters: its lists and definition rows want the wider measure. */
+.p234-prose--document { max-width: var(--p234-measure-wide); }
+.p234-prose--document > p,
+.p234-prose--document > ul,
+.p234-prose--document > ol { max-width: var(--p234-measure-text); }
+
 /* --- ad slot -----------------------------------------------------------
    Declared, labelled and bounded. The article template allows two of these,
    total. The count is a design decision, not an inventory decision: at six