Matcha.css Files

📦 Features

• Versioning
• feat: matcha.mizu.sh now offers a /v/ directory with all published releases of matcha.css
  • You can pin either a full semver (e.g. /v/1.0.0/), pin a minor (e.g. /v/1.0/), pin a major (e.g. /v/1/), or use /v/latest/ or /v/main/
  • Note that unprefixed matcha.css files will kept their current behaviour of serving the main branch (i.e. they're the same as using /v/main/)
• Custom builder
• feat: added support for additional variables (fonts, layouts, miscellaneous, etc.)
• feat: added previewer with togglable color-scheme to easily check the render of a custom build
• fix: variables not properly overriden

🎨 Styles

• Variables
• BREAKING: prefixed all variables depending on color scheme with either --light- or --dark-
  • This change was made to ease custom build generation and to avoid properties duplication for dark mode
  • Note that while it's technically breaking, all unprefixed variables are still available (they're just computed from their --light-/--dark- counterpart rather than being hard-coded). Unless you've manually overriden them in the past, chances are you're not impacted in any way by this change
• Semantic styling
• Collapsibles
  • fix: summary is displayed with border-radius to correctly crop details background
• Flow
  • fix: pre is displayed with -webkit-text-size-adjust: 100%; to avoid scaling issues on Safari iOS
• Form
  • fix: form code is displayed with --bg-subtle to contrast with form already having --bg-muted
  • fix: button.default:hover being invisible on light mode
• Navigation
  • fix: menu is displayed as flex-direction: column on small screens for accessibility and to avoid submenus from appearing outside of viewport
• Extras
• @utilities
  • feat: added margin, padding and spacing utilities classes
• @code-editor
  • fix: .editor is displayed with -webkit-text-size-adjust: 100%; to avoid scaling issues on Safari iOS

💕 Sponsors