@plus234feed/ds 0.6.0 → 0.8.0

package/package.json

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

@@ -280,6 +280,71 @@
 .p234-delta[data-direction="up"]::before { content: "\25B2 "; }
 .p234-delta[data-direction="down"]::before { content: "\25BC "; }
 
+/* On a cost page a rise is the bad news.
+ *
+ * The default above is a market reading: up is green because a price you hold
+ * went up. On petrol, food, transport and the cost of a healthy diet the same
+ * arrow means a household pays more, so the two colours swap. The arrow still
+ * points the way the number moved; only good and bad change places.
+ *
+ * This existed as a helper in the application for a while, which meant the
+ * next cost page would have invented its own. */
+.p234-delta--cost[data-direction="up"] { color: var(--p234-color-data-down); }
+.p234-delta--cost[data-direction="down"] { color: var(--p234-color-data-up); }
+
+/* --- tile row ----------------------------------------------------------
+   The grid a row of tiles sits in. Every page that showed figures was
+   writing this inline, with a different minimum each time, and the counts
+   that left one tile alone on a second row were found by eye afterwards.
+
+   A lone tile on its own row reads as a separate section rather than the
+   fourth of four, which is the same fault the footer had with seven link
+   groups in a six column grid.
+
+   `min(100%, ...)` is what keeps a single column on a phone: without it the
+   minimum wins and the row overflows the screen. */
+.p234-tiles {
+  display: grid;
+  gap: var(--p234-space-6);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
+}
+
+/* Quantity queries. At the page measure a 11rem minimum fits three across,
+   so four tiles break as three and one, and seven as three, three and one.
+   A wider minimum drops those to two and four across, which divide evenly.
+   On a wider container they still fit four, and four divides four. */
+.p234-tiles:has(> :nth-child(4):last-child) {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+}
+.p234-tiles:has(> :nth-child(7):last-child) {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
+}
+
+/* --- meter -------------------------------------------------------------
+   An inline bar for one value's share of a whole: a food group's share of a
+   daily diet, a party's share of a vote, a source's share of coverage.
+
+   Not to be confused with .p234-progress, which is the fixed reading bar
+   pinned to the top of the viewport. Using that one inline stacks every bar
+   on the page at the top of the screen, which is exactly what happened the
+   first time this was needed.
+
+   The share is carried by an aria-label on the element, because a bar on its
+   own is read out as nothing at all. */
+.p234-meter {
+  display: block;
+  height: var(--p234-border-thick);
+  background: var(--p234-color-rule);
+  overflow: hidden;
+}
+.p234-meter__fill {
+  display: block;
+  height: 100%;
+  background: var(--p234-color-brand);
+}
+/* A second series in the same list, for a comparison bar under the first. */
+.p234-meter__fill--alt { background: var(--p234-color-ink-subtle); }
+
 .p234-table {
   width: 100%;
   border-collapse: collapse;
@@ -315,17 +380,21 @@
   max-width: var(--p234-measure-text);
 }
 .p234-prose > * + * { margin-top: var(--p234-space-5); }
-/* Links in running text, but not links that are already a component.
+/* Links in running text, meaning links with no styling of their own.
  *
  * `.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); }
+ * The guard excludes any link carrying a class, not only a p234- one, because
+ * the first version missed a link styled by the host application's own
+ * utilities and it went green on green too. The rule is now simply: an
+ * unstyled link gets prose styling, and a link with a class styles itself.
+ * `:not([class])` rather than `:where()` so it does not depend on whether
+ * this stylesheet is imported before or after the host's reset. */
+.p234-prose a:not([class]) { color: var(--p234-color-link); text-underline-offset: 2px; }
+.p234-prose a:not([class]):visited { color: var(--p234-color-link-visited); }
 .p234-prose blockquote {
   font-family: var(--p234-type-quote-family);
   font-size: var(--p234-type-quote-size);
@@ -473,7 +542,7 @@
 /* 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-"]) {
+.p234-nextstep a:not([class]) {
   font-family: var(--p234-type-headline-xs-family);
   font-size: var(--p234-type-headline-xs-size);
   line-height: var(--p234-type-headline-xs-leading);
@@ -481,7 +550,7 @@
   color: var(--p234-color-ink);
   text-decoration: none;
 }
-.p234-nextstep a:not([class*="p234-"]):hover { text-decoration: underline; text-underline-offset: 2px; }
+.p234-nextstep a:not([class]):hover { text-decoration: underline; text-underline-offset: 2px; }
 
 /* --- breadcrumb --------------------------------------------------------
    34 files hand-roll this today, each with its own separator and spacing. */
@@ -505,8 +574,8 @@
   content: "/";
   color: var(--p234-color-rule-strong);
 }
-.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 a:not([class]) { color: var(--p234-color-ink-muted); text-decoration: none; }
+.p234-breadcrumb a:not([class]):hover { color: var(--p234-color-ink); text-decoration: underline; text-underline-offset: 2px; }
 .p234-breadcrumb [aria-current="page"] { color: var(--p234-color-ink); }
 
 /* --- figure ------------------------------------------------------------
@@ -723,7 +792,7 @@
   justify-content: center;
   gap: var(--p234-space-5);
 }
-.p234-masthead__editions a:not([class*="p234-"]) {
+.p234-masthead__editions a:not([class]) {
   font-family: var(--p234-type-ui-sm-family);
   font-size: var(--p234-type-ui-sm-size);
   font-weight: 600;
@@ -734,7 +803,7 @@
   white-space: nowrap;
 }
 .p234-masthead__editions a:hover,
-.p234-masthead__editions a:not([class*="p234-"])[aria-current] { color: var(--p234-color-ink); }
+.p234-masthead__editions a:not([class])[aria-current] { color: var(--p234-color-ink); }
 
 /* Row 2: the wordmark, centred. */
 .p234-masthead__bar {
@@ -852,13 +921,13 @@
 }
 .p234-megamenu ul { list-style: none; margin: 0; padding: 0; }
 .p234-megamenu li { margin-bottom: var(--p234-space-4); }
-.p234-megamenu a:not([class*="p234-"]) {
+.p234-megamenu a:not([class]) {
   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:not([class*="p234-"]):hover { text-decoration: underline; text-underline-offset: 2px; }
+.p234-megamenu a:not([class]):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. */
@@ -892,7 +961,7 @@
   gap: var(--p234-space-4);
   padding-bottom: var(--p234-space-5);
 }
-.p234-drawer__links a:not([class*="p234-"]) {
+.p234-drawer__links a:not([class]) {
   font-family: var(--p234-type-ui-family);
   font-size: var(--p234-type-ui-size);
   color: var(--p234-color-ink);
@@ -917,7 +986,7 @@
   max-width: var(--p234-layout-container);
   margin-inline: auto;
 }
-.p234-subnav a:not([class*="p234-"]) {
+.p234-subnav a:not([class]) {
   display: block;
   font-family: var(--p234-type-ui-sm-family);
   font-size: var(--p234-type-ui-sm-size);
@@ -929,8 +998,8 @@
   border-bottom: var(--p234-border-thick) solid transparent;
   margin-bottom: -1px;
 }
-.p234-subnav a:not([class*="p234-"]):hover { color: var(--p234-color-ink); }
-.p234-subnav a:not([class*="p234-"])[aria-current] {
+.p234-subnav a:not([class]):hover { color: var(--p234-color-ink); }
+.p234-subnav a:not([class])[aria-current] {
   color: var(--p234-color-ink);
   border-bottom-color: var(--p234-color-brand);
 }
@@ -996,13 +1065,13 @@
 }
 .p234-footer ul { list-style: none; margin: 0; padding: 0; }
 .p234-footer li { margin-bottom: var(--p234-space-3); }
-.p234-footer a:not([class*="p234-"]) {
+.p234-footer a:not([class]) {
   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:not([class*="p234-"]):hover { text-decoration: underline; text-underline-offset: 2px; }
+.p234-footer a:not([class]):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);
@@ -1562,7 +1631,7 @@ textarea.p234-field__control {
   margin: 0;
   padding: 0;
 }
-.p234-linkgrid a:not([class*="p234-"]) {
+.p234-linkgrid a:not([class]) {
   display: block;
   border-top: var(--p234-border-thick) solid var(--p234-color-ink);
   padding-top: var(--p234-space-3);
@@ -1572,7 +1641,7 @@ textarea.p234-field__control {
   color: var(--p234-color-ink);
   text-decoration: none;
 }
-.p234-linkgrid a:not([class*="p234-"]):hover { color: var(--p234-color-brand); }
+.p234-linkgrid a:not([class]):hover { color: var(--p234-color-brand); }
 .p234-linkgrid__count {
   display: block;
   font-family: var(--p234-type-meta-family);