Sync styleguide 2026.05.18.2

This commit is contained in:
gitea_admin committed 2026-09-22 11:50:21 +02:00
1 parent 8b163c5734
commit 0c04caeb67
7 files changed
+38 -19

No files matched your search

+1 -1
View File
@@ -1 +1 @@
2026.05.18.1 2026.05.18.2
+16
View File
@@ -46,6 +46,22 @@
</table> </table>
</section> </section>
<section id="foundations-card-text">
<h2 class="sg-sub-heading sg-text-on-dark">Card Semantic Tokens</h2>
<table class="sg-foundation-table sg-table-label">
<thead>
<tr>
<th>Name</th>
<th>Wert</th>
<th>Verwendung</th>
</tr>
</thead>
<tbody>
<tr><td>text-card-signal</td><td>font-light</td><td>Weiße Schrift auf allen farbigen Signal-Segmenten, unabhängig vom übergeordneten Card-Kontext.</td></tr>
</tbody>
</table>
</section>
<section id="foundations-states"> <section id="foundations-states">
<h2 class="sg-sub-heading sg-text-on-dark">States</h2> <h2 class="sg-sub-heading sg-text-on-dark">States</h2>
<table class="sg-foundation-table sg-table-label"> <table class="sg-foundation-table sg-table-label">
@@ -38,6 +38,7 @@
--surface-card-header-muted: var(--color-darkbrown); --surface-card-header-muted: var(--color-darkbrown);
--divider-card-segment: var(--color-white); --divider-card-segment: var(--color-white);
--text-card-header: var(--color-font-light); --text-card-header: var(--color-font-light);
--text-card-signal: var(--color-font-light);
--text-card-body: var(--color-font-dark); --text-card-body: var(--color-font-dark);
--text-card-transparent: var(--color-font-light); --text-card-transparent: var(--color-font-light);
--layout-card-body-content-justify: flex-start; --layout-card-body-content-justify: flex-start;
@@ -136,27 +136,27 @@
.sg-card-segment--signal-red { .sg-card-segment--signal-red {
background: var(--color-signal-red); background: var(--color-signal-red);
color: var(--text-card-header); color: var(--text-card-signal);
} }
.sg-card-segment--signal-green { .sg-card-segment--signal-green {
background: var(--color-signal-green); background: var(--color-signal-green);
color: var(--text-card-header); color: var(--text-card-signal);
} }
.sg-card-segment--signal-green-light { .sg-card-segment--signal-green-light {
background: var(--color-signal-green-light); background: var(--color-signal-green-light);
color: var(--text-card-header); color: var(--text-card-signal);
} }
.sg-card-segment--signal-green-red { .sg-card-segment--signal-green-red {
background: var(--color-signal-green-red); background: var(--color-signal-green-red);
color: var(--text-card-header); color: var(--text-card-signal);
} }
.sg-card-segment--signal-yellow { .sg-card-segment--signal-yellow {
background: var(--color-signal-yellow); background: var(--color-signal-yellow);
color: var(--text-card-header); color: var(--text-card-signal);
} }
.sg-card-segment--gray { .sg-card-segment--gray {
+6 -5
View File
@@ -38,6 +38,7 @@
--surface-card-header-muted: var(--color-darkbrown); --surface-card-header-muted: var(--color-darkbrown);
--divider-card-segment: var(--color-white); --divider-card-segment: var(--color-white);
--text-card-header: var(--color-font-light); --text-card-header: var(--color-font-light);
--text-card-signal: var(--color-font-light);
--text-card-body: var(--color-font-dark); --text-card-body: var(--color-font-dark);
--text-card-transparent: var(--color-font-light); --text-card-transparent: var(--color-font-light);
--layout-card-body-content-justify: flex-start; --layout-card-body-content-justify: flex-start;
@@ -4392,27 +4393,27 @@ main {
.sg-card-segment--signal-red { .sg-card-segment--signal-red {
background: var(--color-signal-red); background: var(--color-signal-red);
color: var(--text-card-header); color: var(--text-card-signal);
} }
.sg-card-segment--signal-green { .sg-card-segment--signal-green {
background: var(--color-signal-green); background: var(--color-signal-green);
color: var(--text-card-header); color: var(--text-card-signal);
} }
.sg-card-segment--signal-green-light { .sg-card-segment--signal-green-light {
background: var(--color-signal-green-light); background: var(--color-signal-green-light);
color: var(--text-card-header); color: var(--text-card-signal);
} }
.sg-card-segment--signal-green-red { .sg-card-segment--signal-green-red {
background: var(--color-signal-green-red); background: var(--color-signal-green-red);
color: var(--text-card-header); color: var(--text-card-signal);
} }
.sg-card-segment--signal-yellow { .sg-card-segment--signal-yellow {
background: var(--color-signal-yellow); background: var(--color-signal-yellow);
color: var(--text-card-header); color: var(--text-card-signal);
} }
.sg-card-segment--gray { .sg-card-segment--gray {
+3 -3
View File
@@ -1,7 +1,7 @@
{ {
"styleguideVersion": "2026.05.18.1", "styleguideVersion": "2026.05.18.2",
"styleguideCommit": "4e4474e", "styleguideCommit": "08bf51e",
"syncedAtUtc": "2026-09-22T07:55:02Z", "syncedAtUtc": "2026-09-22T09:50:21Z",
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
"mirroredDocsPath": "docs/styleguide" "mirroredDocsPath": "docs/styleguide"
} }
+6 -5
View File
@@ -38,6 +38,7 @@
--surface-card-header-muted: var(--color-darkbrown); --surface-card-header-muted: var(--color-darkbrown);
--divider-card-segment: var(--color-white); --divider-card-segment: var(--color-white);
--text-card-header: var(--color-font-light); --text-card-header: var(--color-font-light);
--text-card-signal: var(--color-font-light);
--text-card-body: var(--color-font-dark); --text-card-body: var(--color-font-dark);
--text-card-transparent: var(--color-font-light); --text-card-transparent: var(--color-font-light);
--layout-card-body-content-justify: flex-start; --layout-card-body-content-justify: flex-start;
@@ -4392,27 +4393,27 @@ main {
.sg-card-segment--signal-red { .sg-card-segment--signal-red {
background: var(--color-signal-red); background: var(--color-signal-red);
color: var(--text-card-header); color: var(--text-card-signal);
} }
.sg-card-segment--signal-green { .sg-card-segment--signal-green {
background: var(--color-signal-green); background: var(--color-signal-green);
color: var(--text-card-header); color: var(--text-card-signal);
} }
.sg-card-segment--signal-green-light { .sg-card-segment--signal-green-light {
background: var(--color-signal-green-light); background: var(--color-signal-green-light);
color: var(--text-card-header); color: var(--text-card-signal);
} }
.sg-card-segment--signal-green-red { .sg-card-segment--signal-green-red {
background: var(--color-signal-green-red); background: var(--color-signal-green-red);
color: var(--text-card-header); color: var(--text-card-signal);
} }
.sg-card-segment--signal-yellow { .sg-card-segment--signal-yellow {
background: var(--color-signal-yellow); background: var(--color-signal-yellow);
color: var(--text-card-header); color: var(--text-card-signal);
} }
.sg-card-segment--gray { .sg-card-segment--gray {