@theme-ui/color chaining functions, getting hex value

[jayliu50]

Hi! I'm just curious how to do stuff like chaining functions, getting hex values for colors. The methods that I expect to work don't work:

// trying to get hex value
desaturate('red', 0.5).toString(); // nope
desaturate('red', 0.5).hex(); // nope
desaturate('red', 0.5).hex; // nope

// trying to chain
lighten(desaturate('red', 0.5), 0.3); // nope

Thanks!

[hasparus]

Functions from theme-ui/color are mostly 2nd order — they return function taking theme object and only then return the resulting color.

i.e.

desaturate("primary", 0.5)({
  colors: { primary: "#30f" }
})

Take a look at this:

theme-ui/packages/color/src/index.ts

Line 52 in a603445

export const hue = (c: Color, h: number) => (t: Theme) =>

[jayliu50]

Got it. Thank you so much for your reply. Yeah, I guess chaining the functions was my main intent.

[hasparus]

@theme-ui/color is mostly here for convenience in common use cases. If you need to do something more complex you can always grab some functions from polished (@theme-ui/color depends on it so you already have it in node_modules).

import { darken, desaturate } from 'polished';
import { getColor } from '@theme-ui/color';

<div
  sx={{
    color: (theme) => {
      const primary = getColor(theme, "primary"); // the raw value you specified in your theme
      
      return darken(0.2, desaturate(0.25, primary));
    }
  }}
/>

[jayliu50]

Awesome! This is great. Thank you again for helping me. And thank you for your work.