From b95e3c6206205d25b8635073243ed5abd5f96202 Mon Sep 17 00:00:00 2001
From: MisRob <robosovam@gmail.com>
Date: Fri, 22 Mar 2024 15:07:57 +0100
Subject: [PATCH] Rebrand icons in buttons and links

---
 lib/buttons-and-links/KButton.vue       | 22 +++-------------------
 lib/buttons-and-links/KExternalLink.vue |  6 +++---
 lib/buttons-and-links/KRouterLink.vue   |  4 ++--
 lib/buttons-and-links/buttonMixin.js    | 15 +++++++++++++++
 4 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/lib/buttons-and-links/KButton.vue b/lib/buttons-and-links/KButton.vue
index d254944cf..781d11ff8 100644
--- a/lib/buttons-and-links/KButton.vue
+++ b/lib/buttons-and-links/KButton.vue
@@ -117,19 +117,6 @@
       };
     },
     computed: {
-      iconColor() {
-        if (this.appearance === 'basic-link') {
-          return this.hovering ? this.$themeTokens.primaryDark : this.$themeTokens.primary;
-        }
-
-        if (this.secondary) {
-          return this.appearance === 'raised-button'
-            ? this.$themeBrand.textInverted
-            : this.$themeBrand.secondary;
-        } else {
-          return this.$themeBrand.text;
-        }
-      },
       htmlTag() {
         // Necessary to allow basic links to be rendered as 'inline' instead of
         // 'inline-block': https://stackoverflow.com/a/27770128
@@ -139,12 +126,9 @@
         return 'button';
       },
       arrowStyles() {
-        if (this.secondary) {
-          return {
-            fill: this.$themeBrand.textInverted,
-          };
-        }
-        return {};
+        return {
+          fill: this.iconColor,
+        };
       },
       textStyle() {
         let styles = {};
diff --git a/lib/buttons-and-links/KExternalLink.vue b/lib/buttons-and-links/KExternalLink.vue
index b4ec64bd3..d90307784 100644
--- a/lib/buttons-and-links/KExternalLink.vue
+++ b/lib/buttons-and-links/KExternalLink.vue
@@ -18,7 +18,7 @@
         v-if="icon"
         :icon="icon"
         style="top: 4px;"
-        :color="hovering ? $themeTokens.primaryDark : $themeTokens.primary"
+        :color="iconColor"
       />
     </slot>
 
@@ -33,14 +33,14 @@
         v-if="iconAfter"
         :icon="iconAfter"
         style="top: 4px;"
-        :color="hovering ? $themeTokens.primaryDark : $themeTokens.primary"
+        :color="iconColor"
       />
     </slot>
     <KIcon
       v-if="openInNewTab"
       icon="openNewTab"
       style="top: 4px;"
-      :color="hovering ? $themeTokens.primaryDark : $themeTokens.primary"
+      :color="iconColor"
     />
   </a>
 
diff --git a/lib/buttons-and-links/KRouterLink.vue b/lib/buttons-and-links/KRouterLink.vue
index 8befc3dc3..0fc4f13e2 100644
--- a/lib/buttons-and-links/KRouterLink.vue
+++ b/lib/buttons-and-links/KRouterLink.vue
@@ -21,7 +21,7 @@
         v-if="icon"
         :icon="icon"
         style="top: 4px;"
-        :color="hovering ? $themeTokens.primaryDark : $themeTokens.primary"
+        :color="iconColor"
         data-test="icon-before"
       />
     </slot>
@@ -39,7 +39,7 @@
         v-if="iconAfter"
         :icon="iconAfter"
         style="top: 4px;"
-        :color="hovering ? $themeTokens.secondaryDark : $themeTokens.secondary"
+        :color="iconColor"
         data-test="icon-after"
       />
     </slot>
diff --git a/lib/buttons-and-links/buttonMixin.js b/lib/buttons-and-links/buttonMixin.js
index f31665353..360cdd28d 100644
--- a/lib/buttons-and-links/buttonMixin.js
+++ b/lib/buttons-and-links/buttonMixin.js
@@ -128,6 +128,21 @@ export default {
         },
       };
     },
+    iconColor() {
+      if (this.appearance === 'basic-link') {
+        return this.hovering ? this.$themeTokens.primaryDark : this.$themeTokens.primary;
+      }
+
+      if (this.appearance === 'raised-button') {
+        return this.primary ? this.$themeTokens.textInverted : this.$themeTokens.text;
+      }
+
+      if (this.appearance === 'flat-button') {
+        return this.primary ? this.$themeTokens.primary : this.$themeTokens.text;
+      }
+
+      return {};
+    },
   },
   methods: {
     buttonComputedClass(styles) {