Tag component api api enhancements

[tristanjasper]

Feature request

As part of #929 we identified a few areas of the api that could do with some improvements. This issue is to track those issues

1. As discussed in uxd-818 Create tag component, consolidate Pill with ListboxWithTags Pill subcomponent #929 (comment)

Further the themes api to be a kind

eg

// Pill component
Tags.theme = (...args) => {
  const [color=null, background=null, border=null] = args;
  let _color = "black";
  let _backround = "white";
  let _border: "1px solid transparent";
  
  if(color) _color = color
  if(background) _background = background;
  if(border) _border = border;
  
  return css`${color}; ${background}; ${border};`;
}
Tags.types.kind = { 
  danger: Tags.theme(["red", "white", "red"]), 
  success: Tags.theme(["white", "green"]) 
};
//

<Tag kind={Tags.types.kind.success} />
<Tag kind={Tags.theme(["blue", "white", "blue"])} />

Prerequisites

This is just a checklist, please delete this section after
Please answer the following questions for yourself before submitting a feature request.

• I checked to make sure that this feature has not already been suggested
• Please label as, low / medium / high priority

Please fill in as much detail as possible

Is your feature request related to a problem?

A clear and concise description of what the problem is

Describe the solution you'd like

A clear and concise description of what you want to happen.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Additional context

Add any other context or screenshots about the feature request here.

[jamiek-acl]

1. This is a low priority as no one actually needs it, yet.
2. I believe the goal of this is to allow the consumer to provide a custom theme.

Instead of adding a kind prop (so there would be kind and theme, which requires thinking/causes conflict), I think it would be better to just re-use the theme prop:

theme={Tag.types.theme.BLACK}    // a preset theme
theme={{ color: 'black', backgroundColor: 'white', borderColor: 'green']} // a custom theme