link

src/app.css

@@ -109,6 +109,15 @@
 		--gray-alpha-900: rgba(0, 0, 0, 0.61);
 		--gray-alpha-1000: rgba(0, 0, 0, 0.91);
 
+		--accents-1: #fafafa;
+		--accents-2: #eaeaea;
+		--accents-3: #999;
+		--accents-4: #888;
+		--accents-5: #666;
+		--accents-6: #444;
+		--accents-7: #333;
+		--accents-8: #111;
+
 		--contrast-fg: hsl(0 0% 100%);
 		--focus-color: var(--blue-700);
 
@@ -225,6 +234,15 @@
 		--gray-alpha-900: hsla(0, 0%, 100%, 0.61);
 		--gray-alpha-1000: hsla(0, 0%, 100%, 0.92);
 
+		--accents-1: #111;
+		--accents-2: #333;
+		--accents-3: #444;
+		--accents-4: #666;
+		--accents-5: #888;
+		--accents-6: #999;
+		--accents-7: #eaeaea;
+		--accents-8: #fafafa;
+
 		--focus-color: var(--blue-900);
 
 		/* Shadows */

src/lib/assets/icons/index.ts

@@ -17,6 +17,7 @@ import Command from './command.svg?component';
 import Copy from './copy.svg?component';
 import Database from './database.svg?component';
 import ErrorStates from './error-states.svg?component';
+import ExternalSmall from './external-small.svg?component';
 import External from './external.svg?component';
 import FileText from './file-text.svg?component';
 import Flag from './flag.svg?component';
@@ -70,6 +71,7 @@ export const Icons = {
 	Copy,
 	Database,
 	ErrorStates,
+	ExternalSmall,
 	External,
 	FileText,
 	Flag,

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

@@ -0,0 +1,38 @@
+import type { Button as LinkPrimitive } from 'bits-ui';
+import { type VariantProps, tv } from 'tailwind-variants';
+import Link from './link.svelte';
+
+const link_variants = tv({
+	base: 'inline-flex select-none items-center justify-center gap-x-1 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background-200 transition-[background,color,transform,box-shadow] ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-color focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:text-gray-700 [&>svg]:size-3',
+	variants: {
+		variant: {
+			default: '',
+			secondary: 'text-accents-5 hover:text-gray-1000',
+			tertiary: '',
+			error: '',
+			warning: ''
+		}
+	},
+	defaultVariants: {
+		variant: 'default'
+	}
+});
+
+type Variant = VariantProps<typeof link_variants>['variant'];
+
+type Props = LinkPrimitive.Props & {
+	variant?: Variant;
+	external?: boolean;
+	href: string;
+};
+
+type Events = LinkPrimitive.Events;
+
+export {
+	Link,
+	link_variants,
+	type Events as ButtonEvents,
+	type Props as ButtonProps,
+	type Events,
+	type Props
+};

src/lib/components/ui/link/link.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Icons } from '$lib/assets/icons/index.js';
+	import { cn } from '$lib/utils.js';
+	import { Button as LinkPrimitive } from 'bits-ui';
+	import { type Events, type Props, link_variants } from './index.js';
+
+	type $$Props = Props;
+	type $$Events = Events;
+
+	let class_name: $$Props['class'] = undefined;
+	export let variant: $$Props['variant'] = 'default';
+	export let href: $$Props['href'];
+	export let builders: $$Props['builders'] = [];
+	export let external: $$Props['external'] = false;
+	export { class_name as class };
+</script>
+
+<LinkPrimitive.Root
+	{builders}
+	class={cn(link_variants({ variant, className: class_name }))}
+	{href}
+	target={external ? '_blank' : undefined}
+	rel={external ? 'noopener noreferrer' : undefined}
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+	{#if external}
+		<Icons.External aria-hidden="true" />
+	{/if}
+</LinkPrimitive.Root>

src/routes/empty-state/informational.svelte

@@ -2,16 +2,15 @@
 	import { Icons } from '$lib/assets/icons';
 	import { Button } from '$lib/components/ui/button';
 	import { EmptyState } from '$lib/components/ui/empty-state';
+	import { Link } from '$lib/components/ui/link';
 </script>
 
 <EmptyState
+	title="Title"
 	description="This should detail the actions you can take on this screen, as well as why it's valuable."
 	icon={Icons.ChartBarPeak}
 	icon_size={32}
-	title="Title"
 >
 	<Button variant="secondary">Primary Action</Button>
-	<!-- <Link external href="/" variant="secondary">
-        Learn more
-      </Link> -->
+	<Link external href="https://shyakadavis.me/" variant="secondary">Learn more</Link>
 </EmptyState>

tailwind.config.ts

@@ -127,6 +127,16 @@ const config: Config = {
 				900: 'var(--pink-900)',
 				1000: 'var(--pink-1000)'
 			},
+			accents: {
+				1: 'var(--accents-1)',
+				2: 'var(--accents-2)',
+				3: 'var(--accents-3)',
+				4: 'var(--accents-4)',
+				5: 'var(--accents-5)',
+				6: 'var(--accents-6)',
+				7: 'var(--accents-7)',
+				8: 'var(--accents-8)'
+			},
 			'contrast-fg': 'var(--contrast-fg)',
 			'focus-color': 'var(--focus-color)'
 		},