{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.rungs} @with:id=cem-layering-rungs
@with:href="../tokens/cem-layering.xhtml#7-1-required-rung-tokens"
@with:link_label=cem-layering-rungs
@with:caption=" — signed-depth ladder (box-shadow recipes)"
@with:preview_label=Sample @with:preview_kind=shadow}
{hr | }
{call @from=docs @template=standard-token-table
@with:rows="{(datadom.slices.semantic,datadom.slices.optional)}"
@with:id=cem-layering-semantic-table
@with:href="../tokens/cem-layering.xhtml#8-1-canonical-endpoints"
@with:link_label=cem-layering-semantic @with:caption=" — required semantic endpoints"}
{hr | }
{call @from=docs @template=standard-token-table
@with:rows={datadom.slices.stacking} @with:id=cem-layering-popup-stacking
@with:href="../tokens/cem-layering.xhtml#15-1-1-public-choice-popup-stacking"
@with:link_label=cem-layering-popup-stacking @with:caption=" — physical choice-popup stacking"}
{hr | }
{table @id=cem-layering-rungs-forced |
{caption | {a @href="../tokens/cem-layering.xhtml#13-2-forced-colors" | cem-layering-rungs-forced} — forced-colors fallback}
{thead | {tr | {th | Token}{th | Forced-colors value}}}
{tbody | {cem:for-each @select="$datadom.slices.forced" @as="row" |
{tr | {th | {code | {$row.token}}}{td | {code | {$row.forced_colors_value}}}}}}
}
{hr | }
{pre @class=language-css | {code @class=language-css @data-generated-css |```:root {
/* region basis rungs — signed depth ladder as box-shadow recipes (NOT z-index) */```{call @from=docs @template=css-properties @with:rows={datadom.slices.rungs} @with:indent=" "}```
/* endregion basis rungs */
/* region semantic endpoints — required product-facing contract */```{call @from=docs @template=css-properties @with:rows={datadom.slices.semantic} @with:indent=" "}```
/* endregion semantic endpoints */
/* region optional semantic endpoints — back-deep / work-floating */```{call @from=docs @template=css-properties @with:rows={datadom.slices.optional} @with:indent=" "}```
/* endregion optional semantic endpoints */
/* region physical choice-popup stacking — independent of semantic elevation */```{call @from=docs @template=css-properties @with:rows={datadom.slices.stacking} @with:indent=" "}```
/* endregion physical choice-popup stacking */
}
/* region forced-colors fallback — collapse rungs; tier signal carried by D5 contour and spatial isolation */
@media (forced-colors: active) {
:root {```{cem:for-each @select="$datadom.slices.forced" @as="row" |```
```{$row.token}: {$row.forced_colors_value};}```
}
}
/* endregion forced-colors fallback */
```}}
}
}