Module Configuration

• Overview
• Accessing configuration
• Configuring a modifier
• Configuring a component
• Passing CSS to modules/components
• Dynamic utility values
• Special values

Overview

A module's default configuration is defined in a module JSON file (e.g. ui/modules/accordion/accordion.json) and can be modified at each level up-to the app level, with higher levels taking precedence:

• {module}.json (lowest precedence)
• theme.json
• UI.json
• app.json (highest precedence)

{module}.json

To edit a module's default configuration, change the values within its JSON file (e.g. ui/modules/accordion/accordion.json):

{
    "accordion": {
        ...
    }
}

theme.json

To edit a module for a certain theme, pass the modified values within your theme's JSON file (e.g. ui/themes/One-Nexus/theme.json):

{
    "theme": {
        "accordion": {
            ...
        }
    }
}

UI.json

To enforce module configurations for all themes, pass the values within your UI's JSON file (e.g. ui/ui.json):

{
    "ui": {
        "modules": {
            "accordion": {
                ...
            }
        }
    }
}

app.json

To enforce module configurations for all UIs, pass the values to your app's JSON file (e.g. app.json):

{
    "app": {
        "ui": {
            "modules": {
                "accordion": {
                    ...
                }
            }
        }
    }
}

Accessing configuration

A module's configuration is accessible from its corresponding .scss, .js and .jsx files:

Scss

Use the this() helper function to get a module's configuration value:

@import 'accordion.json';

@mixin accordion($custom: custom('accordion')) {

    // Configuration
    $accordion: config($accordion, $custom);

    // `$accordion` returns the merged configuration from all levels

    $value: this('key') // equivalent to `$value: map-get($accordion, 'key')`;

    ...

}

JS

import * as UI from '../../../ui';
import defaults from './accordion.json';

function accordion(custom) {

    const TARGET = UI.getTarget('accordion', defaults, custom);

    UI.Synergy(TARGET, (accordion, options) => {

        // `options` returns the merged configuration from all levels

    }, defaults, custom, UI.evalConfig);

    ...

}

JSX

import defaults from './accordion.json';

class Accordion extends React.Component {

    componentWillMount() {
        this.config = global.UI.config.accordion;
    }

    render() {
        // `this.config` returns the merged configuration from all levels

        ...
    }

}