fix(webapp): drop the chip ring on the light themes where the chip fills solid

The contrast-chip ring is drawn in currentcolor. On a tinted chip that's the
accent, which is the edge it was written for; on a chip that fills solid the label
is white, so the ring is a white hairline inset into the fill. Against a dark page
that still reads as an edge, but on white it reads as a stray inner border.

Cancelled for the light themes only, and only for chips that actually fill - the
error badge's bright prominence, the queue health chips, and the Stronger colors
preview on the account page. A `contrast-chip-solid` marker carries that, because
the two remaining users (limits, private connections) stay tinted under the
preference and still want the ring.

The error badge marks only `bright`; `subtle` keeps its tint and its ring.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: samejr

apps/webapp/app/components/errors/ErrorStatusBadge.tsx

@@ -35,6 +35,8 @@ export function ErrorStatusBadge({
     <span
       className={cn(
         "contrast-chip inline-flex items-center rounded px-2 py-0.5 text-xs font-medium",
+        // Only `bright` fills solid under the preference, so only it drops the ring.
+        prominence === "bright" && "contrast-chip-solid",
         (prominence === "bright" ? brightStyles : subtleStyles)[status],
         className
       )}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx

@@ -1584,7 +1584,7 @@ function QueueHealthBadge(health: QueueHealth) {
   return (
     <span
       className={cn(
-        "contrast-chip ml-auto inline-flex w-fit items-center rounded px-2 py-0.5 text-xs font-medium",
+        "contrast-chip contrast-chip-solid ml-auto inline-flex w-fit items-center rounded px-2 py-0.5 text-xs font-medium",
         QUEUE_HEALTH_STYLES[label]
       )}
     >

apps/webapp/app/routes/account._index/route.tsx

@@ -193,7 +193,7 @@ function StrongerColorsPreview() {
   return (
     <span
       aria-hidden
-      className="contrast-chip inline-flex rounded bg-success/10 px-2 py-0.5 text-xs font-medium text-success opacity-0 transition-opacity system:bg-success system:text-white group-hover/preview:opacity-100 group-has-[:focus-visible]/preview:opacity-100"
+      className="contrast-chip contrast-chip-solid inline-flex rounded bg-success/10 px-2 py-0.5 text-xs font-medium text-success opacity-0 transition-opacity system:bg-success system:text-white group-hover/preview:opacity-100 group-has-[:focus-visible]/preview:opacity-100"
     >
       Example
     </span>

apps/webapp/app/routes/storybook.colors/route.tsx

@@ -559,7 +559,7 @@ function QueueHealthChip({ label, className }: { label: string; className: strin
   return (
     <span
       className={cn(
-        "contrast-chip inline-flex w-fit items-center rounded px-2 py-0.5 text-xs font-medium",
+        "contrast-chip contrast-chip-solid inline-flex w-fit items-center rounded px-2 py-0.5 text-xs font-medium",
         className
       )}
     >
@@ -1060,7 +1060,7 @@ export default function Story_() {
       {/* ------------------------------------------------------------------ */}
       <StorySection
         title="5. Tinted chips and badges"
-        description="Same pill, same size, same weight — the tint and the text color are the only variables. These already opt into the contrast-chip ring, so the right-hand column shows what that ring does at the current interface-contrast setting."
+        description="Same pill, same size, same weight — the tint and the text color are the only variables. These already opt into the contrast-chip ring, so the right-hand column shows what that ring does at the current interface-contrast setting — except where the chip fills solid, which cancels it on the light themes."
       >
         <Audit
           title="Error group statuses"

apps/webapp/app/tailwind.css

@@ -349,6 +349,15 @@
     color-mix(in srgb, currentcolor calc(var(--theme-contrast, 0) * 70%), transparent);
 }
 
+/* The ring is drawn in currentcolor, which is white on a chip that fills solid -
+   fine against a dark page, where it reads as an edge, but on white it reads as a
+   stray border inset into the fill. Cancelled there, and only for the chips that
+   actually fill: the tinted ones still need the edge it was written for. */
+[data-icon-contrast="true"]:is([data-theme="light"], [data-theme="white"])
+  .contrast-chip-solid {
+  box-shadow: none;
+}
+
 /*
   Code syntax palette - the trigger-dark highlight theme, shared by the shiki
   theme (streamdown) and the prism theme (CodeBlock). Consumed from JS via