kun_ui_icons 2.58.1
kun_ui_icons: ^2.58.1 copied to clipboard
The KunUI icon set for Flutter: the lucide icons its web components render, as a bundled icon font, plus the two images its components draw offline.
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-mutedis slightly stronger. It was the ramp'sdefault-600in light anddefault-500in dark. That cleared AA onbackgroundandcontent1, 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 onbackground, oncontent1, ondefault/20over each and ondefault-100, and fails the build if any is below AA. Placeholders use this token, so placeholders on tinted inputs get the same fix.{c}-textis now also measured on its own100step, 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, adefault/15band on thedefault-100chat 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
primaryis 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 nowforeground-muted. - The time shown over a photo now sits on
bg-black/55instead 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.
- A deleted reply's "message deleted" line was
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-mutedis now a colour value instead of an alias to a ramp step. In Flutter,KunColorScheme.foregroundMutedtakes 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(Tailwindtext-primary-text,text-danger-text, …), one per semantic colour,defaultincluded.- 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}-textis 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,borderedandflatvariants (buttons, chips, badges, menu items) andkunTextClasses, which covers KunLink, selected tabs, active steps and reactions. - KunInfo's
borderedtext, and its darkflatdanger 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-primaryfor readable text, switch it totext-primary-text.text-primarystays 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, wheredefault-400measured 2.31–3.58:1. This covers the base-layer::placeholderrule (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-mutedfor secondary text: descriptions, helper text, timestamps, counts, empty states and meta lines. It isdefault-600in light mode anddefault-500in dark mode. The token generator now fails the build unless it clears 4.5:1 (WCAG AA) on bothbackgroundandcontent1in 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-500ortext-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 (
::placeholderstaysdefault-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
500step 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-500ortext-default-400withtext-foreground-muted. - In Flutter (
kun_ui_tokens),KunColorSchemegainsforegroundMuted. Replacescheme.neutral.shade500withscheme.foregroundMuted. - Keep the old steps for anything that is not text meant to be read.
KunColorScheme's constructor gains a requiredforegroundMutedparameter. Only code that builds a scheme by hand needs to pass it.KunColors.lightandKunColors.darkalready carry it. - What it costs: in light mode that text is now a step darker. Dark mode renders exactly as before, because its value (
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 ofKunButtons,flatfor the current page andlightotherwise. The kungal Flutter app wrote the same thing a second time. It is a full-widthKunButtonwith alabel, anicon(or an#iconslot, which takes aKunBadge-wrapped icon for an unread count), and anhref.currentpaints the itemflatincolorand addsaria-current="page", so a screen reader announces the current page. The forum's hand-written items never announced it.stackedputs 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.cssdeclares--kun-font-mono, and.kun-prosesets bothcodeandkbdin it, sokbdgains the full stack in place ofui-monospace, monospace.kun_ui_tokenscarries it asKunFontFamilies.mono, withmonoFallbackand amonoStyleto merge onto aKunTextstep. Flutter has noui-monospacekeyword, so that entry is dropped from the Dart stack.monospacestays last, because Android and Linux resolve that name to the system's fixed-width face.KunImageis portable in the Flutter contract. It had been marked web-only for its@nuxt/imagepipeline, but the layer KunImage adds itself also crosses to Flutter: the ThumbHash blur-up, the pulse skeleton, the aspect-ratio box,objectFit,fallbackSrcand theload/errorevents. 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 newsrcbrings 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.loadingImagereaches the Flutter icon package.KunLoading's mascot has always been inlined in@kungal/ui-vueasKUN_LOADING_IMAGE, but the Flutter generator emitted onlynullImageandavatarFallback, sokun_ui_iconscarried two of the three bitmaps KunUI draws. A Flutter port ofKunLoadingtherefore 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 ownpubspec.yaml. Nothing changes for a web consumer.KunProgressno longer reports a range a screen reader cannot use.aria-valuenowhas always carried the percentage, whilearia-valuemaxcarriedmax— so a bar of 60 out of 60 announced "100 out of 60" to assistive technology whenevermaxwas not 100, and the ratio a screen reader computes from the two was wrong for everymaxbut the default. The ceiling is100now, which is the rangearia-valuenowwas already being measured against, and it agrees with the percentageshowLabelrenders.maxstill 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.cssremoved 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
tabindexelements show it when focused from the keyboard. If an element already draws its own focus style, addoutline-noneto it, as KunUI's own controls do; that utility wins over the base layer. - Text fields are unchanged.
input,textareaand[contenteditable]keep the old reset, because they match:focus-visibleon 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
transitionclass animated into the ring from a black 3px outline. The side effect: a bareoutlineutility with no colour on a button or link now draws in the ring's colour. Add a colour utility if you wantcurrentColorback.
Four components needed fixes of their own:
- KunSwitch: its focus ring never appeared. The
peer-focus-visibleclasses were on an element that is not a sibling of the input, whichpeer-*requires. - KunRating and the remove button in KunTagInput: both set
focus:outline-nonewithout 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.
- Your own elements get the ring too. Buttons, links and
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_tokensnow 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),midOpacity0.5) andKunSpin(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. AnAnimationControllerof halfKunPulse.durationrunningrepeat(reverse: true)under aCurvedAnimationwithKunPulse.curvematched Chromium within 0.0008 opacity across two cycles; easing the whole cycle once is off by up to 0.14.KunRoundedis Tailwind's own radius scale. KunSkeleton's text variant, KunLightbox and KunCommandPalette userounded-mdand its neighbours directly. UnlikeKunRadius, the scale ignores--kun-radius-scale.KunFontWeightsis Tailwind's weight scale:font-mediumisKunFontWeights.medium.KunColorScheme.borderis theborder-kunhairline,neutral.shade100.KunColors.globalOpacity(0.7) is the alpha the web draws--color-backgroundand--color-default-100at. The schemes still store both opaque, so webbg-default-100isneutral.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.jsongains the same values:fontWeight,rounded,motion.pulse,motion.spin,opacity.globaland aborderalias 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:tokensbuilds the Vue and core sources with Tailwind and fails when a component depends on a theme variable thatkun_ui_tokensneither generates nor lists inNOT_GENERATEDwith a reason. A class, a breakpoint or avar()in a<style>block all count.@kungal/ui-tokensgains@tailwindcss/oxideandtailwindcssas 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
KunShadowsnow draws in Flutter the way the CSS doesWeb changes (small, but visible):
KunTextarea's counter no longer readsn/100007.maxlengthdefaulted to 100007, soshow-char-countwithout amaxlengthprinted that number as the limit, and downstream pages were showing it. The default is gone: withmaxlengththe counter readsused/maxlength, without it the bare count. The cost: a textarea with nomaxlengthno longer has a hidden native cap of 100007 characters. If your server enforces a length, pass it asmaxlengthso the field and the counter know about it.KunAvatarandKunUserChip:disableFloatingandfloatingPositionare 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.KunUserChipstopped passing them on to an avatar that ignored them.KunTabandKunCarouselscroll buttons usebackdrop-blur-sminstead of the barebackdrop-blur, which Tailwind v4 keeps only as a deprecated alias. Both are 8px; nothing renders differently.@kungal/ui-coreexportsKUN_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.jsoncarry adeprecatedfield on them. - The docs changelog now shows the notes of releases whose changeset named
ui-core,ui-tokensorui-nuxtrather thanui-vue; 13 of them, 2.38.0 included, read "updated with dependencies" until now.
Flutter (
kun_ui_tokens,kun_ui_icons):KunShadowsblur is converted, not copied — shadows look different, and correct. CSS blurs a shadow with σ = blur / 2;BoxShadowturnsblurRadiusinto σ = 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.lgon a rounded box had 6249 color channels more than 2/255 off before this fix and 33 after. If you wrote your ownBoxShadowfrom a CSS value, it needs the same conversion.- More Tailwind defaults, read from Tailwind (like
KunSpacingandKunTextin 2.38.0):KunContainerWidths(max-w-*, 3xs–7xl),KunBreakpointWidths(sm–2xl),KunBlur(blur-*/backdrop-blur-*; a step is a standard deviation and passes straight intoImageFilter.blur),KunShadows.glow(color)(shadow-lgin a tint — theshadowvariant's glow) andKunDefaultTransition(the 150 ms curve that a baretransitionruns, which is most of KunUI's hover and press feedback). Names with a leading digit becomexl2,xs3and so on.KunBreakpointWidthsis deliberately notKunBreakpoints, whichkun_uialready defines. KunColors.whiteandKunColors.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.closeVelocityis in px/s, the unit ofDragEndDetails. The web's other drag constants (claim slop, velocity window, scroll cooldown, open grace) are tuned to browser mechanics and stay web-only.KunImages.nullImageandKunImages.avatarFallbackinkun_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.whiteandcolor.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
shadowvariant keeps Tailwind'sshadow-lgrather than switching toshadow-kun-lg, which is the elevation scale and would restyle everyvariant="shadow"button.
2.38.0 #
Minor Changes #
-
8132bef: Spacing and the type scale are now generated tokens:
KunSpacingandKunTextinkun_ui_tokens,spacingandtextintokens.dtcg.jsonUntil 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
--spacingor--text-*— its components are written against Tailwind v4's default theme. Sogen-tokens.mjsreads both straight out oftailwindcss/theme.cssrather 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 owntokens.cssever starts declaring either. The values describe the scale the components were designed at; a site that overrides--spacingor--text-*in its own@themerenders differently from them.- Dart.
KunSpacing.unit(4) is the step every spacing utility multiplies —px-4isKunSpacing.unit * 4, which stays aconstexpression.KunText.xs…KunText.xl9are constTextStyles carrying onlyfontSizeandheight(2xl–9xlbecomexl2–xl9, since a Dart name cannot start with a digit); colour, weight and family stay null and inherit. - Half-leading. Every
KunTextstyle setsleadingDistribution: TextLeadingDistribution.even, which is what CSS does. Measured with the same font metrics in Chromium andflutter test, Flutter's defaultproportionalsits the baseline 1.2–2.6 px lower than the browser atxs–4xl;evenmatches it to within Chromium's pixel rounding. - DTCG.
spacing.unitis adimension; eachtext.<step>is afontSizedimension plus a unitlesslineHeightnumber. They are nottypographycomposites, 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.
- Dart.
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 #
- Initial release of the generated KunUI icon package.