Bootstrap 5 theme.json generator

sage
1

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

1 Like
2

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

1 Like
3

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.

3 Likes