Studio: Audit and fix theme token updates against KDS #4459

akolson · 2024-02-28T09:21:22Z

Summary

Description of the change(s) you made

Updates Studio with KDS theming updates introduced in learningequality/kolibri-design-system#551.

Manual verification steps performed

Browse through Studio while observe the branding changes.

Screenshots (if applicable)

Does this introduce any tech-debt items?

Reviewer guidance

How can a reviewer test these changes?

Review theme changes https://deploy-preview-551--kolibri-design-system.netlify.app/colors/#
Cross reference with the current theming https://design-system.learningequality.org/colors/#, particularly while comparing color closeness.

Are there any risky areas that deserve extra testing?

Development

Are code changes fine?
Follow the upgrade process

QA

Can you see some glitches in regards to colors?
Are contrast ratios good?
Please test states that are often not obviously visible - errors, warning, and similar
Mobile device

References

Closes #4439
KDS PR: learningequality/kolibri-design-system#551
Designs: https://www.figma.com/file/p7aOP2MBv0SED1uhaPwqEd/Product-rebrand?type=design&node-id=426-7545&mode=design

Comments

Contributor's Checklist

PR process:

If this is an important user-facing change, PR or related issue the CHANGELOG label been added to this PR. Note: items with this label will be added to the CHANGELOG at a later time
If this includes an internal dependency change, a link to the diff is provided
The docs label has been added if this introduces a change that needs to be updated in the user docs?
If any Python requirements have changed, the updated requirements.txt files also included in this PR
Opportunities for using Google Analytics here are noted
Migrations are safe for a large db

Studio-specifc:

All user-facing strings are translated properly
The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. icons, user-generated text)
All UI components are LTR and RTL compliant
Views are organized into pages, components, and layouts directories as described in the docs
Users' storage used is recalculated properly on any changes to main tree files
If there new ways this uses user data that needs to be factored into our Privacy Policy, it has been noted.

Testing:

Code is clean and well-commented
Contributor has fully tested the PR manually
If there are any front-end changes, before/after screenshots are included
Critical user journeys are covered by Gherkin stories
Any new interactions have been added to the QA Sheet
Critical and brittle code paths are covered by unit tests

Reviewer's Checklist

This section is for reviewers to fill out.

Automated test coverage is satisfactory
PR is fully functional
PR has been tested for accessibility regressions
External dependency files were updated if necessary (yarn and pip)
Documentation is updated
Contributor is in AUTHORS.md

Fixes "Error: Can't resolve 'kolibri-design-system/lib/utils/i18n'" caused by removal of this file in KDS v2.0.0 by copying the removed file content directly to Studio.

Remove deprecated `value` prop in favor of the new `buttonValue` prop that's supposed to replace it in `KRadioButton`.

akolson · 2024-02-29T15:16:35Z

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

+      color: {
+        type: String,
+        default: 'secondary',
+      },


I added a color prop here as there are instances where the MainNavigationDrawer top needs to match with the AppBar color since its not always yellow. We actually do have a white app bar too and this prop provides the much needed flexibility.

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

marcellamaki

Hi @akolson - this looks like good work! One thing that needs updating, which wasn't fully outlined, is the "immersive" app bars, or full screen modal app bars, should all be black, rather than blue. I just double checked with Jessica. Some of this might be token swapping, and perhaps some of it is hex codes - I'm not sure.

Other than that, I don't see any critical blockers right now.

I did notice one KDS update needed for the loaders, but I'll follow up with @LianaHarris360 about that in KDS :)

akolson · 2024-03-18T15:24:35Z

Thanks @marcellamaki. I think we should be good now;

marcellamaki · 2024-03-18T15:30:23Z

~~I did notice one KDS update needed for the loaders, but I'll follow up with @LianaHarris360 about that in KDS :)~~

Oops, it's a vuetify thing, not a KDS thing!

So, there are several places where VProgressCircular is used with colors secondary, greenSuccess, progressBarColor. Since we are updating KCircularLoader and KLinearLoader in KDS to use black, I think we should update them here too. Most critically is not using secondary which is yellow, and doesn't provide sufficient contrast, but I think all of them should be updated, unless @jtamiace thinks we should keep other colors (i.e. green) for studio-specific use case.

(Sorry I thought I was going to make this edit in time before you pushed changes but I didn't quite make it )

akolson · 2024-03-18T15:34:49Z

@marcellamaki I think the figma designs spec mentions using black if I recall correctly

bjester · 2024-04-02T20:53:21Z

contentcuration/contentcuration/frontend/shared/views/KolibriLogo.vue

-  <img
-    :height="`${height}px`"
-    width="auto"
-    :src="require('shared/images/kolibri-logo.svg')"


Any other usages of this file? Is it safe to delete?

bjester · 2024-04-16T23:23:23Z

@akolson The icon indicating resources are coach content seemingly isn't using the correct color.

The color comes from CSS vars, so it seems to possibly be set through some explicit CSS.

bjester · 2024-04-17T17:37:21Z

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

@@ -73,7 +76,11 @@
        </VListTile>
      </VList>
      <VContainer>
-        <KolibriLogo :height="75" />
+        <KLogo
+          altText="Kolibri logo"


Seems like this alt text should be translated. Although for the rebranding release, I think we're trying to avoid translating things. It also sucks I don't think we can have KLogo just have this internally.

bjester

Approved! Merging so we can create the release PR

Things for followup:

KLogo alt text
channelHighlightDefault color
whether there are other usages of shared/images/kolibri-logo.svg that need replaced, and if not can we delete the file

Stale

MisRob and others added 6 commits February 23, 2024 08:30

Upgrade Studio to KDS 3.0.0 (2/3)

ce82a4c

Fixes "Error: Can't resolve 'kolibri-design-system/lib/utils/i18n'" caused by removal of this file in KDS v2.0.0 by copying the removed file content directly to Studio.

Upgrade Studio to KDS 3.0.0 (3/3)

950565f

Remove deprecated `value` prop in favor of the new `buttonValue` prop that's supposed to replace it in `KRadioButton`.

Finalize upgrade to v3+ of KDS

4d0ac3b

Updates grey shade usages

cccd0d8

AppBar color upgrade

eeabbf6

Cherry-picks theming base work

7b562e7

akolson added P0 - critical Priority: Release blocker or regression TAG: ux update DEV: frontend work-in-progress TAG: design system labels Feb 28, 2024

akolson added this to the Studio: Search Recommendations milestone Feb 28, 2024

akolson mentioned this pull request Feb 28, 2024

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

Closed

30 tasks

akolson added 2 commits February 28, 2024 12:46

updates yarn.lock

ef04e91

implements further rebrand changes

2823d9d

marcellamaki requested review from marcellamaki and rtibbles February 29, 2024 15:07

akolson changed the title ~~[WIP] Studio: Audit and fix theme token updates against KDS~~ Studio: Audit and fix theme token updates against KDS Feb 29, 2024

marcellamaki requested a review from bjester February 29, 2024 15:11

akolson commented Feb 29, 2024

View reviewed changes

akolson marked this pull request as ready for review February 29, 2024 15:19

bjester reviewed Feb 29, 2024

View reviewed changes

contentcuration/contentcuration/frontend/shared/vuetify/theme.js Outdated Show resolved Hide resolved

akolson added 2 commits March 1, 2024 00:36

Removes console log

4b894b3

Updates studio to use KDS library

bd033b1

rtibbles assigned marcellamaki Mar 12, 2024

marcellamaki previously requested changes Mar 18, 2024

View reviewed changes

changes immersive bar color to black

fad5f46

akolson requested review from bjester and marcellamaki March 18, 2024 15:26

akolson added 2 commits March 19, 2024 17:55

Updates colors

51da497

Updates KLogo

15c3511

bjester reviewed Apr 2, 2024

View reviewed changes

akolson added 4 commits April 12, 2024 23:11

Updates logo usages to guidelines

02484aa

Updates logo usages to guidelines

0cb9338

Updates KDS version + warning icon color

5b686cf

Updates warning icon color

dc3a7cb

Fixes incorrect coach content icon color

a3cf778

bjester reviewed Apr 17, 2024

View reviewed changes

bjester approved these changes Apr 17, 2024

View reviewed changes

bjester merged commit f0fa1f6 into learningequality:hotfixes Apr 17, 2024
9 checks passed

akolson mentioned this pull request Apr 17, 2024

Release v2024.06.04 #4518

Merged

This was referenced Apr 18, 2024

Update welcome email with rebranded colors and logo #4520

Merged

Audit and fix theme token updates against KDS #4439

Closed

akolson deleted the studio_rebranding branch October 31, 2024 18:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Studio: Audit and fix theme token updates against KDS #4459

Studio: Audit and fix theme token updates against KDS #4459

akolson commented Feb 28, 2024 •

edited

Loading

akolson Feb 29, 2024

marcellamaki left a comment

akolson commented Mar 18, 2024

marcellamaki commented Mar 18, 2024 •

edited

Loading

akolson commented Mar 18, 2024

bjester Apr 2, 2024

bjester commented Apr 16, 2024

bjester Apr 17, 2024

bjester left a comment

Studio: Audit and fix theme token updates against KDS #4459

Studio: Audit and fix theme token updates against KDS #4459

Conversation

akolson commented Feb 28, 2024 • edited Loading

Summary

Description of the change(s) you made

Manual verification steps performed

Screenshots (if applicable)

Does this introduce any tech-debt items?

Reviewer guidance

How can a reviewer test these changes?

Are there any risky areas that deserve extra testing?

Development

QA

References

Comments

Contributor's Checklist

Reviewer's Checklist

This section is for reviewers to fill out.

akolson Feb 29, 2024

Choose a reason for hiding this comment

marcellamaki left a comment

Choose a reason for hiding this comment

akolson commented Mar 18, 2024

marcellamaki commented Mar 18, 2024 • edited Loading

akolson commented Mar 18, 2024

bjester Apr 2, 2024

Choose a reason for hiding this comment

bjester commented Apr 16, 2024

bjester Apr 17, 2024

Choose a reason for hiding this comment

bjester left a comment

Choose a reason for hiding this comment

akolson commented Feb 28, 2024 •

edited

Loading

marcellamaki commented Mar 18, 2024 •

edited

Loading