fix(Button): Implementing Contrast Theme and Updating Dark Theme

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))

src/themes/teams-dark/components/Button/buttonVariables.ts

@@ -7,51 +7,20 @@ export default (siteVars: any): Partial<ButtonVariables> => {
     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,
   }
 }

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'

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<ButtonVariables> => {
+  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',
+  }
+}

src/themes/teams/components/Button/buttonStyles.ts

@@ -31,8 +31,12 @@ const buttonStyles: ComponentSlotStylesInput<ButtonProps & ButtonState, any> = {
       borderColorFocus,
       borderColorFocusIndicator,
       borderColorDisabled,
+      borderWidth,
 
       primaryColor,
+      primaryColorActive,
+      primaryColorHover,
+      primaryColorFocus,
       primaryBackgroundColor,
       primaryBackgroundColorActive,
       primaryBackgroundColorHover,
@@ -42,6 +46,7 @@ const buttonStyles: ComponentSlotStylesInput<ButtonProps & ButtonState, any> = {
       primaryBorderColorHover,
       primaryBorderColorFocus,
       primaryBorderColorFocusIndicator,
+      primaryBorderWidth,
 
       primaryCircularBorderColorFocusIndicator,
 
@@ -80,10 +85,11 @@ const buttonStyles: ComponentSlotStylesInput<ButtonProps & ButtonState, any> = {
       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<ButtonProps & ButtonState, any> = {
             ':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<ButtonProps & ButtonState, any> = {
         }),
       }),
 
+      // 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<ButtonProps & ButtonState, any> = {
                 right: '0',
                 bottom: '0',
                 left: '0',
-                border: `${pxToRem(1)} solid ${circularBorderColorFocusIndicator}`,
+                borderWidth: `${pxToRem(borderWidth)}`,
+                borderStyle: 'solid',
+                borderColor: `${circularBorderColorFocusIndicator}`,
                 borderRadius: circularRadius,
               },
             },
@@ -160,36 +174,59 @@ const buttonStyles: ComponentSlotStylesInput<ButtonProps & ButtonState, any> = {
           }),
         }),
 
+      // 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',
                 },
               },
             }),
           ...(isFromKeyboard &&
             circular && {
               ':focus': {
+                color: primaryColorFocus,
                 backgroundColor: primaryBackgroundColorFocus,
                 borderColor: primaryBackgroundColorFocus,
                 ':after': {
@@ -199,14 +236,17 @@ const buttonStyles: ComponentSlotStylesInput<ButtonProps & ButtonState, any> = {
                   right: '0',
                   bottom: '0',
                   left: '0',
-                  border: `${pxToRem(1)} solid ${primaryCircularBorderColorFocusIndicator}`,
+                  borderWidth: `${pxToRem(primaryBorderWidth)}`,
+                  borderStyle: 'solid',
+                  borderColor: `${primaryCircularBorderColorFocusIndicator}`,
                   borderRadius: circularRadius,
                 },
               },
             }),
           ...(!isFromKeyboard && {
             ':focus': {
               ':active': {
+                color: primaryColorActive,
                 backgroundColor: primaryBackgroundColorActive,
                 borderColor: primaryBorderColorActive,
                 boxShadow: 'none',
@@ -215,34 +255,7 @@ const buttonStyles: ComponentSlotStylesInput<ButtonProps & ButtonState, any> = {
           }),
         }),
 
-      ...(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<ButtonProps & ButtonState, any> = {
         },
       }),
 
+      ...(fluid && {
+        width: '100%',
+        maxWidth: '100%',
+      }),
+
       ...(iconOnly && {
         minWidth: height,
         padding: 0,

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,