Functions
dtcg-formulas ships a growing catalog of formula definitions: built-in functions that cover common math and color operations, plus computation adapters that connect to external libraries for domain-specific work.
Built-in Functions
Built-ins are pre-registered in the registry. They wrap CSS/Sass intrinsics and require no external dependencies.
| Function | Domain | Description |
|---|---|---|
clamp | Math | Constrain a value between minimum and maximum bounds |
mix | Color | Blend two colors by a weighted ratio |
modular-scale | Math | Compute a value at a step on a modular scale |
Computation Adapters
Adapters are domain-specific functions backed by external libraries. Parse their .module.scssdef, then register them in your pipeline.
| Adapter | Domain | Library | Description |
|---|---|---|---|
radius | Shape | -- | Proportional radius from size and ratio |
leonardo | Color | Adobe Leonardo | Contrast-aware palette color generation |
color-name | Color | meodai/color-names | Human-readable color naming via nearest match |
shade / tint | Color | culori | Perceptually uniform darkening and lightening via OKLCH |
fluid-size | Responsive | -- | Viewport-responsive sizing via CSS clamp() generation |
material-shadow | Elevation | Material Design 3 | Elevation-to-shadow mapping |
Adding Your Own
Any .module.scssdef file that follows the scssdef specification can be parsed and registered as an adapter. The workflow:
- Author a
.module.scssdefwith frontmatter + function declaration - Parse it with
@dtcg-formulas/parser - Register the functions in a
@dtcg-formulas/registryinstance - Wire up an evaluate callback that delegates to your library
See the Registry Contract for the full interface.