Skip to content

Puppertino Dachshund

Latest
Latest

Choose a tag to compare

View all tags
@codedgar codedgar released this 06 Oct 19:22
· 13 commits to master since this release
v2.0.0
c538343

Puppertino 2.0, named Dachshund, is a rebuild of the framework around the macOS 27 and iOS 27 design. It adds a full desktop component set, a larger mobile set, Liquid Glass, and new foundations for color, type, and materials.

Every class from version 1 still works. Upgrading does not require changes to your markup.

Docs: https://puppertino.com

Install

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@codedgar/puppertino@2.0.0/dist/css/puppertino.min.css">
npm install @codedgar/puppertino@2.0.0

Puppertino is plain CSS. There is no build step and there are no dependencies. The JavaScript helpers are optional and written in vanilla JavaScript.

Foundations

Three foundation files replace their version 1 counterparts. Each new file includes the old classes alongside the new tokens.

Version 1 Version 2 What is new
color_palette.css colors.css Thirteen system accents, six text levels, five fills, and semantic backgrounds, each with light and dark values
layout.css typography.css Apple's text styles from Large Title to Caption 2, with weights and tracking
shadows.css materials.css Five material thicknesses, elevation shadows, and Liquid Glass

A new adaptive.css adds page structure: size classes, split views, containers, and readable width.

Colors, fills, and text levels are CSS custom properties with the --p- prefix, so a theme can change them in one place.

Desktop components

Version 1 was a mobile kit. Version 2 adds a component set for pointer-driven interfaces that follows macOS conventions, with hover states and compact sizing.

  • Buttons, segmented controls, sliders, and disclosure controls
  • Forms: text fields, selects, steppers, search fields, pop-up and pull-down buttons, combo boxes, checkboxes, radios, and switches
  • Color wells, image wells, and date pickers
  • Menus, popovers, and tooltips
  • Modals, dialogs, sheets, and notifications
  • Windows, sidebars, toolbars, the menu bar, and the Dock
  • Lists, tables, progress indicators, and scrollbars

Mobile components

The touch set grows beyond the version 1 buttons, forms, modals, actions, and tabs.

  • Navigation bars, toolbars, and tab bars
  • Menus and popovers
  • Sidebars
  • Lists with swipe actions
  • Color pickers and date pickers
  • Notifications and empty states

Touch variants live beside their pointer component as a modifier. .p-menu-touch sits next to .p-menu, for example.

Liquid Glass

Bars and buttons can refract the page behind them. The rendering comes from Glassworks 2.0, which is optional. Without it, every surface keeps its CSS material.

Switches and sliders lift into a lens when pressed. That part needs no extra library.

With Reduce Transparency or Increase Contrast turned on, glass surfaces turn solid.

Dark mode

Class What it does
.p-auto-dark-mode Follows the system appearance
.p-dark-mode Forces dark
.p-light-mode Pins a region to light inside a dark page

.p-light-mode is new in this release. Put any of the three on <body>, or on an element to scope it.

Accessibility

Puppertino reads accessibility settings from the browser and responds in CSS. There is nothing to switch on.

  • Reduce Motion replaces animated movement with a fade.
  • Reduce Transparency swaps blurred materials for opaque surfaces.
  • Increase Contrast strengthens borders and fills.
  • Forced colors modes are supported.
  • Keyboard focus stays visible on every control. Menus, popovers, and dialogs respond to the arrow keys and Escape, and a dialog holds focus until it closes.

Bundles

Three bundles ship. Each includes the foundations.

Bundle File Gzipped
Full puppertino.min.css 57 KB
Desktop puppertino-desktop.min.css 54 KB
Mobile puppertino-mobile.min.css 53 KB

Every component is also available as its own file, for example @codedgar/puppertino/buttons. Import @codedgar/puppertino/colors first, since components read their colors from it.

Upgrading from version 1

  • No markup changes. The version 2 stylesheets include every version 1 class.
  • newfull.css is frozen. Pages that link it keep rendering as version 1, and the file will not change. For new work, link puppertino.min.css.
  • The old foundation files remain. color_palette.css, layout.css, and shadows.css still ship for direct imports. The new files are the recommended path.
  • One script was renamed. dakmode_manager.js is now darkmode_manager.js. The old name still loads and will be removed in a future major version.
  • Deprecations will be gradual. Version 1 classes are retired across the 2.x releases, each with a documented migration path.

Browser support

The version 2 components use :has() and color-mix(). That means Safari 16.2, Chrome 111, and Firefox 121, or newer. Materials fall back to an opaque surface in browsers without backdrop-filter.

Documentation

The docs site is rebuilt at puppertino.com. Every component page has live previews, exact values, and markup to copy. Links to the version 1 pages redirect to their new equivalents.

The docs are also published as plain text for AI tools, at llms.txt and llms-full.txt.

Links

Puppertino is not affiliated with Apple Inc.

Assets 3
Loading