Not able to customise Zeno theme colours

[Akbaruddin Kashif]

Reason for this issue
I started a new Factor CMS project and have been trying to replace tailwind colours to match my theme but it's not working.

Steps to Reproduce

1. Create Factor CMS project

npx create-factor-app

2. Select Zeno Theme
3. Try replacing colours

// ./src/tailwind.config.js
export default {
    tailwind: {
        theme: {
            extend: {
                colors: {
                    purple: {
                        100: '#1F6BB2',
                        200: '#1C5E9C',
                        300: '#185186',
                        400: '#144471',
                        500: 'var(--color-primary, #10375B)',
                        600: '#0C2A45',
                        700: '#081D30',
                        800: '#05101A',
                        900: '#010304'
                    },
                },
            },
            fill: (theme) => ({
                purple: theme("colors.gray.500"),
            }),
        },
    },
}

[Andrew R. Powers]

@finestpixels know what's happening here?

[Akbaruddin Kashif]

@finestpixels - could you please help us out?

[Raymond L. Aleman]

@mr-kashif You have to restart Factor for the tailwind color variables to regenerate/update

[Akbaruddin Kashif]

@mr-kashif You have to restart Factor for the tailwind color variables to regenerate/update

I've tried that. It doesn't work.

[Raymond L. Aleman]

Right now, you're customizing the fill utilities Tailwind generates, not the Zeno theme colors. You can learn more about that here.

Zeno theme colors are mostly set with tailwind classes (e.g. bg-purple-700) and others on the factor-styles.less file via css variables (e.g. --color-primary: #6515dd; ).

[Akbaruddin Kashif]

Right now, you're customizing the fill utilities Tailwind generates, not the Zeno theme colours. You can learn more about that here.

Zeno theme colors are mostly set with tailwind classes (e.g. bg-purple-700) and others on the factor-styles.less file via css variables (e.g. --color-primary: #6515dd; ).

If I'm extending those colours with the same name shouldn't it replace the class properties?