Theming: Consolidate theme helpers

.changeset/easy-cooks-work.md

@@ -0,0 +1,42 @@
+---
+"@uifabricshared/theming-react-native": patch
+"@uifabricshared/foundation-tokens": patch
+"@fluentui-react-native/contextual-menu": patch
+"@uifabricshared/theme-registry": patch
+"@fluentui-react-native/notification": patch
+"@uifabricshared/theming-ramp": patch
+"@fluentui-react-native/experimental-menu-button": patch
+"@fluentui-react-native/persona-coin": patch
+"@fluentui-react-native/themed-stylesheet": patch
+"@fluentui-react-native/menu-button": patch
+"@fluentui-react-native/radio-group": patch
+"@fluentui-react-native/android-theme": patch
+"@fluentui-react-native/default-theme": patch
+"@fluentui-react-native/experimental-shimmer": patch
+"@fluentui-react-native/checkbox": patch
+"@fluentui-react-native/dependency-profiles": patch
+"@fluentui-react-native/framework": patch
+"@fluentui-react-native/apple-theme": patch
+"@fluentui-react-native/win32-theme": patch
+"@fluentui-react-native/divider": patch
+"@fluentui-react-native/persona": patch
+"@fluentui-react-native/tablist": patch
+"@fluentui-react-native/theming-utils": patch
+"@fluentui-react-native/avatar": patch
+"@fluentui-react-native/button": patch
+"@fluentui-react-native/switch": patch
+"@fluentui-react-native/theme-tokens": patch
+"@fluentui-react-native/badge": patch
+"@fluentui-react-native/input": patch
+"@fluentui-react-native/stack": patch
+"@fluentui-react-native/theme-types": patch
+"@fluentui-react-native/chip": patch
+"@fluentui-react-native/link": patch
+"@fluentui-react-native/menu": patch
+"@fluentui-react-native/text": patch
+"@fluentui-react-native/design": patch
+"@fluentui-react-native/tokens": patch
+"@fluentui-react-native/theme": patch
+---
+
+update package references to use consolidated package directly

.changeset/rich-pumas-try.md

@@ -0,0 +1,39 @@
+---
+"@uifabricshared/theming-react-native": patch
+"@uifabricshared/foundation-tokens": patch
+"@fluentui-react-native/contextual-menu": patch
+"@fluentui-react-native/notification": patch
+"@fluentui-react-native/experimental-menu-button": patch
+"@fluentui-react-native/persona-coin": patch
+"@fluentui-react-native/themed-stylesheet": patch
+"@fluentui-react-native/menu-button": patch
+"@fluentui-react-native/radio-group": patch
+"@fluentui-react-native/android-theme": patch
+"@fluentui-react-native/default-theme": patch
+"@fluentui-react-native/experimental-shimmer": patch
+"@fluentui-react-native/checkbox": patch
+"@fluentui-react-native/framework": patch
+"@fluentui-react-native/apple-theme": patch
+"@fluentui-react-native/win32-theme": patch
+"@fluentui-react-native/divider": patch
+"@fluentui-react-native/persona": patch
+"@fluentui-react-native/tablist": patch
+"@fluentui-react-native/theming-utils": patch
+"@fluentui-react-native/avatar": patch
+"@fluentui-react-native/button": patch
+"@fluentui-react-native/switch": patch
+"@fluentui-react-native/theme-tokens": patch
+"@fluentui-react-native/badge": patch
+"@fluentui-react-native/input": patch
+"@fluentui-react-native/stack": patch
+"@fluentui-react-native/theme-types": patch
+"@fluentui-react-native/chip": patch
+"@fluentui-react-native/link": patch
+"@fluentui-react-native/menu": patch
+"@fluentui-react-native/text": patch
+"@fluentui-react-native/design": patch
+"@fluentui-react-native/tokens": patch
+"@fluentui-react-native/theme": patch
+---
+
+Consolidate theming utilities in the design package and move compatibility packages to the shim directory

.changeset/tidy-themes-consolidate.md

@@ -0,0 +1,11 @@
+---
+"@fluentui-react-native/design": patch
+"@fluentui-react-native/theme-tokens": patch
+"@fluentui-react-native/theme-types": patch
+"@fluentui-react-native/theme": patch
+"@fluentui-react-native/themed-stylesheet": patch
+"@fluentui-react-native/theming-utils": patch
+"@fluentui-react-native/tokens": patch
+---
+
+Consolidate legacy theming and styling implementations into design submodules, deprecate their former packages as compatibility shims, and group those shims under `packages/shim`.

README.md

@@ -88,7 +88,7 @@ Documentation for Theming can be found in our docs file, or for more in depth do
 - [Theming Overview](./docs/pages/Theming/Basics.md)
 - [StyleSheets](./docs/pages/Theming/ThemedStylesheet.md)
 - [Customizing Theme Settings](./docs/pages/Theming/CustomTheme.md)
-- [Theme Reference](./packages/framework/theme/README.md)
+- [Theme Reference](./packages/shim/theme/README.md)
 - [Tokens](./packages/framework/use-tokens/README.md)
 - [Slots](./packages/framework/use-slots/README.md)
 - [Customize and Compose](./packages/framework/composition/README.md)

apps/component-generator/component-templates/ComponentTemplate/package.json

@@ -24,7 +24,9 @@
     "format": "fluentui-scripts format",
     "prettier-fix": "fluentui-scripts prettier --fix true"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@fluentui-react-native/design": "workspace:*"
+  },
   "devDependencies": {
     "@fluentui-react-native/framework-base": "workspace:*",
     "@fluentui-react-native/scripts": "workspace:*",

apps/component-generator/component-templates/ComponentTemplate/src/ComponentName.styling.ts

@@ -1,6 +1,6 @@
 import { componentName, ComponentNameTokens, ComponentNameSlotProps, ComponentNameProps } from './ComponentName.types';
 import { Theme, UseStylingOptions, buildProps } from '@fluentui-react-native/framework';
-import { borderStyles, layoutStyles } from '@fluentui-react-native/tokens';
+import { borderStyles, layoutStyles } from '@fluentui-react-native/design/styling/tokens';
 import { defaultComponentNameTokens } from './ComponentNameTokens';
 
 export const componentNameStates: (keyof ComponentNameTokens)[] = ['small', 'medium', 'large'];

apps/component-generator/component-templates/ComponentTemplate/src/ComponentName.types.ts

@@ -1,6 +1,6 @@
 import { ViewProps } from 'react-native';
 import { TextProps } from '@fluentui-react-native/text';
-import { IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/tokens';
+import { IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/design/styling/tokens';
 
 export const componentName = 'ComponentName';
 /**

apps/component-generator/component-templates/ComponentTemplate/tsconfig.json

@@ -4,5 +4,10 @@
     "rootDir": "src",
     "outDir": "lib"
   },
-  "include": ["src"]
+  "include": ["src"],
+  "references": [
+    {
+      "path": "../../agentic/design/tsconfig.json"
+    }
+  ]
 }

apps/tester-core/package.json

@@ -70,9 +70,6 @@
     "@fluentui-react-native/switch": "workspace:*",
     "@fluentui-react-native/tablist": "workspace:*",
     "@fluentui-react-native/text": "workspace:*",
-    "@fluentui-react-native/theme": "workspace:*",
-    "@fluentui-react-native/theme-tokens": "workspace:*",
-    "@fluentui-react-native/themed-stylesheet": "workspace:*",
     "@fluentui-react-native/tooltip": "workspace:*",
     "@fluentui-react-native/vibrancy-view": "workspace:*",
     "@fluentui-react-native/win32-theme": "workspace:*",

apps/tester-core/src/FluentTester.tsx

@@ -7,7 +7,7 @@ import { BASE_TESTPAGE, TESTPAGE_BUTTONS_SCROLLVIEWER, TESTPAGE_CONTENT_SCROLLVI
 import { ROOT_VIEW } from '@fluentui-react-native/e2e-testing';
 import type { Theme } from '@fluentui-react-native/framework';
 import { useTheme } from '@fluentui-react-native/design/theming';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { themedStyleSheet } from '@fluentui-react-native/design/styling/stylesheet';
 
 import { fluentTesterStyles, mobileStyles } from './TestComponents/Common/styles';
 import { testProps } from './TestComponents/Common/TestProps';

apps/tester-core/src/TestComponents/CheckboxLegacy/CheckboxLegacyTest.tsx

@@ -5,7 +5,7 @@ import { Checkbox } from '@fluentui/react-native';
 import { CHECKBOX_TESTPAGE } from '@fluentui-react-native/e2e-testing';
 import type { Theme } from '@fluentui-react-native/design/theming';
 import { useTheme } from '@fluentui-react-native/design/theming';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { themedStyleSheet } from '@fluentui-react-native/design/styling/stylesheet';
 
 import { CheckboxLegacyE2ETest } from './CheckboxLegacyE2ETest';
 import { commonTestStyles as commonStyles } from '../Common/styles';

apps/tester-core/src/TestComponents/CheckboxV1/TokenCheckboxTest.tsx

@@ -5,7 +5,7 @@ import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
 import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
 import type { Theme } from '@fluentui-react-native/design/theming';
 import { useTheme } from '@fluentui-react-native/design/theming';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { themedStyleSheet } from '@fluentui-react-native/design/styling/stylesheet';
 
 import { commonTestStyles as commonStyles } from '../Common/styles';
 

apps/tester-core/src/TestComponents/ColorTokens/ColorTokenTest.tsx

@@ -6,10 +6,10 @@ import { Text, ToggleButton } from '@fluentui/react-native';
 import { createAliasTokens } from '@fluentui-react-native/default-theme';
 import { COLORTOKENS_TEST_COMPONENT, COLORTOKEN_TESTPAGE } from '@fluentui-react-native/e2e-testing';
 import type { SvgIconProps } from '@fluentui-react-native/icon';
-import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import { globalTokens } from '@fluentui-react-native/design/tokens/legacy';
 import type { Theme } from '@fluentui-react-native/design/theming';
 import { useTheme } from '@fluentui-react-native/design/theming';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { themedStyleSheet } from '@fluentui-react-native/design/styling/stylesheet';
 import { getCurrentAppearance } from '@fluentui-react-native/design/theming';
 import { createOfficeAliasTokens } from '@fluentui-react-native/win32-theme';
 import type { SvgProps } from 'react-native-svg';

apps/tester-core/src/TestComponents/FocusTrapZone/FocusTrapZoneTest.tsx

@@ -9,7 +9,7 @@ import type { KeyPressEvent } from '@fluentui-react-native/interactive-hooks';
 import { useFocusState } from '@fluentui-react-native/interactive-hooks';
 import { Stack } from '@fluentui-react-native/stack';
 import { useTheme } from '@fluentui-react-native/design/theming';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { themedStyleSheet } from '@fluentui-react-native/design/styling/stylesheet';
 
 import { stackStyle } from '../Common/styles';
 import type { TestSection, PlatformStatus } from '../Test';

apps/tester-core/src/TestComponents/Persona/CustomizeUsage.tsx

@@ -4,7 +4,7 @@ import { View, Text, Switch, TextInput } from 'react-native';
 import { Persona } from '@fluentui/react-native';
 import type { Theme } from '@fluentui-react-native/design/theming';
 import { useTheme } from '@fluentui-react-native/design/theming';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { themedStyleSheet } from '@fluentui-react-native/design/styling/stylesheet';
 
 import { michaelImageUrl } from './styles';
 import { Slider } from '../Common/Slider';

apps/tester-core/src/TestComponents/PersonaCoin/CustomizeUsage.tsx

@@ -5,7 +5,7 @@ import type { IconAlignment } from '@fluentui/react-native';
 import { PersonaCoin } from '@fluentui/react-native';
 import type { Theme } from '@fluentui-react-native/design/theming';
 import { useTheme } from '@fluentui-react-native/design/theming';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { themedStyleSheet } from '@fluentui-react-native/design/styling/stylesheet';
 
 import { steveBallmerPhotoUrl } from './styles';
 import { AlignmentPicker } from '../Common/AlignmentPicker';

apps/tester-core/src/TestComponents/Shadow/ShadowDepthTestSection.tsx

@@ -7,7 +7,7 @@ import { useFluentTheme } from '@fluentui-react-native/framework';
 import { mergeStyles } from '@fluentui-react-native/framework-base';
 import type { ShadowToken, Theme } from '@fluentui-react-native/design/theming';
 import { useTheme } from '@fluentui-react-native/design/theming';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { themedStyleSheet } from '@fluentui-react-native/design/styling/stylesheet';
 
 import { shadowTestPageStyles } from './ShadowTestPageStyles';
 

apps/tester-core/src/TestComponents/Shadow/ShadowTestPageStyles.tsx

@@ -1,7 +1,7 @@
 import { Platform } from 'react-native';
 
 import type { Theme } from '@fluentui-react-native/design/theming';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { themedStyleSheet } from '@fluentui-react-native/design/styling/stylesheet';
 
 /**
  * The default dark mode iOS background color from the theme is black ('#000000'), which shadows are not visible against.

apps/tester-core/src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx

@@ -6,7 +6,7 @@ import { Shadow } from '@fluentui-react-native/experimental-shadow';
 import type { Theme } from '@fluentui-react-native/framework';
 import { useFluentTheme } from '@fluentui-react-native/framework';
 import { mergeStyles } from '@fluentui-react-native/framework-base';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { themedStyleSheet } from '@fluentui-react-native/design/styling/stylesheet';
 
 import { shadowTestPageStyles } from './ShadowTestPageStyles';
 

apps/tester-core/src/TestComponents/StrokeWidth/StrokeWidthTest.tsx

@@ -18,7 +18,7 @@ import { STROKEWIDTH_TESTPAGE } from '@fluentui-react-native/e2e-testing';
 import type { Theme } from '@fluentui-react-native/framework';
 import { useFluentTheme } from '@fluentui-react-native/framework';
 import { Stack } from '@fluentui-react-native/stack';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { themedStyleSheet } from '@fluentui-react-native/design/styling/stylesheet';
 import { getCurrentAppearance } from '@fluentui-react-native/design/theming';
 
 import { stackStyle } from '../Common/styles';

apps/tester-core/src/TestComponents/Theme/ThemeTest.android.tsx

@@ -7,7 +7,7 @@ import { Text } from '@fluentui/react-native';
 import { THEME_TESTPAGE } from '@fluentui-react-native/e2e-testing';
 import { useFluentTheme } from '@fluentui-react-native/framework';
 import type { Theme } from '@fluentui-react-native/design/theming';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { themedStyleSheet } from '@fluentui-react-native/design/styling/stylesheet';
 
 import { commonTestStyles } from '../Common/styles';
 import type { TestSection, PlatformStatus } from '../Test';

apps/tester-core/src/TestComponents/Theme/ThemeTest.tsx

@@ -6,7 +6,7 @@ import { Button, PrimaryButton, Text, StealthButton } from '@fluentui/react-nati
 import { THEME_TESTPAGE } from '@fluentui-react-native/e2e-testing';
 import type { Theme } from '@fluentui-react-native/design/theming';
 import { useTheme } from '@fluentui-react-native/design/theming';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { themedStyleSheet } from '@fluentui-react-native/design/styling/stylesheet';
 
 import { commonTestStyles } from '../Common/styles';
 import type { TestSection, PlatformStatus } from '../Test';

apps/tester-core/src/theme/ThemePickers.android.tsx

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 import type { Theme } from '@fluentui-react-native/framework';
 import { useTheme } from '@fluentui-react-native/framework';
 import { TextV1 as Text } from '@fluentui-react-native/text';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { themedStyleSheet } from '@fluentui-react-native/design/styling/stylesheet';
 import type { PickerProps } from '@react-native-picker/picker';
 import { Picker } from '@react-native-picker/picker';
 

apps/tester-core/src/theme/ThemePickers.ios.tsx

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import type { Theme } from '@fluentui-react-native/framework';
 import { useTheme } from '@fluentui-react-native/framework';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { themedStyleSheet } from '@fluentui-react-native/design/styling/stylesheet';
 import { MenuView } from '@react-native-menu/menu';
 import type { MenuAction } from '@react-native-menu/menu';
 

apps/tester-core/tsconfig.json

@@ -136,15 +136,6 @@
     {
       "path": "../../packages/components/Text/tsconfig.json"
     },
-    {
-      "path": "../../packages/theming/theme-tokens/tsconfig.json"
-    },
-    {
-      "path": "../../packages/framework/theme/tsconfig.json"
-    },
-    {
-      "path": "../../packages/framework/themed-stylesheet/tsconfig.json"
-    },
     {
       "path": "../../packages/experimental/Tooltip/tsconfig.json"
     },

docs/pages/Theming/ThemedStylesheet.md

@@ -43,4 +43,4 @@ export const Component = () => {
 
 ## Additional Reading
 
-For more detailed information, check out [our README](../../../packages/framework/themed-stylesheet/README.md).
+For more detailed information, check out [our README](../../../packages/shim/themed-stylesheet/README.md).