fix deprecated note styles (#937)

Author: Rich-Harris

apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md

@@ -150,7 +150,7 @@ for more info.
 
 ## SvelteComponentTyped
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 Use `Component` instead. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.
 
@@ -172,7 +172,7 @@ class SvelteComponentTyped<
 
 ## afterUpdate
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 Use `$effect` instead — see https://svelte.dev/docs/svelte/$effect
 
@@ -196,7 +196,7 @@ function afterUpdate(fn: () => void): void;
 
 ## beforeUpdate
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 Use `$effect.pre` instead — see https://svelte.dev/docs/svelte/$effect#$effect.pre
 
@@ -220,7 +220,7 @@ function beforeUpdate(fn: () => void): void;
 
 ## createEventDispatcher
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 Use callback props and/or the `$host()` rune instead — see https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events
 
@@ -593,7 +593,7 @@ The custom element version of the component. Only present if compiled with the `
 
 ## ComponentConstructorOptions
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 In Svelte 4, components are classes. In Svelte 5, they are functions.
 Use `mount` instead to instantiate components.
@@ -693,7 +693,7 @@ $$inline?: boolean;
 
 ## ComponentEvents
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 The new `Component` type does not have a dedicated Events type. Use `ComponentProps` instead.
 
@@ -770,7 +770,7 @@ type ComponentProps<
 
 ## ComponentType
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 This type is obsolete when working with the new `Component` type.
 

apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-compiler.md

@@ -159,7 +159,7 @@ function preprocess(
 
 ## walk
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 Replace this with `import { walk } from 'estree-walker'`
 

apps/svelte.dev/content/docs/svelte/98-reference/21-svelte-legacy.md

@@ -27,7 +27,7 @@ import {
 
 ## asClassComponent
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 Use this only as a temporary solution to migrate your imperative component code to Svelte 5.
 
@@ -58,7 +58,7 @@ function asClassComponent<
 
 ## createBubbler
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 Use this only as a temporary solution to migrate your automatically delegated events in Svelte 5.
 
@@ -80,7 +80,7 @@ function createBubbler(): (
 
 ## createClassComponent
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 Use this only as a temporary solution to migrate your imperative component code to Svelte 5.
 
@@ -199,7 +199,7 @@ function preventDefault(
 
 ## run
 
-<blockquote class="tag deprecated">
+<blockquote class="tag deprecated note">
 
 Use this only as a temporary solution to migrate your component code to Svelte 5.
 

apps/svelte.dev/scripts/sync-docs/types.ts

@@ -76,6 +76,7 @@ export async function get_types(code: string, statements: ts.NodeArray<ts.Statem
 				let start = statement.pos;
 				let comment = '';
 				let deprecated_notice: string | null = null;
+				let since_notice: string | null = null;
 
 				// @ts-ignore i think typescript is bad at typescript
 				if (statement.jsDoc) {
@@ -97,6 +98,10 @@ export async function get_types(code: string, statements: ts.NodeArray<ts.Statem
 								deprecated_notice = tag.comment;
 							}
 
+							if (tag.tagName.escapedText === 'since') {
+								since_notice = tag.comment;
+							}
+
 							if (tag.tagName.escapedText === 'example') {
 								comment += `\n\n${tag.comment}`;
 							}
@@ -174,6 +179,7 @@ export async function get_types(code: string, statements: ts.NodeArray<ts.Statem
 						name,
 						comment: cleanup_comment(comment),
 						deprecated: deprecated_notice,
+						since: since_notice,
 						overloads: []
 					};
 

packages/site-kit/src/lib/components/Text.svelte

@@ -439,8 +439,9 @@
 			&.deprecated {
 				p:first-child::before {
 					content: 'Deprecated ';
-					display: block;
-					font-style: normal;
+					font: var(--sk-font-ui-medium);
+					text-transform: uppercase;
+					color: var(--sk-fg-4);
 				}
 			}
 
@@ -462,6 +463,12 @@
 			}
 		}
 
+		.since p {
+			font: var(--sk-font-ui-medium);
+			text-transform: uppercase;
+			color: var(--sk-fg-4);
+		}
+
 		details {
 			position: relative;
 

packages/site-kit/src/lib/markdown/index.ts

@@ -15,6 +15,7 @@ export interface Declaration {
 	name: string;
 	comment: string;
 	deprecated?: string | null;
+	since?: string | null;
 	overloads: Array<{
 		snippet: string;
 		children: TypeElement[];

packages/site-kit/src/lib/markdown/preprocess.ts

@@ -122,7 +122,11 @@ function render_declaration(declaration: Declaration, full: boolean) {
 	let content = '';
 
 	if (declaration.deprecated) {
-		content += `<blockquote class="tag deprecated">\n\n${declaration.deprecated}\n\n</blockquote>\n\n`;
+		content += `<blockquote class="tag deprecated note">\n\n${declaration.deprecated}\n\n</blockquote>\n\n`;
+	}
+
+	if (declaration.since) {
+		content += `<blockquote class="since note">\n\nAvailable since ${declaration.since}\n\n</blockquote>\n\n`;
 	}
 
 	if (declaration.comment) {