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-27 07:53:59 +02:00
parent f0210157f1
commit 9942256db4
7 changed files with 65 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/styleguide/foundations.html
+1
View File
@@ -30,6 +30,7 @@
<tr><td>black</td><td>#000000</td><td>Neutrale Vollton-Overlay-Farbe für starke visuelle Deaktivierung von Hintergrundobjekten.</td></tr>
<tr><td>white</td><td>#FFFFFF</td><td>Standardfläche von Buttons, Eingabefeldern, Pulldown-Triggern, Checkboxen, Radios, Toggle-Tracks und Card-Trennern.</td></tr>
<tr><td>signal-green</td><td>#009101</td><td>Positive Score-Balken und positive Chart-Werte.</td></tr>
<tr><td>signal-green-light</td><td>#65A665</td><td>Hellgrüne Variante für positive Signal- und Notification-Flächen.</td></tr>
<tr><td>signal-yellow</td><td>#9C7A00</td><td>Neutrale Score-Balken, neutrale Chart-Werte und Warnwerte in Tabellen.</td></tr>
<tr><td>signal-red</td><td>#9B3B2F</td><td>Negative Score-Balken und negative Chart-Werte.</td></tr>
<tr><td>font-dark</td><td>#414959</td><td>Standard-Schrift auf hellen Flächen, Achsen/Marker in Charts, Sandwich-Linien und Radio-Markierung.</td></tr>
docs/styleguide/patterns/notifications.html
+29 -4
View File
@@ -79,7 +79,8 @@
<div class="sg-preview-area sg-notifications-pattern">
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
<p class="sg-preview-label">Pattern: Notification with title - reg</p>
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-pattern-variant="reg" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
<p class="sg-body">
<span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
@@ -99,7 +100,8 @@
</div>
</article>
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
<p class="sg-preview-label">Pattern: Notification with title - green</p>
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-pattern-variant="green" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
<p class="sg-body">
<span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
@@ -119,7 +121,29 @@
</div>
</article>
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
<p class="sg-preview-label">Pattern: Notification with title - light green</p>
<article class="sg-card sg-card--notification-signal-green-light sg-notifications-pattern__card" data-pattern="notification-with-title" data-pattern-variant="light-green" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green-light sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
<p class="sg-body">
<span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
</p>
</div>
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green-light sg-notifications-pattern__text-segment" data-component-part="card-header">
<p class="sg-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
</p>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green-light" data-component-part="card-body">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
zum Unternehmen
</button>
</div>
</article>
<p class="sg-preview-label">Pattern: Notification with title - yellow</p>
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-pattern-variant="yellow" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
<p class="sg-body">
<span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
@@ -139,7 +163,8 @@
</div>
</article>
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
<p class="sg-preview-label">Pattern: Notification with title - white</p>
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-pattern-variant="white" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
<p class="sg-body">
<span class="sg-strong">Kaufsignal Veeva Systems Inc Class A</span>
docs/styleguide/styles/01-foundations.css
+1
View File
@@ -15,6 +15,7 @@
--color-white: #FFFFFF;
--color-process-inactive: #FFAE79;
--color-signal-green: #009101;
--color-signal-green-light: #65A665;
--color-signal-yellow: #9C7A00;
--color-signal-red: #9B3B2F;
--color-font-dark: #414959;
docs/styleguide/styles/40-components-cards.css
+10
View File
@@ -130,6 +130,11 @@
color: var(--text-card-header);
}
.sg-card-segment--signal-green-light {
background: var(--color-signal-green-light);
color: var(--text-card-header);
}
.sg-card-segment--signal-yellow {
background: var(--color-signal-yellow);
color: var(--text-card-header);
@@ -147,6 +152,11 @@
--text-card-header: var(--text-card-body);
}
.sg-card.sg-card--notification-signal-green-light {
--text-card-header: var(--color-font-light);
--text-card-body: var(--color-font-light);
}
.sg-card--content-card {
--surface-card-header-primary: var(--surface-content-block-card-title);
--surface-card-body: var(--surface-content-block-card-content);
public/assets/styleguide.upstream.css
+11
View File
@@ -15,6 +15,7 @@
--color-white: #FFFFFF;
--color-process-inactive: #FFAE79;
--color-signal-green: #009101;
--color-signal-green-light: #65A665;
--color-signal-yellow: #9C7A00;
--color-signal-red: #9B3B2F;
--color-font-dark: #414959;
@@ -3939,6 +3940,11 @@ main {
color: var(--text-card-header);
}
.sg-card-segment--signal-green-light {
background: var(--color-signal-green-light);
color: var(--text-card-header);
}
.sg-card-segment--signal-yellow {
background: var(--color-signal-yellow);
color: var(--text-card-header);
@@ -3956,6 +3962,11 @@ main {
--text-card-header: var(--text-card-body);
}
.sg-card.sg-card--notification-signal-green-light {
--text-card-header: var(--color-font-light);
--text-card-body: var(--color-font-light);
}
.sg-card--content-card {
--surface-card-header-primary: var(--surface-content-block-card-title);
--surface-card-body: var(--surface-content-block-card-content);
public/assets/styleguide.upstream.meta.json
+2 -2
View File
@@ -1,7 +1,7 @@
{
"styleguideVersion": "2026.05.18.1",
"styleguideCommit": "2a667b4",
"syncedAtUtc": "2026-06-26T14:25:11Z",
"styleguideCommit": "85f80a0",
"syncedAtUtc": "2026-06-27T05:53:58Z",
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
"mirroredDocsPath": "docs/styleguide"
}
public/assets/styles.css
+11
View File
@@ -15,6 +15,7 @@
--color-white: #FFFFFF;
--color-process-inactive: #FFAE79;
--color-signal-green: #009101;
--color-signal-green-light: #65A665;
--color-signal-yellow: #9C7A00;
--color-signal-red: #9B3B2F;
--color-font-dark: #414959;
@@ -3939,6 +3940,11 @@ main {
color: var(--text-card-header);
}
.sg-card-segment--signal-green-light {
background: var(--color-signal-green-light);
color: var(--text-card-header);
}
.sg-card-segment--signal-yellow {
background: var(--color-signal-yellow);
color: var(--text-card-header);
@@ -3956,6 +3962,11 @@ main {
--text-card-header: var(--text-card-body);
}
.sg-card.sg-card--notification-signal-green-light {
--text-card-header: var(--color-font-light);
--text-card-body: var(--color-font-light);
}
.sg-card--content-card {
--surface-card-header-primary: var(--surface-content-block-card-title);
--surface-card-body: var(--surface-content-block-card-content);