Push UI Design Tokens

About this plugin

Push UI Design System tooling for generating visual documentation of your design tokens and color variables.

Generate Figma Documentation

Automatically creates beautiful documentation showcasing your color palettes, shade variations, and design token relationships, ensuring your documentation stays in sync with your variable definitions as the single source of truth.

Supports variable collections with "Colors /" prefix and recognizes both shade-based naming (e.g., "slate/100", "blue/500") and semantic tokens (e.g., "background/primary", "text/on-primary"). Perfect for design teams who need clear documentation of their design system components.

Export CSS Tokens

Get a CSS file with all your color tokens, ready to use in your codebase . This feature exports your Figma color variables as CSS custom properties for TailwindCSS v4, supporting both shade-based and semantic naming conventions.

Use the Color Collection prefix parameter to filter which color collections are included in the export. Example output:

```css

@import "tailwindcss";

@import "tw-animate-css";

@plugin '@tailwindcss/typography';

@custom-variant dark (&:is(.dark *));

:root {

/* Background Colors - Light Mode */

--background-screen: var(--color-white);

--background-primary: var(--color-primary-600);

--background-primary-hover: var(--color-primary-700);

--background-primary-active: var(--color-primary-800);

--background-success: var(--color-success-600);

--background-success-hover: var(--color-success-700);

--background-success-active: var(--color-success-800);

/* Text Colors - Light Mode */

--text-primary: var(--color-neutral-900);

--text-success: var(--color-success-600);

--text-success-hover: var(--color-success-700);

--text-success-active: var(--color-success-800);

/* Border Colors - Light Mode */

--border-primary: var(--color-neutral-300);

--border-success: var(--color-success-600);

}

.dark {

/* Background Colors - Dark Mode */

--background-screen: var(--color-neutral-950);

--background-primary: var(--color-primary-600);

--background-primary-hover: var(--color-primary-500);

--background-primary-active: var(--color-primary-400);

--background-success: var(--color-success-600);

--background-success-hover: var(--color-success-500);

--background-success-active: var(--color-success-400);

/* Text Colors - Dark Mode */

--text-primary: var(--color-neutral-50);

--text-success: var(--color-success-600);

--text-success-hover: var(--color-success-500);

--text-success-active: var(--color-success-400);

/* Border Colors - Dark Mode */

--border-primary: var(--color-neutral-700);

--border-success: var(--color-success-500);

}

/* https://tailwindcss.com/docs/theme#extending-the-default-theme */

@theme {

/* Primary Colors */

--color-primary-50: oklch(0.9561 0.0214 283.13);

--color-primary-100: oklch(0.8619 0.0694 281.25);

--color-primary-200: oklch(0.769 0.12 280.04);

--color-primary-300: oklch(0.676 0.1733 277.8);

--color-primary-400: oklch(0.5911 0.2238 274.15);

--color-primary-500: oklch(0.5279 0.2275 272.76);

--color-primary-600: oklch(0.4493 0.2147 271);

--color-primary-700: oklch(0.3762 0.1968 269.43);

--color-primary-800: oklch(0.3091 0.1727 268.08);

--color-primary-900: oklch(0.2043 0.1183 266.82);

--color-primary-950: oklch(0.1847 0.1097 265.13);

}

/* https://tailwindcss.com/docs/theme#referencing-other-variables */

@theme inline {

/* Success Colors */

--color-success-50: var(--color-emerald-50);

--color-success-100: var(--color-emerald-100);

--color-success-200: var(--color-emerald-200);

--color-success-300: var(--color-emerald-300);

--color-success-400: var(--color-emerald-400);

--color-success-500: var(--color-emerald-500);

--color-success-600: var(--color-emerald-600);

--color-success-700: var(--color-emerald-700);

--color-success-800: var(--color-emerald-800);

--color-success-900: var(--color-emerald-900);

--color-success-950: var(--color-emerald-950);

}

```