@plus234feed/ds 0.4.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plus234feed/ds",
-  "version": "0.4.0",
+  "version": "0.6.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

@@ -315,8 +315,17 @@
   max-width: var(--p234-measure-text);
 }
 .p234-prose > * + * { margin-top: var(--p234-space-5); }
-.p234-prose a { color: var(--p234-color-link); text-underline-offset: 2px; }
-.p234-prose a:visited { color: var(--p234-color-link-visited); }
+/* Links in running text, but not links that are already a component.
+ *
+ * `.p234-prose a` is a class and a type, which outranks the single class on
+ * `.p234-btn`, so without this guard a button inside prose takes the link
+ * colour: brand green text on a brand green fill, which renders as an empty
+ * green rectangle. The same applied to a tag, a toggle and a directory row.
+ *
+ * Excluding anything that carries a p234- class keeps the component in charge
+ * of its own colour, which is the rule everywhere else in here. */
+.p234-prose a:not([class*="p234-"]) { color: var(--p234-color-link); text-underline-offset: 2px; }
+.p234-prose a:not([class*="p234-"]):visited { color: var(--p234-color-link-visited); }
 .p234-prose blockquote {
   font-family: var(--p234-type-quote-family);
   font-size: var(--p234-type-quote-size);
@@ -328,6 +337,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
@@ -376,7 +470,10 @@
   font-weight: 700;
   color: var(--p234-color-brand);
 }
-.p234-nextstep a {
+/* Same guard as prose: a link that is already a component keeps its own
+   colour. Without it a button or tag dropped into this box would be styled
+   as one of the box's own link rows. */
+.p234-nextstep a:not([class*="p234-"]) {
   font-family: var(--p234-type-headline-xs-family);
   font-size: var(--p234-type-headline-xs-size);
   line-height: var(--p234-type-headline-xs-leading);
@@ -384,7 +481,7 @@
   color: var(--p234-color-ink);
   text-decoration: none;
 }
-.p234-nextstep a:hover { text-decoration: underline; text-underline-offset: 2px; }
+.p234-nextstep a:not([class*="p234-"]):hover { text-decoration: underline; text-underline-offset: 2px; }
 
 /* --- breadcrumb --------------------------------------------------------
    34 files hand-roll this today, each with its own separator and spacing. */
@@ -408,8 +505,8 @@
   content: "/";
   color: var(--p234-color-rule-strong);
 }
-.p234-breadcrumb a { color: var(--p234-color-ink-muted); text-decoration: none; }
-.p234-breadcrumb a:hover { color: var(--p234-color-ink); text-decoration: underline; text-underline-offset: 2px; }
+.p234-breadcrumb a:not([class*="p234-"]) { color: var(--p234-color-ink-muted); text-decoration: none; }
+.p234-breadcrumb a:not([class*="p234-"]):hover { color: var(--p234-color-ink); text-decoration: underline; text-underline-offset: 2px; }
 .p234-breadcrumb [aria-current="page"] { color: var(--p234-color-ink); }
 
 /* --- figure ------------------------------------------------------------
@@ -626,7 +723,7 @@
   justify-content: center;
   gap: var(--p234-space-5);
 }
-.p234-masthead__editions a {
+.p234-masthead__editions a:not([class*="p234-"]) {
   font-family: var(--p234-type-ui-sm-family);
   font-size: var(--p234-type-ui-sm-size);
   font-weight: 600;
@@ -637,7 +734,7 @@
   white-space: nowrap;
 }
 .p234-masthead__editions a:hover,
-.p234-masthead__editions a[aria-current] { color: var(--p234-color-ink); }
+.p234-masthead__editions a:not([class*="p234-"])[aria-current] { color: var(--p234-color-ink); }
 
 /* Row 2: the wordmark, centred. */
 .p234-masthead__bar {
@@ -755,13 +852,13 @@
 }
 .p234-megamenu ul { list-style: none; margin: 0; padding: 0; }
 .p234-megamenu li { margin-bottom: var(--p234-space-4); }
-.p234-megamenu a {
+.p234-megamenu a:not([class*="p234-"]) {
   font-family: var(--p234-type-ui-family);
   font-size: var(--p234-type-ui-size);
   color: var(--p234-color-ink);
   text-decoration: none;
 }
-.p234-megamenu a:hover { text-decoration: underline; text-underline-offset: 2px; }
+.p234-megamenu a:not([class*="p234-"]):hover { text-decoration: underline; text-underline-offset: 2px; }
 
 /* The phone drawer: a full screen panel, search first, then the sections as
    accordions. <details> so it works with no JavaScript. */
@@ -795,7 +892,7 @@
   gap: var(--p234-space-4);
   padding-bottom: var(--p234-space-5);
 }
-.p234-drawer__links a {
+.p234-drawer__links a:not([class*="p234-"]) {
   font-family: var(--p234-type-ui-family);
   font-size: var(--p234-type-ui-size);
   color: var(--p234-color-ink);
@@ -820,7 +917,7 @@
   max-width: var(--p234-layout-container);
   margin-inline: auto;
 }
-.p234-subnav a {
+.p234-subnav a:not([class*="p234-"]) {
   display: block;
   font-family: var(--p234-type-ui-sm-family);
   font-size: var(--p234-type-ui-sm-size);
@@ -832,8 +929,8 @@
   border-bottom: var(--p234-border-thick) solid transparent;
   margin-bottom: -1px;
 }
-.p234-subnav a:hover { color: var(--p234-color-ink); }
-.p234-subnav a[aria-current] {
+.p234-subnav a:not([class*="p234-"]):hover { color: var(--p234-color-ink); }
+.p234-subnav a:not([class*="p234-"])[aria-current] {
   color: var(--p234-color-ink);
   border-bottom-color: var(--p234-color-brand);
 }
@@ -899,13 +996,13 @@
 }
 .p234-footer ul { list-style: none; margin: 0; padding: 0; }
 .p234-footer li { margin-bottom: var(--p234-space-3); }
-.p234-footer a {
+.p234-footer a:not([class*="p234-"]) {
   font-family: var(--p234-type-ui-sm-family);
   font-size: var(--p234-type-ui-sm-size);
   color: var(--p234-color-ink);
   text-decoration: none;
 }
-.p234-footer a:hover { text-decoration: underline; text-underline-offset: 2px; }
+.p234-footer a:not([class*="p234-"]):hover { text-decoration: underline; text-underline-offset: 2px; }
 .p234-footer__legal {
   border-top: var(--p234-border-hairline) solid var(--p234-color-rule);
   padding-top: var(--p234-space-5);
@@ -1465,7 +1562,7 @@ textarea.p234-field__control {
   margin: 0;
   padding: 0;
 }
-.p234-linkgrid a {
+.p234-linkgrid a:not([class*="p234-"]) {
   display: block;
   border-top: var(--p234-border-thick) solid var(--p234-color-ink);
   padding-top: var(--p234-space-3);
@@ -1475,7 +1572,7 @@ textarea.p234-field__control {
   color: var(--p234-color-ink);
   text-decoration: none;
 }
-.p234-linkgrid a:hover { color: var(--p234-color-brand); }
+.p234-linkgrid a:not([class*="p234-"]):hover { color: var(--p234-color-brand); }
 .p234-linkgrid__count {
   display: block;
   font-family: var(--p234-type-meta-family);