How primer/primitives works
Primer Primitives is a design-token library for Primer. Token data is configured and processed through its Style Dictionary extensions, then emitted in formats for CSS, JavaScript/TypeScript, Figma, documentation, fallbacks, and LLM guidance. The README documents the token and theme workflow, but the listed tree omits src/tokens; edges from token data are therefore shown without assigning it an unsupported repository path. The sampled files confirm the LLM filtering and formatting branch; other platform wiring is represented only at the documented capability level.
Main entry points: primerStyleDictionary.ts Dictionary config · llmGuidelines.ts LLM guidelines · themeOverrides.ts Theme preprocessors · css.ts CSS platform
Components 20
Token processing
- Dictionary config
src/primerStyleDictionary.ts - Theme preprocessors
src/preprocessors/themeOverrides.ts - Group inheritance
src/preprocessors/inheritGroupProperties.ts - Token filters
src/filters/index.ts - Token transforms
src/transformers/index.ts
Token outputs
- CSS platform
src/platforms/css.ts - Theme CSS
src/platforms/index.ts - JavaScript exports
src/platforms/javascript.ts - TypeScript exports
src/platforms/typescript.ts - Figma export
src/platforms/figma.ts - Fallback values
src/platforms/fallbacks.ts - Deprecated tokens
src/platforms/deprecatedJson.ts - Documentation JSON
src/platforms/docJson.ts - LLM guidelines
src/platforms/llmGuidelines.ts - Guideline formatter
src/formats/markdownLlmGuidelines.ts
Validation and metadata
- Token schemas
src/schemas/designToken.ts - LLM extension filter
src/filters/hasLlmExtensions.ts
Other components
- Token author
- Primer consumers
- Figma users
Connections 22
- Token author → Dictionary config: provides tokens
- Dictionary config → Token schemas: validates tokens
- Dictionary config → Theme preprocessors: configures themes
- Theme preprocessors → Group inheritance: inherits properties
- Dictionary config → Token filters: selects tokens
- Dictionary config → Token transforms: transforms tokens
- Dictionary config → CSS platform: builds CSS
- Dictionary config → Theme CSS: builds themes
- Dictionary config → JavaScript exports: builds exports
- Dictionary config → TypeScript exports: builds definitions
- Dictionary config → Figma export: builds export
- Dictionary config → Fallback values: builds fallbacks
- Dictionary config → Deprecated tokens: builds JSON
- Dictionary config → Documentation JSON: builds JSON
- Dictionary config → LLM guidelines: configures platform
- LLM guidelines → LLM extension filter: filters tokens
- LLM guidelines → Guideline formatter: formats guidelines
- CSS platform → Primer consumers: provides variables
- Theme CSS → Primer consumers: provides themes
- JavaScript exports → Primer consumers: provides exports
- TypeScript exports → Primer consumers: provides types
- Figma export → Figma users: provides token data