.tag to use var(--br-xxl) for border radius so it follows global --br-* radius settings instead of using a fixed pill radius value..sidebar-nav scrollable and preventing nav items from shrinking..tag fluid typography by including .tag in the fluid selector so --fl: -1 applies consistently inside table cells and other inherited text contexts.--font-ratio-max from 1.33 (Perfect Fourth) to 1.25 (Major Third). Mobile scale unchanged. Desktop headings are now ~55px max instead of ~75px — strong editorial feel without poster-scale blowout.var(--lh-s) (1.2) instead of inheriting 1.5 from the fluid system. Eliminates the excessive leading on large headings.-0.02em, h2: -0.015em, h3: -0.01em. Compensates for optical looseness at large sizes.--fw-medium (500), --fw-semibold (600), --fw-bold (700) custom properties. Migrated all hardcoded font-weight values to use tokens (buttons 560 and sidebar-nav-heading 620 intentionally kept as one-offs).line-height values with token vars (--lh-xs, --lh-s, --lh)..pull-quote is now a real styled component (italic, muted color, left border, proper margins) instead of just a fluid-level alias for .fs-m..bottom-nav span switched from hardcoded 0.75rem to fluid system (--fl: -1)..row now serves as a form field wrapper inside forms/fieldsets. .form-actions provides end-aligned action rows with mobile stacking. Global <hr> is now styled by default with consistent spacing and border..tabs.pill variant as a segmented control with a pure CSS sliding thumb and updated docs examples..narrow.center for centered constrained content and .input-group.stack-mobile for responsive stacked form actions on small screens..bubble chat message component with squircle corners, plus chat layout helpers for aligned threads and full-width composers. Updated docs, LLM docs, and the AI chat template to use the new primitives..horizontal modifier for steppers and progress.success, .warning, .error, .info with colored glows.active for current step, .completed for done steps.card — Content container with header/footer borders, padded body sections (.card-body, main, section), and full-width media support.pagination — Layout-only pagination bar (flex row with centered page list and border-top); pairs with .button.ghost for controls.app-shell — Mobile-first app container using CSS grid (auto 1fr auto) with safe-area inset padding and sticky header/footer.bottom-nav — Fixed bottom tab bar with icon + label pattern, active state via aria-current="page", safe-area aware.bottom-sheet — Fixed bottom drawer with rounded top corners, drag handle pseudo-element, and safe-area bottom paddingNew utilities:
.safe-top / .safe-bottom / .safe-x — Apply safe-area inset padding for mobile viewports.hide-scrollbar — Hide scrollbar cross-browser while preserving scroll.momentum-scroll — iOS momentum scrolling with overscroll containmentReworked:
.pagination uses .button.ghost instead of custom button styles — pagination is now layout-only, no longer re-declares button properties.list-nav focus state updated to use --focus-ring / --focus-ring-offset-inset tokens instead of hardcoded values.tag styling to match the rounded status-pill direction with softer light-mode pastels, clearer text contrast, and less gloss while preserving existing --tag-color, .muted, and interactive behaviors.Base styles and media queries are unlayered for maximum override capability.
anchor-scope and position-area for clean positioning:hover/:focus-within.tooltip-content in .tooltip--bg), includes border and shadow--input-shadow variable - buttons now use --shadow-1 for consistency. Updated --shadow-1 and --shadow-2 with layered shadows that provide gentle lift without being heavy..footer class and .grid.auto utility for responsive auto-fit grids<dialog> element styling with open/close animations, and a reusable .close button class. Demos use HTML invokers (commandfor/command) - no JavaScript required.--tag-color. Supports text, icons, emoji, and works as static labels or interactive links/buttons. Use .muted for neutral text color when you need guaranteed contrast..selected class or aria-pressed), disabled state, and a compact .mini variant..layout-sidebar.fixed modifier for sticky sidebar layouts. The sidebar stays pinned to the viewport while main content scrolls independently - perfect for app shells and dashboards. Works seamlessly with headers/footers without requiring hardcoded heights..layout-sidebar.fill modifier for full-height sidebars and .split.vertical for vertical space-between layouts. Also added @property --layout-gap to prevent gap values from cascading to nested layout elements..dropdown.end.breadcrumbs class on nav element, supports light/dark themes, and includes proper ARIA attributes for accessibility. Current page indicator uses [aria-current="page"] selector..toggle class. Supports checked, disabled, hover, and focus states. Includes .compact variant for smaller toggles..bordered (container with border), .right (right-aligned trigger), and .minimal (+/− toggle). Also added button.minimal for text-only buttons.--white and --black static color scales (do not change with light/dark mode)--bg scale (--bg-05, --bg-1 through --bg-9) for contrasting tints that adapt to light/dark modeinput, select, and textarea elements.callout component with multiple variants for displaying informational messages, warnings, errors, and success states.New Classes:.callout: Base callout component with blue styling.callout.warning: Yellow warning callout.callout.error: Red error callout.callout.success: Green success callout.callout.ghost: Neutral gray callout.callout.hard: Adds a thick left border accentFeatures:
--callout-color and --callout-border-color CSS variables--gray base variableBenefits:
@drop-in/graffiti/decks - Component styles CSS file@drop-in/graffiti/decks/raw - Component styles as JS moduleMigration: If you use @drop-in/decks components, add this import:
import "@drop-in/graffiti/decks";Bundle size improvement: Main CSS bundle is now ~15% smaller for projects that don't use decks components.
Initial release with base CSS framework features.