Fix some missed updates in theming

[rtibbles]

Summary

• Updates the custom brand color validation to match the new expected color names
• Fixes three color token references that no longer exist (see https://github.com/learningequality/kolibri-design-system/blob/release-v4/lib/styles/colorsMaterial.js for reference)

References

Unreported regressions.

Reviewer guidance

Example of one place this makes a difference:
Before

After

---

Testing checklist

• 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
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• 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

---

🚀 This description was created by Ellipsis for commit e239cbe

Summary:

This PR updates color validation and references across multiple components to align with new color naming conventions in the design system.

Key points:

• Updated color validation in themeSpec.js to new color names.
• Changed color references in DeprecationWarningBanner.vue, DeviceSettingsPage/index.vue, and UnPinnedDevices.vue to align with updated color names.

---

Generated with ❤️ by ellipsis.dev

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.16.2b1.dev0_git.19.g525ef78b.pex
Windows Installer (EXE)	kolibri-0.16.2b1.dev0+git.19.g525ef78b-windows-setup-unsigned.exe
Debian Package	kolibri_0.16.2b1.dev0+git.19.g525ef78b-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.2b1.dev0+git.19.g525ef78b-0.4.2.dmg
Android Package (APK)	kolibri-0.16.2b1.dev0+git.19.g525ef78b-0.1.2-debug.apk
TAR file	kolibri-0.16.2b1.dev0+git.19.g525ef78b.tar.gz
WHL file	kolibri-0.16.2b1.dev0+git.19.g525ef78b-py2.py3-none-any.whl

[MisRob]

Hey @ellipsis, give me a code review

[ellipsis-dev]

OK! Reviewing this PR...

---

Responding to this comment by @MisRob. For more information about Ellipsis, check the documentation.

[ellipsis-dev]

👍 Looks good to me! Reviewed everything up to e239cbe in 1 minute and 36 seconds

More details

• Looked at 88 lines of code in 4 files
• Skipped 0 files when reviewing.
• Skipped posting 4 drafted comments based on config settings.

1. kolibri/core/assets/src/styles/themeSpec.js:11

• Draft comment:
  The updated color names in _brandColorScaleValidator function are consistent with the new expected color names provided in the PR description. This change ensures that the theme validator checks for the correct color names.
• Reason this comment was not posted:
  Confidence changes required: 0%
  The PR description mentions updating the color token references to match the new expected values. The changes in the files reflect updates to the color references in various Vue components. The changes are consistent with the new color tokens provided in the linked color reference files. The PR seems to be focused on updating these references to ensure the UI components use the correct theming colors.

2. kolibri/plugins/device/assets/src/views/DeprecationWarningBanner.vue:6

• Draft comment:
  The update to use $themePalette.yellow.v_200 for the background color aligns with the new theming guidelines. This ensures the deprecation warning banner uses the correct color as per the updated theme.
• Reason this comment was not posted:
  Confidence changes required: 0%
  The change in the DeprecationWarningBanner.vue file updates the background color of the warning banner to use the new color token $themePalette.yellow.v_200. This change is consistent with the PR's intent to update color references according to the new theming guidelines.

3. kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue:484

• Draft comment:
  The update to use $themePalette.grey.v_600 for the information description color aligns with the new theming guidelines. This ensures that the text color in the device settings page uses the correct color as per the updated theme.
• Reason this comment was not posted:
  Confidence changes required: 0%
  The change in the DeviceSettingsPage/index.vue file updates the color of the information description text to use the new color token $themePalette.grey.v_600. This change is consistent with the PR's intent to update color references according to the new theming guidelines.

4. kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue:114

• Draft comment:
  The update to use $themePalette.grey.v_600 for the channel text color aligns with the new theming guidelines. This ensures that the text color in the unpinned devices component uses the correct color as per the updated theme.
• Reason this comment was not posted:
  Confidence changes required: 0%
  The change in the UnPinnedDevices.vue file updates the color of the channel text to use the new color token $themePalette.grey.v_600. This change is consistent with the PR's intent to update color references according to the new theming guidelines.

Workflow ID: wflow_nC361pj1xc4zD5hV

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

⌛ 6 days left in your free trial, upgrade for $20/seat/month or contact us.

[marcellamaki]

looks good to me