open-olive / loop-development-kit

The JavaScript/TypeScript Loop Development Kit for Olive Helps.
MIT License
20 stars 18 forks source link

Figma designs not matching actual results #466

Open kyuhas opened 2 years ago

kyuhas commented 2 years ago

Hi! As I have been referencing the Olive Helps Figma designs, I noticed that they do not accurately reflect the available options in the actual LDK. For example, the Figma will show this light purple color (see image below):

Screen Shot 2021-12-13 at 1 04 58 PM

However, the actual purple color is much darker (see image below):

Screen Shot 2021-12-13 at 1 05 53 PM

I have also noticed similar inconsistencies with some other components, but I can't remember them off the top of my head. Is there any way that more background color options could be added to the LDK to accurately match the Figma?

MichaelOliveMcCarrick commented 2 years ago

Hey! Thanks for bringing this to our attention, we've had some discussion internally around custom colors/themeing, but nothing concrete yet. I'll go ahead and get a card in for our UI team to fix this. What component is this on specifically?

kyuhas commented 2 years ago

@MichaelOliveMcCarrick this was on the message component.

MichaelOliveMcCarrick commented 2 years ago

Thank you! I've created HELPS-2653 to track the color issue with the component. If you run into more inconsistencies, throw them our way and we can get them tracked!

AmberReedUX commented 2 years ago

@kyuhas Can I ask the name of the Figma file you are referencing?

kyuhas commented 2 years ago

@AmberReedUX The file with all the available colors that I was referencing (and that our design team references for our internal Figma designs) is called "Olive Helps - External Design System". In the Colors section of that Figma, it shows the color called PMS 2085. We would like to use this color as a background color for a message, but the only available option somewhat close to that color is the darker purple/blue in the screenshot above. Is it possible to add that light purple color (hex code #E5D0FF as an option)?

AmberReedUX commented 2 years ago

Okay I see what you're saying. At the moment our Message component background isn't fully custom colorable in the LDK yet. Those colors in the document are simply our Brand colors. Components that are colorable currently are Icons and Section Title background. And the Message background uses the red, green, or default #FFECAA treatment (Which I need to also document in the Figma. That dark purplish blue was hardcoded for another use case).

As Michael stated we are currently discussing how we plan to allow/expand custom colorable components on different UI elements.

Thanks for bringing this to our/my attention, I'll be sure to make the notes clearer in the Figma. And also we'll be sure to keep you updated on the future enhancements.

kyuhas commented 2 years ago

Sounds good, I appreciate your help with this! Also just a clarifying question: for the section title background, it looks like the only available colors (according to the LDK code) are grey/white. And then for the icon, the only available colors are black, grey, white, and the whisper strip color. Is that correct?

AmberReedUX commented 2 years ago

Yes that is correct

kyuhas commented 2 years ago

great, thank you! I appreciate it!