All of our supported browsers now support CSS variables: https://developer.mozilla.org/en-US/docs/Web/CSS/var

CSS variables allow us to do some basic calculation and variable re-use which helps us to improve our plugin communication control.

At the moment, if a plugin needs to adopt colours or z-indexes etc. from the theme, that must be set in the theme, or a value hard-coded in the CSS for the plugin.

For example:

// lib/editor/tiny/styles.css

.jsenabled .tox-tinymce-aux {

  z-index: 1070;

}

If the theme were to change the current z-index values, this may break the editor_tiny plugin's use. The same applies to colour.

CSS Variables allow us to solve this. In fact, Bootstrap already exports a number of these itself, but not all.

We can and should add to the list of standard CSS variables, so that a theme can define a set of variables, for example:

theme/boost/scscs/moodle/exportedvariables.scss

$exportedVariables: () !default;

$exportedVariables: map-merge(

    (

        "zindex-popover": $zindex-popover,

        "zindex-tooltip": $zindex-tooltip,

    ),

    $exportedVariables

);

:root {

    @each $name, $value in $exportedVariables {

        --#{$name}: #{$value};

    }

}

This would create variables named -zindex-popover and -zindex-tooltip in the :root element and allow them to be used within the CSS of the plugin, for example:

// lib/editor/tiny/styles.css

.jsenabled .tox-tinymce-aux {

  z-index: var(--zindex-tooltip);

}

Now, if the theme makes a change to the calculated z-indexes, these will be used by the editor.

The var() CSS function also supports a fallback value for where the variable is not defined, for example:

// lib/editor/tiny/styles.css

.jsenabled .tox-tinymce-aux {

  z-index: var(--zindex-tooltip, 1070);

}

The difficult part of this issue is not the technical side, but determining which variabels should be exported, documenting this, and documenting the procedure for adding additional variables.

This is essentially a subsystem API.

We need to be clear and consistent about how these can be selected, supported, and defined, so that when themes change or for theme developers not basing on boost, they can export variables as appropriate to be used and consumed by plugins.