Changelog

Every release of Zellify: what is new, what changed, and what your code has to do.

1.0.010 November 2026

Zellify's dashboard tokens rebuilt on shadcn/ui's roles: every text colour now passes contrast in light and dark, dark mode has real layers, and each component exists in code and in the Figma library under the same name.

AddedAll 63 shadcn/ui components on Zellify's tokens, each with examples, its code and its props.
AddedZellify patterns built on the base: agent rail, change card, metric card, funnel node, A/B test and status pill, each with loading, empty and error states. · Agent rail, Change card, Metric card, Funnel node, A/B test, Status pill
AddedStatus colours that pass in both modes, three tokens each: success, warning and info as a solid, a foreground for text and a muted tint. Borders use the solid at 30%.
ChangedMuted text is #6b6b70 in light (was #86868a), so descriptions, timestamps and placeholders reach 4.5:1.
ChangedThe primary fill is #c74434 (was #f3533f) so its white label reaches 4.88:1. #f3533f stays as brand: logo, focus ring, dots and charts. · Button, Badge, Switch, Checkbox
ChangedHover on a primary button darkens instead of lightening. · Button
ChangedDark surfaces step up one by one: page #0b0b0f, card #111215, raised #16181b, popover #1b1d21, tooltip #22252b.
ChangedInputs sit one step below their surface in dark mode, as they already did in light. · Input, Textarea, Select
ChangedBorders are ink at 8% in light and white at 8% in dark, so one token works on every surface.
ChangedControl borders reach 3:1 so empty fields are easy to find. · Input, Select, Checkbox, Radio Group
ChangedWarning keeps one orange in both modes; info is one blue instead of three.
ChangedThe type scale matches the product: text-sm is 13px and text-2xs is 11px. Radius is one scale from 2 to 24px.
RemovedThe 18 legacy color-* tokens and text-misc-foreground, which merges into muted-foreground.

What changes for you

Before	Now	Note
<Button variant="primary">	<Button>	default is the primary button
variant="secondary"	variant="outline"
variant="tertiary"	variant="secondary"
variant="secondary-elevated"	variant="outline"	the border carries the edge; no shadow
variant="destructive"	variant="destructive"	now red text on a red tint, shadcn's style
variant="secondary-destructive"	variant="destructive"
variant="inspector" / "text-tool"	ghost, size icon-sm or xs	builder toolbar
size="small" / "medium" / "large"	size="sm" / default / "lg"
leftIcon, rightIcon, isIcon	icon as a child, size="icon"
--button-primary-bg	--primary
--page-background	--background
--background-bg-panel	--card
--background-modal-bg-modal, --menu-bg	--popover
--text-secondary-foreground	--muted-foreground	two text greys now: foreground and muted
--text-muted-foreground, --text-misc-foreground	--muted-foreground
--input-primary-bg	--field
--status-success-fg	--success (dot), --success-foreground (text)
--button-accent-bg	--primary-muted
Surface tier="menu" / "modal"	--popover

Before

Now

Note

default is the primary button

variant="secondary"

variant="outline"

variant="tertiary"

variant="secondary"

variant="secondary-elevated"

variant="outline"

the border carries the edge; no shadow

variant="destructive"

now red text on a red tint, shadcn's style

variant="secondary-destructive"

variant="destructive"

variant="inspector" / "text-tool"

ghost, size icon-sm or xs

builder toolbar

size="small" / "medium" / "large"

size="sm" / default / "lg"

leftIcon, rightIcon, isIcon

icon as a child, size="icon"

--button-primary-bg

--primary

--page-background

--background

--background-bg-panel

--card

--background-modal-bg-modal, --menu-bg

--popover

--text-secondary-foreground

--muted-foreground

two text greys now: foreground and muted

--text-muted-foreground, --text-misc-foreground

--muted-foreground

--input-primary-bg

--field

--status-success-fg

--success (dot), --success-foreground (text)

--button-accent-bg

--primary-muted

Surface tier="menu" / "modal"

--popover