Feature request

As part of https://github.com/acl-services/paprika/pull/929 we identified a few areas of the api that could do with some improvements. This issue is to track those issues

As discussed in https://github.com/acl-services/paprika/pull/929#discussion_r574118101

Further the themes api to be a kind

// 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.

acl-services / paprika

Tag component api api enhancements #949