Replace TagLink fill bar colour with article background colour (#12062)

* replace fill bar colour with article background colour

* replace transparent with neutral.100 in article background palette function

* use transparent background on age warning wrapper for interviews

Author: cemms1

dotcom-rendering/src/components/TagLink.tsx

@@ -95,7 +95,7 @@ const arrowStyles = css`
 `;
 
 const fillBarStyles = css`
-	background-color: ${palette('--tag-link-fill-background')};
+	background-color: ${palette('--article-background')};
 	width: 100%;
 	margin-top: -1px;
 	margin-bottom: -1px;

dotcom-rendering/src/palette.ts

@@ -3023,12 +3023,12 @@ const articleBackgroundLight: PaletteFunction = ({
 				case ArticleSpecial.Labs:
 					switch (display) {
 						case ArticleDisplay.Immersive:
-							return 'transparent';
+							return sourcePalette.neutral[100];
 						default:
 							return sourcePalette.neutral[97];
 					}
 				default:
-					return 'transparent';
+					return sourcePalette.neutral[100];
 			}
 	}
 };
@@ -4210,7 +4210,7 @@ const linkKickerTextDark: PaletteFunction = ({ theme }) => {
 const ageWarningWrapperBackground: PaletteFunction = (format) => {
 	switch (format.design) {
 		case ArticleDesign.Interview:
-			return articleBackgroundLight(format);
+			return 'transparent';
 		default:
 			return headlineBackgroundLight(format);
 	}
@@ -5439,58 +5439,6 @@ const pinnedPostBorderDark: PaletteFunction = ({ theme }) => {
 };
 
 const tagLinkBackground: PaletteFunction = () => sourcePalette.sport[800];
-const tagLinkFillBackground: PaletteFunction = ({ design, display, theme }) => {
-	switch (design) {
-		case ArticleDesign.LiveBlog:
-		case ArticleDesign.DeadBlog:
-			return sourcePalette.neutral[97];
-		// Order matters. We want comment special report pieces to have the opinion background
-		case ArticleDesign.Letter:
-			return sourcePalette.opinion[800];
-		case ArticleDesign.Comment:
-			switch (theme) {
-				case ArticleSpecial.SpecialReportAlt:
-					return sourcePalette.specialReportAlt[800];
-				default:
-					return sourcePalette.opinion[800];
-			}
-		case ArticleDesign.Editorial:
-			return sourcePalette.opinion[800];
-		case ArticleDesign.Analysis:
-			switch (theme) {
-				case ArticleSpecial.SpecialReportAlt:
-					return sourcePalette.specialReportAlt[800];
-				default:
-					return sourcePalette.news[800];
-			}
-		case ArticleDesign.Picture:
-		case ArticleDesign.Audio:
-		case ArticleDesign.Video: {
-			switch (theme) {
-				case ArticleSpecial.Labs:
-					return sourcePalette.neutral[86];
-				default:
-					return sourcePalette.neutral[0];
-			}
-		}
-		default:
-			switch (theme) {
-				case ArticleSpecial.SpecialReport:
-					return sourcePalette.specialReport[800];
-				case ArticleSpecial.SpecialReportAlt:
-					return sourcePalette.specialReportAlt[800];
-				case ArticleSpecial.Labs:
-					switch (display) {
-						case ArticleDisplay.Immersive:
-							return 'transparent';
-						default:
-							return sourcePalette.neutral[97];
-					}
-				default:
-					return sourcePalette.neutral[100];
-			}
-	}
-};
 
 const tagLinkAccent: PaletteFunction = () => sourcePalette.sport[400];
 
@@ -6702,10 +6650,6 @@ const paletteColours = {
 		light: tagLinkBackground,
 		dark: tagLinkBackground,
 	},
-	'--tag-link-fill-background': {
-		light: tagLinkFillBackground,
-		dark: tagLinkFillBackground,
-	},
 	'--timeline-atom-bullet': {
 		light: timelineAtomBulletLight,
 		dark: timelineAtomBulletDark,