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

Replace single-score local chart overrides with semantic tokenized variants

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-20 13:54:39 +02:00
parent e4304de9ce
commit 0f84c79b5e
3 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/charts.html
+2 -2
View File
@@ -46,14 +46,14 @@
<p class="sg-preview-label">Pattern: Gesamtscore-Balken</p>
<div class="sg-form-preview-area sg-chart-preview-area">
<div class="sg-score-bar-list" 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">
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Score:</p>
<div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
<div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w96" data-component-part="score-value" data-component-state="positive"></div>
<div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
</div>
<p class="sg-bar-label" data-component-part="score-state">attraktiv</p>
<p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p>
</div>
</div>
</div>
semantic-tokens-components.html
+4
View File
@@ -160,6 +160,10 @@
<tr><td>chart-value-neutral</td><td>color-signal-yellow</td><td>Füllfarbe neutraler Werte.</td></tr>
<tr><td>chart-value-negative</td><td>color-signal-red</td><td>Füllfarbe negativer Werte.</td></tr>
<tr><td>chart-median-line</td><td>color-font-dark</td><td>Farbe der Median-Markierung.</td></tr>
<tr><td>text-score-state-positive</td><td>chart-value-positive</td><td>Textfarbe positiver Zustandslabels am Gesamtscore-Balken.</td></tr>
<tr><td>layout-score-bar-item-columns</td><td>chart-axis-label-column-width und 1fr</td><td>Standardspalten der Score-Bar-Zeile: Labelspalte plus Balkenspur.</td></tr>
<tr><td>layout-score-bar-item-gap</td><td>spacing-large</td><td>Abstand zwischen Labelspalte und Balkenspur in der Score-Bar-Zeile.</td></tr>
<tr><td>layout-score-bar-item-single-score-columns</td><td>max-content, 1fr und max-content</td><td>Spalten der Score-Bar-Zeile in der Single-Score-Variante: Label, Balken, Zustandslabel.</td></tr>
</tbody></table>
<h3 class="sg-sub-heading sg-section-h3">Bar / Line Chart</h3>
styleguide.css
+10 -6
View File
@@ -111,6 +111,10 @@
--chart-marker-line: var(--color-font-dark);
--chart-median-line: var(--color-font-dark);
--text-chart-default: var(--color-font-dark);
--text-score-state-positive: var(--chart-value-positive);
--layout-score-bar-item-columns: var(--chart-axis-label-column-width) 1fr;
--layout-score-bar-item-gap: var(--spacing-large);
--layout-score-bar-item-single-score-columns: max-content 1fr max-content;
/* Semantic component tokens: Data display */
--surface-data-table: var(--color-light-grey);
@@ -2224,20 +2228,20 @@ section + section {
.sg-score-bar-item {
display: grid;
grid-template-columns: var(--chart-axis-label-column-width) 1fr;
gap: var(--spacing-large);
grid-template-columns: var(--layout-score-bar-item-columns);
gap: var(--layout-score-bar-item-gap);
align-items: center;
}
#pattern-gesamtscore-balken .sg-score-bar-item {
grid-template-columns: max-content 1fr max-content;
.sg-score-bar-list--single-score {
--layout-score-bar-item-columns: var(--layout-score-bar-item-single-score-columns);
}
#pattern-gesamtscore-balken [data-component-part="score-state"] {
.sg-score-state--positive {
margin: 0;
justify-self: end;
text-align: right;
color: var(--chart-value-positive);
color: var(--text-score-state-positive);
}
.sg-score-bar-label {