Skip to content

Instantly share code, notes, and snippets.

@alexstandiford
Created August 27, 2021 17:54
Show Gist options
  • Save alexstandiford/c4fbd990676a7511418f2e669c5be592 to your computer and use it in GitHub Desktop.
Save alexstandiford/c4fbd990676a7511418f2e669c5be592 to your computer and use it in GitHub Desktop.
WordPress theme.json that extends Tailwind CSS configs
const fs = require( 'fs' )
const themeJson = fs.readFileSync( './theme.json' )
const theme = JSON.parse( themeJson )
const colors = theme.settings.color.palette.reduce( ( acc, item ) => {
const [color, number] = item.slug.split( '-' )
// If there is a number identifier, make this an object
if(undefined !== number) {
if ( !acc[color] ) {
acc[color] = {}
}
acc[color][number] = item.color
} else{
acc[color] = item.color
}
return acc
}, {} )
module.exports = {
theme: {
colors
}
}
{
"version": 1,
"settings": {
"color": {
"palette": [
{
"color": "#fffbeb",
"slug": "yellow-50",
"name": "Yellow 50"
},
{
"color": "#fef3c7",
"slug": "yellow-100",
"name": "Yellow 100"
},
{
"color": "#fde68a",
"slug": "yellow-200",
"name": "Yellow 200"
},
{
"color": "#fcd34d",
"slug": "yellow-300",
"name": "Yellow 300"
},
{
"color": "#fbbf24",
"slug": "yellow-400",
"name": "Yellow 400"
},
{
"color": "#f59e0b",
"slug": "yellow-500",
"name": "Yellow 500"
},
{
"color": "#d97706",
"slug": "yellow-600",
"name": "Yellow 600"
},
{
"color": "#b45309",
"slug": "yellow-700",
"name": "Yellow 700"
},
{
"color": "#92400e",
"slug": "yellow-800",
"name": "Yellow 800"
},
{
"color": "#78350f",
"slug": "yellow-900",
"name": "Yellow 900"
},
{
"color": "#fafaf9",
"slug": "gray-50",
"name": "Gray 50"
},
{
"color": "#f5f5f4",
"slug": "gray-100",
"name": "Gray 100"
},
{
"color": "#e7e5e4",
"slug": "gray-200",
"name": "Gray 200"
},
{
"color": "#d6d3d1",
"slug": "gray-300",
"name": "Gray 300"
},
{
"color": "#a8a29e",
"slug": "gray-400",
"name": "Gray 400"
},
{
"color": "#78716c",
"slug": "gray-500",
"name": "Gray 500"
},
{
"color": "#57534e",
"slug": "gray-600",
"name": "Gray 600"
},
{
"color": "#44403c",
"slug": "gray-700",
"name": "Gray 700"
},
{
"color": "#292524",
"slug": "gray-800",
"name": "Gray 800"
},
{
"color": "#1c1917",
"slug": "gray-900",
"name": "Gray 900"
},
{
"color": "#f8efee",
"slug": "red-50",
"name": "Red 50"
},
{
"color": "#f8dddc",
"slug": "red-100",
"name": "Red 100"
},
{
"color": "#f3aeac",
"slug": "red-200",
"name": "Red 200"
},
{
"color": "#ec7471",
"slug": "red-300",
"name": "Red 300"
},
{
"color": "#e84a46",
"slug": "red-400",
"name": "Red 400"
},
{
"color": "#E21B16",
"slug": "red-500",
"name": "Red 500"
},
{
"color": "#E21B16",
"slug": "red-600",
"name": "Red 600"
},
{
"color": "#9D1612",
"slug": "red-700",
"name": "Red 700"
},
{
"color": "#6f0f0c",
"slug": "red-800",
"name": "Red 800"
},
{
"color": "#410200",
"slug": "red-900",
"name": "Red 900"
},
{
"name": "Black",
"slug": "black",
"color": "#000000"
},
{
"name": "White",
"slug": "white",
"color": "#ffffff"
}
]
}
}
}
@borma425
Copy link

borma425 commented Jun 7, 2022

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment