From baf62f79cd726fa28ff67f2fb0ae7ad07c452352 Mon Sep 17 00:00:00 2001
From: Johan Bisse Mattsson <bisse.mattsson@kb.se>
Date: Wed, 28 Feb 2024 16:04:07 +0100
Subject: [PATCH] Update pill styling

---
 lxl-web/src/colors.css                          |  1 +
 lxl-web/src/lib/components/DecoratedData.svelte | 10 +++++++++-
 lxl-web/tailwind.config.js                      |  3 ++-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/lxl-web/src/colors.css b/lxl-web/src/colors.css
index 465cfea48..b9813a0d3 100644
--- a/lxl-web/src/colors.css
+++ b/lxl-web/src/colors.css
@@ -28,6 +28,7 @@ see https://tailwindcss.com/docs/customizing-colors#using-css-variables */
 	--bg-positive: var(--color-accent-light);
 	--bg-positive-inv: var(--color-primary);
 	--bg-cards: var(--color-white);
+	--bg-pill: var(--color-brown);
 }
 
 /* Dark mode */
diff --git a/lxl-web/src/lib/components/DecoratedData.svelte b/lxl-web/src/lib/components/DecoratedData.svelte
index 598357929..c59fff6f3 100644
--- a/lxl-web/src/lib/components/DecoratedData.svelte
+++ b/lxl-web/src/lib/components/DecoratedData.svelte
@@ -139,6 +139,9 @@
 {/if}
 
 <style>
+	a {
+		color: inherit;
+	}
 	.definition {
 		text-decoration: underline;
 		text-decoration-style: dotted;
@@ -148,6 +151,11 @@
 	}
 
 	.pill {
-		@apply inline-block rounded-md border border-accent-dark p-1 no-underline;
+		@apply mr-1 inline-block rounded-full bg-pill/8 px-3 py-1 no-underline;
+
+		&:hover,
+		&:focus {
+			@apply bg-pill/16;
+		}
 	}
 </style>
diff --git a/lxl-web/tailwind.config.js b/lxl-web/tailwind.config.js
index 0b31a19a4..d6f23e10c 100644
--- a/lxl-web/tailwind.config.js
+++ b/lxl-web/tailwind.config.js
@@ -24,7 +24,8 @@ export default {
 			head: 'rgb(var(--bg-head) / 1)',
 			positive: 'rgb(var(--bg-positive) / 1)',
 			'positive-inv': 'rgb(var(--bg-positive-inv) / 1)',
-			cards: 'rgb(var(--bg-cards) / 1)'
+			cards: 'rgb(var(--bg-cards) / 1)',
+			pill: 'rgb(var(--bg-pill) / <alpha-value>)'
 		},
 		opacity: {
 			80: '.80',