How to extend primitive tokens from a current theme? Nuxt3

[lucasdavidferrero]

I'd like to extend the primitive colors of the Aura theme. I need to add jewel and lima since those are the colors of our brand. I'm using Nuxt3.

I've tried to create a preset from Aura but I don't know how to extend the primitive colors.

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

const McHogarPreset = definePreset(Aura, {
    
    semantic: {
        primary: {
            50: '{jewel.50}',
            100: '{jewel.100}',
            200: '{jewel.200}',
            300: '{jewel.300}',
            400: '{jewel.400}',
            500: '{jewel.500}',
            600: '{jewel.600}',
            700: '{jewel.700}',
            800: '{jewel.800}',
            900: '{jewel.900}', // This should be trated as primary.color token
            950: '{jewel.950}'
        },
        secondary: {
            50: '{lima.50}',
            100: '{lima.100}',
            200: '{lima.200}',
            300: '{lima.300}',
            400: '{lima.400}',
            500: '{lima.500}',
            600: '{lima.600}',
            700: '{lima.700}',
            800: '{lima.800}',
            900: '{lima.900}',
            950: '{lima.950}'
        }
    }
});

export default {
    preset: McHogarPreset,
    options: {
        darkModeSelector: '.p-dark'
    }
};

We need to extend the color palette with this new colors:

      jewel: {
            50: '#ecfff5',
            100: '#d2ffeb',
            200: '#a8ffd7',
            300: '#65ffba',
            400: '#1bff94',
            500: '#00f975',
            600: '#00d05d',
            700: '#00a24c',
            800: '#007e41',
            900: '#006738',
            950: '#003b1d'
        },
        lima: {
            50: '#f5ffe6',
            100: '#e8fdca',
            200: '#d3fb9b',
            300: '#b4f561',
            400: '#96ea31',
            500: '#71c611',
            600: '#5aa60a',
            700: '#457e0d',
            800: '#396410',
            900: '#315413',
            950: '#172f04'
        }

How to achieve this?

[j0rgedev]

Hey @lucasdavidferrero. To achieve it, you could try this preset:

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

const McHogarPreset = definePreset(Aura, {
    // I'm adding new primitive colors based on the ones you need
   // You could also override the default colors: https://primevue.org/theming/styled/#colors
  // e.g you could set your lima colors in the green primitive layer
    primitive: {
        jewel: {
            50: '#ecfff5',
            100: '#d2ffeb',
            200: '#a8ffd7',
            300: '#65ffba',
            400: '#1bff94',
            500: '#00f975',
            600: '#00d05d',
            700: '#00a24c',
            800: '#007e41',
            900: '#006738',
            950: '#003b1d',
        },
        lima: {
            50: '#f5ffe6',
            100: '#e8fdca',
            200: '#d3fb9b',
            300: '#b4f561',
            400: '#96ea31',
            500: '#71c611',
            600: '#5aa60a',
            700: '#457e0d',
            800: '#396410',
            900: '#315413',
            950: '#172f04',
        },
    },
    semantic: {
        primary: {
            50: '{jewel.50}',
            100: '{jewel.100}',
            200: '{jewel.200}',
            300: '{jewel.300}',
            400: '{jewel.400}',
            500: '{jewel.500}',
            600: '{jewel.600}',
            700: '{jewel.700}',
            800: '{jewel.800}',
            900: '{jewel.900}',
            950: '{jewel.950}'
        },
        secondary: {
            50: '{lima.50}',
            100: '{lima.100}',
            200: '{lima.200}',
            300: '{lima.300}',
            400: '{lima.400}',
            500: '{lima.500}',
            600: '{lima.600}',
            700: '{lima.700}',
            800: '{lima.800}',
            900: '{lima.900}',
            950: '{lima.950}'
        },
        colorScheme: {
          light: {
            primary: {
              color: '{primary.900}', // as you said, primary.900 should be your primary color
              ... // check these presets to expand yours: https://primevue.org/theming/styled/#presets
            }
         }
       }
});

export default {
    preset: McHogarPreset,
    options: {
        darkModeSelector: '.p-dark'
    }
};

Hope it helps