android icon indicating copy to clipboard operation
android copied to clipboard

Migrate to material color system

Open abelgardep opened this issue 2 years ago • 3 comments

Is your feature request related to a problem? Please describe.

At the moment, it is not easy to handle branded colors. Each time we add a new screen or modify a current one, we need to check if that color is brandable or not. Sometimes we need to reuse a current color in several places that are not related at all. There is some duplicity in the code for example to assign a textColor:

  • login_connection_text_color
  • login_credentials_text_color

At the moment it is a little messy because we need to check which colors are used on each view. It makes it pretty hard to determine which colors the branded version will have.

Describe the solution you'd like Updating the app to the material design color system would make brand-ability sooooo much easier. We would need to update just the palette with the custom colors, and the whole app will be updated with the custom palette.

Additional context

This is how a material palette looks like. Branded versions will need to create their own palette, and the app will use that palette to show every single screen. We won't need to add a new color when a new screen is created(https://github.com/owncloud/android/issues/3327#issuecomment-905705438) since it will use the palette.

Firstly, we choose the main color and a secondary, then the backgrounds and error colors, and finally, we select the text colors that will be printed over the main, secondary, and background. This way, we assure that text color is properly shown over the background on any screen.

material palette

TASKS

  • [ ] Research (if needed)
  • [ ] Create branch feature/feature_name
  • [ ] Development tasks
    • [ ] Implement whatever
    • [ ] ...
  • [ ] Code review and apply changes requested
  • [ ] Design test plan
  • [ ] QA
  • [ ] Merge branch feature/feature_name into master

PR

  • App
  • Library (if needed)

abelgardep avatar Sep 06 '21 09:09 abelgardep

This is a fancy online tool to play: https://material.io/resources/color/

michaelstingl avatar Sep 21 '21 10:09 michaelstingl

For comparison, this is the color system from the the ownCloud Design System (ODS): https://owncloud.design/#/Design%20Tokens

michaelstingl avatar Sep 21 '21 10:09 michaelstingl

First task in android side: reduce the number of colours to a palette of 10-12 to be used everywhere. So, by selecting a scoped number of colours, everyone will set up the app.

It will need some oB rewrite afterwards.

jesmrec avatar Sep 30 '21 12:09 jesmrec