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

2 Likes
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

2 Likes
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
4

Another approach would be to include the BS variables in the editor.scss

@import "~bootstrap/scss/functions";
@import 'config/variables';
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/variables-dark";
@import "~bootstrap/scss/maps";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/root";

and the use the global CSS variables in bud.config.js

typography: {
        fontWeight: "var(--bs-body-font-weight)",
        lineHeight: "var(--bs-body-line-height)",
        fluid: true,
        fontSize: "var(--bs-body-font-size)"
      }
5 Likes
5

Thanks for sharing this approach/solution.