diff --git a/CHANGELOG.md b/CHANGELOG.md index 0ea578b1e8..ada4c7c919 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -36,6 +36,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)) diff --git a/src/themes/teams-dark/components/Button/buttonVariables.ts b/src/themes/teams-dark/components/Button/buttonVariables.ts index 1c7dd1e97b..b9c535e054 100644 --- a/src/themes/teams-dark/components/Button/buttonVariables.ts +++ b/src/themes/teams-dark/components/Button/buttonVariables.ts @@ -7,51 +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', - primaryColor: 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, - 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/componentVariables.ts b/src/themes/teams-high-contrast/componentVariables.ts index 50aa18654c..7b4fc7d0dd 100644 --- a/src/themes/teams-high-contrast/componentVariables.ts +++ b/src/themes/teams-high-contrast/componentVariables.ts @@ -1,3 +1,7 @@ export { default as Avatar } from './components/Avatar/avatarVariables' + +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..684c4faa3f --- /dev/null +++ b/src/themes/teams-high-contrast/components/Button/buttonVariables.ts @@ -0,0 +1,55 @@ +import { ButtonVariables } from '../../../teams/components/Button/buttonVariables' +import { Partial } from 'types/utils' + +export default (siteVars: any): Partial => { + return { + color: siteVars.white, + 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, + + 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, + primaryBorderColorFocus: siteVars.black, + primaryBorderColorFocusIndicator: siteVars.white, + primaryBorderWidth: 2, + + primaryCircularBorderColorFocusIndicator: siteVars.black, + + 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.accessibleYellow, + textColorHover: siteVars.accessibleYellow, + textPrimaryColor: siteVars.accessibleYellow, + textPrimaryColorHover: siteVars.accessibleYellow, + textSecondaryColor: siteVars.accessibleYellow, + textSecondaryColorHover: siteVars.accessibleYellow, + + boxShadow: 'none', + } +} diff --git a/src/themes/teams/components/Button/buttonStyles.ts b/src/themes/teams/components/Button/buttonStyles.ts index ab2b023196..eec81e2301 100644 --- a/src/themes/teams/components/Button/buttonStyles.ts +++ b/src/themes/teams/components/Button/buttonStyles.ts @@ -31,8 +31,12 @@ const buttonStyles: ComponentSlotStylesInput = { borderColorFocus, borderColorFocusIndicator, borderColorDisabled, + borderWidth, primaryColor, + primaryColorActive, + primaryColorHover, + primaryColorFocus, primaryBackgroundColor, primaryBackgroundColorActive, primaryBackgroundColorHover, @@ -42,6 +46,7 @@ const buttonStyles: ComponentSlotStylesInput = { primaryBorderColorHover, primaryBorderColorFocus, primaryBorderColorFocusIndicator, + primaryBorderWidth, primaryCircularBorderColorFocusIndicator, @@ -80,10 +85,11 @@ const buttonStyles: ComponentSlotStylesInput = { verticalAlign: 'middle', cursor: 'pointer', + // rectangular button defaults ...(!text && { outline: 0, borderRadius: '2px', - borderWidth: '1px', + borderWidth: `${pxToRem(borderWidth)}`, borderStyle: 'solid', borderColor, boxShadow, @@ -100,11 +106,13 @@ const buttonStyles: ComponentSlotStylesInput = { ':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)}`, + borderWidth: `${pxToRem(borderWidth)}`, + borderStyle: 'solid', + borderColor: `${borderColorFocusIndicator}`, borderRadius: '3px', }, }, @@ -121,11 +129,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, @@ -143,7 +155,9 @@ const buttonStyles: ComponentSlotStylesInput = { right: '0', bottom: '0', left: '0', - border: `${pxToRem(1)} solid ${circularBorderColorFocusIndicator}`, + borderWidth: `${pxToRem(borderWidth)}`, + borderStyle: 'solid', + borderColor: `${circularBorderColorFocusIndicator}`, borderRadius: circularRadius, }, }, @@ -160,29 +174,51 @@ 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 && { color: primaryColor, backgroundColor: primaryBackgroundColor, - borderColor: primaryBorderColor, + borderWidth: `${pxToRem(primaryBorderWidth)}`, + borderStyle: 'solid', + borderColor: `${primaryBorderColor}`, ':hover': { + color: primaryColorHover, backgroundColor: primaryBackgroundColorHover, borderColor: primaryBorderColorHover, }, - ...(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)}`, + borderWidth: `${pxToRem(primaryBorderWidth)}`, + borderStyle: 'solid', + borderColor: `${primaryBorderColorFocusIndicator}`, borderRadius: '3px', }, }, @@ -190,6 +226,7 @@ const buttonStyles: ComponentSlotStylesInput = { ...(isFromKeyboard && circular && { ':focus': { + color: primaryColorFocus, backgroundColor: primaryBackgroundColorFocus, borderColor: primaryBackgroundColorFocus, ':after': { @@ -199,7 +236,9 @@ const buttonStyles: ComponentSlotStylesInput = { right: '0', bottom: '0', left: '0', - border: `${pxToRem(1)} solid ${primaryCircularBorderColorFocusIndicator}`, + borderWidth: `${pxToRem(primaryBorderWidth)}`, + borderStyle: 'solid', + borderColor: `${primaryCircularBorderColorFocusIndicator}`, borderRadius: circularRadius, }, }, @@ -207,6 +246,7 @@ const buttonStyles: ComponentSlotStylesInput = { ...(!isFromKeyboard && { ':focus': { ':active': { + color: primaryColorActive, backgroundColor: primaryBackgroundColorActive, borderColor: primaryBorderColorActive, boxShadow: 'none', @@ -215,34 +255,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, @@ -255,6 +268,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 a4e36da223..27edcc41c6 100644 --- a/src/themes/teams/components/Button/buttonVariables.ts +++ b/src/themes/teams/components/Button/buttonVariables.ts @@ -26,8 +26,12 @@ export interface ButtonVariables { 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 ButtonVariables { primaryBorderColorHover: string primaryBorderColorFocus: string primaryBorderColorFocusIndicator: string + primaryBorderWidth: number primaryCircularBorderColorFocusIndicator: string @@ -88,18 +93,22 @@ export default (siteVars: any): ButtonVariables => { 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, primaryBackgroundColorFocus: siteVars.brand04, - primaryBackgroundColorDisabled: siteVars.brand04, primaryBorderColor: 'transparent', primaryBorderColorActive: 'transparent', primaryBorderColorHover: 'transparent', primaryBorderColorFocus: siteVars.white, primaryBorderColorFocusIndicator: siteVars.black, + primaryBorderWidth: 1, primaryCircularBorderColorFocusIndicator: siteVars.white,