@adea-ai/ui 0.71.1 → 0.71.3

package/dist/r/src/components/ui/dialog/dialog.tsx

@@ -1,10 +1,212 @@
 import { Dialog as KobalteDialog } from '@kobalte/core/dialog'
 import { X } from 'lucide-solid'
-import type { ComponentProps, JSX } from 'solid-js'
-import { Show, splitProps } from 'solid-js'
+import type { Accessor, ComponentProps, JSX } from 'solid-js'
+import { createRenderEffect, onCleanup, Show, splitProps } from 'solid-js'
 import { overlayMotion, overlayPositioner, overlayScrim, overlaySurface } from '../../../lib/overlay'
 import { cn } from '../../../lib/utils'
 
+type FocusCycle = {
+  content: HTMLElement
+  opener: HTMLElement | null
+  openerEligible: boolean
+  closed: boolean
+  focusMovedOutside: boolean
+  closeAutoFocusScheduled: boolean
+  frame?: number
+  fallbackTimer?: number
+  observer?: MutationObserver
+  onFocusIn: (event: FocusEvent) => void
+}
+
+function canRestoreFocus(target: HTMLElement): boolean {
+  return (
+    target.isConnected &&
+    target !== document.body &&
+    target !== document.documentElement &&
+    !target.closest('[inert], [aria-hidden="true"]') &&
+    !target.matches(':disabled') &&
+    target.getClientRects().length > 0
+  )
+}
+
+function hasOtherOverlay(content: HTMLElement, opener: HTMLElement): boolean {
+  return [...document.querySelectorAll<HTMLElement>('[role="dialog"], [role="alertdialog"]')].some(
+    (overlay) =>
+      overlay !== content &&
+      !content.contains(overlay) &&
+      !overlay.contains(opener) &&
+      !overlay.closest('[aria-hidden="true"], [inert]') &&
+      overlay.getClientRects().length > 0
+  )
+}
+
+type DialogFocusRestorationOptions = {
+  open: Accessor<boolean>
+  restoreFocusRef?: Accessor<HTMLElement | undefined>
+  onOpenAutoFocus?: ComponentProps<typeof KobalteDialog.Content>['onOpenAutoFocus']
+  onCloseAutoFocus?: ComponentProps<typeof KobalteDialog.Content>['onCloseAutoFocus']
+}
+
+/**
+ * Adds guarded opener capture and restoration to a Kobalte dialog content.
+ * Composed surfaces use this internal helper; it is omitted from the public
+ * dialog barrel so the restoration policy stays with the dialog components.
+ */
+export function createDialogFocusRestoration({
+  open,
+  restoreFocusRef,
+  onOpenAutoFocus: callerOnOpenAutoFocus,
+  onCloseAutoFocus: callerOnCloseAutoFocus,
+}: DialogFocusRestorationOptions) {
+  const focusCycles = new WeakMap<HTMLElement, FocusCycle>()
+  let activeFocusCycle: FocusCycle | undefined
+  let pendingOpener: HTMLElement | null = null
+  let pendingOpenerEligible = false
+
+  createRenderEffect(() => {
+    if (!open() || typeof document === 'undefined') {
+      pendingOpener = null
+      pendingOpenerEligible = false
+      return
+    }
+    const active = restoreFocusRef?.() ?? document.activeElement
+    pendingOpener = active instanceof HTMLElement ? active : null
+    pendingOpenerEligible = active instanceof HTMLElement && canRestoreFocus(active)
+  })
+
+  const finishFocusCycle = (cycle: FocusCycle) => {
+    if (cycle.frame !== undefined) window.cancelAnimationFrame(cycle.frame)
+    if (cycle.fallbackTimer !== undefined) window.clearTimeout(cycle.fallbackTimer)
+    cycle.observer?.disconnect()
+    document.removeEventListener('focusin', cycle.onFocusIn)
+    if (activeFocusCycle === cycle) activeFocusCycle = undefined
+  }
+
+  const scheduleFocusRestore = (cycle: FocusCycle) => {
+    if (cycle.frame !== undefined) return
+    cycle.frame = window.requestAnimationFrame(() => {
+      cycle.frame = undefined
+      const opener = cycle.opener
+      const active = document.activeElement
+      const focusIsAvailable =
+        active === document.body ||
+        active === document.documentElement ||
+        active === cycle.content ||
+        (active instanceof Node && cycle.content.contains(active))
+      if (
+        activeFocusCycle !== cycle ||
+        !cycle.closed ||
+        cycle.focusMovedOutside ||
+        !opener ||
+        !opener.isConnected ||
+        opener.matches(':disabled') ||
+        opener.getClientRects().length === 0 ||
+        !focusIsAvailable ||
+        hasOtherOverlay(cycle.content, opener)
+      ) {
+        finishFocusCycle(cycle)
+        return
+      }
+
+      // Inert and aria-hidden are removed by the dialog's containment cleanup.
+      // Wait for that cleanup before returning focus to the original control.
+      if (opener.closest('[inert], [aria-hidden="true"]')) return
+      if (cycle.openerEligible && canRestoreFocus(opener)) {
+        opener.focus({ preventScroll: true })
+      }
+      finishFocusCycle(cycle)
+    })
+  }
+
+  const onOpenAutoFocus = (event: Event) => {
+    const element = event.currentTarget
+    if (element instanceof HTMLElement) {
+      if (activeFocusCycle) finishFocusCycle(activeFocusCycle)
+
+      const openerWasCaptured = pendingOpener !== null
+      const opener = pendingOpener ?? document.activeElement
+      const openerEligible = openerWasCaptured
+        ? pendingOpenerEligible
+        : opener instanceof HTMLElement && canRestoreFocus(opener)
+      pendingOpener = null
+      pendingOpenerEligible = false
+      const cycle: FocusCycle = {
+        content: element,
+        opener: opener instanceof HTMLElement ? opener : null,
+        openerEligible,
+        closed: false,
+        focusMovedOutside: false,
+        closeAutoFocusScheduled: false,
+        onFocusIn: (focusEvent) => {
+          const target = focusEvent.target
+          if (
+            !(target instanceof HTMLElement) ||
+            target === document.body ||
+            target === document.documentElement ||
+            target === element ||
+            element.contains(target) ||
+            target === (opener instanceof HTMLElement ? opener : null)
+          ) {
+            return
+          }
+          cycle.focusMovedOutside = true
+        },
+      }
+      focusCycles.set(element, cycle)
+      activeFocusCycle = cycle
+      document.addEventListener('focusin', cycle.onFocusIn)
+    }
+    callerOnOpenAutoFocus?.(event)
+  }
+
+  const onCloseAutoFocus = (event: Event) => {
+    const element = event.currentTarget
+    const cycle = element instanceof HTMLElement ? focusCycles.get(element) : undefined
+    callerOnCloseAutoFocus?.(event)
+
+    if (!cycle) return
+    cycle.closed = true
+
+    // A caller that prevents Kobalte's close autofocus owns the focus decision.
+    if (event.defaultPrevented) {
+      finishFocusCycle(cycle)
+      return
+    }
+
+    if (cycle.fallbackTimer !== undefined) {
+      window.clearTimeout(cycle.fallbackTimer)
+      cycle.fallbackTimer = undefined
+    }
+    cycle.closeAutoFocusScheduled = true
+    cycle.observer = new MutationObserver(() => scheduleFocusRestore(cycle))
+    cycle.observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['aria-hidden', 'inert'],
+      childList: true,
+      subtree: true,
+    })
+    scheduleFocusRestore(cycle)
+  }
+
+  onCleanup(() => {
+    const cycle = activeFocusCycle
+    if (!cycle) return
+    cycle.closed = true
+
+    // Kobalte dispatches unmount autofocus from a timer. This fallback only
+    // releases the scoped focus listener if the content did not dispatch it.
+    queueMicrotask(() => {
+      if (cycle.closeAutoFocusScheduled) return
+      cycle.fallbackTimer = window.setTimeout(() => {
+        cycle.fallbackTimer = undefined
+        if (!cycle.closeAutoFocusScheduled) finishFocusCycle(cycle)
+      }, 0)
+    })
+  })
+
+  return { onOpenAutoFocus, onCloseAutoFocus }
+}
+
 /**
  * Dialog.
  *

package/dist/r/src/components/ui/diff-block/diff-block.tsx

@@ -205,8 +205,8 @@ export function DiffBlock(props: DiffBlockProps) {
           {/* The counts are text, so the summary survives greyscale and a reader
               who cannot separate the two line tones still gets the shape of it. */}
           <span class="shrink-0 font-mono text-2xs text-muted-foreground">
-            <span class="text-success">+{stats().added}</span>{' '}
-            <span class="text-destructive">−{stats().removed}</span>
+            <span class="text-foreground">+{stats().added}</span>{' '}
+            <span class="text-foreground">−{stats().removed}</span>
           </span>
         </span>
         {local.actions}
@@ -278,8 +278,8 @@ export function DiffSummary(props: { patch: string; class?: string; onSelect?: (
     >
       <span class="truncate text-foreground">{name()}</span>
       <span class="shrink-0 text-2xs">
-        <span class="text-success">+{stats().added}</span>{' '}
-        <span class="text-destructive">−{stats().removed}</span>
+        <span class="text-foreground">+{stats().added}</span>{' '}
+        <span class="text-foreground">−{stats().removed}</span>
       </span>
     </button>
   )

package/dist/r/src/components/ui/dropdown-menu/dropdown-menu.tsx

@@ -4,6 +4,7 @@ import type { ComponentProps } from 'solid-js'
 import { splitProps } from 'solid-js'
 import {
   menuContentPadding,
+  destructiveMenuItem,
   menuItem,
   menuLabel,
   menuSeparator,
@@ -25,8 +26,9 @@ import { cn } from '../../../lib/utils'
  * highlight, Escape to close and return focus — which is exactly what a
  * hand-rolled `div` with click handlers gets wrong.
  *
- * The `destructive` variant on an item is a *colour*, not a confirmation.
- * Pairing it with an AlertDialog is the caller's job.
+ * The `destructive` variant marks the row with a status-coloured edge and
+ * highlighted tint while keeping its label on the body foreground. Pairing it
+ * with an AlertDialog is the caller's job.
  */
 export function DropdownMenu(props: ComponentProps<typeof KobalteDropdownMenu>) {
   return <KobalteDropdownMenu {...props} />
@@ -83,8 +85,7 @@ export function DropdownMenuItem(
       class={cn(
         menuItem,
         {
-          'text-destructive data-[highlighted]:bg-destructive-subtle data-[highlighted]:text-destructive':
-            local.variant === 'destructive',
+          [destructiveMenuItem]: local.variant === 'destructive',
         },
         local.class
       )}

package/dist/r/src/components/ui/entity-icon/entity-icon.tsx

@@ -17,9 +17,9 @@ import { cn } from '../../../lib/utils'
  * 1. **A glyph is always present.** A brand with no logo gets a monogram, not an
  *    empty box. `fallback` takes the name and returns the glyph, so a caller can
  *    choose initials, a domain letter, or a kind icon.
- * 2. **The tile owns its own contrast.** `tone` tints the background and the
- *    glyph together, so a caller never picks a colour pair and never ships an
- *    icon that disappears against its tile.
+ * 2. **The tile owns its own contrast.** `tone` tints the background while
+ *    monogram text keeps the body foreground; vector glyphs retain the status
+ *    colour. A caller never picks a colour pair or ships a glyph that disappears.
  * 3. **Size is on the control ladder**, not arbitrary. A tile in a rail and a
  *    tile in a detail header are the same two or three sizes every other
  *    interactive element uses.
@@ -51,10 +51,10 @@ export const entityIconVariants = cva(
         primary: 'border-transparent bg-primary-subtle text-primary',
         /** Bare: no fill and no edge, for a tile that already sits on a surface. */
         bare: 'border-transparent bg-transparent text-foreground',
-        success: 'border-transparent bg-success-subtle text-success',
-        warning: 'border-transparent bg-warning-subtle text-warning',
-        danger: 'border-transparent bg-destructive-subtle text-destructive',
-        info: 'border-transparent bg-info-subtle text-info',
+        success: 'border-transparent bg-success-subtle text-foreground [&_svg]:text-success',
+        warning: 'border-transparent bg-warning-subtle text-foreground [&_svg]:text-warning',
+        danger: 'border-transparent bg-destructive-subtle text-foreground [&_svg]:text-destructive',
+        info: 'border-transparent bg-info-subtle text-foreground [&_svg]:text-info',
       },
     },
     defaultVariants: { shape: 'rounded', size: 'md', tone: 'neutral' },

package/dist/r/src/components/ui/field/field.tsx

@@ -44,7 +44,7 @@ export function FieldDescription(props: ComponentProps<typeof KobalteTextField.D
 export function FieldError(props: ComponentProps<typeof KobalteTextField.ErrorMessage>) {
   const [local, rest] = splitProps(props, ['class'])
   return (
-    <KobalteTextField.ErrorMessage class={cn('text-destructive text-sm', local.class)} {...rest} />
+    <KobalteTextField.ErrorMessage class={cn('text-foreground text-sm', local.class)} {...rest} />
   )
 }
 

package/dist/r/src/components/ui/menubar/menubar.tsx

@@ -4,6 +4,7 @@ import type { ComponentProps } from 'solid-js'
 import { splitProps } from 'solid-js'
 import {
   menuContentPadding,
+  destructiveMenuItem,
   menuItem,
   menuLabel,
   menuSeparator,
@@ -98,8 +99,7 @@ export function MenubarItem(
       class={cn(
         menuItem,
         {
-          'text-destructive data-[highlighted]:bg-destructive-subtle data-[highlighted]:text-destructive':
-            local.variant === 'destructive',
+          [destructiveMenuItem]: local.variant === 'destructive',
         },
         local.class
       )}

package/dist/r/src/components/ui/modal-dialog/modal-dialog.tsx

@@ -1,7 +1,8 @@
-import type { ComponentProps, JSX } from 'solid-js'
+import type { Accessor, ComponentProps, JSX } from 'solid-js'
 import { Show, createEffect, createSignal, onCleanup, splitProps } from 'solid-js'
 import { cn } from '../../../lib/utils'
 import {
+  createDialogFocusRestoration,
   Dialog,
   DialogContent,
   DialogDescription,
@@ -12,7 +13,7 @@ import {
 /**
  * ModalDialog.
  *
- * A dialog that owns three things `Dialog` leaves to its caller, each of which is a
+ * A dialog that owns four things `Dialog` leaves to its caller, each of which is a
  * real defect when it is missed:
  *
  *   1. **It unmounts while closed.** An always-mounted dialog that closes as a side
@@ -27,6 +28,11 @@ import {
  *      from `title`, so its name does not depend on the title id registration effect.
  *      Pass `aria-label` to use a different name while keeping the visible title;
  *      pass `aria-labelledby` when another visible label should take precedence.
+ *   4. **It returns focus to the opener.** The opener is captured before the dialog
+ *      autofocuses and restored after the owner closes, unless a close-autofocus
+ *      handler takes control or focus has moved to another layer. For controlled
+ *      dialogs without a composed trigger, pass `restoreFocusRef` when the opener
+ *      cannot be inferred from the focused element.
  *
  * Use `Dialog` directly when you need its composition; use this when you want a
  * dialog that is correct by default.
@@ -50,6 +56,11 @@ export type ModalDialogProps = Omit<
   'aria-label'?: string
   /** Names the dialog from a visible element; ARIA gives it precedence over `aria-label`. */
   'aria-labelledby'?: string
+  /**
+   * Supplies the external control to focus when this controlled dialog closes.
+   * Defaults to the element focused immediately before the dialog opens.
+   */
+  restoreFocusRef?: Accessor<HTMLElement | undefined>
   children?: JSX.Element
 }
 
@@ -65,9 +76,18 @@ export function ModalDialog(props: ModalDialogProps) {
     'children',
     'aria-label',
     'aria-labelledby',
+    'restoreFocusRef',
+    'onOpenAutoFocus',
+    'onCloseAutoFocus',
   ])
 
   const [content, setContent] = createSignal<HTMLElement>()
+  const focusRestoration = createDialogFocusRestoration({
+    open: () => local.open,
+    restoreFocusRef: local.restoreFocusRef,
+    onOpenAutoFocus: local.onOpenAutoFocus,
+    onCloseAutoFocus: local.onCloseAutoFocus,
+  })
 
   createEffect(() => {
     if (!local.open) return
@@ -100,6 +120,8 @@ export function ModalDialog(props: ModalDialogProps) {
             local['aria-labelledby'] ?? (local['aria-label'] !== undefined ? '' : undefined)
           }
           {...rest}
+          onOpenAutoFocus={focusRestoration.onOpenAutoFocus}
+          onCloseAutoFocus={focusRestoration.onCloseAutoFocus}
         >
           <DialogHeader>
             <DialogTitle class="flex items-center gap-2">

package/dist/r/src/components/ui/status-chip/status-chip.tsx

@@ -47,10 +47,10 @@ export const statusDotVariants = cva('size-2 shrink-0 rounded-full', {
 
 const labelTone: Record<StatusTone, string> = {
   neutral: 'text-foreground',
-  success: 'text-success',
-  warning: 'text-warning',
-  danger: 'text-destructive',
-  info: 'text-info',
+  success: 'text-foreground',
+  warning: 'text-foreground',
+  danger: 'text-foreground',
+  info: 'text-foreground',
   unknown: 'text-muted-foreground',
 }
 

package/dist/r/src/lib/overlay.ts

@@ -59,6 +59,10 @@ export const menuItem = [
   '[&_svg:not([class*=text-])]:text-muted-foreground',
 ].join(' ')
 
+/** A destructive action keeps readable text and marks its row with a status edge. */
+export const destructiveMenuItem =
+  'border-s-2 border-destructive ps-1.5 text-foreground data-[highlighted]:bg-destructive-subtle'
+
 /** The label above a group of menu rows. */
 export const menuLabel =
   'px-2 py-1.5 text-2xs font-medium tracking-wide text-muted-foreground uppercase'

package/dist/r/src/lib/themes.ts

@@ -40,6 +40,7 @@ import {
   getAccent,
   hasTheme,
   statusForeground,
+  tint,
   primaryHover,
   primarySubtleCss,
   syntaxRoles,
@@ -76,9 +77,16 @@ export type ThemeColors = {
   accentForeground: string
   destructive: string
   destructiveForeground: string
+  destructiveSubtle: string
   success: string
+  successForeground: string
+  successSubtle: string
   warning: string
+  warningForeground: string
+  warningSubtle: string
   info: string
+  infoForeground: string
+  infoSubtle: string
   border: string
   input: string
   ring: string
@@ -186,9 +194,16 @@ const ROLE_FOR: Readonly<Record<keyof ThemeColors, keyof AdeaThemeRecord['colors
   destructive: 'error',
   // Overwritten below from the measured pairing; nominal here so the table is total.
   destructiveForeground: 'error',
+  destructiveSubtle: 'error',
   success: 'success',
+  successForeground: 'success',
+  successSubtle: 'success',
   warning: 'warning',
+  warningForeground: 'warning',
+  warningSubtle: 'warning',
   info: 'info',
+  infoForeground: 'info',
+  infoSubtle: 'info',
   border: 'border',
   input: 'border',
   ring: 'accent',
@@ -208,6 +223,13 @@ function toVariant(theme: AdeaThemeRecord): ThemeVariant {
   // red it is black and on a deep red it is white, and using the body text would put
   // white on a mid-tone red at about 3:1.
   colors.destructiveForeground = statusForeground(theme, 'error')
+  colors.destructiveSubtle = tint(theme.colors.error, theme.colors.background)
+  colors.successForeground = statusForeground(theme, 'success')
+  colors.successSubtle = tint(theme.colors.success, theme.colors.background)
+  colors.warningForeground = statusForeground(theme, 'warning')
+  colors.warningSubtle = tint(theme.colors.warning, theme.colors.background)
+  colors.infoForeground = statusForeground(theme, 'info')
+  colors.infoSubtle = tint(theme.colors.info, theme.colors.background)
 
   const syntax = syntaxRoles(theme)
 
@@ -374,9 +396,16 @@ export function themeCssVariables(theme: ThemeVariant): Record<string, string> {
     '--accent-foreground': c.accentForeground,
     '--destructive': c.destructive,
     '--destructive-foreground': c.destructiveForeground,
+    '--destructive-subtle': c.destructiveSubtle,
     '--success': c.success,
+    '--success-foreground': c.successForeground,
+    '--success-subtle': c.successSubtle,
     '--warning': c.warning,
+    '--warning-foreground': c.warningForeground,
+    '--warning-subtle': c.warningSubtle,
     '--info': c.info,
+    '--info-foreground': c.infoForeground,
+    '--info-subtle': c.infoSubtle,
     '--border': c.border,
     '--input': c.input,
     '--ring': c.ring,

package/dist/r/src/lib/tokens.ts

@@ -196,11 +196,16 @@ export const colorTokens: TokenDefinition[] = [
     name: 'destructive-subtle',
     kind: 'color',
     themed: true,
-    description: 'Tinted destructive fill: alert banners, invalid fields.',
+    description: 'Opaque destructive tint against the canvas; subtle labels use foreground.',
   },
   { name: 'success', kind: 'color', themed: true, description: 'A completed or healthy state.' },
   { name: 'success-foreground', kind: 'color', themed: true, description: 'Label on `success`.' },
-  { name: 'success-subtle', kind: 'color', themed: true, description: 'Tinted success fill.' },
+  {
+    name: 'success-subtle',
+    kind: 'color',
+    themed: true,
+    description: 'Opaque success tint against the canvas; subtle labels use foreground.',
+  },
   {
     name: 'warning',
     kind: 'color',
@@ -208,10 +213,20 @@ export const colorTokens: TokenDefinition[] = [
     description: 'Something needs attention but is not broken.',
   },
   { name: 'warning-foreground', kind: 'color', themed: true, description: 'Label on `warning`.' },
-  { name: 'warning-subtle', kind: 'color', themed: true, description: 'Tinted warning fill.' },
+  {
+    name: 'warning-subtle',
+    kind: 'color',
+    themed: true,
+    description: 'Opaque warning tint against the canvas; subtle labels use foreground.',
+  },
   { name: 'info', kind: 'color', themed: true, description: 'Neutral information.' },
   { name: 'info-foreground', kind: 'color', themed: true, description: 'Label on `info`.' },
-  { name: 'info-subtle', kind: 'color', themed: true, description: 'Tinted info fill.' },
+  {
+    name: 'info-subtle',
+    kind: 'color',
+    themed: true,
+    description: 'Opaque info tint against the canvas; subtle labels use foreground.',
+  },
 
   // Lines
   {

package/dist/r/src/styles/theme.css

@@ -78,7 +78,7 @@
   --muted: oklch(0.898 0.0108 261.79);
   --muted-foreground: oklch(0.474 0.0245 265.01);
 
-  /* Status. The fills are catalogue roles; the labels are measured. */
+  /* Status fills; solid labels and subtle surfaces come from the catalogue. */
   --destructive: oklch(0.4705 0.1626 25.78);
   --destructive-foreground: oklch(0.933 0.016 261.79);
   --success: oklch(0.4311 0.1809 145.62);
@@ -87,10 +87,10 @@
   --warning-foreground: oklch(0.933 0.016 261.79);
   --info: oklch(0.4915 0.1155 202.14);
   --info-foreground: oklch(0.933 0.016 261.79);
-  --destructive-subtle: color-mix(in oklch, var(--destructive) 16%, transparent);
-  --success-subtle: color-mix(in oklch, var(--success) 16%, transparent);
-  --warning-subtle: color-mix(in oklch, var(--warning) 16%, transparent);
-  --info-subtle: color-mix(in oklch, var(--info) 16%, transparent);
+  --destructive-subtle: oklch(0.8683 0.0365 279.15);
+  --success-subtle: oklch(0.8627 0.0391 245.53);
+  --warning-subtle: oklch(0.8662 0.0334 286.73);
+  --info-subtle: oklch(0.8712 0.0299 253.44);
 
   /* Lines */
   --border: oklch(0.783 0.0144 261.79);
@@ -213,7 +213,7 @@
   --muted: oklch(0.2268 0.0288 265.37);
   --muted-foreground: oklch(0.6308 0.0224 262.91);
 
-  /* Status. The fills are catalogue roles; the labels are measured. */
+  /* Status fills; solid labels and subtle surfaces come from the catalogue. */
   --destructive: oklch(0.7345 0.1626 25.78);
   --destructive-foreground: oklch(0.1918 0.0238 265.37);
   --success: oklch(0.6951 0.1809 145.62);
@@ -222,10 +222,10 @@
   --warning-foreground: oklch(0.1918 0.0238 265.37);
   --info: oklch(0.7555 0.1155 202.14);
   --info-foreground: oklch(0.1918 0.0238 265.37);
-  --destructive-subtle: color-mix(in oklch, var(--destructive) 16%, transparent);
-  --success-subtle: color-mix(in oklch, var(--success) 16%, transparent);
-  --warning-subtle: color-mix(in oklch, var(--warning) 16%, transparent);
-  --info-subtle: color-mix(in oklch, var(--info) 16%, transparent);
+  --destructive-subtle: oklch(0.2678 0.0432 282.23);
+  --success-subtle: oklch(0.2623 0.0458 248.61);
+  --warning-subtle: oklch(0.2657 0.0401 289.81);
+  --info-subtle: oklch(0.2707 0.0366 256.52);
 
   /* Lines */
   --border: oklch(0.3418 0.0214 265.37);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.71.1",
+  "version": "0.71.3",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",
@@ -96,7 +96,7 @@
     "check:tree-shaking": "bun scripts/check-tree-shaking.ts",
     "theme:build": "bun scripts/build-default-theme.ts",
     "theme:check": "bun scripts/build-default-theme.ts --check",
-    "check:packed-layout": "node scripts/check-packed-layout.mjs",
+    "check:packed-layout": "node --test scripts/check-packed-layout-process.test.mjs && node scripts/check-packed-layout.mjs",
     "check:packed-consumer": "bun scripts/check-packed-consumer.ts",
     "check:packed-conversation": "bun scripts/check-packed-conversation.ts",
     "check:packed-transcript": "bun scripts/check-packed-transcript.ts",

package/src/components/composites/appearance-editor/appearance-editor.tsx

@@ -121,7 +121,7 @@ export function AppearanceEditor(props: AppearanceEditorProps) {
               onInput={(event) => props.onChange({ accent: event.currentTarget.value })}
             />
             <Show when={props.customAccentError}>
-              <p id={errorId} role="alert" class="mt-1 text-xs text-destructive">
+              <p id={errorId} role="alert" class="mt-1 text-xs text-foreground">
                 {props.customAccentError}
               </p>
             </Show>

package/src/components/composites/stat/stat.tsx

@@ -59,18 +59,15 @@ export function Stat(props: StatProps) {
         </Show>
       </div>
       <Show when={local.delta}>
-        <div
-          class={cn('flex items-center gap-1 text-xs', {
-            'text-success': local.deltaTone === 'up',
-            'text-destructive': local.deltaTone === 'down',
-            'text-muted-foreground': local.deltaTone === undefined || local.deltaTone === 'neutral',
-          })}
-        >
+        <div class="text-foreground flex items-center gap-1 text-xs">
           <Show when={local.deltaTone === 'up' || local.deltaTone === 'down'}>
             <Dynamic
               component={local.deltaTone === 'down' ? ArrowDownRight : ArrowUpRight}
               aria-hidden="true"
-              class="size-3"
+              class={cn('size-3', {
+                'text-success': local.deltaTone === 'up',
+                'text-destructive': local.deltaTone === 'down',
+              })}
             />
           </Show>
           <span class="tabular-nums">{local.delta}</span>