[Docs Site] Adopt Cloudflare styling for badge component

astro.config.ts

@@ -164,6 +164,7 @@ export default defineConfig({
 			sidebar: await autogenSections(),
 			customCss: [
 				"./src/asides.css",
+				"./src/badges.css",
 				"./src/code.css",
 				"./src/headings.css",
 				"./src/input.css",

src/badges.css

@@ -0,0 +1,85 @@
+.sl-badge {
+	/* Unset Starlight styling */
+	border: none;
+	font-family: var(--__sl-font);
+	overflow-wrap: unset;
+
+	/* Apply styling from https://www.npmjs.com/package/@cloudflare/component-label */
+	align-items: center;
+	border-radius: 50px;
+	display: inline-flex;
+	font-size: 12px;
+	font-weight: 400;
+	line-height: 1;
+	user-select: none;
+	white-space: nowrap;
+	padding: 4px 8px;
+}
+
+:root {
+	.sl-badge {
+		&.note {
+			background-color: theme("colors.cl1.blue.8") !important;
+			color: theme("colors.cl1.blue.2") !important;
+		}
+
+		&.danger {
+			background-color: theme("colors.cl1.red.8") !important;
+			color: theme("colors.cl1.red.2") !important;
+		}
+
+		&.success {
+			background-color: theme("colors.cl1.green.8") !important;
+			color: theme("colors.cl1.green.2") !important;
+		}
+
+		&.caution {
+			background-color: theme("colors.cl1.orange.8") !important;
+			color: theme("colors.cl1.orange.2") !important;
+		}
+
+		&.tip {
+			background-color: theme("colors.cl1.violet.8") !important;
+			color: theme("colors.cl1.violet.1") !important;
+		}
+
+		&.default {
+			background-color: theme("colors.cl1.gray.9") !important;
+			color: theme("colors.cl1.gray.2") !important;
+		}
+	}
+}
+
+:root[data-theme="dark"] {
+	.sl-badge {
+		&.note {
+			background-color: theme("colors.cl1.blue.7") !important;
+			color: theme("colors.cl1.blue.0") !important;
+		}
+
+		&.danger {
+			background-color: theme("colors.cl1.red.8") !important;
+			color: theme("colors.cl1.red.0") !important;
+		}
+
+		&.success {
+			background-color: theme("colors.cl1.green.7") !important;
+			color: theme("colors.cl1.green.0") !important;
+		}
+
+		&.caution {
+			background-color: theme("colors.cl1.orange.8") !important;
+			color: theme("colors.cl1.orange.0") !important;
+		}
+
+		&.tip {
+			background-color: theme("colors.cl1.violet.8") !important;
+			color: theme("colors.cl1.violet.0") !important;
+		}
+
+		&.default {
+			background-color: theme("colors.cl1.gray.8") !important;
+			color: theme("colors.cl1.gray.3") !important;
+		}
+	}
+}

src/components/InlineBadge.astro

@@ -23,7 +23,7 @@ if (preset) {
 		}
 		case "beta": {
 			text = "Beta";
-			variant = "default";
+			variant = "caution";
 			break;
 		}
 		case "deprecated": {

src/components/ModelCatalog.tsx

@@ -240,11 +240,7 @@ const ModelCatalog = ({ models }: { models: WorkersAIModelsSchema[] }) => {
 								<span className="overflow-hidden text-ellipsis whitespace-nowrap text-lg font-semibold">
 									{model.model_display_name}
 								</span>
-								{isBeta && (
-									<span className="ml-1 rounded-full bg-orange-200 px-2 py-0.5 text-xs text-orange-900">
-										Beta
-									</span>
-								)}
+								{isBeta && <span className="sl-badge caution ml-1">Beta</span>}
 							</div>
 							<div className="!m-0 text-xs">
 								<ModelInfo model={model.model} />

src/components/Type.astro

@@ -15,7 +15,6 @@ const { text } = props.parse(Astro.props);
 
 <Badge
 	text={text}
-	size="small"
 	style={{
 		color: "var(--sl-text-white)",
 		backgroundColor: "var(--sl-color-gray-6)",

src/components/changelog-next/ProductPills.astro

@@ -3,6 +3,8 @@ import { getEntries } from "astro:content";
 import { reference } from "astro:content";
 import { z } from "astro:schema";
 
+import { Badge } from "@astrojs/starlight/components";
+
 type Props = z.infer<typeof props>;
 
 const props = z.object({
@@ -18,9 +20,7 @@ const data = await getEntries(products);
 	{
 		data.map((product) => (
 			<a href={product.data.product.url} class="no-underline">
-				<span class="ml-1 rounded-full bg-orange-200 px-2 py-0.5 text-xs text-orange-900">
-					{product.data.product.title}
-				</span>
+				<Badge text={product.data.product.title} class="ml-1" />
 			</a>
 		))
 	}

src/components/fields/FieldBadges.tsx

@@ -1,12 +1,9 @@
 const FieldBadges = ({ badges }: { badges: string[] }) => {
 	return (
-		<ul className="list-none m-0 p-0 inline-flex items-center gap-2 text-xs">
+		<ul className="m-0 inline-flex list-none items-center gap-2 p-0 text-xs">
 			{badges.map((badge) => (
-				<li
-					key={badge}
-					className="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded-md block !mt-0"
-				>
-					{badge}
+				<li key={badge}>
+					<span className="sl-badge default">{badge}</span>
 				</li>
 			))}
 		</ul>

src/components/models/ModelBadges.tsx

@@ -30,13 +30,10 @@ const ModelBadges = ({ model }: { model: WorkersAIModelsSchema }) => {
 	});
 
 	return (
-		<ul className="list-none m-0 p-0 flex items-center gap-2 text-xs">
+		<ul className="m-0 flex list-none items-center gap-2 p-0 text-xs">
 			{badges.map((badge) => (
-				<li
-					key={badge.text}
-					className="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded-md block !mt-0"
-				>
-					{badge.text}
+				<li key={badge.text}>
+					<span className="sl-badge gray">{badge.text}</span>
 				</li>
 			))}
 		</ul>

src/components/overrides/PageTitle.astro

@@ -16,7 +16,6 @@ import { getEntry } from "astro:content";
 
 const spotlightDetails = Astro.props.entry.data.spotlight;
 const updated = Astro.props.entry.data.updated;
-const badge = Astro.props.entry.data.sidebar?.badge;
 const summary = Astro.props.entry.data.summary;
 
 const slug = Astro.props.entry.slug;
@@ -97,8 +96,6 @@ const hideBreadcrumbs = Astro.props.hideBreadcrumbs;
 
 {!hideTitle && <Default {...Astro.props} />}
 
-{badge && <Badge variant={badge.variant} text={badge.text} />}
-
 {updated && <LastReviewed date={updated} />}
 
 {

src/components/overrides/Sidebar.astro

@@ -29,6 +29,28 @@ interface Group {
 	order: number;
 }
 
+function inferBadgeVariant(badge: ComponentProps<typeof Badge>) {
+	if (badge.variant === "default") {
+		switch (badge.text) {
+			case "Beta": {
+				badge.variant = "caution";
+				break;
+			}
+			case "New": {
+				badge.variant = "note";
+				break;
+			}
+			case "Deprecated":
+			case "Legacy": {
+				badge.variant = "danger";
+				break;
+			}
+		}
+	}
+
+	return badge;
+}
+
 const currentSection = slug?.split("/")[0];
 
 let filtered = sidebar.filter(
@@ -76,7 +98,10 @@ async function handleGroup(group: Group): Promise<SidebarEntry> {
 
 	group.label = frontmatter.sidebar.group?.label ?? frontmatter.title;
 	group.order = frontmatter.sidebar.order ?? Number.MAX_VALUE;
-	group.badge = frontmatter.sidebar.group?.badge;
+
+	if (frontmatter.sidebar.group?.badge) {
+		group.badge = inferBadgeVariant(frontmatter.sidebar.group?.badge);
+	}
 
 	if (frontmatter.hideChildren) {
 		return {
@@ -127,6 +152,10 @@ async function handleLink(link: Link): Promise<Link> {
 	const frontmatter = page.data;
 	link.order = frontmatter.sidebar.order ?? Number.MAX_VALUE;
 
+	if (link.badge) {
+		link.badge = inferBadgeVariant(link.badge);
+	}
+
 	if (slug === currentSection) {
 		link.order = 0;
 	}
@@ -139,6 +168,7 @@ async function handleLink(link: Link): Promise<Link> {
 			badge: frontmatter.external_link.startsWith("/api")
 				? {
 						text: "API",
+						variant: "note",
 					}
 				: undefined,
 		};

src/content/docs/style-guide/components/badges.mdx

@@ -6,21 +6,19 @@ import { Badge } from "~/components";
 
 Badges are a built-in component provided by [Starlight](https://starlight.astro.build/guides/components/#bades). Use them to indicate a product is in beta, for example.
 
-:::note
-
-For guidance on using badges inline with other text, refer to [Inline badges](/style-guide/components/inline-badge/).
-
-:::
-
 ## Component
 
+To adopt this styling in a React component, apply the `sl-badge` class to a `span` element.
+
 ```mdx live
 import { Badge } from "~/components";
 
-<Badge text="New" variant="tip" size="small" />
-<Badge text="Deprecated" variant="caution" size="medium" />
-<Badge text="Starlight" variant="note" size="large" />
-<Badge text="Custom" variant="success" style={{ fontStyle: "italic" }} />
+<Badge text="Note" variant="note" />
+<Badge text="Success" variant="success" />
+<Badge text="Tip" variant="tip" />
+<Badge text="Caution" variant="caution" />
+<Badge text="Danger" variant="danger" />
+<Badge text="Default" />
 ```
 
 ## Sidebar

src/content/docs/style-guide/components/inline-badge.mdx

@@ -12,7 +12,9 @@ Guidelines:
 - For instructions related to the feature (such as instructions on turning the feature on or off), you may mention again it's in beta, and also include "(beta)" in the side nav.
 :::
 
-## Example
+## Component
+
+To adopt this styling in a React component, apply the `sl-badge` class to a `span` element.
 
 ```mdx live
 import { InlineBadge } from '~/components';
@@ -27,7 +29,7 @@ import { InlineBadge } from '~/components';
 
 ### Legacy <InlineBadge preset="legacy" />
 
-### Custom <InlineBadge text="Custom" variant="success" />
+### Default <InlineBadge text="Default" />
 ```
 
 ## Inputs

src/pages/workers-ai/models/[name].astro

@@ -4,7 +4,7 @@ import { getCollection } from "astro:content";
 import StarlightPage, {
 	type StarlightPageProps,
 } from "@astrojs/starlight/components/StarlightPage.astro";
-import { LinkButton, Tabs, TabItem, Code, Aside } from "~/components";
+import { LinkButton, Tabs, TabItem, Code, Aside, Badge } from "~/components";
 import ModelInfo from "~/components/models/ModelInfo.tsx";
 import ModelBadges from "~/components/models/ModelBadges.tsx";
 import SchemaViewer from "~/components/models/SchemaViewer.astro";
@@ -120,41 +120,35 @@ const starlightPageProps = {
 ---
 
 <StarlightPage {...starlightPageProps}>
-	<div class="flex align-center">
+	<div class="align-center flex">
 		{
 			author ? (
 				<img
-					class="mr-4 w-12 h-12 block"
+					class="mr-4 block h-12 w-12"
 					src={author.logo}
 					alt={`${author.name} logo`}
 				/>
 			) : (
-				<div class="w-12 h-12 mr-4 rounded-md bg-gray-100 text-gray-400 uppercase text-2xl font-black flex justify-center items-center">
+				<div class="mr-4 flex h-12 w-12 items-center justify-center rounded-md bg-gray-100 text-2xl font-black uppercase text-gray-400">
 					{model.name.split("/")[1].substring(0, 1)}
 				</div>
 			)
 		}
 		<div>
 			<h1
 				id="_top"
-				class="!-mt-4 !mb-0 !leading-none !text-4xl !font-bold flex items-center"
+				class="!-mt-4 !mb-0 flex items-center !text-4xl !font-bold !leading-none"
 			>
 				{name}
-				{
-					isBeta && (
-						<span class="ml-3 font-normal mt-2 bg-orange-200 text-orange-900 rounded-full px-2 py-0.5 text-xs">
-							Beta
-						</span>
-					)
-				}
+				{isBeta && <Badge text="Beta" variant="caution" class="ml-3 mt-2" />}
 			</h1>
-			<span class="block -mt-1"><ModelInfo model={model} /></span>
+			<span class="-mt-1 block"><ModelInfo model={model} /></span>
 		</div>
 	</div>
 
-	<span class="font-mono text-gray-400 text-sm mt-4 block">{model.name}</span>
+	<span class="mt-4 block font-mono text-sm text-gray-400">{model.name}</span>
 
-	<p class="mt-3 !mb-2">{description}</p>
+	<p class="!mb-2 mt-3">{description}</p>
 	{terms && <a href={terms.value}>Terms and License</a>}
 	<ModelBadges model={model} />
 

src/pages/workers/ai.astro

@@ -2,6 +2,8 @@
 import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
 import { Image } from "astro:assets";
 
+import { Badge } from "@astrojs/starlight/components";
+
 import CursorDark from "~/assets/images/workers/ai/cursor-dark.png";
 import CursorLight from "~/assets/images/workers/ai/cursor-light.png";
 ---
@@ -26,11 +28,7 @@ import CursorLight from "~/assets/images/workers/ai/cursor-light.png";
 			<h1>
 				Meet your AI assistant, Cursor
 				<div>
-					<span
-						class="ml-1 rounded-full bg-orange-200 px-2 py-0.5 text-xs text-orange-900"
-					>
-						AI Preview
-					</span>
+					<Badge text="AI Preview" class="ml-1" />
 				</div>
 			</h1>
 			<p>