Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update colors #5033

Merged
merged 12 commits into from
Aug 26, 2024
Merged

Update colors #5033

merged 12 commits into from
Aug 26, 2024

Conversation

magicznyleszek
Copy link
Member

@magicznyleszek magicznyleszek commented Jul 29, 2024

Checklist

  1. If you've added code that should be tested, add tests
  2. If you've changed APIs, update (or create!) the documentation
  3. Ensure the tests pass
  4. Make sure that your code lints and that you've followed our coding style
  5. Write a title and, if necessary, a description of your work suitable for publishing in our release notes
  6. Mention any related issues in this repository (as #ISSUE) and in other repositories (as kobotoolbox/other#ISSUE)
  7. Open an issue in the docs if there are UI/UX changes

Description

We've updated most of the colors in our palette to more accessible shades, and added few new colors in preparation for upcoming improvements.

Notes

Most of the colors were slightly updated. We had a major change in reds:

  • kobo-red was renamed to kobo-mid-red
  • kobo-dark-red was renamed to kobo-red (this is the part that might be confusing)
  • we have new kobo-dark-red that is slightly darker

Another big change was with grays:

  • All kobo-gray-<lightness number> were renamed to kobo-neutral-<counter>, e.g. kobo-gray-98 is now kobo-neutral-100
  • We use -100, -200, -300, …, -900 as neutral color "types". This allows us to have flexibility of adding -250 in future if needed
  • The shades of neutrals were updated too

Other changes here:

  • Migrated Button dark-red to red (this is kinda undoing recent change, but previous change Update red Buttons to use dark-red for accessibility #4993 was changing the color to darker shade, this one keeps the color, but the name is different)
  • Migrated Icon component from red to mid-red
  • Removed duplicated lines of code from react-tagsinput.scss file (I'm pretty sure I already did that)
  • Updated the reds being used in various places to ones that make sense. Some were left as kobo-red (so will be darker than previously), and some were updated to be kobo-mid-red (so will appear as if nothing changed)

Related issues

Followup to #4993
Made kobotoolbox/docs#372

…d-red,

remove duplicated react-tagsinput.scss lines, update all the code to match colors after update
@magicznyleszek magicznyleszek marked this pull request as ready for review July 29, 2024 16:02
# Conflicts:
#	jsapp/scss/libs/react-tagsinput.scss
Copy link
Member

@duvld duvld left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did a quick look around the UI and it looks like your find and replace got all of them :) if someone spots a missed spot we can probably do individual touch ups

jsapp/scss/colors.scss Show resolved Hide resolved
jsapp/scss/colors.scss Show resolved Hide resolved
@magicznyleszek magicznyleszek merged commit e6d8734 into beta Aug 26, 2024
3 of 4 checks passed
@magicznyleszek magicznyleszek deleted the update-colors branch August 26, 2024 14:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants