kun_ui_tokens 2.58.1

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

2.58.1

• Version bump only, to stay in lockstep with the KunUI release train.

2.58.0

• Version bump only, to stay in lockstep with the KunUI release train.

2.57.1

• Version bump only, to stay in lockstep with the KunUI release train.

2.57.0

• Version bump only, to stay in lockstep with the KunUI release train.

2.56.2

• Version bump only, to stay in lockstep with the KunUI release train.

2.56.1

Patch Changes

• 26ffcad: Secondary text now clears WCAG AA on the fills it sits on, not only on the bare page.

  • foreground-muted is slightly stronger. It was the ramp's default-600 in light and default-500 in dark. That cleared AA on background and content1, but not on the neutral fills muted text also sits on: a hovered or keyboard-highlighted row (bg-default/20), a keycap (bg-default-100) and a code-block header (bg-default/15). On those it measured as low as 3.95:1 in light and 3.93:1 in dark, and a KunKbd keycap in dark mode read 4.36:1. It is now a grey of its own between the ramp steps: OKLCH L 0.48 in light and 0.66 in dark. That is the smallest move that clears 4.5:1 on all of those fills. On the page it is now 5.98:1 in light and 6.35:1 in dark, up from 5.03:1 and 5.42:1. The token generator now measures it on background, on content1, on default/20 over each and on default-100, and fails the build if any is below AA. Placeholders use this token, so placeholders on tinted inputs get the same fix. {c}-text is now also measured on its own 100 step, the fill of the viewer's own chat bubble; every hue already cleared it.
  • Text on a tint laid over another tinted surface uses text-default-text, as a flat default chip's label does. This covers KunChatMessageList's unread divider, a default/15 band on the default-100 chat wallpaper (4.10:1 in light), and KunChatText's code-block language label inside a coloured bubble (4.12:1 in dark).
  • No transparency on a fill's on-colour. White on primary is 4.59:1, so any alpha drops it below AA.
    • KunChatConversationItem's selected row drew its time at 80% and its preview at 85%, which measured 3.50:1 and 3.76:1.
    • KunInfo's solid and shadow descriptions were drawn at 90% (4.02:1).
    • Both are now at full strength.
  • KunChatConversationItem muted-chat badge. The unread badge of a muted chat was white on default-400, 2.53:1 in light. It is now the solid default fill with its own on-colour, 4.87:1.
  • KunChatBubble.
    • A deleted reply's "message deleted" line was default-500 (3.20:1 in light); it is now foreground-muted.
    • The time shown over a photo now sits on bg-black/55 instead of /45. White on black/45 over a white screenshot is 3.35:1, and /55 is the lowest opacity that clears 4.5:1 over any image.

  What it costs: muted text renders slightly darker in light mode and slightly lighter in dark mode everywhere it is used. Your code needs no changes. In tokens.dtcg.json, foreground-muted is now a colour value instead of an alias to a ramp step. In Flutter, KunColorScheme.foregroundMuted takes the new value; its API is unchanged.

  Measured in Chromium on every demo across the 77 component pages, in both modes. The only text still below AA is:

  • disabled controls;
  • KunLoading's outlined caption, and the content dimmed under its mask;
  • a reaction colour the consumer chose;
  • text on an image or a gradient.

2.56.0

Minor Changes

• 570067b: Coloured text and placeholders now clear WCAG AA (4.5:1). A kungal Flutter app's contrast check measured KunUI's own coloured text and placeholders below it, and the web uses the same classes.

  New tokens:

  • --color-{color}-text (Tailwind text-primary-text, text-danger-text, …), one per semantic colour, default included.
  • In Dart: KunColorScale.text.

  Why a new token. A fill colour used as text measured 1.75–4.42:1 on the light page for every colour but default, and in dark mode primary and danger fell to 3.87:1 and 3.66:1 on cards. {color}-text is the ramp step closest to the fill that clears 4.5:1 on:

  • the page background;
  • cards (content1);
  • the colour's own 20% tint over each, which is the hover and keyboard-focus fill of a light item and the fill of a flat chip.

  The token generator measures all four in both modes and fails the build if one misses. The steps it picks:

  Mode	Step 600	Step 700
  Light	secondary, warning	primary, success, danger, info, default
  Dark	every colour except secondary	secondary

  What moved to it:

  • The light, bordered and flat variants (buttons, chips, badges, menu items) and kunTextClasses, which covers KunLink, selected tabs, active steps and reactions.
  • KunInfo's bordered text, and its dark flat danger and info.
  • Every form error message and required asterisk.
  • Chat sender names, reply and pinned titles, links, mentions, typing and status text.

  What you'll see. Coloured text is one step darker in light mode and one step lighter in dark mode. Icons, SVG strokes, spinners and text on solid fills keep their colours.

  If your own markup uses text-primary for readable text, switch it to text-primary-text. text-primary stays the fill colour, meant for fills, borders and icons.

  Placeholders now use foreground-muted, the secondary-text colour: 5.52:1 light and 4.85:1 dark, where default-400 measured 2.31–3.58:1. This covers the base-layer ::placeholder rule (every native input), KunSelect's and KunDatePicker's empty trigger, KunChatComposer and KunCommandPalette. A placeholder is often the only label a field has, such as "全部平台" in a filter. Disabled text, outside-month days and icons keep their lighter steps: WCAG exempts disabled controls, and the others are not text.

  Measured on the docs site in Chromium: 227 text elements in each mode across the button, chip, tab, link, select, input, info, dropdown, chat bubble, date picker and textarea pages all clear 4.5:1. The lowest are a warning chip (4.77:1 light, 4.87:1 dark) and the dark placeholder (4.85:1).

2.55.0

• Version bump only, to stay in lockstep with the KunUI release train.

2.54.0

• Version bump only, to stay in lockstep with the KunUI release train.

2.53.0

Minor Changes

• 461df96: New token foreground-muted for secondary text: descriptions, helper text, timestamps, counts, empty states and meta lines. It is default-600 in light mode and default-500 in dark mode. The token generator now fails the build unless it clears 4.5:1 (WCAG AA) on both background and content1 in both modes. Measured: 5.03:1 and 5.53:1 in light, 5.42:1 and 4.85:1 in dark.

  KunUI's own components use it for secondary text. They used to set that text in text-default-500 or text-default-400, which measure 3.33:1 and 2.31:1 on the light page background, so both fell below AA. Affected text includes field descriptions and helper text, tab labels that are not selected, divider labels, user-chip descriptions, character counts, empty states, timeline and chat timestamps, conversation previews and command-palette meta lines.

  • What it costs: in light mode that text is now a step darker. Dark mode renders exactly as before, because its value (default-500) is the one it already used.
  • What stays the same: placeholders (::placeholder stays default-400), the text of an empty select or date picker, disabled states, outside-month days and icons.

  Migrating your own text. No single grey clears 4.5:1 against both the light and the dark page, and the ramp's 500 step is the same value in both modes. So readable secondary text belongs on this token, not on a fixed step:

  • In Vue, replace text-default-500 or text-default-400 with text-foreground-muted.
  • In Flutter (kun_ui_tokens), KunColorScheme gains foregroundMuted. Replace scheme.neutral.shade500 with scheme.foregroundMuted.
  • Keep the old steps for anything that is not text meant to be read.

  KunColorScheme's constructor gains a required foregroundMuted parameter. Only code that builds a scheme by hand needs to pass it. KunColors.light and KunColors.dark already carry it.

2.52.1

• Version bump only, to stay in lockstep with the KunUI release train.

2.52.0

• Version bump only, to stay in lockstep with the KunUI release train.

2.51.1

• Version bump only, to stay in lockstep with the KunUI release train.

2.51.0

• Version bump only, to stay in lockstep with the KunUI release train.

2.50.1

• Version bump only, to stay in lockstep with the KunUI release train.

2.50.0

• Version bump only, to stay in lockstep with the KunUI release train.

2.49.1

• Version bump only, to stay in lockstep with the KunUI release train.

2.49.0

• Version bump only, to stay in lockstep with the KunUI release train.

2.48.0

• Version bump only, to stay in lockstep with the KunUI release train.

2.47.2

• Version bump only, to stay in lockstep with the KunUI release train.

2.47.1

• Version bump only, to stay in lockstep with the KunUI release train.

2.47.0

• Version bump only, to stay in lockstep with the KunUI release train.

2.46.0

• Version bump only, to stay in lockstep with the KunUI release train.

2.45.0

Minor Changes

• ff569d7: KunNavItem, one destination of an app shell's navigation. Every kungal site has hand-written it: the forum's rail and sidebar are lists of KunButtons, flat for the current page and light otherwise. The kungal Flutter app wrote the same thing a second time. It is a full-width KunButton with a label, an icon (or an #icon slot, which takes a KunBadge-wrapped icon for an unread count), and an href. current paints the item flat in color and adds aria-current="page", so a screen reader announces the current page. The forum's hand-written items never announced it. stacked puts the icon over the label for a rail or a bottom bar. KunUI does not read the route: the app decides which item is current, and it arranges the items itself, in a rail, a sidebar or a bar.

  The code face is a token now. tokens.css declares --kun-font-mono, and .kun-prose sets both code and kbd in it, so kbd gains the full stack in place of ui-monospace, monospace. kun_ui_tokens carries it as KunFontFamilies.mono, with monoFallback and a monoStyle to merge onto a KunText step. Flutter has no ui-monospace keyword, so that entry is dropped from the Dart stack. monospace stays last, because Android and Linux resolve that name to the system's fixed-width face.

  KunImage is portable in the Flutter contract. It had been marked web-only for its @nuxt/image pipeline, but the layer KunImage adds itself also crosses to Flutter: the ThumbHash blur-up, the pulse skeleton, the aspect-ratio box, objectFit, fallbackSrc and the load / error events. Only the <NuxtImg> optimisation props and the native <img> hints (loading, decoding, fetchpriority) stay web-only.

  KunImage's blur-up now cross-fades as its comments always said it did. The ThumbHash placeholder and the skeleton were removed the moment the image loaded, so the image faded in over the bare page: measured in Chromium, the placeholder was gone from the DOM in the same frame the image's opacity left 0, and the midpoint of the fade was a washed-out image on white. The placeholder now stays at full opacity until the image has finished fading in (--kun-dur-slow), and only then fades itself, so a transparent image does not keep it showing through. A failed load still fades it out at once, and a new src brings it back with no transition.

2.44.0

• Version bump only, to stay in lockstep with the KunUI release train.

2.43.0

Minor Changes

• 070a75a: KunImages.loadingImage reaches the Flutter icon package. KunLoading's mascot has always been inlined in @kungal/ui-vue as KUN_LOADING_IMAGE, but the Flutter generator emitted only nullImage and avatarFallback, so kun_ui_icons carried two of the three bitmaps KunUI draws. A Flutter port of KunLoading therefore could not exist: the component's default form is that image, and taking it as a required parameter instead would be a different component from the web's. The generator now decodes it alongside the other two — the same 500×333 WebP the web renders, bundled as a package asset, so nothing needs declaring in a consumer's own pubspec.yaml. Nothing changes for a web consumer.

  KunProgress no longer reports a range a screen reader cannot use. aria-valuenow has always carried the percentage, while aria-valuemax carried max — so a bar of 60 out of 60 announced "100 out of 60" to assistive technology whenever max was not 100, and the ratio a screen reader computes from the two was wrong for every max but the default. The ceiling is 100 now, which is the range aria-valuenow was already being measured against, and it agrees with the percentage showLabel renders. max still scales the input; it simply is not the reported ceiling. No visual change, and no template change for a consumer.

2.42.3

• Version bump only, to stay in lockstep with the KunUI release train.

2.42.2

• Version bump only, to stay in lockstep with the KunUI release train.

2.42.1

• Version bump only, to stay in lockstep with the KunUI release train.

2.42.0

• Version bump only, to stay in lockstep with the KunUI release train.

2.41.0

Minor Changes

• 450db2e: Keyboard focus is visible again. @kungal/ui-tokens/base.css removed every outline with *:focus { outline: none } and drew nothing in its place. Tabbing through a KunUI app therefore showed no focus on many controls: the links in KunAvatar, KunUserChip, KunLink, KunBrand and a linked KunCard, and the buttons of KunTab, KunAccordion, KunRating, KunReaction and KunCarousel, among others. In Chrome 153, 26 of the docs site's component pages had at least one such control. The base layer now draws a ring on :focus-visible: 2px, primary at 50%, 2px outside the element. Keyboard focus shows it; a mouse click does not.

  What this changes for you if you import base.css:

  • Your own elements get the ring too. Buttons, links and tabindex elements show it when focused from the keyboard. If an element already draws its own focus style, add outline-none to it, as KunUI's own controls do; that utility wins over the base layer.
  • Text fields are unchanged. input, textarea and [contenteditable] keep the old reset, because they match :focus-visible on a click as well. KunUI's fields draw their ring on the wrapper instead.
  • Interactive elements carry the ring's colour, width and offset while unfocused, with no outline style, so that focusing changes only the style. Without this, an element with a transition class animated into the ring from a black 3px outline. The side effect: a bare outline utility with no colour on a button or link now draws in the ring's colour. Add a colour utility if you want currentColor back.

  Four components needed fixes of their own:

  • KunSwitch: its focus ring never appeared. The peer-focus-visible classes were on an element that is not a sibling of the input, which peer-* requires.
  • KunRating and the remove button in KunTagInput: both set focus:outline-none without drawing a ring of their own.
  • KunTabPanel: same as above. It is a tab stop while it is the active panel.
  • KunTab: the ring now sits inside the tab, in the tab's own text colour at 50%. Drawn outside, it was clipped by the scrolling tab strip on the underlined and pills variants. Drawn in primary, it disappeared on a selected primary solid or pills tab.

2.40.3

• Version bump only, to stay in lockstep with the KunUI release train.

2.40.2

• Version bump only, to stay in lockstep with the KunUI release train.

2.40.1

• Version bump only, to stay in lockstep with the KunUI release train.

2.40.0

Minor Changes

• 905b880: kun_ui_tokens now carries every theme value a KunUI component uses, and the generator fails when a component starts using one it does not.

  For the Flutter port

  • KunPulse (animate-pulse: 2 s, Cubic(0.4, 0, 0.6, 1), midOpacity 0.5) and KunSpin (animate-spin: 1 s, linear) unblock KunSkeleton, KunAvatar's loading layer and KunProgress's indeterminate ring. The web eases each half of a pulse cycle. An AnimationController of half KunPulse.duration running repeat(reverse: true) under a CurvedAnimation with KunPulse.curve matched Chromium within 0.0008 opacity across two cycles; easing the whole cycle once is off by up to 0.14.
  • KunRounded is Tailwind's own radius scale. KunSkeleton's text variant, KunLightbox and KunCommandPalette use rounded-md and its neighbours directly. Unlike KunRadius, the scale ignores --kun-radius-scale.
  • KunFontWeights is Tailwind's weight scale: font-medium is KunFontWeights.medium.
  • KunColorScheme.border is the border-kun hairline, neutral.shade100.
  • KunColors.globalOpacity (0.7) is the alpha the web draws --color-background and --color-default-100 at. The schemes still store both opaque, so web bg-default-100 is neutral.shade100.withValues(alpha: KunColors.globalOpacity).
  • A few values stay unported on purpose, each with its reason in packages/ui-tokens/scripts/theme-coverage.mjs: the --z-kun-* layers, KunLoli's animate.css keyframes (copy them with the component, as with Pagination's pop), the opt-in glass knobs and the live --kun-scrollbar-width.
  • tokens.dtcg.json gains the same values: fontWeight, rounded, motion.pulse, motion.spin, opacity.global and a border alias in each mode.

  For websites

  • KunImage's loading placeholder, and with it KunAvatar's, now pulses only when the user has not asked for reduced motion, as KunSkeleton already did. Nothing else renders differently.

  For contributors

  • pnpm gen:tokens builds the Vue and core sources with Tailwind and fails when a component depends on a theme variable that kun_ui_tokens neither generates nor lists in NOT_GENERATED with a reason. A class, a breakpoint or a var() in a <style> block all count. @kungal/ui-tokens gains @tailwindcss/oxide and tailwindcss as dev dependencies for this; consumers install nothing new.

2.39.0

Minor Changes

• 866effe: More of the web layer is now generated for Flutter — the rest of the Tailwind scales the components use, the sheet drag's feel, and the two offline images — and KunShadows now draws in Flutter the way the CSS does

  Web changes (small, but visible):

  • KunTextarea's counter no longer reads n/100007. maxlength defaulted to 100007, so show-char-count without a maxlength printed that number as the limit, and downstream pages were showing it. The default is gone: with maxlength the counter reads used/maxlength, without it the bare count. The cost: a textarea with no maxlength no longer has a hidden native cap of 100007 characters. If your server enforces a length, pass it as maxlength so the field and the counter know about it.
  • KunAvatar and KunUserChip: disableFloating and floatingPosition are marked @deprecated. Neither component has a floating card any more; the props still type-check so existing call sites compile, and your editor now shows them struck through. KunUserChip stopped passing them on to an avatar that ignored them.
  • KunTab and KunCarousel scroll buttons use backdrop-blur-sm instead of the bare backdrop-blur, which Tailwind v4 keeps only as a deprecated alias. Both are 8px; nothing renders differently.
  • @kungal/ui-core exports KUN_SWIPE_DISMISS_PHYSICS — the distance ratio, flick velocity and rubber-band limit behind the KunModal/KunDrawer drag-to-dismiss, now read from the shared motion manifest instead of literals in the composable. Same values, no behaviour change.
  • The docs props tables and page Markdown now mark deprecated props, and component-meta.json / contracts/component-contracts.json carry a deprecated field on them.
  • The docs changelog now shows the notes of releases whose changeset named ui-core, ui-tokens or ui-nuxt rather than ui-vue; 13 of them, 2.38.0 included, read "updated with dependencies" until now.

  Flutter (kun_ui_tokens, kun_ui_icons):

  • KunShadows blur is converted, not copied — shadows look different, and correct. CSS blurs a shadow with σ = blur / 2; BoxShadow turns blurRadius into σ = 0.57735 × blurRadius + 0.5. Every earlier release passed the CSS number straight through, so every elevation drew about 20% softer than the web. Measured against Chromium on the same shapes, KunShadows.lg on a rounded box had 6249 color channels more than 2/255 off before this fix and 33 after. If you wrote your own BoxShadow from a CSS value, it needs the same conversion.
  • More Tailwind defaults, read from Tailwind (like KunSpacing and KunText in 2.38.0): KunContainerWidths (max-w-*, 3xs–7xl), KunBreakpointWidths (sm–2xl), KunBlur (blur-* / backdrop-blur-*; a step is a standard deviation and passes straight into ImageFilter.blur), KunShadows.glow(color) (shadow-lg in a tint — the shadow variant's glow) and KunDefaultTransition (the 150 ms curve that a bare transition runs, which is most of KunUI's hover and press feedback). Names with a leading digit become xl2, xs3 and so on. KunBreakpointWidths is deliberately not KunBreakpoints, which kun_ui already defines.
  • KunColors.white and KunColors.black, the two colors that do not change with the mode.
  • KunSwipeDismissPhysics — the feel of dragging a bottom sheet closed, generated from the same manifest as the web constant. closeVelocity is in px/s, the unit of DragEndDetails. The web's other drag constants (claim slop, velocity window, scroll cooldown, open grace) are tuned to browser mechanics and stay web-only.
  • KunImages.nullImage and KunImages.avatarFallback in kun_ui_icons: KunNull's mascot and KunAvatar's last fallback, bundled as package assets (the exact bytes the web inlines as data URIs), so a Flutter app draws them without a network request and without declaring anything in its own pubspec.
  • DTCG gains container, breakpoint, blur, motion.defaultTransition, color.white and color.black.

  Not generated, on purpose: Pagination's timings and pop keyframes and Select's type-ahead delay are one component's own choreography, so the Flutter port copies them from source. The shadow variant keeps Tailwind's shadow-lg rather than switching to shadow-kun-lg, which is the elevation scale and would restyle every variant="shadow" button.

2.38.0

Minor Changes

• 8132bef: Spacing and the type scale are now generated tokens: KunSpacing and KunText in kun_ui_tokens, spacing and text in tokens.dtcg.json

  Until now the token exports carried colour, radius, motion and elevation, but not the two scales every component is laid out with. The Flutter port felt the gap first: a form label had to hand-type fontSize: 14, height: 20 / 14, and a gallery heading borrowed the control-size table because there was no type scale to take.

  Where the numbers come from. KunUI has never declared --spacing or --text-* — its components are written against Tailwind v4's default theme. So gen-tokens.mjs reads both straight out of tailwindcss/theme.css rather than restating them: a Tailwind upgrade that changes a default shows up as a diff in the generated files, and the generator refuses to run if KunUI's own tokens.css ever starts declaring either. The values describe the scale the components were designed at; a site that overrides --spacing or --text-* in its own @theme renders differently from them.

  • Dart. KunSpacing.unit (4) is the step every spacing utility multiplies — px-4 is KunSpacing.unit * 4, which stays a const expression. KunText.xs … KunText.xl9 are const TextStyles carrying only fontSize and height (2xl–9xl become xl2–xl9, since a Dart name cannot start with a digit); colour, weight and family stay null and inherit.
  • Half-leading. Every KunText style sets leadingDistribution: TextLeadingDistribution.even, which is what CSS does. Measured with the same font metrics in Chromium and flutter test, Flutter's default proportional sits the baseline 1.2–2.6 px lower than the browser at xs–4xl; even matches it to within Chromium's pixel rounding.
  • DTCG. spacing.unit is a dimension; each text.<step> is a fontSize dimension plus a unitless lineHeight number. They are not typography composites, because the 2025.10 format requires all five of that type's sub-values, and family, weight and letter-spacing are not part of this scale.

  Nothing changes for web consumers: no CSS changed.

2.37.0

• Version bump only, to stay in lockstep with the KunUI release train.

2.36.0

• Version bump only, to stay in lockstep with the KunUI release train.

2.35.1

• Version bump only, to stay in lockstep with the KunUI release train.

2.35.0

• Version bump only, to stay in lockstep with the KunUI release train.

2.34.0

• Version bump only, to stay in lockstep with the KunUI release train.

2.33.0

Minor Changes

• d672af5: Tokens now generate into three targets: the CSS, a Dart package, and a DTCG export

  gen-tokens.mjs has always been the single source of truth for every KunUI colour — the OKLCH hue policy, the shared lightness ramp, and the WCAG-AA assertion that fails the build when a solid/on-colour pair drops below 4.5:1. It now emits three sibling outputs from that one in-memory model instead of one:

  • palette.generated.css — byte-identical. Nothing about the web layer changes. Same values, same file.
  • kun_ui_tokens on pub.dev, generated into packages/ui-tokens-flutter. The NextMoe/KunGal apps are Flutter, which has no DOM, no CSS cascade and no Tailwind, so a Flutter app could only ever have hand-transcribed the palette. Every design system that does that drifts on its first retheme. This package is emitted from the same numbers the stylesheet ships — sRGB-clamped OKLCH through the same clampChroma pass — as plain const holders (KunColors.light.primary.solid, KunEasing.standard, KunRadius.md, KunShadows.md) with no ThemeExtension and no Material coupling. Its version is locked to the npm version: 2.32.1 here is 2.32.1 there.
  • A DTCG 2025.10 export at the new subpath @kungal/ui-tokens/tokens.dtcg.json, for Figma and external token tooling. Colours carry their OKLCH components plus an sRGB hex fallback; radius, easing, duration and elevation carry their spec types. It is an export, not the pivot — a resolved-value format cannot express the hue policy or the contrast assertion, so the generator stays the source of truth.

  The generator also now reads the radius, motion and elevation tokens back out of tokens.css rather than duplicating them, which turns that file's "keep the @theme and :root copies in sync" instruction into a build failure when they disagree.

  Nothing to do as a consumer: no CSS changed, and the new export subpath is additive.

2.32.1

• Initial release of the generated KunUI token package.