Skip to content
helixui

CSS-variable IntelliSense

var(--helixui-color-bg-action-brand-default) is 44 characters. You don’t want to remember it. There are three ways to get autocomplete without memorizing the prefix.

1. Typed helper — t() / cssVar()

The shortest path. Import from @helixui/tokens:

import { t } from '@helixui/tokens';


<div
  style={{
    color: t('color.text.action.brand'),
    background: t('color.bg.surface.subtle'),
    padding: t('space.4'),
  }}
/>

t() is a typed alias for cssVar(). The argument is a TokenPath union — every helixui token, autocompleted. The return is a HelixUICssVar string (var(--helixui-color-text-action-brand)), not a generic string, so you get end-to-end type safety.

If you’d rather use the long form: cssVar('color.text.action.brand') is identical.

2. String literal types

If you write inline CSS strings instead of helper calls, you can still get type safety:

import type { HelixUICssVar } from '@helixui/tokens';


const accentBg: HelixUICssVar = 'var(--helixui-color-bg-action-brand-default)';
// Typo? TypeScript fails the build.

HelixUICssVar is the union of every var(--helixui-*) string helixui ships. Useful for component prop types that should accept “any helixui color” without leaking the raw string:

interface MyBadgeProps {
  accent?: HelixUICssVar;
}

3. Editor autocomplete inside CSS files

For .css files where you can’t import TypeScript types, helixui ships a plain-text list of every CSS variable at @helixui/tokens/css-vars.txt. Most editors have an extension that reads from this.

VS Code

Install CSS Variables Autocomplete and add to your project’s .vscode/settings.json:

{
  "cssVariables.lookupFiles": [
    "node_modules/@helixui/tokens/dist/css/all.css"
  ]
}

Now typing var(--he… inside any .css / .tsx / .module.css file pops up the full list with colour previews for color tokens.

JetBrains (WebStorm, etc.)

The built-in CSS Modules support detects var(--helixui-*) from the imported stylesheet automatically. Make sure your project includes the helixui CSS in a <link> or @import so JetBrains’ index picks it up.

Other editors

The list is at node_modules/@helixui/tokens/dist/css-vars.txt (one variable per line) and dist/css-vars.json (array). Most editor extensions support one or the other.

4. Build-time validation (optional)

A typo in var(--helixui-color-brnad-500) won’t fail TypeScript — it’s still a valid CSS string. To catch these at build time, you can wire stylelint-declaration-strict-value against the helixui var list. We’re adding a first-party stylelint plugin in v0.2; track [#issue/stylelint-plugin].

Why we don’t augment CSSProperties directly

We considered ambient-augmenting React’s CSSProperties so every color, background, padding etc. would autocomplete helixui variables out of the box. We decided against it because:

  • It interferes with users who legitimately use other CSS variable systems (Tailwind, Open Props).
  • It locks you into our type universe, which violates the spirit of “tokens are JSON, code is downstream” — you should be able to opt in or out.

The opt-in pattern (t(), HelixUICssVar) is more invasive only in the places you choose, with the same type safety.