Border color is wrong!

[webdevelopland]

By defalut border has slightly transperent grey color. Which is great.
But when we apply any style to a cell, even without a border style, border disapears.
We could apply some style to the border, but it's either black, or some static color.
No way to make it transperent or to clear it!
That ruins the whole thing! Why no one said about it already?
Look how the default border looks, and how ugly is the black one:

[webdevelopland]

This is the workaround that I found for myself.
The tint() function generates appropriate border color for given background color:

interface RGB {
  r: number,
  g: number,
  b: number,
}

export function hexToRgb(hex: string): RGB {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, (m, r, g, b) => {
    return r + r + g + g + b + b;
  });

  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : { r: 0, g: 0, b: 0 };
}

export function rgbToHex(rgb: RGB): string {
  return componentToHex(rgb.r) + componentToHex(rgb.g) + componentToHex(rgb.b);
}

function componentToHex(color255: number): string {
  const hex = color255.toString(16);
  return hex.length == 1 ? '0' + hex : hex;
}

export function tint(hex: string, opacity: number = 0.9): string {
  const rgb = hexToRgb(hex);
  Object.keys(rgb).forEach(key => {
    rgb[key] *= opacity;
    rgb[key] = Math.round(rgb[key]);
  });
  return rgbToHex(rgb);
}

[webdevelopland]

Example of using:

function getCell(value: string | number, color: string): any {
  if (typeof (value) === 'number') {
    value = value.toString();
  }
  color = color.toLowerCase();
  const border: string = tint(color);
  return {
    v: value,
    s: {
      fill: { fgColor: { rgb: color } },
      border: {
        top: { style: 'thin', color: { rgb: border } },
        bottom: { style: 'thin', color: { rgb: border } },
        left: { style: 'thin', color: { rgb: border } },
        right: { style: 'thin', color: { rgb: border } },
      },
    },
  };
}