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

Current and new color system #4268

Closed
Tracked by #3592
fcoveram opened this issue May 6, 2024 · 3 comments · Fixed by #4690
Closed
Tracked by #3592

Current and new color system #4268

fcoveram opened this issue May 6, 2024 · 3 comments · Fixed by #4690
Assignees
Labels
design: ready Issue with a mockup ready for implementation ✨ goal: improvement Improvement to an existing user-facing feature 🟨 priority: medium Not blocking but should be addressed soon 🧱 stack: frontend Related to the Nuxt frontend

Comments

@fcoveram
Copy link
Contributor

fcoveram commented May 6, 2024

Part of #3592

Description

The new color system introduced in #3959 replaces all current colors and introduces new ones in a lightness scale ranging from 1 to 13. In this ticket, you can find the hexcode of all colors and a table showing which color from the new system replace the current ones.

The color semantic documentation will be address in a different ticket.

New colors

In this link you can find the whole set.

:root {
	black: #000;
	white: #fff;
	yellow: #fde034;
	pink: #ad1f85;
	gray: #232323;
	gray-1: #f7f7f7;
	gray-2: #ededed;
	gray-3: #dfdfdf;
	gray-4: #c5c5c5;
	gray-5: #a9a9a9;
	gray-6: #929292;
	gray-7: #7d7d7d;
	gray-8: #676767;
	gray-9: #565656;
	gray-10: #474747;
	gray-11: #363636;
	gray-12: #232323;
	gray-13: #0d0d0d;
	pink-1: #fcf4fa;
	pink-2: #f9e7f3;
	pink-3: #f9d2ec;
	pink-4: #efadd9;
	pink-5: #eb7dc8;
	pink-6: #eb3bbf;
	pink-7: #d028a3;
	pink-8: #ad1f85;
	pink-9: #911a71;
	pink-10: #79165d;
	pink-11: #5e1241;
	pink-12: #3e0c2a;
	pink-13: #1b0410;
	yellow-1: #fff9d4;
	yellow-2: #feefa0;
	yellow-3: #fde034;
	yellow-4: #e5c428;
	yellow-5: #c7a714;
	yellow-6: #ad9011;
	yellow-7: #977a17;
	yellow-8: #81620c;
	yellow-9: #6c5113;
	yellow-10: #5e4012;
	yellow-11: #4a300c;
	yellow-12: #331d05;
	yellow-13: #180801;
	gray-1-10: #f7f7f71a;
	gray-1-20: #f7f7f733;
	gray-1-30: #f7f7f74d;
	gray-1-40: #f7f7f766;
	gray-1-50: #f7f7f780;
	gray-1-60: #f7f7f799;
	gray-1-70: #f7f7f7b2;
	gray-1-80: #f7f7f7cc;
	gray-1-90: #f7f7f7e5;
	gray-12-10: #2323231a;
	gray-12-20: #23232333;
	gray-12-30: #2323234d;
	gray-12-40: #23232366;
	gray-12-50: #23232380;
	gray-12-60: #23232399;
	gray-12-70: #232323b2;
	gray-12-80: #232323cc;
	gray-12-90: #232323e5;
	gray-13-0: #0d0d0d00;
	white-0: #fff0;
	info-1: #f5f7fb;
	info-2: #e6edfc;
	info-3: #d3dffb;
	info-4: #aec5f7;
	info-5: #89a7ef;
	info-6: #678ded;
	info-7: #4571f2;
	info-8: #274fed;
	info-9: #1935dd;
	info-10: #1835ab;
	info-11: #192f73;
	info-12: #122047;
	info-13: #060c1c;
	warning-1: #fcf6f0;
	warning-2: #faead9;
	warning-3: #f9d9b4;
	warning-4: #f1ba77;
	warning-5: #e2972b;
	warning-6: #c7810a;
	warning-7: #ac6e00;
	warning-8: #8d5b0d;
	warning-9: #764c0b;
	warning-10: #643e00;
	warning-11: #4b2f05;
	warning-12: #341e00;
	warning-13: #160a00;
	success-1: #f1fbef;
	success-2: #dff5db;
	success-3: #caeac1;
	success-4: #a1d695;
	success-5: #6cc258;
	success-6: #47ac29;
	success-7: #2f9600;
	success-8: #257c00;
	success-9: #1d6800;
	success-10: #175600;
	success-11: #104200;
	success-12: #072c00;
	success-13: #021200;
	error-1: #fdf5f3;
	error-2: #fee7e4;
	error-3: #f9d6d0;
	error-4: #f5b2a7;
	error-5: #f78273;
	error-6: #f45344;
	error-7: #dd362a;
	error-8: #ba251c;
	error-9: #9b221a;
	error-10: #801e16;
	error-11: #631610;
	error-12: #420e09;
	error-13: #1e0302;
}

Colors replacement

Beyond the implementation process, it might be important to document which color of the current palette has an equivalent version in the new one.

Below you can find the corresponding version all brand and UI colors referred in the tailwind config file and the viewer.

Brand

Current New
Yellow #FFE033 Yellow 3 #FDE034
Pink #C52B9B Pink 8 #AD1F85
Dark Charcoal #30272E Gray 12 #232323

Dark charcoal shades

Current New
Dark Charcoal 6 #F3F2F2 Gray 1 #F7F7F7
Dark Charcoal 10 #EAE9EA Gray 2 #EDEDED
Dark Charcoal 20 #D6D4D5 Gray 3 #DFDFDF
Dark Charcoal 30 #C1BEC0 Gray 4 #C5C5C5
Dark Charcoal 40 #ACA9AB Gray 5 #A9A9A9
Dark Charcoal 50 #989397 Gray 6 #929292
Dark Charcoal 60 #837D82 Gray 7 #7E7E7E
Dark Charcoal 70 #6E686D Gray 8 #676767
Gray 9 #565656
Dark Charcoal 80 #595258 Gray 10 #474747
Dark Charcoal 90 #453D43 Gray 11 #363636
Dark Charcoal #30272E Gray 12 #232323
Gray 13 #0D0D0D

Dark charcoal opacities

Current New
Dark Charcoal 10% Gray 12 10%
Dark Charcoal 20% Gray 12 20%
Dark Charcoal 30% Gray 12 30%
Dark Charcoal 40% Gray 12 40%
Dark Charcoal 50% Gray 12 50%
Dark Charcoal 60% Gray 12 60%
Dark Charcoal 70% Gray 12 70%
Dark Charcoal 80% Gray 12 80%
Dark Charcoal 90% Gray 12 90%

Notifications

Current New
Info Info 8
Info soft Info 2
Warning Warning 8
Warning soft Warning 2
Success Success 8
Success soft Success 2
Error Error 8
Error soft Error 2
@fcoveram fcoveram added 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work ✨ goal: improvement Improvement to an existing user-facing feature 🧱 stack: frontend Related to the Nuxt frontend design: ready Issue with a mockup ready for implementation labels May 6, 2024
This was referenced May 6, 2024
@krysal krysal added 🟨 priority: medium Not blocking but should be addressed soon and removed 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work labels May 6, 2024
@krysal krysal added this to the Dark Mode milestone May 6, 2024
@zackkrida
Copy link
Member

zackkrida commented May 9, 2024

@fcoveram I was expecting that we were switching to semantic names for all of the colors, so yellow would become complementary and things like that, as you implied in this graphic:

Light and dark colors

Is that still the plan?

Also, I am not completely sure what the Current and New columns mean in this issue. Are, as part of dark mode, the old light mode colors changing slightly, and this issue is outlining those changes?

Edit: I suppose this issue is just introducing all new colors. The missing piece we need is to add semantic names to show which color becomes which in light mode. For example, I think it might be like this:

Semantic Name Light Mode color Dark Mode Color
Complementary Yellow Pink 8 (New)
Primary Pink Yellow 3 (New)

Could you add that information to this issue, @fcoveram?

@fcoveram
Copy link
Contributor Author

Is that still the plan?
…I am not completely sure what the Current and New columns mean in this issue. Are, as part of dark mode, the old light mode colors changing slightly, and this issue is outlining those changes?

Sorry! The semantic name is still the plan. I revisited the initial comment, and certainly, I did not explain myself correctly. Sorry for the confusion.


In the Design Library, there are two variable collections related to this project: Colors and Alias. Here is what it’s visible in the edit mode but not in dev.

Colors Alias
"Colors" variable collection in Openverse' Design Library "Alias" variable collection in Openverse' Design Library

The tables above show the new hex code of current colors, but not the new ones added for this project. Therefore, it's only about the “Colors” variable collection.

…The missing piece we need is to add semantic names to show which color becomes which in light mode…
Could you add that information to this issue, @fcoveram?

I assumed we would address it once starting the implementation as Figma’s dev mode doesn’t have a view for variables. That’s why I shared two links describing (hopefully) how to integrate the variables with code work on the implementation plan PR.

The Alias list is not very long, but I envision there are smarter ways of integrating what’s there with the code work. Nonetheless, I can create another ticket for the Alias and the semantic use of colors.

@fcoveram
Copy link
Contributor Author

I modified the initial comment by including all colors of the new system @zackkrida. I also linked the tool used for the color set that might be useful for the code work.

Let me know if that works. I will create a new ticket for the color semantics.

@fcoveram fcoveram changed the title Current and new color systems Current and new color system May 14, 2024
@zackkrida zackkrida self-assigned this Aug 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design: ready Issue with a mockup ready for implementation ✨ goal: improvement Improvement to an existing user-facing feature 🟨 priority: medium Not blocking but should be addressed soon 🧱 stack: frontend Related to the Nuxt frontend
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

3 participants