From 253ee49496ff785eb0d9ca909ce13d7b2fd2a2e6 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Wed, 29 Nov 2023 18:21:12 -0400 Subject: content: generateColorStyleVariables: misc dynamics + extensibility --- .../dependencies/generateColorStyleRules.js | 7 ++- .../dependencies/generateColorStyleVariables.js | 51 ++++++++++++++++++++-- 2 files changed, 53 insertions(+), 5 deletions(-) (limited to 'src/content/dependencies') diff --git a/src/content/dependencies/generateColorStyleRules.js b/src/content/dependencies/generateColorStyleRules.js index 1b316a3c..3f1d0130 100644 --- a/src/content/dependencies/generateColorStyleRules.js +++ b/src/content/dependencies/generateColorStyleRules.js @@ -18,9 +18,12 @@ export default { `:root {`, ...( relations.variables - .slot('color', slots.color) + .slots({ + color: slots.color, + context: 'page-root', + mode: 'property-list', + }) .content - .split(';') .map(line => line + ';')), `}`, ].join('\n'); diff --git a/src/content/dependencies/generateColorStyleVariables.js b/src/content/dependencies/generateColorStyleVariables.js index f30d786b..7cd04bd1 100644 --- a/src/content/dependencies/generateColorStyleVariables.js +++ b/src/content/dependencies/generateColorStyleVariables.js @@ -2,7 +2,23 @@ export default { extraDependencies: ['html', 'getColors'], slots: { - color: {validate: v => v.isColor}, + color: { + validate: v => v.isColor, + }, + + context: { + validate: v => v.is( + 'any-content', + 'page-root', + 'primary-only'), + + default: 'any-content', + }, + + mode: { + validate: v => v.is('style', 'property-list'), + default: 'style', + }, }, generate(slots, {getColors}) { @@ -18,7 +34,7 @@ export default { shadow, } = getColors(slots.color); - return [ + let anyContent = [ `--primary-color: ${primary}`, `--dark-color: ${dark}`, `--dim-color: ${dim}`, @@ -26,6 +42,35 @@ export default { `--bg-color: ${bg}`, `--bg-black-color: ${bgBlack}`, `--shadow-color: ${shadow}`, - ].join('; '); + ]; + + let selectedProperties; + + switch (slots.context) { + case 'any-content': + selectedProperties = anyContent; + break; + + case 'page-root': + selectedProperties = [ + ...anyContent, + `--page-primary-color: ${primary}`, + ]; + break; + + case 'primary-only': + selectedProperties = [ + `--primary-color: ${primary}`, + ]; + break; + } + + switch (slots.mode) { + case 'style': + return selectedProperties.join('; '); + + case 'property-list': + return selectedProperties; + } }, }; -- cgit 1.3.0-6-gf8a5