replace hsl's l with relative luminance for better lightness detection

src/components/style_switcher/style_switcher.js

@@ -2,9 +2,7 @@ import { set, delete as del } from 'vue'
 import {
   rgb2hex,
   hex2rgb,
-  getContrastRatio,
+  getContrastRatioLayers
-  getContrastRatioLayers,
-  alphaBlend
 } from '../../services/color_convert/color_convert.js'
 import {
   generateColors,
@@ -265,7 +263,6 @@ export default {
 
       const theme = this.previewTheme
 
-      console.log(source)
       return {
         // To separate from other random JSON files and possible future source formats
         _pleroma_theme_version: 2, theme, source

src/i18n/en.json

@@ -430,7 +430,8 @@
         "borders": "Borders",
         "buttons": "Buttons",
         "inputs": "Input fields",
-        "faint_text": "Faded text"
+        "faint_text": "Faded text",
+        "underlay": "Underlay"
       },
       "radii": {
         "_tab_label": "Roundness"

src/services/color_convert/color_convert.js

@@ -1,4 +1,4 @@
-import { invertLightness, convert, contrastRatio } from 'chromatism'
+import { invertLightness, contrastRatio } from 'chromatism'
 
 // useful for visualizing color when debugging
 export const consoleColor = (color) => console.log('%c##########', 'background: ' + color + '; color: ' + color)
@@ -185,8 +185,8 @@ 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 bgIsLight = convert(bg).hsl.l > 50
+  const bgIsLight = relativeLuminance(bg) > 0.5
-  const textIsLight = convert(text).hsl.l > 50
+  const textIsLight = relativeLuminance(text) > 0.5
 
   if ((bgIsLight && textIsLight) || (!bgIsLight && !textIsLight)) {
     const base = typeof text.a !== 'undefined' ? { a: text.a } : {}

src/services/theme_data/theme_data.service.js

@@ -159,13 +159,13 @@ export const SLOT_INHERITANCE = {
 
   alertError: '--cRed',
   alertErrorText: {
-    depends: ['text', 'alertError'],
+    depends: ['text'],
     layer: 'alert',
     variant: 'alertError',
     textColor: true
   },
   alertErrorPanelText: {
-    depends: ['panelText', 'alertError'],
+    depends: ['panelText'],
     layer: 'alertPanel',
     variant: 'alertError',
     textColor: true
@@ -173,13 +173,13 @@ export const SLOT_INHERITANCE = {
 
   alertWarning: '--cOrange',
   alertWarningText: {
-    depends: ['text', 'alertWarning'],
+    depends: ['text'],
     layer: 'alert',
     variant: 'alertWarning',
     textColor: true
   },
   alertWarningPanelText: {
-    depends: ['panelText', 'alertWarning'],
+    depends: ['panelText'],
     layer: 'alertPanel',
     variant: 'alertWarning',
     textColor: true