Initial commit: add styleguide project
This commit is contained in:
@@ -0,0 +1,252 @@
|
||||
<!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 Components</title>
|
||||
<link rel="stylesheet" href="./styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Semantic Tokens Components</h1>
|
||||
|
||||
<section id="semantic-cards">
|
||||
<h2 class="sg-sub-heading sg-section-h2">Cards</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 in der Komponente</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>surface-card</td><td>color-light-grey</td><td>Grundfläche der Card.</td></tr>
|
||||
<tr><td>surface-card-body</td><td>color-light-grey</td><td>Fläche im Body-Segment der Card.</td></tr>
|
||||
<tr><td>surface-card-header-primary</td><td>color-darkblue</td><td>Primärer Header-Hintergrund.</td></tr>
|
||||
<tr><td>surface-card-header-alternative</td><td>color-darkgreen</td><td>Alternativer Header-Hintergrund.</td></tr>
|
||||
<tr><td>surface-card-header-alternative2</td><td>color-darkbrown</td><td>Zweite alternative Header-Fläche (im CSS derzeit als surface-card-header-muted geführt).</td></tr>
|
||||
<tr><td>divider-card-segment</td><td>color-white</td><td>Trenner zwischen Segmenten.</td></tr>
|
||||
<tr><td>text-card-header</td><td>color-font-light</td><td>Header-Textfarbe.</td></tr>
|
||||
<tr><td>text-card-body</td><td>color-font-dark</td><td>Standard-Textfarbe im Body.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Group Card</h3>
|
||||
<table class="sg-foundation-table sg-table-label">
|
||||
<thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>surface-card-group</td><td>color-background-purple-light</td><td>Fläche der eigentlichen Group Card (heller Container, der mehrere Cards gruppiert).</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Text Group Box</h3>
|
||||
<table class="sg-foundation-table sg-table-label">
|
||||
<thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>surface-card-transparent</td><td>color-transparent</td><td>Transparente Fläche der Text-Group-Box ohne Card-Segmente.</td></tr>
|
||||
<tr><td>text-group-box</td><td>color-font-light</td><td>Textfarbe der Text-Group-Box (im CSS derzeit als text-card-transparent geführt).</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section id="semantic-interactive">
|
||||
<h2 class="sg-sub-heading sg-section-h2">Interactive Elements</h2>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Button</h3>
|
||||
<table class="sg-foundation-table sg-table-label">
|
||||
<thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>surface-button-active</td><td>color-medium-grey</td><td>Fläche aktiver Standard-Buttons.</td></tr>
|
||||
<tr><td>surface-button-inactive</td><td>color-light-grey</td><td>Fläche inaktiver Standard-Buttons.</td></tr>
|
||||
<tr><td>surface-button-process</td><td>color-font-hyperlink</td><td>Fläche von Prozess-/CTA-Buttons.</td></tr>
|
||||
<tr><td>surface-button-process-inactive</td><td>color-process-inactive</td><td>Fläche inaktiver Prozess-/CTA-Buttons.</td></tr>
|
||||
<tr><td>text-button-process</td><td>color-font-light</td><td>Textfarbe auf Prozess-/CTA-Buttons.</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Tabs</h3>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
|
||||
<tr><td>surface-tab-selected</td><td>color-dark-grey</td><td>Fläche des ausgewählten Tabs.</td></tr>
|
||||
<tr><td>surface-tab-unselected</td><td>color-white</td><td>Fläche nicht ausgewählter Tabs.</td></tr>
|
||||
<tr><td>text-tab-selected</td><td>color-font-light</td><td>Textfarbe des ausgewählten Tabs.</td></tr>
|
||||
<tr><td>text-tab-unselected</td><td>color-dark-grey</td><td>Textfarbe nicht ausgewählter Tabs.</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Form Controls</h3>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
|
||||
<tr><td>surface-control-default</td><td>color-white</td><td>Standardfläche für Input-/Auswahl-Controls.</td></tr>
|
||||
<tr><td>surface-control-active</td><td>color-white</td><td>Fläche aktiver Controls.</td></tr>
|
||||
<tr><td>surface-control-inactive</td><td>color-white</td><td>Fläche inaktiver, aber wählbarer Controls.</td></tr>
|
||||
<tr><td>surface-control-disabled</td><td>color-white</td><td>Fläche deaktivierter Controls.</td></tr>
|
||||
<tr><td>text-control-default</td><td>color-font-dark</td><td>Standard-Textfarbe in Controls.</td></tr>
|
||||
<tr><td>text-control-disabled</td><td>color-dark-grey</td><td>Textfarbe deaktivierter Controls.</td></tr>
|
||||
<tr><td>surface-input-clear</td><td>color-medium-grey</td><td>Fläche des Clear-Buttons in Inputs.</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>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Pulldown and Menu</h3>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
|
||||
<tr><td>surface-pulldown-panel</td><td>color-light-grey</td><td>Fläche geöffneter Pulldown-Panels.</td></tr>
|
||||
<tr><td>icon-pulldown-chevron</td><td>currentColor-basierte Verlaufsgrafik</td><td>Chevron-Icon für Pulldown-Trigger und Select-Felder; folgt der aktuellen Textfarbe.</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>surface-menu-panel-portal</td><td>color-light-grey</td><td>Fläche des Portal-Sandwich-Menü-Panels (groß).</td></tr>
|
||||
<tr><td>surface-menu-panel-object</td><td>color-light-grey</td><td>Fläche des Objekt-Sandwich-Menü-Panels (klein).</td></tr>
|
||||
<tr><td>text-menu-link-portal</td><td>color-font-dark</td><td>Linktextfarbe im Portal-Sandwich-Menü.</td></tr>
|
||||
<tr><td>text-menu-link-object</td><td>color-font-dark</td><td>Linktextfarbe im Objekt-Sandwich-Menü.</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Toggle / Checkbox / Radio / Help</h3>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
|
||||
<tr><td>surface-toggle-track</td><td>color-medium-grey</td><td>Toggle-Track-Fläche.</td></tr>
|
||||
<tr><td>surface-toggle-handle</td><td>color-darkblue</td><td>Toggle-Handle-Fläche.</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ß (wie Tasten-Navigation-schmal).</td></tr>
|
||||
<tr><td>layout-mode-toggle-local-width-factor</td><td>3</td><td>Breitenfaktor des Modus Schieber lokal relativ zur lokalen Höhe für eine proportionale Kompaktvariante.</td></tr>
|
||||
<tr><td>surface-checkbox-default</td><td>color-light-grey</td><td>Standardfläche der Checkbox.</td></tr>
|
||||
<tr><td>surface-checkbox-on-context</td><td>color-white</td><td>Checkbox-Fläche auf Kontextflächen.</td></tr>
|
||||
<tr><td>surface-radio-default</td><td>color-white</td><td>Standardfläche des Radio-Buttons.</td></tr>
|
||||
<tr><td>icon-radio-mark</td><td>color-font-dark</td><td>Markierungsfarbe im Radio-Button.</td></tr>
|
||||
<tr><td>surface-help-icon</td><td>color-medium-grey</td><td>Fläche des Help-Icons.</td></tr>
|
||||
<tr><td>surface-help-panel</td><td>color-light-grey</td><td>Fläche des Help-Panels.</td></tr>
|
||||
<tr><td>text-help-icon</td><td>color-font-dark</td><td>Textfarbe im Help-Icon.</td></tr>
|
||||
<tr><td>text-help-panel</td><td>color-font-dark</td><td>Textfarbe im Help-Panel.</td></tr>
|
||||
<tr><td>icon-sandwich-line-portal</td><td>color-font-dark</td><td>Linienfarbe des Portal-Sandwich-Icons (groß).</td></tr>
|
||||
<tr><td>icon-sandwich-line-object</td><td>color-font-dark</td><td>Linienfarbe des Objekt-Sandwich-Icons (klein).</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Slider</h3>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
|
||||
<tr><td>surface-slider-track</td><td>color-medium-grey</td><td>Grundfläche des Slider-Strichs.</td></tr>
|
||||
<tr><td>surface-slider-progress</td><td>color-dark-grey</td><td>Ausgewählter Bereich links vom Slider-Knopf.</td></tr>
|
||||
<tr><td>surface-slider-thumb</td><td>color-dark-grey</td><td>Gefüllte Fläche des Slider-Knopfs (ohne Linie).</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Preview Area</h3>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
|
||||
<tr><td>surface-form-preview</td><td>color-light-grey</td><td>Fläche von Formular-/Control-Preview-Bereichen.</td></tr>
|
||||
<tr><td>text-hyperlink</td><td>color-font-hyperlink</td><td>Linkfarbe in interaktiven Texten.</td></tr>
|
||||
</tbody></table>
|
||||
</section>
|
||||
|
||||
<section id="semantic-charts">
|
||||
<h2 class="sg-sub-heading sg-section-h2">Charts</h2>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Score Bar</h3>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
|
||||
<tr><td>surface-score-bar-track</td><td>color-light-grey</td><td>Hintergrund der Score-Bar.</td></tr>
|
||||
<tr><td>chart-value-positive</td><td>color-signal-green</td><td>Füllfarbe positiver Werte.</td></tr>
|
||||
<tr><td>chart-value-neutral</td><td>color-signal-yellow</td><td>Füllfarbe neutraler Werte.</td></tr>
|
||||
<tr><td>chart-value-negative</td><td>color-signal-red</td><td>Füllfarbe negativer Werte.</td></tr>
|
||||
<tr><td>chart-median-line</td><td>color-font-dark</td><td>Farbe der Median-Markierung.</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Bar / Line Chart</h3>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
|
||||
<tr><td>surface-chart-area</td><td>color-light-grey</td><td>Grundfläche des Charts.</td></tr>
|
||||
<tr><td>chart-value-primary</td><td>color-darkblue</td><td>Primäre Datenreihe.</td></tr>
|
||||
<tr><td>chart-value-reference</td><td>color-medium-grey</td><td>Referenz-/Vergleichsreihe.</td></tr>
|
||||
<tr><td>chart-grid-line</td><td>color-medium-grey</td><td>Gridline-Farbe.</td></tr>
|
||||
<tr><td>chart-axis-line</td><td>color-font-dark</td><td>Achsenfarbe.</td></tr>
|
||||
<tr><td>chart-marker-line</td><td>color-font-dark</td><td>Marker-/Hilfslinienfarbe.</td></tr>
|
||||
<tr><td>text-chart-default</td><td>color-font-dark</td><td>Textfarbe in Achsen/Labels.</td></tr>
|
||||
</tbody></table>
|
||||
</section>
|
||||
|
||||
<section id="semantic-data-display">
|
||||
<h2 class="sg-sub-heading sg-section-h2">Data Display</h2>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Data Table Small</h3>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
|
||||
<tr><td>surface-data-table</td><td>color-light-grey</td><td>Gesamtfläche der Tabelle.</td></tr>
|
||||
<tr><td>surface-data-table-header</td><td>color-light-grey</td><td>Fläche der Tabellenkopfzeile.</td></tr>
|
||||
<tr><td>surface-data-table-cell</td><td>color-light-grey</td><td>Fläche von Tabellenzellen.</td></tr>
|
||||
<tr><td>surface-data-table-help-icon</td><td>color-medium-grey</td><td>Fläche des Help-Icons im Tabellenkontext.</td></tr>
|
||||
<tr><td>text-data-table-default</td><td>color-font-dark</td><td>Standard-Textfarbe in Tabellenzellen.</td></tr>
|
||||
<tr><td>text-data-table-warning</td><td>color-signal-yellow</td><td>Warnwertfarbe in Tabellenzellen.</td></tr>
|
||||
<tr><td>text-data-table-help-icon</td><td>color-font-dark</td><td>Textfarbe im Tabellen-Help-Icon.</td></tr>
|
||||
</tbody></table>
|
||||
</section>
|
||||
|
||||
<section id="semantic-typography">
|
||||
<h2 class="sg-sub-heading sg-section-h2">Typography</h2>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Typography Preview</h3>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
|
||||
<tr><td>text-typography-preview</td><td>color-font-light</td><td>Textfarbe in der Typografie-Preview.</td></tr>
|
||||
</tbody></table>
|
||||
</section>
|
||||
|
||||
<section id="semantic-patterns">
|
||||
<h2 class="sg-sub-heading sg-section-h2">Patterns</h2>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Portal Header</h3>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
|
||||
<tr><td>surface-portal-header</td><td>color-darkblue</td><td>Header-Grundfläche.</td></tr>
|
||||
<tr><td>surface-portal-header-tab</td><td>color-darkblue</td><td>Fläche nicht aktiver Header-Tabs.</td></tr>
|
||||
<tr><td>surface-portal-header-tab-active</td><td>color-light-grey</td><td>Fläche aktiver Header-Tabs.</td></tr>
|
||||
<tr><td>surface-portal-header-menu-panel</td><td>surface-menu-panel-portal</td><td>Alias auf Portal-Menü-Panel-Fläche aus Interactive Elements.</td></tr>
|
||||
<tr><td>surface-portal-header-menu-trigger</td><td>surface-control-default</td><td>Alias auf Standard-Control-Fläche aus Interactive Elements.</td></tr>
|
||||
<tr><td>text-portal-header-brand</td><td>color-font-light</td><td>Textfarbe der Brand.</td></tr>
|
||||
<tr><td>font-size-portal-header-brand</td><td>calc(font-size-brand * 1.1)</td><td>Schriftgröße der Brand im Portal Header (10% größer als Standard-Brand).</td></tr>
|
||||
<tr><td>text-portal-header-tab</td><td>color-font-light</td><td>Textfarbe nicht aktiver Header-Tabs.</td></tr>
|
||||
<tr><td>text-portal-header-tab-active</td><td>color-font-dark</td><td>Textfarbe aktiver Header-Tabs.</td></tr>
|
||||
<tr><td>text-portal-header-menu-link</td><td>text-menu-link-portal</td><td>Alias auf Portal-Menü-Link-Textfarbe.</td></tr>
|
||||
<tr><td>icon-portal-header-menu-line</td><td>icon-sandwich-line-portal</td><td>Alias auf Portal-Sandwich-Linienfarbe.</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Options Row</h3>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
|
||||
<tr><td>surface-options-row</td><td>color-light-grey</td><td>Grundfläche der Options Row.</td></tr>
|
||||
<tr><td>surface-options-row-control</td><td>surface-control-default</td><td>Alias auf Standard-Control-Fläche innerhalb der Options Row.</td></tr>
|
||||
<tr><td>surface-options-row-control-selected</td><td>surface-control-active</td><td>Alias auf aktive Control-Fläche innerhalb der Options Row.</td></tr>
|
||||
<tr><td>surface-options-row-input-clear</td><td>surface-input-clear</td><td>Alias auf Clear-Button-Fläche im Input der Options Row.</td></tr>
|
||||
<tr><td>surface-options-row-toggle-track</td><td>surface-toggle-track</td><td>Alias auf Toggle-Track-Fläche innerhalb der Options Row.</td></tr>
|
||||
<tr><td>surface-options-row-toggle-handle</td><td>surface-toggle-handle</td><td>Alias auf Toggle-Handle-Fläche innerhalb der Options Row.</td></tr>
|
||||
<tr><td>surface-options-row-slider-track</td><td>surface-slider-track</td><td>Alias auf Slider-Track-Fläche innerhalb der Options Row.</td></tr>
|
||||
<tr><td>surface-options-row-slider-progress</td><td>surface-slider-progress</td><td>Alias auf den ausgewählten Slider-Bereich innerhalb der Options Row.</td></tr>
|
||||
<tr><td>surface-options-row-slider-thumb</td><td>surface-slider-thumb</td><td>Alias auf die Slider-Knopf-Fläche innerhalb der Options Row.</td></tr>
|
||||
<tr><td>surface-options-row-help-icon</td><td>surface-help-icon</td><td>Alias auf Help-Icon-Fläche innerhalb der Options Row.</td></tr>
|
||||
<tr><td>surface-options-row-help-panel</td><td>surface-help-panel</td><td>Alias auf Help-Panel-Fläche innerhalb der Options Row.</td></tr>
|
||||
<tr><td>divider-options-row-mobile</td><td>color-white</td><td>Trennerfarbe zwischen Segmenten im mobilen Layout der Options Row.</td></tr>
|
||||
<tr><td>text-options-row-default</td><td>text-control-default</td><td>Alias auf Standard-Textfarbe für Controls in der Options Row.</td></tr>
|
||||
<tr><td>text-options-row-placeholder</td><td>text-control-disabled</td><td>Alias auf Placeholder-/Disabled-Textfarbe in der Options Row.</td></tr>
|
||||
<tr><td>text-options-row-help-icon</td><td>color-font-light</td><td>Textfarbe im Help-Icon der Options Row.</td></tr>
|
||||
<tr><td>text-options-row-help-panel</td><td>text-help-panel</td><td>Alias auf Help-Panel-Textfarbe der Options Row.</td></tr>
|
||||
<tr><td>text-options-row-description</td><td>color-font-light</td><td>Textfarbe der beschreibenden Hinweistexte oberhalb der Options Row.</td></tr>
|
||||
<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>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Object Card</h3>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
|
||||
<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, damit das Action-Segment unten in der Card bleibt.</td></tr>
|
||||
<tr><td>surface-object-card-lower-segment</td><td>color-white</td><td>Hintergrundfläche der unteren zwei Segmente der Object Card.</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Navigation Card</h3>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
|
||||
<tr><td>surface-navigation-card</td><td>color-white</td><td>Grundfläche der Navigation Card.</td></tr>
|
||||
<tr><td>surface-navigation-card-body</td><td>color-white</td><td>Fläche im Body-Segment der Navigation Card.</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h3 class="sg-sub-heading sg-section-h3">Card Gruppe mit Tastennavigation</h3>
|
||||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
|
||||
<tr><td>surface-content-block-card-title</td><td>color-light-grey</td><td>Hintergrundfläche des oberen Titel-Segments der Inhaltsblock-Karte.</td></tr>
|
||||
<tr><td>surface-content-block-card-content</td><td>color-white</td><td>Hintergrundfläche des unteren Inhalts-Segments der Inhaltsblock-Karte.</td></tr>
|
||||
<tr><td>text-content-block-card-title</td><td>color-font-dark</td><td>Textfarbe im Titel-Segment der Inhaltsblock-Karte.</td></tr>
|
||||
<tr><td>text-content-block-card-content</td><td>color-font-dark</td><td>Textfarbe im Inhalts-Segment der Inhaltsblock-Karte.</td></tr>
|
||||
</tbody></table>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user