Rebrand icons in buttons and links

learningequality · Mar 26, 2024 · b95e3c6 · b95e3c6
1 parent d1362b2
commit b95e3c6
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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) {