Theme
Components
Component gallery
56 components built with Toned. The demo below uses several of them together; open any component to read its stylesheet and edit it live.
The theme switcher above shows the whole collection in six themes. The components and their stylesheets are the same in each one. A stylesheet names tokens, the tokens read CSS variables, and a theme is one set of values for those variables, selected by a data-theme attribute. Switching rerenders no component and changes no class.
The demo is interactive. Changes stay in this browser session.
OW
In progressOrbit workspace
Release 2.4
Release checklist
2 of 3 milestones
Button
Six appearances and eight sizes in one stylesheet.
Card
Density and surface variants across seven parts.
Dialog
A modal with focus handling and an exit animation.
Select
A styled list of options with keyboard support.