From 456a386cfa155af4b9699268a460863812090224 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Tue, 11 Oct 2022 15:58:43 +1100
Subject: [PATCH] feat: added text selection color to themes

---
 stylesheets/_session.scss    | 3 +--
 ts/themes/classicDark.ts     | 1 +
 ts/themes/classicLight.ts    | 1 +
 ts/themes/globals.tsx        | 4 ----
 ts/themes/oceanDark.ts       | 1 +
 ts/themes/oceanLight.ts      | 1 +
 ts/themes/variableColors.tsx | 1 +
 7 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 518e83e03..370129e7a 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -40,8 +40,7 @@ textarea {
 }
 
 ::selection {
-  // TODO Theming - See color
-  // background: var(--color-text-highlight);
+  background: var(--text-selection-color);
 }
 
 .shadowed {
diff --git a/ts/themes/classicDark.ts b/ts/themes/classicDark.ts
index 29c771b3f..041182857 100644
--- a/ts/themes/classicDark.ts
+++ b/ts/themes/classicDark.ts
@@ -12,6 +12,7 @@ const classicDark: ThemeColorVariables = {
 
   '--text-primary-color': THEMES.CLASSIC_DARK.COLOR6,
   '--text-secondary-color': THEMES.CLASSIC_DARK.COLOR5,
+  '--text-selection-color': `rgba(${hexColorToRGB(THEMES.CLASSIC_DARK.COLOR6)}, 0.5)`,
 
   '--border-color': THEMES.CLASSIC_DARK.COLOR3,
 
diff --git a/ts/themes/classicLight.ts b/ts/themes/classicLight.ts
index 361314059..17999f57e 100644
--- a/ts/themes/classicLight.ts
+++ b/ts/themes/classicLight.ts
@@ -12,6 +12,7 @@ const classicLight: ThemeColorVariables = {
 
   '--text-primary-color': THEMES.CLASSIC_LIGHT.COLOR0,
   '--text-secondary-color': THEMES.CLASSIC_LIGHT.COLOR1,
+  '--text-selection-color': `rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.5)`,
 
   '--border-color': THEMES.CLASSIC_LIGHT.COLOR3,
 
diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx
index bf32e2c72..defb0768e 100644
--- a/ts/themes/globals.tsx
+++ b/ts/themes/globals.tsx
@@ -133,16 +133,12 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--lightbox-icon-stroke-color': 'var(--white-color)',
 
   '--avatar-border-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.59)`,
-
-  // TODO Theming - Add selection colors for dark and light themes
-  // Current light uses #00000088 and dark uses #FFFFFF88
 };
 
 // These should only be needed for the global style (at root).
 export function declareCSSVariables(variables: Record<string, string>) {
   let output = '';
   for (const [key, value] of Object.entries(variables)) {
-    console.log(`${key}: ${value}`);
     output += `${key}: ${value};\n`;
   }
   return output;
diff --git a/ts/themes/oceanDark.ts b/ts/themes/oceanDark.ts
index c51f83288..a4202cb33 100644
--- a/ts/themes/oceanDark.ts
+++ b/ts/themes/oceanDark.ts
@@ -12,6 +12,7 @@ const oceanDark: ThemeColorVariables = {
 
   '--text-primary-color': THEMES.OCEAN_DARK.COLOR7!,
   '--text-secondary-color': THEMES.OCEAN_DARK.COLOR5,
+  '--text-selection-color': `rgba(${hexColorToRGB(THEMES.OCEAN_DARK.COLOR7!)}, 0.5)`,
 
   '--border-color': THEMES.OCEAN_DARK.COLOR4,
 
diff --git a/ts/themes/oceanLight.ts b/ts/themes/oceanLight.ts
index 9b48b0e1c..bc754a13a 100644
--- a/ts/themes/oceanLight.ts
+++ b/ts/themes/oceanLight.ts
@@ -12,6 +12,7 @@ const oceanLight: ThemeColorVariables = {
 
   '--text-primary-color': THEMES.OCEAN_LIGHT.COLOR1,
   '--text-secondary-color': THEMES.OCEAN_LIGHT.COLOR2,
+  '--text-selection-color': `rgba(${hexColorToRGB(THEMES.OCEAN_LIGHT.COLOR1)}, 0.5)`,
 
   '--border-color': THEMES.OCEAN_LIGHT.COLOR3,
 
diff --git a/ts/themes/variableColors.tsx b/ts/themes/variableColors.tsx
index c32408dcd..6d1dabdc0 100644
--- a/ts/themes/variableColors.tsx
+++ b/ts/themes/variableColors.tsx
@@ -11,6 +11,7 @@ export type ThemeColorVariables = {
   /* Text */
   '--text-primary-color': string;
   '--text-secondary-color': string;
+  '--text-selection-color': string;
 
   /* Borders */
   '--border-color': string;