colors page

src/app.css

@@ -130,6 +130,7 @@
 		--shadow-menu: var(--shadow-border), 0px 1px 1px rgba(0, 0, 0, 0.02),
 			0px 4px 8px -4px rgba(0, 0, 0, 0.04), 0px 16px 24px -8px rgba(0, 0, 0, 0.06);
 		--shadow-input: 0 0 0 1px var(--gray-alpha-600), 0 0 0 4px rgba(0, 0, 0, 0.16);
+		--shadow-border-inset: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 	}
 
 	.dark {

src/lib/assets/icons/index.ts

@@ -8,6 +8,7 @@ import Box from './box.svg?component';
 import BrandAssets from './brand-assets.svg?component';
 import ChartBarMiddle from './chart-bar-middle.svg?component';
 import ChartBarPeak from './chart-bar-peak.svg?component';
+import ChartPie from './chart-pie.svg?component';
 import ChartTrendingDown from './chart-trending-down.svg?component';
 import CheckCircle from './check-circle.svg?component';
 import Check from './check.svg?component';
@@ -25,6 +26,7 @@ import Copy from './copy.svg?component';
 import Cross from './cross.svg?component';
 import CursorClick from './cursor-click.svg?component';
 import Database from './database.svg?component';
+import Dollar from './dollar.svg?component';
 import ErrorStates from './error-states.svg?component';
 import ExternalSmall from './external-small.svg?component';
 import External from './external.svg?component';
@@ -50,6 +52,7 @@ import LogoGeist from './logo-geist.svg?component';
 import LogoGithub from './logo-github.svg?component';
 import LogoGitlab from './logo-gitlab.svg?component';
 import LogoNext from './logo-next.svg?component';
+import LogoSvelte from './logo-svelte.svg?component';
 import LogoTurborepo from './logo-turborepo.svg?component';
 import LogoV0 from './logo-v0.svg?component';
 import LogoVercelCircle from './logo-vercel-circle.svg?component';
@@ -64,6 +67,7 @@ import PencilEdit from './pencil-edit.svg?component';
 import Router from './router.svg?component';
 import SettingsSliders from './settings-sliders.svg?component';
 import Shield from './shield.svg?component';
+import Star from './star.svg?component';
 import Status from './status.svg?component';
 import Stop from './stop.svg?component';
 import Tabs from './tabs.svg?component';
@@ -83,6 +87,7 @@ export const Icons = {
 	BrandAssets,
 	ChartBarMiddle,
 	ChartBarPeak,
+	ChartPie,
 	ChartTrendingDown,
 	CheckCircle,
 	Check,
@@ -100,6 +105,7 @@ export const Icons = {
 	Cross,
 	CursorClick,
 	Database,
+	Dollar,
 	ErrorStates,
 	ExternalSmall,
 	External,
@@ -125,6 +131,7 @@ export const Icons = {
 	LogoGithub,
 	LogoGitlab,
 	LogoNext,
+	LogoSvelte,
 	LogoTurborepo,
 	LogoV0,
 	LogoVercelCircle,
@@ -139,6 +146,7 @@ export const Icons = {
 	Router,
 	SettingsSliders,
 	Shield,
+	Star,
 	Status,
 	Stop,
 	Tabs,

src/lib/components/ui/button/index.ts

@@ -9,8 +9,9 @@ const button_variants = tv({
 			default: 'bg-gray-1000 text-background-100',
 			secondary: 'bg-background-100 text-gray-1000 shadow-shadow-border hover:bg-gray-alpha-100',
 			tertiary: 'bg-transparent hover:bg-gray-alpha-200',
-			error: 'bg-red-800 text-contrast-fg hover:bg-red-900',
-			warning: 'active:bg-[#a35200; bg-amber-800 text-[#0a0a0a] hover:bg-[#d27504]'
+			error: 'bg-red-700 text-contrast-fg hover:bg-red-800',
+			warning: 'active:bg-[#a35200; bg-amber-800 text-[#0a0a0a] hover:bg-[#d27504]',
+			success: 'bg-blue-700 text-contrast-fg hover:bg-blue-800'
 		},
 		size: {
 			sm: 'h-8 px-3',

src/lib/components/ui/link/index.ts

@@ -9,7 +9,8 @@ const link_variants = tv({
 			secondary: 'text-accents-5 hover:text-gray-1000',
 			tertiary: '',
 			error: '',
-			warning: ''
+			warning: '',
+			success: 'text-blue-900'
 		}
 	},
 	defaultVariants: {

src/lib/config/sitemap.ts

@@ -31,9 +31,9 @@ export const aside_items: Aside = {
 			status: 'soon'
 		},
 		{
-			title: 'Next.js',
-			href: 'brands#next.js',
-			icon: Icons.LogoNext,
+			title: 'Svelte',
+			href: 'brands#svelte',
+			icon: Icons.LogoSvelte,
 			status: 'soon'
 		},
 		{

src/lib/utils.ts

@@ -70,9 +70,35 @@ export const flyAndScale = (
 	};
 };
 
-// e.g. "with-icons" -> "With Icons"
+/**
+ * Formats a string to be more human-readable.
+ * @param str The string to format.
+ * @example
+ * format_string('with-icons') // 'With Icons'
+ * format_string('colors-1\\-3:-component-backgrounds') // 'Colors 1-3: Component Backgrounds'
+ */
 export function format_string(str: string) {
-	return str.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase());
+	// Replace escaped hyphens with a temporary placeholder
+	let processedString = str.replace(/\\-/g, '{{HYPHEN}}');
+
+	// Split the string by unescaped hyphens
+	const parts = processedString.split('-');
+
+	// Process each part
+	const formattedParts = parts.map((part) => {
+		// Capitalize the first letter of each word
+		return (
+			part
+				.replace(/\b\w/g, (c) => c.toUpperCase())
+				// Replace the placeholder back with a hyphen
+				.replace(/{{HYPHEN}}/g, '-')
+		);
+	});
+
+	// Join the parts and fix spacing around colons
+	let result = formattedParts.join(' ').replace(/ : /g, ': ');
+
+	return result;
 }
 
 // Wrappers around svelte's `HTMLAttributes` types to add a `ref` prop can be bound to

src/routes/colors/+page.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
 	import PageSection from '$lib/components/shared/page-section.svelte';
 	import PageWrapper from '$lib/components/shared/page-wrapper.svelte';
-	import ColorMenu from './color-menu.svelte';
-	import { scales } from './data.js';
+	import Backgrounds from './backgrounds.svelte';
+	import Borders from './borders.svelte';
+	import ComponentBackgrounds from './component-backgrounds.svelte';
+	import Contrasts from './contrasts.svelte';
+	import Scales from './scales.svelte';
+	import TextAndIcons from './text-and-icons.svelte';
 
 	let { data } = $props();
 </script>
@@ -12,29 +16,36 @@
 		id="scales"
 		subtitle="There are 10 color scales in the system. P3 colors are used on supported browsers and displays."
 	>
-		<ul class="grid gap-6 py-10">
-			{#each Object.entries(scales) as [scale, colors]}
-				<li class="flex flex-col items-start gap-2 md:flex-row md:items-center">
-					{@render color_scale({ scale, colors })}
-				</li>
-			{/each}
-		</ul>
+		<Scales />
 	</PageSection>
 	<PageSection
 		id="backgrounds"
 		subtitle="There are two background colors for pages and UI components. In most instances, you should use Background 1—especially when color is being placed on top of the background. Background 2 should be used sparingly when a subtle background differentiation is needed."
 	>
-		<!--  -->
+		<Backgrounds />
+	</PageSection>
+	<PageSection
+		id="colors-1\-3:-component-backgrounds"
+		subtitle="These three colors are designed for UI component backgrounds."
+	>
+		<ComponentBackgrounds />
+	</PageSection>
+	<PageSection
+		id="colors-4\-6:-borders"
+		subtitle="These three colors are designed for UI component borders."
+	>
+		<Borders />
+	</PageSection>
+	<PageSection
+		id="colors-7\-8:-high-contrast-backgrounds"
+		subtitle="These two colors are designed for high contrast UI component backgrounds."
+	>
+		<Contrasts />
+	</PageSection>
+	<PageSection
+		id="colors-9\-10:-text-and-icons"
+		subtitle="These two colors are designed for accessible text and icons."
+	>
+		<TextAndIcons />
 	</PageSection>
 </PageWrapper>
-
-{#snippet color_scale({ scale, colors }: { scale: string; colors: string[] })}
-	<p class="w-[100px] flex-shrink-0 text-sm font-medium text-gray-1000">{scale}</p>
-	<ul class="grid w-full grid-cols-10 gap-1 md:gap-2">
-		{#each colors as color}
-			<li>
-				<ColorMenu {color} />
-			</li>
-		{/each}
-	</ul>
-{/snippet}

src/routes/colors/backgrounds.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import DescriptionList from './description-list.svelte';
+
+	const backgrounds = [
+		{ title: 'Background 1', description: 'Default element background', color: 'background-100' },
+		{ title: 'Background 2', description: 'Default element background', color: 'background-200' }
+	];
+</script>
+
+<DescriptionList items={backgrounds} />
+
+<section
+	class="mt-10 flex h-[700px] w-full flex-col border border-gray-400 bg-background-100 md:h-[412px] md:flex-row"
+>
+	{@render bg_infographic({ bg: 'bg-background-100', border: 'md:border-r' })}
+	{@render bg_infographic({ bg: 'bg-background-200', border: 'border-t md:border-t-0' })}
+</section>
+
+{#snippet bg_infographic({ bg, border }: { bg: string; border?: string })}
+	<div
+		class={cn(
+			'flex h-[50%] items-center justify-center border-gray-400 md:h-[100%] md:w-[50%]',
+			bg,
+			border
+		)}
+	>
+		<div
+			class={cn(
+				'relative flex h-[164px] w-[164px] items-center justify-center rounded-[12px] border border-gray-400 bg-background-100'
+			)}
+		>
+			<p
+				class="text-mono flex size-6 items-center justify-center rounded-full bg-gray-alpha-100 font-mono text-xs text-gray-900"
+			>
+				1
+			</p>
+			<p
+				class="text-mono absolute bottom-[-57px] flex size-6 items-center justify-center rounded-full bg-gray-alpha-100 font-mono text-xs text-gray-900"
+			>
+				2
+			</p>
+		</div>
+	</div>
+{/snippet}

src/routes/colors/borders.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import Demo from './demo.svelte';
+	import DescriptionList from './description-list.svelte';
+
+	const backgrounds = [
+		{ title: 'Color 4', description: 'Default border', color: 'gray-400' },
+		{ title: 'Color 5', description: 'Hover border', color: 'gray-500' },
+		{ title: 'Color 6', description: 'Active border', color: 'gray-600' }
+	];
+</script>
+
+<DescriptionList items={backgrounds} />
+
+<Demo class="h-[136px] items-center justify-center">
+	<Button variant="secondary">New Project</Button>
+</Demo>

src/routes/colors/component-backgrounds.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { Icons } from '$lib/assets/icons';
+	import { Badge } from '$lib/components/ui/badge';
+	import Demo from './demo.svelte';
+	import DescriptionList from './description-list.svelte';
+
+	const backgrounds = [
+		{ title: 'Color 1', description: 'Default background', color: 'gray-100' },
+		{ title: 'Color 2', description: 'Hover background', color: 'gray-200' },
+		{ title: 'Color 3', description: 'Active background', color: 'gray-300' }
+	];
+</script>
+
+<DescriptionList items={backgrounds} />
+
+<p class="mt-10 text-gray-900">
+	If your UI component's default background is Background 1, you can used Color 1 as your hover
+	background and Color 2 as your active background. On smaller UI elements like badges, you can use
+	Color 2 or Color 3 as the background.
+</p>
+
+<Demo>
+	<div class="border-gray-400 p-2 md:p-12">
+		<ul>
+			{@render info_status()}
+			{@render warning_status()}
+			{@render info_status()}
+			{@render info_status()}
+		</ul>
+	</div>
+
+	<div
+		class="flex h-[120px] grow items-center justify-center gap-2 border-t md:h-auto md:border-l md:border-t-0"
+	>
+		<Badge variant="gray">Hobby</Badge>
+		<Badge variant="blue-subtle">Pro</Badge>
+		<Badge variant="purple-subtle">Enterprise</Badge>
+	</div>
+</Demo>
+
+{#snippet info_status()}
+	<li class="flex h-10 w-full cursor-pointer items-center gap-3 rounded-sm px-3 md:w-[420px]">
+		<Icons.Information class="size-4" />
+		<p class="font-mono text-[13px] leading-5 text-gray-900">APR 26 15:54:21.12</p>
+		<div class="h-5 w-px bg-gray-400"></div>
+		<p class="font-mono text-[13px] leading-5 text-gray-900">
+			<span class="hidden md:inline-block">/dashboard</span>/overview
+		</p>
+	</li>
+{/snippet}
+
+{#snippet warning_status()}
+	<li
+		class="flex h-10 w-full cursor-pointer items-center gap-3 rounded-sm bg-amber-100 px-3 text-amber-900 md:w-[420px]"
+	>
+		<Icons.Warning class="size-4" />
+		<p class="font-mono text-[13px] leading-5">APR 26 15:54:21.12</p>
+		<div class="h-5 w-px bg-gray-400"></div>
+		<p class="font-mono text-[13px] leading-5">
+			<span class="hidden md:inline-block">/dashboard</span>/overview
+		</p>
+	</li>
+{/snippet}

src/routes/colors/contrasts.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { Gauge } from '$lib/components/ui/gauge';
+	import Demo from './demo.svelte';
+	import DescriptionList from './description-list.svelte';
+
+	const backgrounds = [
+		{ title: 'Color 7', description: 'High contrast background', color: 'gray-700' },
+		{ title: 'Color 8', description: 'Hover high contrast background', color: 'gray-800' }
+	];
+</script>
+
+<DescriptionList items={backgrounds} />
+
+<Demo class="h-[136px] items-center justify-center">
+	<div class="flex h-full w-[50%] items-center justify-center gap-5 border-r border-gray-400">
+		<Gauge show_value size="sm" value={90} />
+		<Gauge show_value size="sm" value={55} />
+		<Gauge show_value size="sm" value={20} />
+	</div>
+
+	<div class="flex w-[50%] justify-center">
+		<Button variant="success" size="lg">Upgrade to Pro</Button>
+	</div>
+</Demo>