Skip to content

0.14.0

Choose a tag to compare

View all tags
@github-actions github-actions released this 13 Oct 16:59
· 52 commits to master since this release
0.14.0
d2d3707

Breaking changes

  • --soft-border-mix has no default: read it as var(--soft-border-mix, 100%) for the soft tint or var(--soft-border-mix, 65%) for the opaque .soft mix.

Added

  • .color-swatch: palette color on a native radio or checkbox, or a <button> opening a palette flyout, with --color-swatch-value, --color-swatch-size and --color-swatch-radius.
  • .segmented / .segment: segmented control for radios, a role="tablist" or navigation links, with --segmented-bg, --segmented-pad, --segmented-radius, --segmented-fg, --segmented-selected-bg and --segmented-selected-border.
  • demo/templates/order-management.html: one state at three levels — a badge in a selectable list, a contextual alert, and a notification with its own action — plus a critical alert, with no new framework API.
  • prefers-reduced-transparency: reduce paints .topbar and .form-actions.sticky opaque without backdrop blur.
  • The glass demo theme switches to opaque surfaces and drops its blur under prefers-reduced-transparency: reduce.
  • shot:states accepts a transparency state.
  • --switch-knob-inline-size sets the switch knob width for a capsule knob; the travel follows it.
  • demo/templates/settings-ios.html: iOS-like controls and grouped settings from unchanged markup, with the local CSS each gap needs.
  • admin-neutral demo theme: light-only business interface with a grey page, white cards, neutral actions and flat semantic tints.
  • --state-selected-text: selected ink on a regular surface (current .nav-link, selected .tab, current step number and ring), falling back to --state-selected.
  • actual-css contrast measures selected ink on each surface and the solid -fg pairs; a gradient fill reads n/a.
  • components.json: pseudoElements lists the ::before/::after each component generates, keyed by the element that owns them (.nav-link, .accordion summary).
  • actual-css design writes a portable dtcg/ token profile beside figma/ and penpot/, with spec $types (fontWeight, fontFamily, duration, cubicBezier, number) and the font stacks, line heights and motion figma/ drops.

Fixed

  • .color shows a round swatch the height of a .switch on a control-sized hit area, with the focus ring on the swatch; --color-size sets it.
  • A flyout no longer closes when the arrow keys or Space move through a radio group inside it.
  • Opening a flyout from the keyboard focuses a radio group at its checked radio, not its first one.
  • .list-item moves its trailing region to a new line when it no longer fits beside the longest word, instead of breaking .list-item-title mid-word.
  • .truncate inside .list-item-content keeps the trailing region on its line.
  • actual-css design writes DTCG colors with a 6-digit hex and alpha separate; Penpot still receives the alpha in its hex.
  • .scroll-snap keeps a focused item's ring inside its own clip on all four sides.
  • .alert.compact and .alert.spacious step --alert-pad-block.
  • .close stays visible in forced colors on a light-on-dark ink such as a .solid admonition title.
  • .app-nav frames the current tile in forced colors with a transparent border on a ::before overlay, so selecting a tile never shifts its icon or label and no Highlight repaint is needed.
  • --state-selected-text resets on every theme boundary, so a nested theme island reads its own --state-selected instead of inheriting the parent's selected ink.
  • Demo themes clear 4.5:1 on their solid pairs: bootstrap-v6 primary, success and danger; spruce and petrol warning; petrol secondary; edge warning; brutalist secondary and danger.
  • Demo themes set --state-selected-text where the primary cannot be both fill and page text: bootstrap-v6, brutalist, cyberpunk, gradient, ocean, square, sunset.
  • bootstrap-v6 filled badges keep their fill on hover.
  • The edge demo theme's default button reads its intent through --soft-fg-mix.
  • The glass demo theme keeps the default --soft-bg-mix and sets --soft-border-mix: 70%, so soft tints show their intent.
  • .alert.admonition title bar follows .solid, .surface and .outline; .solid previously left white ink on the soft tint.

Changed

  • admin-neutral uses emerald success fills with white solid ink, amber warning fills with dark ink, lighter neutral badges and white admonition bodies with neutral frames.
  • demo/templates/order-management.html softens the address notice, makes New order secondary and tightens the Orders header.
  • demo/templates/order-management.html pins admin-neutral and adds an Orders-list composition beside the existing three-level narrative.
  • .alert.admonition .alert-title is semibold.
  • .alert.admonition.solid frames its body with the neutral --border instead of the intent.
  • .badge, .alert and .btn.soft paint a translucent intent tint with no rim; the shared .soft on .card, .navbar, .app-nav and .chat-bubble stays an opaque mix.
  • --soft-hover-alpha defaults to 6%.
  • actual-css contrast measures soft pairs composited on --surface, --surface-raised and --surface-subtle.
  • Demo themes retune --soft-fg-mix (bootstrap-v6, corporate, cyberpunk, dim, edge, gradient, indigo, lavender, material, square) and --soft-hover-alpha (lavender, neon) for the soft tint.
Assets 5
Loading