Components: Standardize badge component

[jancavan]

We currently use the following components in Calypso to render a small piece of information that needs to stand out:

Badge: https://wpcalypso.wordpress.com/devdocs/design/badge Ribbon: https://wpcalypso.wordpress.com/devdocs/design/ribbon

However, in some places, particularly in /plans, there is a different kind of badge which:

• has different styles and doesn't appear to be an actual component
• is using the color pink, which isn't any of the badge colors

We should:

• Make sure we use the badge component in cases like these
• Standardize the colors of this component
• Deprecate the ribbon component (I honestly don't know how this works with i18n, it doesn't look to be able to contain too many words)

cc @Automattic/dotcom-manage-design

[github-actions[bot]]

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.