[html/css] Tag

[leagrdv]

📝 Description

Update the tag component for v2.
This component already exists from v1 and needs to be updated and tokenized according to the new design.

⚙️ Requirements

• Some variants have been removed — delete any related code and references.
• The neutral tag can contain any icon, as before.
• Danger tag is renamed to error tag.
• Signal tags (error, success, warning, info), by default, have a signal icon that can be changed to any other icon.
  • To ensure those tags always have an icon, the signal icons should be implemented using a ::before pseudo-element, not as part of the HTML (look at the /components/dialog.scss file to see how it could be implemented)
  • The icon must automatically be there whenever the corresponding signal class is applied.
  • In order for people to override the default signal icon, they can add a <post-icon> within the tag element. Using the :has() selector, make sure that if the tag contains a <post-icon>, the signal icon in the ::before tag is not shown.
• Ensure the component functions correctly in dark mode and high contrast mode (HCM).
• Tokenize styles and spacing according to the new design tokens.
• The file variables/components/_tag.scss containing all of the old SCSS variable for the component should no longer be needed. Make sure to delete it and clean up all unused code related to the tag component.

🧪 Testing

• Verify that visual regression snapshots include all tag variants.
• Ensure that removed variants no longer appear in tests or Storybook.

💻 Proposed implementation

📃 Tasks

• Implement styles according to design
• Clean up unused CSS
• Update storybook documentation
• Update visual regression tests
• Design review