@plus234feed/ds 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plus234feed/ds",
-  "version": "0.5.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);
@@ -461,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);
@@ -469,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. */
@@ -493,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 ------------------------------------------------------------
@@ -711,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;
@@ -722,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 {
@@ -840,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. */
@@ -880,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);
@@ -905,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);
@@ -917,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);
 }
@@ -984,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);
@@ -1550,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);
@@ -1560,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);