roots / palette-webpack-plugin

Generate a JSON file containing your color palette from existing Sass maps and/or Tailwind.
MIT License
46 stars 7 forks source link

Allow descriptive Tailwind shades, including DEFAULT #11

Closed joshuafredrickson closed 3 years ago

joshuafredrickson commented 3 years ago

Descriptive shades use the value solely as the name without the key. For example midnight.light is named Light and any other colors with the same shade are dropped in palette.json.

When using Tailwind's DEFAULT shade, the slug contains -DEFAULT, which is inconsistent with Tailwind's usage.

tailwind.config.js

...
colors: {
  midnight: {
    DEFAULT: '#21213c', // DEFAULT is used by Tailwind to define .text-midnight
    light: '#30304b',
  },
  grass: {
    DEFAULT: '#8cc64b',
    light: '#9bd55a',
  },
},
...

Before:

[
  { "name": "Default", "slug": "midnight-DEFAULT", "color": "#21213c" },
  { "name": "Light", "slug": "midnight-light", "color": "#30304b" }
]

After:

[
  { "name": "Grass (Default)", "slug": "grass", "color": "#8cc64b" },
  { "name": "Grass (Light)", "slug": "grass-light", "color": "#9bd55a" },
  { "name": "Midnight (Default)", "slug": "midnight", "color": "#21213c" },
  { "name": "Midnight (Light)", "slug": "midnight-light", "color": "#30304b" }
]