feat: added text selection color to themes

stylesheets/_session.scss

@@ -40,8 +40,7 @@ textarea {
 }
 
 ::selection {
-  // TODO Theming - See color
-  // background: var(--color-text-highlight);
+  background: var(--text-selection-color);
 }
 
 .shadowed {

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,
 

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,
 

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;

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,
 

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,
 

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;