capsize icon indicating copy to clipboard operation
capsize copied to clipboard

Expose reference to Vanilla Extract CSS Variables

Open mdingena opened this issue 11 months ago • 1 comments

Is it possible to get a reference to the CSS Variables that @capsizecss/vanilla-extract creates?

For example, in my Vanilla Extract project:

.Text__3ydohf1 {
    --fontSize__1d0g9qk0: 17.094px;
    --lineHeight__1d0g9qk1: 18px;
    --capHeightTrim__1d0g9qk2: -0.0745em;
    --baselineTrim__1d0g9qk3: -0.2765em;
}
.capsize_capsizeStyle__1d0g9qk4 {
    font-size: var(--fontSize__1d0g9qk0);
    line-height: var(--lineHeight__1d0g9qk1);
}

I'd like to have responsive icons inside my capsized text and I want to access the generated CSS Variables to set height, margin-top and margin-bottom so that my icons play nicely alongside that capsized text.

Currently I have:

.Icon_sizes_default__dlhcj82 {
    height: 1.25em;
    width: 1.25em;
    margin-top: -6px;
    margin-bottom: -6px;
}

I would love to have:

.Icon_sizes_responsive__some-hash {
    height: var(--lineHeight__1d0g9qk1);
    width: var(--lineHeight__1d0g9qk1);
    margin-top: var(--capHeightTrim__1d0g9qk2);
    margin-bottom: var(--baselineTrim__1d0g9qk3);
}

mdingena avatar Mar 20 '24 03:03 mdingena