diff --git a/packages/react-components/theme-designer/src/ThemeDesigner.tsx b/packages/react-components/theme-designer/src/ThemeDesigner.tsx index 278426ca9a5cb..e45c809fdd117 100644 --- a/packages/react-components/theme-designer/src/ThemeDesigner.tsx +++ b/packages/react-components/theme-designer/src/ThemeDesigner.tsx @@ -2,7 +2,7 @@ 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 { teamsLightTheme, FluentProvider } from '@fluentui/react-components'; +import { FluentProvider, webLightTheme } from '@fluentui/react-components'; import { createContext } from '@fluentui/react-context-selector'; import { Nav } from './components/Nav/Nav'; import { Sidebar } from './components/Sidebar/Sidebar'; @@ -27,13 +27,19 @@ export const ThemeDesigner: React.FC = props => { const [appState, dispatchAppState] = useThemeDesignerReducer(); + const { darkOverrides, isDark, lightOverrides, theme } = appState; + const overrides = isDark ? darkOverrides : lightOverrides; + const overridenTheme = { ...theme, ...overrides }; + return ( - +
diff --git a/packages/react-components/theme-designer/src/components/ColorTokens/ColorTokens.tsx b/packages/react-components/theme-designer/src/components/ColorTokens/ColorTokens.tsx index 043fa8b56def0..ab07d1ed5efd1 100644 --- a/packages/react-components/theme-designer/src/components/ColorTokens/ColorTokens.tsx +++ b/packages/react-components/theme-designer/src/components/ColorTokens/ColorTokens.tsx @@ -1,17 +1,15 @@ /* eslint-disable react/jsx-no-bind */ import * as React from 'react'; -import { makeStyles, teamsDarkTheme, teamsLightTheme, Button, Caption1 } from '@fluentui/react-components'; -import type { Brands, Theme } from '@fluentui/react-theme'; +import { makeStyles, webDarkTheme, webLightTheme, Button, Caption1 } from '@fluentui/react-components'; +import type { Brands } from '@fluentui/react-theme'; import { getOverridableTokenBrandColors } from './getOverridableTokenBrandColors'; -import { brandTeams } from '../../utils/brandColors'; import { themeNames } from '../../utils/themeList'; import { AccessibilityList } from './AccessibilityList'; import { AppContext } from '../../ThemeDesigner'; import { useContextSelector } from '@fluentui/react-context-selector'; +import { brandWeb } from '../../utils/brandColors'; -export interface ColorTokensProps { - theme: Theme; -} +export interface ColorTokensProps {} export type ColorOverrideBrands = Record; @@ -41,18 +39,20 @@ const useStyles = makeStyles({ }, }); -const lightBrandColors: ColorOverrideBrands = getOverridableTokenBrandColors(teamsLightTheme, brandTeams); -const darkBrandColors: ColorOverrideBrands = getOverridableTokenBrandColors(teamsDarkTheme, brandTeams); +const lightBrandColors: ColorOverrideBrands = getOverridableTokenBrandColors(webLightTheme, brandWeb); +const darkBrandColors: ColorOverrideBrands = getOverridableTokenBrandColors(webDarkTheme, brandWeb); export const ColorTokens: React.FunctionComponent = props => { const styles = useStyles(); - const { theme } = props; const appState = useContextSelector(AppContext, ctx => ctx.appState); + const { brand, darkOverrides, isDark, lightOverrides, theme, themeName } = appState; const dispatchAppState = useContextSelector(AppContext, ctx => ctx.dispatchAppState); - const { brand, isDark, themeName } = appState; const brandColors = isDark ? darkBrandColors : lightBrandColors; + const overrides = isDark ? darkOverrides : lightOverrides; + const overridenTheme = { ...theme, ...overrides }; + const themeLabel = themeName + (isDark ? 'Dark' : 'Light'); const colorOverrideReducer: ( @@ -117,7 +117,7 @@ export const ColorTokens: React.FunctionComponent = props => { brandColors={brandColors} colorOverride={getCurrentOverride(themeLabel, colorOverride)} onNewOverride={onNewOverride} - theme={theme} + theme={overridenTheme} /> ); diff --git a/packages/react-components/theme-designer/src/components/ColorTokens/getOverridableTokenBrandColors.ts b/packages/react-components/theme-designer/src/components/ColorTokens/getOverridableTokenBrandColors.ts index bdf165bec76a8..213a79c7e9fc1 100644 --- a/packages/react-components/theme-designer/src/components/ColorTokens/getOverridableTokenBrandColors.ts +++ b/packages/react-components/theme-designer/src/components/ColorTokens/getOverridableTokenBrandColors.ts @@ -59,7 +59,7 @@ export const getOverridableTokenBrandColors = (theme: Theme, brand: BrandVariant const brandColors: ColorOverrideBrands = {}; for (let i = 0; i < sortedOverrideableColorTokens.length; i++) { const key = sortedOverrideableColorTokens[i]; - const themeColor = ((theme as unknown) as Record)[key]; + const themeColor = ((theme as unknown) as Record)[key].toUpperCase(); brandColors[key] = hexColorToBrand[themeColor]; } diff --git a/packages/react-components/theme-designer/src/components/Content/Content.tsx b/packages/react-components/theme-designer/src/components/Content/Content.tsx index dc2e7d337a5a5..118d49ad565b2 100644 --- a/packages/react-components/theme-designer/src/components/Content/Content.tsx +++ b/packages/react-components/theme-designer/src/components/Content/Content.tsx @@ -1,11 +1,9 @@ import * as React from 'react'; -import { makeStyles, mergeClasses, shorthands, tokens, Divider, FluentProvider } from '@fluentui/react-components'; +import { makeStyles, mergeClasses, shorthands, tokens, Divider } from '@fluentui/react-components'; import { Alert } from '@fluentui/react-alert'; import { Demo } from '../Demo/Demo'; import { Palette } from '../Palette/Palette'; import { ColorTokens } from '../ColorTokens/ColorTokens'; -import { AppContext } from '../../ThemeDesigner'; -import { useContextSelector } from '@fluentui/react-context-selector'; export interface ContentProps { className?: string; @@ -25,21 +23,17 @@ const useStyles = makeStyles({ export const Content: React.FC = props => { const styles = useStyles(); - const { brand, darkOverrides, isDark, lightOverrides, theme } = useContextSelector(AppContext, ctx => ctx.appState); - const overrides = isDark ? darkOverrides : lightOverrides; - const overridenTheme = { ...theme, ...overrides }; - return ( - + <> This tool is still a work in progress - colors are still subject to adjustment.
- + - +
- + ); }; diff --git a/packages/react-components/theme-designer/src/components/Palette/Palette.tsx b/packages/react-components/theme-designer/src/components/Palette/Palette.tsx index 0b2e37cd612ac..41b9a8dd697ce 100644 --- a/packages/react-components/theme-designer/src/components/Palette/Palette.tsx +++ b/packages/react-components/theme-designer/src/components/Palette/Palette.tsx @@ -4,10 +4,11 @@ import { Button, Caption1, Text } from '@fluentui/react-components'; import { Brands, BrandVariants } from '@fluentui/react-theme'; import { contrast, hex_to_sRGB } from '@fluent-blocks/colors'; import { CopyRegular } from '@fluentui/react-icons'; +import { AppContext } from '../../ThemeDesigner'; +import { useContextSelector } from '@fluentui/react-context-selector'; export interface PaletteProps { className?: string; - brandColors: BrandVariants; } const hexCopyClassName = 'hexCopy'; @@ -53,12 +54,14 @@ const getBrands = (colors: BrandVariants): Brands[] => { export const Palette: React.FC = props => { const styles = useStyles(); + const { brand } = useContextSelector(AppContext, ctx => ctx.appState); + return (
Generated palette
- {getBrands(props.brandColors).map(brandKey => { - const brandColor = props.brandColors[brandKey]; + {getBrands(brand).map(brandKey => { + const brandColor = brand[brandKey].toUpperCase(); const textColor = contrast(hex_to_sRGB(brandColor), hex_to_sRGB('#FFFFFF')) <= 4.5 ? 'black' : 'white'; return (
= props => { }, [debouncedForm]); const handleKeyColorChange = (e: React.ChangeEvent) => { - setKeyColor(e.target.value); + // check if the newly inputted hex code has a # + const newHexColor = '#' + e.target.value.replace(/\W/g, '').toUpperCase(); + setKeyColor(newHexColor); }; const handleHueTorsionChange = (e: React.ChangeEvent) => { setHueTorsion(parseInt(e.target.value, 10)); @@ -113,6 +115,7 @@ export const Form: React.FC = props => { id={sidebarId + 'keyColor'} value={form.keyColor} onChange={handleKeyColorChange} + maxLength={7} />
= props => { setTab(data.value); }; - const [theme, setTheme] = React.useState('Teams'); + const [theme, setTheme] = React.useState('Web'); const [isDark, setIsDark] = React.useState(false); const [formState, setFormState] = React.useState({ - keyColor: '#006bc7', + keyColor: '#0F6CBD', hueTorsion: 0, darkCp: 0.66, lightCp: 0.33, diff --git a/packages/react-components/theme-designer/src/useThemeDesignerReducer.ts b/packages/react-components/theme-designer/src/useThemeDesignerReducer.ts index 3b681bca075d7..39dc2de0c2825 100644 --- a/packages/react-components/theme-designer/src/useThemeDesignerReducer.ts +++ b/packages/react-components/theme-designer/src/useThemeDesignerReducer.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { createDarkTheme, createLightTheme } from '@fluentui/react-components'; import { getBrandTokensFromPalette } from './utils/getBrandTokensFromPalette'; -import { brandTeams } from './utils/brandColors'; +import { brandWeb } from './utils/brandColors'; import type { BrandVariants, Theme } from '@fluentui/react-components'; import { themeList, themeNames } from './utils/themeList'; @@ -33,9 +33,9 @@ export type AppState = { }; export const initialAppState = { - themeName: 'Teams', - brand: brandTeams, - theme: createLightTheme(brandTeams), + themeName: 'Web', + brand: brandWeb, + theme: createLightTheme(brandWeb), isDark: false, lightOverrides: {}, darkOverrides: {}, diff --git a/packages/react-components/theme-designer/src/utils/brandColors.ts b/packages/react-components/theme-designer/src/utils/brandColors.ts index e3a9fe304e292..8336bdbde5efc 100644 --- a/packages/react-components/theme-designer/src/utils/brandColors.ts +++ b/packages/react-components/theme-designer/src/utils/brandColors.ts @@ -3,56 +3,18 @@ import type { BrandVariants } from '@fluentui/react-theme'; export const brandWeb: BrandVariants = { 10: `#061724`, 20: `#082338`, - 30: `#0a2e4a`, - 40: `#0c3b5e`, - 50: `#0e4775`, - 60: `#0f548c`, - 70: `#115ea3`, - 80: `#0f6cbd`, - 90: `#2886de`, - 100: `#479ef5`, - 110: `#62abf5`, - 120: `#77b7f7`, - 130: `#96c6fa`, - 140: `#b4d6fa`, - 150: `#cfe4fa`, - 160: `#ebf3fc`, -}; - -export const brandTeams: BrandVariants = { - 10: `#2b2b40`, - 20: `#2f2f4a`, - 30: `#333357`, - 40: `#383966`, - 50: `#3d3e78`, - 60: `#444791`, - 70: `#4f52b2`, - 80: `#5b5fc7`, - 90: `#7579eb`, - 100: `#7f85f5`, - 110: `#9299f7`, - 120: `#aab1fa`, - 130: `#b6bcfa`, - 140: `#c5cbfa`, - 150: `#dce0fa`, - 160: `#e8ebfa`, -}; - -export const brandOffice: BrandVariants = { - 10: `#29130b`, - 20: `#4d2415`, - 30: `#792000`, - 40: `#99482b`, - 50: `#a52c00`, - 60: `#c33400`, - 70: `#e06a3f`, - 80: `#d83b01`, - 90: `#dd4f1b`, - 100: `#fe7948`, - 110: `#ff865a`, - 120: `#ff9973`, - 130: `#e8825d`, - 140: `#ffb498`, - 150: `#f4beaa`, - 160: `#f9dcd1`, + 30: `#0A2E4A`, + 40: `#0C3B5E`, + 50: `#0E4775`, + 60: `#0F548C`, + 70: `#115EA3`, + 80: `#0F6CBD`, + 90: `#2886DE`, + 100: `#479EF5`, + 110: `#62ABF5`, + 120: `#77B7F7`, + 130: `#96C6FA`, + 140: `#B4D6FA`, + 150: `#CFE4FA`, + 160: `#EBF3FC`, }; diff --git a/packages/react-components/theme-designer/src/utils/themeList.ts b/packages/react-components/theme-designer/src/utils/themeList.ts index 4c7bdfb33078a..82bce10f325c5 100644 --- a/packages/react-components/theme-designer/src/utils/themeList.ts +++ b/packages/react-components/theme-designer/src/utils/themeList.ts @@ -1,10 +1,9 @@ import { BrandVariants } from '@fluentui/react-components'; -import { brandTeams, brandWeb } from './brandColors'; +import { brandWeb } from './brandColors'; export type ThemeList = Record; export const themeList: ThemeList = { - Teams: { brand: brandTeams }, Web: { brand: brandWeb }, Custom: {}, }; diff --git a/packages/react-components/theme-designer/src/utils/toString.ts b/packages/react-components/theme-designer/src/utils/toString.ts index 5d9d1a904f24a..3e804f9e68d0a 100644 --- a/packages/react-components/theme-designer/src/utils/toString.ts +++ b/packages/react-components/theme-designer/src/utils/toString.ts @@ -21,7 +21,7 @@ export const getBrandValues = (brand: BrandVariants, overrideList: Partial, spacer: string) => { return ( Object.keys(input).map(key => { - return '\n' + spacer + key + ': "' + input[key] + '"'; + return '\n' + spacer + key + ': "' + input[key].toUpperCase() + '"'; }) + '\n' ); };