Merge branch 'themes-updates' into 'develop'

Themes updates/fixes

See merge request pleroma/pleroma-fe!1962

src/services/color_convert/color_convert.js

@@ -1,4 +1,4 @@
-import { invertLightness, contrastRatio } from 'chromatism'
+import { invertLightness, contrastRatio, convert } from 'chromatism'
 
 // useful for visualizing color when debugging
 export const consoleColor = (color) => console.log('%c##########', 'background: ' + color + '; color: ' + color)
@@ -215,19 +215,37 @@ export const rgba2css = function (rgba) {
  * @param {Boolean} preserve - try to preserve intended text color's hue/saturation (i.e. no BW)
  */
 export const getTextColor = function (bg, text, preserve) {
-  const contrast = getContrastRatio(bg, text)
-
-  if (contrast < 4.5) {
-    const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
-    const result = Object.assign(base, invertLightness(text).rgb)
-    if (!preserve && getContrastRatio(bg, result) < 4.5) {
+  const originalContrast = getContrastRatio(bg, text)
+  if (!preserve) {
+    if (originalContrast < 4.5) {
       // B&W
       return contrastRatio(bg, text).rgb
     }
-    // Inverted color
-    return result
   }
-  return text
+
+  const originalColor = convert(text).hex
+  const invertedColor = invertLightness(originalColor).hex
+  const invertedContrast = getContrastRatio(bg, convert(invertedColor).rgb)
+  let workColor
+
+  if (invertedContrast > originalContrast) {
+    workColor = invertedColor
+  } else {
+    workColor = originalColor
+  }
+
+  let contrast = getContrastRatio(bg, text)
+  const result = convert(rgb2hex(workColor)).hsl
+  const delta = result.l > 50 ? 1 : -1
+  const multiplier = 10
+  while (contrast < 4.5 && result.l > 20 && result.l < 80) {
+    result.l += delta * multiplier
+    result.l = Math.min(100, Math.max(0, result.l))
+    contrast = getContrastRatio(bg, convert(result).rgb)
+  }
+
+  const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
+  return Object.assign(convert(result).rgb, base)
 }
 
 /**

src/services/theme_data/theme_data_3.service.js

@@ -264,6 +264,7 @@ export const init = ({
       const lowerLevelVirtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw
 
       const dynamicVars = computed[selector] || {
+        lowerLevelSelector,
         lowerLevelBackground,
         lowerLevelVirtualDirectives,
         lowerLevelVirtualDirectivesRaw
@@ -284,6 +285,11 @@ export const init = ({
       computed[selector].computedRule = computedRule
       computed[selector].dynamicVars = dynamicVars
 
+      // avoid putting more stuff into actual CSS
+      computed[selector].virtualDirectives = {}
+      // but still be able to access it i.e. from --parent
+      computed[selector].virtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw || {}
+
       if (virtualComponents.has(combination.component)) {
         const virtualName = [
           '--',
@@ -330,8 +336,8 @@ export const init = ({
             intendedTextColor,
             newTextRule.directives.textAuto === 'preserve'
           )
-        const virtualDirectives = computed[lowerLevelSelector].virtualDirectives || {}
-        const virtualDirectivesRaw = computed[lowerLevelSelector].virtualDirectivesRaw || {}
+        const virtualDirectives = { ...(computed[lowerLevelSelector].virtualDirectives || {}) }
+        const virtualDirectivesRaw = { ...(computed[lowerLevelSelector].virtualDirectivesRaw || {}) }
 
         // Storing color data in lower layer to use as custom css properties
         virtualDirectives[virtualName] = getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
@@ -345,12 +351,8 @@ export const init = ({
           selector: cssSelector.split(/ /g).slice(0, -1).join(' '),
           ...combination,
           directives: {},
-          virtualDirectives: {
-            [virtualName]: getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
-          },
-          virtualDirectivesRaw: {
-            [virtualName]: textColor
-          }
+          virtualDirectives,
+          virtualDirectivesRaw
         }
       } else {
         computed[selector] = computed[selector] || {}