From 1b2c165fc9d9eb7a3d501c5667218ee69e751f22 Mon Sep 17 00:00:00 2001
From: Michael Assraf <michael@flamingo.cx>
Date: Sun, 19 Jul 2026 01:47:53 +0200
Subject: [PATCH] Fix carousel dots + CircularProgress accent to follow
 platform accent [preview:none]

Two shared components hardcoded the Flamingo brand color on state
indicators that should track the platform-adaptive accent, so they
rendered pink/cyan on every platform instead of the platform accent
(yellow on openframe/openmsp, pink only on flamingo/flamingo-teaser):

- MediaCarousel active pagination dot: bg-ods-flamingo-pink -> bg-ods-accent
- CircularProgress accent variant: --ods-flamingo-cyan-base -> --ods-accent
  (siblings success/warning/error already use their semantic tokens)

Both now consume --color-accent-primary / --ods-accent, matching the
per-[data-app-type] overrides in ods-colors.css.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 openframe-frontend-core/src/components/media-carousel.tsx   | 6 +++---
 .../src/components/ui/circular-progress.tsx                 | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/openframe-frontend-core/src/components/media-carousel.tsx b/openframe-frontend-core/src/components/media-carousel.tsx
index 9cfa216a3..ae7d58d93 100644
--- a/openframe-frontend-core/src/components/media-carousel.tsx
+++ b/openframe-frontend-core/src/components/media-carousel.tsx
@@ -30,7 +30,7 @@ const ChevronRightIcon = () => (
  * - Slides render through the SSoT `<Video>` (MuxPlayer / lite-youtube
  *   facade) for `video`/`youtube` items and a broken-image-resilient
  *   `<Image>` shim for `image` items.
- * - Dots: 24px hit target, 8px dot, active = flamingo pink (per design).
+ * - Dots: 24px hit target, 8px dot, active = platform accent (per design).
  * - Hover-revealed prev/next arrows (`showArrows`), keyboard arrows, and
  *   touch swipe all preserved from the previous generation.
  */
@@ -314,7 +314,7 @@ export const MediaCarousel = memo(function MediaCarousel({
         )}
       </div>
 
-      {/* Dot pagination (Figma) — 24px hit target, 8px dot, active pink.
+      {/* Dot pagination (Figma) — 24px hit target, 8px dot, active accent.
           Plain grouped buttons (NOT tablist: no roving tabIndex/arrow-key
           model here — aria-current marks the active slide instead). */}
       {(media.length > 1 || reserveDotRow) && (
@@ -334,7 +334,7 @@ export const MediaCarousel = memo(function MediaCarousel({
                   className={cn(
                     "size-2 rounded-full transition-colors duration-150",
                     isActive
-                      ? "bg-ods-flamingo-pink"
+                      ? "bg-ods-accent"
                       : "bg-ods-bg-surface hover:bg-ods-bg-surface-hover"
                   )}
                 />
diff --git a/openframe-frontend-core/src/components/ui/circular-progress.tsx b/openframe-frontend-core/src/components/ui/circular-progress.tsx
index 24d1f44f3..741d59e53 100644
--- a/openframe-frontend-core/src/components/ui/circular-progress.tsx
+++ b/openframe-frontend-core/src/components/ui/circular-progress.tsx
@@ -47,7 +47,7 @@ const variantColors: Record<CircularProgressVariant, { progress: string; track:
     track: SUBTLE_TRACK,
   },
   accent: {
-    progress: 'var(--ods-flamingo-cyan-base)',
+    progress: 'var(--ods-accent)',
     track: SUBTLE_TRACK,
   },
 }