[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,
   ),
 );
 

apps/desktop/src/scss/variables.scss

@@ -41,7 +41,9 @@ $button-color: lighten($text-color, 40%);
 $button-color-primary: darken($brand-primary, 8%);
 $button-color-danger: darken($brand-danger, 10%);
 
-$code-color: #e83e8c;
+$code-color: #c01176;
+$code-color-dark: #f08dc7;
+$code-color-nord: #dbb1d5;
 
 $themes: (
   light: (
@@ -158,7 +160,7 @@ $themes: (
     accountSwitcherTextColor: #ffffff,
     svgSuffix: "-dark.svg",
     hrColor: #bac0ce,
-    codeColor: $code-color,
+    codeColor: $code-color-dark,
   ),
   nord: (
     textColor: $nord5,
@@ -216,7 +218,7 @@ $themes: (
     accountSwitcherTextColor: $nord5,
     svgSuffix: "-dark.svg",
     hrColor: $nord4,
-    codeColor: $code-color,
+    codeColor: $code-color-nord,
   ),
 );
 

apps/web/src/scss/variables.scss

@@ -88,6 +88,7 @@ $mfaTypes: 0, 2, 3, 4, 6;
 $lightDangerHover: #c43421;
 $lightInputColor: #465057;
 $lightInputPlaceholderColor: #b6b8b8;
+$lightCodeColor: #c01176;
 
 // Dark
 
@@ -107,6 +108,7 @@ $darkDarkBlue1: #2f343d;
 $darkDarkBlue2: #1f242e;
 $darkInputColor: $white;
 $darkInputPlaceholderColor: $darkGrey1;
+$darkCodeColor: #f08dc7;
 
 $themes: (
   light: (
@@ -167,7 +169,7 @@ $themes: (
     calloutBackground: #fafafa,
     calloutColor: #212529,
     cdkDraggingBackground: $white,
-    codeColor: #e83e8c,
+    codeColor: $lightCodeColor,
     dropdownBackground: $white,
     dropdownHover: rgba(0, 0, 0, 0.06),
     dropdownTextColor: $body-color,
@@ -276,7 +278,7 @@ $themes: (
     calloutBackground: $darkBlue2,
     calloutColor: $white,
     cdkDraggingBackground: $darkDarkBlue1,
-    codeColor: #e83e8c,
+    codeColor: $darkCodeColor,
     dropdownBackground: $darkDarkBlue1,
     dropdownHover: rgba(255, 255, 255, 0.03),
     dropdownTextColor: $white,