diff --git a/CHANGELOG.md b/CHANGELOG.md index 77a37bf4e7..88b4e15b89 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,14 +19,15 @@ 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) diff --git a/docs/src/components/ColorBox.tsx b/docs/src/components/ColorBox.tsx index 361114d2b1..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 = { @@ -48,7 +55,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..44a9ad677a --- /dev/null +++ b/docs/src/components/ColorSchemes.tsx @@ -0,0 +1,60 @@ +import * as React from '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 = { + root: { + border: '1px solid transparent', + borderRadius: '.25rem', + overflow: 'hidden', + }, +} + +const ColorSchemes = createComponent({ + displayName: 'ColorVariants', + render: ({ name, themes, headers, stardust: { classes } }) => { + if (themes.length === 0) return <> + + 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 ( +
+ + {headers && headers.map(header => Header.create(header))} + {elements} + +
+ ) + }, +}) + +export default ColorSchemes diff --git a/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx b/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx index 7bea76cb13..5f8487f128 100644 --- a/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx +++ b/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx @@ -68,7 +68,6 @@ const ComponentControls: React.FC = props => { = p - +
Props
diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx index 7f43ebeaf4..1baaa036bc 100644 --- a/docs/src/components/Sidebar/Sidebar.tsx +++ b/docs/src/components/Sidebar/Sidebar.tsx @@ -301,6 +301,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', @@ -429,13 +436,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/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx b/docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx index 80498278dc..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[500], - colorActive: siteVariables.brand04, - colorHover: siteVariables.brand04, - colorFocus: siteVariables.colors.primary[900], - backgroundColor: siteVariables.colors.grey[900], - backgroundColorActive: siteVariables.colors.primary[100], - 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], + 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.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[500], - colorActive: siteVariables.colors.primary[500], - colorHover: siteVariables.colors.primary[500], - 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[100], - 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], + 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 a41859461e..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[500], + 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 c6d8789436..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[500], + 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/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx index dbd0436b66..1d307975a9 100644 --- a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx +++ b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx @@ -85,7 +85,7 @@ const ChatMessageExampleStyled = () => ( componentVariables: { ChatMessage: siteVars => ({ content: { - focusOutlineColor: siteVars.red, + focusOutlineColor: siteVars.colors.red[400], }, }), }, 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/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..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" /> - ( ChatMessage: { root: ({ props: p, theme: { siteVariables } }) => ({ '& a': { - color: siteVariables.colors.primary[500], + color: siteVariables.colors.brand[600], }, }), }, diff --git a/docs/src/prototypes/chatMessages/ImportantAndMentionMessages/index.tsx b/docs/src/prototypes/chatMessages/ImportantAndMentionMessages/index.tsx index 358eed2872..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[500], + hasMentionColor: siteVars.colors.brand[600], })} /> ), @@ -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/docs/src/prototypes/chatPane/chatPaneHeader.tsx b/docs/src/prototypes/chatPane/chatPaneHeader.tsx index 9962f61f8a..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[500] })} + 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 ff6b470987..18e2f1703c 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 3cd1f82c73..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 250259d7bd..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[500] }, + 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 02cfb1e5ee..fbf6c935b9 100644 --- a/docs/src/views/ColorPalette.tsx +++ b/docs/src/views/ColorPalette.tsx @@ -1,11 +1,45 @@ -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' +import { link } from 'docs/src/utils/helpers' + +const theme = { + componentStyles: { + Box: { + root: ({ theme: { siteVariables } }) => { + const colorScheme = siteVariables.colorScheme + return { + textAlign: 'center', + padding: '5px', + color: colorScheme.brand.foreground3, + backgroundColor: colorScheme.brand.background3, + border: `1px solid ${colorScheme.brand.border}`, + ':hover': { + color: colorScheme.brand.foregroundHover, + backgroundColor: colorScheme.brand.backgroundHover1, + border: `1px solid ${colorScheme.brand.borderHover}`, + }, + } + }, + }, + }, +} const ColorPalette = () => ( ( }} > ( - + render={({ siteVariables: { colors, emphasisColors, naturalColors } }) => ( +
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. + 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.

- Each theme should match our color palette types fully. This will allow you to use our - theming features completely and keep your palette structured. + There are two things important in order for colors to work transparently when the theme + switching is in play:

+
    +
  • + {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 + will work even if you decide to structure the palette and schemas differently in your + theme) +

+
+

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,78 +100,154 @@ 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 include primary (brand) 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) => ( +
All colors
+

This are all colors available in the color palette.

+ + {_.map({ ...emphasisColors, ...naturalColors }, (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. + 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 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, high + contrast and dark themes.

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

+ 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 illustrate this: +

+ + { + const colorScheme = siteVariables.colorScheme + return { + color: colorScheme.brand.foreground3, + backgroundColor: colorScheme.brand.background, + border: \`1px solid \${colorScheme.brand.border}\`, + ':hover': { + color: colorScheme.brand.foregroundHover, + backgroundColor: colorScheme.brand.backgroundHover, + border: \`1px solid \${colorScheme.brand.borderHover}\`, + }, + } + }, + }, + }, + } + + const ColorSchemeExample = () => ( + + + + + + + + + ) + + export default ColorSchemeExample + `} + render={() => ( + + + + + + + + )} - + /> + +

+ The color scheme is just a recommendation of how the color design tokens can be + 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. +

+ )} /> diff --git a/docs/src/views/IntegrateCustomComponents.tsx b/docs/src/views/IntegrateCustomComponents.tsx index 654e8a3173..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[500], + backgroundColor: siteVariables.colors.brand[600], color: variables.color, }), }, diff --git a/docs/src/views/Layout.tsx b/docs/src/views/Layout.tsx index d234b9b5b9..cabdf1a7c2 100644 --- a/docs/src/views/Layout.tsx +++ b/docs/src/views/Layout.tsx @@ -209,7 +209,7 @@ export default () => ( Each of these examples is optimized in terms of DOM elements rendered. 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/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 () => ( ) diff --git a/packages/react/src/components/Dialog/Dialog.tsx b/packages/react/src/components/Dialog/Dialog.tsx index d360086a48..02250807db 100644 --- a/packages/react/src/components/Dialog/Dialog.tsx +++ b/packages/react/src/components/Dialog/Dialog.tsx @@ -97,6 +97,7 @@ class Dialog extends AutoControlledComponent, DialogStat ...commonPropTypes.createCommon({ children: false, content: 'shorthand', + 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 4e1b570e10..23f0c2f425 100644 --- a/packages/react/src/components/Label/Label.tsx +++ b/packages/react/src/components/Label/Label.tsx @@ -21,16 +21,12 @@ import Layout from '../Layout/Layout' import { Accessibility } from '../../lib/accessibility/types' import { defaultBehavior } from '../../lib/accessibility' import { ReactProps, ShorthandValue } from '../../types' -import { - ComplexColorPropType, - ColorValuesWithPrimitiveColors, -} from '../../lib/commonPropInterfaces' export interface LabelProps extends UIComponentProps, ChildrenComponentProps, ContentComponentProps, - ColorComponentProps> { + ColorComponentProps { /** * Accessibility behavior if overridden by the user. * @default defaultBehavior @@ -67,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/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/index.ts b/packages/react/src/index.ts index c37119bfbb..6bc2116a1c 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/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..bccc36c217 100644 --- a/packages/react/src/lib/commonPropInterfaces.ts +++ b/packages/react/src/lib/commonPropInterfaces.ts @@ -29,32 +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 type ComplexColorPropType = - | { - foreground?: TColorValue - background?: TColorValue - border?: TColorValue - shadow?: TColorValue - } - | TColorValue - -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/lib/index.ts b/packages/react/src/lib/index.ts index 06ce4b207c..85f6f995d8 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 applyAccessibilityKeyHandlers } from './applyAccessibilityKeyHandlers' export { default as AutoControlledComponent } from './AutoControlledComponent' export { default as childrenExist } from './childrenExist' -export * from './colorUtils' export { default as UIComponent } from './UIComponent' export { felaRenderer, felaRtlRenderer } from './felaRenderer' export { default as toCompactArray } from './toCompactArray' diff --git a/packages/react/src/lib/renderComponent.tsx b/packages/react/src/lib/renderComponent.tsx index 5265e3a3ad..6de607700a 100644 --- a/packages/react/src/lib/renderComponent.tsx +++ b/packages/react/src/lib/renderComponent.tsx @@ -31,7 +31,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 './colorUtils' export interface RenderResultConfig

{ ElementType: React.ElementType

@@ -152,11 +151,6 @@ const renderComponent =

( const { siteVariables = { - colorScheme: {}, - colors: {}, - contextualColors: {}, - emphasisColors: {}, - naturalColors: {}, fontSizes: {}, }, componentVariables = {}, @@ -188,13 +182,10 @@ const renderComponent =

( const unhandledProps = getUnhandledProps({ handledProps }, props) - const colors = generateColorScheme(stateAndProps.color, resolvedVariables.colorScheme) - 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..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, @@ -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, @@ -159,22 +156,38 @@ export const colors: ColorPalette = { white: '#fff', } -export const colorScheme: ColorSchemeMapping = _.mapValues( - emphasisAndNaturalColors, - (colorVariants, colorName) => { - const foreground = isLightBackground(colorName) ? colors.black : colorVariants[50] - +export const colorScheme: ColorSchemeMapping = { + ..._.mapValues(emphasisAndNaturalColors, (colorVariants, colorName) => { 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], - }, + foreground: colorVariants[500], + border: colorVariants[500], + shadow: colorVariants[500], + background: colorVariants[50], + + foregroundActive: colorVariants[500], + borderActive: colorVariants[500], + shadowActive: colorVariants[500], + backgroundActive: colorVariants[50], + + foregroundHover: colorVariants[500], + borderHover: colorVariants[500], + shadowHover: colorVariants[500], + backgroundHover: colorVariants[50], + + foregroundFocus: colorVariants[500], + borderFocus: colorVariants[500], + shadowFocus: colorVariants[500], + backgroundFocus: colorVariants[50], + + foregroundPressed: colorVariants[500], + borderPressed: colorVariants[500], + shadowPressed: colorVariants[500], + backgroundPressed: colorVariants[50], + + foregroundDisabled: colorVariants[500], + borderDisabled: colorVariants[500], + shadowDisabled: colorVariants[500], + backgroundDisabled: colorVariants[50], } - }, -) + }), +} 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 f989abdea8..32aa425953 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,12 @@ export default { }, variables: v, }: ComponentStyleFunctionParam): ICSSInJSStyle => { + const colors = v.colorScheme[color] return { + ...(color && + colors && { + color: colors.foreground, + }), // animations are not working with span, unless display is set to 'inline-block' ...(animation && as === 'span' && { @@ -35,7 +39,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..c82d994b35 100644 --- a/packages/react/src/themes/base/components/Text/textVariables.ts +++ b/packages/react/src/themes/base/components/Text/textVariables.ts @@ -1,8 +1,7 @@ -import { ColorValues } from '../../../types' -import { mapColorsToScheme } from '../../../../lib' +import { ColorSchemeMapping } from '../../../types' export interface TextVariables { - colors: ColorValues + colorScheme: ColorSchemeMapping atMentionMeColor: string atMentionOtherColor: string @@ -37,11 +36,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/colorUtils.ts b/packages/react/src/themes/colorUtils.ts new file mode 100644 index 0000000000..38570e2977 --- /dev/null +++ b/packages/react/src/themes/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).forEach(color => { + result = { + ...result, + [color]: { + ...colorScheme[color], + ...overrides[color], + }, + } + }) + return result +} 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..6b31955a5d --- /dev/null +++ b/packages/react/src/themes/teams-dark/colors.ts @@ -0,0 +1,263 @@ +import { colors } from '../teams/siteVariables' +import { ColorSchemeMapping } from '../../themes/types' + +const createColorScheme = (color: string, customValues = {}) => { + return { + foreground: colors[color][600], + background: colors[color][50], + border: colors[color][600], + shadow: colors[color][600], + + foregroundHover: colors[color][50], + backgroundHover: colors[color][600], + borderHover: colors[color][600], + shadowHover: colors[color][600], + + foregroundActive: colors[color][50], + backgroundActive: colors[color][600], + borderActive: colors[color][600], + shadowActive: colors[color][600], + + foregroundFocus: colors[color][50], + backgroundFocus: colors[color][600], + borderFocus: colors[color][600], + shadowFocus: 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], + borderDisabled: colors[color][600], + shadowDisabled: colors[color][600], + ...customValues, + } +} + +export const colorScheme: ColorSchemeMapping = { + default: { + foreground: colors.white, + foreground1: colors.grey[250], + foreground3: colors.grey[300], + foreground4: colors.white, + + background: colors.grey[650], + background1: colors.grey[700], + background2: colors.grey[800], + background3: colors.grey[550], + + border: colors.grey[450], // buttons + border1: colors.grey[850], + border2: colors.grey[900], + border3: colors.grey[650], + + shadow: colors.black, // opacity 25% + shadowHover: colors.black, // opacity 25% + + foregroundHover: colors.white, + foregroundHover1: colors.white, + + backgroundHover: colors.grey[550], + backgroundHover2: colors.grey[550], + + borderHover: colors.grey[400], + + foregroundPressed: colors.white, + backgroundPressed: colors.grey[500], + borderPressed: colors.grey[400], + shadowPressed: undefined, + + foregroundActive: colors.white, + foregroundActive1: colors.white, + + backgroundActive: colors.grey[800], + backgroundActive1: colors.grey[500], + + borderActive: colors.grey[450], // buttons + borderActive1: colors.grey[850], + borderActive2: colors.grey[900], + borderActive3: colors.grey[650], + + 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], + + borderFocusWithin: colors.black, + borderFocus: 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, + }, + brand: { + foreground: colors.brand[400], + 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], + + shadow: colors.black, // opacity 25% + shadowHover: colors.black, + + foregroundHover: colors.brand[400], + foregroundHover1: colors.white, + + borderHover: colors.brand[600], + + backgroundHover: colors.brand[500], + backgroundHover1: colors.brand[900], + + foregroundPressed: colors.brand[200], + foregroundPressed1: colors.white, + backgroundPressed: colors.brand[700], + borderPressed: colors.brand[800], + shadowPressed: undefined, + + foregroundActive: colors.brand[400], + foregroundActive1: colors.brand[400], + foregroundActive2: colors.brand[200], + + backgroundActive: colors.brand[400], + backgroundActive1: colors.brand[400], + + // active border no change (just copied) + borderActive: colors.grey[450], // buttons + borderActive1: colors.brand[800], + borderActive2: colors.brand[800], + + shadowActive: undefined, + + foregroundFocus: colors.brand[400], + 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.white, + borderFocusWithin: colors.black, + borderFocus1: colors.brand[400], // only input + 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: { + foreground: colors.black, + background: colors.white, + border: colors.black, + shadow: 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, + + foregroundPressed: colors.white, + backgroundPressed: colors.black, + borderPressed: colors.black, + shadowPressed: colors.black, + + foregroundDisabled: colors.white, + backgroundDisabled: colors.black, + borderDisabled: colors.black, + shadowDisabled: colors.black, + }, + white: { + foreground: colors.white, + background: colors.black, + border: colors.white, + shadow: 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, + + foregroundPressed: colors.black, + backgroundPressed: colors.white, + borderPressed: colors.white, + shadowPressed: colors.white, + + foregroundDisabled: colors.black, + backgroundDisabled: colors.white, + borderDisabled: colors.white, + shadowDisabled: colors.white, + }, + grey: createColorScheme('grey'), + green: createColorScheme('green'), + orange: createColorScheme('orange', { + background: 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', { + background: 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/componentVariables.ts b/packages/react/src/themes/teams-dark/componentVariables.ts index 35737d7fd7..84c0ea9c2a 100644 --- a/packages/react/src/themes/teams-dark/componentVariables.ts +++ b/packages/react/src/themes/teams-dark/componentVariables.ts @@ -4,12 +4,14 @@ 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' 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 Reaction } from './components/Reaction/reactionVariables' export { default as Alert } from './components/Alert/alertVariables' 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..41c5559d4e 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], + oofBackgroundColor: siteVars.colors.pink[800], + oofBorderColor: siteVars.colors.pink[900], - 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/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/Button/buttonVariables.ts b/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts index 69f6a6a6e6..47c18d77bf 100644 --- a/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Button/buttonVariables.ts @@ -6,20 +6,35 @@ export default (siteVars: any): Partial => { colorActive: siteVars.colors.white, colorHover: siteVars.colors.white, colorFocus: siteVars.colors.white, + colorDisabled: siteVars.colors.grey[450], backgroundColor: 'transparent', - borderColorFocus: siteVars.black, + 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.colors.grey[800], + borderColorHover: siteVars.colors.grey[450], borderColorFocusIndicator: siteVars.colors.white, - primaryBackgroundColorActive: siteVars.brand08, - primaryBackgroundColorHover: siteVars.brand08, - primaryBackgroundColorFocus: siteVars.brand14, - primaryBorderColorFocus: siteVars.black, + primaryBackgroundColorActive: siteVars.colors.brand[500], + primaryBackgroundColorHover: siteVars.colors.brand[500], + primaryBackgroundColorFocus: siteVars.colors.brand[800], + primaryBorderColorFocus: siteVars.colors.grey[800], primaryBorderColorFocusIndicator: siteVars.colors.white, - circularColorActive: siteVars.black, - circularBackgroundColorActive: siteVars.gray02, - circularBackgroundColorHover: siteVars.gray03, - circularBackgroundColorFocus: siteVars.gray02, - circularBorderColorFocusIndicator: siteVars.black, + circularColor: siteVars.colors.grey[250], + 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.colors.grey[800], + + textColorHover: siteVars.colors.brand[300], + textPrimaryColorHover: siteVars.colors.brand[300], + textSecondaryColor: siteVars.colors.grey[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 cd582d02e9..f6c65a7c4a 100644 --- a/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Chat/chatMessageVariables.ts @@ -2,13 +2,14 @@ import { ChatMessageVariables } from '../../../teams/components/Chat/chatMessage export default (siteVars: any): Partial => { return { - backgroundColor: siteVars.gray10, - backgroundColorMine: '#33344a', // colors.primary[900] when new palette pr is checked in - authorColor: siteVars.gray02, // will be gray[250] with new palette + backgroundColor: siteVars.colors.grey[600], + backgroundColorMine: siteVars.colors.brand[900], + authorColor: siteVars.colors.grey[250], contentColor: siteVars.colors.white, color: siteVars.colors.white, - contentFocusOutlineColor: siteVars.brand, - hasMentionNubbinColor: siteVars.naturalColors.orange[900], // orange[300] when the new palette pr is checked in - isImportantColor: '#e73550', // red[300] when the new palette pr is checked in + timestampColorMine: siteVars.colors.grey[250], + 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/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/Divider/dividerVariables.ts b/packages/react/src/themes/teams-dark/components/Divider/dividerVariables.ts index 218bc7bdb9..608c850432 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,13 @@ import { DividerVariables } from '../../../teams/components/Divider/dividerVariables' +import { extendColorScheme } from '../../../colorUtils' export default (siteVars: any): Partial => ({ - colors: { - primary: siteVars.brand06, - }, - textColor: siteVars.gray02, + colorScheme: extendColorScheme(siteVars.colorScheme, { + brand: { + foreground: siteVars.colors.brand[400], + border: siteVars.colors.brand[400], + }, + }), + textColor: siteVars.colors.grey[250], + dividerColor: siteVars.colors.grey[550], }) 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/Header/headerVariables.ts b/packages/react/src/themes/teams-dark/components/Header/headerVariables.ts index a1b3a92073..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.gray02, + 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 new file mode 100644 index 0000000000..28b6caf10e --- /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[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 6882243c45..485fc9ee52 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 '../../../base/components/Input/inputVariables' + +export default (siteVars: any): Partial => { return { - backgroundColor: siteVars.gray10, - fontColor: siteVars.gray02, - inputFocusBorderColor: siteVars.brand, - iconColor: siteVars.gray02, + backgroundColor: siteVars.colors.grey[600], + fontColor: siteVars.colors.grey[250], + 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 3aa3e07987..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,6 +1,7 @@ import { ListItemVariables } from 'src/themes/teams/components/List/listItemVariables' export default (siteVars: any): Partial => ({ - selectableFocusHoverBackgroundColor: siteVars.gray08, - selectedBackgroundColor: siteVars.gray08, + 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 43d341926c..5ef3b73738 100644 --- a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts @@ -1,18 +1,29 @@ -import { pxToRem } from '../../../../lib' import { MenuVariables } from '../../../teams/components/Menu/menuVariables' +import { extendColorScheme } from '../../../colorUtils' export default (siteVars: any): Partial => ({ - verticalBorderColor: siteVars.black, + colorScheme: extendColorScheme(siteVars.colorScheme, { + default: { + borderActive: siteVars.colors.grey[600], + backgroundFocus1: siteVars.colors.grey[500], + }, + brand: { + foregroundHover: siteVars.colors.white, + backgroundHover: siteVars.colors.brand[300], + borderActive: siteVars.colors.brand[400], + foregroundActive: siteVars.colors.white, + foregroundFocus: siteVars.colors.white, + backgroundFocus1: siteVars.colors.brand[300], + }, + }), - focusedBorder: `solid ${pxToRem(1)} ${siteVars.colors.white}`, - focusedBackgroundColor: 'transparent', + color: siteVars.colors.grey[250], + colorActive: siteVars.colors.white, - pointingIndicatorBackgroundColor: siteVars.brand06, + primaryBorderColor: siteVars.colors.grey[600], + pointingIndicatorBackgroundColor: siteVars.colors.brand[400], - hoverBackgroundColor: siteVars.gray08, - - activeColor: siteVars.colors.white, - activeBackgroundColor: siteVars.gray08, - - verticalBackgroundColor: siteVars.gray10, + verticalBackgroundColor: siteVars.colors.grey[600], + verticalBackgroundColorFocus: siteVars.colors.grey[550], + 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 ca448b3af8..935d1089b2 100644 --- a/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams-dark/components/RadioGroup/radioGroupItemVariables.ts @@ -1,12 +1,14 @@ import { RadioGroupItemVariables } from 'src/themes/teams/components/RadioGroup/radioGroupItemVariables' export default (siteVars: any): Partial => ({ - textColorDefault: siteVars.gray02, + colorDisabled: siteVars.colors.grey[450], + + textColorDefault: siteVars.colors.grey[250], textColorDefaultHoverFocus: siteVars.colors.white, textColorChecked: siteVars.colors.white, iconBorderColorDefaultHover: siteVars.colors.white, - iconBorderColorChecked: siteVars.brand06, + iconBorderColorChecked: siteVars.colors.brand[400], - iconBackgroundColorChecked: siteVars.brand06, + 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 7a0c3b968c..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.brand06, - meReactingColorHover: siteVars.brand04, - otherReactingColor: siteVars.gray03, + 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 bcd36687e8..5c12958b4c 100644 --- a/packages/react/src/themes/teams-dark/components/Text/textVariables.ts +++ b/packages/react/src/themes/teams-dark/components/Text/textVariables.ts @@ -1,12 +1,12 @@ import { TeamsTextVariables } from '../../../teams/components/Text/textVariables' export default (siteVariables): Partial => ({ - atMentionMeColor: siteVariables.orange04, - atMentionOtherColor: siteVariables.brand06, - disabledColor: siteVariables.gray06, - errorColor: siteVariables.red, - importantColor: siteVariables.red, - successColor: siteVariables.green04, - timestampColor: siteVariables.gray04, - timestampHoverColor: siteVariables.gray02, + atMentionMeColor: siteVariables.colors.orange[300], + atMentionOtherColor: siteVariables.colors.brand[400], + disabledColor: siteVariables.colors.grey[450], + 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 a3b5d8508d..45b5cb3b98 100644 --- a/packages/react/src/themes/teams-dark/siteVariables.ts +++ b/packages/react/src/themes/teams-dark/siteVariables.ts @@ -1,36 +1,5 @@ -import { colors, naturalColors } from '../teams/siteVariables' - -// -// 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 gray850 = '#1b1a1a' -export const gray600 = '#323131' - -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 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 -export const red08 = '#4f232b' // no mapping color -export const green04 = naturalColors.lightGreen[900] +import { colors } from '../teams/siteVariables' +export { colorScheme } from './colors' // // SHADOW LEVELS @@ -40,5 +9,5 @@ export const shadowLevel1 = '0 .2rem .4rem -.075rem rgba(0, 0, 0, .25)' // // 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/colors.ts b/packages/react/src/themes/teams-high-contrast/colors.ts new file mode 100644 index 0000000000..5ca5eb8709 --- /dev/null +++ b/packages/react/src/themes/teams-high-contrast/colors.ts @@ -0,0 +1,194 @@ +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' +export const red = '#f00' + +// COLOR SCHEME +const createColorScheme = (customValues = {}) => { + return { + foreground: colors.white, + background: colors.black, + border: colors.white, + shadow: 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, + + foregroundPressed: colors.black, + backgroundPressed: accessibleYellow, + borderPressed: colors.white, + shadowPressed: colors.white, + + foregroundDisabled: colors.black, + backgroundDisabled: accessibleGreen, + borderDisabled: colors.black, + shadowDisabled: colors.black, + ...customValues, + } +} + +export const colorScheme: ColorSchemeMapping = { + default: { + foreground: colors.white, + foreground1: colors.white, + foreground2: colors.white, + foreground3: colors.white, + + background: colors.black, + background1: colors.black, + background2: colors.black, + background3: colors.black, + + border: colors.white, + border1: colors.white, + border2: colors.white, + border3: colors.white, + + shadow: colors.black, // opacity 25% + shadowHover: colors.black, // opacity 25% + + foregroundHover: colors.black, + foregroundHover1: colors.black, + + backgroundHover: accessibleYellow, + backgroundHover1: accessibleYellow, + + borderHover: accessibleYellow, + + foregroundPressed: colors.black, + backgroundPressed: accessibleYellow, + borderPressed: accessibleYellow, + shadowPressed: undefined, + + foregroundActive: accessibleCyan, + foregroundActive1: colors.black, + + backgroundActive: colors.black, + backgroundActive1: accessibleCyan, + + borderActive: accessibleCyan, // buttons + borderActive1: accessibleCyan, + borderActive2: accessibleCyan, + borderActive3: accessibleCyan, + + shadowActive: undefined, + + foregroundFocus: colors.black, + foregroundFocus1: colors.black, + foregroundFocus2: colors.black, + foregroundFocus3: colors.black, + + backgroundFocus: accessibleCyan, + backgroundFocus1: accessibleCyan, + backgroundFocus2: accessibleCyan, + backgroundFocus3: accessibleCyan, + + borderFocusWithin: colors.black, + borderFocus: accessibleCyan, + + shadowFocus: undefined, + + foregroundDisabled1: accessibleGreen, + foregroundDisabled: colors.black, + + backgroundDisabled: accessibleGreen, + backgroundDisabled1: colors.black, + + borderDisabled: accessibleGreen, + shadowDisabled: undefined, + }, + brand: { + foreground: colors.white, + 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, + + shadow: colors.black, // opacity 25% + shadowHover: colors.black, + + foregroundHover: colors.black, + foregroundHover1: colors.black, + + borderHover: accessibleYellow, + + backgroundHover: accessibleYellow, + backgroundHover1: accessibleYellow, + + foregroundPressed: colors.black, + foregroundPressed1: colors.black, + backgroundPressed: accessibleYellow, + borderPressed: accessibleYellow, + shadowPressed: undefined, + + foregroundActive: accessibleCyan, + foregroundActive1: colors.black, + foregroundActive2: accessibleCyan, + + backgroundActive: colors.black, + backgroundActive1: accessibleCyan, + + borderActive: accessibleCyan, // buttons + borderActive1: accessibleCyan, + borderActive2: accessibleCyan, + + shadowActive: undefined, + + foregroundFocus: colors.black, + foregroundFocus1: colors.black, + foregroundFocus2: colors.black, + foregroundFocus3: colors.black, + foregroundFocus4: colors.black, + + backgroundFocus: accessibleCyan, + backgroundFocus1: accessibleCyan, + backgroundFocus2: accessibleCyan, + backgroundFocus3: accessibleCyan, + + borderFocus: accessibleCyan, + borderFocusWithin: colors.black, + borderFocus1: accessibleCyan, + shadowFocus: undefined, + + foregroundDisabled: colors.black, + foregroundDisabled1: accessibleGreen, + + backgroundDisabled: accessibleGreen, + backgroundDisabled1: colors.black, + + borderDisabled: accessibleGreen, + shadowDisabled: undefined, + }, + black: createColorScheme(), + white: 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 ee58d15a46..7a3be12c3e 100644 --- a/packages/react/src/themes/teams-high-contrast/componentVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/componentVariables.ts @@ -11,5 +11,6 @@ export { default as Menu } from './components/Menu/menuVariables' export { default as RadioGroupItem } from './components/RadioGroup/radioGroupItemVariables' export { default as Text } from './components/Text/textVariables' export { default as TreeTitle } from './components/Tree/treeTitleVariables' +export { default as Status } from './components/Status/statusVariables' export { default as Reaction } from './components/Reaction/reactionVariables' export { default as Alert } from './components/Alert/alertVariables' 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 f70cd1a335..008f4210e2 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,13 +2,13 @@ import { ChatMessageVariables } from '../../../teams/components/Chat/chatMessage export default (siteVars: any): Partial => { return { - backgroundColor: siteVars.black, - backgroundColorMine: siteVars.black, - authorColor: siteVars.white, - contentColor: siteVars.white, - color: siteVars.white, + backgroundColor: siteVars.colors.black, + backgroundColorMine: siteVars.colors.black, + authorColor: siteVars.colors.white, + contentColor: siteVars.colors.white, + color: siteVars.colors.white, contentFocusOutlineColor: siteVars.colors.yellow[900], // Red flag (should this be accessibleYellow?) - border: `1px solid ${siteVars.white}`, + border: `1px solid ${siteVars.colors.white}`, hasMentionColor: siteVars.accessibleYellow, hasMentionNubbinColor: siteVars.accessibleYellow, isImportantColor: siteVars.accessibleYellow, 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 d3cf54f78c..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,9 +1,6 @@ import { DividerVariables } from '../../../teams/components/Divider/dividerVariables' export default (siteVars: any): Partial => ({ - colors: { - primary: siteVars.white, - }, - 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/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-high-contrast/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts index 1ce285356a..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 @@ -1,48 +1,64 @@ 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 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': { - color: v.activeColor, + color: v.colorActive, ...(!active && { - background: v.focusedBackgroundColor, + ...(primary && !underlined && { color: v.colorActive }), + background: v.backgroundColorFocus, }), }, - ...(active && { - background: v.activeBackgroundColor, - color: v.activeColor, - }), + ...(active && + !underlined && { + background: v.backgroundColorActive, + color: v.colorActive, + }), ...((iconOnly || vertical) && { ...(isFromKeyboard && { - color: v.activeColor, - background: v.focusedBackgroundColor, + color: v.colorActive, + background: v.backgroundColorFocus, }), ...(active && { - color: v.activeColor, - background: v.activeBackgroundColor, + color: v.colorActive, + background: v.backgroundColorActive, }), ':hover': { - color: v.activeColor, - background: v.focusedBackgroundColor, + color: v.colorActive, + background: v.backgroundColorFocus, }, }), - ...((underlined || primary) && { - ...(!active && { - ':hover': { - color: v.color, - }, + ...(underlined && { + ...(active && { + color: v.color, + }), + ':hover': { + color: v.color, + }, + ...(isFromKeyboard && { + color: v.colorActive, }), }), @@ -52,13 +68,35 @@ 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 4c5f3a40a3..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 @@ -1,10 +1,17 @@ import { MenuVariables } from '../../../teams/components/Menu/menuVariables' +import { extendColorScheme } from '../../../colorUtils' export default (siteVars: any): Partial => ({ - color: siteVars.white, - activeColor: siteVars.black, - focusedBackgroundColor: siteVars.accessibleYellow, - activeBackgroundColor: siteVars.accessibleCyan, + colorScheme: extendColorScheme(siteVars.colorScheme, { + brand: { + foregroundActive: siteVars.colors.black, + }, + }), + color: siteVars.colors.white, + colorActive: siteVars.colors.black, + backgroundColorFocus: siteVars.accessibleYellow, + backgroundColorActive: siteVars.accessibleCyan, + 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/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/components/Text/textVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Text/textVariables.ts index 22f96cb969..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 @@ -6,7 +6,7 @@ export default (siteVariables): Partial => ({ disabledColor: siteVariables.accessibleGreen, errorColor: siteVariables.red, importantColor: siteVariables.red, - successColor: siteVariables.green04, - timestampColor: siteVariables.white, - timestampHoverColor: siteVariables.white, + successColor: siteVariables.colors.green[200], + 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, } } diff --git a/packages/react/src/themes/teams-high-contrast/siteVariables.ts b/packages/react/src/themes/teams-high-contrast/siteVariables.ts index 03f3d45241..7843e8a036 100644 --- a/packages/react/src/themes/teams-high-contrast/siteVariables.ts +++ b/packages/react/src/themes/teams-high-contrast/siteVariables.ts @@ -1,35 +1,8 @@ -import { colors, naturalColors } from '../teams/siteVariables' - -// -// COLORS -// -export const black = '#000' -export const white = '#fff' - -export const accessibleYellow = '#ffff01' -export const accessibleGreen = '#3ff23f' // always disabled color in high contrast -export const accessibleCyan = '#1aebff' - -export const red = '#f00' -export const green04 = naturalColors.lightGreen[900] - -// -// 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 +export * from './colors' +import { colors } from '../teams/siteVariables' // // SEMANTIC ASSIGNMENTS // -export const bodyBackground = black +export const bodyBackground = colors.black 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..0a5ae49e6f 100644 --- a/packages/react/src/themes/teams/colors.ts +++ b/packages/react/src/themes/teams/colors.ts @@ -1,205 +1,455 @@ -import * as _ from 'lodash' - import { ColorPalette, - ContextualColors, EmphasisColors, NaturalColors, - ColorSchemeMapping, PrimitiveColors, ColorScheme, + ColorSchemeMapping, + ColorVariants, + ContextualColors, } from '../types' +import { Extendable } from '../../types' -export const emphasisColors: EmphasisColors = { - primary: { - 50: '#F4F4FC', // siteVariables.brand16 - 100: '#E2E2F6', // siteVariables.brand14 - 200: '#BDBDE6', // siteVariables.brand12 - 300: '#8F90C1', - 400: '#6E70AE', - 500: '#6264A7', // siteVariables.brand, siteVariables.brand06 (same color?) - 600: '#55578D', - 700: '#4A4C78', - 800: '#414265', - 900: '#33344A', // siteVariables.brand02 +export const emphasisColors: ContextualColors = { + brand: { + 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, dark theme brand, brand12 + 700: '#585A96', // light05 + 800: '#464775', // light04, dark14 + 900: '#33344A', // siteVariables.brand02, dark theme brand16, same as 900 prev + 1000: '#373644', }, } 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: { - 50: '#FFFFFF', // siteVariables.white - 100: '#E6E6E6', - 200: '#CDCCCC', - 300: '#B8B8B8', - 400: '#A2A2A2', - 500: '#8C8C8C', - 600: '#747373', - 700: '#5F5E5E', - 800: '#404040', - 900: '#252424', // siteVariables.black + 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: '#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 + 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 + 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', // 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', - 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: '#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', - 100: '#FDF1BE', - 200: '#FDEEAE', - 300: '#FBEA9D', - 400: '#FCE78E', - 500: '#FAE37C', - 600: '#FAE06C', - 700: '#F9DC58', - 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', - 200: '#D8EAC1', - 300: '#CDE3B0', - 400: '#C6DFA4', - 500: '#BDDB96', - 600: '#B4D689', - 700: '#ACD17B', - 800: '#A1CC6B', - 900: '#92C353', // siteVariables.green - }, - magenta: { - 50: '#E8D4E0', - 100: '#DEC0D2', - 200: '#D4ADC5', - 300: '#CDA0BC', - 400: '#C491B0', - 500: '#BB7FA4', - 600: '#B26E98', - 700: '#AA5F8D', - 800: '#A14F82', - 900: '#953872', + 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, }, - postOrange: { - 50: '#FDF6F7', - 100: '#FBF2F3', - 200: '#FAEEEF', - 300: '#F9ECED', - 400: '#F8E9EA', - 500: '#F7E5E6', - 600: '#F7E2E4', - 700: '#F5DEE0', - 800: '#F5DBDD', - 900: '#F3D6D8', + 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, }, } -export const contextualColors: ContextualColors = { - text: naturalColors.grey, -} - const emphasisAndNaturalColors: EmphasisColors & NaturalColors = { ...emphasisColors, ...naturalColors, } -const lightBackgroundColors = ['orange', 'yellow', 'lightGreen', 'postOrange'] -const isLightBackground = (colorName: string) => _.includes(lightBackgroundColors, colorName) +export const primitiveColors: PrimitiveColors = { + black: '#000', + white: '#fff', +} -export const colors: ColorPalette = { +export const transparentColors = { + 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: 'rgba(255,255,255,0.2)', + 800: 'rgba(255,255,255,0.1)', + 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, + }, +} + +type TransparentColors = Partial<{ + silver: ColorVariants + ruby: ColorVariants + onyx: ColorVariants +}> + +export const colors: ColorPalette = { ...emphasisAndNaturalColors, - ...contextualColors, + ...primitiveColors, + ...transparentColors, +} - // Primitive colors - black: '#000', - white: naturalColors.grey[50], // siteVariables.white +const createColorScheme = (color: string, customValues = {}) => { + return { + foreground: colors[color][600], + background: colors[color][50], + border: colors[color][600], + shadow: colors[color][600], + + foregroundHover: colors[color][50], + backgroundHover: colors[color][600], + borderHover: colors[color][600], + shadowHover: colors[color][600], + + foregroundActive: colors[color][50], + backgroundActive: colors[color][600], + borderActive: colors[color][600], + shadowActive: colors[color][600], + + foregroundFocus: colors[color][50], + backgroundFocus: colors[color][600], + borderFocus: colors[color][600], + shadowFocus: 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], + borderDisabled: colors[color][600], + shadowDisabled: colors[color][600], + ...customValues, + } } -const primitiveColorsScheme: Record = { - black: { - foreground: colors.white, - border: colors.white, - shadow: colors.white, - background: colors.black, +const lightColorOverrides = { + background: colors.black, + foregroundHover: colors.black, + foregroundActive: colors.black, + foregroundFocus: colors.black, + foregroundFocusWithin: colors.black, + foregroundDisabled: colors.black, +} + +export const colorScheme: ColorSchemeMapping = { + default: { + foreground: colors.grey[750], + foreground1: colors.grey[500], + foreground2: colors.grey[450], + foreground3: colors.white, + + background: colors.white, + background1: colors.grey[50], + background2: colors.grey[100], + background3: colors.grey[150], + + border: colors.grey[200], // buttons + border1: colors.grey[150], + border2: colors.grey[200], + border3: colors.grey[150], // divider + + shadow: colors.black, // opacity 10% + shadowHover: colors.black, // opacity 10% + + foregroundHover: colors.grey[750], + foregroundHover1: colors.white, + + backgroundHover: colors.grey[100], + backgroundHover1: colors.grey[150], + + borderHover: colors.grey[250], // buttons + + foregroundPressed: colors.grey[750], + backgroundPressed: colors.grey[200], + borderPressed: colors.grey[250], + shadowPressed: undefined, + + foregroundActive: colors.grey[750], + foregroundActive1: colors.white, + + backgroundActive: colors.grey[100], + backgroundActive1: colors.grey[150], + + borderActive: colors.grey[200], // buttons + borderActive1: colors.grey[150], + borderActive2: colors.grey[200], + borderActive3: colors.grey[150], // divider + + 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], + + borderFocusWithin: colors.white, + borderFocus: colors.black, + + shadowFocus: undefined, + + foregroundDisabled1: colors.grey[250], + foregroundDisabled: colors.grey[250], + + backgroundDisabled1: colors.grey[150], + backgroundDisabled: colors.grey[150], + + borderDisabled: colors.grey[150], + shadowDisabled: undefined, }, - white: { + brand: { + foreground: colors.brand[600], + 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], + + shadow: colors.black, // opacity 25% + shadowHover: colors.black, + + foregroundHover: colors.brand[600], + foregroundHover1: colors.white, + + borderHover: colors.brand[300], + + backgroundHover: colors.brand[700], + 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, + + foregroundActive: colors.brand[600], + foregroundActive1: colors.brand[600], + foregroundActive2: colors.brand[200], + + backgroundActive: colors.brand[600], + backgroundActive1: colors.brand[600], + + borderActive: colors.grey[200], + borderActive1: colors.brand[200], + borderActive2: colors.brand[300], + + shadowActive: undefined, + + foregroundFocus: colors.brand[600], + foregroundFocus1: colors.brand[600], + foregroundFocus2: colors.brand[700], + foregroundFocus3: colors.brand[200], + foregroundFocus4: colors.white, + + backgroundFocus: colors.brand[600], + backgroundFocus1: colors.brand[100], + backgroundFocus2: colors.brand[900], + backgroundFocus3: colors.brand[1000], + + borderFocus: colors.black, + borderFocusWithin: colors.white, + borderFocus1: colors.brand[600], // only input + shadowFocus: undefined, + + foregroundDisabled: colors.grey[250], + foregroundDisabled1: colors.grey[250], + + backgroundDisabled: colors.grey[150], + backgroundDisabled1: colors.grey[150], + + borderDisabled: colors.grey[150], + shadowDisabled: undefined, + }, + black: { foreground: colors.black, + background: colors.white, border: colors.black, shadow: colors.black, - background: colors.white, + + 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, + + foregroundPressed: colors.white, + backgroundPressed: colors.black, + borderPressed: colors.black, + shadowPressed: colors.black, + + foregroundDisabled: colors.white, + backgroundDisabled: colors.black, + borderDisabled: colors.black, + shadowDisabled: colors.black, }, + white: { + foreground: colors.white, + background: colors.black, + border: colors.white, + shadow: 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, + + foregroundPressed: colors.black, + backgroundPressed: colors.white, + borderPressed: colors.white, + shadowPressed: colors.white, + + foregroundDisabled: colors.black, + backgroundDisabled: colors.white, + borderDisabled: colors.white, + shadowDisabled: colors.white, + }, + grey: createColorScheme('grey'), + green: createColorScheme('green'), + orange: createColorScheme('orange', lightColorOverrides), + pink: createColorScheme('pink'), + red: createColorScheme('red'), + yellow: createColorScheme('yellow', lightColorOverrides), } -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], - }, - } - }), +export const availableColors = [ + 'default', + 'black', + 'white', + 'brand', + '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 ? 'brand' : 'default' +} + +export const getColorScheme = ( + colorScheme: ColorSchemeMapping, + color?: string, + primary?: boolean, +): Extendable => { + return colorScheme[getColorSchemeKey(color, primary)] } diff --git a/packages/react/src/themes/teams/components/Alert/alertStyles.ts b/packages/react/src/themes/teams/components/Alert/alertStyles.ts index 35244355de..717bd8ae7e 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' import { teamsIconClassNames } from '../Icon/svg' @@ -16,7 +11,6 @@ const getIntentColorsFromProps = ( siteVars: SiteVariablesPrepared, ): React.CSSProperties => { const { colors } = siteVars - const naturalColors: NaturalColors = siteVars.naturalColors if (p.danger) { return { @@ -52,17 +46,17 @@ 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 } } if (p.warning) { return { - color: siteVars.gray03, + color: siteVars.colors.grey[450], 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/Alert/alertVariables.ts b/packages/react/src/themes/teams/components/Alert/alertVariables.ts index 90b807afac..7e09b32fc8 100644 --- a/packages/react/src/themes/teams/components/Alert/alertVariables.ts +++ b/packages/react/src/themes/teams/components/Alert/alertVariables.ts @@ -46,9 +46,9 @@ export default (siteVars: SiteVariablesPrepared): AlertVariables => { borderStyle: 'solid', borderWidth: '1px', borderRadius: pxToRem(3), - backgroundColor: siteVars.colors.grey[50], - borderColor: siteVars.gray06, - color: siteVars.gray02, + backgroundColor: siteVars.colors.grey[50], // $app-white + borderColor: siteVars.colors.grey[250], + color: siteVars.colors.grey[500], fontWeight: siteVars.fontWeightRegular, minHeight, padding: `0 0 0 ${pxToRem(16)}`, @@ -59,22 +59,22 @@ export default (siteVars: SiteVariablesPrepared): AlertVariables => { focusInnerBorderColor: siteVars.colors.white, focusOuterBorderColor: siteVars.colors.black, - dangerColor: siteVars.red, // red[400] when new color palette PR goes in - dangerBackgroundColor: siteVars.red10, // red[50] when new color palette PR goes in - dangerBorderColor: siteVars.red08, // 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.orchid, // pink[600] when new color palette PR goes in - oofBackgroundColor: '#fcf2fa', // pink[50] when new color palette PR goes in - oofBorderColor: '#f1dfee', // pink[100] when new color palette PR goes in + oofColor: siteVars.colors.pink[600], + oofBackgroundColor: siteVars.colors.pink[50], + oofBorderColor: siteVars.colors.pink[100], - infoColor: siteVars.gray02, - infoBackgroundColor: siteVars.gray09, - infoBorderColor: siteVars.gray08, + infoColor: siteVars.colors.grey[500], + infoBackgroundColor: siteVars.colors.grey[150], + infoBorderColor: siteVars.colors.grey[200], urgent: false, urgentColor: siteVars.colors.white, - urgentBackgroundColor: siteVars.red, - urgentBorderColor: siteVars.red, + urgentBackgroundColor: siteVars.colors.red[400], + urgentBorderColor: siteVars.colors.red[400], } } diff --git a/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts b/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts index ca127aea2e..98ba367095 100644 --- a/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts +++ b/packages/react/src/themes/teams/components/Attachment/attachmentVariables.ts @@ -30,15 +30,15 @@ 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.naturalColors.lightGreen[900], + progressColor: siteVariables.colors.green[200], progressHeight: 4, headerFontSize: siteVariables.fontSizes.medium, diff --git a/packages/react/src/themes/teams/components/Button/buttonVariables.ts b/packages/react/src/themes/teams/components/Button/buttonVariables.ts index 2fa892d1b9..c779631d11 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.gray06, + 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.gray08, - backgroundColorHover: siteVars.gray14, - backgroundColorFocus: siteVars.gray08, - backgroundColorDisabled: siteVars.gray09, - borderColor: siteVars.gray08, - borderColorActive: siteVars.gray06, - borderColorHover: siteVars.gray06, + 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, @@ -101,37 +101,37 @@ export default (siteVars: any): ButtonVariables => { primaryColorActive: siteVars.colors.white, primaryColorHover: siteVars.colors.white, primaryColorFocus: siteVars.colors.white, - primaryBackgroundColor: siteVars.colors.primary[500], - primaryBackgroundColorActive: siteVars.colors.primary[900], - primaryBackgroundColorHover: siteVars.brand04, - primaryBackgroundColorFocus: siteVars.brand04, + 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', primaryBorderColorFocus: siteVars.colors.white, - primaryBorderColorFocusIndicator: siteVars.colors.grey[900], + primaryBorderColorFocusIndicator: siteVars.colors.grey[750], primaryBorderWidth: 1, primaryCircularBorderColorFocusIndicator: siteVars.colors.white, - circularColor: siteVars.gray02, + circularColor: siteVars.colors.grey[500], circularColorActive: siteVars.colors.white, circularBackgroundColor: 'transparent', - circularBackgroundColorActive: siteVars.gray02, - circularBackgroundColorHover: siteVars.gray03, - circularBackgroundColorFocus: siteVars.gray03, - circularBorderColor: siteVars.gray02, + 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', circularBorderColorFocusIndicator: siteVars.colors.white, - textColor: siteVars.colors.primary[500], - textColorHover: siteVars.brand04, - textPrimaryColor: siteVars.colors.primary[500], - textPrimaryColorHover: siteVars.brand04, - textSecondaryColor: siteVars.gray03, - textSecondaryColorHover: siteVars.brand04, + 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.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 7abe434127..33fc3d1cea 100644 --- a/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts +++ b/packages/react/src/themes/teams/components/Chat/chatMessageVariables.ts @@ -33,25 +33,25 @@ export default (siteVars): ChatMessageVariables => ({ actionMenuPositionRight: pxToRem(5), actionMenuPositionTop: pxToRem(-30), backgroundColor: siteVars.colors.white, - backgroundColorMine: '#E5E5F1', // colors.primary[100] when new color palette pr is checked in + backgroundColorMine: siteVars.colors.brand[100], borderRadius: pxToRem(3), color: 'rgb(64, 64, 64)', offset: pxToRem(100), padding: pxToRem(16), authorMarginRight: pxToRem(12), - authorColor: siteVars.gray02, // will be gray[500] with new palette + authorColor: siteVars.colors.grey[500], authorFontWeight: siteVars.fontWeightRegular, headerMarginBottom: pxToRem(2), - contentColor: '#252423', // will be gray[750] with new palette - contentFocusOutlineColor: siteVars.colors.primary[500], + contentColor: siteVars.colors.grey[750], + contentFocusOutlineColor: siteVars.colors.brand[600], border: 'none', badgeShadow: siteVars.shadowLevel1Darker, isImportant: false, hasMention: false, - hasMentionColor: siteVars.naturalColors.orange[900], // orange[300] when the new palette pr is checked in - hasMentionNubbinColor: siteVars.naturalColors.darkOrange[400], // orange[400] when the new palette pr is checked in - isImportantColor: siteVars.colors.red[900], // red[400] when the new palette pr is checked in + hasMentionColor: siteVars.colors.orange[300], + hasMentionNubbinColor: siteVars.colors.orange[400], + isImportantColor: siteVars.colors.red[400], badgeTextColor: siteVars.colors.white, reactionGroupMarginLeft: pxToRem(12), - timestampColorMine: siteVars.gray02, + 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 e95b64bfb8..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.gray10, + backgroundColor: siteVars.colors.grey[100], }) diff --git a/packages/react/src/themes/teams/components/Divider/dividerStyles.ts b/packages/react/src/themes/teams/components/Divider/dividerStyles.ts index dcd49a0e73..7e3cb10c72 100644 --- a/packages/react/src/themes/teams/components/Divider/dividerStyles.ts +++ b/packages/react/src/themes/teams/components/Divider/dividerStyles.ts @@ -1,26 +1,27 @@ 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 = ( - color: string, size: number, variables: DividerVariables, + colors: ColorScheme, ): ICSSInJSStyle => ({ content: '""', flex: 1, height: `${size + 1}px`, - background: _.get(variables.colors, color, variables.dividerColor), + background: _.get(colors, 'foreground', 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, 'foreground', variables.textColor), display: 'flex', alignItems: 'center', ...(!fitted && { @@ -36,17 +37,17 @@ const dividerStyles: ComponentSlotStylesInput + colorScheme: ColorSchemeMapping dividerColor: string textColor: string textFontSize: string @@ -13,16 +13,12 @@ export interface DividerVariables { dividerPadding: string } -export default (siteVars: any): DividerVariables => { - const colorVariant = 500 - - return { - colors: mapColorsToScheme(siteVars, colorVariant), - dividerColor: siteVars.gray09, - textColor: siteVars.gray03, - textFontSize: siteVars.fontSizeSmall, - textLineHeight: siteVars.lineHeightSmall, - importantFontWeight: siteVars.fontWeightBold, - dividerPadding: pxToRem(4), - } -} +export default (siteVars: any): DividerVariables => ({ + colorScheme: siteVars.colorScheme, + dividerColor: siteVars.colors.grey[150], + textColor: siteVars.colors.grey[450], + textFontSize: siteVars.fontSizeSmall, + textLineHeight: siteVars.lineHeightSmall, + importantFontWeight: siteVars.fontWeightBold, + dividerPadding: pxToRem(4), +}) diff --git a/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts b/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts index 920ead882e..14b8c2de91 100644 --- a/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts +++ b/packages/react/src/themes/teams/components/Dropdown/dropdownVariables.ts @@ -24,8 +24,8 @@ export interface DropdownVariables { const [_2px_asRem, _3px_asRem, _12px_asRem] = [2, 3, 12].map(v => pxToRem(v)) export default (siteVars): DropdownVariables => ({ - backgroundColor: siteVars.gray10, - borderColorFocus: siteVars.colors.primary[500], + backgroundColor: siteVars.colors.grey[100], + borderColorFocus: siteVars.colors.brand[600], borderRadius: `${_3px_asRem} ${_3px_asRem} ${_2px_asRem} ${_2px_asRem}`, borderWidth: `0 0 ${pxToRem(2)} 0`, color: siteVars.bodyColor, @@ -34,12 +34,12 @@ 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[250]}`, listMaxHeight: pxToRem(296), listItemBackgroundColor: siteVars.colors.white, - listItemBackgroundColorActive: siteVars.colors.primary[500], + listItemBackgroundColorActive: siteVars.colors.brand[600], listItemColorActive: siteVars.colors.white, - selectedItemBackgroundColorFocus: siteVars.colors.primary[100], + 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 f8080f4b39..495e5b5342 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, 'foreground', 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 c41a19513c..29f9e0703c 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.gray04, - } -} +export default (siteVariables: any): HeaderDescriptionVariables => ({ + colorScheme: siteVariables.colorScheme, + color: siteVariables.colors.grey[350], +}) diff --git a/packages/react/src/themes/teams/components/Header/headerStyles.ts b/packages/react/src/themes/teams/components/Header/headerStyles.ts index ecf3789006..5c442b2380 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, 'foreground', 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..2f778c6699 100644 --- a/packages/react/src/themes/teams/components/Header/headerVariables.ts +++ b/packages/react/src/themes/teams/components/Header/headerVariables.ts @@ -1,17 +1,15 @@ -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), - color: siteVars.colors.grey[900], + colorScheme: siteVars.colorScheme, + color: siteVars.colors.grey[750], 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 cc321ff9ed..af049d9518 100644 --- a/packages/react/src/themes/teams/components/Icon/iconStyles.ts +++ b/packages/react/src/themes/teams/components/Icon/iconStyles.ts @@ -75,8 +75,9 @@ 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 = (variables, colors) => { + return _.get(colors, 'foreground', variables.color || 'currentColor') +} const iconStyles: ComponentSlotStylesInput = { root: ({ @@ -84,6 +85,7 @@ const iconStyles: ComponentSlotStylesInput = { variables: v, theme, }): ICSSInJSStyle => { + const colors = v.colorScheme[color] const iconSpec = theme.icons[name] const isFontBased = name && (!iconSpec || !iconSpec.isSvg) @@ -99,7 +101,7 @@ const iconStyles: ComponentSlotStylesInput = { ...(isFontBased && { ...getFontStyles(getIconSize(size, v.sizeModifier), name), fontWeight: 900, // required for the fontAwesome to render - color: getIconColor(color, v), + color: getIconColor(v, colors), transform: `rotate(${rotate}deg)`, ...(disabled && { color: v.disabledColor, @@ -108,7 +110,7 @@ const iconStyles: ComponentSlotStylesInput = { // overriding base theme border handling ...((bordered || v.borderColor) && - getBorderedStyles(v.borderColor || getIconColor(color, v))), + getBorderedStyles(v.borderColor || getIconColor(v, colors))), } }, @@ -131,13 +133,14 @@ const iconStyles: ComponentSlotStylesInput = { }, svg: ({ props: { size, color, disabled, rotate }, variables: v }): ICSSInJSStyle => { + const colors = v.colorScheme[color] const iconSizeInRems = pxToRem(getIconSize(size, v.sizeModifier)) return { display: 'block', width: iconSizeInRems, height: iconSizeInRems, - fill: getIconColor(color, v), + fill: getIconColor(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 f86bba94ce..356c096559 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,17 +18,15 @@ 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, brandColor: siteVars.brandColor, secondaryColor: siteVars.colors.white, - redColor: siteVars.colors.red[900], - disabledColor: siteVars.gray06, + redColor: siteVars.colors.red[400], + 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 cf2296fe8c..f68da2ea1a 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.brand[600]} transparent`, 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/Label/labelStyles.ts b/packages/react/src/themes/teams/components/Label/labelStyles.ts index 7f823fc306..0c29d8c9b5 100644 --- a/packages/react/src/themes/teams/components/Label/labelStyles.ts +++ b/packages/react/src/themes/teams/components/Label/labelStyles.ts @@ -2,17 +2,20 @@ import { pxToRem } from '../../../../lib' import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' import { LabelProps } from '../../../../components/Label/Label' import { LabelVariables } from './labelVariables' +import { getColorScheme } from '../../colors' const labelStyles: ComponentSlotStylesInput = { - root: ({ props: p, variables: v, colors }): ICSSInJSStyle => { + root: ({ props: p, variables: v }): ICSSInJSStyle => { + const colors = getColorScheme(v.colorScheme, p.color) + return { display: 'inline-flex', alignItems: 'center', overflow: 'hidden', height: v.height, lineHeight: v.height, - color: colors.foreground, - backgroundColor: colors.background, + 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 8f9256fc05..5dde9a0e38 100644 --- a/packages/react/src/themes/teams/components/Label/labelVariables.ts +++ b/packages/react/src/themes/teams/components/Label/labelVariables.ts @@ -1,10 +1,9 @@ -import { pxToRem, getColorSchemeWithCustomDefaults } from '../../../../lib' -import { ColorValues, ColorScheme, SiteVariablesPrepared } from '../../../types' - -type LabelColorScheme = Pick +import { pxToRem } from '../../../../lib' +import { SiteVariablesPrepared, ColorSchemeMapping } from '../../../types' +import { extendColorScheme } from '../../../colorUtils' export interface LabelVariables { - colorScheme: ColorValues + colorScheme: ColorSchemeMapping circularRadius: string padding: string startPaddingLeft: string @@ -17,9 +16,14 @@ export default (siteVars: SiteVariablesPrepared): LabelVariables => { const color = 'rgba(0, 0, 0, 0.6)' return { - colorScheme: getColorSchemeWithCustomDefaults(siteVars.colorScheme, { - foreground: color, - background: 'rgb(232, 232, 232)', + colorScheme: extendColorScheme(siteVars.colorScheme, { + default: { + 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/List/listItemVariables.ts b/packages/react/src/themes/teams/components/List/listItemVariables.ts index 01a995a1de..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.brand08, + selectableFocusHoverBackgroundColor: siteVariables.colors.brand[500], selectedColor: siteVariables.bodyColor, - selectedBackgroundColor: siteVariables.gray10, - selectedFocusOutlineColor: siteVariables.colors.primary[500], + selectedBackgroundColor: siteVariables.colors.grey[100], + 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 31a2d14f9b..2d8a1e0d7b 100644 --- a/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts @@ -1,10 +1,12 @@ import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' import { MenuDividerProps } from '../../../../components/Menu/MenuDivider' import { MenuVariables } from './menuVariables' +import { getColorScheme } from '../../colors' const menuDividerStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => { - const borderColor = p.primary ? v.primaryBorderColor : v.borderColor + 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 958e88a67b..a47ea26313 100644 --- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts @@ -1,8 +1,10 @@ import { pxToRem } from '../../../../lib' -import { ComponentSlotStyleFunction, ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +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' +import { getColorScheme } from '../../colors' type MenuItemPropsAndState = MenuItemProps & MenuItemState @@ -10,7 +12,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', @@ -19,81 +21,82 @@ const underlinedItem = (color: string): ICSSInJSStyle => ({ const getActionStyles = ({ props: { primary, underlined, iconOnly }, variables: v, - color, + colors, }: { props: MenuItemPropsAndState variables: MenuVariables - color: string + colors: Extendable }): ICSSInJSStyle => underlined || iconOnly ? { - color, + color: v.color, } : primary ? { - color: v.primaryActiveColor, - background: v.primaryActiveBackgroundColor, + color: colors.foregroundActive, + background: v.backgroundColorActive || colors.backgroundActive1, } : { - color, - background: v.activeBackgroundColor, + color: v.color, + background: v.backgroundColorActive || colors.backgroundActive1, } const getFocusedStyles = ({ props, variables: v, - color, + colors, }: { props: MenuItemPropsAndState variables: MenuVariables - color: string + colors: Extendable }): ICSSInJSStyle => { const { primary, underlined, isFromKeyboard, active, vertical } = props if (active && !underlined && !vertical) return {} return { - ...(underlined && !isFromKeyboard - ? { - color, - } - : primary - ? { - color: v.primaryFocusedColor, - background: v.primaryFocusedBackgroundColor, - } - : { - color, - background: v.hoverBackgroundColor, - }), - + color: primary ? colors.foregroundFocus : v.colorActive, + background: v.backgroundColorFocus || colors.backgroundFocus1, ...(vertical && isFromKeyboard && !primary ? { - border: v.focusedBorder, - outline: v.focusedOutline, + border: `solid 1px ${v.borderColorFocus}`, + outline: `solid 1px ${v.outlineColorFocus}`, margin: pxToRem(1), - background: v.focusedBackgroundColor, + background: v.verticalBackgroundColorFocus || colors.backgroundFocus1, } : {}), } } -const pointingBeak: ComponentSlotStyleFunction = ({ +const getHoverStyles = ({ props, variables: v, + colors, +}: { + props: MenuItemPropsAndState + variables: MenuVariables + colors: Extendable }): ICSSInJSStyle => { + const { underlined, active, vertical } = props + if (active && !underlined && !vertical) return {} + return { + ...(underlined + ? { + color: v.colorActive, + } + : { + color: colors.foregroundHover, + background: v.backgroundColorHover || colors.backgroundHover, + }), + } +} + +const pointingBeak = ({ props, variables: v, colors }): ICSSInJSStyle => { const { pointing, primary } = props - let backgroundColor: string - let borderColor: string let top: string let borders: ICSSInJSStyle - if (primary) { - backgroundColor = v.primaryActiveBackgroundColor - borderColor = v.primaryBorderColor - } else { - backgroundColor = v.activeBackgroundColor - borderColor = v.borderColor - } + const backgroundColor = v.backgroundColorActive || colors.backgroundActive1 + const borderColor = v.borderColor || primary ? v.primaryBorderColor : colors.border if (pointing === 'start') { borders = { @@ -130,7 +133,7 @@ const pointingBeak: ComponentSlotStyleFunction = { - wrapper: ({ props, variables: v, theme, colors }): ICSSInJSStyle => { + wrapper: ({ props, variables: v, theme }): ICSSInJSStyle => { const { active, disabled, @@ -138,14 +141,16 @@ const menuItemStyles: ComponentSlotStylesInput { const { iconOnly, fluid, pointing, pills, primary, underlined, vertical, submenu } = p + const colors = getColorScheme(v.colorScheme, null, primary) return { display: 'flex', minHeight: pxToRem(24), margin: 0, padding: 0, + color: v.color, + backgroundColor: v.backgroundColor || 'inherit', listStyleType: 'none', ...(iconOnly && { alignItems: 'center' }), ...(vertical && { @@ -38,14 +42,14 @@ export default { !iconOnly && !(pointing && vertical) && !underlined && { - border: `${v.borderWidth} solid ${v.borderColor}`, - ...(primary && { - border: `${v.borderWidth} solid ${v.primaryBorderColor}`, - }), + // primary has hardcoded grey border color + border: `${v.borderWidth} solid ${ + primary ? v.primaryBorderColor : v.borderColor || colors.border + }`, 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 e9e146ff7b..3343393fff 100644 --- a/packages/react/src/themes/teams/components/Menu/menuVariables.ts +++ b/packages/react/src/themes/teams/components/Menu/menuVariables.ts @@ -1,32 +1,29 @@ import { pxToRem } from '../../../../lib' +import { ColorSchemeMapping } from '../../../types' +import { extendColorScheme } from '../../../colorUtils' export interface MenuVariables { + colorScheme: ColorSchemeMapping color: string - borderColor: string - verticalBorderColor: string - - focusedBorder: string - focusedOutline: string - focusedBackgroundColor: string - - hoverBackgroundColor: string - activeColor: string - activeBackgroundColor: string - iconOnlyActiveColor: string + backgroundColor: string + backgroundColorFocus: string + backgroundColorHover: string + backgroundColorActive: string - primaryActiveColor: string - primaryActiveBackgroundColor: string - primaryActiveBorderColor: string + borderColor: string + borderColorHover: string + borderColorActive: string + borderColorFocus: string - primaryFocusedColor: string - primaryFocusedBackgroundColor: string + outlineColorFocus: string + colorActive: string + iconOnlyColorActive: string - primaryBorderColor: string - primaryHoverBorderColor: string - primaryUnderlinedBorderColor: string + colorFocus: string + underlinedBorderColor: string - disabledColor: string + colorDisabled: string lineHeightBase: string horizontalPadding: string @@ -34,11 +31,15 @@ export interface MenuVariables { verticalItemPadding: string verticalBoxShadow: string verticalDividerMargin: string - verticalItemBorder: string + verticalItemBorderWidth: string + verticalItemBorderColor: string + verticalPointingBorderColor: string + verticalBackgroundColorFocus: string pointingIndicatorBackgroundColor: string underlinedBottomBorderWidth: string + primaryBorderColor: string dividerHeight: string borderWidth: string @@ -46,32 +47,41 @@ export interface MenuVariables { export default (siteVars: any): MenuVariables => { return { - color: siteVars.gray02, - borderColor: siteVars.gray08, - verticalBorderColor: siteVars.gray08, - - focusedBorder: `solid ${pxToRem(1)} ${siteVars.colors.white}`, - focusedOutline: `solid ${pxToRem(1)} ${siteVars.colors.black}`, - focusedBackgroundColor: siteVars.gray09, - - hoverBackgroundColor: siteVars.gray14, - - activeColor: siteVars.colors.black, - activeBackgroundColor: siteVars.gray10, - iconOnlyActiveColor: siteVars.colors.primary[500], - - primaryActiveColor: siteVars.colors.white, - primaryActiveBackgroundColor: siteVars.brand08, - primaryActiveBorderColor: siteVars.colors.primary[500], - - primaryFocusedColor: siteVars.colors.white, - primaryFocusedBackgroundColor: siteVars.colors.primary[200], - - primaryBorderColor: siteVars.gray10, - primaryHoverBorderColor: siteVars.gray08, - primaryUnderlinedBorderColor: siteVars.gray08, + colorScheme: extendColorScheme(siteVars.colorScheme, { + default: { + borderActive: siteVars.colors.grey[600], + }, + brand: { + foregroundHover: siteVars.colors.white, + backgroundHover: siteVars.colors.brand[300], + foregroundActive: siteVars.colors.white, + borderActive: siteVars.colors.brand[600], + backgroundActive1: siteVars.colors.brand[500], // it's 600 in the color scheme + foregroundFocus: siteVars.colors.white, + backgroundFocus1: siteVars.colors.brand[300], + }, + }), + color: siteVars.colors.grey[500], + colorActive: siteVars.colors.black, + colorFocus: siteVars.colors.white, + colorDisabled: undefined, + + borderColor: undefined, + borderColorHover: undefined, + borderColorActive: undefined, + borderColorFocus: siteVars.colors.white, + + outlineColorFocus: siteVars.colors.black, + + backgroundColor: undefined, + backgroundColorFocus: undefined, + backgroundColorHover: undefined, + backgroundColorActive: undefined, + + iconOnlyColorActive: siteVars.colors.brand[600], + + underlinedBorderColor: siteVars.colors.grey[200], - disabledColor: siteVars.gray06, lineHeightBase: siteVars.lineHeightMedium, horizontalPadding: `${pxToRem(14)} ${pxToRem(18)} ${pxToRem(14)} ${pxToRem(18)}`, @@ -79,11 +89,15 @@ 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', + verticalPointingBorderColor: siteVars.colorScheme.brand.borderActive, + verticalBackgroundColorFocus: siteVars.colors.grey[150], - pointingIndicatorBackgroundColor: siteVars.colors.primary[500], + pointingIndicatorBackgroundColor: siteVars.colors.brand[600], underlinedBottomBorderWidth: pxToRem(2), + 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 6cb763ed40..d79b628b65 100644 --- a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts +++ b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts @@ -13,7 +13,7 @@ export interface PopupContentVariables { export default (siteVars: any): PopupContentVariables => { return { - borderColor: siteVars.gray06, + borderColor: siteVars.colors.grey[250], borderRadius: pxToRem(3), borderSize: '1px', 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 0164ad894b..987f8ee914 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts +++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts @@ -22,20 +22,20 @@ export type RadioGroupItemVariables = { } export default (siteVars: any): RadioGroupItemVariables => ({ - colorDisabled: siteVars.gray06, + 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], + textColorDefault: siteVars.colors.grey[500], + textColorDefaultHoverFocus: siteVars.colors.grey[750], + textColorChecked: siteVars.colors.grey[750], - iconBorderColorDefaultHover: siteVars.colors.grey[900], - iconBorderColorChecked: siteVars.colors.primary[500], + iconBorderColorDefaultHover: siteVars.colors.grey[750], + iconBorderColorChecked: siteVars.colors.brand[600], - iconBackgroundColorChecked: siteVars.colors.primary[500], + 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 fd018cc2a5..0b7d4c36c4 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.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[500], + outlineColorFocus: siteVars.colors.brand[600], outlineWidthFocus: pxToRem(2), outlineOffsetFocus: pxToRem(-2), meReacting: false, boxShadowColor: siteVars.colors.white, - borderColorFocus: siteVars.colors.grey[900], + borderColorFocus: siteVars.colors.grey[750], }) diff --git a/packages/react/src/themes/teams/components/Segment/segmentStyles.ts b/packages/react/src/themes/teams/components/Segment/segmentStyles.ts index 80230c8441..f3400bab1b 100644 --- a/packages/react/src/themes/teams/components/Segment/segmentStyles.ts +++ b/packages/react/src/themes/teams/components/Segment/segmentStyles.ts @@ -1,12 +1,11 @@ -import * as _ from 'lodash' - import { SegmentProps } from '../../../../components/Segment/Segment' import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types' import { SegmentVariables } from './segmentVariables' +import { getColorScheme } from '../../colors' const segmentStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => { - const segmentColor = _.get(v.colors, p.color) + const colors = getColorScheme(v.colorScheme, p.color) return { padding: v.padding, @@ -15,10 +14,10 @@ const segmentStyles: ComponentSlotStylesInput = boxShadow: `0 1px 1px 1px ${v.boxShadowColor}`, color: v.color, backgroundColor: v.backgroundColor, - ...(p.color && { borderColor: segmentColor }), + ...(p.color && { borderColor: colors.foreground }), ...(p.inverted && { color: v.backgroundColor, - backgroundColor: segmentColor || v.color, + backgroundColor: p.color ? colors.foreground : 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..4ff0806033 100644 --- a/packages/react/src/themes/teams/components/Segment/segmentVariables.ts +++ b/packages/react/src/themes/teams/components/Segment/segmentVariables.ts @@ -1,8 +1,7 @@ -import { ColorValues } from '../../../types' -import { mapColorsToScheme } from '../../../../lib' +import { ColorSchemeMapping } from '../../../../themes/types' export interface SegmentVariables { - colors: ColorValues + colorScheme: ColorSchemeMapping color: string backgroundColor: string padding: string @@ -11,10 +10,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', diff --git a/packages/react/src/themes/teams/components/Status/statusVariables.ts b/packages/react/src/themes/teams/components/Status/statusVariables.ts index df290a12eb..9abb603dfe 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: siteVariables.colors.brand[500], + 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/components/Text/textStyles.ts b/packages/react/src/themes/teams/components/Text/textStyles.ts index 1863f37728..6d1740a5d3 100644 --- a/packages/react/src/themes/teams/components/Text/textStyles.ts +++ b/packages/react/src/themes/teams/components/Text/textStyles.ts @@ -1,13 +1,18 @@ import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types' import { TeamsTextVariables } from './textVariables' import { TextProps } from '../../../../components/Text/Text' +import { getColorScheme } from '../../colors' export default { root: ({ props: { atMention, color, important, timestamp }, variables: v, }: ComponentStyleFunctionParam): ICSSInJSStyle => { + const colors = getColorScheme(v.colorScheme, color) return { + ...(color && { + 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 fbbd3199ae..9babdc36d0 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.gray06, - errorColor: siteVariables.colors.red[900], - importantWeight: siteVariables.fontWeightBold, - importantColor: siteVariables.colors.red[900], - successColor: siteVariables.colors.green[900], - timestampColor: siteVariables.gray04, - timestampHoverColor: siteVariables.gray02, -}) +export default (siteVariables): Partial => { + return { + colorScheme: siteVariables.colorScheme, + atMentionOtherColor: siteVariables.colors.brand[600], + atMentionMeColor: siteVariables.colors.orange[400], + atMentionMeFontWeight: siteVariables.fontWeightBold, + disabledColor: siteVariables.colors.grey[250], + errorColor: siteVariables.colors.red[400], + importantWeight: siteVariables.fontWeightBold, + importantColor: siteVariables.colors.red[400], + successColor: siteVariables.colors.green[600], + 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 5793a2d15f..1cbebde810 100644 --- a/packages/react/src/themes/teams/siteVariables.ts +++ b/packages/react/src/themes/teams/siteVariables.ts @@ -1,29 +1,10 @@ import { pxToRem } from '../../lib' -import { colors, naturalColors } from './colors' +import { colors } from './colors' // // COLORS // -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 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 - -export const red = colors.red[900] // 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 { colors, emphasisColors, naturalColors, primitiveColors, colorScheme } from './colors' // // SHADOW LEVELS @@ -46,20 +27,6 @@ export const fontSizes = { larger: pxToRem(24), } -// -// STATUS COLORS -// -export const successStatusBackgroundColor = naturalColors.lightGreen[900] -export const successStatusTextColor = colors.grey[50] -export const infoStatusBackgroundColor = 'blue' -export const infoStatusTextColor = colors.grey[50] -export const warningStatusBackgroundColor = colors.yellow[900] -export const warningStatusTextColor = colors.grey[50] -export const errorStatusBackgroundColor = colors.red[900] -export const errorStatusTextColor = colors.grey[50] -export const unknownStatusBackgroundColor = gray04 -export const unknownStatusTextColor = colors.grey[50] - // // FONT WEIGHTS // @@ -87,5 +54,5 @@ export const bodyFontFamily = '"Segoe UI", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", Helvetica, Arial, sans-serif' export const bodyFontSize = fontSizes.medium export const bodyBackground = colors.white -export const bodyColor = colors.grey[900] +export const bodyColor = colors.grey[750] export const bodyLineHeight = lineHeightMedium diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts index 605181dd61..ffc48a7c51 100644 --- a/packages/react/src/themes/types.ts +++ b/packages/react/src/themes/types.ts @@ -17,19 +17,21 @@ 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< + 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. */ @@ -53,6 +55,7 @@ export type NaturalColors = Extendable export type ContextualColorsStrict = Partial<{ text: ColorVariants + brand: ColorVariants danger: ColorVariants info: ColorVariants success: ColorVariants @@ -92,21 +95,50 @@ 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 > +/** + * A type for all area names that can define color + */ +export type ComponentAreaName = + | 'foreground' + | 'background' + | 'border' + | 'shadow' + | 'foregroundHover' + | 'backgroundHover' + | 'borderHover' + | 'shadowHover' + | 'foregroundActive' + | 'backgroundActive' + | 'borderActive' + | 'shadowActive' + | 'foregroundFocus' + | 'backgroundFocus' + | 'borderFocus' + | 'shadowFocus' + | 'foregroundPressed' + | 'backgroundPressed' + | 'borderPressed' + | 'shadowPressed' + | 'foregroundDisabled' + | 'backgroundDisabled' + | 'borderDisabled' + | 'shadowDisabled' + /** * A type for the generic color scheme of a component based on CSS property names */ -export type ColorScheme = { - foreground: string - background: string - border: string - shadow: string -} +export type ColorScheme = Extendable, string> -export type ColorSchemeMapping = ColorValues & { default?: ColorScheme } +export type ColorSchemeMapping = ColorValues> & { + default?: Extendable +} +export type ColorSchemeMappingOverrides = ColorValues>> & { + default?: Partial> +} // ======================================================== // Props @@ -127,13 +159,7 @@ export type State = ObjectOf // Variables // ======================================================== -export interface SiteVariablesInput extends ObjectOf { - colors?: ColorPalette - colorScheme?: ColorSchemeMapping - contextualColors?: ContextualColors - emphasisColors?: EmphasisColors - naturalColors?: NaturalColorsStrict -} +export interface SiteVariablesInput extends ObjectOf {} export interface SiteVariablesPrepared extends SiteVariablesInput { fontSizes: ObjectOf @@ -195,7 +221,6 @@ export interface ComponentStyleFunctionParam< props: State & TProps variables: TVars theme: ThemePrepared - colors: Partial } export type ComponentSlotStyleFunction = (( @@ -213,7 +238,6 @@ export interface ComponentSlotStylesPrepared extends ObjectOf> {} export interface ComponentSlotClasses extends ObjectOf {} -export interface ComponentSlotClasses extends ObjectOf {} export type AnimationProp = | { 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', + }, + }) + }) + }) +})