From 4846dcb478d214f87521c8d0b457aae80e9ba2a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 5 Jul 2026 15:03:01 +0200
Subject: [PATCH] fix(ui): remove sub-AA opacity dimming from informational
 text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The muted-foreground token is AA-tuned in both themes; the /70 and /80
opacity modifiers silently undid that (2.9-4.2:1 measured). Every
informational text node drops the modifier for the full token: sleep
hypnogram captions, learning-gate caveat, integration-card setup hints,
module lock notes, glucose panel and token-footer meta, invite-token
hint, wizard hint, notification channel labels and disabled notes (the
disabled state reads through the note and the disabled switches, not
through dimming), plus the resting state of the timestamp, suggestion
chip and sidebar-collapse controls. User-authored mood notes move to
foreground text-sm — user data is never muted. Decorative non-text
strokes (sparkline grid, calendar dot, titration connector) keep their
opacity; icons keep the /60 graphics floor.
---
 src/app/notifications/page.tsx                | 19 +++++++------------
 .../admin/invite-tokens-section.tsx           |  2 +-
 src/components/illness/illness-view.tsx       |  4 +---
 .../coach-panel/guided-questions-card.tsx     |  2 +-
 .../insights/coach-panel/message-thread.tsx   |  2 +-
 .../coach-panel/message-token-footer.tsx      |  2 +-
 .../glucose/glucose-clinical-panel.tsx        |  2 +-
 src/components/insights/sleep-hypnogram.tsx   |  4 ++--
 src/components/layout/sidebar-nav.tsx         |  2 +-
 .../wizard/medication-wizard-dialog.tsx       |  2 +-
 src/components/mood/mood-list.tsx             |  7 +++++--
 .../settings/integrations/fitbit-card.tsx     |  2 +-
 .../integrations/google-health-card.tsx       |  2 +-
 .../settings/integrations/nightscout-card.tsx |  4 ++--
 .../integrations/oauth-provider-card.tsx      |  4 ++--
 .../integrations/setup-guide-link.tsx         |  2 +-
 .../settings/integrations/whoop-card.tsx      |  2 +-
 .../settings/integrations/withings-card.tsx   |  2 +-
 src/components/settings/module-toggle-row.tsx |  4 ++--
 src/components/ui/learning-gate.tsx           |  2 +-
 20 files changed, 34 insertions(+), 38 deletions(-)

diff --git a/src/app/notifications/page.tsx b/src/app/notifications/page.tsx
index 6100eea70..4078419e7 100644
--- a/src/app/notifications/page.tsx
+++ b/src/app/notifications/page.tsx
@@ -205,17 +205,12 @@ export default function NotificationsPage() {
                   key={ch.id}
                   className="px-4 py-3 text-center text-xs font-medium tracking-wider uppercase"
                 >
-                  <span
-                    className={
-                      ch.enabled
-                        ? "text-muted-foreground"
-                        : "text-muted-foreground/70"
-                    }
-                  >
-                    {ch.label}
-                  </span>
+                  {/* Disabled state reads through the note + the disabled
+                      switches below — never through sub-AA opacity dimming
+                      on the label or the note itself. */}
+                  <span className="text-muted-foreground">{ch.label}</span>
                   {!ch.enabled && (
-                    <span className="text-muted-foreground/70 block text-[10px] normal-case">
+                    <span className="text-muted-foreground block text-xs normal-case">
                       {t("notifications.channelDisabled")}
                     </span>
                   )}
@@ -296,11 +291,11 @@ export default function NotificationsPage() {
                     >
                       <Label
                         htmlFor={switchId}
-                        className={`text-sm ${disabled ? "text-muted-foreground/70" : ""}`}
+                        className={`text-sm ${disabled ? "text-muted-foreground" : ""}`}
                       >
                         {ch.label}
                         {disabled && (
-                          <span className="text-muted-foreground/70 ml-1 text-xs">
+                          <span className="text-muted-foreground ml-1 text-xs">
                             ({t("notifications.channelDisabled")})
                           </span>
                         )}
diff --git a/src/components/admin/invite-tokens-section.tsx b/src/components/admin/invite-tokens-section.tsx
index 112330afc..3eebf3546 100644
--- a/src/components/admin/invite-tokens-section.tsx
+++ b/src/components/admin/invite-tokens-section.tsx
@@ -325,7 +325,7 @@ export function InviteTokensSection() {
           <p className="text-muted-foreground mt-1 pl-7 text-xs">
             {t("admin.invites.description")}
           </p>
-          <p className="text-muted-foreground/80 mt-1 flex items-center gap-1.5 pl-7 text-xs">
+          <p className="text-muted-foreground mt-1 flex items-center gap-1.5 pl-7 text-xs">
             <ShieldCheck className="size-3.5 shrink-0" aria-hidden="true" />
             {t("admin.invites.adminOnlyHint")}
           </p>
diff --git a/src/components/illness/illness-view.tsx b/src/components/illness/illness-view.tsx
index d786c6aeb..84a37e9a5 100644
--- a/src/components/illness/illness-view.tsx
+++ b/src/components/illness/illness-view.tsx
@@ -289,9 +289,7 @@ function EpisodeGroup({
             aria-hidden="true"
           />
           {title}
-          <span className="text-muted-foreground/70 normal-case">
-            ({parents.length})
-          </span>
+          <span className="normal-case">({parents.length})</span>
         </button>
         {open ? grid : null}
       </section>
diff --git a/src/components/insights/coach-panel/guided-questions-card.tsx b/src/components/insights/coach-panel/guided-questions-card.tsx
index 33ce28600..3587cadfb 100644
--- a/src/components/insights/coach-panel/guided-questions-card.tsx
+++ b/src/components/insights/coach-panel/guided-questions-card.tsx
@@ -97,7 +97,7 @@ export function GuidedQuestionsCard({
               disabled={disabled}
               onClick={onDismissAll}
               className={cn(
-                "text-muted-foreground/70 hover:text-foreground inline-flex min-h-8 items-center rounded-full px-2.5 text-xs",
+                "text-muted-foreground hover:text-foreground inline-flex min-h-8 items-center rounded-full px-2.5 text-xs",
                 "hover:bg-dracula-purple/10 focus-visible:ring-dracula-purple/40 focus-visible:ring-2 focus-visible:outline-none",
                 "disabled:opacity-60",
               )}
diff --git a/src/components/insights/coach-panel/message-thread.tsx b/src/components/insights/coach-panel/message-thread.tsx
index 686bd83d3..86cbcd8c7 100644
--- a/src/components/insights/coach-panel/message-thread.tsx
+++ b/src/components/insights/coach-panel/message-thread.tsx
@@ -714,7 +714,7 @@ function BubbleTimestamp({
         aria-label={t("insights.coach.messageTimeLabel", { time: label })}
         onClick={() => setOpen((o) => !o)}
         onBlur={() => setOpen(false)}
-        className="peer text-muted-foreground/70 hover:text-muted-foreground focus-visible:ring-ring/50 inline-flex size-11 items-center justify-center rounded outline-none focus-visible:ring-2 sm:size-8"
+        className="peer text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 inline-flex size-11 items-center justify-center rounded outline-none focus-visible:ring-2 sm:size-8"
       >
         <Clock className="size-3" aria-hidden="true" />
       </button>
diff --git a/src/components/insights/coach-panel/message-token-footer.tsx b/src/components/insights/coach-panel/message-token-footer.tsx
index f6b17fe6c..9f0d176ba 100644
--- a/src/components/insights/coach-panel/message-token-footer.tsx
+++ b/src/components/insights/coach-panel/message-token-footer.tsx
@@ -29,7 +29,7 @@ export function MessageTokenFooter({ tokens, model }: MessageTokenFooterProps) {
   return (
     <p
       data-slot="coach-token-footer"
-      className="text-muted-foreground/80 text-[11px] tabular-nums"
+      className="text-muted-foreground text-[11px] tabular-nums"
     >
       {label}
     </p>
diff --git a/src/components/insights/glucose/glucose-clinical-panel.tsx b/src/components/insights/glucose/glucose-clinical-panel.tsx
index 26dc807b6..4704087dd 100644
--- a/src/components/insights/glucose/glucose-clinical-panel.tsx
+++ b/src/components/insights/glucose/glucose-clinical-panel.tsx
@@ -223,7 +223,7 @@ export function GlucoseClinicalPanel() {
             the data. */}
         {clinical.isSpotEstimate ? (
           <p
-            className="text-muted-foreground/80 text-xs"
+            className="text-muted-foreground text-xs"
             data-slot="glucose-spot-caveat"
           >
             {t("insights.bloodGlucose.clinical.spotCaveat")}
diff --git a/src/components/insights/sleep-hypnogram.tsx b/src/components/insights/sleep-hypnogram.tsx
index 6f56369b2..00d06419b 100644
--- a/src/components/insights/sleep-hypnogram.tsx
+++ b/src/components/insights/sleep-hypnogram.tsx
@@ -264,7 +264,7 @@ export function SleepHypnogram({ session }: SleepHypnogramProps) {
           {session.source ? (
             <span
               data-slot="sleep-hypnogram-source"
-              className="text-muted-foreground/70 text-xs"
+              className="text-muted-foreground text-xs"
             >
               {t("insights.sleep.hypnogram.source", {
                 source: session.source,
@@ -278,7 +278,7 @@ export function SleepHypnogram({ session }: SleepHypnogramProps) {
           {session.reconstructed === true && hasBreakdown ? (
             <span
               data-slot="sleep-hypnogram-estimate-note"
-              className="text-muted-foreground/70 text-xs"
+              className="text-muted-foreground text-xs"
             >
               {t("insights.sleep.hypnogram.estimateNote")}
             </span>
diff --git a/src/components/layout/sidebar-nav.tsx b/src/components/layout/sidebar-nav.tsx
index e28186030..2a0edc92e 100644
--- a/src/components/layout/sidebar-nav.tsx
+++ b/src/components/layout/sidebar-nav.tsx
@@ -406,7 +406,7 @@ export function SidebarNav() {
           <button
             onClick={toggleCollapsed}
             className={cn(
-              "text-muted-foreground/80 hover:text-foreground hover:bg-accent z-20 rounded-md p-1 transition-colors",
+              "text-muted-foreground hover:text-foreground hover:bg-accent z-20 rounded-md p-1 transition-colors",
               className,
             )}
             aria-label={t("nav.collapseSidebar")}
diff --git a/src/components/medications/wizard/medication-wizard-dialog.tsx b/src/components/medications/wizard/medication-wizard-dialog.tsx
index 5d789d405..3aa56e8a4 100644
--- a/src/components/medications/wizard/medication-wizard-dialog.tsx
+++ b/src/components/medications/wizard/medication-wizard-dialog.tsx
@@ -538,7 +538,7 @@ function WizardDialogShell({
                     knows what the Next tap leads to (or, on the final
                     slot, that Next saves). */}
                 <p
-                  className="text-muted-foreground/80 flex items-center gap-0.5 pt-0.5 text-xs"
+                  className="text-muted-foreground flex items-center gap-0.5 pt-0.5 text-xs"
                   data-slot="wizard-next-hint"
                 >
                   <ChevronRight
diff --git a/src/components/mood/mood-list.tsx b/src/components/mood/mood-list.tsx
index 9b0963845..89ead15cf 100644
--- a/src/components/mood/mood-list.tsx
+++ b/src/components/mood/mood-list.tsx
@@ -1081,9 +1081,12 @@ function MoodNoteText({
         ref={paragraphRef}
         data-testid="mood-note-text"
         className={
+          // User-authored content renders in foreground — user data is never
+          // muted (the row's timestamp stays muted); italic keeps the note
+          // visually distinct from app copy.
           expanded
-            ? "text-muted-foreground/80 text-xs break-words whitespace-pre-wrap italic"
-            : "text-muted-foreground/80 line-clamp-2 text-xs italic"
+            ? "text-foreground text-sm break-words whitespace-pre-wrap italic"
+            : "text-foreground line-clamp-2 text-sm italic"
         }
       >
         {note}
diff --git a/src/components/settings/integrations/fitbit-card.tsx b/src/components/settings/integrations/fitbit-card.tsx
index 529f5eed7..e5c4f73a1 100644
--- a/src/components/settings/integrations/fitbit-card.tsx
+++ b/src/components/settings/integrations/fitbit-card.tsx
@@ -328,7 +328,7 @@ export function FitbitCard({
                 />
               </div>
             </div>
-            <p className="text-muted-foreground/80 text-xs">
+            <p className="text-muted-foreground text-xs">
               {t("settings.integrationCredentialsHint")}
             </p>
             <div className="flex justify-end">
diff --git a/src/components/settings/integrations/google-health-card.tsx b/src/components/settings/integrations/google-health-card.tsx
index fda8a111f..f07a19473 100644
--- a/src/components/settings/integrations/google-health-card.tsx
+++ b/src/components/settings/integrations/google-health-card.tsx
@@ -359,7 +359,7 @@ export function GoogleHealthCard({
                 />
               </div>
             </div>
-            <p className="text-muted-foreground/80 text-xs">
+            <p className="text-muted-foreground text-xs">
               {t("settings.integrationCredentialsHint")}
             </p>
             <div className="flex justify-end">
diff --git a/src/components/settings/integrations/nightscout-card.tsx b/src/components/settings/integrations/nightscout-card.tsx
index 397f13f25..9392777c1 100644
--- a/src/components/settings/integrations/nightscout-card.tsx
+++ b/src/components/settings/integrations/nightscout-card.tsx
@@ -282,7 +282,7 @@ export function NightscoutCard({ enabled = true }: { enabled?: boolean }) {
               autoCapitalize="none"
               enterKeyHint="done"
             />
-            <p className="text-muted-foreground/80 text-xs">
+            <p className="text-muted-foreground text-xs">
               {t("settings.nightscoutTokenHelp")}
             </p>
           </div>
@@ -292,7 +292,7 @@ export function NightscoutCard({ enabled = true }: { enabled?: boolean }) {
               <Label htmlFor="nightscout-private" className="text-sm">
                 {t("settings.nightscoutPrivateHost")}
               </Label>
-              <p className="text-muted-foreground/80 text-xs">
+              <p className="text-muted-foreground text-xs">
                 {t("settings.nightscoutPrivateHostHelp")}
               </p>
             </div>
diff --git a/src/components/settings/integrations/oauth-provider-card.tsx b/src/components/settings/integrations/oauth-provider-card.tsx
index 4205c2390..49ce5e618 100644
--- a/src/components/settings/integrations/oauth-provider-card.tsx
+++ b/src/components/settings/integrations/oauth-provider-card.tsx
@@ -322,7 +322,7 @@ export function OAuthProviderCard({
                   />
                 </div>
               </div>
-              <p className="text-muted-foreground/80 text-xs">
+              <p className="text-muted-foreground text-xs">
                 {t("settings.integrationCredentialsHint")}
               </p>
               <div className="flex justify-end">
@@ -357,7 +357,7 @@ export function OAuthProviderCard({
 
         {serverUnavailable && (
           <p
-            className="text-muted-foreground/80 text-xs"
+            className="text-muted-foreground text-xs"
             data-testid={`${provider}-unavailable`}
           >
             {t(`${i18nPrefix}Unavailable`)}
diff --git a/src/components/settings/integrations/setup-guide-link.tsx b/src/components/settings/integrations/setup-guide-link.tsx
index 07cbbd9fd..34319a9ce 100644
--- a/src/components/settings/integrations/setup-guide-link.tsx
+++ b/src/components/settings/integrations/setup-guide-link.tsx
@@ -54,7 +54,7 @@ export function IntegrationCardDescription({
   return (
     <>
       <p className="text-foreground">{t(`${i18nPrefix}Description`)}</p>
-      <p className="text-muted-foreground/80">
+      <p className="text-muted-foreground">
         {t(`${i18nPrefix}DescriptionSecondary`)}{" "}
         <a
           href={integrationDocsHref(provider)}
diff --git a/src/components/settings/integrations/whoop-card.tsx b/src/components/settings/integrations/whoop-card.tsx
index 1669ee9df..6c3aefd31 100644
--- a/src/components/settings/integrations/whoop-card.tsx
+++ b/src/components/settings/integrations/whoop-card.tsx
@@ -309,7 +309,7 @@ export function WhoopCard({
                 />
               </div>
             </div>
-            <p className="text-muted-foreground/80 text-xs">
+            <p className="text-muted-foreground text-xs">
               {t("settings.integrationCredentialsHint")}
             </p>
             <div className="flex justify-end">
diff --git a/src/components/settings/integrations/withings-card.tsx b/src/components/settings/integrations/withings-card.tsx
index 1920c17f7..d05f96008 100644
--- a/src/components/settings/integrations/withings-card.tsx
+++ b/src/components/settings/integrations/withings-card.tsx
@@ -353,7 +353,7 @@ export function WithingsCard({
                 />
               </div>
             </div>
-            <p className="text-muted-foreground/80 text-xs">
+            <p className="text-muted-foreground text-xs">
               {t("settings.integrationCredentialsHint")}
             </p>
             <div className="flex justify-end">
diff --git a/src/components/settings/module-toggle-row.tsx b/src/components/settings/module-toggle-row.tsx
index efa4d0a46..3c252864a 100644
--- a/src/components/settings/module-toggle-row.tsx
+++ b/src/components/settings/module-toggle-row.tsx
@@ -106,13 +106,13 @@ export function ModuleToggleRow({
           )}
           <p className="text-muted-foreground text-xs">{description}</p>
           {locked && lockedNote ? (
-            <p className="text-muted-foreground/80 text-xs">{lockedNote}</p>
+            <p className="text-muted-foreground text-xs">{lockedNote}</p>
           ) : null}
         </div>
       </div>
       {operatorDisabled ? (
         // Operator kill-switch: read-only note, no toggle.
-        <span className="text-muted-foreground/80 mt-0.5 shrink-0 text-xs">
+        <span className="text-muted-foreground mt-0.5 shrink-0 text-xs">
           {operatorNote}
         </span>
       ) : managed ? (
diff --git a/src/components/ui/learning-gate.tsx b/src/components/ui/learning-gate.tsx
index 346a94a38..d02bb8bdf 100644
--- a/src/components/ui/learning-gate.tsx
+++ b/src/components/ui/learning-gate.tsx
@@ -83,7 +83,7 @@ export function LearningGate({
       {caveat ? (
         <p
           data-slot="learning-gate-caveat"
-          className="text-muted-foreground/80 text-xs leading-snug"
+          className="text-muted-foreground text-xs leading-snug"
         >
           {caveat}
         </p>