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-08-04 13:03:44 +02:00
parent 095da274cb
commit 04d6bd876b
10 changed files with 181 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/styleguide/components/email-header.html
+37
View File
@@ -0,0 +1,37 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styleguide – Komponente E-Mail Header</title>
<link rel="stylesheet" href="../styleguide.css">
<link rel="stylesheet" href="../email-styleguide.css">
</head>
<body>
<h1 class="sg-main-heading">Komponente – E-Mail Header</h1>
<section id="component-email-header">
<p class="sg-preview-label">Komponente: E-Mail Header</p>
<div class="sg-preview-area">
<div class="sg-email-preview-viewport">
<div class="sg-email-preview-body">
<header
class="sg-email-header"
aria-label="E-Mail Header"
data-component="email-header"
data-component-variant="logo-only"
data-derived-from="portal-header-without-options-row"
>
<div class="sg-email-header__main" data-component-part="main">
<p class="sg-email-header__brand" data-component-part="brand">ValueStockFinder</p>
</div>
</header>
</div>
</div>
</div>
</section>
</body>
</html>
docs/styleguide/email-styleguide.css
+48
View File
@@ -0,0 +1,48 @@
@import "./styles/01-foundations.css";
/* E-Mail-Komponenten: separater Einstiegspunkt, nicht Teil des Portal-CSS */
.sg-email-preview-viewport {
width: var(--dimension-email-body-max-width);
background: var(--surface-portal-background);
}
.sg-email-preview-body {
width: 100%;
}
.sg-email-header {
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
padding:
var(--card-segment-padding-vertical)
var(--layout-page-content-inset-inline);
border: var(--border-none);
border-radius: var(--radius-card);
box-shadow: var(--shadow-none);
background: var(--surface-portal-header);
}
.sg-email-header__main {
width: 100%;
}
.sg-email-header__brand {
margin: 0;
color: var(--text-portal-header-brand);
font-size: var(--font-size-portal-header-brand);
}
.sg-email-card {
width: calc(100% + (2 * var(--card-segment-padding-horizontal)));
margin-inline: calc(-1 * var(--card-segment-padding-horizontal));
}
.sg-email-card .sg-card-segment--body > .sg-body {
color: var(--text-card-body);
}
.sg-email-card-action-segment {
align-items: flex-end;
}
docs/styleguide/foundations.html
+2 -1
View File
@@ -38,7 +38,7 @@
<tr><td>font-light</td><td>#FFFFFF</td><td>Schrift auf dunklen Flächen, Portalheader, Card-Headern, Prozessbuttons und ausgewählten Tab-Buttons.</td></tr>
<tr><td>font-hyperlink</td><td>#FF6900</td><td>Links in Texten, Prozessbuttons und Page-Navigations-Cards.</td></tr>
<tr><td>process-inactive</td><td>#FFAE79</td><td>Inaktive Hintergrundfläche des Prozessbuttons.</td></tr>
<tr><td>background-purple</td><td>#373C4A</td><td>Globaler Portalhintergrund.</td></tr>
<tr><td>background-purple</td><td>#373C4A</td><td>Globaler Portal- und E-Mail-Hintergrund.</td></tr>
<tr><td>background-purple-light</td><td>#656C7D</td><td>Group Cards und gruppierende Card-Flächen.</td></tr>
<tr><td>transparent</td><td>transparent</td><td>Transparenter Foundation-Wert für semantische Overlay-/Box-Varianten ohne Eigenfläche.</td></tr>
</tbody>
@@ -156,6 +156,7 @@
<tr><td>input-label-width</td><td>9rem</td><td>Desktop-Breite der Label-Spalte für gruppierte Formularzeilen mit Pulldowns, Slidern, Radio-Feldern, Checkbox-Feldern sowie ein- und mehrzeiligen Eingabefeldern.</td></tr>
<tr><td>input-field-desktop-width</td><td>400px</td><td>Fixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview.</td></tr>
<tr><td>input-field-max-width</td><td>600px</td><td>Maximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld).</td></tr>
<tr><td>email-body-max-width</td><td>600px</td><td>Maximale Breite des Inhaltsbereichs von E-Mail-Templates innerhalb des E-Mail-Viewports.</td></tr>
<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>
docs/styleguide/index.html
+20
View File
@@ -83,6 +83,26 @@
</ul>
</section>
<section class="sg-index-section">
<h2 class="sg-sub-heading">E-Mail-Templates</h2>
<h3 class="sg-sub-heading sg-section-h3">Foundations</h3>
<ul class="sg-index-list"></ul>
<h3 class="sg-sub-heading sg-section-h3">Komponenten</h3>
<ul class="sg-index-list">
<li><a href="./components/email-header.html">E-Mail Header</a></li>
</ul>
<h3 class="sg-sub-heading sg-section-h3">Patterns</h3>
<ul class="sg-index-list">
<li><a href="./patterns/email-double-opt-in-bestaetigung.html">Double-Opt-in-Bestätigung</a></li>
</ul>
<h3 class="sg-sub-heading sg-section-h3">Valuestockfinder Templates</h3>
<ul class="sg-index-list"></ul>
</section>
</main>
</body>
docs/styleguide/patterns/email-double-opt-in-bestaetigung.html
+64
View File
@@ -0,0 +1,64 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styleguide – Pattern E-Mail Double-Opt-in-Bestätigung</title>
<link rel="stylesheet" href="../styleguide.css">
<link rel="stylesheet" href="../email-styleguide.css">
</head>
<body>
<h1 class="sg-main-heading">Pattern – E-Mail Double-Opt-in-Bestätigung</h1>
<section id="pattern-email-double-opt-in-bestaetigung">
<p class="sg-preview-label">Pattern: E-Mail Double-Opt-in-Bestätigung</p>
<div class="sg-preview-area">
<div class="sg-email-preview-viewport">
<div class="sg-email-preview-body">
<header
class="sg-email-header"
aria-label="E-Mail Header"
data-component="email-header"
data-component-variant="logo-only"
data-derived-from="portal-header-without-options-row"
>
<div class="sg-email-header__main" data-component-part="main">
<p class="sg-email-header__brand" data-component-part="brand">ValueStockFinder</p>
</div>
</header>
<article
class="sg-transparent-card sg-page-layout-app__heading-block"
aria-label="E-Mail Inhalt"
data-pattern="email-double-opt-in-bestaetigung"
data-email-subject="Bitte bestätige deine Anmeldung"
data-email-preheader="Bestätige deine E-Mail-Adresse, um Updates von ValueStockFinder zu erhalten."
>
<h1 class="sg-heading-h1 sg-text-on-dark">Fast geschafft</h1>
<article class="sg-card sg-email-card" data-component="card" data-pattern-part="confirmation-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<div class="sg-strong">Bitte bestätige deine Anmeldung</div>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
<p class="sg-body">Bitte bestätige jetzt deine E-Mail-Adresse. Erst danach dürfen wir dir die gewünschten Informationen per E-Mail senden.</p>
<p class="sg-body">Falls du dich nicht selbst angemeldet hast, musst du nichts weiter tun.</p>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-email-card-action-segment" data-component-part="card-action">
<button class="sg-interaction-element sg-button sg-button--process" type="button" data-component="button" data-component-variant="process" data-component-state="active">
Anmeldung bestätigen
</button>
</div>
</article>
</article>
</div>
</div>
</div>
</section>
</body>
</html>
docs/styleguide/styles/01-foundations.css
+2
View File
@@ -140,6 +140,7 @@
--layout-preview-align-items: flex-start;
/* Semantic pattern tokens: Portal header */
--surface-portal-background: var(--color-background-purple);
--surface-portal-header: var(--color-darkblue);
--surface-portal-header-tab: var(--color-midblue);
--surface-portal-header-tab-active: var(--color-light-grey);
@@ -293,6 +294,7 @@
--dimension-input-label-width: 9rem;
--dimension-input-field-desktop-width: 400px;
--dimension-input-field-max-width: 600px;
--dimension-email-body-max-width: 600px;
--dimension-search-field-width: 15.3rem;
--dimension-public-content-width: 100%;
--dimension-layer-pulldown-panel: 40;
docs/styleguide/styles/02-base.css
+1 -1
View File
@@ -8,7 +8,7 @@ body {
font-weight: var(--font-weight-regular);
line-height: var(--line-height-base);
color: var(--color-font-dark);
background: var(--color-background-purple);
background: var(--surface-portal-background);
margin: 0;
padding: var(--spacing-small);
}