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.
learningequality · Dec 11, 2024 · 4ae719c · 4ae719c
1 parent 44c8236
commit 4ae719c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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 };