@flamingo-stack/openframe-frontend-core 0.0.438 → 0.0.439-snapshot.20260717095442

package/src/components/vendor-tag.tsx

@@ -70,7 +70,7 @@ export function VendorTag({
               className="w-4 h-4 bg-ods-accent rounded-sm flex items-center justify-center flex-shrink-0"
               style={accentColor ? { backgroundColor: accentColor } : undefined}
             >
-              <OpenSourceIcon width={10} height={10} className="text-[#1A1A1A]" />
+              <OpenSourceIcon width={10} height={10} className="text-ods-text-on-accent" />
             </div>
           )
         }
@@ -125,7 +125,7 @@ export function VendorTag({
           text: text || "Free",
           icon: (
             <div className="w-4 h-4 bg-ods-accent rounded-sm flex items-center justify-center flex-shrink-0">
-              <span className="text-[#1A1A1A] text-[8px] font-bold">$</span>
+              <span className="text-ods-text-on-accent text-[8px] font-bold">$</span>
             </div>
           )
         }
@@ -134,7 +134,7 @@ export function VendorTag({
           text: text || "Freemium",
           icon: (
             <div className="w-4 h-4 bg-ods-accent rounded-sm flex items-center justify-center flex-shrink-0">
-              <span className="text-[#1A1A1A] text-[8px] font-bold">$</span>
+              <span className="text-ods-text-on-accent text-[8px] font-bold">$</span>
             </div>
           )
         }
@@ -152,7 +152,7 @@ export function VendorTag({
           text: text || "Enterprise",
           icon: (
             <div className="w-4 h-4 bg-ods-accent rounded-sm flex items-center justify-center flex-shrink-0">
-              <span className="text-[#1A1A1A] text-[8px] font-bold">E</span>
+              <span className="text-ods-text-on-accent text-[8px] font-bold">E</span>
             </div>
           )
         }
@@ -161,7 +161,7 @@ export function VendorTag({
           text: text || "Recommended",
           icon: (
             <div className="w-4 h-4 bg-ods-accent rounded-sm flex items-center justify-center flex-shrink-0">
-              <span className="text-[#1A1A1A] text-[8px] font-bold">★</span>
+              <span className="text-ods-text-on-accent text-[8px] font-bold">★</span>
             </div>
           )
         }
@@ -174,7 +174,7 @@ export function VendorTag({
             text: "Open Source",
             icon: (
               <div className="w-4 h-4 bg-ods-accent rounded-sm flex items-center justify-center flex-shrink-0">
-                <OpenSourceIcon width={10} height={10} className="text-[#1A1A1A]" />
+                <OpenSourceIcon width={10} height={10} className="text-ods-text-on-accent" />
               </div>
             )
           }
@@ -198,7 +198,7 @@ export function VendorTag({
             text: text || "Classification",
             icon: (
               <div className="w-4 h-4 bg-ods-accent rounded-sm flex items-center justify-center flex-shrink-0">
-                <span className="text-[#1A1A1A] text-[8px] font-bold">C</span>
+                <span className="text-ods-text-on-accent text-[8px] font-bold">C</span>
               </div>
             )
           }
@@ -222,9 +222,8 @@ export function VendorTag({
     <div className={cn(baseClasses, className, hidden && "invisible")}>
       {icon}
       <span className={cn(
-        "font-mono font-semibold uppercase",
-        textColor ? textColor : "text-ods-text-primary",
-        size === 'sm' ? "text-[10px]" : "text-xs"
+        "text-h5 font-semibold",
+        textColor ? textColor : "text-ods-text-primary"
       )}>
         {displayText}
       </span>

package/src/components/yes-no-display.tsx

@@ -22,7 +22,7 @@ export function YesNoDisplay({
     return (
       <div className={`flex items-center gap-2 ${className}`}>
         <LucideCheckCircleIcon className="h-6 w-6" />
-        <span className="text-ods-text-primary text-[16px]">{customText}</span>
+        <span className="text-ods-text-primary text-h6">{customText}</span>
       </div>
     )
   }
@@ -32,7 +32,7 @@ export function YesNoDisplay({
     return (
       <div className={`flex items-center gap-2 ${className}`}>
         <LucideCheckCircleIcon className="h-6 w-6" />
-        <span className="text-ods-text-primary text-[16px]">{yesText}</span>
+        <span className="text-ods-text-primary text-h6">{yesText}</span>
       </div>
     )
   }
@@ -40,7 +40,7 @@ export function YesNoDisplay({
   return (
     <div className={`flex items-center gap-2 ${className}`}>
       <XCircleIcon className="h-6 w-6" />
-      <span className="text-ods-text-secondary text-[16px]">{noText}</span>
+      <span className="text-ods-text-secondary text-h6">{noText}</span>
     </div>
   )
 }

package/src/stories/MingoWelcome.stories.tsx

@@ -26,14 +26,13 @@ const meta: Meta<typeof MingoWelcome> = {
     docs: {
       description: {
         component:
-          'Figma node `7532:222444`. Default (Mingo-mode) chat empty state — a vertically-centred greeting, a 2-up capability grid, an optional "New to OpenFrame?" Guide-chat promo, and a quick-action chip row. Content is configurable with OpenFrame defaults; the only wired action is "Start Guide Chat" (`onStartGuideChat`).',
+          'Figma node `113:69208`. Default (Mingo-mode) chat empty state — a vertically-centred greeting, an optional "New to OpenFrame?" Guide-chat promo, and a quick-action chip row. Content is configurable with OpenFrame defaults; the only wired action is "Start Guide Chat" (`onStartGuideChat`).',
       },
     },
   },
   argTypes: {
     title: { control: false },
     subtitle: { control: false },
-    featureCards: { control: false },
     promo: { control: false },
     quickActions: { control: false },
     onStartGuideChat: { control: false },
@@ -61,14 +60,6 @@ export const Default: Story = {
   },
 }
 
-/** Greeting personalised with a first name. */
-export const WithUserName: Story = {
-  args: {
-    userName: 'Grace',
-    onStartGuideChat: () => console.log('switch to guide mode'),
-  },
-}
-
 /** Guide mode not configured → the promo card and "Start Guide Chat" chip are
  *  suppressed (no dead-end CTA). */
 export const WithoutGuide: Story = {
@@ -100,7 +91,7 @@ export const ReturningUser: Story = {
   },
 }
 
-/** Wide panel (e.g. in-layout / desktop) — the grid columns read roomy. */
+/** Wide panel (e.g. in-layout / desktop). */
 export const Wide: Story = {
   args: {
     onStartGuideChat: () => console.log('switch to guide mode'),

package/src/styles/ods-colors.css

@@ -256,6 +256,8 @@
   --color-bg-overlay: rgba(33, 33, 33, 0.8);
   --color-bg-skeleton: var(--ods-system-greys-black);
   --color-bg-surface: var(--ods-system-greys-soft-grey);
+  --color-bg-surface-hover: var(--ods-system-greys-soft-grey-hover);
+  --color-bg-surface-active: var(--ods-system-greys-soft-grey-action);
   --color-bg-inverted: var(--ods-system-greys-white);
   --color-bg-backdrop: rgba(0, 0, 0, 0.6);
   /* Card layers (consumed by platform blocks; theme owns the value) */

package/tailwind.config.ts

@@ -46,9 +46,37 @@ const odsTypographyPlugin = plugin(({ addUtilities }) => {
       fontSize: 'var(--font-size-h6-caption)',
       lineHeight: 'var(--font-line-space-h6-caption)',
     },
+    // Monospace body/code text (commands, ids, paths, code blocks): Azeret Mono
+    // at the h6 responsive scale, no transform, neutral letter-spacing (unlike
+    // text-h5's uppercase -0.02em label styling).
+    '.text-code': {
+      fontFamily: 'var(--font-family-heading)',
+      fontWeight: 'var(--font-weight-medium)',
+      fontSize: 'var(--font-size-h6-caption)',
+      lineHeight: 'var(--font-line-space-h6-caption)',
+    },
   })
 })
 
+/**
+ * Make Tailwind opacity modifiers (`bg-ods-error/10`, `hover:bg-ods-accent/90`, …)
+ * actually work on var()-based ODS tokens. Without `<alpha-value>` in the color
+ * definition Tailwind v3 silently generates NOTHING for `ods-*\/N` classes — the
+ * element loses that declaration entirely. `color-mix` keeps un-suffixed classes
+ * visually identical (a 100% mix is the color itself) while letting the modifier
+ * scale the alpha.
+ */
+const withAlphaValue = (color: string) => `color-mix(in srgb, ${color} calc(<alpha-value> * 100%), transparent)`
+
+type ColorTree = { [key: string]: string | ColorTree }
+const withAlphaSupport = (tree: ColorTree): ColorTree =>
+  Object.fromEntries(
+    Object.entries(tree).map(([key, value]) => [
+      key,
+      typeof value === 'string' ? withAlphaValue(value) : withAlphaSupport(value),
+    ]),
+  )
+
 const config: Config = {
   content: [
     "./src/**/*.{js,ts,jsx,tsx}",
@@ -110,7 +138,7 @@ const config: Config = {
         // ODS (Open Design System) COLORS
         // =================================================
         // Single nested structure: generates bg-ods-*, text-ods-*, border-ods-* utilities
-        ods: {
+        ods: withAlphaSupport({
           // Backgrounds
           bg: "var(--color-bg)",
           card: "var(--color-bg-card)",
@@ -119,6 +147,8 @@ const config: Config = {
           "bg-hover": "var(--color-bg-hover)",
           "bg-active": "var(--color-bg-active)",
           "bg-surface": "var(--color-bg-surface)",
+          "bg-surface-hover": "var(--color-bg-surface-hover)",
+          "bg-surface-active": "var(--color-bg-surface-active)",
           "card-hover": "var(--color-bg-hover)",
           divider: "var(--color-divider)",
 
@@ -196,12 +226,27 @@ const config: Config = {
 
           // Brand colors (theme-independent)
           flamingo: {
-            pink: "var(--ods-flamingo-pink-base)",
-            cyan: "var(--ods-flamingo-cyan-base)",
+            pink: {
+              DEFAULT: "var(--ods-flamingo-pink-base)",
+              hover: "var(--ods-flamingo-pink-hover)",
+              secondary: "var(--ods-flamingo-pink-secondary)",
+              "secondary-hover": "var(--ods-flamingo-pink-secondary-hover)",
+              "secondary-active": "var(--ods-flamingo-pink-secondary-action)",
+            },
+            cyan: {
+              DEFAULT: "var(--ods-flamingo-cyan-base)",
+              hover: "var(--ods-flamingo-cyan-hover)",
+              secondary: "var(--ods-flamingo-cyan-secondary)",
+              "secondary-hover": "var(--ods-flamingo-cyan-secondary-hover)",
+              "secondary-active": "var(--ods-flamingo-cyan-secondary-action)",
+            },
           },
           "open-yellow": {
             DEFAULT: "var(--ods-open-yellow-base)",
             secondary: "var(--ods-open-yellow-secondary)",
+            light: "var(--ods-open-yellow-light)",
+            "light-hover": "var(--ods-open-yellow-light-hover)",
+            "light-action": "var(--ods-open-yellow-light-action)",
           },
 
           // Attention tokens (ods-colors.css). Components reference these BY
@@ -231,7 +276,7 @@ const config: Config = {
 
           // Adaptive platform color
           current: "var(--ods-current)",
-        },
+        }),
       },
       // Custom breakpoints (aligned with ODS responsive tokens from Figma)
       screens: {