Perspective Themes not propagating to nested elements

Got a little bug that’s driving me crazy and after looking at the theme pages and inspecting examples in the browser I honestly don’t know what is wrong.

I’m under the assumption that a theme allows for pretty much drag drop usage of components and containers where they are automatically styled with the CSS in the theme. Nesting a container does things like provides automatic padding and changes the background by 10% each level you nest it. Or it should, right? Drag a container, nest 3 more, and the last container should have a background of like 60% grey, right?

I’ve read the theme docs over and over, I’ve watched the videos, I used to hand code strict HTML/CSS for a living about 10 years back so this isn’t an alien language to me, and it just doesn’t “work”. Dragging a component like a menu tree comes styled with the appropriate theme but the backgrounds of the containers, fonts, etc. are not changing. Is there a param I need to add? Something at the session level missing?

I need to get started on a project and I’m at an impasse where the only way I’ve been able to effect change is to provide style classes which is a whole bunch of work that I’m pretty sure I don’t have to do. What am I doing wrong? Do I have to make a custom theme to effect this nested change? Pretty confused.

EDIT: it seems the themes are a lot more bare bones than I thought. Just going ahead and coding a custom one.

First off, welcome to the community!

Themes do not apply automatic padding to nested containers, because that is not their intended purpose. Their purpose is to declare and apply universal colors and fonts to elements of Perspective palette components and elements of the Designer design experience. They are simply a series of stylesheets that are combined and applied to elements early in the cascade.

I imagine that what you’re encountering has to do with the psc- prefix that is added on our end to all classnames declared in a component’s style property. This is done because 1) the declared classnames are expected to reference a Perspective Style Class, and 2) to prevent classname collisions or overrides with classnames declared and used internally. So, if you’re trying to bypass using Perspective Style Classes all together, which I would not recommend doing, you’ll need to add the psc- prefix yourself.

Hopefully this helps answers your question.

Thanks, yeah I don’t want to go too off grid so I’m using style classes so the next person isn’t pulling out their hair. Honestly, the semi-wysiwyg thing is pretty cumbersome for folks that are experienced in writing this stuff by hand. I was hoping an export would just throw out a single json file that I could manipulate easier, but it doesn’t. It would be a really powerful option though - export>single json file/actual CSS files nested by category folder.

I’ve had to go off the “beaten path” after all. The SVG support in perspective has much to be desired… The whole stripping out my classes etc on import and embed… It’s adding hours to development.