From 4ae719c0ba7622896bc742be25f8a6f34766ce57 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Wed, 11 Dec 2024 14:57:32 -0800
Subject: [PATCH] AppBar: Use appBarText for text/icon colors

- NavBar & NavbarLink now take & drill a `textColor` prop
- In AppBar, the new token `appBarText` is passed to `textColor`
- In AppBar, it is also used as the default color for icons, the page title, and the user's info

This is done to permit plugins to customize the text in the AppBar so that they can ensure proper contrast with their chosen `appBar` token's value, which is used as the background.
---
 kolibri/core/assets/src/views/AppBar.vue            | 12 ++++++++----
 kolibri/core/assets/src/views/Navbar/NavbarLink.vue |  8 ++++++--
 kolibri/core/assets/src/views/Navbar/index.vue      |  9 +++++++--
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/kolibri/core/assets/src/views/AppBar.vue b/kolibri/core/assets/src/views/AppBar.vue
index 75680355036..f14d8e211ae 100644
--- a/kolibri/core/assets/src/views/AppBar.vue
+++ b/kolibri/core/assets/src/views/AppBar.vue
@@ -10,9 +10,12 @@
       <UiToolbar
         :removeNavIcon="showAppNavView"
         type="clear"
-        textColor="black"
+        :textColor="$themeTokens.appBarText || $themeTokens.text"
         class="app-bar"
-        :style="{ height: topBarHeight + 'px' }"
+        :style="{
+          height: topBarHeight + 'px',
+          color: $themeTokens.appBarText || $themeTokens.text,
+        }"
         :raised="false"
         :removeBrandDivider="true"
       >
@@ -26,7 +29,7 @@
         >
           <KIconButton
             icon="menu"
-            :color="$themeTokens.text"
+            :color="$themeTokens.appBarText || $themeTokens.text"
             :ariaLabel="$tr('openNav')"
             @click="$emit('toggleSideNav')"
           />
@@ -49,6 +52,7 @@
           <slot name="sub-nav">
             <Navbar
               v-if="links.length > 0"
+              :textColor="$themeTokens.appBarText || $themeTokens.text"
               :navigationLinks="links"
             />
           </slot>
@@ -94,7 +98,7 @@
               <KIcon
                 icon="person"
                 :style="{
-                  fill: $themeTokens.text,
+                  fill: $themeTokens.appBarText || $themeTokens.text,
                   height: '24px',
                   width: '24px',
                   margin: '4px',
diff --git a/kolibri/core/assets/src/views/Navbar/NavbarLink.vue b/kolibri/core/assets/src/views/Navbar/NavbarLink.vue
index a0d720ea7f8..67169a7159d 100644
--- a/kolibri/core/assets/src/views/Navbar/NavbarLink.vue
+++ b/kolibri/core/assets/src/views/Navbar/NavbarLink.vue
@@ -57,11 +57,15 @@
         required: true,
         validator: validateLinkObject,
       },
+      textColor: {
+        type: String,
+        default: null,
+      },
     },
     computed: {
       tabStyles() {
         return {
-          color: this.$themeTokens.text,
+          color: this.textColor || this.$themeTokens.text,
           ':hover': {
             'background-color': this.$themeBrand.secondary.v_600,
           },
@@ -81,7 +85,7 @@
       activeClasses() {
         // return both fixed and dynamic classes
         return `router-link-active ${this.$computedClass({
-          color: this.$themeTokens.text,
+          color: this.textColor || this.$themeTokens.text,
         })}`;
       },
     },
diff --git a/kolibri/core/assets/src/views/Navbar/index.vue b/kolibri/core/assets/src/views/Navbar/index.vue
index 556c85b4046..94d4a4a9805 100644
--- a/kolibri/core/assets/src/views/Navbar/index.vue
+++ b/kolibri/core/assets/src/views/Navbar/index.vue
@@ -13,10 +13,11 @@
         ref="navLinks"
         :title="link.title"
         :link="link.link"
+        :textColor="textColor || $themeTokens.text"
       >
         <KIcon
           :icon="link.icon"
-          :color="$themeTokens.text"
+          :color="textColor || $themeTokens.text"
         />
       </NavbarLink>
     </ul>
@@ -27,7 +28,7 @@
       :ariaLabel="coreString('moreOptions')"
       icon="optionsHorizontal"
       appearance="flat-button"
-      :color="$themeTokens.text"
+      :color="textColor || $themeTokens.text"
       :primary="false"
       class="kiconbutton-style"
     >
@@ -81,6 +82,10 @@
           return values.every(value => value.link.name);
         },
       },
+      textColor: {
+        type: String,
+        default: null,
+      },
     },
     data() {
       return { mounted: false };