From e2689a9ef3d1e47010236415b55dcb099f6cc7a5 Mon Sep 17 00:00:00 2001 From: DanielCliftonGuardian <110032454+DanielCliftonGuardian@users.noreply.github.com> Date: Mon, 23 Oct 2023 14:38:02 +0100 Subject: [PATCH 1/3] support dark theme and stories --- .../src/components/Accordion.stories.tsx | 9 ++++ dotcom-rendering/src/components/Accordion.tsx | 15 ++++--- dotcom-rendering/src/palette.ts | 44 +++++++++++++++++++ 3 files changed, 62 insertions(+), 6 deletions(-) diff --git a/dotcom-rendering/src/components/Accordion.stories.tsx b/dotcom-rendering/src/components/Accordion.stories.tsx index 14fba91b945..825f6b0ac49 100644 --- a/dotcom-rendering/src/components/Accordion.stories.tsx +++ b/dotcom-rendering/src/components/Accordion.stories.tsx @@ -1,6 +1,8 @@ import { css } from '@emotion/react'; import type { SerializedStyles } from '@emotion/react'; +import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs'; import { body, breakpoints, from, space } from '@guardian/source-foundations'; +import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator'; import { Accordion } from './Accordion'; const textStyle = css` @@ -26,6 +28,12 @@ const adviceColourAboveTablet: SerializedStyles = css` } `; +const articleFormat: ArticleFormat = { + design: ArticleDesign.Standard, + display: ArticleDisplay.Standard, + theme: Pillar.News, +}; + const accordionContent = ( <>

@@ -59,6 +67,7 @@ export default { viewports: [breakpoints.mobile, breakpoints.tablet], }, }, + decorators: [splitTheme(articleFormat)], }; export const Default = () => ( diff --git a/dotcom-rendering/src/components/Accordion.tsx b/dotcom-rendering/src/components/Accordion.tsx index 36fdfecf7a3..163ae1c8722 100644 --- a/dotcom-rendering/src/components/Accordion.tsx +++ b/dotcom-rendering/src/components/Accordion.tsx @@ -12,6 +12,7 @@ import { SvgChevronDownSingle, SvgChevronUpSingle, } from '@guardian/source-react-components'; +import { palette } from '../palette'; interface Props { children: React.ReactNode; @@ -34,14 +35,14 @@ const titleRowStyles = css` position: relative; display: block; align-items: center; - border-top: ${neutral[86]} 1px solid; - background-color: ${neutral[100]}; + border-top: ${palette('--accordion-title-row-styles-border-top')} 1px solid; + background-color: ${palette('--accordion-title-row-styles-background')}; padding: ${space[2]}px ${space[2]}px ${space[2]}px ${space[3]}px; &:focus { ${focusHalo}; } path { - fill: ${neutral[46]}; + fill: ${palette('--accordion-title-row-styles-fill')}; } svg { height: 2rem; @@ -57,7 +58,7 @@ const titleRowStyles = css` const titleStyle = css` ${headline.xxsmall({ fontWeight: 'bold', lineHeight: 'tight' })}; - color: ${neutral[7]}; + color: ${palette('--accordion-title-style-colour')}; `; const arrowPosition: SerializedStyles = css` @@ -75,14 +76,16 @@ const backgroundColour = ( ): SerializedStyles => { if (context === 'keyEvents') { return css` - background-color: ${background.primary}; + background-color: ${palette( + '--accordion-key-events-background-colour', + )}; ${from.desktop} { background-color: transparent; } `; } return css` - background-color: ${neutral[97]}; + background-color: ${palette('--accordion-live-feed-background-colour')}; ${from.desktop} { background-color: transparent; } diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts index 6a5b7ff88ad..9c876678f77 100644 --- a/dotcom-rendering/src/palette.ts +++ b/dotcom-rendering/src/palette.ts @@ -48,6 +48,26 @@ const starRatingBackgroundColourLight = (): string => const starRatingBackgroundColourDark = (): string => sourcePalette.brandAlt[200]; +const accordionTitleRowStylesFillColourLight = (): string => + sourcePalette.neutral[46]; +const accordionTitleRowStylesFillColourDark = (): string => + sourcePalette.neutral[60]; +const accordionTitleRowStylesBackgroundColourLight = (): string => + sourcePalette.neutral[100]; +const accordionTitleRowStylesBackgroundColourDark = (): string => + sourcePalette.neutral[10]; +const accordionTitleRowStylesBorderColourTopLight = (): string => + sourcePalette.neutral[86]; +const accordionTitleRowStylesBorderColourTopDark = (): string => + sourcePalette.neutral[20]; +const accordionTitleStylesColourLight = (): string => sourcePalette.neutral[7]; +const accordionTitleStylesColourDark = (): string => sourcePalette.neutral[86]; +const accordionKeyEventsBackgroundColourLight = (): string => + sourcePalette.neutral[100]; +const accordionBackgroundColourDark = (): string => sourcePalette.neutral[10]; +const accordionLiveFeedBackgroundColourLight = (): string => + sourcePalette.neutral[97]; + // ----- Palette ----- // /** @@ -97,6 +117,30 @@ const paletteColours = { light: starRatingBackgroundColourLight, dark: starRatingBackgroundColourDark, }, + '--accordion-title-row-styles-fill': { + light: accordionTitleRowStylesFillColourLight, + dark: accordionTitleRowStylesFillColourDark, + }, + '--accordion-title-row-styles-background': { + light: accordionTitleRowStylesBackgroundColourLight, + dark: accordionTitleRowStylesBackgroundColourDark, + }, + '--accordion-title-row-styles-border-top': { + light: accordionTitleRowStylesBorderColourTopLight, + dark: accordionTitleRowStylesBorderColourTopDark, + }, + '--accordion-title-style-colour': { + light: accordionTitleStylesColourLight, + dark: accordionTitleStylesColourDark, + }, + '--accordion-key-events-background-colour': { + light: accordionKeyEventsBackgroundColourLight, + dark: accordionBackgroundColourDark, + }, + '--accordion-live-feed-background-colour': { + light: accordionLiveFeedBackgroundColourLight, + dark: accordionBackgroundColourDark, + }, } satisfies PaletteColours; /** From 56ad182bd1c55b1ff333bebe8176fde858aae8d1 Mon Sep 17 00:00:00 2001 From: DanielCliftonGuardian <110032454+DanielCliftonGuardian@users.noreply.github.com> Date: Mon, 23 Oct 2023 14:38:55 +0100 Subject: [PATCH 2/3] Update Accordion.tsx --- dotcom-rendering/src/components/Accordion.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/dotcom-rendering/src/components/Accordion.tsx b/dotcom-rendering/src/components/Accordion.tsx index 163ae1c8722..c663f6e61c6 100644 --- a/dotcom-rendering/src/components/Accordion.tsx +++ b/dotcom-rendering/src/components/Accordion.tsx @@ -1,13 +1,6 @@ import { css } from '@emotion/react'; import type { SerializedStyles } from '@emotion/react'; -import { - background, - focusHalo, - from, - headline, - neutral, - space, -} from '@guardian/source-foundations'; +import { focusHalo, from, headline, space } from '@guardian/source-foundations'; import { SvgChevronDownSingle, SvgChevronUpSingle, From 09e9959be6b456a9ad9238056658334a17fb4930 Mon Sep 17 00:00:00 2001 From: DanielCliftonGuardian <110032454+DanielCliftonGuardian@users.noreply.github.com> Date: Wed, 25 Oct 2023 10:14:35 +0100 Subject: [PATCH 3/3] remove obsolete wording --- dotcom-rendering/src/components/Accordion.tsx | 14 ++--- dotcom-rendering/src/palette.ts | 63 +++++++++---------- 2 files changed, 35 insertions(+), 42 deletions(-) diff --git a/dotcom-rendering/src/components/Accordion.tsx b/dotcom-rendering/src/components/Accordion.tsx index c663f6e61c6..6b21ddcc639 100644 --- a/dotcom-rendering/src/components/Accordion.tsx +++ b/dotcom-rendering/src/components/Accordion.tsx @@ -28,14 +28,14 @@ const titleRowStyles = css` position: relative; display: block; align-items: center; - border-top: ${palette('--accordion-title-row-styles-border-top')} 1px solid; - background-color: ${palette('--accordion-title-row-styles-background')}; + border-top: ${palette('--accordion-title-row-border-top')} 1px solid; + background-color: ${palette('--accordion-title-row-background')}; padding: ${space[2]}px ${space[2]}px ${space[2]}px ${space[3]}px; &:focus { ${focusHalo}; } path { - fill: ${palette('--accordion-title-row-styles-fill')}; + fill: ${palette('--accordion-title-row-fill')}; } svg { height: 2rem; @@ -51,7 +51,7 @@ const titleRowStyles = css` const titleStyle = css` ${headline.xxsmall({ fontWeight: 'bold', lineHeight: 'tight' })}; - color: ${palette('--accordion-title-style-colour')}; + color: ${palette('--accordion-title')}; `; const arrowPosition: SerializedStyles = css` @@ -69,16 +69,14 @@ const backgroundColour = ( ): SerializedStyles => { if (context === 'keyEvents') { return css` - background-color: ${palette( - '--accordion-key-events-background-colour', - )}; + background-color: ${palette('--accordion-key-events-background')}; ${from.desktop} { background-color: transparent; } `; } return css` - background-color: ${palette('--accordion-live-feed-background-colour')}; + background-color: ${palette('--accordion-live-feed-background')}; ${from.desktop} { background-color: transparent; } diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts index aa2ba3c9adb..839ac4e923f 100644 --- a/dotcom-rendering/src/palette.ts +++ b/dotcom-rendering/src/palette.ts @@ -48,24 +48,19 @@ const starRatingBackgroundColourLight = (): string => const starRatingBackgroundColourDark = (): string => sourcePalette.brandAlt[200]; -const accordionTitleRowStylesFillColourLight = (): string => - sourcePalette.neutral[46]; -const accordionTitleRowStylesFillColourDark = (): string => - sourcePalette.neutral[60]; -const accordionTitleRowStylesBackgroundColourLight = (): string => +const accordionTitleRowFillLight = (): string => sourcePalette.neutral[46]; +const accordionTitleRowFillDark = (): string => sourcePalette.neutral[60]; +const accordionTitleRowBackgroundLight = (): string => sourcePalette.neutral[100]; -const accordionTitleRowStylesBackgroundColourDark = (): string => - sourcePalette.neutral[10]; -const accordionTitleRowStylesBorderColourTopLight = (): string => - sourcePalette.neutral[86]; -const accordionTitleRowStylesBorderColourTopDark = (): string => - sourcePalette.neutral[20]; -const accordionTitleStylesColourLight = (): string => sourcePalette.neutral[7]; -const accordionTitleStylesColourDark = (): string => sourcePalette.neutral[86]; -const accordionKeyEventsBackgroundColourLight = (): string => +const accordionTitleRowBackgroundDark = (): string => sourcePalette.neutral[10]; +const accordionTitleRowBorderTopLight = (): string => sourcePalette.neutral[86]; +const accordionTitleRowBorderTopDark = (): string => sourcePalette.neutral[20]; +const accordionTitleLight = (): string => sourcePalette.neutral[7]; +const accordionTitleDark = (): string => sourcePalette.neutral[86]; +const accordionKeyEventsBackgroundLight = (): string => sourcePalette.neutral[100]; -const accordionBackgroundColourDark = (): string => sourcePalette.neutral[10]; -const accordionLiveFeedBackgroundColourLight = (): string => +const accordionBackgroundDark = (): string => sourcePalette.neutral[10]; +const accordionLiveFeedBackgroundLight = (): string => sourcePalette.neutral[97]; // ----- Palette ----- // @@ -117,29 +112,29 @@ const paletteColours = { light: starRatingBackgroundColourLight, dark: starRatingBackgroundColourDark, }, - '--accordion-title-row-styles-fill': { - light: accordionTitleRowStylesFillColourLight, - dark: accordionTitleRowStylesFillColourDark, + '--accordion-title-row-fill': { + light: accordionTitleRowFillLight, + dark: accordionTitleRowFillDark, }, - '--accordion-title-row-styles-background': { - light: accordionTitleRowStylesBackgroundColourLight, - dark: accordionTitleRowStylesBackgroundColourDark, + '--accordion-title-row-background': { + light: accordionTitleRowBackgroundLight, + dark: accordionTitleRowBackgroundDark, }, - '--accordion-title-row-styles-border-top': { - light: accordionTitleRowStylesBorderColourTopLight, - dark: accordionTitleRowStylesBorderColourTopDark, + '--accordion-title-row-border-top': { + light: accordionTitleRowBorderTopLight, + dark: accordionTitleRowBorderTopDark, }, - '--accordion-title-style-colour': { - light: accordionTitleStylesColourLight, - dark: accordionTitleStylesColourDark, + '--accordion-title': { + light: accordionTitleLight, + dark: accordionTitleDark, }, - '--accordion-key-events-background-colour': { - light: accordionKeyEventsBackgroundColourLight, - dark: accordionBackgroundColourDark, + '--accordion-key-events-background': { + light: accordionKeyEventsBackgroundLight, + dark: accordionBackgroundDark, }, - '--accordion-live-feed-background-colour': { - light: accordionLiveFeedBackgroundColourLight, - dark: accordionBackgroundColourDark, + '--accordion-live-feed-background': { + light: accordionLiveFeedBackgroundLight, + dark: accordionBackgroundDark, }, } satisfies PaletteColours;