---
url: /api/renderers/foundation/src.md
---
[pantoken-root](../../../index.md) / foundation

# foundation

## Compatibility

Target: Foundation for Sites. Current format: `Concrete Sass settings + variable-backed CSS overlay`. Minimum host version: `6.1.2`. Tested through `6.9.0`. Newer releases require review.

[Full compatibility matrix](../../../../compatibility)

Experimental

`@pantoken/foundation` — theme Foundation for Sites Sass output and common CSS classes.

Foundation is Sass-first, so this package ships two layers. [toFoundationSettings](functions/toFoundationSettings.md) emits a
`_settings`-style Sass partial with concrete light-mode rebrand values so Foundation's colour functions can
compile. [toFoundationCss](functions/toFoundationCss.md) emits a thin variable-backed CSS overlay that themes the common compiled
classes (`.button`, `.callout`, links) the same way — useful when you consume stock Foundation CSS
and just want to layer Instructure colors on top without recompiling.

## Example

```ts
import { foundationSettings, foundationCss } from "@pantoken/foundation";
// foundationSettings → a Sass partial; foundationCss → a runtime overlay.
```

## Interfaces

* [ToFoundationSettingsOptions](interfaces/ToFoundationSettingsOptions.md)
* [ToFoundationCssOptions](interfaces/ToFoundationCssOptions.md)

## Variables

* [FOUNDATION_TO_INSTUI](variables/FOUNDATION_TO_INSTUI.md)
* [foundationSettings](variables/foundationSettings.md)
* [foundationCss](variables/foundationCss.md)

## Functions

* [toFoundationSettings](functions/toFoundationSettings.md)
* [toFoundationCss](functions/toFoundationCss.md)

## References

### default

Renames and re-exports [foundationCss](variables/foundationCss.md)