Defining default styling for Components

As a preliminary part of the upcoming Design System, is it possible to define default styling for components.

This can be accomplished by updating the src/design-styles.json in the Design System folder (shared/), with the desired default styles for the specific components.

After the update of the JSON file is done, then adding a new component in Activator Designer will be using the styles defined in the JSON file as default instead of the normal default values. I.e. using the JSON example below will render all newly added buttons as blue with white text.

{
  "components": [
    {
      "component": "fusion-button",
      "properties": [
        {
          "name": "background-color",
          "value": "rgba(0, 0, 255, 1)"
        },
        {
          "name": "color",
          "value": "rgba(255, 255, 255, 1)"
        }
      ]
    }
  ]
}

The styles defined in the design styles will be applied to the components if there aren’t any specific styles applied via the style panels in Activator. If there are no default styles defined for a property in the src/design-styles.json file, then it will use the default value defined in the property setup of the component.

How To Find Existing Default Values

Components are found in two places:

1. src/components/slide (custom components)

2. src/fusion/slide (standard components)

Inside the component’s index.js file, the properties of the component are defined, either directly or via property mixins. Here is an example:

class DocumentFooter extends applyMixins(FusionBase, [SlideComponentBase, Container, Display, Dimensions]) {
  static get properties() {
    const {
      top,
      left,
      width,
      height,
      opacity,
    } = super.properties;
    return {
      top: {
        ...top,
        value: '675px',
      },
      left: {
        ...left,
        value: '96px',
      },
      width: {
        ...width,
        value: '655px',
      },
      height: {
        ...height,
        value: '75px',
      },
      opacity,
    };
  }

In this custom component, most properties are imported from mixins (Container, Display, and Dimensions) but some are broken out to be specific (top, left, width, height, and opacity).

In order to find out what properties are possible, and their default values of them, please investigate the property mixins in src/fusion/mixins/props.

Here is an example of properties for links (src/fusion/mixins/props/link.js):

static get properties() {
      return {
        ...super.properties,
        'background-color': {
          type: String,
          fieldType: 'ColorPicker',
          propertyGroup: 'link',
          value: 'rgba(255, 255, 255, 0)',
        },
        color: {
          type: String,
          fieldType: 'ColorPicker',
          propertyGroup: 'link',
          value: 'rgba(0, 0, 0, 1)',
        },
        'active-background-color': {
          type: String,
          fieldType: 'ColorPicker',
          propertyGroup: 'link',
          value: 'rgba(221, 221, 221, 1)',
        },
        'active-color': {
          type: String,
          fieldType: 'ColorPicker',
          propertyGroup: 'link',
          value: 'rgba(255, 255, 255, 1)',
        },
      };
    }

So if the component you want to apply defaults for includes the link property mixin, you’ll be able to set styles for background-color, color, active-background-color, and active-color.