From 38289bbda890b5eaf40af16fb9f9dd9a5925a5c5 Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Fri, 22 Jul 2022 09:17:43 -0700 Subject: [PATCH 1/7] for daisy: Can the default theme be the Web one (not Teams)? Web should be the first one selected by default. Teams is one option in the menu. --- .../theme-designer/src/components/Sidebar/Sidebar.tsx | 2 +- .../theme-designer/src/useThemeDesignerReducer.ts | 8 ++++---- .../theme-designer/src/utils/themeList.ts | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react-components/theme-designer/src/components/Sidebar/Sidebar.tsx b/packages/react-components/theme-designer/src/components/Sidebar/Sidebar.tsx index 85497401557e2..33f2697740a4f 100644 --- a/packages/react-components/theme-designer/src/components/Sidebar/Sidebar.tsx +++ b/packages/react-components/theme-designer/src/components/Sidebar/Sidebar.tsx @@ -90,7 +90,7 @@ export const Sidebar: React.FC = 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({ 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/themeList.ts b/packages/react-components/theme-designer/src/utils/themeList.ts index 4c7bdfb33078a..9cef3980efa3f 100644 --- a/packages/react-components/theme-designer/src/utils/themeList.ts +++ b/packages/react-components/theme-designer/src/utils/themeList.ts @@ -4,8 +4,8 @@ import { brandTeams, brandWeb } from './brandColors'; export type ThemeList = Record; export const themeList: ThemeList = { - Teams: { brand: brandTeams }, Web: { brand: brandWeb }, + Teams: { brand: brandTeams }, Custom: {}, }; From 15ba844ee3020cabafce61ca5afa12b894d7756c Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Fri, 22 Jul 2022 09:31:46 -0700 Subject: [PATCH 2/7] suggestion from dan: when he inputted his own custom Hex#, the color indicator to the right didn't change -- added rules to hex input --- .../theme-designer/src/components/Sidebar/Form.tsx | 5 ++++- .../theme-designer/src/components/Sidebar/Sidebar.tsx | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/react-components/theme-designer/src/components/Sidebar/Form.tsx b/packages/react-components/theme-designer/src/components/Sidebar/Form.tsx index ab34a0fe2e60f..48a5c2d72c5a8 100644 --- a/packages/react-components/theme-designer/src/components/Sidebar/Form.tsx +++ b/packages/react-components/theme-designer/src/components/Sidebar/Form.tsx @@ -89,7 +89,9 @@ export const Form: React.FC = 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, ''); + 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 => { const [isDark, setIsDark] = React.useState(false); const [formState, setFormState] = React.useState({ - keyColor: '#006bc7', + keyColor: '#0F6CBD', hueTorsion: 0, darkCp: 0.66, lightCp: 0.33, From dc09a2d9a422cd1fac40e5ec3efcb62f8a68ece8 Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Fri, 22 Jul 2022 09:38:10 -0700 Subject: [PATCH 3/7] remove teams theme --- .../components/ColorTokens/ColorTokens.tsx | 8 +-- .../theme-designer/src/utils/brandColors.ts | 66 ++++--------------- .../theme-designer/src/utils/themeList.ts | 3 +- 3 files changed, 19 insertions(+), 58 deletions(-) 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..5bead97cfb4f1 100644 --- a/packages/react-components/theme-designer/src/components/ColorTokens/ColorTokens.tsx +++ b/packages/react-components/theme-designer/src/components/ColorTokens/ColorTokens.tsx @@ -1,13 +1,13 @@ /* eslint-disable react/jsx-no-bind */ import * as React from 'react'; -import { makeStyles, teamsDarkTheme, teamsLightTheme, Button, Caption1 } from '@fluentui/react-components'; +import { makeStyles, webDarkTheme, webLightTheme, Button, Caption1 } from '@fluentui/react-components'; import type { Brands, Theme } 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; @@ -41,8 +41,8 @@ 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(); 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 9cef3980efa3f..82bce10f325c5 100644 --- a/packages/react-components/theme-designer/src/utils/themeList.ts +++ b/packages/react-components/theme-designer/src/utils/themeList.ts @@ -1,11 +1,10 @@ import { BrandVariants } from '@fluentui/react-components'; -import { brandTeams, brandWeb } from './brandColors'; +import { brandWeb } from './brandColors'; export type ThemeList = Record; export const themeList: ThemeList = { Web: { brand: brandWeb }, - Teams: { brand: brandTeams }, Custom: {}, }; From 05c95b5808e5ec245b29513b8297fc41e444e248 Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Fri, 22 Jul 2022 09:45:17 -0700 Subject: [PATCH 4/7] capitalize for consistency --- .../theme-designer/src/components/Palette/Palette.tsx | 2 +- .../theme-designer/src/components/Sidebar/Form.tsx | 2 +- packages/react-components/theme-designer/src/utils/toString.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) 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..2b5141a8355dd 100644 --- a/packages/react-components/theme-designer/src/components/Palette/Palette.tsx +++ b/packages/react-components/theme-designer/src/components/Palette/Palette.tsx @@ -58,7 +58,7 @@ export const Palette: React.FC = props => { Generated palette
{getBrands(props.brandColors).map(brandKey => { - const brandColor = props.brandColors[brandKey]; + const brandColor = props.brandColors[brandKey].toUpperCase(); const textColor = contrast(hex_to_sRGB(brandColor), hex_to_sRGB('#FFFFFF')) <= 4.5 ? 'black' : 'white'; return (
= props => { const handleKeyColorChange = (e: React.ChangeEvent) => { // check if the newly inputted hex code has a # - const newHexColor = '#' + e.target.value.replace(/\W/g, ''); + const newHexColor = '#' + e.target.value.replace(/\W/g, '').toUpperCase(); setKeyColor(newHexColor); }; const handleHueTorsionChange = (e: React.ChangeEvent) => { 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' ); }; From f1b4cf77176835cc33de76d4518849638fdca416 Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Fri, 22 Jul 2022 09:57:57 -0700 Subject: [PATCH 5/7] custom theme now applies to sidebar per dan's request --- .../theme-designer/src/ThemeDesigner.tsx | 8 ++++++-- .../src/components/ColorTokens/ColorTokens.tsx | 14 +++++++------- .../src/components/Content/Content.tsx | 16 +++++----------- .../src/components/Palette/Palette.tsx | 9 ++++++--- 4 files changed, 24 insertions(+), 23 deletions(-) diff --git a/packages/react-components/theme-designer/src/ThemeDesigner.tsx b/packages/react-components/theme-designer/src/ThemeDesigner.tsx index 278426ca9a5cb..3154838611bae 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 } from '@fluentui/react-components'; import { createContext } from '@fluentui/react-context-selector'; import { Nav } from './components/Nav/Nav'; import { Sidebar } from './components/Sidebar/Sidebar'; @@ -27,8 +27,12 @@ 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/Content/Content.tsx b/packages/react-components/theme-designer/src/components/Content/Content.tsx index dc2e7d337a5a5..cec997a1ce70b 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 2b5141a8355dd..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].toUpperCase(); + {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 (
Date: Fri, 22 Jul 2022 10:05:27 -0700 Subject: [PATCH 6/7] uppercase consistency --- .../components/ColorTokens/getOverridableTokenBrandColors.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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]; } From 95bfd9f00cfb36a26a72f3de4086d10755afa8eb Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Fri, 22 Jul 2022 14:52:00 -0700 Subject: [PATCH 7/7] revert sidebar change --- .../react-components/theme-designer/src/ThemeDesigner.tsx | 8 +++++--- .../theme-designer/src/components/Content/Content.tsx | 4 ++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/react-components/theme-designer/src/ThemeDesigner.tsx b/packages/react-components/theme-designer/src/ThemeDesigner.tsx index 3154838611bae..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 { 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'; @@ -32,12 +32,14 @@ export const ThemeDesigner: React.FC = props => { const overridenTheme = { ...theme, ...overrides }; return ( - +
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 cec997a1ce70b..118d49ad565b2 100644 --- a/packages/react-components/theme-designer/src/components/Content/Content.tsx +++ b/packages/react-components/theme-designer/src/components/Content/Content.tsx @@ -24,7 +24,7 @@ export const Content: React.FC = props => { const styles = useStyles(); return ( -
+ <> This tool is still a work in progress - colors are still subject to adjustment. @@ -34,6 +34,6 @@ export const Content: React.FC = props => {
-
+ ); };