kun_ui_tokens 2.38.0

Generated design tokens for the KunUI design system: semantic colors, radius, motion, elevation, spacing and type scale, emitted from the same source as the web stylesheet.

kun_ui_tokens

The Dart/Flutter token layer of KunUI, the shared design system of the NextMoe/KunGal ecosystem. It is the sibling of the npm package @kungal/ui-tokens: the same generator emits the web stylesheet, this package, and a DTCG export from one in-memory model, so the two platforms cannot drift.

Component code is not shared — Flutter has no DOM and no CSS cascade, so the widgets are written separately. Tokens are shared, and they are generated.

Install

dependencies:
  kun_ui_tokens: ^2.38.0

Requires Flutter >=3.27.0: every color is a const Color.from(...), the normalised-double constructor from the wide-gamut migration.

Use

import 'package:flutter/widgets.dart';
import 'package:kun_ui_tokens/kun_ui_tokens.dart';

final scheme = MediaQuery.platformBrightnessOf(context) == Brightness.dark
    ? KunColors.dark
    : KunColors.light;

Container(
  decoration: BoxDecoration(
    color: scheme.primary.solid,
    borderRadius: BorderRadius.circular(KunRadius.md),
    boxShadow: KunShadows.md,
  ),
  padding: const EdgeInsets.symmetric(
    horizontal: KunSpacing.unit * 4, // web px-4
    vertical: KunSpacing.unit * 2, // web py-2
  ),
  child: Text(
    'Kun',
    style: KunText.sm.copyWith(color: scheme.primary.onSolid),
  ),
);

AnimatedContainer(
  duration: KunDurations.base,
  curve: KunEasing.standard,
  // ...
);

There is deliberately no KunTheme here. This package is theme-system agnostic — plain const holders, no ThemeExtension, no Material coupling — so the eventual widget layer stays free to pick its own theming model.

KunSpacing and KunText are the spacing unit and the type scale KunUI's components are written against. On the web those are Tailwind v4's defaults (--spacing, --text-*), which KunUI does not redeclare, so the generator reads them straight out of Tailwind's theme.css. A site that overrides them in its own @theme renders differently; these are the design values. Each KunText style sets leadingDistribution: TextLeadingDistribution.even — CSS's half-leading — because Flutter's default, proportional, sets the glyphs lower in the line box than a browser does.

Beyond the easing/duration scale, KunShatterPhysics carries the ballistic model behind the web KunShatter component — outward impulse, air-drag decay, gravity as a t² acceleration — as plain constants with the equations in the doc comments. A Flutter shatter that samples that model bakes the same trajectories the web bakes into its keyframes, instead of re-tuning the feel by eye.

Guarantees

• Contrast. Every onSolid clears WCAG AA (≥ 4.5:1) against its solid in both modes. The generator asserts it and exits non-zero otherwise, so an illegible pair cannot reach a release.
• Parity. Colors are sRGB-clamped OKLCH, the same clampChroma pass the CSS goes through, so an app and the websites render the same color.
• Version lockstep. This package's version always equals the version of the four @kungal/* npm packages; they are bumped together and published from one commit. This release is kun_ui_tokens 2.38.0.

Contributing

lib/src/*.g.dart is generated. Edit packages/ui-tokens/scripts/gen-tokens.mjs and run pnpm --filter @kungal/ui-tokens gen; a PR that edits lib/src directly is regenerated away by CI.

License

AGPL-3.0-only. See LICENSE.