Version 1.2.0
A large release: styling for tables, lists, code and other content GenCSS never touched, a token picker on every token field, guides inside the app, and new form and header controls. Everything new is opt-in, and requires macOS 13 Ventura or later.
New
- Content section. Styling for tables, blockquotes, code blocks, horizontal rules, figures and captions, definition lists and inline elements, all using your tokens so they match the rest of your site. Each group is switched on separately and writes nothing until it is.
- Tables that feel finished. Collapsed borders, row rules, optional header background and striping, and hover colours for both background and text.
- Lists section. Marker style, position and colour, indent and item spacing for bulleted and numbered lists, plus an option to strip bullets from lists laid out with GenCSS's grid and flex utilities.
- Header section. A header height value anything can reference, with options to make the header sticky, set its padding or switch the reset's header padding off, and offset in-page links so they no longer scroll beneath a sticky header.
- Token picker on every token field. A small button beside each field opens the relevant tokens with a swatch and the value each resolves to. Typing still works as before.
- Guides inside the app, behind the book icon in the sidebar: how the two-layer system works, connecting a file, palettes and tokens, and content elements. In WordPress the button opens the guides on the website.
- More form controls. Spacing between labels, fields and rows; textareas that grow as you type; size, spacing and focus rings for checkboxes and radios; and your own colour on checkboxes, radios, sliders and progress bars.
- Styled dropdowns for select menus, matching your fields. Works in Chrome, Edge and Safari; Firefox keeps its native dropdown, so this is off unless you turn it on.
- Text box trimming for headings, or headings and body text, so the space a spacing token asks for is the space you see.
- New tokens: a smaller 2xs spacing step, and light, normal and heavy border widths. New stylesheets get them automatically; existing ones can switch them on.
Improved
- A redrawn connection screen, with frosted glass panels over a deep green background.
- GenCSS opens near full screen, sized to your display, so the live preview has room to judge a layout.
- Recent connections are listed by project folder, not by file name, so a list of files all called globals.css is readable at last.
- Your own palettes and tokens now appear in the preview, and the preview includes lists, tables, code and the other content the new sections style.
- Your existing stylesheets are unchanged. Every new control writes nothing until you use it, so saving an older file gives you the same file back. Requires macOS 13 Ventura or later, as since 1.1.0.
Fixed
- Custom checkboxes no longer pick up a red error border when required and unchecked. There is now an option to exclude them, matching other fields.
Removed
- The project file manager in the bottom toolbar is gone. Connecting a file already tells the preview where to find your images and fonts, so nothing depended on it.