Using Capsize with theme contract

[m0ngr31]

Facing an issue where we're trying to use Capsize metrics inside of a theme contract. Here's what our basic setup looks like:

import {theme} from '@/styles/themes/themeContract.css';

import FontRegular from './fonts/Font-Regular.woff2';
import FontMedium from './fonts/Font-Medium.woff2';
import FontSemiBold from './fonts/Font-SemiBold.woff2';
import FontMono from './fonts/FontMono.woff2';

/*------------------------------------*\
  CAPSIZE
\*------------------------------------*/

const fontRegularMetrics = {
  ascent: 1984,
  capHeight: 1490,
  descent: -494,
  lineGap: 30,
  unitsPerEm: 2048,
};

const fontMediumMetrics = {
  ascent: 1984,
  capHeight: 1490,
  descent: -494,
  lineGap: 0,
  unitsPerEm: 2048,
};

const fontSemiBoldMetrics = {
  ascent: 1948,
  capHeight: 1490,
  descent: -494,
  lineGap: 0,
  unitsPerEm: 2048,
};

const fontMonoMetrics = {
  ascent: 900,
  capHeight: 700,
  descent: -200,
  lineGap: 0,
  unitsPerEm: 1000,
};

/*------------------------------------*\
  FONTS
\*------------------------------------*/

const fontRegular = fontFace({
  src: `url('${FontRegular}') format('woff2')`,
});

const fontMedium = fontFace({
  src: `url('${FontMedium}') format('woff2')`,
});

const fontSemiBold = fontFace({
  src: `url('${FontSemiBold}') format('woff2')`,
});

const fontMono = fontFace({
  src: `url('${FontMono}') format('woff2')`,
});

/*------------------------------------*\
  THEME DEFINITIONS
\*------------------------------------*/

export const myTheme = createTheme(theme, {
  ...
  fonts: {
    mono: fontMono,
    primaryMedium: fontMedium,
    primaryRegular: fontRegular,
    primarySemiBold: fontSemiBold,
  },
  fontMetrics: {
    mono: fontMonoMetrics as any,
    medium: fontMediumMetrics as any,
    regular: fontRegularMetrics as any,
    semiBold: fontSemiBoldMetrics as any,
  },
  ...
});

But when I try to use theme.fontMetrics.regular in a style, it dumps out something like NaNem when you inspect the font.

Somewhat related to #1040 perhaps? If I try to put a number into the theme - like fontSize: 16 as any, it'll fail to build. Is there a better way to do this? Ideally we'd be able to use different fonts on different themes?

[askoufis]

What's your use case for wanting font metrics inside your theme? Typically, you'd use the font metrics to generate classnames that apply the font trimming. The font metrics themselves aren't directly useful, so I don't think it makes sense to add them to your theme.

You likely want to derive values from your metrics via precomputeValues and getCapHeight, as these are potentially useful depending on what you're styling, so might be worth putting into your theme.

There's also a Vanilla Extract capsize integration that could be useful for generating the trimming classes, if you're not already aware of it.

I'm curious as to where you're seeing the NaNem. Is that within CSS, or inspecting the font in dev tools?

Hope that helps. If things still aren't working, feel free to make a reproduction of your issue.

[m0ngr31]

Perhaps I'm doing it wrong.. but basically the thought was that our different themes would be using different fonts, but we need to add in that data to the component styles so that's why we're trying to do that through a contract.

We're using the @capsizecss/vanilla-extract library, but we're not having any luck so far.

I did try precomputeValues on the contract and the individual theme, but the css vars never get assigned which is interesting.

We're seeing NaNem on certain classes, but I'm sure I'm doing something wrong here as well:

.calendar__1msq7t54 {
  --fontSize__1d0g9qk0: 16px;
  --lineHeight__1d0g9qk1: normal;
  --capHeightTrim__1d0g9qk2: NaNem;
  --baselineTrim__1d0g9qk3: NaNem;
}

[askoufis]

Kind of hard to debug without seeing your entire implementation, might be easier to spot the issue with the full style code (or at least as much as you're happy to provide if it's internal/business-related).

You could log the return value of precomputeValues to see if any of the values are wrong/strange.

[m0ngr31]

@askoufis so when I was stripping the project down to the bare bones to reproduce the issue, I found that I didn't have the issue any more.

After trying to figure out the difference I found I had a circular import that was preventing it from working as intended. It's okay now. Thanks for your help!