introduced fix to make segment inverted work without specifying color

Author: bmdalex

docs/src/examples/components/Segment/Variations/SegmentExampleInverted.shorthand.tsx

@@ -5,7 +5,7 @@ const SegmentExampleInvertedShorthand = () => (
   <div>
     <Segment content="Colored segment." color="red" />
     <br />
-    <Segment inverted content="Colored inverted segment" color="red" />
+    <Segment inverted content="Colored inverted segment." color="red" />
   </div>
 )
 

docs/src/examples/components/Segment/Variations/SegmentExampleInverted.tsx

@@ -6,7 +6,7 @@ const SegmentExampleInvertedShorthand = () => (
     <Segment color="red">Colored segment.</Segment>
     <br />
     <Segment inverted color="red">
-      Colored inverted segment
+      Colored inverted segment.
     </Segment>
   </div>
 )

src/themes/teams/components/Segment/segmentStyles.ts

@@ -6,22 +6,20 @@ import { SegmentVariables } from './segmentVariables'
 
 const segmentStyles: ComponentSlotStylesInput<SegmentProps, SegmentVariables> = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => {
-    const color = _.get(v.colors, p.color, v.color)
+    const segmentColor = _.get(v.colors, p.color)
 
     return {
       padding: v.padding,
-      background: v.background,
+      borderTop: `2px solid transparent`,
       borderRadius: v.borderRadius,
-      boxShadow: '0 1px 1px 1px rgba(34,36,38,.15)',
-      ...(color &&
-        (p.inverted
-          ? {
-              background: color,
-              color: '#eee', // TODO: fix this color once we fix #629
-            }
-          : {
-              borderTop: `2px solid ${color}`,
-            })),
+      boxShadow: `0 1px 1px 1px ${v.boxShadowColor}`,
+      color: v.color,
+      backgroundColor: v.backgroundColor,
+      borderColor: segmentColor,
+      ...(p.inverted && {
+        color: v.backgroundColor,
+        backgroundColor: segmentColor || v.color,
+      }),
     }
   },
 }

src/themes/teams/components/Segment/segmentVariables.ts

@@ -4,19 +4,21 @@ import { mapColorsToScheme } from '../../../../lib'
 export interface SegmentVariables {
   colors: ColorValues<string>
   color: string
-  background: string
+  backgroundColor: string
   padding: string
   borderRadius: string | number
+  boxShadowColor: string
 }
 
 export default (siteVariables): SegmentVariables => {
   const colorVariant = 500
 
   return {
     colors: mapColorsToScheme(siteVariables, colorVariant),
-    color: undefined,
-    background: siteVariables.bodyBackground,
+    color: siteVariables.black,
+    backgroundColor: siteVariables.bodyBackground,
     padding: '1em',
     borderRadius: 0,
+    boxShadowColor: 'rgba(34,36,38,.15)',
   }
 }