New: Added theme variables to compilation (fixes #3577)

[oliverfoster]

fixes #3577

New

• Allow theme variables to be modified from the config.json bringing them into compile and runtime space

Testing

Set config.json:themeVariables._buttons.btn-color = "red".

Menu button

build/adapt.css

config.json

"themeVariables": {
    "_global": {
      "font-color": "",
      "font-color-inverted": "",
    },
    "_items": {
      "item-color": "",

Only the final "name": "value" pair of each nested section will be used as the Less and CSS property names and values:

Null string "" or null values will not be declared.

CSS variables are prefixed by adapt-, like --adapt-font-color. CSS variables are assigned to the :root { ... } context.

Less variables are not prefixed, like @font-color.

Variables are declared at the end of the output Less, this is in order to give them precedence.

AAT v1 theme schema

It appears that there is a detached schema defining theme variables outside of grunt compilation
https://github.com/adaptlearning/adapt-contrib-vanilla/blob/master/schema/theme.schema.json

Todo

• AAT v1 already writes variable name values to config.json:themeVariables with named theme.schema.json https://github.com/adapt-security/adapt-authoring-coursetheme/blob/master/lib/CourseThemeModule.js
• Move themeVariables from course to config (@taylortom)
• Does a schema that defines config.json extensions to themeVariables take precedence over the theme.schema.json or vice-versa or do they get merged? (tom to test)
• Can schema config.json extensions to themeVariables be output to AAT theme picker rather than the config screen, as well as or instead of theme.schema.json? (tom work to do)
• Colour picker using rgba/hsl instead of just hex? - can be any of the following: hex, hex3 (prefers 3 chars), hsl, rgb, name (with hex fallback), none (allows any of the above)
• Font declarations and custom css should probably be brought into compilation also https://github.com/adapt-security/adapt-authoring-coursetheme/blob/22a285eec8ac00d7dd9d30ba7f3cd22949be158d/lib/CourseThemeModule.js#L67-L72

[guywillis]

👍

[cahirodoherty-learningpool]

👀