feat(segment): add inverted prop and improved styles

[bmdalex]

Segment

This PR introduces following changes for Segment component:

• inverted prop;
• color variable;
• content slot and renderContent method;
• new styles.

TODO

• Conformance test
• Minimal doc site example
• Stardust base theme
• Teams Light theme
• Teams Dark theme
• Teams Contrast theme
• Confirm RTL usage
• W3 accessibility check
• Stardust accessibility check
• Update glossary props table
• Update the CHANGELOG.md

API Proposal

Default

<Segment
  content="The elevator to success is out of order. You’ll have to use the stairs."
/>

renders:

color variable

A segment can different colors. Use color variable to see the effect.

<Segment
  content="Colored segment."
  variables={siteVars => ({ color: siteVars.brand })}
/>

renders

inverted with color variable

A segment can have its colors inverted for contrast. Use color variable to see the effect.

<Segment
  inverted
  content={<Text content="Colored inverted segment." styles={{ color: 'white' }} />}
  variables={siteVars => ({ color: siteVars.brand })}
/>

renders

[codecov]

Codecov Report

Merging #389 into master will increase coverage by <.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #389      +/-   ##
==========================================
+ Coverage   88.96%   88.96%   +<.01%     
==========================================
  Files          41       41              
  Lines        1386     1387       +1     
  Branches      177      177              
==========================================
+ Hits         1233     1234       +1     
  Misses        149      149              
  Partials        4        4

Impacted Files	Coverage Δ
src/components/Segment/Segment.tsx	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update dc4c67e...12eb4ac. Read the comment docs.

[kuzhelov]

please, consider to use fallback options for siteVars.brand for those cases where those are not provided. I would even suggest to use some hardcoded colors for now, to make it easier for the client of these examples to get the idea

[bmdalex]

@mnajdova @kuzhelov @levithomason
bump for reviewing this

[levithomason]

Please merge after addressing comments!