Markdown: use CSS variables for markdown color work so we can override this in certain places, e.g. when markdown is rendered on an already gray "pane" background as in plugin manager > "Readme"-Tab. See #77960

Author: Stefanie Hein

src/scss/themes/fylr/components/_labels.scss

@@ -408,12 +408,17 @@ label[data-label-clickable],
 		word-break: keep-all;
 
 		tbody tr:nth-child(odd) {
-			background-color: $gray-100;
+			background-color: var(--markdown-darker-100, #{$gray-100});
+
+			code {
+				--markdown-darker-100: var(--gray-300);
+				--markdown-code-border-color: var(--gray-400);
+			}
 		}
 
 		td, th {
-			padding: $spacer-xs $spacer-sm;
-			border: 1px solid $gray-200;
+			padding: $spacer-sm;
+			border: 1px solid var(--markdown-darker-300, #{$gray-200});
 		}
 
 		th {
@@ -428,35 +433,36 @@ label[data-label-clickable],
 
 	blockquote {
 		padding: $spacer-xs $spacer-sm;
-		border-left: 5px solid $gray-300;
+		border-left: 5px solid var(--markdown-darker-300, #{$gray-300});
 	}
 
 	code {
-		border: none;
-		background: $light;
+		border: 1px solid var(--markdown-code-border-color, transparent);
+		background: var(--markdown-darker-100, #{$gray-100});
 		white-space: pre-wrap;
 		padding: 0 $spacer-xs;
 		border-radius: $border-radius-sm;
+		font-size: var(--font-size-sm); // matches font-size-base on this font
 	}
 
 	pre {
-		padding: $spacer;
-		background: $light;
+		padding: $spacer-sm $spacer;
+		background: var(--markdown-darker-100, #{$gray-100});
 		white-space: pre-wrap;
-		border-radius: $border-radius;
-		border: none;
 		overflow: auto;
 		-webkit-overflow-scrolling: touch;
-
+		
 		code {
 			padding: 0;
 			border-radius: 0;
+			border: none;
+			background: none;
 		}
 	}
 
 	hr {
-		margin-top: $spacer-sm;
-		margin-bottom: $spacer-sm;
+		margin-top: $spacer;
+		margin-bottom: $spacer;
 		border: 0;
 		border-top: $hr-border-width solid $body-color;
 	}