simplified definition for text color by accounting for layers automatically,

fixed badge notification text color by adding 'bw' option for textColor

src/services/style_setter/style_setter.js

@@ -65,12 +65,12 @@ export const SLOT_INHERITANCE = {
 
   // Foreground
   fgText: {
-    depends: ['text', 'fg', 'underlay', 'bg'],
+    depends: ['text'],
     layer: 'fg',
     textColor: true
   },
   fgLink: {
-    depends: ['link', 'fg', 'underlay', 'bg'],
+    depends: ['link'],
     layer: 'fg',
     textColor: 'preserve'
   },
@@ -78,17 +78,17 @@ export const SLOT_INHERITANCE = {
   // Panel header
   panel: '--fg',
   panelText: {
-    depends: ['fgText', 'panel'],
+    depends: ['fgText'],
     layer: 'panel',
     textColor: true
   },
   panelFaint: {
-    depends: ['fgText', 'panel'],
+    depends: ['fgText'],
     layer: 'panel',
     textColor: true
   },
   panelLink: {
-    depends: ['fgLink', 'panel'],
+    depends: ['fgLink'],
     layer: 'panel',
     textColor: 'preserve'
   },
@@ -96,12 +96,12 @@ export const SLOT_INHERITANCE = {
   // Top bar
   topBar: '--fg',
   topBarText: {
-    depends: ['fgText', 'topBar'],
+    depends: ['fgText'],
     layer: 'topBar',
     textColor: true
   },
   topBarLink: {
-    depends: ['fgLink', 'topBar'],
+    depends: ['fgLink'],
     layer: 'topBar',
     textColor: 'preserve'
   },
@@ -109,17 +109,17 @@ export const SLOT_INHERITANCE = {
   // Buttons
   btn: '--fg',
   btnText: {
-    depends: ['fgText', 'btn'],
+    depends: ['fgText'],
     layer: 'btn'
   },
   btnPanelText: {
-    depends: ['panelText', 'btn', 'panel'],
+    depends: ['panelText'],
     layer: 'btnPanel',
     variant: 'btn',
     textColor: true
   },
   btnTopBarText: {
-    depends: ['topBarText', 'btn', 'topBar'],
+    depends: ['topBarText'],
     layer: 'btnTopBar',
     variant: 'btn',
     textColor: true
@@ -128,18 +128,18 @@ export const SLOT_INHERITANCE = {
   // Input fields
   input: '--fg',
   inputText: {
-    depends: ['text', 'input'],
+    depends: ['text'],
     layer: 'input',
     textColor: true
   },
   inputPanelText: {
-    depends: ['panelText', 'input', 'panel'],
+    depends: ['panelText'],
     layer: 'inputPanel',
     variant: 'input',
     textColor: true
   },
   inputTopbarText: {
-    depends: ['topBarText', 'input', 'topBar'],
+    depends: ['topBarText'],
     layer: 'inputTopBar',
     variant: 'input',
     textColor: true
@@ -153,7 +153,7 @@ export const SLOT_INHERITANCE = {
     textColor: true
   },
   alertErrorPanelText: {
-    depends: ['panelText', 'alertError', 'panel'],
+    depends: ['panelText', 'alertError'],
     layer: 'alertPanel',
     variant: 'alertError',
     textColor: true
@@ -167,7 +167,7 @@ export const SLOT_INHERITANCE = {
     textColor: true
   },
   alertWarningPanelText: {
-    depends: ['panelText', 'alertWarning', 'panel'],
+    depends: ['panelText', 'alertWarning'],
     layer: 'alertPanel',
     variant: 'alertWarning',
     textColor: true
@@ -178,23 +178,47 @@ export const SLOT_INHERITANCE = {
     depends: ['text', 'badgeNotification'],
     layer: 'badge',
     variant: 'badgeNotification',
-    textColor: true
+    textColor: 'bw'
   }
 }
 
+export const getLayersArray = (layer, data = LAYERS) => {
+  let array = [layer]
+  let parent = data[layer]
+  while (parent) {
+    array.unshift(parent)
+    parent = data[parent]
+  }
+  return array
+}
+
+export const getLayers = (layer, variant = layer, colors, opacity) => {
+  return getLayersArray(layer).map((currentLayer) => ([
+    currentLayer === layer
+      ? colors[variant]
+      : colors[currentLayer],
+    opacity[currentLayer]
+  ]))
+}
+
 const getDependencies = (key, inheritance) => {
   const data = inheritance[key]
   if (typeof data === 'string' && data.startsWith('--')) {
     return [data.substring(2)]
   } else {
     if (data === null) return []
-    const { depends } = data
+    const { depends, layer, variant } = data
+    const layerDeps = layer
+      ? getLayersArray(layer).map(currentLayer => {
+        return currentLayer === layer
+          ? variant || layer
+          : currentLayer
+      })
+      : []
     if (Array.isArray(depends)) {
-      return depends
+      return [...depends, ...layerDeps]
-    } else if (typeof depends === 'object') {
-      return [depends]
     } else {
-      return []
+      return [...layerDeps]
     }
   }
 }
@@ -241,25 +265,6 @@ export const topoSort = (
 
 export const SLOT_ORDERED = topoSort(SLOT_INHERITANCE)
 
-export const getLayersArray = (layer, data = LAYERS) => {
-  let array = [layer]
-  let parent = data[layer]
-  while (parent) {
-    array.unshift(parent)
-    parent = data[parent]
-  }
-  return array
-}
-
-export const getLayers = (layer, variant = layer, colors, opacity) => {
-  return getLayersArray(layer).map((currentLayer) => ([
-    currentLayer === layer
-      ? colors[variant]
-      : colors[currentLayer],
-    opacity[currentLayer]
-  ]))
-}
-
 // While this is not used anymore right now, I left it in if we want to do custom
 // styles that aren't just colors, so user can pick from a few different distinct
 // styles as well as set their own colors in the future.
@@ -318,6 +323,8 @@ const getTextColor = function (bg, text, preserve) {
   const bgIsLight = convert(bg).hsl.l > 50
   const textIsLight = convert(text).hsl.l > 50
 
+  console.log(bgIsLight, textIsLight)
+
   if ((bgIsLight && textIsLight) || (!bgIsLight && !textIsLight)) {
     const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
     const result = Object.assign(base, invertLightness(text).rgb)
@@ -468,10 +475,7 @@ const generateColors = (themeData) => {
       const colorFunc = (isObject && value.color) || defaultColorFunc
 
       if (value.textColor) {
-        return {
+        const bg = alphaBlendLayers(
-          ...acc,
-          [key]: getTextColor(
-            alphaBlendLayers(
           { ...acc[deps[0]] },
           getLayers(
             value.layer,
@@ -479,11 +483,22 @@ const generateColors = (themeData) => {
             acc,
             opacity
           )
-            ),
+        )
+        if (value.textColor === 'bw') {
+          return {
+            ...acc,
+            [key]: contrastRatio(bg)
+          }
+        } else {
+          return {
+            ...acc,
+            [key]: getTextColor(
+              bg,
               { ...acc[deps[0]] },
               value.textColor === 'preserve'
             )
           }
+        }
       } else {
         console.log('BENIS', key, deps, deps.map((dep) => ({ ...acc[dep] })))
         return {