7onicDESIGN SYSTEM
1 Release·Semantic Versioning

Changelog

Every update to @7onic-ui/react and @7onic-ui/tokens, documented.

v0.1.0Unreleased

Initial release of 7onic Design System.

@7onic-ui/react12 changes
Components (38)7
  • Form: Button, IconButton, ButtonGroup, Toggle, ToggleGroup, Segmented, Checkbox, RadioGroup, Switch, Slider, Input, Textarea, Select, Dropdown
  • Data Display: Avatar, Badge, Card, Table
  • Chart: BarChart, LineChart, AreaChart, PieChart, MetricCard
  • Layout: Divider
  • Overlay: Modal, AlertModal, Drawer, Tooltip, Popover
  • Feedback: Alert, Toast, Progress, Spinner, Skeleton
  • Navigation: Breadcrumb, NavigationMenu, Pagination, Tabs, Accordion
Features5
  • Namespace Export pattern for 22 compound components (`Card.Header`, `Modal.Content`, etc.)
  • Backward-compatible named exports maintained
  • Radix UI Primitives + CVA + forwardRef + Controlled/Uncontrolled
  • Default dark color (`bg-foreground`) across all components
  • 5-step size scale: xs(28) / sm(32) / md(36) / default(40) / lg(48)
@7onic-ui/tokens11 changes
Token Categories (18)6
  • Colors (72 primitive + semantic with text/tint)
  • Typography (11 sizes), FontWeight (3), FontFamily (2)
  • Spacing (18), BorderRadius (9), BorderWidth (5)
  • Shadows (6), IconSizes (6), ZIndex (13), Opacity (21)
  • Duration (8), Easing (5), Scale (4), Breakpoints (5)
  • ComponentSize (12), Animation (54), SemanticTypography (20)
Features5
  • Automated token pipeline: `figma-tokens.json` → `sync-tokens` → 9 distribution files
  • Tailwind v3/v4 dual support with full opacity modifier (`/50`) via RGB channels
  • CSS variables, Tailwind v3 preset, Tailwind v4 theme, JS/ESM/TypeScript/JSON outputs
  • CLI tool: `npx sync-tokens` (--input / --output / --dry-run / --force)
  • Breaking change detection + deprecated alias generation