Remove Caterpillar Custom Theme (#3903)

* remove caterpillar theme

* Change files

Author: gulnazsayed

apps/fluent-tester/src/theme/CustomThemes.ts

@@ -45,7 +45,7 @@ export class TesterThemeReference extends ThemeReference {
   constructor() {
     super(
       baseTheme,
-      (parent) => applyTheme(parent, this._themeName, this.options.appearance),
+      () => applyTheme(this._themeName, this.options.appearance),
       (parent) => applyBrand(parent, this._brand),
     );
     this.baseTheme = baseTheme;

apps/fluent-tester/src/theme/applyTheme.ts

@@ -1,63 +1,20 @@
-import type { PartialTheme, Theme, ThemeOptions } from '@fluentui-react-native/framework';
+import type { PartialTheme, ThemeOptions } from '@fluentui-react-native/framework';
 import { createOfficeTheme, getThemingModule } from '@fluentui-react-native/win32-theme';
 
-export type ThemeNames = 'Default' | 'Office' | 'Caterpillar' | 'Apple';
+export type ThemeNames = 'Default' | 'Office' | 'Apple';
 
 export const themeChoices = [
   { label: 'Default', value: 'Default' },
   { label: 'Office', value: 'Office' },
-  { label: 'Caterpillar', value: 'Caterpillar' },
 ];
 
-function applyCaterpillarTheme(parent: Theme): PartialTheme {
-  return parent.host?.appearance === 'dark'
-    ? {
-        colors: {
-          buttonBackground: '#111111',
-          buttonBackgroundHovered: '#ffcd11',
-          buttonBackgroundPressed: '#eeeeee',
-          buttonText: '#ffffff',
-          buttonTextPressed: '#111111',
-          buttonTextHovered: '#000000',
-        },
-        components: {
-          Button: {
-            borderWidth: 0,
-            tokens: {
-              borderWidth: 0,
-            },
-          },
-        },
-      }
-    : {
-        colors: {
-          buttonBackground: '#ffcd11',
-          buttonBackgroundHovered: '#111111',
-          buttonBackgroundPressed: '#eeeeee',
-          buttonText: '#000000',
-          buttonTextPressed: '#111111',
-          buttonTextHovered: '#ffffff',
-        },
-        components: {
-          Button: {
-            borderWidth: 0,
-            tokens: {
-              borderWidth: 0,
-            },
-          },
-        },
-      };
-}
-
 const themingModule = getThemingModule()[0];
 
 /** apply the currently active theme layering */
-export function applyTheme(parent: Theme, name: ThemeNames, appearance: ThemeOptions['appearance']): PartialTheme {
+export function applyTheme(name: ThemeNames, appearance: ThemeOptions['appearance']): PartialTheme {
   switch (name) {
     case 'Office':
       return themingModule ? createOfficeTheme({ appearance, paletteName: 'Dialogs_FluentSV' }).theme : {};
-    case 'Caterpillar':
-      return applyCaterpillarTheme(parent);
     default:
       return {};
   }

change/@fluentui-react-native-tester-0444468e-02e4-4977-8f7a-8c302e46282a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "remove caterpillar theme",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

docs/pages/Theming/CustomTheme.md

@@ -33,8 +33,6 @@ const theme = new ThemeReference(createDefaultTheme(),
 </ThemeProvider>
 ```
 
-A good example of a custom theme from our repo is [the Caterpillar theme in the Tester App](../../../apps/fluent-tester/src/theme/applyTheme.ts).
-
 ### `ThemeReference` from scratch
 
 You can create your own `ThemeReference` and pass it into the `ThemeProvider`. To create a `ThemeReference` you'll need to create a new instance of `ThemeReference`. You can find the type definition [here](../../../packages/framework/theme/src/themeReference.ts).