<!-- GENERATED by scripts/generate-ai-docs.mjs - do not edit by hand. Regenerate with: npm run ai-docs. Source digest: sha256:528dec4229b050f64cfc42296b07e751b9f8808ecec021f9cd927e686ce97f13 -->

# Quark utility classes

Quarks are modifier classes compiled into the components that opted into them - they are
not global utilities. When a component's catalog entry lists "quark utilities seen in the
showcase", those modifiers can be combined with that component's classes the same way.
Conventions: see `{DOMAIN}/ai/components-index.md`.

## Size scales

Numeric modifier classes; `<n>` must be one of the listed values (pixels).

| Quark          | Classes                     | Values                                                                                                                                                                      |
| -------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| q-paddings     | `-s<n>` / `-v<n>` / `-h<n>` | 10, 15, 30, 70                                                                                                                                                              |
| q-sizes        | `-s<n>`                     | 6, 10, 12, 16, 20, 24, 26, 30, 36, 44, 48, 64                                                                                                                               |
| q-widths       | `-w<n>`                     | 4, 20, 25, 34, 40, 44, 50, 60, 70, 80, 100, 110, 120, 130, 140, 150, 160, 180, 190, 200, 220, 230, 240, 300, 320, 400, 450, 500, 550, 700, 800, 900, 1000, 1100, 1200, 1300 |
| q-heights      | `-h<n>`                     | 10, 12, 15, 20, 24, 34, 44, 60, 80, 100, 120, 160, 200, 300, 400, 500, 600, 700, 770, 800                                                                                   |
| q-max-heights  | `-hmax<n>`                  | 100, 200, 300, 400, 500, 800                                                                                                                                                |
| q-min-widths   | `-wmin<n>`                  | 0                                                                                                                                                                           |
| q-max-widths   | `-wmax<n>`                  | 150, 250, 300                                                                                                                                                               |
| q-grows        | `-g<n>`                     | 1, 2, 3, 4, 5, 6                                                                                                                                                            |
| q-line-heights | `-lh<n>`                    | 12, 13, 14, 18, 24, 30, 48                                                                                                                                                  |

`q-paddings` classes: `-s<n>` = padding on all sides, `-v<n>` = vertical, `-h<n>` =
horizontal. `-h-window-necessary` caps height at `calc(100vh - 250px)`.

## Modifier classes by module

### text

`-bold`, `-italic`, `-uppercase`, `-ellipsis`, `-faded-overflow`, `-align-center`, `-align-left`, `-align-right`, `-align-justify`, `-color-main`, `-color-main-light`, `-color-accent`, `-color-danger`, `-color-warning`, `-color-info`, `-color-success`, `-color-valid`, `-color-shade-0`, `-color-shade-5`, `-color-shade-30`, `-color-shade-35`, `-color-shade-40`, `-color-shade-50`, `-color-shade-50-faded`, `-color-shade-75`, `-color-shade-85`, `-color-shade-95`, `-color-shade-100`, `-color-shade-100-faded`, `-color-service-ebv`, `-color-service-a2psms`, `-color-service-simbox`, `-color-service-ctq`, `-color-service-qos`, `-color-matching-billed`, `-color-matching-rated`, `-color-matching-interco`, `-color-matching-reversement`, `-color-a2psms-o`, `-color-a2psms-olo`, `-color-a2psms-oio`, `-color-a2psms-gt`, `-color-a2psms-wl`, `-color-simbox-o`, `-color-simbox-olo`, `-color-simbox-oio`, `-color-graph-1`, `-color-graph-2`, `-color-graph-3`, `-color-graph-4`, `-color-graph-5`, `-color-graph-6`, `-color-graph-7`, `-color-graph-8`, `-color-graph-9`, `-color-graph-10`, `-color-half-main`, `-color-half-main-light`, `-color-half-accent`, `-color-half-danger`, `-color-half-warning`, `-color-half-success`, `-color-half-valid`, `-color-half-shade-0`, `-color-half-shade-5`, `-color-half-shade-30`, `-color-half-shade-35`, `-color-half-shade-40`, `-color-half-shade-50`, `-color-half-shade-50-faded`, `-color-half-shade-75`, `-color-half-shade-85`, `-color-half-shade-95`, `-color-half-shade-100`, `-color-half-shade-100-faded`, `-color-half-service-ebv`, `-color-half-service-a2psms`, `-color-half-service-simbox`, `-color-half-service-ctq`, `-color-half-service-qos`, `-color-half-matching-billed`, `-color-half-matching-rated`, `-color-half-matching-interco`, `-color-half-matching-reversement`, `-color-half-a2psms-o`, `-color-half-a2psms-olo`, `-color-half-a2psms-oio`, `-color-half-a2psms-gt`, `-color-half-a2psms-wl`, `-color-half-simbox-o`, `-color-half-simbox-olo`, `-color-half-simbox-oio`, `-color-half-graph-1`, `-color-half-graph-2`, `-color-half-graph-3`, `-color-half-graph-4`, `-color-half-graph-5`, `-color-half-graph-6`, `-color-half-graph-7`, `-color-half-graph-8`, `-color-half-graph-9`, `-color-half-graph-10`, `-preserve-spaces`, `-multi-line`, `-break-word`, `-break-all`, `-no-wrap`, `-ts<n>`

### fill

`-fill-half-main`, `-fill-half-main-light`, `-fill-half-accent`, `-fill-half-shade-5`, `-fill-half-shade-20`, `-fill-half-shade-30`, `-fill-half-shade-35`, `-fill-half-shade-40`, `-fill-half-shade-50`, `-fill-half-shade-50-faded`, `-fill-half-shade-75`, `-fill-half-shade-85`, `-fill-half-shade-95`, `-fill-half-shade-100`, `-fill-half-danger`, `-fill-half-valid`, `-fill-half-warning`, `-fill-half-background-service-a2psms`, `-fill-half-background-service-simbox`, `-fill-half-background-service-ctq`, `-fill-half-background-service-qos`, `-fill-main`, `-fill-main-light`, `-fill-accent`, `-fill-accent-light`, `-fill-secondary`, `-fill-shade-5`, `-fill-shade-20`, `-fill-shade-30`, `-fill-shade-35`, `-fill-shade-40`, `-fill-shade-50`, `-fill-shade-50-faded`, `-fill-shade-75`, `-fill-shade-85`, `-fill-shade-95`, `-fill-shade-100`, `-fill-background-service-a2psms`, `-fill-background-service-simbox`, `-fill-background-service-ctq`, `-fill-background-service-qos`, `-fill-lightly-darken-background-service-qos`, `-fill-background`, `-fill-danger`, `-fill-danger-light`, `-fill-valid`, `-fill-valid-light`, `-fill-warning`, `-fill-warning-light`, `-fill-at-risk`, `-fill-graph-1`, `-fill-graph-2`, `-fill-graph-3`, `-fill-graph-4`, `-fill-graph-5`, `-fill-graph-6`, `-fill-graph-7`, `-fill-graph-8`, `-fill-graph-9`, `-fill-graph-10`

### border

`-border-color-main`, `-border-color-main-light`, `-border-color-accent`, `-border-color-accent-light`, `-border-color-shade-5`, `-border-color-shade-20`, `-border-color-shade-30`, `-border-color-shade-35`, `-border-color-shade-40`, `-border-color-shade-50`, `-border-color-shade-50-faded`, `-border-color-shade-75`, `-border-color-shade-85`, `-border-color-shade-95`, `-border-color-shade-100`, `-border-color-service-a2psms`, `-border-color-service-simbox`, `-border-color-service-ctq`, `-border-color-service-qos`, `-border-color-danger`, `-border-color-danger-light`, `-border-color-valid`, `-border-color-valid-light`, `-border-color-warning`, `-border-color-warning-light`, `-border-style-solid`, `-border-style-dotted`, `-border-style-dashed`, `-border-width-<n>`

### cursor

`-clickable`, `-cursor-default`, `-not-allowed`, `-draggable`

### transformations

`-horizontal-mirror`, `-vertical-mirror`