Design Tokens (JSON)

GravityView's theme tokens are published as data on every deploy, so you can pull them into a design system pipeline instead of copying values by hand. If you only want to restyle a View with CSS, see Theming instead.

The DTCG file declares its own $schema, so editors validate it as you work, and it is checked against the Design Tokens Community Group's published schema before it is published.

Use cssVar, not the token path

A token's path and its CSS variable are not the same string. gravityview.border.entry_color is --gv-entry-border-color. Read the variable name from $extensions["com.gravitykit.tokens"].cssVar so the CSS you generate matches what GravityView actually reads.

Style Dictionary

One custom transform points the names at the shipped CSS variables:

import SD from 'style-dictionary';

const EXT = 'com.gravitykit.tokens';

SD.registerTransform({
  name: 'name/gv-cssvar',
  type: 'name',
  transform: (t) => t.$extensions[EXT].cssVar.replace(/^--/, ''),
});

const sd = new SD({
  source: ['css-tokens.tokens.json'],
  platforms: {
    css: {
      prefix: '',
      transforms: SD.hooks.transformGroups.css.map((t) =>
        t === 'name/kebab' ? 'name/gv-cssvar' : t,
      ),
      files: [{ destination: 'gravityview-tokens.css', format: 'css/variables' }],
    },
  },
});

await sd.buildAllPlatforms();

Style Dictionary 5.x renders DTCG duration values as [object Object], which affects GravityView's transition tokens. Add this transform alongside the one above and include it in the list:

SD.registerTransform({
  name: 'duration/css-dtcg',
  type: 'value',
  transitive: true,
  filter: (t) => t.$type === 'duration' && typeof t.$value === 'object',
  transform: (t) => `${t.$value.value}${t.$value.unit}`,
});

Terrazzo

Terrazzo reads the file without configuration. Its core/consistent-naming rule warns on GravityView's snake_case names until you set it to { format: "snake_case" }.

What the DTCG file leaves out

DTCG has no way to express a handful of values GravityView ships, such as percentage widths, clamp(), and keywords like inherit. Those tokens still appear at their usual path with their description and raw CSS attached, but without a value, so design tools skip them.

A few others, like --gv-font-size-xs, are calculated from another token. The file carries the value at GravityView's defaults and says so in the token's description, so a library synced from it can drift if you change the token it derives from.

Both groups are listed under $extensions["com.gravitykit.tokens"] if you want to check them programmatically, and the flat file always has the exact CSS.