Build out feature (#245)

* Link the logotype to our website
* Improve contrast on the logotype

Author: awesomephant

components/src/ChartFooter/ChartFooter.stories.svelte

@@ -13,7 +13,7 @@
 </script>
 
 <Story name="One-up" asChild>
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<ChartFooter layout="one-up">
 			Daten: <a href="#1">Zensus 2022</a>
 			(Durchschnittsmieten und Einwohnerzahlen),
@@ -24,7 +24,7 @@
 </Story>
 
 <Story name="One-up Centered" asChild>
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<ChartFooter layout="one-up" align="center">
 			Daten: <a href="#1">Zensus 2022</a>
 			(Durchschnittsmieten und Einwohnerzahlen),
@@ -44,7 +44,7 @@
 		});
 	}}
 >
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<ChartFooter layout="one-up" align="center" showLogo={false}>
 			Daten: <a href="#1">Zensus 2022</a>
 			(Durchschnittsmieten und Einwohnerzahlen),

components/src/ChartFooter/ChartFooter.svelte

@@ -20,7 +20,10 @@
 		</Note>
 	{/if}
 	{#if showLogo}
-		<Logotype />
+		<a href="https://www.swr.de/home/swr-data-lab-team-100.html" class="logo-link">
+			SWR Data Lab
+			<Logotype />
+		</a>
 	{/if}
 </footer>
 
@@ -33,6 +36,17 @@
 			width: 100%;
 		}
 	}
+
+	.logo-link {
+		font-size: 0;
+		&:hover,
+		&:focus-visible {
+			:global(path) {
+				fill: var(--color-logoFillHover);
+			}
+		}
+	}
+
 	.one-up {
 		display: flex;
 		flex-flow: column;

components/src/DesignTokens/DesignTokens.svelte

@@ -58,6 +58,7 @@
 		--color-textSecondary: var(--textSecondary-light);
 		--color-textSecondaryHover: var(--textSecondaryHover-light);
 		--color-logoFill: var(--logoFill-light);
+		--color-logoFillHover: var(--logoFillHover-light);
 		--color-pageFill: var(--pageFill-light);
 		--color-surfaceFill: var(--surfaceFill-light);
 		--color-surfaceHover: var(--surfaceHover-light);
@@ -66,6 +67,7 @@
 
 		&[data-theme='dark'] {
 			--color-logoFill: var(--logoFill-dark);
+			--color-logoFillHover: var(--logoFillHover-dark);
 			--color-pageFill: var(--pageFill-dark);
 			--color-surfaceFill: var(--surfaceFill-dark);
 			--color-surfaceBorder: var(--surfaceBorder-dark);

components/src/DesignTokens/Tokens.ts

@@ -170,9 +170,13 @@ const semantics: ColourMap = {
 		dark: '#b4b4b4'
 	},
 	logoFill: {
-		light: shades.gray.light3,
+		light: shades.gray.light1,
 		dark: shades.gray.base
 	},
+	logoFillHover: {
+		light: shades.gray.base,
+		dark: shades.gray.light1
+	},
 	surfaceFill: {
 		dark: '#222325',
 		light: '#ffffff'