From 38a9322858ef86dcb45645d5ca6782929ed2b73f Mon Sep 17 00:00:00 2001
From: Michaela Robosova <robosovam@gmail.com>
Date: Thu, 26 Sep 2024 21:12:53 +0200
Subject: [PATCH] Consistent style for pills

---
 docs/pages/kcard.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/docs/pages/kcard.vue b/docs/pages/kcard.vue
index c24e5b6ad..1076c90cf 100644
--- a/docs/pages/kcard.vue
+++ b/docs/pages/kcard.vue
@@ -251,7 +251,11 @@
             prependTitle="(1)"
           >
             <template #aboveTitle>
-              <KLabeledIcon icon="readSolid" label="Read" />
+              <KLabeledIcon
+                icon="readSolid"
+              >
+                <span :style="{ 'color': $themeTokens.annotation }">Read</span>
+              </KLabeledIcon>
             </template>
             <template #footer>
               <div class="pills" :style="{ 'color': $themeTokens.annotation }">
@@ -431,14 +435,14 @@
               />
             </template>
             <template #footer>
-              <div :style="{ marginLeft: '-8px' }">
+              <div class="pills" :style="{ 'color': $themeTokens.annotation }">
                 <span
-                  :style="{ display: 'inline-block', 'backgroundColor': $themePalette.grey.v_50, padding: '8px 6px', margin: '8px' }"
+                  :style="{ 'backgroundColor': $themePalette.grey.v_50 }"
                 >
                   Short Activity
                 </span>
                 <span
-                  :style="{ display: 'inline-block', 'backgroundColor': $themePalette.grey.v_50, padding: '8px 6px', margin: '8px' }"
+                  :style="{ 'backgroundColor': $themePalette.grey.v_50 }"
                 >
                   Biology
                 </span>