Define tokens from tailwind colors

[stafyniaksacha]

That would be a great to have utils to convert colors defined in tailwind format, like:

'flamingo': {
  DEFAULT: '#EF4444',
  50: '#FDEDED',
  100: '#FCDADA',
  200: '#F9B5B5',
  300: '#F58F8F',
  400: '#F26A6A',
  500: '#EF4444',
  600: '#E71414',
  700: '#B30F0F',
  800: '#800B0B',
  900: '#4C0707'
},

example from https://www.tailwindshades.com/

In a format exploitable with tailwind css variables: https://tailwindcss.com/docs/customizing-colors#using-css-variables

Pinceau have to store RGB or HSL values, without their function:

• RGB values: 255 115 179
• HSL values: 198deg 93% 60%

which could be defined like:

// tokens.config.ts
import { defineTheme, tailwindToRgb, tailwindToHsl } from 'pinceau'
import colors from 'tailwindcss/colors'

export default defineTheme({
  color: {
    // define only initial values using HSL
    muted: tailwindToHsl(colors.slate),

    // define initial value with additional themes variations using RGB
    primary: tailwindToRgb(colors.indigo, {
      dark: colors.orange,
    }),
  },
})

and used in tailwind config like:

// tailwind.config.cjs

module.exports = {
  theme: {
    extend: {
      colors: {
        // we may think about an utils to map values here
        muted: {
          50: 'hsl(var(--color-muted-50) / <alpha-value>)',
          100: 'hsl(var(--color-muted-100) / <alpha-value>)',
          200: 'hsl(var(--color-muted-200) / <alpha-value>)',
          300: 'hsl(var(--color-muted-300) / <alpha-value>)',
          400: 'hsl(var(--color-muted-400) / <alpha-value>)',
          500: 'hsl(var(--color-muted-500) / <alpha-value>)',
          600: 'hsl(var(--color-muted-600) / <alpha-value>)',
          700: 'hsl(var(--color-muted-700) / <alpha-value>)',
          800: 'hsl(var(--color-muted-800) / <alpha-value>)',
          900: 'hsl(var(--color-muted-900) / <alpha-value>)',
        },
        primary: {
          50: 'rgb(var(--color-primary-50) / <alpha-value>)',
          100: 'rgb(var(--color-primary-100) / <alpha-value>)',
          200: 'rgb(var(--color-primary-200) / <alpha-value>)',
          300: 'rgb(var(--color-primary-300) / <alpha-value>)',
          400: 'rgb(var(--color-primary-400) / <alpha-value>)',
          500: 'rgb(var(--color-primary-500) / <alpha-value>)',
          600: 'rgb(var(--color-primary-600) / <alpha-value>)',
          700: 'rgb(var(--color-primary-700) / <alpha-value>)',
          800: 'rgb(var(--color-primary-800) / <alpha-value>)',
          900: 'rgb(var(--color-primary-900) / <alpha-value>)',
        },
      },
    },
  },
}

[Tahul]

Would love to have a PR for that :)

[Barbapapazes]

And why not having, like in unocss, pre-defined tokens file? For exemple, a pre-defined config from the tailwind default?

[Tahul]

@Barbapapazes ; this is something I would love to have but sadly do not had the time to work on it myself yet!

This is the kind of stuff I would love to have contributions on! :)

[Barbapapazes]

Okkkk. Have you some docs or exemples on how this can be achieved?

[Tahul]

I would happily help; I would say the best way to start is to look over here: https://github.com/Tahul/pinceau/blob/main/playground/theme/tokens.config.ts

This is a basic tokens definition, if I wanted to replicate the theming from other tools, I would do follow the same structure of naming as the tool I'm trying to replicate.

For now, you can maybe make a PR that adds it to the playground, and then I can dig into it myself to check out how to distribute these preset files?

[Tahul]

By the way, you can start the playground locally with pnpm play or pnpm play:nuxt after installing the repo.