[WIP] Studio: Audit and fix theme token updates against KDS

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/shared/i18n/index.js

@@ -7,20 +7,21 @@ 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;
 
 const languageGlobals = window.languageGlobals || {};

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)"
     >
@@ -34,13 +33,13 @@
                 <KIconButton
                   disabled="true"
                   icon="person"
-                  color="white"
+                  color="black"
                 />
                 <span class="mx-2 subheading">{{ user.first_name }}</span>
                 <KIconButton
                   disabled="true"
                   icon="dropdown"
-                  color="white"
+                  color="black"
                 />
               </VBtn>
             </template>

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

@@ -8,11 +8,11 @@
       style="z-index: 1000;"
       :right="$isRTL"
     >
-      <VToolbar color="primary" dark>
+      <VToolbar color="secondary">
         <VBtn flat icon :tabindex="handleclickTab" @click="drawer = false">
           <KIconButton
             icon="clear"
-            color="white"
+            color="black"
           />
         </VBtn>
         <VToolbarTitle class="notranslate">

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,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())

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/learningequality/kolibri-design-system#v3.0.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": {},

yarn.lock

@@ -3735,7 +3735,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==
@@ -5207,11 +5207,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"
@@ -9061,17 +9056,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"
@@ -9116,9 +9100,9 @@ kolibri-constants@^0.2.0:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.0.tgz#47c9d773894e23251ba5ac4db420822e45603142"
   integrity sha512-WYDMGDzB9gNxRbpX1O2cGe1HrJvLvSZGwMuAv6dqrxJgPf7iO+Hi40/1CXjHM7nk5CRt+hn5bqnMzCBmj1omPA==
 
-"kolibri-design-system@https://github.com/learningequality/kolibri-design-system#v3.0.0":
+"kolibri-design-system@https://github.com/LianaHarris360/kolibri-design-system.git#finalize-theme-tokens":
   version "1.3.0"
-  resolved "https://github.com/learningequality/kolibri-design-system#24a7dfef611f7daf1432bbb9e0f569a0f9821844"
+  resolved "https://github.com/LianaHarris360/kolibri-design-system.git#7d773a79abc4daceca8cf2e6c0d7c9f6a876f176"
   dependencies:
     "@vue/composition-api" "^1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"
@@ -9127,7 +9111,6 @@ kolibri-constants@^0.2.0:
     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"