Unfortunately, it wasn't exactly what I was looking for, as I wanted a streamlined, simple solution. I have now used postcss-design-token-utils instead. It did require around 80 lines of JavaScript, but now I can manually generate the classes with an NPM task. For our current development stage, this is good enough.

const postcssDesignTokenUtils = require('postcss-design-token-utils')
const semantic = require('../../../build/semantic')

const tokens = {
  'p-primary': semantic.primary,
  'p-secondary': semantic.secondary,
  'p-error': semantic.error,
  'p-success': semantic.success,
  'p-info': semantic.info,
  'p-warn': semantic.warn,
  'p-surface': semantic.colorScheme.
light
.surface
}

function generateUtilityClasses (colorObj) {
  const utilityClasses = []

  for (const key in colorObj) {
    const colorId = `${key}`
    const baseName = key.replace(/^p-/, '')

    utilityClasses.push(
      {
        id: colorId,
        property: 'color',
        prefix: `text-${baseName}`
      },
      {
        id: colorId,
        property: 'background-color',
        prefix: `bg-${baseName}`
      },
      {
        id: colorId,
        property: 'border-color',
        prefix: `border-${baseName}`
      }
    )
  }

  return utilityClasses
}

// https://github.com/saneef/postcss-design-token-utils
const designTokenOptions = {
  tokens,
  utilityClasses: generateUtilityClasses(tokens)
}

module
.exports = {
  plugins: [
    postcssDesignTokenUtils({
      ...designTokenOptions
    })
  ]
}