0.2.2 alpha

Menu

0.1.2 alpha

Version 0.1.2-alpha, a small step after 0.1.1 alpha, much of it for phones. A tapped control no longer keeps its mouse-over look or flashes the browser's gray box. The app bar can slide away as the reader scrolls, and the browser's own bar can take the page's color. A site can draw its own logo, and the footer can open a link in a new tab. The conformance checker gains a rule that finds mouse-over looks a phone would keep. What breaks says what to change.

Released

New

  • Logo and sidebar: a site can draw its own logo. Give your logo's shapes to the logo as shapes, or to the sidebar as logoShapes. They take the same form as the built-in logo: a name, the frame, the view boxes of the mark and the wordmark, and their paths. Your logo is drawn and colored like the built-in one.
  • App bar: on a phone, the bar can slide away as the reader scrolls down and come back as soon as they scroll up. Turn it on page by page with hide-on-scroll. It stays at the top of the window and never hides while a menu is open or keyboard focus is in it. For a reader who asks for reduced motion, it hides and shows at once. Wide screens keep the bar as it is.
  • Footer: give a column link or a social icon external and it opens in a new tab. A screen reader says "(opens in a new tab)" after its name; nothing changes on screen. Legal links always stay in the same tab.
  • Theme switch: followThemeColor() colors a phone browser's own bar to match the page, and keeps it matching when the theme changes. Call it once where the page sets its theme. Without it, a dark page can sit under a white bar.

Changed

  • Checker: a new rule, sticky-hover, finds a mouse-over look that a phone would keep after a tap. That is a :hover rule outside @media (hover: hover). Rules inside a block that asks about hover are fine, and so is :not(:hover).
  • Checker: each exception in conformance-exceptions.json is now printed once, with how many findings it explains and the first 3 places. A long reason no longer fills the report. Add --explained to list every finding, as before.

Fixed

  • Components: on a phone, a tapped control no longer keeps its mouse-over look until the next tap. Mouse-over looks now wait for a device that can hover. With a mouse, nothing changes.
  • Components: a tap on a control now shows only the control's own looks. The browser's gray box is gone, and tapping twice quickly no longer zooms the page. Holding a finger on a button, chip or tab no longer selects its label.

What breaks

  • Checker: a project's :hover rule outside @media (hover: hover) now fails its check. Move it inside, splitting off any other state it shares a selector with.
  • Logo and sidebar: the logo now has one built-in brand, simbolik. Its brand, and the sidebar's, take only simbolik; the other brand's value and its modifier class are gone. A site that drew that logo passes its own shapes instead: shapes on the logo, logoShapes on the sidebar.

Known gaps

  • The app bar has no in-between form. Wide, it holds its links, search and actions in one row; narrow, it moves them into a menu. On a screen wide enough for the wide form but too narrow for everything in it, they run out of the bar. Until the app bar has a form for this, put data-layout="narrow" on a wrapper around a crowded bar.
  • The dropdown always opens downward. With too little room below its opener, part of the panel ends up out of view. The select's list already opens upward when there's more room above, and the dropdown's panel doesn't yet.
  • Some color pairs fall short of contrast. A few colors measure below the contrast ratio WCAG asks for against the background they sit on. Text needs 4.5 to 1; the edge or mark that shows a control or its state needs 3 to 1. Some pairs are still to be fixed. Others are kept on purpose, a choice of taste for the system's look. The Contrast section of the color page lists every pair, what it measures and what it needs.

Take it

The code is on GitHub, https://github.com/simbolik-lab/simbolik-design-system (opens in a new tab), tagged v0.1.2-alpha. Clone it, then npm ci, npm run css:bundle and npm run release:bundle write a Release bundle to release/0.1.2-alpha/. It's one folder with what a site builds with and every license, and the README says how to use each part.

A site on 0.1.1 alpha swaps its copy of the bundle for this one. Its markup stays as it is, unless it draws the logo's other brand. If it runs the conformance checker, read What breaks first. The new rule can find mouse-over looks in the site's own stylesheets to move. A site still on 0.1 alpha reads the 0.1.1 alpha notes too.

The Figma file the design is drawn in is on Figma Community, https://www.figma.com/community/file/1688324308358870630 (opens in a new tab), where anyone can open it and copy it.

The code is under the MIT License and the Figma file under CC BY 4.0. The Licenses page says what each one asks.