moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add directive to preserve or not the text color

This commit is contained in:
Henry Jameson 2024-02-07 16:09:29 +02:00
parent d2a74ea1a2
commit a9efbd2553
2 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/text.style.js
View File

@ -12,7 +12,8 @@ export default {
{ {
component: 'Text', component: 'Text',
directives: { directives: {
textColor: '--text' textColor: '--text',
textAuto: 'no-preserve'
} }
}, },
{ {
@ -26,7 +27,8 @@ export default {
component: 'Text', component: 'Text',
variant: 'greentext', variant: 'greentext',
directives: { directives: {
textColor: '--cGreen' textColor: '--cGreen',
textAuto: 'preserve'
} }
} }
] ]

7
src/services/theme_data/theme_data_3.service.js
View File

@ -365,6 +365,7 @@ export const init = (extraRuleset, palette) => {
].join('') ].join('')
let inheritedTextColor = computedDirectives.textColor let inheritedTextColor = computedDirectives.textColor
let inheritedTextAuto = computedDirectives.textAuto
let inheritedTextOpacity = computedDirectives.textOpacity let inheritedTextOpacity = computedDirectives.textOpacity
let inheritedTextOpacityMode = computedDirectives.textOpacityMode let inheritedTextOpacityMode = computedDirectives.textOpacityMode
const lowerLevelTextSelector = [...selector.split(/ /g).slice(0, -1), soloSelector].join(' ') 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) { if (inheritedTextColor == null || inheritedTextOpacity == null || inheritedTextOpacityMode == null) {
inheritedTextColor = computedDirectives.textColor ?? lowerLevelTextRule.textColor inheritedTextColor = computedDirectives.textColor ?? lowerLevelTextRule.textColor
inheritedTextAuto = computedDirectives.textAuto ?? lowerLevelTextRule.textAuto
inheritedTextOpacity = computedDirectives.textOpacity ?? lowerLevelTextRule.textOpacity inheritedTextOpacity = computedDirectives.textOpacity ?? lowerLevelTextRule.textOpacity
inheritedTextOpacityMode = computedDirectives.textOpacityMode ?? lowerLevelTextRule.textOpacityMode inheritedTextOpacityMode = computedDirectives.textOpacityMode ?? lowerLevelTextRule.textOpacityMode
} }
@ -381,6 +383,7 @@ export const init = (extraRuleset, palette) => {
directives: { directives: {
...computedRule.directives, ...computedRule.directives,
textColor: inheritedTextColor, textColor: inheritedTextColor,
textAuto: inheritedTextAuto ?? 'preserve',
textOpacity: inheritedTextOpacity, textOpacity: inheritedTextOpacity,
textOpacityMode: inheritedTextOpacityMode textOpacityMode: inheritedTextOpacityMode
} }
@ -393,7 +396,7 @@ export const init = (extraRuleset, palette) => {
convert(lowerLevelBackground).rgb, convert(lowerLevelBackground).rgb,
// TODO properly provide "parent" text color? // TODO properly provide "parent" text color?
convert(findColor(inheritedTextColor, null, lowerLevelBackground)).rgb, 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 // 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 // TODO: DEFAULT TEXT COLOR
const bg = cache[lowerLevelSelector]?.background || convert('#FFFFFF').rgb const bg = cache[lowerLevelSelector]?.background || convert('#FFFFFF').rgb
console.log('SELECTOR', lowerLevelSelector)
const rgb = convert(findColor(computedDirectives.background, inheritedBackground, cache[lowerLevelSelector].background)).rgb const rgb = convert(findColor(computedDirectives.background, inheritedBackground, cache[lowerLevelSelector].background)).rgb
if (!cache[selector].background) { if (!cache[selector].background) {