From 9e7c30f1b2370c00f0ed8f6fcc9e30d00f072818 Mon Sep 17 00:00:00 2001 From: Aaron Contreras Date: Tue, 28 Nov 2023 11:14:41 -0500 Subject: [PATCH 1/2] Fix: Remove mapping of Primer's CSS variable with our variable This was setting Primer's CSS variable to one of our variables. The fix is two fold: 1. Sets the right background color on checkboxes in High Contrast Mode. 2. Sets Links to the default color as indicated in the Primer Lookbook while in High Contrast Mode. --- app/views/custom_styles/_primer_color_mapping.erb | 1 - 1 file changed, 1 deletion(-) diff --git a/app/views/custom_styles/_primer_color_mapping.erb b/app/views/custom_styles/_primer_color_mapping.erb index e8801966fd3f..867876df6b5f 100644 --- a/app/views/custom_styles/_primer_color_mapping.erb +++ b/app/views/custom_styles/_primer_color_mapping.erb @@ -4,7 +4,6 @@ [data-color-mode] { --body-background: var(--color-canvas-default); --body-font-color: var(--color-fg-default); - --color-accent-fg: var(--content-link-color) !important; } [data-light-theme=light_high_contrast]{ --avatar-border-color: var(--color-avatar-border); From 755c3266744895d5dc244cab0e2facc88db3fbbd Mon Sep 17 00:00:00 2001 From: Aaron Contreras Date: Wed, 29 Nov 2023 08:48:23 -0500 Subject: [PATCH 2/2] Fix: Override primer variable with custom OP colors on normal light mode This ensures consistent rendering color of links when having custom colors set up on the instance. --- app/views/custom_styles/_primer_color_mapping.erb | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/views/custom_styles/_primer_color_mapping.erb b/app/views/custom_styles/_primer_color_mapping.erb index 867876df6b5f..74d65480f060 100644 --- a/app/views/custom_styles/_primer_color_mapping.erb +++ b/app/views/custom_styles/_primer_color_mapping.erb @@ -5,6 +5,11 @@ --body-background: var(--color-canvas-default); --body-font-color: var(--color-fg-default); } + /* Override Primer variable to ensure compatibility with currently + configured design outside of high contrast mode */ + [data-color-mode]:not([data-light-theme=light_high_contrast]) { + --color-accent-fg: var(--content-link-color) !important; + } [data-light-theme=light_high_contrast]{ --avatar-border-color: var(--color-avatar-border); --list-item-hover--border-color: var(--color-action-list-item-default-active-border);