Function defineConfig

defineConfig<const T extends YarclShape>(config: T & Checks<T>): T
Declares a yarcl design system config.

Checks at compile time that:
- every color has a light and dark value
- defaults, focusRing.color, typography.fonts, typography.headings and each text style's family reference existing keys
- no key contains whitespace
- components only names known components, only sets supported options, and only uses existing keys
Returns the config unchanged with literal types preserved, so the library can derive its prop types from it. Spread @yarcl/react/defaults to extend the library defaults instead of replacing them.
Type Parameters
- const T extends YarclShape
Parameters
- config: T & Checks<T>
Returns T
Example
```
// src/yarcl.config.ts
import { defineConfig } from '@yarcl/react/define';
import defaults from '@yarcl/react/defaults';

export default defineConfig({
  ...defaults,
  colors: { ...defaults.colors, brand: { light: '#2d4bb8', dark: '#8aa2ff' } },
  defaults: { ...defaults.defaults, color: 'brand' },
});
```
defineConfig<
    const T extends YarclShape,
    const R extends Record<string, RecipeDefinition>,
>(
    config: T & Checks<T>,
    extend: (yarcl: TokenAccessor<T>) => { recipes: R & RecipeChecks<R> },
): Omit<T, "recipes"> & { recipes: R }
Extends a validated base config with recipes using autocompleting CSS token references.
Type Parameters
- const T extends YarclShape
- const R extends Record<string, RecipeDefinition>
Parameters
- config: T & Checks<T>
- extend: (yarcl: TokenAccessor<T>) => { recipes: R & RecipeChecks<R> }
Returns Omit<T, "recipes"> & { recipes: R }

Function defineConfig

Type Parameters

Parameters

Returns T

Example

Type Parameters

Parameters

Returns Omit<T, "recipes"> & { recipes: R }

Settings