Studio: Audit and fix theme token updates against KDS

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>

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

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>

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"
     />
 

contentcuration/contentcuration/frontend/shared/i18n/index.js

@@ -1,15 +1,28 @@
 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;
 

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"

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>

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: {

contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue

@@ -8,9 +8,12 @@
       style="z-index: 1000;"
       :right="$isRTL"
     >
-      <VToolbar color="primary" dark>
+      <VToolbar :color="color">
         <VBtn flat icon :tabindex="handleclickTab" @click="drawer = false">
-          <Icon>clear</Icon>
+          <KIconButton
+            icon="clear"
+            color="black"
+          />
         </VBtn>
         <VToolbarTitle class="notranslate">
           Kolibri Studio
@@ -120,6 +123,10 @@
         type: Boolean,
         default: false,
       },
+      color: {
+        type: String,
+        default: 'secondary',
+      },
     },
     data() {
       return {

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>

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>

contentcuration/contentcuration/frontend/shared/vuetify/theme.js

@@ -1,35 +1,34 @@
-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
   );
 }

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": "https://github.com/learningequality/kolibri-design-system#e9a2ff34716bb6412fe99f835ded5b17345bab94",
+    "kolibri-constants": "^0.2.0",
+    "kolibri-design-system": "^4.0.1",
     "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": {},