From 596fb50dd39d4bad7ec0c2268bfbf6e30155ed40 Mon Sep 17 00:00:00 2001 From: alex-magana Date: Tue, 14 Jul 2026 16:17:13 +0300 Subject: [PATCH] Update GREY_10 and GREY_2 colour values [copilot] Switches text and background palette values from #141414/#F6F6F6 to #181818/#F8F8F8 across theme tokens, docs, storybook values, and related component tests.\n\nCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .storybook/preview.tsx | 4 ++-- docs/User-Experience/colours.tsx | 8 ++++---- src/app/components/CallToActionLink/README.md | 2 +- src/app/components/CallToActionLink/Text/README.md | 2 +- .../components/Embeds/Uploader/index.stories.tsx | 2 +- src/app/components/Heading/index.test.tsx | 2 +- src/app/components/MessageBanner/index.styles.tsx | 2 +- src/app/components/Paragraph/index.test.tsx | 4 ++-- .../RelatedContentSection/index.stories.tsx | 2 +- src/app/components/Text/index.test.tsx | 14 +++++++------- src/app/components/ThemeProvider/README.md | 4 ++-- src/app/components/ThemeProvider/palette.ts | 4 ++-- .../ThemeProviderSCSSModules/palette.scss | 4 ++-- .../TopStoriesSection/index.stories.tsx | 2 +- 14 files changed, 28 insertions(+), 28 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 85e3e3c9c9c..02ac9727759 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -116,10 +116,10 @@ const preview: Preview = { }, backgrounds: { options: { - dark: { name: 'Dark', value: '#141414' }, + dark: { name: 'Dark', value: '#181818' }, light: { name: 'Light', value: '#F7F9F2' }, White: { name: 'White', value: '#FFFFFF' }, - Optimo: { name: 'Optimo', value: '#F6F6F6' }, + Optimo: { name: 'Optimo', value: '#F8F8F8' }, }, }, chromatic: { diff --git a/docs/User-Experience/colours.tsx b/docs/User-Experience/colours.tsx index 8cd845c59ec..05aa7e5fa31 100644 --- a/docs/User-Experience/colours.tsx +++ b/docs/User-Experience/colours.tsx @@ -14,9 +14,9 @@ export const LEGACY = [ { colorName: 'DIM_GREY ', colorCode: '#696969' }, { colorName: 'EBON ', colorCode: '#222222' }, { colorName: 'GHOST ', colorCode: '#FDFDFD' }, - { colorName: 'GREY_10 ', colorCode: '#141414' }, + { colorName: 'GREY_10 ', colorCode: '#181818' }, { colorName: 'GREY_11 ', colorCode: '#BABABA' }, - { colorName: 'GREY_2 ', colorCode: '#F6F6F6' }, + { colorName: 'GREY_2 ', colorCode: '#F8F8F8' }, { colorName: 'GREY_3 ', colorCode: '#E6E8EA' }, { colorName: 'GREY_4 ', colorCode: '#B0B2B4' }, { colorName: 'GREY_5 ', colorCode: '#8A8C8E' }, @@ -77,7 +77,7 @@ export const SERVICE = [ export const FOUNDATION = [ { colorName: 'WHITE', colorCode: '#FFFFFF' }, { colorName: 'GREY1', colorCode: '#FEFEFE' }, - { colorName: 'GREY2', colorCode: '#F6F6F6' }, + { colorName: 'GREY2', colorCode: '#F8F8F8' }, { colorName: 'GREY3', colorCode: '#E6E8EA' }, { colorName: 'GREY4', colorCode: '#B0B2B4' }, { colorName: 'GREY5', colorCode: '#8A8C8E' }, @@ -85,6 +85,6 @@ export const FOUNDATION = [ { colorName: 'GREY7', colorCode: '#3A3C3E' }, { colorName: 'GREY8', colorCode: '#202224' }, { colorName: 'GREY9', colorCode: '#141618' }, - { colorName: 'GREY10', colorCode: '#141414' }, + { colorName: 'GREY10', colorCode: '#181818' }, { colorName: 'BLACK', colorCode: '#000000' }, ]; diff --git a/src/app/components/CallToActionLink/README.md b/src/app/components/CallToActionLink/README.md index d1fcac17c74..6a85fe12267 100644 --- a/src/app/components/CallToActionLink/README.md +++ b/src/app/components/CallToActionLink/README.md @@ -103,7 +103,7 @@ calltoActionLink: ({ palette }: Theme) => color: palette.BLACK, '&:hover, &:focus': { - backgroundColor: '#F6F6F6', + backgroundColor: '#F8F8F8', color: palette.BLACK, } } diff --git a/src/app/components/CallToActionLink/Text/README.md b/src/app/components/CallToActionLink/Text/README.md index acd120d13e1..8cb6b2d833a 100644 --- a/src/app/components/CallToActionLink/Text/README.md +++ b/src/app/components/CallToActionLink/Text/README.md @@ -72,7 +72,7 @@ In `index.styles.ts`: color: palette.BLACK, '&:hover, &:focus': { - backgroundColor: '#F6F6F6', + backgroundColor: '#F8F8F8', color: palette.BLACK, }, '& span': diff --git a/src/app/components/Embeds/Uploader/index.stories.tsx b/src/app/components/Embeds/Uploader/index.stories.tsx index 9631a455244..cf551567e78 100644 --- a/src/app/components/Embeds/Uploader/index.stories.tsx +++ b/src/app/components/Embeds/Uploader/index.stories.tsx @@ -12,7 +12,7 @@ interface ComponentProps { const Component = ({ blocks }: PropsWithChildren) => (
diff --git a/src/app/components/Heading/index.test.tsx b/src/app/components/Heading/index.test.tsx index 049179db700..5906ca5dac8 100644 --- a/src/app/components/Heading/index.test.tsx +++ b/src/app/components/Heading/index.test.tsx @@ -20,7 +20,7 @@ describe('Heading', () => { }); expect(screen.getByText('Hello World!')).toHaveStyle({ - color: '#141414', + color: '#181818', fontSize: '1.75rem', lineHeight: '2.25rem', fontFamily: 'ReithSans,Helvetica,Arial,sans-serif', diff --git a/src/app/components/MessageBanner/index.styles.tsx b/src/app/components/MessageBanner/index.styles.tsx index 954aa2e0098..ddac03828fe 100644 --- a/src/app/components/MessageBanner/index.styles.tsx +++ b/src/app/components/MessageBanner/index.styles.tsx @@ -54,7 +54,7 @@ const styles = { width: '100%', color: palette.BLACK, '&:hover, &:focus': { - backgroundColor: '#F6F6F6', + backgroundColor: '#F8F8F8', color: palette.BLACK, }, [mq.GROUP_3_MIN_WIDTH]: { diff --git a/src/app/components/Paragraph/index.test.tsx b/src/app/components/Paragraph/index.test.tsx index 0e707e61033..920c68e5278 100644 --- a/src/app/components/Paragraph/index.test.tsx +++ b/src/app/components/Paragraph/index.test.tsx @@ -14,7 +14,7 @@ describe('Paragraph', () => { }); expect(screen.getByText('Hello World!')).toHaveStyle({ - color: '#141414', + color: '#181818', fontSize: '0.9375rem', lineHeight: '1.25rem', fontFamily: 'ReithSans,Helvetica,Arial,sans-serif', @@ -30,7 +30,7 @@ describe('Paragraph', () => { }); expect(screen.getByText('Hello World!')).toHaveStyle({ - color: '#141414', + color: '#181818', fontSize: '0.9375rem', lineHeight: '1.5rem', fontFamily: diff --git a/src/app/components/RelatedContentSection/index.stories.tsx b/src/app/components/RelatedContentSection/index.stories.tsx index ed9fe6bdb50..cd0eee77640 100644 --- a/src/app/components/RelatedContentSection/index.stories.tsx +++ b/src/app/components/RelatedContentSection/index.stories.tsx @@ -15,7 +15,7 @@ import readme from './README.md'; const BackGround = styled.div` width: 100%; height: 100%; - background-color: #f6f6f6; + background-color: #f8f8f8; padding: 2rem; `; diff --git a/src/app/components/Text/index.test.tsx b/src/app/components/Text/index.test.tsx index e9d869ea0fd..aaa9155381c 100644 --- a/src/app/components/Text/index.test.tsx +++ b/src/app/components/Text/index.test.tsx @@ -20,7 +20,7 @@ describe('Text', () => { }); expect(screen.getByText('Hello World!')).toHaveStyle({ - color: '#141414', + color: '#181818', fontSize: '0.9375rem', lineHeight: '1.25rem', fontFamily: 'ReithSans,Helvetica,Arial,sans-serif', @@ -35,7 +35,7 @@ describe('Text', () => { }); expect(screen.getByText('Hello World!')).toHaveStyle({ - color: '#141414', + color: '#181818', fontSize: '0.9375rem', lineHeight: '1.25rem', fontFamily: 'ReithSerif,Helvetica,Arial,sans-serif', @@ -50,7 +50,7 @@ describe('Text', () => { }); expect(screen.getByText('Hello World!')).toHaveStyle({ - color: '#141414', + color: '#181818', fontSize: '0.9375rem', lineHeight: '1.5rem', fontFamily: @@ -64,7 +64,7 @@ describe('Text', () => { render(Hello World!); expect(screen.getByText('Hello World!')).toHaveStyle({ - color: '#141414', + color: '#181818', fontSize: '4.875rem', lineHeight: '5.25rem', fontFamily: 'ReithSans,Helvetica,Arial,sans-serif', @@ -79,7 +79,7 @@ describe('Text', () => { }); expect(screen.getByText('Hello World!')).toHaveStyle({ - color: '#141414', + color: '#181818', fontSize: '0.9375rem', lineHeight: '1.25rem', fontFamily: 'ReithSans,Helvetica,Arial,sans-serif', @@ -94,7 +94,7 @@ describe('Text', () => { }); expect(screen.getByText('Hello World!')).toHaveStyle({ - color: '#141414', + color: '#181818', fontSize: '0.9375rem', lineHeight: '1.25rem', fontFamily: 'ReithSerif,Helvetica,Arial,sans-serif', @@ -109,7 +109,7 @@ describe('Text', () => { }); expect(screen.getByText('Hello World!')).toHaveStyle({ - color: '#141414', + color: '#181818', fontSize: '0.9375rem', lineHeight: '1.5rem', fontFamily: diff --git a/src/app/components/ThemeProvider/README.md b/src/app/components/ThemeProvider/README.md index 5403a9603d4..61e510349f7 100644 --- a/src/app/components/ThemeProvider/README.md +++ b/src/app/components/ThemeProvider/README.md @@ -153,9 +153,9 @@ The available colours. Click on any colour to see the colour in https://color-he - [`DIM_GREY`](https://www.color-hex.com/color/696969) - [`EBON`](https://www.color-hex.com/color/222222) - [`GHOST`](https://www.color-hex.com/color/FDFDFD) -- [`GREY_10`](https://www.color-hex.com/color/141414) +- [`GREY_10`](https://www.color-hex.com/color/181818) - [`GREY_11`](https://www.color-hex.com/color/BABABA) -- [`GREY_2`](https://www.color-hex.com/color/F6F6F6) +- [`GREY_2`](https://www.color-hex.com/color/F8F8F8) - [`GREY_3`](https://www.color-hex.com/color/E6E8EA) - [`GREY_6`](https://www.color-hex.com/color/545658) - [`GREY_8`](https://www.color-hex.com/color/202224) diff --git a/src/app/components/ThemeProvider/palette.ts b/src/app/components/ThemeProvider/palette.ts index c8b2479af5a..2c06331c2bb 100644 --- a/src/app/components/ThemeProvider/palette.ts +++ b/src/app/components/ThemeProvider/palette.ts @@ -15,14 +15,14 @@ export const EBON = '#222222'; export const ERROR_CORE = '#E51854'; export const GHOST = '#FDFDFD'; export const GREY_1 = '#FEFEFE'; -export const GREY_2 = '#F6F6F6'; +export const GREY_2 = '#F8F8F8'; export const GREY_3 = '#E6E8EA'; export const GREY_4 = '#B0B2B4'; export const GREY_5 = '#8A8C8E'; export const GREY_6 = '#545658'; export const GREY_7 = '#3A3C3E'; export const GREY_8 = '#202224'; -export const GREY_10 = '#141414'; +export const GREY_10 = '#181818'; export const GREY_11 = '#BABABA'; export const GREY_15 = '#202020'; export const GREY_16 = '#181818'; diff --git a/src/app/components/ThemeProviderSCSSModules/palette.scss b/src/app/components/ThemeProviderSCSSModules/palette.scss index 7017cf5f7a2..225441657fe 100644 --- a/src/app/components/ThemeProviderSCSSModules/palette.scss +++ b/src/app/components/ThemeProviderSCSSModules/palette.scss @@ -16,10 +16,10 @@ $dim-grey: #696969; $ebon: #222222; $error-core: #e51854; $ghost: #fdfdfd; -$grey-10: #141414; +$grey-10: #181818; $grey-11: #bababa; $grey-1: #fefefe; -$grey-2: #f6f6f6; +$grey-2: #f8f8f8; $grey-3: #e6e8ea; $grey-4: #b0b2b4; $grey-5: #8a8c8e; diff --git a/src/app/pages/ArticlePage/PagePromoSections/TopStoriesSection/index.stories.tsx b/src/app/pages/ArticlePage/PagePromoSections/TopStoriesSection/index.stories.tsx index 0052cc9f4e9..434eceba26a 100644 --- a/src/app/pages/ArticlePage/PagePromoSections/TopStoriesSection/index.stories.tsx +++ b/src/app/pages/ArticlePage/PagePromoSections/TopStoriesSection/index.stories.tsx @@ -19,7 +19,7 @@ import { TopStoryItem } from './types'; const BackGround = styled.div` width: 100%; height: 100%; - background-color: #f6f6f6; + background-color: #f8f8f8; padding: 2rem; `;