[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,40 @@
+:root {
+	--badge-background: #b9d6ff;
+	--badge-text: #002b67;
+
+	.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;
+
+		background-color: var(--badge-background);
+		color: var(--badge-text);
+
+		&.gray {
+			background-color: #d9d9d9;
+			color: #313131;
+		}
+	}
+}
+
+:root[data-theme="dark"] {
+	--badge-background: #f8a054;
+	--badge-text: #1d1d1d;
+
+	.sl-badge.gray {
+		background-color: #b6b6b6;
+		color: #1d1d1d;
+	}
+}

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 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 gray">{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/content/docs/style-guide/components/badges.mdx

@@ -6,21 +6,25 @@ 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
+:::caution
 
-For guidance on using badges inline with other text, refer to [Inline badges](/style-guide/components/inline-badge/).
+Whilst the component from Starlight supports `variant` and `size` props, these are ignored in our styling.
 
 :::
 
+To adopt this styling in a React component, please use a `span` with the `sl-badge` class. In order to style the badge as gray, please apply the `gray` class.
+
 ## Component
 
 ```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="Default" />
+<Badge text="Gray" class="gray" />
+
+<span className="sl-badge gray">
+  React
+</span>
 ```
 
 ## Sidebar

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

@@ -12,7 +12,15 @@ 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
+
+:::caution
+
+Whilst the component from Starlight supports `variant` and `size` props, these are ignored in our styling.
+
+:::
+
+To adopt this styling in a React component, please use a `span` with the `sl-badge` class. In order to style the badge as gray, please apply the `gray` class.
 
 ```mdx live
 import { InlineBadge } from '~/components';
@@ -27,7 +35,7 @@ import { InlineBadge } from '~/components';
 
 ### Legacy <InlineBadge preset="legacy" />
 
-### Custom <InlineBadge text="Custom" variant="success" />
+### Custom <InlineBadge text="Custom" class="gray" />
 ```
 
 ## 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" 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>