[PM-1509] Accessibility for <code> elements (#5686)

* change code color to meet accessibility requirements

* updates to desktop and web

* adjust colors for desktop, web, and browser

* update color values

* switch nord color to use same as Tailwind theme

* align variable names

apps/browser/src/popup/scss/variables.scss

@@ -43,6 +43,10 @@ $button-color: lighten($text-color, 40%);
 $button-color-primary: darken($brand-primary, 8%);
 $button-color-danger: darken($brand-danger, 10%);
 
+$code-color: #c01176;
+$code-color-dark: #f08dc7;
+$code-color-nord: #dbb1d5;
+
 $solarizedDarkBase03: #002b36;
 $solarizedDarkBase02: #073642;
 $solarizedDarkBase01: #586e75;
@@ -122,7 +126,7 @@ $themes: (
     // light has no hover so use same color
     webkitCalendarPickerHoverFilter: invert(46%) sepia(69%) saturate(6397%) hue-rotate(211deg)
       brightness(85%) contrast(103%),
-    codeColor: #e83e8c,
+    codeColor: $code-color,
   ),
   dark: (
     textColor: #ffffff,
@@ -184,7 +188,7 @@ $themes: (
       hue-rotate(184deg) brightness(87%) contrast(93%),
     webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(100%) sepia(0%)
       saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%),
-    codeColor: #e83e8c,
+    codeColor: $code-color-dark,
   ),
   nord: (
     textColor: $nord5,
@@ -246,7 +250,7 @@ $themes: (
     // has no hover so use same color
     webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(94%) sepia(5%)
       saturate(454%) hue-rotate(185deg) brightness(93%) contrast(96%),
-    codeColor: #e83e8c,
+    codeColor: $code-color-nord,
   ),
   solarizedDark: (
     textColor: $solarizedDarkBase2,
@@ -307,7 +311,7 @@ $themes: (
       hue-rotate(138deg) brightness(92%) contrast(90%),
     webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(94%) sepia(10%)
       saturate(462%) hue-rotate(345deg) brightness(103%) contrast(87%),
-    codeColor: #e83e8c,
+    codeColor: $code-color-dark,
   ),
 );