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

package/package.json

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

package/src/components/announcement-bar.tsx

@@ -9,7 +9,6 @@ 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';
@@ -226,26 +225,19 @@ export function AnnouncementBar({
               )}
             </p>
 
-            {/* 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. */}
+            {/* 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. */}
             {hasCta && displayAnnouncement.cta_text && (
-              <div className="hidden md:flex flex-shrink-0 ml-2 md:ml-4">
+              <div className="hidden md:flex flex-shrink-0 ml-1">
                 <Button
                   onClick={handleCtaClick}
-                  variant="outline"
+                  variant="transparent"
                   size="small"
-                  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,
-                  }}
+                  className={barButtonClasses}
                   tabIndex={expanded ? 0 : -1}
                   leftIcon={
                     displayAnnouncement.cta_show_icon && displayAnnouncement.cta_icon_name
@@ -269,7 +261,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 ml-1 md:ml-2 mr-2 md:mr-4">
+          <div className="flex-shrink-0 mr-1 md:mr-3">
             <Button
               onClick={(e) => {
                 e.stopPropagation(); // Prevent triggering the mobile CTA click