search

argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.
https://open-props.style
MIT License
4.52k stars 184 forks source link

Add constructible stylesheet as an output format #466

Open calebdwilliams opened 5 months ago

calebdwilliams commented 5 months ago

As a developer who often works with custom elements and shadow DOM, I would love to have access to open-props using constructible stylesheets as an output target. I'd be happy to contribute this feature if there's interest but limited bandwidth.

argyleink commented 4 months ago

Open Props offers props on :host, is that what you need? otherwise, cSS are a loading strategy and composability feature, the props don't know or care about these details?

calebdwilliams commented 4 months ago

Sorry, I should have been more clear. I’m just looking for the utility classes that are available like buttons, shapes and layouts. Anything where classes are applied so I can use them in shadow roots.

argyleink commented 4 months ago

i leave classes up to user space.. the normalize and button stylesheets target tags by name and don't offer a class.

Open Props v2 has a beta utility file you could try out tho? works like this:

<div class="MyComponent grid surface rounded shadow padding"></div>
.MyComponent {
  --_padding: var(--size-5);
}

here's a playground where i'm toying around with the thoughts and code