Merge pull request #12937 from nucleogenesis/themeTokens-appBarText-for-is

AppBar: Use appBarText for text/icon colors

Author: rtibbles

kolibri/__init__.py

@@ -11,7 +11,7 @@
 
 #: This may not be the exact version as it's subject to modification with
 #: get_version() - use ``kolibri.__version__`` for the exact version string.
-VERSION = (0, 17, 4)
+VERSION = (0, 17, 5)
 
 __author__ = "Learning Equality"
 __email__ = "[email protected]"

kolibri/core/assets/src/styles/themeConfig.js

@@ -2,6 +2,8 @@ import Vue from 'vue';
 
 const themeConfig = Vue.observable({
   appBar: {
+    background: null,
+    textColor: null,
     topLogo: {
       src: null,
       alt: null,

kolibri/core/assets/src/styles/themeSpec.js

@@ -1,4 +1,5 @@
 import logger from 'kolibri.lib.logging';
+import { themeTokens } from 'kolibri-design-system/lib/styles/theme';
 import isObject from 'lodash/isObject';
 
 const logging = logger.getLogger(__filename);
@@ -42,6 +43,25 @@ const _imageSpec = {
 };
 
 export default {
+  appBar: {
+    type: Object,
+    default: null,
+    spec: {
+      background: {
+        type: String,
+        default: themeTokens().appBar,
+      },
+      textColor: {
+        type: String,
+        default: themeTokens().text,
+      },
+      topLogo: {
+        type: Object,
+        default: null,
+        spec: _imageSpec,
+      },
+    },
+  },
   brandColors: {
     type: Object,
     default: null,

kolibri/core/assets/src/views/AppBar.vue

@@ -2,17 +2,23 @@
 
   <div
     v-show="!$isPrint"
-    :style="{ backgroundColor: $themeTokens.appBar }"
+    :style="{
+      backgroundColor: themeConfig.appBar.background,
+      color: themeConfig.appBar.textColor,
+    }"
   >
     <header>
       <SkipNavigationLink />
 
       <UiToolbar
         :removeNavIcon="showAppNavView"
         type="clear"
-        textColor="black"
+        :textColor="themeConfig.appBar.textColor"
         class="app-bar"
-        :style="{ height: topBarHeight + 'px' }"
+        :style="{
+          height: topBarHeight + 'px',
+          color: themeConfig.appBar.textColor,
+        }"
         :raised="false"
         :removeBrandDivider="true"
       >
@@ -26,7 +32,7 @@
         >
           <KIconButton
             icon="menu"
-            :color="$themeTokens.text"
+            :color="themeConfig.appBar.textColor"
             :ariaLabel="$tr('openNav')"
             @click="$emit('toggleSideNav')"
           />
@@ -94,7 +100,7 @@
               <KIcon
                 icon="person"
                 :style="{
-                  fill: $themeTokens.text,
+                  fill: themeConfig.appBar.textColor,
                   height: '24px',
                   width: '24px',
                   margin: '4px',

kolibri/core/assets/src/views/Navbar/NavbarLink.vue

@@ -29,6 +29,7 @@
 
   import { validateLinkObject } from 'kolibri.utils.validators';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import themeConfig from 'kolibri.themeConfig';
 
   /**
      Links for use inside the Navbar
@@ -38,6 +39,7 @@
     setup() {
       const { windowIsSmall } = useKResponsiveWindow();
       return {
+        themeConfig,
         windowIsSmall,
       };
     },
@@ -61,7 +63,7 @@
     computed: {
       tabStyles() {
         return {
-          color: this.$themeTokens.text,
+          color: this.themeConfig.appBar.textColor,
           ':hover': {
             'background-color': this.$themeBrand.secondary.v_600,
           },
@@ -81,7 +83,7 @@
       activeClasses() {
         // return both fixed and dynamic classes
         return `router-link-active ${this.$computedClass({
-          color: this.$themeTokens.text,
+          color: this.themeConfig.appBar.textColor,
         })}`;
       },
     },

kolibri/core/assets/src/views/Navbar/index.vue

@@ -16,7 +16,7 @@
       >
         <KIcon
           :icon="link.icon"
-          :color="$themeTokens.text"
+          :color="themeConfig.appBar.textColor"
         />
       </NavbarLink>
     </ul>
@@ -27,7 +27,7 @@
       :ariaLabel="coreString('moreOptions')"
       icon="optionsHorizontal"
       appearance="flat-button"
-      :color="$themeTokens.text"
+      :color="themeConfig.appBar.textColor"
       :primary="false"
       class="kiconbutton-style"
     >
@@ -51,6 +51,7 @@
   import isUndefined from 'lodash/isUndefined';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import themeConfig from 'kolibri.themeConfig';
   import NavbarLink from './NavbarLink';
   /**
    * Used for navigation between sub-pages of a top-level Kolibri section
@@ -67,6 +68,7 @@
         windowIsLarge,
         windowIsMedium,
         windowWidth,
+        themeConfig,
       };
     },
     props: {

kolibri/core/assets/src/views/SideNav.vue

@@ -196,22 +196,23 @@
               height: topBarHeight + 'px',
               width: `${width}`,
               paddingTop: windowIsSmall ? '4px' : '8px',
-              backgroundColor: $themeTokens.appBar,
+              backgroundColor: themeConfig.appBar.background,
+              color: themeConfig.appBar.textColor,
             }"
           >
             <KIconButton
               ref="closeButton"
               tabindex="0"
               icon="close"
-              :color="$themeTokens.text"
+              :color="themeConfig.appBar.textColor"
               class="side-nav-header-icon"
               :ariaLabel="$tr('closeNav')"
               size="large"
               @click="toggleNav"
             />
             <span
               class="side-nav-header-name"
-              :style="{ color: $themeTokens.text }"
+              :style="{ color: themeConfig.appBar.textColor }"
             >{{ sideNavTitleText }}</span>
           </div>
         </FocusTrap>