--kc-* tokens

Every CSS custom property the framework reads. Themes set these on :root; components read them via the defaultProperty mixin with hardcoded fallbacks.

Required

Every theme must define these. Omitting one raises a Sass @error.

Token	Consumer	Notes
`--kc-bg`	`base/global`	Page background.
`--kc-fg`	`base/global`	Page foreground (text).
`--kc-link`	`typography/link`	Anchor color in default state.
`--kc-link-hover`	`typography/link`	Anchor color on :hover.
`--kc-border-radius`	`cross-cutting`	Surface radius (cards, buttons).
`--kc-card-bg`	`module/card`	Card surface background.
`--kc-card-fg`	`module/card`	Card text color.

Per-combination tuples

For each named combination: default, light, primary, warning, danger, success: a theme must define a (bg, fg) pair.

Token	Consumer	Notes
`--kc-default-bg`	`element/button, module/card`	Background for combination default.
`--kc-default-fg`	`element/button, module/card`	Foreground for combination default.
`--kc-light-bg`	`element/button, module/card`	Background for combination light.
`--kc-light-fg`	`element/button, module/card`	Foreground for combination light.
`--kc-primary-bg`	`element/button, module/card`	Background for combination primary.
`--kc-primary-fg`	`element/button, module/card`	Foreground for combination primary.
`--kc-warning-bg`	`element/button, module/card`	Background for combination warning.
`--kc-warning-fg`	`element/button, module/card`	Foreground for combination warning.
`--kc-danger-bg`	`element/button, module/card`	Background for combination danger.
`--kc-danger-fg`	`element/button, module/card`	Foreground for combination danger.
`--kc-success-bg`	`element/button, module/card`	Background for combination success.
`--kc-success-fg`	`element/button, module/card`	Foreground for combination success.

Optional

A theme may set these to override the framework's defaults; the framework does not require them.

Token	Consumer	Notes
`--kc-font-family`	`typography/base`	Override the system stack.
`--kc-font-size-base`	`typography/base`	Root font size.
`--kc-size-extra-small`	`cross-cutting`	-
`--kc-size-small`	`cross-cutting`	-
`--kc-size-normal`	`cross-cutting`	-
`--kc-size-medium`	`cross-cutting`	-
`--kc-size-large`	`cross-cutting`	-

Prefix

Every emitted property is prefixed --kc-. The string is defined once in theme/_create.scss as $prefix: '--kc-' and propagated to component-side reads through variables/_default.scss.

JSON export (Style Dictionary / DTCG)

Run pnpm tokens:build to emit one JSON file per shipped theme to dist/tokens/<theme>.json in the W3C Design Tokens Community Group format (also consumed natively by Style Dictionary v4). Use these when you need to feed Krysalicss tokens into iOS/Android pipelines, Figma plugins, or any other consumer that doesn't read CSS custom properties directly.

Each file is shaped as { kc: { <name>: { $value, $type } } }; $type is inferred: border-radius is a dimension, every other shipped token is a color. The export reads each theme's compiled CSS, so any theme file added under src/theme/ is picked up automatically.