foundation/yeti v7.0.0-alpha.2

Yeti 7.0.0-alpha.2

on GitHub

Yeti 7.0.0-alpha.2 fixes two accessibility bugs and adds two layouts. If you're on alpha.1, update: a theme that set a motion token was overriding a reader's reduced-motion setting.

npm install @foundation/yeti@next

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@foundation/yeti@7.0.0-alpha.2/dist/yeti.min.css">

Most of this release came from building a real restaurant site on alpha.1 and writing down everything that got in the way.

Accessibility fixes

• Reduced motion now always wins. Setting a motion token anywhere, even on :root, used to beat the reader's setting, so animations ran at full length for people who had asked for less. You can still set those tokens, and you no longer need to wrap them in @media (prefers-reduced-motion: no-preference).
• A surface now sets its text. A box with data-surface painted its fill but kept the text color from around it, which gave dark words on a dark band in a forced color scheme. A band that stays dark is now one declaration:

<section class="box band" data-surface="base">…</section>

.band { color-scheme: dark; }

New layouts

leaders joins a name and a value with a dotted line, for menus, price lists, opening hours and contents pages. A long name wraps with the dots and the value on its last line, and anything after the value sits below at full width. data-row makes one element a single row, and --yeti-leaders-line sets the line.

<dl class="leaders">
	<div><dt>Soup of the day</dt><dd>$9</dd></div>
	<div><dt>Roast chicken with lemon and thyme</dt><dd>$24</dd></div>
</dl>

divider sets a heading or short line beside a rule, for section heads, dates and an "or" between choices. data-align moves the text, and --yeti-divider-line sets the rule.

<h2 class="divider">Mains</h2>

Other fixes and additions

• shell and masonry keep their gap on a child that has a layout class of its own.
• A nav bar's open panel has its own text token, --yeti-nav-panel-text. Before, a dark --yeti-nav-panel left dark links on it, with no token to fix them.
• billboard fills its container instead of stopping at the reading width.
• A sticky nav sits at the top edge.
• data-nowrap works on any element, not only on a table and its cells.

What may change on your site

• Gaps in a shell: a part with a layout class used its own gap above it, and now uses the shell's. A box footer or a stack on main may move, sometimes by a lot. Set the space you want with data-gap on the shell.
• A sticky nav no longer reads --yeti-sticky-offset. A bar that should float below the edge now sets inset-block-start. The token still sets where everything else sticks.
• --yeti-color-text set on .nav no longer reaches the open panel. Use --yeti-nav-panel-text.
• Text color set around a surface box no longer reaches inside it. The box sets the page text. data-paint and data-text on the box itself still apply.

Docs

• New guidance on restyling a component, including how a site's own cascade layers order against Yeti's.
• The nav docs explain painted bars, and the masonry docs say what to use when reading order matters.
• The install guide covers two Vite issues: set build: { cssTarget: 'esnext' } so it leaves light-dark() alone, and copy LICENSE into your build, because the minifier drops Yeti's banner when you use a CSS @import.
• The docs now say the validator checks Yeti's vocabulary, not HTML itself.

What alpha means

Class names, attributes and tokens can still change. They freeze at the first beta, and the stability page lists exactly what will be frozen.

Yeti now has 19 layouts, 3 recipes, 22 components, 7 utilities and 307 public tokens, at about 20 KB of CSS and 4 KB of JavaScript, minified and gzipped. Bugs and proposals go to Issues, and questions go to Discussions.