Skip to content

Commit cfef63e

Browse files
JasonVMoJason Morse
JasonVMo
and
Jason Morse
authored
Theming: Consolidate theme helpers (#4283)
* fix bad references in lockfile * consolidate theming utils * move dead packages to shim directory * add changeset * fix formatting * remove old references * update dependency profiles * add changeset for additional packages --------- Co-authored-by: Jason Morse <jasonmorse@Jasons-M1-Max.local>
1 parent 73bf7c4 commit cfef63e

257 files changed

Lines changed: 601 additions & 412 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.changeset/easy-cooks-work.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
"@uifabricshared/theming-react-native": patch
3+
"@uifabricshared/foundation-tokens": patch
4+
"@fluentui-react-native/contextual-menu": patch
5+
"@uifabricshared/theme-registry": patch
6+
"@fluentui-react-native/notification": patch
7+
"@uifabricshared/theming-ramp": patch
8+
"@fluentui-react-native/experimental-menu-button": patch
9+
"@fluentui-react-native/persona-coin": patch
10+
"@fluentui-react-native/themed-stylesheet": patch
11+
"@fluentui-react-native/menu-button": patch
12+
"@fluentui-react-native/radio-group": patch
13+
"@fluentui-react-native/android-theme": patch
14+
"@fluentui-react-native/default-theme": patch
15+
"@fluentui-react-native/experimental-shimmer": patch
16+
"@fluentui-react-native/checkbox": patch
17+
"@fluentui-react-native/dependency-profiles": patch
18+
"@fluentui-react-native/framework": patch
19+
"@fluentui-react-native/apple-theme": patch
20+
"@fluentui-react-native/win32-theme": patch
21+
"@fluentui-react-native/divider": patch
22+
"@fluentui-react-native/persona": patch
23+
"@fluentui-react-native/tablist": patch
24+
"@fluentui-react-native/theming-utils": patch
25+
"@fluentui-react-native/avatar": patch
26+
"@fluentui-react-native/button": patch
27+
"@fluentui-react-native/switch": patch
28+
"@fluentui-react-native/theme-tokens": patch
29+
"@fluentui-react-native/badge": patch
30+
"@fluentui-react-native/input": patch
31+
"@fluentui-react-native/stack": patch
32+
"@fluentui-react-native/theme-types": patch
33+
"@fluentui-react-native/chip": patch
34+
"@fluentui-react-native/link": patch
35+
"@fluentui-react-native/menu": patch
36+
"@fluentui-react-native/text": patch
37+
"@fluentui-react-native/design": patch
38+
"@fluentui-react-native/tokens": patch
39+
"@fluentui-react-native/theme": patch
40+
---
41+
42+
update package references to use consolidated package directly

‎.changeset/rich-pumas-try.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
"@uifabricshared/theming-react-native": patch
3+
"@uifabricshared/foundation-tokens": patch
4+
"@fluentui-react-native/contextual-menu": patch
5+
"@fluentui-react-native/notification": patch
6+
"@fluentui-react-native/experimental-menu-button": patch
7+
"@fluentui-react-native/persona-coin": patch
8+
"@fluentui-react-native/themed-stylesheet": patch
9+
"@fluentui-react-native/menu-button": patch
10+
"@fluentui-react-native/radio-group": patch
11+
"@fluentui-react-native/android-theme": patch
12+
"@fluentui-react-native/default-theme": patch
13+
"@fluentui-react-native/experimental-shimmer": patch
14+
"@fluentui-react-native/checkbox": patch
15+
"@fluentui-react-native/framework": patch
16+
"@fluentui-react-native/apple-theme": patch
17+
"@fluentui-react-native/win32-theme": patch
18+
"@fluentui-react-native/divider": patch
19+
"@fluentui-react-native/persona": patch
20+
"@fluentui-react-native/tablist": patch
21+
"@fluentui-react-native/theming-utils": patch
22+
"@fluentui-react-native/avatar": patch
23+
"@fluentui-react-native/button": patch
24+
"@fluentui-react-native/switch": patch
25+
"@fluentui-react-native/theme-tokens": patch
26+
"@fluentui-react-native/badge": patch
27+
"@fluentui-react-native/input": patch
28+
"@fluentui-react-native/stack": patch
29+
"@fluentui-react-native/theme-types": patch
30+
"@fluentui-react-native/chip": patch
31+
"@fluentui-react-native/link": patch
32+
"@fluentui-react-native/menu": patch
33+
"@fluentui-react-native/text": patch
34+
"@fluentui-react-native/design": patch
35+
"@fluentui-react-native/tokens": patch
36+
"@fluentui-react-native/theme": patch
37+
---
38+
39+
Consolidate theming utilities in the design package and move compatibility packages to the shim directory

‎.changeset/tidy-themes-consolidate.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
"@fluentui-react-native/design": patch
3+
"@fluentui-react-native/theme-tokens": patch
4+
"@fluentui-react-native/theme-types": patch
5+
"@fluentui-react-native/theme": patch
6+
"@fluentui-react-native/themed-stylesheet": patch
7+
"@fluentui-react-native/theming-utils": patch
8+
"@fluentui-react-native/tokens": patch
9+
---
10+
11+
Consolidate legacy theming and styling implementations into design submodules, deprecate their former packages as compatibility shims, and group those shims under `packages/shim`.

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ Documentation for Theming can be found in our docs file, or for more in depth do
8888
- [Theming Overview](./docs/pages/Theming/Basics.md)
8989
- [StyleSheets](./docs/pages/Theming/ThemedStylesheet.md)
9090
- [Customizing Theme Settings](./docs/pages/Theming/CustomTheme.md)
91-
- [Theme Reference](./packages/framework/theme/README.md)
91+
- [Theme Reference](./packages/shim/theme/README.md)
9292
- [Tokens](./packages/framework/use-tokens/README.md)
9393
- [Slots](./packages/framework/use-slots/README.md)
9494
- [Customize and Compose](./packages/framework/composition/README.md)

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@
2424
"format": "fluentui-scripts format",
2525
"prettier-fix": "fluentui-scripts prettier --fix true"
2626
},
27-
"dependencies": {},
27+
"dependencies": {
28+
"@fluentui-react-native/design": "workspace:*"
29+
},
2830
"devDependencies": {
2931
"@fluentui-react-native/framework-base": "workspace:*",
3032
"@fluentui-react-native/scripts": "workspace:*",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { componentName, ComponentNameTokens, ComponentNameSlotProps, ComponentNameProps } from './ComponentName.types';
22
import { Theme, UseStylingOptions, buildProps } from '@fluentui-react-native/framework';
3-
import { borderStyles, layoutStyles } from '@fluentui-react-native/tokens';
3+
import { borderStyles, layoutStyles } from '@fluentui-react-native/design/styling/tokens';
44
import { defaultComponentNameTokens } from './ComponentNameTokens';
55

66
export const componentNameStates: (keyof ComponentNameTokens)[] = ['small', 'medium', 'large'];

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ViewProps } from 'react-native';
22
import { TextProps } from '@fluentui-react-native/text';
3-
import { IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/tokens';
3+
import { IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/design/styling/tokens';
44

55
export const componentName = 'ComponentName';
66
/**

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,10 @@
44
"rootDir": "src",
55
"outDir": "lib"
66
},
7-
"include": ["src"]
7+
"include": ["src"],
8+
"references": [
9+
{
10+
"path": "../../agentic/design/tsconfig.json"
11+
}
12+
]
813
}

‎apps/tester-core/package.json‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,6 @@
7070
"@fluentui-react-native/switch": "workspace:*",
7171
"@fluentui-react-native/tablist": "workspace:*",
7272
"@fluentui-react-native/text": "workspace:*",
73-
"@fluentui-react-native/theme": "workspace:*",
74-
"@fluentui-react-native/theme-tokens": "workspace:*",
75-
"@fluentui-react-native/themed-stylesheet": "workspace:*",
7673
"@fluentui-react-native/tooltip": "workspace:*",
7774
"@fluentui-react-native/vibrancy-view": "workspace:*",
7875
"@fluentui-react-native/win32-theme": "workspace:*",

‎apps/tester-core/src/FluentTester.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { BASE_TESTPAGE, TESTPAGE_BUTTONS_SCROLLVIEWER, TESTPAGE_CONTENT_SCROLLVI
77
import { ROOT_VIEW } from '@fluentui-react-native/e2e-testing';
88
import type { Theme } from '@fluentui-react-native/framework';
99
import { useTheme } from '@fluentui-react-native/design/theming';
10-
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
10+
import { themedStyleSheet } from '@fluentui-react-native/design/styling/stylesheet';
1111

1212
import { fluentTesterStyles, mobileStyles } from './TestComponents/Common/styles';
1313
import { testProps } from './TestComponents/Common/TestProps';

0 commit comments

Comments
 (0)