Audit and fix theme token updates against KDS

kolibri/core/assets/src/core-app/apiSpec.js

@@ -17,7 +17,7 @@ import vuex from 'vuex';
 import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';
 import responsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
 import responsiveElementMixin from 'kolibri-design-system/lib/KResponsiveElementMixin';
-import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
+import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
 import useKShow from 'kolibri-design-system/lib/composables/useKShow';
 import UiIconButton from 'kolibri-design-system/lib/keen/UiIconButton'; // temp hack
 import * as vueCompositionApi from '@vue/composition-api';

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

@@ -12,7 +12,7 @@
         :title="title"
         :removeNavIcon="isAppContext && isTouchDevice"
         type="clear"
-        textColor="white"
+        textColor="black"
         class="app-bar"
         :style="{ height: topBarHeight + 'px' }"
         :raised="false"
@@ -24,7 +24,7 @@
         >
           <KIconButton
             icon="menu"
-            :color="$themeTokens.textInverted"
+            :color="$themeTokens.text"
             :ariaLabel="$tr('openNav')"
             @click="$emit('toggleSideNav')"
           />
@@ -83,7 +83,7 @@
               <KIcon
                 icon="person"
                 :style="{
-                  fill: $themeTokens.textInverted,
+                  fill: $themeTokens.text,
                   height: '24px',
                   width: '24px',
                   margin: '4px',

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

@@ -60,7 +60,7 @@
       v-if="attemptLog.missing_resource"
       class="coach-content-label"
       icon="warning"
-      :color="$themePalette.orange.v_400"
+      :color="$themePalette.yellow.v_1100"
     />
   </span>
 

kolibri/core/assets/src/views/CoreMenu/CoreMenuOption.vue

@@ -139,17 +139,17 @@
             color: this.$themeTokens.primaryDark,
             fontWeight: 'bold',
             margin: '8px',
-            backgroundColor: this.$themeBrand.primary.v_50,
+            backgroundColor: this.$themePalette.grey.v_100,
             ':hover': {
-              backgroundColor: this.$themeBrand.primary.v_100,
+              backgroundColor: this.$themePalette.grey.v_200,
             },
             ':focus': this.$coreOutline,
           };
         }
         return {
           color: this.$themeTokens.text,
           ':hover': {
-            backgroundColor: this.$themeBrand.primary.v_50,
+            backgroundColor: this.$themePalette.grey.v_100,
           },
           ':focus': this.$coreOutline,
         };

kolibri/core/assets/src/views/CorePage/AppBarPage.vue

@@ -122,7 +122,7 @@
               width: '100%',
               maxWidth: '1064px',
               margin: 'auto',
-              backgroundColor: this.$themePalette.grey.v_100,
+              backgroundColor: this.$themePalette.grey.v_50,
               paddingLeft: this.paddingLeftRight,
               paddingRight: this.paddingLeftRight,
               paddingTop: this.appBarHeight + this.paddingTop + 'px',

kolibri/core/assets/src/views/CorePage/ImmersivePage.vue

@@ -80,7 +80,7 @@
           : {
               width: '100%',
               display: 'inline-block',
-              backgroundColor: this.$themePalette.grey.v_100,
+              backgroundColor: this.$themePalette.grey.v_50,
               paddingLeft: '32px',
               paddingRight: '32px',
               paddingBottom: '72px',

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

@@ -146,7 +146,12 @@
   }
 
   .k-filter-input {
-    width: calc(100% - 80px);
+    // removes the Chrome clear button
+    &::-webkit-search-cancel-button {
+      appearance: none;
+    }
+
+    width: 100%;
     height: 40px;
     padding-top: 0;
     padding-right: 40px;

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

@@ -89,7 +89,7 @@
         return this.navigationLinks.filter(l => !l.isHidden);
       },
       color() {
-        return this.$themeTokens.textInverted;
+        return this.$themeTokens.text;
       },
       overflowMenuLinks() {
         if (!this.mounted || isUndefined(this.windowWidth)) {

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

@@ -3,12 +3,12 @@
   <header>
     <UiToolbar
       :title="appBarTitle"
-      textColor="white"
+      :textColor="isFullscreen ? 'black' : 'white'"
       type="clear"
       :showIcon="showIcon"
       :style="{
         height: topBarHeight + 'px',
-        backgroundColor: isFullscreen ? $themeTokens.appBar : $themeTokens.appBarFullscreen,
+        backgroundColor: isFullscreen ? $themeTokens.appBar : $themePalette.black,
       }"
       @nav-icon-click="$emit('navIconClick')"
     >
@@ -24,14 +24,14 @@
             v-if="icon === 'close'"
             :ariaLabel="coreString('closeAction')"
             icon="close"
-            :color="$themeTokens.textInverted"
+            :color="isFullscreen ? $themeTokens.text : $themeTokens.textInverted"
             tabindex="-1"
           />
           <KIconButton
             v-else
             icon="back"
             :ariaLabel="coreString('goBackAction')"
-            :color="$themeTokens.textInverted"
+            :color="isFullscreen ? $themeTokens.text : $themeTokens.textInverted"
           />
         </router-link>
 
@@ -40,15 +40,15 @@
             v-if="icon === 'close'"
             :ariaLabel="coreString('closeAction')"
             icon="close"
-            :color="$themeTokens.textInverted"
+            :color="isFullscreen ? $themeTokens.text : $themeTokens.textInverted"
             tabindex="-1"
             @click="$emit('navIconClick')"
           />
           <KIconButton
             v-else
             icon="back"
             :ariaLabel="coreString('goBackAction')"
-            :color="$themeTokens.textInverted"
+            :color="isFullscreen ? $themeTokens.text : $themeTokens.textInverted"
             @click="$emit('navIconClick')"
           />
         </span>
@@ -109,11 +109,9 @@
       },
       linkStyle() {
         const hoverBg = this.isFullscreen
-          ? this.$themeTokens.appBarDark
-          : this.$themeTokens.appBarFullscreenDark;
-        const defaultBg = this.isFullscreen
-          ? this.$themeTokens.appBar
-          : this.$themeTokens.appBarFullscreen;
+          ? this.$themeBrand.secondary.v_1100
+          : this.$themePalette.grey.v_600;
+        const defaultBg = this.isFullscreen ? this.$themeTokens.appBar : this.$themePalette.black;
         return {
           backgroundColor: defaultBg,
           ':hover': {