Hello everybody,
I was reading this section in the documentation => (Gutenberg | Sage Docs | Roots).
But it’s about tailwind, is there a way to use a Bootstrap 5 theme.json generator ?
Thanks in advance
Hello everybody,
I was reading this section in the documentation => (Gutenberg | Sage Docs | Roots).
But it’s about tailwind, is there a way to use a Bootstrap 5 theme.json generator ?
Thanks in advance
Not at this time. Throw a thumbs up reaction on this issue if you’re interested in seeing support for it: [request] theme.json generator for Bootstrap 5 projects · Issue #2159 · roots/bud · GitHub
I don’t think this is possible (at least, not without substantial work).
The reason we can do it with tailwind is because tailwind provides all of those values as a js object. It’s kind of what makes tailwind cool.
So, we have a clear path forward for taking the tailwind interface and mapping it to the interface wordpress expects:
But, bootstrap defines everything in scss, so we’d need to parse the scss files as strings first, which sounds awful.
You might be able to experiment with global values:
https://bud.js.org/extensions/bud-sass#global-values
Maybe something like:
const custom = {
name: `Custom`,
slug: `custom-color`,
color: `rgba(0, 0, 0, 1)`
}
bud.sass.registerGlobal([
`$theme-colors: ("${custom.slug}": ${custom.color});`,
])
bud.wpjson.set(`settings.color.palette`, [custom])
Which is a little weird but does let you define in one place.
Maybe split it out into an import?
// config/theme-values.js
export default {
colors: [
{name: `Custom`, slug: `custom-color`, color: `rgba(0,0,0,1)`},
]
}
import theme from './config/theme-values.js'
theme.colors.map(({slug, color, name}) => {
bud.sass.registerGlobal(`$theme-colors: ("${slug}": ${color});`)
bud.wpjson.set(`settings.color.palette`, (palette = []) => [...palette, {slug, color, name}])
})
I haven’t tested that or anything, but maybe it is helpful for you to get started thinking about this problem.