Accessing multiple variables in a style

[torrinworx]

Say I have the following setup as a theme:

const theme = {
	primary: {
		$color: '#02CA9F',
	},
	secondary: {
		$color: '#CCCCCC',
	},
}

I would like to create a gradient between primary and secondary as the background color of a div, for example, which is possible:

export default Theme.use(theme => ({ children }) => {
    const primaryColor = theme('primary').vars('color');
    const secondaryColor = theme('secondary').vars('color');

    return <div style={{
        padding: '20px',
        background: Observer.all([primaryColor, secondaryColor]).map(([p, s]) => {
            return `linear-gradient(to top right, ${p}, ${s})`
        })
    }}>
        {children}
    </div>;
});

This requires a lot of work, could the syntax be improved for referencing style variables within the theme object so that we can do something like this? I was thinking it could look like this:

export default ({ children }) => {
    return <div style={{
        padding: '20px',
        background: `linear-gradient(to top right, primary_$color, secondary_$color)`
    }}>
        {children}
    </div>;
};

If not and the primary_ syntax is reserved for extends and theme=... that's fine. The currently functional method is not too clunky, but it would be worth adding some documentation for cases like this

[torrinworx]

I also noticed that this approach prevents transition from being initiated when it's event is triggered:

export default Theme.use(theme => ({ children }) => {
    const primaryColor = theme('primary').vars('color');
    const secondaryColor = theme('secondary').vars('color');

    return <div style={{
        transition: 'opacity 250ms ease-out, box-shadow 250ms ease-out, background-color 250ms ease-in-out, background-image 250ms ease-in-out, background 250ms ease-in-out', // Has no effect on backgroundImage transition when it updates.
        padding: '20px',
        backgroundImage: Observer.all([primaryColor, secondaryColor]).map(([p, s]) => {
            return `linear-gradient(to top right, ${p}, ${s})`
        })
    }}>
        {children}
    </div>;
});

[torrinworx]

https://stackoverflow.com/questions/17952468/css-background-gradient-transition-not-working

Ah forget about the transition issue, that seems to be a browser thing.

[Nefsen402]

Oh yeah, .vars() is only meant as an escape hatch when you're desperate. You can do this entirely within the theme:

const theme = {
   primary: {},
   secondary: {},

   primary_and: {
       &color_other: $color
   },
}

<div
   theme="primary_and_secondary"
   style={{background: `linear-gradient(to top right, $color, $color_other)`}}
>

Here, I defined an and selector, and used it to basically move the variable out of the way so that the secondary theme won't shadow it. Then I can reference them normally.