Merge pull request #12283 from bbc/WSTEAM1-1587-high-contrast-fix

WSTEAM1-1587: High Contrast text & play icon
bbc · Jan 16, 2025 · b6af157 · b6af157
2 parents 79121f4 + c1c224d
commit b6af157
Showing 1 changed file with 32 additions and 35 deletions.
diff --git a/src/app/components/LiveHeaderMedia/index.styles.tsx b/src/app/components/LiveHeaderMedia/index.styles.tsx
@@ -11,7 +11,7 @@ export default {
         display: 'none',
       },
     }),
-  nojs: ({ palette, spacings, fontSizes, fontVariants }: Theme) =>
+  nojs: ({ palette, spacings, fontSizes, fontVariants, mq }: Theme) =>
     css({
       ...fontSizes.pica,
       ...fontVariants.sansRegular,
@@ -24,14 +24,14 @@ export default {
         marginTop: `${spacings.DOUBLE}rem`,
         fontWeight: 'normal',
       },
+      [mq.FORCED_COLOURS]: {
+        color: 'canvasText',
+      },
     }),
-  mediaButton: ({ mq }: Theme) =>
+  mediaButton: () =>
     css({
       position: 'relative',
       padding: 0,
-      [mq.FORCED_COLOURS]: {
-        color: 'canvasText',
-      },
     }),
   openButton: () =>
     css({
@@ -40,7 +40,7 @@ export default {
       border: 'unset',
       textAlign: 'start',
     }),
-  watchLiveCTAText: ({ spacings, palette }: Theme) =>
+  watchLiveCTAText: ({ spacings, palette, mq }: Theme) =>
     css({
       color: palette.WHITE,
       display: 'flex',
@@ -53,22 +53,26 @@ export default {
         fill: 'currentcolor',
         color: palette.WHITE,
         marginInlineEnd: `${spacings.FULL}rem`,
+        [mq.FORCED_COLOURS]: {
+          color: 'canvasText',
+        },
       },
       'button:hover &, button:focus-visible &': {
         textDecoration: 'underline',
       },
+      [mq.FORCED_COLOURS]: {
+        color: 'canvasText',
+      },
     }),
-  title: () =>
-    css({
-      display: 'block',
-      width: '100%',
-    }),
-  guidanceMessage: ({ palette, spacings }: Theme) =>
+  guidanceMessage: ({ palette, spacings, mq }: Theme) =>
     css({
       display: 'block',
       marginTop: `${spacings.DOUBLE}rem`,
       color: palette.GREY_2,
       textAlign: 'start',
+      [mq.FORCED_COLOURS]: {
+        color: 'canvasText',
+      },
     }),
   watchLiveCTA: ({ palette, mq, spacings }: Theme) =>
     css({
@@ -81,24 +85,9 @@ export default {
         width: '100%',
       },
       [mq.FORCED_COLOURS]: {
-        color: 'canvasText',
         border: `${pixelsToRem(2)}rem solid canvasText`,
       },
     }),
-  liveMediaStreamText: ({ palette }: Theme) =>
-    css({
-      color: palette.GREY_4,
-    }),
-  liveMediaStreamContainer: ({ mq }: Theme) =>
-    css({
-      maxWidth: '60%',
-      [mq.GROUP_2_MAX_WIDTH]: {
-        width: '100%',
-      },
-      [mq.GROUP_4_MAX_WIDTH]: {
-        width: '50%',
-      },
-    }),
   closeButton: () =>
     css({
       display: 'flex',
@@ -119,6 +108,9 @@ export default {
         height: `${spacings.DOUBLE}rem`,
         width: `${spacings.DOUBLE}rem`,
         margin: `${pixelsToRem(13)}rem`,
+        [mq.FORCED_COLOURS]: {
+          color: 'canvasText',
+        },
       },
       backgroundColor: palette.BLACK,
       border: `${palette.WHITE} solid ${pixelsToRem(1)}rem`,
@@ -130,10 +122,6 @@ export default {
         color: 'canvasText',
       },
     }),
-  liveMediaSpan: () =>
-    css({
-      maxWidth: '100%',
-    }),
   mediaLoader: ({ spacings }: Theme) =>
     css({
       maxWidth: '100%',
@@ -146,14 +134,24 @@ export default {
       marginTop: 0,
       span: { margin: 0 },
     }),
-  openMediaDescription: ({ palette }: Theme) =>
+  openMediaDescription: ({ palette, mq }: Theme) =>
     css({
-      span: { color: palette.GREY_4 },
+      span: {
+        color: palette.GREY_4,
+        [mq.FORCED_COLOURS]: {
+          color: 'canvasText',
+        },
+      },
     }),
   closeMediaDescription: ({ mq, palette }: Theme) =>
     css({
       textAlign: 'start',
-      span: { color: palette.WHITE },
+      span: {
+        color: palette.WHITE,
+        [mq.FORCED_COLOURS]: {
+          color: 'canvasText',
+        },
+      },
       'button:hover &, button:focus-visible &': {
         span: {
           textDecoration: 'underline',
@@ -164,6 +162,5 @@ export default {
       },
     }),
 
-  underlineFocus: () => css({ display: 'none' }),
   hideComponent: () => css({ display: 'none' }),
 };