Sync styleguide 2026.05.18.2
This commit is contained in:
1 parent
8b163c5734
commit
0c04caeb67
7 files changed
+38
-19
No files matched your search
@@ -1 +1 @@
|
|||||||
2026.05.18.1
|
2026.05.18.2
|
||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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"
|
||||||
}
|
}
|
||||||
@@ -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 {
|
||||||
|
|||||||
Reference in new issue
Block a user