From bd7711595b3e8b557e41e4d428890396e6730578 Mon Sep 17 00:00:00 2001 From: Levi Thomason Date: Tue, 12 Mar 2019 13:32:37 -0700 Subject: [PATCH 001/118] wip --- DESIGN_CONSIDERATIONS.md | 77 ++++++++ .../Variations/MenuExampleColor.shorthand.tsx | 35 ++++ .../MenuExamplePrimary.shorthand.tsx | 12 -- .../components/Menu/Variations/index.tsx | 6 +- packages/react/src/lib/renderComponent.tsx | 3 + .../components/Button/buttonVariables.ts | 6 +- .../components/Chat/chatMessageVariables.ts | 2 +- .../components/Divider/dividerVariables.ts | 2 +- .../components/Header/headerVariables.ts | 2 +- .../components/Input/inputVariables.ts | 6 +- .../components/Menu/menuVariables.ts | 6 +- .../components/Text/textVariables.ts | 6 +- .../src/themes/teams-dark/siteVariables.ts | 16 +- .../teams-high-contrast/siteVariables.ts | 14 +- packages/react/src/themes/teams/colors.ts | 169 +++++++++++++----- .../Attachment/attachmentVariables.ts | 4 +- .../components/Button/buttonVariables.ts | 28 +-- .../components/Chat/chatMessageVariables.ts | 2 +- .../teams/components/Chat/chatVariables.ts | 2 +- .../components/Divider/dividerVariables.ts | 4 +- .../components/Dropdown/dropdownVariables.ts | 4 +- .../Header/headerDescriptionVariables.ts | 2 +- .../teams/components/Icon/iconVariables.ts | 2 +- .../teams/components/Input/inputVariables.ts | 4 +- .../teams/components/Label/labelStyles.ts | 4 +- .../teams/components/Label/labelVariables.ts | 62 ++++++- .../components/List/listItemVariables.ts | 2 +- .../teams/components/Menu/menuItemStyles.ts | 74 ++++---- .../teams/components/Menu/menuStyles.ts | 15 +- .../teams/components/Menu/menuVariables.ts | 73 ++++---- .../components/Popup/popupContentVariables.ts | 2 +- .../RadioGroup/radioGroupItemVariables.ts | 2 +- .../components/Reaction/reactionVariables.ts | 2 +- .../teams/components/Text/textVariables.ts | 6 +- .../react/src/themes/teams/siteVariables.ts | 28 +-- packages/react/src/themes/types.ts | 26 +-- 36 files changed, 481 insertions(+), 229 deletions(-) create mode 100644 DESIGN_CONSIDERATIONS.md create mode 100644 docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx delete mode 100644 docs/src/examples/components/Menu/Variations/MenuExamplePrimary.shorthand.tsx diff --git a/DESIGN_CONSIDERATIONS.md b/DESIGN_CONSIDERATIONS.md new file mode 100644 index 0000000000..519d2d1532 --- /dev/null +++ b/DESIGN_CONSIDERATIONS.md @@ -0,0 +1,77 @@ +## Optimize APIs and patterns for developers over designers + +Why? +- There are thousands of them. The cost of features and bugs is far greater. + +How? +- Prefer readable and meaningful typed intellisense theme information, opposed to cryptic or unorganized theme information that requires lookups or design assistance to understand. +- Variable names should always resolve to the correct value for the current theme, automatically. +- All theme values should appear in intellisense everywhere they are accessible. Merge variable values, for instance, should appear in the variable prop of components. + +## No site variables in style functions + +Why? +Prevent developers from assigning colors which breaks theme switching. + +How? +- Consider hoisting colors out of site variables. +- Consumers define component variable object for each theme type (light/dark/contrast). +- Rely on consistent and comprehensive component variables and remove site variables from style arg all together. + +## If possible, allow design to own the theme + +Goals +- Design doesn't want to mock up dark / high contrast +- Ease of adding new themes types, (default, dark, ...someNewThing) + +Why? +- Time waste in transferring design updates. Design owns the responsibility but does not have the capability of updating styles. +- Developers should not try to (or be allowed) to do design work. It is slow and often comes out less than ideal. + +How? +- Try to remove processes in getting design updates into code. Ideally, design changes would safely appear in applications. + +Optimizations for designers at no expense to developers: +- Keep names consistent for sanity and learning what they mean. gray02 is always the same hex value, regardless of theme/usage. + + +*** + +### Style Problems + +- Style functions have complex deeply nested logic that is hard to update/maintain +- Variable files are full of dead variables that do nothing in the styles +- Cannot generate stylesheets due to lack of knowledge about what props trigger which style function code paths + +### Style Solution + +Write styles as cascading map of props object matchers to style objects. Compute and assign in order. +- Flattens stylesheets, removes all logic (since logic is prop based only) +- Enables automated unit testing of styles to ensure styles change on variable change. +- Enables computing css selectors for each style in order to generate a flat stylesheet. + +```jsx +const menuStyles = { + root: ({ props, variables }) => { + + return [ + [{ primary: true, active: true, underlined: true }, { + display: 'block', + color: variables.colors[props.color], + }], + + // Equivalent to CSS: + // .primary.active.underlined { + // display: block; + // color: 'purple'; + // } + ] + } +} +``` + +## Tests to add + +Resolve theme, throw on duplicate variable definitions: +- Dark theme defines text success color the same as the light theme it inherited from +- Resolve style functions, assert changes to each variable result in changed style (no unused variables) diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx new file mode 100644 index 0000000000..a29f2f37a3 --- /dev/null +++ b/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx @@ -0,0 +1,35 @@ +import * as React from 'react' +import { Menu, Provider } from '@stardust-ui/react' + +const items = [ + { key: 'editorials', content: 'Editorials' }, + { key: 'review', content: 'Reviews' }, + { key: 'events', content: 'Upcoming Events' }, +] + +const MenuExamplePrimary = () => ( + + Object.keys(theme.siteVariables.colorScheme).map(color => ( + + )) + } + /> +) + +export default MenuExamplePrimary diff --git a/docs/src/examples/components/Menu/Variations/MenuExamplePrimary.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExamplePrimary.shorthand.tsx deleted file mode 100644 index 4115417db8..0000000000 --- a/docs/src/examples/components/Menu/Variations/MenuExamplePrimary.shorthand.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import * as React from 'react' -import { Menu } from '@stardust-ui/react' - -const items = [ - { key: 'editorials', content: 'Editorials' }, - { key: 'review', content: 'Reviews' }, - { key: 'events', content: 'Upcoming Events' }, -] - -const MenuExamplePrimary = () => - -export default MenuExamplePrimary diff --git a/docs/src/examples/components/Menu/Variations/index.tsx b/docs/src/examples/components/Menu/Variations/index.tsx index 9ccf38a86e..fb599be57f 100644 --- a/docs/src/examples/components/Menu/Variations/index.tsx +++ b/docs/src/examples/components/Menu/Variations/index.tsx @@ -14,9 +14,9 @@ const Variations = () => ( examplePath="components/Menu/Variations/MenuExampleVerticalPointing" /> (config: RenderConfig

): React.ReactElem const unhandledProps = getUnhandledProps({ handledProps }, props) const colors = generateColorScheme(stateAndProps.color, resolvedVariables.colorScheme) + // const scheme = { + // background: + // } const styleParam: ComponentStyleFunctionParam = { props: stateAndProps, diff --git a/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts b/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts index 69f6a6a6e6..7c411b24d2 100644 --- a/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts @@ -17,9 +17,9 @@ export default (siteVars: any): Partial => { primaryBorderColorFocusIndicator: siteVars.colors.white, circularColorActive: siteVars.black, - circularBackgroundColorActive: siteVars.gray02, - circularBackgroundColorHover: siteVars.gray03, - circularBackgroundColorFocus: siteVars.gray02, + circularBackgroundColorActive: siteVars.colors.grey.dark02, + circularBackgroundColorHover: siteVars.colors.grey.dark03, + circularBackgroundColorFocus: siteVars.colors.grey.dark02, circularBorderColorFocusIndicator: siteVars.black, } } diff --git a/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts index 9228d1ab1d..8b83bea145 100644 --- a/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts @@ -2,7 +2,7 @@ import { ChatMessageVariables } from '../../../teams/components/Chat/chatMessage export default (siteVars: any): Partial => { return { - backgroundColor: siteVars.gray10, + backgroundColor: siteVars.colors.grey.dark10, backgroundColorMine: '#3B3C54', color: siteVars.colors.white, contentFocusOutlineColor: siteVars.brand, diff --git a/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts b/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts index 218bc7bdb9..b45929a240 100644 --- a/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts @@ -4,5 +4,5 @@ export default (siteVars: any): Partial => ({ colors: { primary: siteVars.brand06, }, - textColor: siteVars.gray02, + textColor: siteVars.colors.grey.dark02, }) diff --git a/packages/react/src/themes/teams-dark/components/Header/headerVariables.ts b/packages/react/src/themes/teams-dark/components/Header/headerVariables.ts index a1b3a92073..4c5d417ad4 100644 --- a/packages/react/src/themes/teams-dark/components/Header/headerVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Header/headerVariables.ts @@ -3,6 +3,6 @@ import { HeaderVariables } from '../../../teams/components/Header/headerVariable export default (siteVars: any): Partial => { return { color: siteVars.colors.white, - descriptionColor: siteVars.gray02, + descriptionColor: siteVars.colors.grey.dark02, } } diff --git a/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts b/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts index 6882243c45..25a16d4cc7 100644 --- a/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts @@ -1,8 +1,8 @@ export default (siteVars: any) => { return { - backgroundColor: siteVars.gray10, - fontColor: siteVars.gray02, + backgroundColor: siteVars.colors.grey.dark10, + fontColor: siteVars.colors.grey.dark02, inputFocusBorderColor: siteVars.brand, - iconColor: siteVars.gray02, + iconColor: siteVars.colors.grey.dark02, } } diff --git a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts index 4f5937ea75..68fa6b3d25 100644 --- a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts @@ -7,10 +7,10 @@ export default (siteVars: any): Partial => ({ focusedBorder: `solid ${pxToRem(1)} ${siteVars.colors.white}`, focusedBackgroundColor: 'transparent', - hoverBackgroundColor: siteVars.gray08, + hoverBackgroundColor: siteVars.colors.grey.dark08, activeColor: siteVars.colors.white, - activeBackgroundColor: siteVars.gray08, + activeBackgroundColor: siteVars.colors.grey.dark08, - verticalBackgroundColor: siteVars.gray10, + verticalBackgroundColor: siteVars.colors.grey.dark10, }) diff --git a/packages/react/src/themes/teams-dark/components/Text/textVariables.ts b/packages/react/src/themes/teams-dark/components/Text/textVariables.ts index bcd36687e8..f635d15903 100644 --- a/packages/react/src/themes/teams-dark/components/Text/textVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Text/textVariables.ts @@ -3,10 +3,10 @@ import { TeamsTextVariables } from '../../../teams/components/Text/textVariables export default (siteVariables): Partial => ({ atMentionMeColor: siteVariables.orange04, atMentionOtherColor: siteVariables.brand06, - disabledColor: siteVariables.gray06, + disabledColor: siteVariables.colors.grey.dark06, errorColor: siteVariables.red, importantColor: siteVariables.red, successColor: siteVariables.green04, - timestampColor: siteVariables.gray04, - timestampHoverColor: siteVariables.gray02, + timestampColor: siteVariables.colors.grey.dark04, + timestampHoverColor: siteVariables.colors.grey.dark02, }) diff --git a/packages/react/src/themes/teams-dark/siteVariables.ts b/packages/react/src/themes/teams-dark/siteVariables.ts index 6064d903db..c3709f90c9 100644 --- a/packages/react/src/themes/teams-dark/siteVariables.ts +++ b/packages/react/src/themes/teams-dark/siteVariables.ts @@ -5,14 +5,14 @@ import { colors, naturalColors } from '../teams/siteVariables' // export const black = '#201f1f' // no mapping color -export const gray02 = '#c8c6c4' // light theme gray06 -export const gray03 = '#b3b0ad' // no mapping color -export const gray04 = '#8a8886' // no mapping color -export const gray06 = '#605e5c' // light theme gray03 -export const gray08 = '#484644' // light theme gray02 -export const gray09 = '#3b3a39' // no mapping color -export const gray10 = '#323130' // no mapping color -export const gray14 = '#292828' // no mapping color +// export const gray02 = '#c8c6c4' // light theme gray06 +// export const gray03 = '#b3b0ad' // no mapping color +// export const gray04 = '#8a8886' // no mapping color +// export const gray06 = '#605e5c' // light theme gray03 +// export const gray08 = '#484644' // light theme gray02 +// export const gray09 = '#3b3a39' // no mapping color +// export const gray10 = '#323130' // no mapping color +// export const gray14 = '#292828' // no mapping color export const brand = '#6264A7' // light theme brand - primary[500] export const brand02 = '#e2e2f6' // light theme brand14 - primary[100] diff --git a/packages/react/src/themes/teams-high-contrast/siteVariables.ts b/packages/react/src/themes/teams-high-contrast/siteVariables.ts index cd209dd30c..56d870feb4 100644 --- a/packages/react/src/themes/teams-high-contrast/siteVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/siteVariables.ts @@ -3,8 +3,6 @@ import { colors, naturalColors } from '../teams/siteVariables' // // COLORS // -export const black = '#000' -export const white = '#fff' export const accessibleYellow = '#ffff01' export const accessibleGreen = '#3ff23f' @@ -18,18 +16,18 @@ export const green04 = naturalColors.lightGreen[900] // // TODO: bcalvery - color alone is not an adequate means for differentiating in an accessible way. export const successStatusBackgroundColor = accessibleGreen -export const successStatusTextColor = black +export const successStatusTextColor = colors.grey.fullBlack export const infoStatusBackgroundColor = accessibleCyan -export const infoStatusTextColor = black +export const infoStatusTextColor = colors.grey.fullBlack export const warningStatusBackgroundColor = accessibleYellow -export const warningStatusTextColor = black +export const warningStatusTextColor = colors.grey.fullBlack export const errorStatusBackgroundColor = red -export const errorStatusTextColor = black +export const errorStatusTextColor = colors.grey.fullBlack export const unknownStatusBackgroundColor = colors.white -export const unknownStatusTextColor = black +export const unknownStatusTextColor = colors.grey.fullBlack // // SEMANTIC ASSIGNMENTS // -export const bodyBackground = black +export const bodyBackground = colors.grey.fullBlack export const bodyColor = colors.white diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index 2c39552e00..e727df1b64 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -39,16 +39,26 @@ export const naturalColors: NaturalColors = { 900: '#237B4B', // siteVariables.green04 }, grey: { - 50: '#FFFFFF', // siteVariables.white - 100: '#E6E6E6', - 200: '#CDCCCC', - 300: '#B8B8B8', - 400: '#A2A2A2', - 500: '#8C8C8C', - 600: '#747373', - 700: '#5F5E5E', - 800: '#404040', - 900: '#252424', // siteVariables.black + fullWhite: '#ffffff', + // fullBlack: '#000000', + + light02: '#484644', + light03: '#605E5C', + light04: '#979593', + light06: '#C8C6C4', + light08: '#E1DFDD', + light09: '#EDEBE9', + light10: '#F3F2F1', + light14: '#FAF9F8', + + dark02: '#c8c6c4', + dark03: '#b3b0ad', + dark04: '#8a8886', + dark06: '#605e5c', + // dark08: '#484644', + dark09: '#3b3a39', + dark10: '#323130', + dark14: '#292828', }, orange: { 50: '#FEF9F7', @@ -166,40 +176,117 @@ export const colors: ColorPalette = { // Primitive colors black: '#000', - white: naturalColors.grey[50], // siteVariables.white + white: naturalColors.grey.light14, // siteVariables.white } -const primitiveColorsScheme: Record = { - black: { - foreground: colors.white, - border: colors.white, - shadow: colors.white, - background: colors.black, +export const colorScheme: ColorSchemeMapping = { + undefined: { + foregroundUndefined: colors.grey.light14, + backgroundUndefined: colors.grey.light02, + borderUndefined: colors.grey.light02, + shadowUndefined: colors.grey.light02, + + foregroundHover: colors.grey.light14, + backgroundHover: colors.grey.light02, + borderHover: colors.grey.light02, + shadowHover: colors.grey.light02, + + foregroundActive: colors.grey.light14, + backgroundActive: colors.grey.light02, + borderActive: colors.grey.light02, + shadowActive: colors.grey.light02, + + foregroundFocus: colors.grey.light14, + backgroundFocus: colors.grey.light02, + borderFocus: colors.grey.light02, + shadowFocus: colors.grey.light02, + + foregroundFocusWithin: colors.grey.light14, + backgroundFocusWithin: colors.grey.light02, + borderFocusWithin: colors.grey.light02, + shadowFocusWithin: colors.grey.light02, + + foregroundDisabled: colors.grey.light14, + backgroundDisabled: colors.grey.light02, + borderDisabled: colors.grey.light02, + shadowDisabled: colors.grey.light02, }, - white: { - foreground: colors.black, - border: colors.black, - shadow: colors.black, - background: colors.white, + + red: { + // red02: colors.red[500], + // red57: colors.red[500], + // lightUndefined: colors.red[50], + // lightUndefined: colors.red[50], + // lightUndefined: colors.red[50], + // lightUndefined: colors.red[50], + // lightUndefined: colors.red[50], + // lightUndefined: colors.red[50], + // lightUndefined: colors.red[50], + // Undefined: colors.red[50], + // darkUndefined: colors.red[50], + // darkerUndefined: colors.red[500], + // darkestUndefined: colors.red[500], + + foregroundUndefined: colors.red[50], + backgroundUndefined: colors.red[500], + borderUndefined: colors.red[500], + shadowUndefined: colors.red[500], + + foregroundHover: colors.red[50], + backgroundHover: colors.red[500], + borderHover: colors.red[500], + shadowHover: colors.red[500], + + foregroundActive: colors.red[50], + backgroundActive: colors.red[500], + borderActive: colors.red[500], + shadowActive: colors.red[500], + + foregroundFocus: colors.red[50], + backgroundFocus: colors.red[500], + borderFocus: colors.red[500], + shadowFocus: colors.red[500], + + foregroundFocusWithin: colors.red[50], + backgroundFocusWithin: colors.red[500], + borderFocusWithin: colors.red[500], + shadowFocusWithin: colors.red[500], + + foregroundDisabled: colors.red[50], + backgroundDisabled: colors.red[500], + borderDisabled: colors.red[500], + shadowDisabled: colors.red[500], }, -} -export const colorScheme: ColorSchemeMapping = { - ...primitiveColorsScheme, - ..._.mapValues(emphasisAndNaturalColors, (colorVariants, colorName) => { - const foreground = isLightBackground(colorName) ? colors.black : colorVariants[50] - - return { - foreground, - border: foreground, - shadow: foreground, - background: colorVariants[500], - default: { - foreground: colors.grey[600], - border: colors.grey[600], - shadow: colors.grey[600], - background: colors.grey[100], - }, - } - }), + green: { + foregroundUndefined: colors.green[50], + backgroundUndefined: colors.green[500], + borderUndefined: colors.green[500], + shadowUndefined: colors.green[500], + + foregroundHover: colors.green[50], + backgroundHover: colors.green[500], + borderHover: colors.green[500], + shadowHover: colors.green[500], + + foregroundActive: colors.green[50], + backgroundActive: colors.green[500], + borderActive: colors.green[500], + shadowActive: colors.green[500], + + foregroundFocus: colors.green[50], + backgroundFocus: colors.green[500], + borderFocus: colors.green[500], + shadowFocus: colors.green[500], + + foregroundFocusWithin: colors.green[50], + backgroundFocusWithin: colors.green[500], + borderFocusWithin: colors.green[500], + shadowFocusWithin: colors.green[500], + + foregroundDisabled: colors.green[50], + backgroundDisabled: colors.green[500], + borderDisabled: colors.green[500], + shadowDisabled: colors.green[500], + }, } diff --git a/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts b/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts index 5da4610179..e7b4b45d60 100644 --- a/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts +++ b/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts @@ -26,8 +26,8 @@ export default siteVariables => ({ padding: pxToRem(8), iconSpace: pxToRem(12), - backgroundColor: siteVariables.gray09, - backgroundColorHover: siteVariables.gray08, + backgroundColor: siteVariables.colors.grey.light09, + backgroundColorHover: siteVariables.colors.grey.light08, textColor: siteVariables.colors.grey[900], progressColor: siteVariables.naturalColors.lightGreen[900], diff --git a/packages/react/src/themes/teams/components/Button/buttonVariables.ts b/packages/react/src/themes/teams/components/Button/buttonVariables.ts index 2fa892d1b9..3dd5a4c16e 100644 --- a/packages/react/src/themes/teams/components/Button/buttonVariables.ts +++ b/packages/react/src/themes/teams/components/Button/buttonVariables.ts @@ -83,15 +83,15 @@ export default (siteVars: any): ButtonVariables => { colorActive: siteVars.colors.grey[900], colorHover: siteVars.colors.grey[900], colorFocus: siteVars.colors.grey[900], - colorDisabled: siteVars.gray06, + colorDisabled: siteVars.colors.grey.light06, backgroundColor: siteVars.colors.white, - backgroundColorActive: siteVars.gray08, - backgroundColorHover: siteVars.gray14, - backgroundColorFocus: siteVars.gray08, - backgroundColorDisabled: siteVars.gray09, - borderColor: siteVars.gray08, - borderColorActive: siteVars.gray06, - borderColorHover: siteVars.gray06, + backgroundColorActive: siteVars.colors.grey.light08, + backgroundColorHover: siteVars.colors.grey.light14, + backgroundColorFocus: siteVars.colors.grey.light08, + backgroundColorDisabled: siteVars.colors.grey.light09, + borderColor: siteVars.colors.grey.light08, + borderColorActive: siteVars.colors.grey.light06, + borderColorHover: siteVars.colors.grey.light06, borderColorFocus: siteVars.colors.white, borderColorFocusIndicator: siteVars.colors.grey[900], borderColorDisabled: 'transparent', @@ -114,13 +114,13 @@ export default (siteVars: any): ButtonVariables => { primaryCircularBorderColorFocusIndicator: siteVars.colors.white, - circularColor: siteVars.gray02, + circularColor: siteVars.colors.grey.light02, circularColorActive: siteVars.colors.white, circularBackgroundColor: 'transparent', - circularBackgroundColorActive: siteVars.gray02, - circularBackgroundColorHover: siteVars.gray03, - circularBackgroundColorFocus: siteVars.gray03, - circularBorderColor: siteVars.gray02, + circularBackgroundColorActive: siteVars.colors.grey.light02, + circularBackgroundColorHover: siteVars.colors.grey.light03, + circularBackgroundColorFocus: siteVars.colors.grey.light03, + circularBorderColor: siteVars.colors.grey.light02, circularBorderColorActive: 'transparent', circularBorderColorHover: 'transparent', circularBorderColorFocus: 'transparent', @@ -130,7 +130,7 @@ export default (siteVars: any): ButtonVariables => { textColorHover: siteVars.brand04, textPrimaryColor: siteVars.colors.primary[500], textPrimaryColorHover: siteVars.brand04, - textSecondaryColor: siteVars.gray03, + textSecondaryColor: siteVars.colors.grey.light03, textSecondaryColorHover: siteVars.brand04, boxShadow: siteVars.shadowLevel1, diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts index b14e4a0b1f..02915cdaa1 100644 --- a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts @@ -47,5 +47,5 @@ export default (siteVars): ChatMessageVariables => ({ isImportantColor: siteVars.colors.red[900], badgeTextColor: siteVars.colors.white, reactionGroupMarginLeft: pxToRem(12), - timestampColorMine: siteVars.gray02, + timestampColorMine: siteVars.colors.grey.light02, }) diff --git a/packages/react/src/themes/teams/components/Chat/chatVariables.ts b/packages/react/src/themes/teams/components/Chat/chatVariables.ts index e95b64bfb8..e907801860 100644 --- a/packages/react/src/themes/teams/components/Chat/chatVariables.ts +++ b/packages/react/src/themes/teams/components/Chat/chatVariables.ts @@ -3,5 +3,5 @@ export interface ChatVariables { } export default (siteVars): ChatVariables => ({ - backgroundColor: siteVars.gray10, + backgroundColor: siteVars.colors.grey.light10, }) diff --git a/packages/react/src/themes/teams/components/Divider/dividerVariables.ts b/packages/react/src/themes/teams/components/Divider/dividerVariables.ts index 653d857d5d..1cb8591116 100644 --- a/packages/react/src/themes/teams/components/Divider/dividerVariables.ts +++ b/packages/react/src/themes/teams/components/Divider/dividerVariables.ts @@ -19,8 +19,8 @@ export default (siteVars: any): DividerVariables => { return { colors: mapColorsToScheme(siteVars, colorVariant), - dividerColor: siteVars.gray09, - textColor: siteVars.gray03, + dividerColor: siteVars.colors.grey.light09, + textColor: siteVars.colors.grey.light03, textFontSize: siteVars.fontSizeSmall, textLineHeight: siteVars.lineHeightSmall, importantFontWeight: siteVars.fontWeightBold, diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts index dfab693f62..aef7456728 100644 --- a/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts +++ b/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts @@ -24,7 +24,7 @@ export interface DropdownVariables { const [_2px_asRem, _3px_asRem, _12px_asRem] = [2, 3, 12].map(v => pxToRem(v)) export default (siteVars): DropdownVariables => ({ - backgroundColor: siteVars.gray10, + backgroundColor: siteVars.colors.grey.light10, borderColorFocus: siteVars.colors.primary[500], borderRadius: `${_3px_asRem} ${_3px_asRem} ${_2px_asRem} ${_2px_asRem}`, borderWidth: `0 0 ${pxToRem(2)} 0`, @@ -34,7 +34,7 @@ export default (siteVars): DropdownVariables => ({ listBackgroundColor: siteVars.colors.white, listBorderRadius: _3px_asRem, listPadding: `${pxToRem(8)} 0`, - listBoxShadow: `0 .2rem .6rem 0 ${siteVars.gray06}`, + listBoxShadow: `0 .2rem .6rem 0 ${siteVars.colors.grey.light06}`, listMaxHeight: '20rem', listItemBackgroundColor: siteVars.colors.white, listItemBackgroundColorActive: siteVars.colors.primary[500], diff --git a/packages/react/src/themes/teams/components/Header/headerDescriptionVariables.ts b/packages/react/src/themes/teams/components/Header/headerDescriptionVariables.ts index c41a19513c..45d53d5a10 100644 --- a/packages/react/src/themes/teams/components/Header/headerDescriptionVariables.ts +++ b/packages/react/src/themes/teams/components/Header/headerDescriptionVariables.ts @@ -10,6 +10,6 @@ export default (siteVariables: any): HeaderDescriptionVariables => { const colorVariant = 500 return { colors: mapColorsToScheme(siteVariables, colorVariant), - color: siteVariables.gray04, + color: siteVariables.colors.grey.light04, } } diff --git a/packages/react/src/themes/teams/components/Icon/iconVariables.ts b/packages/react/src/themes/teams/components/Icon/iconVariables.ts index f86bba94ce..d6ac0c0835 100644 --- a/packages/react/src/themes/teams/components/Icon/iconVariables.ts +++ b/packages/react/src/themes/teams/components/Icon/iconVariables.ts @@ -29,7 +29,7 @@ export default (siteVars): IconVariables => ({ brandColor: siteVars.brandColor, secondaryColor: siteVars.colors.white, redColor: siteVars.colors.red[900], - disabledColor: siteVars.gray06, + disabledColor: siteVars.colors.grey.light06, horizontalSpace: pxToRem(10), }) diff --git a/packages/react/src/themes/teams/components/Input/inputVariables.ts b/packages/react/src/themes/teams/components/Input/inputVariables.ts index a42bc28bd2..6feb281b56 100644 --- a/packages/react/src/themes/teams/components/Input/inputVariables.ts +++ b/packages/react/src/themes/teams/components/Input/inputVariables.ts @@ -18,11 +18,11 @@ export interface InputVariables { } export default (siteVars): InputVariables => ({ - backgroundColor: siteVars.gray10, + backgroundColor: siteVars.colors.grey.light10, borderRadius: `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`, borderWidth: `0 0 ${pxToRem(2)} 0`, - fontColor: siteVars.gray02, + fontColor: siteVars.colors.grey.light02, fontSize: siteVars.fontSizes.medium, iconPosition: 'absolute', diff --git a/packages/react/src/themes/teams/components/Label/labelStyles.ts b/packages/react/src/themes/teams/components/Label/labelStyles.ts index a188c2dd21..58846a8d34 100644 --- a/packages/react/src/themes/teams/components/Label/labelStyles.ts +++ b/packages/react/src/themes/teams/components/Label/labelStyles.ts @@ -6,7 +6,9 @@ import { LabelProps } from '../../../../components/Label/Label' import { LabelVariables } from './labelVariables' const labelStyles: ComponentSlotStylesInput = { - root: ({ props: p, variables: v, colors }): ICSSInJSStyle => { + root: ({ props: p, variables: v }): ICSSInJSStyle => { + const colors = v.colorScheme[p.color as any] + return { display: 'inline-flex', alignItems: 'center', diff --git a/packages/react/src/themes/teams/components/Label/labelVariables.ts b/packages/react/src/themes/teams/components/Label/labelVariables.ts index 8f9256fc05..cd77d6bf93 100644 --- a/packages/react/src/themes/teams/components/Label/labelVariables.ts +++ b/packages/react/src/themes/teams/components/Label/labelVariables.ts @@ -1,5 +1,6 @@ import { pxToRem, getColorSchemeWithCustomDefaults } from '../../../../lib' import { ColorValues, ColorScheme, SiteVariablesPrepared } from '../../../types' +import { colors } from 'src/themes/teams/colors' type LabelColorScheme = Pick @@ -16,11 +17,66 @@ export interface LabelVariables { export default (siteVars: SiteVariablesPrepared): LabelVariables => { const color = 'rgba(0, 0, 0, 0.6)' - return { - colorScheme: getColorSchemeWithCustomDefaults(siteVars.colorScheme, { + const colorScheme = { + // ...getColorSchemeWithCustomDefaults(siteVars.colorScheme, { + // foreground: color, + // background: 'rgb(232, 232, 232)', + // }), + ...siteVars.colorScheme, + undefined: { + // foreground: 'red', + // background: 'red', foreground: color, background: 'rgb(232, 232, 232)', - }), + }, + grey: { + undefined: { + foreground: siteVars.colors.grey.light14, + background: siteVars.colors.grey.light02, + border: siteVars.colors.grey.light02, + shadow: siteVars.colors.grey.light02, + }, + active: { + foreground: siteVars.colors.grey.light14, + background: siteVars.colors.grey.light02, + border: siteVars.colors.grey.light02, + shadow: siteVars.colors.grey.light02, + }, + focus: { + foreground: siteVars.colors.grey.light14, + background: siteVars.colors.grey.light02, + border: siteVars.colors.grey.light02, + shadow: siteVars.colors.grey.light02, + }, + focusWithin: { + foreground: siteVars.colors.grey.light14, + background: siteVars.colors.grey.light02, + border: siteVars.colors.grey.light02, + shadow: siteVars.colors.grey.light02, + }, + hover: { + foreground: siteVars.colors.grey.light14, + background: siteVars.colors.grey.light02, + border: siteVars.colors.grey.light02, + shadow: siteVars.colors.grey.light02, + }, + disabled: { + foreground: siteVars.colors.grey.light14, + background: siteVars.colors.grey.light02, + border: siteVars.colors.grey.light02, + shadow: siteVars.colors.grey.light02, + }, + error: { + foreground: siteVars.colors.grey.light14, + background: siteVars.colors.grey.light02, + border: siteVars.colors.grey.light02, + shadow: siteVars.colors.grey.light02, + }, + }, + } + + return { + colorScheme, circularRadius: pxToRem(9999), padding: `0 ${pxToRem(4)} 0 ${pxToRem(4)}`, startPaddingLeft: '0px', diff --git a/packages/react/src/themes/teams/components/List/listItemVariables.ts b/packages/react/src/themes/teams/components/List/listItemVariables.ts index 21fd2f2c82..e572635695 100644 --- a/packages/react/src/themes/teams/components/List/listItemVariables.ts +++ b/packages/react/src/themes/teams/components/List/listItemVariables.ts @@ -55,7 +55,7 @@ export default (siteVariables: any): ListItemVariables => { selectableFocusHoverColor: siteVariables.white, selectableFocusHoverBackgroundColor: siteVariables.brand08, selectedColor: siteVariables.colors.grey[900], - selectedBackgroundColor: siteVariables.gray10, + selectedBackgroundColor: siteVariables.colors.grey.light10, selectedFocusOutlineColor: siteVariables.colors.primary[500], } } diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index 016c60ad99..2c6ac46d40 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -31,12 +31,12 @@ const getActionStyles = ({ } : primary ? { - color: v.primaryActiveColor, - background: v.primaryActiveBackgroundColor, + color: 'inherit', + background: v.backgroundColorActive, } : { color, - background: v.activeBackgroundColor, + background: v.backgroundColorActive, } const getFocusedStyles = ({ @@ -57,20 +57,24 @@ const getFocusedStyles = ({ } : primary ? { - color: v.primaryFocusedColor, - background: v.primaryFocusedBackgroundColor, + color: 'inherit', + background: v.backgroundColorFocus, } : { color, - background: v.hoverBackgroundColor, + background: v.backgroundColorHover, }), ...(vertical && isFromKeyboard && !pointing && !primary ? { - border: v.focusedBorder, - outline: v.focusedOutline, + borderWidth: 1, + borderStyle: 'solid', + borderColor: v.borderColorFocus, + outlineWidth: 1, + outlineStyle: 'solid', + outlineColor: v.outlineFocus, margin: pxToRem(1), - background: v.focusedBackgroundColor, + background: v.backgroundColorFocus, } : {}), } @@ -94,7 +98,7 @@ const itemSeparator: ComponentSlotStyleFunction { + root: ({ props: p, variables: v, theme }): ICSSInJSStyle => { const { iconOnly, fluid, pointing, pills, primary, underlined, vertical, submenu } = p + const colorScheme = theme.siteVariables.colorScheme[p.color] + // const verticalScheme = v[p.vertical].colorScheme + + console.log(colorScheme) return { display: 'flex', minHeight: pxToRem(24), margin: 0, padding: 0, + color: v.color || colorScheme.foregroundUndefined, + backgroundColor: v.backgroundColor || colorScheme.backgroundUndefined, listStyleType: 'none', ...(iconOnly && { alignItems: 'center' }), ...(vertical && { flexDirection: 'column', - backgroundColor: v.verticalBackgroundColor, + color: v.verticalColor || colorScheme.foregroundUndefined, + backgroundColor: v.verticalBackgroundColor || theme.siteVariables.colors.white, padding: `${pxToRem(8)} 0`, ...(submenu && { boxShadow: v.verticalBoxShadow, @@ -40,12 +47,12 @@ export default { !underlined && { border: `${v.borderWidth} solid ${v.borderColor}`, ...(primary && { - border: `${v.borderWidth} solid ${v.primaryBorderColor}`, + border: `${v.borderWidth} solid ${v.borderColor}`, }), borderRadius: pxToRem(4), }), ...(underlined && { - borderBottom: `${v.underlinedBottomBorderWidth} solid ${v.primaryUnderlinedBorderColor}`, + borderBottom: `${v.underlinedBottomBorderWidth} solid ${v.underlinedBorderColor}`, }), } }, diff --git a/packages/react/src/themes/teams/components/Menu/menuVariables.ts b/packages/react/src/themes/teams/components/Menu/menuVariables.ts index d7a4c315a2..032cc6bf8c 100644 --- a/packages/react/src/themes/teams/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams/components/Menu/menuVariables.ts @@ -1,35 +1,32 @@ import { pxToRem } from '../../../../lib' +import { ColorScheme } from 'src/themes/types' export interface MenuVariables { color: string - borderColor: string verticalBorderColor: string - focusedBorder: string - focusedOutline: string - focusedBackgroundColor: string - - hoverBackgroundColor: string + backgroundColor: string + backgroundColorFocus: string + backgroundColorHover: string + backgroundColorActive: string - activeColor: string - activeBackgroundColor: string - iconOnlyActiveColor: string - - primaryActiveColor: string - primaryActiveBackgroundColor: string - primaryActiveBorderColor: string + borderColor: string + borderColorHover: string + borderColorActive: string + borderColorFocus: string - primaryFocusedColor: string - primaryFocusedBackgroundColor: string + outlineFocus: string + colorActive: string + iconOnlyColorActive: string - primaryBorderColor: string - primaryHoverBorderColor: string - primaryUnderlinedBorderColor: string + colorFocus: string + underlinedBorderColor: string - disabledColor: string + colorDisabled: string lineHeightBase: string horizontalPadding: string + verticalColor: string verticalBackgroundColor: string verticalItemPadding: string verticalBoxShadow: string @@ -44,36 +41,34 @@ export interface MenuVariables { export default (siteVars: any): MenuVariables => { return { - color: siteVars.gray02, - borderColor: siteVars.gray08, - verticalBorderColor: siteVars.gray08, + color: siteVars.colors.grey.light02, + colorActive: siteVars.colors.black, + colorFocus: siteVars.colors.white, + colorDisabled: siteVars.colors.grey.light06, - focusedBorder: `solid ${pxToRem(1)} ${siteVars.colors.white}`, - focusedOutline: `solid ${pxToRem(1)} ${siteVars.colors.black}`, - focusedBackgroundColor: siteVars.gray09, + verticalBorderColor: siteVars.colors.grey.light08, - hoverBackgroundColor: siteVars.gray14, + borderColor: siteVars.colors.grey.light10, + borderColorHover: siteVars.colors.grey.light08, + borderColorActive: siteVars.colors.primary[500], + borderColorFocus: siteVars.colors.white, - activeColor: siteVars.colors.black, - activeBackgroundColor: siteVars.gray10, - iconOnlyActiveColor: siteVars.colors.primary[500], + outlineFocus: siteVars.colors.black, - primaryActiveColor: siteVars.colors.white, - primaryActiveBackgroundColor: siteVars.brand08, - primaryActiveBorderColor: siteVars.colors.primary[500], + backgroundColor: undefined, + backgroundColorFocus: siteVars.colors.grey.light09, + backgroundColorHover: siteVars.colors.grey.light14, + backgroundColorActive: siteVars.colors.grey.light10, - primaryFocusedColor: siteVars.colors.white, - primaryFocusedBackgroundColor: siteVars.colors.primary[200], + iconOnlyColorActive: siteVars.colors.primary[500], - primaryBorderColor: siteVars.gray10, - primaryHoverBorderColor: siteVars.gray08, - primaryUnderlinedBorderColor: siteVars.gray08, + underlinedBorderColor: siteVars.colors.grey.light08, - disabledColor: siteVars.gray06, lineHeightBase: siteVars.lineHeightMedium, horizontalPadding: `${pxToRem(14)} ${pxToRem(18)} ${pxToRem(14)} ${pxToRem(18)}`, - verticalBackgroundColor: siteVars.colors.white, + verticaldColor: undefined, + verticalBackgroundColor: undefined, verticalItemPadding: `${pxToRem(9)} ${pxToRem(16)} ${pxToRem(9)} ${pxToRem(16)}`, verticalBoxShadow: siteVars.shadowLevel3, verticalDividerMargin: `${pxToRem(8)} 0`, diff --git a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts index 2370966d1e..bb8581bd98 100644 --- a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts +++ b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts @@ -11,7 +11,7 @@ export interface PopupContentVariables { export default (siteVars: any): PopupContentVariables => { return { backgroundColor: siteVars.colors.white, - borderColor: siteVars.gray06, + borderColor: siteVars.colors.grey.light06, padding: `${pxToRem(10)} ${pxToRem(14)}`, } } diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts index 5064c4cad7..67c672e242 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts @@ -13,7 +13,7 @@ export type RadioGroupItemVariables = { export default (siteVars: any): RadioGroupItemVariables => ({ color: siteVars.colors.primary[500], colorChecked: siteVars.colors.white, - colorDisabled: siteVars.gray06, + colorDisabled: siteVars.colors.grey.light06, colorBorder: siteVars.colors.primary[500], colorBorderChecked: siteVars.colors.white, diff --git a/packages/react/src/themes/teams/components/Reaction/reactionVariables.ts b/packages/react/src/themes/teams/components/Reaction/reactionVariables.ts index 68c5b5d9ab..c4be597bcc 100644 --- a/packages/react/src/themes/teams/components/Reaction/reactionVariables.ts +++ b/packages/react/src/themes/teams/components/Reaction/reactionVariables.ts @@ -11,7 +11,7 @@ export interface ReactionVariables { } export default (siteVars): ReactionVariables => ({ - color: siteVars.gray03, + color: siteVars.colors.grey.light03, colorHover: siteVars.colors.grey[900], contentFontSize: siteVars.fontSizes.small, fontWeightHover: siteVars.fontWeightBold, diff --git a/packages/react/src/themes/teams/components/Text/textVariables.ts b/packages/react/src/themes/teams/components/Text/textVariables.ts index fbbd3199ae..50fae62fde 100644 --- a/packages/react/src/themes/teams/components/Text/textVariables.ts +++ b/packages/react/src/themes/teams/components/Text/textVariables.ts @@ -10,11 +10,11 @@ export default (siteVariables): Partial => ({ atMentionOtherColor: siteVariables.colors.primary[500], atMentionMeColor: siteVariables.naturalColors.darkOrange[400], atMentionMeFontWeight: siteVariables.fontWeightBold, - disabledColor: siteVariables.gray06, + disabledColor: siteVariables.colors.grey.light06, errorColor: siteVariables.colors.red[900], importantWeight: siteVariables.fontWeightBold, importantColor: siteVariables.colors.red[900], successColor: siteVariables.colors.green[900], - timestampColor: siteVariables.gray04, - timestampHoverColor: siteVariables.gray02, + timestampColor: siteVariables.colors.grey.light04, + timestampHoverColor: siteVariables.colors.grey.light02, }) diff --git a/packages/react/src/themes/teams/siteVariables.ts b/packages/react/src/themes/teams/siteVariables.ts index 5225ae026f..e36266f7eb 100644 --- a/packages/react/src/themes/teams/siteVariables.ts +++ b/packages/react/src/themes/teams/siteVariables.ts @@ -11,14 +11,14 @@ export const htmlFontSize = '10px' // what 1rem represents // export { colors, contextualColors, emphasisColors, naturalColors, colorScheme } from './colors' -export const gray02 = '#484644' // no mapping color -export const gray03 = '#605E5C' // no mapping color -export const gray04 = '#979593' // no mapping color -export const gray06 = '#C8C6C4' // no mapping color -export const gray08 = '#E1DFDD' // no mapping color -export const gray09 = '#EDEBE9' // no mapping color -export const gray10 = '#F3F2F1' // no mapping color -export const gray14 = '#FAF9F8' // no mapping color +// export const grey02 = '#484644' // no mapping color +// export const grey03 = '#605E5C' // no mapping color +// export const grey04 = '#979593' // no mapping color +// export const grey06 = '#C8C6C4' // no mapping color +// export const grey08 = '#E1DFDD' // no mapping color +// export const grey09 = '#EDEBE9' // no mapping color +// export const grey10 = '#F3F2F1' // no mapping color +// export const grey14 = '#FAF9F8' // no mapping color export const brand04 = '#464775' // no mapping color export const brand08 = '#8B8CC7' // no mapping color @@ -52,15 +52,15 @@ export const fontSizes = { // STATUS COLORS // export const successStatusBackgroundColor = naturalColors.lightGreen[900] -export const successStatusTextColor = colors.grey[50] +export const successStatusTextColor = colors.grey.fullWhite export const infoStatusBackgroundColor = 'blue' -export const infoStatusTextColor = colors.grey[50] +export const infoStatusTextColor = colors.grey.fullWhite export const warningStatusBackgroundColor = colors.yellow[900] -export const warningStatusTextColor = colors.grey[50] +export const warningStatusTextColor = colors.grey.fullWhite export const errorStatusBackgroundColor = colors.red[900] -export const errorStatusTextColor = colors.grey[50] -export const unknownStatusBackgroundColor = gray04 -export const unknownStatusTextColor = colors.grey[50] +export const errorStatusTextColor = colors.grey.fullWhite +export const unknownStatusBackgroundColor = colors.grey.light04 +export const unknownStatusTextColor = colors.grey.fullWhite // // FONT WEIGHTS diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts index 368cd36096..2ef3c28a06 100644 --- a/packages/react/src/themes/types.ts +++ b/packages/react/src/themes/types.ts @@ -17,19 +17,18 @@ import { Extendable, ObjectOf, ObjectOrFunc } from '../types' /** * A type for a palette for a single color. */ -export type ColorVariants = { - 50: string - 100: string - 200: string - 300: string - 400: string - 500: string - 600: string - 700: string - 800: string - 900: string -} - +export type ColorVariants = Extendable<{ + 50?: string + 100?: string + 200?: string + 300?: string + 400?: string + 500?: string + 600?: string + 700?: string + 800?: string + 900?: string +}> /** * A type for a predefined natural colors. */ @@ -100,6 +99,7 @@ export type ColorPalette = ExtendablePalette< * A type for the generic color scheme of a component based on CSS property names */ export type ColorScheme = { + [key: string]: any foreground: string background: string border: string From b4d5452f9e6b149607109c1043c549e5ae7add48 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 18 Mar 2019 12:53:43 +0100 Subject: [PATCH 002/118] -fixed compiling issues --- .../components/Menu/menuVariables.ts | 11 +++++----- .../components/Menu/menuItemStyles.ts | 20 +++++++++---------- .../components/Menu/menuVariables.ts | 6 +++--- packages/react/src/themes/teams/colors.ts | 19 +++++------------- .../teams/components/Label/labelVariables.ts | 9 +++------ .../components/Menu/menuDividerStyles.ts | 3 ++- .../teams/components/Menu/menuVariables.ts | 3 +-- 7 files changed, 29 insertions(+), 42 deletions(-) diff --git a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts index 68fa6b3d25..a1a0f8cdda 100644 --- a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts @@ -1,16 +1,15 @@ -import { pxToRem } from '../../../../lib' import { MenuVariables } from '../../../teams/components/Menu/menuVariables' export default (siteVars: any): Partial => ({ verticalBorderColor: siteVars.black, - focusedBorder: `solid ${pxToRem(1)} ${siteVars.colors.white}`, - focusedBackgroundColor: 'transparent', + borderColor: siteVars.colors.white, + backgroundColorFocus: 'transparent', - hoverBackgroundColor: siteVars.colors.grey.dark08, + backgroundColorHover: siteVars.colors.grey.dark08, - activeColor: siteVars.colors.white, - activeBackgroundColor: siteVars.colors.grey.dark08, + colorActive: siteVars.colors.white, + backgroundColorActive: siteVars.colors.grey.dark08, verticalBackgroundColor: siteVars.colors.grey.dark10, }) diff --git a/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts index c9e3aa6d45..db601dbac5 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts @@ -10,31 +10,31 @@ const menuItemStyles: ComponentSlotStylesInput => ({ color: siteVars.white, - activeColor: siteVars.black, - focusedBackgroundColor: siteVars.accessibleYellow, - activeBackgroundColor: siteVars.accessibleCyan, + colorActive: siteVars.black, + backgroundColorFocus: siteVars.accessibleYellow, + backgroundColorActive: siteVars.accessibleCyan, verticalBackgroundColor: siteVars.colors.black, }) diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index e727df1b64..a1702ada74 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -1,14 +1,4 @@ -import * as _ from 'lodash' - -import { - ColorPalette, - ContextualColors, - EmphasisColors, - NaturalColors, - ColorSchemeMapping, - PrimitiveColors, - ColorScheme, -} from '../types' +import { ColorPalette, ContextualColors, EmphasisColors, NaturalColors } from '../types' export const emphasisColors: EmphasisColors = { primary: { @@ -167,8 +157,8 @@ const emphasisAndNaturalColors: EmphasisColors & NaturalColors = { ...naturalColors, } -const lightBackgroundColors = ['orange', 'yellow', 'lightGreen', 'postOrange'] -const isLightBackground = (colorName: string) => _.includes(lightBackgroundColors, colorName) +// const lightBackgroundColors = ['orange', 'yellow', 'lightGreen', 'postOrange'] +// const isLightBackground = (colorName: string) => _.includes(lightBackgroundColors, colorName) export const colors: ColorPalette = { ...emphasisAndNaturalColors, @@ -179,7 +169,8 @@ export const colors: ColorPalette = { white: naturalColors.grey.light14, // siteVariables.white } -export const colorScheme: ColorSchemeMapping = { +// TODO: update typings +export const colorScheme: any = { undefined: { foregroundUndefined: colors.grey.light14, backgroundUndefined: colors.grey.light02, diff --git a/packages/react/src/themes/teams/components/Label/labelVariables.ts b/packages/react/src/themes/teams/components/Label/labelVariables.ts index cd77d6bf93..5cf123a784 100644 --- a/packages/react/src/themes/teams/components/Label/labelVariables.ts +++ b/packages/react/src/themes/teams/components/Label/labelVariables.ts @@ -1,11 +1,8 @@ -import { pxToRem, getColorSchemeWithCustomDefaults } from '../../../../lib' -import { ColorValues, ColorScheme, SiteVariablesPrepared } from '../../../types' -import { colors } from 'src/themes/teams/colors' - -type LabelColorScheme = Pick +import { pxToRem } from '../../../../lib' +import { SiteVariablesPrepared } from '../../../types' export interface LabelVariables { - colorScheme: ColorValues + colorScheme: any circularRadius: string padding: string startPaddingLeft: string diff --git a/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts b/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts index 31a2d14f9b..4162ee62d1 100644 --- a/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts @@ -4,7 +4,8 @@ import { MenuVariables } from './menuVariables' const menuDividerStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => { - const borderColor = p.primary ? v.primaryBorderColor : v.borderColor + // const borderColor = p.primary ? v.primaryBorderColor : v.borderColor + const borderColor = v.borderColor const borderType = p.vertical ? 'borderTop' : 'borderLeft' return p.content diff --git a/packages/react/src/themes/teams/components/Menu/menuVariables.ts b/packages/react/src/themes/teams/components/Menu/menuVariables.ts index 032cc6bf8c..6b8711d9c4 100644 --- a/packages/react/src/themes/teams/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams/components/Menu/menuVariables.ts @@ -1,5 +1,4 @@ import { pxToRem } from '../../../../lib' -import { ColorScheme } from 'src/themes/types' export interface MenuVariables { color: string @@ -67,7 +66,7 @@ export default (siteVars: any): MenuVariables => { lineHeightBase: siteVars.lineHeightMedium, horizontalPadding: `${pxToRem(14)} ${pxToRem(18)} ${pxToRem(14)} ${pxToRem(18)}`, - verticaldColor: undefined, + verticalColor: undefined, verticalBackgroundColor: undefined, verticalItemPadding: `${pxToRem(9)} ${pxToRem(16)} ${pxToRem(9)} ${pxToRem(16)}`, verticalBoxShadow: siteVars.shadowLevel3, From d3add7f63bb7786216d2df89bc7b9abbad9bca0d Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 18 Mar 2019 13:24:48 +0100 Subject: [PATCH 003/118] -fixed of the label components -updated on the menu styles --- .../ComponentControls/ComponentControls.tsx | 1 - packages/react/src/components/Label/Label.tsx | 6 +- packages/react/src/themes/teams/colors.ts | 48 ++++----- .../teams/components/Label/labelStyles.ts | 8 +- .../teams/components/Label/labelVariables.ts | 100 ++++++++---------- .../teams/components/Menu/menuStyles.ts | 10 +- 6 files changed, 81 insertions(+), 92 deletions(-) diff --git a/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx b/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx index 09cd34b204..69e20f6776 100644 --- a/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx +++ b/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx @@ -75,7 +75,6 @@ const ComponentControls: React.FC = props => {

> { + ColorComponentProps { /** * Accessibility behavior if overridden by the user. * @default defaultBehavior diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index a1702ada74..a40f0a6f0f 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -171,11 +171,11 @@ export const colors: ColorPalette = { // TODO: update typings export const colorScheme: any = { - undefined: { - foregroundUndefined: colors.grey.light14, - backgroundUndefined: colors.grey.light02, - borderUndefined: colors.grey.light02, - shadowUndefined: colors.grey.light02, + default: { + foregroundDefault: colors.grey.light14, + backgroundDefault: colors.grey.light02, + borderDefault: colors.grey.light02, + shadowDefault: colors.grey.light02, foregroundHover: colors.grey.light14, backgroundHover: colors.grey.light02, @@ -206,22 +206,22 @@ export const colorScheme: any = { red: { // red02: colors.red[500], // red57: colors.red[500], - // lightUndefined: colors.red[50], - // lightUndefined: colors.red[50], - // lightUndefined: colors.red[50], - // lightUndefined: colors.red[50], - // lightUndefined: colors.red[50], - // lightUndefined: colors.red[50], - // lightUndefined: colors.red[50], - // Undefined: colors.red[50], - // darkUndefined: colors.red[50], - // darkerUndefined: colors.red[500], - // darkestUndefined: colors.red[500], + // lightDefault: colors.red[50], + // lightDefault: colors.red[50], + // lightDefault: colors.red[50], + // lightDefault: colors.red[50], + // lightDefault: colors.red[50], + // lightDefault: colors.red[50], + // lightDefault: colors.red[50], + // Default: colors.red[50], + // darkDefault: colors.red[50], + // darkerDefault: colors.red[500], + // darkestDefault: colors.red[500], - foregroundUndefined: colors.red[50], - backgroundUndefined: colors.red[500], - borderUndefined: colors.red[500], - shadowUndefined: colors.red[500], + foregroundDefault: colors.red[50], + backgroundDefault: colors.red[500], + borderDefault: colors.red[500], + shadowDefault: colors.red[500], foregroundHover: colors.red[50], backgroundHover: colors.red[500], @@ -250,10 +250,10 @@ export const colorScheme: any = { }, green: { - foregroundUndefined: colors.green[50], - backgroundUndefined: colors.green[500], - borderUndefined: colors.green[500], - shadowUndefined: colors.green[500], + foregroundDefault: colors.green[50], + backgroundDefault: colors.green[500], + borderDefault: colors.green[500], + shadowDefault: colors.green[500], foregroundHover: colors.green[50], backgroundHover: colors.green[500], diff --git a/packages/react/src/themes/teams/components/Label/labelStyles.ts b/packages/react/src/themes/teams/components/Label/labelStyles.ts index 58846a8d34..da77e9761a 100644 --- a/packages/react/src/themes/teams/components/Label/labelStyles.ts +++ b/packages/react/src/themes/teams/components/Label/labelStyles.ts @@ -7,16 +7,16 @@ import { LabelVariables } from './labelVariables' const labelStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => { - const colors = v.colorScheme[p.color as any] - + const colors = v.colorScheme[p.color || 'default'] + console.log(colors) return { display: 'inline-flex', alignItems: 'center', overflow: 'hidden', height: v.height, lineHeight: v.height, - color: colors.foreground, - backgroundColor: colors.background, + color: colors.foregroundDefault, + backgroundColor: colors.backgroundDefault, fontSize: pxToRem(14), borderRadius: pxToRem(3), padding: v.padding, diff --git a/packages/react/src/themes/teams/components/Label/labelVariables.ts b/packages/react/src/themes/teams/components/Label/labelVariables.ts index 5cf123a784..67dd6e81e2 100644 --- a/packages/react/src/themes/teams/components/Label/labelVariables.ts +++ b/packages/react/src/themes/teams/components/Label/labelVariables.ts @@ -15,61 +15,55 @@ export default (siteVars: SiteVariablesPrepared): LabelVariables => { const color = 'rgba(0, 0, 0, 0.6)' const colorScheme = { - // ...getColorSchemeWithCustomDefaults(siteVars.colorScheme, { - // foreground: color, - // background: 'rgb(232, 232, 232)', - // }), ...siteVars.colorScheme, - undefined: { - // foreground: 'red', - // background: 'red', - foreground: color, - background: 'rgb(232, 232, 232)', - }, - grey: { - undefined: { - foreground: siteVars.colors.grey.light14, - background: siteVars.colors.grey.light02, - border: siteVars.colors.grey.light02, - shadow: siteVars.colors.grey.light02, - }, - active: { - foreground: siteVars.colors.grey.light14, - background: siteVars.colors.grey.light02, - border: siteVars.colors.grey.light02, - shadow: siteVars.colors.grey.light02, - }, - focus: { - foreground: siteVars.colors.grey.light14, - background: siteVars.colors.grey.light02, - border: siteVars.colors.grey.light02, - shadow: siteVars.colors.grey.light02, - }, - focusWithin: { - foreground: siteVars.colors.grey.light14, - background: siteVars.colors.grey.light02, - border: siteVars.colors.grey.light02, - shadow: siteVars.colors.grey.light02, - }, - hover: { - foreground: siteVars.colors.grey.light14, - background: siteVars.colors.grey.light02, - border: siteVars.colors.grey.light02, - shadow: siteVars.colors.grey.light02, - }, - disabled: { - foreground: siteVars.colors.grey.light14, - background: siteVars.colors.grey.light02, - border: siteVars.colors.grey.light02, - shadow: siteVars.colors.grey.light02, - }, - error: { - foreground: siteVars.colors.grey.light14, - background: siteVars.colors.grey.light02, - border: siteVars.colors.grey.light02, - shadow: siteVars.colors.grey.light02, - }, + default: { + foregroundDefault: color, + backgroundDefault: 'rgb(232, 232, 232)', }, + // grey: { + // undefined: { + // foreground: siteVars.colors.grey.light14, + // background: siteVars.colors.grey.light02, + // border: siteVars.colors.grey.light02, + // shadow: siteVars.colors.grey.light02, + // }, + // active: { + // foreground: siteVars.colors.grey.light14, + // background: siteVars.colors.grey.light02, + // border: siteVars.colors.grey.light02, + // shadow: siteVars.colors.grey.light02, + // }, + // focus: { + // foreground: siteVars.colors.grey.light14, + // background: siteVars.colors.grey.light02, + // border: siteVars.colors.grey.light02, + // shadow: siteVars.colors.grey.light02, + // }, + // focusWithin: { + // foreground: siteVars.colors.grey.light14, + // background: siteVars.colors.grey.light02, + // border: siteVars.colors.grey.light02, + // shadow: siteVars.colors.grey.light02, + // }, + // hover: { + // foreground: siteVars.colors.grey.light14, + // background: siteVars.colors.grey.light02, + // border: siteVars.colors.grey.light02, + // shadow: siteVars.colors.grey.light02, + // }, + // disabled: { + // foreground: siteVars.colors.grey.light14, + // background: siteVars.colors.grey.light02, + // border: siteVars.colors.grey.light02, + // shadow: siteVars.colors.grey.light02, + // }, + // error: { + // foreground: siteVars.colors.grey.light14, + // background: siteVars.colors.grey.light02, + // border: siteVars.colors.grey.light02, + // shadow: siteVars.colors.grey.light02, + // }, + // } } return { diff --git a/packages/react/src/themes/teams/components/Menu/menuStyles.ts b/packages/react/src/themes/teams/components/Menu/menuStyles.ts index 226c62fb51..0fa4ff8368 100644 --- a/packages/react/src/themes/teams/components/Menu/menuStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuStyles.ts @@ -13,23 +13,23 @@ type MenuPropsAndState = MenuProps & MenuState export default { root: ({ props: p, variables: v, theme }): ICSSInJSStyle => { const { iconOnly, fluid, pointing, pills, primary, underlined, vertical, submenu } = p - const colorScheme = theme.siteVariables.colorScheme[p.color] + const colorScheme = theme.siteVariables.colorScheme[p.color || 'default'] // const verticalScheme = v[p.vertical].colorScheme - console.log(colorScheme) + // console.log(colorScheme) return { display: 'flex', minHeight: pxToRem(24), margin: 0, padding: 0, - color: v.color || colorScheme.foregroundUndefined, - backgroundColor: v.backgroundColor || colorScheme.backgroundUndefined, + color: v.color || colorScheme.foregroundDefault, + backgroundColor: v.backgroundColor || 'inherit', listStyleType: 'none', ...(iconOnly && { alignItems: 'center' }), ...(vertical && { flexDirection: 'column', - color: v.verticalColor || colorScheme.foregroundUndefined, + color: v.verticalColor || colorScheme.foregroundDefault, backgroundColor: v.verticalBackgroundColor || theme.siteVariables.colors.white, padding: `${pxToRem(8)} 0`, ...(submenu && { From 697869dbd8deea8a1bd64835c7fa6bccca417532 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 18 Mar 2019 13:56:10 +0100 Subject: [PATCH 004/118] -adding missing colors form the color scheme --- packages/react/src/themes/teams/colors.ts | 400 ++++++++++++++++++++-- packages/react/src/themes/types.ts | 4 +- 2 files changed, 374 insertions(+), 30 deletions(-) diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index a40f0a6f0f..371ff242cb 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -1,4 +1,5 @@ import { ColorPalette, ContextualColors, EmphasisColors, NaturalColors } from '../types' +import { ColorVariants } from 'src/themes/types' export const emphasisColors: EmphasisColors = { primary: { @@ -157,10 +158,14 @@ const emphasisAndNaturalColors: EmphasisColors & NaturalColors = { ...naturalColors, } -// const lightBackgroundColors = ['orange', 'yellow', 'lightGreen', 'postOrange'] -// const isLightBackground = (colorName: string) => _.includes(lightBackgroundColors, colorName) +export type ThemeColors = Partial<{ + darkOrange: ColorVariants + postOrange: ColorVariants + lightGreen: ColorVariants + magenta: ColorVariants +}> -export const colors: ColorPalette = { +export const colors: ColorPalette = { ...emphasisAndNaturalColors, ...contextualColors, @@ -202,7 +207,223 @@ export const colorScheme: any = { borderDisabled: colors.grey.light02, shadowDisabled: colors.grey.light02, }, + black: { + foregroundDefault: colors.white, + backgroundDefault: colors.black, + borderDefault: colors.black, + shadowDefault: colors.black, + foregroundHover: colors.white, + backgroundHover: colors.black, + borderHover: colors.black, + shadowHover: colors.black, + + foregroundActive: colors.white, + backgroundActive: colors.black, + borderActive: colors.black, + shadowActive: colors.black, + + foregroundFocus: colors.white, + backgroundFocus: colors.black, + borderFocus: colors.black, + shadowFocus: colors.black, + + foregroundFocusWithin: colors.white, + backgroundFocusWithin: colors.black, + borderFocusWithin: colors.black, + shadowFocusWithin: colors.black, + + foregroundDisabled: colors.white, + backgroundDisabled: colors.black, + borderDisabled: colors.black, + shadowDisabled: colors.black, + }, + white: { + foregroundDefault: colors.black, + backgroundDefault: colors.white, + borderDefault: colors.white, + shadowDefault: colors.white, + + foregroundHover: colors.black, + backgroundHover: colors.white, + borderHover: colors.white, + shadowHover: colors.white, + + foregroundActive: colors.black, + backgroundActive: colors.white, + borderActive: colors.white, + shadowActive: colors.white, + + foregroundFocus: colors.black, + backgroundFocus: colors.white, + borderFocus: colors.white, + shadowFocus: colors.white, + + foregroundFocusWithin: colors.black, + backgroundFocusWithin: colors.white, + borderFocusWithin: colors.white, + shadowFocusWithin: colors.white, + + foregroundDisabled: colors.black, + backgroundDisabled: colors.white, + borderDisabled: colors.white, + shadowDisabled: colors.white, + }, + primary: { + foregroundDefault: colors.primary[50], + backgroundDefault: colors.primary[500], + borderDefault: colors.primary[500], + shadowDefault: colors.primary[500], + + foregroundHover: colors.primary[50], + backgroundHover: colors.primary[500], + borderHover: colors.primary[500], + shadowHover: colors.primary[500], + + foregroundActive: colors.primary[50], + backgroundActive: colors.primary[500], + borderActive: colors.primary[500], + shadowActive: colors.primary[500], + + foregroundFocus: colors.primary[50], + backgroundFocus: colors.primary[500], + borderFocus: colors.primary[500], + shadowFocus: colors.primary[500], + + foregroundFocusWithin: colors.primary[50], + backgroundFocusWithin: colors.primary[500], + borderFocusWithin: colors.primary[500], + shadowFocusWithin: colors.primary[500], + + foregroundDisabled: colors.primary[50], + backgroundDisabled: colors.primary[500], + borderDisabled: colors.primary[500], + shadowDisabled: colors.primary[500], + }, + grey: { + foregroundDefault: colors.grey.light14, + backgroundDefault: colors.grey.light02, + borderDefault: colors.grey.light02, + shadowDefault: colors.grey.light02, + + foregroundHover: colors.grey.light14, + backgroundHover: colors.grey.light02, + borderHover: colors.grey.light02, + shadowHover: colors.grey.light02, + + foregroundActive: colors.grey.light14, + backgroundActive: colors.grey.light02, + borderActive: colors.grey.light02, + shadowActive: colors.grey.light02, + + foregroundFocus: colors.grey.light14, + backgroundFocus: colors.grey.light02, + borderFocus: colors.grey.light02, + shadowFocus: colors.grey.light02, + + foregroundFocusWithin: colors.grey.light14, + backgroundFocusWithin: colors.grey.light02, + borderFocusWithin: colors.grey.light02, + shadowFocusWithin: colors.grey.light02, + + foregroundDisabled: colors.grey.light14, + backgroundDisabled: colors.grey.light02, + borderDisabled: colors.grey.light02, + shadowDisabled: colors.grey.light02, + }, + green: { + foregroundDefault: colors.green[50], + backgroundDefault: colors.green[500], + borderDefault: colors.green[500], + shadowDefault: colors.green[500], + + foregroundHover: colors.green[50], + backgroundHover: colors.green[500], + borderHover: colors.green[500], + shadowHover: colors.green[500], + + foregroundActive: colors.green[50], + backgroundActive: colors.green[500], + borderActive: colors.green[500], + shadowActive: colors.green[500], + + foregroundFocus: colors.green[50], + backgroundFocus: colors.green[500], + borderFocus: colors.green[500], + shadowFocus: colors.green[500], + + foregroundFocusWithin: colors.green[50], + backgroundFocusWithin: colors.green[500], + borderFocusWithin: colors.green[500], + shadowFocusWithin: colors.green[500], + + foregroundDisabled: colors.green[50], + backgroundDisabled: colors.green[500], + borderDisabled: colors.green[500], + shadowDisabled: colors.green[500], + }, + orange: { + foregroundDefault: colors.black, + backgroundDefault: colors.orange[500], + borderDefault: colors.orange[500], + shadowDefault: colors.orange[500], + + foregroundHover: colors.black, + backgroundHover: colors.orange[500], + borderHover: colors.orange[500], + shadowHover: colors.orange[500], + + foregroundActive: colors.black, + backgroundActive: colors.orange[500], + borderActive: colors.orange[500], + shadowActive: colors.orange[500], + + foregroundFocus: colors.black, + backgroundFocus: colors.orange[500], + borderFocus: colors.orange[500], + shadowFocus: colors.orange[500], + + foregroundFocusWithin: colors.black, + backgroundFocusWithin: colors.orange[500], + borderFocusWithin: colors.orange[500], + shadowFocusWithin: colors.orange[500], + + foregroundDisabled: colors.black, + backgroundDisabled: colors.orange[500], + borderDisabled: colors.orange[500], + shadowDisabled: colors.orange[500], + }, + pink: { + foregroundDefault: colors.pink[50], + backgroundDefault: colors.pink[500], + borderDefault: colors.pink[500], + shadowDefault: colors.pink[500], + + foregroundHover: colors.pink[50], + backgroundHover: colors.pink[500], + borderHover: colors.pink[500], + shadowHover: colors.pink[500], + + foregroundActive: colors.pink[50], + backgroundActive: colors.pink[500], + borderActive: colors.pink[500], + shadowActive: colors.pink[500], + + foregroundFocus: colors.pink[50], + backgroundFocus: colors.pink[500], + borderFocus: colors.pink[500], + shadowFocus: colors.pink[500], + + foregroundFocusWithin: colors.pink[50], + backgroundFocusWithin: colors.pink[500], + borderFocusWithin: colors.pink[500], + shadowFocusWithin: colors.pink[500], + + foregroundDisabled: colors.pink[50], + backgroundDisabled: colors.pink[500], + borderDisabled: colors.pink[500], + shadowDisabled: colors.pink[500], + }, red: { // red02: colors.red[500], // red57: colors.red[500], @@ -248,36 +469,159 @@ export const colorScheme: any = { borderDisabled: colors.red[500], shadowDisabled: colors.red[500], }, + yellow: { + foregroundDefault: colors.black, + backgroundDefault: colors.yellow[500], + borderDefault: colors.yellow[500], + shadowDefault: colors.yellow[500], - green: { - foregroundDefault: colors.green[50], - backgroundDefault: colors.green[500], - borderDefault: colors.green[500], - shadowDefault: colors.green[500], + foregroundHover: colors.black, + backgroundHover: colors.yellow[500], + borderHover: colors.yellow[500], + shadowHover: colors.yellow[500], - foregroundHover: colors.green[50], - backgroundHover: colors.green[500], - borderHover: colors.green[500], - shadowHover: colors.green[500], + foregroundActive: colors.black, + backgroundActive: colors.yellow[500], + borderActive: colors.yellow[500], + shadowActive: colors.yellow[500], - foregroundActive: colors.green[50], - backgroundActive: colors.green[500], - borderActive: colors.green[500], - shadowActive: colors.green[500], + foregroundFocus: colors.black, + backgroundFocus: colors.yellow[500], + borderFocus: colors.yellow[500], + shadowFocus: colors.yellow[500], - foregroundFocus: colors.green[50], - backgroundFocus: colors.green[500], - borderFocus: colors.green[500], - shadowFocus: colors.green[500], + foregroundFocusWithin: colors.black, + backgroundFocusWithin: colors.yellow[500], + borderFocusWithin: colors.yellow[500], + shadowFocusWithin: colors.yellow[500], - foregroundFocusWithin: colors.green[50], - backgroundFocusWithin: colors.green[500], - borderFocusWithin: colors.green[500], - shadowFocusWithin: colors.green[500], + foregroundDisabled: colors.black, + backgroundDisabled: colors.yellow[500], + borderDisabled: colors.yellow[500], + shadowDisabled: colors.yellow[500], + }, + darkOrange: { + foregroundDefault: colors.darkOrange[50], + backgroundDefault: colors.darkOrange[500], + borderDefault: colors.darkOrange[500], + shadowDefault: colors.darkOrange[500], - foregroundDisabled: colors.green[50], - backgroundDisabled: colors.green[500], - borderDisabled: colors.green[500], - shadowDisabled: colors.green[500], + foregroundHover: colors.darkOrange[50], + backgroundHover: colors.darkOrange[500], + borderHover: colors.darkOrange[500], + shadowHover: colors.darkOrange[500], + + foregroundActive: colors.darkOrange[50], + backgroundActive: colors.darkOrange[500], + borderActive: colors.darkOrange[500], + shadowActive: colors.darkOrange[500], + + foregroundFocus: colors.darkOrange[50], + backgroundFocus: colors.darkOrange[500], + borderFocus: colors.darkOrange[500], + shadowFocus: colors.darkOrange[500], + + foregroundFocusWithin: colors.darkOrange[50], + backgroundFocusWithin: colors.darkOrange[500], + borderFocusWithin: colors.darkOrange[500], + shadowFocusWithin: colors.darkOrange[500], + + foregroundDisabled: colors.darkOrange[50], + backgroundDisabled: colors.darkOrange[500], + borderDisabled: colors.darkOrange[500], + shadowDisabled: colors.darkOrange[500], + }, + lightGreen: { + foregroundDefault: colors.black, + backgroundDefault: colors.lightGreen[500], + borderDefault: colors.lightGreen[500], + shadowDefault: colors.lightGreen[500], + + foregroundHover: colors.black, + backgroundHover: colors.lightGreen[500], + borderHover: colors.lightGreen[500], + shadowHover: colors.lightGreen[500], + + foregroundActive: colors.black, + backgroundActive: colors.lightGreen[500], + borderActive: colors.lightGreen[500], + shadowActive: colors.lightGreen[500], + + foregroundFocus: colors.black, + backgroundFocus: colors.lightGreen[500], + borderFocus: colors.lightGreen[500], + shadowFocus: colors.lightGreen[500], + + foregroundFocusWithin: colors.black, + backgroundFocusWithin: colors.lightGreen[500], + borderFocusWithin: colors.lightGreen[500], + shadowFocusWithin: colors.lightGreen[500], + + foregroundDisabled: colors.black, + backgroundDisabled: colors.lightGreen[500], + borderDisabled: colors.lightGreen[500], + shadowDisabled: colors.lightGreen[500], + }, + magenta: { + foregroundDefault: colors.magenta[50], + backgroundDefault: colors.magenta[500], + borderDefault: colors.magenta[500], + shadowDefault: colors.magenta[500], + + foregroundHover: colors.magenta[50], + backgroundHover: colors.magenta[500], + borderHover: colors.magenta[500], + shadowHover: colors.magenta[500], + + foregroundActive: colors.magenta[50], + backgroundActive: colors.magenta[500], + borderActive: colors.magenta[500], + shadowActive: colors.magenta[500], + + foregroundFocus: colors.magenta[50], + backgroundFocus: colors.magenta[500], + borderFocus: colors.magenta[500], + shadowFocus: colors.magenta[500], + + foregroundFocusWithin: colors.magenta[50], + backgroundFocusWithin: colors.magenta[500], + borderFocusWithin: colors.magenta[500], + shadowFocusWithin: colors.magenta[500], + + foregroundDisabled: colors.magenta[50], + backgroundDisabled: colors.magenta[500], + borderDisabled: colors.magenta[500], + shadowDisabled: colors.magenta[500], + }, + postOrange: { + foregroundDefault: colors.black, + backgroundDefault: colors.postOrange[500], + borderDefault: colors.postOrange[500], + shadowDefault: colors.postOrange[500], + + foregroundHover: colors.black, + backgroundHover: colors.postOrange[500], + borderHover: colors.postOrange[500], + shadowHover: colors.postOrange[500], + + foregroundActive: colors.black, + backgroundActive: colors.postOrange[500], + borderActive: colors.postOrange[500], + shadowActive: colors.postOrange[500], + + foregroundFocus: colors.black, + backgroundFocus: colors.postOrange[500], + borderFocus: colors.postOrange[500], + shadowFocus: colors.postOrange[500], + + foregroundFocusWithin: colors.black, + backgroundFocusWithin: colors.postOrange[500], + borderFocusWithin: colors.postOrange[500], + shadowFocusWithin: colors.postOrange[500], + + foregroundDisabled: colors.black, + backgroundDisabled: colors.postOrange[500], + borderDisabled: colors.postOrange[500], + shadowDisabled: colors.postOrange[500], }, } diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts index 2ef3c28a06..dd45349478 100644 --- a/packages/react/src/themes/types.ts +++ b/packages/react/src/themes/types.ts @@ -91,8 +91,8 @@ export type PrimitiveColors = Partial<{ type ExtendablePalette = T & { [K in keyof T]?: K extends keyof PrimitiveColors ? string : ColorVariants } -export type ColorPalette = ExtendablePalette< - EmphasisColorsStrict & ContextualColorsStrict & NaturalColorsStrict & PrimitiveColors +export type ColorPalette = ExtendablePalette< + EmphasisColorsStrict & ContextualColorsStrict & NaturalColorsStrict & PrimitiveColors & T > /** From bbf5b1565c83827e4b0233affa32c453d8914463 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 18 Mar 2019 14:31:19 +0100 Subject: [PATCH 005/118] -updates on the text component --- .../themes/base/components/Text/textStyles.ts | 1 - .../base/components/Text/textVariables.ts | 10 ++----- .../teams/components/Label/labelStyles.ts | 2 +- .../teams/components/Text/textStyles.ts | 5 ++++ .../teams/components/Text/textVariables.ts | 27 ++++++++++--------- 5 files changed, 23 insertions(+), 22 deletions(-) diff --git a/packages/react/src/themes/base/components/Text/textStyles.ts b/packages/react/src/themes/base/components/Text/textStyles.ts index f989abdea8..dbbd80c058 100644 --- a/packages/react/src/themes/base/components/Text/textStyles.ts +++ b/packages/react/src/themes/base/components/Text/textStyles.ts @@ -35,7 +35,6 @@ export default { color: v.atMentionMeColor, }), ...(truncated && { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }), - ...(color && { color: _.get(v.colors, color) }), ...(disabled && { color: v.disabledColor }), ...(error && { color: v.errorColor }), ...(success && { color: v.successColor }), diff --git a/packages/react/src/themes/base/components/Text/textVariables.ts b/packages/react/src/themes/base/components/Text/textVariables.ts index 45475b18d9..837b6f666b 100644 --- a/packages/react/src/themes/base/components/Text/textVariables.ts +++ b/packages/react/src/themes/base/components/Text/textVariables.ts @@ -1,8 +1,5 @@ -import { ColorValues } from '../../../types' -import { mapColorsToScheme } from '../../../../lib' - export interface TextVariables { - colors: ColorValues + colorScheme: any atMentionMeColor: string atMentionOtherColor: string @@ -37,11 +34,8 @@ export interface TextVariables { } export default (siteVariables): TextVariables => { - const colorVariant = 500 - return { - colors: mapColorsToScheme(siteVariables, colorVariant), - + colorScheme: siteVariables.colorScheme, atMentionMeColor: siteVariables.colors.pink[500], atMentionOtherColor: siteVariables.colors.grey[600], importantColor: siteVariables.colors.red[500], diff --git a/packages/react/src/themes/teams/components/Label/labelStyles.ts b/packages/react/src/themes/teams/components/Label/labelStyles.ts index da77e9761a..187f780632 100644 --- a/packages/react/src/themes/teams/components/Label/labelStyles.ts +++ b/packages/react/src/themes/teams/components/Label/labelStyles.ts @@ -8,7 +8,7 @@ import { LabelVariables } from './labelVariables' const labelStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => { const colors = v.colorScheme[p.color || 'default'] - console.log(colors) + return { display: 'inline-flex', alignItems: 'center', diff --git a/packages/react/src/themes/teams/components/Text/textStyles.ts b/packages/react/src/themes/teams/components/Text/textStyles.ts index 1863f37728..133a54472b 100644 --- a/packages/react/src/themes/teams/components/Text/textStyles.ts +++ b/packages/react/src/themes/teams/components/Text/textStyles.ts @@ -7,7 +7,12 @@ export default { props: { atMention, color, important, timestamp }, variables: v, }: ComponentStyleFunctionParam): ICSSInJSStyle => { + const colors = v.colorScheme[color || 'default'] return { + ...(color && { + // TODO: consider adding valuable color scheme values + color: colors.backgroundDefault, + }), ...(atMention === 'me' && { fontWeight: v.atMentionMeFontWeight, }), diff --git a/packages/react/src/themes/teams/components/Text/textVariables.ts b/packages/react/src/themes/teams/components/Text/textVariables.ts index 50fae62fde..c958bdf65a 100644 --- a/packages/react/src/themes/teams/components/Text/textVariables.ts +++ b/packages/react/src/themes/teams/components/Text/textVariables.ts @@ -6,15 +6,18 @@ export interface TeamsTextVariables extends TextVariables { timestampHoverColor: string } -export default (siteVariables): Partial => ({ - atMentionOtherColor: siteVariables.colors.primary[500], - atMentionMeColor: siteVariables.naturalColors.darkOrange[400], - atMentionMeFontWeight: siteVariables.fontWeightBold, - disabledColor: siteVariables.colors.grey.light06, - errorColor: siteVariables.colors.red[900], - importantWeight: siteVariables.fontWeightBold, - importantColor: siteVariables.colors.red[900], - successColor: siteVariables.colors.green[900], - timestampColor: siteVariables.colors.grey.light04, - timestampHoverColor: siteVariables.colors.grey.light02, -}) +export default (siteVariables): Partial => { + return { + colorScheme: siteVariables.colorScheme, + atMentionOtherColor: siteVariables.colors.primary[500], + atMentionMeColor: siteVariables.naturalColors.darkOrange[400], + atMentionMeFontWeight: siteVariables.fontWeightBold, + disabledColor: siteVariables.colors.grey.light06, + errorColor: siteVariables.colors.red[900], + importantWeight: siteVariables.fontWeightBold, + importantColor: siteVariables.colors.red[900], + successColor: siteVariables.colors.green[900], + timestampColor: siteVariables.colors.grey.light04, + timestampHoverColor: siteVariables.colors.grey.light02, + } +} From dd593b25fc0c67a7eb70487eaf612e9c77dde1bd Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 18 Mar 2019 14:39:27 +0100 Subject: [PATCH 006/118] -added grey 900 --- packages/react/src/themes/teams/colors.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index 371ff242cb..34892490e7 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -50,6 +50,7 @@ export const naturalColors: NaturalColors = { dark09: '#3b3a39', dark10: '#323130', dark14: '#292828', + 900: '#252424', }, orange: { 50: '#FEF9F7', From 1e934b7681265d97107a9f2447d012981153ef84 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 18 Mar 2019 14:56:42 +0100 Subject: [PATCH 007/118] -updated bodyBackground --- packages/react/src/themes/teams/siteVariables.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/themes/teams/siteVariables.ts b/packages/react/src/themes/teams/siteVariables.ts index e36266f7eb..b3f665a955 100644 --- a/packages/react/src/themes/teams/siteVariables.ts +++ b/packages/react/src/themes/teams/siteVariables.ts @@ -88,6 +88,6 @@ export const bodyMargin = 0 export const bodyFontFamily = '"Segoe UI", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", Helvetica, Arial, sans-serif' export const bodyFontSize = '1.4rem' -export const bodyBackground = colors.white +export const bodyBackground = colors.grey.fullWhite export const bodyColor = colors.grey[900] export const bodyLineHeight = lineHeightMedium From 9ece9dd90d22570a848c396f1a1bcfbf53584e5b Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 18 Mar 2019 16:20:10 +0100 Subject: [PATCH 008/118] -updates on the color scheme grey color -updates on the styles of the segment component --- packages/react/src/themes/teams/colors.ts | 59 +++++++++++-------- .../teams/components/Segment/segmentStyles.ts | 6 +- .../components/Segment/segmentVariables.ts | 9 +-- 3 files changed, 39 insertions(+), 35 deletions(-) diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index 34892490e7..2c8e0ca82b 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -50,7 +50,16 @@ export const naturalColors: NaturalColors = { dark09: '#3b3a39', dark10: '#323130', dark14: '#292828', - 900: '#252424', + 50: '#FFFFFF', // siteVariables.white + 100: '#E6E6E6', + 200: '#CDCCCC', + 300: '#B8B8B8', + 400: '#A2A2A2', + 500: '#8C8C8C', + 600: '#747373', + 700: '#5F5E5E', + 800: '#404040', + 900: '#252424', // siteVariables.black }, orange: { 50: '#FEF9F7', @@ -302,35 +311,35 @@ export const colorScheme: any = { shadowDisabled: colors.primary[500], }, grey: { - foregroundDefault: colors.grey.light14, - backgroundDefault: colors.grey.light02, - borderDefault: colors.grey.light02, - shadowDefault: colors.grey.light02, + foregroundDefault: colors.black, + backgroundDefault: colors.grey[500], + borderDefault: colors.grey[500], + shadowDefault: colors.grey[500], - foregroundHover: colors.grey.light14, - backgroundHover: colors.grey.light02, - borderHover: colors.grey.light02, - shadowHover: colors.grey.light02, + foregroundHover: colors.black, + backgroundHover: colors.grey[500], + borderHover: colors.grey[500], + shadowHover: colors.grey[500], - foregroundActive: colors.grey.light14, - backgroundActive: colors.grey.light02, - borderActive: colors.grey.light02, - shadowActive: colors.grey.light02, + foregroundActive: colors.black, + backgroundActive: colors.grey[500], + borderActive: colors.grey[500], + shadowActive: colors.grey[500], - foregroundFocus: colors.grey.light14, - backgroundFocus: colors.grey.light02, - borderFocus: colors.grey.light02, - shadowFocus: colors.grey.light02, + foregroundFocus: colors.black, + backgroundFocus: colors.grey[500], + borderFocus: colors.grey[500], + shadowFocus: colors.grey[500], - foregroundFocusWithin: colors.grey.light14, - backgroundFocusWithin: colors.grey.light02, - borderFocusWithin: colors.grey.light02, - shadowFocusWithin: colors.grey.light02, + foregroundFocusWithin: colors.black, + backgroundFocusWithin: colors.grey[500], + borderFocusWithin: colors.grey[500], + shadowFocusWithin: colors.grey[500], - foregroundDisabled: colors.grey.light14, - backgroundDisabled: colors.grey.light02, - borderDisabled: colors.grey.light02, - shadowDisabled: colors.grey.light02, + foregroundDisabled: colors.black, + backgroundDisabled: colors.grey[500], + borderDisabled: colors.grey[500], + shadowDisabled: colors.grey[500], }, green: { foregroundDefault: colors.green[50], diff --git a/packages/react/src/themes/teams/components/Segment/segmentStyles.ts b/packages/react/src/themes/teams/components/Segment/segmentStyles.ts index a15b1a2498..6dfd9e6ef1 100644 --- a/packages/react/src/themes/teams/components/Segment/segmentStyles.ts +++ b/packages/react/src/themes/teams/components/Segment/segmentStyles.ts @@ -6,7 +6,7 @@ import { SegmentVariables } from './segmentVariables' const segmentStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => { - const segmentColor = _.get(v.colors, p.color) + const colors = v.colorScheme[p.color || 'default'] return { padding: v.padding, @@ -15,10 +15,10 @@ const segmentStyles: ComponentSlotStylesInput = boxShadow: `0 1px 1px 1px ${v.boxShadowColor}`, color: v.color, backgroundColor: v.backgroundColor, - borderColor: segmentColor, + ...(p.color && { borderColor: colors.borderDefault }), ...(p.inverted && { color: v.backgroundColor, - backgroundColor: segmentColor || v.color, + backgroundColor: p.color ? colors.borderDefault : v.color, }), } }, diff --git a/packages/react/src/themes/teams/components/Segment/segmentVariables.ts b/packages/react/src/themes/teams/components/Segment/segmentVariables.ts index 3d84351186..0b312a09b2 100644 --- a/packages/react/src/themes/teams/components/Segment/segmentVariables.ts +++ b/packages/react/src/themes/teams/components/Segment/segmentVariables.ts @@ -1,8 +1,5 @@ -import { ColorValues } from '../../../types' -import { mapColorsToScheme } from '../../../../lib' - export interface SegmentVariables { - colors: ColorValues + colorScheme: any color: string backgroundColor: string padding: string @@ -11,10 +8,8 @@ export interface SegmentVariables { } export default (siteVariables): SegmentVariables => { - const colorVariant = 500 - return { - colors: mapColorsToScheme(siteVariables, colorVariant), + colorScheme: siteVariables.colorScheme, color: siteVariables.bodyColor, backgroundColor: siteVariables.bodyBackground, padding: '1em', From 330b8f4ac89c1bc38a05a4c6118557b02452515f Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 19 Mar 2019 10:16:28 +0100 Subject: [PATCH 009/118] -updated on the dark and high contrast themes --- .../components/Button/buttonVariables.ts | 3 +++ .../themes/teams-high-contrast/siteVariables.ts | 17 ++++++++++------- packages/react/src/themes/teams/colors.ts | 8 +++----- .../react/src/themes/teams/siteVariables.ts | 12 ++++++------ 4 files changed, 22 insertions(+), 18 deletions(-) diff --git a/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts b/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts index 7c411b24d2..6c04c2edc9 100644 --- a/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts @@ -7,6 +7,9 @@ export default (siteVars: any): Partial => { colorHover: siteVars.colors.white, colorFocus: siteVars.colors.white, backgroundColor: 'transparent', + backgroundColorHover: siteVars.colors.grey.dark14, + backgroundColorFocus: siteVars.colors.grey.dark08, + backgroundColorActive: siteVars.colors.grey.dark08, borderColorFocus: siteVars.black, borderColorFocusIndicator: siteVars.colors.white, diff --git a/packages/react/src/themes/teams-high-contrast/siteVariables.ts b/packages/react/src/themes/teams-high-contrast/siteVariables.ts index 56d870feb4..6f202eb0cf 100644 --- a/packages/react/src/themes/teams-high-contrast/siteVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/siteVariables.ts @@ -11,23 +11,26 @@ export const accessibleCyan = '#1aebff' export const red = '#f00' export const green04 = naturalColors.lightGreen[900] +export const white = colors.white +export const black = colors.black + // // STATUS COLORS // // TODO: bcalvery - color alone is not an adequate means for differentiating in an accessible way. export const successStatusBackgroundColor = accessibleGreen -export const successStatusTextColor = colors.grey.fullBlack +export const successStatusTextColor = black export const infoStatusBackgroundColor = accessibleCyan -export const infoStatusTextColor = colors.grey.fullBlack +export const infoStatusTextColor = black export const warningStatusBackgroundColor = accessibleYellow -export const warningStatusTextColor = colors.grey.fullBlack +export const warningStatusTextColor = black export const errorStatusBackgroundColor = red -export const errorStatusTextColor = colors.grey.fullBlack +export const errorStatusTextColor = black export const unknownStatusBackgroundColor = colors.white -export const unknownStatusTextColor = colors.grey.fullBlack +export const unknownStatusTextColor = black // // SEMANTIC ASSIGNMENTS // -export const bodyBackground = colors.grey.fullBlack -export const bodyColor = colors.white +export const bodyBackground = black +export const bodyColor = white diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index 2c8e0ca82b..e2ee36bcf1 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -30,9 +30,6 @@ export const naturalColors: NaturalColors = { 900: '#237B4B', // siteVariables.green04 }, grey: { - fullWhite: '#ffffff', - // fullBlack: '#000000', - light02: '#484644', light03: '#605E5C', light04: '#979593', @@ -46,10 +43,11 @@ export const naturalColors: NaturalColors = { dark03: '#b3b0ad', dark04: '#8a8886', dark06: '#605e5c', - // dark08: '#484644', + dark08: '#484644', dark09: '#3b3a39', dark10: '#323130', dark14: '#292828', + 50: '#FFFFFF', // siteVariables.white 100: '#E6E6E6', 200: '#CDCCCC', @@ -181,7 +179,7 @@ export const colors: ColorPalette = { // Primitive colors black: '#000', - white: naturalColors.grey.light14, // siteVariables.white + white: '#fff', // siteVariables.white } // TODO: update typings diff --git a/packages/react/src/themes/teams/siteVariables.ts b/packages/react/src/themes/teams/siteVariables.ts index b3f665a955..396333c171 100644 --- a/packages/react/src/themes/teams/siteVariables.ts +++ b/packages/react/src/themes/teams/siteVariables.ts @@ -52,15 +52,15 @@ export const fontSizes = { // STATUS COLORS // export const successStatusBackgroundColor = naturalColors.lightGreen[900] -export const successStatusTextColor = colors.grey.fullWhite +export const successStatusTextColor = colors.white export const infoStatusBackgroundColor = 'blue' -export const infoStatusTextColor = colors.grey.fullWhite +export const infoStatusTextColor = colors.white export const warningStatusBackgroundColor = colors.yellow[900] -export const warningStatusTextColor = colors.grey.fullWhite +export const warningStatusTextColor = colors.white export const errorStatusBackgroundColor = colors.red[900] -export const errorStatusTextColor = colors.grey.fullWhite +export const errorStatusTextColor = colors.white export const unknownStatusBackgroundColor = colors.grey.light04 -export const unknownStatusTextColor = colors.grey.fullWhite +export const unknownStatusTextColor = colors.white // // FONT WEIGHTS @@ -88,6 +88,6 @@ export const bodyMargin = 0 export const bodyFontFamily = '"Segoe UI", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", Helvetica, Arial, sans-serif' export const bodyFontSize = '1.4rem' -export const bodyBackground = colors.grey.fullWhite +export const bodyBackground = colors.white export const bodyColor = colors.grey[900] export const bodyLineHeight = lineHeightMedium From 69c1ce62e815435c84cc7d08d1a64487ffa221fd Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 19 Mar 2019 17:08:26 +0100 Subject: [PATCH 010/118] -updated button variables in dark theme --- .../themes/teams-dark/components/Button/buttonVariables.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts b/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts index 6c04c2edc9..1bc2c581e8 100644 --- a/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts @@ -6,11 +6,16 @@ export default (siteVars: any): Partial => { colorActive: siteVars.colors.white, colorHover: siteVars.colors.white, colorFocus: siteVars.colors.white, + colorDisabled: siteVars.colors.grey.dark06, backgroundColor: 'transparent', backgroundColorHover: siteVars.colors.grey.dark14, backgroundColorFocus: siteVars.colors.grey.dark08, backgroundColorActive: siteVars.colors.grey.dark08, + backgroundColorDisabled: siteVars.colors.grey.dark09, + borderColor: siteVars.colors.grey.dark08, + borderColorActive: siteVars.colors.grey.dark06, borderColorFocus: siteVars.black, + borderColorHover: siteVars.colors.grey.dark06, borderColorFocusIndicator: siteVars.colors.white, primaryBackgroundColorActive: siteVars.brand08, @@ -19,10 +24,12 @@ export default (siteVars: any): Partial => { primaryBorderColorFocus: siteVars.black, primaryBorderColorFocusIndicator: siteVars.colors.white, + circularColor: siteVars.colors.grey.dark02, circularColorActive: siteVars.black, circularBackgroundColorActive: siteVars.colors.grey.dark02, circularBackgroundColorHover: siteVars.colors.grey.dark03, circularBackgroundColorFocus: siteVars.colors.grey.dark02, + circularBorderColor: siteVars.colors.grey.dark02, circularBorderColorFocusIndicator: siteVars.black, } } From 7212f850b19d73ac59d1938aa4c22e89a79fc073 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 19 Mar 2019 18:25:02 +0100 Subject: [PATCH 011/118] -improved typings -fixed compiler issues --- packages/react/src/lib/colorUtils.ts | 75 ------------------- .../react/src/lib/commonPropInterfaces.ts | 9 --- packages/react/src/lib/index.ts | 1 - packages/react/src/lib/renderComponent.tsx | 12 --- packages/react/src/themes/base/colors.ts | 48 ++++++++---- .../components/Divider/dividerVariables.ts | 7 +- .../components/Divider/dividerVariables.ts | 7 +- packages/react/src/themes/teams/colors.ts | 5 +- .../teams/components/Divider/dividerStyles.ts | 12 +-- .../components/Divider/dividerVariables.ts | 29 +++---- .../Header/headerDescriptionStyles.ts | 15 ++-- .../Header/headerDescriptionVariables.ts | 16 ++-- .../teams/components/Header/headerStyles.ts | 15 ++-- .../components/Header/headerVariables.ts | 8 +- .../teams/components/Icon/iconStyles.ts | 12 +-- .../teams/components/Icon/iconVariables.ts | 11 +-- .../teams/components/Label/labelVariables.ts | 49 +----------- .../teams/components/Menu/menuItemStyles.ts | 9 ++- .../teams/components/Menu/menuVariables.ts | 3 + packages/react/src/themes/types.ts | 34 +++++++-- 20 files changed, 141 insertions(+), 236 deletions(-) delete mode 100644 packages/react/src/lib/colorUtils.ts diff --git a/packages/react/src/lib/colorUtils.ts b/packages/react/src/lib/colorUtils.ts deleted file mode 100644 index 206eb7b20e..0000000000 --- a/packages/react/src/lib/colorUtils.ts +++ /dev/null @@ -1,75 +0,0 @@ -import * as _ from 'lodash' -import { - SiteVariablesInput, - ColorVariants, - ColorValues, - ColorSchemeMapping, - ColorScheme, -} from '../themes/types' -import { ComplexColorPropType } from './commonPropInterfaces' - -export const mapColorsToScheme = ( - siteVars: SiteVariablesInput, - mapper: keyof ColorVariants | ((color: ColorVariants) => T), -): ColorValues => - _.mapValues( - { ...siteVars.emphasisColors, ...siteVars.naturalColors }, - typeof mapper === 'number' ? String(mapper) : (mapper as any), - ) as ColorValues - -export const getColorSchemeFn = (colorProp: string, colorScheme: ColorValues) => { - const colors = _.get(colorScheme, colorProp) - return (area: keyof T, defaultColor: string) => (colors ? colors[area] : defaultColor) -} - -export const getColorSchemeFromObject = ( - colorScheme: ColorValues>, - colors: ComplexColorPropType, -): Partial => - _.mapValues(colors, (color, colorName) => { - // if the color scheme contains the color, then get the value from it, otherwise return the color provided - const colorSchemeValue = _.get(colorScheme, color, colorScheme.default[color]) - return colorSchemeValue ? colorSchemeValue[colorName] : colors[colorName] - }) - -export const getColorSchemeWithCustomDefaults = ( - colorScheme: ColorSchemeMapping, - customDefaultValues: Partial, -) => { - const mergedDefaultValues = { - ...colorScheme.default, - ...customDefaultValues, - } - return { - ...colorScheme, - default: mergedDefaultValues, - } -} - -export const generateColorScheme = ( - colorProp: ComplexColorPropType, - colorScheme: ColorValues>, -): Partial => { - // if both color prop and color scheme are defined, we are merging them - if (colorProp && colorScheme) { - return typeof colorProp === 'string' - ? _.get(colorScheme, colorProp as string, colorScheme.default) - : { ...colorScheme.default, ...getColorSchemeFromObject(colorScheme, colorProp) } - } - - // if the color prop is not defined, but the the color scheme is defined, then we are returning - // the defaults from the color scheme if they exists - if (colorScheme) { - return colorScheme && colorScheme.default ? colorScheme.default : {} - } - - // if the color scheme is not defined, then if the color prop is a scheme object we are - // returning it, otherwise we return an empty object, as it means that the component is - // implementing the simple color prop - if (colorProp) { - return typeof colorProp === 'string' ? {} : colorProp - } - - // if neither the color prop, nor the color scheme are defined, we are returning empty object - return {} -} diff --git a/packages/react/src/lib/commonPropInterfaces.ts b/packages/react/src/lib/commonPropInterfaces.ts index 191440da31..81d2998c35 100644 --- a/packages/react/src/lib/commonPropInterfaces.ts +++ b/packages/react/src/lib/commonPropInterfaces.ts @@ -45,15 +45,6 @@ export type ColorValue = export type ColorValuesWithPrimitiveColors = ColorValue | 'black' | 'white' -export type ComplexColorPropType = - | { - foreground?: TColorValue - background?: TColorValue - border?: TColorValue - shadow?: TColorValue - } - | TColorValue - export interface ColorComponentProps { /** A component can have a color. */ color?: TColor diff --git a/packages/react/src/lib/index.ts b/packages/react/src/lib/index.ts index 04a4d3ce4c..2e1579873e 100644 --- a/packages/react/src/lib/index.ts +++ b/packages/react/src/lib/index.ts @@ -7,7 +7,6 @@ import * as commonPropTypes from './commonPropTypes' export { default as AutoControlledComponent } from './AutoControlledComponent' export { default as childrenExist } from './childrenExist' -export * from './colorUtils' export { default as UIComponent } from './UIComponent' export { EventStack } from './eventStack' export { felaRenderer, felaRtlRenderer } from './felaRenderer' diff --git a/packages/react/src/lib/renderComponent.tsx b/packages/react/src/lib/renderComponent.tsx index db4f3aa8db..c73099a557 100644 --- a/packages/react/src/lib/renderComponent.tsx +++ b/packages/react/src/lib/renderComponent.tsx @@ -32,7 +32,6 @@ import { mergeComponentStyles, mergeComponentVariables } from './mergeThemes' import { FocusZoneProps, FocusZone, FocusZone as FabricFocusZone } from './accessibility/FocusZone' import { FOCUSZONE_WRAP_ATTRIBUTE } from './accessibility/FocusZone/focusUtilities' import createAnimationStyles from './createAnimationStyles' -import { generateColorScheme } from '.' export interface RenderResultConfig

{ // TODO: Switch back to React.ReactType after issue will be resolved @@ -160,11 +159,6 @@ const renderComponent =

(config: RenderConfig

): React.ReactElem const { siteVariables = { - colorScheme: {}, - colors: {}, - contextualColors: {}, - emphasisColors: {}, - naturalColors: {}, fontSizes: {}, }, componentVariables = {}, @@ -202,16 +196,10 @@ const renderComponent =

(config: RenderConfig

): React.ReactElem const unhandledProps = getUnhandledProps({ handledProps }, props) - const colors = generateColorScheme(stateAndProps.color, resolvedVariables.colorScheme) - // const scheme = { - // background: - // } - const styleParam: ComponentStyleFunctionParam = { props: stateAndProps, variables: resolvedVariables, theme, - colors, } mergedStyles.root = { diff --git a/packages/react/src/themes/base/colors.ts b/packages/react/src/themes/base/colors.ts index e49ca7af62..cfd7919b4b 100644 --- a/packages/react/src/themes/base/colors.ts +++ b/packages/react/src/themes/base/colors.ts @@ -159,22 +159,40 @@ export const colors: ColorPalette = { white: '#fff', } -export const colorScheme: ColorSchemeMapping = _.mapValues( - emphasisAndNaturalColors, - (colorVariants, colorName) => { +export const colorScheme: ColorSchemeMapping = { + ..._.mapValues(emphasisAndNaturalColors, (colorVariants, colorName) => { const foreground = isLightBackground(colorName) ? colors.black : colorVariants[50] return { - foreground, - border: foreground, - shadow: foreground, - background: colorVariants[500], - default: { - foreground: colors.grey[600], - border: colors.grey[600], - shadow: colors.grey[600], - background: colors.grey[100], - }, + foregroundDefault: foreground, + borderDefault: foreground, + shadowDefault: foreground, + backgroundDefault: colorVariants[500], + + foregroundActive: foreground, + borderActive: foreground, + shadowActive: foreground, + backgroundActive: colorVariants[500], + + foregroundHover: foreground, + backgroundHover: colorVariants[500], + borderHover: foreground, + shadowHover: foreground, + + foregroundFocus: foreground, + backgroundFocus: colorVariants[500], + borderFocus: foreground, + shadowFocus: foreground, + + foregroundFocusWithin: foreground, + backgroundFocusWithin: colorVariants[500], + borderFocusWithin: foreground, + shadowFocusWithin: foreground, + + foregroundDisabled: foreground, + backgroundDisabled: colorVariants[500], + borderDisabled: foreground, + shadowDisabled: foreground, } - }, -) + }), +} diff --git a/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts b/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts index b45929a240..3fba442c94 100644 --- a/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts @@ -1,8 +1,9 @@ import { DividerVariables } from '../../../teams/components/Divider/dividerVariables' export default (siteVars: any): Partial => ({ - colors: { - primary: siteVars.brand06, - }, + // TODO will be fixed after color scheme for dark theme is added + // colors: { + // primary: siteVars.brand06, + // }, textColor: siteVars.colors.grey.dark02, }) diff --git a/packages/react/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts index d3cf54f78c..8c0ca4e54c 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts @@ -1,9 +1,10 @@ import { DividerVariables } from '../../../teams/components/Divider/dividerVariables' export default (siteVars: any): Partial => ({ - colors: { - primary: siteVars.white, - }, + // TODO will be fixed after color scheme for high contrast is added + // colors: { + // primary: siteVars.white, + // }, dividerColor: siteVars.white, textColor: siteVars.white, }) diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index e2ee36bcf1..ea383b1cbe 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -1,5 +1,5 @@ import { ColorPalette, ContextualColors, EmphasisColors, NaturalColors } from '../types' -import { ColorVariants } from 'src/themes/types' +import { ColorVariants, ColorSchemeMapping } from 'src/themes/types' export const emphasisColors: EmphasisColors = { primary: { @@ -182,8 +182,7 @@ export const colors: ColorPalette = { white: '#fff', // siteVariables.white } -// TODO: update typings -export const colorScheme: any = { +export const colorScheme: ColorSchemeMapping = { default: { foregroundDefault: colors.grey.light14, backgroundDefault: colors.grey.light02, diff --git a/packages/react/src/themes/teams/components/Divider/dividerStyles.ts b/packages/react/src/themes/teams/components/Divider/dividerStyles.ts index dcd49a0e73..c57924c49c 100644 --- a/packages/react/src/themes/teams/components/Divider/dividerStyles.ts +++ b/packages/react/src/themes/teams/components/Divider/dividerStyles.ts @@ -9,18 +9,20 @@ const beforeAndAfter = ( color: string, size: number, variables: DividerVariables, + colors, ): ICSSInJSStyle => ({ content: '""', flex: 1, height: `${size + 1}px`, - background: _.get(variables.colors, color, variables.dividerColor), + background: _.get(colors, color, variables.dividerColor), }) const dividerStyles: ComponentSlotStylesInput = { root: ({ props, variables }): ICSSInJSStyle => { const { children, color, fitted, size, important, content } = props + const colors = variables.colorScheme[color] return { - color: _.get(variables.colors, color, variables.textColor), + color: _.get(colors, color, variables.textColor), display: 'flex', alignItems: 'center', ...(!fitted && { @@ -36,17 +38,17 @@ const dividerStyles: ComponentSlotStylesInput + colorScheme: ColorSchemeMapping dividerColor: string textColor: string textFontSize: string @@ -14,16 +13,12 @@ export interface DividerVariables { dividerPadding: string } -export default (siteVars: any): DividerVariables => { - const colorVariant = 500 - - return { - colors: mapColorsToScheme(siteVars, colorVariant), - dividerColor: siteVars.colors.grey.light09, - textColor: siteVars.colors.grey.light03, - textFontSize: siteVars.fontSizeSmall, - textLineHeight: siteVars.lineHeightSmall, - importantFontWeight: siteVars.fontWeightBold, - dividerPadding: pxToRem(4), - } -} +export default (siteVars: any): DividerVariables => ({ + colorScheme: siteVars.colorScheme, + dividerColor: siteVars.colors.grey.light09, + textColor: siteVars.colors.grey.light03, + textFontSize: siteVars.fontSizeSmall, + textLineHeight: siteVars.lineHeightSmall, + importantFontWeight: siteVars.fontWeightBold, + dividerPadding: pxToRem(4), +}) diff --git a/packages/react/src/themes/teams/components/Header/headerDescriptionStyles.ts b/packages/react/src/themes/teams/components/Header/headerDescriptionStyles.ts index f8080f4b39..2157fc6093 100644 --- a/packages/react/src/themes/teams/components/Header/headerDescriptionStyles.ts +++ b/packages/react/src/themes/teams/components/Header/headerDescriptionStyles.ts @@ -6,12 +6,15 @@ import { HeaderDescriptionVariables } from './headerDescriptionVariables' import { pxToRem } from '../../../../lib' const headerStyles: ComponentSlotStylesInput = { - root: ({ props: p, variables: v }): ICSSInJSStyle => ({ - display: 'block', - color: _.get(v.colors, p.color, v.color), - fontSize: pxToRem(22), - fontWeight: 400, - }), + root: ({ props: p, variables: v }): ICSSInJSStyle => { + const colors = v.colorScheme[p.color] + return { + display: 'block', + color: _.get(colors, 'foregroundDefault', v.color), + fontSize: pxToRem(22), + fontWeight: 400, + } + }, } export default headerStyles diff --git a/packages/react/src/themes/teams/components/Header/headerDescriptionVariables.ts b/packages/react/src/themes/teams/components/Header/headerDescriptionVariables.ts index 45d53d5a10..7fbd988549 100644 --- a/packages/react/src/themes/teams/components/Header/headerDescriptionVariables.ts +++ b/packages/react/src/themes/teams/components/Header/headerDescriptionVariables.ts @@ -1,15 +1,11 @@ -import { ColorValues } from '../../../types' -import { mapColorsToScheme } from '../../../../lib' +import { ColorSchemeMapping } from '../../../types' export interface HeaderDescriptionVariables { - colors: ColorValues + colorScheme?: ColorSchemeMapping color: string } -export default (siteVariables: any): HeaderDescriptionVariables => { - const colorVariant = 500 - return { - colors: mapColorsToScheme(siteVariables, colorVariant), - color: siteVariables.colors.grey.light04, - } -} +export default (siteVariables: any): HeaderDescriptionVariables => ({ + colorScheme: siteVariables.colorScheme, + color: siteVariables.colors.grey.light04, +}) diff --git a/packages/react/src/themes/teams/components/Header/headerStyles.ts b/packages/react/src/themes/teams/components/Header/headerStyles.ts index ecf3789006..580e0213f4 100644 --- a/packages/react/src/themes/teams/components/Header/headerStyles.ts +++ b/packages/react/src/themes/teams/components/Header/headerStyles.ts @@ -6,12 +6,15 @@ import { HeaderProps } from '../../../../components/Header/Header' import { HeaderVariables } from './headerVariables' const headerStyles: ComponentSlotStylesInput = { - root: ({ props: p, variables: v }): ICSSInJSStyle => ({ - display: 'block', - color: _.get(v.colors, p.color, v.color), - textAlign: p.textAlign as TextAlignProperty, - ...(p.description && { marginBottom: 0 }), - }), + root: ({ props: p, variables: v }): ICSSInJSStyle => { + const colors = v.colorScheme[p.color] + return { + display: 'block', + color: _.get(colors, 'foregroundDefault', v.color), + textAlign: p.textAlign as TextAlignProperty, + ...(p.description && { marginBottom: 0 }), + } + }, } export default headerStyles diff --git a/packages/react/src/themes/teams/components/Header/headerVariables.ts b/packages/react/src/themes/teams/components/Header/headerVariables.ts index 1d124adf76..e4e52cc78f 100644 --- a/packages/react/src/themes/teams/components/Header/headerVariables.ts +++ b/packages/react/src/themes/teams/components/Header/headerVariables.ts @@ -1,16 +1,14 @@ -import { ColorValues } from '../../../types' -import { mapColorsToScheme } from '../../../../lib' +import { ColorSchemeMapping } from '../../../types' export interface HeaderVariables { - colors: ColorValues + colorScheme?: ColorSchemeMapping color: string descriptionColor: string } export default (siteVars: any): HeaderVariables => { - const colorVariant = 500 return { - colors: mapColorsToScheme(siteVars, colorVariant), + colorScheme: siteVars.colorScheme, color: siteVars.colors.grey[900], descriptionColor: undefined, } diff --git a/packages/react/src/themes/teams/components/Icon/iconStyles.ts b/packages/react/src/themes/teams/components/Icon/iconStyles.ts index db5ca276a3..743cffe72f 100644 --- a/packages/react/src/themes/teams/components/Icon/iconStyles.ts +++ b/packages/react/src/themes/teams/components/Icon/iconStyles.ts @@ -88,8 +88,8 @@ const getIconSize = (size: SizeValue, sizeModifier: IconSizeModifier): number => return modifiedSizes[size] && modifiedSizes[size][sizeModifier] } -const getIconColor = (colorProp: string, variables: IconVariables) => - _.get(variables.colors, colorProp, variables.color || 'currentColor') +const getIconColor = (colorProp: string, variables, colors) => + _.get(colors, colorProp, variables.color || 'currentColor') const iconStyles: ComponentSlotStylesInput = { root: ({ @@ -97,6 +97,7 @@ const iconStyles: ComponentSlotStylesInput = { variables: v, theme, }): ICSSInJSStyle => { + const colors = v.colorScheme[color || 'default'] const iconSpec = theme.icons[name] const rtl = theme.rtl const isFontBased = name && (!iconSpec || !iconSpec.isSvg) @@ -112,7 +113,7 @@ const iconStyles: ComponentSlotStylesInput = { ...(isFontBased && getFontStyles(getIconSize(size, v.sizeModifier), name)), ...(isFontBased && { - color: getIconColor(color, v), + color: getIconColor(color, v, colors), fontWeight: 900, // required for the fontAwesome to render ...(disabled && { @@ -125,7 +126,7 @@ const iconStyles: ComponentSlotStylesInput = { ...(circular && { ...getPaddedStyle(), borderRadius: '50%' }), ...((bordered || v.borderColor) && - getBorderedStyles(v.borderColor || getIconColor(color, v))), + getBorderedStyles(v.borderColor || getIconColor(color, v, colors))), ...(!rtl && { transform: `rotate(${rotate}deg)`, @@ -158,13 +159,14 @@ const iconStyles: ComponentSlotStylesInput = { }, svg: ({ props: { size, color, disabled }, variables: v }): ICSSInJSStyle => { + const colors = v.colorScheme[color || 'default'] const iconSizeInRems = pxToRem(getIconSize(size, v.sizeModifier)) return { display: 'block', width: iconSizeInRems, height: iconSizeInRems, - fill: getIconColor(color, v), + fill: getIconColor(color, v, colors), ...(disabled && { fill: v.disabledColor, diff --git a/packages/react/src/themes/teams/components/Icon/iconVariables.ts b/packages/react/src/themes/teams/components/Icon/iconVariables.ts index d6ac0c0835..88f11f2ed1 100644 --- a/packages/react/src/themes/teams/components/Icon/iconVariables.ts +++ b/packages/react/src/themes/teams/components/Icon/iconVariables.ts @@ -1,12 +1,11 @@ -import { ColorValues } from '../../../types' -import { mapColorsToScheme, pxToRem } from '../../../../lib' +import { pxToRem } from '../../../../lib' +import { ColorSchemeMapping } from '../../../types' export type IconSizeModifier = 'x' | 'xx' export interface IconVariables { [key: string]: object | string | number | boolean | undefined - - colors: ColorValues + colorScheme?: ColorSchemeMapping color?: string backgroundColor?: string borderColor?: string @@ -19,10 +18,8 @@ export interface IconVariables { sizeModifier?: IconSizeModifier } -const colorVariant = 500 - export default (siteVars): IconVariables => ({ - colors: mapColorsToScheme(siteVars, colorVariant), + colorScheme: siteVars.colorScheme, color: undefined, backgroundColor: undefined, borderColor: undefined, diff --git a/packages/react/src/themes/teams/components/Label/labelVariables.ts b/packages/react/src/themes/teams/components/Label/labelVariables.ts index 67dd6e81e2..00f7e0eaff 100644 --- a/packages/react/src/themes/teams/components/Label/labelVariables.ts +++ b/packages/react/src/themes/teams/components/Label/labelVariables.ts @@ -1,8 +1,8 @@ import { pxToRem } from '../../../../lib' -import { SiteVariablesPrepared } from '../../../types' +import { SiteVariablesPrepared, ColorSchemeMapping } from '../../../types' export interface LabelVariables { - colorScheme: any + colorScheme: ColorSchemeMapping circularRadius: string padding: string startPaddingLeft: string @@ -17,53 +17,10 @@ export default (siteVars: SiteVariablesPrepared): LabelVariables => { const colorScheme = { ...siteVars.colorScheme, default: { + ...siteVars.colorScheme.default, foregroundDefault: color, backgroundDefault: 'rgb(232, 232, 232)', }, - // grey: { - // undefined: { - // foreground: siteVars.colors.grey.light14, - // background: siteVars.colors.grey.light02, - // border: siteVars.colors.grey.light02, - // shadow: siteVars.colors.grey.light02, - // }, - // active: { - // foreground: siteVars.colors.grey.light14, - // background: siteVars.colors.grey.light02, - // border: siteVars.colors.grey.light02, - // shadow: siteVars.colors.grey.light02, - // }, - // focus: { - // foreground: siteVars.colors.grey.light14, - // background: siteVars.colors.grey.light02, - // border: siteVars.colors.grey.light02, - // shadow: siteVars.colors.grey.light02, - // }, - // focusWithin: { - // foreground: siteVars.colors.grey.light14, - // background: siteVars.colors.grey.light02, - // border: siteVars.colors.grey.light02, - // shadow: siteVars.colors.grey.light02, - // }, - // hover: { - // foreground: siteVars.colors.grey.light14, - // background: siteVars.colors.grey.light02, - // border: siteVars.colors.grey.light02, - // shadow: siteVars.colors.grey.light02, - // }, - // disabled: { - // foreground: siteVars.colors.grey.light14, - // background: siteVars.colors.grey.light02, - // border: siteVars.colors.grey.light02, - // shadow: siteVars.colors.grey.light02, - // }, - // error: { - // foreground: siteVars.colors.grey.light14, - // background: siteVars.colors.grey.light02, - // border: siteVars.colors.grey.light02, - // shadow: siteVars.colors.grey.light02, - // }, - // } } return { diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index 2c6ac46d40..edde859d71 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -158,7 +158,7 @@ const pointingBeak: ComponentSlotStyleFunction = { - wrapper: ({ props, variables: v, theme, colors }): ICSSInJSStyle => { + wrapper: ({ props, variables: v, theme }): ICSSInJSStyle => { const { active, disabled, @@ -171,6 +171,9 @@ const menuItemStyles: ComponentSlotStylesInput { return { + colorScheme: siteVars.colorScheme, color: siteVars.colors.grey.light02, colorActive: siteVars.colors.black, colorFocus: siteVars.colors.white, diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts index 887fb01d75..18b2020e07 100644 --- a/packages/react/src/themes/types.ts +++ b/packages/react/src/themes/types.ts @@ -100,10 +100,35 @@ export type ColorPalette = ExtendablePalette< */ export type ColorScheme = { [key: string]: any - foreground: string - background: string - border: string - shadow: string + foregroundDefault: string + backgroundDefault: string + borderDefault: string + shadowDefault: string + + foregroundHover: string + backgroundHover: string + borderHover: string + shadowHover: string + + foregroundActive: string + backgroundActive: string + borderActive: string + shadowActive: string + + foregroundFocus: string + backgroundFocus: string + borderFocus: string + shadowFocus: string + + foregroundFocusWithin: string + backgroundFocusWithin: string + borderFocusWithin: string + shadowFocusWithin: string + + foregroundDisabled: string + backgroundDisabled: string + borderDisabled: string + shadowDisabled: string } export type ColorSchemeMapping = ColorValues & { default?: ColorScheme } @@ -196,7 +221,6 @@ export interface ComponentStyleFunctionParam< props: State & TProps variables: TVars theme: ThemePrepared - colors: Partial } export type ComponentSlotStyleFunction = (( From d180ff6f7ada8a25c5fd04de65abe9eeafee2007 Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 20 Mar 2019 12:38:50 +0100 Subject: [PATCH 012/118] -updating primary menu styles (default, pointing) --- packages/react/src/components/Menu/Menu.tsx | 7 +- .../react/src/components/Menu/MenuItem.tsx | 8 +- packages/react/src/themes/teams/colors.ts | 18 +-- .../teams/components/Menu/menuItemStyles.ts | 124 ++++++++++++------ .../teams/components/Menu/menuStyles.ts | 10 +- .../teams/components/Menu/menuVariables.ts | 16 ++- 6 files changed, 119 insertions(+), 64 deletions(-) diff --git a/packages/react/src/components/Menu/Menu.tsx b/packages/react/src/components/Menu/Menu.tsx index e470ea4f90..84375b5bb3 100644 --- a/packages/react/src/components/Menu/Menu.tsx +++ b/packages/react/src/components/Menu/Menu.tsx @@ -12,6 +12,7 @@ import { commonPropTypes, getKindProp, rtlTextContainer, + ColorComponentProps, } from '../../lib' import MenuItem from './MenuItem' import { menuBehavior } from '../../lib/accessibility' @@ -23,7 +24,7 @@ import MenuDivider from './MenuDivider' export type MenuShorthandKinds = 'divider' | 'item' -export interface MenuProps extends UIComponentProps, ChildrenComponentProps { +export interface MenuProps extends UIComponentProps, ChildrenComponentProps, ColorComponentProps { /** * Accessibility behavior if overridden by the user. * @default menuBehavior @@ -93,6 +94,7 @@ class Menu extends AutoControlledComponent, MenuState> { static propTypes = { ...commonPropTypes.createCommon({ content: false, + color: true, }), activeIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), defaultActiveIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), @@ -150,6 +152,7 @@ class Menu extends AutoControlledComponent, MenuState> { vertical, submenu, indicator, + color, } = this.props const { activeIndex } = this.state @@ -167,6 +170,7 @@ class Menu extends AutoControlledComponent, MenuState> { variables, styles: styles.divider, inSubmenu: submenu, + color, }, }) } @@ -185,6 +189,7 @@ class Menu extends AutoControlledComponent, MenuState> { active, inSubmenu: submenu, indicator, + color, }, overrideProps: this.handleItemOverrides, }) diff --git a/packages/react/src/components/Menu/MenuItem.tsx b/packages/react/src/components/Menu/MenuItem.tsx index 43d836cc88..db7434c9cf 100644 --- a/packages/react/src/components/Menu/MenuItem.tsx +++ b/packages/react/src/components/Menu/MenuItem.tsx @@ -16,6 +16,7 @@ import { isFromKeyboard, EventStack, rtlTextContainer, + ColorComponentProps, } from '../../lib' import Icon from '../Icon/Icon' import Menu from './Menu' @@ -34,7 +35,8 @@ export interface MenuItemSlotClassNames { export interface MenuItemProps extends UIComponentProps, ChildrenComponentProps, - ContentComponentProps { + ContentComponentProps, + ColorComponentProps { /** * Accessibility behavior if overridden by the user. * @default menuItemBehavior @@ -134,7 +136,7 @@ class MenuItem extends AutoControlledComponent, MenuIt static slotClassNames: MenuItemSlotClassNames static propTypes = { - ...commonPropTypes.createCommon(), + ...commonPropTypes.createCommon({ color: true }), active: PropTypes.bool, disabled: PropTypes.bool, icon: customPropTypes.itemShorthand, @@ -195,6 +197,7 @@ class MenuItem extends AutoControlledComponent, MenuIt vertical, indicator, disabled, + color, } = this.props const indicatorWithDefaults = indicator === undefined ? {} : indicator @@ -238,6 +241,7 @@ class MenuItem extends AutoControlledComponent, MenuIt vertical: true, primary, secondary, + color, styles: styles.menu, submenu: true, indicator, diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index ea383b1cbe..4ef896ac2d 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -13,6 +13,8 @@ export const emphasisColors: EmphasisColors = { 700: '#4A4C78', 800: '#414265', 900: '#33344A', // siteVariables.brand02 + light04: '#464775', // no mapping color + light08: '#8B8CC7', }, } @@ -277,20 +279,20 @@ export const colorScheme: ColorSchemeMapping = { shadowDisabled: colors.white, }, primary: { - foregroundDefault: colors.primary[50], - backgroundDefault: colors.primary[500], + foregroundDefault: colors.primary[500], + backgroundDefault: colors.primary[50], borderDefault: colors.primary[500], shadowDefault: colors.primary[500], - foregroundHover: colors.primary[50], - backgroundHover: colors.primary[500], + foregroundHover: colors.white, + backgroundHover: colors.primary[200], borderHover: colors.primary[500], shadowHover: colors.primary[500], - foregroundActive: colors.primary[50], - backgroundActive: colors.primary[500], - borderActive: colors.primary[500], - shadowActive: colors.primary[500], + foregroundActive: colors.white, + backgroundActive: colors.primary.light08, + borderActive: colors.primary[50], + shadowActive: colors.primary[50], foregroundFocus: colors.primary[50], backgroundFocus: colors.primary[500], diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index edde859d71..6bf0f53d68 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -19,24 +19,19 @@ const underlinedItem = (color: string): ICSSInJSStyle => ({ const getActionStyles = ({ props: { primary, underlined, iconOnly }, variables: v, - color, + colorScheme, }: { props: MenuItemPropsAndState variables: MenuVariables - color: string + colorScheme: any }): ICSSInJSStyle => underlined || iconOnly ? { - color, - } - : primary - ? { - color: 'inherit', - background: v.backgroundColorActive, + color: colorScheme.foregroundActive, } : { - color, - background: v.backgroundColorActive, + color: colorScheme.foregroundActive, + background: v.backgroundColorActive || colorScheme.backgroundActive, } const getFocusedStyles = ({ @@ -80,6 +75,49 @@ const getFocusedStyles = ({ } } +const getHoverStyles = ({ + props, + variables: v, + color, + colorScheme, +}: { + props: MenuItemPropsAndState + variables: MenuVariables + color: string + colorScheme: any +}): ICSSInJSStyle => { + const { primary, underlined, isFromKeyboard, active, vertical, pointing } = props + if (active && !underlined && !vertical) return {} + return { + ...(underlined && !isFromKeyboard + ? { + color, + } + : primary + ? { + color: colorScheme.foregroundHover, + background: v.backgroundColorHover || colorScheme.backgroundHover, + } + : { + color: v.color, + background: v.backgroundColorHover || colorScheme.backgroundHover, + }), + + ...(vertical && isFromKeyboard && !pointing && !primary + ? { + borderWidth: 1, + borderStyle: 'solid', + borderColor: v.borderColorFocus, + outlineWidth: 1, + outlineStyle: 'solid', + outlineColor: v.outlineFocus, + margin: pxToRem(1), + background: v.backgroundColorFocus, + } + : {}), + } +} + const itemSeparator: ComponentSlotStyleFunction = ({ props, variables: v, @@ -104,24 +142,14 @@ const itemSeparator: ComponentSlotStyleFunction = ({ - props, - variables: v, -}): ICSSInJSStyle => { - const { pointing, primary } = props +const pointingBeak = ({ props, variables: v, colorScheme }): ICSSInJSStyle => { + const { pointing } = props - let backgroundColor: string - let borderColor: string let top: string let borders: ICSSInJSStyle - if (primary) { - backgroundColor = v.backgroundColorActive - borderColor = v.borderColor - } else { - backgroundColor = v.backgroundColorActive - borderColor = v.borderColor - } + const backgroundColor = v.backgroundColorActive || colorScheme.backgroundActive + const borderColor = v.borderColor if (pointing === 'start') { borders = { @@ -169,10 +197,11 @@ const menuItemStyles: ComponentSlotStylesInput { - const { iconOnly, fluid, pointing, pills, primary, underlined, vertical, submenu } = p - const colorScheme = theme.siteVariables.colorScheme[p.color || 'default'] + const { iconOnly, fluid, pointing, pills, primary, color, underlined, vertical, submenu } = p + const colorScheme = v.colorScheme[color ? color : primary ? 'primary' : 'grey'] // const verticalScheme = v[p.vertical].colorScheme - // console.log(colorScheme) return { @@ -45,10 +44,7 @@ export default { !iconOnly && !(pointing && vertical) && !underlined && { - border: `${v.borderWidth} solid ${v.borderColor}`, - ...(primary && { - border: `${v.borderWidth} solid ${v.borderColor}`, - }), + border: `${v.borderWidth} solid ${v.borderColor || colorScheme.borderDefault}`, borderRadius: pxToRem(4), }), ...(underlined && { diff --git a/packages/react/src/themes/teams/components/Menu/menuVariables.ts b/packages/react/src/themes/teams/components/Menu/menuVariables.ts index eff4b4a225..4a4787a658 100644 --- a/packages/react/src/themes/teams/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams/components/Menu/menuVariables.ts @@ -32,7 +32,8 @@ export interface MenuVariables { verticalItemPadding: string verticalBoxShadow: string verticalDividerMargin: string - verticalItemBorder: string + verticalItemBorderWidth: string + verticalItemBorderColor: string underlinedBottomBorderWidth: string @@ -44,23 +45,23 @@ export default (siteVars: any): MenuVariables => { return { colorScheme: siteVars.colorScheme, color: siteVars.colors.grey.light02, - colorActive: siteVars.colors.black, + colorActive: undefined, colorFocus: siteVars.colors.white, colorDisabled: siteVars.colors.grey.light06, verticalBorderColor: siteVars.colors.grey.light08, borderColor: siteVars.colors.grey.light10, - borderColorHover: siteVars.colors.grey.light08, - borderColorActive: siteVars.colors.primary[500], + borderColorHover: undefined, + borderColorActive: undefined, borderColorFocus: siteVars.colors.white, outlineFocus: siteVars.colors.black, backgroundColor: undefined, backgroundColorFocus: siteVars.colors.grey.light09, - backgroundColorHover: siteVars.colors.grey.light14, - backgroundColorActive: siteVars.colors.grey.light10, + backgroundColorHover: undefined, + backgroundColorActive: undefined, iconOnlyColorActive: siteVars.colors.primary[500], @@ -74,7 +75,8 @@ export default (siteVars: any): MenuVariables => { verticalItemPadding: `${pxToRem(9)} ${pxToRem(16)} ${pxToRem(9)} ${pxToRem(16)}`, verticalBoxShadow: siteVars.shadowLevel3, verticalDividerMargin: `${pxToRem(8)} 0`, - verticalItemBorder: `solid ${pxToRem(2)} transparent`, + verticalItemBorderWidth: pxToRem(2), + verticalItemBorderColor: 'transparent', underlinedBottomBorderWidth: pxToRem(2), From e146c4fc8a98b6120e4d35f8d30e405c4b897b69 Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 20 Mar 2019 13:59:48 +0100 Subject: [PATCH 013/118] -fixes of underlined menu --- packages/react/src/themes/teams/colors.ts | 14 +++--- .../teams/components/Menu/menuItemStyles.ts | 43 ++++++------------- .../teams/components/Menu/menuVariables.ts | 4 +- 3 files changed, 23 insertions(+), 38 deletions(-) diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index 4ef896ac2d..c0c0ea04f4 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -291,11 +291,11 @@ export const colorScheme: ColorSchemeMapping = { foregroundActive: colors.white, backgroundActive: colors.primary.light08, - borderActive: colors.primary[50], + borderActive: colors.primary[500], shadowActive: colors.primary[50], - foregroundFocus: colors.primary[50], - backgroundFocus: colors.primary[500], + foregroundFocus: colors.white, + backgroundFocus: colors.primary[200], borderFocus: colors.primary[500], shadowFocus: colors.primary[500], @@ -310,23 +310,23 @@ export const colorScheme: ColorSchemeMapping = { shadowDisabled: colors.primary[500], }, grey: { - foregroundDefault: colors.black, + foregroundDefault: colors.grey.light02, backgroundDefault: colors.grey[500], borderDefault: colors.grey[500], shadowDefault: colors.grey[500], foregroundHover: colors.black, - backgroundHover: colors.grey[500], + backgroundHover: colors.grey.light14, borderHover: colors.grey[500], shadowHover: colors.grey[500], foregroundActive: colors.black, - backgroundActive: colors.grey[500], + backgroundActive: colors.grey.light10, borderActive: colors.grey[500], shadowActive: colors.grey[500], foregroundFocus: colors.black, - backgroundFocus: colors.grey[500], + backgroundFocus: colors.grey.light14, borderFocus: colors.grey[500], shadowFocus: colors.grey[500], diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index 6bf0f53d68..394702fd8c 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -37,28 +37,17 @@ const getActionStyles = ({ const getFocusedStyles = ({ props, variables: v, - color, + colorScheme, }: { props: MenuItemPropsAndState variables: MenuVariables - color: string + colorScheme: any }): ICSSInJSStyle => { - const { primary, underlined, isFromKeyboard, active, vertical, pointing } = props + const { primary, color, underlined, isFromKeyboard, active, vertical, pointing } = props if (active && !underlined && !vertical) return {} return { - ...(underlined && !isFromKeyboard - ? { - color, - } - : primary - ? { - color: 'inherit', - background: v.backgroundColorFocus, - } - : { - color, - background: v.backgroundColorHover, - }), + color: primary || color ? colorScheme.foregroundFocus : 'inherit', + background: v.backgroundColorFocus || colorScheme.backgroundFocus, ...(vertical && isFromKeyboard && !pointing && !primary ? { @@ -69,7 +58,7 @@ const getFocusedStyles = ({ outlineStyle: 'solid', outlineColor: v.outlineFocus, margin: pxToRem(1), - background: v.backgroundColorFocus, + background: v.backgroundColorFocus || colorScheme.backgroundFocus, } : {}), } @@ -284,7 +273,7 @@ const menuItemStyles: ComponentSlotStylesInput { return { colorScheme: siteVars.colorScheme, color: siteVars.colors.grey.light02, - colorActive: undefined, + colorActive: siteVars.colors.black, colorFocus: siteVars.colors.white, colorDisabled: siteVars.colors.grey.light06, @@ -59,7 +59,7 @@ export default (siteVars: any): MenuVariables => { outlineFocus: siteVars.colors.black, backgroundColor: undefined, - backgroundColorFocus: siteVars.colors.grey.light09, + backgroundColorFocus: undefined, backgroundColorHover: undefined, backgroundColorActive: undefined, From db569cc2858d7d898fb6017ad763450a8a0cb136 Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 20 Mar 2019 14:26:03 +0100 Subject: [PATCH 014/118] -wip use border for components without background --- .../teams/components/Divider/dividerStyles.ts | 17 ++++++----------- .../Header/headerDescriptionStyles.ts | 2 +- .../teams/components/Header/headerStyles.ts | 2 +- .../themes/teams/components/Text/textStyles.ts | 3 +-- 4 files changed, 9 insertions(+), 15 deletions(-) diff --git a/packages/react/src/themes/teams/components/Divider/dividerStyles.ts b/packages/react/src/themes/teams/components/Divider/dividerStyles.ts index c57924c49c..c86776d8ad 100644 --- a/packages/react/src/themes/teams/components/Divider/dividerStyles.ts +++ b/packages/react/src/themes/teams/components/Divider/dividerStyles.ts @@ -5,16 +5,11 @@ import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' import { DividerPropsWithDefaults } from '../../../../components/Divider/Divider' import { DividerVariables } from './dividerVariables' -const beforeAndAfter = ( - color: string, - size: number, - variables: DividerVariables, - colors, -): ICSSInJSStyle => ({ +const beforeAndAfter = (size: number, variables: DividerVariables, colors): ICSSInJSStyle => ({ content: '""', flex: 1, height: `${size + 1}px`, - background: _.get(colors, color, variables.dividerColor), + background: _.get(colors, 'borderDefault', variables.dividerColor), }) const dividerStyles: ComponentSlotStylesInput = { @@ -22,7 +17,7 @@ const dividerStyles: ComponentSlotStylesInput = { const colors = v.colorScheme[p.color] return { display: 'block', - color: _.get(colors, 'foregroundDefault', v.color), + color: _.get(colors, 'borderDefault', v.color), textAlign: p.textAlign as TextAlignProperty, ...(p.description && { marginBottom: 0 }), } diff --git a/packages/react/src/themes/teams/components/Text/textStyles.ts b/packages/react/src/themes/teams/components/Text/textStyles.ts index 133a54472b..05cfd21e76 100644 --- a/packages/react/src/themes/teams/components/Text/textStyles.ts +++ b/packages/react/src/themes/teams/components/Text/textStyles.ts @@ -10,8 +10,7 @@ export default { const colors = v.colorScheme[color || 'default'] return { ...(color && { - // TODO: consider adding valuable color scheme values - color: colors.backgroundDefault, + color: colors.borderDefault, }), ...(atMention === 'me' && { fontWeight: v.atMentionMeFontWeight, From 718abe1b3d524f4a2ffc67ea809a574922522e08 Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 20 Mar 2019 14:29:38 +0100 Subject: [PATCH 015/118] -wip fix --- packages/react/src/themes/teams/colors.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index c0c0ea04f4..aada5301b4 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -279,8 +279,8 @@ export const colorScheme: ColorSchemeMapping = { shadowDisabled: colors.white, }, primary: { - foregroundDefault: colors.primary[500], - backgroundDefault: colors.primary[50], + foregroundDefault: colors.primary[50], + backgroundDefault: colors.primary[500], borderDefault: colors.primary[500], shadowDefault: colors.primary[500], From f4b8dca8fdf1b362a7ca858f96f4b6cd38a98045 Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 20 Mar 2019 14:56:22 +0100 Subject: [PATCH 016/118] -fixed vertical menu styles --- .../themes/teams/components/Menu/menuItemStyles.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index 394702fd8c..b017ff1b01 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -17,7 +17,7 @@ const underlinedItem = (color: string): ICSSInJSStyle => ({ }) const getActionStyles = ({ - props: { primary, underlined, iconOnly }, + props: { primary, underlined, iconOnly, color }, variables: v, colorScheme, }: { @@ -26,11 +26,16 @@ const getActionStyles = ({ colorScheme: any }): ICSSInJSStyle => underlined || iconOnly + ? { + color: v.color, + } + : primary || color ? { color: colorScheme.foregroundActive, + background: v.backgroundColorActive || colorScheme.backgroundActive, } : { - color: colorScheme.foregroundActive, + color: v.color, background: v.backgroundColorActive || colorScheme.backgroundActive, } @@ -82,7 +87,7 @@ const getHoverStyles = ({ ? { color, } - : primary + : primary || color ? { color: colorScheme.foregroundHover, background: v.backgroundColorHover || colorScheme.backgroundHover, From 043a667e1e6c3b0f3b61d71c73ab4e6ec84c98ba Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 20 Mar 2019 15:52:40 +0100 Subject: [PATCH 017/118] -fixes for the border colors --- .../teams-dark/components/Menu/menuVariables.ts | 2 -- packages/react/src/themes/teams/colors.ts | 2 +- .../themes/teams/components/Menu/menuItemStyles.ts | 13 ++++++------- .../src/themes/teams/components/Menu/menuStyles.ts | 7 ++++++- .../themes/teams/components/Menu/menuVariables.ts | 5 +---- 5 files changed, 14 insertions(+), 15 deletions(-) diff --git a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts index a1a0f8cdda..47cd96ce57 100644 --- a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts @@ -1,8 +1,6 @@ import { MenuVariables } from '../../../teams/components/Menu/menuVariables' export default (siteVars: any): Partial => ({ - verticalBorderColor: siteVars.black, - borderColor: siteVars.colors.white, backgroundColorFocus: 'transparent', diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index aada5301b4..5280b605f3 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -312,7 +312,7 @@ export const colorScheme: ColorSchemeMapping = { grey: { foregroundDefault: colors.grey.light02, backgroundDefault: colors.grey[500], - borderDefault: colors.grey[500], + borderDefault: colors.grey.light08, shadowDefault: colors.grey[500], foregroundHover: colors.black, diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index b017ff1b01..a83a9af6ee 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -1,5 +1,5 @@ import { pxToRem } from '../../../../lib' -import { ComponentSlotStyleFunction, ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' import { MenuVariables } from './menuVariables' import { MenuItemProps, MenuItemState } from '../../../../components/Menu/MenuItem' import { teamsIconClassNames } from '../Icon/svg' @@ -112,10 +112,7 @@ const getHoverStyles = ({ } } -const itemSeparator: ComponentSlotStyleFunction = ({ - props, - variables: v, -}): ICSSInJSStyle => { +const itemSeparator = ({ props, variables: v, colorScheme }): ICSSInJSStyle => { const { iconOnly, pills, primary, underlined, vertical } = props return ( @@ -130,7 +127,9 @@ const itemSeparator: ComponentSlotStyleFunction { colorFocus: siteVars.colors.white, colorDisabled: siteVars.colors.grey.light06, - verticalBorderColor: siteVars.colors.grey.light08, - - borderColor: siteVars.colors.grey.light10, + borderColor: undefined, borderColorHover: undefined, borderColorActive: undefined, borderColorFocus: siteVars.colors.white, From 8a1dd43506f3c98dbf58ee3f15a64880c134c90b Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 20 Mar 2019 16:45:36 +0100 Subject: [PATCH 018/118] -fixed primary menu border color --- .../src/themes/teams/components/Menu/menuItemStyles.ts | 6 +++--- .../react/src/themes/teams/components/Menu/menuStyles.ts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index a83a9af6ee..eebe980969 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -112,7 +112,7 @@ const getHoverStyles = ({ } } -const itemSeparator = ({ props, variables: v, colorScheme }): ICSSInJSStyle => { +const itemSeparator = ({ props, variables: v, theme, colorScheme }): ICSSInJSStyle => { const { iconOnly, pills, primary, underlined, vertical } = props return ( @@ -128,7 +128,7 @@ const itemSeparator = ({ props, variables: v, colorScheme }): ICSSInJSStyle => { width: pxToRem(1), height: '100%', ...(primary - ? { background: v.colorScheme.grey.backgroundActive /* TODO: check this again */ } + ? { background: theme.siteVariables.colors.grey.light10 /* TODO: check this again */ } : { background: v.borderColor || colorScheme.borderDefault }), }, } @@ -241,7 +241,7 @@ const menuItemStyles: ComponentSlotStylesInput Date: Wed, 20 Mar 2019 16:58:55 +0100 Subject: [PATCH 019/118] -fixes --- packages/react/src/themes/teams/colors.ts | 96 +++++++++---------- .../teams/components/Menu/menuItemStyles.ts | 2 +- .../teams/components/Menu/menuStyles.ts | 2 +- 3 files changed, 50 insertions(+), 50 deletions(-) diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index 5280b605f3..56cf7c68d6 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -186,35 +186,35 @@ export const colors: ColorPalette = { export const colorScheme: ColorSchemeMapping = { default: { - foregroundDefault: colors.grey.light14, - backgroundDefault: colors.grey.light02, - borderDefault: colors.grey.light02, - shadowDefault: colors.grey.light02, + foregroundDefault: colors.grey.light02, + backgroundDefault: colors.grey[500], + borderDefault: colors.grey.light08, + shadowDefault: colors.grey[500], - foregroundHover: colors.grey.light14, - backgroundHover: colors.grey.light02, - borderHover: colors.grey.light02, - shadowHover: colors.grey.light02, + foregroundHover: colors.black, + backgroundHover: colors.grey.light14, + borderHover: colors.grey[500], + shadowHover: colors.grey[500], - foregroundActive: colors.grey.light14, - backgroundActive: colors.grey.light02, - borderActive: colors.grey.light02, - shadowActive: colors.grey.light02, + foregroundActive: colors.black, + backgroundActive: colors.grey.light10, + borderActive: colors.grey[500], + shadowActive: colors.grey[500], - foregroundFocus: colors.grey.light14, - backgroundFocus: colors.grey.light02, - borderFocus: colors.grey.light02, - shadowFocus: colors.grey.light02, + foregroundFocus: colors.black, + backgroundFocus: colors.grey.light14, + borderFocus: colors.grey[500], + shadowFocus: colors.grey[500], - foregroundFocusWithin: colors.grey.light14, - backgroundFocusWithin: colors.grey.light02, - borderFocusWithin: colors.grey.light02, - shadowFocusWithin: colors.grey.light02, + foregroundFocusWithin: colors.black, + backgroundFocusWithin: colors.grey[500], + borderFocusWithin: colors.grey[500], + shadowFocusWithin: colors.grey[500], - foregroundDisabled: colors.grey.light14, - backgroundDisabled: colors.grey.light02, - borderDisabled: colors.grey.light02, - shadowDisabled: colors.grey.light02, + foregroundDisabled: colors.black, + backgroundDisabled: colors.grey[500], + borderDisabled: colors.grey[500], + shadowDisabled: colors.grey[500], }, black: { foregroundDefault: colors.white, @@ -310,35 +310,35 @@ export const colorScheme: ColorSchemeMapping = { shadowDisabled: colors.primary[500], }, grey: { - foregroundDefault: colors.grey.light02, - backgroundDefault: colors.grey[500], - borderDefault: colors.grey.light08, - shadowDefault: colors.grey[500], + foregroundDefault: colors.grey.light14, + backgroundDefault: colors.grey.light02, + borderDefault: colors.grey.light02, + shadowDefault: colors.grey.light02, - foregroundHover: colors.black, - backgroundHover: colors.grey.light14, - borderHover: colors.grey[500], - shadowHover: colors.grey[500], + foregroundHover: colors.grey.light14, + backgroundHover: colors.grey.light02, + borderHover: colors.grey.light02, + shadowHover: colors.grey.light02, - foregroundActive: colors.black, - backgroundActive: colors.grey.light10, - borderActive: colors.grey[500], - shadowActive: colors.grey[500], + foregroundActive: colors.grey.light14, + backgroundActive: colors.grey.light02, + borderActive: colors.grey.light02, + shadowActive: colors.grey.light02, - foregroundFocus: colors.black, - backgroundFocus: colors.grey.light14, - borderFocus: colors.grey[500], - shadowFocus: colors.grey[500], + foregroundFocus: colors.grey.light14, + backgroundFocus: colors.grey.light02, + borderFocus: colors.grey.light02, + shadowFocus: colors.grey.light02, - foregroundFocusWithin: colors.black, - backgroundFocusWithin: colors.grey[500], - borderFocusWithin: colors.grey[500], - shadowFocusWithin: colors.grey[500], + foregroundFocusWithin: colors.grey.light14, + backgroundFocusWithin: colors.grey.light02, + borderFocusWithin: colors.grey.light02, + shadowFocusWithin: colors.grey.light02, - foregroundDisabled: colors.black, - backgroundDisabled: colors.grey[500], - borderDisabled: colors.grey[500], - shadowDisabled: colors.grey[500], + foregroundDisabled: colors.grey.light14, + backgroundDisabled: colors.grey.light02, + borderDisabled: colors.grey.light02, + shadowDisabled: colors.grey.light02, }, green: { foregroundDefault: colors.green[50], diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index eebe980969..228d6b7148 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -194,7 +194,7 @@ const menuItemStyles: ComponentSlotStylesInput { const { iconOnly, fluid, pointing, pills, primary, color, underlined, vertical, submenu } = p - const colorScheme = v.colorScheme[color ? color : primary ? 'primary' : 'grey'] + const colorScheme = v.colorScheme[color ? color : primary ? 'primary' : 'default'] // const verticalScheme = v[p.vertical].colorScheme // console.log(colorScheme) From f12c1ef03400297cf321db9cfbcfd481cc577ea5 Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 20 Mar 2019 17:15:04 +0100 Subject: [PATCH 020/118] -fixed grey color -improved menu color example --- .../Variations/MenuExampleColor.shorthand.tsx | 61 +++++++++++-------- packages/react/src/themes/teams/colors.ts | 58 +++++++++--------- 2 files changed, 64 insertions(+), 55 deletions(-) diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx index a29f2f37a3..6fa827713a 100644 --- a/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx +++ b/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx @@ -1,34 +1,43 @@ -import * as React from 'react' -import { Menu, Provider } from '@stardust-ui/react' - +import React from 'react' +import { Menu, Flex, Provider } from '@stardust-ui/react' const items = [ - { key: 'editorials', content: 'Editorials' }, - { key: 'review', content: 'Reviews' }, - { key: 'events', content: 'Upcoming Events' }, + { + key: 'editorials', + content: 'Editorials', + }, + { + key: 'review', + content: 'Reviews', + }, + { + key: 'events', + content: 'Upcoming Events', + }, ] const MenuExamplePrimary = () => ( - Object.keys(theme.siteVariables.colorScheme).map(color => ( -

- )) - } + render={theme => ( + + {Object.keys(theme.siteVariables.colorScheme).map(color => ( + + ))} + + )} /> ) diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index 56cf7c68d6..44a009bc18 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -310,35 +310,35 @@ export const colorScheme: ColorSchemeMapping = { shadowDisabled: colors.primary[500], }, grey: { - foregroundDefault: colors.grey.light14, - backgroundDefault: colors.grey.light02, - borderDefault: colors.grey.light02, - shadowDefault: colors.grey.light02, - - foregroundHover: colors.grey.light14, - backgroundHover: colors.grey.light02, - borderHover: colors.grey.light02, - shadowHover: colors.grey.light02, - - foregroundActive: colors.grey.light14, - backgroundActive: colors.grey.light02, - borderActive: colors.grey.light02, - shadowActive: colors.grey.light02, - - foregroundFocus: colors.grey.light14, - backgroundFocus: colors.grey.light02, - borderFocus: colors.grey.light02, - shadowFocus: colors.grey.light02, - - foregroundFocusWithin: colors.grey.light14, - backgroundFocusWithin: colors.grey.light02, - borderFocusWithin: colors.grey.light02, - shadowFocusWithin: colors.grey.light02, - - foregroundDisabled: colors.grey.light14, - backgroundDisabled: colors.grey.light02, - borderDisabled: colors.grey.light02, - shadowDisabled: colors.grey.light02, + foregroundDefault: colors.grey[50], + backgroundDefault: colors.grey[500], + borderDefault: colors.grey[500], + shadowDefault: colors.grey[500], + + foregroundHover: colors.grey[50], + backgroundHover: colors.grey[500], + borderHover: colors.grey[500], + shadowHover: colors.grey[500], + + foregroundActive: colors.grey[50], + backgroundActive: colors.grey[500], + borderActive: colors.grey[500], + shadowActive: colors.grey[500], + + foregroundFocus: colors.grey[50], + backgroundFocus: colors.grey[500], + borderFocus: colors.grey[500], + shadowFocus: colors.grey[500], + + foregroundFocusWithin: colors.grey[50], + backgroundFocusWithin: colors.grey[500], + borderFocusWithin: colors.grey[500], + shadowFocusWithin: colors.grey[500], + + foregroundDisabled: colors.grey[50], + backgroundDisabled: colors.grey[500], + borderDisabled: colors.grey[500], + shadowDisabled: colors.grey[500], }, green: { foregroundDefault: colors.green[50], From f0c2964c1b853e98e4041a5d8662ebd926fbbd9c Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 20 Mar 2019 17:23:57 +0100 Subject: [PATCH 021/118] -fixed menu color example --- .../components/Menu/Variations/MenuExampleColor.shorthand.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx index 6fa827713a..2137a1462a 100644 --- a/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx +++ b/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { Menu, Flex, Provider } from '@stardust-ui/react' const items = [ { From 72850da438effd1567fd75f7a693b7fb48244805 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 21 Mar 2019 17:25:29 +0100 Subject: [PATCH 022/118] -vertical pointing border color fix -menu divider color fix --- .../src/themes/teams/components/Menu/menuDividerStyles.ts | 6 ++++-- .../src/themes/teams/components/Menu/menuItemStyles.ts | 6 +++--- .../react/src/themes/teams/components/Menu/menuStyles.ts | 4 +--- .../react/src/themes/teams/components/Menu/menuVariables.ts | 4 ++++ 4 files changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts b/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts index 4162ee62d1..5e87e05252 100644 --- a/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts @@ -4,8 +4,10 @@ import { MenuVariables } from './menuVariables' const menuDividerStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => { - // const borderColor = p.primary ? v.primaryBorderColor : v.borderColor - const borderColor = v.borderColor + const colorScheme = v.colorScheme[p.color ? p.color : p.primary ? 'primary' : 'default'] + const borderColor = p.primary + ? v.primaryBorderColor + : v.borderColor || colorScheme.borderDefault const borderType = p.vertical ? 'borderTop' : 'borderLeft' return p.content diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index 228d6b7148..8a1a618e2b 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -128,7 +128,7 @@ const itemSeparator = ({ props, variables: v, theme, colorScheme }): ICSSInJSSty width: pxToRem(1), height: '100%', ...(primary - ? { background: theme.siteVariables.colors.grey.light10 /* TODO: check this again */ } + ? { background: v.primaryBorderColor /* TODO: check this again */ } : { background: v.borderColor || colorScheme.borderDefault }), }, } @@ -251,11 +251,11 @@ const menuItemStyles: ComponentSlotStylesInput { verticalDividerMargin: `${pxToRem(8)} 0`, verticalItemBorderWidth: pxToRem(2), verticalItemBorderColor: 'transparent', + verticalPointingBorderColor: siteVars.colorScheme.primary.borderActive, // TODO: why is the default having primary color?! underlinedBottomBorderWidth: pxToRem(2), + primaryBorderColor: siteVars.colors.grey.light10, dividerHeight: pxToRem(1), borderWidth: pxToRem(1), From 4d53e35ff5ff3a12be98e6ccf9cff918df06c315 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 21 Mar 2019 17:37:43 +0100 Subject: [PATCH 023/118] -fixed icon only issues --- .../src/themes/teams/components/Menu/menuItemStyles.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index 8a1a618e2b..baa604d092 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -266,12 +266,12 @@ const menuItemStyles: ComponentSlotStylesInput Date: Thu, 21 Mar 2019 17:40:10 +0100 Subject: [PATCH 024/118] -fixed disabled color From f186a442246662548f679643d455a61d3523399e Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 22 Mar 2019 11:39:33 +0100 Subject: [PATCH 025/118] -updates on the color scheme -updating label example --- .../LabelExampleColor.shorthand.tsx | 5 +- packages/react/src/themes/teams/colors.ts | 70 +++++++++++-------- .../teams/components/Divider/dividerStyles.ts | 2 +- .../Header/headerDescriptionStyles.ts | 2 +- .../teams/components/Header/headerStyles.ts | 2 +- .../teams/components/Label/labelStyles.ts | 4 +- .../teams/components/Label/labelVariables.ts | 4 +- .../teams/components/Menu/menuStyles.ts | 4 +- .../teams/components/Segment/segmentStyles.ts | 4 +- .../teams/components/Text/textStyles.ts | 2 +- .../react/src/themes/teams/siteVariables.ts | 9 ++- 11 files changed, 62 insertions(+), 46 deletions(-) diff --git a/docs/src/examples/components/Label/Variations/LabelExampleColor.shorthand.tsx b/docs/src/examples/components/Label/Variations/LabelExampleColor.shorthand.tsx index 26e8652fd7..c1e81fa98f 100644 --- a/docs/src/examples/components/Label/Variations/LabelExampleColor.shorthand.tsx +++ b/docs/src/examples/components/Label/Variations/LabelExampleColor.shorthand.tsx @@ -1,10 +1,11 @@ import * as React from 'react' import { Label, Provider } from '@stardust-ui/react' +import * as _ from 'lodash' const LabelExampleColor = () => ( - Object.keys(colorScheme).map(color => ( + render={({ siteVariables: { primitiveColors, emphasisColors, naturalColors } }) => + _.keys({ ...primitiveColors, ...emphasisColors, ...naturalColors }).map(color => ( diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index 44a009bc18..682c3c0dec 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -1,4 +1,10 @@ -import { ColorPalette, ContextualColors, EmphasisColors, NaturalColors } from '../types' +import { + ColorPalette, + ContextualColors, + EmphasisColors, + NaturalColors, + PrimitiveColors, +} from '../types' import { ColorVariants, ColorSchemeMapping } from 'src/themes/types' export const emphasisColors: EmphasisColors = { @@ -168,6 +174,11 @@ const emphasisAndNaturalColors: EmphasisColors & NaturalColors = { ...naturalColors, } +export const primitiveColors: PrimitiveColors = { + black: '#000', + white: '#fff', +} + export type ThemeColors = Partial<{ darkOrange: ColorVariants postOrange: ColorVariants @@ -178,10 +189,7 @@ export type ThemeColors = Partial<{ export const colors: ColorPalette = { ...emphasisAndNaturalColors, ...contextualColors, - - // Primitive colors - black: '#000', - white: '#fff', // siteVariables.white + ...primitiveColors, } export const colorScheme: ColorSchemeMapping = { @@ -217,8 +225,8 @@ export const colorScheme: ColorSchemeMapping = { shadowDisabled: colors.grey[500], }, black: { - foregroundDefault: colors.white, - backgroundDefault: colors.black, + foregroundDefault: colors.black, + backgroundDefault: colors.white, borderDefault: colors.black, shadowDefault: colors.black, @@ -248,8 +256,8 @@ export const colorScheme: ColorSchemeMapping = { shadowDisabled: colors.black, }, white: { - foregroundDefault: colors.black, - backgroundDefault: colors.white, + foregroundDefault: colors.white, + backgroundDefault: colors.black, borderDefault: colors.white, shadowDefault: colors.white, @@ -279,8 +287,8 @@ export const colorScheme: ColorSchemeMapping = { shadowDisabled: colors.white, }, primary: { - foregroundDefault: colors.primary[50], - backgroundDefault: colors.primary[500], + foregroundDefault: colors.primary[500], + backgroundDefault: colors.primary[50], borderDefault: colors.primary[500], shadowDefault: colors.primary[500], @@ -310,8 +318,8 @@ export const colorScheme: ColorSchemeMapping = { shadowDisabled: colors.primary[500], }, grey: { - foregroundDefault: colors.grey[50], - backgroundDefault: colors.grey[500], + foregroundDefault: colors.grey[500], + backgroundDefault: colors.grey[50], borderDefault: colors.grey[500], shadowDefault: colors.grey[500], @@ -341,8 +349,8 @@ export const colorScheme: ColorSchemeMapping = { shadowDisabled: colors.grey[500], }, green: { - foregroundDefault: colors.green[50], - backgroundDefault: colors.green[500], + foregroundDefault: colors.green[500], + backgroundDefault: colors.green[50], borderDefault: colors.green[500], shadowDefault: colors.green[500], @@ -372,8 +380,8 @@ export const colorScheme: ColorSchemeMapping = { shadowDisabled: colors.green[500], }, orange: { - foregroundDefault: colors.black, - backgroundDefault: colors.orange[500], + foregroundDefault: colors.orange[500], + backgroundDefault: colors.black, borderDefault: colors.orange[500], shadowDefault: colors.orange[500], @@ -403,8 +411,8 @@ export const colorScheme: ColorSchemeMapping = { shadowDisabled: colors.orange[500], }, pink: { - foregroundDefault: colors.pink[50], - backgroundDefault: colors.pink[500], + foregroundDefault: colors.pink[500], + backgroundDefault: colors.pink[50], borderDefault: colors.pink[500], shadowDefault: colors.pink[500], @@ -448,8 +456,8 @@ export const colorScheme: ColorSchemeMapping = { // darkerDefault: colors.red[500], // darkestDefault: colors.red[500], - foregroundDefault: colors.red[50], - backgroundDefault: colors.red[500], + foregroundDefault: colors.red[500], + backgroundDefault: colors.red[50], borderDefault: colors.red[500], shadowDefault: colors.red[500], @@ -479,8 +487,8 @@ export const colorScheme: ColorSchemeMapping = { shadowDisabled: colors.red[500], }, yellow: { - foregroundDefault: colors.black, - backgroundDefault: colors.yellow[500], + foregroundDefault: colors.yellow[500], + backgroundDefault: colors.black, borderDefault: colors.yellow[500], shadowDefault: colors.yellow[500], @@ -510,8 +518,8 @@ export const colorScheme: ColorSchemeMapping = { shadowDisabled: colors.yellow[500], }, darkOrange: { - foregroundDefault: colors.darkOrange[50], - backgroundDefault: colors.darkOrange[500], + foregroundDefault: colors.darkOrange[500], + backgroundDefault: colors.darkOrange[50], borderDefault: colors.darkOrange[500], shadowDefault: colors.darkOrange[500], @@ -541,8 +549,8 @@ export const colorScheme: ColorSchemeMapping = { shadowDisabled: colors.darkOrange[500], }, lightGreen: { - foregroundDefault: colors.black, - backgroundDefault: colors.lightGreen[500], + foregroundDefault: colors.lightGreen[500], + backgroundDefault: colors.black, borderDefault: colors.lightGreen[500], shadowDefault: colors.lightGreen[500], @@ -572,8 +580,8 @@ export const colorScheme: ColorSchemeMapping = { shadowDisabled: colors.lightGreen[500], }, magenta: { - foregroundDefault: colors.magenta[50], - backgroundDefault: colors.magenta[500], + foregroundDefault: colors.magenta[500], + backgroundDefault: colors.magenta[50], borderDefault: colors.magenta[500], shadowDefault: colors.magenta[500], @@ -603,8 +611,8 @@ export const colorScheme: ColorSchemeMapping = { shadowDisabled: colors.magenta[500], }, postOrange: { - foregroundDefault: colors.black, - backgroundDefault: colors.postOrange[500], + foregroundDefault: colors.postOrange[500], + backgroundDefault: colors.black, borderDefault: colors.postOrange[500], shadowDefault: colors.postOrange[500], diff --git a/packages/react/src/themes/teams/components/Divider/dividerStyles.ts b/packages/react/src/themes/teams/components/Divider/dividerStyles.ts index c86776d8ad..4ff8fe78f7 100644 --- a/packages/react/src/themes/teams/components/Divider/dividerStyles.ts +++ b/packages/react/src/themes/teams/components/Divider/dividerStyles.ts @@ -17,7 +17,7 @@ const dividerStyles: ComponentSlotStylesInput = { const colors = v.colorScheme[p.color] return { display: 'block', - color: _.get(colors, 'borderDefault', v.color), + color: _.get(colors, 'foregroundDefault', v.color), textAlign: p.textAlign as TextAlignProperty, ...(p.description && { marginBottom: 0 }), } diff --git a/packages/react/src/themes/teams/components/Label/labelStyles.ts b/packages/react/src/themes/teams/components/Label/labelStyles.ts index 187f780632..6179fa7f8d 100644 --- a/packages/react/src/themes/teams/components/Label/labelStyles.ts +++ b/packages/react/src/themes/teams/components/Label/labelStyles.ts @@ -15,8 +15,8 @@ const labelStyles: ComponentSlotStylesInput = { overflow: 'hidden', height: v.height, lineHeight: v.height, - color: colors.foregroundDefault, - backgroundColor: colors.backgroundDefault, + color: colors.backgroundDefault, + backgroundColor: colors.foregroundDefault, fontSize: pxToRem(14), borderRadius: pxToRem(3), padding: v.padding, diff --git a/packages/react/src/themes/teams/components/Label/labelVariables.ts b/packages/react/src/themes/teams/components/Label/labelVariables.ts index 00f7e0eaff..746d29b9d4 100644 --- a/packages/react/src/themes/teams/components/Label/labelVariables.ts +++ b/packages/react/src/themes/teams/components/Label/labelVariables.ts @@ -18,8 +18,8 @@ export default (siteVars: SiteVariablesPrepared): LabelVariables => { ...siteVars.colorScheme, default: { ...siteVars.colorScheme.default, - foregroundDefault: color, - backgroundDefault: 'rgb(232, 232, 232)', + backgroundDefault: color, + foregroundDefault: 'rgb(232, 232, 232)', }, } diff --git a/packages/react/src/themes/teams/components/Menu/menuStyles.ts b/packages/react/src/themes/teams/components/Menu/menuStyles.ts index 19a2c75269..e2bd69b6d0 100644 --- a/packages/react/src/themes/teams/components/Menu/menuStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuStyles.ts @@ -22,13 +22,13 @@ export default { minHeight: pxToRem(24), margin: 0, padding: 0, - color: v.color || colorScheme.foregroundDefault, + color: v.color || colorScheme.backgroundDefault, backgroundColor: v.backgroundColor || 'inherit', listStyleType: 'none', ...(iconOnly && { alignItems: 'center' }), ...(vertical && { flexDirection: 'column', - color: v.verticalColor || colorScheme.foregroundDefault, + color: v.verticalColor || colorScheme.backgroundDefault, backgroundColor: v.verticalBackgroundColor || theme.siteVariables.colors.white, padding: `${pxToRem(8)} 0`, ...(submenu && { diff --git a/packages/react/src/themes/teams/components/Segment/segmentStyles.ts b/packages/react/src/themes/teams/components/Segment/segmentStyles.ts index 6dfd9e6ef1..75386f094d 100644 --- a/packages/react/src/themes/teams/components/Segment/segmentStyles.ts +++ b/packages/react/src/themes/teams/components/Segment/segmentStyles.ts @@ -15,10 +15,10 @@ const segmentStyles: ComponentSlotStylesInput = boxShadow: `0 1px 1px 1px ${v.boxShadowColor}`, color: v.color, backgroundColor: v.backgroundColor, - ...(p.color && { borderColor: colors.borderDefault }), + ...(p.color && { borderColor: colors.foregroundDefault }), ...(p.inverted && { color: v.backgroundColor, - backgroundColor: p.color ? colors.borderDefault : v.color, + backgroundColor: p.color ? colors.foregroundDefault : v.color, }), } }, diff --git a/packages/react/src/themes/teams/components/Text/textStyles.ts b/packages/react/src/themes/teams/components/Text/textStyles.ts index 05cfd21e76..0157fc1270 100644 --- a/packages/react/src/themes/teams/components/Text/textStyles.ts +++ b/packages/react/src/themes/teams/components/Text/textStyles.ts @@ -10,7 +10,7 @@ export default { const colors = v.colorScheme[color || 'default'] return { ...(color && { - color: colors.borderDefault, + color: colors.foregroundDefault, }), ...(atMention === 'me' && { fontWeight: v.atMentionMeFontWeight, diff --git a/packages/react/src/themes/teams/siteVariables.ts b/packages/react/src/themes/teams/siteVariables.ts index 396333c171..60414fc812 100644 --- a/packages/react/src/themes/teams/siteVariables.ts +++ b/packages/react/src/themes/teams/siteVariables.ts @@ -9,7 +9,14 @@ export const htmlFontSize = '10px' // what 1rem represents // // COLORS // -export { colors, contextualColors, emphasisColors, naturalColors, colorScheme } from './colors' +export { + colors, + contextualColors, + emphasisColors, + naturalColors, + primitiveColors, + colorScheme, +} from './colors' // export const grey02 = '#484644' // no mapping color // export const grey03 = '#605E5C' // no mapping color From ce972b213a50d7c65b0728328817acb5114f7b54 Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 22 Mar 2019 12:23:18 +0100 Subject: [PATCH 026/118] -removed unnecessary vertical color -fixed underlined hover border --- .../react/src/themes/teams/components/Menu/menuItemStyles.ts | 2 +- packages/react/src/themes/teams/components/Menu/menuStyles.ts | 1 - .../react/src/themes/teams/components/Menu/menuVariables.ts | 2 -- 3 files changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index baa604d092..ea70f3ed97 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -428,7 +428,7 @@ const menuItemStyles: ComponentSlotStylesInput { lineHeightBase: siteVars.lineHeightMedium, horizontalPadding: `${pxToRem(14)} ${pxToRem(18)} ${pxToRem(14)} ${pxToRem(18)}`, - verticalColor: undefined, verticalBackgroundColor: undefined, verticalItemPadding: `${pxToRem(9)} ${pxToRem(16)} ${pxToRem(9)} ${pxToRem(16)}`, verticalBoxShadow: siteVars.shadowLevel3, From b9f68efd66397ab9086ab46fcfbd97f9ff5145bf Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 22 Mar 2019 13:14:45 +0100 Subject: [PATCH 027/118] -fixed icons -changed focus color styles --- .../themes/teams/components/Icon/iconStyles.ts | 17 ++++++++++------- .../teams/components/Menu/menuItemStyles.ts | 15 +++++++++++++-- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/packages/react/src/themes/teams/components/Icon/iconStyles.ts b/packages/react/src/themes/teams/components/Icon/iconStyles.ts index 743cffe72f..6b0a169bef 100644 --- a/packages/react/src/themes/teams/components/Icon/iconStyles.ts +++ b/packages/react/src/themes/teams/components/Icon/iconStyles.ts @@ -88,8 +88,11 @@ const getIconSize = (size: SizeValue, sizeModifier: IconSizeModifier): number => return modifiedSizes[size] && modifiedSizes[size][sizeModifier] } -const getIconColor = (colorProp: string, variables, colors) => - _.get(colors, colorProp, variables.color || 'currentColor') +const getIconColor = (variables, colors) => { + console.log(variables.color) + colors && console.log(colors.foregroundDefault) + return _.get(colors, 'foregroundDefault', variables.color || 'currentColor') +} const iconStyles: ComponentSlotStylesInput = { root: ({ @@ -97,7 +100,7 @@ const iconStyles: ComponentSlotStylesInput = { variables: v, theme, }): ICSSInJSStyle => { - const colors = v.colorScheme[color || 'default'] + const colors = v.colorScheme[color] const iconSpec = theme.icons[name] const rtl = theme.rtl const isFontBased = name && (!iconSpec || !iconSpec.isSvg) @@ -113,7 +116,7 @@ const iconStyles: ComponentSlotStylesInput = { ...(isFontBased && getFontStyles(getIconSize(size, v.sizeModifier), name)), ...(isFontBased && { - color: getIconColor(color, v, colors), + color: getIconColor(v, colors), fontWeight: 900, // required for the fontAwesome to render ...(disabled && { @@ -126,7 +129,7 @@ const iconStyles: ComponentSlotStylesInput = { ...(circular && { ...getPaddedStyle(), borderRadius: '50%' }), ...((bordered || v.borderColor) && - getBorderedStyles(v.borderColor || getIconColor(color, v, colors))), + getBorderedStyles(v.borderColor || getIconColor(v, colors))), ...(!rtl && { transform: `rotate(${rotate}deg)`, @@ -159,14 +162,14 @@ const iconStyles: ComponentSlotStylesInput = { }, svg: ({ props: { size, color, disabled }, variables: v }): ICSSInJSStyle => { - const colors = v.colorScheme[color || 'default'] + const colors = v.colorScheme[color] const iconSizeInRems = pxToRem(getIconSize(size, v.sizeModifier)) return { display: 'block', width: iconSizeInRems, height: iconSizeInRems, - fill: getIconColor(color, v, colors), + fill: getIconColor(v, colors), ...(disabled && { fill: v.disabledColor, diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index ea70f3ed97..d5fe11e7c7 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -51,8 +51,19 @@ const getFocusedStyles = ({ const { primary, color, underlined, isFromKeyboard, active, vertical, pointing } = props if (active && !underlined && !vertical) return {} return { - color: primary || color ? colorScheme.foregroundFocus : 'inherit', - background: v.backgroundColorFocus || colorScheme.backgroundFocus, + ...(underlined + ? { + color, + } + : primary || color + ? { + color: colorScheme.foregroundFocus, + background: v.backgroundColorHover || colorScheme.backgroundHover, + } + : { + color: v.color, + background: v.backgroundColorHover || colorScheme.backgroundHover, + }), ...(vertical && isFromKeyboard && !pointing && !primary ? { From 0de5235d62340b26c70a4c0aea6bcb9122ae488a Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 22 Mar 2019 14:40:31 +0100 Subject: [PATCH 028/118] -alert fixes -underlined menu fixes --- .../teams/components/Alert/alertStyles.ts | 4 ++-- .../teams/components/Alert/alertVariables.ts | 4 ++-- .../teams/components/Menu/menuItemStyles.ts | 24 ++++--------------- 3 files changed, 9 insertions(+), 23 deletions(-) diff --git a/packages/react/src/themes/teams/components/Alert/alertStyles.ts b/packages/react/src/themes/teams/components/Alert/alertStyles.ts index 2ca5e0eb3e..0487141f0d 100644 --- a/packages/react/src/themes/teams/components/Alert/alertStyles.ts +++ b/packages/react/src/themes/teams/components/Alert/alertStyles.ts @@ -27,8 +27,8 @@ const getIntentColorsFromProps = ( if (p.info) { return { color: colors.grey[900], - backgroundColor: siteVars.gray09, - borderColor: siteVars.gray08, + backgroundColor: siteVars.colors.grey.light09, + borderColor: siteVars.colors.grey.light08, } } diff --git a/packages/react/src/themes/teams/components/Alert/alertVariables.ts b/packages/react/src/themes/teams/components/Alert/alertVariables.ts index 19001d534a..6e2be210cc 100644 --- a/packages/react/src/themes/teams/components/Alert/alertVariables.ts +++ b/packages/react/src/themes/teams/components/Alert/alertVariables.ts @@ -26,8 +26,8 @@ export default (siteVars: SiteVariablesPrepared): AlertVariables => { borderWidth: '1px', borderRadius: pxToRem(3), backgroundColor: siteVars.colors.grey[50], // $app-white - borderColor: siteVars.gray06, - color: siteVars.gray02, + borderColor: siteVars.colors.grey.light06, + color: siteVars.colors.grey.light02, fontWeight: siteVars.fontWeightSemibold, minHeight, padding: `0 0 0 ${pxToRem(16)}`, diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index d5fe11e7c7..0b889fdc74 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -51,20 +51,8 @@ const getFocusedStyles = ({ const { primary, color, underlined, isFromKeyboard, active, vertical, pointing } = props if (active && !underlined && !vertical) return {} return { - ...(underlined - ? { - color, - } - : primary || color - ? { - color: colorScheme.foregroundFocus, - background: v.backgroundColorHover || colorScheme.backgroundHover, - } - : { - color: v.color, - background: v.backgroundColorHover || colorScheme.backgroundHover, - }), - + color: primary || color ? colorScheme.foregroundFocus : v.colorActive, + background: v.backgroundColorFocus || colorScheme.backgroundFocus, ...(vertical && isFromKeyboard && !pointing && !primary ? { borderWidth: 1, @@ -83,20 +71,18 @@ const getFocusedStyles = ({ const getHoverStyles = ({ props, variables: v, - color, colorScheme, }: { props: MenuItemPropsAndState variables: MenuVariables - color: string colorScheme: any }): ICSSInJSStyle => { - const { primary, underlined, isFromKeyboard, active, vertical, pointing } = props + const { primary, underlined, isFromKeyboard, active, vertical, pointing, color } = props if (active && !underlined && !vertical) return {} return { ...(underlined && !isFromKeyboard ? { - color, + color: v.colorActive, } : primary || color ? { @@ -291,7 +277,7 @@ const menuItemStyles: ComponentSlotStylesInput Date: Fri, 22 Mar 2019 15:42:58 +0100 Subject: [PATCH 029/118] -update on the hover color --- .../teams/components/Menu/menuItemStyles.ts | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index 0b889fdc74..b395d6e0d4 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -77,10 +77,10 @@ const getHoverStyles = ({ variables: MenuVariables colorScheme: any }): ICSSInJSStyle => { - const { primary, underlined, isFromKeyboard, active, vertical, pointing, color } = props + const { primary, underlined, active, vertical, color } = props if (active && !underlined && !vertical) return {} return { - ...(underlined && !isFromKeyboard + ...(underlined ? { color: v.colorActive, } @@ -90,22 +90,9 @@ const getHoverStyles = ({ background: v.backgroundColorHover || colorScheme.backgroundHover, } : { - color: v.color, + color: v.colorActive, background: v.backgroundColorHover || colorScheme.backgroundHover, }), - - ...(vertical && isFromKeyboard && !pointing && !primary - ? { - borderWidth: 1, - borderStyle: 'solid', - borderColor: v.borderColorFocus, - outlineWidth: 1, - outlineStyle: 'solid', - outlineColor: v.outlineFocus, - margin: pxToRem(1), - background: v.backgroundColorFocus, - } - : {}), } } From 8a313febd1354b10c6591bd86fac89e91fec8234 Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 22 Mar 2019 17:52:10 +0100 Subject: [PATCH 030/118] -updates of vertical focus styles --- .../src/themes/teams/components/Menu/menuItemStyles.ts | 10 +++------- .../src/themes/teams/components/Menu/menuVariables.ts | 6 ++++-- packages/react/src/themes/types.ts | 5 ----- 3 files changed, 7 insertions(+), 14 deletions(-) diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index b395d6e0d4..d09b4d722e 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -55,14 +55,10 @@ const getFocusedStyles = ({ background: v.backgroundColorFocus || colorScheme.backgroundFocus, ...(vertical && isFromKeyboard && !pointing && !primary ? { - borderWidth: 1, - borderStyle: 'solid', - borderColor: v.borderColorFocus, - outlineWidth: 1, - outlineStyle: 'solid', - outlineColor: v.outlineFocus, + border: `solid 1px ${v.borderColorFocus}`, + outline: `solid 1px ${v.outlineColorFocus}`, margin: pxToRem(1), - background: v.backgroundColorFocus || colorScheme.backgroundFocus, + background: v.verticalBackgroundColorFocus || colorScheme.backgroundFocus, } : {}), } diff --git a/packages/react/src/themes/teams/components/Menu/menuVariables.ts b/packages/react/src/themes/teams/components/Menu/menuVariables.ts index e64013ba94..7fc9b9cda3 100644 --- a/packages/react/src/themes/teams/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams/components/Menu/menuVariables.ts @@ -15,7 +15,7 @@ export interface MenuVariables { borderColorActive: string borderColorFocus: string - outlineFocus: string + outlineColorFocus: string colorActive: string iconOnlyColorActive: string @@ -33,6 +33,7 @@ export interface MenuVariables { verticalItemBorderWidth: string verticalItemBorderColor: string verticalPointingBorderColor: string + verticalBackgroundColorFocus: string underlinedBottomBorderWidth: string primaryBorderColor: string @@ -54,7 +55,7 @@ export default (siteVars: any): MenuVariables => { borderColorActive: undefined, borderColorFocus: siteVars.colors.white, - outlineFocus: siteVars.colors.black, + outlineColorFocus: siteVars.colors.black, backgroundColor: undefined, backgroundColorFocus: undefined, @@ -75,6 +76,7 @@ export default (siteVars: any): MenuVariables => { verticalItemBorderWidth: pxToRem(2), verticalItemBorderColor: 'transparent', verticalPointingBorderColor: siteVars.colorScheme.primary.borderActive, // TODO: why is the default having primary color?! + verticalBackgroundColorFocus: siteVars.colorScheme.grey.light09, underlinedBottomBorderWidth: pxToRem(2), primaryBorderColor: siteVars.colors.grey.light10, diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts index 024e9e1bbf..9a9ec80b3d 100644 --- a/packages/react/src/themes/types.ts +++ b/packages/react/src/themes/types.ts @@ -153,11 +153,6 @@ export type State = ObjectOf // ======================================================== export interface SiteVariablesInput extends ObjectOf { - colors?: ColorPalette - colorScheme?: ColorSchemeMapping - contextualColors?: ContextualColors - emphasisColors?: EmphasisColors - naturalColors?: NaturalColorsStrict htmlFontSize?: string } From f4b9cec799d480fd770a29ca4c3d93cd2411dd6d Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 25 Mar 2019 11:49:45 +0100 Subject: [PATCH 031/118] -created functino for generating the colors scheme -init dark theme colors --- .../react/src/themes/teams-dark/colors.ts | 169 ++++++++ .../components/Menu/menuVariables.ts | 1 + packages/react/src/themes/teams/colors.ts | 390 +++--------------- 3 files changed, 223 insertions(+), 337 deletions(-) create mode 100644 packages/react/src/themes/teams-dark/colors.ts diff --git a/packages/react/src/themes/teams-dark/colors.ts b/packages/react/src/themes/teams-dark/colors.ts new file mode 100644 index 0000000000..7bdc54cc96 --- /dev/null +++ b/packages/react/src/themes/teams-dark/colors.ts @@ -0,0 +1,169 @@ +import { colors } from '../teams/siteVariables' +import { ColorSchemeMapping } from 'src/themes/types' + +const createColorScheme = (color: string, customValues = {}) => { + return { + foregroundDefault: colors[color][500], + backgroundDefault: colors[color][50], + borderDefault: colors[color][500], + shadowDefault: colors[color][500], + + foregroundHover: colors[color][50], + backgroundHover: colors[color][500], + borderHover: colors[color][500], + shadowHover: colors[color][500], + + foregroundActive: colors[color][50], + backgroundActive: colors[color][500], + borderActive: colors[color][500], + shadowActive: colors[color][500], + + foregroundFocus: colors[color][50], + backgroundFocus: colors[color][500], + borderFocus: colors[color][500], + shadowFocus: colors[color][500], + + foregroundFocusWithin: colors[color][50], + backgroundFocusWithin: colors[color][500], + borderFocusWithin: colors[color][500], + shadowFocusWithin: colors[color][500], + + foregroundDisabled: colors[color][50], + backgroundDisabled: colors[color][500], + borderDisabled: colors[color][500], + shadowDisabled: colors[color][500], + ...customValues, + } +} + +export const colorScheme: ColorSchemeMapping = { + default: createColorScheme('grey', { + foregroundDefault: colors.grey.light02, + backgroundDefault: colors.grey[500], + borderDefault: colors.grey.light08, + + foregroundHover: colors.black, + backgroundHover: colors.grey.light14, + + foregroundActive: colors.black, + backgroundActive: colors.grey.light10, + + foregroundFocus: colors.black, + backgroundFocus: colors.grey.light14, + + foregroundFocusWithin: colors.black, + + foregroundDisabled: colors.black, + }), + black: { + foregroundDefault: colors.black, + backgroundDefault: colors.white, + borderDefault: colors.black, + shadowDefault: colors.black, + + foregroundHover: colors.white, + backgroundHover: colors.black, + borderHover: colors.black, + shadowHover: colors.black, + + foregroundActive: colors.white, + backgroundActive: colors.black, + borderActive: colors.black, + shadowActive: colors.black, + + foregroundFocus: colors.white, + backgroundFocus: colors.black, + borderFocus: colors.black, + shadowFocus: colors.black, + + foregroundFocusWithin: colors.white, + backgroundFocusWithin: colors.black, + borderFocusWithin: colors.black, + shadowFocusWithin: colors.black, + + foregroundDisabled: colors.white, + backgroundDisabled: colors.black, + borderDisabled: colors.black, + shadowDisabled: colors.black, + }, + white: { + foregroundDefault: colors.white, + backgroundDefault: colors.black, + borderDefault: colors.white, + shadowDefault: colors.white, + + foregroundHover: colors.black, + backgroundHover: colors.white, + borderHover: colors.white, + shadowHover: colors.white, + + foregroundActive: colors.black, + backgroundActive: colors.white, + borderActive: colors.white, + shadowActive: colors.white, + + foregroundFocus: colors.black, + backgroundFocus: colors.white, + borderFocus: colors.white, + shadowFocus: colors.white, + + foregroundFocusWithin: colors.black, + backgroundFocusWithin: colors.white, + borderFocusWithin: colors.white, + shadowFocusWithin: colors.white, + + foregroundDisabled: colors.black, + backgroundDisabled: colors.white, + borderDisabled: colors.white, + shadowDisabled: colors.white, + }, + primary: createColorScheme('primary', { + foregroundHover: colors.white, + backgroundHover: colors.primary[200], + + foregroundActive: colors.white, + backgroundActive: colors.primary.light08, + shadowActive: colors.primary[50], + + foregroundFocus: colors.white, + backgroundFocus: colors.primary[200], + }), + grey: createColorScheme('grey'), + green: createColorScheme('green'), + orange: createColorScheme('orange', { + backgroundDefault: colors.black, + foregroundHover: colors.black, + foregroundActive: colors.black, + foregroundFocus: colors.black, + foregroundFocusWithin: colors.black, + foregroundDisabled: colors.black, + }), + pink: createColorScheme('pink'), + red: createColorScheme('red'), + yellow: createColorScheme('yellow', { + backgroundDefault: colors.black, + foregroundHover: colors.black, + foregroundActive: colors.black, + foregroundFocus: colors.black, + foregroundFocusWithin: colors.black, + foregroundDisabled: colors.black, + }), + darkOrange: createColorScheme('darkOrange'), + lightGreen: createColorScheme('lightGreen', { + backgroundDefault: colors.black, + foregroundHover: colors.black, + foregroundActive: colors.black, + foregroundFocus: colors.black, + foregroundFocusWithin: colors.black, + foregroundDisabled: colors.black, + }), + magenta: createColorScheme('magenta'), + postOrange: createColorScheme('postOrange', { + backgroundDefault: colors.black, + foregroundHover: colors.black, + foregroundActive: colors.black, + foregroundFocus: colors.black, + foregroundFocusWithin: colors.black, + foregroundDisabled: colors.black, + }), +} diff --git a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts index 47cd96ce57..cbb32cd686 100644 --- a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts @@ -1,6 +1,7 @@ import { MenuVariables } from '../../../teams/components/Menu/menuVariables' export default (siteVars: any): Partial => ({ + color: siteVars.colors.grey.dark02, borderColor: siteVars.colors.white, backgroundColorFocus: 'transparent', diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index 682c3c0dec..d7eb6437e7 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -192,38 +192,60 @@ export const colors: ColorPalette = { ...primitiveColors, } +const createColorScheme = (color: string, customValues = {}) => { + return { + foregroundDefault: colors[color][500], + backgroundDefault: colors[color][50], + borderDefault: colors[color][500], + shadowDefault: colors[color][500], + + foregroundHover: colors[color][50], + backgroundHover: colors[color][500], + borderHover: colors[color][500], + shadowHover: colors[color][500], + + foregroundActive: colors[color][50], + backgroundActive: colors[color][500], + borderActive: colors[color][500], + shadowActive: colors[color][500], + + foregroundFocus: colors[color][50], + backgroundFocus: colors[color][500], + borderFocus: colors[color][500], + shadowFocus: colors[color][500], + + foregroundFocusWithin: colors[color][50], + backgroundFocusWithin: colors[color][500], + borderFocusWithin: colors[color][500], + shadowFocusWithin: colors[color][500], + + foregroundDisabled: colors[color][50], + backgroundDisabled: colors[color][500], + borderDisabled: colors[color][500], + shadowDisabled: colors[color][500], + ...customValues, + } +} + export const colorScheme: ColorSchemeMapping = { - default: { + default: createColorScheme('grey', { foregroundDefault: colors.grey.light02, backgroundDefault: colors.grey[500], borderDefault: colors.grey.light08, - shadowDefault: colors.grey[500], foregroundHover: colors.black, backgroundHover: colors.grey.light14, - borderHover: colors.grey[500], - shadowHover: colors.grey[500], foregroundActive: colors.black, backgroundActive: colors.grey.light10, - borderActive: colors.grey[500], - shadowActive: colors.grey[500], foregroundFocus: colors.black, backgroundFocus: colors.grey.light14, - borderFocus: colors.grey[500], - shadowFocus: colors.grey[500], foregroundFocusWithin: colors.black, - backgroundFocusWithin: colors.grey[500], - borderFocusWithin: colors.grey[500], - shadowFocusWithin: colors.grey[500], foregroundDisabled: colors.black, - backgroundDisabled: colors.grey[500], - borderDisabled: colors.grey[500], - shadowDisabled: colors.grey[500], - }, + }), black: { foregroundDefault: colors.black, backgroundDefault: colors.white, @@ -286,359 +308,53 @@ export const colorScheme: ColorSchemeMapping = { borderDisabled: colors.white, shadowDisabled: colors.white, }, - primary: { - foregroundDefault: colors.primary[500], - backgroundDefault: colors.primary[50], - borderDefault: colors.primary[500], - shadowDefault: colors.primary[500], - + primary: createColorScheme('primary', { foregroundHover: colors.white, backgroundHover: colors.primary[200], - borderHover: colors.primary[500], - shadowHover: colors.primary[500], foregroundActive: colors.white, backgroundActive: colors.primary.light08, - borderActive: colors.primary[500], shadowActive: colors.primary[50], foregroundFocus: colors.white, backgroundFocus: colors.primary[200], - borderFocus: colors.primary[500], - shadowFocus: colors.primary[500], - - foregroundFocusWithin: colors.primary[50], - backgroundFocusWithin: colors.primary[500], - borderFocusWithin: colors.primary[500], - shadowFocusWithin: colors.primary[500], - - foregroundDisabled: colors.primary[50], - backgroundDisabled: colors.primary[500], - borderDisabled: colors.primary[500], - shadowDisabled: colors.primary[500], - }, - grey: { - foregroundDefault: colors.grey[500], - backgroundDefault: colors.grey[50], - borderDefault: colors.grey[500], - shadowDefault: colors.grey[500], - - foregroundHover: colors.grey[50], - backgroundHover: colors.grey[500], - borderHover: colors.grey[500], - shadowHover: colors.grey[500], - - foregroundActive: colors.grey[50], - backgroundActive: colors.grey[500], - borderActive: colors.grey[500], - shadowActive: colors.grey[500], - - foregroundFocus: colors.grey[50], - backgroundFocus: colors.grey[500], - borderFocus: colors.grey[500], - shadowFocus: colors.grey[500], - - foregroundFocusWithin: colors.grey[50], - backgroundFocusWithin: colors.grey[500], - borderFocusWithin: colors.grey[500], - shadowFocusWithin: colors.grey[500], - - foregroundDisabled: colors.grey[50], - backgroundDisabled: colors.grey[500], - borderDisabled: colors.grey[500], - shadowDisabled: colors.grey[500], - }, - green: { - foregroundDefault: colors.green[500], - backgroundDefault: colors.green[50], - borderDefault: colors.green[500], - shadowDefault: colors.green[500], - - foregroundHover: colors.green[50], - backgroundHover: colors.green[500], - borderHover: colors.green[500], - shadowHover: colors.green[500], - - foregroundActive: colors.green[50], - backgroundActive: colors.green[500], - borderActive: colors.green[500], - shadowActive: colors.green[500], - - foregroundFocus: colors.green[50], - backgroundFocus: colors.green[500], - borderFocus: colors.green[500], - shadowFocus: colors.green[500], - - foregroundFocusWithin: colors.green[50], - backgroundFocusWithin: colors.green[500], - borderFocusWithin: colors.green[500], - shadowFocusWithin: colors.green[500], - - foregroundDisabled: colors.green[50], - backgroundDisabled: colors.green[500], - borderDisabled: colors.green[500], - shadowDisabled: colors.green[500], - }, - orange: { - foregroundDefault: colors.orange[500], + }), + grey: createColorScheme('grey'), + green: createColorScheme('green'), + orange: createColorScheme('orange', { backgroundDefault: colors.black, - borderDefault: colors.orange[500], - shadowDefault: colors.orange[500], - foregroundHover: colors.black, - backgroundHover: colors.orange[500], - borderHover: colors.orange[500], - shadowHover: colors.orange[500], - foregroundActive: colors.black, - backgroundActive: colors.orange[500], - borderActive: colors.orange[500], - shadowActive: colors.orange[500], - foregroundFocus: colors.black, - backgroundFocus: colors.orange[500], - borderFocus: colors.orange[500], - shadowFocus: colors.orange[500], - foregroundFocusWithin: colors.black, - backgroundFocusWithin: colors.orange[500], - borderFocusWithin: colors.orange[500], - shadowFocusWithin: colors.orange[500], - foregroundDisabled: colors.black, - backgroundDisabled: colors.orange[500], - borderDisabled: colors.orange[500], - shadowDisabled: colors.orange[500], - }, - pink: { - foregroundDefault: colors.pink[500], - backgroundDefault: colors.pink[50], - borderDefault: colors.pink[500], - shadowDefault: colors.pink[500], - - foregroundHover: colors.pink[50], - backgroundHover: colors.pink[500], - borderHover: colors.pink[500], - shadowHover: colors.pink[500], - - foregroundActive: colors.pink[50], - backgroundActive: colors.pink[500], - borderActive: colors.pink[500], - shadowActive: colors.pink[500], - - foregroundFocus: colors.pink[50], - backgroundFocus: colors.pink[500], - borderFocus: colors.pink[500], - shadowFocus: colors.pink[500], - - foregroundFocusWithin: colors.pink[50], - backgroundFocusWithin: colors.pink[500], - borderFocusWithin: colors.pink[500], - shadowFocusWithin: colors.pink[500], - - foregroundDisabled: colors.pink[50], - backgroundDisabled: colors.pink[500], - borderDisabled: colors.pink[500], - shadowDisabled: colors.pink[500], - }, - red: { - // red02: colors.red[500], - // red57: colors.red[500], - // lightDefault: colors.red[50], - // lightDefault: colors.red[50], - // lightDefault: colors.red[50], - // lightDefault: colors.red[50], - // lightDefault: colors.red[50], - // lightDefault: colors.red[50], - // lightDefault: colors.red[50], - // Default: colors.red[50], - // darkDefault: colors.red[50], - // darkerDefault: colors.red[500], - // darkestDefault: colors.red[500], - - foregroundDefault: colors.red[500], - backgroundDefault: colors.red[50], - borderDefault: colors.red[500], - shadowDefault: colors.red[500], - - foregroundHover: colors.red[50], - backgroundHover: colors.red[500], - borderHover: colors.red[500], - shadowHover: colors.red[500], - - foregroundActive: colors.red[50], - backgroundActive: colors.red[500], - borderActive: colors.red[500], - shadowActive: colors.red[500], - - foregroundFocus: colors.red[50], - backgroundFocus: colors.red[500], - borderFocus: colors.red[500], - shadowFocus: colors.red[500], - - foregroundFocusWithin: colors.red[50], - backgroundFocusWithin: colors.red[500], - borderFocusWithin: colors.red[500], - shadowFocusWithin: colors.red[500], - - foregroundDisabled: colors.red[50], - backgroundDisabled: colors.red[500], - borderDisabled: colors.red[500], - shadowDisabled: colors.red[500], - }, - yellow: { - foregroundDefault: colors.yellow[500], + }), + pink: createColorScheme('pink'), + red: createColorScheme('red'), + yellow: createColorScheme('yellow', { backgroundDefault: colors.black, - borderDefault: colors.yellow[500], - shadowDefault: colors.yellow[500], - foregroundHover: colors.black, - backgroundHover: colors.yellow[500], - borderHover: colors.yellow[500], - shadowHover: colors.yellow[500], - foregroundActive: colors.black, - backgroundActive: colors.yellow[500], - borderActive: colors.yellow[500], - shadowActive: colors.yellow[500], - foregroundFocus: colors.black, - backgroundFocus: colors.yellow[500], - borderFocus: colors.yellow[500], - shadowFocus: colors.yellow[500], - foregroundFocusWithin: colors.black, - backgroundFocusWithin: colors.yellow[500], - borderFocusWithin: colors.yellow[500], - shadowFocusWithin: colors.yellow[500], - foregroundDisabled: colors.black, - backgroundDisabled: colors.yellow[500], - borderDisabled: colors.yellow[500], - shadowDisabled: colors.yellow[500], - }, - darkOrange: { - foregroundDefault: colors.darkOrange[500], - backgroundDefault: colors.darkOrange[50], - borderDefault: colors.darkOrange[500], - shadowDefault: colors.darkOrange[500], - - foregroundHover: colors.darkOrange[50], - backgroundHover: colors.darkOrange[500], - borderHover: colors.darkOrange[500], - shadowHover: colors.darkOrange[500], - - foregroundActive: colors.darkOrange[50], - backgroundActive: colors.darkOrange[500], - borderActive: colors.darkOrange[500], - shadowActive: colors.darkOrange[500], - - foregroundFocus: colors.darkOrange[50], - backgroundFocus: colors.darkOrange[500], - borderFocus: colors.darkOrange[500], - shadowFocus: colors.darkOrange[500], - - foregroundFocusWithin: colors.darkOrange[50], - backgroundFocusWithin: colors.darkOrange[500], - borderFocusWithin: colors.darkOrange[500], - shadowFocusWithin: colors.darkOrange[500], - - foregroundDisabled: colors.darkOrange[50], - backgroundDisabled: colors.darkOrange[500], - borderDisabled: colors.darkOrange[500], - shadowDisabled: colors.darkOrange[500], - }, - lightGreen: { - foregroundDefault: colors.lightGreen[500], + }), + darkOrange: createColorScheme('darkOrange'), + lightGreen: createColorScheme('lightGreen', { backgroundDefault: colors.black, - borderDefault: colors.lightGreen[500], - shadowDefault: colors.lightGreen[500], - foregroundHover: colors.black, - backgroundHover: colors.lightGreen[500], - borderHover: colors.lightGreen[500], - shadowHover: colors.lightGreen[500], - foregroundActive: colors.black, - backgroundActive: colors.lightGreen[500], - borderActive: colors.lightGreen[500], - shadowActive: colors.lightGreen[500], - foregroundFocus: colors.black, - backgroundFocus: colors.lightGreen[500], - borderFocus: colors.lightGreen[500], - shadowFocus: colors.lightGreen[500], - foregroundFocusWithin: colors.black, - backgroundFocusWithin: colors.lightGreen[500], - borderFocusWithin: colors.lightGreen[500], - shadowFocusWithin: colors.lightGreen[500], - foregroundDisabled: colors.black, - backgroundDisabled: colors.lightGreen[500], - borderDisabled: colors.lightGreen[500], - shadowDisabled: colors.lightGreen[500], - }, - magenta: { - foregroundDefault: colors.magenta[500], - backgroundDefault: colors.magenta[50], - borderDefault: colors.magenta[500], - shadowDefault: colors.magenta[500], - - foregroundHover: colors.magenta[50], - backgroundHover: colors.magenta[500], - borderHover: colors.magenta[500], - shadowHover: colors.magenta[500], - - foregroundActive: colors.magenta[50], - backgroundActive: colors.magenta[500], - borderActive: colors.magenta[500], - shadowActive: colors.magenta[500], - - foregroundFocus: colors.magenta[50], - backgroundFocus: colors.magenta[500], - borderFocus: colors.magenta[500], - shadowFocus: colors.magenta[500], - - foregroundFocusWithin: colors.magenta[50], - backgroundFocusWithin: colors.magenta[500], - borderFocusWithin: colors.magenta[500], - shadowFocusWithin: colors.magenta[500], - - foregroundDisabled: colors.magenta[50], - backgroundDisabled: colors.magenta[500], - borderDisabled: colors.magenta[500], - shadowDisabled: colors.magenta[500], - }, - postOrange: { - foregroundDefault: colors.postOrange[500], + }), + magenta: createColorScheme('magenta'), + postOrange: createColorScheme('postOrange', { backgroundDefault: colors.black, - borderDefault: colors.postOrange[500], - shadowDefault: colors.postOrange[500], - foregroundHover: colors.black, - backgroundHover: colors.postOrange[500], - borderHover: colors.postOrange[500], - shadowHover: colors.postOrange[500], - foregroundActive: colors.black, - backgroundActive: colors.postOrange[500], - borderActive: colors.postOrange[500], - shadowActive: colors.postOrange[500], - foregroundFocus: colors.black, - backgroundFocus: colors.postOrange[500], - borderFocus: colors.postOrange[500], - shadowFocus: colors.postOrange[500], - foregroundFocusWithin: colors.black, - backgroundFocusWithin: colors.postOrange[500], - borderFocusWithin: colors.postOrange[500], - shadowFocusWithin: colors.postOrange[500], - foregroundDisabled: colors.black, - backgroundDisabled: colors.postOrange[500], - borderDisabled: colors.postOrange[500], - shadowDisabled: colors.postOrange[500], - }, + }), } From 0c67096ac9e8a98bd50f4cc0d1b498dc08eb17eb Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 25 Mar 2019 12:46:56 +0100 Subject: [PATCH 032/118] -updated color scheme for dark theme --- packages/react/src/themes/teams-dark/colors.ts | 8 ++++---- .../themes/teams-dark/components/Menu/menuVariables.ts | 10 ++++------ packages/react/src/themes/teams-dark/siteVariables.ts | 1 + 3 files changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/react/src/themes/teams-dark/colors.ts b/packages/react/src/themes/teams-dark/colors.ts index 7bdc54cc96..f818eb459a 100644 --- a/packages/react/src/themes/teams-dark/colors.ts +++ b/packages/react/src/themes/teams-dark/colors.ts @@ -40,16 +40,16 @@ export const colorScheme: ColorSchemeMapping = { default: createColorScheme('grey', { foregroundDefault: colors.grey.light02, backgroundDefault: colors.grey[500], - borderDefault: colors.grey.light08, + borderDefault: colors.grey.dark08, foregroundHover: colors.black, - backgroundHover: colors.grey.light14, + backgroundHover: colors.grey.dark08, foregroundActive: colors.black, - backgroundActive: colors.grey.light10, + backgroundActive: colors.grey.dark08, foregroundFocus: colors.black, - backgroundFocus: colors.grey.light14, + backgroundFocus: colors.grey.dark08, foregroundFocusWithin: colors.black, diff --git a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts index cbb32cd686..0445ffccf3 100644 --- a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts @@ -1,14 +1,12 @@ import { MenuVariables } from '../../../teams/components/Menu/menuVariables' export default (siteVars: any): Partial => ({ - color: siteVars.colors.grey.dark02, - borderColor: siteVars.colors.white, - backgroundColorFocus: 'transparent', - - backgroundColorHover: siteVars.colors.grey.dark08, + colorScheme: siteVars.colorScheme, + color: siteVars.colors.grey.dark02, colorActive: siteVars.colors.white, - backgroundColorActive: siteVars.colors.grey.dark08, + + primaryBorderColor: siteVars.colors.grey.dark10, verticalBackgroundColor: siteVars.colors.grey.dark10, }) diff --git a/packages/react/src/themes/teams-dark/siteVariables.ts b/packages/react/src/themes/teams-dark/siteVariables.ts index c3709f90c9..5d8131168f 100644 --- a/packages/react/src/themes/teams-dark/siteVariables.ts +++ b/packages/react/src/themes/teams-dark/siteVariables.ts @@ -1,4 +1,5 @@ import { colors, naturalColors } from '../teams/siteVariables' +export { colorScheme } from './colors' // // COLORS From 703700b953449dfec5ce92bbc7285dd840a6df6a Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 25 Mar 2019 13:16:20 +0100 Subject: [PATCH 033/118] -fixed vertical focus background --- .../react/src/themes/teams/components/Menu/menuVariables.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/themes/teams/components/Menu/menuVariables.ts b/packages/react/src/themes/teams/components/Menu/menuVariables.ts index 7fc9b9cda3..af0e4820d8 100644 --- a/packages/react/src/themes/teams/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams/components/Menu/menuVariables.ts @@ -76,7 +76,7 @@ export default (siteVars: any): MenuVariables => { verticalItemBorderWidth: pxToRem(2), verticalItemBorderColor: 'transparent', verticalPointingBorderColor: siteVars.colorScheme.primary.borderActive, // TODO: why is the default having primary color?! - verticalBackgroundColorFocus: siteVars.colorScheme.grey.light09, + verticalBackgroundColorFocus: siteVars.colors.grey.light09, underlinedBottomBorderWidth: pxToRem(2), primaryBorderColor: siteVars.colors.grey.light10, From 2c9b16116804f9013ac904dc59186eee23b8e822 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 25 Mar 2019 13:29:48 +0100 Subject: [PATCH 034/118] -fixed typings issues around color prop --- .../react/src/components/Dialog/Dialog.tsx | 1 + packages/react/src/components/Label/Label.tsx | 2 +- .../react/src/lib/commonPropInterfaces.ts | 18 +---------- packages/react/src/lib/commonPropTypes.ts | 31 ++----------------- .../src/themes/teams-dark/siteVariables.ts | 9 ------ .../react/src/themes/teams/siteVariables.ts | 9 ------ 6 files changed, 5 insertions(+), 65 deletions(-) diff --git a/packages/react/src/components/Dialog/Dialog.tsx b/packages/react/src/components/Dialog/Dialog.tsx index 1949cb43ee..81ae7330e4 100644 --- a/packages/react/src/components/Dialog/Dialog.tsx +++ b/packages/react/src/components/Dialog/Dialog.tsx @@ -94,6 +94,7 @@ class Dialog extends AutoControlledComponent, DialogStat ...commonPropTypes.createCommon({ children: false, content: true, + color: true, }), actions: customPropTypes.itemShorthand, cancelButton: customPropTypes.itemShorthand, diff --git a/packages/react/src/components/Label/Label.tsx b/packages/react/src/components/Label/Label.tsx index 5ce378fa3b..cd9ebc91e4 100644 --- a/packages/react/src/components/Label/Label.tsx +++ b/packages/react/src/components/Label/Label.tsx @@ -63,7 +63,7 @@ class Label extends UIComponent, any> { static className = 'ui-label' static propTypes = { - ...commonPropTypes.createCommon({ color: 'complex' }), + ...commonPropTypes.createCommon({ color: true }), circular: PropTypes.bool, icon: customPropTypes.itemShorthand, iconPosition: PropTypes.oneOf(['start', 'end']), diff --git a/packages/react/src/lib/commonPropInterfaces.ts b/packages/react/src/lib/commonPropInterfaces.ts index 81d2998c35..bccc36c217 100644 --- a/packages/react/src/lib/commonPropInterfaces.ts +++ b/packages/react/src/lib/commonPropInterfaces.ts @@ -29,23 +29,7 @@ export interface UIComponentProps

export type SizeValue = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest' -export type ColorValue = - | 'primary' - | 'secondary' - | 'blue' - | 'green' - | 'grey' - | 'orange' - | 'pink' - | 'purple' - | 'teal' - | 'red' - | 'yellow' - | string - -export type ColorValuesWithPrimitiveColors = ColorValue | 'black' | 'white' - -export interface ColorComponentProps { +export interface ColorComponentProps { /** A component can have a color. */ color?: TColor } diff --git a/packages/react/src/lib/commonPropTypes.ts b/packages/react/src/lib/commonPropTypes.ts index a6bdeb5322..168181192a 100644 --- a/packages/react/src/lib/commonPropTypes.ts +++ b/packages/react/src/lib/commonPropTypes.ts @@ -7,38 +7,11 @@ export interface CreateCommonConfig { children?: boolean | 'node' | 'element' as?: boolean className?: boolean - color?: boolean | 'simple' | 'complex' + color?: boolean content?: boolean | 'node' | 'shorthand' styled?: boolean } -const colorPropType = PropTypes.oneOfType([ - PropTypes.oneOf([ - 'primary', - 'secondary', - 'blue', - 'green', - 'grey', - 'orange', - 'pink', - 'purple', - 'teal', - 'red', - 'yellow', - ]), - PropTypes.string, -]) - -export const complexColorPropType = PropTypes.oneOfType([ - PropTypes.shape({ - foreground: colorPropType, - background: colorPropType, - border: colorPropType, - shadow: colorPropType, - }), - colorPropType, -]) - export const createCommon = (config: CreateCommonConfig = {}) => { const { accessibility = true, @@ -67,7 +40,7 @@ export const createCommon = (config: CreateCommonConfig = {}) => { className: PropTypes.string, }), ...(color && { - color: color === true || color === 'simple' ? colorPropType : complexColorPropType, + color: PropTypes.string, }), ...(content && { content: diff --git a/packages/react/src/themes/teams-dark/siteVariables.ts b/packages/react/src/themes/teams-dark/siteVariables.ts index 5d8131168f..f7b128e9c2 100644 --- a/packages/react/src/themes/teams-dark/siteVariables.ts +++ b/packages/react/src/themes/teams-dark/siteVariables.ts @@ -6,15 +6,6 @@ export { colorScheme } from './colors' // export const black = '#201f1f' // no mapping color -// export const gray02 = '#c8c6c4' // light theme gray06 -// export const gray03 = '#b3b0ad' // no mapping color -// export const gray04 = '#8a8886' // no mapping color -// export const gray06 = '#605e5c' // light theme gray03 -// export const gray08 = '#484644' // light theme gray02 -// export const gray09 = '#3b3a39' // no mapping color -// export const gray10 = '#323130' // no mapping color -// export const gray14 = '#292828' // no mapping color - export const brand = '#6264A7' // light theme brand - primary[500] export const brand02 = '#e2e2f6' // light theme brand14 - primary[100] export const brand04 = '#bdbde6' // light theme brand12 primary[200] diff --git a/packages/react/src/themes/teams/siteVariables.ts b/packages/react/src/themes/teams/siteVariables.ts index f4d9712829..45d024ffcc 100644 --- a/packages/react/src/themes/teams/siteVariables.ts +++ b/packages/react/src/themes/teams/siteVariables.ts @@ -18,15 +18,6 @@ export { colorScheme, } from './colors' -// export const grey02 = '#484644' // no mapping color -// export const grey03 = '#605E5C' // no mapping color -// export const grey04 = '#979593' // no mapping color -// export const grey06 = '#C8C6C4' // no mapping color -// export const grey08 = '#E1DFDD' // no mapping color -// export const grey09 = '#EDEBE9' // no mapping color -// export const grey10 = '#F3F2F1' // no mapping color -// export const grey14 = '#FAF9F8' // no mapping color - export const brand04 = '#464775' // no mapping color export const brand08 = '#8B8CC7' // no mapping color From 64f083053d4bb31405011066f64ed50af988086d Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 25 Mar 2019 13:46:53 +0100 Subject: [PATCH 035/118] -fixed menu example color --- .../Variations/MenuExampleColor.shorthand.tsx | 20 +++---------------- 1 file changed, 3 insertions(+), 17 deletions(-) diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx index 2137a1462a..43ca75ee1b 100644 --- a/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx +++ b/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx @@ -15,30 +15,16 @@ const items = [ }, ] -const MenuExamplePrimary = () => ( +const MenuExampleColor = () => ( ( {Object.keys(theme.siteVariables.colorScheme).map(color => ( -

+ ))} )} /> ) -export default MenuExamplePrimary +export default MenuExampleColor From 6f36f3c2d8f869ed89e6a521708e1f10bc88296a Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 25 Mar 2019 13:53:33 +0100 Subject: [PATCH 036/118] -extracted light colors overrides --- packages/react/src/themes/teams/colors.ts | 45 +++++++---------------- 1 file changed, 13 insertions(+), 32 deletions(-) diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index d7eb6437e7..06603e9e2e 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -227,6 +227,15 @@ const createColorScheme = (color: string, customValues = {}) => { } } +const lightColorOverrides = { + backgroundDefault: colors.black, + foregroundHover: colors.black, + foregroundActive: colors.black, + foregroundFocus: colors.black, + foregroundFocusWithin: colors.black, + foregroundDisabled: colors.black, +} + export const colorScheme: ColorSchemeMapping = { default: createColorScheme('grey', { foregroundDefault: colors.grey.light02, @@ -321,40 +330,12 @@ export const colorScheme: ColorSchemeMapping = { }), grey: createColorScheme('grey'), green: createColorScheme('green'), - orange: createColorScheme('orange', { - backgroundDefault: colors.black, - foregroundHover: colors.black, - foregroundActive: colors.black, - foregroundFocus: colors.black, - foregroundFocusWithin: colors.black, - foregroundDisabled: colors.black, - }), + orange: createColorScheme('orange', lightColorOverrides), pink: createColorScheme('pink'), red: createColorScheme('red'), - yellow: createColorScheme('yellow', { - backgroundDefault: colors.black, - foregroundHover: colors.black, - foregroundActive: colors.black, - foregroundFocus: colors.black, - foregroundFocusWithin: colors.black, - foregroundDisabled: colors.black, - }), + yellow: createColorScheme('yellow', lightColorOverrides), darkOrange: createColorScheme('darkOrange'), - lightGreen: createColorScheme('lightGreen', { - backgroundDefault: colors.black, - foregroundHover: colors.black, - foregroundActive: colors.black, - foregroundFocus: colors.black, - foregroundFocusWithin: colors.black, - foregroundDisabled: colors.black, - }), + lightGreen: createColorScheme('lightGreen', lightColorOverrides), magenta: createColorScheme('magenta'), - postOrange: createColorScheme('postOrange', { - backgroundDefault: colors.black, - foregroundHover: colors.black, - foregroundActive: colors.black, - foregroundFocus: colors.black, - foregroundFocusWithin: colors.black, - foregroundDisabled: colors.black, - }), + postOrange: createColorScheme('postOrange', lightColorOverrides), } From 05b5d49cfb376d5fd81689cb36bfecf6c4a70c2c Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 25 Mar 2019 13:58:14 +0100 Subject: [PATCH 037/118] -removed comments --- packages/react/src/themes/teams/components/Menu/menuStyles.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/react/src/themes/teams/components/Menu/menuStyles.ts b/packages/react/src/themes/teams/components/Menu/menuStyles.ts index 8121ede108..f1d5ecf798 100644 --- a/packages/react/src/themes/teams/components/Menu/menuStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuStyles.ts @@ -14,8 +14,6 @@ export default { root: ({ props: p, variables: v, theme }): ICSSInJSStyle => { const { iconOnly, fluid, pointing, pills, primary, color, underlined, vertical, submenu } = p const colorScheme = v.colorScheme[color ? color : primary ? 'primary' : 'default'] - // const verticalScheme = v[p.vertical].colorScheme - // console.log(colorScheme) return { display: 'flex', @@ -43,7 +41,7 @@ export default { !iconOnly && !(pointing && vertical) && !underlined && { - // TODO check again, primary has hardcoded grey border color + // primary has hardcoded grey border color border: `${v.borderWidth} solid ${ primary ? v.primaryBorderColor : v.borderColor || colorScheme.borderDefault }`, From 785761b2dfae340eaa6093ba367b6ca39388bb8e Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 25 Mar 2019 14:19:14 +0100 Subject: [PATCH 038/118] -init hoc color scheme --- .../src/themes/teams-high-contrast/colors.ts | 54 +++++++++++++++++++ .../components/Divider/dividerVariables.ts | 4 -- .../teams-high-contrast/siteVariables.ts | 2 +- 3 files changed, 55 insertions(+), 5 deletions(-) create mode 100644 packages/react/src/themes/teams-high-contrast/colors.ts diff --git a/packages/react/src/themes/teams-high-contrast/colors.ts b/packages/react/src/themes/teams-high-contrast/colors.ts new file mode 100644 index 0000000000..05da97ff65 --- /dev/null +++ b/packages/react/src/themes/teams-high-contrast/colors.ts @@ -0,0 +1,54 @@ +import { accessibleYellow, accessibleGreen, accessibleCyan, black, white } from './siteVariables' +import { ColorSchemeMapping } from 'src/themes/types' + +const createColorScheme = (customValues = {}) => { + return { + foregroundDefault: white, + backgroundDefault: black, + borderDefault: white, + shadowDefault: white, + + foregroundHover: accessibleYellow, + backgroundHover: black, + borderHover: accessibleYellow, + shadowHover: accessibleYellow, + + foregroundActive: accessibleCyan, + backgroundActive: black, + borderActive: accessibleCyan, + shadowActive: accessibleCyan, + + foregroundFocus: black, + backgroundFocus: accessibleYellow, + borderFocus: white, + shadowFocus: white, + + foregroundFocusWithin: black, + backgroundFocusWithin: accessibleYellow, + borderFocusWithin: white, + shadowFocusWithin: white, + + foregroundDisabled: black, + backgroundDisabled: accessibleGreen, + borderDisabled: black, + shadowDisabled: black, + ...customValues, + } +} + +export const colorScheme: ColorSchemeMapping = { + default: createColorScheme(), + black: createColorScheme(), + white: createColorScheme(), + primary: createColorScheme(), + grey: createColorScheme(), + green: createColorScheme(), + orange: createColorScheme(), + pink: createColorScheme(), + red: createColorScheme(), + yellow: createColorScheme(), + darkOrange: createColorScheme(), + lightGreen: createColorScheme(), + magenta: createColorScheme(), + postOrange: createColorScheme(), +} diff --git a/packages/react/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts index 8c0ca4e54c..6bdc9d35a5 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts @@ -1,10 +1,6 @@ import { DividerVariables } from '../../../teams/components/Divider/dividerVariables' export default (siteVars: any): Partial => ({ - // TODO will be fixed after color scheme for high contrast is added - // colors: { - // primary: siteVars.white, - // }, dividerColor: siteVars.white, textColor: siteVars.white, }) diff --git a/packages/react/src/themes/teams-high-contrast/siteVariables.ts b/packages/react/src/themes/teams-high-contrast/siteVariables.ts index 6f202eb0cf..900f039d23 100644 --- a/packages/react/src/themes/teams-high-contrast/siteVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/siteVariables.ts @@ -1,5 +1,5 @@ import { colors, naturalColors } from '../teams/siteVariables' - +export { colorScheme } from './colors' // // COLORS // From 1ff606262bb5092bd585444e32fb2b19bbd24bf7 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 25 Mar 2019 20:41:57 +0100 Subject: [PATCH 039/118] -adjusments on the colors used in hoc --- .../src/themes/teams-high-contrast/colors.ts | 54 ------------------ .../components/Menu/menuItemStyles.ts | 9 +-- .../components/Menu/menuVariables.ts | 1 + .../teams-high-contrast/siteVariables.ts | 55 ++++++++++++++++++- .../teams/components/Icon/iconStyles.ts | 2 - 5 files changed, 60 insertions(+), 61 deletions(-) delete mode 100644 packages/react/src/themes/teams-high-contrast/colors.ts diff --git a/packages/react/src/themes/teams-high-contrast/colors.ts b/packages/react/src/themes/teams-high-contrast/colors.ts deleted file mode 100644 index 05da97ff65..0000000000 --- a/packages/react/src/themes/teams-high-contrast/colors.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { accessibleYellow, accessibleGreen, accessibleCyan, black, white } from './siteVariables' -import { ColorSchemeMapping } from 'src/themes/types' - -const createColorScheme = (customValues = {}) => { - return { - foregroundDefault: white, - backgroundDefault: black, - borderDefault: white, - shadowDefault: white, - - foregroundHover: accessibleYellow, - backgroundHover: black, - borderHover: accessibleYellow, - shadowHover: accessibleYellow, - - foregroundActive: accessibleCyan, - backgroundActive: black, - borderActive: accessibleCyan, - shadowActive: accessibleCyan, - - foregroundFocus: black, - backgroundFocus: accessibleYellow, - borderFocus: white, - shadowFocus: white, - - foregroundFocusWithin: black, - backgroundFocusWithin: accessibleYellow, - borderFocusWithin: white, - shadowFocusWithin: white, - - foregroundDisabled: black, - backgroundDisabled: accessibleGreen, - borderDisabled: black, - shadowDisabled: black, - ...customValues, - } -} - -export const colorScheme: ColorSchemeMapping = { - default: createColorScheme(), - black: createColorScheme(), - white: createColorScheme(), - primary: createColorScheme(), - grey: createColorScheme(), - green: createColorScheme(), - orange: createColorScheme(), - pink: createColorScheme(), - red: createColorScheme(), - yellow: createColorScheme(), - darkOrange: createColorScheme(), - lightGreen: createColorScheme(), - magenta: createColorScheme(), - postOrange: createColorScheme(), -} diff --git a/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts index db601dbac5..c678a4c582 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts @@ -16,10 +16,11 @@ const menuItemStyles: ComponentSlotStylesInput => ({ colorActive: siteVars.black, backgroundColorFocus: siteVars.accessibleYellow, backgroundColorActive: siteVars.accessibleCyan, + primaryBorderColor: siteVars.white, verticalBackgroundColor: siteVars.colors.black, }) diff --git a/packages/react/src/themes/teams-high-contrast/siteVariables.ts b/packages/react/src/themes/teams-high-contrast/siteVariables.ts index 900f039d23..c0332ae3c6 100644 --- a/packages/react/src/themes/teams-high-contrast/siteVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/siteVariables.ts @@ -1,5 +1,5 @@ import { colors, naturalColors } from '../teams/siteVariables' -export { colorScheme } from './colors' +import { ColorSchemeMapping } from '../../themes/types' // // COLORS // @@ -29,6 +29,59 @@ export const errorStatusTextColor = black export const unknownStatusBackgroundColor = colors.white export const unknownStatusTextColor = black +// COLOR SCHEME +const createColorScheme = (customValues = {}) => { + return { + foregroundDefault: white, + backgroundDefault: black, + borderDefault: white, + shadowDefault: white, + + foregroundHover: accessibleYellow, + backgroundHover: black, + borderHover: accessibleYellow, + shadowHover: accessibleYellow, + + foregroundActive: accessibleCyan, + backgroundActive: black, + borderActive: accessibleCyan, + shadowActive: accessibleCyan, + + foregroundFocus: black, + backgroundFocus: accessibleYellow, + borderFocus: white, + shadowFocus: white, + + foregroundFocusWithin: black, + backgroundFocusWithin: accessibleYellow, + borderFocusWithin: white, + shadowFocusWithin: white, + + foregroundDisabled: black, + backgroundDisabled: accessibleGreen, + borderDisabled: black, + shadowDisabled: black, + ...customValues, + } +} + +export const colorScheme: ColorSchemeMapping = { + default: createColorScheme(), + black: createColorScheme(), + white: createColorScheme(), + primary: createColorScheme(), + grey: createColorScheme(), + green: createColorScheme(), + orange: createColorScheme(), + pink: createColorScheme(), + red: createColorScheme(), + yellow: createColorScheme(), + darkOrange: createColorScheme(), + lightGreen: createColorScheme(), + magenta: createColorScheme(), + postOrange: createColorScheme(), +} + // // SEMANTIC ASSIGNMENTS // diff --git a/packages/react/src/themes/teams/components/Icon/iconStyles.ts b/packages/react/src/themes/teams/components/Icon/iconStyles.ts index 6b0a169bef..fe90af929d 100644 --- a/packages/react/src/themes/teams/components/Icon/iconStyles.ts +++ b/packages/react/src/themes/teams/components/Icon/iconStyles.ts @@ -89,8 +89,6 @@ const getIconSize = (size: SizeValue, sizeModifier: IconSizeModifier): number => } const getIconColor = (variables, colors) => { - console.log(variables.color) - colors && console.log(colors.foregroundDefault) return _.get(colors, 'foregroundDefault', variables.color || 'currentColor') } From 89bb56205728affd72da5ac49f26ab3495c12676 Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 5 Apr 2019 11:44:17 +0200 Subject: [PATCH 040/118] compiler issues --- .../themes/teams-dark/components/Menu/menuVariables.ts | 2 +- .../src/themes/teams/components/Menu/menuItemStyles.ts | 9 +++------ 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts index 6a81d8d7a0..34745e86f2 100644 --- a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts @@ -9,7 +9,7 @@ export default (siteVars: any): Partial => ({ primaryBorderColor: siteVars.colors.grey.dark10, pointingIndicatorBackgroundColor: siteVars.brand06, - hoverBackgroundColor: siteVars.gray08, + backgroundColorHover: siteVars.colors.grey.dark08, verticalBackgroundColor: siteVars.colors.grey.dark10, }) diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index 4e452cf9e1..b675cce2c2 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -92,11 +92,8 @@ const getHoverStyles = ({ } } -const pointingBeak: ComponentSlotStyleFunction = ({ - props, - variables: v, -}): ICSSInJSStyle => { - const { pointing, primary } = props +const pointingBeak = ({ props, variables: v, colorScheme }): ICSSInJSStyle => { + const { pointing } = props let top: string let borders: ICSSInJSStyle @@ -219,7 +216,7 @@ const menuItemStyles: ComponentSlotStylesInput Date: Fri, 5 Apr 2019 12:28:39 +0200 Subject: [PATCH 041/118] -updated colors --- .../components/Divider/dividerVariables.ts | 12 ++++++++---- .../react/src/themes/teams-dark/siteVariables.ts | 1 + packages/react/src/themes/teams/colors.ts | 11 +++++++---- .../themes/teams/components/Icon/iconStyles.ts | 16 +++++++++------- 4 files changed, 25 insertions(+), 15 deletions(-) diff --git a/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts b/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts index 3fba442c94..8dae26bad5 100644 --- a/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts @@ -1,9 +1,13 @@ import { DividerVariables } from '../../../teams/components/Divider/dividerVariables' export default (siteVars: any): Partial => ({ - // TODO will be fixed after color scheme for dark theme is added - // colors: { - // primary: siteVars.brand06, - // }, + colorScheme: { + ...siteVars.colorScheme, + primary: { + foregroundDefault: siteVars.brand06, + borderDefault: siteVars.brand06, + }, + }, textColor: siteVars.colors.grey.dark02, + dividerColor: siteVars.colors.grey.dark09, }) diff --git a/packages/react/src/themes/teams-dark/siteVariables.ts b/packages/react/src/themes/teams-dark/siteVariables.ts index f7b128e9c2..e35ffac1bf 100644 --- a/packages/react/src/themes/teams-dark/siteVariables.ts +++ b/packages/react/src/themes/teams-dark/siteVariables.ts @@ -6,6 +6,7 @@ export { colorScheme } from './colors' // export const black = '#201f1f' // no mapping color +// TODO: remove these colors export const brand = '#6264A7' // light theme brand - primary[500] export const brand02 = '#e2e2f6' // light theme brand14 - primary[100] export const brand04 = '#bdbde6' // light theme brand12 primary[200] diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index 06603e9e2e..96bc4a7118 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -10,17 +10,20 @@ import { ColorVariants, ColorSchemeMapping } from 'src/themes/types' export const emphasisColors: EmphasisColors = { primary: { 50: '#F4F4FC', // siteVariables.brand16 - 100: '#E2E2F6', // siteVariables.brand14 - 200: '#BDBDE6', // siteVariables.brand12 + 100: '#E2E2F6', // siteVariables.brand14, dark theme brand02 + 200: '#BDBDE6', // siteVariables.brand12, dark theme brand04 300: '#8F90C1', 400: '#6E70AE', - 500: '#6264A7', // siteVariables.brand, siteVariables.brand06 (same color?) + 500: '#6264A7', // siteVariables.brand, siteVariables.brand06 (same color?), dark theme brand, brand12 600: '#55578D', 700: '#4A4C78', 800: '#414265', - 900: '#33344A', // siteVariables.brand02 + 900: '#33344A', // siteVariables.brand02, dark theme brand16 light04: '#464775', // no mapping color light08: '#8B8CC7', + dark06: '#a6a7dc', + dark08: '#8B8CC7', // same as light08 + dark14: '#464775', // same as light04 }, } diff --git a/packages/react/src/themes/teams/components/Icon/iconStyles.ts b/packages/react/src/themes/teams/components/Icon/iconStyles.ts index 0244c05335..52dbff84b7 100644 --- a/packages/react/src/themes/teams/components/Icon/iconStyles.ts +++ b/packages/react/src/themes/teams/components/Icon/iconStyles.ts @@ -94,11 +94,16 @@ const iconStyles: ComponentSlotStylesInput = { backgroundColor: v.backgroundColor, boxSizing: isFontBased ? 'content-box' : 'border-box', + // overriding the base theme default rtl behavior as in teams theme the flipInRtl slot is used for this + ...((rtl || !isFontBased) && { + transform: 'unset', + }), + ...(isFontBased && { ...getFontStyles(getIconSize(size, v.sizeModifier), name), fontWeight: 900, // required for the fontAwesome to render color: getIconColor(v, colors), - + transform: `rotate(${rotate}deg)`, ...(disabled && { color: v.disabledColor, }), @@ -107,11 +112,6 @@ const iconStyles: ComponentSlotStylesInput = { // overriding base theme border handling ...((bordered || v.borderColor) && getBorderedStyles(v.borderColor || getIconColor(v, colors))), - - // overriding the base theme default rtl behavior as in teams theme the flipInRtl slot is used for this - ...(rtl && { - transform: 'unset', - }), } }, @@ -139,7 +139,7 @@ const iconStyles: ComponentSlotStylesInput = { } }, - svg: ({ props: { size, color, disabled }, variables: v }): ICSSInJSStyle => { + svg: ({ props: { size, color, disabled, rotate }, variables: v }): ICSSInJSStyle => { const colors = v.colorScheme[color] const iconSizeInRems = pxToRem(getIconSize(size, v.sizeModifier)) @@ -153,6 +153,8 @@ const iconStyles: ComponentSlotStylesInput = { fill: v.disabledColor, }), + transform: `rotate(${rotate}deg)`, + ...getSvgStyle('svg'), } }, From e6182cc719ca61540cbc3af6ce2dd39c9b9edc72 Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 5 Apr 2019 14:07:06 +0200 Subject: [PATCH 042/118] -updated list and radio group --- .../themes/teams-dark/components/List/listItemVariables.ts | 4 ++-- .../components/RadioGroup/radioGroupItemVariables.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/themes/teams-dark/components/List/listItemVariables.ts b/packages/react/src/themes/teams-dark/components/List/listItemVariables.ts index 3aa3e07987..894e5b2910 100644 --- a/packages/react/src/themes/teams-dark/components/List/listItemVariables.ts +++ b/packages/react/src/themes/teams-dark/components/List/listItemVariables.ts @@ -1,6 +1,6 @@ import { ListItemVariables } from 'src/themes/teams/components/List/listItemVariables' export default (siteVars: any): Partial => ({ - selectableFocusHoverBackgroundColor: siteVars.gray08, - selectedBackgroundColor: siteVars.gray08, + selectableFocusHoverBackgroundColor: siteVars.colors.grey.dark08, + selectedBackgroundColor: siteVars.colors.grey.dark08, }) diff --git a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts index ca448b3af8..18e53e2671 100644 --- a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts @@ -1,7 +1,7 @@ import { RadioGroupItemVariables } from 'src/themes/teams/components/RadioGroup/radioGroupItemVariables' export default (siteVars: any): Partial => ({ - textColorDefault: siteVars.gray02, + textColorDefault: siteVars.colors.grey.dark02, textColorDefaultHoverFocus: siteVars.colors.white, textColorChecked: siteVars.colors.white, From a1a619d839e7117f24023081f5c5fbf1ad840ef4 Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 5 Apr 2019 15:37:37 +0200 Subject: [PATCH 043/118] -fix vertical focus background color in dark theme --- .../react/src/themes/teams-dark/components/Menu/menuVariables.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts index 34745e86f2..955c6f8c8f 100644 --- a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts @@ -12,4 +12,5 @@ export default (siteVars: any): Partial => ({ backgroundColorHover: siteVars.colors.grey.dark08, verticalBackgroundColor: siteVars.colors.grey.dark10, + verticalBackgroundColorFocus: siteVars.colors.grey.dark09, }) From ca87c865c2c5271892f82cc613bd82c9364f4944 Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 5 Apr 2019 16:44:24 +0200 Subject: [PATCH 044/118] -fixed disabled icon and menu item in dark theme --- packages/react/src/themes/teams-dark/componentVariables.ts | 1 + .../src/themes/teams-dark/components/Icon/iconVariables.ts | 6 ++++++ .../src/themes/teams-dark/components/Menu/menuVariables.ts | 1 + .../src/themes/teams/components/Menu/menuItemStyles.ts | 6 ++++-- 4 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 packages/react/src/themes/teams-dark/components/Icon/iconVariables.ts diff --git a/packages/react/src/themes/teams-dark/componentVariables.ts b/packages/react/src/themes/teams-dark/componentVariables.ts index 17f6368649..c9ecf1e9c5 100644 --- a/packages/react/src/themes/teams-dark/componentVariables.ts +++ b/packages/react/src/themes/teams-dark/componentVariables.ts @@ -9,6 +9,7 @@ export { default as RadioGroupItem } from './components/RadioGroup/radioGroupIte export { default as Text } from './components/Text/textVariables' export { default as TreeTitle } from './components/Tree/treeTitleVariables' export { default as Menu } from './components/Menu/menuVariables' +export { default as Icon } from './components/Icon/iconVariables' export { default as Popup } from './components/Popup/popupVariables' export { default as PopupContent } from './components/Popup/popupContentVariables' diff --git a/packages/react/src/themes/teams-dark/components/Icon/iconVariables.ts b/packages/react/src/themes/teams-dark/components/Icon/iconVariables.ts new file mode 100644 index 0000000000..08f88921ee --- /dev/null +++ b/packages/react/src/themes/teams-dark/components/Icon/iconVariables.ts @@ -0,0 +1,6 @@ +import { IconVariables } from '../../../teams/components/Icon/iconVariables' + +export default (siteVars): Partial => ({ + colorScheme: siteVars.colorScheme, + disabledColor: siteVars.colors.grey.dark06, +}) diff --git a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts index 955c6f8c8f..ba2b6e204e 100644 --- a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts @@ -5,6 +5,7 @@ export default (siteVars: any): Partial => ({ color: siteVars.colors.grey.dark02, colorActive: siteVars.colors.white, + colorDisabled: siteVars.colors.grey.dark06, primaryBorderColor: siteVars.colors.grey.dark10, pointingIndicatorBackgroundColor: siteVars.brand06, diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index b675cce2c2..e76af4bd87 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -99,7 +99,7 @@ const pointingBeak = ({ props, variables: v, colorScheme }): ICSSInJSStyle => { let borders: ICSSInJSStyle const backgroundColor = v.backgroundColorActive || colorScheme.backgroundActive - const borderColor = v.borderColor + const borderColor = v.borderColor || colorScheme.borderDefault if (pointing === 'start') { borders = { @@ -193,7 +193,9 @@ const menuItemStyles: ComponentSlotStylesInput Date: Fri, 5 Apr 2019 17:04:13 +0200 Subject: [PATCH 045/118] -fixing hover color on primary menu --- .../src/themes/teams-dark/components/Menu/menuVariables.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts index ba2b6e204e..47a4054445 100644 --- a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts @@ -10,8 +10,6 @@ export default (siteVars: any): Partial => ({ primaryBorderColor: siteVars.colors.grey.dark10, pointingIndicatorBackgroundColor: siteVars.brand06, - backgroundColorHover: siteVars.colors.grey.dark08, - verticalBackgroundColor: siteVars.colors.grey.dark10, verticalBackgroundColorFocus: siteVars.colors.grey.dark09, }) From b870aad1736b846d67c8febdb0799ea5d28c1144 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 8 Apr 2019 11:59:59 +0200 Subject: [PATCH 046/118] -replaced grey colors from color palette --- .../react/src/themes/teams-dark/colors.ts | 12 ++-- .../components/Button/buttonVariables.ts | 26 ++++---- .../components/Chat/chatMessageVariables.ts | 2 +- .../components/Divider/dividerVariables.ts | 4 +- .../components/Header/headerVariables.ts | 2 +- .../components/Icon/iconVariables.ts | 2 +- .../components/Input/inputVariables.ts | 6 +- .../components/List/listItemVariables.ts | 4 +- .../components/Menu/menuVariables.ts | 10 +-- .../RadioGroup/radioGroupItemVariables.ts | 2 +- .../components/Text/textVariables.ts | 6 +- packages/react/src/themes/teams/colors.ts | 64 +++++++++---------- .../teams/components/Alert/alertStyles.ts | 6 +- .../teams/components/Alert/alertVariables.ts | 4 +- .../Attachment/attachmentVariables.ts | 6 +- .../components/Button/buttonVariables.ts | 40 ++++++------ .../components/Chat/chatMessageVariables.ts | 2 +- .../teams/components/Chat/chatVariables.ts | 2 +- .../components/Divider/dividerVariables.ts | 4 +- .../components/Dropdown/dropdownVariables.ts | 4 +- .../Header/headerDescriptionVariables.ts | 2 +- .../components/Header/headerVariables.ts | 2 +- .../teams/components/Icon/iconVariables.ts | 2 +- .../teams/components/Input/inputVariables.ts | 4 +- .../components/List/listItemVariables.ts | 2 +- .../teams/components/Menu/menuVariables.ts | 10 +-- .../components/Popup/popupContentVariables.ts | 2 +- .../RadioGroup/radioGroupItemVariables.ts | 8 +-- .../components/Reaction/reactionVariables.ts | 4 +- .../teams/components/Text/textVariables.ts | 6 +- .../components/Tree/treeTitleVariables.ts | 2 +- .../react/src/themes/teams/siteVariables.ts | 4 +- 32 files changed, 126 insertions(+), 130 deletions(-) diff --git a/packages/react/src/themes/teams-dark/colors.ts b/packages/react/src/themes/teams-dark/colors.ts index f818eb459a..c2b45941ff 100644 --- a/packages/react/src/themes/teams-dark/colors.ts +++ b/packages/react/src/themes/teams-dark/colors.ts @@ -38,18 +38,18 @@ const createColorScheme = (color: string, customValues = {}) => { export const colorScheme: ColorSchemeMapping = { default: createColorScheme('grey', { - foregroundDefault: colors.grey.light02, - backgroundDefault: colors.grey[500], - borderDefault: colors.grey.dark08, + foregroundDefault: colors.grey[500], + backgroundDefault: colors.grey[400], + borderDefault: colors.grey[500], foregroundHover: colors.black, - backgroundHover: colors.grey.dark08, + backgroundHover: colors.grey[500], foregroundActive: colors.black, - backgroundActive: colors.grey.dark08, + backgroundActive: colors.grey[500], foregroundFocus: colors.black, - backgroundFocus: colors.grey.dark08, + backgroundFocus: colors.grey[500], foregroundFocusWithin: colors.black, diff --git a/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts b/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts index 1bc2c581e8..4614b636e0 100644 --- a/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts @@ -6,16 +6,16 @@ export default (siteVars: any): Partial => { colorActive: siteVars.colors.white, colorHover: siteVars.colors.white, colorFocus: siteVars.colors.white, - colorDisabled: siteVars.colors.grey.dark06, + colorDisabled: siteVars.colors.grey[450], backgroundColor: 'transparent', - backgroundColorHover: siteVars.colors.grey.dark14, - backgroundColorFocus: siteVars.colors.grey.dark08, - backgroundColorActive: siteVars.colors.grey.dark08, - backgroundColorDisabled: siteVars.colors.grey.dark09, - borderColor: siteVars.colors.grey.dark08, - borderColorActive: siteVars.colors.grey.dark06, + backgroundColorHover: siteVars.colors.grey[700], + backgroundColorFocus: siteVars.colors.grey[500], + backgroundColorActive: siteVars.colors.grey[500], + backgroundColorDisabled: siteVars.colors.grey[550], + borderColor: siteVars.colors.grey[500], + borderColorActive: siteVars.colors.grey[450], borderColorFocus: siteVars.black, - borderColorHover: siteVars.colors.grey.dark06, + borderColorHover: siteVars.colors.grey[450], borderColorFocusIndicator: siteVars.colors.white, primaryBackgroundColorActive: siteVars.brand08, @@ -24,12 +24,12 @@ export default (siteVars: any): Partial => { primaryBorderColorFocus: siteVars.black, primaryBorderColorFocusIndicator: siteVars.colors.white, - circularColor: siteVars.colors.grey.dark02, + circularColor: siteVars.colors.grey[250], circularColorActive: siteVars.black, - circularBackgroundColorActive: siteVars.colors.grey.dark02, - circularBackgroundColorHover: siteVars.colors.grey.dark03, - circularBackgroundColorFocus: siteVars.colors.grey.dark02, - circularBorderColor: siteVars.colors.grey.dark02, + circularBackgroundColorActive: siteVars.colors.grey[250], + circularBackgroundColorHover: siteVars.colors.grey[300], + circularBackgroundColorFocus: siteVars.colors.grey[250], + circularBorderColor: siteVars.colors.grey[250], circularBorderColorFocusIndicator: siteVars.black, } } diff --git a/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts index 8b83bea145..3903174a05 100644 --- a/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts @@ -2,7 +2,7 @@ import { ChatMessageVariables } from '../../../teams/components/Chat/chatMessage export default (siteVars: any): Partial => { return { - backgroundColor: siteVars.colors.grey.dark10, + backgroundColor: siteVars.colors.grey[650], backgroundColorMine: '#3B3C54', color: siteVars.colors.white, contentFocusOutlineColor: siteVars.brand, diff --git a/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts b/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts index 8dae26bad5..c1278fcb15 100644 --- a/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts @@ -8,6 +8,6 @@ export default (siteVars: any): Partial => ({ borderDefault: siteVars.brand06, }, }, - textColor: siteVars.colors.grey.dark02, - dividerColor: siteVars.colors.grey.dark09, + textColor: siteVars.colors.grey[250], + dividerColor: siteVars.colors.grey[550], }) diff --git a/packages/react/src/themes/teams-dark/components/Header/headerVariables.ts b/packages/react/src/themes/teams-dark/components/Header/headerVariables.ts index 4c5d417ad4..41df3162e7 100644 --- a/packages/react/src/themes/teams-dark/components/Header/headerVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Header/headerVariables.ts @@ -3,6 +3,6 @@ import { HeaderVariables } from '../../../teams/components/Header/headerVariable export default (siteVars: any): Partial => { return { color: siteVars.colors.white, - descriptionColor: siteVars.colors.grey.dark02, + descriptionColor: siteVars.colors.grey[250], } } diff --git a/packages/react/src/themes/teams-dark/components/Icon/iconVariables.ts b/packages/react/src/themes/teams-dark/components/Icon/iconVariables.ts index 08f88921ee..28b6caf10e 100644 --- a/packages/react/src/themes/teams-dark/components/Icon/iconVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Icon/iconVariables.ts @@ -2,5 +2,5 @@ import { IconVariables } from '../../../teams/components/Icon/iconVariables' export default (siteVars): Partial => ({ colorScheme: siteVars.colorScheme, - disabledColor: siteVars.colors.grey.dark06, + disabledColor: siteVars.colors.grey[450], }) diff --git a/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts b/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts index 25a16d4cc7..7f254b791d 100644 --- a/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts @@ -1,8 +1,8 @@ export default (siteVars: any) => { return { - backgroundColor: siteVars.colors.grey.dark10, - fontColor: siteVars.colors.grey.dark02, + backgroundColor: siteVars.colors.grey[650], + fontColor: siteVars.colors.grey[250], inputFocusBorderColor: siteVars.brand, - iconColor: siteVars.colors.grey.dark02, + iconColor: siteVars.colors.grey[250], } } diff --git a/packages/react/src/themes/teams-dark/components/List/listItemVariables.ts b/packages/react/src/themes/teams-dark/components/List/listItemVariables.ts index 894e5b2910..ca481e0cfb 100644 --- a/packages/react/src/themes/teams-dark/components/List/listItemVariables.ts +++ b/packages/react/src/themes/teams-dark/components/List/listItemVariables.ts @@ -1,6 +1,6 @@ import { ListItemVariables } from 'src/themes/teams/components/List/listItemVariables' export default (siteVars: any): Partial => ({ - selectableFocusHoverBackgroundColor: siteVars.colors.grey.dark08, - selectedBackgroundColor: siteVars.colors.grey.dark08, + selectableFocusHoverBackgroundColor: siteVars.colors.grey[500], + selectedBackgroundColor: siteVars.colors.grey[500], }) diff --git a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts index 47a4054445..7c580eb4b6 100644 --- a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts @@ -3,13 +3,13 @@ import { MenuVariables } from '../../../teams/components/Menu/menuVariables' export default (siteVars: any): Partial => ({ colorScheme: siteVars.colorScheme, - color: siteVars.colors.grey.dark02, + color: siteVars.colors.grey[250], colorActive: siteVars.colors.white, - colorDisabled: siteVars.colors.grey.dark06, + colorDisabled: siteVars.colors.grey[450], - primaryBorderColor: siteVars.colors.grey.dark10, + primaryBorderColor: siteVars.colors.grey[650], pointingIndicatorBackgroundColor: siteVars.brand06, - verticalBackgroundColor: siteVars.colors.grey.dark10, - verticalBackgroundColorFocus: siteVars.colors.grey.dark09, + verticalBackgroundColor: siteVars.colors.grey[650], + verticalBackgroundColorFocus: siteVars.colors.grey[550], }) diff --git a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts index 18e53e2671..4d1f095a72 100644 --- a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts @@ -1,7 +1,7 @@ import { RadioGroupItemVariables } from 'src/themes/teams/components/RadioGroup/radioGroupItemVariables' export default (siteVars: any): Partial => ({ - textColorDefault: siteVars.colors.grey.dark02, + textColorDefault: siteVars.colors.grey[250], textColorDefaultHoverFocus: siteVars.colors.white, textColorChecked: siteVars.colors.white, diff --git a/packages/react/src/themes/teams-dark/components/Text/textVariables.ts b/packages/react/src/themes/teams-dark/components/Text/textVariables.ts index f635d15903..6bcb23d33e 100644 --- a/packages/react/src/themes/teams-dark/components/Text/textVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Text/textVariables.ts @@ -3,10 +3,10 @@ import { TeamsTextVariables } from '../../../teams/components/Text/textVariables export default (siteVariables): Partial => ({ atMentionMeColor: siteVariables.orange04, atMentionOtherColor: siteVariables.brand06, - disabledColor: siteVariables.colors.grey.dark06, + disabledColor: siteVariables.colors.grey[450], errorColor: siteVariables.red, importantColor: siteVariables.red, successColor: siteVariables.green04, - timestampColor: siteVariables.colors.grey.dark04, - timestampHoverColor: siteVariables.colors.grey.dark02, + timestampColor: siteVariables.colors.grey[400], + timestampHoverColor: siteVariables.colors.grey[250], }) diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index 96bc4a7118..b673ed93e1 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -41,34 +41,30 @@ export const naturalColors: NaturalColors = { 900: '#237B4B', // siteVariables.green04 }, grey: { - light02: '#484644', - light03: '#605E5C', - light04: '#979593', - light06: '#C8C6C4', - light08: '#E1DFDD', - light09: '#EDEBE9', - light10: '#F3F2F1', - light14: '#FAF9F8', - - dark02: '#c8c6c4', - dark03: '#b3b0ad', - dark04: '#8a8886', - dark06: '#605e5c', - dark08: '#484644', - dark09: '#3b3a39', - dark10: '#323130', - dark14: '#292828', - - 50: '#FFFFFF', // siteVariables.white - 100: '#E6E6E6', - 200: '#CDCCCC', - 300: '#B8B8B8', - 400: '#A2A2A2', - 500: '#8C8C8C', - 600: '#747373', - 700: '#5F5E5E', - 800: '#404040', - 900: '#252424', // siteVariables.black + // dark09: '#3b3a39', different colors + // dark10: '#323130', different colors + + 0: '#FFFFFF', // white + 25: '#FCFCFB', // old $app-density-message-initial-hover-focus + 50: '#FAF9F8', // light14 + 100: '#F3F2F1', // light10, old $app-density-message-background-replay-hover-focus + 150: '#EDEBE9', // light09, old $app-density-border-gray + 200: '#E1DFDD', // light08 + 250: '#C8C6C4', // light06, dark02??? + 300: '#B3B0AD', // dark03 + 350: '#979593', // light04 + 400: '#8A8886', // dark04 + 450: '#605E5C', // light03, dark06, $app-gray-20-theme-agnostic, old $message-highlight-color-darktheme + 500: '#484644', // light02, dark08 + 550: '#3B3A3A', // dark09 ?!?!?! different color [#3b3a39] + 600: '#323131', // in call audio only grid slot 4 + 650: '#2D2C2C', // dark10?!?!?! - different color [#323130], in call audio only grid slot 3 + 700: '#292828', // dark14, in call audio only grid slot 2, old $app-density-message-background-initial-hover-focus-darktheme + 750: '#252423', // 900, old $app-black, in call audio only grid slot 1, old $app-density-message-background-replay-hover-focus-darktheme + 800: '#201F1F', // app black darktheme, in call title bar, in call audio only pip + 850: '#1B1A1A', // in call background behind presented doc, old $app-density-message-border-darktheme + 900: '#11100F', // dark theme borders + 1000: '#000000', // black }, orange: { 50: '#FEF9F7', @@ -241,18 +237,18 @@ const lightColorOverrides = { export const colorScheme: ColorSchemeMapping = { default: createColorScheme('grey', { - foregroundDefault: colors.grey.light02, - backgroundDefault: colors.grey[500], - borderDefault: colors.grey.light08, + foregroundDefault: colors.grey[500], + backgroundDefault: colors.grey[400], + borderDefault: colors.grey[200], foregroundHover: colors.black, - backgroundHover: colors.grey.light14, + backgroundHover: colors.grey[50], foregroundActive: colors.black, - backgroundActive: colors.grey.light10, + backgroundActive: colors.grey[100], foregroundFocus: colors.black, - backgroundFocus: colors.grey.light14, + backgroundFocus: colors.grey[50], foregroundFocusWithin: colors.black, diff --git a/packages/react/src/themes/teams/components/Alert/alertStyles.ts b/packages/react/src/themes/teams/components/Alert/alertStyles.ts index 7c0c27acfc..289938e6a6 100644 --- a/packages/react/src/themes/teams/components/Alert/alertStyles.ts +++ b/packages/react/src/themes/teams/components/Alert/alertStyles.ts @@ -26,9 +26,9 @@ const getIntentColorsFromProps = ( if (p.info) { return { - color: colors.grey[900], - backgroundColor: siteVars.colors.grey.light09, - borderColor: siteVars.colors.grey.light08, + color: colors.grey[750], + backgroundColor: siteVars.colors.grey[150], + borderColor: siteVars.colors.grey[200], } } diff --git a/packages/react/src/themes/teams/components/Alert/alertVariables.ts b/packages/react/src/themes/teams/components/Alert/alertVariables.ts index 0e55f89e5e..1cc0bef0da 100644 --- a/packages/react/src/themes/teams/components/Alert/alertVariables.ts +++ b/packages/react/src/themes/teams/components/Alert/alertVariables.ts @@ -26,8 +26,8 @@ export default (siteVars: SiteVariablesPrepared): AlertVariables => { borderWidth: '1px', borderRadius: pxToRem(3), backgroundColor: siteVars.colors.grey[50], // $app-white - borderColor: siteVars.colors.grey.light06, - color: siteVars.colors.grey.light02, + borderColor: siteVars.colors.grey[250], + color: siteVars.colors.grey[500], fontWeight: siteVars.fontWeightRegular, minHeight, padding: `0 0 0 ${pxToRem(16)}`, diff --git a/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts b/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts index e7b4b45d60..ed2f419532 100644 --- a/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts +++ b/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts @@ -26,9 +26,9 @@ export default siteVariables => ({ padding: pxToRem(8), iconSpace: pxToRem(12), - backgroundColor: siteVariables.colors.grey.light09, - backgroundColorHover: siteVariables.colors.grey.light08, - textColor: siteVariables.colors.grey[900], + backgroundColor: siteVariables.colors.grey[150], + backgroundColorHover: siteVariables.colors.grey[200], + textColor: siteVariables.colors.grey[750], progressColor: siteVariables.naturalColors.lightGreen[900], progressHeight: 4, diff --git a/packages/react/src/themes/teams/components/Button/buttonVariables.ts b/packages/react/src/themes/teams/components/Button/buttonVariables.ts index 3dd5a4c16e..2761059a43 100644 --- a/packages/react/src/themes/teams/components/Button/buttonVariables.ts +++ b/packages/react/src/themes/teams/components/Button/buttonVariables.ts @@ -79,21 +79,21 @@ export default (siteVars: any): ButtonVariables => { contentFontWeight: siteVars.fontWeightSemibold, paddingLeftRightValue: 20, - color: siteVars.colors.grey[900], - colorActive: siteVars.colors.grey[900], - colorHover: siteVars.colors.grey[900], - colorFocus: siteVars.colors.grey[900], - colorDisabled: siteVars.colors.grey.light06, + color: siteVars.colors.grey[750], + colorActive: siteVars.colors.grey[750], + colorHover: siteVars.colors.grey[750], + colorFocus: siteVars.colors.grey[750], + colorDisabled: siteVars.colors.grey[250], backgroundColor: siteVars.colors.white, - backgroundColorActive: siteVars.colors.grey.light08, - backgroundColorHover: siteVars.colors.grey.light14, - backgroundColorFocus: siteVars.colors.grey.light08, - backgroundColorDisabled: siteVars.colors.grey.light09, - borderColor: siteVars.colors.grey.light08, - borderColorActive: siteVars.colors.grey.light06, - borderColorHover: siteVars.colors.grey.light06, + backgroundColorActive: siteVars.colors.grey[200], + backgroundColorHover: siteVars.colors.grey[50], + backgroundColorFocus: siteVars.colors.grey[200], + backgroundColorDisabled: siteVars.colors.grey[150], + borderColor: siteVars.colors.grey[200], + borderColorActive: siteVars.colors.grey[250], + borderColorHover: siteVars.colors.grey[250], borderColorFocus: siteVars.colors.white, - borderColorFocusIndicator: siteVars.colors.grey[900], + borderColorFocusIndicator: siteVars.colors.grey[750], borderColorDisabled: 'transparent', borderWidth: 1, @@ -109,18 +109,18 @@ export default (siteVars: any): ButtonVariables => { primaryBorderColorActive: 'transparent', primaryBorderColorHover: 'transparent', primaryBorderColorFocus: siteVars.colors.white, - primaryBorderColorFocusIndicator: siteVars.colors.grey[900], + primaryBorderColorFocusIndicator: siteVars.colors.grey[750], primaryBorderWidth: 1, primaryCircularBorderColorFocusIndicator: siteVars.colors.white, - circularColor: siteVars.colors.grey.light02, + circularColor: siteVars.colors.grey[500], circularColorActive: siteVars.colors.white, circularBackgroundColor: 'transparent', - circularBackgroundColorActive: siteVars.colors.grey.light02, - circularBackgroundColorHover: siteVars.colors.grey.light03, - circularBackgroundColorFocus: siteVars.colors.grey.light03, - circularBorderColor: siteVars.colors.grey.light02, + circularBackgroundColorActive: siteVars.colors.grey[500], + circularBackgroundColorHover: siteVars.colors.grey[450], + circularBackgroundColorFocus: siteVars.colors.grey[450], + circularBorderColor: siteVars.colors.grey[500], circularBorderColorActive: 'transparent', circularBorderColorHover: 'transparent', circularBorderColorFocus: 'transparent', @@ -130,7 +130,7 @@ export default (siteVars: any): ButtonVariables => { textColorHover: siteVars.brand04, textPrimaryColor: siteVars.colors.primary[500], textPrimaryColorHover: siteVars.brand04, - textSecondaryColor: siteVars.colors.grey.light03, + textSecondaryColor: siteVars.colors.grey[450], textSecondaryColorHover: siteVars.brand04, boxShadow: siteVars.shadowLevel1, diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts index 02915cdaa1..38471e28be 100644 --- a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts @@ -47,5 +47,5 @@ export default (siteVars): ChatMessageVariables => ({ isImportantColor: siteVars.colors.red[900], badgeTextColor: siteVars.colors.white, reactionGroupMarginLeft: pxToRem(12), - timestampColorMine: siteVars.colors.grey.light02, + timestampColorMine: siteVars.colors.grey[500], }) diff --git a/packages/react/src/themes/teams/components/Chat/chatVariables.ts b/packages/react/src/themes/teams/components/Chat/chatVariables.ts index e907801860..94029a34e3 100644 --- a/packages/react/src/themes/teams/components/Chat/chatVariables.ts +++ b/packages/react/src/themes/teams/components/Chat/chatVariables.ts @@ -3,5 +3,5 @@ export interface ChatVariables { } export default (siteVars): ChatVariables => ({ - backgroundColor: siteVars.colors.grey.light10, + backgroundColor: siteVars.colors.grey[100], }) diff --git a/packages/react/src/themes/teams/components/Divider/dividerVariables.ts b/packages/react/src/themes/teams/components/Divider/dividerVariables.ts index 54031647c0..038b9ce42d 100644 --- a/packages/react/src/themes/teams/components/Divider/dividerVariables.ts +++ b/packages/react/src/themes/teams/components/Divider/dividerVariables.ts @@ -15,8 +15,8 @@ export interface DividerVariables { export default (siteVars: any): DividerVariables => ({ colorScheme: siteVars.colorScheme, - dividerColor: siteVars.colors.grey.light09, - textColor: siteVars.colors.grey.light03, + dividerColor: siteVars.colors.grey[150], + textColor: siteVars.colors.grey[450], textFontSize: siteVars.fontSizeSmall, textLineHeight: siteVars.lineHeightSmall, importantFontWeight: siteVars.fontWeightBold, diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts index aef7456728..99c96cb47a 100644 --- a/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts +++ b/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts @@ -24,7 +24,7 @@ export interface DropdownVariables { const [_2px_asRem, _3px_asRem, _12px_asRem] = [2, 3, 12].map(v => pxToRem(v)) export default (siteVars): DropdownVariables => ({ - backgroundColor: siteVars.colors.grey.light10, + backgroundColor: siteVars.colors.grey[100], borderColorFocus: siteVars.colors.primary[500], borderRadius: `${_3px_asRem} ${_3px_asRem} ${_2px_asRem} ${_2px_asRem}`, borderWidth: `0 0 ${pxToRem(2)} 0`, @@ -34,7 +34,7 @@ export default (siteVars): DropdownVariables => ({ listBackgroundColor: siteVars.colors.white, listBorderRadius: _3px_asRem, listPadding: `${pxToRem(8)} 0`, - listBoxShadow: `0 .2rem .6rem 0 ${siteVars.colors.grey.light06}`, + listBoxShadow: `0 .2rem .6rem 0 ${siteVars.colors.grey[250]}`, listMaxHeight: '20rem', listItemBackgroundColor: siteVars.colors.white, listItemBackgroundColorActive: siteVars.colors.primary[500], diff --git a/packages/react/src/themes/teams/components/Header/headerDescriptionVariables.ts b/packages/react/src/themes/teams/components/Header/headerDescriptionVariables.ts index 7fbd988549..29f9e0703c 100644 --- a/packages/react/src/themes/teams/components/Header/headerDescriptionVariables.ts +++ b/packages/react/src/themes/teams/components/Header/headerDescriptionVariables.ts @@ -7,5 +7,5 @@ export interface HeaderDescriptionVariables { export default (siteVariables: any): HeaderDescriptionVariables => ({ colorScheme: siteVariables.colorScheme, - color: siteVariables.colors.grey.light04, + color: siteVariables.colors.grey[350], }) diff --git a/packages/react/src/themes/teams/components/Header/headerVariables.ts b/packages/react/src/themes/teams/components/Header/headerVariables.ts index e4e52cc78f..2f778c6699 100644 --- a/packages/react/src/themes/teams/components/Header/headerVariables.ts +++ b/packages/react/src/themes/teams/components/Header/headerVariables.ts @@ -9,7 +9,7 @@ export interface HeaderVariables { export default (siteVars: any): HeaderVariables => { return { colorScheme: siteVars.colorScheme, - color: siteVars.colors.grey[900], + color: siteVars.colors.grey[750], descriptionColor: undefined, } } diff --git a/packages/react/src/themes/teams/components/Icon/iconVariables.ts b/packages/react/src/themes/teams/components/Icon/iconVariables.ts index 88f11f2ed1..0543541d50 100644 --- a/packages/react/src/themes/teams/components/Icon/iconVariables.ts +++ b/packages/react/src/themes/teams/components/Icon/iconVariables.ts @@ -26,7 +26,7 @@ export default (siteVars): IconVariables => ({ brandColor: siteVars.brandColor, secondaryColor: siteVars.colors.white, redColor: siteVars.colors.red[900], - disabledColor: siteVars.colors.grey.light06, + disabledColor: siteVars.colors.grey[250], horizontalSpace: pxToRem(10), }) diff --git a/packages/react/src/themes/teams/components/Input/inputVariables.ts b/packages/react/src/themes/teams/components/Input/inputVariables.ts index 8135330305..e401239c14 100644 --- a/packages/react/src/themes/teams/components/Input/inputVariables.ts +++ b/packages/react/src/themes/teams/components/Input/inputVariables.ts @@ -19,11 +19,11 @@ export interface InputVariables { } export default (siteVars): InputVariables => ({ - backgroundColor: siteVars.colors.grey.light10, + backgroundColor: siteVars.colors.grey[100], borderRadius: `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`, borderWidth: `0 0 ${pxToRem(2)} 0`, - fontColor: siteVars.colors.grey.light02, + fontColor: siteVars.colors.grey[500], fontSize: siteVars.fontSizes.medium, iconPosition: 'absolute', diff --git a/packages/react/src/themes/teams/components/List/listItemVariables.ts b/packages/react/src/themes/teams/components/List/listItemVariables.ts index 9cd3d528e5..062b80d80a 100644 --- a/packages/react/src/themes/teams/components/List/listItemVariables.ts +++ b/packages/react/src/themes/teams/components/List/listItemVariables.ts @@ -55,7 +55,7 @@ export default (siteVariables: any): ListItemVariables => { selectableFocusHoverColor: siteVariables.colors.white, selectableFocusHoverBackgroundColor: siteVariables.brand08, selectedColor: siteVariables.bodyColor, - selectedBackgroundColor: siteVariables.colors.grey.light10, + selectedBackgroundColor: siteVariables.colors.grey[100], selectedFocusOutlineColor: siteVariables.colors.primary[500], } } diff --git a/packages/react/src/themes/teams/components/Menu/menuVariables.ts b/packages/react/src/themes/teams/components/Menu/menuVariables.ts index 8ba0fcb13c..004179ae88 100644 --- a/packages/react/src/themes/teams/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams/components/Menu/menuVariables.ts @@ -47,10 +47,10 @@ export interface MenuVariables { export default (siteVars: any): MenuVariables => { return { colorScheme: siteVars.colorScheme, - color: siteVars.colors.grey.light02, + color: siteVars.colors.grey[500], colorActive: siteVars.colors.black, colorFocus: siteVars.colors.white, - colorDisabled: siteVars.colors.grey.light06, + colorDisabled: siteVars.colors.grey[250], borderColor: undefined, borderColorHover: undefined, @@ -66,7 +66,7 @@ export default (siteVars: any): MenuVariables => { iconOnlyColorActive: siteVars.colors.primary[500], - underlinedBorderColor: siteVars.colors.grey.light08, + underlinedBorderColor: siteVars.colors.grey[200], lineHeightBase: siteVars.lineHeightMedium, horizontalPadding: `${pxToRem(14)} ${pxToRem(18)} ${pxToRem(14)} ${pxToRem(18)}`, @@ -78,12 +78,12 @@ export default (siteVars: any): MenuVariables => { verticalItemBorderWidth: pxToRem(2), verticalItemBorderColor: 'transparent', verticalPointingBorderColor: siteVars.colorScheme.primary.borderActive, // TODO: why is the default having primary color?! - verticalBackgroundColorFocus: siteVars.colors.grey.light09, + verticalBackgroundColorFocus: siteVars.colors.grey[150], pointingIndicatorBackgroundColor: siteVars.colors.primary[500], underlinedBottomBorderWidth: pxToRem(2), - primaryBorderColor: siteVars.colors.grey.light10, + primaryBorderColor: siteVars.colors.grey[100], dividerHeight: pxToRem(1), borderWidth: pxToRem(1), diff --git a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts index a8895839e6..4744368ca4 100644 --- a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts +++ b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts @@ -9,7 +9,7 @@ export interface PopupContentVariables { export default (siteVars: any): PopupContentVariables => { return { - borderColor: siteVars.colors.grey.light06, + borderColor: siteVars.colors.grey[250], padding: `${pxToRem(10)} ${pxToRem(14)}`, } } diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts index 54f70573d6..8011eb82c3 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts @@ -22,17 +22,17 @@ export type RadioGroupItemVariables = { } export default (siteVars: any): RadioGroupItemVariables => ({ - colorDisabled: siteVars.colors.grey.light06, + colorDisabled: siteVars.colors.grey[250], focusInnerBorderColor: siteVars.colors.white, focusOuterBorderColor: siteVars.colors.black, textFontSize: siteVars.fontSizes.medium, textColorDefault: siteVars.gray02, - textColorDefaultHoverFocus: siteVars.colors.grey[900], - textColorChecked: siteVars.colors.grey[900], + textColorDefaultHoverFocus: siteVars.colors.grey[750], + textColorChecked: siteVars.colors.grey[750], - iconBorderColorDefaultHover: siteVars.colors.grey[900], + iconBorderColorDefaultHover: siteVars.colors.grey[750], iconBorderColorChecked: siteVars.colors.primary[500], iconBackgroundColorChecked: siteVars.colors.primary[500], diff --git a/packages/react/src/themes/teams/components/Reaction/reactionVariables.ts b/packages/react/src/themes/teams/components/Reaction/reactionVariables.ts index c4be597bcc..cd7d879a9c 100644 --- a/packages/react/src/themes/teams/components/Reaction/reactionVariables.ts +++ b/packages/react/src/themes/teams/components/Reaction/reactionVariables.ts @@ -11,8 +11,8 @@ export interface ReactionVariables { } export default (siteVars): ReactionVariables => ({ - color: siteVars.colors.grey.light03, - colorHover: siteVars.colors.grey[900], + color: siteVars.colors.grey[450], + colorHover: siteVars.colors.grey[750], contentFontSize: siteVars.fontSizes.small, fontWeightHover: siteVars.fontWeightBold, outlineColorFocus: siteVars.colors.primary[500], diff --git a/packages/react/src/themes/teams/components/Text/textVariables.ts b/packages/react/src/themes/teams/components/Text/textVariables.ts index c958bdf65a..35f3393a0e 100644 --- a/packages/react/src/themes/teams/components/Text/textVariables.ts +++ b/packages/react/src/themes/teams/components/Text/textVariables.ts @@ -12,12 +12,12 @@ export default (siteVariables): Partial => { atMentionOtherColor: siteVariables.colors.primary[500], atMentionMeColor: siteVariables.naturalColors.darkOrange[400], atMentionMeFontWeight: siteVariables.fontWeightBold, - disabledColor: siteVariables.colors.grey.light06, + disabledColor: siteVariables.colors.grey[250], errorColor: siteVariables.colors.red[900], importantWeight: siteVariables.fontWeightBold, importantColor: siteVariables.colors.red[900], successColor: siteVariables.colors.green[900], - timestampColor: siteVariables.colors.grey.light04, - timestampHoverColor: siteVariables.colors.grey.light02, + timestampColor: siteVariables.colors.grey[350], + timestampHoverColor: siteVariables.colors.grey[500], } } diff --git a/packages/react/src/themes/teams/components/Tree/treeTitleVariables.ts b/packages/react/src/themes/teams/components/Tree/treeTitleVariables.ts index f3c5be9e8e..7cfd33c6b3 100644 --- a/packages/react/src/themes/teams/components/Tree/treeTitleVariables.ts +++ b/packages/react/src/themes/teams/components/Tree/treeTitleVariables.ts @@ -4,6 +4,6 @@ export interface TreeTitleVariables { export default (siteVars: any): TreeTitleVariables => { return { - defaultColor: siteVars.colors.grey[900], + defaultColor: siteVars.colors.grey[750], } } diff --git a/packages/react/src/themes/teams/siteVariables.ts b/packages/react/src/themes/teams/siteVariables.ts index 45d024ffcc..0a4ec4061a 100644 --- a/packages/react/src/themes/teams/siteVariables.ts +++ b/packages/react/src/themes/teams/siteVariables.ts @@ -60,7 +60,7 @@ export const warningStatusBackgroundColor = colors.yellow[900] export const warningStatusTextColor = colors.white export const errorStatusBackgroundColor = colors.red[900] export const errorStatusTextColor = colors.white -export const unknownStatusBackgroundColor = colors.grey.light04 +export const unknownStatusBackgroundColor = colors.grey[350] export const unknownStatusTextColor = colors.white // @@ -90,5 +90,5 @@ export const bodyFontFamily = '"Segoe UI", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", Helvetica, Arial, sans-serif' export const bodyFontSize = '1.4rem' export const bodyBackground = colors.white -export const bodyColor = colors.grey[900] +export const bodyColor = colors.grey[750] export const bodyLineHeight = lineHeightMedium From 0ae80d18e68f38b601be5e06118365730ac8b067 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 8 Apr 2019 12:29:41 +0200 Subject: [PATCH 047/118] -replaced tinted background --- .../components/Button/Usage/ButtonUsageExample.shorthand.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx b/docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx index 80498278dc..77ef9f91ea 100644 --- a/docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx +++ b/docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx @@ -11,7 +11,7 @@ const ButtonUsageExampleShorthand = () => ( colorActive: siteVariables.brand04, colorHover: siteVariables.brand04, colorFocus: siteVariables.colors.primary[900], - backgroundColor: siteVariables.colors.grey[900], + backgroundColor: '#252424', // no mapping color - tried - siteVariables.colors.grey[750] backgroundColorActive: siteVariables.colors.primary[100], backgroundColorHover: siteVariables.colors.primary[50], backgroundColorFocus: siteVariables.colors.primary[100], From baa2143ab36ee806cb7e83ff911424068e39a13b Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 8 Apr 2019 12:53:00 +0200 Subject: [PATCH 048/118] -replaced primary colors --- .../Usage/ButtonUsageExample.shorthand.tsx | 28 +++++++-------- .../ChatWithPopover.tsx | 2 +- .../ImportantAndMentionMessages/index.tsx | 2 +- .../prototypes/chatPane/chatPaneHeader.tsx | 2 +- .../components/MSTeamsHeader.tsx | 2 +- .../meetingOptions/components/MSTeamsLogo.tsx | 2 +- docs/src/views/IntegrateCustomComponents.tsx | 2 +- .../react/src/themes/teams-dark/colors.ts | 6 ++-- .../src/themes/teams-dark/siteVariables.ts | 18 +++++----- packages/react/src/themes/teams/colors.ts | 35 +++++++++---------- .../Attachment/attachmentVariables.ts | 2 +- .../components/Button/buttonVariables.ts | 6 ++-- .../components/Chat/chatMessageVariables.ts | 2 +- .../components/Dropdown/dropdownVariables.ts | 6 ++-- .../teams/components/Input/inputVariables.ts | 2 +- .../components/List/listItemVariables.ts | 2 +- .../teams/components/Menu/menuVariables.ts | 4 +-- .../RadioGroup/radioGroupItemVariables.ts | 4 +-- .../components/Reaction/reactionVariables.ts | 2 +- .../teams/components/Text/textVariables.ts | 2 +- 20 files changed, 64 insertions(+), 67 deletions(-) diff --git a/docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx b/docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx index 77ef9f91ea..82c2e6a85f 100644 --- a/docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx +++ b/docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx @@ -7,17 +7,17 @@ const ButtonUsageExampleShorthand = () => ( theme={{ componentVariables: { Button: siteVariables => ({ - color: siteVariables.colors.primary[500], + color: siteVariables.colors.primary[600], colorActive: siteVariables.brand04, colorHover: siteVariables.brand04, colorFocus: siteVariables.colors.primary[900], backgroundColor: '#252424', // no mapping color - tried - siteVariables.colors.grey[750] - backgroundColorActive: siteVariables.colors.primary[100], + backgroundColorActive: siteVariables.colors.primary[200], backgroundColorHover: siteVariables.colors.primary[50], - backgroundColorFocus: siteVariables.colors.primary[100], - borderColor: siteVariables.colors.primary[100], - borderColorActive: siteVariables.colors.primary[200], - borderColorHover: siteVariables.colors.primary[200], + backgroundColorFocus: siteVariables.colors.primary[200], + borderColor: siteVariables.colors.primary[200], + borderColorActive: siteVariables.colors.primary[300], + borderColorHover: siteVariables.colors.primary[300], borderColorFocus: siteVariables.colors.grey[900], borderColorFocusIndicator: siteVariables.colors.primary[900], }), @@ -33,17 +33,17 @@ const ButtonUsageExampleShorthand = () => ( theme={{ componentVariables: { Button: siteVariables => ({ - color: siteVariables.colors.primary[500], - colorActive: siteVariables.colors.primary[500], - colorHover: siteVariables.colors.primary[500], + color: siteVariables.colors.primary[600], + colorActive: siteVariables.colors.primary[600], + colorHover: siteVariables.colors.primary[600], colorFocus: siteVariables.colors.primary[900], backgroundColor: siteVariables.colors.white, - backgroundColorActive: siteVariables.colors.primary[100], + backgroundColorActive: siteVariables.colors.primary[200], backgroundColorHover: siteVariables.colors.primary[50], - backgroundColorFocus: siteVariables.colors.primary[100], - borderColor: siteVariables.colors.primary[100], - borderColorActive: siteVariables.colors.primary[200], - borderColorHover: siteVariables.colors.primary[200], + backgroundColorFocus: siteVariables.colors.primary[200], + borderColor: siteVariables.colors.primary[200], + borderColorActive: siteVariables.colors.primary[300], + borderColorHover: siteVariables.colors.primary[300], borderColorFocus: siteVariables.colors.white, borderColorFocusIndicator: siteVariables.colors.primary[900], }), diff --git a/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx b/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx index bbb5db40db..0f74090523 100644 --- a/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx +++ b/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx @@ -14,7 +14,7 @@ const ChatWithPopover = () => ( ChatMessage: { root: ({ props: p, theme: { siteVariables } }) => ({ '& a': { - color: siteVariables.colors.primary[500], + color: siteVariables.colors.primary[600], }, }), }, diff --git a/docs/src/prototypes/chatMessages/ImportantAndMentionMessages/index.tsx b/docs/src/prototypes/chatMessages/ImportantAndMentionMessages/index.tsx index 358eed2872..cce02def04 100644 --- a/docs/src/prototypes/chatMessages/ImportantAndMentionMessages/index.tsx +++ b/docs/src/prototypes/chatMessages/ImportantAndMentionMessages/index.tsx @@ -67,7 +67,7 @@ const items = [ badge={{ icon: 'mention' }} variables={siteVars => ({ hasMention: true, - hasMentionColor: siteVars.colors.primary[500], + hasMentionColor: siteVars.colors.primary[600], })} /> ), diff --git a/docs/src/prototypes/chatPane/chatPaneHeader.tsx b/docs/src/prototypes/chatPane/chatPaneHeader.tsx index 9962f61f8a..54344cc75b 100644 --- a/docs/src/prototypes/chatPane/chatPaneHeader.tsx +++ b/docs/src/prototypes/chatPane/chatPaneHeader.tsx @@ -36,7 +36,7 @@ class ChatPaneHeader extends React.PureComponent { height: '40px', padding: 0, })} - variables={siteVars => ({ backgroundColor: siteVars.colors.primary[500] })} + variables={siteVars => ({ backgroundColor: siteVars.colors.primary[600] })} /> ) } diff --git a/docs/src/prototypes/meetingOptions/components/MSTeamsHeader.tsx b/docs/src/prototypes/meetingOptions/components/MSTeamsHeader.tsx index 3cd1f82c73..d93aea76b0 100644 --- a/docs/src/prototypes/meetingOptions/components/MSTeamsHeader.tsx +++ b/docs/src/prototypes/meetingOptions/components/MSTeamsHeader.tsx @@ -7,7 +7,7 @@ export default props => { { return ( -
+
{props.content}
) diff --git a/docs/src/prototypes/meetingOptions/components/MSTeamsLogo.tsx b/docs/src/prototypes/meetingOptions/components/MSTeamsLogo.tsx index 250259d7bd..ec37754ae3 100644 --- a/docs/src/prototypes/meetingOptions/components/MSTeamsLogo.tsx +++ b/docs/src/prototypes/meetingOptions/components/MSTeamsLogo.tsx @@ -18,7 +18,7 @@ class MSTeamsLogo extends React.Component {
{Icon.create(icon, { defaultProps: { - variables: { color: siteVariables.colors.primary[500] }, + variables: { color: siteVariables.colors.primary[600] }, size: 'largest', xSpacing: 'after', styles: { verticalAlign: 'middle' }, diff --git a/docs/src/views/IntegrateCustomComponents.tsx b/docs/src/views/IntegrateCustomComponents.tsx index 654e8a3173..65a2c82416 100644 --- a/docs/src/views/IntegrateCustomComponents.tsx +++ b/docs/src/views/IntegrateCustomComponents.tsx @@ -75,7 +75,7 @@ export default () => ( componentStyles: { StyledButton: { root: ({ variables, theme: { siteVariables } }) => ({ - backgroundColor: siteVariables.colors.primary[500], + backgroundColor: siteVariables.colors.primary[600], color: variables.color, }), }, diff --git a/packages/react/src/themes/teams-dark/colors.ts b/packages/react/src/themes/teams-dark/colors.ts index c2b45941ff..06e43718c1 100644 --- a/packages/react/src/themes/teams-dark/colors.ts +++ b/packages/react/src/themes/teams-dark/colors.ts @@ -119,14 +119,14 @@ export const colorScheme: ColorSchemeMapping = { }, primary: createColorScheme('primary', { foregroundHover: colors.white, - backgroundHover: colors.primary[200], + backgroundHover: colors.primary[300], foregroundActive: colors.white, - backgroundActive: colors.primary.light08, + backgroundActive: colors.primary[500], shadowActive: colors.primary[50], foregroundFocus: colors.white, - backgroundFocus: colors.primary[200], + backgroundFocus: colors.primary[300], }), grey: createColorScheme('grey'), green: createColorScheme('green'), diff --git a/packages/react/src/themes/teams-dark/siteVariables.ts b/packages/react/src/themes/teams-dark/siteVariables.ts index e35ffac1bf..e332ad6d84 100644 --- a/packages/react/src/themes/teams-dark/siteVariables.ts +++ b/packages/react/src/themes/teams-dark/siteVariables.ts @@ -4,17 +4,17 @@ export { colorScheme } from './colors' // // COLORS // -export const black = '#201f1f' // no mapping color +export const black = colors.grey[800] // no mapping color // TODO: remove these colors -export const brand = '#6264A7' // light theme brand - primary[500] -export const brand02 = '#e2e2f6' // light theme brand14 - primary[100] -export const brand04 = '#bdbde6' // light theme brand12 primary[200] -export const brand06 = '#a6a7dc' // no mapping color -export const brand08 = '#8b8cc7' // light theme brand08 -export const brand12 = colors.primary[500] // same as brand -export const brand14 = '#464775' // light theme brand04 -export const brand16 = '#33344a' // light theme brand02 primary[900] +export const brand = colors.primary[600] +export const brand02 = colors.primary[200] +export const brand04 = colors.primary[300] +export const brand06 = colors.primary[400] +export const brand08 = colors.primary[500] +export const brand12 = colors.primary[600] +export const brand14 = colors.primary[800] +export const brand16 = colors.primary[900] export const orange04 = '#e97548' // orange[900] export const magenta = '#cf6098' // no mapping color diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index b673ed93e1..40cead341c 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -9,21 +9,18 @@ import { ColorVariants, ColorSchemeMapping } from 'src/themes/types' export const emphasisColors: EmphasisColors = { primary: { - 50: '#F4F4FC', // siteVariables.brand16 - 100: '#E2E2F6', // siteVariables.brand14, dark theme brand02 - 200: '#BDBDE6', // siteVariables.brand12, dark theme brand04 - 300: '#8F90C1', - 400: '#6E70AE', - 500: '#6264A7', // siteVariables.brand, siteVariables.brand06 (same color?), dark theme brand, brand12 - 600: '#55578D', - 700: '#4A4C78', - 800: '#414265', - 900: '#33344A', // siteVariables.brand02, dark theme brand16 - light04: '#464775', // no mapping color - light08: '#8B8CC7', - dark06: '#a6a7dc', - dark08: '#8B8CC7', // same as light08 - dark14: '#464775', // same as light04 + // UPDATED + 50: '#F4F4FC', // siteVariables.brand16, same as prev + 100: '#E5E5F1', // brand15 + 200: '#E2E2F6', // 100, light brand14, dark theme brand02 + 300: '#BDBDE6', // 200, light brand12, dark theme brand04 + 400: '#A6A7DC', // dark theme brand06 (dark06) + 500: '#8B8CC7', // light08, dark08 + 600: '#6264A7', // 500, siteVariables.brand, siteVariables.brand06 (same color?), dark theme brand, brand12 + 700: '#585A96', // light05 + 800: '#464775', // light04, dark14 + 900: '#33344A', // siteVariables.brand02, dark theme brand16, same as 900 prev + 1000: '#373644', }, } @@ -60,7 +57,7 @@ export const naturalColors: NaturalColors = { 600: '#323131', // in call audio only grid slot 4 650: '#2D2C2C', // dark10?!?!?! - different color [#323130], in call audio only grid slot 3 700: '#292828', // dark14, in call audio only grid slot 2, old $app-density-message-background-initial-hover-focus-darktheme - 750: '#252423', // 900, old $app-black, in call audio only grid slot 1, old $app-density-message-background-replay-hover-focus-darktheme + 750: '#252423', // 900 - different [#252424] , old $app-black, in call audio only grid slot 1, old $app-density-message-background-replay-hover-focus-darktheme 800: '#201F1F', // app black darktheme, in call title bar, in call audio only pip 850: '#1B1A1A', // in call background behind presented doc, old $app-density-message-border-darktheme 900: '#11100F', // dark theme borders @@ -318,14 +315,14 @@ export const colorScheme: ColorSchemeMapping = { }, primary: createColorScheme('primary', { foregroundHover: colors.white, - backgroundHover: colors.primary[200], + backgroundHover: colors.primary[300], foregroundActive: colors.white, - backgroundActive: colors.primary.light08, + backgroundActive: colors.primary[500], shadowActive: colors.primary[50], foregroundFocus: colors.white, - backgroundFocus: colors.primary[200], + backgroundFocus: colors.primary[300], }), grey: createColorScheme('grey'), green: createColorScheme('green'), diff --git a/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts b/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts index ed2f419532..fa7e731d55 100644 --- a/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts +++ b/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts @@ -41,5 +41,5 @@ export default siteVariables => ({ descriptionFontWeight: siteVariables.fontWeightRegular, descriptionLineHeight: siteVariables.lineHeightSmall, - focusOutlineColor: siteVariables.colors.primary[500], + focusOutlineColor: siteVariables.colors.primary[600], }) diff --git a/packages/react/src/themes/teams/components/Button/buttonVariables.ts b/packages/react/src/themes/teams/components/Button/buttonVariables.ts index 2761059a43..15ecea0b12 100644 --- a/packages/react/src/themes/teams/components/Button/buttonVariables.ts +++ b/packages/react/src/themes/teams/components/Button/buttonVariables.ts @@ -101,7 +101,7 @@ export default (siteVars: any): ButtonVariables => { primaryColorActive: siteVars.colors.white, primaryColorHover: siteVars.colors.white, primaryColorFocus: siteVars.colors.white, - primaryBackgroundColor: siteVars.colors.primary[500], + primaryBackgroundColor: siteVars.colors.primary[600], primaryBackgroundColorActive: siteVars.colors.primary[900], primaryBackgroundColorHover: siteVars.brand04, primaryBackgroundColorFocus: siteVars.brand04, @@ -126,9 +126,9 @@ export default (siteVars: any): ButtonVariables => { circularBorderColorFocus: 'transparent', circularBorderColorFocusIndicator: siteVars.colors.white, - textColor: siteVars.colors.primary[500], + textColor: siteVars.colors.primary[600], textColorHover: siteVars.brand04, - textPrimaryColor: siteVars.colors.primary[500], + textPrimaryColor: siteVars.colors.primary[600], textPrimaryColorHover: siteVars.brand04, textSecondaryColor: siteVars.colors.grey[450], textSecondaryColorHover: siteVars.brand04, diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts index 38471e28be..38218176a3 100644 --- a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts @@ -38,7 +38,7 @@ export default (siteVars): ChatMessageVariables => ({ authorMarginRight: pxToRem(12), authorFontWeight: siteVars.fontWeightBold, headerMarginBottom: pxToRem(2), - contentFocusOutlineColor: siteVars.colors.primary[500], + contentFocusOutlineColor: siteVars.colors.primary[600], border: 'none', badgeShadow: siteVars.shadowLevel1Darker, isImportant: false, diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts index 99c96cb47a..a683492364 100644 --- a/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts +++ b/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts @@ -25,7 +25,7 @@ const [_2px_asRem, _3px_asRem, _12px_asRem] = [2, 3, 12].map(v => pxToRem(v)) export default (siteVars): DropdownVariables => ({ backgroundColor: siteVars.colors.grey[100], - borderColorFocus: siteVars.colors.primary[500], + borderColorFocus: siteVars.colors.primary[600], borderRadius: `${_3px_asRem} ${_3px_asRem} ${_2px_asRem} ${_2px_asRem}`, borderWidth: `0 0 ${pxToRem(2)} 0`, color: siteVars.bodyColor, @@ -37,9 +37,9 @@ export default (siteVars): DropdownVariables => ({ listBoxShadow: `0 .2rem .6rem 0 ${siteVars.colors.grey[250]}`, listMaxHeight: '20rem', listItemBackgroundColor: siteVars.colors.white, - listItemBackgroundColorActive: siteVars.colors.primary[500], + listItemBackgroundColorActive: siteVars.colors.primary[600], listItemColorActive: siteVars.colors.white, - selectedItemBackgroundColorFocus: siteVars.colors.primary[100], + selectedItemBackgroundColorFocus: siteVars.colors.primary[200], selectedItemsMaxHeight: pxToRem(82), toggleIndicatorSize: pxToRem(32), width: pxToRem(356), diff --git a/packages/react/src/themes/teams/components/Input/inputVariables.ts b/packages/react/src/themes/teams/components/Input/inputVariables.ts index e401239c14..7575012c98 100644 --- a/packages/react/src/themes/teams/components/Input/inputVariables.ts +++ b/packages/react/src/themes/teams/components/Input/inputVariables.ts @@ -34,7 +34,7 @@ export default (siteVars): InputVariables => ({ inputPaddingWithIconAtEnd: `${pxToRem(7)} ${pxToRem(24)} ${pxToRem(7)} ${pxToRem(12)}`, inputPadding: `${pxToRem(7)} ${pxToRem(12)}`, - inputFocusBorderBottomColor: siteVars.colors.primary[500], + inputFocusBorderBottomColor: siteVars.colors.primary[600], inputFocusBorderRadius: `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`, placeholderColor: siteVars.gray02, diff --git a/packages/react/src/themes/teams/components/List/listItemVariables.ts b/packages/react/src/themes/teams/components/List/listItemVariables.ts index 062b80d80a..8d6a642f4b 100644 --- a/packages/react/src/themes/teams/components/List/listItemVariables.ts +++ b/packages/react/src/themes/teams/components/List/listItemVariables.ts @@ -56,6 +56,6 @@ export default (siteVariables: any): ListItemVariables => { selectableFocusHoverBackgroundColor: siteVariables.brand08, selectedColor: siteVariables.bodyColor, selectedBackgroundColor: siteVariables.colors.grey[100], - selectedFocusOutlineColor: siteVariables.colors.primary[500], + selectedFocusOutlineColor: siteVariables.colors.primary[600], } } diff --git a/packages/react/src/themes/teams/components/Menu/menuVariables.ts b/packages/react/src/themes/teams/components/Menu/menuVariables.ts index 004179ae88..95a94dd820 100644 --- a/packages/react/src/themes/teams/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams/components/Menu/menuVariables.ts @@ -64,7 +64,7 @@ export default (siteVars: any): MenuVariables => { backgroundColorHover: undefined, backgroundColorActive: undefined, - iconOnlyColorActive: siteVars.colors.primary[500], + iconOnlyColorActive: siteVars.colors.primary[600], underlinedBorderColor: siteVars.colors.grey[200], @@ -80,7 +80,7 @@ export default (siteVars: any): MenuVariables => { verticalPointingBorderColor: siteVars.colorScheme.primary.borderActive, // TODO: why is the default having primary color?! verticalBackgroundColorFocus: siteVars.colors.grey[150], - pointingIndicatorBackgroundColor: siteVars.colors.primary[500], + pointingIndicatorBackgroundColor: siteVars.colors.primary[600], underlinedBottomBorderWidth: pxToRem(2), primaryBorderColor: siteVars.colors.grey[100], diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts index 8011eb82c3..7a9ab287ae 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts @@ -33,9 +33,9 @@ export default (siteVars: any): RadioGroupItemVariables => ({ textColorChecked: siteVars.colors.grey[750], iconBorderColorDefaultHover: siteVars.colors.grey[750], - iconBorderColorChecked: siteVars.colors.primary[500], + iconBorderColorChecked: siteVars.colors.primary[600], - iconBackgroundColorChecked: siteVars.colors.primary[500], + iconBackgroundColorChecked: siteVars.colors.primary[600], padding: `0 ${pxToRem(4)}`, }) diff --git a/packages/react/src/themes/teams/components/Reaction/reactionVariables.ts b/packages/react/src/themes/teams/components/Reaction/reactionVariables.ts index cd7d879a9c..e48a28ebb0 100644 --- a/packages/react/src/themes/teams/components/Reaction/reactionVariables.ts +++ b/packages/react/src/themes/teams/components/Reaction/reactionVariables.ts @@ -15,7 +15,7 @@ export default (siteVars): ReactionVariables => ({ colorHover: siteVars.colors.grey[750], contentFontSize: siteVars.fontSizes.small, fontWeightHover: siteVars.fontWeightBold, - outlineColorFocus: siteVars.colors.primary[500], + outlineColorFocus: siteVars.colors.primary[600], outlineWidthFocus: pxToRem(2), outlineOffsetFocus: pxToRem(-2), }) diff --git a/packages/react/src/themes/teams/components/Text/textVariables.ts b/packages/react/src/themes/teams/components/Text/textVariables.ts index 35f3393a0e..3a4ea939c5 100644 --- a/packages/react/src/themes/teams/components/Text/textVariables.ts +++ b/packages/react/src/themes/teams/components/Text/textVariables.ts @@ -9,7 +9,7 @@ export interface TeamsTextVariables extends TextVariables { export default (siteVariables): Partial => { return { colorScheme: siteVariables.colorScheme, - atMentionOtherColor: siteVariables.colors.primary[500], + atMentionOtherColor: siteVariables.colors.primary[600], atMentionMeColor: siteVariables.naturalColors.darkOrange[400], atMentionMeFontWeight: siteVariables.fontWeightBold, disabledColor: siteVariables.colors.grey[250], From 7147cea56e92902710e9c056ca06e526eb1f2e0e Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 8 Apr 2019 14:20:12 +0200 Subject: [PATCH 049/118] -fixes --- packages/react/src/themes/teams/colors.ts | 46 +++++++++---------- .../teams/components/Menu/menuItemStyles.ts | 4 +- 2 files changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index 40cead341c..d7728681b5 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -190,35 +190,35 @@ export const colors: ColorPalette = { const createColorScheme = (color: string, customValues = {}) => { return { - foregroundDefault: colors[color][500], + foregroundDefault: colors[color][600], backgroundDefault: colors[color][50], - borderDefault: colors[color][500], - shadowDefault: colors[color][500], + borderDefault: colors[color][600], + shadowDefault: colors[color][600], foregroundHover: colors[color][50], - backgroundHover: colors[color][500], - borderHover: colors[color][500], - shadowHover: colors[color][500], + backgroundHover: colors[color][600], + borderHover: colors[color][600], + shadowHover: colors[color][600], foregroundActive: colors[color][50], - backgroundActive: colors[color][500], - borderActive: colors[color][500], - shadowActive: colors[color][500], + backgroundActive: colors[color][600], + borderActive: colors[color][600], + shadowActive: colors[color][600], foregroundFocus: colors[color][50], - backgroundFocus: colors[color][500], - borderFocus: colors[color][500], - shadowFocus: colors[color][500], + backgroundFocus: colors[color][600], + borderFocus: colors[color][600], + shadowFocus: colors[color][600], foregroundFocusWithin: colors[color][50], - backgroundFocusWithin: colors[color][500], - borderFocusWithin: colors[color][500], - shadowFocusWithin: colors[color][500], + backgroundFocusWithin: colors[color][600], + borderFocusWithin: colors[color][600], + shadowFocusWithin: colors[color][600], foregroundDisabled: colors[color][50], - backgroundDisabled: colors[color][500], - borderDisabled: colors[color][500], - shadowDisabled: colors[color][500], + backgroundDisabled: colors[color][600], + borderDisabled: colors[color][600], + shadowDisabled: colors[color][600], ...customValues, } } @@ -325,13 +325,13 @@ export const colorScheme: ColorSchemeMapping = { backgroundFocus: colors.primary[300], }), grey: createColorScheme('grey'), - green: createColorScheme('green'), + green: createColorScheme('green', { foregroundDefault: colors.green[500] }), orange: createColorScheme('orange', lightColorOverrides), - pink: createColorScheme('pink'), - red: createColorScheme('red'), + pink: createColorScheme('pink', { foregroundDefault: colors.pink[500] }), + red: createColorScheme('red', { foregroundDefault: colors.red[500] }), yellow: createColorScheme('yellow', lightColorOverrides), - darkOrange: createColorScheme('darkOrange'), + darkOrange: createColorScheme('darkOrange', { foregroundDefault: colors.darkOrange[500] }), lightGreen: createColorScheme('lightGreen', lightColorOverrides), - magenta: createColorScheme('magenta'), + magenta: createColorScheme('magenta', { foregroundDefault: colors.magenta[500] }), postOrange: createColorScheme('postOrange', lightColorOverrides), } diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index e76af4bd87..9efb67277e 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -93,13 +93,13 @@ const getHoverStyles = ({ } const pointingBeak = ({ props, variables: v, colorScheme }): ICSSInJSStyle => { - const { pointing } = props + const { pointing, primary } = props let top: string let borders: ICSSInJSStyle const backgroundColor = v.backgroundColorActive || colorScheme.backgroundActive - const borderColor = v.borderColor || colorScheme.borderDefault + const borderColor = v.borderColor || primary ? v.primaryBorderColor : colorScheme.borderDefault if (pointing === 'start') { borders = { From 140cdd77709692403d5bf77bcf2129707a98d90e Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 8 Apr 2019 14:58:40 +0200 Subject: [PATCH 050/118] -added orange colors -removed primary colors defined in site variables --- .../Usage/ButtonUsageExample.shorthand.tsx | 4 +-- .../react/src/themes/teams-dark/colors.ts | 1 - .../components/Button/buttonVariables.ts | 10 ++++-- .../components/Divider/dividerVariables.ts | 4 +-- .../components/Menu/menuVariables.ts | 2 +- .../RadioGroup/radioGroupItemVariables.ts | 4 +-- .../components/Text/textVariables.ts | 4 +-- .../src/themes/teams-dark/siteVariables.ts | 11 ------ .../teams-high-contrast/siteVariables.ts | 1 - packages/react/src/themes/teams/colors.ts | 34 ++++++------------- .../components/Button/buttonVariables.ts | 10 +++--- .../components/Chat/chatMessageVariables.ts | 2 +- .../components/List/listItemVariables.ts | 2 +- .../teams/components/Text/textVariables.ts | 2 +- .../react/src/themes/teams/siteVariables.ts | 3 -- 15 files changed, 34 insertions(+), 60 deletions(-) diff --git a/docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx b/docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx index 82c2e6a85f..2f13f694f2 100644 --- a/docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx +++ b/docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx @@ -8,8 +8,8 @@ const ButtonUsageExampleShorthand = () => ( componentVariables: { Button: siteVariables => ({ color: siteVariables.colors.primary[600], - colorActive: siteVariables.brand04, - colorHover: siteVariables.brand04, + colorActive: siteVariables.colors.primary[300], + colorHover: siteVariables.colors.primary[300], colorFocus: siteVariables.colors.primary[900], backgroundColor: '#252424', // no mapping color - tried - siteVariables.colors.grey[750] backgroundColorActive: siteVariables.colors.primary[200], diff --git a/packages/react/src/themes/teams-dark/colors.ts b/packages/react/src/themes/teams-dark/colors.ts index 06e43718c1..388e671cc9 100644 --- a/packages/react/src/themes/teams-dark/colors.ts +++ b/packages/react/src/themes/teams-dark/colors.ts @@ -148,7 +148,6 @@ export const colorScheme: ColorSchemeMapping = { foregroundFocusWithin: colors.black, foregroundDisabled: colors.black, }), - darkOrange: createColorScheme('darkOrange'), lightGreen: createColorScheme('lightGreen', { backgroundDefault: colors.black, foregroundHover: colors.black, diff --git a/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts b/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts index 4614b636e0..c266cc16fb 100644 --- a/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts @@ -18,9 +18,9 @@ export default (siteVars: any): Partial => { borderColorHover: siteVars.colors.grey[450], borderColorFocusIndicator: siteVars.colors.white, - primaryBackgroundColorActive: siteVars.brand08, - primaryBackgroundColorHover: siteVars.brand08, - primaryBackgroundColorFocus: siteVars.brand14, + primaryBackgroundColorActive: siteVars.colors.primary[500], + primaryBackgroundColorHover: siteVars.colors.primary[500], + primaryBackgroundColorFocus: siteVars.colors.primary[800], primaryBorderColorFocus: siteVars.black, primaryBorderColorFocusIndicator: siteVars.colors.white, @@ -31,5 +31,9 @@ export default (siteVars: any): Partial => { circularBackgroundColorFocus: siteVars.colors.grey[250], circularBorderColor: siteVars.colors.grey[250], circularBorderColorFocusIndicator: siteVars.black, + + textColorHover: siteVars.colors.primary[300], + textPrimaryColorHover: siteVars.colors.primary[300], + textSecondaryColorHover: siteVars.colors.primary[300], } } diff --git a/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts b/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts index c1278fcb15..84b0bad8fb 100644 --- a/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts @@ -4,8 +4,8 @@ export default (siteVars: any): Partial => ({ colorScheme: { ...siteVars.colorScheme, primary: { - foregroundDefault: siteVars.brand06, - borderDefault: siteVars.brand06, + foregroundDefault: siteVars.colors.primary[400], + borderDefault: siteVars.colors.primary[400], }, }, textColor: siteVars.colors.grey[250], diff --git a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts index 7c580eb4b6..a70a0d462e 100644 --- a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts @@ -8,7 +8,7 @@ export default (siteVars: any): Partial => ({ colorDisabled: siteVars.colors.grey[450], primaryBorderColor: siteVars.colors.grey[650], - pointingIndicatorBackgroundColor: siteVars.brand06, + pointingIndicatorBackgroundColor: siteVars.colors.primary[400], verticalBackgroundColor: siteVars.colors.grey[650], verticalBackgroundColorFocus: siteVars.colors.grey[550], diff --git a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts index 4d1f095a72..13bcd866c3 100644 --- a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts @@ -6,7 +6,7 @@ export default (siteVars: any): Partial => ({ textColorChecked: siteVars.colors.white, iconBorderColorDefaultHover: siteVars.colors.white, - iconBorderColorChecked: siteVars.brand06, + iconBorderColorChecked: siteVars.colors.primary[400], - iconBackgroundColorChecked: siteVars.brand06, + iconBackgroundColorChecked: siteVars.colors.primary[400], }) diff --git a/packages/react/src/themes/teams-dark/components/Text/textVariables.ts b/packages/react/src/themes/teams-dark/components/Text/textVariables.ts index 6bcb23d33e..b1958c994b 100644 --- a/packages/react/src/themes/teams-dark/components/Text/textVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Text/textVariables.ts @@ -1,8 +1,8 @@ import { TeamsTextVariables } from '../../../teams/components/Text/textVariables' export default (siteVariables): Partial => ({ - atMentionMeColor: siteVariables.orange04, - atMentionOtherColor: siteVariables.brand06, + atMentionMeColor: siteVariables.colors.orange[300], + atMentionOtherColor: siteVariables.colors.primary[400], disabledColor: siteVariables.colors.grey[450], errorColor: siteVariables.red, importantColor: siteVariables.red, diff --git a/packages/react/src/themes/teams-dark/siteVariables.ts b/packages/react/src/themes/teams-dark/siteVariables.ts index e332ad6d84..45ec320501 100644 --- a/packages/react/src/themes/teams-dark/siteVariables.ts +++ b/packages/react/src/themes/teams-dark/siteVariables.ts @@ -6,17 +6,6 @@ export { colorScheme } from './colors' // export const black = colors.grey[800] // no mapping color -// TODO: remove these colors -export const brand = colors.primary[600] -export const brand02 = colors.primary[200] -export const brand04 = colors.primary[300] -export const brand06 = colors.primary[400] -export const brand08 = colors.primary[500] -export const brand12 = colors.primary[600] -export const brand14 = colors.primary[800] -export const brand16 = colors.primary[900] - -export const orange04 = '#e97548' // orange[900] export const magenta = '#cf6098' // no mapping color export const orchid = '#ae3d84' // no mapping color export const red = '#d74654' // no mapping color diff --git a/packages/react/src/themes/teams-high-contrast/siteVariables.ts b/packages/react/src/themes/teams-high-contrast/siteVariables.ts index 615df38e47..3ae0948620 100644 --- a/packages/react/src/themes/teams-high-contrast/siteVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/siteVariables.ts @@ -76,7 +76,6 @@ export const colorScheme: ColorSchemeMapping = { pink: createColorScheme(), red: createColorScheme(), yellow: createColorScheme(), - darkOrange: createColorScheme(), lightGreen: createColorScheme(), magenta: createColorScheme(), postOrange: createColorScheme(), diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index d7728681b5..bcae86fc54 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -64,16 +64,16 @@ export const naturalColors: NaturalColors = { 1000: '#000000', // black }, orange: { - 50: '#FEF9F7', - 100: '#FDF0EB', - 200: '#FAE3DA', - 300: '#F8D3C5', - 400: '#F5C6B3', - 500: '#F4B8A1', - 600: '#F2AD92', - 700: '#F0A081', - 800: '#ED8E6A', - 900: '#E97548', + 50: '#F9ECEA', // darkOrange[50] + 100: '#EFDBD3', // app orange14 + 200: '#EDC2A7', // wrong in invision?! old message highlight border + 300: '#E97548', // orange[900] + 400: '#CC4A31', // app orange04 darkOrange[400] + 500: '#BD432C', // app orange03 + 600: '#A33D2A', // app orange02 + 700: '#833122', // app orange01 darkOrange[900] + 800: '#664134', // app orange14 dark + 900: '#51332C', // app orange16 dark }, pink: { 50: '#E8BDD5', @@ -111,18 +111,6 @@ export const naturalColors: NaturalColors = { 800: '#F9D844', 900: '#F8D22A', // siteVariables.yellow }, - darkOrange: { - 50: '#F9ECEA', - 100: '#ECBCB3', - 200: '#E29C8F', - 300: '#D97B69', - 400: '#CC4A31', // siteVariables.orange04 - 500: '#C5472F', - 600: '#B7432D', - 700: '#A73D29', - 800: '#983927', - 900: '#833122', - }, lightGreen: { 50: '#E7F2D9', 100: '#DFEECD', @@ -176,7 +164,6 @@ export const primitiveColors: PrimitiveColors = { } export type ThemeColors = Partial<{ - darkOrange: ColorVariants postOrange: ColorVariants lightGreen: ColorVariants magenta: ColorVariants @@ -330,7 +317,6 @@ export const colorScheme: ColorSchemeMapping = { pink: createColorScheme('pink', { foregroundDefault: colors.pink[500] }), red: createColorScheme('red', { foregroundDefault: colors.red[500] }), yellow: createColorScheme('yellow', lightColorOverrides), - darkOrange: createColorScheme('darkOrange', { foregroundDefault: colors.darkOrange[500] }), lightGreen: createColorScheme('lightGreen', lightColorOverrides), magenta: createColorScheme('magenta', { foregroundDefault: colors.magenta[500] }), postOrange: createColorScheme('postOrange', lightColorOverrides), diff --git a/packages/react/src/themes/teams/components/Button/buttonVariables.ts b/packages/react/src/themes/teams/components/Button/buttonVariables.ts index 15ecea0b12..9ef14ab2e9 100644 --- a/packages/react/src/themes/teams/components/Button/buttonVariables.ts +++ b/packages/react/src/themes/teams/components/Button/buttonVariables.ts @@ -103,8 +103,8 @@ export default (siteVars: any): ButtonVariables => { primaryColorFocus: siteVars.colors.white, primaryBackgroundColor: siteVars.colors.primary[600], primaryBackgroundColorActive: siteVars.colors.primary[900], - primaryBackgroundColorHover: siteVars.brand04, - primaryBackgroundColorFocus: siteVars.brand04, + primaryBackgroundColorHover: siteVars.colors.primary[800], + primaryBackgroundColorFocus: siteVars.colors.primary[800], primaryBorderColor: 'transparent', primaryBorderColorActive: 'transparent', primaryBorderColorHover: 'transparent', @@ -127,11 +127,11 @@ export default (siteVars: any): ButtonVariables => { circularBorderColorFocusIndicator: siteVars.colors.white, textColor: siteVars.colors.primary[600], - textColorHover: siteVars.brand04, + textColorHover: siteVars.colors.primary[800], textPrimaryColor: siteVars.colors.primary[600], - textPrimaryColorHover: siteVars.brand04, + textPrimaryColorHover: siteVars.colors.primary[800], textSecondaryColor: siteVars.colors.grey[450], - textSecondaryColorHover: siteVars.brand04, + textSecondaryColorHover: siteVars.colors.primary[800], boxShadow: siteVars.shadowLevel1, borderRadiusFocused: pxToRem(3), diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts index 38218176a3..b7f89e9208 100644 --- a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts @@ -43,7 +43,7 @@ export default (siteVars): ChatMessageVariables => ({ badgeShadow: siteVars.shadowLevel1Darker, isImportant: false, hasMention: false, - hasMentionColor: siteVars.naturalColors.darkOrange[400], + hasMentionColor: siteVars.orange[400], isImportantColor: siteVars.colors.red[900], badgeTextColor: siteVars.colors.white, reactionGroupMarginLeft: pxToRem(12), diff --git a/packages/react/src/themes/teams/components/List/listItemVariables.ts b/packages/react/src/themes/teams/components/List/listItemVariables.ts index 8d6a642f4b..b36d34af21 100644 --- a/packages/react/src/themes/teams/components/List/listItemVariables.ts +++ b/packages/react/src/themes/teams/components/List/listItemVariables.ts @@ -53,7 +53,7 @@ export default (siteVariables: any): ListItemVariables => { // Selectable selectableFocusHoverColor: siteVariables.colors.white, - selectableFocusHoverBackgroundColor: siteVariables.brand08, + selectableFocusHoverBackgroundColor: siteVariables.colors.primary[500], selectedColor: siteVariables.bodyColor, selectedBackgroundColor: siteVariables.colors.grey[100], selectedFocusOutlineColor: siteVariables.colors.primary[600], diff --git a/packages/react/src/themes/teams/components/Text/textVariables.ts b/packages/react/src/themes/teams/components/Text/textVariables.ts index 3a4ea939c5..41770f3d8c 100644 --- a/packages/react/src/themes/teams/components/Text/textVariables.ts +++ b/packages/react/src/themes/teams/components/Text/textVariables.ts @@ -10,7 +10,7 @@ export default (siteVariables): Partial => { return { colorScheme: siteVariables.colorScheme, atMentionOtherColor: siteVariables.colors.primary[600], - atMentionMeColor: siteVariables.naturalColors.darkOrange[400], + atMentionMeColor: siteVariables.orange[400], atMentionMeFontWeight: siteVariables.fontWeightBold, disabledColor: siteVariables.colors.grey[250], errorColor: siteVariables.colors.red[900], diff --git a/packages/react/src/themes/teams/siteVariables.ts b/packages/react/src/themes/teams/siteVariables.ts index 0a4ec4061a..03e7a1c2b1 100644 --- a/packages/react/src/themes/teams/siteVariables.ts +++ b/packages/react/src/themes/teams/siteVariables.ts @@ -18,9 +18,6 @@ export { colorScheme, } from './colors' -export const brand04 = '#464775' // no mapping color -export const brand08 = '#8B8CC7' // no mapping color - export const magenta = '#B24782' // no mapping color export const orchid = '#943670' // no mapping color From f91cc8a3e026a961a0047c14e2102ea744052826 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 8 Apr 2019 15:04:03 +0200 Subject: [PATCH 051/118] -fixed errors --- .../src/themes/teams/components/Chat/chatMessageVariables.ts | 2 +- .../react/src/themes/teams/components/Text/textVariables.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts index b7f89e9208..40f8d2c92b 100644 --- a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts @@ -43,7 +43,7 @@ export default (siteVars): ChatMessageVariables => ({ badgeShadow: siteVars.shadowLevel1Darker, isImportant: false, hasMention: false, - hasMentionColor: siteVars.orange[400], + hasMentionColor: siteVars.colors.orange[400], isImportantColor: siteVars.colors.red[900], badgeTextColor: siteVars.colors.white, reactionGroupMarginLeft: pxToRem(12), diff --git a/packages/react/src/themes/teams/components/Text/textVariables.ts b/packages/react/src/themes/teams/components/Text/textVariables.ts index 41770f3d8c..323714fc98 100644 --- a/packages/react/src/themes/teams/components/Text/textVariables.ts +++ b/packages/react/src/themes/teams/components/Text/textVariables.ts @@ -10,7 +10,7 @@ export default (siteVariables): Partial => { return { colorScheme: siteVariables.colorScheme, atMentionOtherColor: siteVariables.colors.primary[600], - atMentionMeColor: siteVariables.orange[400], + atMentionMeColor: siteVariables.colors.orange[400], atMentionMeFontWeight: siteVariables.fontWeightBold, disabledColor: siteVariables.colors.grey[250], errorColor: siteVariables.colors.red[900], From 0fa90618b0543a2fdcde3f11f89893eb6cdf9f79 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 8 Apr 2019 16:45:26 +0200 Subject: [PATCH 052/118] -converted red colors --- .../react/src/themes/teams-dark/colors.ts | 8 ----- .../teams-high-contrast/siteVariables.ts | 1 - packages/react/src/themes/teams/colors.ts | 34 ++++++------------- .../components/Chat/chatMessageVariables.ts | 2 +- .../teams/components/Icon/iconVariables.ts | 2 +- .../teams/components/Text/textVariables.ts | 4 +-- .../react/src/themes/teams/siteVariables.ts | 6 ++-- 7 files changed, 17 insertions(+), 40 deletions(-) diff --git a/packages/react/src/themes/teams-dark/colors.ts b/packages/react/src/themes/teams-dark/colors.ts index 388e671cc9..bf4879f87d 100644 --- a/packages/react/src/themes/teams-dark/colors.ts +++ b/packages/react/src/themes/teams-dark/colors.ts @@ -157,12 +157,4 @@ export const colorScheme: ColorSchemeMapping = { foregroundDisabled: colors.black, }), magenta: createColorScheme('magenta'), - postOrange: createColorScheme('postOrange', { - backgroundDefault: colors.black, - foregroundHover: colors.black, - foregroundActive: colors.black, - foregroundFocus: colors.black, - foregroundFocusWithin: colors.black, - foregroundDisabled: colors.black, - }), } diff --git a/packages/react/src/themes/teams-high-contrast/siteVariables.ts b/packages/react/src/themes/teams-high-contrast/siteVariables.ts index 3ae0948620..ef0af85667 100644 --- a/packages/react/src/themes/teams-high-contrast/siteVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/siteVariables.ts @@ -78,7 +78,6 @@ export const colorScheme: ColorSchemeMapping = { yellow: createColorScheme(), lightGreen: createColorScheme(), magenta: createColorScheme(), - postOrange: createColorScheme(), } // diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index bcae86fc54..d03ebe0c10 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -88,16 +88,16 @@ export const naturalColors: NaturalColors = { 900: '#B34A84', }, red: { - 50: '#F2D1D7', - 100: '#ECBDC5', - 200: '#E8AFB9', - 300: '#E39EAA', - 400: '#DE8D9B', - 500: '#D97B8C', - 600: '#D56B7E', - 700: '#D05B70', - 800: '#CC4B61', - 900: '#C4314B', // siteVariables.red + 50: '#FCF4F6', // app red 10 + 100: '#F3D6D8', // postOrange[900] app red 08 + 200: '#F9526B', // new, error banner string + 300: '#E73550', // merge old @app-red-dark-theme + 400: '#C4314B', // red[900], app red 06, siteVariables.red + 500: '#A72037', // app red 04 + 600: '#8E192E', // app red 02 + 700: '#4F222B', // old app red 10 dark + 800: '#3E1F25', // new error banner bg + 900: '#1E040A', // app red08 dark }, yellow: { 50: '#FEF5D0', @@ -135,18 +135,6 @@ export const naturalColors: NaturalColors = { 800: '#A14F82', 900: '#953872', }, - postOrange: { - 50: '#FDF6F7', - 100: '#FBF2F3', - 200: '#FAEEEF', - 300: '#F9ECED', - 400: '#F8E9EA', - 500: '#F7E5E6', - 600: '#F7E2E4', - 700: '#F5DEE0', - 800: '#F5DBDD', - 900: '#F3D6D8', - }, } export const contextualColors: ContextualColors = { @@ -164,7 +152,6 @@ export const primitiveColors: PrimitiveColors = { } export type ThemeColors = Partial<{ - postOrange: ColorVariants lightGreen: ColorVariants magenta: ColorVariants }> @@ -319,5 +306,4 @@ export const colorScheme: ColorSchemeMapping = { yellow: createColorScheme('yellow', lightColorOverrides), lightGreen: createColorScheme('lightGreen', lightColorOverrides), magenta: createColorScheme('magenta', { foregroundDefault: colors.magenta[500] }), - postOrange: createColorScheme('postOrange', lightColorOverrides), } diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts index 40f8d2c92b..a6a64294f8 100644 --- a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts @@ -44,7 +44,7 @@ export default (siteVars): ChatMessageVariables => ({ isImportant: false, hasMention: false, hasMentionColor: siteVars.colors.orange[400], - isImportantColor: siteVars.colors.red[900], + isImportantColor: siteVars.colors.red[400], badgeTextColor: siteVars.colors.white, reactionGroupMarginLeft: pxToRem(12), timestampColorMine: siteVars.colors.grey[500], diff --git a/packages/react/src/themes/teams/components/Icon/iconVariables.ts b/packages/react/src/themes/teams/components/Icon/iconVariables.ts index 0543541d50..356c096559 100644 --- a/packages/react/src/themes/teams/components/Icon/iconVariables.ts +++ b/packages/react/src/themes/teams/components/Icon/iconVariables.ts @@ -25,7 +25,7 @@ export default (siteVars): IconVariables => ({ borderColor: undefined, brandColor: siteVars.brandColor, secondaryColor: siteVars.colors.white, - redColor: siteVars.colors.red[900], + redColor: siteVars.colors.red[400], disabledColor: siteVars.colors.grey[250], horizontalSpace: pxToRem(10), diff --git a/packages/react/src/themes/teams/components/Text/textVariables.ts b/packages/react/src/themes/teams/components/Text/textVariables.ts index 323714fc98..33f2fe8f0d 100644 --- a/packages/react/src/themes/teams/components/Text/textVariables.ts +++ b/packages/react/src/themes/teams/components/Text/textVariables.ts @@ -13,9 +13,9 @@ export default (siteVariables): Partial => { atMentionMeColor: siteVariables.colors.orange[400], atMentionMeFontWeight: siteVariables.fontWeightBold, disabledColor: siteVariables.colors.grey[250], - errorColor: siteVariables.colors.red[900], + errorColor: siteVariables.colors.red[400], importantWeight: siteVariables.fontWeightBold, - importantColor: siteVariables.colors.red[900], + importantColor: siteVariables.colors.red[400], successColor: siteVariables.colors.green[900], timestampColor: siteVariables.colors.grey[350], timestampHoverColor: siteVariables.colors.grey[500], diff --git a/packages/react/src/themes/teams/siteVariables.ts b/packages/react/src/themes/teams/siteVariables.ts index 03e7a1c2b1..77935b460d 100644 --- a/packages/react/src/themes/teams/siteVariables.ts +++ b/packages/react/src/themes/teams/siteVariables.ts @@ -21,9 +21,9 @@ export { export const magenta = '#B24782' // no mapping color export const orchid = '#943670' // no mapping color -export const red = colors.red[900] // no mapping color $app-red +export const red = colors.red[400] // no mapping color $app-red export const red08 = '#F3D6DB' // no mapping color $app-red-08 -export const red10 = '#FCF4F6' // no mapping color $app-red-10 +export const red10 = colors.red[50] // no mapping color $app-red-10 // // SHADOW LEVELS @@ -55,7 +55,7 @@ export const infoStatusBackgroundColor = 'blue' export const infoStatusTextColor = colors.white export const warningStatusBackgroundColor = colors.yellow[900] export const warningStatusTextColor = colors.white -export const errorStatusBackgroundColor = colors.red[900] +export const errorStatusBackgroundColor = colors.red[400] export const errorStatusTextColor = colors.white export const unknownStatusBackgroundColor = colors.grey[350] export const unknownStatusTextColor = colors.white From bf4769772ed70c8cae052e32a98f194a354e0eba Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 9 Apr 2019 13:48:25 +0200 Subject: [PATCH 053/118] -updated some colors --- .../Chat/Types/ChatMessageExampleStyled.shorthand.tsx | 2 +- .../components/Chat/chatMessageVariables.ts | 2 +- .../teams-dark/components/Input/inputVariables.ts | 2 +- .../teams-dark/components/Menu/menuVariables.ts | 4 ++-- packages/react/src/themes/teams-dark/siteVariables.ts | 2 +- packages/react/src/themes/teams/colors.ts | 11 ++++------- packages/react/src/themes/teams/siteVariables.ts | 2 +- 7 files changed, 11 insertions(+), 14 deletions(-) diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx index e4e03b63d3..4de920eb0e 100644 --- a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx +++ b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx @@ -82,7 +82,7 @@ const ChatMessageExampleStyled = () => ( componentVariables: { ChatMessage: siteVars => ({ content: { - focusOutlineColor: siteVars.red, + focusOutlineColor: siteVars.colors.red[400], }, }), }, diff --git a/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts index 3903174a05..92f3fbcff0 100644 --- a/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts @@ -2,7 +2,7 @@ import { ChatMessageVariables } from '../../../teams/components/Chat/chatMessage export default (siteVars: any): Partial => { return { - backgroundColor: siteVars.colors.grey[650], + backgroundColor: siteVars.colors.grey[600], backgroundColorMine: '#3B3C54', color: siteVars.colors.white, contentFocusOutlineColor: siteVars.brand, diff --git a/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts b/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts index 7f254b791d..495296c4e7 100644 --- a/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts @@ -1,6 +1,6 @@ export default (siteVars: any) => { return { - backgroundColor: siteVars.colors.grey[650], + backgroundColor: siteVars.colors.grey[600], fontColor: siteVars.colors.grey[250], inputFocusBorderColor: siteVars.brand, iconColor: siteVars.colors.grey[250], diff --git a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts index a70a0d462e..e77537d5ad 100644 --- a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts @@ -7,9 +7,9 @@ export default (siteVars: any): Partial => ({ colorActive: siteVars.colors.white, colorDisabled: siteVars.colors.grey[450], - primaryBorderColor: siteVars.colors.grey[650], + primaryBorderColor: siteVars.colors.grey[600], pointingIndicatorBackgroundColor: siteVars.colors.primary[400], - verticalBackgroundColor: siteVars.colors.grey[650], + verticalBackgroundColor: siteVars.colors.grey[600], verticalBackgroundColorFocus: siteVars.colors.grey[550], }) diff --git a/packages/react/src/themes/teams-dark/siteVariables.ts b/packages/react/src/themes/teams-dark/siteVariables.ts index 45ec320501..33f140bd8c 100644 --- a/packages/react/src/themes/teams-dark/siteVariables.ts +++ b/packages/react/src/themes/teams-dark/siteVariables.ts @@ -9,7 +9,7 @@ export const black = colors.grey[800] // no mapping color export const magenta = '#cf6098' // no mapping color export const orchid = '#ae3d84' // no mapping color export const red = '#d74654' // no mapping color -export const red08 = '#4f232b' // no mapping color +export const red08 = colors.red[700] // no mapping color export const green04 = naturalColors.lightGreen[900] // diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index d03ebe0c10..738062cdd8 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -38,9 +38,6 @@ export const naturalColors: NaturalColors = { 900: '#237B4B', // siteVariables.green04 }, grey: { - // dark09: '#3b3a39', different colors - // dark10: '#323130', different colors - 0: '#FFFFFF', // white 25: '#FCFCFB', // old $app-density-message-initial-hover-focus 50: '#FAF9F8', // light14 @@ -53,9 +50,9 @@ export const naturalColors: NaturalColors = { 400: '#8A8886', // dark04 450: '#605E5C', // light03, dark06, $app-gray-20-theme-agnostic, old $message-highlight-color-darktheme 500: '#484644', // light02, dark08 - 550: '#3B3A3A', // dark09 ?!?!?! different color [#3b3a39] - 600: '#323131', // in call audio only grid slot 4 - 650: '#2D2C2C', // dark10?!?!?! - different color [#323130], in call audio only grid slot 3 + 550: '#3B3A39', // dark09 ?!?!?! different color [#3b3a39] + 600: '#323131', // dark10, in call audio only grid slot 4 + 650: '#2D2C2C', // in call audio only grid slot 3 700: '#292828', // dark14, in call audio only grid slot 2, old $app-density-message-background-initial-hover-focus-darktheme 750: '#252423', // 900 - different [#252424] , old $app-black, in call audio only grid slot 1, old $app-density-message-background-replay-hover-focus-darktheme 800: '#201F1F', // app black darktheme, in call title bar, in call audio only pip @@ -89,7 +86,7 @@ export const naturalColors: NaturalColors = { }, red: { 50: '#FCF4F6', // app red 10 - 100: '#F3D6D8', // postOrange[900] app red 08 + 100: '#F3D6DB', // postOrange[900] app red 08 200: '#F9526B', // new, error banner string 300: '#E73550', // merge old @app-red-dark-theme 400: '#C4314B', // red[900], app red 06, siteVariables.red diff --git a/packages/react/src/themes/teams/siteVariables.ts b/packages/react/src/themes/teams/siteVariables.ts index 77935b460d..57e0f0cfd5 100644 --- a/packages/react/src/themes/teams/siteVariables.ts +++ b/packages/react/src/themes/teams/siteVariables.ts @@ -22,7 +22,7 @@ export const magenta = '#B24782' // no mapping color export const orchid = '#943670' // no mapping color export const red = colors.red[400] // no mapping color $app-red -export const red08 = '#F3D6DB' // no mapping color $app-red-08 +export const red08 = colors.red[100] // no mapping color $app-red-08 export const red10 = colors.red[50] // no mapping color $app-red-10 // From b98eefc0d3914a544b874587b6547a0fca208b22 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 9 Apr 2019 14:39:40 +0200 Subject: [PATCH 054/118] -added green pink and orange colors --- .../ImportantAndMentionMessages/index.tsx | 2 +- .../src/themes/teams-dark/siteVariables.ts | 4 +- .../components/Chat/chatMessageVariables.ts | 2 +- .../teams-high-contrast/siteVariables.ts | 4 +- packages/react/src/themes/teams/colors.ts | 105 ++++++------------ .../teams/components/Alert/alertStyles.ts | 14 +-- .../Attachment/attachmentVariables.ts | 2 +- .../teams/components/Text/textVariables.ts | 2 +- .../react/src/themes/teams/siteVariables.ts | 8 +- 9 files changed, 53 insertions(+), 90 deletions(-) diff --git a/docs/src/prototypes/chatMessages/ImportantAndMentionMessages/index.tsx b/docs/src/prototypes/chatMessages/ImportantAndMentionMessages/index.tsx index cce02def04..5382de10dd 100644 --- a/docs/src/prototypes/chatMessages/ImportantAndMentionMessages/index.tsx +++ b/docs/src/prototypes/chatMessages/ImportantAndMentionMessages/index.tsx @@ -86,7 +86,7 @@ const items = [ badge={{ icon: 'redbang' }} variables={siteVars => ({ isImportant: true, - isImportantColor: siteVars.colors.yellow[900], + isImportantColor: siteVars.colors.yellow[400], })} /> ), diff --git a/packages/react/src/themes/teams-dark/siteVariables.ts b/packages/react/src/themes/teams-dark/siteVariables.ts index 33f140bd8c..b4e88e5eae 100644 --- a/packages/react/src/themes/teams-dark/siteVariables.ts +++ b/packages/react/src/themes/teams-dark/siteVariables.ts @@ -6,11 +6,11 @@ export { colorScheme } from './colors' // export const black = colors.grey[800] // no mapping color -export const magenta = '#cf6098' // no mapping color +export const magenta = '#cf6098' // no mapping color - color palette pink[300]='#DE569A' export const orchid = '#ae3d84' // no mapping color export const red = '#d74654' // no mapping color export const red08 = colors.red[700] // no mapping color -export const green04 = naturalColors.lightGreen[900] +export const green04 = colors.green[200] // // SEMANTIC ASSIGNMENTS diff --git a/packages/react/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts index 5298ef31b4..2dbe637a92 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts @@ -5,7 +5,7 @@ export default (siteVars: any): Partial => { backgroundColor: siteVars.black, backgroundColorMine: siteVars.black, color: siteVars.white, - contentFocusOutlineColor: siteVars.colors.yellow[900], // Red flag (should this be accessibleYellow?) + contentFocusOutlineColor: siteVars.colors.yellow[400], // Red flag (should this be accessibleYellow?) border: `1px solid ${siteVars.white}`, } } diff --git a/packages/react/src/themes/teams-high-contrast/siteVariables.ts b/packages/react/src/themes/teams-high-contrast/siteVariables.ts index ef0af85667..f451293b83 100644 --- a/packages/react/src/themes/teams-high-contrast/siteVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/siteVariables.ts @@ -1,4 +1,4 @@ -import { colors, naturalColors } from '../teams/siteVariables' +import { colors } from '../teams/siteVariables' import { ColorSchemeMapping } from '../../themes/types' // // COLORS @@ -9,7 +9,7 @@ export const accessibleGreen = '#3ff23f' // always disabled color in high contra export const accessibleCyan = '#1aebff' export const red = '#f00' -export const green04 = naturalColors.lightGreen[900] +export const green04 = colors.green[200] export const white = colors.white export const black = colors.black diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index 738062cdd8..0641fd4f0e 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -5,7 +5,7 @@ import { NaturalColors, PrimitiveColors, } from '../types' -import { ColorVariants, ColorSchemeMapping } from 'src/themes/types' +import { ColorSchemeMapping } from 'src/themes/types' export const emphasisColors: EmphasisColors = { primary: { @@ -25,18 +25,6 @@ export const emphasisColors: EmphasisColors = { } export const naturalColors: NaturalColors = { - green: { - 50: '#D3E4DB', - 100: '#C4DCCF', - 200: '#B3D1C1', - 300: '#9DC4AF', - 400: '#8CBAA1', - 500: '#7BB093', - 600: '#68A584', - 700: '#579A75', - 800: '#458F67', - 900: '#237B4B', // siteVariables.green04 - }, grey: { 0: '#FFFFFF', // white 25: '#FCFCFB', // old $app-density-message-initial-hover-focus @@ -73,16 +61,16 @@ export const naturalColors: NaturalColors = { 900: '#51332C', // app orange16 dark }, pink: { - 50: '#E8BDD5', - 100: '#E1ABC8', - 200: '#DA9EBF', - 300: '#D693B8', - 400: '#D28BB2', - 500: '#CA7BA6', - 600: '#C775A3', - 700: '#C06597', - 800: '#BA598F', - 900: '#B34A84', + 50: '#FCF2FA', // app orchid opacity, oof message, oof banner bg + 100: '#F1DFEE', // new oof banner border default theme + 200: '#EC6FAE', // new oof text for better contrast in dark theme + 300: '#DE569A', // magenta dark theme + 400: '#E959D9', // oof presence icon dark theme + 500: '#B4009E', // merge oof presence icon, odl $app-magenta + 600: '#943670', // old $app-orchid, use for oof banner text + 700: undefined, // + 800: '#3E2D3B', // old @app orchid opacity, oof message bg, oof banner bg + 900: '#1F191D', // new oof banner border dark theme }, red: { 50: '#FCF4F6', // app red 10 @@ -96,41 +84,29 @@ export const naturalColors: NaturalColors = { 800: '#3E1F25', // new error banner bg 900: '#1E040A', // app red08 dark }, - yellow: { - 50: '#FEF5D0', - 100: '#FDF1BE', - 200: '#FDEEAE', - 300: '#FBEA9D', - 400: '#FCE78E', - 500: '#FAE37C', - 600: '#FAE06C', - 700: '#F9DC58', - 800: '#F9D844', - 900: '#F8D22A', // siteVariables.yellow - }, - lightGreen: { - 50: '#E7F2D9', - 100: '#DFEECD', - 200: '#D8EAC1', - 300: '#CDE3B0', - 400: '#C6DFA4', - 500: '#BDDB96', - 600: '#B4D689', - 700: '#ACD17B', - 800: '#A1CC6B', - 900: '#92C353', // siteVariables.green + green: { + 50: undefined, + 100: undefined, + 200: '#92C353', // lightGreen[900] old $app-green, available presence dark theme, siteVars.green + 300: '#6BB700', // new Available presence + 400: '#13A40E', // dual presence Available + 500: undefined, + 600: '#237B4B', // old $app-green-04, siteVariables.green04, green[900] + 700: undefined, + 800: undefined, + 900: undefined, }, - magenta: { - 50: '#E8D4E0', - 100: '#DEC0D2', - 200: '#D4ADC5', - 300: '#CDA0BC', - 400: '#C491B0', - 500: '#BB7FA4', - 600: '#B26E98', - 700: '#AA5F8D', - 800: '#A14F82', - 900: '#953872', + yellow: { + 50: undefined, + 100: '#FBF6D9', // old message highlight color + 200: undefined, + 300: '#F9EC02', // old acc critical ufd icon color + 400: '#F8D22A', // old siteVariables.yellow, $app-yellow, yellow[900] + 500: '#FFB900', // old $bcast pre live color + 600: '#FFAA44', // new away presence + 700: undefined, + 800: undefined, + 900: undefined, }, } @@ -148,12 +124,7 @@ export const primitiveColors: PrimitiveColors = { white: '#fff', } -export type ThemeColors = Partial<{ - lightGreen: ColorVariants - magenta: ColorVariants -}> - -export const colors: ColorPalette = { +export const colors: ColorPalette = { ...emphasisAndNaturalColors, ...contextualColors, ...primitiveColors, @@ -296,11 +267,9 @@ export const colorScheme: ColorSchemeMapping = { backgroundFocus: colors.primary[300], }), grey: createColorScheme('grey'), - green: createColorScheme('green', { foregroundDefault: colors.green[500] }), + green: createColorScheme('green'), orange: createColorScheme('orange', lightColorOverrides), - pink: createColorScheme('pink', { foregroundDefault: colors.pink[500] }), - red: createColorScheme('red', { foregroundDefault: colors.red[500] }), + pink: createColorScheme('pink'), + red: createColorScheme('red'), yellow: createColorScheme('yellow', lightColorOverrides), - lightGreen: createColorScheme('lightGreen', lightColorOverrides), - magenta: createColorScheme('magenta', { foregroundDefault: colors.magenta[500] }), } diff --git a/packages/react/src/themes/teams/components/Alert/alertStyles.ts b/packages/react/src/themes/teams/components/Alert/alertStyles.ts index 289938e6a6..3a5a4e4421 100644 --- a/packages/react/src/themes/teams/components/Alert/alertStyles.ts +++ b/packages/react/src/themes/teams/components/Alert/alertStyles.ts @@ -1,10 +1,5 @@ import * as React from 'react' -import { - ComponentSlotStylesInput, - ICSSInJSStyle, - SiteVariablesPrepared, - NaturalColors, -} from '../../../types' +import { ComponentSlotStylesInput, ICSSInJSStyle, SiteVariablesPrepared } from '../../../types' import { AlertProps } from '../../../../components/Alert/Alert' import { AlertVariables } from './alertVariables' @@ -14,7 +9,6 @@ const getIntentColorsFromProps = ( siteVars: SiteVariablesPrepared, ): React.CSSProperties => { const { colors } = siteVars - const naturalColors: NaturalColors = siteVars.naturalColors if (p.danger) { return { @@ -34,9 +28,9 @@ const getIntentColorsFromProps = ( if (p.success) { return { - color: colors.green[900], // $app-green-04 + color: colors.green[600], // $app-green-04 backgroundColor: colors.grey[50], // $app-white - borderColor: naturalColors.lightGreen[900], // $app-green + borderColor: colors.green[200], // $app-green } } @@ -44,7 +38,7 @@ const getIntentColorsFromProps = ( return { color: siteVars.gray03, backgroundColor: colors.grey[50], // $app-white - borderColor: colors.yellow[900], // $app-yellow + borderColor: colors.yellow[400], // $app-yellow } } diff --git a/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts b/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts index fa7e731d55..8c828210af 100644 --- a/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts +++ b/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts @@ -30,7 +30,7 @@ export default siteVariables => ({ backgroundColorHover: siteVariables.colors.grey[200], textColor: siteVariables.colors.grey[750], - progressColor: siteVariables.naturalColors.lightGreen[900], + progressColor: siteVariables.colors.green[200], progressHeight: 4, headerFontSize: siteVariables.fontSizes.medium, diff --git a/packages/react/src/themes/teams/components/Text/textVariables.ts b/packages/react/src/themes/teams/components/Text/textVariables.ts index 33f2fe8f0d..a6e4a5fbd4 100644 --- a/packages/react/src/themes/teams/components/Text/textVariables.ts +++ b/packages/react/src/themes/teams/components/Text/textVariables.ts @@ -16,7 +16,7 @@ export default (siteVariables): Partial => { errorColor: siteVariables.colors.red[400], importantWeight: siteVariables.fontWeightBold, importantColor: siteVariables.colors.red[400], - successColor: siteVariables.colors.green[900], + successColor: siteVariables.colors.green[600], timestampColor: siteVariables.colors.grey[350], timestampHoverColor: siteVariables.colors.grey[500], } diff --git a/packages/react/src/themes/teams/siteVariables.ts b/packages/react/src/themes/teams/siteVariables.ts index 57e0f0cfd5..ea094f0d95 100644 --- a/packages/react/src/themes/teams/siteVariables.ts +++ b/packages/react/src/themes/teams/siteVariables.ts @@ -1,5 +1,5 @@ import { pxToRem } from '../../lib' -import { colors, naturalColors } from './colors' +import { colors } from './colors' // // VARIABLES @@ -19,7 +19,7 @@ export { } from './colors' export const magenta = '#B24782' // no mapping color -export const orchid = '#943670' // no mapping color +export const orchid = colors.pink[600] // no mapping color export const red = colors.red[400] // no mapping color $app-red export const red08 = colors.red[100] // no mapping color $app-red-08 @@ -49,11 +49,11 @@ export const fontSizes = { // // STATUS COLORS // -export const successStatusBackgroundColor = naturalColors.lightGreen[900] +export const successStatusBackgroundColor = colors.green[200] export const successStatusTextColor = colors.white export const infoStatusBackgroundColor = 'blue' export const infoStatusTextColor = colors.white -export const warningStatusBackgroundColor = colors.yellow[900] +export const warningStatusBackgroundColor = colors.yellow[400] export const warningStatusTextColor = colors.white export const errorStatusBackgroundColor = colors.red[400] export const errorStatusTextColor = colors.white From 502a5bf42e6bbd05b328e7edb1ac21324293f720 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 9 Apr 2019 14:45:20 +0200 Subject: [PATCH 055/118] -removed unused imports --- packages/react/src/themes/teams-dark/siteVariables.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/themes/teams-dark/siteVariables.ts b/packages/react/src/themes/teams-dark/siteVariables.ts index b4e88e5eae..903a40b0bb 100644 --- a/packages/react/src/themes/teams-dark/siteVariables.ts +++ b/packages/react/src/themes/teams-dark/siteVariables.ts @@ -1,4 +1,4 @@ -import { colors, naturalColors } from '../teams/siteVariables' +import { colors } from '../teams/siteVariables' export { colorScheme } from './colors' // From 4c82a1c57a0bc4e623b489b2edbc933b667e92e5 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 9 Apr 2019 15:18:31 +0200 Subject: [PATCH 056/118] -removed unused colors from dark theme color scheme --- .../react/src/themes/teams-dark/colors.ts | 45 ++++++++----------- 1 file changed, 18 insertions(+), 27 deletions(-) diff --git a/packages/react/src/themes/teams-dark/colors.ts b/packages/react/src/themes/teams-dark/colors.ts index bf4879f87d..3994f5f6a8 100644 --- a/packages/react/src/themes/teams-dark/colors.ts +++ b/packages/react/src/themes/teams-dark/colors.ts @@ -3,35 +3,35 @@ import { ColorSchemeMapping } from 'src/themes/types' const createColorScheme = (color: string, customValues = {}) => { return { - foregroundDefault: colors[color][500], + foregroundDefault: colors[color][600], backgroundDefault: colors[color][50], - borderDefault: colors[color][500], - shadowDefault: colors[color][500], + borderDefault: colors[color][600], + shadowDefault: colors[color][600], foregroundHover: colors[color][50], - backgroundHover: colors[color][500], - borderHover: colors[color][500], - shadowHover: colors[color][500], + backgroundHover: colors[color][600], + borderHover: colors[color][600], + shadowHover: colors[color][600], foregroundActive: colors[color][50], - backgroundActive: colors[color][500], - borderActive: colors[color][500], - shadowActive: colors[color][500], + backgroundActive: colors[color][600], + borderActive: colors[color][600], + shadowActive: colors[color][600], foregroundFocus: colors[color][50], - backgroundFocus: colors[color][500], - borderFocus: colors[color][500], - shadowFocus: colors[color][500], + backgroundFocus: colors[color][600], + borderFocus: colors[color][600], + shadowFocus: colors[color][600], foregroundFocusWithin: colors[color][50], - backgroundFocusWithin: colors[color][500], - borderFocusWithin: colors[color][500], - shadowFocusWithin: colors[color][500], + backgroundFocusWithin: colors[color][600], + borderFocusWithin: colors[color][600], + shadowFocusWithin: colors[color][600], foregroundDisabled: colors[color][50], - backgroundDisabled: colors[color][500], - borderDisabled: colors[color][500], - shadowDisabled: colors[color][500], + backgroundDisabled: colors[color][600], + borderDisabled: colors[color][600], + shadowDisabled: colors[color][600], ...customValues, } } @@ -148,13 +148,4 @@ export const colorScheme: ColorSchemeMapping = { foregroundFocusWithin: colors.black, foregroundDisabled: colors.black, }), - lightGreen: createColorScheme('lightGreen', { - backgroundDefault: colors.black, - foregroundHover: colors.black, - foregroundActive: colors.black, - foregroundFocus: colors.black, - foregroundFocusWithin: colors.black, - foregroundDisabled: colors.black, - }), - magenta: createColorScheme('magenta'), } From c23eb6195b836181a2a51cf52693303a9152217a Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 9 Apr 2019 15:43:09 +0200 Subject: [PATCH 057/118] -removing more unused colors --- docs/src/prototypes/alerts/AnimatedBannerAlert.tsx | 10 +++++----- .../teams-dark/components/Button/buttonVariables.ts | 8 ++++---- .../teams-dark/components/Chat/chatMessageVariables.ts | 2 +- .../themes/teams-dark/components/Chat/chatVariables.ts | 2 +- .../teams-dark/components/Input/inputVariables.ts | 2 +- .../themes/teams-dark/components/Text/textVariables.ts | 2 +- packages/react/src/themes/teams-dark/siteVariables.ts | 8 +------- .../src/themes/teams-high-contrast/siteVariables.ts | 2 -- .../src/themes/teams/components/Alert/alertStyles.ts | 9 +++++---- .../teams/components/Chat/chatMessageVariables.ts | 2 +- packages/react/src/themes/teams/siteVariables.ts | 8 +------- 11 files changed, 21 insertions(+), 34 deletions(-) diff --git a/docs/src/prototypes/alerts/AnimatedBannerAlert.tsx b/docs/src/prototypes/alerts/AnimatedBannerAlert.tsx index 46e1a486b1..a9c5f4f486 100644 --- a/docs/src/prototypes/alerts/AnimatedBannerAlert.tsx +++ b/docs/src/prototypes/alerts/AnimatedBannerAlert.tsx @@ -20,17 +20,17 @@ const BannerAlert: React.FunctionComponent = props => { if (oof) { return { - color: siteVars.orchid, - backgroundColor: '#F9F5F8', - borderColor: '#DCADC7', + color: siteVars.colors.pink[600], + backgroundColor: '#F9F5F8', // where is this color coming from? + borderColor: '#DCADC7', // where is this this color coming from? } } if (urgent) { return { color: appWhite, - backgroundColor: siteVars.red, - borderColor: siteVars.red, + backgroundColor: siteVars.colors.red[400], + borderColor: siteVars.colors.red[400], } } diff --git a/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts b/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts index c266cc16fb..ac819ff5a7 100644 --- a/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts @@ -14,23 +14,23 @@ export default (siteVars: any): Partial => { backgroundColorDisabled: siteVars.colors.grey[550], borderColor: siteVars.colors.grey[500], borderColorActive: siteVars.colors.grey[450], - borderColorFocus: siteVars.black, + borderColorFocus: siteVars.colors.grey[800], borderColorHover: siteVars.colors.grey[450], borderColorFocusIndicator: siteVars.colors.white, primaryBackgroundColorActive: siteVars.colors.primary[500], primaryBackgroundColorHover: siteVars.colors.primary[500], primaryBackgroundColorFocus: siteVars.colors.primary[800], - primaryBorderColorFocus: siteVars.black, + primaryBorderColorFocus: siteVars.colors.grey[800], primaryBorderColorFocusIndicator: siteVars.colors.white, circularColor: siteVars.colors.grey[250], - circularColorActive: siteVars.black, + circularColorActive: siteVars.colors.grey[800], circularBackgroundColorActive: siteVars.colors.grey[250], circularBackgroundColorHover: siteVars.colors.grey[300], circularBackgroundColorFocus: siteVars.colors.grey[250], circularBorderColor: siteVars.colors.grey[250], - circularBorderColorFocusIndicator: siteVars.black, + circularBorderColorFocusIndicator: siteVars.colors.grey[800], textColorHover: siteVars.colors.primary[300], textPrimaryColorHover: siteVars.colors.primary[300], diff --git a/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts index 92f3fbcff0..1668085c7d 100644 --- a/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts @@ -5,6 +5,6 @@ export default (siteVars: any): Partial => { backgroundColor: siteVars.colors.grey[600], backgroundColorMine: '#3B3C54', color: siteVars.colors.white, - contentFocusOutlineColor: siteVars.brand, + contentFocusOutlineColor: siteVars.colors.primary[600], } } diff --git a/packages/react/src/themes/teams-dark/components/Chat/chatVariables.ts b/packages/react/src/themes/teams-dark/components/Chat/chatVariables.ts index 2257d1d60a..a28ef2e1fb 100644 --- a/packages/react/src/themes/teams-dark/components/Chat/chatVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Chat/chatVariables.ts @@ -2,6 +2,6 @@ import { ChatVariables } from '../../../teams/components/Chat/chatVariables' export default (siteVars: any): Partial => { return { - backgroundColor: siteVars.black, + backgroundColor: siteVars.colors.grey[800], } } diff --git a/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts b/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts index 495296c4e7..1d73277794 100644 --- a/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts @@ -2,7 +2,7 @@ export default (siteVars: any) => { return { backgroundColor: siteVars.colors.grey[600], fontColor: siteVars.colors.grey[250], - inputFocusBorderColor: siteVars.brand, + inputFocusBorderColor: siteVars.colors.primary[600], iconColor: siteVars.colors.grey[250], } } diff --git a/packages/react/src/themes/teams-dark/components/Text/textVariables.ts b/packages/react/src/themes/teams-dark/components/Text/textVariables.ts index b1958c994b..8c51c93443 100644 --- a/packages/react/src/themes/teams-dark/components/Text/textVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Text/textVariables.ts @@ -6,7 +6,7 @@ export default (siteVariables): Partial => ({ disabledColor: siteVariables.colors.grey[450], errorColor: siteVariables.red, importantColor: siteVariables.red, - successColor: siteVariables.green04, + successColor: siteVariables.colors.green[200], timestampColor: siteVariables.colors.grey[400], timestampHoverColor: siteVariables.colors.grey[250], }) diff --git a/packages/react/src/themes/teams-dark/siteVariables.ts b/packages/react/src/themes/teams-dark/siteVariables.ts index 903a40b0bb..cc30396c7c 100644 --- a/packages/react/src/themes/teams-dark/siteVariables.ts +++ b/packages/react/src/themes/teams-dark/siteVariables.ts @@ -4,16 +4,10 @@ export { colorScheme } from './colors' // // COLORS // -export const black = colors.grey[800] // no mapping color - -export const magenta = '#cf6098' // no mapping color - color palette pink[300]='#DE569A' -export const orchid = '#ae3d84' // no mapping color export const red = '#d74654' // no mapping color -export const red08 = colors.red[700] // no mapping color -export const green04 = colors.green[200] // // SEMANTIC ASSIGNMENTS // -export const bodyBackground = black +export const bodyBackground = colors.grey[800] export const bodyColor = colors.white diff --git a/packages/react/src/themes/teams-high-contrast/siteVariables.ts b/packages/react/src/themes/teams-high-contrast/siteVariables.ts index f451293b83..f8526ab7d7 100644 --- a/packages/react/src/themes/teams-high-contrast/siteVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/siteVariables.ts @@ -76,8 +76,6 @@ export const colorScheme: ColorSchemeMapping = { pink: createColorScheme(), red: createColorScheme(), yellow: createColorScheme(), - lightGreen: createColorScheme(), - magenta: createColorScheme(), } // diff --git a/packages/react/src/themes/teams/components/Alert/alertStyles.ts b/packages/react/src/themes/teams/components/Alert/alertStyles.ts index 3a5a4e4421..f024e478c4 100644 --- a/packages/react/src/themes/teams/components/Alert/alertStyles.ts +++ b/packages/react/src/themes/teams/components/Alert/alertStyles.ts @@ -10,11 +10,12 @@ const getIntentColorsFromProps = ( ): React.CSSProperties => { const { colors } = siteVars + // TODO move all these colors in the variables, so that they can be overriden in other teams if (p.danger) { return { - color: siteVars.red, - backgroundColor: siteVars.red10, - borderColor: siteVars.red08, + color: siteVars.colors.red[400], + backgroundColor: siteVars.colors.red[50], + borderColor: siteVars.colors.red[100], } } @@ -36,7 +37,7 @@ const getIntentColorsFromProps = ( if (p.warning) { return { - color: siteVars.gray03, + color: siteVars.colors.grey[450], backgroundColor: colors.grey[50], // $app-white borderColor: colors.yellow[400], // $app-yellow } diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts index a6a64294f8..e08291ebc2 100644 --- a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts @@ -30,7 +30,7 @@ export default (siteVars): ChatMessageVariables => ({ actionMenuPositionRight: pxToRem(5), actionMenuPositionTop: pxToRem(-30), backgroundColor: siteVars.colors.white, - backgroundColorMine: '#E5E5F1', + backgroundColorMine: siteVars.colors.primary[100], borderRadius: pxToRem(3), color: 'rgb(64, 64, 64)', offset: pxToRem(100), diff --git a/packages/react/src/themes/teams/siteVariables.ts b/packages/react/src/themes/teams/siteVariables.ts index ea094f0d95..6f6bb17ab5 100644 --- a/packages/react/src/themes/teams/siteVariables.ts +++ b/packages/react/src/themes/teams/siteVariables.ts @@ -18,13 +18,6 @@ export { colorScheme, } from './colors' -export const magenta = '#B24782' // no mapping color -export const orchid = colors.pink[600] // no mapping color - -export const red = colors.red[400] // no mapping color $app-red -export const red08 = colors.red[100] // no mapping color $app-red-08 -export const red10 = colors.red[50] // no mapping color $app-red-10 - // // SHADOW LEVELS // @@ -49,6 +42,7 @@ export const fontSizes = { // // STATUS COLORS // +// TODO these should be moved to status variables export const successStatusBackgroundColor = colors.green[200] export const successStatusTextColor = colors.white export const infoStatusBackgroundColor = 'blue' From 5701c854c1aa4cd07ed32442e69cbfb5bd4a5947 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 9 Apr 2019 17:22:24 +0200 Subject: [PATCH 058/118] -removed unused imports --- .../react/src/themes/teams/components/Segment/segmentStyles.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react/src/themes/teams/components/Segment/segmentStyles.ts b/packages/react/src/themes/teams/components/Segment/segmentStyles.ts index 75386f094d..532b012fd6 100644 --- a/packages/react/src/themes/teams/components/Segment/segmentStyles.ts +++ b/packages/react/src/themes/teams/components/Segment/segmentStyles.ts @@ -1,5 +1,3 @@ -import * as _ from 'lodash' - import { SegmentProps } from '../../../../components/Segment/Segment' import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types' import { SegmentVariables } from './segmentVariables' From 85d223c10073ef4deb899959b2b2e81dd8302ff8 Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 10 Apr 2019 11:18:14 +0200 Subject: [PATCH 059/118] -removed green04 from hoc site variables --- .../teams-high-contrast/components/Text/textVariables.ts | 3 ++- packages/react/src/themes/teams-high-contrast/siteVariables.ts | 1 - 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/themes/teams-high-contrast/components/Text/textVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Text/textVariables.ts index 22f96cb969..22f42a9842 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Text/textVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Text/textVariables.ts @@ -1,4 +1,5 @@ import { TeamsTextVariables } from '../../../teams/components/Text/textVariables' +import { colors } from 'src/themes/teams/siteVariables' export default (siteVariables): Partial => ({ atMentionMeColor: siteVariables.accessibleYellow, @@ -6,7 +7,7 @@ export default (siteVariables): Partial => ({ disabledColor: siteVariables.accessibleGreen, errorColor: siteVariables.red, importantColor: siteVariables.red, - successColor: siteVariables.green04, + successColor: siteVariables.colors.green[200], timestampColor: siteVariables.white, timestampHoverColor: siteVariables.white, }) diff --git a/packages/react/src/themes/teams-high-contrast/siteVariables.ts b/packages/react/src/themes/teams-high-contrast/siteVariables.ts index f8526ab7d7..86f6574dcb 100644 --- a/packages/react/src/themes/teams-high-contrast/siteVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/siteVariables.ts @@ -9,7 +9,6 @@ export const accessibleGreen = '#3ff23f' // always disabled color in high contra export const accessibleCyan = '#1aebff' export const red = '#f00' -export const green04 = colors.green[200] export const white = colors.white export const black = colors.black From 1e4949b5913f7d8370565bce3a68706fe4dd596c Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 10 Apr 2019 11:18:40 +0200 Subject: [PATCH 060/118] -removed unused import --- .../themes/teams-high-contrast/components/Text/textVariables.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/themes/teams-high-contrast/components/Text/textVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Text/textVariables.ts index 22f42a9842..8b24df9955 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Text/textVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Text/textVariables.ts @@ -1,5 +1,4 @@ import { TeamsTextVariables } from '../../../teams/components/Text/textVariables' -import { colors } from 'src/themes/teams/siteVariables' export default (siteVariables): Partial => ({ atMentionMeColor: siteVariables.accessibleYellow, From 5318e641389fb225d456c8609f0cb1f0f9a4f7cf Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 10 Apr 2019 12:00:02 +0200 Subject: [PATCH 061/118] -removed more colors from site variables -restructured hoc site vars and colors --- .../react/src/themes/teams-dark/colors.ts | 2 +- .../src/themes/teams-high-contrast/colors.ts | 55 +++++++++++++ .../teams-high-contrast/componentVariables.ts | 1 + .../components/Status/statusVariables.ts | 14 ++++ .../teams-high-contrast/siteVariables.ts | 77 +------------------ .../components/Status/statusVariables.ts | 20 ++--- .../react/src/themes/teams/siteVariables.ts | 15 ---- 7 files changed, 84 insertions(+), 100 deletions(-) create mode 100644 packages/react/src/themes/teams-high-contrast/colors.ts create mode 100644 packages/react/src/themes/teams-high-contrast/components/Status/statusVariables.ts diff --git a/packages/react/src/themes/teams-dark/colors.ts b/packages/react/src/themes/teams-dark/colors.ts index 3994f5f6a8..4b4c07e2f1 100644 --- a/packages/react/src/themes/teams-dark/colors.ts +++ b/packages/react/src/themes/teams-dark/colors.ts @@ -1,5 +1,5 @@ import { colors } from '../teams/siteVariables' -import { ColorSchemeMapping } from 'src/themes/types' +import { ColorSchemeMapping } from '../../themes/types' const createColorScheme = (color: string, customValues = {}) => { return { diff --git a/packages/react/src/themes/teams-high-contrast/colors.ts b/packages/react/src/themes/teams-high-contrast/colors.ts new file mode 100644 index 0000000000..6d717a13a7 --- /dev/null +++ b/packages/react/src/themes/teams-high-contrast/colors.ts @@ -0,0 +1,55 @@ +import { colors } from '../teams/siteVariables' +import { ColorSchemeMapping } from '../../themes/types' + +export const accessibleYellow = '#ffff01' +export const accessibleGreen = '#3ff23f' // always disabled color in high contrast +export const accessibleCyan = '#1aebff' + +// COLOR SCHEME +const createColorScheme = (customValues = {}) => { + return { + foregroundDefault: colors.white, + backgroundDefault: colors.black, + borderDefault: colors.white, + shadowDefault: colors.white, + + foregroundHover: accessibleYellow, + backgroundHover: colors.black, + borderHover: accessibleYellow, + shadowHover: accessibleYellow, + + foregroundActive: accessibleCyan, + backgroundActive: colors.black, + borderActive: accessibleCyan, + shadowActive: accessibleCyan, + + foregroundFocus: colors.black, + backgroundFocus: accessibleYellow, + borderFocus: colors.white, + shadowFocus: colors.white, + + foregroundFocusWithin: colors.black, + backgroundFocusWithin: accessibleYellow, + borderFocusWithin: colors.white, + shadowFocusWithin: colors.white, + + foregroundDisabled: colors.black, + backgroundDisabled: accessibleGreen, + borderDisabled: colors.black, + shadowDisabled: colors.black, + ...customValues, + } +} + +export const colorScheme: ColorSchemeMapping = { + default: createColorScheme(), + black: createColorScheme(), + white: createColorScheme(), + primary: createColorScheme(), + grey: createColorScheme(), + green: createColorScheme(), + orange: createColorScheme(), + pink: createColorScheme(), + red: createColorScheme(), + yellow: createColorScheme(), +} diff --git a/packages/react/src/themes/teams-high-contrast/componentVariables.ts b/packages/react/src/themes/teams-high-contrast/componentVariables.ts index 687b0a2199..2d93635feb 100644 --- a/packages/react/src/themes/teams-high-contrast/componentVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/componentVariables.ts @@ -11,3 +11,4 @@ export { default as RadioGroupItem } from './components/RadioGroup/radioGroupIte export { default as Text } from './components/Text/textVariables' export { default as TreeTitle } from './components/Tree/treeTitleVariables' export { default as Popup } from './components/Popup/popupVariables' +export { default as Status } from './components/Status/statusVariables' diff --git a/packages/react/src/themes/teams-high-contrast/components/Status/statusVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Status/statusVariables.ts new file mode 100644 index 0000000000..53c791c8a5 --- /dev/null +++ b/packages/react/src/themes/teams-high-contrast/components/Status/statusVariables.ts @@ -0,0 +1,14 @@ +import { StatusVariables } from '../../../teams/components/Status/statusVariables' + +export default (siteVariables): Partial => ({ + successBackgroundColor: siteVariables.accessibleGreen, + successTextColor: siteVariables.colors.black, + infoBackgroundColor: siteVariables.accessibleCyan, + infoTextColor: siteVariables.colors.black, + warningBackgroundColor: siteVariables.accessibleYellow, + warningTextColor: siteVariables.colors.black, + errorBackgroundColor: siteVariables.red, + errorTextColor: siteVariables.colors.black, + defaultBackgroundColor: siteVariables.colors.white, + defaultTextColor: siteVariables.colors.black, +}) diff --git a/packages/react/src/themes/teams-high-contrast/siteVariables.ts b/packages/react/src/themes/teams-high-contrast/siteVariables.ts index 86f6574dcb..fee1aeaf55 100644 --- a/packages/react/src/themes/teams-high-contrast/siteVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/siteVariables.ts @@ -1,84 +1,13 @@ +export * from './colors' import { colors } from '../teams/siteVariables' -import { ColorSchemeMapping } from '../../themes/types' // // COLORS // -export const accessibleYellow = '#ffff01' -export const accessibleGreen = '#3ff23f' // always disabled color in high contrast -export const accessibleCyan = '#1aebff' - export const red = '#f00' -export const white = colors.white -export const black = colors.black - -// -// STATUS COLORS -// -// TODO: bcalvery - color alone is not an adequate means for differentiating in an accessible way. -export const successStatusBackgroundColor = accessibleGreen -export const successStatusTextColor = black -export const infoStatusBackgroundColor = accessibleCyan -export const infoStatusTextColor = black -export const warningStatusBackgroundColor = accessibleYellow -export const warningStatusTextColor = black -export const errorStatusBackgroundColor = red -export const errorStatusTextColor = black -export const unknownStatusBackgroundColor = colors.white -export const unknownStatusTextColor = black - -// COLOR SCHEME -const createColorScheme = (customValues = {}) => { - return { - foregroundDefault: white, - backgroundDefault: black, - borderDefault: white, - shadowDefault: white, - - foregroundHover: accessibleYellow, - backgroundHover: black, - borderHover: accessibleYellow, - shadowHover: accessibleYellow, - - foregroundActive: accessibleCyan, - backgroundActive: black, - borderActive: accessibleCyan, - shadowActive: accessibleCyan, - - foregroundFocus: black, - backgroundFocus: accessibleYellow, - borderFocus: white, - shadowFocus: white, - - foregroundFocusWithin: black, - backgroundFocusWithin: accessibleYellow, - borderFocusWithin: white, - shadowFocusWithin: white, - - foregroundDisabled: black, - backgroundDisabled: accessibleGreen, - borderDisabled: black, - shadowDisabled: black, - ...customValues, - } -} - -export const colorScheme: ColorSchemeMapping = { - default: createColorScheme(), - black: createColorScheme(), - white: createColorScheme(), - primary: createColorScheme(), - grey: createColorScheme(), - green: createColorScheme(), - orange: createColorScheme(), - pink: createColorScheme(), - red: createColorScheme(), - yellow: createColorScheme(), -} - // // SEMANTIC ASSIGNMENTS // -export const bodyBackground = black -export const bodyColor = white +export const bodyBackground = colors.black +export const bodyColor = colors.white diff --git a/packages/react/src/themes/teams/components/Status/statusVariables.ts b/packages/react/src/themes/teams/components/Status/statusVariables.ts index df290a12eb..0157af8d93 100644 --- a/packages/react/src/themes/teams/components/Status/statusVariables.ts +++ b/packages/react/src/themes/teams/components/Status/statusVariables.ts @@ -16,14 +16,14 @@ export interface StatusVariables { export default siteVariables => ({ borderColor: undefined, borderWidth: 2, - successBackgroundColor: siteVariables.successStatusBackgroundColor, - successTextColor: siteVariables.successStatusTextColor, - infoBackgroundColor: siteVariables.infoStatusBackgroundColor, - infoTextColor: siteVariables.infoStatusTextColor, - warningBackgroundColor: siteVariables.warningStatusBackgroundColor, - warningTextColor: siteVariables.warningStatusTextColor, - errorBackgroundColor: siteVariables.errorStatusBackgroundColor, - errorTextColor: siteVariables.errorStatusTextColor, - defaultBackgroundColor: siteVariables.unknownStatusBackgroundColor, - defaultTextColor: siteVariables.unknownStatusTextColor, + successBackgroundColor: siteVariables.colors.green[200], + successTextColor: siteVariables.colors.white, + infoBackgroundColor: 'blue', // TODO define color for this + infoTextColor: siteVariables.colors.white, + warningBackgroundColor: siteVariables.colors.yellow[400], + warningTextColor: siteVariables.colors.white, + errorBackgroundColor: siteVariables.colors.red[400], + errorTextColor: siteVariables.colors.white, + defaultBackgroundColor: siteVariables.colors.grey[350], + defaultTextColor: siteVariables.colors.white, }) diff --git a/packages/react/src/themes/teams/siteVariables.ts b/packages/react/src/themes/teams/siteVariables.ts index 6f6bb17ab5..3dae414f25 100644 --- a/packages/react/src/themes/teams/siteVariables.ts +++ b/packages/react/src/themes/teams/siteVariables.ts @@ -39,21 +39,6 @@ export const fontSizes = { larger: pxToRem(24), } -// -// STATUS COLORS -// -// TODO these should be moved to status variables -export const successStatusBackgroundColor = colors.green[200] -export const successStatusTextColor = colors.white -export const infoStatusBackgroundColor = 'blue' -export const infoStatusTextColor = colors.white -export const warningStatusBackgroundColor = colors.yellow[400] -export const warningStatusTextColor = colors.white -export const errorStatusBackgroundColor = colors.red[400] -export const errorStatusTextColor = colors.white -export const unknownStatusBackgroundColor = colors.grey[350] -export const unknownStatusTextColor = colors.white - // // FONT WEIGHTS // From 0cc3fdb748c7c94d349ad1a27293062db2223fbf Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 10 Apr 2019 12:03:00 +0200 Subject: [PATCH 062/118] -move red color for hoc theme in colors.ts --- packages/react/src/themes/teams-high-contrast/colors.ts | 1 + .../react/src/themes/teams-high-contrast/siteVariables.ts | 5 ----- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/react/src/themes/teams-high-contrast/colors.ts b/packages/react/src/themes/teams-high-contrast/colors.ts index 6d717a13a7..959599f5a1 100644 --- a/packages/react/src/themes/teams-high-contrast/colors.ts +++ b/packages/react/src/themes/teams-high-contrast/colors.ts @@ -4,6 +4,7 @@ import { ColorSchemeMapping } from '../../themes/types' export const accessibleYellow = '#ffff01' export const accessibleGreen = '#3ff23f' // always disabled color in high contrast export const accessibleCyan = '#1aebff' +export const red = '#f00' // COLOR SCHEME const createColorScheme = (customValues = {}) => { diff --git a/packages/react/src/themes/teams-high-contrast/siteVariables.ts b/packages/react/src/themes/teams-high-contrast/siteVariables.ts index fee1aeaf55..7843e8a036 100644 --- a/packages/react/src/themes/teams-high-contrast/siteVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/siteVariables.ts @@ -1,10 +1,5 @@ export * from './colors' import { colors } from '../teams/siteVariables' -// -// COLORS -// - -export const red = '#f00' // // SEMANTIC ASSIGNMENTS From 5e85080e58cdd638d8c1020f01079f3026560573 Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 10 Apr 2019 12:27:14 +0200 Subject: [PATCH 063/118] -changed black and white colors in variables in hoc theme --- .../components/Avatar/avatarVariables.ts | 4 +- .../components/Button/buttonVariables.ts | 44 +++++++++---------- .../components/Chat/chatMessageVariables.ts | 8 ++-- .../components/Chat/chatVariables.ts | 2 +- .../components/Divider/dividerVariables.ts | 4 +- .../components/Header/headerVariables.ts | 4 +- .../components/Menu/menuVariables.ts | 6 +-- .../RadioGroup/radioGroupItemVariables.ts | 6 +-- .../components/Text/textVariables.ts | 4 +- .../components/Tree/treeTitleVariables.ts | 2 +- 10 files changed, 42 insertions(+), 42 deletions(-) diff --git a/packages/react/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts index 41bd25ecc1..08cf6cc6b9 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts @@ -1,7 +1,7 @@ import { AvatarVariables } from '../../../teams/components/Avatar/avatarVariables' export default (siteVariables: any): Partial => ({ - avatarBorderColor: siteVariables.white, + avatarBorderColor: siteVariables.colors.white, avatarBorderWidth: 2, - statusBorderColor: siteVariables.black, + statusBorderColor: siteVariables.colors.black, }) diff --git a/packages/react/src/themes/teams-high-contrast/components/Button/buttonVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Button/buttonVariables.ts index 90d8371008..23ffef2e90 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Button/buttonVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Button/buttonVariables.ts @@ -2,45 +2,45 @@ import { ButtonVariables } from '../../../teams/components/Button/buttonVariable export default (siteVars: any): Partial => { return { - color: siteVars.white, - colorDisabled: siteVars.black, + color: siteVars.colors.white, + colorDisabled: siteVars.colors.black, backgroundColor: 'transparent', backgroundColorActive: siteVars.accessibleYellow, backgroundColorHover: siteVars.accessibleYellow, backgroundColorFocus: siteVars.accessibleYellow, backgroundColorDisabled: siteVars.accessibleGreen, - borderColor: siteVars.white, + borderColor: siteVars.colors.white, borderColorActive: 'transparent', borderColorHover: 'transparent', - borderColorFocus: siteVars.black, - borderColorFocusIndicator: siteVars.white, + borderColorFocus: siteVars.colors.black, + borderColorFocusIndicator: siteVars.colors.white, - primaryColor: siteVars.white, - primaryColorActive: siteVars.black, - primaryColorHover: siteVars.black, - primaryColorFocus: siteVars.black, - primaryBackgroundColor: siteVars.black, + primaryColor: siteVars.colors.white, + primaryColorActive: siteVars.colors.black, + primaryColorHover: siteVars.colors.black, + primaryColorFocus: siteVars.colors.black, + primaryBackgroundColor: siteVars.colors.black, primaryBackgroundColorActive: siteVars.accessibleYellow, primaryBackgroundColorHover: siteVars.accessibleYellow, primaryBackgroundColorFocus: siteVars.accessibleYellow, - primaryBorderColor: siteVars.white, - primaryBorderColorFocus: siteVars.black, - primaryBorderColorFocusIndicator: siteVars.white, + primaryBorderColor: siteVars.colors.white, + primaryBorderColorFocus: siteVars.colors.black, + primaryBorderColorFocusIndicator: siteVars.colors.white, primaryBorderWidth: 2, - primaryCircularBorderColorFocusIndicator: siteVars.black, + primaryCircularBorderColorFocusIndicator: siteVars.colors.black, - circularColor: siteVars.white, - circularColorActive: siteVars.black, - circularBackgroundColor: siteVars.black, + circularColor: siteVars.colors.white, + circularColorActive: siteVars.colors.black, + circularBackgroundColor: siteVars.colors.black, circularBackgroundColorActive: siteVars.accessibleYellow, circularBackgroundColorHover: siteVars.accessibleYellow, circularBackgroundColorFocus: siteVars.accessibleYellow, - circularBorderColor: siteVars.white, - circularBorderColorActive: siteVars.white, - circularBorderColorHover: siteVars.white, - circularBorderColorFocus: siteVars.white, - circularBorderColorFocusIndicator: siteVars.black, + circularBorderColor: siteVars.colors.white, + circularBorderColorActive: siteVars.colors.white, + circularBorderColorHover: siteVars.colors.white, + circularBorderColorFocus: siteVars.colors.white, + circularBorderColorFocusIndicator: siteVars.colors.black, textColor: siteVars.accessibleYellow, textColorHover: siteVars.accessibleYellow, diff --git a/packages/react/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts index 2dbe637a92..b5e2af8128 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts @@ -2,10 +2,10 @@ import { ChatMessageVariables } from '../../../teams/components/Chat/chatMessage export default (siteVars: any): Partial => { return { - backgroundColor: siteVars.black, - backgroundColorMine: siteVars.black, - color: siteVars.white, + backgroundColor: siteVars.colors.black, + backgroundColorMine: siteVars.colors.black, + color: siteVars.colors.white, contentFocusOutlineColor: siteVars.colors.yellow[400], // Red flag (should this be accessibleYellow?) - border: `1px solid ${siteVars.white}`, + border: `1px solid ${siteVars.colors.white}`, } } diff --git a/packages/react/src/themes/teams-high-contrast/components/Chat/chatVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Chat/chatVariables.ts index 2257d1d60a..b8c3bc1474 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Chat/chatVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Chat/chatVariables.ts @@ -2,6 +2,6 @@ import { ChatVariables } from '../../../teams/components/Chat/chatVariables' export default (siteVars: any): Partial => { return { - backgroundColor: siteVars.black, + backgroundColor: siteVars.colors.black, } } diff --git a/packages/react/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts index 6bdc9d35a5..3f382260f2 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts @@ -1,6 +1,6 @@ import { DividerVariables } from '../../../teams/components/Divider/dividerVariables' export default (siteVars: any): Partial => ({ - dividerColor: siteVars.white, - textColor: siteVars.white, + dividerColor: siteVars.colors.white, + textColor: siteVars.colors.white, }) diff --git a/packages/react/src/themes/teams-high-contrast/components/Header/headerVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Header/headerVariables.ts index 724a6116e2..f92d540fea 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Header/headerVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Header/headerVariables.ts @@ -2,7 +2,7 @@ import { HeaderVariables } from '../../../teams/components/Header/headerVariable export default (siteVars: any): Partial => { return { - color: siteVars.white, - descriptionColor: siteVars.white, + color: siteVars.colors.white, + descriptionColor: siteVars.colors.white, } } diff --git a/packages/react/src/themes/teams-high-contrast/components/Menu/menuVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Menu/menuVariables.ts index 49f61b8866..dbe0150d60 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Menu/menuVariables.ts @@ -1,11 +1,11 @@ import { MenuVariables } from '../../../teams/components/Menu/menuVariables' export default (siteVars: any): Partial => ({ - color: siteVars.white, - colorActive: siteVars.black, + color: siteVars.colors.white, + colorActive: siteVars.colors.black, backgroundColorFocus: siteVars.accessibleYellow, backgroundColorActive: siteVars.accessibleCyan, - primaryBorderColor: siteVars.white, + primaryBorderColor: siteVars.colors.white, verticalBackgroundColor: siteVars.colors.black, }) diff --git a/packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts index 1ecf19c5c8..9205ae6451 100644 --- a/packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/RadioGroup/radioGroupItemVariables.ts @@ -3,9 +3,9 @@ import { RadioGroupItemVariables } from 'src/themes/teams/components/RadioGroup/ export default (siteVars: any): Partial => ({ colorDisabled: siteVars.accessibleGreen, - textColorDefault: siteVars.white, - textColorDefaultHoverFocus: siteVars.white, - textColorChecked: siteVars.white, + textColorDefault: siteVars.colors.white, + textColorDefaultHoverFocus: siteVars.colors.white, + textColorChecked: siteVars.colors.white, iconBorderColorDefaultHover: siteVars.accessibleCyan, iconBorderColorChecked: siteVars.accessibleCyan, diff --git a/packages/react/src/themes/teams-high-contrast/components/Text/textVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Text/textVariables.ts index 8b24df9955..0430803c8f 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Text/textVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Text/textVariables.ts @@ -7,6 +7,6 @@ export default (siteVariables): Partial => ({ errorColor: siteVariables.red, importantColor: siteVariables.red, successColor: siteVariables.colors.green[200], - timestampColor: siteVariables.white, - timestampHoverColor: siteVariables.white, + timestampColor: siteVariables.colors.white, + timestampHoverColor: siteVariables.colors.white, }) diff --git a/packages/react/src/themes/teams-high-contrast/components/Tree/treeTitleVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Tree/treeTitleVariables.ts index e8cce3da52..c292c86d64 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Tree/treeTitleVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Tree/treeTitleVariables.ts @@ -2,6 +2,6 @@ import { TreeTitleVariables } from '../../../teams/components/Tree/treeTitleVari export default (siteVars: any): TreeTitleVariables => { return { - defaultColor: siteVars.white, + defaultColor: siteVars.colors.white, } } From 96f85745c173d07ec1236886cdd2748110447aa5 Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 10 Apr 2019 14:22:51 +0200 Subject: [PATCH 064/118] -updates after merging master --- .../components/Attachment/attachmentVariables.ts | 8 ++++---- .../components/Reaction/reactionVariables.ts | 6 +++--- .../components/Attachment/attachmentVariables.ts | 10 +++++----- .../teams/components/Reaction/reactionVariables.ts | 12 ++++++------ 4 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/react/src/themes/teams-dark/components/Attachment/attachmentVariables.ts b/packages/react/src/themes/teams-dark/components/Attachment/attachmentVariables.ts index 6a984dba37..a48bd52a90 100644 --- a/packages/react/src/themes/teams-dark/components/Attachment/attachmentVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Attachment/attachmentVariables.ts @@ -1,10 +1,10 @@ import { AttachmentVariables } from '../../../teams/components/Attachment/attachmentVariables' export default (siteVariables: any): Partial => ({ - textColor: siteVariables.colors.grey[50], - textColorHover: siteVariables.colors.grey[50], + textColor: siteVariables.colors.white, + textColorHover: siteVariables.colors.white, - backgroundColor: siteVariables.gray600, - borderColor: siteVariables.gray850, + backgroundColor: siteVariables.colors.grey[600], + borderColor: siteVariables.colors.grey[850], boxShadow: siteVariables.shadowLevel1, }) diff --git a/packages/react/src/themes/teams-dark/components/Reaction/reactionVariables.ts b/packages/react/src/themes/teams-dark/components/Reaction/reactionVariables.ts index 7a0c3b968c..d408b1aef0 100644 --- a/packages/react/src/themes/teams-dark/components/Reaction/reactionVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Reaction/reactionVariables.ts @@ -1,8 +1,8 @@ import { ReactionVariables } from '../../../teams/components/Reaction/reactionVariables' export default (siteVars: any): Partial => ({ - meReactingColor: siteVars.brand06, - meReactingColorHover: siteVars.brand04, - otherReactingColor: siteVars.gray03, + meReactingColor: siteVars.colors.primary[400], + meReactingColorHover: siteVars.colors.primary[300], + otherReactingColor: siteVars.colors.grey[300], otherReactingColorHover: siteVars.colors.white, }) diff --git a/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts b/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts index 7f34e89e80..98ba367095 100644 --- a/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts +++ b/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts @@ -30,12 +30,12 @@ export type AttachmentVariables = { export default (siteVariables: any): AttachmentVariables => ({ padding: `${pxToRem(7)} ${pxToRem(3)} ${pxToRem(7)} ${pxToRem(11)}`, // padding set to 1px less to account for 1px border iconSpace: pxToRem(12), - borderColor: siteVariables.gray08, + borderColor: siteVariables.colors.grey[200], borderRadius: pxToRem(3), - backgroundColor: siteVariables.gray10, - backgroundColorHover: siteVariables.gray08, - textColor: siteVariables.colors.grey[900], - textColorHover: siteVariables.colors.grey[900], + backgroundColor: siteVariables.colors.grey[100], + backgroundColorHover: siteVariables.colors.grey[200], + textColor: siteVariables.colors.grey[750], + textColorHover: siteVariables.colors.grey[750], boxShadow: siteVariables.shadowLevel1, progressColor: siteVariables.colors.green[200], diff --git a/packages/react/src/themes/teams/components/Reaction/reactionVariables.ts b/packages/react/src/themes/teams/components/Reaction/reactionVariables.ts index fd018cc2a5..8a692c2eb5 100644 --- a/packages/react/src/themes/teams/components/Reaction/reactionVariables.ts +++ b/packages/react/src/themes/teams/components/Reaction/reactionVariables.ts @@ -16,16 +16,16 @@ export interface ReactionVariables { } export default (siteVars): ReactionVariables => ({ - meReactingColor: siteVars.colors.primary[500], - meReactingColorHover: siteVars.brand04, - otherReactingColor: siteVars.gray03, - otherReactingColorHover: siteVars.colors.grey[900], + meReactingColor: siteVars.colors.primary[600], + meReactingColorHover: siteVars.colors.primary[800], + otherReactingColor: siteVars.colors.grey[450], + otherReactingColorHover: siteVars.colors.grey[750], contentFontSize: siteVars.fontSizes.small, fontWeightHover: siteVars.fontWeightBold, - outlineColorFocus: siteVars.colors.primary[500], + outlineColorFocus: siteVars.colors.primary[600], outlineWidthFocus: pxToRem(2), outlineOffsetFocus: pxToRem(-2), meReacting: false, boxShadowColor: siteVars.colors.white, - borderColorFocus: siteVars.colors.grey[900], + borderColorFocus: siteVars.colors.grey[750], }) From add62e979d35f57d30238933bf0594a6f1a26b7c Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 10 Apr 2019 14:46:33 +0200 Subject: [PATCH 065/118] -improved typings --- .../teams/components/Menu/menuItemStyles.ts | 8 ++--- .../components/Segment/segmentVariables.ts | 4 ++- packages/react/src/themes/types.ts | 29 ++++++++++--------- 3 files changed, 23 insertions(+), 18 deletions(-) diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index 9efb67277e..15a7257adc 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -1,5 +1,5 @@ import { pxToRem } from '../../../../lib' -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesInput, ICSSInJSStyle, ColorScheme } from '../../../types' import { MenuVariables } from './menuVariables' import { MenuItemProps, MenuItemState } from '../../../../components/Menu/MenuItem' import { teamsIconClassNames } from '../Icon/svg' @@ -23,7 +23,7 @@ const getActionStyles = ({ }: { props: MenuItemPropsAndState variables: MenuVariables - colorScheme: any + colorScheme: ColorScheme }): ICSSInJSStyle => underlined || iconOnly ? { @@ -46,7 +46,7 @@ const getFocusedStyles = ({ }: { props: MenuItemPropsAndState variables: MenuVariables - colorScheme: any + colorScheme: ColorScheme }): ICSSInJSStyle => { const { primary, color, underlined, isFromKeyboard, active, vertical } = props if (active && !underlined && !vertical) return {} @@ -71,7 +71,7 @@ const getHoverStyles = ({ }: { props: MenuItemPropsAndState variables: MenuVariables - colorScheme: any + colorScheme: ColorScheme }): ICSSInJSStyle => { const { primary, underlined, active, vertical, color } = props if (active && !underlined && !vertical) return {} diff --git a/packages/react/src/themes/teams/components/Segment/segmentVariables.ts b/packages/react/src/themes/teams/components/Segment/segmentVariables.ts index 0b312a09b2..4ff0806033 100644 --- a/packages/react/src/themes/teams/components/Segment/segmentVariables.ts +++ b/packages/react/src/themes/teams/components/Segment/segmentVariables.ts @@ -1,5 +1,7 @@ +import { ColorSchemeMapping } from '../../../../themes/types' + export interface SegmentVariables { - colorScheme: any + colorScheme: ColorSchemeMapping color: string backgroundColor: string padding: string diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts index efe97e6f71..c7dca00931 100644 --- a/packages/react/src/themes/types.ts +++ b/packages/react/src/themes/types.ts @@ -17,18 +17,21 @@ import { Extendable, ObjectOf, ObjectOrFunc } from '../types' /** * A type for a palette for a single color. */ -export type ColorVariants = Extendable<{ - 50?: string - 100?: string - 200?: string - 300?: string - 400?: string - 500?: string - 600?: string - 700?: string - 800?: string - 900?: string -}> +export type ColorVariants = Extendable< + Partial<{ + 50: string + 100: string + 200: string + 300: string + 400: string + 500: string + 600: string + 700: string + 800: string + 900: string + }>, + string +> /** * A type for a predefined natural colors. */ @@ -99,7 +102,7 @@ export type ColorPalette = ExtendablePalette< * A type for the generic color scheme of a component based on CSS property names */ export type ColorScheme = { - [key: string]: any + [key: string]: string foregroundDefault: string backgroundDefault: string borderDefault: string From 1fb03736cb7daa13ef1fe50904894e090c11cb24 Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 10 Apr 2019 16:04:15 +0200 Subject: [PATCH 066/118] -updated more colors --- .../react/src/themes/teams/components/Input/inputVariables.ts | 2 +- .../teams/components/RadioGroup/radioGroupItemVariables.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/themes/teams/components/Input/inputVariables.ts b/packages/react/src/themes/teams/components/Input/inputVariables.ts index 7575012c98..2e3f5d9fa8 100644 --- a/packages/react/src/themes/teams/components/Input/inputVariables.ts +++ b/packages/react/src/themes/teams/components/Input/inputVariables.ts @@ -37,5 +37,5 @@ export default (siteVars): InputVariables => ({ inputFocusBorderBottomColor: siteVars.colors.primary[600], inputFocusBorderRadius: `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`, - placeholderColor: siteVars.gray02, + placeholderColor: siteVars.colors.grey[500], }) diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts index 7a9ab287ae..74f8fad1cf 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts @@ -28,7 +28,7 @@ export default (siteVars: any): RadioGroupItemVariables => ({ textFontSize: siteVars.fontSizes.medium, - textColorDefault: siteVars.gray02, + textColorDefault: siteVars.colors.grey[500], textColorDefaultHoverFocus: siteVars.colors.grey[750], textColorChecked: siteVars.colors.grey[750], From 0e0dd1376979cad18f9f7a5ca5c24b81702c6001 Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 10 Apr 2019 16:07:23 +0200 Subject: [PATCH 067/118] -replaced blue info color for the status with primary --- .../react/src/themes/teams/components/Status/statusVariables.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/themes/teams/components/Status/statusVariables.ts b/packages/react/src/themes/teams/components/Status/statusVariables.ts index 0157af8d93..12bc113c7f 100644 --- a/packages/react/src/themes/teams/components/Status/statusVariables.ts +++ b/packages/react/src/themes/teams/components/Status/statusVariables.ts @@ -18,7 +18,7 @@ export default siteVariables => ({ borderWidth: 2, successBackgroundColor: siteVariables.colors.green[200], successTextColor: siteVariables.colors.white, - infoBackgroundColor: 'blue', // TODO define color for this + infoBackgroundColor: siteVariables.colors.primary[500], infoTextColor: siteVariables.colors.white, warningBackgroundColor: siteVariables.colors.yellow[400], warningTextColor: siteVariables.colors.white, From c6a159c05ecc3fdd22f1968f838befa28138d8b4 Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 10 Apr 2019 16:20:03 +0200 Subject: [PATCH 068/118] -removed red color from dark theme -removed some comments --- .../themes/teams-dark/components/Text/textVariables.ts | 4 ++-- packages/react/src/themes/teams-dark/siteVariables.ts | 5 ----- packages/react/src/themes/teams/colors.ts | 9 ++++----- 3 files changed, 6 insertions(+), 12 deletions(-) diff --git a/packages/react/src/themes/teams-dark/components/Text/textVariables.ts b/packages/react/src/themes/teams-dark/components/Text/textVariables.ts index 8c51c93443..3fbb9494dd 100644 --- a/packages/react/src/themes/teams-dark/components/Text/textVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Text/textVariables.ts @@ -4,8 +4,8 @@ export default (siteVariables): Partial => ({ atMentionMeColor: siteVariables.colors.orange[300], atMentionOtherColor: siteVariables.colors.primary[400], disabledColor: siteVariables.colors.grey[450], - errorColor: siteVariables.red, - importantColor: siteVariables.red, + errorColor: siteVariables.colors.red[300], + importantColor: siteVariables.colors.red[300], successColor: siteVariables.colors.green[200], timestampColor: siteVariables.colors.grey[400], timestampHoverColor: siteVariables.colors.grey[250], diff --git a/packages/react/src/themes/teams-dark/siteVariables.ts b/packages/react/src/themes/teams-dark/siteVariables.ts index 11015d066e..45b5cb3b98 100644 --- a/packages/react/src/themes/teams-dark/siteVariables.ts +++ b/packages/react/src/themes/teams-dark/siteVariables.ts @@ -1,11 +1,6 @@ import { colors } from '../teams/siteVariables' export { colorScheme } from './colors' -// -// COLORS -// -export const red = '#d74654' // no mapping color - // // SHADOW LEVELS // diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index 0641fd4f0e..81742cd456 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -9,14 +9,13 @@ import { ColorSchemeMapping } from 'src/themes/types' export const emphasisColors: EmphasisColors = { primary: { - // UPDATED 50: '#F4F4FC', // siteVariables.brand16, same as prev 100: '#E5E5F1', // brand15 200: '#E2E2F6', // 100, light brand14, dark theme brand02 300: '#BDBDE6', // 200, light brand12, dark theme brand04 400: '#A6A7DC', // dark theme brand06 (dark06) 500: '#8B8CC7', // light08, dark08 - 600: '#6264A7', // 500, siteVariables.brand, siteVariables.brand06 (same color?), dark theme brand, brand12 + 600: '#6264A7', // 500, siteVariables.brand, siteVariables.brand06, dark theme brand, brand12 700: '#585A96', // light05 800: '#464775', // light04, dark14 900: '#33344A', // siteVariables.brand02, dark theme brand16, same as 900 prev @@ -32,13 +31,13 @@ export const naturalColors: NaturalColors = { 100: '#F3F2F1', // light10, old $app-density-message-background-replay-hover-focus 150: '#EDEBE9', // light09, old $app-density-border-gray 200: '#E1DFDD', // light08 - 250: '#C8C6C4', // light06, dark02??? + 250: '#C8C6C4', // light06, dark02 300: '#B3B0AD', // dark03 350: '#979593', // light04 400: '#8A8886', // dark04 450: '#605E5C', // light03, dark06, $app-gray-20-theme-agnostic, old $message-highlight-color-darktheme 500: '#484644', // light02, dark08 - 550: '#3B3A39', // dark09 ?!?!?! different color [#3b3a39] + 550: '#3B3A39', // dark09 600: '#323131', // dark10, in call audio only grid slot 4 650: '#2D2C2C', // in call audio only grid slot 3 700: '#292828', // dark14, in call audio only grid slot 2, old $app-density-message-background-initial-hover-focus-darktheme @@ -51,7 +50,7 @@ export const naturalColors: NaturalColors = { orange: { 50: '#F9ECEA', // darkOrange[50] 100: '#EFDBD3', // app orange14 - 200: '#EDC2A7', // wrong in invision?! old message highlight border + 200: '#EDC2A7', // old message highlight border 300: '#E97548', // orange[900] 400: '#CC4A31', // app orange04 darkOrange[400] 500: '#BD432C', // app orange03 From 8f7854cae08cce1937dc7961e7c3d3c8ee99b274 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 11 Apr 2019 16:23:20 +0200 Subject: [PATCH 069/118] -improved typings of text variables in base team -fixed color mapping in base theme --- packages/react/src/themes/base/colors.ts | 53 +++++++++---------- .../themes/base/components/Text/textStyles.ts | 5 +- .../base/components/Text/textVariables.ts | 4 +- 3 files changed, 31 insertions(+), 31 deletions(-) diff --git a/packages/react/src/themes/base/colors.ts b/packages/react/src/themes/base/colors.ts index cfd7919b4b..1047328564 100644 --- a/packages/react/src/themes/base/colors.ts +++ b/packages/react/src/themes/base/colors.ts @@ -148,9 +148,6 @@ const emphasisAndNaturalColors: EmphasisColors & NaturalColors = { ...naturalColors, } -const lightBackgroundColors = ['teal', 'yellow'] -const isLightBackground = (colorName: string) => _.includes(lightBackgroundColors, colorName) - export const colors: ColorPalette = { ...emphasisAndNaturalColors, ...contextualColors, @@ -161,38 +158,36 @@ export const colors: ColorPalette = { export const colorScheme: ColorSchemeMapping = { ..._.mapValues(emphasisAndNaturalColors, (colorVariants, colorName) => { - const foreground = isLightBackground(colorName) ? colors.black : colorVariants[50] - return { - foregroundDefault: foreground, - borderDefault: foreground, - shadowDefault: foreground, - backgroundDefault: colorVariants[500], + foregroundDefault: colorVariants[500], + borderDefault: colorVariants[500], + shadowDefault: colorVariants[500], + backgroundDefault: colorVariants[50], - foregroundActive: foreground, - borderActive: foreground, - shadowActive: foreground, - backgroundActive: colorVariants[500], + foregroundActive: colorVariants[500], + borderActive: colorVariants[500], + shadowActive: colorVariants[500], + backgroundActive: colorVariants[50], - foregroundHover: foreground, - backgroundHover: colorVariants[500], - borderHover: foreground, - shadowHover: foreground, + foregroundHover: colorVariants[500], + borderHover: colorVariants[500], + shadowHover: colorVariants[500], + backgroundHover: colorVariants[50], - foregroundFocus: foreground, - backgroundFocus: colorVariants[500], - borderFocus: foreground, - shadowFocus: foreground, + foregroundFocus: colorVariants[500], + borderFocus: colorVariants[500], + shadowFocus: colorVariants[500], + backgroundFocus: colorVariants[50], - foregroundFocusWithin: foreground, - backgroundFocusWithin: colorVariants[500], - borderFocusWithin: foreground, - shadowFocusWithin: foreground, + foregroundFocusWithin: colorVariants[500], + borderFocusWithin: colorVariants[500], + shadowFocusWithin: colorVariants[500], + backgroundFocusWithin: colorVariants[50], - foregroundDisabled: foreground, - backgroundDisabled: colorVariants[500], - borderDisabled: foreground, - shadowDisabled: foreground, + foregroundDisabled: colorVariants[500], + borderDisabled: colorVariants[500], + shadowDisabled: colorVariants[500], + backgroundDisabled: colorVariants[50], } }), } diff --git a/packages/react/src/themes/base/components/Text/textStyles.ts b/packages/react/src/themes/base/components/Text/textStyles.ts index dbbd80c058..9ad43f98f3 100644 --- a/packages/react/src/themes/base/components/Text/textStyles.ts +++ b/packages/react/src/themes/base/components/Text/textStyles.ts @@ -1,4 +1,3 @@ -import * as _ from 'lodash' import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types' import { TextVariables } from './textVariables' import { TextProps } from '../../../../components/Text/Text' @@ -22,7 +21,11 @@ export default { }, variables: v, }: ComponentStyleFunctionParam): ICSSInJSStyle => { + const colors = v.colorScheme[color || 'default'] return { + ...(color && { + color: colors.foregroundDefault, + }), // animations are not working with span, unless display is set to 'inline-block' ...(animation && as === 'span' && { diff --git a/packages/react/src/themes/base/components/Text/textVariables.ts b/packages/react/src/themes/base/components/Text/textVariables.ts index 837b6f666b..c82d994b35 100644 --- a/packages/react/src/themes/base/components/Text/textVariables.ts +++ b/packages/react/src/themes/base/components/Text/textVariables.ts @@ -1,5 +1,7 @@ +import { ColorSchemeMapping } from '../../../types' + export interface TextVariables { - colorScheme: any + colorScheme: ColorSchemeMapping atMentionMeColor: string atMentionOtherColor: string From 5f97b4bd45d4a5af4b30599a2c40adbaef6011e6 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 11 Apr 2019 16:29:24 +0200 Subject: [PATCH 070/118] -fixed verticalBackgroundColor variables usage --- packages/react/src/themes/teams/components/Menu/menuStyles.ts | 2 +- .../react/src/themes/teams/components/Menu/menuVariables.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/themes/teams/components/Menu/menuStyles.ts b/packages/react/src/themes/teams/components/Menu/menuStyles.ts index f1d5ecf798..fab6edf3a4 100644 --- a/packages/react/src/themes/teams/components/Menu/menuStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuStyles.ts @@ -26,7 +26,7 @@ export default { ...(iconOnly && { alignItems: 'center' }), ...(vertical && { flexDirection: 'column', - backgroundColor: v.verticalBackgroundColor || theme.siteVariables.colors.white, + backgroundColor: v.verticalBackgroundColor, padding: `${pxToRem(8)} 0`, ...(submenu && { boxShadow: v.verticalBoxShadow, diff --git a/packages/react/src/themes/teams/components/Menu/menuVariables.ts b/packages/react/src/themes/teams/components/Menu/menuVariables.ts index 95a94dd820..a1f16869e1 100644 --- a/packages/react/src/themes/teams/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams/components/Menu/menuVariables.ts @@ -71,7 +71,7 @@ export default (siteVars: any): MenuVariables => { lineHeightBase: siteVars.lineHeightMedium, horizontalPadding: `${pxToRem(14)} ${pxToRem(18)} ${pxToRem(14)} ${pxToRem(18)}`, - verticalBackgroundColor: undefined, + verticalBackgroundColor: siteVars.colors.white, verticalItemPadding: `${pxToRem(9)} ${pxToRem(16)} ${pxToRem(9)} ${pxToRem(16)}`, verticalBoxShadow: siteVars.shadowLevel3, verticalDividerMargin: `${pxToRem(8)} 0`, From 009f1f790a00c4969f57cef180ba7b0f3a9b3642 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 11 Apr 2019 17:02:25 +0200 Subject: [PATCH 071/118] -updated colors type in divider styles --- .../src/themes/teams/components/Divider/dividerStyles.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/react/src/themes/teams/components/Divider/dividerStyles.ts b/packages/react/src/themes/teams/components/Divider/dividerStyles.ts index 4ff8fe78f7..9474334b0b 100644 --- a/packages/react/src/themes/teams/components/Divider/dividerStyles.ts +++ b/packages/react/src/themes/teams/components/Divider/dividerStyles.ts @@ -1,11 +1,15 @@ import * as _ from 'lodash' import { childrenExist, pxToRem } from '../../../../lib' -import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { ComponentSlotStylesInput, ICSSInJSStyle, ColorScheme } from '../../../types' import { DividerPropsWithDefaults } from '../../../../components/Divider/Divider' import { DividerVariables } from './dividerVariables' -const beforeAndAfter = (size: number, variables: DividerVariables, colors): ICSSInJSStyle => ({ +const beforeAndAfter = ( + size: number, + variables: DividerVariables, + colors: ColorScheme, +): ICSSInJSStyle => ({ content: '""', flex: 1, height: `${size + 1}px`, From 83df6e8d6276834154e72c1c005c6d3f22b3484b Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 11 Apr 2019 19:57:39 +0200 Subject: [PATCH 072/118] -changed the way the ColorScheme is defined --- packages/react/src/themes/types.ts | 63 +++++++++++++++--------------- 1 file changed, 31 insertions(+), 32 deletions(-) diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts index c7dca00931..e667d089b3 100644 --- a/packages/react/src/themes/types.ts +++ b/packages/react/src/themes/types.ts @@ -98,41 +98,39 @@ export type ColorPalette = ExtendablePalette< EmphasisColorsStrict & ContextualColorsStrict & NaturalColorsStrict & PrimitiveColors & T > +/** + * A type for all area names that can define color + */ +export type ComponentAreaName = + | 'foregroundDefault' + | 'backgroundDefault' + | 'borderDefault' + | 'shadowDefault' + | 'foregroundHover' + | 'backgroundHover' + | 'borderHover' + | 'shadowHover' + | 'foregroundActive' + | 'backgroundActive' + | 'borderActive' + | 'shadowActive' + | 'foregroundFocus' + | 'backgroundFocus' + | 'borderFocus' + | 'shadowFocus' + | 'foregroundFocusWithin' + | 'backgroundFocusWithin' + | 'borderFocusWithin' + | 'shadowFocusWithin' + | 'foregroundDisabled' + | 'backgroundDisabled' + | 'borderDisabled' + | 'shadowDisabled' + /** * A type for the generic color scheme of a component based on CSS property names */ -export type ColorScheme = { - [key: string]: string - foregroundDefault: string - backgroundDefault: string - borderDefault: string - shadowDefault: string - - foregroundHover: string - backgroundHover: string - borderHover: string - shadowHover: string - - foregroundActive: string - backgroundActive: string - borderActive: string - shadowActive: string - - foregroundFocus: string - backgroundFocus: string - borderFocus: string - shadowFocus: string - - foregroundFocusWithin: string - backgroundFocusWithin: string - borderFocusWithin: string - shadowFocusWithin: string - - foregroundDisabled: string - backgroundDisabled: string - borderDisabled: string - shadowDisabled: string -} +export type ColorScheme = Extendable, string> export type ColorSchemeMapping = ColorValues & { default?: ColorScheme } @@ -234,6 +232,7 @@ export interface ComponentSlotStylesPrepared extends ObjectOf> {} export interface ComponentSlotClasses extends ObjectOf {} + export interface ComponentSlotClasses extends ObjectOf {} export type AnimationProp = From 10c754664a0cdbafa310bd3019fadcf06130de93 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 11 Apr 2019 20:04:07 +0200 Subject: [PATCH 073/118] -fixed root/wrapper differences in picking the color --- .../src/themes/teams/components/Menu/menuItemStyles.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index 15a7257adc..bc42b8e5c3 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -135,6 +135,11 @@ const pointingBeak = ({ props, variables: v, colorScheme }): ICSSInJSStyle => { } } +const getColorSchemeKey = (props: MenuItemProps): string => { + const { color, primary } = props + return color || (primary ? 'primary' : 'default') +} + const menuItemStyles: ComponentSlotStylesInput = { wrapper: ({ props, variables: v, theme }): ICSSInJSStyle => { const { @@ -147,11 +152,10 @@ const menuItemStyles: ComponentSlotStylesInput Date: Fri, 12 Apr 2019 12:04:45 +0200 Subject: [PATCH 074/118] -changed chat message background color for mine messages --- .../themes/teams-dark/components/Chat/chatMessageVariables.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts index 1668085c7d..eb74ad71ad 100644 --- a/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts @@ -3,7 +3,7 @@ import { ChatMessageVariables } from '../../../teams/components/Chat/chatMessage export default (siteVars: any): Partial => { return { backgroundColor: siteVars.colors.grey[600], - backgroundColorMine: '#3B3C54', + backgroundColorMine: siteVars.colors.primary[900], color: siteVars.colors.white, contentFocusOutlineColor: siteVars.colors.primary[600], } From 8b659310285397d9e3b806114cfc5e27734a3f49 Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 12 Apr 2019 14:27:30 +0200 Subject: [PATCH 075/118] -fixed for dark theme --- packages/react/src/themes/teams-dark/componentVariables.ts | 1 + .../themes/teams-dark/components/Button/buttonVariables.ts | 1 + .../teams-dark/components/Chat/chatMessageVariables.ts | 1 + .../components/Header/headerDescriptionVariables.ts | 6 ++++++ .../themes/teams-dark/components/Input/inputVariables.ts | 7 +++++-- 5 files changed, 14 insertions(+), 2 deletions(-) create mode 100644 packages/react/src/themes/teams-dark/components/Header/headerDescriptionVariables.ts diff --git a/packages/react/src/themes/teams-dark/componentVariables.ts b/packages/react/src/themes/teams-dark/componentVariables.ts index cf8d55e475..236abaa15d 100644 --- a/packages/react/src/themes/teams-dark/componentVariables.ts +++ b/packages/react/src/themes/teams-dark/componentVariables.ts @@ -4,6 +4,7 @@ export { default as Chat } from './components/Chat/chatVariables' export { default as ChatMessage } from './components/Chat/chatMessageVariables' export { default as Divider } from './components/Divider/dividerVariables' export { default as Header } from './components/Header/headerVariables' +export { default as HeaderDescription } from './components/Header/headerDescriptionVariables' export { default as Input } from './components/Input/inputVariables' export { default as ListItem } from './components/List/listItemVariables' export { default as RadioGroupItem } from './components/RadioGroup/radioGroupItemVariables' diff --git a/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts b/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts index ac819ff5a7..51c2d7ad25 100644 --- a/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts @@ -34,6 +34,7 @@ export default (siteVars: any): Partial => { textColorHover: siteVars.colors.primary[300], textPrimaryColorHover: siteVars.colors.primary[300], + textSecondaryColor: siteVars.colors.grey[300], textSecondaryColorHover: siteVars.colors.primary[300], } } diff --git a/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts index eb74ad71ad..08c994f397 100644 --- a/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts @@ -6,5 +6,6 @@ export default (siteVars: any): Partial => { backgroundColorMine: siteVars.colors.primary[900], color: siteVars.colors.white, contentFocusOutlineColor: siteVars.colors.primary[600], + timestampColorMine: siteVars.colors.grey[250], } } diff --git a/packages/react/src/themes/teams-dark/components/Header/headerDescriptionVariables.ts b/packages/react/src/themes/teams-dark/components/Header/headerDescriptionVariables.ts new file mode 100644 index 0000000000..349fddfe32 --- /dev/null +++ b/packages/react/src/themes/teams-dark/components/Header/headerDescriptionVariables.ts @@ -0,0 +1,6 @@ +import { HeaderDescriptionVariables } from '../../../teams/components/Header/headerDescriptionVariables' + +export default (siteVariables: any): Partial => ({ + colorScheme: siteVariables.colorScheme, + color: siteVariables.colors.grey[250], +}) diff --git a/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts b/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts index 1d73277794..615fea602c 100644 --- a/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts @@ -1,8 +1,11 @@ -export default (siteVars: any) => { +import { InputVariables } from '../../../teams/components/Input/inputVariables' + +export default (siteVars: any): Partial => { return { backgroundColor: siteVars.colors.grey[600], fontColor: siteVars.colors.grey[250], - inputFocusBorderColor: siteVars.colors.primary[600], + inputFocusBorderBottomColor: siteVars.colors.primary[600], iconColor: siteVars.colors.grey[250], + placeholderColor: siteVars.colors.grey[250], } } From b405b0e6908e63cf138d7cbe9fbfc886c9b2508f Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 12 Apr 2019 15:23:43 +0200 Subject: [PATCH 076/118] -updated colors for list item and radio group in dark theme --- .../src/themes/teams-dark/components/List/listItemVariables.ts | 1 + .../teams-dark/components/RadioGroup/radioGroupItemVariables.ts | 2 ++ 2 files changed, 3 insertions(+) diff --git a/packages/react/src/themes/teams-dark/components/List/listItemVariables.ts b/packages/react/src/themes/teams-dark/components/List/listItemVariables.ts index ca481e0cfb..3332545097 100644 --- a/packages/react/src/themes/teams-dark/components/List/listItemVariables.ts +++ b/packages/react/src/themes/teams-dark/components/List/listItemVariables.ts @@ -1,6 +1,7 @@ import { ListItemVariables } from 'src/themes/teams/components/List/listItemVariables' export default (siteVars: any): Partial => ({ + selectedFocusOutlineColor: siteVars.colors.primary[600], selectableFocusHoverBackgroundColor: siteVars.colors.grey[500], selectedBackgroundColor: siteVars.colors.grey[500], }) diff --git a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts index 13bcd866c3..e82a70d4b0 100644 --- a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts @@ -1,6 +1,8 @@ import { RadioGroupItemVariables } from 'src/themes/teams/components/RadioGroup/radioGroupItemVariables' export default (siteVars: any): Partial => ({ + colorDisabled: siteVars.colors.grey[450], + textColorDefault: siteVars.colors.grey[250], textColorDefaultHoverFocus: siteVars.colors.white, textColorChecked: siteVars.colors.white, From 74b29b0e5975ca901fb11902b677c52ab10872eb Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 12 Apr 2019 15:46:41 +0200 Subject: [PATCH 077/118] -added function for extending the color palette --- packages/react/src/themes/teams/colorUtils.ts | 18 ++++++++++++++++++ .../teams/components/Label/labelVariables.ts | 17 +++++++---------- packages/react/src/themes/types.ts | 3 +++ 3 files changed, 28 insertions(+), 10 deletions(-) create mode 100644 packages/react/src/themes/teams/colorUtils.ts diff --git a/packages/react/src/themes/teams/colorUtils.ts b/packages/react/src/themes/teams/colorUtils.ts new file mode 100644 index 0000000000..6a67011635 --- /dev/null +++ b/packages/react/src/themes/teams/colorUtils.ts @@ -0,0 +1,18 @@ +import { ColorSchemeMapping, ColorSchemeMappingOverrides } from '../types' + +export const extendColorScheme = ( + colorScheme: ColorSchemeMapping, + overrides: ColorSchemeMappingOverrides, +): ColorSchemeMapping => { + let result = colorScheme + Object.keys(overrides).map(color => { + result = { + ...result, + [color]: { + ...colorScheme[color], + ...overrides[color], + }, + } + }) + return result +} diff --git a/packages/react/src/themes/teams/components/Label/labelVariables.ts b/packages/react/src/themes/teams/components/Label/labelVariables.ts index 746d29b9d4..13e5d161fb 100644 --- a/packages/react/src/themes/teams/components/Label/labelVariables.ts +++ b/packages/react/src/themes/teams/components/Label/labelVariables.ts @@ -1,5 +1,6 @@ import { pxToRem } from '../../../../lib' import { SiteVariablesPrepared, ColorSchemeMapping } from '../../../types' +import { extendColorScheme } from 'src/themes/teams/colorUtils' export interface LabelVariables { colorScheme: ColorSchemeMapping @@ -14,17 +15,13 @@ export interface LabelVariables { export default (siteVars: SiteVariablesPrepared): LabelVariables => { const color = 'rgba(0, 0, 0, 0.6)' - const colorScheme = { - ...siteVars.colorScheme, - default: { - ...siteVars.colorScheme.default, - backgroundDefault: color, - foregroundDefault: 'rgb(232, 232, 232)', - }, - } - return { - colorScheme, + colorScheme: extendColorScheme(siteVars.colorScheme, { + default: { + backgroundDefault: color, + foregroundDefault: 'rgb(232, 232, 232)', + }, + }), circularRadius: pxToRem(9999), padding: `0 ${pxToRem(4)} 0 ${pxToRem(4)}`, startPaddingLeft: '0px', diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts index 84948663bf..6def82eafb 100644 --- a/packages/react/src/themes/types.ts +++ b/packages/react/src/themes/types.ts @@ -133,6 +133,9 @@ export type ComponentAreaName = export type ColorScheme = Extendable, string> export type ColorSchemeMapping = ColorValues & { default?: ColorScheme } +export type ColorSchemeMappingOverrides = ColorValues> & { + default?: Partial +} // ======================================================== // Props From 2b1addecfc141bb99b666216be6b1d345892daaa Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 12 Apr 2019 16:23:16 +0200 Subject: [PATCH 078/118] -fixed import in label variables --- .../react/src/themes/teams/components/Label/labelVariables.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/themes/teams/components/Label/labelVariables.ts b/packages/react/src/themes/teams/components/Label/labelVariables.ts index 13e5d161fb..04d645ef21 100644 --- a/packages/react/src/themes/teams/components/Label/labelVariables.ts +++ b/packages/react/src/themes/teams/components/Label/labelVariables.ts @@ -1,6 +1,6 @@ import { pxToRem } from '../../../../lib' import { SiteVariablesPrepared, ColorSchemeMapping } from '../../../types' -import { extendColorScheme } from 'src/themes/teams/colorUtils' +import { extendColorScheme } from '../../colorUtils' export interface LabelVariables { colorScheme: ColorSchemeMapping From 4fac4dc9f5a458f3407404f53c98ac340d6cd8c5 Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 12 Apr 2019 17:35:24 +0200 Subject: [PATCH 079/118] -fixed colors in Chat perf examples to avoid screener regressions --- docs/src/examples/components/Chat/Performance/Chat.perf.tsx | 2 +- .../components/Chat/Performance/ChatWithPopover.perf.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/examples/components/Chat/Performance/Chat.perf.tsx b/docs/src/examples/components/Chat/Performance/Chat.perf.tsx index a41859461e..41f16a031b 100644 --- a/docs/src/examples/components/Chat/Performance/Chat.perf.tsx +++ b/docs/src/examples/components/Chat/Performance/Chat.perf.tsx @@ -20,7 +20,7 @@ const ChatExample = () => { ChatMessage: { root: ({ props: p, theme: { siteVariables } }) => ({ '& a': { - color: siteVariables.colors.primary[500], + color: siteVariables.colors.primary[600], }, }), }, diff --git a/docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx b/docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx index c6d8789436..b05abfaa97 100644 --- a/docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx +++ b/docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx @@ -117,7 +117,7 @@ const ChatWithPopover = () => { ChatMessage: { root: ({ props: p, theme: { siteVariables } }) => ({ '& a': { - color: siteVariables.colors.primary[500], + color: siteVariables.colors.primary[600], }, }), }, From e8e5313b4c18d0c670472200038db892431f7ba1 Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 12 Apr 2019 19:44:46 +0200 Subject: [PATCH 080/118] -updated red[100] to match the correct color --- packages/react/src/themes/teams/colors.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index 81742cd456..8b5e0bea69 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -73,7 +73,7 @@ export const naturalColors: NaturalColors = { }, red: { 50: '#FCF4F6', // app red 10 - 100: '#F3D6DB', // postOrange[900] app red 08 + 100: '#F3D6D8', // postOrange[900] app red 08 200: '#F9526B', // new, error banner string 300: '#E73550', // merge old @app-red-dark-theme 400: '#C4314B', // red[900], app red 06, siteVariables.red From 1c2d77a5bc3a0689fc005326c4a5037b2464f14f Mon Sep 17 00:00:00 2001 From: manajdov Date: Fri, 12 Apr 2019 20:04:19 +0200 Subject: [PATCH 081/118] -fixed menuStyles --- packages/react/src/themes/teams/components/Menu/menuStyles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/themes/teams/components/Menu/menuStyles.ts b/packages/react/src/themes/teams/components/Menu/menuStyles.ts index fab6edf3a4..dc84415efb 100644 --- a/packages/react/src/themes/teams/components/Menu/menuStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuStyles.ts @@ -20,7 +20,7 @@ export default { minHeight: pxToRem(24), margin: 0, padding: 0, - color: v.color || colorScheme.backgroundDefault, + color: v.color, backgroundColor: v.backgroundColor || 'inherit', listStyleType: 'none', ...(iconOnly && { alignItems: 'center' }), From c74149ebffd2ff496da58b9ecebdb2b26191d56d Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 15 Apr 2019 17:56:03 +0200 Subject: [PATCH 082/118] -moved colorUtils to themes, and exported that as part of stardust -added extendColorScheme usage in the divider variables --- packages/react/src/index.ts | 1 + packages/react/src/themes/{teams => }/colorUtils.ts | 2 +- .../teams-dark/components/Divider/dividerVariables.ts | 6 +++--- .../src/themes/teams/components/Label/labelVariables.ts | 2 +- 4 files changed, 6 insertions(+), 5 deletions(-) rename packages/react/src/themes/{teams => }/colorUtils.ts (97%) diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 1e5fba0558..e39ebb37fd 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -5,6 +5,7 @@ import * as themes from './themes' // export { themes } export * from './themes/types' +export * from './themes/colorUtils' // // Components diff --git a/packages/react/src/themes/teams/colorUtils.ts b/packages/react/src/themes/colorUtils.ts similarity index 97% rename from packages/react/src/themes/teams/colorUtils.ts rename to packages/react/src/themes/colorUtils.ts index 6a67011635..84d34a94c0 100644 --- a/packages/react/src/themes/teams/colorUtils.ts +++ b/packages/react/src/themes/colorUtils.ts @@ -1,4 +1,4 @@ -import { ColorSchemeMapping, ColorSchemeMappingOverrides } from '../types' +import { ColorSchemeMapping, ColorSchemeMappingOverrides } from './types' export const extendColorScheme = ( colorScheme: ColorSchemeMapping, diff --git a/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts b/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts index 84b0bad8fb..30734dbd46 100644 --- a/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts @@ -1,13 +1,13 @@ import { DividerVariables } from '../../../teams/components/Divider/dividerVariables' +import { extendColorScheme } from '../../../colorUtils' export default (siteVars: any): Partial => ({ - colorScheme: { - ...siteVars.colorScheme, + colorScheme: extendColorScheme(siteVars.colorScheme, { primary: { foregroundDefault: siteVars.colors.primary[400], borderDefault: siteVars.colors.primary[400], }, - }, + }), textColor: siteVars.colors.grey[250], dividerColor: siteVars.colors.grey[550], }) diff --git a/packages/react/src/themes/teams/components/Label/labelVariables.ts b/packages/react/src/themes/teams/components/Label/labelVariables.ts index 04d645ef21..75c5febbd7 100644 --- a/packages/react/src/themes/teams/components/Label/labelVariables.ts +++ b/packages/react/src/themes/teams/components/Label/labelVariables.ts @@ -1,6 +1,6 @@ import { pxToRem } from '../../../../lib' import { SiteVariablesPrepared, ColorSchemeMapping } from '../../../types' -import { extendColorScheme } from '../../colorUtils' +import { extendColorScheme } from '../../../colorUtils' export interface LabelVariables { colorScheme: ColorSchemeMapping From 3cdac0b9567ef100f6352353012b70eccfb0862e Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 17 Apr 2019 10:28:07 +0200 Subject: [PATCH 083/118] -added colors guide -moved the colors guide from prototypes to guides --- docs/src/components/ColorBox.tsx | 4 +- docs/src/components/ColorSchemes.tsx | 47 +++++ docs/src/components/Sidebar/Sidebar.tsx | 14 +- docs/src/views/ColorPalette.tsx | 221 +++++++++++++++++++----- docs/src/views/Layout.tsx | 2 +- docs/src/views/ThemingExamples.tsx | 2 +- 6 files changed, 231 insertions(+), 59 deletions(-) create mode 100644 docs/src/components/ColorSchemes.tsx diff --git a/docs/src/components/ColorBox.tsx b/docs/src/components/ColorBox.tsx index 361114d2b1..07515cf3df 100644 --- a/docs/src/components/ColorBox.tsx +++ b/docs/src/components/ColorBox.tsx @@ -48,7 +48,7 @@ export const colorBoxStyles: ComponentSlotStylesInput({ render={(active, onClick) => (
- + {value && } {value}
diff --git a/docs/src/components/ColorSchemes.tsx b/docs/src/components/ColorSchemes.tsx new file mode 100644 index 0000000000..587928867f --- /dev/null +++ b/docs/src/components/ColorSchemes.tsx @@ -0,0 +1,47 @@ +import * as React from 'react' +import { createComponent, ComponentSlotStylesInput, ThemePrepared, Grid } from '@stardust-ui/react' + +import ColorBox from './ColorBox' + +type ColorVariantsProps = { + name?: string + themes?: ThemePrepared[] +} + +export const colorVariantsStyles: ComponentSlotStylesInput = { + root: { + border: '1px solid transparent', + borderRadius: '.25rem', + overflow: 'hidden', + }, +} + +const ColorSchemes = createComponent({ + displayName: 'ColorVariants', + render: ({ name, themes, stardust: { classes } }) => { + if (themes.length === 0) return <> + const schema = themes[0].siteVariables.colorScheme[name] + const elements = [] + + Object.keys(schema).forEach(key => { + let isFirstElement: boolean = true + for (let i = 0; i < themes.length; i++) { + if (isFirstElement) { + elements.push() + isFirstElement = false + } + const value = themes[i].siteVariables.colorScheme[name][key] + elements.push() + } + }) + return ( +
+ + {elements} + +
+ ) + }, +}) + +export default ColorSchemes diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx index 5ca2a476e1..dade7fca7e 100644 --- a/docs/src/components/Sidebar/Sidebar.tsx +++ b/docs/src/components/Sidebar/Sidebar.tsx @@ -316,6 +316,13 @@ class Sidebar extends React.Component { to: '/theming-examples', styles: menuItemStyles, }, + { + key: 'colorpalette', + content: 'Colors', + as: NavLink, + to: '/color-palette', + styles: menuItemStyles, + }, { key: 'layout', content: 'Layout', @@ -437,13 +444,6 @@ class Sidebar extends React.Component { to: '/menu-button', styles: menuItemStyles, }, - { - key: 'colorpalette', - content: 'Color Palette', - as: NavLink, - to: '/color-palette', - styles: menuItemStyles, - }, { key: 'divider4', kind: 'divider', diff --git a/docs/src/views/ColorPalette.tsx b/docs/src/views/ColorPalette.tsx index 02cfb1e5ee..81745fddb2 100644 --- a/docs/src/views/ColorPalette.tsx +++ b/docs/src/views/ColorPalette.tsx @@ -1,11 +1,44 @@ -import { Provider, ProviderConsumer, Grid, Header } from '@stardust-ui/react' -import * as faker from 'faker' +import { + Provider, + ProviderConsumer, + Grid, + Header, + Box, + Text, + mergeThemes, + themes, +} from '@stardust-ui/react' import * as _ from 'lodash' import * as React from 'react' import ColorBox, { colorBoxStyles, colorBoxVariables } from 'docs/src/components/ColorBox' import ColorVariants, { colorVariantsStyles } from 'docs/src/components/ColorVariants' import DocPage from 'docs/src/components/DocPage/DocPage' +import ExampleSnippet from '../components/ExampleSnippet' +import ColorSchemes from 'docs/src/components/ColorSchemes' +import GuidesNavigationFooter from 'docs/src/components/GuidesNavigationFooter' + +const theme = { + componentStyles: { + Box: { + root: ({ theme: { siteVariables } }) => { + const colorScheme = siteVariables.colorScheme + return { + textAlign: 'center', + padding: '5px', + color: colorScheme.primary.foregroundDefault, + backgroundColor: colorScheme.primary.backgroundDefault, + border: `1px solid ${colorScheme.primary.borderDefault}`, + ':hover': { + color: colorScheme.primary.foregroundHover, + backgroundColor: colorScheme.primary.backgroundHover, + border: `1px solid ${colorScheme.primary.borderHover}`, + }, + } + }, + }, + }, +} const ColorPalette = () => ( ( }} > ( - + render={({ + siteVariables: { colors, contextualColors, emphasisColors, naturalColors, colorScheme }, + }) => ( +
Introduction

- The color palette for a theme has many requirements and constraints. There is a need to - be intentional and functional with color use. We analyzed existing frameworks and picked - the best ideas from them. -

-

- Each theme should match our color palette types fully. This will allow you to use our - theming features completely and keep your palette structured. + The organizing of the colors for an application has many requirements and constraints. + There is a need to be intentional and functional with color use. We analyzed existing + frameworks and picked the best ideas from them. In Stardust, the colors mechanisms are + completely based on the siteVariables, we don't have any additional API specific to the + colors. There are two things important in order for colors to work transparently when + the theme switching is in play: +

    +
  • + color palette - central place for all colors available in the application +
    • +
  • + color schema - design tokens for all colors used in the application that + should be appropriately map in all themes +
    • +
+ Be aware that everything that follows is our recommendation, not requirement (everything + will work even if you decide to structure the palette and schemas differently in your + theme)

+
Color palette
+

We have structured the color palette in several categories.

-
Primitive colors
+
Primitive colors

This part of the palette includes only black and white colors, we decided to separate by semantical ideas. There is nothing blacker than black and nothing whiter @@ -47,68 +95,60 @@ const ColorPalette = () => ( {_.map(['black', 'white'], color => ( - // TODO:try to use Segment here

))} -
Natural colors
+
Natural colors

- This part of palette includes nine colors (note, this number might be different for - non-default theme) that are the most frequently used among popular frameworks. Each - color includes ten gradients, this allows us to satisfy most common needs. This decision - is experienced from Material UI and allows to define more variants than semantical - naming (lightest, lighter, etc.). + This part of palette includes several colors from the set of colors that are the most + frequently used among popular frameworks (blue, green, grey, orange, pink, purple, teal, + red, yellow). Each color includes at least ten gradients, this allows us to satisfy most + common needs. This decision is experienced from Material UI and allows to define more + variants than semantical naming (lightest, lighter, etc.). The reason why we don't + require all colors to be implemented, is just becase some application may not use some + of these colors, so we don't want to add overheader for defining things which are not + necessary.

{_.map(naturalColors, (variants, color) => (
- +
))} -
Emphasis colors
-

This part of the palette includes primary and secondary colors.

+
Emphasis colors
+

This part of the palette may includes primary and secondary colors.

{_.map(emphasisColors, (variants, color) => (
- -
- ))} - - -
Contextual colors
-

- Contextual colors can be used to provide "meaning through colors", however they can be - just aliases for natural colors. -

- - - {_.map(contextualColors, (variants, color) => ( -
- +
))} -
Text colors
-

- Text variants are also provided as a separate color because in the most cases it's not - correct to use grey color for text. -

+ {/*
Contextual colors
*/} + {/*

*/} + {/*Contextual colors can be used to provide "meaning through colors", however they can be*/} + {/*just aliases for natural colors. You can think here of names like: danger, success, warning,*/} + {/*info, text colors etc.*/} + {/*

*/} - {_.map(colors.text, (color, variant) => ( - - {`${variant} | ${faker.lorem.sentence(4)}`} - - ))} + {/**/} + {/*{_.map(contextualColors, (variants, color) => (*/} + {/*
*/} + {/**/} + {/*
*/} + {/*))}*/} + {/**/} -
Color variables
+
All colors
+

This are all colors available in the color palette.

{_.map( { ...emphasisColors, ...contextualColors, ...naturalColors }, @@ -119,6 +159,91 @@ const ColorPalette = () => ( ), )} + +
Color scheme
+

+ Now that we know how the color palette is defined, let's see how we can use these + values, so that they will work correctly when different themes will be applied. As part + of the each theme, we are defining color scheme, which will define the design + tokens usages of the different colors from the palette, that make sense for the + developers. For example, let's take a look of one color scheme defined for primary in + light theme and high contrast theme. +

+ +
+
+
+ + + + + +

+ With this example, we can see that the user can safely use any token from the color + scheme in the styles consistently, as those will be mapped to the correct values in all + themes. The following example will ilustrate this: +

+ + { + const colorScheme = siteVariables.colorScheme + return { + color: colorScheme.primary.foregroundDefault, + backgroundColor: colorScheme.primary.backgroundDefault, + border: '1px solid ' + colorScheme.primary.borderDefault, + ':hover': { + color: colorScheme.primary.foregroundHover, + backgroundColor: colorScheme.primary.backgroundHover, + border: '1px solid ' + colorScheme.primary.borderHover, + }, + } + }, + }, + }, + } + + const colorSchemeExample = () => ( + + + + + + + + + ) + + export default btnExample + `} + render={() => ( + + + + + + + + + )} + /> + +

+ The color scheme is just a recommendation of how the color design tokens can be + organized. If your design team has provided you with different names for the design + tokens, you can use those, but introducing values in the siteVariables, just be sure + that they will be mapped to the correct color from the palette in each theme. +

+ )} /> diff --git a/docs/src/views/Layout.tsx b/docs/src/views/Layout.tsx index 608e3f2e40..e68f6654d3 100644 --- a/docs/src/views/Layout.tsx +++ b/docs/src/views/Layout.tsx @@ -210,7 +210,7 @@ export default () => ( Each of these examples is optimized in terms of DOM elements rendered. diff --git a/docs/src/views/ThemingExamples.tsx b/docs/src/views/ThemingExamples.tsx index 3fa907e8bc..d211bc7b02 100644 --- a/docs/src/views/ThemingExamples.tsx +++ b/docs/src/views/ThemingExamples.tsx @@ -369,7 +369,7 @@ export default () => ( ) From 0eaba88348c3f23ab71d7afdc2445dcb2554b423 Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 17 Apr 2019 13:47:15 +0200 Subject: [PATCH 084/118] -improved color picking in order to avoid null pointers --- .../themes/base/components/Text/textStyles.ts | 2 +- packages/react/src/themes/teams/colors.ts | 21 +++++++++++++++++++ .../teams/components/Label/labelStyles.ts | 3 ++- .../components/Menu/menuDividerStyles.ts | 3 ++- .../teams/components/Menu/menuItemStyles.ts | 11 ++++------ .../teams/components/Menu/menuStyles.ts | 3 ++- .../teams/components/Segment/segmentStyles.ts | 3 ++- .../teams/components/Text/textStyles.ts | 3 ++- 8 files changed, 36 insertions(+), 13 deletions(-) diff --git a/packages/react/src/themes/base/components/Text/textStyles.ts b/packages/react/src/themes/base/components/Text/textStyles.ts index 9ad43f98f3..f036337ad9 100644 --- a/packages/react/src/themes/base/components/Text/textStyles.ts +++ b/packages/react/src/themes/base/components/Text/textStyles.ts @@ -21,7 +21,7 @@ export default { }, variables: v, }: ComponentStyleFunctionParam): ICSSInJSStyle => { - const colors = v.colorScheme[color || 'default'] + const colors = v.colorScheme[color] || v.colorScheme['default'] return { ...(color && { color: colors.foregroundDefault, diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index 8b5e0bea69..63e7d33ada 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -272,3 +272,24 @@ export const colorScheme: ColorSchemeMapping = { red: createColorScheme('red'), yellow: createColorScheme('yellow', lightColorOverrides), } + +export const availableColors = [ + 'default', + 'black', + 'white', + 'primary', + 'grey', + 'red', + 'yellow', + 'green', + 'pink', + 'orange', +] + +export const isValidColor = (color: string): boolean => { + return color && availableColors.indexOf(color) >= 0 +} + +export const getColorSchemeKey = (color: string, primary?: boolean): string => { + return color && isValidColor(color) ? color : primary ? 'primary' : 'default' +} diff --git a/packages/react/src/themes/teams/components/Label/labelStyles.ts b/packages/react/src/themes/teams/components/Label/labelStyles.ts index 6179fa7f8d..448455d064 100644 --- a/packages/react/src/themes/teams/components/Label/labelStyles.ts +++ b/packages/react/src/themes/teams/components/Label/labelStyles.ts @@ -4,10 +4,11 @@ import { pxToRem } from '../../../../lib' import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' import { LabelProps } from '../../../../components/Label/Label' import { LabelVariables } from './labelVariables' +import { getColorSchemeKey } from '../../colors' const labelStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => { - const colors = v.colorScheme[p.color || 'default'] + const colors = v.colorScheme[getColorSchemeKey(p.color)] return { display: 'inline-flex', diff --git a/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts b/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts index 5e87e05252..d84aa569e3 100644 --- a/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts @@ -1,10 +1,11 @@ import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' import { MenuDividerProps } from '../../../../components/Menu/MenuDivider' import { MenuVariables } from './menuVariables' +import { getColorSchemeKey } from '../../colors' const menuDividerStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => { - const colorScheme = v.colorScheme[p.color ? p.color : p.primary ? 'primary' : 'default'] + const colorScheme = v.colorScheme[getColorSchemeKey(p.color, p.primary)] const borderColor = p.primary ? v.primaryBorderColor : v.borderColor || colorScheme.borderDefault diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index bc42b8e5c3..fedafdfcac 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -3,6 +3,7 @@ import { ComponentSlotStylesInput, ICSSInJSStyle, ColorScheme } from '../../../t import { MenuVariables } from './menuVariables' import { MenuItemProps, MenuItemState } from '../../../../components/Menu/MenuItem' import { teamsIconClassNames } from '../Icon/svg' +import { getColorSchemeKey } from '../../colors' type MenuItemPropsAndState = MenuItemProps & MenuItemState @@ -135,15 +136,11 @@ const pointingBeak = ({ props, variables: v, colorScheme }): ICSSInJSStyle => { } } -const getColorSchemeKey = (props: MenuItemProps): string => { - const { color, primary } = props - return color || (primary ? 'primary' : 'default') -} - const menuItemStyles: ComponentSlotStylesInput = { wrapper: ({ props, variables: v, theme }): ICSSInJSStyle => { const { active, + color, disabled, iconOnly, isFromKeyboard, @@ -155,7 +152,7 @@ const menuItemStyles: ComponentSlotStylesInput { const { iconOnly, fluid, pointing, pills, primary, color, underlined, vertical, submenu } = p - const colorScheme = v.colorScheme[color ? color : primary ? 'primary' : 'default'] + const colorScheme = v.colorScheme[getColorSchemeKey(color, primary)] return { display: 'flex', diff --git a/packages/react/src/themes/teams/components/Segment/segmentStyles.ts b/packages/react/src/themes/teams/components/Segment/segmentStyles.ts index 532b012fd6..9f358cffd7 100644 --- a/packages/react/src/themes/teams/components/Segment/segmentStyles.ts +++ b/packages/react/src/themes/teams/components/Segment/segmentStyles.ts @@ -1,10 +1,11 @@ import { SegmentProps } from '../../../../components/Segment/Segment' import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types' import { SegmentVariables } from './segmentVariables' +import { getColorSchemeKey } from '../../colors' const segmentStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => { - const colors = v.colorScheme[p.color || 'default'] + const colors = v.colorScheme[getColorSchemeKey(p.color)] return { padding: v.padding, diff --git a/packages/react/src/themes/teams/components/Text/textStyles.ts b/packages/react/src/themes/teams/components/Text/textStyles.ts index 0157fc1270..389ede7d32 100644 --- a/packages/react/src/themes/teams/components/Text/textStyles.ts +++ b/packages/react/src/themes/teams/components/Text/textStyles.ts @@ -1,13 +1,14 @@ import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types' import { TeamsTextVariables } from './textVariables' import { TextProps } from '../../../../components/Text/Text' +import { getColorSchemeKey } from '../../colors' export default { root: ({ props: { atMention, color, important, timestamp }, variables: v, }: ComponentStyleFunctionParam): ICSSInJSStyle => { - const colors = v.colorScheme[color || 'default'] + const colors = v.colorScheme[getColorSchemeKey(color)] return { ...(color && { color: colors.foregroundDefault, From 9109c48a841832cc40ed9dd793b513309e2b6458 Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 17 Apr 2019 14:45:33 +0200 Subject: [PATCH 085/118] -fixed typo --- docs/src/views/ColorPalette.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/views/ColorPalette.tsx b/docs/src/views/ColorPalette.tsx index 81745fddb2..a4518e74f3 100644 --- a/docs/src/views/ColorPalette.tsx +++ b/docs/src/views/ColorPalette.tsx @@ -171,8 +171,8 @@ const ColorPalette = () => (

-
-
+
+
From bd3140060a3dfcf4d31ac79f570ed0dc8a060e5c Mon Sep 17 00:00:00 2001 From: manajdov Date: Wed, 17 Apr 2019 14:54:52 +0200 Subject: [PATCH 086/118] -removed the added md file (will be added as a separate PR) --- DESIGN_CONSIDERATIONS.md | 77 ---------------------------------------- 1 file changed, 77 deletions(-) delete mode 100644 DESIGN_CONSIDERATIONS.md diff --git a/DESIGN_CONSIDERATIONS.md b/DESIGN_CONSIDERATIONS.md deleted file mode 100644 index 519d2d1532..0000000000 --- a/DESIGN_CONSIDERATIONS.md +++ /dev/null @@ -1,77 +0,0 @@ -## Optimize APIs and patterns for developers over designers - -Why? -- There are thousands of them. The cost of features and bugs is far greater. - -How? -- Prefer readable and meaningful typed intellisense theme information, opposed to cryptic or unorganized theme information that requires lookups or design assistance to understand. -- Variable names should always resolve to the correct value for the current theme, automatically. -- All theme values should appear in intellisense everywhere they are accessible. Merge variable values, for instance, should appear in the variable prop of components. - -## No site variables in style functions - -Why? -Prevent developers from assigning colors which breaks theme switching. - -How? -- Consider hoisting colors out of site variables. -- Consumers define component variable object for each theme type (light/dark/contrast). -- Rely on consistent and comprehensive component variables and remove site variables from style arg all together. - -## If possible, allow design to own the theme - -Goals -- Design doesn't want to mock up dark / high contrast -- Ease of adding new themes types, (default, dark, ...someNewThing) - -Why? -- Time waste in transferring design updates. Design owns the responsibility but does not have the capability of updating styles. -- Developers should not try to (or be allowed) to do design work. It is slow and often comes out less than ideal. - -How? -- Try to remove processes in getting design updates into code. Ideally, design changes would safely appear in applications. - -Optimizations for designers at no expense to developers: -- Keep names consistent for sanity and learning what they mean. gray02 is always the same hex value, regardless of theme/usage. - - -*** - -### Style Problems - -- Style functions have complex deeply nested logic that is hard to update/maintain -- Variable files are full of dead variables that do nothing in the styles -- Cannot generate stylesheets due to lack of knowledge about what props trigger which style function code paths - -### Style Solution - -Write styles as cascading map of props object matchers to style objects. Compute and assign in order. -- Flattens stylesheets, removes all logic (since logic is prop based only) -- Enables automated unit testing of styles to ensure styles change on variable change. -- Enables computing css selectors for each style in order to generate a flat stylesheet. - -```jsx -const menuStyles = { - root: ({ props, variables }) => { - - return [ - [{ primary: true, active: true, underlined: true }, { - display: 'block', - color: variables.colors[props.color], - }], - - // Equivalent to CSS: - // .primary.active.underlined { - // display: block; - // color: 'purple'; - // } - ] - } -} -``` - -## Tests to add - -Resolve theme, throw on duplicate variable definitions: -- Dark theme defines text success color the same as the light theme it inherited from -- Resolve style functions, assert changes to each variable result in changed style (no unused variables) From fa6ffeac9d733d83fc67403a7167b553135924d3 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 18 Apr 2019 09:32:35 +0200 Subject: [PATCH 087/118] -removed Text color from teams theme -improvements of the Colors guide --- docs/src/views/ColorPalette.tsx | 55 +++++++------------ packages/react/src/themes/teams/colors.ts | 13 +---- .../react/src/themes/teams/siteVariables.ts | 9 +-- 3 files changed, 22 insertions(+), 55 deletions(-) diff --git a/docs/src/views/ColorPalette.tsx b/docs/src/views/ColorPalette.tsx index a4518e74f3..6a6dd88799 100644 --- a/docs/src/views/ColorPalette.tsx +++ b/docs/src/views/ColorPalette.tsx @@ -58,9 +58,7 @@ const ColorPalette = () => ( }} > ( + render={({ siteVariables: { colors, emphasisColors, naturalColors } }) => (
Introduction

@@ -68,8 +66,11 @@ const ColorPalette = () => ( There is a need to be intentional and functional with color use. We analyzed existing frameworks and picked the best ideas from them. In Stardust, the colors mechanisms are completely based on the siteVariables, we don't have any additional API specific to the - colors. There are two things important in order for colors to work transparently when - the theme switching is in play: + colors. +

+

+ There are two things important in order for colors to work transparently when the theme + switching is in play:

  • color palette - central place for all colors available in the application @@ -132,42 +133,24 @@ const ColorPalette = () => ( ))} - {/*
    Contextual colors
    */} - {/*

    */} - {/*Contextual colors can be used to provide "meaning through colors", however they can be*/} - {/*just aliases for natural colors. You can think here of names like: danger, success, warning,*/} - {/*info, text colors etc.*/} - {/*

    */} - - {/**/} - {/*{_.map(contextualColors, (variants, color) => (*/} - {/*
    */} - {/**/} - {/*
    */} - {/*))}*/} - {/*    */} -
    All colors

    This are all colors available in the color palette.

    - {_.map( - { ...emphasisColors, ...contextualColors, ...naturalColors }, - (variants, color) => ( -
    - -
    - ), - )} + {_.map({ ...emphasisColors, ...naturalColors }, (variants, color) => ( +
    + +
    + ))}
    Color scheme

    Now that we know how the color palette is defined, let's see how we can use these values, so that they will work correctly when different themes will be applied. As part - of the each theme, we are defining color scheme, which will define the design - tokens usages of the different colors from the palette, that make sense for the - developers. For example, let's take a look of one color scheme defined for primary in - light theme and high contrast theme. + of each theme, we are defining color scheme, which will define the design tokens + usages of the different colors from the palette, that make sense for the developers. For + example, let's take a look of one color scheme defined for primary in light theme and + high contrast theme.

    @@ -236,9 +219,11 @@ const ColorPalette = () => (

    The color scheme is just a recommendation of how the color design tokens can be - organized. If your design team has provided you with different names for the design - tokens, you can use those, but introducing values in the siteVariables, just be sure - that they will be mapped to the correct color from the palette in each theme. + organized. If neeeded, you can add multiple color schemes per theme, like inverted, or + specific to the parts of the application that looks different. If your design team has + provided you with different names for the design tokens, you can use those, by + introducing values in the siteVariables, just be sure that they will be mapped to the + correct color from the palette in each theme.

    Date: Thu, 18 Apr 2019 12:51:46 +0200 Subject: [PATCH 088/118] -addressing comments on the PR --- docs/src/components/ColorBox.tsx | 9 +++++++- docs/src/components/ColorSchemes.tsx | 28 +++++++++++++++++++++---- docs/src/views/ColorPalette.tsx | 31 +++++++++++++++++++--------- 3 files changed, 53 insertions(+), 15 deletions(-) diff --git a/docs/src/components/ColorBox.tsx b/docs/src/components/ColorBox.tsx index 07515cf3df..75f5967b3e 100644 --- a/docs/src/components/ColorBox.tsx +++ b/docs/src/components/ColorBox.tsx @@ -1,4 +1,10 @@ -import { ComponentSlotStylesInput, createComponent, Icon, ICSSInJSStyle } from '@stardust-ui/react' +import { + ComponentSlotStylesInput, + ComponentSlotStyle, + createComponent, + Icon, + ICSSInJSStyle, +} from '@stardust-ui/react' import * as Color from 'color' import * as _ from 'lodash' import * as React from 'react' @@ -11,6 +17,7 @@ type ColorBoxProps = { rounded?: boolean size?: 'small' | 'normal' | 'big' value: string + styles?: ComponentSlotStyle } type ColorBoxVariables = { diff --git a/docs/src/components/ColorSchemes.tsx b/docs/src/components/ColorSchemes.tsx index 587928867f..b5de2783a5 100644 --- a/docs/src/components/ColorSchemes.tsx +++ b/docs/src/components/ColorSchemes.tsx @@ -1,11 +1,20 @@ import * as React from 'react' -import { createComponent, ComponentSlotStylesInput, ThemePrepared, Grid } from '@stardust-ui/react' +import * as _ from 'lodash' +import { + createComponent, + ComponentSlotStylesInput, + ThemePrepared, + Grid, + ShorthandValue, + Header, +} from '@stardust-ui/react' import ColorBox from './ColorBox' type ColorVariantsProps = { name?: string themes?: ThemePrepared[] + headers?: ShorthandValue[] } export const colorVariantsStyles: ComponentSlotStylesInput = { @@ -18,7 +27,7 @@ export const colorVariantsStyles: ComponentSlotStylesInput = const ColorSchemes = createComponent({ displayName: 'ColorVariants', - render: ({ name, themes, stardust: { classes } }) => { + render: ({ name, themes, headers, stardust: { classes } }) => { if (themes.length === 0) return <> const schema = themes[0].siteVariables.colorScheme[name] const elements = [] @@ -27,16 +36,27 @@ const ColorSchemes = createComponent({ let isFirstElement: boolean = true for (let i = 0; i < themes.length; i++) { if (isFirstElement) { - elements.push() + elements.push( + , + ) isFirstElement = false } const value = themes[i].siteVariables.colorScheme[name][key] elements.push() } }) + + const columns = `auto ${_.times(themes.length, () => '180px').join(' ')}` return (
    - + + {headers && headers.map(header => Header.create(header))} {elements}
    diff --git a/docs/src/views/ColorPalette.tsx b/docs/src/views/ColorPalette.tsx index 6a6dd88799..a0dadfd28d 100644 --- a/docs/src/views/ColorPalette.tsx +++ b/docs/src/views/ColorPalette.tsx @@ -152,14 +152,25 @@ const ColorPalette = () => ( example, let's take a look of one color scheme defined for primary in light theme and high contrast theme.

    - -
    -
    -
    - - - - + +

    With this example, we can see that the user can safely use any token from the color @@ -192,7 +203,7 @@ const ColorPalette = () => ( }, } - const colorSchemeExample = () => ( + const ColorSchemeExample = () => ( @@ -203,7 +214,7 @@ const ColorPalette = () => ( ) - export default btnExample + export default ColorSchemeExample `} render={() => ( From ecc7e97cf15b398d452b5bdf88e882b57e6a16dc Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 18 Apr 2019 13:17:27 +0200 Subject: [PATCH 089/118] -addressing more comments on PR --- docs/src/components/ColorSchemes.tsx | 35 +++++++++++----------------- docs/src/views/ColorPalette.tsx | 30 +++++++++++++----------- 2 files changed, 30 insertions(+), 35 deletions(-) diff --git a/docs/src/components/ColorSchemes.tsx b/docs/src/components/ColorSchemes.tsx index b5de2783a5..44a9ad677a 100644 --- a/docs/src/components/ColorSchemes.tsx +++ b/docs/src/components/ColorSchemes.tsx @@ -29,28 +29,21 @@ const ColorSchemes = createComponent({ displayName: 'ColorVariants', render: ({ name, themes, headers, stardust: { classes } }) => { if (themes.length === 0) return <> - const schema = themes[0].siteVariables.colorScheme[name] - const elements = [] - Object.keys(schema).forEach(key => { - let isFirstElement: boolean = true - for (let i = 0; i < themes.length; i++) { - if (isFirstElement) { - elements.push( - , - ) - isFirstElement = false - } - const value = themes[i].siteVariables.colorScheme[name][key] - elements.push() - } - }) + const colorSchemes = _.map(themes, theme => theme.siteVariables.colorScheme[name]) + + const elements = _.flatMap(_.head(colorSchemes), (i, token) => [ + , + ..._.map(colorSchemes, (colorScheme, i) => ( + + )), + ]) const columns = `auto ${_.times(themes.length, () => '180px').join(' ')}` return ( diff --git a/docs/src/views/ColorPalette.tsx b/docs/src/views/ColorPalette.tsx index a0dadfd28d..f687069e12 100644 --- a/docs/src/views/ColorPalette.tsx +++ b/docs/src/views/ColorPalette.tsx @@ -65,21 +65,23 @@ const ColorPalette = () => ( The organizing of the colors for an application has many requirements and constraints. There is a need to be intentional and functional with color use. We analyzed existing frameworks and picked the best ideas from them. In Stardust, the colors mechanisms are - completely based on the siteVariables, we don't have any additional API specific to the - colors. + completely based on the siteVariables, we don't have any additional API + specific to the colors.

    There are two things important in order for colors to work transparently when the theme switching is in play: -

      -
    • - color palette - central place for all colors available in the application -
      • -
    • - color schema - design tokens for all colors used in the application that - should be appropriately map in all themes -
      • -
    +

    +
      +
    • + color palette - central place for all colors available in the application +
      • +
    • + color schema - design tokens for all colors used in the application that should + be appropriately map in all themes +
      • +
    +

    Be aware that everything that follows is our recommendation, not requirement (everything will work even if you decide to structure the palette and schemas differently in your theme) @@ -230,11 +232,11 @@ const ColorPalette = () => (

    The color scheme is just a recommendation of how the color design tokens can be - organized. If neeeded, you can add multiple color schemes per theme, like inverted, or + organized. If needed, you can add multiple color schemes per theme, like inverted, or specific to the parts of the application that looks different. If your design team has provided you with different names for the design tokens, you can use those, by - introducing values in the siteVariables, just be sure that they will be mapped to the - correct color from the palette in each theme. + introducing values in the siteVariables, just be sure that they will be + mapped to the correct color from the palette in each theme.

    Date: Thu, 18 Apr 2019 14:24:28 +0200 Subject: [PATCH 090/118] -addressing comments on the PR --- docs/src/views/ColorPalette.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/views/ColorPalette.tsx b/docs/src/views/ColorPalette.tsx index f687069e12..3ead1ea369 100644 --- a/docs/src/views/ColorPalette.tsx +++ b/docs/src/views/ColorPalette.tsx @@ -177,7 +177,7 @@ const ColorPalette = () => (

    With this example, we can see that the user can safely use any token from the color scheme in the styles consistently, as those will be mapped to the correct values in all - themes. The following example will ilustrate this: + themes. The following example will illustrate this:

    ( return { color: colorScheme.primary.foregroundDefault, backgroundColor: colorScheme.primary.backgroundDefault, - border: '1px solid ' + colorScheme.primary.borderDefault, + border: \`1px solid \${colorScheme.primary.borderDefault}\`, ':hover': { color: colorScheme.primary.foregroundHover, backgroundColor: colorScheme.primary.backgroundHover, - border: '1px solid ' + colorScheme.primary.borderHover, + border: \`1px solid \${colorScheme.primary.borderHover}\`, }, } }, From 4503e8e97212e6381de0b5db894c56994f0b09ca Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 18 Apr 2019 15:56:53 +0200 Subject: [PATCH 091/118] -fixed some menu style sin hc theme --- .../components/Menu/menuItemStyles.ts | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts index c21f3f15c3..fafac3034a 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts @@ -12,6 +12,7 @@ const menuItemStyles: ComponentSlotStylesInput Date: Thu, 18 Apr 2019 16:17:33 +0200 Subject: [PATCH 092/118] -fixed text in color palette guide --- docs/src/views/ColorPalette.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/views/ColorPalette.tsx b/docs/src/views/ColorPalette.tsx index 3ead1ea369..df4f396b9c 100644 --- a/docs/src/views/ColorPalette.tsx +++ b/docs/src/views/ColorPalette.tsx @@ -151,8 +151,8 @@ const ColorPalette = () => ( values, so that they will work correctly when different themes will be applied. As part of each theme, we are defining color scheme, which will define the design tokens usages of the different colors from the palette, that make sense for the developers. For - example, let's take a look of one color scheme defined for primary in light theme and - high contrast theme. + example, let's take a look of one color scheme defined for primary in Teams light and + high contrast themes.

    Date: Thu, 18 Apr 2019 16:26:24 +0200 Subject: [PATCH 093/118] -replaced getColorSchemeKey with getColorScheme --- packages/react/src/themes/teams/colors.ts | 8 ++++++++ .../src/themes/teams/components/Label/labelStyles.ts | 4 ++-- .../src/themes/teams/components/Menu/menuDividerStyles.ts | 4 ++-- .../src/themes/teams/components/Menu/menuItemStyles.ts | 6 +++--- .../react/src/themes/teams/components/Menu/menuStyles.ts | 4 ++-- .../src/themes/teams/components/Segment/segmentStyles.ts | 4 ++-- .../react/src/themes/teams/components/Text/textStyles.ts | 4 ++-- 7 files changed, 21 insertions(+), 13 deletions(-) diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index e4969df830..ae536bc75e 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -282,3 +282,11 @@ export const isValidColor = (color: string): boolean => { export const getColorSchemeKey = (color: string, primary?: boolean): string => { return color && isValidColor(color) ? color : primary ? 'primary' : 'default' } + +export const getColorScheme = ( + colorScheme: ColorSchemeMapping, + color: string, + primary?: boolean, +) => { + return colorScheme[getColorSchemeKey(color, primary)] +} diff --git a/packages/react/src/themes/teams/components/Label/labelStyles.ts b/packages/react/src/themes/teams/components/Label/labelStyles.ts index 448455d064..0e506cadf8 100644 --- a/packages/react/src/themes/teams/components/Label/labelStyles.ts +++ b/packages/react/src/themes/teams/components/Label/labelStyles.ts @@ -4,11 +4,11 @@ import { pxToRem } from '../../../../lib' import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' import { LabelProps } from '../../../../components/Label/Label' import { LabelVariables } from './labelVariables' -import { getColorSchemeKey } from '../../colors' +import { getColorScheme } from '../../colors' const labelStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => { - const colors = v.colorScheme[getColorSchemeKey(p.color)] + const colors = getColorScheme(v.colorScheme, p.color) return { display: 'inline-flex', diff --git a/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts b/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts index d84aa569e3..c1553c685c 100644 --- a/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts @@ -1,11 +1,11 @@ import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' import { MenuDividerProps } from '../../../../components/Menu/MenuDivider' import { MenuVariables } from './menuVariables' -import { getColorSchemeKey } from '../../colors' +import { getColorScheme } from '../../colors' const menuDividerStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => { - const colorScheme = v.colorScheme[getColorSchemeKey(p.color, p.primary)] + const colorScheme = getColorScheme(v.colorScheme, p.color, p.primary) const borderColor = p.primary ? v.primaryBorderColor : v.borderColor || colorScheme.borderDefault diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index fedafdfcac..2fd44e92d8 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -3,7 +3,7 @@ import { ComponentSlotStylesInput, ICSSInJSStyle, ColorScheme } from '../../../t import { MenuVariables } from './menuVariables' import { MenuItemProps, MenuItemState } from '../../../../components/Menu/MenuItem' import { teamsIconClassNames } from '../Icon/svg' -import { getColorSchemeKey } from '../../colors' +import { getColorScheme } from '../../colors' type MenuItemPropsAndState = MenuItemProps & MenuItemState @@ -152,7 +152,7 @@ const menuItemStyles: ComponentSlotStylesInput { const { iconOnly, fluid, pointing, pills, primary, color, underlined, vertical, submenu } = p - const colorScheme = v.colorScheme[getColorSchemeKey(color, primary)] + const colorScheme = getColorScheme(v.colorScheme, color, primary) return { display: 'flex', diff --git a/packages/react/src/themes/teams/components/Segment/segmentStyles.ts b/packages/react/src/themes/teams/components/Segment/segmentStyles.ts index 9f358cffd7..1c66c0e63c 100644 --- a/packages/react/src/themes/teams/components/Segment/segmentStyles.ts +++ b/packages/react/src/themes/teams/components/Segment/segmentStyles.ts @@ -1,11 +1,11 @@ import { SegmentProps } from '../../../../components/Segment/Segment' import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types' import { SegmentVariables } from './segmentVariables' -import { getColorSchemeKey } from '../../colors' +import { getColorScheme } from '../../colors' const segmentStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => { - const colors = v.colorScheme[getColorSchemeKey(p.color)] + const colors = getColorScheme(v.colorScheme, p.color) return { padding: v.padding, diff --git a/packages/react/src/themes/teams/components/Text/textStyles.ts b/packages/react/src/themes/teams/components/Text/textStyles.ts index 389ede7d32..564a25561a 100644 --- a/packages/react/src/themes/teams/components/Text/textStyles.ts +++ b/packages/react/src/themes/teams/components/Text/textStyles.ts @@ -1,14 +1,14 @@ import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types' import { TeamsTextVariables } from './textVariables' import { TextProps } from '../../../../components/Text/Text' -import { getColorSchemeKey } from '../../colors' +import { getColorScheme } from '../../colors' export default { root: ({ props: { atMention, color, important, timestamp }, variables: v, }: ComponentStyleFunctionParam): ICSSInJSStyle => { - const colors = v.colorScheme[getColorSchemeKey(color)] + const colors = getColorScheme(v.colorScheme, color) return { ...(color && { color: colors.foregroundDefault, From 19e2abcdbe4cacceebddc6184c225ad7df3c6739 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 18 Apr 2019 16:36:04 +0200 Subject: [PATCH 094/118] -fixed base theme Text's color scheme usage --- .../react/src/themes/base/components/Text/textStyles.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/react/src/themes/base/components/Text/textStyles.ts b/packages/react/src/themes/base/components/Text/textStyles.ts index f036337ad9..becfe9bfdc 100644 --- a/packages/react/src/themes/base/components/Text/textStyles.ts +++ b/packages/react/src/themes/base/components/Text/textStyles.ts @@ -21,11 +21,12 @@ export default { }, variables: v, }: ComponentStyleFunctionParam): ICSSInJSStyle => { - const colors = v.colorScheme[color] || v.colorScheme['default'] + const colors = v.colorScheme[color] return { - ...(color && { - color: colors.foregroundDefault, - }), + ...(color && + colors && { + color: colors.foregroundDefault, + }), // animations are not working with span, unless display is set to 'inline-block' ...(animation && as === 'span' && { From e433487e0ff456daaa625b3ae78813f862e54268 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 29 Apr 2019 14:54:46 +0200 Subject: [PATCH 095/118] -merge conflicts --- .../components/Alert/alertVariables.ts | 22 +++++++++---------- .../components/Input/inputVariables.ts | 4 ++-- .../components/Input/inputVariables.ts | 9 ++++---- .../teams/components/Alert/alertVariables.ts | 21 +++++++----------- .../teams/components/Input/inputVariables.ts | 8 +++---- 5 files changed, 29 insertions(+), 35 deletions(-) diff --git a/packages/react/src/themes/teams-dark/components/Alert/alertVariables.ts b/packages/react/src/themes/teams-dark/components/Alert/alertVariables.ts index 1950b2825f..63d32ce28e 100644 --- a/packages/react/src/themes/teams-dark/components/Alert/alertVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Alert/alertVariables.ts @@ -6,20 +6,20 @@ export default (siteVars: any): Partial => { borderColor: siteVars.gray09, color: siteVars.gray09, - dangerColor: '#f9526b', // red[200] when new color palette PR goes in - dangerBackgroundColor: '#3e1f25', // red[800] when new color palette PR goes in - dangerBorderColor: '#1E040A', // red[900] when new color palette PR goes in + dangerColor: siteVars.colors.red[200], + dangerBackgroundColor: siteVars.colors.red[800], + dangerBorderColor: siteVars.colors.red[900], - oofColor: '#ec6fae', // pink[200] when new color palette PR goes in - oofBackgroundColor: '#3e2d3b', // pink[800] when new color palette PR goes in - oofBorderColor: '#1f191d', // pink[900] when new color palette PR goes in + oofColor: siteVars.colors.pink[200], // pink[200] when new color palette PR goes in + oofBackgroundColor: siteVars.colors.pink[800], // pink[800] when new color palette PR goes in + oofBorderColor: siteVars.colors.pink[900], // pink[900] when new color palette PR goes in - infoColor: siteVars.gray02, - infoBackgroundColor: siteVars.gray09, - infoBorderColor: '#11100F', // gray[900] when new color palette PR goes in + infoColor: siteVars.colors.grey[250], + infoBackgroundColor: siteVars.colors.grey[550], + infoBorderColor: siteVars.colors.grey[900], urgentColor: siteVars.colors.white, - urgentBackgroundColor: siteVars.colors.red[900], - urgentBorderColor: siteVars.colors.red[900], + urgentBackgroundColor: siteVars.colors.red[400], + urgentBorderColor: siteVars.colors.red[400], } } diff --git a/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts b/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts index 615fea602c..84b5d8d3ea 100644 --- a/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts @@ -1,10 +1,10 @@ -import { InputVariables } from '../../../teams/components/Input/inputVariables' +import { InputVariables } from '../../../base/components/Input/inputVariables' export default (siteVars: any): Partial => { return { backgroundColor: siteVars.colors.grey[600], fontColor: siteVars.colors.grey[250], - inputFocusBorderBottomColor: siteVars.colors.primary[600], + inputFocusBorderColor: `transparent transparent ${siteVars.colors.primary[600]} transparent`, iconColor: siteVars.colors.grey[250], placeholderColor: siteVars.colors.grey[250], } diff --git a/packages/react/src/themes/teams-high-contrast/components/Input/inputVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Input/inputVariables.ts index 6480f71931..56fb2c22f7 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Input/inputVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Input/inputVariables.ts @@ -1,12 +1,11 @@ -import { pxToRem } from '../../../../lib' +import { InputVariables } from '../../../base/components/Input/inputVariables' -export default (siteVars: any) => { +export default (siteVars: any): Partial => { return { backgroundColor: siteVars.bodyBackground, - border: `${pxToRem(1)} solid ${siteVars.bodyColor}`, - boxShadow: `0 ${pxToRem(1)} 0 ${siteVars.accessibleYellow}`, + borderColor: siteVars.bodyColor, fontColor: siteVars.bodyColor, iconColor: siteVars.bodyColor, - inputFocusBorderBottomColor: siteVars.accessibleYellow, + inputFocusBorderColor: `transparent transparent ${siteVars.accessibleYellow} transparent`, } } diff --git a/packages/react/src/themes/teams/components/Alert/alertVariables.ts b/packages/react/src/themes/teams/components/Alert/alertVariables.ts index 2841b0bce5..7e09b32fc8 100644 --- a/packages/react/src/themes/teams/components/Alert/alertVariables.ts +++ b/packages/react/src/themes/teams/components/Alert/alertVariables.ts @@ -59,27 +59,22 @@ export default (siteVars: SiteVariablesPrepared): AlertVariables => { focusInnerBorderColor: siteVars.colors.white, focusOuterBorderColor: siteVars.colors.black, - dangerColor: siteVars.colors.red[400], // red[400] when new color palette PR goes in - dangerBackgroundColor: siteVars.colors.red[50], // red[50] when new color palette PR goes in - dangerBorderColor: siteVars.colors.red[100], // red[100] when new color palette PR goes in + dangerColor: siteVars.colors.red[400], + dangerBackgroundColor: siteVars.colors.red[50], + dangerBorderColor: siteVars.colors.red[100], oof: false, oofColor: siteVars.colors.pink[600], oofBackgroundColor: siteVars.colors.pink[50], oofBorderColor: siteVars.colors.pink[100], - // gray02 - infoColor: siteVars.gray02, - // gray09 - infoBackgroundColor: siteVars.gray09, - // gray08 - infoBorderColor: siteVars.gray08, + infoColor: siteVars.colors.grey[500], + infoBackgroundColor: siteVars.colors.grey[150], + infoBorderColor: siteVars.colors.grey[200], urgent: false, urgentColor: siteVars.colors.white, - // red - urgentBackgroundColor: siteVars.red, - // red - urgentBorderColor: siteVars.red, + urgentBackgroundColor: siteVars.colors.red[400], + urgentBorderColor: siteVars.colors.red[400], } } diff --git a/packages/react/src/themes/teams/components/Input/inputVariables.ts b/packages/react/src/themes/teams/components/Input/inputVariables.ts index cf2296fe8c..f2b07236b6 100644 --- a/packages/react/src/themes/teams/components/Input/inputVariables.ts +++ b/packages/react/src/themes/teams/components/Input/inputVariables.ts @@ -5,13 +5,13 @@ export default (siteVars): Partial => ({ borderColor: 'transparent', borderRadius: `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`, borderWidth: `0 0 ${pxToRem(2)} 0`, - backgroundColor: siteVars.gray10, + backgroundColor: siteVars.colors.grey[100], - fontColor: siteVars.gray02, + fontColor: siteVars.colors.grey[500], fontSize: siteVars.fontSizes.medium, iconColor: siteVars.bodyColor, - inputFocusBorderColor: `transparent transparent ${siteVars.colors.primary[500]} transparent`, + inputFocusBorderColor: `transparent transparent ${siteVars.colors.primary[600]} transparent`, inputFocusBorderRadius: `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`, - placeholderColor: siteVars.gray02, + placeholderColor: siteVars.colors.grey[500], }) From c37d6094995b9cc07cc6313dea941e787a2c2d97 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 29 Apr 2019 15:12:33 +0200 Subject: [PATCH 096/118] -resolved eslint error -fixed chat message styles dark theme --- packages/react/src/themes/colorUtils.ts | 2 +- .../themes/teams-dark/components/Chat/chatMessageVariables.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/themes/colorUtils.ts b/packages/react/src/themes/colorUtils.ts index 84d34a94c0..38570e2977 100644 --- a/packages/react/src/themes/colorUtils.ts +++ b/packages/react/src/themes/colorUtils.ts @@ -5,7 +5,7 @@ export const extendColorScheme = ( overrides: ColorSchemeMappingOverrides, ): ColorSchemeMapping => { let result = colorScheme - Object.keys(overrides).map(color => { + Object.keys(overrides).forEach(color => { result = { ...result, [color]: { diff --git a/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts index 9740e22888..88280018cb 100644 --- a/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts @@ -2,12 +2,12 @@ import { ChatMessageVariables } from '../../../teams/components/Chat/chatMessage export default (siteVars: any): Partial => { return { - // grey10? backgroundColor: siteVars.colors.grey[600], backgroundColorMine: siteVars.colors.primary[900], authorColor: siteVars.colors.grey[250], contentColor: siteVars.colors.white, color: siteVars.colors.white, + timestampColorMine: siteVars.colors.grey[250], contentFocusOutlineColor: siteVars.colors.primary[600], hasMentionNubbinColor: siteVars.colors.orange[300], isImportantColor: siteVars.colors.red[300], From a506306f09e01e5cf45978689fc398ebca328773 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 30 Apr 2019 13:04:36 +0200 Subject: [PATCH 097/118] -updated color scheme -fixed menu issues --- .../react/src/themes/teams-dark/colors.ts | 153 +++++++++++--- .../components/Menu/menuVariables.ts | 36 +++- .../src/themes/teams-high-contrast/colors.ts | 136 ++++++++++++- .../components/Menu/menuItemStyles.ts | 20 +- .../components/Menu/menuVariables.ts | 6 + packages/react/src/themes/teams/colors.ts | 187 +++++++++++++++--- .../teams/components/Menu/menuItemStyles.ts | 6 +- .../teams/components/Menu/menuVariables.ts | 25 ++- packages/react/src/themes/types.ts | 16 +- 9 files changed, 521 insertions(+), 64 deletions(-) diff --git a/packages/react/src/themes/teams-dark/colors.ts b/packages/react/src/themes/teams-dark/colors.ts index 4b4c07e2f1..9c773584cc 100644 --- a/packages/react/src/themes/teams-dark/colors.ts +++ b/packages/react/src/themes/teams-dark/colors.ts @@ -37,24 +37,140 @@ const createColorScheme = (color: string, customValues = {}) => { } export const colorScheme: ColorSchemeMapping = { - default: createColorScheme('grey', { - foregroundDefault: colors.grey[500], - backgroundDefault: colors.grey[400], - borderDefault: colors.grey[500], + default: { + foregroundDefault: colors.white, + foregroundDefault1: colors.grey[250], + foregroundDefault3: colors.grey[300], + foregroundDefault4: colors.white, - foregroundHover: colors.black, - backgroundHover: colors.grey[500], + backgroundDefault: colors.grey[650], + backgroundDefault1: colors.grey[700], + backgroundDefault2: colors.grey[800], + backgroundDefault3: colors.grey[550], - foregroundActive: colors.black, - backgroundActive: colors.grey[500], + borderDefault1: colors.grey[850], // menu borders are too dark? + borderDefault2: colors.grey[900], + borderDefault: colors.grey[450], // buttons - foregroundFocus: colors.black, - backgroundFocus: colors.grey[500], + shadowDefault: colors.black, // opacity 25% + shadowHover: colors.black, - foregroundFocusWithin: colors.black, + foregroundHover: colors.white, - foregroundDisabled: colors.black, - }), + backgroundHover: colors.grey[550], + backgroundHover2: colors.grey[550], + + borderHover: colors.grey[400], + + foregroundPressed: colors.white, + backgroundPressed: colors.grey[500], + borderPressed: colors.grey[450], + shadowPressed: undefined, + + foregroundActive: colors.white, + foregroundActive1: colors.white, + + backgroundActive: colors.grey[800], // OK + backgroundActive1: colors.grey[500], + + // active border no change (just copied) + borderActive1: colors.grey[850], + borderActive2: colors.grey[900], + borderActive: colors.grey[450], // buttons + + shadowActive: undefined, + + foregroundFocus: colors.white, + foregroundFocus1: colors.grey[250], + foregroundFocus2: colors.grey[300], + foregroundFocus3: colors.white, + + backgroundFocus: colors.grey[650], + backgroundFocus1: colors.grey[700], + backgroundFocus2: colors.grey[800], + backgroundFocus3: colors.grey[550], + + borderFocus: colors.black, + borderFocusWithin: colors.white, + shadowFocus: undefined, + + foregroundDisabled1: colors.grey[450], + foregroundDisabled: colors.grey[450], + + backgroundDisabled1: colors.grey[550], + backgroundDisabled: colors.grey[550], + + borderDisabled: colors.grey[550], + shadowDisabled: undefined, + }, + primary: { + foregroundDefault: colors.primary[400], + foregroundDefault1: colors.primary[400], + foregroundDefault2: colors.primary[400], + foregroundDefault3: colors.primary[200], + + backgroundDefault: colors.primary[600], + backgroundDefault1: colors.primary[900], + backgroundDefault2: colors.primary[900], + backgroundDefault3: colors.primary[1000], + + borderDefault1: colors.primary[800], + borderDefault2: colors.primary[800], + borderDefault: colors.grey[450], // check this + + shadowDefault: colors.black, // check this + shadowHover: colors.black, // check this + + foregroundHover: colors.primary[400], + + borderHover: colors.primary[600], + + backgroundHover: colors.primary[500], // in the button we have 50 :( + backgroundHover1: colors.primary[900], + + foregroundPressed: colors.primary[200], + backgroundPressed: colors.primary[700], // it's 900 on the button - 800 is same as hover + borderPressed: colors.primary[800], + shadowPressed: undefined, + + foregroundActive: colors.primary[400], + foregroundActive1: colors.primary[400], + foregroundActive2: colors.primary[200], + + backgroundActive: colors.primary[400], + backgroundActive1: colors.primary[400], + + // active border no change (just copied) + borderActive1: colors.grey[850], + borderActive2: colors.grey[900], + borderActive: colors.grey[450], // buttons + + shadowActive: undefined, + + foregroundFocus: colors.primary[400], + foregroundFocus1: colors.primary[400], + foregroundFocus2: colors.primary[400], + foregroundFocus3: colors.primary[200], + + backgroundFocus: colors.primary[600], + backgroundFocus1: colors.primary[900], + backgroundFocus2: colors.primary[900], + backgroundFocus3: colors.primary[1000], + + borderFocus: colors.black, + borderFocus1: colors.primary[400], // only input + borderFocusWithin: colors.white, + shadowFocus: undefined, + + foregroundDisabled1: colors.grey[450], + foregroundDisabled: colors.grey[450], + + backgroundDisabled1: colors.grey[550], + backgroundDisabled: colors.grey[550], + + borderDisabled: colors.grey[550], + shadowDisabled: undefined, + }, black: { foregroundDefault: colors.black, backgroundDefault: colors.white, @@ -117,17 +233,6 @@ export const colorScheme: ColorSchemeMapping = { borderDisabled: colors.white, shadowDisabled: colors.white, }, - primary: createColorScheme('primary', { - foregroundHover: colors.white, - backgroundHover: colors.primary[300], - - foregroundActive: colors.white, - backgroundActive: colors.primary[500], - shadowActive: colors.primary[50], - - foregroundFocus: colors.white, - backgroundFocus: colors.primary[300], - }), grey: createColorScheme('grey'), green: createColorScheme('green'), orange: createColorScheme('orange', { diff --git a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts index e77537d5ad..ae90b4991f 100644 --- a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts @@ -1,7 +1,40 @@ import { MenuVariables } from '../../../teams/components/Menu/menuVariables' +import { extendColorScheme } from '../../../colorUtils' export default (siteVars: any): Partial => ({ - colorScheme: siteVars.colorScheme, + colorScheme: extendColorScheme(siteVars.colorScheme, { + default: { + foregroundDefault: siteVars.colors.grey[500], + backgroundDefault: siteVars.colors.grey[400], + borderDefault: siteVars.colors.grey[500], // 450 in the color scheme + + foregroundHover: siteVars.colors.black, + backgroundHover: siteVars.colors.grey[500], // 550 in the color scheme + + borderActive: siteVars.colors.grey[600], + foregroundActive: siteVars.colors.black, // white in the scheme... + backgroundActive: siteVars.colors.grey[500], + + foregroundFocus: siteVars.colors.black, + backgroundFocus1: siteVars.colors.grey[500], + + foregroundFocusWithin: siteVars.colors.black, + + foregroundDisabled: siteVars.colors.black, + }, + primary: { + foregroundHover: siteVars.colors.white, + backgroundHover: siteVars.colors.primary[300], + + borderActive: siteVars.colors.primary[400], + foregroundActive: siteVars.colors.white, + backgroundActive: siteVars.colors.primary[500], + shadowActive: siteVars.colors.primary[50], + + foregroundFocus: siteVars.colors.white, + backgroundFocus1: siteVars.colors.primary[300], + }, + }), color: siteVars.colors.grey[250], colorActive: siteVars.colors.white, @@ -12,4 +45,5 @@ export default (siteVars: any): Partial => ({ verticalBackgroundColor: siteVars.colors.grey[600], verticalBackgroundColorFocus: siteVars.colors.grey[550], + iconOnlyColorActive: siteVars.colors.primary[400], }) diff --git a/packages/react/src/themes/teams-high-contrast/colors.ts b/packages/react/src/themes/teams-high-contrast/colors.ts index 959599f5a1..e53747b213 100644 --- a/packages/react/src/themes/teams-high-contrast/colors.ts +++ b/packages/react/src/themes/teams-high-contrast/colors.ts @@ -43,10 +43,142 @@ const createColorScheme = (customValues = {}) => { } export const colorScheme: ColorSchemeMapping = { - default: createColorScheme(), + default: { + foregroundDefault: colors.white, + foregroundDefault1: colors.white, + foregroundDefault2: colors.white, + foregroundDefault3: colors.white, + + backgroundDefault: colors.black, + backgroundDefault1: colors.black, + backgroundDefault2: colors.black, + backgroundDefault3: colors.black, + + borderDefault1: colors.white, + borderDefault2: colors.white, + borderDefault: colors.white, // buttons + + shadowDefault: colors.black, // opacity 25% + shadowHover: colors.black, + + foregroundHover: colors.black, + + backgroundHover: accessibleYellow, + backgroundHover1: accessibleYellow, + + borderHover: accessibleYellow, + + foregroundPressed: colors.black, + backgroundPressed: accessibleYellow, + borderPressed: accessibleYellow, + shadowPressed: undefined, + + foregroundActive: accessibleCyan, + foregroundActive1: accessibleCyan, + + backgroundActive1: accessibleCyan, + backgroundActive: colors.black, + + // active border no change (just copied) + borderActive1: accessibleCyan, + borderActive2: accessibleCyan, + borderActive: accessibleCyan, // buttons + + shadowActive: undefined, + + foregroundFocus: colors.black, + foregroundFocus1: colors.black, + foregroundFocus2: colors.black, + foregroundFocus3: colors.black, + + backgroundFocus: accessibleCyan, + backgroundFocus1: accessibleCyan, + backgroundFocus2: accessibleCyan, + backgroundFocus3: accessibleCyan, + + borderFocus: accessibleCyan, + borderFocusWithin: accessibleCyan, + shadowFocus: accessibleCyan, + + foregroundDisabled1: accessibleGreen, + foregroundDisabled: colors.black, + + backgroundDisabled: accessibleGreen, + backgroundDisabled1: colors.black, + + borderDisabled: accessibleGreen, + shadowDisabled: undefined, + }, + primary: { + foregroundDefault: colors.white, + foregroundDefault1: accessibleYellow, + foregroundDefault2: accessibleYellow, + foregroundDefault3: accessibleYellow, + + backgroundDefault: colors.white, + backgroundDefault1: colors.black, + backgroundDefault2: colors.black, + backgroundDefault3: colors.black, + + borderDefault1: colors.white, + borderDefault2: colors.white, + borderDefault: colors.white, // buttons + + shadowDefault: colors.black, // opacity 25% + shadowHover: colors.black, + + foregroundHover: colors.black, + + borderHover: accessibleYellow, + + backgroundHover: accessibleYellow, // in the button we have 50 :( + backgroundHover1: accessibleYellow, + + foregroundPressed: colors.black, + backgroundPressed: accessibleYellow, // it's 900 on the button - 800 is same as hover + borderPressed: accessibleYellow, + shadowPressed: undefined, + + foregroundActive: accessibleCyan, + foregroundActive1: colors.black, + foregroundActive2: accessibleCyan, + + backgroundActive1: accessibleCyan, + backgroundActive: colors.black, + + // active border no change (just copied) + borderActive1: accessibleCyan, + borderActive2: accessibleCyan, + borderActive: accessibleCyan, // buttons + + shadowActive: undefined, + + foregroundFocus: colors.black, + foregroundFocus1: colors.black, + foregroundFocus2: colors.black, + foregroundFocus3: colors.black, + + backgroundFocus: accessibleCyan, + backgroundFocus1: accessibleCyan, + backgroundFocus2: accessibleCyan, + backgroundFocus3: accessibleCyan, + + borderFocus: accessibleCyan, + borderFocus1: accessibleCyan, + borderFocusWithin: accessibleCyan, + shadowFocus: undefined, + + foregroundDisabled1: accessibleGreen, + foregroundDisabled: colors.black, + + backgroundDisabled: accessibleGreen, + backgroundDisabled1: colors.black, + + borderDisabled: accessibleGreen, + shadowDisabled: undefined, + }, black: createColorScheme(), white: createColorScheme(), - primary: createColorScheme(), grey: createColorScheme(), green: createColorScheme(), orange: createColorScheme(), diff --git a/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts index fafac3034a..6378ff2c15 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts @@ -1,6 +1,7 @@ import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' import { MenuVariables } from '../../../teams/components/Menu/menuVariables' import { MenuItemProps, MenuItemState } from '../../../../components/Menu/MenuItem' +import { underlinedItem } from '../../../teams/components/Menu/menuItemStyles' type MenuItemPropsAndState = MenuItemProps & MenuItemState @@ -61,10 +62,25 @@ const menuItemStyles: ComponentSlotStylesInput { - const { iconOnly, isFromKeyboard } = props + root: ({ props, variables: v }): ICSSInJSStyle => { + const { iconOnly, isFromKeyboard, underlined, primary, color, active } = props return { + ...(underlined && { + ...(active && { + color: v.color, + ...(!primary && + !color && { + ...underlinedItem(v.color), + }), + }), + ':hover': { + color: v.color, + }, + ...(isFromKeyboard && { + color: v.colorActive, + }), + }), // focus styles ...(isFromKeyboard && iconOnly && { diff --git a/packages/react/src/themes/teams-high-contrast/components/Menu/menuVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Menu/menuVariables.ts index dbe0150d60..0272b72970 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Menu/menuVariables.ts @@ -1,6 +1,12 @@ import { MenuVariables } from '../../../teams/components/Menu/menuVariables' +import { extendColorScheme } from '../../../colorUtils' export default (siteVars: any): Partial => ({ + colorScheme: extendColorScheme(siteVars.colorScheme, { + primary: { + foregroundActive: siteVars.colors.black, + }, + }), color: siteVars.colors.white, colorActive: siteVars.colors.black, backgroundColorFocus: siteVars.accessibleYellow, diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index ae536bc75e..94399040ee 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -101,6 +101,39 @@ export const naturalColors: NaturalColors = { 800: undefined, 900: undefined, }, + silver: { + 100: undefined, + 200: 'rgba(255,255,255,0.75)', + 300: 'rgba(255,255,255,0.65)', + 400: 'rgba(255,255,255,0.5)', + 500: undefined, + 600: 'rgba(255,255,255,0.3)', + 700: undefined, + 800: 'rgba(255,255,255,0.15)', + 900: 'rgba(255,255,255,0.05)', + }, + ruby: { + 100: undefined, + 200: undefined, + 300: undefined, + 400: undefined, + 500: 'rgba(196,49,75,0.9)', + 600: 'rgba(167,32,55,0.9)', + 700: 'rgba(142,25,46,0.9)', + 800: undefined, + 900: undefined, + }, + onyx: { + 100: 'rgba(59,58,57,0.9)', + 200: undefined, + 300: undefined, + 400: undefined, + 500: 'rgba(41,40,40,0.9)', + 600: undefined, + 700: undefined, + 800: 'rgba(27,26,26,0.9)', + 900: undefined, + }, } const emphasisAndNaturalColors: EmphasisColors & NaturalColors = { @@ -163,24 +196,141 @@ const lightColorOverrides = { } export const colorScheme: ColorSchemeMapping = { - default: createColorScheme('grey', { - foregroundDefault: colors.grey[500], - backgroundDefault: colors.grey[400], - borderDefault: colors.grey[200], + default: { + foregroundDefault: colors.grey[750], + foregroundDefault1: colors.grey[500], + foregroundDefault2: colors.grey[450], + foregroundDefault3: colors.white, - foregroundHover: colors.black, - backgroundHover: colors.grey[50], + backgroundDefault: colors.white, + backgroundDefault1: colors.grey[50], + backgroundDefault2: colors.grey[100], + backgroundDefault3: colors.grey[150], - foregroundActive: colors.black, - backgroundActive: colors.grey[100], + borderDefault1: colors.grey[150], + borderDefault2: colors.grey[200], + borderDefault: colors.grey[200], // buttons - foregroundFocus: colors.black, - backgroundFocus: colors.grey[50], + shadowDefault: colors.black, // opacity 10% + shadowHover: colors.black, - foregroundFocusWithin: colors.black, + foregroundHover: colors.grey[750], - foregroundDisabled: colors.black, - }), + backgroundHover: colors.grey[100], // in the button we have 50 :( + backgroundHover1: colors.grey[150], + + borderHover: colors.grey[250], // buttons + + foregroundPressed: colors.grey[750], + backgroundPressed: colors.grey[200], + borderPressed: colors.grey[250], + shadowPressed: undefined, + + // We don't have foregroundActive black :( + foregroundActive: colors.grey[750], + foregroundActive1: colors.white, + + backgroundActive: colors.grey[100], // OK + backgroundActive1: colors.grey[150], + + // active border no change (just copied) + borderActive1: colors.grey[150], + borderActive2: colors.grey[200], + borderActive: colors.grey[200], // buttons + + shadowActive: undefined, + + foregroundFocus: colors.grey[750], + foregroundFocus1: colors.grey[500], + foregroundFocus2: colors.grey[450], + foregroundFocus3: colors.white, + + backgroundFocus: colors.white, + backgroundFocus1: colors.grey[50], + backgroundFocus2: colors.grey[100], + backgroundFocus3: colors.grey[150], // button has 200 :( + + borderFocus: colors.black, + borderFocusWithin: colors.white, + shadowFocus: undefined, + + foregroundDisabled1: colors.grey[250], + foregroundDisabled: colors.grey[250], + + backgroundDisabled1: colors.grey[150], + backgroundDisabled: colors.grey[150], + + borderDisabled: colors.grey[150], + shadowDisabled: undefined, + }, + primary: { + foregroundDefault: colors.primary[600], + foregroundDefault1: colors.primary[600], + foregroundDefault2: colors.primary[700], + foregroundDefault3: colors.primary[200], + + backgroundDefault: colors.primary[600], + backgroundDefault1: colors.primary[100], + backgroundDefault2: colors.primary[900], + backgroundDefault3: colors.primary[1000], + + borderDefault1: colors.primary[200], + borderDefault2: colors.primary[300], + borderDefault: colors.grey[200], // check this + + shadowDefault: colors.black, // check this + shadowHover: colors.black, // check this + + foregroundHover: colors.primary[600], + + borderHover: colors.primary[300], + + backgroundHover: colors.primary[700], // in the button we have 50 :( + backgroundHover2: colors.primary[50], // in menu is 300 (but is this used?) + + foregroundPressed: colors.primary[800], + backgroundPressed: colors.primary[800], // it's 900 on the button - 800 is same as hover + borderPressed: colors.primary[300], + shadowPressed: undefined, + + foregroundActive: colors.primary[600], + foregroundActive1: colors.primary[600], + foregroundActive2: colors.primary[200], + + backgroundActive: colors.primary[600], + backgroundActive1: colors.primary[600], // check this + + // active border no change (just copied from default) + borderActive1: colors.grey[150], + borderActive2: colors.grey[200], + borderActive: colors.grey[200], + + shadowActive: undefined, + + foregroundFocus: colors.primary[600], + foregroundFocus1: colors.primary[600], + foregroundFocus2: colors.primary[700], + foregroundFocus3: colors.primary[200], + + backgroundFocus: colors.primary[600], + backgroundFocus1: colors.primary[100], + backgroundFocus2: colors.primary[900], + backgroundFocus3: colors.primary[1000], + + borderFocus: colors.black, + borderFocus1: colors.primary[600], // only input + borderFocusWithin: colors.white, + shadowFocus: undefined, + + foregroundDisabled1: colors.grey[250], + foregroundDisabled: colors.grey[250], + + backgroundDisabled1: colors.grey[150], + backgroundDisabled: colors.grey[150], + + borderDisabled: colors.grey[150], + shadowDisabled: undefined, + }, black: { foregroundDefault: colors.black, backgroundDefault: colors.white, @@ -243,17 +393,6 @@ export const colorScheme: ColorSchemeMapping = { borderDisabled: colors.white, shadowDisabled: colors.white, }, - primary: createColorScheme('primary', { - foregroundHover: colors.white, - backgroundHover: colors.primary[300], - - foregroundActive: colors.white, - backgroundActive: colors.primary[500], - shadowActive: colors.primary[50], - - foregroundFocus: colors.white, - backgroundFocus: colors.primary[300], - }), grey: createColorScheme('grey'), green: createColorScheme('green'), orange: createColorScheme('orange', lightColorOverrides), diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index 2fd44e92d8..75d9a200fe 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -11,7 +11,7 @@ export const verticalPillsBottomMargin = pxToRem(5) export const horizontalPillsRightMargin = pxToRem(8) export const verticalPointingBottomMargin = pxToRem(12) -const underlinedItem = (color: string): ICSSInJSStyle => ({ +export const underlinedItem = (color: string): ICSSInJSStyle => ({ paddingBottom: 0, borderBottom: `solid ${pxToRem(4)} ${color}`, transition: 'color .1s ease', @@ -53,13 +53,13 @@ const getFocusedStyles = ({ if (active && !underlined && !vertical) return {} return { color: primary || color ? colorScheme.foregroundFocus : v.colorActive, - background: v.backgroundColorFocus || colorScheme.backgroundFocus, + background: v.backgroundColorFocus || colorScheme.backgroundFocus1, ...(vertical && isFromKeyboard && !primary ? { border: `solid 1px ${v.borderColorFocus}`, outline: `solid 1px ${v.outlineColorFocus}`, margin: pxToRem(1), - background: v.verticalBackgroundColorFocus || colorScheme.backgroundFocus, + background: v.verticalBackgroundColorFocus || colorScheme.backgroundFocus1, } : {}), } diff --git a/packages/react/src/themes/teams/components/Menu/menuVariables.ts b/packages/react/src/themes/teams/components/Menu/menuVariables.ts index a1f16869e1..ff4d6b25ba 100644 --- a/packages/react/src/themes/teams/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams/components/Menu/menuVariables.ts @@ -1,5 +1,6 @@ import { pxToRem } from '../../../../lib' import { ColorSchemeMapping } from '../../../types' +import { extendColorScheme } from '../../../colorUtils' export interface MenuVariables { colorScheme: ColorSchemeMapping @@ -46,7 +47,29 @@ export interface MenuVariables { export default (siteVars: any): MenuVariables => { return { - colorScheme: siteVars.colorScheme, + colorScheme: extendColorScheme(siteVars.colorScheme, { + default: { + foregroundDefault: siteVars.colors.grey[500], + backgroundDefault: siteVars.colors.grey[400], + foregroundHover: siteVars.colors.black, + backgroundHover: siteVars.colors.grey[50], + borderActive: siteVars.colors.grey[600], + foregroundActive: siteVars.colors.black, + foregroundFocus: siteVars.colors.black, + foregroundFocusWithin: siteVars.colors.black, + foregroundDisabled: siteVars.colors.black, + }, + primary: { + foregroundHover: siteVars.colors.white, + backgroundHover: siteVars.colors.primary[300], + foregroundActive: siteVars.colors.white, + borderActive: siteVars.colors.primary[600], + backgroundActive: siteVars.colors.primary[500], + shadowActive: siteVars.colors.primary[50], + foregroundFocus: siteVars.colors.white, + backgroundFocus1: siteVars.colors.primary[300], + }, + }), color: siteVars.colors.grey[500], colorActive: siteVars.colors.black, colorFocus: siteVars.colors.white, diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts index 6def82eafb..ccdb4a0bc1 100644 --- a/packages/react/src/themes/types.ts +++ b/packages/react/src/themes/types.ts @@ -118,10 +118,10 @@ export type ComponentAreaName = | 'backgroundFocus' | 'borderFocus' | 'shadowFocus' - | 'foregroundFocusWithin' - | 'backgroundFocusWithin' - | 'borderFocusWithin' - | 'shadowFocusWithin' + | 'foregroundPressed' + | 'backgroundPressed' + | 'borderFocusPressed' + | 'shadowFocusPressed' | 'foregroundDisabled' | 'backgroundDisabled' | 'borderDisabled' @@ -132,9 +132,11 @@ export type ComponentAreaName = */ export type ColorScheme = Extendable, string> -export type ColorSchemeMapping = ColorValues & { default?: ColorScheme } -export type ColorSchemeMappingOverrides = ColorValues> & { - default?: Partial +export type ColorSchemeMapping = ColorValues> & { + default?: Extendable +} +export type ColorSchemeMappingOverrides = ColorValues>> & { + default?: Partial> } // ======================================================== From 2cd008586962a182f4981ce3cbb5d7e8f3ff5495 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 30 Apr 2019 13:23:52 +0200 Subject: [PATCH 098/118] -fixed types --- .../react/src/themes/teams-dark/colors.ts | 24 +++++++++---------- .../src/themes/teams-high-contrast/colors.ts | 8 +++---- packages/react/src/themes/teams/colors.ts | 24 +++++++++---------- packages/react/src/themes/types.ts | 4 ++-- 4 files changed, 30 insertions(+), 30 deletions(-) diff --git a/packages/react/src/themes/teams-dark/colors.ts b/packages/react/src/themes/teams-dark/colors.ts index 9c773584cc..1115d589f5 100644 --- a/packages/react/src/themes/teams-dark/colors.ts +++ b/packages/react/src/themes/teams-dark/colors.ts @@ -23,10 +23,10 @@ const createColorScheme = (color: string, customValues = {}) => { borderFocus: colors[color][600], shadowFocus: colors[color][600], - foregroundFocusWithin: colors[color][50], - backgroundFocusWithin: colors[color][600], - borderFocusWithin: colors[color][600], - shadowFocusWithin: colors[color][600], + foregroundPressed: colors[color][50], + backgroundPressed: colors[color][600], + borderPressed: colors[color][600], + shadowPressed: colors[color][600], foregroundDisabled: colors[color][50], backgroundDisabled: colors[color][600], @@ -192,10 +192,10 @@ export const colorScheme: ColorSchemeMapping = { borderFocus: colors.black, shadowFocus: colors.black, - foregroundFocusWithin: colors.white, - backgroundFocusWithin: colors.black, - borderFocusWithin: colors.black, - shadowFocusWithin: colors.black, + foregroundPressed: colors.white, + backgroundPressed: colors.black, + borderPressed: colors.black, + shadowPressed: colors.black, foregroundDisabled: colors.white, backgroundDisabled: colors.black, @@ -223,10 +223,10 @@ export const colorScheme: ColorSchemeMapping = { borderFocus: colors.white, shadowFocus: colors.white, - foregroundFocusWithin: colors.black, - backgroundFocusWithin: colors.white, - borderFocusWithin: colors.white, - shadowFocusWithin: colors.white, + foregroundPressed: colors.black, + backgroundPressed: colors.white, + borderPressed: colors.white, + shadowPressed: colors.white, foregroundDisabled: colors.black, backgroundDisabled: colors.white, diff --git a/packages/react/src/themes/teams-high-contrast/colors.ts b/packages/react/src/themes/teams-high-contrast/colors.ts index e53747b213..123ca6a47c 100644 --- a/packages/react/src/themes/teams-high-contrast/colors.ts +++ b/packages/react/src/themes/teams-high-contrast/colors.ts @@ -29,10 +29,10 @@ const createColorScheme = (customValues = {}) => { borderFocus: colors.white, shadowFocus: colors.white, - foregroundFocusWithin: colors.black, - backgroundFocusWithin: accessibleYellow, - borderFocusWithin: colors.white, - shadowFocusWithin: colors.white, + foregroundPressed: colors.black, + backgroundPressed: accessibleYellow, + borderPressed: colors.white, + shadowPressed: colors.white, foregroundDisabled: colors.black, backgroundDisabled: accessibleGreen, diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index 94399040ee..f8482bfbb7 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -173,10 +173,10 @@ const createColorScheme = (color: string, customValues = {}) => { borderFocus: colors[color][600], shadowFocus: colors[color][600], - foregroundFocusWithin: colors[color][50], - backgroundFocusWithin: colors[color][600], - borderFocusWithin: colors[color][600], - shadowFocusWithin: colors[color][600], + foregroundPressed: colors[color][50], + backgroundPressed: colors[color][600], + borderPressed: colors[color][600], + shadowPressed: colors[color][600], foregroundDisabled: colors[color][50], backgroundDisabled: colors[color][600], @@ -352,10 +352,10 @@ export const colorScheme: ColorSchemeMapping = { borderFocus: colors.black, shadowFocus: colors.black, - foregroundFocusWithin: colors.white, - backgroundFocusWithin: colors.black, - borderFocusWithin: colors.black, - shadowFocusWithin: colors.black, + foregroundPressed: colors.white, + backgroundPressed: colors.black, + borderPressed: colors.black, + shadowPressed: colors.black, foregroundDisabled: colors.white, backgroundDisabled: colors.black, @@ -383,10 +383,10 @@ export const colorScheme: ColorSchemeMapping = { borderFocus: colors.white, shadowFocus: colors.white, - foregroundFocusWithin: colors.black, - backgroundFocusWithin: colors.white, - borderFocusWithin: colors.white, - shadowFocusWithin: colors.white, + foregroundPressed: colors.black, + backgroundPressed: colors.white, + borderPressed: colors.white, + shadowPressed: colors.white, foregroundDisabled: colors.black, backgroundDisabled: colors.white, diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts index ccdb4a0bc1..fa44d7c2c4 100644 --- a/packages/react/src/themes/types.ts +++ b/packages/react/src/themes/types.ts @@ -120,8 +120,8 @@ export type ComponentAreaName = | 'shadowFocus' | 'foregroundPressed' | 'backgroundPressed' - | 'borderFocusPressed' - | 'shadowFocusPressed' + | 'borderPressed' + | 'shadowPressed' | 'foregroundDisabled' | 'backgroundDisabled' | 'borderDisabled' From 0a0e5d796efbb3d1b9a8a082a9755896ec4cdda2 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 30 Apr 2019 13:51:07 +0200 Subject: [PATCH 099/118] -fixed base theme colors --- packages/react/src/themes/base/colors.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react/src/themes/base/colors.ts b/packages/react/src/themes/base/colors.ts index 1047328564..7c4adcbeeb 100644 --- a/packages/react/src/themes/base/colors.ts +++ b/packages/react/src/themes/base/colors.ts @@ -179,10 +179,10 @@ export const colorScheme: ColorSchemeMapping = { shadowFocus: colorVariants[500], backgroundFocus: colorVariants[50], - foregroundFocusWithin: colorVariants[500], - borderFocusWithin: colorVariants[500], - shadowFocusWithin: colorVariants[500], - backgroundFocusWithin: colorVariants[50], + foregroundPressed: colorVariants[500], + borderPressed: colorVariants[500], + shadowPressed: colorVariants[500], + backgroundPressed: colorVariants[50], foregroundDisabled: colorVariants[500], borderDisabled: colorVariants[500], From 2f651a3434a710ba069f678986752bb8dd1d5865 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 30 Apr 2019 14:18:38 +0200 Subject: [PATCH 100/118] -added transparent colors to the color palette --- packages/react/src/themes/teams/colors.ts | 40 ++++++++++++++++------- 1 file changed, 28 insertions(+), 12 deletions(-) diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index f8482bfbb7..7738cc7cca 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -1,5 +1,11 @@ -import { ColorPalette, EmphasisColors, NaturalColors, PrimitiveColors } from '../types' -import { ColorSchemeMapping } from 'src/themes/types' +import { + ColorPalette, + EmphasisColors, + NaturalColors, + PrimitiveColors, + ColorSchemeMapping, + ColorVariants, +} from '../types' export const emphasisColors: EmphasisColors = { primary: { @@ -101,6 +107,19 @@ export const naturalColors: NaturalColors = { 800: undefined, 900: undefined, }, +} + +const emphasisAndNaturalColors: EmphasisColors & NaturalColors = { + ...emphasisColors, + ...naturalColors, +} + +export const primitiveColors: PrimitiveColors = { + black: '#000', + white: '#fff', +} + +export const transparentColors = { silver: { 100: undefined, 200: 'rgba(255,255,255,0.75)', @@ -136,19 +155,16 @@ export const naturalColors: NaturalColors = { }, } -const emphasisAndNaturalColors: EmphasisColors & NaturalColors = { - ...emphasisColors, - ...naturalColors, -} - -export const primitiveColors: PrimitiveColors = { - black: '#000', - white: '#fff', -} +type TransparentColors = Partial<{ + silver: ColorVariants + ruby: ColorVariants + onyx: ColorVariants +}> -export const colors: ColorPalette = { +export const colors: ColorPalette = { ...emphasisAndNaturalColors, ...primitiveColors, + ...transparentColors, } const createColorScheme = (color: string, customValues = {}) => { From d42bce7737c4f8765fd25af9624cb579428b2a4f Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 30 Apr 2019 15:16:59 +0200 Subject: [PATCH 101/118] -fixed divider border color --- .../react/src/themes/teams/components/Divider/dividerStyles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/themes/teams/components/Divider/dividerStyles.ts b/packages/react/src/themes/teams/components/Divider/dividerStyles.ts index 9474334b0b..77d8d891b2 100644 --- a/packages/react/src/themes/teams/components/Divider/dividerStyles.ts +++ b/packages/react/src/themes/teams/components/Divider/dividerStyles.ts @@ -13,7 +13,7 @@ const beforeAndAfter = ( content: '""', flex: 1, height: `${size + 1}px`, - background: _.get(colors, 'borderDefault', variables.dividerColor), + background: _.get(colors, 'foregroundDefault', variables.dividerColor), }) const dividerStyles: ComponentSlotStylesInput = { From e840df21eed764bf226a9d74fd7c55c943458b97 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 30 Apr 2019 15:53:53 +0200 Subject: [PATCH 102/118] -improved disabled menu values --- .../components/Menu/menuVariables.ts | 13 ------------ .../components/Menu/menuItemStyles.ts | 18 +++++++++++++++- packages/react/src/themes/teams/colors.ts | 21 ++++++++----------- .../teams/components/Menu/menuItemStyles.ts | 2 +- .../teams/components/Menu/menuVariables.ts | 7 +------ 5 files changed, 28 insertions(+), 33 deletions(-) diff --git a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts index ae90b4991f..6945a1e517 100644 --- a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts @@ -4,33 +4,21 @@ import { extendColorScheme } from '../../../colorUtils' export default (siteVars: any): Partial => ({ colorScheme: extendColorScheme(siteVars.colorScheme, { default: { - foregroundDefault: siteVars.colors.grey[500], - backgroundDefault: siteVars.colors.grey[400], borderDefault: siteVars.colors.grey[500], // 450 in the color scheme - foregroundHover: siteVars.colors.black, backgroundHover: siteVars.colors.grey[500], // 550 in the color scheme - borderActive: siteVars.colors.grey[600], foregroundActive: siteVars.colors.black, // white in the scheme... backgroundActive: siteVars.colors.grey[500], - foregroundFocus: siteVars.colors.black, backgroundFocus1: siteVars.colors.grey[500], - - foregroundFocusWithin: siteVars.colors.black, - - foregroundDisabled: siteVars.colors.black, }, primary: { foregroundHover: siteVars.colors.white, backgroundHover: siteVars.colors.primary[300], - borderActive: siteVars.colors.primary[400], foregroundActive: siteVars.colors.white, backgroundActive: siteVars.colors.primary[500], - shadowActive: siteVars.colors.primary[50], - foregroundFocus: siteVars.colors.white, backgroundFocus1: siteVars.colors.primary[300], }, @@ -38,7 +26,6 @@ export default (siteVars: any): Partial => ({ color: siteVars.colors.grey[250], colorActive: siteVars.colors.white, - colorDisabled: siteVars.colors.grey[450], primaryBorderColor: siteVars.colors.grey[600], pointingIndicatorBackgroundColor: siteVars.colors.primary[400], diff --git a/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts index 6378ff2c15..1c8f9cde79 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts @@ -7,7 +7,16 @@ type MenuItemPropsAndState = MenuItemProps & MenuItemState const menuItemStyles: ComponentSlotStylesInput = { wrapper: ({ props: p, variables: v }): ICSSInJSStyle => { - const { iconOnly, isFromKeyboard, vertical, active, underlined, primary, pointing } = p + const { + iconOnly, + isFromKeyboard, + vertical, + active, + underlined, + primary, + pointing, + disabled, + } = p return { ':hover': { @@ -59,6 +68,13 @@ const menuItemStyles: ComponentSlotStylesInput { return { colorScheme: extendColorScheme(siteVars.colorScheme, { default: { - foregroundDefault: siteVars.colors.grey[500], - backgroundDefault: siteVars.colors.grey[400], foregroundHover: siteVars.colors.black, backgroundHover: siteVars.colors.grey[50], borderActive: siteVars.colors.grey[600], foregroundActive: siteVars.colors.black, foregroundFocus: siteVars.colors.black, - foregroundFocusWithin: siteVars.colors.black, - foregroundDisabled: siteVars.colors.black, }, primary: { foregroundHover: siteVars.colors.white, @@ -65,7 +61,6 @@ export default (siteVars: any): MenuVariables => { foregroundActive: siteVars.colors.white, borderActive: siteVars.colors.primary[600], backgroundActive: siteVars.colors.primary[500], - shadowActive: siteVars.colors.primary[50], foregroundFocus: siteVars.colors.white, backgroundFocus1: siteVars.colors.primary[300], }, @@ -73,7 +68,7 @@ export default (siteVars: any): MenuVariables => { color: siteVars.colors.grey[500], colorActive: siteVars.colors.black, colorFocus: siteVars.colors.white, - colorDisabled: siteVars.colors.grey[250], + colorDisabled: undefined, borderColor: undefined, borderColorHover: undefined, From 23d60373e5c744f2c565417f49f9da545b215e65 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 30 Apr 2019 16:05:14 +0200 Subject: [PATCH 103/118] -removed unnecessary comments --- packages/react/src/themes/teams-dark/colors.ts | 13 ++++++------- .../react/src/themes/teams-high-contrast/colors.ts | 6 ++---- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/react/src/themes/teams-dark/colors.ts b/packages/react/src/themes/teams-dark/colors.ts index 1115d589f5..c48e250c49 100644 --- a/packages/react/src/themes/teams-dark/colors.ts +++ b/packages/react/src/themes/teams-dark/colors.ts @@ -48,7 +48,7 @@ export const colorScheme: ColorSchemeMapping = { backgroundDefault2: colors.grey[800], backgroundDefault3: colors.grey[550], - borderDefault1: colors.grey[850], // menu borders are too dark? + borderDefault1: colors.grey[850], borderDefault2: colors.grey[900], borderDefault: colors.grey[450], // buttons @@ -73,7 +73,6 @@ export const colorScheme: ColorSchemeMapping = { backgroundActive: colors.grey[800], // OK backgroundActive1: colors.grey[500], - // active border no change (just copied) borderActive1: colors.grey[850], borderActive2: colors.grey[900], borderActive: colors.grey[450], // buttons @@ -116,20 +115,20 @@ export const colorScheme: ColorSchemeMapping = { borderDefault1: colors.primary[800], borderDefault2: colors.primary[800], - borderDefault: colors.grey[450], // check this + borderDefault: colors.grey[450], - shadowDefault: colors.black, // check this - shadowHover: colors.black, // check this + shadowDefault: colors.black, + shadowHover: colors.black, foregroundHover: colors.primary[400], borderHover: colors.primary[600], - backgroundHover: colors.primary[500], // in the button we have 50 :( + backgroundHover: colors.primary[500], backgroundHover1: colors.primary[900], foregroundPressed: colors.primary[200], - backgroundPressed: colors.primary[700], // it's 900 on the button - 800 is same as hover + backgroundPressed: colors.primary[700], borderPressed: colors.primary[800], shadowPressed: undefined, diff --git a/packages/react/src/themes/teams-high-contrast/colors.ts b/packages/react/src/themes/teams-high-contrast/colors.ts index 123ca6a47c..dbd2675867 100644 --- a/packages/react/src/themes/teams-high-contrast/colors.ts +++ b/packages/react/src/themes/teams-high-contrast/colors.ts @@ -79,7 +79,6 @@ export const colorScheme: ColorSchemeMapping = { backgroundActive1: accessibleCyan, backgroundActive: colors.black, - // active border no change (just copied) borderActive1: accessibleCyan, borderActive2: accessibleCyan, borderActive: accessibleCyan, // buttons @@ -131,11 +130,11 @@ export const colorScheme: ColorSchemeMapping = { borderHover: accessibleYellow, - backgroundHover: accessibleYellow, // in the button we have 50 :( + backgroundHover: accessibleYellow, backgroundHover1: accessibleYellow, foregroundPressed: colors.black, - backgroundPressed: accessibleYellow, // it's 900 on the button - 800 is same as hover + backgroundPressed: accessibleYellow, borderPressed: accessibleYellow, shadowPressed: undefined, @@ -146,7 +145,6 @@ export const colorScheme: ColorSchemeMapping = { backgroundActive1: accessibleCyan, backgroundActive: colors.black, - // active border no change (just copied) borderActive1: accessibleCyan, borderActive2: accessibleCyan, borderActive: accessibleCyan, // buttons From f4cc14613fd28847b73e36604bd666943eb95632 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 2 May 2019 13:59:42 +0200 Subject: [PATCH 104/118] -removed unnecessary overrides --- .../components/Menu/menuVariables.ts | 7 ------- .../teams/components/Menu/menuItemStyles.ts | 19 +++++++------------ .../teams/components/Menu/menuVariables.ts | 6 +----- 3 files changed, 8 insertions(+), 24 deletions(-) diff --git a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts index 6945a1e517..a34ee70d20 100644 --- a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts @@ -4,13 +4,7 @@ import { extendColorScheme } from '../../../colorUtils' export default (siteVars: any): Partial => ({ colorScheme: extendColorScheme(siteVars.colorScheme, { default: { - borderDefault: siteVars.colors.grey[500], // 450 in the color scheme - foregroundHover: siteVars.colors.black, - backgroundHover: siteVars.colors.grey[500], // 550 in the color scheme borderActive: siteVars.colors.grey[600], - foregroundActive: siteVars.colors.black, // white in the scheme... - backgroundActive: siteVars.colors.grey[500], - foregroundFocus: siteVars.colors.black, backgroundFocus1: siteVars.colors.grey[500], }, primary: { @@ -18,7 +12,6 @@ export default (siteVars: any): Partial => ({ backgroundHover: siteVars.colors.primary[300], borderActive: siteVars.colors.primary[400], foregroundActive: siteVars.colors.white, - backgroundActive: siteVars.colors.primary[500], foregroundFocus: siteVars.colors.white, backgroundFocus1: siteVars.colors.primary[300], }, diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index 4a17058a86..b56005fe42 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -33,11 +33,11 @@ const getActionStyles = ({ : primary || color ? { color: colorScheme.foregroundActive, - background: v.backgroundColorActive || colorScheme.backgroundActive, + background: v.backgroundColorActive || colorScheme.backgroundActive1, } : { color: v.color, - background: v.backgroundColorActive || colorScheme.backgroundActive, + background: v.backgroundColorActive || colorScheme.backgroundActive1, } const getFocusedStyles = ({ @@ -74,20 +74,15 @@ const getHoverStyles = ({ variables: MenuVariables colorScheme: ColorScheme }): ICSSInJSStyle => { - const { primary, underlined, active, vertical, color } = props + const { underlined, active, vertical } = props if (active && !underlined && !vertical) return {} return { ...(underlined ? { color: v.colorActive, } - : primary || color - ? { - color: colorScheme.foregroundHover, - background: v.backgroundColorHover || colorScheme.backgroundHover, - } : { - color: v.colorActive, + color: colorScheme.foregroundHover, background: v.backgroundColorHover || colorScheme.backgroundHover, }), } @@ -99,7 +94,7 @@ const pointingBeak = ({ props, variables: v, colorScheme }): ICSSInJSStyle => { let top: string let borders: ICSSInJSStyle - const backgroundColor = v.backgroundColorActive || colorScheme.backgroundActive + const backgroundColor = v.backgroundColorActive || colorScheme.backgroundActive1 const borderColor = v.borderColor || primary ? v.primaryBorderColor : colorScheme.borderDefault if (pointing === 'start') { @@ -390,11 +385,11 @@ const menuItemStyles: ComponentSlotStylesInput { return { colorScheme: extendColorScheme(siteVars.colorScheme, { default: { - foregroundHover: siteVars.colors.black, - backgroundHover: siteVars.colors.grey[50], borderActive: siteVars.colors.grey[600], - foregroundActive: siteVars.colors.black, - foregroundFocus: siteVars.colors.black, }, primary: { foregroundHover: siteVars.colors.white, backgroundHover: siteVars.colors.primary[300], foregroundActive: siteVars.colors.white, borderActive: siteVars.colors.primary[600], - backgroundActive: siteVars.colors.primary[500], + backgroundActive1: siteVars.colors.primary[500], // it's 600 in the color scheme foregroundFocus: siteVars.colors.white, backgroundFocus1: siteVars.colors.primary[300], }, From 5a72de20b4a1b40252c7e0197783d3d0a29c2229 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 2 May 2019 15:53:59 +0200 Subject: [PATCH 105/118] -fixed borderActive in primary's color schemes --- packages/react/src/themes/teams-dark/colors.ts | 4 ++-- packages/react/src/themes/teams/colors.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react/src/themes/teams-dark/colors.ts b/packages/react/src/themes/teams-dark/colors.ts index c48e250c49..25262ca216 100644 --- a/packages/react/src/themes/teams-dark/colors.ts +++ b/packages/react/src/themes/teams-dark/colors.ts @@ -140,8 +140,8 @@ export const colorScheme: ColorSchemeMapping = { backgroundActive1: colors.primary[400], // active border no change (just copied) - borderActive1: colors.grey[850], - borderActive2: colors.grey[900], + borderActive1: colors.primary[800], + borderActive2: colors.primary[800], borderActive: colors.grey[450], // buttons shadowActive: undefined, diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index 3be91ab3aa..79214b818b 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -314,8 +314,8 @@ export const colorScheme: ColorSchemeMapping = { backgroundActive: colors.primary[600], backgroundActive1: colors.primary[600], - borderActive1: colors.grey[150], - borderActive2: colors.grey[200], + borderActive1: colors.primary[200], + borderActive2: colors.primary[300], borderActive: colors.grey[200], shadowActive: undefined, From 7daccf214c62709b710b41b5e4da73a0e7d27f0b Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 6 May 2019 18:55:13 +0200 Subject: [PATCH 106/118] -renamed primary to brand -renamed areaDefault values from the color scheme with just area --- docs/src/components/ComponentPlayground.tsx | 2 +- .../Usage/ButtonUsageExample.shorthand.tsx | 44 +++--- .../components/Chat/Performance/Chat.perf.tsx | 2 +- .../Chat/Performance/ChatWithPopover.perf.tsx | 2 +- .../Chat/Types/ChatExample.shorthand.tsx | 2 +- .../ChatWithPopover.tsx | 2 +- .../ImportantAndMentionMessages/index.tsx | 2 +- .../prototypes/chatPane/chatPaneHeader.tsx | 2 +- .../chatPane/services/messageFactoryMock.tsx | 2 +- .../components/MSTeamsHeader.tsx | 2 +- .../meetingOptions/components/MSTeamsLink.tsx | 2 +- .../meetingOptions/components/MSTeamsLogo.tsx | 2 +- docs/src/views/ColorPalette.tsx | 30 ++-- docs/src/views/IntegrateCustomComponents.tsx | 2 +- docs/src/views/Theming.tsx | 2 +- packages/react/src/themes/base/colors.ts | 18 +-- .../base/components/Input/inputVariables.ts | 2 +- .../themes/base/components/Text/textStyles.ts | 2 +- .../react/src/themes/teams-dark/colors.ts | 130 ++++++++--------- .../components/Button/buttonVariables.ts | 12 +- .../components/Chat/chatMessageVariables.ts | 4 +- .../components/Divider/dividerVariables.ts | 6 +- .../components/Input/inputVariables.ts | 2 +- .../components/List/listItemVariables.ts | 2 +- .../components/Menu/menuVariables.ts | 12 +- .../RadioGroup/radioGroupItemVariables.ts | 4 +- .../components/Reaction/reactionVariables.ts | 4 +- .../components/Text/textVariables.ts | 2 +- .../src/themes/teams-high-contrast/colors.ts | 64 ++++---- .../components/Menu/menuVariables.ts | 2 +- packages/react/src/themes/teams/colors.ts | 137 +++++++++--------- .../components/Button/buttonVariables.ts | 18 +-- .../components/Chat/chatMessageVariables.ts | 4 +- .../teams/components/Divider/dividerStyles.ts | 4 +- .../components/Dropdown/dropdownVariables.ts | 6 +- .../teams/components/Embed/embedVariables.ts | 2 +- .../Header/headerDescriptionStyles.ts | 2 +- .../teams/components/Header/headerStyles.ts | 2 +- .../teams/components/Icon/iconStyles.ts | 2 +- .../teams/components/Input/inputVariables.ts | 2 +- .../teams/components/Label/labelStyles.ts | 6 +- .../teams/components/Label/labelVariables.ts | 4 +- .../components/List/listItemVariables.ts | 4 +- .../components/Menu/menuDividerStyles.ts | 4 +- .../teams/components/Menu/menuItemStyles.ts | 4 +- .../teams/components/Menu/menuStyles.ts | 2 +- .../teams/components/Menu/menuVariables.ts | 16 +- .../RadioGroup/radioGroupItemVariables.ts | 4 +- .../components/Reaction/reactionVariables.ts | 6 +- .../teams/components/Segment/segmentStyles.ts | 4 +- .../components/Status/statusVariables.ts | 2 +- .../teams/components/Text/textStyles.ts | 2 +- .../teams/components/Text/textVariables.ts | 2 +- packages/react/src/themes/types.ts | 9 +- 54 files changed, 306 insertions(+), 308 deletions(-) diff --git a/docs/src/components/ComponentPlayground.tsx b/docs/src/components/ComponentPlayground.tsx index 75b86c237a..d35ea2c59e 100644 --- a/docs/src/components/ComponentPlayground.tsx +++ b/docs/src/components/ComponentPlayground.tsx @@ -42,7 +42,7 @@ const ComponentPlayground: React.FunctionComponent = p - +
    Props
    diff --git a/docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx b/docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx index 2f13f694f2..120423fb12 100644 --- a/docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx +++ b/docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx @@ -7,19 +7,19 @@ const ButtonUsageExampleShorthand = () => ( theme={{ componentVariables: { Button: siteVariables => ({ - color: siteVariables.colors.primary[600], - colorActive: siteVariables.colors.primary[300], - colorHover: siteVariables.colors.primary[300], - colorFocus: siteVariables.colors.primary[900], + color: siteVariables.colors.brand[600], + colorActive: siteVariables.colors.brand[300], + colorHover: siteVariables.colors.brand[300], + colorFocus: siteVariables.colors.brand[900], backgroundColor: '#252424', // no mapping color - tried - siteVariables.colors.grey[750] - backgroundColorActive: siteVariables.colors.primary[200], - backgroundColorHover: siteVariables.colors.primary[50], - backgroundColorFocus: siteVariables.colors.primary[200], - borderColor: siteVariables.colors.primary[200], - borderColorActive: siteVariables.colors.primary[300], - borderColorHover: siteVariables.colors.primary[300], + backgroundColorActive: siteVariables.colors.brand[200], + backgroundColorHover: siteVariables.colors.brand[50], + backgroundColorFocus: siteVariables.colors.brand[200], + borderColor: siteVariables.colors.brand[200], + borderColorActive: siteVariables.colors.brand[300], + borderColorHover: siteVariables.colors.brand[300], borderColorFocus: siteVariables.colors.grey[900], - borderColorFocusIndicator: siteVariables.colors.primary[900], + borderColorFocusIndicator: siteVariables.colors.brand[900], }), }, }} @@ -33,19 +33,19 @@ const ButtonUsageExampleShorthand = () => ( theme={{ componentVariables: { Button: siteVariables => ({ - color: siteVariables.colors.primary[600], - colorActive: siteVariables.colors.primary[600], - colorHover: siteVariables.colors.primary[600], - colorFocus: siteVariables.colors.primary[900], + color: siteVariables.colors.brand[600], + colorActive: siteVariables.colors.brand[600], + colorHover: siteVariables.colors.brand[600], + colorFocus: siteVariables.colors.brand[900], backgroundColor: siteVariables.colors.white, - backgroundColorActive: siteVariables.colors.primary[200], - backgroundColorHover: siteVariables.colors.primary[50], - backgroundColorFocus: siteVariables.colors.primary[200], - borderColor: siteVariables.colors.primary[200], - borderColorActive: siteVariables.colors.primary[300], - borderColorHover: siteVariables.colors.primary[300], + backgroundColorActive: siteVariables.colors.brand[200], + backgroundColorHover: siteVariables.colors.brand[50], + backgroundColorFocus: siteVariables.colors.brand[200], + borderColor: siteVariables.colors.brand[200], + borderColorActive: siteVariables.colors.brand[300], + borderColorHover: siteVariables.colors.brand[300], borderColorFocus: siteVariables.colors.white, - borderColorFocusIndicator: siteVariables.colors.primary[900], + borderColorFocusIndicator: siteVariables.colors.brand[900], }), }, }} diff --git a/docs/src/examples/components/Chat/Performance/Chat.perf.tsx b/docs/src/examples/components/Chat/Performance/Chat.perf.tsx index 41f16a031b..af4c1c77e4 100644 --- a/docs/src/examples/components/Chat/Performance/Chat.perf.tsx +++ b/docs/src/examples/components/Chat/Performance/Chat.perf.tsx @@ -20,7 +20,7 @@ const ChatExample = () => { ChatMessage: { root: ({ props: p, theme: { siteVariables } }) => ({ '& a': { - color: siteVariables.colors.primary[600], + color: siteVariables.colors.brand[600], }, }), }, diff --git a/docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx b/docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx index b05abfaa97..6bba848872 100644 --- a/docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx +++ b/docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx @@ -117,7 +117,7 @@ const ChatWithPopover = () => { ChatMessage: { root: ({ props: p, theme: { siteVariables } }) => ({ '& a': { - color: siteVariables.colors.primary[600], + color: siteVariables.colors.brand[600], }, }), }, diff --git a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx index efb60ad38f..e4cdcab3cf 100644 --- a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx +++ b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx @@ -98,7 +98,7 @@ const items = [ key: 'message-id-8', }, { - children: , + children: , key: 'message-id-9', }, { diff --git a/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx b/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx index 0f74090523..fd84294723 100644 --- a/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx +++ b/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx @@ -14,7 +14,7 @@ const ChatWithPopover = () => ( ChatMessage: { root: ({ props: p, theme: { siteVariables } }) => ({ '& a': { - color: siteVariables.colors.primary[600], + color: siteVariables.colors.brand[600], }, }), }, diff --git a/docs/src/prototypes/chatMessages/ImportantAndMentionMessages/index.tsx b/docs/src/prototypes/chatMessages/ImportantAndMentionMessages/index.tsx index 5382de10dd..499b8e495b 100644 --- a/docs/src/prototypes/chatMessages/ImportantAndMentionMessages/index.tsx +++ b/docs/src/prototypes/chatMessages/ImportantAndMentionMessages/index.tsx @@ -67,7 +67,7 @@ const items = [ badge={{ icon: 'mention' }} variables={siteVars => ({ hasMention: true, - hasMentionColor: siteVars.colors.primary[600], + hasMentionColor: siteVars.colors.brand[600], })} /> ), diff --git a/docs/src/prototypes/chatPane/chatPaneHeader.tsx b/docs/src/prototypes/chatPane/chatPaneHeader.tsx index 54344cc75b..940785e095 100644 --- a/docs/src/prototypes/chatPane/chatPaneHeader.tsx +++ b/docs/src/prototypes/chatPane/chatPaneHeader.tsx @@ -36,7 +36,7 @@ class ChatPaneHeader extends React.PureComponent { height: '40px', padding: 0, })} - variables={siteVars => ({ backgroundColor: siteVars.colors.primary[600] })} + variables={siteVars => ({ backgroundColor: siteVars.colors.brand[600] })} /> ) } diff --git a/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx b/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx index b96439e9b9..d7a28133c1 100644 --- a/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx +++ b/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx @@ -204,7 +204,7 @@ export function generateChatProps(chat: ChatData): ChatItem[] { chatProps.splice( myLastMsgIndex + 1, 0, - generateDividerProps({ content: 'Last read', color: 'primary', important: true }), + generateDividerProps({ content: 'Last read', color: 'brand', important: true }), ) } diff --git a/docs/src/prototypes/meetingOptions/components/MSTeamsHeader.tsx b/docs/src/prototypes/meetingOptions/components/MSTeamsHeader.tsx index d93aea76b0..3cd03c9126 100644 --- a/docs/src/prototypes/meetingOptions/components/MSTeamsHeader.tsx +++ b/docs/src/prototypes/meetingOptions/components/MSTeamsHeader.tsx @@ -7,7 +7,7 @@ export default props => { { return ( -
    +
    {props.content}
    ) diff --git a/docs/src/prototypes/meetingOptions/components/MSTeamsLink.tsx b/docs/src/prototypes/meetingOptions/components/MSTeamsLink.tsx index 102d6390f2..47e4c0d541 100644 --- a/docs/src/prototypes/meetingOptions/components/MSTeamsLink.tsx +++ b/docs/src/prototypes/meetingOptions/components/MSTeamsLink.tsx @@ -6,7 +6,7 @@ export default props => { return ( ( - + {children} )} diff --git a/docs/src/prototypes/meetingOptions/components/MSTeamsLogo.tsx b/docs/src/prototypes/meetingOptions/components/MSTeamsLogo.tsx index ec37754ae3..d69181e6f2 100644 --- a/docs/src/prototypes/meetingOptions/components/MSTeamsLogo.tsx +++ b/docs/src/prototypes/meetingOptions/components/MSTeamsLogo.tsx @@ -18,7 +18,7 @@ class MSTeamsLogo extends React.Component {
    {Icon.create(icon, { defaultProps: { - variables: { color: siteVariables.colors.primary[600] }, + variables: { color: siteVariables.colors.brand[600] }, size: 'largest', xSpacing: 'after', styles: { verticalAlign: 'middle' }, diff --git a/docs/src/views/ColorPalette.tsx b/docs/src/views/ColorPalette.tsx index df4f396b9c..f66e0763c8 100644 --- a/docs/src/views/ColorPalette.tsx +++ b/docs/src/views/ColorPalette.tsx @@ -26,13 +26,13 @@ const theme = { return { textAlign: 'center', padding: '5px', - color: colorScheme.primary.foregroundDefault, - backgroundColor: colorScheme.primary.backgroundDefault, - border: `1px solid ${colorScheme.primary.borderDefault}`, + color: colorScheme.brand.foreground3, + backgroundColor: colorScheme.brand.background3, + border: `1px solid ${colorScheme.brand.border}`, ':hover': { - color: colorScheme.primary.foregroundHover, - backgroundColor: colorScheme.primary.backgroundHover, - border: `1px solid ${colorScheme.primary.borderHover}`, + color: colorScheme.brand.foregroundHover, + backgroundColor: colorScheme.brand.backgroundHover1, + border: `1px solid ${colorScheme.brand.borderHover}`, }, } }, @@ -151,8 +151,8 @@ const ColorPalette = () => ( values, so that they will work correctly when different themes will be applied. As part of each theme, we are defining color scheme, which will define the design tokens usages of the different colors from the palette, that make sense for the developers. For - example, let's take a look of one color scheme defined for primary in Teams light and - high contrast themes. + example, let's take a look of one color scheme defined for brand in Teams light and high + contrast themes.

    ( content: 'HC theme', }, ]} - name={'primary'} + name={'brand'} />

    @@ -191,13 +191,13 @@ const ColorPalette = () => ( root: ({ theme: { siteVariables } }) => { const colorScheme = siteVariables.colorScheme return { - color: colorScheme.primary.foregroundDefault, - backgroundColor: colorScheme.primary.backgroundDefault, - border: \`1px solid \${colorScheme.primary.borderDefault}\`, + color: colorScheme.brand.foreground3, + backgroundColor: colorScheme.brand.background, + border: \`1px solid \${colorScheme.brand.border}\`, ':hover': { - color: colorScheme.primary.foregroundHover, - backgroundColor: colorScheme.primary.backgroundHover, - border: \`1px solid \${colorScheme.primary.borderHover}\`, + color: colorScheme.brand.foregroundHover, + backgroundColor: colorScheme.brand.backgroundHover, + border: \`1px solid \${colorScheme.brand.borderHover}\`, }, } }, diff --git a/docs/src/views/IntegrateCustomComponents.tsx b/docs/src/views/IntegrateCustomComponents.tsx index 65a2c82416..3a4d55d29f 100644 --- a/docs/src/views/IntegrateCustomComponents.tsx +++ b/docs/src/views/IntegrateCustomComponents.tsx @@ -75,7 +75,7 @@ export default () => ( componentStyles: { StyledButton: { root: ({ variables, theme: { siteVariables } }) => ({ - backgroundColor: siteVariables.colors.primary[600], + backgroundColor: siteVariables.colors.brand[600], color: variables.color, }), }, diff --git a/docs/src/views/Theming.tsx b/docs/src/views/Theming.tsx index 1f5ab50246..32af9d5963 100644 --- a/docs/src/views/Theming.tsx +++ b/docs/src/views/Theming.tsx @@ -55,7 +55,7 @@ export default () => ( 800: '#333333', 900: '#1A1A1A', }, - primary: { + brand: { 50: 'white', 100: 'white', 200: 'white', diff --git a/packages/react/src/themes/base/colors.ts b/packages/react/src/themes/base/colors.ts index 7c4adcbeeb..ab3a32246e 100644 --- a/packages/react/src/themes/base/colors.ts +++ b/packages/react/src/themes/base/colors.ts @@ -120,7 +120,11 @@ export const naturalColors: NaturalColors = { } export const emphasisColors: EmphasisColors = { - primary: { + secondary: naturalColors.grey, +} + +export const contextualColors: ContextualColors = { + brand: { 50: '#E5F2FF', 100: '#CCE5FF', 200: '#99CCFF', @@ -132,10 +136,6 @@ export const emphasisColors: EmphasisColors = { 800: '#003366', 900: '#001933', }, - secondary: naturalColors.grey, -} - -export const contextualColors: ContextualColors = { text: naturalColors.grey, info: naturalColors.blue, danger: naturalColors.red, @@ -159,10 +159,10 @@ export const colors: ColorPalette = { export const colorScheme: ColorSchemeMapping = { ..._.mapValues(emphasisAndNaturalColors, (colorVariants, colorName) => { return { - foregroundDefault: colorVariants[500], - borderDefault: colorVariants[500], - shadowDefault: colorVariants[500], - backgroundDefault: colorVariants[50], + foreground: colorVariants[500], + border: colorVariants[500], + shadow: colorVariants[500], + background: colorVariants[50], foregroundActive: colorVariants[500], borderActive: colorVariants[500], diff --git a/packages/react/src/themes/base/components/Input/inputVariables.ts b/packages/react/src/themes/base/components/Input/inputVariables.ts index cb31583cc6..9cb750a574 100644 --- a/packages/react/src/themes/base/components/Input/inputVariables.ts +++ b/packages/react/src/themes/base/components/Input/inputVariables.ts @@ -36,7 +36,7 @@ export default (siteVars): InputVariables => ({ inputPaddingWithIconAtEnd: `${pxToRem(7)} ${pxToRem(24)} ${pxToRem(7)} ${pxToRem(12)}`, inputPadding: `${pxToRem(7)} ${pxToRem(12)}`, - inputFocusBorderColor: siteVars.colors.primary[300], + inputFocusBorderColor: siteVars.colors.brand[300], inputFocusBorderRadius: pxToRem(3), placeholderColor: siteVars.colors.grey[600], diff --git a/packages/react/src/themes/base/components/Text/textStyles.ts b/packages/react/src/themes/base/components/Text/textStyles.ts index becfe9bfdc..32aa425953 100644 --- a/packages/react/src/themes/base/components/Text/textStyles.ts +++ b/packages/react/src/themes/base/components/Text/textStyles.ts @@ -25,7 +25,7 @@ export default { return { ...(color && colors && { - color: colors.foregroundDefault, + color: colors.foreground, }), // animations are not working with span, unless display is set to 'inline-block' ...(animation && diff --git a/packages/react/src/themes/teams-dark/colors.ts b/packages/react/src/themes/teams-dark/colors.ts index 25262ca216..0bbf5a7cec 100644 --- a/packages/react/src/themes/teams-dark/colors.ts +++ b/packages/react/src/themes/teams-dark/colors.ts @@ -3,10 +3,10 @@ import { ColorSchemeMapping } from '../../themes/types' const createColorScheme = (color: string, customValues = {}) => { return { - foregroundDefault: colors[color][600], - backgroundDefault: colors[color][50], - borderDefault: colors[color][600], - shadowDefault: colors[color][600], + foreground: colors[color][600], + background: colors[color][50], + border: colors[color][600], + shadow: colors[color][600], foregroundHover: colors[color][50], backgroundHover: colors[color][600], @@ -38,21 +38,21 @@ const createColorScheme = (color: string, customValues = {}) => { export const colorScheme: ColorSchemeMapping = { default: { - foregroundDefault: colors.white, - foregroundDefault1: colors.grey[250], - foregroundDefault3: colors.grey[300], - foregroundDefault4: colors.white, + foreground: colors.white, + foreground1: colors.grey[250], + foreground3: colors.grey[300], + foreground4: colors.white, - backgroundDefault: colors.grey[650], - backgroundDefault1: colors.grey[700], - backgroundDefault2: colors.grey[800], - backgroundDefault3: colors.grey[550], + background: colors.grey[650], + background1: colors.grey[700], + background2: colors.grey[800], + background3: colors.grey[550], - borderDefault1: colors.grey[850], - borderDefault2: colors.grey[900], - borderDefault: colors.grey[450], // buttons + border1: colors.grey[850], + border2: colors.grey[900], + border: colors.grey[450], // buttons - shadowDefault: colors.black, // opacity 25% + shadow: colors.black, // opacity 25% shadowHover: colors.black, foregroundHover: colors.white, @@ -102,62 +102,62 @@ export const colorScheme: ColorSchemeMapping = { borderDisabled: colors.grey[550], shadowDisabled: undefined, }, - primary: { - foregroundDefault: colors.primary[400], - foregroundDefault1: colors.primary[400], - foregroundDefault2: colors.primary[400], - foregroundDefault3: colors.primary[200], - - backgroundDefault: colors.primary[600], - backgroundDefault1: colors.primary[900], - backgroundDefault2: colors.primary[900], - backgroundDefault3: colors.primary[1000], - - borderDefault1: colors.primary[800], - borderDefault2: colors.primary[800], - borderDefault: colors.grey[450], - - shadowDefault: colors.black, + brand: { + foreground: colors.brand[400], + foreground1: colors.brand[400], + foreground2: colors.brand[400], + foreground3: colors.brand[200], + + background: colors.brand[600], + background1: colors.brand[900], + background2: colors.brand[900], + background3: colors.brand[1000], + + border1: colors.brand[800], + border2: colors.brand[800], + border: colors.grey[450], + + shadow: colors.black, shadowHover: colors.black, - foregroundHover: colors.primary[400], + foregroundHover: colors.brand[400], - borderHover: colors.primary[600], + borderHover: colors.brand[600], - backgroundHover: colors.primary[500], - backgroundHover1: colors.primary[900], + backgroundHover: colors.brand[500], + backgroundHover1: colors.brand[900], - foregroundPressed: colors.primary[200], - backgroundPressed: colors.primary[700], - borderPressed: colors.primary[800], + foregroundPressed: colors.brand[200], + backgroundPressed: colors.brand[700], + borderPressed: colors.brand[800], shadowPressed: undefined, - foregroundActive: colors.primary[400], - foregroundActive1: colors.primary[400], - foregroundActive2: colors.primary[200], + foregroundActive: colors.brand[400], + foregroundActive1: colors.brand[400], + foregroundActive2: colors.brand[200], - backgroundActive: colors.primary[400], - backgroundActive1: colors.primary[400], + backgroundActive: colors.brand[400], + backgroundActive1: colors.brand[400], // active border no change (just copied) - borderActive1: colors.primary[800], - borderActive2: colors.primary[800], + borderActive1: colors.brand[800], + borderActive2: colors.brand[800], borderActive: colors.grey[450], // buttons shadowActive: undefined, - foregroundFocus: colors.primary[400], - foregroundFocus1: colors.primary[400], - foregroundFocus2: colors.primary[400], - foregroundFocus3: colors.primary[200], + foregroundFocus: colors.brand[400], + foregroundFocus1: colors.brand[400], + foregroundFocus2: colors.brand[400], + foregroundFocus3: colors.brand[200], - backgroundFocus: colors.primary[600], - backgroundFocus1: colors.primary[900], - backgroundFocus2: colors.primary[900], - backgroundFocus3: colors.primary[1000], + backgroundFocus: colors.brand[600], + backgroundFocus1: colors.brand[900], + backgroundFocus2: colors.brand[900], + backgroundFocus3: colors.brand[1000], borderFocus: colors.black, - borderFocus1: colors.primary[400], // only input + borderFocus1: colors.brand[400], // only input borderFocusWithin: colors.white, shadowFocus: undefined, @@ -171,10 +171,10 @@ export const colorScheme: ColorSchemeMapping = { shadowDisabled: undefined, }, black: { - foregroundDefault: colors.black, - backgroundDefault: colors.white, - borderDefault: colors.black, - shadowDefault: colors.black, + foreground: colors.black, + background: colors.white, + border: colors.black, + shadow: colors.black, foregroundHover: colors.white, backgroundHover: colors.black, @@ -202,10 +202,10 @@ export const colorScheme: ColorSchemeMapping = { shadowDisabled: colors.black, }, white: { - foregroundDefault: colors.white, - backgroundDefault: colors.black, - borderDefault: colors.white, - shadowDefault: colors.white, + foreground: colors.white, + background: colors.black, + border: colors.white, + shadow: colors.white, foregroundHover: colors.black, backgroundHover: colors.white, @@ -235,7 +235,7 @@ export const colorScheme: ColorSchemeMapping = { grey: createColorScheme('grey'), green: createColorScheme('green'), orange: createColorScheme('orange', { - backgroundDefault: colors.black, + background: colors.black, foregroundHover: colors.black, foregroundActive: colors.black, foregroundFocus: colors.black, @@ -245,7 +245,7 @@ export const colorScheme: ColorSchemeMapping = { pink: createColorScheme('pink'), red: createColorScheme('red'), yellow: createColorScheme('yellow', { - backgroundDefault: colors.black, + background: colors.black, foregroundHover: colors.black, foregroundActive: colors.black, foregroundFocus: colors.black, diff --git a/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts b/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts index 51c2d7ad25..47c18d77bf 100644 --- a/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts @@ -18,9 +18,9 @@ export default (siteVars: any): Partial => { borderColorHover: siteVars.colors.grey[450], borderColorFocusIndicator: siteVars.colors.white, - primaryBackgroundColorActive: siteVars.colors.primary[500], - primaryBackgroundColorHover: siteVars.colors.primary[500], - primaryBackgroundColorFocus: siteVars.colors.primary[800], + primaryBackgroundColorActive: siteVars.colors.brand[500], + primaryBackgroundColorHover: siteVars.colors.brand[500], + primaryBackgroundColorFocus: siteVars.colors.brand[800], primaryBorderColorFocus: siteVars.colors.grey[800], primaryBorderColorFocusIndicator: siteVars.colors.white, @@ -32,9 +32,9 @@ export default (siteVars: any): Partial => { circularBorderColor: siteVars.colors.grey[250], circularBorderColorFocusIndicator: siteVars.colors.grey[800], - textColorHover: siteVars.colors.primary[300], - textPrimaryColorHover: siteVars.colors.primary[300], + textColorHover: siteVars.colors.brand[300], + textPrimaryColorHover: siteVars.colors.brand[300], textSecondaryColor: siteVars.colors.grey[300], - textSecondaryColorHover: siteVars.colors.primary[300], + textSecondaryColorHover: siteVars.colors.brand[300], } } diff --git a/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts index 88280018cb..f6c65a7c4a 100644 --- a/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts @@ -3,12 +3,12 @@ import { ChatMessageVariables } from '../../../teams/components/Chat/chatMessage export default (siteVars: any): Partial => { return { backgroundColor: siteVars.colors.grey[600], - backgroundColorMine: siteVars.colors.primary[900], + backgroundColorMine: siteVars.colors.brand[900], authorColor: siteVars.colors.grey[250], contentColor: siteVars.colors.white, color: siteVars.colors.white, timestampColorMine: siteVars.colors.grey[250], - contentFocusOutlineColor: siteVars.colors.primary[600], + contentFocusOutlineColor: siteVars.colors.brand[600], hasMentionNubbinColor: siteVars.colors.orange[300], isImportantColor: siteVars.colors.red[300], } diff --git a/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts b/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts index 30734dbd46..608c850432 100644 --- a/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts @@ -3,9 +3,9 @@ import { extendColorScheme } from '../../../colorUtils' export default (siteVars: any): Partial => ({ colorScheme: extendColorScheme(siteVars.colorScheme, { - primary: { - foregroundDefault: siteVars.colors.primary[400], - borderDefault: siteVars.colors.primary[400], + brand: { + foreground: siteVars.colors.brand[400], + border: siteVars.colors.brand[400], }, }), textColor: siteVars.colors.grey[250], diff --git a/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts b/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts index 84b5d8d3ea..485fc9ee52 100644 --- a/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Input/inputVariables.ts @@ -4,7 +4,7 @@ export default (siteVars: any): Partial => { return { backgroundColor: siteVars.colors.grey[600], fontColor: siteVars.colors.grey[250], - inputFocusBorderColor: `transparent transparent ${siteVars.colors.primary[600]} transparent`, + inputFocusBorderColor: `transparent transparent ${siteVars.colors.brand[600]} transparent`, iconColor: siteVars.colors.grey[250], placeholderColor: siteVars.colors.grey[250], } diff --git a/packages/react/src/themes/teams-dark/components/List/listItemVariables.ts b/packages/react/src/themes/teams-dark/components/List/listItemVariables.ts index 3332545097..2f7d20baf5 100644 --- a/packages/react/src/themes/teams-dark/components/List/listItemVariables.ts +++ b/packages/react/src/themes/teams-dark/components/List/listItemVariables.ts @@ -1,7 +1,7 @@ import { ListItemVariables } from 'src/themes/teams/components/List/listItemVariables' export default (siteVars: any): Partial => ({ - selectedFocusOutlineColor: siteVars.colors.primary[600], + selectedFocusOutlineColor: siteVars.colors.brand[600], selectableFocusHoverBackgroundColor: siteVars.colors.grey[500], selectedBackgroundColor: siteVars.colors.grey[500], }) diff --git a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts index a34ee70d20..5ef3b73738 100644 --- a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts @@ -7,13 +7,13 @@ export default (siteVars: any): Partial => ({ borderActive: siteVars.colors.grey[600], backgroundFocus1: siteVars.colors.grey[500], }, - primary: { + brand: { foregroundHover: siteVars.colors.white, - backgroundHover: siteVars.colors.primary[300], - borderActive: siteVars.colors.primary[400], + backgroundHover: siteVars.colors.brand[300], + borderActive: siteVars.colors.brand[400], foregroundActive: siteVars.colors.white, foregroundFocus: siteVars.colors.white, - backgroundFocus1: siteVars.colors.primary[300], + backgroundFocus1: siteVars.colors.brand[300], }, }), @@ -21,9 +21,9 @@ export default (siteVars: any): Partial => ({ colorActive: siteVars.colors.white, primaryBorderColor: siteVars.colors.grey[600], - pointingIndicatorBackgroundColor: siteVars.colors.primary[400], + pointingIndicatorBackgroundColor: siteVars.colors.brand[400], verticalBackgroundColor: siteVars.colors.grey[600], verticalBackgroundColorFocus: siteVars.colors.grey[550], - iconOnlyColorActive: siteVars.colors.primary[400], + iconOnlyColorActive: siteVars.colors.brand[400], }) diff --git a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts index e82a70d4b0..935d1089b2 100644 --- a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts @@ -8,7 +8,7 @@ export default (siteVars: any): Partial => ({ textColorChecked: siteVars.colors.white, iconBorderColorDefaultHover: siteVars.colors.white, - iconBorderColorChecked: siteVars.colors.primary[400], + iconBorderColorChecked: siteVars.colors.brand[400], - iconBackgroundColorChecked: siteVars.colors.primary[400], + iconBackgroundColorChecked: siteVars.colors.brand[400], }) diff --git a/packages/react/src/themes/teams-dark/components/Reaction/reactionVariables.ts b/packages/react/src/themes/teams-dark/components/Reaction/reactionVariables.ts index d408b1aef0..594a6aba8f 100644 --- a/packages/react/src/themes/teams-dark/components/Reaction/reactionVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Reaction/reactionVariables.ts @@ -1,8 +1,8 @@ import { ReactionVariables } from '../../../teams/components/Reaction/reactionVariables' export default (siteVars: any): Partial => ({ - meReactingColor: siteVars.colors.primary[400], - meReactingColorHover: siteVars.colors.primary[300], + meReactingColor: siteVars.colors.brand[400], + meReactingColorHover: siteVars.colors.brand[300], otherReactingColor: siteVars.colors.grey[300], otherReactingColorHover: siteVars.colors.white, }) diff --git a/packages/react/src/themes/teams-dark/components/Text/textVariables.ts b/packages/react/src/themes/teams-dark/components/Text/textVariables.ts index 3fbb9494dd..5c12958b4c 100644 --- a/packages/react/src/themes/teams-dark/components/Text/textVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Text/textVariables.ts @@ -2,7 +2,7 @@ import { TeamsTextVariables } from '../../../teams/components/Text/textVariables export default (siteVariables): Partial => ({ atMentionMeColor: siteVariables.colors.orange[300], - atMentionOtherColor: siteVariables.colors.primary[400], + atMentionOtherColor: siteVariables.colors.brand[400], disabledColor: siteVariables.colors.grey[450], errorColor: siteVariables.colors.red[300], importantColor: siteVariables.colors.red[300], diff --git a/packages/react/src/themes/teams-high-contrast/colors.ts b/packages/react/src/themes/teams-high-contrast/colors.ts index dbd2675867..ee385cea7e 100644 --- a/packages/react/src/themes/teams-high-contrast/colors.ts +++ b/packages/react/src/themes/teams-high-contrast/colors.ts @@ -9,10 +9,10 @@ export const red = '#f00' // COLOR SCHEME const createColorScheme = (customValues = {}) => { return { - foregroundDefault: colors.white, - backgroundDefault: colors.black, - borderDefault: colors.white, - shadowDefault: colors.white, + foreground: colors.white, + background: colors.black, + border: colors.white, + shadow: colors.white, foregroundHover: accessibleYellow, backgroundHover: colors.black, @@ -44,21 +44,21 @@ const createColorScheme = (customValues = {}) => { export const colorScheme: ColorSchemeMapping = { default: { - foregroundDefault: colors.white, - foregroundDefault1: colors.white, - foregroundDefault2: colors.white, - foregroundDefault3: colors.white, + foreground: colors.white, + foreground1: colors.white, + foreground2: colors.white, + foreground3: colors.white, - backgroundDefault: colors.black, - backgroundDefault1: colors.black, - backgroundDefault2: colors.black, - backgroundDefault3: colors.black, + background: colors.black, + background1: colors.black, + background2: colors.black, + background3: colors.black, - borderDefault1: colors.white, - borderDefault2: colors.white, - borderDefault: colors.white, // buttons + border1: colors.white, + border2: colors.white, + border: colors.white, // buttons - shadowDefault: colors.black, // opacity 25% + shadow: colors.black, // opacity 25% shadowHover: colors.black, foregroundHover: colors.black, @@ -108,22 +108,22 @@ export const colorScheme: ColorSchemeMapping = { borderDisabled: accessibleGreen, shadowDisabled: undefined, }, - primary: { - foregroundDefault: colors.white, - foregroundDefault1: accessibleYellow, - foregroundDefault2: accessibleYellow, - foregroundDefault3: accessibleYellow, - - backgroundDefault: colors.white, - backgroundDefault1: colors.black, - backgroundDefault2: colors.black, - backgroundDefault3: colors.black, - - borderDefault1: colors.white, - borderDefault2: colors.white, - borderDefault: colors.white, // buttons - - shadowDefault: colors.black, // opacity 25% + brand: { + foreground: colors.white, + foreground1: accessibleYellow, + foreground2: accessibleYellow, + foreground3: accessibleYellow, + + background: colors.white, + background1: colors.black, + background2: colors.black, + background3: colors.black, + + border1: colors.white, + border2: colors.white, + border: colors.white, // buttons + + shadow: colors.black, // opacity 25% shadowHover: colors.black, foregroundHover: colors.black, diff --git a/packages/react/src/themes/teams-high-contrast/components/Menu/menuVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Menu/menuVariables.ts index 0272b72970..0f010931f7 100644 --- a/packages/react/src/themes/teams-high-contrast/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/components/Menu/menuVariables.ts @@ -3,7 +3,7 @@ import { extendColorScheme } from '../../../colorUtils' export default (siteVars: any): Partial => ({ colorScheme: extendColorScheme(siteVars.colorScheme, { - primary: { + brand: { foregroundActive: siteVars.colors.black, }, }), diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index 79214b818b..ad37c874ce 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -5,10 +5,11 @@ import { PrimitiveColors, ColorSchemeMapping, ColorVariants, + ContextualColors, } from '../types' -export const emphasisColors: EmphasisColors = { - primary: { +export const emphasisColors: ContextualColors = { + brand: { 50: '#F4F4FC', // siteVariables.brand16, same as prev 100: '#E5E5F1', // brand15 200: '#E2E2F6', // 100, light brand14, dark theme brand02 @@ -169,10 +170,10 @@ export const colors: ColorPalette = { const createColorScheme = (color: string, customValues = {}) => { return { - foregroundDefault: colors[color][600], - backgroundDefault: colors[color][50], - borderDefault: colors[color][600], - shadowDefault: colors[color][600], + foreground: colors[color][600], + background: colors[color][50], + border: colors[color][600], + shadow: colors[color][600], foregroundHover: colors[color][50], backgroundHover: colors[color][600], @@ -203,7 +204,7 @@ const createColorScheme = (color: string, customValues = {}) => { } const lightColorOverrides = { - backgroundDefault: colors.black, + background: colors.black, foregroundHover: colors.black, foregroundActive: colors.black, foregroundFocus: colors.black, @@ -213,21 +214,21 @@ const lightColorOverrides = { export const colorScheme: ColorSchemeMapping = { default: { - foregroundDefault: colors.grey[750], - foregroundDefault1: colors.grey[500], - foregroundDefault2: colors.grey[450], - foregroundDefault3: colors.white, + foreground: colors.grey[750], + foreground1: colors.grey[500], + foreground2: colors.grey[450], + foreground3: colors.white, - backgroundDefault: colors.white, - backgroundDefault1: colors.grey[50], - backgroundDefault2: colors.grey[100], - backgroundDefault3: colors.grey[150], + background: colors.white, + background1: colors.grey[50], + background2: colors.grey[100], + background3: colors.grey[150], - borderDefault1: colors.grey[150], - borderDefault2: colors.grey[200], - borderDefault: colors.grey[200], // buttons + border1: colors.grey[150], + border2: colors.grey[200], + border: colors.grey[200], // buttons - shadowDefault: colors.black, // opacity 10% + shadow: colors.black, // opacity 10% shadowHover: colors.black, foregroundHover: colors.grey[750], @@ -277,61 +278,61 @@ export const colorScheme: ColorSchemeMapping = { borderDisabled: colors.grey[150], shadowDisabled: undefined, }, - primary: { - foregroundDefault: colors.primary[600], - foregroundDefault1: colors.primary[600], - foregroundDefault2: colors.primary[700], - foregroundDefault3: colors.primary[200], - - backgroundDefault: colors.primary[600], - backgroundDefault1: colors.primary[100], - backgroundDefault2: colors.primary[900], - backgroundDefault3: colors.primary[1000], - - borderDefault1: colors.primary[200], - borderDefault2: colors.primary[300], - borderDefault: colors.grey[200], - - shadowDefault: colors.black, + brand: { + foreground: colors.brand[600], + foreground1: colors.brand[600], + foreground2: colors.brand[700], + foreground3: colors.brand[200], + + background: colors.brand[600], + background1: colors.brand[100], + background2: colors.brand[900], + background3: colors.brand[1000], + + border1: colors.brand[200], + border2: colors.brand[300], + border: colors.grey[200], + + shadow: colors.black, shadowHover: colors.black, - foregroundHover: colors.primary[600], + foregroundHover: colors.brand[600], - borderHover: colors.primary[300], + borderHover: colors.brand[300], - backgroundHover: colors.primary[700], - backgroundHover2: colors.primary[50], + backgroundHover: colors.brand[700], + backgroundHover1: colors.brand[50], - foregroundPressed: colors.primary[800], - backgroundPressed: colors.primary[800], // it's 900 on the button - 800 is same as hover - borderPressed: colors.primary[300], + foregroundPressed: colors.brand[800], + backgroundPressed: colors.brand[800], // it's 900 on the button - 800 is same as hover + borderPressed: colors.brand[300], shadowPressed: undefined, - foregroundActive: colors.primary[600], - foregroundActive1: colors.primary[600], - foregroundActive2: colors.primary[200], + foregroundActive: colors.brand[600], + foregroundActive1: colors.brand[600], + foregroundActive2: colors.brand[200], - backgroundActive: colors.primary[600], - backgroundActive1: colors.primary[600], + backgroundActive: colors.brand[600], + backgroundActive1: colors.brand[600], - borderActive1: colors.primary[200], - borderActive2: colors.primary[300], + borderActive1: colors.brand[200], + borderActive2: colors.brand[300], borderActive: colors.grey[200], shadowActive: undefined, - foregroundFocus: colors.primary[600], - foregroundFocus1: colors.primary[600], - foregroundFocus2: colors.primary[700], - foregroundFocus3: colors.primary[200], + foregroundFocus: colors.brand[600], + foregroundFocus1: colors.brand[600], + foregroundFocus2: colors.brand[700], + foregroundFocus3: colors.brand[200], - backgroundFocus: colors.primary[600], - backgroundFocus1: colors.primary[100], - backgroundFocus2: colors.primary[900], - backgroundFocus3: colors.primary[1000], + backgroundFocus: colors.brand[600], + backgroundFocus1: colors.brand[100], + backgroundFocus2: colors.brand[900], + backgroundFocus3: colors.brand[1000], borderFocus: colors.black, - borderFocus1: colors.primary[600], // only input + borderFocus1: colors.brand[600], // only input borderFocusWithin: colors.white, shadowFocus: undefined, @@ -345,10 +346,10 @@ export const colorScheme: ColorSchemeMapping = { shadowDisabled: undefined, }, black: { - foregroundDefault: colors.black, - backgroundDefault: colors.white, - borderDefault: colors.black, - shadowDefault: colors.black, + foreground: colors.black, + background: colors.white, + border: colors.black, + shadow: colors.black, foregroundHover: colors.white, backgroundHover: colors.black, @@ -376,10 +377,10 @@ export const colorScheme: ColorSchemeMapping = { shadowDisabled: colors.black, }, white: { - foregroundDefault: colors.white, - backgroundDefault: colors.black, - borderDefault: colors.white, - shadowDefault: colors.white, + foreground: colors.white, + background: colors.black, + border: colors.white, + shadow: colors.white, foregroundHover: colors.black, backgroundHover: colors.white, @@ -418,7 +419,7 @@ export const availableColors = [ 'default', 'black', 'white', - 'primary', + 'brand', 'grey', 'red', 'yellow', @@ -432,7 +433,7 @@ export const isValidColor = (color: string): boolean => { } export const getColorSchemeKey = (color: string, primary?: boolean): string => { - return color && isValidColor(color) ? color : primary ? 'primary' : 'default' + return color && isValidColor(color) ? color : primary ? 'brand' : 'default' } export const getColorScheme = ( diff --git a/packages/react/src/themes/teams/components/Button/buttonVariables.ts b/packages/react/src/themes/teams/components/Button/buttonVariables.ts index 9ef14ab2e9..c779631d11 100644 --- a/packages/react/src/themes/teams/components/Button/buttonVariables.ts +++ b/packages/react/src/themes/teams/components/Button/buttonVariables.ts @@ -101,10 +101,10 @@ export default (siteVars: any): ButtonVariables => { primaryColorActive: siteVars.colors.white, primaryColorHover: siteVars.colors.white, primaryColorFocus: siteVars.colors.white, - primaryBackgroundColor: siteVars.colors.primary[600], - primaryBackgroundColorActive: siteVars.colors.primary[900], - primaryBackgroundColorHover: siteVars.colors.primary[800], - primaryBackgroundColorFocus: siteVars.colors.primary[800], + primaryBackgroundColor: siteVars.colors.brand[600], + primaryBackgroundColorActive: siteVars.colors.brand[900], + primaryBackgroundColorHover: siteVars.colors.brand[800], + primaryBackgroundColorFocus: siteVars.colors.brand[800], primaryBorderColor: 'transparent', primaryBorderColorActive: 'transparent', primaryBorderColorHover: 'transparent', @@ -126,12 +126,12 @@ export default (siteVars: any): ButtonVariables => { circularBorderColorFocus: 'transparent', circularBorderColorFocusIndicator: siteVars.colors.white, - textColor: siteVars.colors.primary[600], - textColorHover: siteVars.colors.primary[800], - textPrimaryColor: siteVars.colors.primary[600], - textPrimaryColorHover: siteVars.colors.primary[800], + textColor: siteVars.colors.brand[600], + textColorHover: siteVars.colors.brand[800], + textPrimaryColor: siteVars.colors.brand[600], + textPrimaryColorHover: siteVars.colors.brand[800], textSecondaryColor: siteVars.colors.grey[450], - textSecondaryColorHover: siteVars.colors.primary[800], + textSecondaryColorHover: siteVars.colors.brand[800], boxShadow: siteVars.shadowLevel1, borderRadiusFocused: pxToRem(3), diff --git a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts index 35b8e7e9a5..33fc3d1cea 100644 --- a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts @@ -33,7 +33,7 @@ export default (siteVars): ChatMessageVariables => ({ actionMenuPositionRight: pxToRem(5), actionMenuPositionTop: pxToRem(-30), backgroundColor: siteVars.colors.white, - backgroundColorMine: siteVars.colors.primary[100], + backgroundColorMine: siteVars.colors.brand[100], borderRadius: pxToRem(3), color: 'rgb(64, 64, 64)', offset: pxToRem(100), @@ -43,7 +43,7 @@ export default (siteVars): ChatMessageVariables => ({ authorFontWeight: siteVars.fontWeightRegular, headerMarginBottom: pxToRem(2), contentColor: siteVars.colors.grey[750], - contentFocusOutlineColor: siteVars.colors.primary[600], + contentFocusOutlineColor: siteVars.colors.brand[600], border: 'none', badgeShadow: siteVars.shadowLevel1Darker, isImportant: false, diff --git a/packages/react/src/themes/teams/components/Divider/dividerStyles.ts b/packages/react/src/themes/teams/components/Divider/dividerStyles.ts index 77d8d891b2..7e3cb10c72 100644 --- a/packages/react/src/themes/teams/components/Divider/dividerStyles.ts +++ b/packages/react/src/themes/teams/components/Divider/dividerStyles.ts @@ -13,7 +13,7 @@ const beforeAndAfter = ( content: '""', flex: 1, height: `${size + 1}px`, - background: _.get(colors, 'foregroundDefault', variables.dividerColor), + background: _.get(colors, 'foreground', variables.dividerColor), }) const dividerStyles: ComponentSlotStylesInput = { @@ -21,7 +21,7 @@ const dividerStyles: ComponentSlotStylesInput pxToRem(v)) export default (siteVars): DropdownVariables => ({ backgroundColor: siteVars.colors.grey[100], - borderColorFocus: siteVars.colors.primary[600], + borderColorFocus: siteVars.colors.brand[600], borderRadius: `${_3px_asRem} ${_3px_asRem} ${_2px_asRem} ${_2px_asRem}`, borderWidth: `0 0 ${pxToRem(2)} 0`, color: siteVars.bodyColor, @@ -37,9 +37,9 @@ export default (siteVars): DropdownVariables => ({ listBoxShadow: `0 .2rem .6rem 0 ${siteVars.colors.grey[250]}`, listMaxHeight: pxToRem(296), listItemBackgroundColor: siteVars.colors.white, - listItemBackgroundColorActive: siteVars.colors.primary[600], + listItemBackgroundColorActive: siteVars.colors.brand[600], listItemColorActive: siteVars.colors.white, - selectedItemBackgroundColorFocus: siteVars.colors.primary[200], + selectedItemBackgroundColorFocus: siteVars.colors.brand[200], selectedItemsMaxHeight: pxToRem(82), toggleIndicatorSize: pxToRem(32), width: pxToRem(356), diff --git a/packages/react/src/themes/teams/components/Embed/embedVariables.ts b/packages/react/src/themes/teams/components/Embed/embedVariables.ts index ddd2ba8e9a..a2592cee96 100644 --- a/packages/react/src/themes/teams/components/Embed/embedVariables.ts +++ b/packages/react/src/themes/teams/components/Embed/embedVariables.ts @@ -12,5 +12,5 @@ export default (siteVariables): EmbedVariables => ({ width: undefined, height: undefined, - focusBorderColor: siteVariables.colors.primary[500], + focusBorderColor: siteVariables.colors.brand[500], }) diff --git a/packages/react/src/themes/teams/components/Header/headerDescriptionStyles.ts b/packages/react/src/themes/teams/components/Header/headerDescriptionStyles.ts index 2157fc6093..495e5b5342 100644 --- a/packages/react/src/themes/teams/components/Header/headerDescriptionStyles.ts +++ b/packages/react/src/themes/teams/components/Header/headerDescriptionStyles.ts @@ -10,7 +10,7 @@ const headerStyles: ComponentSlotStylesInput = { const colors = v.colorScheme[p.color] return { display: 'block', - color: _.get(colors, 'foregroundDefault', v.color), + color: _.get(colors, 'foreground', v.color), textAlign: p.textAlign as TextAlignProperty, ...(p.description && { marginBottom: 0 }), } diff --git a/packages/react/src/themes/teams/components/Icon/iconStyles.ts b/packages/react/src/themes/teams/components/Icon/iconStyles.ts index 67414690aa..af049d9518 100644 --- a/packages/react/src/themes/teams/components/Icon/iconStyles.ts +++ b/packages/react/src/themes/teams/components/Icon/iconStyles.ts @@ -76,7 +76,7 @@ const getIconSize = (size: SizeValue, sizeModifier: IconSizeModifier): number => } const getIconColor = (variables, colors) => { - return _.get(colors, 'foregroundDefault', variables.color || 'currentColor') + return _.get(colors, 'foreground', variables.color || 'currentColor') } const iconStyles: ComponentSlotStylesInput = { diff --git a/packages/react/src/themes/teams/components/Input/inputVariables.ts b/packages/react/src/themes/teams/components/Input/inputVariables.ts index f2b07236b6..f68da2ea1a 100644 --- a/packages/react/src/themes/teams/components/Input/inputVariables.ts +++ b/packages/react/src/themes/teams/components/Input/inputVariables.ts @@ -11,7 +11,7 @@ export default (siteVars): Partial => ({ fontSize: siteVars.fontSizes.medium, iconColor: siteVars.bodyColor, - inputFocusBorderColor: `transparent transparent ${siteVars.colors.primary[600]} transparent`, + inputFocusBorderColor: `transparent transparent ${siteVars.colors.brand[600]} transparent`, inputFocusBorderRadius: `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`, placeholderColor: siteVars.colors.grey[500], }) diff --git a/packages/react/src/themes/teams/components/Label/labelStyles.ts b/packages/react/src/themes/teams/components/Label/labelStyles.ts index 0e506cadf8..0c29d8c9b5 100644 --- a/packages/react/src/themes/teams/components/Label/labelStyles.ts +++ b/packages/react/src/themes/teams/components/Label/labelStyles.ts @@ -1,5 +1,3 @@ -import * as _ from 'lodash' - import { pxToRem } from '../../../../lib' import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' import { LabelProps } from '../../../../components/Label/Label' @@ -16,8 +14,8 @@ const labelStyles: ComponentSlotStylesInput = { overflow: 'hidden', height: v.height, lineHeight: v.height, - color: colors.backgroundDefault, - backgroundColor: colors.foregroundDefault, + color: colors.background, + backgroundColor: colors.foreground, fontSize: pxToRem(14), borderRadius: pxToRem(3), padding: v.padding, diff --git a/packages/react/src/themes/teams/components/Label/labelVariables.ts b/packages/react/src/themes/teams/components/Label/labelVariables.ts index 75c5febbd7..ab5ddc8cdf 100644 --- a/packages/react/src/themes/teams/components/Label/labelVariables.ts +++ b/packages/react/src/themes/teams/components/Label/labelVariables.ts @@ -18,8 +18,8 @@ export default (siteVars: SiteVariablesPrepared): LabelVariables => { return { colorScheme: extendColorScheme(siteVars.colorScheme, { default: { - backgroundDefault: color, - foregroundDefault: 'rgb(232, 232, 232)', + background: color, + foreground: 'rgb(232, 232, 232)', }, }), circularRadius: pxToRem(9999), diff --git a/packages/react/src/themes/teams/components/List/listItemVariables.ts b/packages/react/src/themes/teams/components/List/listItemVariables.ts index b36d34af21..066d44298d 100644 --- a/packages/react/src/themes/teams/components/List/listItemVariables.ts +++ b/packages/react/src/themes/teams/components/List/listItemVariables.ts @@ -53,9 +53,9 @@ export default (siteVariables: any): ListItemVariables => { // Selectable selectableFocusHoverColor: siteVariables.colors.white, - selectableFocusHoverBackgroundColor: siteVariables.colors.primary[500], + selectableFocusHoverBackgroundColor: siteVariables.colors.brand[500], selectedColor: siteVariables.bodyColor, selectedBackgroundColor: siteVariables.colors.grey[100], - selectedFocusOutlineColor: siteVariables.colors.primary[600], + selectedFocusOutlineColor: siteVariables.colors.brand[600], } } diff --git a/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts b/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts index c1553c685c..dfa4a0fb4a 100644 --- a/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts @@ -6,9 +6,7 @@ import { getColorScheme } from '../../colors' const menuDividerStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => { const colorScheme = getColorScheme(v.colorScheme, p.color, p.primary) - const borderColor = p.primary - ? v.primaryBorderColor - : v.borderColor || colorScheme.borderDefault + const borderColor = p.primary ? v.primaryBorderColor : v.borderColor || colorScheme.border const borderType = p.vertical ? 'borderTop' : 'borderLeft' return p.content diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index b56005fe42..51e9695d59 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -95,7 +95,7 @@ const pointingBeak = ({ props, variables: v, colorScheme }): ICSSInJSStyle => { let borders: ICSSInJSStyle const backgroundColor = v.backgroundColorActive || colorScheme.backgroundActive1 - const borderColor = v.borderColor || primary ? v.primaryBorderColor : colorScheme.borderDefault + const borderColor = v.borderColor || primary ? v.primaryBorderColor : colorScheme.border if (pointing === 'start') { borders = { @@ -190,7 +190,7 @@ const menuItemStyles: ComponentSlotStylesInput { default: { borderActive: siteVars.colors.grey[600], }, - primary: { + brand: { foregroundHover: siteVars.colors.white, - backgroundHover: siteVars.colors.primary[300], + backgroundHover: siteVars.colors.brand[300], foregroundActive: siteVars.colors.white, - borderActive: siteVars.colors.primary[600], - backgroundActive1: siteVars.colors.primary[500], // it's 600 in the color scheme + borderActive: siteVars.colors.brand[600], + backgroundActive1: siteVars.colors.brand[500], // it's 600 in the color scheme foregroundFocus: siteVars.colors.white, - backgroundFocus1: siteVars.colors.primary[300], + backgroundFocus1: siteVars.colors.brand[300], }, }), color: siteVars.colors.grey[500], @@ -78,7 +78,7 @@ export default (siteVars: any): MenuVariables => { backgroundColorHover: undefined, backgroundColorActive: undefined, - iconOnlyColorActive: siteVars.colors.primary[600], + iconOnlyColorActive: siteVars.colors.brand[600], underlinedBorderColor: siteVars.colors.grey[200], @@ -91,10 +91,10 @@ export default (siteVars: any): MenuVariables => { verticalDividerMargin: `${pxToRem(8)} 0`, verticalItemBorderWidth: pxToRem(2), verticalItemBorderColor: 'transparent', - verticalPointingBorderColor: siteVars.colorScheme.primary.borderActive, // TODO: why is the default having primary color?! + verticalPointingBorderColor: siteVars.colorScheme.brand.borderActive, verticalBackgroundColorFocus: siteVars.colors.grey[150], - pointingIndicatorBackgroundColor: siteVars.colors.primary[600], + pointingIndicatorBackgroundColor: siteVars.colors.brand[600], underlinedBottomBorderWidth: pxToRem(2), primaryBorderColor: siteVars.colors.grey[100], diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts index 74f8fad1cf..987f8ee914 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts @@ -33,9 +33,9 @@ export default (siteVars: any): RadioGroupItemVariables => ({ textColorChecked: siteVars.colors.grey[750], iconBorderColorDefaultHover: siteVars.colors.grey[750], - iconBorderColorChecked: siteVars.colors.primary[600], + iconBorderColorChecked: siteVars.colors.brand[600], - iconBackgroundColorChecked: siteVars.colors.primary[600], + iconBackgroundColorChecked: siteVars.colors.brand[600], padding: `0 ${pxToRem(4)}`, }) diff --git a/packages/react/src/themes/teams/components/Reaction/reactionVariables.ts b/packages/react/src/themes/teams/components/Reaction/reactionVariables.ts index 8a692c2eb5..0b7d4c36c4 100644 --- a/packages/react/src/themes/teams/components/Reaction/reactionVariables.ts +++ b/packages/react/src/themes/teams/components/Reaction/reactionVariables.ts @@ -16,13 +16,13 @@ export interface ReactionVariables { } export default (siteVars): ReactionVariables => ({ - meReactingColor: siteVars.colors.primary[600], - meReactingColorHover: siteVars.colors.primary[800], + meReactingColor: siteVars.colors.brand[600], + meReactingColorHover: siteVars.colors.brand[800], otherReactingColor: siteVars.colors.grey[450], otherReactingColorHover: siteVars.colors.grey[750], contentFontSize: siteVars.fontSizes.small, fontWeightHover: siteVars.fontWeightBold, - outlineColorFocus: siteVars.colors.primary[600], + outlineColorFocus: siteVars.colors.brand[600], outlineWidthFocus: pxToRem(2), outlineOffsetFocus: pxToRem(-2), meReacting: false, diff --git a/packages/react/src/themes/teams/components/Segment/segmentStyles.ts b/packages/react/src/themes/teams/components/Segment/segmentStyles.ts index 1c66c0e63c..f3400bab1b 100644 --- a/packages/react/src/themes/teams/components/Segment/segmentStyles.ts +++ b/packages/react/src/themes/teams/components/Segment/segmentStyles.ts @@ -14,10 +14,10 @@ const segmentStyles: ComponentSlotStylesInput = boxShadow: `0 1px 1px 1px ${v.boxShadowColor}`, color: v.color, backgroundColor: v.backgroundColor, - ...(p.color && { borderColor: colors.foregroundDefault }), + ...(p.color && { borderColor: colors.foreground }), ...(p.inverted && { color: v.backgroundColor, - backgroundColor: p.color ? colors.foregroundDefault : v.color, + backgroundColor: p.color ? colors.foreground : v.color, }), } }, diff --git a/packages/react/src/themes/teams/components/Status/statusVariables.ts b/packages/react/src/themes/teams/components/Status/statusVariables.ts index 12bc113c7f..9abb603dfe 100644 --- a/packages/react/src/themes/teams/components/Status/statusVariables.ts +++ b/packages/react/src/themes/teams/components/Status/statusVariables.ts @@ -18,7 +18,7 @@ export default siteVariables => ({ borderWidth: 2, successBackgroundColor: siteVariables.colors.green[200], successTextColor: siteVariables.colors.white, - infoBackgroundColor: siteVariables.colors.primary[500], + infoBackgroundColor: siteVariables.colors.brand[500], infoTextColor: siteVariables.colors.white, warningBackgroundColor: siteVariables.colors.yellow[400], warningTextColor: siteVariables.colors.white, diff --git a/packages/react/src/themes/teams/components/Text/textStyles.ts b/packages/react/src/themes/teams/components/Text/textStyles.ts index 564a25561a..6d1740a5d3 100644 --- a/packages/react/src/themes/teams/components/Text/textStyles.ts +++ b/packages/react/src/themes/teams/components/Text/textStyles.ts @@ -11,7 +11,7 @@ export default { const colors = getColorScheme(v.colorScheme, color) return { ...(color && { - color: colors.foregroundDefault, + color: colors.foreground, }), ...(atMention === 'me' && { fontWeight: v.atMentionMeFontWeight, diff --git a/packages/react/src/themes/teams/components/Text/textVariables.ts b/packages/react/src/themes/teams/components/Text/textVariables.ts index a6e4a5fbd4..9babdc36d0 100644 --- a/packages/react/src/themes/teams/components/Text/textVariables.ts +++ b/packages/react/src/themes/teams/components/Text/textVariables.ts @@ -9,7 +9,7 @@ export interface TeamsTextVariables extends TextVariables { export default (siteVariables): Partial => { return { colorScheme: siteVariables.colorScheme, - atMentionOtherColor: siteVariables.colors.primary[600], + atMentionOtherColor: siteVariables.colors.brand[600], atMentionMeColor: siteVariables.colors.orange[400], atMentionMeFontWeight: siteVariables.fontWeightBold, disabledColor: siteVariables.colors.grey[250], diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts index fa44d7c2c4..fe4223c075 100644 --- a/packages/react/src/themes/types.ts +++ b/packages/react/src/themes/types.ts @@ -55,6 +55,7 @@ export type NaturalColors = Extendable export type ContextualColorsStrict = Partial<{ text: ColorVariants + brand: ColorVariants danger: ColorVariants info: ColorVariants success: ColorVariants @@ -102,10 +103,10 @@ export type ColorPalette = ExtendablePalette< * A type for all area names that can define color */ export type ComponentAreaName = - | 'foregroundDefault' - | 'backgroundDefault' - | 'borderDefault' - | 'shadowDefault' + | 'foreground' + | 'background' + | 'border' + | 'shadow' | 'foregroundHover' | 'backgroundHover' | 'borderHover' From a8311a564d7b4c2d6d672548a76192d40d5dfd4e Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 7 May 2019 12:02:06 +0200 Subject: [PATCH 107/118] -updated color schemes --- .../react/src/themes/teams-dark/colors.ts | 32 ++++++++++++------- .../src/themes/teams-high-contrast/colors.ts | 32 ++++++++++++------- packages/react/src/themes/teams/colors.ts | 32 ++++++++++++------- 3 files changed, 60 insertions(+), 36 deletions(-) diff --git a/packages/react/src/themes/teams-dark/colors.ts b/packages/react/src/themes/teams-dark/colors.ts index 0bbf5a7cec..6b31955a5d 100644 --- a/packages/react/src/themes/teams-dark/colors.ts +++ b/packages/react/src/themes/teams-dark/colors.ts @@ -48,14 +48,16 @@ export const colorScheme: ColorSchemeMapping = { background2: colors.grey[800], background3: colors.grey[550], + border: colors.grey[450], // buttons border1: colors.grey[850], border2: colors.grey[900], - border: colors.grey[450], // buttons + border3: colors.grey[650], shadow: colors.black, // opacity 25% - shadowHover: colors.black, + shadowHover: colors.black, // opacity 25% foregroundHover: colors.white, + foregroundHover1: colors.white, backgroundHover: colors.grey[550], backgroundHover2: colors.grey[550], @@ -64,18 +66,19 @@ export const colorScheme: ColorSchemeMapping = { foregroundPressed: colors.white, backgroundPressed: colors.grey[500], - borderPressed: colors.grey[450], + borderPressed: colors.grey[400], shadowPressed: undefined, foregroundActive: colors.white, foregroundActive1: colors.white, - backgroundActive: colors.grey[800], // OK + backgroundActive: colors.grey[800], backgroundActive1: colors.grey[500], + borderActive: colors.grey[450], // buttons borderActive1: colors.grey[850], borderActive2: colors.grey[900], - borderActive: colors.grey[450], // buttons + borderActive3: colors.grey[650], shadowActive: undefined, @@ -89,8 +92,9 @@ export const colorScheme: ColorSchemeMapping = { backgroundFocus2: colors.grey[800], backgroundFocus3: colors.grey[550], - borderFocus: colors.black, - borderFocusWithin: colors.white, + borderFocusWithin: colors.black, + borderFocus: colors.white, + shadowFocus: undefined, foregroundDisabled1: colors.grey[450], @@ -107,20 +111,22 @@ export const colorScheme: ColorSchemeMapping = { foreground1: colors.brand[400], foreground2: colors.brand[400], foreground3: colors.brand[200], + foreground4: colors.white, background: colors.brand[600], background1: colors.brand[900], background2: colors.brand[900], background3: colors.brand[1000], + border: colors.grey[450], border1: colors.brand[800], border2: colors.brand[800], - border: colors.grey[450], - shadow: colors.black, + shadow: colors.black, // opacity 25% shadowHover: colors.black, foregroundHover: colors.brand[400], + foregroundHover1: colors.white, borderHover: colors.brand[600], @@ -128,6 +134,7 @@ export const colorScheme: ColorSchemeMapping = { backgroundHover1: colors.brand[900], foregroundPressed: colors.brand[200], + foregroundPressed1: colors.white, backgroundPressed: colors.brand[700], borderPressed: colors.brand[800], shadowPressed: undefined, @@ -140,9 +147,9 @@ export const colorScheme: ColorSchemeMapping = { backgroundActive1: colors.brand[400], // active border no change (just copied) + borderActive: colors.grey[450], // buttons borderActive1: colors.brand[800], borderActive2: colors.brand[800], - borderActive: colors.grey[450], // buttons shadowActive: undefined, @@ -150,15 +157,16 @@ export const colorScheme: ColorSchemeMapping = { foregroundFocus1: colors.brand[400], foregroundFocus2: colors.brand[400], foregroundFocus3: colors.brand[200], + foregroundFocus4: colors.white, backgroundFocus: colors.brand[600], backgroundFocus1: colors.brand[900], backgroundFocus2: colors.brand[900], backgroundFocus3: colors.brand[1000], - borderFocus: colors.black, + borderFocus: colors.white, + borderFocusWithin: colors.black, borderFocus1: colors.brand[400], // only input - borderFocusWithin: colors.white, shadowFocus: undefined, foregroundDisabled1: colors.grey[450], diff --git a/packages/react/src/themes/teams-high-contrast/colors.ts b/packages/react/src/themes/teams-high-contrast/colors.ts index ee385cea7e..5ca5eb8709 100644 --- a/packages/react/src/themes/teams-high-contrast/colors.ts +++ b/packages/react/src/themes/teams-high-contrast/colors.ts @@ -54,14 +54,16 @@ export const colorScheme: ColorSchemeMapping = { background2: colors.black, background3: colors.black, + border: colors.white, border1: colors.white, border2: colors.white, - border: colors.white, // buttons + border3: colors.white, shadow: colors.black, // opacity 25% - shadowHover: colors.black, + shadowHover: colors.black, // opacity 25% foregroundHover: colors.black, + foregroundHover1: colors.black, backgroundHover: accessibleYellow, backgroundHover1: accessibleYellow, @@ -74,14 +76,15 @@ export const colorScheme: ColorSchemeMapping = { shadowPressed: undefined, foregroundActive: accessibleCyan, - foregroundActive1: accessibleCyan, + foregroundActive1: colors.black, - backgroundActive1: accessibleCyan, backgroundActive: colors.black, + backgroundActive1: accessibleCyan, + borderActive: accessibleCyan, // buttons borderActive1: accessibleCyan, borderActive2: accessibleCyan, - borderActive: accessibleCyan, // buttons + borderActive3: accessibleCyan, shadowActive: undefined, @@ -95,9 +98,10 @@ export const colorScheme: ColorSchemeMapping = { backgroundFocus2: accessibleCyan, backgroundFocus3: accessibleCyan, + borderFocusWithin: colors.black, borderFocus: accessibleCyan, - borderFocusWithin: accessibleCyan, - shadowFocus: accessibleCyan, + + shadowFocus: undefined, foregroundDisabled1: accessibleGreen, foregroundDisabled: colors.black, @@ -113,20 +117,22 @@ export const colorScheme: ColorSchemeMapping = { foreground1: accessibleYellow, foreground2: accessibleYellow, foreground3: accessibleYellow, + foreground4: colors.black, background: colors.white, background1: colors.black, background2: colors.black, background3: colors.black, + border: colors.white, // buttons border1: colors.white, border2: colors.white, - border: colors.white, // buttons shadow: colors.black, // opacity 25% shadowHover: colors.black, foregroundHover: colors.black, + foregroundHover1: colors.black, borderHover: accessibleYellow, @@ -134,6 +140,7 @@ export const colorScheme: ColorSchemeMapping = { backgroundHover1: accessibleYellow, foregroundPressed: colors.black, + foregroundPressed1: colors.black, backgroundPressed: accessibleYellow, borderPressed: accessibleYellow, shadowPressed: undefined, @@ -142,12 +149,12 @@ export const colorScheme: ColorSchemeMapping = { foregroundActive1: colors.black, foregroundActive2: accessibleCyan, - backgroundActive1: accessibleCyan, backgroundActive: colors.black, + backgroundActive1: accessibleCyan, + borderActive: accessibleCyan, // buttons borderActive1: accessibleCyan, borderActive2: accessibleCyan, - borderActive: accessibleCyan, // buttons shadowActive: undefined, @@ -155,6 +162,7 @@ export const colorScheme: ColorSchemeMapping = { foregroundFocus1: colors.black, foregroundFocus2: colors.black, foregroundFocus3: colors.black, + foregroundFocus4: colors.black, backgroundFocus: accessibleCyan, backgroundFocus1: accessibleCyan, @@ -162,12 +170,12 @@ export const colorScheme: ColorSchemeMapping = { backgroundFocus3: accessibleCyan, borderFocus: accessibleCyan, + borderFocusWithin: colors.black, borderFocus1: accessibleCyan, - borderFocusWithin: accessibleCyan, shadowFocus: undefined, - foregroundDisabled1: accessibleGreen, foregroundDisabled: colors.black, + foregroundDisabled1: accessibleGreen, backgroundDisabled: accessibleGreen, backgroundDisabled1: colors.black, diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index ad37c874ce..10ae674933 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -128,8 +128,8 @@ export const transparentColors = { 400: 'rgba(255,255,255,0.5)', 500: undefined, 600: 'rgba(255,255,255,0.3)', - 700: undefined, - 800: 'rgba(255,255,255,0.15)', + 700: 'rgba(255,255,255,0.2)', + 800: 'rgba(255,255,255,0.1)', 900: 'rgba(255,255,255,0.05)', }, ruby: { @@ -224,14 +224,16 @@ export const colorScheme: ColorSchemeMapping = { background2: colors.grey[100], background3: colors.grey[150], + border: colors.grey[200], // buttons border1: colors.grey[150], border2: colors.grey[200], - border: colors.grey[200], // buttons + border3: colors.grey[150], // divider shadow: colors.black, // opacity 10% - shadowHover: colors.black, + shadowHover: colors.black, // opacity 10% foregroundHover: colors.grey[750], + foregroundHover1: colors.white, backgroundHover: colors.grey[100], backgroundHover1: colors.grey[150], @@ -249,9 +251,10 @@ export const colorScheme: ColorSchemeMapping = { backgroundActive: colors.grey[100], backgroundActive1: colors.grey[150], + borderActive: colors.grey[200], // buttons borderActive1: colors.grey[150], borderActive2: colors.grey[200], - borderActive: colors.grey[200], // buttons + borderActive3: colors.grey[150], // divider shadowActive: undefined, @@ -265,8 +268,9 @@ export const colorScheme: ColorSchemeMapping = { backgroundFocus2: colors.grey[100], backgroundFocus3: colors.grey[150], - borderFocus: colors.black, borderFocusWithin: colors.white, + borderFocus: colors.black, + shadowFocus: undefined, foregroundDisabled1: colors.grey[250], @@ -283,20 +287,22 @@ export const colorScheme: ColorSchemeMapping = { foreground1: colors.brand[600], foreground2: colors.brand[700], foreground3: colors.brand[200], + foreground4: colors.white, background: colors.brand[600], background1: colors.brand[100], background2: colors.brand[900], background3: colors.brand[1000], + border: colors.grey[200], border1: colors.brand[200], border2: colors.brand[300], - border: colors.grey[200], - shadow: colors.black, + shadow: colors.black, // opacity 25% shadowHover: colors.black, foregroundHover: colors.brand[600], + foregroundHover1: colors.white, borderHover: colors.brand[300], @@ -304,6 +310,7 @@ export const colorScheme: ColorSchemeMapping = { backgroundHover1: colors.brand[50], foregroundPressed: colors.brand[800], + foregroundPressed1: colors.white, backgroundPressed: colors.brand[800], // it's 900 on the button - 800 is same as hover borderPressed: colors.brand[300], shadowPressed: undefined, @@ -315,9 +322,9 @@ export const colorScheme: ColorSchemeMapping = { backgroundActive: colors.brand[600], backgroundActive1: colors.brand[600], + borderActive: colors.grey[200], borderActive1: colors.brand[200], borderActive2: colors.brand[300], - borderActive: colors.grey[200], shadowActive: undefined, @@ -325,6 +332,7 @@ export const colorScheme: ColorSchemeMapping = { foregroundFocus1: colors.brand[600], foregroundFocus2: colors.brand[700], foregroundFocus3: colors.brand[200], + foregroundFocus4: colors.white, backgroundFocus: colors.brand[600], backgroundFocus1: colors.brand[100], @@ -332,15 +340,15 @@ export const colorScheme: ColorSchemeMapping = { backgroundFocus3: colors.brand[1000], borderFocus: colors.black, - borderFocus1: colors.brand[600], // only input borderFocusWithin: colors.white, + borderFocus1: colors.brand[600], // only input shadowFocus: undefined, - foregroundDisabled1: colors.grey[250], foregroundDisabled: colors.grey[250], + foregroundDisabled1: colors.grey[250], - backgroundDisabled1: colors.grey[150], backgroundDisabled: colors.grey[150], + backgroundDisabled1: colors.grey[150], borderDisabled: colors.grey[150], shadowDisabled: undefined, From 9ddc71af368b43c18da3f135a72f04c587d7c285 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 9 May 2019 10:23:47 +0200 Subject: [PATCH 108/118] -added dark theme in the color scheme example --- docs/src/views/ColorPalette.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/docs/src/views/ColorPalette.tsx b/docs/src/views/ColorPalette.tsx index f66e0763c8..d0a3509708 100644 --- a/docs/src/views/ColorPalette.tsx +++ b/docs/src/views/ColorPalette.tsx @@ -151,12 +151,12 @@ const ColorPalette = () => ( values, so that they will work correctly when different themes will be applied. As part of each theme, we are defining color scheme, which will define the design tokens usages of the different colors from the palette, that make sense for the developers. For - example, let's take a look of one color scheme defined for brand in Teams light and high - contrast themes. + example, let's take a look of one color scheme defined for brand in Teams light, high + contrast and dark themes.

    ( as: 'h3', content: 'HC theme', }, + { + as: 'h3', + content: 'Dark theme', + }, ]} name={'brand'} /> From ec4e4087070883b1698c77570628683afcf31385 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 9 May 2019 11:04:12 +0200 Subject: [PATCH 109/118] -updated changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index bdb7ed0c6f..6dbf02d956 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ## [v0.29.1](https://github.com/stardust-ui/react/tree/v0.29.1) (2019-05-01) [Compare changes](https://github.com/stardust-ui/react/compare/v0.29.0...v0.29.1) +### BREAKING CHANGES +- Updated Teams' theme color palette values, removed color related site variables @mnajdova ([#1069](https://github.com/stardust-ui/react/pull/1069)) + ### Fixes - Update `ChatMessage` styles in Teams themes @layershifter ([#1246](https://github.com/stardust-ui/react/pull/1246)) - Fix Teams theme styles for `Alert` [redlines] @codepretty ([#1226](https://github.com/stardust-ui/react/pull/1226)) @@ -38,6 +41,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Features - Export `call-dialpad` icon in Teams theme @assamad ([#1271](https://github.com/stardust-ui/react/pull/1271)) +- Added default and brand color schemes in Teams' theme @mnajdova ([#1069](https://github.com/stardust-ui/react/pull/1069)) ## [v0.29.0](https://github.com/stardust-ui/react/tree/v0.29.0) (2019-04-24) From b41c97ab9bb63c812975e79b82fcd89e8d6aa92c Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 9 May 2019 11:51:26 +0200 Subject: [PATCH 110/118] -removed color prop from Menu --- .../Variations/MenuExampleColor.shorthand.tsx | 30 ------------------- .../components/Menu/Variations/index.tsx | 5 ---- packages/react/src/components/Menu/Menu.tsx | 7 +---- .../react/src/components/Menu/MenuDivider.tsx | 8 ++--- .../react/src/components/Menu/MenuItem.tsx | 8 ++--- packages/react/src/themes/teams/colors.ts | 2 +- .../teams/components/Label/labelVariables.ts | 3 ++ .../components/Menu/menuDividerStyles.ts | 2 +- .../teams/components/Menu/menuItemStyles.ts | 18 +++++------ .../teams/components/Menu/menuStyles.ts | 4 +-- 10 files changed, 21 insertions(+), 66 deletions(-) delete mode 100644 docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx deleted file mode 100644 index 43ca75ee1b..0000000000 --- a/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import * as React from 'react' -import { Menu, Flex, Provider } from '@stardust-ui/react' -const items = [ - { - key: 'editorials', - content: 'Editorials', - }, - { - key: 'review', - content: 'Reviews', - }, - { - key: 'events', - content: 'Upcoming Events', - }, -] - -const MenuExampleColor = () => ( - ( - - {Object.keys(theme.siteVariables.colorScheme).map(color => ( - - ))} - - )} - /> -) - -export default MenuExampleColor diff --git a/docs/src/examples/components/Menu/Variations/index.tsx b/docs/src/examples/components/Menu/Variations/index.tsx index fb599be57f..19e78ba719 100644 --- a/docs/src/examples/components/Menu/Variations/index.tsx +++ b/docs/src/examples/components/Menu/Variations/index.tsx @@ -13,11 +13,6 @@ const Variations = () => ( title="Vertical & Pointing" examplePath="components/Menu/Variations/MenuExampleVerticalPointing" /> - , MenuState> { static propTypes = { ...commonPropTypes.createCommon({ content: false, - color: true, }), activeIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), defaultActiveIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), @@ -166,7 +164,6 @@ class Menu extends AutoControlledComponent, MenuState> { vertical, submenu, indicator, - color, } = this.props const { activeIndex } = this.state const itemsCount = _.filter(items, item => getKindProp(item, 'item') !== 'divider').length @@ -187,7 +184,6 @@ class Menu extends AutoControlledComponent, MenuState> { variables, styles: styles.divider, inSubmenu: submenu, - color, accessibility: accessibility.childBehaviors ? accessibility.childBehaviors.divider : undefined, @@ -214,7 +210,6 @@ class Menu extends AutoControlledComponent, MenuState> { active, inSubmenu: submenu, indicator, - color, accessibility: accessibility.childBehaviors ? accessibility.childBehaviors.item : undefined, diff --git a/packages/react/src/components/Menu/MenuDivider.tsx b/packages/react/src/components/Menu/MenuDivider.tsx index a10b10abc6..a08e2f726a 100644 --- a/packages/react/src/components/Menu/MenuDivider.tsx +++ b/packages/react/src/components/Menu/MenuDivider.tsx @@ -7,7 +7,6 @@ import { createShorthandFactory, UIComponent, UIComponentProps, - ColorComponentProps, commonPropTypes, childrenExist, ChildrenComponentProps, @@ -19,8 +18,7 @@ import { ReactProps } from '../../types' export interface MenuDividerProps extends UIComponentProps, ChildrenComponentProps, - ContentComponentProps, - ColorComponentProps { + ContentComponentProps { /** * Accessibility behavior if overridden by the user. * @default menuDividerBehavior @@ -49,7 +47,7 @@ class MenuDivider extends UIComponent> { } static propTypes = { - ...commonPropTypes.createCommon({ color: true }), + ...commonPropTypes.createCommon(), primary: PropTypes.bool, secondary: PropTypes.bool, vertical: PropTypes.bool, @@ -72,6 +70,6 @@ class MenuDivider extends UIComponent> { } } -MenuDivider.create = createShorthandFactory({ Component: MenuDivider, mappedProp: 'color' }) +MenuDivider.create = createShorthandFactory({ Component: MenuDivider, mappedProp: 'content' }) export default MenuDivider diff --git a/packages/react/src/components/Menu/MenuItem.tsx b/packages/react/src/components/Menu/MenuItem.tsx index a7c93d090d..3448bab5d9 100644 --- a/packages/react/src/components/Menu/MenuItem.tsx +++ b/packages/react/src/components/Menu/MenuItem.tsx @@ -17,7 +17,6 @@ import { commonPropTypes, isFromKeyboard, rtlTextContainer, - ColorComponentProps, applyAccessibilityKeyHandlers, } from '../../lib' import Icon from '../Icon/Icon' @@ -36,8 +35,7 @@ export interface MenuItemSlotClassNames { export interface MenuItemProps extends UIComponentProps, ChildrenComponentProps, - ContentComponentProps, - ColorComponentProps { + ContentComponentProps { /** * Accessibility behavior if overridden by the user. * @default menuItemBehavior @@ -153,7 +151,7 @@ class MenuItem extends AutoControlledComponent, MenuIt static create: Function static propTypes = { - ...commonPropTypes.createCommon({ color: true }), + ...commonPropTypes.createCommon(), active: PropTypes.bool, disabled: PropTypes.bool, icon: customPropTypes.itemShorthand, @@ -203,7 +201,6 @@ class MenuItem extends AutoControlledComponent, MenuIt vertical, indicator, disabled, - color, } = this.props const indicatorWithDefaults = indicator === undefined ? {} : indicator @@ -252,7 +249,6 @@ class MenuItem extends AutoControlledComponent, MenuIt styles: styles.menu, submenu: true, indicator, - color, }, })} diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index 10ae674933..e1ed4cb6d4 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -446,7 +446,7 @@ export const getColorSchemeKey = (color: string, primary?: boolean): string => { export const getColorScheme = ( colorScheme: ColorSchemeMapping, - color: string, + color?: string, primary?: boolean, ) => { return colorScheme[getColorSchemeKey(color, primary)] diff --git a/packages/react/src/themes/teams/components/Label/labelVariables.ts b/packages/react/src/themes/teams/components/Label/labelVariables.ts index ab5ddc8cdf..5dde9a0e38 100644 --- a/packages/react/src/themes/teams/components/Label/labelVariables.ts +++ b/packages/react/src/themes/teams/components/Label/labelVariables.ts @@ -21,6 +21,9 @@ export default (siteVars: SiteVariablesPrepared): LabelVariables => { background: color, foreground: 'rgb(232, 232, 232)', }, + brand: { + background: siteVars.colorScheme.brand.foreground4, + }, }), circularRadius: pxToRem(9999), padding: `0 ${pxToRem(4)} 0 ${pxToRem(4)}`, diff --git a/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts b/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts index dfa4a0fb4a..681c8307f6 100644 --- a/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts @@ -5,7 +5,7 @@ import { getColorScheme } from '../../colors' const menuDividerStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => { - const colorScheme = getColorScheme(v.colorScheme, p.color, p.primary) + const colorScheme = getColorScheme(v.colorScheme, null, p.primary) const borderColor = p.primary ? v.primaryBorderColor : v.borderColor || colorScheme.border const borderType = p.vertical ? 'borderTop' : 'borderLeft' diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index 51e9695d59..8515b18daf 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -18,7 +18,7 @@ export const underlinedItem = (color: string): ICSSInJSStyle => ({ }) const getActionStyles = ({ - props: { primary, underlined, iconOnly, color }, + props: { primary, underlined, iconOnly }, variables: v, colorScheme, }: { @@ -30,7 +30,7 @@ const getActionStyles = ({ ? { color: v.color, } - : primary || color + : primary ? { color: colorScheme.foregroundActive, background: v.backgroundColorActive || colorScheme.backgroundActive1, @@ -49,10 +49,10 @@ const getFocusedStyles = ({ variables: MenuVariables colorScheme: ColorScheme }): ICSSInJSStyle => { - const { primary, color, underlined, isFromKeyboard, active, vertical } = props + const { primary, underlined, isFromKeyboard, active, vertical } = props if (active && !underlined && !vertical) return {} return { - color: primary || color ? colorScheme.foregroundFocus : v.colorActive, + color: primary ? colorScheme.foregroundFocus : v.colorActive, background: v.backgroundColorFocus || colorScheme.backgroundFocus1, ...(vertical && isFromKeyboard && !primary ? { @@ -135,7 +135,6 @@ const menuItemStyles: ComponentSlotStylesInput { const { active, - color, disabled, iconOnly, isFromKeyboard, @@ -147,7 +146,7 @@ const menuItemStyles: ComponentSlotStylesInput { - const { iconOnly, fluid, pointing, pills, primary, color, underlined, vertical, submenu } = p - const colorScheme = getColorScheme(v.colorScheme, color, primary) + const { iconOnly, fluid, pointing, pills, primary, underlined, vertical, submenu } = p + const colorScheme = getColorScheme(v.colorScheme, null, primary) return { display: 'flex', From cf0c3854d2bb1ca873a15efb1c5c66d51f53c52d Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 9 May 2019 12:13:36 +0200 Subject: [PATCH 111/118] -added links for the color scheme and color palette on the colors guide --- docs/src/views/ColorPalette.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/src/views/ColorPalette.tsx b/docs/src/views/ColorPalette.tsx index d0a3509708..9120c8ec6e 100644 --- a/docs/src/views/ColorPalette.tsx +++ b/docs/src/views/ColorPalette.tsx @@ -17,6 +17,7 @@ import DocPage from 'docs/src/components/DocPage/DocPage' import ExampleSnippet from '../components/ExampleSnippet' import ColorSchemes from 'docs/src/components/ColorSchemes' import GuidesNavigationFooter from 'docs/src/components/GuidesNavigationFooter' +import { link } from 'docs/src/utils/helpers' const theme = { componentStyles: { @@ -74,11 +75,12 @@ const ColorPalette = () => (

    • - color palette - central place for all colors available in the application + {link('Color scheme', '#color-scheme')} - design tokens for all colors used in + the application that should be appropriately map in all themes
    • - color schema - design tokens for all colors used in the application that should - be appropriately map in all themes + {link('Color palette', '#color-palette')} - central place for all colors + available in the application

    @@ -86,7 +88,7 @@ const ColorPalette = () => ( will work even if you decide to structure the palette and schemas differently in your theme)

    -
    Color palette
    +

    We have structured the color palette in several categories.

    Primitive colors
    @@ -145,7 +147,7 @@ const ColorPalette = () => ( ))} -
    Color scheme
    +

    Now that we know how the color palette is defined, let's see how we can use these values, so that they will work correctly when different themes will be applied. As part From eb69a40dc1f147b3bd6d1fd839f6dbe1e6f7a45f Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 9 May 2019 12:39:00 +0200 Subject: [PATCH 112/118] -fixed colors guide --- docs/src/views/ColorPalette.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/views/ColorPalette.tsx b/docs/src/views/ColorPalette.tsx index 9120c8ec6e..5f3b6645ee 100644 --- a/docs/src/views/ColorPalette.tsx +++ b/docs/src/views/ColorPalette.tsx @@ -127,7 +127,7 @@ const ColorPalette = () => (

    Emphasis colors
    -

    This part of the palette may includes primary and secondary colors.

    +

    This part of the palette may includes primary (brand) and secondary colors.

    {_.map(emphasisColors, (variants, color) => ( From cfd807b3de34295e65fc6a47eba237dea2c316d7 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 9 May 2019 13:00:54 +0200 Subject: [PATCH 113/118] -removed comments --- .../themes/teams-dark/components/Alert/alertVariables.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/themes/teams-dark/components/Alert/alertVariables.ts b/packages/react/src/themes/teams-dark/components/Alert/alertVariables.ts index 63d32ce28e..41c5559d4e 100644 --- a/packages/react/src/themes/teams-dark/components/Alert/alertVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Alert/alertVariables.ts @@ -10,9 +10,9 @@ export default (siteVars: any): Partial => { dangerBackgroundColor: siteVars.colors.red[800], dangerBorderColor: siteVars.colors.red[900], - oofColor: siteVars.colors.pink[200], // pink[200] when new color palette PR goes in - oofBackgroundColor: siteVars.colors.pink[800], // pink[800] when new color palette PR goes in - oofBorderColor: siteVars.colors.pink[900], // pink[900] when new color palette PR goes in + oofColor: siteVars.colors.pink[200], + oofBackgroundColor: siteVars.colors.pink[800], + oofBorderColor: siteVars.colors.pink[900], infoColor: siteVars.colors.grey[250], infoBackgroundColor: siteVars.colors.grey[550], From eda0f3f438b8ca71c8e66ec3601599fad321f1c1 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 9 May 2019 13:02:24 +0200 Subject: [PATCH 114/118] -fixed changelog --- CHANGELOG.md | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4af3cce748..88b4e15b89 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,22 +19,20 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### BREAKING CHANGES - Rename `context` prop to `mountNode` in `PortalInner` @layershifter ([#1288](https://github.com/stardust-ui/react/pull/1288)) +- Updated Teams' theme color palette values, removed color related site variables @mnajdova ([#1069](https://github.com/stardust-ui/react/pull/1069)) ### Features - - Add default child a11y behavior to `Menu` related behaviors @silviuavram ([#1282](https://github.com/stardust-ui/react/pull/1282)) - `Ref` component extracted to a `@stardust-ui/react-component-ref` @layershifter ([#1281](https://github.com/stardust-ui/react/pull/1281)) - added `isRefObject()`, `toRefObject()` utils for React refs @layershifter ([#1281](https://github.com/stardust-ui/react/pull/1281)) - Add new callings icons in Teams theme @codepretty ([#1264](https://github.com/stardust-ui/react/pull/1264)) - Add `mountNode` and `mountDocument` props to allow proper multi-window rendering ([#1288](https://github.com/stardust-ui/react/pull/1288)) +- Added default and brand color schemes in Teams' theme @mnajdova ([#1069](https://github.com/stardust-ui/react/pull/1069)) ## [v0.29.1](https://github.com/stardust-ui/react/tree/v0.29.1) (2019-05-01) [Compare changes](https://github.com/stardust-ui/react/compare/v0.29.0...v0.29.1) -### BREAKING CHANGES -- Updated Teams' theme color palette values, removed color related site variables @mnajdova ([#1069](https://github.com/stardust-ui/react/pull/1069)) - ### Fixes - Update `ChatMessage` styles in Teams themes @layershifter ([#1246](https://github.com/stardust-ui/react/pull/1246)) - Fix Teams theme styles for `Alert` [redlines] @codepretty ([#1226](https://github.com/stardust-ui/react/pull/1226)) @@ -45,7 +43,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Features - Export `call-dialpad` icon in Teams theme @assamad ([#1271](https://github.com/stardust-ui/react/pull/1271)) -- Added default and brand color schemes in Teams' theme @mnajdova ([#1069](https://github.com/stardust-ui/react/pull/1069)) ## [v0.29.0](https://github.com/stardust-ui/react/tree/v0.29.0) (2019-04-24) From 0464feebd6ead1339bc211e7e7d3affcb65a5bb1 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 9 May 2019 14:53:40 +0200 Subject: [PATCH 115/118] -added unit tests for the colors utils --- .../teams/components/Menu/menuStyles.ts | 2 +- .../test/specs/themes/colorUtils-test.ts | 83 +++++++++++++++++++ 2 files changed, 84 insertions(+), 1 deletion(-) create mode 100644 packages/react/test/specs/themes/colorUtils-test.ts diff --git a/packages/react/src/themes/teams/components/Menu/menuStyles.ts b/packages/react/src/themes/teams/components/Menu/menuStyles.ts index db9af6f68b..8fcb07318a 100644 --- a/packages/react/src/themes/teams/components/Menu/menuStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuStyles.ts @@ -12,7 +12,7 @@ import { getColorScheme } from '../../colors' type MenuPropsAndState = MenuProps & MenuState export default { - root: ({ props: p, variables: v, theme }): ICSSInJSStyle => { + root: ({ props: p, variables: v }): ICSSInJSStyle => { const { iconOnly, fluid, pointing, pills, primary, underlined, vertical, submenu } = p const colorScheme = getColorScheme(v.colorScheme, null, primary) diff --git a/packages/react/test/specs/themes/colorUtils-test.ts b/packages/react/test/specs/themes/colorUtils-test.ts new file mode 100644 index 0000000000..2cf7ff6d36 --- /dev/null +++ b/packages/react/test/specs/themes/colorUtils-test.ts @@ -0,0 +1,83 @@ +import { extendColorScheme } from 'src/themes/colorUtils' +import { ColorSchemeMapping } from 'src/themes/types' + +const generateColorSchemeValues = color => ({ + foreground: color, + background: color, + border: color, + shadow: color, + foregroundHover: color, + backgroundHover: color, + borderHover: color, + shadowHover: color, + foregroundActive: color, + backgroundActive: color, + borderActive: color, + shadowActive: color, + foregroundFocus: color, + backgroundFocus: color, + borderFocus: color, + shadowFocus: color, + foregroundPressed: color, + backgroundPressed: color, + borderPressed: color, + shadowPressed: color, + foregroundDisabled: color, + backgroundDisabled: color, + borderDisabled: color, + shadowDisabled: color, +}) + +describe('colorUtils', () => { + describe('extendColorScheme', () => { + test('replaced the defined color tokens with the overrides definition', () => { + const baseColorScheme: ColorSchemeMapping = { + default: generateColorSchemeValues('grey'), + primary: generateColorSchemeValues('purple'), + } + + const overrides = { + default: { + foreground: 'black', + }, + primary: { + background: 'blue', + }, + } + + expect(extendColorScheme(baseColorScheme, overrides)).toMatchObject({ + default: { + ...baseColorScheme.default, + foreground: 'black', + }, + primary: { + ...baseColorScheme.primary, + background: 'blue', + }, + }) + }) + + test('extends the defined color tokens with new values if provided in the overrides', () => { + const baseColorScheme: ColorSchemeMapping = { + default: generateColorSchemeValues('grey'), + primary: generateColorSchemeValues('primary'), + } + + const overrides = { + primary: { + background1: 'red', + }, + } + + expect(extendColorScheme(baseColorScheme, overrides)).toMatchObject({ + default: { + ...baseColorScheme.defualt, + }, + primary: { + ...baseColorScheme.primary, + background1: 'red', + }, + }) + }) + }) +}) From 2ffd9a119375e9f1519c912777689fb791cffdaf Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 9 May 2019 14:56:16 +0200 Subject: [PATCH 116/118] -replaced the order of the color schemes and color palette --- docs/src/views/ColorPalette.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/views/ColorPalette.tsx b/docs/src/views/ColorPalette.tsx index 5f3b6645ee..d568c747c1 100644 --- a/docs/src/views/ColorPalette.tsx +++ b/docs/src/views/ColorPalette.tsx @@ -74,14 +74,14 @@ const ColorPalette = () => ( switching is in play:

      -
    • - {link('Color scheme', '#color-scheme')} - design tokens for all colors used in - the application that should be appropriately map in all themes -
    • {link('Color palette', '#color-palette')} - central place for all colors available in the application
      • +
    • + {link('Color scheme', '#color-scheme')} - design tokens for all colors used in + the application that should be appropriately map in all themes +

    Be aware that everything that follows is our recommendation, not requirement (everything From e754a9063d85ea7622d9541eb44ae8360d164e27 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 9 May 2019 15:22:44 +0200 Subject: [PATCH 117/118] -addressed PR comments: colorScheme -> colors everywhere in the styles, typos in the Color guide --- docs/src/views/ColorPalette.tsx | 2 +- packages/react/src/themes/teams/colors.ts | 4 +- .../components/Menu/menuDividerStyles.ts | 4 +- .../teams/components/Menu/menuItemStyles.ts | 63 ++++++++++--------- .../teams/components/Menu/menuStyles.ts | 4 +- 5 files changed, 40 insertions(+), 37 deletions(-) diff --git a/docs/src/views/ColorPalette.tsx b/docs/src/views/ColorPalette.tsx index d568c747c1..fbf6c935b9 100644 --- a/docs/src/views/ColorPalette.tsx +++ b/docs/src/views/ColorPalette.tsx @@ -127,7 +127,7 @@ const ColorPalette = () => (

    Emphasis colors
    -

    This part of the palette may includes primary (brand) and secondary colors.

    +

    This part of the palette may include primary (brand) and secondary colors.

    {_.map(emphasisColors, (variants, color) => ( diff --git a/packages/react/src/themes/teams/colors.ts b/packages/react/src/themes/teams/colors.ts index e1ed4cb6d4..0a5ae49e6f 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -3,10 +3,12 @@ import { EmphasisColors, NaturalColors, PrimitiveColors, + ColorScheme, ColorSchemeMapping, ColorVariants, ContextualColors, } from '../types' +import { Extendable } from '../../types' export const emphasisColors: ContextualColors = { brand: { @@ -448,6 +450,6 @@ export const getColorScheme = ( colorScheme: ColorSchemeMapping, color?: string, primary?: boolean, -) => { +): Extendable => { return colorScheme[getColorSchemeKey(color, primary)] } diff --git a/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts b/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts index 681c8307f6..2d8a1e0d7b 100644 --- a/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts @@ -5,8 +5,8 @@ import { getColorScheme } from '../../colors' const menuDividerStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => { - const colorScheme = getColorScheme(v.colorScheme, null, p.primary) - const borderColor = p.primary ? v.primaryBorderColor : v.borderColor || colorScheme.border + const colors = getColorScheme(v.colorScheme, null, p.primary) + const borderColor = p.primary ? v.primaryBorderColor : v.borderColor || colors.border const borderType = p.vertical ? 'borderTop' : 'borderLeft' return p.content diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts index 8515b18daf..a47ea26313 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -1,5 +1,6 @@ import { pxToRem } from '../../../../lib' import { ComponentSlotStylesInput, ICSSInJSStyle, ColorScheme } from '../../../types' +import { Extendable } from '../../../../types' import { MenuVariables } from './menuVariables' import { MenuItemProps, MenuItemState } from '../../../../components/Menu/MenuItem' import { teamsIconClassNames } from '../Icon/svg' @@ -20,11 +21,11 @@ export const underlinedItem = (color: string): ICSSInJSStyle => ({ const getActionStyles = ({ props: { primary, underlined, iconOnly }, variables: v, - colorScheme, + colors, }: { props: MenuItemPropsAndState variables: MenuVariables - colorScheme: ColorScheme + colors: Extendable }): ICSSInJSStyle => underlined || iconOnly ? { @@ -32,34 +33,34 @@ const getActionStyles = ({ } : primary ? { - color: colorScheme.foregroundActive, - background: v.backgroundColorActive || colorScheme.backgroundActive1, + color: colors.foregroundActive, + background: v.backgroundColorActive || colors.backgroundActive1, } : { color: v.color, - background: v.backgroundColorActive || colorScheme.backgroundActive1, + background: v.backgroundColorActive || colors.backgroundActive1, } const getFocusedStyles = ({ props, variables: v, - colorScheme, + colors, }: { props: MenuItemPropsAndState variables: MenuVariables - colorScheme: ColorScheme + colors: Extendable }): ICSSInJSStyle => { const { primary, underlined, isFromKeyboard, active, vertical } = props if (active && !underlined && !vertical) return {} return { - color: primary ? colorScheme.foregroundFocus : v.colorActive, - background: v.backgroundColorFocus || colorScheme.backgroundFocus1, + color: primary ? colors.foregroundFocus : v.colorActive, + background: v.backgroundColorFocus || colors.backgroundFocus1, ...(vertical && isFromKeyboard && !primary ? { border: `solid 1px ${v.borderColorFocus}`, outline: `solid 1px ${v.outlineColorFocus}`, margin: pxToRem(1), - background: v.verticalBackgroundColorFocus || colorScheme.backgroundFocus1, + background: v.verticalBackgroundColorFocus || colors.backgroundFocus1, } : {}), } @@ -68,11 +69,11 @@ const getFocusedStyles = ({ const getHoverStyles = ({ props, variables: v, - colorScheme, + colors, }: { props: MenuItemPropsAndState variables: MenuVariables - colorScheme: ColorScheme + colors: Extendable }): ICSSInJSStyle => { const { underlined, active, vertical } = props if (active && !underlined && !vertical) return {} @@ -82,20 +83,20 @@ const getHoverStyles = ({ color: v.colorActive, } : { - color: colorScheme.foregroundHover, - background: v.backgroundColorHover || colorScheme.backgroundHover, + color: colors.foregroundHover, + background: v.backgroundColorHover || colors.backgroundHover, }), } } -const pointingBeak = ({ props, variables: v, colorScheme }): ICSSInJSStyle => { +const pointingBeak = ({ props, variables: v, colors }): ICSSInJSStyle => { const { pointing, primary } = props let top: string let borders: ICSSInJSStyle - const backgroundColor = v.backgroundColorActive || colorScheme.backgroundActive1 - const borderColor = v.borderColor || primary ? v.primaryBorderColor : colorScheme.border + const backgroundColor = v.backgroundColorActive || colors.backgroundActive1 + const borderColor = v.borderColor || primary ? v.primaryBorderColor : colors.border if (pointing === 'start') { borders = { @@ -146,7 +147,7 @@ const menuItemStyles: ComponentSlotStylesInput { const { iconOnly, fluid, pointing, pills, primary, underlined, vertical, submenu } = p - const colorScheme = getColorScheme(v.colorScheme, null, primary) + const colors = getColorScheme(v.colorScheme, null, primary) return { display: 'flex', @@ -44,7 +44,7 @@ export default { !underlined && { // primary has hardcoded grey border color border: `${v.borderWidth} solid ${ - primary ? v.primaryBorderColor : v.borderColor || colorScheme.border + primary ? v.primaryBorderColor : v.borderColor || colors.border }`, borderRadius: pxToRem(4), }), From 4c6fbc59bc822942b5b97a034e38201cac31fd8e Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 9 May 2019 15:30:13 +0200 Subject: [PATCH 118/118] -removed duplicate line in the typings --- packages/react/src/themes/types.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts index fe4223c075..ffc48a7c51 100644 --- a/packages/react/src/themes/types.ts +++ b/packages/react/src/themes/types.ts @@ -239,8 +239,6 @@ export interface ComponentSlotStylesPrepared export interface ComponentSlotClasses extends ObjectOf {} -export interface ComponentSlotClasses extends ObjectOf {} - export type AnimationProp = | { name: string