@heathmont/moon-css

Moon CSS

MoonCSS library for primitive, semantic, and component variables and component classes.

Installation

1. Get Personal Figma Token (FIGMA_TOKEN), base variables Figma file ID (FIGMA_FILE), and component variables Figma file ID (FIGMA_COMPONENTS_FILE).
2. Add next lines to a .env file. Replace moon with a brand name and Figma file IDs to brand specific ones:

FIGMA_TOKEN=figd_personal-access-token
FIGMA_FILE=moon:BZiHkvF7pXFHrFH8P0cG2T
FIGMA_COMPONENTS_FILE=moon:S3q1SkVngbwHuwpxHKCsgtJj

3. Run npx @heathmont/moon-css to generate moon-base.css file with all CSS variables.
4. Optionally run npx @heathmont/moon-css --with-preset to additionally generate moon-base-preset.js and moon-components.js files with Tailwind configuration for utility and component classes.