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

Replace company-card inline styles with semantic tokens and classes

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-20 15:35:54 +02:00
parent ff7baf0185
commit ba8eb8ca85
4 changed files with 41 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/company-card.html
+7 -7
View File
@@ -49,18 +49,18 @@
<tbody>
<tr>
<td data-component-part="data-columns-value-cell">PE: <span class="sg-data-table__value">28.8</span></td>
<td data-component-part="data-columns-reference-cell">PE forw.: <span class="sg-data-table__value" style="color: var(--chart-value-negative);" data-component-state="negative">23.3</span></td>
<td data-component-part="data-columns-reference-cell">PE forw.: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">23.3</span></td>
</tr>
<tr>
<td data-component-part="data-columns-value-cell">PEG: <span class="sg-data-table__value" style="color: var(--chart-value-negative);" data-component-state="negative">3.54</span></td>
<td data-component-part="data-columns-value-cell">PEG: <span class="sg-data-table__value sg-company-card__metric-negative" data-component-state="negative">3.54</span></td>
<td data-component-part="data-columns-reference-cell"></td>
</tr>
</tbody>
</table>
</div>
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="company-card-content">
<p class="sg-table-label" style="margin: 0;">Fundamentalanalyse vom 8.5.2026:</p>
<div class="sg-score-bar-list" style="margin-top: 0;" aria-label="Fundamentalanalyse Score-Balken" data-component="score-bar-list">
<p class="sg-table-label sg-company-card__analysis-title">Fundamentalanalyse vom 8.5.2026:</p>
<div class="sg-score-bar-list sg-company-card__analysis-bars" aria-label="Fundamentalanalyse Score-Balken" data-component="score-bar-list">
<div class="sg-score-bar-item" data-component="score-bar">
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Marktbewertung:</p>
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
@@ -90,10 +90,10 @@
</div>
</div>
</div>
<p class="sg-bar-label" style="margin: 0;">
Moat: <span style="color: var(--chart-value-neutral);">Maessig</span>
<p class="sg-bar-label sg-company-card__moat">
Moat: <span class="sg-company-card__moat-neutral">Maessig</span>
</p>
<p class="sg-body" style="margin: var(--spacing-large) 0 0 0;">
<p class="sg-body sg-company-card__summary">
Attraktiv: Exzellente Profitabilität und starkes Wachstum jenseits des Flaggschiffs. Wichtigstes Risiko ist die hohe Abhängigkeit von einem Produkt mit nahendem Patentablauf.
</p>
</div>
semantic-tokens-layouts.html
+1
View File
@@ -28,6 +28,7 @@
<tr><td>layout-object-card-desktop-breakpoint</td><td>dimension-object-card-desktop-breakpoint</td><td>Breakpoint, ab dem die Desktop-Maße der Object Card aktiv sind.</td></tr>
<tr><td>layout-object-card-content-grow</td><td>dimension-object-card-content-grow</td><td>Flex-Grow-Wert für das vorletzte Segment der Object Card.</td></tr>
<tr><td>layout-object-card-shared-width</td><td>auto</td><td>Geteilte Laufzeitbreite für gekoppelte Object-Card-Instanzen.</td></tr>
<tr><td>layout-company-card-analysis-gap-after-moat</td><td>spacing-large</td><td>Vertikaler Abstand zwischen Moat-Zeile und Analyse-Zusammenfassung in der Company Card.</td></tr>
<tr><td>layout-content-cards-group-gap</td><td>spacing-small</td><td>Abstand zwischen Inhaltsblock-Karten innerhalb der Gruppe.</td></tr>
<tr><td>layout-card-list-drawer-width</td><td>dimension-card-list-drawer-width</td><td>Breite des ausziehbaren Card-Listenbereichs relativ zum Container.</td></tr>
</tbody></table>
semantic-tokens-patterns.html
+6
View File
@@ -47,6 +47,12 @@
<tr><td>surface-object-card-lower-segment</td><td>color-white</td><td>Hintergrundfläche der unteren zwei Segmente der Object Card.</td></tr>
</tbody></table>
<h3 class="sg-sub-heading sg-section-h3">Company Card</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>text-company-card-data-negative</td><td>chart-value-negative</td><td>Textfarbe für negative Kennzahlenwerte im Data-Columns-Segment der Company Card.</td></tr>
<tr><td>text-company-card-moat-neutral</td><td>chart-value-neutral</td><td>Textfarbe für die neutrale Moat-Ausprägung im Analyse-Segment der Company Card.</td></tr>
</tbody></table>
<h3 class="sg-sub-heading sg-section-h3">Navigation Card</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-navigation-card</td><td>color-white</td><td>Grundfläche der Navigation Card.</td></tr>
styleguide.css
+27
View File
@@ -165,6 +165,9 @@
--layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
--layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
--surface-object-card-lower-segment: var(--color-white);
--text-company-card-data-negative: var(--chart-value-negative);
--text-company-card-moat-neutral: var(--chart-value-neutral);
--layout-company-card-analysis-gap-after-moat: var(--spacing-large);
--surface-navigation-card: var(--color-white);
--surface-navigation-card-body: var(--color-white);
--surface-content-block-card-title: var(--color-light-grey);
@@ -1807,6 +1810,30 @@ section + section {
color: var(--color-font-light);
}
.sg-company-card__metric-negative {
color: var(--text-company-card-data-negative);
}
.sg-company-card__analysis-title {
margin: 0;
}
.sg-company-card__analysis-bars {
margin-top: 0;
}
.sg-company-card__moat {
margin: 0;
}
.sg-company-card__moat-neutral {
color: var(--text-company-card-moat-neutral);
}
.sg-company-card__summary {
margin: var(--layout-company-card-analysis-gap-after-moat) 0 0 0;
}
/* ========================================================= */
/* Patterns: Navigation Card */
/* ========================================================= */