@flamingo-stack/openframe-frontend-core 0.0.702 → 0.0.703-snapshot.20261006080901

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/hooks/ui/use-resizable-panel-size.ts

@@ -0,0 +1,114 @@
+'use client';
+
+import { useCallback, useMemo, useState } from 'react';
+
+import { clamp } from '../../utils/common';
+import { createLocalStorageAdapter } from '../../utils/local-storage-adapter';
+
+/**
+ * The size of a drag-to-resize panel (`Drawer`, `AppLayoutDrawer`).
+ *
+ * Two values are kept apart, and only one of them is ever stored:
+ *
+ * - the size the user CHOSE (a drag or a key press on the handle), stored, and
+ *   `null` until they choose one;
+ * - the size RENDERED, derived on every render from the choice (or, without
+ *   one, from `defaultSize`) and clamped to the room there is right now.
+ *
+ * The room changing never writes anything. A narrow window, docked dev tools or
+ * a phone-sized emulation shrink the panel for as long as they last and the
+ * chosen size comes back with the room. A panel nobody resized follows
+ * `defaultSize`: given as a function of the room, it tracks the window, and a
+ * changed default reaches everyone who never chose a size.
+ *
+ * The choice is stored as `{ size }` under `<storageKey>:chosen`, never under
+ * `storageKey` itself. The previous implementation wrote a bare number there,
+ * defaults and clamped sizes included, so that value cannot be told apart from
+ * a real choice and is not read; and a page still running that implementation
+ * (a tab left open across a deploy) keeps writing it, which must not replace
+ * the choice.
+ */
+
+/** A fixed size in px, or one computed from the room along the resize axis
+ *  (0 while the room is not measured, and on the server). */
+export type PanelDefaultSize = number | ((available: number) => number);
+
+const CHOSEN_SIZE_KEY_SUFFIX = ':chosen';
+
+export interface UseResizablePanelSizeArgs {
+  /** False leaves the panel at `defaultSize` and reads or writes nothing. */
+  enabled: boolean;
+  minSize: number;
+  maxSize: number;
+  /** Size while the user has chosen none. */
+  defaultSize: PanelDefaultSize;
+  /** Room along the resize axis, in px. 0 while it is not measured yet. */
+  available: number;
+  /** Px of `available` the panel never takes (the gap that keeps the handle on screen). */
+  reserve: number;
+  /** Base localStorage key for the chosen size. Omit to keep it for the mount only. */
+  storageKey?: string;
+}
+
+interface StoredPanelSize {
+  size: number;
+}
+
+function isStoredPanelSize(value: unknown): value is StoredPanelSize {
+  if (typeof value !== 'object' || value === null) return false;
+  const { size } = value as { size?: unknown };
+  return typeof size === 'number' && Number.isFinite(size) && size > 0;
+}
+
+export function useResizablePanelSize({
+  enabled,
+  minSize,
+  maxSize,
+  defaultSize,
+  available,
+  reserve,
+  storageKey,
+}: UseResizablePanelSizeArgs) {
+  const storage = useMemo(
+    () =>
+      enabled && storageKey
+        ? createLocalStorageAdapter<StoredPanelSize>({
+            key: `${storageKey}${CHOSEN_SIZE_KEY_SUFFIX}`,
+            validate: isStoredPanelSize,
+            logTag: `[panel-size:${storageKey}]`,
+          })
+        : null,
+    [enabled, storageKey],
+  );
+
+  // The choice belongs to the storage it was read from. When that changes (a
+  // drawer reused under another key, or resizing switched on after mount) it is
+  // read again during render, so no frame shows the other key's size.
+  const [held, setChosen] = useState(() => ({ storage, size: storage?.load()?.size ?? null }));
+  const chosen = held.storage === storage ? held : { storage, size: storage?.load()?.size ?? null };
+  if (chosen !== held) setChosen(chosen);
+  const chosenSize = chosen.size;
+
+  const clampSize = useCallback(
+    (value: number) => {
+      const ceiling = available > 0 ? Math.min(maxSize, available - reserve) : maxSize;
+      return clamp(value, minSize, Math.max(minSize, ceiling));
+    },
+    [available, reserve, minSize, maxSize],
+  );
+
+  const fallbackSize = typeof defaultSize === 'function' ? defaultSize(available) : defaultSize;
+  const size = enabled ? clampSize(chosenSize ?? fallbackSize) : fallbackSize;
+
+  /** The user's choice. The only path that stores a size. */
+  const setSize = useCallback(
+    (next: number) => {
+      const nextSize = Math.round(clampSize(next));
+      setChosen({ storage, size: nextSize });
+      storage?.save({ size: nextSize });
+    },
+    [clampSize, storage],
+  );
+
+  return { size, setSize, clampSize };
+}

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;

package/tailwind.config.ts

@@ -2,6 +2,7 @@ import containerQueries from '@tailwindcss/container-queries';
 import type { Config } from 'tailwindcss';
 import tailwindcssAnimate from 'tailwindcss-animate';
 import plugin from 'tailwindcss/plugin';
+import { LAYOUT_STEPS } from './src/styles/layout-steps';
 
 const odsTypographyPlugin = plugin(({ addUtilities }) => {
   addUtilities({
@@ -78,6 +79,42 @@ const odsTypographyPlugin = plugin(({ addUtilities }) => {
   });
 });
 
+/**
+ * Content-area breakpoints: `content-md:` and friends apply by the width of the
+ * nearest `.ods-content-area`, not the viewport. Each step is the viewport
+ * step less the navigation sidebar (`sm` is phone-only, where there is none),
+ * so a page with nothing docked beside it switches where it did before.
+ *
+ * Outside a content area (apps without a side panel, overlays portalled to
+ * <body>) each falls back to its viewport step, so a component can switch to
+ * them without changing anywhere else it renders. So does everything under an
+ * `.ods-viewport-layer`: a modal or drawer that renders inside the content
+ * area but follows the window.
+ *
+ * Registered `max-*` first and then ascending, like Tailwind's own screens, so
+ * a wider step wins over a narrower one on the same property.
+ */
+const CONTENT_STEPS = Object.entries(LAYOUT_STEPS).map(([name, step]) => ({ name, ...step }));
+
+const odsContentAreaPlugin = plugin(({ addVariant }) => {
+  const viewportLayer = '.ods-viewport-layer, .ods-viewport-layer *';
+  const byContent = `&:where(:not(${viewportLayer}))`;
+  const byViewport = `&:where(:not(.ods-content-area *), ${viewportLayer})`;
+  for (const { name, content, viewport } of CONTENT_STEPS) {
+    if (name !== 'md' && name !== 'lg') continue;
+    addVariant(`content-max-${name}`, [
+      `@container ods-content not (min-width: ${content}px) { ${byContent} }`,
+      `@media not all and (min-width: ${viewport}px) { ${byViewport} }`,
+    ]);
+  }
+  for (const { name, content, viewport } of CONTENT_STEPS) {
+    addVariant(`content-${name}`, [
+      `@container ods-content (min-width: ${content}px) { ${byContent} }`,
+      `@media (min-width: ${viewport}px) { ${byViewport} }`,
+    ]);
+  }
+});
+
 /**
  * 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
@@ -106,6 +143,8 @@ const config: Config = {
     'lg:hidden',
     'md:flex',
     'lg:flex',
+    // ...and their content-area forms (DataTable `hideAt`)
+    ...['md', 'lg', 'xl', '2xl'].flatMap(step => [`content-${step}:hidden`, `content-${step}:flex`]),
   ],
   theme: {
     container: {
@@ -305,12 +344,8 @@ const config: Config = {
           current: 'var(--ods-current)',
         }),
       },
-      // Custom breakpoints (aligned with ODS responsive tokens from Figma)
-      screens: {
-        md: '800px', // Tablet: 50rem
-        lg: '1280px', // Desktop: 80rem
-        xl: '1440px', // Large desktop: 90rem
-      },
+      // Aligned with the ODS responsive tokens from Figma: md tablet, lg desktop.
+      screens: Object.fromEntries(CONTENT_STEPS.map(({ name, viewport }) => [name, `${viewport}px`])),
 
       borderRadius: {
         lg: 'var(--radius)', // 8px
@@ -429,7 +464,7 @@ const config: Config = {
       },
     },
   },
-  plugins: [tailwindcssAnimate, odsTypographyPlugin, containerQueries],
+  plugins: [tailwindcssAnimate, odsTypographyPlugin, odsContentAreaPlugin, containerQueries],
 };
 
 export default config;