add directive to preserve or not the text color
This commit is contained in:
parent
d2a74ea1a2
commit
a9efbd2553
@ -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'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
@ -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) {
|
||||||
|
Loading…
Reference in New Issue
Block a user