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-24 12:11:55 +02:00
parent 7391685617
commit 311ff21a34
9 changed files with 151 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/styleguide/patterns/public-page-patterns.html
+41
View File
@@ -36,6 +36,27 @@
</div> </div>
</div> </div>
<p class="sg-preview-label">pattern: Content Focus Box</p>
<div class="sg-preview-area">
<div class="sg-content-group-box" data-component="content-group-box">
<article class="sg-card" data-component="basic-card">
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
<div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig-gestacked" aria-label="Text Layout zweispaltig mobil gestacked">
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column sg-text-layout-pattern__two-column--stacked-mobile" data-pattern-part="text-block-two-column-stacked-mobile">
<p class="sg-body sg-text-layout-pattern__column">
Text zweispaltig links: Dieses Layout teilt den Text in zwei gleich breite Spalten mit jeweils fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlänge die Lesbarkeit verbessert.
</p>
<p class="sg-body sg-text-layout-pattern__column">
Text zweispaltig rechts: Gleichzeitig bleibt die Informationsdichte hoch, ohne dass der visuelle Rhythmus in langen einspaltigen Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen für Analyse- und Detailseiten.
</p>
</div>
</div>
</div>
</article>
</div>
</div>
<p class="sg-preview-label">pattern: CTA box left</p> <p class="sg-preview-label">pattern: CTA box left</p>
<div class="sg-preview-area"> <div class="sg-preview-area">
@@ -76,6 +97,26 @@
</div> </div>
</div> </div>
<p class="sg-preview-label">pattern: CTA small button box right</p>
<div class="sg-preview-area">
<div class="sg-content-group-box" data-component="content-group-box">
<article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card sg-call-to-action-card--align-right" data-component="call-to-action-card" aria-label="Call to action Card">
<div class="sg-card-segment sg-card-segment--body sg-call-to-action-card__body" data-component-part="card-body">
<p class="sg-body sg-call-to-action-card__text">
Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten.
</p>
<div class="sg-call-to-action-card__action">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
Link-Button aktiv
</button>
</div>
</div>
</article>
</div>
</div>
<p class="sg-preview-label">pattern: picture full width</p> <p class="sg-preview-label">pattern: picture full width</p>
<div class="sg-preview-area"> <div class="sg-preview-area">
docs/styleguide/patterns/text-layouts.html
+12 -8
View File
@@ -6,31 +6,26 @@
<title>Styleguide – Pattern Text Layouts</title> <title>Styleguide – Pattern Text Layouts</title>
<link rel="stylesheet" href="../styleguide.css"> <link rel="stylesheet" href="../styleguide.css">
</head> </head>
<body> <body class="sg-page-text-layouts">
<h1 class="sg-main-heading">Pattern – Text Layouts</h1> <h1 class="sg-main-heading">Pattern – Text Layouts</h1>
<section id="pattern-text-layouts"> <section id="pattern-text-layouts">
<p class="sg-preview-label">Pattern: Text Layout ganze Breite</p> <p class="sg-preview-label">Pattern: Text Layout ganze Breite</p>
<div class="sg-text-layout-pattern" data-pattern="text-layout-ganze-breite" aria-label="Text Layout ganze Breite"> <div class="sg-text-layout-pattern" data-pattern="text-layout-ganze-breite" aria-label="Text Layout ganze Breite">
<div class="sg-text-layout-pattern__preview-surface">
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--full-width" data-pattern-part="text-block-full-width"> <p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--full-width" data-pattern-part="text-block-full-width">
Text 100% Breite: Dieser Textblock nimmt die komplette verfügbare Breite des Containers ein und eignet sich für lineare Erklärungen, einleitende Kontexte und Fliesstext ohne Nebenspalte. Text 100% Breite: Dieser Textblock nimmt die komplette verfügbare Breite des Containers ein und eignet sich für lineare Erklärungen, einleitende Kontexte und Fliesstext ohne Nebenspalte.
</p> </p>
</div> </div>
</div>
<p class="sg-preview-label">Pattern: Text 60% Breite</p> <p class="sg-preview-label">Pattern: Text 60% Breite</p>
<div class="sg-text-layout-pattern" data-pattern="text-layout-sechzig-prozent" aria-label="Text Layout 60 Prozent Breite"> <div class="sg-text-layout-pattern" data-pattern="text-layout-sechzig-prozent" aria-label="Text Layout 60 Prozent Breite">
<div class="sg-text-layout-pattern__preview-surface">
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width" data-pattern-part="text-block-sixty-width"> <p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--sixty-width" data-pattern-part="text-block-sixty-width">
Text 60% Breite: Dieser Textblock nutzt sechzig Prozent der Containerbreite und schafft dadurch bewusst mehr Luft für begleitende Inhalte wie Metriken, Visuals oder Kontextinformationen. Text 60% Breite: Dieser Textblock nutzt sechzig Prozent der Containerbreite und schafft dadurch bewusst mehr Luft für begleitende Inhalte wie Metriken, Visuals oder Kontextinformationen.
</p> </p>
</div> </div>
</div>
<p class="sg-preview-label">Pattern: Text zweispaltig (mobil zweispaltig)</p> <p class="sg-preview-label">Pattern: Text zweispaltig (mobil zweispaltig)</p>
<div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig" aria-label="Text Layout zweispaltig mobil zweispaltig"> <div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig" aria-label="Text Layout zweispaltig mobil zweispaltig">
<div class="sg-text-layout-pattern__preview-surface">
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column"> <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
<p class="sg-body sg-text-layout-pattern__column"> <p class="sg-body sg-text-layout-pattern__column">
Text zweispaltig links: Dieses Layout teilt den Text in zwei gleich breite Spalten mit jeweils fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlänge die Lesbarkeit verbessert. Text zweispaltig links: Dieses Layout teilt den Text in zwei gleich breite Spalten mit jeweils fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlänge die Lesbarkeit verbessert.
@@ -40,11 +35,21 @@
</p> </p>
</div> </div>
</div> </div>
<p class="sg-preview-label">Pattern: Text zweispaltig (mobil gestacked)</p>
<div class="sg-text-layout-pattern" data-pattern="text-layout-zweispaltig-gestacked" aria-label="Text Layout zweispaltig mobil gestacked">
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column sg-text-layout-pattern__two-column--stacked-mobile" data-pattern-part="text-block-two-column-stacked-mobile">
<p class="sg-body sg-text-layout-pattern__column">
Text zweispaltig links: Dieses Layout teilt den Text in zwei gleich breite Spalten mit jeweils fünfzig Prozent Breite auf. Es eignet sich besonders für längere inhaltliche Abschnitte, in denen eine kompaktere Zeilenlänge die Lesbarkeit verbessert.
</p>
<p class="sg-body sg-text-layout-pattern__column">
Text zweispaltig rechts: Gleichzeitig bleibt die Informationsdichte hoch, ohne dass der visuelle Rhythmus in langen einspaltigen Textflächen verloren geht. Durch die symmetrische Aufteilung entstehen klare Leseachsen für Analyse- und Detailseiten.
</p>
</div>
</div> </div>
<p class="sg-preview-label">Pattern: Dreispaltig verteilt (mobil dreispaltig)</p> <p class="sg-preview-label">Pattern: Dreispaltig verteilt (mobil dreispaltig)</p>
<div class="sg-text-layout-pattern" data-pattern="text-layout-dreispaltig-verteilt" aria-label="Text Layout dreispaltig verteilt mobil dreispaltig"> <div class="sg-text-layout-pattern" data-pattern="text-layout-dreispaltig-verteilt" aria-label="Text Layout dreispaltig verteilt mobil dreispaltig">
<div class="sg-text-layout-pattern__preview-surface">
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" data-pattern-part="text-block-three-column-distributed"> <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__three-column-distributed" data-pattern-part="text-block-three-column-distributed">
<p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left"> <p class="sg-body sg-text-layout-pattern__column sg-text-layout-pattern__column--align-left">
Linke Spalte linksbündig: Diese Spalte führt den Inhalt mit einer klaren Startkante und eignet sich für einleitende Aussagen oder Kontext, die direkt in den Lesefluss einsteigen sollen. Linke Spalte linksbündig: Diese Spalte führt den Inhalt mit einer klaren Startkante und eignet sich für einleitende Aussagen oder Kontext, die direkt in den Lesefluss einsteigen sollen.
@@ -57,7 +62,6 @@
</p> </p>
</div> </div>
</div> </div>
</div>
</section> </section>
</body> </body>
docs/styleguide/semantic-tokens-components.html
+6 -1
View File
@@ -121,7 +121,12 @@
</table> </table>
<h3 class="sg-sub-heading sg-section-h3">Picture Full Width</h3> <h3 class="sg-sub-heading sg-section-h3">Picture Full Width</h3>
<p class="sg-table-label">Keine zusätzlichen semantischen Tokens erforderlich. Die Komponente ist strukturell und bezieht sich mit <code>width: 100%</code> auf den umgebenden Container, mit <code>height: auto</code> und <code>display: block</code> für das Bild-Element.</p> <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>radius-picture-full-width</td><td>radius-card</td><td>Border-Radius des Full-Width-Bildes.</td></tr>
</tbody>
</table>
</section> </section>
<section id="semantic-interactive"> <section id="semantic-interactive">
docs/styleguide/styles/01-foundations.css
+1
View File
@@ -193,6 +193,7 @@
--surface-navigation-card-body: var(--color-white); --surface-navigation-card-body: var(--color-white);
--surface-content-block-card-title: var(--color-light-grey); --surface-content-block-card-title: var(--color-light-grey);
--surface-content-block-card-content: var(--color-white); --surface-content-block-card-content: var(--color-white);
--radius-picture-full-width: var(--radius-card);
--layout-content-cards-group-gap: var(--spacing-small); --layout-content-cards-group-gap: var(--spacing-small);
--surface-card-list-drawer: var(--color-background-purple); --surface-card-list-drawer: var(--color-background-purple);
--text-content-block-card-title: var(--color-font-dark); --text-content-block-card-title: var(--color-font-dark);
docs/styleguide/styles/31-patterns-text-layouts.css
+20 -8
View File
@@ -2,20 +2,21 @@
/* Patterns: Text Layouts */ /* Patterns: Text Layouts */
/* ========================================================= */ /* ========================================================= */
.sg-page-text-layouts {
background: var(--surface-form-preview);
}
.sg-page-text-layouts .sg-main-heading,
.sg-page-text-layouts .sg-preview-label {
color: inherit;
}
.sg-text-layout-pattern { .sg-text-layout-pattern {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--spacing-small); gap: var(--spacing-small);
} }
.sg-text-layout-pattern__preview-surface {
width: 100%;
box-sizing: border-box;
padding: var(--spacing-large);
border-radius: var(--radius-card);
background: var(--surface-text-layout-preview);
}
.sg-text-layout-pattern__sample { .sg-text-layout-pattern__sample {
margin: 0; margin: 0;
} }
@@ -40,6 +41,11 @@
column-gap: var(--layout-text-layout-column-gap); column-gap: var(--layout-text-layout-column-gap);
} }
.sg-text-layout-pattern__two-column--stacked-mobile {
width: 100%;
min-width: 0;
}
.sg-text-layout-pattern__three-column-distributed { .sg-text-layout-pattern__three-column-distributed {
width: 100%; width: 100%;
min-width: 0; min-width: 0;
@@ -73,7 +79,13 @@
.sg-text-layout-pattern__sample--sixty-width, .sg-text-layout-pattern__sample--sixty-width,
.sg-text-layout-pattern__sample--two-column, .sg-text-layout-pattern__sample--two-column,
.sg-text-layout-pattern__two-column, .sg-text-layout-pattern__two-column,
.sg-text-layout-pattern__two-column--stacked-mobile,
.sg-text-layout-pattern__three-column-distributed { .sg-text-layout-pattern__three-column-distributed {
width: 100%; width: 100%;
} }
.sg-text-layout-pattern__two-column--stacked-mobile {
grid-template-columns: 1fr;
row-gap: var(--layout-text-layout-column-gap);
}
} }
docs/styleguide/styles/44-components-public-page-components.css
+1
View File
@@ -80,6 +80,7 @@
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
height: auto; height: auto;
border-radius: var(--radius-picture-full-width);
} }
.sg-page-public-page-components .sg-preview-area { .sg-page-public-page-components .sg-preview-area {
public/assets/styleguide.upstream.css
+22 -8
View File
@@ -193,6 +193,7 @@
--surface-navigation-card-body: var(--color-white); --surface-navigation-card-body: var(--color-white);
--surface-content-block-card-title: var(--color-light-grey); --surface-content-block-card-title: var(--color-light-grey);
--surface-content-block-card-content: var(--color-white); --surface-content-block-card-content: var(--color-white);
--radius-picture-full-width: var(--radius-card);
--layout-content-cards-group-gap: var(--spacing-small); --layout-content-cards-group-gap: var(--spacing-small);
--surface-card-list-drawer: var(--color-background-purple); --surface-card-list-drawer: var(--color-background-purple);
--text-content-block-card-title: var(--color-font-dark); --text-content-block-card-title: var(--color-font-dark);
@@ -3643,20 +3644,21 @@ main {
/* Patterns: Text Layouts */ /* Patterns: Text Layouts */
/* ========================================================= */ /* ========================================================= */
.sg-page-text-layouts {
background: var(--surface-form-preview);
}
.sg-page-text-layouts .sg-main-heading,
.sg-page-text-layouts .sg-preview-label {
color: inherit;
}
.sg-text-layout-pattern { .sg-text-layout-pattern {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--spacing-small); gap: var(--spacing-small);
} }
.sg-text-layout-pattern__preview-surface {
width: 100%;
box-sizing: border-box;
padding: var(--spacing-large);
border-radius: var(--radius-card);
background: var(--surface-text-layout-preview);
}
.sg-text-layout-pattern__sample { .sg-text-layout-pattern__sample {
margin: 0; margin: 0;
} }
@@ -3681,6 +3683,11 @@ main {
column-gap: var(--layout-text-layout-column-gap); column-gap: var(--layout-text-layout-column-gap);
} }
.sg-text-layout-pattern__two-column--stacked-mobile {
width: 100%;
min-width: 0;
}
.sg-text-layout-pattern__three-column-distributed { .sg-text-layout-pattern__three-column-distributed {
width: 100%; width: 100%;
min-width: 0; min-width: 0;
@@ -3714,9 +3721,15 @@ main {
.sg-text-layout-pattern__sample--sixty-width, .sg-text-layout-pattern__sample--sixty-width,
.sg-text-layout-pattern__sample--two-column, .sg-text-layout-pattern__sample--two-column,
.sg-text-layout-pattern__two-column, .sg-text-layout-pattern__two-column,
.sg-text-layout-pattern__two-column--stacked-mobile,
.sg-text-layout-pattern__three-column-distributed { .sg-text-layout-pattern__three-column-distributed {
width: 100%; width: 100%;
} }
.sg-text-layout-pattern__two-column--stacked-mobile {
grid-template-columns: 1fr;
row-gap: var(--layout-text-layout-column-gap);
}
} }
/* ========================================================= */ /* ========================================================= */
@@ -4609,6 +4622,7 @@ main {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
height: auto; height: auto;
border-radius: var(--radius-picture-full-width);
} }
.sg-page-public-page-components .sg-preview-area { .sg-page-public-page-components .sg-preview-area {
public/assets/styleguide.upstream.meta.json
+2 -2
View File
@@ -1,7 +1,7 @@
{ {
"styleguideVersion": "2026.05.18.1", "styleguideVersion": "2026.05.18.1",
"styleguideCommit": "c3c939f", "styleguideCommit": "733c9c0",
"syncedAtUtc": "2026-06-24T09:40:00Z", "syncedAtUtc": "2026-06-24T10:11:55Z",
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
"mirroredDocsPath": "docs/styleguide" "mirroredDocsPath": "docs/styleguide"
} }
public/assets/styles.css
+22 -8
View File
@@ -193,6 +193,7 @@
--surface-navigation-card-body: var(--color-white); --surface-navigation-card-body: var(--color-white);
--surface-content-block-card-title: var(--color-light-grey); --surface-content-block-card-title: var(--color-light-grey);
--surface-content-block-card-content: var(--color-white); --surface-content-block-card-content: var(--color-white);
--radius-picture-full-width: var(--radius-card);
--layout-content-cards-group-gap: var(--spacing-small); --layout-content-cards-group-gap: var(--spacing-small);
--surface-card-list-drawer: var(--color-background-purple); --surface-card-list-drawer: var(--color-background-purple);
--text-content-block-card-title: var(--color-font-dark); --text-content-block-card-title: var(--color-font-dark);
@@ -3643,20 +3644,21 @@ main {
/* Patterns: Text Layouts */ /* Patterns: Text Layouts */
/* ========================================================= */ /* ========================================================= */
.sg-page-text-layouts {
background: var(--surface-form-preview);
}
.sg-page-text-layouts .sg-main-heading,
.sg-page-text-layouts .sg-preview-label {
color: inherit;
}
.sg-text-layout-pattern { .sg-text-layout-pattern {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--spacing-small); gap: var(--spacing-small);
} }
.sg-text-layout-pattern__preview-surface {
width: 100%;
box-sizing: border-box;
padding: var(--spacing-large);
border-radius: var(--radius-card);
background: var(--surface-text-layout-preview);
}
.sg-text-layout-pattern__sample { .sg-text-layout-pattern__sample {
margin: 0; margin: 0;
} }
@@ -3681,6 +3683,11 @@ main {
column-gap: var(--layout-text-layout-column-gap); column-gap: var(--layout-text-layout-column-gap);
} }
.sg-text-layout-pattern__two-column--stacked-mobile {
width: 100%;
min-width: 0;
}
.sg-text-layout-pattern__three-column-distributed { .sg-text-layout-pattern__three-column-distributed {
width: 100%; width: 100%;
min-width: 0; min-width: 0;
@@ -3714,9 +3721,15 @@ main {
.sg-text-layout-pattern__sample--sixty-width, .sg-text-layout-pattern__sample--sixty-width,
.sg-text-layout-pattern__sample--two-column, .sg-text-layout-pattern__sample--two-column,
.sg-text-layout-pattern__two-column, .sg-text-layout-pattern__two-column,
.sg-text-layout-pattern__two-column--stacked-mobile,
.sg-text-layout-pattern__three-column-distributed { .sg-text-layout-pattern__three-column-distributed {
width: 100%; width: 100%;
} }
.sg-text-layout-pattern__two-column--stacked-mobile {
grid-template-columns: 1fr;
row-gap: var(--layout-text-layout-column-gap);
}
} }
/* ========================================================= */ /* ========================================================= */
@@ -4609,6 +4622,7 @@ main {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
height: auto; height: auto;
border-radius: var(--radius-picture-full-width);
} }
.sg-page-public-page-components .sg-preview-area { .sg-page-public-page-components .sg-preview-area {