From 6c59567ebf1bd1e706554ec33326c886706fb45a Mon Sep 17 00:00:00 2001
From: Adrian Simmons <adrian@perlucida.co.uk>
Date: Wed, 10 Nov 2021 15:07:21 +0000
Subject: [PATCH] Replace --primary-translucent with --primary-hsl plus
 specified alpha as per #954 discussion

---
 src/styles/theme/theme.scss      | 4 ++--
 src/styles/variables/colors.scss | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index 766e937d8..b05aa7809 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -6,7 +6,7 @@
 }
 
 :focus {
-  box-shadow: 0 0 0 2px var(--primary-translucent);
+  box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
 }
 
 :focus:not(:focus-visible) {
@@ -15,7 +15,7 @@
 
 :focus-visible,
 :-moz-focusring {
-  box-shadow: 0 0 0 2px var(--primary-translucent);
+  box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
 }
 
 body {
diff --git a/src/styles/variables/colors.scss b/src/styles/variables/colors.scss
index 3e1839a82..3e3524779 100644
--- a/src/styles/variables/colors.scss
+++ b/src/styles/variables/colors.scss
@@ -65,11 +65,11 @@
   --primary-l: 54.9%;
   --primary-light-l: 73%;
   --primary-a: 1;
+  --primary-hsl: 216.5deg, 100%, 54.9%;
   --primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
 
   // simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
   --primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-light-l), var(--primary-a));
-  --primary-translucent: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);
 
   @media (prefers-color-scheme: dark) {
     /* Light mode colours reversed for dark mode */