@gsa-tts/graymatter-style-tokens

Package Responsibilities

The GrayMatter Style Tokens package (@gsa-tts/graymatter-style-tokens) is responsible for defining and managing foundational design tokens. These are named entities that store visual design attributes such as colors, typography, spacing, and more.

Primary Responsibilities:

• Define and maintain design tokens (colors, typography, spacing, etc.)
• Generate platform-specific token formats
• Provide a single source of truth for design values
• Ensure design consistency across applications
• Bridge the gap between design tools (like Figma) and code

Package Boundaries:

• SHOULD contain design token definitions
• SHOULD contain token transformation and build logic
• SHOULD export tokens in various formats (CSS, JS, JSON)
• SHOULD NOT contain UI components or application logic
• SHOULD NOT contain styling implementation (CSS/SCSS)
• SHOULD NOT depend on UI components or application packages

Token Categories

The style tokens package includes the following categories of tokens:

• Colors: Brand colors, UI colors, semantic colors
• Typography: Font families, font sizes, font weights, line heights
• Spacing: Margin and padding values
• Breakpoints: Screen size breakpoints for responsive design
• Borders: Border widths, radii, and styles
• Shadows: Box shadows for different elevation levels
• Z-indices: Z-index values for layering elements

Development

Adding or Modifying Tokens

1. Edit the token source files in the src directory
2. Run pnpm build to generate the token files
3. Commit the changes

Building

pnpm build

This will:

1. Compile the TypeScript configuration
2. Run Style Dictionary to transform the tokens
3. Generate the output files in various formats