feat(design): clean up <pre> styling and add margin styles to stop ar…

…ticle cascade (#2579)
graycoreio · Oct 2, 2023 · 540a550 · 540a550
1 parent 37e02bd
commit 540a550
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/libs/design/src/molecules/article/article/article-theme.scss b/libs/design/src/molecules/article/article/article-theme.scss
@@ -34,8 +34,8 @@
 		}
 
 		pre {
-			background: rgba(theming.daff-illuminate($base, $gray, 2), 0.3);
-			border: 1px solid rgba(theming.daff-illuminate($base, $gray, 2), 0.6);
+			background: theming.daff-illuminate($base, $gray, 1);
+			border: 1px solid theming.daff-illuminate($base, $gray, 2);
 			color: $base-contrast;
 
 			code {

diff --git a/libs/design/src/molecules/article/article/article.component.scss b/libs/design/src/molecules/article/article/article.component.scss
@@ -58,12 +58,19 @@
 		@include t.embolden;
 	}
 
+	@include stopsArticleCascade(pre) {
+		margin: 1.5rem 0;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
 	pre {
 		display: block;
 		border-radius: 4px;
 		font-size: t.$small-font-size;
 		line-height: 1.5rem;
-		margin: 1.5rem 0;
 		padding: 1.5rem;
 		overflow: auto;
 		white-space: pre-wrap;
@@ -72,10 +79,6 @@
 			display: block;
 			padding: 0;
 		}
-
-		&:last-child {
-			margin-bottom: 0;
-		}
 	}
 
 	code {