# SCSS Exports

This directory contains SCSS files that use the `:export` syntax to export values for use in JavaScript/MDX files.

## How it works

1. **SCSS files** (`.scss`) are the source of truth and contain the actual values using SASS variables and functions
2. **JavaScript files** (`.js`) are auto-generated from the SCSS files and should never be edited directly
3. The build script `scripts/build-scss-exports.js` compiles the SCSS and extracts the `:export` values
4. These JS files are imported in MDX and React components for reliable access to design tokens

## Files

- `size.scss` → `size.js` - Icon size definitions
- `color.scss` → `color.js` - Icon color definitions
- `base.scss` → `base.js` - Base design tokens (font-size, etc.)
- `space.scss` → `space.js` - Spacing definitions
- `breakpoint.scss` → `breakpoint.js` - Breakpoint definitions

## Build Process

The JavaScript files are automatically generated:

- During development: `npm run dev`
- During build: `npm run build`
- Manually: `npm run build:scss-exports`

## Important Notes

- Never edit the `.js` files directly - they will be overwritten
- Always edit the `.scss` files to make changes
- The `.js` files are gitignored and regenerated on each build
- This approach ensures SCSS remains the source of truth while providing reliable imports for Next.js