Add `variant` prop to `GlIcon`

Purpose

While exploring usage of gray text colors, we found that many of these instances come from developers setting a color class on GlIcon. We want to have different semantic color definitions between text and iconography, so we need to provide a mechanism by which users can easily specify the visual intent of the icon during usage.

See gitlab#460025 (comment 1898843691) for more discussion.

Proposal

  • Implement a variant prop on GlIcon for default, subtle, strong, disabled, link, info, warning, danger, success
  • Update storybook story to allow for exploring icon variants
  • Update Pajamas docs to show icon variant usage

Questions

Currently the default fill for .gl-icon is currentColor. Will the default variant preserve this behavior? If not, do we need an additional variant to allow the icon to match the surrounding text?