From caedd9dea8d9e254b57e5d3cc025b33d9d7da047 Mon Sep 17 00:00:00 2001 From: Vikas Date: Sat, 6 Jun 2026 15:32:50 +0530 Subject: [PATCH 1/6] Improve link color accessibility across themes --- client/styles/abstracts/_variables.scss | 6 ++++-- client/styles/components/_preferences.scss | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 8852d29c91..804fa7bc9b 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -9,6 +9,8 @@ $black: #000; $yellow: #f5dc23; $dodgerblue: #1e90ff; $p5-contrast-pink: #ffa9d9; +$p5-contrast-light-pink: #ffa9d9; +$p5-contrast-dark-pink: #b20046; $outline-color: #0f9dd7; @@ -183,7 +185,7 @@ $themes: ( toolbar-button-background-color: $medium-light, toolbar-button-color: $dark ), - dark: ( + dark: ( activeline-background-color: $p5-dark-activeline, admonition-background: #105a7f, admonition-border: #22c8ed, @@ -327,7 +329,7 @@ $themes: ( console-header-color: $lightest, console-input-background-color: $darker, editor-gutter-color: $darker, - error-color: $p5-contrast-pink, + error-color: $p5-contrast-light-pink, file-hover-color: $dark, file-selected-color: $medium-dark, form-navigation-options-color: $middle-light, diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index e0830f3543..30df4dcdaa 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -73,7 +73,7 @@ & a { text-decoration: underline; @include themify() { - color: getThemifyVariable('button-background-hover-color'); + color: getThemifyVariable('link-text-color'); } } & a:hover { @@ -154,7 +154,7 @@ display: contents; & a { text-decoration: underline; - color: getThemifyVariable('button-background-hover-color'); + color: getThemifyVariable('link-text-color'); } & a:hover { text-decoration: underline; From 280d146154a2ab2912ed4d0f5c77be0fc2735877 Mon Sep 17 00:00:00 2001 From: Vikas Date: Sat, 6 Jun 2026 16:43:57 +0530 Subject: [PATCH 2/6] Improve link color accessibility across themes --- client/modules/About/About.styles.ts | 4 ++-- client/styles/abstracts/_placeholders.scss | 8 ++++---- client/theme.js | 6 +++++- 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/client/modules/About/About.styles.ts b/client/modules/About/About.styles.ts index 0714e39608..62e58ebbf1 100644 --- a/client/modules/About/About.styles.ts +++ b/client/modules/About/About.styles.ts @@ -177,7 +177,7 @@ export const ContactHandles = styled.p` width: 50%; & a { - color: ${prop('logoColor')}; + color: ${prop('linkTextColor')}; text-decoration: underline; &:hover { @@ -204,7 +204,7 @@ export const Footer = styled.div` & a { margin: ${remSize(20)} 9.5% 0 0; - color: ${prop('logoColor')}; + color: ${prop('linkTextColor')}; text-decoration: underline; &:hover { diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss index 2cb9230d7d..d96e6c1ec0 100644 --- a/client/styles/abstracts/_placeholders.scss +++ b/client/styles/abstracts/_placeholders.scss @@ -173,16 +173,16 @@ %link { @include themify() { text-decoration: none; - color: getThemifyVariable('inactive-text-color'); + color: getThemifyVariable('link-text-color'); cursor: pointer; & g, & path { - fill: getThemifyVariable('inactive-text-color'); + fill: getThemifyVariable('link-text-color'); } &:hover { text-decoration: none; - color: getThemifyVariable('heavy-text-color'); + color: getThemifyVariable('link-text-color'); & g, & path { - fill: getThemifyVariable('heavy-text-color'); + fill: getThemifyVariable('link-text-color'); } } } diff --git a/client/theme.js b/client/theme.js index 7aa4f6ed0e..e3247f92ed 100644 --- a/client/theme.js +++ b/client/theme.js @@ -19,7 +19,8 @@ export const colors = { red: '#ff0000', lightsteelblue: '#B0C4DE', dodgerblue: '#1E90FF', - p5ContrastPink: ' #FFA9D9', + p5ContrastLightPink: '#FFA9D9', + p5ContrastDarkPink: '#B20046', p5ContrastYellow: '#fff001', borderColor: ' #B5B5B5', outlineColor: '#0F9DD7' @@ -71,6 +72,7 @@ const baseThemes = { [Theme.light]: { colors, ...common, + linkTextColor: colors.p5ContrastDarkPink, primaryTextColor: grays.dark, inactiveTextColor: grays.middleDark, backgroundColor: grays.lighter, @@ -166,6 +168,7 @@ const baseThemes = { [Theme.dark]: { colors, ...common, + linkTextColor: colors.p5ContrastLightPink, primaryTextColor: grays.lightest, inactiveTextColor: grays.middleLight, backgroundColor: grays.darker, @@ -269,6 +272,7 @@ export default { toolbarTextColor: grays.dark, toolbarBackgroundColor: grays.light, toolbarTextHoverColor: grays.dark, + linkTextColor: colors.p5ContrastLightPink, Button: { primary: { From eb03f079ea172c0c26ed68734cb9f66168933058 Mon Sep 17 00:00:00 2001 From: Vikas Date: Sat, 6 Jun 2026 16:57:07 +0530 Subject: [PATCH 3/6] fix hover --- client/styles/abstracts/_placeholders.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/styles/abstracts/_placeholders.scss b/client/styles/abstracts/_placeholders.scss index d96e6c1ec0..da8592b145 100644 --- a/client/styles/abstracts/_placeholders.scss +++ b/client/styles/abstracts/_placeholders.scss @@ -180,9 +180,9 @@ } &:hover { text-decoration: none; - color: getThemifyVariable('link-text-color'); + color: getThemifyVariable('heavy-text-color'); & g, & path { - fill: getThemifyVariable('link-text-color'); + fill: getThemifyVariable('heavy-text-color'); } } } From 4822a21ec6393349ca599a28b662416ed04afb6d Mon Sep 17 00:00:00 2001 From: Vikas Date: Wed, 7 Oct 2026 11:59:08 +0530 Subject: [PATCH 4/6] Fix formatting of admonition-border variable --- client/styles/abstracts/_variables.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 804fa7bc9b..be41dc9d14 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -70,6 +70,8 @@ $themes: ( activeline-background-color: $p5-light-activeline, admonition-background: #e4f8ff, admonition-border: #22c8ed, + admonition-background: #E4F8FF, + admonition-border: #22C8ED, admonition-text: #075769, background-color: $lighter, button-active-color: $lightest, @@ -152,6 +154,7 @@ $themes: ( input-selection-text-color: $dark, input-text-color: $dark, keyboard-shortcut-color: $middle-gray, + link-text-color: $p5-contrast-dark-pink, logo-background-color: $lightest, logo-color: $p5js-pink, modal-background-color: $light, From 056dfba261df8db3173bb1a7d9b98e101cd8de8c Mon Sep 17 00:00:00 2001 From: Vikas Date: Wed, 7 Oct 2026 12:03:07 +0530 Subject: [PATCH 5/6] Adjust link-text-color in theme variables Removed and re-added link-text-color for light and dark themes. --- client/styles/abstracts/_variables.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index be41dc9d14..a09a48f51b 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -70,8 +70,6 @@ $themes: ( activeline-background-color: $p5-light-activeline, admonition-background: #e4f8ff, admonition-border: #22c8ed, - admonition-background: #E4F8FF, - admonition-border: #22C8ED, admonition-text: #075769, background-color: $lighter, button-active-color: $lightest, @@ -214,7 +212,7 @@ $themes: ( console-header-color: $lightest, console-input-background-color: $darker, editor-gutter-color: $darker, - error-color: $p5js-pink, + error-color: $p5-contrast-light-pink, file-hover-color: $dark, file-selected-color: $medium-dark, form-input-placeholder-text-color: $middle-gray, @@ -273,6 +271,7 @@ $themes: ( input-selection-text-color: $darkest, input-text-color: $lightest, keyboard-shortcut-color: $middle-light, + link-text-color: $p5-contrast-light-pink, logo-background-color: $lightest, logo-color: $p5js-pink, modal-background-color: $dark, @@ -388,6 +387,7 @@ $themes: ( input-selection-text-color: $darkest, input-text-color: $lightest, keyboard-shortcut-color: $middle-light, + link-text-color: $p5-contrast-light-pink, logo-background-color: $darker, logo-color: $yellow, modal-background-color: $dark, From 1ad9d17da8bbae30600274392d24a106ed9a0256 Mon Sep 17 00:00:00 2001 From: Vikas Date: Wed, 7 Oct 2026 21:26:41 +0530 Subject: [PATCH 6/6] Fix formatting of dark theme variables in SCSS --- client/styles/abstracts/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index a09a48f51b..cbcbc19ec8 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -186,7 +186,7 @@ $themes: ( toolbar-button-background-color: $medium-light, toolbar-button-color: $dark ), - dark: ( + dark: ( activeline-background-color: $p5-dark-activeline, admonition-background: #105a7f, admonition-border: #22c8ed,