fix incorrect uses of themeConfig and themeTokens utilities

learningequality · Dec 13, 2024 · ad78b7d · ad78b7d
1 parent ec00222
commit ad78b7d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/kolibri/core/assets/src/styles/themeSpec.js b/kolibri/core/assets/src/styles/themeSpec.js
@@ -49,11 +49,11 @@ export default {
     spec: {
       background: {
         type: String,
-        default: themeTokens.appBar,
+        default: themeTokens().appBar,
       },
       textColor: {
         type: String,
-        default: themeTokens.text,
+        default: themeTokens().text,
       },
       topLogo: {
         type: Object,

diff --git a/kolibri/core/assets/src/views/AppBar.vue b/kolibri/core/assets/src/views/AppBar.vue
@@ -2,19 +2,22 @@
 
   <div
     v-show="!$isPrint"
-    :style="{ backgroundColor: $themeConfig.appBar.background }"
+    :style="{
+      backgroundColor: themeConfig.appBar.background,
+      color: themeConfig.appBar.textColor,
+    }"
   >
     <header>
       <SkipNavigationLink />
 
       <UiToolbar
         :removeNavIcon="showAppNavView"
         type="clear"
-        :textColor="$themeConfig.appBar.textColor"
+        :textColor="themeConfig.appBar.textColor"
         class="app-bar"
         :style="{
           height: topBarHeight + 'px',
-          color: $themeConfig.appBar.textColor,
+          color: themeConfig.appBar.textColor,
         }"
         :raised="false"
         :removeBrandDivider="true"
@@ -29,7 +32,7 @@
         >
           <KIconButton
             icon="menu"
-            :color="$themeConfig.appBar.textColor"
+            :color="themeConfig.appBar.textColor"
             :ariaLabel="$tr('openNav')"
             @click="$emit('toggleSideNav')"
           />
@@ -52,7 +55,7 @@
           <slot name="sub-nav">
             <Navbar
               v-if="links.length > 0"
-              :textColor="$themeConfig.appBar.textColor"
+              :textColor="themeConfig.appBar.textColor"
               :navigationLinks="links"
             />
           </slot>
@@ -98,7 +101,7 @@
               <KIcon
                 icon="person"
                 :style="{
-                  fill: $themeConfig.appBar.textColor,
+                  fill: themeConfig.appBar.textColor,
                   height: '24px',
                   width: '24px',
                   margin: '4px',

diff --git a/kolibri/core/assets/src/views/SideNav.vue b/kolibri/core/assets/src/views/SideNav.vue
@@ -196,7 +196,8 @@
               height: topBarHeight + 'px',
               width: `${width}`,
               paddingTop: windowIsSmall ? '4px' : '8px',
-              backgroundColor: $themeConfig.appBar.background,
+              backgroundColor: themeConfig.appBar.background,
+              color: themeConfig.appBar.textColor,
             }"
           >
             <KIconButton