@the-portland-company/shell 0.47.0 → 0.47.1

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+## 0.47.1 — 2026-08-13
+
+Two fixes found by running a consuming app's WCAG contrast gate against 0.47.0.
+Both are 0.47.0 defects; nothing from before 0.47.0 is affected.
+
+### Fixed — `--color-danger` collided with apps' own Tailwind theme colour
+
+0.47.0 introduced `--color-danger` at `:root` to separate "attention/error" from
+"accent". The name was a bad choice: Tailwind v4 derives utilities from
+`--color-*` theme keys, and Petitions already defined
+`--color-danger: var(--tone-danger)` (`#c53030`) to back its `bg-danger` badges.
+The shell's declaration won the cascade, so every `bg-danger` element repainted
+from `#c53030` to `#E63946` — dropping white-on-danger from 6.2:1 to **4.17:1**
+and failing WCAG AA on eight badges in one view.
+
+Renamed to **`--chrome-danger`**. The shell should not squat a generic
+`--color-*` name that apps legitimately own; `--color-accent` stays as it is,
+because that one is a documented chrome alias apps already consume.
+
+### Fixed — a Mode accent must not carry into dark
+
+0.47.0 let a Mode's accent through to dark on the theory that a foreground
+colour is safe there. Measured: Petition Mode's `#15803D` on the dark elevated
+panel `#1F1F1F` is **3.29:1**, and it regressed fourteen routes at once.
+
+A Mode's palette is authored against white. Nothing makes it legible against
+black, and deriving a dark variant would be inventing a dark theme for a Mode
+whose design never had one — which the brief explicitly ruled out. So a Mode
+accent is now reset under `.dark`, and dark keeps the platform's neutral ramp
+exactly as it did on 0.46.0. This is chrome POLICY, in `chrome.css`, so no Mode
+can opt out of it by authoring a value.
+
 ## 0.47.0 — 2026-08-13
 
 Petition Mode has been green since V1 and has rendered red for the whole of the
@@ -20,7 +52,7 @@ Besides mis-signalling, it made the accent unoverridable — apps reasonably set
 
 Those 32 references now resolve a semantic token, split by what the colour
 actually means: `--color-accent` for genuine accent furniture, and a new
-`--color-danger` for attention and error (count badges, the low-fuel meter and
+`--chrome-danger` for attention and error (count badges, the low-fuel meter and
 its nudge, validation messages). The danger set stays red in every Mode — a
 green "3 unread" badge is worse than a red one.
 

package/dist/app-chrome.cjs

@@ -165,7 +165,7 @@ function resolveOrgLogoUrl(url) {
   return `${CORE_APP_ORIGIN}${raw.startsWith("/") ? "" : "/"}${raw}`;
 }
 function topBarIconButtonClass(tone = "default") {
-  const toneClass = tone === "danger" || tone === "warning" ? "text-[color:var(--color-danger)] hover:text-[color:var(--color-danger)]" : "text-[color:var(--topbar-icon-color,var(--muted))] hover:text-[color:var(--topbar-icon-hover-color,var(--foreground))] hover:bg-[color:var(--topbar-icon-hover-bg,transparent)]";
+  const toneClass = tone === "danger" || tone === "warning" ? "text-[color:var(--chrome-danger)] hover:text-[color:var(--chrome-danger)]" : "text-[color:var(--topbar-icon-color,var(--muted))] hover:text-[color:var(--topbar-icon-hover-color,var(--foreground))] hover:bg-[color:var(--topbar-icon-hover-bg,transparent)]";
   return [
     // `group/tbtip` powers the shared <TopBarTooltip> rendered inside the trigger.
     "group/tbtip relative flex items-center justify-center rounded-full border border-[color:var(--line)] transition",
@@ -192,7 +192,7 @@ function useAnyTopBarPanelOpen() {
 }
 function TopBarCountBadge({ count }) {
   if (!(count > 0)) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--color-danger)] px-1 text-[10px] font-normal leading-none text-white", children: count > 99 ? "99+" : count });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-[color:var(--chrome-danger)] px-1 text-[10px] font-normal leading-none text-white", children: count > 99 ? "99+" : count });
 }
 function TopBarTooltip({
   title,
@@ -516,7 +516,7 @@ function FuelRow({
           {
             className: [
               "text-xs font-semibold tabular-nums",
-              low ? "text-[color:var(--color-danger)]" : "text-[color:var(--muted)]"
+              low ? "text-[color:var(--chrome-danger)]" : "text-[color:var(--muted)]"
             ].join(" "),
             children: [
               remaining.toLocaleString(),
@@ -540,7 +540,7 @@ function FuelRow({
       {
         className: [
           "h-full rounded-full transition-[width]",
-          low ? "bg-[color:var(--color-danger)]" : "bg-[color:var(--color-ok,#00A651)]"
+          low ? "bg-[color:var(--chrome-danger)]" : "bg-[color:var(--color-ok,#00A651)]"
         ].join(" "),
         style: { width: `${ratio}%` }
       }
@@ -576,14 +576,14 @@ function LowFuelHint({ lowFuel, orgId }) {
     "div",
     {
       role: "status",
-      className: "absolute right-0 top-[calc(100%+10px)] z-50 w-60 rounded-lg border border-[color:var(--color-danger)] bg-[color:var(--color-danger)] px-3 py-2 text-white shadow-[var(--shadow-soft)]",
+      className: "absolute right-0 top-[calc(100%+10px)] z-50 w-60 rounded-lg border border-[color:var(--chrome-danger)] bg-[color:var(--chrome-danger)] px-3 py-2 text-white shadow-[var(--shadow-soft)]",
       onClick: (e) => e.stopPropagation(),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             "aria-hidden": true,
-            className: "absolute -top-[5px] right-[11px] h-2.5 w-2.5 rotate-45 bg-[color:var(--color-danger)]"
+            className: "absolute -top-[5px] right-[11px] h-2.5 w-2.5 rotate-45 bg-[color:var(--chrome-danger)]"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
@@ -1237,7 +1237,7 @@ function SupportAction({ orgId } = {}) {
                     className: "w-full rounded-lg border border-[color:var(--line)] bg-[color:var(--panel)] px-3 py-2 text-sm text-[color:var(--foreground)] placeholder:text-[color:var(--muted)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-accent)]"
                   }
                 ),
-                showEmailError ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 block text-xs text-[color:var(--color-danger)]", children: "Enter an email so support can reply." }) : null
+                showEmailError ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 block text-xs text-[color:var(--chrome-danger)]", children: "Enter an email so support can reply." }) : null
               ] }) : null,
               missingPhone ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "mt-3 block", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 block text-xs font-semibold text-[color:var(--foreground)]", children: "Your phone \u2014 optional" }),
@@ -1262,7 +1262,7 @@ function SupportAction({ orgId } = {}) {
                   className: "mt-4 w-full resize-y rounded-lg border border-[color:var(--line)] bg-[color:var(--panel)] px-3 py-2 text-sm text-[color:var(--foreground)] placeholder:text-[color:var(--muted)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-accent)]"
                 }
               ),
-              state === "error" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-[color:var(--color-danger)]", children: "Sending failed \u2014 try again." }) : null,
+              state === "error" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-[color:var(--chrome-danger)]", children: "Sending failed \u2014 try again." }) : null,
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "button",