@flamingo-stack/openframe-frontend-core 0.0.703 → 0.0.704-snapshot.20261006133653

package/src/components/ui/table/table-header.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useLgUp } from '../../../hooks/ui/use-media-query';
+import { useContentLgUp } from '../../../hooks/ui/use-content-breakpoint';
 import { cn } from '../../../utils/cn';
 import { Arrow01DownIcon } from '../../icons-v2-generated/arrows/arrow-01-down-icon';
 import { Arrow01UpIcon } from '../../icons-v2-generated/arrows/arrow-01-up-icon';
@@ -72,12 +72,12 @@ export function TableHeader<T = TableRowData>({
     );
   };
 
-  const isLgUp = useLgUp() ?? false;
+  const isLgUp = useContentLgUp() ?? false;
 
   return (
     <div
       className={cn(
-        'relative hidden h-11 items-center gap-4 px-4 py-3 md:flex',
+        'relative hidden h-11 items-center gap-4 px-4 py-3 content-md:flex',
         stickyHeader && `sticky z-10 bg-ods-bg ${stickyHeaderOffset || 'top-0'}`,
         className,
       )}

package/src/components/ui/table/table-skeleton.tsx

@@ -5,7 +5,7 @@ import type { TableCardSkeletonProps } from './types';
 
 // INNER row heights: the bordered row card adds 1px top + bottom, so the
 // outer block totals the designed 68px / 80px.
-const ROW_HEIGHT_DESKTOP = 'h-[66px] md:h-[78px]';
+const ROW_HEIGHT_DESKTOP = 'h-[66px] content-md:h-[78px]';
 /**
  * A `compact` row's floor. Compact rows are content-sized (`py-2`), but every
  * row in one table renders the same cell shapes, so pinning a minimum makes the
@@ -47,7 +47,7 @@ export function TableCardSkeleton({
               the two here made every compact table jump on its first paint. */}
           <div
             className={cn(
-              'hidden items-center gap-4 px-4 md:flex',
+              'hidden items-center gap-4 px-4 content-md:flex',
               compact ? cn('py-2', COMPACT_ROW_MIN_HEIGHT) : cn('py-0', ROW_HEIGHT_DESKTOP),
               rowClassName,
             )}
@@ -81,7 +81,7 @@ export function TableCardSkeleton({
           {/* Mobile Skeleton */}
           <div
             className={cn(
-              'flex items-center justify-start gap-3 px-3 md:hidden',
+              'flex items-center justify-start gap-3 px-3 content-md:hidden',
               // Mirror the real row on mobile too: a compact row is
               // content-sized with a floor, a normal row a fixed height.
               // Hard-wiring ROW_HEIGHT_MOBILE made every COMPACT table jump

package/src/components/ui/table/utils.ts

@@ -16,21 +16,21 @@ export function getHideClasses(hideAt?: TailwindBreakpoint | TailwindBreakpoint[
   const maxBreakpointIndex = Math.max(...breakpoints.map(bp => breakpointOrder.indexOf(bp)));
 
   // For single breakpoint: hide below, show at and above
-  // e.g., hideAt: 'md' -> 'hidden md:flex'
+  // e.g., hideAt: 'md' -> 'hidden content-md:flex'
   if (breakpoints.length === 1) {
-    return `hidden ${breakpoints[0]}:flex`;
+    return `hidden content-${breakpoints[0]}:flex`;
   }
 
   // For multiple breakpoints: hide at specified breakpoints, show after the largest one
-  // e.g., hideAt: ['md', 'lg'] -> 'md:hidden lg:hidden xl:flex'
-  const hideClasses = breakpoints.map(bp => `${bp}:hidden`).join(' ');
+  // e.g., hideAt: ['md', 'lg'] -> 'content-md:hidden content-lg:hidden content-xl:flex'
+  const hideClasses = breakpoints.map(bp => `content-${bp}:hidden`).join(' ');
 
   // Find next breakpoint after the max to show the column
   const nextBreakpointIndex = maxBreakpointIndex + 1;
   const showBreakpoint = breakpointOrder[nextBreakpointIndex];
 
   if (showBreakpoint) {
-    return `${hideClasses} ${showBreakpoint}:flex`;
+    return `${hideClasses} content-${showBreakpoint}:flex`;
   }
 
   // If no next breakpoint (e.g., hideAt: '2xl'), just hide

package/src/components/ui/tag-search-input.tsx

@@ -149,7 +149,7 @@ export function TagSearchInput<T = string>({
       {/* ---- Visible container ---- */}
       <div
         className={cn(
-          'flex h-11 cursor-text items-center rounded-[6px] border md:h-12',
+          'flex h-11 cursor-text items-center rounded-[6px] border content-md:h-12',
           'transition-colors duration-200',
           'border-ods-border bg-ods-card',
           'has-[:focus]:border-ods-accent',
@@ -170,7 +170,7 @@ export function TagSearchInput<T = string>({
       >
         {/* Search icon — pinned left, responsive size */}
         <div className="flex shrink-0 items-center pl-3">
-          <SearchIcon className="size-4 text-ods-text-secondary md:size-6" />
+          <SearchIcon className="size-4 text-ods-text-secondary content-md:size-6" />
         </div>
 
         {/* Middle zone: tags + input — overflow hidden so tags never push clear btn */}
@@ -234,7 +234,7 @@ export function TagSearchInput<T = string>({
             className="flex shrink-0 cursor-pointer items-center justify-center pr-3 transition-opacity hover:opacity-70"
             aria-label="Clear all"
           >
-            <XmarkCircleIcon className="size-4 text-ods-text-secondary md:size-6" />
+            <XmarkCircleIcon className="size-4 text-ods-text-secondary content-md:size-6" />
           </button>
         )}
       </div>

package/src/components/ui/tags-manager.tsx

@@ -169,7 +169,7 @@ export function TagsManager({
           <PopoverPrimitive.Anchor asChild>
             <label
               className={cn(
-                'flex min-h-11 w-full cursor-text flex-wrap items-center gap-2 rounded-[6px] border px-3 py-1 md:min-h-12',
+                'flex min-h-11 w-full cursor-text flex-wrap items-center gap-2 rounded-[6px] border px-3 py-1 content-md:min-h-12',
                 'transition-colors duration-200',
                 'border-ods-border bg-ods-card',
                 'group',
@@ -185,7 +185,7 @@ export function TagsManager({
               {/* Search adornment */}
               <span
                 className={cn(
-                  'flex-shrink-0 text-ods-text-secondary transition-colors duration-200 [&_svg]:size-4 md:[&_svg]:size-6',
+                  'flex-shrink-0 text-ods-text-secondary transition-colors duration-200 [&_svg]:size-4 content-md:[&_svg]:size-6',
                   open && 'text-ods-accent',
                 )}
               >
@@ -237,7 +237,7 @@ export function TagsManager({
                 <button
                   type="button"
                   onClick={handleClearAll}
-                  className="flex flex-shrink-0 items-center justify-center transition-opacity hover:opacity-70 [&_svg]:size-4 md:[&_svg]:size-6"
+                  className="flex flex-shrink-0 items-center justify-center transition-opacity hover:opacity-70 [&_svg]:size-4 content-md:[&_svg]:size-6"
                   aria-label="Clear all tags"
                 >
                   <XmarkCircleIcon className="text-ods-text-secondary" />
@@ -319,7 +319,7 @@ export function TagsManager({
                         aria-selected={isSelected}
                         tabIndex={0}
                         className={cn(
-                          'flex h-11 cursor-pointer items-center border-b border-ods-border px-4 transition-colors last:border-b-0 md:h-12',
+                          'flex h-11 cursor-pointer items-center border-b border-ods-border px-4 transition-colors last:border-b-0 content-md:h-12',
                           'text-h4',
                           isSelected ? 'text-ods-accent' : 'text-ods-text-primary',
                           'group/item hover:bg-ods-bg-hover',
@@ -383,7 +383,7 @@ export function TagsManager({
                       aria-selected={false}
                       tabIndex={0}
                       className={cn(
-                        'flex h-11 cursor-pointer items-center gap-2 px-4 transition-colors text-h4 md:h-12',
+                        'flex h-11 cursor-pointer items-center gap-2 px-4 transition-colors text-h4 content-md:h-12',
                         'hover:bg-ods-bg-hover',
                         isCreating && 'pointer-events-none opacity-50',
                       )}

package/src/components/ui/test-run.tsx

@@ -53,7 +53,7 @@ export function TestResultsSkeleton() {
         <div className="animate-pulse overflow-hidden rounded-[6px] border border-ods-border bg-ods-card">
           {/* Same INNER row heights as the DataTable (66/78px + the 1px card
               border on each side = 68/80px total, per design). */}
-          <div className="flex h-[66px] items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)] md:h-[78px]">
+          <div className="flex h-[66px] items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)] content-md:h-[78px]">
             {Array.from({ length: SKELETON_COLUMNS }).map((_, i) => (
               <div key={`skeleton-cell-${i}`} className="w-[160px] shrink-0">
                 <div className="h-5 w-3/4 rounded-sm bg-ods-bg-surface" />
@@ -114,7 +114,7 @@ export function TestResultsTable({ rows, loading }: { rows: QueryResultRow[]; lo
     <ScrollShadow axis="horizontal">
       <div style={{ minWidth: Math.max(1, columnKeys.length) * RESULT_COLUMN_MIN_WIDTH }}>
         <DataTable table={table}>
-          {/* "flex" overrides the header's default "hidden md:flex" so the
+          {/* "flex" overrides the header's default "hidden content-md:flex" so the
               headers render on mobile too. */}
           <DataTable.Header className="flex flex-col" />
           <DataTable.Body loading={false} />

package/src/components/ui/ticket-info-section.tsx

@@ -153,7 +153,7 @@ export function TicketInfoSection({
   return (
     <div className={cn('overflow-hidden rounded-[6px] border border-ods-border', className)}>
       {/* Header row */}
-      <div className="grid grid-cols-2 items-center gap-4 border-b border-ods-border bg-ods-card px-4 py-3 lg:grid-cols-[1fr_1fr_1fr_auto]">
+      <div className="grid grid-cols-2 items-center gap-4 border-b border-ods-border bg-ods-card px-4 py-3 content-lg:grid-cols-[1fr_1fr_1fr_auto]">
         {/* Organization with image */}
         <div className="flex min-w-0 items-center gap-2">
           <SquareAvatar

package/src/components/ui/ticket-notes-section.tsx

@@ -62,7 +62,7 @@ export function TicketNotesSection({
             onClick={handleSend}
             disabled={!noteText.trim() || isAddingNote}
             className={cn(
-              'flex h-11 w-11 shrink-0 items-center justify-center rounded-[6px] md:h-12 md:w-12',
+              'flex h-11 w-11 shrink-0 items-center justify-center rounded-[6px] content-md:h-12 content-md:w-12',
               'border border-ods-border bg-ods-card',
               'transition-colors hover:bg-ods-bg-hover',
               'disabled:cursor-not-allowed disabled:opacity-50',

package/src/components/ui/ticket-status-config-row.tsx

@@ -93,7 +93,7 @@ export function TicketStatusConfigRow({
     <div
       className={cn(
         // Transparent background — only the border outlines the row.
-        'flex w-full items-start gap-3 rounded-md border border-ods-border md:gap-[var(--spacing-system-m)]',
+        'flex w-full items-start gap-3 rounded-md border border-ods-border content-md:gap-[var(--spacing-system-m)]',
         'p-[var(--spacing-system-m)]',
         // The dragged row travels over its siblings, so it needs an opaque back.
         isDragging && 'bg-ods-bg opacity-70 shadow-lg',
@@ -102,7 +102,7 @@ export function TicketStatusConfigRow({
       {dragAndDropEnabled && (
         <div
           className={cn(
-            'flex h-11 w-8 shrink-0 items-center justify-center text-ods-text-secondary md:h-12',
+            'flex h-11 w-8 shrink-0 items-center justify-center text-ods-text-secondary content-md:h-12',
             fieldRowOffset,
           )}
         >
@@ -131,14 +131,14 @@ export function TicketStatusConfigRow({
           and the chip pins to the card's right edge on tablet/mobile. */}
       <div
         className={cn(
-          'min-w-0 flex-1 items-start gap-x-3 gap-y-[var(--spacing-system-m)] md:gap-x-[var(--spacing-system-m)]',
+          'min-w-0 flex-1 items-start gap-x-3 gap-y-[var(--spacing-system-m)] content-md:gap-x-[var(--spacing-system-m)]',
           isSystem
             ? 'flex flex-wrap'
             : // Mobile custom rows are a strict two-column grid, per the mock:
               // fields (name / color / hex, all one width) on the left, the
               // controls and the chip stacked in the right column. From md up
               // the same children flow as a wrapping flex row.
-              'grid grid-cols-[minmax(0,1fr)_auto] md:flex md:flex-wrap',
+              'grid grid-cols-[minmax(0,1fr)_auto] content-md:flex content-md:flex-wrap',
         )}
       >
         {/* System rows keep the chip beside the name on every width, so the name
@@ -158,7 +158,7 @@ export function TicketStatusConfigRow({
         </div>
 
         {showColorPicker ? (
-          <div className="order-3 flex min-w-0 grow basis-full flex-col gap-[var(--spacing-system-xxs)] md:order-2 md:basis-0">
+          <div className="order-3 flex min-w-0 grow basis-full flex-col gap-[var(--spacing-system-xxs)] content-md:order-2 content-md:basis-0">
             <Label variant="large">Color</Label>
             <ColorPresetSelect value={color} presetKey={presetKey} onChange={onColorChange} />
             {/* Custom hex: a second field row inside the Color column, directly
@@ -170,16 +170,16 @@ export function TicketStatusConfigRow({
             )}
           </div>
         ) : (
-          <div aria-hidden className="hidden min-w-0 grow basis-0 lg:order-2 lg:block" />
+          <div aria-hidden className="hidden min-w-0 grow basis-0 content-lg:order-2 content-lg:block" />
         )}
 
         {/* Reserved desktop column slot (the mock's "No activity Indicator" zone). */}
-        <div aria-hidden className="hidden min-w-0 grow basis-0 lg:order-3 lg:block" />
+        <div aria-hidden className="hidden min-w-0 grow basis-0 content-lg:order-3 content-lg:block" />
 
         {isSystem ? (
           <div
             className={cn(
-              'order-2 flex h-11 min-w-0 grow basis-0 items-center justify-end md:h-12 lg:order-4',
+              'order-2 flex h-11 min-w-0 grow basis-0 items-center justify-end content-md:h-12 content-lg:order-4',
               fieldRowOffset,
             )}
           >
@@ -191,7 +191,7 @@ export function TicketStatusConfigRow({
                 before the controls. */}
             <div
               className={cn(
-                'hidden h-12 min-w-0 grow basis-0 items-center justify-end lg:order-4 lg:flex',
+                'hidden h-12 min-w-0 grow basis-0 items-center justify-end content-lg:order-4 content-lg:flex',
                 fieldRowOffset,
               )}
             >
@@ -199,25 +199,25 @@ export function TicketStatusConfigRow({
             </div>
             {/* Tablet: the chip takes a full row of its own, pinned to the
                 card's right edge (the controls above no longer narrow it). */}
-            <div className="hidden min-w-0 basis-full items-center justify-end md:order-4 md:flex lg:hidden">
+            <div className="hidden min-w-0 basis-full items-center justify-end content-md:order-4 content-md:flex content-lg:hidden">
               {chip}
             </div>
             {/* Mobile: the chip fills the second grid column beside the color
                 field, left-aligned with the controls above it. */}
-            <div className={cn('order-4 flex h-11 min-w-0 items-center md:hidden', fieldRowOffset)}>{chip}</div>
+            <div className={cn('order-4 flex h-11 min-w-0 items-center content-md:hidden', fieldRowOffset)}>{chip}</div>
           </>
         )}
 
         <div
           className={cn(
-            'flex h-11 shrink-0 items-center justify-end gap-[var(--spacing-system-s)] md:h-12 lg:order-5',
-            isSystem ? 'order-3' : 'order-2 md:order-3',
+            'flex h-11 shrink-0 items-center justify-end gap-[var(--spacing-system-s)] content-md:h-12 content-lg:order-5',
+            isSystem ? 'order-3' : 'order-2 content-md:order-3',
             fieldRowOffset,
           )}
         >
           {!isSystem && moveButtons}
           {isSystem ? (
-            <div className="flex w-11 justify-center md:w-12">
+            <div className="flex w-11 justify-center content-md:w-12">
               <TouchFriendlyTooltip content={systemTooltip}>
                 <button
                   type="button"
@@ -238,7 +238,7 @@ export function TicketStatusConfigRow({
                   aria-label="Delete status"
                   disabled={deleteDisabled}
                   onClick={deleteDisabled ? undefined : onDelete}
-                  className={cn('size-11 md:size-12', deleteDisabled && 'pointer-events-none')}
+                  className={cn('size-11 content-md:size-12', deleteDisabled && 'pointer-events-none')}
                 >
                   <TrashIcon className="text-ods-error" />
                 </Button>

package/src/hooks/ui/index.ts

@@ -1,5 +1,6 @@
 // UI Hooks exports
 export * from './use-auto-limit-tags';
+export * from './use-content-breakpoint';
 export * from './use-debounce';
 export * from './use-deferred-error';
 export * from './use-drag-and-drop-enabled';

package/src/hooks/ui/use-content-breakpoint.ts

@@ -0,0 +1,58 @@
+'use client';
+
+import { createContext, createElement, type ReactNode, useContext } from 'react';
+import { LAYOUT_STEPS } from '../../styles/layout-steps';
+import { useLgUp, useMdUp } from './use-media-query';
+
+export type ContentBreakpoint = 'mobile' | 'tablet' | 'desktop';
+
+/** Content-area steps, in px of the area's own width. */
+export const CONTENT_BREAKPOINTS = { md: LAYOUT_STEPS.md.content, lg: LAYOUT_STEPS.lg.content } as const;
+
+/**
+ * Width of the enclosing content area (`AppLayout` with a side panel provides
+ * it), or `null` outside one.
+ */
+export const ContentAreaWidthContext = createContext<number | null>(null);
+
+/**
+ * For window chrome opened from a content area (a modal, a drawer): its subtree
+ * is back on the viewport's steps. Context crosses a portal, so without this
+ * the hooks below would still answer with the content area's width.
+ */
+export function ViewportBreakpoints({ children }: { children: ReactNode }) {
+  return createElement(ContentAreaWidthContext.Provider, { value: null }, children);
+}
+
+export function contentBreakpointFor(width: number): ContentBreakpoint {
+  if (width >= CONTENT_BREAKPOINTS.lg) return 'desktop';
+  if (width >= CONTENT_BREAKPOINTS.md) return 'tablet';
+  return 'mobile';
+}
+
+/**
+ * The breakpoint a component should lay out for: the content area's when it
+ * renders inside one, the viewport's otherwise. `undefined` until the viewport
+ * is known (first client render), like `useMdUp`.
+ */
+export function useContentBreakpoint(): ContentBreakpoint | undefined {
+  const width = useContext(ContentAreaWidthContext);
+  const mdUp = useMdUp();
+  const lgUp = useLgUp();
+  if (width !== null) return contentBreakpointFor(width);
+  if (mdUp === undefined) return undefined;
+  if (lgUp) return 'desktop';
+  return mdUp ? 'tablet' : 'mobile';
+}
+
+/** Content-area counterpart of `useMdUp`. */
+export function useContentMdUp(): boolean | undefined {
+  const breakpoint = useContentBreakpoint();
+  return breakpoint === undefined ? undefined : breakpoint !== 'mobile';
+}
+
+/** Content-area counterpart of `useLgUp`. */
+export function useContentLgUp(): boolean | undefined {
+  const breakpoint = useContentBreakpoint();
+  return breakpoint === undefined ? undefined : breakpoint === 'desktop';
+}

package/src/hooks/ui/use-media-query.ts

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import { LAYOUT_STEPS } from '../../styles/layout-steps';
 import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
 
 /**
@@ -35,8 +36,8 @@ export function useMediaQuery(query: string): boolean | undefined {
  * Predefined breakpoints for common screen sizes
  */
 export const breakpoints = {
-  md: '(min-width: 800px)', // Tablet: 50rem
-  lg: '(min-width: 1280px)', // Desktop: 80rem
+  md: `(min-width: ${LAYOUT_STEPS.md.viewport}px)`, // Tablet
+  lg: `(min-width: ${LAYOUT_STEPS.lg.viewport}px)`, // Desktop
 };
 
 /** @deprecated Use useMdUp instead */

package/src/styles/app-globals.css

@@ -154,6 +154,19 @@ body[data-scroll-locked][data-scroll-locked] {
     transform-origin: left top;
     transform: scale(1);
   }
+
+  /* The chat composer (chat-input.tsx) is a contenteditable div, not a
+     textarea, and WebKit's focus auto-zoom keys off its font size the same
+     way. Keyed on its own data-editor rather than [contenteditable]: a global
+     match would also resize consumers' editors (CodeMirror's .cm-content) and
+     drop the composer back to 14px while disabled. Its placeholder and hover
+     preview overlay it as siblings, so they are pinned with it or the text
+     would change size on the first keystroke. Mention chips stay small only
+     because Tag sets its own text-h5. */
+  [data-editor],
+  [data-editor-ghost] {
+    font-size: 16px !important;
+  }
 }
 
 /* Shadcn/ui HSL CSS variables for Tailwind compatibility */

package/src/styles/index.css

@@ -5,6 +5,8 @@
 @import './ods-interaction-states.css';
 @import './ods-effects.css';
 @import './ods-responsive-tokens.css';
+@import './ods-content-area.css';
+@import './ods-content-area-tokens.css';
 @import './app-globals.css';
 @import './chat-animations.css';
 @import './ods-page-shell.css';

package/src/styles/layout-steps.ts

@@ -0,0 +1,14 @@
+/**
+ * Layout steps in px, the one place they are written. `viewport` is the window
+ * step (`md:`, `useMdUp`), `content` its content-area counterpart
+ * (`content-md:`, `useContentMdUp`): the viewport step less the navigation.
+ *
+ * Imported by tailwind.config.ts, so it must stay free of imports and aliases.
+ */
+export const LAYOUT_STEPS = {
+  sm: { viewport: 640, content: 640 },
+  md: { viewport: 800, content: 720 },
+  lg: { viewport: 1280, content: 1024 },
+  xl: { viewport: 1440, content: 1216 },
+  '2xl': { viewport: 1536, content: 1312 },
+} as const;

package/src/styles/ods-colors.css

@@ -417,6 +417,21 @@
   --color-bg: color-mix(in srgb, var(--color-accent-primary) 2%, var(--ods-system-greys-background));
 }
 
+/* Mingo's own surface (Figma backgrounds/mingo-background): 2% of its cyan
+ * over the page background, whatever the tenant accent. */
+[data-surface='mingo'] {
+  --color-bg: color-mix(in srgb, var(--ods-flamingo-cyan-base) 2%, var(--ods-system-greys-background));
+  --glow-color: var(--ods-flamingo-cyan-base);
+}
+
+/* Mingo-branded controls (its chat list): the cyan as the accent, and the
+ * selection fill (Figma flamingo-colors/cyan-sec) as its secondary. Scoped to
+ * those controls, not the whole panel: an approval's Approve stays yellow. */
+[data-accent='mingo'] {
+  --color-accent-primary: var(--ods-flamingo-cyan-base);
+  --color-accent-secondary: color-mix(in srgb, var(--ods-flamingo-cyan-base) 31%, var(--color-bg));
+}
+
 /* ===================================================================== */
 /* PLATFORM OVERRIDES — brand/accent ONLY.                               */
 /* Reference `--ods-*` so they follow the active theme; never touch      */

package/src/styles/ods-content-area-tokens.css

@@ -0,0 +1,27 @@
+/* GENERATED from ods-responsive-tokens.css. Do not edit: `npm run generate:content-area`. */
+
+@container ods-content not (min-width: 720px) {
+  .ods-content-scope {
+    --device-type: mobile;
+    --device-screen-width: 26.875rem;
+    --spacing-system-xs: 0.25rem;
+    --spacing-system-s: 0.5rem;
+    --spacing-system-m: 0.75rem;
+    --spacing-system-l: 1rem;
+    --spacing-system-xl: 1.5rem;
+    --spacing-system-xxl: 2.5rem;
+    --font-size-h1-title: 2.5rem;
+    --font-size-h2-sub-title: 1.5rem;
+    --font-size-h3-body: 0.875rem;
+    --font-size-h4-body: 0.875rem;
+    --font-size-h5-caption: 0.75rem;
+    --font-size-h6-caption: 0.75rem;
+    --font-line-space-h1-main-title: 2.5rem;
+    --font-line-space-h2-sub-title: 2rem;
+    --font-line-space-h3-body: 1.25rem;
+    --font-line-space-h4-body: 1.25rem;
+    --font-line-space-h5-caption: 1rem;
+    --font-line-space-h6-caption: 1rem;
+    --icon-size-icon-size: 1rem;
+  }
+}

package/src/styles/ods-content-area.css

@@ -0,0 +1,31 @@
+/* Open Design System – Content Area Tokens */
+/*
+ * The responsive tokens in ods-responsive-tokens.css follow the VIEWPORT. A
+ * layout with a docked side panel narrows the content area without the
+ * viewport changing, so content inside `.ods-content-area` follows its OWN
+ * width instead:
+ *
+ *   - `.ods-content-area` is a named inline-size container (`ods-content`).
+ *   - `.ods-content-scope` sits inside it and re-declares the mobile tokens
+ *     while the area is narrower than the content `md` step
+ *     (ods-content-area-tokens.css, generated). The variables cascade, so
+ *     every `text-h*` and `var(--spacing-system-*)` below the scope picks
+ *     them up with no change to the components.
+ *   - From that step up the scope declares nothing and inherits the viewport
+ *     tokens from :root, so a wide content area renders exactly as before.
+ *
+ * A container query cannot style the container itself, hence two elements.
+ * The scope is `display: contents`: it carries the variables without adding a
+ * box, so pages keep `<main>` as their layout parent.
+ *
+ * Layout switches inside the area use the `content-md:` / `content-lg:`
+ * Tailwind variants. The steps themselves live in layout-steps.ts.
+ */
+
+.ods-content-area {
+  container: ods-content / inline-size;
+}
+
+.ods-content-scope {
+  display: contents;
+}

package/src/styles/ods-effects.css

@@ -57,10 +57,12 @@
    the corner, radii 100% × 103% as in the design). Written
    on the class, not as a :root variable, so the accent resolves on the element
    and follows a platform or runtime (tenant) accent set below the root. */
+/* The color is `--glow-color` when a surface sets one (Mingo's cyan), the
+   accent otherwise. */
 .ods-glow-accent-corner {
   background-image: radial-gradient(
     100% 103% at 100% 100%,
-    color-mix(in srgb, var(--color-accent-primary) 4%, transparent) 0%,
-    color-mix(in srgb, var(--color-accent-primary) 0%, transparent) 100%
+    color-mix(in srgb, var(--glow-color, var(--color-accent-primary)) 4%, transparent) 0%,
+    color-mix(in srgb, var(--glow-color, var(--color-accent-primary)) 0%, transparent) 100%
   );
 }

package/src/styles/ods-responsive-tokens.css

@@ -1,7 +1,15 @@
 /* Open Design System – Responsive Design Tokens */
 /* Mobile-first approach: base = mobile, then scale up with min-width */
-
-:root {
+/*
+ * `.ods-viewport-layer` restates the same values on an element: chrome that
+ * follows the WINDOW (a modal, a drawer) but renders inside a narrow content
+ * area, whose scope re-declares the mobile values
+ * (ods-content-area-tokens.css), gets the viewport's tokens back for its own
+ * subtree.
+ */
+
+:root,
+.ods-viewport-layer {
   /* =================================================== */
   /* DEVICE CONTEXT */
   /* =================================================== */
@@ -77,7 +85,8 @@
 /* =================================================== */
 
 @media (min-width: 800px) {
-  :root {
+  :root,
+  .ods-viewport-layer {
     /* Device Context */
     --device-type: tablet;
     --device-screen-width: 50rem;
@@ -122,7 +131,8 @@
 /* =================================================== */
 
 @media (min-width: 1280px) {
-  :root {
+  :root,
+  .ods-viewport-layer {
     /* Device Context */
     --device-type: desktop;
     --device-screen-width: 80rem;