Rebrand icons in buttons and links

CHANGELOG.md

@@ -4,6 +4,17 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Version 4.x.x (`release-v4` branch)
 
+- [#587]
+  - **Description:** Rebrands icons in buttons and links
+  - **Products impact:** UI
+  - **Addresses:** -
+  - **Components:** `KButton`, `KRouterLink`, `KExternalLink`
+  - **Breaking:** no
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#587]: https://github.com/learningequality/kolibri-design-system/pull/587
+
 - [#561]
   - **Description:** Update KLogo for new branding guidelines
   - **Products impact:** Enables general use of KLogo for all frontend logo usage. Changes props API for square logo presentation.

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 = {};

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>
 

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>

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) {