{module @version="1.0.0" |
{import @as=docs @src="./cem-token-docs.cemt"}
{body |
{call @from=docs @template=preview-token-table
@with:rows={datadom.slices.durations} @with:id=cem-timing-durations
@with:href="../tokens/cem-timing.xhtml#4-1-duration-tokens-required"
@with:link_label=cem-timing-durations @with:caption=" — duration scale"
@with:preview_label=Demo @with:preview_kind=duration}
{hr | }
{call @from=docs @template=preview-token-table
@with:rows={datadom.slices.easings} @with:id=cem-timing-easings
@with:href="../tokens/cem-timing.xhtml#4-2-easing-tokens-required"
@with:link_label=cem-timing-easings @with:caption=" — easing curves"
@with:preview_label=Demo @with:preview_kind=easing}
{hr | }
{table @id=cem-timing-reduced-motion |
{caption | {a @href="../tokens/cem-timing.xhtml#4-4-reduced-motion-overrides" | cem-timing-reduced-motion} — prefers-reduced-motion overrides}
{thead | {tr | {th | Token}{th | Reduced value}{th | Description}}}
{tbody | {cem:for-each @select="$datadom.slices.reduced" @as="row" |
{tr | {th | {code | {$row.token}}}{td | {code | {$row.reduced_motion_value}}}{td | {$row.description}}}}}
}
{hr | }
{pre @class=language-css | {code @class=language-css @data-generated-css |```:root {
/* region durations: cem-duration-[bucket] */```{call @from=docs @template=css-properties @with:rows={datadom.slices.durations} @with:indent=" "}```
/* endregion durations */
/* region easings: cem-easing-[intent] */```{call @from=docs @template=css-properties @with:rows={datadom.slices.easings} @with:indent=" "}```
/* endregion easings */
}
/* region prefers-reduced-motion: shorten durations, preserve ordering */
@media (prefers-reduced-motion: reduce) {
:root {```{cem:for-each @select="$datadom.slices.reduced" @as="row" |```
```{$row.token}: {$row.reduced_motion_value};}```
}
}
/* endregion prefers-reduced-motion */
```}}
}
}