@thi.ng/meta-css 0.9.0 → 0.10.0

package/README.md

@@ -36,16 +36,20 @@
   - [Force inclusion of unreferenced classes](#force-inclusion-of-unreferenced-classes)
 - [Exporting a generated framework as CSS](#exporting-a-generated-framework-as-css)
   - [Media query variations](#media-query-variations)
+- [Development mode](#development-mode)
+- [Documenting a generated framework](#documenting-a-generated-framework)
+  - [Documentation metadata](#documentation-metadata)
 - [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)
+    - [Background color](#background-color)
     - [Border color](#border-color)
     - [Border radius](#border-radius)
     - [Border width](#border-width)
-    - [Colors](#colors)
+    - [Box sizing](#box-sizing)
     - [Content](#content)
     - [Cursors](#cursors)
     - [Display mode](#display-mode)
@@ -77,6 +81,7 @@
     - [Shadow](#shadow)
     - [Svg](#svg)
     - [Text align](#text-align)
+    - [Text color](#text-color)
     - [Text decorations](#text-decorations)
     - [Text transforms](#text-transforms)
     - [Vertical align](#vertical-align)
@@ -88,17 +93,19 @@
     - [Animation / transition](#animation--transition)
     - [Aspect ratios](#aspect-ratios)
     - [Background](#background)
+    - [Background color](#background-color)
     - [Border color](#border-color)
     - [Color adjustment](#color-adjustment)
     - [Color definitions](#color-definitions)
-    - [Colors](#colors)
     - [Dimensions](#dimensions)
+    - [Font families](#font-families)
     - [Grid layout](#grid-layout)
     - [Margin](#margin)
     - [Mask](#mask)
     - [Padding](#padding)
     - [Positions](#positions)
     - [Svg](#svg)
+    - [Text color](#text-color)
   - [Media queries](#media-queries)
 - [Status](#status)
 - [Related packages](#related-packages)
@@ -678,6 +685,7 @@ Main:
                         supported, @-prefix will read from file)
 -I STR, --include STR   [multiple] Include CSS files (prepend)
 -o STR, --out STR       Output file (or stdout)
+--scope STR             Suffix for CSS class names
 -s STR, --specs STR     [required] Path to generated JSON defs
 ```
 
@@ -685,6 +693,7 @@ Notes:
 
 - The `--no-write` flag is only used if `--bundle` is **disabled**
 - The `--out` file arg is only used if `--bundle` is **enabled**
+- The `--scope` option can be used to specify a suffix for all CSS classes.
 
 If bundling is disabled (default), each input `.mcss` file is converted
 individually and results are written to the same directory, but using `.css` as
@@ -931,6 +940,8 @@ If the `--only-decls` option is used, **only** the [framework
 declarations](#custom-declarations) but none of the generated utility classes
 will be exported.
 
+The `--scope` option can be used to specify a suffix for all CSS classes.
+
 ```text
 metacss export --help
 
@@ -949,6 +960,7 @@ Main:
 -I STR, --include STR   [multiple] Include CSS files (prepend)
 -m ID, --media ID       [multiple] Media query IDs (use 'ALL' for all)
 -o STR, --out STR       Output file (or stdout)
+--scope STR             Suffix for CSS class names
 ```
 
 ### Media query variations
@@ -965,6 +977,130 @@ to 50%) and media queries for different screen sizes (e.g. named `ns`, `l`),
 then the export with said media queries will also generate classes `w-50-ns`
 and `w-50-l` (incl. their corresponding `@media` wrappers).
 
+## Development mode
+
+The `develop` command is a combination of the `generate` and `convert` commands.
+It creates file watchers for all input files (both for generator specs **and**
+MCSS stylesheets) and then auto-generates/compiles/updates results. Together
+with [Vite](https://vitejs.dev/) this command enables a seamless hot-reloading
+workflow. Using a multi-process runner like
+[mprocs](https://github.com/pvolok/mprocs) further simplifies this.
+
+For example, using one of the bundled example projects in this repo ([more
+examples](#usage-examples)):
+
+```bash
+cd examples/meta-css-basics
+
+# launch both metacss in dev mode and vite's dev server
+mprocs 'yarn css:watch' 'yarn start:only'
+```
+
+See that example's
+[package.json](https://github.com/thi-ng/umbrella/blob/develop/examples/meta-css-basics/package.json)
+for concrete usage/reference.
+
+```text
+metacss develop --help
+
+Usage: metacss develop [opts] input [...]
+
+Flags:
+
+-b, --bundle            Bundle inputs (see `out` option)
+-d, --no-decls          Don't emit framework decls
+--no-header             Don't emit generated header comment
+-p, --pretty            Pretty print output
+-v, --verbose           Display extra process information
+-w, --watch             Watch input files for changes
+
+Main:
+
+-e STR, --eval STR      eval meta stylesheet in given string (ignores other
+                        inputs & includes)
+-f STR, --force STR     [multiple] CSS classes to force include (wildcards are
+                        supported, @-prefix will read from file)
+-I STR, --include STR   [multiple] Include CSS files (prepend)
+--out-css STR           [required] Output file for CSS bundle
+--out-specs STR         [required] Output file for framework
+--prec INT              Number of fractional digits (default: 3)
+--scope STR             Suffix for CSS class names
+```
+
+## Documenting a generated framework
+
+Generator specs and templates can include documentation metadata, which can then
+be utilized to produce Markdown documentation via the `metacss doc` command:
+
+```text
+metacss doc --help
+
+Usage: metacss doc [opts] input [...]
+
+Flags:
+
+-v, --verbose           Display extra process information
+
+Main:
+
+-l INT, --level INT     Initial heading level (default: 1)
+-o STR, --out STR       Output file (or stdout)
+-t STR, --title STR     Main title, set to 'none' to disable (default: "meta")
+```
+
+The command allows for customization of the initial heading level and title.
+
+### Documentation metadata
+
+All [generator specs](#generator-spec-structure) and
+[templates](#templated-class-definitions) can include a `doc` object with this
+structure:
+
+```json
+"doc": {
+    "group": "Section name for the group this spec belongs to",
+    "desc": "Description of this spec/class/template",
+    "args": [
+        "argName1: description",
+        "argName2: description...",
+    ]
+}
+```
+
+**Note:** The `args` field is **only** used for documenting
+[templates](#templated-class-definitions).
+
+All values in this `doc` object can contain [parameters](#parametric-ids) which
+will be interpolated when the framework specs are expanded (via the [`generate`
+command](#generating-css-frameworks)). For example, the following spec:
+
+```json
+{
+    "doc": { "group": "box sizing", "desc": "<v>" },
+    "name": "<v>",
+    "props": "box-sizing",
+    "values": ["border-box", "content-box"]
+}
+```
+
+...will be expanded to produce these CSS classes:
+
+```json
+{
+    "border-box": {
+        "__doc": { "group": "box sizing", "desc": "border-box" },
+        "box-sizing": "border-box"
+    },
+    "content-box": {
+        "__doc": { "group": "box sizing", "desc": "content-box" },
+        "box-sizing": "content-box"
+    }
+}
+```
+
+The command is also used to produce the following documentation of the included
+base framework specs.
+
 ## Bundled CSS base framework
 
 The package includes a large number of useful generator specs in
@@ -973,7 +1109,7 @@ 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 932 CSS utility classes (incl. 61 templates) defined in "MetaCSS base" (v0.8.0):
+Currently, there are 935 CSS utility classes (incl. 62 templates) defined in "MetaCSS base" (v0.9.0):
 
 ### Classes by category
 
@@ -984,6 +1120,8 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 
 #### Animation / transition
 
+<details><summary>22 items:</summary>
+
 - `anim-alternate` (direction)
 - `anim-alternate-reverse` (direction)
 - `anim-ease` (timing function)
@@ -1006,6 +1144,7 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `transition-linear` (timing function)
 - `transition-none` (none)
 - `transition-width` (width)
+</details>
 
 #### Aspect ratios
 
@@ -1013,6 +1152,8 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 
 #### Background
 
+<details><summary>17 items:</summary>
+
 - `bg-contain`
 - `bg-cover`
 - `bg-pos-center` (center)
@@ -1030,9 +1171,56 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `bg-repeat-space` (space)
 - `bg-repeat-x` (repeat-x)
 - `bg-repeat-y` (repeat-y)
+</details>
+
+#### Background color
+
+<details><summary>38 items:</summary>
+
+- `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)
+</details>
 
 #### Border color
 
+<details><summary>38 items:</summary>
+
 - `border-color-black` (#000)
 - `border-color-blue` (#357edd)
 - `border-color-current` (currentcolor)
@@ -1071,9 +1259,12 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `border-color-washed-yellow` (#fffceb)
 - `border-color-white` (#fff)
 - `border-color-yellow` (#ffd700)
+</details>
 
 #### Border radius
 
+<details><summary>27 items:</summary>
+
 - `br0` (0rem)
 - `br1` (.125rem)
 - `br2` (.25rem)
@@ -1081,155 +1272,90 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `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)
+- `brb0` (bottom 0rem)
+- `brb1` (bottom .125rem)
+- `brb2` (bottom .25rem)
+- `brb3` (bottom .5rem)
+- `brb4` (bottom 1rem)
+- `brl0` (left 0rem)
+- `brl1` (left .125rem)
+- `brl2` (left .25rem)
+- `brl3` (left .5rem)
+- `brl4` (left 1rem)
+- `brr0` (right 0rem)
+- `brr1` (right .125rem)
+- `brr2` (right .25rem)
+- `brr3` (right .5rem)
+- `brr4` (right 1rem)
+- `brt0` (top 0rem)
+- `brt1` (top .125rem)
+- `brt2` (top .25rem)
+- `brt3` (top .5rem)
+- `brt4` (top 1rem)
+</details>
 
 #### 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)
+<details><summary>35 items:</summary>
+
+- `bw0` ( 0rem)
+- `bw1` ( .125rem)
+- `bw2` ( .25rem)
+- `bw3` ( .5rem)
+- `bw4` ( 1rem)
+- `bw5` ( 2rem)
+- `bw-1px` ( 1px)
+- `bwb0` (bottom 0rem)
+- `bwb1` (bottom .125rem)
+- `bwb2` (bottom .25rem)
+- `bwb3` (bottom .5rem)
+- `bwb4` (bottom 1rem)
+- `bwb5` (bottom 2rem)
+- `bwb-1px` (bottom 1px)
+- `bwl0` (left 0rem)
+- `bwl1` (left .125rem)
+- `bwl2` (left .25rem)
+- `bwl3` (left .5rem)
+- `bwl4` (left 1rem)
+- `bwl5` (left 2rem)
+- `bwl-1px` (left 1px)
+- `bwr0` (right 0rem)
+- `bwr1` (right .125rem)
+- `bwr2` (right .25rem)
+- `bwr3` (right .5rem)
+- `bwr4` (right 1rem)
+- `bwr5` (right 2rem)
+- `bwr-1px` (right 1px)
+- `bwt0` (top 0rem)
+- `bwt1` (top .125rem)
+- `bwt2` (top .25rem)
+- `bwt3` (top .5rem)
+- `bwt4` (top 1rem)
+- `bwt5` (top 2rem)
+- `bwt-1px` (top 1px)
+</details>
+
+#### Box sizing
+
+- `border-box` (border-box)
+- `content-box` (content-box)
 
 #### Content
 
+<details><summary>6 items:</summary>
+
 - `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)
+</details>
 
 #### Cursors
 
+<details><summary>36 items:</summary>
+
 - `cursor-alias`
 - `cursor-auto`
 - `cursor-cell`
@@ -1266,9 +1392,12 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `cursor-vtext`
 - `cursor-w`
 - `cursor-wait`
+</details>
 
 #### Display mode
 
+<details><summary>11 items:</summary>
+
 - `db` (block)
 - `di` (inline)
 - `dib` (inline-block)
@@ -1280,9 +1409,12 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `dtr` (table-row)
 - `flex` (flex)
 - `grid` (grid)
+</details>
 
 #### Flex layout
 
+<details><summary>25 items:</summary>
+
 - `align-content-center`
 - `align-content-end`
 - `align-content-space-around`
@@ -1308,18 +1440,24 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `justify-content-space-evenly`
 - `justify-content-start`
 - `justify-content-stretch`
+</details>
 
 #### Font families
 
+<details><summary>6 items:</summary>
+
 - `monospace`
 - `sans-serif`
 - `serif`
 - `system`
 - `system-sans-serif`
 - `system-serif`
+</details>
 
 #### Font sizes
 
+<details><summary>9 items:</summary>
+
 - `f-subtitle` (5rem)
 - `f-title` (6rem)
 - `f1` (3rem)
@@ -1329,6 +1467,7 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `f5` (1rem)
 - `f6` (.875rem)
 - `f7` (.75rem)
+</details>
 
 #### Font style
 
@@ -1340,6 +1479,8 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 
 #### Font weights
 
+<details><summary>11 items:</summary>
+
 - `b` (700)
 - `fw100`
 - `fw200`
@@ -1351,9 +1492,12 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `fw800`
 - `fw900`
 - `normal` (400)
+</details>
 
 #### Grid layout
 
+<details><summary>46 items:</summary>
+
 - `align-items-center`
 - `align-items-end`
 - `align-items-start`
@@ -1400,9 +1544,12 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `justify-self-end`
 - `justify-self-start`
 - `justify-self-stretch`
+</details>
 
 #### Height
 
+<details><summary>29 items:</summary>
+
 - `h1` (1rem)
 - `h2` (2rem)
 - `h3` (4rem)
@@ -1432,9 +1579,12 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `vh-50`
 - `vh-75`
 - `vh-100`
+</details>
 
 #### Icons
 
+<details><summary>9 items:</summary>
+
 - `icon-1` (3rem)
 - `icon-2` (2.25rem)
 - `icon-3` (1.5rem)
@@ -1444,23 +1594,30 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `icon-7` (.75rem)
 - `icon-subtitle` (5rem)
 - `icon-title` (6rem)
+</details>
 
 #### Letter spacing
 
+<details><summary>6 items:</summary>
+
 - `ls-0` (0em)
 - `ls-1` (.05em)
 - `ls-2` (.1em)
 - `ls-3` (.2em)
 - `ls--1` (-.025em)
 - `ls--2` (-.05em)
+</details>
 
 #### Line heights
 
+<details><summary>5 items:</summary>
+
 - `lh-0` (0)
 - `lh-copy` (1.5)
 - `lh-double` (2)
 - `lh-solid` (1)
 - `lh-title` (1.25)
+</details>
 
 #### Lists
 
@@ -1468,6 +1625,8 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 
 #### Margin
 
+<details><summary>55 items:</summary>
+
 - `center`
 - `ma0` ( 0rem)
 - `ma1` ( .25rem)
@@ -1523,9 +1682,12 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `mv3` (top 1rem)
 - `mv4` (top 2rem)
 - `mv5` (top 4rem)
+</details>
 
 #### Mask
 
+<details><summary>13 items:</summary>
+
 - `mask-clip-border` (border-box)
 - `mask-clip-content` (content-box)
 - `mask-clip-fill` (fill-box)
@@ -1539,9 +1701,12 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `mask-type-alpha` (alpha)
 - `mask-type-luminance` (luminance)
 - `mask-type-match-source` (match-source)
+</details>
 
 #### Max. height
 
+<details><summary>25 items:</summary>
+
 - `maxh1` (1rem)
 - `maxh2` (2rem)
 - `maxh3` (4rem)
@@ -1567,9 +1732,12 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `maxh-84` (%)
 - `maxh-90` (%)
 - `maxh-100` (%)
+</details>
 
 #### Max. width
 
+<details><summary>25 items:</summary>
+
 - `maxw1` (1rem)
 - `maxw2` (2rem)
 - `maxw3` (4rem)
@@ -1595,9 +1763,12 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `maxw-84` (%)
 - `maxw-90` (%)
 - `maxw-100` (%)
+</details>
 
 #### Min. height
 
+<details><summary>25 items:</summary>
+
 - `minh1` (1rem)
 - `minh2` (2rem)
 - `minh3` (4rem)
@@ -1623,9 +1794,12 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `minh-84` (%)
 - `minh-90` (%)
 - `minh-100` (%)
+</details>
 
 #### Min. width
 
+<details><summary>25 items:</summary>
+
 - `minw1` (1rem)
 - `minw2` (2rem)
 - `minw3` (4rem)
@@ -1651,9 +1825,12 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `minw-84` (%)
 - `minw-90` (%)
 - `minw-100` (%)
+</details>
 
 #### Opacity
 
+<details><summary>11 items:</summary>
+
 - `o-0` (0)
 - `o-10` (0.1)
 - `o-20` (0.2)
@@ -1665,9 +1842,12 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `o-80` (0.8)
 - `o-90` (0.9)
 - `o-100` (1)
+</details>
 
 #### Overflow
 
+<details><summary>12 items:</summary>
+
 - `overflow-auto`
 - `overflow-hidden`
 - `overflow-scroll`
@@ -1680,9 +1860,12 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `overflow-y-hidden`
 - `overflow-y-scroll`
 - `overflow-y-visible`
+</details>
 
 #### Padding
 
+<details><summary>54 items:</summary>
+
 - `pa0` ( 0rem)
 - `pa1` ( .25rem)
 - `pa2` ( .5rem)
@@ -1737,9 +1920,12 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `pv3` (top 1rem)
 - `pv4` (top 2rem)
 - `pv5` (top 4rem)
+</details>
 
 #### Positions
 
+<details><summary>25 items:</summary>
+
 - `absolute`
 - `bottom-0` (0rem)
 - `bottom-1` (1rem)
@@ -1765,9 +1951,12 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `top-2` (2rem)
 - `top--1` (-1rem)
 - `top--2` (-2rem)
+</details>
 
 #### Print
 
+<details><summary>18 items:</summary>
+
 - `break-after-avoid`
 - `break-after-avoid-column`
 - `break-after-avoid-page`
@@ -1786,9 +1975,12 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `break-before-recto`
 - `break-before-right`
 - `break-before-verso`
+</details>
 
 #### Scrolling
 
+<details><summary>8 items:</summary>
+
 - `ss-always` (snap stop)
 - `ss-both` (snap type)
 - `ss-center` (snap align)
@@ -1797,6 +1989,7 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `ss-start` (snap align)
 - `ss-x` (snap type)
 - `ss-y` (snap type)
+</details>
 
 #### Selection
 
@@ -1804,6 +1997,8 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 
 #### Shadow
 
+<details><summary>17 items:</summary>
+
 - `box-shadow-1` (0 0 2px 0px #0003)
 - `box-shadow-2` (0 0 4px #0003)
 - `box-shadow-3` (0 0 4px 1px #0003)
@@ -1821,9 +2016,12 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `text-shadow-7` (3px 3px 2px #0003)
 - `text-shadow-8` (3px 3px 4px #0003)
 - `text-shadow-9` (3px 3px 8px #0003)
+</details>
 
 #### Svg
 
+<details><summary>76 items:</summary>
+
 - `fill-black` (#000)
 - `fill-blue` (#357edd)
 - `fill-current` (currentcolor)
@@ -1900,13 +2098,61 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `stroke-washed-yellow` (#fffceb)
 - `stroke-white` (#fff)
 - `stroke-yellow` (#ffd700)
+</details>
 
 #### Text align
 
+<details><summary>4 items:</summary>
+
 - `tc` (center)
 - `tj` (justify)
 - `tl` (left)
 - `tr` (right)
+</details>
+
+#### Text color
+
+<details><summary>38 items:</summary>
+
+- `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)
+</details>
 
 #### Text decorations
 
@@ -1916,6 +2162,8 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 
 #### Text transforms
 
+<details><summary>7 items:</summary>
+
 - `ttc` (capitalize)
 - `ttfsk` (full-size-kana)
 - `ttfw` (full-width)
@@ -1923,13 +2171,17 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `ttl` (lowercase)
 - `ttn` (none)
 - `ttu` (uppercase)
+</details>
 
 #### Vertical align
 
+<details><summary>4 items:</summary>
+
 - `v-base` (baseline)
 - `v-btm` (bottom)
 - `v-mid` (middle)
 - `v-top` (top)
+</details>
 
 #### Visibility
 
@@ -1945,6 +2197,8 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 
 #### Width
 
+<details><summary>29 items:</summary>
+
 - `vw-25`
 - `vw-50`
 - `vw-75`
@@ -1974,9 +2228,12 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `w-84` (%)
 - `w-90` (%)
 - `w-100` (%)
+</details>
 
 #### Z-indices
 
+<details><summary>8 items:</summary>
+
 - `z-0`
 - `z-1`
 - `z-2`
@@ -1985,11 +2242,14 @@ Currently, there are 932 CSS utility classes (incl. 61 templates) defined in "Me
 - `z-5`
 - `z-999`
 - `z-9999`
+</details>
 
 ### Templates by category
 
 #### Animation / transition
 
+<details><summary>15 items:</summary>
+
 ##### `anim(body)`
 
 - **body**: CSS value/definition
@@ -2065,6 +2325,8 @@ Animation which rotates element a full turn, looping indefinitely
 
 Sets transition-timing-function to `steps(num)`
 
+</details>
+
 #### Aspect ratios
 
 ##### `aspect-ratio(width, height)`
@@ -2083,6 +2345,8 @@ Sets aspect ratio of background. Use with `bg-aspect-ratio-object` on child elem
 
 #### Background
 
+<details><summary>4 items:</summary>
+
 ##### `bg-blur(radius)`
 
 - **radius**: incl. units
@@ -2099,6 +2363,14 @@ Sets aspect ratio of background. Use with `bg-aspect-ratio-object` on child elem
 
 - **body**: CSS value/definition
 
+</details>
+
+#### Background color
+
+##### `bg-color(name)`
+
+- **name**: variable name (without `--` prefix)
+
 #### Border color
 
 ##### `border-color(name)`
@@ -2107,6 +2379,8 @@ Sets aspect ratio of background. Use with `bg-aspect-ratio-object` on child elem
 
 #### Color adjustment
 
+<details><summary>4 items:</summary>
+
 ##### `adjust-hsl(prop, name, hue, sat, lum, alpha)`
 
 - **prop**: CSS target property
@@ -2151,8 +2425,12 @@ Assigns an adjusted version of a `def-oklch()` defined color to given CSS proper
 
 Assigns an adjusted version of a `def-rgb()`-defined color to given CSS property.
 
+</details>
+
 #### Color definitions
 
+<details><summary>4 items:</summary>
+
 ##### `def-hsl(name, hue, sat, lum, alpha)`
 
 - **name**: variable name (without `--` prefix)
@@ -2193,18 +2471,12 @@ Defines a oklch() color variable with given name and additional derived vars for
 
 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.
 
-#### Colors
-
-##### `bg-color(name)`
-
-- **name**: variable name (without `--` prefix)
-
-##### `color(name)`
-
-- **name**: variable name (without `--` prefix)
+</details>
 
 #### Dimensions
 
+<details><summary>6 items:</summary>
+
 ##### `height(height)`
 
 - **height**: incl. units
@@ -2241,6 +2513,14 @@ Sets min-width to given value
 
 Sets width to given value
 
+</details>
+
+#### Font families
+
+##### `font-family(body)`
+
+- **body**: CSS value/definition
+
 #### Grid layout
 
 ##### `grid-cols(cols)`
@@ -2253,6 +2533,8 @@ Sets width to given value
 
 #### Margin
 
+<details><summary>7 items:</summary>
+
 ##### `ma(size)`
 
 - **size**: incl. units
@@ -2295,6 +2577,8 @@ Sets margin to custom size
 
 Sets margin to custom size
 
+</details>
+
 #### Mask
 
 ##### `mask-image(body)`
@@ -2303,6 +2587,8 @@ Sets margin to custom size
 
 #### Padding
 
+<details><summary>7 items:</summary>
+
 ##### `pa(size)`
 
 - **size**: incl. units
@@ -2345,8 +2631,12 @@ Sets padding to custom size
 
 Sets padding to custom size
 
+</details>
+
 #### Positions
 
+<details><summary>4 items:</summary>
+
 ##### `bottom(coordinate)`
 
 - **coordinate** (incl. units)
@@ -2363,6 +2653,8 @@ Sets padding to custom size
 
 - **coordinate** (incl. units)
 
+</details>
+
 #### Svg
 
 ##### `fill(name)`
@@ -2373,11 +2665,19 @@ Sets padding to custom size
 
 - **name**: variable name (without `--` prefix)
 
+#### Text color
+
+##### `color(name)`
+
+- **name**: variable name (without `--` prefix)
+
 ### Media queries
 
-- **ns**: `{"min-width":"30rem"}`
-- **m**: `{"min-width":"30rem","max-width":"60rem"}`
-- **l**: `{"min-width":"60rem"}`
+- **ns**: `{"min-width":"640px"}`
+- **m**: `{"min-width":"768px"}`
+- **l**: `{"min-width":"1024px"}`
+- **xl**: `{"min-width":"1280px"}`
+- **2xl**: `{"min-width":"1536px"}`
 - **dark**: `{"prefers-color-scheme":"dark"}`
 - **light**: `{"prefers-color-scheme":"light"}`
 - **anim**: `{"prefers-reduced-motion":false}`
@@ -2405,7 +2705,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.85 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 13.75 KB
 
 ## Dependencies
 
@@ -2413,10 +2713,12 @@ Package sizes (brotli'd, pre-treeshake): ESM: 12.85 KB
 - [@thi.ng/args](https://github.com/thi-ng/umbrella/tree/develop/packages/args)
 - [@thi.ng/arrays](https://github.com/thi-ng/umbrella/tree/develop/packages/arrays)
 - [@thi.ng/checks](https://github.com/thi-ng/umbrella/tree/develop/packages/checks)
+- [@thi.ng/compare](https://github.com/thi-ng/umbrella/tree/develop/packages/compare)
 - [@thi.ng/errors](https://github.com/thi-ng/umbrella/tree/develop/packages/errors)
 - [@thi.ng/file-io](https://github.com/thi-ng/umbrella/tree/develop/packages/file-io)
 - [@thi.ng/hiccup-css](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-css)
 - [@thi.ng/logger](https://github.com/thi-ng/umbrella/tree/develop/packages/logger)
+- [@thi.ng/memoize](https://github.com/thi-ng/umbrella/tree/develop/packages/memoize)
 - [@thi.ng/rstream](https://github.com/thi-ng/umbrella/tree/develop/packages/rstream)
 - [@thi.ng/strings](https://github.com/thi-ng/umbrella/tree/develop/packages/strings)
 - [@thi.ng/text-format](https://github.com/thi-ng/umbrella/tree/develop/packages/text-format)
@@ -2428,13 +2730,20 @@ Several projects in this repo's
 [/examples](https://github.com/thi-ng/umbrella/tree/develop/examples)
 directory are using this package:
 
-| Screenshot                                                                                                             | Description                                            | Live demo                                             | Source                                                                             |
-|:-----------------------------------------------------------------------------------------------------------------------|:-------------------------------------------------------|:------------------------------------------------------|:-----------------------------------------------------------------------------------|
-| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/blurhash.jpg" width="240"/>        | Interactive & reactive image blurhash generator        | [Demo](https://demo.thi.ng/umbrella/blurhash/)        | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/blurhash)        |
-| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/layout-gridgen.png" width="240"/>  | Randomized space-filling, nested grid layout generator | [Demo](https://demo.thi.ng/umbrella/layout-gridgen/)  | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/layout-gridgen)  |
-| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/meta-css-basics.png" width="240"/> | Basic thi.ng/meta-css usage & testbed                  | [Demo](https://demo.thi.ng/umbrella/meta-css-basics/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/meta-css-basics) |
-| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-dnd.png" width="240"/>        | rdom drag & drop example                               | [Demo](https://demo.thi.ng/umbrella/rdom-dnd/)        | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-dnd)        |
-| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-lazy-load.png" width="240"/>  | Lazy loading components via @thi.ng/rdom               | [Demo](https://demo.thi.ng/umbrella/rdom-lazy-load/)  | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-lazy-load)  |
+| Screenshot                                                                                                                 | Description                                                                                 | Live demo                                                 | Source                                                                                 |
+|:---------------------------------------------------------------------------------------------------------------------------|:--------------------------------------------------------------------------------------------|:----------------------------------------------------------|:---------------------------------------------------------------------------------------|
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/blurhash.jpg" width="240"/>            | Interactive & reactive image blurhash generator                                             | [Demo](https://demo.thi.ng/umbrella/blurhash/)            | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/blurhash)            |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/layout-gridgen.png" width="240"/>      | Randomized space-filling, nested grid layout generator                                      | [Demo](https://demo.thi.ng/umbrella/layout-gridgen/)      | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/layout-gridgen)      |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/meta-css-basics.png" width="240"/>     | Basic thi.ng/meta-css usage & testbed                                                       | [Demo](https://demo.thi.ng/umbrella/meta-css-basics/)     | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/meta-css-basics)     |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/ramp-scroll-anim.png" width="240"/>    | Scroll-based, reactive, multi-param CSS animation basics                                    | [Demo](https://demo.thi.ng/umbrella/ramp-scroll-anim/)    | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/ramp-scroll-anim)    |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-dnd.png" width="240"/>            | rdom drag & drop example                                                                    | [Demo](https://demo.thi.ng/umbrella/rdom-dnd/)            | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-dnd)            |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-formgen.jpg" width="240"/>        | Basic usage of the declarative rdom-forms generator                                         | [Demo](https://demo.thi.ng/umbrella/rdom-formgen/)        | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-formgen)        |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-lazy-load.png" width="240"/>      | Lazy loading components via @thi.ng/rdom                                                    | [Demo](https://demo.thi.ng/umbrella/rdom-lazy-load/)      | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-lazy-load)      |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-web-components.png" width="240"/> | Defining & using basic Web Components (with shadow DOM) via @thi.ng/rdom & @thi.ng/meta-css | [Demo](https://demo.thi.ng/umbrella/rdom-web-components/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-web-components) |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rstream-system-bus.png" width="240"/>  | Declarative component-based system with central rstream-based pubsub event bus              | [Demo](https://demo.thi.ng/umbrella/rstream-system-bus/)  | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rstream-system-bus)  |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/text-canvas.png" width="240"/>         | 3D wireframe textmode demo                                                                  | [Demo](https://demo.thi.ng/umbrella/text-canvas/)         | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/text-canvas)         |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/trace-bitmap.jpg" width="240"/>        | Multi-layer vectorization & dithering of bitmap images                                      | [Demo](https://demo.thi.ng/umbrella/trace-bitmap/)        | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/trace-bitmap)        |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/webgl-texture-paint.jpg" width="240"/> | Interactively drawing to & reading from a WebGL offscreen render texture                    | [Demo](https://demo.thi.ng/umbrella/webgl-texture-paint/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/webgl-texture-paint) |
 
 ## Authors