fix(Segment): add background color (#408)

* fix(Segment): add background color

* cleanup variables

CHANGELOG.md

@@ -25,6 +25,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add warning for rendering components outside provider @Bugaa92 ([#378](https://github.com/stardust-ui/react/pull/378))
 - 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 Segment background color @levithomason ([#408](https://github.com/stardust-ui/react/pull/408))
 
 ### Features
 - Export `mergeThemes` @levithomason ([#285](https://github.com/stardust-ui/react/pull/285))

src/themes/teams/componentVariables.ts

@@ -40,6 +40,8 @@ export { default as PopupContent } from './components/Popup/popupContentVariable
 
 export { default as RadioGroupItem } from './components/RadioGroup/radioGroupItemVariables'
 
+export { default as Segment } from './components/Segment/segmentVariables'
+
 export { default as Status } from './components/Status/statusVariables'
 
 export { default as Text } from './components/Text/textVariables'

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

@@ -1,13 +1,14 @@
-import { pxToRem } from '../../../../lib'
 import { ICSSInJSStyle } from '../../../types'
+import { SegmentVariables } from './segmentVariables'
 
 export default {
-  root: (): ICSSInJSStyle => {
+  root: ({ variables }: { variables: SegmentVariables }): ICSSInJSStyle => {
     return {
-      padding: '1em',
-      boxShadow: '0 1px 2px 0 rgba(34,36,38,.15)',
+      padding: variables.padding,
+      background: variables.background,
       border: '1px solid rgba(34,36,38,.15)',
-      borderRadius: pxToRem(5),
+      borderRadius: variables.borderRadius,
+      boxShadow: '0 1px 2px 0 rgba(34,36,38,.15)',
     }
   },
 }

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

@@ -0,0 +1,16 @@
+import { pxToRem } from '../../../../lib'
+import { ComponentVariablesPrepared } from '@stardust-ui/react'
+
+export interface SegmentVariables {
+  padding: string
+  background: string
+  borderRadius: string
+}
+
+const segmentVariables: ComponentVariablesPrepared = siteVariables => ({
+  padding: '1em',
+  background: siteVariables.bodyBackground,
+  borderRadius: pxToRem(5),
+})
+
+export default segmentVariables