From b8e84b94d3ddc45aac0088699bb482ca4f3cc1fa Mon Sep 17 00:00:00 2001 From: Marcella Maki Date: Fri, 25 Oct 2024 16:31:01 -0400 Subject: [PATCH 1/5] Ensures kolibri-core-for-export KDS version is also updated --- packages/kolibri-core-for-export/package.json | 2 +- yarn.lock | 60 +------------------ 2 files changed, 4 insertions(+), 58 deletions(-) diff --git a/packages/kolibri-core-for-export/package.json b/packages/kolibri-core-for-export/package.json index 4394920f63e..de7fdaa8b8d 100644 --- 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 index bf16aa5e629..e82c01e17c4 100644 --- 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== From fab1f8cb614def3be14c0a640b0f1c60ce5bef5e Mon Sep 17 00:00:00 2001 From: Marcella Maki Date: Fri, 25 Oct 2024 16:32:11 -0400 Subject: [PATCH 2/5] Fixes inadverted 'double' token update, resulting in too light of a color --- kolibri/core/assets/src/views/ImmersiveToolbar.vue | 2 +- kolibri/core/assets/src/views/Navbar/NavbarLink.vue | 2 +- kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/kolibri/core/assets/src/views/ImmersiveToolbar.vue b/kolibri/core/assets/src/views/ImmersiveToolbar.vue index f2f4f224557..17f573b0bac 100644 --- 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 index 48f3a157588..a0d720ea7f8 100644 --- 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/plugins/coach/assets/src/views/common/QuizStatus.vue b/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue index bee8720251c..492f959326f 100644 --- a/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue +++ b/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue @@ -341,7 +341,7 @@ 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 From c91944d7d21cc7ef0a88667cd2531e14ae338604 Mon Sep 17 00:00:00 2001 From: Marcella Maki Date: Fri, 25 Oct 2024 16:32:55 -0400 Subject: [PATCH 3/5] Updates tokens in a final few files that were missed --- kolibri/core/assets/src/views/PermissionsIcon.vue | 2 +- kolibri/core/assets/src/views/ProgressBar.vue | 2 +- .../coach/assets/src/views/common/HeaderTabs/HeaderTab.vue | 2 +- .../device/assets/src/views/DeprecationWarningBanner.vue | 2 +- .../learn/assets/src/views/TopicsPage/ToggleHeaderTabs.vue | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/kolibri/core/assets/src/views/PermissionsIcon.vue b/kolibri/core/assets/src/views/PermissionsIcon.vue index 82627bc41ee..e34345f0622 100644 --- 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 index f4429e5afb6..d49f4ef7037 100644 --- a/kolibri/core/assets/src/views/ProgressBar.vue +++ b/kolibri/core/assets/src/views/ProgressBar.vue @@ -9,7 +9,7 @@
diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/ToggleHeaderTabs.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/ToggleHeaderTabs.vue index 94e24838462..4fc270f3e64 100644 --- 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, }, }); }, From b92c196277bdd60cbc05d13a9538eeccd77777f3 Mon Sep 17 00:00:00 2001 From: Marcella Maki Date: Fri, 25 Oct 2024 16:38:21 -0400 Subject: [PATCH 4/5] Align comment token code to actual theme token used --- kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue b/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue index 492f959326f..4f45592e0f4 100644 --- a/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue +++ b/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue @@ -343,8 +343,8 @@ color: this.$themeTokens.textInverted, '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' }, From a693d549defd32741a13909ffddca89d65f91260 Mon Sep 17 00:00:00 2001 From: Marcella Maki Date: Fri, 25 Oct 2024 17:20:22 -0400 Subject: [PATCH 5/5] Ensure array of token options for validations is up to date with correct scale --- kolibri/core/assets/src/styles/themeSpec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/kolibri/core/assets/src/styles/themeSpec.js b/kolibri/core/assets/src/styles/themeSpec.js index 3d74ec536a8..092f8e920ab 100644 --- 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`);