Icon and Design Tokens: replace icon-size tokens

[Spark450]

Acceptance Criteria:

Update design tokens with new iconSize - request json file from @twjeffery

1. Replace existing iconSize design tokens in json file:

"iconSize": {
    "2xs": {
      "value": "1rem",
      "type": "sizing",
      "description": "16px"
    },
    "xs": {
      "value": "1.125rem",
      "type": "sizing",
      "description": "18px"
    },
    "s": {
      "value": "1.25rem",
      "type": "sizing",
      "description": "20px"
    }, 
    "m": {
      "value": "1.5rem",
      "type": "sizing",
      "description": "24px"
    }, 
    "l": {
      "value": "2rem",
      "type": "sizing",
      "description": "32px"
    }, 
 },

2. Add two icon size variants to goa-icon component:

• xsmall
• 2xsmall

3. Update goa-icon to use updated and correct token values
   • goa-icon 2xsmall uses --goa-icon-size-2xs
   • goa-icon xsmall uses --goa-icon-size-xs
   • goa-icon small uses --goa-icon-size-s
   • goa-icon medium uses --goa-icon-size-m
   • goa-icon large uses --goa-icon-size-l

(size of icon should not change in components, but now token usage is semantically correct and all icon sizes accounted for as used in system)

[twjeffery]

We are misaligned on our design tokens in the goa-icon.

Changing the token values would mean changes to all components. goa-icon is used in callout, date input, badge, button, etc

I suggest we add a new set of icon-size tokens for the goa-icon to reference so that we don't have to change anything in our components, and our values won’t be misaligned going forward. eg. (goa-icon--medium == icon-size-3) instead of (goa-icon--medium == icon-size-large)

"iconSizes": {
    "1": {
      "value": "1rem",
      "type": "sizing",
      "description": "16px"
    },
    "2": {
      "value": "1.125rem",
      "type": "sizing",
      "description": "18px"
    },
     "3": {
      "value": "1.25rem",
      "type": "sizing",
      "description": "20px"
    },
    "4": {
      "value": "1.5rem",
      "type": "sizing",
      "description": "24px"
    }
     "5": {
      "value": "2rem",
      "type": "sizing",
      "description": "32px"
    }
  },