Merge pull request #12754 from marcellamaki/final-token-updates

Final token updates
learningequality · Oct 25, 2024 · ecbd748 · ecbd748
2 parents 826a1f1 + a693d54
commit ecbd748
Show file tree

Hide file tree

Showing 11 changed files with 15 additions and 69 deletions.
diff --git a/kolibri/core/assets/src/styles/themeSpec.js b/kolibri/core/assets/src/styles/themeSpec.js
@@ -8,7 +8,7 @@ function _brandColorScaleValidator(value) {
     logging.error(`Expected object but got '${value}'`);
     return false;
   }
-  const COLOR_NAMES = ['v_200', 'v_400', 'v_500', 'v_600', 'v_800'];
+  const COLOR_NAMES = ['v_100', 'v_200', 'v_300', 'v_400', 'v_500', 'v_600'];
   for (const colorName of COLOR_NAMES) {
     if (!value[colorName]) {
       logging.error(`${colorName} '${name}' not defined by theme`);

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

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

diff --git a/kolibri/core/assets/src/views/PermissionsIcon.vue b/kolibri/core/assets/src/views/PermissionsIcon.vue
@@ -69,7 +69,7 @@
       iconStyle() {
         if (this.hasSuperAdminPermission) {
           return {
-            fill: this.lightIcon ? this.$themePalette.yellow.v_400 : this.$themeTokens.superAdmin,
+            fill: this.lightIcon ? this.$themePalette.yellow.v_200 : this.$themeTokens.superAdmin,
           };
         } else {
           return {

diff --git a/kolibri/core/assets/src/views/ProgressBar.vue b/kolibri/core/assets/src/views/ProgressBar.vue
@@ -9,7 +9,7 @@
     </div>
     <div
       class="progress-bar-wrapper"
-      :style="{ backgroundColor: $themePalette.grey.v_200 }"
+      :style="{ backgroundColor: $themePalette.grey.v_300 }"
       role="progressbar"
       aria-labelledby="progress-bar-label"
       :aria-valuenow="percent"

diff --git a/kolibri/plugins/coach/assets/src/views/common/HeaderTabs/HeaderTab.vue b/kolibri/plugins/coach/assets/src/views/common/HeaderTabs/HeaderTab.vue
@@ -42,7 +42,7 @@
         return this.$computedClass({
           ':focus': this.$coreOutline,
           ':hover': {
-            backgroundColor: this.$themePalette.blue.v_200,
+            backgroundColor: this.$themePalette.blue.v_100,
           },
         });
       },

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

diff --git a/kolibri/plugins/device/assets/src/views/DeprecationWarningBanner.vue b/kolibri/plugins/device/assets/src/views/DeprecationWarningBanner.vue
@@ -3,7 +3,7 @@
   <div
     v-show="userDevicesUsingIE11"
     class="alert"
-    :style="{ backgroundColor: $themePalette.yellow.v_200 }"
+    :style="{ backgroundColor: $themePalette.yellow.v_100 }"
   >
     <div style="display: flex">
       <div>

diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/ToggleHeaderTabs.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/ToggleHeaderTabs.vue
@@ -98,7 +98,7 @@
         return this.$computedClass({
           ':focus': this.$coreOutline,
           ':hover': {
-            backgroundColor: this.$themePalette.blue.v_200,
+            backgroundColor: this.$themePalette.blue.v_100,
           },
         });
       },

diff --git a/packages/kolibri-core-for-export/package.json b/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.6",
-    "kolibri-design-system": "4.4.0",
+    "kolibri-design-system": "4.6.0",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.1",

diff --git a/yarn.lock b/yarn.lock
@@ -3017,15 +3017,6 @@ 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":
-  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"
@@ -7716,26 +7707,6 @@ kolibri-constants@0.2.6:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.6.tgz#d13762862505a3a6ec58a104870b21da96778656"
   integrity sha512-gQaY2wFNFrsB+9+xQNeEcLHixNuZEK+GHyKKr78s/hg8gFU3YVsnhlYp0u+du4XeVwewpyN1ajGb4UrrdF8rTA==
 
-kolibri-design-system@4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-4.4.0.tgz#4c230a701beafa9c87dc155b81e68128b02a4bfe"
-  integrity sha512-2oYNVkmY1NcXc3mNJVcphfT/glqQEriq72r0LEN3ILpGOitS99x/sGyHNOQmmww9h8/m4KBAAlD0D8IyE1xd0A==
-  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"
-    lodash "4.17.21"
-    popper.js "1.16.1"
-    purecss "2.2.0"
-    tippy.js "4.2.1"
-    vue-intl "3.1.0"
-    vue2-teleport "1.1.4"
-    xstate "4.38.3"
-
 kolibri-design-system@4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-4.6.0.tgz#9142be6798e5f8c5df9c5f7884f1398f4c9441d3"
@@ -10617,16 +10588,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -10685,14 +10647,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -12004,16 +11959,7 @@ word-wrap@^1.2.5:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==