{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.basis} @with:id=cem-stroke-basis
@with:href="../tokens/cem-stroke.xhtml#3-1-stroke-basis-tokens"
@with:link_label=cem-stroke-basis @with:caption=" — stroke basis"
@with:preview_label=Sample @with:preview_kind=stroke}
{hr | }
{call @from=docs @template=standard-token-table
@with:rows={datadom.slices.appearance} @with:id=cem-stroke-indicator-appearance
@with:href="../tokens/cem-stroke.xhtml#cem-stroke-indicator-appearance"
@with:link_label=cem-stroke-indicator-appearance
@with:caption=" — outline/underline geometry selectors"}
{hr | }
{call @from=docs @template=preview-token-table
@with:rows={datadom.slices.semantic} @with:id=cem-stroke-semantic
@with:href="../tokens/cem-stroke.xhtml#4-1-endpoints"
@with:link_label=cem-stroke-semantic @with:caption=" — semantic stroke endpoints"
@with:preview_label=Sample @with:preview_kind=stroke}
{hr | }
{table @id=cem-stroke-zebra-rings |
{caption | {a @href="../tokens/cem-stroke.xhtml#5-2-canonical-zebra-tokens-d5-contract" | cem-stroke-zebra-pattern} + {a @href="../tokens/cem-stroke.xhtml#5-3-recommended-indicator-composition-box-shadow-ring" | cem-stroke-rings} — zebra-pattern geometry and ring recipes}
{thead | {tr | {th | Token}{th | Value}{th | Tier}{th | Description}}}
{tbody | {cem:for-each @select="(datadom.slices.zebra,datadom.slices.pending,datadom.slices.rings)" @as="row" |
{tr | {th | {code | {$row.token}}}{td | {code | {$row.value}}}{td | {$row.tier}}{td | {$row.description}}}}}
}
{hr | }
{table @id=cem-stroke-rings-forced |
{caption | {a @href="../tokens/cem-stroke.xhtml#8-2-forced-colors-high-contrast" | cem-stroke-rings-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.value}}}}}}
}
{hr | }
{pre @class=language-css | {code @class=language-css @data-generated-css |```:root {
/* region stroke basis — none / hair / standard / strong */```{call @from=docs @template=css-properties @with:rows={datadom.slices.basis} @with:indent=" "}```
/* endregion stroke basis */
/* region semantic endpoints — boundary / divider / focus / selected / target / indicator-offset */```{call @from=docs @template=css-properties @with:rows={datadom.slices.semantic} @with:indent=" "}```
/* endregion semantic endpoints */
/* region zebra pattern geometry — angle only (strip-size and colors owned by D0) */```{call @from=docs @template=css-properties @with:rows={datadom.slices.zebra} @with:indent=" "}```
/* endregion zebra pattern geometry */```{call @from=docs @template=css-properties @with:rows={datadom.slices.pending} @with:indent=" "}```
/* region indicator appearance selectors — outline=0 / underline=1 */```{call @from=docs @template=css-properties @with:rows={datadom.slices.appearance} @with:indent=" "}```
/* endregion indicator appearance selectors */
/* region ring recipes — box-shadow composition referencing D0 zebra tokens */```{call @from=docs @template=css-properties @with:rows={datadom.slices.rings} @with:indent=" "}```
/* endregion ring recipes */
}
/* Action contour presence is inherited across explicit theme boundaries. */
:root, [data-theme*="cem-theme-"], .cem-theme-native, .cem-theme-light, .cem-theme-dark, .cem-theme-contrast-light, .cem-theme-contrast-dark {```{call @from=docs @template=css-properties @with:rows={datadom.slices.action} @with:indent=" "}```
}
[data-theme="cem-theme-contrast-light"], [data-theme="cem-theme-contrast-dark"], .cem-theme-contrast-light, .cem-theme-contrast-dark {```{cem:for-each @select="$datadom.slices.action" @as="row" |```
```{$row.token}: {$row.contrast};}```
}
/* region forced-colors fallback — collapse rings to a single Highlight outline (Principle P4) */
@media (forced-colors: active) {
:root {```{call @from=docs @template=css-properties @with:rows={datadom.slices.forced} @with:indent=" "}```
}
}
/* endregion forced-colors fallback */
```}}
}
}