@flamingo-stack/openframe-frontend-core 0.0.408 → 0.0.409-snapshot.20260711140256

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.408",
+  "version": "0.0.409-snapshot.20260711140256",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/announcement-bar.tsx

@@ -9,6 +9,7 @@ import {
   isAnnouncementDismissed,
   clearLegacyAnnouncementCache,
 } from '../utils/announcement-storage';
+import { ANNOUNCEMENT_CTA_DEFAULTS } from '../types/announcement';
 import type { Announcement, AnnouncementBarProps, AnnouncementResponse } from '../types/announcement';
 import { getAppType } from '../utils/app-config';
 import { useEndpointsRuntime } from '../contexts/endpoints-runtime-context';
@@ -175,7 +176,7 @@ export function AnnouncementBar({
       aria-label="Announcement"
       aria-hidden={!expanded}
       data-announcement-bar
-      className={`relative w-full z-50 grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none ${className ?? ''}`}
+      className={`relative w-full grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none ${previewMode ? '' : 'z-50'} ${className ?? ''}`}
       style={{ gridTemplateRows: expanded ? '1fr' : '0fr' }}
     >
       {/*
@@ -225,19 +226,26 @@ export function AnnouncementBar({
               )}
             </p>
 
-            {/* CTA - the common Button in the bar's quiet treatment: ghost
-                surface, computed-foreground text, translucent fg-tint hover
-                (barButtonClasses) so nothing renders as a dark slab on the
-                admin color. The admin cta_button_* colors are NOT applied:
-                they were designed for the legacy bespoke treatment. Hidden
-                on mobile, where the whole bar is the tap target. */}
+            {/* CTA - the common Button carrying the ADMIN-CONFIGURED colors
+                (cta_button_background_color / cta_button_text_color are an
+                admin FEATURE, defaults from ANNOUNCEMENT_CTA_DEFAULTS —
+                announcement colors are data, not token surfaces). Inline
+                styles win over the variant's hover classes on every state,
+                so hover feedback is opacity (the bar's original treatment);
+                nothing can render dark-on-dark. Hidden on mobile, where the
+                whole bar is the tap target. */}
             {hasCta && displayAnnouncement.cta_text && (
-              <div className="hidden md:flex flex-shrink-0 ml-1">
+              <div className="hidden md:flex flex-shrink-0 ml-2 md:ml-4">
                 <Button
                   onClick={handleCtaClick}
-                  variant="transparent"
+                  variant="outline"
                   size="small"
-                  className={barButtonClasses}
+                  className="transition-opacity hover:opacity-90"
+                  style={{
+                    backgroundColor: displayAnnouncement.cta_button_background_color || ANNOUNCEMENT_CTA_DEFAULTS.background,
+                    color: displayAnnouncement.cta_button_text_color || ANNOUNCEMENT_CTA_DEFAULTS.text,
+                    borderColor: displayAnnouncement.cta_button_background_color || ANNOUNCEMENT_CTA_DEFAULTS.background,
+                  }}
                   tabIndex={expanded ? 0 : -1}
                   leftIcon={
                     displayAnnouncement.cta_show_icon && displayAnnouncement.cta_icon_name
@@ -261,7 +269,7 @@ export function AnnouncementBar({
               (size="icon-sm": 32px target, >= the 24px WCAG 2.5.8 AA floor,
               16px glyph) with the bar's quiet tint hover. Inert in
               previewMode. */}
-          <div className="flex-shrink-0 mr-1 md:mr-3">
+          <div className="flex-shrink-0 ml-1 md:ml-2 mr-2 md:mr-4">
             <Button
               onClick={(e) => {
                 e.stopPropagation(); // Prevent triggering the mobile CTA click