Replace obsolete grey scales

In the new theme, palette.grey.v_300/500/700/900 are not available anymore. This updates all places using removed scales by replacing them with closest darker grey scales that are available.
learningequality · Feb 21, 2024 · 4648dc6 · 4648dc6
1 parent 0098f7e
commit 4648dc6
Show file tree

Hide file tree

Showing 22 changed files with 28 additions and 28 deletions.
diff --git a/kolibri/plugins/coach/assets/src/views/common/HeaderTabs/HeaderTab.vue b/kolibri/plugins/coach/assets/src/views/common/HeaderTabs/HeaderTab.vue
@@ -39,7 +39,7 @@
         return this.$computedClass({
           ':focus': this.$coreOutline,
           ':hover': {
-            backgroundColor: this.$themePalette.grey.v_300,
+            backgroundColor: this.$themePalette.grey.v_400,
           },
         });
       },

diff --git a/kolibri/plugins/coach/assets/src/views/common/status/ProgressSummaryBar.vue b/kolibri/plugins/coach/assets/src/views/common/status/ProgressSummaryBar.vue
@@ -2,7 +2,7 @@
 
   <div
     class="bar-wrapper"
-    :style="{ backgroundColor: $themePalette.grey.v_300 }"
+    :style="{ backgroundColor: $themePalette.grey.v_400 }"
   >
     <div class="bar help" :style="helpLineStyle"></div>
     <div class="bar" :style="barStyleStarted"></div>

diff --git a/kolibri/plugins/coach/assets/src/views/common/status/StatusTestPage.vue b/kolibri/plugins/coach/assets/src/views/common/status/StatusTestPage.vue
@@ -214,7 +214,7 @@
         return { border: `1px solid ${this.$themeTokens.fineLine}` };
       },
       thickBorderStyle() {
-        return { border: `2px solid ${this.$themePalette.grey.v_500}` };
+        return { border: `2px solid ${this.$themePalette.grey.v_600}` };
       },
     },
     mounted() {

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AssessmentQuestionListItem.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/AssessmentQuestionListItem.vue
@@ -109,7 +109,7 @@
         return this.$computedClass({ ':focus': this.$coreOutline });
       },
       bgStyle() {
-        const color = this.isSelected ? this.$themePalette.grey.v_300 : this.$themeTokens.surface;
+        const color = this.isSelected ? this.$themePalette.grey.v_400 : this.$themeTokens.surface;
         return { backgroundColor: color };
       },
     },

diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonContentPreviewPage/QuestionList.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonContentPreviewPage/QuestionList.vue
@@ -52,7 +52,7 @@
     methods: {
       buttonStyle(index) {
         return {
-          backgroundColor: index === this.selectedIndex ? this.$themePalette.grey.v_300 : '',
+          backgroundColor: index === this.selectedIndex ? this.$themePalette.grey.v_400 : '',
         };
       },
     },

diff --git a/kolibri/plugins/device/assets/src/views/AvailableChannelsPage/index.vue b/kolibri/plugins/device/assets/src/views/AvailableChannelsPage/index.vue
@@ -45,7 +45,7 @@
           <div
             v-if="$route.query.token"
             class="token-chip"
-            :style="{ backgroundColor: $themePalette.grey.v_300 }"
+            :style="{ backgroundColor: $themePalette.grey.v_400 }"
           >
             <span>
               <p class="token-chip-text">{{ $route.query.token }}</p>

diff --git a/kolibri/plugins/learn/assets/src/views/AlsoInThis.vue b/kolibri/plugins/learn/assets/src/views/AlsoInThis.vue
@@ -176,7 +176,7 @@
       },
       currentlyViewingTextStyle() {
         return {
-          color: this.$themePalette.grey.v_700,
+          color: this.$themePalette.grey.v_800,
           fontSize: '12px',
           margin: 'auto',
         };

diff --git a/kolibri/plugins/learn/assets/src/views/CardList.vue b/kolibri/plugins/learn/assets/src/views/CardList.vue
@@ -24,7 +24,7 @@
 
           <KFixedGridItem :span="isMobile ? 4 : 3" class="text-area">
             <span :style="{ color: $themeTokens.text }">
-              <div class="metadata-info" :style="{ color: $themePalette.grey.v_700 }">
+              <div class="metadata-info" :style="{ color: $themePalette.grey.v_800 }">
                 <LearningActivityLabel
                   :contentNode="contentNode"
                   :hideDuration="true"
@@ -47,25 +47,25 @@
                   :contentNode="contentNode"
                   :class="categoryAndLevelString ? 'duration prepends' : 'duration'"
                   condensed
-                  :style="{ color: $themePalette.grey.v_700, marginTop: 0 }"
+                  :style="{ color: $themePalette.grey.v_800, marginTop: 0 }"
                 />
                 <p
                   v-if="categoryAndLevelString"
                   class="metadata-info"
-                  :style="{ color: $themePalette.grey.v_700, marginTop: 0 }"
+                  :style="{ color: $themePalette.grey.v_800, marginTop: 0 }"
                 >{{ categoryAndLevelString }}</p>
                 <div>
                   <img
                     v-if="channelThumbnail"
                     :src="channelThumbnail"
                     :alt="learnString('logo', { channelTitle: channelTitle })"
                     class="channel-logo"
-                    :style="{ color: $themePalette.grey.v_700 }"
+                    :style="{ color: $themePalette.grey.v_800 }"
                   >
                   <p
                     v-else
                     class="metadata-info"
-                    :style="{ color: $themePalette.grey.v_700, marginTop: 0 }"
+                    :style="{ color: $themePalette.grey.v_800, marginTop: 0 }"
                   >{{ learnString('logo', { channelTitle: channelTitle }) }}</p>
                   <KButton
                     v-if="contentNode.copies"
@@ -81,7 +81,7 @@
             <p
               v-if="createdDate"
               class="created-info"
-              :style="{ color: $themePalette.grey.v_700 }"
+              :style="{ color: $themePalette.grey.v_800 }"
             >
               {{ bookmarkCreated }}
             </p>

diff --git a/kolibri/plugins/learn/assets/src/views/CompletionModal/CompletionModalSection.vue b/kolibri/plugins/learn/assets/src/views/CompletionModal/CompletionModalSection.vue
@@ -142,7 +142,7 @@
       sectionStyle() {
         return {
           ':not(:last-child)': {
-            borderBottom: `1px solid ${this.$themePalette.grey.v_300}`,
+            borderBottom: `1px solid ${this.$themePalette.grey.v_400}`,
           },
         };
       },

diff --git a/kolibri/plugins/learn/assets/src/views/CompletionModal/ResourceItem/ResourceLabel.vue b/kolibri/plugins/learn/assets/src/views/CompletionModal/ResourceItem/ResourceLabel.vue
@@ -16,7 +16,7 @@
         v-else
         class="icon"
         icon="topic"
-        :color="$themePalette.grey.v_500"
+        :color="$themePalette.grey.v_600"
       />
     </template>
 
@@ -33,7 +33,7 @@
         v-if="contentNode.duration"
         class="duration"
         :seconds="contentNode.duration"
-        :style="{ color: $themePalette.grey.v_700 }"
+        :style="{ color: $themePalette.grey.v_800 }"
       />
     </span>
   </span>

diff --git a/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue b/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue
@@ -297,7 +297,7 @@
       sectionClass() {
         return this.$computedClass({
           ':not(:last-child)': {
-            borderBottom: `1px solid ${this.$themePalette.grey.v_300}`,
+            borderBottom: `1px solid ${this.$themePalette.grey.v_400}`,
           },
         });
       },

diff --git a/kolibri/plugins/learn/assets/src/views/ProgressBar.vue b/kolibri/plugins/learn/assets/src/views/ProgressBar.vue
@@ -8,7 +8,7 @@
     :aria-valuemax="100"
     :aria-valuenow="progress * 100"
   >
-    <p v-if="completed" class="completion-label" :style="{ color: $themePalette.grey.v_700 }">
+    <p v-if="completed" class="completion-label" :style="{ color: $themePalette.grey.v_800 }">
       <ProgressIcon :progress="progress" class="completion-icon" />
       {{ coreString('completedLabel') }}
     </p>

diff --git a/kolibri/plugins/learn/assets/src/views/SearchBox.vue b/kolibri/plugins/learn/assets/src/views/SearchBox.vue
@@ -9,7 +9,7 @@
       class="search-box-row"
       :style="{
         backgroundColor: $themeTokens.surface,
-        borderColor: $themePalette.grey.v_300,
+        borderColor: $themePalette.grey.v_400,
         fontSize: '16px',
       }"
     >

diff --git a/kolibri/plugins/learn/assets/src/views/SearchChips.vue b/kolibri/plugins/learn/assets/src/views/SearchChips.vue
@@ -5,7 +5,7 @@
       v-for="item in items"
       :key="item.key + item.value"
       class="filter-chip"
-      :style="{ backgroundColor: $themePalette.grey.v_300 }"
+      :style="{ backgroundColor: $themePalette.grey.v_400 }"
     >
       <span>
         <p class="filter-chip-text">{{ item.text }}</p>

diff --git a/kolibri/plugins/learn/assets/src/views/SidePanelModal/index.vue b/kolibri/plugins/learn/assets/src/views/SidePanelModal/index.vue
@@ -145,7 +145,7 @@
           position: 'fixed',
           top: 0,
           backgroundColor: this.$themeTokens.surface,
-          'border-bottom': `1px solid ${this.$themePalette.grey.v_500}`,
+          'border-bottom': `1px solid ${this.$themePalette.grey.v_600}`,
           padding: '24px 32px',
           // Header border stays over content with this, but under any tooltips
           'z-index': 16,

diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/ToggleHeaderTabs.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/ToggleHeaderTabs.vue
@@ -86,7 +86,7 @@
         return this.$computedClass({
           ':focus': this.$coreOutline,
           ':hover': {
-            backgroundColor: this.$themePalette.grey.v_300,
+            backgroundColor: this.$themePalette.grey.v_400,
           },
         });
       },

diff --git a/kolibri/plugins/learn/assets/src/views/thumbnails/ContentNodeThumbnail.vue b/kolibri/plugins/learn/assets/src/views/thumbnails/ContentNodeThumbnail.vue
@@ -12,7 +12,7 @@
       <KIcon
         v-else
         icon="topic"
-        :color="$themePalette.grey.v_500"
+        :color="$themePalette.grey.v_600"
       />
     </template>
 

diff --git a/kolibri/plugins/learn/assets/src/views/thumbnails/QuizThumbnail.vue b/kolibri/plugins/learn/assets/src/views/thumbnails/QuizThumbnail.vue
@@ -4,7 +4,7 @@
     <template #icon>
       <KIcon
         icon="exercise"
-        :color="$themePalette.grey.v_500"
+        :color="$themePalette.grey.v_600"
       />
     </template>
   </Thumbnail>

diff --git a/kolibri/plugins/media_player/assets/src/views/MediaPlayerTranscript/TranscriptCue.vue b/kolibri/plugins/media_player/assets/src/views/MediaPlayerTranscript/TranscriptCue.vue
@@ -71,7 +71,7 @@
       style() {
         const activeStyles = this.active
           ? {
-              backgroundColor: this.$themePalette.grey.v_300,
+              backgroundColor: this.$themePalette.grey.v_400,
               borderLeftColor: this.$themeTokens.video,
             }
           : {};

diff --git a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/SelectFacility.vue b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/SelectFacility.vue
@@ -33,7 +33,7 @@
       :style="{
         marginTop: '34px',
         paddingTop: '10px',
-        borderTop: `1px solid ${$themePalette.grey.v_300}`
+        borderTop: `1px solid ${$themePalette.grey.v_400}`
       }"
     >
 

diff --git a/kolibri/plugins/user_profile/assets/src/views/ProfilePage/index.vue b/kolibri/plugins/user_profile/assets/src/views/ProfilePage/index.vue
@@ -124,7 +124,7 @@
           v-if="onMyOwnSetup"
           :style="{ marginTop: '34px',
                     paddingTop: '10px',
-                    borderTop: `1px solid ${$themePalette.grey.v_300}` }"
+                    borderTop: `1px solid ${$themePalette.grey.v_400}` }"
         >
           <KGridItem
             :layout8="{ span: 4 }"

diff --git a/packages/kolibri-common/components/AppError/TechnicalTextBlock.vue b/packages/kolibri-common/components/AppError/TechnicalTextBlock.vue
@@ -10,7 +10,7 @@
       aria-hidden="true"
       :style="[dynamicHeightStyle, {
         backgroundColor: $themePalette.grey.v_200,
-        border: $themePalette.grey.v_300,
+        border: $themePalette.grey.v_400,
       }]"
     >
     </textarea>