question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

(@theme-ui/color) exporting getColor

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
hasparuscommented, Jun 23, 2020

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

0reactions
danvimcommented, Jun 23, 2020

@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?

Read more comments on GitHub >

github_iconTop Results From Across the Web

theme-ui/color
Color manipulation utilities for Theme UI. npm i @theme-ui/color. Import utilities from the @theme-ui/color package and use them with colors in the sx...
Read more >
@theme-ui/color - npm
Color manipulation utilities for Theme UI. npm i @theme-ui/color. Import utilities from the @theme-ui/color package and use them with colors ...
Read more >
How to get color from palette material ui - Stack Overflow
to add predefined colors from @material-ui , import that color from @material-ui/core/colors , and then add that color with the argument ...
Read more >
Color Mode - Chakra UI
Updating the theme config# · initialColorMode : The initial mode you'd like your app to start with · useSystemColorMode : If true ,...
Read more >
How to apply Material theme colors for your Angular Component
We can get the theme color configurations with the get-color-config($theme) function provided by angular material. And this function will return a sass map, ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found