Card - Add favorite style with star icon

[DaoDaoNoCode]

Is this a new component or an extension of an existing one?
Card Component

Describe the feature
Request a feature that allows the user could set a card as favorite or not by checking the star icon on the top-right corner of the card. It's something like we have in the Menu component with favorites example

Are there visuals for this feature? If applicable, please include examples for each state and for varying widths
The design is something like:

Any other information?
Product: RHODS

[DaoDaoNoCode]

Please consider the color of the star icon when designing this style. I tried to use the same inactive color as the Menu components, which turn out not to be a good result because the star is too dark. When there are many cards on the page with some starred and some not, it's becoming hard to tell at the first glance.

[mcarrano]

Transferring for more discussion

[nicolethoen]

@DaoDaoNoCode does this POC do what you want? Are there other changes you'd make?
https://codesandbox.io/s/favoritable-cards-korqty?file=/index.tsx

[DaoDaoNoCode]

Yes! The style looks great to me, will you make it an interface prop of the Card component so we don't need to import the CSS styles in the code?

[nicolethoen]

I'd say that unless it seems to be a use case other products would want, we probably won't.
@mcoker are the variables I used to style the favorites button here the ones you'd recommend? Is there an even better way to do this?

[mcoker]

@nicolethoen that looks good to me. Though there are hover/focus styles for the favorited button you can apply, too. I updated the codesandbox to drop those in, also to write the CSS similar to how we might introduce this as a variation in PF - https://codesandbox.io/s/favoritable-cards-korqty?file=/style.css

FWIW, I think there is a good argument for introducing, at a minimum, favorite tokens/vars for the favorite colors, if not even a favorite variation of the button or that as a component since it's a custom, repeated pattern across multiple PF components currently. We have the ability to favorite table rows and menu items (and soon to be deprecated menu-item-things in select and app launcher). I don't see why that wouldn't extend to cards, data-lists, etc.