Finalize theme token updates #551

LianaHarris360 · 2024-02-19T16:01:23Z

Description

This PR updates the the brand token colors, names, and token mapping within components and mixin references and expands upon the initial token to hex code mapping work done by @marcellamaki

Issue addressed

Addresses #545

Before/after screenshots

Before	After
Colors Documentation Page:

KSwitch: KeenUiSelect, KeenUiSelectOption

KCheckbox

KTabs: KTabsList

KButton: buttonMixin

KDateRange: KDateDay, KDateCalendar

KExternalLink, KRouterLink

KRadioButton

KTextBox

KLinearLoader

KCircularLoader

Changelog

#551
- Description: Updates brand colors, palette colors, and tokens.
  - Breaking changes:
    - Removed palette colors: purple, deeppurple, indigo, brown, cyan, teal, lightgreen, lime, amber, deeporange, bluegrey
    - Removed palette.grey scales: v_300, v_500, v_700, v_900
    - Removed brand and palette scales (except palette.grey): v_50,v_100, v_300, v_500, v_700, v_900
    - Removed content-related tokens: exercise, video, audio, document, html5, slideshow
    - Removed other tokens: appBarFullscreen, appBarFullscreenDark, linkDark
  - Other changes:
    - Some existing palette colors look differently
    - Adds new tokens and palette
    - Global styles: <body> background color changed from grey.v_100 to lighter grey.v_50.
- Products impact: new API, updated API, deleted API
- Addresses: Finalize theme token updates #545
- Components:
- Breaking: yes
- Impacts a11y: no
- Guidance: Address all breaking changes by searching for removed palette colors, scales, and tokens. Study the updated "Colors" KDS documentation page and replace them by relevant colors/scales/tokens. Also search for any hardcoded hex,rgb(a),hsl(a), or named colors (such as 'white') and theme them instead. Visually check places that use existing palette and adjust scale (you may need to increase it as many colors are lighter). You may also see if there are any minor useful updates to in regards to new tokens (e.g. replacing a palette color with a new token that describes function of the color better). If you use generateGlobalStyles that generates background color for <body> and use grey.v_100 in some components to match the background color, you may need to update it to grey.v_50.

(optional) Implementation notes

This line was removed from the KDS Colors Documentation Page because the mentioned colors were removed:

The Kolibri Design System has what we call "Kolibri Purple" as its primary and "Kolibri Teal" as its secondary, available across the full brightness scale:
KContentRenderer was removed from the table of contents because it displayed an error page

Testing checklist

Contributor has fully tested the PR manually
If there are any front-end changes, before/after screenshots are included
The change is described in the changelog section above

Reviewer guidance

Is the code clean and well-commented?
Are all UI components LTR and RTL compliant (if applicable)?

After review

The changelog item has been pasted to the CHANGELOG.md

…onents

MisRob · 2024-02-19T18:08:14Z

Thanks @LianaHarris360.

Redirecting here the conversation about the changelog from the closed PR:

Thank you, new updates make sense. I see one place that could deserve more detail in my view

When you say

new content-related token labels have been introduced and existing ones have been renamed

Could you list new labels and before/after of renamed token labels here? So we can find them in the products easily and rename them without the need to dig into this PR's diff. These are changes in public API and we will be specific in the release notes (this is different from just tweaking an existing color which we don't need to document in such detail.

I was planning to update the changelog with more info but wasn't too sure about the level of detail to include

Generally, you could just imagine that you're someone who's not familiar with the code diff in detail and tried to introduce new theming to Kolibri/Studio/KDP. Anything that would be useful for you to know will serve as good guidance :)

Thank you. This will be helpful later on as we are updating Kolibri, Studio, and KDP.

MisRob · 2024-02-20T13:05:26Z

FYI I'm gradually reviewing this as I'm working on rebranding Kolibri, so it may take a while to post final feedback, but it's in progress.

marcellamaki

This looks great, @LianaHarris360, thank you so much for the quick and thorough work on this.

I spoke briefly with @MisRob and I think for the rest of the week, perhaps we can keep this open in case there are any changes to be made here that are discovered in the updates to Kolibri and Studio, and they can just be made directly here, so I am commenting rather than approving. Managing this will take some working cooperatively and communication, but I think we can do it. :)

Overall though, great start. For those who will be doing the updates in our products, I think this is ready to work from at least to do some next steps. Please let me know if you have any questions, either here or in the slack thread in #product.

MisRob · 2024-02-21T09:17:48Z

Hi, I did first review and overall great work @marcellamaki @LianaHarris360, thank you. See notes below from the review and also my parallel work of using it in Kolibri. It's work in progress so it's possible that I will post some more over time, but I think this could be all when it comes to high-level:

(1) I located more breaking changes that are not in the changelog yet. @LianaHarris360 I needed to note them down for myself when upgrading Kolibri, so I hope it's fine if I just updated the changelog directly rather than referencing it.

(2) One high-level issue that's blocking some Kolibri work is removal of yellow color from the full palette. The only way how to use yellow now is via brand.secondary. That's not suitable in all cases because for example for warning yellow icon, we don't want to use brand.secondary. It's not only about color, but also context. Practically, in another theme that would use green as secondary color, the warning icon would end up green, which is not desired. brand.secondary need to be used only in places that have something to do with brand (e.g. buttons and navbars). In another places, we will need palette.yellow even though it's the same color as brand.secondary under the hood. I'd suggest we return yellow to the palette.

(3) Relatedly to (2), I think that except of tokens that are related to brand (such as tokens.primary, tokens.primaryDark, ...), tokens need to be created via palette rather than brand colors. For example, tokens.practice need to be created via some palette blue color rather than brand.

Here, I only pointed to a few places I looked into in more detail, but I think there are some more. @LianaHarris360 could you please revisit it as a whole and make sure that there's distinction between blue and yellow for brand and palette?

MisRob · 2024-02-21T10:35:27Z

Also in regards to (2), the yellow we need in the palette is this one. I think that's the same yellow as the one used for brand secondary, but please double-check

https://www.figma.com/file/p7aOP2MBv0SED1uhaPwqEd/Product-rebrand?node-id=766%3A13416&mode=dev

Note that Figma has token.warning for this yellow. No problem to use palette.yellow as soon as it's in the palette if warning token is not in scope of this work, but it'd be good to follow up to map all figma tokens at some point.

Here's one of the relevant Kolibri places https://github.com/learningequality/kolibri/blob/release-v0.16.x/kolibri/plugins/device/assets/src/views/DeprecationWarningBanner.vue#L10-L14

MisRob · 2024-02-21T12:40:31Z

lib/styles/colorsDefault.js

+  primaryDark: 'brand.primary.v_1100',
+  secondary: 'brand.secondary.v_1000',
+  secondaryDark: 'brand.secondary.v_1100',
+  appBar: 'brand.secondary.v_800',


Could we please document all tokens on Colors page such as appBar and possibly others that are missing? I can't find it at https://deploy-preview-551--kolibri-design-system.netlify.app/colors/# It seems some of them were forgotten before, it'd be helpful to include them now as we're upgrading though.

MisRob · 2024-02-21T13:12:26Z

I'd like to ask for updating

kolibri-design-system/lib/styles/generateGlobalStyles.js

Line 31 in bfedccc

backgroundColor: themePalette().grey.v_100,

to grey.v_50.

This will change the darker gray area in the bottom half in Kolibri to match the new lighter upper part.

LianaHarris360 · 2024-02-21T15:07:53Z

If it's easier for you to update the changelog directly, I don't mind at all! I will go over the changes, document the missing colors, and update this PR based on your review notes.

MisRob · 2024-02-21T15:45:57Z

Thank you, I updated it in the description. Yes, it would be nice to keep it up to date as we're doing more changes here.

MisRob · 2024-02-22T07:38:00Z

New changes are looking fine, thank you @LianaHarris360

MisRob

Thank you @LianaHarris360, great work. The newest additions are looking fine to me and I think we resolved all outstanding issues. I will merge in preparation for the release. If there's some other work needed, we can have a new PR.

marcellamaki and others added 7 commits February 12, 2024 16:14

init theming updates

b0700e1

Additional theme updates/fixes, and beginning of component color udpates

eb34119

Update brand default colors and finalize token colors across KDS comp…

7066760

…onents

Theme fixes, component documentation and changelog updates

591308f

Update changelog file

bb4e662

Remove changelog update until after complete review

15d5175

Remove testing change from buttons documentation page

7d773a7

LianaHarris360 requested review from nucleogenesis, akolson, MisRob and marcellamaki February 19, 2024 17:32

LianaHarris360 added this to the Theming support milestone Feb 19, 2024

LianaHarris360 linked an issue Feb 19, 2024 that may be closed by this pull request

Finalize theme token updates #545

Closed

1 task

LianaHarris360 marked this pull request as ready for review February 19, 2024 17:34

MisRob requested a review from rtibbles February 20, 2024 13:05

MisRob assigned rtibbles, MisRob and marcellamaki Feb 20, 2024

MisRob removed the request for review from rtibbles February 20, 2024 13:08

MisRob assigned akolson and unassigned rtibbles Feb 20, 2024

marcellamaki reviewed Feb 20, 2024

View reviewed changes

MisRob mentioned this pull request Feb 21, 2024

Audit and fix theme token updates against KDS learningequality/kolibri#11911

Merged

15 tasks

MisRob reviewed Feb 21, 2024

View reviewed changes

Update colors doc page, add yellow and blue to color palette

9450389

LianaHarris360 added 2 commits February 26, 2024 10:34

Update textbox fill and label color

f4f646d

Add updates to changelog

ad4984d

This was referenced Feb 27, 2024

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

Closed

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

Merged

Modify UI input colors to align with theme updates

7cc8a28

MisRob approved these changes Mar 4, 2024

View reviewed changes

MisRob merged commit fa487bd into learningequality:develop Mar 4, 2024
8 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Finalize theme token updates #551

Finalize theme token updates #551

LianaHarris360 commented Feb 19, 2024 •

edited by MisRob

Loading

MisRob commented Feb 19, 2024

MisRob commented Feb 20, 2024 •

edited

Loading

marcellamaki left a comment

MisRob commented Feb 21, 2024 •

edited

Loading

MisRob commented Feb 21, 2024 •

edited

Loading

MisRob Feb 21, 2024

MisRob commented Feb 21, 2024

LianaHarris360 commented Feb 21, 2024

MisRob commented Feb 21, 2024

MisRob commented Feb 22, 2024

MisRob left a comment

Finalize theme token updates #551

Finalize theme token updates #551

Conversation

LianaHarris360 commented Feb 19, 2024 • edited by MisRob Loading

Description

Issue addressed

Before/after screenshots

Changelog

(optional) Implementation notes

Testing checklist

Reviewer guidance

After review

MisRob commented Feb 19, 2024

MisRob commented Feb 20, 2024 • edited Loading

marcellamaki left a comment

Choose a reason for hiding this comment

MisRob commented Feb 21, 2024 • edited Loading

MisRob commented Feb 21, 2024 • edited Loading

MisRob Feb 21, 2024

Choose a reason for hiding this comment

MisRob commented Feb 21, 2024

LianaHarris360 commented Feb 21, 2024

MisRob commented Feb 21, 2024

MisRob commented Feb 22, 2024

MisRob left a comment

Choose a reason for hiding this comment

LianaHarris360 commented Feb 19, 2024 •

edited by MisRob

Loading

MisRob commented Feb 20, 2024 •

edited

Loading

MisRob commented Feb 21, 2024 •

edited

Loading

MisRob commented Feb 21, 2024 •

edited

Loading