RGB CSS variable format is inconvenient

[srmagura]

I mentioned this in the now-closed #658, but anyway: it is a bit inconvenient that certain CSS variables, e.g. --rgb-accent require their value to be in the format 255,255,255 instead of accepting standard color strings like rgb(255, 255, 255) or #ffffff.

Fixing this would likely be a breaking change so it probably cannot be attempted until v6

I needed to set --rgb-accent to my application's primary theme color which is specified in hex, so I wrote this function:

/**
 * Convert a hex color to the format used by emoji-mart's CSS variables.
 *
 * Example: '#ff0000' -> '255,0,0'
 */
function hexToRgbString(hex: string): string | undefined {
  hex = hex.trim().replace(/#/g, '');

  if (hex.length !== 6) {
    return undefined;
  }

  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);

  return `${r},${g},${b}`;
}

.

[Plonq]

I agree with this. Currently it's not possible to style this picker to match an existing dynamic theme, by using one's own custom properties. For example I want to do something like this:

  --rgb-background: var(--bg);
  --rgb-color: var(--color-base);
  --rgb-input: var(--bg);
  --rgb-accent: var(--focus-outline-color);

But that doesn't work because the result is rgb(var(--bg)) which is invalid CSS.

Unfortunately this is the best emoji picker I've found and this issue means I can't use it 😢 While I'm here, it would also be nice to have more custom properties exposed. E.g. not just the search input focus outline colour, but the entire box-shadow value should be a custom prop so it can be changed.