feat: Add deprecated styles for blockquotes (#111)

* feat: Add deprecated styles for blockquotes

* Add changeset

* Remove commented code

.changeset/strange-snakes-warn.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/site-kit': minor
+---
+
+Restyle blockquotes, deprecated styles for blockquotes

packages/site-kit/src/lib/styles/text.css

@@ -84,17 +84,15 @@
 }
 
 .text a:where(:not(.permalink)) {
-	box-shadow: inset 0 -1px 0 0 var(--sk-theme-1);
+	--color: hsla(var(--primary-hsl, var(--sk-theme-1)));
+	color: var(--color);
+	box-shadow: inset 0 -1px 0 0 var(--color);
 	transition: box-shadow 0.1s ease-in-out;
 }
 
-.text a:where(:not(.permalink)):focus-visible {
-	box-shadow: inset 0 -1px 0 0 var(--sk-theme-1), var(--sk-focus-outline);
-}
-
 .text a:where(:not(.permalink)):hover {
 	text-decoration: none;
-	box-shadow: inset 0 -2px 0 0px var(--sk-theme-1);
+	box-shadow: inset 0 -2px 0 0px var(--color);
 }
 
 .text a:where(:not(.permalink)) code {
@@ -103,10 +101,6 @@
 	background-color: transparent !important;
 }
 
-/* .text pre a {
-	border-bottom: 1px dotted var(--sk-theme-1);
-} */
-
 .text pre a:hover {
 	border-bottom: 1px solid var(--sk-theme-1);
 	text-decoration: none !important;
@@ -306,12 +300,24 @@
 }
 
 .text blockquote {
-	background: var(--sk-back-1);
+	--primary-hsl: var(--sk-theme-1-hsl);
+
+	background-color: hsla(var(--primary-hsl), 0.02);
 	color: var(--sk-text-1);
-	border: 1px solid var(--sk-theme-1);
+	border: 1px solid hsl(var(--primary-hsl));
 	border-radius: var(--sk-border-radius);
 	padding: 1rem;
-	filter: drop-shadow(2px 2px 6px hsla(15, 100%, 50%, 0.2));
+	filter: drop-shadow(2px 2px 6px hsla(var(--primary-hsl), 0.2));
+}
+
+.text blockquote::before {
+	content: 'note';
+	display: block;
+	font-size: 1.2rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	color: hsl(var(--primary-hsl));
+	margin-bottom: 0.5rem;
 }
 
 .text blockquote :first-child {
@@ -322,6 +328,14 @@
 	margin-bottom: 0;
 }
 
+.text blockquote.deprecated {
+	--primary-hsl: var(--sk-text-warning-hsl);
+}
+
+.text blockquote.deprecated::before {
+	content: 'Deprecated';
+}
+
 .text section a:hover {
 	text-decoration: underline;
 }

packages/site-kit/src/lib/styles/tokens.css

@@ -11,9 +11,11 @@
 	--sk-focus-outline: 0 0 0 2px hsla(var(--sk-theme-1-hsl), 0.6);
 
 	/* Base colors */
-	--sk-theme-1: hsla(var(--sk-theme-1-hsl), 1);
-	--sk-theme-2: hsla(var(--sk-theme-2-hsl), 1);
-	--sk-theme-3: hsla(var(--sk-theme-3-hsl), 1);
+	--sk-theme-1: hsl(var(--sk-theme-1-hsl));
+	--sk-theme-2: hsl(var(--sk-theme-2-hsl));
+	--sk-theme-3: hsl(var(--sk-theme-3-hsl));
+
+	--sk-text-warning: hsl(var(--sk-text-warning-hsl));
 
 	/* dimensions */
 	--sk-nav-height: 6rem;
@@ -63,6 +65,8 @@
 		--sk-theme-2-variant: hsl(240, 8%, 35%);
 		--sk-theme-3-variant: hsl(204, 100%, 50%);
 
+		--sk-text-warning-hsl: 32, 67%, 56%;
+
 		--sk-code-ts-bg: var(--sk-back-2);
 		--sk-code-bg: var(--sk-back-3);
 		--sk-code-base: hsl(45, 7%, 75%);
@@ -117,6 +121,8 @@
 		--sk-code-diff-inserted: hsl(120, 100%, 25%);
 		--sk-code-diff-removed: hsl(2, 80%, 47%);
 
+		--sk-text-warning-hsl: 32, 95%, 44%;
+
 		/* used for coloured backgrounds e.g. blockquotes */
 		--sk-back-translucent: hsla(0, 0%, 0%, 0.1);
 		--sk-text-translucent: hsla(0, 0%, 0%, 0.7);
@@ -177,6 +183,8 @@
 		--sk-code-diff-inserted: hsl(120, 100%, 25%);
 		--sk-code-diff-removed: hsl(2, 80%, 47%);
 
+		--sk-text-warning-hsl: 32, 95%, 44%;
+
 		/* used for coloured backgrounds e.g. blockquotes */
 		--sk-back-translucent: hsla(0, 0%, 0%, 0.1);
 		--sk-text-translucent: hsla(0, 0%, 0%, 0.7);
@@ -207,6 +215,8 @@
 		--sk-theme-2-variant: hsl(240, 8%, 35%);
 		--sk-theme-3-variant: hsl(204, 100%, 50%);
 
+		--sk-text-warning-hsl: 32, 67%, 56%;
+
 		--sk-code-ts-bg: var(--sk-back-2);
 		--sk-code-bg: var(--sk-back-3);
 		--sk-code-base: hsl(45, 7%, 75%);