@duro-app/ui 5.13.0 → 5.15.0

package/src/components/Select/Select.native.tsx

@@ -0,0 +1,224 @@
+import {
+  Children,
+  createContext,
+  type ReactNode,
+  type RefObject,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+} from 'react'
+import {Pressable} from 'react-native'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+import {useSelectState} from './selectState'
+import {Drawer} from '../Drawer/Drawer'
+import {Listbox} from '../Listbox/Listbox'
+import {Button} from '../Button/Button'
+import {nativeStyles} from './native.css'
+import {Chevron} from '../SideNav/Chevron'
+import {useTooltipHint} from '../Tooltip/TooltipHint'
+import {focusForAccessibility} from '../../shared/accessibilityFocus'
+import {textOf} from '../../shared/textOf'
+import type {ControlSize} from '../../shared/types'
+
+/** The picker sheet's detents (plan N0, Decision 5). */
+const SNAP_POINTS = ['medium', 'large'] as const
+
+interface NativeSelectContextValue {
+  value: string | null
+  open: boolean
+  setOpen: (open: boolean) => void
+  choose: (value: string) => void
+  labels: Record<string, string>
+  registerLabel: (value: string, label: string) => void
+  listboxId: string
+  triggerRef: RefObject<unknown>
+}
+
+const SelectContext = createContext<NativeSelectContextValue | null>(null)
+
+function useSelect() {
+  const ctx = useContext(SelectContext)
+  if (!ctx) throw new Error('Select compound components must be used within Select.Root')
+  return ctx
+}
+
+/**
+ * True while Popup renders its items unseen, so each registers its label
+ * before the sheet first opens (the web reads them from the hidden list).
+ */
+const CollectContext = createContext(false)
+
+interface RootProps {
+  /** The web's hidden form input; native has no form post. */
+  name?: string
+  defaultValue?: string
+  value?: string
+  onValueChange?: (value: string | null) => void
+  initialLabels?: Record<string, string>
+  children: ReactNode
+}
+
+/**
+ * Native Select (plan N0, Slice C): the trigger opens a bottom sheet (a
+ * Drawer at the medium and large detents) listing the options; a press picks
+ * one and closes the sheet (C0 direction A, "Check"). The screen reader's
+ * focus returns to the trigger.
+ */
+function Root({defaultValue, value, onValueChange, initialLabels, children}: RootProps) {
+  const state = useSelectState({defaultValue, value, onValueChange, initialLabels})
+  const {open, setOpen, setValue} = state
+  const listboxId = useId()
+  const triggerRef = useRef<unknown>(null)
+
+  const wasOpen = useRef(open)
+  useEffect(() => {
+    if (wasOpen.current && !open) focusForAccessibility(triggerRef.current, 'Select')
+    wasOpen.current = open
+  }, [open])
+
+  const ctx: NativeSelectContextValue = {
+    value: state.value,
+    open,
+    setOpen,
+    choose: (v) => {
+      setValue(v)
+      setOpen(false)
+    },
+    labels: state.labels,
+    registerLabel: state.registerLabel,
+    listboxId,
+    triggerRef,
+  }
+
+  return (
+    <SelectContext.Provider value={ctx}>
+      <Drawer.Root open={open} onOpenChange={setOpen} anchor="bottom" snapPoints={SNAP_POINTS}>
+        <html.div style={[styles.root, nativeStyles.nativeFlex]}>{children}</html.div>
+      </Drawer.Root>
+    </SelectContext.Provider>
+  )
+}
+
+/**
+ * An RN Pressable host, so it carries an enclosing Tooltip's text as its
+ * accessibility hint (RSD drops `accessibilityHint` on html.*).
+ */
+function Trigger({
+  children,
+  'aria-label': ariaLabel,
+  size = 'default',
+}: {
+  children: ReactNode
+  'aria-label'?: string
+  size?: ControlSize
+}) {
+  const {open, setOpen, triggerRef} = useSelect()
+  const hint = useTooltipHint()
+  return (
+    <Pressable
+      ref={triggerRef as RefObject<never>}
+      onPress={() => setOpen(true)}
+      accessibilityRole="combobox"
+      accessibilityLabel={ariaLabel}
+      accessibilityHint={hint}
+      accessibilityState={{expanded: open}}
+    >
+      <html.div
+        style={[styles.trigger, nativeStyles.nativeFlex, size === 'small' && styles.triggerSmall]}
+      >
+        {children}
+      </html.div>
+    </Pressable>
+  )
+}
+
+function Value({placeholder}: {placeholder?: string}) {
+  const {value, labels} = useSelect()
+  const display = value ? (labels[value] ?? value) : null
+  return (
+    <html.span style={display ? styles.value : styles.placeholder}>
+      {display ?? placeholder}
+    </html.span>
+  )
+}
+
+function Icon({children}: {children?: ReactNode}) {
+  return (
+    <html.div style={[styles.icon, nativeStyles.nativeFlex, nativeStyles.iconDown]}>
+      {children ?? <Chevron color="textMuted" />}
+    </html.div>
+  )
+}
+
+interface PopupProps {
+  children: ReactNode
+  /** The sheet's title (native) and the list's accessible name. */
+  label?: string
+  /** The sheet header's text button that closes it unchanged (native). Default: 'Cancel' */
+  cancelLabel?: string
+  /** Shown in place of the list when there are no items. */
+  empty?: ReactNode
+}
+
+function Popup({children, label, cancelLabel = 'Cancel', empty}: PopupProps) {
+  const {open, choose, listboxId} = useSelect()
+  const hasItems = Children.toArray(children).length > 0
+  return (
+    <>
+      <CollectContext.Provider value={true}>{children}</CollectContext.Provider>
+      <Drawer.Portal>
+        <Drawer.Header titleAlign="center">
+          {label ? <Drawer.Title>{label}</Drawer.Title> : null}
+          <Drawer.Close>
+            <Button variant="link">{cancelLabel}</Button>
+          </Drawer.Close>
+        </Drawer.Header>
+        {!hasItems && empty != null ? (
+          <Listbox.Empty>{empty}</Listbox.Empty>
+        ) : (
+          <Drawer.Body flush>
+            <Listbox.Root id={listboxId} open={open} onSelect={choose} aria-label={label}>
+              {children}
+            </Listbox.Root>
+          </Drawer.Body>
+        )}
+      </Drawer.Portal>
+    </>
+  )
+}
+
+interface ItemProps {
+  value: string
+  children: ReactNode
+}
+
+function Item({value: itemValue, children}: ItemProps) {
+  const collecting = useContext(CollectContext)
+  const {value, registerLabel} = useSelect()
+  const label = textOf(children)
+  useEffect(() => {
+    if (collecting && label) registerLabel(itemValue, label)
+  }, [collecting, itemValue, label, registerLabel])
+  if (collecting) return null
+  return (
+    <Listbox.Option value={itemValue} selected={value === itemValue}>
+      {children}
+    </Listbox.Option>
+  )
+}
+
+function ItemText({children}: {children: ReactNode}) {
+  return <html.span>{children}</html.span>
+}
+
+export const Select = {
+  Root,
+  Trigger,
+  Value,
+  Icon,
+  Popup,
+  Item,
+  ItemText,
+}

package/src/components/Select/Select.stories.tsx

@@ -1,5 +1,5 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {expect, screen} from 'storybook/test'
+import {expect, fn, screen} from 'storybook/test'
 import {Dialog} from '../Dialog/Dialog'
 import {Select} from './Select'
 
@@ -213,3 +213,51 @@ export const ArrowKeysOpen: Story = {
     await userEvent.keyboard('{Escape}')
   },
 }
+
+const MODELS = ['claude-opus-5-5', 'claude-sonnet-5-5', 'claude-haiku-5-5', 'gpt-6', 'gemini-3-pro']
+
+interface LabelledArgs {
+  label: string
+  empty: string
+  itemCount: number
+  onValueChange?: (value: string | null) => void
+}
+
+/**
+ * Popup's label names the list (and titles the native sheet); empty replaces
+ * the list when there are no items. Set itemCount to 0 for the empty state.
+ */
+export const LabelledAndEmpty: StoryObj<LabelledArgs> = {
+  args: {
+    label: 'Model',
+    empty: 'No models. Connect a provider to choose a model.',
+    itemCount: 0,
+    onValueChange: fn(),
+  },
+  argTypes: {
+    label: {control: 'text', description: "Select.Popup: the list's accessible name"},
+    empty: {control: 'text', description: 'Select.Popup: shown when there are no items'},
+    itemCount: {control: {type: 'range', min: 0, max: MODELS.length, step: 1}},
+  },
+  render: ({label, empty, itemCount, onValueChange}) => (
+    <Select.Root onValueChange={onValueChange}>
+      <Select.Trigger aria-label={label}>
+        <Select.Value placeholder="Choose a model" />
+        <Select.Icon />
+      </Select.Trigger>
+      <Select.Popup label={label} empty={empty}>
+        {MODELS.slice(0, itemCount).map((m) => (
+          <Select.Item key={m} value={m}>
+            {m}
+          </Select.Item>
+        ))}
+      </Select.Popup>
+    </Select.Root>
+  ),
+  play: async ({canvas, userEvent}) => {
+    await userEvent.click(canvas.getByRole('combobox'))
+    const list = screen.getByRole('listbox', {name: 'Model'})
+    await expect(list).toHaveTextContent(/No models/)
+    await expect(screen.queryAllByRole('option')).toHaveLength(0)
+  },
+}

package/src/components/Select/Select.tsx

@@ -1,4 +1,4 @@
-import {type ReactNode, useRef, useId, useEffect, useLayoutEffect, useState} from 'react'
+import {Children, type ReactNode, useRef, useId, useEffect, useLayoutEffect, useState} from 'react'
 import {createPortal} from 'react-dom'
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
@@ -126,7 +126,17 @@ function Icon({children}: {children?: ReactNode}) {
 // `overflow: hidden` / `transform` containing blocks (notably Dialog/Drawer).
 // The listbox stays mounted while closed (display: none) so Items can register
 // their labels from DOM text before the popup is ever opened.
-function Popup({children}: {children: ReactNode}) {
+interface PopupProps {
+  children: ReactNode
+  /** The list's accessible name; on native also the sheet's title. */
+  label?: string
+  /** Native only: the sheet header's text button that closes it unchanged. Default: 'Cancel' */
+  cancelLabel?: string
+  /** Shown in place of the list when there are no items. */
+  empty?: ReactNode
+}
+
+function Popup({children, label, empty}: PopupProps) {
   const {open, close, listboxId, triggerRef} = useSelect()
   const mount = usePortalMount()
   const [coords, setCoords] = useState<{top: number; left: number; width: number} | null>(null)
@@ -164,6 +174,7 @@ function Popup({children}: {children: ReactNode}) {
         ref={listboxRef}
         id={listboxId}
         role="listbox"
+        aria-label={label}
         aria-hidden={!open}
         style={[
           styles.popup,
@@ -171,7 +182,13 @@ function Popup({children}: {children: ReactNode}) {
           coords && styles.popupPosition(coords.top, coords.left, coords.width),
         ]}
       >
-        <ControlContextBoundary>{children}</ControlContextBoundary>
+        <ControlContextBoundary>
+          {empty != null && Children.toArray(children).length === 0 ? (
+            <html.div style={styles.empty}>{empty}</html.div>
+          ) : (
+            children
+          )}
+        </ControlContextBoundary>
       </html.div>
     </>
   )

package/src/components/Select/native.css.ts

@@ -0,0 +1,13 @@
+import {css} from 'react-strict-dom'
+
+/** Native Select additions to the shared styles. */
+export const nativeStyles = css.create({
+  // RSD on native lays out only display: flex, not the web's inline-flex.
+  nativeFlex: {
+    display: 'flex',
+  },
+  // SideNav's chevron points right; a picker's points down.
+  iconDown: {
+    transform: 'rotate(90deg)',
+  },
+})

package/src/components/Select/selectState.ts

@@ -0,0 +1,36 @@
+import {useCallback, useState} from 'react'
+import {useControllableValue} from '../../hooks/useControllableValue'
+
+export interface SelectStateOptions {
+  defaultValue?: string
+  value?: string
+  onValueChange?: (value: string | null) => void
+  initialLabels?: Record<string, string>
+}
+
+/**
+ * The Select's state both platforms share (plan N0, Decision 10): the value
+ * (controlled or not), whether it is open, and each option's label. Focus,
+ * highlight, document order and keys are the web adapter's (useSelectRoot);
+ * native presses and the sheet are Select.native's.
+ */
+export function useSelectState({
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  initialLabels,
+}: SelectStateOptions) {
+  const [value, setValue] = useControllableValue<string | null>(
+    controlledValue,
+    defaultValue ?? null,
+    onValueChange,
+  )
+  const [open, setOpen] = useState(false)
+  const [labels, setLabels] = useState<Record<string, string>>(initialLabels ?? {})
+
+  const registerLabel = useCallback((v: string, label: string) => {
+    setLabels((prev) => (prev[v] === label ? prev : {...prev, [v]: label}))
+  }, [])
+
+  return {value, setValue, open, setOpen, labels, registerLabel}
+}

package/src/components/Select/styles.css.ts

@@ -124,4 +124,15 @@ export const styles = css.create({
   hidden: {
     display: 'none',
   },
+  // Popup's `empty`: no items to choose from.
+  empty: {
+    paddingTop: spacing.md,
+    paddingBottom: spacing.md,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    color: colors.textMuted,
+    textAlign: 'center',
+  },
 })

package/src/components/Select/useSelectRoot.ts

@@ -1,27 +1,13 @@
 import {useState, useCallback, useMemo, useRef, useId, useEffect} from 'react'
-import {useControllableValue} from '../../hooks/useControllableValue'
 import type {SelectContextValue} from './SelectContext'
+import {useSelectState, type SelectStateOptions} from './selectState'
 
-interface UseSelectRootOptions {
-  defaultValue?: string
-  value?: string
-  onValueChange?: (value: string | null) => void
-  initialLabels?: Record<string, string>
-}
-
-export function useSelectRoot({
-  defaultValue,
-  value: controlledValue,
-  onValueChange,
-  initialLabels,
-}: UseSelectRootOptions) {
-  const [value, setValue] = useControllableValue<string | null>(
-    controlledValue,
-    defaultValue ?? null,
-    onValueChange,
-  )
-  const [open, setOpen] = useState(false)
-  const [labels, setLabels] = useState<Record<string, string>>(initialLabels ?? {})
+/**
+ * The web adapter over the shared Select state: the highlighted option,
+ * document order, keys and DOM focus (the WAI-ARIA select-only combobox).
+ */
+export function useSelectRoot(options: SelectStateOptions) {
+  const {value, setValue, open, setOpen, labels, registerLabel} = useSelectState(options)
   const [highlightedId, setHighlightedId] = useState<string | null>(null)
   const listboxId = useId()
   const rootRef = useRef<HTMLDivElement>(null)
@@ -33,7 +19,7 @@ export function useSelectRoot({
     setOpen(false)
     setHighlightedId(null)
     triggerRef.current?.focus()
-  }, [])
+  }, [setOpen])
 
   const toggle = useCallback(() => {
     setOpen((prev) => {
@@ -54,14 +40,7 @@ export function useSelectRoot({
       }
       return !prev
     })
-  }, [value])
-
-  const registerLabel = useCallback((v: string, label: string) => {
-    setLabels((prev) => {
-      if (prev[v] === label) return prev
-      return {...prev, [v]: label}
-    })
-  }, [])
+  }, [value, setOpen])
 
   const registerItem = useCallback((id: string, itemValue: string, element: HTMLElement) => {
     itemsRef.current.set(id, {value: itemValue, element})

package/src/components/ThemeProvider/ThemeOverrides.stories.tsx

@@ -0,0 +1,113 @@
+import {useState} from 'react'
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, waitFor} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {ThemeProvider, type ColorOverrides, type ThemeName} from './ThemeProvider'
+import {Button} from '../Button/Button'
+import {Text} from '../Text/Text'
+
+const meta: Meta = {
+  title: 'Theme/ThemeProvider/Overrides',
+}
+
+export default meta
+
+const styles = css.create({
+  surface: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: spacing.sm,
+    padding: spacing.md,
+    backgroundColor: colors.bg,
+  },
+})
+
+interface OverrideArgs {
+  theme: ThemeName
+  bg: string
+  accent: string
+}
+
+/** Colours replaced by token key; the controls change them in place. */
+export const Playground: StoryObj<OverrideArgs> = {
+  args: {theme: 'dark', bg: '#1b2433', accent: '#ff5a1f'},
+  argTypes: {
+    theme: {control: 'inline-radio', options: ['dark', 'light', 'high-contrast']},
+    bg: {control: 'color', description: 'overrides.bg'},
+    accent: {control: 'color', description: 'overrides.accent'},
+  },
+  render: ({theme, bg, accent}) => (
+    <ThemeProvider theme={theme} overrides={{bg, accent}}>
+      <html.div style={styles.surface}>
+        <Text>The page background and the primary fill come from overrides.</Text>
+        <Button>Primary</Button>
+      </html.div>
+    </ThemeProvider>
+  ),
+}
+
+const A: ColorOverrides = {bg: 'rgb(27, 36, 51)', accent: 'rgb(255, 90, 31)'}
+const B: ColorOverrides = {bg: 'rgb(10, 60, 30)', accent: 'rgb(30, 144, 255)'}
+const STEPS: readonly (ColorOverrides | undefined)[] = [A, B, A, undefined]
+
+/** Steps through A, B, A and none, with a nested provider under each. */
+function Stepper() {
+  const [step, setStep] = useState(0)
+  const overrides = STEPS[step]
+  return (
+    <ThemeProvider overrides={overrides}>
+      <html.div data-testid="outer" style={styles.surface}>
+        <Button onClick={() => setStep((s) => Math.min(s + 1, STEPS.length - 1))}>Next</Button>
+        <ThemeProvider>
+          <html.div data-testid="inherits" style={styles.surface} />
+        </ThemeProvider>
+        <ThemeProvider overrides={{bg: 'rgb(60, 10, 60)', accent: 'red} body{background:red'}}>
+          <html.div data-testid="inner" style={styles.surface} />
+        </ThemeProvider>
+      </html.div>
+    </ThemeProvider>
+  )
+}
+
+const bgOf = (el: Element) => getComputedStyle(el).backgroundColor
+const aliasOf = (el: Element) => getComputedStyle(el).getPropertyValue('--duro-color-bg').trim()
+
+export const OverridesUpdateInPlace: StoryObj = {
+  render: () => <Stepper />,
+  play: async ({canvas, userEvent}) => {
+    const outer = canvas.getByTestId('outer')
+    const inherits = canvas.getByTestId('inherits')
+    const inner = canvas.getByTestId('inner')
+    const next = canvas.getByRole('button', {name: 'Next'})
+
+    // The outer provider's scope while it has overrides.
+    const provider = outer.parentElement!
+    await waitFor(() => expect(provider.getAttribute('data-duro-theme')).toBeTruthy())
+    const scope = provider.getAttribute('data-duro-theme')!
+
+    for (const step of [A, B, A]) {
+      await waitFor(() => expect(bgOf(outer)).toBe(step.bg))
+      // Button's fill eases between colours: wait for it to settle.
+      await waitFor(() => expect(getComputedStyle(next).backgroundColor).toBe(step.accent))
+      // The --duro-* alias follows the override.
+      await expect(aliasOf(outer)).toBe(step.bg)
+      // A nested provider with no overrides, same theme: the outer's colours.
+      await expect(bgOf(inherits)).toBe(step.bg)
+      await expect(aliasOf(inherits)).toBe(step.bg)
+      // A nested provider with its own: its colours inside, the outer's outside.
+      await expect(bgOf(inner)).toBe('rgb(60, 10, 60)')
+      await userEvent.click(next)
+    }
+
+    // No overrides: the theme's own colours, and no outer rule left.
+    await waitFor(() => expect(bgOf(outer)).toBe('rgb(15, 15, 15)'))
+    const rules = [...document.querySelectorAll('style')].map((s) => s.textContent ?? '')
+    await expect(provider.hasAttribute('data-duro-theme')).toBe(false)
+    await expect(rules.filter((r) => r.includes(`"${scope}"`))).toHaveLength(0)
+    // The invalid value never reaches a rule, and nothing leaked onto body.
+    await expect(rules.some((r) => r.includes('body{'))).toBe(false)
+    await expect(getComputedStyle(document.body).backgroundColor).not.toBe('rgb(255, 0, 0)')
+  },
+}

package/src/components/ThemeProvider/ThemeProvider.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Theme context provider. Must wrap the entire app at the root level. Sets dark, light, or high-contrast theme for all child components via CSS custom properties.',
+    'Theme context provider. Must wrap the entire app at the root level. Sets dark, light, or high-contrast theme for all child components via CSS custom properties. overrides replaces colours by token key ({accent: "#ff5a1f"}) and updates in place, without a re-mount: a scoped rule on the web (values that are not a colour are dropped), a runtime theme on React Native, where useResolvedColors() follows too. Overrides replace a colour whatever the theme, so pass per-mode values when the mode can change. A nested provider on the same theme keeps the outer overrides and lays its own over them; on another theme it starts from that theme\'s colours.',
   whenToUse: [
     'App root — required for all Duro components to render correctly',
     'Theme switching (dark/light mode toggle)',

package/src/components/ThemeProvider/ThemeProvider.native.tsx

@@ -18,11 +18,19 @@ import {
   ThemeScopeContext,
   type ThemeScope,
 } from '../../shared/portal/themeScope'
+import {mergeOverrides, OverridesContext, type ColorOverrides} from './overrides'
 
 export type ThemeName = 'dark' | 'light' | 'high-contrast'
+export type {ColorOverrides}
 
 interface ThemeProviderProps {
   theme?: ThemeName
+  /**
+   * Colours that replace the theme's own, by token key (`{accent: '#ff5a1f'}`).
+   * They update in place, without a re-mount. A nested provider on the same
+   * theme keeps these and lays its own over them.
+   */
+  overrides?: ColorOverrides
   children: ReactNode
 }
 
@@ -80,7 +88,7 @@ export function useResolvedColors(): Record<ColorToken, string> {
   return useContext(ResolvedColorsContext)
 }
 
-export function ThemeProvider({theme = 'dark', children}: ThemeProviderProps) {
+export function ThemeProvider({theme = 'dark', overrides, children}: ThemeProviderProps) {
   const outerRegistry = useContext(HostRegistryContext)
   const outerScope = useContext(ThemeScopeContext)
   // The outermost provider owns the registry and draws the root host.
@@ -88,7 +96,24 @@ export function ThemeProvider({theme = 'dark', children}: ThemeProviderProps) {
     outerRegistry ? null : createHostRegistry(),
   )
   const registry = outerRegistry ?? ownRegistry
-  const themeStyles = themeMap[theme]
+  const outerOverrides = useContext(OverridesContext)
+  const effective = useMemo(
+    () => mergeOverrides(outerOverrides, theme, overrides),
+    [outerOverrides, theme, overrides],
+  )
+  // A runtime theme on native, applied after the base one so RSD styles
+  // cascade it; rebuilt only when the colours change.
+  const overrideKey = JSON.stringify(effective.colors)
+  const themeStyles = useMemo(() => {
+    const base = themeMap[theme]
+    return overrideKey === '{}'
+      ? base
+      : [...base, css.createTheme(colors, JSON.parse(overrideKey) as ColorOverrides)]
+  }, [theme, overrideKey])
+  const resolved = useMemo(
+    () => ({...palettes[theme], ...(JSON.parse(overrideKey) as ColorOverrides)}),
+    [theme, overrideKey],
+  )
   const scope = useMemo<ThemeScope>(
     () => ({styles: [...outerScope.styles, ...themeStyles]}),
     [outerScope, themeStyles],
@@ -97,11 +122,15 @@ export function ThemeProvider({theme = 'dark', children}: ThemeProviderProps) {
   return (
     <HostRegistryContext.Provider value={registry}>
       <ThemeScopeContext.Provider value={scope}>
-        <ResolvedColorsContext.Provider value={palettes[theme]}>
-          <html.div style={[...themeStyles, styles.root, ownRegistry && styles.canvas] as DivStyle}>
-            {children}
-            {ownRegistry ? <PortalHost placement="base" /> : null}
-          </html.div>
+        <ResolvedColorsContext.Provider value={resolved}>
+          <OverridesContext.Provider value={effective}>
+            <html.div
+              style={[...themeStyles, styles.root, ownRegistry && styles.canvas] as DivStyle}
+            >
+              {children}
+              {ownRegistry ? <PortalHost placement="base" /> : null}
+            </html.div>
+          </OverridesContext.Provider>
         </ResolvedColorsContext.Provider>
       </ThemeScopeContext.Provider>
     </HostRegistryContext.Provider>