BREAKING: Button - implement dark theme and match redlines

CHANGELOG.md

@@ -17,6 +17,12 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING
+- Removed `type...` prefix from multiple variables in `buttonStyles.ts` @bcalvery ([#336](https://github.com/stardust-ui/react/pull/336))
+
+### Documentation
+- Add `Usage` examples for `Button` showing style override @bcalvery ([#336](https://github.com/stardust-ui/react/pull/336))
+
 ### Fixes
 - Fix for cropped rounded corners in `Menu` component @Bugaa92 ([#360](https://github.com/stardust-ui/react/pull/360))
 - Remove hardcoded `status` size calculations in `Avatar` component @Bugaa92 ([#358](https://github.com/stardust-ui/react/pull/358))

docs/src/examples/components/Button/Usage/ButtonUsageExample.shorthand.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { Button, Provider } from '@stardust-ui/react'
+
+const ButtonUsageExampleShorthand = () => (
+  <div>
+    <Provider
+      theme={{
+        componentVariables: {
+          Button: siteVariables => ({
+            color: siteVariables.brand06,
+            colorActive: siteVariables.brand04,
+            colorHover: siteVariables.brand04,
+            colorFocus: siteVariables.brand02,
+            backgroundColor: siteVariables.black,
+            backgroundColorActive: siteVariables.brand14,
+            backgroundColorHover: siteVariables.brand16,
+            backgroundColorFocus: siteVariables.brand14,
+            borderColor: siteVariables.brand14,
+            borderColorActive: siteVariables.brand12,
+            borderColorHover: siteVariables.brand12,
+            borderColorFocus: siteVariables.black,
+            borderColorFocusIndicator: siteVariables.brand02,
+          }),
+        },
+      }}
+    >
+      <Button content="Tinted Button" />
+    </Provider>
+    This button's styling is only applicable to dark theme.
+    <br />
+    <br />
+    <Provider
+      theme={{
+        componentVariables: {
+          Button: siteVariables => ({
+            color: siteVariables.brand06,
+            colorActive: siteVariables.brand06,
+            colorHover: siteVariables.brand06,
+            colorFocus: siteVariables.brand02,
+            backgroundColor: siteVariables.white,
+            backgroundColorActive: siteVariables.brand14,
+            backgroundColorHover: siteVariables.brand16,
+            backgroundColorFocus: siteVariables.brand14,
+            borderColor: siteVariables.brand14,
+            borderColorActive: siteVariables.brand12,
+            borderColorHover: siteVariables.brand12,
+            borderColorFocus: siteVariables.white,
+            borderColorFocusIndicator: siteVariables.brand02,
+          }),
+        },
+      }}
+    >
+      <Button content="Tinted Button" />
+    </Provider>
+    This button's styling is only applicable to light theme.
+  </div>
+)
+
+export default ButtonUsageExampleShorthand

docs/src/examples/components/Button/Usage/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Usage = () => (
+  <ExampleSection title="Usage">
+    <ComponentExample
+      title="Tinted Example"
+      description="A button used in cards is a &quot;tinted&quot; version of a default button."
+      examplePath="components/Button/Usage/ButtonUsageExample"
+    />
+  </ExampleSection>
+)
+
+export default Usage

docs/src/examples/components/Button/index.tsx

@@ -3,13 +3,15 @@ import Types from './Types'
 import Variations from './Variations'
 import States from './States'
 import Groups from './Groups'
+import Usage from './Usage'
 
 const ButtonExamples = () => (
   <div>
     <Types />
     <States />
     <Variations />
     <Groups />
+    <Usage />
   </div>
 )
 

docs/src/views/ThemingExamples.tsx

@@ -108,7 +108,6 @@ export default () => (
       ].join('\n')}
       render={() => (
         <Button
-          type="secondary"
           content="Send email"
           icon={{ name: 'at', styles: { color: 'brown' } }}
           styles={{
@@ -130,15 +129,14 @@ export default () => (
         ``,
         `const btnExample = () => `,
         `    <Button`,
-        `      type="secondary"`,
         `      icon={{`,
         `        name: "at",`,
         `        variables: { color: "brown" }`,
         `      }}`,
         `      content="Send email"`,
         `      variables={{`,
-        `        typeSecondaryColor: "coral",`,
-        `        typeSecondaryBackgroundColor: "charcoal"`,
+        `        secondaryColor: "coral",`,
+        `        secondaryBackgroundColor: "charcoal"`,
         `        paddingLeftRightValue: 20`,
         `      }}`,
         `    />`,
@@ -151,8 +149,8 @@ export default () => (
           content="Send email"
           icon={{ name: 'at', variables: { color: 'brown' } }}
           variables={{
-            typeSecondaryColor: 'coral',
-            typeSecondaryBackgroundColor: 'charcoal',
+            secondaryColor: 'coral',
+            secondaryBackgroundColor: 'charcoal',
             paddingLeftRightValue: 20,
           }}
         />
@@ -203,10 +201,10 @@ export default () => (
         `      minWidth: '24px',`,
         `      borderRadius: '8px',`,
         `      color: 'darkred',`,
-        `      typeSecondaryColor: '#ffffff',`,
-        `      typeSecondaryBorderColor: 'transparent',`,
-        `      typeSecondaryBackgroundColor: '#6699CC',`,
-        `      typeSecondaryBackgroundColorHover: '#91A3B0',`,
+        `      secondaryColor: '#ffffff',`,
+        `      secondaryBorderColor: 'transparent',`,
+        `      secondaryBackgroundColor: '#6699CC',`,
+        `      secondaryBackgroundColorHover: '#91A3B0',`,
         `    },`,
         `  },`,
         `  componentStyles: {`,
@@ -252,10 +250,10 @@ export default () => (
                   minWidth: '24px',
                   borderRadius: '8px',
                   color: 'darkred',
-                  typeSecondaryColor: '#ffffff',
-                  typeSecondaryBorderColor: 'transparent',
-                  typeSecondaryBackgroundColor: '#6699CC',
-                  typeSecondaryBackgroundColorHover: '#91A3B0',
+                  secondaryColor: '#ffffff',
+                  secondaryBorderColor: 'transparent',
+                  secondaryBackgroundColor: '#6699CC',
+                  secondaryBackgroundColorHover: '#91A3B0',
                 },
               },
               componentStyles: {

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

@@ -2,63 +2,108 @@ export interface IButtonVariables {
   [key: string]: string | number
 
   color: string
+  colorActive: string
+  colorHover: string
+  colorFocus: string
+  colorDisabled: string
   backgroundColor: string
+  backgroundColorActive: string
   backgroundColorHover: string
-  typePrimaryColor: string
-  typePrimaryBackgroundColor: string
-  typePrimaryBackgroundColorActive: string
-  typePrimaryBackgroundColorHover: string
-  typePrimaryBorderColor: string
-  typePrimaryBorderColorFocus: string
-  typePrimaryBorderColorInsetFocus: string
-  typeSecondaryColor: string
-  typeSecondaryBackgroundColor: string
-  typeSecondaryBackgroundColorActive: string
-  typeSecondaryBackgroundColorHover: string
-  typeSecondaryBackgroundColorFocus: string
-  typeSecondaryBorderColor: string
-  typeSecondaryBorderColorActive: string
-  typeSecondaryBorderColorHover: string
-  typeSecondaryBorderColorFocus: string
-  typeSecondaryBorderColorInsetFocus: string
-  typeDisabledButtonColor: string
-  typeDisabledButtonBackgroundColor: string
-  typeTextColorHover: string
-  typeTextPrimaryColor: string
-  typeTextPrimaryColorHover: string
-  typeTextSecondaryColor: string
-  typeTextSecondaryColorHover: string
+  backgroundColorFocus: string
+  backgroundColorDisabled: string
+  borderColor: string
+  borderColorActive: string
+  borderColorHover: string
+  borderColorFocus: string
+  borderColorFocusIndicator: string
+  borderColorDisabled: string
+
+  primaryColor: string
+  primaryBackgroundColor: string
+  primaryBackgroundColorActive: string
+  primaryBackgroundColorHover: string
+  primaryBackgroundColorFocus: string
+  primaryBorderColor: string
+  primaryBorderColorActive: string
+  primaryBorderColorHover: string
+  primaryBorderColorFocus: string
+  primaryBorderColorFocusIndicator: string
+
+  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.black,
-    backgroundColor: siteVars.gray08,
-    backgroundColorHover: siteVars.gray06,
-    typePrimaryColor: siteVars.white,
-    typePrimaryBackgroundColor: siteVars.brand,
-    typePrimaryBackgroundColorActive: siteVars.brand02,
-    typePrimaryBackgroundColorHover: siteVars.brand04,
-    typePrimaryBackgroundColorFocus: siteVars.brand04,
-    typePrimaryBorderColor: 'transparent',
-    typePrimaryBorderColorFocus: siteVars.black,
-    typePrimaryBorderColorInsetFocus: siteVars.white,
-    typeSecondaryColor: siteVars.white,
-    typeSecondaryBackgroundColor: siteVars.black,
-    typeSecondaryBackgroundColorActive: siteVars.gray08,
-    typeSecondaryBackgroundColorHover: siteVars.brand04,
-    typeSecondaryBackgroundColorFocus: siteVars.gray08,
-    typeSecondaryBorderColor: siteVars.white,
-    typeSecondaryBorderColorActive: siteVars.gray06,
-    typeSecondaryBorderColorHover: siteVars.gray06,
-    typeSecondaryBorderColorFocus: siteVars.black,
-    typeSecondaryBorderColorInsetFocus: siteVars.white,
-    typeDisabledButtonColor: siteVars.gray08,
-    typeDisabledButtonBackgroundColor: siteVars.gray09,
-    typeTextColorHover: siteVars.brand04,
-    typeTextPrimaryColor: siteVars.brand,
-    typeTextPrimaryColorHover: siteVars.brand04,
-    typeTextSecondaryColor: siteVars.gray03,
-    typeTextSecondaryColorHover: siteVars.brand04,
+    color: siteVars.white,
+    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-dark/siteVariables.ts

@@ -3,16 +3,15 @@ import { white, green } from '../teams/siteVariables'
 //
 // COLORS
 //
-export const black = '#201f1e'
-
+export const black = '#201f1f'
 export const gray02 = '#c8c6c4'
 export const gray03 = '#b3b0ad'
 export const gray04 = '#8a8886'
 export const gray06 = '#605e5c'
 export const gray08 = '#484644'
-export const gray09 = '#3b3a39'
-export const gray10 = '#323130'
-export const gray14 = '#292827'
+export const gray09 = '#323130'
+export const gray10 = '#2d2c2c'
+export const gray14 = '#292828'
 
 export const brand = '#6264A7'
 export const brand02 = '#e2e2f6'
@@ -30,6 +29,11 @@ export const red = '#d74654'
 export const red08 = '#4f232b'
 export const green04 = green
 
+//
+// SHADOW LEVELS
+//
+export const shadowLevel1 = '0 .2rem .4rem -.075rem rgba(255, 255, 255, 0.1)'
+
 //
 // SEMANTIC ASSIGNMENTS
 //