Send Inquiry

Developer Docs

The developer documentation is currently under development and not yet finalized.

Requirements

  • A Node.js-based web app.
  • A file ID provided by the designer.

Initialize

Creates the tokenignite.config.json:

Terminal
tokenignite init

To see the available CLI options:

Terminal
tokenignite --help
Terminal
TokenIgnite CLI
 
Usage:
  tokenignite init [--config <path>] [--force]
  tokenignite run <name> [--config <path>] [--bridge-port <port>]
 
Commands:
  init  Create V1 tokenignite.config.json scaffold
  run  Start the canonical V1 runtime session for one target name
 
Notes:
  run requires a target <name> from config.files[].
  only one file stream is active per run session.
 
Options:
  --config <path>  Config path (default: ./tokenignite.config.json)
  --bridge-port <port>  Override local bridge port (default: 5678)
  --force  Used with init to overwrite existing config
  --help  Show this help
  --version  Show CLI version

tokenignite.config.json

JSON
{
  "attributeNames": {
    "theme": "data-ti-theme",
    "active": "data-ti-active"
  },
  "bridgePort": 5678,
  "files": [
    {
      "id": "process.env.FIGMA_FILE_MAIN",
      "rootSelector": ":root",
      "name": "global-foundation",
      "exportPath": "./app/styles"
    }
  ]
}

Here is the complete meaning of the configuration fields:

  • attributeNames: Defines the names of the data attributes used in the DOM.
  • attributeNames.theme: The attribute used to toggle active themes.
  • attributeNames.active: The attribute used to identify the currently active Figma file.
  • bridgePort: The local port for communication between the terminal and browser.
  • files: A list of configurations for all linked Figma files.
  • files[].id: The ID of the Figma file, securely loaded via environment variables.
  • files[].rootSelector: The CSS selector for which the variables of this file are generated.
  • files[].name: Unique name of this configuration. Required for the command tokenignite run <name> and linked with attributeNames.active.
  • files[].exportPath: The target directory where the exported CSS file is stored.

Start run mode

With runOnInit, the runtime session starts automatically when your app boots.

TypeScript
if (process.env.NODE_ENV === "development") {
  import("tokenignite").then(({ initTokenIgnite }) => {
    initTokenIgnite({
      runOnInit: "global-foundation",
    });
  });
}

If you don’t want to use runOnInit, initialize TokenIgnite without this option and start the runtime session directly in the terminal:

Terminal
tokenignite run global-foundation

Apply Themes in HTML

Set data-ti-theme on the root or a container to activate multiple themes together. The values for this attribute are always structured as "CollectionName:ModeName".

TypeScript
import React from "react";
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-ti-theme="color-modes:dark-mode padding-modes:comfortable">
      <body>{children}</body>
    </html>
  );
}

CSS Export Example

This is an example of a CSS export generated by TokenIgnite. The :not([...]) selector ensures that already validated and exported styles do not take effect during the next validation.

Similarly, you can use the :not([...]) selector to filter out your own styles during validation, for example: .your-element:not([...]).

CSS
/* GENERATED FILE - DO NOT EDIT MANUALLY. */
/* This file is overwritten on every TokenIgnite runtime export. */
 
/* Base Tokens & Global Fallbacks */
:root:not([data-ti-active="global-foundation"]) {
  --color-base-black: #000000;
  --color-base-white: #ffffff;
  --color-primary-purple-40: #6750a4;
}
 
/* Collection: Color Modes | Mode: Dark Mode */
:root:not([data-ti-active="global-foundation"])[data-ti-theme~="color-modes:dark-mode"],
:root:not([data-ti-active="global-foundation"]) [data-ti-theme~="color-modes:dark-mode"] {
  --surface-container: #211f26;
  --surface-dim: #141218;
}
 
/* Collection: Padding Modes | Mode: Comfortable */
:root:not([data-ti-active="global-foundation"])[data-ti-theme~="padding-modes:comfortable"],
:root:not([data-ti-active="global-foundation"]) [data-ti-theme~="padding-modes:comfortable"] {
  --padding-vertical-md: 8px;
}

This example shows the export of another Figma file found online via TokenIgnite. As you can see, variables are automatically grouped logically, with semantic tokens also being supported:

CSS
/* GENERATED FILE - DO NOT EDIT MANUALLY. */
/* This file is overwritten on every TokenIgnite runtime export. */
 
/* =========================================================
   TOKENS SYSTEM - SINGLE FILE
   Collections:
   1) Primitives
   2) Color Modes
   3) Padding Modes
   4) Measurements
   Themes: color-modes:dark-mode / padding-modes:comfortable / padding-modes:tight
   ========================================================= */
 
:root:not([data-ti-active="example-figma-file"]) {
  /* COLLECTION: PRIMITIVES
     ========================= */
 
  /* GROUP: Color / Base */
  --color-base-black: #000000;
  --color-base-white: #ffffff;
 
 
  /* GROUP: Color / Base / State Layers / White */
  --color-base-statelayers-white-08: rgba(255, 255, 255, 0.08);
  --color-base-statelayers-white-10: rgba(255, 255, 255, 0.1);
  --color-base-statelayers-white-16: rgba(255, 255, 255, 0.16);
 
 
  /* GROUP: Color / Error (red) */
  --color-error-red-10: #410e0b;
  --color-error-red-20: #601410;
  --color-error-red-30: #8c1d18;
  --color-error-red-40: #b3261e;
  --color-error-red-50: #dc362e;
  --color-error-red-60: #e46962;
  --color-error-red-70: #ec928e;
  --color-error-red-80: #f2b8b5;
  --color-error-red-90: #f9dedc;
  --color-error-red-95: #fceeee;
  --color-error-red-99: #fffbf9;
 
 
  /* GROUP: Color / Error (red) / State Layers / 40 */
  --color-error-red-statelayers-40-08: rgba(179, 38, 30, 0.08);
  --color-error-red-statelayers-40-10: rgba(179, 38, 30, 0.1);
 
 
  /* GROUP: Color / Error (red) / State Layers / 80 */
  --color-error-red-statelayers-80-08: rgba(242, 184, 181, 0.08);
  --color-error-red-statelayers-80-10: rgba(242, 184, 181, 0.1);
 
 
  /* GROUP: Color / Neutral */
  --color-neutral-4: #0f0d13;
  --color-neutral-6: #141218;
  --color-neutral-10: #1d1b20;
  --color-neutral-12: #211f26;
  --color-neutral-17: #2b2930;
  --color-neutral-20: #322f35;
  --color-neutral-22: #36343b;
  --color-neutral-24: #3b383e;
  --color-neutral-30: #48464c;
  --color-neutral-40: #605d64;
  --color-neutral-50: #79767d;
  --color-neutral-60: #938f96;
  --color-neutral-70: #aea9b1;
  --color-neutral-80: #cac5cd;
  --color-neutral-87: #ded8e1;
  --color-neutral-90: #e6e0e9;
  --color-neutral-92: #ece6f0;
  --color-neutral-94: #f3edf7;
  --color-neutral-95: #f5eff7;
  --color-neutral-96: #f7f2fa;
  --color-neutral-98: #fef7ff;
  --color-neutral-99: #fffbfe;
 
 
  /* GROUP: Color / Neutral / State Layers / 10 */
  --color-neutral-statelayers-10-08: rgba(29, 27, 32, 0.08);
  --color-neutral-statelayers-10-10: rgba(29, 27, 32, 0.1);
  --color-neutral-statelayers-10-16: rgba(29, 27, 32, 0.16);
 
 
  /* GROUP: Color / Neutral / State Layers / 20 */
  --color-neutral-statelayers-20-08: rgba(50, 47, 53, 0.08);
  --color-neutral-statelayers-20-10: rgba(50, 47, 53, 0.1);
  --color-neutral-statelayers-20-16: rgba(50, 47, 53, 0.16);
 
 
  /* GROUP: Color / Neutral / State Layers / 90 */
  --color-neutral-statelayers-90-08: rgba(230, 224, 233, 0.08);
  --color-neutral-statelayers-90-10: rgba(230, 224, 233, 0.1);
  --color-neutral-statelayers-90-16: rgba(230, 224, 233, 0.16);
 
 
  /* GROUP: Color / Neutral / State Layers / 95 */
  --color-neutral-statelayers-95-08: rgba(245, 239, 247, 0.08);
  --color-neutral-statelayers-95-10: rgba(245, 239, 247, 0.1);
  --color-neutral-statelayers-95-16: rgba(245, 239, 247, 0.16);
 
 
  /* GROUP: Color / Neutral Variant */
  --color-neutral-variant-10: #1d1a22;
  --color-neutral-variant-20: #322f37;
  --color-neutral-variant-30: #49454f;
  --color-neutral-variant-40: #605d66;
  --color-neutral-variant-50: #79747e;
  --color-neutral-variant-60: #938f99;
  --color-neutral-variant-70: #aea9b4;
  --color-neutral-variant-80: #cac4d0;
  --color-neutral-variant-90: #e7e0ec;
  --color-neutral-variant-95: #f5eefa;
  --color-neutral-variant-99: #fffbfe;
 
 
  /* GROUP: Color / Neutral Variant / State Layers / 30 */
  --color-neutral-variant-statelayers-30-08: rgba(73, 69, 79, 0.08);
  --color-neutral-variant-statelayers-30-10: rgba(73, 69, 79, 0.1);
  --color-neutral-variant-statelayers-30-16: rgba(73, 69, 79, 0.16);
 
 
  /* GROUP: Color / Neutral Variant / State Layers / 80 */
  --color-neutral-variant-statelayers-80-08: rgba(202, 196, 208, 0.08);
  --color-neutral-variant-statelayers-80-10: rgba(202, 196, 208, 0.1);
  --color-neutral-variant-statelayers-80-16: rgba(202, 196, 208, 0.16);
 
 
  /* GROUP: Color / Primary (purple) */
  --color-primary-purple-10: #21005d;
  --color-primary-purple-20: #381e72;
  --color-primary-purple-30: #4f378b;
  --color-primary-purple-40: #6750a4;
  --color-primary-purple-50: #7f67be;
  --color-primary-purple-60: #9a82db;
  --color-primary-purple-70: #b69df8;
  --color-primary-purple-80: #d0bcff;
  --color-primary-purple-90: #eaddff;
  --color-primary-purple-95: #f6edff;
  --color-primary-purple-99: #fffbfe;
 
 
  /* GROUP: Color / Primary (purple) / State Layers / 10 */
  --color-primary-purple-statelayers-10-08: rgba(33, 0, 93, 0.08);
  --color-primary-purple-statelayers-10-10: rgba(33, 0, 93, 0.1);
  --color-primary-purple-statelayers-10-16: rgba(33, 0, 93, 0.16);
 
 
  /* GROUP: Color / Primary (purple) / State Layers / 20 */
  --color-primary-purple-statelayers-20-08: rgba(56, 30, 114, 0.08);
  --color-primary-purple-statelayers-20-10: rgba(56, 30, 114, 0.1);
  --color-primary-purple-statelayers-20-16: rgba(56, 30, 114, 0.16);
 
 
  /* GROUP: Color / Primary (purple) / State Layers / 40 */
  --color-primary-purple-statelayers-40-08: rgba(103, 80, 164, 0.08);
  --color-primary-purple-statelayers-40-10: rgba(103, 80, 164, 0.1);
  --color-primary-purple-statelayers-40-16: rgba(103, 80, 164, 0.16);
 
 
  /* GROUP: Color / Primary (purple) / State Layers / 80 */
  --color-primary-purple-statelayers-80-08: rgba(208, 188, 255, 0.08);
  --color-primary-purple-statelayers-80-10: rgba(208, 188, 255, 0.1);
  --color-primary-purple-statelayers-80-16: rgba(208, 188, 255, 0.16);
 
 
  /* GROUP: Color / Primary (purple) / State Layers / 90 */
  --color-primary-purple-statelayers-90-08: rgba(234, 221, 255, 0.08);
  --color-primary-purple-statelayers-90-10: rgba(234, 221, 255, 0.1);
  --color-primary-purple-statelayers-90-16: rgba(234, 221, 255, 0.16);
 
 
  /* GROUP: Color / Secondary (muted Purple) */
  --color-secondary-muted-purple-10: #1d192b;
  --color-secondary-muted-purple-20: #332d41;
  --color-secondary-muted-purple-30: #4a4458;
  --color-secondary-muted-purple-40: #625b71;
  --color-secondary-muted-purple-50: #7a7289;
  --color-secondary-muted-purple-60: #958da5;
  --color-secondary-muted-purple-70: #b0a7c0;
  --color-secondary-muted-purple-80: #ccc2dc;
  --color-secondary-muted-purple-90: #e8def8;
  --color-secondary-muted-purple-95: #f6edff;
  --color-secondary-muted-purple-99: #fffbfe;
 
 
  /* GROUP: Color / Secondary (muted Purple) / State Layers / 10 */
  --color-secondary-muted-purple-statelayers-10-08: rgba(29, 25, 43, 0.08);
  --color-secondary-muted-purple-statelayers-10-10: rgba(29, 25, 43, 0.1);
  --color-secondary-muted-purple-statelayers-10-16: rgba(29, 25, 43, 0.16);
 
 
  /* GROUP: Color / Secondary (muted Purple) / State Layers / 80 */
  --color-secondary-muted-purple-statelayers-80-08: rgba(204, 194, 220, 0.08);
  --color-secondary-muted-purple-statelayers-80-10: rgba(204, 194, 220, 0.1);
  --color-secondary-muted-purple-statelayers-80-16: rgba(204, 194, 220, 0.16);
 
 
  /* GROUP: Color / Tertiary (mauve) */
  --color-tertiary-mauve-10: #31111d;
  --color-tertiary-mauve-20: #492532;
  --color-tertiary-mauve-30: #633b48;
  --color-tertiary-mauve-40: #7d5260;
  --color-tertiary-mauve-50: #986977;
  --color-tertiary-mauve-60: #b58392;
  --color-tertiary-mauve-70: #d29dac;
  --color-tertiary-mauve-80: #efb8c8;
  --color-tertiary-mauve-90: #ffd8e4;
  --color-tertiary-mauve-95: #ffecf1;
  --color-tertiary-mauve-99: #fffbfa;
 
 
  /* GROUP: Color / Tertiary (mauve) / State Layers / 10 */
  --color-tertiary-mauve-statelayers-10-08: rgba(49, 17, 29, 0.08);
  --color-tertiary-mauve-statelayers-10-10: rgba(49, 17, 29, 0.1);
  --color-tertiary-mauve-statelayers-10-16: rgba(49, 17, 29, 0.16);
 
 
  /* GROUP: Color / Tertiary (mauve) / State Layers / 80 */
  --color-tertiary-mauve-statelayers-80-08: rgba(239, 184, 200, 0.08);
  --color-tertiary-mauve-statelayers-80-10: rgba(239, 184, 200, 0.1);
  --color-tertiary-mauve-statelayers-80-16: rgba(239, 184, 200, 0.16);
 
 
  /* GROUP: Number */
  --number-0: 0px;
  --number-2: 2px;
  --number-4: 4px;
  --number-8: 8px;
  --number-12: 12px;
  --number-16: 16px;
  --number-28: 28px;
  --number-40: 40px;
  --number-48: 48px;
  --number-56: 56px;
  --number-64: 64px;
  --number-72: 72px;
  --number-80: 80px;
  --number-88: 88px;
  --number-999: 999px;
 
  /* COLLECTION: COLOR MODES
     ========================= */
 
  /* GROUP: General */
  --scrim: var(--color-base-black);
  --shadow: var(--color-base-black);
 
 
  /* GROUP: Background */
  --background-error-bg: var(--color-error-red-40);
  --background-errorcontainer-bg: var(--color-error-red-90);
  --background-primary-bg: var(--color-primary-purple-40);
  --background-primarycontainer-bg: var(--color-primary-purple-90);
  --background-primaryfixed-bg: var(--color-primary-purple-90);
  --background-primaryfixeddim-bg: var(--color-primary-purple-80);
  --background-secondary-bg: var(--color-secondary-muted-purple-40);
  --background-secondarycontainer-bg: var(--color-secondary-muted-purple-90);
  --background-secondaryfixed-bg: var(--color-secondary-muted-purple-90);
  --background-secondaryfixeddim-bg: var(--color-secondary-muted-purple-80);
  --background-tertiary-bg: var(--color-tertiary-mauve-40);
  --background-tertiarycontainer-bg: var(--color-tertiary-mauve-90);
  --background-tertiaryfixed-bg: var(--color-tertiary-mauve-90);
  --background-tertiaryfixed-dim-bg: var(--color-tertiary-mauve-80);
 
 
  /* GROUP: Background / State Layers */
  --background-statelayers-disabled: var(--color-neutral-statelayers-10-10);
  --background-statelayers-errorfocused-pressed: var(--color-error-red-statelayers-40-10);
  --background-statelayers-errorhover: var(--color-error-red-statelayers-40-08);
  --background-statelayers-inversesurfacefocus-press: var(--color-neutral-statelayers-95-08);
  --background-statelayers-inversesurfacehover: var(--color-neutral-statelayers-95-08);
  --background-statelayers-onprimaryfocus-press: var(--color-base-statelayers-white-10);
  --background-statelayers-onprimaryhover: var(--color-base-statelayers-white-08);
  --background-statelayers-primarycontainerfocus-press: var(--color-primary-purple-statelayers-10-10);
  --background-statelayers-primarycontainerhover: var(--color-primary-purple-statelayers-10-08);
  --background-statelayers-primaryfocus-press: var(--color-primary-purple-statelayers-40-10);
  --background-statelayers-primaryhover: var(--color-primary-purple-statelayers-40-08);
  --background-statelayers-secondarycontainerhover: var(--color-secondary-muted-purple-statelayers-10-08);
  --background-statelayers-secondarydrag: var(--color-secondary-muted-purple-statelayers-10-16);
  --background-statelayers-secondaryfocus-press: var(--color-secondary-muted-purple-statelayers-10-10);
  --background-statelayers-surfacedrag: var(--color-neutral-statelayers-10-16);
  --background-statelayers-surfacefocus-press: var(--color-neutral-statelayers-10-10);
  --background-statelayers-surfacehover: var(--color-neutral-statelayers-10-08);
  --background-statelayers-tertiarycontainerfocus-press: var(--color-tertiary-mauve-statelayers-10-10);
  --background-statelayers-tertiarycontainerhover: var(--color-tertiary-mauve-statelayers-10-08);
 
 
  /* GROUP: Foreground */
  --foreground-error: var(--color-error-red-40);
  --foreground-onerror-fg: var(--color-base-white);
  --foreground-onerrorcontainer-fg: var(--color-error-red-10);
  --foreground-onfertiaryfixedvar-fg: var(--color-tertiary-mauve-30);
  --foreground-onprimary-fg: var(--color-base-white);
  --foreground-onprimarycontainer-fg: var(--color-primary-purple-10);
  --foreground-onprimaryfixed-fg: var(--color-primary-purple-10);
  --foreground-onprimaryfixedvar-fg: var(--color-primary-purple-30);
  --foreground-onsecondary-fg: var(--color-base-white);
  --foreground-onsecondarycontainer-fg: var(--color-secondary-muted-purple-10);
  --foreground-onsecondaryfixed-fg: var(--color-secondary-muted-purple-10);
  --foreground-onsecondaryfixedvar-fg: var(--color-secondary-muted-purple-30);
  --foreground-onsurface-fg: var(--color-neutral-10);
  --foreground-onsurfaceinverse-fg: var(--color-neutral-95);
  --foreground-onsurfacevar-fg: var(--color-neutral-variant-30);
  --foreground-ontertiary-fg: var(--color-base-white);
  --foreground-ontertiarycontainer-fg: var(--color-tertiary-mauve-10);
  --foreground-ontertiaryfixed-fg: var(--color-tertiary-mauve-10);
  --foreground-primary-fg: var(--color-primary-purple-40);
  --foreground-secondary-fg: var(--color-secondary-muted-purple-40);
 
 
  /* GROUP: Outline */
  --outline-outline: var(--color-neutral-variant-50);
  --outline-outlinevar: var(--color-neutral-variant-80);
 
 
  /* GROUP: Surface */
  --surface-surface: var(--color-neutral-98);
  --surface-surfacebright: var(--color-neutral-98);
  --surface-surfacecontainer: var(--color-neutral-94);
  --surface-surfacecontainerhigh: var(--color-neutral-92);
  --surface-surfacecontainerhighest: var(--color-neutral-90);
  --surface-surfacecontainerlow: var(--color-neutral-96);
  --surface-surfacecontainerlowest: var(--color-base-white);
  --surface-surfacedim: var(--color-neutral-90);
  --surface-surfaceinverse: var(--color-neutral-20);
  --surface-surfaceinverseprimary: var(--color-primary-purple-80);
 
  /* COLLECTION: PADDING MODES
     ========================= */
 
  /* GROUP: Height */
  --height-lg: var(--number-88);
  --height-md: var(--number-72);
  --height-sm: var(--number-56);
 
 
  /* GROUP: Padding / Vertical */
  --padding-vertical-lg: var(--number-16);
  --padding-vertical-md: var(--number-12);
  --padding-vertical-sm: var(--number-8);
 
  /* COLLECTION: MEASUREMENTS
     ========================= */
 
  /* GROUP: Corner Radius */
  --cornerradius-button: var(--number-999);
  --cornerradius-card: var(--number-12);
  --cornerradius-carousel-item: var(--number-28);
  --cornerradius-checkbox: var(--number-2);
  --cornerradius-chip: var(--number-8);
  --cornerradius-fablarge: var(--number-28);
  --cornerradius-fabmedium: var(--number-16);
  --cornerradius-fabsmall: var(--number-12);
  --cornerradius-field: var(--number-4);
  --cornerradius-full: var(--number-999);
  --cornerradius-sheethard: var(--number-4);
  --cornerradius-sheetmedium: var(--number-16);
  --cornerradius-sheetsoft: var(--number-28);
  --cornerradius-snackbar: var(--number-4);
}
 
/* COLLECTION: COLOR MODES
   MODE: DARK MODE
   ========================= */
:root:not([data-ti-active="example-figma-file"])[data-ti-theme~="color-modes:dark-mode"],
:root:not([data-ti-active="example-figma-file"]) [data-ti-theme~="color-modes:dark-mode"] {
 
  /* GROUP: Background */
  --background-error-bg: var(--color-error-red-80);
  --background-errorcontainer-bg: var(--color-error-red-30);
  --background-primary-bg: var(--color-primary-purple-80);
  --background-primarycontainer-bg: var(--color-primary-purple-30);
  --background-secondary-bg: var(--color-secondary-muted-purple-80);
  --background-secondarycontainer-bg: var(--color-secondary-muted-purple-30);
  --background-tertiary-bg: var(--color-tertiary-mauve-80);
  --background-tertiarycontainer-bg: var(--color-tertiary-mauve-30);
 
 
  /* GROUP: Background / State Layers */
  --background-statelayers-disabled: var(--color-neutral-statelayers-90-10);
  --background-statelayers-errorfocused-pressed: var(--color-error-red-statelayers-80-10);
  --background-statelayers-errorhover: var(--color-error-red-statelayers-80-08);
  --background-statelayers-inversesurfacefocus-press: var(--color-neutral-statelayers-20-08);
  --background-statelayers-inversesurfacehover: var(--color-neutral-statelayers-20-08);
  --background-statelayers-onprimaryfocus-press: var(--color-primary-purple-statelayers-20-10);
  --background-statelayers-onprimaryhover: var(--color-primary-purple-statelayers-20-08);
  --background-statelayers-primarycontainerfocus-press: var(--color-primary-purple-statelayers-80-08);
  --background-statelayers-primarycontainerhover: var(--color-primary-purple-statelayers-80-08);
  --background-statelayers-primaryfocus-press: var(--color-primary-purple-statelayers-80-10);
  --background-statelayers-primaryhover: var(--color-primary-purple-statelayers-80-08);
  --background-statelayers-secondarycontainerhover: var(--color-secondary-muted-purple-statelayers-80-08);
  --background-statelayers-secondarydrag: var(--color-secondary-muted-purple-statelayers-80-16);
  --background-statelayers-secondaryfocus-press: var(--color-secondary-muted-purple-statelayers-80-10);
  --background-statelayers-surfacedrag: var(--color-neutral-statelayers-90-16);
  --background-statelayers-surfacefocus-press: var(--color-neutral-statelayers-90-10);
  --background-statelayers-surfacehover: var(--color-neutral-statelayers-90-08);
  --background-statelayers-tertiarycontainerfocus-press: var(--color-tertiary-mauve-statelayers-80-10);
  --background-statelayers-tertiarycontainerhover: var(--color-tertiary-mauve-statelayers-80-08);
 
 
  /* GROUP: Foreground */
  --foreground-error: var(--color-error-red-80);
  --foreground-onerror-fg: var(--color-error-red-20);
  --foreground-onerrorcontainer-fg: var(--color-error-red-90);
  --foreground-onprimary-fg: var(--color-primary-purple-20);
  --foreground-onprimarycontainer-fg: var(--color-primary-purple-90);
  --foreground-onsecondary-fg: var(--color-secondary-muted-purple-20);
  --foreground-onsecondarycontainer-fg: var(--color-secondary-muted-purple-90);
  --foreground-onsurface-fg: var(--color-neutral-87);
  --foreground-onsurfaceinverse-fg: var(--color-neutral-20);
  --foreground-onsurfacevar-fg: var(--color-neutral-variant-80);
  --foreground-ontertiary-fg: var(--color-tertiary-mauve-20);
  --foreground-ontertiarycontainer-fg: var(--color-tertiary-mauve-90);
  --foreground-primary-fg: var(--color-primary-purple-80);
  --foreground-secondary-fg: var(--color-secondary-muted-purple-80);
 
 
  /* GROUP: Outline */
  --outline-outline: var(--color-neutral-variant-60);
  --outline-outlinevar: var(--color-neutral-variant-30);
 
 
  /* GROUP: Surface */
  --surface-surface: var(--color-neutral-6);
  --surface-surfacebright: var(--color-neutral-24);
  --surface-surfacecontainer: var(--color-neutral-12);
  --surface-surfacecontainerhigh: var(--color-neutral-17);
  --surface-surfacecontainerhighest: var(--color-neutral-22);
  --surface-surfacecontainerlow: var(--color-neutral-10);
  --surface-surfacecontainerlowest: var(--color-neutral-4);
  --surface-surfacedim: var(--color-neutral-6);
  --surface-surfaceinverse: var(--color-neutral-90);
  --surface-surfaceinverseprimary: var(--color-primary-purple-40);
}
 
/* COLLECTION: PADDING MODES
   MODE: COMFORTABLE
   ========================= */
:root:not([data-ti-active="example-figma-file"])[data-ti-theme~="padding-modes:comfortable"],
:root:not([data-ti-active="example-figma-file"]) [data-ti-theme~="padding-modes:comfortable"] {
 
  /* GROUP: Height */
  --height-lg: var(--number-80);
  --height-md: var(--number-64);
  --height-sm: var(--number-48);
 
 
  /* GROUP: Padding / Vertical */
  --padding-vertical-lg: var(--number-12);
  --padding-vertical-md: var(--number-8);
  --padding-vertical-sm: var(--number-4);
}
 
/* COLLECTION: PADDING MODES
   MODE: TIGHT
   ========================= */
:root:not([data-ti-active="example-figma-file"])[data-ti-theme~="padding-modes:tight"],
:root:not([data-ti-active="example-figma-file"]) [data-ti-theme~="padding-modes:tight"] {
 
  /* GROUP: Height */
  --height-lg: var(--number-72);
  --height-md: var(--number-56);
  --height-sm: var(--number-40);
 
 
  /* GROUP: Padding / Vertical */
  --padding-vertical-lg: var(--number-8);
  --padding-vertical-md: var(--number-8);
  --padding-vertical-sm: var(--number-0);
}

Love validating with TokenIgnite but don’t want validation attributes in your final product? If you use Vite, you can easily filter them out automatically during the production build.

JavaScript
import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        {
          postcssPlugin: 'remove-ti-active',
          Rule(rule) {
            // Specifically target the :not([data-ti-active="..."]) part
            if (rule.selector.includes('data-ti-active')) {
              // Remove the entire :not([data-ti-active="..."]) selector and its contents
              rule.selector = rule.selector.replace(/:not\(\[data-ti-active=.*?\]\)/g, '');
              
              // Clean up double spaces if any were created
              rule.selector = rule.selector.replace(/\s+/g, ' ').trim();
            }
          },
        },
      ],
    },
  },
});