Split up borders into top-bottom-left-right?

[robrechtme]

As far as I understand it, borders tokens apply to each side and cannot be "split up" into top-bottom-left-right. Is that correct?

Splitting these up would be useful, especially for border-width and border-radius. What do you think?

[AMoreaux]

Hi @robrechtme

Currently, we store borders according to this type.
So the top-bottom-left-right is not described in it. But if you want to split it you can use a parser to make the job.

Could you show an example of the output you would like to have, please?

[AllanMichay]

Hi @robrechtme,

I think it's a great idea. We were looking into this and came to a realization that Figma does not allow to have different border-width so we decided to keep it simple for now.

For the border-radius, we can already implement this and we've been thinking of a new way to store the data.
We were deciding between having only the four values, even though they have the same value

radii: {
  topLeft: {unit: 'px', measure: 16},
  topRight: {unit: 'px', measure: 16},
  bottomRight: {unit: 'px', measure: 16},
  bottomLeft: {unit: 'px', measure: 16},
}

Or have only a value when they're all the same and have an object if not. Considering that it would be the responsibility of the parser's developer to decide whether he has to use radii or radii.topLeft

Would you want to have

radii: MeasurementToken | {
  topLeft: MeasurementToken,
  topRight: MeasurementToken,
  bottomRight: MeasurementToken,
  bottomLeft: MeasurementToken,
}

or

radii:  {
  topLeft: MeasurementToken,
  topRight: MeasurementToken,
  bottomRight: MeasurementToken,
  bottomLeft: MeasurementToken,
}

Of course, the same logic would be applied to the border-width

[robrechtme]

Hi, I was not aware that Figma doesn't support different border widths (which is quite a limitation imo).

For the border radius I would go for

radii: MeasurementToken | {
  topLeft: MeasurementToken,
  topRight: MeasurementToken,
  bottomRight: MeasurementToken,
  bottomLeft: MeasurementToken,
}

I think this is easier for reverse compatibility with current parsers. If Figma were to introduce different border widths (or even border colors and border styles) as well, the API could be easily adapted to this format.

[AMoreaux]

HI @robrechtme

Today, borders already include different border-radius in the property rectangleCornerRadiiNumber :

export interface BorderValue {
  color:
    | ColorToken
    | {
        value: ColorValue;
      };
  type:
    | 'none'
    | 'hidden'
    | 'dotted'
    | 'dashed'
    | 'solid'
    | 'double'
    | 'groove'
    | 'ridge'
    | 'inset'
    | 'outset';
  width:
    | MeasurementToken
    | {
        value: MeasurementValue;
      };
  align?: string;
  radii?:
    | MeasurementToken
    | {
        value: MeasurementValue;
      };
  rectangleCornerRadii?: Array<
    | MeasurementToken
    | {
        value: MeasurementValue;
      }
  >;
  dashes?: Array<
    | MeasurementToken
    | {
        value: MeasurementValue;
      }
  >;
}

It's an array of length 4 of the radius of each corner, starting in the top left and proceeding clockwise.
We will certainly migrate this type to a more intuitive type like your suggestion.