From 04d6bd876b91f5030e5f0c48024172288b5cd2d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Tue, 4 Aug 2026 13:03:44 +0200 Subject: [PATCH] Sync styleguide 2026.05.18.1 --- docs/styleguide/components/email-header.html | 37 +++++++++++ docs/styleguide/email-styleguide.css | 48 ++++++++++++++ docs/styleguide/foundations.html | 3 +- docs/styleguide/index.html | 20 ++++++ .../email-double-opt-in-bestaetigung.html | 64 +++++++++++++++++++ docs/styleguide/styles/01-foundations.css | 2 + docs/styleguide/styles/02-base.css | 2 +- public/assets/styleguide.upstream.css | 4 +- public/assets/styleguide.upstream.meta.json | 2 +- public/assets/styles.css | 4 +- 10 files changed, 181 insertions(+), 5 deletions(-) create mode 100644 docs/styleguide/components/email-header.html create mode 100644 docs/styleguide/email-styleguide.css create mode 100644 docs/styleguide/patterns/email-double-opt-in-bestaetigung.html diff --git a/docs/styleguide/components/email-header.html b/docs/styleguide/components/email-header.html new file mode 100644 index 0000000..95e9456 --- /dev/null +++ b/docs/styleguide/components/email-header.html @@ -0,0 +1,37 @@ + + + + + + Styleguide – Komponente E-Mail Header + + + + + +

Komponente – E-Mail Header

+ +
+

Komponente: E-Mail Header

+ +
+
+
+
+
+

ValueStockFinder

+
+
+
+
+
+
+ + + diff --git a/docs/styleguide/email-styleguide.css b/docs/styleguide/email-styleguide.css new file mode 100644 index 0000000..30eecb3 --- /dev/null +++ b/docs/styleguide/email-styleguide.css @@ -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; +} diff --git a/docs/styleguide/foundations.html b/docs/styleguide/foundations.html index 8223008..07b9f31 100644 --- a/docs/styleguide/foundations.html +++ b/docs/styleguide/foundations.html @@ -38,7 +38,7 @@ font-light#FFFFFFSchrift auf dunklen Flächen, Portalheader, Card-Headern, Prozessbuttons und ausgewählten Tab-Buttons. font-hyperlink#FF6900Links in Texten, Prozessbuttons und Page-Navigations-Cards. process-inactive#FFAE79Inaktive Hintergrundfläche des Prozessbuttons. - background-purple#373C4AGlobaler Portalhintergrund. + background-purple#373C4AGlobaler Portal- und E-Mail-Hintergrund. background-purple-light#656C7DGroup Cards und gruppierende Card-Flächen. transparenttransparentTransparenter Foundation-Wert für semantische Overlay-/Box-Varianten ohne Eigenfläche. @@ -156,6 +156,7 @@ input-label-width9remDesktop-Breite der Label-Spalte für gruppierte Formularzeilen mit Pulldowns, Slidern, Radio-Feldern, Checkbox-Feldern sowie ein- und mehrzeiligen Eingabefeldern. input-field-desktop-width400pxFixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview. input-field-max-width600pxMaximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld). + email-body-max-width600pxMaximale Breite des Inhaltsbereichs von E-Mail-Templates innerhalb des E-Mail-Viewports. object-card-height600pxFixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card). content-card-margin-top-desktop100pxOberer Außenabstand der Content Card auf Desktop. content-card-margin-top-mobile1remOberer Außenabstand der Content Card auf Mobile; entspricht spacing-large. diff --git a/docs/styleguide/index.html b/docs/styleguide/index.html index 8813f9e..e0223df 100644 --- a/docs/styleguide/index.html +++ b/docs/styleguide/index.html @@ -83,6 +83,26 @@ +
+

E-Mail-Templates

+ +

Foundations

+ + +

Komponenten

+ + +

Patterns

+ + +

Valuestockfinder Templates

+ +
+ diff --git a/docs/styleguide/patterns/email-double-opt-in-bestaetigung.html b/docs/styleguide/patterns/email-double-opt-in-bestaetigung.html new file mode 100644 index 0000000..08522e4 --- /dev/null +++ b/docs/styleguide/patterns/email-double-opt-in-bestaetigung.html @@ -0,0 +1,64 @@ + + + + + + Styleguide – Pattern E-Mail Double-Opt-in-Bestätigung + + + + + +

Pattern – E-Mail Double-Opt-in-Bestätigung

+ +
+

Pattern: E-Mail Double-Opt-in-Bestätigung

+ +
+
+
+
+
+

ValueStockFinder

+
+
+ +
+

Fast geschafft

+ +
+
+
Bitte bestätige deine Anmeldung
+
+ +
+

Bitte bestätige jetzt deine E-Mail-Adresse. Erst danach dürfen wir dir die gewünschten Informationen per E-Mail senden.

+

Falls du dich nicht selbst angemeldet hast, musst du nichts weiter tun.

+
+ +
+ +
+
+
+
+
+
+
+ + + diff --git a/docs/styleguide/styles/01-foundations.css b/docs/styleguide/styles/01-foundations.css index 961e118..feb1611 100644 --- a/docs/styleguide/styles/01-foundations.css +++ b/docs/styleguide/styles/01-foundations.css @@ -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; diff --git a/docs/styleguide/styles/02-base.css b/docs/styleguide/styles/02-base.css index de3bd9d..4bec540 100644 --- a/docs/styleguide/styles/02-base.css +++ b/docs/styleguide/styles/02-base.css @@ -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); } diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css index 70f5139..2facc19 100644 --- a/public/assets/styleguide.upstream.css +++ b/public/assets/styleguide.upstream.css @@ -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; @@ -340,7 +342,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); } diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json index 9976202..67f5f8a 100644 --- a/public/assets/styleguide.upstream.meta.json +++ b/public/assets/styleguide.upstream.meta.json @@ -1,7 +1,7 @@ { "styleguideVersion": "2026.05.18.1", "styleguideCommit": "64272f5", - "syncedAtUtc": "2026-08-03T14:58:44Z", + "syncedAtUtc": "2026-08-04T11:03:43Z", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "mirroredDocsPath": "docs/styleguide" } diff --git a/public/assets/styles.css b/public/assets/styles.css index 70f5139..2facc19 100644 --- a/public/assets/styles.css +++ b/public/assets/styles.css @@ -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; @@ -340,7 +342,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); }