3.0.0

🎨 Styles

• Layouts
  • BREAKING: .layout-simple may now be applied on elements other than body
    • This is useful if body is not your main root element
• Semantic styling
  • Form
    • BREAKING: moved :user-valid and :user-invalid styles into the @form-validation rules
      • Note: these rules are still enabled by default, but you can now easily opt-out of them using a custom build

💕 Sponsors

2.0.2

📦 Features

• Versioning
  • fix: CSS header now contains matcha version

🎨 Styles

• Variables
  • fix: automatic loading of --light variables was broken for light mode
• Semantic styling
  • Form
    • fix: input[type="checkbox"]:disabled:checked now has a transparent border rather than a --accent one

💕 Sponsors

2.0.1

📦 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

1.0.0

📦 Features

• Use matcha.css the way you want
  • Drop-in stylesheet
    • <link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">
  • Using the NPM package
    • Published as @lowlighter/matcha
    • Can also be imported from any CDN that serves NPM packages
  • À la carte
    • Include any style from lowlighter/matcha/styles directly
    • All mod.css stylesheets are also aliased to their respective parent directory for convenience (e.g. /styles/@root/mod.css can be accessed through /@root.css)
  • Preset builds with fixed sets of styles
    • Default: matcha.css (~7.23kB)
    • Lite: matcha.lite.css (~5.16kB)
    • Utility classes only: matcha.utilities.css (~2.0kB)
    • Istanbul coverage only: matcha.istanbul.css (~1.6kB)
• Create custom builds from matcha.mizu.sh/build
  • Choose included styles and customize properties
  • Toggle minification on/off
  • Provide raw CSS code to hotpatch
• Comprehensive documentation and examples
  • Every styling is documented with examples and code snippets
    • Toggle color scheme of each example
  • Website previewer

🎨 Styles

• Semantic styling
  • Sectioning
  • Navigation
  • Headings
  • Flow
  • Collapsibles
  • Modals
  • Anchors
  • Abbreviations
  • Styling and emphasis
  • Annotations
  • Computing
  • Forms
  • Bars
  • Lists
  • Tables
  • Media
• Extras
  • @layouts: provide semantic layouts for your documents
  • @utilities: provide utility classes for colors, backgrounds, flashes, typography, display, flexbox, and more
  • @syntax-highlighting: provide styles for syntax highlighting to be used with highlight.js
  • @code-editor: provide styles to create simple code editors
  • @istanbul-coverage: provide styles to display code coverage reports
  • @discrete-scrollbars: style scrollbars to be discrete
  • @break-words: style elements to improve text wrapping

💕 Sponsors