Dropshadows on Content header on App layout component

[emtensoriot]

Describe the feature

My team is building an application using Cloudscape for a customer who requires multi-tenancy, so we need to supply color-themed designs. We are using the new variables tool in Figma, but have run into a hurdle with one particular Cloudscape component on Figma.

We are able to correctly attach a Figma variable to the Content header component itself and theme that piece, and our developers are able to apply the color change using the colorBackgroundHomeHeader token.

However, on Figma, the way that card overlap is achieved on the App layout component is through the use of a drop shadow added to the bottom of the Content header. Drop shadows are not currently able to be attached to variables on Figma, though, so the result is a Content header that is 2/3 the correct color for our particular theme, and 1/3 the original Cloudscape grey-900. This is distracting and confusing to both our developers and the stakeholders we share our designs with.

We can of course manually change the color of the drop shadow, and indeed have to do so currently to satisfy our design requirements. However, this rather defeats the purpose and goal of using a design system.

We've noticed that it is possible to achieve the same type of overlay using a -36 space between on the App layer's auto layout. Would it be possible to update the Content header component to use this method to achieve the overlap, instead of the drop shadow? This would mean that the entire Content header could be colored using a variable, which would allow us to more easily apply color themes.

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate requests

[linluiux]

Hey, thanks for reaching out and sorry for replying late. Could you share which Figma library and the version that you are using?

[portia-o]

Hi there, we are currently updating our Figma library and will be providing a different mechanism for this overlap. However, if you could attach a screenshot here, that would be really helpful so that we make sure we solve this issue.

Thanks so much!

[emtensoriot]

Hello, we're using the 1.1 version of Cloudscape Figma that was last updated 7 months ago.

See attached screenshots for current method vs proposed method

[portia-o]

Hi there, thanks for your request, and sorry for the delay in responding. Our new Figma library (launching in Q2 of this year) will use a different mechanism for the header, which I think will address your issue. I'm closing this for now, but feel free to ping us again if the new library doesn't meet your needs.