Imitating darken/lighten less functions

[cmavelis]

Maybe I'm overthinking it, but I was trying to decide how to mimic functionality of the color operations from less, for example: http://lesscss.org/functions/#color-operations-lighten

My goal was to add as little css as possible to my component library, so I've been writing the basic button states like :hover as part of the theme file. If I want to simply darken the color in less, I use the darken function on the color variable.

If I were to define a darken function in my theme.js, how could I apply it programmatically to the theme.js color variable? darken('colors.primary') for example, or do I need to define more colors to access them?

Edit: This looks like it would work if I were to redefine components using sx https://theme-ui.com/sx-prop#functional-values
However, I was hoping to do it via the theme.js config. If that's not intended use for writing a component library, that's something I've been wondering as well! https://github.com/tabetalt/kit Seems to define most things via config, and they've been my model.

Love the project btw, working on a component library prototype for my company as part of a new design system. I liked the look of rebass, saw the lack of activity, then found this!

[lachlanjc]

You're in luck! We've got a package just for that, with nearly exactly that API: https://theme-ui.com/packages/color

[hasparus]

Do you also get the same error in your app or does it happen only in Storybook?

Storybook also uses Emotion's context, and there are few possible mismatch bugs we still have to fix. (Having both Emotion v10 and Emotion v11 might be problematic.)

[cmavelis]

only storybook, and for context here are my versions:
"theme-ui": "0.4.0-rc.1"
Storybook 6.1.21

and usage within .storybook/preview.js:

import React from 'react';

import { ThemeProvider, Container } from 'theme-ui';
import theme from '../../theme';

export const decorators = [
  (story) => (
  <ThemeProvider theme={theme}>
    <Container p={4}>{story()}</Container>
  </ThemeProvider>
),
];

[fcisio]

You can start by upgrading to the latest stable version.
It would be hard for anyone to debug on 0.4.0-rc.1 which is severely outdated by now.

I don't think 0.4.0-rc.1 even has the rawColors object in the context.

As for @hasparus point above, this is indeed most likely an Emotion version mismatch

Here's a snippet with resolution on Emotion. Set this in your main.js file and it should fix any mismatch

module.exports = ({ config }) => {
  config.resolve.alias = {
    ...config.resolve.alias,
    "@emotion/core": toPath("node_modules/@emotion/react"),
    "@emotion/styled": toPath("node_modules/@emotion/styled"),
    "emotion-theming": toPath("node_modules/@emotion/react"),
  }

  return config
}

[hasparus]

+1 to the idea about updating. I mean, any stable version should work, but old alpha or rc might be problematic.

[cmavelis]

ok we're updated and working without rawColors! 🎉 Here's how to implement that code snippet you sent in current versions of Storybook (alongside the rest of my config):
.storybook/main.js:

const path = require('path')

module.exports = {
  "webpackFinal": (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      "@emotion/core": path.resolve("node_modules/@emotion/react"),
      "@emotion/styled": path.resolve("node_modules/@emotion/styled"),
      "emotion-theming": path.resolve("node_modules/@emotion/react"),
    }
    return config
  },
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ]
}