upgrade KDS version to latest

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

@@ -45,7 +45,6 @@ import CoreLogo from '../views/CoreLogo';
 import LanguageSwitcherList from '../views/language-switcher/LanguageSwitcherList';
 import LanguageSwitcherModal from '../views/language-switcher/LanguageSwitcherModal';
 import ElapsedTime from '../views/ElapsedTime';
-import PointsIcon from '../views/PointsIcon';
 import TotalPoints from '../views/TotalPoints';
 import AuthMessage from '../views/AuthMessage';
 import FilterTextbox from '../views/FilterTextbox';
@@ -169,7 +168,6 @@ export default {
       LanguageSwitcherModal,
       LanguageSwitcherList,
       ElapsedTime,
-      PointsIcon,
       TotalPoints,
       AuthMessage,
       FilterTextbox,

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

@@ -56,10 +56,11 @@
           >
             <slot name="app-bar-actions"></slot>
             <span v-if="isLearner">
-              <KIconButton
+              <KIcon
                 ref="pointsButton"
                 icon="pointsActive"
                 :ariaLabel="$tr('pointsAriaLabel')"
+                :color="$themeTokens.primary"
               />
               <div v-if="!windowIsSmall" class="points-description">
                 {{ $formatNumber(totalPoints) }}

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

@@ -2,7 +2,10 @@
 
   <div v-if="isUserLoggedIn" ref="icon" class="points-wrapper">
     <div class="icon-wrapper" :style="{ backgroundColor: $themeTokens.surface }">
-      <PointsIcon class="icon" />
+      <KIcon
+        icon="pointsActive"
+        :color="$themeTokens.primary"
+      />
     </div>
     <div class="description">
       {{ $formatNumber(totalPoints) }}
@@ -22,13 +25,9 @@
 
   import { mapGetters, mapActions } from 'vuex';
   import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
-  import PointsIcon from 'kolibri.coreVue.components.PointsIcon';
 
   export default {
     name: 'TotalPoints',
-    components: {
-      PointsIcon,
-    },
     mixins: [responsiveWindowMixin],
     computed: {
       ...mapGetters(['totalPoints', 'currentUserId', 'isUserLoggedIn']),
@@ -63,7 +62,6 @@
     height: 32px;
     text-align: center;
     // Aligns the round background with its siblings
-    vertical-align: middle;
     border-radius: 100%;
   }
 

kolibri/core/package.json

@@ -21,7 +21,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.0",
-    "kolibri-design-system": "4.2.0",
+    "kolibri-design-system": "4.3.0",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.1",

kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue

@@ -62,7 +62,11 @@
                 <span :style="{ color: $themeTokens.correct }">
                   {{ $tr('plusPoints', { points }) }}
                 </span>
-                <PointsIcon :style="{ display: 'inline-block' }" />
+                <KIcon
+                  icon="pointsActive"
+                  :style="{ display: 'inline-block' }"
+                  :color="$themeTokens.primary"
+                />
               </div>
               <div>{{ $tr('keepUpTheGreatProgress') }}</div>
             </div>
@@ -148,7 +152,6 @@
   import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';
   import { MaxPointsPerContent } from 'kolibri.coreVue.vuex.constants';
   import FocusTrap from 'kolibri.coreVue.components.FocusTrap';
-  import PointsIcon from 'kolibri.coreVue.components.PointsIcon';
   import { ContentNodeResource } from 'kolibri.resources';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { currentDeviceData } from '../../composables/useDevices';
@@ -173,7 +176,6 @@
     name: 'CompletionModal',
     components: {
       FocusTrap,
-      PointsIcon,
       CompletionModalSection,
       ResourceItem,
       UiAlert,

kolibri/plugins/user_profile/assets/src/views/ProfilePage/index.vue

@@ -32,7 +32,10 @@
           <tr>
             <th>{{ $tr('points') }}</th>
             <td class="points-cell">
-              <PointsIcon class="points-icon" />
+              <KIcon
+                icon="pointsActive"
+                :color="$themeTokens.primary"
+              />
               <span :style="{ color: $themeTokens.correct }">
                 {{ $formatNumber(totalPoints) }}
               </span>
@@ -192,7 +195,6 @@
   import pickBy from 'lodash/pickBy';
   import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import PointsIcon from 'kolibri.coreVue.components.PointsIcon';
   import PermissionsIcon from 'kolibri.coreVue.components.PermissionsIcon';
   import UserTypeDisplay from 'kolibri.coreVue.components.UserTypeDisplay';
   import { PermissionTypes } from 'kolibri.coreVue.vuex.constants';
@@ -218,7 +220,6 @@
       NotificationsRoot,
       GenderDisplayText,
       PermissionsIcon,
-      PointsIcon,
       UserTypeDisplay,
     },
     mixins: [responsiveWindowMixin, commonCoreStrings],

packages/kolibri-core-for-export/package.json

@@ -24,7 +24,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.0",
-    "kolibri-design-system": "4.2.0",
+    "kolibri-design-system": "4.3.0",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.1",

yarn.lock

@@ -2284,6 +2284,15 @@ [email protected]:
     asap "^2.0.3"
     inline-style-prefixer "^2.0.0"
 
+"aphrodite@git+https://github.com/learningequality/aphrodite.git":
+  version "2.2.3"
+  uid 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/":
   version "2.2.3"
   resolved "https://github.com/learningequality/aphrodite/#fdc8d7be8912a5cf17f74ff10f124013c52c3e32"
@@ -7567,10 +7576,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.0.tgz#47c9d773894e23251ba5ac4db420822e45603142"
   integrity sha512-WYDMGDzB9gNxRbpX1O2cGe1HrJvLvSZGwMuAv6dqrxJgPf7iO+Hi40/1CXjHM7nk5CRt+hn5bqnMzCBmj1omPA==
 
-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==
+kolibri-design-system@4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-4.3.0.tgz#feefc61bfa9ab3c098281751d8ad582d91639108"
+  integrity sha512-uHtqoXQSdb8ID8uMU3A1EdlZ4JXlLLkvzOt4MgURDatVz+6d9Yc4Y9GtolkcDLgeMoUq+FqojbQKjD4i1fH1pw==
   dependencies:
     "@vue/composition-api" "1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"