theme designer: suggestions from Paul (#23836)

* add new reducer to handle overrides

* fix dom failing to update correctly

* have colortokenslist update to reflect change in theme

* alphabetize tokens list

* add reset button

* indicator of change

* clean up code + fluentblocks color update

* Update yarn lock

* revert to old contrast

* remove dispatch within reducer

* Update packages/react-components/theme-designer/package.json

Co-authored-by: Tristan Watanabe <[email protected]>

* fluent-blocks/color update

* rename handleButtonClick to handleResetClick

* remove dispatchState from useColorOverrideReducer

* rename state to appState

* create type ColorOverrideBrands

* removing dispatchState and dispatchColorOverride from ColorTokensList's props in favor on an onChange event handler prop

* hoist useColorOverrideReducer

* move edittab form to usetab, changed theme reducer to no longer be hard coded

* continue editing code

* lint errors

* micah's suggestions

* fix custom overrides not showing up

Co-authored-by: Tristan Watanabe <[email protected]>

Author: emmayjiang

packages/react-components/theme-designer/package.json

@@ -34,7 +34,7 @@
     "tslib": "^2.1.0",
     "@fluentui/react-components": "^9.0.1",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluent-blocks/colors": "9.1.0",
+    "@fluent-blocks/colors": "9.2.0",
     "codesandbox-import-utils": "2.2.3",
     "@types/dedent": "0.7.0",
     "@fluentui/react-alert": "9.0.0-beta.5"

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

@@ -14,22 +14,16 @@ import { Content } from './components/Content/Content';
 export const ThemeDesigner: React.FC<ThemeDesignerProps> = props => {
   const styles = useStyles();
 
-  const [state, dispatchState] = useThemeDesignerReducer();
+  const [appState, dispatchAppState] = useThemeDesignerReducer();
 
-  const { brand, theme, isDark, overrides } = state;
+  const { brand, isDark, overrides } = appState;
 
   return (
     <FluentProvider theme={teamsLightTheme}>
       <div className={styles.root}>
         <Nav className={styles.nav} brand={brand} isDark={isDark} overrides={overrides} />
-        <Sidebar className={styles.sidebar} dispatchState={dispatchState} />
-        <Content
-          className={styles.content}
-          brand={brand}
-          theme={{ ...theme, ...overrides }}
-          isDark={state.isDark}
-          dispatchState={dispatchState}
-        />
+        <Sidebar className={styles.sidebar} dispatchAppState={dispatchAppState} />
+        <Content className={styles.content} appState={appState} dispatchAppState={dispatchAppState} />
       </div>
     </FluentProvider>
   );

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { AccessibilityList } from './AccessibilityList';
-import { Vec3, hex_to_sRGB } from '@fluent-blocks/colors';
-import { contrast } from '../../utils/csswg';
+import { contrast, hex_to_sRGB, Vec3 } from '@fluent-blocks/colors';
 import { Caption1, Theme } from '@fluentui/react-components';
 
 export interface AccessibilityCheckerProps {

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

@@ -1,62 +1,102 @@
+/* eslint-disable react/jsx-no-bind */
 import * as React from 'react';
 import { makeStyles } from '@griffel/react';
 import { ColorTokensList } from './ColorTokensList';
-import { Caption1 } from '@fluentui/react-components';
-import { Brands, BrandVariants, teamsLightTheme, Theme } from '@fluentui/react-theme';
+import { Button, Caption1 } from '@fluentui/react-components';
+import { Brands, BrandVariants, teamsLightTheme } from '@fluentui/react-theme';
 import { OverridableTokenBrandColors } from './OverridableTokenBrandColors';
 import { brandTeams } from '../../utils/brandColors';
-
 import type { DispatchTheme } from '../../useThemeDesignerReducer';
+import { themeNames } from '../../utils/themeList';
 
 export interface ColorTokensProps {
   className?: string;
-  isDark: boolean;
   brand: BrandVariants;
-  dispatchState: React.Dispatch<DispatchTheme>;
+  themeLabel: string;
+  dispatchAppState: React.Dispatch<DispatchTheme>;
 }
 
+export type ColorOverrideBrands = Record<string, Brands>;
+
+export type ColorOverrides = Record<string, ColorOverrideBrands>;
+
+export type DispatchColorOverrides = {
+  type: string;
+  colorToken?: string;
+  newValue?: Brands;
+};
+
+const getCurrentOverride = (themeLabel: string, colorOverride: ColorOverrides) => {
+  return colorOverride[themeLabel];
+};
+
+const initialColorOverride: ColorOverrides = Object.fromEntries(themeNames.map(currTheme => [currTheme, {}]));
+
 const useStyles = makeStyles({
   root: {},
   row: {
     display: 'grid',
-    gridTemplateColumns: '1fr 1fr 1fr',
+    gridTemplateColumns: '1fr 1fr 1fr .5fr',
     alignItems: 'center',
   },
 });
 
-const brandColors: Record<string, Brands> = OverridableTokenBrandColors(teamsLightTheme, brandTeams);
+const brandColors: ColorOverrideBrands = OverridableTokenBrandColors(teamsLightTheme, brandTeams);
 
 export const ColorTokens: React.FunctionComponent<ColorTokensProps> = props => {
   const styles = useStyles();
 
-  const { brand, dispatchState } = props;
-
-  const [overrideList, setOverrideList] = React.useState<Partial<Theme>>({});
+  const { brand, themeLabel, dispatchAppState } = props;
 
   const colorOverrideReducer: (
-    state: Record<string, Brands>,
-    action: { colorToken: string; newValue: Brands },
-  ) => Record<string, Brands> = (state, action) => {
-    const overrides = { ...state, [action.colorToken]: action.newValue };
-    setOverrideList({ ...overrideList, [action.colorToken]: brand[action.newValue] });
-    dispatchState({ type: 'Overrides', overrides: overrideList });
-    return overrides;
+    state: ColorOverrides,
+    action: { type: string; colorToken?: string; newValue?: Brands },
+  ) => ColorOverrides = (state, action) => {
+    switch (action.type) {
+      case 'Add Override':
+        if (!action.colorToken || !action.newValue) {
+          return state;
+        }
+        return {
+          ...state,
+          [themeLabel]: { ...state[themeLabel], [action.colorToken]: action.newValue },
+        };
+      case 'Reset Overrides':
+        return { ...state, [themeLabel]: {} };
+      case 'Reset Custom Overrides':
+        return { ...state, customLight: {}, customDark: {} };
+      default:
+        return state;
+    }
+  };
+
+  const [colorOverride, dispatchColorOverride] = React.useReducer(colorOverrideReducer, initialColorOverride);
+
+  const onNewOverride = (color: string, newColor: Brands) => {
+    dispatchAppState({ type: 'Override', overrides: { [color]: brand[newColor] } });
+    dispatchColorOverride({ type: 'Add Override', colorToken: color, newValue: newColor });
   };
 
-  const [colorOverrides, dispatchColorOverrides] = React.useReducer(colorOverrideReducer, {});
+  const handleResetClick = () => {
+    dispatchAppState({ type: 'Override' });
+    dispatchColorOverride({ type: 'Reset Overrides' });
+  };
 
   return (
     <div className={props.className}>
       <div className={styles.row}>
         <Caption1>Color tokens</Caption1>
         <Caption1>Assigned values</Caption1>
         <Caption1>Usage examples</Caption1>
+        <Button size="small" onClick={handleResetClick}>
+          Reset Customizations
+        </Button>
       </div>
       <ColorTokensList
         brand={brand}
         brandColors={brandColors}
-        colorOverrides={colorOverrides}
-        dispatchColorOverrides={dispatchColorOverrides}
+        colorOverride={getCurrentOverride(themeLabel, colorOverride)}
+        onNewOverride={onNewOverride}
       />
     </div>
   );

packages/react-components/theme-designer/src/components/ColorTokens/ColorTokensList.tsx

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { makeStyles } from '@griffel/react';
 import {
+  Badge,
   Divider,
   Menu,
   MenuButton,
@@ -18,12 +19,13 @@ import { Brands, BrandVariants } from '@fluentui/react-theme';
 import { CircleFilled } from '@fluentui/react-icons';
 
 import { usageList } from './UsageList';
+import { ColorOverrideBrands } from './ColorTokens';
 
 export interface ColorTokensListProps {
   brand: BrandVariants;
-  brandColors: Record<string, Brands>;
-  colorOverrides: Record<string, Brands>;
-  dispatchColorOverrides: React.Dispatch<{ colorToken: string; newValue: Brands }>;
+  brandColors: ColorOverrideBrands;
+  colorOverride: ColorOverrideBrands;
+  onNewOverride: (color: string, newColor: Brands) => void;
 }
 
 export interface ColorTokenRowProps {
@@ -46,10 +48,10 @@ const useStyles = makeStyles({
     paddingLeft: '5px',
     paddingRight: '5px',
     display: 'grid',
-    gridTemplateColumns: '1fr 1fr 1fr',
+    gridTemplateColumns: '15px 1fr 1fr 1.5fr',
     alignItems: 'center',
-    paddingTop: tokens.spacingVerticalXXXL,
-    paddingBottom: tokens.spacingVerticalXXXL,
+    paddingTop: tokens.spacingVerticalXL,
+    paddingBottom: tokens.spacingVerticalXL,
   },
 });
 
@@ -68,9 +70,9 @@ const ColorTokenRow: React.FunctionComponent<ColorTokenRowProps> = props => {
 
 export const ColorTokensList: React.FunctionComponent<ColorTokensListProps> = props => {
   const styles = useStyles();
-  const { brand, brandColors, colorOverrides, dispatchColorOverrides } = props;
 
-  const newColors = { ...brandColors, ...colorOverrides };
+  const { brand, brandColors, colorOverride, onNewOverride } = props;
+  const newColors = { ...brandColors, ...colorOverride };
 
   return (
     <div>
@@ -80,12 +82,17 @@ export const ColorTokensList: React.FunctionComponent<ColorTokensListProps> = pr
 
         const handleColorChange: MenuProps['onCheckedValueChange'] = (e, data) => {
           const newColor = parseInt(data.checkedItems[0] as string, 10) as Brands;
-          dispatchColorOverrides({ colorToken: color, newValue: newColor });
+          onNewOverride?.(color, newColor);
         };
 
+        const overridenTokens = Object.keys(colorOverride);
+
         return (
           <div key={color.toString()}>
             <div className={styles.row}>
+              <div className={styles.col}>
+                {overridenTokens.includes(color) ? <Badge appearance="filled" color="success" size="tiny" /> : <> </>}
+              </div>
               <div className={styles.col}>
                 <Subtitle2 className={styles.colorLabel}>{color}</Subtitle2>
                 <Subtitle2>Global.Color.Brand.{colorValue}</Subtitle2>

packages/react-components/theme-designer/src/components/ColorTokens/OverridableTokenBrandColors.ts

@@ -1,4 +1,5 @@
 import type { Brands, BrandVariants, Theme } from '@fluentui/react-theme';
+import { ColorOverrideBrands } from './ColorTokens';
 
 export const brandRamp: Brands[] = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160];
 
@@ -12,7 +13,7 @@ export const brandRamp: Brands[] = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110
  * @param brand The brand that the theme uses
  * @returns A list of color tokens whos values are overridable by the user
  */
-export const OverridableTokenBrandColors = (theme: Theme, brand: BrandVariants): Record<string, Brands> => {
+export const OverridableTokenBrandColors = (theme: Theme, brand: BrandVariants): ColorOverrideBrands => {
   const addList: string[] = ['colorNeutralStrokeAccessibleSelected'];
   const removeList: string[] = ['colorBrandBackgroundInverted', 'colorNeutralForegroundOnBrand'];
 
@@ -32,16 +33,28 @@ export const OverridableTokenBrandColors = (theme: Theme, brand: BrandVariants):
     );
   });
 
+  const sortedOverrideableColorTokens = overridableColorTokens.sort((a, b) => {
+    if (a.includes('Inverted') && b.includes('Inverted')) {
+      return a.localeCompare(b);
+    } else if (a.includes('Inverted')) {
+      return 1;
+    } else if (b.includes('Inverted')) {
+      return -1;
+    } else {
+      return a.localeCompare(b);
+    }
+  });
+
   // Flips the brand ramp to use the hex values as keys and the brand ramp colors as values for O(1) indexing
-  const hexColorToBrand: Record<string, Brands> = brandRamp.reduce((a: Record<string, Brands>, c, i) => {
+  const hexColorToBrand: ColorOverrideBrands = brandRamp.reduce((a: ColorOverrideBrands, c, i) => {
     a[brand[c]] = c;
     return a;
   }, {});
 
   // Create an assignment of color tokens to brand ramp colors given the hex value
-  const brandColors: Record<string, Brands> = {};
-  for (let i = 0; i < overridableColorTokens.length; i++) {
-    const key = overridableColorTokens[i];
+  const brandColors: ColorOverrideBrands = {};
+  for (let i = 0; i < sortedOverrideableColorTokens.length; i++) {
+    const key = sortedOverrideableColorTokens[i];
     const themeColor = ((theme as unknown) as Record<string, string>)[key];
     brandColors[key] = hexColorToBrand[themeColor];
   }

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

@@ -3,21 +3,17 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { Divider, FluentProvider, tokens } from '@fluentui/react-components';
 import { Alert } from '@fluentui/react-alert';
 
-import type { DispatchTheme } from '../../useThemeDesignerReducer';
+import type { AppState, DispatchTheme } from '../../useThemeDesignerReducer';
 
 import { Demo } from '../Demo/Demo';
 import { AccessibilityChecker } from '../AccessibilityChecker/AccessibilityChecker';
 import { Palette } from '../Palette/Palette';
 import { ColorTokens } from '../ColorTokens/ColorTokens';
 
-import { Theme, BrandVariants } from '@fluentui/react-theme';
-
 export interface ContentProps {
   className?: string;
-  brand: BrandVariants;
-  theme: Theme;
-  isDark: boolean;
-  dispatchState: React.Dispatch<DispatchTheme>;
+  appState: AppState;
+  dispatchAppState: React.Dispatch<DispatchTheme>;
 }
 
 const useStyles = makeStyles({
@@ -33,20 +29,21 @@ const useStyles = makeStyles({
 
 export const Content: React.FC<ContentProps> = props => {
   const styles = useStyles();
-  const { className, brand, theme, isDark, dispatchState } = props;
+  const { className, appState, dispatchAppState } = props;
+  const theme = { ...appState.theme, ...appState.overrides };
 
   return (
     <FluentProvider theme={theme}>
       <Alert intent="warning" action={{ appearance: 'transparent' }}>
         This tool is still a work in progress - colors are still subject to adjustment.
       </Alert>
       <div className={mergeClasses(styles.root, className)}>
-        <Palette brandColors={brand} />
+        <Palette brandColors={appState.brand} />
         <Demo theme={theme} />
         <Divider />
         <AccessibilityChecker theme={theme} />
         <Divider />
-        <ColorTokens isDark={isDark} brand={brand} dispatchState={dispatchState} />
+        <ColorTokens brand={appState.brand} themeLabel={appState.themeLabel} dispatchAppState={dispatchAppState} />
       </div>
     </FluentProvider>
   );