Ensure that useThemeState will work with existing furn themes (#4186)

* update mapping values for flex-tokens

* add ability to get flex tokens if provided with a fluent theme

* add the start of theming for the storybook app

* fix tests after styling changes

* fix lint error in test

Author: JasonVMo

.changeset/round-buttons-align.md

@@ -0,0 +1,6 @@
+---
+"@fluentui-react-native/components": patch
+"@fluentui-react-native/design": patch
+---
+
+Align agentic Button corner radii with desktop V1 values and add context-backed FURN Theme-to-Flex token conversion

.github/skills/agentic-component-authoring/references/styles-and-tokens.md

@@ -17,6 +17,10 @@ value.
 - Prefer Flex tokens for every mapped semantic value.
 - Import named global tokens only when Flex has no equivalent, such as current Button icon dimensions or a true zero.
 - Record a genuine token gap in the component spec. Do not replace it with a nearby token or numeric literal.
+- For compatibility with an existing V1 component, derive cross-platform mappings from its Win32, macOS, or Windows
+  implementation. Do not use iOS as the canonical value unless the change explicitly targets iOS.
+- `useThemeState` projects a FURN Theme from context into Flex tokens and stores one symbol-keyed `ThemeState` on that
+  Theme object. Consumers of the same Theme therefore share token and style-cache identity.
 
 ## Build styles in layers
 

AGENTS.md

@@ -41,7 +41,7 @@ This is the **FluentUI React Native** repository, a monorepo containing React Na
 
 **Slots**: The slot pattern is used to compose higher-order components. A slot represents an inner component (actual entry in the render tree). For example, a Button might have slots for `root`, `icon`, and `content`. This allows advanced customization scenarios. Components wrapping a single native component typically have one slot.
 
-**Tokens**: Design tokens handle styling and customization. Tokens are design-time values set via theme or component customization (e.g., "brandColor"). Tokens can also be props (specified via "TokensThatAreAlsoProps"). This system enables simpler customization and better memoization. For Flex token authoring, use `packages/agentic-design/src/tokens/mappings/flex-token-map.yaml` as the canonical mapping from generic CSS and Fluent token sources to grouped React Native Flex token paths.
+**Tokens**: Design tokens handle styling and customization. Tokens are design-time values set via theme or component customization (e.g., "brandColor"). Tokens can also be props (specified via "TokensThatAreAlsoProps"). This system enables simpler customization and better memoization. For Flex token authoring, use `packages/agentic-design/src/tokens/mappings/flex-token-map.yaml` as the canonical mapping from generic CSS and Fluent token sources to grouped React Native Flex token paths. When mapping an agentic component to an existing V1 component, use the Win32, macOS, or Windows implementation as the canonical compatibility reference; do not use iOS as the cross-platform canonical value unless the work explicitly targets iOS.
 
 **Theme-specific styles**: Cache `StyleSheet.create` results that depend only on `ThemeState` with a module-scoped getter created by `themedStyleSheetFactory`. Treat them as immutable, and apply props, interaction state, and user styles separately so the cached sheet is safe to share between component instances.
 

packages/agentic-components/src/components/button/__snapshots__/button.test.tsx.snap

@@ -20,7 +20,7 @@ exports[`Button matches the disabled visual state snapshot across appearances 1`
       "alignSelf": "flex-start",
       "backgroundColor": "#f0f0f0",
       "borderColor": "#00000000",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
@@ -50,7 +50,7 @@ exports[`Button matches the disabled visual state snapshot across appearances 1`
       "alignSelf": "flex-start",
       "backgroundColor": "#f0f0f0",
       "borderColor": "#00000000",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
@@ -80,7 +80,7 @@ exports[`Button matches the disabled visual state snapshot across appearances 1`
       "alignSelf": "flex-start",
       "backgroundColor": "#00000000",
       "borderColor": "#e0e0e0",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
@@ -110,7 +110,7 @@ exports[`Button matches the disabled visual state snapshot across appearances 1`
       "alignSelf": "flex-start",
       "backgroundColor": "#00000000",
       "borderColor": "#00000000",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
@@ -145,7 +145,7 @@ exports[`Button matches the focused visual state snapshot across appearances 1`]
       "alignSelf": "flex-start",
       "backgroundColor": "#185abd",
       "borderColor": "#ffffff",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
@@ -179,7 +179,7 @@ exports[`Button matches the focused visual state snapshot across appearances 1`]
       "alignSelf": "flex-start",
       "backgroundColor": "#fafafa",
       "borderColor": "#ffffff",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
@@ -213,7 +213,7 @@ exports[`Button matches the focused visual state snapshot across appearances 1`]
       "alignSelf": "flex-start",
       "backgroundColor": "#00000000",
       "borderColor": "#ffffff",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
@@ -247,7 +247,7 @@ exports[`Button matches the focused visual state snapshot across appearances 1`]
       "alignSelf": "flex-start",
       "backgroundColor": "#00000000",
       "borderColor": "#ffffff",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
@@ -286,7 +286,7 @@ exports[`Button matches the hovered visual state snapshot across appearances 1`]
       "alignSelf": "flex-start",
       "backgroundColor": "#1651aa",
       "borderColor": "#00000000",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
@@ -316,7 +316,7 @@ exports[`Button matches the hovered visual state snapshot across appearances 1`]
       "alignSelf": "flex-start",
       "backgroundColor": "#f0f0f0",
       "borderColor": "#00000000",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
@@ -346,7 +346,7 @@ exports[`Button matches the hovered visual state snapshot across appearances 1`]
       "alignSelf": "flex-start",
       "backgroundColor": "#00000000",
       "borderColor": "#c7c7c7",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
@@ -376,7 +376,7 @@ exports[`Button matches the hovered visual state snapshot across appearances 1`]
       "alignSelf": "flex-start",
       "backgroundColor": "#f0f0f0",
       "borderColor": "#00000000",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
@@ -411,7 +411,7 @@ exports[`Button matches the pressed visual state snapshot across appearances 1`]
       "alignSelf": "flex-start",
       "backgroundColor": "#0e336a",
       "borderColor": "#00000000",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
@@ -441,7 +441,7 @@ exports[`Button matches the pressed visual state snapshot across appearances 1`]
       "alignSelf": "flex-start",
       "backgroundColor": "#dbdbdb",
       "borderColor": "#00000000",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
@@ -471,7 +471,7 @@ exports[`Button matches the pressed visual state snapshot across appearances 1`]
       "alignSelf": "flex-start",
       "backgroundColor": "#00000000",
       "borderColor": "#b3b3b3",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
@@ -501,7 +501,7 @@ exports[`Button matches the pressed visual state snapshot across appearances 1`]
       "alignSelf": "flex-start",
       "backgroundColor": "#dbdbdb",
       "borderColor": "#00000000",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
@@ -536,7 +536,7 @@ exports[`Button matches the rest visual state snapshot across appearances 1`] =
       "alignSelf": "flex-start",
       "backgroundColor": "#185abd",
       "borderColor": "#00000000",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
@@ -566,7 +566,7 @@ exports[`Button matches the rest visual state snapshot across appearances 1`] =
       "alignSelf": "flex-start",
       "backgroundColor": "#fafafa",
       "borderColor": "#00000000",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
@@ -596,7 +596,7 @@ exports[`Button matches the rest visual state snapshot across appearances 1`] =
       "alignSelf": "flex-start",
       "backgroundColor": "#00000000",
       "borderColor": "#d1d1d1",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
@@ -626,7 +626,7 @@ exports[`Button matches the rest visual state snapshot across appearances 1`] =
       "alignSelf": "flex-start",
       "backgroundColor": "#00000000",
       "borderColor": "#00000000",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
@@ -676,7 +676,7 @@ exports[`Button matches the selected visual state snapshot across appearances 1`
       "alignSelf": "flex-start",
       "backgroundColor": "#185abd",
       "borderColor": "#00000000",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
@@ -721,7 +721,7 @@ exports[`Button matches the selected visual state snapshot across appearances 1`
       "alignSelf": "flex-start",
       "backgroundColor": "#616161",
       "borderColor": "#00000000",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
@@ -766,7 +766,7 @@ exports[`Button matches the selected visual state snapshot across appearances 1`
       "alignSelf": "flex-start",
       "backgroundColor": "#616161",
       "borderColor": "#616161",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",
@@ -811,7 +811,7 @@ exports[`Button matches the selected visual state snapshot across appearances 1`
       "alignSelf": "flex-start",
       "backgroundColor": "#0000001a",
       "borderColor": "#00000000",
-      "borderRadius": 12,
+      "borderRadius": 4,
       "borderStyle": "solid",
       "borderWidth": 1,
       "flexDirection": "row",

packages/agentic-components/src/components/button/button.test.tsx

@@ -293,9 +293,9 @@ describe('Button', () => {
   );
 
   it.each([
-    ['small', 12, 8, 8],
-    ['medium', 14, 10, 12],
-    ['large', 16, 12, 12],
+    ['small', 12, 8, 4],
+    ['medium', 14, 10, 4],
+    ['large', 16, 12, 6],
   ] as const)('resolves the %s size', async (size, fontSize, paddingHorizontal, borderRadius) => {
     const component = await renderButton({ content: size, size });
     expect(StyleSheet.flatten(component.getByText(size).props.style)).toMatchObject({

packages/agentic-components/src/components/list-item/__snapshots__/list-item.test.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ListItem renders the default row with selection hidden and stable content styling 1`] = `
+{
+  "alignItems": "center",
+  "alignSelf": "stretch",
+  "backgroundColor": "#00000000",
+  "borderRadius": 4,
+  "flexDirection": "row",
+  "justifyContent": "flex-start",
+  "paddingHorizontal": 12,
+  "paddingVertical": 10,
+  "width": "100%",
+}
+`;

packages/agentic-components/src/components/list-item/list-item.test.tsx

@@ -23,22 +23,14 @@ function getRootStyle(component: RenderResult): ViewStyle {
 
 describe('ListItem', () => {
   it('renders the default row with selection hidden and stable content styling', async () => {
-    const colors = useFlexTokens().color;
     const component = await renderListItem({ content: 'Inbox' });
     const root = getRoot(component);
 
     expect(root.props.accessibilityRole).toBe('button');
     expect(root.props.accessibilityState).toEqual({ disabled: false, selected: false });
     expect(root.props.focusable).toBe(true);
     expect(component.getAllByText('Inbox', { includeHiddenElements: true })).toHaveLength(2);
-    expect(getRootStyle(component)).toMatchObject({
-      alignItems: 'center',
-      backgroundColor: colors.backgroundNeutralTransparent,
-      borderRadius: 12,
-      paddingHorizontal: 12,
-      paddingVertical: 10,
-      width: '100%',
-    });
+    expect(getRootStyle(component)).toMatchSnapshot();
     expect(component.queryByText('☐')).toBeNull();
   });
 

packages/agentic-components/src/components/skeleton/__snapshots__/skeleton.test.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Skeleton renders a decorative bar with themed fill and rounded corners 1`] = `
+{
+  "backgroundColor": "#fafafa",
+  "borderRadius": 2,
+  "height": 16,
+  "overflow": "hidden",
+  "position": "relative",
+  "width": 120,
+}
+`;

packages/agentic-components/src/components/skeleton/skeleton.test.tsx

@@ -5,7 +5,6 @@ import type { ViewStyle } from 'react-native';
 
 import { fireEvent, render } from '@testing-library/react-native';
 
-import { useFlexTokens } from '@fluentui-react-native/design';
 import { useReducedMotion } from '@fluentui-react-native/framework-base';
 
 import { Skeleton } from './skeleton';
@@ -40,17 +39,9 @@ describe('Skeleton', () => {
 
   it('renders a decorative bar with themed fill and rounded corners', async () => {
     const component = await renderSkeleton({ style: { height: 16, width: 120 } });
-    const colors = useFlexTokens().color;
 
     expect(getRoot(component).props.accessible).toBe(false);
-    expect(getRootStyle(component)).toMatchObject({
-      backgroundColor: colors.backgroundNeutralSubtle,
-      borderRadius: 4,
-      height: 16,
-      overflow: 'hidden',
-      position: 'relative',
-      width: 120,
-    });
+    expect(getRootStyle(component)).toMatchSnapshot();
   });
 
   it('forwards user layout handlers while preserving the wave animation', async () => {

packages/agentic-components/src/components/tag/tag.test.tsx

@@ -163,7 +163,7 @@ describe('Tag', () => {
   });
 
   it.each([
-    ['rounded', 12],
+    ['rounded', 4],
     ['circular', 9999],
   ] as const)('resolves the %s shape', async (shape, borderRadius) => {
     const component = await renderTag({ content: shape, shape });