Support for HSL colors, discussion arround lighten/darken utilities

[paeolo]

Hi,
Really like the vanilla-extract here, so happy to get rid of preprocessors like sass or less in favor of typescript:), so first thanks for your work.

One thing that I miss a bit is the possibility to use the lighten or the darken css utilities. I know it's because css variables are not preprocessed but still there is a way to do it with HSL colors.

The end result would be something like that:

vars.css.ts

const colors = {
  success: '#32b643',
}

export default createGlobalTheme(':root', {
  colors,
});

button.css.ts

import { styleVariants } from '@vanilla-extract/css';

import vars from './vars.css';

// EDIT: I FORGOT THAT LINE
const { colors } = vars;

export const variant = styleVariants({
  primary: {
    background: colors.success,
  },
  secondary: {
    background: lighten(colors.success, 0.15),
  }
});

The idea would be to convert #32b643 internally to it's HSL representation and then handle this representation at the vanilla-extract level, ie. when you access colors.success in a .css.ts file it applies the hsl() css functional notation to it. When you use lighten instead of applying the hsl() functional it would first modify the light for instance.

Not sure wether it's a good idea to go this way:)

Any thought on how to use lighten and/or darken utilities in your .css.ts styles ?

[mattcompiles]

I'm not really sure what you're suggesting. The example you gave references colors.success, but there is no colors variable within that file? Assuming you meant to write vars.success then this wouldn't be possible as its value is a string reference to a CSS Variable. You don't know the the runtime value of the variable so you can't perform any operations on it. If you want to create lighter variants of colors in your theme, you'll need to create them at the time you create the theme.

e.g.

const colors = {
  success: '#32b643',
}

export default createGlobalTheme(':root', {
  colors: {
    success: colors.success,
	successLight: lighten(colors.success, 0.15),
  }
});

[paeolo]

Sorry I forgot one line in my example that made it confusing. Just edit the button.css.ts file to correct that (just below the 'edit' comment)

[paeolo]

you'll need to create them at the time you create the theme

I get it, and that's fine for me now, but you could also have something like in this answer https://stackoverflow.com/questions/55329996/how-to-create-color-shades-using-css-variables-similar-to-darken-of-sass were you have a css variable to tune the lightness. maybe this could be integrated in vanilla-extract to have dynamic lightness control