👨🏽‍🔬 feature: theme.json handlers

[kellymears]

I had to do something fun.

A HUGE part of the size of this PR from me converting the theme.json schema to typescript declarations.

Overview

This is included as part of @roots/sage. It adds some support for configuring theme.json using values coming from other parts of the build. Using these functions will cause a new theme.json to be written on every build.

Use: supply bud.themeJson with a callback supplying custom values. This will be used to emit theme.json in the project root after successful compilation:

bud.themeJson((theme) =>
    theme
        .set('typography.dropCap', true)
        .set('color.customGradient', false)
        .set('color.custom', false)
        .set('color.link', false),
)

If you don't want the container API you can request the raw object:

bud.themeJson((theme) => ({...theme}), true)

If you use tailwindcss you can also use bud.useTailwindColors in tandem with this:

bud.themeJson((theme) =>
    theme
        .set('typography.dropCap', true)
        .set('color.customGradient', false)
        .set('color.custom', false)
        .set('color.link', false),
)
.useTailwindColors()

Which will grab the colors for theme.json from theme.extends.colors in tailwind.config.js. It supports color variants or a simple mapping.

• The name is the titlecased slug.
• If a variant is named default the variant key will be discarded.
• For instance: {eevee: {default: '#000'}} will be get the name Eevee and the slug will be eevee.

Example input/output:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        oceanspray: '#000',
        cranraz: {
          default: '#001',
          500: '#002',
          900: '#003',
        },
      },
    },
  },
 // ...
};

{
  "settings": {
    "color": {
      "palette": [
        {
          "name": "Oceanspray",
          "slug": "oceanspray",
          "color": "#000"
        },
        {
          "name": "Cranraz-500",
          "slug": "cranraz-500",
          "color": "#002"
        },
        {
          "name": "Cranraz-900",
          "slug": "cranraz-900",
          "color": "#003"
        },
        {
          "name": "Cranraz",
          "slug": "cranraz",
          "color": "#001"
        }
      ]
    }
  }
}

If one were to want more control they can export the functions used to do the color mapping from @roots/sage and handle it themselves:

const config = require('./tailwind.config.js')
const adapter = require('@roots/sage/theme/tailwind')
const colors = config.theme.extend.colors

// manipulate colors before passing them on
let  palette  = adapter.transformPalette(colors)
// ...do stuff with palette
bud.themeJson(theme => theme.set('color.palette', palette))

/// OR, overwrite the reducer
adapter.toThemeArray = ((a, c) => /* reducto */, [])
bud.themeJson(theme => theme.set('color.palette', adapter.transformPalette(colors))

refers: none
closes: none

Type of change

• MINOR: feature

This PR includes breaking changes to the following core packages:

• none

This PR includes breaking changes to the follow extensions:

• none

Dependencies

Adds

• none

Removes

• none

[retlehs]

🔥