fix(checkout v3): Improve dark mode + remove unnecessary scroll bar (#102135)

Improves dark mode in cart diff + only show scroll bar when necessary.

# before 
<img width="422" height="138" alt="Screenshot 2025-10-27 at 11 00 05 AM"
src="https://github.com/user-attachments/assets/3d9d117e-aa53-4351-8c64-b479e3c6733e"
/>

# after
<img width="416" height="135" alt="Screenshot 2025-10-27 at 10 59 40 AM"
src="https://github.com/user-attachments/assets/f6f7d8e6-89c4-4001-8439-77e7ec250d82"
/>

Author: isabellaenriquez

static/gsApp/views/amCheckout/cartDiff.tsx

@@ -1,11 +1,14 @@
 import React, {Fragment, useCallback, useMemo} from 'react';
 import styled from '@emotion/styled';
+import Color from 'color';
 import isEqual from 'lodash/isEqual';
 
 import {Button} from 'sentry/components/core/button';
 import {Flex} from 'sentry/components/core/layout';
 import {IconChevron} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
+import ConfigStore from 'sentry/stores/configStore';
+import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import type {DataCategory} from 'sentry/types/core';
 import type {Organization} from 'sentry/types/organization';
 import {capitalize} from 'sentry/utils/string/capitalize';
@@ -51,16 +54,18 @@ type SharedOnDemandChange = CheckoutChange<'sharedMaxBudget', number>;
 type PerCategoryOnDemandChange = CheckoutChange<DataCategory, number | null>;
 
 function AddedHighlight({value}: {value: string}) {
+  const prefersDarkMode = useLegacyStore(ConfigStore).theme === 'dark';
   return (
-    <Added>
+    <Added prefersDarkMode={prefersDarkMode}>
       <span>{value}</span>
     </Added>
   );
 }
 
 function RemovedHighlight({value}: {value: string}) {
+  const prefersDarkMode = useLegacyStore(ConfigStore).theme === 'dark';
   return (
-    <Removed>
+    <Removed prefersDarkMode={prefersDarkMode}>
       <span>{value}</span>
     </Removed>
   );
@@ -593,7 +598,7 @@ const ChangesContainer = styled('div')`
     border-bottom: 1px solid ${p => p.theme.border};
   }
   max-height: 300px;
-  overflow-y: scroll;
+  overflow-y: auto;
 `;
 
 const Title = styled('h1')`
@@ -615,23 +620,26 @@ const Change = styled('div')`
   }
 `;
 
-const Added = styled(Change)`
-  background: #e0ffe3;
+const Added = styled(Change)<{prefersDarkMode?: boolean}>`
+  background: ${p => p.theme.green200};
 
   &::before {
     content: '+';
   }
 
   span {
-    background: #a8ecaa;
+    background: ${p =>
+      p.prefersDarkMode
+        ? Color(p.theme.green400).lighten(0.08).alpha(0.5).string()
+        : '#a8ecaa'};
   }
 `;
 
-const Removed = styled(Change)`
+const Removed = styled(Change)<{prefersDarkMode?: boolean}>`
   background: ${p => p.theme.red100};
 
   span {
-    background: #f7d4d3;
+    background: ${p => (p.prefersDarkMode ? p.theme.red400 : '#f7d4d3')};
   }
 `;