From aad15a5e4adaab7f18922781e8720b87129bd396 Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Tue, 18 Jun 2024 21:03:54 +0100 Subject: [PATCH 1/3] New: Added theme variables to compilation (fixes #3577) --- grunt/tasks/less.js | 29 +++++++--- src/course/config.json | 120 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 143 insertions(+), 6 deletions(-) diff --git a/grunt/tasks/less.js b/grunt/tasks/less.js index 76b676216..0c27db6d4 100644 --- a/grunt/tasks/less.js +++ b/grunt/tasks/less.js @@ -13,16 +13,17 @@ module.exports = function(grunt) { .replace(convertSlashes, '/'); const cwd = process.cwd(); + let configJSON; + try { + configJSON = JSON.parse(grunt.file.read(options.config) + .toString()); + } catch (e) {} + let imports = ''; let src = ''; if (options.src && options.config) { - let screenSize; - try { - const configjson = JSON.parse(grunt.file.read(options.config) - .toString()); - screenSize = configjson?.screenSize; - } catch (e) {} + const screenSize = configJSON?.screenSize; if (!screenSize) { const error = new Error('No screenSize defined in config.json'); const errorString = error.toString(); @@ -81,6 +82,22 @@ module.exports = function(grunt) { } } + if (configJSON.themeSettings) { + // Add theme variables + function fetchVariableNameValuePairs(object) { + return Object.entries(object).flatMap(([name, value]) => { + if (value === '' || value === null) return []; + if (typeof value !== 'object') return [[ name, value ]]; + return fetchVariableNameValuePairs(value); + }); + } + const variableNameValuePairs = fetchVariableNameValuePairs(configJSON.themeSettings); + // Add less variables + imports += variableNameValuePairs.map(([name, value]) => `\n@${name}: ${value};`).join(''); + // Add css variables + imports += `\n:root {\n ${variableNameValuePairs.map(([name, value]) => `\n --adapt-${name}: ${value};`).join('')}\n}`; + } + let sourcemaps; if (options.sourcemaps) { sourcemaps = { diff --git a/src/course/config.json b/src/course/config.json index f5005299b..14dfdaeb8 100644 --- a/src/course/config.json +++ b/src/course/config.json @@ -78,5 +78,125 @@ }, "build": { "strictMode": true + }, + "themeSettings": { + "_global": { + "font-color": "", + "font-color-inverted": "", + "link": "", + "link-inverted": "", + "link-hover": "", + "link-inverted-hover": "", + "heading-color": "", + "heading-color-inverted": "" + }, + "_items": { + "item-color": "", + "item-color-inverted": "", + "item-color-hover": "", + "item-color-inverted-hover": "", + "item-color-selected": "", + "item-color-inverted-selected": "", + "visited": "", + "visited-inverted": "" + }, + "_buttons": { + "btn-color": "red", + "btn-color-inverted": "", + "btn-color-hover": "", + "btn-color-inverted-hover": "", + "btn-icon-color": "", + "btn-icon-color-inverted": "", + "btn-icon-color-hover": "", + "btn-icon-color-inverted-hover": "", + "disabled": "", + "disabled-inverted": "" + }, + "_validation": { + "validation-success": "", + "validation-success-inverted": "", + "validation-error": "", + "validation-error-inverted": "" + }, + "_progress": { + "progress": "", + "progress-inverted": "", + "progress-border": "" + }, + "_menu": { + "menu-header-background-color": "", + "menu-header-title-color": "", + "menu-header-subtitle-color": "", + "menu-header-body-color": "", + "menu-header-instruction-color": "", + "menu-item": "", + "menu-item-inverted": "", + "menu-item-border-color": "", + "menu-item-progress": "", + "menu-item-progress-inverted": "", + "menu-item-progress-border": "", + "menu-item-btn-color": "", + "menu-item-btn-color-inverted": "", + "menu-item-btn-color-hover": "", + "menu-item-btn-color-inverted-hover": "" + }, + "_nav": { + "nav": "", + "nav-inverted": "", + "nav-icon": "", + "nav-icon-inverted": "", + "nav-icon-hover": "", + "nav-icon-inverted-hover": "", + "nav-progress": "", + "nav-progress-inverted": "", + "nav-progress-border": "", + "nav-progress-hover": "", + "nav-progress-inverted-hover": "", + "nav-progress-border-hover": "" + }, + "_notify": { + "notify": "", + "notify-inverted": "", + "notify-link": "", + "notify-link-hover": "", + "notify-btn": "", + "notify-btn-inverted": "", + "notify-btn-hover": "", + "notify-btn-inverted-hover": "", + "notify-icon": "", + "notify-icon-inverted": "", + "notify-icon-hover": "", + "notify-icon-inverted-hover": "" + }, + "_drawer": { + "drawer": "", + "drawer-inverted": "", + "drawer-link": "", + "drawer-link-hover": "", + "drawer-icon": "", + "drawer-icon-inverted": "", + "drawer-icon-hover": "", + "drawer-icon-inverted-hover": "", + "drawer-item": "", + "drawer-item-inverted": "", + "drawer-item-hover": "", + "drawer-item-inverted-hover": "", + "drawer-item-selected": "", + "drawer-item-inverted-selected": "", + "drawer-progress": "", + "drawer-progress-inverted": "", + "drawer-progress-border": "", + "drawer-progress-hover": "", + "drawer-progress-inverted-hover": "", + "drawer-progress-border-hover": "" + }, + "_misc": { + "background": "", + "background-inverted": "", + "shadow": "", + "shadow-inverted": "", + "loading": "", + "loading-inverted": "" + } } } From 0becceafe3d4ac9d10010ae6b4c2cd597eba2dd3 Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Tue, 18 Jun 2024 21:07:21 +0100 Subject: [PATCH 2/3] Remove red default from btn-color --- src/course/config.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/course/config.json b/src/course/config.json index 14dfdaeb8..a4748515c 100644 --- a/src/course/config.json +++ b/src/course/config.json @@ -101,7 +101,7 @@ "visited-inverted": "" }, "_buttons": { - "btn-color": "red", + "btn-color": "", "btn-color-inverted": "", "btn-color-hover": "", "btn-color-inverted-hover": "", From 67af278884fd6c97845b51c9097943f71f2a56e6 Mon Sep 17 00:00:00 2001 From: Oliver Foster Date: Wed, 19 Jun 2024 09:17:44 +0100 Subject: [PATCH 3/3] Switch to themeVariables --- grunt/tasks/less.js | 4 ++-- src/course/config.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/grunt/tasks/less.js b/grunt/tasks/less.js index 0c27db6d4..46e0e0f63 100644 --- a/grunt/tasks/less.js +++ b/grunt/tasks/less.js @@ -82,7 +82,7 @@ module.exports = function(grunt) { } } - if (configJSON.themeSettings) { + if (configJSON.themeVariables) { // Add theme variables function fetchVariableNameValuePairs(object) { return Object.entries(object).flatMap(([name, value]) => { @@ -91,7 +91,7 @@ module.exports = function(grunt) { return fetchVariableNameValuePairs(value); }); } - const variableNameValuePairs = fetchVariableNameValuePairs(configJSON.themeSettings); + const variableNameValuePairs = fetchVariableNameValuePairs(configJSON.themeVariables); // Add less variables imports += variableNameValuePairs.map(([name, value]) => `\n@${name}: ${value};`).join(''); // Add css variables diff --git a/src/course/config.json b/src/course/config.json index a4748515c..c5851e00b 100644 --- a/src/course/config.json +++ b/src/course/config.json @@ -79,7 +79,7 @@ "build": { "strictMode": true }, - "themeSettings": { + "themeVariables": { "_global": { "font-color": "", "font-color-inverted": "",