From 004acfe34bff7b5ad2b1b1afa7f0fae0d681e988 Mon Sep 17 00:00:00 2001 From: Mai TXN Date: Wed, 11 Sep 2024 16:09:25 -0700 Subject: [PATCH 1/5] Fix accessibility issue #9165 on color contrast ratio --- src/theme.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/theme.js b/src/theme.js index 5dbd5265662..621afe9634f 100644 --- a/src/theme.js +++ b/src/theme.js @@ -4,6 +4,9 @@ import deepmerge from 'deepmerge' export const NPM_RED = '#cb0000' +export const NPM_LINK_RED = '#cf2b2b' // Asscessibility contrast ratio issue #9165 + + export const npmTheme = deepmerge(theme, { colors: { logoBg: NPM_RED, @@ -12,7 +15,7 @@ export const npmTheme = deepmerge(theme, { light: { colors: { accent: { - fg: NPM_RED, + fg: NPM_LINK_RED, emphasis: NPM_RED, }, }, From 83046fe1c3de6874b5de02a6602ec14a972ccdde Mon Sep 17 00:00:00 2001 From: Mai TXN Date: Wed, 11 Sep 2024 16:31:11 -0700 Subject: [PATCH 2/5] Prettier fix --- src/theme.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/theme.js b/src/theme.js index 621afe9634f..3773c166b86 100644 --- a/src/theme.js +++ b/src/theme.js @@ -6,7 +6,6 @@ export const NPM_RED = '#cb0000' export const NPM_LINK_RED = '#cf2b2b' // Asscessibility contrast ratio issue #9165 - export const npmTheme = deepmerge(theme, { colors: { logoBg: NPM_RED, From c76b21f4c588b26b6597ed4e4d47a70681019fa2 Mon Sep 17 00:00:00 2001 From: Mai TXN Date: Wed, 11 Sep 2024 16:58:24 -0700 Subject: [PATCH 3/5] Change the npm_ red color to #cf2b2b --- src/theme.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/theme.js b/src/theme.js index 3773c166b86..8feb80d61e6 100644 --- a/src/theme.js +++ b/src/theme.js @@ -2,9 +2,7 @@ import React from 'react' import {ThemeProvider as Provider, theme, Box} from '@primer/react' import deepmerge from 'deepmerge' -export const NPM_RED = '#cb0000' - -export const NPM_LINK_RED = '#cf2b2b' // Asscessibility contrast ratio issue #9165 +export const NPM_RED = '#cf2b2b' // Asscessibility contrast ratio issue #9165 export const npmTheme = deepmerge(theme, { colors: { @@ -14,7 +12,7 @@ export const npmTheme = deepmerge(theme, { light: { colors: { accent: { - fg: NPM_LINK_RED, + fg: NPM_RED, emphasis: NPM_RED, }, }, From 510b4d25902dbd57f2c56ed9e620b3526fa94a66 Mon Sep 17 00:00:00 2001 From: Mai TXN Date: Wed, 11 Sep 2024 17:55:13 -0700 Subject: [PATCH 4/5] Remove comment line --- src/theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme.js b/src/theme.js index 8feb80d61e6..dafd19e6ef0 100644 --- a/src/theme.js +++ b/src/theme.js @@ -2,7 +2,7 @@ import React from 'react' import {ThemeProvider as Provider, theme, Box} from '@primer/react' import deepmerge from 'deepmerge' -export const NPM_RED = '#cf2b2b' // Asscessibility contrast ratio issue #9165 +export const NPM_RED = '#cf2b2b' export const npmTheme = deepmerge(theme, { colors: { From 520a21d6845cfaf5b264c22eab6f0795709d4c2c Mon Sep 17 00:00:00 2001 From: Mai TXN Date: Wed, 11 Sep 2024 19:45:59 -0700 Subject: [PATCH 5/5] Changed color --- src/theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme.js b/src/theme.js index dafd19e6ef0..0c9df6fbfe3 100644 --- a/src/theme.js +++ b/src/theme.js @@ -2,7 +2,7 @@ import React from 'react' import {ThemeProvider as Provider, theme, Box} from '@primer/react' import deepmerge from 'deepmerge' -export const NPM_RED = '#cf2b2b' +export const NPM_RED = '#cb3837' export const npmTheme = deepmerge(theme, { colors: {