Defining values in a contract which compile down to values not CSS variables

[AndrewLeedham]

Given a theming system that has a static set of properties say a sizing scale, but then has themeable values like font families, it seems redundant to define those sizes as CSS variables as they never changed on the client, and only a subset may be used.

Perhaps the API could allow defining values in a theme contract that are not overriden in a theme. For example:

const base = createThemeContract({
  font: {
    family: {
      primary: null,
      secondary: null,
    },
  },
  size: {
    scale: {
      1: '6px',
      2: '12px',
      3: '18px',
      4: '24px',
      5: '30px',
    },
  },
});

const theme = createGlobalTheme(':root', xeroxBase, {
  font: {
    family: {
      primary: 'sans-serif',
      secondary: 'monospace',
    },
  },
});

export const exampleStyle = style({
  fontFamily: base.font.family.primary,
  padding: base.size.scale[3],
})

Would output something like:

:root {
  --font-family-primary__ggbl8i1: sans-serif;
  --font-family-secondary__ggbl8i2: monospace;
  --size-scale-1__ggbl8i3: var(6px);
  --size-scale-2__ggbl8i4: var(12px);
  --size-scale-3__ggbl8i5: var(18px);
  --size-scale-4__ggbl8i6: var(24px);
  --size-scale-5__ggbl8i7: var(30px);

}

.ggbl8if {
    font-family: var(--font-family-primary__ggbl8i1);
    padding: var(--size-scale-3__ggbl8i2);
}

But what I am wanting it to output is:

:root {
  --font-family-primary__ggbl8i1: sans-serif;
  --font-family-secondary__ggbl8i2: monospace;
-  --size-scale-1__ggbl8i3: var(6px);
-  --size-scale-2__ggbl8i4: var(12px);
-  --size-scale-3__ggbl8i5: var(18px);
-  --size-scale-4__ggbl8i6: var(24px);
-  --size-scale-5__ggbl8i7: var(30px);
}

.ggbl8if {
    font-family: var(--font-family-primary__ggbl8i1);
-   padding: var(--size-scale-3__ggbl8i7);
+   padding: 18px;
}

[mattcompiles]

If the values can never change is it really part of a theme? Or is it just a lookup for a constant. Feels like two different concepts.

You could build something like this by building on top of the vanilla-extract core API's. Not sure it makes sense to build directly into them though.

[AndrewLeedham]

Fair point, thanks 😃