From 36f579ce28a9e83b2e4d67af570cbabd4a3b9016 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Fri, 7 Nov 2025 17:00:54 +0100
Subject: [PATCH 1/3] Migrate to semantic colours

---
 components/src/Select/Select.svelte              | 16 ++++++++++------
 .../src/Select/SelectStoriesTemplate.svelte      |  2 +-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/components/src/Select/Select.svelte b/components/src/Select/Select.svelte
index b23fdb16..557178e0 100644
--- a/components/src/Select/Select.svelte
+++ b/components/src/Select/Select.svelte
@@ -65,12 +65,16 @@
 </div>
 
 <style lang="scss">
-	.item {
+	.container {
 		font-family: var(--swr-sans);
-		color: var(--violet-dark-5);
-	}
-	.selection {
-		font-family: var(--swr-sans);
-		color: var(--violet-dark-5);
+		--background: var(--color-surfaceFill);
+		--list-background: var(--color-surfaceFill);
+		--selection-background: var(--color-surfaceFill);
+		--item-is-active-bg: var(--color-surfaceBorder);
+		--item-is-active-color: var(--color-textPrimary);
+		--item-hover-bg: var(--color-surfaceBorder);
+		--item-color: var(--color-textPrimary);
+		--item-hover-color: var(--color-textPrimary);
+		--selected-item-color: var(--color-textPrimary);
 	}
 </style>
diff --git a/components/src/Select/SelectStoriesTemplate.svelte b/components/src/Select/SelectStoriesTemplate.svelte
index 54954620..af2d667c 100644
--- a/components/src/Select/SelectStoriesTemplate.svelte
+++ b/components/src/Select/SelectStoriesTemplate.svelte
@@ -6,7 +6,7 @@
 	let { args = null, selectedItem = $bindable(), demoComponent = null } = $props();
 </script>
 
-<DesignTokens>
+<DesignTokens theme="light">
 	{#if demoComponent}
 		{@render demoComponent()}
 	{:else}

From b84fa70edb0b7e5923c94710b7d60de8cab46bc3 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Fri, 7 Nov 2025 17:08:36 +0100
Subject: [PATCH 2/3] FormLabel: Set semantic text colour

---
 components/src/FormLabel/FormLabel.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/src/FormLabel/FormLabel.svelte b/components/src/FormLabel/FormLabel.svelte
index 4e1eb3b6..fb98e47b 100644
--- a/components/src/FormLabel/FormLabel.svelte
+++ b/components/src/FormLabel/FormLabel.svelte
@@ -26,6 +26,7 @@
 
 <style>
 	.container {
+		color: var(--color-textPrimary);
 		font-family: var(--swr-text);
 		font-size: var(--fs-small-1);
 		font-weight: 400;

From 9fa8d5a1dc443846584d4337a393d8362d1e982e Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Fri, 7 Nov 2025 17:11:33 +0100
Subject: [PATCH 3/3] Add comment

---
 components/src/Select/Select.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/src/Select/Select.svelte b/components/src/Select/Select.svelte
index 557178e0..f2afbbd7 100644
--- a/components/src/Select/Select.svelte
+++ b/components/src/Select/Select.svelte
@@ -67,6 +67,7 @@
 <style lang="scss">
 	.container {
 		font-family: var(--swr-sans);
+		// See: https://github.com/rob-balfre/svelte-select/blob/master/docs/theming_variables.md
 		--background: var(--color-surfaceFill);
 		--list-background: var(--color-surfaceFill);
 		--selection-background: var(--color-surfaceFill);