Just Add the Shadow to the Bubble Chat-Bubbles Class

You mean manually adding CSS props right?

Without cross-referencing/inheriting via the existing “shadow-small” class?

yes make it part of the chat-bubbles class

But that’s exactly what I don’t want

that way you will only have 1 class like you asked

No it’s not what I asked for

what I meant is a way to replicate the same functionality as @extend in SASS/SCSS

I explicitly want to cross-reference/inherit the shadow values not manually replicate them

well i guess you could make a --var-shadow for the shadow , and add that shadow: -var to the chat-bubbles class with custom code

that way it will be re used across all classes

not sure how the current shadow utility classes are right now. maybe it is already with a css var?

It’s not yet, the shadows are just the regular classes that come with Relume

ye you are correct

So i would make css vars with the shadow values, apply that with custom code to the shadow classes in the styleguide and then reuse that css var in your chat-bubbles class

thats how I would do it, maybe there is a better 'webflow' ish way, not sure 😄 just started with webflow a month ago

So, then I have to look into how to create variables with CSS code in them via the custom code editor in WF?

Or do you mean with regular variables?
eg. --var-shadow-color: black
eg. --var-shadow-spread: 4px

Sorry, if it’s a dumb question, I have never done that before in WF

ye create the shadows like this:

--var-shadow-small: xxxxx

add it to the global styles embed

then use shadow: var(--shadow-small)

Thank you I will try to do that

No problem, happy to help