Help customizing Button via design token. v4

[jeremy-langevin-twc]

Hello, I am able to use design tokens to easily adjust the colors of my navigation item application wide. However, when attempting to do something similar with buttons, I am not able to accomplish this. Could someone help steer me in the right direction?

Version: ^4.0.0-beta.4
Using styled mode, here is my theme:

import { palette } from 'primevue/themes';

const primary = palette('#0092C3');
const secondary = palette('#86B240');

export default {
    primitive: {
        secondary: secondary
    },
    semantic: {
        primary: primary,
        colorScheme: {
            light: {
                navigation: {
                    item: {
                        focusBackground: '{primary.50}',
                        color: '{primary.color}',
                        focusColor: '{primary.hover.color}'
                    }
                },
                button: {
                    color: '{secondary.500}',
                    primary: {
                        color: '{secondary.500}',
                        backgroundColor: '{secondary.100}'
                    },
                    item: {
                        background: '{secondary.500}',
                        color: '{slate.500}'
                    }
                }
            }
        }
    }
};

[bobby-driggs]

Try nesting under a root property, as shown in their Lara theme?

https://github.com/primefaces/primevue/blob/e275149c3d2f74d6b8fcaff057f30023178a3102/components/lib/themes/lara/button/index.js#L35

[svwezel]

I also can't get it to work. (Also tried nesting under a root component)

[nickwall]

Hi.

I need to theme all elements to the corporate pallet. I've changed the default primary pallet, default hovers, focus, etc. all good.

But changing components, I'm struggling a bit with getting this to work.

I have followed the example as described in video here around the 10:15 mark:
https://www.youtube.com/watch?v=J3KFw5sih98

..whatever I do, I can not get it to work for me.

Below is an example of what I have done in my preset file to test various things.

components: {
button: {
borderRadius: '2.5rem', // works
labelFontWeight: 'bold', // works
paddingX: '3.5rem', // not work
paddingy: '1.5rem', // not work
primaryHoverColor: '{primary.100}', // not work
primaryColor: '#26b92e', // not work
primaryBackground: '#1e54c7', // not work
primaryBorderColor: '{primary.950}' // not work
}

At this stage, I just want to change the background colour of the primary button and change it's border so i understand how it all fits together.

If I inspect the element in dev tools, I can see that the config file sets the ":root" styles somehow and I can see the props I'm setting, e.g. primaryBackground: '#1e54c7', // not work getting transformed to --p-button-primary-background: #1e54c7' but it's getting disabled by a property superseding it.
--p-button-primary-background: var(--p-primary-color);

Has anyone got any idea how to get this to work to any avenues to explore?

Thanks in advance.

[j0rgedev]

Hey @nickwall could you please provide a reproduction or share your custom preset?

[nickwall]

Hi,

Thanks for getting back to me.

Here is the preset I am experimenting with. as mentioned, I can't get back ground color, border, etc. to change.

{
semantic: {
primary: {
50: '#f9e6f0',
100: '#f2cde1',
200: '#e6a3c7',
300: '#d97aaf',
400: '#cc5196',
500: '#bf287d',
600: '#a31f66',
700: '#86164f',
800: '#b02775',
900: '#590a2b',
950: '#2d0515'
}
},
components: {
button: {
borderRadius: '2.5rem', // works
labelFontWeight: 'bold', // works
paddingX: '3.5rem', // works
paddingY: '1.5rem', // works
primaryHoverColor: '{primary.100}', // not work
primaryColor: '#26b92e', // not work
primaryBackground: '#1e54c7', // not work
primaryBorderColor: '{primary.950}' // not work
}
}
}

[j0rgedev]

@nickwall I noticed that your preset isn't working as expected because it lacks the correct button component configuration. This issue is understandable as it's not yet well documented, but here's a way to handle it. All color-related settings for components should be structured in the following scheme:

   ...
   colorScheme: {
        light: {
            root: {
                primary: {
                    // set custom properties here. These can change depending on the component. (I'll later explain it)
                    ...
                },
            },
        },
        dark:
            root: {
                primary: {
                    // same as above
                    ...
                },
            },
    }

How to Define Component Properties

You might be wondering how to figure out which properties to set for each component. There are two main approaches:

• Theming Tab: Each component has a theming tab where you can see the design tokens that you need to set for your custom design. From my point of view, it's too generic, so I prefer the next approach.

• Source Code: Since the documentation is still lacking, the best approach is to look directly at the source code. You can find all the component schemas at this path: PrimeVue Component Schemas. This will give you a clear reference to set your custom design without errors.

To make it clearer, here's an example of how your custom preset should look when it's correctly structured:

import { definePreset } from '@primevue/themes';
import Aura from '@primevue/themes/aura';

const CustomPreset = definePreset(Aura, {
  semantic: {
    primary: {
      50: '#f9e6f0',
      100: '#f2cde1',
      200: '#e6a3c7',
      300: '#d97aaf',
      400: '#cc5196',
      500: '#bf287d',
      600: '#a31f66',
      700: '#86164f',
      800: '#b02775',
      900: '#590a2b',
      950: '#2d0515',
    },
  },
  components: {
    button: {
      borderRadius: '2.5rem',
      labelFontWeight: 'bold',
      paddingX: '3.5rem',
      paddingY: '1.5rem',
      colorScheme: {
        light: {
          root: {
            primary: {
              color: '#26b92e',
              hoverColor: '{primary.100}',
              background: '#1e54c7',
              borderColor: '{primary.950}',
            },
          },
        },
      },
    },
  },
});

export default CustomPreset;

This setup ensures that all your button components and color schemes are correctly placed in the right structure, which should make your preset function as expected. I hope I explained everything clearly. Let me know if you have any questions. 😁

[nickwall]

Great explanation. Got it working now. Have a great rest of your weekend.

[llamaza]

Server must be restarted or npm run build to see customization changes.

[dutchcube]

@j0rgedev Thanks a lot for your answer! Understanding it a lot more now.