Design System Configuration

Previous to version 2.3.0 all configurations were in src/config.json file of the design system. But since that version the configuration files are split up into src/fusion/config/*.json and src/config/*.json files.

This article will describe how it is setup and how to configure the design system properly.

Backward Compatibility

Content built with the old configuration setup (src/config.json) will continue to work as is. A manual update is required to split it up into individual files.

Files

Activator will read configuration from build/config.json, which is the merged configuration from the individual files. When configuration is updated via Activator (or if doing it manually), it will write to the files in src/config/ folder. These are the files that it will write to (they will be automatically generated if not available):

• app.json

  • General settings such as ‘developer mode’ etc

• responsive.json

  • Target resolutions and breakpoints

• colors.json

• menu.json

  • Menu configuration which is usually completely handled by Activator

• fonts.json

  • Custom fonts configuration to ensure fonts are available in the Activator UI

• shapes.json

  • SVG shapes that can be used via the ‘Shape’ component

• design-styles.json

  • Setting default styles of components

Build

In order to only have to load in a single file, the config JSON files are merged into build/config.json. This file is generated via the lib/config.js script and is also run locally when building the shared folder (npm run prod).

Configuration

In fusion.json you’ll find the configuration for how the config files should be built. This can be manually updated in case you’d like to add custom config files, but it’s best to leave the defaults alone as Activator expects those files.