matcha.css

Drop-in semantic styling library in pure CSS.

Utilize the form below to obtain a custom build of matcha.css.

For more intricate customization, consider forking and directly patching it. Note that matcha.css never utilizes !important rules, ensuring ease of style overriding if necessary.

Extra features Layouts
Include layouts that require specific HTML structures. Utilities
Additional classes as shorthands for colors, display, flash messages, etc. Syntax highlighting
Additional classes intended to be used with the highlight.js library. Code editor
Additional classes intended to be used with the highlight.js library to create a simple code editor. Istanbul coverage reports
Additional classes intended to be used with the istanbul.js coverage reports. Form validation
Style :user-valid, :user-invalid states for inputs-like elements. Discrete scrollbars
Style scrollbars for consistant theming (might reduce accessibility). Break words
Apply word-break: break-word; hyphens: auto; to several elements to improve text wrapping.

Customize CSS variables

Colors and backgrounds

Colors			Backgrounds			Example usage
Name	Light	Dark	Name	Light	Dark	Example usage
`--default`			`--bg-default`			default text color and background color
`--contrast`			`--bg-contrast`			used to constrast with `--default`
`--subtle`			`--bg-subtle`			`<progress>` and `<meter>` backgrounds, etc.
`--muted`			`--bg-muted`			`.disabled`, `<caption>`, `<blockquote>`, etc.
`--accent`			`--bg-accent`			`:hover`, `.selected`, `<a>`, `<button>`, etc.
`--active`			`--bg-active`			`:active`, `:focus`, etc.
`--variant`			`--bg-variant`			—
`--success`			`--bg-success`			`:user-valid`, `<ins>`, `<meter>`'s optimum value, etc.
`--attention`			`--bg-attention`			`<meter>`'s sub-optimum value, etc.
`--severe`			`--bg-severe`			—
`--danger`			`--bg-danger`			`:user-invalid`, `<del>`, `<meter>`'s sub-sub-optimum value, `<button type="reset">`, etc.

Font related variables --ft Default font family. --ft-mono Default monospaced font family, used in preformatted blocks (e.g. <pre>, <code>, <var>, <samp>, <kbd>, etc.). --ft-size Default font size (px).

Layouts

These variables are only revelant when using a layout from @layouts extra feature.

--ly-header-size Size of top-level <header>. --ly-brand Text color in top-level <header>. --ly-bg-brand Background color in top-level <header>. --ly-aside-size-small Size of main <aside> on small screens.

Miscellaneous --ct-width Maximum container width (px) for sectioning elements that act as containers (e.g. <section>, etc.). --bd-radius Border radius basis (px). --tr-duration Transition duration basis (s).

Name	Light		Dark		Example usage
Name	Color	Alpha	Color	Alpha	Example usage
`--backdrop`					`dialog::backdrop`, `--shadow`, etc.
`--bd-muted`					`<td>`, `<th>`, `<article>`, `<blockquote>`, `<fieldset>`, `<input>`, `<select>`, `<textarea>`, etc.

Customization Extra CSS content Append your own custom CSS styles to the final build without the need to fork the project. You can use !important rules when needed to ensure your styles are applied since matcha.css never uses this priority level.

Miscellaneous Minify
Minify CSS to reduce final bundle size. It requires a call to a serverless function that may fail because of a time-limit or rate-limit, if you're having issues with getting your custom build, try disabling this option.
Minification is currently disabled. See lowlighter/matcha/issues/53 for more informations.

Preview

Preview your custom build to ensure it fits your taste.

Brew matcha!

Ready to brew your custom matcha? Click the button below to get started!