{module @version="1.0.0" |
{import @as=docs @src="./cem-token-docs.cemt"}
{body |
{table @id=cem-dim-scale |
{caption | {a @href="../tokens/cem-dimension.xhtml#5-1-primary-dimension-scale-semantic-css" | cem-dim-scale} — dimension scale}
{thead | {tr | {th | Token}{th | Value}{th | Description}}}
{tbody | {cem:for-each @select="$datadom.slices.scale" @as="row" |
{tr |
{th | {code | {$row.token}}}
{td @style="width:5rem; background-color: var(--cem-palette-comfort, #fff)" | {div @style="height: {$row.value}; background: currentColor; min-height: 2px; max-height: 8rem;" @title='{str:concat((row.token, ": ", row.value))}' | }}
{td | {code | {$row.value}} — {$row.description}}
}}}
}
{hr | }
{table @id=cem-dim-spacing-endpoints |
{caption | {a @href="../tokens/cem-dimension.xhtml#6-1-relationship-gaps-between-items" | cem-dim-gaps} + {a @href="../tokens/cem-dimension.xhtml#6-2-insets-inside-a-surface" | cem-dim-insets} — semantic spacing endpoints}
{thead | {tr | {th | Token}{th | Value}{th | Swatch}{th | Description}}}
{tbody | {cem:for-each @select="(datadom.slices.gaps,datadom.slices.insets)" @as="row" |
{tr | {th | {code | {$row.token}}}{td | {code | {$row.value}}}{td @style="width:5rem;" | {div @style="height:1rem; width: var({$row.token}); background: currentColor; min-width: 2px; max-width: 8rem;" @title="{$row.token}" | }}{td | {$row.description}}}}}
}
{hr | }
{call @from=docs @template=standard-token-table
@with:rows={datadom.slices.layout} @with:id=cem-dim-layout
@with:href="../tokens/cem-dimension.xhtml#7-4-layout-token-table"
@with:link_label=cem-dim-layout @with:caption=" — layout rhythm tokens"}
{hr | }
{table @id=cem-dim-spacing-overrides |
{caption | {a @href="../tokens/cem-dimension.xhtml#8-2-concrete-overrides-recommended-default-mapping" | cem-dim-spacing-overrides} — density mode overrides}
{thead | {tr | {th | Token}{th | dense}{th | sparse}}}
{tbody | {cem:for-each @select="$datadom.slices.overrides" @as="row" |
{tr | {th | {code | {$row.token}}}{td | {code | {$row.dense}}}{td | {code | {$row.sparse}}}}}}
}
{hr | }
{pre @class=language-css | {code @class=language-css @data-generated-css |```:root {
/* region dimension scale: cem-dim-[size] */```{call @from=docs @template=css-properties @with:rows={datadom.slices.scale} @with:indent=" "}```
/* endregion dimension scale */
/* region relationship gaps: cem-gap-[level] */```{call @from=docs @template=css-properties @with:rows={datadom.slices.gaps} @with:indent=" "}```
/* endregion gaps */
/* region insets: cem-inset-[level] */```{call @from=docs @template=css-properties @with:rows={datadom.slices.insets} @with:indent=" "}```
/* endregion insets */
/* region reading rhythm: cem-rhythm-reading-[level] */```{call @from=docs @template=css-properties @with:rows={datadom.slices.rreading} @with:indent=" "}```
/* endregion reading rhythm */
/* region data rhythm: cem-rhythm-data-[level] */```{call @from=docs @template=css-properties @with:rows={datadom.slices.rdata} @with:indent=" "}```
/* endregion data rhythm */
/* region layout tokens: cem-layout-[purpose] (excludes deprecated) */```{cem:for-each @select="$datadom.slices.layout" @as="row" |{cem:if @test='row.tier != "deprecated"' |```
```{$row.token}: {$row.value};}}```
/* endregion layout tokens */
}
/* region spacing mode: dense */
:root[data-cem-spacing="dense"] {```{cem:for-each @select="$datadom.slices.overrides" @as="row" |```
```{$row.token}: {$row.dense};}```
}
/* endregion spacing mode: dense */
/* region spacing mode: sparse */
:root[data-cem-spacing="sparse"] {```{cem:for-each @select="$datadom.slices.overrides" @as="row" |```
```{$row.token}: {$row.sparse};}```
}
/* endregion spacing mode: sparse */
```}}
}
}