updates themetoken values in all files

learningequality · Oct 25, 2024 · c274de2 · c274de2
1 parent a1de0c8
commit c274de2
Show file tree

Hide file tree

Showing 55 changed files with 68 additions and 68 deletions.
diff --git a/kolibri/core/assets/src/views/AttemptLogList.vue b/kolibri/core/assets/src/views/AttemptLogList.vue
@@ -73,7 +73,7 @@
             v-if="title"
             class="accordion-header"
             :style="{
-              backgroundColor: index === currentSectionIndex ? $themePalette.grey.v_100 : '',
+              backgroundColor: index === currentSectionIndex ? $themePalette.grey.v_200 : '',
             }"
           >
             <KButton
@@ -114,7 +114,7 @@
                 class="attempt-item"
                 :style="{
                   backgroundColor: isSelected(section.startQuestionNumber + qIndex)
-                    ? $themePalette.grey.v_100
+                    ? $themePalette.grey.v_200
                     : '',
                 }"
               >

diff --git a/kolibri/core/assets/src/views/CoreMenu/CoreMenuOption.vue b/kolibri/core/assets/src/views/CoreMenu/CoreMenuOption.vue
@@ -162,17 +162,17 @@
             color: this.$themeTokens.primaryDark,
             fontWeight: 'bold',
             margin: '8px',
-            backgroundColor: this.$themePalette.grey.v_100,
+            backgroundColor: this.$themePalette.grey.v_200,
             ':hover': {
-              backgroundColor: this.$themePalette.grey.v_200,
+              backgroundColor: this.$themePalette.grey.v_300,
             },
             ':focus': this.$coreOutline,
           };
         }
         return {
           color: this.$themeTokens.text,
           ':hover': {
-            backgroundColor: this.$themePalette.grey.v_100,
+            backgroundColor: this.$themePalette.grey.v_200,
           },
           ':focus': this.$coreOutline,
         };

diff --git a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
@@ -124,7 +124,7 @@
             width: '100%',
             maxWidth: '1064px',
             margin: 'auto',
-            backgroundColor: this.$themePalette.grey.v_50,
+            backgroundColor: this.$themePalette.grey.v_100,
             paddingLeft: this.paddingLeftRight,
             paddingRight: this.paddingLeftRight,
             paddingTop: this.appBarHeight + this.paddingTop + 'px',

diff --git a/kolibri/core/assets/src/views/CorePage/ImmersivePage.vue b/kolibri/core/assets/src/views/CorePage/ImmersivePage.vue
@@ -84,7 +84,7 @@
           : {
             width: '100%',
             display: 'inline-block',
-            backgroundColor: this.$themePalette.grey.v_50,
+            backgroundColor: this.$themePalette.grey.v_100,
             paddingLeft: '32px',
             paddingRight: '32px',
             paddingBottom: '72px',

diff --git a/kolibri/core/assets/src/views/CoreTable.vue b/kolibri/core/assets/src/views/CoreTable.vue
@@ -37,7 +37,7 @@
         const selectable = {
           cursor: 'pointer',
           ':hover': {
-            backgroundColor: this.$themePalette.grey.v_100,
+            backgroundColor: this.$themePalette.grey.v_200,
           },
         };
         return Object.assign(

diff --git a/kolibri/core/assets/src/views/ExamReport/index.vue b/kolibri/core/assets/src/views/ExamReport/index.vue
@@ -71,7 +71,7 @@
         :value="pastTriesOptions[tryIndex]"
         :label="$tr('attemptDropdownLabel')"
         :options="pastTriesOptions"
-        :style="{ background: $themePalette.grey.v_100 }"
+        :style="{ background: $themePalette.grey.v_200 }"
         appearance="flat-button"
         class="try-selection"
         @change="navigateToTry"

diff --git a/kolibri/core/assets/src/views/ImmersiveToolbar.vue b/kolibri/core/assets/src/views/ImmersiveToolbar.vue
@@ -115,8 +115,8 @@
       },
       linkStyle() {
         const hoverBg = this.isFullscreen
-          ? this.$themeBrand.secondary.v_600
-          : this.$themePalette.grey.v_600;
+          ? this.$themeBrand.secondary.v_300
+          : this.$themePalette.grey.v_700;
         const defaultBg = this.isFullscreen ? this.$themeTokens.appBar : this.$themePalette.black;
         return {
           backgroundColor: defaultBg,

diff --git a/kolibri/core/assets/src/views/Navbar/NavbarLink.vue b/kolibri/core/assets/src/views/Navbar/NavbarLink.vue
@@ -63,7 +63,7 @@
         return {
           color: this.$themeTokens.text,
           ':hover': {
-            'background-color': this.$themeBrand.secondary.v_600,
+            'background-color': this.$themeBrand.secondary.v_300,
           },
           ':focus': {
             ...this.$coreOutline,

diff --git a/kolibri/core/package.json b/kolibri/core/package.json
@@ -21,7 +21,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.6",
-    "kolibri-design-system": "4.4.6",
+    "kolibri-design-system": "4.6.0",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.1",

diff --git a/kolibri/plugins/coach/assets/src/views/StorageNotificationBanner.vue b/kolibri/plugins/coach/assets/src/views/StorageNotificationBanner.vue
@@ -2,7 +2,7 @@
 
   <div
     class="alert"
-    :style="{ backgroundColor: $themePalette.red.v_200, display: displayBanner }"
+    :style="{ backgroundColor: $themePalette.red.v_100, display: displayBanner }"
   >
     <h1 style="display: none">
       {{ $tr('insufficientStorageHeader') }}

diff --git a/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue b/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue
@@ -341,10 +341,10 @@
       cancelStyleOverrides() {
         return {
           color: this.$themeTokens.textInverted,
-          'background-color': this.$themePalette.red.v_600,
+          'background-color': this.$themePalette.red.v_300,
           // We need to use a darker color for hover than
-          // palette.red.v_600 but at the same time,
-          // palette.red.v_600 is the darkest available red
+          // palette.red.v_300 but at the same time,
+          // palette.red.v_300 is the darkest available red
           // in the palette. Using this hardcoded color was
           // agreed with designers.
           ':hover': { 'background-color': '#A81700' },

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_200 }"
+    :style="{ backgroundColor: $themePalette.grey.v_300 }"
   >
     <div
       class="bar help"

diff --git a/kolibri/plugins/coach/assets/src/views/common/status/StatusTestPage.vue b/kolibri/plugins/coach/assets/src/views/common/status/StatusTestPage.vue
@@ -19,7 +19,7 @@
     </div>
 
     <table>
-      <tr :style="{ color: $themePalette.grey.v_600 }">
+      <tr :style="{ color: $themePalette.grey.v_700 }">
         <th>scenario</th>
         <th>example tally</th>
         <th>status bar</th>
@@ -243,7 +243,7 @@
         return { border: `1px solid ${this.$themeTokens.fineLine}` };
       },
       thickBorderStyle() {
-        return { border: `2px solid ${this.$themePalette.grey.v_600}` };
+        return { border: `2px solid ${this.$themePalette.grey.v_700}` };
       },
     },
     mounted() {

diff --git a/kolibri/plugins/coach/assets/src/views/home/HomePage/ItemProgressDisplay.vue b/kolibri/plugins/coach/assets/src/views/home/HomePage/ItemProgressDisplay.vue
@@ -80,7 +80,7 @@
       themeClass() {
         return this.$computedClass({
           ':hover': {
-            backgroundColor: this.$themePalette.grey.v_100,
+            backgroundColor: this.$themePalette.grey.v_200,
             // Add equal and opposite margin and padding to give the highlighted
             // region more space without increasing the size of the parent div.
             margin: '-8px',

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -106,7 +106,7 @@
         <!-- TODO This question mark thing should probably be an SVG for improved a11y -->
         <div
           class="question-mark-layout"
-          :style="{ backgroundColor: $themeBrand.secondary.v_200 }"
+          :style="{ backgroundColor: $themeBrand.secondary.v_100 }"
         >
           <span
             class="help-icon-style"

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/QuestionListPreview.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/QuestionListPreview.vue
@@ -82,7 +82,7 @@
             <div
               v-show="isExpanded(index)"
               :style="{
-                backgroundColor: $themePalette.grey.v_100,
+                backgroundColor: $themePalette.grey.v_200,
               }"
             >
               <ul class="question-list">

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -110,7 +110,7 @@
           padding: '1em',
           marginTop: '2em',
           marginBottom: '2em',
-          backgroundColor: $themePalette.grey.v_100,
+          backgroundColor: $themePalette.grey.v_200,
           position: 'sticky',
           insetBlockStart: '0',
           zIndex: '4',

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionOrder.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionOrder.vue
@@ -239,7 +239,7 @@
       },
       activeSectionStyles() {
         return {
-          backgroundColor: this.$themePalette.grey.v_50,
+          backgroundColor: this.$themePalette.grey.v_100,
           border: `1px solid ${this.$themeTokens.fineLine}`,
         };
       },

diff --git a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue
@@ -496,7 +496,7 @@
       ...mapGetters('deviceInfo', ['isRemoteContent']),
       InfoDescriptionColor() {
         return {
-          color: this.$themePalette.grey.v_600,
+          color: this.$themePalette.grey.v_700,
         };
       },
       pageTitle() {

diff --git a/kolibri/plugins/device/assets/src/views/FacilitiesPage/FacilitiesTasksPage.vue b/kolibri/plugins/device/assets/src/views/FacilitiesPage/FacilitiesTasksPage.vue
@@ -23,7 +23,7 @@
           v-for="(task, idx) in activeFacilityTasks"
           :key="idx"
           class="task-panel"
-          :style="{ borderBottomColor: $themePalette.grey.v_200 }"
+          :style="{ borderBottomColor: $themePalette.grey.v_300 }"
           :task="task"
           @cancel="cancel(task)"
           @clear="clear(task)"

diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/ChannelDetails.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/ChannelDetails.vue
@@ -15,7 +15,7 @@
         v-else
         icon="channel"
         class="thumbnail-svg"
-        :style="{ backgroundColor: $themePalette.grey.v_200 }"
+        :style="{ backgroundColor: $themePalette.grey.v_300 }"
       />
     </div>
 

diff --git a/kolibri/plugins/device/assets/src/views/ManageTasksPage/index.vue b/kolibri/plugins/device/assets/src/views/ManageTasksPage/index.vue
@@ -49,7 +49,7 @@
           :task="task"
           class="task-panel"
           :appBarTitle="$tr('appBarTitle')"
-          :style="{ borderBottomColor: $themePalette.grey.v_200 }"
+          :style="{ borderBottomColor: $themePalette.grey.v_300 }"
           @clickclear="handleClickClear(task)"
           @clickcancel="handleClickCancel(task)"
           @update-title="updateAppBarTitle"

diff --git a/kolibri/plugins/device/assets/src/views/RearrangeChannelsPage.vue b/kolibri/plugins/device/assets/src/views/RearrangeChannelsPage.vue
@@ -101,7 +101,7 @@
       itemClass() {
         return {
           ':hover': {
-            backgroundColor: this.$themePalette.grey.v_200,
+            backgroundColor: this.$themePalette.grey.v_300,
           },
         };
       },

diff --git a/kolibri/plugins/epub_viewer/assets/src/views/BottomBar.vue b/kolibri/plugins/epub_viewer/assets/src/views/BottomBar.vue
@@ -2,7 +2,7 @@
 
   <div
     class="bottom-bar"
-    :style="{ backgroundColor: $themePalette.grey.v_200 }"
+    :style="{ backgroundColor: $themePalette.grey.v_300 }"
   >
     <div class="bottom-bar-heading">
       <h3 v-if="heading">

diff --git a/kolibri/plugins/epub_viewer/assets/src/views/SideBar.vue b/kolibri/plugins/epub_viewer/assets/src/views/SideBar.vue
@@ -2,7 +2,7 @@
 
   <div
     class="side-bar"
-    :style="{ backgroundColor: $themePalette.grey.v_100 }"
+    :style="{ backgroundColor: $themePalette.grey.v_200 }"
   >
     <slot></slot>
   </div>

diff --git a/kolibri/plugins/epub_viewer/assets/src/views/TopBar.vue b/kolibri/plugins/epub_viewer/assets/src/views/TopBar.vue
@@ -2,7 +2,7 @@
 
   <div
     class="top-bar"
-    :style="{ backgroundColor: $themePalette.grey.v_200 }"
+    :style="{ backgroundColor: $themePalette.grey.v_300 }"
   >
     <KGrid :style="{ marginTop: '2px', marginLeft: '3px', marginRight: '3px' }">
       <KGridItem

diff --git a/kolibri/plugins/html5_viewer/assets/src/views/Html5AppRendererIndex.vue b/kolibri/plugins/html5_viewer/assets/src/views/Html5AppRendererIndex.vue
@@ -8,7 +8,7 @@
   >
     <div
       class="fullscreen-header"
-      :style="{ backgroundColor: $themePalette.grey.v_100 }"
+      :style="{ backgroundColor: $themePalette.grey.v_200 }"
     >
       <KButton
         :primary="false"
@@ -36,7 +36,7 @@
         ref="iframe"
         class="iframe"
         sandbox="allow-scripts allow-same-origin"
-        :style="{ backgroundColor: $themePalette.grey.v_100 }"
+        :style="{ backgroundColor: $themePalette.grey.v_200 }"
         frameBorder="0"
         :src="rooturl"
         allow="fullscreen"

diff --git a/kolibri/plugins/learn/assets/src/views/AlsoInThis.vue b/kolibri/plugins/learn/assets/src/views/AlsoInThis.vue
@@ -199,7 +199,7 @@
           padding: '15px 0',
           ':before': {
             content: "''",
-            backgroundColor: this.$themePalette.grey.v_100,
+            backgroundColor: this.$themePalette.grey.v_200,
             position: 'absolute',
             top: '0',
             bottom: '0',

diff --git a/kolibri/plugins/learn/assets/src/views/AssessmentWrapper/index.vue b/kolibri/plugins/learn/assets/src/views/AssessmentWrapper/index.vue
@@ -56,7 +56,7 @@ oriented data synchronization.
       </UiAlert>
       <div
         class="content-wrapper"
-        :style="{ backgroundColor: $themePalette.grey.v_50 }"
+        :style="{ backgroundColor: $themePalette.grey.v_100 }"
       >
         <ContentRenderer
           ref="contentRenderer"
@@ -92,7 +92,7 @@ oriented data synchronization.
         >
           <KIcon
             icon="mastered"
-            :color="success ? $themeTokens.mastered : $themePalette.grey.v_200"
+            :color="success ? $themeTokens.mastered : $themePalette.grey.v_300"
           />
           <div class="overall-status-text">
             <span

diff --git a/kolibri/plugins/learn/assets/src/views/BrowseResourceMetadata.vue b/kolibri/plugins/learn/assets/src/views/BrowseResourceMetadata.vue
@@ -332,7 +332,7 @@
       },
       chipStyle() {
         return {
-          backgroundColor: this.$themeBrand.primary.v_800,
+          backgroundColor: this.$themeBrand.primary.v_400,
           color: this.$themeTokens.textInverted,
           '::selection': {
             color: this.$themeTokens.text,

diff --git a/kolibri/plugins/learn/assets/src/views/ChannelRenderer/CustomContentRenderer.vue b/kolibri/plugins/learn/assets/src/views/ChannelRenderer/CustomContentRenderer.vue
@@ -5,7 +5,7 @@
       ref="iframe"
       class="iframe"
       sandbox="allow-scripts allow-same-origin"
-      :style="{ backgroundColor: $themePalette.grey.v_100 }"
+      :style="{ backgroundColor: $themePalette.grey.v_200 }"
       frameBorder="0"
       :src="rooturl"
     >

diff --git a/kolibri/plugins/learn/assets/src/views/CompletionModal/ResourceItem/ResourceLabel.vue b/kolibri/plugins/learn/assets/src/views/CompletionModal/ResourceItem/ResourceLabel.vue
@@ -11,7 +11,7 @@
         v-else
         class="icon"
         icon="topic"
-        :color="$themePalette.grey.v_600"
+        :color="$themePalette.grey.v_700"
       />
     </template>
 

diff --git a/kolibri/plugins/learn/assets/src/views/CurrentlyViewedResourceMetadata.vue b/kolibri/plugins/learn/assets/src/views/CurrentlyViewedResourceMetadata.vue
@@ -204,7 +204,7 @@
       },
       chipStyle() {
         return {
-          backgroundColor: this.$themeBrand.primary.v_800,
+          backgroundColor: this.$themeBrand.primary.v400,
           color: this.$themeTokens.textInverted,
           '::selection': {
             color: this.$themeTokens.text,

diff --git a/kolibri/plugins/learn/assets/src/views/ExamPage/AnswerHistory.vue b/kolibri/plugins/learn/assets/src/views/ExamPage/AnswerHistory.vue
@@ -49,7 +49,7 @@
           v-if="isExpanded(index)"
           class="spacing-items"
           :style="{
-            backgroundColor: $themePalette.grey.v_100,
+            backgroundColor: $themePalette.grey.v_200,
           }"
         >
           <span
@@ -260,7 +260,7 @@
         return this.$computedClass({
           backgroundColor: this.$themeTokens.surface,
           ':hover': {
-            backgroundColor: this.$themePalette.grey.v_100,
+            backgroundColor: this.$themePalette.grey.v_200,
           },
         });
       },

diff --git a/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/HybridLearningFooter.vue b/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/HybridLearningFooter.vue
@@ -11,7 +11,7 @@
         v-if="downloadableByLearner"
         icon="download"
         size="mini"
-        :color="$themePalette.grey.v_600"
+        :color="$themePalette.grey.v_700"
         :ariaLabel="coreString('downloadAction')"
         :tooltip="coreString('downloadAction')"
         @click="handleDownloadRequest"
@@ -20,7 +20,7 @@
         v-if="bookmarked"
         icon="close"
         size="mini"
-        :color="$themePalette.grey.v_600"
+        :color="$themePalette.grey.v_700"
         :ariaLabel="coreString('removeFromBookmarks')"
         :tooltip="coreString('removeFromBookmarks')"
         @click="$emit('removeFromBookmarks')"
@@ -36,7 +36,7 @@
         v-if="contentNode.is_leaf"
         icon="infoOutline"
         size="mini"
-        :color="$themePalette.grey.v_600"
+        :color="$themePalette.grey.v_700"
         :ariaLabel="coreString('viewInformation')"
         :tooltip="coreString('viewInformation')"
         @click="$emit('toggleInfoPanel')"