From a9efbd2553119598e615f718037ea57696d023f6 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 7 Feb 2024 16:09:29 +0200 Subject: [PATCH] add directive to preserve or not the text color --- src/components/text.style.js | 6 ++++-- src/services/theme_data/theme_data_3.service.js | 7 ++++--- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/text.style.js b/src/components/text.style.js index 18472032..905dbbee 100644 --- a/src/components/text.style.js +++ b/src/components/text.style.js @@ -12,7 +12,8 @@ export default { { component: 'Text', directives: { - textColor: '--text' + textColor: '--text', + textAuto: 'no-preserve' } }, { @@ -26,7 +27,8 @@ export default { component: 'Text', variant: 'greentext', directives: { - textColor: '--cGreen' + textColor: '--cGreen', + textAuto: 'preserve' } } ] diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js index 1228efc2..c1f8c730 100644 --- a/src/services/theme_data/theme_data_3.service.js +++ b/src/services/theme_data/theme_data_3.service.js @@ -365,6 +365,7 @@ export const init = (extraRuleset, palette) => { ].join('') let inheritedTextColor = computedDirectives.textColor + let inheritedTextAuto = computedDirectives.textAuto let inheritedTextOpacity = computedDirectives.textOpacity let inheritedTextOpacityMode = computedDirectives.textOpacityMode const lowerLevelTextSelector = [...selector.split(/ /g).slice(0, -1), soloSelector].join(' ') @@ -372,6 +373,7 @@ export const init = (extraRuleset, palette) => { if (inheritedTextColor == null || inheritedTextOpacity == null || inheritedTextOpacityMode == null) { inheritedTextColor = computedDirectives.textColor ?? lowerLevelTextRule.textColor + inheritedTextAuto = computedDirectives.textAuto ?? lowerLevelTextRule.textAuto inheritedTextOpacity = computedDirectives.textOpacity ?? lowerLevelTextRule.textOpacity inheritedTextOpacityMode = computedDirectives.textOpacityMode ?? lowerLevelTextRule.textOpacityMode } @@ -381,6 +383,7 @@ export const init = (extraRuleset, palette) => { directives: { ...computedRule.directives, textColor: inheritedTextColor, + textAuto: inheritedTextAuto ?? 'preserve', textOpacity: inheritedTextOpacity, textOpacityMode: inheritedTextOpacityMode } @@ -393,7 +396,7 @@ export const init = (extraRuleset, palette) => { convert(lowerLevelBackground).rgb, // TODO properly provide "parent" text color? convert(findColor(inheritedTextColor, null, lowerLevelBackground)).rgb, - true // component.name === 'Link' || combination.variant === 'greentext' // make it configurable? + newTextRule.directives.textAuto === 'preserve' ) // Storing color data in lower layer to use as custom css properties @@ -444,8 +447,6 @@ export const init = (extraRuleset, palette) => { // TODO: DEFAULT TEXT COLOR const bg = cache[lowerLevelSelector]?.background || convert('#FFFFFF').rgb - console.log('SELECTOR', lowerLevelSelector) - const rgb = convert(findColor(computedDirectives.background, inheritedBackground, cache[lowerLevelSelector].background)).rgb if (!cache[selector].background) {