{"id":13673076,"url":"https://github.com/roots/palette-webpack-plugin","last_synced_at":"2025-04-06T20:12:37.132Z","repository":{"id":45633879,"uuid":"235210827","full_name":"roots/palette-webpack-plugin","owner":"roots","description":"Generate a JSON file containing your color palette from existing Sass maps and/or Tailwind.","archived":false,"fork":false,"pushed_at":"2024-11-13T11:23:45.000Z","size":86,"stargazers_count":46,"open_issues_count":5,"forks_count":7,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-30T19:07:40.434Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/roots.png","metadata":{"funding":{"github":"roots"},"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-20T22:27:32.000Z","updated_at":"2024-11-13T11:23:49.000Z","dependencies_parsed_at":"2024-12-14T13:32:20.197Z","dependency_job_id":"4540d8e9-104a-4396-8190-7a3eca4fa100","html_url":"https://github.com/roots/palette-webpack-plugin","commit_stats":{"total_commits":23,"total_committers":7,"mean_commits":"3.2857142857142856","dds":0.4347826086956522,"last_synced_commit":"842d6cfdc73d5cb652a382cfc748b53fc53ecc2b"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roots%2Fpalette-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roots%2Fpalette-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roots%2Fpalette-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roots%2Fpalette-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/roots","download_url":"https://codeload.github.com/roots/palette-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247543593,"owners_count":20955865,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T10:00:24.166Z","updated_at":"2025-04-06T20:12:37.109Z","avatar_url":"https://github.com/roots.png","language":"JavaScript","funding_links":["https://github.com/sponsors/roots","https://www.patreon.com/rootsdev","https://www.paypal.me/rootsdev"],"categories":["Packages","JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://roots.io\"\u003e\n    \u003cimg alt=\"Palette Webpack Plugin\" src=\"https://cdn.roots.io/app/uploads/logo-roots.svg\" width=\"150\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"LICENSE.md\"\u003e\n    \u003cimg alt=\"MIT License\" src=\"https://img.shields.io/github/license/roots/palette-webpack-plugin?color=%23525ddc\u0026style=flat-square\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://www.npmjs.com/package/palette-webpack-plugin\"\u003e\n    \u003cimg alt=\"Version\" src=\"https://img.shields.io/npm/v/palette-webpack-plugin?style=flat-square\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://www.npmjs.com/package/palette-webpack-plugin\"\u003e\n    \u003cimg alt=\"Total Downloads\" src=\"https://img.shields.io/npm/dt/palette-webpack-plugin?style=flat-square\" /\u003e\n  \u003c/a\u003e\n\n   \u003ca href=\"https://github.com/roots/palette-webpack-plugin/actions\"\u003e\n    \u003cimg alt=\"Build Status\" src=\"https://img.shields.io/github/workflow/status/roots/palette-webpack-plugin/Main?style=flat-square\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://twitter.com/rootswp\"\u003e\n    \u003cimg alt=\"Follow Roots\" src=\"https://img.shields.io/twitter/follow/rootswp.svg?style=flat-square\u0026color=1da1f2\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eAutomatic Color Palette Generation\u003c/strong\u003e\n  \u003cbr /\u003e\n  Built with ❤️\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://roots.io\"\u003eOfficial Website\u003c/a\u003e | \u003ca href=\"https://www.patreon.com/rootsdev\"\u003eDonate\u003c/a\u003e\n\u003c/p\u003e\n\n## Supporting\n\nPalette Webpack Plugin is an open source project and completely free to use.\n\nHowever, the amount of effort needed to maintain and develop new features and products within the Roots ecosystem is not sustainable without proper financial backing. If you have the capability, please consider donating using the links below:\n\n\u003cdiv align=\"center\"\u003e\n\n[![Donate via Patreon](https://img.shields.io/badge/donate-patreon-orange.svg?style=flat-square\u0026logo=patreon)](https://www.patreon.com/rootsdev)\n[![Donate via PayPal](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square\u0026logo=paypal)](https://www.paypal.me/rootsdev)\n\n\u003c/div\u003e\n\n## Overview\n\nPalette Webpack Plugin allows you to generate a `JSON` file during the build process containing your color palette from existing [Sass maps](https://sass-lang.com/documentation/values/maps) and/or [Tailwind](https://tailwindcss.com).\n\nWhile we hope someone may find this useful for other purposes, this plugin and it's output format were specifically built for handling WordPress' Gutenberg [`editor-color-palette`](https://developer.wordpress.org/block-editor/developers/themes/theme-support/) theme support feature.\n\n## Features\n\n- Built to take the headache out of maintaining the WordPress editor palette.\n- Merge, filter, and sort Sass color maps and your Tailwind theme colors with a configurable priority.\n- Uses computer vision algorithms to detect and deprioritize grayscale colors to the bottom of the list.\n- Gracefully loads Sass and/or Tailwind support as needed.\n\n## Getting Started\n\nTo begin, you'll need to install `palette-webpack-plugin`:\n\n```bash\n$ yarn add palette-webpack-plugin -D\n```\n\nThen add the plugin to your `webpack` config. Here is an example containing the default values:\n\n**webpack.config.js**\n\n```js\nconst PalettePlugin = require('palette-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new PalettePlugin({\n      output: 'palette.json',\n      blacklist: ['transparent', 'inherit'],\n      priority: 'tailwind',\n      pretty: false,\n      tailwind: {\n        config: './tailwind.config.js',\n        shades: false,\n        path: 'colors',\n      },\n      sass: {\n        path: 'resources/assets/styles/config',\n        files: ['variables.scss'],\n        variables: ['colors'],\n      },\n    }),\n  ],\n};\n```\n\nIf you are using [Laravel Mix](https://laravel-mix.com), you may use the Mix helper like so:\n\n**webpack.mix.js**\n\n```js\nconst mix = require('laravel-mix');\nrequire('palette-webpack-plugin/src/mix');\n\nmix.palette({ ... });\n```\n\n## Usage\n\nThe plugin's signature:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  plugins: [new PalettePlugin(options)],\n};\n```\n\n**webpack.mix.js**\n\n```js\nmix.palette(options);\n```\n\n### Options\n\n|       Name        |            Type            |              Default               | Description                                                                                                                                                                                                                                                                                  |\n| :---------------: | :------------------------: | :--------------------------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n|     `output`      |         `{String}`         |          `'palette.json'`          | The filename and path relative to the public path.                                                                                                                                                                                                                                           |\n|    `blacklist`    |         `{Array}`          |    `['transparent, 'inherit']`     | Globs to ignore colors.                                                                                                                                                                                                                                                                      |\n|    `priority`     |         `{String}`         |            `'tailwind'`            | Priority when merging non-unique colors while using both Tailwind and Sass.                                                                                                                                                                                                                  |\n|     `pretty`      |        `{Boolean}`         |              `false`               | Use pretty formatting when writing the JSON file.                                                                                                                                                                                                                                            |\n|    `tailwind`     |         `{Object}`         |             `{ ... }`              | Set Tailwind options. (See below)                                                                                                                                                                                                                                                            |\n| `tailwind.config` |         `{String}`         |      `'./tailwind.config.js'`      | Path to the Tailwind configuration file relative to the project root path.                                                                                                                                                                                                                   |\n| `tailwind.shades` | `{Object\\|Array\\|Boolean}` |              `false`               | While set to `true`, every color shade (`100-900`) will be generated. When set to `false`, only `500` will be used. Optionally, you may define either an array of shades as strings `['50', '100', '500']` or an object containing shade labels `{50: 'Lightest', 100: 'Lighter', 500: ''}`. |\n|  `tailwind.path`  |         `{String}`         |             `'colors'`             | Path to Tailwind config values for palette colors in dot notation. Uses Tailwind's color palette `theme('colors')` per default.                                                                                                                                                              |\n|      `sass`       |         `{Object}`         |             `{ ... }`              | Set Sass options. (See below)                                                                                                                                                                                                                                                                |\n|    `sass.path`    |         `{String}`         | `'resources/assets/styles/config'` | Path to Sass variable files relative to the project root path.                                                                                                                                                                                                                               |\n|   `sass.files`    |         `{Array}`          |        `['variables.scss']`        | An array of files to search for the defined Sass variables.                                                                                                                                                                                                                                  |\n| `sass.variables`  |         `{Array}`          |            `['colors']`            | An array of Sass variables (with or without `$`) to use for the color palette.                                                                                                                                                                                                               |\n\n### WordPress\n\n#### Vanilla WordPress\n\nThe general idea is to [`file_get_contents()`](https://www.php.net/manual/en/function.file-get-contents.php) and [`json_decode()`](https://www.php.net/manual/en/function.json-decode.php) the palette and pass it to `add_theme_support('editor-color-palette', $palette)`.\n\nHere is an example of doing that:\n\n```php\n/**\n * Register the initial theme setup.\n *\n * @return void\n */\nadd_action('after_setup_theme', function () {\n    /**\n     * Enable theme color palette support\n     * @link https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-color-palettes\n     */\n    add_theme_support('editor-color-palette', json_decode(file_get_contents('path/to/palette.json'), true));\n}, 20);\n```\n\n#### Sage 10\n\nWhen using Sage 10, you can take advantage of the `asset()` helper to fetch the palette. A good place for doing this would be in `setup.php` with the other `add_theme_support()` options.\n\n```php\n/**\n * Enable theme color palette support\n * @link https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-color-palettes\n */\nadd_theme_support('editor-color-palette', json_decode(asset('palette.json')-\u003econtents(), true));\n```\n\n## Output Example\n\n```scss\n$black: '#111';\n\n$colors: (\n  'red': '#f54242',\n  'black': $black,\n  'not-actually-black': '#42f596',\n  'random-gray': '#858c89',\n  'white': '#fff',\n  'blue': '#4287f5',\n  'orange': '#f5b342',\n);\n```\n\nwould be transformed to:\n\n```json\n[\n  { \"name\": \"Blue\", \"slug\": \"blue\", \"color\": \"#4287f5\" },\n  {\n    \"name\": \"Not Actually Black\",\n    \"slug\": \"not-actually-black\",\n    \"color\": \"#42f596\"\n  },\n  { \"name\": \"Orange\", \"slug\": \"orange\", \"color\": \"#f5b342\" },\n  { \"name\": \"Red\", \"slug\": \"red\", \"color\": \"#f54242\" },\n  { \"name\": \"Black\", \"slug\": \"black\", \"color\": \"#111\" },\n  { \"name\": \"Random Gray\", \"slug\": \"random-gray\", \"color\": \"#858c89\" },\n  { \"name\": \"White\", \"slug\": \"white\", \"color\": \"#fff\" }\n]\n```\n\n## Contributing\n\nContributions are welcome from everyone. We have [contributing guidelines](https://github.com/roots/guidelines/blob/master/CONTRIBUTING.md) to help you get started.\n\n## Todo\n\n- [ ] Add tests.\n- [ ] Split into components.\n- [ ] Convert to TypeScript?\n\n## Community\n\nKeep track of development and community news.\n\n- Participate on the [Roots Discourse](https://discourse.roots.io/)\n- Follow [@rootswp on Twitter](https://twitter.com/rootswp)\n- Read and subscribe to the [Roots Blog](https://roots.io/blog/)\n- Subscribe to the [Roots Newsletter](https://roots.io/subscribe/)\n- Listen to the [Roots Radio podcast](https://roots.io/podcast/)\n\n## License\n\nPalette Webpack Plugin is provided under the [MIT License](https://github.com/roots/palette-webpack-plugin/blob/master/LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froots%2Fpalette-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Froots%2Fpalette-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froots%2Fpalette-webpack-plugin/lists"}