gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Decouple gray card segment surface from card body token

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-21 16:20:04 +02:00
parent ff1263fec4
commit 75ebbddcb5
3 changed files with 4 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-card-listen-fundamentalanalyse-drawer.html
+1 -1
View File
@@ -77,7 +77,7 @@
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-1" role="tabpanel" aria-labelledby="vsf-fundamental-tab-1"> <div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-1" role="tabpanel" aria-labelledby="vsf-fundamental-tab-1">
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Gesamtbewertung"> <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Gesamtbewertung">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Gesamtbewertung</div></div> <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Gesamtbewertung</div></div>
<div class="sg-card-segment sg-card-segment--gray sg-vsf-fundamental-score-segment" data-component-part="card-body"> <div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
<div class="sg-score-bar-list sg-score-bar-list--single-score" data-component="score-bar-list"> <div class="sg-score-bar-list sg-score-bar-list--single-score" data-component="score-bar-list">
<div class="sg-score-bar-item" data-component="score-bar"> <div class="sg-score-bar-item" data-component="score-bar">
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Score:</p> <p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Score:</p>
semantic-tokens-components.html
+1
View File
@@ -19,6 +19,7 @@
<tbody> <tbody>
<tr><td>surface-card</td><td>color-light-grey</td><td>Grundfläche der Card.</td></tr> <tr><td>surface-card</td><td>color-light-grey</td><td>Grundfläche der Card.</td></tr>
<tr><td>surface-card-body</td><td>color-light-grey</td><td>Fläche im Body-Segment der Card.</td></tr> <tr><td>surface-card-body</td><td>color-light-grey</td><td>Fläche im Body-Segment der Card.</td></tr>
<tr><td>surface-card-segment-neutral</td><td>color-light-grey</td><td>Neutrale Segmentfläche für gezielte hellgraue Card-Segmente (z. B. <code>sg-card-segment--gray</code>).</td></tr>
<tr><td>surface-card-header-primary</td><td>color-darkblue</td><td>Primärer Header-Hintergrund.</td></tr> <tr><td>surface-card-header-primary</td><td>color-darkblue</td><td>Primärer Header-Hintergrund.</td></tr>
<tr><td>surface-card-header-alternative</td><td>color-darkgreen</td><td>Alternativer Header-Hintergrund.</td></tr> <tr><td>surface-card-header-alternative</td><td>color-darkgreen</td><td>Alternativer Header-Hintergrund.</td></tr>
<tr><td>surface-card-header-muted</td><td>color-darkbrown</td><td>Zweite alternative Header-Fläche.</td></tr> <tr><td>surface-card-header-muted</td><td>color-darkbrown</td><td>Zweite alternative Header-Fläche.</td></tr>
styleguide.css
+2 -5
View File
@@ -26,6 +26,7 @@
/* Semantic component tokens: Cards */ /* Semantic component tokens: Cards */
--surface-card: var(--color-light-grey); --surface-card: var(--color-light-grey);
--surface-card-body: var(--color-light-grey); --surface-card-body: var(--color-light-grey);
--surface-card-segment-neutral: var(--color-light-grey);
--surface-card-group: var(--color-background-purple-light); --surface-card-group: var(--color-background-purple-light);
--surface-card-transparent: var(--color-transparent); --surface-card-transparent: var(--color-transparent);
--surface-card-header-primary: var(--color-darkblue); --surface-card-header-primary: var(--color-darkblue);
@@ -2312,7 +2313,7 @@ section + section {
} }
.sg-card-segment--gray { .sg-card-segment--gray {
background: var(--surface-card-body); background: var(--surface-card-segment-neutral);
} }
.sg-card-segment--white { .sg-card-segment--white {
@@ -2348,10 +2349,6 @@ section + section {
background: var(--surface-object-card-lower-segment); background: var(--surface-object-card-lower-segment);
} }
.sg-card-segment.sg-card-segment--body.sg-vsf-fundamental-score-segment {
background: var(--surface-content-block-card-title);
}
.sg-card-segment.sg-vsf-drawer-card__actions-segment { .sg-card-segment.sg-vsf-drawer-card__actions-segment {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;