76 lines
7.7 KiB
HTML
76 lines
7.7 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Styleguide – Semantic Tokens Layouts</title>
|
||
<link rel="stylesheet" href="./styleguide.css">
|
||
</head>
|
||
<body>
|
||
|
||
<h1 class="sg-main-heading">Semantic Tokens Layouts</h1>
|
||
|
||
<section id="semantic-layouts">
|
||
<h2 class="sg-sub-heading sg-section-h2">Layouts</h2>
|
||
|
||
<h3 class="sg-sub-heading sg-section-h3">Cards</h3>
|
||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Layout</th></tr></thead><tbody>
|
||
<tr><td>layout-card-body-content-justify</td><td>flex-start</td><td>Ausrichtung des Inhalts im Body-Segment der Card.</td></tr>
|
||
<tr><td>layout-card-segment-content-gap</td><td>spacing-small</td><td>Vertikaler Abstand zwischen Inhaltselementen innerhalb eines Card-Segments.</td></tr>
|
||
<tr><td>layout-card-segment-padding-top</td><td>card-segment-padding-vertical</td><td>Oberer Innenabstand von Card-Segmenten.</td></tr>
|
||
<tr><td>layout-card-segment-padding-right</td><td>card-segment-padding-horizontal</td><td>Rechter Innenabstand von Card-Segmenten.</td></tr>
|
||
<tr><td>layout-card-segment-padding-bottom</td><td>card-segment-padding-vertical</td><td>Unterer Innenabstand von Card-Segmenten.</td></tr>
|
||
<tr><td>layout-card-segment-padding-left</td><td>card-segment-padding-horizontal</td><td>Linker Innenabstand von Card-Segmenten.</td></tr>
|
||
<tr><td>layout-card-body-padding-top</td><td>layout-card-segment-padding-top</td><td>Oberer Innenabstand des Card-Body-Segments.</td></tr>
|
||
<tr><td>layout-card-body-padding-right</td><td>layout-card-segment-padding-right</td><td>Rechter Innenabstand des Card-Body-Segments.</td></tr>
|
||
<tr><td>layout-card-body-padding-bottom</td><td>layout-card-segment-padding-bottom</td><td>Unterer Innenabstand des Card-Body-Segments.</td></tr>
|
||
<tr><td>layout-card-body-padding-left</td><td>layout-card-segment-padding-left</td><td>Linker Innenabstand des Card-Body-Segments.</td></tr>
|
||
<tr><td>layout-card-body-text-margin</td><td>0</td><td>Textabstand im Card-Body; verhindert zusätzliche Default-Margins.</td></tr>
|
||
</tbody></table>
|
||
|
||
<h3 class="sg-sub-heading sg-section-h3">Interactive Elements</h3>
|
||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Layout</th></tr></thead><tbody>
|
||
<tr><td>layout-tab-navigation-large-padding-inline</td><td>interaction-padding-horizontal</td><td>Horizontaler Innenabstand für große Tab-Navigationen.</td></tr>
|
||
<tr><td>layout-input-label-width</td><td>dimension-input-label-width</td><td>Desktop-Breite der Label-Spalte für ein- und mehrzeilige Eingabefelder.</td></tr>
|
||
<tr><td>layout-input-field-desktop-width</td><td>dimension-input-field-desktop-width</td><td>Fixe Desktop-Breite für ein- und mehrzeilige Eingabefelder.</td></tr>
|
||
<tr><td>layout-input-field-max-width</td><td>dimension-input-field-max-width</td><td>Maximale Breite für ein- und mehrzeilige Eingabefelder (ohne Suchfeld).</td></tr>
|
||
<tr><td>layout-search-field-width</td><td>dimension-search-field-width</td><td>Fixe Breite des Suchfeld-Inputs.</td></tr>
|
||
<tr><td>layout-pulldown-panel-padding-inline</td><td>compact-interaction-padding-horizontal</td><td>Horizontaler Innenabstand des geöffneten Pulldown-Panels.</td></tr>
|
||
<tr><td>layout-pulldown-option-padding-inline</td><td>compact-interaction-padding-horizontal</td><td>Horizontaler Innenabstand der einzelnen Pulldown-Optionen.</td></tr>
|
||
<tr><td>layout-pulldown-padding-inline</td><td>compact-interaction-padding-horizontal</td><td>Innenabstand links für Pulldown-Trigger und Select-Felder.</td></tr>
|
||
<tr><td>layout-pulldown-chevron-offset</td><td>compact-interaction-padding-horizontal</td><td>Rechter Innenabstand des Chevron-Icons im Pulldown.</td></tr>
|
||
<tr><td>layout-pulldown-chevron-reserved-space</td><td>spacing-large</td><td>Reservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich.</td></tr>
|
||
<tr><td>layout-mode-toggle-local-height</td><td>compact-interaction-height</td><td>Höhe des Modus Schieber lokal; entspricht dem kompakten Interaktionsmaß.</td></tr>
|
||
<tr><td>layout-mode-toggle-local-width-factor</td><td>3</td><td>Breitenfaktor des lokalen Modus-Schiebers relativ zur lokalen Höhe.</td></tr>
|
||
<tr><td>layout-mode-toggle-width</td><td>calc(interaction-height * 3.5)</td><td>Standardbreite des Mode-Toggles in regulären Varianten.</td></tr>
|
||
<tr><td>layout-help-panel-width</td><td>calc(interaction-height * 8)</td><td>Standardbreite des Help-Panels.</td></tr>
|
||
</tbody></table>
|
||
|
||
<h3 class="sg-sub-heading sg-section-h3">Typography</h3>
|
||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Layout</th></tr></thead><tbody>
|
||
<tr><td>layout-preview-align-items</td><td>flex-start</td><td>Vertikale Ausrichtung der Elemente innerhalb der Typografie-Preview.</td></tr>
|
||
</tbody></table>
|
||
|
||
<h3 class="sg-sub-heading sg-section-h3">Pattern Layout Tokens</h3>
|
||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Layout</th></tr></thead><tbody>
|
||
<tr><td>layout-options-row-margin-top</td><td>spacing-small</td><td>Abstand oberhalb der Options Row.</td></tr>
|
||
<tr><td>layout-options-row-main-gap</td><td>spacing-large</td><td>Horizontaler Abstand zwischen linker und rechter Aktionsgruppe.</td></tr>
|
||
<tr><td>layout-options-row-group-gap</td><td>spacing-small</td><td>Abstand zwischen Controls innerhalb der linken und rechten Gruppe.</td></tr>
|
||
<tr><td>layout-options-row-mode-toggle-width</td><td>dimension-options-row-mode-toggle-width</td><td>Breite des Mode-Toggles innerhalb der Options Row.</td></tr>
|
||
<tr><td>layout-options-row-help-panel-width</td><td>dimension-options-row-help-panel-width</td><td>Breite des Help-Panels innerhalb der Options Row.</td></tr>
|
||
<tr><td>layout-object-card-min-width</td><td>dimension-object-card-min-width</td><td>Mindestbreite der Object Card im horizontalen Desktop-Layout.</td></tr>
|
||
<tr><td>layout-object-card-max-width</td><td>dimension-object-card-max-width</td><td>Maximalbreite der Object Card im horizontalen Desktop-Layout.</td></tr>
|
||
<tr><td>layout-object-card-height</td><td>dimension-object-card-height</td><td>Fixe Höhe der Object Card im Desktop-Layout.</td></tr>
|
||
<tr><td>layout-object-card-mobile-width</td><td>dimension-object-card-mobile-width</td><td>Volle verfügbare Breite der Object Card auf Mobile.</td></tr>
|
||
<tr><td>layout-object-card-mobile-height</td><td>dimension-object-card-mobile-height</td><td>Inhaltsabhängige Höhe der Object Card auf Mobile.</td></tr>
|
||
<tr><td>layout-object-card-desktop-breakpoint</td><td>dimension-object-card-desktop-breakpoint</td><td>Breakpoint, ab dem die Desktop-Maße der Object Card aktiv sind.</td></tr>
|
||
<tr><td>layout-object-card-content-grow</td><td>dimension-object-card-content-grow</td><td>Flex-Grow-Wert für das vorletzte Segment der Object Card.</td></tr>
|
||
<tr><td>layout-object-card-shared-width</td><td>auto</td><td>Geteilte Laufzeitbreite für gekoppelte Object-Card-Instanzen.</td></tr>
|
||
<tr><td>layout-content-cards-group-gap</td><td>spacing-small</td><td>Abstand zwischen Inhaltsblock-Karten innerhalb der Gruppe.</td></tr>
|
||
<tr><td>layout-card-list-drawer-width</td><td>dimension-card-list-drawer-width</td><td>Breite des ausziehbaren Card-Listenbereichs relativ zum Container.</td></tr>
|
||
</tbody></table>
|
||
</section>
|
||
|
||
</body>
|
||
</html>
|