Add Dark UI support for Topic Discovery Experience on supported Dark UI page types

src/app/components/Curation/CurationPromo/index.styles.ts

@@ -22,6 +22,18 @@ export default {
     css({
       position: 'relative',
     }),
+  liveLabel: ({ isDarkUi, palette }: Theme) => {
+    const liveColour = isDarkUi ? palette.LIVE_LIGHT : palette.LIVE_DARK;
+
+    return css({
+      svg: {
+        color: liveColour,
+      },
+      'span[role="text"] > span:first-of-type': {
+        color: liveColour,
+      },
+    });
+  },
   metadataAndTopicData: ({ fontSizes }: Theme) =>
     css({
       ...fontSizes.longPrimer,

src/app/components/Curation/CurationPromo/index.test.tsx

@@ -3,6 +3,8 @@ import { EventTrackingData } from '#app/lib/analyticsUtils/types';
 import * as clickTracking from '#app/hooks/useClickTrackerHandler';
 import * as isLiveEnv from '#lib/utilities/isLive';
 import userEvent from '@testing-library/user-event';
+import { LIVE_DARK, LIVE_LIGHT } from '#app/components/ThemeProvider/palette';
+import { ARTICLE_PAGE, MEDIA_ARTICLE_PAGE } from '#app/routes/utils/pageTypes';
 import { render, screen } from '../../react-testing-library-with-providers';
 import CurationPromo from '.';
 
@@ -149,6 +151,27 @@ describe('Curation Promo', () => {
       );
       expect(container.queryByText('17 abril 2023')).not.toBeInTheDocument();
     });
+
+    it.each`
+      pageType              | expectedColour
+      ${ARTICLE_PAGE}       | ${LIVE_DARK}
+      ${MEDIA_ARTICLE_PAGE} | ${LIVE_LIGHT}
+    `(
+      'should render the LiveLabel in the expected colour for $pageType pages',
+      ({ pageType, expectedColour }) => {
+        render(
+          <Fixture
+            link="https://www.bbc.com/mundo/live/noticias-america-latina-60742314"
+            isLive
+          />,
+          { pageType, service: 'mundo' },
+        );
+
+        expect(screen.getByText('EN VIVO')).toHaveStyle({
+          color: expectedColour,
+        });
+      },
+    );
   });
 
   describe('Fallback placeholder image', () => {

src/app/components/Curation/CurationPromo/index.tsx

@@ -102,7 +102,13 @@ const CurationPromo = ({
           </Promo.A>
         ) : (
           <Promo.A href={link} {...clickTrackerHandler}>
-            {isLive ? <LiveLabel>{title}</LiveLabel> : title}
+            {isLive ? (
+              <span css={styles.liveLabel}>
+                <LiveLabel>{title}</LiveLabel>
+              </span>
+            ) : (
+              title
+            )}
           </Promo.A>
         )}
       </Promo.Heading>

src/app/components/TopicDiscovery/index.styles.ts

@@ -28,7 +28,7 @@ const styles = {
       padding: `${spacings.DOUBLE}rem 0`,
     }),
 
-  tabPanel: ({ spacings, mq }: Theme) =>
+  tabPanel: ({ spacings, mq, palette, isDarkUi }: Theme) =>
     css({
       paddingTop: `${spacings.DOUBLE}rem`,
 
@@ -68,6 +68,14 @@ const styles = {
           width: '100%',
           display: 'block',
           paddingInlineStart: 0,
+
+          a: {
+            color: isDarkUi ? palette.GREY_2 : palette.GREY_10,
+
+            '&:visited': {
+              color: isDarkUi ? palette.GREY_4 : palette.GREY_6,
+            },
+          },
         },
       },
 

src/app/components/TopicDiscovery/index.test.tsx

@@ -3,13 +3,26 @@ import {
   screen,
   fireEvent,
 } from '#app/components/react-testing-library-with-providers';
+import { matchers } from '@emotion/jest';
 import * as viewTracking from '#app/hooks/useViewTracker';
 import * as clickTracking from '#app/hooks/useClickTrackerHandler';
 import { ServiceContext } from '#app/contexts/ServiceContext';
 import { ServiceConfig } from '#app/models/types/serviceConfig';
 import { service as portugueseConfig } from '#app/lib/config/services/portuguese';
 import { service as turkceConfig } from '#app/lib/config/services/turkce';
 import { service as arabicConfig } from '#app/lib/config/services/arabic';
+import {
+  GREY_2,
+  GREY_4,
+  GREY_6,
+  GREY_10,
+} from '#app/components/ThemeProvider/palette';
+import {
+  ARTICLE_PAGE,
+  LIVE_TV_PAGE,
+  MEDIA_ARTICLE_PAGE,
+  TV_PAGE,
+} from '../../routes/utils/pageTypes';
 import {
   topicTagsFixture,
   multipleTopicsFixture,
@@ -21,6 +34,8 @@ import TopicDiscovery from '.';
 
 jest.mock('./useFetchTopicPromos');
 
+expect.extend(matchers);
+
 describe('TopicDiscovery', () => {
   const mockUseFetchTopicPromos = useFetchTopicPromos as jest.MockedFunction<
     typeof useFetchTopicPromos
@@ -193,6 +208,47 @@ describe('TopicDiscovery', () => {
     ).not.toBeInTheDocument();
   });
 
+  it.each([MEDIA_ARTICLE_PAGE, TV_PAGE, LIVE_TV_PAGE])(
+    'should render promo links in dark ui colours for %s pages',
+    pageType => {
+      render(<TopicDiscovery topics={topicTagsFixture} />, {
+        pageType,
+        service: 'portuguese',
+      });
+
+      const promoLink = screen.getByRole('link', {
+        name: /Derrota em dose dupla/,
+      });
+
+      const tabPanel = screen.getByRole('tabpanel');
+
+      expect(promoLink).toHaveStyle({ color: GREY_2 });
+
+      expect(tabPanel).toHaveStyleRule('color', GREY_4, {
+        target: 'li .promo-text a:visited',
+      });
+    },
+  );
+
+  it('should render promo links in light ui colours for article pages', () => {
+    render(<TopicDiscovery topics={topicTagsFixture} />, {
+      pageType: ARTICLE_PAGE,
+      service: 'portuguese',
+    });
+
+    const promoLink = screen.getByRole('link', {
+      name: /Derrota em dose dupla/,
+    });
+
+    const tabPanel = screen.getByRole('tabpanel');
+
+    expect(promoLink).toHaveStyle({ color: GREY_10 });
+
+    expect(tabPanel).toHaveStyleRule('color', GREY_6, {
+      target: 'li .promo-text a:visited',
+    });
+  });
+
   describe('analytics', () => {
     const groupTracker = {
       itemCount: 4,