diff --git a/dotcom-rendering/.storybook/decorators/splitThemeDecorator.tsx b/dotcom-rendering/.storybook/decorators/splitThemeDecorator.tsx index d2e0d295039..c4bb1acc0e2 100644 --- a/dotcom-rendering/.storybook/decorators/splitThemeDecorator.tsx +++ b/dotcom-rendering/.storybook/decorators/splitThemeDecorator.tsx @@ -10,7 +10,8 @@ import { import { palette as sourcePalette, space, - textSans, + textSans17, + textSansBold20, } from '@guardian/source-foundations'; import { Decorator } from '@storybook/react'; import { storybookPaletteDeclarations as paletteDeclarations } from '../mocks/paletteDeclarations'; @@ -20,7 +21,7 @@ interface Orientation { } const headerCss = css` - ${textSans.large({ fontWeight: 'bold' })} + ${textSansBold20}; text-align: center; padding: ${space[2]}px; `; @@ -33,7 +34,7 @@ const styles = css` const FormatHeading = ({ format }: { format: ArticleFormat }) => (

; const textStyle = css` - ${body.medium({ lineHeight: 'loose' })}; + ${article17}; margin-bottom: ${space[3]}px; `; diff --git a/dotcom-rendering/src/components/Accordion.tsx b/dotcom-rendering/src/components/Accordion.tsx index 6b21ddcc639..58b805cb1d3 100644 --- a/dotcom-rendering/src/components/Accordion.tsx +++ b/dotcom-rendering/src/components/Accordion.tsx @@ -1,6 +1,11 @@ import { css } from '@emotion/react'; import type { SerializedStyles } from '@emotion/react'; -import { focusHalo, from, headline, space } from '@guardian/source-foundations'; +import { + focusHalo, + from, + headlineBold20, + space, +} from '@guardian/source-foundations'; import { SvgChevronDownSingle, SvgChevronUpSingle, @@ -50,7 +55,7 @@ const titleRowStyles = css` `; const titleStyle = css` - ${headline.xxsmall({ fontWeight: 'bold', lineHeight: 'tight' })}; + ${headlineBold20}; color: ${palette('--accordion-title')}; `; diff --git a/dotcom-rendering/src/components/AdBlockAsk.importable.tsx b/dotcom-rendering/src/components/AdBlockAsk.importable.tsx index 4b5427c0daf..eff0674b12f 100644 --- a/dotcom-rendering/src/components/AdBlockAsk.importable.tsx +++ b/dotcom-rendering/src/components/AdBlockAsk.importable.tsx @@ -1,6 +1,12 @@ import type { SerializedStyles } from '@emotion/react'; import { css } from '@emotion/react'; -import { headline, palette, textSans } from '@guardian/source-foundations'; +import { + headlineMedium24, + palette, + textSans14, + textSans15, + textSans17, +} from '@guardian/source-foundations'; import { assertUnreachable } from '../lib/assert-unreachable'; import { useAdblockAsk } from '../lib/useAdBlockAsk'; import ArrowRightIcon from '../static/icons/arrow-right.svg'; @@ -13,7 +19,7 @@ const linkStyles = css` border-radius: 16px; box-sizing: border-box; color: ${palette.neutral[7]}; - ${textSans.medium()}; + ${textSans17}; font-weight: 700; text-decoration: none; @@ -40,7 +46,7 @@ const linkStyles = css` `; const adBlockAskH2Styles = css` - ${headline.xsmall()} + ${headlineMedium24} color: ${palette.brandAlt[400]}; font-weight: bold; `; @@ -48,12 +54,12 @@ const adBlockAskH2Styles = css` const adBlockAskTextStyles: Record = { leaderboard: css` margin-top: 8px; - ${textSans.xsmall()}; + ${textSans14}; color: ${palette.neutral[100]}; `, mpu: css` margin-top: 16px; - ${textSans.small()}; + ${textSans15}; color: ${palette.neutral[100]}; `, }; diff --git a/dotcom-rendering/src/components/AdSlot.apps.tsx b/dotcom-rendering/src/components/AdSlot.apps.tsx index 5cedc9b50b9..4822abac180 100644 --- a/dotcom-rendering/src/components/AdSlot.apps.tsx +++ b/dotcom-rendering/src/components/AdSlot.apps.tsx @@ -1,5 +1,10 @@ import { css } from '@emotion/react'; -import { remSpace, textSans, until } from '@guardian/source-foundations'; +import { + remSpace, + textSans14, + textSans15, + until, +} from '@guardian/source-foundations'; import { Button } from '@guardian/source-react-components'; import { forwardRef } from 'react'; import { palette } from '../palette'; @@ -23,7 +28,7 @@ const styles = css` `; const adLabelsStyles = css` - ${textSans.xsmall()} + ${textSans14} padding: ${remSpace[3]}; float: left; @@ -62,7 +67,7 @@ const supportBannerStyles = css` background-color: ${palette('--ad-support-banner-background')}; p { - ${textSans.small()}; + ${textSans15}; color: ${palette('--ad-support-banner-text')}; font-weight: bold; margin-top: 0; diff --git a/dotcom-rendering/src/components/AdSlot.web.tsx b/dotcom-rendering/src/components/AdSlot.web.tsx index af4e7b19a89..1a0cef0b7c7 100644 --- a/dotcom-rendering/src/components/AdSlot.web.tsx +++ b/dotcom-rendering/src/components/AdSlot.web.tsx @@ -8,7 +8,7 @@ import { from, palette, space, - textSans, + textSans12, until, } from '@guardian/source-foundations'; import { Hide } from '@guardian/source-react-components'; @@ -66,7 +66,7 @@ type Props = DefaultProps & (RightProps | InlineProps | RemainingProps); const labelHeight = constants.AD_LABEL_HEIGHT; const individualLabelCSS = css` - ${textSans.xxsmall()}; + ${textSans12}; height: ${labelHeight}px; max-height: ${labelHeight}px; background-color: ${palette.neutral[97]}; @@ -118,7 +118,7 @@ export const labelStyles = css` } .ad-slot__adtest-cookie-clear-link { - ${textSans.xxsmall()}; + ${textSans12}; text-align: left; position: absolute; left: 268px; diff --git a/dotcom-rendering/src/components/AgeWarning.tsx b/dotcom-rendering/src/components/AgeWarning.tsx index 9488baff367..c92f13e8df4 100644 --- a/dotcom-rendering/src/components/AgeWarning.tsx +++ b/dotcom-rendering/src/components/AgeWarning.tsx @@ -1,5 +1,10 @@ import { css } from '@emotion/react'; -import { from, textSans, visuallyHidden } from '@guardian/source-foundations'; +import { + from, + textSans12, + textSans17, + visuallyHidden, +} from '@guardian/source-foundations'; import { palette } from '../palette'; import ClockIcon from '../static/icons/clock.svg'; @@ -10,7 +15,7 @@ type Props = { }; const ageWarningStyles = (isSmall: boolean) => css` - ${isSmall ? textSans.xxsmall() : textSans.medium()}; + ${isSmall ? textSans12 : textSans17}; color: ${palette('--age-warning-text')}; background-color: ${palette('--age-warning-background')}; display: inline-block; diff --git a/dotcom-rendering/src/components/Answers.tsx b/dotcom-rendering/src/components/Answers.tsx index fcf5573f657..b410470040a 100644 --- a/dotcom-rendering/src/components/Answers.tsx +++ b/dotcom-rendering/src/components/Answers.tsx @@ -1,7 +1,13 @@ import { css } from '@emotion/react'; import type { ArticleTheme } from '@guardian/libs'; import { ArticleSpecial } from '@guardian/libs'; -import { body, palette, space, textSans } from '@guardian/source-foundations'; +import { + article17, + palette, + space, + textSans14, + textSans17, +} from '@guardian/source-foundations'; import { SvgCheckmark, SvgCross } from '@guardian/source-react-components'; // We export Radio wrapper styles to override Source Radio buttons to align @@ -29,7 +35,7 @@ export const radioButtonWrapperStyles = (theme: ArticleTheme) => css` `; const fontStyles = (theme: ArticleTheme) => - theme === ArticleSpecial.Labs ? textSans.medium() : body.medium(); + theme === ArticleSpecial.Labs ? textSans17 : article17; const answerWithSVGStyles = css` margin-bottom: ${space[2]}px; @@ -125,7 +131,7 @@ const WhiteText = ({ {!!supplementText && ( {supplementText} @@ -168,7 +174,7 @@ const BlackText = ({ {!!supplementText && ( {supplementText} diff --git a/dotcom-rendering/src/components/AppsEpic.importable.tsx b/dotcom-rendering/src/components/AppsEpic.importable.tsx index 4264ebca1f5..ebe0e53db0d 100644 --- a/dotcom-rendering/src/components/AppsEpic.importable.tsx +++ b/dotcom-rendering/src/components/AppsEpic.importable.tsx @@ -2,12 +2,12 @@ import type { SerializedStyles } from '@emotion/react'; import { css } from '@emotion/react'; import type { IEpic } from '@guardian/bridget/Epic'; import { - body as bodySizes, + article17, from, - headline, + headlineMedium24, palette, remSpace, - textSans, + textSans17, } from '@guardian/source-foundations'; import { useEffect, useState } from 'react'; import { getAcquisitionsClient, getUserClient } from '../lib/bridgetApi'; @@ -60,13 +60,13 @@ const epicStyles: SerializedStyles = css` border-top: 1px solid ${themePalette('--apps-epic-border')}; background: ${themePalette('--apps-epic-background')}; padding: ${remSpace[3]}; - ${bodySizes.medium()} + ${article17}; clear: left; } h1:first-of-type { margin-top: 0; - ${headline.xsmall()} + ${headlineMedium24} } button { @@ -108,7 +108,7 @@ const epicStyles: SerializedStyles = css` transition: 0.3s ease-in-out; text-decoration: none; white-space: nowrap; - ${textSans.medium()} + ${textSans17} line-height: 1.5; font-weight: 700; height: 44px; diff --git a/dotcom-rendering/src/components/AppsFooter.importable.tsx b/dotcom-rendering/src/components/AppsFooter.importable.tsx index 8383c24d166..6b59430830c 100644 --- a/dotcom-rendering/src/components/AppsFooter.importable.tsx +++ b/dotcom-rendering/src/components/AppsFooter.importable.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import { remSpace, textSans } from '@guardian/source-foundations'; +import { remSpace, textSans15 } from '@guardian/source-foundations'; import { ButtonLink } from '@guardian/source-react-components'; import { useEffect, useState } from 'react'; import { getNavigationClient, getUserClient } from '../lib/bridgetApi'; @@ -8,13 +8,13 @@ import { palette } from '../palette'; const year = new Date().getFullYear(); const footerStyles = css` - ${textSans.small({ lineHeight: 'regular' })} + ${textSans15} padding: ${remSpace[4]} ${remSpace[3]}; background-color: ${palette('--apps-footer-background')}; `; const linkStyles = css` - ${textSans.small({ lineHeight: 'regular' })}; + ${textSans15}; color: ${palette('--apps-footer-links-text')}; :active, diff --git a/dotcom-rendering/src/components/ArticleBody.tsx b/dotcom-rendering/src/components/ArticleBody.tsx index 4d91292f289..ce8c2fce1fa 100644 --- a/dotcom-rendering/src/components/ArticleBody.tsx +++ b/dotcom-rendering/src/components/ArticleBody.tsx @@ -4,7 +4,7 @@ import type { ArticleFormat } from '@guardian/libs'; import { between, body, - headline, + headlineBold24, remSpace, } from '@guardian/source-foundations'; import { ArticleRenderer } from '../lib/ArticleRenderer'; @@ -68,7 +68,7 @@ const globalH3Styles = (display: ArticleDisplay) => css` ${display === ArticleDisplay.NumberedList && ` h3 { - ${headline.xsmall({ fontWeight: 'bold' })}; + ${headlineBold24}; margin-bottom: ${remSpace[2]}; } `} diff --git a/dotcom-rendering/src/components/ArticleHeadline.tsx b/dotcom-rendering/src/components/ArticleHeadline.tsx index 0566ad999ef..c7e200f5f55 100644 --- a/dotcom-rendering/src/components/ArticleHeadline.tsx +++ b/dotcom-rendering/src/components/ArticleHeadline.tsx @@ -3,9 +3,16 @@ import type { ArticleFormat } from '@guardian/libs'; import { ArticleDesign, ArticleDisplay, ArticleSpecial } from '@guardian/libs'; import { from, - headline, + headlineBold28, + headlineBold34, + headlineBold50, + headlineLight28, + headlineLight34, + headlineMedium28, + headlineMedium34, space, - textSans, + textSansBold24, + textSansBold34, until, } from '@guardian/source-foundations'; import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling'; @@ -36,61 +43,61 @@ const topPadding = css` `; const standardFont = css` - ${headline.medium()}; + ${headlineMedium34}; ${until.tablet} { - ${headline.small()}; + ${headlineMedium28}; } `; const labsFont = css` - ${textSans.xlarge({ fontWeight: 'bold' })}; + ${textSansBold24}; line-height: 2rem; ${from.tablet} { - ${textSans.xxxlarge({ fontWeight: 'bold' })}; + ${textSansBold34}; line-height: 2.375rem; } `; const boldFont = css` - ${headline.medium({ fontWeight: 'bold' })}; + ${headlineBold34}; ${until.tablet} { - ${headline.small({ fontWeight: 'bold' })}; + ${headlineBold28}; } `; const jumboFont = css` - ${headline.xlarge({ fontWeight: 'bold' })}; + ${headlineBold50}; line-height: 3.5rem; ${until.desktop} { - ${headline.medium({ fontWeight: 'bold' })}; + ${headlineBold34}; } `; const jumboLabsFont = css` - ${textSans.xxxlarge({ fontWeight: 'bold' })}; + ${textSansBold34}; font-size: 3.125rem; line-height: 3.5rem; ${until.desktop} { - ${textSans.xxxlarge({ fontWeight: 'bold' })}; + ${textSansBold34}; line-height: 2.375rem; } `; const invertedFont = css` - ${headline.medium({ fontWeight: 'bold' })}; + ${headlineBold34}; line-height: 2.625rem; ${until.tablet} { - ${headline.small({ fontWeight: 'bold' })}; + ${headlineBold28}; line-height: 2.1875rem; } `; const lightFont = css` - ${headline.medium({ fontWeight: 'light' })}; + ${headlineLight34}; font-size: 2.125rem; line-height: 2.375rem; ${until.mobileMedium} { - ${headline.small({ fontWeight: 'light' })}; + ${headlineLight28}; } `; diff --git a/dotcom-rendering/src/components/ArticleLastUpdated.tsx b/dotcom-rendering/src/components/ArticleLastUpdated.tsx index 4296486757a..0329dd9e2bd 100644 --- a/dotcom-rendering/src/components/ArticleLastUpdated.tsx +++ b/dotcom-rendering/src/components/ArticleLastUpdated.tsx @@ -1,19 +1,19 @@ import { css } from '@emotion/react'; import { ArticleDesign, timeAgo } from '@guardian/libs'; -import { textSans } from '@guardian/source-foundations'; +import { textSans15, textSansBold15 } from '@guardian/source-foundations'; import { palette } from '../palette'; import { Island } from './Island'; import { PulsingDot } from './PulsingDot.importable'; const lastUpdatedStyles = css` - ${textSans.small()} + ${textSans15} padding-bottom: 0.125rem; padding-top: 0.125rem; color: ${palette('--last-updated-text')}; `; const livePulseIconStyles = css` - ${textSans.small({ fontWeight: 'bold' })} + ${textSansBold15} color: ${palette('--standfirst-text')}; `; diff --git a/dotcom-rendering/src/components/AudioAtom/AudioAtom.tsx b/dotcom-rendering/src/components/AudioAtom/AudioAtom.tsx index 25291529982..74fd5a404bd 100644 --- a/dotcom-rendering/src/components/AudioAtom/AudioAtom.tsx +++ b/dotcom-rendering/src/components/AudioAtom/AudioAtom.tsx @@ -1,5 +1,10 @@ import { css } from '@emotion/react'; -import { focusHalo, headline, textSans } from '@guardian/source-foundations'; +import { + focusHalo, + headlineBold17, + headlineMedium17, + textSans15, +} from '@guardian/source-foundations'; import type { MouseEvent } from 'react'; import { useEffect, useRef, useState } from 'react'; import { palette } from '../../palette'; @@ -25,11 +30,11 @@ const wrapperStyles = css` const kickerStyle = css` color: ${palette('--audio-atom-kicker')}; - ${headline.xxxsmall({ fontWeight: 'bold' })}; + ${headlineBold17}; `; const titleStyle = css` - ${headline.xxxsmall()}; + ${headlineMedium17}; `; const audioBodyStyle = css` @@ -142,7 +147,7 @@ const timeDurationStyle = css` `; const timeStyles = css` - ${textSans.small()} + ${textSans15} `; const formatNum = (t: number) => t.toFixed(0).padStart(2, '0'); diff --git a/dotcom-rendering/src/components/AustralianTerritorySwitcher.importable.tsx b/dotcom-rendering/src/components/AustralianTerritorySwitcher.importable.tsx index cc9c27e763f..7eb4368341e 100644 --- a/dotcom-rendering/src/components/AustralianTerritorySwitcher.importable.tsx +++ b/dotcom-rendering/src/components/AustralianTerritorySwitcher.importable.tsx @@ -1,6 +1,10 @@ import { css } from '@emotion/react'; import { isString, removeCookie, setCookie } from '@guardian/libs'; -import { space, textSans } from '@guardian/source-foundations'; +import { + space, + textSans17, + textSansBold17, +} from '@guardian/source-foundations'; import { Button, ChoiceCard, @@ -27,12 +31,12 @@ const controlsStyles = css` `; const labelStyles = css` - ${textSans.medium()} + ${textSans17} padding-bottom: ${space[3]}px; display: block; strong { - ${textSans.medium({ fontWeight: 'bold' })} + ${textSansBold17} } `; diff --git a/dotcom-rendering/src/components/BackToTop.tsx b/dotcom-rendering/src/components/BackToTop.tsx index e72129aef81..3d8729c689a 100644 --- a/dotcom-rendering/src/components/BackToTop.tsx +++ b/dotcom-rendering/src/components/BackToTop.tsx @@ -3,7 +3,7 @@ import { brandBackground, brandText, palette, - textSans, + textSansBold15, } from '@guardian/source-foundations'; const iconHeight = '42px'; @@ -52,7 +52,7 @@ const icon = css` `; const textStyles = css` - ${textSans.small({ fontWeight: 'bold' })}; + ${textSansBold15}; padding-right: 5px; `; diff --git a/dotcom-rendering/src/components/BlockquoteBlockComponent.tsx b/dotcom-rendering/src/components/BlockquoteBlockComponent.tsx index 56a2815845b..e2d13549726 100644 --- a/dotcom-rendering/src/components/BlockquoteBlockComponent.tsx +++ b/dotcom-rendering/src/components/BlockquoteBlockComponent.tsx @@ -1,5 +1,5 @@ import { css, jsx } from '@emotion/react'; -import { body } from '@guardian/source-foundations'; +import { articleItalic17 } from '@guardian/source-foundations'; import type { ReactNode } from 'react'; import { Fragment } from 'react'; import { getAttrs, isElement, parseHtml } from '../lib/domUtils'; @@ -14,12 +14,7 @@ type Props = { const baseBlockquoteStyles = css` margin-bottom: 14px; - ${body.medium({ - fontWeight: 'regular', - fontStyle: 'italic', - lineHeight: 'loose', - })}; - + ${articleItalic17}; color: ${palette('--block-quote-text')}; p { diff --git a/dotcom-rendering/src/components/Blocks.amp.tsx b/dotcom-rendering/src/components/Blocks.amp.tsx index 5baf3ae0736..25990d979c3 100644 --- a/dotcom-rendering/src/components/Blocks.amp.tsx +++ b/dotcom-rendering/src/components/Blocks.amp.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import { palette, text, textSans } from '@guardian/source-foundations'; +import { palette, text, textSans12 } from '@guardian/source-foundations'; import { blockLink } from '../lib/block-link.amp'; import type { EditionId } from '../lib/edition'; import { findBlockAdSlots } from '../lib/find-adslots.amp'; @@ -21,7 +21,7 @@ const adStyle = css` :before { content: 'Advertisement'; display: block; - ${textSans.xxsmall()}; + ${textSans12}; /* Adverts specifcally don't use the GU font branding. */ /* stylelint-disable-next-line property-disallowed-list */ font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', @@ -45,11 +45,11 @@ const firstPublishedStyle = css` margin-bottom: 10px; text-decoration: none; font-weight: bold; - ${textSans.xxsmall()}; + ${textSans12}; `; const lastUpdatedStyle = css` - ${textSans.xxsmall()}; + ${textSans12}; color: ${palette.neutral[60]}; text-align: right; padding-right: 15px; diff --git a/dotcom-rendering/src/components/BodyArticle.amp.tsx b/dotcom-rendering/src/components/BodyArticle.amp.tsx index 3e017b1e251..43434a76c0d 100644 --- a/dotcom-rendering/src/components/BodyArticle.amp.tsx +++ b/dotcom-rendering/src/components/BodyArticle.amp.tsx @@ -4,7 +4,7 @@ import { ArticleDesign as Design, ArticleSpecial as Special, } from '@guardian/libs'; -import { palette, text, textSans, until } from '@guardian/source-foundations'; +import { palette, text, textSans12, until } from '@guardian/source-foundations'; import React from 'react'; import { buildAdTargeting } from '../lib/ad-targeting'; import { decideDesign } from '../lib/decideDesign'; @@ -80,7 +80,7 @@ const adStyle = css` :before { content: 'Advertisement'; display: block; - ${textSans.xxsmall()}; + ${textSans12}; /* Adverts specifcally don't use the GU font branding. */ /* stylelint-disable-next-line property-disallowed-list */ font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', diff --git a/dotcom-rendering/src/components/BodyLiveblog.amp.tsx b/dotcom-rendering/src/components/BodyLiveblog.amp.tsx index 7ac330889e7..9462c2b201e 100644 --- a/dotcom-rendering/src/components/BodyLiveblog.amp.tsx +++ b/dotcom-rendering/src/components/BodyLiveblog.amp.tsx @@ -1,5 +1,9 @@ import { css } from '@emotion/react'; -import { headline, palette, textSans } from '@guardian/source-foundations'; +import { + headlineMedium20, + palette, + textSans12, +} from '@guardian/source-foundations'; import { buildAdTargeting } from '../lib/ad-targeting'; import { decideTheme } from '../lib/decideTheme'; import { getSharingUrls } from '../lib/sharing-urls'; @@ -24,7 +28,7 @@ const bodyStyle = css` background-color: ${palette.neutral[97]}; h2 { - ${headline.xxsmall()}; + ${headlineMedium20}; font-weight: 500; margin-block-start: 0.83em; margin-block-end: 0.83em; @@ -55,7 +59,7 @@ const updateButtonStyle = css` background-color: ${palette.news[400]}; color: ${palette.neutral[100]}; font-weight: bold; - ${textSans.xxsmall()}; + ${textSans12}; display: flex; justify-content: space-between; diff --git a/dotcom-rendering/src/components/Branding.amp.tsx b/dotcom-rendering/src/components/Branding.amp.tsx index e62b488110a..2dbfda366b3 100644 --- a/dotcom-rendering/src/components/Branding.amp.tsx +++ b/dotcom-rendering/src/components/Branding.amp.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import { textSans } from '@guardian/source-foundations'; +import { textSans12 } from '@guardian/source-foundations'; import React from 'react'; import { isEditionId } from '../lib/edition'; import { neutralBorder, pillarPalette_DO_NOT_USE } from '../lib/pillars'; @@ -25,12 +25,12 @@ const brandingStyle = (pillar: ArticleTheme) => css` a, a:hover { display: block; border-bottom: none; - ${textSans.xxsmall()} + ${textSans12} } `; const brandingLabelStyle = css` - ${textSans.xxsmall()}; + ${textSans12}; `; const brandingLogoStyle = css` diff --git a/dotcom-rendering/src/components/Branding.importable.tsx b/dotcom-rendering/src/components/Branding.importable.tsx index 4ea730553f8..a3f27b68593 100644 --- a/dotcom-rendering/src/components/Branding.importable.tsx +++ b/dotcom-rendering/src/components/Branding.importable.tsx @@ -1,6 +1,6 @@ import { css } from '@emotion/react'; import { ArticleDesign } from '@guardian/libs'; -import { breakpoints, from, textSans } from '@guardian/source-foundations'; +import { breakpoints, from, textSans12 } from '@guardian/source-foundations'; import { trackSponsorLogoLinkClick } from '../client/ga/ga'; import { getOphanComponents } from '../lib/labs'; import { palette } from '../palette'; @@ -12,7 +12,7 @@ const brandingStyle = css` `; const labelStyle = css` - ${textSans.xxsmall()} + ${textSans12} color: ${palette('--branding-label-text')}; a { @@ -38,7 +38,7 @@ const brandingLogoStyle = css` `; const aboutLinkStyle = css` - ${textSans.xxsmall()} + ${textSans12} display: block; text-decoration: none; diff --git a/dotcom-rendering/src/components/Byline.tsx b/dotcom-rendering/src/components/Byline.tsx index 84a705ebfdd..b2fbd475b32 100644 --- a/dotcom-rendering/src/components/Byline.tsx +++ b/dotcom-rendering/src/components/Byline.tsx @@ -1,6 +1,15 @@ import { css } from '@emotion/react'; import { ArticleSpecial } from '@guardian/libs'; -import { headline, textSans, until } from '@guardian/source-foundations'; +import { + headlineMediumItalic17, + headlineMediumItalic20, + headlineMediumItalic24, + headlineMediumItalic28, + textSansItalic17, + textSansItalic20, + textSansItalic24, + until, +} from '@guardian/source-foundations'; import { palette } from '../palette'; type Props = { @@ -11,7 +20,6 @@ type Props = { const baseStyles = css` display: block; - font-style: italic; color: ${palette('--byline')}; `; @@ -21,67 +29,67 @@ const bylineStyles = (size: SmallHeadlineSize, format: ArticleFormat) => { case 'huge': if (format.theme === ArticleSpecial.Labs) { return css` - ${textSans.xlarge()}; + ${textSansItalic24}; font-size: 24px; line-height: 24px; ${until.desktop} { - ${textSans.xlarge()}; + ${textSansItalic24}; line-height: 20px; } `; } return css` - ${headline.small()}; + ${headlineMediumItalic28}; ${until.desktop} { - ${headline.xsmall()}; + ${headlineMediumItalic24}; } `; case 'large': { if (format.theme === ArticleSpecial.Labs) { return css` - ${textSans.large()}; + ${textSansItalic20}; font-size: 24px; line-height: 24px; ${until.desktop} { - ${textSans.large()}; + ${textSansItalic20}; line-height: 20px; } `; } return css` - ${headline.xsmall()}; + ${headlineMediumItalic24}; ${until.desktop} { - ${headline.xxsmall()}; + ${headlineMediumItalic20}; } `; } case 'medium': { if (format.theme === ArticleSpecial.Labs) { return css` - ${textSans.large()}; + ${textSansItalic20}; line-height: 20px; ${until.desktop} { - ${textSans.medium()}; + ${textSansItalic17}; line-height: 18px; } `; } return css` - ${headline.xxsmall()}; + ${headlineMediumItalic20}; ${until.desktop} { - ${headline.xxxsmall()}; + ${headlineMediumItalic17}; } `; } case 'small': { if (format.theme === ArticleSpecial.Labs) { return css` - ${textSans.medium()}; + ${textSansItalic17}; line-height: 18px; `; } return css` - ${headline.xxxsmall()}; + ${headlineMediumItalic17}; `; } case 'tiny': diff --git a/dotcom-rendering/src/components/CPScottHeader.tsx b/dotcom-rendering/src/components/CPScottHeader.tsx index 88fd76b1779..312ed98d6a0 100644 --- a/dotcom-rendering/src/components/CPScottHeader.tsx +++ b/dotcom-rendering/src/components/CPScottHeader.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import { headline, palette, until } from '@guardian/source-foundations'; +import { headlineMedium17, palette, until } from '@guardian/source-foundations'; import { Link } from '@guardian/source-react-components'; import { generateSources, getFallbackSource } from './Picture'; import { QuoteIcon } from './QuoteIcon'; @@ -24,7 +24,7 @@ const imgStyles = css` `; const scottTextStyles = css` - ${headline.xxxsmall()} + ${headlineMedium17} font-size: 14px; line-height: 16px; ${until.leftCol} { diff --git a/dotcom-rendering/src/components/Callout/Callout.tsx b/dotcom-rendering/src/components/Callout/Callout.tsx index cc5fd304528..9ae13927ad8 100644 --- a/dotcom-rendering/src/components/Callout/Callout.tsx +++ b/dotcom-rendering/src/components/Callout/Callout.tsx @@ -1,5 +1,9 @@ import { css } from '@emotion/react'; -import { headline, space } from '@guardian/source-foundations'; +import { + headlineBold20, + headlineMedium20, + space, +} from '@guardian/source-foundations'; import type { TabProps } from '@guardian/source-react-components-development-kitchen'; import { Tabs } from '@guardian/source-react-components-development-kitchen'; import { useState } from 'react'; @@ -19,11 +23,11 @@ const summaryContentWrapper = css` `; const promptStyles = css` - ${headline.xxsmall({ fontWeight: 'bold' })}; + ${headlineBold20}; `; const subtitleTextHeaderStyles = css` - ${headline.xxsmall()} + ${headlineMedium20} padding-bottom: ${space[3]}px; `; diff --git a/dotcom-rendering/src/components/Callout/CalloutComponents.tsx b/dotcom-rendering/src/components/Callout/CalloutComponents.tsx index dec38c25db2..27445c64216 100644 --- a/dotcom-rendering/src/components/Callout/CalloutComponents.tsx +++ b/dotcom-rendering/src/components/Callout/CalloutComponents.tsx @@ -1,9 +1,10 @@ import { css } from '@emotion/react'; import { - body, + article17, palette as sourcePalette, space, - textSans, + textSans14, + textSans15, } from '@guardian/source-foundations'; import { Button, @@ -28,8 +29,7 @@ export const linkStyles = css` const calloutStyles = css` padding-bottom: ${space[4]}px; - ${body.medium()} - + ${article17} p { margin-bottom: ${space[3]}px; } @@ -64,7 +64,7 @@ export const CalloutDescription = ({ }; const expiredStyles = css` - ${textSans.small()}; + ${textSans15}; color: ${palette('--star-rating-fill')}; background-color: ${palette('--star-rating-background')}; width: fit-content; @@ -95,16 +95,16 @@ const shareCalloutStyles = css` `; const shareCalloutTextStyles = css` - ${textSans.xsmall()} + ${textSans14} `; const shareCalloutLinkStyles = css` - ${textSans.xsmall()} + ${textSans14} color: ${palette('--article-link-text')}; `; const sharePopupStyles = css` - ${textSans.xsmall()}; + ${textSans14}; position: absolute; display: flex; align-items: center; @@ -206,7 +206,7 @@ export const CalloutShare = ({ }; const termsAndConditionsStyles = css` - ${textSans.small()} + ${textSans15} padding-bottom: ${space[4]}px; `; diff --git a/dotcom-rendering/src/components/Callout/Deadline.tsx b/dotcom-rendering/src/components/Callout/Deadline.tsx index e5485a7689b..4d237a6376e 100644 --- a/dotcom-rendering/src/components/Callout/Deadline.tsx +++ b/dotcom-rendering/src/components/Callout/Deadline.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import { space, textSans } from '@guardian/source-foundations'; +import { space, textSans12 } from '@guardian/source-foundations'; import { SvgClock } from '@guardian/source-react-components'; import { palette } from '../../palette'; @@ -8,7 +8,7 @@ type Props = { }; const deadlineStyles = css` - ${textSans.xxsmall()}; + ${textSans12}; color: ${palette('--callout-highlight-text')}; background-color: ${palette('--callout-highlight-background')}; right: 0; diff --git a/dotcom-rendering/src/components/Callout/Form.tsx b/dotcom-rendering/src/components/Callout/Form.tsx index 0dadb5794f7..c806f521c2c 100644 --- a/dotcom-rendering/src/components/Callout/Form.tsx +++ b/dotcom-rendering/src/components/Callout/Form.tsx @@ -1,10 +1,11 @@ import { css } from '@emotion/react'; import { isString, isUndefined } from '@guardian/libs'; import { - headline, + headlineBold20, palette, space, - textSans, + textSans14, + textSansBold17, } from '@guardian/source-foundations'; import { Button, SvgTickRound } from '@guardian/source-react-components'; import { ErrorSummary } from '@guardian/source-react-components-development-kitchen'; @@ -15,12 +16,12 @@ import { CalloutTermsAndConditions } from './CalloutComponents'; import { FormField } from './FormField'; const textStyles = css` - ${textSans.xsmall()}; + ${textSans14}; padding-bottom: 16px; `; const successStyles = css` - ${textSans.xsmall()}; + ${textSans14}; padding-bottom: 44px; `; @@ -30,7 +31,7 @@ const tickBoxStyles = css` `; const errorTextStyles = css` color: ${palette.error[400]}; - ${textSans.medium({ fontWeight: 'bold' })}; + ${textSansBold17}; display: flex; `; @@ -233,7 +234,7 @@ export const Form = ({
Thank you! diff --git a/dotcom-rendering/src/components/Callout/MessageUs.tsx b/dotcom-rendering/src/components/Callout/MessageUs.tsx index 328d1ab4161..1e109fa071b 100644 --- a/dotcom-rendering/src/components/Callout/MessageUs.tsx +++ b/dotcom-rendering/src/components/Callout/MessageUs.tsx @@ -1,6 +1,6 @@ import { css } from '@emotion/react'; import { isString } from '@guardian/libs'; -import { space, textSans } from '@guardian/source-foundations'; +import { space, textSans14 } from '@guardian/source-foundations'; import { LinkButton, SvgSignalBrand, @@ -24,7 +24,7 @@ const calloutPrimaryButtonStyles = css` const infoStyles = css` margin-bottom: ${space[2]}px; - ${textSans.xsmall()}; + ${textSans14}; `; export const formatContactType = (s: string): string => diff --git a/dotcom-rendering/src/components/CalloutEmbed/Form.tsx b/dotcom-rendering/src/components/CalloutEmbed/Form.tsx index 8de47ebf9dd..554808c7bfd 100644 --- a/dotcom-rendering/src/components/CalloutEmbed/Form.tsx +++ b/dotcom-rendering/src/components/CalloutEmbed/Form.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import { text, textSans } from '@guardian/source-foundations'; +import { text, textSansBold17 } from '@guardian/source-foundations'; import { Button, Link } from '@guardian/source-react-components'; import { useState } from 'react'; import type { CampaignFieldType } from '../../types/content'; @@ -27,7 +27,7 @@ const footerPaddingStyles = css` const errorMessagesStyles = css` padding-bottom: 10px; color: ${text.error}; - ${textSans.medium({ fontWeight: 'bold' })}; + ${textSansBold17}; `; const formFieldWrapperStyles = css` diff --git a/dotcom-rendering/src/components/CalloutEmbed/FormFields/FieldLabel.tsx b/dotcom-rendering/src/components/CalloutEmbed/FormFields/FieldLabel.tsx index fdd7fe41837..b80d3b84b73 100644 --- a/dotcom-rendering/src/components/CalloutEmbed/FormFields/FieldLabel.tsx +++ b/dotcom-rendering/src/components/CalloutEmbed/FormFields/FieldLabel.tsx @@ -1,21 +1,23 @@ import { css } from '@emotion/react'; import { palette as sourcePalette, - textSans, + textSans17, + textSansBold17, + textSansItalic15, visuallyHidden, } from '@guardian/source-foundations'; import type { CampaignFieldType } from '../../../types/content'; const fieldLabelStyles = css` - ${textSans.medium({ fontWeight: 'bold' })} + ${textSansBold17} `; const fieldDescription = css` - ${textSans.medium()} + ${textSans17} `; const optionalTextStyles = css` - ${textSans.small({ fontStyle: 'italic' })} + ${textSansItalic15} color: ${sourcePalette.neutral[46]}; padding-left: 5px; `; diff --git a/dotcom-rendering/src/components/CalloutEmbed/FormFields/FileUpload.tsx b/dotcom-rendering/src/components/CalloutEmbed/FormFields/FileUpload.tsx index 48c2f614c4b..74f3920f8d6 100644 --- a/dotcom-rendering/src/components/CalloutEmbed/FormFields/FileUpload.tsx +++ b/dotcom-rendering/src/components/CalloutEmbed/FormFields/FileUpload.tsx @@ -1,6 +1,6 @@ // File upload is the only legacy component that is still used on the old callout form import { css } from '@emotion/react'; -import { space, text, textSans } from '@guardian/source-foundations'; +import { space, text, textSansBold15 } from '@guardian/source-foundations'; import { useState } from 'react'; import type { CampaignFieldFile } from '../../../types/content'; import { stringifyFileBase64 } from '.././../../lib/stringifyFileBase64'; @@ -14,7 +14,7 @@ const fileUploadInputStyles = css` const errorMessagesStyles = css` padding-top: ${space[2]}px; color: ${text.error}; - ${textSans.small({ fontWeight: 'bold' })}; + ${textSansBold15}; `; type Props = { diff --git a/dotcom-rendering/src/components/CalloutEmbedBlockComponent.importable.tsx b/dotcom-rendering/src/components/CalloutEmbedBlockComponent.importable.tsx index 41eac79d197..ba330333ca9 100644 --- a/dotcom-rendering/src/components/CalloutEmbedBlockComponent.importable.tsx +++ b/dotcom-rendering/src/components/CalloutEmbedBlockComponent.importable.tsx @@ -1,5 +1,9 @@ import { css } from '@emotion/react'; -import { palette as srcPalette, textSans } from '@guardian/source-foundations'; +import { + palette as srcPalette, + textSansBold12, + textSansBold17, +} from '@guardian/source-foundations'; import { Button } from '@guardian/source-react-components'; import { useEffect, useState } from 'react'; import { decidePalette } from '../lib/decidePalette'; @@ -38,7 +42,7 @@ const speechBubbleWrapperStyles = css` `; const successTextStyles = css` - ${textSans.medium({ fontWeight: 'bold' })} + ${textSansBold17} `; const summaryStyles = css` @@ -75,7 +79,7 @@ const summaryContentWrapper = css` `; const speechBubbleStyles = (palette: Palette) => css` - ${textSans.medium({ fontWeight: 'bold' })} + ${textSansBold17} color: ${srcPalette.neutral[100]}; background-color: ${palette.background.speechBubble}; min-width: 88px; @@ -93,11 +97,11 @@ const speechBubbleStyles = (palette: Palette) => css` `; const headingTextHeaderStyles = css` - ${textSans.medium({ fontWeight: 'bold' })} + ${textSansBold17} `; const descriptionStyles = css` - ${textSans.xxsmall({ fontWeight: 'bold' })} + ${textSansBold12} `; const headingTextStyles = css` diff --git a/dotcom-rendering/src/components/Caption.amp.tsx b/dotcom-rendering/src/components/Caption.amp.tsx index c5348853484..db5a0175e99 100644 --- a/dotcom-rendering/src/components/Caption.amp.tsx +++ b/dotcom-rendering/src/components/Caption.amp.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import { palette, textSans } from '@guardian/source-foundations'; +import { palette, textSans12 } from '@guardian/source-foundations'; import React from 'react'; import { pillarPalette_DO_NOT_USE } from '../lib/pillars'; import TriangleIcon from '../static/icons/triangle.svg'; @@ -9,7 +9,7 @@ const figureStyle = css` `; const captionStyle = css` padding-top: 10px; - ${textSans.xxsmall()}; + ${textSans12}; word-wrap: break-word; color: ${palette.neutral[46]}; `; diff --git a/dotcom-rendering/src/components/Caption.tsx b/dotcom-rendering/src/components/Caption.tsx index 3202e1dcaaf..a998570d201 100644 --- a/dotcom-rendering/src/components/Caption.tsx +++ b/dotcom-rendering/src/components/Caption.tsx @@ -1,7 +1,13 @@ import { css } from '@emotion/react'; import type { ArticleFormat } from '@guardian/libs'; import { ArticleDesign, ArticleDisplay, ArticleSpecial } from '@guardian/libs'; -import { from, space, textSans, until } from '@guardian/source-foundations'; +import { + from, + space, + textSans, + textSans14, + until, +} from '@guardian/source-foundations'; import { palette } from '../palette'; import CameraSvg from '../static/icons/camera.svg'; import VideoSvg from '../static/icons/video-icon.svg'; @@ -24,7 +30,7 @@ type IconProps = { }; const captionStyle = css` - ${textSans.xsmall()}; + ${textSans14}; line-height: 135%; padding-top: 6px; overflow-wrap: break-word; diff --git a/dotcom-rendering/src/components/Card/components/CardBranding.tsx b/dotcom-rendering/src/components/Card/components/CardBranding.tsx index ff5825de09c..a2b6a9dfd1d 100644 --- a/dotcom-rendering/src/components/Card/components/CardBranding.tsx +++ b/dotcom-rendering/src/components/Card/components/CardBranding.tsx @@ -1,5 +1,9 @@ import { css } from '@emotion/react'; -import { space, textSans, visuallyHidden } from '@guardian/source-foundations'; +import { + space, + textSans12, + visuallyHidden, +} from '@guardian/source-foundations'; import { trackSponsorLogoLinkClick } from '../../../client/ga/ga'; import { decideLogo } from '../../../lib/decideLogo'; import { getZIndex } from '../../../lib/getZIndex'; @@ -33,7 +37,7 @@ const brandingWrapperStyle = css` `; const labelStyle = css` - ${textSans.xxsmall()} + ${textSans12} color: ${themePalette('--card-footer-text')}; `; diff --git a/dotcom-rendering/src/components/Card/components/TrailTextWrapper.tsx b/dotcom-rendering/src/components/Card/components/TrailTextWrapper.tsx index 3760e8d565e..2b12f4c79b6 100644 --- a/dotcom-rendering/src/components/Card/components/TrailTextWrapper.tsx +++ b/dotcom-rendering/src/components/Card/components/TrailTextWrapper.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import { body, remBodySizes, until } from '@guardian/source-foundations'; +import { textEgyptian14, until } from '@guardian/source-foundations'; import { palette } from '../../../palette'; import type { ImagePositionType, ImageSizeType } from './ImageWrapper'; @@ -46,8 +46,7 @@ export const TrailTextWrapper = ({ display: flex; flex-direction: column; color: ${palette('--card-headline-trail-text')}; - ${body.small({ lineHeight: 'regular' })}; - font-size: ${remBodySizes.xsmall}rem; + ${textEgyptian14}; padding-left: 5px; padding-right: 5px; padding-bottom: 8px; diff --git a/dotcom-rendering/src/components/CardHeadline.tsx b/dotcom-rendering/src/components/CardHeadline.tsx index db95f90e15f..4451aa93230 100644 --- a/dotcom-rendering/src/components/CardHeadline.tsx +++ b/dotcom-rendering/src/components/CardHeadline.tsx @@ -9,6 +9,10 @@ import { remBodySizes, space, textSans, + textSans12, + textSans15, + textSans17, + textSans20, until, } from '@guardian/source-foundations'; import { Link, SvgExternal } from '@guardian/source-react-components'; @@ -77,7 +81,7 @@ const fontStyles = ({ case 'tiny': return css` ${headline.xxxsmall(options)}; - font-size: ${remBodySizes.xsmall}rem; + font-size: 14px; `; } }; @@ -131,9 +135,9 @@ const labTextStyles = (size: SmallHeadlineSize) => { case 'huge': case 'large': return css` - ${textSans.large()}; + ${textSans20}; ${until.desktop} { - ${textSans.medium()}; + ${textSans17}; } `; case 'medium': @@ -146,11 +150,11 @@ const labTextStyles = (size: SmallHeadlineSize) => { `; case 'small': return css` - ${textSans.small()}; + ${textSans15}; `; case 'tiny': return css` - ${textSans.xxsmall()}; + ${textSans12}; font-size: ${remBodySizes.xsmall}rem; `; } diff --git a/dotcom-rendering/src/components/Carousel.importable.tsx b/dotcom-rendering/src/components/Carousel.importable.tsx index 1d5c0c8b863..7af0ec1f7f3 100644 --- a/dotcom-rendering/src/components/Carousel.importable.tsx +++ b/dotcom-rendering/src/components/Carousel.importable.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import { ArticleDesign } from '@guardian/libs'; import { from, - headline, + headlineBold24, palette as sourcePalette, space, until, @@ -396,10 +396,10 @@ const headerRowStyles = css` `; const headerStyles = css` - ${headline.xsmall({ fontWeight: 'bold' })}; + ${headlineBold24}; color: ${sourcePalette.neutral[7]}; color: ${themePalette('--carousel-text')}; - ${headline.xsmall({ fontWeight: 'bold' })}; + ${headlineBold24}; padding-bottom: ${space[2]}px; padding-top: ${space[1]}px; margin-left: 0; diff --git a/dotcom-rendering/src/components/CarouselForNewsletters.importable.tsx b/dotcom-rendering/src/components/CarouselForNewsletters.importable.tsx index 5f34ef426f8..744cd70785e 100644 --- a/dotcom-rendering/src/components/CarouselForNewsletters.importable.tsx +++ b/dotcom-rendering/src/components/CarouselForNewsletters.importable.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import { from, - headline, + headlineBold24, palette, space, text, @@ -300,9 +300,9 @@ const headerRowStyles = css` `; const headerStyles = css` - ${headline.xsmall({ fontWeight: 'bold' })}; + ${headlineBold24}; color: ${text.primary}; - ${headline.xsmall({ fontWeight: 'bold' })}; + ${headlineBold24}; padding-bottom: ${space[2]}px; padding-top: ${space[1]}px; margin-left: 0; diff --git a/dotcom-rendering/src/components/ClickToView.stories.tsx b/dotcom-rendering/src/components/ClickToView.stories.tsx index 80e74b2495a..63152a22a24 100644 --- a/dotcom-rendering/src/components/ClickToView.stories.tsx +++ b/dotcom-rendering/src/components/ClickToView.stories.tsx @@ -1,6 +1,6 @@ import { css } from '@emotion/react'; import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs'; -import { textSans } from '@guardian/source-foundations'; +import { textSans17 } from '@guardian/source-foundations'; import type { StoryObj } from '@storybook/react'; import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator'; import type { @@ -41,7 +41,7 @@ const defaultFormat = { }; const paragraphStyle = css` - ${textSans.medium()}; + ${textSans17}; font-weight: 300; margin-top: 0; margin-bottom: 8px; diff --git a/dotcom-rendering/src/components/ClickToView.tsx b/dotcom-rendering/src/components/ClickToView.tsx index fd934fb625d..804801e9ef8 100644 --- a/dotcom-rendering/src/components/ClickToView.tsx +++ b/dotcom-rendering/src/components/ClickToView.tsx @@ -1,5 +1,11 @@ import { css } from '@emotion/react'; -import { space, textSans } from '@guardian/source-foundations'; +import { + space, + textSans15, + textSans17, + textSansBold17, + textSansBold20, +} from '@guardian/source-foundations'; import { Button, SvgCheckmark } from '@guardian/source-react-components'; import { useState } from 'react'; import { palette } from '../palette'; @@ -20,12 +26,12 @@ const roleTextSize = (role: RoleType) => { case 'immersive': case 'inline': case 'showcase': { - return textSans.medium({ lineHeight: 'regular' }); + return textSans17; } case 'halfWidth': case 'supporting': case 'thumbnail': { - return textSans.small({ lineHeight: 'regular' }); + return textSans15; } } }; @@ -35,18 +41,12 @@ const roleHeadlineSize = (role: RoleType) => { case 'immersive': case 'inline': case 'showcase': { - return textSans.large({ - fontWeight: 'bold', - lineHeight: 'regular', - }); + return textSansBold20; } case 'halfWidth': case 'supporting': case 'thumbnail': { - return textSans.medium({ - fontWeight: 'bold', - lineHeight: 'regular', - }); + return textSansBold17; } } }; diff --git a/dotcom-rendering/src/components/CommentBlockComponent.amp.tsx b/dotcom-rendering/src/components/CommentBlockComponent.amp.tsx index b26ee221f68..561eda9120b 100644 --- a/dotcom-rendering/src/components/CommentBlockComponent.amp.tsx +++ b/dotcom-rendering/src/components/CommentBlockComponent.amp.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import { palette, textSans } from '@guardian/source-foundations'; +import { palette, textSans12, textSans17 } from '@guardian/source-foundations'; import type { CommentBlockElement } from '../types/content'; const wrapper = css` @@ -7,7 +7,7 @@ const wrapper = css` position: relative; margin-bottom: 12px; padding-top: 12px; - ${textSans.medium()}; + ${textSans17}; padding-left: 20px; border-left: 8px solid ${palette.neutral[86]}; clear: left; @@ -23,14 +23,14 @@ const metaLink = css` border-bottom: 1px solid ${palette.neutral[86]}; color: ${palette.news[400]}; text-decoration: none; - ${textSans.xxsmall()}; + ${textSans12}; `; const bodyCSS = css` clear: left; p { - ${textSans.medium()}; + ${textSans17}; font-weight: 300; margin-top: 0; margin-bottom: 8px; diff --git a/dotcom-rendering/src/components/CommentBlockComponent.tsx b/dotcom-rendering/src/components/CommentBlockComponent.tsx index e81b49ca321..2d174ebdeed 100644 --- a/dotcom-rendering/src/components/CommentBlockComponent.tsx +++ b/dotcom-rendering/src/components/CommentBlockComponent.tsx @@ -3,7 +3,9 @@ import { palette, space, text as textColor, - textSans, + textSans15, + textSans17, + textSansBold17, } from '@guardian/source-foundations'; import { unescapeData } from '../lib/escapeData'; @@ -17,7 +19,7 @@ type Props = { }; const commentWrapperStyles = css` - ${textSans.medium()}; + ${textSans17}; border-left: 1px ${palette.neutral[86]} solid; border-top: 1px ${palette.neutral[86]} solid; padding-top: ${space[1]}px; @@ -111,7 +113,7 @@ export const CommentBlockComponent = ({

{localisedTitle(title, editionId)} diff --git a/dotcom-rendering/src/components/Contributor.tsx b/dotcom-rendering/src/components/Contributor.tsx index 951b28ea9cd..e34ad84f0e6 100644 --- a/dotcom-rendering/src/components/Contributor.tsx +++ b/dotcom-rendering/src/components/Contributor.tsx @@ -1,6 +1,10 @@ import { css } from '@emotion/react'; import { ArticleDesign, ArticleSpecial } from '@guardian/libs'; -import { headline, textSans, until } from '@guardian/source-foundations'; +import { + headlineMedium17, + textSansItalic17, + until, +} from '@guardian/source-foundations'; import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling'; import { palette as schemedPalette } from '../palette'; import type { TagType } from '../types/tag'; @@ -22,7 +26,7 @@ const standfirstColourBelowDesktop = css` `; const bylineStyles = css` - ${headline.xxxsmall()} + ${headlineMedium17} padding-bottom: 8px; font-style: italic; @@ -41,7 +45,8 @@ const bylineStyles = css` `; const labsBylineStyles = css` - ${textSans.medium({ lineHeight: 'loose' })} + ${textSansItalic17}; + line-height: 1.4; `; type Props = { diff --git a/dotcom-rendering/src/components/CricketScoreboard.tsx b/dotcom-rendering/src/components/CricketScoreboard.tsx index da7d8c47b9f..1edd3b671a5 100644 --- a/dotcom-rendering/src/components/CricketScoreboard.tsx +++ b/dotcom-rendering/src/components/CricketScoreboard.tsx @@ -1,5 +1,10 @@ import { css } from '@emotion/react'; -import { between, space, textSans, until } from '@guardian/source-foundations'; +import { + between, + space, + textSans14, + until, +} from '@guardian/source-foundations'; import { decidePalette } from '../lib/decidePalette'; import type { EditionId } from '../lib/edition'; import type { Palette } from '../types/palette'; @@ -36,7 +41,7 @@ const containerStyle = css` const tableStyle = css` width: 100%; - ${textSans.xsmall()} + ${textSans14} `; const captionStyle = (palette: Palette) => css` diff --git a/dotcom-rendering/src/components/DarkModeMessage.tsx b/dotcom-rendering/src/components/DarkModeMessage.tsx index 106ed7522e0..da137b7d36a 100644 --- a/dotcom-rendering/src/components/DarkModeMessage.tsx +++ b/dotcom-rendering/src/components/DarkModeMessage.tsx @@ -1,12 +1,12 @@ import { css } from '@emotion/react'; -import { from, palette, space, textSans } from '@guardian/source-foundations'; +import { from, palette, space, textSans17 } from '@guardian/source-foundations'; export const DarkModeMessage = () => (