Open mdingena opened 3 months ago
I've gone back and forth on this one.
The reason we dont expose them, is any change to these values externally will have an impact on the trimming, which feels undesirable.
We do have the precomputeValues
utility that allows you to resolve the values for your own use, and then pass these into createTextStyle
, so you effectively middleman the process without updating the values. Granted its still exposed to passing incorrect values in, but given this is at build-time maybe its less likely to get wrong as opposed to changing a CSS var at run-time?
Here is an example:
// text.css.ts
import { precomputeValues } from '@capsizecss/core';
import arialMetrics from '@capsizecss/metrics/arial';
import { createTextStyle } from '@capsizecss/vanilla-extract';
import { style } from '@vanilla-extract/css';
const capsizeValues = precomputeValues({
fontSize: 16,
leading: 24,
fontMetrics: arialMetrics,
});
export const text = createTextStyle(capsizeValues);
export const icon = style({
height: capsizeValues.lineHeight,
width: capsizeValues.lineHeight,
marginTop: capsizeValues.capHeightTrim,
marginBottom: capsizeValues.baselineTrim
});
Is it possible to get a reference to the CSS Variables that
@capsizecss/vanilla-extract
creates?For example, in my Vanilla Extract project:
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
andmargin-bottom
so that my icons play nicely alongside that capsized text.Currently I have:
I would love to have: