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 10:09:17 +02:00
parent ed66066912
commit 8965215ab9
15 changed files with 538 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/styleguide/components/interactive-elements.html
+11
View File
@@ -29,6 +29,17 @@
</div>
</section>
<!-- Component: Call-to-action-Button -->
<section id="component-call-to-action-button">
<p class="sg-preview-label">Component: Call-to-action-Button</p>
<div class="sg-component-row">
<button class="sg-interaction-element sg-button sg-button--cta" type="button" data-component="button" data-component-variant="cta">
Call-to-action-Button
</button>
</div>
</section>
<!-- Component: Prozessbutton -->
<section id="component-process-button">
<p class="sg-preview-label">Component: Prozessbutton</p>
docs/styleguide/components/public-page-components.html
+54
View File
@@ -0,0 +1,54 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styleguide – Public Page Components</title>
<link rel="stylesheet" href="../styleguide.css">
</head>
<body class="sg-page-public-page-components">
<h1 class="sg-main-heading">Components – Public Page Components</h1>
<section id="component-content-group-box">
<p class="sg-preview-label">Component: Content Group Box</p>
<div class="sg-preview-area">
<div class="sg-content-group-box" data-component="content-group-box"></div>
</div>
</section>
<section id="component-text-block">
<p class="sg-preview-label">Component: Public Page Content left</p>
<div class="sg-preview-area">
<div class="sg-text-block" data-component="text-block">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillu
</p>
</div>
</div>
</section>
<section id="component-call-to-action-card">
<p class="sg-preview-label">Component: Call to action Card</p>
<div class="sg-preview-area">
<article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card" 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--cta" type="button" data-component="button" data-component-variant="cta">
Call-to-action-Button
</button>
</div>
</div>
</article>
</div>
</section>
</body>
</html>
docs/styleguide/foundations.html
+1
View File
@@ -157,6 +157,7 @@
<tr><td>object-card-height</td><td>600px</td><td>Fixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card).</td></tr>
<tr><td>content-card-margin-top-desktop</td><td>100px</td><td>Oberer Außenabstand der Content Card auf Desktop.</td></tr>
<tr><td>content-card-margin-top-mobile</td><td>1rem</td><td>Oberer Außenabstand der Content Card auf Mobile; entspricht spacing-large.</td></tr>
<tr><td>public-content-width</td><td>60vw</td><td>Standardbreite für wiederverwendbare Public-Content-Wrapper innerhalb der durch das jeweilige Page-Layout begrenzten Breite.</td></tr>
<tr><td>object-group-card-min-width</td><td>450px</td><td>Mindestbreite der Group Card im Pattern Object Group Card.</td></tr>
<tr><td>object-group-card-max-width</td><td>650px</td><td>Maximale Breite der Group Card im Pattern Object Group Card.</td></tr>
<tr><td>object-group-card-height</td><td>700px</td><td>Fixe Desktop-Höhe der Group Card im Pattern Object Group Card.</td></tr>
docs/styleguide/index.html
+2
View File
@@ -32,6 +32,7 @@
<li><a href="./components/charts.html">Charts</a></li>
<li><a href="./components/data-display.html">Data Display</a></li>
<li><a href="./components/typography.html">Typography</a></li>
<li><a href="./components/public-page-components.html">Public Page Components</a></li>
</ul>
</section>
@@ -53,6 +54,7 @@
<li><a href="./patterns/multiselektions-pulldown.html">Multiselektions-Pulldown</a></li>
<li><a href="./patterns/text-layouts.html">Text Layouts</a></li>
<li><a href="./patterns/delete-confirmation-overlay.html">Overlay Card</a></li>
<li><a href="./patterns/public-page-patterns.html">Public Page Patterns</a></li>
</ul>
</section>
docs/styleguide/patterns/public-page-patterns.html
+80
View File
@@ -0,0 +1,80 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styleguide – Public Page Patterns</title>
<link rel="stylesheet" href="../styleguide.css">
</head>
<body class="sg-page-public-page-patterns">
<h1 class="sg-main-heading">Patterns – Public Page Patterns</h1>
<section id="public-page-patterns">
<p class="sg-preview-label">pattern: Public Page Content left</p>
<div class="sg-preview-area">
<div class="sg-content-group-box" data-component="content-group-box">
<div class="sg-text-block" data-component="text-block">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Praesent eget sem vel lacus luctus blandit eu in massa.
</p>
</div>
</div>
</div>
<p class="sg-preview-label">pattern: Public Page Content right</p>
<div class="sg-preview-area">
<div class="sg-content-group-box" data-component="content-group-box">
<div class="sg-text-block sg-text-block--align-right" data-component="text-block">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Praesent eget sem vel lacus luctus blandit eu in massa.
</p>
</div>
</div>
</div>
<p class="sg-preview-label">pattern: CTA box left</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" 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--cta" type="button" data-component="button" data-component-variant="cta">
Call-to-action-Button
</button>
</div>
</div>
</article>
</div>
</div>
<p class="sg-preview-label">pattern: CTA 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--cta" type="button" data-component="button" data-component-variant="cta">
Call-to-action-Button
</button>
</div>
</div>
</article>
</div>
</div>
</section>
</body>
</html>
docs/styleguide/semantic-tokens-components.html
+47
View File
@@ -84,6 +84,43 @@
</table>
</section>
<section id="semantic-public-page-components">
<h2 class="sg-sub-heading sg-section-h2">Public Page Components</h2>
<h3 class="sg-sub-heading sg-section-h3">Content 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-content-group-box</td><td>color-transparent</td><td>Transparente Fläche der Wrapper-Component.</td></tr>
<tr><td>border-content-group-box</td><td>color-white</td><td>Temporärer Prüfrahmen für die visuelle Kontrolle der Component-Erstellung.</td></tr>
<tr><td>layout-content-group-box-gap</td><td>spacing-large</td><td>Vertikaler Abstand zwischen den direkten Abschnitts-Containern innerhalb der Wrapper-Component.</td></tr>
<tr><td>layout-content-group-box-margin-block</td><td>calc(var(--spacing-large) * 0.5)</td><td>Oberer und unterer Außenabstand der Wrapper-Component.</td></tr>
</tbody>
</table>
<h3 class="sg-sub-heading sg-section-h3">Public Page Content left</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-text-block</td><td>color-transparent</td><td>Transparente Fläche des Textblocks.</td></tr>
<tr><td>text-text-block</td><td>color-font-light</td><td>Standard-Textfarbe des Textblocks.</td></tr>
<tr><td>layout-text-block-width</td><td>dimension-public-content-width</td><td>Breite des Textblocks im Viewport.</td></tr>
</tbody>
</table>
<h3 class="sg-sub-heading sg-section-h3">Call to action 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-call-to-action-card</td><td>surface-card-group</td><td>Fläche der Call-to-action-Card als dunkle Content-Card-Variante.</td></tr>
<tr><td>text-call-to-action-card</td><td>color-font-light</td><td>Textfarbe in der Call-to-action-Card.</td></tr>
<tr><td>layout-call-to-action-card-width</td><td>dimension-public-content-width</td><td>Breite der Card im Page-Layout.</td></tr>
<tr><td>layout-call-to-action-card-content-columns</td><td>minmax(0, 1fr) max-content</td><td>Zweispaltiges Layout mit flexibler Textspalte und Buttonspalte in Buttonbreite.</td></tr>
<tr><td>layout-call-to-action-card-content-gap</td><td>spacing-large</td><td>Abstand zwischen Text und Button.</td></tr>
</tbody>
</table>
</section>
<section id="semantic-interactive">
<h2 class="sg-sub-heading sg-section-h2">Interactive Elements</h2>
@@ -99,6 +136,16 @@
</tbody>
</table>
<h3 class="sg-sub-heading sg-section-h3">Call-to-action-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-cta</td><td>color-darkblue</td><td>Fläche des Call-to-action-Buttons.</td></tr>
<tr><td>text-button-cta</td><td>color-font-light</td><td>Textfarbe des Call-to-action-Buttons.</td></tr>
<tr><td>layout-button-cta-padding</td><td>spacing-large</td><td>Innenabstand des Call-to-action-Buttons auf allen Seiten.</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>
docs/styleguide/semantic-tokens-patterns.html
+8
View File
@@ -13,6 +13,14 @@
<section id="semantic-patterns">
<h2 class="sg-sub-heading sg-section-h2">Patterns</h2>
<h3 class="sg-sub-heading sg-section-h3">Public Page Patterns</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>layout-public-page-pattern-content-width</td><td>dimension-public-content-width</td><td>Gemeinsame Breite für Inhalte im Public-Page-Pattern-Kontext.</td></tr>
</tbody>
</table>
<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>
docs/styleguide/styleguide.css
+2
View File
@@ -24,3 +24,5 @@
@import "./styles/41-components-charts.css";
@import "./styles/42-components-data-display.css";
@import "./styles/43-components-typography.css";
@import "./styles/44-components-public-page-components.css";
@import "./styles/45-patterns-public-page-patterns.css";
docs/styleguide/styles/01-foundations.css
+1
View File
@@ -284,6 +284,7 @@
--dimension-input-field-desktop-width: 400px;
--dimension-input-field-max-width: 600px;
--dimension-search-field-width: 15.3rem;
--dimension-public-content-width: 60vw;
--dimension-layer-pulldown-panel: 40;
--dimension-multiselect-pulldown-panel-desktop-width: 500px;
--dimension-options-row-mode-toggle-width: 7rem;
docs/styleguide/styles/10-components-interactive-elements.css
+10
View File
@@ -142,6 +142,16 @@
color: var(--text-button-process);
}
.sg-button--cta {
--surface-button-cta: var(--color-darkblue);
--text-button-cta: var(--color-font-light);
height: auto;
min-height: var(--interaction-height);
background: var(--surface-button-cta);
color: var(--text-button-cta);
padding: var(--spacing-large);
}
.sg-button--process-inactive {
background: var(--surface-button-process-inactive);
color: var(--text-button-process);
docs/styleguide/styles/44-components-public-page-components.css
+81
View File
@@ -0,0 +1,81 @@
/* ========================================================= */
/* Components: Public Page Components */
/* ========================================================= */
.sg-content-group-box {
--surface-content-group-box: var(--color-transparent);
--border-content-group-box: var(--color-white);
--layout-content-group-box-gap: var(--spacing-large);
--layout-content-group-box-margin-block: calc(var(--spacing-large) * 0.5);
display: flex;
flex-direction: column;
width: 100%;
box-sizing: border-box;
margin: var(--layout-content-group-box-margin-block) 0;
border: 1px solid var(--border-content-group-box);
background: var(--surface-content-group-box);
gap: var(--layout-content-group-box-gap);
}
.sg-content-group-box > * {
margin: 0;
}
.sg-text-block {
--surface-text-block: var(--color-transparent);
--text-text-block: var(--color-font-light);
--layout-text-block-width: var(--dimension-public-content-width);
width: var(--layout-text-block-width);
box-sizing: border-box;
background: var(--surface-text-block);
color: var(--text-text-block);
}
.sg-text-block .sg-body {
margin: 0;
color: var(--text-text-block);
}
.sg-card--call-to-action-card {
--surface-call-to-action-card: var(--surface-card-group);
--text-call-to-action-card: var(--color-font-light);
--layout-call-to-action-card-width: var(--dimension-public-content-width);
--layout-call-to-action-card-content-columns: minmax(0, 1fr) max-content;
--layout-call-to-action-card-content-gap: var(--spacing-large);
width: var(--layout-call-to-action-card-width);
max-width: 100%;
}
.sg-card--call-to-action-card .sg-card-segment--body {
display: grid;
grid-template-columns: var(--layout-call-to-action-card-content-columns);
gap: var(--layout-call-to-action-card-content-gap);
align-items: center;
background: var(--surface-call-to-action-card);
color: var(--text-call-to-action-card);
}
.sg-call-to-action-card__text {
margin: 0;
min-width: 0;
color: var(--text-call-to-action-card);
}
.sg-call-to-action-card__action {
display: flex;
align-items: center;
justify-content: flex-end;
}
.sg-page-public-page-components .sg-preview-area {
display: flex;
flex-direction: column;
width: 100%;
}
@media (max-width: 48rem) {
.sg-text-block,
.sg-card--call-to-action-card {
width: 100%;
}
}
docs/styleguide/styles/45-patterns-public-page-patterns.css
+17
View File
@@ -0,0 +1,17 @@
/* ========================================================= */
/* Patterns: Public Page Patterns */
/* ========================================================= */
.sg-page-public-page-patterns .sg-preview-area {
display: flex;
flex-direction: column;
width: 100%;
}
.sg-page-public-page-patterns .sg-text-block--align-right {
margin-left: auto;
}
.sg-page-public-page-patterns .sg-call-to-action-card--align-right {
margin-left: auto;
}