diff --git a/dotcom-rendering/src/components/TextBlockComponent.tsx b/dotcom-rendering/src/components/TextBlockComponent.tsx index 655757d006..acea33aec5 100644 --- a/dotcom-rendering/src/components/TextBlockComponent.tsx +++ b/dotcom-rendering/src/components/TextBlockComponent.tsx @@ -17,7 +17,6 @@ import { type ArticleFormat, ArticleSpecial, } from '../lib/articleFormat'; -import { decidePalette } from '../lib/decidePalette'; import { getAttrs, isElement, parseHtml } from '../lib/domUtils'; import { palette as themePalette } from '../palette'; import { logger } from '../server/lib/logging'; @@ -228,7 +227,7 @@ const styles = (format: ArticleFormat) => css` border-radius: 50%; height: ${remSpace[2]}; width: ${remSpace[2]}; - background-color: ${decidePalette(format).background.bullet}; + background-color: ${themePalette('--textblock-bullet-background')}; } ${until.tablet} { diff --git a/dotcom-rendering/src/lib/decidePalette.ts b/dotcom-rendering/src/lib/decidePalette.ts index a2ca4b6e86..a7c837d2f0 100644 --- a/dotcom-rendering/src/lib/decidePalette.ts +++ b/dotcom-rendering/src/lib/decidePalette.ts @@ -86,22 +86,6 @@ const textStandfirstLink = (format: ArticleFormat): string => { } }; -const backgroundBullet = (format: ArticleFormat): string => { - if (format.theme === ArticleSpecial.Labs) return BLACK; - if (format.theme === ArticleSpecial.SpecialReport) { - return specialReport[300]; - } - if (format.design === ArticleDesign.Analysis) { - switch (format.theme) { - case Pillar.News: - return news[300]; - default: - return pillarPalette[format.theme].main; - } - } - return pillarPalette[format.theme].main; -}; - const backgroundBulletStandfirst = (format: ArticleFormat): string => { if ( format.design === ArticleDesign.DeadBlog || @@ -425,7 +409,6 @@ export const decidePalette = (format: ArticleFormat): Palette => { background: { analysisContrast: backgroundAnalysisContrastColour(), analysisContrastHover: backgroundAnalysisContrastHoverColour(), - bullet: backgroundBullet(format), bulletStandfirst: backgroundBulletStandfirst(format), filterButton: backgroundFilterButton(), filterButtonHover: backgroundFilterButtonHover(format), diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts index cf2814f0d3..73c8b05756 100644 --- a/dotcom-rendering/src/paletteDeclarations.ts +++ b/dotcom-rendering/src/paletteDeclarations.ts @@ -50,8 +50,33 @@ const pillarPalette = ( } }; -const textblockTextLight: PaletteFunction = (format: ArticleFormat) => { - switch (format.design) { +const textblockBulletLight: PaletteFunction = ({ theme, design }) => { + switch (theme) { + case Pillar.News: { + return design === ArticleDesign.Analysis + ? sourcePalette.news[300] + : sourcePalette.news[400]; + } + case Pillar.Opinion: + case Pillar.Sport: + case Pillar.Culture: + case Pillar.Lifestyle: { + return pillarPalette(theme, 400); + } + case ArticleSpecial.Labs: { + return sourcePalette.neutral[7]; + } + case ArticleSpecial.SpecialReport: { + return sourcePalette.specialReport[300]; + } + case ArticleSpecial.SpecialReportAlt: { + return sourcePalette.specialReportAlt[200]; + } + } +}; + +const textblockTextLight: PaletteFunction = ({ design }) => { + switch (design) { case ArticleDesign.Audio: return sourcePalette.neutral[97]; default: @@ -7102,6 +7127,10 @@ const paletteColours = { light: () => sourcePalette.neutral[0], dark: () => sourcePalette.neutral[86], }, + '--textblock-bullet-background': { + light: textblockBulletLight, + dark: textblockBulletLight, + }, '--textblock-text': { light: textblockTextLight, dark: textblockTextDark, diff --git a/dotcom-rendering/src/types/palette.ts b/dotcom-rendering/src/types/palette.ts index 98a5fc7046..ac904af5a0 100644 --- a/dotcom-rendering/src/types/palette.ts +++ b/dotcom-rendering/src/types/palette.ts @@ -16,7 +16,6 @@ export type Palette = { background: { analysisContrast: Colour; analysisContrastHover: Colour; - bullet: Colour; bulletStandfirst: Colour; filterButton: Colour; filterButtonHover: Colour;