From 01e1b61310b15eedd1ce3adff9787c6e95999767 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Tue, 4 Aug 2026 17:19:22 +0200
Subject: [PATCH] web/components: add ColorBall component

the appview draws those little shiny dots for languages and labels from
one template. the web app had no such thing, so BlobHeader kept its own
copy of the gradient and LanguageBar drew a flat circle instead. now
there is one component for it, in three sizes, and both use it.

Signed-off-by: eti <eti@eti.tf>
---
 web/src/lib/components/repo/BlobHeader.svelte |  9 ++---
 .../lib/components/repo/LanguageBar.svelte    |  6 +--
 .../components/ui/ColorBall.stories.svelte    | 25 +++++++++++++
 web/src/lib/components/ui/ColorBall.svelte    | 37 +++++++++++++++++++
 4 files changed, 67 insertions(+), 10 deletions(-)
 create mode 100644 web/src/lib/components/ui/ColorBall.stories.svelte
 create mode 100644 web/src/lib/components/ui/ColorBall.svelte

diff --git a/web/src/lib/components/repo/BlobHeader.svelte b/web/src/lib/components/repo/BlobHeader.svelte
index 9066f06cc..b7b83b416 100644
--- a/web/src/lib/components/repo/BlobHeader.svelte
+++ b/web/src/lib/components/repo/BlobHeader.svelte
@@ -7,6 +7,7 @@
 	import Button from "$lib/components/ui/Button.svelte";
 	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
 	import Checkbox from "$lib/components/ui/Checkbox.svelte";
+	import ColorBall from "$lib/components/ui/ColorBall.svelte";
 	import { LANGUAGE_COLORS, LANGUAGE_COLOR_FALLBACK } from "./language-colors";
 	import RefChip from "./RefChip.svelte";
 	import RepoCrumbs from "./RepoCrumbs.svelte";
@@ -58,7 +59,7 @@
 	};
 </script>
 
-<div class="flex flex-wrap items-center justify-between gap-2 typography-paragraph-regular mb-2">
+<div class="mb-2 flex flex-wrap items-center justify-between gap-2 typography-paragraph-regular">
 	<div class="flex min-w-0 items-center gap-3">
 		<RepoCrumbs {ownerHandle} {repoName} {ref} {path} />
 
@@ -84,11 +85,7 @@
 			<div
 				class="flex w-fit items-center gap-2 rounded border border-border-default bg-background-canvas px-2 py-1 whitespace-nowrap"
 			>
-				<div
-					class="size-2 rounded-full"
-					style:background="radial-gradient(circle at 35% 35%, color-mix(in srgb, {languageColor} 70%,
-					white), {languageColor} 30%, color-mix(in srgb, {languageColor} 85%, black))"
-				></div>
+				<ColorBall color={languageColor} />
 				{language}
 			</div>
 		{/if}
diff --git a/web/src/lib/components/repo/LanguageBar.svelte b/web/src/lib/components/repo/LanguageBar.svelte
index 2bb5d4702..47cef4632 100644
--- a/web/src/lib/components/repo/LanguageBar.svelte
+++ b/web/src/lib/components/repo/LanguageBar.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import ColorBall from "$lib/components/ui/ColorBall.svelte";
 	import { LANGUAGE_COLORS, LANGUAGE_COLOR_FALLBACK } from "./language-colors";
 	import type { LanguageSlice } from "./types";
 
@@ -30,10 +31,7 @@
 	>
 		{#each languages as language (language.name)}
 			<div class="flex items-center gap-2 typography-paragraph-small">
-				<span
-					class="inline-block size-2.5 shrink-0 rounded-full"
-					style={`background-color: ${colorFor(language.name)}`}
-				></span>
+				<ColorBall color={colorFor(language.name)} class="size-2.5" />
 				<span>
 					{language.name}
 					<span class="text-foreground-subtle">{percent(language)}%</span>
diff --git a/web/src/lib/components/ui/ColorBall.stories.svelte b/web/src/lib/components/ui/ColorBall.stories.svelte
new file mode 100644
index 000000000..974a508ca
--- /dev/null
+++ b/web/src/lib/components/ui/ColorBall.stories.svelte
@@ -0,0 +1,25 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import ColorBall from "./ColorBall.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/ColorBall",
+		component: ColorBall,
+		tags: ["autodocs"],
+		argTypes: {
+			size: {
+				control: { type: "inline-radio" },
+				options: ["sm", "md", "lg"]
+			}
+		},
+		args: {
+			color: "#3178c6",
+			size: "sm"
+		}
+	});
+</script>
+
+<Story name="Default" />
+<Story name="Medium" args={{ size: "md" }} />
+<Story name="Large" args={{ size: "lg" }} />
+<Story name="Rust" args={{ color: "#dea584", size: "lg" }} />
diff --git a/web/src/lib/components/ui/ColorBall.svelte b/web/src/lib/components/ui/ColorBall.svelte
new file mode 100644
index 000000000..7f2459afe
--- /dev/null
+++ b/web/src/lib/components/ui/ColorBall.svelte
@@ -0,0 +1,37 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const colorBall = tv({
+		base: "shrink-0 rounded-full",
+		variants: {
+			size: {
+				sm: "size-2",
+				md: "size-4",
+				lg: "size-8"
+			}
+		},
+		defaultVariants: {
+			size: "sm"
+		}
+	});
+
+	export type ColorBallVariants = VariantProps<typeof colorBall>;
+</script>
+
+<script lang="ts">
+	interface Props {
+		/** any CSS colour, e.g. a language colour or a label's hex */
+		color: string;
+		size?: ColorBallVariants["size"];
+		class?: string;
+	}
+
+	let { color, size = "sm", class: className }: Props = $props();
+
+	const classes = $derived(colorBall({ size, class: className }));
+	const sphere = $derived(
+		`radial-gradient(circle at 35% 35%, color-mix(in srgb, ${color} 70%, white), ${color} 30%, color-mix(in srgb, ${color} 85%, black))`
+	);
+</script>
+
+<div class={classes} style:background={sphere}></div>
-- 
2.54.0