Change tag component so it supports different states

[inesdgomes]

Hi @beatrizmartinmartins We need the tag component to be a bit more versatile. The use case is: we need to use the tag to show an event status. For example, the event can be: a) scheduled; b) starting in X min; c) live; d) interrupted; e) ended.

Please see here a design test that Davide, who's implementing the design system on ILO Live, did: https://www.figma.com/design/ulu2zb7ZOuT4VXu4M7Yp98/ILO-Live?node-id=65-3247&node-type=section&t=VcjLOH4WlNhcaEO2-0

Could you please:

• Review the proposal
• Make any improvements
• Integrate the changes in the component using more agnostic labels for the different colours/states

Both Justin and I are happy with the proposal, we just think the 'Starting' status should be emphatic. Perhaps purple?

[beatrizmartinmartins]

Honestly, I'd rather create another component called Status Tag, because the Tag one is clicable and navigationable while this status one is not, and can not be deleted or anything like that. Wouldn't it be better to have them separate so we are able to use the Hover, Focus, etc states for the Tag, while on the Status one, we just need the states for Live, Schedule, etc? @inesdgomes @justintemps I did made a version of them here, but since they can't be removed, we are lacking some variants there that look weird.