gitea_admin/erp_naurua
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sync styleguide 2026.05.18.1

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-03 16:25:03 +02:00
parent 70272e81d6
commit 543d3e5af5
66 changed files with 22706 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/styleguide/semantic-tokens-layouts.html
+42
View File
@@ -0,0 +1,42 @@
<!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">Generische Layouts</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>
<h3 class="sg-sub-heading sg-section-h3">Valuestockfinder Layouts</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-company-card-analysis-gap-after-moat</td><td>spacing-large</td><td>Vertikaler Abstand zwischen Moat-Zeile und Analyse-Zusammenfassung in der Company Card.</td></tr>
</tbody></table>
</section>
</body>
</html>