capsize
capsize copied to clipboard
Expose reference to Vanilla Extract CSS Variables
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);
}