Pollen
GithubShare on Twitter
  • Introducing Pollen
  • Basics
    • Getting started
    • Configuration
      • Configuring Modules
      • Extending Pollen
      • Media & Supports
    • Javascript
  • Modules
    • Typography
    • Layout
    • UI
    • Grid
    • Colors
  • Utils
    • defineConfig
    • fluid
    • shimmie
  • Misc
    • Motivations
    • Contributing
  • Migration Guide
    • v4 -> v5
Powered by GitBook
On this page
  • Custom modules
  • Configuration logic

Was this helpful?

Edit on GitHub
  1. Basics
  2. Configuration

Extending Pollen

Just as you can customise, extend, and overwrite the included modules in Pollen, you can also use Pollen to generate your own completely custom design system.

Custom modules

Every key in Pollen's modules configuration is turned into a family of CSS variables. The module name becomes the variable prefix, and a property is generated for each key in the module object.

For example this configuration would generate a new group of variables as --typeset-*

module.exports = {
  modules: {
    typeset: {
      '0': 'var(--scale-0)/1.3 var(--font-sans)',
      '1': 'var(--scale-1)/1.5 var(--font-sans)',
      '2': 'var(--scale-2)/1.4 var(--font-sans)',
      '3': 'var(--scale-3)/1.2 var(--font-sans)',
      '4': 'var(--scale-4)/1.1 var(--font-sans)',
    }
  }
}
:root {
  // The rest of Pollen's CSS
  --typeset-0: var(--scale-0)/1.3 var(--font-sans);
  --typeset-1: var(--scale-1)/1.5 var(--font-sans);
  --typeset-2: var(--scale-2)/1.4 var(--font-sans);
  --typeset-3: var(--scale-4)/1.1 var(--font-sans);
}

Configuration logic

Since Pollen's configuration is just JavaScript, you can run any logic you need to generate your design system configuration as long as it's synchronous.

The above example could be simplified with a makeTypeset() function like so

function makeTypeset(scale, lh) {
  return `var(--scale-${scale})/${lh} var(--font-sans)`;
}

module.exports = {
  modules: {
    typeset: {
      '0': makeTypeset(0, 1.3),
      '1': makeTypeset(1, 1.5),
      '2': makeTypeset(2, 1.4),
      '3': makeTypeset(3, 1.2),
      '4': makeTypeset(4, 1.1)
    }
  }
}

This can be especially powerful for things like generating opacities from HEX colours, value scales based on ratios, and more.

PreviousConfiguring ModulesNextMedia & Supports

Last updated 10 months ago

Was this helpful?