Tidy up border colours (#9840)

* Remove unused text.dynamoMeta

* Replace source's deprecated border with source's palette

* Remove deprecated (and unused) border.secondary from decidePalette

Author: sophie-macmillan

dotcom-rendering/src/components/Discussion/Comment.tsx

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import {
-	border,
 	from,
 	remSpace,
 	palette as sourcePalette,
@@ -119,7 +118,7 @@ const commentLinkStyling = css`
 `;
 
 const commentWrapper = css`
-	border-top: 1px solid ${border.secondary};
+	border-top: 1px solid ${sourcePalette.neutral[86]};
 	display: flex;
 	padding: ${space[2]}px 0;
 `;

dotcom-rendering/src/components/Discussion/CommentContainer.tsx

@@ -1,9 +1,5 @@
 import { css } from '@emotion/react';
-import {
-	border,
-	palette as sourcePalette,
-	space,
-} from '@guardian/source-foundations';
+import { palette as sourcePalette, space } from '@guardian/source-foundations';
 import { SvgPlus } from '@guardian/source-react-components';
 import { useEffect, useState } from 'react';
 import { getMoreResponses } from '../../lib/discussionApi';
@@ -48,7 +44,7 @@ const nestingStyles = css`
 `;
 
 const topBorder = css`
-	border-top: 1px solid ${border.secondary};
+	border-top: 1px solid ${sourcePalette.neutral[86]};
 `;
 
 const commentContainerStyles = css`

dotcom-rendering/src/components/Discussion/Dropdown.tsx

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import {
 	background,
-	border,
 	from,
 	palette as sourcePalette,
 	textSans,
@@ -26,7 +25,7 @@ const containerStyles = css`
 const ulStyles = css`
 	z-index: 2;
 	list-style: none;
-	border: 1px solid ${border.secondary};
+	border: 1px solid ${sourcePalette.neutral[86]};
 	margin-left: -8px;
 	padding: 0px;
 	display: none;

dotcom-rendering/src/components/Discussion/Filters.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { border, space } from '@guardian/source-foundations';
+import { palette as sourcePalette, space } from '@guardian/source-foundations';
 import type {
 	FilterOptions,
 	OrderByType,
@@ -20,7 +20,7 @@ const filterBar = css`
 	padding-top: ${space[1]}px;
 	padding-bottom: ${space[2]}px;
 
-	border-top: 1px solid ${border.secondary};
+	border-top: 1px solid ${sourcePalette.neutral[86]};
 
 	display: flex;
 	flex-direction: row;
@@ -33,7 +33,7 @@ const dividerStyles = css`
 		content: '';
 		display: block;
 		width: 1px;
-		background-color: ${border.secondary};
+		background-color: ${sourcePalette.neutral[86]};
 		position: absolute;
 		top: -${space[1]}px;
 		bottom: ${space[1]}px;

dotcom-rendering/src/components/Discussion/Pagination.tsx

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import {
-	border,
 	palette as sourcePalette,
 	space,
 	textSans,
@@ -110,7 +109,7 @@ const wrapperStyles = css`
 	width: 100%;
 	padding-top: ${space[2]}px;
 	padding-bottom: ${space[2]}px;
-	border-top: 1px solid ${border.secondary};
+	border-top: 1px solid ${sourcePalette.neutral[86]};
 	${until.mobileLandscape} {
 		flex-direction: column;
 	}

dotcom-rendering/src/components/DividerBlockComponent.tsx

@@ -1,5 +1,9 @@
 import { css } from '@emotion/react';
-import { border, from, space } from '@guardian/source-foundations';
+import {
+	from,
+	palette as sourcePalette,
+	space,
+} from '@guardian/source-foundations';
 
 type Props = {
 	size?: 'full' | 'partial';
@@ -10,7 +14,7 @@ const baseStyles = css`
 	height: 1px;
 	border: 0;
 	margin-bottom: 3px;
-	background-color: ${border.secondary};
+	background-color: ${sourcePalette.neutral[86]};
 `;
 const sizeFullStyle = css`
 	width: 100%;

dotcom-rendering/src/components/Dropdown.tsx

@@ -2,14 +2,9 @@ import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
 import type { OphanComponent } from '@guardian/libs';
 import {
-	border,
-	brandAlt,
-	brandText,
 	from,
-	neutral,
-	news,
 	palette,
-	text,
+	palette as sourcePalette,
 	textSans,
 	until,
 	visuallyHidden,
@@ -90,7 +85,7 @@ const displayNone = css`
 
 const linkStyles = css`
 	${textSans.small()};
-	color: ${text.anchorSecondary};
+	color: ${sourcePalette.neutral[7]};
 	position: relative;
 	transition: color 80ms ease-out;
 	margin: -1px 0 0 0;
@@ -99,7 +94,7 @@ const linkStyles = css`
 	padding: 10px 18px 15px 30px;
 
 	:hover {
-		background-color: ${neutral[93]};
+		background-color: ${sourcePalette.neutral[93]};
 		text-decoration: none;
 	}
 
@@ -109,7 +104,7 @@ const linkStyles = css`
 
 	:before {
 		content: '';
-		border-top: 1px solid ${border.secondary};
+		border-top: 1px solid ${sourcePalette.neutral[86]};
 		display: block;
 		position: absolute;
 		top: 0px;
@@ -123,7 +118,7 @@ const linkActive = css`
 
 	:after {
 		content: '';
-		border: 2px solid ${news[400]};
+		border: 2px solid ${sourcePalette.news[400]};
 		border-top: 0px;
 		border-right: 0px;
 		position: absolute;
@@ -149,15 +144,15 @@ const buttonStyles = css`
 	border: none;
 	/* Design System: The buttons should be components that handle their own layout using primitives  */
 	line-height: 1.2;
-	color: ${brandText.primary};
+	color: ${sourcePalette.neutral[100]};
 	transition: color 80ms ease-out;
 	padding: 0px 10px 6px 5px;
 	margin: 1px 0 0;
 	text-decoration: none;
 	position: relative;
 
 	:hover {
-		color: ${brandAlt[400]};
+		color: ${sourcePalette.brandAlt[400]};
 
 		:after {
 			transform: translateY(0) rotate(45deg);

dotcom-rendering/src/components/HeaderAdSlot.tsx

@@ -1,6 +1,6 @@
 import { css, Global } from '@emotion/react';
 import { constants } from '@guardian/commercial';
-import { border, neutral, space } from '@guardian/source-foundations';
+import { palette as sourcePalette, space } from '@guardian/source-foundations';
 import { adContainerStyles, AdSlot } from './AdSlot.web';
 import { Hide } from './Hide';
 
@@ -18,9 +18,9 @@ const headerMinHeight =
 const headerAdWrapper = css`
 	z-index: 1080;
 	width: 100%;
-	background-color: ${neutral[97]};
+	background-color: ${sourcePalette.neutral[97]};
 	min-height: ${headerMinHeight}px;
-	border-bottom: ${borderBottomHeight}px solid ${border.secondary};
+	border-bottom: ${borderBottomHeight}px solid ${sourcePalette.neutral[86]};
 	padding-bottom: ${padding}px;
 
 	display: flex;

dotcom-rendering/src/components/InteractiveContentsBlockComponent.importable.tsx

@@ -1,9 +1,8 @@
 import { css } from '@emotion/react';
 import {
-	border,
 	from,
 	headline,
-	neutral,
+	palette as sourcePalette,
 	space,
 	until,
 } from '@guardian/source-foundations';
@@ -13,21 +12,21 @@ import { getZIndex } from '../lib/getZIndex';
 import type { SubheadingBlockElement } from '../types/content';
 
 const liStyles = css`
-	border-top: 1px solid ${neutral[86]};
+	border-top: 1px solid ${sourcePalette.neutral[86]};
 	border-top-width: 1px;
 	border-top-style: solid;
-	border-top-color: ${neutral[86]};
+	border-top-color: ${sourcePalette.neutral[86]};
 	:hover {
-		background-color: ${neutral[93]};
+		background-color: ${sourcePalette.neutral[93]};
 	}
 `;
 
 const borderRightStyles = css`
 	${from.mobileLandscape} {
-		border-right: 1px solid ${neutral[86]};
+		border-right: 1px solid ${sourcePalette.neutral[86]};
 		border-right-width: 1px;
 		border-right-style: solid;
-		border-right-color: ${neutral[86]};
+		border-right-color: ${sourcePalette.neutral[86]};
 	}
 `;
 
@@ -62,8 +61,8 @@ const stickyNavBaseStyles = css`
 		max-width: 650px;
 		margin-left: ${space[4]}px;
 	}
-	background-color: ${neutral[100]};
-	border: 1px solid ${border.secondary};
+	background-color: ${sourcePalette.neutral[100]};
+	border: 1px solid ${sourcePalette.neutral[86]};
 	top: 0;
 	${getZIndex('banner')}
 `;

dotcom-rendering/src/components/LeftColumn.tsx

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
 import {
 	between,
-	border,
 	from,
+	palette as sourcePalette,
 	space,
 	until,
 } from '@guardian/source-foundations';
@@ -91,7 +91,7 @@ type Props = {
 export const LeftColumn = ({
 	children,
 	borderType,
-	borderColour = border.secondary,
+	borderColour = sourcePalette.neutral[86],
 	size = 'compact',
 	verticalMargins = true,
 	hasPageSkin = false,

dotcom-rendering/src/components/MatchStats.tsx

@@ -2,9 +2,9 @@ import { css } from '@emotion/react';
 import { ArticleDesign } from '@guardian/libs';
 import {
 	between,
-	border,
 	from,
 	headline,
+	palette as sourcePalette,
 	space,
 	textSans,
 	until,
@@ -233,7 +233,7 @@ const RightBorder = ({ children }: { children: React.ReactNode }) => (
 	<h4
 		css={css`
 			${from.phablet} {
-				border-right: 1px solid ${border.secondary};
+				border-right: 1px solid ${sourcePalette.neutral[86]};
 			}
 			margin-right: 10px;
 			padding-right: 10px;

dotcom-rendering/src/components/MostViewedFooter.importable.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import type { Breakpoint } from '@guardian/source-foundations';
-import { border, from } from '@guardian/source-foundations';
+import { from, palette as sourcePalette } from '@guardian/source-foundations';
 import type { TrailTabType, TrailType } from '../types/trails';
 import { MostViewedFooterGrid } from './MostViewedFooterGrid';
 import { MostViewedFooterSecondTierItem } from './MostViewedFooterSecondTierItem';
@@ -26,8 +26,8 @@ const stackBelow = (breakpoint: Breakpoint) => css`
 `;
 
 const secondTierStyles = css`
-	border-left: 1px solid ${border.secondary};
-	border-right: 1px solid ${border.secondary};
+	border-left: 1px solid ${sourcePalette.neutral[86]};
+	border-right: 1px solid ${sourcePalette.neutral[86]};
 
 	${from.tablet} {
 		padding-top: 24px;

dotcom-rendering/src/components/MostViewedFooterGrid.tsx

@@ -1,9 +1,8 @@
 import { css } from '@emotion/react';
 import {
-	border,
 	from,
 	headline,
-	neutral,
+	palette as sourcePalette,
 	until,
 	visuallyHidden,
 } from '@guardian/source-foundations';
@@ -12,7 +11,7 @@ import { palette } from '../palette';
 import type { TrailTabType, TrailType } from '../types/trails';
 import { MostViewedFooterItem } from './MostViewedFooterItem';
 
-const thinGreySolid = `1px solid ${border.secondary}`;
+const thinGreySolid = `1px solid ${sourcePalette.neutral[86]}`;
 
 const hidePanel = css`
 	display: none;
@@ -60,7 +59,7 @@ const selectedListTabStyles = (selectedColour: string) => css`
 
 const unselectedStyles = css`
 	&:hover {
-		box-shadow: inset 0px 4px 0px 0px ${neutral[86]};
+		box-shadow: inset 0px 4px 0px 0px ${sourcePalette.neutral[86]};
 		transition: box-shadow 0.3s ease-in-out;
 	}
 `;
@@ -100,7 +99,7 @@ const gridContainer = css`
 
 	/* We set left border on the grid container, and then right border on
     the gridItems to prevent borders doubling up */
-	border-left: 1px solid ${border.secondary};
+	border-left: 1px solid ${sourcePalette.neutral[86]};
 `;
 
 type Props = {
@@ -133,7 +132,7 @@ const TabHeading = ({ heading }: { heading: string }) => {
 export const MostViewedFooterGrid = ({
 	data,
 	sectionId = '',
-	selectedColour = neutral[0],
+	selectedColour = sourcePalette.neutral[0],
 	hasPageSkin = false,
 }: Props) => {
 	const [selectedTabIndex, setSelectedTabIndex] = useState<number>(0);

dotcom-rendering/src/components/MostViewedFooterItem.tsx

@@ -2,9 +2,9 @@ import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
 import { ArticleDesign } from '@guardian/libs';
 import {
-	border,
 	breakpoints,
 	headline,
+	palette as sourcePalette,
 	until,
 } from '@guardian/source-foundations';
 import { palette } from '../palette';
@@ -21,12 +21,12 @@ const gridItem = (
 ) => {
 	const borderTop = hasPageSkin
 		? css`
-				border-top: 1px solid ${border.secondary};
+				border-top: 1px solid ${sourcePalette.neutral[86]};
 		  `
 		: css`
 				/* Below leftCol always set top border */
 				${until.leftCol} {
-					border-top: 1px solid ${border.secondary};
+					border-top: 1px solid ${sourcePalette.neutral[86]};
 				}
 		  `;
 	return css`
@@ -38,10 +38,10 @@ const gridItem = (
 		items to prevent double borders */
 		border-top: ${position !== 1 &&
 		position !== 6 &&
-		`1px solid ${border.secondary}`};
+		`1px solid ${sourcePalette.neutral[86]}`};
 
 		/* The left border is set on the container */
-		border-right: 1px solid ${border.secondary};
+		border-right: 1px solid ${sourcePalette.neutral[86]};
 		min-height: ${isWithImage ? '4rem' : '3.25rem'};
 
 		&:hover {