cairn_ui 0.2.0
cairn_ui: ^0.2.0 copied to clipboard
A modern, accessible Flutter component library: 65 widgets on an engineered token system with OKLCH colors, light and dark themes, and golden tests.
Changelog #
All notable changes to this project are documented here. The format follows Keep a Changelog and this project adheres to Semantic Versioning.
0.2.0 #
Added #
- 20 components ported from daisyUI's catalogue onto the Cairn token system:
CairnStat/CairnStats,CairnStatus,CairnSteps,CairnTimeline,CairnChatBubble,CairnRating,CairnRadialProgress,CairnCountdown,CairnIndicator,CairnStack,CairnSwap,CairnNavbar,CairnDock,CairnHero,CairnDiff,CairnFileInput,CairnList/CairnListItem,CairnLink,CairnFab(with speed dial) and theCairnMockup*frames (window, browser, code, phone). CairnToneandCairnToneColors:success,warningandinfointents alongsideprimary,secondaryanddestructive, authored in OKLCH with light and dark values.CairnIconData.plus.- An "Extended" section in the example catalogue.
- 42 behaviour tests in
test/components/extended_test.dartand 14 golden sheets (light and dark) intest/goldens/extended_goldens_test.dart.
Notes #
- No existing component, token or theme value changed.
0.1.1 #
Fixed #
-
CairnSelectandCairnComboboxopened a menu as wide as the viewport instead of as wide as their trigger.matchAnchorWidthset only a minimum width; menu rows lay out atmainAxisSize.max, so with a loose upper bound the panel expanded to fill whatever maximum it was handed — the whole overlay. The width is now pinned on both sides, so the menu takes the anchor's width. An option longer than the trigger now wraps or ellipsizes rather than widening the menu, which is what a native select does. -
CairnContextMenuthrew "Looking up a deactivated widget's ancestor is unsafe" when it was disposed without ever having been opened. ItsAnimationControllerwas alate finalfield, so a menu nobody right-clicked created its controller for the first time insidedispose()— against an already-deactivated element, wherecreateTickerwalks the tree looking for aTickerMode. The controller is now built ininitState, matching every other stateful component in the library. Found by mounting the whole catalogue on one page incairn_siteand navigating away from it.
0.1.0 #
First release. 45 components on an engineered design token layer, with golden tests enforcing appearance in both themes.
Added #
Tokens (lib/src/tokens/)
- OKLCH to sRGB conversion, since the palette is authored in
oklch()for perceptual uniformity. Values round-trip exactly onto Tailwind's publishedneutralramp. - A 4 logical pixel spacing scale, a proportional radius scale (every step a
multiple of one base), a type scale (rem line heights as Flutter
heightmultiples), motion curves and the box-shadow scale. - Shadow conversion that inverts Flutter's
radius -> sigmaformula, so a CSS blur renders at the Gaussian sigma a browser would produce.
Theme (lib/src/theme/)
CairnTheme, aThemeExtensioncarrying all 19 semantic colour slots plus radius and font family, withlightanddarkpresets.CairnTheme.materialTheme(), which builds aThemeDatawhose Material defaults agree with the Cairn tokens.withOpacityModifier, which scales a colour's existing alpha rather than replacing it, so a partial-strength token means a fraction of what the token already is.
Components — Accordion, Alert, Alert Dialog, Aspect Ratio, Avatar, Avatar Group, Badge, Breadcrumb, Button, Calendar, Card, Carousel, Checkbox, Collapsible, Combobox, Command, Context Menu, Data Table, Date Picker, Dialog, Drawer, Dropdown Menu, Empty, Form Field, Hover Card, Input, Input OTP, Kbd, Label, Menubar, Menu primitives, Navigation Menu, Pagination, Popover, Progress, Radio Group, Scroll Area, Select, Separator, Sheet, Skeleton, Slider, Spinner, Switch, Table, Tabs, Textarea, Toast, Toggle, Toggle Group, Tooltip.
Testing
- Widget tests covering interaction, keyboard handling, focus trapping and intrinsic sizing.
- Golden sheets for every component in both themes, with a bundled Geist font so text shapes identically across machines.