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

Add dedicated Object Group Card width tokens and rules

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-21 09:07:55 +02:00
parent b0e1389f5f
commit 097af6662e
3 changed files with 23 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
semantic-tokens-components.html
+9
View File
@@ -47,6 +47,15 @@
</tbody>
</table>
<h3 class="sg-sub-heading sg-section-h3">Pattern Card Breiten</h3>
<table class="sg-foundation-table sg-table-label">
<thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead>
<tbody>
<tr><td>layout-object-group-card-min-width</td><td>dimension-object-card-min-width</td><td>Mindestbreite der Karteninstanzen im Pattern Object Group Card.</td></tr>
<tr><td>layout-object-group-card-max-width</td><td>dimension-object-card-max-width</td><td>Maximalbreite der Karteninstanzen im Pattern Object Group Card.</td></tr>
</tbody>
</table>
<h3 class="sg-sub-heading sg-section-h3">Text Group Box</h3>
<table class="sg-foundation-table sg-table-label">
<thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead>
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">Object Group 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>layout-object-group-card-min-width</td><td>dimension-object-card-min-width</td><td>Mindestbreite der einzelnen Karten im Pattern Object Group Card.</td></tr>
<tr><td>layout-object-group-card-max-width</td><td>dimension-object-card-max-width</td><td>Maximalbreite der einzelnen Karten im Pattern Object Group 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>
styleguide.css
+8
View File
@@ -164,6 +164,8 @@
--layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
--layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
--layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
--layout-object-group-card-min-width: var(--dimension-object-card-min-width);
--layout-object-group-card-max-width: var(--dimension-object-card-max-width);
--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);
@@ -1806,6 +1808,12 @@ section + section {
margin-top: auto;
}
.sg-object-card[data-pattern="object-group-card"] {
flex: 1 1 var(--layout-object-group-card-min-width);
min-width: var(--layout-object-group-card-min-width);
max-width: var(--layout-object-group-card-max-width);
}
.sg-object-group-card__hint {
color: var(--color-font-light);
}