[Segment] Add "Primary" and "Secondary" colored segments

[sethmoore]

It would be useful to have a colored segment variant that has the accent in the primary and secondary brand colors.

[witrin]

How would I make a primary segment less noticeable? By calling it secondary primary segment? Sounds silly. There are already the variations secondary and tertiary for the emphasis and primary is just another ball in this pool. So they are exclusive and can't be used at the same time. I would just use the unnamed (inverted) segment as the primary variation by using @border (@invertedBackground). If you want also use secondary segment with a specific color you could just adapt its definition too.

Fun fact, there is already a primary inverted segment (see src/definitions/elements/segment.less#L651). But I would call this a bug.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[sethmoore]

The idea here is to extend the colored variations to allow using primary as a color. On segments I can see how that might be confusing since there is another concept of secondary, so maybe it should stick to primary. To me it makes perfect sense to use primary for a color, it's used in other elements such as buttons, why not here? It's also defined as a color in the less. I could use an explicit color that matches my primary, but then when I change my theme from primary color orange to blue (which I'm currently doing now) I'm going to have to go refactor everywhere that I use it in my code.

I would say if themes are a first-class idea in Semantic, then using the primary color should be as well since many theme changes are just tweaking colors.