improve borders slice and remove borderStyles slice

[mauroerta]

Currently borders slice is used to create aliases of borders we want to use in our application, for example:

{
 "colors": {
    "primary": "#F9F8F8",
    "secondary": "#CDD3CE",
  },
  "borderWidths": {
    "s": "3px",
    "m": "5px",
  },
  "borders": {
    "none": "none",
    "primary": "5px solid white",
    "secondary": "3px solid  black",
  }
}

The problem is that there is no way to reference the slice colors to use colors from the theme or the slice borderWidths to use mapped border widths. In the same way we cannot reference mapped border styles, but in this case the only possible values that we can set are the ones supported by border-style property.

I wanted to improve borders since I think currently it's a little bit useless. I'm opening this discussion to have some feedback about 2 proposals:

First proposal

Make the border value an object with width, color, and style:

{
  "colors": {
    "primary": "#F9F8F8",
    "secondary": "#CDD3CE",
  },
  "borderWidths": {
    "s": "3px",
    "m": "5px",
  },
  "borders": {
    "none": {},
    "primary":  { "width": "s", "color": "primary", "style": "solid" },
    "secondary": { "width": "s", "color": "secondary", "style": "dotter" },
  }
}

In this way the generated border will always reference acceptable values.

Second proposal

The second proposal is to remove borderStyles slice since we can only accept values described here so I don't think we need a dedicated theme slice

[andreaSimonePorceddu]

I think the first proposal is better and even more suitable for a multi-platform approach.

[mauroerta]

Thank you Andrea, I agree with you. What about the removal of borderStyles slice?