Lazuli Tokens
Cursor and VS Code extension for the Lazuli design tokens.
Hover token(--name), a CSS custom property, or a Sass variable to see the value it resolves to. Inside token(), the extension also autocomplete token names.
Install
VS Code. Install Lazuli Tokens from the Marketplace.
Cursor. Install lazuli-tokens-0.1.1.vsix from this repository: Extensions view → … → Install from VSIX….
Hover
The hover shows the concrete value, the alias chain when there is one (--color-bg-brand-primary → --color-semantic-raven_alpha-100 → …), and a link to the line where it is defined. Hex colors also get a swatch.
Completion
Typing inside token() lists the names from tokens.css, with the resolved value as detail. Hex primitives (--color-neutral-griffin-white: #fff) are left out.
Where it works
Hover and completion run in SCSS, CSS, HTML, TypeScript, JavaScript, and MDX, on any file in the workspace.
haw-doctor-web must be open in the same window. meta-haw counts, because the extension looks for packages/haw-doctor-web from each workspace folder. Without tokens.css, the extension stays inactive. Those files are reloaded when they change on disk.
Values come from:
frontend/projects/padoa/components/lib/style/scss/variables/tokens.css for token(--name) and --namevariables/*.scss in that same directory, then _variables.scss one level up, for $name
Resolution order:
token(--name) is read from tokens.css. var(--other) is followed until a concrete value.- A bare
--name uses the custom property declared in the rule under the cursor, then in each parent rule. A sibling rule does not apply. If the file does not declare it, the name falls back to tokens.css.
- A
$name uses the design-system variables, then declarations in the file under the cursor that are in scope: the file root up to the cursor, the enclosing blocks, and mixin parameters. A $ declared in another app file is ignored.
$name * number scales a length (px, rem, em, ms, s, %). rgba($color, alpha) appends the alpha to a hex color. A Sass map is shown as map.
