fix: made --message-link-preview-background-color global

ts/themes/classicDark.ts

@@ -130,8 +130,6 @@ const classicDark: ThemeColorVariables = {
   '--context-menu-text-color': 'var(--text-primary-color)',
   '--context-menu-text-hover-color': 'var(--black-color)',
 
-  '--message-link-preview-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`,
-
   '--suggestions-background-color': THEMES.CLASSIC_DARK.COLOR2,
   '--suggestions-background-hover-color': THEMES.CLASSIC_DARK.COLOR3,
   '--suggestions-text-color': 'var(--text-primary-color)',

ts/themes/classicLight.ts

@@ -130,8 +130,6 @@ const classicLight: ThemeColorVariables = {
   '--context-menu-text-color': 'var(--text-primary-color)',
   '--context-menu-text-hover-color': 'var(--black-color)',
 
-  '--message-link-preview-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`,
-
   '--suggestions-background-color': 'var(--background-secondary-color)',
   '--suggestions-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR4,
   '--suggestions-text-color': 'var(--text-primary-color)',

ts/themes/globals.tsx

@@ -72,6 +72,14 @@ export type ThemeGlobals = {
 
   /* Avatar Border */
   '--avatar-border-color': string;
+
+  /* Message Link Preview */
+  /* Also used for Images */
+  /* Also used for the Media Grid Items */
+  /* Also used for Staged Generic Attachments */
+  /* Also used for FileDropZone */
+  /* Used for Quote References Not Found */
+  '--message-link-preview-background-color': string;
 };
 
 // These are only set once in the global style (at root).
@@ -133,6 +141,8 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--lightbox-icon-stroke-color': 'var(--white-color)',
 
   '--avatar-border-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.59)`,
+
+  '--message-link-preview-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`,
 };
 
 // These should only be needed for the global style (at root).

ts/themes/oceanDark.ts

@@ -130,8 +130,6 @@ const oceanDark: ThemeColorVariables = {
   '--context-menu-text-color': 'var(--text-primary-color)',
   '--context-menu-text-hover-color': 'var(--black-color)',
 
-  '--message-link-preview-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`,
-
   '--suggestions-background-color': 'var(--background-secondary-color)',
   '--suggestions-background-hover-color': THEMES.OCEAN_DARK.COLOR4,
   '--suggestions-text-color': 'var(--text-primary-color)',

ts/themes/oceanLight.ts

@@ -130,8 +130,6 @@ const oceanLight: ThemeColorVariables = {
   '--context-menu-text-color': 'var(--text-primary-color)',
   '--context-menu-text-hover-color': 'var(--black-color)',
 
-  '--message-link-preview-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`,
-
   '--suggestions-background-color': 'var(--background-secondary-color)',
   '--suggestions-background-hover-color': THEMES.OCEAN_LIGHT.COLOR4,
   '--suggestions-text-color': 'var(--text-primary-color)',

ts/themes/variableColors.tsx

@@ -31,7 +31,6 @@ export type ThemeColorVariables = {
   /* Menu Button */
   '--menu-button-background-color': string;
   '--menu-button-background-hover-color': string;
-  /* TODO Theming Make a icon fill varible that uses the background color? */
   '--menu-button-icon-color': string;
 
   /* Chat (Interaction) Buttons */
@@ -48,20 +47,17 @@ export type ThemeColorVariables = {
   '--settings-tab-background-selected-color': string;
   '--settings-tab-text-color': string;
 
-  /* TODO Theming probably consolidate this */
   /* Buttons */
   /* Outline (Default) */
   '--button-outline-background-color': string;
   '--button-outline-background-hover-color': string;
   '--button-outline-text-color': string;
-  /* TODO Theming we might not need this */
   '--button-outline-text-hover-color': string;
   '--button-outline-border-color': string;
   '--button-outline-border-hover-color': string;
   '--button-outline-disabled-color': string;
 
   /* Solid */
-  /* TODO Theming - Should Pills have their own colors */
   /* Also used for Pills */
   '--button-solid-background-color': string;
   '--button-solid-background-hover-color': string;
@@ -69,7 +65,6 @@ export type ThemeColorVariables = {
   '--button-solid-text-hover-color': string;
   /* Solid buttons stay the same and rely on the disabled pointer */
   '--button-solid-disabled-color': string;
-  /* TODO Theming - Only light themes have shadows? */
   '--button-solid-shadow-color': string;
 
   /* Simple */
@@ -116,18 +111,15 @@ export type ThemeColorVariables = {
   /* Toggle Switch */
   '--toggle-switch-ball-color': string;
   '--toggle-switch-ball-shadow-color': string;
-  /* TODO Theming think this should be white instead of transparent */
   '--toggle-switch-off-background-color': string;
   '--toggle-switch-off-border-color': string;
   '--toggle-switch-on-background-color': string;
   '--toggle-switch-on-border-color': string;
 
-  /* TODO Theming Think this is part of the Convesations Tab */
   /* Unread Messages Alert */
   '--unread-messages-alert-background-color': string;
   '--unread-messages-alert-text-color': string;
 
-  /* toggles between the Light and Dark mode for a Theme */
   /* Color Mode Button */
   '--button-color-mode-stroke-color': string;
   '--button-color-mode-hover-color': string;
@@ -139,8 +131,6 @@ export type ThemeColorVariables = {
   '--emoji-reaction-bar-icon-background-color': string;
   '--emoji-reaction-bar-icon-color': string;
 
-  /* TODO Theming - Should Pills have their own colors? */
-
   /* Modals */
   '--modal-background-content-color': string;
   '--modal-text-color': string;
@@ -170,15 +160,6 @@ export type ThemeColorVariables = {
   '--context-menu-text-color': string;
   '--context-menu-text-hover-color': string;
 
-  /* Message Link Preview */
-  /* Also used for Images */
-  /* Also used for the Media Grid Items */
-  /* Also used for Staged Generic Attachments */
-  /* Also used for FileDropZone */
-  /* Used for Quote References Not Found */
-  /* Same for all Themes */
-  '--message-link-preview-background-color': string;
-
   /* Suggestions i.e. Mentions and Emojis */
   '--suggestions-background-color': string;
   '--suggestions-background-hover-color': string;