Pt 1: Update chip component to include the current status chip as a variant

[natdink]

Problem (Why)

Way back when, we updated the chip component in our design system so that it had fewer properties. However eventually we saw need for adding back in some of these props. We ended up creating a separate component called "Status" chip that provided a leading icon and had a set # of colors related to statuses.

However, now we are utilizing the chip more and more in different scenarios and need to update our design system to be more flexible.

Impact (Who)

Designers and developers

Existing

Chip : https://www.figma.com/design/kZwcxDBSMJbOcFaCin2xbd/SEMOSS-MUI-Core-v5.4.0?m=auto&node-id=6588-47683&t=G0QZ9VvqhTfaPDUK-1

Status chip: https://www.figma.com/design/kZwcxDBSMJbOcFaCin2xbd/SEMOSS-MUI-Core-v5.4.0?m=auto&node-id=450-73995&t=G0QZ9VvqhTfaPDUK-1

Requirements (What)

Part 1

• Create a branch for updating the chip component
• Combine the status chip component and the regular chip component into one; thereby getting rid of the separate concept of a "status" chip
• Add colors commonly related to status (orange, red, green) as options to our regular chip

[Pooja-1801]

Created Component and Variant creation for light mode for Filled chips for Medium and Small chips

[natdink]

The hover states are not all accessible for low contrast error and success and high contrast warning. The low contrast warning and then default gray also dont have a hover state change in background. Please finish and then clean up the file.

let's not focus on dark mode for the status chips so that we can move a bit more quickly on this.

[Pooja-1801]

• did you test these for accessibility? i dont think these would pass. can you make a color recommendation after you audit for warning and red text? the deletable on the success and error hover state is also very hard to see

• then on the low contrast warning and gray options, there is no color change at all happening on the hover state - this needs to be updated

[Pooja-1801]

I checked the MUI design library and updated the chip colors that didn’t pass the accessibility test. I used the same colors from the library, except for the red (low contrast).

[Pooja-1801]

Created a document showing which colors were changed for better understanding.

[Pooja-1801]

• Created new chip variants that were previously missing from the design system and defined appropriate colors for them.

•     Indigo (High Contrast)
  

•     Indigo ( Low Contrast)
  

[Pooja-1801]

• hover effect does not look different from the default, can you play around with these colors?

As discussed on the call, I will be working on the chip component to try out different color shades."
Or slightly more concise:

[Pooja-1801]

@bfekadu21 I’ve tried a similar shade of dark blue to match the others. For Default and Hover. Let me know your feedback on this.

Default:

Hover:

[Pooja-1801]

@bfekadu21 For the primary blue chip, the icon color appeared too light, so I created two variations. Let me know your feedback.

[bfekadu21]

@Pooja-1801 I think V2 is fine here. Also, added some feedback in figma about dark blue outlined chip in hover state. Can you make this update?

[Pooja-1801]

@bfekadu21 Updated the design as per the feedback

@bfekadu21 For the default chip, a high-contrast version exists, but not a low-contrast one. Do we need to create it?

[Pooja-1801]

• For Default grey chip updated the hover effect little darker