pleroma-fe

commit: 7e01d2083d3e26d5239a332cf12e520468a39565
parent 075f2cb903fa45ea8e7a52098fd7091b0b14a9fd
Author: Henry Jameson <me@hjkos.com>
Date:   Mon,  4 Mar 2024 19:53:45 +0200

proper selection colors

Diffstat:
M
src/App.scss
5
+++++
M
src/components/root.style.js
7
++++++-
M
src/services/theme_data/theme3_slot_functions.js
13
++++++++++++-

3 files changed, 23 insertions(+), 2 deletions(-)
diff --git a/src/App.scss b/src/App.scss
@@ -887,3 +887,8 @@ option {
   padding: 0;
   position: absolute;
 }
+
+*::selection {
+  color: var(--selectionText);
+  background-color: var(--selectionBackground);
+}
diff --git a/src/components/root.style.js b/src/components/root.style.js
@@ -21,6 +21,7 @@ export default {
         '--fg': 'color | #182230',
         '--text': 'color | #b9b9ba',
         '--link': 'color | #d8a070',
+        '--accent': 'color | #d8a070',
         '--cRed': 'color | #FF0000',
         '--cBlue': 'color | #0095ff',
         '--cGreen': 'color | #0fa00f',
@@ -32,7 +33,11 @@ export default {
 
         // Fallback no-background-image color
         // (also useful in some other places like scrollbars)
-        '--wallpaper': 'color | --bg, -2'
+        '--wallpaper': 'color | --bg, -2',
+
+        // Selection colors
+        '--selectionBackground': 'color | --accent',
+        '--selectionText': 'color | $textColor(--accent, --text)'
       }
     }
   ]
diff --git a/src/services/theme_data/theme3_slot_functions.js b/src/services/theme_data/theme3_slot_functions.js
@@ -1,5 +1,5 @@
 import { convert, brightness } from 'chromatism'
-import { alphaBlend, relativeLuminance } from '../color_convert/color_convert.js'
+import { alphaBlend, getTextColor, relativeLuminance } from '../color_convert/color_convert.js'
 
 export const process = (text, functions, { findColor, findShadow }, { dynamicVars, staticVars }) => {
   const { funcName, argsString } = /\$(?<funcName>\w+)\((?<argsString>[#a-zA-Z0-9-,.'"\s]*)\)/.exec(text).groups
@@ -23,6 +23,17 @@ export const colorFunctions = {
       return { ...colorArg, a: amount }
     }
   },
+  textColor: {
+    argsNeeded: 2,
+    exec: (args, { findColor }, { dynamicVars, staticVars }) => {
+      const [backgroundArg, foregroundArg, preserve = 'preserve'] = args
+
+      const background = convert(findColor(backgroundArg, { dynamicVars, staticVars })).rgb
+      const foreground = convert(findColor(foregroundArg, { dynamicVars, staticVars })).rgb
+
+      return getTextColor(background, foreground, preserve === 'preserve')
+    }
+  },
   blend: {
     argsNeeded: 3,
     exec: (args, { findColor }, { dynamicVars, staticVars }) => {