MelangeCSS is designed so that each class applies to the page when there is no media query in effect. This means any screen size, light (or no selected) color mode, and no explicit setting for reduced motion. You can then customize your page's styling when a media query is in affect by adding additional classes that have a suffix for that media query. For example, purple-100 would apply to all situations by default, whereas purple-100-dm would apply only when the “prefers dark mode” media query applies.
Each melange class includes a list of the media query variants that are available. For example, colors may have variants for dark mode, but spacings would not. Here are all the known media queries, their definitions, and their naming conventions.
Not Small Width
Screens that are larger than mobile sized
*-ns
<div class="purple-400-ns">
.purple-100-ns
</div>
@media screen and (min-width: 30em)
Medium Width
Screens larger than the mobile size but smaller than what is considered large (e.g. tablets)
*-m
<div class="purple-400-m">
.purple-100-m
</div>
@media screen and (min-width: 30em) and (max-width: 60em)
Large Width
Screens larger than the medium size (e.g. desktops)
*-l
<div class="purple-400-l">
.purple-100-l
</div>
@media screen and (min-width: 60em)
Dark Mode
Prefers dark mode (light mode considered default)
*-dm
<div class="purple-400-dm">
.purple-100-dm
</div>
@media (prefers-color-scheme: dark)
Reduced Motion
Prefers reduced motion (full/regular motion considered default)
*-rm
<div class="purple-400-rm">
.purple-100-rm
</div>
@media (prefers-reduced-motion: reduce)
High Contrast
Prefers more contrast (Browser and HTML-configured contrast is the default)
*-hc
<div class="purple-400-hc">
.purple-100-hc
</div>
@media (prefers-contrast: more)