diff --git a/.changeset/easy-cooks-work.md b/.changeset/easy-cooks-work.md new file mode 100644 index 00000000000..4e09449a006 --- /dev/null +++ b/.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 diff --git a/.changeset/rich-pumas-try.md b/.changeset/rich-pumas-try.md new file mode 100644 index 00000000000..4408af2d5fb --- /dev/null +++ b/.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 diff --git a/.changeset/tidy-themes-consolidate.md b/.changeset/tidy-themes-consolidate.md new file mode 100644 index 00000000000..bdcf3d150fa --- /dev/null +++ b/.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`. diff --git a/README.md b/README.md index df5b3da34f3..c4b107ef65c 100644 --- a/README.md +++ b/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) diff --git a/apps/component-generator/component-templates/ComponentTemplate/package.json b/apps/component-generator/component-templates/ComponentTemplate/package.json index 2f69c0e6e17..7b1e735b2b3 100644 --- a/apps/component-generator/component-templates/ComponentTemplate/package.json +++ b/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:*", diff --git a/apps/component-generator/component-templates/ComponentTemplate/src/ComponentName.styling.ts b/apps/component-generator/component-templates/ComponentTemplate/src/ComponentName.styling.ts index 3a6482f345a..4a13a7edb7e 100644 --- a/apps/component-generator/component-templates/ComponentTemplate/src/ComponentName.styling.ts +++ b/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']; diff --git a/apps/component-generator/component-templates/ComponentTemplate/src/ComponentName.types.ts b/apps/component-generator/component-templates/ComponentTemplate/src/ComponentName.types.ts index 538de39e112..29add8bb50a 100644 --- a/apps/component-generator/component-templates/ComponentTemplate/src/ComponentName.types.ts +++ b/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'; /** diff --git a/apps/component-generator/component-templates/ComponentTemplate/tsconfig.json b/apps/component-generator/component-templates/ComponentTemplate/tsconfig.json index 07b157e5c62..37b12748fd7 100644 --- a/apps/component-generator/component-templates/ComponentTemplate/tsconfig.json +++ b/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" + } + ] } diff --git a/apps/tester-core/package.json b/apps/tester-core/package.json index 7d680428e91..c686718ee00 100644 --- a/apps/tester-core/package.json +++ b/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:*", diff --git a/apps/tester-core/src/FluentTester.tsx b/apps/tester-core/src/FluentTester.tsx index fb6ebf995a4..bde4e50c0c7 100644 --- a/apps/tester-core/src/FluentTester.tsx +++ b/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'; diff --git a/apps/tester-core/src/TestComponents/CheckboxLegacy/CheckboxLegacyTest.tsx b/apps/tester-core/src/TestComponents/CheckboxLegacy/CheckboxLegacyTest.tsx index 863f536183b..5e7ee56cd04 100644 --- a/apps/tester-core/src/TestComponents/CheckboxLegacy/CheckboxLegacyTest.tsx +++ b/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'; diff --git a/apps/tester-core/src/TestComponents/CheckboxV1/TokenCheckboxTest.tsx b/apps/tester-core/src/TestComponents/CheckboxV1/TokenCheckboxTest.tsx index 68b5c2df067..b10bbc0847f 100644 --- a/apps/tester-core/src/TestComponents/CheckboxV1/TokenCheckboxTest.tsx +++ b/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'; diff --git a/apps/tester-core/src/TestComponents/ColorTokens/ColorTokenTest.tsx b/apps/tester-core/src/TestComponents/ColorTokens/ColorTokenTest.tsx index 77a8cfcf303..76695950f41 100644 --- a/apps/tester-core/src/TestComponents/ColorTokens/ColorTokenTest.tsx +++ b/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'; diff --git a/apps/tester-core/src/TestComponents/FocusTrapZone/FocusTrapZoneTest.tsx b/apps/tester-core/src/TestComponents/FocusTrapZone/FocusTrapZoneTest.tsx index 1cc66b00b76..60b2c738a2a 100644 --- a/apps/tester-core/src/TestComponents/FocusTrapZone/FocusTrapZoneTest.tsx +++ b/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'; diff --git a/apps/tester-core/src/TestComponents/Persona/CustomizeUsage.tsx b/apps/tester-core/src/TestComponents/Persona/CustomizeUsage.tsx index ca3a07cc3b1..a2ce8cd0382 100644 --- a/apps/tester-core/src/TestComponents/Persona/CustomizeUsage.tsx +++ b/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'; diff --git a/apps/tester-core/src/TestComponents/PersonaCoin/CustomizeUsage.tsx b/apps/tester-core/src/TestComponents/PersonaCoin/CustomizeUsage.tsx index a04451523b4..bfc0f7293f5 100644 --- a/apps/tester-core/src/TestComponents/PersonaCoin/CustomizeUsage.tsx +++ b/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'; diff --git a/apps/tester-core/src/TestComponents/Shadow/ShadowDepthTestSection.tsx b/apps/tester-core/src/TestComponents/Shadow/ShadowDepthTestSection.tsx index f1f0d2c5f4f..e48f103db7e 100644 --- a/apps/tester-core/src/TestComponents/Shadow/ShadowDepthTestSection.tsx +++ b/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'; diff --git a/apps/tester-core/src/TestComponents/Shadow/ShadowTestPageStyles.tsx b/apps/tester-core/src/TestComponents/Shadow/ShadowTestPageStyles.tsx index 8b129937d91..c1a0fba3b2c 100644 --- a/apps/tester-core/src/TestComponents/Shadow/ShadowTestPageStyles.tsx +++ b/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. diff --git a/apps/tester-core/src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx b/apps/tester-core/src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx index abbe58fa252..332225e9690 100644 --- a/apps/tester-core/src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx +++ b/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'; diff --git a/apps/tester-core/src/TestComponents/StrokeWidth/StrokeWidthTest.tsx b/apps/tester-core/src/TestComponents/StrokeWidth/StrokeWidthTest.tsx index 3f6494855b7..415c1f970cc 100644 --- a/apps/tester-core/src/TestComponents/StrokeWidth/StrokeWidthTest.tsx +++ b/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'; diff --git a/apps/tester-core/src/TestComponents/Theme/ThemeTest.android.tsx b/apps/tester-core/src/TestComponents/Theme/ThemeTest.android.tsx index 329ad7c622e..f2240163796 100644 --- a/apps/tester-core/src/TestComponents/Theme/ThemeTest.android.tsx +++ b/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'; diff --git a/apps/tester-core/src/TestComponents/Theme/ThemeTest.tsx b/apps/tester-core/src/TestComponents/Theme/ThemeTest.tsx index bb28bcc5535..145487e95cc 100644 --- a/apps/tester-core/src/TestComponents/Theme/ThemeTest.tsx +++ b/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'; diff --git a/apps/tester-core/src/theme/ThemePickers.android.tsx b/apps/tester-core/src/theme/ThemePickers.android.tsx index 56cc0f6ff76..a74f8b3e11c 100644 --- a/apps/tester-core/src/theme/ThemePickers.android.tsx +++ b/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'; diff --git a/apps/tester-core/src/theme/ThemePickers.ios.tsx b/apps/tester-core/src/theme/ThemePickers.ios.tsx index 25811fde504..0195ea62a1d 100644 --- a/apps/tester-core/src/theme/ThemePickers.ios.tsx +++ b/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'; diff --git a/apps/tester-core/tsconfig.json b/apps/tester-core/tsconfig.json index c3e102afbbf..77573102892 100644 --- a/apps/tester-core/tsconfig.json +++ b/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" }, diff --git a/docs/pages/Theming/ThemedStylesheet.md b/docs/pages/Theming/ThemedStylesheet.md index f182a88e21c..b34d8f1a19e 100644 --- a/docs/pages/Theming/ThemedStylesheet.md +++ b/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). diff --git a/packages/agentic/design/SYMBOL_INVENTORY.md b/packages/agentic/design/SYMBOL_INVENTORY.md new file mode 100644 index 00000000000..b31bac0f025 --- /dev/null +++ b/packages/agentic/design/SYMBOL_INVENTORY.md @@ -0,0 +1,19 @@ +# Theming and styling symbol inventory + +`@fluentui-react-native/design` is the definition site for the symbols below. +The legacy packages listed here are compatibility entry points and contain only +explicit named re-exports. + +| Legacy package | Exported symbols | Owning design entry point | Definition | +| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | +| `@fluentui-react-native/theme` | `ThemeProvider`, `ThemeProviderProps`, `ThemeReference`, `OnThemeChange`, `ThemeRecipe`, `ThemeTransform` | `@fluentui-react-native/design/theming` | `src/theming/ThemeProvider.tsx`, `src/theming/themeReference.ts` | +| `@fluentui-react-native/theme-types` | `AliasColorTokens`, `AppearanceOptions`, `BaseShadowAliasTokens`, `Color`, `FabricWebPalette`, `FontDynamicTypeRamp`, `FontFamilies`, `FontFamily`, `FontFamilyValue`, `FontSize`, `FontSizeValuePoints`, `FontSizes`, `FontWeight`, `FontWeightValue`, `FontWeights`, `OfficePalette`, `Palette`, `PaletteBackgroundColors`, `PaletteTextColors`, `PartialPalette`, `PartialShadowDefinition`, `PartialTheme`, `PartialTypography`, `ShadowToken`, `ShadowValue`, `Spacing`, `TextStyling`, `Theme`, `ThemeColorDefinition`, `ThemeContext`, `ThemeOptions`, `ThemeShadowDefinition`, `Typography`, `Variant`, `VariantValue`, `Variants`, `useTheme` | `@fluentui-react-native/design/theming` | `src/theming/context.ts`, `src/theming/types/` | +| `@fluentui-react-native/theming-utils` | `getCurrentAppearance`, `isHighContrast`, `mapFontPipelineToTheme`, `mapPipelineToShadow`, `mapPipelineToTheme`, `setIsHighContrast` | `@fluentui-react-native/design/theming` | `src/theming/platformUtils.*.ts`, `src/theming/mapPipelineToShadow.ts`, `src/theming/mapPipelineToTheme*.ts` | +| `@fluentui-react-native/theme-tokens` | `getAliasTokens`, `getShadowTokens`, `globalTokens` | `@fluentui-react-native/design/tokens/legacy` | `src/tokens/legacy/` | +| `@fluentui-react-native/tokens` | `backgroundColorTokens`, `borderStyles`, `borderTokens`, `colorTokens`, `fontStyles`, `foregroundColorTokens`, `getPaletteFromTheme`, `layoutStyles`, `layoutTokens`, `shadowStyles`, `shadowTokens`, `styleFunction`, `textTokens`, `tokenBuilder`, `FontDecorationTokens`, `FontStyleTokens`, `FontTokens`, `FontVariantTokens`, `IBackgroundColorTokens`, `IBorderTokens`, `IColorTokens`, `IForegroundColorTokens`, `IShadowTokens`, `LayoutTokens`, `LookupThemePart`, `OperationSet`, `StyleFactoryFunction`, `StyleFactoryFunctionRaw`, `StyleFactoryOperation`, `TokenBuilder` | `@fluentui-react-native/design/styling/tokens` | `src/styling/tokens/` | +| `@fluentui-react-native/themed-stylesheet` | `NamedStyles`, `themedStyleSheet` | `@fluentui-react-native/design/styling/stylesheet` | `src/styling/stylesheet/themedStyleSheet.ts` | + +The three optional entry points (`tokens/legacy`, `styling/tokens`, and +`styling/stylesheet`) are intentionally absent from the design root barrel. +This keeps legacy token data and styling infrastructure out of consumers that +only use the current design APIs. diff --git a/packages/agentic/design/package.json b/packages/agentic/design/package.json index ef810c9f1f9..3e2a8039596 100644 --- a/packages/agentic/design/package.json +++ b/packages/agentic/design/package.json @@ -26,6 +26,12 @@ "import": "./lib/tokens/global.generated.js", "default": "./src/tokens/global.generated.ts" }, + "./tokens/legacy": { + "types": "./lib/tokens/legacy/index.d.ts", + "react-native": "./src/tokens/legacy/index.ts", + "import": "./lib/tokens/legacy/index.js", + "default": "./src/tokens/legacy/index.ts" + }, "./theming": { "types": "./lib/theming/index.d.ts", "react-native": "./src/theming/index.ts", @@ -44,6 +50,18 @@ "import": "./lib/styling/index.js", "default": "./src/styling/index.ts" }, + "./styling/stylesheet": { + "types": "./lib/styling/stylesheet/index.d.ts", + "react-native": "./src/styling/stylesheet/index.ts", + "import": "./lib/styling/stylesheet/index.js", + "default": "./src/styling/stylesheet/index.ts" + }, + "./styling/tokens": { + "types": "./lib/styling/tokens/index.d.ts", + "react-native": "./src/styling/tokens/index.ts", + "import": "./lib/styling/tokens/index.js", + "default": "./src/styling/tokens/index.ts" + }, "./package.json": "./package.json" }, "scripts": { @@ -56,15 +74,17 @@ "update-snapshots": "fluentui-scripts jest -u" }, "dependencies": { - "@fluentui-react-native/framework-base": "workspace:*" - }, - "devDependencies": { - "@babel/core": "catalog:", + "@fluentui-react-native/adapters": "workspace:*", "@fluentui-react-native/design-tokens-android": "catalog:", "@fluentui-react-native/design-tokens-ios": "catalog:", - "@fluentui-react-native/design-tokens-macos": "catalog:", "@fluentui-react-native/design-tokens-win32": "catalog:", "@fluentui-react-native/design-tokens-windows": "catalog:", + "@fluentui-react-native/framework-base": "workspace:*", + "assert-never": "^1.2.1" + }, + "devDependencies": { + "@babel/core": "catalog:", + "@fluentui-react-native/design-tokens-macos": "catalog:", "@fluentui-react-native/scripts": "workspace:*", "@office-iss/react-native-win32": "^0.81.0", "@react-native-community/cli": "^20.0.0", @@ -81,6 +101,7 @@ "react-test-renderer": "19.1.4" }, "peerDependencies": { + "@office-iss/react-native-win32": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0", "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.4", "react": "18.2.0 || 19.0.0 || 19.1.4", "react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.6", @@ -88,6 +109,9 @@ "react-native-windows": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0" }, "peerDependenciesMeta": { + "@office-iss/react-native-win32": { + "optional": true + }, "@types/react": { "optional": true }, diff --git a/packages/framework/themed-stylesheet/src/index.ts b/packages/agentic/design/src/styling/stylesheet/index.ts similarity index 100% rename from packages/framework/themed-stylesheet/src/index.ts rename to packages/agentic/design/src/styling/stylesheet/index.ts diff --git a/packages/framework/themed-stylesheet/src/themedStyleSheet.test.ts b/packages/agentic/design/src/styling/stylesheet/themedStyleSheet.test.ts similarity index 100% rename from packages/framework/themed-stylesheet/src/themedStyleSheet.test.ts rename to packages/agentic/design/src/styling/stylesheet/themedStyleSheet.test.ts diff --git a/packages/framework/themed-stylesheet/src/themedStyleSheet.ts b/packages/agentic/design/src/styling/stylesheet/themedStyleSheet.ts similarity index 100% rename from packages/framework/themed-stylesheet/src/themedStyleSheet.ts rename to packages/agentic/design/src/styling/stylesheet/themedStyleSheet.ts diff --git a/packages/utils/tokens/src/border-tokens.ts b/packages/agentic/design/src/styling/tokens/border-tokens.ts similarity index 91% rename from packages/utils/tokens/src/border-tokens.ts rename to packages/agentic/design/src/styling/tokens/border-tokens.ts index 25cc67a548a..cd25b4084be 100644 --- a/packages/utils/tokens/src/border-tokens.ts +++ b/packages/agentic/design/src/styling/tokens/border-tokens.ts @@ -1,6 +1,6 @@ import type { ViewStyle, ColorValue, AnimatableNumericValue } from 'react-native'; -import type { Theme } from '@fluentui-react-native/design/theming'; +import type { Theme } from '../../theming'; import { getPaletteFromTheme } from './color-tokens'; import type { OperationSet } from './token.types'; diff --git a/packages/utils/tokens/src/color-tokens.ts b/packages/agentic/design/src/styling/tokens/color-tokens.ts similarity index 89% rename from packages/utils/tokens/src/color-tokens.ts rename to packages/agentic/design/src/styling/tokens/color-tokens.ts index 4a1523b38bf..2905961adc0 100644 --- a/packages/utils/tokens/src/color-tokens.ts +++ b/packages/agentic/design/src/styling/tokens/color-tokens.ts @@ -1,6 +1,6 @@ import type { ColorValue } from 'react-native'; -import type { Theme, ThemeColorDefinition } from '@fluentui-react-native/design/theming'; +import type { Theme, ThemeColorDefinition } from '../../theming'; import type { OperationSet } from './token.types'; diff --git a/packages/utils/tokens/src/index.ts b/packages/agentic/design/src/styling/tokens/index.ts similarity index 100% rename from packages/utils/tokens/src/index.ts rename to packages/agentic/design/src/styling/tokens/index.ts diff --git a/packages/utils/tokens/src/layout-tokens.ts b/packages/agentic/design/src/styling/tokens/layout-tokens.ts similarity index 94% rename from packages/utils/tokens/src/layout-tokens.ts rename to packages/agentic/design/src/styling/tokens/layout-tokens.ts index aae02e4c1f9..675818d4750 100644 --- a/packages/utils/tokens/src/layout-tokens.ts +++ b/packages/agentic/design/src/styling/tokens/layout-tokens.ts @@ -1,6 +1,6 @@ import type { ViewStyle } from 'react-native'; -import type { Theme } from '@fluentui-react-native/design/theming'; +import type { Theme } from '../../theming'; import type { OperationSet } from './token.types'; import { tokenBuilder } from './tokenBuilder'; diff --git a/packages/utils/tokens/src/shadow-tokens.ts b/packages/agentic/design/src/styling/tokens/shadow-tokens.ts similarity index 92% rename from packages/utils/tokens/src/shadow-tokens.ts rename to packages/agentic/design/src/styling/tokens/shadow-tokens.ts index ce10149eab1..3aa84aaefbe 100644 --- a/packages/utils/tokens/src/shadow-tokens.ts +++ b/packages/agentic/design/src/styling/tokens/shadow-tokens.ts @@ -1,6 +1,6 @@ import type { AnimatableNumericValue, ColorValue, ViewStyle } from 'react-native'; -import type { Theme } from '@fluentui-react-native/design/theming'; +import type { Theme } from '../../theming'; import type { OperationSet } from './token.types'; import { tokenBuilder } from './tokenBuilder'; diff --git a/packages/utils/tokens/src/text-tokens.ts b/packages/agentic/design/src/styling/tokens/text-tokens.ts similarity index 97% rename from packages/utils/tokens/src/text-tokens.ts rename to packages/agentic/design/src/styling/tokens/text-tokens.ts index 62e371df57a..2715856f39d 100644 --- a/packages/utils/tokens/src/text-tokens.ts +++ b/packages/agentic/design/src/styling/tokens/text-tokens.ts @@ -1,7 +1,7 @@ import type { TextProps, TextStyle } from 'react-native'; import type { ITextProps, ITextStyle } from '@fluentui-react-native/adapters'; -import type { Theme, Typography } from '@fluentui-react-native/design/theming'; +import type { Theme, Typography } from '../../theming'; import { styleFunction } from './token.function'; import type { TokenBuilder } from './tokenBuilder'; diff --git a/packages/utils/tokens/src/token.function.ts b/packages/agentic/design/src/styling/tokens/token.function.ts similarity index 100% rename from packages/utils/tokens/src/token.function.ts rename to packages/agentic/design/src/styling/tokens/token.function.ts diff --git a/packages/utils/tokens/src/token.types.ts b/packages/agentic/design/src/styling/tokens/token.types.ts similarity index 100% rename from packages/utils/tokens/src/token.types.ts rename to packages/agentic/design/src/styling/tokens/token.types.ts diff --git a/packages/utils/tokens/src/tokenBuilder.ts b/packages/agentic/design/src/styling/tokens/tokenBuilder.ts similarity index 91% rename from packages/utils/tokens/src/tokenBuilder.ts rename to packages/agentic/design/src/styling/tokens/tokenBuilder.ts index acd918563f0..6f0f304255c 100644 --- a/packages/utils/tokens/src/tokenBuilder.ts +++ b/packages/agentic/design/src/styling/tokens/tokenBuilder.ts @@ -1,6 +1,6 @@ import type { ViewStyle, TextStyle, ImageStyle } from 'react-native'; -import type { Theme } from '@fluentui-react-native/design/theming'; +import type { Theme } from '../../theming'; export type TokenBuilder = { from: (tokens: TTokens, theme: Theme) => TStyle; diff --git a/packages/theming/theming-utils/src/__tests__/__snapshots__/theming-utils.test.ts.snap b/packages/agentic/design/src/theming/__tests__/__snapshots__/theming-utils.test.ts.snap similarity index 100% rename from packages/theming/theming-utils/src/__tests__/__snapshots__/theming-utils.test.ts.snap rename to packages/agentic/design/src/theming/__tests__/__snapshots__/theming-utils.test.ts.snap diff --git a/packages/theming/theming-utils/src/__tests__/theming-utils.test.ts b/packages/agentic/design/src/theming/__tests__/theming-utils.test.ts similarity index 100% rename from packages/theming/theming-utils/src/__tests__/theming-utils.test.ts rename to packages/agentic/design/src/theming/__tests__/theming-utils.test.ts diff --git a/packages/agentic/design/src/theming/index.ts b/packages/agentic/design/src/theming/index.ts index 2cebc8dc4a3..a4f66b56b02 100644 --- a/packages/agentic/design/src/theming/index.ts +++ b/packages/agentic/design/src/theming/index.ts @@ -35,3 +35,5 @@ export type { ThemeProviderProps } from './ThemeProvider'; export { ThemeReference } from './themeReference'; export type { OnThemeChange, ThemeRecipe, ThemeTransform } from './themeReference'; export { getCurrentAppearance, isHighContrast, setIsHighContrast } from './platformUtils'; +export { mapFontPipelineToTheme, mapPipelineToTheme } from './mapPipelineToTheme'; +export { mapPipelineToShadow } from './mapPipelineToShadow'; diff --git a/packages/theming/theming-utils/src/mapPipelineToShadow.ts b/packages/agentic/design/src/theming/mapPipelineToShadow.ts similarity index 95% rename from packages/theming/theming-utils/src/mapPipelineToShadow.ts rename to packages/agentic/design/src/theming/mapPipelineToShadow.ts index 4f0d5fd5a44..fcde469cfa6 100644 --- a/packages/theming/theming-utils/src/mapPipelineToShadow.ts +++ b/packages/agentic/design/src/theming/mapPipelineToShadow.ts @@ -1,4 +1,4 @@ -import type { ThemeShadowDefinition } from '@fluentui-react-native/design/theming'; +import type { ThemeShadowDefinition } from './types/Shadow.types'; /** * Given design token pipeline output for shadow tokens, creates an object that can be used in Theme object. diff --git a/packages/theming/theming-utils/src/mapPipelineToTheme.android.ts b/packages/agentic/design/src/theming/mapPipelineToTheme.android.ts similarity index 98% rename from packages/theming/theming-utils/src/mapPipelineToTheme.android.ts rename to packages/agentic/design/src/theming/mapPipelineToTheme.android.ts index f4b9acb40f0..1fc2744f005 100644 --- a/packages/theming/theming-utils/src/mapPipelineToTheme.android.ts +++ b/packages/agentic/design/src/theming/mapPipelineToTheme.android.ts @@ -1,4 +1,5 @@ -import type { AliasColorTokens, Variants, VariantValue } from '@fluentui-react-native/design/theming'; +import type { AliasColorTokens } from './types/Color.types'; +import type { Variants, VariantValue } from './types/Typography.types'; // API that maps tokens coming from the android token pipeline to Theme color values. export function mapPipelineToTheme(pipelineOutput: any): AliasColorTokens { diff --git a/packages/theming/theming-utils/src/mapPipelineToTheme.ios.ts b/packages/agentic/design/src/theming/mapPipelineToTheme.ios.ts similarity index 97% rename from packages/theming/theming-utils/src/mapPipelineToTheme.ios.ts rename to packages/agentic/design/src/theming/mapPipelineToTheme.ios.ts index 06fe1e68a30..960624f783b 100644 --- a/packages/theming/theming-utils/src/mapPipelineToTheme.ios.ts +++ b/packages/agentic/design/src/theming/mapPipelineToTheme.ios.ts @@ -1,5 +1,6 @@ -import type { AliasColorTokens, FontDynamicTypeRamp, Variants, VariantValue } from '@fluentui-react-native/design/theming'; -import type { FontStyleTokens } from '@fluentui-react-native/tokens'; +import type { FontStyleTokens } from '../styling/tokens'; +import type { AliasColorTokens } from './types/Color.types'; +import type { FontDynamicTypeRamp, Variants, VariantValue } from './types/Typography.types'; // API that maps tokens coming from the iOS token pipeline to Theme color values. export function mapPipelineToTheme(pipelineOutput: any): AliasColorTokens { diff --git a/packages/theming/theming-utils/src/mapPipelineToTheme.ts b/packages/agentic/design/src/theming/mapPipelineToTheme.ts similarity index 98% rename from packages/theming/theming-utils/src/mapPipelineToTheme.ts rename to packages/agentic/design/src/theming/mapPipelineToTheme.ts index 037050e134e..2d948624d63 100644 --- a/packages/theming/theming-utils/src/mapPipelineToTheme.ts +++ b/packages/agentic/design/src/theming/mapPipelineToTheme.ts @@ -1,4 +1,5 @@ -import type { AliasColorTokens, Variants } from '@fluentui-react-native/design/theming'; +import type { AliasColorTokens } from './types/Color.types'; +import type { Variants } from './types/Typography.types'; export function mapPipelineToTheme(pipelineOutput: any): AliasColorTokens { return { diff --git a/packages/theming/theme-tokens/src/getTokens.android.ts b/packages/agentic/design/src/tokens/legacy/getTokens.android.ts similarity index 93% rename from packages/theming/theme-tokens/src/getTokens.android.ts rename to packages/agentic/design/src/tokens/legacy/getTokens.android.ts index a1a75486066..cc8275e33b4 100644 --- a/packages/theming/theme-tokens/src/getTokens.android.ts +++ b/packages/agentic/design/src/tokens/legacy/getTokens.android.ts @@ -2,7 +2,7 @@ import darkAliasTokens from '@fluentui-react-native/design-tokens-android/dark/t import darkShadowTokens from '@fluentui-react-native/design-tokens-android/dark/tokens-shadow.json'; import lightAliasTokens from '@fluentui-react-native/design-tokens-android/light/tokens-aliases.json'; import lightShadowTokens from '@fluentui-react-native/design-tokens-android/light/tokens-shadow.json'; -import type { AppearanceOptions } from '@fluentui-react-native/design/theming'; +import type { AppearanceOptions } from '../../theming'; export function getAliasTokens(mode: AppearanceOptions) { if (mode === 'light') { diff --git a/packages/theming/theme-tokens/src/getTokens.ios.ts b/packages/agentic/design/src/tokens/legacy/getTokens.ios.ts similarity index 95% rename from packages/theming/theme-tokens/src/getTokens.ios.ts rename to packages/agentic/design/src/tokens/legacy/getTokens.ios.ts index d254201df28..1103fd1a050 100644 --- a/packages/theming/theme-tokens/src/getTokens.ios.ts +++ b/packages/agentic/design/src/tokens/legacy/getTokens.ios.ts @@ -3,7 +3,7 @@ import iOSDarkShadowTokens from '@fluentui-react-native/design-tokens-ios/dark/t import iOSDarkElevatedAliasTokens from '@fluentui-react-native/design-tokens-ios/elevateddark/tokens-aliases.json'; import iOSLightAliasTokens from '@fluentui-react-native/design-tokens-ios/light/tokens-aliases.json'; import iOSLightShadowTokens from '@fluentui-react-native/design-tokens-ios/light/tokens-shadow.json'; -import type { AppearanceOptions } from '@fluentui-react-native/design/theming'; +import type { AppearanceOptions } from '../../theming'; import { assertNever } from 'assert-never'; export function getAliasTokens(mode: AppearanceOptions) { diff --git a/packages/theming/theme-tokens/src/getTokens.ts b/packages/agentic/design/src/tokens/legacy/getTokens.ts similarity index 93% rename from packages/theming/theme-tokens/src/getTokens.ts rename to packages/agentic/design/src/tokens/legacy/getTokens.ts index f490f2782f0..86cf9063edb 100644 --- a/packages/theming/theme-tokens/src/getTokens.ts +++ b/packages/agentic/design/src/tokens/legacy/getTokens.ts @@ -3,7 +3,7 @@ import darkAliasTokens from '@fluentui-react-native/design-tokens-windows/dark/t import darkShadowTokens from '@fluentui-react-native/design-tokens-windows/dark/tokens-shadow.json'; import lightAliasTokens from '@fluentui-react-native/design-tokens-windows/light/tokens-aliases.json'; import lightShadowTokens from '@fluentui-react-native/design-tokens-windows/light/tokens-shadow.json'; -import type { AppearanceOptions } from '@fluentui-react-native/design/theming'; +import type { AppearanceOptions } from '../../theming'; import { assertNever } from 'assert-never'; import { hcAliasTokens } from './highContrast/tokens-alias'; diff --git a/packages/theming/theme-tokens/src/highContrast/tokens-alias.ts b/packages/agentic/design/src/tokens/legacy/highContrast/tokens-alias.ts similarity index 100% rename from packages/theming/theme-tokens/src/highContrast/tokens-alias.ts rename to packages/agentic/design/src/tokens/legacy/highContrast/tokens-alias.ts diff --git a/packages/theming/theme-tokens/src/highContrast/tokens-alias.win32.ts b/packages/agentic/design/src/tokens/legacy/highContrast/tokens-alias.win32.ts similarity index 100% rename from packages/theming/theme-tokens/src/highContrast/tokens-alias.win32.ts rename to packages/agentic/design/src/tokens/legacy/highContrast/tokens-alias.win32.ts diff --git a/packages/theming/theme-tokens/src/index.ts b/packages/agentic/design/src/tokens/legacy/index.ts similarity index 100% rename from packages/theming/theme-tokens/src/index.ts rename to packages/agentic/design/src/tokens/legacy/index.ts diff --git a/packages/theming/theme-tokens/src/tokens-global.android.ts b/packages/agentic/design/src/tokens/legacy/tokens-global.android.ts similarity index 100% rename from packages/theming/theme-tokens/src/tokens-global.android.ts rename to packages/agentic/design/src/tokens/legacy/tokens-global.android.ts diff --git a/packages/theming/theme-tokens/src/tokens-global.ios.ts b/packages/agentic/design/src/tokens/legacy/tokens-global.ios.ts similarity index 100% rename from packages/theming/theme-tokens/src/tokens-global.ios.ts rename to packages/agentic/design/src/tokens/legacy/tokens-global.ios.ts diff --git a/packages/theming/theme-tokens/src/tokens-global.ts b/packages/agentic/design/src/tokens/legacy/tokens-global.ts similarity index 100% rename from packages/theming/theme-tokens/src/tokens-global.ts rename to packages/agentic/design/src/tokens/legacy/tokens-global.ts diff --git a/packages/theming/theme-tokens/src/tokens-global.win32.ts b/packages/agentic/design/src/tokens/legacy/tokens-global.win32.ts similarity index 100% rename from packages/theming/theme-tokens/src/tokens-global.win32.ts rename to packages/agentic/design/src/tokens/legacy/tokens-global.win32.ts diff --git a/packages/agentic/design/tsconfig.json b/packages/agentic/design/tsconfig.json index db54025b4dc..a6ffa4b7c70 100644 --- a/packages/agentic/design/tsconfig.json +++ b/packages/agentic/design/tsconfig.json @@ -10,6 +10,9 @@ "include": ["src", "src/**/*.json"], "exclude": ["**/*.stories.ts", "**/*.stories.tsx"], "references": [ + { + "path": "../../utils/adapters/tsconfig.json" + }, { "path": "../../framework-base/tsconfig.json" }, diff --git a/packages/components/Avatar/package.json b/packages/components/Avatar/package.json index 53f935a2ea5..e909a09de7b 100644 --- a/packages/components/Avatar/package.json +++ b/packages/components/Avatar/package.json @@ -37,7 +37,6 @@ "@fluentui-react-native/framework": "workspace:*", "@fluentui-react-native/framework-base": "workspace:*", "@fluentui-react-native/icon": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*", "@fluentui-react-native/use-styling": "workspace:*", "unicode-segmenter": "^0.14.4" }, diff --git a/packages/components/Avatar/src/Avatar.styling.ts b/packages/components/Avatar/src/Avatar.styling.ts index cea5b1197fb..4f736f2fb14 100644 --- a/packages/components/Avatar/src/Avatar.styling.ts +++ b/packages/components/Avatar/src/Avatar.styling.ts @@ -2,7 +2,7 @@ import { Platform } from 'react-native'; import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; -import { borderStyles, fontStyles } from '@fluentui-react-native/tokens'; +import { borderStyles, fontStyles } from '@fluentui-react-native/design/styling/tokens'; import type { AvatarTokens, diff --git a/packages/components/Avatar/src/Avatar.types.ts b/packages/components/Avatar/src/Avatar.types.ts index fee53086ac9..c7758098b0d 100644 --- a/packages/components/Avatar/src/Avatar.types.ts +++ b/packages/components/Avatar/src/Avatar.types.ts @@ -3,7 +3,12 @@ import type { ImageProps, ViewProps, TextProps, ColorValue } from 'react-native' import type { IViewProps } from '@fluentui-react-native/adapters'; import type { PresenceBadgeProps, BadgeSize, PresenceBadgeStatus } from '@fluentui-react-native/badge'; import type { IconProps, IconSourcesType } from '@fluentui-react-native/icon'; -import type { IBackgroundColorTokens, IForegroundColorTokens, IBorderTokens, FontTokens } from '@fluentui-react-native/tokens'; +import type { + IBackgroundColorTokens, + IForegroundColorTokens, + IBorderTokens, + FontTokens, +} from '@fluentui-react-native/design/styling/tokens'; import type { SvgProps } from 'react-native-svg'; export const AvatarName = 'Avatar'; diff --git a/packages/components/Avatar/tsconfig.json b/packages/components/Avatar/tsconfig.json index 71d1e2da907..1c464e9399a 100644 --- a/packages/components/Avatar/tsconfig.json +++ b/packages/components/Avatar/tsconfig.json @@ -29,9 +29,6 @@ { "path": "../../../scripts/tsconfig.json" }, - { - "path": "../../utils/tokens/tsconfig.json" - }, { "path": "../../framework/use-styling/tsconfig.json" } diff --git a/packages/components/Badge/package.json b/packages/components/Badge/package.json index 2675ae73841..bb62748392c 100644 --- a/packages/components/Badge/package.json +++ b/packages/components/Badge/package.json @@ -34,7 +34,6 @@ "@fluentui-react-native/framework-base": "workspace:*", "@fluentui-react-native/icon": "workspace:*", "@fluentui-react-native/text": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*", "@fluentui-react-native/use-styling": "workspace:*" }, "devDependencies": { diff --git a/packages/components/Badge/src/Badge.styling.ts b/packages/components/Badge/src/Badge.styling.ts index 02bccaa6da3..e167f8c697c 100644 --- a/packages/components/Badge/src/Badge.styling.ts +++ b/packages/components/Badge/src/Badge.styling.ts @@ -1,6 +1,6 @@ import type { UseStylingOptions, Theme } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; -import { borderStyles, layoutStyles, fontStyles } from '@fluentui-react-native/tokens'; +import { borderStyles, layoutStyles, fontStyles } from '@fluentui-react-native/design/styling/tokens'; import { badgeName, BadgeColors, BadgeSizes, BadgeShapes, BadgeAppearances } from './Badge.types'; import type { BadgeCoreTokens, BadgeTokens, BadgeSlotProps, BadgeProps, BadgeConfigurableProps, BadgeNamedColor } from './Badge.types'; diff --git a/packages/components/Badge/src/Badge.types.ts b/packages/components/Badge/src/Badge.types.ts index 0c312e738ea..9a4fa1703e5 100644 --- a/packages/components/Badge/src/Badge.types.ts +++ b/packages/components/Badge/src/Badge.types.ts @@ -5,7 +5,7 @@ import type { ShadowProps } from '@fluentui-react-native/experimental-shadow'; import type { IconProps, IconSourcesType } from '@fluentui-react-native/icon'; import type { TextProps } from '@fluentui-react-native/text'; import type { ShadowToken } from '@fluentui-react-native/design/theming'; -import type { FontTokens, IBorderTokens, IColorTokens, IShadowTokens, LayoutTokens } from '@fluentui-react-native/tokens'; +import type { FontTokens, IBorderTokens, IColorTokens, IShadowTokens, LayoutTokens } from '@fluentui-react-native/design/styling/tokens'; export const badgeName = 'Badge'; export const BadgeSizes = ['tiny', 'extraSmall', 'small', 'medium', 'large', 'extraLarge'] as const; diff --git a/packages/components/Badge/src/CounterBadge/CounterBadge.styling.ts b/packages/components/Badge/src/CounterBadge/CounterBadge.styling.ts index 336ab295b6f..c8d184f6c7c 100644 --- a/packages/components/Badge/src/CounterBadge/CounterBadge.styling.ts +++ b/packages/components/Badge/src/CounterBadge/CounterBadge.styling.ts @@ -1,6 +1,6 @@ import type { UseStylingOptions, Theme } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; -import { borderStyles } from '@fluentui-react-native/tokens'; +import { borderStyles } from '@fluentui-react-native/design/styling/tokens'; import { counterBadgeName } from './CounterBadge.types'; import type { CounterBadgeTokens, CounterBadgeProps, CounterBadgeSlotProps } from './CounterBadge.types'; diff --git a/packages/components/Badge/src/PresenceBadge/PresenceBadge.styling.ts b/packages/components/Badge/src/PresenceBadge/PresenceBadge.styling.ts index a6e8abd4a7e..4ba09223c8f 100644 --- a/packages/components/Badge/src/PresenceBadge/PresenceBadge.styling.ts +++ b/packages/components/Badge/src/PresenceBadge/PresenceBadge.styling.ts @@ -1,6 +1,6 @@ import type { UseStylingOptions, Theme } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; -import { borderStyles } from '@fluentui-react-native/tokens'; +import { borderStyles } from '@fluentui-react-native/design/styling/tokens'; import { presenceBadgeName, PresenceBadgeStatuses } from './PresenceBadge.types'; import type { PresenceBadgeTokens, PresenceBadgeSlotProps, PresenceBadgeProps } from './PresenceBadge.types'; diff --git a/packages/components/Badge/tsconfig.json b/packages/components/Badge/tsconfig.json index 6c1ec30ebfe..cba0081cb82 100644 --- a/packages/components/Badge/tsconfig.json +++ b/packages/components/Badge/tsconfig.json @@ -35,9 +35,6 @@ { "path": "../Text/tsconfig.json" }, - { - "path": "../../utils/tokens/tsconfig.json" - }, { "path": "../../framework/use-styling/tsconfig.json" } diff --git a/packages/components/Button/package.json b/packages/components/Button/package.json index 2eedf39a59e..b4cd35945f0 100644 --- a/packages/components/Button/package.json +++ b/packages/components/Button/package.json @@ -42,7 +42,6 @@ "@fluentui-react-native/pressable": "workspace:*", "@fluentui-react-native/styling-utils": "workspace:*", "@fluentui-react-native/text": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*", "@fluentui-react-native/use-styling": "workspace:*", "@uifabricshared/foundation-composable": "workspace:*", "@uifabricshared/foundation-compose": "workspace:*", diff --git a/packages/components/Button/src/Button.styling.ts b/packages/components/Button/src/Button.styling.ts index c9724251ade..35264bbf515 100644 --- a/packages/components/Button/src/Button.styling.ts +++ b/packages/components/Button/src/Button.styling.ts @@ -4,8 +4,8 @@ import { Platform } from 'react-native'; import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; import { getTextMarginAdjustment } from '@fluentui-react-native/styling-utils'; -import { borderStyles, layoutStyles, fontStyles } from '@fluentui-react-native/tokens'; -import type { FontTokens } from '@fluentui-react-native/tokens'; +import { borderStyles, layoutStyles, fontStyles } from '@fluentui-react-native/design/styling/tokens'; +import type { FontTokens } from '@fluentui-react-native/design/styling/tokens'; import { buttonName } from './Button.types'; import type { ButtonTokens, ButtonSlotProps, ButtonProps, ButtonSize, ButtonAppearance } from './Button.types'; diff --git a/packages/components/Button/src/Button.types.ts b/packages/components/Button/src/Button.types.ts index 3fc5245a5c5..f2fea4390bf 100644 --- a/packages/components/Button/src/Button.types.ts +++ b/packages/components/Button/src/Button.types.ts @@ -5,7 +5,7 @@ import type { IconProps, IconSourcesType } from '@fluentui-react-native/icon'; import type { IFocusable, InteractionEvent, PressablePropsExtended, PressableState } from '@fluentui-react-native/interactive-hooks'; import type { TextProps } from '@fluentui-react-native/text'; import type { ShadowToken } from '@fluentui-react-native/design/theming'; -import type { FontTokens, IBorderTokens, IColorTokens, IShadowTokens, LayoutTokens } from '@fluentui-react-native/tokens'; +import type { FontTokens, IBorderTokens, IColorTokens, IShadowTokens, LayoutTokens } from '@fluentui-react-native/design/styling/tokens'; export const buttonName = 'Button'; export type ButtonSize = 'small' | 'medium' | 'large'; diff --git a/packages/components/Button/src/CompoundButton/CompoundButton.styling.ts b/packages/components/Button/src/CompoundButton/CompoundButton.styling.ts index 1b72d0d3e08..a243d8e3f23 100644 --- a/packages/components/Button/src/CompoundButton/CompoundButton.styling.ts +++ b/packages/components/Button/src/CompoundButton/CompoundButton.styling.ts @@ -1,6 +1,6 @@ import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; -import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/tokens'; +import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/design/styling/tokens'; import { compoundButtonName } from './CompoundButton.types'; import type { CompoundButtonTokens, CompoundButtonSlotProps, CompoundButtonProps } from './CompoundButton.types'; diff --git a/packages/components/Button/src/CompoundButton/CompoundButton.types.ts b/packages/components/Button/src/CompoundButton/CompoundButton.types.ts index 874c22ab684..ad09cd02c9d 100644 --- a/packages/components/Button/src/CompoundButton/CompoundButton.types.ts +++ b/packages/components/Button/src/CompoundButton/CompoundButton.types.ts @@ -1,7 +1,7 @@ import type { ViewProps, ColorValue } from 'react-native'; import type { TextProps } from '@fluentui-react-native/text'; -import type { FontTokens } from '@fluentui-react-native/tokens'; +import type { FontTokens } from '@fluentui-react-native/design/styling/tokens'; import type { ButtonSlotProps, ButtonTokens, ButtonProps } from '../Button.types'; diff --git a/packages/components/Button/src/FAB/FAB.styling.ts b/packages/components/Button/src/FAB/FAB.styling.ts index 35b4209907b..b3e585203cd 100644 --- a/packages/components/Button/src/FAB/FAB.styling.ts +++ b/packages/components/Button/src/FAB/FAB.styling.ts @@ -3,7 +3,7 @@ import { Platform } from 'react-native'; import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; import { getTextMarginAdjustment } from '@fluentui-react-native/styling-utils'; -import { borderStyles, layoutStyles, fontStyles, shadowStyles } from '@fluentui-react-native/tokens'; +import { borderStyles, layoutStyles, fontStyles, shadowStyles } from '@fluentui-react-native/design/styling/tokens'; import { fabName } from './FAB.types'; import type { FABProps, FABSlotProps, FABTokens } from './FAB.types'; diff --git a/packages/components/Button/src/ToggleButton/ToggleButton.styling.ts b/packages/components/Button/src/ToggleButton/ToggleButton.styling.ts index fa6ef29c89d..a3e3246103e 100644 --- a/packages/components/Button/src/ToggleButton/ToggleButton.styling.ts +++ b/packages/components/Button/src/ToggleButton/ToggleButton.styling.ts @@ -1,6 +1,6 @@ import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; -import { borderStyles, layoutStyles, fontStyles } from '@fluentui-react-native/tokens'; +import { borderStyles, layoutStyles, fontStyles } from '@fluentui-react-native/design/styling/tokens'; import { toggleButtonName } from './ToggleButton.types'; import type { ToggleButtonTokens, ToggleButtonSlotProps, ToggleButtonProps } from './ToggleButton.types'; diff --git a/packages/components/Button/src/deprecated/Button.android.tsx b/packages/components/Button/src/deprecated/Button.android.tsx index e755dfb0d4e..f4d8be27dda 100644 --- a/packages/components/Button/src/deprecated/Button.android.tsx +++ b/packages/components/Button/src/deprecated/Button.android.tsx @@ -6,7 +6,13 @@ import { filterViewProps } from '@fluentui-react-native/adapters'; import { Icon, createIconProps } from '@fluentui-react-native/icon'; import { useAsPressable, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; import { Text } from '@fluentui-react-native/text'; -import { backgroundColorTokens, borderTokens, textTokens, foregroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; +import { + backgroundColorTokens, + borderTokens, + textTokens, + foregroundColorTokens, + getPaletteFromTheme, +} from '@fluentui-react-native/design/styling/tokens'; import type { ISlots } from '@uifabricshared/foundation-composable'; import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; import { compose } from '@uifabricshared/foundation-compose'; diff --git a/packages/components/Button/src/deprecated/Button.tsx b/packages/components/Button/src/deprecated/Button.tsx index 36960622ee9..d93dd17e622 100644 --- a/packages/components/Button/src/deprecated/Button.tsx +++ b/packages/components/Button/src/deprecated/Button.tsx @@ -6,7 +6,13 @@ import { filterViewProps } from '@fluentui-react-native/adapters'; import { Icon, createIconProps } from '@fluentui-react-native/icon'; import { useAsPressable, useKeyProps, useViewCommandFocus, useOnPressWithFocus } from '@fluentui-react-native/interactive-hooks'; import { Text } from '@fluentui-react-native/text'; -import { backgroundColorTokens, borderTokens, textTokens, foregroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; +import { + backgroundColorTokens, + borderTokens, + textTokens, + foregroundColorTokens, + getPaletteFromTheme, +} from '@fluentui-react-native/design/styling/tokens'; import type { ISlots } from '@uifabricshared/foundation-composable'; import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; import { compose } from '@uifabricshared/foundation-compose'; diff --git a/packages/components/Button/src/deprecated/Button.types.ts b/packages/components/Button/src/deprecated/Button.types.ts index c8b5d6fb2f4..647266e913b 100644 --- a/packages/components/Button/src/deprecated/Button.types.ts +++ b/packages/components/Button/src/deprecated/Button.types.ts @@ -5,7 +5,12 @@ import type { IconProps, IconSourcesType } from '@fluentui-react-native/icon'; import type { IFocusable, IPressableState } from '@fluentui-react-native/interactive-hooks'; import type { IPressableProps } from '@fluentui-react-native/pressable'; import type { ITextProps } from '@fluentui-react-native/text'; -import type { FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens'; +import type { + FontTokens, + IForegroundColorTokens, + IBackgroundColorTokens, + IBorderTokens, +} from '@fluentui-react-native/design/styling/tokens'; import type { IRenderData } from '@uifabricshared/foundation-composable'; /** diff --git a/packages/components/Button/tsconfig.json b/packages/components/Button/tsconfig.json index 55963bc92ff..86599484e65 100644 --- a/packages/components/Button/tsconfig.json +++ b/packages/components/Button/tsconfig.json @@ -47,9 +47,6 @@ { "path": "../Text/tsconfig.json" }, - { - "path": "../../utils/tokens/tsconfig.json" - }, { "path": "../../framework/use-styling/tsconfig.json" }, diff --git a/packages/components/Checkbox/package.json b/packages/components/Checkbox/package.json index 16906661848..d5c0a230776 100644 --- a/packages/components/Checkbox/package.json +++ b/packages/components/Checkbox/package.json @@ -39,7 +39,6 @@ "@fluentui-react-native/pressable": "workspace:*", "@fluentui-react-native/styling-utils": "workspace:*", "@fluentui-react-native/text": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*", "@fluentui-react-native/use-styling": "workspace:*", "@uifabricshared/foundation-composable": "workspace:*", "@uifabricshared/foundation-compose": "workspace:*", diff --git a/packages/components/Checkbox/src/Checkbox.styling.ts b/packages/components/Checkbox/src/Checkbox.styling.ts index 28a859fbca2..819ea5a2dea 100644 --- a/packages/components/Checkbox/src/Checkbox.styling.ts +++ b/packages/components/Checkbox/src/Checkbox.styling.ts @@ -3,7 +3,7 @@ import { Platform } from 'react-native'; import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; import { getTextMarginAdjustment } from '@fluentui-react-native/styling-utils'; -import { borderStyles, fontStyles } from '@fluentui-react-native/tokens'; +import { borderStyles, fontStyles } from '@fluentui-react-native/design/styling/tokens'; import { checkboxName } from './Checkbox.types'; import type { CheckboxTokens, CheckboxSlotProps, CheckboxProps, CheckboxSize } from './Checkbox.types'; diff --git a/packages/components/Checkbox/src/Checkbox.types.ts b/packages/components/Checkbox/src/Checkbox.types.ts index 9fd8f0f80c2..be8e4b68d32 100644 --- a/packages/components/Checkbox/src/Checkbox.types.ts +++ b/packages/components/Checkbox/src/Checkbox.types.ts @@ -9,7 +9,7 @@ import type { IForegroundColorTokens, IBackgroundColorTokens, LayoutTokens, -} from '@fluentui-react-native/tokens'; +} from '@fluentui-react-native/design/styling/tokens'; import type { SvgProps } from 'react-native-svg'; export const checkboxName = 'Checkbox'; diff --git a/packages/components/Checkbox/src/deprecated/Checkbox.tsx b/packages/components/Checkbox/src/deprecated/Checkbox.tsx index d01b280eee8..30393469ce8 100644 --- a/packages/components/Checkbox/src/deprecated/Checkbox.tsx +++ b/packages/components/Checkbox/src/deprecated/Checkbox.tsx @@ -12,8 +12,8 @@ import { } from '@fluentui-react-native/interactive-hooks'; import type { IPressableProps } from '@fluentui-react-native/pressable'; import { Text } from '@fluentui-react-native/text'; -import { foregroundColorTokens, textTokens, borderTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; -import { backgroundColorTokens } from '@fluentui-react-native/tokens'; +import { foregroundColorTokens, textTokens, borderTokens, getPaletteFromTheme } from '@fluentui-react-native/design/styling/tokens'; +import { backgroundColorTokens } from '@fluentui-react-native/design/styling/tokens'; import type { ISlots } from '@uifabricshared/foundation-composable'; import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; import { compose } from '@uifabricshared/foundation-compose'; diff --git a/packages/components/Checkbox/src/deprecated/Checkbox.types.ts b/packages/components/Checkbox/src/deprecated/Checkbox.types.ts index 21fa62ca50c..80629e7ddc4 100644 --- a/packages/components/Checkbox/src/deprecated/Checkbox.types.ts +++ b/packages/components/Checkbox/src/deprecated/Checkbox.types.ts @@ -5,7 +5,12 @@ import type { IViewProps } from '@fluentui-react-native/adapters'; import type { IPressableState, IFocusable } from '@fluentui-react-native/interactive-hooks'; // import { IPressableProps } from '@fluentui-react-native/pressable'; import type { ITextProps } from '@fluentui-react-native/text'; -import type { FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens'; +import type { + FontTokens, + IForegroundColorTokens, + IBackgroundColorTokens, + IBorderTokens, +} from '@fluentui-react-native/design/styling/tokens'; import type { IRenderData } from '@uifabricshared/foundation-composable'; /** diff --git a/packages/components/Checkbox/tsconfig.json b/packages/components/Checkbox/tsconfig.json index 85ce33df9bc..d2c633e958b 100644 --- a/packages/components/Checkbox/tsconfig.json +++ b/packages/components/Checkbox/tsconfig.json @@ -38,9 +38,6 @@ { "path": "../Text/tsconfig.json" }, - { - "path": "../../utils/tokens/tsconfig.json" - }, { "path": "../../framework/use-styling/tsconfig.json" }, diff --git a/packages/components/Chip/package.json b/packages/components/Chip/package.json index fd1f58ecfe6..45140d1c845 100644 --- a/packages/components/Chip/package.json +++ b/packages/components/Chip/package.json @@ -32,8 +32,7 @@ "@fluentui-react-native/framework-base": "workspace:*", "@fluentui-react-native/icon": "workspace:*", "@fluentui-react-native/interactive-hooks": "workspace:*", - "@fluentui-react-native/text": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*" + "@fluentui-react-native/text": "workspace:*" }, "devDependencies": { "@babel/core": "catalog:", diff --git a/packages/components/Chip/src/Chip.styling.ts b/packages/components/Chip/src/Chip.styling.ts index a8341244bfe..af77b4414f4 100644 --- a/packages/components/Chip/src/Chip.styling.ts +++ b/packages/components/Chip/src/Chip.styling.ts @@ -1,6 +1,6 @@ import type { UseStylingOptions, Theme } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; -import { borderStyles, layoutStyles, fontStyles } from '@fluentui-react-native/tokens'; +import { borderStyles, layoutStyles, fontStyles } from '@fluentui-react-native/design/styling/tokens'; import { chipName, ChipColors, ChipSizes } from './Chip.types'; import type { ChipTokens, ChipSlotProps, ChipProps, ChipConfigurableProps } from './Chip.types'; diff --git a/packages/components/Chip/src/Chip.types.ts b/packages/components/Chip/src/Chip.types.ts index 1d009c5a9eb..b42114a8bc3 100644 --- a/packages/components/Chip/src/Chip.types.ts +++ b/packages/components/Chip/src/Chip.types.ts @@ -4,7 +4,7 @@ import type { IViewProps } from '@fluentui-react-native/adapters'; import type { IconProps, IconSourcesType } from '@fluentui-react-native/icon'; import type { InteractionEvent, PressablePropsExtended, PressableState } from '@fluentui-react-native/interactive-hooks'; import type { TextProps } from '@fluentui-react-native/text'; -import type { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/tokens'; +import type { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/design/styling/tokens'; export const chipName = 'Chip'; export const ChipSizes = ['small', 'medium'] as const; diff --git a/packages/components/Chip/tsconfig.json b/packages/components/Chip/tsconfig.json index b33611a4683..0af4d09bc27 100644 --- a/packages/components/Chip/tsconfig.json +++ b/packages/components/Chip/tsconfig.json @@ -35,9 +35,6 @@ { "path": "../Text/tsconfig.json" }, - { - "path": "../../utils/tokens/tsconfig.json" - }, { "path": "../../framework/use-styling/tsconfig.json" } diff --git a/packages/components/ContextualMenu/package.json b/packages/components/ContextualMenu/package.json index 5dc0bdcfa2e..218f884aff4 100644 --- a/packages/components/ContextualMenu/package.json +++ b/packages/components/ContextualMenu/package.json @@ -33,12 +33,12 @@ "dependencies": { "@fluentui-react-native/adapters": "workspace:*", "@fluentui-react-native/callout": "workspace:*", + "@fluentui-react-native/design": "workspace:*", "@fluentui-react-native/focus-zone": "workspace:*", "@fluentui-react-native/framework-base": "workspace:*", "@fluentui-react-native/icon": "workspace:*", "@fluentui-react-native/interactive-hooks": "workspace:*", "@fluentui-react-native/text": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*", "@uifabricshared/foundation-composable": "workspace:*", "@uifabricshared/foundation-compose": "workspace:*", "@uifabricshared/foundation-settings": "workspace:*" diff --git a/packages/components/ContextualMenu/src/ContextualMenu.tsx b/packages/components/ContextualMenu/src/ContextualMenu.tsx index bf5c3373d51..1968e021260 100644 --- a/packages/components/ContextualMenu/src/ContextualMenu.tsx +++ b/packages/components/ContextualMenu/src/ContextualMenu.tsx @@ -6,7 +6,7 @@ import { Callout } from '@fluentui-react-native/callout'; import { FocusZone } from '@fluentui-react-native/focus-zone'; import type { IFocusable } from '@fluentui-react-native/interactive-hooks'; import { useSelectedKey } from '@fluentui-react-native/interactive-hooks'; -import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/tokens'; +import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/design/styling/tokens'; import type { ISlots } from '@uifabricshared/foundation-composable'; import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; import { compose } from '@uifabricshared/foundation-compose'; diff --git a/packages/components/ContextualMenu/src/ContextualMenuItem.tsx b/packages/components/ContextualMenu/src/ContextualMenuItem.tsx index b2d90013721..77ec337b031 100644 --- a/packages/components/ContextualMenu/src/ContextualMenuItem.tsx +++ b/packages/components/ContextualMenu/src/ContextualMenuItem.tsx @@ -5,7 +5,13 @@ import { View } from 'react-native'; import { Icon, createIconProps } from '@fluentui-react-native/icon'; import { useAsPressable, useKeyProps, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; import { Text } from '@fluentui-react-native/text'; -import { backgroundColorTokens, borderTokens, textTokens, foregroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; +import { + backgroundColorTokens, + borderTokens, + textTokens, + foregroundColorTokens, + getPaletteFromTheme, +} from '@fluentui-react-native/design/styling/tokens'; import type { ISlots } from '@uifabricshared/foundation-composable'; import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; import { compose } from '@uifabricshared/foundation-compose'; diff --git a/packages/components/ContextualMenu/src/ContextualMenuItem.types.ts b/packages/components/ContextualMenu/src/ContextualMenuItem.types.ts index e62c9f72e1c..733c760f13b 100644 --- a/packages/components/ContextualMenu/src/ContextualMenuItem.types.ts +++ b/packages/components/ContextualMenu/src/ContextualMenuItem.types.ts @@ -4,7 +4,12 @@ import type { IViewProps } from '@fluentui-react-native/adapters'; import type { IconProps } from '@fluentui-react-native/icon'; import type { IFocusable, IPressableState, PressablePropsExtended } from '@fluentui-react-native/interactive-hooks'; import type { ITextProps } from '@fluentui-react-native/text'; -import type { FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens'; +import type { + FontTokens, + IForegroundColorTokens, + IBackgroundColorTokens, + IBorderTokens, +} from '@fluentui-react-native/design/styling/tokens'; import type { IRenderData } from '@uifabricshared/foundation-composable'; export const contextualMenuItemName = 'ContextualMenuItem'; diff --git a/packages/components/ContextualMenu/src/Submenu.tsx b/packages/components/ContextualMenu/src/Submenu.tsx index f48c3fda316..5e456660738 100644 --- a/packages/components/ContextualMenu/src/Submenu.tsx +++ b/packages/components/ContextualMenu/src/Submenu.tsx @@ -6,7 +6,7 @@ import { Callout } from '@fluentui-react-native/callout'; import { FocusZone } from '@fluentui-react-native/focus-zone'; import type { IFocusable } from '@fluentui-react-native/interactive-hooks'; import { useKeyDownProps, useSelectedKey } from '@fluentui-react-native/interactive-hooks'; -import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/tokens'; +import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/design/styling/tokens'; import type { ISlots } from '@uifabricshared/foundation-composable'; import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; import { compose } from '@uifabricshared/foundation-compose'; diff --git a/packages/components/ContextualMenu/src/SubmenuItem.tsx b/packages/components/ContextualMenu/src/SubmenuItem.tsx index fba9b805006..27791d794e3 100644 --- a/packages/components/ContextualMenu/src/SubmenuItem.tsx +++ b/packages/components/ContextualMenu/src/SubmenuItem.tsx @@ -6,7 +6,13 @@ import type { SvgIconProps } from '@fluentui-react-native/icon'; import { Icon, createIconProps } from '@fluentui-react-native/icon'; import { useKeyDownProps, useViewCommandFocus, useAsPressable } from '@fluentui-react-native/interactive-hooks'; import { Text } from '@fluentui-react-native/text'; -import { backgroundColorTokens, borderTokens, textTokens, foregroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; +import { + backgroundColorTokens, + borderTokens, + textTokens, + foregroundColorTokens, + getPaletteFromTheme, +} from '@fluentui-react-native/design/styling/tokens'; import type { ISlots } from '@uifabricshared/foundation-composable'; import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; import { compose } from '@uifabricshared/foundation-compose'; diff --git a/packages/components/ContextualMenu/tsconfig.json b/packages/components/ContextualMenu/tsconfig.json index c6173db3b16..6c64cdfc02d 100644 --- a/packages/components/ContextualMenu/tsconfig.json +++ b/packages/components/ContextualMenu/tsconfig.json @@ -35,9 +35,6 @@ { "path": "../Text/tsconfig.json" }, - { - "path": "../../utils/tokens/tsconfig.json" - }, { "path": "../../deprecated/foundation-composable/tsconfig.json" }, @@ -46,6 +43,9 @@ }, { "path": "../../deprecated/foundation-settings/tsconfig.json" + }, + { + "path": "../../agentic/design/tsconfig.json" } ] } diff --git a/packages/components/Divider/package.json b/packages/components/Divider/package.json index 19c5ee492f1..8855a32ca99 100644 --- a/packages/components/Divider/package.json +++ b/packages/components/Divider/package.json @@ -34,8 +34,7 @@ "@fluentui-react-native/framework": "workspace:*", "@fluentui-react-native/framework-base": "workspace:*", "@fluentui-react-native/icon": "workspace:*", - "@fluentui-react-native/text": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*" + "@fluentui-react-native/text": "workspace:*" }, "devDependencies": { "@babel/core": "catalog:", diff --git a/packages/components/Divider/src/Divider.styling.ts b/packages/components/Divider/src/Divider.styling.ts index 692b751081f..68ea02b315d 100644 --- a/packages/components/Divider/src/Divider.styling.ts +++ b/packages/components/Divider/src/Divider.styling.ts @@ -7,7 +7,7 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { IconPropsV1 as IconProps } from '@fluentui-react-native/icon'; import type { TextProps } from '@fluentui-react-native/text'; import { size200 } from '@fluentui-react-native/design/tokens/global'; -import { fontStyles } from '@fluentui-react-native/tokens'; +import { fontStyles } from '@fluentui-react-native/design/styling/tokens'; import type { DividerTokens, DividerProps, DividerAppearance } from './Divider.types'; diff --git a/packages/components/Divider/src/Divider.types.ts b/packages/components/Divider/src/Divider.types.ts index b367f022d3a..4f592dfbe85 100644 --- a/packages/components/Divider/src/Divider.types.ts +++ b/packages/components/Divider/src/Divider.types.ts @@ -2,7 +2,7 @@ import type { ViewProps, ColorValue, DimensionValue } from 'react-native'; import type { IconPropsV1 as IconProps } from '@fluentui-react-native/icon'; import type { TextProps } from '@fluentui-react-native/text'; -import type { LayoutTokens, FontTokens } from '@fluentui-react-native/tokens'; +import type { LayoutTokens, FontTokens } from '@fluentui-react-native/design/styling/tokens'; export const dividerName = 'Divider'; diff --git a/packages/components/Divider/tsconfig.json b/packages/components/Divider/tsconfig.json index 8d76e556f4c..47eeb87d919 100644 --- a/packages/components/Divider/tsconfig.json +++ b/packages/components/Divider/tsconfig.json @@ -28,9 +28,6 @@ }, { "path": "../Text/tsconfig.json" - }, - { - "path": "../../utils/tokens/tsconfig.json" } ] } diff --git a/packages/components/Input/package.json b/packages/components/Input/package.json index 33d5981348d..c2aaec1b745 100644 --- a/packages/components/Input/package.json +++ b/packages/components/Input/package.json @@ -37,7 +37,6 @@ "@fluentui-react-native/interactive-hooks": "workspace:*", "@fluentui-react-native/styling-utils": "workspace:*", "@fluentui-react-native/text": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*", "@fluentui-react-native/use-styling": "workspace:*" }, "devDependencies": { diff --git a/packages/components/Input/src/Input.styling.ts b/packages/components/Input/src/Input.styling.ts index e9f60d2f8d0..fa7e6c723c0 100644 --- a/packages/components/Input/src/Input.styling.ts +++ b/packages/components/Input/src/Input.styling.ts @@ -1,7 +1,7 @@ import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; import { getTextMarginAdjustment } from '@fluentui-react-native/styling-utils'; -import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/tokens'; +import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/design/styling/tokens'; import { input } from './Input.types'; import type { InputTokens, InputSlotProps, InputProps } from './Input.types'; diff --git a/packages/components/Input/src/Input.types.ts b/packages/components/Input/src/Input.types.ts index 73502504944..56742f4b8b6 100644 --- a/packages/components/Input/src/Input.types.ts +++ b/packages/components/Input/src/Input.types.ts @@ -4,7 +4,7 @@ import type { IconProps, IconSourcesType } from '@fluentui-react-native/icon'; import type { InteractionEvent, PressableFocusProps } from '@fluentui-react-native/interactive-hooks'; import type { FocusState, PressablePropsExtended } from '@fluentui-react-native/interactive-hooks'; import type { TextProps } from '@fluentui-react-native/text'; -import type { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/tokens'; +import type { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/design/styling/tokens'; export const input = 'Input'; diff --git a/packages/components/Input/tsconfig.json b/packages/components/Input/tsconfig.json index 1376d11091f..c936c807e10 100644 --- a/packages/components/Input/tsconfig.json +++ b/packages/components/Input/tsconfig.json @@ -35,9 +35,6 @@ { "path": "../Text/tsconfig.json" }, - { - "path": "../../utils/tokens/tsconfig.json" - }, { "path": "../../framework/use-styling/tsconfig.json" } diff --git a/packages/components/Link/package.json b/packages/components/Link/package.json index b2499b0b3ea..1ccaff18e09 100644 --- a/packages/components/Link/package.json +++ b/packages/components/Link/package.json @@ -31,11 +31,11 @@ }, "dependencies": { "@fluentui-react-native/adapters": "workspace:*", + "@fluentui-react-native/design": "workspace:*", "@fluentui-react-native/framework": "workspace:*", "@fluentui-react-native/framework-base": "workspace:*", "@fluentui-react-native/interactive-hooks": "workspace:*", "@fluentui-react-native/text": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*", "@fluentui-react-native/use-styling": "workspace:*", "@uifabricshared/foundation-composable": "workspace:*", "@uifabricshared/foundation-compose": "workspace:*", diff --git a/packages/components/Link/src/Link.styling.ts b/packages/components/Link/src/Link.styling.ts index 02f4dc162a6..027b6cc59b8 100644 --- a/packages/components/Link/src/Link.styling.ts +++ b/packages/components/Link/src/Link.styling.ts @@ -1,6 +1,6 @@ import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; -import { borderStyles, fontStyles } from '@fluentui-react-native/tokens'; +import { borderStyles, fontStyles } from '@fluentui-react-native/design/styling/tokens'; import { linkName } from './Link.types'; import type { LinkState, LinkTokens, LinkSlotProps, LinkProps } from './Link.types'; diff --git a/packages/components/Link/src/legacy/Link.tsx b/packages/components/Link/src/legacy/Link.tsx index 0ca49364fd4..a6854e80af8 100644 --- a/packages/components/Link/src/legacy/Link.tsx +++ b/packages/components/Link/src/legacy/Link.tsx @@ -5,7 +5,7 @@ import { Linking, View } from 'react-native'; import type { ITextProps } from '@fluentui-react-native/adapters'; import { useAsPressable, useKeyProps, useOnPressWithFocus, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; import { Text } from '@fluentui-react-native/text'; -import { foregroundColorTokens, textTokens, borderTokens } from '@fluentui-react-native/tokens'; +import { foregroundColorTokens, textTokens, borderTokens } from '@fluentui-react-native/design/styling/tokens'; import type { ISlots } from '@uifabricshared/foundation-composable'; import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; import { compose } from '@uifabricshared/foundation-compose'; diff --git a/packages/components/Link/src/legacy/Link.types.ts b/packages/components/Link/src/legacy/Link.types.ts index e63bfb0008c..01417546006 100644 --- a/packages/components/Link/src/legacy/Link.types.ts +++ b/packages/components/Link/src/legacy/Link.types.ts @@ -3,7 +3,7 @@ import type * as React from 'react'; import type { IViewProps } from '@fluentui-react-native/adapters'; import type { IFocusable, IPressableState, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks'; import type { ITextProps } from '@fluentui-react-native/text'; -import type { IForegroundColorTokens, FontTokens, IBorderTokens } from '@fluentui-react-native/tokens'; +import type { IForegroundColorTokens, FontTokens, IBorderTokens } from '@fluentui-react-native/design/styling/tokens'; import type { IRenderData } from '@uifabricshared/foundation-composable'; // eslint-disable-next-line @typescript-eslint/no-empty-object-type diff --git a/packages/components/Link/tsconfig.json b/packages/components/Link/tsconfig.json index aeefb9bbeec..0abd0d33c69 100644 --- a/packages/components/Link/tsconfig.json +++ b/packages/components/Link/tsconfig.json @@ -29,9 +29,6 @@ { "path": "../Text/tsconfig.json" }, - { - "path": "../../utils/tokens/tsconfig.json" - }, { "path": "../../framework/use-styling/tsconfig.json" }, @@ -43,6 +40,9 @@ }, { "path": "../../deprecated/foundation-settings/tsconfig.json" + }, + { + "path": "../../agentic/design/tsconfig.json" } ] } diff --git a/packages/components/Menu/package.json b/packages/components/Menu/package.json index 62bf42afb7b..b3c033641fd 100644 --- a/packages/components/Menu/package.json +++ b/packages/components/Menu/package.json @@ -40,7 +40,6 @@ "@fluentui-react-native/icon": "workspace:*", "@fluentui-react-native/interactive-hooks": "workspace:*", "@fluentui-react-native/text": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*", "@fluentui-react-native/use-styling": "workspace:*" }, "devDependencies": { diff --git a/packages/components/Menu/src/MenuDivider/MenuDivider.types.ts b/packages/components/Menu/src/MenuDivider/MenuDivider.types.ts index a3d0351b96a..e44479a249e 100644 --- a/packages/components/Menu/src/MenuDivider/MenuDivider.types.ts +++ b/packages/components/Menu/src/MenuDivider/MenuDivider.types.ts @@ -2,7 +2,7 @@ import type * as React from 'react'; import type { ViewStyle } from 'react-native'; import type { IViewProps } from '@fluentui-react-native/adapters'; -import type { IBackgroundColorTokens } from '@fluentui-react-native/tokens'; +import type { IBackgroundColorTokens } from '@fluentui-react-native/design/styling/tokens'; export const menuDividerName = 'MenuDivider'; diff --git a/packages/components/Menu/src/MenuGroup/MenuGroup.types.ts b/packages/components/Menu/src/MenuGroup/MenuGroup.types.ts index 33248137e33..86a8dfc4fc3 100644 --- a/packages/components/Menu/src/MenuGroup/MenuGroup.types.ts +++ b/packages/components/Menu/src/MenuGroup/MenuGroup.types.ts @@ -2,7 +2,7 @@ import type { ViewProps } from 'react-native'; import type { IViewProps } from '@fluentui-react-native/adapters'; import type { FocusZoneProps } from '@fluentui-react-native/focus-zone'; -import type { LayoutTokens } from '@fluentui-react-native/tokens'; +import type { LayoutTokens } from '@fluentui-react-native/design/styling/tokens'; export const menuGroupName = 'MenuGroup'; diff --git a/packages/components/Menu/src/MenuGroupHeader/MenuGroupHeader.types.ts b/packages/components/Menu/src/MenuGroupHeader/MenuGroupHeader.types.ts index c5ea58be48a..2888aff1fd9 100644 --- a/packages/components/Menu/src/MenuGroupHeader/MenuGroupHeader.types.ts +++ b/packages/components/Menu/src/MenuGroupHeader/MenuGroupHeader.types.ts @@ -1,5 +1,5 @@ import type { TextProps } from '@fluentui-react-native/text'; -import type { FontTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/tokens'; +import type { FontTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/design/styling/tokens'; export const menuGroupHeaderName = 'MenuGroupHeader'; diff --git a/packages/components/Menu/src/MenuItem/MenuItem.styling.ts b/packages/components/Menu/src/MenuItem/MenuItem.styling.ts index 50a4a303e0d..dc1f25ed56e 100644 --- a/packages/components/Menu/src/MenuItem/MenuItem.styling.ts +++ b/packages/components/Menu/src/MenuItem/MenuItem.styling.ts @@ -2,7 +2,7 @@ import { Platform } from 'react-native'; import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; -import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/tokens'; +import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/design/styling/tokens'; import type { MenuItemProps, MenuItemTokens, MenuItemSlotProps } from './MenuItem.types'; import { menuItemName } from './MenuItem.types'; diff --git a/packages/components/Menu/src/MenuItem/MenuItem.types.ts b/packages/components/Menu/src/MenuItem/MenuItem.types.ts index d808a3ee95f..26afbdcae15 100644 --- a/packages/components/Menu/src/MenuItem/MenuItem.types.ts +++ b/packages/components/Menu/src/MenuItem/MenuItem.types.ts @@ -5,7 +5,7 @@ import type { IViewProps } from '@fluentui-react-native/adapters'; import type { IconPropsV1 as IconProps } from '@fluentui-react-native/icon'; import type { IFocusable, InteractionEvent, PressablePropsExtended, PressableState } from '@fluentui-react-native/interactive-hooks'; import type { TextProps } from '@fluentui-react-native/text'; -import type { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/tokens'; +import type { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/design/styling/tokens'; import type { XmlProps } from 'react-native-svg'; export const menuItemName = 'MenuItem'; diff --git a/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckbox.styling.ts b/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckbox.styling.ts index c4203814e09..ad8c09f9532 100644 --- a/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckbox.styling.ts +++ b/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckbox.styling.ts @@ -2,7 +2,7 @@ import { Platform } from 'react-native'; import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; -import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/tokens'; +import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/design/styling/tokens'; import type { MenuItemCheckboxProps, MenuItemCheckboxTokens, MenuItemCheckboxSlotProps } from './MenuItemCheckbox.types'; import { menuItemCheckboxName } from './MenuItemCheckbox.types'; diff --git a/packages/components/Menu/src/MenuItemRadio/MenuItemRadio.styling.android.ts b/packages/components/Menu/src/MenuItemRadio/MenuItemRadio.styling.android.ts index 3d315f3ff6e..2100a1c7b14 100644 --- a/packages/components/Menu/src/MenuItemRadio/MenuItemRadio.styling.android.ts +++ b/packages/components/Menu/src/MenuItemRadio/MenuItemRadio.styling.android.ts @@ -2,7 +2,7 @@ import { Platform } from 'react-native'; import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; -import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/tokens'; +import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/design/styling/tokens'; import type { MenuItemRadioProps, MenuItemRadioSlotProps } from './MenuItemRadio.types'; import { menuItemRadioName } from './MenuItemRadio.types'; diff --git a/packages/components/Menu/src/MenuItemRadio/MenuItemRadio.styling.ts b/packages/components/Menu/src/MenuItemRadio/MenuItemRadio.styling.ts index 5992068f77f..cf6bea7380f 100644 --- a/packages/components/Menu/src/MenuItemRadio/MenuItemRadio.styling.ts +++ b/packages/components/Menu/src/MenuItemRadio/MenuItemRadio.styling.ts @@ -2,7 +2,7 @@ import { Platform } from 'react-native'; import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; -import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/tokens'; +import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/design/styling/tokens'; import type { MenuItemRadioProps, MenuItemRadioSlotProps, MenuItemRadioTokens } from './MenuItemRadio.types'; import { menuItemRadioName } from './MenuItemRadio.types'; diff --git a/packages/components/Menu/src/MenuList/MenuList.styling.ts b/packages/components/Menu/src/MenuList/MenuList.styling.ts index 471d944512c..09cd883762e 100644 --- a/packages/components/Menu/src/MenuList/MenuList.styling.ts +++ b/packages/components/Menu/src/MenuList/MenuList.styling.ts @@ -2,7 +2,7 @@ import { Platform } from 'react-native'; import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; -import { layoutStyles } from '@fluentui-react-native/tokens'; +import { layoutStyles } from '@fluentui-react-native/design/styling/tokens'; import type { MenuListProps, MenuListTokens, MenuListSlotProps } from './MenuList.types'; import { menuListName } from './MenuList.types'; diff --git a/packages/components/Menu/src/MenuList/MenuList.types.ts b/packages/components/Menu/src/MenuList/MenuList.types.ts index eb42c7a9e86..54d1c2da9f4 100644 --- a/packages/components/Menu/src/MenuList/MenuList.types.ts +++ b/packages/components/Menu/src/MenuList/MenuList.types.ts @@ -4,7 +4,7 @@ import type { ScrollViewProps, View, AnimatableNumericValue } from 'react-native import type { IViewProps } from '@fluentui-react-native/adapters'; import type { FocusZoneProps } from '@fluentui-react-native/focus-zone'; import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; -import type { IBackgroundColorTokens, LayoutTokens } from '@fluentui-react-native/tokens'; +import type { IBackgroundColorTokens, LayoutTokens } from '@fluentui-react-native/design/styling/tokens'; export const menuListName = 'MenuList'; diff --git a/packages/components/Menu/tsconfig.json b/packages/components/Menu/tsconfig.json index 32a4a06d6c4..72d42549d53 100644 --- a/packages/components/Menu/tsconfig.json +++ b/packages/components/Menu/tsconfig.json @@ -44,9 +44,6 @@ { "path": "../Text/tsconfig.json" }, - { - "path": "../../utils/tokens/tsconfig.json" - }, { "path": "../../framework/use-styling/tsconfig.json" } diff --git a/packages/components/MenuButton/package.json b/packages/components/MenuButton/package.json index 99b4a1171b0..5fccef1cdfd 100644 --- a/packages/components/MenuButton/package.json +++ b/packages/components/MenuButton/package.json @@ -33,9 +33,9 @@ "dependencies": { "@fluentui-react-native/button": "workspace:*", "@fluentui-react-native/contextual-menu": "workspace:*", + "@fluentui-react-native/design": "workspace:*", "@fluentui-react-native/framework-base": "workspace:*", "@fluentui-react-native/icon": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*", "@uifabricshared/foundation-composable": "workspace:*", "@uifabricshared/foundation-compose": "workspace:*", "@uifabricshared/foundation-settings": "workspace:*" diff --git a/packages/components/MenuButton/src/MenuButton.macos.tsx b/packages/components/MenuButton/src/MenuButton.macos.tsx index c1ccab8be66..b56ed323d0b 100644 --- a/packages/components/MenuButton/src/MenuButton.macos.tsx +++ b/packages/components/MenuButton/src/MenuButton.macos.tsx @@ -10,7 +10,7 @@ import type { ImageResolvedAssetSource } from 'react-native'; import type { IconProps } from '@fluentui-react-native/icon'; import { createIconProps } from '@fluentui-react-native/icon'; -import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/tokens'; +import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/design/styling/tokens'; import type { ISlots } from '@uifabricshared/foundation-composable'; import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; import { compose } from '@uifabricshared/foundation-compose'; diff --git a/packages/components/MenuButton/src/MenuButton.tsx b/packages/components/MenuButton/src/MenuButton.tsx index ea26c457b37..9558b11e0df 100644 --- a/packages/components/MenuButton/src/MenuButton.tsx +++ b/packages/components/MenuButton/src/MenuButton.tsx @@ -3,7 +3,7 @@ import React, { useRef, useState, useCallback } from 'react'; import { ButtonV1 as Button } from '@fluentui-react-native/button'; import { ContextualMenu, ContextualMenuItem, SubmenuItem, Submenu } from '@fluentui-react-native/contextual-menu'; -import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/tokens'; +import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/design/styling/tokens'; import type { ISlots } from '@uifabricshared/foundation-composable'; import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; import { compose } from '@uifabricshared/foundation-compose'; diff --git a/packages/components/MenuButton/src/MenuButton.types.ts b/packages/components/MenuButton/src/MenuButton.types.ts index b3c60bd01da..3fdf6cce648 100644 --- a/packages/components/MenuButton/src/MenuButton.types.ts +++ b/packages/components/MenuButton/src/MenuButton.types.ts @@ -1,7 +1,12 @@ import type { ButtonProps } from '@fluentui-react-native/button'; import type { ContextualMenuItemProps, ContextualMenuProps, SubmenuProps } from '@fluentui-react-native/contextual-menu'; import type { IconSourcesType } from '@fluentui-react-native/icon'; -import type { FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens'; +import type { + FontTokens, + IForegroundColorTokens, + IBackgroundColorTokens, + IBorderTokens, +} from '@fluentui-react-native/design/styling/tokens'; import type { IRenderData } from '@uifabricshared/foundation-composable'; import type { XmlProps } from 'react-native-svg'; diff --git a/packages/components/MenuButton/tsconfig.json b/packages/components/MenuButton/tsconfig.json index 7726b449a0f..f4bfdc3c309 100644 --- a/packages/components/MenuButton/tsconfig.json +++ b/packages/components/MenuButton/tsconfig.json @@ -23,9 +23,6 @@ { "path": "../../../scripts/tsconfig.json" }, - { - "path": "../../utils/tokens/tsconfig.json" - }, { "path": "../../deprecated/foundation-composable/tsconfig.json" }, @@ -34,6 +31,9 @@ }, { "path": "../../deprecated/foundation-settings/tsconfig.json" + }, + { + "path": "../../agentic/design/tsconfig.json" } ] } diff --git a/packages/components/Notification/package.json b/packages/components/Notification/package.json index babb8ce40fb..7535825d41d 100644 --- a/packages/components/Notification/package.json +++ b/packages/components/Notification/package.json @@ -41,7 +41,6 @@ "@fluentui-react-native/interactive-hooks": "workspace:*", "@fluentui-react-native/pressable": "workspace:*", "@fluentui-react-native/text": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*", "@fluentui-react-native/use-styling": "workspace:*" }, "devDependencies": { diff --git a/packages/components/Notification/src/Notification.styling.ts b/packages/components/Notification/src/Notification.styling.ts index f6c0aab50aa..4664c1d3bd8 100644 --- a/packages/components/Notification/src/Notification.styling.ts +++ b/packages/components/Notification/src/Notification.styling.ts @@ -1,6 +1,6 @@ import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; -import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/tokens'; +import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/design/styling/tokens'; import { notification } from './Notification.types'; import type { NotificationTokens, NotificationSlotProps, NotificationProps } from './Notification.types'; diff --git a/packages/components/Notification/src/Notification.types.ts b/packages/components/Notification/src/Notification.types.ts index 268a961f8ef..298f0a619d4 100644 --- a/packages/components/Notification/src/Notification.types.ts +++ b/packages/components/Notification/src/Notification.types.ts @@ -6,7 +6,7 @@ import type { ShadowProps } from '@fluentui-react-native/experimental-shadow'; import type { IconProps, IconSourcesType } from '@fluentui-react-native/icon'; import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; import type { ShadowToken } from '@fluentui-react-native/design/theming'; -import type { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/tokens'; +import type { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/design/styling/tokens'; import type { NotificationButtonColorStates } from './Notification.helper'; diff --git a/packages/components/Notification/tsconfig.json b/packages/components/Notification/tsconfig.json index 09cf60a96e9..a837e08264e 100644 --- a/packages/components/Notification/tsconfig.json +++ b/packages/components/Notification/tsconfig.json @@ -47,9 +47,6 @@ { "path": "../Text/tsconfig.json" }, - { - "path": "../../utils/tokens/tsconfig.json" - }, { "path": "../../framework/use-styling/tsconfig.json" } diff --git a/packages/components/Persona/package.json b/packages/components/Persona/package.json index 5c0e08bf8e9..fb55a59f72d 100644 --- a/packages/components/Persona/package.json +++ b/packages/components/Persona/package.json @@ -31,10 +31,10 @@ }, "dependencies": { "@fluentui-react-native/adapters": "workspace:*", + "@fluentui-react-native/design": "workspace:*", "@fluentui-react-native/framework": "workspace:*", "@fluentui-react-native/framework-base": "workspace:*", "@fluentui-react-native/persona-coin": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*", "@uifabricshared/foundation-composable": "workspace:*", "@uifabricshared/foundation-compose": "workspace:*", "@uifabricshared/foundation-settings": "workspace:*", diff --git a/packages/components/Persona/src/Persona.helpers.ts b/packages/components/Persona/src/Persona.helpers.ts index 594ad3bcd6d..fc349b8af7d 100644 --- a/packages/components/Persona/src/Persona.helpers.ts +++ b/packages/components/Persona/src/Persona.helpers.ts @@ -1,5 +1,5 @@ import type { PersonaSize } from '@fluentui-react-native/persona-coin'; -import type { FontTokens } from '@fluentui-react-native/tokens'; +import type { FontTokens } from '@fluentui-react-native/design/styling/tokens'; type IPersonaFontTable = { [key in PersonaSize]: FontTokens }; diff --git a/packages/components/Persona/src/Persona.tokens.texts.ts b/packages/components/Persona/src/Persona.tokens.texts.ts index ca06c4bd29c..3dd53e7e922 100644 --- a/packages/components/Persona/src/Persona.tokens.texts.ts +++ b/packages/components/Persona/src/Persona.tokens.texts.ts @@ -3,7 +3,7 @@ import type { TextStyle } from 'react-native'; import type { ITextProps } from '@fluentui-react-native/adapters'; import type { Theme } from '@fluentui-react-native/framework'; import type { PersonaSize } from '@fluentui-react-native/persona-coin'; -import type { FontTokens } from '@fluentui-react-native/tokens'; +import type { FontTokens } from '@fluentui-react-native/design/styling/tokens'; import { styleFunction } from '@uifabricshared/foundation-tokens'; import { getTextFont, getSecondaryFont, getTertiaryFont, getOptionalFont } from './Persona.helpers'; diff --git a/packages/components/Persona/src/Persona.tsx b/packages/components/Persona/src/Persona.tsx index 9aa649c97f7..948163b23b0 100644 --- a/packages/components/Persona/src/Persona.tsx +++ b/packages/components/Persona/src/Persona.tsx @@ -3,7 +3,7 @@ import { View, Text } from 'react-native'; import { filterViewProps } from '@fluentui-react-native/adapters'; import { PersonaCoin } from '@fluentui-react-native/persona-coin'; -import { foregroundColorTokens } from '@fluentui-react-native/tokens'; +import { foregroundColorTokens } from '@fluentui-react-native/design/styling/tokens'; import type { ISlots, IRenderData } from '@uifabricshared/foundation-composable'; import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; import { compose } from '@uifabricshared/foundation-compose'; diff --git a/packages/components/Persona/src/Persona.types.ts b/packages/components/Persona/src/Persona.types.ts index 055aa0cb183..77acefc805a 100644 --- a/packages/components/Persona/src/Persona.types.ts +++ b/packages/components/Persona/src/Persona.types.ts @@ -2,7 +2,7 @@ import type { ColorValue } from 'react-native'; import type { IViewProps, ITextProps } from '@fluentui-react-native/adapters'; import type { IPersonaCoinProps, IPersonaCoinTokens } from '@fluentui-react-native/persona-coin'; -import type { FontTokens } from '@fluentui-react-native/tokens'; +import type { FontTokens } from '@fluentui-react-native/design/styling/tokens'; import type { IRenderData } from '@uifabricshared/foundation-composable'; export const personaName = 'RNFPersona'; diff --git a/packages/components/Persona/tsconfig.json b/packages/components/Persona/tsconfig.json index 132cc6b683e..d9df625dddb 100644 --- a/packages/components/Persona/tsconfig.json +++ b/packages/components/Persona/tsconfig.json @@ -23,9 +23,6 @@ { "path": "../../../scripts/tsconfig.json" }, - { - "path": "../../utils/tokens/tsconfig.json" - }, { "path": "../../deprecated/foundation-composable/tsconfig.json" }, @@ -37,6 +34,9 @@ }, { "path": "../../deprecated/foundation-tokens/tsconfig.json" + }, + { + "path": "../../agentic/design/tsconfig.json" } ] } diff --git a/packages/components/PersonaCoin/package.json b/packages/components/PersonaCoin/package.json index 7510e9d9859..03a84f017ce 100644 --- a/packages/components/PersonaCoin/package.json +++ b/packages/components/PersonaCoin/package.json @@ -34,7 +34,6 @@ "@fluentui-react-native/design": "workspace:*", "@fluentui-react-native/framework": "workspace:*", "@fluentui-react-native/framework-base": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*", "@uifabricshared/foundation-composable": "workspace:*", "@uifabricshared/foundation-compose": "workspace:*", "@uifabricshared/foundation-settings": "workspace:*", diff --git a/packages/components/PersonaCoin/src/PersonaCoin.tsx b/packages/components/PersonaCoin/src/PersonaCoin.tsx index 875ecfa72f6..11f95238bf9 100644 --- a/packages/components/PersonaCoin/src/PersonaCoin.tsx +++ b/packages/components/PersonaCoin/src/PersonaCoin.tsx @@ -2,7 +2,7 @@ import { Image, View, Text } from 'react-native'; import { filterViewProps, filterImageProps } from '@fluentui-react-native/adapters'; -import { foregroundColorTokens } from '@fluentui-react-native/tokens'; +import { foregroundColorTokens } from '@fluentui-react-native/design/styling/tokens'; import type { ISlots, IRenderData } from '@uifabricshared/foundation-composable'; import { compose } from '@uifabricshared/foundation-compose'; import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; diff --git a/packages/components/PersonaCoin/src/PersonaCoin.types.ts b/packages/components/PersonaCoin/src/PersonaCoin.types.ts index 3a10861a667..49fc748956f 100644 --- a/packages/components/PersonaCoin/src/PersonaCoin.types.ts +++ b/packages/components/PersonaCoin/src/PersonaCoin.types.ts @@ -1,7 +1,7 @@ import type { ImageProps, ViewProps, ImageURISource, TextProps, ColorValue } from 'react-native'; import type { IViewProps } from '@fluentui-react-native/adapters'; -import type { IBackgroundColorTokens, IForegroundColorTokens } from '@fluentui-react-native/tokens'; +import type { IBackgroundColorTokens, IForegroundColorTokens } from '@fluentui-react-native/design/styling/tokens'; import type { IRenderData } from '@uifabricshared/foundation-composable'; export const personaCoinName = 'RNFPersonaCoin'; diff --git a/packages/components/PersonaCoin/tsconfig.json b/packages/components/PersonaCoin/tsconfig.json index 2d460e8bdbb..bc0ef7c578e 100644 --- a/packages/components/PersonaCoin/tsconfig.json +++ b/packages/components/PersonaCoin/tsconfig.json @@ -23,9 +23,6 @@ { "path": "../../../scripts/tsconfig.json" }, - { - "path": "../../utils/tokens/tsconfig.json" - }, { "path": "../../deprecated/foundation-composable/tsconfig.json" }, diff --git a/packages/components/RadioGroup/package.json b/packages/components/RadioGroup/package.json index ff97dbe586b..fcc92e38fb2 100644 --- a/packages/components/RadioGroup/package.json +++ b/packages/components/RadioGroup/package.json @@ -39,7 +39,6 @@ "@fluentui-react-native/interactive-hooks": "workspace:*", "@fluentui-react-native/pressable": "workspace:*", "@fluentui-react-native/text": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*", "@fluentui-react-native/use-styling": "workspace:*", "@uifabricshared/foundation-composable": "workspace:*", "@uifabricshared/foundation-compose": "workspace:*", diff --git a/packages/components/RadioGroup/src/Radio/Radio.styling.ts b/packages/components/RadioGroup/src/Radio/Radio.styling.ts index 8a1d8b283f2..d843d048476 100644 --- a/packages/components/RadioGroup/src/Radio/Radio.styling.ts +++ b/packages/components/RadioGroup/src/Radio/Radio.styling.ts @@ -1,6 +1,6 @@ import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; -import { fontStyles, borderStyles } from '@fluentui-react-native/tokens'; +import { fontStyles, borderStyles } from '@fluentui-react-native/design/styling/tokens'; import type { RadioTokens, RadioSlotProps, RadioProps } from './Radio.types'; import { radioName } from './Radio.types'; diff --git a/packages/components/RadioGroup/src/Radio/Radio.types.ts b/packages/components/RadioGroup/src/Radio/Radio.types.ts index cec3ec8be47..51e176151bb 100644 --- a/packages/components/RadioGroup/src/Radio/Radio.types.ts +++ b/packages/components/RadioGroup/src/Radio/Radio.types.ts @@ -10,7 +10,7 @@ import type { IBackgroundColorTokens, IBorderTokens, IColorTokens, -} from '@fluentui-react-native/tokens'; +} from '@fluentui-react-native/design/styling/tokens'; import type { SvgProps } from 'react-native-svg'; export const radioName = 'Radio'; diff --git a/packages/components/RadioGroup/src/RadioGroup/RadioGroup.styling.ts b/packages/components/RadioGroup/src/RadioGroup/RadioGroup.styling.ts index 72fa1cbcbf6..8da24f73b6a 100644 --- a/packages/components/RadioGroup/src/RadioGroup/RadioGroup.styling.ts +++ b/packages/components/RadioGroup/src/RadioGroup/RadioGroup.styling.ts @@ -1,6 +1,6 @@ import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; -import { fontStyles } from '@fluentui-react-native/tokens'; +import { fontStyles } from '@fluentui-react-native/design/styling/tokens'; import type { RadioGroupTokens, RadioGroupSlotProps, RadioGroupProps } from './RadioGroup.types'; import { radioGroupName } from './RadioGroup.types'; diff --git a/packages/components/RadioGroup/src/RadioGroup/RadioGroup.types.ts b/packages/components/RadioGroup/src/RadioGroup/RadioGroup.types.ts index ab92bf331ea..db4fe461c17 100644 --- a/packages/components/RadioGroup/src/RadioGroup/RadioGroup.types.ts +++ b/packages/components/RadioGroup/src/RadioGroup/RadioGroup.types.ts @@ -3,7 +3,7 @@ import type { ColorValue, ViewStyle } from 'react-native'; import type { IViewProps } from '@fluentui-react-native/adapters'; import type { FocusZoneProps } from '@fluentui-react-native/focus-zone'; import type { TextProps } from '@fluentui-react-native/text'; -import type { IForegroundColorTokens, FontTokens } from '@fluentui-react-native/tokens'; +import type { IForegroundColorTokens, FontTokens } from '@fluentui-react-native/design/styling/tokens'; export const radioGroupName = 'RadioGroup'; diff --git a/packages/components/RadioGroup/src/legacy/RadioButton.tsx b/packages/components/RadioGroup/src/legacy/RadioButton.tsx index e40f283527a..2482395e686 100644 --- a/packages/components/RadioGroup/src/legacy/RadioButton.tsx +++ b/packages/components/RadioGroup/src/legacy/RadioButton.tsx @@ -6,7 +6,13 @@ import { View } from 'react-native'; import { filterViewProps } from '@fluentui-react-native/adapters'; import { useAsPressable, useOnPressWithFocus, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; import { Text } from '@fluentui-react-native/text'; -import { foregroundColorTokens, textTokens, borderTokens, backgroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; +import { + foregroundColorTokens, + textTokens, + borderTokens, + backgroundColorTokens, + getPaletteFromTheme, +} from '@fluentui-react-native/design/styling/tokens'; import type { ISlots } from '@uifabricshared/foundation-composable'; import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; import { compose } from '@uifabricshared/foundation-compose'; diff --git a/packages/components/RadioGroup/src/legacy/RadioButton.types.ts b/packages/components/RadioGroup/src/legacy/RadioButton.types.ts index 21293286992..1dab09134b0 100644 --- a/packages/components/RadioGroup/src/legacy/RadioButton.types.ts +++ b/packages/components/RadioGroup/src/legacy/RadioButton.types.ts @@ -4,7 +4,12 @@ import type { ViewProps } from 'react-native'; import type { IFocusable } from '@fluentui-react-native/interactive-hooks'; import type { IPressableProps } from '@fluentui-react-native/pressable'; import type { ITextProps } from '@fluentui-react-native/text'; -import type { FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens'; +import type { + FontTokens, + IForegroundColorTokens, + IBackgroundColorTokens, + IBorderTokens, +} from '@fluentui-react-native/design/styling/tokens'; import type { IRenderData } from '@uifabricshared/foundation-composable'; import type { IViewProps } from '@fluentui-react-native/adapters'; diff --git a/packages/components/RadioGroup/src/legacy/RadioButton.win32.tsx b/packages/components/RadioGroup/src/legacy/RadioButton.win32.tsx index f1499939e0e..e4dd350396c 100644 --- a/packages/components/RadioGroup/src/legacy/RadioButton.win32.tsx +++ b/packages/components/RadioGroup/src/legacy/RadioButton.win32.tsx @@ -7,7 +7,13 @@ import { filterViewProps } from '@fluentui-react-native/adapters'; import type { KeyPressEvent } from '@fluentui-react-native/interactive-hooks'; import { useAsPressable, useViewCommandFocus, useKeyDownProps } from '@fluentui-react-native/interactive-hooks'; import { Text } from '@fluentui-react-native/text'; -import { foregroundColorTokens, textTokens, borderTokens, backgroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; +import { + foregroundColorTokens, + textTokens, + borderTokens, + backgroundColorTokens, + getPaletteFromTheme, +} from '@fluentui-react-native/design/styling/tokens'; import type { ISlots } from '@uifabricshared/foundation-composable'; import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; import { compose } from '@uifabricshared/foundation-compose'; diff --git a/packages/components/RadioGroup/src/legacy/RadioGroup.tsx b/packages/components/RadioGroup/src/legacy/RadioGroup.tsx index 5e234d19cdc..c1de47eab1a 100644 --- a/packages/components/RadioGroup/src/legacy/RadioGroup.tsx +++ b/packages/components/RadioGroup/src/legacy/RadioGroup.tsx @@ -5,7 +5,7 @@ import { View } from 'react-native'; import { FocusZone } from '@fluentui-react-native/focus-zone'; import { useSelectedKey } from '@fluentui-react-native/interactive-hooks'; import { Text } from '@fluentui-react-native/text'; -import { foregroundColorTokens, textTokens } from '@fluentui-react-native/tokens'; +import { foregroundColorTokens, textTokens } from '@fluentui-react-native/design/styling/tokens'; import type { ISlots } from '@uifabricshared/foundation-composable'; import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; import { compose } from '@uifabricshared/foundation-compose'; diff --git a/packages/components/RadioGroup/src/legacy/RadioGroup.types.ts b/packages/components/RadioGroup/src/legacy/RadioGroup.types.ts index 6d781fee404..1b0131cd897 100644 --- a/packages/components/RadioGroup/src/legacy/RadioGroup.types.ts +++ b/packages/components/RadioGroup/src/legacy/RadioGroup.types.ts @@ -3,7 +3,7 @@ import type { ViewProps } from 'react-native'; import type { FocusZoneProps } from '@fluentui-react-native/focus-zone'; import type { ITextProps } from '@fluentui-react-native/text'; -import type { IForegroundColorTokens, FontTokens } from '@fluentui-react-native/tokens'; +import type { IForegroundColorTokens, FontTokens } from '@fluentui-react-native/design/styling/tokens'; import type { IRenderData } from '@uifabricshared/foundation-composable'; export const radioGroupName = 'RadioGroup'; diff --git a/packages/components/RadioGroup/tsconfig.json b/packages/components/RadioGroup/tsconfig.json index 87381be67ef..82457146a4d 100644 --- a/packages/components/RadioGroup/tsconfig.json +++ b/packages/components/RadioGroup/tsconfig.json @@ -38,9 +38,6 @@ { "path": "../Text/tsconfig.json" }, - { - "path": "../../utils/tokens/tsconfig.json" - }, { "path": "../../framework/use-styling/tsconfig.json" }, diff --git a/packages/components/Stack/package.json b/packages/components/Stack/package.json index 7fc0e2f6b1f..4f88701347f 100644 --- a/packages/components/Stack/package.json +++ b/packages/components/Stack/package.json @@ -31,9 +31,9 @@ }, "dependencies": { "@fluentui-react-native/adapters": "workspace:*", + "@fluentui-react-native/design": "workspace:*", "@fluentui-react-native/framework": "workspace:*", "@fluentui-react-native/framework-base": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*", "@uifabricshared/foundation-composable": "workspace:*", "@uifabricshared/foundation-compose": "workspace:*", "@uifabricshared/foundation-settings": "workspace:*", diff --git a/packages/components/Stack/src/Stack.tsx b/packages/components/Stack/src/Stack.tsx index 83bcae642fb..e5b1341cb34 100644 --- a/packages/components/Stack/src/Stack.tsx +++ b/packages/components/Stack/src/Stack.tsx @@ -4,7 +4,7 @@ import { View } from 'react-native'; import type { StyleProp, ViewStyle } from 'react-native'; import { filterViewProps } from '@fluentui-react-native/adapters'; -import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/tokens'; +import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/design/styling/tokens'; import type { ISlots } from '@uifabricshared/foundation-composable'; import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; import { compose } from '@uifabricshared/foundation-compose'; diff --git a/packages/components/Stack/src/Stack.types.ts b/packages/components/Stack/src/Stack.types.ts index fefdbf0f6b0..fbf7029144e 100644 --- a/packages/components/Stack/src/Stack.types.ts +++ b/packages/components/Stack/src/Stack.types.ts @@ -1,7 +1,7 @@ import type { ViewStyle, ViewProps, DimensionValue } from 'react-native'; import type { Spacing } from '@fluentui-react-native/framework'; -import type { IBackgroundColorTokens, IBorderTokens, FontTokens } from '@fluentui-react-native/tokens'; +import type { IBackgroundColorTokens, IBorderTokens, FontTokens } from '@fluentui-react-native/design/styling/tokens'; import type { IRenderData } from '@uifabricshared/foundation-composable'; import type { IStackItemProps } from './StackItem/StackItem.types'; diff --git a/packages/components/Stack/tsconfig.json b/packages/components/Stack/tsconfig.json index 25fc2ef620a..3650505b407 100644 --- a/packages/components/Stack/tsconfig.json +++ b/packages/components/Stack/tsconfig.json @@ -23,9 +23,6 @@ { "path": "../Text/tsconfig.json" }, - { - "path": "../../utils/tokens/tsconfig.json" - }, { "path": "../../deprecated/foundation-composable/tsconfig.json" }, @@ -37,6 +34,9 @@ }, { "path": "../../deprecated/foundation-tokens/tsconfig.json" + }, + { + "path": "../../agentic/design/tsconfig.json" } ] } diff --git a/packages/components/Switch/package.json b/packages/components/Switch/package.json index ec5e75bc258..0134427fb57 100644 --- a/packages/components/Switch/package.json +++ b/packages/components/Switch/package.json @@ -35,7 +35,6 @@ "@fluentui-react-native/framework-base": "workspace:*", "@fluentui-react-native/interactive-hooks": "workspace:*", "@fluentui-react-native/text": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*", "@fluentui-react-native/use-styling": "workspace:*" }, "devDependencies": { diff --git a/packages/components/Switch/src/Switch.styling.ts b/packages/components/Switch/src/Switch.styling.ts index 364bd4d7972..da2295f4101 100644 --- a/packages/components/Switch/src/Switch.styling.ts +++ b/packages/components/Switch/src/Switch.styling.ts @@ -2,7 +2,7 @@ import { Platform } from 'react-native'; import type { UseStylingOptions, Theme } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; -import { borderStyles, layoutStyles, fontStyles } from '@fluentui-react-native/tokens'; +import { borderStyles, layoutStyles, fontStyles } from '@fluentui-react-native/design/styling/tokens'; import { switchName } from './Switch.types'; import type { SwitchTokens, SwitchSlotProps, SwitchProps } from './Switch.types'; diff --git a/packages/components/Switch/src/Switch.types.ts b/packages/components/Switch/src/Switch.types.ts index 0c7e5cfedee..b1b7de1009c 100644 --- a/packages/components/Switch/src/Switch.types.ts +++ b/packages/components/Switch/src/Switch.types.ts @@ -3,7 +3,7 @@ import type { Animated, ViewStyle, ColorValue, PressableProps, ViewProps, Animat import type { IFocusable, InteractionEvent, PressablePropsExtended, PressableState } from '@fluentui-react-native/interactive-hooks'; import type { TextProps } from '@fluentui-react-native/text'; -import type { FontTokens, IBorderTokens, IColorTokens, IShadowTokens, LayoutTokens } from '@fluentui-react-native/tokens'; +import type { FontTokens, IBorderTokens, IColorTokens, IShadowTokens, LayoutTokens } from '@fluentui-react-native/design/styling/tokens'; import type { PropsOf } from '@fluentui-react-native/framework-base'; export const switchName = 'Switch'; diff --git a/packages/components/Switch/tsconfig.json b/packages/components/Switch/tsconfig.json index 9588c41aa16..01cc4442149 100644 --- a/packages/components/Switch/tsconfig.json +++ b/packages/components/Switch/tsconfig.json @@ -29,9 +29,6 @@ { "path": "../Text/tsconfig.json" }, - { - "path": "../../utils/tokens/tsconfig.json" - }, { "path": "../../framework/use-styling/tsconfig.json" } diff --git a/packages/components/TabList/package.json b/packages/components/TabList/package.json index 70f3824e69f..70ed471da83 100644 --- a/packages/components/TabList/package.json +++ b/packages/components/TabList/package.json @@ -38,7 +38,6 @@ "@fluentui-react-native/icon": "workspace:*", "@fluentui-react-native/interactive-hooks": "workspace:*", "@fluentui-react-native/text": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*", "@fluentui-react-native/use-styling": "workspace:*" }, "devDependencies": { diff --git a/packages/components/TabList/src/Tab/Tab.types.ts b/packages/components/TabList/src/Tab/Tab.types.ts index b4a7ed453d5..2dfcec31c12 100644 --- a/packages/components/TabList/src/Tab/Tab.types.ts +++ b/packages/components/TabList/src/Tab/Tab.types.ts @@ -11,7 +11,7 @@ import type { IBorderTokens, IForegroundColorTokens, LayoutTokens, -} from '@fluentui-react-native/tokens'; +} from '@fluentui-react-native/design/styling/tokens'; export const tabName = 'Tab'; diff --git a/packages/components/TabList/src/TabList/TabList.types.ts b/packages/components/TabList/src/TabList/TabList.types.ts index ff4d31d992d..5622501e2a0 100644 --- a/packages/components/TabList/src/TabList/TabList.types.ts +++ b/packages/components/TabList/src/TabList/TabList.types.ts @@ -3,7 +3,7 @@ import type { LayoutRectangle, View } from 'react-native'; import type { IViewProps } from '@fluentui-react-native/adapters'; import type { FocusZoneProps } from '@fluentui-react-native/focus-zone'; -import type { LayoutTokens } from '@fluentui-react-native/tokens'; +import type { LayoutTokens } from '@fluentui-react-native/design/styling/tokens'; import type { AnimatedIndicatorStyles } from '../TabListAnimatedIndicator/TabListAnimatedIndicator.types'; diff --git a/packages/components/TabList/tsconfig.json b/packages/components/TabList/tsconfig.json index b0ee201123c..1644446a075 100644 --- a/packages/components/TabList/tsconfig.json +++ b/packages/components/TabList/tsconfig.json @@ -38,9 +38,6 @@ { "path": "../Text/tsconfig.json" }, - { - "path": "../../utils/tokens/tsconfig.json" - }, { "path": "../../framework/use-styling/tsconfig.json" } diff --git a/packages/components/Text/package.json b/packages/components/Text/package.json index 6c023be2ddc..bc31fb6f81d 100644 --- a/packages/components/Text/package.json +++ b/packages/components/Text/package.json @@ -35,7 +35,6 @@ "@fluentui-react-native/framework": "workspace:*", "@fluentui-react-native/framework-base": "workspace:*", "@fluentui-react-native/interactive-hooks": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*", "@uifabricshared/foundation-compose": "workspace:*" }, "devDependencies": { diff --git a/packages/components/Text/src/deprecated/Text.tsx b/packages/components/Text/src/deprecated/Text.tsx index b7978b605f2..54a36beb75c 100644 --- a/packages/components/Text/src/deprecated/Text.tsx +++ b/packages/components/Text/src/deprecated/Text.tsx @@ -1,7 +1,7 @@ import { Text as RNText } from 'react-native'; import { filterTextProps } from '@fluentui-react-native/adapters'; -import { foregroundColorTokens, textTokens } from '@fluentui-react-native/tokens'; +import { foregroundColorTokens, textTokens } from '@fluentui-react-native/design/styling/tokens'; import { compose } from '@uifabricshared/foundation-compose'; import { settings } from './Text.settings'; diff --git a/packages/components/Text/src/deprecated/Text.types.ts b/packages/components/Text/src/deprecated/Text.types.ts index b73c7185b6c..d64e6ca362a 100644 --- a/packages/components/Text/src/deprecated/Text.types.ts +++ b/packages/components/Text/src/deprecated/Text.types.ts @@ -1,5 +1,5 @@ import type { ITextProps as INativeTextProps } from '@fluentui-react-native/adapters'; -import type { FontTokens, FontVariantTokens, IForegroundColorTokens, IColorTokens } from '@fluentui-react-native/tokens'; +import type { FontTokens, FontVariantTokens, IForegroundColorTokens, IColorTokens } from '@fluentui-react-native/design/styling/tokens'; export const textName = 'RNFText'; diff --git a/packages/components/Text/tsconfig.json b/packages/components/Text/tsconfig.json index 162cb3927be..8186dc9df19 100644 --- a/packages/components/Text/tsconfig.json +++ b/packages/components/Text/tsconfig.json @@ -29,9 +29,6 @@ { "path": "../../utils/test-tools/tsconfig.json" }, - { - "path": "../../utils/tokens/tsconfig.json" - }, { "path": "../../deprecated/foundation-compose/tsconfig.json" } diff --git a/packages/dependency-profiles/src/index.js b/packages/dependency-profiles/src/index.js index 6853dd08dcd..cc67f0f5ece 100644 --- a/packages/dependency-profiles/src/index.js +++ b/packages/dependency-profiles/src/index.js @@ -222,14 +222,6 @@ module.exports = { "name": "@fluentui-react-native/framework", "version": "0.17.2" }, - "@fluentui-react-native/theme": { - "name": "@fluentui-react-native/theme", - "version": "0.14.2" - }, - "@fluentui-react-native/themed-stylesheet": { - "name": "@fluentui-react-native/themed-stylesheet", - "version": "1.10.2" - }, "@fluentui-react-native/use-slots": { "name": "@fluentui-react-native/use-slots", "version": "0.13.2" @@ -250,18 +242,6 @@ module.exports = { "name": "@fluentui-react-native/callout", "version": "0.29.2" }, - "@fluentui-react-native/android-theme": { - "name": "@fluentui-react-native/android-theme", - "version": "0.26.8" - }, - "@fluentui-react-native/apple-theme": { - "name": "@fluentui-react-native/apple-theme", - "version": "0.29.8" - }, - "@fluentui-react-native/default-theme": { - "name": "@fluentui-react-native/default-theme", - "version": "0.27.8" - }, "@fluentui-react-native/theme-tokens": { "name": "@fluentui-react-native/theme-tokens", "version": "0.29.2" @@ -270,10 +250,34 @@ module.exports = { "name": "@fluentui-react-native/theme-types", "version": "0.44.8" }, + "@fluentui-react-native/theme": { + "name": "@fluentui-react-native/theme", + "version": "0.14.2" + }, + "@fluentui-react-native/themed-stylesheet": { + "name": "@fluentui-react-native/themed-stylesheet", + "version": "1.10.2" + }, "@fluentui-react-native/theming-utils": { "name": "@fluentui-react-native/theming-utils", "version": "0.27.8" }, + "@fluentui-react-native/tokens": { + "name": "@fluentui-react-native/tokens", + "version": "0.24.8" + }, + "@fluentui-react-native/android-theme": { + "name": "@fluentui-react-native/android-theme", + "version": "0.26.8" + }, + "@fluentui-react-native/apple-theme": { + "name": "@fluentui-react-native/apple-theme", + "version": "0.29.8" + }, + "@fluentui-react-native/default-theme": { + "name": "@fluentui-react-native/default-theme", + "version": "0.27.8" + }, "@fluentui-react-native/win32-theme": { "name": "@fluentui-react-native/win32-theme", "version": "0.39.8" @@ -289,10 +293,6 @@ module.exports = { "@fluentui-react-native/styling-utils": { "name": "@fluentui-react-native/styling-utils", "version": "0.8.7" - }, - "@fluentui-react-native/tokens": { - "name": "@fluentui-react-native/tokens", - "version": "0.24.8" } }, "0.74": { diff --git a/packages/deprecated/foundation-tokens/package.json b/packages/deprecated/foundation-tokens/package.json index 73ec8bd34f0..a8e39c1146b 100644 --- a/packages/deprecated/foundation-tokens/package.json +++ b/packages/deprecated/foundation-tokens/package.json @@ -33,8 +33,8 @@ "update-snapshots": "fluentui-scripts jest -u" }, "dependencies": { + "@fluentui-react-native/design": "workspace:*", "@fluentui-react-native/framework-base": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*", "@types/node": "catalog:", "@uifabricshared/foundation-settings": "workspace:*" }, diff --git a/packages/deprecated/foundation-tokens/src/Token.types.ts b/packages/deprecated/foundation-tokens/src/Token.types.ts index a6b8c306520..a4ae7547fa6 100644 --- a/packages/deprecated/foundation-tokens/src/Token.types.ts +++ b/packages/deprecated/foundation-tokens/src/Token.types.ts @@ -4,7 +4,7 @@ import type { StyleFactoryFunction, StyleFactoryFunctionRaw, StyleFactoryOperation, -} from '@fluentui-react-native/tokens'; +} from '@fluentui-react-native/design/styling/tokens'; import type { ICachedPropHandlers } from './Token.internal'; diff --git a/packages/deprecated/foundation-tokens/src/index.ts b/packages/deprecated/foundation-tokens/src/index.ts index e2afe99a3cb..f872070aee4 100644 --- a/packages/deprecated/foundation-tokens/src/index.ts +++ b/packages/deprecated/foundation-tokens/src/index.ts @@ -12,4 +12,4 @@ export type { } from './Token.types'; export { processTokens } from './Token'; export { buildComponentTokens } from './Token.function'; -export { styleFunction } from '@fluentui-react-native/tokens'; +export { styleFunction } from '@fluentui-react-native/design/styling/tokens'; diff --git a/packages/deprecated/foundation-tokens/tsconfig.json b/packages/deprecated/foundation-tokens/tsconfig.json index 8311dc51972..b0af7979ba8 100644 --- a/packages/deprecated/foundation-tokens/tsconfig.json +++ b/packages/deprecated/foundation-tokens/tsconfig.json @@ -16,10 +16,10 @@ "path": "../../../scripts/tsconfig.json" }, { - "path": "../../utils/tokens/tsconfig.json" + "path": "../foundation-settings/tsconfig.json" }, { - "path": "../foundation-settings/tsconfig.json" + "path": "../../agentic/design/tsconfig.json" } ] } diff --git a/packages/deprecated/theme-registry/src/Registry.ts b/packages/deprecated/theme-registry/src/Registry.ts index 2b902af132d..454a32fe79f 100644 --- a/packages/deprecated/theme-registry/src/Registry.ts +++ b/packages/deprecated/theme-registry/src/Registry.ts @@ -178,7 +178,7 @@ interface IEntries { } /** - * @deprecated Use ThemeReference from @fluentui-react-native/theme instead. + * @deprecated Use ThemeReference from @fluentui-react-native/design/theming instead. * See https://github.com/microsoft/fluentui-react-native/blob/main/docs/pages/Guides/UpdateThemeProvider.md for details */ export function createThemeRegistry( diff --git a/packages/deprecated/theming-ramp/package.json b/packages/deprecated/theming-ramp/package.json index 8032fdb4dec..709de08153c 100644 --- a/packages/deprecated/theming-ramp/package.json +++ b/packages/deprecated/theming-ramp/package.json @@ -47,6 +47,7 @@ "react-native": "^0.81.6" }, "peerDependencies": { + "@office-iss/react-native-win32": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0", "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.4", "react": "18.2.0 || 19.0.0 || 19.1.4", "react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0", @@ -54,6 +55,9 @@ "react-native-windows": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0" }, "peerDependenciesMeta": { + "@office-iss/react-native-win32": { + "optional": true + }, "@types/react": { "optional": true }, diff --git a/packages/deprecated/theming-react-native/README.md b/packages/deprecated/theming-react-native/README.md index cabaa1002af..d4b629c5da9 100644 --- a/packages/deprecated/theming-react-native/README.md +++ b/packages/deprecated/theming-react-native/README.md @@ -9,7 +9,7 @@ This package serves as an entry point which aggregates and re-exports some of th You may want a few different packages from this repo. Let's start with the following: - `@uifabricshared/theming-react-native` -- `@fluentui-react-native/themed-stylesheets` for styling react-native's primitives components. +- `@fluentui-react-native/design/styling/stylesheet` for styling React Native primitive components. E.g. In your package.json file: @@ -21,7 +21,7 @@ E.g. In your package.json file: "main": "lib/index.js", "dependencies": { "@uifabricshared/theming-react-native": "^0.2.0", - "@fluentui-react-native/themed-stylesheet": "^0.2.0" + "@fluentui-react-native/design": "^0.3.1" } } ``` @@ -112,7 +112,7 @@ You can read more about the [ThemeRegistry here](../theme-registry/README.md). ### Create a Themed Stylesheet -The `themed-stylesheet` package allows you to author View/Text/Image Style objects similar to `StyleSheet.create(...);`. You can learn more at the [themed-stylesheet's README](../../framework/themed-stylesheet/README.md) +The `themed-stylesheet` package allows you to author View/Text/Image Style objects similar to `StyleSheet.create(...);`. You can learn more at the [themed-stylesheet's README](../../shim/themed-stylesheet/README.md) ```tsx // styles.ts diff --git a/packages/deprecated/theming-react-native/src/ThemeProvider.tsx b/packages/deprecated/theming-react-native/src/ThemeProvider.tsx index 78fd237f48d..a224498b339 100644 --- a/packages/deprecated/theming-react-native/src/ThemeProvider.tsx +++ b/packages/deprecated/theming-react-native/src/ThemeProvider.tsx @@ -8,7 +8,7 @@ import { useThemeRegistry, ThemeRegistryContext } from './ThemeContext'; import type { IThemeProviderProps } from './ThemeProvider.types'; /** - * @deprecated Use ThemeProvider from @fluentui-react-native/theme instead. + * @deprecated Use ThemeProvider from @fluentui-react-native/design/theming instead. * See https://github.com/microsoft/fluentui-react-native/blob/main/docs/pages/Guides/UpdateThemeProvider.md for details */ export const ThemeProvider: React.FunctionComponent = (props: IThemeProviderProps) => { diff --git a/packages/experimental/MenuButton/package.json b/packages/experimental/MenuButton/package.json index 311220eb01e..d0175c67a2d 100644 --- a/packages/experimental/MenuButton/package.json +++ b/packages/experimental/MenuButton/package.json @@ -32,9 +32,9 @@ "dependencies": { "@fluentui-react-native/button": "workspace:*", "@fluentui-react-native/contextual-menu": "workspace:*", + "@fluentui-react-native/design": "workspace:*", "@fluentui-react-native/framework": "workspace:*", - "@fluentui-react-native/framework-base": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*" + "@fluentui-react-native/framework-base": "workspace:*" }, "devDependencies": { "@babel/core": "catalog:", diff --git a/packages/experimental/MenuButton/src/MenuButton.types.ts b/packages/experimental/MenuButton/src/MenuButton.types.ts index da3a932358b..04581bdaf16 100644 --- a/packages/experimental/MenuButton/src/MenuButton.types.ts +++ b/packages/experimental/MenuButton/src/MenuButton.types.ts @@ -1,6 +1,11 @@ import type { ButtonProps } from '@fluentui-react-native/button'; import type { ContextualMenuItemProps, ContextualMenuProps, SubmenuProps } from '@fluentui-react-native/contextual-menu'; -import type { FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens'; +import type { + FontTokens, + IForegroundColorTokens, + IBackgroundColorTokens, + IBorderTokens, +} from '@fluentui-react-native/design/styling/tokens'; import type { XmlProps } from 'react-native-svg'; export const menuButtonName = 'MenuButton'; diff --git a/packages/experimental/MenuButton/tsconfig.json b/packages/experimental/MenuButton/tsconfig.json index 481f89ad5cf..0a2d92e1b65 100644 --- a/packages/experimental/MenuButton/tsconfig.json +++ b/packages/experimental/MenuButton/tsconfig.json @@ -24,7 +24,7 @@ "path": "../../../scripts/tsconfig.json" }, { - "path": "../../utils/tokens/tsconfig.json" + "path": "../../agentic/design/tsconfig.json" } ] } diff --git a/packages/experimental/Shimmer/package.json b/packages/experimental/Shimmer/package.json index e7b89803507..ac383ae3bae 100644 --- a/packages/experimental/Shimmer/package.json +++ b/packages/experimental/Shimmer/package.json @@ -33,7 +33,6 @@ "@fluentui-react-native/design": "workspace:*", "@fluentui-react-native/framework": "workspace:*", "@fluentui-react-native/framework-base": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*", "@fluentui-react-native/use-styling": "workspace:*", "assert-never": "^1.2.1" }, diff --git a/packages/experimental/Shimmer/src/Shimmer.types.shared.ts b/packages/experimental/Shimmer/src/Shimmer.types.shared.ts index b74ff614830..704fc43e58d 100644 --- a/packages/experimental/Shimmer/src/Shimmer.types.shared.ts +++ b/packages/experimental/Shimmer/src/Shimmer.types.shared.ts @@ -1,6 +1,6 @@ import type { ColorValue, ViewProps } from 'react-native'; -import type { IBackgroundColorTokens } from '@fluentui-react-native/tokens'; +import type { IBackgroundColorTokens } from '@fluentui-react-native/design/styling/tokens'; import type { SvgProps } from 'react-native-svg'; export const shimmerName = 'Shimmer'; diff --git a/packages/experimental/Shimmer/tsconfig.json b/packages/experimental/Shimmer/tsconfig.json index 8bcaadef223..3cfa95e9c78 100644 --- a/packages/experimental/Shimmer/tsconfig.json +++ b/packages/experimental/Shimmer/tsconfig.json @@ -20,9 +20,6 @@ { "path": "../../../scripts/tsconfig.json" }, - { - "path": "../../utils/tokens/tsconfig.json" - }, { "path": "../../framework/use-styling/tsconfig.json" } diff --git a/packages/framework/framework/package.json b/packages/framework/framework/package.json index 41d1c021481..e7ba3562e6f 100644 --- a/packages/framework/framework/package.json +++ b/packages/framework/framework/package.json @@ -36,7 +36,6 @@ "@fluentui-react-native/default-theme": "workspace:*", "@fluentui-react-native/design": "workspace:*", "@fluentui-react-native/framework-base": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*", "@fluentui-react-native/use-slots": "workspace:*", "@fluentui-react-native/use-styling": "workspace:*", "@fluentui-react-native/use-tokens": "workspace:*" diff --git a/packages/framework/framework/src/index.ts b/packages/framework/framework/src/index.ts index 591727c5556..de31d1f839a 100644 --- a/packages/framework/framework/src/index.ts +++ b/packages/framework/framework/src/index.ts @@ -18,7 +18,7 @@ export { shadowTokens, textTokens, tokenBuilder, -} from '@fluentui-react-native/tokens'; +} from '@fluentui-react-native/design/styling/tokens'; export type { FontStyleTokens, FontTokens, @@ -30,7 +30,7 @@ export type { IShadowTokens, LayoutTokens, TokenBuilder, -} from '@fluentui-react-native/tokens'; +} from '@fluentui-react-native/design/styling/tokens'; export { renderSlot, stagedComponent, withSlots, useSlot } from '@fluentui-react-native/framework-base'; export type { RenderType as NativeReactType } from '@fluentui-react-native/framework-base'; diff --git a/packages/framework/framework/tsconfig.json b/packages/framework/framework/tsconfig.json index 527f0129043..c04f8a8b1f7 100644 --- a/packages/framework/framework/tsconfig.json +++ b/packages/framework/framework/tsconfig.json @@ -27,9 +27,6 @@ { "path": "../../../scripts/tsconfig.json" }, - { - "path": "../../utils/tokens/tsconfig.json" - }, { "path": "../use-slots/tsconfig.json" }, diff --git a/packages/framework/themed-stylesheet/.npmignore b/packages/shim/theme-tokens/.npmignore similarity index 100% rename from packages/framework/themed-stylesheet/.npmignore rename to packages/shim/theme-tokens/.npmignore diff --git a/packages/theming/theme-tokens/CHANGELOG.json b/packages/shim/theme-tokens/CHANGELOG.json similarity index 100% rename from packages/theming/theme-tokens/CHANGELOG.json rename to packages/shim/theme-tokens/CHANGELOG.json diff --git a/packages/theming/theme-tokens/CHANGELOG.md b/packages/shim/theme-tokens/CHANGELOG.md similarity index 100% rename from packages/theming/theme-tokens/CHANGELOG.md rename to packages/shim/theme-tokens/CHANGELOG.md diff --git a/packages/shim/theme-tokens/README.md b/packages/shim/theme-tokens/README.md new file mode 100644 index 00000000000..a84ebbb4912 --- /dev/null +++ b/packages/shim/theme-tokens/README.md @@ -0,0 +1,7 @@ +# Theme-tokens + +> **Deprecated:** Import `globalTokens`, `getAliasTokens`, and `getShadowTokens` +> from `@fluentui-react-native/design/tokens/legacy` instead. + +This package is a compatibility shim and will not receive new APIs. It preserves +the existing entry point while consumers migrate to the design package. diff --git a/packages/theming/theme-tokens/package.json b/packages/shim/theme-tokens/package.json similarity index 84% rename from packages/theming/theme-tokens/package.json rename to packages/shim/theme-tokens/package.json index 45a94138bbc..552b898c3bb 100644 --- a/packages/theming/theme-tokens/package.json +++ b/packages/shim/theme-tokens/package.json @@ -8,7 +8,7 @@ "repository": { "type": "git", "url": "https://github.com/microsoft/fluentui-react-native.git", - "directory": "packages/theming/theme-tokens" + "directory": "packages/shim/theme-tokens" }, "type": "module", "main": "lib/index.js", @@ -33,12 +33,7 @@ "update-snapshots": "fluentui-scripts jest -u" }, "dependencies": { - "@fluentui-react-native/design": "workspace:*", - "@fluentui-react-native/design-tokens-android": "catalog:", - "@fluentui-react-native/design-tokens-ios": "catalog:", - "@fluentui-react-native/design-tokens-win32": "catalog:", - "@fluentui-react-native/design-tokens-windows": "catalog:", - "assert-never": "^1.2.1" + "@fluentui-react-native/design": "workspace:*" }, "devDependencies": { "@babel/core": "catalog:", @@ -52,6 +47,7 @@ "react-native": "^0.81.6" }, "peerDependencies": { + "@office-iss/react-native-win32": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0", "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.4", "react": "18.2.0 || 19.0.0 || 19.1.4", "react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.6", @@ -59,6 +55,9 @@ "react-native-windows": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0" }, "peerDependenciesMeta": { + "@office-iss/react-native-win32": { + "optional": true + }, "@types/react": { "optional": true }, diff --git a/packages/shim/theme-tokens/src/index.ts b/packages/shim/theme-tokens/src/index.ts new file mode 100644 index 00000000000..7547d35e1dd --- /dev/null +++ b/packages/shim/theme-tokens/src/index.ts @@ -0,0 +1,4 @@ +// This package is a compatibility shim. Legacy Fluent token values now live in +// the `@fluentui-react-native/design/tokens/legacy` submodule. These explicit +// re-exports preserve the existing `@fluentui-react-native/theme-tokens` entry point. +export { getAliasTokens, getShadowTokens, globalTokens } from '@fluentui-react-native/design/tokens/legacy'; diff --git a/packages/theming/theme-tokens/tsconfig.json b/packages/shim/theme-tokens/tsconfig.json similarity index 100% rename from packages/theming/theme-tokens/tsconfig.json rename to packages/shim/theme-tokens/tsconfig.json diff --git a/packages/theming/theme-tokens/.npmignore b/packages/shim/theme-types/.npmignore similarity index 100% rename from packages/theming/theme-tokens/.npmignore rename to packages/shim/theme-types/.npmignore diff --git a/packages/theming/theme-types/CHANGELOG.json b/packages/shim/theme-types/CHANGELOG.json similarity index 100% rename from packages/theming/theme-types/CHANGELOG.json rename to packages/shim/theme-types/CHANGELOG.json diff --git a/packages/theming/theme-types/CHANGELOG.md b/packages/shim/theme-types/CHANGELOG.md similarity index 100% rename from packages/theming/theme-types/CHANGELOG.md rename to packages/shim/theme-types/CHANGELOG.md diff --git a/packages/theming/theme-types/README.md b/packages/shim/theme-types/README.md similarity index 100% rename from packages/theming/theme-types/README.md rename to packages/shim/theme-types/README.md diff --git a/packages/theming/theme-types/package.json b/packages/shim/theme-types/package.json similarity index 91% rename from packages/theming/theme-types/package.json rename to packages/shim/theme-types/package.json index 35e30123a6e..338ca452726 100644 --- a/packages/theming/theme-types/package.json +++ b/packages/shim/theme-types/package.json @@ -8,7 +8,7 @@ "repository": { "type": "git", "url": "https://github.com/microsoft/fluentui-react-native.git", - "directory": "packages/theming/theme-types" + "directory": "packages/shim/theme-types" }, "type": "module", "main": "lib/index.js", @@ -47,6 +47,7 @@ "react-native": "^0.81.6" }, "peerDependencies": { + "@office-iss/react-native-win32": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0", "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.4", "react": "18.2.0 || 19.0.0 || 19.1.4", "react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.6", @@ -54,6 +55,9 @@ "react-native-windows": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0" }, "peerDependenciesMeta": { + "@office-iss/react-native-win32": { + "optional": true + }, "@types/react": { "optional": true }, diff --git a/packages/theming/theme-types/src/index.ts b/packages/shim/theme-types/src/index.ts similarity index 100% rename from packages/theming/theme-types/src/index.ts rename to packages/shim/theme-types/src/index.ts diff --git a/packages/framework/theme/tsconfig.json b/packages/shim/theme-types/tsconfig.json similarity index 100% rename from packages/framework/theme/tsconfig.json rename to packages/shim/theme-types/tsconfig.json diff --git a/packages/framework/theme/.npmignore b/packages/shim/theme/.npmignore similarity index 100% rename from packages/framework/theme/.npmignore rename to packages/shim/theme/.npmignore diff --git a/packages/framework/theme/CHANGELOG.json b/packages/shim/theme/CHANGELOG.json similarity index 100% rename from packages/framework/theme/CHANGELOG.json rename to packages/shim/theme/CHANGELOG.json diff --git a/packages/framework/theme/CHANGELOG.md b/packages/shim/theme/CHANGELOG.md similarity index 100% rename from packages/framework/theme/CHANGELOG.md rename to packages/shim/theme/CHANGELOG.md diff --git a/packages/framework/theme/README.md b/packages/shim/theme/README.md similarity index 100% rename from packages/framework/theme/README.md rename to packages/shim/theme/README.md diff --git a/packages/framework/theme/jest.config.cjs b/packages/shim/theme/jest.config.cjs similarity index 100% rename from packages/framework/theme/jest.config.cjs rename to packages/shim/theme/jest.config.cjs diff --git a/packages/framework/theme/package.json b/packages/shim/theme/package.json similarity index 92% rename from packages/framework/theme/package.json rename to packages/shim/theme/package.json index 08f036c1edc..30f123b4f29 100644 --- a/packages/framework/theme/package.json +++ b/packages/shim/theme/package.json @@ -8,7 +8,7 @@ "repository": { "type": "git", "url": "https://github.com/microsoft/fluentui-react-native", - "directory": "packages/framework/theme" + "directory": "packages/shim/theme" }, "type": "module", "main": "./lib/index.js", @@ -48,6 +48,7 @@ "react-native": "^0.81.6" }, "peerDependencies": { + "@office-iss/react-native-win32": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0", "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.4", "react": "18.2.0 || 19.0.0 || 19.1.4", "react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.6", @@ -55,6 +56,9 @@ "react-native-windows": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0" }, "peerDependenciesMeta": { + "@office-iss/react-native-win32": { + "optional": true + }, "@types/react": { "optional": true }, diff --git a/packages/framework/theme/src/index.ts b/packages/shim/theme/src/index.ts similarity index 100% rename from packages/framework/theme/src/index.ts rename to packages/shim/theme/src/index.ts diff --git a/packages/theming/theme-types/tsconfig.json b/packages/shim/theme/tsconfig.json similarity index 100% rename from packages/theming/theme-types/tsconfig.json rename to packages/shim/theme/tsconfig.json diff --git a/packages/theming/theme-types/.npmignore b/packages/shim/themed-stylesheet/.npmignore similarity index 100% rename from packages/theming/theme-types/.npmignore rename to packages/shim/themed-stylesheet/.npmignore diff --git a/packages/framework/themed-stylesheet/CHANGELOG.json b/packages/shim/themed-stylesheet/CHANGELOG.json similarity index 100% rename from packages/framework/themed-stylesheet/CHANGELOG.json rename to packages/shim/themed-stylesheet/CHANGELOG.json diff --git a/packages/framework/themed-stylesheet/CHANGELOG.md b/packages/shim/themed-stylesheet/CHANGELOG.md similarity index 100% rename from packages/framework/themed-stylesheet/CHANGELOG.md rename to packages/shim/themed-stylesheet/CHANGELOG.md diff --git a/packages/framework/themed-stylesheet/README.md b/packages/shim/themed-stylesheet/README.md similarity index 92% rename from packages/framework/themed-stylesheet/README.md rename to packages/shim/themed-stylesheet/README.md index 2278b1241b2..0fc167d3dd2 100644 --- a/packages/framework/themed-stylesheet/README.md +++ b/packages/shim/themed-stylesheet/README.md @@ -1,5 +1,11 @@ # Themed StyleSheet +> **Deprecated:** Import `themedStyleSheet` and `NamedStyles` from +> `@fluentui-react-native/design/styling/stylesheet` instead. + +This package is a compatibility shim and will not receive new APIs. It preserves +the existing entry point while consumers migrate to the design package. + A convenience wrapper to create style sheets which depend upon values in a theme, and use them in a manner where they are built and cached once per theme. This doesn't have a huge amount of code, it is mainly about standardizing the usage patterns. diff --git a/packages/framework/themed-stylesheet/jest.config.cjs b/packages/shim/themed-stylesheet/jest.config.cjs similarity index 100% rename from packages/framework/themed-stylesheet/jest.config.cjs rename to packages/shim/themed-stylesheet/jest.config.cjs diff --git a/packages/framework/themed-stylesheet/package.json b/packages/shim/themed-stylesheet/package.json similarity index 76% rename from packages/framework/themed-stylesheet/package.json rename to packages/shim/themed-stylesheet/package.json index 5eb37586394..cdf68d4a9e0 100644 --- a/packages/framework/themed-stylesheet/package.json +++ b/packages/shim/themed-stylesheet/package.json @@ -8,7 +8,7 @@ "repository": { "type": "git", "url": "https://github.com/microsoft/fluentui-react-native", - "directory": "packages/framework/themed-stylesheet" + "directory": "packages/shim/themed-stylesheet" }, "type": "module", "main": "./lib/index.js", @@ -33,7 +33,7 @@ "update-snapshots": "fluentui-scripts jest -u" }, "dependencies": { - "@fluentui-react-native/framework-base": "workspace:*" + "@fluentui-react-native/design": "workspace:*" }, "devDependencies": { "@babel/core": "catalog:", @@ -48,13 +48,25 @@ "react-native": "^0.81.6" }, "peerDependencies": { + "@office-iss/react-native-win32": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0", "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.4", "react": "18.2.0 || 19.0.0 || 19.1.4", - "react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.6" + "react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.6", + "react-native-macos": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0", + "react-native-windows": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0" }, "peerDependenciesMeta": { + "@office-iss/react-native-win32": { + "optional": true + }, "@types/react": { "optional": true + }, + "react-native-macos": { + "optional": true + }, + "react-native-windows": { + "optional": true } }, "furn": { diff --git a/packages/shim/themed-stylesheet/src/index.ts b/packages/shim/themed-stylesheet/src/index.ts new file mode 100644 index 00000000000..db5e540d7e3 --- /dev/null +++ b/packages/shim/themed-stylesheet/src/index.ts @@ -0,0 +1,5 @@ +// This package is a compatibility shim. The legacy themed StyleSheet helper now +// lives in the `@fluentui-react-native/design/styling/stylesheet` submodule. +// These explicit re-exports preserve the existing package entry point. +export { themedStyleSheet } from '@fluentui-react-native/design/styling/stylesheet'; +export type { NamedStyles } from '@fluentui-react-native/design/styling/stylesheet'; diff --git a/packages/utils/tokens/tsconfig.json b/packages/shim/themed-stylesheet/tsconfig.json similarity index 87% rename from packages/utils/tokens/tsconfig.json rename to packages/shim/themed-stylesheet/tsconfig.json index 44f3f84b0c8..b33d13464a2 100644 --- a/packages/utils/tokens/tsconfig.json +++ b/packages/shim/themed-stylesheet/tsconfig.json @@ -8,9 +8,6 @@ }, "include": ["src"], "references": [ - { - "path": "../adapters/tsconfig.json" - }, { "path": "../../agentic/design/tsconfig.json" }, diff --git a/packages/theming/theming-utils/CHANGELOG.json b/packages/shim/theming-utils/CHANGELOG.json similarity index 100% rename from packages/theming/theming-utils/CHANGELOG.json rename to packages/shim/theming-utils/CHANGELOG.json diff --git a/packages/theming/theming-utils/CHANGELOG.md b/packages/shim/theming-utils/CHANGELOG.md similarity index 100% rename from packages/theming/theming-utils/CHANGELOG.md rename to packages/shim/theming-utils/CHANGELOG.md diff --git a/packages/shim/theming-utils/README.md b/packages/shim/theming-utils/README.md new file mode 100644 index 00000000000..82c4b8e8a72 --- /dev/null +++ b/packages/shim/theming-utils/README.md @@ -0,0 +1,7 @@ +# Theming Utils + +> **Deprecated:** Import appearance and token-pipeline helpers from +> `@fluentui-react-native/design/theming` instead. + +This package is a compatibility shim and will not receive new APIs. It preserves +the existing entry point while consumers migrate to the design package. diff --git a/packages/theming/theming-utils/jest.config.cjs b/packages/shim/theming-utils/jest.config.cjs similarity index 100% rename from packages/theming/theming-utils/jest.config.cjs rename to packages/shim/theming-utils/jest.config.cjs diff --git a/packages/theming/theming-utils/oxlint.config.ts b/packages/shim/theming-utils/oxlint.config.ts similarity index 100% rename from packages/theming/theming-utils/oxlint.config.ts rename to packages/shim/theming-utils/oxlint.config.ts diff --git a/packages/theming/theming-utils/package.json b/packages/shim/theming-utils/package.json similarity index 89% rename from packages/theming/theming-utils/package.json rename to packages/shim/theming-utils/package.json index f088dfa583b..ead51a09e63 100644 --- a/packages/theming/theming-utils/package.json +++ b/packages/shim/theming-utils/package.json @@ -7,7 +7,7 @@ "repository": { "type": "git", "url": "https://github.com/microsoft/fluentui-react-native.git", - "directory": "packages/theming/theming-utils" + "directory": "packages/shim/theming-utils" }, "type": "module", "main": "lib/index.js", @@ -30,13 +30,10 @@ "update-snapshots": "fluentui-scripts jest -u" }, "dependencies": { - "@fluentui-react-native/design": "workspace:*", - "@fluentui-react-native/tokens": "workspace:*" + "@fluentui-react-native/design": "workspace:*" }, "devDependencies": { "@babel/core": "catalog:", - "@fluentui-react-native/design-tokens-win32": "catalog:", - "@fluentui-react-native/design-tokens-windows": "catalog:", "@fluentui-react-native/scripts": "workspace:*", "@react-native-community/cli": "^20.0.0", "@react-native-community/cli-platform-android": "^20.0.0", diff --git a/packages/shim/theming-utils/src/index.ts b/packages/shim/theming-utils/src/index.ts new file mode 100644 index 00000000000..077e7f4220c --- /dev/null +++ b/packages/shim/theming-utils/src/index.ts @@ -0,0 +1,11 @@ +// This package is a compatibility shim. Theme appearance and token-pipeline +// utilities now live in the `@fluentui-react-native/design/theming` submodule. +// These explicit re-exports preserve the existing package entry point. +export { + getCurrentAppearance, + isHighContrast, + mapFontPipelineToTheme, + mapPipelineToShadow, + mapPipelineToTheme, + setIsHighContrast, +} from '@fluentui-react-native/design/theming'; diff --git a/packages/framework/themed-stylesheet/tsconfig.json b/packages/shim/theming-utils/tsconfig.json similarity index 86% rename from packages/framework/themed-stylesheet/tsconfig.json rename to packages/shim/theming-utils/tsconfig.json index 256f00585b8..b33d13464a2 100644 --- a/packages/framework/themed-stylesheet/tsconfig.json +++ b/packages/shim/theming-utils/tsconfig.json @@ -9,7 +9,7 @@ "include": ["src"], "references": [ { - "path": "../../framework-base/tsconfig.json" + "path": "../../agentic/design/tsconfig.json" }, { "path": "../../../scripts/tsconfig.json" diff --git a/packages/utils/tokens/CHANGELOG.json b/packages/shim/tokens/CHANGELOG.json similarity index 100% rename from packages/utils/tokens/CHANGELOG.json rename to packages/shim/tokens/CHANGELOG.json diff --git a/packages/utils/tokens/CHANGELOG.md b/packages/shim/tokens/CHANGELOG.md similarity index 100% rename from packages/utils/tokens/CHANGELOG.md rename to packages/shim/tokens/CHANGELOG.md diff --git a/packages/shim/tokens/README.md b/packages/shim/tokens/README.md new file mode 100644 index 00000000000..80446b6d2aa --- /dev/null +++ b/packages/shim/tokens/README.md @@ -0,0 +1,7 @@ +# Tokens + +> **Deprecated:** Import these token-to-style helpers from +> `@fluentui-react-native/design/styling/tokens` instead. + +This package is a compatibility shim and will not receive new APIs. It preserves +the existing entry point while consumers migrate to the design package. diff --git a/packages/utils/tokens/package.json b/packages/shim/tokens/package.json similarity index 96% rename from packages/utils/tokens/package.json rename to packages/shim/tokens/package.json index 66d659ea9e8..2cd29a1d73f 100644 --- a/packages/utils/tokens/package.json +++ b/packages/shim/tokens/package.json @@ -7,7 +7,7 @@ "repository": { "type": "git", "url": "https://github.com/microsoft/fluentui-react-native.git", - "directory": "packages/utils/tokens" + "directory": "packages/shim/tokens" }, "type": "module", "main": "lib/index.js", @@ -30,7 +30,6 @@ "update-snapshots": "fluentui-scripts jest -u" }, "dependencies": { - "@fluentui-react-native/adapters": "workspace:*", "@fluentui-react-native/design": "workspace:*" }, "devDependencies": { diff --git a/packages/shim/tokens/src/index.ts b/packages/shim/tokens/src/index.ts new file mode 100644 index 00000000000..7525a49a866 --- /dev/null +++ b/packages/shim/tokens/src/index.ts @@ -0,0 +1,28 @@ +// This package is a compatibility shim. Legacy token-to-style helpers now live +// in the `@fluentui-react-native/design/styling/tokens` submodule. These explicit +// re-exports preserve the existing `@fluentui-react-native/tokens` entry point. +export { borderStyles, borderTokens } from '@fluentui-react-native/design/styling/tokens'; +export type { IBorderTokens } from '@fluentui-react-native/design/styling/tokens'; +export { + backgroundColorTokens, + colorTokens, + foregroundColorTokens, + getPaletteFromTheme, +} from '@fluentui-react-native/design/styling/tokens'; +export type { IBackgroundColorTokens, IColorTokens, IForegroundColorTokens } from '@fluentui-react-native/design/styling/tokens'; +export { fontStyles, textTokens } from '@fluentui-react-native/design/styling/tokens'; +export type { FontDecorationTokens, FontStyleTokens, FontTokens, FontVariantTokens } from '@fluentui-react-native/design/styling/tokens'; +export { layoutStyles, layoutTokens } from '@fluentui-react-native/design/styling/tokens'; +export type { LayoutTokens } from '@fluentui-react-native/design/styling/tokens'; +export { shadowStyles, shadowTokens } from '@fluentui-react-native/design/styling/tokens'; +export type { IShadowTokens } from '@fluentui-react-native/design/styling/tokens'; +export { tokenBuilder } from '@fluentui-react-native/design/styling/tokens'; +export type { TokenBuilder } from '@fluentui-react-native/design/styling/tokens'; +export type { + LookupThemePart, + OperationSet, + StyleFactoryFunction, + StyleFactoryFunctionRaw, + StyleFactoryOperation, +} from '@fluentui-react-native/design/styling/tokens'; +export { styleFunction } from '@fluentui-react-native/design/styling/tokens'; diff --git a/packages/theming/theming-utils/tsconfig.json b/packages/shim/tokens/tsconfig.json similarity index 85% rename from packages/theming/theming-utils/tsconfig.json rename to packages/shim/tokens/tsconfig.json index 1427434b9b7..b33d13464a2 100644 --- a/packages/theming/theming-utils/tsconfig.json +++ b/packages/shim/tokens/tsconfig.json @@ -13,9 +13,6 @@ }, { "path": "../../../scripts/tsconfig.json" - }, - { - "path": "../../utils/tokens/tsconfig.json" } ] } diff --git a/packages/theming/README.md b/packages/theming/README.md index 9b73d4c1e09..617ef4fbde0 100644 --- a/packages/theming/README.md +++ b/packages/theming/README.md @@ -12,5 +12,5 @@ ## Theme types and utilities -[Theme-types](./theme-types/README.md) -[Theme-tokens](./theme-tokens/README.md) +- [Theme-types](../shim/theme-types/README.md) +- [Theme-tokens](../shim/theme-tokens/README.md) diff --git a/packages/theming/android-theme/package.json b/packages/theming/android-theme/package.json index 942ae815bdb..721b47f2243 100644 --- a/packages/theming/android-theme/package.json +++ b/packages/theming/android-theme/package.json @@ -34,9 +34,7 @@ }, "dependencies": { "@fluentui-react-native/design": "workspace:*", - "@fluentui-react-native/framework-base": "workspace:*", - "@fluentui-react-native/theme-tokens": "workspace:*", - "@fluentui-react-native/theming-utils": "workspace:*" + "@fluentui-react-native/framework-base": "workspace:*" }, "devDependencies": { "@babel/core": "catalog:", diff --git a/packages/theming/android-theme/src/createAliasTokens.ts b/packages/theming/android-theme/src/createAliasTokens.ts index 6f08f83023f..f6e55a87bcb 100644 --- a/packages/theming/android-theme/src/createAliasTokens.ts +++ b/packages/theming/android-theme/src/createAliasTokens.ts @@ -1,7 +1,7 @@ import { memoize } from '@fluentui-react-native/framework-base'; -import { getAliasTokens, getShadowTokens } from '@fluentui-react-native/theme-tokens'; +import { getAliasTokens, getShadowTokens } from '@fluentui-react-native/design/tokens/legacy'; import type { AliasColorTokens, AppearanceOptions, ThemeShadowDefinition } from '@fluentui-react-native/design/theming'; -import { mapPipelineToShadow, mapPipelineToTheme } from '@fluentui-react-native/theming-utils'; +import { mapPipelineToShadow, mapPipelineToTheme } from '@fluentui-react-native/design/theming'; function createColorAliasTokensWorker(mode: AppearanceOptions): AliasColorTokens { const aliasTokens = getAliasTokens(mode); diff --git a/packages/theming/android-theme/src/createFontAliasTokens.ts b/packages/theming/android-theme/src/createFontAliasTokens.ts index 1b0bba1cb9c..6f5494f58c1 100644 --- a/packages/theming/android-theme/src/createFontAliasTokens.ts +++ b/packages/theming/android-theme/src/createFontAliasTokens.ts @@ -1,7 +1,7 @@ import { memoize } from '@fluentui-react-native/framework-base'; -import { getAliasTokens } from '@fluentui-react-native/theme-tokens'; +import { getAliasTokens } from '@fluentui-react-native/design/tokens/legacy'; import type { Variants } from '@fluentui-react-native/design/theming'; -import { mapFontPipelineToTheme } from '@fluentui-react-native/theming-utils'; +import { mapFontPipelineToTheme } from '@fluentui-react-native/design/theming'; function createFontAliasTokensWorker(): Partial { const aliasTokens = getAliasTokens('light'); diff --git a/packages/theming/android-theme/tsconfig.json b/packages/theming/android-theme/tsconfig.json index 9c91869f23b..1e570850a14 100644 --- a/packages/theming/android-theme/tsconfig.json +++ b/packages/theming/android-theme/tsconfig.json @@ -17,12 +17,6 @@ }, { "path": "../../../scripts/tsconfig.json" - }, - { - "path": "../theme-tokens/tsconfig.json" - }, - { - "path": "../theming-utils/tsconfig.json" } ] } diff --git a/packages/theming/apple-theme/package.json b/packages/theming/apple-theme/package.json index 28559a68d55..0ebe3fe2970 100644 --- a/packages/theming/apple-theme/package.json +++ b/packages/theming/apple-theme/package.json @@ -39,8 +39,6 @@ "@fluentui-react-native/design-tokens-macos": "catalog:", "@fluentui-react-native/experimental-appearance-additions": "workspace:*", "@fluentui-react-native/framework-base": "workspace:*", - "@fluentui-react-native/theme-tokens": "workspace:*", - "@fluentui-react-native/theming-utils": "workspace:*", "assert-never": "^1.2.1" }, "devDependencies": { diff --git a/packages/theming/apple-theme/src/createFontAliasTokens.ios.ts b/packages/theming/apple-theme/src/createFontAliasTokens.ios.ts index 7e415554dc2..cacfcbf6238 100644 --- a/packages/theming/apple-theme/src/createFontAliasTokens.ios.ts +++ b/packages/theming/apple-theme/src/createFontAliasTokens.ios.ts @@ -1,7 +1,7 @@ import aliasTokens from '@fluentui-react-native/design-tokens-ios/light/tokens-aliases.json'; // Font alias tokens should be the same for all color styles import { memoize } from '@fluentui-react-native/framework-base'; import type { Variants } from '@fluentui-react-native/design/theming'; -import { mapFontPipelineToTheme } from '@fluentui-react-native/theming-utils'; +import { mapFontPipelineToTheme } from '@fluentui-react-native/design/theming'; function createFontAliasTokensWorker(): Partial { return mapFontPipelineToTheme(aliasTokens); diff --git a/packages/theming/apple-theme/src/createMacOSAliasTokens.ts b/packages/theming/apple-theme/src/createMacOSAliasTokens.ts index e3991e8375a..d2cc77eb70f 100644 --- a/packages/theming/apple-theme/src/createMacOSAliasTokens.ts +++ b/packages/theming/apple-theme/src/createMacOSAliasTokens.ts @@ -1,7 +1,7 @@ import { memoize } from '@fluentui-react-native/framework-base'; import type { AliasColorTokens, AppearanceOptions } from '@fluentui-react-native/design/theming'; import type { ThemeShadowDefinition } from '@fluentui-react-native/design/theming'; -import { mapPipelineToTheme, mapPipelineToShadow } from '@fluentui-react-native/theming-utils'; +import { mapPipelineToTheme, mapPipelineToShadow } from '@fluentui-react-native/design/theming'; import { getMacOSAliasTokens, getMacOSShadowTokens } from './getMacOSTokens'; diff --git a/packages/theming/apple-theme/src/createiOSAliasTokens.ts b/packages/theming/apple-theme/src/createiOSAliasTokens.ts index f788ca86973..5f425502916 100644 --- a/packages/theming/apple-theme/src/createiOSAliasTokens.ts +++ b/packages/theming/apple-theme/src/createiOSAliasTokens.ts @@ -1,8 +1,8 @@ import { memoize } from '@fluentui-react-native/framework-base'; -import { getAliasTokens, getShadowTokens } from '@fluentui-react-native/theme-tokens'; +import { getAliasTokens, getShadowTokens } from '@fluentui-react-native/design/tokens/legacy'; import type { AliasColorTokens, AppearanceOptions } from '@fluentui-react-native/design/theming'; import type { ThemeShadowDefinition } from '@fluentui-react-native/design/theming'; -import { mapPipelineToTheme, mapPipelineToShadow } from '@fluentui-react-native/theming-utils'; +import { mapPipelineToTheme, mapPipelineToShadow } from '@fluentui-react-native/design/theming'; function createiOSColorAliasTokensWorker(mode: AppearanceOptions): AliasColorTokens { const aliasTokens = getAliasTokens(mode); diff --git a/packages/theming/apple-theme/tsconfig.json b/packages/theming/apple-theme/tsconfig.json index 2e4eb1640d7..3595c27d588 100644 --- a/packages/theming/apple-theme/tsconfig.json +++ b/packages/theming/apple-theme/tsconfig.json @@ -23,12 +23,6 @@ }, { "path": "../../../scripts/tsconfig.json" - }, - { - "path": "../theme-tokens/tsconfig.json" - }, - { - "path": "../theming-utils/tsconfig.json" } ] } diff --git a/packages/theming/default-theme/package.json b/packages/theming/default-theme/package.json index 468383ed785..7096a958447 100644 --- a/packages/theming/default-theme/package.json +++ b/packages/theming/default-theme/package.json @@ -35,8 +35,6 @@ "dependencies": { "@fluentui-react-native/design": "workspace:*", "@fluentui-react-native/framework-base": "workspace:*", - "@fluentui-react-native/theme-tokens": "workspace:*", - "@fluentui-react-native/theming-utils": "workspace:*", "assert-never": "^1.2.1" }, "devDependencies": { diff --git a/packages/theming/default-theme/src/createAliasTokens.ts b/packages/theming/default-theme/src/createAliasTokens.ts index 6f08f83023f..f6e55a87bcb 100644 --- a/packages/theming/default-theme/src/createAliasTokens.ts +++ b/packages/theming/default-theme/src/createAliasTokens.ts @@ -1,7 +1,7 @@ import { memoize } from '@fluentui-react-native/framework-base'; -import { getAliasTokens, getShadowTokens } from '@fluentui-react-native/theme-tokens'; +import { getAliasTokens, getShadowTokens } from '@fluentui-react-native/design/tokens/legacy'; import type { AliasColorTokens, AppearanceOptions, ThemeShadowDefinition } from '@fluentui-react-native/design/theming'; -import { mapPipelineToShadow, mapPipelineToTheme } from '@fluentui-react-native/theming-utils'; +import { mapPipelineToShadow, mapPipelineToTheme } from '@fluentui-react-native/design/theming'; function createColorAliasTokensWorker(mode: AppearanceOptions): AliasColorTokens { const aliasTokens = getAliasTokens(mode); diff --git a/packages/theming/default-theme/src/defaultTheme.ts b/packages/theming/default-theme/src/defaultTheme.ts index 28e466f1872..a119dc4b196 100644 --- a/packages/theming/default-theme/src/defaultTheme.ts +++ b/packages/theming/default-theme/src/defaultTheme.ts @@ -1,6 +1,6 @@ import { Platform } from 'react-native'; -import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import { globalTokens } from '@fluentui-react-native/design/tokens/legacy'; import type { Theme, Typography, Spacing, FontWeightValue, FontSize, FontSizes, Variants } from '@fluentui-react-native/design/theming'; import { fontWeightRegular, fontWeightSemibold } from '@fluentui-react-native/design/tokens/global'; diff --git a/packages/theming/default-theme/src/stockWebPalette.macos.ts b/packages/theming/default-theme/src/stockWebPalette.macos.ts index 468e6b70413..3502caf0027 100644 --- a/packages/theming/default-theme/src/stockWebPalette.macos.ts +++ b/packages/theming/default-theme/src/stockWebPalette.macos.ts @@ -1,4 +1,4 @@ -import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import { globalTokens } from '@fluentui-react-native/design/tokens/legacy'; import type { ThemeColorDefinition } from '@fluentui-react-native/design/theming'; import { colorBlack, colorBurgundyPrimary, colorRedPrimary, colorWhite } from '@fluentui-react-native/design/tokens/global'; diff --git a/packages/theming/default-theme/src/stockWebPalette.ts b/packages/theming/default-theme/src/stockWebPalette.ts index 2b6372bcbde..dd7b3b40cb5 100644 --- a/packages/theming/default-theme/src/stockWebPalette.ts +++ b/packages/theming/default-theme/src/stockWebPalette.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */ -import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import { globalTokens } from '@fluentui-react-native/design/tokens/legacy'; import type { ThemeColorDefinition } from '@fluentui-react-native/design/theming'; import { colorBlack, colorBurgundyPrimary, colorRedPrimary, colorWhite } from '@fluentui-react-native/design/tokens/global'; diff --git a/packages/theming/default-theme/src/stockWebPalette.win32.ts b/packages/theming/default-theme/src/stockWebPalette.win32.ts index 468e6b70413..3502caf0027 100644 --- a/packages/theming/default-theme/src/stockWebPalette.win32.ts +++ b/packages/theming/default-theme/src/stockWebPalette.win32.ts @@ -1,4 +1,4 @@ -import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import { globalTokens } from '@fluentui-react-native/design/tokens/legacy'; import type { ThemeColorDefinition } from '@fluentui-react-native/design/theming'; import { colorBlack, colorBurgundyPrimary, colorRedPrimary, colorWhite } from '@fluentui-react-native/design/tokens/global'; diff --git a/packages/theming/default-theme/tsconfig.json b/packages/theming/default-theme/tsconfig.json index ea6d1f1ab5f..7ac60199083 100644 --- a/packages/theming/default-theme/tsconfig.json +++ b/packages/theming/default-theme/tsconfig.json @@ -16,12 +16,6 @@ }, { "path": "../../../scripts/tsconfig.json" - }, - { - "path": "../theme-tokens/tsconfig.json" - }, - { - "path": "../theming-utils/tsconfig.json" } ] } diff --git a/packages/theming/theme-tokens/README.md b/packages/theming/theme-tokens/README.md deleted file mode 100644 index 414ec6137f5..00000000000 --- a/packages/theming/theme-tokens/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# Theme-tokens - -Defines values for tokens used to fill out themes, such as color, typography, and spacing values. diff --git a/packages/theming/theming-utils/src/index.ts b/packages/theming/theming-utils/src/index.ts deleted file mode 100644 index 95419129d86..00000000000 --- a/packages/theming/theming-utils/src/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { getCurrentAppearance, isHighContrast, setIsHighContrast } from '@fluentui-react-native/design/theming'; -export { mapPipelineToTheme, mapFontPipelineToTheme } from './mapPipelineToTheme'; -export { mapPipelineToShadow } from './mapPipelineToShadow'; diff --git a/packages/theming/win32-theme/package.json b/packages/theming/win32-theme/package.json index d7b636a9f62..e18c318f8e3 100644 --- a/packages/theming/win32-theme/package.json +++ b/packages/theming/win32-theme/package.json @@ -36,9 +36,7 @@ "@fluentui-react-native/default-theme": "workspace:*", "@fluentui-react-native/design": "workspace:*", "@fluentui-react-native/design-tokens-win32": "catalog:", - "@fluentui-react-native/framework-base": "workspace:*", - "@fluentui-react-native/theme-tokens": "workspace:*", - "@fluentui-react-native/theming-utils": "workspace:*" + "@fluentui-react-native/framework-base": "workspace:*" }, "devDependencies": { "@babel/core": "catalog:", diff --git a/packages/theming/win32-theme/src/createBrandedThemeWithAlias.ts b/packages/theming/win32-theme/src/createBrandedThemeWithAlias.ts index 38768b55928..fa97b553377 100644 --- a/packages/theming/win32-theme/src/createBrandedThemeWithAlias.ts +++ b/packages/theming/win32-theme/src/createBrandedThemeWithAlias.ts @@ -1,6 +1,6 @@ import type { ColorValue } from 'react-native'; -import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import { globalTokens } from '@fluentui-react-native/design/tokens/legacy'; import type { Theme, PartialTheme, AliasColorTokens } from '@fluentui-react-native/design/theming'; export function createBrandedThemeWithAlias(themeName: string, theme: Theme): PartialTheme { diff --git a/packages/theming/win32-theme/src/createFontAliasTokens.ts b/packages/theming/win32-theme/src/createFontAliasTokens.ts index f9e830394ae..0bb272bf6e6 100644 --- a/packages/theming/win32-theme/src/createFontAliasTokens.ts +++ b/packages/theming/win32-theme/src/createFontAliasTokens.ts @@ -1,6 +1,6 @@ import { memoize } from '@fluentui-react-native/framework-base'; import type { Variants } from '@fluentui-react-native/design/theming'; -import { mapFontPipelineToTheme } from '@fluentui-react-native/theming-utils'; +import { mapFontPipelineToTheme } from '@fluentui-react-native/design/theming'; import { getOfficeAliasTokens } from './getOfficeTokens'; diff --git a/packages/theming/win32-theme/src/createOfficeAliasTokens.ts b/packages/theming/win32-theme/src/createOfficeAliasTokens.ts index cad1af2b180..0b4f447d5d6 100644 --- a/packages/theming/win32-theme/src/createOfficeAliasTokens.ts +++ b/packages/theming/win32-theme/src/createOfficeAliasTokens.ts @@ -1,6 +1,6 @@ import { memoize } from '@fluentui-react-native/framework-base'; import type { AliasColorTokens, ThemeShadowDefinition } from '@fluentui-react-native/design/theming'; -import { mapPipelineToShadow, mapPipelineToTheme } from '@fluentui-react-native/theming-utils'; +import { mapPipelineToShadow, mapPipelineToTheme } from '@fluentui-react-native/design/theming'; import { getOfficeAliasTokens, getOfficeShadowTokens } from './getOfficeTokens'; diff --git a/packages/theming/win32-theme/tsconfig.json b/packages/theming/win32-theme/tsconfig.json index 9458a86aa93..6fc8279a147 100644 --- a/packages/theming/win32-theme/tsconfig.json +++ b/packages/theming/win32-theme/tsconfig.json @@ -20,12 +20,6 @@ }, { "path": "../../../scripts/tsconfig.json" - }, - { - "path": "../theme-tokens/tsconfig.json" - }, - { - "path": "../theming-utils/tsconfig.json" } ] } diff --git a/packages/utils/test-tools/package.json b/packages/utils/test-tools/package.json index d127dcd0731..c0feef283db 100644 --- a/packages/utils/test-tools/package.json +++ b/packages/utils/test-tools/package.json @@ -44,6 +44,7 @@ "react-test-renderer": "19.1.4" }, "peerDependencies": { + "@office-iss/react-native-win32": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0", "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.4", "react": "18.2.0 || 19.0.0 || 19.1.4", "react-native": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.6", @@ -51,6 +52,9 @@ "react-native-windows": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0" }, "peerDependenciesMeta": { + "@office-iss/react-native-win32": { + "optional": true + }, "@types/react": { "optional": true }, diff --git a/packages/utils/tokens/README.md b/packages/utils/tokens/README.md deleted file mode 100644 index 76b89a8ac41..00000000000 --- a/packages/utils/tokens/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# Tokens - -This package contains functions that help resolve common tokens against a given theme to the final component settings. diff --git a/tsconfig.json b/tsconfig.json index a67a92e8ca3..a9e9136c2f9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -181,12 +181,6 @@ { "path": "packages/framework/framework/tsconfig.json" }, - { - "path": "packages/framework/theme/tsconfig.json" - }, - { - "path": "packages/framework/themed-stylesheet/tsconfig.json" - }, { "path": "packages/framework/use-slots/tsconfig.json" }, @@ -203,22 +197,31 @@ "path": "packages/native/Callout/tsconfig.json" }, { - "path": "packages/theming/android-theme/tsconfig.json" + "path": "packages/shim/theme-tokens/tsconfig.json" }, { - "path": "packages/theming/apple-theme/tsconfig.json" + "path": "packages/shim/theme-types/tsconfig.json" }, { - "path": "packages/theming/default-theme/tsconfig.json" + "path": "packages/shim/theme/tsconfig.json" + }, + { + "path": "packages/shim/themed-stylesheet/tsconfig.json" }, { - "path": "packages/theming/theme-tokens/tsconfig.json" + "path": "packages/shim/theming-utils/tsconfig.json" }, { - "path": "packages/theming/theme-types/tsconfig.json" + "path": "packages/shim/tokens/tsconfig.json" }, { - "path": "packages/theming/theming-utils/tsconfig.json" + "path": "packages/theming/android-theme/tsconfig.json" + }, + { + "path": "packages/theming/apple-theme/tsconfig.json" + }, + { + "path": "packages/theming/default-theme/tsconfig.json" }, { "path": "packages/theming/win32-theme/tsconfig.json" @@ -235,9 +238,6 @@ { "path": "packages/utils/test-tools/tsconfig.json" }, - { - "path": "packages/utils/tokens/tsconfig.json" - }, { "path": "scripts/tsconfig.json" } diff --git a/yarn.lock b/yarn.lock index 136dfcc408b..fd303e3e051 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2465,8 +2465,6 @@ __metadata: "@fluentui-react-native/design": "workspace:*" "@fluentui-react-native/framework-base": "workspace:*" "@fluentui-react-native/scripts": "workspace:*" - "@fluentui-react-native/theme-tokens": "workspace:*" - "@fluentui-react-native/theming-utils": "workspace:*" "@react-native-community/cli": "npm:^20.0.0" "@react-native-community/cli-platform-android": "npm:^20.0.0" "@react-native-community/cli-platform-ios": "npm:^20.0.0" @@ -2508,8 +2506,6 @@ __metadata: "@fluentui-react-native/experimental-appearance-additions": "workspace:*" "@fluentui-react-native/framework-base": "workspace:*" "@fluentui-react-native/scripts": "workspace:*" - "@fluentui-react-native/theme-tokens": "workspace:*" - "@fluentui-react-native/theming-utils": "workspace:*" "@react-native-community/cli": "npm:^20.0.0" "@react-native-community/cli-platform-android": "npm:^20.0.0" "@react-native-community/cli-platform-ios": "npm:^20.0.0" @@ -2552,7 +2548,6 @@ __metadata: "@fluentui-react-native/framework-base": "workspace:*" "@fluentui-react-native/icon": "workspace:*" "@fluentui-react-native/scripts": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@fluentui-react-native/use-styling": "workspace:*" "@office-iss/react-native-win32": "npm:^0.81.8" "@react-native-community/cli": "npm:^20.0.0" @@ -2603,7 +2598,6 @@ __metadata: "@fluentui-react-native/scripts": "workspace:*" "@fluentui-react-native/test-tools": "workspace:*" "@fluentui-react-native/text": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@fluentui-react-native/use-styling": "workspace:*" "@office-iss/react-native-win32": "npm:^0.81.8" "@react-native-community/cli": "npm:^20.0.0" @@ -2657,7 +2651,6 @@ __metadata: "@fluentui-react-native/styling-utils": "workspace:*" "@fluentui-react-native/test-tools": "workspace:*" "@fluentui-react-native/text": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@fluentui-react-native/use-styling": "workspace:*" "@office-iss/react-native-win32": "npm:^0.81.8" "@react-native-community/cli": "npm:^20.0.0" @@ -2752,7 +2745,6 @@ __metadata: "@fluentui-react-native/styling-utils": "workspace:*" "@fluentui-react-native/test-tools": "workspace:*" "@fluentui-react-native/text": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@fluentui-react-native/use-styling": "workspace:*" "@office-iss/react-native-win32": "npm:^0.81.8" "@react-native-community/cli": "npm:^20.0.0" @@ -2805,7 +2797,6 @@ __metadata: "@fluentui-react-native/scripts": "workspace:*" "@fluentui-react-native/test-tools": "workspace:*" "@fluentui-react-native/text": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@fluentui-react-native/use-styling": "workspace:*" "@office-iss/react-native-win32": "npm:^0.81.8" "@react-native-community/cli": "npm:^20.0.0" @@ -2931,6 +2922,7 @@ __metadata: "@babel/core": "catalog:" "@fluentui-react-native/adapters": "workspace:*" "@fluentui-react-native/callout": "workspace:*" + "@fluentui-react-native/design": "workspace:*" "@fluentui-react-native/focus-zone": "workspace:*" "@fluentui-react-native/framework-base": "workspace:*" "@fluentui-react-native/icon": "workspace:*" @@ -2938,7 +2930,6 @@ __metadata: "@fluentui-react-native/pressable": "workspace:*" "@fluentui-react-native/scripts": "workspace:*" "@fluentui-react-native/text": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@office-iss/react-native-win32": "npm:^0.81.8" "@react-native-community/cli": "npm:^20.0.0" "@react-native-community/cli-platform-android": "npm:^20.0.0" @@ -2987,8 +2978,6 @@ __metadata: "@fluentui-react-native/design": "workspace:*" "@fluentui-react-native/framework-base": "workspace:*" "@fluentui-react-native/scripts": "workspace:*" - "@fluentui-react-native/theme-tokens": "workspace:*" - "@fluentui-react-native/theming-utils": "workspace:*" "@office-iss/react-native-win32": "npm:^0.81.8" "@react-native-community/cli": "npm:^20.0.0" "@react-native-community/cli-platform-android": "npm:^20.0.0" @@ -3287,6 +3276,7 @@ __metadata: resolution: "@fluentui-react-native/design@workspace:packages/agentic/design" dependencies: "@babel/core": "catalog:" + "@fluentui-react-native/adapters": "workspace:*" "@fluentui-react-native/design-tokens-android": "catalog:" "@fluentui-react-native/design-tokens-ios": "catalog:" "@fluentui-react-native/design-tokens-macos": "catalog:" @@ -3302,18 +3292,22 @@ __metadata: "@rnx-kit/tools-filesystem": "npm:^0.2.0" "@types/react": "npm:~19.1.4" "@types/react-test-renderer": "npm:^19.1.0" + assert-never: "npm:^1.2.1" react: "npm:19.1.4" react-native: "npm:^0.81.6" react-native-macos: "npm:^0.81.0" react-native-windows: "npm:^0.81.0" react-test-renderer: "npm:19.1.4" peerDependencies: + "@office-iss/react-native-win32": ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0 "@types/react": ~18.2.0 || ~19.0.0 || ~19.1.4 react: 18.2.0 || 19.0.0 || 19.1.4 react-native: ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.6 react-native-macos: ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0 react-native-windows: ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0 peerDependenciesMeta: + "@office-iss/react-native-win32": + optional: true "@types/react": optional: true react-native-macos: @@ -3335,7 +3329,6 @@ __metadata: "@fluentui-react-native/scripts": "workspace:*" "@fluentui-react-native/test-tools": "workspace:*" "@fluentui-react-native/text": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@office-iss/react-native-win32": "npm:^0.81.8" "@react-native-community/cli": "npm:^20.0.0" "@react-native-community/cli-platform-android": "npm:^20.0.0" @@ -3715,10 +3708,10 @@ __metadata: "@babel/core": "catalog:" "@fluentui-react-native/button": "workspace:*" "@fluentui-react-native/contextual-menu": "workspace:*" + "@fluentui-react-native/design": "workspace:*" "@fluentui-react-native/framework": "workspace:*" "@fluentui-react-native/framework-base": "workspace:*" "@fluentui-react-native/scripts": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@office-iss/react-native-win32": "npm:^0.81.8" "@react-native-community/cli": "npm:^20.0.0" "@react-native-community/cli-platform-android": "npm:^20.0.0" @@ -3852,7 +3845,6 @@ __metadata: "@fluentui-react-native/framework": "workspace:*" "@fluentui-react-native/framework-base": "workspace:*" "@fluentui-react-native/scripts": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@fluentui-react-native/use-styling": "workspace:*" "@react-native-community/cli": "npm:^20.0.0" "@react-native-community/cli-platform-android": "npm:^20.0.0" @@ -4011,7 +4003,6 @@ __metadata: "@fluentui-react-native/design": "workspace:*" "@fluentui-react-native/framework-base": "workspace:*" "@fluentui-react-native/scripts": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@fluentui-react-native/use-slots": "workspace:*" "@fluentui-react-native/use-styling": "workspace:*" "@fluentui-react-native/use-tokens": "workspace:*" @@ -4106,7 +4097,6 @@ __metadata: "@fluentui-react-native/styling-utils": "workspace:*" "@fluentui-react-native/test-tools": "workspace:*" "@fluentui-react-native/text": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@fluentui-react-native/use-styling": "workspace:*" "@react-native-community/cli": "npm:^20.0.0" "@react-native-community/cli-platform-android": "npm:^20.0.0" @@ -4190,13 +4180,13 @@ __metadata: dependencies: "@babel/core": "catalog:" "@fluentui-react-native/adapters": "workspace:*" + "@fluentui-react-native/design": "workspace:*" "@fluentui-react-native/framework": "workspace:*" "@fluentui-react-native/framework-base": "workspace:*" "@fluentui-react-native/interactive-hooks": "workspace:*" "@fluentui-react-native/scripts": "workspace:*" "@fluentui-react-native/test-tools": "workspace:*" "@fluentui-react-native/text": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@fluentui-react-native/use-styling": "workspace:*" "@react-native-community/cli": "npm:^20.0.0" "@react-native-community/cli-platform-android": "npm:^20.0.0" @@ -4239,10 +4229,10 @@ __metadata: "@babel/core": "catalog:" "@fluentui-react-native/button": "workspace:*" "@fluentui-react-native/contextual-menu": "workspace:*" + "@fluentui-react-native/design": "workspace:*" "@fluentui-react-native/framework-base": "workspace:*" "@fluentui-react-native/icon": "workspace:*" "@fluentui-react-native/scripts": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@office-iss/react-native-win32": "npm:^0.81.8" "@react-native-community/cli": "npm:^20.0.0" "@react-native-community/cli-platform-android": "npm:^20.0.0" @@ -4297,7 +4287,6 @@ __metadata: "@fluentui-react-native/scripts": "workspace:*" "@fluentui-react-native/test-tools": "workspace:*" "@fluentui-react-native/text": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@fluentui-react-native/use-styling": "workspace:*" "@office-iss/react-native-win32": "npm:^0.81.8" "@react-native-community/cli": "npm:^20.0.0" @@ -4352,7 +4341,6 @@ __metadata: "@fluentui-react-native/scripts": "workspace:*" "@fluentui-react-native/test-tools": "workspace:*" "@fluentui-react-native/text": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@fluentui-react-native/use-styling": "workspace:*" "@office-iss/react-native-win32": "npm:^0.81.8" "@react-native-community/cli": "npm:^20.0.0" @@ -4438,7 +4426,6 @@ __metadata: "@fluentui-react-native/framework": "workspace:*" "@fluentui-react-native/framework-base": "workspace:*" "@fluentui-react-native/scripts": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@office-iss/react-native-win32": "npm:^0.81.8" "@react-native-community/cli": "npm:^20.0.0" "@react-native-community/cli-platform-android": "npm:^20.0.0" @@ -4478,11 +4465,11 @@ __metadata: dependencies: "@babel/core": "catalog:" "@fluentui-react-native/adapters": "workspace:*" + "@fluentui-react-native/design": "workspace:*" "@fluentui-react-native/framework": "workspace:*" "@fluentui-react-native/framework-base": "workspace:*" "@fluentui-react-native/persona-coin": "workspace:*" "@fluentui-react-native/scripts": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@react-native-community/cli": "npm:^20.0.0" "@react-native-community/cli-platform-android": "npm:^20.0.0" "@react-native-community/cli-platform-ios": "npm:^20.0.0" @@ -4605,7 +4592,6 @@ __metadata: "@fluentui-react-native/scripts": "workspace:*" "@fluentui-react-native/test-tools": "workspace:*" "@fluentui-react-native/text": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@fluentui-react-native/use-styling": "workspace:*" "@office-iss/react-native-win32": "npm:^0.81.8" "@react-native-community/cli": "npm:^20.0.0" @@ -4820,11 +4806,11 @@ __metadata: dependencies: "@babel/core": "catalog:" "@fluentui-react-native/adapters": "workspace:*" + "@fluentui-react-native/design": "workspace:*" "@fluentui-react-native/framework": "workspace:*" "@fluentui-react-native/framework-base": "workspace:*" "@fluentui-react-native/scripts": "workspace:*" "@fluentui-react-native/text": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@office-iss/react-native-win32": "npm:^0.81.0" "@react-native-community/cli": "npm:^20.0.0" "@react-native-community/cli-platform-android": "npm:^20.0.0" @@ -4896,7 +4882,6 @@ __metadata: "@fluentui-react-native/scripts": "workspace:*" "@fluentui-react-native/test-tools": "workspace:*" "@fluentui-react-native/text": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@fluentui-react-native/use-styling": "workspace:*" "@office-iss/react-native-win32": "npm:^0.81.8" "@react-native-community/cli": "npm:^20.0.0" @@ -4945,7 +4930,6 @@ __metadata: "@fluentui-react-native/scripts": "workspace:*" "@fluentui-react-native/test-tools": "workspace:*" "@fluentui-react-native/text": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@fluentui-react-native/use-styling": "workspace:*" "@office-iss/react-native-win32": "npm:^0.81.8" "@react-native-community/cli": "npm:^20.0.0" @@ -4996,12 +4980,15 @@ __metadata: react-native: "npm:^0.81.6" react-test-renderer: "npm:19.1.4" peerDependencies: + "@office-iss/react-native-win32": ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0 "@types/react": ~18.2.0 || ~19.0.0 || ~19.1.4 react: 18.2.0 || 19.0.0 || 19.1.4 react-native: ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.6 react-native-macos: ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0 react-native-windows: ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0 peerDependenciesMeta: + "@office-iss/react-native-win32": + optional: true "@types/react": optional: true react-native-macos: @@ -5059,9 +5046,6 @@ __metadata: "@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:*" @@ -5274,7 +5258,6 @@ __metadata: "@fluentui-react-native/interactive-hooks": "workspace:*" "@fluentui-react-native/scripts": "workspace:*" "@fluentui-react-native/test-tools": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@react-native-community/cli": "npm:^20.0.0" "@react-native-community/cli-platform-android": "npm:^20.0.0" "@react-native-community/cli-platform-ios": "npm:^20.0.0" @@ -5307,32 +5290,30 @@ __metadata: languageName: unknown linkType: soft -"@fluentui-react-native/theme-tokens@workspace:*, @fluentui-react-native/theme-tokens@workspace:packages/theming/theme-tokens": +"@fluentui-react-native/theme-tokens@workspace:packages/shim/theme-tokens": version: 0.0.0-use.local - resolution: "@fluentui-react-native/theme-tokens@workspace:packages/theming/theme-tokens" + resolution: "@fluentui-react-native/theme-tokens@workspace:packages/shim/theme-tokens" dependencies: "@babel/core": "catalog:" "@fluentui-react-native/design": "workspace:*" - "@fluentui-react-native/design-tokens-android": "catalog:" - "@fluentui-react-native/design-tokens-ios": "catalog:" - "@fluentui-react-native/design-tokens-win32": "catalog:" - "@fluentui-react-native/design-tokens-windows": "catalog:" "@fluentui-react-native/scripts": "workspace:*" "@react-native-community/cli": "npm:^20.0.0" "@react-native-community/cli-platform-android": "npm:^20.0.0" "@react-native-community/cli-platform-ios": "npm:^20.0.0" "@react-native/metro-config": "npm:^0.81.0" "@types/react": "npm:~19.1.4" - assert-never: "npm:^1.2.1" react: "npm:19.1.4" react-native: "npm:^0.81.6" peerDependencies: + "@office-iss/react-native-win32": ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0 "@types/react": ~18.2.0 || ~19.0.0 || ~19.1.4 react: 18.2.0 || 19.0.0 || 19.1.4 react-native: ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.6 react-native-macos: ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0 react-native-windows: ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0 peerDependenciesMeta: + "@office-iss/react-native-win32": + optional: true "@types/react": optional: true react-native-macos: @@ -5342,9 +5323,9 @@ __metadata: languageName: unknown linkType: soft -"@fluentui-react-native/theme-types@workspace:packages/theming/theme-types": +"@fluentui-react-native/theme-types@workspace:packages/shim/theme-types": version: 0.0.0-use.local - resolution: "@fluentui-react-native/theme-types@workspace:packages/theming/theme-types" + resolution: "@fluentui-react-native/theme-types@workspace:packages/shim/theme-types" dependencies: "@babel/core": "catalog:" "@fluentui-react-native/design": "workspace:*" @@ -5357,12 +5338,15 @@ __metadata: react: "npm:19.1.4" react-native: "npm:^0.81.6" peerDependencies: + "@office-iss/react-native-win32": ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0 "@types/react": ~18.2.0 || ~19.0.0 || ~19.1.4 react: 18.2.0 || 19.0.0 || 19.1.4 react-native: ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.6 react-native-macos: ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0 react-native-windows: ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0 peerDependenciesMeta: + "@office-iss/react-native-win32": + optional: true "@types/react": optional: true react-native-macos: @@ -5372,9 +5356,9 @@ __metadata: languageName: unknown linkType: soft -"@fluentui-react-native/theme@workspace:*, @fluentui-react-native/theme@workspace:packages/framework/theme": +"@fluentui-react-native/theme@workspace:packages/shim/theme": version: 0.0.0-use.local - resolution: "@fluentui-react-native/theme@workspace:packages/framework/theme" + resolution: "@fluentui-react-native/theme@workspace:packages/shim/theme" dependencies: "@babel/core": "catalog:" "@fluentui-react-native/design": "workspace:*" @@ -5388,12 +5372,15 @@ __metadata: react: "npm:19.1.4" react-native: "npm:^0.81.6" peerDependencies: + "@office-iss/react-native-win32": ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0 "@types/react": ~18.2.0 || ~19.0.0 || ~19.1.4 react: 18.2.0 || 19.0.0 || 19.1.4 react-native: ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.6 react-native-macos: ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0 react-native-windows: ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0 peerDependenciesMeta: + "@office-iss/react-native-win32": + optional: true "@types/react": optional: true react-native-macos: @@ -5403,12 +5390,12 @@ __metadata: languageName: unknown linkType: soft -"@fluentui-react-native/themed-stylesheet@workspace:*, @fluentui-react-native/themed-stylesheet@workspace:packages/framework/themed-stylesheet": +"@fluentui-react-native/themed-stylesheet@workspace:packages/shim/themed-stylesheet": version: 0.0.0-use.local - resolution: "@fluentui-react-native/themed-stylesheet@workspace:packages/framework/themed-stylesheet" + resolution: "@fluentui-react-native/themed-stylesheet@workspace:packages/shim/themed-stylesheet" dependencies: "@babel/core": "catalog:" - "@fluentui-react-native/framework-base": "workspace:*" + "@fluentui-react-native/design": "workspace:*" "@fluentui-react-native/scripts": "workspace:*" "@react-native-community/cli": "npm:^20.0.0" "@react-native-community/cli-platform-android": "npm:^20.0.0" @@ -5419,25 +5406,31 @@ __metadata: react: "npm:19.1.4" react-native: "npm:^0.81.6" peerDependencies: + "@office-iss/react-native-win32": ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0 "@types/react": ~18.2.0 || ~19.0.0 || ~19.1.4 react: 18.2.0 || 19.0.0 || 19.1.4 react-native: ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.6 + react-native-macos: ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0 + react-native-windows: ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0 peerDependenciesMeta: + "@office-iss/react-native-win32": + optional: true "@types/react": optional: true + react-native-macos: + optional: true + react-native-windows: + optional: true languageName: unknown linkType: soft -"@fluentui-react-native/theming-utils@workspace:*, @fluentui-react-native/theming-utils@workspace:packages/theming/theming-utils": +"@fluentui-react-native/theming-utils@workspace:packages/shim/theming-utils": version: 0.0.0-use.local - resolution: "@fluentui-react-native/theming-utils@workspace:packages/theming/theming-utils" + resolution: "@fluentui-react-native/theming-utils@workspace:packages/shim/theming-utils" dependencies: "@babel/core": "catalog:" "@fluentui-react-native/design": "workspace:*" - "@fluentui-react-native/design-tokens-win32": "catalog:" - "@fluentui-react-native/design-tokens-windows": "catalog:" "@fluentui-react-native/scripts": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@react-native-community/cli": "npm:^20.0.0" "@react-native-community/cli-platform-android": "npm:^20.0.0" "@react-native-community/cli-platform-ios": "npm:^20.0.0" @@ -5467,12 +5460,11 @@ __metadata: languageName: unknown linkType: soft -"@fluentui-react-native/tokens@workspace:*, @fluentui-react-native/tokens@workspace:packages/utils/tokens": +"@fluentui-react-native/tokens@workspace:packages/shim/tokens": version: 0.0.0-use.local - resolution: "@fluentui-react-native/tokens@workspace:packages/utils/tokens" + resolution: "@fluentui-react-native/tokens@workspace:packages/shim/tokens" dependencies: "@babel/core": "catalog:" - "@fluentui-react-native/adapters": "workspace:*" "@fluentui-react-native/design": "workspace:*" "@fluentui-react-native/scripts": "workspace:*" "@react-native-community/cli": "npm:^20.0.0" @@ -5673,8 +5665,6 @@ __metadata: "@fluentui-react-native/design-tokens-win32": "catalog:" "@fluentui-react-native/framework-base": "workspace:*" "@fluentui-react-native/scripts": "workspace:*" - "@fluentui-react-native/theme-tokens": "workspace:*" - "@fluentui-react-native/theming-utils": "workspace:*" "@office-iss/react-native-win32": "npm:^0.81.8" "@react-native-community/cli": "npm:^20.0.0" "@react-native-community/cli-platform-android": "npm:^20.0.0" @@ -10926,9 +10916,9 @@ __metadata: resolution: "@uifabricshared/foundation-tokens@workspace:packages/deprecated/foundation-tokens" dependencies: "@babel/core": "catalog:" + "@fluentui-react-native/design": "workspace:*" "@fluentui-react-native/framework-base": "workspace:*" "@fluentui-react-native/scripts": "workspace:*" - "@fluentui-react-native/tokens": "workspace:*" "@office-iss/react-native-win32": "npm:^0.81.0" "@react-native-community/cli": "npm:^20.0.0" "@react-native-community/cli-platform-android": "npm:^20.0.0" @@ -11023,12 +11013,15 @@ __metadata: react: "npm:19.1.4" react-native: "npm:^0.81.6" peerDependencies: + "@office-iss/react-native-win32": ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0 "@types/react": ~18.2.0 || ~19.0.0 || ~19.1.4 react: 18.2.0 || 19.0.0 || 19.1.4 react-native: ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0 react-native-macos: ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0 react-native-windows: ^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0 peerDependenciesMeta: + "@office-iss/react-native-win32": + optional: true "@types/react": optional: true react-native-macos: