From ce82a4cd2d59481541f7b784b16f01a1f5d1d3f0 Mon Sep 17 00:00:00 2001
From: MisRob <robosovam@gmail.com>
Date: Mon, 22 Jan 2024 09:37:09 +0100
Subject: [PATCH 01/18] Upgrade Studio to KDS 3.0.0 (2/3)

Fixes "Error: Can't resolve 'kolibri-design-system/lib/utils/i18n'"
caused by removal of this file in KDS v2.0.0 by copying the removed
file content directly to Studio.
---
 .../frontend/shared/i18n/index.js             | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/i18n/index.js b/contentcuration/contentcuration/frontend/shared/i18n/index.js
index 249b5ac561..13bcd01fd1 100644
--- a/contentcuration/contentcuration/frontend/shared/i18n/index.js
+++ b/contentcuration/contentcuration/frontend/shared/i18n/index.js
@@ -1,15 +1,25 @@
 import Vue from 'vue';
 import has from 'lodash/has';
-import { languageDirections, defaultLanguage } from 'kolibri-design-system/lib/utils/i18n';
 import importVueIntlLocaleData from './vue-intl-locale-data';
 import importIntlLocale from './intl-locale-data';
 
-export {
-  languageDirections,
-  defaultLanguage,
-  languageValidator,
-  getContentLangDir,
-} from 'kolibri-design-system/lib/utils/i18n';
+const languageDirections = {
+  LTR: 'ltr',
+  RTL: 'rtl',
+};
+const defaultLanguage = {
+  id: 'en',
+  lang_name: 'English',
+  lang_direction: languageDirections.LTR,
+};
+const languageValidator = language => {
+  return ['id', 'lang_name', 'lang_direction'].reduce((valid, key) => valid && language[key], true);
+};
+const getContentLangDir = language => {
+  return (language || {}).lang_direction || languageDirections.LTR;
+};
+
+export { languageDirections, defaultLanguage, languageValidator, getContentLangDir };
 
 let _i18nReady = false;
 

From 950565fe44a85ee760094e0387eb3f0b7d48da2b Mon Sep 17 00:00:00 2001
From: MisRob <robosovam@gmail.com>
Date: Mon, 22 Jan 2024 11:38:00 +0100
Subject: [PATCH 02/18] Upgrade Studio to KDS 3.0.0 (3/3)

Remove deprecated `value` prop in favor of the new
`buttonValue` prop that's supposed to replace it
in `KRadioButton`.
---
 .../frontend/settings/pages/Storage/RequestForm.vue         | 6 +++---
 .../shared/languageSwitcher/LanguageSwitcherModal.vue       | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/settings/pages/Storage/RequestForm.vue b/contentcuration/contentcuration/frontend/settings/pages/Storage/RequestForm.vue
index faa01aac37..aaed431916 100644
--- a/contentcuration/contentcuration/frontend/settings/pages/Storage/RequestForm.vue
+++ b/contentcuration/contentcuration/frontend/settings/pages/Storage/RequestForm.vue
@@ -142,7 +142,7 @@
       v-for="affiliation in affiliationOptions"
       :key="affiliation.value"
       v-model="org_or_personal"
-      :value="affiliation.value"
+      :buttonValue="affiliation.value"
       :invalid="errors.org_or_personal"
       :showInvalidText="errors.org_or_personal"
       :invalidText="$tr('fieldRequiredText')"
@@ -172,7 +172,7 @@
       v-for="orgType in organizationTypeOptions"
       :key="orgType.value"
       v-model="organization_type"
-      :value="orgType.value"
+      :buttonValue="orgType.value"
       :invalid="errors.organization_type"
       :showInvalidText="errors.organization_type"
       :invalidText="$tr('fieldRequiredText')"
@@ -199,7 +199,7 @@
       v-for="constraint in timeConstraintOptions"
       :key="constraint.value"
       v-model="time_constraint"
-      :value="constraint.value"
+      :buttonValue="constraint.value"
       :label="constraint.text"
     />
 
diff --git a/contentcuration/contentcuration/frontend/shared/languageSwitcher/LanguageSwitcherModal.vue b/contentcuration/contentcuration/frontend/shared/languageSwitcher/LanguageSwitcherModal.vue
index 9eb3c03362..d3c8cfe83b 100644
--- a/contentcuration/contentcuration/frontend/shared/languageSwitcher/LanguageSwitcherModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/languageSwitcher/LanguageSwitcherModal.vue
@@ -19,7 +19,7 @@
           v-for="language in languageCol"
           :key="language.id"
           v-model="selectedLanguage"
-          :value="language.id"
+          :buttonValue="language.id"
           :label="language.lang_name"
           :title="language.english_name"
           class="language-name"

From 4d0ac3bf7b32bede3b45854ca23f5fffa85c73e4 Mon Sep 17 00:00:00 2001
From: Blaine Jester <blainesworld@gmail.com>
Date: Fri, 23 Feb 2024 08:31:53 -0800
Subject: [PATCH 03/18] Finalize upgrade to v3+ of KDS

---
 package.json |  2 +-
 yarn.lock    | 28 ++++++++++++++++++++++++----
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 497b3f54b1..e849428c2c 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "jspdf": "https://github.com/parallax/jsPDF.git#b7a1d8239c596292ce86dafa77f05987bcfa2e6e",
     "jszip": "^3.10.1",
     "kolibri-constants": "^0.1.41",
-    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#e9a2ff34716bb6412fe99f835ded5b17345bab94",
+    "kolibri-design-system": "3.0.1",
     "lodash": "^4.17.21",
     "material-icons": "0.3.1",
     "mutex-js": "^1.1.5",
diff --git a/yarn.lock b/yarn.lock
index 57bf596870..97b59a2d7b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3012,6 +3012,11 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
+"@vue/composition-api@^1.7.2":
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-1.7.2.tgz#0b656f3ec39fefc2cf40aaa8c12426bcfeae1b44"
+  integrity sha512-M8jm9J/laYrYT02665HkZ5l2fWTK4dcVg3BsDHm/pfz+MjDYwX+9FUaZyGwEyXEDonQYRCo0H7aLgdklcIELjw==
+
 "@vue/test-utils@1.0.0-beta.29":
   version "1.0.0-beta.29"
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.0.0-beta.29.tgz#c942cf25e891cf081b6a03332b4ae1ef430726f0"
@@ -5054,6 +5059,11 @@ data-urls@^3.0.2:
     whatwg-mimetype "^3.0.0"
     whatwg-url "^11.0.0"
 
+date-fns@^1.30.1:
+  version "1.30.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
+  integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
@@ -9035,13 +9045,16 @@ kolibri-constants@^0.1.41:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.1.42.tgz#2f62a8d8b8894e5cfbd47ee6564b31018818c93f"
   integrity sha512-2hUxYnzUEfhLFJO9egVSwYW8/PKob9wLeDYfB74mtIzgQ4zy6huRj3574WetK9gREi+W1Jcm7HGPsfZIFzFvrA==
 
-"kolibri-design-system@https://github.com/learningequality/kolibri-design-system#e9a2ff34716bb6412fe99f835ded5b17345bab94":
-  version "1.3.0"
-  resolved "https://github.com/learningequality/kolibri-design-system#e9a2ff34716bb6412fe99f835ded5b17345bab94"
+kolibri-design-system@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-3.0.1.tgz#ba6368c78ffab1d6195b828b1aacc4f11b9a67c3"
+  integrity sha512-/O+KuYTGiv5z9VTlm8bIWZwanMdearGmIP162EqaVn2tIbo/hY42lsuAbGSTZPi5CITm+LJ9r99ogImDRH8z2w==
   dependencies:
+    "@vue/composition-api" "^1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"
     autosize "^3.0.21"
     css-element-queries "^1.2.0"
+    date-fns "^1.30.1"
     frame-throttle "^3.0.0"
     fuzzysearch "^1.0.3"
     keen-ui "^1.3.0"
@@ -9049,6 +9062,8 @@ kolibri-constants@^0.1.41:
     popper.js "^1.14.6"
     purecss "^0.6.2"
     tippy.js "^4.2.1"
+    vue-intl "^3.1.0"
+    xstate "^4.38.3"
 
 kolibri-tools@0.16.0-dev.3:
   version "0.16.0-dev.3"
@@ -13403,7 +13418,7 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
-vue-intl@^3.0.0:
+vue-intl@^3.0.0, vue-intl@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/vue-intl/-/vue-intl-3.1.0.tgz#707f1f7406595c9b4afc6049254b333093be37be"
   integrity sha512-0v3S5gspuYnt6j1G+KLfPUsNnjRdbMOcYrWYoSd1gYk6rX8VuOyh7NLztPrSIJt+NLs/qzLOZXxI1LORukEiqA==
@@ -14106,6 +14121,11 @@ xmldom@^0.1.22:
   resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.31.tgz#b76c9a1bd9f0a9737e5a72dc37231cf38375e2ff"
   integrity sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ==
 
+xstate@^4.38.3:
+  version "4.38.3"
+  resolved "https://registry.yarnpkg.com/xstate/-/xstate-4.38.3.tgz#4e15e7ad3aa0ca1eea2010548a5379966d8f1075"
+  integrity sha512-SH7nAaaPQx57dx6qvfcIgqKRXIh4L0A1iYEqim4s1u7c9VoCgzZc+63FY90AKU4ZzOC2cfJzTnpO4zK7fCUzzw==
+
 xtend@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"

From cccd0d8a2f760b6cb5a79acb781208ca28185cbe Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Tue, 27 Feb 2024 11:50:18 +0300
Subject: [PATCH 04/18] Updates grey shade usages

---
 .../frontend/shared/views/errors/TechnicalTextBlock.vue       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/errors/TechnicalTextBlock.vue b/contentcuration/contentcuration/frontend/shared/views/errors/TechnicalTextBlock.vue
index 79e81962f5..8fcb5968be 100644
--- a/contentcuration/contentcuration/frontend/shared/views/errors/TechnicalTextBlock.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/errors/TechnicalTextBlock.vue
@@ -9,8 +9,8 @@
       wrap="soft"
       aria-hidden="true"
       :style="[dynamicHeightStyle, {
-        backgroundColor: $themePalette.grey.v_200,
-        border: $themePalette.grey.v_300,
+        backgroundColor: $themePalette.grey.v_50,
+        border: $themePalette.grey.v_100,
       }]"
     >
     </textarea>

From eeabbf6d84a43715a2812f886e61e66161490f63 Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Tue, 27 Feb 2024 15:11:19 +0300
Subject: [PATCH 05/18] AppBar color upgrade

---
 .../channelList/views/ChannelListIndex.vue        |  2 +-
 .../frontend/shared/views/AppBar.vue              | 15 +++++++++++----
 .../shared/views/MainNavigationDrawer.vue         |  7 +++++--
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index 16cdf100f7..98c2b6aeb1 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -31,7 +31,7 @@
           :to="getChannelLink(listType)"
           @click="trackTabClick(listType)"
         >
-          <VBadge :value="invitationsByListCounts[listType]" color="secondary">
+          <VBadge :value="invitationsByListCounts[listType]" color="black">
             <template #badge>
               <span>{{ $formatNumber(invitationsByListCounts[listType]) }}</span>
             </template>
diff --git a/contentcuration/contentcuration/frontend/shared/views/AppBar.vue b/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
index f437e06e51..e88a9ac42b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
@@ -3,10 +3,9 @@
   <div>
     <VToolbar
       app
-      dark
       :clipped-left="!$isRTL"
       :clipped-right="$isRTL"
-      color="primary"
+      color="secondary"
       height="56"
       :tabs="Boolean($slots.tabs)"
     >
@@ -31,9 +30,17 @@
           <Menu>
             <template #activator="{ on }">
               <VBtn flat style="text-transform: none;" v-on="on">
-                <Icon>person</Icon>
+                <KIconButton
+                  disabled="true"
+                  icon="person"
+                  color="black"
+                />
                 <span class="mx-2 subheading">{{ user.first_name }}</span>
-                <Icon>arrow_drop_down</Icon>
+                <KIconButton
+                  disabled="true"
+                  icon="dropdown"
+                  color="black"
+                />
               </VBtn>
             </template>
             <VList>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue b/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
index 7f1843ccc5..15def47b38 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
@@ -8,9 +8,12 @@
       style="z-index: 1000;"
       :right="$isRTL"
     >
-      <VToolbar color="primary" dark>
+      <VToolbar color="secondary">
         <VBtn flat icon :tabindex="handleclickTab" @click="drawer = false">
-          <Icon>clear</Icon>
+          <KIconButton
+            icon="clear"
+            color="black"
+          />
         </VBtn>
         <VToolbarTitle class="notranslate">
           Kolibri Studio

From 7b562e7f9c4de0a620913ef9770b41ed5599bce8 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Tue, 16 Jan 2024 14:18:13 -0800
Subject: [PATCH 06/18] Cherry-picks theming base work

---
 .../frontend/shared/i18n/index.js             |  3 +
 .../frontend/shared/vuetify/theme.js          | 57 ++++++++++---------
 package.json                                  |  8 +--
 yarn.lock                                     | 26 ++-------
 4 files changed, 40 insertions(+), 54 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/i18n/index.js b/contentcuration/contentcuration/frontend/shared/i18n/index.js
index 13bcd01fd1..f6a2ebf17f 100644
--- a/contentcuration/contentcuration/frontend/shared/i18n/index.js
+++ b/contentcuration/contentcuration/frontend/shared/i18n/index.js
@@ -7,14 +7,17 @@ const languageDirections = {
   LTR: 'ltr',
   RTL: 'rtl',
 };
+
 const defaultLanguage = {
   id: 'en',
   lang_name: 'English',
   lang_direction: languageDirections.LTR,
 };
+
 const languageValidator = language => {
   return ['id', 'lang_name', 'lang_direction'].reduce((valid, key) => valid && language[key], true);
 };
+
 const getContentLangDir = language => {
   return (language || {}).lang_direction || languageDirections.LTR;
 };
diff --git a/contentcuration/contentcuration/frontend/shared/vuetify/theme.js b/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
index add22c47ef..243b533972 100644
--- a/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
+++ b/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
@@ -1,35 +1,36 @@
-import colors from 'vuetify/es5/util/colors';
-import { themeTokens } from 'kolibri-design-system/lib/styles/theme';
+import { themeBrand, themePalette, themeTokens } from 'kolibri-design-system/lib/styles/theme';
 
 export default function theme() {
+  const palette = themePalette();
+  const brand = themeBrand();
+  const tokens = themeTokens();
   return Object.assign(
     {
-      purple: '#996189',
-      primary: '#996189',
-      secondary: '#8DC5B6',
-      primaryBackground: colors.purple.lighten5,
-      backgroundColor: colors.grey.lighten5,
-      greyBackground: colors.grey.lighten3,
-      greyBorder: colors.grey.lighten1,
-      grey: colors.grey.darken1,
-      darkGrey: colors.grey.darken2,
-      greenSuccess: '#4db6ac',
-      topic: colors.grey.base,
-      video: '#283593',
-      image: '#283593', // IDK what this is supposed to be
-      audio: '#f06292',
-      document: '#ff3d00',
-      exercise: '#4db6ac',
-      h5p: '#ff8f00',
-      html5: '#ff8f00',
-      zim: '#ff8f00',
-      slideshow: '#4ece90',
-      channelHighlightDefault: colors.grey.lighten3,
-      draggableDropZone: '#dddddd',
-      draggableDropOverlay: '#996189',
-      greenHighlightBackground: '#E3F0ED',
-      roleVisibilityCoach: '#01a9f3',
+      secondary: brand.secondary.v_1000,
+      primaryBackground: brand.primary.v_200,
+      backgroundColor: palette.grey.v_50,
+      greyBackground: palette.grey.v_200,
+      greyBorder: palette.grey.v_400,
+      grey: palette.grey.v_600,
+      darkGrey: palette.grey.v_800,
+      greenSuccess: tokens.success,
+      topic: palette.grey.v_400,
+      video: tokens.watch,
+      audio: tokens.listen,
+      document: tokens.read,
+      exercise: tokens.practice,
+      h5p: tokens.explore,
+      html5: tokens.explore,
+      zim: tokens.explore,
+      slideshow: tokens.read,
+      channelHighlightDefault: palette.grey.v_200,
+      draggableDropZone: palette.grey.v_100,
+      draggableDropOverlay: brand.primary.v_400,
+      greenHighlightBackground: brand.secondary.v_200,
+      roleVisibilityCoach: palette.lightblue.v_600,
     },
-    themeTokens()
+    tokens
   );
 }
+
+console.log(themeTokens());
diff --git a/package.json b/package.json
index e849428c2c..1fbcbe2810 100644
--- a/package.json
+++ b/package.json
@@ -71,8 +71,8 @@
     "jquery": "^2.2.4",
     "jspdf": "https://github.com/parallax/jsPDF.git#b7a1d8239c596292ce86dafa77f05987bcfa2e6e",
     "jszip": "^3.10.1",
-    "kolibri-constants": "^0.1.41",
-    "kolibri-design-system": "3.0.1",
+    "kolibri-constants": "^0.2.0",
+    "kolibri-design-system": "https://github.com/LianaHarris360/kolibri-design-system.git#finalize-theme-tokens",
     "lodash": "^4.17.21",
     "material-icons": "0.3.1",
     "mutex-js": "^1.1.5",
@@ -117,8 +117,8 @@
     "npm-run-all": "^4.1.3",
     "stylus": "^0.59.0",
     "stylus-loader": "^7.1.3",
-    "workbox-webpack-plugin": "^7.0.0",
-    "web-streams-polyfill": "^3.2.1"
+    "web-streams-polyfill": "^3.2.1",
+    "workbox-webpack-plugin": "^7.0.0"
   },
   "false": {},
   "peerDependencies": {},
diff --git a/yarn.lock b/yarn.lock
index 97b59a2d7b..efaa9791a3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3664,7 +3664,7 @@ autoprefixer@^9.6.1:
     postcss "^7.0.32"
     postcss-value-parser "^4.1.0"
 
-autosize@^3.0.20, autosize@^3.0.21:
+autosize@^3.0.21:
   version "3.0.21"
   resolved "https://registry.yarnpkg.com/autosize/-/autosize-3.0.21.tgz#f182f40d17757d978a139a4c9ca40c4c0e448603"
   integrity sha512-xGFj5jTV4up6+fxRwtnAWiCIx/5N0tEnFn5rdhAkK1Lq2mliLMuGJgP5Bf4phck3sHGYrVKpYwugfJ61MSz9nA==
@@ -5136,11 +5136,6 @@ deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deepmerge@^2.0.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
-  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
-
 deepmerge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
@@ -8990,17 +8985,6 @@ jszip@^3.7.1:
     readable-stream "~2.3.6"
     setimmediate "^1.0.5"
 
-keen-ui@^1.3.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/keen-ui/-/keen-ui-1.3.2.tgz#252cab973282d4cd477c45ac92015595d1b1fff1"
-  integrity sha512-WlyNRB8+ei47n87Om973HXUzLqL+Ili7hcNkG6gar/Jqfykpghgx+eSy2vyRq7oEBO2dGr0QgZ3A9eXq/eP14Q==
-  dependencies:
-    autosize "^3.0.20"
-    deepmerge "^2.0.1"
-    fuzzysearch "^1.0.3"
-    lodash.debounce "^4.0.8"
-    tippy.js "^4.2.1"
-
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
@@ -9045,10 +9029,9 @@ kolibri-constants@^0.1.41:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.1.42.tgz#2f62a8d8b8894e5cfbd47ee6564b31018818c93f"
   integrity sha512-2hUxYnzUEfhLFJO9egVSwYW8/PKob9wLeDYfB74mtIzgQ4zy6huRj3574WetK9gREi+W1Jcm7HGPsfZIFzFvrA==
 
-kolibri-design-system@3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-3.0.1.tgz#ba6368c78ffab1d6195b828b1aacc4f11b9a67c3"
-  integrity sha512-/O+KuYTGiv5z9VTlm8bIWZwanMdearGmIP162EqaVn2tIbo/hY42lsuAbGSTZPi5CITm+LJ9r99ogImDRH8z2w==
+"kolibri-design-system@https://github.com/LianaHarris360/kolibri-design-system.git#finalize-theme-tokens":
+  version "1.3.0"
+  resolved "https://github.com/LianaHarris360/kolibri-design-system.git#7d773a79abc4daceca8cf2e6c0d7c9f6a876f176"
   dependencies:
     "@vue/composition-api" "^1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"
@@ -9057,7 +9040,6 @@ kolibri-design-system@3.0.1:
     date-fns "^1.30.1"
     frame-throttle "^3.0.0"
     fuzzysearch "^1.0.3"
-    keen-ui "^1.3.0"
     lodash "^4.17.15"
     popper.js "^1.14.6"
     purecss "^0.6.2"

From ef04e9105a476c3118eb17a3c8616fa6ab09d3f6 Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Wed, 28 Feb 2024 12:46:34 +0300
Subject: [PATCH 07/18] updates yarn.lock

---
 yarn.lock | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index efaa9791a3..32a3076000 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9024,10 +9024,10 @@ known-css-properties@^0.25.0:
   resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.25.0.tgz#6ebc4d4b412f602e5cfbeb4086bd544e34c0a776"
   integrity sha512-b0/9J1O9Jcyik1GC6KC42hJ41jKwdO/Mq8Mdo5sYN+IuRTXs2YFHZC3kZSx6ueusqa95x3wLYe/ytKjbAfGixA==
 
-kolibri-constants@^0.1.41:
-  version "0.1.42"
-  resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.1.42.tgz#2f62a8d8b8894e5cfbd47ee6564b31018818c93f"
-  integrity sha512-2hUxYnzUEfhLFJO9egVSwYW8/PKob9wLeDYfB74mtIzgQ4zy6huRj3574WetK9gREi+W1Jcm7HGPsfZIFzFvrA==
+kolibri-constants@^0.2.0:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.5.tgz#2b9df4c477119d0ade2d66bf8aef8a4172f0418f"
+  integrity sha512-ZoFZ83xgteZhFZtYjiOmITcZeSF+X42i12TOo87zmcdA78jj0dZbPYB+ttO855UxoKY8h4HHeDVZIUkE5TGa5g==
 
 "kolibri-design-system@https://github.com/LianaHarris360/kolibri-design-system.git#finalize-theme-tokens":
   version "1.3.0"

From 2823d9d61e13e03e474e80e3f66d901afcc2ffce Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Wed, 28 Feb 2024 17:07:56 +0300
Subject: [PATCH 08/18] implements further rebrand changes

---
 .../channelEdit/components/ContentNodeValidator.vue       | 4 ++--
 .../frontend/channelEdit/views/TreeView/TreeViewBase.vue  | 6 +++---
 .../frontend/shared/views/FullscreenModal.vue             | 8 ++++++--
 .../frontend/shared/views/MainNavigationDrawer.vue        | 6 +++++-
 .../frontend/shared/views/channel/ChannelDetailsModal.vue | 1 +
 5 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeValidator.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeValidator.vue
index d37b6022cb..c35742e8ba 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeValidator.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeValidator.vue
@@ -9,7 +9,7 @@
   <span v-else-if="error" class="mx-2">
     <VTooltip bottom lazy>
       <template #activator="{ on }">
-        <Icon color="red" v-on="on">
+        <Icon :color="$themePalette.red.v_1100" v-on="on">
           error
         </Icon>
       </template>
@@ -19,7 +19,7 @@
   <span v-else-if="warning" class="mx-2">
     <VTooltip bottom lazy>
       <template #activator="{ on }">
-        <Icon color="amber" v-on="on">
+        <Icon :color="$themePalette.yellow.v_1100" v-on="on">
           warning
         </Icon>
       </template>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
index 5566b290a0..8fd2cf0745 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -68,12 +68,12 @@
         >
           <template #activator="{ on }">
             <div
-              class="amber--text title"
+              class="black--text title"
               style="width: max-content;"
               v-on="on"
             >
               {{ $formatNumber(errorsInChannel) }}
-              <Icon color="amber">
+              <Icon color="black">
                 warning
               </Icon>
             </div>
@@ -204,7 +204,7 @@
         <slot name="extension"></slot>
       </template>
     </ToolBar>
-    <MainNavigationDrawer v-model="drawer" />
+    <MainNavigationDrawer v-model="drawer" color="white" />
     <slot></slot>
 
     <PublishModal
diff --git a/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue b/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
index 14a4e3ee91..a65f669ba8 100644
--- a/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
@@ -13,7 +13,7 @@
     <VCard style="overflow-y: auto;">
       <VToolbar
         :color="color"
-        dark
+        :dark="dark"
         fixed
         :extension-height="48"
         clipped-left
@@ -81,7 +81,11 @@
       },
       color: {
         type: String,
-        default: 'primary',
+        default: 'secondary',
+      },
+      dark: {
+        type: Boolean,
+        default: false,
       },
     },
     computed: {
diff --git a/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue b/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
index 15def47b38..258300de29 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
@@ -8,7 +8,7 @@
       style="z-index: 1000;"
       :right="$isRTL"
     >
-      <VToolbar color="secondary">
+      <VToolbar :color="color">
         <VBtn flat icon :tabindex="handleclickTab" @click="drawer = false">
           <KIconButton
             icon="clear"
@@ -123,6 +123,10 @@
         type: Boolean,
         default: false,
       },
+      color: {
+        type: String,
+        default: 'secondary',
+      },
     },
     data() {
       return {
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
index a67c060203..e13d4e2365 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
@@ -3,6 +3,7 @@
   <FullscreenModal
     v-model="dialog"
     color="black"
+    :dark="true"
   >
     <template #header>
       <span class="notranslate">{{ channel ? channel.name : '' }}</span>

From 4b894b3ca9a0979adaacc117eabd2815866219c0 Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Fri, 1 Mar 2024 00:36:09 +0300
Subject: [PATCH 09/18] Removes console log

---
 .../contentcuration/frontend/shared/vuetify/theme.js            | 2 --
 1 file changed, 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/vuetify/theme.js b/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
index 243b533972..0a64d20ca4 100644
--- a/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
+++ b/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
@@ -32,5 +32,3 @@ export default function theme() {
     tokens
   );
 }
-
-console.log(themeTokens());

From bd033b11fcba946db095e95ef143bfd790fbf20b Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Tue, 5 Mar 2024 21:13:56 +0300
Subject: [PATCH 10/18] Updates studio to use KDS library

---
 package.json |  2 +-
 yarn.lock    | 83 +++++++++++++++++++++++++++++-----------------------
 2 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/package.json b/package.json
index 1fbcbe2810..0dbecff2ac 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "jspdf": "https://github.com/parallax/jsPDF.git#b7a1d8239c596292ce86dafa77f05987bcfa2e6e",
     "jszip": "^3.10.1",
     "kolibri-constants": "^0.2.0",
-    "kolibri-design-system": "https://github.com/LianaHarris360/kolibri-design-system.git#finalize-theme-tokens",
+    "kolibri-design-system": "^4.0.1",
     "lodash": "^4.17.21",
     "material-icons": "0.3.1",
     "mutex-js": "^1.1.5",
diff --git a/yarn.lock b/yarn.lock
index 32a3076000..35c2511411 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3012,7 +3012,7 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
-"@vue/composition-api@^1.7.2":
+"@vue/composition-api@1.7.2":
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-1.7.2.tgz#0b656f3ec39fefc2cf40aaa8c12426bcfeae1b44"
   integrity sha512-M8jm9J/laYrYT02665HkZ5l2fWTK4dcVg3BsDHm/pfz+MjDYwX+9FUaZyGwEyXEDonQYRCo0H7aLgdklcIELjw==
@@ -3425,17 +3425,17 @@ anymatch@^3.0.3, anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-"aphrodite@https://github.com/learningequality/aphrodite.git":
+"aphrodite@git+https://github.com/learningequality/aphrodite.git":
   version "2.2.3"
-  resolved "https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
+  resolved "git+https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
   dependencies:
     asap "^2.0.3"
     inline-style-prefixer "^4.0.2"
     string-hash "^1.1.3"
 
-"aphrodite@https://github.com/learningequality/aphrodite/":
+"aphrodite@https://github.com/learningequality/aphrodite.git":
   version "2.2.3"
-  resolved "https://github.com/learningequality/aphrodite/#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
+  resolved "https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
   dependencies:
     asap "^2.0.3"
     inline-style-prefixer "^4.0.2"
@@ -3664,7 +3664,7 @@ autoprefixer@^9.6.1:
     postcss "^7.0.32"
     postcss-value-parser "^4.1.0"
 
-autosize@^3.0.21:
+autosize@3.0.21:
   version "3.0.21"
   resolved "https://registry.yarnpkg.com/autosize/-/autosize-3.0.21.tgz#f182f40d17757d978a139a4c9ca40c4c0e448603"
   integrity sha512-xGFj5jTV4up6+fxRwtnAWiCIx/5N0tEnFn5rdhAkK1Lq2mliLMuGJgP5Bf4phck3sHGYrVKpYwugfJ61MSz9nA==
@@ -4829,10 +4829,10 @@ css-declaration-sorter@^6.3.1:
   resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.4.0.tgz#630618adc21724484b3e9505bce812def44000ad"
   integrity sha512-jDfsatwWMWN0MODAFuHszfjphEXfNw9JUAhmY4pLu3TyTU+ohUpsbVtbU+1MZn4a47D9kqh03i4eyOm+74+zew==
 
-css-element-queries@^1.2.0:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/css-element-queries/-/css-element-queries-1.2.3.tgz#e14940b1fcd4bf0da60ea4145d05742d7172e516"
-  integrity sha512-QK9uovYmKTsV2GXWQiMOByVNrLn2qz6m3P7vWpOR4IdD6I3iXoDw5qtgJEN3Xq7gIbdHVKvzHjdAtcl+4Arc4Q==
+css-element-queries@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/css-element-queries/-/css-element-queries-1.2.0.tgz#081373d7f30302adad46b7c29b83b85f8ef8f62c"
+  integrity sha512-4gaxpioSFueMcp9yj1TJFCLjfooGv38y6ZdwFUS3GuS+9NIVijdeiExXKwSIHoQDADfpgnaYSTzmJs+bV+Hehg==
 
 css-functions-list@^3.1.0:
   version "3.1.0"
@@ -5059,7 +5059,7 @@ data-urls@^3.0.2:
     whatwg-mimetype "^3.0.0"
     whatwg-url "^11.0.0"
 
-date-fns@^1.30.1:
+date-fns@1.30.1:
   version "1.30.1"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
   integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
@@ -6483,7 +6483,7 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
-frame-throttle@^3.0.0:
+frame-throttle@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/frame-throttle/-/frame-throttle-3.0.0.tgz#a666e007c10af6239909cf73871be09a7ea1c6d1"
   integrity sha512-ENBi8VP95xoHf8JpxPwEaCdZneOrtxl0U2H5p2oS896u3NzriR9kRcylvJ+FcCW3qZfZFJ5TDeOT5LbENndBnQ==
@@ -6550,7 +6550,7 @@ functions-have-names@^1.2.2:
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
-fuzzysearch@^1.0.3:
+fuzzysearch@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/fuzzysearch/-/fuzzysearch-1.0.3.tgz#dffc80f6d6b04223f2226aa79dd194231096d008"
   integrity sha512-s+kNWQuI3mo9OALw0HJ6YGmMbLqEufCh2nX/zzV5CrICQ/y4AwPxM+6TIiF9ItFCHXFCyM/BfCCmN57NTIJuPg==
@@ -9029,23 +9029,24 @@ kolibri-constants@^0.2.0:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.5.tgz#2b9df4c477119d0ade2d66bf8aef8a4172f0418f"
   integrity sha512-ZoFZ83xgteZhFZtYjiOmITcZeSF+X42i12TOo87zmcdA78jj0dZbPYB+ttO855UxoKY8h4HHeDVZIUkE5TGa5g==
 
-"kolibri-design-system@https://github.com/LianaHarris360/kolibri-design-system.git#finalize-theme-tokens":
-  version "1.3.0"
-  resolved "https://github.com/LianaHarris360/kolibri-design-system.git#7d773a79abc4daceca8cf2e6c0d7c9f6a876f176"
+kolibri-design-system@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-4.0.1.tgz#24cb0b81c53b1c9731c941df297397a58ec5e667"
+  integrity sha512-wMbRMX6lTSdG77G9OVVeJek0GKg/d5RoGifZhjIq0x0lpgWLDecJpMtBGZfn+/nLGWXguvOsf/EAxY6wIqjPMg==
   dependencies:
-    "@vue/composition-api" "^1.7.2"
+    "@vue/composition-api" "1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"
-    autosize "^3.0.21"
-    css-element-queries "^1.2.0"
-    date-fns "^1.30.1"
-    frame-throttle "^3.0.0"
-    fuzzysearch "^1.0.3"
-    lodash "^4.17.15"
-    popper.js "^1.14.6"
-    purecss "^0.6.2"
-    tippy.js "^4.2.1"
-    vue-intl "^3.1.0"
-    xstate "^4.38.3"
+    autosize "3.0.21"
+    css-element-queries "1.2.0"
+    date-fns "1.30.1"
+    frame-throttle "3.0.0"
+    fuzzysearch "1.0.3"
+    lodash "4.17.15"
+    popper.js "1.14.6"
+    purecss "0.6.2"
+    tippy.js "4.2.1"
+    vue-intl "3.1.0"
+    xstate "4.38.3"
 
 kolibri-tools@0.16.0-dev.3:
   version "0.16.0-dev.3"
@@ -9310,6 +9311,11 @@ lodash.without@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.without/-/lodash.without-4.4.0.tgz#3cd4574a00b67bae373a94b748772640507b7aac"
   integrity sha512-M3MefBwfDhgKgINVuBJCO1YR3+gf6s9HNJsIiZ/Ru77Ws6uTb9eBuvrkpzO+9iLoAaRodGuq7tyrPCx+74QYGQ==
 
+lodash@4.17.15:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
+  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
+
 lodash@4.17.21, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0, lodash@~4.17.10:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
@@ -10521,7 +10527,12 @@ pngjs@^3.0.0, pngjs@^3.3.3:
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
   integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
 
-popper.js@^1.14.6, popper.js@^1.14.7:
+popper.js@1.14.6:
+  version "1.14.6"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.6.tgz#ab20dd4edf9288b8b3b6531c47c361107b60b4b0"
+  integrity sha512-AGwHGQBKumlk/MDfrSOf0JHhJCImdDMcGNoqKmKkU+68GFazv3CQ6q9r7Ja1sKDZmYWTckY/uLyEznheTDycnA==
+
+popper.js@^1.14.7:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
   integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
@@ -11013,7 +11024,7 @@ pure-rand@^6.0.0:
   resolved "https://registry.yarnpkg.com/pure-rand/-/pure-rand-6.0.2.tgz#a9c2ddcae9b68d736a8163036f088a2781c8b306"
   integrity sha512-6Yg0ekpKICSjPswYOuC5sku/TSWaRYlA0qsXqJgM/d/4pLPHPuTxK7Nbf7jFKzAeedUhR8C7K9Uv63FBsSo8xQ==
 
-purecss@^0.6.2:
+purecss@0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/purecss/-/purecss-0.6.2.tgz#f0827d227e909543c5138f36d56c8c613f476b8c"
   integrity sha512-6BZF+rr9UAy8xwWDW6mi//2TnImxqMAjfLTYCO80OzPcavSI3DMjnD4fY92383KB5FA+gEHO/ug46q/yeitu9w==
@@ -12841,10 +12852,10 @@ tinycolor2@^1.4.1:
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
   integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
 
-tippy.js@^4.2.1:
-  version "4.3.5"
-  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-4.3.5.tgz#882bff8d92f09bb0546d2826d5668c0560006f54"
-  integrity sha512-NDq3efte8nGK6BOJ1dDN1/WelAwfmh3UtIYXXck6+SxLzbIQNZE/cmRSnwScZ/FyiKdIcvFHvYUgqmoGx8CcyA==
+tippy.js@4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-4.2.1.tgz#9e4939d976465f77229b05a3cb233b5dc28cf850"
+  integrity sha512-xEE7zYNgQxCDdPcuT6T04f0frPh0wO7CcIqJKMFazU/NqusyjCgYSkLRosIHoiRkZMRzSPOudC8wRN5GjvAyOQ==
   dependencies:
     popper.js "^1.14.7"
 
@@ -13400,7 +13411,7 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
-vue-intl@^3.0.0, vue-intl@^3.1.0:
+vue-intl@3.1.0, vue-intl@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/vue-intl/-/vue-intl-3.1.0.tgz#707f1f7406595c9b4afc6049254b333093be37be"
   integrity sha512-0v3S5gspuYnt6j1G+KLfPUsNnjRdbMOcYrWYoSd1gYk6rX8VuOyh7NLztPrSIJt+NLs/qzLOZXxI1LORukEiqA==
@@ -14103,7 +14114,7 @@ xmldom@^0.1.22:
   resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.31.tgz#b76c9a1bd9f0a9737e5a72dc37231cf38375e2ff"
   integrity sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ==
 
-xstate@^4.38.3:
+xstate@4.38.3:
   version "4.38.3"
   resolved "https://registry.yarnpkg.com/xstate/-/xstate-4.38.3.tgz#4e15e7ad3aa0ca1eea2010548a5379966d8f1075"
   integrity sha512-SH7nAaaPQx57dx6qvfcIgqKRXIh4L0A1iYEqim4s1u7c9VoCgzZc+63FY90AKU4ZzOC2cfJzTnpO4zK7fCUzzw==

From fad5f468f51f22302cd63dedd05d8307b7249e3e Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Mon, 18 Mar 2024 18:25:44 +0300
Subject: [PATCH 11/18] changes immersive bar color to black

---
 .../frontend/shared/views/FullscreenModal.vue             | 4 ++--
 yarn.lock                                                 | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue b/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
index a65f669ba8..c8e42bc2a8 100644
--- a/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
@@ -81,11 +81,11 @@
       },
       color: {
         type: String,
-        default: 'secondary',
+        default: 'black',
       },
       dark: {
         type: Boolean,
-        default: false,
+        default: true,
       },
     },
     computed: {
diff --git a/yarn.lock b/yarn.lock
index 35c2511411..c29c113d39 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3425,17 +3425,17 @@ anymatch@^3.0.3, anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-"aphrodite@git+https://github.com/learningequality/aphrodite.git":
+"aphrodite@https://github.com/learningequality/aphrodite.git":
   version "2.2.3"
-  resolved "git+https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
+  resolved "https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
   dependencies:
     asap "^2.0.3"
     inline-style-prefixer "^4.0.2"
     string-hash "^1.1.3"
 
-"aphrodite@https://github.com/learningequality/aphrodite.git":
+"aphrodite@https://github.com/learningequality/aphrodite/":
   version "2.2.3"
-  resolved "https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
+  resolved "https://github.com/learningequality/aphrodite/#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
   dependencies:
     asap "^2.0.3"
     inline-style-prefixer "^4.0.2"

From 51da49722db0fc9fe18d63476db9c8d92eb9c8a2 Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Tue, 19 Mar 2024 17:55:24 +0300
Subject: [PATCH 12/18] Updates colors

---
 .../frontend/administration/pages/Channels/ChannelTable.vue     | 2 +-
 .../frontend/administration/pages/Users/UserTable.vue           | 2 +-
 .../frontend/channelEdit/components/StudioTree/StudioTree.vue   | 1 +
 .../frontend/channelEdit/components/edit/EditModal.vue          | 2 +-
 .../frontend/channelEdit/components/edit/SavingIndicator.vue    | 2 +-
 .../frontend/channelList/views/ChannelListIndex.vue             | 2 +-
 .../frontend/shared/layouts/ImmersiveModalLayout.vue            | 2 +-
 .../contentcuration/frontend/shared/views/AppBar.vue            | 2 +-
 .../contentcuration/frontend/shared/views/FullscreenModal.vue   | 2 +-
 .../contentcuration/frontend/shared/views/LoadingText.vue       | 2 +-
 .../frontend/shared/views/MainNavigationDrawer.vue              | 2 +-
 .../frontend/shared/views/channel/ChannelDetailsModal.vue       | 2 +-
 .../frontend/shared/views/channel/ChannelModal.vue              | 2 +-
 .../contentcuration/frontend/shared/vuetify/theme.js            | 2 +-
 14 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue
index b4185d8a85..d9ee750c28 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue
@@ -52,7 +52,7 @@
       <template #progress>
         <VProgressLinear
           v-if="loading"
-          color="primary"
+          color="loading"
           indeterminate
           data-test="loading"
         />
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
index 66953024d3..199d1f1ef4 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
@@ -63,7 +63,7 @@
       :class="{ expanded: $vuetify.breakpoint.mdAndUp }"
     >
       <template #progress>
-        <VProgressLinear v-if="loading" color="primary" indeterminate />
+        <VProgressLinear v-if="loading" color="loading" indeterminate />
       </template>
 
       <template #headerCell="{ header }">
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue b/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
index a4c08c1c0f..f816b6d240 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
@@ -118,6 +118,7 @@
                         v-if="loading"
                         class="mx-3"
                         indeterminate
+                        color="loading"
                         size="15"
                         width="2"
                       />
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
index 995072d190..6faeb52413 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue
@@ -22,7 +22,7 @@
             <!-- Toolbar + extension -->
             <VToolbar
               dark
-              color="primary"
+              color="appBarDark"
               fixed
               flat
               :clipped-left="!$isRTL"
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/SavingIndicator.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/SavingIndicator.vue
index 09a43210b0..0638969eda 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/SavingIndicator.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/SavingIndicator.vue
@@ -2,7 +2,7 @@
 
   <div class="mx-2">
     <template v-if="hasChanges">
-      <VProgressCircular indeterminate size="16" width="2" color="secondary" />
+      <VProgressCircular indeterminate size="16" width="2" color="loading" />
       <span class="mx-2" style="vertical-align: middle;">
         {{ $tr('savingIndicator') }}
       </span>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index 98c2b6aeb1..e333392db1 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -3,7 +3,7 @@
   <VApp>
     <VToolbar
       v-if="libraryMode || isFAQPage"
-      color="primary"
+      color="appBarDark"
       dark
       :clipped-left="!$isRTL"
       :clipped-right="$isRTL"
diff --git a/contentcuration/contentcuration/frontend/shared/layouts/ImmersiveModalLayout.vue b/contentcuration/contentcuration/frontend/shared/layouts/ImmersiveModalLayout.vue
index 89f53056a9..ef83b58e64 100644
--- a/contentcuration/contentcuration/frontend/shared/layouts/ImmersiveModalLayout.vue
+++ b/contentcuration/contentcuration/frontend/shared/layouts/ImmersiveModalLayout.vue
@@ -1,7 +1,7 @@
 <template>
 
   <VApp>
-    <VToolbar app dark color="primary">
+    <VToolbar app dark color="appBarDark">
       <VBtn v-if="backButton" flat :to="previousPage" exact>
         <Icon class="rtl-flip">
           arrow_back
diff --git a/contentcuration/contentcuration/frontend/shared/views/AppBar.vue b/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
index e88a9ac42b..0d78af6076 100644
--- a/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
@@ -5,7 +5,7 @@
       app
       :clipped-left="!$isRTL"
       :clipped-right="$isRTL"
-      color="secondary"
+      color="appBar"
       height="56"
       :tabs="Boolean($slots.tabs)"
     >
diff --git a/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue b/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
index c8e42bc2a8..d37b2a92d0 100644
--- a/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue
@@ -81,7 +81,7 @@
       },
       color: {
         type: String,
-        default: 'black',
+        default: 'appBarDark',
       },
       dark: {
         type: Boolean,
diff --git a/contentcuration/contentcuration/frontend/shared/views/LoadingText.vue b/contentcuration/contentcuration/frontend/shared/views/LoadingText.vue
index 6d65d0d400..070c1a22a0 100644
--- a/contentcuration/contentcuration/frontend/shared/views/LoadingText.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/LoadingText.vue
@@ -11,7 +11,7 @@
       <VProgressCircular
         :size="70"
         :width="7"
-        color="secondary"
+        color="loading"
         indeterminate
       />
     </VFlex>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue b/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
index 258300de29..f8e7744e4f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
@@ -125,7 +125,7 @@
       },
       color: {
         type: String,
-        default: 'secondary',
+        default: 'appBar',
       },
     },
     data() {
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
index e13d4e2365..b86e7869eb 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue
@@ -2,7 +2,7 @@
 
   <FullscreenModal
     v-model="dialog"
-    color="black"
+    color="appBarDark"
     :dark="true"
   >
     <template #header>
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue
index 50f66d3679..97646e7aca 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelModal.vue
@@ -20,7 +20,7 @@
     <VProgressLinear
       v-if="loading"
       indeterminate
-      color="primary"
+      color="loading"
       style="margin: 0;"
       height="5"
     />
diff --git a/contentcuration/contentcuration/frontend/shared/vuetify/theme.js b/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
index 0a64d20ca4..5a185f19cd 100644
--- a/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
+++ b/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
@@ -6,7 +6,7 @@ export default function theme() {
   const tokens = themeTokens();
   return Object.assign(
     {
-      secondary: brand.secondary.v_1000,
+      loading: palette.black,
       primaryBackground: brand.primary.v_200,
       backgroundColor: palette.grey.v_50,
       greyBackground: palette.grey.v_200,

From 15c351184b984eb5be5a372438e80a76cc5958a2 Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Fri, 29 Mar 2024 19:08:20 +0300
Subject: [PATCH 13/18] Updates KLogo

---
 .../frontend/accounts/pages/Main.vue          | 19 +++++++----
 .../channelList/views/ChannelListIndex.vue    | 11 ++++---
 .../frontend/shared/views/AppBar.vue          | 12 ++++---
 .../frontend/shared/views/KolibriLogo.vue     | 33 -------------------
 .../shared/views/MainNavigationDrawer.vue     |  7 ++--
 package.json                                  |  2 +-
 yarn.lock                                     | 33 ++++++++-----------
 7 files changed, 46 insertions(+), 71 deletions(-)
 delete mode 100644 contentcuration/contentcuration/frontend/shared/views/KolibriLogo.vue

diff --git a/contentcuration/contentcuration/frontend/accounts/pages/Main.vue b/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
index 49833f60e2..a38006028a 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
@@ -12,13 +12,13 @@
           class="pa-4"
           style="width: 300px;margin: 0 auto;"
         >
-          <VImg
-            height="200"
-            maxHeight="100"
-            contain
-            :lazy-src="require('shared/images/kolibri-logo.svg')"
-            :src="require('shared/images/kolibri-logo.svg')"
-          />
+          <div class="k-logo-container">
+            <KLogo
+              altText="Kolibri Logo with background"
+              :showBackground="true"
+              :size="150"
+            />
+          </div>
           <h2 class="primary--text py-2 text-xs-center">
             {{ $tr('kolibriStudio') }}
           </h2>
@@ -227,4 +227,9 @@
     width: 100%;
   }
 
+  .k-logo-container {
+    display: flex;
+    justify-content: center;
+  }
+
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index e333392db1..267f69771e 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -12,11 +12,16 @@
       <VToolbarSideIcon
         :href="homeLink"
         exact
-        color="white"
+        color="appBarDark"
         class="ma-0"
         style="border-radius: 8px;"
       >
-        <KolibriLogo />
+        <KLogo
+          altText="Kolibri Logo with rectangular background"
+          backgroundStyle="rect"
+          :showBackground="true"
+          :size="40"
+        />
       </VToolbarSideIcon>
 
       <VToolbarTitle class="notranslate">
@@ -96,7 +101,6 @@
   import { ChannelListTypes } from 'shared/constants';
   import { constantsTranslationMixin, routerMixin } from 'shared/mixins';
   import GlobalSnackbar from 'shared/views/GlobalSnackbar';
-  import KolibriLogo from 'shared/views/KolibriLogo';
   import AppBar from 'shared/views/AppBar';
   import OfflineText from 'shared/views/OfflineText';
   import PolicyModals from 'shared/views/policies/PolicyModals';
@@ -123,7 +127,6 @@
       ChannelInvitation,
       ChannelListAppError,
       GlobalSnackbar,
-      KolibriLogo,
       PolicyModals,
       OfflineText,
     },
diff --git a/contentcuration/contentcuration/frontend/shared/views/AppBar.vue b/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
index 0d78af6076..8dfa248f73 100644
--- a/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
@@ -14,11 +14,17 @@
         v-else
         :href="homeLink"
         exact
-        color="white"
+        color="appBar"
         class="ma-0"
         style="border-radius: 8px;"
       >
-        <KolibriLogo />
+        <KLogo
+          altText="Kolibri Logo with rectangular background"
+          backgroundStyle="rect"
+          :showBackground="true"
+          colorScheme="monoBlack"
+          :size="40"
+        />
       </VToolbarSideIcon>
 
       <VToolbarTitle>
@@ -131,7 +137,6 @@
 <script>
 
   import { mapActions, mapState, mapGetters } from 'vuex';
-  import KolibriLogo from './KolibriLogo';
   import Tabs from 'shared/views/Tabs';
   import MainNavigationDrawer from 'shared/views/MainNavigationDrawer';
   import LanguageSwitcherModal from 'shared/languageSwitcher/LanguageSwitcherModal';
@@ -139,7 +144,6 @@
   export default {
     name: 'AppBar',
     components: {
-      KolibriLogo,
       LanguageSwitcherModal,
       MainNavigationDrawer,
       Tabs,
diff --git a/contentcuration/contentcuration/frontend/shared/views/KolibriLogo.vue b/contentcuration/contentcuration/frontend/shared/views/KolibriLogo.vue
deleted file mode 100644
index 027f02561e..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/KolibriLogo.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-
-  <img
-    :height="`${height}px`"
-    width="auto"
-    :src="require('shared/images/kolibri-logo.svg')"
-  >
-
-</template>
-
-
-<script>
-
-  export default {
-    name: 'KolibriLogo',
-    props: {
-      height: {
-        type: Number,
-        default: 28,
-      },
-    },
-  };
-
-</script>
-
-
-<style lang="less" scoped>
-
-  img {
-    object-fit: contain;
-  }
-
-</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue b/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
index f8e7744e4f..edd7ef7ae2 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
@@ -76,7 +76,10 @@
         </VListTile>
       </VList>
       <VContainer>
-        <KolibriLogo :height="75" />
+        <KLogo
+          altText="Kolibri logo"
+          :size="150"
+        />
         <ActionLink
           :text="$tr('copyright', { year: new Date().getFullYear() })"
           href="https://learningequality.org/"
@@ -109,13 +112,11 @@
 <script>
 
   import { mapActions, mapState } from 'vuex';
-  import KolibriLogo from './KolibriLogo';
   import LanguageSwitcherModal from 'shared/languageSwitcher/LanguageSwitcherModal';
 
   export default {
     name: 'MainNavigationDrawer',
     components: {
-      KolibriLogo,
       LanguageSwitcherModal,
     },
     props: {
diff --git a/package.json b/package.json
index 0dbecff2ac..8be0faa394 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "jspdf": "https://github.com/parallax/jsPDF.git#b7a1d8239c596292ce86dafa77f05987bcfa2e6e",
     "jszip": "^3.10.1",
     "kolibri-constants": "^0.2.0",
-    "kolibri-design-system": "^4.0.1",
+    "kolibri-design-system": "^4.1.0",
     "lodash": "^4.17.21",
     "material-icons": "0.3.1",
     "mutex-js": "^1.1.5",
diff --git a/yarn.lock b/yarn.lock
index c29c113d39..21c48b83b8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3425,17 +3425,17 @@ anymatch@^3.0.3, anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-"aphrodite@https://github.com/learningequality/aphrodite.git":
+"aphrodite@git+https://github.com/learningequality/aphrodite.git":
   version "2.2.3"
-  resolved "https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
+  resolved "git+https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
   dependencies:
     asap "^2.0.3"
     inline-style-prefixer "^4.0.2"
     string-hash "^1.1.3"
 
-"aphrodite@https://github.com/learningequality/aphrodite/":
+"aphrodite@https://github.com/learningequality/aphrodite.git":
   version "2.2.3"
-  resolved "https://github.com/learningequality/aphrodite/#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
+  resolved "https://github.com/learningequality/aphrodite.git#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
   dependencies:
     asap "^2.0.3"
     inline-style-prefixer "^4.0.2"
@@ -9029,10 +9029,10 @@ kolibri-constants@^0.2.0:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.5.tgz#2b9df4c477119d0ade2d66bf8aef8a4172f0418f"
   integrity sha512-ZoFZ83xgteZhFZtYjiOmITcZeSF+X42i12TOo87zmcdA78jj0dZbPYB+ttO855UxoKY8h4HHeDVZIUkE5TGa5g==
 
-kolibri-design-system@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-4.0.1.tgz#24cb0b81c53b1c9731c941df297397a58ec5e667"
-  integrity sha512-wMbRMX6lTSdG77G9OVVeJek0GKg/d5RoGifZhjIq0x0lpgWLDecJpMtBGZfn+/nLGWXguvOsf/EAxY6wIqjPMg==
+kolibri-design-system@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-4.1.0.tgz#f9dc9026e75a457af7b51678f2129a61eaa1f9ab"
+  integrity sha512-ZoDL40u9YgXnJ/OBD7Ju4F9o7zdl7OKwRqjUyzCjN0dg1bQGXgB4qaq7LCOVBhIOeqw0SOtG0tvT7Fxsmena5Q==
   dependencies:
     "@vue/composition-api" "1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"
@@ -9041,9 +9041,9 @@ kolibri-design-system@^4.0.1:
     date-fns "1.30.1"
     frame-throttle "3.0.0"
     fuzzysearch "1.0.3"
-    lodash "4.17.15"
+    lodash "4.17.21"
     popper.js "1.14.6"
-    purecss "0.6.2"
+    purecss "2.2.0"
     tippy.js "4.2.1"
     vue-intl "3.1.0"
     xstate "4.38.3"
@@ -9311,11 +9311,6 @@ lodash.without@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.without/-/lodash.without-4.4.0.tgz#3cd4574a00b67bae373a94b748772640507b7aac"
   integrity sha512-M3MefBwfDhgKgINVuBJCO1YR3+gf6s9HNJsIiZ/Ru77Ws6uTb9eBuvrkpzO+9iLoAaRodGuq7tyrPCx+74QYGQ==
 
-lodash@4.17.15:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
-  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
-
 lodash@4.17.21, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0, lodash@~4.17.10:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
@@ -11024,10 +11019,10 @@ pure-rand@^6.0.0:
   resolved "https://registry.yarnpkg.com/pure-rand/-/pure-rand-6.0.2.tgz#a9c2ddcae9b68d736a8163036f088a2781c8b306"
   integrity sha512-6Yg0ekpKICSjPswYOuC5sku/TSWaRYlA0qsXqJgM/d/4pLPHPuTxK7Nbf7jFKzAeedUhR8C7K9Uv63FBsSo8xQ==
 
-purecss@0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/purecss/-/purecss-0.6.2.tgz#f0827d227e909543c5138f36d56c8c613f476b8c"
-  integrity sha512-6BZF+rr9UAy8xwWDW6mi//2TnImxqMAjfLTYCO80OzPcavSI3DMjnD4fY92383KB5FA+gEHO/ug46q/yeitu9w==
+purecss@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/purecss/-/purecss-2.2.0.tgz#71249802e1babd562b236cf5d0b75b16f158a421"
+  integrity sha512-jEPrAALLgE+InDARWdPDt0AkZ1Bi0yXxHj4BOwWImq06sGIDe5CagPyS6Z9WGyEgMuZonrrhinInJ80nAHTIUA==
 
 qs@6.10.3:
   version "6.10.3"

From 02484aad0dd2fc71c79c3fc93faf8bc9f69100cd Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Fri, 12 Apr 2024 23:11:37 +0300
Subject: [PATCH 14/18] Updates logo usages to guidelines

---
 .../contentcuration/frontend/accounts/pages/Main.vue       | 2 +-
 .../frontend/channelList/views/ChannelListIndex.vue        | 6 +++---
 .../contentcuration/frontend/shared/views/AppBar.vue       | 7 ++-----
 .../frontend/shared/views/MainNavigationDrawer.vue         | 3 ++-
 4 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/accounts/pages/Main.vue b/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
index a38006028a..c2ba1f5616 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/Main.vue
@@ -16,7 +16,7 @@
             <KLogo
               altText="Kolibri Logo with background"
               :showBackground="true"
-              :size="150"
+              :size="120"
             />
           </div>
           <h2 class="primary--text py-2 text-xs-center">
diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index 267f69771e..8340aa2d0e 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -17,10 +17,10 @@
         style="border-radius: 8px;"
       >
         <KLogo
-          altText="Kolibri Logo with rectangular background"
-          backgroundStyle="rect"
+          altText="Kolibri Logo with background"
           :showBackground="true"
-          :size="40"
+          colorScheme="monoSecondary"
+          :size="36"
         />
       </VToolbarSideIcon>
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/AppBar.vue b/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
index 8dfa248f73..9563455463 100644
--- a/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
@@ -19,11 +19,8 @@
         style="border-radius: 8px;"
       >
         <KLogo
-          altText="Kolibri Logo with rectangular background"
-          backgroundStyle="rect"
-          :showBackground="true"
-          colorScheme="monoBlack"
-          :size="40"
+          altText="Kolibri Logo with background"
+          :size="36"
         />
       </VToolbarSideIcon>
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue b/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
index edd7ef7ae2..c7e37daf97 100644
--- a/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue
@@ -78,7 +78,8 @@
       <VContainer>
         <KLogo
           altText="Kolibri logo"
-          :size="150"
+          :showBackground="true"
+          :size="88"
         />
         <ActionLink
           :text="$tr('copyright', { year: new Date().getFullYear() })"

From 0cb9338cd8f76a2328e797fe0469fcd4bc945b68 Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Fri, 12 Apr 2024 23:29:42 +0300
Subject: [PATCH 15/18] Updates logo usages to guidelines

---
 .../frontend/channelList/views/ChannelListIndex.vue              | 1 -
 1 file changed, 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
index 8340aa2d0e..4dee071859 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue
@@ -19,7 +19,6 @@
         <KLogo
           altText="Kolibri Logo with background"
           :showBackground="true"
-          colorScheme="monoSecondary"
           :size="36"
         />
       </VToolbarSideIcon>

From 5b686cf95dd86afd090f8b9e338049042024d7b6 Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Tue, 16 Apr 2024 22:29:41 +0300
Subject: [PATCH 16/18] Updates KDS version + warning icon color

---
 .../channelEdit/views/TreeView/TreeViewBase.vue |  2 +-
 package.json                                    |  2 +-
 yarn.lock                                       | 17 ++++++-----------
 3 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
index 8fd2cf0745..a3b43c8184 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -73,7 +73,7 @@
               v-on="on"
             >
               {{ $formatNumber(errorsInChannel) }}
-              <Icon color="black">
+              <Icon :color="$themePalette.yellow.v_1100">
                 warning
               </Icon>
             </div>
diff --git a/package.json b/package.json
index 8be0faa394..a3403bc5af 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "jspdf": "https://github.com/parallax/jsPDF.git#b7a1d8239c596292ce86dafa77f05987bcfa2e6e",
     "jszip": "^3.10.1",
     "kolibri-constants": "^0.2.0",
-    "kolibri-design-system": "^4.1.0",
+    "kolibri-design-system": "^4.2.0",
     "lodash": "^4.17.21",
     "material-icons": "0.3.1",
     "mutex-js": "^1.1.5",
diff --git a/yarn.lock b/yarn.lock
index 21c48b83b8..f6e3b931a3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9029,10 +9029,10 @@ kolibri-constants@^0.2.0:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.5.tgz#2b9df4c477119d0ade2d66bf8aef8a4172f0418f"
   integrity sha512-ZoFZ83xgteZhFZtYjiOmITcZeSF+X42i12TOo87zmcdA78jj0dZbPYB+ttO855UxoKY8h4HHeDVZIUkE5TGa5g==
 
-kolibri-design-system@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-4.1.0.tgz#f9dc9026e75a457af7b51678f2129a61eaa1f9ab"
-  integrity sha512-ZoDL40u9YgXnJ/OBD7Ju4F9o7zdl7OKwRqjUyzCjN0dg1bQGXgB4qaq7LCOVBhIOeqw0SOtG0tvT7Fxsmena5Q==
+kolibri-design-system@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-4.2.0.tgz#7ef5355ecfd330893e4f9b37ec2bcad6b4cd9e56"
+  integrity sha512-50lkYsPIx0zfrbAwsEC5QPMJcpmZGmne8BhFVtgcWS4xEn6Uc6BefHQAxqZriomnLRd5otAP3XwFkrkycly0fA==
   dependencies:
     "@vue/composition-api" "1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"
@@ -9042,7 +9042,7 @@ kolibri-design-system@^4.1.0:
     frame-throttle "3.0.0"
     fuzzysearch "1.0.3"
     lodash "4.17.21"
-    popper.js "1.14.6"
+    popper.js "1.16.1"
     purecss "2.2.0"
     tippy.js "4.2.1"
     vue-intl "3.1.0"
@@ -10522,12 +10522,7 @@ pngjs@^3.0.0, pngjs@^3.3.3:
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
   integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
 
-popper.js@1.14.6:
-  version "1.14.6"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.6.tgz#ab20dd4edf9288b8b3b6531c47c361107b60b4b0"
-  integrity sha512-AGwHGQBKumlk/MDfrSOf0JHhJCImdDMcGNoqKmKkU+68GFazv3CQ6q9r7Ja1sKDZmYWTckY/uLyEznheTDycnA==
-
-popper.js@^1.14.7:
+popper.js@1.16.1, popper.js@^1.14.7:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
   integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==

From dc3a7cbb3a09d23dbd7b6938eb24bfd7441d5066 Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Tue, 16 Apr 2024 22:52:00 +0300
Subject: [PATCH 17/18] Updates warning icon color

---
 .../frontend/channelEdit/views/TreeView/TreeViewBase.vue        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
index a3b43c8184..a76b0494f6 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -68,7 +68,7 @@
         >
           <template #activator="{ on }">
             <div
-              class="black--text title"
+              class="amber--text title"
               style="width: max-content;"
               v-on="on"
             >

From a3cf77852e182e10ab746d34103c308cdba3c8e9 Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Wed, 17 Apr 2024 10:18:51 +0300
Subject: [PATCH 18/18] Fixes incorrect coach content icon color

---
 .../contentcuration/frontend/shared/vuetify/theme.js            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/shared/vuetify/theme.js b/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
index 5a185f19cd..47caf85a99 100644
--- a/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
+++ b/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
@@ -27,7 +27,7 @@ export default function theme() {
       draggableDropZone: palette.grey.v_100,
       draggableDropOverlay: brand.primary.v_400,
       greenHighlightBackground: brand.secondary.v_200,
-      roleVisibilityCoach: palette.lightblue.v_600,
+      roleVisibilityCoach: palette.lightblue.v_1100,
     },
     tokens
   );