From 3b444e23f5f79319175f590d0b740ada9104a1c9 Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Fri, 19 Oct 2018 12:10:12 -0700 Subject: [PATCH 1/4] implementing contrast theme with necessary changes to buttonStyles --- .../components/Button/buttonVariables.ts | 10 ++ .../teams-high-contrast/componentVariables.ts | 5 +- .../components/Button/buttonVariables.ts | 119 ++++++++++++++++++ .../teams/components/Button/buttonStyles.ts | 44 ++++--- .../components/Button/buttonVariables.ts | 10 ++ 5 files changed, 172 insertions(+), 16 deletions(-) create mode 100644 src/themes/teams-high-contrast/components/Button/buttonVariables.ts diff --git a/src/themes/teams-dark/components/Button/buttonVariables.ts b/src/themes/teams-dark/components/Button/buttonVariables.ts index 492647c1a2..80b38b10d9 100644 --- a/src/themes/teams-dark/components/Button/buttonVariables.ts +++ b/src/themes/teams-dark/components/Button/buttonVariables.ts @@ -17,8 +17,12 @@ export interface IButtonVariables { borderColorFocus: string borderColorFocusIndicator: string borderColorDisabled: string + borderWidth: number primaryColor: string + primaryColorActive: string + primaryColorHover: string + primaryColorFocus: string primaryBackgroundColor: string primaryBackgroundColorActive: string primaryBackgroundColorHover: string @@ -28,6 +32,7 @@ export interface IButtonVariables { primaryBorderColorHover: string primaryBorderColorFocus: string primaryBorderColorFocusIndicator: string + primaryBorderWidth: number primaryCircularBorderColorFocusIndicator: string @@ -71,8 +76,12 @@ export default (siteVars: any): IButtonVariables => { borderColorFocus: siteVars.black, borderColorFocusIndicator: siteVars.white, borderColorDisabled: 'transparent', + borderWidth: 1, primaryColor: siteVars.white, + primaryColorActive: siteVars.white, + primaryColorHover: siteVars.white, + primaryColorFocus: siteVars.white, primaryBackgroundColor: siteVars.brand, primaryBackgroundColorActive: siteVars.brand08, primaryBackgroundColorHover: siteVars.brand08, @@ -82,6 +91,7 @@ export default (siteVars: any): IButtonVariables => { primaryBorderColorHover: 'transparent', primaryBorderColorFocus: siteVars.black, primaryBorderColorFocusIndicator: siteVars.white, + primaryBorderWidth: 1, primaryCircularBorderColorFocusIndicator: siteVars.white, diff --git a/src/themes/teams-high-contrast/componentVariables.ts b/src/themes/teams-high-contrast/componentVariables.ts index f975eed9e2..8e388747b4 100644 --- a/src/themes/teams-high-contrast/componentVariables.ts +++ b/src/themes/teams-high-contrast/componentVariables.ts @@ -1,2 +1,5 @@ -export { default as Text } from './components/Text/textVariables' +export { default as Button } from './components/Button/buttonVariables' + export { default as Divider } from './components/Divider/dividerVariables' + +export { default as Text } from './components/Text/textVariables' diff --git a/src/themes/teams-high-contrast/components/Button/buttonVariables.ts b/src/themes/teams-high-contrast/components/Button/buttonVariables.ts new file mode 100644 index 0000000000..7ef0bb8d92 --- /dev/null +++ b/src/themes/teams-high-contrast/components/Button/buttonVariables.ts @@ -0,0 +1,119 @@ +export interface IButtonVariables { + [key: string]: string | number + + color: string + colorActive: string + colorHover: string + colorFocus: string + colorDisabled: string + backgroundColor: string + backgroundColorActive: string + backgroundColorHover: string + backgroundColorFocus: string + backgroundColorDisabled: string + borderColor: string + borderColorActive: string + borderColorHover: string + borderColorFocus: string + borderColorFocusIndicator: string + borderColorDisabled: string + borderWidth: number + + primaryColor: string + primaryColorActive: string + primaryColorHover: string + primaryColorFocus: string + primaryBackgroundColor: string + primaryBackgroundColorActive: string + primaryBackgroundColorHover: string + primaryBackgroundColorFocus: string + primaryBorderColor: string + primaryBorderColorActive: string + primaryBorderColorHover: string + primaryBorderColorFocus: string + primaryBorderColorFocusIndicator: string + primaryBorderWidth: number + + primaryCircularBorderColorFocusIndicator: string + + circularColor: string + circularColorActive: string + circularBackgroundColor: string + circularBackgroundColorActive: string + circularBackgroundColorHover: string + circularBackgroundColorFocus: string + circularBorderColor: string + circularBorderColorActive: string + circularBorderColorHover: string + circularBorderColorFocus: string + circularBorderColorFocusIndicator: string + + textColor: string + textColorHover: string + textPrimaryColor: string + textPrimaryColorHover: string + textSecondaryColor: string + textSecondaryColorHover: string + + boxShadow: string +} + +export default (siteVars: any): IButtonVariables => { + return { + color: siteVars.white, + colorActive: siteVars.black, + colorHover: siteVars.black, + colorFocus: siteVars.black, + colorDisabled: siteVars.black, + backgroundColor: 'transparent', + backgroundColorActive: siteVars.accessibleYellow, + backgroundColorHover: siteVars.accessibleYellow, + backgroundColorFocus: siteVars.accessibleYellow, + backgroundColorDisabled: siteVars.accessibleGreen, + borderColor: siteVars.white, + borderColorActive: 'transparent', + borderColorHover: 'transparent', + borderColorFocus: siteVars.black, + borderColorFocusIndicator: siteVars.white, + borderColorDisabled: 'transparent', + borderWidth: 1, + + primaryColor: siteVars.white, + primaryColorActive: siteVars.black, + primaryColorHover: siteVars.black, + primaryColorFocus: siteVars.black, + primaryBackgroundColor: siteVars.black, + primaryBackgroundColorActive: siteVars.accessibleYellow, + primaryBackgroundColorHover: siteVars.accessibleYellow, + primaryBackgroundColorFocus: siteVars.accessibleYellow, + primaryBorderColor: siteVars.white, + primaryBorderColorActive: 'transparent', + primaryBorderColorHover: 'transparent', + primaryBorderColorFocus: siteVars.black, + primaryBorderColorFocusIndicator: siteVars.white, + primaryBorderWidth: 2, + + primaryCircularBorderColorFocusIndicator: siteVars.white, + + circularColor: siteVars.white, + circularColorActive: siteVars.black, + circularBackgroundColor: siteVars.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, + + textColor: siteVars.brand, + textColorHover: siteVars.brand04, + textPrimaryColor: siteVars.brand, + textPrimaryColorHover: siteVars.brand04, + textSecondaryColor: siteVars.gray03, + textSecondaryColorHover: siteVars.brand04, + + boxShadow: siteVars.shadowLevel1, + } +} diff --git a/src/themes/teams/components/Button/buttonStyles.ts b/src/themes/teams/components/Button/buttonStyles.ts index ac4af309de..34f47d5e7c 100644 --- a/src/themes/teams/components/Button/buttonStyles.ts +++ b/src/themes/teams/components/Button/buttonStyles.ts @@ -32,8 +32,12 @@ const buttonStyles: IComponentPartStylesInput borderColorFocus, borderColorFocusIndicator, borderColorDisabled, + borderWidth, primaryColor, + primaryColorActive, + primaryColorHover, + primaryColorFocus, primaryBackgroundColor, primaryBackgroundColorActive, primaryBackgroundColorHover, @@ -43,6 +47,7 @@ const buttonStyles: IComponentPartStylesInput primaryBorderColorHover, primaryBorderColorFocus, primaryBorderColorFocusIndicator, + primaryBorderWidth, primaryCircularBorderColorFocusIndicator, @@ -84,7 +89,7 @@ const buttonStyles: IComponentPartStylesInput ...(!text && { outline: 0, borderRadius: '2px', - borderWidth: '1px', + borderWidth: `${pxToRem(borderWidth)}`, borderStyle: 'solid', borderColor, boxShadow, @@ -101,11 +106,11 @@ const buttonStyles: IComponentPartStylesInput ':after': { content: '""', position: 'absolute', - top: '-2px', - right: '-2px', - bottom: '-2px', - left: '-2px', - border: `${pxToRem(1)} solid ${borderColorFocusIndicator}`, + top: `-${pxToRem(borderWidth * 2)}`, + right: `-${pxToRem(borderWidth * 2)}`, + bottom: `-${pxToRem(borderWidth * 2)}`, + left: `-${pxToRem(borderWidth * 2)}`, + border: `${pxToRem(borderWidth)} solid ${borderColorFocusIndicator}`, borderRadius: '3px', }, }, @@ -144,7 +149,7 @@ const buttonStyles: IComponentPartStylesInput right: '0', bottom: '0', left: '0', - border: `${pxToRem(1)} solid ${circularBorderColorFocusIndicator}`, + border: `${pxToRem(borderWidth)} solid ${circularBorderColorFocusIndicator}`, borderRadius: circularRadius, }, }, @@ -162,11 +167,13 @@ const buttonStyles: IComponentPartStylesInput }), ...(primary && - !text && { + !text && + !disabled && { color: primaryColor, backgroundColor: primaryBackgroundColor, - borderColor: primaryBorderColor, + border: `${pxToRem(primaryBorderWidth)} solid ${primaryBorderColor}`, ':hover': { + color: primaryColorHover, backgroundColor: primaryBackgroundColorHover, borderColor: primaryBorderColorHover, }, @@ -174,16 +181,19 @@ const buttonStyles: IComponentPartStylesInput ...(isFromKeyboard && !circular && { ':focus': { + color: primaryColorFocus, backgroundColor: primaryBackgroundColorFocus, borderColor: primaryBorderColorFocus, ':after': { content: '""', position: 'absolute', - top: '-2px', - right: '-2px', - bottom: '-2px', - left: '-2px', - border: `${pxToRem(1)} solid ${primaryBorderColorFocusIndicator}`, + top: `-${pxToRem(primaryBorderWidth * 2)}`, + right: `-${pxToRem(primaryBorderWidth * 2)}`, + bottom: `-${pxToRem(primaryBorderWidth * 2)}`, + left: `-${pxToRem(primaryBorderWidth * 2)}`, + border: `${pxToRem( + primaryBorderWidth, + )} solid ${primaryBorderColorFocusIndicator}`, borderRadius: '3px', }, }, @@ -191,6 +201,7 @@ const buttonStyles: IComponentPartStylesInput ...(isFromKeyboard && circular && { ':focus': { + color: primaryColorFocus, backgroundColor: primaryBackgroundColorFocus, borderColor: primaryBackgroundColorFocus, ':after': { @@ -200,7 +211,9 @@ const buttonStyles: IComponentPartStylesInput right: '0', bottom: '0', left: '0', - border: `${pxToRem(1)} solid ${primaryCircularBorderColorFocusIndicator}`, + border: `${pxToRem( + primaryBorderWidth, + )} solid ${primaryCircularBorderColorFocusIndicator}`, borderRadius: circularRadius, }, }, @@ -208,6 +221,7 @@ const buttonStyles: IComponentPartStylesInput ...(!isFromKeyboard && { ':focus': { ':active': { + color: primaryColorActive, backgroundColor: primaryBackgroundColorActive, borderColor: primaryBorderColorActive, boxShadow: 'none', diff --git a/src/themes/teams/components/Button/buttonVariables.ts b/src/themes/teams/components/Button/buttonVariables.ts index 77d589e138..d6aabdec16 100644 --- a/src/themes/teams/components/Button/buttonVariables.ts +++ b/src/themes/teams/components/Button/buttonVariables.ts @@ -26,8 +26,12 @@ export interface IButtonVariables { borderColorFocus: string borderColorFocusIndicator: string borderColorDisabled: string + borderWidth: number primaryColor: string + primaryColorActive: string + primaryColorHover: string + primaryColorFocus: string primaryBackgroundColor: string primaryBackgroundColorActive: string primaryBackgroundColorHover: string @@ -37,6 +41,7 @@ export interface IButtonVariables { primaryBorderColorHover: string primaryBorderColorFocus: string primaryBorderColorFocusIndicator: string + primaryBorderWidth: number primaryCircularBorderColorFocusIndicator: string @@ -88,8 +93,12 @@ export default (siteVars: any): IButtonVariables => { borderColorFocus: siteVars.white, borderColorFocusIndicator: siteVars.black, borderColorDisabled: 'transparent', + borderWidth: 1, primaryColor: siteVars.white, + primaryColorActive: siteVars.white, + primaryColorHover: siteVars.white, + primaryColorFocus: siteVars.white, primaryBackgroundColor: siteVars.brand, primaryBackgroundColorActive: siteVars.brand02, primaryBackgroundColorHover: siteVars.brand04, @@ -100,6 +109,7 @@ export default (siteVars: any): IButtonVariables => { primaryBorderColorHover: 'transparent', primaryBorderColorFocus: siteVars.white, primaryBorderColorFocusIndicator: siteVars.black, + primaryBorderWidth: 1, primaryCircularBorderColorFocusIndicator: siteVars.white, From e6b8c4f6455ca89ee720c665f3673c2d1fb052d8 Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Thu, 25 Oct 2018 14:49:55 -0700 Subject: [PATCH 2/4] removing border shorthand --- .../teams/components/Button/buttonStyles.ts | 24 ++++++++++++------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/src/themes/teams/components/Button/buttonStyles.ts b/src/themes/teams/components/Button/buttonStyles.ts index 1b7b6045d2..4cacde2abb 100644 --- a/src/themes/teams/components/Button/buttonStyles.ts +++ b/src/themes/teams/components/Button/buttonStyles.ts @@ -110,7 +110,9 @@ const buttonStyles: ComponentSlotStylesInput = { right: `-${pxToRem(borderWidth * 2)}`, bottom: `-${pxToRem(borderWidth * 2)}`, left: `-${pxToRem(borderWidth * 2)}`, - border: `${pxToRem(borderWidth)} solid ${borderColorFocusIndicator}`, + borderWidth: `${pxToRem(borderWidth)}`, + borderStyle: 'solid', + borderColor: `${borderColorFocusIndicator}`, borderRadius: '3px', }, }, @@ -149,7 +151,9 @@ const buttonStyles: ComponentSlotStylesInput = { right: '0', bottom: '0', left: '0', - border: `${pxToRem(borderWidth)} solid ${circularBorderColorFocusIndicator}`, + borderWidth: `${pxToRem(borderWidth)}`, + borderStyle: 'solid', + borderColor: `${circularBorderColorFocusIndicator}`, borderRadius: circularRadius, }, }, @@ -171,7 +175,9 @@ const buttonStyles: ComponentSlotStylesInput = { !disabled && { color: primaryColor, backgroundColor: primaryBackgroundColor, - border: `${pxToRem(primaryBorderWidth)} solid ${primaryBorderColor}`, + borderWidth: `${pxToRem(primaryBorderWidth)}`, + borderStyle: 'solid', + borderColor: `${primaryBorderColor}`, ':hover': { color: primaryColorHover, backgroundColor: primaryBackgroundColorHover, @@ -191,9 +197,9 @@ const buttonStyles: ComponentSlotStylesInput = { right: `-${pxToRem(primaryBorderWidth * 2)}`, bottom: `-${pxToRem(primaryBorderWidth * 2)}`, left: `-${pxToRem(primaryBorderWidth * 2)}`, - border: `${pxToRem( - primaryBorderWidth, - )} solid ${primaryBorderColorFocusIndicator}`, + borderWidth: `${pxToRem(primaryBorderWidth)}`, + borderStyle: 'solid', + borderColor: `${primaryBorderColorFocusIndicator}`, borderRadius: '3px', }, }, @@ -211,9 +217,9 @@ const buttonStyles: ComponentSlotStylesInput = { right: '0', bottom: '0', left: '0', - border: `${pxToRem( - primaryBorderWidth, - )} solid ${primaryCircularBorderColorFocusIndicator}`, + borderWidth: `${pxToRem(primaryBorderWidth)}`, + borderStyle: 'solid', + borderColor: `${primaryCircularBorderColorFocusIndicator}`, borderRadius: circularRadius, }, }, From 6bf82010768e7ea83f8763f063d6482dbbf336bc Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Wed, 31 Oct 2018 14:58:17 -0700 Subject: [PATCH 3/4] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e94ad98cf2..d3d6a02c1b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -33,6 +33,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix icon colors for Teams theme @codepretty ([#384](https://github.com/stardust-ui/react/pull/384)) - Do not render the Attachment's `progress` value to the DOM @levithomason ([#402](https://github.com/stardust-ui/react/pull/402)) - Add dark theme and contrast theme for Avatar and Status Indicator @bcalvery ([#373](https://github.com/stardust-ui/react/pull/373)) +- Add contrast theme and update dark theme for Button @bcalvery ([#381](https://github.com/stardust-ui/react/pull/381)) - Add Segment background color @levithomason ([#408](https://github.com/stardust-ui/react/pull/408)) - Make `eventStack` subscription logic to be always async @kuzhelov ([#391](https://github.com/stardust-ui/react/pull/391)) - Fix for dotted focus outline in Firefox for `Button` component in docs @Bugaa92 ([#390](https://github.com/stardust-ui/react/pull/390)) From 490df3b8b4c07c7597df7ebada360869c700aa17 Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Wed, 31 Oct 2018 16:00:23 -0700 Subject: [PATCH 4/4] Refactoring buttonStyles to be a little more organized. Refactoring buttonVariables to use Partial utility. --- .../components/Button/buttonVariables.ts | 36 -------- .../components/Button/buttonVariables.ts | 86 +++---------------- .../teams/components/Button/buttonStyles.ts | 60 +++++++------ .../components/Button/buttonVariables.ts | 1 - 4 files changed, 40 insertions(+), 143 deletions(-) diff --git a/src/themes/teams-dark/components/Button/buttonVariables.ts b/src/themes/teams-dark/components/Button/buttonVariables.ts index c357e4c5a3..b9c535e054 100644 --- a/src/themes/teams-dark/components/Button/buttonVariables.ts +++ b/src/themes/teams-dark/components/Button/buttonVariables.ts @@ -7,56 +7,20 @@ export default (siteVars: any): Partial => { colorActive: siteVars.white, colorHover: siteVars.white, colorFocus: siteVars.white, - colorDisabled: siteVars.gray06, backgroundColor: 'transparent', - backgroundColorActive: siteVars.gray08, - backgroundColorHover: siteVars.gray14, - backgroundColorFocus: siteVars.gray08, - backgroundColorDisabled: siteVars.gray09, - borderColor: siteVars.gray08, - borderColorActive: siteVars.gray06, - borderColorHover: siteVars.gray06, borderColorFocus: siteVars.black, borderColorFocusIndicator: siteVars.white, - borderColorDisabled: 'transparent', - borderWidth: 1, - primaryColor: siteVars.white, - primaryColorActive: siteVars.white, - primaryColorHover: siteVars.white, - primaryColorFocus: siteVars.white, - primaryBackgroundColor: siteVars.brand, primaryBackgroundColorActive: siteVars.brand08, primaryBackgroundColorHover: siteVars.brand08, primaryBackgroundColorFocus: siteVars.brand14, - primaryBorderColor: 'transparent', - primaryBorderColorActive: 'transparent', - primaryBorderColorHover: 'transparent', primaryBorderColorFocus: siteVars.black, primaryBorderColorFocusIndicator: siteVars.white, - primaryBorderWidth: 1, - primaryCircularBorderColorFocusIndicator: siteVars.white, - - circularColor: siteVars.gray02, circularColorActive: siteVars.black, - circularBackgroundColor: 'transparent', circularBackgroundColorActive: siteVars.gray02, circularBackgroundColorHover: siteVars.gray03, circularBackgroundColorFocus: siteVars.gray02, - circularBorderColor: siteVars.gray02, - circularBorderColorActive: 'transparent', - circularBorderColorHover: 'transparent', - circularBorderColorFocus: 'transparent', circularBorderColorFocusIndicator: siteVars.black, - - textColor: siteVars.brand, - textColorHover: siteVars.brand04, - textPrimaryColor: siteVars.brand, - textPrimaryColorHover: siteVars.brand04, - textSecondaryColor: siteVars.gray03, - textSecondaryColorHover: siteVars.brand04, - - boxShadow: siteVars.shadowLevel1, } } diff --git a/src/themes/teams-high-contrast/components/Button/buttonVariables.ts b/src/themes/teams-high-contrast/components/Button/buttonVariables.ts index 7ef0bb8d92..684c4faa3f 100644 --- a/src/themes/teams-high-contrast/components/Button/buttonVariables.ts +++ b/src/themes/teams-high-contrast/components/Button/buttonVariables.ts @@ -1,69 +1,9 @@ -export interface IButtonVariables { - [key: string]: string | number +import { ButtonVariables } from '../../../teams/components/Button/buttonVariables' +import { Partial } from 'types/utils' - color: string - colorActive: string - colorHover: string - colorFocus: string - colorDisabled: string - backgroundColor: string - backgroundColorActive: string - backgroundColorHover: string - backgroundColorFocus: string - backgroundColorDisabled: string - borderColor: string - borderColorActive: string - borderColorHover: string - borderColorFocus: string - borderColorFocusIndicator: string - borderColorDisabled: string - borderWidth: number - - primaryColor: string - primaryColorActive: string - primaryColorHover: string - primaryColorFocus: string - primaryBackgroundColor: string - primaryBackgroundColorActive: string - primaryBackgroundColorHover: string - primaryBackgroundColorFocus: string - primaryBorderColor: string - primaryBorderColorActive: string - primaryBorderColorHover: string - primaryBorderColorFocus: string - primaryBorderColorFocusIndicator: string - primaryBorderWidth: number - - primaryCircularBorderColorFocusIndicator: string - - circularColor: string - circularColorActive: string - circularBackgroundColor: string - circularBackgroundColorActive: string - circularBackgroundColorHover: string - circularBackgroundColorFocus: string - circularBorderColor: string - circularBorderColorActive: string - circularBorderColorHover: string - circularBorderColorFocus: string - circularBorderColorFocusIndicator: string - - textColor: string - textColorHover: string - textPrimaryColor: string - textPrimaryColorHover: string - textSecondaryColor: string - textSecondaryColorHover: string - - boxShadow: string -} - -export default (siteVars: any): IButtonVariables => { +export default (siteVars: any): Partial => { return { color: siteVars.white, - colorActive: siteVars.black, - colorHover: siteVars.black, - colorFocus: siteVars.black, colorDisabled: siteVars.black, backgroundColor: 'transparent', backgroundColorActive: siteVars.accessibleYellow, @@ -75,8 +15,6 @@ export default (siteVars: any): IButtonVariables => { borderColorHover: 'transparent', borderColorFocus: siteVars.black, borderColorFocusIndicator: siteVars.white, - borderColorDisabled: 'transparent', - borderWidth: 1, primaryColor: siteVars.white, primaryColorActive: siteVars.black, @@ -87,13 +25,11 @@ export default (siteVars: any): IButtonVariables => { primaryBackgroundColorHover: siteVars.accessibleYellow, primaryBackgroundColorFocus: siteVars.accessibleYellow, primaryBorderColor: siteVars.white, - primaryBorderColorActive: 'transparent', - primaryBorderColorHover: 'transparent', primaryBorderColorFocus: siteVars.black, primaryBorderColorFocusIndicator: siteVars.white, primaryBorderWidth: 2, - primaryCircularBorderColorFocusIndicator: siteVars.white, + primaryCircularBorderColorFocusIndicator: siteVars.black, circularColor: siteVars.white, circularColorActive: siteVars.black, @@ -107,13 +43,13 @@ export default (siteVars: any): IButtonVariables => { circularBorderColorFocus: siteVars.white, circularBorderColorFocusIndicator: siteVars.black, - textColor: siteVars.brand, - textColorHover: siteVars.brand04, - textPrimaryColor: siteVars.brand, - textPrimaryColorHover: siteVars.brand04, - textSecondaryColor: siteVars.gray03, - textSecondaryColorHover: siteVars.brand04, + textColor: siteVars.accessibleYellow, + textColorHover: siteVars.accessibleYellow, + textPrimaryColor: siteVars.accessibleYellow, + textPrimaryColorHover: siteVars.accessibleYellow, + textSecondaryColor: siteVars.accessibleYellow, + textSecondaryColorHover: siteVars.accessibleYellow, - boxShadow: siteVars.shadowLevel1, + boxShadow: 'none', } } diff --git a/src/themes/teams/components/Button/buttonStyles.ts b/src/themes/teams/components/Button/buttonStyles.ts index 4cacde2abb..2056658da8 100644 --- a/src/themes/teams/components/Button/buttonStyles.ts +++ b/src/themes/teams/components/Button/buttonStyles.ts @@ -86,6 +86,7 @@ const buttonStyles: ComponentSlotStylesInput = { verticalAlign: 'middle', cursor: 'pointer', + // rectangular button defaults ...(!text && { outline: 0, borderRadius: '2px', @@ -129,11 +130,15 @@ const buttonStyles: ComponentSlotStylesInput = { }), }), + // circular button defaults ...(circular && !text && { + minWidth: height, + padding: 0, color: circularColor, backgroundColor: circularBackgroundColor, borderColor: circularBorderColor, + borderRadius: circularRadius, ':hover': { color: circularColorActive, backgroundColor: circularBackgroundColorHover, @@ -170,9 +175,25 @@ const buttonStyles: ComponentSlotStylesInput = { }), }), + // text button defaults + ...(text && { + color: textColor, + backgroundColor: 'transparent', + borderColor: 'transparent', + ':hover': { + color: textColorHover, + }, + ...(primary && { + color: textPrimaryColor, + ':hover': { + color: textPrimaryColorHover, + }, + }), + }), + + // Overrides for "primary" buttons ...(primary && - !text && - !disabled && { + !text && { color: primaryColor, backgroundColor: primaryBackgroundColor, borderWidth: `${pxToRem(primaryBorderWidth)}`, @@ -183,7 +204,6 @@ const buttonStyles: ComponentSlotStylesInput = { backgroundColor: primaryBackgroundColorHover, borderColor: primaryBorderColorHover, }, - ...(isFromKeyboard && !circular && { ':focus': { @@ -236,34 +256,7 @@ const buttonStyles: ComponentSlotStylesInput = { }), }), - ...(text && { - color: textColor, - backgroundColor: 'transparent', - borderColor: 'transparent', - ':hover': { - color: textColorHover, - }, - }), - - ...(primary && - text && { - color: textPrimaryColor, - ':hover': { - color: textPrimaryColorHover, - }, - }), - - ...(circular && { - minWidth: height, - padding: 0, - borderRadius: circularRadius, - }), - - ...(fluid && { - width: '100%', - maxWidth: '100%', - }), - + // Overrides for "disabled" buttons ...(disabled && { cursor: 'default', color: colorDisabled, @@ -276,6 +269,11 @@ const buttonStyles: ComponentSlotStylesInput = { }, }), + ...(fluid && { + width: '100%', + maxWidth: '100%', + }), + ...(iconOnly && { minWidth: height, padding: 0, diff --git a/src/themes/teams/components/Button/buttonVariables.ts b/src/themes/teams/components/Button/buttonVariables.ts index bdfd7e41ea..27edcc41c6 100644 --- a/src/themes/teams/components/Button/buttonVariables.ts +++ b/src/themes/teams/components/Button/buttonVariables.ts @@ -103,7 +103,6 @@ export default (siteVars: any): ButtonVariables => { primaryBackgroundColorActive: siteVars.brand02, primaryBackgroundColorHover: siteVars.brand04, primaryBackgroundColorFocus: siteVars.brand04, - primaryBackgroundColorDisabled: siteVars.brand04, primaryBorderColor: 'transparent', primaryBorderColorActive: 'transparent', primaryBorderColorHover: 'transparent',