Fix color of quotes in chats with custom colors

stylesheets/components/Quote.scss

@@ -162,6 +162,13 @@
   }
 }
 
+.module-quote--outgoing-custom {
+  .module-quote__primary,
+  &.module-quote__reference-warning {
+    border-inline-start-color: variables.$color-white;
+  }
+}
+
 .module-quote__primary {
   flex-grow: 1;
   padding-inline: 8px;

ts/components/conversation/Quote.tsx

@@ -477,6 +477,14 @@ export function Quote(props: Props): JSX.Element | null {
     );
   }
 
+  const customColorStyle = getCustomColorStyle(customColor, true);
+
+  // We don't set a custom color for outgoing quotes
+  const borderInlineStartColor =
+    isIncoming || isCompose
+      ? customColorStyle?.borderInlineStartColor
+      : undefined;
+
   function renderReferenceWarning() {
     if (!referencedMessageNotFound || isStoryReply) {
       return null;
@@ -490,9 +498,7 @@ export function Quote(props: Props): JSX.Element | null {
             ? getClassName(`--incoming-${conversationColor}`)
             : getClassName(`--outgoing-${conversationColor}`)
         )}
-        style={{
+        style={{ ...customColorStyle, borderInlineStartColor }}
-          ...getCustomColorStyle(customColor, true),
-        }}
       >
         <div
           className={classNames(
@@ -546,9 +552,14 @@ export function Quote(props: Props): JSX.Element | null {
           !onClick && getClassName('--no-click'),
           referencedMessageNotFound && getClassName('--with-reference-warning')
         )}
-        style={{ ...getCustomColorStyle(customColor, true) }}
+        style={customColorStyle}
       >
-        <div className={getClassName('__primary')}>
+        <div
+          className={getClassName('__primary')}
+          style={
+            borderInlineStartColor ? { borderInlineStartColor } : undefined
+          }
+        >
           {renderAuthor()}
           {renderGenericFile()}
           {renderPayment()}

ts/services/backups/export.ts

@@ -141,6 +141,7 @@ import { migrateAllMessages } from '../../messages/migrateMessageData';
 import { trimBody } from '../../util/longAttachment';
 import { generateBackupsSubscriberData } from '../../util/backupSubscriptionData';
 import { getEnvironment, isTestEnvironment } from '../../environment';
+import { calculateLightness } from '../../util/getHSL';
 
 const MAX_CONCURRENCY = 10;
 
@@ -2784,10 +2785,14 @@ function checkServiceIdEquivalence(
 function desktopHslToRgbInt(
   hue: number,
   saturation: number,
-  lightness = 1
+  lightness?: number
 ): number {
   // Desktop stores saturation not as 0.123 (0 to 1.0) but 12.3 (percentage)
-  return hslToRGBInt(hue, saturation / 100, lightness);
+  return hslToRGBInt(
+    hue,
+    saturation / 100,
+    lightness ?? calculateLightness(hue)
+  );
 }
 
 function toGroupCallStateProto(state: CallStatus): Backups.GroupCall.State {

ts/util/getCustomColorStyle.ts

@@ -7,7 +7,7 @@ import { getHSL } from './getHSL';
 import { getUserTheme } from '../shims/getUserTheme';
 
 type ExtraQuotePropsType = {
-  borderLeftColor?: string;
+  borderInlineStartColor?: string;
 };
 
 type BackgroundPropertyType =
@@ -18,7 +18,7 @@ type BackgroundPropertyType =
 export function getCustomColorStyle(
   color?: CustomColorType,
   isQuote = false
-): BackgroundPropertyType {
+): (BackgroundPropertyType & ExtraQuotePropsType) | undefined {
   if (!color) {
     return undefined;
   }
@@ -33,7 +33,7 @@ export function getCustomColorStyle(
     if (theme === ThemeType.dark) {
       adjustedLightness = -0.4;
     }
-    extraQuoteProps.borderLeftColor = getHSL(color.start);
+    extraQuoteProps.borderInlineStartColor = getHSL(color.start);
   }
 
   if (!color.end) {

ts/util/getHSL.ts

@@ -18,7 +18,7 @@ function getLightnessFromHue(hue: number, min: number, max: number) {
   return (percentage * (maxValue - minValue)) / 100 + minValue;
 }
 
-function calculateLightness(hue: number): number {
+export function calculateLightness(hue: number): number {
   let lightness = 45;
   if (hue < 60) {
     lightness = getLightnessFromHue(hue, 0, 60);
@@ -55,7 +55,7 @@ export function getHSL(
   adjustedLightness = 0
 ): string {
   return `hsl(${hue}, ${saturation}%, ${
-    lightness == null
+    lightness == null || adjustedLightness !== 0
       ? adjustLightnessValue(calculateLightness(hue), adjustedLightness)
       : lightness * 100
   }%)`;