Theme designer v9 #27861

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

micahgodbolt merged 123 commits into microsoft:master from ms-acalzaretto:theme-designer-v9

May 22, 2023

packages/react-components/theme-designer/etc/theme-designer.api.md

-Original file line number
+Diff line change
@@ Expand Up / @@ -6,7 +6,7 @@ @@
     import * as React_2 from 'react';
-    // @public
+    // @public (undocumented)
     export const ThemeDesigner: React_2.FC<ThemeDesignerProps>;
     // (No @packageDocumentation comment for this package)
@@ Expand Down @@

packages/react-components/theme-designer/src/Context/ThemeDesignerContext.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,196 @@
+    import * as React from 'react';
+    import type { BrandVariants, Theme } from '@fluentui/react-components';
+    import { createLightTheme } from '@fluentui/react-components';
+    import { brandWeb } from '../utils/brandColors';
+    import { getBrandTokensFromPalette } from '../utils/getBrandTokensFromPalette';
+    import { getOverridableTokenBrandColors } from '../utils/getOverridableTokenBrandColors';
+    import { Brands } from '@fluentui/react-theme';
+    import { createDarkThemeWithUpdatedMapping } from '../utils/getOverridableTokenBrandColors';
+    export type ColorOverrideBrands = Record<string, Brands>;
+    export type ColorOverridePayload = {
+      colorToken: string;
+      newColor: string;
+      brand: number;
+    };
+    export type CustomAttributes = {
+      keyColor: string;
+      hueTorsion: number;
+      vibrancy: number;
+    };
+    interface ThemeDesignerContextProps {
+      children: React.ReactNode;
+    }
+    type Action =
+      | { type: 'isDark'; payload: boolean }
+      | { type: 'override'; payload: Partial<Theme> }
+      | { type: 'reset' }
+      | { type: 'updateThemeWithCustomerAttributes'; payload: CustomAttributes }
+      | { type: 'addOverride'; payload: ColorOverridePayload }
+      | { type: 'themeName'; payload: string }
+      | { type: 'showExportPanel'; payload: boolean };
+    type Dispatch = (action: Action) => void;
+    export type ThemeDesignerState = {
+      themeName: string;
+      keyColorHex: string;
+      brand: BrandVariants;
+      theme: Theme;
+      themeWithOverrides: Theme;
+      isDark: boolean;
+      lightThemeOverrides: Partial<Theme>;
+      darkThemeOverrides: Partial<Theme>;
+      lightBrandOverrides: ColorOverrideBrands;
+      darkBrandOverrides: ColorOverrideBrands;
+      showExportPanel: boolean;
+    };
+    export const defaultThemePlaceholderName = 'myNewTheme';
+    export const initialThemeDesignerState: ThemeDesignerState = {
+      themeName: defaultThemePlaceholderName,
+      keyColorHex: '#0F6CBD',
+      brand: brandWeb,
+      theme: createLightTheme(brandWeb),
+      themeWithOverrides: createLightTheme(brandWeb),
+      isDark: false,
+      lightThemeOverrides: {},
+      darkThemeOverrides: {},
+      lightBrandOverrides: getOverridableTokenBrandColors(createLightTheme(brandWeb), brandWeb),
+      darkBrandOverrides: getOverridableTokenBrandColors(createDarkThemeWithUpdatedMapping(brandWeb), brandWeb),
+      showExportPanel: false,
+    };
+    export const ThemeDesignerContext = React.createContext<{ state: ThemeDesignerState; dispatch: Dispatch } | undefined>(
+      undefined,
+    );
+    const createCustomTheme = ({ hueTorsion, keyColor, vibrancy }: CustomAttributes): BrandVariants => {
+      return getBrandTokensFromPalette(keyColor, {
+        hueTorsion,
+        darkCp: vibrancy,
+        lightCp: vibrancy,
+      });
+    };
+    export const ThemeDesignerReducer = (state: ThemeDesignerState, action: Action): ThemeDesignerState => {
+      switch (action.type) {
+        case 'isDark':
+          const theme = action.payload ? createDarkThemeWithUpdatedMapping(state.brand) : createLightTheme(state.brand);
+          return {
+            ...state,
+            theme,
+            isDark: action.payload,
+            themeWithOverrides: {
+              ...theme,
+              ...(action.payload ? state.darkThemeOverrides : state.lightThemeOverrides),
+            },
+          };
+        case 'reset':
+          const resetTheme = state.isDark ? createDarkThemeWithUpdatedMapping(state.brand) : createLightTheme(state.brand);
+          return {
+            ...state,
+            theme: resetTheme,
+            themeWithOverrides: resetTheme,
+            lightThemeOverrides: {},
+            darkThemeOverrides: {},
+            lightBrandOverrides: getOverridableTokenBrandColors(
+              createDarkThemeWithUpdatedMapping(state.brand),
+              state.brand,
+            ),
+            darkBrandOverrides: getOverridableTokenBrandColors(createDarkThemeWithUpdatedMapping(state.brand), state.brand),
+          };
+        case 'updateThemeWithCustomerAttributes':
+          const newBrand = createCustomTheme(action.payload);
+          const newTheme = state.isDark ? createDarkThemeWithUpdatedMapping(newBrand) : createLightTheme(newBrand);
+          return {
+            ...state,
+            keyColorHex: action.payload.keyColor,
+            brand: newBrand,
+            theme: newTheme,
+            themeWithOverrides: newTheme,
+            lightThemeOverrides: {},
+            darkThemeOverrides: {},
+            // new overrides -- reset
+            lightBrandOverrides: getOverridableTokenBrandColors(createLightTheme(newBrand), newBrand),
+            darkBrandOverrides: getOverridableTokenBrandColors(createDarkThemeWithUpdatedMapping(newBrand), newBrand),
+          };
+        case 'addOverride':
+          if (state.isDark) {
+            const overrides = {
+              ...state.darkThemeOverrides,
+              // This overrides a THEME token to a new color
+              [action.payload.colorToken]: action.payload.newColor,
+            };
+            return {
+              ...state,
+              darkBrandOverrides: {
+                ...state.darkBrandOverrides,
+                // this is signifying for e.g. 'colorBrandBackground2' = 8 (which is the 8th sqaure in the color wheel)
+                [action.payload.colorToken]: action.payload.brand,
+              } as ColorOverrideBrands,
+              darkThemeOverrides: overrides,
+              themeWithOverrides: {
+                ...createDarkThemeWithUpdatedMapping(state.brand),
+                ...overrides,
+              },
+            };
+          } else {
+            const overrides = {
+              ...state.lightThemeOverrides,
+              // This overrides a THEME token to a new color
+              [action.payload.colorToken]: action.payload.newColor,
+            };
+            return {
+              ...state,
+              lightBrandOverrides: {
+                ...state.lightBrandOverrides,
+                // this is signifying for e.g. 'colorBrandBackground2' = 8 (which is the 8th sqaure in the color wheel)
+                [action.payload.colorToken]: action.payload.brand,
+              } as ColorOverrideBrands,
+              lightThemeOverrides: overrides,
+              themeWithOverrides: {
+                ...createLightTheme(state.brand),
+                ...overrides,
+              },
+            };
+          }
+        case 'themeName':
+          return {
+            ...state,
+            themeName: action.payload,
+          };
+        case 'showExportPanel':
+          return {
+            ...state,
+            showExportPanel: action.payload,
+          };
+        default:
+          return {
+            ...state,
+          };
+      }
+    };
+    export const useThemeDesigner = () => {
+      const context = React.useContext(ThemeDesignerContext);
+      if (context === undefined) {
+        throw new Error('useThemeDesigner must be used within a ThemeProvider Context');
+      }
+      return context;
+    };
+    export const ThemeDesignerContextProvider = ({ children }: ThemeDesignerContextProps) => {
+      const [state, dispatch] = React.useReducer(ThemeDesignerReducer, initialThemeDesignerState);
+      const value = { state, dispatch };
+      return <ThemeDesignerContext.Provider value={value}>{children}</ThemeDesignerContext.Provider>;
+    };

packages/react-components/theme-designer/src/ThemeDesigner.stories.mdx

-Original file line number
+Diff line change
@@ -1,6 +1,31 @@
     import { ThemeDesigner } from './index';
     import { Meta } from '@storybook/addon-docs';
-    <Meta title="ThemeDesigner" />
+    <Meta
+      title="ThemeDesigner"
+      parameters={{
+        showToolbar: false,
+        viewMode: 'canvas',
+        toolbar: {
+          hidden: true,
+          title: { hidden: true },
+          zoom: { hidden: true },
+          eject: { hidden: true },
+          copy: { hidden: true },
+          fullscreen: { hidden: true },
+          'storybook/fluentui-react-addon/strict-mode': { hidden: true },
+          'storybook/fluentui-react-addon/theme': { hidden: true },
+        },
+        backgrounds: {
+          disable: true,
+          grid: {
+            disable: true,
+          },
+          outline: {
+            disable: true,
+          },
+        },
+      }}
+    />
     <ThemeDesigner />

packages/react-components/theme-designer/src/ThemeDesigner.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,53 +1,23 @@
  
    import * as React from 'react';

    import type { ThemeDesignerProps } from './ThemeDesigner.types';

    import { useStaticStyles, useStyles } from './ThemeDesigner.styles';

    import { AppState, DispatchTheme, initialAppState, useThemeDesignerReducer } from './useThemeDesignerReducer';

    import { useStyles } from './ThemeDesigner.styles';

    import { ThemeDesignerContextProvider } from './Context/ThemeDesignerContext';

    import { FluentProvider, webLightTheme } from '@fluentui/react-components';

    import { createContext } from '@fluentui/react-context-selector';

    import { Nav } from './components/Nav/Nav';

    import { Header } from './components/Header/Header';

    import { Sidebar } from './components/Sidebar/Sidebar';

    import { Content } from './components/Content/Content';

    export type AppContextValue = {

      appState: AppState;

      dispatchAppState: React.Dispatch<DispatchTheme>;

      name: string;

      setName: React.Dispatch<React.SetStateAction<string>>;

    };

    // eslint-disable-next-line @fluentui/no-context-default-value

    export const AppContext = createContext<AppContextValue>({

      appState: initialAppState,

      dispatchAppState: () => null,

      name: 'Untitled',

      setName: () => null,

    });

    /**

     * ThemeDesigner component - TODO: add more docs

     */

    export const ThemeDesigner: React.FC<ThemeDesignerProps> = props => {

      const styles = useStyles();

      useStaticStyles();

      const [appState, dispatchAppState] = useThemeDesignerReducer();

      const [name, setName] = React.useState<string>('myTheme');

      const { darkOverrides, isDark, lightOverrides, theme } = appState;

      const overrides = isDark ? darkOverrides : lightOverrides;

      const overridenTheme = { ...theme, ...overrides };

      return (

        <FluentProvider theme={webLightTheme}>

          <AppContext.Provider value={{ appState, dispatchAppState, name, setName }}>

          <ThemeDesignerContextProvider>

            <div className={styles.root}>

              <Nav className={styles.nav} />

              <Header className={styles.nav} />

              <Sidebar className={styles.sidebar} />

              <FluentProvider theme={overridenTheme}>

                <Content className={styles.content} />

              </FluentProvider>

              <Content className={styles.content} />

            </div>

          </AppContext.Provider>

          </ThemeDesignerContextProvider>

        </FluentProvider>

      );

    };

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Theme designer v9 #27861

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!