75 lines
6.5 KiB
HTML
75 lines
6.5 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 Patterns</title>
|
||
<link rel="stylesheet" href="./styleguide.css">
|
||
</head>
|
||
<body>
|
||
|
||
<h1 class="sg-main-heading">Semantic Tokens Patterns</h1>
|
||
|
||
<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 im Pattern</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-midblue</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>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(var(--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>
|
||
</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 im Pattern</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-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>
|
||
</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 im Pattern</th></tr></thead><tbody>
|
||
<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">Company Card</h3>
|
||
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
|
||
<tr><td>text-company-card-data-negative</td><td>chart-value-negative</td><td>Textfarbe für negative Kennzahlenwerte im Data-Columns-Segment der Company Card.</td></tr>
|
||
<tr><td>text-company-card-moat-neutral</td><td>chart-value-neutral</td><td>Textfarbe für die neutrale Moat-Ausprägung im Analyse-Segment der Company 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 im Pattern</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 im Pattern</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>
|
||
<tr><td>surface-card-list-drawer</td><td>color-background-purple</td><td>Fläche des ausziehbaren Card-Listenbereichs.</td></tr>
|
||
<tr><td>text-card-list-drawer</td><td>color-font-dark</td><td>Textfarbe im ausziehbaren Card-Listenbereich.</td></tr>
|
||
</tbody></table>
|
||
</section>
|
||
|
||
</body>
|
||
</html>
|