(@theme-ui/color) exporting getColor

Is your feature request related to a problem? Please describe.

I’d like to use polished or other JS color utils to handle complex color transformations.

example:

flow(
  (t: Theme) => t.colors?.primary || "#eeffff",
  setSaturation(0.75),
  transparentize(0.92)
)

ATM the code above doesn’t work, because t.colors.primary is 'var(--theme-ui-colors-primary, #e85554)', what’s really useful for inspection and tweaks in browser dev tools, but it needs parsing to retrieve the hexadecimal number I’d like to operate on.

This parsing logic is currently defined in @theme-ui/color in the function called g.

const g = (t: Theme, c: string) =>
  get(t, `colors.${c}`, c)
    .replace(/^var\(--(\w+)(.*?), /, "")
    .replace(/\)/, "");

working version of the from the first snippet looks like this

const parseColor = (cssVarColor: string) =>
  cssVarColor.replace(/^var\(--(\w+)(.*?), /, "").replace(/\)/, "");

flow(
  (t: Theme) => t.colors?.primary || "#eeffff",
  parseColor,
  setSaturation(0.75),
  transparentize(0.92)
);

Describe the solution you’d like

If g was exported as getColor I could change my code to

flow(
  (t: Theme) => getColor(t, "primary"),
  setSaturation(0.75),
  transparentize(0.92)
);

and avoid including the knowledge about that CSS variable is there in application code.

Describe alternatives you’ve considered

1. I can keep the parseColor function.

2. Alternatively, I can rewrite the code from my example to use functions exported from @theme-ui/color.

(t: Theme) => transparentize(saturation('primary', 0.75)(t), 0.92)(t)

I think exporting g as getColor would make using other color libraries alongside @theme-ui/color simpler.

[hasparus]

Hey, @danvim. It’s still not in stable version. (0.4.0-rc.1 or “next” has it)

[danvim]

@jxnblk I just installed 0.3.1 of @theme-ui/color and it seems that getColor() is not exported. Is the merged content published on npm?