Adjust existing and add additional badge types

[Spark450]

Acceptance Criteria:

• Please reference the Figma file for the specific parameters and token values.
• Get the latest token JSON file from @twjeffery
  • All color values should have semantic token names
• Ensure new properties are available to use in the Badge sandbox on the design system website.

Figma designs

Add tokens If not already done, create an additional design token: --goa-color-greyscale-900 = #474747 #F8F8F8 (--goa-color-greyscale-50) #D7EDFF (--goa-color-interactive-background)

This will require a deployment of design tokens

Add the following "new" badge types:

• Archived
• Blue
• Yellow
• Pink
• Violet
• Aqua
• Light green

Add border CSS value: Info: 1px solid var(--goa-color-greyscale-200) Warning: 1px solid var (--goa-color-warning-dark) Emergency: 1px solid var (--goa-color-emergency-dark) Success: 1px solid var (--goa-color-success-dark) Dark: 1px solid var (--goa-color-greyscale-700) Midtone: 1px solid var (--goa-color-greyscale-900) Light: 1px solid var (--goa-color-greyscale-200) Archived: 1px solid var (--goa-color-greyscale-black) Blue: 1px solid (#819FBC) Yellow: 1px solid (#D9A95A) Pink: 1px solid (#DF7BAC) Violet: 1px solid (#A4A7D9) Aqua: 1px solid (#69C6C1) Light green: 1px solid (#9BD295)

• All badges now have a border color that differs from the background color, ensure that this is implemented.

  • This includes adding borders to existing badges:
    • Dark
    • Light
    • Information
    • Warning
    • Emergency
    • Success

• Undocument the following badge type:

  • "Midtone"

[ArakTaiRoth]

I believe this also includes the work detailed in #1517 , Can you check @Spark450 ?

If so, maybe copy the details from that story over here, and close that story.