Closed fcoveram closed 3 weeks ago
@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:
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?
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 |
---|---|
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.
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.
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.
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
Dark charcoal shades
Dark charcoal opacities
Notifications