search

youseedk / dna

CSS framework for yousee.dk
ISC License
6 stars 6 forks source link

New colors for DNA #296

Open OVA-robin opened 3 years ago

OVA-robin commented 3 years ago

We have made some color changes for yousee.dk In this figma link you can see the old colors and the new. https://www.figma.com/file/21BhM7ixlKsfwr2RUUHKdL/Design-System-Web?node-id=2%3A8304 All the names and color code is there. If anything is needed please contact me

grandorf commented 3 years ago

Just a note. We can't just remove the current colors. We can add new colors to DNA and all DNA components but there are custom code across Nuuday that has dependencies to our bcurrent colors.

The solution is to add a new Colors 2021 page and leave the current colors for some time. Then after some months we can remove all the old colors in a new release which will be a breaking change. This means we are forcing everybody to look at colors if they want to move to latest version or their site will break.

OVA-robin commented 3 years ago

OK. I understand that. The new colors to be added are: the Secondary colors and the Label colors.

OVA-robin commented 3 years ago

Can you rename colors? Digital Green should now be called Vibrant Green Digital Dark Grass should now be called Accessible Green

havgry commented 3 years ago

@grandorf I think it would be better to update the existing page with the new colors, and rename the old page to "Old colors (deprecated)" page to make it absolutely clear which set of colors to use going forward :) In terms of variable names, I'm not sure how to proceed without introducing something like $ys-color21-error-red... Oh, lawd.

The other option is to only make one breaking update, where all old colors are renamed to e.g. $ys-color-error-red-deprecated. As a developer you could then either update to the new colors where available and fall back to the old colors where needed. Or you could replace all variable names with the deprecated ones and not make a single visible change - for now.

grandorf commented 3 years ago

@havgry I'm not a fan of renaming existing colors with the word deprecated as suffix. The reason is if we force everybody to make changes anyway then we should use the opportunity to let them use the new colors and not help them in getting in to technical debt. You have a good point about renaming the current page to "old" or "deprecated". So the new CVI will be the default one! The reason why we need both pages is when we force everybody to update. Then it makes really good sense to have them as documentation and as an overview when you need to change a color to a new one.

havgry commented 3 years ago

There will be the same amount of technical debt (if you choose not to update everything in one go) with either approach - you'll be using outdated colors whichever way you name it. For me, it's more important to choose good names that work going forward. What's your suggestion in terms of new variable names for let's say the error color?

With the -deprecated suffix at least it's easy to search and replace on all existing variables when updating to the new version of DNA. It doesn't have to be complicated. Something like this would probably do in most cases I can think of:

search replace

OVA-robin commented 3 years ago

You decide if we change the names or not. :-) Do you need anything more from me?