From 4ae719c0ba7622896bc742be25f8a6f34766ce57 Mon Sep 17 00:00:00 2001 From: Jacob Pierce Date: Wed, 11 Dec 2024 14:57:32 -0800 Subject: [PATCH 1/8] AppBar: Use appBarText for text/icon colors - NavBar & NavbarLink now take & drill a `textColor` prop - In AppBar, the new token `appBarText` is passed to `textColor` - In AppBar, it is also used as the default color for icons, the page title, and the user's info This is done to permit plugins to customize the text in the AppBar so that they can ensure proper contrast with their chosen `appBar` token's value, which is used as the background. --- kolibri/core/assets/src/views/AppBar.vue | 12 ++++++++---- kolibri/core/assets/src/views/Navbar/NavbarLink.vue | 8 ++++++-- kolibri/core/assets/src/views/Navbar/index.vue | 9 +++++++-- 3 files changed, 21 insertions(+), 8 deletions(-) diff --git a/kolibri/core/assets/src/views/AppBar.vue b/kolibri/core/assets/src/views/AppBar.vue index 75680355036..f14d8e211ae 100644 --- a/kolibri/core/assets/src/views/AppBar.vue +++ b/kolibri/core/assets/src/views/AppBar.vue @@ -10,9 +10,12 @@ @@ -26,7 +29,7 @@ > @@ -49,6 +52,7 @@ @@ -94,7 +98,7 @@ @@ -27,7 +28,7 @@ :ariaLabel="coreString('moreOptions')" icon="optionsHorizontal" appearance="flat-button" - :color="$themeTokens.text" + :color="textColor || $themeTokens.text" :primary="false" class="kiconbutton-style" > @@ -81,6 +82,10 @@ return values.every(value => value.link.name); }, }, + textColor: { + type: String, + default: null, + }, }, data() { return { mounted: false }; From 4c0bee9fd7464c082583db64766e37e27a91a597 Mon Sep 17 00:00:00 2001 From: Jacob Pierce Date: Thu, 12 Dec 2024 13:13:21 -0800 Subject: [PATCH 2/8] Include appBar in themeconfig; validate in themeSpec for appBar image, bg, and textColor --- kolibri/core/assets/src/styles/themeConfig.js | 2 ++ kolibri/core/assets/src/styles/themeSpec.js | 19 +++++++++++++++++++ 2 files changed, 21 insertions(+) diff --git a/kolibri/core/assets/src/styles/themeConfig.js b/kolibri/core/assets/src/styles/themeConfig.js index 0bd59d23632..5d11aa0aa28 100644 --- a/kolibri/core/assets/src/styles/themeConfig.js +++ b/kolibri/core/assets/src/styles/themeConfig.js @@ -2,6 +2,8 @@ import Vue from 'vue'; const themeConfig = Vue.observable({ appBar: { + background: null, + textColor: null, topLogo: { src: null, alt: null, diff --git a/kolibri/core/assets/src/styles/themeSpec.js b/kolibri/core/assets/src/styles/themeSpec.js index 092f8e920ab..d810c020ad3 100644 --- a/kolibri/core/assets/src/styles/themeSpec.js +++ b/kolibri/core/assets/src/styles/themeSpec.js @@ -42,6 +42,25 @@ const _imageSpec = { }; export default { + appBar: { + type: Object, + default: null, + spec: { + background: { + type: String, + default: null, + }, + textColor: { + type: String, + default: null, + }, + topLogo: { + type: Object, + default: null, + spec: _imageSpec, + }, + }, + }, brandColors: { type: Object, default: null, From 1851e105e4de9d82924d0fd7612a40e1a0635952 Mon Sep 17 00:00:00 2001 From: Jacob Pierce Date: Thu, 12 Dec 2024 15:41:55 -0800 Subject: [PATCH 3/8] use themeTokens in themeSpec for appbar --- kolibri/core/assets/src/styles/themeSpec.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/kolibri/core/assets/src/styles/themeSpec.js b/kolibri/core/assets/src/styles/themeSpec.js index d810c020ad3..9c0cc1cc69d 100644 --- a/kolibri/core/assets/src/styles/themeSpec.js +++ b/kolibri/core/assets/src/styles/themeSpec.js @@ -1,4 +1,5 @@ import logger from 'kolibri.lib.logging'; +import { themeTokens } from 'kolibri-design-system/lib/styles/theme'; import isObject from 'lodash/isObject'; const logging = logger.getLogger(__filename); @@ -48,11 +49,11 @@ export default { spec: { background: { type: String, - default: null, + default: themeTokens.appBar, }, textColor: { type: String, - default: null, + default: themeTokens.text, }, topLogo: { type: Object, From ec00222d6534207f9b938fcde8817d73f45a5f4f Mon Sep 17 00:00:00 2001 From: Jacob Pierce Date: Thu, 12 Dec 2024 15:42:33 -0800 Subject: [PATCH 4/8] Update appbar & sidenav to use appbar themeConfig values --- kolibri/core/assets/src/views/AppBar.vue | 12 ++++++------ kolibri/core/assets/src/views/SideNav.vue | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/kolibri/core/assets/src/views/AppBar.vue b/kolibri/core/assets/src/views/AppBar.vue index f14d8e211ae..51cf18d5668 100644 --- a/kolibri/core/assets/src/views/AppBar.vue +++ b/kolibri/core/assets/src/views/AppBar.vue @@ -2,7 +2,7 @@
@@ -10,11 +10,11 @@ @@ -52,7 +52,7 @@ @@ -98,7 +98,7 @@ Date: Fri, 13 Dec 2024 11:28:46 -0800 Subject: [PATCH 5/8] fix incorrect uses of themeConfig and themeTokens utilities --- kolibri/core/assets/src/styles/themeSpec.js | 4 ++-- kolibri/core/assets/src/views/AppBar.vue | 15 +++++++++------ kolibri/core/assets/src/views/SideNav.vue | 3 ++- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/kolibri/core/assets/src/styles/themeSpec.js b/kolibri/core/assets/src/styles/themeSpec.js index 9c0cc1cc69d..92f200ff979 100644 --- a/kolibri/core/assets/src/styles/themeSpec.js +++ b/kolibri/core/assets/src/styles/themeSpec.js @@ -49,11 +49,11 @@ export default { spec: { background: { type: String, - default: themeTokens.appBar, + default: themeTokens().appBar, }, textColor: { type: String, - default: themeTokens.text, + default: themeTokens().text, }, topLogo: { type: Object, diff --git a/kolibri/core/assets/src/views/AppBar.vue b/kolibri/core/assets/src/views/AppBar.vue index 51cf18d5668..c09363c1546 100644 --- a/kolibri/core/assets/src/views/AppBar.vue +++ b/kolibri/core/assets/src/views/AppBar.vue @@ -2,7 +2,10 @@
@@ -10,11 +13,11 @@ @@ -52,7 +55,7 @@ @@ -98,7 +101,7 @@ Date: Fri, 13 Dec 2024 11:37:15 -0800 Subject: [PATCH 6/8] Remove prop-drilling, just use theemConfig --- kolibri/core/assets/src/views/AppBar.vue | 1 - kolibri/core/assets/src/views/Navbar/NavbarLink.vue | 10 ++++------ kolibri/core/assets/src/views/Navbar/index.vue | 11 ++++------- 3 files changed, 8 insertions(+), 14 deletions(-) diff --git a/kolibri/core/assets/src/views/AppBar.vue b/kolibri/core/assets/src/views/AppBar.vue index c09363c1546..c9eba505dd3 100644 --- a/kolibri/core/assets/src/views/AppBar.vue +++ b/kolibri/core/assets/src/views/AppBar.vue @@ -55,7 +55,6 @@ diff --git a/kolibri/core/assets/src/views/Navbar/NavbarLink.vue b/kolibri/core/assets/src/views/Navbar/NavbarLink.vue index 67169a7159d..bbfb11267d8 100644 --- a/kolibri/core/assets/src/views/Navbar/NavbarLink.vue +++ b/kolibri/core/assets/src/views/Navbar/NavbarLink.vue @@ -29,6 +29,7 @@ import { validateLinkObject } from 'kolibri.utils.validators'; import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow'; + import themeConfig from 'kolibri.themeConfig'; /** Links for use inside the Navbar @@ -38,6 +39,7 @@ setup() { const { windowIsSmall } = useKResponsiveWindow(); return { + themeConfig, windowIsSmall, }; }, @@ -57,15 +59,11 @@ required: true, validator: validateLinkObject, }, - textColor: { - type: String, - default: null, - }, }, computed: { tabStyles() { return { - color: this.textColor || this.$themeTokens.text, + color: this.themeConfig.appBar.textColor, ':hover': { 'background-color': this.$themeBrand.secondary.v_600, }, @@ -85,7 +83,7 @@ activeClasses() { // return both fixed and dynamic classes return `router-link-active ${this.$computedClass({ - color: this.textColor || this.$themeTokens.text, + color: this.themeConfig.appBar.textColor, })}`; }, }, diff --git a/kolibri/core/assets/src/views/Navbar/index.vue b/kolibri/core/assets/src/views/Navbar/index.vue index 94d4a4a9805..bea9f0ef963 100644 --- a/kolibri/core/assets/src/views/Navbar/index.vue +++ b/kolibri/core/assets/src/views/Navbar/index.vue @@ -13,11 +13,10 @@ ref="navLinks" :title="link.title" :link="link.link" - :textColor="textColor || $themeTokens.text" > @@ -28,7 +27,7 @@ :ariaLabel="coreString('moreOptions')" icon="optionsHorizontal" appearance="flat-button" - :color="textColor || $themeTokens.text" + :color="themeConfig.appBar.textColor" :primary="false" class="kiconbutton-style" > @@ -52,6 +51,7 @@ import isUndefined from 'lodash/isUndefined'; import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings'; import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow'; + import themeConfig from 'kolibri.themeConfig'; import NavbarLink from './NavbarLink'; /** * Used for navigation between sub-pages of a top-level Kolibri section @@ -68,6 +68,7 @@ windowIsLarge, windowIsMedium, windowWidth, + themeConfig, }; }, props: { @@ -82,10 +83,6 @@ return values.every(value => value.link.name); }, }, - textColor: { - type: String, - default: null, - }, }, data() { return { mounted: false }; From c8af4c18979cec53fef3929589a8ea454b393329 Mon Sep 17 00:00:00 2001 From: Jacob Pierce Date: Fri, 13 Dec 2024 12:10:48 -0800 Subject: [PATCH 7/8] missed default text updated --- kolibri/core/assets/src/views/SideNav.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/kolibri/core/assets/src/views/SideNav.vue b/kolibri/core/assets/src/views/SideNav.vue index dd01c6842c2..d10680360a6 100644 --- a/kolibri/core/assets/src/views/SideNav.vue +++ b/kolibri/core/assets/src/views/SideNav.vue @@ -204,7 +204,7 @@ ref="closeButton" tabindex="0" icon="close" - :color="$themeTokens.text" + :color="themeConfig.appBar.textColor" class="side-nav-header-icon" :ariaLabel="$tr('closeNav')" size="large" @@ -212,7 +212,7 @@ /> {{ sideNavTitleText }}
From d33c457e062ea89db2e12fcc83f13c049f57407b Mon Sep 17 00:00:00 2001 From: Jacob Pierce Date: Mon, 16 Dec 2024 09:21:10 -0800 Subject: [PATCH 8/8] bump patch version to 0.17.5 --- kolibri/__init__.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/kolibri/__init__.py b/kolibri/__init__.py index 04dfc796198..de34af2cec1 100755 --- a/kolibri/__init__.py +++ b/kolibri/__init__.py @@ -11,7 +11,7 @@ #: This may not be the exact version as it's subject to modification with #: get_version() - use ``kolibri.__version__`` for the exact version string. -VERSION = (0, 17, 4) +VERSION = (0, 17, 5) __author__ = "Learning Equality" __email__ = "info@learningequality.org"