From 56d321e513cb54eb9f3950057b4fa3ae4146e5a1 Mon Sep 17 00:00:00 2001 From: kolaente Date: Sun, 16 Jan 2022 18:27:57 +0100 Subject: [PATCH] feat(a11y): make sure the contrast for the primary color works with dark and light themes --- src/styles/custom-properties/colors.scss | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/styles/custom-properties/colors.scss b/src/styles/custom-properties/colors.scss index 2fc3ba0d0d..ae68dd6049 100644 --- a/src/styles/custom-properties/colors.scss +++ b/src/styles/custom-properties/colors.scss @@ -60,9 +60,9 @@ --danger: hsla(var(--danger-h), var(--danger-s), var(--danger-l), var(--danger-a)); // var(--primary) / $blue is #1973ff - --primary-h: 216.5deg; - --primary-s: 100%; - --primary-l: 54.9%; + --primary-h: 217deg; + --primary-s: 98%; + --primary-l: 53%; --primary-a: 1; --primary-hsl: var(--primary-h), var(--primary-s), var(--primary-l); --primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a)); @@ -122,5 +122,10 @@ // Custom color variables we need to override --card-border-color: hsla(var(--grey-100-hsl), 0.3); --logo-text-color: var(--grey-700); + + // Slightly different primary color to make sure it has a sufficent contrast ratio + --primary-h: 217deg; + --primary-s: 98%; + --primary-l: 58%; } } \ No newline at end of file