Since CoreMedia Studio is based on the Sencha Ext JS framework, it uses and extends the provided skin concept. Styling rules are encapsulated in SCSS mixins and can be applied by using the ui configuration. There are SCSS mixins for almost every component and CoreMedia Studio also provides a huge set of skins, which create the visual appearance of said components.

If a component does not support the usage of skins, or the skin concept does not satisfy the requirements for certain situations you can learn about custom styles in Section 9.16.3, “Styling of Custom Studio Components”.

Please bear in mind that it is not always necessary to write a new skin if you want to change the appearance of a certain component. To change styles, you have multiple options:

Please make sure to read the Theming Section of the Ext JS API documentation to understand the core concepts of the theming system.

Change global styles by setting theme variables

To change the appearance of components Ext JS provides theme variables. If you want to change the style rules of a component, it can often be sufficient to simply override these variables in the Blueprint Studio Theme. Please keep in mind, that you will affect every skin of a component type by changing theme variables. Mixins use theme variables as default if a parameter is not set explicitly.

The following example shows how to set theme variables for panels. Please take a look at the Sencha Ext JS API documentation to get a list of available theme variables.

...
$panel-header-color: dynamic($cm-font-color);
$panel-header-padding: dynamic($cm-grid-100);
$panel-body-background-color: dynamic(transparent);
$panel-body-border-width: dynamic(0);
...

By assigning a SCSS variable with dynamic(...) you make sure that the new value is applied even in earlier usages of this variable. Please read the Dynamic Variables Section to learn more. Since the Blueprint Studio Theme is the last theme to be loaded, the value will not be overridden by another theme if you put the assignment in the theme's sencha/sass/var/Ext/ folder.

Change a skin by setting global CoreMedia variables

CoreMedia Studio also provides own theme variables, which are used as default parameters in cm-[component]-ui mixins or provide a possibility to change styles of custom components. These CoreMedia variables begin with a $cm- prefix:

...
$cm-panel-show-validation: dynamic(true);
$cm-panel-box-shadow: dynamic($cm-elevation-box-shadow-100);
$cm-panel-ghost-background-color: dynamic($cm-grey-1);
$cm-panel-use-sub-collapsible-separator: dynamic(false);
...

Caution

To prevent unpredictable component styling, it is not allowed to use the prefix $_cm- in your own variables, since it is reserved for private variables in the Studio Theme. Overriding these variables can lead to unwanted behavior and incorrect style rules for skins.

Write a new skin and change the ui configuration of the component

The Studio Theme creates styles by including SCSS mixins:

@if $cm-include-panel-accordion-ui {
  $_ui: "accordion";

  @include extjs-panel-ui(
    $ui: $_ui,
    $ui-header-color: $cm-font-color,
    ...
  );

  @include cm-panel-ui(
    $ui: $_ui,
    $background-color: $cm-white,
    ...
  );
}

As shown in Example 9.52, “Simple Skin Example”, the Studio Theme always includes two SCSS mixins per skin. In addition to the Ext JS mixin, Studio Theme provides own mixins, which extend the Ext JS framework. These mixins provide helpful functionality and enhancements, which are applied, even if only the ui parameter is passed to the mixin's parameter list (such as default styles for validation). Therefore, it is necessary to always include both mixins.

Please take a look at the Ext JS - Classic Toolkit API to get a list of theme mixins and possible parameters.

Please note that the Studio Theme wraps mixin includes in if-statements. You can easily switch off mixin includes by setting the corresponding $cm-include-[COMPONENT-TYPE]-[SKIN-NAME]-ui variables to false. Please keep in mind that switching a skin off, will remove all styles for components using the skin. The components will therefore be not styled. If the skin is still set in the ui configuration, not even the default styles will be applied.

// Switching off skin "accordion"
$cm-include-panel-accordion-ui: dynamic(false);

A skin should be switched off if you want to write an own skin or the skin is simply not used anymore. After switching it off, you can include the SCSS mixins in the Blueprint Studio Theme with the same ui parameter to create the style rules for your own skin.

CoreMedia Studio uses TypeScript classes to group skins for components. These classes contain constants for each skin, which provide a stable interface to use skins as ui configuration in components. It is recommended using this concept when applying skins to components. Otherwise, it can get very difficult to tell which skins are currently used in CoreMedia Studio.

import PanelSkin from "@coremedia/studio-client.ext.ui-components/skins/PanelSkin";

class MyClass {
  static readonly DEFAULT: PanelSkin = new PanelSkin("default");
  static readonly DOCKED: PanelSkin = new PanelSkin("docked");
  static readonly ACCORDION: PanelSkin = new PanelSkin("accordion");
  static readonly CARD: PanelSkin = new PanelSkin("card");
  //...
}

To apply a skin to a component, you just have to pass it to the ui configuration. If no ui configuration is applied, the used skin will be "default". The following example shows how to apply the toolbar skin to a button:

Config(Button, {
  itemId: "myToolbarButton",
  ui: ButtonSkin.TOOLBAR.getSkin(),
})

Skins of the same component category are exchangeable without any other adjustments. If no skin is applied, the default skin will be used instead. Some containers can override this behavior. For example, a toolbar has the configuration defaultButtonUI (see Button documentation).