{module @version="1.0.0" |
{import @as=docs @src="./cem-token-docs.cemt"}
{body |
{table @id=cem-typography-fontography |
{caption | {a @href="../tokens/cem-voice-fonts-typography.xhtml#12-1-foundation" | cem-typography-fontography} — semantic family stacks}
{thead | {tr | {th | Token}{th | Value}{th | Sample}{th | Tier}{th | Description}}}
{tbody | {cem:for-each @select="$datadom.slices.font" @as="row" |
{tr |
{th | {code | {$row.token}}}
{td | {code | {$row.value}}}
{td @class=sample-cell | {span @class=type-sample @style="font-family: var({$row.token});" | Reading UI 123}}
{td | {$row.tier}}
{td | {$row.description}}
}}}
}
{hr | }
{table @id=cem-typography-primitives |
{caption | thickness, size, line-height, letter-spacing, feature, reading-ergonomics}
{thead | {tr | {th | Token}{th | Value}{th | Sample}{th | Tier}{th | Description}}}
{tbody | {cem:for-each @select="(datadom.slices.thick,datadom.slices.size,datadom.slices.lh,datadom.slices.ls,datadom.slices.feat,datadom.slices.readerg)" @as="row" |
{tr |
{th | {code | {$row.token}}}
{td | {code | {$row.value}}}
{td @class=sample-cell |
{cem:choose |
{cem:when @test='str:contains(row.token, "thickness")' | {span @class=type-sample @style="font-weight: var({$row.token});" | Weight Aa 123}}
{cem:when @test='str:contains(row.token, "-size-")' | {span @class=type-sample @style="font-size: var({$row.token});" | Size Aa 123}}
{cem:when @test='str:contains(row.token, "line-height")' | {span @class="type-sample type-sample-block" @style="line-height: var({$row.token});" | Line height example{br | }second line}}
{cem:when @test='str:contains(row.token, "letter-spacing")' | {span @class=type-sample @style="letter-spacing: var({$row.token});" | TRACKING 123}}
{cem:when @test='str:contains(row.token, "numeric")' | {span @class=type-sample @style="font-variant-numeric: var({$row.token});" | 1111 8888 12.34}}
{cem:when @test='str:contains(row.token, "ligatures")' | {span @class=type-sample @style="font-variant-ligatures: var({$row.token});" | office affine ffi}}
{cem:when @test='str:contains(row.token, "optical-sizing")' | {span @class=type-sample @style="font-optical-sizing: var({$row.token});" | Optical size}}
{cem:when @test='str:contains(row.token, "measure")' | {span @class="type-sample type-sample-block" @style="max-width: var({$row.token});" | Readable measure example wraps only when the available table space is narrower than the token.}}
{cem:when @test='str:contains(row.token, "paragraph-gap")' |
{span @class="type-sample type-sample-block" | Paragraph one.}
{span @class="type-sample type-sample-block" @style="margin-top: var({$row.token});" | Paragraph two.}
}
{cem:otherwise | {span @class=type-sample | Aa 123}}
}
}
{td | {$row.tier}}
{td | {$row.description}}
}
}}
}
{hr | }
{table @id=cem-typography-voice-channels |
{caption | voice channels — 7 voices × 6 channels (ink + speech)}
{thead | {tr | {th | Token}{th | Value}{th | Sample}{th | Tier}{th | Description}}}
{tbody | {cem:for-each @select="(datadom.slices.vink,datadom.slices.vicon,datadom.slices.vvol,datadom.slices.vrate,datadom.slices.vpitch,datadom.slices.vssml)" @as="row" |
{tr |
{th | {code | {$row.token}}}
{td | {code | {$row.value}}}
{td @class=sample-cell |
{cem:choose |
{cem:when @test='str:contains(row.token, "ink-thickness")' | {span @class=type-sample @style="font-weight: var({$row.token});" | Voice ink Aa 123}}
{cem:when @test='str:contains(row.token, "icon-stroke-multiplier")' | {span @class=sample-meter @style="--sample-multiplier: var({$row.token});" | }}
{cem:when @test='str:contains(row.token, "speech-volume")' | {span @class=type-sample @style="opacity: var({$row.token});" | Speech volume {$row.value}}}
{cem:when @test='str:contains(row.token, "speech-rate")' | {span @class=type-sample | Speech rate {$row.value}}}
{cem:when @test='str:contains(row.token, "speech-pitch")' | {span @class=type-sample | Speech pitch {$row.value}}}
{cem:when @test='str:contains(row.token, "ssml-emphasis")' | {span @class=type-sample | SSML emphasis: {$row.value}}}
{cem:otherwise | {span @class=type-sample | Voice value {$row.value}}}
}
}
{td | {$row.tier}}
{td | {$row.description}}
}
}}
}
{hr | }
{table @id=cem-typography-roles |
{caption | semantic role endpoints — 8 roles × ~9-10 properties}
{thead | {tr | {th | Token}{th | Value}{th | Sample}{th | Tier}}}
{tbody | {cem:for-each @select="$datadom.slices.roles" @as="row" |
{tr |
{th | {code | {$row.token}}}
{td | {code | {$row.value}}}
{td @class=sample-cell |
{cem:choose |
{cem:when @test='str:contains(row.token, "font-family")' | {span @class=type-sample @style="font-family: var({$row.token});" | Role family Aa 123}}
{cem:when @test='str:contains(row.token, "font-size")' | {span @class=type-sample @style="font-size: var({$row.token});" | Role size Aa 123}}
{cem:when @test='str:contains(row.token, "line-height")' | {span @class="type-sample type-sample-block" @style="line-height: var({$row.token});" | Role line height{br | }second line}}
{cem:when @test='str:contains(row.token, "letter-spacing")' | {span @class=type-sample @style="letter-spacing: var({$row.token});" | ROLE TRACKING}}
{cem:when @test='str:contains(row.token, "font-weight")' | {span @class=type-sample @style="font-weight: var({$row.token});" | Role weight Aa 123}}
{cem:when @test='str:contains(row.token, "font-variant-numeric")' | {span @class=type-sample @style="font-variant-numeric: var({$row.token});" | 1111 8888 12.34}}
{cem:when @test='str:contains(row.token, "font-variant-ligatures")' | {span @class=type-sample @style="font-variant-ligatures: var({$row.token});" | office affine ffi}}
{cem:when @test='str:contains(row.token, "text-transform")' | {span @class=type-sample @style="text-transform: var({$row.token});" | role text}}
{cem:when @test='str:contains(row.token, "speech-volume")' | {span @class=type-sample @style="opacity: var({$row.token});" | Speech volume {$row.value}}}
{cem:when @test='str:contains(row.token, "speech-rate")' | {span @class=type-sample | Speech rate {$row.value}}}
{cem:when @test='str:contains(row.token, "speech-pitch")' | {span @class=type-sample | Speech pitch {$row.value}}}
{cem:when @test='str:contains(row.token, "ssml-emphasis")' | {span @class=type-sample | SSML emphasis: {$row.value}}}
{cem:otherwise | {span @class=type-sample | Role value {$row.value}}}
}
}
{td | {$row.tier}}
}
}}
}
{hr | }
{pre @class=language-css | {code @class=language-css @data-generated-css |```:root {
/* region 1) fontography — semantic family stacks */```{call @from=docs @template=css-properties @with:rows={datadom.slices.font} @with:indent=" "}```
/* endregion fontography */
/* region 2) thickness — 7-step weight scale */```{call @from=docs @template=css-properties @with:rows={datadom.slices.thick} @with:indent=" "}```
/* endregion thickness */
/* region 3) size — 7-step rem-based size scale */```{call @from=docs @template=css-properties @with:rows={datadom.slices.size} @with:indent=" "}```
/* endregion size */
/* region 4) line-height primitives */```{call @from=docs @template=css-properties @with:rows={datadom.slices.lh} @with:indent=" "}```
/* endregion line-height */
/* region 5) letter-spacing primitives */```{call @from=docs @template=css-properties @with:rows={datadom.slices.ls} @with:indent=" "}```
/* endregion letter-spacing */
/* region 6) typography feature policies */```{call @from=docs @template=css-properties @with:rows={datadom.slices.feat} @with:indent=" "}```
/* endregion feature policies */
/* region 7) reading ergonomics */```{call @from=docs @template=css-properties @with:rows={datadom.slices.readerg} @with:indent=" "}```
/* endregion reading ergonomics */
/* region 8) voice — ink-thickness (drives font-weight) */```{call @from=docs @template=css-properties @with:rows={datadom.slices.vink} @with:indent=" "}```
/* endregion voice ink-thickness */
/* region 9) voice — icon-stroke multipliers */```{call @from=docs @template=css-properties @with:rows={datadom.slices.vicon} @with:indent=" "}```
/* endregion voice icon-stroke */
/* region 10) voice — speech-volume (TTS adapter input, not screen-reader) */```{call @from=docs @template=css-properties @with:rows={datadom.slices.vvol} @with:indent=" "}```
/* endregion voice speech-volume */
/* region 11) voice — speech-rate */```{call @from=docs @template=css-properties @with:rows={datadom.slices.vrate} @with:indent=" "}```
/* endregion voice speech-rate */
/* region 12) voice — speech-pitch */```{call @from=docs @template=css-properties @with:rows={datadom.slices.vpitch} @with:indent=" "}```
/* endregion voice speech-pitch */
/* region 13) voice — ssml-emphasis */```{call @from=docs @template=css-properties @with:rows={datadom.slices.vssml} @with:indent=" "}```
/* endregion voice ssml-emphasis */
/* region 14) semantic role endpoints — 8 roles × ~9-10 properties each */```{call @from=docs @template=css-properties @with:rows={datadom.slices.roles} @with:indent=" "}```
/* endregion semantic role endpoints */
}
/* region dark theme — lighter ink to compensate for perceived boldness on dark backgrounds */
.cem-theme-dark, [data-theme="cem-theme-dark"],
.cem-theme-contrast-dark, [data-theme="cem-theme-contrast-dark"] {```{cem:for-each @select="$datadom.slices.vinkdark" @as="row" |```
```{$row.token}: {$row.dark_value};}```
}
/* endregion dark theme */
/* region contrast theme — stronger ink for visibility (overrides dark for shared rows) */
.cem-theme-contrast-light, [data-theme="cem-theme-contrast-light"],
.cem-theme-contrast-dark, [data-theme="cem-theme-contrast-dark"] {```{cem:for-each @select="$datadom.slices.vinkcontrast" @as="row" |```
```{$row.token}: {$row.contrast_value};}```
}
/* endregion contrast theme */
```}}
}
}