fix(Icon): Color & docs update for Teams theme

docs/src/examples/components/Icon/States/IconExampleDisabled.shorthand.tsx

@@ -4,9 +4,6 @@ import { Icon } from '@stardust-ui/react'
 const IconExampleDisabled = () => (
   <div>
     <Icon disabled name="umbrella" size="big" />
-    <Icon disabled name="umbrella" size="big" variables={{ color: 'blue' }} />
-    <Icon disabled name="umbrella" size="big" variables={{ color: 'red' }} />
-    <Icon disabled name="umbrella" size="big" variables={{ color: 'orange' }} />
   </div>
 )
 

docs/src/examples/components/Icon/Usage/IconButtonExample.shorthand.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Icon, Button, Text } from '@stardust-ui/react'
+
+const IconExampleButton = () => (
+  <div>
+    <Button type="primary" icon iconPosition="before">
+      <Icon name="call" xSpacing="after" />
+      <Text content="Call now" />
+    </Button>
+    <Button type="secondary" icon iconPosition="before">
+      <Icon name="home" xSpacing="after" />
+      <Text content="Phone home" />
+    </Button>
+    <Button type="primary" disabled icon iconPosition="before">
+      <Icon name="home" xSpacing="after" />
+      <Text content="Disabled button with icon" />
+    </Button>
+  </div>
+)
+
+export default IconExampleButton

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

@@ -9,6 +9,11 @@ const Usage = () => (
       description="You can access all icon names available in the current theme."
       examplePath="components/Icon/Usage/IconSetExample"
     />
+    <ComponentExample
+      title="Icon in a button"
+      description="You can use an icon in a button."
+      examplePath="components/Icon/Usage/IconButtonExample"
+    />
   </ExampleSection>
 )
 

docs/src/examples/components/Icon/Variations/IconExampleColor.shorthand.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Icon } from '@stardust-ui/react'
+
+const IconExampleColor = () => (
+  <div>
+    <Icon name="home" />
+    <Icon name="home" variables={{ color: 'blue' }} />
+    <Icon name="home" variables={{ color: 'red' }} />
+    <Icon name="home" variables={{ color: 'orange' }} />
+  </div>
+)
+
+export default IconExampleColor

docs/src/examples/components/Icon/Variations/index.tsx

@@ -9,6 +9,11 @@ const Variations = () => (
       description="An icon can have space before, after or on both sides. 'none' value removes the default space around the icon."
       examplePath="components/Icon/Variations/IconExampleSpace"
     />
+    <ComponentExample
+      title="Color"
+      description="An icon can have a different color"
+      examplePath="components/Icon/Variations/IconExampleColor"
+    />
     <ComponentExample
       title="Size"
       description="An icon can vary in size."

src/themes/teams/components/Icon/iconStyles.ts

@@ -1,6 +1,6 @@
 import fontAwesomeIcons from './fontAwesomeIconStyles'
 import { callable } from '../../../../lib'
-import { disabledStyle, fittedStyle } from '../../../../styles/customCSS'
+import { fittedStyle } from '../../../../styles/customCSS'
 import { ComponentSlotStylesInput, ICSSInJSStyle, FontIconSpec } from '../../../types'
 import { ResultOf } from '../../../../../types/utils'
 import { IconXSpacing, IconProps } from '../../../../components/Icon/Icon'
@@ -29,23 +29,13 @@ const getFontStyles = (iconName: string, themeIcon?: ResultOf<FontIconSpec>): IC
   const { fontFamily, content } = themeIcon || getDefaultFontIcon(iconName)
 
   return {
+    display: 'inline-block',
     fontFamily,
-    width: '1.18em',
-    fontStyle: 'normal',
-    fontWeight: 400,
-    textDecoration: 'inherit',
     textAlign: 'center',
-
-    '-webkit-font-smoothing': 'antialiased',
-    '-moz-osx-font-smoothing': 'grayscale',
-    backfaceVisibility: 'hidden',
-
     lineHeight: 1,
 
     '::before': {
       content,
-      boxSizing: 'inherit',
-      background: '0 0',
     },
   }
 }
@@ -67,7 +57,6 @@ const getBorderedStyles = (isFontBased, circular, borderColor, color): ICSSInJSS
   return {
     ...getPaddedStyle(isFontBased),
 
-    // TODO: "black" here should actually match the Icon's fill or text color
     boxShadow: `0 0 0 0.05em ${borderColor || color || 'black'} inset`,
     ...(circular ? { borderRadius: '50%' } : {}),
   }
@@ -87,43 +76,51 @@ const iconStyles: ComponentSlotStylesInput<IconProps, any> = {
   }): ICSSInJSStyle => {
     const iconSpec = theme.icons[name]
     const isFontBased = !iconSpec || !iconSpec.isSvg
+    const iconColor = v.color || 'currentColor'
 
     return {
+      backgroundColor: v.backgroundColor,
       display: 'inline-block',
       fontSize: getSize(size),
-
+      margin: v.margin,
+      speak: 'none',
+      verticalAlign: 'middle',
+      overflow: 'hidden',
       width: '1em',
       height: '1em',
 
       ...(isFontBased &&
         getFontStyles(name, callable(iconSpec && (iconSpec.icon as FontIconSpec))())),
 
-      ...(isFontBased && { color: v.color }),
-      backgroundColor: v.backgroundColor,
+      ...(isFontBased && {
+        color: iconColor,
 
-      opacity: 1,
-      margin: v.margin,
+        ...(disabled && {
+          color: v.disabledColor,
+        }),
+      }),
 
-      speak: 'none',
+      ...(!isFontBased && {
+        fill: iconColor,
 
-      verticalAlign: 'middle',
-      overflow: 'hidden',
+        ...(disabled && {
+          fill: v.disabledColor,
+        }),
+      }),
 
       ...getXSpacingStyles(xSpacing, v.horizontalSpace),
 
       ...((bordered || v.borderColor || circular) &&
         getBorderedStyles(isFontBased, circular, v.borderColor, v.color)),
-
-      ...(disabled && disabledStyle),
     }
   },
 
   svg: getSvgStyle('svg'),
 
   g: getSvgStyle('g'),
 
-  /* additional SVG styles for different paths could be added/used in the same way */
   path: getSvgStyle('path'),
+
   secondaryPath: getSvgStyle('secondaryPath'),
 }
 

src/themes/teams/components/Icon/iconVariables.ts

@@ -9,15 +9,15 @@ export interface IconVariables {
   horizontalSpace: string
   margin: string
   secondaryColor: string
+  disabledColor: string
 }
 
-export default (): IconVariables => ({
+export default (siteVars): IconVariables => ({
   color: undefined,
-  // TODO move initial variable discovery to JSON files
-  // similar to how components have an info.json file
   backgroundColor: undefined,
   borderColor: undefined,
   horizontalSpace: pxToRem(10),
   margin: '0 0.25em 0 0',
-  secondaryColor: 'white',
+  secondaryColor: siteVars.white,
+  disabledColor: siteVars.gray06,
 })