fix the background image colour for sub meta

Co-authored-by: Dina Hafez <[email protected]>

Author: marjisound

dotcom-rendering/src/components/SubMeta.tsx

@@ -62,6 +62,22 @@ const listStyles = css`
 	display: flex;
 	flex-wrap: wrap;
 	gap: 1.5rem 0.25rem;
+	background-image: repeating-linear-gradient(
+			to bottom,
+			${palette('--sub-meta-background')} 0px,
+			${palette('--sub-meta-background')} 2.25rem,
+			transparent 2.25rem,
+			transparent 2.3125rem,
+			${palette('--sub-meta-background')} 2.3125rem,
+			${palette('--sub-meta-background')} 3rem
+		),
+		repeating-linear-gradient(
+			to right,
+			${palette('--article-border')} 0px,
+			${palette('--article-border')} 0.1875rem,
+			transparent 0.1875rem,
+			transparent 0.3125rem
+		);
 	background-position: top;
 	background-repeat: no-repeat;
 `;

dotcom-rendering/src/paletteDeclarations.ts

@@ -3919,13 +3919,15 @@ const subMetaBackgroundLight: PaletteFunction = ({
 		case ArticleDesign.Picture:
 		case ArticleDesign.Video:
 		case ArticleDesign.Audio:
-		case ArticleDesign.Gallery:
 			switch (theme) {
 				case ArticleSpecial.Labs:
 					return sourcePalette.neutral[86];
 				default:
 					return sourcePalette.neutral[7];
 			}
+		case ArticleDesign.Gallery:
+			return sourcePalette.neutral[7];
+
 		default:
 			switch (theme) {
 				case ArticleSpecial.SpecialReport: