skeletonlabs
Divider token doesn't apply to children
Current Behavior
This doesn't work, the dividers are set to white:
<div class="divide-primary-400-500-token flex divide-x-2">
<div>a</div>
<div>b</div>
<div>c</div>
</div>
Expected Behavior
Expected dividers to be set to the correct colors like when specifying the class to each child elements:
<div class=" flex divide-x-2">
<div class="divide-primary-400-500-token">a</div>
<div class="divide-primary-400-500-token">b</div>
<div class="divide-primary-400-500-token">c</div>
</div>
Steps To Reproduce
No response
Link to Reproduction / Stackblitz
No response
More Information
Works if not using design token
<div class="flex divide-x-2 divide-primary-500">
<div>a</div>
<div>b</div>
<div>c</div>
</div>
Versions @sveltejs/[email protected] [email protected] @skeletonlabs/[email protected] @skeletonlabs/[email protected]
Hey @ixora-0. This is somewhat a documentation mistake. The only implementation of Dividers on our end is: https://github.com/skeletonlabs/skeleton/blob/master/packages/plugin/src/styles/components/dividers.css
But yet the docs show this should cover all color pairings as well: https://www.skeleton.dev/docs/tokens#divide
What I'd suggest doing in the meantime is manually setting the pairings for light/dark mode like so:
<div class="divide-primary-400 dark:divide-primary-500">
We'll keep this ticket open and try to address this in two ways:
- In the short term, we'll update the docs to better represent the utility class available
- In the upcoming Skeleton v3 updates we'll review the implementation of divider styles
I'll update the labels accordingly.
no worries! what would you like me to edit? maybe put in a warning that it doesn't work and the workaround?