@thi.ng/meta-css 0.7.13 → 0.8.1

package/README.md

@@ -18,12 +18,14 @@
 - [Generating CSS frameworks](#generating-css-frameworks)
   - [Framework generation specs & syntax](#framework-generation-specs--syntax)
   - [Example generation spec](#example-generation-spec)
-  - [Spec structure](#spec-structure)
+  - [Generator spec structure](#generator-spec-structure)
     - [Variations](#variations)
     - [Parametric IDs](#parametric-ids)
     - [Values](#values)
     - [Properties](#properties)
     - [Key value generation](#key-value-generation)
+  - [Templated class definitions](#templated-class-definitions)
+    - [Template arguments](#template-arguments)
   - [Media query definitions](#media-query-definitions)
   - [Custom declarations](#custom-declarations)
 - [Converting meta stylesheets to CSS](#converting-meta-stylesheets-to-css)
@@ -36,6 +38,61 @@
   - [Media query variations](#media-query-variations)
 - [Bundled CSS base framework](#bundled-css-base-framework)
   - [Classes by category](#classes-by-category)
+    - [Accessibility](#accessibility)
+    - [Animation / transition](#animation--transition)
+    - [Aspect ratios](#aspect-ratios)
+    - [Background](#background)
+    - [Border color](#border-color)
+    - [Border radius](#border-radius)
+    - [Border width](#border-width)
+    - [Colors](#colors)
+    - [Content](#content)
+    - [Cursors](#cursors)
+    - [Display mode](#display-mode)
+    - [Flex layout](#flex-layout)
+    - [Font families](#font-families)
+    - [Font sizes](#font-sizes)
+    - [Font style](#font-style)
+    - [Font variants](#font-variants)
+    - [Font weights](#font-weights)
+    - [Grid layout](#grid-layout)
+    - [Height](#height)
+    - [Icons](#icons)
+    - [Letter spacing](#letter-spacing)
+    - [Line heights](#line-heights)
+    - [Lists](#lists)
+    - [Margin](#margin)
+    - [Max. height](#max-height)
+    - [Max. width](#max-width)
+    - [Min. height](#min-height)
+    - [Min. width](#min-width)
+    - [Opacity](#opacity)
+    - [Overflow](#overflow)
+    - [Padding](#padding)
+    - [Positions](#positions)
+    - [Print](#print)
+    - [Scrolling](#scrolling)
+    - [Selection](#selection)
+    - [Shadow](#shadow)
+    - [Svg](#svg)
+    - [Text align](#text-align)
+    - [Text decorations](#text-decorations)
+    - [Text transforms](#text-transforms)
+    - [Vertical align](#vertical-align)
+    - [Visibility](#visibility)
+    - [Whitespace](#whitespace)
+    - [Width](#width)
+    - [Z-indices](#z-indices)
+  - [Templates by category](#templates-by-category)
+    - [Animation / transition](#animation--transition)
+    - [Aspect ratios](#aspect-ratios)
+    - [Border color](#border-color)
+    - [Color adjustment](#color-adjustment)
+    - [Color definitions](#color-definitions)
+    - [Colors](#colors)
+    - [Grid layout](#grid-layout)
+    - [Positions](#positions)
+    - [Svg](#svg)
   - [Media queries](#media-queries)
 - [Status](#status)
 - [Related packages](#related-packages)
@@ -60,13 +117,16 @@ remove the need for any complex & bloated CSS-related dependencies (parsers
 etc.) and to simplify building secondary tooling (e.g. part of this readme is an
 [auto-generated report of the included base framework
 specs](#bundled-css-base-framework)), we're using JSON — rather than CSS — as
-data format to: 1) express the _generative_ rules to define all the CSS classes,
-declarations, media query criteria which are forming a framework and
-2) as intermediate data format for a generated CSS framework itself. **The
-entire toolkit (incl. all bundled dependencies) is currently only 32KB!**
+data format to:
 
-This readme aims to provide a thorough overview of this toolchain and some
-concrete usage examples...
+1. express the _generative_ rules to define all the CSS classes, class templates,
+declarations, and media query criteria, all of which are forming a framework
+2. as intermediate data format for generated CSS frameworks themselves
+
+**The entire toolkit (incl. all bundled dependencies) is currently only 36KB (unzipped)!**
+
+This readme aims to provide a thorough overview of this toolchain, its
+possibilities and some concrete usage examples...
 
 Note: In all cases, final CSS generation itself is handled by
 [thi.ng/hiccup-css](https://github.com/thi-ng/umbrella/blob/develop/packages/hiccup-css/).
@@ -149,9 +209,13 @@ the toolchain.
     "decls": [
         ["html", { "box-sizing": "border-box" }]
     ],
-    // array of actual generation specs
+    // array of class generation specs
     "specs": [
         //...
+    ],
+    // array of templated class generation specs
+    "tpls": [
+        //...
     ]
 }
 ```
@@ -231,17 +295,18 @@ When later used in stylesheets, we can then refer to each of these classes by
 their generated names, e.g. `ma0` to disable all margins or `mh2` to set both
 left & right margins to `1rem` (in this case)...
 
-### Spec structure
+### Generator spec structure
 
 An individual generator spec JSON object can contain the following keys:
 
 | **ID**   | **Type**                | **Description**                                              |
 |----------|-------------------------|--------------------------------------------------------------|
+| `doc`    | object, optional        | Documentation metadata, see [section](#documentation)        |
 | `key`    | string, optional        | Method for deriving keys from current value                  |
 | `name`   | string                  | Parametric name for the generated CSS class(es)              |
 | `props`  | string or object        | CSS property name(s), possibly parametric                    |
 | `unit`   | string, optional        | CSS unit to use for values                                   |
-| `user`   | any, optional           | Custom, arbitrary user data, comments, metadata etc.         |
+| `user`   | any, optional           | Custom, arbitrary user data etc.                             |
 | `values` | string, array or object | Values to be assigned to CSS properties, possibly parametric |
 | `vars`   | string[], optional      | Array of variation IDs (see section below)                   |
 
@@ -443,6 +508,85 @@ The above spec will generate the following (some parts omitted):
 }
 ```
 
+### Templated class definitions
+
+As a special case of "normal" generator specs described above, the toolchain
+also supports the generation of so-called templated classes, which are very much
+like callable functions and will later accept zero or more arguments when used
+in a MetaCSS stylesheet.
+
+These template specs are almost identical to the normal spec format, with the
+exception of **not** using the `key` and `values` fields, since values will only
+be provided by the user at a later stage, via template arguments.
+
+A simple generator spec for a templated animation, including keyframe
+definitions and documentation metadata:
+
+```json tangle:export/readme-templated-anim.mcss.json
+{
+    "decls": [
+        ["@keyframes" ,"shrink", { "height": "var(--shrink-size)" }, { "height": 0 }]
+    ],
+    "tpls": [
+        {
+            "name": "shrink",
+            "props": {
+                "--shrink-size": "{0}",
+                "animation": "shrink {1}s ease-out forward"
+            },
+            "doc": {
+                "group": "animation",
+                "desc": "Animation which shrinks the height from given value down to zero",
+                "args": [
+                    "height: initial height (incl. units)",
+                    "duration: in seconds"
+                ]
+            }
+        }
+    ]
+}
+```
+
+In a MetaCSS stylesheet, the template can then be used like a function call, like so:
+
+`shrink(4rem, 1)`
+
+Here, two arguments are supplied as comma-separated list between the `(`..`)`
+parens. In the template definition the `{0}`/`{1}` patterns are indicating where
+these numbered args will be inserted. Templates support any number of
+params/arguments and each one can be used multiple times in multiple locations,
+incl. property names, values, and in documentation (`group`, `desc` and `args` fields).
+
+#### Template arguments
+
+When templates are compiled, the number of expected args is computed
+automatically and later checked against the actually given args when the
+template is used. An error will be thrown if the given number of args differs.
+
+Any commas inside an argument **must** be escaped using `\,`, e.g.
+
+```text
+// wrong (the comma inside `repeat()` MUST be escaped...)
+#test { grid grid-cols(repeat(3, 1fr), 16rem) }
+
+// correct
+#test { grid grid-cols(repeat(3\, 1fr), 16rem) }
+```
+
+If a template's `props` is a string, the optional `unit` field can be used to
+auto-assign a CSS unit to provided args. If `props` is an object, the `unit`
+option will be ignored.
+
+Using the example template defined above, the MetaCSS stylesheet
+`#test { shrink(4rem, 0.5) }` will then be expanded to:
+
+```css
+#test {
+    --shrink-size: 4rem;
+    animation: shrink 0.5s ease-out forward;
+}
+```
+
 ### Media query definitions
 
 Media queries can be defined via the top-level `media` object in a spec file.
@@ -460,7 +604,7 @@ ALWAYS combined using `and`:
 | `print: "only"`                  | `only print`                   |
 
 See [media queries in the bundled base
-specs](https://github.com/thi-ng/umbrella/blob/982fff7bfcc48f108b6ad88f854ef00be4078510/packages/meta-css/specs/_info.json#L6-L24)
+specs](https://github.com/thi-ng/umbrella/blob/f40ff9b9d7da496c2dd967c6185ca626cbbd9b4c/packages/meta-css/specs/_info.mcss.json#L6-L27)
 
 ### Custom declarations
 
@@ -817,179 +961,1188 @@ and `w-50-l` (incl. their corresponding `@media` wrappers).
 
 ## Bundled CSS base framework
 
-The package includes a large number of useful specs in [/specs](https://github.com/thi-ng/umbrella/blob/develop/packages/meta-css/specs/). These are readily usable, but also are provided as starting point to define your own custom framework(s)...
+The package includes a large number of useful generator specs in
+[/specs](https://github.com/thi-ng/umbrella/blob/develop/packages/meta-css/specs/).
+These are readily usable (and used by a growing number of example projects in
+this repo), but also are provided as starting point to define your own custom
+framework(s)...
 
-Currently, there are 940 CSS utility classes defined in MetaCSS base v0.7.0:
+Currently, there are 862 CSS utility classes (incl. 29 templates) defined in "MetaCSS base" (v0.8.0):
 
 ### Classes by category
 
-#### Accessibility <!-- notoc -->
+#### Accessibility
+
+- `screen-reader`
+- `screen-reader-focus`
+
+#### Animation / transition
+
+- `anim-alternate` (direction)
+- `anim-alternate-reverse` (direction)
+- `anim-ease` (timing function)
+- `anim-ease-in` (timing function)
+- `anim-ease-in-out` (timing function)
+- `anim-ease-out` (timing function)
+- `anim-linear` (timing function)
+- `anim-normal` (direction)
+- `anim-pause`
+- `anim-play`
+- `anim-reverse` (direction)
+
+#### Aspect ratios
+
+- `bg-aspect-ratio-object` (To be used on the element forming the background of a `bg-aspect-ratio()` parent/wrapper)
+
+#### Background
+
+- `bg-contain`
+- `bg-cover`
+- `bg-pos-center` (center)
+- `bg-pos-e` (right)
+- `bg-pos-n` (top)
+- `bg-pos-ne` (top right)
+- `bg-pos-nw` (top left)
+- `bg-pos-s` (bottom)
+- `bg-pos-se` (bottom right)
+- `bg-pos-sw` (bottom left)
+- `bg-pos-w` (left)
+
+#### Border color
+
+- `border-color-black` (#000)
+- `border-color-blue` (#357edd)
+- `border-color-current` (currentcolor)
+- `border-color-dark-blue` (#00449e)
+- `border-color-dark-gray` (#333)
+- `border-color-dark-green` (#137752)
+- `border-color-dark-pink` (#d5008f)
+- `border-color-dark-red` (#e7040f)
+- `border-color-gold` (#ffb700)
+- `border-color-gray` (#777)
+- `border-color-green` (#19a974)
+- `border-color-hot-pink` (#ff41b4)
+- `border-color-light-blue` (#96ccff)
+- `border-color-light-gray` (#eee)
+- `border-color-light-green` (#9eebcf)
+- `border-color-light-pink` (#ffa3d7)
+- `border-color-light-purple` (#a463f2)
+- `border-color-light-red` (#ff725c)
+- `border-color-light-silver` (#aaa)
+- `border-color-light-yellow` (#fbf1a9)
+- `border-color-lightest-blue` (#cdecff)
+- `border-color-mid-gray` (#555)
+- `border-color-moon-gray` (#ccc)
+- `border-color-navy` (#001b44)
+- `border-color-near-black` (#111)
+- `border-color-near-white` (#f4f4f4)
+- `border-color-orange` (#ff6300)
+- `border-color-pink` (#ff80cc)
+- `border-color-purple` (#5e2ca5)
+- `border-color-red` (#ff4136)
+- `border-color-silver` (#999)
+- `border-color-transparent` (transparent)
+- `border-color-washed-blue` (#f6fffe)
+- `border-color-washed-green` (#e8fdf5)
+- `border-color-washed-red` (#ffdfdf)
+- `border-color-washed-yellow` (#fffceb)
+- `border-color-white` (#fff)
+- `border-color-yellow` (#ffd700)
+
+#### Border radius
+
+- `br0` (0rem)
+- `br1` (.125rem)
+- `br2` (.25rem)
+- `br3` (.5rem)
+- `br4` (1rem)
+- `br-100` (100%)
+- `br-pill` (9999px)
+- `brb0` (0rem)
+- `brb1` (.125rem)
+- `brb2` (.25rem)
+- `brb3` (.5rem)
+- `brb4` (1rem)
+- `brl0` (0rem)
+- `brl1` (.125rem)
+- `brl2` (.25rem)
+- `brl3` (.5rem)
+- `brl4` (1rem)
+- `brr0` (0rem)
+- `brr1` (.125rem)
+- `brr2` (.25rem)
+- `brr3` (.5rem)
+- `brr4` (1rem)
+- `brt0` (0rem)
+- `brt1` (.125rem)
+- `brt2` (.25rem)
+- `brt3` (.5rem)
+- `brt4` (1rem)
+
+#### Border width
+
+- `bw0` (0rem)
+- `bw1` (.125rem)
+- `bw2` (.25rem)
+- `bw3` (.5rem)
+- `bw4` (1rem)
+- `bw5` (2rem)
+- `bw-1px` (1px)
+- `bwb0` (0rem)
+- `bwb1` (.125rem)
+- `bwb2` (.25rem)
+- `bwb3` (.5rem)
+- `bwb4` (1rem)
+- `bwb5` (2rem)
+- `bwb-1px` (1px)
+- `bwl0` (0rem)
+- `bwl1` (.125rem)
+- `bwl2` (.25rem)
+- `bwl3` (.5rem)
+- `bwl4` (1rem)
+- `bwl5` (2rem)
+- `bwl-1px` (1px)
+- `bwr0` (0rem)
+- `bwr1` (.125rem)
+- `bwr2` (.25rem)
+- `bwr3` (.5rem)
+- `bwr4` (1rem)
+- `bwr5` (2rem)
+- `bwr-1px` (1px)
+- `bwt0` (0rem)
+- `bwt1` (.125rem)
+- `bwt2` (.25rem)
+- `bwt3` (.5rem)
+- `bwt4` (1rem)
+- `bwt5` (2rem)
+- `bwt-1px` (1px)
+
+#### Colors
+
+- `bg-color-black` (#000)
+- `bg-color-blue` (#357edd)
+- `bg-color-current` (currentcolor)
+- `bg-color-dark-blue` (#00449e)
+- `bg-color-dark-gray` (#333)
+- `bg-color-dark-green` (#137752)
+- `bg-color-dark-pink` (#d5008f)
+- `bg-color-dark-red` (#e7040f)
+- `bg-color-gold` (#ffb700)
+- `bg-color-gray` (#777)
+- `bg-color-green` (#19a974)
+- `bg-color-hot-pink` (#ff41b4)
+- `bg-color-light-blue` (#96ccff)
+- `bg-color-light-gray` (#eee)
+- `bg-color-light-green` (#9eebcf)
+- `bg-color-light-pink` (#ffa3d7)
+- `bg-color-light-purple` (#a463f2)
+- `bg-color-light-red` (#ff725c)
+- `bg-color-light-silver` (#aaa)
+- `bg-color-light-yellow` (#fbf1a9)
+- `bg-color-lightest-blue` (#cdecff)
+- `bg-color-mid-gray` (#555)
+- `bg-color-moon-gray` (#ccc)
+- `bg-color-navy` (#001b44)
+- `bg-color-near-black` (#111)
+- `bg-color-near-white` (#f4f4f4)
+- `bg-color-orange` (#ff6300)
+- `bg-color-pink` (#ff80cc)
+- `bg-color-purple` (#5e2ca5)
+- `bg-color-red` (#ff4136)
+- `bg-color-silver` (#999)
+- `bg-color-transparent` (transparent)
+- `bg-color-washed-blue` (#f6fffe)
+- `bg-color-washed-green` (#e8fdf5)
+- `bg-color-washed-red` (#ffdfdf)
+- `bg-color-washed-yellow` (#fffceb)
+- `bg-color-white` (#fff)
+- `bg-color-yellow` (#ffd700)
+- `color-black` (#000)
+- `color-blue` (#357edd)
+- `color-current` (currentcolor)
+- `color-dark-blue` (#00449e)
+- `color-dark-gray` (#333)
+- `color-dark-green` (#137752)
+- `color-dark-pink` (#d5008f)
+- `color-dark-red` (#e7040f)
+- `color-gold` (#ffb700)
+- `color-gray` (#777)
+- `color-green` (#19a974)
+- `color-hot-pink` (#ff41b4)
+- `color-light-blue` (#96ccff)
+- `color-light-gray` (#eee)
+- `color-light-green` (#9eebcf)
+- `color-light-pink` (#ffa3d7)
+- `color-light-purple` (#a463f2)
+- `color-light-red` (#ff725c)
+- `color-light-silver` (#aaa)
+- `color-light-yellow` (#fbf1a9)
+- `color-lightest-blue` (#cdecff)
+- `color-mid-gray` (#555)
+- `color-moon-gray` (#ccc)
+- `color-navy` (#001b44)
+- `color-near-black` (#111)
+- `color-near-white` (#f4f4f4)
+- `color-orange` (#ff6300)
+- `color-pink` (#ff80cc)
+- `color-purple` (#5e2ca5)
+- `color-red` (#ff4136)
+- `color-silver` (#999)
+- `color-transparent` (transparent)
+- `color-washed-blue` (#f6fffe)
+- `color-washed-green` (#e8fdf5)
+- `color-washed-red` (#ffdfdf)
+- `color-washed-yellow` (#fffceb)
+- `color-white` (#fff)
+- `color-yellow` (#ffd700)
+
+#### Content
+
+- `content-data-lang` (data-lang attrib)
+- `content-href` (href attrib)
+- `content-id` (id attrib)
+- `content-name` (name attrib)
+- `content-slot` (slot attrib)
+- `content-title` (title attrib)
+
+#### Cursors
+
+- `cursor-alias`
+- `cursor-auto`
+- `cursor-cell`
+- `cursor-col`
+- `cursor-context`
+- `cursor-copy`
+- `cursor-cross`
+- `cursor-default`
+- `cursor-e`
+- `cursor-ew`
+- `cursor-forbidden`
+- `cursor-grab`
+- `cursor-grabbing`
+- `cursor-help`
+- `cursor-in`
+- `cursor-move`
+- `cursor-n`
+- `cursor-ne`
+- `cursor-news`
+- `cursor-no-drop`
+- `cursor-none`
+- `cursor-ns`
+- `cursor-nw`
+- `cursor-nwse`
+- `cursor-out`
+- `cursor-pointer`
+- `cursor-progress`
+- `cursor-row`
+- `cursor-s`
+- `cursor-scroll`
+- `cursor-se`
+- `cursor-sw`
+- `cursor-text`
+- `cursor-vtext`
+- `cursor-w`
+- `cursor-wait`
+
+#### Display mode
+
+- `db` (block)
+- `di` (inline)
+- `dib` (inline-block)
+- `dif` (inline-flex)
+- `dig` (inline-grid)
+- `dn` (none)
+- `dt` (table)
+- `dtc` (table-cell)
+- `dtr` (table-row)
+- `flex` (flex)
+- `grid` (grid)
+
+#### Flex layout
+
+- `align-content-center`
+- `align-content-end`
+- `align-content-start`
+- `flex-column`
+- `flex-column-reverse`
+- `flex-grow0`
+- `flex-grow1`
+- `flex-nowrap`
+- `flex-row`
+- `flex-row-reverse`
+- `flex-shrink0`
+- `flex-shrink1`
+- `flex-wrap`
+- `flex-wrap-reverse`
+- `justify-content-center`
+- `justify-content-end`
+- `justify-content-start`
+
+#### Font families
+
+- `monospace`
+- `sans-serif`
+- `serif`
+- `system`
+- `system-sans-serif`
+- `system-serif`
+
+#### Font sizes
+
+- `f-subtitle` (5rem)
+- `f-title` (6rem)
+- `f1` (3rem)
+- `f2` (2.25rem)
+- `f3` (1.5rem)
+- `f4` (1.25rem)
+- `f5` (1rem)
+- `f6` (.875rem)
+- `f7` (.75rem)
+
+#### Font style
+
+- `italic`
+
+#### Font variants
+
+- `small-caps`
+
+#### Font weights
+
+- `b` (700)
+- `fw100`
+- `fw200`
+- `fw300`
+- `fw400`
+- `fw500`
+- `fw600`
+- `fw700`
+- `fw800`
+- `fw900`
+- `normal` (400)
+
+#### Grid layout
+
+- `align-items-center`
+- `align-items-end`
+- `align-items-start`
+- `align-items-stretch`
+- `align-self-center`
+- `align-self-end`
+- `align-self-start`
+- `align-self-stretch`
+- `gap0` (0rem)
+- `gap1` (.125rem)
+- `gap2` (.25rem)
+- `gap3` (.5rem)
+- `gap4` (1rem)
+- `gap5` (2rem)
+- `gap-1px`
+- `gap-2px`
+- `gap-4px`
+- `gap-8px`
+- `grid-cols-1` (1fr)
+- `grid-cols-2` (1fr 1fr)
+- `grid-cols-3` (1fr 1fr 1fr)
+- `grid-cols-4` (repeat(4,1fr))
+- `grid-cols-5` (repeat(5,1fr))
+- `grid-cols-6` (repeat(6,1fr))
+- `grid-cols-7` (repeat(7,1fr))
+- `grid-cols-8` (repeat(8,1fr))
+- `grid-cols-9` (repeat(9,1fr))
+- `grid-cols-10` (repeat(10,1fr))
+- `grid-rows-1` (1fr)
+- `grid-rows-2` (1fr 1fr)
+- `grid-rows-3` (1fr 1fr 1fr)
+- `grid-rows-4` (repeat(4,1fr))
+- `grid-rows-5` (repeat(5,1fr))
+- `grid-rows-6` (repeat(6,1fr))
+- `grid-rows-7` (repeat(7,1fr))
+- `grid-rows-8` (repeat(8,1fr))
+- `grid-rows-9` (repeat(9,1fr))
+- `grid-rows-10` (repeat(10,1fr))
+- `justify-items-center`
+- `justify-items-end`
+- `justify-items-start`
+- `justify-items-stretch`
+- `justify-self-center`
+- `justify-self-end`
+- `justify-self-start`
+- `justify-self-stretch`
+
+#### Height
+
+- `h1` (1rem)
+- `h2` (2rem)
+- `h3` (4rem)
+- `h4` (8rem)
+- `h5` (16rem)
+- `h-10` (%)
+- `h-16` (%)
+- `h-17` (%)
+- `h-20` (%)
+- `h-25` (%)
+- `h-30` (%)
+- `h-33` (%)
+- `h-34` (%)
+- `h-40` (%)
+- `h-50` (%)
+- `h-60` (%)
+- `h-66` (%)
+- `h-67` (%)
+- `h-70` (%)
+- `h-75` (%)
+- `h-80` (%)
+- `h-83` (%)
+- `h-84` (%)
+- `h-90` (%)
+- `h-100` (%)
+- `vh-25`
+- `vh-50`
+- `vh-75`
+- `vh-100`
+
+#### Icons
+
+- `icon-1` (3rem)
+- `icon-2` (2.25rem)
+- `icon-3` (1.5rem)
+- `icon-4` (1.25rem)
+- `icon-5` (1rem)
+- `icon-6` (.875rem)
+- `icon-7` (.75rem)
+- `icon-subtitle` (5rem)
+- `icon-title` (6rem)
+
+#### Letter spacing
+
+- `ls-0` (0em)
+- `ls-1` (.05em)
+- `ls-2` (.1em)
+- `ls-3` (.2em)
+- `ls--1` (-.025em)
+- `ls--2` (-.05em)
+
+#### Line heights
+
+- `lh-0` (0)
+- `lh-copy` (1.5)
+- `lh-double` (2)
+- `lh-solid` (1)
+- `lh-title` (1.25)
+
+#### Lists
+
+- `list`
+
+#### Margin
+
+- `center`
+- `ma0` ( 0rem)
+- `ma1` ( .25rem)
+- `ma2` ( .5rem)
+- `ma3` ( 1rem)
+- `ma4` ( 2rem)
+- `ma5` ( 4rem)
+- `mb0` (bottom 0rem)
+- `mb1` (bottom .25rem)
+- `mb2` (bottom .5rem)
+- `mb3` (bottom 1rem)
+- `mb4` (bottom 2rem)
+- `mb5` (bottom 4rem)
+- `mbe-0` (block end 0rem)
+- `mbe-1` (block end .25rem)
+- `mbe-2` (block end .5rem)
+- `mbe-3` (block end 1rem)
+- `mbe-4` (block end 2rem)
+- `mbe-5` (block end 4rem)
+- `mbs-0` (block start 0rem)
+- `mbs-1` (block start .25rem)
+- `mbs-2` (block start .5rem)
+- `mbs-3` (block start 1rem)
+- `mbs-4` (block start 2rem)
+- `mbs-5` (block start 4rem)
+- `mh0` (left 0rem)
+- `mh1` (left .25rem)
+- `mh2` (left .5rem)
+- `mh3` (left 1rem)
+- `mh4` (left 2rem)
+- `mh5` (left 4rem)
+- `ml0` (left 0rem)
+- `ml1` (left .25rem)
+- `ml2` (left .5rem)
+- `ml3` (left 1rem)
+- `ml4` (left 2rem)
+- `ml5` (left 4rem)
+- `mr0` (right 0rem)
+- `mr1` (right .25rem)
+- `mr2` (right .5rem)
+- `mr3` (right 1rem)
+- `mr4` (right 2rem)
+- `mr5` (right 4rem)
+- `mt0` (top 0rem)
+- `mt1` (top .25rem)
+- `mt2` (top .5rem)
+- `mt3` (top 1rem)
+- `mt4` (top 2rem)
+- `mt5` (top 4rem)
+- `mv0` (top 0rem)
+- `mv1` (top .25rem)
+- `mv2` (top .5rem)
+- `mv3` (top 1rem)
+- `mv4` (top 2rem)
+- `mv5` (top 4rem)
+
+#### Max. height
+
+- `maxh1` (1rem)
+- `maxh2` (2rem)
+- `maxh3` (4rem)
+- `maxh4` (8rem)
+- `maxh5` (16rem)
+- `maxh-10` (%)
+- `maxh-16` (%)
+- `maxh-17` (%)
+- `maxh-20` (%)
+- `maxh-25` (%)
+- `maxh-30` (%)
+- `maxh-33` (%)
+- `maxh-34` (%)
+- `maxh-40` (%)
+- `maxh-50` (%)
+- `maxh-60` (%)
+- `maxh-66` (%)
+- `maxh-67` (%)
+- `maxh-70` (%)
+- `maxh-75` (%)
+- `maxh-80` (%)
+- `maxh-83` (%)
+- `maxh-84` (%)
+- `maxh-90` (%)
+- `maxh-100` (%)
+
+#### Max. width
+
+- `maxw1` (1rem)
+- `maxw2` (2rem)
+- `maxw3` (4rem)
+- `maxw4` (8rem)
+- `maxw5` (16rem)
+- `maxw-10` (%)
+- `maxw-16` (%)
+- `maxw-17` (%)
+- `maxw-20` (%)
+- `maxw-25` (%)
+- `maxw-30` (%)
+- `maxw-33` (%)
+- `maxw-34` (%)
+- `maxw-40` (%)
+- `maxw-50` (%)
+- `maxw-60` (%)
+- `maxw-66` (%)
+- `maxw-67` (%)
+- `maxw-70` (%)
+- `maxw-75` (%)
+- `maxw-80` (%)
+- `maxw-83` (%)
+- `maxw-84` (%)
+- `maxw-90` (%)
+- `maxw-100` (%)
+
+#### Min. height
+
+- `minh1` (1rem)
+- `minh2` (2rem)
+- `minh3` (4rem)
+- `minh4` (8rem)
+- `minh5` (16rem)
+- `minh-10` (%)
+- `minh-16` (%)
+- `minh-17` (%)
+- `minh-20` (%)
+- `minh-25` (%)
+- `minh-30` (%)
+- `minh-33` (%)
+- `minh-34` (%)
+- `minh-40` (%)
+- `minh-50` (%)
+- `minh-60` (%)
+- `minh-66` (%)
+- `minh-67` (%)
+- `minh-70` (%)
+- `minh-75` (%)
+- `minh-80` (%)
+- `minh-83` (%)
+- `minh-84` (%)
+- `minh-90` (%)
+- `minh-100` (%)
+
+#### Min. width
+
+- `minw1` (1rem)
+- `minw2` (2rem)
+- `minw3` (4rem)
+- `minw4` (8rem)
+- `minw5` (16rem)
+- `minw-10` (%)
+- `minw-16` (%)
+- `minw-17` (%)
+- `minw-20` (%)
+- `minw-25` (%)
+- `minw-30` (%)
+- `minw-33` (%)
+- `minw-34` (%)
+- `minw-40` (%)
+- `minw-50` (%)
+- `minw-60` (%)
+- `minw-66` (%)
+- `minw-67` (%)
+- `minw-70` (%)
+- `minw-75` (%)
+- `minw-80` (%)
+- `minw-83` (%)
+- `minw-84` (%)
+- `minw-90` (%)
+- `minw-100` (%)
+
+#### Opacity
+
+- `o-0` (0)
+- `o-10` (0.1)
+- `o-20` (0.2)
+- `o-30` (0.3)
+- `o-40` (0.4)
+- `o-50` (0.5)
+- `o-60` (0.6)
+- `o-70` (0.7)
+- `o-80` (0.8)
+- `o-90` (0.9)
+- `o-100` (1)
+
+#### Overflow
+
+- `overflow-auto`
+- `overflow-hidden`
+- `overflow-scroll`
+- `overflow-visible`
+- `overflow-x-auto`
+- `overflow-x-hidden`
+- `overflow-x-scroll`
+- `overflow-x-visible`
+- `overflow-y-auto`
+- `overflow-y-hidden`
+- `overflow-y-scroll`
+- `overflow-y-visible`
+
+#### Padding
+
+- `pa0` ( 0rem)
+- `pa1` ( .25rem)
+- `pa2` ( .5rem)
+- `pa3` ( 1rem)
+- `pa4` ( 2rem)
+- `pa5` ( 4rem)
+- `pb0` (bottom 0rem)
+- `pb1` (bottom .25rem)
+- `pb2` (bottom .5rem)
+- `pb3` (bottom 1rem)
+- `pb4` (bottom 2rem)
+- `pb5` (bottom 4rem)
+- `pbe-0` (block end 0rem)
+- `pbe-1` (block end .25rem)
+- `pbe-2` (block end .5rem)
+- `pbe-3` (block end 1rem)
+- `pbe-4` (block end 2rem)
+- `pbe-5` (block end 4rem)
+- `pbs-0` (block start 0rem)
+- `pbs-1` (block start .25rem)
+- `pbs-2` (block start .5rem)
+- `pbs-3` (block start 1rem)
+- `pbs-4` (block start 2rem)
+- `pbs-5` (block start 4rem)
+- `ph0` (left 0rem)
+- `ph1` (left .25rem)
+- `ph2` (left .5rem)
+- `ph3` (left 1rem)
+- `ph4` (left 2rem)
+- `ph5` (left 4rem)
+- `pl0` (left 0rem)
+- `pl1` (left .25rem)
+- `pl2` (left .5rem)
+- `pl3` (left 1rem)
+- `pl4` (left 2rem)
+- `pl5` (left 4rem)
+- `pr0` (right 0rem)
+- `pr1` (right .25rem)
+- `pr2` (right .5rem)
+- `pr3` (right 1rem)
+- `pr4` (right 2rem)
+- `pr5` (right 4rem)
+- `pt0` (top 0rem)
+- `pt1` (top .25rem)
+- `pt2` (top .5rem)
+- `pt3` (top 1rem)
+- `pt4` (top 2rem)
+- `pt5` (top 4rem)
+- `pv0` (top 0rem)
+- `pv1` (top .25rem)
+- `pv2` (top .5rem)
+- `pv3` (top 1rem)
+- `pv4` (top 2rem)
+- `pv5` (top 4rem)
+
+#### Positions
+
+- `absolute`
+- `bottom-0` (0rem)
+- `bottom-1` (1rem)
+- `bottom-2` (2rem)
+- `bottom--1` (-1rem)
+- `bottom--2` (-2rem)
+- `fixed`
+- `left-0` (0rem)
+- `left-1` (1rem)
+- `left-2` (2rem)
+- `left--1` (-1rem)
+- `left--2` (-2rem)
+- `relative`
+- `right-0` (0rem)
+- `right-1` (1rem)
+- `right-2` (2rem)
+- `right--1` (-1rem)
+- `right--2` (-2rem)
+- `static`
+- `sticky`
+- `top-0` (0rem)
+- `top-1` (1rem)
+- `top-2` (2rem)
+- `top--1` (-1rem)
+- `top--2` (-2rem)
+
+#### Print
+
+- `break-after-avoid`
+- `break-after-avoid-column`
+- `break-after-avoid-page`
+- `break-after-column`
+- `break-after-left`
+- `break-after-page`
+- `break-after-recto`
+- `break-after-right`
+- `break-after-verso`
+- `break-before-avoid`
+- `break-before-avoid-column`
+- `break-before-avoid-page`
+- `break-before-column`
+- `break-before-left`
+- `break-before-page`
+- `break-before-recto`
+- `break-before-right`
+- `break-before-verso`
+
+#### Scrolling
+
+- `ss-always` (snap stop)
+- `ss-both` (snap type)
+- `ss-center` (snap align)
+- `ss-end` (snap align)
+- `ss-normal` (snap stop)
+- `ss-start` (snap align)
+- `ss-x` (snap type)
+- `ss-y` (snap type)
+
+#### Selection
+
+- `noselect`
+
+#### Shadow
+
+- `box-shadow-1` (0 0 2px 0px #0003)
+- `box-shadow-2` (0 0 4px #0003)
+- `box-shadow-3` (0 0 4px 1px #0003)
+- `box-shadow-4` (0 0 8px 2px #0003)
+- `box-shadow-i-1` (0 0 2px 0px #0003)
+- `box-shadow-i-2` (0 0 4px #0003)
+- `box-shadow-i-3` (0 0 4px 1px #0003)
+- `box-shadow-i-4` (0 0 8px 2px #0003)
+- `text-shadow-1` (1px 1px 2px #0003)
+- `text-shadow-2` (1px 1px 4px #0003)
+- `text-shadow-3` (1px 1px 8px #0003)
+- `text-shadow-4` (2px 2px 2px #0003)
+- `text-shadow-5` (2px 2px 4px #0003)
+- `text-shadow-6` (2px 2px 8px #0003)
+- `text-shadow-7` (3px 3px 2px #0003)
+- `text-shadow-8` (3px 3px 4px #0003)
+- `text-shadow-9` (3px 3px 8px #0003)
+
+#### Svg
+
+- `fill-black` (#000)
+- `fill-blue` (#357edd)
+- `fill-current` (currentcolor)
+- `fill-dark-blue` (#00449e)
+- `fill-dark-gray` (#333)
+- `fill-dark-green` (#137752)
+- `fill-dark-pink` (#d5008f)
+- `fill-dark-red` (#e7040f)
+- `fill-gold` (#ffb700)
+- `fill-gray` (#777)
+- `fill-green` (#19a974)
+- `fill-hot-pink` (#ff41b4)
+- `fill-light-blue` (#96ccff)
+- `fill-light-gray` (#eee)
+- `fill-light-green` (#9eebcf)
+- `fill-light-pink` (#ffa3d7)
+- `fill-light-purple` (#a463f2)
+- `fill-light-red` (#ff725c)
+- `fill-light-silver` (#aaa)
+- `fill-light-yellow` (#fbf1a9)
+- `fill-lightest-blue` (#cdecff)
+- `fill-mid-gray` (#555)
+- `fill-moon-gray` (#ccc)
+- `fill-navy` (#001b44)
+- `fill-near-black` (#111)
+- `fill-near-white` (#f4f4f4)
+- `fill-orange` (#ff6300)
+- `fill-pink` (#ff80cc)
+- `fill-purple` (#5e2ca5)
+- `fill-red` (#ff4136)
+- `fill-silver` (#999)
+- `fill-transparent` (transparent)
+- `fill-washed-blue` (#f6fffe)
+- `fill-washed-green` (#e8fdf5)
+- `fill-washed-red` (#ffdfdf)
+- `fill-washed-yellow` (#fffceb)
+- `fill-white` (#fff)
+- `fill-yellow` (#ffd700)
+- `stroke-black` (#000)
+- `stroke-blue` (#357edd)
+- `stroke-current` (currentcolor)
+- `stroke-dark-blue` (#00449e)
+- `stroke-dark-gray` (#333)
+- `stroke-dark-green` (#137752)
+- `stroke-dark-pink` (#d5008f)
+- `stroke-dark-red` (#e7040f)
+- `stroke-gold` (#ffb700)
+- `stroke-gray` (#777)
+- `stroke-green` (#19a974)
+- `stroke-hot-pink` (#ff41b4)
+- `stroke-light-blue` (#96ccff)
+- `stroke-light-gray` (#eee)
+- `stroke-light-green` (#9eebcf)
+- `stroke-light-pink` (#ffa3d7)
+- `stroke-light-purple` (#a463f2)
+- `stroke-light-red` (#ff725c)
+- `stroke-light-silver` (#aaa)
+- `stroke-light-yellow` (#fbf1a9)
+- `stroke-lightest-blue` (#cdecff)
+- `stroke-mid-gray` (#555)
+- `stroke-moon-gray` (#ccc)
+- `stroke-navy` (#001b44)
+- `stroke-near-black` (#111)
+- `stroke-near-white` (#f4f4f4)
+- `stroke-orange` (#ff6300)
+- `stroke-pink` (#ff80cc)
+- `stroke-purple` (#5e2ca5)
+- `stroke-red` (#ff4136)
+- `stroke-silver` (#999)
+- `stroke-transparent` (transparent)
+- `stroke-washed-blue` (#f6fffe)
+- `stroke-washed-green` (#e8fdf5)
+- `stroke-washed-red` (#ffdfdf)
+- `stroke-washed-yellow` (#fffceb)
+- `stroke-white` (#fff)
+- `stroke-yellow` (#ffd700)
+
+#### Text align
+
+- `tc` (center)
+- `tj` (justify)
+- `tl` (left)
+- `tr` (right)
+
+#### Text decorations
+
+- `no-underline`
+- `strike`
+- `underline`
+
+#### Text transforms
+
+- `ttc` (capitalize)
+- `ttfsk` (full-size-kana)
+- `ttfw` (full-width)
+- `tti` (initial)
+- `ttl` (lowercase)
+- `ttn` (none)
+- `ttu` (uppercase)
+
+#### Vertical align
+
+- `v-base` (baseline)
+- `v-btm` (bottom)
+- `v-mid` (middle)
+- `v-top` (top)
+
+#### Visibility
+
+- `collapse`
+- `hidden`
+- `visible`
+
+#### Whitespace
+
+- `ws-normal`
+- `ws-nowrap`
+- `ws-pre`
+
+#### Width
+
+- `vw-25`
+- `vw-50`
+- `vw-75`
+- `vw-100`
+- `w1` (1rem)
+- `w2` (2rem)
+- `w3` (4rem)
+- `w4` (8rem)
+- `w5` (16rem)
+- `w-10` (%)
+- `w-16` (%)
+- `w-17` (%)
+- `w-20` (%)
+- `w-25` (%)
+- `w-30` (%)
+- `w-33` (%)
+- `w-34` (%)
+- `w-40` (%)
+- `w-50` (%)
+- `w-60` (%)
+- `w-66` (%)
+- `w-67` (%)
+- `w-70` (%)
+- `w-75` (%)
+- `w-80` (%)
+- `w-83` (%)
+- `w-84` (%)
+- `w-90` (%)
+- `w-100` (%)
+
+#### Z-indices
+
+- `z-0`
+- `z-1`
+- `z-2`
+- `z-3`
+- `z-4`
+- `z-5`
+- `z-999`
+- `z-9999`
 
-`screen-reader` / `screen-reader-focus`
+### Templates by category
 
-#### Animations / transitions <!-- notoc -->
+#### Animation / transition
 
-`anim-alternate` / `anim-alternate-reverse` / `anim-normal` / `anim-reverse` / `bg-anim1` / `bg-anim2` / `bg-anim3` / `fadein1` / `fadein2` / `fadein3` / `fadeout1` / `fadeout2` / `fadeout3` / `spin1` / `spin2` / `spin3`
+##### `anim-delay(delay)`
 
-#### Aspect ratios <!-- notoc -->
+- **delay**: time (in seconds)
 
-`aspect-ratio-1x1` / `aspect-ratio-1x2` / `aspect-ratio-2x1` / `aspect-ratio-2x3` / `aspect-ratio-3x2` / `aspect-ratio-3x4` / `aspect-ratio-4x3` / `aspect-ratio-5x7` / `aspect-ratio-7x5` / `aspect-ratio-9x16` / `aspect-ratio-16x9` / `bg-aspect-ratio-1x1` / `bg-aspect-ratio-1x2` / `bg-aspect-ratio-2x1` / `bg-aspect-ratio-2x3` / `bg-aspect-ratio-3x2` / `bg-aspect-ratio-3x4` / `bg-aspect-ratio-4x3` / `bg-aspect-ratio-5x7` / `bg-aspect-ratio-7x5` / `bg-aspect-ratio-9x16` / `bg-aspect-ratio-16x9` / `bg-aspect-ratio-object`
+##### `anim-iter(iter)`
 
-#### Background <!-- notoc -->
+- **iter**: number of iterations
 
-`bg-contain` / `bg-cover` / `bg-pos-center` / `bg-pos-e` / `bg-pos-n` / `bg-pos-ne` / `bg-pos-nw` / `bg-pos-s` / `bg-pos-se` / `bg-pos-sw` / `bg-pos-w`
+##### `anim-steps(steps)`
 
-#### Border radius <!-- notoc -->
+- **steps**: number of steps
 
-`br0` / `br1` / `br2` / `br3` / `br4` / `br-100` / `br-pill` / `brb0` / `brb1` / `brb2` / `brb3` / `brb4` / `brl0` / `brl1` / `brl2` / `brl3` / `brl4` / `brr0` / `brr1` / `brr2` / `brr3` / `brr4` / `brt0` / `brt1` / `brt2` / `brt3` / `brt4`
+##### `bg-anim(duration)`
 
-#### Border width <!-- notoc -->
+- **duration**: in seconds
 
-`bw0` / `bw1` / `bw2` / `bw3` / `bw4` / `bw5` / `bw-1px` / `bwb0` / `bwb1` / `bwb2` / `bwb3` / `bwb4` / `bwb5` / `bwb-1px` / `bwl0` / `bwl1` / `bwl2` / `bwl3` / `bwl4` / `bwl5` / `bwl-1px` / `bwr0` / `bwr1` / `bwr2` / `bwr3` / `bwr4` / `bwr5` / `bwr-1px` / `bwt0` / `bwt1` / `bwt2` / `bwt3` / `bwt4` / `bwt5` / `bwt-1px`
+Transition to tween background color
 
-#### Colors <!-- notoc -->
+##### `fade-in(duration)`
 
-`b--color-black` / `b--color-blue` / `b--color-current` / `b--color-dark-blue` / `b--color-dark-gray` / `b--color-dark-green` / `b--color-dark-pink` / `b--color-dark-red` / `b--color-gold` / `b--color-gray` / `b--color-green` / `b--color-hot-pink` / `b--color-light-blue` / `b--color-light-gray` / `b--color-light-green` / `b--color-light-pink` / `b--color-light-purple` / `b--color-light-red` / `b--color-light-silver` / `b--color-light-yellow` / `b--color-lightest-blue` / `b--color-mid-gray` / `b--color-moon-gray` / `b--color-navy` / `b--color-near-black` / `b--color-near-white` / `b--color-orange` / `b--color-pink` / `b--color-purple` / `b--color-red` / `b--color-silver` / `b--color-transparent` / `b--color-washed-blue` / `b--color-washed-green` / `b--color-washed-red` / `b--color-washed-yellow` / `b--color-white` / `b--color-yellow` / `b--color1` / `b--color2` / `b--color3` / `b--color4` / `b--color5` / `b--color6` / `b--color7` / `b--color8` / `b--color9` / `b--color10` / `b--color11` / `b--color12` / `b--color13` / `b--color14` / `b--color15` / `b--color16` / `bg-color-black` / `bg-color-blue` / `bg-color-current` / `bg-color-dark-blue` / `bg-color-dark-gray` / `bg-color-dark-green` / `bg-color-dark-pink` / `bg-color-dark-red` / `bg-color-gold` / `bg-color-gray` / `bg-color-green` / `bg-color-hot-pink` / `bg-color-light-blue` / `bg-color-light-gray` / `bg-color-light-green` / `bg-color-light-pink` / `bg-color-light-purple` / `bg-color-light-red` / `bg-color-light-silver` / `bg-color-light-yellow` / `bg-color-lightest-blue` / `bg-color-mid-gray` / `bg-color-moon-gray` / `bg-color-navy` / `bg-color-near-black` / `bg-color-near-white` / `bg-color-orange` / `bg-color-pink` / `bg-color-purple` / `bg-color-red` / `bg-color-silver` / `bg-color-transparent` / `bg-color-washed-blue` / `bg-color-washed-green` / `bg-color-washed-red` / `bg-color-washed-yellow` / `bg-color-white` / `bg-color-yellow` / `bg-color1` / `bg-color2` / `bg-color3` / `bg-color4` / `bg-color5` / `bg-color6` / `bg-color7` / `bg-color8` / `bg-color9` / `bg-color10` / `bg-color11` / `bg-color12` / `bg-color13` / `bg-color14` / `bg-color15` / `bg-color16` / `color-black` / `color-blue` / `color-current` / `color-dark-blue` / `color-dark-gray` / `color-dark-green` / `color-dark-pink` / `color-dark-red` / `color-gold` / `color-gray` / `color-green` / `color-hot-pink` / `color-light-blue` / `color-light-gray` / `color-light-green` / `color-light-pink` / `color-light-purple` / `color-light-red` / `color-light-silver` / `color-light-yellow` / `color-lightest-blue` / `color-mid-gray` / `color-moon-gray` / `color-navy` / `color-near-black` / `color-near-white` / `color-orange` / `color-pink` / `color-purple` / `color-red` / `color-silver` / `color-transparent` / `color-washed-blue` / `color-washed-green` / `color-washed-red` / `color-washed-yellow` / `color-white` / `color-yellow` / `color1` / `color2` / `color3` / `color4` / `color5` / `color6` / `color7` / `color8` / `color9` / `color10` / `color11` / `color12` / `color13` / `color14` / `color15` / `color16` / `fill-color-black` / `fill-color-blue` / `fill-color-current` / `fill-color-dark-blue` / `fill-color-dark-gray` / `fill-color-dark-green` / `fill-color-dark-pink` / `fill-color-dark-red` / `fill-color-gold` / `fill-color-gray` / `fill-color-green` / `fill-color-hot-pink` / `fill-color-light-blue` / `fill-color-light-gray` / `fill-color-light-green` / `fill-color-light-pink` / `fill-color-light-purple` / `fill-color-light-red` / `fill-color-light-silver` / `fill-color-light-yellow` / `fill-color-lightest-blue` / `fill-color-mid-gray` / `fill-color-moon-gray` / `fill-color-navy` / `fill-color-near-black` / `fill-color-near-white` / `fill-color-orange` / `fill-color-pink` / `fill-color-purple` / `fill-color-red` / `fill-color-silver` / `fill-color-transparent` / `fill-color-washed-blue` / `fill-color-washed-green` / `fill-color-washed-red` / `fill-color-washed-yellow` / `fill-color-white` / `fill-color-yellow` / `fill-color1` / `fill-color2` / `fill-color3` / `fill-color4` / `fill-color5` / `fill-color6` / `fill-color7` / `fill-color8` / `fill-color9` / `fill-color10` / `fill-color11` / `fill-color12` / `fill-color13` / `fill-color14` / `fill-color15` / `fill-color16` / `o-0` / `o-10` / `o-20` / `o-30` / `o-40` / `o-50` / `o-60` / `o-70` / `o-80` / `o-90` / `o-100` / `stroke-color-black` / `stroke-color-blue` / `stroke-color-current` / `stroke-color-dark-blue` / `stroke-color-dark-gray` / `stroke-color-dark-green` / `stroke-color-dark-pink` / `stroke-color-dark-red` / `stroke-color-gold` / `stroke-color-gray` / `stroke-color-green` / `stroke-color-hot-pink` / `stroke-color-light-blue` / `stroke-color-light-gray` / `stroke-color-light-green` / `stroke-color-light-pink` / `stroke-color-light-purple` / `stroke-color-light-red` / `stroke-color-light-silver` / `stroke-color-light-yellow` / `stroke-color-lightest-blue` / `stroke-color-mid-gray` / `stroke-color-moon-gray` / `stroke-color-navy` / `stroke-color-near-black` / `stroke-color-near-white` / `stroke-color-orange` / `stroke-color-pink` / `stroke-color-purple` / `stroke-color-red` / `stroke-color-silver` / `stroke-color-transparent` / `stroke-color-washed-blue` / `stroke-color-washed-green` / `stroke-color-washed-red` / `stroke-color-washed-yellow` / `stroke-color-white` / `stroke-color-yellow` / `stroke-color1` / `stroke-color2` / `stroke-color3` / `stroke-color4` / `stroke-color5` / `stroke-color6` / `stroke-color7` / `stroke-color8` / `stroke-color9` / `stroke-color10` / `stroke-color11` / `stroke-color12` / `stroke-color13` / `stroke-color14` / `stroke-color15` / `stroke-color16`
+- **duration**: in seconds
 
-#### Content <!-- notoc -->
+Animation to change opacity
 
-`content-data-lang` / `content-href` / `content-id` / `content-name` / `content-slot` / `content-title`
+##### `fade-out(duration)`
 
-#### Cursors <!-- notoc -->
+- **duration**: in seconds
 
-`cursor-alias` / `cursor-auto` / `cursor-cell` / `cursor-col` / `cursor-context` / `cursor-copy` / `cursor-cross` / `cursor-default` / `cursor-e` / `cursor-ew` / `cursor-forbidden` / `cursor-grab` / `cursor-grabbing` / `cursor-help` / `cursor-in` / `cursor-move` / `cursor-n` / `cursor-ne` / `cursor-news` / `cursor-no-drop` / `cursor-none` / `cursor-ns` / `cursor-nw` / `cursor-nwse` / `cursor-out` / `cursor-pointer` / `cursor-progress` / `cursor-row` / `cursor-s` / `cursor-scroll` / `cursor-se` / `cursor-sw` / `cursor-text` / `cursor-vtext` / `cursor-w` / `cursor-wait`
+Animation to change opacity
 
-#### Display mode <!-- notoc -->
+##### `shrink(duration, height)`
 
-`db` / `di` / `dib` / `dif` / `dig` / `dn` / `dt` / `dtc` / `dtr` / `flex` / `grid`
+- **duration**: in seconds
+- **height**: initial height (incl. units)
 
-#### Flex layout <!-- notoc -->
+Animation which shrinks the height from given initial value to zero. Target element must NOT have padding (use a wrapper if necessary).
 
-`align-content-center` / `align-content-end` / `align-content-start` / `flex-column` / `flex-column-reverse` / `flex-grow0` / `flex-grow1` / `flex-nowrap` / `flex-row` / `flex-row-reverse` / `flex-shrink0` / `flex-shrink1` / `flex-wrap` / `flex-wrap-reverse` / `justify-content-center` / `justify-content-end` / `justify-content-start`
+##### `spin(duration)`
 
-#### Font families <!-- notoc -->
+- **duration**: in seconds
 
-`monospace` / `sans-serif` / `serif` / `system` / `system-sans-serif` / `system-serif`
+Animation which rotates element a full turn, looping indefinitely
 
-#### Font sizes <!-- notoc -->
+#### Aspect ratios
 
-`f-subtitle` / `f-title` / `f1` / `f2` / `f3` / `f4` / `f5` / `f6` / `f7`
+##### `aspect-ratio(width, height)`
 
-#### Font style <!-- notoc -->
+- **width**: aspect width
+- **height**: aspect height
 
-`italic`
+Sets `aspect-ratio` CSS property
 
-#### Font variants <!-- notoc -->
+##### `bg-aspect-ratio(width, height)`
 
-`small-caps`
+- **width**: aspect width
+- **height**: aspect height
 
-#### Font weights <!-- notoc -->
+Sets aspect ratio of background. Use with `bg-aspect-ratio-object` on child element.
 
-`b` / `fw100` / `fw200` / `fw300` / `fw400` / `fw500` / `fw600` / `fw700` / `fw800` / `fw900` / `normal`
+#### Border color
 
-#### Grid layout <!-- notoc -->
+##### `border-color(name)`
 
-`align-items-center` / `align-items-end` / `align-items-start` / `align-items-stretch` / `align-self-center` / `align-self-end` / `align-self-start` / `align-self-stretch` / `gap0` / `gap1` / `gap2` / `gap3` / `gap4` / `gap5` / `gap-1px` / `gap-2px` / `gap-4px` / `gap-8px` / `grid-cols-1` / `grid-cols-2` / `grid-cols-3` / `grid-cols-4` / `grid-cols-5` / `grid-cols-6` / `grid-cols-7` / `grid-cols-8` / `grid-cols-9` / `grid-cols-10` / `grid-rows-1` / `grid-rows-2` / `grid-rows-3` / `grid-rows-4` / `grid-rows-5` / `grid-rows-6` / `grid-rows-7` / `grid-rows-8` / `grid-rows-9` / `grid-rows-10` / `justify-items-center` / `justify-items-end` / `justify-items-start` / `justify-items-stretch` / `justify-self-center` / `justify-self-end` / `justify-self-start` / `justify-self-stretch`
+- **name**: variable name (without `--` prefix)
 
-#### Height <!-- notoc -->
+#### Color adjustment
 
-`h1` / `h2` / `h3` / `h4` / `h5` / `h-10` / `h-16` / `h-17` / `h-20` / `h-25` / `h-30` / `h-33` / `h-34` / `h-40` / `h-50` / `h-60` / `h-66` / `h-67` / `h-70` / `h-75` / `h-80` / `h-83` / `h-84` / `h-90` / `h-100` / `vh-25` / `vh-50` / `vh-75` / `vh-100`
+##### `adjust-hsl(prop, name, hue, sat, lum, alpha)`
 
-#### Icons <!-- notoc -->
+- **prop**: CSS target property
+- **name**: color variable name (without `--` prefix)
+- **hue**: offset in degrees
+- **sat**: factor
+- **lum**: factor
+- **alpha**: factor
 
-`icon-1` / `icon-2` / `icon-3` / `icon-4` / `icon-5` / `icon-6` / `icon-7` / `icon-subtitle` / `icon-title`
+Assigns an adjusted version of a `def-hsl()`-defined color to given CSS property.
 
-#### Letter spacing <!-- notoc -->
+##### `adjust-lch(prop, name, luma, chroma, hue, alpha)`
 
-`ls-0` / `ls-1` / `ls-2` / `ls-3` / `ls--1` / `ls--2`
+- **prop**: CSS target property
+- **name**: color variable name (without `--` prefix)
+- **luma**: factor
+- **chroma**: factor
+- **hue**: offset in degrees
+- **alpha**: factor
 
-#### Line heights <!-- notoc -->
+Assigns an adjusted version of a `def-lch()` defined color to given CSS property.
 
-`lh-0` / `lh-copy` / `lh-double` / `lh-solid` / `lh-title`
+##### `adjust-oklch(prop, name, luma, chroma, hue, alpha)`
 
-#### Lists <!-- notoc -->
+- **prop**: CSS target property
+- **name**: color variable name (without `--` prefix)
+- **luma**: factor
+- **chroma**: factor
+- **hue**: offset in degrees
+- **alpha**: alpha factor
 
-`list`
+Assigns an adjusted version of a `def-oklch()` defined color to given CSS property.
 
-#### Margin <!-- notoc -->
+##### `adjust-rgb(prop, name, red, green, blue, alpha)`
 
-`center` / `ma0` / `ma1` / `ma2` / `ma3` / `ma4` / `ma5` / `mb0` / `mb1` / `mb2` / `mb3` / `mb4` / `mb5` / `mbe-0` / `mbe-1` / `mbe-2` / `mbe-3` / `mbe-4` / `mbe-5` / `mbs-0` / `mbs-1` / `mbs-2` / `mbs-3` / `mbs-4` / `mbs-5` / `mh0` / `mh1` / `mh2` / `mh3` / `mh4` / `mh5` / `ml0` / `ml1` / `ml2` / `ml3` / `ml4` / `ml5` / `mr0` / `mr1` / `mr2` / `mr3` / `mr4` / `mr5` / `mt0` / `mt1` / `mt2` / `mt3` / `mt4` / `mt5` / `mv0` / `mv1` / `mv2` / `mv3` / `mv4` / `mv5`
+- **prop**: CSS target property
+- **name**: color variable name (without `--` prefix)
+- **red**: factor
+- **green**: factor
+- **blue**: factor
+- **alpha**: factor
 
-#### Max. height <!-- notoc -->
+Assigns an adjusted version of a `def-rgb()`-defined color to given CSS property.
 
-`maxh1` / `maxh2` / `maxh3` / `maxh4` / `maxh5` / `maxh-10` / `maxh-16` / `maxh-17` / `maxh-20` / `maxh-25` / `maxh-30` / `maxh-33` / `maxh-34` / `maxh-40` / `maxh-50` / `maxh-60` / `maxh-66` / `maxh-67` / `maxh-70` / `maxh-75` / `maxh-80` / `maxh-83` / `maxh-84` / `maxh-90` / `maxh-100`
+#### Color definitions
 
-#### Max. width <!-- notoc -->
+##### `def-hsl(name, hue, sat, lum, alpha)`
 
-`maxw1` / `maxw2` / `maxw3` / `maxw4` / `maxw5` / `maxw-10` / `maxw-16` / `maxw-17` / `maxw-20` / `maxw-25` / `maxw-30` / `maxw-33` / `maxw-34` / `maxw-40` / `maxw-50` / `maxw-60` / `maxw-66` / `maxw-67` / `maxw-70` / `maxw-75` / `maxw-80` / `maxw-83` / `maxw-84` / `maxw-90` / `maxw-100`
+- **name**: variable name (without `--` prefix)
+- **hue**: in degrees
+- **sat**: in percent
+- **lum**: in percent
+- **alpha**: in [0,1] range
 
-#### Min. height <!-- notoc -->
+Defines a hsl() color variable with given name and additional derived vars for each channel (e.g. `--name-hue`). Use `adjust-hsl()` to create derived versions from this base color.
 
-`minh1` / `minh2` / `minh3` / `minh4` / `minh5` / `minh-10` / `minh-16` / `minh-17` / `minh-20` / `minh-25` / `minh-30` / `minh-33` / `minh-34` / `minh-40` / `minh-50` / `minh-60` / `minh-66` / `minh-67` / `minh-70` / `minh-75` / `minh-80` / `minh-83` / `minh-84` / `minh-90` / `minh-100`
+##### `def-lch(name, luma, chroma, hue, alpha)`
 
-#### Min. width <!-- notoc -->
+- **name**: variable name
+- **luma**: in percent
+- **chroma**: in percent
+- **hue**: in degrees
+- **alpha**: in [0,1] range
 
-`minw1` / `minw2` / `minw3` / `minw4` / `minw5` / `minw-10` / `minw-16` / `minw-17` / `minw-20` / `minw-25` / `minw-30` / `minw-33` / `minw-34` / `minw-40` / `minw-50` / `minw-60` / `minw-66` / `minw-67` / `minw-70` / `minw-75` / `minw-80` / `minw-83` / `minw-84` / `minw-90` / `minw-100`
+Defines a lch() color variable with given name and additional derived vars for each channel (e.g. `--name-hue`). Use `adjust-lch()` to create derived versions from this base color.
 
-#### Overflow <!-- notoc -->
+##### `def-oklch(name, luma, chroma, hue, alpha)`
 
-`overflow-auto` / `overflow-hidden` / `overflow-scroll` / `overflow-visible` / `overflow-x-auto` / `overflow-x-hidden` / `overflow-x-scroll` / `overflow-x-visible` / `overflow-y-auto` / `overflow-y-hidden` / `overflow-y-scroll` / `overflow-y-visible`
+- **name**: variable name
+- **luma**: in percent
+- **chroma**: in percent
+- **hue**: in degrees
+- **alpha**: in [0,1] range
 
-#### Padding <!-- notoc -->
+Defines a oklch() color variable with given name and additional derived vars for each channel (e.g. `--name-hue`). Use `adjust-oklch()` to create derived versions from this base color.
 
-`pa0` / `pa1` / `pa2` / `pa3` / `pa4` / `pa5` / `pb0` / `pb1` / `pb2` / `pb3` / `pb4` / `pb5` / `pbe-0` / `pbe-1` / `pbe-2` / `pbe-3` / `pbe-4` / `pbe-5` / `pbs-0` / `pbs-1` / `pbs-2` / `pbs-3` / `pbs-4` / `pbs-5` / `ph0` / `ph1` / `ph2` / `ph3` / `ph4` / `ph5` / `pl0` / `pl1` / `pl2` / `pl3` / `pl4` / `pl5` / `pr0` / `pr1` / `pr2` / `pr3` / `pr4` / `pr5` / `pt0` / `pt1` / `pt2` / `pt3` / `pt4` / `pt5` / `pv0` / `pv1` / `pv2` / `pv3` / `pv4` / `pv5`
+##### `def-rgb(name, red, green, blue, alpha)`
 
-#### Positions <!-- notoc -->
+- **name**: variable name (without `--` prefix)
+- **red**: [0,255] range
+- **green**: [0,255] range
+- **blue**: [0,255] range
+- **alpha**: in [0,1] range
 
-`absolute` / `bottom-0` / `bottom-1` / `bottom-2` / `bottom--1` / `bottom--2` / `fixed` / `left-0` / `left-1` / `left-2` / `left--1` / `left--2` / `relative` / `right-0` / `right-1` / `right-2` / `right--1` / `right--2` / `static` / `sticky` / `top-0` / `top-1` / `top-2` / `top--1` / `top--2`
+Defines a rgb() color variable with given name and additional derived vars for each channel (e.g. `--name-red`). Use `adjust-rgb()` to create derived versions from this base color.
 
-#### Print <!-- notoc -->
+#### Colors
 
-`break-after-avoid` / `break-after-avoid-column` / `break-after-avoid-page` / `break-after-column` / `break-after-left` / `break-after-page` / `break-after-recto` / `break-after-right` / `break-after-verso` / `break-before-avoid` / `break-before-avoid-column` / `break-before-avoid-page` / `break-before-column` / `break-before-left` / `break-before-page` / `break-before-recto` / `break-before-right` / `break-before-verso`
+##### `bg-color(name)`
 
-#### Scrolling <!-- notoc -->
+- **name**: variable name (without `--` prefix)
 
-`ss-always` / `ss-both` / `ss-center` / `ss-end` / `ss-normal` / `ss-start` / `ss-x` / `ss-y`
+##### `color(name)`
 
-#### Selection <!-- notoc -->
+- **name**: variable name (without `--` prefix)
 
-`noselect`
+#### Grid layout
 
-#### Shadow <!-- notoc -->
+##### `grid-cols(cols)`
 
-`box-shadow-1` / `box-shadow-2` / `box-shadow-3` / `box-shadow-4` / `box-shadow-i-1` / `box-shadow-i-2` / `box-shadow-i-3` / `box-shadow-i-4` / `text-shadow-1` / `text-shadow-2` / `text-shadow-3` / `text-shadow-4` / `text-shadow-5` / `text-shadow-6` / `text-shadow-7` / `text-shadow-8` / `text-shadow-9`
+- **cols**: CSS cols definitions
 
-#### Text align <!-- notoc -->
+##### `grid-rows(rows)`
 
-`tc` / `tj` / `tl` / `tr`
+- **rows**: CSS rows definitions
 
-#### Text decorations <!-- notoc -->
+#### Positions
 
-`no-underline` / `strike` / `underline`
+##### `bottom(coordinate)`
 
-#### Text transforms <!-- notoc -->
+- **coordinate** (incl. units)
 
-`ttc` / `ttfsk` / `ttfw` / `tti` / `ttl` / `ttn` / `ttu`
+##### `left(coordinate)`
 
-#### Vertical align <!-- notoc -->
+- **coordinate** (incl. units)
 
-`v-base` / `v-btm` / `v-mid` / `v-top`
+##### `right(coordinate)`
 
-#### Visibility <!-- notoc -->
+- **coordinate** (incl. units)
 
-`collapse` / `hidden` / `visible`
+##### `top(coordinate)`
 
-#### Whitespace <!-- notoc -->
+- **coordinate** (incl. units)
 
-`ws-0` / `ws-1` / `ws-2`
+#### Svg
 
-#### Width <!-- notoc -->
+##### `fill(name)`
 
-`vw-25` / `vw-50` / `vw-75` / `vw-100` / `w1` / `w2` / `w3` / `w4` / `w5` / `w-10` / `w-16` / `w-17` / `w-20` / `w-25` / `w-30` / `w-33` / `w-34` / `w-40` / `w-50` / `w-60` / `w-66` / `w-67` / `w-70` / `w-75` / `w-80` / `w-83` / `w-84` / `w-90` / `w-100`
+- **name**: variable name (without `--` prefix)
 
-#### Z-indices <!-- notoc -->
+##### `stroke(name)`
 
-`z-0` / `z-1` / `z-2` / `z-3` / `z-4` / `z-5` / `z-999` / `z-9999`
+- **name**: variable name (without `--` prefix)
 
 ### Media queries
 
@@ -1000,6 +2153,7 @@ Currently, there are 940 CSS utility classes defined in MetaCSS base v0.7.0:
 - **light**: `{"prefers-color-scheme":"light"}`
 - **anim**: `{"prefers-reduced-motion":false}`
 - **noanim**: `{"prefers-reduced-motion":true}`
+- **contrast**: `{"forced-colors":true}`
 
 ## Status
 
@@ -1022,7 +2176,7 @@ distributed as CLI bundle with **no runtime dependencies**. The following
 dependencies are only shown for informational purposes and are (partially)
 included in the bundle.
 
-Package sizes (brotli'd, pre-treeshake): ESM: 12.25 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 12.83 KB
 
 ## Dependencies