From 8219cf576a50113936c4ac4feea3f863d46d079f Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <stefan@imhoff.name>
Date: Fri, 24 Feb 2023 16:20:51 +0100
Subject: [PATCH] chore: move icon and click area sizes into tokens

---
 src/components/Backlink.astro    | 4 ++--
 src/components/ThemeToggle.astro | 6 +++---
 src/layouts/Layout.astro         | 6 ------
 tailwind.config.cjs              | 2 ++
 4 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/components/Backlink.astro b/src/components/Backlink.astro
index 5addcd1..9621528 100644
--- a/src/components/Backlink.astro
+++ b/src/components/Backlink.astro
@@ -16,10 +16,10 @@ const { backLink } = Astro.props;
 		>
 			<button
 				aria-label="Back to overview"
-				class="back-link-button flex h-[40px] w-[40px] cursor-pointer items-center justify-center border-none text-[0]"
+				class="back-link-button h-clickarea w-clickarea flex cursor-pointer items-center justify-center border-none text-[0]"
 				type="button"
 			>
-				<Sprite name="ri:arrow-left-line" class="h-[25px] w-[25px]" />
+				<Sprite name="ri:arrow-left-line" class="h-icon w-icon" />
 			</button>
 		</a>
 	)
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index b8a97b7..69c6e36 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -3,15 +3,15 @@ import { Sprite } from 'astro-icon';
 ---
 
 <theme-toggle
-	class="col-start-18 flex h-[40px] w-[40px] items-center self-center justify-center justify-self-center print:hidden"
+	class="col-start-18 flex h-clickarea w-clickarea items-center self-center justify-center justify-self-center print:hidden"
 >
 	<button
 		aria-label="Switch color theme"
-		class="theme-toggle group flex h-[40px] w-[40px] cursor-pointer items-center justify-center self-center border-0 text-[0]"
+		class="theme-toggle h-clickarea w-clickarea group flex cursor-pointer items-center justify-center self-center border-0 text-[0]"
 	>
 		<Sprite
 			name="circle"
-			class="duration-500 h-[25px] w-[25px] transition-transform ease-in-out group-hover:scale-125 group-focus:scale-125"
+			class="duration-500 h-icon w-icon transition-transform ease-in-out group-hover:scale-125 group-focus:scale-125"
 		/>
 	</button>
 </theme-toggle>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 157754c..e5bb49b 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -61,11 +61,5 @@ const { title, backLink } = Astro.props;
 				Footer
 			</footer>
 		</Sprite.Provider>
-		<style>
-			:global([astro-icon]) {
-				width: 24px;
-				height: 24px;
-			}
-		</style>
 	</body>
 </html>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 810a0b0..e29ffb0 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -107,6 +107,8 @@ module.exports = {
 				20: 'clamp(8.916rem, 19.08vw, 10.699rem)', // --space-20
 				55: '5.55vw', // --space-55 TODO: new name, e.g. spacing-grid
 				layout: 'clamp(1.5rem, 5.55vw, 4.5rem)',
+				icon: '24px',
+				clickarea: '40px',
 			},
 			fontFamily: {
 				sans: ['SecuelaVariable', 'Arial', 'sans-serif'], // --font-family-base