Scrollable small container: support for special palettes (#12580)

* Add support for container palettes

* Add type to button themes

dotcom-rendering/src/components/ContainerOverrides.tsx

@@ -1050,6 +1050,28 @@ const carouselArrowBackgroundHover: ContainerFunction = (containerPalette) => {
 	}
 };
 
+const carouselChevronLight: ContainerFunction = (containerPalette) =>
+	cardHeadlineLight(containerPalette);
+const carouselChevronDark: ContainerFunction = (containerPalette) =>
+	cardHeadlineDark(containerPalette);
+
+const carouselChevronBorderLight: ContainerFunction = (containerPalette) =>
+	transparentColour(cardHeadlineLight(containerPalette), 0.2);
+const carouselChevronBorderDark: ContainerFunction = (containerPalette) =>
+	transparentColour(cardHeadlineDark(containerPalette), 0.4);
+
+const carouselChevronDisabledLight: ContainerFunction = (containerPalette) =>
+	transparentColour(cardHeadlineLight(containerPalette), 0.2);
+const carouselChevronDisabledDark: ContainerFunction = (containerPalette) =>
+	transparentColour(cardHeadlineDark(containerPalette), 0.4);
+
+const carouselChevronBorderDisabledLight: ContainerFunction = (
+	containerPalette,
+) => transparentColour(cardHeadlineLight(containerPalette), 0.2);
+const carouselChevronBorderDisabledDark: ContainerFunction = (
+	containerPalette,
+) => transparentColour(cardHeadlineDark(containerPalette), 0.4);
+
 type ColourName = Parameters<typeof palette>[0];
 
 type ContainerFunction = (containerPalette: DCRContainerPalette) => string;
@@ -1163,6 +1185,22 @@ const containerColours = {
 		light: carouselArrowBackgroundHover,
 		dark: carouselArrowBackgroundHover,
 	},
+	'--carousel-chevron': {
+		light: carouselChevronLight,
+		dark: carouselChevronDark,
+	},
+	'--carousel-chevron-border': {
+		light: carouselChevronBorderLight,
+		dark: carouselChevronBorderDark,
+	},
+	'--carousel-chevron-border-disabled': {
+		light: carouselChevronBorderDisabledLight,
+		dark: carouselChevronBorderDisabledDark,
+	},
+	'--carousel-chevron-disabled': {
+		light: carouselChevronDisabledLight,
+		dark: carouselChevronDisabledDark,
+	},
 	'--section-border': {
 		light: sectionBorderLight,
 		dark: sectionBorderDark,

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

@@ -9,6 +9,7 @@ import {
 	Hide,
 	SvgChevronLeftSingle,
 	SvgChevronRightSingle,
+	type ThemeButton,
 } from '@guardian/source/react-components';
 import { useEffect, useRef, useState } from 'react';
 import { palette } from '../palette';
@@ -41,12 +42,12 @@ const titlePreset = headlineMedium24Object;
 const gridColumnWidth = '60px';
 const gridGap = '20px';
 
-const themeButton = {
+const themeButton: Partial<ThemeButton> = {
 	borderTertiary: palette('--carousel-chevron-border'),
 	textTertiary: palette('--carousel-chevron'),
 };
 
-const themeButtonDisabled = {
+const themeButtonDisabled: Partial<ThemeButton> = {
 	borderTertiary: palette('--carousel-chevron-border-disabled'),
 	textTertiary: palette('--carousel-chevron-disabled'),
 };

dotcom-rendering/src/components/ScrollableSmall.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
 import { trails } from '../../fixtures/manual/highlights-trails';
+import type { DCRContainerPalette } from '../types/front';
 import { FrontSection } from './FrontSection';
 import { ScrollableSmall } from './ScrollableSmall.importable';
 
@@ -33,3 +34,41 @@ export const WithFrontSection = {
 		</FrontSection>
 	),
 } satisfies Story;
+
+const containerPalettes = [
+	'InvestigationPalette',
+	'LongRunningPalette',
+	'SombrePalette',
+	'BreakingPalette',
+	'EventPalette',
+	'EventAltPalette',
+	'LongRunningAltPalette',
+	'SombreAltPalette',
+	'SpecialReportAltPalette',
+	'Branded',
+] as const satisfies readonly Omit<
+	DCRContainerPalette,
+	'MediaPalette' | 'PodcastPalette'
+>[];
+
+export const WithSpecialPaletteVariations = {
+	render: (args) => (
+		<>
+			{containerPalettes.map((containerPalette) => (
+				<FrontSection
+					title="Scrollable small"
+					discussionApiUrl={discussionApiUrl}
+					editionId={'UK'}
+					showTopBorder={false}
+					key={containerPalette}
+					containerPalette={containerPalette}
+				>
+					<ScrollableSmall
+						{...args}
+						containerPalette={containerPalette}
+					/>
+				</FrontSection>
+			))}
+		</>
+	),
+} satisfies Story;