feat(#2952): filter chip v2 styling update

[bdfranck]

This PR updates the Filter Chip styling to match the v2 Figma designs.

Changes include:

• Adds component tokens for v2 with original styling as a fallback
• Adds a version property to control which close icon to use
• Adds leadingicon and secondarytext properties

[twjeffery]

@bdfranck I noticed that the design in Figma had a couple additional properties that were added but not shown explicitly (leading icon and secondary text). I referenced the design templates again from the agency and saw that the chip design was also a bit out of date. I've updated it, and it was faster to update everything in a new commit rather than writing in code suggestions. Feel free to change/remove anything there that's not needed or wanted.

I'll also share a detailed doc with you on Slack explaining all of the changes and we can discuss as needed as it won't upload here.

On a high level:

Design Adjustments:

1. Changed border radius from {borderRadius.xl} (8px) to {borderRadius.2xl}
   (1rem/16px) - kept V1 value
2. Changed default border color from greyscale.500 to greyscale.300 (lighter)
3. Added hover border color: greyscale.500
4. Changed icon size from 24px (medium) to 20px (small) in V2
5. Adjusted height from 40px to 36px (changed padding-vertical from 7px to 5px)
6. Added hover icon color: greyscale.black
7. Removed padding-bottom font alignment fix for V2

Interaction Changes:

1. Made only the close icon clickable in V2 (instead of entire chip)
2. Wrapped close icon in element with 24x24px minimum touch target
3. Changed hover behavior to only trigger on icon button (not whole chip)
4. Changed focus to :focus-visible on button (circular focus ring)
5. Changed cursor pointer to only show on icon button

New Features Added:

1. leadingicon prop - optional icon before text (20px, greyscale.600)
2. secondarytext prop - optional label before main text (greyscale.600)
3. Added label-container wrapper with 6px gap between icon/secondary/text

Token Structure:

1. Simplified padding tokens to single composite token approach
2. Added component tokens that reference input.* global tokens for error states
3. Added hover-specific tokens for border, icon, and text colors
4. Added filter-chip-label-gap token (6px)

Error State Refinements:

1. Default text color uses input.color.border.error (lighter)
2. Hover text color uses input.color.text.error (darker)
3. Icon opacity changed from 0.5 to 1.0 (always fully visible)
4. Leading icon and secondary text inherit error colors

See detailed review doc for complete implementation details.

[chrisolsen]

@bdfranck This PR will also need it's commits cleaned up

[bdfranck]

Thanks for the suggestions, @twjeffery! I've amended my commit with the following changes:

• Implemented your styling adjustments
• Added the leading icon and secondary text properties
• Moved the v1 and v2 markup into separate sections
• Used an Icon Button for the v2 close action
• Fixed a broken test

[twjeffery]

Thanks for the updates Benji! The structure looks good - using goa-icon-button
for the close action is a nice approach.

I've added a few inline suggestions:

Token naming fixes - A few CSS variables didn't match the generated token names
(e.g., bg-color vs color-bg), which would cause the V2 styles to fall back to
V1 values.

Missing tokens - Added filter-chip-secondary-text-color-error and
filter-chip-close-button-error-hover-bg-color which were referenced in CSS but
didn't exist in the token file.

Error state color - Changed the leading icon error color to use
input.color.text.error (darker) for better visibility.

I've tested locally and it's looking good with these changes.

[bdfranck]

@twjeffery My apologies! I forgot to push my token updates to match my amended commit. I changed bg-color to color-bg for consistency with the other colour tokens. Those update tokens should be good.

[twjeffery]

Changes look great to me now!

Leading icon and secondary text:

Leading icon and secondary text on error state: