How to replace `palette`

[esoubiran-aneo]

Hi,

I'm using Pinceau through Docus and from v1.8.x to v1.9.x, the palette function disappeared. How can I convert my code?

import { defineTheme, palette } from 'pinceau'

export default defineTheme({
  color: {
    primary: palette('orange')
  }
})

[SGAMERyu]

Hi,

I'm using Pinceau through Docus and from v1.8.x to v1.9.x, the palette function disappeared. How can I convert my code?

import { defineTheme, palette } from 'pinceau'

export default defineTheme({
  color: {
    primary: palette('orange')
  }
})

In the new version, Pinceau has removed the util export of the palette. You can refer to https://github.com/Tahul/pinceau/blob/6f92a673469cb71f8af3530e75015cc14b56b533/src/utils/palette.ts for the usage of token design.

I guess the author's @Tahul initial design was probably intended to validate a portion of the design and the implemented utility functions, which may not be part of the official API provided by Pinceau.

[esoubiran-aneo]

Yes, I replace it with

export default defineTheme({
  color: {
    primary: {
      50: '#fff7ed',
      100: '#ffedd5',
      200: '#fed7aa',
      300: '#fdba74',
      400: '#fb923c',
      500: '#f97316',
      600: '#ea580c',
      700: '#c2410c',
      800: '#9a3412',
      900: '#7c2d12',
    }
  }
})

But more documentation about this could be awesome

[igorjacauna]

Maybe using https://github.com/unjs/theme-colors?

[Barbapapazes]

Whoo thanks 👀

[igorjacauna]

Another approach: https://github.com/nuxt-modules/design-tokens/blob/main/src/palette.ts

[esoubiran-aneo]

The question have now an anwser.