[Question] Style resolution outside of the sx prop

[macieklad]

I am currently tinkering with components that include a big chunk of SVGs, and for now, dripsy does not provide SVG primitives. I was thinking about what would be the best option to create styled SVG primitives, but after some thought, I got to a conclusion that mapping sx prop styles to SVG similarly to how it is done in other dripsy components may not be the best idea, as they are normally provided as individual props, and going with sx would make them less portable throughout projects that do not support theme-ui-like syntax.

The problem is simple - I want to use theme variables, like color: 'blue.100' together with SVGs, to make sure that I store variables in a central place. The most promising way to do that was to resolve those values manually, and then pass them to the required components. I could not find any information inside the dripsy docs, so through some experimentation, I have reached the following solution:

import { css } from 'dripsy'
// let us ignore the breakpoint index '0' for now
// resolves to color: '#hex' that is then passed  as value to the svg color prop
css({ color: 'primary-400' }, 0)({ theme: useDripsyTheme().theme }) 

and I wanted to ask whether it is a correct way to do it. There may be a better way to achieve this result, and I would gladly add it to the documentation, together with some kind of hook that would abstract that. I think it is also a good way to reach the styled functionality in case of non-standard component integrations.

Thank you for your help!

[nandorojo]

I'm not too familiar with how SVGs work.

Would it not make the most sense to get the color from the theme hook and pass that to your SVG component's string?

[macieklad]

Yes, I could do that, but I was trying to achieve something that would feel familiar with the dripsy api and also resilient in case of future changes - for example, with this code I can get the value of an aliased property or one from the array syntax. Basically, when something inside dripsy changes, manual resolving may start to fail.

[nandorojo]

I see. Does the css code work? I imagine it would as long as you don’t use responsive arrays.

[macieklad]

Yes, it works perfectly fine 👍