Theming

[DanRader]

– updated a number of value names
– restructured brand values to accept theming updates
– Added JS function to calculate brand colors from single colors

[Proof757]

Nice job man! Left some thoughts, at long last 🙏🏿

[Proof757]

I already spoiled the surprise but I took a stab at DRYing these functions up. Here's where I landed:

import chroma from 'chroma-js';

const { style } = document.documentElement;

function generateGradientArray(color) {
    const gradientArray = [0.9, 0.7, 0.6, 0.4, 0.2];

    const morning = gradientArray.map((val) => (
        chroma.mix(color, 'white', val, 'hsl').hex()
    ));

    const noon = chroma(color).hex();

    const evening = gradientArray.reverse().map((val) => (
        chroma.mix(color, 'black', val, 'hsl').hex()
    ));

    const gradientStart = chroma.mix(color, 'white', 0.2, 'hsl').alpha(0.2).css();
    const gradientEnd = chroma.mix(color, 'white', 0.2, 'hsl').alpha(0).css();

    return [...morning, noon, ...evening, gradientStart, gradientEnd];
}

function setTextColors(color, themeName = 'primary') {
    const textColor = '#292632';
    const textReverse = '#FFFFFF';
    const isTextColorAcceptable = chroma.contrast(textColor, color) > 4.5;

    style.setProperty(
        `--xpl-color-text-${themeName}-lm`,
        isTextColorAcceptable ? textColor : textReverse,
    );
    style.setProperty(
        `--xpl-color-text-${themeName}-dm`,
        isTextColorAcceptable ? textReverse : textColor,
    );
}

function setCustomProperties(colorSetName, gradientMode, colorSet) {
    const [gradientEnd, gradientStart, ...setArray] = colorSet.reverse();

    setArray.reverse().forEach((hexDex, idx) => {
        const int = idx === 0 ? 50 : idx * 100;
        style.setProperty(`--xpl-color-${colorSetName}${int}`, hexDex);
    });

    style.setProperty(`--xpl-color-brand-${colorSetName}-gradient-start-${gradientMode}`, gradientStart);
    style.setProperty(`--xpl-color-brand-${colorSetName}-gradient-end-${gradientMode}`, gradientEnd);
}

export {
    generateGradientArray,
    setCustomProperties,
    setTextColors,
};

If the color in question is '#6923f4', these function set value to the following variables:

'--xpl-color-text-primary-lm' '#FFFFFF'
'--xpl-color-text-primary-dm' '#292632'

'--xpl-color-primary50' '#f0e9fe'
'--xpl-color-primary100' '#d2bdfc'
'--xpl-color-primary200' '#c3a7fb'
'--xpl-color-primary300' '#a57bf8'
'--xpl-color-primary400' '#874ff6'
'--xpl-color-primary500' '#6923f4'
'--xpl-color-primary600' '#4e0bd5'
'--xpl-color-primary700' '#3b089f'
'--xpl-color-primary800' '#27056a'
'--xpl-color-primary900' '#1d0450'
'--xpl-color-primary1000' '#0a011b'

'--xpl-color-brand-primary-gradient-start-lm' 'rgba(135,79,246,0.2)'
'--xpl-color-brand-primary-gradient-end-lm' 'rgba(135,79,246,0)'

See anything wrong with these vars man?

[Proof757]

Should there be light-mode gradients as well?

[Proof757]

Should there be a light-mode text variable as well?

[Proof757]

This file shouldn't be committed. Do you mind adding this to .gitignore: npm-debug.log*, and deleting this file?

[Proof757]

Let's add chroma-js officially man 😎

[fernandogelin]

@Proof757 wondering if we should do something about this PR?