Style Classes for Components

You can create a defined list of styles that can be applied to your component by users.

Having a predefined list of styles for your component follows the same model as defining style classes for components provided by Oracle Content and Experience through a theme’s design files. You name your custom style classes in the appinfo.json file for the component.

You define additional styles in the design.css and design.json files. The json file provides a mapping from the name that will appear in the user interface to the actual underlying css class name, and the css file provides the details for each style class.

The design.json file has the following structure for components:

{
    "componentStyles": {
        "scs-image": {
            "styles": []
        },
        "scs-map": {
            "styles": []
        },
        "scs-title": {
            "styles": []
        },
        "scs-paragraph": {
            "styles": []
        },
        "scs-txt": {
            "styles": []
        },
        "scs-divider": {
            "styles": []
        },
        "scs-button": {
            "styles": []
        },
        "scs-app": {
            "styles": []
        },
        "scs-spacer": {
        },
        "scs-gallery": {
            "styles": []
        },
        "scs-youtube": {
            "styles": []
        },
        "scs-socialbar": {
            "styles": []
        },
        "scs-document": {
            "styles": []
        }
    }
}

Each of the "styles":[] entries can contain a list of styles for that particular component. The "name" can either be a reference to a built-in localized string, or a specified value to use. For example, the Title component provides these default styles:

{    
    "styles": [{
                    "name": "COMP_STYLE_FLAT",
                    "class": "scs-title-default-style"
               },
               {
                     "name": "COMP_STYLE_HIGHLIGHT",
                     "class": "scs-title-style-2"
               },
               {
                     "name": "COMP_STYLE_DIVIDER",
                     "class": "scs-title-style-3"
               }
]
}

The name values are mapped to the actual words to display in the user interface, like this:

    "COMP_STYLE_FLAT": "Flat",
    "COMP_STYLE_HIGHLIGHT": "Highlight",
    "COMP_STYLE_DIVIDER": "Divider",

The css file provides the definitions for the class values:

    .scs-title-default-style {
      color: #333333;
      display: block;
      font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
      font-size: 24px;
      font-weight: normal;
                             }

As an example, in the theme’s design.json file, you can add entries for your component based on the initialData.compomentId value you define in the components.json file:

"componentId": "news-article"

The corresponding entries in the design.json file would be these:

"componentStyles": {
        "news-article": {
                "styles": [{
                          "name": "News Article 1",
                          "class": "news-article-default-style"
                  },
                  {
                          "name": "News Article 2",
                          "class": "news-article-style-1"
                  }]
        },

The corresponding entries in the design.css file would be these:

.news-article-default-style .scs-image {…}
.news-article-style-1 .scs-image {…}