@snacky/ui 0.9.1 → 0.11.0

package/CHANGELOG.md

@@ -4,6 +4,100 @@ How `@snacky/ui` got to its current state. The README documents what the
 package *is*; this documents how it got there, including the mistakes, so the
 verification claims in the README can be taken at face value.
 
+## PageIndicator, and a semantic role for indicator dots (0.11.0)
+
+`PageIndicator` is the dot row under a carousel: 8x8 dots, a 28x8 pill for the
+current page, `gap/cell` apart, so the row stays 8 tall whichever page is
+showing. It reports position rather than changing it, so the dots are
+`aria-hidden` with no click target and the row carries a single label ("Page 2
+of 3" by default). Make the carousel itself operable and let this follow it.
+
+The component is small; the reason it exists is the two tokens under it.
+`--bg-indicator-active` and `--bg-indicator-inactive` are new semantic roles,
+referencing `--color-amber-500` and `--color-neutral-200`. Adding a role rather
+than reusing one needs a reason, and there were two. Figma drew the dots as raw
+hex, one of them `#dadada`, a grey in no ramp at all. And `Stepper` was already
+borrowing: its done dot painted `--icon-brand`, an icon token used as a shape
+fill, and its pending dot `--bg-action-disabled`, which says a step the order
+has not reached yet is a control you cannot use. Two components needing
+"reached" versus "not yet", both saying something false, is what a missing role
+looks like. Stepper now uses the pair, and its rendered colours are unchanged
+(`#f8b732` and `#cccccc`, exactly as before).
+
+Worth knowing if you theme the system: `--bg-indicator-inactive` and
+`--bg-action-disabled` resolve to the same grey today but are free to diverge,
+which is the point. Override the indicator one to restyle carousels and
+progress dots without touching disabled controls.
+
+compose-ui ships the same as `compose-v2.1.0`: `SnackyPageIndicator`, the
+`SnackyColor.bgIndicatorActive`/`bgIndicatorInactive` pair, and the same Stepper
+change. Both are additive, so neither release breaks anything.
+
+Two README corrections came along: compose-ui still claimed
+`SnackyPointBalanceBanner` paints the `primary-500` primitive, which stopped
+being true when its binding was fixed against Figma in 0.10.0, and both READMEs
+still counted 11 solid icons rather than 12.
+
+## Brand ramp renamed to amber, components re-checked against Figma (0.10.0)
+
+**Breaking: the brand primitive ramp is now `amber`.** It was the only
+primitive named by role (`primary`) while its neighbours were named by hue
+(`neutral`, `red`), which made `--bg-action-primary: var(--color-primary-500)`
+read like a tautology. `--color-primary-50` through `--color-primary-900` are
+now `--color-amber-50` through `--color-amber-900`, with no alias left behind.
+Semantic tokens keep their role names (`--bg-action-primary`,
+`--border-input-active`, ...) and resolve to byte-identical values: all 175
+custom properties were compared before and after, 63 of them still through a
+reference. Only code that referenced a `--color-primary-*` variable directly
+needs to change, and a find-and-replace of `--color-primary-` to
+`--color-amber-` is the whole migration.
+
+**Components now use the semantic token Figma binds.** The earlier checks
+compared rendered colours, so a component painting the right hex from the
+wrong token passed. This pass read each node's bound variables instead, and
+found 17 places across both packages reaching past the semantic layer to a
+primitive. Most resolve to the same colour, so only the token changed
+(Checkbox, Toggle, Callout, Navbar's active icon, Tab's underline, Chips'
+selected border). Three were real colour bugs, all rendering `#f8b732` where
+Figma binds `border-highlight` (`#fcdea1`): InfoBadge's border when it has no
+icon, and PointBalanceBanner's border and divider. InfoBadge with an icon
+keeps `border-input-active`, selected by the same icon slot Figma uses to tell
+the two variants apart.
+
+**BottomSheet's drag handle** follows Figma's `Driver Slider`: 40x4 (was
+36x4), `border-main` rather than the `neutral-200` primitive (same colour),
+`radius-full`, and no bottom margin of its own. The space below the handle is
+now just the sheet's 16px gap, so a sheet with `showHandle` is 8px shorter.
+
+**IconButton `size="small"`** is Figma's 24px circle with the icon at the full
+24x24 and no padding. It used to pad by 4 and inset the icon to 16px, about
+60% of Figma's size. The chevron it carries in Figma, `fi-sr-angle-small-right`,
+was not in the icon set at all; it now ships as `SnackyIcons.solid.angleSmallRight`,
+making the solid set 12 icons.
+
+**Section's "see more" action** is that shared small IconButton. It used to be
+its own button with a hand-drawn 16px stroked chevron, so the
+`.snacky-section__action` class no longer exists; style the IconButton instead
+if you were targeting it. The header is also 30px tall now, not the title's
+36px line box, because Figma crops the h3 title node to 30 from the top. Every
+Section is 6px shorter as a result.
+
+**UploadButton** matches Figma's `Property 1=upload`: `bg-action-secondary`
+fill (was `bg-surface`) and a dashed `border-action-secondary` outline (was
+`border-main`) drawn 1px outside the 72px circle, as Figma draws it. A real
+border sat inside the box and squeezed the icon to 22px. The `icon` prop is
+now optional and defaults to the camera glyph Figma uses.
+
+**ProductCard (list)** pins the name box and the rating/cart row at 41px each,
+as Figma does, so the card is 294 tall (it was 292). The docs site's spec
+already said 294; the package was the one that was wrong.
+
+compose-ui ships the same changes as `compose-v2.0.0`. The major bump is for
+the ramp rename, which there is `SnackyColorPrimitive.Primary` becoming
+`SnackyColorPrimitive.Amber`; `SnackyColor.*` semantic names are unchanged.
+It also adds `SnackyUploadButton`, which react-ui had and compose-ui did not,
+and `SnackyIcons.Solid.AngleSmallRight`.
+
 ## SoldOut overlay uses its own token (0.9.1)
 
 Auditing the rest of the package after the semantic-token fix turned up two

package/README.md

@@ -121,19 +121,20 @@ placeholder artwork rather than a real icon prop. Apply your own
 
 ## What's here
 
-All 24 documented components, matching the real Figma-sourced spec values
+All 25 documented components, matching the real Figma-sourced spec values
 (padding, colors, radius, states - all sourced directly from the design
 tokens, not eyeballed):
 
 Button, IconButton/UploadButton, Input family (TextField, SearchField,
 OtpField, CopyField, ChatInput, AddressResult), Chips (ProductChip/FilterChip),
-RadioOption, Checkbox, Toggle, NavBar, TabRow, Header, Banner family, Badge family,
+RadioOption, Checkbox, Toggle, NavBar, TabRow, Header, PageIndicator, Banner
+family, Badge family,
 Callout, List (OrderListItem/NotificationListItem), Accordion, BottomSheet
 (the shared Modal shell), Section (the shared content-block shell), Avatar,
 Illustration, ProductImage, ProductCard.
 
 Plus the icon set, as `SnackyIcons.outline.*` and `SnackyIcons.solid.*` (42
-Outline, 11 Solid). Two things to know: they are **filled** shapes rather than
+Outline, 12 Solid). Two things to know: they are **filled** shapes rather than
 stroked paths, so there is no `strokeWidth` to set, and the set is **not
 uniform** - each icon is authored at 16, 20 or 24px and defaults to its own
 natural size, so pass `width`/`height` if you need them to match.